/* ═══════════════ Design tokens — Fivanto carbon + lime ═══════════════ */
    :root {
      color-scheme: dark;
      --bg: #0e1113;
      --surface: #171a1c;
      --surface-2: #1f2427;
      --subtle: #22282b;
      --border: #2a3033;
      --border-soft: #232a2d;
      --ink: #eef2f0;
      --soft: #cfd6d2;
      --text: #b4bdb8;
      /* Landing e numai pe temă închisă, dar --muted apare și pe --surface-2/--subtle
         (carduri, panouri, mockup), unde #7f8a86 dădea 4.18-4.39:1, sub AA 4.5:1.
         #8d9892 trece pe toate suprafețele (5.00-6.35:1). */
      --muted: #8d9892;
      --lime: #a3e635;
      --lime-bright: #bef264;
      --lime-tint: rgba(163, 230, 53, .12);
      --lime-border: rgba(163, 230, 53, .32);
      --on-lime: #0e1113;
      --dark: #0b0e10;
      --dark-2: #060809;
      --amber: #fbbf24;
      --blue: #60a5fa;
      --purple: #a78bfa;
      --red: #f87171;
      --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
      --hand: 'Caveat', 'Segoe Script', cursive;
      --maxw: 1320px;
      --spring: cubic-bezier(.34, 1.45, .64, 1);
      --r-card: 16px;
      --r-btn: 10px;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --shadow-md: 0 12px 34px -12px rgba(0,0,0,.6), 0 4px 10px -6px rgba(0,0,0,.4);
      --shadow-lg: 0 40px 80px -24px rgba(0,0,0,.8), 0 16px 32px -16px rgba(0,0,0,.6);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    ::selection { background: rgba(163,230,53,.28); color: var(--ink); }
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-thumb { background: #2a3033; border-radius: 8px; border: 3px solid var(--bg); }
    ::-webkit-scrollbar-thumb:hover { background: #3a4247; }

    a { color: inherit; text-decoration: none; }
    h1, h2, h3 { color: var(--ink); line-height: 1.1; letter-spacing: -.025em; margin: 0; font-weight: 700; }
    p { margin: 0; }
    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

    .skip {
      position: absolute; left: -9999px; top: 0; z-index: 200;
      background: var(--lime); color: var(--on-lime); padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600;
    }
    .skip:focus { left: 0; }

    /* ═══════════════ Fundal futurist-elegant: adâncime + aurore + grid + noise
       Straturi fixe, animate DOAR pe transform/opacity — zero cost de blur. ═══ */
    .bg-base {
      position: fixed; inset: 0; z-index: -4; pointer-events: none;
      background:
        radial-gradient(1100px 700px at 85% -15%, rgba(163,230,53,.055), transparent 62%),
        radial-gradient(900px 650px at -12% 38%, rgba(96,165,250,.035), transparent 60%),
        radial-gradient(1000px 800px at 55% 115%, rgba(163,230,53,.045), transparent 62%),
        linear-gradient(180deg, #0e1113 0%, #0b0e10 52%, #0d1214 100%);
    }
    .aurora { position: fixed; z-index: -3; border-radius: 50%; pointer-events: none; will-change: transform; }
    .aurora-1 {
      width: 58vw; height: 58vw; top: -22vw; right: -16vw;
      background: radial-gradient(closest-side, rgba(163,230,53,.075), transparent 70%);
      animation: drift1 26s ease-in-out infinite alternate;
    }
    .aurora-2 {
      width: 52vw; height: 52vw; bottom: -24vw; left: -18vw;
      background: radial-gradient(closest-side, rgba(96,165,250,.05), transparent 70%);
      animation: drift2 34s ease-in-out infinite alternate;
    }
    @keyframes drift1 { to { transform: translate(-7vw, 7vh) scale(1.14); } }
    @keyframes drift2 { to { transform: translate(9vw, -8vh) scale(1.1); } }
    .bg-grid {
      position: fixed; inset: 0; z-index: -2; pointer-events: none;
      background-image:
        linear-gradient(rgba(163,230,53,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(163,230,53,.028) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(ellipse 110% 90% at 50% 8%, black 18%, transparent 82%);
    }
    .bg-noise {
      position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    /* Linii de separare tip „hairline" cu gradient — în loc de borduri plate */
    .lined { border-top: 0 !important; }
    .lined::before {
      content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: min(1160px, 92%); height: 1px;
      background: linear-gradient(90deg, transparent, rgba(163,230,53,.28) 30%, rgba(163,230,53,.28) 70%, transparent);
    }

    /* ═══════════════ Bara de progres scroll ═══════════════ */
    .progress {
      position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
      background: linear-gradient(90deg, var(--lime), var(--lime-bright));
      transform-origin: 0 50%; transform: scaleX(0);
      box-shadow: 0 0 12px rgba(163,230,53,.5);
    }

    /* ═══════════════ Header ═══════════════ */
    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 90;
      transition: background .3s, border-color .3s, backdrop-filter .3s;
      border-bottom: 1px solid transparent;
    }
    header.scrolled {
      background: rgba(14,17,19,.78);
      backdrop-filter: saturate(150%) blur(14px);
      border-bottom-color: var(--border-soft);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
    .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 19px; letter-spacing: -.02em; }
    .brand svg { display: block; filter: drop-shadow(0 0 14px rgba(163,230,53,.35)); }
    .nav-links { display: flex; gap: 30px; }
    .nav-links a { color: var(--soft); font-size: 14.5px; font-weight: 500; transition: color .15s; }
    .nav-links a:hover { color: var(--lime); }

    /* ── Meniul de unelte gratuite ──
       Patru linkuri în antet îl încărcau prea mult, așa că stau sub un singur declanșator.
       Construit pe <details>/<summary>, nu pe <select>: un select care navighează la „change"
       declanșează navigarea când cineva umblă cu săgețile printre opțiuni. <details> dă gratuit
       deschidere cu tastatura și funcționare fără JavaScript, iar linkurile rămân <a> reale în
       HTML — deci crawler-ul le vede exact ca înainte. */
    /* `display: flex` pe <details>, nu `block`: implicit, textul din <summary> ieșea 3,9px mai jos decât
       al celorlalte elemente din antet (măsurat în browser). Cauza: <summary> e inline-flex, iar
       înălțimea lui vine din conținut, nu din cutia întinsă a <details> — deci textul se așeza altundeva
       decât în ancorele simple. Cu details ca flex centrat, diferența e exact 0. Un `line-height` egal
       NU rezolvă: încercat, tot 3,9px. */
    .tools-menu { position: relative; display: flex; align-items: center; }
    .tools-menu summary {
      list-style: none; cursor: pointer; color: var(--ink);
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 14.5px; font-weight: 500; transition: color .15s;
      /* Nu se rupe pe doua rinduri la NICIO latime: la 561px sumarul ajungea la 46px in loc de 21
         si inalta tot antetul, iar celelalte elemente pareau puse unul peste altul. */
      white-space: nowrap;
    }
    .tools-menu summary::-webkit-details-marker { display: none; }
    .tools-menu summary::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%;
      background: var(--lime); flex: 0 0 auto;
    }
    .tools-menu summary:hover { color: var(--lime); }
    /* Contur vizibil la navigarea cu tastatura: e un declanșator de meniu, nu un link oarecare. */
    .tools-menu summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }

    .chev {
      width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-1px); transition: transform .18s;
    }
    .tools-menu[open] .chev { transform: rotate(225deg) translateY(-2px); }

    .tools-pop {
      position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
      min-width: 290px; z-index: 60;
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 7px; box-shadow: 0 18px 44px rgba(0,0,0,.42);
      display: flex; flex-direction: column; gap: 2px;
    }
    /* Punte invizibilă până la panou: fără ea, drumul cu mouse-ul de la declanșator la primul
       element trece peste un gol, iar un meniu care se închide „de la sine" pare stricat. */
    .tools-pop::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

    .tools-pop a {
      display: flex; flex-direction: column; gap: 1px;
      padding: 9px 11px; border-radius: 10px; text-decoration: none;
      transition: background .14s;
    }
    .tools-pop a strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
    .tools-pop a span { font-size: 12px; color: var(--soft); line-height: 1.4; }
    .tools-pop a:hover { background: rgba(255,255,255,.055); }
    .tools-pop a:hover strong { color: var(--lime); }
    .tools-pop a:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

    /* <details> închis își ascunde copiii — DAR numai dacă autorul nu le pune un `display` propriu.
       `display: flex` de mai sus anulează ascunderea implicită, deci panoul rămânea vizibil permanent.
       Prins la verificare în browser: înălțimea panoului era 252px și cu meniul închis. */
    .tools-menu:not([open]) .tools-pop { display: none; }

    /* Pe telefon, unde linkurile de navigare se ascund oricum, panoul se ancorează la dreapta ca
       să nu iasă din ecran. */
    @media (max-width: 860px) {
      .tools-pop { left: auto; right: 0; transform: none; min-width: 260px; }
    }


    @media (max-width: 560px) {
      /* Pe ecrane înguste, panoul NU mai poate fi ancorat la declanșator prin CSS: marginea din
         dreapta a declanșatorului nu e marginea ecranului (măsurat la 375px — ieșea 58px în stânga).
         Îl ancorăm la ECRAN, iar poziția de sus e măsurată de tools-menu.js din poziția REALĂ a
         declanșatorului la fiecare deschidere și la fiecare derulare. */
      .tools-pop {
        position: fixed;
        top: var(--tools-top, 64px);
        left: 12px;
        right: 12px;
        width: auto;
        min-width: 0;
        /* Nici în înălțime nu poate depăși ecranul: se derulează în loc să iasă jos. */
        max-height: calc(100vh - var(--tools-top, 64px) - 16px);
        overflow-y: auto;
      }
      .tools-pop::before { display: none; }
    }

    .nav-cta { display: flex; align-items: center; gap: 16px; }
    .nav-signin { color: var(--soft); font-size: 14.5px; font-weight: 600; transition: color .15s; }
    .nav-signin:hover { color: var(--ink); }

    /* Comutatorul de limbă: discret, dar prezent și pe mobil (spre deosebire de „Intră în cont",
       care se ascunde) — cineva care nu citește româna trebuie să poată ieși din pagină. */
    .nav-lang {
      color: var(--soft); font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
      padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px;
      transition: color .15s, border-color .15s, background .15s;
    }
    .nav-lang:hover { color: var(--ink); border-color: var(--soft); background: rgba(255,255,255,.04); }

    /* ═══════════════ Butoane ═══════════════ */
    .btn {
      display: inline-flex; align-items: center; gap: 9px;
      font-family: inherit; font-size: 15px; font-weight: 600;
      padding: 13px 24px; border-radius: var(--r-btn);
      border: 1px solid transparent; cursor: pointer;
      transition: transform .18s var(--ease), box-shadow .25s, background .18s, border-color .18s;
      white-space: nowrap;
    }
    .btn .arr { transition: transform .18s var(--ease); }
    .btn:hover .arr { transform: translateX(3px); }
    .btn-primary { background: var(--lime); color: var(--on-lime); }
    .btn-primary:hover {
      background: var(--lime-bright); transform: translateY(-2px);
      box-shadow: 0 8px 30px -6px rgba(163,230,53,.45);
    }
    .btn-ghost { background: rgba(23,26,28,.6); color: var(--ink); border-color: var(--border); backdrop-filter: blur(6px); }
    .btn-ghost:hover { border-color: var(--lime-border); background: var(--surface-2); transform: translateY(-2px); }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--lime); font-weight: 600;
    }
    .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--lime); opacity: .7; }
    .sec-label {
      font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--muted); font-weight: 600; margin-bottom: 16px;
    }
    .sec-label b { color: var(--lime); font-weight: 600; margin-right: 10px; }

    /* ══════════════════════════════════════════════════════════════════
       HERO cinematic — pinned scurt (~85vh de scrub), două faze:
       · faza A (--a 0→1): dashboard-ul se ridică și se îndreaptă, textul iese
       · faza B (--b 0→1): camera face ZOOM ÎN dashboard, chips zboară lateral
       Dimensionat în vh ca să încapă complet și pe laptopuri.
       ══════════════════════════════════════════════════════════════════ */
    .hero { position: relative; height: 245vh; --a: 0; --b: 0; }
    /* Fără JS: hero-ul „pinned" nu are sens (--a/--b rămân 0) — colapsează la
       înălțime naturală, fără ~70vh de scroll mort. Conținutul rămâne vizibil. */
    html:not(.js) .hero { height: auto; }
    html:not(.js) .hero-sticky { position: relative; height: auto; padding-bottom: 60px; }
    .hero-sticky {
      position: sticky; top: 0; height: 100vh; overflow: hidden;
      display: flex; flex-direction: column; align-items: center;
      padding-top: clamp(72px, 9vh, 96px);
    }
    .glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
    .glow-1 {
      width: 820px; height: 480px; top: -160px; left: 55%;
      background: radial-gradient(closest-side, rgba(163,230,53,.16), transparent);
      transform: translate(-50%, calc(var(--a) * -50px));
      opacity: calc(1 + var(--b) * 1.2);
    }
    .glow-2 {
      width: 560px; height: 400px; bottom: -140px; left: 8%;
      background: radial-gradient(closest-side, rgba(163,230,53,.08), transparent);
      transform: translateY(calc(var(--a) * 70px));
    }

    .hero-copy {
      position: relative; text-align: center; max-width: 900px; padding: 0 24px; z-index: 3;
      transform: translateY(calc(var(--a) * -10vh)) scale(calc(1 - var(--a) * .1));
      opacity: calc(1 - var(--a) * 1.35);
    }
    .hero.copy-gone .hero-copy { pointer-events: none; visibility: hidden; }
    .hero h1 {
      font-size: clamp(30px, min(5.6vw, 7vh), 74px);
      font-weight: 700; margin: clamp(10px, 1.6vh, 20px) 0 0; letter-spacing: -.035em;
    }
    .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(34px) rotate(2deg); animation: wordIn 1s var(--ease) forwards; }
    .hero h1 .lime {
      background: linear-gradient(100deg, var(--lime-bright), var(--lime) 38%, #d9f99d 55%, #86c521 75%, var(--lime-bright));
      background-size: 220% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      /* Cuvintele sunt inline-block, deci cutia lor e înaltă cât line-height-ul (~80px la 73px font),
         iar glifele cer ~97px (ascendent + descendent). Jumătatea de interliniaj fiind negativă, cutia
         taie ~8px sus și ~8px jos. Cu background-clip:text, ce iese din cutie nu primește gradient și
         pur și simplu DISPARE — se vedea la coada lui „g" din „singur", iar la limită și la accente.
         Padding-ul lărgește cutia de fundal; marginea negativă egală anulează efectul pe așezare
         (la inline-block, linia se calculează pe cutia cu margini, deci se scad reciproc). */
      padding: .22em 0 .30em;
      margin: -.22em 0 -.30em;
      filter: drop-shadow(0 0 26px rgba(163,230,53,.28));
      animation: wordIn 1s var(--ease) forwards, shine 7s linear 1.6s infinite;
    }
    @keyframes wordIn { to { opacity: 1; transform: none; } }
    @keyframes shine { to { background-position: -220% 0; } }
    .hero .sub {
      font-size: clamp(14.5px, min(1.55vw, 2.3vh), 18.5px);
      color: var(--soft); margin: clamp(12px, 2vh, 22px) auto 0; max-width: 620px;
      opacity: 0; animation: fadeUp 1s var(--ease) .55s forwards;
    }
    .hero-actions {
      display: flex; gap: 14px; margin-top: clamp(14px, 2.6vh, 30px); justify-content: center; flex-wrap: wrap;
      opacity: 0; animation: fadeUp 1s var(--ease) .7s forwards;
    }
    .hero-trust {
      display: flex; gap: 8px 22px; margin-top: clamp(12px, 2.2vh, 26px); flex-wrap: wrap; justify-content: center;
      opacity: 0; animation: fadeUp 1s var(--ease) .85s forwards;
    }
    .hero-trust span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
    .hero-trust svg { color: var(--lime); flex: none; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

    /* Scena 3D — JS calculează --fit (scară ca să încapă sub text la orice
       rezoluție) și --lift (px exacți până la centru la mijlocul scrub-ului) */
    .hero-stage {
      position: relative; z-index: 2;
      margin-top: clamp(10px, 2.6vh, 36px);
      width: min(1000px, 94vw, 104vh);
      perspective: 1500px; perspective-origin: 50% 0%;
      transform-origin: 50% 0;
      transform:
        translateY(calc(var(--a) * var(--lift, -27vh)))
        scale(calc(var(--fit, 1) + (1 - var(--fit, 1)) * var(--a)));
      will-change: transform;
    }
    /* Aură „respirândă" în spatele dashboard-ului — doar transform + opacity,
       ieftină pe GPU (fără blur animat, care sufocă laptopurile slabe) */
    .hero-stage::before {
      content: ""; position: absolute; inset: -14% -18%; z-index: -1;
      background:
        radial-gradient(52% 46% at 30% 42%, rgba(163,230,53,.13), transparent 70%),
        radial-gradient(46% 42% at 72% 60%, rgba(163,230,53,.09), transparent 70%);
      animation: breathe 7s ease-in-out infinite alternate;
      opacity: calc(.55 + var(--a) * .45);
      pointer-events: none; will-change: transform;
    }
    @keyframes breathe { from { transform: scale(.94) rotate(-2deg); } to { transform: scale(1.06) rotate(2deg); } }
    .mock {
      position: relative;
      background: linear-gradient(180deg, #191d1f, #14181a);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow-lg), 0 0 80px -30px rgba(163,230,53, calc(.15 + var(--a) * .3));
      overflow: hidden;
      transform-origin: 50% 38%;
      transform:
        rotateX(calc((1 - var(--a)) * 32deg))
        translateY(calc((1 - var(--a)) * 4vh))
        scale(calc(.9 + var(--a) * .13 + var(--b) * 1.0));
      opacity: calc(1 - clamp(0, calc((var(--b) - .55) * 2.6), 1));
      will-change: transform, opacity;
    }
    .mock-bar {
      display: flex; align-items: center; gap: 8px; padding: 10px 16px;
      background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
    }
    .mock-bar i { width: 11px; height: 11px; border-radius: 50%; }
    .mock-bar i:nth-child(1) { background: #e06c5f; } .mock-bar i:nth-child(2) { background: #e0b13f; } .mock-bar i:nth-child(3) { background: #86c521; }
    .mock-url {
      margin-left: 14px; flex: 1; max-width: 300px;
      font-family: var(--mono); font-size: 11px; color: var(--muted);
      background: var(--bg); border: 1px solid var(--border-soft); border-radius: 7px; padding: 4px 12px;
      display: flex; align-items: center; gap: 7px;
    }
    .mock-url svg { color: var(--lime); }

    /* ── Replica aplicației: sidebar cu meniul real, topbar, dashboard ── */
    .mock-body { display: grid; grid-template-columns: 168px 1fr; }
    .mk-side {
      background: linear-gradient(180deg, var(--dark), var(--dark-2));
      border-right: 1px solid var(--border-soft);
      padding: 10px 8px 8px; display: flex; flex-direction: column; gap: 1px;
    }
    .mk-brand { display: flex; align-items: center; gap: 6px; padding: 2px 6px 8px; }
    .mk-brand .mk-logo {
      width: 18px; flex: none; display: grid; place-items: center;
      filter: drop-shadow(0 0 8px rgba(163,230,53,.4));
    }
    .mk-brand .mk-logo svg { width: 18px; height: 18px; display: block; }
    .mk-brand b { color: var(--ink); font-size: 11px; font-weight: 600; }
    .mk-brand em { font-style: normal; font-family: var(--mono); font-size: 7px; color: var(--muted); margin-left: auto; }
    .mk-sec { font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; color: #5f6a65; padding: 7px 6px 3px; }
    .mk-item {
      display: flex; align-items: center; gap: 6px; padding: 3.5px 6px; border-radius: 6px;
      color: var(--text); font-size: 9.5px; line-height: 1.2; white-space: nowrap;
      opacity: 0; transform: translateX(-8px);
      animation: mkIn .5s var(--ease) forwards;
      animation-delay: calc(var(--i) * 35ms + 1.25s);
    }
    .mk-item svg { flex: none; opacity: .7; }
    .mk-item.on { background: var(--lime-tint); color: var(--lime); font-weight: 600; }
    .mk-item.on svg { opacity: 1; }
    .mk-item .mk-badge {
      margin-left: auto; font-family: var(--mono); font-size: 6.5px; font-weight: 600;
      color: var(--lime); background: var(--lime-tint); border: 1px solid var(--lime-border);
      border-radius: 8px; padding: 1px 4px; letter-spacing: .06em;
    }
    @keyframes mkIn { to { opacity: 1; transform: none; } }
    .mk-user { margin-top: auto; display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(255,255,255,.06); padding: 8px 6px 2px; }
    .mk-av {
      width: 20px; height: 20px; border-radius: 50%; flex: none;
      background: var(--subtle); color: var(--ink); font-size: 8px; font-weight: 600;
      display: grid; place-items: center; border: 1px solid var(--border);
    }
    .mk-user b { display: block; color: var(--ink); font-size: 8.5px; font-weight: 600; line-height: 1.25; }
    .mk-user small { display: block; color: var(--muted); font-size: 7px; line-height: 1.25; }

    .mk-main { background: var(--bg); display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .mk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); }
    .mk-heading b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
    .mk-heading small { color: var(--muted); font-size: 8px; font-family: var(--mono); letter-spacing: .05em; }
    .mk-actions { display: flex; align-items: center; gap: 6px; }
    .mk-search { display: flex; align-items: center; gap: 5px; font-size: 8.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; }
    .mk-search kbd { font-family: var(--mono); font-size: 7px; color: var(--soft); background: var(--subtle); border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px; }
    .mk-timer {
      font-family: var(--mono); font-size: 8.5px; color: var(--lime);
      background: var(--lime-tint); border: 1px solid var(--lime-border); border-radius: 7px;
      padding: 4px 7px; display: flex; gap: 5px; align-items: center; font-weight: 600;
    }
    .mk-timer::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); animation: blink 1.4s ease-in-out infinite; }
    @keyframes blink { 50% { opacity: .25; } }
    .mk-lang { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-family: var(--mono); font-size: 7.5px; }
    .mk-lang b { background: var(--lime); color: var(--on-lime); padding: 3px 5px; font-weight: 600; }
    .mk-lang span { color: var(--muted); padding: 3px 5px; }
    .mk-bell { position: relative; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); display: grid; place-items: center; color: var(--soft); }
    .mk-bell em {
      position: absolute; top: -4px; right: -4px; font-style: normal;
      background: var(--lime); color: var(--on-lime); font-size: 6.5px; font-weight: 700;
      width: 11px; height: 11px; border-radius: 50%; display: grid; place-items: center;
      animation: pop 2.8s var(--ease) infinite;
    }
    @keyframes pop { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.35); } }

    .mk-content { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
    .mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .mk-kpi { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 10px; }
    .mk-kpi small { font-family: var(--mono); font-size: 7px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
    .mk-kpi b { display: flex; align-items: baseline; gap: 4px; color: var(--ink); font-size: 15px; letter-spacing: -.02em; margin-top: 2px; }
    .mk-kpi b em { font-style: normal; font-size: 8px; color: var(--lime); font-weight: 600; }
    .mk-fill { display: block; height: 3px; border-radius: 2px; background: var(--subtle); margin-top: 7px; overflow: hidden; }
    .mk-fill i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #86c521, var(--lime-bright)); transform-origin: left; animation: fill 1.1s var(--ease) both; animation-delay: 2.1s; }
    @keyframes fill { from { transform: scaleX(0); } }

    .mk-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 8px; flex: 1; min-height: 0; }
    .mk-panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: 9px; padding: 9px 11px; display: flex; flex-direction: column; }
    .mk-panel-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
    .mk-panel-h span { color: var(--ink); font-size: 9px; font-weight: 600; }
    .mk-panel-h em { font-style: normal; font-family: var(--mono); font-size: 7px; color: var(--muted); letter-spacing: .05em; }
    .mock-chart { display: flex; align-items: flex-end; gap: 5px; flex: 1; min-height: 74px; }
    .mock-chart i {
      flex: 1; border-radius: 3px 3px 0 0; background: var(--subtle);
      transform-origin: bottom; transform: scaleY(0);
      animation: barUp .9s var(--ease) forwards;
    }
    .mock-chart i.hot { background: linear-gradient(180deg, var(--lime-bright), #86c521); box-shadow: 0 0 12px rgba(163,230,53,.3); }
    @keyframes barUp { to { transform: scaleY(1); } }
    .mk-rows { display: flex; flex-direction: column; gap: 5px; }
    .mk-row {
      display: flex; align-items: center; gap: 7px;
      background: var(--bg); border: 1px solid var(--border-soft); border-radius: 7px; padding: 5.5px 8px;
      font-family: var(--mono); font-size: 7.5px; color: var(--soft);
      opacity: 0; transform: translateY(8px);
      animation: mkIn2 .6s var(--ease) forwards;
      animation-delay: calc(var(--i) * 130ms + 2.3s);
    }
    @keyframes mkIn2 { to { opacity: 1; transform: none; } }
    .mk-row .grow { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
    .mk-row b { color: var(--ink); font-weight: 600; }
    .tag { font-family: var(--mono); font-size: 6.5px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .05em; flex: none; }
    .tag-lime { color: var(--lime); background: var(--lime-tint); }
    .tag-amber { color: var(--amber); background: rgba(251,191,36,.13); }

    /* ══════════ ASAMBLAREA „PUZZLE" A DASHBOARD-ULUI ══════════
       Fiecare regiune a aplicației (bară fereastră, sidebar, topbar, KPI-uri,
       grafic, facturi, user) zboară din altă direcție/rotație și se „încuie"
       la locul ei cu un puls lime. Starea de bază = asamblat (fill backwards),
       deci fără animații (reduced-motion / no-JS) fereastra e întreagă. */
    .asm {
      animation:
        asmIn .9s var(--spring) backwards,
        asmLock 1s ease-out backwards;
      animation-delay: var(--ad, .4s), calc(var(--ad, .4s) + .5s);
    }
    @keyframes asmIn {
      from {
        opacity: 0;
        transform: translate(var(--ax, 0px), var(--ay, 40px)) rotate(var(--ar, 0deg)) scale(var(--as, .82));
        filter: blur(7px);
      }
      to { opacity: 1; transform: none; filter: none; }
    }
    @keyframes asmLock {
      0%, 45% { box-shadow: 0 0 0 0 rgba(163,230,53,0); }
      62% { box-shadow: 0 0 24px -2px rgba(163,230,53,.4), inset 0 0 0 1px rgba(163,230,53,.45); }
      100% { box-shadow: 0 0 0 0 rgba(163,230,53,0); }
    }
    /* Cadre-ecou: două „instanțe" fantomă ale ferestrei converg spre poziția
       finală și se sting — senzația de cadre multiple care se unesc. */
    .frame-echo {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      border: 1px solid rgba(163,230,53,.4); border-radius: 18px;
      background: rgba(163,230,53,.035);
      animation: echoIn 1.5s var(--ease) both;
    }
    .fe-1 { --ex: -38px; --ey: 30px; --er: -4deg; animation-delay: .2s; }
    .fe-2 { --ex: 34px; --ey: -22px; --er: 3deg; animation-delay: .38s; }
    @keyframes echoIn {
      0% { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--er)) scale(.97); }
      30% { opacity: .55; }
      100% { opacity: 0; transform: none; }
    }
    /* Scan-line: o baleiere luminoasă peste fereastră imediat după asamblare */
    .mock::after {
      content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 26%; z-index: 6;
      background: linear-gradient(180deg, transparent,
        rgba(163,230,53,.07) 42%, rgba(163,230,53,.18) 50%, rgba(163,230,53,.07) 58%, transparent);
      animation: scan 1s ease-in-out 2.1s both; pointer-events: none;
    }
    @keyframes scan { from { transform: translateY(0); } to { transform: translateY(560%); } }

    /* Toast „live" în colțul aplicației — mesaje rotative din JS */
    .mk-toast {
      position: absolute; right: 10px; bottom: 10px; z-index: 3;
      display: flex; align-items: center; gap: 6px;
      background: rgba(23,26,28,.96); border: 1px solid var(--lime-border); border-radius: 9px;
      padding: 7px 11px; font-family: var(--mono); font-size: 8px; color: var(--soft);
      box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 18px -6px rgba(163,230,53,.35);
      opacity: 0; transform: translateY(10px); pointer-events: none;
      transition: opacity .45s var(--ease), transform .45s var(--ease);
    }
    .mk-toast.show { opacity: 1; transform: none; }
    .mk-toast b { color: var(--lime); }

    /* Chips plutitoare: intră în faza A, ZBOARĂ lateral în faza B (zoom) */
    .chip {
      position: absolute; z-index: 4;
      display: flex; align-items: center; gap: 9px;
      background: rgba(23,26,28,.85); backdrop-filter: blur(10px);
      border: 1px solid var(--border); border-radius: 12px; padding: 10px 15px;
      font-family: var(--mono); font-size: 11px; color: var(--soft);
      box-shadow: var(--shadow-md);
      --in: clamp(0, calc((var(--a) - var(--d)) * 4), 1);
      opacity: calc(var(--in) * clamp(0, calc(1 - var(--b) * 2.6), 1));
      transform:
        translate(calc(var(--dx) * var(--b) * 42vw), calc(var(--dy) * var(--b) * 30vh))
        translateY(calc((1 - var(--in)) * 26px))
        scale(calc(1 + var(--b) * .6));
      will-change: transform, opacity;
    }
    .chip b { color: var(--ink); font-weight: 600; }
    .chip .ic { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; flex: none; }
    .ic-lime { background: var(--lime-tint); color: var(--lime); }
    .ic-blue { background: rgba(96,165,250,.14); color: var(--blue); }
    .ic-purple { background: rgba(167,139,250,.14); color: var(--purple); }
    .chip-1 { --d: .35; --dx: -1; --dy: -.6; top: 8%;  left: max(-26px, 1vw); }
    .chip-2 { --d: .48; --dx: 1;  --dy: -.9; top: 22%; right: max(-34px, .5vw); }
    .chip-3 { --d: .61; --dx: -1; --dy: .8;  bottom: 26%; left: max(-14px, 2vw); }
    .chip-4 { --d: .74; --dx: 1;  --dy: .7;  bottom: 12%; right: max(-18px, 1.5vw); }

    /* Mesajul de tranziție: apare peste dashboard-ul care face zoom & fade —
       ecranul nu rămâne niciodată negru între hero și secțiunea următoare. */
    .hero-outro {
      position: absolute; inset: 0; z-index: 6;
      display: grid; place-items: center; text-align: center;
      pointer-events: none; padding: 0 24px;
      --o: clamp(0, calc((var(--b) - .45) * 2.4), 1);
      opacity: var(--o);
      transform: translateY(calc((1 - var(--o)) * 7vh));
    }
    .hero-outro .eyebrow { justify-content: center; }
    .hero-outro .eyebrow::before { display: none; }
    .hero-outro h2 {
      font-size: clamp(30px, 4.6vw, 58px); letter-spacing: -.035em; margin-top: 14px; line-height: 1.08;
    }
    .hero-outro .limetxt {
      background: linear-gradient(100deg, var(--lime-bright), var(--lime) 45%, #86c521);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 0 26px rgba(163,230,53,.25));
    }
    .hero-outro p { color: var(--soft); font-size: clamp(14px, 1.5vw, 17px); margin-top: 18px; font-family: var(--mono); letter-spacing: .04em; }

    .scroll-hint {
      position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 5;
      font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
      opacity: calc(1 - var(--a) * 3);
    }
    .scroll-hint .line { width: 1px; height: 30px; background: linear-gradient(180deg, var(--lime), transparent); animation: hintPulse 1.8s ease-in-out infinite; }
    @keyframes hintPulse { 0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

    /* ═══════════════ Spotlight care urmărește mouse-ul — pe toate cardurile
       Două straturi injectate din JS: umplere difuză + bordură luminoasă,
       poziționate la --mx/--my (coordonatele cursorului în card). ═══════════ */
    .glow-card { position: relative; }
    .glow-card .gc-fill, .glow-card .gc-edge {
      position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      opacity: 0; transition: opacity .4s var(--ease);
    }
    .glow-card .gc-fill {
      background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(163,230,53,.09), transparent 70%);
    }
    .glow-card .gc-edge {
      padding: 1px;
      background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(163,230,53,.55), transparent 70%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
    }
    .glow-card:hover .gc-fill, .glow-card:hover .gc-edge { opacity: 1; }

    /* ═══════════════ Stats (count-up) ═══════════════ */
    .stats { padding: 64px 0 8px; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .stat { text-align: center; padding: 26px 16px; border-radius: var(--r-card); border: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(23,26,28,.65), rgba(23,26,28,.25)); }
    .stat b {
      display: block; font-size: clamp(38px, 4.4vw, 54px); font-weight: 700; color: var(--ink); letter-spacing: -.04em; line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .stat small { display: block; margin-top: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

    /* ═══════════════ Schelet secțiuni ═══════════════ */
    section.block { padding: 84px 0; position: relative; }
    .block-head { max-width: 720px; margin-bottom: 48px; }
    .block-head.center { margin-left: auto; margin-right: auto; text-align: center; }
    .block-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
    .block-head .answer { font-size: 17.5px; color: var(--soft); margin-top: 16px; line-height: 1.65; }
    .block-head .answer strong { color: var(--ink); font-weight: 600; }
    /* Linie-accent care „crește" sub titlu când secțiunea intră în viewport */
    .block-head h2::after {
      content: ""; display: block; width: 0; height: 2px; margin-top: 16px; border-radius: 1px;
      background: linear-gradient(90deg, var(--lime), rgba(163,230,53,0));
      box-shadow: 0 0 14px rgba(163,230,53,.45);
      transition: width 1s var(--ease) .35s;
    }
    .block-head.center h2::after {
      margin-left: auto; margin-right: auto;
      background: linear-gradient(90deg, rgba(163,230,53,0), var(--lime), rgba(163,230,53,0));
    }
    .js .block-head.in h2::after, html:not(.js) .block-head h2::after { width: 88px; }

    /* ═══════════════ „Ce este Fivanto" — răspuns citabil ═══════════════ */
    .about { border-top: 1px solid var(--border-soft); }
    .about-card {
      position: relative; border-radius: 24px; overflow: hidden;
      border: 1px solid var(--border);
      background:
        radial-gradient(700px 320px at 85% -10%, rgba(163,230,53,.10), transparent 60%),
        linear-gradient(180deg, #14181a, #101416);
      padding: clamp(32px, 4.6vw, 58px);
    }
    .about-card .mark { font-family: var(--mono); color: var(--lime); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
    .about-card p.big {
      font-size: clamp(19px, 2.3vw, 27px); color: var(--ink); font-weight: 500; line-height: 1.5;
      letter-spacing: -.015em; margin-top: 18px; max-width: 900px;
    }
    .about-card p.big em { font-style: normal; color: var(--lime); }
    .about-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; }
    .a-point { border-left: 1px solid var(--border); padding: 4px 0 4px 18px; }
    .a-point h3 { font-size: 15px; display: flex; align-items: center; gap: 9px; }
    .a-point h3 svg { color: var(--lime); flex: none; }
    .a-point p { font-size: 13.5px; color: var(--text); margin-top: 7px; }

    /* ═══════════════ Module — bento grid ═══════════════ */
    .modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .module {
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, rgba(23,26,28,.9), rgba(20,24,26,.7));
      border: 1px solid var(--border); border-radius: var(--r-card);
      padding: 24px 22px;
      transition: border-color .3s, box-shadow .3s;
      transform-style: preserve-3d;
    }
    .module::before {
      content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
      background: radial-gradient(320px 180px at 20% 0%, rgba(163,230,53,.10), transparent 70%);
      pointer-events: none;
    }
    .module:hover { border-color: var(--lime-border); box-shadow: 0 20px 44px -18px rgba(0,0,0,.7), 0 0 34px -14px rgba(163,230,53,.25); }
    .module:hover::before { opacity: 1; }
    .module.wide { grid-column: span 2; }
    .m-icon {
      width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
      background: var(--lime-tint); color: var(--lime); margin-bottom: 16px;
      border: 1px solid rgba(163,230,53,.18); transition: box-shadow .3s, transform .3s var(--ease);
    }
    .module:hover .m-icon { box-shadow: 0 0 22px rgba(163,230,53,.35); transform: translateZ(24px); }
    .module h3 { font-size: 16px; margin-bottom: 7px; }
    .module p { font-size: 13.5px; color: var(--text); }
    .m-free {
      display: inline-block; margin-top: 13px; font-family: var(--mono); font-size: 9px; font-weight: 600;
      letter-spacing: .08em; text-transform: uppercase; color: var(--lime);
      background: var(--lime-tint); border: 1px solid var(--lime-border); border-radius: 20px; padding: 4px 10px;
    }
    .modules-note { text-align: center; margin-top: 28px; font-size: 14px; color: var(--muted); }
    .modules-note b { color: var(--soft); font-weight: 600; }

    /* ═══════════════ Feature deep-dives ═══════════════ */
    .features { border-top: 1px solid var(--border-soft); }
    .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .feature + .feature { margin-top: 96px; }
    .feature.rev .f-media { order: -1; }
    .feature h2 { font-size: clamp(25px, 2.8vw, 34px); margin-top: 16px; }
    .feature .answer { font-size: 16px; color: var(--soft); margin-top: 15px; line-height: 1.65; }
    .feature .answer strong { color: var(--ink); }
    .flist { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; }
    .flist li { display: flex; gap: 13px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
    .flist svg { color: var(--lime); flex: none; margin-top: 4px; }
    .flist b { color: var(--ink); font-weight: 600; }
    .f-media {
      position: relative;
      background:
        radial-gradient(420px 240px at 80% -10%, rgba(163,230,53,.08), transparent 65%),
        linear-gradient(165deg, #171b1d, #121618);
      border: 1px solid var(--border); border-radius: 20px; padding: 26px;
      box-shadow: var(--shadow-md);
      display: grid; align-content: center; gap: 12px; min-height: 320px;
      transform-style: preserve-3d;
      transition: border-color .3s, box-shadow .3s;
    }
    .f-media:hover { border-color: var(--lime-border); box-shadow: var(--shadow-md), 0 0 50px -20px rgba(163,230,53,.3); }
    .fc {
      background: rgba(23,26,28,.92); border: 1px solid var(--border-soft); border-radius: 13px; padding: 15px 17px;
      box-shadow: 0 1px 2px rgba(0,0,0,.4);
    }
    /* Cardurile interioare urcă în cascadă după ce panoul intră în viewport */
    .js .f-media[data-reveal] .fc { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
    .js .f-media[data-reveal].in .fc { opacity: 1; transform: none; }
    .f-media .fc:nth-child(2) { transition-delay: .14s; }
    .f-media .fc:nth-child(3) { transition-delay: .28s; }
    .f-media:hover .fc { transform: translateZ(18px); transition-delay: 0s; }
    .fc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .fc-strong { color: var(--ink); font-weight: 600; font-size: 14.5px; }
    .fc-mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
    .fc-mono.ok { color: var(--lime); }
    .pill { font-family: var(--mono); font-size: 9.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; letter-spacing: .05em; }
    .pill-lime { color: var(--lime); background: var(--lime-tint); border: 1px solid var(--lime-border); }
    .pill-amber { color: var(--amber); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); }
    .pill-blue { color: var(--blue); background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.3); }
    .pill-red { color: var(--red); background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); }
    .stepline { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
    .stepline .s { flex: 1; height: 5px; border-radius: 3px; background: var(--subtle); }
    .stepline .s.done { background: var(--lime); box-shadow: 0 0 10px rgba(163,230,53,.35); }
    .fix-hint { margin-top: 11px; padding: 10px 13px; border-radius: 9px; background: rgba(163,230,53,.07); border: 1px dashed var(--lime-border); font-family: var(--mono); font-size: 11px; color: var(--soft); line-height: 1.6; }
    .fix-hint b { color: var(--lime); font-weight: 600; }
    .pay-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); color: var(--soft); }
    .pay-row:last-child { border-bottom: 0; }
    .pay-row.total { color: var(--ink); font-weight: 600; font-size: 13.5px; }
    .pay-row.total span:last-child { color: var(--lime); }

    /* ═══════════════ Pași ═══════════════ */
    .steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .step {
      position: relative; background: linear-gradient(180deg, rgba(23,26,28,.8), rgba(20,24,26,.5));
      border: 1px solid var(--border); border-radius: var(--r-card); padding: 28px 26px; overflow: hidden;
    }
    .step::before {
      counter-increment: step; content: "0" counter(step);
      font-family: var(--mono); font-size: 54px; font-weight: 600; line-height: 1;
      position: absolute; top: 18px; right: 20px; color: rgba(163,230,53,.10); letter-spacing: -.04em;
      transition: color .9s var(--ease) .3s, text-shadow .9s var(--ease) .3s;
    }
    .js .step:not(.in)::before { color: rgba(163,230,53,.02); }
    .step.in::before { color: rgba(163,230,53,.20); text-shadow: 0 0 24px rgba(163,230,53,.25); }
    .step .bar { height: 3px; width: 44px; border-radius: 2px; background: var(--lime); margin-bottom: 20px; box-shadow: 0 0 12px rgba(163,230,53,.4); transition: width .9s var(--ease) .2s; }
    .js .step:not(.in) .bar { width: 0; }
    .step h3 { font-size: 17.5px; margin-bottom: 9px; }
    .step p { font-size: 14px; color: var(--text); }

    /* ═══════════════ Prețuri ═══════════════ */
    .pricing { border-top: 1px solid var(--border-soft); background: linear-gradient(180deg, rgba(23,26,28,.35), transparent 40%); }
    .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
    .plan {
      background: linear-gradient(180deg, rgba(23,26,28,.9), rgba(20,24,26,.65));
      border: 1px solid var(--border); border-radius: 18px;
      padding: 30px 28px; display: flex; flex-direction: column; position: relative;
      transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
    }
    .plan:hover { transform: translateY(-5px); border-color: var(--lime-border); }
    .plan.pop { border-color: var(--lime-border); box-shadow: 0 0 60px -22px rgba(163,230,53,.35); }
    .plan.pop::after {
      content: "CEL MAI ALES"; position: absolute; top: -12px; left: 28px;
      font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
      color: var(--on-lime); background: var(--lime); padding: 5px 12px; border-radius: 20px;
      box-shadow: 0 4px 16px rgba(163,230,53,.4);
    }
    .plan h3 { font-size: 19px; }
    .plan .price { margin: 16px 0 6px; color: var(--ink); font-size: 32px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
    .plan .price small { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 8px; letter-spacing: .04em; }
    .plan .desc { font-size: 14px; color: var(--soft); margin: 13px 0 20px; }
    .plan ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; }
    .plan li { display: flex; gap: 11px; font-size: 14px; color: var(--text); }
    .plan li svg { color: var(--lime); flex: none; margin-top: 3px; }
    .plan .btn { justify-content: center; margin-top: auto; }
    .pricing-note { text-align: center; margin-top: 28px; font-size: 14px; color: var(--muted); max-width: 640px; margin-left: auto; margin-right: auto; }

    /* ═══════════════ FAQ ═══════════════ */
    .faq { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
    details.qa {
      background: linear-gradient(180deg, rgba(23,26,28,.85), rgba(20,24,26,.6));
      border: 1px solid var(--border); border-radius: 14px;
      padding: 3px 22px; transition: border-color .2s, box-shadow .2s;
    }
    details.qa[open] { border-color: var(--lime-border); box-shadow: 0 0 34px -16px rgba(163,230,53,.25); }
    details.qa summary {
      list-style: none; cursor: pointer; padding: 17px 0; font-weight: 600; color: var(--ink); font-size: 15.5px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
    }
    details.qa summary::-webkit-details-marker { display: none; }
    details.qa summary .plus { flex: none; width: 22px; height: 22px; position: relative; transition: transform .25s var(--ease); color: var(--lime); }
    details.qa[open] summary .plus { transform: rotate(45deg); }
    details.qa summary .plus::before, details.qa summary .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
    details.qa summary .plus::before { left: 4px; right: 4px; top: 10px; height: 2px; }
    details.qa summary .plus::after { top: 4px; bottom: 4px; left: 10px; width: 2px; }
    details.qa .a { padding: 0 0 19px; color: var(--soft); font-size: 14.5px; line-height: 1.7; }

    /* ═══════════════ CTA final ═══════════════ */
    .cta-wrap { padding: 24px 0 96px; }
    .cta {
      position: relative; overflow: hidden; text-align: center;
      background: linear-gradient(165deg, var(--dark), var(--dark-2));
      border: 1px solid var(--border); border-radius: 26px; padding: clamp(50px, 6.4vw, 80px) 40px;
    }
    .cta::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(720px 340px at 50% -30%, rgba(163,230,53,.22), transparent 65%);
      animation: ctaPulse 5s ease-in-out infinite alternate;
    }
    @keyframes ctaPulse { to { opacity: .55; } }
    .cta::after {
      content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
      width: 420px; height: 1px; background: linear-gradient(90deg, transparent, var(--lime), transparent); opacity: .8;
    }
    .cta .eyebrow { justify-content: center; }
    .cta .eyebrow::before { display: none; }
    .cta h2 { position: relative; font-size: clamp(28px, 3.8vw, 44px); margin-top: 16px; }
    .cta p { position: relative; color: var(--soft); font-size: 16.5px; margin: 17px auto 32px; max-width: 560px; }
    .cta-actions { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ═══════════════ Panoul-carusel de module ═══════════════
       Se deschide la apăsarea unui card și se navighează cu săgeți, fără să închizi — cine compară
       două module ar intra și ar ieși de zece ori altfel. */

    /* Cardul devine apăsabil: fără indiciu, nimeni nu ghicește că se poate deschide. */
    .module.clickable { cursor: pointer; position: relative; }
    .module.clickable:hover { border-color: color-mix(in srgb, var(--lime) 42%, var(--border)); }
    .module.clickable:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
    .m-more {
      display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
      font: 600 12px var(--font); color: var(--lime); opacity: .72; transition: opacity .15s, gap .15s;
    }
    .module.clickable:hover .m-more { opacity: 1; gap: 8px; }

    .mm-backdrop {
      /* 9500, nu 200: bannerul de consimțământ (.pa-consent) stă la 9000 și apărea PESTE panou,
         acoperindu-i piciorul cu navigarea. Un dialog modal trebuie să fie deasupra tuturor, altfel
         nu e modal. Măsurat în browser, nu presupus. */
      position: fixed; inset: 0; z-index: 9500;
      background: rgba(6, 8, 9, .78);
      backdrop-filter: blur(6px);
      display: grid; place-items: center; padding: 22px;
      animation: mm-in .16s ease;
    }
    .mm-backdrop[hidden] { display: none; }
    @keyframes mm-in { from { opacity: 0 } to { opacity: 1 } }

    /* Pagina de dedesubt NU se mai derulează cât panoul e deschis.
       Regula stă pe <html>, nu doar pe <body>: aici elementul care derulează e documentul
       (documentElement.scrollTop era 2348 cu body pus pe overflow:hidden), deci varianta doar pe body
       nu bloca nimic — pagina se mișca sub pop-up, iar la închidere omul se trezea în alt loc. Măsurat.
       overscroll-behavior oprește și propagarea: când ajungi la capătul textului din panou, derularea
       NU mai trece în pagina de dedesubt. */
    html.mm-open, html.mm-open body { overflow: hidden; }
    /* Locul barei de derulare rămâne rezervat MEREU. Fără asta, `overflow: hidden` face bara să
       dispară, lățimea paginii crește, textul se reașează și înălțimea totală se schimbă — iar poziția
       de derulare se deplasează. Măsurat: 51px de salt la navigarea între module. */
    html { scrollbar-gutter: stable; }
    .mm-backdrop { overscroll-behavior: contain; }
    .mm-body { overscroll-behavior: contain; }

    .mm-panel {
      width: min(1280px, 100%); max-height: min(92vh, 940px);
      display: flex; flex-direction: column;
      background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
      box-shadow: 0 30px 80px rgba(0,0,0,.55);
      overflow: hidden;
    }

    .mm-head {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 18px 20px 14px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
    }
    .mm-head-text { flex: 1; min-width: 0; }
    .mm-eyebrow { display: block; font: 600 11.5px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
    .mm-title { margin: 0; font: 700 20px var(--font); color: var(--ink); line-height: 1.25; }
    .mm-x {
      flex: 0 0 auto; background: transparent; border: 0; color: var(--soft);
      font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px;
    }
    .mm-x:hover { color: var(--ink); }
    .mm-x:focus-visible { outline: 2px solid var(--lime); }

    .mm-body { padding: 18px 20px 22px; overflow-y: auto; flex: 1 1 auto; }

    /* DOUĂ COLOANE pe desktop: captura la stânga, argumentul la dreapta.
       Pe o coloană, captura de 1440x900 mânca 540px din panou, iar „de ce merită" și prețul — adică
       exact ce convinge — cădeau sub linia de vizibilitate. Cine se uită la un modul trebuie să vadă
       motivul fără să deruleze. */
    @media (min-width: 900px) {
      .mm-body {
        display: grid;
        /* Captura primește mai mult: la 1.05fr ieșea ~500px, adică un ecran de aplicație
           ilizibil. Acum ~700px, iar clicul o deschide oricum pe tot ecranul. */
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        gap: 22px;
        align-items: start;
      }
      .mm-shots { margin-bottom: 0; position: sticky; top: 0; }
      /* Textul, într-o coloană proprie: coloana din dreapta e cea care se citește de sus în jos. */
      .mm-lead, .mm-text, .mm-why, .mm-list, .mm-price, .mm-cta { grid-column: 2; }
      .mm-shots { grid-column: 1; grid-row: 1 / span 6; }
    }

    /* Capturile: din aplicația reală. Ram subțire, ca să se citească drept ecran, nu drept desen. */
    .mm-shots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
    /* Captura e un buton: se apasă și se deschide pe tot ecranul. Indiciul „Mărește" apare la trecerea
       mouse-ului, dar pe atingere (unde hover nu există) rămâne vizibil permanent — altfel nimeni de pe
       telefon n-ar ghici că se poate mări. */
    .mm-shot {
      display: block; width: 100%; padding: 0; border: 0; background: transparent;
      position: relative; cursor: zoom-in; border-radius: 12px; overflow: hidden;
    }
    .mm-shot:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
    .mm-shots img {
      width: 100%; height: auto; display: block;
      border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
      transition: transform .25s var(--ease, ease);
    }
    .mm-shot:hover img { transform: scale(1.012); }
    .mm-shot-hint {
      position: absolute; right: 10px; bottom: 10px;
      background: rgba(8, 10, 11, .82); color: #eef2f0; border: 1px solid rgba(255,255,255,.14);
      border-radius: 8px; padding: 5px 10px; font: 600 11.5px var(--font);
      opacity: 0; transition: opacity .18s; pointer-events: none;
    }
    .mm-shot:hover .mm-shot-hint, .mm-shot:focus-visible .mm-shot-hint { opacity: 1; }
    @media (hover: none) { .mm-shot-hint { opacity: 1; } }

    /* ── Captura pe tot ecranul ── */
    .mm-zoom {
      position: fixed; inset: 0; z-index: 9600;
      background: rgba(4, 5, 6, .94);
      display: grid; place-items: center; padding: 24px;
      cursor: zoom-out; animation: mm-in .14s ease;
    }
    .mm-zoom[hidden] { display: none; }
    .mm-zoom img {
      max-width: 100%; max-height: calc(100vh - 48px);
      width: auto; height: auto; object-fit: contain;
      border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 30px 90px rgba(0,0,0,.6);
    }
    .mm-zoom-x {
      position: absolute; top: 14px; right: 18px; z-index: 2;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
      color: #eef2f0; font-size: 26px; line-height: 1; cursor: pointer;
      width: 44px; height: 44px; border-radius: 12px;
    }
    .mm-zoom-x:hover { background: rgba(255,255,255,.14); }
    .mm-zoom-x:focus-visible { outline: 2px solid var(--lime); }
    .mm-zoom-hint {
      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
      font: 500 12.5px var(--font); color: rgba(238,242,240,.55);
    }
    /* Pe ecrane înguste, „mărește" nu însemna nimic: o captură de 1440px lățime încape tot în 410px,
       deci creștea de 1,08x — măsurat. Aici o potrivim pe ÎNĂLȚIME și lăsăm lățimea să iasă din ecran,
       cu deplasare laterală: pe un telefon de 932px înălțime, imaginea ajunge la ~1490px lățime și se
       citește chiar. Un buton de închidere fix e obligatoriu atunci, fiindcă atingerea pe imagine
       trebuie să însemne „trage", nu „închide". */
    @media (max-width: 720px) {
      .mm-zoom {
        padding: 0; place-items: stretch;
        overflow: auto; -webkit-overflow-scrolling: touch;
      }
      .mm-zoom img {
        max-width: none; max-height: none;
        height: 100vh; width: auto; border: 0; border-radius: 0;
        cursor: grab;
      }
      .mm-zoom-x { position: fixed; top: 10px; right: 10px; }
      .mm-zoom-hint {
        position: fixed; bottom: 10px; font-size: 11.5px;
        background: rgba(4,5,6,.8); padding: 6px 12px; border-radius: 999px;
      }
    }

    .mm-lead { margin: 0 0 12px; font: 600 16.5px var(--font); color: var(--ink); line-height: 1.5; }
    .mm-text { margin: 0 0 16px; color: var(--soft); font-size: 14.5px; line-height: 1.65; }

    .mm-why {
      background: color-mix(in srgb, var(--lime) 7%, transparent);
      border: 1px solid color-mix(in srgb, var(--lime) 26%, transparent);
      border-left: 3px solid var(--lime);
      border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
    }
    .mm-why-label { display: block; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--lime); margin-bottom: 5px; }
    .mm-why p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; }

    .mm-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
    .mm-list li { position: relative; padding-left: 22px; color: var(--soft); font-size: 14px; line-height: 1.5; }
    .mm-list li::before {
      content: ""; position: absolute; left: 4px; top: .55em;
      width: 6px; height: 6px; border-radius: 50%; background: var(--lime);
    }

    .mm-price {
      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
      padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px;
      background: rgba(255,255,255,.025); margin-bottom: 18px;
    }
    .mm-price-v { font: 800 22px var(--font); color: var(--ink); }
    .mm-price-u { font-size: 13px; color: var(--muted); }
    .mm-price-free { flex: 1 1 100%; font-size: 12.5px; color: var(--lime); }

    /* Prețul și butonul rămân LIPITE jos în zona derulabilă: cine s-a convins din primul paragraf nu
       trebuie să caute unde apasă, iar cine citește tot îl are tot timpul sub ochi. */
    .mm-price, .mm-cta { position: sticky; z-index: 2; }
    .mm-price {
      bottom: 58px;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter: blur(4px);
    }
    .mm-cta {
      display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
      bottom: 0; padding: 10px 0 2px;
      background: linear-gradient(to top, var(--surface) 62%, transparent);
    }
    .mm-link { color: var(--soft); font-size: 13.5px; text-decoration: none; border-bottom: 1px solid var(--border); }
    .mm-link:hover { color: var(--lime); }

    /* Piciorul cu navigarea. Butoanele poartă NUMELE modulului vecin: „înainte/înapoi" nu spune nimic,
       iar cine caută un modul anume vrea să știe dacă merită să mai apese. */
    .mm-foot {
      display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
      padding: 12px 16px; border-top: 1px solid var(--border); background: rgba(0,0,0,.18);
    }
    .mm-nav {
      display: inline-flex; align-items: center; gap: 8px; min-width: 0;
      background: transparent; border: 1px solid var(--border); border-radius: 10px;
      color: var(--soft); cursor: pointer; padding: 8px 12px;
      font: 600 12.5px var(--font); max-width: 42%;
    }
    .mm-nav:hover { color: var(--ink); border-color: var(--soft); }
    .mm-nav:focus-visible { outline: 2px solid var(--lime); }
    .mm-nav-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mm-arrow { font-size: 17px; line-height: 1; color: var(--lime); flex: 0 0 auto; }

    .mm-dots { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
    .mm-dot {
      width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
      background: var(--border); cursor: pointer; transition: background .15s, transform .15s;
    }
    .mm-dot:hover { background: var(--soft); }
    .mm-dot.on { background: var(--lime); transform: scale(1.35); }
    .mm-dot:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

    @media (max-width: 720px) {
      .mm-backdrop { padding: 0; }
      .mm-panel { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
      .mm-title { font-size: 18px; }
      .mm-lead { font-size: 15.5px; }
      /* Pe telefon, numele modulului vecin nu încape lângă bulinele de navigare: rămân săgețile,
         care sunt oricum ținta reală a degetului. Glisarea stânga/dreapta merge tot. */
      .mm-nav-t { display: none; }
      .mm-nav { padding: 10px 14px; min-height: 42px; }
      .mm-dots { gap: 5px; }
    }

    /* ═══════════════ Footer ═══════════════ */
    footer { border-top: 1px solid var(--border-soft); background: rgba(23,26,28,.45); }
    .foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 54px 0 40px; }
    /* Descriptorul sta lipit de logo, in majuscule mici si spatiate, ca sa se
       citeasca drept eticheta de categorie si sa nu concureze cu numele.
       „Fivanto" e un nume inventat: fara descriptor nu spune ce face produsul. */
    .foot .descriptor { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
      text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 10px; }
    .foot .tagline { font-size: 14px; color: var(--soft); max-width: 280px; margin-top: 10px; }
    .foot h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 18px; }
    .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
    .foot a { color: var(--soft); font-size: 14px; transition: color .15s; }
    .foot a:hover { color: var(--lime); }
    .foot-bottom { border-top: 1px solid var(--border-soft); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .foot-bottom p { font-size: 13px; color: var(--muted); }
    .lang { font-family: var(--mono); font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; display: inline-flex; }
    .lang span { padding: 6px 12px; }
    .lang span.on { background: var(--lime); color: var(--on-lime); font-weight: 600; }

    /* ═══════════════ Reveal pe scroll — variante ═══════════════
       Fără JS totul rămâne vizibil (SEO / no-script safe). */
    .js [data-reveal] {
      opacity: 0; transform: translateY(30px);
      transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
    }
    .js [data-reveal="left"]  { transform: translateX(-44px); }
    .js [data-reveal="right"] { transform: translateX(44px); }
    .js [data-reveal="zoom"]  { transform: scale(1.1); filter: blur(14px); }
    .js [data-reveal="pop"]   { transform: translateY(24px) scale(.92); }
    .js [data-reveal].in { opacity: 1; transform: none; filter: none; }

    /* ═══════════════ Reduced motion — dezactivează tot ═══════════════ */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
      .hero { height: auto; --a: 1 !important; --b: 0 !important; }
      .hero-sticky { position: relative; height: auto; padding-bottom: 60px; }
      .hero-copy, .hero-stage { transform: none !important; opacity: 1 !important; }
      .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
      .js .f-media[data-reveal] .fc { opacity: 1 !important; transform: none !important; }
      .scroll-hint { display: none; }
    }

    /* ═══════════════ Responsive ═══════════════ */
    @media (max-width: 1020px) {
      /* Ancorele către secțiuni dispar (ai oricum derularea), DAR meniul de unelte rămâne: acum e un
         singur declanșator compact, iar uneltele sînt exact motivul pentru care cineva de pe telefon
         ar rămâne pe site. Înainte, cu patru linkuri, n-ar fi încăput; acum încape. */
      .nav-links { display: flex; gap: 0; }
      .nav-links > a { display: none; }
      .modules { grid-template-columns: repeat(2, 1fr); }
      .about-points { grid-template-columns: repeat(2, 1fr); gap: 22px; }
      .chip-1, .chip-3 { left: -8px; }
      .chip-2, .chip-4 { right: -8px; }
    }
    @media (max-width: 820px) {
      /* Pagina derapa 27px lateral pe telefon — masurat: `main` are 416px de continut in 390.
         Vin din ilustratia de dashboard (`.mock`, 536px) si din straturile decorative (aurora,
         glow), toate ornamentale.
         `clip`, NU `hidden`: `hidden` ar face din <body> un container de derulare, iar hero-ul
         se sprijina pe `position: sticky` — s-ar rupe animatia de intrare. `clip` taie fara sa
         creeze container, deci sticky rimine intreg. */
      body { overflow-x: clip; }

      .hero { height: 225vh; }
      .hero-stage { width: min(94vw, 100vh); }
      .feature { grid-template-columns: 1fr; gap: 34px; }
      .feature.rev .f-media { order: 0; }
      .f-media { min-height: 0; }
      .steps { grid-template-columns: 1fr; }
      .plans { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .foot { grid-template-columns: 1fr 1fr; }
      .chip { display: none; }
    }
    /* Intre 561 si 700px antetul nu incapea: masurat 540px necesari pentru 521 disponibili.
       Pleaca „Intra in cont", nu butonul de inregistrare — linkul exista in footerul FIECAREI
       pagini, deci nu se pierde nicio cale spre logare. */
    @media (max-width: 700px) {
      .nav-signin { display: none; }
    }

    @media (max-width: 560px) {
      /* ── Antetul pe telefon ────────────────────────────────────────────────────────────────
         Trei defecte separate, toate masurate in browser la 375-401px, nu deduse din citit:

         1. `.tools-menu summary` avea 46px inaltime in loc de 21: „Unelte gratuite" se rupea pe
            doua rinduri si inalta antetul, iar restul elementelor pareau puse unul peste altul.
         2. Suma latimilor era 367px pentru 354px disponibili. Cu `justify-content: space-between`
            si zero loc ramas, elementele se lipesc si apoi se suprapun — nu apare bara de derulare
            care ar fi facut problema evidenta.
         3. `header` e `position: fixed` cu fundal transparent pina la derulare (`.scrolled`).
            Pe desktop hero-ul incepe destul de jos ca sa nu conteze. Pe telefon orice text care
            trece dedesubt se CITESTE prin antet — de aici „PLATFORMA ROMANEASCA..." peste sigla.

         Fundalul opac de la primul pixel rezolva (3) definitiv, independent de ce face hero-ul:
         pe un telefon derulezi imediat, deci efectul de antet transparent nu se vede oricum. */
      header {
        background: rgba(14,17,19,.94);
        backdrop-filter: saturate(150%) blur(14px);
        border-bottom-color: var(--border-soft);
      }
      .tools-menu summary { font-size: 13px; }
      header .wrap { padding: 0 14px; }
      .nav { gap: 8px; }
      /* `flex: none` ca nimic sa nu fie strivit sub latimea proprie: strivirea e exact felul in
         care doua elemente ajung sa ocupe acelasi loc. */
      .brand, .nav-links, .nav-cta { flex: none; }
      .brand { font-size: 17px; gap: 8px; }
      .brand svg { width: 26px; height: 26px; }
      .nav-cta { gap: 8px; }
      .nav-lang { padding: 4px 7px; font-size: 11px; }
      .nav-cta .btn-primary { padding: 9px 12px; font-size: 12.5px; }
      .nav-cta .btn-primary .arr { display: none; }

      .hero { height: 205vh; }
      .modules { grid-template-columns: 1fr; }
      .module.wide { grid-column: span 1; }
      .about-points { grid-template-columns: 1fr; }
      .stats-grid { gap: 12px; }
      section.block { padding: 64px 0; }
      .foot { grid-template-columns: 1fr; }
      .mock-body { grid-template-columns: 112px 1fr; }
      .mk-item { font-size: 8.5px; }
      .mk-search, .mk-lang { display: none; }
      .mk-kpi b { font-size: 12px; }
    }
    /* Sub 430px nu incap toate patru, si nu e o estimare: masurat in browser, sigla 90 + unelte 113
       + (limba 32 + spatiu 8 + buton 117) + doua spatii de 8 = 375px, pentru 362 disponibili la un
       ecran de 390. Cu 13px lipsa, `space-between` le lipeste unul de altul.
       Butonul pleaca, nu uneltele: hero-ul are un „Incepe gratuit" pe toata latimea la doua degete
       mai jos, pe FIECARE pagina, iar uneltele gratuite sint chiar motivul pentru care cineva de pe
       telefon ar ramine pe site. Fara buton: 251px pentru 362 — incape comod. */
    @media (max-width: 430px) {
      .nav-cta .btn-primary { display: none; }
    }

    /* Ecrane foarte scunde (laptopuri mici, browser cu bare mari) */
    @media (max-height: 640px) {
      .hero { height: 265vh; }
      .hero-trust { display: none; }
      .mock-body { min-height: 220px; }
    }

    /* ═══════════════ Subpagini (funcționalități, prețuri) — hero de pagină ═══════════════
       Reutilizează restul sistemului (.block, .module, .feature, .plan, .faq, .cta). */
    .nav-links a.on { color: var(--lime); }
    .page-hero { position: relative; padding: clamp(104px, 15vh, 150px) 0 8px; text-align: center; }
    .page-hero::before {
      content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: radial-gradient(760px 340px at 50% -10%, rgba(163,230,53,.12), transparent 62%);
    }
    .crumbs { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); margin-bottom: 18px; }
    .crumbs a { color: var(--muted); transition: color .15s; }
    .crumbs a:hover { color: var(--lime); }
    .crumbs .sep { opacity: .5; margin: 0 6px; }
    .page-hero .eyebrow { justify-content: center; }
    .page-hero .eyebrow::before { display: none; }
    .page-hero h1 {
      font-size: clamp(34px, 5vw, 60px); font-weight: 700; letter-spacing: -.035em;
      margin: 16px auto 0; max-width: 900px; line-height: 1.08;
    }
    .page-hero h1 .lime {
      background: linear-gradient(100deg, var(--lime-bright), var(--lime) 55%, #86c521);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      filter: drop-shadow(0 0 24px rgba(163,230,53,.26));
    }
    .page-hero .lede { font-size: clamp(16px, 1.7vw, 19px); color: var(--soft); margin: 20px auto 0; max-width: 640px; line-height: 1.6; }
    .page-hero .hero-actions { justify-content: center; margin-top: 30px; }

    /* Tabel „ce acoperă fiecare modul" (pagina prețuri) — reutilizează cardurile */
    .modtable { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
    .modrow {
      display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start;
      background: linear-gradient(180deg, rgba(23,26,28,.9), rgba(20,24,26,.6));
      border: 1px solid var(--border); border-radius: 13px; padding: 16px 20px;
    }
    .modrow b { color: var(--ink); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 9px; }
    .modrow b svg { color: var(--lime); flex: none; }
    .modrow span { color: var(--text); font-size: 14px; }
    @media (max-width: 720px) {
      .modrow { grid-template-columns: 1fr; gap: 6px; }
    }

    /* Card detaliat de modul (pagina funcționalități) */
    .mod-list { display: flex; flex-direction: column; gap: 16px; }
    .mod {
      position: relative;
      background: linear-gradient(180deg, rgba(23,26,28,.9), rgba(20,24,26,.65));
      border: 1px solid var(--border); border-radius: var(--r-card);
      padding: 26px 28px; display: grid; grid-template-columns: 264px 1fr; gap: 30px;
      transition: border-color .3s, box-shadow .3s;
    }
    .mod:hover { border-color: var(--lime-border); box-shadow: 0 20px 44px -20px rgba(0,0,0,.7), 0 0 34px -16px rgba(163,230,53,.22); }
    .mod .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
    .mod h2 { font-size: 22px; margin-top: 12px; display: flex; align-items: center; gap: 11px; }
    .mod h2 .m-icon { width: 38px; height: 38px; margin: 0; flex: none; }
    .mod .desc { color: var(--soft); font-size: 14.5px; margin-top: 12px; line-height: 1.6; }
    .mod .m-free { margin-top: 14px; }
    .mod-caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
    .mod-caps li { display: flex; gap: 10px; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }
    .mod-caps li svg { color: var(--lime); flex: none; margin-top: 3px; }
    .mod-caps b { color: var(--ink); font-weight: 600; }
    @media (max-width: 860px) {
      .mod { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
      .mod-caps { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       PARALLAX PE STRATURI (2 axe) — JS scrie --py/--px pe fiecare [data-plx].
       Oprit sub 820px și la reduced-motion: adâncimea e bonus, nu structură.
       ══════════════════════════════════════════════════════════════════════ */
    [data-plx] { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }
    @media (max-width: 820px), (prefers-reduced-motion: reduce) {
      [data-plx] { transform: none !important; }
    }
    section.block, .cta-wrap, .stats { position: relative; }
    .plx-decor { position: absolute; pointer-events: none; z-index: 0; }
    section.block > .wrap, .stats > .wrap, .cta-wrap > .wrap { position: relative; z-index: 1; }

    /* Cuvinte-fantomă conturate + numere de secțiune uriașe — straturi de fund */
    .ghost-word {
      font-family: var(--sans); font-weight: 700; letter-spacing: -.04em;
      font-size: clamp(80px, 13vw, 190px); line-height: 1; white-space: nowrap;
      color: transparent; -webkit-text-stroke: 1.2px rgba(163, 230, 53, .12); user-select: none;
    }
    .big-num {
      font-family: var(--mono); font-weight: 600; line-height: 1; user-select: none;
      font-size: clamp(110px, 15vw, 240px); color: transparent;
      -webkit-text-stroke: 1.5px rgba(163, 230, 53, .13);
    }
    /* deriva proprie stă pe span-ul interior — nu se bate cu parallax-ul din wrapper */
    .gw-in { display: inline-block; animation: gwDrift 16s ease-in-out infinite alternate; }
    @keyframes gwDrift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }

    .dot-patch {
      width: 220px; height: 150px; opacity: .5;
      background-image: radial-gradient(rgba(163,230,53,.22) 1px, transparent 1.4px);
      background-size: 17px 17px;
      mask-image: radial-gradient(closest-side, black, transparent);
    }
    .soft-blob { width: 420px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(163,230,53,.06), transparent 70%); }
    .ring-decor { width: 180px; height: 180px; border-radius: 50%; border: 1px dashed rgba(163,230,53,.2); }

    /* A treia auroră — plutește prin centru, foarte discretă */
    .aurora-3 {
      width: 46vw; height: 46vw; top: 34%; left: 28%;
      background: radial-gradient(closest-side, rgba(163,230,53,.045), transparent 70%);
      animation: drift2 44s ease-in-out infinite alternate;
    }

    /* ══════════════════════════════════════════════════════════════════════
       LIMBAJ DE SCHIȚĂ — note scrise de mână, marker, desene care se trasează
       ══════════════════════════════════════════════════════════════════════ */
    .note {
      font-family: var(--hand); font-size: clamp(19px, 1.9vw, 24px); font-weight: 600;
      color: var(--lime); line-height: 1.25; letter-spacing: .01em;
    }
    .note-tag { display: inline-block; transform: rotate(var(--nrot, -3deg)); }
    .mark-hl {
      background: linear-gradient(104deg, transparent 2%, rgba(163,230,53,.26) 8%, rgba(163,230,53,.32) 50%, rgba(163,230,53,.22) 92%, transparent 98%);
      border-radius: 4px; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
    }
    /* SVG-uri „trasate": conturul se desenează când elementul intră în viewport */
    .sk path, .sk ellipse, .sk circle {
      fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
      stroke-dasharray: var(--len, 300); stroke-dashoffset: var(--len, 300);
      transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .3, 1) .25s;
    }
    .js .in .sk path, .js .in .sk ellipse, .js .in .sk circle,
    .js .sk.in path, .js .sk.in ellipse, .js .sk.in circle,
    html:not(.js) .sk path, html:not(.js) .sk ellipse, html:not(.js) .sk circle { stroke-dashoffset: 0; }
    .sk.thin path { stroke-width: 1.6; opacity: .85; }

    /* Scântei / cruciulițe desenate — licăresc decalat */
    .doodle svg { display: block; }
    .dood { animation: twinkle var(--twd, 3.6s) ease-in-out var(--two, 0s) infinite; transform-origin: center; }
    .dood path { stroke: var(--lime); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    @keyframes twinkle {
      0%, 100% { opacity: .2; transform: scale(.82) rotate(0deg); }
      50% { opacity: .85; transform: scale(1.12) rotate(14deg); }
    }

    /* Cifrele din statistici, încercuite de mână. Cercul e ABSOLUT (altfel ocupă
       spațiu în flux, împinge eticheta în jos și dezaliniază cardurile), iar
       ancora e chiar cifra: <b> devine inline-block, deci se strânge pe ea și
       cercul rămâne proporțional pentru „15" ca și pentru „0". */
    .stat { overflow: visible; }
    .stat b { display: inline-block; position: relative; }
    .stat .scribble {
      /* dimensiuni EXPLICITE (un <svg> cu viewBox și width/height:auto și-ar
         calcula înălțimea din raport → cerc turtit) și în `em`, ca să rămână
         proporțional cu cifra pe orice ecran. */
      position: absolute; left: -.45em; top: -.24em;
      width: calc(100% + .9em); height: calc(100% + .48em);
      pointer-events: none;
    }

    /* Sublinieri-șerpuite, cuvinte încercuite, corectura editorului */
    /* Accentele legate de text se dimensionează în `em`, nu în `px`: așa rămân
       proporționale cu litera la orice lățime de ecran. Cu px fix, la fonturi
       mici cercul ajungea peste literele vecine. */
    .u-squig { position: relative; display: inline-block; }
    .u-squig .squig { position: absolute; left: -2%; bottom: -.3em; width: 104%; height: .32em; pointer-events: none; }
    .u-circ { position: relative; display: inline-block; }
    .u-circ .circ {
      position: absolute; left: -.34em; top: -.2em;
      width: calc(100% + .68em); height: calc(100% + .4em);
      pointer-events: none;
    }
    .strike-fix { position: relative; display: inline-block; }
    .sf-old { position: relative; display: inline-block; }
    .sf-old .sfline { position: absolute; left: -5%; top: 52%; width: 110%; height: 10px; transform: translateY(-50%); pointer-events: none; }
    .sf-new {
      position: absolute; left: 50%; top: -1.05em; transform: translateX(-50%) rotate(-5deg);
      font-family: var(--hand); font-weight: 600; color: var(--lime); font-size: .92em; white-space: nowrap;
      text-shadow: 0 2px 12px rgba(0,0,0,.6);
    }
    /* Bandă adezivă + colțuri de cadru schițate + săgeți între coloane */
    .tape {
      position: absolute; width: 88px; height: 24px; z-index: 3; pointer-events: none;
      top: -11px; left: 26px; transform: rotate(var(--trot, -5deg));
      background: repeating-linear-gradient(90deg, rgba(163,230,53,.2) 0 6px, rgba(163,230,53,.14) 6px 12px);
      border-left: 1px dashed rgba(163,230,53,.4); border-right: 1px dashed rgba(163,230,53,.4);
    }
    .corner { position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 2; }
    .corner path { stroke: var(--lime); stroke-width: 2.4; fill: none; stroke-linecap: round; opacity: .7; }
    .corner.tl { top: -10px; left: -10px; }
    .corner.br { right: -10px; bottom: -10px; transform: rotate(180deg); }
    .feature { position: relative; }
    .f-arrow { position: absolute; width: 118px; height: 72px; pointer-events: none; z-index: 2; }
    .squig-divider { display: block; width: min(1160px, 92%); height: 16px; margin: 0 auto 8px; }

    /* Sticker-stea cu text de mână (autocolant de designer) */
    .sticker {
      position: absolute; z-index: 2; pointer-events: none;
      width: 112px; height: 112px; display: grid; place-items: center;
      transform: rotate(var(--srot, -8deg));
      animation: stickerBob 5.5s ease-in-out infinite alternate;
    }
    .sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .sticker svg path { fill: rgba(163,230,53,.07); stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; opacity: .85; }
    .sticker span { position: relative; font-family: var(--hand); font-weight: 600; font-size: 18px; color: var(--lime); text-align: center; line-height: 1.05; padding: 0 12px; }
    @keyframes stickerBob { from { transform: rotate(var(--srot, -8deg)) translateY(0); } to { transform: rotate(calc(var(--srot, -8deg) + 4deg)) translateY(-7px); } }

    /* Chips plutitoare pe marginile secțiunilor — purtătoare vizibile de parallax */
    .peek-chip {
      position: absolute; z-index: 2; pointer-events: none;
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(23,26,28,.92); border: 1px solid var(--border); border-radius: 11px;
      padding: 9px 14px; font-family: var(--mono); font-size: 11.5px; color: var(--soft);
      box-shadow: 0 12px 32px -14px rgba(0,0,0,.8); white-space: nowrap;
    }
    .peek-chip b { color: var(--ink); font-weight: 600; }
    .peek-chip .cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lime); box-shadow: 0 0 8px rgba(163,230,53,.6); }

    /* Semnătura de autor, la final */
    .signature { position: relative; margin-top: 26px; font-family: var(--hand); font-weight: 600; font-size: 21px; color: var(--soft); }
    .signature svg { display: block; margin: 4px auto 0; }

    /* ══════════════════════════════════════════════════════════════════════
       EDITORIAL — asimetrie, rotații ușoare, accente de titlu
       ══════════════════════════════════════════════════════════════════════ */
    .tilt { transform: rotate(var(--rot, -1.1deg)); transition: transform .35s var(--ease); }
    /* rotația trebuie să bată „transform:none" al reveal-ului încheiat */
    .js [data-reveal].in.tilt { transform: rotate(var(--rot, -1.1deg)); }
    .tilt:hover, .js [data-reveal].in.tilt:hover { transform: rotate(0deg); }
    @media (prefers-reduced-motion: reduce) { .tilt, .js [data-reveal].in.tilt { transform: none; } }
    .block-head.skew-l { margin-left: 0; margin-right: auto; text-align: left; }
    .block-head.skew-l h2::after { margin-left: 0; background: linear-gradient(90deg, var(--lime), rgba(163,230,53,0)); }
    .block-head.skew-r { margin-left: auto; margin-right: 0; text-align: right; }
    .block-head.skew-r h2::after { margin-left: auto; margin-right: 0; background: linear-gradient(-90deg, var(--lime), rgba(163,230,53,0)); }
    .head-note { position: relative; display: inline-block; }
    .head-note .note { position: absolute; white-space: nowrap; }

    /* Butonul principal: sclipire care mătură periodic */
    .btn-shimmer { position: relative; overflow: hidden; }
    .btn-shimmer::after {
      content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
      transform: skewX(-18deg); animation: shimmerSweep 4.6s ease-in-out infinite;
    }
    @keyframes shimmerSweep { 0%, 62% { left: -45%; } 88%, 100% { left: 115%; } }
    /* Cardul „popular" levitează — DOAR după reveal, altfel suprascrie pop-in-ul */
    .js .plan.pop.in { animation: levitate 6s ease-in-out infinite; }
    @keyframes levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    .plan { overflow: visible; }
    .module:hover .m-icon { animation: wiggle .55s var(--ease); }
    @keyframes wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } 100% { transform: rotate(0); } }

    /* ══════════════════════════════════════════════════════════════════════
       ECOSISTEM — hub orbital: sateliții se rotesc real în jurul lui Fivanto
       ══════════════════════════════════════════════════════════════════════ */
    /* --R = raza orbitei exterioare. Toată geometria (inele, raze de chips,
       înălțimea scenei) derivă din ea, deci rămâne mereu o margine de ~70px
       în care încap chips-urile — altfel cele de jos calcă peste legendă. */
    .eco-stage {
      position: relative; --R: min(320px, 26vw);
      height: calc(2 * var(--R) + 140px);
      margin-top: 30px; display: grid; place-items: center;
    }
    .eco-hub {
      /* absolut în centrul scenei — exact punctul în jurul căruia orbitează chips-urile */
      position: absolute; z-index: 3; top: 50%; left: 50%;
      width: 128px; height: 128px; transform: translate(-50%, -50%);
      display: grid; place-items: center;
      animation: hubPulse 4.5s ease-in-out infinite;
    }
    .eco-hub svg { width: 128px; height: 128px; display: block; }
    .eco-hub small { position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
    /* Pulsul urmeaza celula, nu o cutie: drop-shadow in loc de box-shadow. */
    @keyframes hubPulse {
      0%, 100% { filter: drop-shadow(0 0 20px rgba(163,230,53,.34)) drop-shadow(0 14px 28px rgba(0,0,0,.8)); }
      50%      { filter: drop-shadow(0 0 38px rgba(163,230,53,.6))  drop-shadow(0 14px 28px rgba(0,0,0,.8)); }
    }
    .orbit {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      border: 1px dashed rgba(163,230,53,.16); border-radius: 50%; pointer-events: none;
      animation: orbitRing 70s linear infinite;
    }
    .orbit-1 { width: var(--R); height: var(--R); }
    .orbit-2 { width: calc(var(--R) * 1.5); height: calc(var(--R) * 1.5); border-color: rgba(163,230,53,.11); animation-duration: 100s; animation-direction: reverse; }
    .orbit-3 { width: calc(var(--R) * 2); height: calc(var(--R) * 2); border-color: rgba(163,230,53,.07); animation-duration: 140s; }
    @keyframes orbitRing {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }
    /* Unghi orbital animabil: chips-urile se rotesc pe orbite și rămân drepte
       prin contra-rotație (altfel textul s-ar învârti cu ele). */
    @property --oa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    .eco-chip {
      position: absolute; z-index: 2; top: 50%; left: 50%;
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(23,26,28,.92); border: 1px solid var(--border); border-radius: 11px;
      padding: 8px 13px; font-family: var(--mono); font-size: 11.5px; color: var(--soft);
      box-shadow: 0 10px 26px -12px rgba(0,0,0,.7); white-space: nowrap;
      transform:
        translate(-50%, -50%)
        rotate(calc(var(--oa) + var(--a0, 0deg)))
        translateX(var(--r, 170px))
        rotate(calc(-1 * (var(--oa) + var(--a0, 0deg))));
      animation: orbitSpin var(--dur, 60s) linear infinite;
      will-change: transform;
    }
    .eco-chip.rev { animation-direction: reverse; }
    @keyframes orbitSpin { to { --oa: 360deg; } }
    .eco-chip b { color: var(--ink); font-weight: 600; }
    .eco-chip .cdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
    .cdot-anaf { background: var(--lime); box-shadow: 0 0 8px rgba(163,230,53,.6); }
    .cdot-shop { background: var(--blue); box-shadow: 0 0 8px rgba(96,165,250,.5); }
    .cdot-ship { background: var(--amber); box-shadow: 0 0 8px rgba(251,191,36,.5); }
    .cdot-acct { background: var(--purple); box-shadow: 0 0 8px rgba(167,139,250,.5); }
    .eco-legend { display: flex; gap: 12px 26px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
    .eco-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--muted); }

    /* ══════════════════════════════════════════════════════════════════════
       TRASEUL ANGAJATULUI — potecă desenată, cometă care o parcurge, pași
       care se aprind sincron 1 → 6
       ══════════════════════════════════════════════════════════════════════ */
    .journey { position: relative; margin-top: 26px; }
    .journey-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
    .journey-path path {
      stroke: rgba(163,230,53,.4); stroke-width: 2; stroke-dasharray: 7 9; fill: none;
      animation: dashFlow 1.1s linear infinite;
    }
    @keyframes dashFlow { to { stroke-dashoffset: -16; } }
    .jcomet { fill: var(--lime); filter: drop-shadow(0 0 8px rgba(163,230,53,.9)); }
    .jcomet-halo { fill: rgba(163,230,53,.22); }
    .journey-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
    .jstop { position: relative; padding-top: 46px; }
    .jstop:nth-child(even) { margin-top: 66px; }
    .jstop .jdot {
      position: absolute; top: 0; left: 26px;
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--lime-tint); border: 1.6px solid var(--lime-border);
      display: grid; place-items: center; color: var(--lime);
      font-family: var(--mono); font-size: 12.5px; font-weight: 600;
      animation: jdotHot 9s infinite;
    }
    .jcard {
      position: relative;
      background: linear-gradient(180deg, rgba(23,26,28,.92), rgba(20,24,26,.68));
      border: 1px solid var(--border); border-radius: 14px; padding: 16px 15px;
      transition: border-color .3s, box-shadow .3s;
      animation: jcardHot 9s infinite;
    }
    .jcard h3 { font-size: 14.5px; margin-bottom: 6px; }
    .jcard p { font-size: 12.5px; color: var(--text); line-height: 1.55; }
    .jstop:nth-child(1) .jdot, .jstop:nth-child(1) .jcard { animation-delay: 0s; }
    .jstop:nth-child(2) .jdot, .jstop:nth-child(2) .jcard { animation-delay: 1.5s; }
    .jstop:nth-child(3) .jdot, .jstop:nth-child(3) .jcard { animation-delay: 3s; }
    .jstop:nth-child(4) .jdot, .jstop:nth-child(4) .jcard { animation-delay: 4.5s; }
    .jstop:nth-child(5) .jdot, .jstop:nth-child(5) .jcard { animation-delay: 6s; }
    .jstop:nth-child(6) .jdot, .jstop:nth-child(6) .jcard { animation-delay: 7.5s; }
    @keyframes jdotHot {
      0%, 11% { background: var(--lime); color: #0e1113; box-shadow: 0 0 20px rgba(163,230,53,.65); }
      17%, 100% { background: var(--lime-tint); color: var(--lime); box-shadow: 0 0 0 rgba(163,230,53,0); }
    }
    @keyframes jcardHot {
      0%, 11% { border-color: var(--lime-border); box-shadow: 0 0 30px -10px rgba(163,230,53,.45); }
      17%, 100% { border-color: var(--border); box-shadow: 0 0 0 rgba(163,230,53,0); }
    }

    /* Tabelul „ce acoperă fiecare modul" (subpagina prețuri) */
    .modtable { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
    .modrow {
      display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start;
      background: linear-gradient(180deg, rgba(23,26,28,.9), rgba(20,24,26,.6));
      border: 1px solid var(--border); border-radius: 13px; padding: 16px 20px;
    }
    .modrow b { color: var(--ink); font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 9px; }
    .modrow span { color: var(--text); font-size: 14px; }

    /* Inel punctat rotativ în spatele CTA-ului final */
    .cta-ring {
      position: absolute; width: 560px; height: 560px; left: 50%; top: -320px;
      transform: translateX(-50%); border: 1px dashed rgba(163,230,53,.22); border-radius: 50%;
      animation: ctaSpin 44s linear infinite; pointer-events: none;
    }
    @keyframes ctaSpin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

    /* ══════════════════════════════════════════════════════════════════════
       RESPONSIVE — trei praguri, cu o regulă simplă:
       · accentele ANCORATE ÎN TEXT (cerc, subliniere, corectură) rămân mereu:
         sunt în `em`, deci se scalează cu litera și nu pot ajunge peste vecini;
       · accentele PLUTITOARE (note, stickere, chips, bandă, săgeți, numere
         uriașe) au nevoie de margini goale — dispar de îndată ce coloana de
         text începe să ocupe tot ecranul;
       · geometria (orbite, traseu, tabele) se restructurează, nu se înghesuie.
       ══════════════════════════════════════════════════════════════════════ */

    /* ≤1280px — marginile laterale s-au strâns: renunțăm la ce stă în afara grilei */
    @media (max-width: 1280px) {
      .big-num { display: none; }
      .sticker { display: none; }
      .f-arrow { display: none; }
      /* scânteile plutitoare din secțiuni dispar (coloana de text ocupă acum
         toată lățimea); cele din scena orbitală rămân — au spațiul lor */
      .plx-decor .doodle { display: none; }
      .ghost-word { font-size: clamp(70px, 11vw, 130px); opacity: .75; }
    }

    /* ≤1100px — coloana de conținut aproape atinge marginile */
    @media (max-width: 1100px) {
      .peek-chip { display: none; }
      .head-note .note { position: static; display: block; margin-top: 10px; transform: rotate(-1.5deg); }
      .journey-grid { grid-template-columns: repeat(3, 1fr); }
      .jstop:nth-child(even) { margin-top: 34px; }
      .journey-path { display: none; }
      /* notele lipite pe carduri/panouri: nu mai au colț liber, dispar */
      .plx-decor.note,
      .about-card > .note,
      .f-media > .note,
      .hero-stage > .note { display: none; }
    }

    /* ≤820px — tabletă/telefon: structurile se liniarizează */
    @media (max-width: 820px) {
      .eco-stage { height: auto; display: block; padding: 20px 0 6px; }
      .eco-hub { position: relative; top: auto; left: auto; transform: none; margin: 0 auto 46px; }
      .orbit { display: none; }
      .eco-chip { position: static; display: inline-flex; margin: 5px 4px; transform: none; animation: none; }
      .eco-wrapchips { text-align: center; }
      .tape, .corner, .cta-ring, .doodle { display: none; }
      .ghost-word { display: none; }
      /* decorurile cu dimensiuni fixe (pete de lumină, petice, inele) lățesc
         pagina pe telefon — parallax-ul e oprit oricum aici, deci nu pierdem nimic */
      .soft-blob, .dot-patch, .ring-decor { display: none; }
      /* convergența: pe telefon panourile pornesc de mai aproape. La ±38vw
         conținutul lor lățea pagina, iar mișcarea era oricum exagerată. */
      .mock-bar { transform: translate(calc(var(--e) * 2vw), calc(var(--e) * -22vh)) rotate(calc(var(--e) * 4deg)); }
      .mk-side { transform: translate(calc(var(--e) * -14vw), calc(var(--e) * 14vh)) rotate(calc(var(--e) * -5deg)); }
      .mk-main { transform: translate(calc(var(--e) * 12vw), calc(var(--e) * 18vh)) rotate(calc(var(--e) * 4deg)); }
      .note { font-size: 17px; }
      .sf-new { font-size: .8em; }
      .modrow { grid-template-columns: 1fr; gap: 6px; }
      .squig-divider { display: none; }
      /* capetele asimetrice revin la stânga: pe ecran îngust, alinierea la
         dreapta rupe ritmul de citire */
      .block-head.skew-r { text-align: left; margin-right: auto; }
      .block-head.skew-r h2::after { margin-left: 0; margin-right: auto; background: linear-gradient(90deg, var(--lime), rgba(163,230,53,0)); }
    }

    @media (max-width: 620px) {
      .journey-grid { grid-template-columns: 1fr; }
      .jstop:nth-child(even) { margin-top: 0; }
      .jstop { padding-top: 0; padding-left: 52px; }
      .jstop .jdot { top: 4px; left: 0; }
      .signature { font-size: 18px; }
    }

    /* ≤430px — telefon: bara de sus trebuie să încapă fără să împingă lateral */
    @media (max-width: 430px) {
      .wrap { padding: 0 18px; }
      .nav { height: 58px; }
      .brand { font-size: 17px; gap: 8px; }
      .brand svg { width: 26px; height: 26px; }
      .nav-cta .btn { padding: 9px 13px; font-size: 13.5px; gap: 6px; }
      .hero-actions .btn { width: 100%; justify-content: center; }
      .cta-actions .btn { width: 100%; justify-content: center; }
      .eco-hub { width: 104px; height: 104px; font-size: 46px; border-radius: 26px; }
      .intro-word { font-size: clamp(44px, 15vw, 64px); }
      .intro-cap { font-size: 9.5px; letter-spacing: .16em; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       HERO — coregrafia în 3 acte
       Act 1 (repaus): doar mesajul, centrat; dashboard-ul invizibil.
       Act 2 (--a 0→1): 3 panouri de sticlă converg din direcții diferite și
                        se încuie în centrul ecranului (burst + scan).
       Act 3 (--b 0→1): camera intră în fereastră (zoom centrat) → mesaj outro.
       --e = 1 împrăștiat / 0 asamblat. Implicit 0: fără JS fereastra e întreagă.
       ══════════════════════════════════════════════════════════════════════ */
    .hero { --e: 0; --burst: 0; }
    .hero-sticky {
      /* mesajul stă singur, centrat vertical — scena e scoasă din flux */
      justify-content: center; padding-top: 0;
    }
    .hero h1 { font-size: clamp(34px, min(6.4vw, 8.4vh), 88px); }
    .hero .sub { font-size: clamp(15.5px, min(1.8vw, 2.6vh), 21px); max-width: 680px; margin: clamp(12px, 2vh, 24px) auto 0; }
    .scroll-hint {
      gap: 11px; font-size: 14px; font-weight: 600; letter-spacing: .38em; color: var(--soft);
    }
    .scroll-hint .line { width: 1.5px; height: 48px; box-shadow: 0 0 10px rgba(163,230,53,.35); }

    .hero-stage {
      /* pornește imediat sub viewport; --lift o ridică exact în centrul ecranului */
      position: absolute; z-index: 2; left: 50%; top: 100vh;
      width: min(1000px, 94vw, 104vh);
      margin-top: 0; perspective: none;
      transform-origin: 50% 0;
      transform:
        translateX(-50%)
        translateY(calc(var(--a) * var(--lift, -60vh)))
        scale(var(--fit, 1));
    }
    .hero-stage::before { opacity: calc(.35 + var(--a) * .5); }

    .mock {
      /* rama pleacă de pe .mock — fiecare panou își poartă „sticla" lui */
      background: transparent; border: none; box-shadow: none; overflow: visible;
      transform-origin: 50% 50%;                       /* zoom-ul rămâne centrat */
      transform: scale(calc(.94 + var(--a) * .06 + var(--b) * 1.0));
      opacity: calc(1 - clamp(0, calc((var(--b) - .55) * 2.6), 1));
    }
    .mock::after { content: none; }                     /* scanline mutat pe .mock-glass */

    .mock-bar, .mk-side, .mk-main {
      will-change: transform, filter, opacity;
      filter: blur(calc(var(--e) * 5px));
      opacity: calc(1 - var(--e) * 1.2);               /* la repaus: invizibile */
    }
    /* panoul 1 — bara de fereastră, coboară de SUS */
    .mock-bar {
      border: 1px solid var(--border); border-radius: 14px;
      box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 46px -18px rgba(163,230,53,.3);
      transform: translate(calc(var(--e) * 6vw), calc(var(--e) * -36vh)) rotate(calc(var(--e) * 7deg));
    }
    /* panoul 2 — meniul, din DIAGONALA stânga-jos */
    .mk-side {
      border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 46px -18px rgba(163,230,53,.24);
      transform: translate(calc(var(--e) * -38vw), calc(var(--e) * 24vh)) rotate(calc(var(--e) * -10deg));
    }
    /* panoul 3 — conținutul, din DIAGONALA dreapta-jos */
    .mk-main {
      border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 30px 70px -30px rgba(0,0,0,.85), 0 0 46px -18px rgba(163,230,53,.24);
      transform: translate(calc(var(--e) * 32vw), calc(var(--e) * 30vh)) rotate(calc(var(--e) * 8deg));
    }
    /* rama unificatoare — se materializează când panourile ajung aproape */
    .mock-glass {
      position: absolute; inset: -3px; z-index: 6; pointer-events: none;
      border: 1px solid var(--lime-border); border-radius: 18px; overflow: hidden;
      box-shadow: 0 0 90px -24px rgba(163,230,53, calc(.2 + var(--burst) * .6)), var(--shadow-lg);
      opacity: clamp(0, calc((.18 - var(--e)) * 8), 1);
    }
    .mock-glass::after {
      content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 26%; opacity: 0;
      background: linear-gradient(180deg, transparent, rgba(163,230,53,.07) 42%, rgba(163,230,53,.2) 50%, rgba(163,230,53,.07) 58%, transparent);
    }
    .mock-glass.locked::after { opacity: 1; animation: scan 1s ease-in-out both; }
    /* burst-ul de lumină din momentul încuierii */
    .hero-burst {
      position: absolute; inset: -22%; z-index: 1; pointer-events: none;
      background: radial-gradient(closest-side at 50% 44%, rgba(163,230,53,.5), rgba(163,230,53,.12) 45%, transparent 72%);
      opacity: var(--burst, 0);
    }

    /* ══════════════════════════════════════════════════════════════════════
       HOVER pe carduri — mișcare fără aură verde (interfața rămâne aerisită)
       ══════════════════════════════════════════════════════════════════════ */
    .gc-fill, .gc-edge { display: none !important; }
    .module:hover { border-color: var(--border); box-shadow: 0 20px 44px -18px rgba(0,0,0,.7); }
    .module:hover .m-icon { box-shadow: none; }
    .f-media:hover { border-color: var(--border); box-shadow: var(--shadow-md); }
    .f-media:hover .fc { transform: none; }
    .plan:hover { border-color: var(--border); }
    .jcard:hover { border-color: var(--border); box-shadow: none; }
    details.qa[open] { box-shadow: none; }

    /* ══════════════════════════════════════════════════════════════════════
       INTRO „CORTINĂ" — FIVANTO mare, logo trasat, linie de încărcare, apoi
       cortina se despică pe o cusătură de lumină. Doar cu JS; sărit la
       reduced-motion. Animațiile de construcție așteaptă deschiderea.
       ══════════════════════════════════════════════════════════════════════ */
    #intro { display: none; }
    .js #intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; }

    /* ══ OBIECTIVUL ══
       Sase lamele in forma de pana, fiecare cu varful in centrul ecranului si
       baza in afara lui, care acopera impreuna tot ecranul. La deschidere se
       rotesc si pleaca spre exterior, deci se despart spre colturi.

       Fiecare lamela e un dreptunghi cu raport 1 : 1,1547 decupat in triunghi
       cu varful la stanga-mijloc: unghiul la varf iese exact 60 de grade
       (2 x atan(0,5774)), deci sase lamele inchid cercul fara suprapuneri.
       Originea transformarii e chiar varful, ca rotatia sa se faca in jurul
       centrului ecranului. */
    .iris { position: absolute; inset: 0; overflow: hidden; }
    /* Stratul de baza: acelasi fundal ca lamelele, sub ele. In repaus cele sase
       semiplane acopera deja tot planul, deci nu e nevoie de el — dar costa
       nimic si scuteste de a avea incredere intr-o masuratoare de pixeli.
       Se stinge in timp ce apertura creste, altfel ar rimane un voal. */
    .iris::before {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background:
        radial-gradient(760px 520px at 50% 50%, rgba(163,230,53,.06), transparent 68%),
        linear-gradient(180deg, #0d1012, #090c0e);
      animation: irisFade .3s ease-in .58s forwards;
    }
    @keyframes irisFade { to { opacity: 0; } }

    /* Ancora: punct fara dimensiune in centrul ecranului, rotit in sectorul ei.
       Nu deseneaza nimic, doar orienteaza foaia. */
    .iris .blade {
      position: absolute; left: 50%; top: 50%; z-index: 1;
      width: 0; height: 0;
      transform: rotate(var(--a));
    }
    .iris .b1 { --a:   0deg; }
    .iris .b2 { --a:  60deg; }
    .iris .b3 { --a: 120deg; }
    .iris .b4 { --a: 180deg; }
    .iris .b5 { --a: 240deg; }
    .iris .b6 { --a: 300deg; }

    /* Foaia acopera semiplanul de sub muchia care trece prin centru. Pivotul e
       pe muchie, la 90vmax de centru: `transform-origin: 220vmax 0` = 90vmax
       masurat de la centru, fiindca foaia incepe la -130vmax.
       Muchia superioara e si muchia aperturii, de aceea linia de lumina e pe ea
       si nu desenata separat — la fel ca pe o lamela adevarata. */
    .iris .leaf {
      position: absolute;
      left: -130vmax; top: 0;
      width: 260vmax; height: 200vmax;
      transform-origin: 220vmax 0;
      border-top: 1px solid rgba(163,230,53,.34);
      background:
        radial-gradient(760px 520px at 50% 0%, rgba(163,230,53,.06), transparent 68%),
        linear-gradient(180deg, #0d1012, #090c0e);
      transform: rotate(0deg);
      animation: irisOpen .66s cubic-bezier(.66, 0, .2, 1) .55s forwards;
    }
    /* Semnul conteaza: la -56 grade centrul ecranului rimane pe partea
       DESCOPERITA a muchiei. La +56 ar fi rimas acoperit si apertura s-ar fi
       inchis in loc sa se deschida. */
    @keyframes irisOpen { to { transform: rotate(-56deg); } }

    /* Muchiile in repaus: sase spite care pornesc din centru, exact pe liniile
       unde se ating lamelele. Se aprind inainte de deschidere si se sting cand
       lamelele incep sa se roteasca, ca sa nu se dubleze cu muchia lor. */
    .iris .seams {
      position: absolute; left: 50%; top: 50%; width: 300vmax; height: 300vmax;
      z-index: 2; transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
      background: repeating-conic-gradient(from 0deg,
        rgba(163,230,53,.5) 0deg 0.2deg, transparent 0.2deg 60deg);
      animation: seamOn .3s ease-out .28s forwards, seamOff .34s ease-in .55s forwards;
    }
    @keyframes seamOn  { to { opacity: .85; } }
    @keyframes seamOff { to { opacity: 0; } }

    #intro .intro-center { position: relative; z-index: 2; text-align: center; animation: introOut .25s ease .45s forwards; }
    @keyframes introOut { to { opacity: 0; transform: scale(.9); } }
    .intro-mark { position: relative; width: 112px; height: 112px; margin: 0 auto 28px; }
    .intro-mark > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    /* Perimetrul hexagonului e 6 x 49,875 = 299,25 unitati, de aceea 300 si nu
       420 ca la dreptunghiul de dinainte. Trasarea se termina la 0,45 s, exact
       cand centrul incepe sa se stinga — inainte dura 1,25 s si nu se vedea
       niciodata pana la capat. */
    .intro-mark > svg polygon {
      fill: none; stroke: var(--lime); stroke-width: 2; opacity: .9;
      stroke-dasharray: 300; stroke-dashoffset: 300;
      animation: drawRect .34s ease .1s forwards;
    }
    @keyframes drawRect { to { stroke-dashoffset: 0; } }

    /* Fagurele: sase celule in jurul marcii, la 76px de centru, aprinse una
       dupa alta. Sunt goale la inceput si se umplu — ca celulele de modul. */
    .sats { position: absolute; inset: 0; }
    .sats .sat {
      position: absolute; left: 50%; top: 50%; width: 30px; height: 26px;
      margin: -13px 0 0 -15px; color: var(--lime);
      opacity: 0; transform: translate(var(--x), var(--y)) scale(.5);
      animation: satOn .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }
    .sats .sat svg { width: 100%; height: 100%; display: block; }
    .sats .s1 { --x:  76px; --y:    0px; animation-delay: .16s; }
    .sats .s2 { --x:  38px; --y:  -66px; animation-delay: .22s; }
    .sats .s3 { --x: -38px; --y:  -66px; animation-delay: .28s; }
    .sats .s4 { --x: -76px; --y:    0px; animation-delay: .34s; }
    .sats .s5 { --x: -38px; --y:   66px; animation-delay: .40s; }
    .sats .s6 { --x:  38px; --y:   66px; animation-delay: .46s; }
    @keyframes satOn {
      to { opacity: .82; transform: translate(var(--x), var(--y)) scale(1); }
    }
    .intro-mark .mk {
      position: absolute; inset: 11px;
      display: grid; place-items: center;
      animation: markPop .7s cubic-bezier(.34, 1.56, .64, 1) .15s both, markGlow 2.1s ease-in-out .9s infinite alternate;
    }
    .intro-mark .mk svg { width: 100%; height: 100%; display: block; }
    @keyframes markPop { from { opacity: 0; transform: scale(.35) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
    /* drop-shadow, nu box-shadow: strafulgerarea trebuie sa urmeze hexagonul,
       iar box-shadow ar desena un halou dreptunghiular in jurul unei celule. */
    @keyframes markGlow {
      from { filter: drop-shadow(0 0 14px rgba(163,230,53,.4)); }
      to   { filter: drop-shadow(0 0 34px rgba(163,230,53,.7)); }
    }
    .intro-word {
      display: flex; justify-content: center; gap: .015em;
      font-weight: 700; letter-spacing: -.03em; line-height: 1;
      font-size: clamp(56px, 11vw, 140px); color: var(--ink);
    }
    .intro-word span {
      display: inline-block; opacity: 0; transform: translateY(54px); filter: blur(10px);
      animation: introRise .28s cubic-bezier(.16, 1, .3, 1) both;
    }
    .intro-word span:nth-child(1) { animation-delay: .02s; }
    .intro-word span:nth-child(2) { animation-delay: .05s; }
    .intro-word span:nth-child(3) { animation-delay: .08s; }
    .intro-word span:nth-child(4) { animation-delay: .11s; }
    .intro-word span:nth-child(5) { animation-delay: .14s; }
    .intro-word span:nth-child(6) { animation-delay: .17s; }
    @keyframes introRise { to { opacity: 1; transform: none; filter: none; } }
    .intro-line { width: min(380px, 64vw); height: 2px; margin: 32px auto 16px; background: var(--subtle); border-radius: 1px; overflow: hidden; }
    .intro-line i {
      display: block; height: 100%; transform-origin: left; transform: scaleX(0);
      background: linear-gradient(90deg, #86c521, var(--lime-bright));
      box-shadow: 0 0 12px rgba(163,230,53,.7);
      animation: introLoad 1.3s cubic-bezier(.4, 0, .2, 1) .8s forwards;
    }
    @keyframes introLoad { to { transform: scaleX(1); } }
    .intro-cap {
      font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
      opacity: 0; animation: fadeUp .6s ease 1.05s forwards;
    }
    /*
     * Construcția scenei (grafice, bare, itemi de mockup) așteaptă deschiderea cortinei — dar TITLUL,
     * SUBTITLUL și BUTOANELE nu mai așteaptă.
     *
     * De ce s-a schimbat: `.hero h1 .w` și `.hero .sub` pornesc de la `opacity: 0`, iar pauza le îngheța
     * ACOLO până la 2,3 s, când se adaugă `intro-done`. Chrome nu contorizează ca LCP un element cu
     * opacitate 0, deci cel mai mare element de conținut al paginii nu exista, ca metrică, în primele
     * 2,3 secunde — plus timpul de animație. Rezultatul: LCP peste 4 s pe mobil throttled, adică zero
     * puncte pe o metrică ce cântărește 25% din scor. Scorul de performanță nu putea trece de ~70,
     * oricât de ușoară ar fi fost pagina (și e: 6 cereri, 273 KB).
     *
     * Pentru OM nu se schimbă absolut nimic: cortina stă deasupra, la `z-index: 300`, deci titlul se
     * animează dedesubtul ei și nu se vede până la deschidere. S-a schimbat doar ce vede browserul.
     *
     * Restul (scena mockup-ului) rămâne pauzat: sunt animații de construcție care chiar au sens să
     * pornească la ridicarea cortinei, iar ele nu sunt candidați de LCP.
     */
    .js body:not(.intro-done) .asm,
    .js body:not(.intro-done) .mk-item,
    .js body:not(.intro-done) .mk-row,
    .js body:not(.intro-done) .mock-chart i,
    .js body:not(.intro-done) .mk-fill i { animation-play-state: paused !important; }
    body.intro-lock { overflow: hidden; }

    /* Fără mișcare: scena revine în flux, sub mesaj */
    @media (prefers-reduced-motion: reduce) {
      .hero-stage { position: static !important; transform: none !important; margin: 26px auto 0; }
      .hero-sticky { justify-content: flex-start; }
      .mock-bar, .mk-side, .mk-main { filter: none !important; opacity: 1 !important; transform: none !important; }
      .mock { opacity: 1 !important; }
      .eco-chip, .orbit, .eco-hub, .sticker, .dood, .jcard, .jstop .jdot, .journey-path path, .cta-ring, .gw-in, .btn-shimmer::after { animation: none !important; }
    }
    html:not(.js) .hero-stage { position: static; transform: none; margin: 26px auto 0; }
    html:not(.js) .hero-sticky { justify-content: flex-start; }

    /* ═══════════════ Consimțământ pentru măsurare (pagini publice) ═══════════════
       Construit ca alegere reală: cele două butoane arată identic și sunt la fel de
       ușor de apăsat, nu există „X" care să însemne acceptare tacită, iar refuzul nu
       limitează nimic. Un „Accept" verde lângă un „Refuz" gri e consimțământ viciat
       — și oricum otrăvește încrederea, care la un soft de firmă e chiar produsul. */
    .pa-consent {
      position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
      z-index: 9000; width: min(660px, calc(100vw - 32px));
      display: flex; gap: 18px; align-items: center;
      padding: 14px 18px; border-radius: 14px;
      border: 1px solid var(--border); background: var(--surface);
      box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
      animation: pa-in .3s var(--ease, ease) both;
    }
    @keyframes pa-in { from { opacity: 0; transform: translate(-50%, 14px); } }
    .pa-consent p {
      flex: 1; min-width: 0; margin: 0;
      font-size: 12.5px; line-height: 1.55; color: var(--text);
    }
    .pa-consent a { color: var(--lime); text-decoration: underline; }
    .pa-actions { display: flex; gap: 8px; flex-shrink: 0; }
    .pa-actions button {
      padding: 8px 16px; border-radius: 9px;
      border: 1px solid var(--border); background: rgba(255, 255, 255, .04);
      color: var(--ink); font: 500 13px var(--font, inherit); cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .pa-actions button:hover { background: rgba(255, 255, 255, .09); border-color: var(--soft); }
    @media (max-width: 560px) {
      .pa-consent { flex-direction: column; align-items: stretch; gap: 12px; }
      .pa-actions button { flex: 1; }
    }
    @media (prefers-reduced-motion: reduce) { .pa-consent { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Mod „puțină mișcare" — pus de landing.js pe <html> când semnalele browserului
   spun că animația e pur cost: saveData, 2G/3G, ≤4 nuclee sau ≤4 GB memorie.
   Vezi nota din landing.js pentru de ce e separat de prefers-reduced-motion.

   Ce se oprește: BUCLELE infinite și blurul animat — adică lucrul continuu de
   compoziție care ține procesorul ocupat cât timp pagina e deschisă. Ce RĂMÂNE:
   animațiile de intrare (o singură dată, ieftine) și tranzițiile de hover, ca
   pagina să nu pară moartă.
   ══════════════════════════════════════════════════════════════════════════ */
.lite-motion .aurora,
.lite-motion .orbit,
.lite-motion .eco-hub,
.lite-motion .dood,
.lite-motion .sticker,
.lite-motion .jcard,
.lite-motion .jstop .jdot,
.lite-motion .journey-path path,
.lite-motion .cta-ring,
.lite-motion .gw-in,
.lite-motion .btn-shimmer::after,
.lite-motion .plan.pop.in,
.lite-motion .scroll-hint .line,
.lite-motion .mk-timer::before {
  animation: none !important;
}

/* Blurul animat pe straturi cât fereastra e cel mai scump lucru din pagină.
   Rămân, ca fundal static: aceeași atmosferă, zero cost per cadru. */
.lite-motion .aurora {
  filter: none !important;
  opacity: .5;
}

/* Eroul „pinned" pe 245vh cu transformări conduse de derulare: pe un dispozitiv slab,
   fiecare cadru de scroll recalculează layout. Colapsează la înălțime naturală. */
.lite-motion .hero { height: auto; --a: 1 !important; --b: 0 !important; }
.lite-motion .hero-sticky { position: relative; height: auto; padding-bottom: 60px; }
.lite-motion .hero-copy,
.lite-motion .hero-stage { transform: none !important; opacity: 1 !important; }
.lite-motion [data-plx] { transform: none !important; }

/* `will-change` pe elemente permanent animate ține un strat de compoziție alocat la
   nesfârșit. Fără animație, nu mai are niciun rost. */
.lite-motion .aurora,
.lite-motion .orbit { will-change: auto !important; }