/* ==========================================================================
   APEX GROUP DESIGN SYSTEM  v1.0
   One skeleton, four temperaments.
   Parent:  Apex Intelligence AI Inc   [data-brand="parent"]
   Lab:     Apex AI LLC   [data-brand="intel"]
   Money:   Apex Pay                   [data-brand="pay"]
   Growth:  Digi Mkt LLC               [data-brand="digi"]

   The family signature is a single variable display face (Archivo) whose
   WIDTH axis carries the brand personality: condensed = product lab,
   normal = corporate, wide = consumer trust. Everything else is shared.
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit}
:target{scroll-margin-top:6rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* --- 2. Tokens ----------------------------------------------------------- */
:root{
  /* Ink ramp — the shared canvas across every property */
  --ink-1000:#050506;
  --ink-950:#08080a;
  --ink-900:#09090b;
  --ink-850:#0e0e12;
  --ink-800:#131318;
  --ink-700:#1c1c23;
  --ink-600:#2a2a34;

  /* Paper ramp — used by light-canvas brands */
  --paper-0:#ffffff;
  --paper-50:#fbfbfc;
  --paper-100:#f4f4f6;
  --paper-200:#e9e9ee;
  --paper-300:#d8d8e0;

  /* Semantic surface (re-pointed per brand skin) */
  --bg:var(--ink-900);
  --bg-elev:rgba(255,255,255,.035);
  --bg-elev-2:rgba(255,255,255,.055);
  --fg:#ffffff;
  --fg-muted:rgba(255,255,255,.68);
  --fg-faint:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  /* --accent-text: the brand violet is 4.07-4.46:1 as small text, just under
     WCAG AA. Backgrounds, borders, icons and large type keep --accent exactly;
     only small text uses this nudged variant, which clears 4.5:1 on both the
     page and card grounds. Never swap one for the other. */
  --accent:#6a5bff;
  --accent-text:#7466ff;
  --accent-ink:#ffffff;      /* text that sits ON the accent */
  --accent-soft:rgba(106,91,255,.15);
  --accent-2:#ff4fa3;

  /* Type */
  --font-display:'Satoshi','Archivo','Arial Narrow',ui-sans-serif,system-ui,sans-serif;
  --font-ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --display-width:100;       /* the brand personality axis */
  --display-case:none;
  --display-track:-.025em;

  /* Fluid type scale — 320px → 1440px */
  --step--1:clamp(.82rem,.79rem + .13vw,.89rem);
  --step-0:clamp(.95rem,.91rem + .18vw,1.05rem);
  --step-1:clamp(1.1rem,1.03rem + .34vw,1.3rem);
  --step-2:clamp(1.32rem,1.19rem + .62vw,1.7rem);
  --step-3:clamp(1.6rem,1.36rem + 1.15vw,2.3rem);
  --step-4:clamp(1.95rem,1.53rem + 2.05vw,3.15rem);
  --step-5:clamp(2.4rem,1.68rem + 3.5vw,4.5rem);
  --step-6:clamp(2.9rem,1.66rem + 6.0vw,6.5rem);
  --step-7:clamp(3.3rem,1.2rem + 10.2vw,9rem);

  /* Space */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;  --s-11:11rem;
  --section-y:clamp(4rem,2.2rem + 8vw,9rem);
  --wrap:76rem;
  --wrap-narrow:48rem;
  --gutter:clamp(1.15rem,.7rem + 2.2vw,2.5rem);

  /* Shape + depth */
  --r-sm:.4rem; --r-md:.7rem; --r-lg:1.1rem; --r-xl:1.6rem; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.28);
  --shadow-2:0 8px 30px -12px rgba(0,0,0,.55);
  --shadow-3:0 30px 70px -30px rgba(0,0,0,.75);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:130ms; --t-mid:260ms; --t-slow:520ms;

  color-scheme:dark;
}

/* --- 3. Brand skins ------------------------------------------------------ */

/* UNIFIED BRAND (2026-09-08, per owner): the apex-intelligence theme is the group
   theme — ink ground, violet accent, Archivo at institutional width — across all
   properties. data-brand attributes retained for future flexibility only. */
[data-brand="parent"], [data-brand="intel"], [data-brand="pay"], [data-brand="digi"]{
  --bg:var(--ink-900);
  --bg-elev:rgba(255,255,255,.035);
  --bg-elev-2:rgba(255,255,255,.055);
  --fg:#ffffff;
  --fg-muted:rgba(255,255,255,.68);
  --fg-faint:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --accent:#6a5bff;
  --accent-text:#7466ff;
  --accent-ink:#ffffff;
  --accent-soft:rgba(106,91,255,.16);
  --accent-2:#ff4fa3;      /* the brand pink — gradient partner */
  --accent-3:#4f7cff;
  --pastel-lavender:#e2deff;
  --pastel-mint:#b7e8d5;
  --pastel-sky:#bfd7ff;
  --pastel-coral:#ff8a65;
  --display-width:96;
  --display-case:none;
  --display-track:-.03em;
  --shadow-2:0 8px 30px -12px rgba(0,0,0,.55);
  --shadow-3:0 30px 70px -30px rgba(0,0,0,.75);
  color-scheme:dark;
}

/* --- 4. Base ------------------------------------------------------------- */
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:var(--step-0);
  line-height:1.6;
  font-weight:400;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--display-width);
  font-weight:800;
  line-height:.98;
  letter-spacing:var(--display-track);
  text-transform:var(--display-case);
  text-wrap:balance;
}
h1{font-size:var(--step-6)}
h2{font-size:var(--step-5)}
h3{font-size:var(--step-3);line-height:1.08}
h4{font-size:var(--step-1);line-height:1.2;font-weight:700}
p{text-wrap:pretty}
strong{font-weight:650;color:var(--fg)}
::selection{background:var(--accent);color:var(--accent-ink)}

/* --- 5. Layout primitives ------------------------------------------------ */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap--narrow{--wrap:var(--wrap-narrow)}
.wrap--wide{--wrap:88rem}
.section{padding-block:var(--section-y)}
.stack>*+*{margin-top:var(--flow,1.1rem)}
.stack--lg{--flow:1.8rem}
.grid{display:grid;gap:var(--s-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16.5rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:60rem){.split{grid-template-columns:1.05fr .95fr}
  .split--reverse>:first-child{order:2}}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.center{text-align:center;margin-inline:auto}

/* --- 6. Components ------------------------------------------------------- */

/* Eyebrow */
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--step--1);
  font-weight:650;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-faint);
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow::before{
  content:"";width:1.6rem;height:1px;background:var(--accent);flex:0 0 auto;
}
.eyebrow--center{justify-content:center}

/* Lede */
.lede{font-size:var(--step-1);line-height:1.55;color:var(--fg-muted);max-width:44ch}

/* Buttons */
.btn{
  --btn-bg:var(--accent); --btn-fg:var(--accent-ink); --btn-line:transparent;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.82rem 1.4rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-line);border-radius:var(--r-pill);
  font-size:var(--step-0);font-weight:650;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn__arrow{transition:transform var(--t-mid) var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--line-strong)}
.btn--ghost:hover{--btn-line:var(--fg);filter:none;background:var(--bg-elev)}
.btn--solid{--btn-bg:var(--fg);--btn-fg:var(--bg)}
.btn--sm{padding:.55rem 1rem;font-size:var(--step--1)}

/* Cards */
.card{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,1rem + 1.4vw,2rem);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.7rem;
  transition:border-color var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease-out);
}
a.card:hover,.card--interactive:hover{
  border-color:var(--line-strong);background:var(--bg-elev-2);transform:translateY(-3px);
}
.card__index{
  font-family:var(--font-mono);font-size:var(--step--1);
  color:var(--accent-text);letter-spacing:.06em;
}
.card p{color:var(--fg-muted);font-size:var(--step-0);margin:0}
.card--accent{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
/* On an accent-tinted ground even --accent-text only reaches ~4.5; --fg gives
   15:1+ and reads as deliberate emphasis rather than a washed-out link. */
.card--accent .card__index,.card--accent .u-accent{color:var(--fg)}
.card--flush{padding:0;background:none;border:none}

/* Feature card with a top-edge accent that draws on hover */
.card--edge::after{
  content:"";position:absolute;inset:-1px auto auto -1px;height:2px;width:0;
  background:var(--accent);border-radius:var(--r-lg) 0 0 0;
  transition:width var(--t-slow) var(--ease-out);
}
.card--edge:hover::after{width:calc(100% + 2px)}

/* Stat */
.stat__n{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--display-width);
  font-size:var(--step-4);font-weight:800;line-height:1;
  letter-spacing:-.035em;
}
.stat__l{font-size:var(--step--1);color:var(--fg-faint);margin-top:.4rem;line-height:1.35}
.stat--ruled{border-left:2px solid var(--accent);padding-left:1.1rem}

/* Pill / tag */
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .8rem;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--step--1);color:var(--fg-muted);background:var(--bg-elev);
  white-space:nowrap;
}
.pill--live{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.pill--live::before{
  content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Rules and dividers */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--accent{background:linear-gradient(90deg,var(--accent),transparent)}

/* Definition rows — the "spec sheet" pattern */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;gap:.35rem 2rem;padding:1.35rem 0;
  border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--ease);
}
@media(min-width:48rem){.row{grid-template-columns:minmax(8rem,15rem) 1fr;align-items:baseline}}
.row__k{font-weight:650;font-size:var(--step-0)}
.row__v{color:var(--fg-muted);font-size:var(--step-0)}

/* Navigation */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease);
}
.nav[data-stuck="true"]{border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:var(--s-5);height:4.25rem}
.nav__brand{
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--font-display);font-variation-settings:'wdth' var(--display-width);
  font-weight:800;font-size:1.06rem;letter-spacing:-.02em;margin-right:auto;
}
.nav__brand svg{flex:0 0 auto}
.nav__links{display:none;gap:1.6rem;align-items:center}
@media(min-width:56rem){.nav__links{display:flex}}
.nav__link{
  font-size:var(--step--1);font-weight:500;color:var(--fg-muted);
  text-decoration:none;position:relative;padding-block:.4rem;
  transition:color var(--t-fast) var(--ease);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--fg)}

/* Apex AI carries the widest nav in the group (Products · Sandboxes · Automotive
   · three products · AI development · ROI · FAQ). Between the drawer breakpoint
   and ~1250px that wraps to two rows, so the three product links fold into
   Products — where they already live, alongside the footer and /#products. */
@media(min-width:56rem) and (max-width:78rem){
  [data-brand="intel"] .nav__links .nav__link[href="/mios"],
  [data-brand="intel"] .nav__links .nav__link[href="/autoscope"],
  [data-brand="intel"] .nav__links .nav__link[href="/writewell"]{display:none}
}
/* The hub nav (2026-09-11) carries eight destinations — Automotive · Marketing ·
   Payments · How We Do It · miOS · What's Next · Team · Blog. Between the drawer
   breakpoint and ~76rem that wraps to two rows, so the three lowest-intent links
   fold into the drawer, where they are already listed in full. */
[data-brand="parent"] .nav__links{gap:1.15rem}
@media(min-width:56rem) and (max-width:76rem){
  [data-brand="parent"] .nav__links .nav__link[href="/whats-next"],
  [data-brand="parent"] .nav__links .nav__link[href="/team"],
  [data-brand="parent"] .nav__links .nav__link[href="/blog"]{display:none}
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width var(--t-mid) var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{width:100%}
.nav__toggle{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
}
@media(min-width:56rem){.nav__toggle{display:none}}
.nav__drawer{
  display:grid;gap:.2rem;padding:0 0 1.25rem;border-top:1px solid var(--line);
}
.nav__drawer[hidden]{display:none}
.nav__drawer a{
  padding:.8rem .2rem;text-decoration:none;color:var(--fg-muted);
  border-bottom:1px solid var(--line);font-size:var(--step-0);
}
.nav__drawer a:last-of-type{border-bottom:0}

/* Group switcher — the bar that proves these four are one company */
.groupbar{
  background:var(--ink-1000);color:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:.76rem;letter-spacing:.02em;
}
.groupbar__in{
  display:flex;align-items:center;gap:.35rem;
  min-height:2.35rem;overflow-x:auto;scrollbar-width:none;
}
.groupbar__in::-webkit-scrollbar{display:none}
.groupbar__label{
  color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.13em;
  font-size:.66rem;font-weight:650;white-space:nowrap;margin-right:.5rem;
}
.groupbar a{
  padding:.3rem .7rem;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.groupbar a:hover{background:rgba(255,255,255,.08);color:#fff}
.groupbar a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.11)}

/* Hero */
.hero{padding-block:clamp(3.5rem,2rem + 7vw,7.5rem) var(--section-y);position:relative;overflow:hidden}
.hero__title{font-size:var(--step-7);max-width:16ch}
.hero__lede{max-width:46ch;font-size:var(--step-1);color:var(--fg-muted);line-height:1.55}
.hero__glow{
  position:absolute;pointer-events:none;z-index:-1;
  width:min(90vw,54rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%);
  top:-32%;right:-18%;filter:blur(30px);
}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;position:relative}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--font-display);font-variation-settings:'wdth' var(--display-width);
  font-size:var(--step-1);font-weight:700;color:var(--fg-faint);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* CTA band */
.band{
  background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(2.25rem,1.4rem + 4vw,4.5rem) clamp(1.5rem,1rem + 3vw,3.5rem);
  text-align:center;position:relative;overflow:hidden;
}
.band::before{
  content:"";position:absolute;inset:auto 0 -60% 0;height:120%;
  background:radial-gradient(ellipse at 50% 100%,var(--accent-soft),transparent 70%);
  pointer-events:none;
}
.band>*{position:relative}

/* Footer */
.footer{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-6);margin-top:var(--section-y)}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.footer h5{
  font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-faint);font-weight:650;margin-bottom:.9rem;font-family:var(--font-ui);
}
.footer ul{display:grid;gap:.55rem}
.footer a{color:var(--fg-muted);text-decoration:none;font-size:var(--step-0);transition:color var(--t-fast) var(--ease)}
.footer a:hover{color:var(--fg)}
.footer__legal{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:var(--step--1);color:var(--fg-faint);
}

/* Entity badge — states the corporate parentage in plain language */
.entity{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--step--1);color:var(--fg-faint);
}
.entity__dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* --- 7. Utilities -------------------------------------------------------- */
.u-accent{color:var(--accent-text)}
.u-muted{color:var(--fg-muted)}
.u-faint{color:var(--fg-faint)}
.u-mono{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.02em}
.u-nowrap{white-space:nowrap}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:.75rem;top:-4rem;z-index:100;
  background:var(--accent);color:var(--accent-ink);padding:.65rem 1rem;
  border-radius:var(--r-sm);text-decoration:none;font-weight:650;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:.75rem}

/* --- 8. Reveal on scroll ------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:70ms}
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:140ms}
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:210ms}
[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:280ms}
[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:350ms}

/* --- 9. Accessibility + print ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-reveal-stagger]>*{opacity:1;transform:none}
  .marquee__track{animation:none}
}
@media print{
  .nav,.groupbar,.marquee,.hero__glow{display:none}
  body{background:#fff;color:#000}
  .card{border-color:#ccc}
}

/* --- 10. Motion & gradient layer (2026-09-08): the digi-mkt purple energy,
       pointed at booking. All animation dies under prefers-reduced-motion
       via the global kill-switch in section 9. ------------------------------- */
:root{
  --grad:linear-gradient(100deg,#ff4fa3 0%,#8b7dff 55%,#4f7cff 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,79,163,.16),rgba(106,91,255,.16));
}

/* Gradient headline treatment */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:180% 100%;
  animation:grad-pan 9s ease-in-out infinite alternate;
}
@keyframes grad-pan{from{background-position:0% 0}to{background-position:100% 0}}

/* Living hero glows — the two-orb layered look */
.hero__glow{animation:orb-drift 16s ease-in-out infinite alternate}
.hero__glow--pink{
  position:absolute;pointer-events:none;z-index:-1;
  width:min(70vw,40rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,79,163,.17),transparent 66%);
  bottom:-30%;left:-12%;filter:blur(34px);
  animation:orb-drift 20s ease-in-out infinite alternate-reverse;
}
@keyframes orb-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(4%,6%) scale(1.12)}
}

/* Primary buttons: gradient sheen sweep on hover */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-110%);
  transition:transform .6s var(--ease-out);
  pointer-events:none;
}
.btn:hover::after{transform:translateX(110%)}

/* CTA band: slow living gradient wash */
.band::before{
  background:
    radial-gradient(ellipse at 30% 120%,rgba(255,79,163,.14),transparent 60%),
    radial-gradient(ellipse at 75% 110%,rgba(106,91,255,.22),transparent 65%);
  animation:band-breathe 8s ease-in-out infinite alternate;
}
@keyframes band-breathe{from{opacity:.75}to{opacity:1}}

/* THE conversion element: floating Book-a-call pill on every page */
.book-fab{
  position:fixed;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);z-index:90;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.25rem;border-radius:999px;
  background:var(--grad);background-size:180% 100%;
  color:#fff;font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  text-decoration:none;letter-spacing:-.01em;
  box-shadow:0 10px 30px -8px rgba(106,91,255,.55);
  animation:grad-pan 7s ease-in-out infinite alternate;
  transition:transform var(--t-fast) var(--ease);
}
.book-fab:hover{transform:translateY(-3px) scale(1.03)}
.book-fab::before{
  content:"";position:absolute;inset:-5px;border-radius:999px;
  border:2px solid rgba(139,125,255,.55);
  animation:fab-ring 2.6s var(--ease) infinite;
  pointer-events:none;
}
@keyframes fab-ring{
  0%{transform:scale(.92);opacity:.9}
  70%{transform:scale(1.14);opacity:0}
  100%{transform:scale(1.14);opacity:0}
}
.book-fab svg{flex:0 0 auto}
@media print{.book-fab{display:none}}
@media(prefers-reduced-motion:reduce){.book-fab::before{display:none}}

/* Pastel chips — the digi card-color variety, dark-ground friendly */
.pill--lavender{background:var(--pastel-lavender);color:#1c1633;border-color:transparent}
.pill--mint{background:var(--pastel-mint);color:#0e2a1f;border-color:transparent}
.pill--sky{background:var(--pastel-sky);color:#122344;border-color:transparent}
.pill--coral{background:var(--pastel-coral);color:#3a1408;border-color:transparent}

/* --- 11. Light theme + toggle (owner request). Dark is the brand default;
       [data-theme="light"] on <html> flips the ground while keeping the
       violet/pink brand signature. Placed last so it wins the cascade. ------- */
[data-theme="light"]{
  --bg:#fbfbfd;
  --bg-elev:rgba(9,9,11,.04);
  --bg-elev-2:rgba(9,9,11,.065);
  --fg:#101014;
  --fg-muted:rgba(16,16,20,.66);
  /* .60 not .46: at .46 the small uppercase .eyebrow labels and .u-faint text
     measured 3.12:1 on the light ground — below WCAG AA's 4.5:1 for small text.
     .60 gives 4.92:1 and is visually near-identical. Dark mode already passed. */
  --fg-faint:rgba(16,16,20,.60);
  --line:rgba(16,16,20,.12);
  --line-strong:rgba(16,16,20,.26);
  --accent:#6a5bff;
  --accent-text:#6456f1;
  --accent-ink:#ffffff;
  --accent-soft:rgba(106,91,255,.12);
  --shadow-1:0 1px 2px rgba(16,16,20,.06);
  --shadow-2:0 8px 30px -14px rgba(16,16,20,.18);
  --shadow-3:0 30px 70px -34px rgba(16,16,20,.25);
  color-scheme:light;
}
[data-theme="light"] .hero__glow{background:radial-gradient(circle,rgba(106,91,255,.14),transparent 66%)}
[data-theme="light"] .hero__glow--pink{background:radial-gradient(circle,rgba(255,79,163,.12),transparent 66%)}
[data-theme="light"] .btn--solid{--btn-bg:#101014;--btn-fg:#fff}

.theme-toggle{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:0 0 auto;
  background:none;border:1px solid var(--line);border-radius:50%;cursor:pointer;
  color:var(--fg-muted);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.theme-toggle:hover{color:var(--fg);border-color:var(--line-strong);transform:rotate(15deg)}
.theme-toggle .i-sun{display:block}
.theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:block}

/* --- 12. The constellation: animated group map (parent hero) --------------- */
.orbit{position:relative;width:min(100%,26rem);aspect-ratio:1;margin-inline:auto}
.orbit__lines{position:absolute;inset:0;width:100%;height:100%}
.orbit__lines line{
  stroke:url(#orbitGrad);stroke-width:1.4;stroke-dasharray:4 6;
  animation:orbit-flow 2.8s linear infinite;opacity:.7;
}
@keyframes orbit-flow{to{stroke-dashoffset:-20}}
.orbit__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:6.4rem;height:6.4rem;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1.5px solid var(--accent);color:var(--fg);
  box-shadow:0 0 50px rgba(106,91,255,.4);z-index:2;
}
.orbit__center::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid rgba(139,125,255,.5);
  animation:fab-ring 3.2s var(--ease) infinite;
}
.orbit__node{
  position:absolute;z-index:2;display:grid;justify-items:center;gap:.45rem;
  text-decoration:none;color:var(--fg);
  animation:orbit-float 7s ease-in-out infinite alternate;
  transition:transform var(--t-mid) var(--ease-out);
}
.orbit__node:hover{transform:scale(1.09)}
.orbit__node:nth-child(3){animation-delay:-2.5s}
.orbit__node:nth-child(4){animation-delay:-5s}
@keyframes orbit-float{from{translate:0 -5px}to{translate:0 6px}}
.orbit__dot{
  width:3.9rem;height:3.9rem;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-elev-2);border:1px solid var(--line-strong);
  font-family:var(--font-display);font-weight:900;font-size:1rem;
  transition:border-color var(--t-fast) var(--ease);
}
.orbit__node:hover .orbit__dot{border-color:var(--accent)}
.orbit__label{
  font-family:var(--font-ui);font-size:.72rem;font-weight:650;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap;
}
.orbit__node--intel{left:69%;top:8%}
.orbit__node--digi{left:2%;top:33%}
.orbit__node--pay{left:62%;top:74%}

/* Scroll progress thread (injected by JS on every page) */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;
  background:var(--grad);transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}

/* Marquee edge fade */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}