/* ============================================================
   ADEPTIVIQ — DARK THEME PREVIEW
   Single dark theme: Midnight Corporate
   ============================================================ */

/* ---------- BASE TOKENS (shared) ---------- */
:root{
  --font-display:'Archivo',sans-serif;
  --font-body:'Sora',sans-serif;
  --accent:#0080FF;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px;
}

/* ===== VARIANT A — MIDNIGHT CORPORATE =====
   Refined slate-black, soft elevated panels, restrained blue.
   Corporate-safe, clean, low-noise. */
:root{
  --bg:#0c0e12;            /* page */
  --bg-dim:#101319;        /* alternating sections */
  --bg-dark:#080a0d;       /* deepest */
  --surface:#14171e;       /* cards */
  --surface-2:#181c24;     /* card hover / nested */
  --ink:#f4f6fa;           /* primary text */
  --muted:#aab3c2;         /* body text */
  --muted-light:#7c8696;   /* meta text */
  --line:#222731;          /* borders */
  --line-soft:#1b1f27;
  --accent:#2f95ff;
  --accent-soft:rgba(47,149,255,.12);
  --accent-glow:rgba(47,149,255,.22);
  --hover-green:#2DB200;   /* secondary highlight — used for card hover outlines */
  --header-bg:rgba(8,10,13,.85);
  --hero-grid:rgba(255,255,255,.035);
  --card-radius:10px;
  --tex-op:.04;
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink);}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img,svg{display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
section{position:relative;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;
  padding:14px 26px;border-radius:6px;cursor:pointer;border:1.5px solid transparent;
  transition:all .25s var(--ease);
}
.btn .arrow{transition:transform .25s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{
  background:var(--accent);color:#fff;
  box-shadow:0 8px 30px -8px var(--accent-glow);
}
.btn-primary:hover{filter:brightness(1.12);box-shadow:0 12px 40px -8px var(--accent-glow);transform:translateY(-2px);}
.btn-ghost,.btn-ghost-light{
  background:transparent;border-color:var(--line);color:var(--ink);
}
.btn-ghost:hover,.btn-ghost-light:hover{border-color:var(--accent);color:var(--accent);}
.btn-white{background:#fff;color:#0a0c10;}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 40px -10px rgba(0,0,0,.6);}
.btn-green{background:#2DB200;color:#fff;box-shadow:0 8px 30px -8px rgba(45,178,0,.5);}
.btn-green:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 12px 40px -8px rgba(45,178,0,.55);}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--header-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.logo{
  display:flex;align-items:center;
}
.logo img{
  display:block;
  height:34px;width:auto;
}
.footer-brand .logo img{height:38px;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:500;font-size:.95rem;
  padding:10px 16px;border-radius:6px;color:var(--muted);
  transition:color .2s,background .2s;
}
.nav-link:hover{color:var(--ink);background:var(--surface);}
.chev{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .25s;
}
/* mega menus open on CLICK — JS toggles .open on the .nav-item */
.nav-item.open .chev{transform:rotate(225deg);margin-top:2px;}
.nav-item.open>.nav-link{color:var(--ink);background:var(--surface);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .btn{padding:11px 20px;font-size:.9rem;}

/* MEGA MENU — full page width */
.mega{
  position:fixed;
  top:74px;            /* sits flush under the 74px-tall header */
  left:0;right:0;
  width:100%;
  height:460px;        /* FIXED height — identical across all four
                          mega menus (set slightly above the tallest,
                          Solutions, whose Industry column now has 9
                          items and needs ~444px) */
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  z-index:300;
  display:flex;align-items:flex-start;  /* top-align content so every mega
                                           has the same top padding */
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;}
/* mega background — a faint "running figure" mesh watermark on the
   right (echoes the site's network motif with motion + energy), plus
   soft accent glows and a light grid. all decorative, behind content. */
.mega::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("../assets/mega-runner.png"),
    radial-gradient(ellipse 46% 90% at 90% -10%,rgba(47,149,255,.16) 0%,rgba(47,149,255,0) 70%),
    radial-gradient(ellipse 40% 80% at 6% 110%,rgba(47,149,255,.09) 0%,rgba(47,149,255,0) 70%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-position:right -60px center,0 0,0 0,0 0,0 0;
  background-size:auto 560px,100% 100%,100% 100%,40px 40px,40px 40px;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat;
}
/* inner content constrained to page width so columns align with the site */
.mega-inner{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:34px 32px;
  display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;
  gap:4px;
}
/* wider variant: four nav columns + feature panel (Products, About) */
.mega-inner.mega-inner--wide{grid-template-columns:repeat(4,1fr) 1.15fr;}
.mega-col{padding:8px 22px;}
.mega-col:not(:last-of-type){border-right:1px solid var(--line-soft);}
.mega-col-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.mega-col-head .ico{
  width:30px;height:30px;border-radius:7px;flex-shrink:0;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;
}
.mega-col-head .ico svg{width:16px;height:16px;}
.mega-col-head a{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--ink);}
.mega-col-head a:hover{color:var(--accent);}
.mega-list li a{
  display:block;padding:7px 10px;border-radius:6px;
  font-size:.875rem;color:var(--muted);transition:all .18s;
}
.mega-list li a:hover{background:var(--surface-2);color:var(--accent);padding-left:14px;}
/* short product description inside a mega column */
.mega-desc{
  font-size:.85rem;line-height:1.5;color:var(--muted);
  padding:2px 10px 10px;margin:0;
}
.mega-col-head a .iq{color:var(--accent);}
.mega-feature{
  background:rgba(8,10,13,.58);   /* semi-transparent so the runner
                                     watermark stays faintly visible */
  border-radius:10px;padding:24px 22px;
  display:flex;flex-direction:column;
  align-self:flex-start;          /* hug content height, top-aligned */
}
.mega-feature .tag{
  font-family:var(--font-display);font-weight:700;font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.mega-feature h4{font-size:1.08rem;margin-bottom:8px;color:var(--ink);}
.mega-feature p{font-size:.84rem;color:var(--muted);margin-bottom:auto;}
.feat-link{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  color:var(--accent);display:inline-flex;gap:6px;margin-top:14px;
}
.feat-link .arrow{transition:transform .2s;}
.feat-link:hover .arrow{transform:translateX(4px);}

/* sample use-case bullets inside a product mega column */
.mega-uc-label{
  font-family:var(--font-display);font-weight:700;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  margin:12px 10px 7px;
}
.mega-uc{list-style:none;margin:0 10px;display:grid;gap:6px;}
.mega-uc li{
  position:relative;padding-left:15px;
  font-size:.8rem;line-height:1.35;color:var(--muted);
}
.mega-uc li::before{
  content:"";position:absolute;left:2px;top:.52em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}
/* Product mega columns are a vertical stack. On the desktop 4-column layout,
   align the head / description / label / list ROWS across all product columns
   with subgrid, so the "Sample use cases" labels start on the same vertical
   line regardless of how long each description runs. Falls back to bottom-
   pinning the use-case block below 1080px or where subgrid isn't supported. */
.mega-col:has(.mega-uc){display:flex;flex-direction:column;}
.mega-col:has(.mega-uc) .mega-uc-label{margin-top:auto;}
@media(min-width:1081px){
  @supports(grid-template-rows:subgrid){
    .mega-inner--wide:has(.mega-uc){grid-template-rows:repeat(4,auto);}
    .mega-inner--wide:has(.mega-uc) > .mega-col{
      display:grid;grid-template-rows:subgrid;grid-row:1 / -1;row-gap:0;
    }
    .mega-inner--wide:has(.mega-uc) > .mega-col .mega-uc-label{margin-top:0;}
    .mega-inner--wide:has(.mega-uc) > .mega-feature{grid-row:1 / -1;}
  }
}

/* sample use-case bullets on the product page (inside .fr-text) */
.uc-block{margin-top:22px;}
.uc-block + .chips{margin-top:24px;}
.uc-label{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  margin-bottom:11px;
}
.uc-list{list-style:none;display:grid;gap:9px;}
.uc-list li{
  position:relative;padding-left:24px;
  font-size:.93rem;line-height:1.45;color:var(--muted);
}
.uc-list li::before{
  content:"";position:absolute;left:4px;top:.18em;
  width:6px;height:11px;border:solid var(--accent);
  border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* Capabilities mega: 2x3 grid of capability cards, spans 3 of 4 outer columns */
.cap-grid{
  grid-column:1 / span 3;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:0 6px;
}
.cap-card{
  /* icon + title sit on the SAME row (left col = icon, right col = title);
     the description spans both columns below. matches the Products /
     Use Cases mega-col-head pattern. */
  display:grid;
  grid-template-columns:auto 1fr;
  grid-column-gap:10px;
  grid-row-gap:6px;
  align-items:center;
  padding:8px 18px 20px;       /* top matches .mega-col's 8px so Capabilities
                                  aligns with Products/Use Cases mega menus */
  border-radius:10px;
  border:1px solid transparent;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.cap-card:hover{
  background:var(--surface-2);
  border-color:var(--line-soft);
  transform:translateY(-1px);
}
.cap-ico{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(62,160,255,.10);
  color:var(--accent);
  border-radius:8px;
  /* no bottom margin — icon now sits inline with the title via grid */
}
.cap-ico svg{width:18px;height:18px;}
.cap-card h4{
  font-family:var(--font-display);font-weight:700;
  font-size:.95rem;color:var(--ink);
  margin:0;                          /* grid gap controls spacing now */
}
.cap-card p{
  grid-column:1 / -1;                /* description spans full width below */
  font-size:.8rem;line-height:1.5;color:var(--muted);
  margin:0;
}
.cap-card:hover h4{color:var(--accent);}

/* burger + mobile nav */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.burger span{width:24px;height:2px;background:var(--ink);transition:all .25s;}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{
  position:fixed;top:0;right:-100%;width:min(380px,86vw);height:100vh;
  background:var(--bg-dark);border-left:1px solid var(--line);
  z-index:500;padding:90px 24px 40px;overflow-y:auto;
  transition:right .35s var(--ease);
}
.mobile-nav.open{right:0;}
.m-group{border-bottom:1px solid var(--line-soft);}
.m-group>a,.m-toggle{
  display:flex;width:100%;justify-content:space-between;align-items:center;
  padding:16px 4px;font-family:var(--font-display);font-weight:600;font-size:1rem;
  color:var(--ink);background:none;border:none;cursor:pointer;
}
.m-toggle .chev{transition:transform .25s;}
.m-toggle.open .chev{transform:rotate(225deg);}
.m-sub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.m-sub.open{max-height:1600px;}
.m-sub a{display:block;padding:9px 14px;font-size:.9rem;color:var(--muted);}
.m-sub a:hover{color:var(--accent);}
.m-sub-head{
  font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);
  padding:14px 14px 4px;
}
.mobile-cta{margin-top:24px;}
.mobile-cta .btn{width:100%;justify-content:center;}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:128px 0 108px;
  background:#05070b;
  min-height:620px;
}
/* cinematic animated scene */
.hero-canvas{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:0;
  /* pointer events ON so the scene reacts to mouse parallax,
     but the hero buttons sit above on z-index:3 and stay clickable */
}
/* legibility wash — keeps the headline crisp over the scene */
.hero-fade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 56% at 50% 43%,
      rgba(5,7,11,.95) 0%,
      rgba(5,7,11,.84) 28%,
      rgba(5,7,11,.42) 54%,
      rgba(5,7,11,0) 80%),
    linear-gradient(180deg,
      rgba(5,7,11,.60) 0%,
      rgba(5,7,11,0) 24%,
      rgba(5,7,11,0) 68%,
      rgba(5,7,11,.45) 100%);
}
.hero-inner{position:relative;z-index:3;text-align:center;max-width:920px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:100px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  margin-bottom:28px;
}
.hero-eyebrow .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.4s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow);}70%{box-shadow:0 0 0 12px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.hero h1{
  font-size:clamp(2.6rem,6vw,4.7rem);font-weight:900;
  margin-bottom:24px;letter-spacing:-.035em;
}
.hero h1 .hl{
  color:var(--accent);position:relative;
}
.hero .lead{
  font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--muted);
  max-width:680px;margin:0 auto 36px;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(34,39,49,.7);
  border:1px solid rgba(47,149,255,.18);
  border-radius:var(--card-radius);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-stat{background:rgba(12,14,18,.82);padding:30px 22px;}
.hero-stat .num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,3vw,2.7rem);color:var(--ink);letter-spacing:-.02em;
}
.hero-stat .num .accent{color:var(--accent);}
.hero-stat .lbl{font-size:.82rem;color:var(--muted-light);margin-top:6px;}

/* ---------- LOGOS ---------- */
.logos-strip{padding:42px 0;background:var(--bg);border-bottom:1px solid var(--line-soft);}
.logos-label{
  text-align:center;font-family:var(--font-display);font-weight:600;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-light);margin-bottom:24px;
}
.logos-row{
  display:flex;justify-content:center;align-items:center;
  gap:48px;flex-wrap:wrap;
}
.logos-row .lg{
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  color:var(--muted-light);opacity:.62;letter-spacing:-.01em;
  transition:opacity .25s,color .25s;
}
.logos-row .lg:hover{opacity:1;color:var(--ink);}

/* ---------- SECTIONS ---------- */
.section{padding:100px 0;}
.section-dim{background:var(--bg-dim);}
.section-dark{background:var(--bg-dark);}
.section-head{max-width:680px;margin-bottom:54px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.section-head.center .eyebrow{justify-content:center;}
.section-head h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:16px;}
.section-head p{color:var(--muted);font-size:1.05rem;}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split.reverse .split-visual{order:2;}
.split-visual{
  aspect-ratio:1/.86;border-radius:var(--card-radius);
  background:var(--surface);border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.grid-tex{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,var(--tex-op)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,var(--tex-op)) 1px,transparent 1px);
  background-size:38px 38px;
}
.feat-list{margin-top:26px;}
.feat-list li{
  display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);
}
.feat-list li:last-child{border-bottom:none;}
.fl-ico{
  width:42px;height:42px;border-radius:9px;flex-shrink:0;
  background:var(--accent-soft);display:grid;place-items:center;
}
.fl-ico svg{width:20px;height:20px;stroke:var(--accent);}
.feat-list h4{font-size:1.05rem;margin-bottom:3px;color:var(--ink);}
.feat-list p{font-size:.92rem;color:var(--muted);}

/* steps grid (services) */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:36px 30px;
  transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.step-card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--hover-green);transition:width .4s var(--ease);
}
.step-card:hover{border-color:var(--hover-green);transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.step-card:hover::before{width:100%;}
.step-num{
  font-family:var(--font-display);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;color:var(--accent);margin-bottom:18px;
}
.ico-box{
  width:54px;height:54px;border-radius:11px;
  background:var(--accent-soft);display:grid;place-items:center;margin-bottom:20px;
}
.ico-box svg{width:26px;height:26px;stroke:var(--accent);}
.step-card h3{font-size:1.4rem;margin-bottom:10px;}
.step-card>p{color:var(--muted);font-size:.96rem;margin-bottom:18px;}
.sub-list li{
  font-size:.88rem;color:var(--muted);padding:8px 0;
  border-top:1px solid var(--line-soft);padding-left:18px;position:relative;
}
.sub-list li::before{
  content:"";position:absolute;left:0;top:15px;width:7px;height:7px;
  border-radius:50%;background:var(--accent);
}
.card-link{
  font-family:var(--font-display);font-weight:600;font-size:.9rem;
  color:var(--accent);display:inline-flex;gap:7px;margin-top:18px;
}
.card-link .arrow{transition:transform .2s;}
.card-link:hover .arrow{transform:translateX(4px);}

/* solutions grid */
.sol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1100px;margin-inline:auto;}
.sol-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:38px 32px;
  transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.sol-card:hover{border-color:var(--hover-green);transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.s-num{
  position:absolute;top:24px;right:28px;
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;
  color:var(--line);transition:color .3s;
}
.sol-card:hover .s-num{color:var(--accent-soft);}
.s-ico{
  width:58px;height:58px;border-radius:12px;
  background:var(--accent-soft);display:grid;place-items:center;margin-bottom:22px;
}
.s-ico svg{width:28px;height:28px;stroke:var(--accent);}
.sol-card h3{font-size:1.45rem;margin-bottom:10px;}
.sol-card p{color:var(--muted);font-size:.95rem;}

/* offices (about page) — two cards, same surface/border card style */
.office-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  max-width:760px;margin:0 auto;
}
.office-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:36px 32px;
  transition:all .35s var(--ease);
}
.office-card:hover{
  border-color:var(--hover-green);transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.office-ico{
  width:54px;height:54px;border-radius:11px;
  background:var(--accent-soft);display:grid;place-items:center;margin-bottom:20px;
}
.office-ico svg{width:26px;height:26px;stroke:var(--accent);}
.office-card h3{font-size:1.4rem;margin-bottom:10px;}
.office-card address{
  font-style:normal;color:var(--muted);font-size:.96rem;line-height:1.65;
  margin-bottom:16px;
}
@media(max-width:560px){
  .office-grid{grid-template-columns:1fr;}
}

/* careers — job listings */
.job-list{
  display:flex;flex-direction:column;gap:14px;
  max-width:820px;margin:0 auto;
}
/* a single job posting — a full-width row, easy to scan and to repeat */
.job-card{
  display:flex;align-items:center;gap:24px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:26px 30px;
  transition:all .3s var(--ease);
}
.job-card:hover{
  border-color:var(--hover-green);transform:translateY(-3px);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.7);
}
.job-main{flex:1;min-width:0;}
.job-card h3{font-size:1.2rem;margin-bottom:5px;}
.job-card .job-main p{color:var(--muted);font-size:.93rem;}
.job-meta{
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;
  text-align:right;flex-shrink:0;
}
.job-tag{
  font-family:var(--font-display);font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
}
.job-detail{font-size:.84rem;color:var(--muted-light);}
.job-arrow{
  font-size:1.2rem;color:var(--muted-light);flex-shrink:0;
  transition:transform .25s,color .25s;
}
.job-card:hover .job-arrow{transform:translateX(4px);color:var(--hover-green);}
/* empty state — shown when there are no open roles */
.job-empty{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);padding:54px 40px;text-align:center;
}
.job-empty-ico{
  width:60px;height:60px;border-radius:13px;margin:0 auto 22px;
  background:var(--accent-soft);display:grid;place-items:center;
}
.job-empty-ico svg{width:28px;height:28px;stroke:var(--accent);}
.job-empty h3{font-size:1.35rem;margin-bottom:12px;}
.job-empty p{
  color:var(--muted);font-size:.98rem;line-height:1.6;
  max-width:520px;margin:0 auto 26px;
}
.job-foot{
  text-align:center;color:var(--muted-light);font-size:.92rem;
  margin-top:28px;
}
.job-foot a{color:var(--accent);}
@media(max-width:600px){
  .job-card{flex-direction:column;align-items:flex-start;gap:14px;}
  .job-meta{align-items:flex-start;text-align:left;}
  .job-arrow{display:none;}
}

/* process timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;}
.timeline::before{
  content:"";position:absolute;top:7px;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent);
}
.tl-step{position:relative;padding-top:34px;text-align:center;}
.tl-dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--accent);
}
.tl-dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);
}
.tl-num{
  font-family:var(--font-display);font-weight:900;font-size:.8rem;
  color:var(--accent);margin-bottom:8px;
}
.tl-step h4{font-size:1.2rem;margin-bottom:8px;}
.tl-step p{font-size:.9rem;color:var(--muted);}

/* blog grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);overflow:hidden;
  display:flex;flex-direction:column;transition:all .35s var(--ease);
}
.post-card:hover{transform:translateY(-6px);border-color:var(--hover-green);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.pc-img{height:178px;background:var(--bg-dark);position:relative;overflow:hidden;}
.pc-img .grid-tex{background-size:34px 34px;}
.pc-ico{position:absolute;inset:0;display:grid;place-items:center;}
.pc-ico svg{width:46px;height:46px;stroke:var(--accent);}
.pc-body{padding:26px 24px;flex:1;display:flex;flex-direction:column;}
.post-cat{
  font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  margin-bottom:12px;display:inline-block;
}
/* When the category sits inside a .post-card, lift it onto the photo
   as a green pill — visually consistent with the .anno-tag treatment
   on the bigger feature photos. The original text stays in document
   flow for SEO/a11y; we just visually relocate it. */
.post-card{position:relative;}
.post-card .post-cat{
  position:absolute;top:12px;left:12px;z-index:2;
  margin:0;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  font-size:10px;letter-spacing:.18em;font-weight:700;
  background:#2DB200;color:#06101c;
  padding:5px 9px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
}
.post-card:hover .post-cat{
  /* slight lift on hover to match the card's translate effect */
  transform:translateY(-2px);transition:transform .35s var(--ease);
}
.pc-body h3{font-size:1.15rem;margin-bottom:9px;line-height:1.3;}
.pc-body p{font-size:.9rem;color:var(--muted);margin-bottom:18px;flex:1;}
.pc-meta{
  font-size:.78rem;color:var(--muted-light);
  font-family:var(--font-display);font-weight:500;
  border-top:1px solid var(--line-soft);padding-top:14px;
}

/* CTA banner */
.cta-banner{
  position:relative;overflow:hidden;padding:90px 0;
  background:var(--bg-dark);text-align:center;
  border-top:1px solid var(--line);
}
/* photo background layer — a dusk city skyline. sits at the back;
   the grid texture and content layer over it. */
.cta-banner .cta-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url('../assets/cta-skyline.jpg');
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
}
/* dark legibility wash over the photo so the headline, lead text and
   button stay crisp. kept fairly light — the skyline photo is already
   dark/moody — so the city stays clearly visible; a soft radial keeps
   the centre, where the text sits, a touch darker for contrast. */
.cta-banner .cta-wash{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,
      rgba(8,10,13,.50) 0%,
      rgba(8,10,13,.34) 50%,
      rgba(8,10,13,.60) 100%),
    radial-gradient(ellipse 66% 86% at 50% 50%,
      rgba(8,10,13,.30) 0%,
      rgba(8,10,13,.12) 55%,
      rgba(8,10,13,0) 85%);
}
.cta-banner .grid-tex{
  z-index:2;
  background-image:
    linear-gradient(var(--hero-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 50%,#000,transparent 75%);
}
.cta-banner .inner{position:relative;z-index:3;max-width:680px;}
.cta-banner h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:16px;}
.cta-banner p{color:var(--muted);font-size:1.08rem;margin-bottom:30px;}

/* footer */
.site-footer{background:var(--bg-dark);border-top:1px solid var(--line);padding:72px 0 32px;}
.footer-top{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5, max-content);gap:32px;
  padding-bottom:48px;border-bottom:1px solid var(--line);
}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand p{color:var(--muted);font-size:.92rem;max-width:330px;margin-bottom:20px;}
/* office addresses — stacked inside the Company footer column */
.footer-col-offices{display:flex;flex-direction:column;gap:18px;}
.footer-office h6{
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  margin-bottom:6px;
}
.footer-office address{
  font-style:normal;font-size:.86rem;line-height:1.6;color:var(--muted);
}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{
  width:38px;height:38px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);transition:all .22s;
}
.footer-socials a:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);}
.footer-socials svg{width:17px;height:17px;}
.footer-col h5{
  font-family:var(--font-display);font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:16px;
}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{font-size:.9rem;color:var(--muted);transition:color .2s;white-space:nowrap;}
.footer-col ul li a:hover{color:var(--accent);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:.85rem;color:var(--muted-light);}
.footer-legal{display:flex;gap:22px;}
.footer-legal a{font-size:.85rem;color:var(--muted-light);transition:color .2s;}
.footer-legal a:hover{color:var(--accent);}

/* reveal anim */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* responsive */
@media(max-width:1080px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .mega-inner{grid-template-columns:1fr 1fr;}
  .mega-inner.mega-inner--wide{grid-template-columns:1fr 1fr;}
}
@media(max-width:920px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .split,.split.reverse .split-visual{grid-template-columns:1fr;order:0;}
  .split{gap:40px;}
  .steps-grid,.sol-grid,.blog-grid{grid-template-columns:1fr;}
  .timeline{grid-template-columns:repeat(2,1fr);gap:36px;}
  .timeline::before{display:none;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
  .wrap{padding:0 20px;}
  .hero-stats{grid-template-columns:1fr;}
  .timeline{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .section{padding:70px 0;}
}
/* ============================================================
   INNER PAGE COMPONENTS — Midnight Corporate dark theme
   ============================================================ */

/* ---------- PAGE HERO (interior page banner) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  padding:120px 0 70px;
  background:#05070b;
  border-bottom:1px solid var(--line);
}
.page-hero .grid-tex,.page-hero .ph-glow{display:none;}
/* static hero image — replaces the former canvas animation. one shared
   image by default; any page can override with an inline
   style="background-image:url('assets/...')" on its own .ph-photo. */
.page-hero .ph-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url('../assets/page-hero.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.page-hero .ph-wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 92% at 30% 42%,
      rgba(5,7,11,.70) 0%,rgba(5,7,11,.36) 48%,rgba(5,7,11,0) 82%),
    linear-gradient(180deg,rgba(5,7,11,.42) 0%,rgba(5,7,11,0) 42%);
}
/* wash for page heroes that use a photo. tuned to keep the headline
   and lead text legible while letting the photo stay clearly visible —
   a focused darker pool sits behind the text (upper-left), the rest of
   the image is only lightly tinted. add class "ph-shaded" to enable. */
.page-hero.ph-shaded .ph-wash{
  background:
    radial-gradient(ellipse 78% 105% at 30% 46%,
      rgba(5,7,11,.80) 0%,rgba(5,7,11,.42) 55%,rgba(5,7,11,.05) 88%,rgba(5,7,11,0) 100%),
    linear-gradient(180deg,rgba(5,7,11,.42) 0%,rgba(5,7,11,.14) 45%,rgba(5,7,11,.20) 100%);
}
.page-hero .inner,.page-hero .wrap{position:relative;z-index:2;}
.breadcrumb{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-display);font-weight:500;font-size:.85rem;
  color:var(--muted-light);margin-bottom:20px;
}
.breadcrumb a{color:var(--muted-light);transition:color .2s;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{color:var(--line);}
.breadcrumb .current{color:var(--accent);}
.page-hero h1{
  font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:900;
  letter-spacing:-.03em;margin-bottom:16px;max-width:900px;
}
.page-hero h1 .hl{color:var(--accent);}
.page-hero p{
  color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);
  max-width:620px;
}

/* ---------- DETAIL CARDS ---------- */
.detail-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.detail-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:36px 32px;
  transition:all .35s var(--ease);
}
.detail-card:hover{
  border-color:var(--hover-green);
  transform:translateY(-5px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.detail-card .dc-top{
  display:flex;align-items:center;gap:15px;margin-bottom:16px;
}
.detail-card .dc-ico{
  width:50px;height:50px;border-radius:11px;flex-shrink:0;
  background:var(--accent-soft);
  display:grid;place-items:center;
}
.detail-card:hover .dc-ico{background:var(--accent);}
.detail-card .dc-ico svg{width:24px;height:24px;stroke:var(--accent);}
.detail-card:hover .dc-ico svg{stroke:#fff;}
.detail-card .dc-tag{
  font-family:var(--font-display);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
}
.detail-card h3{font-size:1.4rem;margin-bottom:11px;}
.detail-card p{font-size:.95rem;color:var(--muted);}
.detail-card .dc-points{margin-top:18px;}
.detail-card .dc-points li{
  font-size:.89rem;color:var(--muted);
  padding:9px 0;border-top:1px solid var(--line-soft);
  display:flex;gap:10px;align-items:center;
}
.detail-card .dc-points li svg{
  width:15px;height:15px;stroke:var(--accent);flex-shrink:0;
}

/* ---------- PARTNERS ---------- */
.partner-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.partner-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  padding:32px;
  display:flex;flex-direction:column;
  transition:all .35s var(--ease);
}
.partner-card:hover{
  border-color:var(--hover-green);
  transform:translateY(-5px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.partner-card .pc-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:18px;
}
.partner-card .pc-logo{
  width:100%;height:104px;border-radius:11px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;place-items:center;
  overflow:hidden;
  transition:all .35s var(--ease);
}
.partner-card:hover .pc-logo{
  border-color:var(--accent);
}
.partner-card .pc-logo img{
  max-width:78%;max-height:74%;
  width:auto;height:auto;
  object-fit:contain;display:block;
}
.partner-card .pc-name{
  font-family:var(--font-display);font-weight:800;
  font-size:1.22rem;color:var(--ink);line-height:1.2;
}
.partner-card .pc-type{
  display:block;margin-top:3px;
  font-family:var(--font-display);font-weight:700;
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
}
.partner-card .pc-desc{
  font-size:.95rem;color:var(--muted);flex-grow:1;
}
.partner-card .pc-tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
}
.partner-card .pc-tag{
  font-family:var(--font-display);font-weight:600;
  font-size:.74rem;letter-spacing:.02em;
  color:var(--muted-light);
  background:var(--bg-dim);
  border:1px solid var(--line-soft);
  padding:6px 11px;border-radius:5px;
}
@media(max-width:760px){
  .partner-grid{grid-template-columns:1fr;}
}

/* ---------- FEATURE ROWS (alternating) ---------- */
.fr{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:64px;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--line);
}
.fr:last-child{border-bottom:none;}
.fr.flip .fr-text{order:2;}
.fr-visual{
  aspect-ratio:5/4;border-radius:var(--card-radius);
  background:var(--bg-dark);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.fr-visual .grid-tex{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:38px 38px;
}
.fr-visual::after{
  content:"";position:absolute;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 65%);
  filter:blur(30px);
}
.fr-visual .big-ico{
  width:96px;height:96px;position:relative;z-index:2;
}
.fr-visual .big-ico svg{width:100%;height:100%;stroke:var(--accent);}
.fr-visual .iq-hex{position:absolute;inset:0;width:100%;height:100%;z-index:2;}
.fr-visual img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:1;
}

/* ===== Department photo placeholders with big letters ===== */
.dept-visual img{
  /* extra darkening tint over the (already darkened) photo so white text pops */
  filter:brightness(.82);
}
.dept-visual::after{
  /* subtle dark gradient overlay for consistent contrast; overrides the glow blob */
  content:"";position:absolute;inset:0;width:100%;height:100%;
  background:linear-gradient(180deg,rgba(6,16,28,.30),rgba(6,16,28,.55));
  border-radius:0;filter:none;z-index:2;
}
.dept-letters{
  position:relative;z-index:3;
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:clamp(56px,9vw,120px);
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.65),0 2px 5px rgba(0,0,0,.55);
  user-select:none;line-height:1;
  /* keep letters centered in the area above the capabilities block */
  margin-top:-58px;
}
/* Required AI capabilities — green square pills over bottom of photo */
.dept-caps{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.dept-caps-label{
  font-family:var(--font-display);font-weight:800;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.dept-caps-list{display:flex;flex-wrap:wrap;gap:6px;}
.dept-caps-list a{
  font-family:var(--font-display);font-weight:700;font-size:.76rem;
  color:#06101c;text-decoration:none;
  background:var(--hover-green);
  padding:5px 11px;border-radius:2px;
  box-shadow:0 3px 12px -3px rgba(0,0,0,.5);
  transition:filter .2s ease;
}
.dept-caps-list a:hover{filter:brightness(1.1);}

/* ===== Photo annotations (Direction B — designer's reference) ===== */
/* Applied inside .split-visual and .fr-visual containers. */
.anno{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;pointer-events:none;
  /* Subtle entrance — synced with .reveal so the marks draw in */
  opacity:0;transition:opacity .9s ease .15s;
}
.reveal.in .anno,.in .anno{opacity:1;}
.anno svg{position:absolute;inset:0;width:100%;height:100%;}
/* Handwritten label */
.anno-hand{
  position:absolute;z-index:4;
  font-family:'Caveat','Patrick Hand','Bradley Hand',cursive;
  color:#2DB200;font-size:clamp(18px,2vw,26px);
  line-height:1.05;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7);
  pointer-events:none;
}
/* Typewritten tag — bold green pill */
.anno-tag{
  position:absolute;z-index:4;
  font-family:ui-monospace,'SF Mono',Consolas,monospace;
  background:#2DB200;color:#06101c;
  padding:5px 9px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;
  pointer-events:none;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.5);
}
/* Slight image desaturation so the green pops */
.split-visual img.anno-photo,
.fr-visual img.anno-photo{
  filter:saturate(.78) brightness(.94);
}
/* On mobile, slightly larger handwritten so it stays legible */
@media (max-width: 720px){
  .anno-hand{font-size:22px;}
}

.fr-text .num-tag{
  font-family:var(--font-display);font-weight:900;
  font-size:.82rem;color:var(--accent);
  letter-spacing:.1em;margin-bottom:15px;
}
.fr-text h3{font-size:1.85rem;margin-bottom:13px;}
.fr-text > p{color:var(--muted);margin-bottom:20px;}
.fr-text .chips{display:flex;flex-wrap:wrap;gap:8px;}
.fr-text .chip{
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  padding:8px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:100px;
  color:var(--muted);
}

/* ---------- CATEGORY FILTER (insights) ---------- */
.cat-filter{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px;
}
.cat-pill{
  font-family:var(--font-display);font-weight:600;font-size:.85rem;
  padding:9px 18px;
  border:1.5px solid var(--line);
  border-radius:100px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;transition:all .22s;
}
.cat-pill:hover{border-color:var(--accent);color:var(--ink);}
.cat-pill.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

/* ---------- BLOG FEATURE (insights hero post) ---------- */
.blog-feature{
  display:grid;grid-template-columns:1.2fr 1fr;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  overflow:hidden;margin-bottom:48px;
}
.blog-feature .bf-img{
  background:var(--bg-dark);min-height:360px;
  position:relative;overflow:hidden;
}
.blog-feature .bf-img .grid-tex{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:44px 44px;
}
.blog-feature .bf-img .bf-glow{
  position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-glow),transparent 65%);
  bottom:-110px;right:-70px;filter:blur(28px);
}
.blog-feature .bf-img img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.blog-feature .bf-body{
  padding:46px 44px;display:flex;flex-direction:column;
  justify-content:center;
}
.blog-feature .bf-body h3{
  font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:13px;
}
.blog-feature .bf-body p{color:var(--muted);margin-bottom:20px;}
.post-meta{
  display:flex;gap:14px;font-size:.82rem;color:var(--muted-light);
  font-family:var(--font-display);font-weight:500;
}

/* ---------- ARTICLE / INSIGHT DETAIL ---------- */
.article-wrap{max-width:760px;margin:0 auto;}
.article-body{font-size:1.04rem;line-height:1.78;color:var(--muted);}
.article-body > p{margin-bottom:22px;}
.article-body .lede{
  font-size:1.2rem;line-height:1.66;color:var(--ink);
  font-weight:400;margin-bottom:30px;
}
.article-body h2{
  font-family:var(--font-display);font-weight:700;
  font-size:1.62rem;color:var(--ink);
  margin:46px 0 16px;line-height:1.3;
}
.article-body h3{
  font-family:var(--font-display);font-weight:600;
  font-size:1.22rem;color:var(--ink);
  margin:32px 0 12px;
}
.article-body ul,.article-body ol{
  margin:0 0 22px;padding-left:24px;
}
.article-body li{margin-bottom:10px;}
.article-body strong{color:var(--ink);font-weight:600;}
.article-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);}
.article-body a:hover{border-bottom-color:var(--accent);}
.article-body blockquote{
  margin:30px 0;padding:18px 26px;
  border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 6px 6px 0;
  font-size:1.1rem;color:var(--ink);font-style:italic;
}
.article-body .pull{
  font-family:var(--font-display);font-weight:600;
  font-size:1.3rem;line-height:1.45;color:var(--ink);
  margin:38px 0;padding:0;
}
.article-takeaway{
  margin:44px 0 8px;padding:28px 30px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-radius);
}
.article-takeaway h4{
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--accent);margin-bottom:14px;
  text-transform:uppercase;letter-spacing:.06em;
}
.article-takeaway ul{margin:0;padding-left:20px;}
.article-takeaway li{margin-bottom:9px;color:var(--muted);font-size:.97rem;}
.article-hero-meta{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:.85rem;color:var(--muted-light);
  font-family:var(--font-display);font-weight:500;margin-top:16px;
}
.article-author{
  display:flex;align-items:center;gap:12px;
  margin:40px 0 6px;padding-top:28px;border-top:1px solid var(--line);
}
.article-author .aa-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;flex-shrink:0;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.article-author .aa-name{
  font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:.95rem;
}
.article-author .aa-role{font-size:.85rem;color:var(--muted-light);}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:880px){
  .related-grid{grid-template-columns:1fr;}
  .article-body{font-size:1rem;}
}

/* ---------- ABOUT: VALUE GRID ---------- */
.value-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.value-card{
  padding:36px 30px;
  background:var(--surface);
  border-radius:var(--card-radius);
  border-left:3px solid var(--accent);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.value-card:hover{transform:translateY(-4px);}
.value-card .v-num{
  font-family:var(--font-display);font-weight:900;
  font-size:.85rem;color:var(--accent);margin-bottom:13px;
}
.value-card h3{font-size:1.25rem;margin-bottom:9px;}
.value-card p{font-size:.92rem;color:var(--muted);}

/* ---------- ABOUT: TEAM GRID ---------- */
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.team-card .t-photo{
  aspect-ratio:1;border-radius:var(--card-radius);
  background:var(--bg-dark);
  border:1px solid var(--line);
  margin-bottom:15px;position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.team-card .t-photo .grid-tex{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:30px 30px;
}
.team-card .t-photo .t-initials{
  font-family:var(--font-display);font-weight:900;
  font-size:2.3rem;color:var(--accent);position:relative;z-index:2;
}
.team-card .t-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;
}
.team-card h4{font-size:1.08rem;margin-bottom:2px;}
.team-card .t-role{font-size:.85rem;color:var(--accent);font-weight:500;}

/* ---------- ABOUT: FOUNDER CARDS ---------- */
.founder-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
}
.founder-card{
  display:flex;gap:24px;padding:32px 30px;
  background:var(--surface);
  border-radius:var(--card-radius);
  border-left:3px solid var(--accent);
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.founder-card:hover{transform:translateY(-4px);border-left-color:var(--hover-green);}
.founder-card .fc-photo{
  flex:0 0 120px;width:120px;height:120px;
  border-radius:50%;background:var(--bg-dark);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  display:grid;place-items:center;
}
.founder-card .fc-photo .grid-tex{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,200,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
}
.founder-card .fc-photo .t-initials{
  font-family:var(--font-display);font-weight:900;
  font-size:1.85rem;color:var(--accent);position:relative;z-index:2;
}
.founder-card .fc-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:2;
}
.founder-card .fc-body{flex:1;min-width:0;}
.founder-card h4{font-size:1.2rem;margin-bottom:3px;}
.founder-card .fc-role{
  font-size:.85rem;color:var(--accent);font-weight:500;
  margin-bottom:13px;
}
.founder-card .fc-bio{
  font-size:.92rem;color:var(--muted);
  line-height:1.6;margin-bottom:15px;
}
.founder-card .fc-edit{color:var(--muted-light);font-style:italic;}
.founder-card .fc-tags{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.founder-card .fc-tags span{
  font-size:.74rem;font-weight:500;letter-spacing:.01em;
  color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;
}
.founder-card .card-link{font-size:.85rem;}

/* ---------- ABOUT: STAT BAND ---------- */
.stat-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--card-radius);overflow:hidden;
}
.stat-band .sb{
  background:var(--surface);padding:42px 30px;text-align:center;
}
.stat-band .sb .n{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.1rem,3.3vw,3rem);color:var(--ink);
}
.stat-band .sb .n .ac{color:var(--accent);}
.stat-band .sb .l{
  font-size:.85rem;color:var(--muted-light);margin-top:6px;
}

/* ---------- CONTACT ---------- */
.contact-split{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:64px;align-items:start;
}
.contact-info .ci-item{
  display:flex;gap:15px;padding:22px 0;
  border-bottom:1px solid var(--line);
}
.contact-info .ci-item .ci-ico{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:var(--accent-soft);
  display:grid;place-items:center;
}
.contact-info .ci-item .ci-ico svg{
  width:20px;height:20px;stroke:var(--accent);
}
.contact-info .ci-item h4{font-size:1rem;margin-bottom:3px;}
.contact-info .ci-item p{font-size:.92rem;color:var(--muted);}
.contact-form{
  background:var(--surface);
  border:1px solid var(--line);
  padding:42px;border-radius:var(--card-radius);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field label{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:.85rem;margin-bottom:8px;color:var(--ink);
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;
  border:1.5px solid var(--line);
  border-radius:7px;
  font-family:var(--font-body);font-size:.95rem;
  background:var(--bg-dark);
  color:var(--ink);
  transition:border-color .22s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-light);}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);
}
.field textarea{resize:vertical;min-height:120px;}
.field select option{background:var(--bg-dark);color:var(--ink);}

/* ---------- INNER-PAGE RESPONSIVE ---------- */
@media(max-width:1080px){
  .detail-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:920px){
  .fr,.fr.flip .fr-text{grid-template-columns:1fr;order:0;}
  .fr{gap:36px;}
  .blog-feature{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .founder-grid{grid-template-columns:1fr;}
  .contact-split{grid-template-columns:1fr;gap:40px;}
  .stat-band{grid-template-columns:repeat(2,1fr);}
  .page-hero{padding:104px 0 56px;}
}
@media(max-width:520px){
  .team-grid,.stat-band{grid-template-columns:1fr;}
  .founder-card{flex-direction:column;gap:16px;}
  .form-row{grid-template-columns:1fr;}
  .contact-form{padding:28px;}
}

/* ============================================================
   HEADER NAV LOGO — animated, plays once per visit
   Static finished logo by default; `.animate` triggers the
   typewriter / flip / underline sequence (added by JS once).
   ============================================================ */
.logo{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.03em;
  font-size:1.5rem;
  line-height:1;
  color:var(--ink);
  position:relative;
  text-decoration:none;
}
.logo .nl-word{display:inline-flex;align-items:baseline;color:var(--ink);}
.logo .nl-ltr{display:inline-block;white-space:pre;}
/* caret — hidden unless animating */
.logo .nl-caret{
  display:inline-block;
  width:.07em;height:.78em;
  background:var(--accent);
  margin-left:.05em;
  align-self:center;
  opacity:0;            /* invisible by default */
}
/* IQ badge */
.logo .nl-badge{
  margin-left:.10em;
  align-self:center;
  position:relative;
  background:#fff;
  color:var(--bg);
  font-weight:900;
  letter-spacing:-.04em;
  padding:.08em .15em .11em;
  border-radius:.22em;
  line-height:1;
  display:inline-block;
}
.logo .nl-badge::after{
  content:"";
  position:absolute;
  right:.15em;bottom:-.11em;
  width:0;height:0;
  border-style:solid;
  border-width:.18em .18em 0 0;
  border-color:#fff transparent transparent transparent;
}
/* blue underline */
.logo .nl-underline{
  display:none;                 /* blue underline removed */
  position:absolute;
  left:0;bottom:-6px;
  height:2.5px;width:100%;
  background:var(--accent);
  border-radius:2px;
  transform:scaleX(1);          /* shown by default */
  transform-origin:left center;
}

/* ---- ANIMATED STATE (only when .animate is present) ---- */
.logo.animate .nl-ltr{
  width:0;
  overflow:hidden;
  animation:nlType .01s steps(1,end) forwards;
}
.logo.animate .nl-ltr:nth-child(1){animation-delay:.25s;}
.logo.animate .nl-ltr:nth-child(2){animation-delay:.40s;}
.logo.animate .nl-ltr:nth-child(3){animation-delay:.55s;}
.logo.animate .nl-ltr:nth-child(4){animation-delay:.70s;}
.logo.animate .nl-ltr:nth-child(5){animation-delay:.85s;}
.logo.animate .nl-ltr:nth-child(6){animation-delay:1.00s;}
.logo.animate .nl-ltr:nth-child(7){animation-delay:1.15s;}
@keyframes nlType{ to{width:var(--w,1ch);} }

.logo.animate .nl-caret{
  animation:nlBlink .5s steps(2,end) infinite,
            nlCaretHide .01s linear 1.45s forwards;
}
@keyframes nlBlink{50%{opacity:0;}}
@keyframes nlCaretHide{to{width:0;margin:0;opacity:0;}}
/* keep caret visible while typing */
.logo.animate .nl-caret{opacity:1;}

.logo.animate .nl-badge{
  transform:rotateY(90deg);
  opacity:0;
  animation:nlFlip .45s ease-out 1.5s forwards;
}
@keyframes nlFlip{ to{transform:rotateY(0deg);opacity:1;} }

.logo.animate .nl-underline{
  transform:scaleX(0);
  animation:nlDraw .7s ease-in-out 2.0s forwards;
}
@keyframes nlDraw{ to{transform:scaleX(1);} }

@media(prefers-reduced-motion:reduce){
  .logo.animate .nl-ltr{width:var(--w,auto);animation:none;}
  .logo.animate .nl-caret{display:none;}
  .logo.animate .nl-badge{transform:none;opacity:1;animation:none;}
  .logo.animate .nl-underline{transform:scaleX(1);animation:none;}
}
/* ============================================================
   CUSTOMER LOGO SLIDER — six logos per slide on a clean white
   panel; slides horizontally to the next group. The logo PNGs
   are the untouched originals (no recolouring) so they stay
   crisp; white panel suits the light-background artwork.
   ============================================================ */
.logo-slider{
  position:relative;
  max-width:1080px;margin:0 auto;
  padding:0 56px;
}
.logo-viewport{
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.55);
}
.logo-rail{
  display:flex;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.logo-slide{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);   /* single row of 5 */
  gap:0 8px;                              /* tight horizontal spacing */
  padding:8px 24px;
}
.logo-slide .lcell{
  display:flex;align-items:center;justify-content:center;
  min-height:62px;
}
.logo-slide .lcell img{
  max-width:100%;max-height:60px;width:auto;height:auto;
  display:block;
  transition:transform .3s var(--ease);
}
.logo-slide .lcell img:hover{transform:scale(1.06);}
/* arrows */
.logo-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;
  transition:all .25s var(--ease);z-index:2;
}
.logo-arrow:hover{border-color:var(--accent);background:var(--surface-2);}
.logo-arrow svg{width:18px;height:18px;stroke:var(--muted);transition:stroke .25s;}
.logo-arrow:hover svg{stroke:var(--accent);}
.logo-arrow.prev{left:0;}
.logo-arrow.next{right:0;}
/* dots */
.logo-dots{
  display:flex;justify-content:center;gap:9px;margin-top:22px;
}
.logo-dots button{
  width:8px;height:8px;border-radius:50%;padding:0;
  background:var(--line);border:none;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.logo-dots button:hover{background:var(--muted-light);}
.logo-dots button.active{background:var(--accent);transform:scale(1.25);}
@media(max-width:900px){
  .logo-slide{grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 18px;}
}
@media(max-width:540px){
  .logo-slide{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .logo-slider{padding:0 42px;}
  .logo-arrow{width:36px;height:36px;}
}



/* ============================================================
   PLATFORM GRAPHIC — home page architecture infographic
   (all selectors scoped under .platform-graphic to avoid collisions)
   ============================================================ */
.platform-graphic{position:relative;margin-top:6px}
.platform-graphic .da-stack{display:flex;flex-direction:column}
.platform-graphic .ico{display:grid;place-items:center;flex:none}
.platform-graphic .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* entrance reveal (staggered via JS animation-delay) */
.platform-graphic .r{opacity:0;transform:translateY(20px)}
.platform-graphic.pg-live .r{animation:pg-rise .6s var(--ease) forwards}
@keyframes pg-rise{to{opacity:1;transform:none}}

/* tiers */
.platform-graphic .da-tier{position:relative;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--surface),rgba(18,21,28,.5) 60%,var(--surface));padding:18px 20px 20px;overflow:hidden}
.platform-graphic .da-tier::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:30px 30px}
.platform-graphic .da-tier-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative;z-index:1}
.platform-graphic .da-tier-head .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent-glow);animation:pg-pulse 2.8s ease-in-out infinite}
@keyframes pg-pulse{0%,100%{opacity:1;box-shadow:0 0 7px var(--accent-glow)}50%{opacity:.45;box-shadow:0 0 16px var(--accent-glow)}}
.platform-graphic .tier-tag{font-family:var(--font-display);font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light)}
.platform-graphic .da-row{position:relative;z-index:1}

/* connectors */
.platform-graphic .da-conn{height:30px;position:relative;display:flex;justify-content:center}
.platform-graphic .da-conn span{width:2px;height:100%;background:linear-gradient(var(--accent),rgba(47,149,255,0));transform:scaleY(0);transform-origin:top}
.platform-graphic.pg-live .da-conn span{animation:pg-draw .5s var(--ease) forwards}
.platform-graphic .da-conn::after{content:"";position:absolute;top:0;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:0}
.platform-graphic.pg-live .da-conn::after{animation:pg-travel 1.1s var(--ease) forwards}
@keyframes pg-draw{to{transform:scaleY(1)}}
@keyframes pg-travel{0%{opacity:0;top:0}20%{opacity:1}100%{opacity:0;top:100%}}

/* applications tier */
.platform-graphic .da-cards{display:grid;grid-template-columns:1.3fr 4fr;gap:12px;align-items:stretch}
.platform-graphic .da-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:11px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.platform-graphic .da-card:hover{transform:translateY(-4px);border-color:rgba(47,149,255,.55);box-shadow:0 14px 34px -16px var(--accent-glow)}
.platform-graphic .da-card .ico{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);padding:7px}
.platform-graphic .da-card .nm{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink)}
.platform-graphic .da-card.lead{background:linear-gradient(150deg,rgba(47,149,255,.14),var(--surface) 60%);border-color:rgba(47,149,255,.4);justify-content:flex-start;gap:14px;padding:13px 16px}
.platform-graphic .da-card.lead .lead-head{display:flex;align-items:center;justify-content:center;gap:11px}
.platform-graphic .da-card.lead .ico{background:var(--accent);color:#fff}
.platform-graphic .da-card.lead .nm{font-size:1rem}
.platform-graphic .da-prodwrap{display:flex;flex-direction:column;gap:9px;background:linear-gradient(150deg,rgba(47,149,255,.10),var(--surface) 72%);border:1px solid rgba(47,149,255,.4);border-radius:12px;padding:13px 11px 12px}
.platform-graphic .da-prodwrap .pw-head{display:flex;align-items:center;justify-content:center;gap:11px}
.platform-graphic .da-prodwrap .pw-head .ico{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;padding:8px;flex:none}
.platform-graphic .da-prodwrap .pw-head .pn{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink)}
.platform-graphic .da-prodwrap .pw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.platform-graphic .da-prodwrap .pw-grid .da-card{flex-direction:row;align-items:center;gap:10px;padding:12px 13px}

/* model tier */
.platform-graphic .da-cards.da-models{grid-template-columns:repeat(4,1fr)}
.platform-graphic .da-chip{background:linear-gradient(150deg,rgba(47,149,255,.12),var(--surface) 72%);border:1px solid rgba(47,149,255,.4);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:11px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.platform-graphic .da-chip:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 26px -14px var(--accent-glow)}
.platform-graphic .da-chip .ico{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;padding:6px;flex:none}
.platform-graphic .da-chip .nm{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink)}
.platform-graphic .da-chip .sb{font-size:.7rem;color:var(--muted-light)}

/* infrastructure tier */
.platform-graphic .da-infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.platform-graphic .da-zone{position:relative;border-radius:12px;padding:13px 14px 14px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.platform-graphic .da-zone.ours{background:linear-gradient(150deg,rgba(47,149,255,.12),var(--surface) 72%);border:1px solid rgba(47,149,255,.4)}
.platform-graphic .da-zone.client{background:linear-gradient(150deg,rgba(45,178,0,.13),var(--surface) 72%);border:1px solid rgba(45,178,0,.4)}
.platform-graphic .da-zone.ours:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px var(--accent-glow)}
.platform-graphic .da-zone.client:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px rgba(45,178,0,.3)}
.platform-graphic .da-zone .zhead{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:13px}
.platform-graphic .da-zone .zhead .ico{width:32px;height:32px;border-radius:8px;color:#fff;padding:7px;flex:none}
.platform-graphic .da-zone.ours .zhead .ico{background:var(--accent)}
.platform-graphic .da-zone.client .zhead .ico{background:var(--hover-green)}
.platform-graphic .da-zone .zname{font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink)}
.platform-graphic .da-zone .ztag{position:absolute;top:14px;right:14px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid}
.platform-graphic .da-zone.ours .ztag{color:var(--accent);border-color:rgba(47,149,255,.45)}
.platform-graphic .da-zone.client .ztag{color:#7fd28c;border-color:rgba(45,178,0,.45)}
.platform-graphic .da-zone .zitems{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.platform-graphic .da-zone .zitem{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px 11px;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.platform-graphic .da-zone.ours .zitem:hover{border-color:rgba(47,149,255,.45);transform:translateY(-2px)}
.platform-graphic .da-zone.client .zitem:hover{border-color:rgba(45,178,0,.45);transform:translateY(-2px)}
.platform-graphic .da-zone .zitem .ico{width:26px;height:26px;flex:none;border-radius:7px;background:var(--surface-2);padding:6px}
.platform-graphic .da-zone.ours .zitem .ico{color:var(--accent)}
.platform-graphic .da-zone.client .zitem .ico{color:#7fd28c}
.platform-graphic .da-zone .zitem .nm{font-size:.78rem;font-weight:500;line-height:1.25;color:var(--ink)}

/* template decks + card stacks */
.platform-graphic .gov-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.platform-graphic .tdeck{background:linear-gradient(150deg,rgba(47,149,255,.12),var(--surface) 72%);border:1px solid rgba(47,149,255,.4);border-radius:11px;padding:13px 15px 16px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.platform-graphic .tdeck:hover{transform:translateY(-3px);box-shadow:0 14px 34px -16px var(--accent-glow)}
.platform-graphic .tdeck .thead{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:15px}
.platform-graphic .tdeck .thead .ico{width:28px;height:28px;border-radius:7px;background:var(--accent);color:#fff;padding:6px;flex:none}
.platform-graphic .tdeck .thead .tt{font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--ink)}
.platform-graphic .stack{position:relative;height:62px}
.platform-graphic .stack .sc{position:absolute;border-radius:8px;height:42px;transition:transform .3s var(--ease)}
.platform-graphic .stack .sc.b2{top:0;left:18px;right:18px;background:var(--surface-2);border:1px solid var(--line)}
.platform-graphic .stack .sc.b1{top:9px;left:9px;right:9px;background:#171b22;border:1px solid var(--line)}
.platform-graphic .stack .sc.top{top:18px;left:0;right:0;background:var(--surface);border:1px solid rgba(47,149,255,.4);display:flex;align-items:center;padding:0 14px}
.platform-graphic .stack .sc.top .tn{font-family:var(--font-display);font-weight:700;font-size:.84rem;color:var(--ink)}
/* gentle "fan" of the card stack on hover */
.platform-graphic .tdeck:hover .stack .sc.b2,
.platform-graphic .da-card.lead:hover .stack .sc.b2{transform:translateY(-7px) scaleX(.96)}
.platform-graphic .tdeck:hover .stack .sc.b1,
.platform-graphic .da-card.lead:hover .stack .sc.b1{transform:translateY(-3px) scaleX(.985)}

@media(prefers-reduced-motion:reduce){
  .platform-graphic .r{opacity:1!important;transform:none!important;animation:none!important}
  .platform-graphic .da-tier-head .dot{animation:none}
  .platform-graphic .da-conn span{transform:scaleY(1)}
}
@media(max-width:820px){
  .platform-graphic .da-cards{grid-template-columns:1fr}
  .platform-graphic .da-prodwrap .pw-grid{grid-template-columns:1fr 1fr}
  .platform-graphic .da-cards.da-models{grid-template-columns:1fr 1fr}
  .platform-graphic .da-infra-grid{grid-template-columns:1fr}
  .platform-graphic .gov-templates{grid-template-columns:1fr}
}

/* platform section — soft coloured backdrop so the graphic doesn't read too dark */
.platform-section{position:relative;overflow:hidden;background:var(--bg-dim)}
.platform-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 55% 58% at 14% 6%, rgba(47,149,255,.18), transparent 62%),
    radial-gradient(ellipse 52% 56% at 88% 96%, rgba(45,178,0,.11), transparent 62%),
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(47,149,255,.05), transparent 70%);}
.platform-section .wrap{position:relative;z-index:1}
/* lift the tier surfaces slightly and let a hint of colour through */
.platform-section .da-tier{background:linear-gradient(180deg,rgba(22,26,34,.92),rgba(18,23,32,.78) 55%,rgba(22,26,34,.92))}

/* ===== BOLDER / louder platform graphic ===== */
.platform-section{background:radial-gradient(ellipse 130% 100% at 50% -15%, #11202f 0%, var(--bg-dark) 68%)}
.platform-section::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(ellipse 46% 52% at 12% 2%, rgba(47,149,255,.34), transparent 60%),
   radial-gradient(ellipse 46% 52% at 90% 98%, rgba(45,178,0,.20), transparent 60%),
   radial-gradient(ellipse 85% 60% at 50% 50%, rgba(47,149,255,.10), transparent 72%);}

.platform-section .platform-graphic .da-tier{
  background:linear-gradient(180deg,rgba(26,34,49,.97),rgba(17,23,33,.93));
  border:1px solid rgba(47,149,255,.30);
  box-shadow:0 20px 55px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05)}
.platform-section .platform-graphic .da-tier::before{opacity:.8}
.platform-section .platform-graphic .da-tier-head .dot{width:9px;height:9px;box-shadow:0 0 16px var(--accent)}
.platform-section .platform-graphic .tier-tag{color:#d4e4f7;font-size:.7rem;letter-spacing:.18em}

.platform-section .platform-graphic .da-card.lead,
.platform-section .platform-graphic .da-prodwrap,
.platform-section .platform-graphic .tdeck,
.platform-section .platform-graphic .da-chip,
.platform-section .platform-graphic .da-zone.ours{
  background:linear-gradient(150deg,rgba(47,149,255,.28),rgba(19,26,37,.97) 80%);
  border-color:rgba(47,149,255,.62);
  box-shadow:0 12px 30px -18px var(--accent-glow), inset 0 0 0 1px rgba(47,149,255,.06)}
.platform-section .platform-graphic .da-zone.client{
  background:linear-gradient(150deg,rgba(45,178,0,.26),rgba(19,26,37,.97) 80%);
  border-color:rgba(45,178,0,.62);
  box-shadow:0 12px 30px -18px rgba(45,178,0,.45)}

.platform-section .platform-graphic .da-card,
.platform-section .platform-graphic .stack .sc.top,
.platform-section .platform-graphic .da-zone .zitem{background:#0f141c;border-color:rgba(125,165,210,.26)}
.platform-section .platform-graphic .da-card .nm,
.platform-section .platform-graphic .stack .sc.top .tn,
.platform-section .platform-graphic .da-zone .zitem .nm{color:#fff}
.platform-section .platform-graphic .da-card .ico{background:rgba(47,149,255,.26);color:#86bdff}
.platform-section .platform-graphic .stack .sc.b1{background:#1b2330}
.platform-section .platform-graphic .stack .sc.b2{background:#222c3b}

.platform-section .platform-graphic .da-conn span{width:3px;background:linear-gradient(var(--accent),rgba(47,149,255,.12))}
.platform-section .platform-graphic .da-conn::after{width:9px;height:9px;box-shadow:0 0 18px var(--accent)}

/* ===== flow simulation overlay ===== */
.platform-graphic .da-tier::before{border-radius:14px}
.platform-graphic.flow-on .da-tier{overflow:visible}
.platform-graphic .flow-layer{position:absolute;inset:0;pointer-events:none;z-index:6}
.platform-graphic .flow-packet{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,#fff 12%,var(--accent) 66%);
  box-shadow:0 0 22px 7px rgba(47,149,255,.8);transform:translate(-50%,-50%);opacity:0;
  transition:left .9s var(--ease),top .9s var(--ease),opacity .3s}
.platform-graphic .flow-packet.show{opacity:1}
.platform-graphic .flow-cap{position:absolute;left:0;top:0;max-width:280px;width:max-content;
  background:rgba(9,13,20,.97);border:1px solid rgba(47,149,255,.55);border-radius:11px;
  padding:11px 14px;font-size:.82rem;line-height:1.45;color:#eaf2fb;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.85);transform:translate(-50%,0);opacity:0;
  transition:opacity .3s,left .5s var(--ease),top .5s var(--ease)}
.platform-graphic .flow-cap.show{opacity:1}
.platform-graphic .flow-cap .st{display:block;font-family:var(--font-display);font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.platform-graphic .flow-cap b{color:#9fc8ff;font-weight:700}
.platform-graphic .flow-cap::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:7px solid transparent}
.platform-graphic .flow-cap:not(.below)::after{bottom:-13px;border-top-color:rgba(47,149,255,.55)}
.platform-graphic .flow-cap.below::after{top:-13px;border-bottom-color:rgba(47,149,255,.55)}

/* active card flips to WHITE so it really pops */
.platform-graphic .flow-active{position:relative;z-index:5;background:#fff!important;border-color:#eaf2fb!important;
  outline:2px solid var(--accent);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(47,149,255,.18),0 0 44px 9px rgba(47,149,255,.6)!important;
  transform:translateY(-2px) scale(1.06)!important;
  transition:transform .35s var(--ease),box-shadow .35s,background .25s,border-color .25s}
.platform-graphic .flow-active .nm,
.platform-graphic .flow-active .tn,
.platform-graphic .flow-active .sb{color:#0b1320!important}
.platform-graphic .flow-active .ico{background:var(--accent)!important;color:#fff!important}

/* flow trigger links (extensible — add more flows later) */
.platform-section .flow-links{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center}
.platform-section .flow-link{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.9rem;color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--accent),#1f6fd0);border:1px solid rgba(47,149,255,.65);
  border-radius:999px;padding:11px 22px;box-shadow:0 10px 26px -12px var(--accent-glow);
  transition:transform .2s,box-shadow .2s,opacity .2s,filter .2s}
.platform-section .flow-link:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px var(--accent-glow);filter:brightness(1.07)}
.platform-section .flow-link:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none;filter:none}
@media(prefers-reduced-motion:reduce){.platform-graphic .flow-packet{transition:opacity .3s}}

/* second flow variant — green (Client Onboarding) */
.platform-section .flow-link--green{background:linear-gradient(135deg,#2DB200,#1f8a00);border-color:rgba(45,178,0,.65);box-shadow:0 10px 26px -12px rgba(45,178,0,.5)}
.platform-section .flow-link--green:hover{box-shadow:0 14px 32px -12px rgba(45,178,0,.55)}
.platform-graphic.flow-green .flow-packet{background:radial-gradient(circle,#fff 12%,#2DB200 66%);box-shadow:0 0 22px 7px rgba(45,178,0,.8)}
.platform-graphic.flow-green .flow-active{outline-color:#2DB200;box-shadow:0 0 0 4px rgba(45,178,0,.18),0 0 44px 9px rgba(45,178,0,.6)!important}
.platform-graphic.flow-green .flow-active .ico{background:#2DB200!important}
.platform-graphic.flow-green .flow-cap{border-color:rgba(45,178,0,.6)}
.platform-graphic.flow-green .flow-cap .st{color:#46c91f}
.platform-graphic.flow-green .flow-cap b{color:#9be08a}
.platform-graphic.flow-green .flow-cap:not(.below)::after{border-top-color:rgba(45,178,0,.6)}
.platform-graphic.flow-green .flow-cap.below::after{border-bottom-color:rgba(45,178,0,.6)}