/* ════════════════════════════════════════════════════════════════
   NexLink Systems — Round 3 · "Aurora × Warm" unified theme
   Layout A (Centered / Stacked) · Dark default + Light toggle
   One shared stylesheet for index / ai-development / web-design
═══════════════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------------
   THEME TOKENS — a single [data-theme] swap flips the whole site
-----------------------------------------------------------------*/
:root {
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --container: 1180px;
  --container-narrow: 760px;
}

/* DARK — AURORA (default) */
[data-theme="dark"] {
  --bg:#06060b;
  --surface:#0e0e16;
  --elevated:#15151f;
  --text:#eef1f6;
  --muted:#9aa3b2;
  --accent:#2563eb;
  --accent-2:#7c3aed;
  --accent-3:#06b6d4;
  --accent-grad:linear-gradient(120deg,#7c3aed,#2563eb,#06b6d4);
  --accent-soft:rgba(124,58,237,0.14);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --card-bg:rgba(255,255,255,0.04);
  --card-blur:saturate(1.2) blur(16px);
  --radius:14px;
  --radius-lg:22px;
  --btn-radius:12px;
  --shadow:0 18px 50px rgba(0,0,0,0.45);
  --glow:0 0 40px rgba(37,99,235,0.35);
  --header-bg:rgba(8,8,14,0.72);
  --chip-bg:rgba(255,255,255,0.05);
  --on-accent:#ffffff;
  --table-stripe:rgba(255,255,255,0.02);
  --check:#06b6d4;
  --cross:#7a8294;
}

/* LIGHT — WARM */
[data-theme="light"] {
  --bg:#fdf8f3;
  --surface:#fff1e8;
  --elevated:#ffffff;
  --text:#1e1b18;
  --muted:#6f6760;
  --accent:#f97362;
  --accent-2:#f5a462;
  --accent-3:#6366f1;
  --accent-grad:linear-gradient(120deg,#f97362,#f5a462);
  --accent-soft:rgba(249,115,98,0.12);
  --border:rgba(30,27,24,0.10);
  --border-strong:rgba(30,27,24,0.16);
  --card-bg:#ffffff;
  --card-blur:none;
  --radius:22px;
  --radius-lg:30px;
  --btn-radius:999px;
  --shadow:0 18px 50px rgba(249,115,98,0.16);
  --glow:0 10px 30px rgba(249,115,98,0.18);
  --header-bg:rgba(253,248,243,0.82);
  --chip-bg:rgba(249,115,98,0.08);
  --on-accent:#ffffff;
  --table-stripe:rgba(249,115,98,0.04);
  --check:#1f9d6b;
  --cross:#b9a89c;
}

/* ----------------------------------------------------------------
   RESET / BASE
-----------------------------------------------------------------*/
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }

::selection { background:var(--accent-2); color:#fff; }

.container {
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:1.5rem;
}
.container--narrow { max-width:var(--container-narrow); }

.section { padding:6rem 0; position:relative; }
@media (max-width:768px){ .section{ padding:4rem 0; } }

.divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--border-strong),transparent);
  max-width:var(--container);
  margin-inline:auto;
}

/* ----------------------------------------------------------------
   TYPOGRAPHY
-----------------------------------------------------------------*/
.display-xl, .display-lg, .display-md, h1, h2, h3, h4 {
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--text);
}
.display-xl { font-size:clamp(2.6rem,6vw,4.6rem); font-weight:800; letter-spacing:-0.035em; }
.display-lg { font-size:clamp(2rem,4vw,3.1rem); font-weight:700; }
.display-md { font-size:clamp(1.6rem,3vw,2.3rem); }

.grad-text {
  background:var(--accent-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.eyebrow {
  display:inline-block;
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#60a5fa;   /* light blue — more readable on dark than the violet --accent-2 */
  padding:.4rem .85rem;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:var(--chip-bg);
  margin-bottom:1.1rem;
}
[data-theme="light"] .eyebrow { color:var(--accent); }

.section-header { text-align:center; max-width:680px; margin:0 auto 3rem; }
.section-header .eyebrow { margin-bottom:1.1rem; }
.section-header h2 { margin-bottom:1rem; }
.section-header p { color:var(--muted); font-size:1.05rem; }

/* ----------------------------------------------------------------
   BUTTONS  (shape flips via --btn-radius)
-----------------------------------------------------------------*/
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  padding:.85rem 1.5rem;
  border-radius:var(--btn-radius);
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn svg { flex:0 0 auto; }
.btn--primary {
  background:var(--accent-grad);
  color:var(--on-accent);
  box-shadow:var(--glow);
}
.btn--primary:hover { transform:translateY(-2px); box-shadow:var(--glow), var(--shadow); }
.btn--ghost {
  background:transparent;
  color:var(--text);
  border-color:var(--border-strong);
}
.btn--ghost:hover { background:var(--chip-bg); border-color:var(--accent); transform:translateY(-2px); }

.btn-row { display:flex; gap:1rem; flex-wrap:wrap; }
.hero .btn-row, .cta-banner .btn-row, .page-hero .btn-row { justify-content:center; }

/* ----------------------------------------------------------------
   HEADER / NAV
-----------------------------------------------------------------*/
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:var(--header-bg);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .4s ease, border-color .4s ease;
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  height:72px;
}
.nav-logo { display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.nav-logo img { width:34px; height:34px; object-fit:contain; }
.nav-logo-text { font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-0.02em; }

.nav-links { display:flex; align-items:center; gap:.35rem; margin-left:auto; }
.nav-links a {
  font-family:var(--font-display);
  font-weight:500;
  font-size:.94rem;
  color:var(--muted);
  padding:.5rem .8rem;
  border-radius:999px;
  transition:color .2s, background .2s;
}
.nav-links a:hover { color:var(--text); background:var(--chip-bg); }
.nav-links a.active { color:var(--text); }
.nav-links a.active::after {
  content:""; display:block; height:2px; margin-top:3px;
  border-radius:2px; background:var(--accent-grad);
}

.nav-actions { display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }

.nav-cta {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  padding:.6rem 1.1rem;
  border-radius:var(--btn-radius);
  background:var(--accent-grad);
  color:var(--on-accent);
  box-shadow:var(--glow);
  transition:transform .25s ease, box-shadow .3s ease;
}
.nav-cta:hover { transform:translateY(-2px); }

/* THEME TOGGLE */
.theme-toggle {
  position:relative;
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--chip-bg);
  color:var(--text);
  transition:background .25s, border-color .25s, transform .25s, color .4s;
}
.theme-toggle:hover { border-color:var(--accent); transform:translateY(-1px); }
.theme-toggle svg { width:20px; height:20px; position:absolute; transition:opacity .35s ease, transform .45s ease; }
.theme-toggle .icon-sun  { opacity:0; transform:rotate(-90deg) scale(.5); }
.theme-toggle .icon-moon { opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .icon-sun  { opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .icon-moon { opacity:0; transform:rotate(90deg) scale(.5); }

/* Hamburger */
.nav-toggle {
  display:none;
  width:42px; height:42px;
  border:1px solid var(--border-strong);
  border-radius:50%;
  background:var(--chip-bg);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span { display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position:fixed;
  inset:72px 0 auto 0;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:.25rem;
  padding:1rem 1.5rem 1.75rem;
  transform:translateY(-12px);
  opacity:0; pointer-events:none;
  transition:transform .3s ease, opacity .3s ease;
  z-index:99;
}
.nav-drawer.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-drawer a {
  font-family:var(--font-display); font-weight:500; font-size:1.05rem;
  color:var(--text); padding:.85rem .5rem;
  border-bottom:1px solid var(--border);
}
.nav-drawer a.nav-cta {
  margin-top:1rem; justify-content:center; color:var(--on-accent); border-bottom:none;
}

@media (max-width:920px){
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  /* CTA lives in the drawer on mobile; keep logo + toggle + hamburger only */
  .nav-actions > .nav-cta { display:none; }
}
@media (max-width:380px){
  .nav-logo-text { font-size:1rem; }
  .nav-logo img { width:30px; height:30px; }
}

/* ----------------------------------------------------------------
   DECORATION LAYERS — orbs (dark) / blobs (light)
-----------------------------------------------------------------*/
.deco-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }

/* DARK: drifting blurred gradient orbs */
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; }
.orb--violet { width:480px; height:480px; background:radial-gradient(circle,#7c3aed,transparent 70%); top:-160px; left:-80px; animation:drift1 18s ease-in-out infinite; }
.orb--blue   { width:420px; height:420px; background:radial-gradient(circle,#2563eb,transparent 70%); top:40px;  right:-120px; animation:drift2 22s ease-in-out infinite; }
.orb--cyan   { width:360px; height:360px; background:radial-gradient(circle,#06b6d4,transparent 70%); bottom:-140px; left:38%; animation:drift3 20s ease-in-out infinite; }

/* LIGHT: soft coral / lavender blobs */
.blob { position:absolute; filter:blur(60px); opacity:.55; border-radius:50%; }
.blob--coral    { width:460px; height:460px; background:radial-gradient(circle,#f97362,transparent 68%); top:-150px; left:-60px; animation:drift1 20s ease-in-out infinite; }
.blob--peach    { width:400px; height:400px; background:radial-gradient(circle,#f5a462,transparent 68%); top:60px; right:-100px; animation:drift2 24s ease-in-out infinite; }
.blob--lavender { width:340px; height:340px; background:radial-gradient(circle,#6366f1,transparent 70%); bottom:-130px; left:40%; opacity:.32; animation:drift3 22s ease-in-out infinite; }

/* show only the right deco set per theme */
[data-theme="dark"]  .blob { display:none; }
[data-theme="light"] .orb  { display:none; }

@keyframes drift1 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(40px,30px) scale(1.08);} }
@keyframes drift2 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-35px,25px) scale(1.05);} }
@keyframes drift3 { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(25px,-30px) scale(1.1);} }

@media (prefers-reduced-motion:reduce){
  .orb,.blob{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ----------------------------------------------------------------
   GLASS / CARD primitive
-----------------------------------------------------------------*/
.glass-card, .card {
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur);
  backdrop-filter:var(--card-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:background .4s, border-color .3s, transform .3s, box-shadow .3s;
}

/* ----------------------------------------------------------------
   HERO (homepage centered/stacked)
-----------------------------------------------------------------*/
.hero { position:relative; padding:7rem 0 5rem; text-align:center; overflow:hidden; }
.page-hero { position:relative; padding:6rem 0 4rem; text-align:center; overflow:hidden; }
.hero-inner, .page-hero-inner { position:relative; z-index:2; max-width:880px; margin-inline:auto; }

.hero .display-xl { margin-bottom:1.4rem; }
.hero-sub, .lead {
  color:var(--muted);
  font-size:1.18rem;
  max-width:660px;
  margin:0 auto 2rem;
  line-height:1.65;
}
.page-hero .lead { margin-bottom:1.75rem; }

.hero-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:3rem;
  max-width:760px;
  margin-inline:auto;
}
.hero-stat {
  padding:1.1rem .75rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur);
  backdrop-filter:var(--card-blur);
}
.hero-stat-val { display:block; font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.1; }
.hero-stat-label { display:block; font-size:.8rem; color:var(--muted); margin-top:.3rem; }
@media (max-width:620px){ .hero-stats{ grid-template-columns:repeat(2,1fr);} }

/* proof points (sub pages) */
.proof-points { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-bottom:2rem; }
.proof-point {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:500; font-size:.9rem;
  color:var(--text);
  padding:.55rem 1rem;
  border-radius:999px;
  border:1px solid var(--border-strong);
  background:var(--chip-bg);
}
.proof-point svg { width:17px; height:17px; color:var(--accent-3); }
[data-theme="light"] .proof-point svg { color:var(--accent); }

/* ----------------------------------------------------------------
   CO-LEAD SPOTLIGHTS (3 equal cards)
-----------------------------------------------------------------*/
.coleads-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .coleads-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

.colead-card {
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur);
  backdrop-filter:var(--card-blur);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:2rem 1.75rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:transform .3s, border-color .3s, box-shadow .3s, background .4s;
}
.colead-card:hover { transform:translateY(-5px); border-color:var(--accent); }

.colead-icon {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--border-strong);
}
[data-theme="light"] .colead-icon { border-radius:18px; }
.colead-icon svg { width:28px; height:28px; }

.colead-card h3 { font-size:1.32rem; }
.value-line { color:var(--muted); font-size:.97rem; line-height:1.6; }
.colead-bullets { display:flex; flex-direction:column; gap:.6rem; }
.colead-bullets li {
  position:relative; padding-left:1.5rem; font-size:.92rem; color:var(--text);
}
.colead-bullets li::before {
  content:""; position:absolute; left:0; top:.45rem;
  width:9px; height:9px; border-radius:3px; background:var(--accent-grad);
}
.colead-link {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.94rem;
  color:var(--accent); margin-top:auto;
  transition:gap .25s, color .25s;
}
[data-theme="light"] .colead-link { color:var(--accent); }
[data-theme="dark"]  .colead-link { color:var(--accent-3); }
.colead-link svg { width:18px; height:18px; transition:transform .25s; }
.colead-link:hover { gap:.8rem; }
.colead-link:hover svg { transform:translateX(3px); }

/* badges */
.badge {
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem .65rem; border-radius:999px;
  border:1px solid var(--border-strong);
}
.badge-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.badge--cyan   { color:var(--accent-3); background:rgba(6,182,212,.1); }
.badge--blue   { color:var(--accent); background:var(--accent-soft); }
.badge--violet { color:var(--accent-2); background:rgba(124,58,237,.12); }
[data-theme="light"] .badge--cyan   { color:#0e7490; background:rgba(99,102,241,.1); }
[data-theme="light"] .badge--blue   { color:var(--accent); background:rgba(249,115,98,.1); }
[data-theme="light"] .badge--violet { color:var(--accent-3); background:rgba(99,102,241,.1); }

/* ----------------------------------------------------------------
   HOW WE DELIVER — horizontal 5-step timeline
-----------------------------------------------------------------*/
.timeline-track {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
  position:relative;
  margin-top:1rem;
}
.timeline-track::before {
  content:""; position:absolute; top:28px; left:10%; right:10%;
  height:2px; background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3));
  opacity:.4; z-index:0;
}
.timeline-step { text-align:center; position:relative; z-index:1; padding:0 .25rem; }
.timeline-node {
  width:56px; height:56px; margin:0 auto .9rem;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:var(--elevated);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
}
.timeline-num {
  position:absolute; top:-8px; right:-6px;
  font-family:var(--font-display); font-weight:700; font-size:.7rem;
  background:var(--accent-grad); color:var(--on-accent);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.timeline-icon { width:24px; height:24px; color:var(--accent-3); }
[data-theme="light"] .timeline-icon { color:var(--accent); }
.timeline-step h4 { font-size:1.02rem; margin-bottom:.4rem; }
.timeline-step p { font-size:.86rem; color:var(--muted); line-height:1.5; }

@media (max-width:880px){
  .timeline-track { grid-template-columns:1fr; gap:1.5rem; max-width:440px; margin-inline:auto; }
  .timeline-track::before { display:none; }
  .timeline-step { display:grid; grid-template-columns:56px 1fr; gap:.25rem 1rem; text-align:left; align-items:start; }
  .timeline-node { margin:0; grid-row:span 2; }
  .timeline-step h4 { align-self:center; }
}

/* ----------------------------------------------------------------
   SOLUTION AREAS grid
-----------------------------------------------------------------*/
.solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.solutions-row-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; max-width:760px; margin:1.25rem auto 0; }
@media (max-width:900px){
  .solutions-grid { grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .solutions-row-2 { grid-template-columns:1fr; max-width:480px; }
}

.sol-card {
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur);
  backdrop-filter:var(--card-blur);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.75rem 1.6rem;
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .3s, border-color .3s, background .4s;
}
.sol-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.sol-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.sol-card h3 { font-size:1.18rem; }
.sol-card p { color:var(--muted); font-size:.93rem; line-height:1.6; }

.sol-icon {
  width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-strong);
  flex:0 0 auto;
}
[data-theme="light"] .sol-icon { border-radius:16px; }
.sol-icon svg { width:25px; height:25px; }
.sol-icon--violet { color:#a78bfa; }
.sol-icon--blue   { color:#60a5fa; }
.sol-icon--cyan   { color:#22d3ee; }
.sol-icon--indigo { color:#818cf8; }
.sol-icon--teal   { color:#2dd4bf; }
[data-theme="light"] .sol-icon--violet { color:#6366f1; }
[data-theme="light"] .sol-icon--blue   { color:#f97362; }
[data-theme="light"] .sol-icon--cyan   { color:#0e9488; }
[data-theme="light"] .sol-icon--indigo { color:#7c6df1; }
[data-theme="light"] .sol-icon--teal   { color:#0d9488; }

.sol-link {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  color:var(--accent); margin-top:.4rem;
  transition:gap .25s;
}
[data-theme="dark"] .sol-link { color:var(--accent-3); }
.sol-link svg { width:17px; height:17px; transition:transform .25s; }
.sol-link:hover { gap:.7rem; }
.sol-link:hover svg { transform:translateX(3px); }

/* ----------------------------------------------------------------
   WHY NEXLINK
-----------------------------------------------------------------*/
.why-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .why-grid{ grid-template-columns:1fr; gap:2rem; } }
.why-text h2 { margin:1rem 0 1.25rem; }
.why-text p { color:var(--muted); margin-bottom:1rem; line-height:1.7; }
.why-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.chip {
  font-family:var(--font-display); font-weight:500; font-size:.85rem;
  padding:.5rem .9rem; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--chip-bg); color:var(--text);
}
.why-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.75rem; }
.why-stat-card {
  background:var(--card-bg);
  -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.6rem 1.25rem; text-align:center;
}
.why-stat-val { display:block; font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.why-stat-label { display:block; font-size:.82rem; color:var(--muted); margin-top:.5rem; }

/* ----------------------------------------------------------------
   CTA BANNER
-----------------------------------------------------------------*/
.cta-banner { position:relative; padding:5.5rem 0; text-align:center; overflow:hidden; }
.cta-banner-bg { position:absolute; inset:0; z-index:0; }
[data-theme="dark"] .cta-banner-bg {
  background:radial-gradient(ellipse at center,rgba(124,58,237,.22),transparent 65%),
             radial-gradient(ellipse at 80% 50%,rgba(6,182,212,.16),transparent 60%);
}
[data-theme="light"] .cta-banner-bg {
  background:radial-gradient(ellipse at center,rgba(249,115,98,.16),transparent 65%),
             radial-gradient(ellipse at 75% 50%,rgba(245,164,98,.18),transparent 60%);
}
.cta-banner-inner { position:relative; z-index:1; max-width:720px; margin-inline:auto; }
.cta-banner h2 { margin-bottom:1rem; }
.cta-banner p { color:var(--muted); font-size:1.08rem; margin-bottom:2rem; }

/* ----------------------------------------------------------------
   CONTACT
-----------------------------------------------------------------*/
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:2rem; } }
.contact-info > p { color:var(--muted); margin-bottom:2rem; line-height:1.7; }
.contact-items { display:flex; flex-direction:column; gap:1.4rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; }
.contact-item-icon {
  width:46px; height:46px; flex:0 0 auto; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-strong);
  color:var(--accent-3);
}
[data-theme="light"] .contact-item-icon { color:var(--accent); border-radius:16px; }
.contact-item-icon svg { width:22px; height:22px; }
.contact-item-label { font-family:var(--font-display); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.2rem; }
.contact-item-val { font-size:1rem; color:var(--text); line-height:1.5; }
.contact-item-val a { color:var(--text); transition:color .2s; }
.contact-item-val a:hover { color:var(--accent); }
.contact-map {
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
  height:100%; min-height:420px;
}
.contact-map iframe { width:100%; height:100%; min-height:420px; border:0; display:block; }

/* ----------------------------------------------------------------
   FOOTER
-----------------------------------------------------------------*/
.site-footer { background:var(--surface); border-top:1px solid var(--border); padding:4rem 0 2rem; transition:background .4s, border-color .4s; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:2.5rem; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p { color:var(--muted); font-size:.92rem; line-height:1.65; margin-top:1rem; max-width:320px; }
.footer-col h4 { font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.6rem; }
.footer-col a { color:var(--text); font-size:.93rem; transition:color .2s; }
.footer-col a:hover { color:var(--accent); }
.footer-col .contact-val { color:var(--muted); font-size:.92rem; line-height:1.7; }
.footer-col .contact-val a { color:var(--muted); }
.footer-col .contact-val a:hover { color:var(--accent); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--border);
}
.footer-copy { color:var(--muted); font-size:.88rem; }
.footer-bottom-links { display:flex; gap:1.5rem; }
.footer-bottom-links a { color:var(--muted); font-size:.88rem; transition:color .2s; }
.footer-bottom-links a:hover { color:var(--accent); }

/* ════════════════════════════════════════════════════════════════
   SUB-PAGE COMPONENTS
═══════════════════════════════════════════════════════════════════ */

/* Outcomes / use-case / control grids */
.outcomes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:1000px){ .outcomes-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .outcomes-grid{ grid-template-columns:1fr; } }
.outcome-card {
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.75rem;
  transition:transform .3s, border-color .3s, background .4s;
}
.outcome-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.outcome-card h3 { font-size:1.1rem; }
.outcome-card p { color:var(--muted); font-size:.9rem; line-height:1.6; }

.usecase-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:900px){ .usecase-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
.usecase-card {
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem;
  transition:transform .3s, border-color .3s, background .4s;
}
.usecase-card:hover { transform:translateY(-5px); border-color:var(--accent); }
.usecase-card h3 { font-size:1.22rem; }
.usecase-card p { color:var(--muted); font-size:.94rem; line-height:1.65; }

/* Roadmap (4-step) */
.roadmap-track { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; position:relative; }
.roadmap-track::before {
  content:""; position:absolute; top:28px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--accent-3)); opacity:.4; z-index:0;
}
.roadmap-step { text-align:center; position:relative; z-index:1; }
.roadmap-node {
  width:56px; height:56px; margin:0 auto .9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:var(--elevated); border:1px solid var(--border-strong); box-shadow:var(--shadow);
}
.roadmap-num {
  position:absolute; top:-8px; right:-6px; font-family:var(--font-display); font-weight:700; font-size:.7rem;
  background:var(--accent-grad); color:var(--on-accent);
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.roadmap-node svg { color:var(--accent-3); }
[data-theme="light"] .roadmap-node svg { color:var(--accent); }
.roadmap-step h4 { font-size:1.05rem; margin-bottom:.4rem; }
.roadmap-step p { font-size:.87rem; color:var(--muted); line-height:1.55; }
@media (max-width:880px){
  .roadmap-track { grid-template-columns:1fr; gap:1.5rem; max-width:440px; margin-inline:auto; }
  .roadmap-track::before { display:none; }
  .roadmap-step { display:grid; grid-template-columns:56px 1fr; gap:.25rem 1rem; text-align:left; align-items:start; }
  .roadmap-node { margin:0; grid-row:span 2; }
  .roadmap-step h4 { align-self:center; }
}

/* Business controls (2x2) */
.controls-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
@media (max-width:760px){ .controls-grid{ grid-template-columns:1fr; } }
.control-card {
  display:flex; gap:1.1rem; align-items:flex-start;
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.6rem 1.5rem; transition:transform .3s, border-color .3s, background .4s;
}
.control-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.control-icon {
  width:46px; height:46px; flex:0 0 auto; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-strong); color:var(--accent-2);
}
[data-theme="light"] .control-icon { color:var(--accent); border-radius:16px; }
.control-icon svg { width:23px; height:23px; }
.control-card h4 { font-size:1.08rem; margin-bottom:.4rem; }
.control-card p { color:var(--muted); font-size:.9rem; line-height:1.6; }

/* Engagement tiers */
.tiers-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
@media (max-width:900px){ .tiers-grid{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }
.tier-card {
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem; position:relative;
  transition:transform .3s, border-color .3s, background .4s;
}
.tier-card:hover { transform:translateY(-5px); border-color:var(--accent); }
.tier-card--featured { border-color:var(--accent); box-shadow:var(--glow), var(--shadow); }
.tier-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-grad); color:var(--on-accent);
  padding:.35rem 1rem; border-radius:999px; box-shadow:var(--glow);
}
.tier-name { font-family:var(--font-display); font-weight:700; font-size:1.3rem; }
.tier-desc { color:var(--muted); font-size:.93rem; line-height:1.6; }
.tier-features { display:flex; flex-direction:column; gap:.6rem; margin-top:.25rem; }
.tier-features li { position:relative; padding-left:1.6rem; font-size:.9rem; color:var(--text); }
.tier-features li::before {
  content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--accent-3);
}
[data-theme="light"] .tier-features li::before { color:var(--check); }

/* ────────── WEB DESIGN page ────────── */
.problem-cols { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .problem-cols{ grid-template-columns:1fr; gap:2rem; } }
.problem-visual {
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem;
}
.problem-visual .label-up {
  font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.problem-visual .label-up.accent { color:var(--accent-3); }
[data-theme="light"] .problem-visual .label-up.accent { color:var(--accent); }
.problem-stat-row {
  display:flex; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--border);
}
.problem-stat-row .val { font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--text); flex:0 0 auto; min-width:72px; }
.problem-stat-row .desc { font-size:.88rem; color:var(--muted); line-height:1.45; }
.problem-visual .inner-divider { height:1px; background:var(--border); }

.approach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2rem; }
@media (max-width:760px){ .approach-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.approach-grid .sol-card { text-align:center; align-items:center; }
.approach-grid .sol-card .sol-icon { margin-inline:auto; }
.approach-grid .sol-card h3 { font-size:1.05rem; }

/* 24-HOUR PROCESS — connected timeline (alternating spine) */
.process-timeline { position:relative; max-width:980px; margin:0 auto; }
.process-timeline::before {
  content:""; position:absolute; top:.5rem; bottom:.5rem; left:50%; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--accent-2), var(--accent), var(--accent-3)); border-radius:2px;
}
.process-step { position:relative; width:50%; padding:0 2.6rem; margin-bottom:1.6rem; }
.process-step:last-child { margin-bottom:0; }
.process-step:nth-child(odd) { left:0; }
.process-step:nth-child(even) { left:50%; }
.process-node {
  position:absolute; top:1.5rem; width:42px; height:42px; border-radius:50%; z-index:3;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  border:3px solid var(--bg); box-shadow:0 0 0 1px var(--border-strong);
}
.process-step:nth-child(odd) .process-node { right:-21px; }
.process-step:nth-child(even) .process-node { left:-21px; }
.process-card {
  display:flex; gap:1.1rem; align-items:flex-start;
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.25rem 1.35rem; transition:transform .3s, border-color .3s;
}
.process-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.process-text { min-width:0; }
.process-card h4 { font-size:1.05rem; margin-bottom:.4rem; }
.process-card p { color:var(--muted); font-size:.88rem; line-height:1.6; }

/* per-stage image tile (gradient stand-in for custom imagery) */
.stage-thumb {
  position:relative; flex:0 0 60px; width:60px; height:60px; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; isolation:isolate;
  background:linear-gradient(135deg, var(--c1), var(--c2));
}
.stage-thumb::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 18% 12%, rgba(255,255,255,.30), transparent 55%); }
.stage-thumb svg { position:relative; z-index:2; width:28px; height:28px; color:#fff; }
.stage-thumb--1 { --c1:#7c3aed; --c2:#2563eb; }
.stage-thumb--2 { --c1:#2563eb; --c2:#06b6d4; }
.stage-thumb--3 { --c1:#06b6d4; --c2:#3b82f6; }
.stage-thumb--4 { --c1:#6d28d9; --c2:#2563eb; }
.stage-thumb--5 { --c1:#2563eb; --c2:#0891b2; }
.stage-thumb--6 { --c1:#0ea5e9; --c2:#7c3aed; }
[data-theme="light"] .stage-thumb--1 { --c1:#f97362; --c2:#f5a462; }
[data-theme="light"] .stage-thumb--2 { --c1:#f5a462; --c2:#fb7185; }
[data-theme="light"] .stage-thumb--3 { --c1:#fb7185; --c2:#f97362; }
[data-theme="light"] .stage-thumb--4 { --c1:#f97362; --c2:#fda4af; }
[data-theme="light"] .stage-thumb--5 { --c1:#f5a462; --c2:#f97362; }
[data-theme="light"] .stage-thumb--6 { --c1:#fb7185; --c2:#f5a462; }

/* mobile: collapse the spine to a single left rail */
@media (max-width:760px) {
  .process-timeline::before { left:18px; }
  .process-step { width:100%; left:0; padding:0 0 0 2.9rem; margin-bottom:1rem; }
  .process-step:nth-child(even) { left:0; }
  .process-step:nth-child(odd) .process-node,
  .process-step:nth-child(even) .process-node { left:0; right:auto; top:1.1rem; width:36px; height:36px; font-size:.9rem; }
  .process-card { padding:1rem 1.05rem; gap:.85rem; }
  .stage-thumb { flex-basis:48px; width:48px; height:48px; border-radius:12px; }
  .stage-thumb svg { width:23px; height:23px; }
}

.includes-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.includes-grid .include-item { flex:1 1 175px; max-width:215px; }
@media (max-width:560px){ .includes-grid .include-item{ flex-basis:140px; } }
.include-item {
  background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.5rem 1.25rem; display:flex; flex-direction:column; gap:.8rem; align-items:flex-start;
  transition:transform .3s, border-color .3s, background .4s;
}
.include-item:hover { transform:translateY(-4px); border-color:var(--accent); }
.include-icon {
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-strong); color:var(--accent-3);
}
[data-theme="light"] .include-icon { color:var(--accent); border-radius:15px; }
.include-icon svg { width:22px; height:22px; }
.include-item h4 { font-size:.98rem; }

/* Comparison table */
.comparison-wrap { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); }
.comparison-table { width:100%; border-collapse:collapse; background:var(--card-bg); -webkit-backdrop-filter:var(--card-blur); backdrop-filter:var(--card-blur); }
.comparison-table th, .comparison-table td { padding:1rem 1.25rem; text-align:left; font-size:.93rem; border-bottom:1px solid var(--border); }
.comparison-table thead th { font-family:var(--font-display); font-weight:700; font-size:.95rem; background:var(--accent-soft); }
.comparison-table thead th:nth-child(2) { color:var(--accent); }
.comparison-table tbody tr:nth-child(even) { background:var(--table-stripe); }
.comparison-table td:first-child { font-weight:600; color:var(--text); font-family:var(--font-display); }
.comparison-table td { color:var(--muted); }
.check-icon { color:var(--check); font-weight:700; margin-right:.5rem; }
.cross-icon { color:var(--cross); font-weight:700; margin-right:.5rem; }
@media (max-width:560px){ .comparison-table th, .comparison-table td { padding:.75rem .8rem; font-size:.82rem; } }

/* Pricing tiers — price line + per-tier CTA (web design) */
.tier-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem; margin:.1rem 0; }
.tier-price .cur { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--muted); }
.tier-price .amt { font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.02em; color:var(--text); }
.tier-price .range { font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--muted); }
.tier-cta { width:100%; margin-top:auto; }
/* equal-height pricing cards so the per-tier CTAs bottom-align (scoped to web-design pricing) */
#pricing .tiers-grid { align-items:stretch; }
/* featured card: let the floating badge sit on the border.
   Higher specificity than the later shared `.tier-card{overflow:hidden}` rule. */
.tiers-grid .tier-card--featured { overflow:visible; }
.tiers-grid .tier-card--featured::after { display:none; }

/* ----------------------------------------------------------------
   SCROLL REVEAL
-----------------------------------------------------------------*/
[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
[data-reveal-delay="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, iframe:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

.surface-bg { background:var(--surface); transition:background .4s; }

/* ════════════════════════════════════════════════════════════════
   v3 "MIXED-DEEP" — VISUAL POLISH LAYER
   (richer hero, real imagery treatments, more motion)
   Both themes consume tokens; theme-scoped overrides where needed.
═══════════════════════════════════════════════════════════════════ */

/* ----------------------------------------------------------------
   HERO — richer composition (grid mesh + spotlight + mockup)
-----------------------------------------------------------------*/
.hero, .page-hero { padding-bottom:6rem; }

/* Fine grid mesh + radial spotlight behind the centered content.
   Sits above the orbs/blobs but below the text. */
.hero-mesh {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 38%, #000 35%, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 60% at 50% 38%, #000 35%, transparent 78%);
}
.hero-mesh::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:54px 54px;
}
.hero-mesh::after {
  content:""; position:absolute; left:50%; top:30%; transform:translate(-50%,-50%);
  width:760px; height:560px; max-width:120vw;
  background:var(--hero-spot);
  filter:blur(8px);
}
[data-theme="dark"]  { --grid-line:rgba(255,255,255,0.045);
  --hero-spot:radial-gradient(ellipse at center, rgba(124,58,237,.18), rgba(37,99,235,.10) 42%, transparent 70%); }
[data-theme="light"] { --grid-line:rgba(30,27,24,0.05);
  --hero-spot:radial-gradient(ellipse at center, rgba(249,115,98,.16), rgba(245,164,98,.12) 45%, transparent 72%); }

/* A subtle conic shimmer ring framing the headline keyword area */
.hero-inner { padding-top:.5rem; }

/* Eyebrow pill gets a live status dot */
.eyebrow.eyebrow--live { display:inline-flex; align-items:center; gap:.55rem; }
.eyebrow--live .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent-3); position:relative;
  box-shadow:0 0 0 0 currentColor;
}
[data-theme="light"] .eyebrow--live .dot { background:var(--accent); }
.eyebrow--live .dot::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; animation:pulseDot 2.2s ease-out infinite;
}
@keyframes pulseDot { 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(3.4); opacity:0; } }

/* Floating product mockup beneath hero content — layered "what we build" card */
.hero-showcase {
  position:relative; z-index:2; margin:3.25rem auto 0; max-width:940px;
  perspective:1600px;
}
.hero-showcase[data-reveal] { transform:translateY(40px); }
.hero-showcase[data-reveal].revealed { transform:none; }

.mockup {
  position:relative; border-radius:var(--radius-lg);
  border:1px solid var(--border-strong);
  background:var(--mockup-bg);
  -webkit-backdrop-filter:saturate(1.3) blur(20px); backdrop-filter:saturate(1.3) blur(20px);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotateX(7deg);
  transform-origin:center top;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
.hero-showcase:hover .mockup { transform:rotateX(0deg) translateY(-4px); box-shadow:var(--glow), var(--shadow); }
[data-theme="dark"]  { --mockup-bg:rgba(14,14,22,0.66); }
[data-theme="light"] { --mockup-bg:rgba(255,255,255,0.86); }

.mockup-bar {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--chip-bg), transparent);
}
.mockup-dots { display:flex; gap:.45rem; }
.mockup-dots span { width:11px; height:11px; border-radius:50%; background:var(--border-strong); }
.mockup-dots span:nth-child(1){ background:#ff5f57; }
.mockup-dots span:nth-child(2){ background:#febc2e; }
.mockup-dots span:nth-child(3){ background:#28c840; }
.mockup-url {
  margin-left:.4rem; font-family:var(--font-body); font-size:.78rem; color:var(--muted);
  padding:.25rem .8rem; border-radius:999px; border:1px solid var(--border);
  background:var(--bg); flex:1; max-width:280px; text-align:left;
}
.mockup-live {
  margin-left:auto; font-family:var(--font-display); font-weight:600; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent-3);
  display:inline-flex; align-items:center; gap:.4rem;
}
[data-theme="light"] .mockup-live { color:var(--accent); }
.mockup-live::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }

.mockup-body { display:grid; grid-template-columns:1.15fr 1fr; gap:0; min-height:240px; }
@media (max-width:620px){ .mockup-body{ grid-template-columns:1fr; } }

.mockup-pane { padding:1.4rem 1.5rem; }
.mockup-pane--img {
  position:relative; min-height:240px; border-left:1px solid var(--border);
  background-size:cover; background-position:center;
}
@media (max-width:620px){ .mockup-pane--img{ border-left:none; border-top:1px solid var(--border); min-height:170px; } }
.mockup-pane--img::after {
  content:""; position:absolute; inset:0; background:var(--img-tint);
  transition:background .4s;
}
.mockup-eyebrow { font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.mockup-title { font-family:var(--font-display); font-weight:700; font-size:1.15rem; margin:.5rem 0 1rem; color:var(--text); line-height:1.2; text-align:left; }

.mockup-metric { display:flex; align-items:baseline; gap:.6rem; margin-bottom:1rem; text-align:left; }
.mockup-metric .num {
  font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.mockup-metric .cap { font-size:.82rem; color:var(--muted); }

.mockup-bars { display:flex; flex-direction:column; gap:.6rem; }
.mockup-line { display:flex; align-items:center; gap:.7rem; }
.mockup-line .lbl { font-size:.74rem; color:var(--muted); width:62px; flex:0 0 auto; text-align:left; }
.mockup-track { flex:1; height:8px; border-radius:999px; background:var(--chip-bg); overflow:hidden; }
.mockup-fill { height:100%; border-radius:999px; background:var(--accent-grad); width:0; transition:width 1.2s cubic-bezier(.2,.7,.2,1); }
.revealed .mockup-fill { width:var(--w,70%); }

/* Floating chips overlapping the mockup corners */
.mockup-chip {
  position:absolute; z-index:3;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--text);
  padding:.55rem .85rem; border-radius:var(--radius);
  background:var(--elevated); border:1px solid var(--border-strong);
  box-shadow:var(--shadow);
}
.mockup-chip svg { width:16px; height:16px; color:var(--accent-3); }
[data-theme="light"] .mockup-chip svg { color:var(--accent); }
.mockup-chip--tl { top:-18px; left:-14px; animation:floaty 6s ease-in-out infinite; }
.mockup-chip--br { bottom:-18px; right:-14px; animation:floaty 6s ease-in-out infinite 1.6s; }
@media (max-width:620px){ .mockup-chip--tl,.mockup-chip--br{ display:none; } }
@keyframes floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* per-theme image tints so photos read in both modes */
[data-theme="dark"]  { --img-tint:linear-gradient(180deg, rgba(6,6,11,.25), rgba(6,6,11,.62)); }
[data-theme="light"] { --img-tint:linear-gradient(180deg, rgba(249,115,98,.10), rgba(253,248,243,.42)); }

/* hero stat hover micro-interaction */
.hero-stat { transition:transform .3s, border-color .3s, box-shadow .3s, background .4s; }
.hero-stat:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }

@media (prefers-reduced-motion:reduce){
  .mockup-chip--tl,.mockup-chip--br{ animation:none; }
  .eyebrow--live .dot::after{ animation:none; }
  .mockup{ transform:none; }
}

/* ----------------------------------------------------------------
   IMAGERY — figures with theme-aware treatments
-----------------------------------------------------------------*/
.media-figure {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow);
  margin:0; isolation:isolate;
}
.media-figure img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.media-figure::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--media-overlay); transition:background .4s;
}
[data-theme="dark"]  { --media-overlay:linear-gradient(180deg, rgba(6,6,11,.10), rgba(6,6,11,.55)); }
[data-theme="light"] { --media-overlay:linear-gradient(180deg, rgba(255,241,232,.04), rgba(249,115,98,.18)); }
.media-figure:hover img { transform:scale(1.05); }
[data-theme="dark"] .media-figure img { filter:saturate(1.05) contrast(1.02); }

.media-caption {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.25rem 1.4rem; color:#fff;
}
.media-caption .k {
  font-family:var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; opacity:.9; margin-bottom:.3rem; display:block;
}
.media-caption .t { font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.15; }

/* WHY section: text + image side by side (replaces stat-only block, keeps stats) */
.why-media-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:880px){ .why-media-grid{ grid-template-columns:1fr; gap:2rem; } }
.why-media { position:relative; }
.why-media .media-figure { aspect-ratio:4/3.4; }
.why-media .why-stats { margin-top:1rem; }
.why-media .why-floatcard {
  position:absolute; right:-10px; bottom:-22px; z-index:3;
  display:flex; align-items:center; gap:.85rem;
  padding:.9rem 1.1rem; border-radius:var(--radius);
  background:var(--elevated); border:1px solid var(--border-strong); box-shadow:var(--shadow);
  max-width:230px;
}
@media (max-width:520px){ .why-media .why-floatcard{ position:static; margin-top:1rem; max-width:none; } }
.why-floatcard .ico {
  width:40px; height:40px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--border-strong); color:var(--accent-3);
}
[data-theme="light"] .why-floatcard .ico { color:var(--accent); }
.why-floatcard .ico svg { width:20px; height:20px; }
.why-floatcard .big { font-family:var(--font-display); font-weight:800; font-size:1.1rem; line-height:1; }
.why-floatcard .sub { font-size:.76rem; color:var(--muted); }

/* full-width image strip band (used between sections) */
.image-band {
  position:relative; min-height:340px; display:flex; align-items:center;
  background-size:cover; background-position:center; overflow:hidden;
  border-block:1px solid var(--border);
}
.image-band::before {
  content:""; position:absolute; inset:0; background:var(--band-overlay); transition:background .4s;
}
[data-theme="dark"]  { --band-overlay:linear-gradient(110deg, rgba(6,6,11,.92) 30%, rgba(6,6,11,.55) 70%, rgba(6,6,11,.85)); }
[data-theme="light"] { --band-overlay:linear-gradient(110deg, rgba(253,248,243,.95) 30%, rgba(255,241,232,.66) 70%, rgba(249,115,98,.30)); }
.image-band .container { position:relative; z-index:1; }
.image-band-inner { max-width:560px; }
.image-band h2 { margin-bottom:1rem; }
.image-band p { color:var(--muted); font-size:1.05rem; margin-bottom:1.5rem; }

/* page-hero supporting image (sub pages) */
.hero-figure {
  position:relative; z-index:2; margin:2.75rem auto 0; max-width:880px;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:21/8;
}
.hero-figure img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s ease; }
.hero-figure::after { content:""; position:absolute; inset:0; background:var(--img-tint); }
/* Our hero images are dark & self-contained; the light-theme cream --img-tint washed them out.
   Swap it for a faint cool vignette so they keep full vibrancy in light mode too. */
[data-theme="light"] .hero-figure::after { background:linear-gradient(180deg, rgba(8,12,28,0), rgba(8,12,28,.12)); }
.hero-figure:hover img { transform:scale(1.04); }
@media (max-width:620px){ .hero-figure{ aspect-ratio:16/10; } }
/* taller variant — used on the AI page so more of the robot hand is visible */
.hero-figure--tall { aspect-ratio:16/9; }
@media (max-width:620px){ .hero-figure--tall{ aspect-ratio:4/3; } }

/* ----------------------------------------------------------------
   ANIMATED STAT COUNTERS
-----------------------------------------------------------------*/
.count[data-count]{ font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------
   PARALLAX (very subtle, JS-driven via --p)
-----------------------------------------------------------------*/
.parallax { will-change:transform; }

/* ----------------------------------------------------------------
   EXTRA MICRO-INTERACTIONS
-----------------------------------------------------------------*/
.colead-card, .sol-card, .outcome-card, .usecase-card, .control-card, .include-item, .tier-card {
  position:relative; overflow:hidden;
}
/* sheen sweep on card hover */
.colead-card::after, .usecase-card::after, .tier-card::after {
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform:skewX(-18deg); transition:left .7s ease; pointer-events:none; z-index:1;
}
[data-theme="dark"]  { --sheen:rgba(255,255,255,0.06); }
[data-theme="light"] { --sheen:rgba(249,115,98,0.10); }
.colead-card:hover::after, .usecase-card:hover::after, .tier-card:hover::after { left:130%; }
.colead-card > *, .usecase-card > *, .tier-card > * { position:relative; z-index:2; }

/* icon pop on card hover */
.colead-card:hover .colead-icon,
.sol-card:hover .sol-icon { transform:translateY(-2px) scale(1.06); }
.colead-icon, .sol-icon { transition:transform .35s cubic-bezier(.2,.7,.2,1), background .4s, border-color .3s; }

/* timeline node glow on reveal */
.timeline-step.revealed .timeline-node,
.roadmap-step.revealed .roadmap-node { animation:nodePop .6s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes nodePop { 0%{ transform:scale(.8); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } }

/* gradient-text headline subtle shimmer */
.grad-text { background-size:160% 100%; }
.hero .grad-text, .page-hero .grad-text { animation:gradShift 9s ease-in-out infinite; }
@keyframes gradShift { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

@media (prefers-reduced-motion:reduce){
  .hero .grad-text, .page-hero .grad-text { animation:none; }
  .timeline-step.revealed .timeline-node, .roadmap-step.revealed .roadmap-node { animation:none; }
  .colead-card::after, .usecase-card::after, .tier-card::after { display:none; }
  .media-figure img, .hero-figure img { transition:none; }
}