/* ==========================================================================
   ASSEMBLO — Redesign layer (2026)
   Loaded after styles.css + themes.css. Refines tokens, modernises chrome
   (glass nav, bento cards, gradient CTAs) and provides the styling hooks
   for the Motion One choreography in assets/js/motion-fx.js.
   Principles: transform/opacity-only motion, 150–400ms timing, springs,
   visible focus, 4.5:1 contrast, prefers-reduced-motion respected.
   ========================================================================== */

/* ---------- 1. Token refinements — deep petrol-teal canvas ---------------- */
:root {
  --bg: #041019;
  --ink: #06141d;
  --ink-2: #081a25;
  --navy: #0b2130;
  --navy-2: #0f2b3e;
  --slate: #15394e;
  --line: #1c465e;
  --bg-grad:
    radial-gradient(1100px 640px at 78% -12%, rgba(77, 124, 255, .18), transparent 62%),
    radial-gradient(820px 560px at -8% 6%, rgba(70, 227, 176, .08), transparent 55%),
    radial-gradient(700px 480px at 50% 110%, rgba(255, 181, 71, .07), transparent 60%),
    var(--bg);
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --glass: rgba(7, 26, 38, .62);
  --glass-brd: rgba(255, 255, 255, .10);
  --card-brd: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 38%, rgba(77, 124, 255, .12));
  --shadow: 0 24px 70px -28px rgba(1, 10, 18, .85);
  --shadow-glow: 0 0 0 1px rgba(77, 124, 255, .32), 0 24px 70px -20px rgba(77, 124, 255, .45);
  --ring: 0 0 0 3px rgba(111, 151, 255, .35);
  --ease-spring: linear(0, 0.0036 0.84%, 0.0185 1.96%, 0.077 4.1%, 0.1955 6.8%, 0.527 12.6%, 0.6595 15.3%, 0.77 18%, 0.8625 20.9%, 0.9355 24%, 0.9895 27.4%, 1.0265 31.3%, 1.0455 35.7%, 1.0455 40.5%, 1.0205 50.1%, 1.0035 60%, 0.997 70%, 1);
}
:root[data-theme="light"] {
  --bg: #edf5f7;
  --navy: #ffffff;
  --navy-2: #f2f9fa;
  --slate: #e4eff2;
  --line: #cfe2e8;
  --bg-grad:
    radial-gradient(1100px 640px at 80% -12%, rgba(77, 124, 255, .13), transparent 62%),
    radial-gradient(820px 560px at -8% 6%, rgba(70, 227, 176, .12), transparent 55%),
    var(--bg);
  --glass: rgba(255, 255, 255, .78);
  --glass-brd: rgba(10, 36, 48, .10);
  --card-brd: linear-gradient(160deg, rgba(10, 36, 48, .12), rgba(10, 36, 48, .04) 40%, rgba(77, 124, 255, .14));
  --shadow: 0 22px 60px -26px rgba(16, 52, 70, .32);
  --ring: 0 0 0 3px rgba(44, 84, 212, .25);
}
/* re-tint hardcoded navy surfaces to the teal ramp */
.dash { background: linear-gradient(170deg, #0e2a3c, #071825); }
:root[data-theme="light"] .dash { background: linear-gradient(170deg, #ffffff, #eef6f8); }
.media { background-image: linear-gradient(135deg, #0f3147 0%, #081c29 55%, #14323c 100%); }

/* Subtle engineering-grid texture over the canvas */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(110, 200, 220, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 200, 220, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 520px at 70% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(900px 520px at 70% 0%, #000 0%, transparent 75%);
}
:root[data-theme="light"] body::before { opacity: .8; }

/* Living aurora layer — slow, translate-only (no rotate/scale = no
   re-rasterisation), composited once and moved on the GPU. */
body::after {
  content: "";
  position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 26% 28%, rgba(77, 124, 255, .13), transparent 70%),
    radial-gradient(30% 26% at 74% 64%, rgba(70, 227, 176, .09), transparent 70%),
    radial-gradient(24% 22% at 58% 18%, rgba(255, 181, 71, .07), transparent 70%);
  animation: aurora 40s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-theme="light"] body::after { opacity: .65; }
@keyframes aurora {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(2.5%, -3%); }
  100% { transform: translate(-2.5%, 2.5%); }
}
/* Mobile GPUs: skip the decorative fixed layers entirely */
@media (max-width: 768px) {
  body::before, body::after { display: none; }
}

/* Blobs: the radial gradients are already soft — the original blur(70px)
   forced a huge re-raster every drift frame. Lighter blur + translate-only. */
.blob { filter: blur(26px); will-change: transform; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, -30px); }
}

/* ---------- 2. Scroll progress bar (set by motion-fx.js) ----------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--blue), var(--violet) 55%, var(--amber));
  z-index: 1200; pointer-events: none;
}

/* ---------- 3. Navbar — floating glass capsule when scrolled ------------- */
.nav { transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease); }
.nav.scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--glass-brd);
  box-shadow: 0 14px 40px -22px rgba(2, 6, 24, .8);
}
.nav-links a { position: relative; transition: color .2s var(--ease); }
.nav-links a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--blue-bright), var(--violet));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* ---------- 4. Buttons — gradient core, sheen sweep, press scale --------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--ease-out), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--blue-bright) -20%, var(--blue) 45%, var(--blue-deep) 120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -10px rgba(77, 124, 255, .55);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 40px -12px rgba(77, 124, 255, .7); }
.btn-amber {
  background: linear-gradient(135deg, #ffd08a -25%, var(--amber) 40%, var(--amber-deep) 115%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -10px rgba(255, 159, 28, .5);
}
.btn-amber:hover { transform: translateY(-2px); }
/* sheen sweep */
.btn-primary::after, .btn-amber::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
}
.btn-primary:hover::after, .btn-amber:hover::after { transform: translateX(120%); }
.btn-ghost { border: 1px solid var(--glass-brd); background: var(--surface); }
.btn-ghost:hover { border-color: rgba(111, 151, 255, .45); background: var(--surface-2); transform: translateY(-2px); }
.btn:focus-visible, .pill-btn:focus-visible { outline: none; box-shadow: var(--ring); }
/* arrow icons nudge toward the action on hover */
.btn svg, .card .arrow svg { transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.pill-btn { transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out); }
.pill-btn:active { transform: scale(.96); }

/* ---------- 5. Gradient text — animated sweep ----------------------------- */
.gradient-text {
  background: linear-gradient(100deg, var(--blue-bright) 0%, var(--violet) 30%, var(--amber) 55%, var(--blue-bright) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-sweep 9s linear infinite;
}
@keyframes grad-sweep { to { background-position: -220% 0; } }

/* ---------- 6. Cards — gradient border + pointer spotlight + lift -------- */
.card, .plan, .post-card, .form-card {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--card-brd) border-box;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .post-card,
:root[data-theme="light"] .form-card {
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    var(--card-brd) border-box;
}
/* pointer-tracking spotlight (–mx/–my set by motion-fx.js) */
.card::before, .plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), rgba(122, 160, 255, .14), transparent 65%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover::before, .plan:hover::before { opacity: 1; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan:hover { transform: translateY(-6px); }
.plan.popular {
  box-shadow: var(--shadow-glow);
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    linear-gradient(160deg, rgba(111, 151, 255, .65), rgba(167, 139, 250, .35) 50%, rgba(255, 181, 71, .45)) border-box;
}
.card .ic { transition: transform .35s var(--ease-spring, var(--ease-out)); }
.card:hover .ic { transform: translateY(-3px) scale(1.06) rotate(-3deg); }

/* ---------- 7. Hero -------------------------------------------------------- */
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); letter-spacing: -.028em; }
.hero .lead { max-width: 56ch; }
/* word-reveal masks injected by motion-fx.js */
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.w-mask .w { display: inline-block; will-change: transform; }
/* dashboard mock: glow ring + 3D tilt support */
.hero-visual { perspective: 1100px; }
.dash {
  transform-style: preserve-3d;
  transition: box-shadow .4s var(--ease);
  box-shadow: var(--shadow), 0 0 80px -30px rgba(77, 124, 255, .55);
}
.hero-visual:hover .dash { box-shadow: var(--shadow-glow), 0 0 110px -28px rgba(77, 124, 255, .7); }
.floating-card {
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  will-change: transform;
}

/* Skip layout/paint work for below-fold sections until they near the
   viewport — big first-render win on long pages. */
section:not(.hero):not(.page-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

/* ---------- 8. Marquee — edge fades + pause on hover ----------------------- */
.marquee {
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { transition: color .25s var(--ease); }
.marquee-track span:hover { color: var(--text); }

/* ---------- 9. Steps — connected progress line ---------------------------- */
.steps { position: relative; counter-reset: step; }
@media (min-width: 900px) {
  .steps::before {
    content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg, rgba(77, 124, 255, .5), rgba(167, 139, 250, .4) 50%, rgba(255, 181, 71, .45));
    opacity: .45;
  }
}
.step { position: relative; z-index: 1; }

/* ---------- 10. Stats band ------------------------------------------------- */
.stats-band {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    linear-gradient(160deg, rgba(111, 151, 255, .4), rgba(255, 255, 255, .05) 45%, rgba(255, 181, 71, .3)) border-box;
}
/* The stats band always has a fixed DARK fill (see .stats-band below), so the
   numbers must read as LIGHT in both themes. The old light-theme override
   darkened them → they vanished on the dark band. Brighter stops also lift the
   contrast of the lower half of each digit. */
.stat .num {
  background: linear-gradient(180deg, #ffffff, rgba(206, 218, 245, .92));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .stat .num {
  background: linear-gradient(180deg, #ffffff, rgba(206, 218, 245, .92));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 11. FAQ -------------------------------------------------------- */
.faq-item { transition: border-color .3s var(--ease), background .3s var(--ease); }
.faq-item.open { border-color: rgba(111, 151, 255, .4); background: var(--surface-2); }
.faq-a { transition: max-height .45s var(--ease-out); }

/* ---------- 12. CTA band --------------------------------------------------- */
.cta-band {
  border: 1px solid transparent;
  background:
    linear-gradient(150deg, var(--navy-2), var(--navy)) padding-box,
    linear-gradient(160deg, rgba(111, 151, 255, .55), rgba(167, 139, 250, .25) 50%, rgba(255, 181, 71, .5)) border-box;
  overflow: hidden;
}

/* ---------- 13. Footer / chat / misc polish -------------------------------- */
.footer-badges span { display: inline-flex; align-items: center; gap: 7px; }
.footer-badges svg { width: 14px; height: 14px; flex: none; opacity: .85; }
.socials a { transition: transform .25s var(--ease-out), color .25s var(--ease), border-color .25s var(--ease); }
.socials a:hover { transform: translateY(-3px); }
.chat-fab { transition: transform .3s var(--ease-spring, var(--ease-out)), box-shadow .3s var(--ease); }
.chat-fab:hover { transform: scale(1.08); }
.chat-fab:active { transform: scale(.95); }
.to-top { transition: transform .3s var(--ease-out), opacity .3s var(--ease), background .25s var(--ease); }
.to-top:hover { transform: translateY(-3px); }

/* ---------- 13b. Humanised labels ------------------------------------------
   Retire the robotic terminal look: no monospace, no shouty all-caps with
   wide tracking. Labels read like words, not machine output.             */
.kicker {
  font-family: var(--font-body);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
}
.dash-kpi .lbl, .acc-stat .lbl, .builder-bar .bld-count .l {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
}
.dash-bar .url, .breadcrumb, .post-card .meta, .chat-time, .dash-chart .ct span {
  font-family: var(--font-body);
}
.tag, .mod-badge, .save-tag {
  font-family: var(--font-body);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
}
.plan .tag-pop { letter-spacing: .01em; text-transform: none; font-size: .8rem; }
.footer-col h4 {
  font-size: .92rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  color: var(--text-soft);
}
.step::before { font-family: var(--font-display); letter-spacing: -.02em; }
.media::after { letter-spacing: .02em; text-transform: none; font-family: var(--font-body); }
.pill-tags span, .trust-cards span, .card-brand { font-family: var(--font-body); }

/* Off-canvas mobile menu: keep it out of the tab order / a11y tree when
   closed (it sits off-screen but was still focusable). */
.mobile-panel { visibility: hidden; transition: transform .4s var(--ease-out), visibility 0s .4s; }
.mobile-panel.open { visibility: visible; transition: transform .4s var(--ease-out), visibility 0s 0s; }

/* ---------- 14. Motion handoff --------------------------------------------
   When motion-fx.js takes over (html.motion-on), neutralise the legacy CSS
   reveal so WAAPI/Motion controls opacity & transform exclusively.        */
html.motion-on .reveal { opacity: 1; transform: none; transition: none; }

/* Kicker dot: soft heartbeat pulse */
.kicker::before { animation: kicker-pulse 2.6s ease-in-out infinite; }
@keyframes kicker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .7; }
}

/* Feature-list ticks pop in (initial state set by motion-fx.js) */
.feature-list .tick { transition: transform .3s var(--ease-spring, var(--ease-out)); }
.feature-list li:hover .tick { transform: scale(1.15); }

/* ---------- 15. Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
  .btn-primary::after, .btn-amber::after { display: none; }
  .scroll-progress { display: none; }
  .marquee-track { animation-duration: 60s; }
  body::after { animation: none; }
  .kicker::before { animation: none; }
}

/* ==========================================================================
   16. PREMIUM PASS (v3) — read like a category-leading company.
   Method: restraint + depth. Discipline the palette to a petrol-teal canvas,
   one confident blue, and a single amber "signal" accent (the active-module
   spark from the Assemblo logo). Cut the rainbow. Give surfaces real
   elevation. Tighten type. Loaded last → cascades to every page.
   ========================================================================== */
:root {
  /* Lift the card base a step above the canvas so surfaces read as elevated. */
  --navy:   #0c2536;
  --navy-2: #103247;
  /* Quieter, engineered border — light hairline at top, faint blue at base;
     no violet, so cards feel crafted rather than candy-coated. */
  --card-brd: linear-gradient(160deg, rgba(198,220,240,.22), rgba(198,220,240,.05) 42%, rgba(77,124,255,.16));
  /* Layered resting elevation (inset top-light + soft drop) = premium depth. */
  --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px -3px rgba(0,8,18,.55);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 52px -24px rgba(0,10,22,.8);
  --shadow: 0 28px 76px -32px rgba(0,10,22,.9);
}
:root[data-theme="light"] {
  --navy: #ffffff;
  --navy-2: #f4f8ff;
  /* Brighter, airier canvas — crisp white → soft blue, with restrained
     blue/violet/amber tints instead of the previous flat grey wash. */
  --bg: #f4f7fe;
  --bg-grad:
    radial-gradient(1100px 640px at 82% -10%, rgba(77,124,255,.10), transparent 60%),
    radial-gradient(820px 560px at -6% 4%, rgba(123,90,255,.055), transparent 55%),
    radial-gradient(760px 520px at 50% 114%, rgba(255,181,71,.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f3f6fe 46%, #eaf1fd 100%);
  --card-brd: linear-gradient(160deg, rgba(10,36,48,.14), rgba(10,36,48,.04) 42%, rgba(77,124,255,.16));
  --elev-1: 0 1px 2px rgba(16,52,70,.06), 0 1px 0 rgba(255,255,255,.8) inset;
  --elev-2: 0 20px 48px -26px rgba(16,52,70,.28);
}
/* The footer's base gradient is a dark overlay meant for dark mode; in light
   mode it muddied the canvas. Use a soft cool wash + clean hairline instead. */
:root[data-theme="light"] .footer {
  background: linear-gradient(180deg, transparent, rgba(90,120,200,.06));
  border-top-color: var(--line);
}
/* Darker footer in dark mode — a deliberate deep "base" band that sits clearly
   below the canvas and anchors the page. */
:root[data-theme="dark"] .footer,
html:not([data-theme="light"]) .footer {
  background: linear-gradient(180deg, rgba(2, 7, 13, .55), rgba(2, 7, 13, .92));
  border-top-color: rgba(255, 255, 255, .08);
}

/* Confident, disciplined headline — cool light→blue sheen, no rainbow, no
   sweep animation. The amber accent is reserved for the "signal" moments. */
.gradient-text {
  background: linear-gradient(96deg, #eaf1ff 0%, #a6c6ff 52%, var(--blue-bright) 100%);
  background-size: 100% 100%;
  /* Re-assert the text clip — the shorthand above resets background-clip. */
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: none;
}
:root[data-theme="light"] .gradient-text {
  background: linear-gradient(96deg, var(--blue) 0%, var(--blue-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Surfaces now sit above the canvas at rest, and lift with a deeper shadow. */
.card, .plan, .post-card, .form-card, .step, .faq-item, .mod-card,
.acc-stat, .acc-block, .pay-summary, .pay-form {
  box-shadow: var(--elev-1);
}
.card:hover, .post-card:hover { box-shadow: var(--elev-2); }
.card:hover .arrow { color: var(--blue-bright); }

/* Discipline every accent line to blue → amber (drop the violet middle). */
.scroll-progress { background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright) 62%, var(--amber)); }
.nav-links a::after { background: linear-gradient(90deg, var(--blue-bright), var(--blue)); }
.steps::before { background: linear-gradient(90deg, rgba(77,124,255,.55), rgba(77,124,255,.3) 62%, rgba(255,181,71,.42)); }
.plan.popular {
  background:
    linear-gradient(var(--navy), var(--navy)) padding-box,
    linear-gradient(160deg, rgba(111,151,255,.75), rgba(111,151,255,.28) 55%, rgba(255,181,71,.55)) border-box;
}
.stats-band {
  background:
    linear-gradient(160deg, #123a63, #0b2744 58%, var(--ink)) padding-box,
    linear-gradient(160deg, rgba(140,178,255,.5), rgba(255,255,255,.06) 48%, rgba(255,181,71,.4)) border-box;
}

/* CTA band — a bold, theme-INDEPENDENT closing moment. It must stay dark in
   both light & dark themes (its text is white), so its fill can never derive
   from --navy (which is white in light mode → invisible text). */
.cta-band {
  border: 1px solid transparent;
  background:
    radial-gradient(720px 360px at 85% -12%, rgba(255,181,71,.26), transparent 60%) padding-box,
    radial-gradient(640px 440px at 0% 114%, rgba(123,90,255,.42), transparent 58%) padding-box,
    linear-gradient(135deg, #132560 0%, #2148c4 50%, #522e93 100%) padding-box,
    linear-gradient(160deg, rgba(150,184,255,.6), rgba(255,255,255,.08) 46%, rgba(255,181,71,.55)) border-box;
  box-shadow: 0 34px 90px -40px rgba(33,72,196,.6);
}
:root[data-theme="light"] .cta-band { box-shadow: 0 30px 80px -42px rgba(33,72,196,.4); }

/* Tighten display type for a more engineered, high-end rhythm. */
.hero h1 { letter-spacing: -.034em; }
h2 { letter-spacing: -.03em; }
.section-head { margin-bottom: 60px; }
.lead { color: var(--text-soft); }

/* Marquee: quieter, uniform "trusted by" wordmarks (less placeholder-y). */
.marquee { padding: 26px 0; opacity: .9; }
.marquee-track span { font-size: 1.12rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text-dim); opacity: .55; }

/* Primary CTA: a hair more contrast + a crisper focus ring. */
.btn-primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 34px -12px rgba(77,124,255,.6); }

/* Amber "signal" — the one deliberate warm accent, echoing the logo's active
   module: kicker dot, KPI amber, floating AI-forecast card, popular tag. */
.dash-kpi .val.amber { text-shadow: 0 0 22px rgba(255,181,71,.35); }

/* ==========================================================================
   17. PRODUCT SCREEN MOCKUP (.erp-shot) — a realistic, big-company ERP screen
   rendered in pure HTML/CSS. No customer names. Used to showcase the product
   on marketing pages and as a frame for real app screenshots (<img>).
   ========================================================================== */
.erp-shot {
  border-radius: 16px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: #0a1c29;
  box-shadow: 0 40px 100px -40px rgba(0,10,22,.9), 0 0 90px -40px rgba(77,124,255,.5);
}
:root[data-theme="light"] .erp-shot { border-color: rgba(10,36,48,.12); box-shadow: 0 40px 90px -44px rgba(16,52,70,.4); }
/* Real app screenshots are 16:10 sources; present them in a 3:2 frame (a touch
   taller, classic ratio) with a minimal side crop so the header + KPI row stay
   fully in view. Only the two module-split shots have an <img>; the CSS-built
   showcase mock has none, so it's unaffected. */
.erp-shot img {
  width: 100%; height: auto;   /* height:auto overrides the height="1000" attr so aspect-ratio drives the box */
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
}
.erp-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  background: #071722; border-bottom: 1px solid rgba(255,255,255,.07); }
.erp-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #37475c; }
.erp-bar .dot.r { background: #ff5f57; } .erp-bar .dot.y { background: #febc2e; } .erp-bar .dot.g { background: #28c840; }
.erp-url { margin-left: 12px; font-size: .72rem; color: #7c93a8; background: rgba(255,255,255,.05);
  padding: 4px 12px; border-radius: 999px; letter-spacing: .01em; }

.erp-body { display: grid; grid-template-columns: 190px 1fr 232px; min-height: 470px; background: #0a1c29; }
.erp-side { background: #071824; border-right: 1px solid rgba(255,255,255,.06); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }
.erp-side .erp-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #eaf0ff; font-size: .95rem; padding: 4px 8px 14px; }
.erp-side .erp-brand i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(150deg, #4d7cff, #274bc4); display: inline-block; }
.erp-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: #93a7bd; font-size: .8rem; font-weight: 500; }
.erp-nav .ic { width: 15px; height: 15px; border-radius: 4px; background: currentColor; opacity: .55; flex: none; }
.erp-nav.on { background: rgba(77,124,255,.16); color: #cfe0ff; }
.erp-nav.on .ic { opacity: 1; background: #6f97ff; }
.erp-side .erp-sep { margin: 10px 8px 6px; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #4f647a; }

.erp-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.erp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.erp-top h4 { color: #eaf0ff; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.erp-top .erp-sub { color: #7c93a8; font-size: .72rem; margin-top: 2px; }
.erp-top .erp-search { flex: 1; max-width: 210px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; padding: 0 12px; color: #6a7f95; font-size: .72rem; }
.erp-top .erp-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(150deg,#ffb547,#ff9f1c); flex: none; }

.erp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.erp-kpi { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 11px 12px; }
.erp-kpi .l { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: #7c93a8; }
.erp-kpi .v { font-size: 1.15rem; font-weight: 700; color: #eaf0ff; margin-top: 4px; letter-spacing: -.02em; }
.erp-kpi .d { font-size: .64rem; margin-top: 2px; } .erp-kpi .d.up { color: #46e3b0; } .erp-kpi .d.dn { color: #ff8f8f; }
.erp-kpi .v.mint { color: #46e3b0; } .erp-kpi .v.amber { color: #ffb547; }

.erp-panels { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.erp-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 13px 14px; }
.erp-card .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.erp-card .hd b { color: #eaf0ff; font-size: .82rem; } .erp-card .hd span { color: #46e3b0; font-size: .68rem; }
.erp-bars { display: flex; align-items: flex-end; gap: 7px; height: 96px; }
.erp-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,#6f97ff,#274bc4); display: block; }
.erp-bars i.a { background: linear-gradient(180deg,#ffce85,#ff9f1c); }
.erp-donut { width: 96px; height: 96px; border-radius: 50%; margin: 4px auto 8px;
  background: conic-gradient(#4d7cff 0 62%, #46e3b0 62% 82%, #ffb547 82% 100%); position: relative; }
.erp-donut::after { content: "94%"; position: absolute; inset: 20px; border-radius: 50%; background: #0c2130;
  display: grid; place-items: center; color: #eaf0ff; font-size: .82rem; font-weight: 700; }
.erp-legend { display: flex; flex-direction: column; gap: 5px; }
.erp-legend span { display: flex; align-items: center; gap: 7px; font-size: .68rem; color: #93a7bd; }
.erp-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c,#4d7cff); }

.erp-table { width: 100%; border-collapse: collapse; }
.erp-table th { text-align: left; font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: #6a7f95; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 600; }
.erp-table td { font-size: .72rem; color: #b7c6d9; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.erp-table td b { color: #eaf0ff; font-weight: 600; }
.erp-badge { font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.erp-badge.ok { background: rgba(70,227,176,.16); color: #46e3b0; }
.erp-badge.run { background: rgba(77,124,255,.16); color: #8fb0ff; }
.erp-badge.warn { background: rgba(255,181,71,.16); color: #ffb547; }

.erp-ai { background: linear-gradient(180deg, rgba(77,124,255,.08), rgba(255,181,71,.04)); border-left: 1px solid rgba(255,255,255,.06); padding: 16px 14px; display: flex; flex-direction: column; gap: 11px; }
.erp-ai .aih { display: flex; align-items: center; gap: 8px; color: #eaf0ff; font-weight: 700; font-size: .82rem; }
.erp-ai .aih i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(150deg,#ffb547,#ff9f1c); flex: none; }
.erp-rec { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 10px 11px; }
.erp-rec .t { font-size: .7rem; color: #eaf0ff; font-weight: 600; margin-bottom: 3px; }
.erp-rec .s { font-size: .66rem; color: #93a7bd; line-height: 1.45; }
.erp-rec.amber { border-color: rgba(255,181,71,.3); background: rgba(255,181,71,.07); }

@media (max-width: 900px) {
  .erp-body { grid-template-columns: 1fr; }
  .erp-side, .erp-ai { display: none; }
  .erp-panels { grid-template-columns: 1fr; }
}


/* ==========================================================================
   18. INDUSTRIES SERVED — grouped chips, keyword-rich for SEO.
   ========================================================================== */
.ind-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.ind-cat { background: var(--navy); border: 1px solid transparent;
  background: linear-gradient(var(--navy), var(--navy)) padding-box, var(--card-brd) border-box;
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--elev-1, 0 2px 8px -3px rgba(0,8,18,.55)); }
.ind-cat h3 { font-size: 1.02rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; letter-spacing: -.01em; }
.ind-cat h3 .d { width: 9px; height: 9px; border-radius: 3px; background: var(--blue-bright); flex: none; box-shadow: 0 0 12px 1px currentColor; }
.ind-cat.c-amber h3 .d { background: var(--amber); } .ind-cat.c-mint h3 .d { background: var(--mint); }
.ind-cat.c-violet h3 .d { background: var(--violet); } .ind-cat.c-blue h3 .d { background: var(--blue-bright); }
.ind-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-list span { font-size: .84rem; color: var(--text-soft); background: var(--surface);
  border: 1px solid var(--glass-brd); padding: 7px 13px; border-radius: var(--r-pill); transition: color .2s, border-color .2s, transform .2s; cursor: default; }
.ind-list span:hover { color: var(--text); border-color: var(--blue); transform: translateY(-2px); }
.ind-regions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  text-align: center; background: linear-gradient(120deg, rgba(77,124,255,.08), rgba(255,181,71,.05));
  border: 1px solid var(--glass-brd); border-radius: var(--r-lg); padding: 20px 26px; }
.ind-regions b { color: var(--text); } .ind-regions .flags { font-size: 1.2rem; letter-spacing: 2px; }

/* ==========================================================================
   19. PERFORMANCE — features & modules felt janky mainly from continuous
   compositor work: the frosted nav re-rasterises its blurred backdrop every
   scroll frame, and the card pointer-spotlight repaints a large radial gradient
   on mousemove. These changes cut that cost WITHOUT changing what renders
   (content-visibility was trialled here but caused sections to blank, so it was
   removed). Card-dense pages like modules benefit most.
   ========================================================================== */
/* Smaller nav blur radius + no extra saturate pass = a cheaper per-frame
   backdrop while keeping the frosted look. */
.nav.scrolled {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Isolate each card so its hover repaints and the pointer-spotlight don't
   invalidate neighbours. `contain: layout style` limits recalc scope without
   creating compositor layers — safe even on the 30+ card modules grid.
   (Deliberately NOT using will-change here: on a large grid it would spawn a
   layer per card and hurt more than it helps.) */
.card, .plan { contain: layout style; }

/* ==========================================================================
   20. TEAM avatars — clean initial monograms instead of stock photos of
   strangers. Honest, on-brand, and zero extra network requests.
   ========================================================================== */
.team-avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.85rem;
  letter-spacing: .01em; color: #fff;
  background: linear-gradient(150deg, var(--blue), var(--blue-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -12px rgba(77,124,255,.7);
}
.team-avatar.amber  { color: #3a2600; background: linear-gradient(150deg, #ffc46b, #ff9f1c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px -12px rgba(255,159,28,.6); }
.team-avatar.mint   { background: linear-gradient(150deg, #56ecbe, #16a97e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 26px -12px rgba(22,169,126,.6); }
.team-avatar.violet { background: linear-gradient(150deg, #b49bff, #7c5cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 26px -12px rgba(124,92,255,.6); }


/* ==========================================================================
   Performance layer (added for smooth scrolling + fast rendering)
   - content-visibility skips layout/paint of off-screen sections, so long
     pages (features, modules) only composite ~1 viewport at a time. This is
     the single biggest scroll-smoothness + first-paint win.
   - contain-intrinsic-size gives a size estimate so the scrollbar stays
     stable before a section has been rendered once.
   ========================================================================== */
main > section:not(.hero):not(.page-hero),
body > section:not(.hero):not(.page-hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* While the user is actively scrolling, pause purely-decorative infinite
   animations (aurora, drifting blobs, marquee, kicker pulse). They're
   background motion nobody tracks mid-scroll, and pausing frees the
   compositor so the scroll itself stays at 60fps. Motion resumes ~140ms
   after scrolling stops. */
html.is-scrolling .aurora,
html.is-scrolling .blob,
html.is-scrolling .marquee-track,
html.is-scrolling .kicker::before,
html.is-scrolling .float-card {
  animation-play-state: paused !important;
}