/* ============================================================
   CTC  Creative Technology Company
   Shared site stylesheet
   Foundation: banner.html + banner-vertical.html (verbatim)
   Extended with: navigation, page sections, cards, footer
   ============================================================ */

:root{
  --bg:#04060c;
  --bg-2:#06091a;
  --ink:#e9eefc;
  --muted:#7a86a8;
  --muted-2:#a9b3d3;
  --blue:#2b4ed6;
  --cyan:#10b981;
  --violet:#4338ca;
  --pink:#d4af37;
  --line:rgba(120,140,200,.14);
  --glass:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --glass-strong:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  --glass-border:1px solid rgba(255,255,255,.1);
  --radius:18px;
  --radius-lg:24px;
  --shadow-card:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-glow:0 14px 40px rgba(43,78,214,.35);
  --grad-text:linear-gradient(90deg,#8fb0ff 0%,#6d6ae8 45%,#d4af37 100%);
  --grad-cta:linear-gradient(135deg,#2b4ed6,#4338ca);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ============================================================
   GLOBAL ATMOSPHERIC LAYER (background that follows whole page)
   ============================================================ */
.bg-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(120% 60% at 50% 0%, #0b1330 0%, #05070f 55%, #02030a 100%)}
.bg-atmos .grid{
  position:absolute;inset:-10% -10% -30% -10%;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(900px) rotateX(62deg) translateY(20%);
  transform-origin:50% 0%;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 70%,transparent 100%);
  animation:gridscroll 14s linear infinite;
  opacity:.5;
}
@keyframes gridscroll{ to{ background-position:0 60px,60px 0; } }
.bg-atmos .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;mix-blend-mode:screen;animation:drift 18s ease-in-out infinite}
.bg-atmos .blob.a{width:46vmin;height:46vmin;background:#2b4ed6;left:-8%;top:-12%}
.bg-atmos .blob.b{width:52vmin;height:52vmin;background:#4338ca;right:-10%;top:10%;animation-delay:-6s}
.bg-atmos .blob.c{width:40vmin;height:40vmin;background:#10b981;left:30%;bottom:-15%;animation-delay:-12s;opacity:.3}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vmin,-3vmin) scale(1.15)}
}
.bg-atmos canvas.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bg-atmos .vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%);pointer-events:none}
.bg-atmos .scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay}

/* All page content sits above atmosphere */
.page{position:relative;z-index:2}

/* ============================================================
   NAVIGATION BAR
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 6vmin;
  background:linear-gradient(180deg,rgba(4,6,12,.7),rgba(4,6,12,0));
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom:1px solid transparent;
}
/* Blur lives on a pseudo-element so .nav itself does NOT become the
   containing block for the position:fixed mobile menu (backdrop-filter
   on .nav would trap .links inside the nav box and break the overlay). */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav.scrolled{
  background:rgba(4,6,12,.78);
  border-bottom-color:rgba(255,255,255,.06);
  padding:.85rem 6vmin;
}
.nav .brand{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:.04em;font-size:clamp(14px,1.5vmin,16px)}
.nav .brand .logo{
  width:32px;height:32px;border-radius:8px;position:relative;
  background:conic-gradient(from 220deg,#2b4ed6,#4338ca,#d4af37,#10b981,#2b4ed6);
  box-shadow:0 0 30px rgba(67,56,202,.5);
}
.nav .brand .logo::after{content:"";position:absolute;inset:18%;border-radius:5px;background:#04060c}
.nav .brand .name span{color:var(--muted-2);font-weight:500;margin-left:.4em}
.nav .links{display:flex;gap:2.2rem;align-items:center}
.nav .links a{font-size:14px;color:#c8d2f0;position:relative;transition:color .2s}
.nav .links a:hover{color:#fff}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--grad-text);transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.nav .links a:hover::after,
.nav .links a.active::after{transform:scaleX(1);transform-origin:left}
.nav .nav-cta{
  padding:.65em 1.1em;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--grad-cta);color:#fff;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 10px 30px rgba(43,78,214,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav .nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(67,56,202,.5)}
.nav .burger{display:none;width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);position:relative}
.nav .burger span{position:absolute;left:11px;right:11px;height:2px;background:#cfd6ee;border-radius:2px;transition:transform .3s, opacity .3s, top .3s}
.nav .burger span:nth-child(1){top:14px}
.nav .burger span:nth-child(2){top:20px}
.nav .burger span:nth-child(3){top:26px}
.nav.open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ============================================================
   HERO STAGE (verbatim from banner.html, adapted to be 100vh)
   ============================================================ */
.stage{
  position:relative;width:100%;height:100vh;min-height:680px;
  background:radial-gradient(120% 80% at 50% 0%, #0b1330 0%, #05070f 55%, #02030a 100%);
  overflow:hidden;isolation:isolate;
}
.stage .grid{
  position:absolute;inset:-10% -10% -30% -10%;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:60px 60px;
  transform:perspective(900px) rotateX(62deg) translateY(20%);
  transform-origin:50% 0%;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 25%,#000 70%,transparent 100%);
  animation:gridscroll 14s linear infinite;
  opacity:.7;
}
.stage .blob{
  position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen;
  animation:drift 18s ease-in-out infinite;
}
.stage .blob.a{width:46vmin;height:46vmin;background:#2b4ed6;left:-8%;top:-12%}
.stage .blob.b{width:52vmin;height:52vmin;background:#4338ca;right:-10%;top:10%;animation-delay:-6s}
.stage .blob.c{width:40vmin;height:40vmin;background:#10b981;left:30%;bottom:-15%;animation-delay:-12s;opacity:.4}
.stage canvas.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.7) 100%);pointer-events:none}
.stage .scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay}

/* hero foreground layout (verbatim) */
.frame{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr 1fr;gap:4vmin;padding:7vmin 7vmin 9vmin;align-items:center}
.left{display:flex;flex-direction:column;gap:2.4vmin;z-index:3}
.right{position:relative;height:100%;z-index:3}

.badge{
  display:inline-flex;align-items:center;gap:.7em;padding:.55em 1em;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);
  font-size:clamp(10px,1.3vmin,14px);letter-spacing:.22em;text-transform:uppercase;color:#c8d2f0;
  width:max-content;
}
.badge .dot{width:.6em;height:.6em;border-radius:50%;background:#10b981;box-shadow:0 0 12px #10b981}

h1.hero-title{
  margin:0;font-weight:800;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(40px,8.5vmin,128px);
}
h1.hero-title .static{color:#f4f6ff}
h1.hero-title .rotator{
  display:inline-block;position:relative;height:1em;overflow:hidden;vertical-align:bottom;
  min-width:5.5em;
}
h1.hero-title .rotator span{
  position:absolute;left:0;top:100%;opacity:0;
  background:linear-gradient(90deg,#8fb0ff 0%,#6d6ae8 45%,#d4af37 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(67,56,202,.45));
  animation:rotateWord 12s infinite;
}
h1.hero-title .rotator span:nth-child(1){animation-delay:0s}
h1.hero-title .rotator span:nth-child(2){animation-delay:2s}
h1.hero-title .rotator span:nth-child(3){animation-delay:4s}
h1.hero-title .rotator span:nth-child(4){animation-delay:6s}
h1.hero-title .rotator span:nth-child(5){animation-delay:8s}
h1.hero-title .rotator span:nth-child(6){animation-delay:10s}
@keyframes rotateWord{
  0%   {top:100%; opacity:0}
  4%   {top:0;    opacity:1}
  14%  {top:0;    opacity:1}
  18%  {top:-100%;opacity:0}
  100% {top:-100%;opacity:0}
}

.sub{color:#a9b3d3;font-size:clamp(13px,1.7vmin,18px);max-width:34ch;line-height:1.5}
.cta-row{display:flex;gap:1.2vmin;margin-top:1vmin;flex-wrap:wrap}
.cta{
  padding:.9em 1.4em;border-radius:14px;font-size:clamp(11px,1.4vmin,15px);font-weight:600;letter-spacing:.02em;
  text-decoration:none;border:1px solid rgba(255,255,255,.1);color:#fff;display:inline-flex;align-items:center;gap:.5em;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta.primary{
  background:var(--grad-cta);
  box-shadow:0 10px 40px rgba(43,78,214,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.cta.primary:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(67,56,202,.55)}
.cta.ghost{background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.cta.ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}

/* service chips */
.chips{display:flex;flex-wrap:wrap;gap:.7vmin;margin-top:2vmin;max-width:46ch}
.chip{
  font-size:clamp(10px,1.2vmin,13px);padding:.55em .9em;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#c8d2f0;backdrop-filter:blur(8px);
  animation:chipIn .8s both;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.chip:hover{background:rgba(255,255,255,.08);border-color:rgba(109,106,232,.4);transform:translateY(-2px)}
.chip:nth-child(1){animation-delay:.1s}.chip:nth-child(2){animation-delay:.18s}.chip:nth-child(3){animation-delay:.26s}
.chip:nth-child(4){animation-delay:.34s}.chip:nth-child(5){animation-delay:.42s}.chip:nth-child(6){animation-delay:.5s}
.chip:nth-child(7){animation-delay:.58s}.chip:nth-child(8){animation-delay:.66s}.chip:nth-child(9){animation-delay:.74s}
.chip:nth-child(10){animation-delay:.82s}
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* floating glass panels */
.panels{position:absolute;inset:0}
.panel{
  position:absolute;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
  animation:float 8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-1.6vmin) rotate(var(--rot,0deg))}
}

/* panel 1: code editor */
.p-code{left:2%;top:6%;width:62%;height:46%;--rot:-2deg}
.p-code .tabbar{display:flex;align-items:center;gap:.6em;padding:.8em 1em;border-bottom:1px solid rgba(255,255,255,.06);font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1.1vmin,12px);color:#8aa}
.p-code .tabbar i{width:.7em;height:.7em;border-radius:50%;display:inline-block}
.p-code .tabbar i:nth-child(1){background:#ff5f57}.p-code .tabbar i:nth-child(2){background:#febc2e}.p-code .tabbar i:nth-child(3){background:#28c840}
.p-code .tabbar .name{margin-left:1em;color:#aab3d0}
.p-code pre{
  margin:0;padding:1.1em 1.2em;font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.25vmin,14px);line-height:1.55;color:#cfd6ee;
  height:calc(100% - 2.6em);overflow:hidden;
}
.tok-k{color:#4338ca}.tok-s{color:#10b981}.tok-f{color:#8fb0ff}.tok-c{color:#5b6385;font-style:italic}.tok-n{color:#d4af37}
.caret{display:inline-block;width:.55ch;background:#8fb0ff;animation:blink 1s steps(1) infinite;color:transparent}
@keyframes blink{50%{opacity:0}}

/* panel 2: dashboard */
.p-dash{right:2%;top:20%;width:50%;height:38%;--rot:3deg}
.p-dash .head{display:flex;justify-content:space-between;align-items:center;padding:.9em 1.1em;border-bottom:1px solid rgba(255,255,255,.06);font-size:clamp(10px,1.2vmin,13px);color:#aab3d0}
.p-dash .head b{color:#fff}
.p-dash .body{padding:1em 1.1em;display:grid;grid-template-rows:auto 1fr;gap:.8em;height:calc(100% - 2.6em)}
.kpi{display:flex;gap:1.4em}
.kpi div{flex:1}
.kpi small{display:block;color:#8aa;font-size:clamp(9px,1vmin,11px);letter-spacing:.1em;text-transform:uppercase}
.kpi b{font-size:clamp(16px,2.4vmin,26px);font-weight:800;background:linear-gradient(90deg,#8fb0ff,#d4af37);-webkit-background-clip:text;color:transparent}
.kpi em{font-style:normal;color:#10b981;font-size:clamp(9px,1vmin,11px);margin-left:.4em}
.chart{position:relative;height:100%;border-radius:10px;background:linear-gradient(180deg,rgba(43,78,214,.07),transparent);overflow:hidden}
.chart svg{width:100%;height:100%;display:block}
.chart .line{fill:none;stroke:url(#g1);stroke-width:2;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 4s ease-out infinite}
.chart .area{fill:url(#g2);opacity:.7}
@keyframes draw{0%{stroke-dashoffset:600}60%,100%{stroke-dashoffset:0}}

/* panel 3: phone */
.p-phone{right:8%;bottom:4%;width:22%;height:54%;--rot:-4deg;border-radius:28px;padding:1em .8em}
.p-phone .notch{width:30%;height:1.2em;background:#000;border-radius:0 0 12px 12px;margin:0 auto -.4em}
.p-phone .screen{height:100%;border-radius:18px;background:linear-gradient(180deg,#0a1230,#0a0f24);padding:.9em;display:flex;flex-direction:column;gap:.6em;border:1px solid rgba(255,255,255,.06)}
.p-phone .hello{font-size:clamp(9px,1.1vmin,12px);color:#8aa}
.p-phone .hi{font-size:clamp(13px,1.8vmin,18px);font-weight:700}
.p-phone .card{flex:1;border-radius:12px;background:linear-gradient(135deg,rgba(43,78,214,.35),rgba(67,56,202,.25));border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}
.p-phone .card::after{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.25),transparent 30%);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.p-phone .row{display:flex;gap:.5em}
.p-phone .pill{flex:1;height:1.6em;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}

/* panel 4: AI node */
.p-ai{left:18%;bottom:4%;width:32%;height:36%;--rot:1.5deg;padding:.9em 1em}
.p-ai .title{font-size:clamp(10px,1.2vmin,13px);color:#aab3d0;display:flex;justify-content:space-between}
.p-ai .title b{background:linear-gradient(90deg,#10b981,#6d6ae8);-webkit-background-clip:text;color:transparent}
.p-ai .net{position:relative;height:calc(100% - 1.4em);margin-top:.4em}
.p-ai svg{width:100%;height:100%}
.p-ai .node{fill:#0a1230;stroke:#8fb0ff;stroke-width:1.2}
.p-ai .node.glow{stroke:#d4af37}
.p-ai .edge{stroke:rgba(143,176,255,.4);stroke-width:1;fill:none;stroke-dasharray:4 4;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.7}}

/* corner brand + meta on hero */
.stage .brand-corner{position:absolute;left:6vmin;bottom:5vmin;display:flex;align-items:center;gap:1em;z-index:4}
.stage .brand-corner .logo{
  width:3.2vmin;height:3.2vmin;min-width:24px;min-height:24px;border-radius:8px;
  background:conic-gradient(from 220deg,#2b4ed6,#4338ca,#d4af37,#10b981,#2b4ed6);
  box-shadow:0 0 30px rgba(67,56,202,.6);position:relative;
}
.stage .brand-corner .logo::after{content:"";position:absolute;inset:18%;border-radius:5px;background:#04060c}
.stage .brand-corner .name{font-weight:800;letter-spacing:.04em;font-size:clamp(12px,1.5vmin,16px)}
.stage .brand-corner .name span{color:#a9b3d3;font-weight:500;margin-left:.4em}
.stage .meta{position:absolute;right:6vmin;bottom:5vmin;font-family:'JetBrains Mono',monospace;color:#6b779b;font-size:clamp(10px,1.1vmin,12px);letter-spacing:.18em;text-transform:uppercase;z-index:4}
.stage .meta .live{color:#10b981}
.stage .meta .live::before{content:"●";margin-right:.4em;animation:blink 1.4s infinite}

/* ticker */
.ticker{position:absolute;left:0;right:0;bottom:0;height:2.6vmin;min-height:30px;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,transparent,rgba(0,0,0,.4));z-index:3}
.ticker .track{display:flex;gap:3vmin;white-space:nowrap;animation:slide 35s linear infinite;font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1.1vmin,12px);color:#7c87a8;letter-spacing:.16em;text-transform:uppercase}
.ticker .track span{display:inline-flex;align-items:center;gap:1.4em}
.ticker .track i{color:#10b981;font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* scroll indicator */
.scroll-hint{position:absolute;left:50%;bottom:5vmin;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.6em;color:#7c87a8;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;animation:hint 2.2s ease-in-out infinite}
.scroll-hint .mouse{width:22px;height:34px;border:1.5px solid #7c87a8;border-radius:11px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:6px;background:#10b981;border-radius:2px;transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translate(-50%,0);opacity:1}80%{transform:translate(-50%,12px);opacity:0}100%{opacity:0}}
@keyframes hint{0%,100%{opacity:.7}50%{opacity:1}}

/* ============================================================
   PAGE SECTION SYSTEM
   ============================================================ */
.section{position:relative;padding:8rem 6vmin;z-index:2}
.section.tight{padding:5rem 6vmin}
.section .container{max-width:1320px;margin:0 auto;position:relative}
.section .eyebrow{
  display:inline-flex;align-items:center;gap:.6em;padding:.45em .9em;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c8d2f0;
}
.section .eyebrow .dot{width:.5em;height:.5em;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981}
.section h2{
  margin:1rem 0 1rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(32px,5.5vmin,68px);
}
.section h2 .grad{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(67,56,202,.35));
}
.section .lead{color:var(--muted-2);font-size:clamp(15px,1.8vmin,18px);line-height:1.6;max-width:62ch}
.section .head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:3.5rem;flex-wrap:wrap}
.section .head-row .left-col{max-width:62ch}

/* generic page hero (non-home pages) */
.page-hero{position:relative;padding:14rem 6vmin 6rem;text-align:center;z-index:2}
.page-hero h1{
  margin:1.4rem auto 1rem;font-weight:800;letter-spacing:-.02em;line-height:.98;
  font-size:clamp(40px,8vmin,100px);max-width:18ch;
}
.page-hero h1 .grad{
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(67,56,202,.4));
}
.page-hero .lead{color:var(--muted-2);font-size:clamp(15px,1.8vmin,19px);max-width:60ch;margin:0 auto;line-height:1.6}
.page-hero .crumbs{display:inline-flex;gap:.5em;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin-top:1.6rem}
.page-hero .crumbs i{color:#10b981;font-style:normal}

/* ============================================================
   TRUSTED LOGO STRIP
   ============================================================ */
.trusted{padding:3rem 6vmin;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,rgba(255,255,255,.01),transparent)}
.trusted .label{text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.28em;text-transform:uppercase;margin-bottom:2rem}
.trusted .row{display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:2.5rem;max-width:1320px;margin:0 auto}
.trusted .row .brand-mark{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(16px,2vmin,22px);color:#7c87a8;letter-spacing:.04em;opacity:.7;transition:opacity .3s ease, color .3s ease;display:flex;align-items:center;gap:.5em}
.trusted .row .brand-mark:hover{opacity:1;color:#cfd6ee}
.trusted .row .brand-mark .icon{width:18px;height:18px;border-radius:5px;background:conic-gradient(from 220deg,#2b4ed6,#4338ca,#d4af37,#10b981,#2b4ed6);position:relative;flex-shrink:0}
.trusted .row .brand-mark .icon::after{content:"";position:absolute;inset:22%;border-radius:3px;background:#04060c}

/* ============================================================
   SERVICE CARDS GRID
   ============================================================ */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.service-card{
  position:relative;padding:2rem 1.8rem 2.2rem;border-radius:var(--radius-lg);
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:transform .35s ease, border-color .35s ease;
}
.service-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(43,78,214,.18),transparent 60%);opacity:0;transition:opacity .4s}
.service-card::after{content:"";position:absolute;left:-50%;top:-50%;width:200%;height:200%;background:conic-gradient(from 180deg,transparent,rgba(109,106,232,.18),transparent 25%);opacity:0;transition:opacity .4s;animation:spin 9s linear infinite;pointer-events:none}
.service-card:hover{transform:translateY(-6px);border-color:rgba(109,106,232,.35)}
.service-card:hover::before{opacity:1}
.service-card:hover::after{opacity:.4}
.service-card .ic{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.4rem;position:relative;
  background:linear-gradient(135deg,rgba(43,78,214,.25),rgba(67,56,202,.25));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px rgba(43,78,214,.25);
}
.service-card .ic svg{width:26px;height:26px;stroke:#cfd6ee;stroke-width:1.6;fill:none}
.service-card h3{margin:0 0 .55rem;font-size:clamp(18px,2.3vmin,22px);font-weight:700;letter-spacing:-.01em;position:relative;z-index:1}
.service-card p{margin:0 0 1.2rem;color:var(--muted-2);font-size:14.5px;line-height:1.55;position:relative;z-index:1}
.service-card .list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4em;font-size:13.5px;color:#aab3d0;position:relative;z-index:1}
.service-card .list li{display:flex;align-items:center;gap:.5em}
.service-card .list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad-text);box-shadow:0 0 8px rgba(109,106,232,.6)}
.service-card .arrow{position:absolute;right:1.6rem;top:1.6rem;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:transform .3s, background .3s}
.service-card:hover .arrow{transform:translate(2px,-2px) rotate(-12deg);background:rgba(67,56,202,.25)}
.service-card .arrow svg{width:14px;height:14px;stroke:#cfd6ee;stroke-width:1.8;fill:none}

/* ============================================================
   PORTFOLIO SHOWCASE
   ============================================================ */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.portfolio-grid.featured{grid-template-columns:2fr 1fr 1fr}
.work{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--glass);border:var(--glass-border);
  aspect-ratio:1.15/1;
  box-shadow:var(--shadow-card);
  transition:transform .4s ease, border-color .4s ease;
  cursor:pointer;
}
.work.wide{aspect-ratio:2.4/1}
.work.tall{aspect-ratio:.8/1}
.work:hover{transform:translateY(-6px);border-color:rgba(109,106,232,.35)}
.work .preview{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 80% at 30% 20%,rgba(43,78,214,.35),rgba(67,56,202,.18) 50%,rgba(0,0,0,.4) 100%);overflow:hidden}
.work .preview::after{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.12),transparent 30%);animation:spin 12s linear infinite}
.work .preview .mock{width:78%;height:78%;border-radius:14px;background:linear-gradient(180deg,#0a1230,#0a0f24);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.work .preview .mock::before{content:"";position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);border-bottom:1px solid rgba(255,255,255,.05)}
.work .preview .mock::after{content:"";position:absolute;inset:24% 14% 14%;border-radius:8px;background:linear-gradient(135deg,rgba(43,78,214,.4),rgba(67,56,202,.4));box-shadow:0 12px 40px rgba(67,56,202,.4)}
.work .meta{position:absolute;left:1.4rem;right:1.4rem;bottom:1.4rem;display:flex;justify-content:space-between;align-items:flex-end;z-index:2}
.work .meta .info h4{margin:0;font-size:clamp(15px,2vmin,20px);font-weight:700}
.work .meta .info p{margin:.2rem 0 0;font-size:12px;color:#aab3d0;font-family:'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.work .meta .arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);transition:transform .3s, background .3s}
.work:hover .meta .arrow{transform:translate(2px,-2px) rotate(-12deg);background:rgba(67,56,202,.35)}
.work .meta .arrow svg{width:14px;height:14px;stroke:#fff;stroke-width:2;fill:none}
.work .ribbon{position:absolute;top:1.2rem;left:1.2rem;z-index:2;font-size:10px;letter-spacing:.22em;text-transform:uppercase;padding:.4em .8em;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);color:#cfd6ee;font-family:'JetBrains Mono',monospace}

/* ============================================================
   CASE STUDIES BIG CARDS
   ============================================================ */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.case{
  position:relative;padding:2.2rem;border-radius:var(--radius-lg);
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr auto;gap:1.6rem;min-height:380px;
  transition:transform .4s ease, border-color .4s ease;
}
.case:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.35)}
.case .top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.case .top .tag{color:#10b981}
.case h3{margin:0;font-size:clamp(22px,3vmin,30px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.case p{margin:.6rem 0 0;color:var(--muted-2);font-size:15px;line-height:1.6}
.case .stats{display:flex;gap:1.6rem;flex-wrap:wrap}
.case .stats div small{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.case .stats div b{font-size:clamp(20px,2.8vmin,28px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.case .glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(67,56,202,.35),transparent 65%);filter:blur(40px);right:-60px;top:-60px;pointer-events:none}

/* ============================================================
   PROCESS TIMELINE
   ============================================================ */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:3rem}
.timeline::before{content:"";position:absolute;left:6%;right:6%;top:34px;height:2px;background:linear-gradient(90deg,transparent,rgba(143,176,255,.4),rgba(212,175,55,.4),rgba(143,176,255,.4),transparent);z-index:0}
.step{position:relative;text-align:center;padding-top:0;z-index:1}
.step .num{
  width:68px;height:68px;border-radius:50%;margin:0 auto 1.4rem;
  display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  color:#cfd6ee;position:relative;
}
.step .num::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(143,176,255,.2);animation:ringPulse 2.4s ease-in-out infinite}
.step:nth-child(2) .num::after{animation-delay:.4s}
.step:nth-child(3) .num::after{animation-delay:.8s}
.step:nth-child(4) .num::after{animation-delay:1.2s}
.step:nth-child(5) .num::after{animation-delay:1.6s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:0}}
.step h4{margin:0 0 .4rem;font-size:16px;font-weight:700}
.step p{margin:0;color:var(--muted-2);font-size:13.5px;line-height:1.55;max-width:24ch;margin:0 auto}

/* ============================================================
   TECH STACK STRIP
   ============================================================ */
.stack-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:2.5rem}
.tech{
  padding:1.6rem 1rem;border-radius:14px;text-align:center;
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;gap:.7em;
  transition:transform .25s ease, border-color .25s ease;
}
.tech:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.3)}
.tech .ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,rgba(43,78,214,.25),rgba(67,56,202,.25));border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;color:#cfd6ee;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px}
.tech b{font-size:13px;color:#cfd6ee;font-weight:600;letter-spacing:.02em}
.tech small{font-size:10.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}

/* ============================================================
   AI AUTOMATION SECTION (large feature)
   ============================================================ */
.ai-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.ai-split .copy h2{margin-top:1rem}
.ai-split .vis{position:relative;aspect-ratio:1.1/1;border-radius:var(--radius-lg);background:var(--glass);border:var(--glass-border);overflow:hidden;box-shadow:var(--shadow-card)}
.ai-split .vis::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 30%,rgba(43,78,214,.25),rgba(67,56,202,.15) 50%,transparent 80%);pointer-events:none}
.ai-split .vis svg{width:100%;height:100%;display:block}
.feature-list{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:1.2rem}
.feature-list li{display:flex;gap:1.2rem;align-items:flex-start}
.feature-list .fi{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(67,56,202,.25));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.feature-list .fi svg{width:20px;height:20px;stroke:#cfd6ee;stroke-width:1.7;fill:none}
.feature-list h4{margin:0 0 .25rem;font-size:16px;font-weight:700}
.feature-list p{margin:0;color:var(--muted-2);font-size:14px;line-height:1.55;max-width:42ch}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.testimonial{
  position:relative;padding:2rem 1.8rem;border-radius:var(--radius-lg);
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease, border-color .3s ease;
}
.testimonial:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.3)}
.testimonial .quote{font-size:24px;line-height:1;color:#8fb0ff;margin-bottom:.4rem;font-family:'JetBrains Mono',monospace}
.testimonial p{margin:0 0 1.6rem;color:#cfd6ee;font-size:15px;line-height:1.6}
.testimonial .who{display:flex;align-items:center;gap:.9rem}
.testimonial .who .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#2b4ed6,#4338ca,#d4af37);display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;box-shadow:0 0 18px rgba(67,56,202,.45)}
.testimonial .who h5{margin:0;font-size:14px;font-weight:700}
.testimonial .who small{color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.1em}
.testimonial .stars{position:absolute;top:1.6rem;right:1.6rem;color:#10b981;font-size:13px;letter-spacing:.08em}

/* ============================================================
   PRICING CARDS
   ============================================================ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.tier{
  position:relative;padding:2.4rem 2rem 2.6rem;border-radius:var(--radius-lg);
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:1.4rem;
  transition:transform .35s ease, border-color .35s ease;
}
.tier.featured{
  background:linear-gradient(180deg,rgba(43,78,214,.15),rgba(67,56,202,.06));
  border-color:rgba(109,106,232,.45);
  transform:scale(1.04);
  box-shadow:0 30px 80px rgba(43,78,214,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.tier:hover{transform:translateY(-4px)}
.tier.featured:hover{transform:scale(1.04) translateY(-4px)}
.tier .pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:.35em .9em;border-radius:999px;background:var(--grad-cta);color:#fff;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;box-shadow:0 10px 30px rgba(67,56,202,.5)}
.tier h3{margin:0;font-size:18px;font-weight:700;letter-spacing:.02em;color:#cfd6ee}
.tier .price{display:flex;align-items:baseline;gap:.4em}
.tier .price b{font-size:clamp(32px,5vmin,52px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em}
.tier .price small{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em}
.tier .desc{color:var(--muted-2);font-size:14px;line-height:1.55}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7em;flex:1}
.tier ul li{display:flex;align-items:flex-start;gap:.7em;font-size:14px;color:#cfd6ee;line-height:1.45}
.tier ul li::before{content:"";width:18px;height:18px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#10b981,#8fb0ff);display:grid;place-items:center;box-shadow:0 0 12px rgba(143,176,255,.4);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="%23ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M5 10.5 8.5 14 15 7"/></svg>');background-size:cover;margin-top:2px}
.tier .pick{padding:.95em 1.2em;border-radius:12px;text-align:center;font-weight:600;font-size:14px;border:1px solid rgba(255,255,255,.1);color:#fff;transition:transform .25s,box-shadow .25s, background .25s;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}
.tier.featured .pick{background:var(--grad-cta);box-shadow:0 14px 40px rgba(43,78,214,.4), inset 0 1px 0 rgba(255,255,255,.25)}
.tier .pick:hover{transform:translateY(-2px)}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:.9rem;max-width:880px;margin:3rem auto 0}
.qa{
  border-radius:14px;background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px);
  overflow:hidden;transition:border-color .3s;
}
.qa[open]{border-color:rgba(109,106,232,.35)}
.qa summary{
  list-style:none;cursor:pointer;
  padding:1.3rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  font-size:15.5px;font-weight:600;color:#e9eefc;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;position:relative;transition:transform .35s, background .35s}
.qa summary .plus::before,.qa summary .plus::after{content:"";position:absolute;background:#cfd6ee;border-radius:2px;transition:transform .3s}
.qa summary .plus::before{width:12px;height:2px}
.qa summary .plus::after{width:2px;height:12px}
.qa[open] summary .plus{transform:rotate(45deg);background:rgba(67,56,202,.25)}
.qa .ans{padding:0 1.6rem 1.4rem;color:var(--muted-2);font-size:14.5px;line-height:1.65}

/* ============================================================
   CTA BANNER STRIP
   ============================================================ */
.cta-banner{
  position:relative;margin:6rem 6vmin;padding:4rem 3rem;
  border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,rgba(43,78,214,.18),rgba(67,56,202,.12));
  border:1px solid rgba(109,106,232,.3);
  box-shadow:var(--shadow-card);
  text-align:center;
}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(43,78,214,.3),transparent 70%);pointer-events:none}
.cta-banner::after{content:"";position:absolute;left:-50%;top:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(212,175,55,.15),transparent 25%);animation:spin 12s linear infinite;pointer-events:none}
.cta-banner h2{margin:0 0 1rem;font-size:clamp(28px,4.4vmin,54px);font-weight:800;letter-spacing:-.02em;line-height:1.05;position:relative}
.cta-banner p{margin:0 auto 2rem;color:#cfd6ee;font-size:16px;max-width:54ch;line-height:1.55;position:relative}
.cta-banner .cta-row{justify-content:center;position:relative;display:inline-flex;gap:.8rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative;padding:5rem 6vmin 2rem;border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,transparent,rgba(2,3,10,.5));
}
.footer .container{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem}
.footer h5{margin:0 0 1.2rem;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#cfd6ee;font-family:'JetBrains Mono',monospace}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6em}
.footer ul a{color:var(--muted-2);font-size:14px;transition:color .2s}
.footer ul a:hover{color:#fff}
.footer .brand-blk{display:flex;flex-direction:column;gap:1.4rem;max-width:38ch}
.footer .brand-blk .top{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:.04em;font-size:16px}
.footer .brand-blk .top .logo{width:36px;height:36px;border-radius:9px;position:relative;background:conic-gradient(from 220deg,#2b4ed6,#4338ca,#d4af37,#10b981,#2b4ed6);box-shadow:0 0 30px rgba(67,56,202,.5)}
.footer .brand-blk .top .logo::after{content:"";position:absolute;inset:18%;border-radius:5px;background:#04060c}
.footer .brand-blk p{color:var(--muted-2);font-size:14px;line-height:1.55;margin:0}
.footer .social{display:flex;gap:.6rem;margin-top:.4rem}
.footer .social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;color:#cfd6ee;transition:transform .25s ease, background .25s ease, border-color .25s ease}
.footer .social a:hover{transform:translateY(-2px);background:rgba(67,56,202,.25);border-color:rgba(109,106,232,.4)}
.footer .social a svg{width:16px;height:16px;stroke:#cfd6ee;fill:none;stroke-width:1.8}
.footer .legal{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding-top:2rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,.05);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;flex-wrap:wrap;gap:1rem}
.footer .legal a{color:var(--muted);transition:color .2s}
.footer .legal a:hover{color:#cfd6ee}

/* ============================================================
   FORMS (contact)
   ============================================================ */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;max-width:880px}
.form .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:.5em}
.field label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}
.field input,
.field select,
.field textarea{
  font:inherit;color:#e9eefc;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1em 1.1em;font-size:15px;
  outline:none;backdrop-filter:blur(10px);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:rgba(109,106,232,.6);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(67,56,202,.15)}
.field input::placeholder,
.field textarea::placeholder{color:#5b6385}
.checks{display:flex;flex-wrap:wrap;gap:.6rem}
.checkpill{
  cursor:pointer;font-size:13px;padding:.6em 1em;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#c8d2f0;backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, color .2s;
  display:inline-flex;align-items:center;gap:.4em;
}
.checkpill input{display:none}
.checkpill:has(input:checked){background:linear-gradient(135deg,rgba(43,78,214,.25),rgba(67,56,202,.18));border-color:rgba(109,106,232,.5);color:#fff}

/* contact info side */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:flex-start}
.contact-cards{display:grid;gap:1.2rem}
.contact-cards .c{padding:1.4rem;border-radius:14px;background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px)}
.contact-cards .c small{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-bottom:.4rem}
.contact-cards .c b{display:block;font-size:16px;font-weight:700;color:#cfd6ee;margin-bottom:.2rem}
.contact-cards .c span{color:var(--muted-2);font-size:14px}

/* ============================================================
   BLOG GRID
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.post{
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:transform .35s ease, border-color .35s ease;
}
.post:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.3)}
.post .cover{aspect-ratio:1.7/1;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(43,78,214,.3),rgba(67,56,202,.3));}
.post .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.15),transparent 60%)}
.post .cover .glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#2b4ed6,#4338ca,#d4af37);box-shadow:0 14px 40px rgba(67,56,202,.45);display:grid;place-items:center;font-family:'JetBrains Mono',monospace;color:#fff;font-weight:800;font-size:22px;letter-spacing:-.04em}
.post .body{padding:1.4rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.post .meta-row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}
.post .meta-row i{color:#10b981;font-style:normal}
.post h3{margin:0;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.post p{margin:0;color:var(--muted-2);font-size:14px;line-height:1.55;flex:1}
.post .read{font-size:13px;color:#8fb0ff;display:inline-flex;align-items:center;gap:.4em;font-weight:600}

/* ============================================================
   ABOUT PAGE: stats + values
   ============================================================ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem}
.stat{padding:1.8rem 1.5rem;border-radius:var(--radius);background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px);text-align:left}
.stat b{display:block;font-size:clamp(28px,4.6vmin,44px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em;line-height:1}
.stat small{display:block;color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-top:.6rem}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.value{padding:1.8rem;border-radius:var(--radius-lg);background:var(--glass);border:var(--glass-border);backdrop-filter:blur(14px);transition:transform .3s,border-color .3s}
.value:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.3)}
.value .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.2rem;background:linear-gradient(135deg,rgba(16,185,129,.2),rgba(67,56,202,.22));border:1px solid rgba(255,255,255,.1)}
.value .ic svg{width:22px;height:22px;stroke:#cfd6ee;stroke-width:1.7;fill:none}
.value h4{margin:0 0 .5rem;font-size:17px;font-weight:700}
.value p{margin:0;color:var(--muted-2);font-size:14px;line-height:1.55}

.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.member{padding:1.6rem;border-radius:var(--radius-lg);background:var(--glass);border:var(--glass-border);backdrop-filter:blur(10px);text-align:center;transition:transform .3s,border-color .3s}
.member:hover{transform:translateY(-4px);border-color:rgba(109,106,232,.3)}
.member .av{width:72px;height:72px;border-radius:50%;margin:0 auto 1rem;background:linear-gradient(135deg,#2b4ed6,#4338ca,#d4af37);box-shadow:0 0 24px rgba(67,56,202,.4);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px}
.member h4{margin:0;font-size:15px;font-weight:700}
.member p{margin:.3rem 0 0;color:var(--muted);font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   SCROLL REVEAL helper
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d-1{transition-delay:.08s}
.reveal.d-2{transition-delay:.16s}
.reveal.d-3{transition-delay:.24s}
.reveal.d-4{transition-delay:.32s}
.reveal.d-5{transition-delay:.40s}
.reveal.d-6{transition-delay:.48s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .service-grid,.testimonial-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;gap:1.2rem;max-width:520px;margin-left:auto;margin-right:auto}
  .tier.featured{transform:none}
  .tier.featured:hover{transform:translateY(-4px)}
  .portfolio-grid,.portfolio-grid.featured{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:2rem}
  .timeline::before{display:none}
  .stack-grid{grid-template-columns:repeat(3,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .footer .container{grid-template-columns:1.4fr 1fr 1fr}
  .ai-split{grid-template-columns:1fr;gap:2rem}
  .case-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 760px){
  /* Mobile nav */
  .nav{padding:1rem 5vw}
  .nav.scrolled{padding:.8rem 5vw}
  .nav .links{
    position:fixed;top:0;left:0;right:0;bottom:0;
    height:100vh;height:100dvh;
    flex-direction:column;justify-content:center;gap:1.6rem;
    background:rgba(4,6,12,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    transform:translateY(-110%);transition:transform .4s ease;
    padding:5rem 6vw;z-index:-1;overflow-y:auto;
  }
  .nav.open .links{transform:translateY(0)}
  .nav .links a{font-size:22px;font-weight:700}
  .nav .nav-cta{display:none}
  .nav .burger{display:block}

  /* HERO: switch to vertical (banner-vertical.html inspired) */
  .stage{height:auto;min-height:100vh;padding-top:80px;padding-bottom:60px}
  .frame{position:relative;inset:auto;grid-template-columns:1fr;gap:2rem;padding:2rem 6vw 4rem;align-items:start}
  .right{display:none}
  .chips{max-width:none}
  .stage .brand-corner{position:relative;left:auto;bottom:auto;margin:2rem 6vw 0;z-index:4}
  .stage .meta{position:relative;right:auto;bottom:auto;margin:1rem 6vw 0;z-index:4}
  .scroll-hint{display:none}

  /* Sections */
  .section{padding:4.5rem 6vw}
  .page-hero{padding:9rem 6vw 3.5rem}
  .service-grid,.testimonial-grid,.blog-grid,.values-grid{grid-template-columns:1fr}
  .portfolio-grid,.portfolio-grid.featured{grid-template-columns:1fr}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr}
  .work.wide{aspect-ratio:1.6/1}
  .form{grid-template-columns:minmax(0,1fr)}
  /* let every form control shrink inside the card instead of overflowing */
  .form .field{min-width:0}
  .form .field input,.form .field select,.form .field textarea,
  .form .dd-trigger,.form .cc-trigger{max-width:100%}
  .form .phone-row{min-width:0}
  .cta-banner{margin:4rem 6vw;padding:2.5rem 1.6rem}
  .footer .container{grid-template-columns:1fr 1fr;gap:2rem}
  .footer .brand-blk{grid-column:1 / -1}
}

@media (max-width: 440px){
  .stats-row{grid-template-columns:1fr}
  .footer .container{grid-template-columns:1fr}
}

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle{
  width:42px;height:42px;border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;color:#cfd6ee;cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
  margin-right:.6rem;
}
.theme-toggle:hover{background:rgba(255,255,255,.08);transform:translateY(-1px);border-color:rgba(109,106,232,.35)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s ease, opacity .25s ease}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:block}
[data-theme="light"] .theme-toggle .sun{display:block}
[data-theme="light"] .theme-toggle .moon{display:none}
.theme-toggle:active svg{transform:rotate(180deg)}

/* ============================================================
   LIGHT THEME  comprehensive override
   ============================================================ */
:root[data-theme="light"]{
  --bg:#f4f5fb;
  --bg-2:#e9ecf6;
  --ink:#0a0f1e;
  --muted:#5b6480;
  --muted-2:#2c3450;
  --line:rgba(20,30,80,.08);
  --glass:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35));
  --glass-strong:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.45));
  --glass-border:1px solid rgba(20,30,80,.08);
  --shadow-card:0 22px 50px rgba(20,30,80,.10), inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-glow:0 14px 40px rgba(43,78,214,.25);
}

[data-theme="light"] body{background:var(--bg);color:var(--ink)}

/* ---- Background atmosphere (light) ---- */
[data-theme="light"] .bg-atmos{
  background:radial-gradient(120% 60% at 50% 0%, #eef1fb 0%, #f3f5fc 55%, #f7f8fd 100%);
}
[data-theme="light"] .bg-atmos .grid,
[data-theme="light"] .stage .grid{opacity:.32}
[data-theme="light"] .bg-atmos .blob{opacity:.22;filter:blur(95px);mix-blend-mode:multiply}
[data-theme="light"] .bg-atmos .vignette{background:radial-gradient(120% 80% at 50% 50%,transparent 60%,rgba(20,30,80,.10) 100%)}
[data-theme="light"] .bg-atmos .scan{display:none}
[data-theme="light"] .bg-atmos canvas.particles,
[data-theme="light"] .stage canvas.particles{mix-blend-mode:multiply;opacity:.55}

/* ---- Hero stage (light) ---- */
[data-theme="light"] .stage{background:radial-gradient(120% 80% at 50% 0%, #eaeefb 0%, #f0f3fb 55%, #f4f6fc 100%)}
[data-theme="light"] .stage .blob{opacity:.28;filter:blur(85px);mix-blend-mode:multiply}
[data-theme="light"] .stage .vignette{background:radial-gradient(120% 80% at 50% 50%,transparent 55%,rgba(20,30,80,.10) 100%)}
[data-theme="light"] .stage .scan{display:none}

[data-theme="light"] h1.hero-title .static{color:#0a0f1e}
[data-theme="light"] .sub{color:#475069}
[data-theme="light"] .badge{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55));
  border-color:rgba(20,30,80,.08);
  color:#2c3450;
}
[data-theme="light"] .chip{
  background:rgba(255,255,255,.55);
  border-color:rgba(20,30,80,.08);
  color:#2c3450;
}
[data-theme="light"] .chip:hover{background:rgba(255,255,255,.80);border-color:rgba(109,106,232,.45)}

/* ---- CTA buttons ---- */
[data-theme="light"] .cta.ghost{
  background:rgba(255,255,255,.55);
  border-color:rgba(20,30,80,.08);
  color:#0a0f1e;
  backdrop-filter:blur(8px);
}
[data-theme="light"] .cta.ghost:hover{background:rgba(255,255,255,.85)}
[data-theme="light"] .cta.primary{color:#fff}

/* ---- Floating panels (keep inner content dark  they're "device" mockups) ---- */
[data-theme="light"] .panel{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  border-color:rgba(20,30,80,.08);
  box-shadow:0 30px 60px rgba(20,30,80,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
/* code panel: looks like a real code editor  keep dark */
[data-theme="light"] .p-code{
  background:linear-gradient(180deg,#0c1124,#0a0f24);
  border-color:rgba(20,30,80,.12);
}
[data-theme="light"] .p-code .tabbar{color:#7a86a8;border-color:rgba(255,255,255,.06)}
[data-theme="light"] .p-code pre{color:#cfd6ee}
/* phone screen  keep dark */
[data-theme="light"] .p-phone .screen{background:linear-gradient(180deg,#0a1230,#0a0f24)}
/* dashboard / AI panels become light glass */
[data-theme="light"] .p-dash .head,
[data-theme="light"] .p-ai .title{color:#2c3450;border-color:rgba(20,30,80,.08)}
[data-theme="light"] .p-dash .head b{color:#0a0f1e}
[data-theme="light"] .kpi small{color:#5b6480}
[data-theme="light"] .p-ai .node{fill:#fff;stroke:#4a6ee0}
[data-theme="light"] .p-ai .node.glow{stroke:#9b59f0}
[data-theme="light"] .p-ai .edge{stroke:rgba(74,110,224,.55)}
[data-theme="light"] .chart{background:linear-gradient(180deg,rgba(43,78,214,.10),transparent)}

/* ---- Hero corner brand + meta + ticker ---- */
[data-theme="light"] .stage .brand-corner .name{color:#0a0f1e}
[data-theme="light"] .stage .brand-corner .name span{color:#5b6480}
[data-theme="light"] .stage .meta{color:#5b6480}
[data-theme="light"] .ticker{background:linear-gradient(180deg,transparent,rgba(20,30,80,.06));border-top-color:rgba(20,30,80,.08)}
[data-theme="light"] .ticker .track{color:#5b6480}
[data-theme="light"] .scroll-hint{color:#5b6480}
[data-theme="light"] .scroll-hint .mouse{border-color:#5b6480}

/* ---- Nav (light) ---- */
[data-theme="light"] .nav{background:linear-gradient(180deg,rgba(244,245,251,.75),rgba(244,245,251,0))}
[data-theme="light"] .nav.scrolled{background:rgba(244,245,251,.85);border-bottom-color:rgba(20,30,80,.08)}
[data-theme="light"] .nav .brand .name span{color:#5b6480}
[data-theme="light"] .nav .links a{color:#2c3450}
[data-theme="light"] .nav .links a:hover{color:#0a0f1e}
[data-theme="light"] .nav .burger{background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .nav .burger span{background:#2c3450}
[data-theme="light"] .theme-toggle{
  background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.08);color:#2c3450;
}
[data-theme="light"] .theme-toggle:hover{background:rgba(20,30,80,.08);border-color:rgba(109,106,232,.45)}
@media(max-width:760px){
  [data-theme="light"] .nav .links{background:rgba(244,245,251,.97)}
}

/* ---- Sections / cards (light) ---- */
[data-theme="light"] .section .eyebrow{
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.55));
  border-color:rgba(20,30,80,.08);
  color:#2c3450;
}
[data-theme="light"] .section h2{color:#0a0f1e}
[data-theme="light"] .section .lead{color:#475069}

[data-theme="light"] .page-hero h1{color:#0a0f1e}
[data-theme="light"] .page-hero .lead{color:#475069}
[data-theme="light"] .page-hero .crumbs{color:#5b6480}

[data-theme="light"] .trusted{
  border-color:rgba(20,30,80,.06);
  background:linear-gradient(180deg,rgba(20,30,80,.02),transparent);
}
[data-theme="light"] .trusted .label,
[data-theme="light"] .trusted .row .brand-mark{color:#5b6480}
[data-theme="light"] .trusted .row .brand-mark:hover{color:#0a0f1e}
[data-theme="light"] .trusted .row .brand-mark .icon::after{background:#f4f5fb}

/* Service cards */
[data-theme="light"] .service-card{
  background:var(--glass);
  border-color:rgba(20,30,80,.08);
  box-shadow:var(--shadow-card);
}
[data-theme="light"] .service-card h3{color:#0a0f1e}
[data-theme="light"] .service-card p{color:#475069}
[data-theme="light"] .service-card .list{color:#475069}
[data-theme="light"] .service-card .ic svg{stroke:#1a2244}
[data-theme="light"] .service-card .arrow{background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .service-card .arrow svg{stroke:#1a2244}

/* Portfolio */
[data-theme="light"] .work{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .work .meta .info h4{color:#0a0f1e}
[data-theme="light"] .work .meta .info p{color:#475069}
[data-theme="light"] .work .meta .arrow{background:rgba(255,255,255,.85);border-color:rgba(20,30,80,.10)}
[data-theme="light"] .work .meta .arrow svg{stroke:#0a0f1e}
[data-theme="light"] .work .ribbon{background:rgba(255,255,255,.85);border-color:rgba(20,30,80,.08);color:#2c3450}

/* Case studies */
[data-theme="light"] .case{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .case h3{color:#0a0f1e}
[data-theme="light"] .case p{color:#475069}
[data-theme="light"] .case .top{color:#5b6480}

/* Process timeline */
[data-theme="light"] .step .num{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));
  border-color:rgba(20,30,80,.10);
  color:#0a0f1e;
  box-shadow:0 16px 40px rgba(20,30,80,.15), inset 0 1px 0 rgba(255,255,255,.95);
}
[data-theme="light"] .step h4{color:#0a0f1e}
[data-theme="light"] .step p{color:#475069}

/* Tech stack */
[data-theme="light"] .tech{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .tech b{color:#0a0f1e}
[data-theme="light"] .tech small{color:#5b6480}
[data-theme="light"] .tech .ic{color:#1a2244}

/* AI section */
[data-theme="light"] .ai-split .vis{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .feature-list h4{color:#0a0f1e}
[data-theme="light"] .feature-list p{color:#475069}
[data-theme="light"] .feature-list .fi svg{stroke:#1a2244}

/* Testimonials */
[data-theme="light"] .testimonial{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .testimonial p{color:#1a2244}
[data-theme="light"] .testimonial .who h5{color:#0a0f1e}
[data-theme="light"] .testimonial .who small{color:#5b6480}

/* Pricing */
[data-theme="light"] .tier{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .tier.featured{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,245,251,.65));
  border-color:rgba(109,106,232,.5);
  box-shadow:0 30px 70px rgba(43,78,214,.15), inset 0 1px 0 rgba(255,255,255,.95);
}
[data-theme="light"] .tier h3{color:#2c3450}
[data-theme="light"] .tier .desc{color:#475069}
[data-theme="light"] .tier ul li{color:#1a2244}
[data-theme="light"] .tier .pick{
  background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.10);color:#0a0f1e;
}
[data-theme="light"] .tier.featured .pick{color:#fff}

/* FAQ */
[data-theme="light"] .qa{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .qa[open]{border-color:rgba(109,106,232,.5)}
[data-theme="light"] .qa summary{color:#0a0f1e}
[data-theme="light"] .qa summary .plus{background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.10)}
[data-theme="light"] .qa summary .plus::before,
[data-theme="light"] .qa summary .plus::after{background:#1a2244}
[data-theme="light"] .qa .ans{color:#475069}

/* CTA banner */
[data-theme="light"] .cta-banner{
  background:linear-gradient(135deg,rgba(43,78,214,.10),rgba(67,56,202,.08));
  border-color:rgba(109,106,232,.35);
  box-shadow:0 30px 70px rgba(20,30,80,.10), inset 0 1px 0 rgba(255,255,255,.85);
}
[data-theme="light"] .cta-banner h2{color:#0a0f1e}
[data-theme="light"] .cta-banner p{color:#1a2244}

/* Footer */
[data-theme="light"] .footer{
  border-top-color:rgba(20,30,80,.08);
  background:linear-gradient(180deg,transparent,rgba(20,30,80,.03));
}
[data-theme="light"] .footer h5{color:#0a0f1e}
[data-theme="light"] .footer ul a{color:#475069}
[data-theme="light"] .footer ul a:hover{color:#0a0f1e}
[data-theme="light"] .footer .brand-blk p{color:#475069}
[data-theme="light"] .footer .social a{background:rgba(20,30,80,.04);border-color:rgba(20,30,80,.10);color:#2c3450}
[data-theme="light"] .footer .social a svg{stroke:#2c3450}
[data-theme="light"] .footer .social a:hover{background:rgba(109,106,232,.18);border-color:rgba(109,106,232,.45)}
[data-theme="light"] .footer .legal{border-top-color:rgba(20,30,80,.08);color:#5b6480}
[data-theme="light"] .footer .legal a{color:#5b6480}
[data-theme="light"] .footer .legal a:hover{color:#0a0f1e}

/* Forms */
[data-theme="light"] .field label{color:#5b6480}
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea{
  background:rgba(255,255,255,.85);
  border-color:rgba(20,30,80,.10);
  color:#0a0f1e;
}
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus{
  background:#fff;
  border-color:rgba(109,106,232,.55);
  box-shadow:0 0 0 4px rgba(67,56,202,.10);
}
[data-theme="light"] .field input::placeholder,
[data-theme="light"] .field textarea::placeholder{color:#8892b0}
[data-theme="light"] .checkpill{background:rgba(255,255,255,.65);border-color:rgba(20,30,80,.10);color:#2c3450}
[data-theme="light"] .checkpill:has(input:checked){color:#0a0f1e}
[data-theme="light"] .contact-cards .c{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .contact-cards .c small{color:#5b6480}
[data-theme="light"] .contact-cards .c b{color:#0a0f1e}
[data-theme="light"] .contact-cards .c span{color:#475069}

/* Stats / Values / Team / Members */
[data-theme="light"] .stat{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .stat small{color:#5b6480}
[data-theme="light"] .value{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .value h4{color:#0a0f1e}
[data-theme="light"] .value p{color:#475069}
[data-theme="light"] .value .ic svg{stroke:#1a2244}
[data-theme="light"] .member{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .member h4{color:#0a0f1e}
[data-theme="light"] .member p{color:#5b6480}

/* Blog */
[data-theme="light"] .post{background:var(--glass);border-color:rgba(20,30,80,.08)}
[data-theme="light"] .post h3{color:#0a0f1e}
[data-theme="light"] .post p{color:#475069}
[data-theme="light"] .post .meta-row{color:#5b6480}

/* Misc filter pills (portfolio/blog category filters) */
[data-theme="light"] .filters .f,
[data-theme="light"] .cat-row .c{
  background:rgba(255,255,255,.65);
  border-color:rgba(20,30,80,.10);
  color:#2c3450;
}
[data-theme="light"] .filters .f.on,
[data-theme="light"] .cat-row .c.on{color:#0a0f1e}

/* Compare table on pricing page */
[data-theme="light"] .compare{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .compare th,
[data-theme="light"] .compare td{border-bottom-color:rgba(20,30,80,.06);color:#1a2244}
[data-theme="light"] .compare th{color:#5b6480}

/* Study card on case-studies page */
[data-theme="light"] .study{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .study .copy h3{color:#0a0f1e}
[data-theme="light"] .study .copy p{color:#475069}
[data-theme="light"] .study .copy .top{color:#5b6480}

/* Featured post on blog page */
[data-theme="light"] .feature-post{background:var(--glass);border-color:rgba(20,30,80,.08);box-shadow:var(--shadow-card)}
[data-theme="light"] .feature-post h2{color:#0a0f1e}
[data-theme="light"] .feature-post p{color:#475069}
[data-theme="light"] .feature-post .top{color:#5b6480}

/* ============================================================
   PREMIUM CUSTOM DROPDOWN
   ============================================================ */
.dropdown{position:relative}
.dd-trigger{
  width:100%;font:inherit;color:#e9eefc;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:1em 1.1em;font-size:15px;
  outline:none;backdrop-filter:blur(10px);text-align:left;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.dd-trigger:hover{background:rgba(255,255,255,.06)}
.dropdown.open .dd-trigger{
  border-color:rgba(109,106,232,.6);background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(67,56,202,.15);
}
.dd-trigger .dd-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-trigger .dd-value.placeholder{color:#5b6385}
.dd-arrow{width:14px;height:14px;color:#a9b3d3;transition:transform .3s cubic-bezier(.5,1.6,.5,1);flex-shrink:0;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dropdown.open .dd-arrow{transform:rotate(180deg);color:#6d6ae8}
.dd-list{
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  margin:0;padding:.5rem;list-style:none;z-index:30;
  background:linear-gradient(180deg,rgba(15,18,32,.96),rgba(10,13,26,.94));
  border:1px solid rgba(109,106,232,.22);
  border-radius:14px;
  backdrop-filter:blur(22px);
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset, 0 1px 0 rgba(255,255,255,.08) inset;
  opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);
  transition:opacity .22s ease, transform .26s cubic-bezier(.5,1.4,.5,1);
  max-height:280px;overflow-y:auto;
}
.dropdown.open .dd-list{opacity:1;pointer-events:auto;transform:none}
.dd-list::-webkit-scrollbar{width:6px}
.dd-list::-webkit-scrollbar-thumb{background:rgba(109,106,232,.3);border-radius:3px}
.dd-list li{
  padding:.75em .95em;border-radius:10px;cursor:pointer;font-size:14.5px;color:#cfd6ee;
  transition:background .18s ease, color .18s ease, transform .18s ease;
  display:flex;align-items:center;justify-content:space-between;gap:.6em;
}
.dd-list li:hover{background:rgba(67,56,202,.18);color:#fff;transform:translateX(2px)}
.dd-list li[data-selected]{
  background:linear-gradient(135deg,rgba(43,78,214,.25),rgba(67,56,202,.18));
  color:#fff;font-weight:600;
}
.dd-list li[data-selected]::after{content:"✓";color:#10b981;font-weight:700;font-size:13px}

/* Light theme */
[data-theme="light"] .dd-trigger{
  background:rgba(255,255,255,.85);border-color:rgba(20,30,80,.10);color:#0a0f1e;
}
[data-theme="light"] .dd-trigger:hover{background:#fff}
[data-theme="light"] .dropdown.open .dd-trigger{
  background:#fff;border-color:rgba(109,106,232,.55);box-shadow:0 0 0 4px rgba(67,56,202,.10);
}
[data-theme="light"] .dd-trigger .dd-value.placeholder{color:#8892b0}
[data-theme="light"] .dd-arrow{color:#5b6480}
[data-theme="light"] .dropdown.open .dd-arrow{color:#7b5dd6}
[data-theme="light"] .dd-list{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,253,.96));
  border-color:rgba(109,106,232,.30);
  box-shadow:0 30px 60px rgba(20,30,80,.18), 0 0 0 1px rgba(255,255,255,.6) inset;
}
[data-theme="light"] .dd-list li{color:#1a2244}
[data-theme="light"] .dd-list li:hover{background:rgba(109,106,232,.14);color:#0a0f1e}
[data-theme="light"] .dd-list li[data-selected]{
  background:linear-gradient(135deg,rgba(43,78,214,.16),rgba(67,56,202,.10));
  color:#0a0f1e;
}

/* ============================================================
   FORM SUBMIT STATES (loading / error)
   ============================================================ */
.form-status{display:none;align-items:center;gap:.7em;font-size:14px;padding:.9em 1.1em;border-radius:12px;margin-top:1rem}
.form-status.show{display:flex}
.form-status.error{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.form-status .x-ic{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:rgba(239,68,68,.25);display:grid;place-items:center;color:#fca5a5;font-weight:700;font-size:12px}
[data-theme="light"] .form-status.error{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.30);color:#b91c1c}
[data-theme="light"] .form-status .x-ic{background:rgba(220,38,38,.18);color:#b91c1c}

button[type="submit"][disabled]{opacity:.65;cursor:not-allowed;position:relative}
button[type="submit"][disabled]::before{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin 0.8s linear infinite;
}
button[type="submit"][disabled]{color:transparent !important}

/* ============================================================
   DARK-MODE TEXT BRIGHTENING (later :root wins for dark only;
   light theme keeps its own values via [data-theme="light"])
   ============================================================ */
:root{
  --muted:#9aa6cb;
  --muted-2:#cdd7f2;
  --icon-ink:#e9eefc;
}
[data-theme="light"]{ --icon-ink:#1a2244; }
[data-theme="dark"] .service-card p,
[data-theme="dark"] .case p,
[data-theme="dark"] .study .copy p,
[data-theme="dark"] .tier .desc,
[data-theme="dark"] .value p,
[data-theme="dark"] .feature-list p,
[data-theme="dark"] .post p,
[data-theme="dark"] .feature-post p,
[data-theme="dark"] .qa .ans,
[data-theme="dark"] .section .lead,
[data-theme="dark"] .page-hero .lead,
[data-theme="dark"] .sub{color:#d6def6}
[data-theme="dark"] .testimonial p{color:#eaf0ff}

/* ============================================================
   PREMIUM CONTACT FORM CARD
   ============================================================ */
.form{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);
  padding:2rem;
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
}
.form::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#10b981,#8fb0ff,#6d6ae8,#d4af37);
  opacity:.9;
}
.form-head{display:flex;align-items:center;gap:1rem;padding-bottom:1.2rem;margin-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.07)}
.form-head .form-head-ic{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(67,56,202,.28));
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 28px rgba(43,78,214,.25);
}
.form-head .form-head-ic svg{width:22px;height:22px;stroke:#e9eefc;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.form-head h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
.form-head p{margin:.2rem 0 0;font-size:13px;color:var(--muted-2);line-height:1.4}
.form-head .form-head-badge{
  margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:.5em;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#9fe9c2;padding:.45em .8em;border-radius:999px;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.30);
}
.form-head .form-head-badge .dot{width:.5em;height:.5em;border-radius:50%;background:#34d399;box-shadow:0 0 10px #34d399}
.form button[type="submit"]{width:100%;justify-content:center;padding:1.05em 1.4em;font-size:15px}
.contact-cards .c.feature{
  background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(43,78,214,.08));
  border-color:rgba(16,185,129,.32);
}
.contact-cards .c.feature b{font-size:18px}
.contact-cards .c b a{color:inherit;transition:color .2s}
.contact-cards .c b a:hover{color:#10b981}

[data-theme="light"] .form{
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.55));
  border-color:rgba(20,30,80,.08);
}
[data-theme="light"] .form-head{border-bottom-color:rgba(20,30,80,.08)}
[data-theme="light"] .form-head h3{color:#0a0f1e}
[data-theme="light"] .form-head .form-head-ic svg{stroke:#1a2244}
[data-theme="light"] .form-head .form-head-badge{color:#15803d;background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.30)}
@media(max-width:760px){
  .form{padding:1.4rem}
  .form-head .form-head-badge{display:none}
}

/* ============================================================
   PORTFOLIO - REAL SCREENSHOTS
   ============================================================ */
.work .preview .shot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;z-index:0;
  background:linear-gradient(135deg,#0a1230,#0a0f24);
}
.work .preview:has(.shot)::after{display:none}
.work .preview:has(.shot)::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,6,12,0) 42%,rgba(4,6,12,.50) 72%,rgba(4,6,12,.90) 100%);
}
.work:hover .preview .shot{transform:scale(1.04)}
.work .preview .shot{transition:transform .6s ease}
[data-theme="light"] .work .preview:has(.shot)::before{
  background:linear-gradient(180deg,rgba(4,6,12,0) 45%,rgba(4,6,12,.35) 72%,rgba(4,6,12,.82) 100%);
}
/* keep meta text readable over photos in light theme too */
[data-theme="light"] .work:has(.shot) .meta .info h4{color:#fff}
[data-theme="light"] .work:has(.shot) .meta .info p{color:#dbe3ff}

/* ============================================================
   BLOG - real cover images + clickable titles
   ============================================================ */
.post .cover{display:block}
.post .cover img,
.feature-post .cover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s ease;
}
.post:hover .cover img,
.feature-post:hover .cover img{transform:scale(1.05)}
.feature-post .cover{display:block;text-decoration:none}
.post h3 a,.feature-post h2 a{color:inherit;text-decoration:none;transition:color .2s}
.post h3 a:hover,.feature-post h2 a:hover{color:#8fb0ff}

/* ============================================================
   ARTICLE / STUDY READER PAGE
   ============================================================ */
.reader{max-width:820px;margin:0 auto}
.reader .reader-cover{
  width:100%;aspect-ratio:2.1/1;object-fit:cover;border-radius:var(--radius-lg);
  border:var(--glass-border);box-shadow:var(--shadow-card);margin-bottom:2.4rem;background:#0a1230;
}
.reader .reader-meta{
  display:flex;flex-wrap:wrap;gap:.7em;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;
}
.reader .reader-meta .tag{color:#10b981}
.reader h1.reader-title{
  font-size:clamp(30px,5.5vmin,56px);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  text-align:center;margin:0 auto 2.4rem;max-width:20ch;
}
.reader .prose{font-size:17px;line-height:1.75;color:var(--muted-2)}
.reader .prose p{margin:0 0 1.3rem}
.reader .prose h2{font-size:clamp(22px,3vmin,30px);font-weight:700;letter-spacing:-.01em;margin:2.4rem 0 1rem;color:var(--ink)}
.reader .prose ul,.reader .prose ol{margin:0 0 1.3rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.reader .prose a{color:#8fb0ff;text-decoration:underline}
.reader .reader-stats{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;margin:0 0 2.6rem;padding:1.6rem;border-radius:var(--radius-lg);background:var(--glass);border:var(--glass-border)}
.reader .reader-stats div{text-align:center}
.reader .reader-stats div small{display:block;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:.3rem}
.reader .reader-stats div b{font-size:clamp(22px,3vmin,30px);font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.reader .back-link{display:inline-flex;align-items:center;gap:.4em;color:#8fb0ff;font-size:14px;font-weight:600;margin-bottom:2rem}
[data-theme="dark"] .reader .prose{color:#d6def6}
[data-theme="light"] .reader h1.reader-title{color:#0a0f1e}
[data-theme="light"] .reader .prose{color:#2c3450}
[data-theme="light"] .reader .prose h2{color:#0a0f1e}

/* ============================================================
   PREMIUM DISPLAY FONT (Sora) for headings
   ============================================================ */
h1, h2, h3,
.hero-title, .section h2, .page-hero h1,
.service-card h3, .case h3, .study .copy h3, .tier h3,
.feature-post h2, .reader-title, .form-head h3,
.cta-banner h2, .value h4, .step h4, .feature-list h4{
  font-family:'Sora','Inter',system-ui,sans-serif;
}
.hero-title{letter-spacing:-.03em}
.nav .brand .name, .footer .brand-blk .top, .stage .brand-corner .name{
  font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:.01em;
}

/* ============================================================
   BRAND LOGOMARK (new premium "D / next" mark, used everywhere)
   ============================================================ */
.nav .brand .logo,
.footer .brand-blk .top .logo,
.stage .brand-corner .logo{
  background:url('/assets/img/logo-mark.png') center/contain no-repeat transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
/* light theme: faint dark disc behind so the white "D" stays readable */
[data-theme="light"] .nav .brand .logo,
[data-theme="light"] .footer .brand-blk .top .logo,
[data-theme="light"] .stage .brand-corner .logo{
  background:url('/assets/img/logo-mark.png') center/contain no-repeat,
             radial-gradient(circle at 50% 50%, #14114a 54%, rgba(20,17,74,0) 72%) !important;
  filter:none;
}
.nav .brand .logo::after,
.footer .brand-blk .top .logo::after,
.stage .brand-corner .logo::after{display:none !important;}

/* ============================================================
   CASE STUDY - premium magazine reader (.cs)
   ============================================================ */
.cs{max-width:1120px;margin:0 auto}
.cs-back{display:inline-flex;align-items:center;gap:.45em;color:#8fb0ff;font-weight:600;font-size:14px;margin-bottom:1.8rem;transition:gap .2s}
.cs-back:hover{gap:.75em}
.cs-hero{max-width:880px;margin-bottom:2.6rem}
.cs-hero-meta{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.cs-hero-meta .cs-cat{color:#10b981;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);padding:.4em .8em;border-radius:999px}
.cs-title{font-family:'Sora','Inter',sans-serif;font-size:clamp(30px,5.4vmin,58px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 1.1rem}
.cs-sum{color:var(--muted-2);font-size:clamp(16px,1.9vmin,19px);line-height:1.6;max-width:62ch;margin:0 0 1.6rem}

.cs-cover{position:relative;width:100%;aspect-ratio:16/8.5;overflow:hidden;border-radius:var(--radius-lg);border:var(--glass-border);box-shadow:var(--shadow-card);background:#0a1230;margin-bottom:2.4rem}
.cs-cover img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.cs-statband{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 3rem;
  padding:1.8rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(43,78,214,.16),rgba(16,185,129,.10));
  border:1px solid rgba(143,176,255,.22);box-shadow:var(--shadow-card);
}
.cs-statband .st{text-align:center}
.cs-statband .st b{display:block;font-family:'Sora','Inter',sans-serif;font-size:clamp(26px,4vmin,40px);font-weight:800;line-height:1;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-statband .st small{display:block;margin-top:.5rem;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.cs-body{display:grid;grid-template-columns:1fr 320px;gap:3rem;align-items:start}
.cs-article{font-size:17px;line-height:1.78;color:var(--muted-2)}
.cs-article p{margin:0 0 1.3rem}
.cs-article h2{font-family:'Sora','Inter',sans-serif;font-size:clamp(20px,2.8vmin,27px);font-weight:700;letter-spacing:-.01em;margin:2.2rem 0 .9rem;color:var(--ink);display:flex;align-items:center;gap:.6rem}
.cs-article h2::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--grad-cta);flex-shrink:0}
.cs-article h2:first-child{margin-top:0}
.cs-article a{color:#8fb0ff;text-decoration:underline}
.cs-article ul,.cs-article ol{margin:0 0 1.3rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}

.cs-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.2rem}
.cs-card{background:var(--glass);border:var(--glass-border);border-radius:var(--radius-lg);padding:1.5rem;backdrop-filter:blur(12px);box-shadow:var(--shadow-card)}
.cs-card h4{margin:0 0 1.1rem;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}
.cs-dl{display:flex;flex-direction:column;gap:.9rem;margin:0 0 1.3rem}
.cs-dl .row{display:flex;flex-direction:column;gap:.2rem}
.cs-dl dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}
.cs-dl dd{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.cs-card .cta{width:100%;justify-content:center}
.cs-card.cs-promo{background:linear-gradient(160deg,rgba(43,78,214,.18),rgba(16,185,129,.10));border-color:rgba(143,176,255,.28)}
.cs-card.cs-promo h4{color:#8fb0ff}
.cs-card.cs-promo p{margin:.2rem 0 1.2rem;font-size:14px;line-height:1.55;color:var(--muted-2)}

.cs-next{margin-top:3.5rem;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.08)}
.cs-next .eyebrow{display:inline-flex;align-items:center;gap:.6em;padding:.4em .9em;border-radius:999px;background:var(--glass);border:var(--glass-border);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.4rem;font-family:'JetBrains Mono',monospace}
.cs-next-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.cs-next-card{display:flex;gap:1rem;align-items:center;padding:1rem;border-radius:16px;background:var(--glass);border:var(--glass-border);transition:transform .3s,border-color .3s}
.cs-next-card:hover{transform:translateY(-3px);border-color:rgba(143,176,255,.4)}
.cs-next-card img{width:84px;height:64px;object-fit:cover;border-radius:10px;flex-shrink:0;background:#0a1230}
.cs-next-card .nx b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.cs-next-card .nx small{color:var(--muted);font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.12em}

[data-theme="dark"] .cs-article{color:#d6def6}
[data-theme="light"] .cs-title{color:#0a0f1e}
[data-theme="light"] .cs-article{color:#2c3450}
[data-theme="light"] .cs-article h2{color:#0a0f1e}
[data-theme="light"] .cs-statband{background:linear-gradient(135deg,rgba(43,78,214,.10),rgba(16,185,129,.08));border-color:rgba(43,78,214,.18)}

@media(max-width:920px){
  .cs-body{grid-template-columns:1fr;gap:2rem}
  .cs-side{position:static;flex-direction:row;flex-wrap:wrap}
  .cs-side .cs-card{flex:1;min-width:240px}
}
@media(max-width:680px){
  .cs-statband{grid-template-columns:repeat(2,1fr);gap:.8rem;padding:1.3rem}
  .cs-next-grid{grid-template-columns:1fr}
  .cs-side{flex-direction:column}
  .cs-cover{aspect-ratio:16/10}
}

/* ============================================================
   CASE STUDY LISTING - index number + polish
   ============================================================ */
.study .cs-index{position:absolute;top:1.4rem;right:1.6rem;font-family:'Sora','Inter',sans-serif;font-size:54px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(143,176,255,.28);z-index:2;pointer-events:none}
.study .cs-hl{display:inline-flex;align-items:baseline;gap:.5em;margin:.2rem 0 1rem;padding:.5em .9em;border-radius:12px;background:rgba(16,185,129,.10);border:1px solid rgba(16,185,129,.28)}
.study .cs-hl b{font-family:'Sora','Inter',sans-serif;font-size:22px;font-weight:800;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.study .cs-hl small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace}

/* ============================================================
   CONTACT FORM - phone + country picker & validation
   ============================================================ */
.phone-row{display:flex;gap:.6rem;align-items:stretch}
.phone-row input[name="phone"]{flex:1;min-width:0}
.ccd{position:relative;flex-shrink:0}
.cc-trigger{height:100%;display:flex;align-items:center;gap:.45em;font:inherit;font-size:15px;color:#e9eefc;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:0 .85em;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s,box-shadow .2s}
.cc-trigger:hover{background:rgba(255,255,255,.06)}
.ccd.open .cc-trigger{border-color:rgba(143,176,255,.6);box-shadow:0 0 0 4px rgba(67,56,202,.15)}
.cc-trigger .cc-flag{font-size:18px;line-height:1}
.cc-trigger .cc-dial{font-weight:600}
.cc-trigger .dd-arrow{width:12px;height:12px;color:var(--muted);stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.ccd.open .cc-trigger .dd-arrow{transform:rotate(180deg);color:#8fb0ff}
.cc-panel{position:absolute;top:calc(100% + 8px);left:0;width:300px;max-width:80vw;z-index:40;
  background:linear-gradient(180deg,rgba(15,18,40,.98),rgba(10,13,30,.97));
  border:1px solid rgba(143,176,255,.22);border-radius:14px;backdrop-filter:blur(20px);
  box-shadow:0 30px 60px rgba(0,0,0,.55);overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .22s cubic-bezier(.5,1.4,.5,1)}
.ccd.open .cc-panel{opacity:1;pointer-events:auto;transform:none}
.cc-search{width:100%;font:inherit;font-size:14px;color:#e9eefc;background:rgba(255,255,255,.05);
  border:0;border-bottom:1px solid rgba(255,255,255,.1);padding:.85em 1em;outline:none}
.cc-search::placeholder{color:#7a86a8}
.cc-options{list-style:none;margin:0;padding:.4rem;max-height:260px;overflow-y:auto}
.cc-options li{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:9px;cursor:pointer;font-size:14px;color:#cfd6ee;transition:background .15s,color .15s}
.cc-options li:hover{background:rgba(67,56,202,.28);color:#fff}
.cc-options .cc-n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-options .cc-d{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12.5px}
.cc-options .cc-f{font-size:17px}
.cc-empty{color:var(--muted);padding:.9em;text-align:center;font-size:13px;list-style:none}
.cc-options::-webkit-scrollbar{width:6px}
.cc-options::-webkit-scrollbar-thumb{background:rgba(143,176,255,.3);border-radius:3px}
[data-theme="light"] .cc-trigger{background:rgba(255,255,255,.85);border-color:rgba(20,30,80,.10);color:#0a0f1e}
[data-theme="light"] .cc-panel{background:linear-gradient(180deg,#ffffff,#f6f8fd);border-color:rgba(167,139,250,.3);box-shadow:0 30px 60px rgba(20,30,80,.18)}
[data-theme="light"] .cc-search{color:#0a0f1e;background:rgba(20,30,80,.04);border-bottom-color:rgba(20,30,80,.08)}
[data-theme="light"] .cc-search::placeholder{color:#8892b0}
[data-theme="light"] .cc-options li{color:#1a2244}
[data-theme="light"] .cc-options li:hover{background:rgba(67,56,202,.12);color:#0a0f1e}

/* validation states */
.field-err{display:none;color:#fca5a5;font-size:12.5px;margin-top:.15rem}
.field.is-invalid .field-err{display:block}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid .cc-trigger,.field.is-invalid .dd-trigger{border-color:rgba(239,68,68,.65) !important}
.field.is-invalid input:focus,.field.is-invalid textarea:focus{box-shadow:0 0 0 4px rgba(239,68,68,.14) !important}
[data-theme="light"] .field-err{color:#dc2626}

/* ============================================================
   FLOATING WHATSAPP BUTTON (left)
   ============================================================ */
.wa-float{
  position:fixed;left:20px;bottom:20px;z-index:45;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float svg{width:30px;height:30px;fill:#fff;position:relative;z-index:1}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;animation:waPulse 2.4s ease-out infinite;z-index:0}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 40px rgba(37,211,102,.6)}
@media(max-width:760px){.wa-float{width:52px;height:52px;left:16px;bottom:16px}.wa-float svg{width:28px;height:28px}}

/* ============================================================
   PREMIUM SINGLE-PAGE READER (blog post + case study)
   ============================================================ */
/* reading progress bar */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,#10b981,#8fb0ff,#6d6ae8,#d4af37);
  box-shadow:0 0 14px rgba(109,106,232,.6);transition:width .1s linear}

/* blog cover as a premium hero image */
.reader .reader-cover{aspect-ratio:2/1;box-shadow:0 40px 90px rgba(0,0,0,.5)}
/* drop-cap on the first paragraph */
.reader .prose > p:first-of-type::first-letter,
.cs-article > p:first-of-type::first-letter{
  float:left;font-family:'Sora','Inter',sans-serif;font-weight:800;
  font-size:3.2em;line-height:.78;margin:.06em .12em 0 0;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* blockquotes */
.reader .prose blockquote,.cs-article blockquote{
  margin:1.8rem 0;padding:1rem 1.4rem;border-left:3px solid #6d6ae8;border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,rgba(109,106,232,.10),rgba(109,106,232,.03));
  font-style:italic;color:var(--ink)}

/* end-of-article CTA (blog) */
.reader-cta{max-width:820px;margin:3rem auto 0;text-align:center;padding:2.6rem 2rem;
  border-radius:var(--radius-lg);position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(43,78,214,.16),rgba(16,185,129,.10));
  border:1px solid rgba(143,176,255,.22);box-shadow:var(--shadow-card)}
.reader-cta h3{margin:0 0 .5rem;font-size:clamp(20px,3vmin,28px);font-weight:800;letter-spacing:-.01em}
.reader-cta p{margin:0 auto 1.4rem;color:var(--muted-2);font-size:15px;line-height:1.6;max-width:46ch}

/* "keep reading" more-posts grid (blog) */
.more-posts{max-width:1120px;margin:3.5rem auto 0;padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.08)}
.more-posts .eyebrow{display:inline-flex;align-items:center;gap:.6em;margin-bottom:1.4rem;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.more-posts .eyebrow .dot{width:.5em;height:.5em;border-radius:50%;background:#10b981;box-shadow:0 0 10px #10b981}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.more-card{display:flex;flex-direction:column;gap:.7rem;border-radius:16px;overflow:hidden;
  background:var(--glass);border:var(--glass-border);padding:0 0 1.1rem;transition:transform .3s,border-color .3s}
.more-card:hover{transform:translateY(-4px);border-color:rgba(143,176,255,.4)}
.more-card .more-cover{display:block;aspect-ratio:1.8/1;overflow:hidden;background:#0a1230}
.more-card .more-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.more-card:hover .more-cover img{transform:scale(1.05)}
.more-card .more-cat{margin:0 1.1rem;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8fb0ff}
.more-card b{margin:0 1.1rem;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)}
[data-theme="light"] .reader-cta p{color:#2c3450}
[data-theme="light"] .more-card b{color:#0a0f1e}
@media(max-width:760px){
  .more-grid{grid-template-columns:1fr}
  .reader .prose > p:first-of-type::first-letter,
  .cs-article > p:first-of-type::first-letter{font-size:2.6em}
}