/* ============================================================
   FLOW — Restaurant OS  ·  Design System
   ============================================================ */
:root {
  /* surfaces — deep purple-navy (Flow brand) */
  --bg:        #0a0812;
  --bg-2:      #0f0c1c;
  --bg-3:      #16122c;
  --surface:   rgba(255,255,255,0.028);
  --surface-2: rgba(255,255,255,0.05);
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);

  /* text */
  --text:   #f4f5f8;
  --muted:  #9a9ab8;
  --faint:  #62607d;

  /* accents — aligned to Flow brand-guidelines.md palette */
  --violet:  #8b5cf6;   /* brand purple (was #7c3aed) — matches gradient-purple in theme.scss */
  --violet-2:#a855f7;
  --cyan:    #6366f1;   /* indigo (kept name for compatibility) — bridges purple+blue */
  --cyan-2:  #818cf8;
  --pink:    #ec4899;   /* brand pink — matches gradient-pink */
  --pink-2:  #f472b6;
  --mint:    #14b8a6;   /* brand teal (was #2dd4bf) — matches gradient-teal */
  --grad:     linear-gradient(120deg, #a855f7 0%, #7c3aed 42%, #6366f1 100%);
  --grad-hot: linear-gradient(120deg, #ec4899 0%, #a855f7 100%);
  --grad-soft: linear-gradient(120deg, rgba(168,85,247,.18), rgba(99,102,241,.18));

  /* glows */
  --glow-violet: 0 0 60px rgba(124,58,237,.55);
  --glow-cyan:   0 0 60px rgba(99,102,241,.45);

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --ease: cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:var(--bg); }
body {
  background:transparent;
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  cursor:none;
}
@media (max-width:720px){ body{ cursor:auto; } }
::selection{ background:rgba(124,58,237,.45); color:#fff; }

/* ---- 3D world canvas + scrim ---- */
#bg3d{ position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block; opacity:1; pointer-events:none; }
.bg-scrim{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,8,18,.55) 0%, rgba(10,8,18,.12) 14%, rgba(10,8,18,.12) 88%, rgba(10,8,18,.62) 100%);
}

/* ---- drifting aurora background (GPU transforms only — no per-frame JS) ---- */
.aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora .orb{ position:absolute; border-radius:50%; filter:blur(74px); opacity:.32; will-change:transform; }
.orb.o1{ width:48vw; height:48vw; left:-10%; top:-12%; background:radial-gradient(circle,rgba(124,58,237,.6),transparent 68%); animation:orb1 28s ease-in-out infinite alternate; }
.orb.o2{ width:42vw; height:42vw; right:-12%; top:4%; background:radial-gradient(circle,rgba(99,102,241,.5),transparent 68%); animation:orb2 34s ease-in-out infinite alternate; }
.orb.o3{ width:52vw; height:52vw; left:6%; bottom:-22%; background:radial-gradient(circle,rgba(236,72,153,.42),transparent 68%); animation:orb3 31s ease-in-out infinite alternate; }
.orb.o4{ width:38vw; height:38vw; right:4%; bottom:-8%; background:radial-gradient(circle,rgba(124,58,237,.42),transparent 68%); animation:orb4 40s ease-in-out infinite alternate; }
@keyframes orb1{ to{ transform:translate(16vw,14vh) scale(1.18); } }
@keyframes orb2{ to{ transform:translate(-14vw,18vh) scale(1.12); } }
@keyframes orb3{ to{ transform:translate(12vw,-16vh) scale(1.2); } }
@keyframes orb4{ to{ transform:translate(-10vw,-12vh) scale(1.1); } }
@media (prefers-reduced-motion: reduce){ .aurora .orb{ animation:none; } }
body.no3d{ background:var(--bg); }
body.no3d::after{
  content:""; position:fixed; inset:-12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(36% 40% at 22% 16%, rgba(124,58,237,.30), transparent 60%),
    radial-gradient(34% 38% at 84% 26%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(44% 46% at 64% 104%, rgba(236,72,153,.16), transparent 60%),
    radial-gradient(40% 40% at 8% 84%, rgba(124,58,237,.14), transparent 60%);
  animation: bgdrift 30s ease-in-out infinite alternate;
}
@keyframes bgdrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(2.5%,-2%,0) scale(1.07); } }

/* ambient grid (subtle, centered) */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:70px 70px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 75%);
  opacity:.6;
}

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.02; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:2; }
.mono { font-family:var(--font-mono); }
.grad-text {
  background:var(--grad-hot); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================ CURSOR */
.cursor-dot, .cursor-ring {
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; mix-blend-mode:screen; will-change:transform; opacity:0;
}
.cursor-dot { width:7px; height:7px; background:var(--cyan-2); box-shadow:0 0 12px var(--cyan-2); transition:opacity .3s; }
.cursor-ring {
  width:38px; height:38px; border:1.5px solid rgba(168,85,247,.7);
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s, opacity .3s;
}
.cursor-ring.hot { width:64px; height:64px; border-color:rgba(129,140,248,.9); background:rgba(124,58,237,.12); }
.cursor-ring.press { width:26px; height:26px; border-color:rgba(129,140,248,1); background:rgba(129,140,248,.18); }
@media (max-width:720px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ============================================================ LOADER
   The loader's complete style block lives in the critical <style> in
   Flow.html's <head>, NOT here. Reason: when flow.css arrives over the
   network and re-declares `@keyframes rise`, Chrome restarts every
   running animation using that keyframe name (documented Blink
   behaviour, "animation restart on @keyframes redefinition"). That
   restart was visible as: F flies in → flickers/disappears → F
   restarts and the full "FLOW" animation plays again.

   Keeping the keyframe + `.loader-mark span` declarations in critical
   CSS ONLY (no duplicate here) means flow.css never re-declares the
   keyframe, so the animation that started during HTML parse runs to
   completion without interruption. */

/* ============================================================ NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; transition:padding .4s var(--ease), background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  padding:13px 32px; background:rgba(8,10,18,.72); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.logo{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.03em; }
.logo .glyph{ width:26px; height:26px; border-radius:8px; background:var(--grad); box-shadow:var(--glow-violet); position:relative; overflow:hidden; }
.logo .glyph::before{ content:""; position:absolute; inset:0; z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 8c3-3 6-3 9 0s6 3 9 0'/%3E%3Cpath d='M3 13c3-3 6-3 9 0s6 3 9 0'/%3E%3Cpath d='M3 18c3-3 6-3 9 0s6 3 9 0'/%3E%3C/g%3E%3C/svg%3E") center/72% no-repeat; }
.logo .glyph::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%); transform:translateX(-120%); animation:sheen 4s var(--ease) infinite; }
@keyframes sheen{ 0%,60%{transform:translateX(-120%);} 80%,100%{transform:translateX(120%);} }
/* nav-links is absolutely positioned at viewport center so it sits at
   the page midpoint, not the visual midpoint between logo + nav-cta
   (which is off-axis whenever the right cluster is wider than the
   logo, as it usually is). pointer-events stay on the children so the
   wrapper's bounding box doesn't block clicks on what's behind it. */
.nav-links{
  display:flex; gap:6px; align-items:center;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
.nav-links > *{ pointer-events:auto; }
.nav-links a{ font-size:14.5px; color:var(--muted); padding:9px 15px; border-radius:9px; transition:color .25s, background .25s; }
.nav-links a:hover{ color:var(--text); background:var(--surface-2); }
/* Right-side CTAs grouped together so they don't break `space-between` */
.nav-cta{ display:flex; gap:10px; align-items:center; }
/* In the nav specifically, scale the CTAs down a notch — they were
   competing with the section links for visual weight. */
nav .nav-cta .btn{ padding:8px 16px; font-size:13.5px; }
nav .nav-cta .btn .arrow{ font-size:14px; }

/* Language picker — a slim glassy button with a popover. EN is a forward
   link to /login?lang=en since the landing iframe is BG-only for now. */
.nav-lang{ position:relative; }
/* Outlined icon-only button — mirrors LanguageSwitcher's `variant="outlined"`
   on flow-web (p-2 rounded-lg bg-white/5 border border-white/15). */
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  /* `cursor:none` so the OS pointer doesn't surface over the
     translation trigger — the landing hides the OS cursor globally
     via `body { cursor:none }` and renders the custom dot+ring
     instead. `<button>` defaults to `cursor:pointer` per UA stylesheet
     so the explicit override is required. */
  width:38px; height:38px; padding:0; border-radius:8px; cursor:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.6);
  transition:color .25s, background .25s;
}
.lang-btn:hover{ color:#c084fc; background:rgba(255,255,255,.1); }
.lang-btn svg{ width:20px; height:20px; }
/* Panel mirrors the React component: ~256px wide, glass-card-dark bg,
   header row + language list, soft purple drop shadow + white border ring
   on hover (the `.flow-glow-frame` analogue, inlined since the iframe
   can't pull in theme.scss).

   `--glow-radius` is 140px to match the React `LanguageSwitcher`'s
   `--glow-radius` override (apps/flow-web/packages/flow-frontend-shared/
   src/components/LanguageSwitcher.tsx) so both 256px-wide dropdowns
   render an identical cursor-tracked ring. If you re-tune one, retune
   the other. */
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; width:256px;
  padding:0; background:rgb(30,30,50);
  border:1px solid rgba(255,255,255,.2); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  display:none; opacity:0; transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:1000;
  isolation:isolate;
}
.lang-menu::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.5px; pointer-events:none;
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),
    #a855f7, #818cf8 42%, transparent 66%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .4s ease; z-index:3;
}
.lang-menu:hover::after, .lang-menu:focus-within::after{ opacity:.9; }
.lang-menu, .lang-menu *{ cursor:none; }
.nav-lang.open .lang-menu{ display:block; opacity:1; transform:translateY(0); }
.lang-menu .lang-head{
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff; font-family:var(--font-body); font-size:14px; font-weight:500;
}
.lang-menu .lang-list{ padding:8px; display:flex; flex-direction:column; gap:4px; }
.lang-menu a{
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-radius:8px;
  color:rgba(255,255,255,.8); font-family:var(--font-body); font-size:14px;
  text-decoration:none; transition:background .2s, color .2s;
}
.lang-menu a:hover{ background:rgba(255,255,255,.1); color:#fff; }
.lang-menu a.active{ color:#fff; background:rgba(255,255,255,.1); }
.lang-menu a .lang-opt-l{ display:inline-flex; align-items:center; gap:10px; }
.lang-menu a .lang-opt-icon{ width:16px; height:16px; color:rgba(255,255,255,.55); flex:0 0 16px; }
.lang-menu a.active .lang-opt-icon{ color:#c084fc; }
.lang-menu a .check{
  margin-left:auto; width:16px; height:16px; color:#c084fc; opacity:0;
}
.lang-menu a.active .check{ opacity:1; }
@media (max-width:880px){ .nav-lang{ display:none; } }

/* ============================================================ I18N
   Translatable strings are tagged with `data-t="key"`. flow.js fetches
   /landing/i18n.json on boot and writes each element's textContent on
   language change. Default text in HTML is Bulgarian so the iframe
   paints fully before the fetch resolves (no flash of empty strings).
   Adding a language: drop a third top-level locale into i18n.json —
   no HTML or CSS edits required. */
/* ============================================================ NAV BURGER
   Hamburger trigger — visible only at ≤880px. Outlined icon button
   mirroring the .lang-btn shape so the right cluster reads as a
   consistent toolbar across screen sizes.

   IMPORTANT: this base block must sit BEFORE the @media (max-width:880px)
   rule below. CSS cascade resolves equal specificity by source order,
   so an unconditional `display:none` defined AFTER a media-query
   `display:inline-flex` will defeat it at every viewport. Move with care. */
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:8px; cursor:none;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
  transition:color .25s, background .25s;
}
.nav-burger:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav-burger svg{ width:20px; height:20px; }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  /* Primary Contact CTA lives inside the hamburger menu on phone; no
     reason to duplicate it in the top bar where it crowds the burger. */
  .nav-cta > .btn-primary{ display:none; }
  .nav-burger{ display:inline-flex; }
}

/* ============================================================ MOBILE NAV
   Slides down from below the nav bar. Backdrop dims the page; panel
   itself uses the same dark glass + border-glow vocabulary as the
   language dropdown so it reads as part of the brand system. */
#mobile-nav{
  position:fixed; inset:0; z-index:850;
  display:none; pointer-events:none;
  background:rgba(8,10,18,.65); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s var(--ease);
}
body.mobile-nav-open #mobile-nav{
  display:block; pointer-events:auto; opacity:1;
}
.mn-panel{
  position:absolute; top:74px; left:16px; right:16px;
  background:rgb(30,30,50);
  border:1px solid rgba(255,255,255,.2); border-radius:14px;
  padding:8px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform:translateY(-8px); opacity:0;
  transition:transform .26s var(--ease), opacity .22s var(--ease);
  isolation:isolate;
}
body.mobile-nav-open .mn-panel{ transform:translateY(0); opacity:1; }
/* Same masked border-ring glow the lang dropdown uses. Static (no
   cursor tracking) on touch surfaces. */
.mn-panel::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1.5px; pointer-events:none;
  background:radial-gradient(380px circle at 50% 30%, #a855f7, #818cf8 42%, transparent 66%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.55; z-index:3;
}
.mn-panel a, .mn-panel button{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:10px;
  font-family:var(--font-body); font-size:15px;
  color:rgba(255,255,255,.85); text-decoration:none;
  background:transparent; border:none; text-align:left;
  transition:background .2s, color .2s;
}
.mn-panel a:hover, .mn-panel button:hover{
  background:rgba(255,255,255,.06); color:#fff;
}
.mn-panel hr{
  border:none; border-top:1px solid rgba(255,255,255,.08);
  margin:6px 4px;
}
.mn-panel .btn-primary{
  background:var(--grad); color:#fff;
  font-weight:600; justify-content:center; padding:13px 16px;
  margin:4px 0;
}
/* In-panel language dropdown — single row that toggles a nested list,
   matching the same dark-glass language picker pattern the desktop top
   bar uses (just collapsed vertically inside the menu instead of
   floating below a trigger button). */
.mn-lang-drop{ padding:0 4px; }
.mn-lang-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.9); font-family:var(--font-body); font-size:15px;
  transition:background .2s, border-color .2s;
}
.mn-lang-trigger:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.mn-lang-trigger-l{ display:inline-flex; align-items:center; gap:10px; }
.mn-lang-icon{ width:16px; height:16px; color:rgba(255,255,255,.55); flex:0 0 16px; }
.mn-lang-opt.active .mn-lang-icon,
.mn-lang-trigger .mn-lang-icon{ color:#c084fc; }
.mn-lang-caret{
  width:16px; height:16px; transition:transform .2s var(--ease);
}
.mn-lang-drop.open .mn-lang-caret{ transform:rotate(180deg); }
.mn-lang-options{
  display:none; flex-direction:column; gap:2px;
  margin-top:6px; padding:4px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
}
.mn-lang-drop.open .mn-lang-options{ display:flex; }
.mn-lang-opt{
  width:100%; text-align:left;
  padding:10px 12px; border-radius:8px;
  background:transparent; border:none;
  color:rgba(255,255,255,.8); font-family:var(--font-body); font-size:14.5px;
  transition:background .2s, color .2s;
}
.mn-lang-opt{
  display:flex; align-items:center; gap:10px;
}
.mn-lang-opt:hover{ background:rgba(255,255,255,.06); color:#fff; }
.mn-lang-opt.active{
  background:rgba(168,85,247,.15); color:#fff;
}

/* ============================================================ BUTTONS */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:12px; border:none; cursor:none;
  display:inline-flex; align-items:center; gap:9px; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-primary{ color:#fff; background:var(--grad); background-size:160% 160%; box-shadow:0 8px 30px rgba(124,58,237,.4); }
/* When the contact modal is open we suspend the magnetic / hover transforms
   on every CTA — otherwise the button the user just clicked stays offset
   from its rest position behind the backdrop blur and reads as a ghost. */
body.modal-open .btn,
body.modal-open .btn:hover{
  transform:none !important;
  animation:none !important;
  box-shadow:0 8px 30px rgba(124,58,237,.3);
}
/* Kill in-flight ripples too. The ripple span animates from scale(0) to
   scale(1), and when the modal opens that growing white-radial blob shows
   through the backdrop blur as a fuzzy "expanding" smear behind the modal.
   Hiding any active or future ripples while the modal is open removes it. */
body.modal-open .ripple{ display:none !important; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 44px rgba(124,58,237,.6); animation:gradShift 3s ease infinite; }
@keyframes gradShift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.btn-ghost{ color:var(--text); background:var(--surface-2); border:1px solid var(--border-2); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--border-2); background:rgba(255,255,255,.08); }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ============================================================ HERO */
#hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:90px; }
#hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,6,10,.94) 0%, rgba(5,6,10,.88) 30%, rgba(5,6,10,.45) 48%, rgba(5,6,10,.12) 60%, transparent 70%); }
#hero-canvas{ position:absolute; inset:0; z-index:1; opacity:.9; }
.hero-glow{ position:absolute; z-index:0; border-radius:50%; filter:blur(90px); }
.hero-inner{ position:relative; z-index:3; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; width:100%; }
@media (max-width:980px){ .hero-inner{ grid-template-columns:1fr; gap:40px; } }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-2); padding:8px 16px; border:1px solid var(--border); border-radius:100px; background:var(--surface); margin-bottom:26px; white-space:nowrap; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

h1.hero-title{ font-size:clamp(44px,6.4vw,92px); font-weight:700; line-height:1.06; letter-spacing:-.035em; }
.hero-sub{ font-size:clamp(17px,1.5vw,21px); color:var(--muted); max-width:30ch; margin:26px 0 34px; line-height:1.55; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-meta{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; }
.hero-meta .m{ display:flex; flex-direction:column; gap:3px; }
.hero-meta .m b{ font-family:var(--font-display); font-size:26px; font-weight:700; }
.hero-meta .m span{ font-size:13px; color:var(--faint); font-family:var(--font-mono); letter-spacing:.05em; }

/* reveal words */
.reveal-line{ display:block; }
.reveal-line > span{ display:inline-block; }
.hero-text.in .reveal-line:nth-child(1) > span{ animation-delay:.05s; }
.hero-text.in .reveal-line:nth-child(2) > span{ animation-delay:.16s; }
.hero-text.in .reveal-line:nth-child(3) > span{ animation-delay:.27s; }
@keyframes lineRise{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }

/* floating dashboard preview */
.hero-card{ position:relative; }
/* `.glass` is used on cards that often sit on top of 3D-transformed parents
   (the layered fly-through). `backdrop-filter` inside a 3D transform forces
   a fuzzy compositing path — the surface reads "softened" until the camera
   sits exactly on its focal point, which made the hero card look out of
   focus until the user scrolled to the right spot. We drop the backdrop
   blur entirely (the gradient bg is already near-opaque) and force a 2D
   composited layer with `translateZ(0)` so text rasterises crisply. */
.glass{
  background:linear-gradient(160deg, rgba(20,24,38,.96), rgba(10,12,22,.95));
  border:1px solid var(--border-2); border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateZ(0);
  -webkit-font-smoothing:subpixel-antialiased;
}
.preview-window{ overflow:hidden; transform:translateZ(0); }
/* Hero preview wrapper — make sure the whole stack composites in 2D so the
   floating card reads crisp regardless of where the WebGL camera sits. */
.l-herocard{ transform:translateZ(0); will-change:transform; }
.l-herocard .preview-window,
.l-herocard .preview-window *{ transform:translateZ(0); }
.pw-bar{ display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--border); }
.pw-bar i{ width:11px; height:11px; border-radius:50%; background:var(--border-2); }
.pw-bar .title{ margin-left:8px; font-family:var(--font-mono); font-size:12px; color:var(--faint); }
.pw-body{ padding:18px; display:grid; gap:14px; }

/* mini KPI row */
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 13px; }
.kpi label{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }
.kpi b{ display:block; font-family:var(--font-display); font-size:23px; margin-top:5px; font-weight:600; }
.kpi .trend{ font-size:11px; color:var(--mint); font-family:var(--font-mono); }
.kpi .trend.down{ color:#f87171; }

.chart-box{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; }
.chart-box .ch-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.chart-box .ch-head span{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
canvas.line-chart{ width:100%; height:90px; display:block; }

.float-tag{ position:absolute; background:rgba(8,10,18,.96); border:1px solid var(--border-2); border-radius:12px; padding:10px 14px; box-shadow:0 12px 40px rgba(0,0,0,.5); transform:translate3d(0,var(--py,0),0); display:flex; align-items:center; gap:10px; font-size:13px; will-change:transform; }
/* Small "вход" link sitting under the hero CTA pair — a low-weight secondary
   option for returning customers without competing with the primary contact
   CTA next to it. */
.hero-trust, .cta-trust{
  font-family:var(--font-mono); font-size:11.5px;
  color:var(--cyan-2); letter-spacing:.04em;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.hero-trust{ margin-top:18px; }
.cta-trust{ margin-top:18px; justify-content:center; }
.hero-login-hint{ margin-top:12px; font-size:13px; color:var(--faint); }
.hero-login-hint a{ color:var(--cyan-2); transition:color .2s; }
.hero-login-hint a:hover{ color:var(--violet-2); }
.float-tag .ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--grad-soft); }
.float-tag b{ font-weight:600; }
.float-tag small{ display:block; color:var(--faint); font-family:var(--font-mono); font-size:10.5px; }

/* ============================================================ SECTION SHELL */
section.block{ position:relative; padding:130px 0; z-index:2;
  background:linear-gradient(180deg, transparent 0%, rgba(6,8,14,.93) 13%, rgba(6,8,14,.93) 87%, transparent 100%);
}
.sec-head{ max-width:680px; margin-bottom:64px; }
.sec-tag{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan-2); display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.sec-tag::before{ content:""; width:34px; height:1px; background:var(--cyan); }
.sec-head h2{ font-size:clamp(34px,4.6vw,60px); font-weight:700; letter-spacing:-.03em; }
.sec-head p{ color:var(--muted); font-size:18px; margin-top:20px; max-width:54ch; }

/* reveal-on-scroll */
.ru{ }
/* content is present by default — motion is continuous 3D depth-parallax (driven by JS),
   not a scroll-triggered slide-up. Tiles sit in a shared perspective and emerge from depth. */
[data-fly]{ transform-style:preserve-3d; }
.bento, .feat-grid, .price-grid, .stats{ perspective:1500px; perspective-origin:50% 46%; transform-style:preserve-3d; }
.bento .cell, .feat-grid .tilt, .price-grid .plan, .stats .stat{ will-change:transform,opacity; backface-visibility:hidden; }
.ru.in{ opacity:1; transform:none; }
.ru[data-d="1"]{ transition-delay:.08s; }
.ru[data-d="2"]{ transition-delay:.16s; }
.ru[data-d="3"]{ transition-delay:.24s; }
.ru[data-d="4"]{ transition-delay:.32s; }

/* ============================================================ MARQUEE */
.marquee{ overflow:hidden; padding:34px 0; position:relative; z-index:2; background:rgba(6,8,14,.92); border-top:1px solid var(--border); border-bottom:1px solid var(--border); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee .track{ display:flex; gap:64px; width:max-content; animation:scrollx 28s linear infinite; }
.marquee .track span{ font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--faint); display:flex; align-items:center; gap:14px; }
.marquee .track span::after{ content:"●"; color:var(--violet); font-size:8px; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================ BENTO */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.cell{ position:relative; border:1px solid var(--border); border-radius:18px; background:var(--surface); padding:26px; overflow:hidden; transition:border-color .4s; }
.cell::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(124,58,237,.16), transparent 45%); pointer-events:none; }
.cell:hover{ border-color:var(--border-2); }
.cell:hover::before{ opacity:1; }
.cell::after, .feat::after{ content:""; position:absolute; inset:0; border-radius:18px; padding:1.5px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--violet-2), var(--cyan-2) 42%, transparent 66%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cell:hover::after{ opacity:.9; }
.feat{ position:relative; overflow:hidden; }
.tilt:hover .feat::after{ opacity:.9; }
.cell .ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--border); margin-bottom:18px; }
.cell h3{ font-size:21px; margin-bottom:9px; }
.cell p{ color:var(--muted); font-size:15px; line-height:1.55; }
.cell .meta{ font-family:var(--font-mono); font-size:11px; color:var(--faint); letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.col-4{ grid-column:span 4; } .col-6{ grid-column:span 6; } .col-8{ grid-column:span 8; } .col-12{ grid-column:span 12; }
@media (max-width:900px){ .col-4,.col-6,.col-8{ grid-column:span 12; } }

/* mini stock bars inside a wide cell */
.stockbars{ display:flex; align-items:flex-end; gap:7px; height:74px; margin-top:18px; }
.stockbars i{ flex:1; height:100%; background:var(--grad); border-radius:5px 5px 0 0; opacity:.85; transform-origin:bottom; transform:scaleY(.15); transition:transform 1s var(--ease); }
.in .stockbars i{ transform:scaleY(var(--h,.5)); }

/* feature tilt cards */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr; } }
.tilt{ transform-style:preserve-3d; transition:transform .15s ease; will-change:transform; }
.feat{ padding:30px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.005)); }
.feat .badge{ font-family:var(--font-mono); font-size:11px; color:var(--cyan-2); letter-spacing:.1em; transform:translateZ(40px); }
.feat h3{ font-size:24px; margin:14px 0 12px; transform:translateZ(30px); }
.feat p{ color:var(--muted); font-size:15px; transform:translateZ(20px); }

/* ============================================================ DASHBOARD SHOWCASE (ContainerScroll tilt) */
.showcase{ position:relative; }
.cscroll{ position:relative; perspective:1300px; padding:10px 0 70px; }
.cs-spot{ position:absolute; top:-4%; left:50%; transform:translateX(-50%); width:72%; height:55%; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, rgba(124,58,237,.24), rgba(99,102,241,.10) 45%, transparent 72%); filter:blur(34px); }
#dash-app{ transform-style:preserve-3d; transform-origin:50% 50%; will-change:transform; position:relative; z-index:1; }
.pin-wrap{ position:sticky; top:0; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.dash{ width:100%; }
.dash-grid{ display:grid; grid-template-columns:230px 1fr; gap:0; border-radius:20px; overflow:hidden; min-height:560px; }
@media (max-width:900px){ .dash-grid{ grid-template-columns:1fr; } }
.dash-side{ background:var(--bg-3); border-right:1px solid var(--border); padding:22px 16px; display:flex; flex-direction:column; gap:5px; }
.dash-side .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:18px; margin-bottom:22px; padding:0 8px; }
.dash-side .navi{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; color:var(--muted); font-size:14px; cursor:none; transition:.2s; }
.dash-side .navi:hover{ background:var(--surface-2); color:var(--text); }
.dash-side .navi.active{ background:var(--grad-soft); color:var(--text); border:1px solid var(--border); }
.dash-side .navi .d{ width:8px; height:8px; border-radius:3px; background:var(--faint); }
.dash-side .navi.active .d{ background:var(--cyan-2); box-shadow:0 0 8px var(--cyan-2); }
.dash-main{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); padding:26px; }
.dash-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.dash-top h4{ font-size:22px; }
.dash-top .who{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.dash-top .who .av{ width:32px; height:32px; border-radius:50%; background:var(--grad); }
.dash-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
@media (max-width:760px){ .dash-kpis{ grid-template-columns:repeat(2,1fr); } }
.dash-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
@media (max-width:760px){ .dash-2{ grid-template-columns:1fr; } }
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.panel .ph{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel .ph h5{ font-family:var(--font-display); font-size:15px; font-weight:600; }
.panel .ph .pill{ font-family:var(--font-mono); font-size:10.5px; color:var(--cyan-2); padding:3px 9px; border:1px solid var(--border); border-radius:100px; }
canvas.big-chart{ width:100%; height:200px; display:block; }
.order-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.order-row:last-child{ border-bottom:none; }
.order-row .t{ display:flex; align-items:center; gap:11px; }
.order-row .num{ font-family:var(--font-mono); color:var(--faint); font-size:12px; }
.tag{ font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:100px; }
.tag.live{ background:rgba(52,211,153,.14); color:var(--mint); }
.tag.prep{ background:rgba(129,140,248,.14); color:var(--cyan-2); }
.tag.wait{ background:rgba(168,85,247,.14); color:var(--violet-2); }

/* ============================================================ STATS */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat b{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.5vw,72px); display:block; line-height:1; }
/* Word-based stat values (e.g. "Всичко", "Всеки") render noticeably smaller
   than numeric/symbolic ones — a 6-letter word at the numeric size floods
   the tile and reads heavier than ∞ / 24/7 next to it. */
.stat b.word{ font-size:clamp(22px,2.8vw,38px); letter-spacing:-.015em; line-height:1.1; }
.stat > span{ color:var(--muted); font-size:14px; font-family:var(--font-mono); letter-spacing:.05em; margin-top:10px; display:block; }
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat .sic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; border:1px solid var(--border); }
.stat .sic svg{ width:22px; height:22px; }
.sic.v{ background:rgba(124,58,237,.16); color:var(--violet-2); }
.sic.i{ background:rgba(99,102,241,.16); color:var(--cyan-2); }
.sic.p{ background:rgba(236,72,153,.16); color:var(--pink-2); }
.sic.t{ background:rgba(45,212,191,.16); color:var(--mint); }

/* ============================================================ PRICING */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
@media (max-width:900px){ .price-grid{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--border); border-radius:20px; padding:32px; background:var(--surface); display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s; }
.plan:hover{ transform:translateY(-6px); border-color:var(--border-2); }
.plan.feat-plan{ border-color:transparent; background:linear-gradient(160deg,rgba(124,58,237,.14),rgba(99,102,241,.08)); box-shadow:0 20px 60px rgba(124,58,237,.25); position:relative; }
.plan.feat-plan::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.plan .pname{ font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-2); }
.plan .pprice{ font-family:var(--font-display); font-size:52px; font-weight:700; margin:14px 0 4px; }
.plan .pprice small{ font-size:16px; color:var(--faint); font-weight:400; font-family:var(--font-mono); }
.plan .pdesc{ color:var(--muted); font-size:14px; margin-bottom:22px; }
.plan ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:26px; flex:1; }
.plan li{ font-size:14.5px; color:var(--text); display:flex; gap:11px; align-items:flex-start; }
.plan li::before{ content:"→"; color:var(--cyan-2); }
.badge-pop{ position:absolute; top:-12px; right:24px; background:var(--grad); color:#fff; font-family:var(--font-mono); font-size:11px; padding:5px 12px; border-radius:100px; letter-spacing:.05em; }

/* ============================================================ CTA + FOOTER */
.cta-final{ text-align:center; padding:140px 0; position:relative; }
.cta-final::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(58% 72% at 50% 50%, rgba(5,6,10,.85), rgba(5,6,10,.4) 45%, transparent 72%); }
.cta-final h2{ font-size:clamp(40px,6.5vw,96px); font-weight:700; letter-spacing:-.04em; line-height:.98; }
.cta-final p{ color:var(--muted); font-size:19px; margin:24px auto 38px; max-width:46ch; }
footer{ border-top:1px solid var(--border); padding:60px 0 50px; position:relative; z-index:2; background:rgba(6,8,14,.93); }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-grid .col h6{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.foot-grid .col a{ display:block; color:var(--muted); font-size:14.5px; padding:5px 0; transition:color .2s; }
.foot-grid .col a:hover{ color:var(--text); }
.foot-bottom{ margin-top:50px; padding-top:26px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faint); font-family:var(--font-mono); flex-wrap:wrap; gap:14px; }

/* Right-side scroll-progress rail — a thin vertical track with a glowing
   thumb at the leading edge of the fill. The fill is the trail (where the
   user has been); the thumb (rendered as the `.side-fill::after` dot) marks
   the current position so you can see "I'm here" at a glance. Pure CSS —
   the JS only needs to update one height value, the dot rides along for
   free.

   `overflow:visible` on the track lets the dot glow extend past the edges
   without being clipped. The track itself is narrowed to 2px so the dot
   reads as the main element, not a thick bar. */
/* Hide the OS scrollbar — the right-side .side-rail is the landing's
   scroll-position indicator + scrubber, so the native scrollbar is
   redundant chrome (and reads as off-brand white-on-dark in most
   browsers). Scroll still works via wheel / arrows / rail drag. */
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ scrollbar-width:none; -ms-overflow-style:none; }
body::-webkit-scrollbar{ display:none; width:0; height:0; }

.side-rail{
  position:fixed; right:18px; top:14%; bottom:14%; width:2px; z-index:800;
  background:rgba(255,255,255,.05); border-radius:2px; overflow:visible;
  /* Rail is grabbable — pointerdown anywhere along the track (or the
     widened invisible hit zone below) scrubs the camera + page scroll
     1:1 with the cursor. `touch-action:none` keeps the browser from
     hijacking the drag for native page scroll. */
  cursor:grab; touch-action:none;
}
.side-rail.is-dragging{ cursor:grabbing; }
.side-rail::before{
  /* faint inner-line so the track is visible even where the fill hasn't
     reached yet — without this the empty section reads almost invisible
     on the WebGL backdrop */
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  pointer-events:none;
}
.side-rail::after{
  /* Invisible widened hit area so the user doesn't have to land
     pixel-perfect on the 2px-wide visible track. Extends LEFT only —
     the rail itself sits at `right:18px`, so extending right would
     push past the viewport edge and trigger a horizontal scrollbar
     (the "white scroll" the user saw on the first cut). Top/bottom
     extend symmetrically so you can grab a few px above/below the
     track too. Events bubble to .side-rail. */
  content:""; position:absolute;
  top:-10px; bottom:-10px;
  right:0; left:-22px;
  background:transparent;
}
.side-rail .side-fill{
  display:block; position:relative; width:100%; height:0%;
  background:var(--grad); border-radius:2px;
  box-shadow:0 0 10px rgba(139,92,246,.5);
  transition:height .12s linear;
}
/* Glowing thumb riding the leading edge of the fill. Sized so it's
   obviously the focal element next to the slim 2px track. */
.side-rail .side-fill::after{
  content:""; position:absolute; left:50%; bottom:-5px;
  width:11px; height:11px; border-radius:50%;
  transform:translateX(-50%);
  background:var(--grad);
  box-shadow:
    0 0 0 2px rgba(10,8,18,.9),
    0 0 14px rgba(168,85,247,.85),
    0 0 26px rgba(139,92,246,.55);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* Resting hover — dot blooms a touch so the rail telegraphs "grab me"
   before the user commits to a drag. */
.side-rail:hover .side-fill::after{
  transform:translateX(-50%) scale(1.18);
  box-shadow:
    0 0 0 2px rgba(10,8,18,.95),
    0 0 18px rgba(168,85,247,.95),
    0 0 30px rgba(139,92,246,.65);
}
/* Active drag — dot inflates further so the user feels they've grabbed
   something tangible. Pairs with the grabbing cursor. */
.side-rail.is-dragging .side-fill::after{
  transform:translateX(-50%) scale(1.45);
  box-shadow:
    0 0 0 2px rgba(10,8,18,.95),
    0 0 22px rgba(168,85,247,1),
    0 0 44px rgba(139,92,246,.75);
}
.side-rail.is-dragging .side-fill{
  /* Drag updates scroll every pointermove → fill recomputed every
     frame. Kill the 120ms ease so the dot tracks the cursor 1:1
     instead of lagging visibly behind it. */
  transition:none;
}
@media (max-width:980px){ .side-rail{ display:none; } }

/* ============================================================ RIPPLE */
.btn,.navi,.plan,.ticket,.order-row{ position:relative; overflow:hidden; }
.ripple{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 70%); transform:scale(0); animation:rip .6s var(--ease) forwards; pointer-events:none; z-index:0; }
@keyframes rip{ to{ transform:scale(1); opacity:0; } }
.btn > *{ position:relative; z-index:1; }

/* ============================================================ INTERACTIVE DASHBOARD */
.side-hint{ margin-top:auto; padding:14px 12px 4px; font-family:var(--font-mono); font-size:11px; color:var(--cyan-2); line-height:1.5; border-top:1px solid var(--border); }
.dash-main{ position:relative; min-height:520px; }
.dash-view{ display:none; opacity:1; animation:none; }
.dash-view.show{ display:block; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
.dv-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.dv-head h4{ font-size:22px; }
.dv-sub{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.dv-head .who{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); }
.av{ width:32px; height:32px; border-radius:50%; background:var(--grad); display:inline-block; }
.av.sm{ width:24px; height:24px; }

.kpanel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; transition:border-color .3s, transform .3s var(--ease); }
.kpanel:hover{ border-color:var(--border-2); transform:translateY(-3px); }
.kpanel .kl{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; }
.kpanel .kv{ font-family:var(--font-display); font-size:28px; display:block; margin:6px 0; font-weight:600; }
.kpanel .tag{ display:inline-block; }

/* order rail clickable */
.order-row{ cursor:pointer; padding:11px 12px; border-radius:10px; border-bottom:1px solid var(--border); transition:background .25s, transform .2s; }
.order-row:hover{ background:var(--surface-2); }
.order-row.sel{ background:var(--grad-soft); border:1px solid var(--border-2); }
.order-detail{ margin-top:14px; padding:14px; border-radius:12px; background:var(--bg-3); border:1px solid var(--border); display:none; animation:viewIn .35s var(--ease) both; }
.order-detail.show{ display:block; }
.od-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); }
.od-row:last-child{ border-bottom:none; }
.od-row b{ color:var(--text); font-family:var(--font-mono); }

/* kanban */
.kanban{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .kanban{ grid-template-columns:1fr; } }
.kanban-col{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; min-height:300px; }
.col-head{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.col-count{ background:var(--surface-2); border-radius:100px; padding:2px 9px; color:var(--text); }
.col-body{ display:flex; flex-direction:column; gap:10px; min-height:60px; }
.ticket{ background:var(--bg-3); border:1px solid var(--border); border-radius:11px; padding:12px; cursor:pointer; transition:transform .25s var(--ease), border-color .25s; }
.ticket:hover{ transform:translateY(-2px); border-color:var(--border-2); }
.ticket.moving{ animation:tkPop .42s var(--ease); }
@keyframes tkPop{ 0%{ transform:scale(.92); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
.tk-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tk-id{ font-family:var(--font-mono); font-size:12px; color:var(--faint); }
.tk-state{ font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:100px; }
.tk-state.s-incoming{ background:rgba(168,85,247,.16); color:var(--violet-2); }
.tk-state.s-firing{ background:rgba(129,140,248,.16); color:var(--cyan-2); }
.tk-state.s-ready{ background:rgba(52,211,153,.16); color:var(--mint); }
.tk-body{ font-size:13.5px; color:var(--text); }

/* inventory */
.stock-list{ display:flex; flex-direction:column; gap:10px; }
.stock-item{ display:grid; grid-template-columns:1.6fr 2fr auto auto; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 16px; transition:border-color .3s; }
@media (max-width:680px){ .stock-item{ grid-template-columns:1fr auto; } .stock-item .stk-bar{ display:none; } }
.stock-item.low{ border-color:rgba(248,113,113,.35); }
.stock-item.ordered{ opacity:.6; }
.stk-name{ font-size:14px; }
.stk-sku{ font-family:var(--font-mono); font-size:10.5px; color:var(--faint); margin-left:6px; }
.stk-bar{ height:8px; background:var(--surface-2); border-radius:100px; overflow:hidden; }
.stk-fill{ display:block; height:100%; width:0; background:var(--grad); border-radius:100px; transition:width 1s var(--ease); }
.stock-item.low .stk-fill{ background:linear-gradient(90deg,#f87171,#fb923c); }
.stk-q{ font-family:var(--font-mono); font-size:13px; color:var(--muted); min-width:42px; text-align:right; }
.stk-reorder{ font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--text); background:var(--surface-2); border:1px solid var(--border-2); border-radius:9px; padding:8px 14px; cursor:pointer; transition:background .25s, transform .2s; }
.stk-reorder:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }

/* rota */
.rota{ display:flex; flex-direction:column; gap:10px; }
.rota-row{ display:flex; justify-content:space-between; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 16px; }
.rota-row .rp{ display:flex; align-items:center; gap:11px; font-size:14px; }
.shift{ font-family:var(--font-mono); font-size:12px; padding:5px 11px; border-radius:100px; }
.shift.on{ background:rgba(52,211,153,.14); color:var(--mint); }
.shift.hol{ background:rgba(168,85,247,.14); color:var(--violet-2); }

/* finance */
.vat-row{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px; color:var(--muted); }
.vat-row b{ color:var(--text); font-family:var(--font-mono); }
.vat-row.total{ border-bottom:none; border-top:1px solid var(--border-2); margin-top:4px; padding-top:13px; color:var(--text); font-weight:600; }
canvas.fin-chart{ width:100%; height:200px; display:block; }

/* ============================================================ MODAL */
.modal{ position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,6,10,.72); backdrop-filter:blur(8px); }
.modal.show{ display:flex; animation:fadeIn .3s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-card{ width:min(440px,100%); border-radius:22px; padding:36px; position:relative; animation:cardIn .45s var(--ease) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(26px) scale(.96); } to{ opacity:1; transform:none; } }
.modal-x{ position:absolute; top:16px; right:18px; width:34px; height:34px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); color:var(--muted); font-size:20px; cursor:none; transition:.2s; }
/* The body hides the OS cursor via `cursor:none`, but inside the modal the
   close button defaults to `cursor:pointer` and the form inputs inherit
   the OS text cursor — so the modal was the one place on the landing
   where the OS arrow/text-caret showed up next to the custom dot+ring.
   Forcing `cursor:none` across every modal descendant restores the
   custom-cursor-only experience inside the popover. */
.modal, .modal *{ cursor:none !important; }
@media (max-width:720px){ .modal, .modal *{ cursor:auto !important; } }
.modal-x:hover{ color:var(--text); background:rgba(255,255,255,.1); }
.modal-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-2); margin-bottom:14px; }
.modal-card h3{ font-size:28px; margin-bottom:10px; }
.modal-card > p{ color:var(--muted); font-size:15px; margin-bottom:24px; }
.modal-card form{ display:flex; flex-direction:column; gap:14px; }
.modal-card label{ display:flex; flex-direction:column; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.modal-card input{ background:var(--bg-3); border:1px solid var(--border-2); border-radius:11px; padding:13px 15px; color:var(--text); font-family:var(--font-body); font-size:15px; transition:border-color .25s, box-shadow .25s; }
.modal-card input:focus{ outline:none; border-color:var(--violet-2); box-shadow:0 0 0 3px rgba(124,58,237,.2); }
.modal-fine{ display:block; margin-top:16px; font-size:12px; color:var(--faint); text-align:center; }

/* Contact panel — replaces the demo sign-up form. Three tappable rows for
   email / phone / web, each with a small accent-square icon, a primary label,
   and a faint secondary line. Hover lifts the row slightly + brightens. */
.contact-info{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
.contact-info .ci-row{
  display:flex; align-items:center; gap:14px;
  background:var(--bg-3); border:1px solid var(--border-2); border-radius:13px;
  padding:14px 16px; text-decoration:none; color:var(--text);
  transition:transform .18s var(--ease), border-color .25s, background .25s;
}
.contact-info .ci-row:hover{
  transform:translateY(-2px); border-color:var(--violet-2);
  background:linear-gradient(160deg, rgba(139,92,246,.10), rgba(139,92,246,.03));
}
.contact-info .ci-ic{
  width:38px; height:38px; flex:0 0 38px; border-radius:10px;
  display:grid; place-items:center; font-size:16px;
  background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(139,92,246,.4);
}
.contact-info .ci-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.contact-info .ci-body b{ font-weight:600; font-size:15px; letter-spacing:-.005em; }
.contact-info .ci-body small{ color:var(--faint); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; }

/* ============================================================ TOASTS */
.toast-wrap{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:9500; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ background:rgba(12,15,26,.95); border:1px solid var(--border-2); border-radius:12px; padding:13px 20px; font-size:14px; box-shadow:0 16px 50px rgba(0,0,0,.6); backdrop-filter:blur(10px);
  opacity:0; transform:translateY(16px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.toast.show{ opacity:1; transform:none; }
.toast::before{ content:"✓ "; color:var(--mint); }

/* ============================================================
   3D FLYTHROUGH — camera flies through a corridor of floating panels
   ============================================================ */
#scrollspace{ height:1300vh; position:relative; z-index:0; pointer-events:none; }
#space{
  position:fixed; inset:0; z-index:2; overflow:hidden;
  perspective:2300px; perspective-origin:50% 50%;
}
#world{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }

.layer{
  position:absolute; left:50%; top:50%;
  transform-style:preserve-3d; backface-visibility:hidden;
  will-change:transform,opacity; pointer-events:none;
}

/* ---- layer widths ---- */
.l-head{ width:min(780px,86vw); text-align:center; }
.l-head .sec-tag{ justify-content:center; }
.l-head h2{ font-size:clamp(34px,4.6vw,62px); font-weight:700; letter-spacing:-.03em; line-height:1.04; }
.l-head p{ color:var(--muted); font-size:18px; margin:18px auto 0; max-width:52ch; }
.l-herotext{ width:min(560px,88vw); }
.l-herocard{ width:min(496px,90vw); }
.l-cta{ width:min(860px,90vw); text-align:center; }
.l-footer{ width:min(1140px,92vw); }
.l-modclust{ width:min(1200px,94vw); }
.l-dash{ width:min(960px,92vw); }
.l-features{ width:min(1180px,94vw); }
.l-stats{ width:min(1040px,92vw); }

/* cluster row of module cards */
.cluster{ display:flex; gap:18px; align-items:stretch; justify-content:center; }
.l-modclust .cell{ flex:1 1 0; min-width:0; }

/* legibility backdrop behind text-only layers */
.l-head::before, .l-cta::before, .l-herotext::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:150%; height:230%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(7,6,15,.72), rgba(7,6,15,.30) 46%, transparent 72%);
  filter:blur(6px);
}
.l-herotext::before{ width:170%; }

/* feature header inside features layer */
.l-features .feat-head{ text-align:center; margin-bottom:34px; }
.l-features .feat-head h2{ font-size:clamp(30px,3.8vw,50px); font-weight:700; letter-spacing:-.03em; }
.l-features .sec-tag{ justify-content:center; }
.l-stats .stat-head{ text-align:center; margin-bottom:38px; }
.l-stats .stat-head h2{ font-size:clamp(28px,3.4vw,46px); font-weight:700; letter-spacing:-.03em; }
.l-stats .sec-tag{ justify-content:center; }

/* floating decor (keywords + glyphs streaming past in the periphery) */
/* floating decor — selling-point badges streaming past in the periphery */
.decor{ white-space:nowrap; }
.decor.badge{ font-family:var(--font-mono); font-weight:500; display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:100px; color:var(--text); background:linear-gradient(160deg, rgba(26,22,48,.82), rgba(16,13,30,.82)); border:1px solid var(--border-2); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); box-shadow:0 14px 44px rgba(0,0,0,.4); letter-spacing:.01em; }
.decor.badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan-2); box-shadow:0 0 10px var(--cyan-2); flex:0 0 8px; }
.decor.d-violet::before{ background:var(--violet-2); box-shadow:0 0 10px var(--violet-2); }
.decor.d-pink::before{ background:var(--pink-2); box-shadow:0 0 10px var(--pink-2); }
.decor.d-mint::before{ background:var(--mint); box-shadow:0 0 10px var(--mint); }
.decor.d-indigo::before{ background:var(--cyan-2); box-shadow:0 0 10px var(--cyan-2); }
.decor.d-amber::before{ background:#f5a623; box-shadow:0 0 10px #f5a623; }
.decor.g{ width:64px; height:64px; border-radius:17px; background:var(--grad-soft); border:1px solid var(--border-2); box-shadow:0 16px 50px rgba(124,58,237,.22); }

/* the dashboard screen, hanging in space */
.l-dash #dash-app{ background:#0b0916; box-shadow:0 60px 140px rgba(0,0,0,.7), 0 0 80px rgba(124,58,237,.22); }
.l-dash .cs-spot{ position:absolute; inset:-12% -6%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(124,58,237,.30), rgba(99,102,241,.10) 48%, transparent 72%); filter:blur(40px); }

/* scroll hint at the very top */
.scroll-hint{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:700;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .5s var(--ease); pointer-events:none; }
.scroll-hint .ln{ width:1px; height:34px; background:linear-gradient(var(--cyan-2),transparent); position:relative; overflow:hidden; }
.scroll-hint .ln::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--cyan-2); animation:hintrun 1.8s var(--ease) infinite; }
@keyframes hintrun{ to{ top:120%; } }
body.moved .scroll-hint{ opacity:0; }
@media (max-width:980px){ .scroll-hint{ display:none; } }

/* ---- FLAT FALLBACK (touch / reduced-motion / no-webgl) ---- */
body.flat #space{ position:relative; inset:auto; overflow:visible; perspective:none; }
body.flat #world{ position:relative; transform:none !important; transform-style:flat; padding:80px 0; }
body.flat .layer{
  position:relative; left:auto; top:auto; transform:none !important;
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  width:min(860px,92vw) !important; margin:54px auto;
}
body.flat .l-modclust, body.flat .l-features, body.flat .l-dash, body.flat .l-stats, body.flat .l-footer{ width:min(1140px,94vw) !important; }
/* In flat mode the hero is forced to stack vertically (3D-mode's
   two-column hero is impossible without absolute positioning). Narrow
   the two pieces back toward their content size so they don't sit in
   a wide 860px container with the right half empty. Both centered, so
   they read as a coherent pair instead of left-aligned half-rows. */
body.flat .l-herotext{ width:min(620px,92vw) !important; text-align:center; }
body.flat .l-herotext .hero-sub{ margin-left:auto; margin-right:auto; }
body.flat .l-herotext .hero-cta{ justify-content:center; }
body.flat .l-herotext::before{ left:50%; transform:translateX(-50%); }
body.flat .l-herocard{ width:min(540px,92vw) !important; }
body.flat .cluster{ flex-wrap:wrap; }
body.flat .l-modclust .cell{ flex:1 1 260px; }
body.flat .decor{ display:none !important; }
body.flat #scrollspace{ display:none; }
body.flat .scroll-hint{ display:none; }
body.flat #bg3d{ opacity:.45; position:fixed; }

/* cta + hero inside layers */
.l-cta .cta-title{ font-size:clamp(40px,6vw,86px); font-weight:700; letter-spacing:-.04em; line-height:.98; }
.l-cta p{ color:var(--muted); font-size:19px; margin:24px auto 0; max-width:42ch; }
.l-herotext .hero-title{ margin-top:4px; font-size:clamp(40px,5.2vw,76px); }
.l-herotext .hero-sub{ max-width:34ch; }
.l-footer .foot-grid{ background:rgba(8,8,16,.66); border:1px solid var(--border); border-radius:20px; padding:36px 40px; backdrop-filter:blur(10px); }
.l-footer .foot-bottom{ margin-top:26px; }

/* hero preview tile — authentic Flow dashboard slice */
.preview-window .pw-body{ padding:16px; display:grid; gap:13px; }
.kpi-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kpi{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:11px; padding:9px 10px; }
.kpi .kic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 30px; }
.kpi .kic svg{ width:15px; height:15px; }
.kic.amber{ background:rgba(245,158,11,.16); color:#f5a623; }
.kic.pink{ background:rgba(236,72,153,.16); color:var(--pink-2); }
.kic.violet{ background:rgba(124,58,237,.16); color:var(--violet-2); }
.kpi b{ font-family:var(--font-display); font-size:16px; font-weight:700; line-height:1.05; display:block; }
.kpi label{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); }
.activity-box{ background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:13px; padding:14px 14px 12px; }
.ac-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; gap:10px; }
.ac-head b{ font-family:var(--font-display); font-size:14px; font-weight:600; display:block; }
.ac-head small{ font-family:var(--font-mono); font-size:9.5px; color:var(--faint); }
.ac-toggle{ display:flex; gap:3px; background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:9px; padding:3px; flex:0 0 auto; }
.ac-toggle span{ font-size:10px; padding:4px 9px; border-radius:6px; color:var(--muted); cursor:pointer; transition:.2s; white-space:nowrap; }
.ac-toggle .on{ color:#fff; }
.ac-toggle span:first-child.on{ background:linear-gradient(120deg,#f5a623,#f97316); }
.ac-toggle span:last-child.on{ background:var(--grad-hot); }
canvas.activity-chart{ width:100%; height:116px; display:block; }
.ac-axis{ display:flex; justify-content:space-between; margin-top:5px; font-family:var(--font-mono); font-size:9px; color:var(--faint); }

/* more opaque, clearly-readable floating cards */
.l-modclust .cell{ background:linear-gradient(165deg, rgba(22,19,42,.99), rgba(13,11,26,.995)); border-color:var(--border-2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 30px 70px rgba(0,0,0,.55); }
.l-features .feat{ background:linear-gradient(165deg, rgba(22,19,42,.97), rgba(13,11,26,.98)); border-color:var(--border-2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 30px 70px rgba(0,0,0,.5); }

/* ---- stepped scroll: snap each station into frame ---- */
html{ scroll-snap-type:y proximity; }
#scrollspace{ position:relative; }
#scrollspace .snap{ position:absolute; left:0; width:1px; height:1px; scroll-snap-align:start; pointer-events:none; }

/* ---- crisp text: strip backdrop-filter from 3D-transformed panels (it forces a blurry compositing path); panels are already near-opaque ---- */
.l-herocard .preview-window.glass,
.l-dash #dash-app,
.l-modclust .cell,
.l-features .feat,
.foot-card,
.float-tag,
.decor.badge{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.l-herocard .preview-window.glass{ background:linear-gradient(160deg, rgba(24,22,38,.99), rgba(14,12,24,.995)); }
.float-tag{ background:rgba(15,14,24,.97); }
.decor.badge{ background:linear-gradient(160deg, rgba(24,20,44,.95), rgba(15,13,28,.96)); }

/* ============================================================
   MINI-UI PREVIEWS (module cards) + section polish
   ============================================================ */
.mini{ margin-top:15px; display:flex; flex-direction:column; gap:7px; }
.mrow{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); padding:7px 0; border-bottom:1px solid var(--border); }
.mrow:last-child{ border-bottom:none; }
.mrow b{ color:var(--text); font-family:var(--font-mono); font-size:12.5px; }
.mrow.total{ border-top:1px solid var(--border-2); border-bottom:none; margin-top:2px; padding-top:9px; color:var(--text); font-weight:600; }
.mint{ color:var(--mint); }

.mstock{ display:grid; grid-template-columns:1.3fr 1.1fr auto; gap:10px; align-items:center; font-size:12px; }
.mstock .mname{ color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mbar{ height:6px; background:var(--surface-2); border-radius:100px; overflow:hidden; }
.mbar i{ display:block; height:100%; width:0; background:var(--grad); border-radius:100px; transition:width 1.1s var(--ease); }
.mstock.low .mbar i{ background:linear-gradient(90deg,#f87171,#fb923c); }
.mstock .mpct{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); min-width:30px; text-align:right; }
.in .mbar i{ width:var(--w); }

.mmenu{ display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--border); }
.mmenu:last-child{ border-bottom:none; }
.mmenu .mn{ color:var(--text); }
.mmenu .mpr{ font-family:var(--font-mono); color:var(--violet-2); }
.mprofit{ font-family:var(--font-mono); font-size:10.5px; padding:2px 7px; border-radius:100px; }
.mprofit.up{ background:rgba(45,212,191,.14); color:var(--mint); }
.mprofit.down{ background:rgba(248,113,113,.14); color:#fca5a5; }

.mfloor{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tbl{ font-size:11px; text-align:center; padding:11px 4px; border-radius:9px; border:1px solid var(--border-2); color:var(--muted); background:rgba(0,0,0,.22); }
.tbl.free{ border-color:rgba(45,212,191,.5); color:var(--mint); }
.tbl.busy{ border-color:rgba(248,113,113,.5); color:#fca5a5; }
.tbl.res{ border-color:rgba(245,166,35,.5); color:#f5a623; }

.mord{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--muted); padding:6px 0; border-bottom:1px solid var(--border); }
.mord:last-child{ border-bottom:none; }
.mord .onum{ font-family:var(--font-mono); color:var(--faint); font-weight:400; margin-right:4px; }

.mcust{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text); padding:5px 0; }
.mav{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; color:#fff; background:var(--grad); flex:0 0 26px; }
.mcust .mn{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mspark{ display:flex; align-items:flex-end; gap:5px; height:44px; }
.mspark i{ flex:1; background:var(--grad); border-radius:4px 4px 0 0; opacity:.85; transform-origin:bottom; transform:scaleY(.12); transition:transform 1s var(--ease); }
.in .mspark i{ transform:scaleY(var(--h)); }

/* stats — dark tiles */
.l-stats .stat{ background:linear-gradient(165deg, rgba(25,22,48,.93), rgba(15,13,29,.94)); border:1px solid var(--border-2); border-radius:18px; padding:28px 18px; box-shadow:0 30px 70px rgba(0,0,0,.4); }
.l-stats .stats{ gap:18px; }

/* dashboard KPI icon-squares (overview only) */
.kpanel:has(.kpic){ display:flex; align-items:center; gap:12px; }
.kpic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:0 0 40px; }
.kpic svg{ width:20px; height:20px; }
.kpic.amber{ background:rgba(245,166,35,.15); color:#f5a623; }
.kpic.pink{ background:rgba(236,72,153,.15); color:var(--pink-2); }
.kpic.indigo{ background:rgba(99,102,241,.15); color:var(--cyan-2); }
.kpic.warn{ background:rgba(251,146,60,.15); color:#fb923c; }
.kpbody{ min-width:0; }
.kpbody .kv{ font-family:var(--font-display); font-size:23px; font-weight:600; display:block; line-height:1.05; margin:0 0 2px; }
/* Allow the KPI label to wrap to two lines and tighten letter-spacing so
   it never truncates with an ellipsis. We hard-cap at 2 lines via
   line-clamp so a very long label still doesn't push the panel taller. */
.kpbody .kl{
  font-family:var(--font-mono); font-size:10px; color:var(--faint);
  letter-spacing:.02em; text-transform:uppercase;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.25;
}

/* footer — composed end card */
.foot-card{ background:linear-gradient(165deg, rgba(22,19,42,.92), rgba(13,11,26,.94)); border:1px solid var(--border-2); border-radius:24px; padding:44px 48px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 40px 110px rgba(0,0,0,.55); }
.foot-top{ display:grid; grid-template-columns:1.05fr 2fr; gap:48px; }
.foot-brand .logo{ font-size:26px; margin-bottom:16px; }
.foot-brand p{ color:var(--muted); font-size:15px; max-width:32ch; margin-bottom:24px; line-height:1.55; }
.foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.foot-cols .col h6{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.foot-cols .col a{ display:block; color:var(--muted); font-size:14.5px; padding:5px 0; transition:color .2s; }
.foot-cols .col a:hover{ color:var(--text); }
.foot-card .foot-bottom{ margin-top:38px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--faint); font-family:var(--font-mono); }
@media (max-width:860px){ .foot-top{ grid-template-columns:1fr; gap:32px; } }

/* feature card visuals */
.feat-flow{ display:flex; align-items:center; gap:8px; margin-top:18px; flex-wrap:wrap; }
.fchip{ font-family:var(--font-mono); font-size:11px; padding:6px 11px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); color:var(--text); }
.fchip.amber{ color:#f5a623; border-color:rgba(245,166,35,.4); }
.farr{ color:var(--cyan-2); font-size:13px; }
.feat-spark{ display:flex; align-items:flex-end; gap:6px; height:48px; margin-top:20px; }
.feat-spark i{ flex:1; background:var(--grad); border-radius:4px 4px 0 0; opacity:.85; transform-origin:bottom; transform:scaleY(.12); transition:transform 1s var(--ease); }
.in .feat-spark i{ transform:scaleY(var(--h)); }
.feat-stamp{ margin-top:20px; }
.fstamp{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; padding:8px 14px; border-radius:9px; color:var(--mint); background:rgba(45,212,191,.12); border:1px solid rgba(45,212,191,.4); }

/* nav active link */
.nav-links a.active{ color:var(--text); background:var(--surface-2); }

/* ============================================================
   RESPONSIVE — flat fallback polish for tablets / phones
   ============================================================ */
@media (max-width:760px){
  .foot-card{ padding:32px 28px; border-radius:18px; }
  .foot-cols{ grid-template-columns:repeat(2,1fr); gap:20px 26px; }
  .foot-card .foot-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .l-stats .stat{ padding:22px 14px; }
}
@media (max-width:540px){
  .foot-cols{ grid-template-columns:1fr 1fr; }
  .float-tag{ display:none; }
  body.flat .l-head h2{ font-size:clamp(28px,8vw,40px); }
  body.flat .cta-title{ font-size:clamp(34px,9vw,52px); }
  body.flat #world{ padding:48px 0; }
  body.flat .layer{ margin:36px auto; }
}
body.flat .foot-card{ width:100%; }
body.flat .l-herocard{ margin-top:18px; }