/* ============================================================
   InCont-rol — landing.css  (REWRITE 2026-06-14)
   System: DESIGN.md — light & rich, full palette.
   Green = growth/profit · Coral = energy/action · ink ramp.
   Dark drench bands (hero + final CTA) carry the Wayland-style
   richness peak. Sora display (two-tone, solid color — never
   gradient-clip) + Space Mono numerals. Isolated from lb-* .
   Zero AI tells: no gradient text, no border-left side-tabs,
   no layout-property animation, body contrast ≥ 4.5:1.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  /* base / ink ramp — neutral with the faintest green-ink whisper (NOT cream, NOT violet) */
  --bg:        oklch(98.8% 0.004 160);
  --bg-2:      oklch(97.2% 0.006 160);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(96.5% 0.008 160);
  --line:      oklch(90% 0.012 160);
  --line-soft: oklch(93.5% 0.008 160);
  --ink:       oklch(22% 0.02 160);
  --ink-soft:  oklch(40% 0.02 160);   /* body — ~7:1 on --bg */
  --ink-mut:   oklch(50% 0.016 160);  /* labels — ~4.7:1 */

  /* role: brand VIOLET (primary — ca platforma, #7c3aed IRIS) */
  --green:      oklch(54% 0.22 293);
  --green-deep: oklch(46% 0.21 293);  /* button fill, links on light */
  --green-tint: oklch(95.5% 0.035 293);
  --green-300:  oklch(80% 0.13 293);
  --green-on-dark: oklch(70% 0.19 293); /* violet text pe bandă închisă — AA */

  /* role: accent ALBASTRU */
  --coral:      oklch(62% 0.16 256);
  --coral-deep: oklch(52% 0.17 256);   /* blue text on light, blue fill */
  --coral-tint: oklch(95.5% 0.03 256);

  /* role: data / calm teal (sparing) */
  --teal:       oklch(52% 0.10 210);

  /* dark drench band */
  --ink-900:   oklch(18% 0.02 293);
  --ink-850:   oklch(22% 0.022 293);
  --on-dark:   oklch(97% 0 0);
  --on-dark-soft: oklch(80% 0.012 160);  /* body on dark — ≥6:1 */
  --on-dark-mut:  oklch(66% 0.012 160);

  /* shadows — soft, large, low-alpha, slightly green-tinted */
  --sh1: 0 1px 2px oklch(22% 0.02 160 / .06), 0 2px 8px oklch(22% 0.02 160 / .05);
  --sh2: 0 4px 12px oklch(22% 0.02 160 / .07), 0 12px 28px oklch(22% 0.02 160 / .07);
  --sh3: 0 10px 24px oklch(22% 0.02 160 / .09), 0 30px 60px oklch(22% 0.02 160 / .10);
  --sh-green: 0 12px 34px oklch(56% 0.17 293 / .28);
  --sh-coral: 0 12px 34px oklch(64% 0.18 258 / .26);

  /* radii / spacing */
  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --pad: clamp(20px, 5vw, 56px);
  --maxw: 1200px;

  /* z-scale (semantic, never 9999) */
  --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400;

  /* fonts */
  --fd: 'Sora', system-ui, sans-serif;
  --fb: 'Sora', system-ui, sans-serif;
  --fm: 'Space Mono', ui-monospace, monospace;

  /* easing */
  --e-out: cubic-bezier(.16,1,.3,1);     /* ease-out-expo-ish */
  --e-out-q: cubic-bezier(.22,1,.36,1);  /* ease-out-quart */
}

/* ── Reset / base ───────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink-soft);
  font-family:var(--fb); font-weight:420; font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--fd); color:var(--ink); margin:0; line-height:1.04;
  letter-spacing:-.03em; text-wrap:balance; font-weight:800; }
p{ margin:0; }
::selection{ background:var(--green-300); color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--green); outline-offset:3px; border-radius:6px; }
.hero :focus-visible, .cta-s :focus-visible, .skip-link:focus-visible{ outline-color:var(--on-dark); }
.skip-link{ position:absolute; left:12px; top:-48px; z-index:var(--z-toast); background:var(--green-deep);
  color:var(--on-dark); padding:.7em 1.1em; border-radius:var(--r-sm); font-family:var(--fb); font-weight:600;
  transition:top .2s var(--e-out); }
.skip-link:focus{ top:12px; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap{ position:relative; z-index:var(--z-base); }
main{ display:block; }
.mono{ font-family:var(--fm); }

/* ── Ambient background (subtle, not noisy) ─────────────── */
.bg-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.orb-1{ width:46vw; height:46vw; top:-14vw; right:-10vw;
  background:radial-gradient(circle, oklch(56% 0.17 293 / .14), transparent 70%); }
.orb-2{ width:38vw; height:38vw; top:46vh; left:-14vw;
  background:radial-gradient(circle, oklch(64% 0.18 258 / .10), transparent 70%); }
.orb-3{ width:30vw; height:30vw; bottom:-6vw; right:6vw;
  background:radial-gradient(circle, oklch(52% 0.10 210 / .08), transparent 70%); }
.bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(oklch(22% 0.02 160 / .03) 1px, transparent 1px),
                   linear-gradient(90deg, oklch(22% 0.02 160 / .03) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }

/* ── Buttons ────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--fb);
  font-weight:650; font-size:.975rem; line-height:1; padding:.85em 1.3em; border-radius:var(--r);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap; position:relative;
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out), background .25s, color .25s, border-color .25s; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn-lg{ padding:1em 1.5em; font-size:1.0625rem; }
.btn-xl{ padding:1.1em 1.7em; font-size:1.125rem; border-radius:16px; }
.btn-sm{ padding:.6em 1em; font-size:.875rem; }

/* primary — solid green-deep (white text ≥4.5:1), glow + sheen */
.btn-glow{ background:var(--green-deep); color:var(--on-dark); box-shadow:var(--sh-green); overflow:hidden; }
.btn-glow:hover{ background:oklch(50% 0.16 293); box-shadow:0 16px 44px oklch(56% 0.17 293 / .4); }
.btn-glow::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(105deg, transparent 30%, oklch(100% 0 0 / .35) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .7s var(--e-out); pointer-events:none; }
.btn-glow:hover::after{ transform:translateX(120%); }
.btn-arr{ transition:transform .35s var(--e-out); }
.btn-glow:hover .btn-arr{ transform:translateX(4px); }

/* coral energy variant */
.btn-coral{ background:var(--coral-deep); color:var(--on-dark); box-shadow:var(--sh-coral); }
.btn-coral:hover{ background:oklch(58% 0.18 258); }

/* outline / ghost (light) */
.btn-out{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-out:hover{ border-color:var(--green); background:var(--green-tint); color:var(--green-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:transparent; }
.btn-ghost:hover{ background:var(--surface-2); }

/* on dark variants */
.btn-out.on-d{ color:var(--on-dark); border-color:oklch(100% 0 0 / .22); }
.btn-out.on-d:hover{ border-color:var(--green); background:oklch(56% 0.17 293 / .14); color:var(--on-dark); }

/* mid-page CTA (Începe gratuit repetat pe parcurs) */
.mid-cta{ text-align:center; padding:clamp(8px,1.6vw,18px) 0; }

/* ── Nav ────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:var(--z-sticky); padding:14px 0;
  transition:background .3s, box-shadow .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent; }
.nav.is-stuck{ background:oklch(98.8% 0.004 160 / .82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line-soft); box-shadow:var(--sh1); }
.nav-in{ display:flex; align-items:center; gap:24px; }
.nav-logo{ font-family:var(--fd); font-weight:800; font-size:1.3rem; letter-spacing:-.03em;
  color:var(--ink); display:inline-flex; align-items:center; gap:10px; }
.nav-logo span{ color:var(--green-deep); }
.nav-mark{ width:26px; height:26px; border-radius:8px; display:inline-block;
  background:linear-gradient(135deg, var(--green), var(--coral)); box-shadow:var(--sh-green); }
.nav-links{ display:flex; gap:6px; list-style:none; margin:0 auto 0 8px; padding:0; }
.nav-links a{ display:block; padding:.5em .8em; border-radius:var(--r-sm); color:var(--ink-soft);
  font-weight:550; font-size:.95rem; transition:color .2s, background .2s; }
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-actions{ display:flex; align-items:center; gap:10px; }

/* ── Hero — DARK DRENCH band (richness peak #1) ─────────── */
.hero{ position:relative; background:var(--ink-900); color:var(--on-dark-soft);
  margin-top:-1px; padding-top:clamp(48px,7vw,96px); padding-bottom:clamp(44px,6vw,84px); overflow:hidden; isolation:isolate; }
.hero-mesh{ position:absolute; inset:-12%; z-index:0; pointer-events:none;
  will-change:transform, opacity; animation:heroGlow 22s ease-in-out infinite alternate;
  background:
    radial-gradient(60% 50% at 22% 8%, oklch(56% 0.17 293 / .28), transparent 60%),
    radial-gradient(55% 45% at 88% 18%, oklch(64% 0.18 258 / .20), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, oklch(52% 0.10 210 / .14), transparent 60%); }
@keyframes heroGlow{
  0%{ transform:translate3d(-2%,-1%,0) scale(1.04); opacity:.85; }
  50%{ transform:translate3d(1.5%,1%,0) scale(1.12); opacity:1; }
  100%{ transform:translate3d(2.5%,2.5%,0) scale(1.08); opacity:.9; } }
.hero .container{ position:relative; z-index:1; }
.hero-top{ max-width:880px; margin-inline:auto; text-align:center; padding-bottom:clamp(34px,5vw,60px); }

.term-line{ display:inline-flex; align-items:center; gap:9px; font-family:var(--fm); font-size:.8rem;
  letter-spacing:.02em; color:var(--on-dark-mut); background:oklch(100% 0 0 / .06);
  border:1px solid oklch(100% 0 0 / .12); padding:.5em .95em; border-radius:var(--r-pill); margin-bottom:24px; }
.term-dot{ width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 4px oklch(56% 0.17 293 / .2); }

.t-xl{ font-size:clamp(2.6rem, 1.1rem + 5.4vw, 5.25rem); font-weight:800; line-height:1.02;
  letter-spacing:-.038em; color:var(--on-dark); }
.hero-phrase{ color:var(--green-on-dark); font-style:normal; }   /* two-tone — SOLID color, not gradient */
.hero-sub{ font-size:clamp(1.0625rem,1rem + .5vw,1.3rem); color:var(--on-dark-soft);
  max-width:60ch; margin:18px auto 0; line-height:1.55; }
.hero-acts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.trust-row{ display:flex; gap:8px 22px; justify-content:center; flex-wrap:wrap; margin-top:22px;
  font-family:var(--fm); font-size:.78rem; color:var(--on-dark-mut); }
.trust-item{ position:relative; padding-left:18px; }
.trust-item::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-family:var(--fb); font-weight:700; }

/* hero mockup — light screenshot in chrome, glow, overlaps into next (light) section */
.mockup-stage{ position:relative; max-width:1040px; margin:0 auto;
  perspective:1600px; padding-bottom:clamp(40px,7vw,90px); }
.mockup-outer{ position:relative; border-radius:var(--r-lg); background:var(--surface);
  box-shadow:0 40px 90px oklch(0% 0 0 / .45), 0 0 0 1px oklch(100% 0 0 / .06),
             0 0 80px oklch(56% 0.17 293 / .22);
  transform:translateZ(0) rotateX(7deg); transform-origin:50% 100%;
  transition:transform .5s var(--e-out); will-change:transform; }
.mockup-chrome{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.mockup-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--bg-2);
  border-bottom:1px solid var(--line); }
.mockup-bar i{ width:11px; height:11px; border-radius:50%; background:var(--line); display:block; }
.mockup-bar i:nth-child(1){ background:#ff5f57; } .mockup-bar i:nth-child(2){ background:#febc2e; }
.mockup-bar i:nth-child(3){ background:#28c840; }
.mockup-url{ flex:1; text-align:center; font-family:var(--fm); font-size:.72rem; color:var(--ink-mut);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.32em 1em; max-width:300px; margin-inline:auto; }
.mockup-live{ font-family:var(--fm); font-size:.7rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:6px; }
.mockup-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
.mockup-img{ width:100%; height:auto; display:block; }

/* floating KPI chips around the mockup */
.kpi-chip{ position:absolute; z-index:3; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh2); padding:10px 14px; display:flex; flex-direction:column; gap:2px;
  backface-visibility:hidden; will-change:transform; animation:chipFloat 7s ease-in-out infinite; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.kpi-chip .k-val{ font-family:var(--fm); font-weight:700; font-size:1.05rem; color:var(--ink); }
.kpi-chip .k-lab{ font-size:.68rem; color:var(--ink-mut); }
.kpi-chip.k-green .k-val{ color:var(--green-deep); }
.kpi-chip.k-coral .k-val{ color:var(--coral-deep); }
.kpi-chip.c1{ top:18%; left:-3%; animation-delay:0s; } .kpi-chip.c2{ top:54%; right:-4%; animation-delay:1.6s; } .kpi-chip.c3{ bottom:24%; left:2%; animation-delay:3.1s; }
@media(max-width:820px){ .kpi-chip{ display:none; } }

/* ── Hero „source feed" — circuit de alimentare (surse → bus → hub → dashboard, curent verde în SUS) ── */
.hero-feed{ width:100%; max-width:1060px; margin:8px auto 0; position:relative; z-index:4; }
.hf-wrap{ position:relative; width:100%; }
.hf-svg{ display:block; width:100%; height:auto; overflow:visible; }
.hf-wire{ fill:none; stroke:oklch(70% 0.18 293); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:5 10;
  animation:hfFlow 1.1s linear infinite; filter:drop-shadow(0 0 6px oklch(64% 0.18 293 / .9)); }
.hf-bus-l, .hf-bus-r{ stroke-width:2.6; }
.hf-drop.d2{animation-delay:-.1s}.hf-drop.d3{animation-delay:-.2s}.hf-drop.d4{animation-delay:-.3s}.hf-drop.d5{animation-delay:-.4s}.hf-drop.d6{animation-delay:-.5s}.hf-drop.d7{animation-delay:-.6s}.hf-drop.d8{animation-delay:-.7s}.hf-drop.d9{animation-delay:-.8s}.hf-drop.d10{animation-delay:-.9s}
.hf-spark{ fill:oklch(88% 0.13 293); filter:drop-shadow(0 0 7px oklch(76% 0.18 293 / .95)); }
.hf-node{ fill:var(--green-on-dark); filter:drop-shadow(0 0 5px oklch(62% 0.17 293 / .9)); }
.hf-halo{ fill:none; stroke:oklch(60% 0.17 293 / .3); stroke-width:1.5; transform-box:fill-box; transform-origin:center;
  animation:hfHub 2.6s ease-in-out infinite; }
.hf-hub{ fill:var(--ink-850); stroke:var(--green-on-dark); stroke-width:2; filter:drop-shadow(0 0 12px oklch(62% 0.17 293 / .65)); animation:hfHubGlow 2.6s ease-in-out infinite; }
.hf-bolt{ fill:var(--green-on-dark); stroke:var(--green-on-dark); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 8px oklch(72% 0.2 293 / .6)); transform-box:fill-box; transform-origin:center; animation:hfBoltSpin 16s linear infinite; }
@keyframes hfFlow{ to{ stroke-dashoffset:-30; } }
@keyframes hfHub{ 0%,100%{ opacity:.4; transform:scale(1); } 50%{ opacity:.12; transform:scale(1.28); } }
@keyframes hfHubGlow{ 0%,100%{ filter:drop-shadow(0 0 14px oklch(62% 0.17 293 / .55)); } 50%{ filter:drop-shadow(0 0 36px oklch(70% 0.2 293 / .92)); } }
@keyframes hfBoltSpin{ to{ transform:rotate(360deg); } }
.hf-sources{ display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(5px,.8vw,11px); margin-top:2px; }
.hf-src{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 4px 14px;
  background:oklch(100% 0 0 / .05); border:1px solid oklch(60% 0.17 293 / .2); border-radius:var(--r-sm);
  transition:border-color .25s, box-shadow .25s; animation:hfTabPop 4.5s ease-in-out infinite; }
.hf-src::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(130% 85% at 50% 0%, oklch(62% 0.17 293 / .3), transparent 72%);
  animation:hfTabWave 4.5s ease-in-out infinite; }
@keyframes hfTabWave{ 0%,52%,100%{ opacity:0; } 9%{ opacity:1; } 26%{ opacity:0; } }
@keyframes hfTabPop{
  0%,52%,100%{ transform:translateY(0); border-color:oklch(60% 0.17 293 / .2); box-shadow:0 0 0 0 oklch(60% 0.17 293 / 0); }
  9%{ transform:translateY(-3px); border-color:oklch(66% 0.18 293 / .85); box-shadow:0 0 22px 1px oklch(62% 0.17 293 / .32); }
  26%{ transform:translateY(0); border-color:oklch(60% 0.17 293 / .2); box-shadow:0 0 0 0 oklch(60% 0.17 293 / 0); } }
.hf-src.s2{animation-delay:.45s}.hf-src.s3{animation-delay:.9s}.hf-src.s4{animation-delay:1.35s}.hf-src.s5{animation-delay:1.8s}.hf-src.s6{animation-delay:2.25s}.hf-src.s7{animation-delay:2.7s}.hf-src.s8{animation-delay:3.15s}.hf-src.s9{animation-delay:3.6s}.hf-src.s10{animation-delay:4.05s}
.hf-src.s2::after{animation-delay:.45s}.hf-src.s3::after{animation-delay:.9s}.hf-src.s4::after{animation-delay:1.35s}.hf-src.s5::after{animation-delay:1.8s}.hf-src.s6::after{animation-delay:2.25s}.hf-src.s7::after{animation-delay:2.7s}.hf-src.s8::after{animation-delay:3.15s}.hf-src.s9::after{animation-delay:3.6s}.hf-src.s10::after{animation-delay:4.05s}
.hf-src:hover{ border-color:oklch(60% 0.17 293 / .55); box-shadow:0 0 22px oklch(60% 0.17 293 / .26); }
.hf-src-ic{ display:grid; place-items:center; width:30px; height:30px; color:var(--green-on-dark); position:relative; z-index:1; }
.hf-src-ic svg{ width:20px; height:20px; }
.hf-src-lab{ font-family:var(--fm); font-size:.66rem; letter-spacing:.02em; color:var(--on-dark-soft); position:relative; z-index:1; }
@media(max-width:980px){ .hf-sources{ grid-template-columns:repeat(5,1fr); } .hf-svg{ display:none; } .hero-feed{ margin-top:12px; max-width:600px; } }
@media(max-width:520px){ .hf-sources{ grid-template-columns:repeat(3,1fr); } }

/* ── Section scaffolding ───────────────────────────────── */
.sec{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.sec-head{ max-width:720px; margin:0 auto clamp(36px,5vw,60px); text-align:center; }
.sec-head.left{ margin-inline:0; text-align:left; }
.sec-kick{ font-family:var(--fm); font-size:.78rem; letter-spacing:.04em; color:var(--green-deep);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; }
.sec-kick::before{ content:""; width:22px; height:2px; background:var(--green); border-radius:2px; }
.h2{ font-size:clamp(2rem,1.2rem + 2.6vw,3.1rem); font-weight:800; letter-spacing:-.032em; }
.h2 em{ color:var(--green-deep); font-style:normal; }
.sec-lead{ font-size:1.125rem; color:var(--ink-soft); margin-top:14px; max-width:60ch; }
.sec-head:not(.left) .sec-lead{ margin-inline:auto; }

/* ── Stat ticker (Wayland-borrowed) ─────────────────────── */
.ticker{ border-block:1px solid var(--line); background:var(--bg-2); }
.ticker-in{ display:flex; flex-wrap:wrap; gap:10px 0; justify-content:space-between; padding:22px 0; }
.tick{ display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:140px; position:relative; }
.tick + .tick::before{ content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background:var(--line); }
.tick .t-num{ font-family:var(--fm); font-weight:700; font-size:clamp(1.3rem,1rem + 1vw,1.7rem); color:var(--ink); }
.tick.g .t-num{ color:var(--green-deep); } .tick.c .t-num{ color:var(--coral-deep); }
.tick .t-lab{ font-size:.8rem; color:var(--ink-mut); }

/* ── Pain (3) — varied, not identical grid ──────────────── */
.pain-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }
.pain-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px; transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.pain-card:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--coral); }
.pain-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem;
  background:var(--coral-tint); color:var(--coral-deep); margin-bottom:16px; }
.icn{ width:22px; height:22px; display:block; }
.pain-card h3{ font-size:1.2rem; margin-bottom:8px; }
.pain-card p{ color:var(--ink-soft); font-size:.975rem; }

/* ── Benefits (4) ───────────────────────────────────────── */
.ben-grid{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.ben-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.ben-card:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--green); }
.ben-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.15rem;
  background:var(--green-tint); color:var(--green-deep); margin-bottom:14px; }
.ben-card h3{ font-size:1.08rem; margin-bottom:7px; }
.ben-card p{ font-size:.925rem; color:var(--ink-soft); }

/* ── How (3 pași) ───────────────────────────────────────── */
.how{ padding-bottom:clamp(18px,2.6vw,32px); }
.how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,44px); position:relative; }
.how-step{ position:relative; padding:0 2px; text-align:center; }
.how-num{ font-family:var(--fm); font-weight:700; color:var(--green-deep); display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%; background:var(--green-tint); margin:0 auto;
  position:relative; z-index:1; }
.how-ic{ display:block; color:var(--green-deep); margin:0; }
.how-head{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0 8px; }
.how-head .how-ic{ margin:0; }
.how-head h3{ margin:0; text-align:center; max-width:20ch; }
.how-step h3{ font-size:1.12rem; margin-bottom:7px; }
.how-step p{ color:var(--ink-soft); font-size:.95rem; }
@media(min-width:768px){ .how-steps::before{ content:""; position:absolute; top:21px; left:16.667%; right:16.667%; transform:translateY(-50%); height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--green-tint) 0%, var(--green-300) 28%, var(--green) 44%, var(--green-300) 60%, var(--green-tint) 88%);
  background-size:230% 100%; animation:howLineFlow 3.9s linear infinite; z-index:0; } }
@media(max-width:640px){ .how-steps{ grid-template-columns:1fr; gap:22px; } .how-steps::before{ display:none; } }

/* ── Trust band ─────────────────────────────────────────── */
.trust-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(14px,2.2vw,24px); }
.trust-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.trust-card:hover{ transform:translateY(-3px); box-shadow:var(--sh2); border-color:var(--green); }
.trust-ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--green-tint); color:var(--green-deep); margin-bottom:12px; }
.trust-card h3{ font-size:1.04rem; margin-bottom:6px; }
.trust-card p{ font-size:.92rem; color:var(--ink-soft); }
.founder-note{ max-width:62ch; margin:clamp(26px,4vw,40px) auto 0; text-align:center; }
.founder-note blockquote{ margin:0; font-family:var(--fd); font-weight:600;
  font-size:clamp(1.05rem,.9rem + .7vw,1.35rem); color:var(--ink); line-height:1.45; }
.founder-note figcaption{ font-family:var(--fm); font-size:.8rem; color:var(--ink-mut); margin-top:12px; }

/* panel ilustrativ (machetă marcată onest) */
.feat-panel.is-illustrative{ position:relative; }
.fp-illustrative{ position:absolute; top:8px; right:8px; font-family:var(--fm); font-weight:600; font-size:.62rem;
  color:var(--ink-mut); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:.28em .7em; }

/* ── eMAG suite (bandă închisă — feature vedetă) ─────────── */
.emag-suite{ background:var(--ink-900); color:var(--on-dark-soft); position:relative; overflow:hidden; isolation:isolate; }
.emag-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 50% at 18% 0%, oklch(56% 0.17 293 / .22), transparent 60%),
            radial-gradient(52% 44% at 92% 26%, oklch(64% 0.18 258 / .14), transparent 60%); }
.emag-kick{ color:var(--green-300); }
.emag-kick::before{ background:var(--green-300); }
.emag-h2{ color:var(--on-dark); }
.emag-h2 em{ color:var(--green-on-dark); font-style:normal; }
.emag-lead{ color:var(--on-dark-soft); }
.emag-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3.2vw,44px); }
.emag-shot{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-850);
  border:1px solid oklch(100% 0 0 / .08); box-shadow:0 18px 44px oklch(0% 0 0 / .34);
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out); }
.emag-shot:hover{ transform:translateY(-5px); box-shadow:0 28px 60px oklch(56% 0.17 293 / .26); }
.emag-shot img{ width:100%; height:auto; display:block; border-bottom:1px solid oklch(100% 0 0 / .07); }
.emag-shot figcaption{ padding:15px 18px 17px; font-size:.93rem; color:var(--on-dark-soft); line-height:1.45; }
.emag-tag{ display:inline-block; font-family:var(--fm); font-size:.68rem; letter-spacing:.04em; color:var(--green-300);
  background:oklch(56% 0.17 293 / .16); border-radius:var(--r-pill); padding:.3em .8em; margin-right:9px; }
.emag-foot{ text-align:center; color:var(--on-dark-mut); max-width:64ch; margin:clamp(22px,3vw,36px) auto 0; font-size:.94rem; }
.emag-foot strong{ color:var(--on-dark-soft); }
@media(max-width:780px){ .emag-grid{ grid-template-columns:1fr; } }

/* ── Features: spotlight rows + bento + ticker + more ───── */
.feat-spot{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center;
  padding:clamp(28px,4vw,46px) 0; }
.feat-spot.rev .feat-txt{ order:2; }
.feat-eyebrow{ font-family:var(--fm); font-size:.78rem; color:var(--coral-deep); margin-bottom:12px; letter-spacing:.02em; }
.feat-txt h3{ font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); letter-spacing:-.025em; margin-bottom:14px; }
.feat-txt p{ color:var(--ink-soft); font-size:1.05rem; margin-bottom:18px; }
.feat-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.feat-list li{ position:relative; padding-left:30px; color:var(--ink); font-size:.975rem; }
.feat-list li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:20px; height:20px; border-radius:6px;
  background:var(--green-tint); color:var(--green-deep); display:grid; place-items:center; font-size:.72rem; font-weight:700; }
.feat-shot{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--sh3); }
.feat-shot img{ width:100%; height:auto; }
.feat-spot .feat-shot{ transition:transform .45s var(--e-out), box-shadow .45s var(--e-out); will-change:transform; }
.feat-spot:hover .feat-shot{ transform:translateY(-6px); box-shadow:0 28px 58px oklch(56% 0.17 293 / .2); }
.feat-spot.rev:hover .feat-shot{ box-shadow:0 28px 58px oklch(64% 0.18 258 / .18); }
.feat-shot .shot-glow{ position:absolute; inset:-30% -10% auto; height:60%; z-index:-1;
  background:radial-gradient(closest-side, oklch(56% 0.17 293 / .35), transparent); filter:blur(40px); }
.feat-spot.rev .feat-shot .shot-glow{ background:radial-gradient(closest-side, oklch(64% 0.18 258 / .3), transparent); }

/* designed on-brand preview panels (eMAG, planificare) — sit in the same .feat-shot frame as real screenshots */
.feat-panel{ background:var(--surface); padding:22px; min-height:248px; display:flex; flex-direction:column; gap:11px; }
.fp-head{ font-family:var(--fm); font-size:.76rem; color:var(--ink-mut); display:flex; align-items:center; gap:8px;
  padding-bottom:12px; border-bottom:1px solid var(--line); }
.fp-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px oklch(56% 0.17 293 / .15); }
.fp-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 13px; border-radius:11px; background:var(--bg-2); }
.fp-row.is-you{ background:var(--green-tint); }
.fp-rank{ font-family:var(--fm); font-weight:700; color:var(--ink-mut); font-size:.9rem; }
.fp-rank.lead{ color:var(--coral-deep); }
.fp-name{ font-weight:600; color:var(--ink); font-size:.94rem; display:flex; align-items:center; gap:8px; min-width:0; }
.fp-badge{ font-family:var(--fm); font-size:.6rem; padding:.22em .5em; border-radius:6px; white-space:nowrap; }
.fp-badge.own{ background:var(--green); color:var(--on-dark); }
.fp-price{ font-family:var(--fm); font-weight:700; color:var(--ink); white-space:nowrap; }
.fp-foot{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.fp-chip{ font-family:var(--fm); font-size:.72rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.4em .8em; color:var(--ink); }
.fp-chip.green{ background:var(--green-tint); color:var(--green-deep); border-color:transparent; }
.fp-chip.coral{ background:var(--coral-tint); color:var(--coral-deep); border-color:transparent; }
.plan-prod{ font-size:.96rem; color:var(--ink); font-weight:550; }
.plan-prod .mono{ color:var(--green-deep); font-weight:700; }
.plan-bar{ position:relative; height:16px; border-radius:8px; background:var(--surface-2); overflow:hidden; margin-top:2px; }
.plan-bar-fill{ position:absolute; top:0; bottom:0; left:0; width:58%; border-radius:8px;
  background:linear-gradient(90deg, var(--green), var(--green-300)); }
.plan-bar-tick{ position:absolute; top:-4px; bottom:-4px; left:58%; width:2px; background:var(--coral-deep); border-radius:2px; }
.plan-meta{ display:flex; justify-content:space-between; font-family:var(--fm); font-size:.68rem; color:var(--ink-mut); }
.plan-row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:10px 13px; border-radius:11px; background:var(--bg-2); }
.plan-row .pr-when{ font-family:var(--fm); font-size:.8rem; }
.plan-row.warn{ background:var(--coral-tint); } .plan-row.warn .pr-when{ color:var(--coral-deep); font-weight:700; }
.plan-row.ok .pr-when{ color:var(--green-deep); font-weight:700; }

/* module gallery (ecrane reale, restul platformei) */
.mod-grid{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3.2vw,44px); }
.mod-card{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh2); transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.mod-card:hover{ transform:translateY(-5px); box-shadow:var(--sh3); border-color:var(--green); }
.mod-card img{ width:100%; height:auto; display:block; border-bottom:1px solid var(--line); }
.mod-card figcaption{ padding:15px 18px 17px; font-size:.94rem; color:var(--ink-soft); line-height:1.45; }
.mod-tag{ display:inline-block; font-family:var(--fm); font-size:.68rem; letter-spacing:.04em; color:var(--green-deep);
  background:var(--green-tint); border-radius:var(--r-pill); padding:.3em .8em; margin-right:9px; }
@media(max-width:780px){ .mod-grid{ grid-template-columns:1fr; } }

/* bento (varied sizes) */
.feat-gridhead{ margin-top:clamp(40px,6vw,80px); margin-bottom:26px; }
.feat-grid{ display:grid; gap:16px; grid-template-columns:repeat(6,1fr); }
.feat-bl{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; position:relative; overflow:hidden; }
.feat-bl:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--green); }
.feat-bl.span-3{ grid-column:span 3; } .feat-bl.span-2{ grid-column:span 2; }
.feat-bl .bl-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.15rem;
  background:var(--green-tint); color:var(--green-deep); margin-bottom:14px; }
.feat-bl.accent .bl-ic{ background:var(--coral-tint); color:var(--coral-deep); }
.feat-bl h3{ font-size:1.15rem; margin-bottom:8px; }
.feat-bl p{ font-size:.94rem; color:var(--ink-soft); }
.feat-bl .bl-fig{ font-family:var(--fm); font-weight:700; color:var(--green-deep); font-size:1.6rem; margin-top:14px; }
.feat-bl.accent .bl-fig{ color:var(--coral-deep); }

.feat-more{ margin-top:36px; padding:24px; border:1px dashed var(--line); border-radius:var(--r-lg);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; background:var(--bg-2); }
.feat-more-title{ font-family:var(--fd); font-weight:700; color:var(--ink); margin-right:8px; }
.feat-more-badge{ font-family:var(--fm); font-size:.82rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.45em .95em; transition:border-color .2s, color .2s; }
.feat-more-badge:hover{ border-color:var(--green); color:var(--green-deep); }

/* ── Audience (4) ───────────────────────────────────────── */
.aud-grid{ display:grid; gap:16px; grid-template-columns:repeat(4,1fr); }
.aud-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.aud-card:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--green); }
.aud-emoji{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:var(--green-tint); color:var(--green-deep); margin-bottom:12px; }
.aud-card h3{ font-size:1.05rem; margin-bottom:7px; }
.aud-card p{ font-size:.92rem; color:var(--ink-soft); }

/* ── Romania (RO-specific) ──────────────────────────────── */
.ro-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.ro-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  transition:transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .3s; }
.ro-card:hover{ transform:translateY(-4px); box-shadow:var(--sh2); border-color:var(--green); }
.ro-card h3{ font-size:1.05rem; margin-bottom:7px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ro-card h3 .ro-tag{ font-family:var(--fm); font-size:.66rem; background:var(--green-tint); color:var(--green-deep);
  padding:.25em .55em; border-radius:6px; }
.ro-card p{ font-size:.92rem; color:var(--ink-soft); }
.ro-note{ margin-top:24px; text-align:center; font-size:.92rem; color:var(--ink-mut); }

/* ── Pricing ────────────────────────────────────────────── */
.price-wrap{ max-width:560px; margin-inline:auto; }
.price-card{ background:var(--surface); border:1.5px solid var(--green); border-radius:var(--r-xl);
  padding:clamp(30px,4vw,46px); box-shadow:var(--sh3); position:relative; overflow:hidden; }
.price-card::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,var(--green),var(--coral)); }
.price-badge{ display:inline-block; font-family:var(--fm); font-size:.74rem; color:var(--green-deep);
  background:var(--green-tint); border-radius:var(--r-pill); padding:.4em .9em; margin-bottom:18px; }
.price-amt{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.price-amt .pa-num{ font-family:var(--fd); font-weight:800; font-size:clamp(3rem,2rem + 4vw,4.4rem); color:var(--ink); letter-spacing:-.04em; }
.price-amt .pa-cur{ font-family:var(--fd); font-weight:700; font-size:1.6rem; color:var(--ink); }
.price-amt .pa-per{ color:var(--ink-mut); font-size:1rem; }
.price-vat{ font-family:var(--fm); font-size:.82rem; color:var(--ink-mut); margin-bottom:22px; }
.price-feats{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; }
.price-feats li{ position:relative; padding-left:30px; color:var(--ink); }
.price-feats li::before{ content:"✓"; position:absolute; left:0; width:20px; height:20px; border-radius:6px;
  background:var(--green); color:var(--on-dark); display:grid; place-items:center; font-size:.72rem; font-weight:700; }
.price-card .btn{ width:100%; justify-content:center; }
.price-fine{ text-align:center; font-size:.85rem; color:var(--ink-mut); margin-top:14px; }

/* ── Comparison (before / after) ────────────────────────── */
.cmp-grid{ display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.cmp-card{ border-radius:var(--r-lg); padding:30px; border:1px solid var(--line); }
.cmp-card.before{ background:var(--surface-2); }
.cmp-card.after{ background:var(--ink-900); color:var(--on-dark-soft); border-color:transparent; box-shadow:var(--sh3); }
.cmp-card h3{ font-size:1.2rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.cmp-card.after h3{ color:var(--on-dark); }
.cmp-card .cmp-tag{ font-family:var(--fm); font-size:.68rem; padding:.3em .6em; border-radius:6px; }
.cmp-card.before .cmp-tag{ background:oklch(60% 0.02 30 / .15); color:var(--ink-mut); }
.cmp-card.after .cmp-tag{ background:oklch(56% 0.17 293 / .25); color:var(--green-300); }
.cmp-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cmp-list li{ position:relative; padding-left:28px; font-size:.975rem; }
.cmp-card.before .cmp-list li{ color:var(--ink-soft); }
.cmp-card.before .cmp-list li::before{ content:"✕"; position:absolute; left:0; color:var(--coral-deep); font-weight:700; }
.cmp-card.after .cmp-list li{ color:var(--on-dark-soft); }
.cmp-card.after .cmp-list li::before{ content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-list{ max-width:760px; margin-inline:auto; display:grid; gap:12px; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .25s; }
.faq-item.open{ border-color:var(--green); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 22px;
  font-family:var(--fd); font-weight:650; font-size:1.05rem; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-ic{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--green-tint); color:var(--green-deep);
  display:grid; place-items:center; font-size:1.1rem; transition:transform .35s var(--e-out), background .25s, color .25s; }
.faq-item.open .faq-ic{ transform:rotate(45deg); background:var(--green); color:var(--on-dark); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--e-out), visibility .4s; }
.faq-item:not(.open) .faq-a{ visibility:hidden; }
.faq-item.open .faq-a{ grid-template-rows:1fr; visibility:visible; }
.faq-a-in{ overflow:hidden; }
.faq-a p{ padding:0 22px 22px; color:var(--ink-soft); font-size:.975rem; }

/* ── Final CTA — DARK DRENCH band (richness peak #2) ────── */
.cta-s{ position:relative; background:var(--ink-900); color:var(--on-dark-soft); overflow:hidden; isolation:isolate; }
.cta-s .cta-mesh{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 80% at 30% 20%, oklch(56% 0.17 293 / .3), transparent 60%),
            radial-gradient(55% 70% at 85% 90%, oklch(64% 0.18 258 / .22), transparent 60%); }
.cta-in{ position:relative; z-index:1; max-width:720px; margin-inline:auto; text-align:center; }
.cta-in h2{ color:var(--on-dark); font-size:clamp(2.2rem,1.3rem + 3vw,3.6rem); letter-spacing:-.035em; }
.cta-in h2 em{ color:var(--green-on-dark); font-style:normal; }
.cta-in p{ color:var(--on-dark-soft); font-size:1.15rem; margin:16px auto 30px; max-width:48ch; }
.cta-acts{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-fine{ font-family:var(--fm); font-size:.78rem; color:var(--on-dark-mut); margin-top:20px; }

/* ── Footer ─────────────────────────────────────────────── */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:56px 0 30px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:30px; margin-bottom:36px; }
.footer-brand .nav-logo{ margin-bottom:12px; }
.footer-brand p{ color:var(--ink-soft); font-size:.92rem; max-width:34ch; }
.footer-col h3{ font-family:var(--fd); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-mut); margin-bottom:14px; font-weight:700; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-col a{ color:var(--ink-soft); font-size:.92rem; }
.footer-col a:hover{ color:var(--green-deep); }
.footer-bot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding-top:24px; border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-mut); }
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ── Cookie banner ──────────────────────────────────────── */
#cookie-banner{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:var(--z-toast);
  max-width:560px; width:calc(100% - 32px); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh3); padding:18px 20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
#cookie-banner[hidden]{ display:none; }
#cookie-banner p{ flex:1; min-width:220px; font-size:.88rem; color:var(--ink-soft); }
#cookie-banner .ck-acts{ display:flex; gap:10px; }

/* ── Reveal motion (progressive enhancement) ────────────── */
.fu{ opacity:1; }                          /* visible by default */
html.js-anim .fu{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--e-out), transform .7s var(--e-out); }
html.js-anim .fu.in{ opacity:1; transform:none; }
html.js-anim .fu.d1{ transition-delay:.05s; } html.js-anim .fu.d2{ transition-delay:.13s; }
html.js-anim .fu.d3{ transition-delay:.21s; } html.js-anim .fu.d4{ transition-delay:.29s; }
html.js-anim .stag > *{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--e-out), transform .6s var(--e-out); }
html.js-anim .stag.in > *{ opacity:1; transform:none; }
html.js-anim .stag.in > *:nth-child(2){ transition-delay:.07s; }
html.js-anim .stag.in > *:nth-child(3){ transition-delay:.14s; }
html.js-anim .stag.in > *:nth-child(4){ transition-delay:.21s; }
html.js-anim .stag.in > *:nth-child(5){ transition-delay:.28s; }
html.js-anim .stag.in > *:nth-child(6){ transition-delay:.35s; }

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1024px){
  .ben-grid,.aud-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-grid{ grid-template-columns:repeat(4,1fr); }
  .feat-bl.span-3{ grid-column:span 2; } .feat-bl.span-2{ grid-column:span 2; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:860px){
  .nav-links{ display:none; }
  .feat-spot{ grid-template-columns:1fr; gap:26px; }
  .feat-spot.rev .feat-txt{ order:0; }
  .pain-grid,.ro-grid{ grid-template-columns:1fr; }
  .cmp-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .ben-grid,.aud-grid,.feat-grid{ grid-template-columns:1fr; }
  .feat-bl.span-3,.feat-bl.span-2{ grid-column:span 1; }
  .footer-top{ grid-template-columns:1fr; }
  .tick{ min-width:46%; }
  .nav-actions .btn-ghost{ display:none; }
}

/* ============================================================
   MOTION & MICRO-INTERACTIONS (2026-06-14 — „life" pass)
   Compositor-only (transform/opacity/clip-path/box-shadow on
   tiny elements). Scroll reveals are html.js-anim-gated → they
   are inert under reduced-motion (js-anim is never added then).
   Hover effects degrade to instant. No layout-property anim.
   ============================================================ */

/* #how — connector line draws left→right, then number badges pop */
@media(min-width:768px){
  html.js-anim .how-steps::before{ transform:translateY(-50%) scaleX(0); transform-origin:left center;
    transition:transform .8s var(--e-out); }
  html.js-anim .how-steps.in::before{ transform:translateY(-50%) scaleX(1); }
}
/* number badges pulse in sequence 1→2→3, CONTINUOUSLY (always-on, unmistakable) */
@keyframes howNumPulse{
  0%,62%,100%{ transform:scale(1); box-shadow:0 0 0 0 oklch(56% 0.17 293 / 0); }
  10%{ transform:scale(1.16); box-shadow:0 0 0 9px oklch(56% 0.17 293 / .16); }
  30%{ transform:scale(1); box-shadow:0 0 0 0 oklch(56% 0.17 293 / 0); } }
@keyframes howLineFlow{ 0%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }
.how-num{ animation:howNumPulse 3.9s ease-in-out infinite; }
.how-step:nth-child(2) .how-num{ animation-delay:1.3s; }
.how-step:nth-child(3) .how-num{ animation-delay:2.6s; }

/* Comparison cards slide in from their own side (override .fu translateY).
   NOTE: explicit .in reset needed — these 3-class selectors out-specify .fu.in. */
html.js-anim .cmp-card.before.fu{ transform:translateX(-30px); }
html.js-anim .cmp-card.after.fu{ transform:translateX(30px); }
html.js-anim .cmp-card.before.fu.in, html.js-anim .cmp-card.after.fu.in{ transform:none; }

/* Pricing — gentle scale-in emphasis */
html.js-anim .price-wrap.fu{ transform:translateY(22px) scale(.97); }
html.js-anim .price-wrap.fu.in{ transform:none; }

/* Spotlight feature checks tick in (keyed to .feat-txt.in — already has IO + 4s safety net) */
html.js-anim .feat-txt .feat-list li::before{ transform:scale(.4); opacity:0;
  transition:transform .45s var(--e-out), opacity .45s var(--e-out); }
html.js-anim .feat-txt.in .feat-list li::before{ transform:scale(1); opacity:1; }
html.js-anim .feat-txt.in .feat-list li:nth-child(2)::before{ transition-delay:.08s; }
html.js-anim .feat-txt.in .feat-list li:nth-child(3)::before{ transition-delay:.16s; }
html.js-anim .feat-txt.in .feat-list li:nth-child(4)::before{ transition-delay:.24s; }

/* Count-up finale pulse (JS adds .counted on the final frame) */
@keyframes kPulse{ 0%{ transform:scale(1); } 42%{ transform:scale(1.09); } 100%{ transform:scale(1); } }
.k-val.counted{ animation:kPulse .5s var(--e-out-q); }

/* Card icons spring when their card is hovered */
.pain-ic,.ben-ic,.aud-emoji,.trust-ic,.how-ic .icn{
  transition:transform .4s var(--e-out-q), filter .3s var(--e-out); }
.pain-card:hover .pain-ic{ transform:translateY(-3px) scale(1.07) rotate(-3deg); }
.ben-card:hover .ben-ic{ transform:translateY(-3px) scale(1.07); }
.aud-card:hover .aud-emoji{ transform:translateY(-3px) scale(1.07); }
.trust-card:hover .trust-ic{ transform:translateY(-3px) scale(1.07); }
.how-step:hover .how-ic .icn{ transform:scale(1.12) rotate(-4deg);
  filter:drop-shadow(0 4px 8px oklch(56% 0.17 293 / .3)); }

/* Image cards: a light „shine" sweep on hover (NO zoom — screenshot stays undistorted, sidebar never crops) */
.feat-shot, .mod-card, .emag-shot{ position:relative; }
.feat-shot::after, .mod-card::after, .emag-shot::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background:linear-gradient(105deg, transparent 36%, oklch(100% 0 0 / .15) 48%, transparent 60%);
  transform:translateX(-130%); transition:transform .9s var(--e-out); }
.feat-spot:hover .feat-shot::after, .mod-card:hover::after, .emag-shot:hover::after{ transform:translateX(130%); }
.emag-tag{ transition:filter .35s var(--e-out); }
.emag-shot:hover .emag-tag{ filter:brightness(1.16); }

/* Nav — sliding underline, logo-mark life, docked-CTA presence */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:.8em; right:.8em; bottom:.32em; height:2px; border-radius:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left center; opacity:0;
  transition:transform .3s var(--e-out), opacity .3s var(--e-out); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ transform:scaleX(1); opacity:1; }
.nav-mark{ transition:transform .45s var(--e-out), box-shadow .45s var(--e-out); }
.nav-logo:hover .nav-mark{ transform:rotate(-8deg) scale(1.08); box-shadow:0 10px 26px oklch(56% 0.17 293 / .42); }
.nav.is-stuck .btn-glow{ box-shadow:0 8px 26px oklch(56% 0.17 293 / .34); }

/* Primary-button arrow — overshoot and settle */
.btn-glow:hover .btn-arr{ animation:arrNudge .5s var(--e-out); }
@keyframes arrNudge{ 0%{ transform:translateX(0); } 55%{ transform:translateX(7px); } 100%{ transform:translateX(4px); } }

/* Ticker numbers lift on column hover */
.tick .t-num{ display:inline-block; transition:transform .3s var(--e-out); }
.tick:hover .t-num{ transform:translateY(-3px); }

/* FAQ — pre-open hover affordance */
.faq-q > span:first-child{ transition:transform .3s var(--e-out); }
.faq-q:hover > span:first-child{ transform:translateX(3px); }
.faq-q:hover .faq-ic{ transform:scale(1.08); }
.faq-item.open .faq-q:hover .faq-ic{ transform:rotate(45deg) scale(1.08); }

/* Pricing checks cascade-pop on card hover */
.price-feats li::before{ transition:transform .35s var(--e-out-q); }
.price-card:hover .price-feats li:nth-child(1)::before{ transform:scale(1.16); transition-delay:0s; }
.price-card:hover .price-feats li:nth-child(2)::before{ transform:scale(1.16); transition-delay:.04s; }
.price-card:hover .price-feats li:nth-child(3)::before{ transform:scale(1.16); transition-delay:.08s; }
.price-card:hover .price-feats li:nth-child(4)::before{ transform:scale(1.16); transition-delay:.12s; }
.price-card:hover .price-feats li:nth-child(5)::before{ transform:scale(1.16); transition-delay:.16s; }
.price-card:hover .price-feats li:nth-child(6)::before{ transform:scale(1.16); transition-delay:.2s; }

/* LIVE telemetry dot — expanding-ring ping (hero mockup) */
.mockup-live::before{ animation:livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 oklch(56% 0.17 293 / .5); }
  70%{ box-shadow:0 0 0 7px oklch(56% 0.17 293 / 0); }
  100%{ box-shadow:0 0 0 0 oklch(56% 0.17 293 / 0); } }

/* Footer link underline reveal */
.footer-col a,.footer-legal a{ position:relative; }
.footer-col a::after,.footer-legal a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--green-deep); transform:scaleX(0); transform-origin:left center; transition:transform .3s var(--e-out); }
.footer-col a:hover::after,.footer-legal a:hover::after{ transform:scaleX(1); }

/* Signature — pointer-follow glow pe TOATE benzile închise (hero, eMAG, CTA) */
.dark-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; mix-blend-mode:screen;
  transition:opacity .55s var(--e-out);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), oklch(72% 0.19 293 / .22), transparent 70%); }
.glow-on > .dark-glow{ opacity:1; }
.emag-suite > .container{ position:relative; z-index:1; }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html.js-anim .fu, html.js-anim .stag > *{ opacity:1 !important; transform:none !important; }
  .mockup-outer{ transform:none !important; }
  .hero-mesh, .kpi-chip{ animation:none !important; transform:none !important; }
  .btn-glow::after{ display:none; }
  /* „life" pass — kill loops + the pointer glow under reduced-motion */
  .mockup-live::before{ animation:none !important; }
  .k-val.counted{ animation:none !important; }
  .btn-glow:hover .btn-arr{ animation:none !important; }
  .dark-glow{ display:none !important; }
  .hf-wire, .hf-halo, .hf-src, .hf-hub, .hf-bolt{ animation:none !important; }
  .hf-wire{ stroke-dasharray:none !important; }
  .hf-src::after{ animation:none !important; opacity:0 !important; }
  .hf-spark{ display:none !important; }
  .how-num, .how-steps::before{ animation:none !important; }
}