/* ============================================================
   SitePulse — Design System (v2)
   The single source of truth for the marketing + app surfaces.
   Dependency-free, no build step. Every page links this ONE file so the
   brand can never drift.

   Identity: SitePulse — cinematic DARK NAVY foundation + bright TEAL energy.
     · NAVY is the environment everywhere (the dark, premium canvas).
     · TEAL (#10C9B0) is the signature energy — CTAs, the AI/intelligence cue,
       the glow. Bright, alive, recognisably SitePulse.
     · WARM/LIGHT is reserved for GENERATED-SITE PREVIEWS only (the device &
       before/after mockups) so premium customer sites pop against the dark UI.
   Execution bar: Apple / Shopify / Stripe / Linear craft, applied to the
   SitePulse brand — depth, light, elevation, engineered motion. Evolution, not rebrand.
   ============================================================ */

/* ---------------------------------------------------------------
   1 · TOKENS
   Raw brand values + semantic tokens. Style components through the semantic
   tokens (--bg/--text/--accent…) so the navy identity stays consistent.
   --------------------------------------------------------------- */
:root{
  /* -- navy environment (raw) -- */
  --navy:#0A2540; --navy-2:#071B30; --navy-3:#0F2E4E; --navy-4:#0C2743; --ink-deep:#06111F;
  /* -- teal energy (raw) -- */
  --teal:#10C9B0; --teal-br:#7FE9D8; --teal-hi:#22E0C6; --teal-deep:#0B9D8A; --teal-wash:rgba(16,201,176,.12);
  --brass:#C79A4E;
  /* -- LIGHT tokens — used only inside generated-site previews (device / before-after) -- */
  --paper:#F7F3EC; --paper-2:#FCFAF5; --card:#FFFFFF; --cream:#F4EFE6; --ink:#0A1A2F; --hair-warm:#E7E0D3;
  /* -- on-navy text ladder -- */
  --on-navy:#EAF1F7; --on-navy-sub:#B9CBD6; --on-navy-dim:#8FA6BA;
  /* -- semantic status (brightened for the dark ground) -- */
  --good:#40C79B; --warn:#E0A94A; --crit:#E8695E;

  /* -- type (craft — kept) -- */
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono','JetBrains Mono',ui-monospace,'Cascadia Code',Menlo,monospace;
  /* production faces to license before launch: display ~ Sora/Signifier; text ~ Söhne/Inter */
  --fs-eyebrow:.74rem; --fs-sm:.86rem; --fs-body:1rem; --fs-lead:clamp(1.08rem,1.7vw,1.3rem);
  --fs-h3:clamp(1.35rem,2.4vw,1.8rem); --fs-h2:clamp(2rem,4.4vw,3.1rem); --fs-h1:clamp(2.6rem,6vw,4.6rem);

  /* -- space / radius / motion (craft — kept) -- */
  --sp-1:6px; --sp-2:12px; --sp-3:18px; --sp-4:26px; --sp-5:40px; --sp-6:72px; --sp-7:clamp(76px,11vw,160px);
  --r-sm:11px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --maxw:1160px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* -- elevation: dark-ground shadows + a lit top bevel + the teal glow -- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 4px 10px -4px rgba(0,0,0,.5);
  --shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 8px -2px rgba(0,0,0,.45), 0 20px 42px -18px rgba(0,0,0,.62);
  --shadow-lg:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 22px -10px rgba(0,0,0,.55), 0 48px 88px -30px rgba(0,0,0,.78);
  --glow:0 14px 40px -12px rgba(16,201,176,.5);
  --glow-soft:0 0 26px -4px rgba(16,201,176,.55);

  /* -- glass (nav + cards floating over previews) -- */
  --glass-bg:rgba(11,31,54,.62); --glass-brd:rgba(255,255,255,.12); --glass-blur:saturate(160%) blur(16px);

  /* -- semantic tokens — NAVY FOUNDATION (the default, for everyone) -- */
  --bg:#0A2540; --surface:#0F2E4E; --surface-2:#0C2743;
  --text:#EAF1F7; --dim:#9FB6C8; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.17);
  --accent:#10C9B0; --accent-ink:#65E4D0; --anchor:#0A2540;
  --focus:#10C9B0; --bevel:rgba(255,255,255,.06);
}
/* Optional explicit warm-light theme (opt-in only; navy is the default identity) */
:root[data-theme="light"]{
  --bg:#F7F3EC; --surface:#FFFFFF; --surface-2:#FCFAF5;
  --text:#0A1A2F; --dim:#5B6673; --line:#E7E0D3; --line-strong:#D8CFBE;
  --accent:#0B9D8A; --accent-ink:#0A6F63; --focus:#0B9D8A; --bevel:rgba(255,255,255,.7);
  --glass-bg:rgba(255,255,255,.72); --glass-brd:rgba(255,255,255,.6);
  --shadow-sm:0 1px 2px rgba(10,37,64,.06), 0 3px 8px -4px rgba(10,37,64,.12);
  --shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 2px 6px -2px rgba(10,37,64,.08), 0 16px 34px -18px rgba(10,37,64,.24);
  --shadow-lg:0 1px 0 rgba(255,255,255,.75) inset, 0 6px 14px -6px rgba(10,37,64,.10), 0 40px 74px -28px rgba(10,37,64,.34);
}
:root[data-theme="dark"]{ /* explicit dark = the default navy identity */ }

/* ---------------------------------------------------------------
   2 · BASE / RESET + AMBIENT ENVIRONMENT
   The navy canvas is cinematic, never flat: a fixed depth + teal-glow wash
   (::before) and a fine film grain (::after) sit behind all content.
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#0A2540}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .5s var(--ease),color .5s var(--ease);
}
body::before{  /* cinematic depth: a cool key-light top, teal energy at the edges, a dark floor */
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 82% at 50% -12%, rgba(24,74,106,.55), rgba(24,74,106,0) 60%),
    radial-gradient(72% 52% at 86% 2%, rgba(16,201,176,.12), transparent 60%),
    radial-gradient(64% 48% at 6% 98%, rgba(16,201,176,.07), transparent 62%),
    radial-gradient(120% 90% at 50% 122%, rgba(4,12,22,.65), transparent 55%);
}
body::after{  /* film grain — tactile richness on the navy, kept quiet */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::before{background:
  radial-gradient(120% 78% at 50% -12%, rgba(255,255,255,.8), transparent 58%),
  radial-gradient(78% 52% at 88% 4%, rgba(16,201,176,.06), transparent 60%),
  radial-gradient(66% 50% at 6% 96%, rgba(199,154,78,.05), transparent 62%);}
:root[data-theme="light"] body::after{opacity:.5;mix-blend-mode:soft-light}

img,video,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.05;margin:0}
h1{font-weight:700;letter-spacing:-.03em}
p{margin:0 0 1em;max-width:66ch}
a{color:var(--accent-ink);text-underline-offset:3px}
:where(button,a,input,textarea,select):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:rgba(16,201,176,.26);color:#fff}

/* ---------------------------------------------------------------
   3 · LAYOUT
   --------------------------------------------------------------- */
.sp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.sp-section{position:relative;padding:var(--sp-7) 0}
.sp-section + .sp-section::before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:.9}
.sp-grid{display:grid;gap:var(--sp-4)}
.sp-g2{grid-template-columns:1fr 1fr}
.sp-g3{grid-template-columns:repeat(3,1fr)}
.sp-g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.sp-g2,.sp-g3,.sp-g4{grid-template-columns:1fr}}
.sp-center{text-align:center}
.sp-stack{display:flex;flex-direction:column;gap:var(--sp-3)}

/* ---------------------------------------------------------------
   4 · TYPOGRAPHY HELPERS
   --------------------------------------------------------------- */
.sp-serif{font-family:var(--serif)}
.sp-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.sp-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:var(--fs-eyebrow);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.sp-eyebrow::before{content:"";width:18px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);flex:0 0 auto}
.sp-eyebrow--plain::before{display:none}
.sp-center .sp-eyebrow,.sp-sechead.sp-center .sp-eyebrow{justify-content:center}
.sp-lead{font-size:var(--fs-lead);color:var(--dim);line-height:1.62;max-width:58ch}
.sp-h1{font-size:var(--fs-h1);text-wrap:balance;line-height:1.02}
.sp-h2{font-size:var(--fs-h2);text-wrap:balance;line-height:1.06}
.sp-h3{font-size:var(--fs-h3)}
.sp-sig{font-family:var(--serif);font-style:italic;color:var(--accent-ink)}
.sp-sechead{margin-bottom:var(--sp-5);max-width:62ch}
.sp-sechead .sp-eyebrow{margin-bottom:16px}
.sp-sechead .sp-lead{margin-top:16px}

/* ---------------------------------------------------------------
   5 · BUTTONS
   teal = the primary energy CTA (glowing) · navy = raised secondary ·
   ghost = quiet secondary. A light sweep on hover.
   --------------------------------------------------------------- */
.sp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font:inherit;font-weight:650;letter-spacing:.005em;padding:13px 22px;border-radius:var(--r-sm);text-decoration:none;
  overflow:hidden;isolation:isolate;
  transition:transform .22s var(--ease-out),box-shadow .28s var(--ease),background .25s var(--ease),filter .25s}
.sp-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease),opacity .3s}
.sp-btn:hover{transform:translateY(-2px)}
.sp-btn:hover::after{opacity:1;transform:translateX(120%)}
.sp-btn:active{transform:translateY(0) scale(.985)}
.sp-btn--teal{background:linear-gradient(180deg,var(--teal-hi),var(--teal) 55%,var(--teal-deep));color:#04231f;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px -12px rgba(16,201,176,.6), 0 0 22px -6px rgba(16,201,176,.5)}
.sp-btn--teal:hover{filter:brightness(1.05);box-shadow:0 1px 0 rgba(255,255,255,.36) inset, 0 20px 46px -14px rgba(16,201,176,.72), 0 0 30px -6px rgba(16,201,176,.6)}
.sp-btn--navy{background:linear-gradient(180deg,#173d5f,#0c2743);color:#EAF1F7;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(255,255,255,.08), 0 14px 28px -12px rgba(0,0,0,.6)}
.sp-btn--navy:hover{background:linear-gradient(180deg,#1c4870,#103052);box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 0 0 1px rgba(127,233,216,.35), 0 18px 36px -14px rgba(0,0,0,.7)}
.sp-btn--cream{background:linear-gradient(180deg,#fff,#EAF1F7);color:var(--anchor);box-shadow:var(--shadow-sm)}
.sp-btn--ghost{background:rgba(255,255,255,.03);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.sp-btn--ghost:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(127,233,216,.5);color:#fff}
.sp-btn--ghost-light{background:rgba(255,255,255,.04);color:#DCE7EF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.sp-btn--ghost-light:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(127,233,216,.55);color:#fff}
.sp-btn--block{width:100%}
.sp-btn--lg{padding:16px 30px;font-size:1.02rem}
.sp-spark{width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%,#eafffb,#7fe0d3);box-shadow:0 0 0 3px rgba(127,224,211,.18)}
.sp-btn--teal .sp-spark{animation:sp-spark 3.2s ease-in-out infinite}
@keyframes sp-spark{0%,100%{box-shadow:0 0 0 3px rgba(127,224,211,.2)}50%{box-shadow:0 0 0 5px rgba(127,224,211,.05)}}

/* ---------------------------------------------------------------
   6 · CARDS + FIELDS + CHIPS
   Navy panels, raised off the ground with a lit top bevel + border, that
   lift and warm to a teal edge on hover.
   --------------------------------------------------------------- */
.sp-card{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.8vw,32px);box-shadow:var(--shadow);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.sp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 1px 0 var(--bevel) inset}
.sp-card--lift{cursor:default}
.sp-card--lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg),0 0 34px -14px rgba(16,201,176,.45);border-color:rgba(127,233,216,.32)}
.sp-card--glow:hover{border-color:rgba(16,201,176,.45)}
.sp-field label{display:block;font-size:var(--fs-sm);color:var(--dim);margin-bottom:8px;font-weight:500}
.sp-field input,.sp-field textarea{width:100%;padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--text);font:inherit;
  transition:border-color .2s,box-shadow .2s}
.sp-field input:focus,.sp-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--teal-wash)}
.sp-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;
  padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:rgba(255,255,255,.04)}
.sp-chip--good{color:var(--good);background:rgba(64,199,155,.12);border-color:rgba(64,199,155,.32)}
.sp-chip--warn{color:var(--warn);background:rgba(224,169,74,.12);border-color:rgba(224,169,74,.32)}
.sp-chip--crit{color:var(--crit);background:rgba(232,105,94,.12);border-color:rgba(232,105,94,.32)}

/* ---------------------------------------------------------------
   7 · THE PULSE CARD (the advisor voice — reused everywhere Grow speaks)
   --------------------------------------------------------------- */
.sp-pulse{position:relative;background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--text);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.sp-pulse__top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--teal-wash),transparent)}
.sp-pulse__dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8ff0e2,var(--teal));
  box-shadow:0 0 0 0 rgba(16,201,176,.5),0 0 12px 0 rgba(16,201,176,.6);animation:sp-ping 2.8s ease-out infinite}
@keyframes sp-ping{0%{box-shadow:0 0 0 0 rgba(16,201,176,.5),0 0 12px 0 rgba(16,201,176,.6)}70%,100%{box-shadow:0 0 0 9px rgba(16,201,176,0),0 0 12px 0 rgba(16,201,176,.2)}}
.sp-pulse__top b{font-family:var(--serif)}
.sp-pulse__tag{margin-left:auto;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:700}
.sp-pulse__body{padding:16px 18px}
.sp-pulse__rec{font-family:var(--serif);font-size:1.14rem;margin:0 0 6px;line-height:1.25}
.sp-pulse__why{font-size:var(--fs-sm);color:var(--dim);margin:0 0 14px}
.sp-pulse--glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd)}

/* ---------------------------------------------------------------
   8 · NAV + FOOTER (ONE shared header/footer)
   --------------------------------------------------------------- */
.sp-head{position:sticky;top:0;z-index:50;transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.sp-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:0;transition:opacity .4s}
.sp-head.is-scrolled{background:rgba(8,22,40,.72);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.sp-head.is-scrolled::after{opacity:1}
.sp-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
/* --- THE MARK — the definitive SitePulse heartbeat. A navy tile carrying a
   living waveform + a luminous apex node (the pulse point). sitepulse.js injects
   the animated .sp-mark__svg; the CSS background is the instant / no-JS fallback,
   so the mark is never blank. One mark, every surface, favicon → hero. --- */
.sp-mark{position:relative;width:30px;height:30px;border-radius:8px;flex:0 0 auto;overflow:hidden;
  background:#0A1A2F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 17.5H10.8L13.9 8.2 17.2 23.8 19.4 17.5 21 15 22.7 17.5H28' fill='none' stroke='%2310C9B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='13.9' cy='8.2' r='2' fill='%237FE9D8'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px -6px rgba(0,0,0,.6),0 0 24px -6px rgba(16,201,176,.6);
  transition:transform .3s var(--ease-out),box-shadow .3s}
.sp-brand:hover .sp-mark{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 20px -6px rgba(0,0,0,.7),0 0 34px -2px rgba(16,201,176,.85)}
.sp-mark__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-mark__base{stroke:#123a4f}
.sp-mark__spark{stroke:var(--teal);stroke-dasharray:22 100;stroke-dashoffset:118}
.sp-js .sp-mark__spark{animation:sp-beat 4.6s var(--ease) infinite}
.sp-mark__node{fill:#EAFFFB}
.sp-mark__halo{fill:var(--teal);opacity:.16;transform-box:fill-box;transform-origin:center}
.sp-js .sp-mark__halo{animation:sp-halo 4.6s var(--ease) infinite}
/* the beat travels the waveform, then rests — a heartbeat, not a scanner */
@keyframes sp-beat{0%{stroke-dashoffset:118}38%{stroke-dashoffset:-14}100%{stroke-dashoffset:-14}}
@keyframes sp-halo{0%,24%{opacity:.10;transform:scale(.55)}38%{opacity:.5;transform:scale(1.35)}66%,100%{opacity:.10;transform:scale(.55)}}
/* the mark scales up as a masthead / loading / hero device */
.sp-mark--lg{width:56px;height:56px;border-radius:15px}
.sp-mark--xl{width:96px;height:96px;border-radius:24px}
.sp-wordmark{font-family:var(--serif);font-weight:700;font-size:1.14rem;color:var(--text);letter-spacing:-.01em}
.sp-wordmark b{color:var(--accent-ink)}
.sp-nav{display:flex;align-items:center;gap:20px;padding:16px clamp(20px,4vw,48px);max-width:var(--maxw);margin:0 auto;
  transition:padding .4s var(--ease)}
.is-scrolled .sp-nav{padding-top:11px;padding-bottom:11px}
.sp-nav__links{display:flex;gap:18px;margin-left:10px;font-size:var(--fs-sm);color:var(--dim)}
.sp-nav__links a{position:relative;color:inherit;text-decoration:none;padding:4px 0;transition:color .2s}
.sp-nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;border-radius:2px;
  background:var(--accent);transition:right .3s var(--ease-out)}
.sp-nav__links a:hover{color:var(--text)}
.sp-nav__links a:hover::after{right:0}
.sp-nav__cta{margin-left:auto}
@media(max-width:640px){.sp-nav__links{display:none}}
.sp-footer{position:relative;background:radial-gradient(120% 140% at 80% 0%,#0e3350,#08203a 45%,#050f1e);
  color:var(--on-navy-sub);padding:var(--sp-6) 0 var(--sp-5);overflow:hidden;border-top:1px solid var(--line)}
.sp-footer .sp-wordmark{color:#fff}.sp-footer .sp-wordmark b{color:#5fd6c6}

/* ---------------------------------------------------------------
   9 · NAVY ENVIRONMENT + "electricity" (deeper cinematic hero stages)
   --------------------------------------------------------------- */
.sp-navy{position:relative;overflow:hidden;isolation:isolate;color:var(--on-navy);
  background:radial-gradient(130% 120% at 84% 6%,#123a54 0%,#0a2540 42%,#071627 100%)}
.sp-navy::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E")}
.sp-navy .sp-eyebrow{color:var(--teal-br)}
.sp-navy .sp-eyebrow::before{background:linear-gradient(90deg,var(--teal-br),transparent)}
.sp-atmos{position:absolute;inset:0;z-index:0;pointer-events:none}
.sp-aurora{position:absolute;width:680px;height:680px;right:-170px;top:-230px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,201,176,.3),transparent 62%);filter:blur(26px);
  animation:sp-breathe 17s ease-in-out infinite}
.sp-aurora::after{content:"";position:absolute;left:-40%;bottom:-60%;width:80%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(127,233,216,.18),transparent 64%);filter:blur(20px)}
.sp-current{position:absolute;inset:0;overflow:hidden}
.sp-current i{position:absolute;top:-30%;height:160%;width:1px;opacity:.45;
  background:linear-gradient(180deg,transparent,rgba(127,233,216,.55),transparent);animation:sp-flow 12s linear infinite}
.sp-current i:nth-child(1){left:18%}
.sp-current i:nth-child(2){left:46%;animation-duration:9s;animation-delay:-4s;opacity:.28}
.sp-current i:nth-child(3){left:74%;animation-duration:14s;animation-delay:-2s;opacity:.34}
@keyframes sp-breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.09)}}
@keyframes sp-flow{0%{transform:translateY(-40%)}100%{transform:translateY(40%)}}
.sp-fade-warm::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--bg))}
/* a raised navy panel used mid-page (e.g. the "always improving" band) */
.sp-anchor{position:relative;background:radial-gradient(120% 130% at 85% 8%,#123f5b,#0b2743 46%,#071627);
  color:var(--on-navy);border-radius:var(--r-xl);padding:clamp(32px,5vw,64px);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06) inset,0 0 60px -30px rgba(16,201,176,.5)}
.sp-anchor .sp-eyebrow{color:#5fd6c6}
.sp-anchor .sp-eyebrow::before{background:linear-gradient(90deg,#5fd6c6,transparent)}

/* ---------------------------------------------------------------
   10 · MOTION — engineered reveal, staggered children, parallax hooks
   --------------------------------------------------------------- */
.sp-reveal{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.sp-js .sp-reveal{opacity:0;transform:translateY(26px) scale(.99);filter:blur(2px)}
.sp-js .sp-reveal.is-in{opacity:1;transform:none;filter:none}
.sp-stagger > *{transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.sp-js .sp-stagger > *{opacity:0;transform:translateY(28px)}
.sp-js .sp-stagger.is-in > *{opacity:1;transform:none}
.sp-stagger.is-in > *:nth-child(1){transition-delay:.04s}
.sp-stagger.is-in > *:nth-child(2){transition-delay:.13s}
.sp-stagger.is-in > *:nth-child(3){transition-delay:.22s}
.sp-stagger.is-in > *:nth-child(4){transition-delay:.31s}
.sp-stagger.is-in > *:nth-child(5){transition-delay:.40s}
.sp-stagger.is-in > *:nth-child(6){transition-delay:.49s}
[data-parallax]{will-change:transform;transform:translate3d(0,var(--sp-para,0px),0)}

/* ---------------------------------------------------------------
   11 · ACCESSIBILITY — honour reduced motion everywhere
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sp-reveal,.sp-js .sp-reveal,.sp-js .sp-stagger > *{opacity:1!important;transform:none!important;filter:none!important}
  .sp-btn:hover,.sp-card--lift:hover{transform:none}
  [data-parallax]{transform:none!important}
  /* the mark resolves to a calm, complete waveform (no travelling beat) */
  .sp-mark__spark{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .sp-mark__halo{opacity:.26!important;transform:none!important}
  /* motion-language primitives resolve to their finished, legible state */
  .sp-think i,.sp-scan::after,.sp-skel,.sp-grow__bar,.sp-live__ring{animation:none!important}
  .sp-grow__bar{height:var(--h,60%)!important}
  .sp-scan::after{display:none!important}
}

/* ---------------------------------------------------------------
   12 · MOTION LANGUAGE — the living-software vocabulary
   One family of motions, all born from the heartbeat: teal energy, engineered
   easing, a beat that travels then rests. Each names a moment in the product so
   every surface speaks the same language. All are disabled / resolved above under
   reduced motion. Use them; don't reinvent per-page motion.
   --------------------------------------------------------------- */

/* THINKING — the intelligence is reasoning (Pulse, chat, generation). */
.sp-think{display:inline-flex;align-items:center;gap:5px}
.sp-think i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4;
  animation:sp-think 1.4s var(--ease) infinite}
.sp-think i:nth-child(2){animation-delay:.18s}
.sp-think i:nth-child(3){animation-delay:.36s}
@keyframes sp-think{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* SCANNING — reading a business / URL / page. A beam sweeps the surface once per cycle. */
.sp-scan{position:relative;overflow:hidden}
.sp-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--teal-br),transparent);
  box-shadow:0 0 18px 2px rgba(16,201,176,.5);
  animation:sp-scan 2.6s var(--ease) infinite}
@keyframes sp-scan{0%{transform:translateY(-2px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(2400%);opacity:0}}

/* BUILDING — content assembling. A skeleton shimmer for placeholders being filled. */
.sp-skel{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:8px}
.sp-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(127,233,216,.16),transparent);
  animation:sp-skel 1.5s var(--ease) infinite}
@keyframes sp-skel{100%{transform:translateX(100%)}}
/* pieces snapping into place (one-shot on reveal, reuses the .is-in hook) */
.sp-build > *{opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.sp-js .sp-build.is-in > *{opacity:1;transform:none}
.sp-build.is-in > *:nth-child(1){transition-delay:.05s}
.sp-build.is-in > *:nth-child(2){transition-delay:.14s}
.sp-build.is-in > *:nth-child(3){transition-delay:.23s}
.sp-build.is-in > *:nth-child(4){transition-delay:.32s}
.sp-build.is-in > *:nth-child(5){transition-delay:.41s}

/* GROWING — momentum, the business rising. Bars grow from the floor on reveal. */
.sp-grow{display:flex;align-items:flex-end;gap:6px;height:56px}
.sp-grow__bar{width:10px;border-radius:4px 4px 2px 2px;height:var(--h,60%);transform-origin:bottom;
  background:linear-gradient(180deg,var(--teal-br),var(--teal-deep))}
.sp-js .sp-grow .sp-grow__bar{transform:scaleY(.04);transition:transform .8s var(--ease-out)}
.sp-js .sp-grow.is-in .sp-grow__bar{transform:scaleY(1)}
.sp-grow.is-in .sp-grow__bar:nth-child(2){transition-delay:.08s}
.sp-grow.is-in .sp-grow__bar:nth-child(3){transition-delay:.16s}
.sp-grow.is-in .sp-grow__bar:nth-child(4){transition-delay:.24s}
.sp-grow.is-in .sp-grow__bar:nth-child(5){transition-delay:.32s}

/* PUBLISHING / LIVE — going live. A soft breathing ring around a live indicator. */
.sp-live{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--accent-ink)}
.sp-live__ring{position:relative;width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 40% 35%,#8ff0e2,var(--teal))}
.sp-live__ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--teal);
  opacity:0;animation:sp-live 2.4s var(--ease-out) infinite}
@keyframes sp-live{0%{opacity:.6;transform:scale(.7)}80%,100%{opacity:0;transform:scale(1.9)}}

/* IMPROVING / TRANSFORMING already live in the design system:
   improving = .sp-pulse__dot ping (advisor speaking); transforming = the
   before→after cards (.ba) revealing. The mark's travelling beat is the root of all. */