/* ============================================================
   OneFlow · v14 — Electric Indigo / Lime / Coral
   Cloud white base · Ink text · Indigo brand family + Coral signal (CTA)
   Palette: Ink #0a0e2e · Indigo #4f46e5 · Indigo Light #a5b4fc ·
            Digital Lavender #c7d2fe · Coral #ff6a3d / Deep #e14e22 ·
            Blush #FEE3E3 · Cloud Surface #f5f6ff · Cloud White #FCFBFF · Indigo Deep #312e81
   ============================================================ */

:root {
  /* ── Brand palette ── */
  --sky:        #4f46e5;    /* Primary — Deep Indigo    */
  --sky-mid:    #4338ca;    /* indigo-700               */
  --sky-deep:   #312e81;    /* indigo-800               */
  --rose:       #a5b4fc;    /* Secondary — Indigo Light */
  --rose-deep:  #6366f1;
  --teal:       #a5b4fc;    /* Accent — Indigo Light */
  --lavender:   #312e81;    /* Indigo Deep — readable accent on light, ~11:1 */
  --lav-deep:   #1e1b4b;    /* deep indigo */

  /* ── Gradient system ── */
  --grad:      linear-gradient(135deg, #4f46e5 0%, #c7d2fe 100%);
  --grad-rev:  linear-gradient(315deg, #4f46e5 0%, #c7d2fe 100%);
  --grad-soft: linear-gradient(135deg, rgba(79,70,229,0.07) 0%, rgba(199,210,254,0.09) 100%);
  --grad-line: linear-gradient(90deg, #312e81 0%, #4f46e5 50%, #a5b4fc 100%);
  --grad-cta:  linear-gradient(135deg, #1e1b4b 0%, #4f46e5 60%, #a5b4fc 100%);

  /* ── CTA / signal ── */
  --cta:      #ff6a3d;
  --cta-dark: #e14e22;

  /* ── Alert ── */
  --alert: #DC2626;

  /* ── Lime creative spark (use on dark / as highlighter only) ── */
  --lime:      #BEF03E;
  --lime-deep: #5C7A00;

  /* ── Dark surfaces ── */
  --ink:   #0a0e2e;
  --ink-2: #312e81;

  /* ── Page surfaces — Cloud White / Cool Gray ── */
  --bg:        #f5f6ff;
  --surface:   #FCFBFF;
  --surface-2: #eef0ff;
  --surface-3: #e3e6ff;
  --white:     #FCFBFF;

  /* ── Text — Midnight Navy ── */
  --text:               #0a0e2e;
  --text-soft:          rgba(10,14,46,0.68);
  --text-mute:          rgba(10,14,46,0.55);
  --text-on-light:      #0a0e2e;
  --text-soft-on-light: rgba(10,14,46,0.68);
  --text-mute-on-light: rgba(10,14,46,0.55);

  /* ── Text on dark ── */
  --on-dark:      #f5f6ff;
  --on-dark-mute: #9aa7d4;

  /* ── Borders ── */
  --border:       #e3e6ff;
  --border-dark:  rgba(255,255,255,0.12);
  --border-o:     rgba(79,70,229,0.22);
  --border-glass: rgba(255,255,255,0.92);

  /* ── Glass ── */
  --glass-bg:   rgba(255,255,255,0.88);
  --glass-blur: blur(18px) saturate(1.5);

  /* ── Shadows — very clean ── */
  --shadow:      0 1px 3px rgba(10,14,46,0.06), 0 4px 14px rgba(10,14,46,0.04);
  --shadow-lg:   0 4px 24px rgba(10,14,46,0.08), 0 14px 44px rgba(10,14,46,0.05);
  --shadow-cta:  0 4px 16px rgba(255,106,61,0.32);
  --shadow-glass:0 2px 16px rgba(10,14,46,0.06), inset 0 1px 0 rgba(255,255,255,0.96);

  /* ── Brand aliases ── */
  --brand:  #0a0e2e;
  --flow:   #4f46e5;
  --signal: #ff6a3d;

  /* ── Indigo scale (legacy alias names) ── */
  --orange:       #4f46e5;
  --orange-dark:  #312e81;
  --orange-mid:   #a5b4fc;
  --orange-light: #c7d2fe;
  --orange-pale:  #eef0ff;
  --orange-soft:  rgba(79,70,229,0.07);

  /* ── Spacing ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --section-y: 120px;

  /* ── Radius & motion ── */
  --r: 14px; --r-sm: 8px; --r-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --micro: 180ms; --section: 560ms;

  --maxw: 1200px;
  --font: 'Heebo','Assistant',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head: 'Rubik','Heebo',sans-serif;
  --font-display: 'Suez One','Rubik','Heebo',serif; /* distinctive Hebrew display — headlines only */
}

/* ============================================================
   Base
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font); color: var(--text); background: var(--bg);
  line-height:1.65; font-size:18px; font-weight:400; direction:rtl; text-align:right;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 {
  font-family: var(--font-head); color: var(--text);
  line-height:1.14; font-weight:700; letter-spacing:-0.025em;
}
/* Gradient text — reserved for the hero display + .grad-text only ("when everything shines, nothing does") */
.display em, .grad-text {
  font-style:normal;
  -webkit-text-fill-color: transparent;
  background: var(--grad-line);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
a { color:inherit; text-decoration:none; }
img,svg { max-width:100%; display:block; }

em { font-style:normal; color:var(--sky); font-weight:inherit; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.display { font-family:var(--font-display); font-size:clamp(40px,6vw,72px); font-weight:400; line-height:1.12; letter-spacing:0; }
.h1 { font-family:var(--font-display); font-size:clamp(30px,4.2vw,46px); font-weight:400; letter-spacing:0; }
.h2 { font-size:clamp(22px,2.6vw,28px); font-weight:600; }
.lead { font-size:clamp(17px,1.9vw,20px); line-height:1.7; color:var(--text-soft); }
.caption { font-size:13.5px; font-weight:600; color:rgba(10,14,46,0.58); letter-spacing:0.02em; }
.kicker {
  font-size:12.5px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--sky);
  display:inline-flex; align-items:center; gap:10px;
}
/* signature teal flow-dash — the OneFlow motif */
.kicker::before {
  content:''; width:22px; height:2.5px; border-radius:2px; flex-shrink:0;
  background: linear-gradient(90deg, var(--teal), rgba(165,180,252,0.25));
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-weight:700;
  font-size:16px; padding:13px 28px; border-radius:10px;
  border:none; cursor:pointer; position:relative; overflow:hidden; line-height:1;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease);
  letter-spacing:0.005em;
}

.btn-cta {
  background: var(--cta);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(225,78,34,0.22), 0 4px 12px rgba(255,106,61,0.28);
}
.btn-cta:hover {
  background: var(--cta-dark);
  transform:translateY(-2px);
  box-shadow: 0 2px 4px rgba(225,78,34,0.26), 0 8px 24px rgba(255,106,61,0.34);
  filter:none;
}
.btn-cta:active { transform:translateY(0) scale(0.99); }

.btn-ghost {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border), var(--shadow);
}
.btn-ghost:hover {
  background: var(--surface-2);
  box-shadow: 0 0 0 1.5px rgba(79,70,229,0.40), var(--shadow);
  color: var(--sky-deep);
  transform: translateY(-1px);
}

.btn-ghost-dark {
  background: rgba(255,255,255,0.08);
  color: var(--on-dark);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 4px 16px rgba(0,0,0,0.12);
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.14);
  box-shadow: 0 0 0 1px var(--sky), 0 8px 24px rgba(0,0,0,0.18);
  color: #fff;
  transform: translateY(-1px);
}

.btn-lg { padding:16px 36px; font-size:17.5px; }

.btn-lime {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(92,122,0,0.25), 0 4px 14px rgba(190,240,62,0.38);
}
.btn-lime:hover {
  background: #AEE22E;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(92,122,0,0.28), 0 8px 24px rgba(190,240,62,0.48);
}
.btn-lime:active { transform: translateY(0) scale(0.99); }


/* ============================================================
   Navbar — clean white + 1px border
   ============================================================ */
.nav {
  position:fixed; top:0; right:0; left:0; z-index:100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--micro), background var(--micro), box-shadow var(--micro);
}
.nav.scrolled {
  border-color: var(--border);
  box-shadow: 0 1px 0 rgba(10,14,46,0.06);
  background: rgba(255,255,255,0.96);
}
.nav.on-dark { background:rgba(10,14,46,0.82); }
.nav.on-dark .nav-links a, .nav.on-dark .logo { color: var(--on-dark); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo { font-family:var(--font-head); font-size:23px; font-weight:800; color:var(--text); letter-spacing:-0.025em; }
.logo span { background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav.on-dark .logo span {
  background:var(--grad-line); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a {
  font-size:15.5px; font-weight:500; color:var(--text-soft);
  position:relative; transition:color var(--micro);
}
.nav-links a::after {
  content:''; position:absolute; bottom:-6px; right:0;
  width:0; height:2px; background:var(--orange); border-radius:2px;
  transition:width var(--micro) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-cta { display:flex; align-items:center; gap:12px; }
.nav-cta .btn-cta { padding:9px 20px; font-size:14.5px; border-radius:8px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:var(--micro); }
.mobile-menu {
  position:fixed; inset:0; z-index:200; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; transform:translateX(100%); transition:transform 360ms var(--ease); visibility:hidden;
}
.mobile-menu.open { transform:translateX(0); visibility:visible; }
.mobile-menu a { color:var(--text); font-size:24px; font-weight:600; }
.mobile-menu a:hover { color:var(--sky-deep); }
.mobile-close { position:absolute; top:24px; left:24px; background:none; border:none; color:var(--text); font-size:28px; cursor:pointer; }

/* ============================================================
   Section scaffolding — white / slate rhythm
   ============================================================ */
section { position:relative; }
.sec { padding:var(--section-y) 0; background:var(--bg); }

.sec-surface { background: var(--surface-2); }

.sec-alt { background: var(--surface-3); }

.sec-dark {
  position:relative;
  background:
    radial-gradient(ellipse 80% 55% at 78% -12%, rgba(79,70,229,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 8% 110%, rgba(199,210,254,0.17) 0%, transparent 60%),
    radial-gradient(ellipse 32% 26% at 90% 90%, rgba(165,180,252,0.08) 0%, transparent 65%),
    var(--ink);
  color: var(--on-dark);
}
.sec-dark::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4 { color: var(--on-dark); }
.sec-dark .lead { color: var(--on-dark-mute); }
.sec-dark .kicker { color: var(--teal); }

/* genesis — dark premium stage (was light w/ white headline = invisible) */
.sec-genesis {
  position:relative;
  background:
    radial-gradient(ellipse 70% 55% at 18% -10%, rgba(199,210,254,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 112%, rgba(79,70,229,0.22) 0%, transparent 58%),
    radial-gradient(ellipse 30% 24% at 12% 92%, rgba(165,180,252,0.09) 0%, transparent 65%),
    var(--ink);
  color: var(--on-dark);
}
.sec-genesis h1,.sec-genesis h2,.sec-genesis h3,.sec-genesis h4 { color: var(--on-dark); }
.sec-genesis .lead { color: var(--on-dark-mute); }
.sec-genesis .kicker { color: var(--teal); }
.sec-genesis .aw-closer { color: var(--on-dark-mute); }
.sec-genesis .aw-closer strong { color: var(--on-dark); }

.sec-grad-edge { position:relative; }
.sec-grad-edge::before {
  content:''; position:absolute; inset:0 0 auto 0; height:200px;
  background: radial-gradient(ellipse 60% 100% at 55% 0%, rgba(79,70,229,0.04) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
.sec-grad-edge > * { position:relative; z-index:1; }

.sec-head { max-width:680px; margin:0 auto var(--s5); text-align:center; }
.sec-head .kicker { display:block; margin-bottom:12px; }
.sec-head p { margin-top:14px; color: var(--text-soft); }
.sec-dark .sec-head p { color: var(--on-dark-mute); }

.reveal { opacity:0; transform:translateY(22px); transition:opacity var(--section) var(--ease), transform var(--section) var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:80ms; } .reveal.d2 { transition-delay:160ms; } .reveal.d3 { transition-delay:240ms; }

/* ============================================================
   HERO — clean white, typography-first
   ============================================================ */
.hero-scroll { position:relative; }
.hero {
  background: #FFFFFF;
  min-height:100vh; display:flex; align-items:center; padding-top:70px;
  overflow:hidden; position:relative;
  border-bottom: 1px solid var(--border);
}

.hero::before {
  content:''; position:absolute;
  width:480px; height:480px; border-radius:50%;
  top:-120px; right:-100px;
  background: radial-gradient(circle at 35% 35%,
    rgba(79,70,229,0.08) 0%,
    rgba(79,70,229,0.03) 40%,
    transparent 70%);
  pointer-events:none; z-index:0;
}
.hero::after {
  content:''; position:absolute;
  width:320px; height:320px; border-radius:50%;
  bottom:5%; left:2%;
  background: radial-gradient(circle at 40% 40%,
    rgba(79,70,229,0.05) 0%,
    transparent 65%);
  pointer-events:none; z-index:0;
}

.hero-inner { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; position:relative; z-index:1; padding:72px 0; width:100%; }
.hero h1 { color:var(--text); font-weight:800; margin-bottom:22px; }
.hero h1 em { background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:800; }
.hero .lead { color:var(--text-soft); margin-bottom:36px; max-width:480px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-soft); padding:7px 14px; border-radius:100px;
  font-size:0.78rem; font-weight:600; margin-bottom:24px;
  box-shadow: var(--shadow);
}
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--orange); }
.hero-visual-col { min-width:0; position:relative; z-index:1; }

:root { --app-reveal:1; }
#appWin.sshot-win { max-width:none; opacity:var(--app-reveal); filter:blur(calc((1 - var(--app-reveal)) * 4px)); transform:scale(calc(0.965 + var(--app-reveal) * 0.035)); will-change:opacity,transform,filter; }

.hero #heroDocs { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
@media (max-width:1100px) { .hero #heroDocs { z-index:0; } }
.flow-tagline { position:absolute; left:0; right:0; bottom:7%; text-align:center; color:var(--text); font-family:var(--font-head); font-weight:600; font-size:1.15rem; letter-spacing:0.4px; opacity:0; z-index:3; pointer-events:none; }

@media (min-width:1101px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll { height:260vh; }
  .hero-scroll > .hero { position:sticky; top:0; height:100vh; min-height:100vh; }
}

/* ============================================================
   App screenshot components
   ============================================================ */
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.sshot-float { animation:floatY 5s ease-in-out infinite; }
.sshot-win {
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow: 0 2px 8px rgba(10,14,46,0.06), 0 16px 48px rgba(10,14,46,0.10);
  border:1px solid var(--border); background:#fff; width:100%; max-width:560px;
}
.sshot-chrome { background:var(--ink); display:flex; align-items:center; gap:10px; padding:9px 14px; }
.sshot-dots { display:flex; gap:5px; }
.sshot-dots span { width:9px; height:9px; border-radius:50%; }
.sshot-dots span:nth-child(1){background:#FC5C65;} .sshot-dots span:nth-child(2){background:#FED330;} .sshot-dots span:nth-child(3){background:#26DE81;}
.sshot-url { font-size:0.62rem; color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.08); padding:3px 12px; border-radius:6px; }
.sshot-app { display:flex; flex-direction:column; background:#f5f6ff; }
.sshot-topbar { background:var(--ink); display:flex; align-items:center; gap:14px; padding:8px 14px; }
.sshot-brand { font-family:var(--font-head); font-weight:800; font-size:0.82rem; color:#fff; letter-spacing:-0.3px; }
.sshot-brand span { color:var(--orange-light); }
.sshot-topnav-items { display:flex; gap:2px; }
.sshot-topnav-item { font-size:0.62rem; color:rgba(255,255,255,0.55); padding:4px 10px; border-radius:5px; }
.sshot-topnav-item.active { background:rgba(255,255,255,0.12); color:#fff; }
.sshot-user-dot { width:24px; height:24px; border-radius:50%; background:var(--grad); margin-right:auto; }
.sshot-body { display:grid; grid-template-columns:156px 1fr; flex:1; min-height:0; }
.sshot-sidebar { background:#FFFFFF; border-left:1px solid var(--border); padding:10px 8px; }
.sshot-sidebar-sect { font-size:0.55rem; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.8px; padding:4px 8px 6px; }
.sshot-sidebar-item { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:6px; font-size:0.63rem; color:var(--text-soft); margin-bottom:1px; }
.sshot-sidebar-item.active { background:var(--orange-soft); color:var(--orange-dark); font-weight:600; }
.sshot-sidebar-dot { width:5px; height:5px; border-radius:50%; background:var(--border); flex-shrink:0; }
.sshot-sidebar-item.active .sshot-sidebar-dot { background:var(--orange); }
.sshot-sidebar-count { font-size:0.55rem; color:var(--text-mute); margin-right:auto; }
.sshot-content { display:flex; flex-direction:column; overflow:hidden; }
.sshot-toolbar { display:flex; align-items:center; gap:12px; padding:9px 14px; border-bottom:1px solid var(--border); }
.sshot-toolbar-title { font-size:0.72rem; font-weight:700; color:var(--text-on-light); }
.sshot-toolbar-tabs { display:flex; }
.sshot-tab { font-size:0.6rem; padding:4px 10px; color:var(--text-soft); border-bottom:2px solid transparent; }
.sshot-tab.active { color:var(--orange); border-bottom-color:var(--orange); font-weight:600; }
.sshot-btn-new { background:var(--cta); color:#fff; border:none; border-radius:6px; padding:5px 12px; font-size:0.63rem; font-weight:700; white-space:nowrap; margin-right:auto; }
.sshot-filter-bar { display:flex; gap:14px; padding:6px 14px; border-bottom:1px solid var(--border); font-size:0.58rem; color:var(--text-mute); }
.sshot-filter-item { display:flex; align-items:center; gap:4px; }
.sshot-table-wrap { overflow:hidden; flex:1; }
.sshot-thead, .sshot-tr { display:grid; align-items:center; gap:8px; }
.sshot-thead { background:var(--surface-2); border-bottom:1px solid var(--border); padding:6px 14px; font-size:0.58rem; font-weight:700; color:var(--text-soft); }
.sshot-tr { padding:7px 14px; border-bottom:1px solid var(--surface-3); font-size:0.6rem; color:var(--text); }
.sshot-th-check,.sshot-td-check { color:var(--border); font-size:0.7rem; }
.stag { display:inline-flex; align-items:center; justify-content:center; padding:2px 7px; border-radius:5px; font-size:0.56rem; font-weight:700; }
.stag-blue{background:#EFF6FF;color:#1D4ED8;} .stag-yellow{background:#FEFCE8;color:#A16207;} .stag-orange{background:#FFF7ED;color:#C2410C;}
.stag-purple{background:#f3f4ff;color:#4338ca;} .stag-green{background:#eff0ff;color:#1e1b4b;} .stag-gray{background:#F9FAFB;color:#4B5563;}
.sshot-link { color:var(--cta-dark); } .sshot-muted { color:var(--text-mute-on-light); } .sshot-money { font-weight:600; color:var(--text-on-light); }
.cols-orders { grid-template-columns:18px 30px 84px 96px 74px 66px 66px 60px; }
.cols-clients { grid-template-columns:18px 110px 70px 70px 80px 80px; }
.cols-service { grid-template-columns:18px 60px 96px 84px 70px 70px; }

/* ============================================================
   BLIND ZONES
   ============================================================ */
.blind-stage { position:relative; max-width:940px; margin:0 auto; display:grid; grid-template-columns:1fr 220px 1fr; }
.blind-box { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:var(--r); padding:28px 24px; min-height:260px; }
.blind-box h3 { color:var(--on-dark); font-size:18px; margin-bottom:6px; }
.blind-box .caption { color:var(--on-dark-mute); }
.blind-box .frag-list { list-style:none; padding:0; margin:18px 0 0; display:flex; flex-direction:column; gap:10px; }
.blind-box .frag { display:flex; gap:9px; align-items:flex-start; font-size:0.9rem; line-height:1.45; color:var(--on-dark); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:9px 12px; }
.blind-box .frag-ico { flex-shrink:0; font-size:1rem; line-height:1.4; }
.blind-box .frag.muted { color:var(--on-dark-mute); }
.blind-box .frag .tag { color:var(--rose); border-bottom:1.5px dotted var(--rose); font-weight:600; padding-bottom:1px; }
.blind-gap { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; border-radius:var(--r); transition:background var(--micro) var(--ease); }
.blind-gap.lit { background:rgba(220,38,38,0.10); }
.blind-gap .seam { position:absolute; top:0; bottom:0; border-right:2px dashed rgba(255,255,255,0.12); }
.blind-gap .seam.s1{right:33%;} .blind-gap .seam.s2{right:66%;}
.hotspot { position:relative; z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,0.06); border:1.5px solid rgba(255,255,255,0.18); color:var(--on-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; transition:var(--micro) var(--ease); }
.hotspot::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--alert); opacity:0; transform:scale(0.8); transition:var(--micro) var(--ease); }
.hotspot:hover, .hotspot:focus-visible, .hotspot.active { background:rgba(220,38,38,0.20); border-color:var(--alert); color:#fff; outline:none; }
.hotspot:hover::before,.hotspot:focus-visible::before,.hotspot.active::before { opacity:1; transform:scale(1); }
.hotspot .pulse { position:absolute; inset:0; border-radius:50%; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,0.45);} 70%{box-shadow:0 0 0 14px rgba(220,38,38,0);} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0);} }
.hotspot-tip { position:absolute; bottom:calc(100% + 12px); right:50%; transform:translateX(50%) translateY(6px); background:var(--alert); color:#fff; padding:8px 14px; border-radius:8px; font-size:14px; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:var(--micro) var(--ease); box-shadow:var(--shadow); }
.hotspot-tip.long { white-space:normal; width:240px; line-height:1.45; text-align:center; }
.hotspot-tip::after { content:''; position:absolute; top:100%; right:50%; transform:translateX(50%); border:6px solid transparent; border-top-color:var(--alert); }
.hotspot:hover .hotspot-tip,.hotspot:focus-visible .hotspot-tip,.hotspot.active .hotspot-tip { opacity:1; transform:translateX(50%) translateY(0); }

/* ============================================================
   SINGLE SOURCE OF TRUTH
   ============================================================ */
.ssot-grid { display:grid; grid-template-columns:320px 1fr; gap:var(--s5); align-items:center; max-width:1040px; margin:0 auto; }
.ssot-control {
  background: var(--white);
  border:1px solid var(--border); border-radius:var(--r); padding:28px;
  box-shadow: var(--shadow-glass);
}
.ssot-control h3 { font-size:19px; margin-bottom:4px; color:var(--brand); }
.ssot-central { text-align:center; padding:22px 0 8px; }
.ssot-central .lbl { font-size:13.5px; color:var(--text-mute); }
.ssot-central .num { font-family:var(--font-head); font-size:52px; font-weight:800; color:var(--brand); transition:color var(--micro); font-variant-numeric:tabular-nums; }
.ssot-central .num.flash { color:var(--sky-deep); }
.ssot-field { margin-top:18px; }
.ssot-field label { display:block; font-size:14px; color:var(--text-soft); margin-bottom:8px; font-weight:500; }
.ssot-range { width:100%; accent-color:var(--sky-deep); }
.ssot-pay-row { display:flex; gap:10px; margin-top:14px; }
.ssot-pay-row input { flex:1; padding:11px 14px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font); font-size:15px; text-align:right; background:#fff; color:var(--text); }
.ssot-pay-row input:focus { outline:none; border-color:var(--sky-deep); }
.ssot-pay-row button { background:var(--sky-deep); color:#fff; border:none; border-radius:8px; padding:0 18px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background var(--micro); }
.ssot-pay-row button:hover { background:var(--cta-dark); }
.ssot-screens { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ssot-screen {
  background: var(--white);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  box-shadow: var(--shadow); transition:box-shadow var(--micro) var(--ease); position:relative;
}
.ssot-screen.ripple::after { content:''; position:absolute; inset:0; border-radius:var(--r); padding:2px; background:var(--grad-line); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.ssot-screen-head { background:var(--surface-2); padding:10px 14px; font-size:13.5px; font-weight:700; color:var(--brand); border-bottom:1px solid var(--border); }
.ssot-screen-body { padding:14px; }
.ssot-screen-body .row { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; color:var(--text-soft); }
.ssot-screen-body .row b { color:var(--brand); font-variant-numeric:tabular-nums; transition:color var(--micro); }
.ssot-screen-body .row b.flash { color:var(--sky-deep); }
.ssot-bar { height:6px; background:var(--surface-3); border-radius:4px; overflow:hidden; margin-top:10px; }
.ssot-bar i { display:block; height:100%; background:var(--grad-line); border-radius:4px; transition:width 500ms var(--ease); }

/* ============================================================
   FLOW
   ============================================================ */
.flow-wrap { max-width:1080px; margin:0 auto; }
.flow-track { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:6px; }
.flow-track::before { content:''; position:absolute; top:33px; right:4%; left:4%; height:2px; background:var(--border); border-radius:2px; }
.flow-track .flow-progress { position:absolute; top:33px; right:4%; height:2px; background:var(--grad-line); border-radius:2px; width:0; transition:width 700ms var(--ease); }
.flow-node { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; cursor:pointer; }
.flow-dot { width:64px; height:64px; border-radius:50%; background:var(--white); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:26px; transition:var(--section) var(--ease); color:var(--text-mute); box-shadow:var(--shadow); }
.flow-node.on .flow-dot { border-color:var(--sky-deep); color:var(--sky-deep); box-shadow:0 0 0 5px var(--orange-soft); transform:scale(1.04); }
.flow-node.hit .flow-dot { border-color:var(--alert); color:var(--alert); box-shadow:0 0 0 5px rgba(220,38,38,0.08); }
.flow-label { font-size:14px; font-weight:600; color:var(--text-soft); }
.flow-node.on .flow-label { color:var(--brand); }
.flow-detail {
  max-width:560px; margin:40px auto 0;
  background:var(--white);
  border:1px solid var(--border); border-radius:var(--r); padding:22px 26px;
  box-shadow:var(--shadow); text-align:center; min-height:92px; transition:var(--micro) var(--ease);
  color:var(--text-on-light);
}
.flow-detail h4 { font-size:18px; margin-bottom:6px; color:var(--brand); }
.flow-detail p { font-size:15px; color:var(--text-soft-on-light); margin:0; }
.flow-whatif { display:flex; justify-content:center; gap:12px; margin-top:34px; align-items:center; flex-wrap:wrap; }
.flow-whatif .caption { color:var(--text-mute); }
.flow-toggle { display:inline-flex; align-items:center; gap:9px; background:var(--white); border:1.5px solid var(--border); border-radius:100px; padding:9px 18px; font-size:15px; font-weight:600; color:var(--brand); cursor:pointer; transition:var(--micro); box-shadow:var(--shadow); }
.flow-toggle.active { background:rgba(220,38,38,0.06); border-color:var(--alert); color:var(--alert); }

/* ============================================================
   Feature rows
   ============================================================ */
.feature-row { display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; margin-bottom:var(--s6); }
.feature-row:last-child { margin-bottom:0; }
.feature-row.reverse .feature-text { order:2; } .feature-row.reverse .feature-visual { order:1; }
.feature-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:0.04em; background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px; }
.feature-text h3 { font-size:clamp(1.4rem,2.2vw,1.85rem); margin-bottom:14px; color:var(--text); }
.feature-text > p { margin-bottom:24px; color:var(--text-soft); }
.feature-list { display:flex; flex-direction:column; gap:11px; }
.feature-list-item { display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; color:var(--text); }
.feature-check { width:22px; height:22px; border-radius:50%; background:var(--orange-soft); border:1.5px solid rgba(79,70,229,0.20); display:flex; align-items:center; justify-content:center; font-size:0.62rem; color:var(--sky-deep); flex-shrink:0; margin-top:2px; }
.feature-visual { min-width:0; }
.feature-visual .sshot-win { max-width:none; }

/* ============================================================
   CASE STUDY
   ============================================================ */
.cs-stats { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; margin-bottom:var(--s5); }
.cs-stat { text-align:center; }
.cs-stat .n { font-family:var(--font-head); font-size:44px; font-weight:800; color:var(--sky); line-height:1; font-variant-numeric:tabular-nums; }
.cs-stat .l { font-size:14px; color:var(--text-soft); margin-top:8px; }
.ba-slider { position:relative; max-width:980px; margin:0 auto; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; aspect-ratio:16/9; background:#fff; }
.ba-pane { position:absolute; inset:0; }
.ba-after { z-index:1; } .ba-before { z-index:2; clip-path:inset(0 0 0 50%); }
.ba-pane .ba-label { position:absolute; top:16px; padding:6px 14px; border-radius:100px; font-size:13px; font-weight:700; color:#fff; z-index:3; }
.ba-before .ba-label { right:16px; background:rgba(163,50,50,0.92); }
.ba-after .ba-label { left:16px; background:rgba(45,106,79,0.92); }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; z-index:4; cursor:ew-resize; box-shadow:0 0 12px rgba(0,0,0,0.15); }
.ba-handle .knob { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; color:var(--sky-deep); font-size:16px; }
.excel-mess { width:100%; height:100%; background:#fff; padding:14px; overflow:hidden; }
.excel-mess .xgrid { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; height:100%; }
.excel-mess .xc { background:#f3f5f7; border:1px solid #e2e6ea; font-size:9px; color:#8895a3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.excel-mess .xc.h { background:#dfe8c9; color:#5a6b3a; font-weight:700; }
.excel-mess .xc.r { background:#fde3df; color:#c0392b; }
.excel-mess .xc.y { background:#fdf6cf; }
.clean-app { width:100%; height:100%; background:linear-gradient(160deg,#f5f6ff,#F1F5F9); padding:18px; display:flex; flex-direction:column; gap:12px; }
.clean-app .ca-top { display:flex; align-items:center; gap:10px; }
.clean-app .ca-logo { font-family:var(--font-head); font-weight:800; color:var(--text); font-size:15px; } .clean-app .ca-logo span { color:var(--sky-deep); }
.clean-app .ca-pill { margin-right:auto; background:var(--orange-soft); color:var(--orange-dark); font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; }
.clean-app .ca-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow); }
.clean-app .ca-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-soft); padding:5px 0; }
.clean-app .ca-row b { color:var(--brand); }
.ca-tag { font-size:10px; font-weight:700; padding:3px 9px; border-radius:100px; }
.ca-tag.g{background:#e3f4ea;color:#1f8a4c;} .ca-tag.o{background:#fdeee4;color:#c45a25;} .ca-tag.b{background:#DCF0FA;color:var(--cta-dark);}

/* Cutting engine */
.engine { max-width:980px; margin:var(--s5) auto 0; display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; }
.engine-controls {
  background:var(--white);
  border:1px solid var(--border); border-radius:var(--r); padding:24px;
  box-shadow:var(--shadow);
}
.engine-controls h4 { font-size:18px; margin-bottom:16px; color:var(--brand); }
.eng-field { margin-bottom:16px; }
.eng-field label { display:block; font-size:13.5px; font-weight:600; color:var(--text-soft); margin-bottom:7px; }
.eng-field select,.eng-field input { width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:8px; font-family:var(--font); font-size:15px; background:#fff; text-align:right; color:var(--text); }
.eng-field select:focus,.eng-field input:focus { outline:none; border-color:var(--sky-deep); }
.engine-output { background:var(--ink); border-radius:var(--r); padding:24px; color:var(--on-dark); min-height:280px; }
.engine-output h4 { color:#fff; font-size:16px; margin-bottom:4px; }
.engine-output .caption { color:var(--on-dark-mute); }
.cut-list { margin-top:18px; display:flex; flex-direction:column; gap:9px; font-variant-numeric:tabular-nums; }
.cut-item { display:flex; justify-content:space-between; align-items:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:8px; padding:11px 14px; font-size:14px; opacity:0; transform:translateY(8px); transition:var(--micro) var(--ease); }
.cut-item.show { opacity:1; transform:none; }
.cut-item .cut-k { color:var(--on-dark-mute); }
.cut-item .cut-v { font-weight:700; color:var(--orange-light); }
.cut-note { margin-top:16px; font-size:12.5px; color:var(--on-dark-mute); border-top:1px solid rgba(255,255,255,0.10); padding-top:12px; }

/* ============================================================
   ROLE PERMISSIONS
   ============================================================ */
.roles-tabs { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:var(--s4); }
.role-tab { background:var(--white); border:1.5px solid var(--border); border-radius:8px; padding:10px 20px; font-size:15px; font-weight:600; color:var(--text-soft); cursor:pointer; transition:var(--micro) var(--ease); box-shadow:var(--shadow); }
.role-tab:hover { border-color:rgba(79,70,229,0.40); color:var(--sky-deep); }
.role-tab.active { background:var(--sky-deep); border-color:var(--sky-deep); color:#fff; box-shadow:var(--shadow-cta); }
.role-desc { text-align:center; max-width:540px; margin:0 auto 32px; color:var(--text-soft); min-height:24px; transition:var(--micro); }
.role-ui { max-width:920px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden; }
.role-ui-top { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--surface-2); }
.role-ui-top .ru-logo { font-family:var(--font-head); font-weight:800; color:var(--text); } .role-ui-top .ru-logo span { color:var(--sky-deep); }
.role-ui-top .ru-role { margin-right:auto; font-size:13px; color:var(--text-mute); }
.role-modules { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:22px; }
.role-mod { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:18px 14px; text-align:center; transition:opacity 360ms var(--ease), transform 360ms var(--ease), filter 360ms var(--ease); }
.role-mod .ic { font-size:26px; } .role-mod .nm { font-size:13.5px; font-weight:600; color:var(--brand); margin-top:8px; }
.role-mod.locked { opacity:0.25; filter:grayscale(1); transform:scale(0.96); }
.role-mod.locked .nm::after { content:' 🔒'; }

/* ============================================================
   INDUSTRY flip cards
   ============================================================ */
.ind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1100px; margin:0 auto; }
.ind-card { perspective:1200px; height:320px; cursor:pointer; }
.ind-inner { position:relative; width:100%; height:100%; transition:transform 600ms var(--ease); transform-style:preserve-3d; }
.ind-card.flipped .ind-inner, .ind-card:hover .ind-inner { transform:rotateY(180deg); }
.ind-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r); padding:26px 22px; display:flex; flex-direction:column; }
.ind-front {
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  align-items:center; justify-content:center; text-align:center; gap:14px;
}
.ind-front:hover { box-shadow:var(--shadow-lg); }
.ind-front .ic { font-size:46px; }
.ind-front h3 { font-size:20px; color:var(--text-on-light); }
.ind-front .hint { font-size:12.5px; color:var(--text-mute-on-light); margin-top:auto; }
.ind-back { background:var(--ink-2); color:var(--on-dark); transform:rotateY(180deg); border:1px solid rgba(255,255,255,0.06); }
.ind-back h3 { color:#fff; font-size:17px; margin-bottom:14px; }
.ind-back .line { margin-bottom:13px; }
.ind-back .line .t { font-size:11.5px; font-weight:700; letter-spacing:0.04em; display:block; margin-bottom:2px; }
.ind-back .line.pain .t { color:var(--alert); }
.ind-back .line.blind .t { color:var(--orange-light); }
.ind-back .line.sol .t { color:var(--lavender); }
.ind-back .line p { font-size:13.5px; color:var(--on-dark); margin:0; line-height:1.5; }

/* ============================================================
   Work process
   ============================================================ */
#process .sec-head .lead { max-width:640px; margin-left:auto; margin-right:auto; }
.journey { position:relative; display:flex; align-items:flex-start; justify-content:center; gap:10px; max-width:1120px; margin:18px auto 0; }
.journey-line { position:absolute; top:38px; right:74px; left:74px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; z-index:0; }
.journey-fill { position:absolute; top:0; right:0; width:0; height:100%; background:var(--grad-line); border-radius:2px; transition:width 1300ms var(--ease); }
.journey.filled .journey-fill { width:100%; }

.journey-step, .journey-anchor { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; opacity:.35; filter:grayscale(.6); transform:translateY(8px); transition:opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); }
.journey-step { flex:1 1 0; padding:0 4px; }
.journey-anchor { flex:0 0 140px; }
.journey-step.on, .journey-anchor.on { opacity:1; filter:none; transform:none; }

.js-badge, .ja-badge { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:32px; background:var(--white); box-shadow:var(--shadow); margin-bottom:14px; }
.js-badge { border:1.5px solid transparent; background:linear-gradient(var(--white),var(--white)) padding-box, var(--grad-line) border-box; }
.jn-start .ja-badge { background:var(--orange-pale); border:1.5px solid rgba(79,70,229,0.18); }
.ja-system { background:var(--grad-line); box-shadow:0 8px 24px rgba(79,70,229,0.28); border:0; }

.js-text, .ja-text { display:flex; flex-direction:column; }
.js-n { font-family:var(--font-head); font-weight:800; font-size:13px; letter-spacing:.08em; background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:5px; }
.journey-step h4 { font-size:17px; margin-bottom:6px; color:var(--text); }
.journey-step p { font-size:13.8px; color:var(--text-soft); margin:0; line-height:1.5; }
.ja-label { font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--brand); }
.ja-sub { font-size:12.5px; color:var(--text-soft); margin-top:3px; }

@media (max-width:860px){
  .journey { flex-direction:column; align-items:stretch; gap:0; max-width:460px; }
  .journey-line { top:8px; bottom:8px; right:37px; left:auto; width:2px; height:auto; }
  .journey-fill { top:0; right:0; left:0; width:100%; height:0; transition:height 1300ms var(--ease); }
  .journey.filled .journey-fill { height:100%; }
  .journey-step, .journey-anchor { flex:none; flex-direction:row; align-items:flex-start; text-align:right; gap:16px; padding:12px 0; transform:translateX(-8px); }
  .journey-step.on, .journey-anchor.on { transform:none; }
  .js-badge, .ja-badge { width:60px; height:60px; font-size:25px; margin-bottom:0; flex:0 0 auto; }
  .js-text, .ja-text { padding-top:6px; }
}

/* ============================================================
   CTA / Contact — deep navy
   ============================================================ */
.cta-sec {
  background:
    radial-gradient(ellipse 80% 60% at 50% -5%, rgba(79,70,229,0.18) 0%, transparent 50%),
    #0a0e2e;
  color: var(--on-dark); text-align:center; position:relative; overflow:hidden;
}
.cta-sec::before { content:none; }
.cta-sec > * { position:relative; z-index:1; }
.cta-sec h2 { color:var(--on-dark); margin-bottom:14px; }
.cta-sec .lead { color:var(--on-dark-mute); }

.contact-form { max-width:560px; margin:38px auto 0; text-align:right; }
.cf-row { display:flex; gap:14px; margin-bottom:14px; }
.cf-row .cf-field { flex:1; }
.cf-field { margin-bottom:14px; }
.cf-field label { display:block; font-size:13.5px; color:var(--on-dark-mute); margin-bottom:7px; font-weight:500; }
.cf-field input,.cf-field textarea { width:100%; padding:14px 16px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; background:rgba(255,255,255,0.06); color:#fff; font-family:var(--font); font-size:16px; text-align:right; transition:var(--micro) var(--ease); }
.cf-field input::placeholder,.cf-field textarea::placeholder { color:var(--on-dark-mute); }
.cf-field input:focus,.cf-field textarea:focus { outline:none; border-color:var(--sky); background:rgba(79,70,229,0.06); }
.cf-field textarea { resize:vertical; min-height:60px; transition:min-height 320ms var(--ease), border-color var(--micro), background var(--micro); }
.cf-field textarea:focus { min-height:120px; }
.contact-form .btn-cta { width:100%; justify-content:center; margin-top:6px; }
.cf-success { display:none; flex-direction:column; align-items:center; gap:14px; padding:30px 0; text-align:center; }
.cf-success.show { display:flex; }
.cf-check { width:64px; height:64px; }
.cf-check circle { fill:none; stroke:var(--sky); stroke-width:3; }
.cf-check path { fill:none; stroke:var(--sky); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }

.contact-wrap { max-width:760px; margin:0 auto; text-align:center; }
.contact-head { font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.12; letter-spacing:0; color:var(--on-dark); margin-bottom:14px; }
.contact-head em { font-style:normal; color:var(--orange-light); -webkit-text-fill-color:var(--orange-light); background:none; }
.contact-sub { color:var(--on-dark-mute); font-size:1.05rem; margin-bottom:34px; }
.cform { max-width:660px; margin:0 auto; }
.cform-bar { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:8px 8px 8px 10px; box-shadow:0 16px 44px rgba(0,0,0,0.22); }
.cform-bar input { flex:1 1 0; min-width:0; background:transparent; border:0; color:var(--on-dark); font-family:var(--font); font-size:16px; padding:13px 14px; text-align:right; }
.cform-bar input::placeholder { color:var(--on-dark-mute); }
.cform-bar input:focus { outline:none; }
.cform-div { width:1px; height:26px; background:rgba(255,255,255,0.12); flex:0 0 auto; }
.cform-bar .btn-cta { flex:0 0 auto; white-space:nowrap; border-radius:9px; }
.cform-msg { display:block; width:100%; max-width:420px; margin:18px auto 0; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,0.18); color:var(--on-dark); font-family:var(--font); font-size:15px; padding:9px 4px; text-align:center; transition:border-color var(--micro) var(--ease); }
.cform-msg::placeholder { color:var(--on-dark-mute); }
.cform-msg:focus { outline:none; border-bottom-color:var(--sky); }
.cform-wa { display:inline-flex; align-items:center; gap:8px; margin-top:22px; background:#25D366; border:0; color:#fff; font-family:var(--font-head); font-weight:700; font-size:.98rem; padding:11px 22px; border-radius:100px; cursor:pointer; box-shadow:0 8px 22px rgba(37,211,102,0.30); transition:transform .15s var(--ease), filter .15s var(--ease); }
.cform-wa svg { width:20px; height:20px; fill:currentColor; }
.cform-wa:hover { transform:translateY(-2px); filter:brightness(1.04); }
.contact-wrap .cf-success { padding:20px 0; }
.contact-wrap .cf-success .cf-check circle, .contact-wrap .cf-success .cf-check path { stroke:var(--sky); }

@media (max-width:620px){
  .cform-bar { flex-direction:column; gap:8px; background:transparent; border:0; padding:0; box-shadow:none; }
  .cform-bar input { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:10px; box-shadow:none; }
  .cform-div { display:none; }
  .cform-bar .btn-cta { width:100%; justify-content:center; margin-top:2px; }
}

/* WhatsApp FAB */
.wa-fab { position:fixed; bottom:22px; left:22px; z-index:300; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.16); transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.wa-fab svg { width:30px; height:30px; fill:currentColor; }
.wa-fab:hover { transform:scale(1.08); box-shadow:0 12px 30px rgba(0,0,0,0.22); }
@media (max-width:620px){ .wa-fab { width:52px; height:52px; bottom:16px; left:16px; } }

/* ============================================================
   Footer
   ============================================================ */
.footer { background:var(--ink); color:var(--on-dark-mute); padding:64px 0 32px; }
.footer-top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer .logo { color:var(--on-dark); margin-bottom:12px; }
.footer .logo span { background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.footer-col h4 { color:var(--on-dark); font-size:15px; margin-bottom:16px; }
.footer-col a { display:block; color:var(--on-dark-mute); font-size:14.5px; margin-bottom:10px; transition:color var(--micro); }
.footer-col a:hover { color:var(--sky); }
.footer-about { max-width:320px; font-size:14.5px; line-height:1.7; }
.footer-bottom { padding-top:24px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   Sub-page hero + prose
   ============================================================ */
.page-hero {
  background: var(--surface-2);
  color:var(--text); padding:150px 0 80px; text-align:center; position:relative; overflow:hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 80% at 15% 30%, rgba(79,70,229,0.05) 0%, transparent 55%);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:var(--text); max-width:22ch; margin:14px auto 0; }
.page-hero .lead { color:var(--text-soft); max-width:60ch; margin:18px auto 0; }
.page-hero .kicker { background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; }
.prose { max-width:760px; margin:0 auto; }
.prose h2 { margin:var(--s5) 0 16px; }
.prose h3 { font-size:21px; margin:var(--s4) 0 10px; color:var(--brand); }
.prose p { margin-bottom:18px; color:var(--text); line-height:1.75; }
.prose ul { list-style:none; margin:0 0 24px; }
.prose ul li { position:relative; padding-right:28px; margin-bottom:12px; line-height:1.65; }
.prose ul li::before { content:''; position:absolute; right:6px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.prose strong { color:var(--brand); }
.callout { background:var(--surface-2); border-right:3px solid var(--sky-deep); border-radius:var(--r-sm); padding:20px 24px; margin:24px 0; }
.callout p { margin:0; }
.steps { counter-reset:st; display:grid; gap:16px; margin:24px 0; }
.step { position:relative; background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:22px 24px; padding-right:78px; box-shadow:var(--shadow); }
.step::before { counter-increment:st; content:counter(st); position:absolute; top:22px; right:22px; width:38px; height:38px; border-radius:50%; background:var(--grad-line); color:#fff; font-family:var(--font-head); font-weight:800; display:flex; align-items:center; justify-content:center; }
.step h3 { margin:0 0 6px; font-size:18px; }
.step p { margin:0; font-size:15px; color:var(--text-soft); }
.svc-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:30px; box-shadow:var(--shadow); margin-bottom:22px; }
.svc-card .num { font-size:13px; font-weight:700; background:var(--grad-line); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:0.06em; }
.svc-card h3 { margin:6px 0 12px; font-size:22px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { width:100%; text-align:right; background:none; border:none; padding:22px 0; font-family:var(--font-head); font-size:19px; font-weight:600; color:var(--brand); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .chev { color:var(--sky-deep); transition:transform var(--micro) var(--ease); font-size:22px; flex-shrink:0; }
.faq-item.open .faq-q .chev { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 360ms var(--ease); }
.faq-a p { padding:0 0 22px; margin:0; color:var(--text-soft); line-height:1.7; }

/* ============================================================
   Responsive
   ============================================================ */
.hero-visual-desktop { display:block; }
.hero-visual-mobile  { display:none; }

.mob-win { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border); background:#fff; width:100%; max-width:420px; margin:0 auto; }
.mob-app { display:flex; flex-direction:column; background:#f5f6ff; }
.mob-topbar { background:var(--ink); display:flex; align-items:center; gap:10px; padding:8px 14px; }
.mob-tabs { display:flex; gap:2px; flex:1; }
.mob-tab { font-size:0.62rem; color:rgba(255,255,255,0.55); padding:4px 9px; border-radius:5px; white-space:nowrap; }
.mob-tab.active { background:rgba(255,255,255,0.12); color:#fff; }
.mob-toolbar { display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid var(--border); }
.mob-toolbar-title { font-size:0.72rem; font-weight:700; color:var(--text-on-light); }
.mob-cards { display:flex; flex-direction:column; }
.mob-card { padding:10px 14px; border-bottom:1px solid var(--surface-3); background:#fff; }
.mob-card-faded { opacity:0.5; }
.mob-card-row { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.mob-card-id { font-size:0.62rem; font-weight:700; color:var(--cta-dark); }
.mob-card-name { font-size:0.72rem; font-weight:600; color:var(--text-on-light); margin-bottom:3px; }
.mob-card-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.mob-card-product { font-size:0.62rem; color:var(--text-soft-on-light); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:58%; }
.mob-card-price { font-size:0.65rem; font-weight:600; color:var(--text-on-light); }
.mob-card-date { font-size:0.58rem; color:var(--text-mute-on-light); }

@media (max-width:980px) {
  .hero-inner { grid-template-columns:1fr; gap:32px; }
  .hero-visual-col { display:block; }
  .hero-visual-desktop { display:none; }
  .hero-visual-mobile  { display:block; }
  .feature-row, .feature-row.reverse { grid-template-columns:1fr; gap:28px; }
  .feature-row.reverse .feature-text, .feature-row.reverse .feature-visual { order:initial; }
}
@media (max-width:900px) {
  :root { --section-y:88px; }
  .nav-links, .nav-cta .btn { display:none; }
  .hamburger { display:flex; }
  .ssot-grid { grid-template-columns:1fr; gap:var(--s4); }
  .ssot-screens { grid-template-columns:1fr; }
  .engine { grid-template-columns:1fr; }
  .ind-grid { grid-template-columns:repeat(2,1fr); }
  .role-modules { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .blind-stage { grid-template-columns:1fr; }
  .blind-gap { min-height:200px; flex-direction:row; padding:20px 0; }
  .blind-gap .seam { display:none; }
  .footer-top { flex-direction:column; }
  .flow-track { flex-direction:column; gap:2px; align-items:stretch; }
  .flow-track::before { top:4%; bottom:4%; left:26px; right:auto; width:2px; height:auto; }
  .flow-track .flow-progress { top:4%; left:26px; right:auto; width:2px; height:0; transition:height 700ms var(--ease); }
  .flow-node { flex-direction:row; justify-content:flex-start; gap:10px; padding:4px 0; direction:ltr; }
  .flow-dot { width:52px; height:52px; font-size:20px; }
  .flow-label { font-size:13px; }
  .flow-wrap { display:grid; grid-template-columns:max-content 1fr; column-gap:20px; align-items:start; }
  .flow-track { grid-column:1; grid-row:1 / 3; }
  .flow-detail { grid-column:2; grid-row:1; margin:0; position:sticky; top:76px; align-self:start; text-align:right; max-width:none; padding:16px 18px; font-size:0.95rem; }
  .flow-detail h4 { font-size:1.02rem; margin-bottom:6px; }
  .flow-detail p  { font-size:0.9rem; }
  .flow-whatif { grid-column:2; grid-row:2; margin-top:10px; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .flow-whatif .caption { font-size:0.75rem; }
}
@media (max-width:560px) {
  body { font-size:17px; }
  .ind-grid, .steps-grid { grid-template-columns:1fr; }
  .cf-row { flex-direction:column; gap:0; }
  .cs-stats { gap:24px; }
  .ind-card:hover .ind-inner { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Blind-zone pains strip
   ============================================================ */
.blind-pains { max-width:880px; margin:44px auto 0; text-align:center; }
.blind-pains .bp-title { display:inline-block; font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--on-dark); margin-bottom:18px; }
.blind-pains ul { list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:right; }
.blind-pains li { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); border-radius:var(--r-sm); padding:14px 16px; color:var(--on-dark); font-size:0.95rem; line-height:1.5; }
.blind-pains .bp-summary { color:var(--on-dark); font-size:1.1rem; font-weight:600; line-height:1.6; max-width:640px; margin:0 auto; }
.blind-pains .bp-summary em { font-style:normal; color:var(--rose); font-weight:800; -webkit-text-fill-color:var(--rose); background:none; }
@media (max-width:680px){ .blind-pains ul { grid-template-columns:1fr; } }
.cap-mob{ display:none; }
@media (max-width:900px){ .cap-desk{ display:none; } .cap-mob{ display:inline; } }

/* ============================================================
   Audit highlight card
   ============================================================ */
.audit-band { background: var(--surface-2); padding:var(--section-y) 0; }
.audit-card {
  max-width:880px; margin:0 auto; text-align:center;
  background:var(--white);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:48px 40px;
  box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.audit-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad-line); }
.audit-card .kicker { display:block; margin-bottom:12px; }
.audit-card h2 { color:var(--text); }
.audit-card .lead { max-width:620px; margin:14px auto 0; color:var(--text-soft); }
.audit-actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:28px; }
.audit-note { font-size:0.85rem; color:var(--text-mute); }

/* Founder block */
.founder { display:flex; gap:24px; align-items:center; background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:24px; margin:8px 0 8px; box-shadow:var(--shadow); }
.founder-photo { flex:0 0 110px; width:110px; height:110px; border-radius:50%; overflow:hidden; background:var(--surface-2); border:2px solid var(--white); box-shadow:0 0 0 1px var(--border-o), var(--shadow); display:flex; align-items:center; justify-content:center; }
.founder-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.founder-body h3 { margin:0 0 4px; color:var(--brand); font-size:1.25rem; }
.founder-role { display:block; color:var(--sky-deep); font-weight:600; font-size:0.9rem; margin-bottom:10px; }
.founder-body p { margin:0; color:var(--text-soft); line-height:1.7; }
@media (max-width:560px){ .founder { flex-direction:column; text-align:center; } }

/* Contact alt channels */
.contact-alt { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:22px; color:var(--on-dark-mute); font-size:0.95rem; }
.contact-chan { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); color:#fff; padding:8px 16px; border-radius:100px; font-weight:600; text-decoration:none; transition:all .2s var(--ease); }
.contact-chan:hover { background:rgba(255,255,255,0.14); border-color:var(--sky); }
.contact-reassure { flex-basis:100%; text-align:center; font-size:0.85rem; color:var(--on-dark-mute); margin-top:4px; }

/* Industry quick-links */
.ind-links { text-align:center; margin-top:34px; font-weight:600; color:var(--text-soft); }
.ind-links a { display:inline-block; margin:0 6px; color:var(--sky-deep); text-decoration:none; border-bottom:1px solid var(--border-o); padding-bottom:1px; }
.ind-links a:hover { color:var(--lav-deep); border-color:var(--lav-deep); }

/* BA table + quote */
.ba-table { width:100%; border-collapse:collapse; margin:8px 0 8px; font-size:0.98rem; }
.ba-table th, .ba-table td { text-align:right; padding:12px 14px; border:1px solid var(--border); vertical-align:top; line-height:1.55; }
.ba-table thead th { background:var(--ink); color:#fff; font-weight:700; }
.ba-table tbody tr:nth-child(even){ background:var(--surface-2); }
.ba-table td:first-child { font-weight:700; color:var(--brand); white-space:nowrap; }
.cs-quote { background:var(--surface-2); border-right:3px solid var(--sky-deep); border-radius:var(--r-sm); padding:22px 26px; margin:24px 0; }
.cs-quote p { font-size:1.15rem; font-weight:600; color:var(--brand); line-height:1.6; margin:0 0 10px; }
.cs-quote cite { font-style:normal; color:var(--text-mute); font-size:0.9rem; }

/* Industry sub-page cards */
.pbs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 8px; }
.pbs-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); }
.pbs-card .t { display:inline-block; font-weight:800; font-size:0.8rem; letter-spacing:.03em; padding:4px 12px; border-radius:100px; margin-bottom:12px; }
.pbs-card.pain .t { background:#FEE2E2; color:#B91C1C; }
.pbs-card.blind .t { background:var(--orange-pale); color:var(--orange-dark); }
.pbs-card.sol .t { background:#d6dcff; color:#1e1b4b; }
.pbs-card p { margin:0; color:var(--text-soft-on-light); line-height:1.65; }
@media (max-width:760px){ .pbs-grid { grid-template-columns:1fr; } }

/* ============================================================
   ANYWHERE
   ============================================================ */
.anywhere-stage { position:relative; max-width:880px; margin:8px auto 0; padding:24px 0 8px; display:flex; align-items:center; justify-content:center; }
.anywhere-stage .aw-desk { width:100%; max-width:560px; position:relative; z-index:1; }
.anywhere-stage .aw-desk .sshot-win { max-width:none; }

.aw-phone { position:absolute; right:-6px; bottom:-26px; z-index:3; width:208px; }
.phone-frame {
  background:var(--ink); border:1px solid rgba(255,255,255,0.12); border-radius:34px;
  padding:8px; box-shadow:0 26px 60px rgba(10,14,46,0.28), 0 0 0 1px rgba(255,255,255,0.04);
  position:relative;
}
.phone-frame::before { content:''; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:62px; height:6px; border-radius:6px; background:rgba(255,255,255,0.14); z-index:4; }
.phone-screen { border-radius:27px; overflow:hidden; background:#f5f6ff; display:flex; flex-direction:column; min-height:392px; }
.ph-topbar { background:var(--ink); padding:18px 14px 9px; display:flex; align-items:center; gap:8px; }
.ph-brand { font-family:var(--font-head); font-weight:800; font-size:0.78rem; color:#fff; letter-spacing:-0.3px; }
.ph-brand span { color:var(--sky); }
.ph-live { margin-right:auto; display:flex; align-items:center; gap:5px; font-size:0.5rem; font-weight:700; color:#a5b4fc; background:rgba(165,180,252,0.12); padding:3px 7px; border-radius:20px; }
.ph-live .ph-live-dot { width:5px; height:5px; border-radius:50%; background:#a5b4fc; animation:phLive 1.8s var(--ease) infinite; }
@keyframes phLive { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.7);} }
.ph-search { margin:10px 12px 4px; font-size:0.58rem; color:var(--text-mute); background:#fff; border:1px solid var(--border); border-radius:8px; padding:7px 10px; }
.ph-section { padding:8px 12px 4px; font-size:0.55rem; font-weight:700; color:var(--text-mute); letter-spacing:0.4px; }
.ph-card { margin:0 12px 8px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:10px 11px; box-shadow:var(--shadow); }
.ph-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.ph-card-name { font-size:0.66rem; font-weight:700; color:var(--text); }
.ph-card-sub { font-size:0.56rem; color:var(--text-soft); }
.ph-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:7px; }
.ph-money { font-size:0.66rem; font-weight:800; color:var(--text); }

.aw-sync { position:absolute; z-index:5; left:34%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px;
  background: var(--white);
  border:1px solid var(--border); border-radius:30px; padding:9px 16px;
  box-shadow:var(--shadow-glass); white-space:nowrap; }
.aw-sync .aw-sync-ico { width:26px; height:26px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:14px; animation:awSpin 7s linear infinite; }
@keyframes awSpin { to { transform:rotate(360deg); } }
.aw-sync .aw-sync-txt { display:flex; flex-direction:column; line-height:1.15; }
.aw-sync .aw-sync-main { font-family:var(--font-head); font-weight:700; font-size:0.78rem; color:var(--text); }
.aw-sync .aw-sync-sub { font-size:0.6rem; color:var(--text-mute); }

.aw-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:48px; }
.aw-pill { display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--border); border-radius:40px; padding:10px 18px; color:var(--text); font-size:0.92rem; font-weight:500; box-shadow:var(--shadow); }
.aw-pill .aw-pill-ico { font-size:1.1rem; }
.aw-closer { max-width:680px; margin:38px auto 0; text-align:center; color:var(--text); font-size:1.12rem; line-height:1.7; }
.aw-closer strong { color:var(--sky-deep); font-weight:700; }

@media (max-width:760px){
  .anywhere-stage { flex-direction:column; padding-top:8px; }
  .anywhere-stage .aw-desk { max-width:460px; }
  .aw-phone { position:relative; right:auto; bottom:auto; margin-top:-46px; width:184px; }
  .aw-sync { position:relative; left:auto; top:auto; transform:none; margin:18px auto 0; }
  .aw-pills { margin-top:30px; }
}
@media (max-width:440px){ .aw-pill { width:100%; justify-content:center; } }

/* ============================================================
   ENTER — zoom-portal (stays dark)
   ============================================================ */
.zoom-portal { position:relative; background:var(--ink); color:var(--on-dark); overflow:clip; }
.zoom-portal::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 50%, rgba(79,70,229,0.14), transparent 70%),
    radial-gradient(120% 90% at 50% 118%, rgba(45,106,79,0.06), transparent 60%);
}
.zoom-sticky { position:relative; display:grid; place-items:center; }
.zoom-grid {
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:center; align-content:center;
  inline-size:min(1100px,92vw); min-block-size:62svh; padding:90px 24px;
}
.zoom-tile {
  font-family:var(--font-head,system-ui); font-weight:300; white-space:nowrap;
  font-size:clamp(15px,2.4vmin,26px); color:var(--on-dark); opacity:1;
}
.zoom-tile.legacy { color:rgba(238,242,250,0.32); }
.zoom-tile.core { display:flex; flex-direction:column; align-items:center; gap:10px; opacity:1; }
.zoom-core-brand { font-family:var(--font-head); font-weight:800; line-height:.9;
  font-size:clamp(40px,11vmin,120px); color:#fff; }
.zoom-core-brand b { font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.zoom-core-sub { font-size:clamp(17px,2.8vmin,26px); font-weight:600; color:var(--on-dark); }
.zoom-core-sub em { color:var(--teal); }
.zoom-cap { position:absolute; inset-block-end:24px; inset-inline:0; z-index:2; text-align:center;
  font-size:13px; letter-spacing:.04em; color:var(--on-dark-mute); }

@keyframes zoom-thru {
  0%   { transform:translateZ(-1000px); opacity:0; filter:blur(5px); }
  45%  { opacity:1; filter:blur(0); }
  55%  { transform:translateZ(0);       opacity:1; filter:blur(0); }
  100% { transform:translateZ(1000px);  opacity:0; filter:blur(5px); }
}
@keyframes core-rise {
  0%   { transform:translateZ(-580px) scale(.9); opacity:0; filter:blur(6px); }
  100% { transform:translateZ(0)       scale(1); opacity:1; filter:blur(0); }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .zoom-portal { block-size:230svh; view-timeline-name:--enter; view-timeline-axis:block; }
    .zoom-sticky { position:sticky; top:0; block-size:100svh; overflow:clip; perspective:1100px; }
    .zoom-grid {
      display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
      place-items:center; block-size:100svh; min-block-size:0; padding:0; gap:0;
      transform-style:preserve-3d;
    }
    .zoom-tile { opacity:0; will-change:transform,opacity,filter;
      animation:zoom-thru linear both; animation-timeline:--enter; }
    .zoom-tile.core { grid-area:2/2 / span 2 / span 2; opacity:0;
      animation-name:core-rise; animation-fill-mode:both; }
  }
}

/* ============================================================
   Accessibility & UX refinements (palette v12.1)
   ============================================================ */

/* Visible keyboard focus — Electric Violet ring */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2.5px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-color: var(--sky-deep); }

/* Form fields — clear focus ring on top of border change */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199,210,254,0.22);
}

/* Brand text selection */
::selection { background: rgba(199,210,254,0.18); color: var(--text); }

/* Teal accent utility — Neo Teal for highlights / live indicators */
.accent-teal { color: var(--lavender); }
.bg-accent-teal { background: var(--teal); color: #fff; }

/* Card lift feedback — consistent, no layout shift */
.role-tab:hover { box-shadow: var(--shadow-lg); }
.flow-toggle:hover { border-color: var(--border-o); color: var(--sky-deep); }

/* ============================================================
   v12.2 — League upgrade: SVG icons, social proof, AI strip,
   demo polish, scroll progress (2026 refresh)
   ============================================================ */

/* ── Icon system (inline SVG sprite) ── */
.ico {
  width:1em; height:1em; display:inline-block; vertical-align:-0.12em;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}
.flow-dot .ico, .role-mod .ic .ico, .js-badge .ico, .ja-badge .ico { vertical-align:0; }
.role-mod .ic { color:var(--sky); display:flex; justify-content:center; }
.ind-front .ic { color:var(--sky); display:flex; justify-content:center; }
.js-badge { color:var(--sky); }
.ja-badge { color:var(--sky-deep); }
.ja-system { color:#fff; }
.frag-ico .ico { opacity:0.75; }
.feature-check .ico { stroke-width:3; }
.aw-pill .aw-pill-ico { color:var(--sky); display:inline-flex; }
.sshot-filter-item .ico { width:0.9em; height:0.9em; opacity:0.7; }
.ph-search .ico { opacity:0.6; }
.flow-toggle .ico { color:var(--alert); }

/* ── Scroll progress — teal signature line ── */
.scroll-progress {
  position:fixed; top:0; right:0; height:3px; width:0%;
  background:linear-gradient(270deg, var(--teal) 0%, var(--sky) 100%);
  z-index:1200; pointer-events:none;
  transition:width 80ms linear;
}

/* ── Hero micro-trust ── */
.hero-trust {
  margin-top:18px; font-size:13.5px; font-weight:500;
  color:var(--text-mute); letter-spacing:0.01em;
}

/* ── Testimonial ── */
.testimonial {
  max-width:720px; margin:56px auto 0; text-align:center; position:relative;
  padding:36px 32px 30px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.testimonial::before {
  content:'״'; position:absolute; top:-26px; right:50%; transform:translateX(50%);
  font-family:var(--font-display); font-size:64px; line-height:1; color:var(--teal);
}
.testimonial blockquote {
  font-size:clamp(17px,2vw,20px); line-height:1.75; color:var(--text); font-weight:500; border:none; margin:0;
}
.testimonial figcaption { margin-top:16px; font-size:14px; color:var(--text-soft); }
.testimonial figcaption b { color:var(--text); }

/* ── Smart alerts (AI strip) ── */
.smart-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.smart-card {
  position:relative; z-index:1;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.10);
  border-radius:var(--r); padding:26px 24px 22px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color var(--micro) var(--ease), background var(--micro) var(--ease), box-shadow var(--micro) var(--ease);
}
.smart-card:hover { border-color:rgba(165,180,252,0.45); background:rgba(255,255,255,0.07); box-shadow:0 8px 32px rgba(165,180,252,0.10); }
.smart-ico {
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(165,180,252,0.12); color:var(--teal); font-size:20px; margin-bottom:14px;
}
.smart-tag {
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:0.06em;
  color:var(--teal); border:1px solid rgba(165,180,252,0.35); border-radius:100px;
  padding:2px 10px; margin-bottom:10px;
}
.smart-card h4 { color:var(--on-dark); font-size:1.05rem; margin-bottom:8px; }
.smart-card p { color:var(--on-dark-mute); font-size:0.92rem; line-height:1.65; }
@media (max-width:880px){ .smart-grid { grid-template-columns:1fr; } }

/* ── Demo (mock app) polish ── */
.sshot-win {
  box-shadow:
    0 1px 2px rgba(10,14,46,0.05),
    0 12px 36px rgba(10,14,46,0.10),
    0 28px 90px rgba(79,70,229,0.12);
}
.sshot-tr { transition:background 140ms var(--ease); }
.sshot-tr:hover { background:rgba(79,70,229,0.045); }
.sshot-money, .ph-money, .mob-card-price, .ssot-central .num, .ssot-screen-body b { font-variant-numeric:tabular-nums; }

@media (min-width:1101px) and (prefers-reduced-motion: no-preference){
  .hero-visual-desktop.sshot-float {
    transform:perspective(1600px) rotateY(7deg) rotateX(2deg);
    transition:transform 700ms var(--ease);
  }
  .hero-visual-desktop.sshot-float:hover { transform:perspective(1600px) rotateY(0) rotateX(0); }
}


/* ============================================================
   v14 — Lime spark layer (high-contrast contexts only)
   Lime appears on dark sections, as a highlighter chip, the motif
   dash and progress line — never as text on a light surface.
   ============================================================ */
.sec-dark .kicker, .sec-genesis .kicker { color: var(--lime); }
.zoom-core-sub em { color: var(--lime); }
.smart-ico { background: rgba(190,240,62,0.14); color: var(--lime); }
.smart-tag { color: var(--lime); border-color: rgba(190,240,62,0.40); }
.bg-accent-teal { background: var(--lime); color: var(--ink); }
.kicker::before { background: linear-gradient(90deg, var(--sky), var(--lime)); }
.scroll-progress { background: linear-gradient(270deg, var(--lime) 0%, var(--sky) 100%); }
.testimonial::before { color: var(--sky); }
::selection { background: rgba(190,240,62,0.42); color: var(--ink); }


/* ============================================================
   v14 — Lime INTERACTION layer
   Principle: Coral = conversion CTA (contact / schedule).
   Lime    = "your turn to act" — the playful, exploratory
   micro-interactions the user is invited to try on the page.
   Used only where contrast is safe (dark surfaces, or lime
   fills / rings / slider tracks with ink — never lime text on
   a light surface).
   ============================================================ */

/* 1 · Between-the-chairs hotspots (#blind, dark section) ----
   Idle = lime ring + lime pulse → reads as "click me".
   Hover/active still resolves to alert-red = the problem the
   click exposes. Lime invites; red reveals. */
.hotspot {
  border-color: rgba(190,240,62,0.55);
  color: var(--lime);
}
.hotspot .pulse { animation: pulse-lime 2.4s var(--ease) infinite; }
@keyframes pulse-lime {
  0%   { box-shadow: 0 0 0 0 rgba(190,240,62,0.50); }
  70%  { box-shadow: 0 0 0 14px rgba(190,240,62,0); }
  100% { box-shadow: 0 0 0 0 rgba(190,240,62,0); }
}
/* on engage → switch to the problem colour (red) */
.hotspot:hover, .hotspot:focus-visible, .hotspot.active {
  background: rgba(220,38,38,0.20);
  border-color: var(--alert);
  color: #fff;
}
.hotspot:hover .pulse,
.hotspot:focus-visible .pulse,
.hotspot.active .pulse { animation: none; }

/* 2 · Single-source-of-truth: the amount slider + register btn
   "אזור הגלילה של הסכום" → the control the user drags. */
.ssot-range { accent-color: var(--lime); cursor: pointer; }
.ssot-field label { font-weight: 600; }
.ssot-pay-row button {            /* #ssotPay "רישום" */
  background: var(--lime);
  color: var(--ink);
}
.ssot-pay-row button:hover { background: #AEE22E; }
.ssot-pay-row input:focus { border-color: var(--lime-deep); box-shadow: 0 0 0 3px rgba(190,240,62,0.22); }

/* 3 · Interaction cue text — the "הקישו / לחצו / נסו" prompts.
   A lime highlighter mark on the action verb signals
   "this part of the page responds to you". */
.act-cue {
  background-image: linear-gradient(transparent 58%, rgba(190,240,62,0.55) 58%);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.sec-dark .act-cue { color: var(--lime); background-image: none; border-bottom: 2px solid var(--lime); padding-bottom: 1px; }

/* 4 · Flow playground — invite the click before a node is chosen.
   (Light section: lime as a ring/border accent, not text.) */
.flow-node:not(.on):not(.hit):hover .flow-dot {
  border-color: var(--lime);
  box-shadow: 0 0 0 5px rgba(190,240,62,0.16);
}

/* ============================================================
   SEO — semantic hero H1 (keyword-bearing, sits under the
   graphic display headline without competing with it)
   ============================================================ */
.hero-h1 {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  font-weight: 800;
  color: var(--sky-deep);
  margin: 6px 0 14px;
  max-width: 30ch;
}
/* visually-hidden helper for indexable-but-quiet copy */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


/* ============================================================
   v14 — targeted refinements (round 2)
   ============================================================ */

/* (1) Flow "מה אם נתקע?" toggle → lime engagement button */
.flow-toggle {
  background: var(--lime);
  border-color: var(--lime-deep);
  color: var(--ink);
}
.flow-toggle:hover { background: #AEE22E; border-color: var(--lime-deep); color: var(--ink); }
.flow-toggle .ico { color: var(--ink); }
.flow-toggle.active {
  background: #AEE22E;
  border-color: var(--lime-deep);
  color: var(--ink);
  box-shadow: inset 0 2px 6px rgba(92,122,0,0.30);
}
.flow-toggle.active .ico { color: var(--ink); }

/* (2) Product-in-action check circles → lime fill + white check */
.feature-check {
  background: var(--lime);
  border-color: var(--lime-deep);
  color: #fff;
}
.feature-check .ico { stroke-width: 3.25; color: #fff; }

/* (4) Case-study section background → blush #FEE3E3 */
#case.sec-surface { background: #FEE3E3; }

/* (5) Industries flip-cards: reliable reveal on touch devices.
   On hover-less devices the sticky :hover state fought the
   .flipped class and hid the back text. Go fully static: tap
   swaps front ↔ back with no 3D transform. */
@media (hover: none) {
  .ind-card { height: auto; cursor: pointer; }
  .ind-inner { transform: none !important; transition: none; }
  .ind-face {
    position: static;
    inset: auto;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .ind-back { transform: none; display: none; }
  .ind-card.flipped .ind-front { display: none; }
  .ind-card.flipped .ind-back { display: flex; }
}

/* Mobile hero tagline — full-width line at the BOTTOM of the section,
   centred, on one line. (.hero is a flex row, so a static tagline
   became a flex item beside the content and landed on the left; we
   stack the hero vertically and let the tagline span the full width.) */
/* Before/After slider: keep the horizontal drag inside the demo.
   Without this, the passive touch drag let the browser pan the whole
   page sideways. pan-y = vertical page scroll still works, horizontal
   gesture is owned by the slider only. */
.ba-slider, .ba-handle { touch-action: pan-y; }

/* Blind section: on mobile show the "tap" cue ABOVE the hotspot icons
   (so it's clear they're clickable) and hide the bottom caption. */
.blind-tap-cue { display: none; }
@media (max-width: 900px) {
  .blind-tap-cue {
    display: block;
    order: 0;
    text-align: center;
    margin: 4px 0 2px;
    color: var(--on-dark-mute);
    font-size: 0.92rem;
    line-height: 1.4;
  }
  .blind-cap { display: none; }
}

/* SSOT section (mobile only): move the "drag the amount" cue to sit
   BETWEEN the amount control and the screens, so it's clear where to
   drag. Desktop is unchanged (cue hidden, bottom caption stays). */
.ssot-tap-cue { display: none; }
@media (max-width: 900px) {
  .ssot-tap-cue {
    display: block;
    text-align: center;
    margin: 2px 0 8px;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.45;
  }
  .ssot-cap { display: none; }
}

@media (max-width: 980px) {
  .hero { flex-direction: column; }
  .flow-tagline {
    position: static;
    order: 2;
    width: 100%;
    flex: 0 0 100%;
    bottom: auto; left: auto; right: auto;
    opacity: 1 !important;
    margin: 20px 0 0;
    padding: 0 16px;
    text-align: center;
    white-space: nowrap;
    font-size: 1.15rem;
  }
}