:root{
  --void:#17222F;
  --void-deep:#101923;
  --glass:rgba(255,255,255,0.05);
  --glass-border:rgba(255,255,255,0.10);
  --glass-border-hi:rgba(255,255,255,0.24);
  --hi:#F2F7FC;
  --mid:#A9BBCE;
  --dim:#6F8299;
  --gold:#3EC8EE;
  --blue:#4A9FE8;
  --teal:#3EC8EE;
  --violet:#7C9FF2;
  --on-accent:#08131E;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --void:#FFFFFF;
  --void-deep:#F2F5FB;
  --glass:rgba(10,35,79,0.035);
  --glass-border:rgba(10,35,79,0.12);
  --glass-border-hi:rgba(10,35,79,0.24);
  --hi:#0B1B36;
  --mid:#48577A;
  --dim:#7C879E;
  --gold:#2563EB;
  --blue:#2E6BFF;
  --teal:#0EA5C4;
  --violet:#9333EA;
  color-scheme:light;
}
*{margin:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:clip;}
body{
  font-family:'Inter',sans-serif;
  color:var(--hi);
  background:var(--void);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(74,159,232,0.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 30%, rgba(124,159,242,0.12), transparent 60%);
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:-0.015em;color:var(--hi);}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px;}
.grad-text{
  background:linear-gradient(100deg,var(--blue),var(--teal) 40%,var(--violet) 70%,var(--blue));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@media (prefers-reduced-motion: reduce){.grad-text{animation:none;}}
::selection{background:rgba(62,200,238,0.28);color:var(--hi);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--void-deep);}
::-webkit-scrollbar-thumb{background:rgba(102,117,156,0.4);border-radius:8px;border:2px solid var(--void-deep);}
::-webkit-scrollbar-thumb:hover{background:rgba(102,117,156,0.65);}
.eyebrow{
  font-size:12.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:15px;font-weight:600;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;font-family:'Inter',sans-serif;border:none;
  position:relative;overflow:hidden;
}
.btn-primary{background:linear-gradient(100deg,var(--blue),var(--teal) 65%,var(--violet));color:var(--on-accent);box-shadow:0 8px 28px rgba(74,159,232,0.35);}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,0.45),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(62,200,238,0.42);}
.btn-primary:hover::after{left:130%;}
.btn-glass{background:var(--glass);color:var(--hi);border:1px solid var(--glass-border);backdrop-filter:blur(6px);}
.btn-glass:hover{border-color:var(--glass-border-hi);transform:translateY(-2px);}

/* NAV */
header{
  position:sticky;top:0;z-index:50;background:rgba(23,34,47,0.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border);
  transition:background .25s ease, box-shadow .25s ease;
}
header.scrolled{background:rgba(16,25,35,0.9);box-shadow:0 10px 30px -12px rgba(0,0,0,0.5);}
[data-theme="light"] header.scrolled{background:rgba(255,255,255,0.92);box-shadow:0 10px 30px -18px rgba(10,35,79,0.25);}
nav{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0;}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{width:38px;height:38px;object-fit:cover;border-radius:8px;}
.brand-name{font-family:'Space Grotesk';font-weight:600;font-size:17px;color:var(--hi);}
.brand-tag{font-size:10px;color:var(--dim);letter-spacing:0.06em;text-transform:uppercase;}
.navlinks{
  display:flex;gap:4px;font-size:15.5px;color:var(--mid);flex-shrink:0;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:5px;
}
.navlinks a{padding:8px 18px;border-radius:999px;transition:color .18s ease, background .18s ease;}
.navlinks a:hover{color:var(--hi);background:rgba(255,255,255,0.06);}
.navlinks a.active{
  color:var(--hi);
  background:color-mix(in srgb, var(--blue) 20%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--teal) 35%, transparent);
}
[data-theme="light"] .navlinks{background:#FFFFFF;box-shadow:0 1px 2px rgba(10,35,79,0.05);}
[data-theme="light"] .navlinks a:hover{background:rgba(10,35,79,0.05);}
[data-theme="light"] .navlinks a.active{background:color-mix(in srgb, #2E6BFF 12%, transparent);}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-toggle{display:none;background:none;border:1px solid var(--glass-border);border-radius:10px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--hi);position:relative;transition:transform .2s ease, opacity .2s ease;}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}

/* DECORATIVE BACKGROUNDS */
.bg-dots{background-image:url('../assets/dot-grid.svg');background-size:64px 64px;background-repeat:repeat;}
.hero-graphic{position:absolute;top:50%;right:-60px;transform:translateY(-50%);width:560px;max-width:52vw;opacity:1;pointer-events:none;z-index:0;filter:drop-shadow(0 0 60px rgba(74,159,232,0.35));}
.cta-graphic{position:absolute;top:50%;right:-70px;transform:translateY(-50%);width:380px;max-width:42vw;opacity:0.75;pointer-events:none;z-index:0;filter:drop-shadow(0 0 40px rgba(124,159,242,0.3));}
@media (max-width:760px){.hero-graphic,.cta-graphic{display:none;}}

/* PAGE HERO (secondary pages) */
.page-hero{padding:64px 0 56px;border-bottom:1px solid var(--glass-border);background:var(--void-deep);position:relative;overflow:hidden;}
.page-hero::before{
  content:"";position:absolute;top:-140px;right:-100px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(74,159,232,0.32), transparent 70%);filter:blur(60px);pointer-events:none;
}
.page-hero::after{
  content:"";position:absolute;bottom:-160px;left:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle, rgba(124,159,242,0.22), transparent 70%);filter:blur(60px);pointer-events:none;
}
.page-hero h1{font-size:41px;margin-bottom:14px;overflow-wrap:break-word;}
.page-hero p{color:var(--mid);font-size:16px;max-width:640px;}
.breadcrumb{font-size:13.5px;color:var(--dim);margin-bottom:18px;}
.breadcrumb a:hover{color:var(--mid);}
.page-hero .wrap{position:relative;z-index:1;}

/* HERO */
.hero{
  position:relative;overflow:hidden;padding:120px 0 100px;
  background-image:linear-gradient(100deg, rgba(16,25,35,0.88) 0%, rgba(16,25,35,0.62) 45%, rgba(23,34,47,0.28) 75%), url('../assets/hero-city.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero.bg-dots{background-position:center;}
.hero .blob,.hero .hero-graphic{display:none;}
/* light mode uses the same hero photo, only the overlay tint changes */
[data-theme="light"] .hero{
  background-image:linear-gradient(100deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.78) 45%, rgba(242,245,251,0.5) 75%), url('../assets/hero-city.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
@media (max-width:760px){
  .hero{background-image:linear-gradient(180deg, rgba(16,25,35,0.88), rgba(16,25,35,0.72)), url('../assets/hero-city.jpg');background-position:center right;}
  [data-theme="light"] .hero{background-image:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)), url('../assets/hero-city.jpg');background-position:center right;}
}
.blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.45;pointer-events:none;}
.blob-1{width:560px;height:560px;background:var(--blue);top:-200px;right:-140px;animation:drift1 22s ease-in-out infinite alternate;}
.blob-2{width:460px;height:460px;background:var(--teal);bottom:-180px;left:-120px;animation:drift2 26s ease-in-out infinite alternate;}
.blob-3{width:400px;height:400px;background:var(--violet);top:35%;left:52%;opacity:0.32;animation:drift3 30s ease-in-out infinite alternate;}
@keyframes drift1{from{transform:translate(0,0);}to{transform:translate(-60px,50px);}}
@keyframes drift2{from{transform:translate(0,0);}to{transform:translate(50px,-40px);}}
@keyframes drift3{from{transform:translate(0,0);}to{transform:translate(-40px,-60px);}}
@media (prefers-reduced-motion: reduce){.blob{animation:none;}}
.hero-inner{max-width:720px;position:relative;z-index:1;}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(8px);
  border-radius:999px;padding:7px 16px;margin-bottom:22px;
  font-size:13px;font-weight:500;color:var(--mid);letter-spacing:0.02em;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#34D399;flex:none;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.55);}50%{box-shadow:0 0 0 6px rgba(52,211,153,0);}}
.hero h1{font-size:56px;line-height:1.1;margin-bottom:22px;letter-spacing:-0.025em;}
.hero p.lead{font-size:18px;color:var(--mid);margin-bottom:34px;max-width:580px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;}

.stat-row{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}
.stat-pill{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);border-radius:16px;padding:16px 22px;min-width:150px;}
.cap-pill{
  display:flex;align-items:center;gap:14px;flex:1;min-width:230px;
  background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);
  border-radius:16px;padding:16px 20px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cap-pill:hover{transform:translateY(-3px);border-color:var(--glass-border-hi);box-shadow:0 14px 28px -16px var(--cap-accent,var(--blue));}
.cap-icon{
  width:40px;height:40px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--cap-accent,var(--teal)) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--cap-accent,var(--teal)) 32%, transparent);
}
.cap-icon svg{width:19px;height:19px;stroke:var(--cap-accent,var(--teal));fill:none;}
.cap-t{font-family:'Space Grotesk';font-weight:600;font-size:15px;color:var(--hi);}
.cap-s{font-size:12.5px;color:var(--dim);margin-top:2px;}
[data-theme="light"] .cap-pill{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}
.stat-pill .num{font-family:'Space Grotesk';font-size:25px;font-weight:700;color:var(--hi);}
.stat-pill .label{font-size:12.5px;color:var(--dim);margin-top:2px;}

section{padding:104px 0;position:relative;}
.section-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.section-head.left{margin:0 0 40px;text-align:left;}
.section-head h2{font-size:34px;margin-bottom:14px;}
.section-head p{color:var(--mid);font-size:16px;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;transition-delay:var(--reveal-delay,0s);}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* TECH MARQUEE */
.tech-band{
  padding:26px 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);
  background:var(--void-deep);overflow:hidden;position:relative;
}
.tech-band::before,.tech-band::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none;
}
.tech-band::before{left:0;background:linear-gradient(90deg,var(--void-deep),transparent);}
.tech-band::after{right:0;background:linear-gradient(-90deg,var(--void-deep),transparent);}
.tech-track{display:flex;gap:64px;width:max-content;animation:marquee 32s linear infinite;}
.tech-band:hover .tech-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.tech-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;}}
.tech-item{
  display:flex;align-items:center;gap:10px;white-space:nowrap;flex:none;
  font-family:'Space Grotesk';font-size:14px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);
}
.tech-item svg{width:16px;height:16px;stroke:var(--teal);fill:none;flex:none;}

/* PROCESS */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;}
.process-card{
  position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;
  padding:26px 22px;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.process-card:hover{border-color:var(--glass-border-hi);transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(74,159,232,0.35);}
.process-num{
  font-family:'Space Grotesk';font-weight:700;font-size:13.5px;letter-spacing:0.08em;
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(74,159,232,0.16),rgba(62,200,238,0.16));
  border:1px solid rgba(62,200,238,0.3);color:var(--teal);
}
.process-card h3{font-size:16px;margin-bottom:8px;}
.process-card p{font-size:13.5px;color:var(--mid);}
[data-theme="light"] .process-card{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}

/* PRODUCTS � image-first tiles (dark glass by default, light override below) */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.product-card{
  background:linear-gradient(165deg, #202E3F 0%, #141F2C 100%);border:1px solid rgba(255,255,255,0.09);border-radius:20px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;height:460px;
  box-shadow:0 1px 2px rgba(0,0,0,0.25), 0 12px 28px -16px rgba(0,0,0,0.55);
}
[data-theme="light"] .product-card{
  background:linear-gradient(165deg, #ffffff 0%, #e6eefb 100%);border:1px solid rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 12px 28px -16px rgba(10,35,79,0.16);
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -20px var(--card-accent);}
.product-card:focus-visible{outline:2px solid var(--card-accent);outline-offset:3px;}
/* floating category chip, rendered from data-tag so HTML stays untouched */
.product-card::after{
  content:attr(data-tag);
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--card-accent);background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);
  padding:5px 13px;border-radius:999px;box-shadow:0 4px 14px rgba(10,35,79,0.18);
  pointer-events:none;
}
.product-body{flex:1 1 auto;padding:0 18px 16px;position:relative;z-index:2;}
.product-icon{
  width:42px;height:42px;border-radius:50%;background:var(--card-accent);
  display:flex;align-items:center;justify-content:center;flex:none;
  margin:-21px 0 10px;border:3px solid #1D2A39;position:relative;z-index:2;
  box-shadow:0 8px 18px -6px var(--card-accent);
  transition:transform .25s ease;
}
[data-theme="light"] .product-icon{border-color:#fff;}
.product-card:hover .product-icon{transform:translateY(-3px) scale(1.06);}
.product-icon svg{width:18px;height:18px;stroke:#fff;fill:none;}
.product-card h3{
  font-size:17px;line-height:1.25;margin:0 0 6px;color:var(--hi);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[data-theme="light"] .product-card h3{color:#0B1B36;}
.product-rule{width:24px;height:2.5px;border-radius:2px;background:var(--card-accent);margin:0 0 9px;transition:width .3s ease;}
.product-card:hover .product-rule{width:48px;}
.product-card p{
  font-size:12.8px;color:var(--mid);margin:0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
[data-theme="light"] .product-card p{color:#5B6B85;}
/* image sits first via order flip; zoom happens on an inherited-background layer */
.product-image{position:relative;flex:0 0 56%;order:-1;overflow:hidden;background-size:cover;background-position:center;}
.product-image::before{
  content:"";position:absolute;inset:0;
  background-image:inherit;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.2,.8,.3,1);will-change:transform;
}
.product-card:hover .product-image::before{transform:scale(1.07);}
.product-image::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,27,54,0.08) 0%, transparent 30%, transparent 60%, rgba(10,27,54,0.22) 100%);
}
.product-image.bg-contain{background-size:contain;background-repeat:no-repeat;background-color:#F2F5FB;}
.product-image.bg-contain::before{background-size:contain;background-repeat:no-repeat;background-color:#F2F5FB;}
.product-image.bg-contain::after{background:linear-gradient(180deg, transparent 70%, rgba(10,27,54,0.10) 100%);}
.product-card-go{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:36px;height:36px;border-radius:50%;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(10,35,79,0.22);
  transition:transform .25s ease, background .25s ease;
}
.product-card-go svg{width:15px;height:15px;stroke:var(--card-accent);transition:stroke .25s ease, transform .25s ease;}
.product-card:hover .product-card-go{transform:scale(1.12);background:var(--card-accent);}
.product-card:hover .product-card-go svg{stroke:#fff;transform:rotate(45deg);}
.more-note{text-align:center;color:var(--dim);font-size:13.5px;margin-top:28px;}

/* PRODUCTS PAGE � hero pills, flagship spotlight, portfolio */
.hero-pills{margin-top:24px;}
.hero-pills .pill{display:inline-flex;align-items:center;gap:8px;}
.hero-pills .pill svg{width:14px;height:14px;stroke:var(--teal);fill:none;flex:none;}
[data-theme="light"] .hero-pills .pill svg{stroke:#2E6BFF;}

.spotlight-section{padding:104px 0 0;}
.portfolio-section{padding:104px 0;}
.spotlight-panel{
  display:grid;grid-template-columns:1.05fr 0.95fr;align-items:stretch;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:24px;overflow:hidden;
  position:relative;
}
.spotlight-panel + .spotlight-panel{margin-top:28px;}
.spotlight-panel.flip .spotlight-media{order:-1;}
.spotlight-panel.flip .spotlight-media::before{background:linear-gradient(-90deg, var(--void-deep) 0%, transparent 26%);}
.spotlight-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--card-accent,var(--blue)),transparent 80%);
}
.spotlight-panel.flip::before{background:linear-gradient(-90deg,var(--card-accent,var(--blue)),transparent 80%);}
.spotlight-body{padding:52px 48px;}
.spotlight-body h2{font-size:34px;margin-bottom:14px;}
.spotlight-body > p{color:var(--mid);font-size:15.5px;line-height:1.7;margin-bottom:24px;max-width:480px;}
.spotlight-points{display:flex;flex-direction:column;gap:12px;margin-bottom:30px;}
.spotlight-point{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--hi);line-height:1.5;}
.spotlight-point svg{width:16px;height:16px;stroke:var(--teal);fill:none;flex:none;margin-top:3px;}
.spotlight-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.spotlight-media{position:relative;min-height:420px;background-size:cover;background-position:center;}
.spotlight-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, var(--void-deep) 0%, transparent 26%);opacity:0.55;
}
.spotlight-chip{
  position:absolute;left:20px;bottom:20px;z-index:1;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(16,25,35,0.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18);
  color:#F5F8FF;font-size:13px;font-weight:500;padding:8px 16px;border-radius:999px;
}
.spotlight-chip .dot{width:7px;height:7px;border-radius:50%;background:#34D399;flex:none;animation:pulse 2s ease-in-out infinite;}
[data-theme="light"] .spotlight-panel{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 20px 44px -20px rgba(10,35,79,0.18);
}

/* PRODUCT DETAIL MODAL */
.product-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
.product-modal.open{display:flex;}
.product-modal-backdrop{position:absolute;inset:0;background:rgba(10,17,25,0.72);backdrop-filter:blur(6px);}
.product-modal-panel{
  position:relative;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;
  background:var(--void-deep);border:1px solid var(--glass-border);border-radius:22px;
  box-shadow:0 40px 90px -24px rgba(0,0,0,0.55);
  animation:modalIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.product-modal-image{
  height:190px;background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--void-deep);position:relative;border-bottom:1px solid var(--glass-border);
}
.product-modal-image::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--modal-accent);}
.product-modal-close{
  position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(8,13,20,0.55);border:1px solid rgba(255,255,255,0.2);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;
}
.product-modal-close:hover{background:rgba(8,13,20,0.8);}
.product-modal-close svg{width:16px;height:16px;}
.product-modal-body{padding:28px 28px 32px;}
.product-modal-body .eyebrow{color:var(--modal-accent);}
.product-modal-body .eyebrow::before{background:var(--modal-accent);}
.product-modal-body h3{font-size:24px;margin-bottom:14px;}
.product-modal-body p{font-size:15px;color:var(--mid);line-height:1.7;}
body.modal-open{overflow:hidden;}

/* SERVICES */
.services-section{background:var(--void-deep);position:relative;overflow:hidden;}
.services-section::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:70%;max-width:720px;height:320px;z-index:0;
  background:radial-gradient(ellipse, rgba(74,159,232,0.16), transparent 70%);filter:blur(50px);pointer-events:none;
}
.services-section .wrap{position:relative;z-index:1;}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.service-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:24px 20px;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;position:relative;overflow:hidden;}
.service-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--violet));opacity:0;transition:opacity .2s ease;}
.service-card:hover{border-color:var(--glass-border-hi);transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(74,159,232,0.4);}
.service-card:hover::before{opacity:1;}
.service-tag{display:inline-block;font-family:'Space Grotesk';font-size:12px;font-weight:600;color:var(--teal);border:1px solid rgba(56,189,248,0.35);padding:4px 10px;border-radius:8px;margin-bottom:16px;}
.service-card h3{font-size:15.5px;margin-bottom:8px;}
.service-card p{font-size:13.3px;color:var(--mid);}

/* SERVICES PAGE � accent icon cards + engagement models */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.svc-card{
  display:flex;flex-direction:column;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;
  padding:28px 24px 24px;position:relative;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--svc-accent),transparent 85%);
  opacity:0;transition:opacity .22s ease;
}
.svc-card::after{
  content:"";position:absolute;top:-70px;right:-70px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle, var(--svc-accent), transparent 70%);
  opacity:0.08;transition:opacity .22s ease;pointer-events:none;
}
.svc-card:hover{transform:translateY(-4px);border-color:var(--glass-border-hi);box-shadow:0 20px 40px -20px var(--svc-accent);}
.svc-card:hover::before{opacity:1;}
.svc-card:hover::after{opacity:0.16;}
.svc-icon{
  width:46px;height:46px;border-radius:13px;margin-bottom:18px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--svc-accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--svc-accent) 32%, transparent);
  transition:transform .22s ease;
}
.svc-card:hover .svc-icon{transform:translateY(-2px) scale(1.05);}
.svc-icon svg{width:21px;height:21px;stroke:var(--svc-accent);fill:none;}
.svc-card h3{font-size:17px;margin-bottom:8px;}
.svc-card p{font-size:14px;color:var(--mid);line-height:1.6;margin-bottom:18px;}
.svc-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--svc-accent);
}
.svc-link svg{width:14px;height:14px;transition:transform .2s ease;}
.svc-card:hover .svc-link svg{transform:translateX(4px);}
[data-theme="light"] .svc-card{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}
[data-theme="light"] .svc-card:hover{box-shadow:0 20px 40px -18px var(--svc-accent);}

.engage-section{padding:104px 0;}
.engage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.engage-card{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.engage-card:hover{transform:translateY(-3px);border-color:var(--glass-border-hi);box-shadow:0 16px 32px -16px rgba(74,159,232,0.35);}
.engage-num{
  font-family:'Space Grotesk';font-weight:700;font-size:41px;line-height:1;margin-bottom:16px;
  background:linear-gradient(120deg,var(--blue),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.engage-card h3{font-size:18px;margin-bottom:9px;}
.engage-card p{font-size:14px;color:var(--mid);line-height:1.65;}
[data-theme="light"] .engage-card{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:start;}
.quote-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:32px;position:relative;}
.quote-card::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--blue),var(--teal));}
.quote-card blockquote{font-family:'Space Grotesk';font-size:22px;font-weight:600;line-height:1.4;color:var(--hi);padding-left:18px;}
.support-text{color:var(--mid);font-size:15px;margin:26px 0;}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;}
.pill{border:1px solid var(--glass-border-hi);color:var(--mid);font-size:13px;font-weight:500;padding:7px 16px;border-radius:20px;}

.value-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;flex:none;font-family:'Space Grotesk';font-weight:700;font-size:15.5px;color:var(--on-accent);}
.about-stats{margin-bottom:64px;}
.about-stats .stat-pill{flex:1;min-width:150px;}
.values-section{background:var(--void-deep);position:relative;overflow:hidden;}
.values-section::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:70%;max-width:720px;height:320px;z-index:0;
  background:radial-gradient(ellipse, rgba(124,159,242,0.14), transparent 70%);filter:blur(50px);pointer-events:none;
}
.values-section .wrap{position:relative;z-index:1;}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.value-card{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;padding:26px 24px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.value-card:hover{transform:translateY(-3px);border-color:var(--glass-border-hi);box-shadow:0 16px 32px -16px rgba(124,159,242,0.35);}
.value-card .value-icon{margin-bottom:16px;}
.value-card h4{font-size:17px;color:var(--hi);margin-bottom:7px;font-family:'Space Grotesk';}
.value-card p{font-size:14px;color:var(--mid);line-height:1.6;}
[data-theme="light"] .value-card{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}

/* CONTACT */
.contact-section{padding:104px 0;}
.contact-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px;}
.quick-card{
  display:flex;align-items:center;gap:16px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;padding:22px 24px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.quick-card:hover{transform:translateY(-3px);border-color:var(--glass-border-hi);box-shadow:0 16px 32px -18px var(--svc-accent);}
.quick-card .svc-icon{margin-bottom:0;}
.quick-card h3{font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--dim);margin-bottom:4px;}
.quick-card p{font-size:15px;color:var(--hi);font-weight:500;}
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:start;}
.form-card{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:22px;padding:38px 36px;
  position:relative;overflow:hidden;
}
.form-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--teal),var(--violet));
}
.form-card h2{font-size:25px;margin-bottom:24px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.next-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--glass-border);}
.next-step:last-of-type{border-bottom:none;}
.next-num{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:14.5px;color:var(--teal);
  border:1.5px solid rgba(62,200,238,0.35);
  background:color-mix(in srgb, var(--teal) 8%, transparent);
}
.next-step h4{font-size:15.5px;color:var(--hi);margin-bottom:4px;font-family:'Space Grotesk';}
.next-step p{font-size:14px;color:var(--mid);line-height:1.55;}
.reply-chip{
  display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;
  padding:9px 18px;font-size:13.3px;font-weight:500;color:var(--mid);
}
.reply-chip .dot{width:7px;height:7px;border-radius:50%;background:#34D399;flex:none;animation:pulse 2s ease-in-out infinite;}
[data-theme="light"] .quick-card,
[data-theme="light"] .form-card,
[data-theme="light"] .reply-chip{
  background:#FFFFFF;border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}
[data-theme="light"] .next-num{border-color:rgba(46,107,255,0.3);color:#2E6BFF;background:color-mix(in srgb, #2E6BFF 6%, transparent);}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13.5px;color:var(--mid);margin-bottom:7px;font-weight:500;}
.form-group input,.form-group textarea{
  width:100%;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;
  padding:12px 14px;color:var(--hi);font-family:'Inter',sans-serif;font-size:14.5px;
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--dim);opacity:0.7;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--glass-border-hi);}
.form-group textarea{resize:vertical;min-height:120px;}
.form-note{font-size:13px;color:var(--dim);margin-top:14px;}

/* CTA BAND */
.cta-band{padding:0 0 104px;}
.cta-panel{
  max-width:1280px;margin:0 auto;padding:72px 48px;border-radius:28px;text-align:center;
  background:radial-gradient(circle at 25% 15%, rgba(74,159,232,0.4), transparent 55%),
             radial-gradient(circle at 80% 85%, rgba(62,200,238,0.28), transparent 55%),
             radial-gradient(circle at 90% 10%, rgba(124,159,242,0.22), transparent 50%),
             var(--void-deep);
  border:1px solid var(--glass-border);position:relative;overflow:hidden;
}
.cta-panel h2{font-size:32px;margin-bottom:26px;}
.cta-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}

footer{padding:64px 0 32px;background:var(--void-deep);border-top:1px solid var(--glass-border);position:relative;}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--blue),var(--teal),var(--violet),transparent);opacity:0.5;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;margin-bottom:48px;}
.foot-grid h4{font-size:12.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--hi);margin-bottom:18px;font-weight:600;position:relative;padding-bottom:10px;}
.foot-grid h4::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--teal));}
.foot-grid p,.foot-grid a{font-size:14.5px;color:var(--mid);display:block;margin-bottom:10px;}
.foot-grid a{width:fit-content;transition:color .18s ease, transform .18s ease;}
.foot-grid a:hover{color:var(--hi);transform:translateX(3px);}
.foot-blurb{max-width:320px;line-height:1.65;}
.foot-addr{font-size:13px;color:var(--dim);max-width:300px;}
.foot-cta{margin-top:8px;padding:9px 18px;font-size:13.5px;}
.foot-grid a.foot-cta:hover{transform:translateY(-2px);}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.foot-brand img{width:34px;height:34px;border-radius:8px;}
.foot-brand span{font-family:'Space Grotesk';font-weight:600;color:var(--hi);font-size:15.5px;}
.foot-bottom{border-top:1px solid var(--glass-border);padding-top:22px;font-size:13px;color:var(--dim);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.to-top{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;
  color:var(--mid);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:8px 16px;
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.to-top:hover{color:var(--hi);border-color:var(--glass-border-hi);transform:translateY(-2px);}
.to-top svg{width:13px;height:13px;}
[data-theme="light"] .to-top{background:#FFFFFF;box-shadow:0 1px 2px rgba(10,35,79,0.05);}

@media (max-width:980px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .engage-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .contact-quick{grid-template-columns:1fr;}
  .spotlight-panel{grid-template-columns:1fr;}
  .spotlight-media{min-height:280px;order:-1;}
  .about-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .hero{padding:90px 0 70px;}
  .hero h1{font-size:38px;}
  .page-hero h1{font-size:30px;}
  .nav-toggle{display:flex;}
  .navlinks{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--void-deep);
    border:none;border-radius:0;border-bottom:1px solid var(--glass-border);
    flex-direction:column;gap:0;padding:8px 32px 16px;
  }
  [data-theme="light"] .navlinks{background:#FFFFFF;box-shadow:none;}
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 0;border-radius:0;border-bottom:1px solid var(--glass-border);}
  .navlinks a:hover,.navlinks a.active{background:none;box-shadow:none;}
  .navlinks a:last-child{border-bottom:none;}
  .nav-right .btn-primary{padding:11px 20px;font-size:14px;}
  .product-grid,.service-grid,.process-grid,.svc-grid,.value-grid{grid-template-columns:1fr;}
  .engage-section{padding:70px 0;}
  .contact-section{padding:70px 0;}
  .form-row{grid-template-columns:1fr;gap:0;}
  .form-card{padding:28px 22px;}
  .foot-bottom{justify-content:center;text-align:center;}
  .foot-grid{grid-template-columns:1fr;}
  .cta-panel{padding:48px 26px;border-radius:20px;}
  .stat-row{gap:10px;}
  .stat-pill{min-width:130px;padding:14px 18px;}
  .cap-pill{min-width:100%;padding:14px 18px;}
  .spotlight-body{padding:32px 26px;}
  .spotlight-body h2{font-size:27px;}
  .spotlight-section{padding:70px 0 0;}
  .portfolio-section{padding:70px 0;}
}

/* very small screens: the full nav (brand + CTA + toggles) is wider than the
   viewport, which forces mobile browsers to zoom the whole page out */
@media (max-width:560px){
  nav{padding:14px 18px;gap:12px;}
  .wrap{padding:0 20px;}
  .navlinks{padding:8px 20px 16px;}
  .nav-right{gap:10px;}
  .nav-right .btn-primary{display:none;}
  .brand-tag{display:none;}
  .brand img{width:34px;height:34px;}
}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;}

/* LIGHT THEME OVERRIDES */
[data-theme="light"] header{background:rgba(255,255,255,0.78);}
[data-theme="light"] body::before{
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(74,159,232,0.12), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 30%, rgba(147,51,234,0.10), transparent 60%);
}
/* elevated white cards read much better on light backgrounds than a translucent tint */
[data-theme="light"] .stat-pill,
[data-theme="light"] .service-card,
[data-theme="light"] .quote-card,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] .btn-glass{
  background:#FFFFFF;
  border-color:rgba(10,35,79,0.08);
  box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 14px 32px -16px rgba(10,35,79,0.14);
}
[data-theme="light"] .btn-glass{box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 8px 20px -10px rgba(10,35,79,0.12);}
[data-theme="light"] .btn-glass:hover{box-shadow:0 4px 8px rgba(10,35,79,0.05), 0 16px 32px -14px rgba(10,35,79,0.18);}
[data-theme="light"] .service-card:hover{border-color:rgba(10,35,79,0.14);box-shadow:0 20px 40px -18px rgba(46,107,255,0.28);}
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus{box-shadow:0 1px 2px rgba(10,35,79,0.04), 0 0 0 3px rgba(46,107,255,0.14);}
[data-theme="light"] .service-tag{background:rgba(14,165,196,0.08);}
[data-theme="light"] .pill{background:#FFFFFF;box-shadow:0 1px 2px rgba(10,35,79,0.04);}
[data-theme="light"] .nav-toggle,
[data-theme="light"] .theme-toggle{background:#FFFFFF;box-shadow:0 1px 2px rgba(10,35,79,0.04);}

/* THEME TOGGLE */
.theme-toggle{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:10px;
  background:var(--glass);border:1px solid var(--glass-border);color:var(--hi);cursor:pointer;
  transition:border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover{border-color:var(--glass-border-hi);transform:translateY(-2px);}
.theme-toggle svg{width:18px;height:18px;display:none;}
.theme-toggle .icon-sun{display:block;}
[data-theme="light"] .theme-toggle .icon-sun{display:none;}
[data-theme="light"] .theme-toggle .icon-moon{display:block;}