/* ============================================================
   HOME / LANDING — CSS scoped pe lățime ca să fie 1:1 la ambele capete:
   >=720px  = designul nutritie-desktop (verbatim)
   <720px   = designul nutritie-mobil-x (verbatim, inclusiv STRATUL X)
   Fiecare design e folosit neschimbat, doar limitat pe viewport (media queries
   native) => la resize din dev tools comuta live, fara detectie de device.
   ============================================================ */

/* ===== DESKTOP (nutritie-desktop) — activ la >=720px ===== */
@media (min-width:720px){
/* ============================================================
     DESKTOP — construit pe baza versiunii de mobil finalizate.
     Scalabil: desktop plin (≥1100) → jumătate de ecran (≥720) → ecrane mici (<720,
     layoutul de telefon). Aceleași secțiuni / conținut / animații.
     Fold: hero pe UN ecran (2 coloane la desktop), Program pe UN ecran.
     ============================================================ */
  :root{
    --bg:#080B12; --bg-elev:#0F141C; --panel:#0D1117; --card-solid:#0E1119;
    --card-fill:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    --card-bd:rgba(255,255,255,0.07);
    --fg:#ECECF3; --fg-2:#D3D3DD; --fg-body:#C8C8D4; --muted:#9B9BAC; --dim:#84879E;
    --accent-text:#D4C5FF; --ok-text:#A6F0C6; --focus:#9D7CFF;
    --grad-a:#00C2FF; --grad-b:#B521E9; --grad:linear-gradient(90deg,#00C2FF,#B521E9);
    --accent:#7C5CFC; --accent-rgb:124,92,252; --ok:#01DB69; --ok-rgb:1,219,105; --danger:#FF6B81;
    /* ui-ux-pro-max §6 color-semantic: semantic aliases mapped onto brand scale */
    --primary:var(--accent); --surface:var(--card-solid); --on-surface:var(--fg); --on-surface-2:var(--muted); --success:var(--ok); --error:var(--danger);
    --font-display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --t-display:31px; --t-h2:25px; --t-h3:20px; --t-lg:18px; --t-base:16px; --t-sm:14.5px; --t-xs:13px; --t-2xs:11.5px;
    --lh-tight:1.05; --lh-snug:1.14; --lh-h3:1.25; --lh-base:1.55;
    --gutter:16px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms; --dur-xslow:640ms;
    --ease-out:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.4,0,.2,1);
    --ease-press:cubic-bezier(.34,1.4,.64,1); --ease-emph:cubic-bezier(.16,1,.3,1);
    --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.12);
    --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 8px 24px -8px rgba(0,0,0,.55); --sh-3:0 20px 50px -12px rgba(0,0,0,.65);
    --inset-hi:inset 0 1px 0 rgba(255,255,255,.06);
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --phone:460px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{margin:0; color:var(--fg);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:var(--t-base); line-height:var(--lh-base);
    font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    overscroll-behavior-y:contain; position:relative;
    background:
      radial-gradient(120% 56% at 88% -4%, rgba(181,33,233,.09), transparent 52%),
      radial-gradient(100% 52% at 3% 0%, rgba(0,194,255,.07), transparent 48%),
      radial-gradient(80% 50% at 50% 120%, rgba(124,92,252,.05), transparent 60%),
      var(--bg);
    overflow-x:hidden}
  body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04; background-size:140px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  a{color:inherit; text-decoration:none}
  img{max-width:100%}
  .wrap{position:relative; z-index:2; width:100%; max-width:var(--phone); margin:0 auto;
    padding:0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right))}
  section{padding:46px 0; position:relative}
  /* ui-ux-pro-max §6: font pairing — display heading (Sora) + body (Inter) */
  h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.028em; text-wrap:balance; font-feature-settings:'ss01' 1; font-optical-sizing:auto}
  .gt{font-family:var(--font-display)}
  /* a11y: skip-to-content link */
  .skip{position:absolute; left:8px; top:-48px; z-index:200; background:var(--accent); color:#fff; font-weight:700; padding:10px 16px; border-radius:10px; transition:top var(--dur-base) var(--ease-out)}
  .skip:focus{top:8px}
  h3{letter-spacing:-.02em}
  .num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1}
  .gt{color:#C9B6FF; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em}
  .kick{font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--muted)}
  .lede{font-size:var(--t-base); line-height:var(--lh-base); color:var(--muted); max-width:34ch; margin-left:auto; margin-right:auto; letter-spacing:-.005em}
  .lede b{color:var(--fg); font-weight:700}
  .shead{text-align:center; max-width:36ch; margin:0 auto var(--s6)}
  .shead h2{font-size:var(--t-h2); line-height:var(--lh-snug); margin:8px 0 0}
  .shead p{margin-top:10px}
  .sep{height:1px; border:0; width:100%; max-width:var(--phone); margin:0 auto;
    background:linear-gradient(90deg,transparent,var(--hairline) 28%,var(--hairline) 72%,transparent)}
  .ico{display:inline-flex; width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
  .sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}
  :focus:not(:focus-visible){outline:none}

  .free-pill{display:inline-flex; align-items:center; gap:7px; font-size:var(--t-2xs); font-weight:800; letter-spacing:.01em; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.3); border-radius:999px; padding:6px 13px}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(var(--ok-rgb),.45); animation:livePulse 2.2s ease-out infinite}
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),.45)}70%,100%{box-shadow:0 0 0 7px rgba(var(--ok-rgb),0)}}
  .av{background:var(--grad); border-radius:50%; padding:2px; display:inline-flex; flex-shrink:0}
  .av img{border-radius:50%; border:2px solid var(--bg); display:block; object-fit:cover}
  .av-sm img{width:28px; height:28px}
  .av-lg img{width:52px; height:52px; box-shadow:0 0 0 1px rgba(0,0,0,.4)}

  /* CTA — efectul ORIGINAL din repo (cta--background-gradient): gradientul de brand
     „respiră" lent stânga-dreapta; fără linii de highlight peste buton */
  .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font:inherit;
    font-weight:800; font-size:var(--t-base); border-radius:var(--r-md); padding:0 22px; min-height:52px; width:100%; color:#fff;
    background:var(--grad); background-size:150% 100%; animation:gradientShift 8s ease-in-out infinite;
    box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 28px -6px rgba(124,92,252,.45);
    touch-action:manipulation; overflow:hidden;
    transition:transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) var(--ease-out)}
  @keyframes gradientShift{0%{background-position:10% 50%} 50%{background-position:90% 50%} 100%{background-position:10% 50%}}
  .btn:active{transform:scale(.97)}
  .btn .two{display:flex; flex-direction:column; line-height:1.15}
  .btn .two small{font-size:var(--t-2xs); font-weight:600; opacity:.88}
  .btn-max{max-width:340px; margin-left:auto; margin-right:auto; display:flex}
  @media (hover:hover){ .btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.35),0 16px 40px -6px rgba(124,92,252,.55),var(--inset-hi)} }

  /* segmented control (radiogroup / tablist) */
  .seg{position:relative; display:flex; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-md); padding:4px; box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
  .seg .thumb{position:absolute; top:4px; left:0; width:0; height:calc(100% - 8px); border-radius:var(--r-sm); background:#1B2230;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.3); transform:translateX(0);
    transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); z-index:0}
  .seg button{position:relative; z-index:1; flex:1; min-height:48px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:var(--t-xs);
    line-height:1.1; color:var(--muted); background:none; border-radius:var(--r-sm); padding:6px 4px; touch-action:manipulation;
    transition:color var(--dur-base), transform var(--dur-fast) var(--ease-press)}
  .seg button.on{color:#fff}
  .seg button:active{transform:scale(.97)}

  /* ===== butoanele ORIGINALE de selecție (SVG-uri detaliate din repo, animate pe [data-active]:
     riglele glisează / ramurile cresc / lanțurile se rotesc — exact ca în original) ===== */
  .plan-switch{display:flex; justify-content:center; align-items:center; gap:7px}
  .plan-switch .plan-trigger-cnt{position:relative; flex:1; max-width:106px}
  .plan-switch .plan-trigger-cnt::before{content:""; position:absolute; inset:-2px; background:var(--grad); z-index:-1;
    filter:blur(9px); opacity:0; transform:scale(.4); transition:opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
    border-radius:48px; will-change:transform}
  .plan-switch .plan-trigger-cnt:has(.plan-trigger[data-active])::before{transform:none; opacity:.5}
  .plan-switch .plan-trigger{display:block; width:100%; padding:0; margin:0; font:inherit; cursor:pointer; touch-action:manipulation;
    transition:500ms; border-radius:48px; border:1px solid transparent; transform:scale(.9); opacity:.75; overflow:hidden;
    background:transparent; -webkit-tap-highlight-color:transparent}
  .plan-switch .plan-trigger *{transition:750ms}
  .plan-switch .plan-trigger[data-active]{transform:scale(1.05); opacity:1}
  .plan-switch .plan-trigger svg{width:100%; display:block; position:relative}
  .plan-switch .plan-trigger svg .text{transform:scale(1.05) translate(-0.3rem,-0.2rem)}
  /* 1 — Slăbit Rapid (albastru) */
  .plan-switch .plan-trigger[data-id="1"]{background:#b6dafd}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]){background:#1b1f42; border-color:#0077f4}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) svg .text *{fill:#557fbf; stroke:#557fbf}
  .plan-switch .plan-trigger[data-id="1"] .ruler-1,.plan-switch .plan-trigger[data-id="1"] .ruler-2{will-change:transform,opacity}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-1{transform:translateY(-100%); opacity:0}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-2{transform:translateY(100%); opacity:0}
  /* 2 — Menținere Echilibrată (mov) */
  .plan-switch .plan-trigger[data-id="2"]{background:#d4abf9}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]){background:#3c2e46; border-color:#994fe1}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .text *{fill:#795b87}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-1{will-change:transform,opacity; transform-origin:bottom left}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-2{will-change:transform,opacity; transform-origin:top}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-1{transform:translate(100%,200%) rotate(-60deg); opacity:0}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-2{transform:translateX(-20px) rotate(-45deg); opacity:0}
  /* 3 — Masă Musculară (roșu) */
  .plan-switch .plan-trigger[data-id="3"]{background:#fe898e}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]){background:#492729; border-color:#cc001b}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .text *{fill:#985256; stroke:#985256}
  .plan-switch .plan-trigger[data-id="3"] svg .chain-big,.plan-switch .plan-trigger[data-id="3"] svg .chain-small{will-change:transform,opacity; transform-origin:center}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-big{opacity:0; transform:rotate(90deg) scale(1.5)}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-small{opacity:0; transform:rotate(-90deg) scale(1.5)}

  .reveal{opacity:0; transform:translateY(18px) scale(.99); transition:opacity .55s var(--ease-emph), transform .6s var(--ease-emph)}
  .reveal.in{opacity:1; transform:none}

  /* ============ 0. HEADER — EXACT ca în repo-ul original (top-bar + hamburger--3 + menu),
     cu tema noastră: transparent la start; la scroll fundal solid + border 1px pe contur ============ */
  .topbar{position:sticky; top:0; z-index:70; display:flex; align-items:center; justify-content:space-between;
    padding:7px max(var(--gutter),env(safe-area-inset-left)) 7px max(var(--gutter),env(safe-area-inset-right));
    background:transparent; border:1px solid transparent;
    transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out)}
  .topbar.stuck{background:var(--bg); border-color:var(--hairline)}
  .topbar.hide{transform:translateY(-100%)}
  .brand{display:inline-flex; align-items:center; height:44px; -webkit-tap-highlight-color:transparent}
  .brand-logo{height:37px; width:auto; display:block}
  /* hamburger--3 din original: DOUĂ linii; la activare tot butonul se rotește 180°,
     iar liniile formează X-ul (linia 2 urcă peste linia 1) */
  .burger{position:relative; z-index:2; width:44px; height:44px; border:none; background:none; cursor:pointer;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; margin-right:-8px;
    -webkit-tap-highlight-color:transparent; color:var(--fg); transition:transform .5s var(--ease-emph)}
  .burger span{display:block; width:30px; height:2px; background:currentColor; transform-origin:center center;
    transition:transform .5s var(--ease-emph)}
  .burger span + span{margin-top:5px}
  .burger span:nth-child(3){display:none}
  .burger[aria-expanded="true"]{transform:rotate(180deg)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){transform:translate3d(0,-7px,0) rotate(-45deg)}
  /* meniul original: overlay cu fundal solid (::after) + văl de gradient 25% (::before),
     itemii încep sub bară (nu centrați pe verticală) și intră prin mască, de jos */
  .navmenu{position:fixed; inset:0; z-index:65; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:18px;
    padding:calc(2*var(--hdr)) 24px calc(24px + env(safe-area-inset-bottom));
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .38s var(--ease-out), visibility 0s linear .38s}
  .navmenu::after{content:""; position:absolute; inset:0; background:var(--bg); z-index:1}
  /* vălul de gradient „înflorește" ușor DUPĂ fundal — dă adâncime deschiderii */
  .navmenu::before{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; z-index:2;
    transition:opacity .55s var(--ease-out)}
  .navmenu.open::before{opacity:.25; transition-delay:.08s}
  .navmenu>*{position:relative; z-index:3}
  .navmenu.open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s var(--ease-out)}
  /* itemii intră prin mască, de jos, în cascadă (60ms între ei) — fluid, fără salturi */
  .navmenu .mi{overflow:hidden}
  .navmenu .mi a{display:block; font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:-.01em;
    color:var(--fg); padding:4px 10px; text-align:center; will-change:transform;
    transform:translateY(110%); opacity:0;
    transition:transform .6s var(--ease-emph), opacity .4s var(--ease-out)}
  .navmenu.open .mi a{transform:none; opacity:1}
  .navmenu.open .mi:nth-child(1) a{transition-delay:.05s}
  .navmenu.open .mi:nth-child(2) a{transition-delay:.11s}
  .navmenu.open .mi:nth-child(3) a{transition-delay:.17s}
  /* la închidere: totul se retrage rapid, fără stagger */
  .navmenu:not(.open) .mi a{transition:transform .18s var(--ease-out), opacity .15s var(--ease-out)}
  .navmenu .mi a:active{color:var(--accent-text)}
  /* Autentificare = cta--border-gradient din original: pastilă cu inel gradient + iconiță persoană;
     intră ultima, cu o ridicare blândă */
  .navmenu .nav-cta{position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:14px;
    font-weight:700; font-size:16px; color:var(--fg); padding:14px 28px; border-radius:999px;
    opacity:0; transform:translateY(14px);
    transition:transform .55s var(--ease-emph), opacity .4s var(--ease-out)}
  .navmenu.open .nav-cta{opacity:1; transform:none; transition-delay:.24s}
  .navmenu:not(.open) .nav-cta{transition:transform .18s var(--ease-out), opacity .15s var(--ease-out)}
  .navmenu .nav-cta::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .navmenu .nav-cta svg{width:19px; height:19px}
  body.menu-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){ .navmenu .mi a,.navmenu .nav-cta,.navmenu::before{transition:none} }

  /* ============ 1. HERO (compact fold) ============ */
  :root{--hdr:60px}
  .hero{padding:10px 0 14px; text-align:center; position:relative; overflow:hidden}
  /* fold-perfect DOAR pe telefon: ecranul 1 se închide EXACT cu CTA-ul cardului — spațiul liber
     se distribuie elegant între blocuri (titlu / poarta 1 / sau / poarta 2).
     Pe ferestre late (desktop) rămâne curgerea naturală, compactă. */
  @media (max-width:520px){
    .hero .wrap{display:flex; flex-direction:column; justify-content:space-between;
      min-height:calc(100vh - var(--hdr) - 24px); min-height:calc(100svh - var(--hdr) - 24px)}
    .hero .tblock,.hero .searchbar,.hero .saudiv,.hero .planintro{flex:none}
  }
  .hero::before{content:""; position:absolute; inset:-12% -22% 42%; z-index:0; pointer-events:none;
    background:radial-gradient(50% 60% at 28% 18%, rgba(0,194,255,.15), transparent 60%),
               radial-gradient(54% 60% at 78% 12%, rgba(181,33,233,.17), transparent 62%);
    animation:heroDrift 17s ease-in-out infinite alternate}
  @keyframes heroDrift{from{transform:translate3d(-8px,0,0) scale(1)} to{transform:translate3d(8px,6px,0) scale(1.04)}}
  .hero .wrap{position:relative; z-index:2}
  .hero .title{font-size:clamp(26px,8.9vw,38px); line-height:1.02; letter-spacing:-.04em; font-weight:850; margin-top:2px; position:relative; z-index:2}
  .hero .title .ln{display:block; will-change:transform,opacity}
  .hero .title .ln1{color:#fff}
  /* X = "scânteia" gradient dintre cele două concepte */
  .hero .title .xwrap{display:flex; align-items:center; justify-content:center; width:.58em; height:.58em; margin:3px auto; position:relative; will-change:transform,opacity}
  .hero .title .xwrap::before{content:""; position:absolute; inset:-48%; border-radius:50%; z-index:-1; opacity:0;
    background:radial-gradient(circle, rgba(124,92,252,.62), rgba(0,194,255,.28) 46%, transparent 72%); filter:blur(7px)}
  .hero .title .x{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 5px rgba(0,194,255,.5))}
  .hero .title .gt{background-size:220% 100%; background-position:100% 0}

  /* ============ COREGRAFIE HERO — o singură poveste, ritm constant (~150ms între intrări),
     toată mișcarea din aceeași familie (urcă ușor + se așază cu emphasized-decelerate):
     t=0    „Nutriție" (ancora)
     t=.18  scânteia X pop → spin 0→45→0 (crisp, fără pauze moarte)
     t=.32  „Inteligență Artificială" urcă, gradientul începe să curgă
     t=.55  promisiunea (subtitlul) urcă „din" bară
     t=.72  pastila „Gratuit" → t=.84 bara de search → aura clipește la aterizare
     t=1.02 dovada: „Antrenat de Dr. Andu Preda" coboară din bară
     t=1.22 „Sau" (alegerea) → t=1.42 Poarta 2: cardul se ridică, titlul lui se aprinde.
     Povestea se închide în ~2.1s. Mișcare, nu loading. ============ */
  .hero.play .title .ln1{animation:heroRise .6s var(--ease-emph) 0s both}
  .hero.play .title .xwrap{animation:xIn .5s var(--ease-press) .18s both}
  .hero.play .title .x{animation:xSpin 1s var(--ease-inout) .5s both, xBreathe 5.6s ease-in-out 3s infinite}
  .hero.play .title .ln2{animation:heroRise .6s var(--ease-emph) .32s both, gradFlow 9s linear 1.4s infinite}
  @keyframes heroRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
  @keyframes xIn{0%{opacity:0; transform:scale(.3)} 62%{opacity:1; transform:scale(1.14)} 100%{opacity:1; transform:scale(1)}}
  @keyframes xSpin{0%{transform:rotate(0)} 42%{transform:rotate(45deg)} 58%{transform:rotate(45deg)} 100%{transform:rotate(0)}}
  @keyframes xBreathe{0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(9deg) scale(1.07)}}
  @keyframes gradFlow{0%{background-position:100% 0} 50%{background-position:0 0} 100%{background-position:100% 0}}
  /* subtitlul urcă din bară / „Antrenat de..." coboară din bară (mecanica adds-text) */
  .hero.play .sub{animation:emergeUp .55s var(--ease-emph) .55s both}
  .hero.play .free-wrap{animation:heroRise .45s var(--ease-emph) .72s both}
  .hero.play .sb-field{animation:heroRise .55s var(--ease-emph) .84s both}
  .hero.play .trained{animation:emergeDown .55s var(--ease-emph) 1.02s both}
  @keyframes emergeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  @keyframes emergeDown{from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:none}}
  /* aura barei clipește exact când bara aterizează, apoi respiră — mereu, indiferent de focus
     (strălucirea de focus e strat separat pe ::after, deci nimic nu se restartează la blur) */
  /* 1.39s, nu 1.3s: bara aterizează la .84s + .55s = 1.39s. Comentariul de mai sus
     spune „clipește exact când bara aterizează", dar 1.3s o pornea cu 90ms MAI DEVREME
     — adică fix peste ultimele cadre ale animației de opacitate a barei. Acolo se năștea
     stratul filtrat, în interiorul unui strămoș încă semi-transparent, și de acolo venea
     chenarul negru. Acum aura pleacă după ce bara s-a așezat, cum era intenția. */
  .hero.play .sb-pill::before{animation:auraFlash .9s var(--ease-out) 1.39s both, auraBreathe 4.6s ease-in-out 3s infinite}
  @keyframes auraFlash{0%{opacity:.1} 45%{opacity:.5} 100%{opacity:.18}}
  @keyframes auraBreathe{0%,100%{opacity:.16} 50%{opacity:.3}}
  /* „Sau" apare + clipește scurt */
  .hero.play .saudiv{animation:heroRise .45s var(--ease-emph) 1.22s both}
  .hero.play .saudiv span{animation:sauFlash 1s var(--ease-out) 1.5s both}
  @keyframes sauFlash{0%,100%{border-color:var(--hairline); color:var(--dim)} 45%{border-color:rgba(var(--accent-rgb),.6); color:var(--accent-text)}}
  /* Poarta 2 — cardul se ridică DUPĂ „Sau" (ordine logică garantată, nu lăsată pe seama
     observer-ului), apoi titlul lui se aprinde scurt */
  /* fill backwards (nu both): după aterizare, cardul revine la stilurile naturale,
     ca lift-ul de hover de pe desktop să poată funcționa */
  .hero.play .planintro{animation:cardRise .7s var(--ease-emph) 1.42s backwards}
  /* titlul cardului: o singură trecere de lumină prin gradientul textului, în timp ce cardul
     aterizează — fără animație de filtru (drop-shadow animat pe text decupat poate
     rasteriza ca o dungă sub cuvânt); glow-ul static rămâne neschimbat */
  .hero.play .planintro h2 .big{animation:bigShine 1.5s var(--ease-out) 1.9s both}
  @keyframes cardRise{from{opacity:0; transform:translateY(26px) scale(.977)} to{opacity:1; transform:none}}
  @keyframes bigShine{from{background-position:120% 0} to{background-position:0% 0}}
  /* plasă de siguranță — dacă motorul nu avansează animațiile, tot hero-ul rămâne vizibil */
  .hero.shown .title .ln,.hero.shown .title .xwrap,.hero.shown .title .x,
  .hero.shown .sub,.hero.shown .free-wrap,.hero.shown .sb-field,.hero.shown .trained,
  .hero.shown .saudiv,.hero.shown .planintro,.hero.shown .planintro h2 .big{
    opacity:1 !important; transform:none !important; animation:none !important}
  /* pop: glow sub textul „AI" */
  .hero .title .ln2{filter:drop-shadow(0 4px 22px rgba(124,92,252,.34))}
  /* aură focalizată în spatele titlului, care „respiră" (peste orbii din hero::before) */
  .hero .title::after{content:""; position:absolute; z-index:-1; left:50%; top:44%; width:118%; height:150%; transform:translate(-50%,-50%);
    background:radial-gradient(46% 42% at 50% 40%, rgba(124,92,252,.20), transparent 70%); filter:blur(14px); pointer-events:none}
  .hero.play .title::after{animation:titleAura 6.5s ease-in-out 1.6s infinite}
  @keyframes titleAura{0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
  .hero .sub{margin:10px auto 0; max-width:42ch; font-size:14.5px}
  .searchbar{margin:14px auto 0}
  .free-wrap{text-align:center; margin-bottom:7px}
  .sb-pill{position:relative; display:flex; align-items:center; background:var(--panel); border:1px solid var(--card-bd);
    border-radius:999px; padding:6px 6px 6px 18px; z-index:1; min-height:52px; box-shadow:var(--inset-hi),var(--sh-1);
    transition:border-color var(--dur-base) var(--ease-out)}
  /* două straturi de aură: ::before = ambientul animat (nu depinde de focus, deci nu se
     restartează la blur); ::after = strălucirea de focus, cu tranziție lină în ambele sensuri */
  /* `will-change` + `backface-visibility` NU sunt cosmetice: forțează stratul de
     compoziție al aurei să existe de la prima cadră. Fără ele, `filter:blur()` își
     cere un strat propriu abia când pornește `auraFlash` — iar stratul se năștea
     ÎN TIMP CE strămoșul `.sb-field` încă își anima opacitatea, deci în interiorul
     unui tampon intermediar. Pe Android, textura filtrului e alocată opac o cadră
     sau două înainte să primească conținut: exact chenarul negru de 2px văzut peste
     marginea barei de căutare (`inset:-2px` = fix zona aceea).
     Costul e zero: `auraBreathe` rulează la infinit, deci stratul e oricum permanent. */
  .sb-pill::before{content:""; position:absolute; inset:-2px; border-radius:999px; background:var(--grad); filter:blur(12px); opacity:.16; z-index:-1;
    will-change:opacity; backface-visibility:hidden}
  .sb-pill::after{content:""; position:absolute; inset:-2px; border-radius:999px; background:var(--grad); filter:blur(12px); opacity:0; z-index:-1; transition:opacity var(--dur-base) var(--ease-out)}
  .sb-pill:focus-within{border-color:rgba(var(--accent-rgb),.4)}
  .sb-pill:focus-within::after{opacity:.3}
  .sb-pill input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--fg); font:inherit; font-size:var(--t-base); padding:10px 6px}
  .sb-pill input::placeholder{color:var(--dim)}
  .sb-go{flex-shrink:0; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:var(--grad); color:#fff;
    display:flex; align-items:center; justify-content:center; touch-action:manipulation; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.3);
    transition:transform var(--dur-fast) var(--ease-press)}
  .sb-go .ico{width:20px; height:20px; stroke-width:2}
  .sb-go:active{transform:scale(.92)}
  /* sugestiile apar ca dropdown DOAR la focus pe search (ca în platformă) — eliberează hero-ul */
  .sb-field{position:relative; z-index:6}
  .sb-sugs{position:absolute; left:0; right:0; top:calc(100% + 9px); z-index:30; text-align:left; padding:6px;
    background:var(--panel); border:1px solid var(--card-bd); border-radius:var(--r-lg); box-shadow:var(--sh-2),var(--inset-hi);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top center;
    transition:opacity .2s var(--ease-out), transform .26s var(--ease-emph), visibility 0s .26s}
  .sb-field.open .sb-sugs{opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .22s var(--ease-out), transform .3s var(--ease-emph)}
  .sug-h{font-size:var(--t-2xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding:6px 12px 5px}
  .sug{display:flex; align-items:center; gap:11px; width:100%; text-align:left; min-height:46px; background:none; border:none;
    border-radius:12px; padding:0 12px; font-size:var(--t-sm); line-height:1.25; color:var(--fg-body); cursor:pointer; touch-action:manipulation;
    transition:background var(--dur-fast)}
  .sug .sq{flex:0 0 auto; width:15px; height:15px; color:var(--dim); stroke-width:2; opacity:.85}
  .sug span{flex:1; min-width:0}
  .sug:hover,.sug:focus-visible{background:rgba(255,255,255,.05); outline:none}
  .sug:hover .sq,.sug:focus-visible .sq{color:var(--accent-text); opacity:1}
  .sug:active{background:rgba(var(--accent-rgb),.12)}
  /* UN singur rând, ca în original: avatar + „Antrenat de Dr. Andu Preda · Nutriționist & Cercetător 🇬🇧";
     un mic fitter JS (ca la titlu) coboară fontul fin dacă nu încape pe ecrane înguste */
  .trained{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; color:var(--muted); line-height:1.3}
  .trained b{color:var(--fg); font-weight:700}
  .trained .av-sm img{width:24px; height:24px}
  .trained .tr-line{white-space:nowrap; font-size:12.5px}
  /* linkul spre CV — evidențiat (trust-building), ca în original (hover-underline) */
  .cvlink{color:var(--fg); -webkit-tap-highlight-color:transparent;
    text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.6);
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color var(--dur-fast)}
  .cvlink:active{text-decoration-color:var(--accent-text)}

  .saudiv{display:flex; align-items:center; justify-content:center; margin:14px auto 0; position:relative}
  .saudiv::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--hairline) 30%,var(--hairline) 70%,transparent)}
  .saudiv span{position:relative; font-size:var(--t-xs); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
    background:var(--bg); padding:5px 14px; border:1px solid var(--hairline); border-radius:999px}

  /* Poarta 2 — cardul-cheie de conversie: inel gradient premium, titlu cu accent,
     iar siluetele stau pe o „colină" luminoasă la baza cardului (ecou al coperților) */
  .planintro{position:relative; overflow:hidden; margin:13px auto 0; text-align:center; background:var(--card-fill); border:1px solid transparent;
    border-radius:var(--r-xl); padding:18px 22px 17px; box-shadow:var(--sh-2),var(--inset-hi)}
  .planintro::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 78% at 50% 0%, rgba(124,92,252,.11), transparent 60%),
               radial-gradient(120% 60% at 50% 118%, rgba(0,194,255,.07), transparent 62%)}
  /* inel gradient pe contur (limbajul de brand: cta--border-gradient) */
  .planintro::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.55;
    background:linear-gradient(150deg, rgba(0,194,255,.5), rgba(124,92,252,.22) 42%, rgba(181,33,233,.45) 92%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .planintro .pi{position:relative; z-index:1}
  /* închidere elegantă la baza cardului: o linie-aurora subțire (fără elemente care fură spațiu) */
  .planintro .pi::after{content:""; display:block; height:3px; margin:16px auto 0; width:44%; border-radius:3px;
    background:linear-gradient(90deg, transparent, rgba(0,194,255,.5), rgba(181,33,233,.5), transparent); opacity:.65}
  .planintro .pi-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-text);
    background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:5px 13px 5px 10px; margin-bottom:10px}
  .planintro .pi-badge .ico{width:13px; height:13px}
  .planintro h2{font-size:20px; line-height:1.12; color:#fff; letter-spacing:-.028em}
  .planintro h2 .big{display:block; font-size:27px; margin-top:3px; padding-bottom:.06em;
    background:var(--grad); background-size:220% 100%; background-position:0% 0;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 4px 18px rgba(124,92,252,.35))}
  .planintro .nopdf{margin:9px auto 0; max-width:36ch; font-size:14px; line-height:1.5; color:var(--fg-2)}
  .planintro .nopdf b{color:#fff; font-weight:800}
  .planintro .btn{margin-top:14px; min-height:52px}
  .planintro .price-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:12px}
  .planintro .price{display:flex; align-items:baseline; gap:5px}
  .planintro .price b{font-size:29px; font-weight:850; letter-spacing:-.03em; color:#fff}
  .planintro .price span{font-size:13px; color:var(--fg-2)}
  .planintro .risk-chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.28); border-radius:999px; padding:5px 11px}
  .planintro .risk-chip .ico{width:12px; height:12px; stroke-width:2.6}

  /* ============ 2. PLANS ============ */
  /* Fără decalaj la aterizare: secțiunea începe EXACT în capul ecranului.
     Era `var(--hdr)` (60/66px), rezervat pentru bara de sus. Nu mai e nevoie:
     bara se ascunde singură la scroll în jos (`.topbar.hide`, home.js), adică
     exact în timpul săriturii spre secțiune — deci spațiul rezervat rămânea gol. */
  #program,#mail{scroll-margin-top:0}
  /* fold-perfect DOAR pe telefon: după tap pe „Începe cu obiectivul tău", secțiunea umple
     exact ecranul 2 — de la titlu până la baza cardului; pe ferestre late, curgere naturală */
  #program{padding:14px 0 16px}
  #program .shead{margin-bottom:8px}
  #program .goal-hint{margin-bottom:6px}
  @media (max-width:520px){
    #program .wrap{display:flex; flex-direction:column; justify-content:space-between;
      min-height:calc(100vh - var(--hdr) - 30px); min-height:calc(100svh - var(--hdr) - 30px)}
  }
  .goal-hint{display:flex; align-items:center; justify-content:center; font-size:var(--t-sm); font-weight:700; color:var(--accent-text); margin:0 auto var(--s4)}
  .ic{width:42px; height:42px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.25); color:var(--accent-text)}
  .ic .ico{width:21px; height:21px}

  .plan-cards{position:relative; margin-top:8px}
  .pcard{display:none; position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--card-solid); border:1px solid var(--card-bd); box-shadow:var(--sh-2),var(--inset-hi)}
  /* tranziție direcțională: cardul iese spre partea opusă și cel nou intră din direcția
     obiectivului ales (stânga/dreapta), cu un mic drift vertical — fluid, nu abrupt */
  .pcard.on{display:block; animation:cardInR .44s var(--ease-emph) both}
  .pcard.on.from-l{animation-name:cardInL}
  .pcard.out{animation:cardOutL .18s var(--ease-out) both}
  .pcard.out.to-r{animation-name:cardOutR}
  @keyframes cardInR{from{opacity:0; transform:translateX(30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardInL{from{opacity:0; transform:translateX(-30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardOutL{to{opacity:0; transform:translateX(-24px) scale(.99)}}
  @keyframes cardOutR{to{opacity:0; transform:translateX(24px) scale(.99)}}
  .pcard.slabit{--pc:0,144,255} .pcard.masa{--pc:255,81,56} .pcard.mentinere{--pc:151,92,240}
  .pcard.reco{border-color:rgba(var(--pc),.45); box-shadow:0 0 0 1px rgba(var(--pc),.26),0 0 38px -12px rgba(var(--pc),.5),var(--sh-3)}
  /* coperțile WIDE (landscape, ca în aplicația reală) — decupăm colțurile „coapte" în artwork
     printr-un container cu rază proprie (12px — mai mică decât a cardului: regula razelor imbricate) */
  .pcard .media{position:relative; padding:12px 12px 0;
    background:radial-gradient(130% 100% at 50% 0%, rgba(var(--pc),.14), transparent 74%)}
  /* pe telefon coperta e decupată ușor pe verticală (focus pe centru) ca toată
     secțiunea să încapă pe un ecran; pe ecrane late revine la proporția plină */
  .pcard .media .cov{border-radius:14px; overflow:hidden; aspect-ratio:880/560;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.55), 0 3px 12px rgba(0,0,0,.3)}
  .pcard .media .cov img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.075)}
  .pcard.on .media .cov img{animation:covZoom .55s var(--ease-emph) backwards}
  @keyframes covZoom{from{transform:scale(1.14)} to{transform:scale(1.075)}}
  .pcard .rib{position:absolute; top:24px; left:24px; z-index:3; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:#fff; background:var(--grad); border-radius:999px; padding:5px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(124,92,252,.35)}
  .pcard .body{padding:12px 18px 11px}
  .pcard .pdesc{font-size:var(--t-sm); line-height:1.5; color:var(--muted); max-width:34ch}
  .pcard ul{list-style:none; padding:0; margin:9px 0 0}
  .pcard li{display:flex; gap:11px; align-items:flex-start; font-size:var(--t-sm); line-height:1.5; color:var(--fg-2); padding:3px 0}
  .ckdisc{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(var(--ok-rgb),.14); display:flex; align-items:center; justify-content:center; margin-top:1px}
  .ckdisc .ico{width:12px; height:12px; stroke:var(--ok); stroke-width:2.4}
  .pcard .priceline{display:flex; align-items:baseline; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--hairline)}
  .pcard .priceline .big{font-size:30px; font-weight:850; letter-spacing:-.03em; color:#fff} .pcard .priceline .per{font-size:var(--t-xs); color:var(--muted)}
  .pcard .priceline .freecancel{margin-left:auto; align-self:center; font-size:var(--t-2xs); color:var(--ok-text); display:inline-flex; align-items:center; gap:5px}
  .pcard .body .btn{margin-top:10px}
  /* linkul către secțiunea de detalii — trăiește ÎN card, sub CTA (un singur CTA primar pe ecran) */
  .detwrap{text-align:center; margin-top:2px}
  .detlink{display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:9px 6px; font-size:var(--t-xs); color:var(--accent-text);
    border-bottom:1px solid rgba(var(--accent-rgb),.4); cursor:pointer; touch-action:manipulation; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; transition:transform var(--dur-fast) var(--ease-press)}
  .detlink .ico{width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out)}
  .detlink:active{transform:scale(.97)} .detlink:active .ico{transform:translateX(3px)}

  /* feature / step / benefit */
  .grid3{display:grid; grid-template-columns:1fr; gap:12px}
  .fcard{background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2),var(--inset-hi); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
  .fcard .ic{margin-bottom:12px}
  .fcard .h{font-size:var(--t-base); font-weight:800; color:#fff; line-height:var(--lh-h3)}
  .fcard .d{font-size:var(--t-sm); color:var(--muted); margin-top:6px; line-height:1.5; max-width:34ch}
  .fcard:active{transform:scale(.99)}
  @media (hover:hover){ .fcard:hover{transform:translateY(-2px); box-shadow:var(--sh-3),var(--inset-hi)} }
  .steps{display:grid; grid-template-columns:1fr; gap:0}
  .step{display:flex; gap:14px; align-items:flex-start; padding:14px 0}
  .step+.step{border-top:1px solid var(--hairline)}
  .step .n{flex-shrink:0; width:34px; height:34px; border-radius:var(--r-sm); background:rgba(var(--accent-rgb),.14); color:var(--accent-text); font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--inset-hi); font-variant-numeric:tabular-nums}
  .step .h{font-size:15px; font-weight:700; color:#fff} .step .d{font-size:var(--t-xs); color:var(--muted); margin-top:3px; line-height:1.5}
  .step .free-pill{margin-top:8px}

  /* ============ 3. FAQ ============ */
  .faq{max-width:var(--phone); margin:0 auto}
  .qi{border-bottom:1px solid var(--hairline); border-radius:var(--r-sm)}
  .qi.open{background:rgba(255,255,255,.018)}
  .qh{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; cursor:pointer; font:inherit; color:var(--fg);
    min-height:56px; padding:14px 12px 14px 14px; touch-action:manipulation; transition:background var(--dur-fast)}
  .qh:active{background:rgba(255,255,255,.03)}
  .qh .q{flex:1; font-size:var(--t-base); line-height:1.35; font-weight:700; letter-spacing:-.01em}
  .qh .pm{flex-shrink:0; width:28px; height:28px; border-radius:50%; background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.2);
    display:flex; align-items:center; justify-content:center; color:var(--accent-text); transition:transform var(--dur-base) var(--ease-press), background var(--dur-base)}
  .qh .pm .ico{width:14px; height:14px; stroke-width:2.2}
  .qi.open .qh .pm{transform:rotate(135deg); background:rgba(var(--accent-rgb),.18)}
  .qb{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-inout)}
  .qi.open .qb{grid-template-rows:1fr; transition:grid-template-rows 300ms var(--ease-emph)}
  .qb .in{overflow:hidden; min-height:0; font-size:var(--t-sm); line-height:1.6; color:var(--fg-body); max-width:36ch}
  .qb .in .pp{margin:0 12px 20px 14px; transform:translateY(-4px); opacity:0; transition:transform var(--dur-base) var(--ease-emph), opacity var(--dur-base) 40ms}
  .qi.open .qb .in .pp{transform:none; opacity:1}
  .qb .in b{color:var(--fg); font-weight:700}
  .faq-more{text-align:center; margin-top:18px; font-size:var(--t-xs); color:var(--muted)}
  .faq-more a{display:inline-flex; min-height:44px; align-items:center; gap:4px; padding:0 6px; color:var(--accent-text); font-weight:700}
  .faq-more a .ico{width:13px;height:13px}

  /* ============ 4. CALCULATOR ============ */
  .calc{background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-xl); padding:22px; box-shadow:var(--sh-2),var(--inset-hi)}
  .field{margin-bottom:14px}
  .field>label{font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:700; display:block; margin-bottom:6px}
  .field input{width:100%; min-height:52px; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-sm); padding:12px 14px; color:#fff; font:inherit; font-size:var(--t-base);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3); transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
  .field input::placeholder{color:var(--dim)}
  .field input[type=number]{font-variant-numeric:tabular-nums lining-nums}
  .field input:focus-visible{outline:none; border-color:rgba(var(--accent-rgb),.6); box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent-rgb),.18)}
  .frow{display:flex; gap:12px}
  .frow.stack{flex-direction:column; gap:0}
  .calc .btn{min-height:54px; margin-top:2px}
  .calc-res{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-base) var(--ease-emph), opacity var(--dur-base)}
  .calc-res>.inner{overflow:hidden; min-height:0}
  .calc-res.show{grid-template-rows:1fr; opacity:1; margin-top:18px}
  .calc-res .pad{text-align:center; padding-top:18px; border-top:1px solid var(--hairline)}
  .calc-res .kgwrap{filter:drop-shadow(0 0 30px rgba(124,92,252,.25))}
  .calc-res .kg{display:inline-block; font-size:64px; font-weight:850; line-height:1; letter-spacing:-.04em}
  .calc-res .kg.snap{animation:kgSnap 320ms var(--ease-press)}
  @keyframes kgSnap{from{transform:scale(.96)} to{transform:scale(1)}}
  .calc-res .ctx{font-size:var(--t-sm); color:var(--muted); margin:10px auto 18px; max-width:36ch; line-height:1.55} .calc-res .ctx b{color:var(--fg); font-weight:700}
  .calc-res .cta-wrap{opacity:0; transform:translateY(8px); transition:opacity var(--dur-base) var(--ease-out) .2s, transform var(--dur-base) var(--ease-out) .2s}
  .calc-res.show .cta-wrap{opacity:1; transform:none}

  /* ============ 5. WAITLIST ============ */
  .wait{text-align:center}
  .wait h2{font-size:var(--t-h2); line-height:var(--lh-snug); margin-top:10px}
  .wait .row{display:flex; flex-direction:column; gap:10px; margin-top:18px}
  .wait input[type=email]{min-height:52px; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-sm); padding:14px; color:#fff; font:inherit; font-size:var(--t-base);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3); transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
  .wait input[type=email]::placeholder{color:var(--dim)}
  .wait input[type=email]:focus-visible{outline:none; border-color:rgba(var(--accent-rgb),.6); box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent-rgb),.18)}
  .wait .btn.sent{background:var(--ok); box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 28px -6px rgba(var(--ok-rgb),.4),var(--inset-hi); animation:sentPop var(--dur-base) var(--ease-press)}
  @keyframes sentPop{from{transform:scale(.98)} to{transform:scale(1)}}
  .wait .btn .ck-pop{display:inline-flex; animation:ckPop 240ms var(--ease-press)}
  @keyframes ckPop{from{transform:scale(0)} to{transform:scale(1)}}
  .wait .row.bad input{border-color:#ff5470; box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(255,84,112,.12); animation:shake 360ms ease-out}
  @keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(2px)}100%{transform:translateX(0)}}
  .wait .consent{display:flex; gap:10px; align-items:flex-start; min-height:44px; margin-top:14px; padding:8px 0; font-size:var(--t-xs); line-height:1.45; color:var(--muted); text-align:left; cursor:pointer}
  /* bifa: desenată prin mask pe un strat alb → mereu perfect centrată și crisp,
     indiferent de border/subpixeli; mic „pop" la bifare */
  .wait .consent input{appearance:none; -webkit-appearance:none; width:21px; height:21px; border-radius:6px; border:1.5px solid var(--hairline-strong); background:var(--bg-elev);
    flex-shrink:0; margin-top:1px; cursor:pointer; position:relative; transition:background var(--dur-fast), border-color var(--dur-fast)}
  /* culoare solidă la bifare — gradientul complet, înghesuit în 21px, se citea ca două pete */
  .wait .consent input:checked{background:var(--accent); border-color:transparent}
  .wait .consent input:checked::after{content:""; position:absolute; inset:4px; background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:ckIn .2s var(--ease-press)}
  @keyframes ckIn{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
  .wait .consent a{color:var(--accent-text)}
  .wait .trust{margin-top:14px; font-size:var(--t-2xs); color:var(--dim); display:inline-flex; align-items:center; gap:6px}
  .wait .trust .ico{width:13px;height:13px}
  .wait .field-err{margin:8px auto 0; max-width:520px; font-size:var(--t-xs); line-height:1.4; color:var(--danger); font-weight:600}

  /* avatar circular cu text curbat rotitor + „scris de Andu Preda" */
  .nl-by{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:var(--s6)}
  .nl-by-txt{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted)}
  .nl-by-txt a{color:#fff; font-weight:800}
  .curved-text-image{position:relative; width:120px; height:120px; border-radius:50%}
  .curved-text-image img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
  .curved-text-image .text-svg{position:absolute; top:-15%; left:-15%; width:130%; height:130%; transform-origin:center; animation:curvedRotate 18s linear infinite}
  .curved-text-image .curved-text{text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.09em}
  @keyframes curvedRotate{from{transform:rotate(0)} to{transform:rotate(360deg)}}
  /* listă de beneficii (bifă verde în doi tonuri, ca în original) */
  .nl-adv{list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-direction:column; gap:14px; text-align:left}
  .nl-adv li{display:flex; align-items:flex-start; gap:11px; font-size:var(--t-sm); line-height:1.5; color:var(--fg-2)}
  .nl-adv svg{flex-shrink:0; width:20px; height:20px; margin-top:1px}
  @media (prefers-reduced-motion:reduce){ .curved-text-image .text-svg{animation:none} }

  /* ============ 6. TABS ============ */
  #detalii{scroll-margin-top:0} /* idem: ținta lui „Detalii program — ce primești?" */
  .det-tabs{margin:0 auto var(--s5)}
  .tabpanel{display:none}
  .tabpanel.on{display:block; animation:panelIn .38s var(--ease-emph) both}
  @keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .vs-price{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px}
  .vp{border-radius:var(--r-lg); padding:18px 12px; text-align:center; box-shadow:var(--sh-2),var(--inset-hi);
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0}
  .vp.us{background:var(--card-fill); border:1px solid rgba(var(--accent-rgb),.3); box-shadow:0 0 0 1px rgba(124,92,252,.12),var(--sh-2),var(--inset-hi)}
  .vp.them{background:var(--card-fill); border:1px solid var(--card-bd)}
  .vp .lbl{font-size:var(--t-2xs); color:var(--muted); font-weight:700}
  .vp .amt{font-size:24px; font-weight:850; letter-spacing:-.02em; color:#fff; margin:6px 0 2px}
  .vp.them .amt{color:var(--muted)}
  .vp .note{font-size:var(--t-2xs); color:var(--dim); line-height:1.4}
  .vp .save{margin-top:10px}
  .vs-table{width:100%; border-collapse:collapse; font-size:var(--t-xs); table-layout:fixed}
  .vs-table th,.vs-table td{padding:11px 8px; border-bottom:1px solid var(--hairline); text-align:left; vertical-align:middle}
  .vs-table col.feat{width:58%} .vs-table col.col{width:21%}
  .vs-table thead th{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800}
  .vs-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
  .vs-table td.feat{line-height:1.35; color:var(--fg-2)}
  .vs-table .uscol{text-align:center; background:rgba(124,92,252,.04)}
  .vs-table .themcol{text-align:center}
  .vs-table .uscol .ico{width:16px; height:16px; stroke:var(--ok); stroke-width:2.2}
  .vs-table .themcol .ico{width:15px; height:15px; stroke:var(--dim); stroke-width:2}
  .vs-table tbody tr{opacity:0; transform:translateX(-6px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
  .vs-table.lit tbody tr{opacity:1; transform:none}

  /* tot cardul e link către CV (trust-building) — apăsarea „respiră", chevron discret */
  .founder{display:flex; align-items:center; gap:14px; background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:16px 18px; margin:var(--s6) auto 0; box-shadow:var(--sh-2),var(--inset-hi);
    -webkit-tap-highlight-color:transparent; transition:transform var(--dur-fast) var(--ease-press), border-color var(--dur-base), opacity var(--dur-slow) var(--ease-emph)}
  .founder:active{transform:scale(.985); border-color:rgba(var(--accent-rgb),.35)}
  .founder .go{flex-shrink:0; margin-left:auto; width:17px; height:17px; color:var(--dim)}
  .founder .nm{font-size:15px; font-weight:850; color:#fff; line-height:1.25; display:flex; align-items:center; gap:6px}
  .founder .nm .vbadge{color:var(--accent-text)} .founder .nm .vbadge .ico{width:15px;height:15px}
  .founder .role{font-size:var(--t-2xs); color:var(--muted); margin-top:4px; line-height:1.4; max-width:34ch}
  .finalcta{position:relative; text-align:center; margin:var(--s6) auto 0; padding:30px 22px; border-radius:var(--r-xl);
    background:radial-gradient(120% 120% at 50% 0%, rgba(124,92,252,.2), rgba(13,17,23,.35)),radial-gradient(80% 70% at 0% 100%, rgba(0,194,255,.06), transparent 60%);
    border:1px solid rgba(var(--accent-rgb),.3); overflow:hidden; box-shadow:var(--sh-3),var(--inset-hi)}
  .finalcta h2{font-size:var(--t-h2); line-height:var(--lh-snug); font-weight:850; letter-spacing:-.035em}
  .finalcta p{margin:12px auto 22px; max-width:34ch}
  .finalcta .btn{min-height:56px}
  footer{padding:34px 0 calc(96px + env(safe-area-inset-bottom)); border-top:1px solid var(--hairline); margin-top:var(--s7); font-size:var(--t-xs); color:var(--muted); text-align:center}
  footer .ssl{font-size:var(--t-2xs); color:var(--dim); display:inline-flex; align-items:center; gap:6px; margin-top:6px} footer .ssl .ico{width:13px;height:13px}

  .scrollprog{position:fixed; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; z-index:80; opacity:.7; will-change:transform}
  .buybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(130%); opacity:0;
    transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
    background:rgba(13,17,23,.82); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 -8px 24px rgba(0,0,0,.4);
    padding:10px max(var(--gutter),env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
  .buybar .inner{display:flex; align-items:center; gap:12px; max-width:var(--phone); margin:0 auto}
  .buybar.show{transform:translateY(0); opacity:1}
  .buybar .px{font-size:var(--t-sm); font-weight:800; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4)} .buybar .px small{color:var(--muted); font-weight:600}
  .buybar .btn{flex:1; min-height:48px; padding:0 14px; font-size:15px}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
    .hero::before,.dot,.gt,.btn{animation:none !important}
    .scrollprog{display:none}
    .reveal{opacity:1; transform:none}
    .calc-res.show,.vs-table tbody tr{opacity:1}
    .qb .in .pp{opacity:1; transform:none}
  }

  /* ===================== PRODUCT SHOWCASE — mockup telefon (show-don't-tell) ===================== */
  .mk-stage{--prot:#36C5F0;--carb:#FFB23C;--fat:#F76C9B;--prep:#FF8A3C; position:relative; max-width:300px; margin:0 auto var(--s6)}
  .mk-stage *{box-sizing:border-box}
  .mk-i{display:inline-flex; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none}
  .mk-phone{position:relative; width:min(280px,86vw); margin:0 auto; border-radius:46px; background:#0A0C10; padding:11px; z-index:3;
    box-shadow:inset 0 0 0 1.5px #1c1f27, inset 0 0 0 2.5px #05070b, 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4), 0 34px 64px -22px rgba(0,0,0,.75)}
  .mk-phone::before{content:""; position:absolute; inset:-20px; z-index:-1; border-radius:56px; opacity:.6; filter:blur(28px);
    background:radial-gradient(58% 48% at 28% 12%, rgba(0,194,255,.24), transparent 60%), radial-gradient(58% 48% at 76% 30%, rgba(181,33,233,.26), transparent 62%)}
  .mk-island{position:absolute; top:19px; left:50%; transform:translateX(-50%); width:86px; height:25px; border-radius:13px; background:#000; z-index:6}
  .mk-pscreen{position:relative; border-radius:35px; overflow:hidden; aspect-ratio:278/600; background:#080B12; display:flex; flex-direction:column; color:var(--fg); font-family:var(--font-display)}
  .mk-pscreen::after{content:""; position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:35px; mix-blend-mode:screen;
    background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 22%, transparent 80%, rgba(255,255,255,.03))}
  .mk-pbody{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
  .mk-status{display:flex; align-items:center; justify-content:space-between; padding:8px 18px 2px; font:700 11px/1 var(--font-display); font-variant-numeric:tabular-nums; color:#E8E8F0}
  .mk-status .mk-sig{display:inline-flex; gap:5px; opacity:.9} .mk-status .mk-i{width:13px;height:11px}
  .mk-phdr{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 14px 8px; border-bottom:1px solid rgba(255,255,255,.05)}
  .mk-kick{font:800 8.5px/1 var(--font-display); letter-spacing:.12em}
  .mk-h1{font:800 16px/1.1 var(--font-display); color:#fff; margin-top:2px}
  .mk-sub{font:500 10px/1.2 'Inter',sans-serif; color:#8A8A9A; margin-top:2px}
  .mk-goal{display:inline-flex; align-items:center; gap:4px; font:700 10.5px/1 'Inter'; color:#cbb8ff; background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3); border-radius:999px; padding:5px 9px; white-space:nowrap}
  .mk-goal .mk-i{width:11px;height:11px}
  .mk-week{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:9px 12px 5px}
  .mk-d{position:relative; text-align:center; padding:5px 0 6px; border-radius:8px; border:1px solid transparent}
  .mk-d .wd{font:700 8px/1 'Inter'; color:#55556a} .mk-d .nm{font:800 13px/1 var(--font-display); color:#fff; margin-top:3px}
  .mk-d.off .nm{color:#3a3a45}
  .mk-d.sel{border-color:rgba(124,92,252,.65); background:rgba(124,92,252,.14)} .mk-d.sel .nm{color:#cbb8ff}
  .mk-d.prep::after{content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
  .mk-daylbl{padding:2px 14px 8px; font:800 12px/1 var(--font-display); color:#fff} .mk-daylbl span{font-weight:500; color:#8A8A9A; font-family:'Inter'}
  .mk-nutri{margin:0 13px; background:rgba(255,255,255,.02); border:1px solid rgba(124,92,252,.3); border-radius:14px; padding:13px 12px; display:flex; gap:11px; align-items:center}
  .mk-ring{position:relative; width:70px; height:70px; flex:none}
  .mk-ring svg{transform:rotate(-90deg)} .mk-ringc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
  .mk-ringc b{font:800 18px/1 var(--font-display); color:#fff; font-variant-numeric:tabular-nums} .mk-ringc span{font:500 8.5px/1 'Inter'; color:#8A8A9A; margin-top:2px}
  .mk-macros{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
  .mk-mac .mk-mrow{display:flex; justify-content:space-between; gap:6px; font-variant-numeric:tabular-nums}
  .mk-mac .l{font:500 10.5px/1.1 'Inter'; color:#8A8A9A; white-space:nowrap; letter-spacing:-.01em} .mk-mac .v{font:700 10.5px/1.1 'Inter'; color:#E8E8F0; white-space:nowrap; flex:none}
  .mk-bar{height:4px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:4px; overflow:hidden}
  .mk-bar i{display:block; height:100%; border-radius:3px}
  .mk-mac.sub{margin-left:13px; border-left:1px solid rgba(255,255,255,.1); padding-left:8px}
  .mk-mac.sub .l,.mk-mac.sub .v{font-size:9.5px} .mk-mac.sub .mk-bar{height:3px}
  .mk-coach{margin:11px 13px 0; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-left:3px solid var(--prep); border-radius:11px; padding:10px 12px}
  .mk-cnh{display:flex; align-items:center; gap:7px}
  .mk-av{width:24px;height:24px;border-radius:50%; background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); display:flex; align-items:center; justify-content:center; font:800 9px/1 var(--font-display); color:#fff; flex:none; overflow:hidden}
  .mk-av img{width:100%;height:100%;object-fit:cover}
  .mk-cnh b{font:800 10.5px/1 var(--font-display); color:#f3c39a; flex:1}
  .mk-cntag{font:800 8px/1 var(--font-display); letter-spacing:.05em; color:#ffb98a; background:rgba(255,138,60,.14); border-radius:5px; padding:3px 6px}
  .mk-coach p{margin:7px 0 0; font:400 11.5px/1.5 'Inter'; color:#d7d7e2}
  .mk-cnbtn{display:inline-flex; align-items:center; gap:5px; margin-top:9px; font:700 10px/1 'Inter'; color:#ffb98a; background:rgba(255,138,60,.13); border-radius:8px; padding:6px 10px} .mk-cnbtn .mk-i{width:11px;height:11px}
  .mk-seclbl{padding:12px 14px 5px; font:800 9px/1 var(--font-display); letter-spacing:.06em; color:#55556a}
  .mk-meal{display:flex; align-items:center; gap:9px; margin:0 13px 7px; padding:9px 10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:11px}
  .mk-chk{width:19px;height:19px;border-radius:50%; border:1.5px solid rgba(255,255,255,.16); flex:none; display:flex; align-items:center; justify-content:center}
  .mk-meal.done .mk-chk{background:var(--ok); border-color:transparent} .mk-meal.done .mk-chk .mk-i{width:11px;height:11px; stroke:#06281a; stroke-width:2.6}
  .mk-meal .mt{font:700 9px/1 'Inter'; letter-spacing:.04em; color:#8A8A9A; text-transform:uppercase} .mk-meal .mn{font:600 13.5px/1.25 'Inter'; color:#E8E8F0; margin-top:2px}
  .mk-meal.done .mn{color:#55556a; text-decoration:line-through} .mk-meal .mkcal{font:500 10px/1 'Inter'; color:#8A8A9A; margin-top:3px; font-variant-numeric:tabular-nums}
  .mk-meal .mbody{flex:1; min-width:0}
  .mk-prep{font:800 7.5px/1 var(--font-display); color:#ffb98a; background:rgba(255,138,60,.14); border-radius:4px; padding:2px 5px; margin-left:6px}
  .mk-tab{flex:none; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 6px 14px; background:rgba(13,17,23,.94); border-top:1px solid rgba(255,255,255,.06)}
  .mk-tab a{display:flex; flex-direction:column; align-items:center; gap:3px; font:600 9px/1 'Inter'; color:#5b5b68} .mk-tab a .mk-i{width:18px;height:18px}
  .mk-tab a.on{color:#cbb8ff}
  /* ecran mai înalt (20:9, ca telefoanele moderne) + ritm compact —
     cina („momentul VREAU") trebuie să fie complet vizibilă deasupra tab-bar-ului */
  .mk-pscreen{aspect-ratio:278/664}
  .mk-nutri{padding:10px 12px}
  .mk-ring{width:62px; height:62px}
  .mk-ring svg{width:62px; height:62px}
  .mk-ringc b{font-size:16px}
  .mk-week{padding:6px 12px 3px}
  .mk-phdr{padding:6px 14px 6px}
  .mk-status{padding:6px 18px 2px}
  .mk-seclbl{padding:9px 14px 4px}
  .mk-coach{padding:9px 12px}
  .mk-coach p{margin-top:6px}
  .mk-cnbtn{margin-top:7px}
  .mk-meal{padding:8px 10px; margin-bottom:6px}
  .mk-laptop{display:none}
  @media (prefers-reduced-motion:reduce){ .mk-stage *{animation:none !important} }

  /* ===================== VERSIUNEA DESKTOP =====================
     Mobile-first la bază (sub 720px = layoutul de telefon finalizat), apoi:
     ≥720px  — split-screen / jumătate de ecran: coloană mai lată, grile pe 2 coloane
     ≥760px  — cardul de plan trece pe 2 coloane (coperta wide stânga / oferta dreapta)
     ≥1100px — desktop plin: meniu inline în bară (stilul original), hero în 2 coloane
               cu „Sau" vertical și cardul-ofertă la dreapta, grile pe 3-4 coloane.
     ============================================================= */
  .topnav{display:none}
  .mk-points{display:none} /* bullet-urile showcase apar doar pe desktop (≥1100) */
  @media (min-width:720px){
    :root{--phone:640px}
    .shead{max-width:52ch}
    .lede{max-width:44ch}
    .hero .title{font-size:clamp(34px,5.2vw,46px)}
    .hero .sub{font-size:15.5px; max-width:46ch}
    .searchbar{max-width:560px; width:100%; margin-left:auto; margin-right:auto}
    .planintro{max-width:540px}
    .grid3{grid-template-columns:repeat(2,1fr); gap:14px}
    .step+.step{border-top:none}
    .steps{grid-template-columns:repeat(2,1fr); column-gap:32px}
    .steps .step:nth-child(n+3){border-top:1px solid var(--hairline)}
    .vs-price{max-width:640px; margin-left:auto; margin-right:auto}
    .det-tabs{max-width:460px}
    .qb .in{max-width:58ch}
    .frow.stack{flex-direction:row; gap:12px}
    /* newsletter: formular pe orizontală — pattern-ul clasic de desktop */
    .wait .row{flex-direction:row; gap:10px}
    .wait .row input[type=email]{flex:1; min-width:0}
    .wait .row .btn{width:auto; flex-shrink:0; padding:0 30px}
  }
  /* ===== hover-uri (orice dispozitiv cu pointer fin — desktopul trăiește din hover) ===== */
  @media (hover:hover){
    .cvlink:hover{text-decoration-color:var(--accent-text); color:#fff}
    .founder:hover{transform:translateY(-2px); border-color:rgba(var(--accent-rgb),.35)}
    .founder:hover .go{color:var(--accent-text); transform:translateX(3px)}
    .founder .go{transition:color var(--dur-fast), transform var(--dur-base) var(--ease-out)}
    .detlink:hover{color:#fff; border-bottom-color:var(--accent-text)}
    .detlink:hover .ico{transform:translateX(3px)}
    .qh:hover{background:rgba(255,255,255,.03)}
    .qh:hover .pm{background:rgba(var(--accent-rgb),.18)}
    .faq-more a:hover{color:#fff}
    .plan-switch .plan-trigger:not([data-active]):hover{opacity:.95; transform:scale(.96)}
    .navmenu .mi a:hover{color:var(--accent-text)}
    .navmenu .nav-cta:hover{color:#fff; background:rgba(var(--accent-rgb),.08)}
    .sb-go:hover{transform:scale(1.05)}
    .topnav .nav-auth:hover{background:rgba(var(--accent-rgb),.08)}
  }
  @media (min-width:760px){
    .pcard.on{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); align-items:stretch}
    .pcard .media{padding:14px 0 14px 14px; display:flex; align-items:center}
    .pcard .media .cov{width:100%; aspect-ratio:880/660}
    .pcard .body{display:flex; flex-direction:column; justify-content:center; padding:18px 22px}
    .pcard .pdesc{max-width:none}
  }
  @media (min-width:1100px){
    :root{--hdr:66px; --t-h2:30px; --t-h3:22px}
    .shead{max-width:64ch}
    /* topbar: meniul original inline (underline gradient la hover) + Autentificare border-gradient */
    .topbar{padding:10px clamp(24px,4vw,48px)}
    .burger,.navmenu{display:none}
    .topnav{display:flex; align-items:center; gap:clamp(22px,3vw,44px)}
    .topnav a{position:relative; font-size:15px; font-weight:600; color:var(--fg-2); padding:6px 2px;
      transition:color var(--dur-fast)}
    .topnav a:hover{color:#fff}
    .topnav a:not(.nav-auth)::before{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
      background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out)}
    .topnav a:not(.nav-auth):hover::before{transform:none}
    .topnav .nav-auth{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--fg);
      padding:10px 22px; border-radius:999px}
    .topnav .nav-auth::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad);
      -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
    .topnav .nav-auth svg{width:18px; height:18px}
    /* CTA-ul persistent de conversie (desktopul nu are buybar) — gradientul viu original */
    .topnav .nav-go{display:inline-flex; align-items:center; font-weight:800; font-size:15px; color:#fff;
      padding:11px 24px; border-radius:999px; background:var(--grad); background-size:150% 100%;
      animation:gradientShift 8s ease-in-out infinite;
      box-shadow:0 8px 22px -8px rgba(124,92,252,.55); transition:box-shadow var(--dur-base) var(--ease-out)}
    .topnav .nav-go:hover{color:#fff; box-shadow:0 10px 30px -8px rgba(124,92,252,.75)}
    /* scrollspy: itemul secțiunii curente primește textul-gradient + underline (limbajul original) */
    .topnav a[data-active]{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}
    .topnav a[data-active]::before{transform:none}

    /* HERO desktop: mesajul + poarta 1 la stânga, „Sau" devine hairline vertical,
       cardul-ofertă la dreapta — totul pe un singur ecran, atmosferă amplă */
    .hero{text-align:left; padding:0 0 26px}
    .hero::before{inset:-22% -12% 26%;
      background:radial-gradient(42% 56% at 20% 26%, rgba(0,194,255,.15), transparent 62%),
                 radial-gradient(46% 58% at 82% 22%, rgba(181,33,233,.17), transparent 64%)}
    .hero .wrap{max-width:1180px; display:grid; column-gap:30px;
      grid-template-columns:minmax(0,1fr) 58px minmax(0,436px);
      grid-template-rows:auto auto; grid-template-areas:"t sau card" "s sau card";
      align-content:center;
      min-height:calc(100vh - var(--hdr) - 26px); min-height:calc(100svh - var(--hdr) - 26px)}
    .hero .tblock{grid-area:t; align-self:end}
    .hero .searchbar{grid-area:s; align-self:start; margin:30px 0 0; max-width:560px}
    .hero .saudiv{grid-area:sau; align-self:stretch; margin:0; min-height:320px}
    .hero .saudiv::before{left:50%; right:auto; top:4%; bottom:4%; width:1px; height:auto;
      background:linear-gradient(180deg,transparent,var(--hairline) 30%,var(--hairline) 70%,transparent)}
    /* cardul-ofertă: halo de brand + lift la hover (obiectul cel mai prețios de pe ecran) */
    .hero .planintro{grid-area:card; align-self:center; margin:0; max-width:none; padding:22px 26px 20px;
      box-shadow:var(--sh-2),var(--inset-hi),0 44px 110px -46px rgba(124,92,252,.42);
      transition:transform .35s var(--ease-emph), box-shadow .35s var(--ease-out)}
    .hero .planintro:hover{transform:translateY(-4px);
      box-shadow:var(--sh-2),var(--inset-hi),0 54px 130px -46px rgba(124,92,252,.6)}
    .hero .title{font-size:56px; line-height:1.01}
    .hero .title .xwrap{margin:8px 0}
    .hero .title::after{left:38%; width:105%}
    .hero .sub{margin:16px 0 0; font-size:16.5px; max-width:44ch}
    .free-wrap{text-align:left}
    .hero .trained{justify-content:flex-start}
    .hero .planintro h2{font-size:21px} .hero .planintro h2 .big{font-size:30px}

    /* PLANS: secțiunea aterizează fold-perfect și pe desktop */
    #program{padding:26px 0 30px}
    #program .wrap{max-width:980px; display:flex; flex-direction:column; justify-content:center;
      min-height:calc(100vh - var(--hdr) - 56px); min-height:calc(100svh - var(--hdr) - 56px)}
    #program .shead{margin-bottom:14px}
    #program .goal-hint{margin-bottom:10px}
    .plan-switch{gap:12px}
    .plan-switch .plan-trigger-cnt{max-width:136px}
    .plan-cards{margin-top:14px}
    .pcard .media{padding:18px 0 18px 18px}
    .pcard .body{padding:24px 30px}
    /* coperta răspunde la hover — zoom lent, cinematic */
    .pcard .media .cov img{transition:transform 1.1s var(--ease-out)}
    .pcard:hover .media .cov img{transform:scale(1.12)}

    /* DETALII */
    #detalii .wrap{max-width:1020px}
    .grid3{grid-template-columns:repeat(3,1fr); gap:16px}
    .steps{grid-template-columns:repeat(4,1fr); column-gap:26px}
    .steps .step:nth-child(n+3){border-top:none}
    .steps .step{flex-direction:column; gap:12px; padding:6px 0}
    .steps .step+.step{border-left:1px solid var(--hairline); padding-left:26px}
    .vs-table{max-width:680px; margin-left:auto; margin-right:auto}

    /* DE CE / FINAL */
    #dece .wrap{max-width:1020px}
    .founder{max-width:660px}
    .finalcta{max-width:720px}

    /* SHOWCASE — textul la stânga, telefonul la dreapta */
    #showcase .wrap{max-width:940px; display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:center; column-gap:56px}
    #showcase .shead{text-align:left; margin:0; max-width:none}
    #showcase .shead .lede{margin-left:0; max-width:40ch}
    #showcase .mk-stage{margin:0}
    #showcase .mk-points{display:flex; flex-direction:column; gap:13px; margin:24px 0 0; padding:0; list-style:none}
    #showcase .mk-points li{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--fg-2)}

    /* MAIL — compoziție pe două coloane: mesaj + formular la stânga,
       Dr. Andu (cerc rotitor) + beneficiile la dreapta */
    #mail .wrap{max-width:1000px}
    .wait{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
      column-gap:72px; align-items:center; text-align:left}
    .wait .lede{margin-left:0}
    .wait h2{margin-top:8px}
    .nl-side .nl-by{margin-top:0}
    .nl-side .nl-adv{margin-top:var(--s5)}

    section{padding:64px 0}
    .buybar{display:none}
    footer{padding-bottom:44px}
  }

@keyframes riseEmph{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* ===== MOBIL-X (nutritie-mobil-x) — activ la <720px ===== */
@media (max-width:719.98px){
/* ============================================================
     MOBIL X — viziunea 10/10, libertate maximă peste baza aprobată:
     + placeholder viu (întrebările reale se scriu singure în search)
     + cardul de plan se schimbă prin GLISARE (gest nativ de mobil) + haptics
     + scroll-driven: inelul de kcal se umple & cina se bifează când treci de mockup
     + măturare de auroră peste hero la încărcare
     + buybar-ul preia obiectivul ales („Vreau Slăbit Rapid →")
     Fold-urile, conținutul și coregrafia aprobată rămân neatinse.
     ============================================================ */
  :root{
    --bg:#080B12; --bg-elev:#0F141C; --panel:#0D1117; --card-solid:#0E1119;
    --card-fill:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    --card-bd:rgba(255,255,255,0.07);
    --fg:#ECECF3; --fg-2:#D3D3DD; --fg-body:#C8C8D4; --muted:#9B9BAC; --dim:#84879E;
    --accent-text:#D4C5FF; --ok-text:#A6F0C6; --focus:#9D7CFF;
    --grad-a:#00C2FF; --grad-b:#B521E9; --grad:linear-gradient(90deg,#00C2FF,#B521E9);
    --accent:#7C5CFC; --accent-rgb:124,92,252; --ok:#01DB69; --ok-rgb:1,219,105; --danger:#FF6B81;
    /* ui-ux-pro-max §6 color-semantic: semantic aliases mapped onto brand scale */
    --primary:var(--accent); --surface:var(--card-solid); --on-surface:var(--fg); --on-surface-2:var(--muted); --success:var(--ok); --error:var(--danger);
    --font-display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --t-display:31px; --t-h2:25px; --t-h3:20px; --t-lg:18px; --t-base:16px; --t-sm:14.5px; --t-xs:13px; --t-2xs:11.5px;
    --lh-tight:1.05; --lh-snug:1.14; --lh-h3:1.25; --lh-base:1.55;
    --gutter:16px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms; --dur-xslow:640ms;
    --ease-out:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.4,0,.2,1);
    --ease-press:cubic-bezier(.34,1.4,.64,1); --ease-emph:cubic-bezier(.16,1,.3,1);
    --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.12);
    --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 8px 24px -8px rgba(0,0,0,.55); --sh-3:0 20px 50px -12px rgba(0,0,0,.65);
    --inset-hi:inset 0 1px 0 rgba(255,255,255,.06);
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --phone:460px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{margin:0; color:var(--fg);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:var(--t-base); line-height:var(--lh-base);
    font-synthesis:none; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    overscroll-behavior-y:contain; position:relative;
    background:
      radial-gradient(120% 56% at 88% -4%, rgba(181,33,233,.09), transparent 52%),
      radial-gradient(100% 52% at 3% 0%, rgba(0,194,255,.07), transparent 48%),
      radial-gradient(80% 50% at 50% 120%, rgba(124,92,252,.05), transparent 60%),
      var(--bg);
    overflow-x:hidden}
  body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04; background-size:140px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  a{color:inherit; text-decoration:none}
  img{max-width:100%}
  .wrap{position:relative; z-index:2; width:100%; max-width:var(--phone); margin:0 auto;
    padding:0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right))}
  section{padding:46px 0; position:relative}
  /* ui-ux-pro-max §6: font pairing — display heading (Sora) + body (Inter) */
  h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.028em; text-wrap:balance; font-feature-settings:'ss01' 1; font-optical-sizing:auto}
  .gt{font-family:var(--font-display)}
  /* a11y: skip-to-content link */
  .skip{position:absolute; left:8px; top:-48px; z-index:200; background:var(--accent); color:#fff; font-weight:700; padding:10px 16px; border-radius:10px; transition:top var(--dur-base) var(--ease-out)}
  .skip:focus{top:8px}
  h3{letter-spacing:-.02em}
  .num{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1}
  .gt{color:#C9B6FF; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:.06em}
  .kick{font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--muted)}
  .lede{font-size:var(--t-base); line-height:var(--lh-base); color:var(--muted); max-width:34ch; margin-left:auto; margin-right:auto; letter-spacing:-.005em}
  .lede b{color:var(--fg); font-weight:700}
  .shead{text-align:center; max-width:36ch; margin:0 auto var(--s6)}
  .shead h2{font-size:var(--t-h2); line-height:var(--lh-snug); margin:8px 0 0}
  .shead p{margin-top:10px}
  .sep{height:1px; border:0; width:100%; max-width:var(--phone); margin:0 auto;
    background:linear-gradient(90deg,transparent,var(--hairline) 28%,var(--hairline) 72%,transparent)}
  .ico{display:inline-flex; width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
  .sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}
  :focus:not(:focus-visible){outline:none}

  .free-pill{display:inline-flex; align-items:center; gap:7px; font-size:var(--t-2xs); font-weight:800; letter-spacing:.01em; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.3); border-radius:999px; padding:6px 13px}
  .dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(var(--ok-rgb),.45); animation:livePulse 2.2s ease-out infinite}
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),.45)}70%,100%{box-shadow:0 0 0 7px rgba(var(--ok-rgb),0)}}
  .av{background:var(--grad); border-radius:50%; padding:2px; display:inline-flex; flex-shrink:0}
  .av img{border-radius:50%; border:2px solid var(--bg); display:block; object-fit:cover}
  .av-sm img{width:28px; height:28px}
  .av-lg img{width:52px; height:52px; box-shadow:0 0 0 1px rgba(0,0,0,.4)}

  /* CTA — efectul ORIGINAL din repo (cta--background-gradient): gradientul de brand
     „respiră" lent stânga-dreapta; fără linii de highlight peste buton */
  .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font:inherit;
    font-weight:800; font-size:var(--t-base); border-radius:var(--r-md); padding:0 22px; min-height:52px; width:100%; color:#fff;
    background:var(--grad); background-size:150% 100%; animation:gradientShift 8s ease-in-out infinite;
    box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 28px -6px rgba(124,92,252,.45);
    touch-action:manipulation; overflow:hidden;
    transition:transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) var(--ease-out)}
  @keyframes gradientShift{0%{background-position:10% 50%} 50%{background-position:90% 50%} 100%{background-position:10% 50%}}
  .btn:active{transform:scale(.97)}
  .btn .two{display:flex; flex-direction:column; line-height:1.15}
  .btn .two small{font-size:var(--t-2xs); font-weight:600; opacity:.88}
  .btn-max{max-width:340px; margin-left:auto; margin-right:auto; display:flex}
  @media (hover:hover){ .btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.35),0 16px 40px -6px rgba(124,92,252,.55),var(--inset-hi)} }

  /* segmented control (radiogroup / tablist) */
  .seg{position:relative; display:flex; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-md); padding:4px; box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
  .seg .thumb{position:absolute; top:4px; left:0; width:0; height:calc(100% - 8px); border-radius:var(--r-sm); background:#1B2230;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.3); transform:translateX(0);
    transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); z-index:0}
  .seg button{position:relative; z-index:1; flex:1; min-height:48px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:var(--t-xs);
    line-height:1.1; color:var(--muted); background:none; border-radius:var(--r-sm); padding:6px 4px; touch-action:manipulation;
    transition:color var(--dur-base), transform var(--dur-fast) var(--ease-press)}
  .seg button.on{color:#fff}
  .seg button:active{transform:scale(.97)}

  /* ===== butoanele ORIGINALE de selecție (SVG-uri detaliate din repo, animate pe [data-active]:
     riglele glisează / ramurile cresc / lanțurile se rotesc — exact ca în original) ===== */
  .plan-switch{display:flex; justify-content:center; align-items:center; gap:7px}
  .plan-switch .plan-trigger-cnt{position:relative; flex:1; max-width:106px}
  .plan-switch .plan-trigger-cnt::before{content:""; position:absolute; inset:-2px; background:var(--grad); z-index:-1;
    filter:blur(9px); opacity:0; transform:scale(.4); transition:opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
    border-radius:48px; will-change:transform}
  .plan-switch .plan-trigger-cnt:has(.plan-trigger[data-active])::before{transform:none; opacity:.5}
  .plan-switch .plan-trigger{display:block; width:100%; padding:0; margin:0; font:inherit; cursor:pointer; touch-action:manipulation;
    transition:500ms; border-radius:48px; border:1px solid transparent; transform:scale(.9); opacity:.75; overflow:hidden;
    background:transparent; -webkit-tap-highlight-color:transparent}
  .plan-switch .plan-trigger *{transition:750ms}
  .plan-switch .plan-trigger[data-active]{transform:scale(1.05); opacity:1}
  .plan-switch .plan-trigger svg{width:100%; display:block; position:relative}
  .plan-switch .plan-trigger svg .text{transform:scale(1.05) translate(-0.3rem,-0.2rem)}
  /* 1 — Slăbit Rapid (albastru) */
  .plan-switch .plan-trigger[data-id="1"]{background:#b6dafd}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]){background:#1b1f42; border-color:#0077f4}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) svg .text *{fill:#557fbf; stroke:#557fbf}
  .plan-switch .plan-trigger[data-id="1"] .ruler-1,.plan-switch .plan-trigger[data-id="1"] .ruler-2{will-change:transform,opacity}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-1{transform:translateY(-100%); opacity:0}
  .plan-switch .plan-trigger[data-id="1"]:not([data-active]) .ruler-2{transform:translateY(100%); opacity:0}
  /* 2 — Menținere Echilibrată (mov) */
  .plan-switch .plan-trigger[data-id="2"]{background:#d4abf9}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]){background:#3c2e46; border-color:#994fe1}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .text *{fill:#795b87}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-1{will-change:transform,opacity; transform-origin:bottom left}
  .plan-switch .plan-trigger[data-id="2"] svg .branch-2{will-change:transform,opacity; transform-origin:top}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-1{transform:translate(100%,200%) rotate(-60deg); opacity:0}
  .plan-switch .plan-trigger[data-id="2"]:not([data-active]) svg .branch-2{transform:translateX(-20px) rotate(-45deg); opacity:0}
  /* 3 — Masă Musculară (roșu) */
  .plan-switch .plan-trigger[data-id="3"]{background:#fe898e}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]){background:#492729; border-color:#cc001b}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .text *{fill:#985256; stroke:#985256}
  .plan-switch .plan-trigger[data-id="3"] svg .chain-big,.plan-switch .plan-trigger[data-id="3"] svg .chain-small{will-change:transform,opacity; transform-origin:center}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-big{opacity:0; transform:rotate(90deg) scale(1.5)}
  .plan-switch .plan-trigger[data-id="3"]:not([data-active]) svg .chain-small{opacity:0; transform:rotate(-90deg) scale(1.5)}

  .reveal{opacity:0; transform:translateY(18px) scale(.99); transition:opacity .55s var(--ease-emph), transform .6s var(--ease-emph)}
  .reveal.in{opacity:1; transform:none}

  /* ============ 0. HEADER — EXACT ca în repo-ul original (top-bar + hamburger--3 + menu),
     cu tema noastră: transparent la start; la scroll fundal solid + border 1px pe contur ============ */
  .topbar{position:sticky; top:0; z-index:70; display:flex; align-items:center; justify-content:space-between;
    padding:7px max(var(--gutter),env(safe-area-inset-left)) 7px max(var(--gutter),env(safe-area-inset-right));
    background:transparent; border:1px solid transparent;
    transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out)}
  .topbar.stuck{background:var(--bg); border-color:var(--hairline)}
  .topbar.hide{transform:translateY(-100%)}
  .brand{display:inline-flex; align-items:center; height:44px; -webkit-tap-highlight-color:transparent}
  .brand-logo{height:37px; width:auto; display:block}
  /* hamburger--3 din original: DOUĂ linii; la activare tot butonul se rotește 180°,
     iar liniile formează X-ul (linia 2 urcă peste linia 1) */
  .burger{position:relative; z-index:2; width:44px; height:44px; border:none; background:none; cursor:pointer;
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; margin-right:-8px;
    -webkit-tap-highlight-color:transparent; color:var(--fg); transition:transform .5s var(--ease-emph)}
  .burger span{display:block; width:30px; height:2px; background:currentColor; transform-origin:center center;
    transition:transform .5s var(--ease-emph)}
  .burger span + span{margin-top:5px}
  .burger span:nth-child(3){display:none}
  .burger[aria-expanded="true"]{transform:rotate(180deg)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){transform:translate3d(0,-7px,0) rotate(-45deg)}
  /* meniul original: overlay cu fundal solid (::after) + văl de gradient 25% (::before),
     itemii încep sub bară (nu centrați pe verticală) și intră prin mască, de jos */
  .navmenu{position:fixed; inset:0; z-index:65; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:18px;
    padding:calc(2*var(--hdr)) 24px calc(24px + env(safe-area-inset-bottom));
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .38s var(--ease-out), visibility 0s linear .38s}
  .navmenu::after{content:""; position:absolute; inset:0; background:var(--bg); z-index:1}
  /* vălul de gradient „înflorește" ușor DUPĂ fundal — dă adâncime deschiderii */
  .navmenu::before{content:""; position:absolute; inset:0; background:var(--grad); opacity:0; z-index:2;
    transition:opacity .55s var(--ease-out)}
  .navmenu.open::before{opacity:.25; transition-delay:.08s}
  .navmenu>*{position:relative; z-index:3}
  .navmenu.open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .35s var(--ease-out)}
  /* itemii intră prin mască, de jos, în cascadă (60ms între ei) — fluid, fără salturi */
  .navmenu .mi{overflow:hidden}
  .navmenu .mi a{display:block; font-family:var(--font-display); font-weight:700; font-size:18.5px; letter-spacing:-.01em;
    color:var(--fg); padding:4px 10px; text-align:center; will-change:transform;
    transform:translateY(110%); opacity:0;
    transition:transform .6s var(--ease-emph), opacity .4s var(--ease-out)}
  .navmenu.open .mi a{transform:none; opacity:1}
  .navmenu.open .mi:nth-child(1) a{transition-delay:.05s}
  .navmenu.open .mi:nth-child(2) a{transition-delay:.11s}
  .navmenu.open .mi:nth-child(3) a{transition-delay:.17s}
  /* la închidere: totul se retrage rapid, fără stagger */
  .navmenu:not(.open) .mi a{transition:transform .18s var(--ease-out), opacity .15s var(--ease-out)}
  .navmenu .mi a:active{color:var(--accent-text)}
  /* Autentificare = cta--border-gradient din original: pastilă cu inel gradient + iconiță persoană;
     intră ultima, cu o ridicare blândă */
  .navmenu .nav-cta{position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:14px;
    font-weight:700; font-size:16px; color:var(--fg); padding:14px 28px; border-radius:999px;
    opacity:0; transform:translateY(14px);
    transition:transform .55s var(--ease-emph), opacity .4s var(--ease-out)}
  .navmenu.open .nav-cta{opacity:1; transform:none; transition-delay:.24s}
  .navmenu:not(.open) .nav-cta{transition:transform .18s var(--ease-out), opacity .15s var(--ease-out)}
  .navmenu .nav-cta::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .navmenu .nav-cta svg{width:19px; height:19px}
  body.menu-open{overflow:hidden}
  @media (prefers-reduced-motion:reduce){ .navmenu .mi a,.navmenu .nav-cta,.navmenu::before{transition:none} }

  /* ============ 1. HERO (compact fold) ============ */
  :root{--hdr:60px}
  .hero{padding:10px 0 14px; text-align:center; position:relative; overflow:hidden}
  /* fold-perfect DOAR pe telefon: ecranul 1 se închide EXACT cu CTA-ul cardului — spațiul liber
     se distribuie elegant între blocuri (titlu / poarta 1 / sau / poarta 2).
     Pe ferestre late (desktop) rămâne curgerea naturală, compactă. */
  @media (max-width:520px){
    .hero .wrap{display:flex; flex-direction:column; justify-content:space-between;
      min-height:calc(100vh - var(--hdr) - 24px); min-height:calc(100svh - var(--hdr) - 24px)}
    .hero .tblock,.hero .searchbar,.hero .saudiv,.hero .planintro{flex:none}
  }
  .hero::before{content:""; position:absolute; inset:-12% -22% 42%; z-index:0; pointer-events:none;
    background:radial-gradient(50% 60% at 28% 18%, rgba(0,194,255,.15), transparent 60%),
               radial-gradient(54% 60% at 78% 12%, rgba(181,33,233,.17), transparent 62%);
    animation:heroDrift 17s ease-in-out infinite alternate}
  @keyframes heroDrift{from{transform:translate3d(-8px,0,0) scale(1)} to{transform:translate3d(8px,6px,0) scale(1.04)}}
  .hero .wrap{position:relative; z-index:2}
  .hero .title{font-size:clamp(26px,8.9vw,38px); line-height:1.02; letter-spacing:-.04em; font-weight:850; margin-top:2px; position:relative; z-index:2}
  .hero .title .ln{display:block; will-change:transform,opacity}
  .hero .title .ln1{color:#fff}
  /* X = "scânteia" gradient dintre cele două concepte */
  .hero .title .xwrap{display:flex; align-items:center; justify-content:center; width:.58em; height:.58em; margin:3px auto; position:relative; will-change:transform,opacity}
  .hero .title .xwrap::before{content:""; position:absolute; inset:-48%; border-radius:50%; z-index:-1; opacity:0;
    background:radial-gradient(circle, rgba(124,92,252,.62), rgba(0,194,255,.28) 46%, transparent 72%); filter:blur(7px)}
  .hero .title .x{width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 5px rgba(0,194,255,.5))}
  .hero .title .gt{background-size:220% 100%; background-position:100% 0}

  /* ============ COREGRAFIE HERO — o singură poveste, ritm constant (~150ms între intrări),
     toată mișcarea din aceeași familie (urcă ușor + se așază cu emphasized-decelerate):
     t=0    „Nutriție" (ancora)
     t=.18  scânteia X pop → spin 0→45→0 (crisp, fără pauze moarte)
     t=.32  „Inteligență Artificială" urcă, gradientul începe să curgă
     t=.55  promisiunea (subtitlul) urcă „din" bară
     t=.72  pastila „Gratuit" → t=.84 bara de search → aura clipește la aterizare
     t=1.02 dovada: „Antrenat de Dr. Andu Preda" coboară din bară
     t=1.22 „Sau" (alegerea) → t=1.42 Poarta 2: cardul se ridică, titlul lui se aprinde.
     Povestea se închide în ~2.1s. Mișcare, nu loading. ============ */
  .hero.play .title .ln1{animation:heroRise .6s var(--ease-emph) 0s both}
  .hero.play .title .xwrap{animation:xIn .5s var(--ease-press) .18s both}
  .hero.play .title .x{animation:xSpin 1s var(--ease-inout) .5s both, xBreathe 5.6s ease-in-out 3s infinite}
  .hero.play .title .ln2{animation:heroRise .6s var(--ease-emph) .32s both, gradFlow 9s linear 1.4s infinite}
  @keyframes heroRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
  @keyframes xIn{0%{opacity:0; transform:scale(.3)} 62%{opacity:1; transform:scale(1.14)} 100%{opacity:1; transform:scale(1)}}
  @keyframes xSpin{0%{transform:rotate(0)} 42%{transform:rotate(45deg)} 58%{transform:rotate(45deg)} 100%{transform:rotate(0)}}
  @keyframes xBreathe{0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(9deg) scale(1.07)}}
  @keyframes gradFlow{0%{background-position:100% 0} 50%{background-position:0 0} 100%{background-position:100% 0}}
  /* subtitlul urcă din bară / „Antrenat de..." coboară din bară (mecanica adds-text) */
  .hero.play .sub{animation:emergeUp .55s var(--ease-emph) .55s both}
  .hero.play .free-wrap{animation:heroRise .45s var(--ease-emph) .72s both}
  .hero.play .sb-field{animation:heroRise .55s var(--ease-emph) .84s both}
  .hero.play .trained{animation:emergeDown .55s var(--ease-emph) 1.02s both}
  @keyframes emergeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  @keyframes emergeDown{from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:none}}
  /* aura barei clipește exact când bara aterizează, apoi respiră — mereu, indiferent de focus
     (strălucirea de focus e strat separat pe ::after, deci nimic nu se restartează la blur) */
  /* 1.39s, nu 1.3s: bara aterizează la .84s + .55s = 1.39s. Comentariul de mai sus
     spune „clipește exact când bara aterizează", dar 1.3s o pornea cu 90ms MAI DEVREME
     — adică fix peste ultimele cadre ale animației de opacitate a barei. Acolo se năștea
     stratul filtrat, în interiorul unui strămoș încă semi-transparent, și de acolo venea
     chenarul negru. Acum aura pleacă după ce bara s-a așezat, cum era intenția. */
  .hero.play .sb-pill::before{animation:auraFlash .9s var(--ease-out) 1.39s both, auraBreathe 4.6s ease-in-out 3s infinite}
  @keyframes auraFlash{0%{opacity:.1} 45%{opacity:.5} 100%{opacity:.18}}
  @keyframes auraBreathe{0%,100%{opacity:.16} 50%{opacity:.3}}
  /* „Sau" apare + clipește scurt */
  .hero.play .saudiv{animation:heroRise .45s var(--ease-emph) 1.22s both}
  .hero.play .saudiv span{animation:sauFlash 1s var(--ease-out) 1.5s both}
  @keyframes sauFlash{0%,100%{border-color:var(--hairline); color:var(--dim)} 45%{border-color:rgba(var(--accent-rgb),.6); color:var(--accent-text)}}
  /* Poarta 2 — cardul se ridică DUPĂ „Sau" (ordine logică garantată, nu lăsată pe seama
     observer-ului), apoi titlul lui se aprinde scurt */
  .hero.play .planintro{animation:cardRise .7s var(--ease-emph) 1.42s both}
  /* titlul cardului: o singură trecere de lumină prin gradientul textului, în timp ce cardul
     aterizează — fără animație de filtru (drop-shadow animat pe text decupat poate
     rasteriza ca o dungă sub cuvânt); glow-ul static rămâne neschimbat */
  .hero.play .planintro h2 .big{animation:bigShine 1.5s var(--ease-out) 1.9s both}
  @keyframes cardRise{from{opacity:0; transform:translateY(26px) scale(.977)} to{opacity:1; transform:none}}
  @keyframes bigShine{from{background-position:120% 0} to{background-position:0% 0}}
  /* plasă de siguranță — dacă motorul nu avansează animațiile, tot hero-ul rămâne vizibil */
  .hero.shown .title .ln,.hero.shown .title .xwrap,.hero.shown .title .x,
  .hero.shown .sub,.hero.shown .free-wrap,.hero.shown .sb-field,.hero.shown .trained,
  .hero.shown .saudiv,.hero.shown .planintro,.hero.shown .planintro h2 .big{
    opacity:1 !important; transform:none !important; animation:none !important}
  /* pop: glow sub textul „AI" */
  .hero .title .ln2{filter:drop-shadow(0 4px 22px rgba(124,92,252,.34))}
  /* aură focalizată în spatele titlului, care „respiră" (peste orbii din hero::before) */
  .hero .title::after{content:""; position:absolute; z-index:-1; left:50%; top:44%; width:118%; height:150%; transform:translate(-50%,-50%);
    background:radial-gradient(46% 42% at 50% 40%, rgba(124,92,252,.20), transparent 70%); filter:blur(14px); pointer-events:none}
  .hero.play .title::after{animation:titleAura 6.5s ease-in-out 1.6s infinite}
  @keyframes titleAura{0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.06)}}
  .hero .sub{margin:10px auto 0; max-width:42ch; font-size:14.5px}
  .searchbar{margin:14px auto 0}
  .free-wrap{text-align:center; margin-bottom:7px}
  .sb-pill{position:relative; display:flex; align-items:center; background:var(--panel); border:1px solid var(--card-bd);
    border-radius:999px; padding:6px 6px 6px 18px; z-index:1; min-height:52px; box-shadow:var(--inset-hi),var(--sh-1);
    transition:border-color var(--dur-base) var(--ease-out)}
  /* două straturi de aură: ::before = ambientul animat (nu depinde de focus, deci nu se
     restartează la blur); ::after = strălucirea de focus, cu tranziție lină în ambele sensuri */
  /* `will-change` + `backface-visibility` NU sunt cosmetice: forțează stratul de
     compoziție al aurei să existe de la prima cadră. Fără ele, `filter:blur()` își
     cere un strat propriu abia când pornește `auraFlash` — iar stratul se năștea
     ÎN TIMP CE strămoșul `.sb-field` încă își anima opacitatea, deci în interiorul
     unui tampon intermediar. Pe Android, textura filtrului e alocată opac o cadră
     sau două înainte să primească conținut: exact chenarul negru de 2px văzut peste
     marginea barei de căutare (`inset:-2px` = fix zona aceea).
     Costul e zero: `auraBreathe` rulează la infinit, deci stratul e oricum permanent. */
  .sb-pill::before{content:""; position:absolute; inset:-2px; border-radius:999px; background:var(--grad); filter:blur(12px); opacity:.16; z-index:-1;
    will-change:opacity; backface-visibility:hidden}
  .sb-pill::after{content:""; position:absolute; inset:-2px; border-radius:999px; background:var(--grad); filter:blur(12px); opacity:0; z-index:-1; transition:opacity var(--dur-base) var(--ease-out)}
  .sb-pill:focus-within{border-color:rgba(var(--accent-rgb),.4)}
  .sb-pill:focus-within::after{opacity:.3}
  .sb-pill input{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--fg); font:inherit; font-size:var(--t-base); padding:10px 6px}
  .sb-pill input::placeholder{color:var(--dim)}
  .sb-go{flex-shrink:0; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:var(--grad); color:#fff;
    display:flex; align-items:center; justify-content:center; touch-action:manipulation; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.3);
    transition:transform var(--dur-fast) var(--ease-press)}
  .sb-go .ico{width:20px; height:20px; stroke-width:2}
  .sb-go:active{transform:scale(.92)}
  /* sugestiile apar ca dropdown DOAR la focus pe search (ca în platformă) — eliberează hero-ul */
  .sb-field{position:relative; z-index:6}
  .sb-sugs{position:absolute; left:0; right:0; top:calc(100% + 9px); z-index:30; text-align:left; padding:6px;
    background:var(--panel); border:1px solid var(--card-bd); border-radius:var(--r-lg); box-shadow:var(--sh-2),var(--inset-hi);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px) scale(.985); transform-origin:top center;
    transition:opacity .2s var(--ease-out), transform .26s var(--ease-emph), visibility 0s .26s}
  .sb-field.open .sb-sugs{opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .22s var(--ease-out), transform .3s var(--ease-emph)}
  .sug-h{font-size:var(--t-2xs); font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding:6px 12px 5px}
  .sug{display:flex; align-items:center; gap:11px; width:100%; text-align:left; min-height:46px; background:none; border:none;
    border-radius:12px; padding:0 12px; font-size:var(--t-sm); line-height:1.25; color:var(--fg-body); cursor:pointer; touch-action:manipulation;
    transition:background var(--dur-fast)}
  .sug .sq{flex:0 0 auto; width:15px; height:15px; color:var(--dim); stroke-width:2; opacity:.85}
  .sug span{flex:1; min-width:0}
  .sug:hover,.sug:focus-visible{background:rgba(255,255,255,.05); outline:none}
  .sug:hover .sq,.sug:focus-visible .sq{color:var(--accent-text); opacity:1}
  .sug:active{background:rgba(var(--accent-rgb),.12)}
  /* UN singur rând, ca în original: avatar + „Antrenat de Dr. Andu Preda · Nutriționist & Cercetător 🇬🇧";
     un mic fitter JS (ca la titlu) coboară fontul fin dacă nu încape pe ecrane înguste */
  .trained{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; color:var(--muted); line-height:1.3}
  .trained b{color:var(--fg); font-weight:700}
  .trained .av-sm img{width:24px; height:24px}
  .trained .tr-line{white-space:nowrap; font-size:12.5px}
  /* linkul spre CV — evidențiat (trust-building), ca în original (hover-underline) */
  .cvlink{color:var(--fg); -webkit-tap-highlight-color:transparent;
    text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.6);
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color var(--dur-fast)}
  .cvlink:active{text-decoration-color:var(--accent-text)}

  .saudiv{display:flex; align-items:center; justify-content:center; margin:14px auto 0; position:relative}
  .saudiv::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:linear-gradient(90deg,transparent,var(--hairline) 30%,var(--hairline) 70%,transparent)}
  .saudiv span{position:relative; font-size:var(--t-xs); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
    background:var(--bg); padding:5px 14px; border:1px solid var(--hairline); border-radius:999px}

  /* Poarta 2 — cardul-cheie de conversie: inel gradient premium, titlu cu accent,
     iar siluetele stau pe o „colină" luminoasă la baza cardului (ecou al coperților) */
  .planintro{position:relative; overflow:hidden; margin:13px auto 0; text-align:center; background:var(--card-fill); border:1px solid transparent;
    border-radius:var(--r-xl); padding:18px 22px 17px; box-shadow:var(--sh-2),var(--inset-hi)}
  .planintro::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 78% at 50% 0%, rgba(124,92,252,.11), transparent 60%),
               radial-gradient(120% 60% at 50% 118%, rgba(0,194,255,.07), transparent 62%)}
  /* inel gradient pe contur (limbajul de brand: cta--border-gradient) */
  .planintro::after{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.55;
    background:linear-gradient(150deg, rgba(0,194,255,.5), rgba(124,92,252,.22) 42%, rgba(181,33,233,.45) 92%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .planintro .pi{position:relative; z-index:1}
  /* închidere elegantă la baza cardului: o linie-aurora subțire (fără elemente care fură spațiu) */
  .planintro .pi::after{content:""; display:block; height:3px; margin:16px auto 0; width:44%; border-radius:3px;
    background:linear-gradient(90deg, transparent, rgba(0,194,255,.5), rgba(181,33,233,.5), transparent); opacity:.65}
  .planintro .pi-badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-text);
    background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:5px 13px 5px 10px; margin-bottom:10px}
  .planintro .pi-badge .ico{width:13px; height:13px}
  .planintro h2{font-size:20px; line-height:1.12; color:#fff; letter-spacing:-.028em}
  .planintro h2 .big{display:block; font-size:27px; margin-top:3px; padding-bottom:.06em;
    background:var(--grad); background-size:220% 100%; background-position:0% 0;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 4px 18px rgba(124,92,252,.35))}
  .planintro .nopdf{margin:9px auto 0; max-width:36ch; font-size:14px; line-height:1.5; color:var(--fg-2)}
  .planintro .nopdf b{color:#fff; font-weight:800}
  .planintro .btn{margin-top:14px; min-height:52px}
  .planintro .price-row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:12px}
  .planintro .price{display:flex; align-items:baseline; gap:5px}
  .planintro .price b{font-size:29px; font-weight:850; letter-spacing:-.03em; color:#fff}
  .planintro .price span{font-size:13px; color:var(--fg-2)}
  .planintro .risk-chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.28); border-radius:999px; padding:5px 11px}
  .planintro .risk-chip .ico{width:12px; height:12px; stroke-width:2.6}

  /* ============ 2. PLANS ============ */
  /* Fără decalaj la aterizare: secțiunea începe EXACT în capul ecranului.
     Era `var(--hdr)` (60/66px), rezervat pentru bara de sus. Nu mai e nevoie:
     bara se ascunde singură la scroll în jos (`.topbar.hide`, home.js), adică
     exact în timpul săriturii spre secțiune — deci spațiul rezervat rămânea gol. */
  #program,#mail{scroll-margin-top:0}
  /* fold-perfect DOAR pe telefon: după tap pe „Începe cu obiectivul tău", secțiunea umple
     exact ecranul 2 — de la titlu până la baza cardului; pe ferestre late, curgere naturală */
  #program{padding:14px 0 16px}
  #program .shead{margin-bottom:8px}
  #program .goal-hint{margin-bottom:6px}
  @media (max-width:520px){
    #program .wrap{display:flex; flex-direction:column; justify-content:space-between;
      min-height:calc(100vh - var(--hdr) - 30px); min-height:calc(100svh - var(--hdr) - 30px)}
  }
  .goal-hint{display:flex; align-items:center; justify-content:center; font-size:var(--t-sm); font-weight:700; color:var(--accent-text); margin:0 auto var(--s4)}
  .ic{width:42px; height:42px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.25); color:var(--accent-text)}
  .ic .ico{width:21px; height:21px}

  .plan-cards{position:relative; margin-top:8px}
  .pcard{display:none; position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--card-solid); border:1px solid var(--card-bd); box-shadow:var(--sh-2),var(--inset-hi)}
  /* tranziție direcțională: cardul iese spre partea opusă și cel nou intră din direcția
     obiectivului ales (stânga/dreapta), cu un mic drift vertical — fluid, nu abrupt */
  .pcard.on{display:block; animation:cardInR .44s var(--ease-emph) both}
  .pcard.on.from-l{animation-name:cardInL}
  .pcard.out{animation:cardOutL .18s var(--ease-out) both}
  .pcard.out.to-r{animation-name:cardOutR}
  @keyframes cardInR{from{opacity:0; transform:translateX(30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardInL{from{opacity:0; transform:translateX(-30px) translateY(4px) scale(.985)} to{opacity:1; transform:none}}
  @keyframes cardOutL{to{opacity:0; transform:translateX(-24px) scale(.99)}}
  @keyframes cardOutR{to{opacity:0; transform:translateX(24px) scale(.99)}}
  .pcard.slabit{--pc:0,144,255} .pcard.masa{--pc:255,81,56} .pcard.mentinere{--pc:151,92,240}
  .pcard.reco{border-color:rgba(var(--pc),.45); box-shadow:0 0 0 1px rgba(var(--pc),.26),0 0 38px -12px rgba(var(--pc),.5),var(--sh-3)}
  /* coperțile WIDE (landscape, ca în aplicația reală) — decupăm colțurile „coapte" în artwork
     printr-un container cu rază proprie (12px — mai mică decât a cardului: regula razelor imbricate) */
  .pcard .media{position:relative; padding:12px 12px 0;
    background:radial-gradient(130% 100% at 50% 0%, rgba(var(--pc),.14), transparent 74%)}
  /* pe telefon coperta e decupată ușor pe verticală (focus pe centru) ca toată
     secțiunea să încapă pe un ecran; pe ecrane late revine la proporția plină */
  .pcard .media .cov{border-radius:14px; overflow:hidden; aspect-ratio:880/560;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.55), 0 3px 12px rgba(0,0,0,.3)}
  .pcard .media .cov img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.075)}
  .pcard.on .media .cov img{animation:covZoom .55s var(--ease-emph) both}
  @keyframes covZoom{from{transform:scale(1.14)} to{transform:scale(1.075)}}
  .pcard .rib{position:absolute; top:24px; left:24px; z-index:3; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
    color:#fff; background:var(--grad); border-radius:999px; padding:5px 12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 14px rgba(124,92,252,.35)}
  .pcard .body{padding:12px 18px 11px}
  .pcard .pdesc{font-size:var(--t-sm); line-height:1.5; color:var(--muted); max-width:34ch}
  .pcard ul{list-style:none; padding:0; margin:9px 0 0}
  .pcard li{display:flex; gap:11px; align-items:flex-start; font-size:var(--t-sm); line-height:1.5; color:var(--fg-2); padding:3px 0}
  .ckdisc{flex-shrink:0; width:20px; height:20px; border-radius:50%; background:rgba(var(--ok-rgb),.14); display:flex; align-items:center; justify-content:center; margin-top:1px}
  .ckdisc .ico{width:12px; height:12px; stroke:var(--ok); stroke-width:2.4}
  .pcard .priceline{display:flex; align-items:baseline; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--hairline)}
  .pcard .priceline .big{font-size:30px; font-weight:850; letter-spacing:-.03em; color:#fff} .pcard .priceline .per{font-size:var(--t-xs); color:var(--muted)}
  .pcard .priceline .freecancel{margin-left:auto; align-self:center; font-size:var(--t-2xs); color:var(--ok-text); display:inline-flex; align-items:center; gap:5px}
  .pcard .body .btn{margin-top:10px}
  /* linkul către secțiunea de detalii — trăiește ÎN card, sub CTA (un singur CTA primar pe ecran) */
  .detwrap{text-align:center; margin-top:2px}
  .detlink{display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:9px 6px; font-size:var(--t-xs); color:var(--accent-text);
    border-bottom:1px solid rgba(var(--accent-rgb),.4); cursor:pointer; touch-action:manipulation; background:none; border-top:none; border-left:none; border-right:none; font-family:inherit; transition:transform var(--dur-fast) var(--ease-press)}
  .detlink .ico{width:14px; height:14px; transition:transform var(--dur-base) var(--ease-out)}
  .detlink:active{transform:scale(.97)} .detlink:active .ico{transform:translateX(3px)}

  /* feature / step / benefit */
  .grid3{display:grid; grid-template-columns:1fr; gap:12px}
  .fcard{background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2),var(--inset-hi); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
  .fcard .ic{margin-bottom:12px}
  .fcard .h{font-size:var(--t-base); font-weight:800; color:#fff; line-height:var(--lh-h3)}
  .fcard .d{font-size:var(--t-sm); color:var(--muted); margin-top:6px; line-height:1.5; max-width:34ch}
  .fcard:active{transform:scale(.99)}
  @media (hover:hover){ .fcard:hover{transform:translateY(-2px); box-shadow:var(--sh-3),var(--inset-hi)} }
  .steps{display:grid; grid-template-columns:1fr; gap:0}
  .step{display:flex; gap:14px; align-items:flex-start; padding:14px 0}
  .step+.step{border-top:1px solid var(--hairline)}
  .step .n{flex-shrink:0; width:34px; height:34px; border-radius:var(--r-sm); background:rgba(var(--accent-rgb),.14); color:var(--accent-text); font-weight:800;
    display:flex; align-items:center; justify-content:center; box-shadow:var(--inset-hi); font-variant-numeric:tabular-nums}
  .step .h{font-size:15px; font-weight:700; color:#fff} .step .d{font-size:var(--t-xs); color:var(--muted); margin-top:3px; line-height:1.5}
  .step .free-pill{margin-top:8px}

  /* ============ 3. FAQ ============ */
  .faq{max-width:var(--phone); margin:0 auto}
  .qi{border-bottom:1px solid var(--hairline); border-radius:var(--r-sm)}
  .qi.open{background:rgba(255,255,255,.018)}
  .qh{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none; cursor:pointer; font:inherit; color:var(--fg);
    min-height:56px; padding:14px 12px 14px 14px; touch-action:manipulation; transition:background var(--dur-fast)}
  .qh:active{background:rgba(255,255,255,.03)}
  .qh .q{flex:1; font-size:var(--t-base); line-height:1.35; font-weight:700; letter-spacing:-.01em}
  .qh .pm{flex-shrink:0; width:28px; height:28px; border-radius:50%; background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.2);
    display:flex; align-items:center; justify-content:center; color:var(--accent-text); transition:transform var(--dur-base) var(--ease-press), background var(--dur-base)}
  .qh .pm .ico{width:14px; height:14px; stroke-width:2.2}
  .qi.open .qh .pm{transform:rotate(135deg); background:rgba(var(--accent-rgb),.18)}
  .qb{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-inout)}
  .qi.open .qb{grid-template-rows:1fr; transition:grid-template-rows 300ms var(--ease-emph)}
  .qb .in{overflow:hidden; min-height:0; font-size:var(--t-sm); line-height:1.6; color:var(--fg-body); max-width:36ch}
  .qb .in .pp{margin:0 12px 20px 14px; transform:translateY(-4px); opacity:0; transition:transform var(--dur-base) var(--ease-emph), opacity var(--dur-base) 40ms}
  .qi.open .qb .in .pp{transform:none; opacity:1}
  .qb .in b{color:var(--fg); font-weight:700}
  .faq-more{text-align:center; margin-top:18px; font-size:var(--t-xs); color:var(--muted)}
  .faq-more a{display:inline-flex; min-height:44px; align-items:center; gap:4px; padding:0 6px; color:var(--accent-text); font-weight:700}
  .faq-more a .ico{width:13px;height:13px}

  /* ============ 4. CALCULATOR ============ */
  .calc{background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-xl); padding:22px; box-shadow:var(--sh-2),var(--inset-hi)}
  .field{margin-bottom:14px}
  .field>label{font-size:var(--t-2xs); text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:700; display:block; margin-bottom:6px}
  .field input{width:100%; min-height:52px; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-sm); padding:12px 14px; color:#fff; font:inherit; font-size:var(--t-base);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3); transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
  .field input::placeholder{color:var(--dim)}
  .field input[type=number]{font-variant-numeric:tabular-nums lining-nums}
  .field input:focus-visible{outline:none; border-color:rgba(var(--accent-rgb),.6); box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent-rgb),.18)}
  .frow{display:flex; gap:12px}
  .frow.stack{flex-direction:column; gap:0}
  .calc .btn{min-height:54px; margin-top:2px}
  .calc-res{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur-base) var(--ease-emph), opacity var(--dur-base)}
  .calc-res>.inner{overflow:hidden; min-height:0}
  .calc-res.show{grid-template-rows:1fr; opacity:1; margin-top:18px}
  .calc-res .pad{text-align:center; padding-top:18px; border-top:1px solid var(--hairline)}
  .calc-res .kgwrap{filter:drop-shadow(0 0 30px rgba(124,92,252,.25))}
  .calc-res .kg{display:inline-block; font-size:64px; font-weight:850; line-height:1; letter-spacing:-.04em}
  .calc-res .kg.snap{animation:kgSnap 320ms var(--ease-press)}
  @keyframes kgSnap{from{transform:scale(.96)} to{transform:scale(1)}}
  .calc-res .ctx{font-size:var(--t-sm); color:var(--muted); margin:10px auto 18px; max-width:36ch; line-height:1.55} .calc-res .ctx b{color:var(--fg); font-weight:700}
  .calc-res .cta-wrap{opacity:0; transform:translateY(8px); transition:opacity var(--dur-base) var(--ease-out) .2s, transform var(--dur-base) var(--ease-out) .2s}
  .calc-res.show .cta-wrap{opacity:1; transform:none}

  /* ============ 5. WAITLIST ============ */
  .wait{text-align:center}
  .wait h2{font-size:var(--t-h2); line-height:var(--lh-snug); margin-top:10px}
  .wait .row{display:flex; flex-direction:column; gap:10px; margin-top:18px}
  .wait input[type=email]{min-height:52px; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-sm); padding:14px; color:#fff; font:inherit; font-size:var(--t-base);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3); transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
  .wait input[type=email]::placeholder{color:var(--dim)}
  .wait input[type=email]:focus-visible{outline:none; border-color:rgba(var(--accent-rgb),.6); box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent-rgb),.18)}
  .wait .btn.sent{background:var(--ok); box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 28px -6px rgba(var(--ok-rgb),.4),var(--inset-hi); animation:sentPop var(--dur-base) var(--ease-press)}
  @keyframes sentPop{from{transform:scale(.98)} to{transform:scale(1)}}
  .wait .btn .ck-pop{display:inline-flex; animation:ckPop 240ms var(--ease-press)}
  @keyframes ckPop{from{transform:scale(0)} to{transform:scale(1)}}
  .wait .row.bad input{border-color:#ff5470; box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(255,84,112,.12); animation:shake 360ms ease-out}
  @keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(2px)}100%{transform:translateX(0)}}
  .wait .consent{display:flex; gap:10px; align-items:flex-start; min-height:44px; margin-top:14px; padding:8px 0; font-size:var(--t-xs); line-height:1.45; color:var(--muted); text-align:left; cursor:pointer}
  /* bifa: desenată prin mask pe un strat alb → mereu perfect centrată și crisp,
     indiferent de border/subpixeli; mic „pop" la bifare */
  .wait .consent input{appearance:none; -webkit-appearance:none; width:21px; height:21px; border-radius:6px; border:1.5px solid var(--hairline-strong); background:var(--bg-elev);
    flex-shrink:0; margin-top:1px; cursor:pointer; position:relative; transition:background var(--dur-fast), border-color var(--dur-fast)}
  /* culoare solidă la bifare — gradientul complet, înghesuit în 21px, se citea ca două pete */
  .wait .consent input:checked{background:var(--accent); border-color:transparent}
  .wait .consent input:checked::after{content:""; position:absolute; inset:4px; background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:ckIn .2s var(--ease-press)}
  @keyframes ckIn{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
  .wait .consent a{color:var(--accent-text)}
  .wait .trust{margin-top:14px; font-size:var(--t-2xs); color:var(--dim); display:inline-flex; align-items:center; gap:6px}
  .wait .trust .ico{width:13px;height:13px}
  .wait .field-err{margin:8px auto 0; max-width:520px; font-size:var(--t-xs); line-height:1.4; color:var(--danger); font-weight:600}

  /* avatar circular cu text curbat rotitor + „scris de Andu Preda" */
  .nl-by{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:var(--s6)}
  .nl-by-txt{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted)}
  .nl-by-txt a{color:#fff; font-weight:800}
  .curved-text-image{position:relative; width:120px; height:120px; border-radius:50%}
  .curved-text-image img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
  .curved-text-image .text-svg{position:absolute; top:-15%; left:-15%; width:130%; height:130%; transform-origin:center; animation:curvedRotate 18s linear infinite}
  .curved-text-image .curved-text{text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.09em}
  @keyframes curvedRotate{from{transform:rotate(0)} to{transform:rotate(360deg)}}
  /* listă de beneficii (bifă verde în doi tonuri, ca în original) */
  .nl-adv{list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-direction:column; gap:14px; text-align:left}
  .nl-adv li{display:flex; align-items:flex-start; gap:11px; font-size:var(--t-sm); line-height:1.5; color:var(--fg-2)}
  .nl-adv svg{flex-shrink:0; width:20px; height:20px; margin-top:1px}
  @media (prefers-reduced-motion:reduce){ .curved-text-image .text-svg{animation:none} }

  /* ============ 6. TABS ============ */
  #detalii{scroll-margin-top:0} /* idem: ținta lui „Detalii program — ce primești?" */
  .det-tabs{margin:0 auto var(--s5)}
  .tabpanel{display:none}
  .tabpanel.on{display:block; animation:panelIn .38s var(--ease-emph) both}
  @keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .vs-price{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px}
  .vp{border-radius:var(--r-lg); padding:18px 12px; text-align:center; box-shadow:var(--sh-2),var(--inset-hi);
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0}
  .vp.us{background:var(--card-fill); border:1px solid rgba(var(--accent-rgb),.3); box-shadow:0 0 0 1px rgba(124,92,252,.12),var(--sh-2),var(--inset-hi)}
  .vp.them{background:var(--card-fill); border:1px solid var(--card-bd)}
  .vp .lbl{font-size:var(--t-2xs); color:var(--muted); font-weight:700}
  .vp .amt{font-size:24px; font-weight:850; letter-spacing:-.02em; color:#fff; margin:6px 0 2px}
  .vp.them .amt{color:var(--muted)}
  .vp .note{font-size:var(--t-2xs); color:var(--dim); line-height:1.4}
  .vp .save{margin-top:10px}
  .vs-table{width:100%; border-collapse:collapse; font-size:var(--t-xs); table-layout:fixed}
  .vs-table th,.vs-table td{padding:11px 8px; border-bottom:1px solid var(--hairline); text-align:left; vertical-align:middle}
  .vs-table col.feat{width:58%} .vs-table col.col{width:21%}
  .vs-table thead th{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:800}
  .vs-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
  .vs-table td.feat{line-height:1.35; color:var(--fg-2)}
  .vs-table .uscol{text-align:center; background:rgba(124,92,252,.04)}
  .vs-table .themcol{text-align:center}
  .vs-table .uscol .ico{width:16px; height:16px; stroke:var(--ok); stroke-width:2.2}
  .vs-table .themcol .ico{width:15px; height:15px; stroke:var(--dim); stroke-width:2}
  .vs-table tbody tr{opacity:0; transform:translateX(-6px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out)}
  .vs-table.lit tbody tr{opacity:1; transform:none}

  /* tot cardul e link către CV (trust-building) — apăsarea „respiră", chevron discret */
  .founder{display:flex; align-items:center; gap:14px; background:var(--card-fill); border:1px solid var(--card-bd); border-radius:var(--r-lg); padding:16px 18px; margin:var(--s6) auto 0; box-shadow:var(--sh-2),var(--inset-hi);
    -webkit-tap-highlight-color:transparent; transition:transform var(--dur-fast) var(--ease-press), border-color var(--dur-base), opacity var(--dur-slow) var(--ease-emph)}
  .founder:active{transform:scale(.985); border-color:rgba(var(--accent-rgb),.35)}
  .founder .go{flex-shrink:0; margin-left:auto; width:17px; height:17px; color:var(--dim)}
  .founder .nm{font-size:15px; font-weight:850; color:#fff; line-height:1.25; display:flex; align-items:center; gap:6px}
  .founder .nm .vbadge{color:var(--accent-text)} .founder .nm .vbadge .ico{width:15px;height:15px}
  .founder .role{font-size:var(--t-2xs); color:var(--muted); margin-top:4px; line-height:1.4; max-width:34ch}
  .finalcta{position:relative; text-align:center; margin:var(--s6) auto 0; padding:30px 22px; border-radius:var(--r-xl);
    background:radial-gradient(120% 120% at 50% 0%, rgba(124,92,252,.2), rgba(13,17,23,.35)),radial-gradient(80% 70% at 0% 100%, rgba(0,194,255,.06), transparent 60%);
    border:1px solid rgba(var(--accent-rgb),.3); overflow:hidden; box-shadow:var(--sh-3),var(--inset-hi)}
  .finalcta h2{font-size:var(--t-h2); line-height:var(--lh-snug); font-weight:850; letter-spacing:-.035em}
  .finalcta p{margin:12px auto 22px; max-width:34ch}
  .finalcta .btn{min-height:56px}
  footer{padding:34px 0 calc(96px + env(safe-area-inset-bottom)); border-top:1px solid var(--hairline); margin-top:var(--s7); font-size:var(--t-xs); color:var(--muted); text-align:center}
  footer .ssl{font-size:var(--t-2xs); color:var(--dim); display:inline-flex; align-items:center; gap:6px; margin-top:6px} footer .ssl .ico{width:13px;height:13px}

  .scrollprog{position:fixed; top:0; left:0; right:0; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; z-index:80; opacity:.7; will-change:transform}
  .buybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(130%); opacity:0;
    transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
    background:rgba(13,17,23,.82); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 -8px 24px rgba(0,0,0,.4);
    padding:10px max(var(--gutter),env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left))}
  .buybar .inner{display:flex; align-items:center; gap:12px; max-width:var(--phone); margin:0 auto}
  .buybar.show{transform:translateY(0); opacity:1}
  .buybar .px{font-size:var(--t-sm); font-weight:800; color:#fff; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4)} .buybar .px small{color:var(--muted); font-weight:600}
  .buybar .btn{flex:1; min-height:48px; padding:0 14px; font-size:15px}

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
    .hero::before,.dot,.gt,.btn{animation:none !important}
    .scrollprog{display:none}
    .reveal{opacity:1; transform:none}
    .calc-res.show,.vs-table tbody tr{opacity:1}
    .qb .in .pp{opacity:1; transform:none}
  }

  /* ===================== PRODUCT SHOWCASE — mockup telefon (show-don't-tell) ===================== */
  .mk-stage{--prot:#36C5F0;--carb:#FFB23C;--fat:#F76C9B;--prep:#FF8A3C; position:relative; max-width:300px; margin:0 auto var(--s6)}
  .mk-stage *{box-sizing:border-box}
  .mk-i{display:inline-flex; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none}
  .mk-phone{position:relative; width:min(280px,86vw); margin:0 auto; border-radius:46px; background:#0A0C10; padding:11px; z-index:3;
    box-shadow:inset 0 0 0 1.5px #1c1f27, inset 0 0 0 2.5px #05070b, 0 0 0 1px rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.4), 0 34px 64px -22px rgba(0,0,0,.75)}
  .mk-phone::before{content:""; position:absolute; inset:-20px; z-index:-1; border-radius:56px; opacity:.6; filter:blur(28px);
    background:radial-gradient(58% 48% at 28% 12%, rgba(0,194,255,.24), transparent 60%), radial-gradient(58% 48% at 76% 30%, rgba(181,33,233,.26), transparent 62%)}
  .mk-island{position:absolute; top:19px; left:50%; transform:translateX(-50%); width:86px; height:25px; border-radius:13px; background:#000; z-index:6}
  .mk-pscreen{position:relative; border-radius:35px; overflow:hidden; aspect-ratio:278/600; background:#080B12; display:flex; flex-direction:column; color:var(--fg); font-family:var(--font-display)}
  .mk-pscreen::after{content:""; position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:35px; mix-blend-mode:screen;
    background:linear-gradient(135deg, rgba(255,255,255,.06), transparent 22%, transparent 80%, rgba(255,255,255,.03))}
  .mk-pbody{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}
  .mk-status{display:flex; align-items:center; justify-content:space-between; padding:8px 18px 2px; font:700 11px/1 var(--font-display); font-variant-numeric:tabular-nums; color:#E8E8F0}
  .mk-status .mk-sig{display:inline-flex; gap:5px; opacity:.9} .mk-status .mk-i{width:13px;height:11px}
  .mk-phdr{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:8px 14px 8px; border-bottom:1px solid rgba(255,255,255,.05)}
  .mk-kick{font:800 8.5px/1 var(--font-display); letter-spacing:.12em}
  .mk-h1{font:800 16px/1.1 var(--font-display); color:#fff; margin-top:2px}
  .mk-sub{font:500 10px/1.2 'Inter',sans-serif; color:#8A8A9A; margin-top:2px}
  .mk-goal{display:inline-flex; align-items:center; gap:4px; font:700 10.5px/1 'Inter'; color:#cbb8ff; background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3); border-radius:999px; padding:5px 9px; white-space:nowrap}
  .mk-goal .mk-i{width:11px;height:11px}
  .mk-week{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; padding:9px 12px 5px}
  .mk-d{position:relative; text-align:center; padding:5px 0 6px; border-radius:8px; border:1px solid transparent}
  .mk-d .wd{font:700 8px/1 'Inter'; color:#55556a} .mk-d .nm{font:800 13px/1 var(--font-display); color:#fff; margin-top:3px}
  .mk-d.off .nm{color:#3a3a45}
  .mk-d.sel{border-color:rgba(124,92,252,.65); background:rgba(124,92,252,.14)} .mk-d.sel .nm{color:#cbb8ff}
  .mk-d.prep::after{content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
  .mk-daylbl{padding:2px 14px 8px; font:800 12px/1 var(--font-display); color:#fff} .mk-daylbl span{font-weight:500; color:#8A8A9A; font-family:'Inter'}
  .mk-nutri{margin:0 13px; background:rgba(255,255,255,.02); border:1px solid rgba(124,92,252,.3); border-radius:14px; padding:13px 12px; display:flex; gap:11px; align-items:center}
  .mk-ring{position:relative; width:70px; height:70px; flex:none}
  .mk-ring svg{transform:rotate(-90deg)} .mk-ringc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
  .mk-ringc b{font:800 18px/1 var(--font-display); color:#fff; font-variant-numeric:tabular-nums} .mk-ringc span{font:500 8.5px/1 'Inter'; color:#8A8A9A; margin-top:2px}
  .mk-macros{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
  .mk-mac .mk-mrow{display:flex; justify-content:space-between; gap:6px; font-variant-numeric:tabular-nums}
  .mk-mac .l{font:500 10.5px/1.1 'Inter'; color:#8A8A9A; white-space:nowrap; letter-spacing:-.01em} .mk-mac .v{font:700 10.5px/1.1 'Inter'; color:#E8E8F0; white-space:nowrap; flex:none}
  .mk-bar{height:4px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:4px; overflow:hidden}
  .mk-bar i{display:block; height:100%; border-radius:3px}
  .mk-mac.sub{margin-left:13px; border-left:1px solid rgba(255,255,255,.1); padding-left:8px}
  .mk-mac.sub .l,.mk-mac.sub .v{font-size:9.5px} .mk-mac.sub .mk-bar{height:3px}
  .mk-coach{margin:11px 13px 0; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-left:3px solid var(--prep); border-radius:11px; padding:10px 12px}
  .mk-cnh{display:flex; align-items:center; gap:7px}
  .mk-av{width:24px;height:24px;border-radius:50%; background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); display:flex; align-items:center; justify-content:center; font:800 9px/1 var(--font-display); color:#fff; flex:none; overflow:hidden}
  .mk-av img{width:100%;height:100%;object-fit:cover}
  .mk-cnh b{font:800 10.5px/1 var(--font-display); color:#f3c39a; flex:1}
  .mk-cntag{font:800 8px/1 var(--font-display); letter-spacing:.05em; color:#ffb98a; background:rgba(255,138,60,.14); border-radius:5px; padding:3px 6px}
  .mk-coach p{margin:7px 0 0; font:400 11.5px/1.5 'Inter'; color:#d7d7e2}
  .mk-cnbtn{display:inline-flex; align-items:center; gap:5px; margin-top:9px; font:700 10px/1 'Inter'; color:#ffb98a; background:rgba(255,138,60,.13); border-radius:8px; padding:6px 10px} .mk-cnbtn .mk-i{width:11px;height:11px}
  .mk-seclbl{padding:12px 14px 5px; font:800 9px/1 var(--font-display); letter-spacing:.06em; color:#55556a}
  .mk-meal{display:flex; align-items:center; gap:9px; margin:0 13px 7px; padding:9px 10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.05); border-radius:11px}
  .mk-chk{width:19px;height:19px;border-radius:50%; border:1.5px solid rgba(255,255,255,.16); flex:none; display:flex; align-items:center; justify-content:center}
  .mk-meal.done .mk-chk{background:var(--ok); border-color:transparent} .mk-meal.done .mk-chk .mk-i{width:11px;height:11px; stroke:#06281a; stroke-width:2.6}
  .mk-meal .mt{font:700 9px/1 'Inter'; letter-spacing:.04em; color:#8A8A9A; text-transform:uppercase} .mk-meal .mn{font:600 13.5px/1.25 'Inter'; color:#E8E8F0; margin-top:2px}
  .mk-meal.done .mn{color:#55556a; text-decoration:line-through} .mk-meal .mkcal{font:500 10px/1 'Inter'; color:#8A8A9A; margin-top:3px; font-variant-numeric:tabular-nums}
  .mk-meal .mbody{flex:1; min-width:0}
  .mk-prep{font:800 7.5px/1 var(--font-display); color:#ffb98a; background:rgba(255,138,60,.14); border-radius:4px; padding:2px 5px; margin-left:6px}
  .mk-tab{flex:none; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 6px 14px; background:rgba(13,17,23,.94); border-top:1px solid rgba(255,255,255,.06)}
  .mk-tab a{display:flex; flex-direction:column; align-items:center; gap:3px; font:600 9px/1 'Inter'; color:#5b5b68} .mk-tab a .mk-i{width:18px;height:18px}
  .mk-tab a.on{color:#cbb8ff}
  /* ecran mai înalt (20:9, ca telefoanele moderne) + ritm compact —
     cina („momentul VREAU") trebuie să fie complet vizibilă deasupra tab-bar-ului */
  .mk-pscreen{aspect-ratio:278/664}
  .mk-nutri{padding:10px 12px}
  .mk-ring{width:62px; height:62px}
  .mk-ring svg{width:62px; height:62px}
  .mk-ringc b{font-size:16px}
  .mk-week{padding:6px 12px 3px}
  .mk-phdr{padding:6px 14px 6px}
  .mk-status{padding:6px 18px 2px}
  .mk-seclbl{padding:9px 14px 4px}
  .mk-coach{padding:9px 12px}
  .mk-coach p{margin-top:6px}
  .mk-cnbtn{margin-top:7px}
  .mk-meal{padding:8px 10px; margin-bottom:6px}
  .mk-laptop{display:none}
  @media (prefers-reduced-motion:reduce){ .mk-stage *{animation:none !important} }

  /* ===================== STRATUL X — libertate maximă ===================== */
  /* 1) măturare de auroră peste hero la încărcare: o bandă de lumină diagonală
        trece O DATĂ peste compoziție, în spatele conținutului (z-index 1 < wrap 2) */
  .hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
    background:linear-gradient(115deg, transparent 32%, rgba(160,190,255,.07) 46%, rgba(181,33,233,.055) 54%, transparent 70%);
    transform:translateX(-60%)}
  .hero.play::after{animation:auroraSweep 1.7s var(--ease-out) .9s}
  @keyframes auroraSweep{0%{opacity:0; transform:translateX(-60%)} 30%{opacity:1} 100%{opacity:0; transform:translateX(60%)}}
  .hero.shown::after{display:none}

  /* 2) hint de glisare pe cardul de plan (doar touch); dispare la primul gest */
  .swipehint{position:absolute; top:22px; right:22px; z-index:4; display:none; align-items:center;
    font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#fff;
    background:rgba(8,11,18,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 11px;
    animation:hintNudge 2.4s ease-in-out infinite; transition:opacity .35s var(--ease-out)}
  @media (hover:none){ .swipehint{display:inline-flex} }
  .swipehint.bye{opacity:0; animation:none}
  @keyframes hintNudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(-5px)}}

  /* 3) scroll-driven storytelling în mockup: inelul de kcal se umple pe măsură ce
        derulezi, apoi cina (shaorma!) se bifează singură (fallback: starea statică) */
  @supports (animation-timeline: view()){
    .mk-ring svg circle:last-of-type{animation:ringFill 1s linear both;
      animation-timeline:view(); animation-range:entry 25% cover 55%}
    @keyframes ringFill{from{stroke-dashoffset:213.6} to{stroke-dashoffset:117.7}}
    .mk-chk2{animation:chkFill 1s linear both; animation-timeline:view(); animation-range:cover 45% cover 72%}
    @keyframes chkFill{0%,70%{background:transparent; border-color:rgba(255,255,255,.16)}
      100%{background:var(--ok); border-color:transparent}}
    .mk-chk2 .mk-i{opacity:0; transform:scale(.3);
      animation:chkTick 1s var(--ease-press) both; animation-timeline:view(); animation-range:cover 62% cover 78%}
    @keyframes chkTick{to{opacity:1; transform:scale(1)}}
  }

  /* 4) performanță: secțiunile grele de sub fold se randează leneș */
  #showcase,#mail{content-visibility:auto; contain-intrinsic-size:auto 900px}

@keyframes riseEmph{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
}

/* ===== RECONCILIERE — elemente unice unui singur design ===== */
/* desktop-only în markup: ascunse sub 720 (acolo afișăm mobil-x) */
@media (max-width:719.98px){
  .topnav{ display:none !important; }        /* nav orizontal desktop (+ nav-auth, nav-go) */
  .mk-points{ display:none !important; }      /* bullet-urile din showcase (doar desktop) */
  .nl-main, .nl-side{ display:contents; }     /* wrapperele 2-col ale newsletter-ului nu există în mobil-x */
  .mk-chk2 .mk-i{ } /* iconul de bifă scroll-driven rămâne pe mobil */
}
/* mobil-x-only în markup: ascunse de la 720 (acolo afișăm desktop) */
@media (min-width:720px){
  .swipehint{ display:none !important; }       /* hint-ul de glisare (doar mobil-x) */
  .mk-chk2 .mk-i{ display:none !important; }    /* iconul de bifă scroll-driven (doar mobil-x) */
}


/* ===== landing → chat transition (v7) ===== */
/* =============================================================================
   landing-to-chat.css — tranziția landing → chat, scrisă pe selectorii REALI
   din `themes/nutritie/modules/nutritie/views/routes/home.html.twig`
   (verificați: .hero > .wrap, .topbar/.topnav, .searchbar, .sb-field, .sb-pill,
   .sb-sugs, #q).

   SE ADAUGĂ la finalul lui `public/assets/css/routes/home.css`
   (sau ca fișier separat încărcat după el — nu contează, nu se calcă pe nimic:
   totul e sub `body.lp-leaving` sau în `@view-transition`).

   Cum funcționează: la trimitere, `ask()` pune `body.lp-leaving`; pastila „se
   aprinde" și urcă puțin, restul paginii se estompează, iar un văl de brand
   mătură ecranul de jos în sus. Chat-ul continuă mișcarea cu bara lui care
   urcă. Pe browserele cu View Transitions (Chrome/Edge/Safari 18+) pastila se
   MORFEAZĂ direct în bara de acțiune a chat-ului (nume partajat „composer"),
   iar vălul devine inutil și se stinge singur.
   ============================================================================= */

/* ---------------------------- ieșirea din landing ------------------------- */
body.lp-leaving .hero > .wrap > *:not(.searchbar) { animation: lpFadeAway .34s cubic-bezier(.4, 0, .2, 1) both; }
body.lp-leaving .topbar,
body.lp-leaving .topnav { animation: lpFadeAway .3s cubic-bezier(.4, 0, .2, 1) both; }
body.lp-leaving .sb-pill {
  transform: translateY(-10px) scale(1.015);
  border-color: rgba(124, 92, 252, .6);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
body.lp-leaving .sb-sugs { opacity: 0 !important; }
@keyframes lpFadeAway { to { opacity: 0; transform: translateY(-8px); } }

/* vălul de brand (fallback pentru browserele fără View Transitions) */
body.lp-leaving::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 18, .5) 30%, #080B12 78%),
              linear-gradient(135deg, rgba(0, 194, 255, .22), rgba(124, 92, 252, .25) 50%, rgba(181, 33, 233, .22));
  animation: lpVeil .42s cubic-bezier(.4, 0, .2, 1) both;
}
/* …DAR nu peste bara de căutare. Ea e singurul lucru care NU trebuie să dispară:
   se morfează în bara de scriere a chat-ului, deci trebuie să rămână complet
   vizibilă cât ecranul se stinge în jurul ei. Intenția exista deja — regula de mai
   sus estompează tot din hero „:not(.searchbar)" — dar vălul, `position: fixed`
   cu `z-index: 9999`, trecea peste ea și o voala odată cu restul.

   Nu e de ajuns să ridicăm `.searchbar`: părintele `.wrap` e `position: relative`
   cu `z-index: 2`, deci CREEAZĂ context de stivuire — orice valoare dinăuntru
   rămâne plafonată la 2 față de `body`. Ridicăm chiar wrap-ul hero-ului; celelalte
   secțiuni ale paginii rămân la 2, sub văl, cum trebuie. */
body.lp-leaving .hero > .wrap {
  z-index: 10000;
}
/* `.searchbar` nu e doar câmpul: mai conține pastila „Gratuit, fără cont" (deasupra)
   și rândul „Antrenat de Dr. Andu Preda" (dedesubt). Regula de mai sus cruță întregul
   `.searchbar`, deci rămâneau vizibile și ele — dar niciunul nu se morfează nicăieri.
   Le stingem, ca pe ecran să rămână într-adevăr doar câmpul (`.sb-field`), singurul
   care are corespondent în chat. */
body.lp-leaving .searchbar .free-wrap,
body.lp-leaving .searchbar .trained {
  animation: lpFadeAway .3s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes lpVeil { from { opacity: 0; transform: translateY(24%); } to { opacity: 1; transform: none; } }

/* --------------- View Transitions cross-document (landing → chat) ---------
   ATENȚIE: `@view-transition { navigation: auto }` trebuie declarat în CSS-ul
   AMBELOR pagini (aici + chat-v7.css, unde există deja), altfel browserul nu
   face tranziția între documente. Numele `composer` e purtat de pastila de
   search aici și de bara de acțiune în chat. */
@view-transition { navigation: auto; }
.sb-pill { view-transition-name: composer; }
::view-transition-old(root) { animation-duration: .22s; }
::view-transition-new(root) { animation-duration: .3s; }
/* [curba de miscare] `cubic-bezier(.16,1,.3,1)` ducea 49% din distanta in primele
   58ms din 580 — trei cadre la 60Hz — iar restul animatiei muta elementul cu 12%.
   Ochiul nu avea ce urmari, deci deplasarea nu se citea ca o continuare.
   `cubic-bezier(.22,.61,.36,1)` ajunge la 50% in 116ms: ~15 cadre de miscare reala.
   E chiar `--ease-out` din chat-v7.css, deci nu introducem o valoare noua. */
::view-transition-group(composer) { animation-duration: .52s; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
::view-transition-old(composer), ::view-transition-new(composer) { height: 100%; }

/* NOTĂ: aici era un bloc `@supports (view-transition-name: none)` care ASCUNDEA vălul
   și scurta estomparea la .18s, presupunând că morph-ul MPA preia animația. Dar
   View Transitions cross-document nu se declanșau fiabil (vezi HomeRouteController /
   Cache-Control), așa că utilizatorul rămânea fără animație: titlul și inputul păreau
   că „stau", apoi redirect sec. Blocul a fost eliminat — vălul + estomparea rulează
   mereu complet (home.js așteaptă 420ms înainte de navigare). */

@media (prefers-reduced-motion: reduce) {
  body.lp-leaving::before { animation: none; opacity: 1; }
  body.lp-leaving .hero > .wrap > *:not(.searchbar),
  body.lp-leaving .searchbar .free-wrap,
  body.lp-leaving .searchbar .trained,
  body.lp-leaving .topbar,
  body.lp-leaving .topnav { animation: none; opacity: 1; }
  body.lp-leaving .sb-pill { transition: none; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: .001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZONA DE MENIU DE PE LANDING — aliniată la chat.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. BUTONUL DE MENIU preia forma și animația celui din chat (`.acx-mburger`),
      FĂRĂ cutia din jur — pe chat butonul are chenar, fundal și blur; aici rămâne
      curat, cum era.
      Diferențele preluate: două linii în loc de trei, 19px + 13px (a doua mai
      scurtă și decalată la dreapta), 5px între ele, iar la deschidere se strâng
      într-un X din translație + rotație, în loc ca tot butonul să se rotească
      180°. Linia a treia era deja `display:none`. */
.burger { gap: 5px; }
.burger span {
  width: 19px;
  height: 2px;
  border-radius: 2px;
  transition: transform .5s var(--ease-emph), width .28s, margin .28s;
}
.burger span:nth-child(2) { width: 13px; margin-right: 6px; }
.burger[aria-expanded="true"] { transform: none; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); width: 19px; }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); width: 19px; margin-right: 0; }

/* 2. BRANDUL (logo + „Nutritie.ro") era 153×37 pe o bară de 60px, iar titlul
      hero începe la 70px — deci sub 10px între ele, și pe telefon „Nutriție" din
      titlu ajungea vizual lipit de logo. Îl coborâm la ~78% din dimensiune;
      bara respiră, iar raportul cu titlul redevine normal. */
.topbar .brand svg,
.topbar a:first-child svg { width: 120px; height: auto; }