/* ============================================================
   HOME / LANDING — CSS scoped pe lățime ca să fie 1:1 la ambele capete:
   >=1100px = designul nutritie-desktop (verbatim)
   <1100px  = designul nutritie-mobil-x (verbatim, inclusiv STRATUL X)
   v2 (27 sept 2026): pragul dintre cele două a urcat de la 720px la 1100px. Sub 1100px (telefon,
   tabletă, fereastră pe jumătate de ecran) se afișează landing-ul de mobil S; de la 1100px, cu JS,
   se aplică stratul de desktop S (`html.lp-d`, la coada fișierului); fără JS rămâne designul de
   desktop de mai jos. Specificația: „Arhitectura Noua Design Dennis/".
   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 >=1100px (v1: >=720px) ===== */
@media (min-width: 1100px) {
  /* ============================================================
     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, 0.045), rgba(255, 255, 255, 0.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: 1.9375rem;
    --t-h2: 1.5625rem;
    --t-h3: 1.25rem;
    --t-lg: 1.125rem;
    --t-base: 1rem;
    --t-sm: 0.90625rem;
    --t-xs: 0.8125rem;
    --t-2xs: 0.71875rem;
    --lh-tight: 1.05;
    --lh-snug: 1.14;
    --lh-h3: 1.25;
    --lh-base: 1.55;
    --gutter: 1rem;
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-xslow: 640ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-press: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.12);
    --sh-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45);
    --sh-2: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.55);
    --sh-3: 0 1.25rem 3.125rem -0.75rem rgba(0, 0, 0, 0.65);
    --inset-hi: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
    --r-sm: 0.625rem;
    --r-md: 0.875rem;
    --r-lg: 1.125rem;
    --r-xl: 1.375rem;
    --phone: 28.75rem;
  }
  * {
    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, 0.09), transparent 52%), radial-gradient(100% 52% at 3% 0%, rgba(0, 194, 255, 0.07), transparent 48%), radial-gradient(80% 50% at 50% 120%, rgba(124, 92, 252, 0.05), transparent 60%), var(--bg);
    overflow-x: hidden;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-size: 8.75rem;
    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: 2.875rem 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: -0.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: 0.5rem;
    top: -3rem;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    transition: top var(--dur-base) var(--ease-out);
  }
  .skip:focus {
    top: 0.5rem;
  }
  h3 {
    letter-spacing: -0.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: 0.06em;
  }
  .kick {
    font-size: var(--t-2xs);
    letter-spacing: 0.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: -0.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: 0.5rem 0 0;
  }
  .shead p {
    margin-top: 0.625rem;
  }
  .sep {
    height: 0.0625rem;
    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: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :focus-visible {
    outline: 0.125rem solid var(--focus);
    outline-offset: 0.125rem;
    border-radius: 0.5rem;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  .free-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--t-2xs);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ok-text);
    background: rgba(var(--ok-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--ok-rgb), 0.3);
    border-radius: 62.4375rem;
    padding: 0.375rem 0.8125rem;
  }
  .dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.45);
    animation: livePulse 2.2s ease-out infinite;
  }
  @keyframes livePulse {
    0% {
      box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.45);
    }
    70%,
    100% {
      box-shadow: 0 0 0 0.4375rem rgba(var(--ok-rgb), 0);
    }
  }
  .av {
    background: var(--grad);
    border-radius: 50%;
    padding: 0.125rem;
    display: inline-flex;
    flex-shrink: 0;
  }
  .av img {
    border-radius: 50%;
    border: 0.125rem solid var(--bg);
    display: block;
    object-fit: cover;
  }
  .av-sm img {
    width: 1.75rem;
    height: 1.75rem;
  }
  .av-lg img {
    width: 3.25rem;
    height: 3.25rem;
    box-shadow: 0 0 0 0.0625rem rgba(0, 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: 0.5rem;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: var(--t-base);
    border-radius: var(--r-md);
    padding: 0 1.375rem;
    min-height: 3.25rem;
    width: 100%;
    color: #fff;
    background: var(--grad);
    background-size: 150% 100%;
    animation: gradientShift 8s ease-in-out infinite;
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.75rem 1.75rem -0.375rem rgba(124, 92, 252, 0.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(0.97);
  }
  .btn .two {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .btn .two small {
    font-size: var(--t-2xs);
    font-weight: 600;
    opacity: 0.88;
  }
  .btn-max {
    max-width: 21.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }
  @media (hover: hover) {
    .btn:hover {
      box-shadow:
        0 0.25rem 0.75rem rgba(0, 0, 0, 0.35),
        0 1rem 2.5rem -0.375rem rgba(124, 92, 252, 0.55),
        var(--inset-hi);
    }
  }

  /* segmented control (radiogroup / tablist) */
  .seg {
    position: relative;
    display: flex;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-md);
    padding: 0.25rem;
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
  }
  .seg .thumb {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 0;
    height: calc(100% - 0.5rem);
    border-radius: var(--r-sm);
    background: #1b2230;
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07),
      0 0.125rem 0.375rem rgba(0, 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: 3rem;
    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: 0.375rem 0.25rem;
    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(0.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: 0.4375rem;
  }
  .plan-switch .plan-trigger-cnt {
    position: relative;
    flex: 1;
    max-width: 6.625rem;
  }
  .plan-switch .plan-trigger-cnt::before {
    content: "";
    position: absolute;
    inset: -0.125rem;
    background: var(--grad);
    z-index: -1;
    filter: blur(0.5625rem);
    opacity: 0;
    transform: scale(0.4);
    transition:
      opacity 750ms var(--ease-out),
      transform 750ms var(--ease-out);
    border-radius: 3rem;
    will-change: transform;
  }
  .plan-switch .plan-trigger-cnt:has(.plan-trigger[data-active])::before {
    transform: none;
    opacity: 0.5;
  }
  .plan-switch .plan-trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: 500ms;
    border-radius: 3rem;
    border: 0.0625rem solid transparent;
    transform: scale(0.9);
    opacity: 0.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(-1.25rem) 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(1.125rem) scale(0.99);
    transition:
      opacity 0.55s var(--ease-emph),
      transform 0.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: 0.4375rem max(var(--gutter), env(safe-area-inset-left)) 0.4375rem max(var(--gutter), env(safe-area-inset-right));
    /* înălțimea FIXATĂ la --hdr (nu lăsată să iasă din conținut): hero-ul de
       dedesubt se trage în sus cu exact --hdr ca glow-ul lui să curgă sub bara
       transparentă — dacă banda și variabila ar diverge cu câțiva px, fâșia de
       fundal gol ar reapărea exact în diferență (vezi nota de la .hero) */
    height: var(--hdr);
    background: transparent;
    border: 0.0625rem solid transparent;
    transition:
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base),
      transform var(--dur-base) var(--ease-out);
  }
  .topbar.stuck {
    /* Cerut (21 aug): negrul plin (--bg opac) era prea intens la reapariția
       barei — redus cu ~28% (alfa 0.72). Blur-ul dedesubt e obligatoriu la
       fundal semitransparent: fără el, textul care trece pe sub bară s-ar
       citi printre litere și meniul ar deveni ilizibil. E același limbaj de
       sticlă folosit deja în chat (bară/antet). */
    background: rgba(8, 11, 18, 0.72);
    -webkit-backdrop-filter: blur(0.625rem) saturate(1.15);
    backdrop-filter: blur(0.625rem) saturate(1.15);
    border-color: var(--hairline);
  }
  .topbar.hide {
    transform: translateY(-100%);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
  }
  .brand-logo {
    height: 2.3125rem;
    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: 2.75rem;
    height: 2.75rem;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: -0.5rem;
    -webkit-tap-highlight-color: transparent;
    color: var(--fg);
    transition: transform 0.5s var(--ease-emph);
  }
  .burger span {
    display: block;
    width: 1.875rem;
    height: 0.125rem;
    background: currentColor;
    transform-origin: center center;
    transition: transform 0.5s var(--ease-emph);
  }
  .burger span + span {
    margin-top: 0.3125rem;
  }
  .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, -0.4375rem, 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: 1.125rem;
    padding: calc(2 * var(--hdr)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.38s var(--ease-out),
      visibility 0s linear 0.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 0.55s var(--ease-out);
  }
  .navmenu.open::before {
    opacity: 0.25;
    transition-delay: 0.08s;
  }
  .navmenu > * {
    position: relative;
    z-index: 3;
  }
  .navmenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.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: 1.15625rem;
    letter-spacing: -0.01em;
    color: var(--fg);
    padding: 0.25rem 0.625rem;
    text-align: center;
    will-change: transform;
    transform: translateY(110%);
    opacity: 0;
    transition:
      transform 0.6s var(--ease-emph),
      opacity 0.4s var(--ease-out);
  }
  .navmenu.open .mi a {
    transform: none;
    opacity: 1;
  }
  .navmenu.open .mi:nth-child(1) a {
    transition-delay: 0.05s;
  }
  .navmenu.open .mi:nth-child(2) a {
    transition-delay: 0.11s;
  }
  .navmenu.open .mi:nth-child(3) a {
    transition-delay: 0.17s;
  }
  /* la închidere: totul se retrage rapid, fără stagger */
  .navmenu:not(.open) .mi a {
    transition:
      transform 0.18s var(--ease-out),
      opacity 0.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: 0.5rem;
    margin-top: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--fg);
    padding: 0.875rem 1.75rem;
    border-radius: 62.4375rem;
    opacity: 0;
    transform: translateY(0.875rem);
    transition:
      transform 0.55s var(--ease-emph),
      opacity 0.4s var(--ease-out);
  }
  .navmenu.open .nav-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.24s;
  }
  .navmenu:not(.open) .nav-cta {
    transition:
      transform 0.18s var(--ease-out),
      opacity 0.15s var(--ease-out);
  }
  .navmenu .nav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.09375rem;
    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: 1.1875rem;
    height: 1.1875rem;
  }
  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: 3.75rem;
  }
  .hero {
    /* BANDA ÎNCHISĂ DE SUB TOPBAR (raportat 21 aug): glow-ul din `.hero::before`
       e desenat să iasă în sus (`inset: -12% …`) tocmai ca să curgă sub bara
       transparentă, dar `overflow: hidden` (necesar pentru marginile laterale
       de -22%, altfel ar da scroll orizontal) îl tăia fix la muchia hero-ului —
       deasupra rămânea fundalul gol al paginii, vizibil mai închis.
       Reparația nu scoate clipul: TRAGE hero-ul sub topbar cu exact înălțimea
       barei (--hdr) și compensează prin padding — cutia hero-ului (și clipul ei)
       începe acum de la y=0, deci glow-ul umple și banda barei, iar conținutul
       rămâne exact unde era (fold-ul de pe telefon e neatins: -60 + 60 = 0).
       Bara stă deasupra (z-index 70, fundal transparent → .stuck la scroll). */
    margin-top: calc(-1 * var(--hdr));
    padding: calc(0.625rem + var(--hdr)) 0 0.875rem;
    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) - 1.5rem);
      min-height: calc(100svh - var(--hdr) - 1.5rem);
    }
    .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, 0.15), transparent 60%), radial-gradient(54% 60% at 78% 12%, rgba(181, 33, 233, 0.17), transparent 62%);
    animation: heroDrift 17s ease-in-out infinite alternate;
  }
  @keyframes heroDrift {
    from {
      transform: translate3d(-0.5rem, 0, 0) scale(1);
    }
    to {
      transform: translate3d(0.5rem, 0.375rem, 0) scale(1.04);
    }
  }
  .hero .wrap {
    position: relative;
    z-index: 2;
  }
  .hero .title {
    font-size: clamp(1.625rem, 8.9vw, 2.375rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 850;
    margin-top: 0.125rem;
    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: 0.58em;
    height: 0.58em;
    margin: 0.8125rem 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, 0.62), rgba(0, 194, 255, 0.28) 46%, transparent 72%);
    filter: blur(0.4375rem);
  }
  .hero .title .x {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 0.3125rem rgba(0, 194, 255, 0.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 0.6s var(--ease-emph) 0s both;
  }
  .hero.play .title .xwrap {
    animation: xIn 0.5s var(--ease-press) 0.18s both;
  }
  .hero.play .title .x {
    animation:
      xSpin 1s var(--ease-inout) 0.5s both,
      xBreathe 5.6s ease-in-out 3s infinite;
  }
  .hero.play .title .ln2 {
    animation:
      heroRise 0.6s var(--ease-emph) 0.32s both,
      gradFlow 9s linear 1.4s infinite;
  }
  @keyframes heroRise {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes xIn {
    0% {
      opacity: 0;
      transform: scale(0.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 0.55s var(--ease-emph) 0.55s both;
  }
  .hero.play .free-wrap {
    animation: heroRise 0.45s var(--ease-emph) 0.72s both;
  }
  .hero.play .sb-field {
    animation: heroRise 0.55s var(--ease-emph) 0.84s both;
  }
  .hero.play .trained {
    animation: emergeDown 0.55s var(--ease-emph) 1.02s both;
  }
  @keyframes emergeUp {
    from {
      opacity: 0;
      transform: translateY(1.375rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes emergeDown {
    from {
      opacity: 0;
      transform: translateY(-1.25rem);
    }
    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 0.9s var(--ease-out) 1.39s both,
      auraBreathe 4.6s ease-in-out 3s infinite;
  }
  @keyframes auraFlash {
    0% {
      opacity: 0.1;
    }
    45% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.18;
    }
  }
  @keyframes auraBreathe {
    0%,
    100% {
      opacity: 0.16;
    }
    50% {
      opacity: 0.3;
    }
  }
  /* „Sau" apare + clipește scurt */
  .hero.play .saudiv {
    animation: heroRise 0.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), 0.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 0.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(1.625rem) scale(0.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 0.25rem 1.375rem rgba(124, 92, 252, 0.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, 0.2), transparent 70%);
    filter: blur(0.875rem);
    pointer-events: none;
  }
  .hero.play .title::after {
    animation: titleAura 6.5s ease-in-out 1.6s infinite;
  }
  @keyframes titleAura {
    0%,
    100% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.06);
    }
  }
  .hero .sub {
    margin: 0.625rem auto 0;
    max-width: 42ch;
    font-size: 0.90625rem;
  }
  .searchbar {
    margin: 0.875rem auto 0;
  }
  .free-wrap {
    text-align: center;
    margin-bottom: 0.4375rem;
  }
  .sb-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--panel);
    border: 0.0625rem solid var(--card-bd);
    border-radius: 62.4375rem;
    padding: 0.375rem 0.375rem 0.375rem 1.125rem;
    z-index: 1;
    min-height: 3.25rem;
    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: -0.125rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    filter: blur(0.75rem);
    opacity: 0.16;
    z-index: -1;
    will-change: opacity;
    backface-visibility: hidden;
  }
  .sb-pill::after {
    content: "";
    position: absolute;
    inset: -0.125rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    filter: blur(0.75rem);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .sb-pill:focus-within {
    border-color: rgba(var(--accent-rgb), 0.4);
  }
  .sb-pill:focus-within::after {
    opacity: 0.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: 0.625rem 0.375rem;
  }
  .sb-pill input::placeholder {
    color: var(--dim);
  }
  .sb-go {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    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 0.0625rem 0 rgba(255, 255, 255, 0.25),
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
    transition: transform var(--dur-fast) var(--ease-press);
  }
  .sb-go .ico {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }
  .sb-go:active {
    transform: scale(0.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% + 0.5625rem);
    z-index: 30;
    text-align: left;
    padding: 0.375rem;
    background: var(--panel);
    border: 0.0625rem 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(-0.5rem) scale(0.985);
    transform-origin: top center;
    transition:
      opacity 0.2s var(--ease-out),
      transform 0.26s var(--ease-emph),
      visibility 0s 0.26s;
  }
  .sb-field.open .sb-sugs {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 0.22s var(--ease-out),
      transform 0.3s var(--ease-emph);
  }
  .sug-h {
    font-size: var(--t-2xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 0.375rem 0.75rem 0.3125rem;
  }
  .sug {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
    text-align: left;
    min-height: 2.875rem;
    background: none;
    border: none;
    border-radius: 0.75rem;
    padding: 0 0.75rem;
    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: 0.9375rem;
    height: 0.9375rem;
    color: var(--dim);
    stroke-width: 2;
    opacity: 0.85;
  }
  .sug span {
    flex: 1;
    min-width: 0;
  }
  .sug:hover,
  .sug:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
  }
  .sug:hover .sq,
  .sug:focus-visible .sq {
    color: var(--accent-text);
    opacity: 1;
  }
  .sug:active {
    background: rgba(var(--accent-rgb), 0.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: 0.5rem;
    margin-top: 0.625rem;
    color: var(--muted);
    line-height: 1.3;
  }
  .trained b {
    color: var(--fg);
    font-weight: 700;
  }
  .trained .av-sm img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .trained .tr-line {
    white-space: nowrap;
    font-size: 0.78125rem;
  }
  /* 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), 0.6);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
    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: 0.875rem auto 0;
    position: relative;
  }
  .saudiv::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.0625rem;
    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: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    background: var(--bg);
    padding: 0.3125rem 0.875rem;
    border: 0.0625rem solid var(--hairline);
    border-radius: 62.4375rem;
  }

  /* 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: 0.8125rem auto 0;
    text-align: center;
    background: var(--card-fill);
    border: 0.0625rem solid transparent;
    border-radius: var(--r-xl);
    padding: 1.125rem 1.375rem 1.0625rem;
    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, 0.11), transparent 60%), radial-gradient(120% 60% at 50% 118%, rgba(0, 194, 255, 0.07), transparent 62%);
  }
  /* inel gradient pe contur (limbajul de brand: cta--border-gradient) */
  .planintro::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    pointer-events: none;
    opacity: 0.55;
    background: linear-gradient(150deg, rgba(0, 194, 255, 0.5), rgba(124, 92, 252, 0.22) 42%, rgba(181, 33, 233, 0.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: 0.1875rem;
    margin: 1rem auto 0;
    width: 44%;
    border-radius: 0.1875rem;
    background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.5), rgba(181, 33, 233, 0.5), transparent);
    opacity: 0.65;
  }
  .planintro .pi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), 0.14);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.3);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.8125rem 0.3125rem 0.625rem;
    margin-bottom: 0.625rem;
  }
  .planintro .pi-badge .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .planintro h2 {
    font-size: 1.25rem;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -0.028em;
  }
  .planintro h2 .big {
    display: block;
    font-size: 1.6875rem;
    margin-top: 0.1875rem;
    padding-bottom: 0.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 0.25rem 1.125rem rgba(124, 92, 252, 0.35));
  }
  .planintro .nopdf {
    margin: 0.5625rem auto 0;
    max-width: 36ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fg-2);
  }
  .planintro .nopdf b {
    color: #fff;
    font-weight: 800;
  }
  .planintro .btn {
    margin-top: 0.875rem;
    min-height: 3.25rem;
  }
  .planintro .price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.75rem;
  }
  .planintro .price {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
  }
  .planintro .price b {
    font-size: 1.8125rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    color: #fff;
  }
  .planintro .price span {
    font-size: 0.8125rem;
    color: var(--fg-2);
  }
  .planintro .risk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ok-text);
    background: rgba(var(--ok-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--ok-rgb), 0.28);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.6875rem;
  }
  .planintro .risk-chip .ico {
    width: 0.75rem;
    height: 0.75rem;
    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: 0.875rem 0 1rem;
  }
  #program .shead {
    margin-bottom: 0.5rem;
  }
  #program .goal-hint {
    margin-bottom: 0.375rem;
  }
  @media (max-width: 520px) {
    #program .wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: calc(100vh - var(--hdr) - 1.875rem);
      min-height: calc(100svh - var(--hdr) - 1.875rem);
    }
  }
  .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: 2.625rem;
    height: 2.625rem;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent-text);
  }
  .ic .ico {
    width: 1.3125rem;
    height: 1.3125rem;
  }

  .plan-cards {
    position: relative;
    margin-top: 0.5rem;
  }
  .pcard {
    display: none;
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--card-solid);
    border: 0.0625rem 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 0.44s var(--ease-emph) both;
  }
  .pcard.on.from-l {
    animation-name: cardInL;
  }
  .pcard.out {
    animation: cardOutL 0.18s var(--ease-out) both;
  }
  .pcard.out.to-r {
    animation-name: cardOutR;
  }
  @keyframes cardInR {
    from {
      opacity: 0;
      transform: translateX(1.875rem) translateY(0.25rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes cardInL {
    from {
      opacity: 0;
      transform: translateX(-1.875rem) translateY(0.25rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes cardOutL {
    to {
      opacity: 0;
      transform: translateX(-1.5rem) scale(0.99);
    }
  }
  @keyframes cardOutR {
    to {
      opacity: 0;
      transform: translateX(1.5rem) scale(0.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), 0.45);
    box-shadow:
      0 0 0 0.0625rem rgba(var(--pc), 0.26),
      0 0 2.375rem -0.75rem rgba(var(--pc), 0.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: 0.75rem 0.75rem 0;
    background: radial-gradient(130% 100% at 50% 0%, rgba(var(--pc), 0.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: 0.875rem;
    overflow: hidden;
    aspect-ratio: 880/560;
    box-shadow:
      0 1.125rem 2.5rem -0.875rem rgba(0, 0, 0, 0.55),
      0 0.1875rem 0.75rem rgba(0, 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 0.55s var(--ease-emph) backwards;
  }
  @keyframes covZoom {
    from {
      transform: scale(1.14);
    }
    to {
      transform: scale(1.075);
    }
  }
  .pcard .rib {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--grad);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.75rem;
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25),
      0 0.25rem 0.875rem rgba(124, 92, 252, 0.35);
  }
  .pcard .body {
    padding: 0.75rem 1.125rem 0.6875rem;
  }
  .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: 0.5625rem 0 0;
  }
  .pcard li {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--fg-2);
    padding: 0.1875rem 0;
  }
  .ckdisc {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(var(--ok-rgb), 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.0625rem;
  }
  .ckdisc .ico {
    width: 0.75rem;
    height: 0.75rem;
    stroke: var(--ok);
    stroke-width: 2.4;
  }
  .pcard .priceline {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5625rem;
    padding-top: 0.5625rem;
    border-top: 0.0625rem solid var(--hairline);
  }
  .pcard .priceline .big {
    font-size: 1.875rem;
    font-weight: 850;
    letter-spacing: -0.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: 0.3125rem;
  }
  .pcard .body .btn {
    margin-top: 0.625rem;
  }
  /* 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: 0.125rem;
  }
  .detlink {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 2.75rem;
    padding: 0.5625rem 0.375rem;
    font-size: var(--t-xs);
    color: var(--accent-text);
    border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.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: 0.875rem;
    height: 0.875rem;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .detlink:active {
    transform: scale(0.97);
  }
  .detlink:active .ico {
    transform: translateX(0.1875rem);
  }

  /* feature / step / benefit */
  .grid3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .fcard {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-lg);
    padding: 1.125rem;
    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: 0.75rem;
  }
  .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: 0.375rem;
    line-height: 1.5;
    max-width: 34ch;
  }
  .fcard:active {
    transform: scale(0.99);
  }
  @media (hover: hover) {
    .fcard:hover {
      transform: translateY(-0.125rem);
      box-shadow: var(--sh-3), var(--inset-hi);
    }
  }
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 0.875rem 0;
  }
  .step + .step {
    border-top: 0.0625rem solid var(--hairline);
  }
  .step .n {
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--r-sm);
    background: rgba(var(--accent-rgb), 0.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: 0.9375rem;
    font-weight: 700;
    color: #fff;
  }
  .step .d {
    font-size: var(--t-xs);
    color: var(--muted);
    margin-top: 0.1875rem;
    line-height: 1.5;
  }
  .step .free-pill {
    margin-top: 0.5rem;
  }

  /* ============ 3. FAQ ============ */
  .faq {
    max-width: var(--phone);
    margin: 0 auto;
  }
  .qi {
    border-bottom: 0.0625rem solid var(--hairline);
    border-radius: var(--r-sm);
  }
  .qi.open {
    background: rgba(255, 255, 255, 0.018);
  }
  .qh {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--fg);
    min-height: 3.5rem;
    padding: 0.875rem 0.75rem 0.875rem 0.875rem;
    touch-action: manipulation;
    transition: background var(--dur-fast);
  }
  .qh:active {
    background: rgba(255, 255, 255, 0.03);
  }
  .qh .q {
    flex: 1;
    font-size: var(--t-base);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .qh .pm {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.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: 0.875rem;
    height: 0.875rem;
    stroke-width: 2.2;
  }
  .qi.open .qh .pm {
    transform: rotate(135deg);
    background: rgba(var(--accent-rgb), 0.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 0.75rem 1.25rem 0.875rem;
    transform: translateY(-0.25rem);
    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: 1.125rem;
    font-size: var(--t-xs);
    color: var(--muted);
  }
  .faq-more a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.375rem;
    color: var(--accent-text);
    font-weight: 700;
  }
  .faq-more a .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  /* ============ 4. CALCULATOR ============ */
  .calc {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-xl);
    padding: 1.375rem;
    box-shadow: var(--sh-2), var(--inset-hi);
  }
  .field {
    margin-bottom: 0.875rem;
  }
  .field > label {
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim);
    font-weight: 700;
    display: block;
    margin-bottom: 0.375rem;
  }
  .field input {
    width: 100%;
    min-height: 3.25rem;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.875rem;
    color: #fff;
    font: inherit;
    font-size: var(--t-base);
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 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), 0.6);
    box-shadow:
      inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(var(--accent-rgb), 0.18);
  }
  .frow {
    display: flex;
    gap: 0.75rem;
  }
  .frow.stack {
    flex-direction: column;
    gap: 0;
  }
  .calc .btn {
    min-height: 3.375rem;
    margin-top: 0.125rem;
  }
  .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: 1.125rem;
  }
  .calc-res .pad {
    text-align: center;
    padding-top: 1.125rem;
    border-top: 0.0625rem solid var(--hairline);
  }
  .calc-res .kgwrap {
    filter: drop-shadow(0 0 1.875rem rgba(124, 92, 252, 0.25));
  }
  .calc-res .kg {
    display: inline-block;
    font-size: 4rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .calc-res .kg.snap {
    animation: kgSnap 320ms var(--ease-press);
  }
  @keyframes kgSnap {
    from {
      transform: scale(0.96);
    }
    to {
      transform: scale(1);
    }
  }
  .calc-res .ctx {
    font-size: var(--t-sm);
    color: var(--muted);
    margin: 0.625rem auto 1.125rem;
    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(0.5rem);
    transition:
      opacity var(--dur-base) var(--ease-out) 0.2s,
      transform var(--dur-base) var(--ease-out) 0.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: 0.625rem;
  }
  .wait .row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.125rem;
  }
  .wait input[type="email"] {
    min-height: 3.25rem;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-sm);
    padding: 0.875rem;
    color: #fff;
    font: inherit;
    font-size: var(--t-base);
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 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), 0.6);
    box-shadow:
      inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(var(--accent-rgb), 0.18);
  }
  .wait .btn.sent {
    background: var(--ok);
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.75rem 1.75rem -0.375rem rgba(var(--ok-rgb), 0.4),
      var(--inset-hi);
    animation: sentPop var(--dur-base) var(--ease-press);
  }
  @keyframes sentPop {
    from {
      transform: scale(0.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 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(255, 84, 112, 0.12);
    animation: shake 360ms ease-out;
  }
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    15% {
      transform: translateX(-0.5rem);
    }
    30% {
      transform: translateX(0.375rem);
    }
    45% {
      transform: translateX(-0.25rem);
    }
    60% {
      transform: translateX(0.125rem);
    }
    100% {
      transform: translateX(0);
    }
  }
  .wait .consent {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    min-height: 2.75rem;
    margin-top: 0.875rem;
    padding: 0.5rem 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: 1.3125rem;
    height: 1.3125rem;
    border-radius: 0.375rem;
    border: 0.09375rem solid var(--hairline-strong);
    background: var(--bg-elev);
    flex-shrink: 0;
    margin-top: 0.0625rem;
    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: 0.25rem;
    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 0.2s var(--ease-press);
  }
  @keyframes ckIn {
    from {
      transform: scale(0.4);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .wait .consent a {
    color: var(--accent-text);
  }
  .wait .trust {
    margin-top: 0.875rem;
    font-size: var(--t-2xs);
    color: var(--dim);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .wait .trust .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .wait .field-err {
    margin: 0.5rem auto 0;
    max-width: 32.5rem;
    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: 0.875rem;
    margin-top: var(--s6);
  }
  .nl-by-txt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--muted);
  }
  .nl-by-txt a {
    color: #fff;
    font-weight: 800;
  }
  .curved-text-image {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    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: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.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: 0.875rem;
    text-align: left;
  }
  .nl-adv li {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--fg-2);
  }
  .nl-adv svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
  }
  @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 0.38s var(--ease-emph) both;
  }
  @keyframes panelIn {
    from {
      opacity: 0;
      transform: translateY(0.625rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .vs-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .vp {
    border-radius: var(--r-lg);
    padding: 1.125rem 0.75rem;
    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: 0.0625rem solid rgba(var(--accent-rgb), 0.3);
    box-shadow:
      0 0 0 0.0625rem rgba(124, 92, 252, 0.12),
      var(--sh-2),
      var(--inset-hi);
  }
  .vp.them {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
  }
  .vp .lbl {
    font-size: var(--t-2xs);
    color: var(--muted);
    font-weight: 700;
  }
  .vp .amt {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.375rem 0 0.125rem;
  }
  .vp.them .amt {
    color: var(--muted);
  }
  .vp .note {
    font-size: var(--t-2xs);
    color: var(--dim);
    line-height: 1.4;
  }
  .vp .save {
    margin-top: 0.625rem;
  }
  .vs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-xs);
    table-layout: fixed;
  }
  .vs-table th,
  .vs-table td {
    padding: 0.6875rem 0.5rem;
    border-bottom: 0.0625rem 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: 0.65625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 800;
  }
  .vs-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
  }
  .vs-table td.feat {
    line-height: 1.35;
    color: var(--fg-2);
  }
  .vs-table .uscol {
    text-align: center;
    background: rgba(124, 92, 252, 0.04);
  }
  .vs-table .themcol {
    text-align: center;
  }
  .vs-table .uscol .ico {
    width: 1rem;
    height: 1rem;
    stroke: var(--ok);
    stroke-width: 2.2;
  }
  .vs-table .themcol .ico {
    width: 0.9375rem;
    height: 0.9375rem;
    stroke: var(--dim);
    stroke-width: 2;
  }
  .vs-table tbody tr {
    opacity: 0;
    transform: translateX(-0.375rem);
    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: 0.875rem;
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-lg);
    padding: 1rem 1.125rem;
    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(0.985);
    border-color: rgba(var(--accent-rgb), 0.35);
  }
  .founder .go {
    flex-shrink: 0;
    margin-left: auto;
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--dim);
  }
  .founder .nm {
    font-size: 0.9375rem;
    font-weight: 850;
    color: #fff;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .founder .nm .vbadge {
    color: var(--accent-text);
  }
  .founder .nm .vbadge .ico {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .founder .role {
    font-size: var(--t-2xs);
    color: var(--muted);
    margin-top: 0.25rem;
    line-height: 1.4;
    max-width: 34ch;
  }
  .finalcta {
    position: relative;
    text-align: center;
    margin: var(--s6) auto 0;
    padding: 1.875rem 1.375rem;
    border-radius: var(--r-xl);
    background: radial-gradient(120% 120% at 50% 0%, rgba(124, 92, 252, 0.2), rgba(13, 17, 23, 0.35)), radial-gradient(80% 70% at 0% 100%, rgba(0, 194, 255, 0.06), transparent 60%);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.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: -0.035em;
  }
  .finalcta p {
    margin: 0.75rem auto 1.375rem;
    max-width: 34ch;
  }
  .finalcta .btn {
    min-height: 3.5rem;
  }
  footer {
    padding: 2.125rem 0 calc(6rem + env(safe-area-inset-bottom));
    border-top: 0.0625rem 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: 0.375rem;
    margin-top: 0.375rem;
  }
  footer .ssl .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .scrollprog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 80;
    opacity: 0.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, 0.82);
    backdrop-filter: blur(0.875rem) saturate(1.2);
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.2);
    border-top: 0.0625rem solid var(--hairline);
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04),
      0 -0.5rem 1.5rem rgba(0, 0, 0, 0.4);
    padding: 0.625rem max(var(--gutter), env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  }
  .buybar .inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    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 0.0625rem 0.125rem rgba(0, 0, 0, 0.4);
  }
  .buybar .px small {
    color: var(--muted);
    font-weight: 600;
  }
  .buybar .btn {
    flex: 1;
    min-height: 3rem;
    padding: 0 0.875rem;
    font-size: 0.9375rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.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: 18.75rem;
    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(17.5rem, 86vw);
    margin: 0 auto;
    border-radius: 2.875rem;
    background: #0a0c10;
    padding: 0.6875rem;
    z-index: 3;
    box-shadow:
      inset 0 0 0 0.09375rem #1c1f27,
      inset 0 0 0 0.15625rem #05070b,
      0 0 0 0.0625rem rgba(255, 255, 255, 0.04),
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.4),
      0 2.125rem 4rem -1.375rem rgba(0, 0, 0, 0.75);
  }
  .mk-phone::before {
    content: "";
    position: absolute;
    inset: -1.25rem;
    z-index: -1;
    border-radius: 3.5rem;
    opacity: 0.6;
    filter: blur(1.75rem);
    background: radial-gradient(58% 48% at 28% 12%, rgba(0, 194, 255, 0.24), transparent 60%), radial-gradient(58% 48% at 76% 30%, rgba(181, 33, 233, 0.26), transparent 62%);
  }
  .mk-island {
    position: absolute;
    top: 1.1875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.375rem;
    height: 1.5625rem;
    border-radius: 0.8125rem;
    background: #000;
    z-index: 6;
  }
  .mk-pscreen {
    position: relative;
    border-radius: 2.1875rem;
    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: 2.1875rem;
    mix-blend-mode: screen;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 22%, transparent 80%, rgba(255, 255, 255, 0.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: 0.5rem 1.125rem 0.125rem;
    font: 700 0.6875rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    color: #e8e8f0;
  }
  .mk-status .mk-sig {
    display: inline-flex;
    gap: 0.3125rem;
    opacity: 0.9;
  }
  .mk-status .mk-i {
    width: 0.8125rem;
    height: 0.6875rem;
  }
  .mk-phdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.5rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
  }
  .mk-kick {
    font: 800 0.53125rem/1 var(--font-display);
    letter-spacing: 0.12em;
  }
  .mk-h1 {
    font: 800 1rem/1.1 var(--font-display);
    color: #fff;
    margin-top: 0.125rem;
  }
  .mk-sub {
    font:
      500 0.625rem/1.2 "Inter",
      sans-serif;
    color: #8a8a9a;
    margin-top: 0.125rem;
  }
  .mk-goal {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font: 700 0.65625rem/1 "Inter";
    color: #cbb8ff;
    background: rgba(124, 92, 252, 0.12);
    border: 0.0625rem solid rgba(124, 92, 252, 0.3);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.5625rem;
    white-space: nowrap;
  }
  .mk-goal .mk-i {
    width: 0.6875rem;
    height: 0.6875rem;
  }
  .mk-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.1875rem;
    padding: 0.5625rem 0.75rem 0.3125rem;
  }
  .mk-d {
    position: relative;
    text-align: center;
    padding: 0.3125rem 0 0.375rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid transparent;
  }
  .mk-d .wd {
    font: 700 0.5rem/1 "Inter";
    color: #55556a;
  }
  .mk-d .nm {
    font: 800 0.8125rem/1 var(--font-display);
    color: #fff;
    margin-top: 0.1875rem;
  }
  .mk-d.off .nm {
    color: #3a3a45;
  }
  .mk-d.sel {
    border-color: rgba(124, 92, 252, 0.65);
    background: rgba(124, 92, 252, 0.14);
  }
  .mk-d.sel .nm {
    color: #cbb8ff;
  }
  .mk-d.prep::after {
    content: "";
    position: absolute;
    bottom: 0.1875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  }
  .mk-daylbl {
    padding: 0.125rem 0.875rem 0.5rem;
    font: 800 0.75rem/1 var(--font-display);
    color: #fff;
  }
  .mk-daylbl span {
    font-weight: 500;
    color: #8a8a9a;
    font-family: "Inter";
  }
  .mk-nutri {
    margin: 0 0.8125rem;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(124, 92, 252, 0.3);
    border-radius: 0.875rem;
    padding: 0.8125rem 0.75rem;
    display: flex;
    gap: 0.6875rem;
    align-items: center;
  }
  .mk-ring {
    position: relative;
    width: 4.375rem;
    height: 4.375rem;
    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 1.125rem/1 var(--font-display);
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .mk-ringc span {
    font: 500 0.53125rem/1 "Inter";
    color: #8a8a9a;
    margin-top: 0.125rem;
  }
  .mk-macros {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
  }
  .mk-mac .mk-mrow {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
  }
  .mk-mac .l {
    font: 500 0.65625rem/1.1 "Inter";
    color: #8a8a9a;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .mk-mac .v {
    font: 700 0.65625rem/1.1 "Inter";
    color: #e8e8f0;
    white-space: nowrap;
    flex: none;
  }
  .mk-bar {
    height: 0.25rem;
    border-radius: 0.1875rem;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 0.25rem;
    overflow: hidden;
  }
  .mk-bar i {
    display: block;
    height: 100%;
    border-radius: 0.1875rem;
  }
  .mk-mac.sub {
    margin-left: 0.8125rem;
    border-left: 0.0625rem solid rgba(255, 255, 255, 0.1);
    padding-left: 0.5rem;
  }
  .mk-mac.sub .l,
  .mk-mac.sub .v {
    font-size: 0.59375rem;
  }
  .mk-mac.sub .mk-bar {
    height: 0.1875rem;
  }
  .mk-coach {
    margin: 0.6875rem 0.8125rem 0;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-left: 0.1875rem solid var(--prep);
    border-radius: 0.6875rem;
    padding: 0.625rem 0.75rem;
  }
  .mk-cnh {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
  }
  .mk-av {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 0.5625rem/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 0.65625rem/1 var(--font-display);
    color: #f3c39a;
    flex: 1;
  }
  .mk-cntag {
    font: 800 0.5rem/1 var(--font-display);
    letter-spacing: 0.05em;
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.14);
    border-radius: 0.3125rem;
    padding: 0.1875rem 0.375rem;
  }
  .mk-coach p {
    margin: 0.4375rem 0 0;
    font: 400 0.71875rem/1.5 "Inter";
    color: #d7d7e2;
  }
  .mk-cnbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.5625rem;
    font: 700 0.625rem/1 "Inter";
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.13);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
  }
  .mk-cnbtn .mk-i {
    width: 0.6875rem;
    height: 0.6875rem;
  }
  .mk-seclbl {
    padding: 0.75rem 0.875rem 0.3125rem;
    font: 800 0.5625rem/1 var(--font-display);
    letter-spacing: 0.06em;
    color: #55556a;
  }
  .mk-meal {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin: 0 0.8125rem 0.4375rem;
    padding: 0.5625rem 0.625rem;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.6875rem;
  }
  .mk-chk {
    width: 1.1875rem;
    height: 1.1875rem;
    border-radius: 50%;
    border: 0.09375rem solid rgba(255, 255, 255, 0.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: 0.6875rem;
    height: 0.6875rem;
    stroke: #06281a;
    stroke-width: 2.6;
  }
  .mk-meal .mt {
    font: 700 0.5625rem/1 "Inter";
    letter-spacing: 0.04em;
    color: #8a8a9a;
    text-transform: uppercase;
  }
  .mk-meal .mn {
    font: 600 0.84375rem/1.25 "Inter";
    color: #e8e8f0;
    margin-top: 0.125rem;
  }
  .mk-meal.done .mn {
    color: #55556a;
    text-decoration: line-through;
  }
  .mk-meal .mkcal {
    font: 500 0.625rem/1 "Inter";
    color: #8a8a9a;
    margin-top: 0.1875rem;
    font-variant-numeric: tabular-nums;
  }
  .mk-meal .mbody {
    flex: 1;
    min-width: 0;
  }
  .mk-prep {
    font: 800 0.46875rem/1 var(--font-display);
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.14);
    border-radius: 0.25rem;
    padding: 0.125rem 0.3125rem;
    margin-left: 0.375rem;
  }
  .mk-tab {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5rem 0.375rem 0.875rem;
    background: rgba(13, 17, 23, 0.94);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
  }
  .mk-tab a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    font: 600 0.5625rem/1 "Inter";
    color: #5b5b68;
  }
  .mk-tab a .mk-i {
    width: 1.125rem;
    height: 1.125rem;
  }
  .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: 0.625rem 0.75rem;
  }
  .mk-ring {
    width: 3.875rem;
    height: 3.875rem;
  }
  .mk-ring svg {
    width: 3.875rem;
    height: 3.875rem;
  }
  .mk-ringc b {
    font-size: 1rem;
  }
  .mk-week {
    padding: 0.375rem 0.75rem 0.1875rem;
  }
  .mk-phdr {
    padding: 0.375rem 0.875rem 0.375rem;
  }
  .mk-status {
    padding: 0.375rem 1.125rem 0.125rem;
  }
  .mk-seclbl {
    padding: 0.5625rem 0.875rem 0.25rem;
  }
  .mk-coach {
    padding: 0.5625rem 0.75rem;
  }
  .mk-coach p {
    margin-top: 0.375rem;
  }
  .mk-cnbtn {
    margin-top: 0.4375rem;
  }
  .mk-meal {
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.375rem;
  }
  .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: 1100px) {
    :root {
      --phone: 40rem;
    }
    .shead {
      max-width: 52ch;
    }
    .lede {
      max-width: 44ch;
    }
    .hero .title {
      font-size: clamp(2.125rem, 5.2vw, 2.875rem);
    }
    .hero .sub {
      font-size: 0.96875rem;
      max-width: 46ch;
    }
    .searchbar {
      max-width: 35rem;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .planintro {
      max-width: 33.75rem;
    }
    .grid3 {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.875rem;
    }
    .step + .step {
      border-top: none;
    }
    .steps {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
    }
    .steps .step:nth-child(n + 3) {
      border-top: 0.0625rem solid var(--hairline);
    }
    .vs-price {
      max-width: 40rem;
      margin-left: auto;
      margin-right: auto;
    }
    .det-tabs {
      max-width: 28.75rem;
    }
    .qb .in {
      max-width: 58ch;
    }
    .frow.stack {
      flex-direction: row;
      gap: 0.75rem;
    }
    /* newsletter: formular pe orizontală — pattern-ul clasic de desktop */
    .wait .row {
      flex-direction: row;
      gap: 0.625rem;
    }
    .wait .row input[type="email"] {
      flex: 1;
      min-width: 0;
    }
    .wait .row .btn {
      width: auto;
      flex-shrink: 0;
      padding: 0 1.875rem;
    }
  }
  /* ===== 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(-0.125rem);
      border-color: rgba(var(--accent-rgb), 0.35);
    }
    .founder:hover .go {
      color: var(--accent-text);
      transform: translateX(0.1875rem);
    }
    .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(0.1875rem);
    }
    .qh:hover {
      background: rgba(255, 255, 255, 0.03);
    }
    .qh:hover .pm {
      background: rgba(var(--accent-rgb), 0.18);
    }
    .faq-more a:hover {
      color: #fff;
    }
    .plan-switch .plan-trigger:not([data-active]):hover {
      opacity: 0.95;
      transform: scale(0.96);
    }
    .navmenu .mi a:hover {
      color: var(--accent-text);
    }
    .navmenu .nav-cta:hover {
      color: #fff;
      background: rgba(var(--accent-rgb), 0.08);
    }
    .sb-go:hover {
      transform: scale(1.05);
    }
    .topnav .nav-auth:hover {
      background: rgba(var(--accent-rgb), 0.08);
    }
  }
  @media (min-width: 1100px) {
    .pcard.on {
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
      align-items: stretch;
    }
    .pcard .media {
      padding: 0.875rem 0 0.875rem 0.875rem;
      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: 1.125rem 1.375rem;
    }
    .pcard .pdesc {
      max-width: none;
    }
  }
  @media (min-width: 1100px) {
    :root {
      --hdr: 4.125rem;
      --t-h2: 1.875rem;
      --t-h3: 1.375rem;
    }
    .shead {
      max-width: 64ch;
    }
    /* topbar: meniul original inline (underline gradient la hover) + Autentificare border-gradient */
    .topbar {
      padding: 0.625rem clamp(1.5rem, 4vw, 3rem);
    }
    .burger,
    .navmenu {
      display: none;
    }
    .topnav {
      display: flex;
      align-items: center;
      gap: clamp(1.375rem, 3vw, 2.75rem);
    }
    .topnav a {
      position: relative;
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--fg-2);
      padding: 0.375rem 0.125rem;
      transition: color var(--dur-fast);
    }
    .topnav a:hover {
      color: #fff;
    }
    /* Dennis Patch 5-10-26: fără .nav-go — butonul-pastilă nu primește linia de sub link (la ieșirea cursorului
       se strângea spre stânga). Regula „II" de mai jos (11 sept) nu prindea: `.topnav .nav-go::before` are
       specificitatea (0,2,1), mai mică decât (0,2,2) a acesteia. */
    .topnav a:not(.nav-auth):not(.nav-go)::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 0.0625rem;
      width: 100%;
      background: var(--grad);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease-out);
    }
    .topnav a:not(.nav-auth):not(.nav-go):hover::before {
      transform: none;
    }
    .topnav .nav-auth {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--fg);
      padding: 0.625rem 1.375rem;
      border-radius: 62.4375rem;
    }
    .topnav .nav-auth::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 0.09375rem;
      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: 1.125rem;
      height: 1.125rem;
    }
    /* 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: 0.9375rem;
      color: #fff;
      padding: 0.6875rem 1.5rem;
      border-radius: 62.4375rem;
      background: var(--grad);
      background-size: 150% 100%;
      animation: gradientShift 8s ease-in-out infinite;
      box-shadow: 0 0.5rem 1.375rem -0.5rem rgba(124, 92, 252, 0.55);
      transition: box-shadow var(--dur-base) var(--ease-out);
    }
    .topnav .nav-go:hover {
      color: #fff;
      box-shadow: 0 0.625rem 1.875rem -0.5rem rgba(124, 92, 252, 0.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 1.625rem;
    }
    .hero::before {
      inset: -22% -12% 26%;
      background: radial-gradient(42% 56% at 20% 26%, rgba(0, 194, 255, 0.15), transparent 62%), radial-gradient(46% 58% at 82% 22%, rgba(181, 33, 233, 0.17), transparent 64%);
    }
    .hero .wrap {
      max-width: 73.75rem;
      display: grid;
      column-gap: 1.875rem;
      grid-template-columns: minmax(0, 1fr) 3.625rem minmax(0, 27.25rem);
      grid-template-rows: auto auto;
      grid-template-areas: "t sau card" "s sau card";
      align-content: center;
      min-height: calc(100vh - var(--hdr) - 1.625rem);
      min-height: calc(100svh - var(--hdr) - 1.625rem);
    }
    .hero .tblock {
      grid-area: t;
      align-self: end;
    }
    .hero .searchbar {
      grid-area: s;
      align-self: start;
      margin: 1.875rem 0 0;
      max-width: 35rem;
    }
    .hero .saudiv {
      grid-area: sau;
      align-self: stretch;
      margin: 0;
      min-height: 20rem;
    }
    .hero .saudiv::before {
      left: 50%;
      right: auto;
      top: 4%;
      bottom: 4%;
      width: 0.0625rem;
      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: 1.375rem 1.625rem 1.25rem;
      box-shadow:
        var(--sh-2),
        var(--inset-hi),
        0 2.75rem 6.875rem -2.875rem rgba(124, 92, 252, 0.42);
      transition:
        transform 0.35s var(--ease-emph),
        box-shadow 0.35s var(--ease-out);
    }
    .hero .planintro:hover {
      transform: translateY(-0.25rem);
      box-shadow:
        var(--sh-2),
        var(--inset-hi),
        0 3.375rem 8.125rem -2.875rem rgba(124, 92, 252, 0.6);
    }
    .hero .title {
      font-size: 3.5rem;
      line-height: 1.01;
    }
    .hero .title .xwrap {
      margin: 0.5rem 0;
    }
    .hero .title::after {
      left: 38%;
      width: 105%;
    }
    .hero .sub {
      margin: 1rem 0 0;
      font-size: 1.03125rem;
      max-width: 44ch;
    }
    .free-wrap {
      text-align: left;
    }
    .hero .trained {
      justify-content: flex-start;
    }
    .hero .planintro h2 {
      font-size: 1.3125rem;
    }
    .hero .planintro h2 .big {
      font-size: 1.875rem;
    }

    /* PLANS: secțiunea aterizează fold-perfect și pe desktop */
    #program {
      padding: 1.625rem 0 1.875rem;
    }
    #program .wrap {
      max-width: 61.25rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: calc(100vh - var(--hdr) - 3.5rem);
      min-height: calc(100svh - var(--hdr) - 3.5rem);
    }
    #program .shead {
      margin-bottom: 0.875rem;
    }
    #program .goal-hint {
      margin-bottom: 0.625rem;
    }
    .plan-switch {
      gap: 0.75rem;
    }
    .plan-switch .plan-trigger-cnt {
      max-width: 8.5rem;
    }
    .plan-cards {
      margin-top: 0.875rem;
    }
    .pcard .media {
      padding: 1.125rem 0 1.125rem 1.125rem;
    }
    .pcard .body {
      padding: 1.5rem 1.875rem;
    }
    /* 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: 63.75rem;
    }
    .grid3 {
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    .steps {
      grid-template-columns: repeat(4, 1fr);
      column-gap: 1.625rem;
    }
    .steps .step:nth-child(n + 3) {
      border-top: none;
    }
    .steps .step {
      flex-direction: column;
      gap: 0.75rem;
      padding: 0.375rem 0;
    }
    .steps .step + .step {
      border-left: 0.0625rem solid var(--hairline);
      padding-left: 1.625rem;
    }
    .vs-table {
      max-width: 42.5rem;
      margin-left: auto;
      margin-right: auto;
    }

    /* DE CE / FINAL */
    #dece .wrap {
      max-width: 63.75rem;
    }
    .founder {
      max-width: 41.25rem;
    }
    .finalcta {
      max-width: 45rem;
    }

    /* SHOWCASE — textul la stânga, telefonul la dreapta */
    #showcase .wrap {
      max-width: 58.75rem;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 20rem;
      align-items: center;
      column-gap: 3.5rem;
    }
    #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: 0.8125rem;
      margin: 1.5rem 0 0;
      padding: 0;
      list-style: none;
    }
    #showcase .mk-points li {
      display: flex;
      gap: 0.6875rem;
      align-items: flex-start;
      font-size: 0.9375rem;
      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: 62.5rem;
    }
    .wait {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
      column-gap: 4.5rem;
      align-items: center;
      text-align: left;
    }
    .wait .lede {
      margin-left: 0;
    }
    .wait h2 {
      margin-top: 0.5rem;
    }
    .nl-side .nl-by {
      margin-top: 0;
    }
    .nl-side .nl-adv {
      margin-top: var(--s5);
    }

    section {
      padding: 4rem 0;
    }
    .buybar {
      display: none;
    }
    footer {
      padding-bottom: 2.75rem;
    }
  }

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

/* ===== MOBIL-X (nutritie-mobil-x) — activ la <1100px (v1: <720px) ===== */
@media (max-width: 1099.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, 0.045), rgba(255, 255, 255, 0.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: 1.9375rem;
    --t-h2: 1.5625rem;
    --t-h3: 1.25rem;
    --t-lg: 1.125rem;
    --t-base: 1rem;
    --t-sm: 0.90625rem;
    --t-xs: 0.8125rem;
    --t-2xs: 0.71875rem;
    --lh-tight: 1.05;
    --lh-snug: 1.14;
    --lh-h3: 1.25;
    --lh-base: 1.55;
    --gutter: 1rem;
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-xslow: 640ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-press: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-emph: cubic-bezier(0.16, 1, 0.3, 1);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.12);
    --sh-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.45);
    --sh-2: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.55);
    --sh-3: 0 1.25rem 3.125rem -0.75rem rgba(0, 0, 0, 0.65);
    --inset-hi: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.06);
    --r-sm: 0.625rem;
    --r-md: 0.875rem;
    --r-lg: 1.125rem;
    --r-xl: 1.375rem;
    --phone: 28.75rem;
  }
  * {
    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, 0.09), transparent 52%), radial-gradient(100% 52% at 3% 0%, rgba(0, 194, 255, 0.07), transparent 48%), radial-gradient(80% 50% at 50% 120%, rgba(124, 92, 252, 0.05), transparent 60%), var(--bg);
    overflow-x: hidden;
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-size: 8.75rem;
    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: 2.875rem 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: -0.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: 0.5rem;
    top: -3rem;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 0.625rem 1rem;
    border-radius: 0.625rem;
    transition: top var(--dur-base) var(--ease-out);
  }
  .skip:focus {
    top: 0.5rem;
  }
  h3 {
    letter-spacing: -0.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: 0.06em;
  }
  .kick {
    font-size: var(--t-2xs);
    letter-spacing: 0.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: -0.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: 0.5rem 0 0;
  }
  .shead p {
    margin-top: 0.625rem;
  }
  .sep {
    height: 0.0625rem;
    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: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    margin: -0.0625rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  :focus-visible {
    outline: 0.125rem solid var(--focus);
    outline-offset: 0.125rem;
    border-radius: 0.5rem;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }

  .free-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--t-2xs);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ok-text);
    background: rgba(var(--ok-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--ok-rgb), 0.3);
    border-radius: 62.4375rem;
    padding: 0.375rem 0.8125rem;
  }
  .dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.45);
    animation: livePulse 2.2s ease-out infinite;
  }
  @keyframes livePulse {
    0% {
      box-shadow: 0 0 0 0 rgba(var(--ok-rgb), 0.45);
    }
    70%,
    100% {
      box-shadow: 0 0 0 0.4375rem rgba(var(--ok-rgb), 0);
    }
  }
  .av {
    background: var(--grad);
    border-radius: 50%;
    padding: 0.125rem;
    display: inline-flex;
    flex-shrink: 0;
  }
  .av img {
    border-radius: 50%;
    border: 0.125rem solid var(--bg);
    display: block;
    object-fit: cover;
  }
  .av-sm img {
    width: 1.75rem;
    height: 1.75rem;
  }
  .av-lg img {
    width: 3.25rem;
    height: 3.25rem;
    box-shadow: 0 0 0 0.0625rem rgba(0, 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: 0.5rem;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    font-size: var(--t-base);
    border-radius: var(--r-md);
    padding: 0 1.375rem;
    min-height: 3.25rem;
    width: 100%;
    color: #fff;
    background: var(--grad);
    background-size: 150% 100%;
    animation: gradientShift 8s ease-in-out infinite;
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.75rem 1.75rem -0.375rem rgba(124, 92, 252, 0.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(0.97);
  }
  .btn .two {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }
  .btn .two small {
    font-size: var(--t-2xs);
    font-weight: 600;
    opacity: 0.88;
  }
  .btn-max {
    max-width: 21.25rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }
  @media (hover: hover) {
    .btn:hover {
      box-shadow:
        0 0.25rem 0.75rem rgba(0, 0, 0, 0.35),
        0 1rem 2.5rem -0.375rem rgba(124, 92, 252, 0.55),
        var(--inset-hi);
    }
  }

  /* segmented control (radiogroup / tablist) */
  .seg {
    position: relative;
    display: flex;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-md);
    padding: 0.25rem;
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
  }
  .seg .thumb {
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 0;
    height: calc(100% - 0.5rem);
    border-radius: var(--r-sm);
    background: #1b2230;
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07),
      0 0.125rem 0.375rem rgba(0, 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: 3rem;
    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: 0.375rem 0.25rem;
    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(0.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: 0.4375rem;
  }
  .plan-switch .plan-trigger-cnt {
    position: relative;
    flex: 1;
    max-width: 6.625rem;
  }
  .plan-switch .plan-trigger-cnt::before {
    content: "";
    position: absolute;
    inset: -0.125rem;
    background: var(--grad);
    z-index: -1;
    filter: blur(0.5625rem);
    opacity: 0;
    transform: scale(0.4);
    transition:
      opacity 750ms var(--ease-out),
      transform 750ms var(--ease-out);
    border-radius: 3rem;
    will-change: transform;
  }
  .plan-switch .plan-trigger-cnt:has(.plan-trigger[data-active])::before {
    transform: none;
    opacity: 0.5;
  }
  .plan-switch .plan-trigger {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition: 500ms;
    border-radius: 3rem;
    border: 0.0625rem solid transparent;
    transform: scale(0.9);
    opacity: 0.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(-1.25rem) 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(1.125rem) scale(0.99);
    transition:
      opacity 0.55s var(--ease-emph),
      transform 0.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: 0.4375rem max(var(--gutter), env(safe-area-inset-left)) 0.4375rem max(var(--gutter), env(safe-area-inset-right));
    /* înălțimea FIXATĂ la --hdr (nu lăsată să iasă din conținut): hero-ul de
       dedesubt se trage în sus cu exact --hdr ca glow-ul lui să curgă sub bara
       transparentă — dacă banda și variabila ar diverge cu câțiva px, fâșia de
       fundal gol ar reapărea exact în diferență (vezi nota de la .hero) */
    height: var(--hdr);
    background: transparent;
    border: 0.0625rem solid transparent;
    transition:
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base),
      transform var(--dur-base) var(--ease-out);
  }
  .topbar.stuck {
    /* Cerut (21 aug): negrul plin (--bg opac) era prea intens la reapariția
       barei — redus cu ~28% (alfa 0.72). Blur-ul dedesubt e obligatoriu la
       fundal semitransparent: fără el, textul care trece pe sub bară s-ar
       citi printre litere și meniul ar deveni ilizibil. E același limbaj de
       sticlă folosit deja în chat (bară/antet). */
    background: rgba(8, 11, 18, 0.72);
    -webkit-backdrop-filter: blur(0.625rem) saturate(1.15);
    backdrop-filter: blur(0.625rem) saturate(1.15);
    border-color: var(--hairline);
  }
  .topbar.hide {
    transform: translateY(-100%);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    height: 2.75rem;
    -webkit-tap-highlight-color: transparent;
  }
  .brand-logo {
    height: 2.3125rem;
    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: 2.75rem;
    height: 2.75rem;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: -0.5rem;
    -webkit-tap-highlight-color: transparent;
    color: var(--fg);
    transition: transform 0.5s var(--ease-emph);
  }
  .burger span {
    display: block;
    width: 1.875rem;
    height: 0.125rem;
    background: currentColor;
    transform-origin: center center;
    transition: transform 0.5s var(--ease-emph);
  }
  .burger span + span {
    margin-top: 0.3125rem;
  }
  .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, -0.4375rem, 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: 1.125rem;
    padding: calc(2 * var(--hdr)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.38s var(--ease-out),
      visibility 0s linear 0.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 0.55s var(--ease-out);
  }
  .navmenu.open::before {
    opacity: 0.25;
    transition-delay: 0.08s;
  }
  .navmenu > * {
    position: relative;
    z-index: 3;
  }
  .navmenu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.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: 1.15625rem;
    letter-spacing: -0.01em;
    color: var(--fg);
    padding: 0.25rem 0.625rem;
    text-align: center;
    will-change: transform;
    transform: translateY(110%);
    opacity: 0;
    transition:
      transform 0.6s var(--ease-emph),
      opacity 0.4s var(--ease-out);
  }
  .navmenu.open .mi a {
    transform: none;
    opacity: 1;
  }
  .navmenu.open .mi:nth-child(1) a {
    transition-delay: 0.05s;
  }
  .navmenu.open .mi:nth-child(2) a {
    transition-delay: 0.11s;
  }
  .navmenu.open .mi:nth-child(3) a {
    transition-delay: 0.17s;
  }
  /* la închidere: totul se retrage rapid, fără stagger */
  .navmenu:not(.open) .mi a {
    transition:
      transform 0.18s var(--ease-out),
      opacity 0.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: 0.5rem;
    margin-top: 0.875rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--fg);
    padding: 0.875rem 1.75rem;
    border-radius: 62.4375rem;
    opacity: 0;
    transform: translateY(0.875rem);
    transition:
      transform 0.55s var(--ease-emph),
      opacity 0.4s var(--ease-out);
  }
  .navmenu.open .nav-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.24s;
  }
  .navmenu:not(.open) .nav-cta {
    transition:
      transform 0.18s var(--ease-out),
      opacity 0.15s var(--ease-out);
  }
  .navmenu .nav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.09375rem;
    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: 1.1875rem;
    height: 1.1875rem;
  }
  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: 3.75rem;
  }
  .hero {
    /* BANDA ÎNCHISĂ DE SUB TOPBAR (raportat 21 aug): glow-ul din `.hero::before`
       e desenat să iasă în sus (`inset: -12% …`) tocmai ca să curgă sub bara
       transparentă, dar `overflow: hidden` (necesar pentru marginile laterale
       de -22%, altfel ar da scroll orizontal) îl tăia fix la muchia hero-ului —
       deasupra rămânea fundalul gol al paginii, vizibil mai închis.
       Reparația nu scoate clipul: TRAGE hero-ul sub topbar cu exact înălțimea
       barei (--hdr) și compensează prin padding — cutia hero-ului (și clipul ei)
       începe acum de la y=0, deci glow-ul umple și banda barei, iar conținutul
       rămâne exact unde era (fold-ul de pe telefon e neatins: -60 + 60 = 0).
       Bara stă deasupra (z-index 70, fundal transparent → .stuck la scroll). */
    margin-top: calc(-1 * var(--hdr));
    padding: calc(0.625rem + var(--hdr)) 0 0.875rem;
    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) - 1.5rem);
      min-height: calc(100svh - var(--hdr) - 1.5rem);
    }
    .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, 0.15), transparent 60%), radial-gradient(54% 60% at 78% 12%, rgba(181, 33, 233, 0.17), transparent 62%);
    animation: heroDrift 17s ease-in-out infinite alternate;
  }
  @keyframes heroDrift {
    from {
      transform: translate3d(-0.5rem, 0, 0) scale(1);
    }
    to {
      transform: translate3d(0.5rem, 0.375rem, 0) scale(1.04);
    }
  }
  .hero .wrap {
    position: relative;
    z-index: 2;
  }
  .hero .title {
    font-size: clamp(1.625rem, 8.9vw, 2.375rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 850;
    margin-top: 0.125rem;
    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: 0.58em;
    height: 0.58em;
    margin: 0.8125rem 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, 0.62), rgba(0, 194, 255, 0.28) 46%, transparent 72%);
    filter: blur(0.4375rem);
  }
  .hero .title .x {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 0.3125rem rgba(0, 194, 255, 0.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 0.6s var(--ease-emph) 0s both;
  }
  .hero.play .title .xwrap {
    animation: xIn 0.5s var(--ease-press) 0.18s both;
  }
  .hero.play .title .x {
    animation:
      xSpin 1s var(--ease-inout) 0.5s both,
      xBreathe 5.6s ease-in-out 3s infinite;
  }
  .hero.play .title .ln2 {
    animation:
      heroRise 0.6s var(--ease-emph) 0.32s both,
      gradFlow 9s linear 1.4s infinite;
  }
  @keyframes heroRise {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes xIn {
    0% {
      opacity: 0;
      transform: scale(0.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 0.55s var(--ease-emph) 0.55s both;
  }
  .hero.play .free-wrap {
    animation: heroRise 0.45s var(--ease-emph) 0.72s both;
  }
  .hero.play .sb-field {
    animation: heroRise 0.55s var(--ease-emph) 0.84s both;
  }
  .hero.play .trained {
    animation: emergeDown 0.55s var(--ease-emph) 1.02s both;
  }
  @keyframes emergeUp {
    from {
      opacity: 0;
      transform: translateY(1.375rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes emergeDown {
    from {
      opacity: 0;
      transform: translateY(-1.25rem);
    }
    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 0.9s var(--ease-out) 1.39s both,
      auraBreathe 4.6s ease-in-out 3s infinite;
  }
  @keyframes auraFlash {
    0% {
      opacity: 0.1;
    }
    45% {
      opacity: 0.5;
    }
    100% {
      opacity: 0.18;
    }
  }
  @keyframes auraBreathe {
    0%,
    100% {
      opacity: 0.16;
    }
    50% {
      opacity: 0.3;
    }
  }
  /* „Sau" apare + clipește scurt */
  .hero.play .saudiv {
    animation: heroRise 0.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), 0.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 0.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(1.625rem) scale(0.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 0.25rem 1.375rem rgba(124, 92, 252, 0.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, 0.2), transparent 70%);
    filter: blur(0.875rem);
    pointer-events: none;
  }
  .hero.play .title::after {
    animation: titleAura 6.5s ease-in-out 1.6s infinite;
  }
  @keyframes titleAura {
    0%,
    100% {
      opacity: 0.6;
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.06);
    }
  }
  .hero .sub {
    margin: 0.625rem auto 0;
    max-width: 42ch;
    font-size: 0.90625rem;
  }
  .searchbar {
    margin: 0.875rem auto 0;
  }
  .free-wrap {
    text-align: center;
    margin-bottom: 0.4375rem;
  }
  .sb-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--panel);
    border: 0.0625rem solid var(--card-bd);
    border-radius: 62.4375rem;
    padding: 0.375rem 0.375rem 0.375rem 1.125rem;
    z-index: 1;
    min-height: 3.25rem;
    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: -0.125rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    filter: blur(0.75rem);
    opacity: 0.16;
    z-index: -1;
    will-change: opacity;
    backface-visibility: hidden;
  }
  .sb-pill::after {
    content: "";
    position: absolute;
    inset: -0.125rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    filter: blur(0.75rem);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .sb-pill:focus-within {
    border-color: rgba(var(--accent-rgb), 0.4);
  }
  .sb-pill:focus-within::after {
    opacity: 0.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: 0.625rem 0.375rem;
  }
  .sb-pill input::placeholder {
    color: var(--dim);
  }
  .sb-go {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    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 0.0625rem 0 rgba(255, 255, 255, 0.25),
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
    transition: transform var(--dur-fast) var(--ease-press);
  }
  .sb-go .ico {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }
  .sb-go:active {
    transform: scale(0.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% + 0.5625rem);
    z-index: 30;
    text-align: left;
    padding: 0.375rem;
    background: var(--panel);
    border: 0.0625rem 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(-0.5rem) scale(0.985);
    transform-origin: top center;
    transition:
      opacity 0.2s var(--ease-out),
      transform 0.26s var(--ease-emph),
      visibility 0s 0.26s;
  }
  .sb-field.open .sb-sugs {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 0.22s var(--ease-out),
      transform 0.3s var(--ease-emph);
  }
  .sug-h {
    font-size: var(--t-2xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 0.375rem 0.75rem 0.3125rem;
  }
  .sug {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
    text-align: left;
    min-height: 2.875rem;
    background: none;
    border: none;
    border-radius: 0.75rem;
    padding: 0 0.75rem;
    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: 0.9375rem;
    height: 0.9375rem;
    color: var(--dim);
    stroke-width: 2;
    opacity: 0.85;
  }
  .sug span {
    flex: 1;
    min-width: 0;
  }
  .sug:hover,
  .sug:focus-visible {
    background: rgba(255, 255, 255, 0.05);
    outline: none;
  }
  .sug:hover .sq,
  .sug:focus-visible .sq {
    color: var(--accent-text);
    opacity: 1;
  }
  .sug:active {
    background: rgba(var(--accent-rgb), 0.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: 0.5rem;
    margin-top: 0.625rem;
    color: var(--muted);
    line-height: 1.3;
  }
  .trained b {
    color: var(--fg);
    font-weight: 700;
  }
  .trained .av-sm img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .trained .tr-line {
    white-space: nowrap;
    font-size: 0.78125rem;
  }
  /* 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), 0.6);
    text-decoration-thickness: 0.0625rem;
    text-underline-offset: 0.1875rem;
    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: 0.875rem auto 0;
    position: relative;
  }
  .saudiv::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.0625rem;
    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: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
    background: var(--bg);
    padding: 0.3125rem 0.875rem;
    border: 0.0625rem solid var(--hairline);
    border-radius: 62.4375rem;
  }

  /* 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: 0.8125rem auto 0;
    text-align: center;
    background: var(--card-fill);
    border: 0.0625rem solid transparent;
    border-radius: var(--r-xl);
    padding: 1.125rem 1.375rem 1.0625rem;
    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, 0.11), transparent 60%), radial-gradient(120% 60% at 50% 118%, rgba(0, 194, 255, 0.07), transparent 62%);
  }
  /* inel gradient pe contur (limbajul de brand: cta--border-gradient) */
  .planintro::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    pointer-events: none;
    opacity: 0.55;
    background: linear-gradient(150deg, rgba(0, 194, 255, 0.5), rgba(124, 92, 252, 0.22) 42%, rgba(181, 33, 233, 0.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: 0.1875rem;
    margin: 1rem auto 0;
    width: 44%;
    border-radius: 0.1875rem;
    background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.5), rgba(181, 33, 233, 0.5), transparent);
    opacity: 0.65;
  }
  .planintro .pi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-text);
    background: rgba(var(--accent-rgb), 0.14);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.3);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.8125rem 0.3125rem 0.625rem;
    margin-bottom: 0.625rem;
  }
  .planintro .pi-badge .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .planintro h2 {
    font-size: 1.25rem;
    line-height: 1.12;
    color: #fff;
    letter-spacing: -0.028em;
  }
  .planintro h2 .big {
    display: block;
    font-size: 1.6875rem;
    margin-top: 0.1875rem;
    padding-bottom: 0.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 0.25rem 1.125rem rgba(124, 92, 252, 0.35));
  }
  .planintro .nopdf {
    margin: 0.5625rem auto 0;
    max-width: 36ch;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fg-2);
  }
  .planintro .nopdf b {
    color: #fff;
    font-weight: 800;
  }
  .planintro .btn {
    margin-top: 0.875rem;
    min-height: 3.25rem;
  }
  .planintro .price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-top: 0.75rem;
  }
  .planintro .price {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
  }
  .planintro .price b {
    font-size: 1.8125rem;
    font-weight: 850;
    letter-spacing: -0.03em;
    color: #fff;
  }
  .planintro .price span {
    font-size: 0.8125rem;
    color: var(--fg-2);
  }
  .planintro .risk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ok-text);
    background: rgba(var(--ok-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--ok-rgb), 0.28);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.6875rem;
  }
  .planintro .risk-chip .ico {
    width: 0.75rem;
    height: 0.75rem;
    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: 0.875rem 0 1rem;
  }
  #program .shead {
    margin-bottom: 0.5rem;
  }
  #program .goal-hint {
    margin-bottom: 0.375rem;
  }
  @media (max-width: 520px) {
    #program .wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: calc(100vh - var(--hdr) - 1.875rem);
      min-height: calc(100svh - var(--hdr) - 1.875rem);
    }
  }
  .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: 2.625rem;
    height: 2.625rem;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.25);
    color: var(--accent-text);
  }
  .ic .ico {
    width: 1.3125rem;
    height: 1.3125rem;
  }

  .plan-cards {
    position: relative;
    margin-top: 0.5rem;
  }
  .pcard {
    display: none;
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--card-solid);
    border: 0.0625rem 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 0.44s var(--ease-emph) both;
  }
  .pcard.on.from-l {
    animation-name: cardInL;
  }
  .pcard.out {
    animation: cardOutL 0.18s var(--ease-out) both;
  }
  .pcard.out.to-r {
    animation-name: cardOutR;
  }
  @keyframes cardInR {
    from {
      opacity: 0;
      transform: translateX(1.875rem) translateY(0.25rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes cardInL {
    from {
      opacity: 0;
      transform: translateX(-1.875rem) translateY(0.25rem) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes cardOutL {
    to {
      opacity: 0;
      transform: translateX(-1.5rem) scale(0.99);
    }
  }
  @keyframes cardOutR {
    to {
      opacity: 0;
      transform: translateX(1.5rem) scale(0.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), 0.45);
    box-shadow:
      0 0 0 0.0625rem rgba(var(--pc), 0.26),
      0 0 2.375rem -0.75rem rgba(var(--pc), 0.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: 0.75rem 0.75rem 0;
    background: radial-gradient(130% 100% at 50% 0%, rgba(var(--pc), 0.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: 0.875rem;
    overflow: hidden;
    aspect-ratio: 880/560;
    box-shadow:
      0 1.125rem 2.5rem -0.875rem rgba(0, 0, 0, 0.55),
      0 0.1875rem 0.75rem rgba(0, 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 0.55s var(--ease-emph) both;
  }
  @keyframes covZoom {
    from {
      transform: scale(1.14);
    }
    to {
      transform: scale(1.075);
    }
  }
  .pcard .rib {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 3;
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--grad);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.75rem;
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25),
      0 0.25rem 0.875rem rgba(124, 92, 252, 0.35);
  }
  .pcard .body {
    padding: 0.75rem 1.125rem 0.6875rem;
  }
  .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: 0.5625rem 0 0;
  }
  .pcard li {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--fg-2);
    padding: 0.1875rem 0;
  }
  .ckdisc {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(var(--ok-rgb), 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.0625rem;
  }
  .ckdisc .ico {
    width: 0.75rem;
    height: 0.75rem;
    stroke: var(--ok);
    stroke-width: 2.4;
  }
  .pcard .priceline {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.5625rem;
    padding-top: 0.5625rem;
    border-top: 0.0625rem solid var(--hairline);
  }
  .pcard .priceline .big {
    font-size: 1.875rem;
    font-weight: 850;
    letter-spacing: -0.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: 0.3125rem;
  }
  .pcard .body .btn {
    margin-top: 0.625rem;
  }
  /* 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: 0.125rem;
  }
  .detlink {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 2.75rem;
    padding: 0.5625rem 0.375rem;
    font-size: var(--t-xs);
    color: var(--accent-text);
    border-bottom: 0.0625rem solid rgba(var(--accent-rgb), 0.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: 0.875rem;
    height: 0.875rem;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .detlink:active {
    transform: scale(0.97);
  }
  .detlink:active .ico {
    transform: translateX(0.1875rem);
  }

  /* feature / step / benefit */
  .grid3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .fcard {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-lg);
    padding: 1.125rem;
    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: 0.75rem;
  }
  .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: 0.375rem;
    line-height: 1.5;
    max-width: 34ch;
  }
  .fcard:active {
    transform: scale(0.99);
  }
  @media (hover: hover) {
    .fcard:hover {
      transform: translateY(-0.125rem);
      box-shadow: var(--sh-3), var(--inset-hi);
    }
  }
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
    padding: 0.875rem 0;
  }
  .step + .step {
    border-top: 0.0625rem solid var(--hairline);
  }
  .step .n {
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--r-sm);
    background: rgba(var(--accent-rgb), 0.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: 0.9375rem;
    font-weight: 700;
    color: #fff;
  }
  .step .d {
    font-size: var(--t-xs);
    color: var(--muted);
    margin-top: 0.1875rem;
    line-height: 1.5;
  }
  .step .free-pill {
    margin-top: 0.5rem;
  }

  /* ============ 3. FAQ ============ */
  .faq {
    max-width: var(--phone);
    margin: 0 auto;
  }
  .qi {
    border-bottom: 0.0625rem solid var(--hairline);
    border-radius: var(--r-sm);
  }
  .qi.open {
    background: rgba(255, 255, 255, 0.018);
  }
  .qh {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--fg);
    min-height: 3.5rem;
    padding: 0.875rem 0.75rem 0.875rem 0.875rem;
    touch-action: manipulation;
    transition: background var(--dur-fast);
  }
  .qh:active {
    background: rgba(255, 255, 255, 0.03);
  }
  .qh .q {
    flex: 1;
    font-size: var(--t-base);
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .qh .pm {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.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: 0.875rem;
    height: 0.875rem;
    stroke-width: 2.2;
  }
  .qi.open .qh .pm {
    transform: rotate(135deg);
    background: rgba(var(--accent-rgb), 0.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 0.75rem 1.25rem 0.875rem;
    transform: translateY(-0.25rem);
    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: 1.125rem;
    font-size: var(--t-xs);
    color: var(--muted);
  }
  .faq-more a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.375rem;
    color: var(--accent-text);
    font-weight: 700;
  }
  .faq-more a .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  /* ============ 4. CALCULATOR ============ */
  .calc {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-xl);
    padding: 1.375rem;
    box-shadow: var(--sh-2), var(--inset-hi);
  }
  .field {
    margin-bottom: 0.875rem;
  }
  .field > label {
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dim);
    font-weight: 700;
    display: block;
    margin-bottom: 0.375rem;
  }
  .field input {
    width: 100%;
    min-height: 3.25rem;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.875rem;
    color: #fff;
    font: inherit;
    font-size: var(--t-base);
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 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), 0.6);
    box-shadow:
      inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(var(--accent-rgb), 0.18);
  }
  .frow {
    display: flex;
    gap: 0.75rem;
  }
  .frow.stack {
    flex-direction: column;
    gap: 0;
  }
  .calc .btn {
    min-height: 3.375rem;
    margin-top: 0.125rem;
  }
  .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: 1.125rem;
  }
  .calc-res .pad {
    text-align: center;
    padding-top: 1.125rem;
    border-top: 0.0625rem solid var(--hairline);
  }
  .calc-res .kgwrap {
    filter: drop-shadow(0 0 1.875rem rgba(124, 92, 252, 0.25));
  }
  .calc-res .kg {
    display: inline-block;
    font-size: 4rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .calc-res .kg.snap {
    animation: kgSnap 320ms var(--ease-press);
  }
  @keyframes kgSnap {
    from {
      transform: scale(0.96);
    }
    to {
      transform: scale(1);
    }
  }
  .calc-res .ctx {
    font-size: var(--t-sm);
    color: var(--muted);
    margin: 0.625rem auto 1.125rem;
    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(0.5rem);
    transition:
      opacity var(--dur-base) var(--ease-out) 0.2s,
      transform var(--dur-base) var(--ease-out) 0.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: 0.625rem;
  }
  .wait .row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.125rem;
  }
  .wait input[type="email"] {
    min-height: 3.25rem;
    background: var(--bg-elev);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-sm);
    padding: 0.875rem;
    color: #fff;
    font: inherit;
    font-size: var(--t-base);
    box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 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), 0.6);
    box-shadow:
      inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(var(--accent-rgb), 0.18);
  }
  .wait .btn.sent {
    background: var(--ok);
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.75rem 1.75rem -0.375rem rgba(var(--ok-rgb), 0.4),
      var(--inset-hi);
    animation: sentPop var(--dur-base) var(--ease-press);
  }
  @keyframes sentPop {
    from {
      transform: scale(0.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 0.0625rem 0.125rem rgba(0, 0, 0, 0.3),
      0 0 0 0.1875rem rgba(255, 84, 112, 0.12);
    animation: shake 360ms ease-out;
  }
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    15% {
      transform: translateX(-0.5rem);
    }
    30% {
      transform: translateX(0.375rem);
    }
    45% {
      transform: translateX(-0.25rem);
    }
    60% {
      transform: translateX(0.125rem);
    }
    100% {
      transform: translateX(0);
    }
  }
  .wait .consent {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    min-height: 2.75rem;
    margin-top: 0.875rem;
    padding: 0.5rem 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: 1.3125rem;
    height: 1.3125rem;
    border-radius: 0.375rem;
    border: 0.09375rem solid var(--hairline-strong);
    background: var(--bg-elev);
    flex-shrink: 0;
    margin-top: 0.0625rem;
    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: 0.25rem;
    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 0.2s var(--ease-press);
  }
  @keyframes ckIn {
    from {
      transform: scale(0.4);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  .wait .consent a {
    color: var(--accent-text);
  }
  .wait .trust {
    margin-top: 0.875rem;
    font-size: var(--t-2xs);
    color: var(--dim);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }
  .wait .trust .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }
  .wait .field-err {
    margin: 0.5rem auto 0;
    max-width: 32.5rem;
    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: 0.875rem;
    margin-top: var(--s6);
  }
  .nl-by-txt {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--muted);
  }
  .nl-by-txt a {
    color: #fff;
    font-weight: 800;
  }
  .curved-text-image {
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    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: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.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: 0.875rem;
    text-align: left;
  }
  .nl-adv li {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--fg-2);
  }
  .nl-adv svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
  }
  @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 0.38s var(--ease-emph) both;
  }
  @keyframes panelIn {
    from {
      opacity: 0;
      transform: translateY(0.625rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .vs-price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .vp {
    border-radius: var(--r-lg);
    padding: 1.125rem 0.75rem;
    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: 0.0625rem solid rgba(var(--accent-rgb), 0.3);
    box-shadow:
      0 0 0 0.0625rem rgba(124, 92, 252, 0.12),
      var(--sh-2),
      var(--inset-hi);
  }
  .vp.them {
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
  }
  .vp .lbl {
    font-size: var(--t-2xs);
    color: var(--muted);
    font-weight: 700;
  }
  .vp .amt {
    font-size: 1.5rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.375rem 0 0.125rem;
  }
  .vp.them .amt {
    color: var(--muted);
  }
  .vp .note {
    font-size: var(--t-2xs);
    color: var(--dim);
    line-height: 1.4;
  }
  .vp .save {
    margin-top: 0.625rem;
  }
  .vs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-xs);
    table-layout: fixed;
  }
  .vs-table th,
  .vs-table td {
    padding: 0.6875rem 0.5rem;
    border-bottom: 0.0625rem 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: 0.65625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 800;
  }
  .vs-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
  }
  .vs-table td.feat {
    line-height: 1.35;
    color: var(--fg-2);
  }
  .vs-table .uscol {
    text-align: center;
    background: rgba(124, 92, 252, 0.04);
  }
  .vs-table .themcol {
    text-align: center;
  }
  .vs-table .uscol .ico {
    width: 1rem;
    height: 1rem;
    stroke: var(--ok);
    stroke-width: 2.2;
  }
  .vs-table .themcol .ico {
    width: 0.9375rem;
    height: 0.9375rem;
    stroke: var(--dim);
    stroke-width: 2;
  }
  .vs-table tbody tr {
    opacity: 0;
    transform: translateX(-0.375rem);
    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: 0.875rem;
    background: var(--card-fill);
    border: 0.0625rem solid var(--card-bd);
    border-radius: var(--r-lg);
    padding: 1rem 1.125rem;
    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(0.985);
    border-color: rgba(var(--accent-rgb), 0.35);
  }
  .founder .go {
    flex-shrink: 0;
    margin-left: auto;
    width: 1.0625rem;
    height: 1.0625rem;
    color: var(--dim);
  }
  .founder .nm {
    font-size: 0.9375rem;
    font-weight: 850;
    color: #fff;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
  .founder .nm .vbadge {
    color: var(--accent-text);
  }
  .founder .nm .vbadge .ico {
    width: 0.9375rem;
    height: 0.9375rem;
  }
  .founder .role {
    font-size: var(--t-2xs);
    color: var(--muted);
    margin-top: 0.25rem;
    line-height: 1.4;
    max-width: 34ch;
  }
  .finalcta {
    position: relative;
    text-align: center;
    margin: var(--s6) auto 0;
    padding: 1.875rem 1.375rem;
    border-radius: var(--r-xl);
    background: radial-gradient(120% 120% at 50% 0%, rgba(124, 92, 252, 0.2), rgba(13, 17, 23, 0.35)), radial-gradient(80% 70% at 0% 100%, rgba(0, 194, 255, 0.06), transparent 60%);
    border: 0.0625rem solid rgba(var(--accent-rgb), 0.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: -0.035em;
  }
  .finalcta p {
    margin: 0.75rem auto 1.375rem;
    max-width: 34ch;
  }
  .finalcta .btn {
    min-height: 3.5rem;
  }
  footer {
    padding: 2.125rem 0 calc(6rem + env(safe-area-inset-bottom));
    border-top: 0.0625rem 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: 0.375rem;
    margin-top: 0.375rem;
  }
  footer .ssl .ico {
    width: 0.8125rem;
    height: 0.8125rem;
  }

  .scrollprog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    z-index: 80;
    opacity: 0.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, 0.82);
    backdrop-filter: blur(0.875rem) saturate(1.2);
    -webkit-backdrop-filter: blur(0.875rem) saturate(1.2);
    border-top: 0.0625rem solid var(--hairline);
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04),
      0 -0.5rem 1.5rem rgba(0, 0, 0, 0.4);
    padding: 0.625rem max(var(--gutter), env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  }
  .buybar .inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    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 0.0625rem 0.125rem rgba(0, 0, 0, 0.4);
  }
  .buybar .px small {
    color: var(--muted);
    font-weight: 600;
  }
  .buybar .btn {
    flex: 1;
    min-height: 3rem;
    padding: 0 0.875rem;
    font-size: 0.9375rem;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.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: 18.75rem;
    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(17.5rem, 86vw);
    margin: 0 auto;
    border-radius: 2.875rem;
    background: #0a0c10;
    padding: 0.6875rem;
    z-index: 3;
    box-shadow:
      inset 0 0 0 0.09375rem #1c1f27,
      inset 0 0 0 0.15625rem #05070b,
      0 0 0 0.0625rem rgba(255, 255, 255, 0.04),
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.4),
      0 2.125rem 4rem -1.375rem rgba(0, 0, 0, 0.75);
  }
  .mk-phone::before {
    content: "";
    position: absolute;
    inset: -1.25rem;
    z-index: -1;
    border-radius: 3.5rem;
    opacity: 0.6;
    filter: blur(1.75rem);
    background: radial-gradient(58% 48% at 28% 12%, rgba(0, 194, 255, 0.24), transparent 60%), radial-gradient(58% 48% at 76% 30%, rgba(181, 33, 233, 0.26), transparent 62%);
  }
  .mk-island {
    position: absolute;
    top: 1.1875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5.375rem;
    height: 1.5625rem;
    border-radius: 0.8125rem;
    background: #000;
    z-index: 6;
  }
  .mk-pscreen {
    position: relative;
    border-radius: 2.1875rem;
    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: 2.1875rem;
    mix-blend-mode: screen;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 22%, transparent 80%, rgba(255, 255, 255, 0.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: 0.5rem 1.125rem 0.125rem;
    font: 700 0.6875rem/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    color: #e8e8f0;
  }
  .mk-status .mk-sig {
    display: inline-flex;
    gap: 0.3125rem;
    opacity: 0.9;
  }
  .mk-status .mk-i {
    width: 0.8125rem;
    height: 0.6875rem;
  }
  .mk-phdr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.5rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.05);
  }
  .mk-kick {
    font: 800 0.53125rem/1 var(--font-display);
    letter-spacing: 0.12em;
  }
  .mk-h1 {
    font: 800 1rem/1.1 var(--font-display);
    color: #fff;
    margin-top: 0.125rem;
  }
  .mk-sub {
    font:
      500 0.625rem/1.2 "Inter",
      sans-serif;
    color: #8a8a9a;
    margin-top: 0.125rem;
  }
  .mk-goal {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font: 700 0.65625rem/1 "Inter";
    color: #cbb8ff;
    background: rgba(124, 92, 252, 0.12);
    border: 0.0625rem solid rgba(124, 92, 252, 0.3);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.5625rem;
    white-space: nowrap;
  }
  .mk-goal .mk-i {
    width: 0.6875rem;
    height: 0.6875rem;
  }
  .mk-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.1875rem;
    padding: 0.5625rem 0.75rem 0.3125rem;
  }
  .mk-d {
    position: relative;
    text-align: center;
    padding: 0.3125rem 0 0.375rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid transparent;
  }
  .mk-d .wd {
    font: 700 0.5rem/1 "Inter";
    color: #55556a;
  }
  .mk-d .nm {
    font: 800 0.8125rem/1 var(--font-display);
    color: #fff;
    margin-top: 0.1875rem;
  }
  .mk-d.off .nm {
    color: #3a3a45;
  }
  .mk-d.sel {
    border-color: rgba(124, 92, 252, 0.65);
    background: rgba(124, 92, 252, 0.14);
  }
  .mk-d.sel .nm {
    color: #cbb8ff;
  }
  .mk-d.prep::after {
    content: "";
    position: absolute;
    bottom: 0.1875rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  }
  .mk-daylbl {
    padding: 0.125rem 0.875rem 0.5rem;
    font: 800 0.75rem/1 var(--font-display);
    color: #fff;
  }
  .mk-daylbl span {
    font-weight: 500;
    color: #8a8a9a;
    font-family: "Inter";
  }
  .mk-nutri {
    margin: 0 0.8125rem;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(124, 92, 252, 0.3);
    border-radius: 0.875rem;
    padding: 0.8125rem 0.75rem;
    display: flex;
    gap: 0.6875rem;
    align-items: center;
  }
  .mk-ring {
    position: relative;
    width: 4.375rem;
    height: 4.375rem;
    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 1.125rem/1 var(--font-display);
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .mk-ringc span {
    font: 500 0.53125rem/1 "Inter";
    color: #8a8a9a;
    margin-top: 0.125rem;
  }
  .mk-macros {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
  }
  .mk-mac .mk-mrow {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
  }
  .mk-mac .l {
    font: 500 0.65625rem/1.1 "Inter";
    color: #8a8a9a;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .mk-mac .v {
    font: 700 0.65625rem/1.1 "Inter";
    color: #e8e8f0;
    white-space: nowrap;
    flex: none;
  }
  .mk-bar {
    height: 0.25rem;
    border-radius: 0.1875rem;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 0.25rem;
    overflow: hidden;
  }
  .mk-bar i {
    display: block;
    height: 100%;
    border-radius: 0.1875rem;
  }
  .mk-mac.sub {
    margin-left: 0.8125rem;
    border-left: 0.0625rem solid rgba(255, 255, 255, 0.1);
    padding-left: 0.5rem;
  }
  .mk-mac.sub .l,
  .mk-mac.sub .v {
    font-size: 0.59375rem;
  }
  .mk-mac.sub .mk-bar {
    height: 0.1875rem;
  }
  .mk-coach {
    margin: 0.6875rem 0.8125rem 0;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-left: 0.1875rem solid var(--prep);
    border-radius: 0.6875rem;
    padding: 0.625rem 0.75rem;
  }
  .mk-cnh {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
  }
  .mk-av {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 0.5625rem/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 0.65625rem/1 var(--font-display);
    color: #f3c39a;
    flex: 1;
  }
  .mk-cntag {
    font: 800 0.5rem/1 var(--font-display);
    letter-spacing: 0.05em;
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.14);
    border-radius: 0.3125rem;
    padding: 0.1875rem 0.375rem;
  }
  .mk-coach p {
    margin: 0.4375rem 0 0;
    font: 400 0.71875rem/1.5 "Inter";
    color: #d7d7e2;
  }
  .mk-cnbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.5625rem;
    font: 700 0.625rem/1 "Inter";
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.13);
    border-radius: 0.5rem;
    padding: 0.375rem 0.625rem;
  }
  .mk-cnbtn .mk-i {
    width: 0.6875rem;
    height: 0.6875rem;
  }
  .mk-seclbl {
    padding: 0.75rem 0.875rem 0.3125rem;
    font: 800 0.5625rem/1 var(--font-display);
    letter-spacing: 0.06em;
    color: #55556a;
  }
  .mk-meal {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin: 0 0.8125rem 0.4375rem;
    padding: 0.5625rem 0.625rem;
    background: rgba(255, 255, 255, 0.02);
    border: 0.0625rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.6875rem;
  }
  .mk-chk {
    width: 1.1875rem;
    height: 1.1875rem;
    border-radius: 50%;
    border: 0.09375rem solid rgba(255, 255, 255, 0.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: 0.6875rem;
    height: 0.6875rem;
    stroke: #06281a;
    stroke-width: 2.6;
  }
  .mk-meal .mt {
    font: 700 0.5625rem/1 "Inter";
    letter-spacing: 0.04em;
    color: #8a8a9a;
    text-transform: uppercase;
  }
  .mk-meal .mn {
    font: 600 0.84375rem/1.25 "Inter";
    color: #e8e8f0;
    margin-top: 0.125rem;
  }
  .mk-meal.done .mn {
    color: #55556a;
    text-decoration: line-through;
  }
  .mk-meal .mkcal {
    font: 500 0.625rem/1 "Inter";
    color: #8a8a9a;
    margin-top: 0.1875rem;
    font-variant-numeric: tabular-nums;
  }
  .mk-meal .mbody {
    flex: 1;
    min-width: 0;
  }
  .mk-prep {
    font: 800 0.46875rem/1 var(--font-display);
    color: #ffb98a;
    background: rgba(255, 138, 60, 0.14);
    border-radius: 0.25rem;
    padding: 0.125rem 0.3125rem;
    margin-left: 0.375rem;
  }
  .mk-tab {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.5rem 0.375rem 0.875rem;
    background: rgba(13, 17, 23, 0.94);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
  }
  .mk-tab a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    font: 600 0.5625rem/1 "Inter";
    color: #5b5b68;
  }
  .mk-tab a .mk-i {
    width: 1.125rem;
    height: 1.125rem;
  }
  .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: 0.625rem 0.75rem;
  }
  .mk-ring {
    width: 3.875rem;
    height: 3.875rem;
  }
  .mk-ring svg {
    width: 3.875rem;
    height: 3.875rem;
  }
  .mk-ringc b {
    font-size: 1rem;
  }
  .mk-week {
    padding: 0.375rem 0.75rem 0.1875rem;
  }
  .mk-phdr {
    padding: 0.375rem 0.875rem 0.375rem;
  }
  .mk-status {
    padding: 0.375rem 1.125rem 0.125rem;
  }
  .mk-seclbl {
    padding: 0.5625rem 0.875rem 0.25rem;
  }
  .mk-coach {
    padding: 0.5625rem 0.75rem;
  }
  .mk-coach p {
    margin-top: 0.375rem;
  }
  .mk-cnbtn {
    margin-top: 0.4375rem;
  }
  .mk-meal {
    padding: 0.5rem 0.625rem;
    margin-bottom: 0.375rem;
  }
  .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, 0.07) 46%, rgba(181, 33, 233, 0.055) 54%, transparent 70%);
    transform: translateX(-60%);
  }
  .hero.play::after {
    animation: auroraSweep 1.7s var(--ease-out) 0.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: 1.375rem;
    right: 1.375rem;
    z-index: 4;
    display: none;
    align-items: center;
    font-size: 0.65625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(8, 11, 18, 0.55);
    -webkit-backdrop-filter: blur(0.375rem);
    backdrop-filter: blur(0.375rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.18);
    border-radius: 62.4375rem;
    padding: 0.3125rem 0.6875rem;
    animation: hintNudge 2.4s ease-in-out infinite;
    transition: opacity 0.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(-0.3125rem);
    }
  }

  /* 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, 0.16);
      }
      100% {
        background: var(--ok);
        border-color: transparent;
      }
    }
    .mk-chk2 .mk-i {
      opacity: 0;
      transform: scale(0.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 56.25rem;
  }

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

/* ===== RECONCILIERE — elemente unice unui singur design ===== */
/* desktop-only în markup: ascunse sub 1100 (acolo afișăm mobil-x) */
@media (max-width: 1099.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 1100 (acolo afișăm desktop) */
@media (min-width: 1100px) {
  .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 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.lp-leaving .topbar,
body.lp-leaving .topnav {
  animation: lpFadeAway 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.lp-leaving .sb-pill {
  transform: translateY(-0.625rem) scale(1.015);
  border-color: rgba(124, 92, 252, 0.6);
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
body.lp-leaving .sb-sugs {
  opacity: 0 !important;
}
@keyframes lpFadeAway {
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

/* 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, 0.5) 30%, #080b12 78%), linear-gradient(135deg, rgba(0, 194, 255, 0.22), rgba(124, 92, 252, 0.25) 50%, rgba(181, 33, 233, 0.22));
  animation: lpVeil 0.42s cubic-bezier(0.4, 0, 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 0.3s cubic-bezier(0.4, 0, 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: 0.22s;
}
::view-transition-new(root) {
  animation-duration: 0.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: 0.52s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.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: 0.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: 0.3125rem;
}
/* butonul e flex, deci `gap` se ADUNĂ cu `margin-top: 5px` din regula veche —
   liniile ajungeau la 10px una de alta, iar translațiile de ±3.5px (calibrate
   pentru 7px între centre: 2px linia + 5px spațiul) nu mai întâlneau liniile
   la mijloc și X-ul ieșea ușor descentrat. Spațierea rămâne doar pe `gap`,
   exact ca la butonul din chat (`.acx-mburger`). */
.burger span + span {
  margin-top: 0;
}
.burger span {
  width: 1.1875rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  transition:
    transform 0.5s var(--ease-emph),
    width 0.28s,
    margin 0.28s;
}
.burger span:nth-child(2) {
  width: 0.8125rem;
  margin-right: 0.375rem;
}
.burger[aria-expanded="true"] {
  transform: none;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.21875rem) rotate(45deg);
  width: 1.1875rem;
}
.burger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-0.21875rem) rotate(-45deg);
  width: 1.1875rem;
  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: 7.5rem;
  height: auto;
}

/* ---------------------------------------------------------------------------
   X-UL DIN TITLU PE ECRANE MARI (27 aug, raportat de Dennis): flourish-ul de
   intrare `xSpin` (rotire 0→45°→0, cu popas la 45°) e imperceptibil pe telefon
   (X-ul are ~22px), dar la 56px de titlu pe desktop se citea ca o clipire
   x→+→x — „niciuna corectă". Pe ≥760px X-ul intră doar cu pop-ul de pe xwrap
   și rămâne X, exact ca percepția de pe telefon. Regula stă la COADA
   fișierului ca să bată ambele copii ale blocului hero (fișierul conține
   secțiunea duplicată din merge-ul LP responsive). */
@media (min-width: 1100px) {
  .hero.play .title .x {
    animation: none;
  }
}

/* Cerut 7 sept (Dennis): pe mobil, subtitlul hero („Nutriționistul tău AI,
   antrenat în...") cu text-align-last: justify — și ultimul rând (respectiv
   un rând singur) se întinde pe toată lățimea. */
/* Retras 12 sept (Dennis): fara justify - subtitlul ramane centrat, ca restul hero-ului. */

/* ---------------------------------------------------------------------------
   Cerut 7 sept (Dennis): „Sau" cu spacing mai mic + TOT hero-ul și cardul PAP
   lead să încapă în PRIMUL ecran, măsurat în svh (bara de navigație a
   browserului ocupă din înălțime), pe mobil și desktop.
   Desktop: grila hero e deja dimensionată pe 100svh cu align-content center —
   încape (verificat la 1366×700: cardul se termină la 473px). Aici strângem
   MOBILUL, unde stiva depășea cu 60px la svh=700. Fără padding-top pe .hero
   (lecția din 28 aug: degajă topbarul fix) și fără să atingem xwrap-ul de
   13px cerut azi. */
@media (max-width: 1099.98px) {
  .hero { padding-bottom: 0.5rem; }
  .hero .title { margin-top: 0; }
  .hero .sub { margin-top: 0.375rem; }
  .free-wrap { margin-bottom: 0.3125rem; }
  .hero .searchbar { margin-top: 0.5rem; }
  .hero .trained { margin-top: 0.375rem; }
  .hero .saudiv { margin: 0.1875rem auto 0; }
  .hero .planintro { margin-top: 0.25rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
  .hero .planintro .nopdf { margin-top: 0.25rem; }
}

/* Treapta pentru telefoane SCUNDE (svh ≤ ~720): aceleași elemente, tipografie
   ușor compactată + „Sau" mai mic — restul de pixeli ca hero+card să încapă
   și pe iPhone SE / Android 640-660. Pe telefoanele înalte nu se schimbă nimic. */
@media (max-width: 1099.98px) and (max-height: 719.98px) {
  .hero .title { font-size: clamp(1.4375rem, 7.4vw, 1.9375rem); }
  .hero .sub { font-size: 0.84375rem; margin-top: 0.25rem; }
  .hero .trained { font-size: 0.78125rem; margin-top: 0.125rem; }
  .hero .searchbar { margin-top: 0.25rem; }
  .hero .saudiv { margin: 0 auto; }
  .hero .saudiv span { font-size: 0.59375rem; padding: 0.25rem 0.75rem; }
  .hero .planintro { padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .hero .planintro h2 { font-size: 1.1875rem; }
  .free-pill { font-size: 0.65625rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .hero .planintro .pi-badge { font-size: 0.625rem; }
  .hero .planintro .price-row { margin-top: 0.4375rem; }
  .hero .planintro .btn { margin-top: 0.5rem; }
  .hero .saudiv span { padding: 0.1875rem 0.6875rem; }
  .hero .planintro { margin-top: 0.125rem; padding-top: 0.5625rem; padding-bottom: 0.5625rem; }
  .hero .planintro .nopdf { font-size: 0.78125rem; }
}

/* Cerut 7 sept (Dennis): în cardul de program din carusel, prețul și
   „anulezi oricând" se aliniază JOS pe aceeași linie (flex-end, nu baseline),
   iar verdele e cel aprins al bifelor din listă (--ok), nu pastelul șters. */
.pcard .priceline { align-items: flex-end; }
.pcard .priceline .freecancel {
  align-self: flex-end;
  color: var(--ok);
}

/* Cerut 7 sept (Dennis): cifra mare a prețului moștenea line-height 1.55
   (cutie de 47px la font 30px) — înălțime moartă care strica alinierea jos. */
.pcard .priceline .big { line-height: 1; }

/* Cerut 7 sept (Dennis): priceline cu padding vertical mai mare și EGAL
   (era 9px sus / 0 jos) — rândul prețului respiră simetric între linia de
   separare și butonul de continuare. */
.pcard .priceline {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

/* Cerut 7 sept (Dennis): în tabelul „VS Nutriționist Clasic", coloana Clasic
   primește și ea culori — bifă verde, X roșu — în loc de gri șters; aceeași
   greutate de contur ca pe coloana „Noi". */
.vs-table .themcol .ico {
  stroke-width: 2.2;
  width: 1rem;
  height: 1rem;
}
.vs-table .themcol .ico.vs-ok { stroke: var(--ok); }
.vs-table .themcol .ico.vs-nay { stroke: var(--danger); }

/* Cerut 7 sept (Dennis): la „Așa arată programul tău", textul de sub titlu
   coboară la 14px. */
#showcase .lede-showcase { font-size: 0.875rem; }

/* Cerut 7 sept (Dennis), zona doctorului: „Dr. Andu Preda" nu se fragmentează
   niciodată pe rânduri, iar drapelul stă mereu lipit de „Marea Britanie". */
.nofrag { white-space: nowrap; }

/* Fostul flex de pe .nm alinia iconița vbadge (eliminată azi) — rămas fără
   rost, așeza „Nutritie.ro —" și „by Dr. Andu Preda" ca două coloane cu
   frângeri urâte. Text normal: curge și se rupe curat, iar .nofrag ține
   numele întreg. */
#dece .nm { display: block; }

/* Cerut 7 sept (Dennis): la newsletter, aer între input și butonul „Trimite"
   (cerut 14-16px; era 10px pe desktop și lipit pe mobil). */
#mail #waitRow { gap: 0.9375rem; }

/* Cerut 7 sept (Dennis): textul lede al secțiunii de newsletter la 14px */
#mail .nl-head .lede { font-size: 0.875rem; } /* lede-ul s-a mutat în .nl-head (11 sept) */

/* Cerut 7 sept: rândurile listei de beneficii de la newsletter nu se frâng —
   un singur rând per element (fontul îl potrivește fitNlAdv din home.js). */
#mail .nl-adv li { flex-wrap: nowrap; }
#mail .nl-adv li span { white-space: nowrap; min-width: 0; }

/* Cerut 7 sept (Dennis): pe .ln2 („Inteligență Artificială") literele cu
   descender (g) și diacriticele apăreau tăiate — la background-clip: text,
   gradientul pictează doar în cutia de padding, iar ce coboară sub ea rămâne
   cu umplere transparentă. Padding-ul de jos extinde zona pictată. */
.hero .title .gt {
  padding-bottom: 0.14em;
}

/* Cerut 7 sept (Dennis): logo-ul desktop la 1.5× față de cât era (120px
   lățime / 29px înălțime → 180px / ~44px). Suprascriem pe același selector ca
   regula de strângere mobilă (mai specifică decât înălțimea de bază);
   pe mobil rămâne neatins. */
@media (min-width: 1100px) {
  .topbar .brand svg,
  .topbar a:first-child svg {
    width: 11.25rem;
    height: auto;
  }
}

/* Cerut 7 sept (Dennis): cardul PAP din hero (desktop) mai mare și mai lat —
   coloana lui crește de la 436px la 500px și primește un pas de aer în
   interior; cu cardul mai lat, „Sau"-ul (coloana dintre mesaj și card) cade
   mai aproape de centrul dintre cele două. */
@media (min-width: 1100px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) 3.625rem minmax(0, 35rem);
  }
  .hero .planintro {
    padding: 2rem 2.375rem 1.875rem;
  }
}

/* Cerut 7 sept (Dennis): butonul de send din bara hero −15% pe desktop
   (48→41px; icoana scade proporțional). Doar butonul, bara neatinsă. */
@media (min-width: 1100px) {
  /* margin-right 3px: la 48px insetul era 6px peste tot; la 41px cel vertical
     devine 9px, deci și dreapta primește 6+3=9px — butonul stă centrat optic */
  .sb-go { width: 2.5625rem; height: 2.5625rem; margin-right: 0.125rem; }
  .sb-go .ico { width: 1.0625rem; height: 1.0625rem; }
}

/* Cerut 7 sept (Dennis): „Gratuit, fără cont" urcă — gap EGAL față de
   subtitlu („Nutriționistul tău AI...") și față de search bar + textul
   pastilei +15% (11.5→13.2px). Desktop. */
@media (min-width: 1100px) {
  .hero .searchbar { margin-top: 1rem; }
  .free-wrap { margin-bottom: 1rem; }
  .free-pill { font-size: 0.825rem; }
}

/* Cerut 7 sept (Dennis): pe mobil, „Gratuit, fără cont" stă între subtitlu și
   input cu spațiu ~înjumătățit. Golul venea din justify-content: space-between
   pe .hero .wrap — pe telefoane înalte spațiul liber se împărțea în toate
   golurile (subtitlu→pastilă ajungea la ~48px). Trecem pe flex-start cu gap
   FIX pe grupul de sus, iar tot spațiul flexibil se adună într-un singur loc,
   deasupra lui „Sau" (margin-top: auto) — stabil la orice înălțime de ecran. */
@media (max-width: 1099.98px) {
  .hero .wrap { justify-content: flex-start; }
  /* „Sau" la JUMĂTATEA spațiului rămas, adaptiv: ambele margini verticale
     auto — spațiul flexibil se împarte egal deasupra și dedesubtul lui,
     iar cardul rămâne împins la baza primului ecran. */
  .hero .saudiv { margin-top: auto; margin-bottom: auto; }
}
@media (max-width: 1099.98px) and (min-height: 720px) {
  .hero .searchbar { margin-top: 1.375rem; }
  .free-wrap { margin-bottom: 1.375rem; }
}

/* Cerut 7 sept (Dennis): „Antrenat de Dr. Andu Preda..." la același font-size
   cu „Gratuit, fără cont" (13.2px pe desktop; era 12.5). DOAR font-size —
   fără altă decorațiune sau padding. Pe mobil textul e deja ≥ pastila. */
@media (min-width: 1100px) {
  .hero .tr-line { font-size: 0.825rem; }
}

/* Cerut 7 sept (Dennis): în cardul PAP din hero — „Livrat în 48h" (pi-badge)
   mai mic (11→10px), iar titlul „Program Alimentar Personalizat" +30%
   (21→27px pe desktop). */
.planintro .pi-badge { font-size: 0.625rem; }
@media (min-width: 1100px) {
  .hero .planintro h2 { font-size: 1.6875rem; }
}

/* Cerut 7 sept (Dennis): cardul PAP primește un halo care pulsează constant,
   pe ritmul auraBreathe al barei de căutare — dar ca UMBRĂ (box-shadow), nu ca
   strat de fundal. ::before și ::after ale cardului sunt ale temei (lustrul
   interior, respectiv inelul-gradient de contur) și rămân neatinse, așa că
   umbra stă chiar pe card: keyframes proprii care interpolează box-shadow
   între alfele 0.16↔0.3 ale auraBreathe, păstrând umbrele de bază ale
   cardului (var(--sh-2), var(--inset-hi)) în ambele stări. Și cardul nu mai
   „sare": lift-ul de la hover dispare. */
@keyframes haloShadowBreathe {
  0%,
  100% {
    box-shadow:
      var(--sh-2), var(--inset-hi),
      0 0 2.75rem -0.375rem rgba(124, 92, 252, 0.16),
      0 0 5.625rem -1.125rem rgba(0, 194, 255, 0.12);
  }
  50% {
    box-shadow:
      var(--sh-2), var(--inset-hi),
      0 0 2.75rem -0.375rem rgba(124, 92, 252, 0.3),
      0 0 5.625rem -1.125rem rgba(0, 194, 255, 0.22);
  }
}
.hero .planintro {
  animation: haloShadowBreathe 4.6s ease-in-out 1.8s infinite;
}
/* după intrare, .play rămâne pe .hero și selectorul temei (0-3-0) ar suprascrie
   pulsul; compunem intrarea cardRise + respirația umbrei în aceeași declarație */
.hero.play .planintro {
  animation:
    cardRise 0.7s var(--ease-emph) 1.42s backwards,
    haloShadowBreathe 4.6s ease-in-out 1.8s infinite;
}
.hero .planintro:hover {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero .planintro,
  .hero.play .planintro {
    animation: none;
    box-shadow:
      var(--sh-2), var(--inset-hi),
      0 0 2.75rem -0.375rem rgba(124, 92, 252, 0.16),
      0 0 5.625rem -1.125rem rgba(0, 194, 255, 0.12);
  }
}

/* Cerut 7 sept (Dennis): inelul-gradient de contur al temei (::after, ringul
   mascat de 1px) citește acum ca un border pe card și strică experiența —
   îl stingem; umbra-halo rămâne singura decorație exterioară. */
.hero .planintro::after {
  content: none;
}

/* Cerut 7 sept (Dennis): secțiunea #program (alegerea obiectivului) —
   1) titlul „Program Alimentar Personalizat" la fel de mare ca titlul hero
      („Nutriție x Inteligență Artificială"): aceleași clamp-uri responsive;
      shead-ul își pierde max-width-ul ca titlul mărit să rămână pe un rând;
   2) cardul cu poza cu ~25% mai mare (corectat din 50% - „MULT PREA MARE"):
      coloana media crește de la 1.04fr la 1.26fr, iar wrap-ul secțiunii se
      lărgește la 1100px ca body-ul (lista + preț + CTA) să-și păstreze
      lățimea actuală;
   3) poza UMPLE coloana ei: dispare rama interioară (padding-ul media) și
      colțurile/umbra proprii — coperta stă lipită de marginile cardului
      (colțurile le taie cardul prin overflow:hidden);
   4) titlul stă mai sus: conținutul secțiunii nu mai e centrat vertical pe
      desktop, pornește de sus. */
/* DOAR pe desktop (precizat 7 sept) - mobilul rămâne cum era. */
@media (min-width: 1100px) {
  #program .shead {
    max-width: none;
  }
  #program .shead h2 {
    font-size: clamp(2.125rem, 5.2vw, 2.875rem);
  }
}
@media (min-width: 1100px) {
  .pcard .media {
    padding: 0;
  }
  .pcard .media .cov {
    border-radius: 0;
    box-shadow: none;
  }
}
@media (min-width: 1100px) {
  #program .wrap {
    max-width: 68.75rem;
    justify-content: flex-start;
  }
  .pcard.on {
    grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr);
  }
}

/* Cerut 7 sept (Dennis): „Magazin" intră în navigația LP-ului. Cu linkul în
   plus, bara desktop nu mai încăpea la 1100-1280px (linkurile se rupeau pe
   două rânduri și atingeau logo-ul). Linkurile nu se mai rup niciodată, iar
   pe intervalul strâmt bara e compactată: gap, mărimea fontului și
   padding-urile pastilelor mai mici. De la 1280px în sus rămâne ca înainte. */
@media (min-width: 1100px) {
  .topnav a {
    white-space: nowrap;
  }
}
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .topnav {
    gap: 1rem;
  }
  .topnav a {
    font-size: 0.875rem;
  }
  .topnav .nav-auth {
    padding: 0.5625rem 1rem;
  }
  .topnav .nav-go {
    font-size: 0.875rem;
    padding: 0.625rem 1.125rem;
  }
}

/* Cerut 11 sept (Dennis), hero:
   I.  aliniere: pe mobil rândul „Antrenat de Dr. Andu Preda" era centrat ca TEXT,
       dar cercul stătea lipit de marginea stângă (tr-line umplea tot rândul) -
       acum cercul + textul se centrează ca un grup, pe aceeași axă cu titlul,
       pastila „Gratuit" și search bar-ul;
   II. „Antrenat de…" are aceeași mărime de font ca „Gratuit, fără cont", iar
       distanța search bar → cerc e egală cu distanța „Asistentul tău AI" → pastilă
       (16px desktop, 22px mobil, 4px pe ecranele scunde - aceleași valori ca
       .hero .searchbar { margin-top }). */
.hero .tr-line { flex: 0 1 auto; width: auto; }
@media (min-width: 1100px) {
  .hero .trained { margin-top: 1rem; }
  .hero .tr-line { font-size: 0.825rem; }
}
@media (max-width: 1099.98px) {
  .hero .trained { margin-top: 1.375rem; }
  .hero .tr-line { font-size: 0.71875rem; }
}
@media (max-width: 1099.98px) and (max-height: 719.98px) {
  /* pe ecranele scunde bugetul e fix (fit-ul de 640 era exact): 3px + 3px, egale,
     în loc de 4 + 2 - suma rămâne aceeași, deci primul ecran încape ca înainte */
  .hero .searchbar { margin-top: 0.1875rem; }
  .hero .trained { margin-top: 0.1875rem; }
  .hero .tr-line { font-size: 0.65625rem; }
}
/* I (continuare): pe desktop literele titlului/subtitlului începeau cu ~3px mai la
   dreapta decât pastila, search bar-ul și cercul (spațiul lateral al glifelor Sora
   la 45px) - compensare optică de 3px pe blocul de text, ca tulpinile literelor
   să cadă pe aceeași verticală cu bordurile de sub ele. */
@media (min-width: 1100px) {
  .hero .tblock { margin-left: -0.1875rem; }
}

/* Cerut 11 sept (Dennis), meniul LP desktop:
   I.  „Autentificare": hover-ul era o simplă nuanță de fundal; acum e un glow
       moale în accent + o umplere-gradient fină care se aprinde treptat, cu un
       lift de 1px (inelul-gradient al conturului rămâne);
   II. „Începe acum": linia de sub buton la hover dispare (regula generică de
       underline a linkurilor din meniu nu se aplică CTA-ului). */
@media (min-width: 1100px) {
  .topnav .nav-auth {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0), rgba(181, 33, 233, 0));
    box-shadow: 0 0 0 0 rgba(124, 92, 252, 0);
    transition:
      color var(--dur-fast),
      background var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .topnav .nav-auth:hover {
    background: linear-gradient(90deg, rgba(0, 194, 255, 0.16), rgba(181, 33, 233, 0.16));
    box-shadow: 0 0.375rem 1.375rem -0.375rem rgba(124, 92, 252, 0.55), 0 0 0 0.0625rem rgba(124, 92, 252, 0.18);
    transform: translateY(-0.0625rem);
    color: #fff;
  }
  .topnav .nav-go::before,
  .topnav .nav-go:hover::before {
    content: none;
  }
}

/* Cerut 11 sept (Dennis), cardul PAP din hero (desktop):
   I.   headline-ul e primul; „Livrat în 48h" vine după el, mai mic;
   II.  sloganul „Un program interactiv…" are fontul/mărimea subtitlului hero
        („Asistentul tău AI…" - Inter 16.5px, aceeași înălțime de rând);
   III. „lei/lună" nu mai e scris mic pe lângă „99": același font/mărime ca
        „anulezi oricând" (12px), bold - nu ascundem că e abonament;
   IV.  bifa din „anulezi oricând" e centrată pe verticală cu textul. */
@media (min-width: 1100px) {
  .hero .planintro .pi-badge {
    font-size: 0.59375rem;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    margin: 0.5rem 0 0;
    gap: 0.3125rem;
  }
  .hero .planintro .pi-badge .ico { width: 0.6875rem; height: 0.6875rem; }
  .hero .planintro .nopdf {
    margin-top: 0.625rem;
    font-family: inherit;
    font-size: 1.03125rem;
    line-height: 1.55;
    max-width: 40ch;
  }
  .hero .planintro .price span {
    font-size: 0.75rem;
    font-weight: 700;
  }
  .hero .planintro .risk-chip {
    line-height: 1;
  }
  .hero .planintro .risk-chip .ico {
    position: relative;
    top: 0.03125rem;
  }
}
/* IV (continuare, 11 sept): „anulezi oricând" aliniat pe verticală cu textul
   „lei/lună" - rândul de preț aliniază pe baseline (chip-ul și „lei/lună" stau
   pe aceeași linie de bază), nu pe centrul cifrei mari. */
@media (min-width: 1100px) {
  .hero .planintro .price-row { align-items: baseline; }
  /* baseline-ul chip-ului (inline-flex) e dat de svg-ul din față, nu de text -
     MĂSURAT 2px mai sus decât „lei/lună"; compensăm exact atât */
  .hero .planintro .risk-chip { position: relative; top: 0.125rem; }
}

/* Cerut 11 sept (Dennis), sectiunea newsletter (LP) pe desktop: TOTUL unul sub
   altul si aliniat (ca pe mobil): kicker + titlu + lede, formularul, consimtamantul,
   Dr. Andu, lista de beneficii - o singura coloana centrata. Inlocuieste compozitia
   pe doua coloane de la >=1100px; pe mobil nu schimba nimic. */
@media (min-width: 1100px) {
  #mail .wrap { max-width: 40rem; }
  #mail .wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #mail .nl-head, #mail .nl-main, #mail .nl-side { width: 100%; }
  #mail .wait .lede { margin-left: auto; margin-right: auto; }
  #mail .wait .consent { justify-content: center; }
  #mail .nl-side .nl-by { margin-top: var(--s6); }
  /* lista ramane cu randurile aliniate la stanga, dar blocul ei e centrat */
  #mail .nl-side .nl-adv { width: max-content; max-width: 100%; margin: var(--s5) auto 0; }
}

/* ---------------------------------------------------------------------------
   Cerut 11 sept (Dennis): X-ul dintre „Nutriție" și „Inteligență Artificială"
   face la început x -> + -> x (rotirea `xSpin`, 0 -> 45° -> 0) și apoi RĂMÂNE
   nemișcat. Înlocuiește decizia din 27 aug (fără rotire pe >=760px) și scoate
   respirația infinită `xBreathe` de pe mobil; glow-ul static (drop-shadow)
   rămâne. Regula stă la coada fișierului ca să bată ambele copii ale blocului
   hero și override-ul din 27 aug. Pornește după pop-ul `xIn` al xwrap-ului.
   Completare (Dennis, 11 sept): rotirea se vede DOAR la primul load; clasa
   `x-prima` e pusa de home.js o singura data (localStorage), la urmatoarele
   incarcari X-ul sta nemiscat (nici respiratia veche de pe mobil). */
.hero.play .title .x {
  animation: none;
}
/* x -> + -> x lizibil: porneste dupa ce s-au asezat cele doua randuri ale titlului
   (~0.9s), tine 1.6s si sta clar pe „+" la mijloc; apoi ramane X. */
@keyframes xPlus {
  0%   { transform: rotate(0); }
  38%  { transform: rotate(45deg); }
  62%  { transform: rotate(45deg); }
  100% { transform: rotate(0); }
}
.hero.play.x-prima .title .x {
  animation: xPlus 1.6s var(--ease-inout) 0.9s both;
}

/* ---------------------------------------------------------------------------
   Cerut 12 sept (Dennis): la deschiderea/închiderea meniului hamburger nu se
   mai vede fundalul negru. MĂSURAT: fundalul opac (--bg) intra primul, vălul de
   gradient pornea cu 0.08s întârziere (0.55s), itemii la 0.05-0.17s - în
   primele ~150ms pagina cobora la aproape negru (luminanță 38 -> 22). La
   închidere, invers: itemii dispăreau în 0.15s, fundalul rămânea 0.38s.
   Rezolvare de TIMING: toate straturile intră și ies ÎMPREUNĂ - vălul de
   gradient și itemii pornesc odată cu fundalul, iar la închidere totul se
   stinge în același 0.28s. Regula stă la coada fișierului (bate ambele copii
   ale blocului de header). */
.navmenu {
  transition:
    opacity 0.28s var(--ease-out),
    visibility 0s linear 0.28s;
}
.navmenu.open {
  transition: opacity 0.28s var(--ease-out);
}
.navmenu::before {
  transition: opacity 0.28s var(--ease-out);
}
.navmenu.open::before {
  transition-delay: 0s;
}
.navmenu .mi a {
  transition:
    transform 0.5s var(--ease-emph),
    opacity 0.28s var(--ease-out);
}
.navmenu.open .mi:nth-child(1) a {
  transition-delay: 0s;
}
.navmenu.open .mi:nth-child(2) a {
  transition-delay: 0.05s;
}
.navmenu.open .mi:nth-child(3) a {
  transition-delay: 0.1s;
}
.navmenu.open .nav-cta {
  transition-delay: 0.14s;
}
/* la închidere: itemii și butonul se sting în același ritm cu fundalul */
.navmenu:not(.open) .mi a,
.navmenu:not(.open) .nav-cta {
  transition:
    transform 0.28s var(--ease-out),
    opacity 0.28s var(--ease-out);
  transition-delay: 0s;
}

/* ---------------------------------------------------------------------------
   Cerut 12 sept (Dennis): `.searchbar { margin: 14px auto 0 }` modifica LATIMEA
   barei de search pe mobil. MASURAT: .hero .wrap e flex pe coloana, iar
   marginile `auto` pe orizontala anuleaza intinderea (stretch) a copilului -
   bara se strangea la latimea continutului (342px in loc de 358 la 390px,
   342 in loc de 398 la 430px). Fara auto, bara ocupa toata latimea utila,
   ca restul elementelor din hero (planintro). Peste 760px wrap-ul e block/grid
   si `auto` nu schimba nimic, deci regula ramane doar pe mobil. */
@media (max-width: 1099.98px) {
  .hero .searchbar {
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Cerut 12 sept (Dennis): pe mobil, .searchbar si .free-wrap cu marginile
   (top la searchbar, bottom la free-wrap) la JUMATATE fata de valorile de
   pana acum, pe ambele trepte de inaltime (22px -> 11px la >=720 inaltime;
   3px -> 1.5px si 5px -> 2.5px pe ecranele scunde). */
@media (max-width: 1099.98px) and (min-height: 720px) {
  .hero .searchbar { margin-top: 0.875rem; }  /* 12 sept: 0.6875 -> 0.875 (Dennis) */
  .free-wrap { margin-bottom: 0.875rem; }
}
@media (max-width: 1099.98px) and (max-height: 719.98px) {
  .hero .searchbar { margin-top: 0.09375rem; }
  .free-wrap { margin-bottom: 0.15625rem; }
}

/* Cerut 12 sept (Dennis): pe mobil, .pi-badge („Livrat în 48h") primeste si
   margin-top (era lipit de titlul cardului; pe desktop are deja 0.5rem).
   Pe ecranele scunde marginea e mai mica si compensata din cea de jos, ca
   hero-ul sa incapa in continuare in primul ecran. */
@media (max-width: 1099.98px) {
  .hero .planintro .pi-badge { margin-top: 0.5rem; }
}
@media (max-width: 1099.98px) and (max-height: 719.98px) {
  .hero .planintro .pi-badge { margin-top: 0.25rem; margin-bottom: 0.375rem; }
}

/* Cerut 12 sept (Dennis): pe mobil, .hero .trained („Antrenat de Dr. Andu
   Preda") cu margin-top 0.875rem, la fel ca searchbar/free-wrap. Pe ecranele
   scunde ramane valoarea mica (0.1875rem), ca hero-ul sa incapa. */
@media (max-width: 1099.98px) and (min-height: 720px) {
  .hero .trained { margin-top: 0.875rem; }
}

/* Cerut 12 sept (Dennis): .free-pill („Gratuit, fără cont" / „Livrare în 48h")
   cu line-height 1 - inaltimea pastilei e data doar de padding, nu de interlinie. */
.free-pill { line-height: 1; }

/* Cerut 12 sept (Dennis): la fel si pe .planintro .pi-badge („Livrat în 48h"):
   line-height 1, inaltimea data de text + padding. */
.planintro .pi-badge { line-height: 1; }

/* Cerut 12 sept (Dennis): marginile de sus/jos ale X-ului din titlu (.xwrap)
   reduse cu 50%: mobil/tableta 0.8125rem -> 0.40625rem (13 -> 6.5px),
   desktop 0.5rem -> 0.25rem (8 -> 4px). */
.hero .title .xwrap { margin-top: 0.40625rem; margin-bottom: 0.40625rem; }
@media (min-width: 1100px) {
  .hero .title .xwrap { margin-top: 0.25rem; margin-bottom: 0.25rem; }
}

/* Cerut 12 sept (Dennis): pe mobil, padding-top-ul hero-ului redus cu ~22%
   (era 0.625rem + --hdr = 70px; acum ~55px). Formula pastreaza compensarea
   pentru topbarul fix (margin-top negativ = --hdr), doar spatiul scade. */
@media (max-width: 1099.98px) {
  .hero { padding-top: calc((0.625rem + var(--hdr)) * 0.78); }
}

/* Cerut 12 sept (Dennis): .saudiv pastreaza marginea de acum (auto = spatiul
   liber impartit), dar cu un MINIM de 2rem sus si jos. Minimul e pus ca
   padding: cand e spatiu liber, marginile auto scad cu exact cat adauga
   padding-ul (golul vizual ramane acelasi); cand nu e, raman 2rem. Linia si
   pastila „SAU" stau la 50% din cutie, deci raman centrate. Nu se aplica pe
   ecranele scunde (< 720 inaltime), unde hero-ul trebuie sa incapa. */
@media (max-width: 1099.98px) and (min-height: 720px) {
  .hero .saudiv { padding-top: 0.8rem; padding-bottom: 0.8rem; } /* 14 sept: 2rem -> 1rem; 15 sept: -20% -> 0.8rem (Dennis) */
}

/* Cerut 12 sept (Dennis): pastila „SAU" (.saudiv span) cu line-height 1. */
.hero .saudiv span { line-height: 1; }

/* Cerut 12 sept (Dennis): cardul .planintro ocupa TOATA latimea disponibila
   (in interiorul padding-ului general al .wrap). Pe mobil marginile `auto`
   (flex pe coloana) il strangeau la latimea continutului cand continutul era
   mai ingust decat spatiul (ex. 430px: 385 din 396); pe tableta era plafonat
   la 33.75rem (540 din 608). Desktopul are coloana lui in grid si nu se atinge. */
@media (max-width: 1099.98px) {
  .hero .planintro { margin-left: 0; margin-right: 0; width: auto; max-width: none; }
}

/* Cerut 12 sept (Dennis): pastila „SAU" cu padding sus/jos 0.25rem. */
.hero .saudiv span { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* 14 sept: 0.25 -> 0.5rem (Dennis) */

/* Cerut 14 sept (Dennis): linia decorativa din spatele lui „SAU" (.saudiv::before,
   left 0 / right 0) nu se mai vedea: pe mobil .saudiv are marginile orizontale
   `auto` intr-un flex pe coloana, deci se strangea la latimea pastilei si linia
   ramanea ascunsa sub ea. Latime plina; pastila ramane centrata (justify-content). */
@media (max-width: 1099.98px) {
  .hero .saudiv { margin-left: 0; margin-right: 0; width: auto; }
}

/* Cerut 14 sept (Dennis): textul cardului PAP din hero devine „Nu e o dietă
   generică. / Creat de la zero pentru tine, ca să-ți atingi scopul.", a doua
   fraza pe UN SINGUR rand. Pe mobil are nevoie de ~330px la 390 (disponibili
   312), deci fontul coboara la 0.8rem (12.8px) si fraza nu se mai frange. */
@media (max-width: 1099.98px) {
  .hero .planintro .nopdf { font-size: 0.875rem; } /* 15 sept: 0.8 -> 0.875rem (Dennis) */
}
/* 15 sept: la 0.875rem fraza are 330px; incape pe un rand doar de la 412px (Pixel, Pro Max);
   sub 412px se rupe normal, ca sa nu iasa din card */
@media (min-width: 412px) {
  .hero .planintro .nopdf-l2 { white-space: nowrap; }
}
@media (max-width: 1099.98px) {
  /* fraza pe un rand (302px la 390) depasea blocul .nopdf limitat la 40ch (291px)
     si iesea din centru; pe mobil blocul ia toata latimea interioara a cardului */
  .hero .planintro .nopdf { max-width: none; }
}

/* Cerut 14 sept (Dennis): in calculatorul „Estimează cât ai putea slăbi", campurile
   au aceeasi latime: cele de data (De la / Și până la) ramaneau la latimea lor
   intrinseca (132px), pe cand Greutate/Înălțime umpleau randul (187px fiecare).
   Toate campurile dintr-un rand impart latimea egal. */
.calc .frow .field { flex: 1 1 0; min-width: 0; }
.calc .frow .field input { width: 100%; }

/* Cerut 15 sept (Dennis): pe mobil, .pi-badge („Livrat în 48h") cu 30% mai mic:
   font 10 -> 7px, padding 5/13/5/10 -> 3.5/9/3.5/7px, gap 6 -> 4px, iconita 13 -> 9px. */
@media (max-width: 1099.98px) {
  .hero .planintro .pi-badge {
    font-size: 0.625rem; /* 15 sept: Dennis - fontul ramane la 0.625rem (10px), doar padding/gap/iconita mai mici */
    padding: 0.21875rem 0.5625rem 0.21875rem 0.4375rem;
    gap: 0.25rem;
  }
  .hero .planintro .pi-badge .ico { width: 0.5625rem; height: 0.5625rem; }
}

/* ---------------------------------------------------------------------------
   Cerut 15 sept (Dennis): textele cu gradient (.gt) au PESTE TOT animatia
   gradFlow (culoarea curge de la stanga la dreapta si inapoi, 9s), ca la
   „Inteligență Artificială" din hero. Fara background-size 220% animatia nu
   se vede (gradientul nu are unde sa alunece). Respecta prefers-reduced-motion. */
.gt { background-size: 220% 100%; background-position: 100% 0; animation: gradFlow 9s linear infinite; }
@keyframes gradFlow {
  0% { background-position: 100% 0; }
  50% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { .gt { animation: none; } }
/* „Personalizat" din cardul PAP: dupa intro-ul bigShine (care se termina cu pozitia 0%),
   curgerea continua fara salt cu gradFlowRev (0% -> 100% -> 0%), la infinit. */
@keyframes gradFlowRev {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.planintro h2 .big { animation: gradFlowRev 9s linear infinite; }
.hero.play .planintro h2 .big { animation: bigShine 1.5s var(--ease-out) 1.9s both, gradFlowRev 9s linear 3.4s infinite; }
@media (prefers-reduced-motion: reduce) { .planintro h2 .big { animation: none; } }

/* Cerut 15 sept (Dennis): pe desktop, in cardurile programelor, „lei / lună" (13px)
   era mai mare decat „anulezi oricând" (11.5px) si nu erau aliniate. Amandoua
   la 0.75rem / 700 (ca in cardul din hero), aliniate pe baseline; chip-ul
   (inline-flex cu svg in fata) e compensat cu masura decalajului ramas. */
@media (min-width: 1100px) {
  .pcard .priceline { align-items: baseline; }
  .pcard .priceline .per, .pcard .priceline .freecancel { font-size: 0.75rem; font-weight: 700; line-height: 1; }
  /* MASURAT: textul chip-ului statea cu 2px (la 12px font) mai sus decat „lei / lună” - 1/6 din font */
  .pcard .priceline .freecancel { align-self: baseline; position: relative; top: 0.1667em; }
}

/* Cerut 17 sept (Dennis): pe desktop coperta programului lasa sa se vada colturile
   rotunjite din imaginea-sursa pe latura dreapta (containerul e cu colturi drepte
   la >=1100px). Zoom-ul implicit creste de la 1.075 la 1.13, cat sa iasa colturile
   din cadru; la hover urca la 1.17 (pasul de zoom ramane). */
@media (min-width: 1100px) {
  .pcard .media .cov img { transform: scale(1.13); }
  .pcard:hover .media .cov img { transform: scale(1.17); }
  @keyframes covZoom { from { transform: scale(1.2); } to { transform: scale(1.13); } }
}

/* Cerut 17 sept (Dennis), pe mobil: .detlink cu padding sus/jos la jumatate (9 -> 4.5px;
   min-height coborat de la 44 la 35px, altfel padding-ul nu s-ar fi vazut), butonul
   cardului si descrierea fara margin-top. */
@media (max-width: 1099.98px) {
  .detlink { padding-top: 0.28125rem; padding-bottom: 0.28125rem; min-height: 2.1875rem; }
  .pcard .body .btn, .pcard .body .cta { margin-top: 0; }
  .pcard .pdesc { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO A+ (mobil, <1100px; v1: <720px) — v1.2 · 26 sept 2026
   Specificația completă: „Upgrade design Dennis/" (README + 01-specificatii-design).

   Regula stă la COADA fișierului ca să bată toate suprascrierile mobile de mai
   sus (treptele <760px și <720px înălțime, cele din 7-17 sept). Desktopul
   (>=1100px) nu se atinge: toate regulile sunt sub @media (max-width: 1099.98px),
   iar elementele noi (.hero-dots, .sb-spark, .sb-ring, .hero-chat) sunt ascunse
   de la 1100px (desktopul S le reia, sub `html.lp-d`, la coada fișierului).

   Ce face, pe scurt:
   · pe mobil dispar subtitlul, „SAU", cardul .planintro și „· Nutriționist &
     Cercetător 🇬🇧"; în locul cardului apare .hero-chat (Dr. Andu Preda întreabă
     „Sau… vrei un program alimentar personalizat?", butonul „Da, vreau" → #program);
   · „Gratuit, fără cont" devine eticheta de pe marginea barei de căutare;
   · bara de căutare e mai înaltă, cu contur în gradient care se rotește lent;
   · spațierea: titlu → căutare = legendă → card (margini `auto` egale);
   · coregrafia de deschidere pornește când JS scoate clasa `.pre` (după fonturi);
   · în spatele titlului: câmpul de puncte (canvas, desenat din home.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* unghiul conturului rotativ al barei (at-rule global, nu poate sta în @media) */
@property --sb-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* elementele A+ nu există pe desktop */
@media (min-width: 1100px) {
  .hero-dots,
  .hero .sb-spark,
  .hero .sb-ring,
  .hero-chat {
    display: none !important;
  }
}

@media (max-width: 1099.98px) {
  /* ── 0 · ce iese din hero pe mobil ── */
  .hero .sub,
  .hero .saudiv,
  .hero .planintro,
  .hero .tr-extra {
    display: none !important;
  }

  /* ── 1 · bara de sus: sigla se termină exact unde începe „N"-ul din „Nutriție".
         Lățimea exactă o pune home.js (alignBrand → --brand-w); fallback-ul CSS
         e aceeași formulă la titlu de 8.9vw. ── */
  .topbar .brand .brand-logo { /* 0,3,0: bate `.topbar .brand svg` (7.5rem) de mai sus */
    width: var(--brand-w, calc(33vw - 1rem));
    height: auto;
    aspect-ratio: 413 / 100;
  }

  /* ── 2 · titlul (A+ are loc pentru titlul mare pe toate telefoanele înalte) ── */
  .hero .title {
    font-size: clamp(1.625rem, 8.9vw, 2.375rem);
    margin-top: 0;
  }
  .hero .title .xwrap {
    margin-top: 0.38em;
    margin-bottom: 0.38em;
  }
  .hero .title .x {
    filter: drop-shadow(0 0 0.125rem rgba(0, 194, 255, 0.35)); /* × clar, fără ceață */
  }
  .hero .title .gt {
    padding-bottom: 0.2em; /* virgula lui ț și „g"-ul întregi (text în gradient = pictat doar în cutie);
                              fără margine negativă: cutia titlului include virgula → spațiile se măsoară corect */
  }
  /* v2.1 · „+" devine „×" devreme, ca în v1.0: home.js pune `x-go` pe hero la 1 s de la pornirea
     coregrafiei, iar „+" se rotește în „×" (din adunare, înmulțire) și sclipește. Apoi „×" lansează
     valurile ca o praștie (home.js, „praștia"; sclipirea de la fiecare lansare e la coada fișierului).
     `x-prima` e pusă de home.js la fiecare încărcare (vezi CHANGELOG v2.0 / v2.1). */
  .hero.play.x-prima .title .x {
    transform: rotate(-45deg);
    animation: none;
  }
  .hero.play.x-prima.x-go .title .x {
    transform: none;
    animation: aPlusX 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .hero.play.x-prima.x-go .title .xwrap::before {
    animation: aXFlash 0.9s ease-out 0.4s both;
  }
  @keyframes aPlusX { /* −45° → 0°: rotire în sensul acelor de ceasornic */
    from { transform: rotate(-45deg); }
    to { transform: rotate(0); }
  }
  @keyframes aXFlash {
    0% { opacity: 0; }
    35% { opacity: 0.42; }
    100% { opacity: 0; }
  }

  /* ── 3 · bara de căutare ── */
  .hero .searchbar {
    position: relative;
    padding-top: 0.6875rem; /* eticheta „Gratuit" iese 11px deasupra barei → spațiu optic egal */
  }
  .hero .free-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1.375rem; /* centrul etichetei cade fix pe marginea de sus a barei */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    pointer-events: none;
  }
  .hero .free-pill {
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.3;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    background: #0a1411; /* opac: acoperă conturul barei */
    border-color: rgba(var(--ok-rgb), 0.34);
  }
  .hero .sb-pill {
    min-height: 4rem;
    padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
    background: linear-gradient(180deg, #131a28, #0d111a);
    border-color: transparent;
    box-shadow:
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.08),
      0 0.875rem 2rem -1rem rgba(0, 194, 255, 0.45);
  }
  .hero .sb-pill::before {
    filter: blur(1rem);
    opacity: 0.24;
  }
  .hero .sb-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.09375rem;
    pointer-events: none;
    background: conic-gradient(from var(--sb-ang), rgba(0, 194, 255, 0.95), rgba(124, 92, 252, 0.22) 22%, rgba(181, 33, 233, 0.95) 50%, rgba(124, 92, 252, 0.22) 78%, rgba(0, 194, 255, 0.95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: aSbSpin 11s linear infinite; /* 11 s = 2 valuri: un singur ceas pe toată pagina */
  }
  @keyframes aSbSpin {
    to { --sb-ang: 360deg; }
  }
  .hero .sb-spark {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    margin-right: 0.375rem;
    filter: drop-shadow(0 0 0.375rem rgba(124, 92, 252, 0.45));
  }
  .hero .sb-pill input {
    font-size: max(16px, 1rem); /* sub 16px iOS face zoom la focus (la <375px 1rem = 15px) */
    padding-left: 0.125rem;
    text-overflow: ellipsis;
  }
  .hero .sb-pill input::placeholder {
    color: #a5a8bc;
  }
  .hero .sb-go {
    width: 3.125rem;
    height: 3.125rem;
  }

  /* ── 4 · „Antrenat de Dr. Andu Preda" = legenda căutării (lipită de bară) ── */
  .hero .trained {
    margin-top: 0.875rem;
    gap: 0.5rem;
  }
  .hero .trained .tr-line {
    font-size: 0.8125rem;
  }
  .hero .trained .av {
    padding: 0.09375rem;
  }
  .hero .trained .av-sm img {
    width: 1.375rem;
    height: 1.375rem;
    border-width: 0.09375rem;
  }

  /* ── 5 · ritmul vertical: titlu → căutare = legendă → card (două margini `auto` egale) ── */
  .hero .searchbar {
    margin-top: 2.25rem;
  }
  .hero-chat {
    margin-top: 2.25rem;
  }
  @media (max-width: 520px) {
    .hero .wrap {
      justify-content: flex-start;
      row-gap: 1.25rem; /* spațiul minim, când ecranul e scund */
    }
    /* Ritmul ecranului: TREI spații egale, măsurate OPTIC (cum le vede ochiul, nu cutiile):
         sigla → vârful literelor din „Nutriție"
         = linia de bază a lui „Inteligență Artificială" → conturul barei
         = „Antrenat de…" → marginea cardului.
       Cele trei margini `auto` sunt egale; compensările de mai jos scot diferențele dintre
       cutii și ce se vede (măsurate pe pagina reală, țin pe 360–430px):
         · padding-top 0.45rem  — de la marginea de jos a siglei la vârful literelor;
         · -0.6875rem           — eticheta „Gratuit" iese 11px deasupra barei (e insignă, nu marginea barei);
         · -0.38em (pe titlu)   — cutia titlului coboară sub linia de bază (spațiu pentru ț/g). */
    .hero .tblock {
      margin-top: auto;
      padding-top: 0.45rem;
      margin-bottom: -0.6875rem;
    }
    .hero .title {
      margin-bottom: -0.38em;
    }
    .hero .searchbar,
    .hero-chat {
      margin-top: auto;
    }
  }

  /* ── 6 · cardul: Dr. Andu Preda întreabă ── */
  .hero-chat {
    position: relative;
    padding: 0.875rem;
    border-radius: 1.75rem;
    text-align: left;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022));
    box-shadow:
      0 1.375rem 2.75rem -1.375rem rgba(124, 92, 252, 0.55),
      0 0.625rem 1.625rem -0.75rem rgba(0, 0, 0, 0.65),
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
  }
  .hero-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(90% 70% at 0% 0%, rgba(0, 194, 255, 0.1), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(181, 33, 233, 0.13), transparent 60%);
  }
  .hero-chat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    pointer-events: none;
    opacity: 0.7;
    background: linear-gradient(150deg, rgba(0, 194, 255, 0.55), rgba(124, 92, 252, 0.18) 45%, rgba(181, 33, 233, 0.5) 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .hc-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 4.875rem; /* 2 rânduri rezervate: nimic nu sare când apare textul */
  }
  .hc-av {
    position: relative;
    flex: none;
    display: inline-flex;
    padding: 0.09375rem;
    border-radius: 50%;
    background: var(--grad);
    margin-top: 0.48rem; /* centrul pozei = mijlocul primului rând din bulă */
    box-shadow: 0 0 0.875rem -0.125rem rgba(124, 92, 252, 0.45);
  }
  .hc-av img {
    display: block;
    width: 1.9375rem; /* 34px cu inel */
    height: 1.9375rem;
    border-radius: 50%;
    border: 0.09375rem solid var(--bg);
    object-fit: cover;
  }
  .hc-av::after { /* „online" */
    content: "";
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow:
      0 0 0 0.15625rem #13161e,
      0 0 0.5rem rgba(var(--ok-rgb), 0.55);
  }
  .hc-bub {
    max-width: calc(100% - 2.75rem);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem 1.25rem 1.25rem 1.25rem; /* colțul drept „arată" spre poză */
    background: rgba(255, 255, 255, 0.07);
    border: 0.0625rem solid rgba(255, 255, 255, 0.09);
    font-size: 1.0625rem;
    line-height: 1.38;
    color: var(--fg-2);
    transform-origin: 0 0;
  }
  .hc-txt {
    margin: 0;
    text-wrap: balance;
  }
  .hc-txt b {
    color: #fff;
    font-weight: 700;
  }
  .hc-typing {
    display: none;
    gap: 0.3125rem;
    padding: 0.3125rem 0.125rem;
  }
  .hc-typing i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--muted);
    animation: aTyping 1s ease-in-out infinite;
  }
  .hc-typing i:nth-child(2) { animation-delay: 0.15s; }
  .hc-typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes aTyping {
    0%, 60%, 100% { opacity: 0.35; transform: none; }
    30% { opacity: 1; transform: translateY(-0.1875rem); }
  }
  .hc-act {
    position: relative;
    margin-top: 0.875rem;
  }
  .hc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.875rem;
    padding: 0 4rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    background-size: 150% 100%;
    color: #fff;
    font-weight: 700;
    font-size: 1.1875rem; /* 19px: trece pragul AA de „text mare" pe gradient */
    letter-spacing: -0.005em;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.875rem 1.875rem -0.5rem rgba(124, 92, 252, 0.55);
    animation: gradientShift 8s ease-in-out infinite;
    transition: transform 0.14s var(--ease-press);
  }
  .hc-btn:active {
    transform: scale(0.97);
  }
  .hc-arr {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    width: 3.125rem;
    height: 3.125rem;
    margin-top: -1.5625rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25);
  }
  .hc-arr .ico {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }
  .hc-btn::after { /* sclipirea: o trece valul (home.js adaugă .glint la fiecare al doilea val) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
    transform: translateX(-130%);
  }
  .hc-btn.glint::after {
    animation: aGlint 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  @keyframes aGlint {
    from { transform: translateX(-130%); }
    to { transform: translateX(130%); }
  }
  .hc-sent { /* după atingere, butonul devine mesajul trimis */
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.8125rem 1.125rem;
    border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
    transform-origin: 100% 100%;
    transition:
      opacity 0.2s ease,
      transform 0.45s var(--ease-press);
    box-shadow: 0 0.625rem 1.5rem -0.5rem rgba(124, 92, 252, 0.6);
  }
  .hc-sent .ico {
    width: 0.9375rem;
    height: 0.9375rem;
    stroke-width: 2.6;
  }

  /* stările cu JS (home.js pune .is-live): „scrie…" → mesajul curge → butonul.
     Fără JS cardul arată direct textul și butonul. */
  .hero-chat.is-live:not(.typed) .hc-typing {
    display: inline-flex;
  }
  .hero-chat.is-live:not(.typed) .hc-txt { /* ascuns vizual, dar citit de cititoarele de ecran */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hero-chat.is-live .hc-txt .w {
    display: inline-block;
    opacity: 0;
  }
  .hero-chat.is-live.typed .hc-txt .w {
    animation: aWordIn 0.5s var(--ease-emph) calc(var(--i, 0) * 55ms) both;
  }
  .hero-chat.is-live.typed .hc-bub {
    animation: aBubIn 0.45s var(--ease-press);
  }
  @keyframes aWordIn {
    from { opacity: 0; filter: blur(0.3125rem); transform: translateY(0.1875rem); }
    to { opacity: 1; filter: none; transform: none; }
  }
  @keyframes aBubIn {
    from { transform: scale(0.97); }
    to { transform: none; }
  }
  .hero-chat.is-live .hc-btn {
    opacity: 0;
    transform: translateY(0.625rem) scale(0.97);
    pointer-events: none;
    transition:
      opacity 0.45s ease,
      transform 0.6s var(--ease-press);
  }
  .hero-chat.is-live.ready .hc-btn {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .hero-chat.is-live.ready .hc-btn:active {
    transform: scale(0.97);
    transition-duration: 0.12s;
  }
  .hero-chat.is-live.sent .hc-btn { /* 0,4,0 + după .ready: altfel .ready ar ține butonul vizibil sub mesaj */
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition-duration: 0.2s;
  }
  .hero-chat.sent .hc-sent {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  /* ── 7 · câmpul de puncte (canvas desenat din home.js) ── */
  .hero-dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%; /* home.js îl întinde până la marginea cardului */
    z-index: 1; /* peste lumina .hero::before, sub conținut (.wrap = 2) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .hero.play:not(.pre) .hero-dots {
    opacity: 1;
  }
  /* plecarea spre chat (ask() pune body.lp-leaving): punctele se sting odată cu titlul,
     cu aceeași animație a site-ului — tranziția arată exact ca înainte de A+ */
  body.lp-leaving .hero-dots {
    animation: lpFadeAway 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* ── 8 · coregrafia deschiderii (un singur punct de atenție pe rând) ──
     0.00 „Nutriție" · 0.18 „+" · 0.30 „Inteligență Artificială"
     1.00–1.42 „+" → „×" și primul val (home.js) · 1.45 căutarea · 1.60 legenda
     1.75 cardul („scrie…") · 2.35 mesajul (home.js) · ~2.95 butonul (home.js)
     3.20 întrebările din căutare (home.js) · ~3.9 butonul sclipește (valul ajunge la card) */
  .hero.play .free-wrap,
  .hero.play .sb-field {
    animation: heroRise 0.55s var(--ease-emph) 1.45s both;
  }
  .hero.play .sb-pill::before {
    animation:
      auraFlash 0.9s var(--ease-out) 2s both,
      auraBreathe8 8s ease-in-out 2.9s infinite; /* același ceas ca valul (v2.1: 8 s; @keyframes la coada fișierului) */
  }
  .hero.play .trained {
    animation: emergeDown 0.55s var(--ease-emph) 1.6s both;
  }
  .hero.play .hero-chat {
    animation: cardRise 0.7s var(--ease-emph) 1.75s both;
  }
  /* până pornește coregrafia (JS scoate .pre după fonturi) conținutul stă ascuns.
     Plasă: fără JS, animația de mai jos se termină după 4 s și conținutul apare. */
  .hero.pre .title .ln,
  .hero.pre .title .xwrap,
  .hero.pre .free-wrap,
  .hero.pre .sb-field,
  .hero.pre .trained,
  .hero.pre .hero-chat {
    animation: aPreHold 4s linear backwards !important;
  }
  @keyframes aPreHold {
    from, to { opacity: 0; }
  }
  /* plasa existentă (.shown, pusă de home.js dacă intro-ul nu avansează) acoperă și cardul */
  .hero.shown .hero-chat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* ── 9 · telefoane scunde (SE, Android mic): aceleași elemente, puțin mai strâns ── */
  @media (max-height: 699.98px) {
    .hero .title { font-size: clamp(1.4375rem, 8.2vw, 2.1rem); }
    .hero .title .xwrap { margin-top: 0.24em; margin-bottom: 0.24em; }
    .hero .trained { margin-top: 0.75rem; }
    .hero .sb-pill { min-height: 3.625rem; }
    .hero .sb-go { width: 2.875rem; height: 2.875rem; }
    .hc-msg { min-height: 4.625rem; }
    .hc-act { margin-top: 0.75rem; }
    .hc-btn { min-height: 3.5rem; }
    .hc-arr { width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; }
  }
}

@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
  .hero.pre .title .ln,
  .hero.pre .title .xwrap,
  .hero.pre .free-wrap,
  .hero.pre .sb-field,
  .hero.pre .trained,
  .hero.pre .hero-chat,
  .hero-dots {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero .sb-ring,
  .hc-btn,
  body.lp-leaving .hero-dots {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   S — LANDING MOBIL (<1100px; v1: <720px) · v1.0 · 26 sept 2026 · v2.0 · 27 sept 2026
   Specificația completă: „Arhitectura Noua Design Dennis/" (README + 01-specificatii).
   Tot ce urmează e sub @media (max-width: 1099.98px): desktopul (≥1100px) nu se atinge. Pentru
   ferestrele pe jumătate de ecran și tablete (640–1099px) vezi „v2 · JUMĂTATE DE ECRAN" mai jos.

   S · 1  hero: deschiderea fără „clipiri", „Da, vreau", mesajul din card, eticheta
   S · 2  meniul: sticla care apare lin (v2.2), un val din buton, opțiunile pe rând
   S · 3  o singură lume de sus până jos (fără linii între secțiuni; ordinea pe mobil)
   S · 4  selectorul de program (.pc)
   S · 5  foaia de jos (același selector, de oriunde)
   S · 6  bara de jos (ține minte obiectivul)
   S · 7  blocurile de după program (.cx) — comune
   S · 8  „Știi mereu ce ai de mâncat": telefonul 3D și ecranele aplicației
   S · 9  „Mai mult decât un nutriționist" (prețul)   S · 10 „Evoluează odată cu tine"
   S · 11 „Începe acum" (Dr. Andu Preda)               S · 12 întrebările frecvente
   S · 13 mișcare redusă
   ═══════════════════════════════════════════════════════════════════════════ */

/* lumina din spatele selectorului ia culoarea obiectivului, lin (at-rule global) */
@property --pc-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(124, 92, 252, 0.14);
}

/* elementele S nu există pe desktop / tabletă */
@media (min-width: 1100px) {
  .pc,
  .pc-sheet,
  .pc-shade,
  .cx,
  .mn-waves,
  .pt-dots,
  .sb-sugs .sug-m {
    display: none !important;
  }
}

@media (max-width: 1099.98px) {
  /* ── S · 1 · hero ──
     Până pornește coregrafia, conținutul hero-ului e ascuns printr-un stil FIX, nu doar prin
     animația aPreHold: Safari putea desena un cadru înainte să pornească animația, iar bara
     de căutare apărea o clipă și dispărea. Clasa .lp-js o pune scriptul de lângă hero
     (home.html.twig), deci fără JS pagina rămâne vizibilă. */
  html.lp-js .hero.pre .title .ln,
  html.lp-js .hero.pre .title .xwrap,
  html.lp-js .hero.pre .free-wrap,
  html.lp-js .hero.pre .sb-field,
  html.lp-js .hero.pre .trained,
  html.lp-js .hero.pre .hero-chat,
  html.lp-js .hero.pre .hero-dots {
    opacity: 0 !important;
  }
  /* titlul selectorului se vedea o clipă prin bara translucidă a Safari până rula scriptul */
  html.lp-js .pc:not(.js) .pc-in,
  html.lp-js .pc:not(.js) .pc-t {
    opacity: 0;
  }
  .sb-sugs .sug-d {
    display: none;
  }
  /* cardul: lumina de sub el, mai discretă (nu „strigă" mai tare decât căutarea) */
  .hero .hero-chat {
    box-shadow:
      0 1.125rem 2.5rem -1.5rem rgba(124, 92, 252, 0.42),
      0 0.625rem 1.625rem -0.75rem rgba(0, 0, 0, 0.62),
      inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
  }
  .hero-chat .hc-act {
    margin-top: 0.75rem;
  }
  /* „Da, vreau": butonul original (gradient, sclipirea), la același nivel de atenție cu căutarea */
  .hero-chat .hc-btn {
    min-height: 3.375rem;
    padding: 0 3.75rem;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
    box-shadow:
      0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
      0 0.75rem 1.5rem -0.625rem rgba(124, 92, 252, 0.5);
  }
  .hero-chat .hc-arr {
    right: 0.3125rem;
    width: 2.625rem;
    height: 2.625rem;
    margin-top: -1.3125rem;
  }
  .hero-chat .hc-arr .ico {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2.2;
  }
  /* mesajul umple bula (lată cât butonul): două rânduri egale, 21px (fluid pe ecrane mici) */
  .hero-chat .hc-txt {
    font-size: min(21px, 5.2vw);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  /* locul bulei e rezervat exact la înălțimea mesajului scris (două rânduri + interiorul bulei):
     când „scrie…" devine text, cardul nu se mai mișcă nici măcar 1px */
  .hero-chat .hc-msg {
    min-height: calc(2.6 * min(21px, 5.2vw) + 1.5rem + 2px);
  }
  /* „Gratuit, fără cont": centrul etichetei cade exact pe linia vizibilă a conturului
     (inelul în gradient e cu 1,75px sub marginea casetei barei); interior egal */
  .hero .free-wrap {
    top: 0.109375rem;
  }
  .hero .free-pill {
    padding: 0.1875rem 0.5625rem;
  }

  /* ── S · 2 · meniul ──
     O sticlă întunecată peste pagină (hero-ul se vede estompat prin ea). v2.2: sticla apare printr-un
     fade lin (0,45 s), fără decupare; cercul din buton avea o margine tare care mătura ecranul în
     ~150 ms („un semicerc din colț"), iar pagina se întuneca brusc. Acum pagina se estompează treptat,
     lumina din centru se aprinde puțin după sticlă, opțiunile urcă pe rând, tot cu fade, iar din buton
     pleacă un val de puncte (home.js „S · D"). La închidere, opțiunile dispar primele, apoi sticla se stinge (în total ~0,37 s).
     `--i` și `--n` le pune home.js. */
  html.lp-js .navmenu {
    --e: cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    justify-content: center;
    gap: 0.25rem;
    padding: var(--hdr) 1.5rem calc(var(--hdr) + env(safe-area-inset-bottom));
    background: rgba(8, 11, 18, 0.7);
    -webkit-backdrop-filter: blur(26px) saturate(1.3);
    backdrop-filter: blur(26px) saturate(1.3);
    /* la închidere: opțiunile dispar primele (0,12 s), apoi se stinge sticla */
    transition:
      opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.07s,
      visibility 0s linear 0.37s;
  }
  html.lp-js .navmenu.open {
    opacity: 1;
    transition: opacity 0.45s var(--e);
  }
  html.lp-js .navmenu::after {
    background: none;
  }
  /* lumina din centru: se aprinde lin, puțin după sticlă */
  html.lp-js .navmenu::before {
    opacity: 0;
    transform: scale(0.94);
    background: radial-gradient(60% 34% at 50% 44%, rgba(124, 92, 252, 0.12), transparent 70%);
    transition:
      opacity 0.2s ease,
      transform 0.25s ease;
  }
  html.lp-js .navmenu.open::before {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.9s ease-out 0.12s,
      transform 1.1s var(--e) 0.12s;
  }
  .navmenu .mn-waves {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  html.lp-js .navmenu .mi {
    padding: 0.125rem 0 0.25rem;
  }
  /* opțiunile: urcă puțin și apar, pe rând (60 ms între ele), abia după ce sticla a acoperit pagina,
     ca textul meniului să nu se suprapună peste textul paginii, încă lizibil prin sticlă */
  html.lp-js .navmenu .mi a {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    font: 700 min(1.875rem, 7.6vw)/1.12 "Sora", "Inter", sans-serif;
    letter-spacing: -0.035em;
    color: #fff;
    opacity: 0;
    transform: translateY(0.875rem);
    transition:
      opacity 0.12s ease-out,
      transform 0.2s ease-in,
      color 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  html.lp-js .navmenu.open .mi a {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.6s ease-out calc(0.2s + var(--i, 0) * 0.06s),
      transform 0.8s var(--e) calc(0.2s + var(--i, 0) * 0.06s),
      color 0.2s;
  }
  html.lp-js .navmenu .mi a:active {
    background: linear-gradient(90deg, #00c2ff, #b521e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  html.lp-js .navmenu .nav-cta {
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    transform: translateY(0.75rem);
    opacity: 0;
    transition:
      transform 0.2s ease-in,
      opacity 0.12s ease-out;
  }
  html.lp-js .navmenu.open .nav-cta {
    transform: none;
    opacity: 1;
    transition:
      transform 0.8s var(--e) calc(0.24s + var(--n, 4) * 0.06s),
      opacity 0.6s ease-out calc(0.24s + var(--n, 4) * 0.06s);
  }

  /* ── S · 3 · o singură lume de sus până jos ──
     Secțiunile nu le despart linii, ci spațiu; nicio lumină nu e tăiată de marginea unei
     secțiuni. „Detalii program" începe cu produsul (telefonul), deci pe mobil #showcase
     urcă imediat după program: produsul → prețul → evoluează → încredere → întrebări. */
  hr.sep {
    display: none;
  }
  /* hero-ul tăia (overflow: hidden) lumina de sub cardul „Da, vreau" într-o linie dreaptă;
     pe orizontală rămâne tăiat (fără derulare laterală), pe verticală lumina curge mai departe */
  header.hero {
    overflow: visible;
    overflow-x: clip;
  }
  main#main {
    display: flex;
    flex-direction: column;
  }
  main#main > * {
    order: 2;
  }
  main#main > #program {
    order: 0;
  }
  main#main > #showcase {
    order: 1;
    padding: 0 !important;
  }
  #showcase .wrap > .shead,
  #showcase .wrap > .mk-stage {
    display: none !important;
  }
  /* linkurile din pagină mută focusul pe secțiune (accesibilitate); Safari desenează atunci
     un contur peste toată secțiunea. Focusul rămâne, conturul nu. */
  section[tabindex="-1"]:focus {
    outline: none;
  }

  /* ── S · 4 · selectorul de program ── */
  #program {
    padding: 0 !important;
    position: relative;
  }
  #program > .wrap {
    display: none;
  }
  .pc {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --gx: 124, 92, 252;
    --pc-glow: rgba(124, 92, 252, 0.14);
    --mut: #9b9bac;
    --dim: #7f8299;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    padding: 72px 20px 60px;
    text-align: center;
    transition: --pc-glow 0.9s ease;
  }
  .pc [hidden] {
    display: none !important;
  }
  .pc .ico,
  .pc-sheet .ico,
  .buybar.pc-bb .ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  /* lumina de sus ia culoarea obiectivului; se aprinde lin de la margine (nicio linie cu hero-ul) */
  .pc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(90% 42% at 50% 10%, var(--pc-glow), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
    mask-image: linear-gradient(to bottom, transparent, #000 26%);
  }
  /* aceeași rețea de puncte ca în hero, pe aceleași coloane (--dx îl pune home.js) */
  .pc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
    background-size: 20px 20px;
    background-position: var(--dx, center) center;
    -webkit-mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
  }
  /* valul care iese din spatele obiectivului ales (desenat doar cât trece) */
  .pc-waves {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
  }
  .pc-title {
    margin: 0;
    font: 800 clamp(30px, 8.6vw, 36px)/1.14 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
  }
  .pc-title span {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.1em;
  }
  .pc-sub {
    margin: 12px auto 0;
    max-width: 20em;
    font-size: 16px;
    line-height: 1.45;
    color: #a5a8bc;
  }

  /* pașii: „Obiectivul prinde formă. Programul evoluează." — linia continuă punctat spre al
     patrulea pas, iar săgeata circulară se rotește o dată, când secțiunea intră pe ecran */
  .pc-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
  }
  .pc-rl {
    position: absolute;
    top: 8px;
    left: 12.5%;
    right: 12.5%;
    height: 1.5px;
    margin-top: -0.75px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 66.667%, transparent 66.667%);
    transform-origin: 0 50%;
  }
  .pc-rl::after {
    content: "";
    position: absolute;
    left: 66.667%;
    right: 10px;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg, rgba(183, 171, 240, 0.5) 0 3px, transparent 3px 7px);
  }
  .pc-rl i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: var(--grad);
    box-shadow: 0 0 8px rgba(124, 92, 252, 0.8);
    transition: width 0.8s var(--e);
  }
  .pc-s {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .pc-d {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0e1119;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
    transition:
      background 0.45s var(--e),
      box-shadow 0.45s,
      transform 0.45s var(--spring);
  }
  .pc-d .ico {
    width: 10px;
    height: 10px;
    stroke-width: 3.4;
    color: #fff;
    opacity: 0;
    transform: scale(0.4);
    transition:
      opacity 0.3s,
      transform 0.45s var(--spring);
  }
  .pc-s em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--dim);
    transition: color 0.4s;
  }
  .pc-s.now .pc-d {
    background:
      linear-gradient(#0e1119, #0e1119) padding-box,
      var(--grad) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.12);
  }
  .pc-s.now em {
    color: #fff;
  }
  .pc-s.done .pc-d {
    background: var(--grad);
    border: 0;
    box-shadow: 0 4px 12px -4px rgba(124, 92, 252, 0.9);
    transform: scale(1.12);
  }
  .pc-s.done .pc-d .ico {
    opacity: 1;
    transform: none;
  }
  .pc-s.done em {
    color: #d3d3dd;
  }
  .pc-s4 .pc-d {
    width: 18px;
    height: 18px;
    margin-top: -1px;
    background: #0e1119;
    box-shadow: none;
  }
  .pc-s4 .pc-d .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
    color: #b7abf0;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pc-s4 em {
    color: #b7abf0;
  }
  .pc.js.run .pc-s4 .pc-d .ico {
    animation: pcLoop 1.3s var(--e) 0.95s both;
  }
  @keyframes pcLoop {
    from {
      transform: rotate(-270deg);
      opacity: 0.3;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }

  /* obiectivele: ilustrațiile din copertele programelor (imaginea o pune șablonul) */
  .pc-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 26px;
    text-align: left;
  }
  .pc-t {
    --c: 56, 140, 255;
    position: relative;
    display: block;
    height: calc((100vw - 60px) / 3 * 1.38);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 22px 36px -24px rgba(var(--c), 1);
    transition:
      transform 0.4s var(--spring),
      opacity 0.35s,
      filter 0.35s,
      box-shadow 0.35s;
  }
  .pc-t[data-g="mentinere"] {
    --c: 167, 139, 250;
  }
  .pc-t[data-g="masa"] {
    --c: 255, 84, 104;
  }
  .pc-art {
    position: absolute;
    inset: 0;
    background-position: center 24%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.9s var(--e);
  }
  .pc-t::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    pointer-events: none;
  }
  .pc-t::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 52%, rgba(8, 11, 18, 0.2) 64%, rgba(8, 11, 18, 0.84));
  }
  .pc-lbl {
    position: absolute;
    left: 12px;
    right: 8px;
    bottom: 11px;
    z-index: 2;
    font: 700 14.5px/1.12 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }
  .pc-r {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgb(var(--c));
    transition:
      background 0.3s,
      border-color 0.3s;
  }
  .pc-r .ico {
    width: 12px;
    height: 12px;
    stroke-width: 3.2;
    transform: scale(0);
    transition: transform 0.45s var(--spring);
  }
  .pc-t:active {
    transform: scale(0.965);
  }
  .pc-t[aria-checked="true"] .pc-r {
    background: #fff;
    border-color: #fff;
  }
  .pc-t[aria-checked="true"] .pc-r .ico {
    transform: none;
  }
  .pc-t[aria-checked="true"] .pc-art {
    transform: scale(1.06);
  }
  /* după alegere: celelalte rămân OPACE (nu se văd punctele sau valul prin ele), estompate doar
     prin culoare și lumină; cea aleasă primește inelul alb */
  .pc-tiles.chosen .pc-t {
    filter: saturate(0.5) brightness(0.52);
    transform: none;
  }
  .pc-tiles.chosen .pc-t[aria-checked="true"] {
    filter: none;
    box-shadow:
      0 0 0 2px #fff,
      0 24px 40px -18px rgba(var(--c), 1);
  }
  .pc-tiles.wave .pc-t {
    animation: pcWave 1s var(--e) both;
    animation-delay: calc(var(--i) * 0.12s);
  }
  @keyframes pcWave {
    0%,
    100% {
      transform: none;
    }
    40% {
      transform: translateY(-5px);
      box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, 0.6),
        0 26px 38px -20px rgba(var(--c), 1);
    }
  }

  /* prețul: un singur rând */
  .pc-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 28px 0 0;
    font-size: 15px;
    color: var(--mut);
  }
  .pc-price b {
    font: 800 23px/1 "Inter", sans-serif;
    letter-spacing: -0.035em;
    color: #fff;
  }
  .pc-price .sep {
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    align-self: center;
  }
  .pc-price .ok {
    color: var(--ok-t);
    font-weight: 500;
  }

  /* butonul: există de la început ca fantomă („Alege obiectivul ↑"), exact unde va fi. La
     alegere se aprinde pe loc (gradient, text nou, săgeata se rotește spre dreapta); nimic
     nu se mută, iar data de livrare are locul rezervat dedesubt. */
  .pc-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 16px 0 0;
    padding: 0 54px 0 28px;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    font: 700 min(17px, 4.35vw)/1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9, #00c2ff);
    background-size: 300% 100%;
    animation: pcShift 8s ease-in-out infinite;
    box-shadow: 0 16px 34px -14px rgba(124, 92, 252, 0.95);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .pc-cta i {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
  }
  .pc-cta i .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
  .pc-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .pc-cta.glint::after {
    animation: pcGlint 1.1s ease-out;
  }
  .pc-cta:active {
    transform: scale(0.97);
  }
  @keyframes pcShift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  @keyframes pcGlint {
    to {
      transform: translateX(120%);
    }
  }
  .pc .pc-cta {
    background: rgba(255, 255, 255, 0.055);
    animation: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
    color: #c9cbd8;
    transition:
      color 0.4s,
      box-shadow 0.5s;
  }
  .pc .pc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9, #00c2ff);
    background-size: 300% 100%;
    animation: pcShift 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
  .pc .pc-cta i {
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.4s;
  }
  .pc .pc-cta i .ico {
    transform: rotate(-90deg);
    transition: transform 0.6s var(--spring);
  }
  .pc .pc-act {
    display: grid;
    grid-template-rows: 1fr;
  }
  .pc-cl {
    display: grid;
  }
  .pc-cl > span {
    grid-area: 1 / 1;
    transition:
      opacity 0.35s ease,
      transform 0.5s var(--e);
  }
  .pc-cl .b {
    opacity: 0;
    transform: translateY(6px);
  }
  .pc.chosen .pc-cta {
    color: #fff;
    box-shadow: 0 16px 34px -14px rgba(124, 92, 252, 0.95);
  }
  .pc.chosen .pc-cta::before {
    opacity: 1;
  }
  .pc.chosen .pc-cta i {
    background: rgba(255, 255, 255, 0.2);
  }
  .pc.chosen .pc-cta i .ico {
    transform: none;
  }
  .pc.chosen .pc-cl .a {
    opacity: 0;
    transform: translateY(-6px);
  }
  .pc.chosen .pc-cl .b {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
  }
  .pc .pc-cta:active {
    transform: scale(0.97);
  }
  .pc .pc-cta.nudge {
    animation: pcNudge 0.5s var(--e);
  }
  @keyframes pcNudge {
    30% {
      transform: translateY(-3px);
    }
  }
  .pc-when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 2px;
    font-size: 13.5px;
    color: var(--mut);
  }
  .pc-when .ico {
    width: 15px;
    height: 15px;
    color: rgb(var(--gx));
    filter: brightness(1.4);
    transition: color 0.6s;
  }
  .pc-when b {
    color: #fff;
    font-weight: 600;
  }
  .pc .pc-when {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s ease 0.2s,
      visibility 0s 0.65s;
  }
  .pc.chosen .pc-when {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.45s ease 0.2s,
      visibility 0s;
  }
  .pc-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 0;
  }
  .pc-links span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
  }
  .pc-links a {
    padding: 6px 0;
    font: 500 14px/1 "Inter", sans-serif;
    color: #b7abf0;
    text-decoration: underline;
    text-decoration-color: rgba(183, 171, 240, 0.3);
    text-underline-offset: 5px;
    cursor: pointer;
  }
  .pc-links a:active {
    opacity: 0.7;
  }

  /* intrarea (când secțiunea ajunge pe ecran) */
  .pc.js .pc-in {
    opacity: 0;
    transform: translateY(12px);
  }
  .pc.js.run .pc-in {
    animation: pcUp 0.75s var(--e) both;
    animation-delay: calc(var(--d) * 1s);
  }
  .pc.js .pc-t {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  .pc.js.run .pc-t {
    animation: pcTile 0.7s var(--e) both;
    animation-delay: calc(0.26s + var(--i) * 0.08s);
  }
  .pc.js .pc-rl {
    transform: scaleX(0);
  }
  .pc.js.run .pc-rl {
    transform: none;
    transition: transform 0.9s var(--e) 0.3s;
  }
  .pc.js.settled .pc-in,
  .pc.js.settled .pc-t {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .pc.js.settled .pc-tiles.chosen .pc-t,
  .pc.js.settled .pc-tiles.wave .pc-t {
    transform: none;
  }
  .pc.js.settled .pc-tiles.wave .pc-t {
    animation: pcWave 1s var(--e) both;
    animation-delay: calc(var(--i) * 0.12s);
  }
  @keyframes pcUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes pcTile {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 1099.98px) and (max-height: 640px) {
  .pc {
    padding-top: 34px;
    padding-bottom: 24px;
  }
  .pc-rail {
    margin-top: 22px;
  }
  .pc-tiles {
    margin-top: 20px;
  }
  .pc-t {
    height: calc((100vw - 60px) / 3 * 1.14);
  }
  .pc-price {
    margin-top: 20px;
  }
}

@media (max-width: 1099.98px) {
  /* ── S · 5 · foaia de jos ──
     Cine a trecut de secțiune fără să aleagă nu e trimis înapoi sus: bara de jos și
     butoanele de final deschid aici același selector. Alegerea e una singură (pagina,
     foaia, bara și finalul o arată la fel). */
  .pc-shade {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(4, 6, 10, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
    touch-action: none;
  }
  .pc-shade.open {
    opacity: 1;
  }
  .pc-sheet {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --gx: 124, 92, 252;
    --pc-glow: rgba(124, 92, 252, 0.14);
    --mut: #9b9bac;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    isolation: isolate;
    max-height: calc(100svh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
    text-align: center;
    background: #0f121b;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 -30px 60px -24px rgba(0, 0, 0, 0.9);
    transform: translateY(105%);
    transition:
      transform 0.55s var(--e),
      --pc-glow 0.9s ease;
  }
  .pc-sheet.open {
    transform: none;
  }
  .pc-sheet.drag {
    transition: none;
  }
  .pc-sheet[hidden],
  .pc-shade[hidden] {
    display: none !important;
  }
  .pc-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(90% 40% at 50% 0%, var(--pc-glow), transparent 72%);
  }
  .pc-grab {
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
  }
  .pc-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #cfd0da;
    cursor: pointer;
  }
  .pc-x .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
  }
  .pc-sh-t {
    margin: 22px 0 0;
    font: 800 27px/1.1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
  }
  .pc-sh-s {
    margin: 8px 0 0;
    font-size: 15px;
    color: #a5a8bc;
  }
  .pc-sheet .pc-tiles {
    margin-top: 24px;
  }
  .pc-sheet .pc-price {
    margin-top: 24px;
  }
  /* butonul din foaie apare abia după alegere (se deschide lin, nimic nu sare) */
  .pc-sheet .pc-act {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--e);
  }
  .pc-sheet .pc-act > div {
    overflow: hidden;
  }
  .pc-sheet.chosen .pc-act {
    grid-template-rows: 1fr;
  }
  .pc-sheet.opened .pc-act > div {
    overflow: visible;
  }
  .pc-sheet .pc-act .pc-cta,
  .pc-sheet .pc-act .pc-when {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.45s ease,
      transform 0.6s var(--e);
  }
  .pc-sheet.chosen .pc-act .pc-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
  }
  .pc-sheet.chosen .pc-act .pc-when {
    opacity: 1;
    transform: none;
    transition-delay: 0.22s;
  }
  /* intrarea în foaie: obiectivele urcă pe rând, după ce foaia s-a oprit */
  .pc-sheet .pc-t {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  .pc-sheet.open .pc-t {
    animation: pcTile 0.6s var(--e) both;
    animation-delay: calc(0.16s + var(--i) * 0.06s);
  }
  .pc-sheet.open.chosen .pc-t {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.pc-lock,
  html.pc-lock body {
    overflow: hidden;
  }

  /* ── S · 6 · bara de jos ──
     Apare când ai trecut de selector (logica existentă din home.js). Fără obiectiv: deschide
     foaia. Cu obiectiv: îl ține minte și duce direct în onboarding. Se retrage cât e pe ecran
     un buton de final sau foaia — niciodată două butoane deodată. */
  .buybar.pc-bb {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 13, 20, 0.86);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .buybar.pc-bb .inner {
    gap: 12px;
  }
  .buybar.pc-bb .px {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    font: inherit;
    text-shadow: none;
    white-space: nowrap;
  }
  .pc-bb-th {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8);
  }
  .pc-bb-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
  }
  .pc-bb-t b {
    font: 700 14.5px/1.2 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pc-bb-t small {
    font-size: 12.5px;
    font-weight: 500;
    color: #9b9bac;
  }
  .buybar.pc-bb .btn {
    flex: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 20px;
    border-radius: 999px;
    font: 700 15.5px/1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9);
    box-shadow: 0 10px 24px -12px rgba(124, 92, 252, 0.95);
  }
  .buybar.pc-bb .btn .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
  .buybar.pc-bb.pc-away {
    transform: translateY(130%) !important;
    opacity: 0 !important;
    pointer-events: none;
  }

  /* ── S · 7 · blocurile de după program (comune) ── */
  .cx {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --mut: #9b9bac;
    --dim: #7f8299;
    --fg2: #d3d3dd;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    --line: rgba(255, 255, 255, 0.075);
    text-align: center;
  }
  .cx .ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .cx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .cx-t,
  .cx .cx-t {
    margin: 0;
    font: 800 clamp(30px, 8.6vw, 36px)/1.05 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
    text-align: center;
  }
  .cx-t span {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.1em;
  }
  .cx-sub {
    margin: 12px auto 0;
    max-width: 20em;
    font-size: 16px;
    line-height: 1.45;
    color: #a5a8bc;
  }
  .cx-sub b {
    color: #fff;
    font-weight: 600;
  }
  /* originalele rămân în pagină pentru desktop; pe mobil le ține locul firul nou */
  #detalii,
  #dece,
  #intrebari {
    padding: 0 !important;
  }
  .pd ~ .wrap,
  .pe ~ .wrap,
  .pf ~ .wrap {
    display: none !important;
  }
  .pd,
  .pe,
  .pf {
    position: relative;
    padding: 84px 20px 80px;
  }
  /* intrarea: apar pe rând când ajung pe ecran */
  .cx.js .cx-in,
  .cx.js.cx-in {
    opacity: 0;
    transform: translateY(14px);
  }
  .cx.js.run .cx-in,
  .cx.js.run.cx-in {
    animation: cxUp 0.8s var(--e) both;
    animation-delay: calc(var(--d, 0) * 1s);
  }
  @keyframes cxUp {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 1099.98px) {
  /* ── S · 8 · „Știi mereu ce ai de mâncat": filele (un story), textul și telefonul ── */
  .pt {
    padding: 76px 0 72px;
  }
  /* filele = un story: patru bare subțiri care se umplu, eticheta dedesubt */
  .pt-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 26px 0 0; }
  .pt-tabs button { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 6px 0 4px; border: 0; background: none; font: 600 13px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: var(--dim); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 0.3s; }
  .pt-tabs button span { white-space: nowrap; }
  .pt-tabs button i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
  .pt-tabs button i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
  .pt-tabs button.done i::after { transform: none; opacity: 0.45; }
  .pt-tabs button[aria-selected="true"] { color: #fff; }
  .pt-tabs button[aria-selected="true"] i::after { transform: none; }
  .pt.auto .pt-tabs button i.go::after { animation: ptProg var(--pt-d, 4.8s) linear both; }
  @keyframes ptProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* textul de deasupra telefonului se schimbă odată cu ecranul */
  .pt-caps { position: relative; height: 46px; max-width: 21em; margin: 16px auto 0; }
  .pt-caps p { position: absolute; inset: 0; margin: 0; font-size: 15px; line-height: 1.5; color: #a5a8bc; text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.55s var(--e); }
  .pt-caps p.on { opacity: 1; transform: none; }
  .pt-caps b { display: block; color: #fff; font-weight: 600; }

  /* telefonul 3D: un iPhone desenat în CSS (ramă subțire, butoane laterale, grosime vizibilă
     când se înclină, insula deasupra barei de stare, sticlă cu reflexie, umbră pe „podea",
     lumină ambientală fără margini). Intră înclinat și se îndreaptă; fiecare ecran are poziția
     lui (--rx/--ry/--rz, puse de home.js), iar înapoi revine exact de unde a venit. */
  .pt-stage {
    position: relative;
    margin-top: 4px;
    padding-bottom: 12px;
  }
  .ph3d { --rx: 18deg; --ry: -22deg; --rz: 4deg; --w: min(248px, 64vw); position: relative; margin: 20px auto 0; perspective: 1200px; perspective-origin: 50% 20%; }
  .ph3d.in { --rx: 6deg; --ry: -9deg; --rz: 1.5deg; animation: phFloat 7s ease-in-out 1.4s infinite; }
  @keyframes phFloat { 50% { transform: translateY(-4px); } }
  /* lumina din spate: largă, moale, fără margini */
  .ph3d::before { content: ""; position: absolute; left: -35%; right: -35%; top: -10%; bottom: -6%; z-index: -1; pointer-events: none; background: radial-gradient(30% 26% at 52% 70%, rgba(124, 92, 252, 0.34), transparent 72%), radial-gradient(26% 20% at 40% 18%, rgba(0, 194, 255, 0.1), transparent 72%), radial-gradient(38% 40% at 50% 46%, rgba(124, 92, 252, 0.08), transparent 75%); }
  /* umbra pe podea */
  .ph-floor { position: absolute; left: 50%; bottom: -6px; width: calc(var(--w) * 0.9); height: 34px; margin-left: calc(var(--w) * -0.45); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(8px); transform: translateX(10px); pointer-events: none; }

  .ph { position: relative; width: var(--w); aspect-ratio: 71.5 / 149.6; margin: 0 auto; padding: 2.3%; border-radius: 17% / 8.1%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform 1.15s cubic-bezier(0.3, 1.22, 0.55, 1);
    background: linear-gradient(150deg, #5d616c 0%, #2a2d34 18%, #16181d 45%, #2c2f37 78%, #54575f 100%);
    box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.32), inset 0 0 0 1.75px #0b0c10, inset 0 1px 1.5px rgba(255, 255, 255, 0.35), 0 50px 70px -40px rgba(0, 0, 0, 0.95); }
  /* grosimea: un al doilea strat, în spate */
  .ph::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, #3c3f47, #0d0e12 60%, #34373e); transform: translateZ(-7px); }
  .ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #07080b; transform: translateZ(-4px); }
  .ph-btn { position: absolute; width: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #6b6f79, #2a2c33); transform: translateZ(-3px); }
  .ph-btn.l1 { left: -2px; top: 17%; height: 4.5%; } .ph-btn.l2 { left: -2px; top: 25%; height: 8%; } .ph-btn.l3 { left: -2px; top: 35%; height: 8%; }
  .ph-btn.r1 { right: -2px; top: 27%; height: 12%; background: linear-gradient(270deg, #6b6f79, #2a2c33); }

  .ph-scr { position: relative; z-index: 1; height: 100%; border-radius: 15.4% / 7.2%; overflow: hidden; background: #0a0d14; transform: translateZ(0.5px); font-family: var(--font-display, "Sora"), sans-serif; color: #e8e8f0; text-align: left; -webkit-font-smoothing: antialiased; }
  .ph-scr::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 38%, transparent 70%, rgba(255, 255, 255, 0.04) 100%); }
  .ph-island { position: absolute; z-index: 8; top: 2.2%; left: 50%; width: 34%; height: 3.2%; margin-left: -17%; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04); }
  .ph-status { position: relative; z-index: 7; display: flex; align-items: center; justify-content: space-between; height: 9.5%; padding: 0 9% 0 11%; font: 700 11px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: #fff; }
  .ph-status .sig { display: inline-flex; align-items: center; gap: 4px; }
  .ph-status svg { width: 15px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ph-app { position: absolute; left: 0; right: 0; top: 9.5%; bottom: 0; }
  .ph-home { position: absolute; z-index: 8; bottom: 1.4%; left: 50%; width: 36%; height: 4px; margin-left: -18%; border-radius: 3px; background: rgba(255, 255, 255, 0.55); }
  /* ecranele aplicației, fidele contului (user-plan-v5): fundal #080b12, gradient #00c2ff → #b521e9,
     violet #7c5cfc / #cbb8ff, ok #01db69, macronutrienți #36c5f0 / #ffb23c / #f76c9b */
  .ph-app { display: flex; flex-direction: column; background: #080b12; font-family: "Inter", sans-serif; }
  .ap-screens { position: relative; flex: 1; min-height: 0; }
  .ap-s { position: absolute; inset: 0; overflow: hidden; padding: 0 0 8px; opacity: 0; transform: translateX(14px); transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; }
  .ap-s.on { opacity: 1; transform: none; }
  .ap-s.off { transform: translateX(-14px); }
  .ap-s.on > * { animation: apIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .ap-s.on > :nth-child(2) { animation-delay: 0.05s; } .ap-s.on > :nth-child(3) { animation-delay: 0.1s; } .ap-s.on > :nth-child(4) { animation-delay: 0.15s; }
  .ap-s.on > :nth-child(5) { animation-delay: 0.2s; } .ap-s.on > :nth-child(6) { animation-delay: 0.25s; } .ap-s.on > :nth-child(n+7) { animation-delay: 0.3s; }
  @keyframes apIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* antet */
  .ap-goal { flex: none; display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 4px 7px; border-radius: 99px; font: 700 8.5px/1 "Inter", sans-serif; color: #cbb8ff; background: rgba(124, 92, 252, 0.14); box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.35); white-space: nowrap; }
  .ap-goal i { font-style: normal; font-size: 8px; }
  .ap-goal::after { content: "›"; margin-left: 1px; opacity: 0.7; }

  /* săptămâna */

  /* nutriția zilei */

  /* mesele */

  /* rețeta */
  @keyframes apStar { from { color: #33364a; transform: scale(0.6); } 60% { transform: scale(1.25); } to { color: #ffb23c; transform: none; } }

  /* foile (cumpărături, modificări) */
  /* un produs se bifează sub ochii tăi */
  @keyframes apTick { from { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24); transform: scale(1); } 50% { transform: scale(1.25); } to { background: #01db69; box-shadow: none; transform: none; } }

  /* asistentul AI pentru modificări */
  @keyframes apPress { 50% { transform: scale(0.92); filter: brightness(1.25); } }
  @keyframes apToast { 0% { opacity: 0; transform: translate(-50%, 12px); } 18%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } }

  /* bara de jos a aplicației */
  /* conținutul intră din direcția mișcării: înainte din dreapta, înapoi din stânga */
  .ap-screens.back .ap-s {
    transform: translateX(-14px);
  }
  .ap-screens.back .ap-s.on {
    transform: none;
  }
  .ap-screens.back .ap-s.off {
    transform: translateX(14px);
  }
  /* rețeaua de puncte din spatele telefonului: halou discret + valul la fiecare schimbare de
     ecran (desenată de home.js „S · C") */
  .pt-dots {
    display: block;
    position: absolute;
    z-index: 0;
    top: -40px;
    left: calc(50% - 50vw);
    width: 100vw;
    height: calc(100% + 70px);
    pointer-events: none;
  }
  .pt-stage .ph3d {
    z-index: 1;
  }
  /* ── S · 9 · „Mai mult decât un nutriționist": prețul, ca două bare + prețul pe zi + o listă scurtă ── */
  .pd::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(80% 300px at 50% 150px, rgba(124, 92, 252, 0.12), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 110px);
    mask-image: linear-gradient(to bottom, transparent, #000 110px);
  }
  .pd-bars { position: relative; margin: 38px 0 0; padding: 22px 20px 20px; border-radius: 24px; text-align: left; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
  .pd-bar + .pd-bar { margin-top: 18px; }
  .pd-bar p { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
  .pd-bar p b { font: 600 14.5px/1.2 "Inter", sans-serif; color: var(--fg2); }
  .pd-bar p span { font-size: 13.5px; color: var(--mut); white-space: nowrap; }
  .pd-bar p em { font: 800 20px/1 "Inter", sans-serif; font-style: normal; letter-spacing: -0.035em; color: #fff; }
  .pd-bar.them p b, .pd-bar.them p em { color: #8d90a5; }
  .pd-bar.us p em { font-size: 26px; background: linear-gradient(90deg, #fff, #e3d9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pd-day { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .pd-day .ico { width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: #ffc59a; stroke-width: 1.8; background: rgba(255, 138, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 138, 60, 0.22); }
  .pd-day span { display: flex; flex-direction: column; gap: 3px; }
  .pd-day b { font: 800 17px/1.1 "Sora", "Inter", sans-serif; letter-spacing: -0.02em; color: #fff; }
  .pd-day small { font-size: 13.5px; color: #a5a8bc; }
  .pd-bar i { position: relative; display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); }
  .pd-bar s { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0.02); transition: transform 1.2s var(--e); }
  .pd-bar.us s { width: 12.4%; min-width: 22px; background: var(--grad); box-shadow: 0 0 16px rgba(124, 92, 252, 0.85); }
  .pd-bar.them s { width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.26)); transition-delay: 0.18s; }
  .pd.run .pd-bar s { transform: none; }
  .pd-save { position: absolute; top: 50%; left: max(calc(12.4% + 12px), 34px); margin-top: -13px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 12.5px/1 "Inter", sans-serif; letter-spacing: 0.01em; color: var(--ok-t); background: rgba(1, 219, 105, 0.1); box-shadow: inset 0 0 0 1px rgba(1, 219, 105, 0.28); opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.6s var(--spring); transition-delay: 1s; }
  .pd.run .pd-save { opacity: 1; transform: none; }

  /* lista: doar ce ne deosebește; coloana „Noi" e luminată */
  .pd-vs { width: 100%; margin: 34px 0 0; border-collapse: separate; border-spacing: 0; text-align: left; }
  .pd-vs thead th { padding: 14px 0 12px; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); text-align: center; }
  .pd-vs thead th.us { color: #fff; }
  .pd-vs .us { width: 66px; background: rgba(124, 92, 252, 0.09); }
  .pd-vs thead th.us { border-radius: 18px 18px 0 0; box-shadow: inset 0 1px 0 rgba(124, 92, 252, 0.35); }
  .pd-vs tbody tr:last-child .us { border-radius: 0 0 18px 18px; }
  .pd-vs tbody th { padding: 15px 10px 15px 0; font: 500 15px/1.3 "Inter", sans-serif; color: var(--fg2); border-top: 1px solid var(--line); }
  .pd-vs tbody td { text-align: center; border-top: 1px solid var(--line); }
  .pd-vs thead td:last-child, .pd-vs th:last-child, .pd-vs td:last-child { width: 66px; }
  .pd-vs i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
  .pd-vs i::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
  .pd-vs .y { color: #fff; background: var(--grad); box-shadow: 0 4px 12px -4px rgba(124, 92, 252, 0.9); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E"); }
  .pd-vs .y2 { color: #9b9bac; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E"); }
  .pd-vs .n { color: rgba(255, 120, 130, 0.62); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
  .pd-vs .n::before { width: 11px; height: 11px; }
  .pd.js .pd-vs tbody tr { opacity: 0; transform: translateY(8px); }
  .pd.js.run .pd-vs tbody tr { animation: cxUp 0.6s var(--e) both; }
  .pd.js.run .pd-vs tbody tr:nth-child(1) { animation-delay: 0.45s; }
  .pd.js.run .pd-vs tbody tr:nth-child(2) { animation-delay: 0.51s; }
  .pd.js.run .pd-vs tbody tr:nth-child(3) { animation-delay: 0.57s; }
  .pd.js.run .pd-vs tbody tr:nth-child(4) { animation-delay: 0.63s; }
  .pd.js.run .pd-vs tbody tr:nth-child(5) { animation-delay: 0.69s; }
  .pd.js.run .pd-vs tbody tr:nth-child(6) { animation-delay: 0.75s; }
  .pd.js.run .pd-vs tbody tr:nth-child(7) { animation-delay: 0.81s; }

  /* ── S · 10 · „Evoluează odată cu tine": promisiunea din pașii selectorului, arătată ca o curbă
     care urcă; un punct luminos o parcurge până la luna 3 (home.js „S · C") ── */
  .ps-evo { position: relative; padding: 48px 20px 84px; }
  .evo { margin: 34px 0 0; }
  .evo svg { display: block; width: 100%; height: auto; overflow: visible; }
  .evo-grid path { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; }
  .evo-grid path + path { stroke-dasharray: 2 5; stroke: rgba(255, 255, 255, 0.07); }
  .evo-line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 7px rgba(124, 92, 252, 0.75)); transition: stroke-dashoffset 1.7s var(--e) 0.35s; }
  .evo-area { opacity: 0; transition: opacity 1.4s ease 1s; }
  .evo-pts circle { fill: #0f121b; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.6s var(--spring); }
  .evo-pts .p1 { stroke: #2fb3ff; transition-delay: 0.55s; }
  .evo-pts .p2 { stroke: #7b6bff; transition-delay: 1.05s; }
  .evo-pts .p3 { fill: #b521e9; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(181, 33, 233, 0.9)); transition-delay: 1.6s; }
  .ps-evo.run .evo-line { stroke-dashoffset: 0; }
  .ps-evo.run .evo-area { opacity: 1; }
  .ps-evo.run .evo-pts circle { transform: none; }
  .evo-m { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 14px 0 0; padding: 0; }
  .evo-m li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px; }
  .evo-m small { font: 700 11px/1 "Inter", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
  .evo-m b { font: 600 14.5px/1.3 "Inter", sans-serif; letter-spacing: -0.01em; color: #c9cbd8; }
  .evo-m .nw { white-space: nowrap; }
  .evo-m li:last-child small { color: #b7abf0; }
  .evo-m li:last-child b { color: #fff; }
  .evo-comet { transition: opacity 0.5s ease; }
  .evo-how { margin: 26px auto 0; max-width: 21em; font-size: 14.5px; line-height: 1.5; color: var(--mut); text-wrap: balance; }

  /* ── S · 11 · „Începe acum": cine e în spate + o singură acțiune ── */
  .pe::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(90% 300px at 50% calc(100% - 150px), rgba(124, 92, 252, 0.15), transparent 72%);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 110px);
    mask-image: linear-gradient(to top, transparent, #000 110px);
  }
  .pe-by { display: flex; flex-direction: column; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .pe-by img { display: block; width: 84px; height: 84px; padding: 3px; border-radius: 50%; object-fit: cover; background: var(--grad); box-shadow: 0 14px 34px -14px rgba(124, 92, 252, 0.9); }
  .pe-by small { margin-top: 18px; font-size: 13.5px; color: var(--mut); }
  .pe-by b { display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; font: 800 20px/1.2 "Sora", "Inter", sans-serif; letter-spacing: -0.03em; color: #fff; }
  .pe-by b .ico { width: 17px; height: 17px; color: var(--dim); stroke-width: 2.2; }
  .pe-cred { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
  .pe-cred i { padding: 6px 11px; border-radius: 99px; font: 500 12.5px/1.2 "Inter", sans-serif; font-style: normal; color: #c9cbd8; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  /* v2 · sub etichete: calificarea, cu drapelul britanic desenat (SVG; emoji-ul de drapel apare ca „GB" pe Windows) */
  .pe-uk { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 13px/1.2 "Inter", sans-serif; color: #9b9eb3; }
  .pe-uk svg { width: 20px; height: 10px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
  .pe-by:active { opacity: 0.8; }
  .pe-end { margin-top: 64px; padding-top: 60px; border-top: 1px solid var(--line); }
  .pe-pick { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 0; font-size: 14.5px; color: var(--fg2); }
  .pe-pick[hidden] { display: none; }
  .pe-th { width: 30px; height: 30px; border-radius: 10px; background: center 30% / cover no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8); }
  .pe-pick b { font: 700 15px/1 "Sora", "Inter", sans-serif; letter-spacing: -0.015em; color: #fff; }
  .pe-pick button { padding: 6px 0 6px 4px; border: 0; background: none; font: 500 14px/1 "Inter", sans-serif; color: #b7abf0; text-decoration: underline; text-decoration-color: rgba(183, 171, 240, 0.3); text-underline-offset: 5px; cursor: pointer; }
  .pe .pe-cta { margin-top: 26px; }
  .pe-pick:not([hidden]) + .pe-cta { margin-top: 18px; }
  .pe-fine { display: flex; align-items: baseline; justify-content: center; margin: 14px 0 0; font-size: 13.5px; color: var(--mut); }
  .pe-fine b { color: #fff; font-weight: 700; }
  .pe-fine span { width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); align-self: center; }

  /* ── S · 12 · întrebările frecvente: iconiță pe subiect, prima deschisă din start; la final,
     același drum spre alegere ca la „Începe acum" ── */
  .pf-list { margin: 34px 0 0; text-align: left; }
  .pf-q { position: relative; border-radius: 20px; transition: background 0.4s ease, box-shadow 0.4s ease; }
  .pf-q + .pf-q::before { content: ""; position: absolute; top: 0; left: 62px; right: 12px; height: 1px; background: var(--line); transition: opacity 0.3s; }
  .pf-q.open { background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  .pf-q.open::before, .pf-q.open + .pf-q::before { opacity: 0; }
  .pf-q .qi { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #c8bbff; background: rgba(124, 92, 252, 0.1); box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.22); transition: background 0.4s, box-shadow 0.4s, color 0.4s; }
  .pf-q .qi .ico { width: 18px; height: 18px; stroke-width: 1.8; }
  .pf-q.open .qi { color: #fff; background: linear-gradient(135deg, rgba(0, 194, 255, 0.55), rgba(181, 33, 233, 0.55)); box-shadow: 0 8px 20px -10px rgba(124, 92, 252, 0.9); }
  .pf-q > button > span { flex: 1; }
  .pf-q > button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 66px; padding: 14px 12px; border: 0; background: none; text-align: left; font: 600 16px/1.35 "Inter", sans-serif; letter-spacing: -0.01em; color: #fff; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .pf-q .pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); transition: transform 0.5s var(--e), background 0.3s; }
  .pf-q .pm::before, .pf-q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -0.9px 0 0 -6px; border-radius: 2px; background: #cfd0da; }
  .pf-q .pm::after { transform: rotate(90deg); }
  .pf-q.open .pm { transform: rotate(135deg); background: rgba(124, 92, 252, 0.28); }
  .pf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--e); }
  .pf-a > div { overflow: hidden; }
  .pf-a p { margin: 0; padding: 0 22px 18px 62px; font-size: 15px; line-height: 1.55; color: #a5a8bc; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s, transform 0.5s var(--e); }
  .pf-a p b { color: var(--fg2); font-weight: 600; }
  .pf-q.open .pf-a { grid-template-rows: 1fr; }
  .pf-q.open .pf-a p { opacity: 1; transform: none; transition-delay: 0.08s; }
  .pf-go { margin: 40px 0 0; }
  .pf-go .pe-pick { margin-top: 0; }
  .pf-go .pe-cta { margin-top: 0; }
  .pf-go .pe-pick:not([hidden]) + .pe-cta { margin-top: 16px; }
  .pf-more { margin: 30px 0 0; font-size: 14.5px; color: var(--mut); }
  .pf-more a { margin-left: 4px; color: #b7abf0; text-decoration: underline; text-decoration-color: rgba(183, 171, 240, 0.3); text-underline-offset: 5px; }}

/* ── S · 13 · mișcare redusă: totul apare direct, fără animații ── */
@media (max-width: 1099.98px) and (prefers-reduced-motion: reduce) {
  .pc *,
  .pc *::before,
  .pc *::after,
  .pc-sheet,
  .pc-sheet * {
    animation: none !important;
    transition: none !important;
  }
  .pc.js .pc-in,
  .pc.js .pc-t,
  .pc.js .pc-rl,
  .pc-sheet .pc-t {
    opacity: 1 !important;
    transform: none !important;
  }
  .cx,
  .cx * {
    animation: none !important;
    transition: none !important;
  }
  .cx.js .cx-in,
  .cx.js.cx-in,
  .pd.js .pd-vs tbody tr {
    opacity: 1 !important;
    transform: none !important;
  }
  .pd .pd-bar s,
  .pd .pd-save {
    transform: none !important;
    opacity: 1 !important;
  }
  .ph3d,
  .ph3d.in {
    --rx: 4deg;
    --ry: -6deg;
    --rz: 1deg;
    animation: none;
  }
  .ph {
    transition: none;
  }
  html.lp-js .navmenu,
  html.lp-js .navmenu.open {
    clip-path: none;
    transition:
      opacity 0.2s,
      visibility 0s linear 0.2s;
  }
  html.lp-js .navmenu:not(.open) {
    opacity: 0;
  }
  html.lp-js .navmenu .mi a,
  html.lp-js .navmenu .nav-cta {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   v2 · piesele doar-desktop / doar-mobil din șablon
   `.lp-dk` = doar pe desktop (≥1100px, cu JS); `.lp-mb` = peste tot, mai puțin pe desktop.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099.98px) {
  .lp-dk { display: none !important; }
}
html:not(.lp-d) .lp-dk { display: none !important; }
@media (min-width: 1100px) {
  html.lp-d .lp-mb { display: none !important; }
}
/* textul de pe cerc desenat pentru desktop (home.js „D · 6"); sub 1100px rămâne SVG-ul din șablon */
.lpd-rot { display: none; }

/* ═════════════════════════════════════════════════════════════════════════════
   v2 · JUMĂTATE DE ECRAN ȘI TABLETĂ (640–1099px) — pagina de mobil, într-o coloană centrată
   Ferestrele pe jumătate de ecran (683 pe 1366, 716 pe 1440, 752, 860, 960 pe 1920), tabletele în
   portret și telefoanele în landscape primesc exact landing-ul de mobil (S). Aici doar se așază
   într-o singură coloană de 560px (conținut 528px), ca nimic să nu se întindă: hero-ul, selectorul,
   turul, prețul, întrebările, finalul, calculatorul, mailul și subsolul stau pe aceleași margini.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1099.98px) {
  :root {
    --lp-col: 560px;
    --lp-side: max(16px, calc((100vw - 528px) / 2));
  }
  .wrap,
  .hero .wrap {
    max-width: var(--lp-col);
  }
  /* blocurile S (până acum pe toată lățimea, cu 20px margine) → aceeași coloană */
  .pc,
  .cx.pd,
  .cx.ps-evo,
  .cx.pe,
  .cx.pf {
    max-width: calc(var(--lp-col) + 8px);
    margin-left: auto;
    margin-right: auto;
  }
  /* coperțile obiectivelor: raportul de pe telefon, dar după lățimea coloanei (nu a ecranului) */
  .pc-t {
    height: calc((min(100vw, var(--lp-col)) - 60px) / 3 * 1.38);
  }
  /* bara de sus și bara de jos: conținutul pe marginile coloanei, fundalul pe toată lățimea */
  .topbar {
    padding-left: var(--lp-side);
    padding-right: var(--lp-side);
  }
  .topbar .brand .brand-logo {
    width: min(var(--brand-w, 136px), 136px);
  }
  .buybar .inner {
    max-width: 528px;
    margin-left: auto;
    margin-right: auto;
  }
  /* foaia de alegere: centrată, cât coloana */
  .pc-sheet {
    max-width: calc(var(--lp-col) + 8px);
    margin-left: auto;
    margin-right: auto;
  }
}
/* mărimea de bază a textului: cea de pe telefon (fonts.css o coboară la 100% de la 760px) */
@media (min-width: 760px) and (max-width: 1099.98px) {
  html {
    font-size: 106%;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   v2 · rețeta din telefon, sub 1100px (telefon, jumătate de ecran, tabletă)
   Rețeta nouă are patru pași și, pe ecranul telefonului de aici, nu mai încape toată. Ca în
   aplicație: după ce apare, cardul se derulează singur până la capăt (pașii 3–4 și nota), apoi
   se aprind stelele. Distanța vine din înălțimea ecranului (100cqh) minus a cardului (100%),
   deci merge pe orice lățime; dacă într-o zi cardul încape, min(0px, …) îl lasă pe loc.
   Cu mișcare redusă, animațiile turului sunt oprite (mai sus) și cardul rămâne sus, ca înainte.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1099.98px) {
  #ptS1 {
    container-type: size;
  }
  /* aceeași listă de animații și pe .off: la plecarea spre ecranul următor cardul nu sare înapoi */
  #ptS1.on .ap-card,
  @keyframes apRead {
    to { translate: 0 min(0px, calc(100cqh - 100% - 6px)); }
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   v2.1 · praștia (toate lățimile)
   La fiecare lansare, lumina din spatele lui „×" sclipește: home.js alternează `xs-a` / `xs-b` pe
   .xwrap, ca animația să repornească la fiecare val. Aura barei de căutare respiră pe același ceas
   ca valurile (8 s); vârful ei cade când valul trece prin bară (ca în v1.0, la 5,5 s).
   ═════════════════════════════════════════════════════════════════════════════ */
.hero.play.x-prima.x-go .title .xwrap.xs-a::before {
  animation: xsFlashA 0.75s ease-out both;
}
.hero.play.x-prima.x-go .title .xwrap.xs-b::before {
  animation: xsFlashB 0.75s ease-out both;
}
@keyframes xsFlashA {
  0% { opacity: 0; }
  18% { opacity: 0.42; }
  100% { opacity: 0; }
}
@keyframes xsFlashB {
  0% { opacity: 0; }
  18% { opacity: 0.42; }
  100% { opacity: 0; }
}
@keyframes auraBreathe8 {
  0%,
  100% { opacity: 0.16; }
  34.4% { opacity: 0.3; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   D · DESKTOP (≥1100px) — stratul de desktop al landing-ului S · v2.0 · 27 sept 2026.
   Activ doar cu JS (scriptul din <body> pune `lp-d` pe <html>); fără JS rămâne desktopul vechi.
   D · 1  componentele S de mobil, la desktop (căutarea, cardul, selectorul, telefonul, prețul...)
   D · 2  așezarea de desktop: hero centrat, selectorul lângă telefon, dovezile, finalul
   D · 3  piesele de desktop din șablon (.lp-dk) și ordinea secțiunilor
   ═════════════════════════════════════════════════════════════════════════════ */
/* ── D · 1 · componentele S, la desktop ── */
@media (min-width: 1100px) {
  html.lp-d .hero.play.x-prima .title .x {
    transform: rotate(-45deg);
    animation: none;
  }
  html.lp-d .hero.play.x-prima.x-go .title .x {
    transform: none;
    animation: aPlusX 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  html.lp-d .hero.play.x-prima.x-go .title .xwrap::before {
    animation: aXFlash 0.9s ease-out 0.4s both;
  }
  @keyframes aPlusX {
    /* −45° → 0°: rotire în sensul acelor de ceasornic */
    from { transform: rotate(-45deg); }
    to { transform: rotate(0); }
  }
  @keyframes aXFlash {
    0% { opacity: 0; }
    35% { opacity: 0.42; }
    100% { opacity: 0; }
  }
  html.lp-d .hero .searchbar {
    position: relative;
    padding-top: 0.6875rem; /* eticheta „Gratuit" iese 11px deasupra barei → spațiu optic egal */
  }
  html.lp-d .hero .free-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1.375rem; /* centrul etichetei cade fix pe marginea de sus a barei */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    pointer-events: none;
  }
  html.lp-d .hero .free-pill {
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    line-height: 1.3;
    padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
    background: #0a1411; /* opac: acoperă conturul barei */
    border-color: rgba(var(--ok-rgb), 0.34);
  }
  html.lp-d .hero .sb-pill {
    min-height: 4rem;
    padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
    background: linear-gradient(180deg, #131a28, #0d111a);
    border-color: transparent;
    box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.08),
    0 0.875rem 2rem -1rem rgba(0, 194, 255, 0.45);
  }
  html.lp-d .hero .sb-pill::before {
    filter: blur(1rem);
    opacity: 0.24;
  }
  html.lp-d .hero .sb-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.09375rem;
    pointer-events: none;
    background: conic-gradient(from var(--sb-ang), rgba(0, 194, 255, 0.95), rgba(124, 92, 252, 0.22) 22%, rgba(181, 33, 233, 0.95) 50%, rgba(124, 92, 252, 0.22) 78%, rgba(0, 194, 255, 0.95));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: aSbSpin 11s linear infinite; /* 11 s = 2 valuri: un singur ceas pe toată pagina */
  }
  @keyframes aSbSpin {
    to { --sb-ang: 360deg; }
  }
  html.lp-d .hero .sb-spark {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    margin-right: 0.375rem;
    filter: drop-shadow(0 0 0.375rem rgba(124, 92, 252, 0.45));
  }
  html.lp-d .hero .sb-pill input {
    font-size: max(16px, 1rem); /* sub 16px iOS face zoom la focus (la <375px 1rem = 15px) */
    padding-left: 0.125rem;
    text-overflow: ellipsis;
  }
  html.lp-d .hero .sb-pill input::placeholder {
    color: #a5a8bc;
  }
  html.lp-d .hero .sb-go {
    width: 3.125rem;
    height: 3.125rem;
  }
  html.lp-d .hero .trained {
    margin-top: 0.875rem;
    gap: 0.5rem;
  }
  html.lp-d .hero .trained .tr-line {
    font-size: 0.8125rem;
  }
  html.lp-d .hero .trained .av {
    padding: 0.09375rem;
  }
  html.lp-d .hero .trained .av-sm img {
    width: 1.375rem;
    height: 1.375rem;
    border-width: 0.09375rem;
  }
  html.lp-d .hero-chat {
    position: relative;
    padding: 0.875rem;
    border-radius: 1.75rem;
    text-align: left;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022));
    box-shadow:
    0 1.375rem 2.75rem -1.375rem rgba(124, 92, 252, 0.55),
    0 0.625rem 1.625rem -0.75rem rgba(0, 0, 0, 0.65),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
  }
  html.lp-d .hero-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(90% 70% at 0% 0%, rgba(0, 194, 255, 0.1), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(181, 33, 233, 0.13), transparent 60%);
  }
  html.lp-d .hero-chat::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.0625rem;
    pointer-events: none;
    opacity: 0.7;
    background: linear-gradient(150deg, rgba(0, 194, 255, 0.55), rgba(124, 92, 252, 0.18) 45%, rgba(181, 33, 233, 0.5) 95%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  html.lp-d .hc-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 4.875rem; /* 2 rânduri rezervate: nimic nu sare când apare textul */
  }
  html.lp-d .hc-av {
    position: relative;
    flex: none;
    display: inline-flex;
    padding: 0.09375rem;
    border-radius: 50%;
    background: var(--grad);
    margin-top: 0.48rem; /* centrul pozei = mijlocul primului rând din bulă */
    box-shadow: 0 0 0.875rem -0.125rem rgba(124, 92, 252, 0.45);
  }
  html.lp-d .hc-av img {
    display: block;
    width: 1.9375rem; /* 34px cu inel */
    height: 1.9375rem;
    border-radius: 50%;
    border: 0.09375rem solid var(--bg);
    object-fit: cover;
  }
  html.lp-d .hc-av::after {
    /* „online" */
    content: "";
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--ok);
    box-shadow:
    0 0 0 0.15625rem #13161e,
    0 0 0.5rem rgba(var(--ok-rgb), 0.55);
  }
  html.lp-d .hc-bub {
    max-width: calc(100% - 2.75rem);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem 1.25rem 1.25rem 1.25rem; /* colțul drept „arată" spre poză */
    background: rgba(255, 255, 255, 0.07);
    border: 0.0625rem solid rgba(255, 255, 255, 0.09);
    font-size: 1.0625rem;
    line-height: 1.38;
    color: var(--fg-2);
    transform-origin: 0 0;
  }
  html.lp-d .hc-txt {
    margin: 0;
    text-wrap: balance;
  }
  html.lp-d .hc-txt b {
    color: #fff;
    font-weight: 700;
  }
  html.lp-d .hc-typing {
    display: none;
    gap: 0.3125rem;
    padding: 0.3125rem 0.125rem;
  }
  html.lp-d .hc-typing i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--muted);
    animation: aTyping 1s ease-in-out infinite;
  }
  html.lp-d .hc-typing i:nth-child(2) {
    animation-delay: 0.15s;
  }
  html.lp-d .hc-typing i:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes aTyping {
    0%, 60%, 100% { opacity: 0.35; transform: none; }
    30% { opacity: 1; transform: translateY(-0.1875rem); }
  }
  html.lp-d .hc-act {
    position: relative;
    margin-top: 0.875rem;
  }
  html.lp-d .hc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.875rem;
    padding: 0 4rem;
    border-radius: 62.4375rem;
    background: var(--grad);
    background-size: 150% 100%;
    color: #fff;
    font-weight: 700;
    font-size: 1.1875rem; /* 19px: trece pragul AA de „text mare" pe gradient */
    letter-spacing: -0.005em;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    box-shadow:
    0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
    0 0.875rem 1.875rem -0.5rem rgba(124, 92, 252, 0.55);
    animation: gradientShift 8s ease-in-out infinite;
    transition: transform 0.14s var(--ease-press);
  }
  html.lp-d .hc-btn:active {
    transform: scale(0.97);
  }
  html.lp-d .hc-arr {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    width: 3.125rem;
    height: 3.125rem;
    margin-top: -1.5625rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.17);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25);
  }
  html.lp-d .hc-arr .ico {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
  }
  html.lp-d .hc-btn::after {
    /* sclipirea: o trece valul (home.js adaugă .glint la fiecare al doilea val) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%);
    transform: translateX(-130%);
  }
  html.lp-d .hc-btn.glint::after {
    animation: aGlint 1.15s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  @keyframes aGlint {
    from { transform: translateX(-130%); }
    to { transform: translateX(130%); }
  }
  html.lp-d .hc-sent {
    /* după atingere, butonul devine mesajul trimis */
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.8125rem 1.125rem;
    border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
    transform-origin: 100% 100%;
    transition:
    opacity 0.2s ease,
    transform 0.45s var(--ease-press);
    box-shadow: 0 0.625rem 1.5rem -0.5rem rgba(124, 92, 252, 0.6);
  }
  html.lp-d .hc-sent .ico {
    width: 0.9375rem;
    height: 0.9375rem;
    stroke-width: 2.6;
  }
  html.lp-d .hero-chat.is-live:not(.typed) .hc-typing {
    display: inline-flex;
  }
  html.lp-d .hero-chat.is-live:not(.typed) .hc-txt {
    /* ascuns vizual, dar citit de cititoarele de ecran */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.lp-d .hero-chat.is-live .hc-txt .w {
    display: inline-block;
    opacity: 0;
  }
  html.lp-d .hero-chat.is-live.typed .hc-txt .w {
    animation: aWordIn 0.5s var(--ease-emph) calc(var(--i, 0) * 55ms) both;
  }
  html.lp-d .hero-chat.is-live.typed .hc-bub {
    animation: aBubIn 0.45s var(--ease-press);
  }
  @keyframes aWordIn {
    from { opacity: 0; filter: blur(0.3125rem); transform: translateY(0.1875rem); }
    to { opacity: 1; filter: none; transform: none; }
  }
  @keyframes aBubIn {
    from { transform: scale(0.97); }
    to { transform: none; }
  }
  html.lp-d .hero-chat.is-live .hc-btn {
    opacity: 0;
    transform: translateY(0.625rem) scale(0.97);
    pointer-events: none;
    transition:
    opacity 0.45s ease,
    transform 0.6s var(--ease-press);
  }
  html.lp-d .hero-chat.is-live.ready .hc-btn {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  html.lp-d .hero-chat.is-live.ready .hc-btn:active {
    transform: scale(0.97);
    transition-duration: 0.12s;
  }
  html.lp-d .hero-chat.is-live.sent .hc-btn {
    /* 0,4,0 + după .ready: altfel .ready ar ține butonul vizibil sub mesaj */
    opacity: 0;
    transform: scale(0.94);
    pointer-events: none;
    transition-duration: 0.2s;
  }
  html.lp-d .hero-chat.sent .hc-sent {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  html.lp-d .hero-dots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%; /* home.js îl întinde până la marginea cardului */
    z-index: 1; /* peste lumina .hero::before, sub conținut (.wrap = 2) */
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  html.lp-d .hero.play:not(.pre) .hero-dots {
    opacity: 1;
  }
  html.lp-d body.lp-leaving .hero-dots {
    animation: lpFadeAway 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  html.lp-d .hero.play .free-wrap,
  html.lp-d .hero.play .sb-field {
    animation: heroRise 0.55s var(--ease-emph) 1.45s both;
  }
  html.lp-d .hero.play .sb-pill::before {
    animation:
    auraFlash 0.9s var(--ease-out) 2s both,
    auraBreathe8 8s ease-in-out 2.9s infinite; /* același ceas ca valul (v2.1: 8 s; @keyframes la coada fișierului) */
  }
  html.lp-d .hero.play .trained {
    animation: emergeDown 0.55s var(--ease-emph) 1.6s both;
  }
  html.lp-d .hero.play .hero-chat {
    animation: cardRise 0.7s var(--ease-emph) 1.75s both;
  }
  html.lp-d .hero.pre .title .ln,
  html.lp-d .hero.pre .title .xwrap,
  html.lp-d .hero.pre .free-wrap,
  html.lp-d .hero.pre .sb-field,
  html.lp-d .hero.pre .trained,
  html.lp-d .hero.pre .hero-chat {
    animation: aPreHold 4s linear backwards !important;
  }
  @keyframes aPreHold {
    from, to { opacity: 0; }
  }
  html.lp-d .hero.shown .hero-chat {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (min-width: 1100px) {
  html.lp-d.lp-js .hero.pre .title .ln,
  html.lp-d.lp-js .hero.pre .title .xwrap,
  html.lp-d.lp-js .hero.pre .free-wrap,
  html.lp-d.lp-js .hero.pre .sb-field,
  html.lp-d.lp-js .hero.pre .trained,
  html.lp-d.lp-js .hero.pre .hero-chat,
  html.lp-d.lp-js .hero.pre .hero-dots {
    opacity: 0 !important;
  }
  html.lp-d.lp-js .pc:not(.js) .pc-in,
  html.lp-d.lp-js .pc:not(.js) .pc-t {
    opacity: 0;
  }
  html.lp-d .hero .hero-chat {
    box-shadow:
    0 1.125rem 2.5rem -1.5rem rgba(124, 92, 252, 0.42),
    0 0.625rem 1.625rem -0.75rem rgba(0, 0, 0, 0.62),
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
  }
  html.lp-d .hero-chat .hc-act {
    margin-top: 0.75rem;
  }
  html.lp-d .hero-chat .hc-btn {
    min-height: 3.375rem;
    padding: 0 3.75rem;
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
    box-shadow:
    0 0.125rem 0.5rem rgba(0, 0, 0, 0.3),
    0 0.75rem 1.5rem -0.625rem rgba(124, 92, 252, 0.5);
  }
  html.lp-d .hero-chat .hc-arr {
    right: 0.3125rem;
    width: 2.625rem;
    height: 2.625rem;
    margin-top: -1.3125rem;
  }
  html.lp-d .hero-chat .hc-arr .ico {
    width: 1.0625rem;
    height: 1.0625rem;
    stroke-width: 2.2;
  }
  html.lp-d .hero-chat .hc-txt {
    font-size: min(21px, 5.2vw);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  html.lp-d .hero-chat .hc-msg {
    min-height: calc(2.6 * min(21px, 5.2vw) + 1.5rem + 2px);
  }
  html.lp-d .hero .free-wrap {
    top: 0.109375rem;
  }
  html.lp-d .hero .free-pill {
    padding: 0.1875rem 0.5625rem;
  }
  html.lp-d .pc {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --gx: 124, 92, 252;
    --pc-glow: rgba(124, 92, 252, 0.14);
    --mut: #9b9bac;
    --dim: #7f8299;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    padding: 72px 20px 60px;
    text-align: center;
    transition: --pc-glow 0.9s ease;
  }
  html.lp-d .pc [hidden] {
    display: none !important;
  }
  html.lp-d .pc .ico,
  html.lp-d .pc-sheet .ico,
  html.lp-d .buybar.pc-bb .ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  html.lp-d .pc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(90% 42% at 50% 10%, var(--pc-glow), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
    mask-image: linear-gradient(to bottom, transparent, #000 26%);
  }
  html.lp-d .pc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.4px);
    background-size: 20px 20px;
    background-position: var(--dx, center) center;
    -webkit-mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
  }
  html.lp-d .pc-waves {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 38% at 50% 58%, #000 20%, transparent 75%);
  }
  html.lp-d .pc-title {
    margin: 0;
    font: 800 clamp(30px, 8.6vw, 36px)/1.14 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
  }
  html.lp-d .pc-title span {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.1em;
  }
  html.lp-d .pc-sub {
    margin: 12px auto 0;
    max-width: 20em;
    font-size: 16px;
    line-height: 1.45;
    color: #a5a8bc;
  }
  html.lp-d .pc-rail {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
  }
  html.lp-d .pc-rl {
    position: absolute;
    top: 8px;
    left: 12.5%;
    right: 12.5%;
    height: 1.5px;
    margin-top: -0.75px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 66.667%, transparent 66.667%);
    transform-origin: 0 50%;
  }
  html.lp-d .pc-rl::after {
    content: "";
    position: absolute;
    left: 66.667%;
    right: 10px;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg, rgba(183, 171, 240, 0.5) 0 3px, transparent 3px 7px);
  }
  html.lp-d .pc-rl i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: var(--grad);
    box-shadow: 0 0 8px rgba(124, 92, 252, 0.8);
    transition: width 0.8s var(--e);
  }
  html.lp-d .pc-s {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  html.lp-d .pc-d {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0e1119;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
    transition:
    background 0.45s var(--e),
    box-shadow 0.45s,
    transform 0.45s var(--spring);
  }
  html.lp-d .pc-d .ico {
    width: 10px;
    height: 10px;
    stroke-width: 3.4;
    color: #fff;
    opacity: 0;
    transform: scale(0.4);
    transition:
    opacity 0.3s,
    transform 0.45s var(--spring);
  }
  html.lp-d .pc-s em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--dim);
    transition: color 0.4s;
  }
  html.lp-d .pc-s.now .pc-d {
    background:
    linear-gradient(#0e1119, #0e1119) padding-box,
    var(--grad) border-box;
    border: 1.5px solid transparent;
    box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.12);
  }
  html.lp-d .pc-s.now em {
    color: #fff;
  }
  html.lp-d .pc-s.done .pc-d {
    background: var(--grad);
    border: 0;
    box-shadow: 0 4px 12px -4px rgba(124, 92, 252, 0.9);
    transform: scale(1.12);
  }
  html.lp-d .pc-s.done .pc-d .ico {
    opacity: 1;
    transform: none;
  }
  html.lp-d .pc-s.done em {
    color: #d3d3dd;
  }
  html.lp-d .pc-s4 .pc-d {
    width: 18px;
    height: 18px;
    margin-top: -1px;
    background: #0e1119;
    box-shadow: none;
  }
  html.lp-d .pc-s4 .pc-d .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
    color: #b7abf0;
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.lp-d .pc-s4 em {
    color: #b7abf0;
  }
  html.lp-d .pc.js.run .pc-s4 .pc-d .ico {
    animation: pcLoop 1.3s var(--e) 0.95s both;
  }
  @keyframes pcLoop {
    from {
    transform: rotate(-270deg);
    opacity: 0.3;
    }
    to {
    transform: none;
    opacity: 1;
    }
  }
  html.lp-d .pc-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 26px;
    text-align: left;
  }
  html.lp-d .pc-t {
    --c: 56, 140, 255;
    position: relative;
    display: block;
    height: calc((100vw - 60px) / 3 * 1.38);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 22px 36px -24px rgba(var(--c), 1);
    transition:
    transform 0.4s var(--spring),
    opacity 0.35s,
    filter 0.35s,
    box-shadow 0.35s;
  }
  html.lp-d .pc-t[data-g="mentinere"] {
    --c: 167, 139, 250;
  }
  html.lp-d .pc-t[data-g="masa"] {
    --c: 255, 84, 104;
  }
  html.lp-d .pc-art {
    position: absolute;
    inset: 0;
    background-position: center 24%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.9s var(--e);
  }
  html.lp-d .pc-t::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    pointer-events: none;
  }
  html.lp-d .pc-t::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 52%, rgba(8, 11, 18, 0.2) 64%, rgba(8, 11, 18, 0.84));
  }
  html.lp-d .pc-lbl {
    position: absolute;
    left: 12px;
    right: 8px;
    bottom: 11px;
    z-index: 2;
    font: 700 14.5px/1.12 "Sora", "Inter", sans-serif;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  }
  html.lp-d .pc-r {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgb(var(--c));
    transition:
    background 0.3s,
    border-color 0.3s;
  }
  html.lp-d .pc-r .ico {
    width: 12px;
    height: 12px;
    stroke-width: 3.2;
    transform: scale(0);
    transition: transform 0.45s var(--spring);
  }
  html.lp-d .pc-t:active {
    transform: scale(0.965);
  }
  html.lp-d .pc-t[aria-checked="true"] .pc-r {
    background: #fff;
    border-color: #fff;
  }
  html.lp-d .pc-t[aria-checked="true"] .pc-r .ico {
    transform: none;
  }
  html.lp-d .pc-t[aria-checked="true"] .pc-art {
    transform: scale(1.06);
  }
  html.lp-d .pc-tiles.chosen .pc-t {
    filter: saturate(0.5) brightness(0.52);
    transform: none;
  }
  html.lp-d .pc-tiles.chosen .pc-t[aria-checked="true"] {
    filter: none;
    box-shadow:
    0 0 0 2px #fff,
    0 24px 40px -18px rgba(var(--c), 1);
  }
  html.lp-d .pc-tiles.wave .pc-t {
    animation: pcWave 1s var(--e) both;
    animation-delay: calc(var(--i) * 0.12s);
  }
  @keyframes pcWave {
    0%,
    100% {
    transform: none;
    }
    40% {
    transform: translateY(-5px);
    box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.6),
    0 26px 38px -20px rgba(var(--c), 1);
    }
  }
  html.lp-d .pc-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 28px 0 0;
    font-size: 15px;
    color: var(--mut);
  }
  html.lp-d .pc-price b {
    font: 800 23px/1 "Inter", sans-serif;
    letter-spacing: -0.035em;
    color: #fff;
  }
  html.lp-d .pc-price .sep {
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    align-self: center;
  }
  html.lp-d .pc-price .ok {
    color: var(--ok-t);
    font-weight: 500;
  }
  html.lp-d .pc-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 16px 0 0;
    padding: 0 54px 0 28px;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    font: 700 min(17px, 4.35vw)/1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9, #00c2ff);
    background-size: 300% 100%;
    animation: pcShift 8s ease-in-out infinite;
    box-shadow: 0 16px 34px -14px rgba(124, 92, 252, 0.95);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  html.lp-d .pc-cta i {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.2);
  }
  html.lp-d .pc-cta i .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
  html.lp-d .pc-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  html.lp-d .pc-cta.glint::after {
    animation: pcGlint 1.1s ease-out;
  }
  html.lp-d .pc-cta:active {
    transform: scale(0.97);
  }
  @keyframes pcShift {
    0%,
    100% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
  }
  @keyframes pcGlint {
    to {
    transform: translateX(120%);
    }
  }
  html.lp-d .pc .pc-cta {
    background: rgba(255, 255, 255, 0.055);
    animation: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
    color: #c9cbd8;
    transition:
    color 0.4s,
    box-shadow 0.5s;
  }
  html.lp-d .pc .pc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9, #00c2ff);
    background-size: 300% 100%;
    animation: pcShift 8s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
  html.lp-d .pc .pc-cta i {
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.4s;
  }
  html.lp-d .pc .pc-cta i .ico {
    transform: rotate(-90deg);
    transition: transform 0.6s var(--spring);
  }
  html.lp-d .pc .pc-act {
    display: grid;
    grid-template-rows: 1fr;
  }
  html.lp-d .pc-cl {
    display: grid;
  }
  html.lp-d .pc-cl > span {
    grid-area: 1 / 1;
    transition:
    opacity 0.35s ease,
    transform 0.5s var(--e);
  }
  html.lp-d .pc-cl .b {
    opacity: 0;
    transform: translateY(6px);
  }
  html.lp-d .pc.chosen .pc-cta {
    color: #fff;
    box-shadow: 0 16px 34px -14px rgba(124, 92, 252, 0.95);
  }
  html.lp-d .pc.chosen .pc-cta::before {
    opacity: 1;
  }
  html.lp-d .pc.chosen .pc-cta i {
    background: rgba(255, 255, 255, 0.2);
  }
  html.lp-d .pc.chosen .pc-cta i .ico {
    transform: none;
  }
  html.lp-d .pc.chosen .pc-cl .a {
    opacity: 0;
    transform: translateY(-6px);
  }
  html.lp-d .pc.chosen .pc-cl .b {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
  }
  html.lp-d .pc .pc-cta:active {
    transform: scale(0.97);
  }
  html.lp-d .pc .pc-cta.nudge {
    animation: pcNudge 0.5s var(--e);
  }
  @keyframes pcNudge {
    30% {
    transform: translateY(-3px);
    }
  }
  html.lp-d .pc-when {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 2px;
    font-size: 13.5px;
    color: var(--mut);
  }
  html.lp-d .pc-when .ico {
    width: 15px;
    height: 15px;
    color: rgb(var(--gx));
    filter: brightness(1.4);
    transition: color 0.6s;
  }
  html.lp-d .pc-when b {
    color: #fff;
    font-weight: 600;
  }
  html.lp-d .pc .pc-when {
    opacity: 0;
    visibility: hidden;
    transition:
    opacity 0.45s ease 0.2s,
    visibility 0s 0.65s;
  }
  html.lp-d .pc.chosen .pc-when {
    opacity: 1;
    visibility: visible;
    transition:
    opacity 0.45s ease 0.2s,
    visibility 0s;
  }
  html.lp-d .pc-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 0;
  }
  html.lp-d .pc-links span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
  }
  html.lp-d .pc-links a {
    padding: 6px 0;
    font: 500 14px/1 "Inter", sans-serif;
    color: #b7abf0;
    text-decoration: underline;
    text-decoration-color: rgba(183, 171, 240, 0.3);
    text-underline-offset: 5px;
    cursor: pointer;
  }
  html.lp-d .pc-links a:active {
    opacity: 0.7;
  }
  html.lp-d .pc.js .pc-in {
    opacity: 0;
    transform: translateY(12px);
  }
  html.lp-d .pc.js.run .pc-in {
    animation: pcUp 0.75s var(--e) both;
    animation-delay: calc(var(--d) * 1s);
  }
  html.lp-d .pc.js .pc-t {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
  }
  html.lp-d .pc.js.run .pc-t {
    animation: pcTile 0.7s var(--e) both;
    animation-delay: calc(0.26s + var(--i) * 0.08s);
  }
  html.lp-d .pc.js .pc-rl {
    transform: scaleX(0);
  }
  html.lp-d .pc.js.run .pc-rl {
    transform: none;
    transition: transform 0.9s var(--e) 0.3s;
  }
  html.lp-d .pc.js.settled .pc-in,
  html.lp-d .pc.js.settled .pc-t {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.lp-d .pc.js.settled .pc-tiles.chosen .pc-t,
  html.lp-d .pc.js.settled .pc-tiles.wave .pc-t {
    transform: none;
  }
  html.lp-d .pc.js.settled .pc-tiles.wave .pc-t {
    animation: pcWave 1s var(--e) both;
    animation-delay: calc(var(--i) * 0.12s);
  }
  @keyframes pcUp {
    from {
    opacity: 0;
    transform: translateY(12px);
    }
    to {
    opacity: 1;
    transform: none;
    }
  }
  @keyframes pcTile {
    from {
    opacity: 0;
    transform: translateY(14px) scale(0.95);
    }
    to {
    opacity: 1;
    transform: none;
    }
  }
}

@media (min-width: 1100px) {
  html.lp-d .pc-shade {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(4, 6, 10, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
    touch-action: none;
  }
  html.lp-d .pc-shade.open {
    opacity: 1;
  }
  html.lp-d .pc-sheet {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --gx: 124, 92, 252;
    --pc-glow: rgba(124, 92, 252, 0.14);
    --mut: #9b9bac;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    isolation: isolate;
    max-height: calc(100svh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 30px 30px 0 0;
    text-align: center;
    background: #0f121b;
    box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 -30px 60px -24px rgba(0, 0, 0, 0.9);
    transform: translateY(105%);
    transition:
    transform 0.55s var(--e),
    --pc-glow 0.9s ease;
  }
  html.lp-d .pc-sheet.open {
    transform: none;
  }
  html.lp-d .pc-sheet.drag {
    transition: none;
  }
  html.lp-d .pc-sheet[hidden],
  html.lp-d .pc-shade[hidden] {
    display: none !important;
  }
  html.lp-d .pc-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(90% 40% at 50% 0%, var(--pc-glow), transparent 72%);
  }
  html.lp-d .pc-grab {
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
  }
  html.lp-d .pc-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #cfd0da;
    cursor: pointer;
  }
  html.lp-d .pc-x .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
  }
  html.lp-d .pc-sh-t {
    margin: 22px 0 0;
    font: 800 27px/1.1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
  }
  html.lp-d .pc-sh-s {
    margin: 8px 0 0;
    font-size: 15px;
    color: #a5a8bc;
  }
  html.lp-d .pc-sheet .pc-tiles {
    margin-top: 24px;
  }
  html.lp-d .pc-sheet .pc-price {
    margin-top: 24px;
  }
  html.lp-d .pc-sheet .pc-act {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s var(--e);
  }
  html.lp-d .pc-sheet .pc-act > div {
    overflow: hidden;
  }
  html.lp-d .pc-sheet.chosen .pc-act {
    grid-template-rows: 1fr;
  }
  html.lp-d .pc-sheet.opened .pc-act > div {
    overflow: visible;
  }
  html.lp-d .pc-sheet .pc-act .pc-cta,
  html.lp-d .pc-sheet .pc-act .pc-when {
    opacity: 0;
    transform: translateY(10px);
    transition:
    opacity 0.45s ease,
    transform 0.6s var(--e);
  }
  html.lp-d .pc-sheet.chosen .pc-act .pc-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
  }
  html.lp-d .pc-sheet.chosen .pc-act .pc-when {
    opacity: 1;
    transform: none;
    transition-delay: 0.22s;
  }
  html.lp-d .pc-sheet .pc-t {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  html.lp-d .pc-sheet.open .pc-t {
    animation: pcTile 0.6s var(--e) both;
    animation-delay: calc(0.16s + var(--i) * 0.06s);
  }
  html.lp-d .pc-sheet.open.chosen .pc-t {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.lp-d .buybar.pc-bb {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(10, 13, 20, 0.86);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  html.lp-d .buybar.pc-bb .inner {
    gap: 12px;
  }
  html.lp-d .buybar.pc-bb .px {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    font: inherit;
    text-shadow: none;
    white-space: nowrap;
  }
  html.lp-d .pc-bb-th {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-position: center 30%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8);
  }
  html.lp-d .pc-bb-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
  }
  html.lp-d .pc-bb-t b {
    font: 700 14.5px/1.2 "Sora", "Inter", sans-serif;
    letter-spacing: -0.015em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.lp-d .pc-bb-t small {
    font-size: 12.5px;
    font-weight: 500;
    color: #9b9bac;
  }
  html.lp-d .buybar.pc-bb .btn {
    flex: none;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 20px;
    border-radius: 999px;
    font: 700 15.5px/1 "Sora", "Inter", sans-serif;
    letter-spacing: -0.01em;
    color: #fff;
    background: linear-gradient(90deg, #00c2ff, #6a5cff, #b521e9);
    box-shadow: 0 10px 24px -12px rgba(124, 92, 252, 0.95);
  }
  html.lp-d .buybar.pc-bb .btn .ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
  }
  html.lp-d .buybar.pc-bb.pc-away {
    transform: translateY(130%) !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  html.lp-d .cx {
    --e: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --mut: #9b9bac;
    --dim: #7f8299;
    --fg2: #d3d3dd;
    --grad: linear-gradient(90deg, #00c2ff, #b521e9);
    --ok-t: #a6f0c6;
    --line: rgba(255, 255, 255, 0.075);
    text-align: center;
  }
  html.lp-d .cx .ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  html.lp-d .cx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.lp-d .cx-t,
  html.lp-d .cx .cx-t {
    margin: 0;
    font: 800 clamp(30px, 8.6vw, 36px)/1.05 "Sora", "Inter", sans-serif;
    letter-spacing: -0.04em;
    color: #fff;
    text-align: center;
  }
  html.lp-d .cx-t span {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.1em;
  }
  html.lp-d .cx-sub {
    margin: 12px auto 0;
    max-width: 20em;
    font-size: 16px;
    line-height: 1.45;
    color: #a5a8bc;
  }
  html.lp-d .cx-sub b {
    color: #fff;
    font-weight: 600;
  }
  html.lp-d .pd,
  html.lp-d .pe,
  html.lp-d .pf {
    position: relative;
    padding: 84px 20px 80px;
  }
  html.lp-d .cx.js .cx-in,
  html.lp-d .cx.js.cx-in {
    opacity: 0;
    transform: translateY(14px);
  }
  html.lp-d .cx.js.run .cx-in,
  html.lp-d .cx.js.run.cx-in {
    animation: cxUp 0.8s var(--e) both;
    animation-delay: calc(var(--d, 0) * 1s);
  }
  @keyframes cxUp {
    from {
    opacity: 0;
    transform: translateY(14px);
    }
    to {
    opacity: 1;
    transform: none;
    }
  }
}

@media (min-width: 1100px) {
  html.lp-d .pt {
    padding: 76px 0 72px;
  }
  html.lp-d .pt-tabs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 26px 0 0;
  }
  html.lp-d .pt-tabs button {
    display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; padding: 6px 0 4px; border: 0; background: none; font: 600 13px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: var(--dim); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: color 0.3s;
  }
  html.lp-d .pt-tabs button span {
    white-space: nowrap;
  }
  html.lp-d .pt-tabs button i {
    position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.1);
  }
  html.lp-d .pt-tabs button i::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0);
  }
  html.lp-d .pt-tabs button.done i::after {
    transform: none; opacity: 0.45;
  }
  html.lp-d .pt-tabs button[aria-selected="true"] {
    color: #fff;
  }
  html.lp-d .pt-tabs button[aria-selected="true"] i::after {
    transform: none;
  }
  html.lp-d .pt.auto .pt-tabs button i.go::after {
    animation: ptProg var(--pt-d, 4.8s) linear both;
  }
  @keyframes ptProg {
    from { transform: scaleX(0); } to { transform: scaleX(1); }
  }
  html.lp-d .pt-caps {
    position: relative; height: 46px; max-width: 21em; margin: 16px auto 0;
  }
  html.lp-d .pt-caps p {
    position: absolute; inset: 0; margin: 0; font-size: 15px; line-height: 1.5; color: #a5a8bc; text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.55s var(--e);
  }
  html.lp-d .pt-caps p.on {
    opacity: 1; transform: none;
  }
  html.lp-d .pt-caps b {
    display: block; color: #fff; font-weight: 600;
  }
  html.lp-d .pt-stage {
    position: relative;
    margin-top: 4px;
    padding-bottom: 12px;
  }
  html.lp-d .ph3d {
    --rx: 18deg; --ry: -22deg; --rz: 4deg; --w: min(248px, 64vw); position: relative; margin: 20px auto 0; perspective: 1200px; perspective-origin: 50% 20%;
  }
  html.lp-d .ph3d.in {
    --rx: 6deg; --ry: -9deg; --rz: 1.5deg; animation: phFloat 7s ease-in-out 1.4s infinite;
  }
  @keyframes phFloat {
    50% { transform: translateY(-4px); }
  }
  html.lp-d .ph3d::before {
    content: ""; position: absolute; left: -35%; right: -35%; top: -10%; bottom: -6%; z-index: -1; pointer-events: none; background: radial-gradient(30% 26% at 52% 70%, rgba(124, 92, 252, 0.34), transparent 72%), radial-gradient(26% 20% at 40% 18%, rgba(0, 194, 255, 0.1), transparent 72%), radial-gradient(38% 40% at 50% 46%, rgba(124, 92, 252, 0.08), transparent 75%);
  }
  html.lp-d .ph-floor {
    position: absolute; left: 50%; bottom: -6px; width: calc(var(--w) * 0.9); height: 34px; margin-left: calc(var(--w) * -0.45); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); filter: blur(8px); transform: translateX(10px); pointer-events: none;
  }
  html.lp-d .ph {
    position: relative; width: var(--w); aspect-ratio: 71.5 / 149.6; margin: 0 auto; padding: 2.3%; border-radius: 17% / 8.1%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform 1.15s cubic-bezier(0.3, 1.22, 0.55, 1);
    background: linear-gradient(150deg, #5d616c 0%, #2a2d34 18%, #16181d 45%, #2c2f37 78%, #54575f 100%);
    box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.32), inset 0 0 0 1.75px #0b0c10, inset 0 1px 1.5px rgba(255, 255, 255, 0.35), 0 50px 70px -40px rgba(0, 0, 0, 0.95);
  }
  html.lp-d .ph::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(150deg, #3c3f47, #0d0e12 60%, #34373e); transform: translateZ(-7px);
  }
  html.lp-d .ph::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: #07080b; transform: translateZ(-4px);
  }
  html.lp-d .ph-btn {
    position: absolute; width: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #6b6f79, #2a2c33); transform: translateZ(-3px);
  }
  html.lp-d .ph-btn.l1 {
    left: -2px; top: 17%; height: 4.5%;
  }
  html.lp-d .ph-btn.l2 {
    left: -2px; top: 25%; height: 8%;
  }
  html.lp-d .ph-btn.l3 {
    left: -2px; top: 35%; height: 8%;
  }
  html.lp-d .ph-btn.r1 {
    right: -2px; top: 27%; height: 12%; background: linear-gradient(270deg, #6b6f79, #2a2c33);
  }
  html.lp-d .ph-scr {
    position: relative; z-index: 1; height: 100%; border-radius: 15.4% / 7.2%; overflow: hidden; background: #0a0d14; transform: translateZ(0.5px); font-family: var(--font-display, "Sora"), sans-serif; color: #e8e8f0; text-align: left; -webkit-font-smoothing: antialiased;
  }
  html.lp-d .ph-scr::after {
    content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 38%, transparent 70%, rgba(255, 255, 255, 0.04) 100%);
  }
  html.lp-d .ph-island {
    position: absolute; z-index: 8; top: 2.2%; left: 50%; width: 34%; height: 3.2%; margin-left: -17%; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
  html.lp-d .ph-status {
    position: relative; z-index: 7; display: flex; align-items: center; justify-content: space-between; height: 9.5%; padding: 0 9% 0 11%; font: 700 11px/1 "Inter", sans-serif; letter-spacing: -0.01em; color: #fff;
  }
  html.lp-d .ph-status .sig {
    display: inline-flex; align-items: center; gap: 4px;
  }
  html.lp-d .ph-status svg {
    width: 15px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  html.lp-d .ph-app {
    position: absolute; left: 0; right: 0; top: 9.5%; bottom: 0;
  }
  html.lp-d .ph-home {
    position: absolute; z-index: 8; bottom: 1.4%; left: 50%; width: 36%; height: 4px; margin-left: -18%; border-radius: 3px; background: rgba(255, 255, 255, 0.55);
  }
  html.lp-d .ph-app {
    display: flex; flex-direction: column; background: #080b12; font-family: "Inter", sans-serif;
  }
  html.lp-d .ap-screens {
    position: relative; flex: 1; min-height: 0;
  }
  html.lp-d .ap-s {
    position: absolute; inset: 0; overflow: hidden; padding: 0 0 8px; opacity: 0; transform: translateX(14px); transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none;
  }
  html.lp-d .ap-s.on {
    opacity: 1; transform: none;
  }
  html.lp-d .ap-s.off {
    transform: translateX(-14px);
  }
  html.lp-d .ap-s.on > * {
    animation: apIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  html.lp-d .ap-s.on > :nth-child(2) {
    animation-delay: 0.05s;
  }
  html.lp-d .ap-s.on > :nth-child(3) {
    animation-delay: 0.1s;
  }
  html.lp-d .ap-s.on > :nth-child(4) {
    animation-delay: 0.15s;
  }
  html.lp-d .ap-s.on > :nth-child(5) {
    animation-delay: 0.2s;
  }
  html.lp-d .ap-s.on > :nth-child(6) {
    animation-delay: 0.25s;
  }
  html.lp-d .ap-s.on > :nth-child(n+7) {
    animation-delay: 0.3s;
  }
  @keyframes apIn {
    from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; }
  }
  html.lp-d .ap-goal {
    flex: none; display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; padding: 4px 7px; border-radius: 99px; font: 700 8.5px/1 "Inter", sans-serif; color: #cbb8ff; background: rgba(124, 92, 252, 0.14); box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.35); white-space: nowrap;
  }
  html.lp-d .ap-goal i {
    font-style: normal; font-size: 8px;
  }
  html.lp-d .ap-goal::after {
    content: "›"; margin-left: 1px; opacity: 0.7;
  }
  html.lp-d .ap-meal.done .ck::after,
  @keyframes apStar {
    from { color: #33364a; transform: scale(0.6); } 60% { transform: scale(1.25); } to { color: #ffb23c; transform: none; }
  }
  @keyframes apTick {
    from { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24); transform: scale(1); } 50% { transform: scale(1.25); } to { background: #01db69; box-shadow: none; transform: none; }
  }
  html.lp-d .ap-chat .ai,
  @keyframes apPress {
    50% { transform: scale(0.92); filter: brightness(1.25); }
  }
  @keyframes apToast {
    0% { opacity: 0; transform: translate(-50%, 12px); } 18%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); }
  }
  html.lp-d .ap-screens.back .ap-s {
    transform: translateX(-14px);
  }
  html.lp-d .ap-screens.back .ap-s.on {
    transform: none;
  }
  html.lp-d .ap-screens.back .ap-s.off {
    transform: translateX(14px);
  }
  html.lp-d .pt-dots {
    display: block;
    position: absolute;
    z-index: 0;
    top: -40px;
    left: calc(50% - 50vw);
    width: 100vw;
    height: calc(100% + 70px);
    pointer-events: none;
  }
  html.lp-d .pt-stage .ph3d {
    z-index: 1;
  }
  html.lp-d .pd::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(80% 300px at 50% 150px, rgba(124, 92, 252, 0.12), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 110px);
    mask-image: linear-gradient(to bottom, transparent, #000 110px);
  }
  html.lp-d .pd-bars {
    position: relative; margin: 38px 0 0; padding: 22px 20px 20px; border-radius: 24px; text-align: left; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line);
  }
  html.lp-d .pd-bar + .pd-bar {
    margin-top: 18px;
  }
  html.lp-d .pd-bar p {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px;
  }
  html.lp-d .pd-bar p b {
    font: 600 14.5px/1.2 "Inter", sans-serif; color: var(--fg2);
  }
  html.lp-d .pd-bar p span {
    font-size: 13.5px; color: var(--mut); white-space: nowrap;
  }
  html.lp-d .pd-bar p em {
    font: 800 20px/1 "Inter", sans-serif; font-style: normal; letter-spacing: -0.035em; color: #fff;
  }
  html.lp-d .pd-bar.them p b,
  html.lp-d .pd-bar.them p em {
    color: #8d90a5;
  }
  html.lp-d .pd-bar.us p em {
    font-size: 26px; background: linear-gradient(90deg, #fff, #e3d9ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  html.lp-d .pd-day {
    display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  }
  html.lp-d .pd-day .ico {
    width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: #ffc59a; stroke-width: 1.8; background: rgba(255, 138, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 138, 60, 0.22);
  }
  html.lp-d .pd-day span {
    display: flex; flex-direction: column; gap: 3px;
  }
  html.lp-d .pd-day b {
    font: 800 17px/1.1 "Sora", "Inter", sans-serif; letter-spacing: -0.02em; color: #fff;
  }
  html.lp-d .pd-day small {
    font-size: 13.5px; color: #a5a8bc;
  }
  html.lp-d .pd-bar i {
    position: relative; display: block; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06);
  }
  html.lp-d .pd-bar s {
    display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0.02); transition: transform 1.2s var(--e);
  }
  html.lp-d .pd-bar.us s {
    width: 12.4%; min-width: 22px; background: var(--grad); box-shadow: 0 0 16px rgba(124, 92, 252, 0.85);
  }
  html.lp-d .pd-bar.them s {
    width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.26)); transition-delay: 0.18s;
  }
  html.lp-d .pd.run .pd-bar s {
    transform: none;
  }
  html.lp-d .pd-save {
    position: absolute; top: 50%; left: max(calc(12.4% + 12px), 34px); margin-top: -13px; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font: 700 12.5px/1 "Inter", sans-serif; letter-spacing: 0.01em; color: var(--ok-t); background: rgba(1, 219, 105, 0.1); box-shadow: inset 0 0 0 1px rgba(1, 219, 105, 0.28); opacity: 0; transform: scale(0.8); transition: opacity 0.4s, transform 0.6s var(--spring); transition-delay: 1s;
  }
  html.lp-d .pd.run .pd-save {
    opacity: 1; transform: none;
  }
  html.lp-d .pd-vs {
    width: 100%; margin: 34px 0 0; border-collapse: separate; border-spacing: 0; text-align: left;
  }
  html.lp-d .pd-vs thead th {
    padding: 14px 0 12px; font: 700 11.5px/1 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); text-align: center;
  }
  html.lp-d .pd-vs thead th.us {
    color: #fff;
  }
  html.lp-d .pd-vs .us {
    width: 66px; background: rgba(124, 92, 252, 0.09);
  }
  html.lp-d .pd-vs thead th.us {
    border-radius: 18px 18px 0 0; box-shadow: inset 0 1px 0 rgba(124, 92, 252, 0.35);
  }
  html.lp-d .pd-vs tbody tr:last-child .us {
    border-radius: 0 0 18px 18px;
  }
  html.lp-d .pd-vs tbody th {
    padding: 15px 10px 15px 0; font: 500 15px/1.3 "Inter", sans-serif; color: var(--fg2); border-top: 1px solid var(--line);
  }
  html.lp-d .pd-vs tbody td {
    text-align: center; border-top: 1px solid var(--line);
  }
  html.lp-d .pd-vs thead td:last-child,
  html.lp-d .pd-vs th:last-child,
  html.lp-d .pd-vs td:last-child {
    width: 66px;
  }
  html.lp-d .pd-vs i {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle;
  }
  html.lp-d .pd-vs i::before {
    content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  }
  html.lp-d .pd-vs .y {
    color: #fff; background: var(--grad); box-shadow: 0 4px 12px -4px rgba(124, 92, 252, 0.9); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E");
  }
  html.lp-d .pd-vs .y2 {
    color: #9b9bac; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E");
  }
  html.lp-d .pd-vs .n {
    color: rgba(255, 120, 130, 0.62); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  }
  html.lp-d .pd-vs .n::before {
    width: 11px; height: 11px;
  }
  html.lp-d .pd.js .pd-vs tbody tr {
    opacity: 0; transform: translateY(8px);
  }
  html.lp-d .pd.js.run .pd-vs tbody tr {
    animation: cxUp 0.6s var(--e) both;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(1) {
    animation-delay: 0.45s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(2) {
    animation-delay: 0.51s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(3) {
    animation-delay: 0.57s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(4) {
    animation-delay: 0.63s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(5) {
    animation-delay: 0.69s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(6) {
    animation-delay: 0.75s;
  }
  html.lp-d .pd.js.run .pd-vs tbody tr:nth-child(7) {
    animation-delay: 0.81s;
  }
  html.lp-d .ps-evo {
    position: relative; padding: 48px 20px 84px;
  }
  html.lp-d .evo {
    margin: 34px 0 0;
  }
  html.lp-d .evo svg {
    display: block; width: 100%; height: auto; overflow: visible;
  }
  html.lp-d .evo-grid path {
    fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 1;
  }
  html.lp-d .evo-grid path + path {
    stroke-dasharray: 2 5; stroke: rgba(255, 255, 255, 0.07);
  }
  html.lp-d .evo-line {
    stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 7px rgba(124, 92, 252, 0.75)); transition: stroke-dashoffset 1.7s var(--e) 0.35s;
  }
  html.lp-d .evo-area {
    opacity: 0; transition: opacity 1.4s ease 1s;
  }
  html.lp-d .evo-pts circle {
    fill: #0f121b; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 0.6s var(--spring);
  }
  html.lp-d .evo-pts .p1 {
    stroke: #2fb3ff; transition-delay: 0.55s;
  }
  html.lp-d .evo-pts .p2 {
    stroke: #7b6bff; transition-delay: 1.05s;
  }
  html.lp-d .evo-pts .p3 {
    fill: #b521e9; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(181, 33, 233, 0.9)); transition-delay: 1.6s;
  }
  html.lp-d .ps-evo.run .evo-line {
    stroke-dashoffset: 0;
  }
  html.lp-d .ps-evo.run .evo-area {
    opacity: 1;
  }
  html.lp-d .ps-evo.run .evo-pts circle {
    transform: none;
  }
  html.lp-d .evo-m {
    display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 14px 0 0; padding: 0;
  }
  html.lp-d .evo-m li {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 4px;
  }
  html.lp-d .evo-m small {
    font: 700 11px/1 "Inter", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim);
  }
  html.lp-d .evo-m b {
    font: 600 14.5px/1.3 "Inter", sans-serif; letter-spacing: -0.01em; color: #c9cbd8;
  }
  html.lp-d .evo-m .nw {
    white-space: nowrap;
  }
  html.lp-d .evo-m li:last-child small {
    color: #b7abf0;
  }
  html.lp-d .evo-m li:last-child b {
    color: #fff;
  }
  html.lp-d .evo-comet {
    transition: opacity 0.5s ease;
  }
  html.lp-d .evo-how {
    margin: 26px auto 0; max-width: 21em; font-size: 14.5px; line-height: 1.5; color: var(--mut); text-wrap: balance;
  }
  html.lp-d .pe::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(90% 300px at 50% calc(100% - 150px), rgba(124, 92, 252, 0.15), transparent 72%);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 110px);
    mask-image: linear-gradient(to top, transparent, #000 110px);
  }
  html.lp-d .pe-by {
    display: flex; flex-direction: column; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  html.lp-d .pe-by img {
    display: block; width: 84px; height: 84px; padding: 3px; border-radius: 50%; object-fit: cover; background: var(--grad); box-shadow: 0 14px 34px -14px rgba(124, 92, 252, 0.9);
  }
  html.lp-d .pe-by small {
    margin-top: 18px; font-size: 13.5px; color: var(--mut);
  }
  html.lp-d .pe-by b {
    display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; font: 800 20px/1.2 "Sora", "Inter", sans-serif; letter-spacing: -0.03em; color: #fff;
  }
  html.lp-d .pe-by b .ico {
    width: 17px; height: 17px; color: var(--dim); stroke-width: 2.2;
  }
  html.lp-d .pe-cred {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px;
  }
  html.lp-d .pe-cred i {
    padding: 6px 11px; border-radius: 99px; font: 500 12.5px/1.2 "Inter", sans-serif; font-style: normal; color: #c9cbd8; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
  html.lp-d .pe-uk {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 500 13px/1.2 "Inter", sans-serif; color: #9b9eb3;
  }
  html.lp-d .pe-uk svg {
    width: 20px; height: 10px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
  html.lp-d .pe-by:active {
    opacity: 0.8;
  }
  html.lp-d .pe-end {
    margin-top: 64px; padding-top: 60px; border-top: 1px solid var(--line);
  }
  html.lp-d .pe-pick {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 0; font-size: 14.5px; color: var(--fg2);
  }
  html.lp-d .pe-pick[hidden] {
    display: none;
  }
  html.lp-d .pe-th {
    width: 30px; height: 30px; border-radius: 10px; background: center 30% / cover no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.8);
  }
  html.lp-d .pe-pick b {
    font: 700 15px/1 "Sora", "Inter", sans-serif; letter-spacing: -0.015em; color: #fff;
  }
  html.lp-d .pe-pick button {
    padding: 6px 0 6px 4px; border: 0; background: none; font: 500 14px/1 "Inter", sans-serif; color: #b7abf0; text-decoration: underline; text-decoration-color: rgba(183, 171, 240, 0.3); text-underline-offset: 5px; cursor: pointer;
  }
  html.lp-d .pe .pe-cta {
    margin-top: 26px;
  }
  html.lp-d .pe-pick:not([hidden]) + .pe-cta {
    margin-top: 18px;
  }
  html.lp-d .pe-fine {
    display: flex; align-items: baseline; justify-content: center; margin: 14px 0 0; font-size: 13.5px; color: var(--mut);
  }
  html.lp-d .pe-fine b {
    color: #fff; font-weight: 700;
  }
  html.lp-d .pe-fine span {
    width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); align-self: center;
  }
  html.lp-d .pf-list {
    margin: 34px 0 0; text-align: left;
  }
  html.lp-d .pf-q {
    position: relative; border-radius: 20px; transition: background 0.4s ease, box-shadow 0.4s ease;
  }
  html.lp-d .pf-q + .pf-q::before {
    content: ""; position: absolute; top: 0; left: 62px; right: 12px; height: 1px; background: var(--line); transition: opacity 0.3s;
  }
  html.lp-d .pf-q.open {
    background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  html.lp-d .pf-q.open::before,
  html.lp-d .pf-q.open + .pf-q::before {
    opacity: 0;
  }
  html.lp-d .pf-q .qi {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #c8bbff; background: rgba(124, 92, 252, 0.1); box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.22); transition: background 0.4s, box-shadow 0.4s, color 0.4s;
  }
  html.lp-d .pf-q .qi .ico {
    width: 18px; height: 18px; stroke-width: 1.8;
  }
  html.lp-d .pf-q.open .qi {
    color: #fff; background: linear-gradient(135deg, rgba(0, 194, 255, 0.55), rgba(181, 33, 233, 0.55)); box-shadow: 0 8px 20px -10px rgba(124, 92, 252, 0.9);
  }
  html.lp-d .pf-q > button > span {
    flex: 1;
  }
  html.lp-d .pf-q > button {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 66px; padding: 14px 12px; border: 0; background: none; text-align: left; font: 600 16px/1.35 "Inter", sans-serif; letter-spacing: -0.01em; color: #fff; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  html.lp-d .pf-q .pm {
    position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); transition: transform 0.5s var(--e), background 0.3s;
  }
  html.lp-d .pf-q .pm::before,
  html.lp-d .pf-q .pm::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.8px; margin: -0.9px 0 0 -6px; border-radius: 2px; background: #cfd0da;
  }
  html.lp-d .pf-q .pm::after {
    transform: rotate(90deg);
  }
  html.lp-d .pf-q.open .pm {
    transform: rotate(135deg); background: rgba(124, 92, 252, 0.28);
  }
  html.lp-d .pf-a {
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--e);
  }
  html.lp-d .pf-a > div {
    overflow: hidden;
  }
  html.lp-d .pf-a p {
    margin: 0; padding: 0 22px 18px 62px; font-size: 15px; line-height: 1.55; color: #a5a8bc; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s, transform 0.5s var(--e);
  }
  html.lp-d .pf-a p b {
    color: var(--fg2); font-weight: 600;
  }
  html.lp-d .pf-q.open .pf-a {
    grid-template-rows: 1fr;
  }
  html.lp-d .pf-q.open .pf-a p {
    opacity: 1; transform: none; transition-delay: 0.08s;
  }
  html.lp-d .pf-go {
    margin: 40px 0 0;
  }
  html.lp-d .pf-go .pe-pick {
    margin-top: 0;
  }
  html.lp-d .pf-go .pe-cta {
    margin-top: 0;
  }
  html.lp-d .pf-go .pe-pick:not([hidden]) + .pe-cta {
    margin-top: 16px;
  }
  html.lp-d .pf-more {
    margin: 30px 0 0; font-size: 14.5px; color: var(--mut);
  }
  html.lp-d .pf-more a {
    margin-left: 4px; color: #b7abf0; text-decoration: underline; text-decoration-color: rgba(183, 171, 240, 0.3); text-underline-offset: 5px;
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .pc *,
  html.lp-d .pc *::before,
  html.lp-d .pc *::after,
  html.lp-d .pc-sheet,
  html.lp-d .pc-sheet * {
    animation: none !important;
    transition: none !important;
  }
  html.lp-d .pc.js .pc-in,
  html.lp-d .pc.js .pc-t,
  html.lp-d .pc.js .pc-rl,
  html.lp-d .pc-sheet .pc-t {
    opacity: 1 !important;
    transform: none !important;
  }
  html.lp-d .cx,
  html.lp-d .cx * {
    animation: none !important;
    transition: none !important;
  }
  html.lp-d .cx.js .cx-in,
  html.lp-d .cx.js.cx-in,
  html.lp-d .pd.js .pd-vs tbody tr {
    opacity: 1 !important;
    transform: none !important;
  }
  html.lp-d .pd .pd-bar s,
  html.lp-d .pd .pd-save {
    transform: none !important;
    opacity: 1 !important;
  }
  html.lp-d .ph3d,
  html.lp-d .ph3d.in {
    --rx: 4deg;
    --ry: -6deg;
    --rz: 1deg;
    animation: none;
  }
  html.lp-d .ph {
    transition: none;
  }
}

/* ── D · 2 · așezarea de desktop ── */
@media (min-width: 1100px) and (max-width: 2499.98px) {
  html.lp-d {
    font-size: 100%;
  }
}
@media (min-width: 1100px) {
  html.lp-d {
    --lpd-e: cubic-bezier(0.16, 1, 0.3, 1);
    --lpd-line: rgba(255, 255, 255, 0.075);
    --lpd-card: rgba(255, 255, 255, 0.025);
    --lpd-max: 1180px;
  }
  html.lp-d .hero-dots,
  html.lp-d .hero-chat,
  html.lp-d .pc,
  html.lp-d .cx,
  html.lp-d .pt-dots {
    display: block !important;
  }
  html.lp-d .hero .sb-ring {
    display: block !important;
  }
  html.lp-d .hero .sb-spark {
    display: block !important;
  }
  html.lp-d .pc-sheet,
  html.lp-d .pc-shade {
    display: block !important;
  }
  html.lp-d .pc-sheet[hidden],
  html.lp-d .pc-shade[hidden] {
    display: none !important;
  }
  html.lp-d .sb-sugs .sug-m {
    display: flex !important;
  }
  html.lp-d .sb-sugs .sug-d {
    display: none !important;
  }
  html.lp-d .hero .sub,
  html.lp-d .hero .saudiv,
  html.lp-d .hero .planintro,
  html.lp-d .hero .tr-extra {
    display: none !important;
  }
  html.lp-d hr.sep {
    display: none;
  }
  html.lp-d #program > .wrap,
  html.lp-d .pd ~ .wrap,
  html.lp-d .pe ~ .wrap,
  html.lp-d .pf ~ .wrap,
  html.lp-d #showcase .wrap > .shead,
  html.lp-d #showcase .wrap > .mk-stage {
    display: none !important;
  }
  html.lp-d #program,
  html.lp-d #detalii,
  html.lp-d #dece,
  html.lp-d #intrebari,
  html.lp-d #showcase {
    padding: 0 !important;
  }
  html.lp-d #showcase .wrap {
    display: block; max-width: var(--lpd-max); padding: 0 40px;
  }
  html.lp-d header.hero {
    overflow: visible; overflow-x: clip;
  }
  html.lp-d main#main > section {
    overflow-x: clip;
  }
  html.lp-d section[tabindex="-1"]:focus {
    outline: none;
  }
  html.lp-d .cx-t,
  html.lp-d .cx .cx-t {
    font-size: clamp(40px, 3.6vw, 54px); line-height: 1.08;
  }
  html.lp-d .cx-sub {
    margin-top: 16px; font-size: 19px; max-width: 26em;
  }
  html.lp-d .hero::before {
    animation: none !important;
  }
  html.lp-d .hero .title::after {
    display: none !important;
  }
  html.lp-d .hero .title .ln2 {
    filter: none !important;
  }
  html.lp-d .topnav {
    transition: opacity 0.45s ease;
  }
  html.lp-d:not(.lp-f) .topnav {
    opacity: 0;
  }
  html.lp-d .hero .sb-ring {
    background: none; animation: none; overflow: hidden;
  }
  html.lp-d .hero .sb-ring::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 110%; aspect-ratio: 1; translate: -50% -50%;
    background: conic-gradient(from 0deg, rgba(0, 194, 255, 0.95), rgba(124, 92, 252, 0.22) 22%, rgba(181, 33, 233, 0.95) 50%, rgba(124, 92, 252, 0.22) 78%, rgba(0, 194, 255, 0.95));
    animation: lpdRingSpin 11s linear infinite; will-change: transform;
  }
  @keyframes lpdRingSpin {
    to { transform: rotate(360deg); }
  }
  html.lp-d .topnav .nav-go,
  html.lp-d .hc-btn {
    animation: none;
  }
  html.lp-d .pc .pc-cta::before {
    animation: none;
  }
  html.lp-d .hero .title .gt {
    padding-bottom: 0.14em;
  }
  html.lp-d .hero .sb-pill {
    min-height: 4.25rem;
  }
  html.lp-d .hero .sb-pill input {
    font-size: 1.0625rem;
  }
  html.lp-d .hero .trained {
    margin-top: 16px;
  }
  html.lp-d .hero-chat .hc-txt {
    font-size: 20px; line-height: 1.32;
  }
  html.lp-d .hero-chat .hc-msg {
    min-height: calc(2.64 * 20px + 1.5rem + 2px);
  }
  html.lp-d .hero-chat .hc-btn {
    cursor: pointer; transition: transform 0.14s, filter 0.3s;
  }
  html.lp-d .hero-chat .hc-btn:hover {
    filter: brightness(1.08);
  }
  html.lp-d .pc {
    min-height: 0; padding: 128px 40px 120px;
  }
  html.lp-d .pc-title {
    font-size: clamp(46px, 4.3vw, 64px); line-height: 1.1;
  }
  html.lp-d .pc-sub {
    margin-top: 16px; font-size: 19px; max-width: none;
  }
  html.lp-d .pc-rail {
    max-width: 640px; margin: 48px auto 0;
  }
  html.lp-d .pc-s em {
    font-size: 14px;
  }
  html.lp-d .pc-tiles {
    max-width: 920px; margin: 44px auto 0; gap: 20px;
  }
  html.lp-d .pc-t {
    height: 340px; border-radius: 28px;
  }
  html.lp-d .pc-lbl {
    left: 20px; bottom: 18px; font-size: 20px;
  }
  html.lp-d .pc-r {
    top: 16px; right: 16px; width: 28px; height: 28px;
  }
  html.lp-d .pc-r .ico {
    width: 14px; height: 14px;
  }
  html.lp-d .pc-t:hover {
    transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 34px 54px -28px rgba(var(--c), 1);
  }
  html.lp-d .pc-tiles.chosen .pc-t:not([aria-checked="true"]):hover {
    filter: saturate(0.75) brightness(0.72); transform: translateY(-4px);
  }
  html.lp-d .pc-price {
    margin-top: 44px; font-size: 17px;
  }
  html.lp-d .pc-price b {
    font-size: 28px;
  }
  html.lp-d .pc .pc-act {
    max-width: 460px; margin: 0 auto;
  }
  html.lp-d .pc-cta {
    min-height: 62px; font-size: 18px; cursor: pointer;
  }
  html.lp-d .pc.chosen .pc-cta:hover {
    filter: brightness(1.08);
  }
  html.lp-d .pc-when {
    font-size: 15px;
  }
  html.lp-d .pc-links {
    margin-top: 22px;
  }
  html.lp-d .pc-links a {
    font-size: 15px;
  }
  html.lp-d .pc-links a:hover {
    color: #fff; text-decoration-color: rgba(255, 255, 255, 0.5);
  }
  html.lp-d .pc-sheet {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(760px, calc(100vw - 48px)); max-height: calc(100svh - 48px);
    padding: 34px 44px 38px; border-radius: 32px;
    transform: translate(-50%, -46%) scale(0.97); opacity: 0;
    transition: transform 0.55s var(--lpd-e), opacity 0.3s ease, --pc-glow 0.9s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 50px 120px -30px rgba(0, 0, 0, 0.95);
  }
  html.lp-d .pc-sheet.open {
    transform: translate(-50%, -50%); opacity: 1;
  }
  html.lp-d .pc-grab {
    display: none;
  }
  html.lp-d .pc-sh-t {
    margin-top: 6px; font-size: 34px;
  }
  html.lp-d .pc-sheet .pc-t {
    height: 250px;
  }
  html.lp-d .pc-sheet .pc-act {
    max-width: 460px; margin: 0 auto;
  }
  html.lp-d .pc-x {
    cursor: pointer;
  }
  html.lp-d .ph3d {
    --w: 300px;
  }
  html.lp-d .pt-tabs button {
    cursor: pointer;
  }
  html.lp-d .pt-tabs button:hover {
    color: #fff;
  }
  html.lp-d .pt-caps p {
    font-size: 16px;
  }
  html.lp-d .pf-q > button {
    font-size: 17px;
  }
  html.lp-d .pf-q > button:hover .qi {
    box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.5);
  }
  html.lp-d .pf-a p {
    font-size: 16px;
  }
  html.lp-d .pe .pe-cta,
  html.lp-d .pf-go .pe-cta {
    max-width: 460px; margin-left: auto; margin-right: auto; cursor: pointer;
  }
  html.lp-d .topnav .nav-go b {
    font-weight: 700;
  }
  html.lp-d .shead .kick {
    display: none;
  }
  html.lp-d #main .shead h2,
  html.lp-d #mail h2 {
    font-size: clamp(36px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -0.035em;
  }
}
@media (min-width: 1100px) {
  html.lp-d #showcase {
    display: none;
  }
  html.lp-d #detalii {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: var(--lpd-max); margin: 0 auto; padding: 8px 40px 40px !important;
  }
  html.lp-d #detalii > .pd,
  html.lp-d #detalii > .ps-evo {
    padding: 64px 52px 56px; border-radius: 36px; background: var(--lpd-card); box-shadow: inset 0 0 0 1px var(--lpd-line);
  }
  html.lp-d #detalii .cx-t {
    font-size: clamp(34px, 2.8vw, 42px);
  }
  html.lp-d #detalii .cx-sub {
    font-size: 17px;
  }
  html.lp-d #detalii .pd-bars {
    margin-top: 40px;
  }
  html.lp-d #detalii .evo {
    margin-top: 48px;
  }
  html.lp-d #detalii > .lpd-vs {
    grid-column: 1 / -1; padding: 44px 52px 40px; border-radius: 36px; background: var(--lpd-card); box-shadow: inset 0 0 0 1px var(--lpd-line);
  }
  html.lp-d .lpd-vs h3 {
    margin: 0 0 22px; font: 800 24px/1.2 "Sora", "Inter", sans-serif; letter-spacing: -0.025em; color: #fff;
  }
  html.lp-d .lpd-vs .pd-vs {
    margin: 0; display: block;
  }
  html.lp-d .lpd-vs .pd-vs thead {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px;
  }
  html.lp-d .lpd-vs .pd-vs tbody {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 64px;
  }
  html.lp-d .lpd-vs .pd-vs tr {
    display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; align-items: stretch;
  }
  html.lp-d .lpd-vs .pd-vs tr > * {
    display: flex; align-items: center; justify-content: center;
  }
  html.lp-d .lpd-vs .pd-vs tbody th {
    justify-content: flex-start; font-size: 16px; padding: 18px 12px 18px 0;
  }
  html.lp-d .lpd-vs .pd-vs thead th {
    padding: 16px 0 12px;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3) .us,
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(6) .us {
    border-radius: 0 0 18px 18px;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:last-child .us {
    border-radius: 0 0 18px 18px;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3n + 1) th,
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3n + 1) td {
    border-top: 0;
  }
  html.lp-d .pe {
    display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; max-width: var(--lpd-max); margin: 0 auto; padding: 120px 40px;
  }
  html.lp-d .pe::before {
    background: radial-gradient(60% 300px at 70% 50%, rgba(124, 92, 252, 0.14), transparent 72%); -webkit-mask-image: none; mask-image: none;
  }
  html.lp-d .pe-by img {
    width: 104px; height: 104px;
  }
  html.lp-d .pe-by b {
    font-size: 26px;
  }
  html.lp-d .pe-end {
    margin: 0; padding: 0 0 0 64px; border-top: 0; border-left: 1px solid var(--lpd-line);
  }
  html.lp-d .pf {
    display: grid !important; grid-template-columns: 380px minmax(0, 1fr); grid-template-areas: "t l" "g l" "m l"; grid-template-rows: auto auto 1fr; column-gap: 88px; align-items: start; max-width: var(--lpd-max); margin: 0 auto; padding: 120px 40px 140px; text-align: left;
  }
  html.lp-d .pf > .cx-t {
    grid-area: t; text-align: left;
  }
  html.lp-d .pf-list {
    grid-area: l; margin: 0;
  }
  html.lp-d .pf-go {
    grid-area: g; margin: 44px 0 0;
  }
  html.lp-d .pf-go .pe-pick {
    justify-content: flex-start;
  }
  html.lp-d .pf-go .pe-cta {
    margin-left: 0;
  }
  html.lp-d .pf-go .pe-fine {
    justify-content: flex-start;
  }
  html.lp-d .pf-more {
    grid-area: m; margin-top: 26px;
  }
}
@media (min-width: 1100px) {
  html.lp-d .hero {
    padding: 0; text-align: center;
  }
  html.lp-d .hero .wrap {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    max-width: 1200px; min-height: 100svh; padding: calc(var(--hdr) + 16px) 40px 56px;
  }
  html.lp-d .hero .tblock,
  html.lp-d .hero .searchbar,
  html.lp-d .hero-chat {
    align-self: center;
  }
  html.lp-d .hero .title {
    font-size: clamp(52px, 5.4vw, 80px); line-height: 1.02; text-align: center;
  }
  html.lp-d .hero .title .xwrap {
    display: flex; justify-content: center; width: 0.58em; margin: 0.3em auto 0.26em;
  }
  html.lp-d .hero .title::after {
    left: 50%; transform: translateX(-50%); width: 70%;
  }
  html.lp-d .hero .searchbar {
    width: 640px; max-width: 100%; margin: 52px 0 0;
  }
  html.lp-d .hero .trained {
    justify-content: center;
  }
  html.lp-d .hero-chat {
    width: 640px; max-width: 100%; margin-top: 40px; padding: 14px 14px 14px 16px;
    display: grid !important; grid-template-columns: minmax(0, 1fr) 212px; align-items: center; column-gap: 14px;
  }
  html.lp-d .hero-chat .hc-msg {
    min-height: 0; align-items: center;
  }
  html.lp-d .hero-chat .hc-act {
    margin: 0;
  }
  html.lp-d .hero-chat .hc-btn {
    min-height: 58px; padding: 0 56px 0 20px;
  }
}
@media (min-width: 1100px) {
  html.lp-d .hero .free-wrap {
    display: none;
  }
  html.lp-d .hero .searchbar {
    padding-top: 0;
  }
  html.lp-d .hero .trained {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px;
  }
  html.lp-d .hero .trained .tr-line {
    font-size: 15px; color: #9b9bac;
  }
  html.lp-d .hero .trained .tr-line b {
    color: #fff; font-weight: 700;
  }
  html.lp-d .hero .trained .av {
    padding: 1.5px;
  }
  html.lp-d .hero .trained .av-sm img {
    width: 26px; height: 26px;
  }
  html.lp-d .hero .trained .lpd-sep {
    width: 1px; height: 16px; background: rgba(255, 255, 255, 0.16);
  }
  html.lp-d .hero .trained .free-pill {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font: 600 15px/1 "Inter", sans-serif; letter-spacing: 0; color: #8fdcb3;
  }
  html.lp-d .lpd-lbl {
    display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 18px/1.2 "Sora", "Inter", sans-serif; letter-spacing: -0.02em; color: #fff;
  }
  html.lp-d .lpd-lbl svg {
    width: 18px; height: 18px; flex: none;
  }
  html.lp-d .pt-tabs {
    width: min(420px, 100%);
  }
  html.lp-d .pc {
    display: grid !important; column-gap: 88px; align-items: start;
    max-width: 1240px; margin: 0 auto; padding: 128px 56px 116px; text-align: left;
  }
  html.lp-d .pc::before {
    background: radial-gradient(46% 60% at 76% 50%, var(--pc-glow), transparent 72%); -webkit-mask-image: none; mask-image: none;
  }
  html.lp-d .pc-title {
    grid-area: t; font-size: clamp(42px, 3.7vw, 56px); line-height: 1.08; text-align: left;
  }
  html.lp-d .pc-sub {
    grid-area: s; margin: 16px 0 0; text-align: left;
  }
  html.lp-d .pc > .pc-tiles {
    grid-area: o;
  }
  html.lp-d .pc > .pc-price {
    grid-area: p; justify-content: flex-start; margin: 30px 0 0;
  }
  html.lp-d .pc > .pc-act {
    grid-area: a; width: 100%; max-width: 520px; margin: 0;
  }
  html.lp-d .pc > .pc-act .pc-cta {
    margin-top: 18px;
  }
  html.lp-d .pc > .pc-act .pc-when {
    justify-content: flex-start; padding-left: 28px;
  }
  html.lp-d .pc > .pc-links {
    grid-area: l; margin: 18px 0 0; text-align: left; justify-content: flex-start;
  }
  html.lp-d .pc-tiles {
    display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 40px 0 0;
  }
  html.lp-d .pc-t {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; grid-template-areas: "a l r" "a d r";
    column-gap: 18px; align-items: center; align-content: center;
    height: 88px; padding: 12px 22px 12px 12px; border-radius: 22px; overflow: visible;
    background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: background 0.35s ease, box-shadow 0.45s var(--lpd-e), opacity 0.4s ease;
  }
  html.lp-d .pc-t::after {
    display: none;
  }
  html.lp-d .pc-t::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  html.lp-d .pc-art {
    grid-area: a; position: relative; inset: auto; width: 64px; height: 64px; border-radius: 16px; background-position: center 20%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 10px 22px -12px rgba(var(--c), 0.9);
  }
  html.lp-d .pc-lbl {
    grid-area: l; position: static; align-self: end; font: 700 20px/1.15 "Sora", "Inter", sans-serif; letter-spacing: -0.02em; text-shadow: none;
  }
  html.lp-d .lpd-desc {
    grid-area: d; align-self: start; margin-top: 6px; font: 500 14.5px/1.35 "Inter", sans-serif; color: #9b9bac;
  }
  html.lp-d .pc-r {
    grid-area: r; position: static; width: 26px; height: 26px; border: 1.5px solid rgba(255, 255, 255, 0.28); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.45s ease;
  }
  html.lp-d .pc-r .ico {
    color: #fff;
  }
  html.lp-d .pc-t:hover {
    transform: none; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(var(--c), 0.5);
  }
  html.lp-d .pc-t:hover .pc-r {
    border-color: rgba(var(--c), 0.95);
  }
  html.lp-d .pc-t[aria-checked="true"] .pc-art {
    transform: none;
  }
  html.lp-d .pc-t[aria-checked="true"] .pc-r {
    background: rgb(var(--c)); border-color: transparent; box-shadow: 0 0 0 4px rgba(var(--c), 0.22);
  }
  html.lp-d .pc-tiles.chosen .pc-t {
    filter: none;
  }
  html.lp-d .pc-tiles.chosen .pc-t:not([aria-checked="true"]) {
    opacity: 0.6;
  }
  html.lp-d .pc-tiles.chosen .pc-t:not([aria-checked="true"]):hover {
    opacity: 1; filter: none; transform: none;
  }
  html.lp-d .pc-tiles.chosen .pc-t[aria-checked="true"],
  html.lp-d .pc-t[aria-checked="true"] {
    background: linear-gradient(90deg, rgba(var(--c), 0.2), rgba(var(--c), 0.05) 70%); box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.95), 0 22px 46px -26px rgba(var(--c), 1);
  }
  html.lp-d .pc-sheet {
    width: min(580px, calc(100vw - 48px));
  }
  html.lp-d .pc-sheet .pc-tiles {
    max-width: none; margin-top: 26px;
  }
  html.lp-d .pc-sheet .pc-t {
    height: 84px;
  }
  html.lp-d .pc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); grid-template-areas: "t v" "s v" "r v" "o v" "p v" "a v" "l v"; grid-template-rows: auto auto auto auto auto auto 1fr; padding: 96px 56px 88px;
  }
  html.lp-d .pc > .pc-rail {
    grid-area: r; width: 100%; max-width: 520px; margin: 28px 0 0;
  }
  html.lp-d .pc > .pc-tiles {
    margin-top: 28px;
  }
  html.lp-d .pc > .pc-price {
    margin-top: 26px;
  }
  html.lp-d .pc > .pt {
    grid-area: v; align-self: center; display: flex !important; flex-direction: column; align-items: center; padding: 0; text-align: center;
  }
  html.lp-d .pc > .pt > .cx-t,
  html.lp-d .pc > .pt .pt-caps {
    display: none;
  }
  html.lp-d .pc > .pt .pt-stage {
    width: 100%; margin-top: 22px;
  }
  html.lp-d .pc > .pt .ph3d {
    --w: min(292px, calc((100svh - 200px) / 2.1)); margin: 0 auto;
  }
  html.lp-d .hero .searchbar {
    margin-top: 56px;
  }
  html.lp-d .hero .trained {
    justify-content: center;
  }
  html.lp-d .hero .hero-chat {
    display: flex !important; flex-direction: column; align-items: center; align-self: center;
    width: auto; max-width: 100%; margin-top: 52px; padding: 0;
    background: none; box-shadow: none;
  }
  html.lp-d .hero .hero-chat::before,
  html.lp-d .hero .hero-chat::after {
    display: none;
  }
  html.lp-d .hero-chat .hc-msg {
    min-height: 56px; align-items: flex-start;
  }
  html.lp-d .hero-chat .hc-av {
    margin-top: 9px;
  }
  html.lp-d .hero-chat .hc-bub {
    max-width: none; padding: 13px 18px; border-radius: 6px 22px 22px 22px; background: rgba(255, 255, 255, 0.065); border-color: rgba(255, 255, 255, 0.1);
  }
  html.lp-d .hero-chat .hc-txt {
    font-size: 20px; line-height: 1.32; white-space: nowrap;
  }
  html.lp-d .hero-chat .hc-act {
    position: relative; display: flex; justify-content: center; margin: 18px 0 0;
  }
  html.lp-d .hero-chat .hc-btn {
    width: auto; min-height: 54px; padding: 0 30px 0 34px; gap: 10px; font-size: 17.5px; letter-spacing: -0.01em; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 28px -10px rgba(124, 92, 252, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: opacity 0.45s ease, transform 0.35s var(--lpd-e), box-shadow 0.35s ease, filter 0.25s ease;
  }
  html.lp-d .hero-chat .hc-arr {
    position: static; width: auto; height: auto; margin: 0; background: none; box-shadow: none; transition: transform 0.35s var(--lpd-e);
  }
  html.lp-d .hero-chat .hc-arr .ico {
    width: 18px; height: 18px; stroke-width: 2.4;
  }
  html.lp-d .hero-chat .hc-act::after {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(100% - 24px); height: 70%;
    translate: -50% -30%; border-radius: 999px; pointer-events: none;
    background: linear-gradient(90deg, #00c2ff, #b521e9); filter: blur(18px); opacity: 0;
  }
  html.lp-d .hero-chat.is-live.ready:not(.sent) .hc-act::after {
    animation: lpdGlowIn 0.9s ease 0.2s both, lpdBreathe 3.6s ease-in-out 1.1s infinite;
  }
  html.lp-d .hero-chat .hc-act::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: var(--bw, 100%); height: 54px; translate: -50% -50%;
    border-radius: 999px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(160, 130, 255, 0.7);
    will-change: transform, opacity;
  }
  html.lp-d .hero-chat.is-live.ready:not(.sent) .hc-act::before {
    animation: lpdPing 1.4s ease-out 0.5s 2;
  }
  html.lp-d .hero-chat.is-live.ready:not(.sent) .hc-act.lpd-ping::before {
    animation: lpdPing 1.4s ease-out 0s 1;
  }
  html.lp-d .hero-chat.ready:not(.sent) .hc-btn:hover {
    transform: translateY(-2px); filter: brightness(1.08) saturate(1.05); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 20px 40px -12px rgba(124, 92, 252, 1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  html.lp-d .hero-chat.ready:not(.sent) .hc-btn:hover .hc-arr {
    transform: translateX(3px);
  }
  html.lp-d .hero-chat.ready:not(.sent) .hc-btn:active {
    transform: translateY(1px) scale(0.96); filter: brightness(0.96); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(124, 92, 252, 0.8), inset 0 2px 6px rgba(0, 0, 0, 0.18); transition-duration: 0.08s;
  }
  html.lp-d .hero-chat.is-live.ready:not(.sent) .hc-btn {
    animation: lpdReplyIn 0.7s var(--lpd-e) both;
  }
  html.lp-d .hero-chat.is-live.ready:not(.sent) .hc-btn:is(:hover, :active) {
    animation: none; opacity: 1;
  }
  @keyframes lpdReplyIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.92); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.03); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes lpdPing {
    0% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.14, 1.5); }
  }
  @keyframes lpdGlowIn {
    from { opacity: 0; } to { opacity: 0.55; }
  }
  @keyframes lpdBreathe {
    0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; }
  }
  html.lp-d .hero-chat .hc-sent {
    left: 50%; right: auto; white-space: nowrap; gap: 8px; padding: 14px 22px; font-size: 17px; border-radius: 22px 22px 6px 22px; transform: translate(-50%, -50%) scale(0.7); transform-origin: 50% 100%;
  }
  html.lp-d .hero-chat.sent .hc-sent {
    transform: translate(-50%, -50%) scale(1);
  }
  html.lp-d .pc.js > .pc-act {
    opacity: 0; transform: translateY(12px);
  }
  html.lp-d .pc.js.run > .pc-act {
    animation: pcUp 0.75s var(--e) 0.58s both;
  }
  html.lp-d .pc.js.settled > .pc-act {
    animation: none; opacity: 1; transform: none;
  }
}
@media (min-width: 1100px) and (max-height: 820px) {
  html.lp-d .pc {
    padding-top: 84px; padding-bottom: 72px;
  }
  html.lp-d .pc-title {
    font-size: clamp(38px, 3.3vw, 48px);
  }
  html.lp-d .pc > .pc-tiles {
    gap: 10px; margin-top: 26px;
  }
  html.lp-d .pc-t {
    height: 76px; grid-template-columns: 56px minmax(0, 1fr) 28px;
  }
  html.lp-d .pc-art {
    width: 56px; height: 56px; border-radius: 14px;
  }
  html.lp-d .pc > .pc-price {
    margin-top: 20px;
  }
  html.lp-d .pc > .pc-rail {
    margin-top: 20px;
  }
}
@media (min-width: 1800px) {
  html.lp-d {
    --lpd-max: 1320px;
  }
  html.lp-d .hero .sb-pill {
    min-height: 76px;
  }
  html.lp-d .hero .sb-pill input {
    font-size: 19px;
  }
  html.lp-d .hero .trained .tr-line,
  html.lp-d .hero .trained .free-pill {
    font-size: 17px;
  }
  html.lp-d .hero .trained .av-sm img {
    width: 30px; height: 30px;
  }
  html.lp-d .lpd-lbl {
    font-size: 21px;
  }
  html.lp-d .pt-tabs {
    width: min(480px, 100%);
  }
  html.lp-d .hero .title {
    font-size: 96px;
  }
  html.lp-d .hero .searchbar,
  html.lp-d .hero-chat {
    width: 740px;
  }
  html.lp-d .pc {
    max-width: 1480px;
  }
  html.lp-d .pc-title {
    font-size: 68px;
  }
  html.lp-d .pc-sub {
    font-size: 21px;
  }
  html.lp-d .pc > .pc-tiles {
    max-width: 620px; gap: 14px;
  }
  html.lp-d .pc > .pc-act {
    max-width: 620px;
  }
  html.lp-d .pc > .pc-act .pc-cta {
    min-height: 66px; font-size: 19px;
  }
  html.lp-d .pc > .pc-price {
    font-size: 18px;
  }
  html.lp-d .pc > .pc-price b {
    font-size: 32px;
  }
  html.lp-d .pc-t {
    height: 100px; grid-template-columns: 76px minmax(0, 1fr) 30px;
  }
  html.lp-d .pc-art {
    width: 76px; height: 76px; border-radius: 18px;
  }
  html.lp-d .pc-lbl {
    font-size: 23px;
  }
  html.lp-d .lpd-desc {
    font-size: 16px;
  }
  html.lp-d .pc > .pc-rail {
    max-width: 620px;
  }
  html.lp-d .pc > .pt .ph3d {
    --w: min(340px, calc((100svh - 220px) / 2.1));
  }
  html.lp-d .hero .hero-chat {
    margin-top: 60px;
  }
  html.lp-d .hero-chat .hc-txt {
    font-size: 23px;
  }
  html.lp-d .hero-chat .hc-msg {
    min-height: 62px;
  }
  html.lp-d .hero-chat .hc-btn {
    min-height: 60px; padding: 0 34px 0 38px; font-size: 19px;
  }
  html.lp-d .hero-chat .hc-act::before {
    height: 60px;
  }
  html.lp-d .hero-chat .hc-sent {
    font-size: 19px;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .pc.js > .pc-act {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .hero-chat .hc-btn,
  html.lp-d .hero-chat .hc-arr,
  html.lp-d .hero-chat .hc-act::before {
    animation: none !important;
  }
  html.lp-d .hero-chat.ready .hc-act::after {
    animation: none !important; opacity: 0.55;
  }
}
@media (min-width: 1100px) {
  html.lp-d:not(.lp-f) .topnav {
    opacity: 1;
  }
  html.lp-d .topnav {
    transition: none;
  }
  html.lp-d .topbar .brand,
  html.lp-d .topnav > a {
    opacity: 0; translate: 0 -10px;
  }
  html.lp-d.lp-f .topbar .brand,
  html.lp-d.lp-f .topnav > a {
    animation: lpdDrop 0.7s var(--lpd-e) calc(0.1s + var(--k, 0) * 0.06s) both;
  }
  @keyframes lpdDrop {
    from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; }
  }
  html.lp-d .hero .sb-pill.lpd-hit .sb-ring {
    animation: lpdRingHit 1.5s ease-out;
  }
  html.lp-d .hero .sb-pill.lpd-hit .sb-go {
    animation: lpdGoHit 1.5s var(--lpd-e);
  }
  @keyframes lpdRingHit {
    0% { filter: none; } 22% { filter: brightness(2.1) saturate(1.25); } 100% { filter: none; }
  }
  @keyframes lpdGoHit {
    0% { transform: none; box-shadow: none; } 25% { transform: scale(1.09); box-shadow: 0 0 0 6px rgba(124, 92, 252, 0.22), 0 0 22px rgba(0, 194, 255, 0.45); } 100% { transform: none; box-shadow: 0 0 0 12px rgba(124, 92, 252, 0); }
  }
  html.lp-d .lpd-vs.lpd-rv {
    opacity: 0; translate: 0 26px; transition: opacity 0.8s ease, translate 1s var(--lpd-e);
  }
  html.lp-d .lpd-vs.lpd-rv.in {
    opacity: 1; translate: 0 0;
  }
  html.lp-d .lpd-vs.lpd-rv tbody tr {
    opacity: 0; translate: 0 10px; transition: opacity 0.5s ease, translate 0.7s var(--lpd-e); transition-delay: calc(0.25s + var(--r, 0) * 0.07s);
  }
  html.lp-d .lpd-vs.lpd-rv.in tbody tr {
    opacity: 1; translate: 0 0;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .topbar .brand,
  html.lp-d .topnav > a,
  html.lp-d .lpd-vs.lpd-rv,
  html.lp-d .lpd-vs.lpd-rv tbody tr {
    opacity: 1 !important; translate: none !important; animation: none !important; transition: none !important;
  }
}
@media (min-width: 1100px) {
  html.lp-d .pc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px;
    /* coloana din stânga, cât cea din dreapta: titlul sus (cu eticheta telefonului), linkurile jos
    (cu baza telefonului); spațiul rămas se împarte între cele trei grupuri */
    grid-template-areas: "t v" "s v" ". v" "r v" "o v" ". v" "p v" "a v" "l v";
    grid-template-rows: auto auto 1fr auto auto 1fr auto auto auto;
    justify-items: center;
  }
  html.lp-d .pc-title,
  html.lp-d .pc-sub {
    justify-self: center; text-align: center;
  }
  html.lp-d .pc > .pc-rail,
  html.lp-d .pc > .pc-tiles,
  html.lp-d .pc > .pc-act {
    justify-self: center; width: 100%; max-width: 520px;
  }
  html.lp-d .pc > .pc-price {
    justify-self: center; justify-content: center;
  }
  html.lp-d .pc > .pc-act .pc-cta {
    margin-left: auto; margin-right: auto;
  }
  html.lp-d .pc > .pc-act .pc-when {
    justify-content: center; padding-left: 0;
  }
  html.lp-d .pc > .pc-links {
    justify-self: center; justify-content: center; text-align: center;
  }
  html.lp-d .pc > .pc-act .pc-when {
    margin-top: 10px;
  }
  html.lp-d .pc > .pc-links {
    margin-top: 4px;
  }
  html.lp-d .pc > .pt {
    justify-self: stretch; width: 100%;
  }
  html.lp-d .pc .pc-cta {
    padding-left: 62px; padding-right: 62px;
  }
  html.lp-d .pc .pc-cl > span {
    justify-self: center; text-align: center;
  }
  html.lp-d .pc::before {
    background: radial-gradient(34% 46% at 27% 50%, var(--pc-glow), transparent 72%), radial-gradient(34% 50% at 74% 52%, var(--pc-glow), transparent 72%);
  }
  html.lp-d .pc,
  html.lp-d .pc-sheet {
    transition-property: none;
  }
  html.lp-d .pc-sheet {
    transition: transform 0.55s var(--lpd-e), opacity 0.3s ease;
  }
  html.lp-d .pc::before {
    will-change: opacity;
  }
  html.lp-d .pc.lpd-glow::before {
    animation: lpdGlowFade 0.9s ease both;
  }
  @keyframes lpdGlowFade {
    from { opacity: 0.25; } to { opacity: 1; }
  }
}
@media (min-width: 1800px) {
  html.lp-d .pc > .pc-rail,
  html.lp-d .pc > .pc-tiles,
  html.lp-d .pc > .pc-act {
    max-width: 620px;
  }
}
@media (min-width: 1100px) {
  html.lp-d .pc.js.run:not(.settled) .pc-t {
    animation: lpdRowIn 0.8s var(--lpd-e) both; animation-delay: calc(0.24s + var(--i) * 0.09s);
  }
  @keyframes lpdRowIn {
    from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; }
  }
  html.lp-d .pc .pc-tiles.wave .pc-t,
  html.lp-d .pc.js.settled .pc-tiles.wave .pc-t {
    animation: none;
  }
  html.lp-d .pc-t::before {
    box-shadow: inset 0 0 0 1px rgba(var(--c), 0.6), 0 18px 36px -24px rgba(var(--c), 0.9);
    background: rgba(var(--c), 0.075); opacity: 0; will-change: opacity;
  }
  html.lp-d .pc-tiles.wave .pc-t::before {
    animation: lpdHiOp 1.2s var(--lpd-e) both; animation-delay: calc(var(--i) * 0.16s);
  }
  @keyframes lpdHiOp {
    0%, 100% { opacity: 0; } 38% { opacity: 1; }
  }
  html.lp-d .pc-t {
    overflow: hidden;
  }
  html.lp-d .pc-t::after {
    display: block; content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.085), transparent);
    opacity: 0; transform: translateX(0); will-change: transform, opacity;
  }
  html.lp-d .pc-tiles.wave .pc-t::after {
    animation: lpdSheenT 1.2s ease-out both; animation-delay: calc(var(--i) * 0.16s + 0.04s);
  }
  @keyframes lpdSheenT {
    0% { opacity: 0; transform: translateX(0); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateX(350%); }
  }
  html.lp-d .pc-tiles.wave .pc-art {
    animation: lpdArtHi 1.2s var(--lpd-e) both; animation-delay: calc(var(--i) * 0.16s);
  }
  @keyframes lpdArtHi {
    0%, 100% { transform: none; } 38% { transform: scale(1.06); }
  }
  html.lp-d .pc-waves {
    left: calc(50% - 50vw); right: auto; width: 100vw; -webkit-mask-image: none; mask-image: none;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .pc-t::after {
    display: none !important;
  }
}
@media (min-width: 1100px) {
  html.lp-d #detalii {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h h" "p v";
    column-gap: 24px; row-gap: 56px; align-items: stretch;
    max-width: 1180px; margin: 0 auto; padding: 136px 40px 32px !important;
  }
  html.lp-d #detalii > .ps-evo {
    display: none !important;
  }
  html.lp-d .lpd-head {
    grid-area: h; padding: 0; text-align: center;
  }
  html.lp-d .lpd-head .cx-t {
    margin: 0; text-align: center; font-size: clamp(42px, 3.7vw, 56px); line-height: 1.08;
  }
  html.lp-d .lpd-head .cx-sub {
    margin: 16px auto 0; text-align: center; font-size: 19px;
  }
  html.lp-d #detalii > .pd,
  html.lp-d #detalii > .lpd-vs {
    display: flex !important; flex-direction: column; margin: 0; padding: 40px 44px 40px;
    border-radius: 32px; background: var(--lpd-card); box-shadow: inset 0 0 0 1px var(--lpd-line);
  }
  html.lp-d #detalii > .pd {
    grid-area: p;
  }
  html.lp-d #detalii > .lpd-vs {
    grid-area: v; grid-column: auto;
  }
  html.lp-d #detalii > .pd::before {
    display: none;
  }
  html.lp-d .lpd-h3,
  html.lp-d .lpd-vs h3 {
    margin: 0 0 30px; font: 800 26px/1.2 "Sora", "Inter", sans-serif; letter-spacing: -0.025em; color: #fff; text-align: left;
  }
  html.lp-d #detalii .pd-bars {
    display: flex; flex-direction: column; flex: 1; margin: 0; padding: 0; background: none; box-shadow: none;
  }
  html.lp-d #detalii .pd-bar + .pd-bar {
    margin-top: 30px;
  }
  html.lp-d #detalii .pd-bar p {
    margin-bottom: 14px;
  }
  html.lp-d #detalii .pd-bar p b {
    font-size: 16px;
  }
  html.lp-d #detalii .pd-bar p span {
    font-size: 15px;
  }
  html.lp-d #detalii .pd-bar p em {
    font-size: 24px;
  }
  html.lp-d #detalii .pd-bar.us p em {
    font-size: 34px;
  }
  html.lp-d #detalii .pd-bar i {
    height: 12px;
  }
  html.lp-d #detalii .pd-save {
    height: 28px; margin-top: -14px; font-size: 13.5px; padding: 0 12px;
  }
  html.lp-d #detalii .pd-bar.us {
    margin-top: auto;
  }
  html.lp-d #detalii .pd-day {
    margin-top: auto; padding-top: 24px;
  }
  html.lp-d #detalii .pd-day .ico {
    width: 44px; height: 44px; padding: 10px;
  }
  html.lp-d #detalii .pd-day b {
    font-size: 20px;
  }
  html.lp-d #detalii .pd-day small {
    font-size: 15px;
  }
  html.lp-d .lpd-vs .pd-vs thead,
  html.lp-d .lpd-vs .pd-vs tbody {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; column-gap: 0;
  }
  html.lp-d .lpd-vs .pd-vs thead tr + tr {
    display: none;
  }
  html.lp-d .lpd-vs .pd-vs tr {
    grid-template-columns: minmax(0, 1fr) 76px 76px;
  }
  html.lp-d .lpd-vs .pd-vs thead th {
    padding: 14px 0 12px;
  }
  html.lp-d .lpd-vs .pd-vs tbody th {
    padding: 15px 12px 15px 0; font-size: 16px;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3n + 1) th,
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3n + 1) td {
    border-top: 1px solid var(--line);
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:first-child th,
  html.lp-d .lpd-vs .pd-vs tbody tr:first-child td {
    border-top: 0;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(3) .us,
  html.lp-d .lpd-vs .pd-vs tbody tr:nth-child(6) .us {
    border-radius: 0;
  }
  html.lp-d .lpd-vs .pd-vs tbody tr:last-child .us {
    border-radius: 0 0 18px 18px;
  }
}
@media (min-width: 1800px) {
  html.lp-d #detalii {
    max-width: 1400px; column-gap: 28px; row-gap: 64px; padding-top: 156px !important;
  }
  html.lp-d .lpd-head .cx-t {
    font-size: 68px;
  }
  html.lp-d .lpd-head .cx-sub {
    font-size: 21px;
  }
  html.lp-d #detalii > .pd,
  html.lp-d #detalii > .lpd-vs {
    padding: 48px 56px;
  }
  html.lp-d .lpd-h3,
  html.lp-d .lpd-vs h3 {
    font-size: 30px;
  }
  html.lp-d .lpd-vs .pd-vs tbody th {
    font-size: 18px; padding: 18px 12px 18px 0;
  }
  html.lp-d .lpd-vs .pd-vs tr {
    grid-template-columns: minmax(0, 1fr) 88px 88px;
  }
  html.lp-d #detalii .pd-bar p b {
    font-size: 18px;
  }
  html.lp-d #detalii .pd-bar p em {
    font-size: 28px;
  }
  html.lp-d #detalii .pd-bar.us p em {
    font-size: 40px;
  }
  html.lp-d #detalii .pd-day b {
    font-size: 22px;
  }
  html.lp-d #detalii .pd-day small {
    font-size: 16px;
  }
}
@media (min-width: 1100px) {
  html.lp-d .lpd-vs .pd-vs i {
    width: 26px; height: 26px; border-radius: 0; background: none; box-shadow: none;
  }
  html.lp-d .lpd-vs .pd-vs .lpd-y {
    color: #2fe08a; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  }
  html.lp-d .lpd-vs .pd-vs .lpd-y::before {
    width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(47, 224, 138, 0.35));
  }
  html.lp-d .lpd-vs .pd-vs .lpd-n {
    color: #ff5468; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
  }
  html.lp-d .lpd-vs .pd-vs .lpd-n::before {
    width: 16px; height: 16px;
  }
  html.lp-d .lpd-vs .pd-vs .lpd-p::before {
    width: 16px; height: 3px; border-radius: 2px; background: #9b9eb3; -webkit-mask: none; mask: none;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-bar s {
    transition: none !important;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-bar.us s {
    position: relative; width: 100%; min-width: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.26)); box-shadow: none;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-bar.us s::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); box-shadow: 0 0 16px rgba(124, 92, 252, 0.85); opacity: var(--g, 1);
  }
  html.lp-d #detalii .pd.lpd-anim .pd-save {
    transition: none !important; transform: none;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-bar p em {
    display: inline-block; font-variant-numeric: tabular-nums; transform-origin: 100% 80%;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-day {
    opacity: 0; translate: 0 8px; transition: opacity 0.6s ease 0.2s, translate 0.8s var(--lpd-e) 0.2s;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-day.lpd-in {
    opacity: 1; translate: 0 0;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d #detalii .pd.lpd-anim .pd-bar.us s {
    width: 12.4% !important;
  }
  html.lp-d #detalii .pd.lpd-anim .pd-day {
    opacity: 1; translate: none;
  }
}
@media (min-width: 1100px) {
  @keyframes lpdRise {
    from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; }
  }
  @keyframes lpdPhoneIn {
    from { opacity: 0; transform: translateY(56px) scale(0.965); } to { opacity: 1; transform: none; }
  }
  @keyframes lpdStep {
    0% { opacity: 0; transform: scale(0.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; }
  }
  html.lp-d .pc.js.run .pc-in,
  html.lp-d .pc.js.run > .pc-act {
    animation: lpdRise 0.85s var(--lpd-e) both; animation-delay: var(--sd, 0s);
  }
  html.lp-d .pc-title {
    --sd: 0s;
  }
  html.lp-d .pc-sub {
    --sd: 0.08s;
  }
  html.lp-d .pc > .pc-rail {
    --sd: 0.16s;
  }
  html.lp-d .pc > .pc-price {
    --sd: 0.5s;
  }
  html.lp-d .pc > .pc-act {
    --sd: 0.57s;
  }
  html.lp-d .pc > .pc-links {
    --sd: 0.64s;
  }
  html.lp-d .pc.js.run:not(.settled) .pc-t {
    animation-delay: calc(0.26s + var(--i) * 0.07s);
  }
  html.lp-d .pc.js .pc > .pc-rail .pc-s,
  html.lp-d .pc.js > .pc-rail .pc-s {
    opacity: 0;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-s {
    animation: lpdStep 0.5s var(--lpd-e) both;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-s:nth-child(2) {
    animation-delay: 0.3s;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-s:nth-child(3) {
    animation-delay: 0.5s;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-s:nth-child(4) {
    animation-delay: 0.7s;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-s:nth-child(5) {
    animation-delay: 0.9s;
  }
  html.lp-d .pc.js.run > .pc-rail .pc-rl {
    transition-duration: 0.8s; transition-delay: 0.3s;
  }
  html.lp-d .pc.js:not(.run) .lpd-lbl,
  html.lp-d .pc.js:not(.run) .pt .cx-in {
    opacity: 0; animation: none;
  }
  html.lp-d .pc.js.run .lpd-lbl {
    animation: lpdRise 0.85s var(--lpd-e) 0.1s both;
  }
  html.lp-d .pc.js.run .pt .pt-tabs {
    animation: lpdRise 0.85s var(--lpd-e) 0.2s both;
  }
  html.lp-d .pc.js.run .pt .pt-stage {
    animation: lpdPhoneIn 1.15s var(--lpd-e) 0.28s both;
  }
  html.lp-d .pc.js:not(.run) .ph3d.in {
    --rx: 18deg; --ry: -22deg; --rz: 4deg;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  html.lp-d .pc.js .pc-s,
  html.lp-d .pc.js .lpd-lbl,
  html.lp-d .pc.js .pt .cx-in {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }
}
@media (min-width: 1100px) {
  html.lp-d #detalii {
    position: relative;
  }
  html.lp-d .lpd-burst {
    position: fixed; z-index: -1; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
  }
}
@media (min-width: 1100px) {
  html.lp-d .lp-calc {
    padding: 120px 40px 40px !important;
  }
  html.lp-d .lp-calc > .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 80px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 0;
  }
  html.lp-d .lp-calc .shead {
    margin: 0; text-align: left;
  }
  html.lp-d .lp-calc .shead .kick {
    display: none;
  }
  html.lp-d #main .lp-calc .shead h2 {
    margin: 0; font-size: clamp(40px, 3.6vw, 54px); line-height: 1.08; text-align: left;
  }
  html.lp-d .lp-calc .lpd-sub {
    margin: 18px 0 0; max-width: 24em; font-size: 18px; line-height: 1.5; color: #9b9bac;
  }
  html.lp-d .lp-calc .calc {
    margin: 0; padding: 40px 44px; border: 0; border-radius: 32px; background: var(--lpd-card); box-shadow: inset 0 0 0 1px var(--lpd-line);
  }
  html.lp-d .lp-calc .calc .frow.stack {
    flex-direction: row; gap: 0.75rem;
  }
  html.lp-d .lp-calc .calc .frow .field {
    flex: 1;
  }
  html.lp-d .lp-calc .calc .btn {
    min-height: 56px; margin-top: 8px; font-size: 16px; cursor: pointer;
  }
}
@media (min-width: 1100px) {
  html.lp-d #mail {
    padding: 120px 40px 140px !important;
  }
  html.lp-d #mail .wrap {
    max-width: 1080px; margin: 0 auto; padding: 0;
  }
  html.lp-d #mail .wait {
    display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "by h" "by a" "by m";
    grid-template-rows: auto auto auto; column-gap: 72px; align-items: center; text-align: left;
    padding: 64px 72px; border-radius: 40px;
    background: radial-gradient(46% 90% at 16% 50%, rgba(124, 92, 252, 0.16), transparent 72%), var(--lpd-card);
    box-shadow: inset 0 0 0 1px var(--lpd-line), 0 40px 90px -50px rgba(124, 92, 252, 0.45);
  }
  html.lp-d #mail .nl-side {
    display: contents;
  }
  html.lp-d #mail .nl-head {
    grid-area: h; margin: 0; text-align: left;
  }
  html.lp-d #mail .nl-head .kick,
  html.lp-d #mail .nl-head .lede {
    display: none;
  }
  html.lp-d #mail h2 {
    margin: 0; font-size: clamp(38px, 3.3vw, 50px); line-height: 1.08; letter-spacing: -0.035em; text-align: left;
  }
  html.lp-d #mail .nl-adv {
    grid-area: a; display: grid; grid-template-columns: 1fr; gap: 12px; width: auto; max-width: none; margin: 30px 0 0; padding: 0;
  }
  html.lp-d #mail .nl-adv li {
    display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; line-height: 1.35; color: #c9cbd8;
  }
  html.lp-d #mail .nl-adv li svg {
    width: 20px; height: 20px; flex: none;
  }
  html.lp-d #mail .nl-adv li:nth-child(2),
  html.lp-d #mail .nl-adv li:nth-child(6) {
    display: none;
  }
  html.lp-d #mail .nl-main {
    grid-area: m; width: 100%; margin: 34px 0 0;
  }
  html.lp-d #mail .wait .row {
    flex-direction: row; gap: 10px; margin: 0;
  }
  html.lp-d #mail .wait .row input {
    flex: 1; min-width: 0; min-height: 58px; font-size: 16px;
  }
  html.lp-d #mail .wait .row .btn {
    min-height: 58px; padding: 0 30px; font-size: 16px; cursor: pointer;
  }
  html.lp-d #mail .wait .consent {
    justify-content: flex-start; margin-top: 16px;
  }
  html.lp-d #mail .lpd-fine {
    margin: 10px 0 0; font-size: 13.5px; color: #7f8299;
  }
  html.lp-d #mail .nl-by {
    grid-area: by; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 26px; margin: 0; padding: 0; border: 0;
  }
  html.lp-d #mail .curved-text-image {
    width: 190px; height: 190px; box-shadow: 0 0 0 3px #0e1119, 0 0 0 4.5px rgba(124, 92, 252, 0.55), 0 30px 60px -30px rgba(124, 92, 252, 0.8);
  }
  html.lp-d #mail .curved-text-image .text-svg {
    display: none;
  }
  html.lp-d #mail .lpd-rot {
    position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; pointer-events: none; will-change: transform; animation: lpdRot 18s linear infinite;
  }
  html.lp-d #mail .lpd-rot canvas {
    display: block; width: 100%; height: 100%;
  }
  @keyframes lpdRot {
    to { transform: rotate(360deg); }
  }
  html.lp-d #mail .curved-text-image .curved-text {
    font-size: 9.5px;
  }
  html.lp-d #mail .nl-by-txt {
    font-size: 16px; text-align: center;
  }
}
@media (min-width: 1100px) {
  html.lp-d .pe-cred {
    gap: 8px; margin-top: 16px;
  }
  html.lp-d .pe-cred i {
    padding: 7px 13px; font-size: 13.5px; color: #d3d3dd;
  }
  html.lp-d .pe-uk {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; font: 500 14px/1.2 "Inter", sans-serif; color: #9b9eb3;
  }
  html.lp-d .pe-uk svg {
    width: 22px; height: 11px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
}
@media (min-width: 1100px) {
  html.lp-d .pf {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-areas: ". l" "t l" "m l" ". l"; grid-template-rows: 1fr auto auto 1fr; column-gap: 72px; align-items: center; padding-top: 104px; padding-bottom: 120px;
  }
  html.lp-d .pf > .cx-t {
    justify-self: center; text-align: center; font-size: clamp(44px, 3.9vw, 60px);
  }
  html.lp-d .pf .pf-go {
    display: none;
  }
  html.lp-d .pf-more {
    justify-self: center; margin-top: 22px; text-align: center; font-size: 15.5px;
  }
}
@media (min-width: 1800px) {
  html.lp-d .pf > .cx-t {
    font-size: 70px;
  }
  html.lp-d .pe-cred i {
    font-size: 15px;
  }
  html.lp-d .pe-uk {
    font-size: 15.5px;
  }
}

/* ── D · 3 · piesele de desktop din șablon (.lp-dk) și ordinea secțiunilor ── */
@media (min-width: 1100px) {
  /* după „Detalii program" vin direct întrebările frecvente, apoi Dr. Andu Preda + „Începe acum";
     calculatorul și mailul săptămânal rămân la final, în ordinea din șablon */
  html.lp-d main#main { display: flex; flex-direction: column; }
  html.lp-d main#main > * { order: 5; width: 100%; } /* flex: fără lățime, secțiunile cu margin: auto s-ar strânge */
  html.lp-d main#main > #program { order: 1; }
  html.lp-d main#main > #detalii { order: 2; }
  html.lp-d main#main > #intrebari { order: 3; }
  html.lp-d main#main > #dece { order: 4; }
  /* piesele de mobil pe care desktopul le înlocuiește cu variantele lui din șablon (.lp-dk):
     titlul secțiunii (pe toată lățimea) și comparația (cardul „Ce primești") */
  html.lp-d #detalii > .pd > .cx-t,
  html.lp-d #detalii > .pd > .cx-sub,
  html.lp-d #detalii > .pd > .pd-vs { display: none; }
  html.lp-d .pd-bar.us p b::first-letter { text-transform: uppercase; } /* „Nutritie.ro" */
  /* textul de pe cerc de la mail: pe desktop, o imagine desenată o dată (home.js „D · 6") */
  html.lp-d #mail .lpd-rot { display: block; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   v2.2 · PLECAREA SPRE CHAT (toate lățimile) — „întrebarea ta pleacă"
   Ultimul cadru al landing-ului trebuie să fie IDENTIC cu primul cadru al chatului, fiindcă
   browserul îl ține pe ecran cât se încarcă pagina de chat (pe serverul real, secunde întregi).
   · restul paginii se topește în 0,22 s în fundalul EXACT al chatului (culoarea + cele trei
     lumini radiale din chat-v7.css, `body`);
   · bara de căutare rămâne fix pe loc (nu mai urcă și nu se mai mărește), iar lumina de pe
     conturul ei accelerează lin (home.js, `lpInel`) și se aprinde; iconița și săgeata se sting;
   · pagina de chat pornește din aceeași bară, cu inelul în același unghi (chat-fix10, „v2.2").
   ═════════════════════════════════════════════════════════════════════════════ */
body.lp-leaving::before {
  background-color: #080b12;
  background-image:
    radial-gradient(120% 56% at 88% -4%, rgba(181, 33, 233, 0.09), rgba(0, 0, 0, 0) 52%),
    radial-gradient(100% 52% at 3% 0%, rgba(0, 194, 255, 0.07), rgba(0, 0, 0, 0) 48%),
    radial-gradient(80% 50% at 50% 120%, rgba(124, 92, 252, 0.05), rgba(0, 0, 0, 0) 60%);
  animation: lpSpreChat 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes lpSpreChat {
  from { opacity: 0; }
  to { 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 {
  /* !important: pe desktop, intrările din hero (ex. `html.lp-d .hero.play .trained`) sunt mai specifice */
  animation: lpSpreChatStinge 0.2s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}
@keyframes lpSpreChatStinge {
  to { opacity: 0; }
}
/* bara capătă un aspect fix, pe care pagina de chat îl redesenează identic (fantoma, chat-fix10.css
   „v2.2"): umplutura întunecată, lumina de pe contur și o strălucire discretă dedesubt. Straturile de
   „val" ale barei (::before, ::after) se sting, ca să nu rămână nimic pe care chatul să nu-l aibă. */
body.lp-leaving .hero .sb-pill {
  transform: none !important;
  border-color: transparent !important;
  background: linear-gradient(#131a28, #0d111a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 44px -18px rgba(124, 92, 252, 0.6),
    0 10px 30px -14px rgba(0, 194, 255, 0.45) !important;
  transition:
    box-shadow 0.25s ease,
    background 0.2s ease;
}
body.lp-leaving .hero .sb-pill::before,
body.lp-leaving .hero .sb-pill::after {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 0.2s ease;
}
body.lp-leaving .hero .sb-pill .sb-spark,
body.lp-leaving .hero .sb-pill > svg,
body.lp-leaving .hero .sb-pill .sb-go {
  opacity: 0 !important;
  transition: opacity 0.16s ease;
}
body.lp-leaving .hero .sb-pill #q {
  caret-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body.lp-leaving::before,
  body.lp-leaving .hero > .wrap > *:not(.searchbar),
  body.lp-leaving .topbar {
    animation: none;
  }
}
/* inelul de pe contur: vizibil și pe desktop (acolo apare doar la val), rotit de home.js („lpInel") */
body.lp-leaving .hero .sb-pill .sb-ring {
  display: block !important;
  opacity: 1 !important;
  background: conic-gradient(from var(--sb-ang), rgba(0, 194, 255, 0.95), rgba(124, 92, 252, 0.22) 22%, rgba(181, 33, 233, 0.95) 50%, rgba(124, 92, 252, 0.22) 78%, rgba(0, 194, 255, 0.95)) !important;
  animation: none !important;
}

/* ═══ Dennis Patch 5-10-26 · DP · meniu: „Programul tău", prima intrare din meniul de telefon / 1/2 desktop ═══
   Doar pentru cine are acum un program activ (home.html.twig, `lp_prog`). Evidențiată, dar în limba meniului:
   același Sora mare, în gradientul mărcii, într-o pastilă cu inel în gradient și o linie mică „● Activ". */
@media (max-width: 1099.98px) {
  html.lp-js .navmenu .mi--prog {
    padding: 0 0 0.875rem;
  }
  html.lp-js .navmenu .mi--prog a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.75rem 0.8125rem;
    border-radius: 1.375rem;
    background:
      linear-gradient(rgba(15, 18, 30, 0.78), rgba(15, 18, 30, 0.78)) padding-box,
      linear-gradient(90deg, #00c2ff, #7c5cfc, #b521e9) border-box;
    border: 0.09375rem solid transparent;
    /* Patch ultimate Dennis 6-10-26: fără umbră colorată. Rândul meniului (.mi) ascunde ce iese din el, pentru intrarea
       animată, așa că umbra apărea tăiată într-un dreptunghi; pastila iese în evidență prin inelul în gradient */
    box-shadow: none;
  }
  html.lp-js .navmenu .mi--prog a:active {
    background:
      linear-gradient(rgba(15, 18, 30, 0.78), rgba(15, 18, 30, 0.78)) padding-box,
      linear-gradient(90deg, #00c2ff, #7c5cfc, #b521e9) border-box;
    -webkit-background-clip: padding-box, border-box;
    background-clip: padding-box, border-box;
    color: #fff;
    transform: scale(0.98);
  }
  .navmenu .mi-prog-t {
    background: linear-gradient(90deg, #5ee7ff, #a78bfa 55%, #e879f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .navmenu .mi-prog-s {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font: 600 0.8125rem/1.2 "Inter", sans-serif;
    letter-spacing: 0;
    color: #c9c9d6;
  }
  .navmenu .mi-prog-s::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #01db69;
    box-shadow: 0 0 0.5rem rgba(1, 219, 105, 0.6);
  }
}

/* ═══ Dennis Patch 5-10-26 · DP · demo: „Ce primești? · Vezi demo" sub selectorul de program ═══
   O pastilă mică, de sticlă, în locul linkului subliniat „Detalii program": se vede, dar nu concurează cu butonul
   principal. Duce la turul interactiv al aplicației; la sosire, turul strălucește o clipă (home.js, `pt-hi`). */
.pc-links .pc-demo {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.25rem;
  padding: 0.3125rem 0.875rem 0.3125rem 0.375rem;
  border-radius: 62.4375rem;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 0.0625rem rgba(167, 139, 250, 0.3);
  font: 500 0.875rem/1.2 "Inter", sans-serif;
  color: #d9d3f5;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.25s, background 0.25s, color 0.2s, transform 0.2s;
}
.pc-links .pc-demo b {
  font-weight: 700;
  background: linear-gradient(90deg, #5ee7ff, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pc-links .pc-demo b::after {
  content: " →";
}
/* specificitate peste `.pc-links span` (punctul despărțitor de dinainte, 3×3 px) */
.pc-links .pc-demo .pc-demo-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.28), rgba(181, 33, 233, 0.28));
  color: #fff;
}
.pc-links .pc-demo .pc-demo-ic svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.pc-links .pc-demo:active {
  transform: scale(0.97);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .pc-links .pc-demo:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 0.0625rem rgba(167, 139, 250, 0.6), 0 0.5rem 1.5rem -0.75rem rgba(124, 92, 252, 0.7);
  }
}
.pc-links .pc-demo:focus-visible {
  outline: 0.125rem solid rgba(0, 194, 255, 0.85);
  outline-offset: 0.1875rem;
}
/* rândul: pastila și „Întrebări frecvente", pe unul (sau două, pe telefoanele înguste), fără punctul despărțitor */
.pc-links:has(.pc-demo) {
  flex-wrap: wrap;
  row-gap: 0.5rem;
  column-gap: 1rem;
}
.pc-links:has(.pc-demo) > span {
  display: none;
}
/* `lp-d` e pe <html> la orice lățime, iar regulile „html.lp-d .pc-links a / span" (subliniere, padding 6px 0, punctul
   de 3px) sunt mai tari decât cele de mai sus — pastila le anulează explicit: pe telefon cu mărimile ei, pe desktop
   (≥1100px, unde linkurile vecine au 15px) puțin mai mare */
html.lp-d .pc-links .pc-demo {
  padding: 0.3125rem 0.875rem 0.3125rem 0.375rem;
  font-size: 0.875rem;
  color: #d9d3f5;
  text-decoration: none;
}
html.lp-d .pc-links .pc-demo .pc-demo-ic {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.28), rgba(181, 33, 233, 0.28));
}
@media (min-width: 1100px) {
  html.lp-d .pc-links .pc-demo {
    padding-right: 0.9375rem;
    font-size: 0.9375rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  html.lp-d .pc-links .pc-demo:hover {
    color: #fff;
  }
}
/* telefoanele obișnuite (≤ 420px): fără săgeată, ca pastila și „Întrebări frecvente" să încapă pe un rând */
@media (max-width: 26.25rem) {
  .pc-links .pc-demo b::after {
    content: none;
  }
  .pc-links:has(.pc-demo) {
    column-gap: 0.875rem;
  }
}
/* turul, la sosirea din „Vezi demo": o lumină în culorile mărcii, în spatele telefonului */
#ce-primesti .pt-stage {
  position: relative;
}
#ce-primesti.pt-hi .pt-stage::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 252, 0.5), rgba(0, 194, 255, 0.2) 58%, transparent 76%);
  pointer-events: none;
  animation: dp-demo-glow 1.9s ease-out both;
}
@keyframes dp-demo-glow {
  0% { opacity: 0; transform: scale(0.85); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #ce-primesti.pt-hi .pt-stage::before {
    animation: none;
    opacity: 0;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   P2 · demo — Patch 2 5-10-26 · „Ce primești? / Detalii program": aplicația nouă, în telefonul 3D
   Patru ecrane copiate după programul de azi: 0 Meniu (masa de acum, bifa), 1 Rețete (foaia rețetei, pașii),
   2 Cumpărături (lista pe raioane), 3 Andu (îi scrii, el schimbă planul și te ghidează). Totul e desenat la 390
   de „pixeli de telefon": --u = lățimea ecranului / 390 (container query; fără ea, din lățimea telefonului, --w),
   deci arată la fel la orice mărime a telefonului. Stările finale sunt stilurile de bază: animațiile pornesc din
   clasele puse de home.js („S · C"), iar cu mișcare redusă ecranul apare direct gata.
   Patch 2.1 6-10-26 — paleta D, aceeași ca în program: culoarea are trei treburi și restul e neutru (~90%).
   Violet #8b6cff (text #d2c8ff) = unde ești și ce apeși: „Acum", conturul cardului de acum, inelul mesei de
   acum, pasul de acum, butonul principal (#7658f2 → #6346ea; textul alb ≥ 4,7:1 pe tot butonul). Verde #1fa673
   (deschis #4fd39b) = ce ai făcut: cercurile cu bifă albă (bifa ≥ 3:1), barele de progres; „Am mâncat" bifat e verdele adânc #15855c (text alb la AA).
   Fără magenta; cyan doar pe identitatea lui Andu (avatarul, bulele tale, câmpul lui). „Făcut" se vede și fără
   culoare: cerc plin cu bifă albă, față de inelul gol.
   ═════════════════════════════════════════════════════════════════════════════ */
/* Patch 2.1 6-10-26: fundalul programului (#07090d), și sub bara de stare (ca într-o aplicație adevărată), cu o
   singură lumină violet foarte slabă sus, cât cea din program */
#ce-primesti .ph-scr {
  background: radial-gradient(155% 27% at 50% -17%, rgba(139, 108, 255, 0.05), transparent 70%) no-repeat, #07090d;
}
#ce-primesti .ph-app {
  display: block;
  container-type: inline-size;
  background: transparent;
}
#ce-primesti .ax {
  /* Patch 2.1 6-10-26: tokenurile paletei D */
  --ax-now: #8b6cff;
  --ax-now-rgb: 139, 108, 255;
  --ax-now-t: #d2c8ff;
  --ax-done: #1fa673;
  --ax-done-2: #4fd39b;
  --ax-done-deep: #15855c;
  --ax-wait: #a3a8bb;
  --ax-now-2: #9d85ff; /* linia violet din foaia rețetei (cartonașul de sus, pasul de acum), ca în program */
  --u: calc(var(--w, 248px) * 0.954 / 390);
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  color: #ececf3;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
@supports (width: 1cqw) {
  #ce-primesti .ax {
    --u: calc(100cqw / 390);
  }
}
/* resetul butoanelor din telefon: fără specificitate, ca stilurile componentelor să câștige mereu */
:where(#ce-primesti .ax) :where(button) {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#ce-primesti .ax button:focus-visible {
  outline: 2px solid #b8a4ff;
  outline-offset: 2px;
}
#ce-primesti .ax-i {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ce-primesti :where(.ax) p {
  margin: 0;
}

/* ecranele: paginile (Meniu, Andu) stau sub comutator; foile (rețeta, lista) acoperă tot, peste meniu */
#ce-primesti .ap-s {
  padding: 0;
  overflow: hidden;
  container-type: normal;
}
/* ecranul de acum se poate atinge (ecranele vechi erau doar de privit) */
#ce-primesti .ap-s.on {
  pointer-events: auto;
}
#ce-primesti .ap-s.on > *,
#ce-primesti .ap-s.off > * {
  animation: none;
}
#ce-primesti .ax-pg {
  top: calc(58 * var(--u));
  z-index: 2;
}
#ce-primesti .ax-pg.on:not(.ax-still) > * {
  animation: axIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#ce-primesti .ax-pg.on:not(.ax-still) > :nth-child(2) { animation-delay: 0.05s; }
#ce-primesti .ax-pg.on:not(.ax-still) > :nth-child(3) { animation-delay: 0.1s; }
#ce-primesti .ax-pg.on:not(.ax-still) > :nth-child(4) { animation-delay: 0.15s; }
#ce-primesti .ax-pg.on:not(.ax-still) > :nth-child(n + 5) { animation-delay: 0.2s; }
@keyframes axIn {
  from { opacity: 0; transform: translateY(calc(10 * var(--u))); }
}
/* pagina care pleacă se stinge mai repede decât intră cea nouă (fără două texte suprapuse) */
#ce-primesti .ax-pg.off {
  transition-duration: 0.22s, 0.55s;
}
/* meniul rămâne dedesubt cât e deschisă o foaie */
#ce-primesti #ptS0.ax-un {
  opacity: 1;
  transform: none;
}
/* foaia: fundalul se întunecă, foaia (opacă) urcă de jos */
#ce-primesti .ap-s.ax-sh,
#ce-primesti .ap-screens.back .ap-s.ax-sh {
  z-index: 5;
  opacity: 1;
  transform: none;
}
#ce-primesti .ax-sh::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 8, 0.62);
  opacity: 0;
  transition: opacity 0.45s ease;
}
#ce-primesti .ax-sh.on::before {
  opacity: 1;
}
#ce-primesti .ax-pn {
  position: absolute;
  inset: calc(30 * var(--u)) 0 0;
  padding: 0 calc(20 * var(--u));
  overflow: hidden;
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: #10131b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 calc(-18 * var(--u)) calc(40 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, 0.6);
  transform: translateY(calc(100% + calc(64 * var(--u))));
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1);
}
#ce-primesti .ax-sh.on .ax-pn {
  transform: none;
}
#ce-primesti .ax-pn::after,
#ce-primesti .ax-s0::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(64 * var(--u));
  background: linear-gradient(rgba(16, 19, 27, 0), #10131b 82%);
  pointer-events: none;
}
#ce-primesti .ax-s0::after {
  background: linear-gradient(rgba(7, 9, 13, 0), #07090d 82%); /* Patch 2.1 6-10-26: fundalul nou */
}
/* sub o foaie se întunecă și bara de stare (ca pe iPhone); textul ei rămâne deasupra */
#ce-primesti .ph-scr::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  right: 0;
  height: 9.5%;
  background: rgba(3, 4, 8, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#ce-primesti .ph-scr:has(.ax-sh.on)::before {
  opacity: 1;
}
/* un ecran care pornește de la început: fără tranziții cât se întoarce la starea de start */
#ce-primesti .ax-rs * {
  transition: none !important;
}

/* sus: Andu / Meniu, ca în program; butonul alb alunecă spre ecranul ales */
#ce-primesti .ax-top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  padding: calc(4 * var(--u)) calc(14 * var(--u)) 0;
}
#ce-primesti .ax-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: max(calc(50 * var(--u)), calc(24px + calc(6 * var(--u))));
  padding: calc(3 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#ce-primesti .ax-thumb {
  position: absolute;
  top: calc(3 * var(--u));
  bottom: calc(3 * var(--u));
  left: calc(3 * var(--u));
  width: calc(50% - calc(3 * var(--u)));
  border-radius: 99px;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.3, 1.2, 0.5, 1);
}
#ce-primesti .ax-thumb::before,
#ce-primesti .ax-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.4s ease;
}
/* Patch 2.1 6-10-26: butonul alb al comutatorului, cu umbra neutră din program (fără lumină violet) */
#ce-primesti .ax-thumb::before {
  background: #f3f2fa;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.7);
}
#ce-primesti .ax-thumb::after {
  border: calc(1.5 * var(--u)) solid transparent;
  background: linear-gradient(#0d1019, #0d1019) padding-box, linear-gradient(90deg, #00c2ff, #b521e9) border-box;
  box-shadow: 0 0 calc(18 * var(--u)) calc(-4 * var(--u)) rgba(124, 92, 252, 0.6);
  opacity: 0;
}
#ce-primesti .ax-top.ax-a .ax-thumb {
  transform: none;
}
#ce-primesti .ax-top.ax-a .ax-thumb::before { opacity: 0; }
#ce-primesti .ax-top.ax-a .ax-thumb::after { opacity: 1; }
#ce-primesti .ax-sg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  min-width: 0;
  min-height: 24px;
  border-radius: 99px;
  font: 600 calc(16 * var(--u))/1 "Inter", sans-serif;
  color: #9b9bac;
  transition: color 0.4s ease;
}
/* Patch 2.1 6-10-26: avatarul lui Andu, cu inelul lui din program (identitatea lui: cyan → magenta, un fir subțire) */
#ce-primesti .ax-sg img {
  box-sizing: border-box;
  width: calc(31 * var(--u));
  height: calc(31 * var(--u));
  padding: calc(1.5 * var(--u));
  border: calc(1.3 * var(--u)) solid transparent;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(#0b0e15, #0b0e15) padding-box, linear-gradient(135deg, #00c2ff, #b521e9) border-box;
}
#ce-primesti .ax-sg .ax-i {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
}
#ce-primesti .ax-sg-m[aria-current="true"] { color: #0c0e16; }
#ce-primesti .ax-sg-a[aria-current="true"] { color: #fff; }

/* 0 · Meniu — săptămâna */
#ce-primesti .ax-wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
}
#ce-primesti .ax-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(9 * var(--u)) 0 calc(7 * var(--u));
  border-radius: calc(16 * var(--u));
}
#ce-primesti .ax-d em {
  font: 600 calc(11.5 * var(--u))/1 "Inter", sans-serif;
  font-style: normal;
  letter-spacing: 0.04em;
  color: #9b9bac;
}
#ce-primesti .ax-d b {
  font: 650 calc(19 * var(--u))/1.1 "Sora", "Inter", sans-serif;
  color: #d3d3dd;
}
#ce-primesti .ax-d i {
  display: flex;
  gap: calc(2 * var(--u));
  height: calc(13 * var(--u));
  color: #84879e;
}
#ce-primesti .ax-d .ax-i {
  display: none;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
#ce-primesti .ax-d.ck .ax-pot,
#ce-primesti .ax-d.sh .ax-cart {
  display: block;
}
/* Patch 2.1 6-10-26: ziua aleasă, albă, cu umbra violet strânsă din program */
#ce-primesti .ax-d.sel {
  background: #f3f2fa;
  box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-14 * var(--u)) rgba(var(--ax-now-rgb), 0.9);
}
#ce-primesti .ax-d.sel em,
#ce-primesti .ax-d.sel i { color: #5c5f73; }
#ce-primesti .ax-d.sel b { color: #0c0e16; }

/* masa de acum: prânzul, gătit azi. Patch 2.1 6-10-26: cardul neutru al programului, cu un contur violet subțire
   și o lumină violet foarte slabă sus (fără strălucirea magenta) */
#ce-primesti .ax-now {
  position: relative;
  margin: 0 calc(14 * var(--u));
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(6 * var(--u));
  border-radius: calc(26 * var(--u));
  background: linear-gradient(180deg, rgba(var(--ax-now-rgb), 0.06), rgba(var(--ax-now-rgb), 0) 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), #0e1119;
  box-shadow: inset 0 0 0 1px rgba(var(--ax-now-rgb), 0.3), 0 calc(28 * var(--u)) calc(54 * var(--u)) calc(-34 * var(--u)) rgba(var(--ax-now-rgb), 0.6);
}
#ce-primesti .ax-kick {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font: 700 calc(12.5 * var(--u))/1 "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ax-now-t);
}
#ce-primesti .ax-live {
  flex: none;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--ax-now);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(var(--ax-now-rgb), 0.25);
  animation: axLive 2.4s ease-out infinite;
}
@keyframes axLive {
  0% { box-shadow: 0 0 0 0 rgba(var(--ax-now-rgb), 0.5); }
  70%, 100% { box-shadow: 0 0 0 calc(6 * var(--u)) rgba(var(--ax-now-rgb), 0); }
}
#ce-primesti .ax-kick em {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-style: normal;
}
#ce-primesti .ax-kick em::before {
  content: "·";
  margin-right: calc(2 * var(--u));
  color: #84879e;
}
#ce-primesti .ax-kick .ax-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
#ce-primesti .ax-nt {
  margin-top: calc(12 * var(--u));
  font: 650 calc(25 * var(--u))/1.16 "Sora", "Inter", sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
#ce-primesti .ax-how {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-top: calc(9 * var(--u));
  font: 500 calc(14 * var(--u))/1.3 "Inter", sans-serif;
  color: #c8c8d4;
}
#ce-primesti .ax-how .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: #9b9bac;
}
#ce-primesti .ax-acts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(10 * var(--u));
  margin-top: calc(16 * var(--u));
}
#ce-primesti .ax-b {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-height: calc(50 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(16 * var(--u));
  font: 650 calc(15.5 * var(--u))/1 "Inter", sans-serif;
  color: #fff;
  white-space: nowrap;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
#ce-primesti .ax-b:active,
#ce-primesti .ax-tl:active,
#ce-primesti .ax-skip:active {
  transform: scale(0.97);
}
/* Patch 2.1 6-10-26: butonul principal, violet plin (același ton, de sus în jos; fără magenta) */
#ce-primesti .ax-b-p {
  background: linear-gradient(180deg, #7658f2, #6346ea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 calc(12 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(var(--ax-now-rgb), 0.9);
}
#ce-primesti .ax-b-p .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  opacity: 0.8;
}
/* Patch 2.1 6-10-26: „Am mâncat" e neutru (contur gri) până îl apeși; atunci se umple de verde (verdele adânc, ca
   textul alb să rămână la AA), cu bifa verde în cercul alb — „făcut" se vede și fără culoare */
#ce-primesti .ax-b-eat {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.16);
}
#ce-primesti .ax-ec {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.42);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#ce-primesti .ax-ec .ax-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  stroke-width: 3;
  stroke-dasharray: 24;
  color: #c9ccd8;
  opacity: 0.4;
}
#ce-primesti .ax-b-eat.is {
  background: var(--ax-done-deep);
  box-shadow: none;
  animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ce-primesti .ax-b-eat.is .ax-ec {
  background: #fff;
  box-shadow: none;
}
#ce-primesti .ax-b-eat.is .ax-ec .ax-i {
  color: var(--ax-done-deep);
  opacity: 1;
  animation: axDraw 0.34s ease 0.05s both;
}
#ce-primesti .ax-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  width: 100%;
  min-height: calc(48 * var(--u));
  border-radius: calc(14 * var(--u));
  font: 600 calc(14.5 * var(--u))/1 "Inter", sans-serif;
  color: #d3d3dd;
}
#ce-primesti .ax-skip .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: #d4c5ff;
}
#ce-primesti .ax-tools {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: calc(8 * var(--u));
  margin: calc(12 * var(--u)) calc(14 * var(--u)) 0;
}
#ce-primesti .ax-tl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(7 * var(--u));
  min-width: 0;
  min-height: calc(48 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  font: 650 calc(14 * var(--u))/1 "Inter", sans-serif;
  color: #ececf3;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
#ce-primesti .ax-tl .ax-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  color: #c8c8d4;
}

/* mesele de azi: bifa de la micul dejun, numărătoarea */
#ce-primesti .ax-lh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: calc(20 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u));
}
#ce-primesti .ax-lh > b {
  font: 650 calc(19 * var(--u))/1.1 "Sora", "Inter", sans-serif;
  letter-spacing: -0.015em;
  color: #fff;
}
#ce-primesti .ax-lh > span {
  font: 500 calc(13.5 * var(--u))/1 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-lh > span b {
  font-weight: 700;
  color: #fff;
}
#ce-primesti .ax-ml {
  list-style: none;
  margin: 0 calc(14 * var(--u));
  padding: calc(4 * var(--u));
  border-radius: calc(24 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#ce-primesti .ax-r {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(64 * var(--u));
  padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  transition: background 0.4s ease;
}
#ce-primesti .ax-r + .ax-r {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07);
}
#ce-primesti .ax-mk {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.14); /* Patch 2.1 6-10-26: mesele care urmează, neutre */
  color: var(--ax-wait);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
#ce-primesti .ax-mk .ax-i {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  stroke-width: 2.6;
  stroke-dasharray: 24;
  opacity: 0.32;
}
#ce-primesti .ax-rb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--u));
  min-height: 24px;
  padding: calc(4 * var(--u)) 0;
  justify-content: center;
  text-align: left;
}
#ce-primesti .ax-rb > b {
  font: 600 calc(15 * var(--u))/1.3 "Inter", sans-serif;
  color: #ececf3;
  text-wrap: balance;
  transition: color 0.4s ease;
}
#ce-primesti .ax-rb > span {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--u));
  font: 500 calc(12.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #9b9bac;
  white-space: nowrap;
}
#ce-primesti .ax-rb > span .ax-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  color: #84879e;
}
#ce-primesti .ax-chv {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  color: #84879e;
}
#ce-primesti .ax-sw {
  display: inline-grid;
  font-style: normal;
}
#ce-primesti .ax-sw > em {
  grid-area: 1 / 1;
  font-style: normal;
  transition: opacity 0.3s ease;
}
#ce-primesti .ax-sw > em:first-child {
  font-weight: 650;
  color: #c3c6d4; /* Patch 2.1 6-10-26: „Ai mâncat?", neutru */
}
#ce-primesti .ax-r:not(.is) .ax-sw > em:last-child,
#ce-primesti .ax-r.is .ax-sw > em:first-child {
  opacity: 0;
}
/* Patch 2.1 6-10-26: masa care te așteaptă (micul dejun nebifat) e gri, ca în program; masa de acum are inelul
   violet; bifată = cerc verde plin, cu bifa albă */
#ce-primesti .ax-ask {
  background: rgba(142, 147, 168, 0.07);
}
#ce-primesti .ax-ask .ax-mk .ax-i { opacity: 0.6; }
#ce-primesti .ax-cur {
  background: rgba(var(--ax-now-rgb), 0.08);
}
#ce-primesti .ax-cur .ax-mk {
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(var(--ax-now-rgb), 0.85);
  color: var(--ax-now);
}
#ce-primesti .ax-cur .ax-mk .ax-i { opacity: 0.55; }
#ce-primesti .ax-r.is {
  background: transparent;
}
#ce-primesti .ax-r.is .ax-mk {
  background: var(--ax-done);
  box-shadow: none;
  color: #fff;
  animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ce-primesti .ax-r.is .ax-mk .ax-i {
  opacity: 1;
  animation: axDraw 0.34s ease 0.06s both;
}
#ce-primesti .ax-r.is .ax-rb > b {
  color: #9b9bac;
}
@keyframes axPop {
  45% { transform: scale(1.14); }
}
@keyframes axDraw {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

/* 1 · Rețete și 2 · Cumpărături — foile */
#ce-primesti .ax-hd {
  display: block;
  width: calc(38 * var(--u));
  height: calc(5 * var(--u));
  margin: calc(9 * var(--u)) auto 0;
  border-radius: calc(3 * var(--u));
  background: rgba(255, 255, 255, 0.22);
}
#ce-primesti .ax-x {
  position: absolute;
  z-index: 1;
  top: calc(12 * var(--u));
  right: calc(12 * var(--u));
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  color: #d3d3dd;
}
#ce-primesti .ax-x::before {
  content: "";
  position: absolute;
  inset: calc(6 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
#ce-primesti .ax-x .ax-i {
  position: relative;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
#ce-primesti .ax-k {
  margin-top: calc(18 * var(--u));
  font: 700 calc(12 * var(--u))/1 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8a4ff;
}
#ce-primesti .ax-t {
  margin: calc(10 * var(--u)) calc(40 * var(--u)) 0 0;
  font: 650 calc(27 * var(--u))/1.12 "Sora", "Inter", sans-serif;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}
#ce-primesti .ax-t1 {
  margin-top: calc(22 * var(--u));
}
#ce-primesti .ax-info {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset calc(3 * var(--u)) 0 0 var(--ax-now-2); /* Patch 2.1 6-10-26 */
}
#ce-primesti .ax-ii {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #ececf3;
}
#ce-primesti .ax-ii .ax-i {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
}
#ce-primesti .ax-info p {
  font: 500 calc(13.5 * var(--u))/1.4 "Inter", sans-serif;
  color: #c8c8d4;
  text-wrap: pretty;
}
#ce-primesti .ax-info b {
  display: block;
  margin-bottom: calc(2 * var(--u));
  font: 650 calc(15.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #fff;
}
#ce-primesti .ax-info p span {
  display: block;
}
#ce-primesti .ax-mac {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(4 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.04);
}
#ce-primesti .ax-mac span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  font: 500 calc(11 * var(--u))/1.1 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-mac b {
  font: 650 calc(16 * var(--u))/1.1 "Sora", "Inter", sans-serif;
  color: #fff;
}
#ce-primesti .ax-acc {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: calc(10 * var(--u));
  margin-top: calc(12 * var(--u));
  padding: calc(13 * var(--u)) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#ce-primesti .ax-acc.ax-op {
  margin-top: 0;
}
#ce-primesti .ax-acc p {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
}
#ce-primesti .ax-acc p b {
  font: 650 calc(18 * var(--u))/1.2 "Sora", "Inter", sans-serif;
  letter-spacing: -0.015em;
  color: #fff;
}
#ce-primesti .ax-acc p span {
  font: 600 calc(12.5 * var(--u))/1 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-pv {
  grid-column: 1;
  margin-top: calc(5 * var(--u));
  font: 500 calc(13 * var(--u))/1.3 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-pv i {
  margin-left: calc(8 * var(--u));
  font-style: normal;
  font-weight: 700;
  color: #ececf3;
}
#ce-primesti .ax-acc .ax-i {
  grid-column: 2;
  grid-row: 1 / span 2;
  box-sizing: border-box;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #d3d3dd;
}
/* pașii: cel de acum e luminat, cei făcuți se bifează și se sting */
#ce-primesti .ax-st {
  list-style: none;
  margin: 0 calc(-20 * var(--u));
  padding: 0;
}
#ce-primesti .ax-st li {
  position: relative;
  display: flex;
  gap: calc(14 * var(--u));
  padding: calc(11 * var(--u)) calc(20 * var(--u));
  transition: background 0.4s ease;
}
#ce-primesti .ax-st li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(3 * var(--u));
  background: var(--ax-now-2); /* Patch 2.1 6-10-26: pasul de acum, linia violet */
  opacity: 0;
  transition: opacity 0.4s ease;
}
#ce-primesti .ax-st li:first-child:not(.is),
#ce-primesti .ax-st li.is + li:not(.is) {
  background: rgba(255, 255, 255, 0.035);
}
#ce-primesti .ax-st li:first-child:not(.is)::before,
#ce-primesti .ax-st li.is + li:not(.is)::before {
  opacity: 1;
}
#ce-primesti .ax-st i {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.22);
  font-style: normal;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
#ce-primesti .ax-st li:first-child:not(.is) i,
#ce-primesti .ax-st li.is + li:not(.is) i {
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.85);
}
#ce-primesti .ax-st i b {
  font: 700 calc(13 * var(--u))/1 "Inter", sans-serif;
  color: #ececf3;
  transition: opacity 0.2s ease;
}
#ce-primesti .ax-st i .ax-i,
#ce-primesti .ax-ls i .ax-i,
#ce-primesti .ax-do i .ax-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  margin: calc(-7 * var(--u)) 0 0 calc(-7 * var(--u));
  stroke-width: 3;
  stroke-dasharray: 24;
  color: #fff;
  opacity: 0;
}
#ce-primesti .ax-st p {
  padding-top: calc(5 * var(--u));
  font: 500 calc(14.5 * var(--u))/1.45 "Inter", sans-serif;
  color: #d3d3dd;
  text-wrap: pretty;
  transition: color 0.4s ease;
}
#ce-primesti .ax-st p b {
  font-weight: 700;
  color: #fff;
  transition: color 0.4s ease;
}
/* Patch 2.1 6-10-26: tot ce e făcut (pașii, lista, acțiunile lui Andu) = cerc verde plin, cu bifa albă */
#ce-primesti .ax-st li.is i,
#ce-primesti .ax-ls li.is i,
#ce-primesti .ax-do .is i {
  background: var(--ax-done);
  box-shadow: none;
  animation: axPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ce-primesti .ax-st li.is i b {
  opacity: 0;
}
#ce-primesti .ax-st li.is i .ax-i,
#ce-primesti .ax-ls li.is i .ax-i,
#ce-primesti .ax-do .is i .ax-i {
  opacity: 1;
  animation: axDraw 0.34s ease 0.06s both;
}
#ce-primesti .ax-st li.is p { color: #7d8095; }
#ce-primesti .ax-st li.is p b { color: #9b9bac; }

/* lista de cumpărături */
#ce-primesti .ax-sub {
  margin-top: calc(8 * var(--u));
  font: 500 calc(14.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-per {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(38 * var(--u));
  margin-top: calc(14 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  font: 650 calc(13.5 * var(--u))/1 "Inter", sans-serif;
  color: #ececf3;
}
#ce-primesti .ax-per .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
#ce-primesti .ax-pr {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(20 * var(--u));
  padding: 0 calc(4 * var(--u));
}
#ce-primesti .ax-pr i {
  flex: 1;
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
#ce-primesti .ax-pr s {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ax-done), var(--ax-done-2)); /* Patch 2.1 6-10-26: progresul, verde */
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0.44));
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#ce-primesti .ax-pr span {
  font: 500 calc(14 * var(--u))/1 "Inter", sans-serif;
  color: #9b9bac;
  font-variant-numeric: tabular-nums;
}
#ce-primesti .ax-pr span b {
  font-weight: 700;
  color: #fff;
}
#ce-primesti .ax-cat {
  display: flex;
  justify-content: space-between;
  margin: calc(18 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));
  font: 700 calc(11.5 * var(--u))/1 "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #84879e;
}
#ce-primesti .ax-ls {
  list-style: none;
  margin: 0;
  padding: 0;
}
#ce-primesti .ax-ls li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: calc(44 * var(--u));
  padding: 0 calc(4 * var(--u));
  font: 500 calc(15 * var(--u))/1.25 "Inter", sans-serif;
  color: #ececf3;
}
#ce-primesti .ax-ls i {
  position: relative;
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.28);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
#ce-primesti .ax-ls i .ax-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin: calc(-6.5 * var(--u)) 0 0 calc(-6.5 * var(--u));
}
#ce-primesti .ax-ls span {
  background: linear-gradient(currentColor, currentColor) 0 56% / 0 calc(1.5 * var(--u)) no-repeat;
  transition: color 0.35s ease, background-size 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
#ce-primesti .ax-ls em {
  margin-left: auto;
  font: 500 calc(14 * var(--u))/1 "Inter", sans-serif;
  font-style: normal;
  color: #9b9bac;
  transition: color 0.35s ease;
}
#ce-primesti .ax-ls li.is span {
  color: #7d8095;
  background-size: 100% calc(1.5 * var(--u));
}
#ce-primesti .ax-ls li.is em {
  color: #666a7e;
}

/* 3 · Andu — conversația crește de jos în sus, ca în chat */
#ce-primesti .ax-chat {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(84 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 calc(18 * var(--u)));
  mask-image: linear-gradient(transparent, #000 calc(18 * var(--u)));
}
/* ca într-un chat adevărat: conversația începe sus; când nu mai încape, urcă (rămâne lipită de câmpul de jos) */
#ce-primesti .ax-cv {
  position: absolute;
  left: calc(16 * var(--u));
  right: calc(16 * var(--u));
  bottom: calc(4 * var(--u));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: calc(100% - calc(4 * var(--u)));
  padding-top: calc(6 * var(--u));
}
#ce-primesti .ax-m {
  flex: none;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#ce-primesti .ax-m > div {
  min-height: 0;
  overflow: hidden;
}
#ce-primesti .ax-m > div > :first-child {
  margin-top: calc(14 * var(--u));
}
#ce-primesti .ax-m:not(.is) {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(calc(12 * var(--u)));
}
#ce-primesti .ax-ai {
  max-width: calc(340 * var(--u));
  font: 400 calc(15 * var(--u))/1.5 "Inter", sans-serif;
  color: #ececf3;
  text-wrap: pretty;
}
#ce-primesti .ax-me > div {
  display: flex;
  justify-content: flex-end;
}
#ce-primesti .ax-me p {
  max-width: calc(270 * var(--u));
  padding: calc(11 * var(--u)) calc(16 * var(--u));
  border-radius: calc(22 * var(--u)) calc(22 * var(--u)) calc(6 * var(--u)) calc(22 * var(--u));
  font: 500 calc(15 * var(--u))/1.4 "Inter", sans-serif;
  color: #fff;
  /* Patch 2.1 6-10-26: bula ta, la fel ca în conversația cu Andu din program (culorile lui, foarte stinse) */
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.24), rgba(124, 92, 252, 0.26) 55%, rgba(181, 33, 233, 0.24)), #0b0f18;
  box-shadow: inset 0 0 0 1px rgba(157, 124, 255, 0.38), 0 calc(12 * var(--u)) calc(28 * var(--u)) calc(-16 * var(--u)) rgba(124, 92, 252, 0.6);
}
#ce-primesti .ax-dots {
  display: inline-flex;
  gap: calc(5 * var(--u));
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(255, 255, 255, 0.06);
}
#ce-primesti .ax-dots i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #b8a4ff;
  animation: axDot 1s ease-in-out infinite;
}
#ce-primesti .ax-dots i:nth-child(2) { animation-delay: 0.15s; }
#ce-primesti .ax-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes axDot {
  0%, 100% { opacity: 0.35; transform: none; }
  40% { opacity: 1; transform: translateY(calc(-3 * var(--u))); }
}
#ce-primesti .ax-card {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#ce-primesti .ax-ct {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(13 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: calc(22 * var(--u));
  line-height: 1;
}
#ce-primesti .ax-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}
#ce-primesti .ax-card b {
  font: 650 calc(14.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #fff;
}
#ce-primesti .ax-card > span:nth-child(2) > span {
  font: 500 calc(12.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-card .ax-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  color: #9b9bac;
}
#ce-primesti .ax-qr {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
}
#ce-primesti .ax-q {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  min-height: calc(38 * var(--u));
  padding: 0 calc(15 * var(--u)) 0 calc(12 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font: 600 calc(13.5 * var(--u))/1 "Inter", sans-serif;
  color: #ececf3;
  white-space: nowrap;
}
#ce-primesti .ax-q::before {
  content: "\21B3";
  font-weight: 700;
  color: #8b6cff;
}
#ce-primesti .ax-q1 {
  background: rgba(var(--ax-now-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--ax-now-rgb), 0.6);
}
#ce-primesti .ax-do {
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
  padding: calc(13 * var(--u)) calc(14 * var(--u));
  border-radius: calc(18 * var(--u));
  /* Patch 2.1 6-10-26: cartonașul cu ce a făcut Andu e neutru (ca mesajele lui de sistem); bifele spun „gata" */
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
#ce-primesti .ax-do > span {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font: 600 calc(13.5 * var(--u))/1.3 "Inter", sans-serif;
  color: #9b9bac;
  transition: color 0.3s ease;
}
#ce-primesti .ax-do > span.is {
  color: #ececf3;
}
#ce-primesti .ax-do i {
  position: relative;
  flex: none;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.14); /* Patch 2.1 6-10-26: „lucrează", neutru */
}
#ce-primesti .ax-do i::before {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(2 * var(--u)) solid transparent;
  border-top-color: #c9ccd8;
  border-radius: 50%;
  animation: axSpin 0.8s linear infinite;
}
#ce-primesti .ax-do .is i::before {
  display: none;
}
#ce-primesti .ax-do i .ax-i {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));
}
@keyframes axSpin {
  to { transform: rotate(360deg); }
}
/* câmpul de jos: aplicația „scrie" mesajul, apoi îl trimite */
#ce-primesti .ax-cmp {
  position: absolute;
  left: calc(14 * var(--u));
  right: calc(14 * var(--u));
  bottom: calc(26 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(54 * var(--u));
  padding: 0 calc(7 * var(--u)) 0 calc(20 * var(--u));
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0, 194, 255, 0.07), rgba(181, 33, 233, 0.09)), #0d1019;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 252, 0.4), 0 0 calc(26 * var(--u)) calc(-6 * var(--u)) rgba(124, 92, 252, 0.4);
  font: 400 calc(15 * var(--u))/1 "Inter", sans-serif;
}
#ce-primesti .ax-in {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
}
#ce-primesti .ax-cmp.on .ax-in::after {
  content: "";
  display: inline-block;
  width: calc(1.5 * var(--u));
  height: calc(17 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: calc(-3 * var(--u));
  background: #b8a4ff;
}
#ce-primesti .ax-ph {
  color: #84879e;
  white-space: nowrap;
}
#ce-primesti .ax-cmp.on .ax-ph {
  display: none;
}
#ce-primesti .ax-send {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin-left: auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #9b9bac;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
#ce-primesti .ax-cmp.on .ax-send {
  background: linear-gradient(135deg, #00c2ff, #7c5cfc 55%, #b521e9); /* Patch 2.1 6-10-26: ca butonul lui Andu */
  box-shadow: none;
  color: #fff;
}
#ce-primesti .ax-send .ax-i {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}

/* atingerea arătată: un deget invizibil apasă butonul spre care merge turul */
#ce-primesti .ax-b-p.tap,
#ce-primesti .ax-q.tap {
  animation: axPress 0.55s ease both;
}
#ce-primesti .ax-b-p.tap::after,
#ce-primesti .ax-q.tap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin: calc(-23 * var(--u)) 0 0 calc(-23 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18) 70%, transparent);
  pointer-events: none;
  animation: axTap 0.75s ease-out both;
}
/* Patch ultimate Dennis 6-10-26: în povestea rețetei, degetul apasă și pe „Ingrediente” (pe săgeata din dreapta) */
#ce-primesti .ax-acc.tap {
  position: relative;
}
#ce-primesti .ax-acc.tap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-6 * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  margin-top: calc(-23 * var(--u));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.18) 70%, transparent);
  pointer-events: none;
  animation: axTap 0.75s ease-out both;
}
@keyframes axPress {
  35% { transform: scale(0.95); filter: brightness(1.18); }
}
@keyframes axTap {
  from { opacity: 1; transform: scale(0.4); }
  to { opacity: 0; transform: scale(2.2); }
}

/* mișcare redusă: fiecare ecran apare direct în starea lui finală (home.js pune toate bifele deodată) */
@media (prefers-reduced-motion: reduce) {
  #ce-primesti .ax,
  #ce-primesti .ax *,
  #ce-primesti .ax *::before,
  #ce-primesti .ax *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   PU · joacă — Patch ultimate Dennis 6-10-26 · telefonul din „Ce primești?” se poate juca (home.js „S · C · joacă”)
   Bifezi mesele (cercul) și deschizi rețeta fiecărei mese (rândul); în rețetă, ingredientele se desfac, pașii se
   bifează; în listă, produsele se bifează; lui Andu îi poți scrie (răspunsuri scrise dinainte). Ce e doar în
   program primește un mesaj scurt, jos în telefon (.ax-toast, ca toast-ul aplicației). Sub telefon, o singură
   dată, „Încearcă-l” (.pt-hint), până îl atingi. Culorile rămân paleta D (violet = acum / acțiune, verde = făcut).
   ═════════════════════════════════════════════════════════════════════════════ */
/* decorul telefonului (bara de stare, insula, bara „home”) nu prinde atingeri: pe ecranele mici, bara „home” stă peste
   ultimul rând din meniu */
#ce-primesti .ph-status,
#ce-primesti .ph-island,
#ce-primesti .ph-home {
  pointer-events: none;
}
/* ce se poate atinge arată că se poate atinge */
#ce-primesti .ax-d,
#ce-primesti .ax [role="checkbox"] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#ce-primesti .ax-d {
  transition: transform 0.2s ease;
}
#ce-primesti .ax-d:active,
#ce-primesti .ax-per:active,
#ce-primesti .ax-q:not([aria-disabled="true"]):active,
#ce-primesti .ax-card:active,
#ce-primesti .ax-mk:active {
  transform: scale(0.95);
}
#ce-primesti .ax [role="checkbox"]:focus-visible {
  outline: 2px solid #b8a4ff;
  outline-offset: -2px;
  border-radius: calc(12 * var(--u));
}
/* ce se apasă are cel puțin 24 × 24 px și pe telefoanele mici (sub ~400 px, „pixelul de telefon" e mai mic). Minimul
   e 26 px: telefonul e înclinat în 3D, iar proiecția micșorează ținta cu până la ~5% */
#ce-primesti button.ax-mk {
  width: max(calc(38 * var(--u)), 26px);
  height: max(calc(38 * var(--u)), 26px);
}
#ce-primesti button.ax-q,
#ce-primesti button.ax-per {
  min-height: max(calc(38 * var(--u)), 26px);
}
#ce-primesti button.ax-per {
  height: auto;
}
#ce-primesti button.ax-send {
  width: max(calc(40 * var(--u)), 26px);
  height: max(calc(40 * var(--u)), 26px);
}
#ce-primesti .ax-rb > b {
  text-align: left;
}
@media (hover: hover) and (pointer: fine) {
  #ce-primesti .ax-r:hover:not(.is) .ax-mk {
    box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.34);
  }
  #ce-primesti .ax-cur:hover:not(.is) .ax-mk {
    box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--ax-now);
  }
  #ce-primesti .ax-r:has(.ax-rb:hover) {
    background: rgba(255, 255, 255, 0.04);
  }
  #ce-primesti .ax-cur:has(.ax-rb:hover) {
    background: rgba(var(--ax-now-rgb), 0.12);
  }
  #ce-primesti .ax-tl:hover,
  #ce-primesti .ax-per:hover,
  #ce-primesti .ax-q:not([aria-disabled="true"]):hover,
  #ce-primesti .ax-card:hover,
  #ce-primesti .ax-acc:hover .ax-i {
    filter: brightness(1.25);
  }
  #ce-primesti .ax-ls li:hover:not(.is) i,
  #ce-primesti .ax-st li:hover:not(.is) i {
    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.55);
  }
  #ce-primesti .ax-d:not(.sel):hover b {
    color: #fff;
  }
}

/* rețeta: ingredientele se desfac, pașii se strâng (una singură deschisă, ca să încapă totul în foaie) */
#ce-primesti button.ax-acc {
  width: 100%;
}
#ce-primesti .ax-acc .ax-i {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#ce-primesti .ax-acc[aria-expanded="true"] .ax-i {
  transform: rotate(180deg);
}
#ce-primesti .ax-acc[aria-expanded="true"] .ax-pv {
  display: none;
}
#ce-primesti .ax-ing[hidden],
#ce-primesti .ax-st[hidden] {
  display: none;
}
#ce-primesti .ax-ing {
  list-style: none;
  margin: 0 0 calc(8 * var(--u));
  padding: 0;
  animation: axIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#ce-primesti .ax-ing li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-height: calc(38 * var(--u));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 500 calc(14.5 * var(--u))/1.25 "Inter", sans-serif;
  color: #ececf3;
}
#ce-primesti .ax-ing li:last-child {
  box-shadow: none;
}
#ce-primesti .ax-ing em {
  flex: none;
  font: 500 calc(13.5 * var(--u))/1 "Inter", sans-serif;
  font-style: normal;
  color: #9b9bac;
}
#ce-primesti .ax-ing + .ax-acc {
  margin-top: 0;
}
#ce-primesti .ax-st:not([hidden]) {
  animation: axIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* foaia rețetei, ca în programul de azi (plan-x-pap.css, „.xq”): secțiunile Ingrediente / Instrucțiuni / Păstrare se
   desfac fiecare; ingredientele au cantitatea în coloana ei și se taie la atingere; pașii bifați se strâng pe un rând;
   jos „Schimbă masa”, valorile pe porție și bara fixă „Am mâncat” */
#ce-primesti .ax-pn {
  padding-bottom: calc(96 * var(--u));
}
#ce-primesti .ax-info + .ax-acc {
  margin-top: calc(18 * var(--u));
}
#ce-primesti .ax-acc {
  margin-top: 0;
  padding: calc(15 * var(--u)) 0 calc(14 * var(--u));
}
#ce-primesti .ax-acc p b {
  font-size: calc(19.5 * var(--u));
}
#ce-primesti .ax-acc p span {
  font-size: calc(13 * var(--u));
}
#ce-primesti .ax-acc .ax-i {
  transform: rotate(0deg);
}
#ce-primesti .ax-ing li {
  display: grid;
  grid-template-columns: calc(78 * var(--u)) 1fr;
  align-items: baseline;
  gap: calc(12 * var(--u));
  justify-content: initial;
  min-height: 0;
  padding: calc(11 * var(--u)) 0;
  box-shadow: none;
  font: 500 calc(15 * var(--u))/1.4 "Inter", sans-serif;
  color: #c7c9d6;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
#ce-primesti .ax-ing li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#ce-primesti .ax-ing em {
  font: 650 calc(15 * var(--u))/1.4 "Inter", sans-serif;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
#ce-primesti .ax-ing li.is {
  opacity: 0.38;
}
#ce-primesti .ax-ing li.is span {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
#ce-primesti .ax-st li.is {
  align-items: center;
  padding-top: calc(9 * var(--u));
  padding-bottom: calc(9 * var(--u));
}
#ce-primesti .ax-st li.is p {
  min-width: 0;
  padding-top: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(13.5 * var(--u));
}
#ce-primesti .ax-kp {
  padding-bottom: calc(10 * var(--u));
}
#ce-primesti .ax-kp[hidden] {
  display: none;
}
#ce-primesti .ax-kp p {
  margin: 0 0 calc(8 * var(--u));
  font: 400 calc(13.5 * var(--u))/1.6 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-kp p:first-child {
  color: #c7c9d6;
}
#ce-primesti .ax-ft {
  padding-top: calc(16 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#ce-primesti .ax-cm {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: max(calc(42 * var(--u)), 26px);
  padding: 0 calc(15 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font: 650 calc(14 * var(--u))/1 "Inter", sans-serif;
  color: #ececf3;
}
#ce-primesti .ax-cm .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  color: #b7a6ff;
}
#ce-primesti .ax-ft .ax-mac {
  margin-top: calc(14 * var(--u));
}
#ce-primesti .ax-macn {
  margin-top: calc(7 * var(--u));
  font: 500 calc(11.5 * var(--u))/1 "Inter", sans-serif;
  color: #84879e;
  text-align: center;
}
#ce-primesti .ax-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(rgba(16, 19, 27, 0), #10131b 32%);
}
#ce-primesti .ax-eatb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: 100%;
  min-height: max(calc(50 * var(--u)), 26px);
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, #7658f2, #6346ea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-12 * var(--u)) rgba(var(--ax-now-rgb), 0.75);
  font: 650 calc(15 * var(--u))/1 "Inter", sans-serif;
  color: #fff;
  text-align: center;
}
#ce-primesti .ax-eatb.on {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #ececf3;
}
#ce-primesti .ax-eatb .ax-i {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  stroke-width: 2.6;
  color: var(--ax-done-2);
}
/* tablou: legenda de sub zile și nota dată deja unei mese (fața din rând), ca în program */
#ce-primesti .ax-lg {
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--u));
  margin: calc(-2 * var(--u)) 0 calc(8 * var(--u));
  font: 550 calc(11.5 * var(--u))/1 "Inter", sans-serif;
  color: #84879e;
}
#ce-primesti .ax-lg span {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
}
#ce-primesti .ax-lg .ax-i {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
}
#ce-primesti .ax-fc {
  display: inline-grid;
  place-items: center;
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin-left: calc(2 * var(--u));
}
#ce-primesti .ax-fc svg {
  width: 100%;
  height: 100%;
}
#ce-primesti .ax-fc.r5 { color: #01db69; }
#ce-primesti .ax-fc.r3 { color: #ffcc33; }

/* uneltele și „Schimbă perioada" sunt butoane; cartonașul lui Andu la fel */
#ce-primesti button.ax-card {
  width: 100%;
  text-align: left;
}

/* Andu: mesajele care încă n-au venit nu se văd, deci nici nu se pot atinge sau primi focus (ascunderea așteaptă
   să se termine strângerea, ca „Andu scrie…" să se stingă frumos) */
#ce-primesti .ax-m {
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
#ce-primesti .ax-m:not(.is) {
  visibility: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s;
}
/* Andu: răspunsurile rapide se apasă o dată; „Vreau programul meu" duce spre program */
#ce-primesti [data-ax-u].ax-me p {
  overflow-wrap: anywhere;
}
#ce-primesti .ax-q.used {
  opacity: 0.45;
}
#ce-primesti .ax-q[aria-disabled="true"] {
  cursor: default;
}
/* ce nu încape în telefon e tăiat, nu derulat: focusul de la tastatură nu mai poate derula ecranul (Chromium o face
   cu overflow:hidden), iar degetul nu are ce prinde */
@supports (overflow: clip) {
  #ce-primesti .ap-s,
  #ce-primesti .ax-pn,
  #ce-primesti .ax-chat {
    overflow: clip;
  }
}
#ce-primesti .ax-q.ax-go::before {
  content: none;
}
#ce-primesti .ax-q.ax-go::after {
  content: "\2192";
  font-weight: 700;
  color: var(--ax-now-t);
}
/* câmpul de jos e unul adevărat. Are 16px (sub 16px, iOS ar mări pagina când îl atingi), micșorat la mărimea
   textului din telefon cu --fk (home.js: mărimea textului / 16) */
#ce-primesti .ax-fld {
  position: absolute;
  top: 50%;
  left: calc(20 * var(--u));
  width: calc((100% - 35 * var(--u) - max(40 * var(--u), 26px)) / var(--fk, 0.6));
  height: calc(max(40 * var(--u), 26px) / var(--fk, 0.6));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  outline: none;
  box-shadow: none;
  font: 400 16px/1.2 "Inter", sans-serif;
  color: #fff;
  caret-color: #b8a4ff;
  transform: translateY(-50%) scale(var(--fk, 0.6));
  transform-origin: 0 50%;
  -webkit-appearance: none;
  appearance: none;
}
#ce-primesti .ax-fld::placeholder {
  color: #84879e;
  opacity: 1;
}
#ce-primesti .ax-cmp.on .ax-fld::placeholder {
  color: transparent;
}
#ce-primesti .ax-cmp:focus-within {
  box-shadow: inset 0 0 0 1.5px rgba(157, 124, 255, 0.85), 0 0 calc(26 * var(--u)) calc(-6 * var(--u)) rgba(124, 92, 252, 0.55);
}
#ce-primesti .ax-cmp:has(.ax-fld:not(:placeholder-shown)) .ax-send {
  background: linear-gradient(135deg, #00c2ff, #7c5cfc 55%, #b521e9);
  box-shadow: none;
  color: #fff;
}
#ce-primesti .ax-send {
  position: relative;
  z-index: 1;
}

/* mesajul scurt din telefon (ca toast-ul din program), deasupra foilor */
#ce-primesti .ax-toast {
  position: absolute;
  left: 50%;
  bottom: calc(44 * var(--u));
  z-index: 9;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 36 * var(--u));
  padding: calc(11 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: rgba(30, 34, 46, 0.97);
  box-shadow: 0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  font: 550 calc(13.5 * var(--u))/1.4 "Inter", sans-serif;
  color: #ececf3;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: translate(-50%, calc(12 * var(--u))) scale(0.98);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
#ce-primesti .ax-toast.on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
/* la Andu, mesajul scurt stă deasupra câmpului de scris, nu peste el */
#ce-primesti .ax[data-cur="3"] .ax-toast {
  bottom: calc(112 * var(--u));
}
#ce-primesti .ax-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* „Încearcă-l": sub telefon, o dată, până îl atingi */
#ce-primesti .pt-hint {
  position: absolute;
  left: 50%;
  bottom: -18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 15px 9px 11px;
  border-radius: 99px;
  background: rgba(16, 19, 27, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 12px 30px -12px rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font: 600 13px/1.1 "Inter", sans-serif;
  color: #ececf3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
#ce-primesti .pt-hint.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
#ce-primesti .pt-hint svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #b8a4ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ce-primesti .pt-hint.on svg {
  animation: ptTap 1.8s ease-in-out 0.4s infinite;
}
@keyframes ptTap {
  0%, 60%, 100% { transform: none; }
  30% { transform: translateY(2px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  #ce-primesti .pt-hint,
  #ce-primesti .pt-hint svg,
  #ce-primesti .ax-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Patch ultimate Dennis 6-10-26 · telefonul, ca programul de azi (plan-x-s.js, plan-x-core.js, plan-x-pap.css):
   cardul de sus trece la masa următoare („Acum” → „Urmează” → „Gata pe azi”), rândul mesei notate are fața notei,
   rețeta are „Cantități pentru” și pașii frază cu frază
   ═════════════════════════════════════════════════════════════════════════════ */
/* sub zile și legendă, linia subțire a antetului din program */
#ce-primesti .ax-lg {
  margin-bottom: 0;
  padding-bottom: calc(12 * var(--u));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}
#ce-primesti .ax-lg + .ax-now {
  margin-top: calc(14 * var(--u));
}
/* „Urmează”: masa de după, fără punctul viu și fără marginea violet (ca .st-next din program) */
#ce-primesti .ax-now.st-next {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(28 * var(--u)) calc(54 * var(--u)) calc(-34 * var(--u)) rgba(0, 0, 0, 0.6);
}
#ce-primesti .ax-now.st-next .ax-live {
  display: none;
}
#ce-primesti .ax-now.st-next .ax-kick {
  color: #e6e7ee;
}
#ce-primesti .ax-now.ax-hin > * {
  animation: axHin 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes axHin {
  from { opacity: 0; transform: translateY(calc(8 * var(--u))); }
}
/* „Gata pe azi”: bifa mare, verde, și zilele din ultima săptămână (plină = toate mesele bifate) */
#ce-primesti .ax-now:not(.t-done) .ax-dn,
#ce-primesti .ax-now.t-done > :not(.ax-dn) {
  display: none;
}
#ce-primesti .ax-now.t-done {
  padding: calc(24 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  background: linear-gradient(180deg, rgba(34, 176, 125, 0.07), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), #0e1119;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 calc(26 * var(--u)) calc(50 * var(--u)) calc(-34 * var(--u)) rgba(34, 176, 125, 0.45);
  text-align: center;
}
#ce-primesti .ax-dn-ic {
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ax-done);
  box-shadow: 0 0 0 calc(8 * var(--u)) rgba(34, 176, 125, 0.14);
  color: #fff;
  animation: axDnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes axDnPop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
#ce-primesti .ax-dn-ic .ax-i {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  stroke-width: 2.6;
}
#ce-primesti .ax-dn-t {
  margin-top: calc(16 * var(--u));
  font: 650 calc(23 * var(--u))/1.15 "Sora", "Inter", sans-serif;
  letter-spacing: -0.02em;
  color: #fff;
}
#ce-primesti .ax-dn-p {
  margin-top: calc(6 * var(--u));
  font: 400 calc(14 * var(--u))/1.45 "Inter", sans-serif;
  color: #c8c8d4;
}
#ce-primesti .ax-wd {
  margin-top: calc(16 * var(--u));
}
#ce-primesti .ax-wd p {
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
}
#ce-primesti .ax-wd i {
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(255, 255, 255, 0.14);
  font-style: normal;
}
#ce-primesti .ax-wd i b {
  font: 700 calc(10.5 * var(--u))/1 "Inter", sans-serif;
  color: #84879e;
}
#ce-primesti .ax-wd i.part {
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) rgba(34, 176, 125, 0.6);
}
#ce-primesti .ax-wd i.part b {
  color: var(--ax-done-2);
}
#ce-primesti .ax-wd i.full {
  background: var(--ax-done-deep);
  box-shadow: none;
}
#ce-primesti .ax-wd i.full b {
  color: #fff;
}
#ce-primesti .ax-wd i.now {
  outline: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.5);
  outline-offset: calc(2 * var(--u));
}
#ce-primesti .ax-wd span {
  display: block;
  margin-top: calc(10 * var(--u));
  font: 500 calc(12.5 * var(--u))/1.2 "Inter", sans-serif;
  color: #84879e;
}
/* rândurile: „toate bifate” când sunt toate */
#ce-primesti .ax-lh:not(.all) .ax-la,
#ce-primesti .ax-lh.all .ax-lc {
  display: none;
}
/* fața notei e desenată din linie (ca .xf din program); doar ochii sunt plini. Regula generală a site-ului care umple
   cercurile din iconițele cu fill="none" nu ajunge la ea */
#ce-primesti .ax-fc svg :is(path, circle) {
  fill: none;
}
#ce-primesti .ax-fc svg circle.e {
  fill: currentColor;
  stroke: none;
}
#ce-primesti .ax-fc.r2 { color: #ff5c6c; }
/* rețeta: „Cantități pentru − 2 porții +”, pașii frază cu frază */
#ce-primesti .ax-ingw[hidden] {
  display: none;
}
#ce-primesti .ax-por {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(4 * var(--u));
  font: 500 calc(14 * var(--u))/1.2 "Inter", sans-serif;
  color: #9b9bac;
}
#ce-primesti .ax-por > span {
  margin-right: auto;
}
#ce-primesti .ax-por b {
  min-width: calc(62 * var(--u));
  text-align: center;
  font-weight: 650;
  color: #fff;
}
#ce-primesti .ax-pq {
  display: grid;
  place-items: center;
  width: max(calc(36 * var(--u)), 26px);
  height: max(calc(36 * var(--u)), 26px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #ececf3;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#ce-primesti .ax-pq:not([aria-disabled="true"]):active {
  transform: scale(0.92);
}
#ce-primesti .ax-pq[aria-disabled="true"] {
  opacity: 0.3;
  cursor: default;
}
#ce-primesti .ax-pq .ax-i {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}
#ce-primesti .ax-st .ax-l {
  display: block;
}
#ce-primesti .ax-st .ax-l + .ax-l {
  margin-top: calc(6 * var(--u));
}
#ce-primesti .ax-st li.is .ax-l {
  display: inline;
}
#ce-primesti .ax-st li.is .ax-l + .ax-l {
  margin-left: 0.3em;
}
#ce-primesti .ax-pq:focus-visible {
  outline: 2px solid #b8a4ff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #ce-primesti .ax-dn-ic,
  #ce-primesti .ax-now.ax-hin > * {
    animation: none !important;
    transition: none !important;
  }
}

/* Update fluiditate Dennis — o zonă din afara ecranului (home.js îi pune atributul data-fl-off) își ține animațiile
   CSS pe loc; le reia de unde au rămas când revine pe ecran */
[data-fl-off],
[data-fl-off] *,
[data-fl-off]::before,
[data-fl-off]::after,
[data-fl-off] *::before,
[data-fl-off] *::after {
  animation-play-state: paused !important;
}
/* foaia „Alege obiectivul” și fundalul ei stau în #program, dar sunt fixe pe ecran: se pot deschide (din bara de jos)
   cât secțiunea e în afara ecranului, deci nu moștenesc pauza ei (altfel obiectivele ar rămâne nevăzute, în intrare) */
[data-fl-off] :is(.pc-sheet, .pc-shade),
[data-fl-off] :is(.pc-sheet, .pc-shade) *,
[data-fl-off] :is(.pc-sheet, .pc-shade)::before,
[data-fl-off] :is(.pc-sheet, .pc-shade)::after,
[data-fl-off] :is(.pc-sheet, .pc-shade) *::before,
[data-fl-off] :is(.pc-sheet, .pc-shade) *::after {
  animation-play-state: running !important;
}