@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&display=swap');

/* =========================================================================
   WebTelekom — design system (landing + panou)
   Arhitectură: PRIMITIVE (singurul loc cu valori brute) -> SEMANTIC (light-dark)
   -> COMPONENTE. Schimbi tema/verdele dintr-un singur loc (:root).
   ========================================================================= */
:root{
  color-scheme: light dark;

  /* ---- 1. PRIMITIVE (singurele valori hardcodate - modern purple-indigo) ---- */
  --green-300:#c084fc; --green-400:#a855f7; --green-500:#8b5cf6; --green-600:#7c3aed; --green-700:#6d28d9;
  --green-ink:#1e1b4b;
  --ink-950:#05070c; --ink-900:#080b14; --ink-850:#0d111f; --ink-800:#111629; --ink-700:#1a213b; --ink-600:#273256;
  --paper-0:#ffffff; --paper-50:#f8fafc; --paper-100:#f1f5f9; --paper-200:#e2e8f0; --paper-300:#cbd5e1;
  --slate-600:#475569; --slate-500:#64748b; --slate-400:#94a3b8; --white:#ffffff;

  /* ---- 2. SEMANTIC (comută automat light/dark) — stil Cloudflare: alb pur, neutre ---- */
  --bg:        light-dark(#ffffff,  var(--ink-900));                                        /* alb curat */
  --bg-elev:   light-dark(#ffffff,  var(--ink-850));                                        /* carduri albe, fără tentă */
  --bg-soft:   light-dark(#f8fafc,  var(--ink-850));                                        /* bandă alternativă gri neutru */
  --fg:        light-dark(#0f172a,  #f1f5f9);
  --fg-muted:  light-dark(#475569,  var(--slate-400));
  --border:    light-dark(#e2e8f0,  var(--ink-700));                                        /* hairline gri neutru */
  --border-strong: light-dark(#cbd5e1, var(--ink-600));
  --accent:    light-dark(var(--green-600), var(--green-500));    /* hue-agnostic: schimbă AICI verde↔portocaliu */
  --accent-2:  light-dark(var(--green-500), var(--green-400));
  --accent-ink:light-dark(var(--white),     var(--green-ink));
  --on-accent: var(--accent-ink);
  --ring:  color-mix(in srgb, var(--accent) 35%, transparent);
  /* decorative active: --glow subtil, --grad = gradient accent */
  --glow:  rgba(124, 58, 237, 0.15);
  --grad:  linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --shadow:    light-dark(0 10px 25px -5px rgba(15,23,42,.08), 0 20px 50px rgba(0,0,0,.4));
  --shadow-sm: light-dark(0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(0,0,0,.2));

  /* ---- 3. SCALE (spațiere / rază / tipografie / layout) ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --r-sm:.375rem; --r:.5rem; --r-lg:.75rem; --r-xl:1.25rem; --r-pill:2rem;   /* colțuri corporate (mici/moderate) */
  --container:75rem;
  --fz-eyebrow:.78rem; --fz-small:.9rem; --fz-body:1rem; --fz-lead:clamp(1.02rem,2.2vw,1.22rem);
  --fz-h3:1.15rem; --fz-h2:clamp(1.9rem,3.6vw,2.6rem); --fz-h1:clamp(2.1rem,6vw,3.7rem);
  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-headings: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --ease:.18s ease;

  /* ---- 4. PRIMITIVE (redesign) ---- */
  --grid-line: color-mix(in srgb, var(--fg-muted) 9%, transparent);
  --fz-display: clamp(2.4rem, 5vw, 3.75rem);
}
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{ color-scheme: dark; }
/* container ținut citibil ~1200px chiar pe ecrane mari (stil Cloudflare) */
@media (min-width:100rem){ :root{ --container:78rem; } }

/* ---- reset / base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color var(--ease),color var(--ease)}
h1,h2,h3,h4{font-family:var(--font-headings);margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:50;background:var(--accent);color:var(--on-accent);
  padding:.6rem 1rem;border-radius:0 0 var(--r) 0;font-weight:600}
.skip-link:focus{left:0}

/* =========================================================================
   COMPONENTE REUTILIZABILE
   ========================================================================= */
/* layout */
.container{max-width:var(--container);margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
.section{padding-block:clamp(4rem,8vw,6rem);border-top:1px solid var(--border)}
.section__head{text-align:center;margin-bottom:var(--s6)}
.grid{display:grid;gap:var(--s4)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}

/* tipografie utilitare */
.eyebrow{display:block;color:var(--accent);font-weight:700;font-size:var(--fz-eyebrow);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s2)}
.h2{font-size:var(--fz-h2)}
.sub{color:var(--fg-muted);max-width:42rem;margin:var(--s2) auto 0}
.grad-text{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}

/* buton */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);cursor:pointer;
  font-weight:600;font-size:var(--fz-body);padding:.85rem 1.7rem;border-radius:var(--r);
  border:1px solid transparent;transition:transform .12s cubic-bezier(0.4, 0, 0.2, 1),filter var(--ease),box-shadow var(--ease),border-color var(--ease),background var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--grad);color:var(--on-accent);box-shadow:0 4px 14px var(--glow)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(139, 92, 246, 0.35)}
.btn--ghost{background:var(--bg-elev);color:var(--fg);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--accent);background:var(--bg-soft);transform:translateY(-2px)}
.btn--sm{padding:.5rem 1rem;font-size:var(--fz-small)}

/* card */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--shadow-sm);transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease),background var(--ease)}
.card--hover:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow);background:light-dark(#ffffff, color-mix(in srgb, var(--accent) 3%, var(--bg-elev)))}

/* icon box */
.icon-box{width:2.6rem;height:2.6rem;border-radius:var(--r);display:grid;place-items:center;margin-bottom:var(--s3);
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.icon-box svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* chip */
.chip{display:inline-flex;align-items:center;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:.6rem 1.15rem;font-size:.94rem;font-weight:500;box-shadow:var(--shadow-sm);
  transition:border-color var(--ease),transform .12s ease}
.chip:hover{border-color:var(--accent);transform:translateY(-2px)}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--border)}
.nav{position:relative;display:flex;align-items:center;gap:var(--s4);max-width:var(--container);margin:0 auto;
  padding:var(--s3) clamp(1rem,4vw,2rem)}
.logo{display:inline-flex;align-items:center;gap:.55rem;color:var(--fg);
  font-weight:800;font-size:1.2rem;line-height:1;text-decoration:none}
.logo__mark{flex:0 0 auto;width:1.8rem;height:1.8rem;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  transition:transform var(--ease),box-shadow var(--ease)}
.logo__mark svg{width:1.15rem;height:1.15rem}
.logo:hover .logo__mark{transform:translateY(-1px);
  box-shadow:0 0 0 .18rem color-mix(in srgb,var(--accent) 20%,transparent)}
/* wordmark = UN singur token vizual: „Web”+„Telekom” lipite, citite ca un cuvânt */
.logo__word{display:inline-flex;align-items:baseline;letter-spacing:-.018em;white-space:nowrap}
.logo__lead{color:var(--fg)}
.logo__accent{color:var(--accent)}
.logo__dot{flex:0 0 auto;align-self:center;width:.3rem;height:.3rem;margin-left:.18rem;
  border-radius:50%;background:var(--accent);transition:transform var(--ease)}
.logo:hover .logo__dot{transform:scale(1.25)}
.nav__panel{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav__links{display:flex;gap:var(--s5)}
.nav__links a{color:var(--fg-muted);font-weight:500;font-size:.95rem}
.nav__links a:hover{color:var(--fg)}
.nav__actions{display:flex;align-items:center;gap:var(--s3)}
.nav-burger{display:none;width:2.4rem;height:2.4rem;place-items:center;cursor:pointer;border-radius:var(--r-sm);
  background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--fg)}
.nav-burger svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-burger .ico-close{display:none}
.nav.nav-open .nav-burger .ico-open{display:none}
.nav.nav-open .nav-burger .ico-close{display:block}

/* comutator temă */
.theme-toggle{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--r-sm);cursor:pointer;
  background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--fg);
  transition:border-color var(--ease),background var(--ease)}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .moon{display:none}.theme-toggle .sun{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .theme-toggle .sun{display:none}
  :root:not([data-theme]) .theme-toggle .moon{display:block}
}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}

@media (max-width:840px){
  .nav-burger{display:grid}
  .nav__panel{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:var(--s2);
    margin:0;padding:var(--s4) clamp(1rem,4vw,2rem);display:none;
    background:var(--bg-elev);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .nav.nav-open .nav__panel{display:flex}
  .nav__links{flex-direction:column;gap:0}
  .nav__links a{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--border)}
  .nav__cta{margin-top:var(--s3);text-align:center}
  .nav__actions{margin-left:auto}
}
@media (max-width:480px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .waitlist input,.waitlist .btn{flex:1 1 100%}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative;text-align:center;padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{display:none} /* glow radial scos — hero plat pe alb */
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:var(--r-pill);padding:.4rem 1rem;font-size:.82rem;font-weight:600;margin-bottom:var(--s5)}
.hero__badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.hero h1{font-size:var(--fz-h1);margin-bottom:var(--s4)}
.hero__lead{color:var(--fg-muted);font-size:var(--fz-lead);max-width:46rem;margin:0 auto var(--s6)}
.hero__cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.hero__note{margin-top:var(--s4);color:var(--fg-muted);font-size:var(--fz-small)}

/* pași */
.step__n{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--r);font-weight:800;
  background:var(--bg-soft);color:var(--accent);border:1px solid var(--border);margin-bottom:var(--s3)}
.step h3{font-size:var(--fz-h3);margin-bottom:var(--s2)}
.step p,.feature p{color:var(--fg-muted);font-size:var(--fz-small)}
.feature h3{font-size:var(--fz-h3);margin-bottom:var(--s2)}

/* nișe */
.niches{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}

/* prețuri */
.pricing{align-items:stretch}
.tier{display:flex;flex-direction:column;position:relative;padding:var(--s6)}
.tier--hot{background:var(--bg-elev);border:2px solid var(--accent);box-shadow:var(--shadow)}
.tier__badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:700;padding:.3rem .85rem;border-radius:var(--r-pill)}
.tier h3{font-size:1.3rem;margin-bottom:var(--s1)}
.tier__price{font-size:1.7rem;font-weight:800;color:var(--accent);margin:var(--s1) 0}
.tier__tagline{color:var(--fg-muted);font-size:.9rem;margin-bottom:var(--s4)}
.tier ul{display:flex;flex-direction:column;gap:var(--s2)}
.tier li{padding-left:1.6rem;position:relative;font-size:.93rem}
.tier li::before{content:"";position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--accent)}

/* FAQ */
.faq{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--s2)}
.faq details{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r);padding:0 var(--s4);box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:600;padding:var(--s4) 0;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:700;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--fg-muted);padding-bottom:var(--s4)}

/* CTA */
.cta{text-align:center}
.cta__card{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(2rem,5vw,3rem)}
.cta__card::before{display:none} /* glow radial scos */
.cta__card>*{position:relative;z-index:1}
.cta p{color:var(--fg-muted);max-width:42rem;margin:var(--s3) auto var(--s5)}
.waitlist{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;max-width:40rem;margin:0 auto}
.waitlist input{flex:1 1 14rem;padding:.85rem 1rem;border-radius:var(--r);border:1px solid var(--border-strong);
  background:var(--bg);color:var(--fg);font-size:1rem}
.waitlist input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.waitlist .btn{flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* =========================================================================
   FOOTER (redesign) — bandă recap/CTA + footer cu coloane și brand
   ========================================================================= */
.site-footer{position:relative;background:var(--bg-soft);border-top:1px solid var(--border)}

/* ETAJ 1: bandă recap/CTA finală */
.foot-cta{border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 5%,var(--bg-soft))}
.foot-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding-block:clamp(2.25rem,5vw,3.25rem)}
.foot-cta__copy{max-width:38rem}
.foot-cta__title{font-size:clamp(1.35rem,3vw,1.8rem);font-weight:800;letter-spacing:-.02em;color:var(--fg);line-height:1.2}
.foot-cta__text{color:var(--fg-muted);font-size:var(--fz-small);margin-top:var(--s2);max-width:34rem}
.foot-cta__action{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);flex:0 0 auto}
.foot-cta__btn{padding-inline:1.7rem}
.foot-cta__arrow{width:1.05rem;height:1.05rem;transition:transform var(--ease)}
.foot-cta__btn:hover .foot-cta__arrow{transform:translateX(3px)}
.foot-cta__note{color:var(--fg-muted);font-size:var(--fz-eyebrow)}

/* ETAJ 2: footer principal */
.foot-main{padding-block:clamp(2.75rem,6vw,var(--s8)) var(--s6)}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:var(--s6)}
.foot-brand .logo{font-size:1.18rem}
.foot-brand__tag{color:var(--fg-muted);font-size:var(--fz-small);max-width:24rem;margin-top:var(--s3);line-height:1.55}
.foot-brand__made{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--s4);color:var(--fg-muted);font-size:var(--fz-eyebrow);font-weight:600;letter-spacing:.04em}
.foot-flag{display:inline-flex;width:1.2rem;height:.8rem;border-radius:2px;overflow:hidden;border:1px solid var(--border)}
.foot-flag svg{width:100%;height:100%}
.foot-flag .ff-a{fill:color-mix(in srgb,var(--accent) 30%,var(--bg-elev))}
.foot-flag .ff-b{fill:var(--accent)}
.foot-flag .ff-c{fill:var(--accent-2)}
.foot-col__title{font-size:var(--fz-eyebrow);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-muted);font-weight:700;margin-bottom:var(--s3)}
.foot-col ul{display:flex;flex-direction:column;gap:var(--s2)}
.foot-col a{color:var(--fg);font-size:var(--fz-small);transition:color var(--ease)}
.foot-col a:hover{color:var(--accent)}
.foot-col span{color:var(--fg-muted);font-size:var(--fz-small)}
.foot-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--border);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.foot-bottom__legal{display:flex;flex-direction:column;gap:.35rem;max-width:48rem}
.foot-bottom__line{color:var(--fg-muted);font-size:var(--fz-eyebrow);line-height:1.55}
.foot-bottom__org{color:var(--fg);font-size:var(--fz-eyebrow);font-weight:600;letter-spacing:.01em}
.foot-bottom__meta{display:inline-flex;align-items:center;gap:var(--s4);flex:0 0 auto}
.foot-badge{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fz-eyebrow);font-weight:600;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:var(--r-pill);padding:.3rem .8rem;white-space:nowrap}
.foot-badge__dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:footPulse 2.4s ease-in-out infinite}
.foot-bottom__link{font-size:var(--fz-eyebrow);font-weight:600;color:var(--fg-muted);white-space:nowrap;transition:color var(--ease)}
.foot-bottom__link:hover{color:var(--accent)}
@keyframes footPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (max-width:840px){
  .foot-cta__inner{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .foot-cta__action{align-self:stretch}
  .foot-cta__btn{width:100%}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .foot-bottom__meta{flex-wrap:wrap;gap:var(--s3)}
}

/* =========================================================================
   PAGINI APP (login / mulțumim / panou)
   ========================================================================= */
.center{min-height:82vh;display:grid;place-items:center;padding:var(--s6);text-align:center}
.auth-card{width:min(92vw,25rem)}
.thanks__check{width:3.6rem;height:3.6rem;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--s4);
  background:var(--accent);color:var(--on-accent);font-size:1.8rem;font-weight:800}
.thanks h1{font-size:1.9rem;margin-bottom:var(--s2)}
.thanks p{color:var(--fg-muted);margin-bottom:var(--s5)}
.err{color:light-dark(#b4254a,#fda4af);background:color-mix(in srgb,#f43f5e 12%,transparent);
  border:1px solid color-mix(in srgb,#f43f5e 35%,transparent);border-radius:var(--r-sm);padding:.55rem .8rem;font-size:.9rem}
.form{display:flex;flex-direction:column;gap:var(--s4);text-align:left;margin-top:var(--s5)}
.form label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--fg-muted)}
.form input{padding:.7rem .8rem;border-radius:var(--r);border:1px solid var(--border-strong);background:var(--bg);color:var(--fg);font-size:1rem}
.form input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.form .btn{margin-top:var(--s2)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) var(--s5);border-bottom:1px solid var(--border)}
.muted{color:var(--fg-muted)}

/* ---- pagini legale ---- */
.legal__doc{max-width:46rem;margin:0 auto;padding-inline:clamp(1rem,4vw,2rem)}
.legal__back{display:inline-block;margin-bottom:1.5rem;color:var(--fg-muted);font-size:.9rem}
.legal__back:hover{color:var(--accent)}
.legal__doc h1{font-size:clamp(1.7rem,4.5vw,2.4rem);margin-bottom:1rem}
.legal__intro{color:var(--fg-muted);font-size:1.05rem;line-height:1.7;margin-bottom:2rem}
.legal__doc h2{font-size:1.2rem;color:var(--accent);margin:2.25rem 0 .6rem}
.legal__doc p{margin:.6rem 0;line-height:1.7}
.legal__doc ul{list-style:disc;margin:.5rem 0 .9rem;padding-left:1.4rem;display:flex;flex-direction:column;gap:.35rem}
.legal__doc li{line-height:1.6}

/* =========================================================================
   REDESIGN PREMIUM — hero split, mockup browser, comparație, fleet
   Tot CSS aici; SVG inline în markup. Fără atribute style (CSP strict).
   ========================================================================= */

/* ---- HERO: layout 2 coloane + fundal blueprint mascat ---- */
.hero{padding-block:clamp(4rem,10vw,8rem) clamp(3.5rem,7vw,5.5rem);position:relative;overflow:hidden}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(139, 92, 246, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.08) 0%, transparent 45%);
  z-index: 0;
  pointer-events: none;
}
.hero .container{max-width:var(--container);display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);text-align:left;position:relative;z-index:1}
.hero__copy{max-width:36rem}
.hero h1{font-size:var(--fz-display);margin-bottom:var(--s4);font-family:var(--font-headings);font-weight:900;letter-spacing:-.03em;line-height:1.08}
.hero .hero__badge{margin-bottom:var(--s4);box-shadow:0 2px 8px rgba(139, 92, 246, 0.08)}
.hero__lead{margin-inline:0}
.hero__cta{justify-content:flex-start}
/* grilă „blueprint” scoasă — hero ultra-curat pe alb (stil Cloudflare) */
.hero::after{display:none}
@media (max-width:840px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero__copy{max-width:46rem;margin-inline:auto}
  .hero__cta{justify-content:center}
  .hero .trust{justify-content:center}
}

/* trust pills (incluse la pachet) */
.trust{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.trust li{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:500;color:var(--fg-muted);
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-pill);padding:.35rem .8rem;
  transition:border-color var(--ease),transform .12s ease}
.trust li:hover{border-color:var(--accent);transform:translateY(-2px)}
.trust svg{width:1rem;height:1rem;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---- MOCKUP BROWSER (HTML+CSS, zero imagini) ---- */
.browser{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--bg-elev);border:1px solid var(--border);box-shadow:0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(139, 92, 246, 0.03);
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease)}
.browser:hover{transform:translateY(-2px);box-shadow:0 25px 50px rgba(0,0,0,0.15), 0 0 15px rgba(139, 92, 246, 0.08);border-color:var(--accent)}
.browser__tag{position:absolute;top:.8rem;right:.8rem;z-index:2;
  background:var(--accent);color:var(--on-accent);font-size:.66rem;font-weight:700;
  padding:.25rem .6rem;border-radius:var(--r-pill)}
.browser__bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--border);
  background:var(--bg-soft)}
.browser__dots{display:flex;gap:.4rem}
.browser__dots i{width:.7rem;height:.7rem;border-radius:50%;background:var(--border-strong);display:block}
.browser__dots i:nth-child(1){background:#ff5f57}
.browser__dots i:nth-child(2){background:#febc2e}
.browser__dots i:nth-child(3){background:#28c840}
.browser__url{flex:1;display:flex;align-items:center;gap:.4rem;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--r-pill);padding:.3rem .7rem;
  font-size:.74rem;color:var(--fg-muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__url svg{width:.8rem;height:.8rem;stroke:var(--accent);fill:none;stroke-width:1.8;flex:0 0 auto}
.browser__view{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  background:var(--bg-elev)}
.bw-nav{display:flex;align-items:center;gap:.6rem}
.bw-logo{width:1.4rem;height:1.4rem;border-radius:.4rem;background:var(--accent)}
.bw-bars{display:flex;gap:.5rem;margin-left:auto}
.bw-bars span{width:2.4rem;height:.5rem;border-radius:var(--r-pill);background:var(--border-strong)}
.bw-hero{display:flex;flex-direction:column;gap:.5rem;padding:var(--s3) 0}
.bw-hero .t1{width:78%;height:.95rem;border-radius:var(--r-pill);background:var(--accent)}
.bw-hero .t2{width:55%;height:.95rem;border-radius:var(--r-pill);background:color-mix(in srgb,var(--fg) 22%,transparent)}
.bw-hero .t3{width:64%;height:.55rem;border-radius:var(--r-pill);background:var(--border-strong)}
.bw-btn{width:6rem;height:1.6rem;border-radius:var(--r);background:var(--accent);margin-top:.3rem}
.bw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.bw-card{height:3.4rem;border-radius:var(--r);border:1px solid var(--border);background:var(--bg-soft)}
.bw-foot{height:1.4rem;border-radius:var(--r-sm);background:var(--bg-soft);border:1px solid var(--border)}
@media (max-width:840px){.browser{transform:none;max-width:30rem;margin-inline:auto}.browser:hover{transform:none}}

/* ---- RAIL CONECTOR ÎNTRE PAȘI ---- */
.steps-rail{position:relative}
.steps-rail::before{content:"";position:absolute;top:1.25rem;left:8%;right:8%;height:1px;z-index:0;
  background:var(--border)}
.steps-rail .step{position:relative;z-index:1;background:var(--bg-elev)}
@media (max-width:840px){.steps-rail::before{display:none}}

/* ---- CARD: hover discret, fără glow/bordură-gradient ---- */
.card--hover:hover .icon-box{box-shadow:none;transform:none}
.feature.card{position:relative}

/* ---- ICONIȚE bifă/X reutilizabile ---- */
.ic-yes,.ic-no{display:inline-flex;flex:0 0 auto}
.ic-yes{color:var(--accent)}.ic-no{color:var(--fg-muted);opacity:.7}
.ic-yes svg,.ic-no svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- COMPARAȚIE ONESTĂ ---- */
.compare{display:grid;grid-template-columns:.9fr 1fr 1fr;gap:0;max-width:60rem;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-elev)}
.compare__col--us{display:contents}
.compare__cell{padding:var(--s4);border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:.55rem;
  font-size:.9rem;line-height:1.5;color:var(--fg-muted)}
.compare__cell--label{font-weight:600;color:var(--fg)}
.compare__head{font-weight:700;font-size:.95rem;background:var(--bg-soft);color:var(--fg);align-items:center}
.compare .compare__col--us>.compare__cell,
.compare .compare__b{background:color-mix(in srgb,var(--accent) 6%,transparent);
  box-shadow:inset 1.5px 0 0 color-mix(in srgb,var(--accent) 45%,transparent),inset -1.5px 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.compare__col--us>.compare__head{background:var(--accent);color:var(--on-accent);box-shadow:none}
.compare__badge{display:inline-block;margin-left:.4rem;font-size:.62rem;font-weight:700;padding:.1rem .45rem;
  border-radius:var(--r-pill);background:color-mix(in srgb,#fff 25%,transparent);color:var(--on-accent)}
@media (max-width:680px){
  .compare{grid-template-columns:1fr;border-radius:var(--r);max-width:34rem}
  .compare__col--us{display:block}
  .compare .compare__col--us>.compare__cell{box-shadow:inset 4px 0 0 var(--accent)}
  .compare__cell--label{background:var(--bg-soft)}
}

/* ---- DIAGRAMĂ FLEET (puls pe linii, CSS-only) ---- */
.fleet{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.fleet__visual{display:grid;place-items:center}
.fleet__diagram{width:100%;max-width:30rem;height:auto;color:var(--accent)}
.fleet__diagram .wire{stroke:var(--border-strong);stroke-width:2;fill:none}
.fleet__diagram .flow{stroke:var(--accent);stroke-width:2.4;fill:none;
  stroke-dasharray:6 90;stroke-linecap:round;animation:fleetFlow 2.6s linear infinite}
.fleet__diagram .flow--2{animation-delay:.4s}
.fleet__diagram .flow--3{animation-delay:.8s}
.fleet__diagram .flow--4{animation-delay:1.2s}
.fleet__diagram .flow--5{animation-delay:1.6s}
.fleet__diagram .node{fill:var(--bg-elev);stroke:var(--border-strong);stroke-width:2}
.fleet__diagram .hub{fill:var(--bg-elev);stroke:var(--accent);stroke-width:2.5}
.fleet__diagram .hub-ico{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round}
.fleet__label{font-size:13px;font-weight:700;fill:currentColor}
.fleet__points{display:flex;flex-direction:column;gap:var(--s4)}
.fleet__point{display:flex;gap:var(--s3);align-items:flex-start}
.fleet__point h3{font-size:var(--fz-h3);margin-bottom:.15rem}
.fleet__point p{color:var(--fg-muted);font-size:var(--fz-small)}
.fleet__dot{flex:0 0 auto;width:1.5rem;height:1.5rem;margin-top:.15rem;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);position:relative}
.fleet__dot::after{content:"";position:absolute;inset:0;margin:auto;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
@keyframes fleetFlow{to{stroke-dashoffset:-96}}
@media (max-width:760px){.fleet{grid-template-columns:1fr}}

/* ---- STRIP „incluse la pachet” cu fade pe margini ---- */
.included{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;max-width:54rem;margin:0 auto}
.included__item{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:500;color:var(--fg);
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-pill);padding:.55rem 1rem;
  box-shadow:var(--shadow-sm);transition:border-color var(--ease),transform .12s ease}
.included__item:hover{border-color:var(--accent);transform:translateY(-2px)}

/* ---- PREȚURI: numere tabulare + check SVG ---- */
.tier__price{font-variant-numeric:tabular-nums}
.tier li.has-check{padding-left:1.75rem}
.tier li.has-check::before{content:none}
.tier__check{position:absolute;left:0;top:.1em;color:var(--accent);display:inline-flex}
.tier__check svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- FAQ open transition ---- */
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),var(--shadow-sm)}

/* ---- CTA card sobru + closing + footer hairline simplu ---- */
.cta__card{background:var(--bg-soft);border:1px solid var(--border);box-shadow:var(--shadow)}
.cta__closing{margin-top:var(--s5);font-weight:600;color:var(--fg);font-size:var(--fz-lead);max-width:42rem;margin-inline:auto}
.site-footer{position:relative}

/* ============================================================
   STIL CLOUDFLARE — flat, curat, alb/spațios, accent cu măsură
   (înlocuiește fostul bloc „MODERN & VIBRANT”). Hue-agnostic.
   ============================================================ */
/* hero: tipografie puternică, monocromă, pe alb curat (fundalul vine din --bg) */
.hero h1{letter-spacing:-.03em;line-height:1.08;font-weight:800;color:var(--fg)}
.hero__copy{max-width:40rem}

/* eyebrow: text mic uppercase în accent, FĂRĂ pastilă (vezi regula de bază) */

/* iconițe carduri: tile cu tentă slabă plată + stroke accent (fără gradient/glow) */
.icon-box{background:var(--bg-soft);color:var(--accent);border:1px solid var(--border)}
.icon-box svg{stroke:var(--accent)}

/* carduri: hover discret (lift -2px, bordură mai fermă, umbră blândă) */
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow);
  border-color:var(--border-strong)}

/* ritm de secțiuni prin bandă gri plată (NU gradient) */
#beneficii,#platforma,#preturi{background:var(--bg-soft)}

/* MOCKUP: panou neutru cu bordură (fără banner colorat) */
.bw-img{height:5.5rem;border-radius:var(--r);position:relative;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--border)}
.bw-pin{position:absolute;left:.7rem;bottom:.6rem;width:3.4rem;height:.85rem;border-radius:var(--r-pill);
  background:var(--border-strong)}

/* compare: coloana noastră — tentă FOARTE slabă de accent (cu măsură) */
.compare__col--us .compare__cell{background:color-mix(in srgb,var(--accent) 5%,var(--bg-elev))}

/* diagrama fleet: noduri neutre, conturate (fără umplere verde plină/glow) */
.fleet__diagram .node{fill:var(--bg-elev);stroke:var(--border-strong)}
.fleet__diagram .hub{fill:var(--bg-elev)}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }

/* =========================================================================
   HEADER „Beacon” — bară de anunț + nav rafinat (underline slide) + CTA săgeată
   ========================================================================= */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* bară de anunț pre-lansare (dismiss 100% CSS) */
.ann__toggle{position:absolute;left:-9999px}
.announce{position:relative;background:color-mix(in srgb,var(--accent) 10%,var(--bg));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));font-size:var(--fz-small);color:var(--fg)}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:.6rem;padding-block:.5rem;padding-right:2.4rem;text-align:center;flex-wrap:wrap}
.announce__pulse{flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);animation:annPulse 2.4s ease-out infinite}
.announce__txt{color:var(--fg-muted)}
.announce__txt strong{font-weight:700;color:var(--fg)}
.announce__link{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;color:var(--accent);white-space:nowrap}
.announce__link svg{width:1rem;height:1rem;transition:transform var(--ease)}
.announce__link:hover svg{transform:translateX(3px)}
.announce__close{position:absolute;top:50%;right:.6rem;transform:translateY(-50%);width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--fg-muted);cursor:pointer;transition:background var(--ease),color var(--ease)}
.announce__close:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg)}
.announce__close svg{width:1rem;height:1rem}
.ann__toggle:checked ~ .announce{display:none}
@keyframes annPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}70%{box-shadow:0 0 0 .5rem color-mix(in srgb,var(--accent) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}

/* header rafinat (contrast 88%) + plutire blândă */
.site-header{background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:var(--shadow-sm)}

/* nav links: underline care crește din centru la hover/focus */
.nav__links a{position:relative;color:var(--fg-muted);font-weight:500;font-size:.95rem;padding-block:.15rem;transition:color var(--ease)}
.nav__links a .nav__txt{position:relative;display:inline-block}
.nav__links a .nav__txt::after{content:"";position:absolute;left:0;right:0;bottom:-.4rem;height:2px;border-radius:var(--r-pill);background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform var(--ease)}
.nav__links a:hover{color:var(--fg)}
.nav__links a:hover .nav__txt::after,.nav__links a:focus-visible .nav__txt::after{transform:scaleX(1)}

/* CTA proeminent: săgeată care alunecă */
.nav__cta{gap:.4rem}
.nav__cta-arrow{width:1rem;height:1rem;flex:0 0 auto;transition:transform var(--ease)}
.nav__cta:hover .nav__cta-arrow{transform:translateX(2px)}
.nav__login{color:var(--fg-muted);font-weight:600;font-size:.95rem;white-space:nowrap}
.nav__login:hover{color:var(--fg)}
.nav-burger{transition:border-color var(--ease),background var(--ease)}
.nav-burger:hover{border-color:var(--accent)}

/* ancore sub headerul sticky (fix UX) */
section[id]{scroll-margin-top:5rem}

/* meniu mobil: slide+fade prin tranziție CSS */
@media (max-width:840px){
  .nav__panel{display:flex;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transform:translateY(-.5rem);transition:max-height .26s ease,opacity var(--ease),transform var(--ease)}
  .nav.nav-open .nav__panel{max-height:34rem;opacity:1;pointer-events:auto;transform:translateY(0)}
  .nav__links a .nav__txt::after{display:none}
  .announce__more{display:none}
  .theme-toggle,.nav-burger{width:2.75rem;height:2.75rem}
}

/* =========================================================================
   CONȚINUT NOU — value-stack, bloc aspiranți, mini-secțiuni, CTA inline, micro
   ========================================================================= */
.value-card h3{font-size:var(--fz-h3);margin-bottom:var(--s2)}
.value-card p{color:var(--fg-muted);font-size:var(--fz-small)}

/* bloc aspiranți #oricine: fundal verde foarte spălăcit (mesaj distinct) */
.aspiring{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.aspiring__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.aspiring__copy{max-width:34rem}
.aspiring__copy .eyebrow{margin-bottom:var(--s3)}
.aspiring__copy .h2{margin-bottom:var(--s4)}
.aspiring__body{margin:0;max-width:none}
.aspiring__list{display:flex;flex-wrap:wrap;gap:var(--s2);align-content:flex-start}
@media (max-width:840px){.aspiring__inner{grid-template-columns:1fr;text-align:left}.aspiring__list{justify-content:flex-start}}

/* mini-secțiuni (#dealul, #reali = bullets; #frici = cards) */
.mini-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s4);max-width:60rem;margin:0 auto}
.mini-list__item{display:flex;gap:var(--s3);align-items:flex-start}
.mini-list__item h3{font-size:var(--fz-h3);margin-bottom:.15rem}
.mini-list__item p{color:var(--fg-muted);font-size:var(--fz-small)}
.mini-list .ic-yes{margin-top:.15rem}
.mini-cards{max-width:60rem;margin:0 auto}
.mini-card h3{font-size:var(--fz-h3);margin-bottom:var(--s2);color:var(--accent)}
.mini-card p{color:var(--fg-muted);font-size:var(--fz-small)}

/* CTA inline (mijloc de pagină) + micro-copie waitlist */
.cta-inline{display:flex;justify-content:center;margin-top:var(--s6)}
.cta__micro{margin-top:var(--s3);color:var(--fg-muted);font-size:var(--fz-small)}

/* ritm benzi gri — alternanță curată cu noile secțiuni */
#comparatie,#reali,#mutare{background:var(--bg-soft)}

/* contrast placeholder pe inputuri (WCAG 1.4.3) */
::placeholder{color:var(--fg-muted);opacity:1}

/* =========================================================================
   SITE CLIENT (servit la <slug>.webtelekom.ro) — one-pager generat din profil
   ========================================================================= */
.cs-body{background:var(--bg);color:var(--fg)}
.cs-wrap{max-width:48rem;margin:0 auto;padding-inline:clamp(1rem,5vw,2rem)}
.cs-hero{padding-block:clamp(3rem,8vw,5.5rem) clamp(2rem,5vw,3rem);text-align:center;
  border-bottom:1px solid var(--border);background:var(--bg-soft)}
.cs-title{font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:-.02em;margin-top:var(--s2)}
.cs-lead{color:var(--fg-muted);font-size:var(--fz-lead);max-width:40rem;margin:var(--s4) auto 0}
.cs-cta{margin-top:var(--s5)}
.cs-main{padding-block:clamp(2rem,5vw,3.5rem);display:flex;flex-direction:column;gap:clamp(2rem,5vw,3rem)}
.cs-sec h2{margin-bottom:var(--s4)}
.cs-text{color:var(--fg-muted);white-space:pre-line}
.cs-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s3)}
.cs-service{display:flex;align-items:center;gap:.6rem;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--r);padding:.75rem 1rem;box-shadow:var(--shadow-sm)}
.cs-check{flex:0 0 auto;color:var(--accent);display:inline-flex}
.cs-check svg{width:1.15rem;height:1.15rem}
.cs-contact{display:flex;flex-direction:column;gap:var(--s3)}
.cs-contact li{display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap}
.cs-ck{min-width:5rem;color:var(--fg-muted);font-size:var(--fz-small);font-weight:600}
.cs-foot{border-top:1px solid var(--border);background:var(--bg-soft);padding-block:var(--s6);text-align:center}
.cs-foot__tag{font-weight:700}
.cs-foot__by{color:var(--fg-muted);font-size:var(--fz-small);margin-top:var(--s2)}
.cs-404{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--s4)}

/* ---- TEME de culoare alese de AI (clase, CSP-safe; recolorează tot site-ul) ---- */
.theme-verde{--accent:#12863c;--accent-2:#16a34a;--accent-ink:#ffffff}
.theme-albastru{--accent:#2563eb;--accent-2:#3b82f6;--accent-ink:#ffffff}
.theme-mov{--accent:#7c3aed;--accent-2:#8b5cf6;--accent-ink:#ffffff}
.theme-portocaliu{--accent:#ea580c;--accent-2:#f97316;--accent-ink:#ffffff}
.theme-roz{--accent:#db2777;--accent-2:#ec4899;--accent-ink:#ffffff}
.theme-turcoaz{--accent:#0d9488;--accent-2:#14b8a6;--accent-ink:#ffffff}
/* ---- LAYOUT „bold”: hero pe fundal accent ---- */
.cs-layout-bold .cs-hero{background:var(--accent);border-bottom-color:transparent}
.cs-layout-bold .cs-hero .eyebrow{color:var(--accent-ink);opacity:.9}
.cs-layout-bold .cs-hero .cs-title{color:var(--accent-ink)}
.cs-layout-bold .cs-hero .cs-lead{color:var(--accent-ink);opacity:.95}
.cs-layout-bold .cs-hero .btn--primary{background:var(--accent-ink);color:var(--accent)}
.cs-layout-bold .cs-hero .btn--primary:hover{filter:brightness(.95)}

/* ---- blocuri site client (compoziție liberă) ---- */
.cs-block{padding-block:clamp(2rem,5vw,3.5rem)}
.cs-block .h2{margin-bottom:var(--s4)}
.cs-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s4);align-items:stretch}
.cs-plan{display:flex;flex-direction:column;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
.cs-plan--hot{border:2px solid var(--accent)}
.cs-plan__name{font-size:var(--fz-h3);margin-bottom:var(--s2)}
.cs-plan__price{font-size:1.6rem;font-weight:800;color:var(--accent);margin-bottom:var(--s3)}
.cs-plan__per{font-size:.85rem;font-weight:500;color:var(--fg-muted)}
.cs-plan__features{display:flex;flex-direction:column;gap:var(--s2)}
.cs-plan__features li{padding-left:1.2rem;position:relative;font-size:.93rem;color:var(--fg-muted)}
.cs-plan__features li::before{content:"";position:absolute;left:0;top:.55em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.cs-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--s4)}
.cs-quote{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-sm);margin:0}
.cs-quote blockquote{margin:0 0 var(--s3);font-size:1.05rem;line-height:1.6}
.cs-quote figcaption{color:var(--fg-muted);font-size:var(--fz-small);font-weight:600}
.cs-faq{max-width:46rem;display:flex;flex-direction:column;gap:var(--s2)}
.cs-faq details{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r);padding:0 var(--s4);box-shadow:var(--shadow-sm)}
.cs-faq summary{cursor:pointer;font-weight:600;padding:var(--s4) 0;list-style:none}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq details p{color:var(--fg-muted);padding-bottom:var(--s4)}
.cs-hours{display:flex;flex-direction:column;gap:var(--s2);max-width:30rem}
.cs-hours li{display:flex;justify-content:space-between;gap:var(--s4);padding:.5rem 0;border-bottom:1px solid var(--border);color:var(--fg-muted)}
.cs-cta-banner{background:color-mix(in srgb,var(--accent) 8%,var(--bg-soft));border-block:1px solid var(--border)}
.cs-cta-banner .cs-wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.cs-cta-banner__text{font-size:var(--fz-lead);font-weight:600}
.cs-contact-sec{background:var(--bg-soft);border-top:1px solid var(--border)}

/* =========================================================================
   ILUSTRAȚII SVG inline — clase globale (mapate pe tokens, light/dark OK)
   Folosite în SVG-urile decorative din secțiunile #instant și #mutare.
   ========================================================================= */
.il-paper{fill:var(--bg-elev)}
.il-soft{fill:var(--bg-soft)}
.il-ink{fill:var(--fg)}
.il-muted{fill:var(--fg-muted)}
.il-accent{fill:var(--accent)}
.il-accent2{fill:var(--accent-2)}
.il-accent-soft{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.il-on-accent{fill:var(--on-accent)}
.il-line{stroke:var(--border-strong);fill:none}
.il-hair{stroke:var(--border);fill:none}
.il-accent-line{stroke:var(--accent);fill:none}
/* fix: var() NU se aplică în atribute de prezentare SVG (stroke="var(--x)" e inert în browsere).
   Atributele de prezentare au prioritate minimă în cascadă → le suprascriem prin CSS, unde var() funcționează.
   Limitat la cele două ilustrații, ca să nu atingă alt markup. */
.instant-svg [stroke="var(--border)"],.mutare-svg [stroke="var(--border)"]{stroke:var(--border)}
.instant-svg [stroke="var(--border-strong)"],.mutare-svg [stroke="var(--border-strong)"]{stroke:var(--border-strong)}
.instant-svg [stroke="var(--accent)"],.mutare-svg [stroke="var(--accent)"]{stroke:var(--accent)}
.instant-svg [stroke="var(--on-accent)"],.mutare-svg [stroke="var(--on-accent)"]{stroke:var(--on-accent)}
.instant-svg [fill="var(--accent)"],.mutare-svg [fill="var(--accent)"]{fill:var(--accent)}
.instant-svg [fill="var(--fg-muted)"],.mutare-svg [fill="var(--fg-muted)"]{fill:var(--fg-muted)}
.instant-svg [fill="var(--on-accent)"],.mutare-svg [fill="var(--on-accent)"]{fill:var(--on-accent)}

/* =========================================================================
   SECȚIUNEA #instant — „Creezi orice, instant"
   Layout: ilustrație stânga / copy dreapta (se inversează pe mobil)
   ========================================================================= */
.instant-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.instant-visual{display:grid;place-items:center}
.instant-svg{width:100%;max-width:26rem;height:auto}
.instant-copy .eyebrow{display:block;margin-bottom:var(--s3)}
.instant-copy .h2{margin-bottom:var(--s4)}
.instant-copy .sub{margin:0 0 var(--s5);text-align:left}
.instant-points{display:flex;flex-direction:column;gap:var(--s4);margin:0 0 var(--s6);padding:0;list-style:none}
.instant-point{display:flex;gap:var(--s3);align-items:flex-start}
.instant-point__ico{flex:0 0 auto;width:2rem;height:2rem;border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  display:grid;place-items:center;color:var(--accent);margin-top:.1rem}
.instant-point__ico svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.instant-point h3{font-size:var(--fz-h3);margin-bottom:.1rem}
.instant-point p{color:var(--fg-muted);font-size:var(--fz-small)}
@media(max-width:700px){
  .instant-wrap{grid-template-columns:1fr}
  .instant-visual{order:-1}
  .instant-svg{max-width:20rem}
}

/* =========================================================================
   SECȚIUNEA #mutare — „Ai deja un site? Ți-l mutăm noi"
   Layout: copy stânga / ilustrație dreapta + pași verticali + FAQ mini
   ========================================================================= */
.mutare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start;margin-bottom:var(--s8)}
.mutare-visual{display:grid;place-items:center}
.mutare-svg{width:100%;max-width:26rem;height:auto}
.mutare-copy .eyebrow{display:block;margin-bottom:var(--s3)}
.mutare-copy .h2{margin-bottom:var(--s4)}
.mutare-copy .sub{margin:0 0 var(--s6);text-align:left}
/* pași de migrare */
.mig-steps{display:flex;flex-direction:column;gap:0;max-width:50rem;margin:0 auto var(--s8)}
.mig-step{display:flex;gap:var(--s4);position:relative;padding-bottom:var(--s6)}
.mig-step:last-child{padding-bottom:0}
.mig-step::before{content:"";position:absolute;left:1.25rem;top:2.6rem;bottom:0;width:2px;
  background:var(--border);border-radius:1px}
.mig-step:last-child::before{display:none}
.mig-step__num{flex:0 0 2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);
  color:var(--on-accent);font-weight:800;font-size:.95rem;display:grid;place-items:center;
  position:relative;z-index:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.mig-step__body{padding-top:.35rem}
.mig-step__body h3{font-size:var(--fz-h3);margin-bottom:.25rem}
.mig-step__body p{color:var(--fg-muted);font-size:var(--fz-small)}
/* FAQ migrare mic */
.mutare-faq{max-width:54rem;margin:0 auto}
.mutare-faq__title{text-align:center;font-size:var(--fz-h3);font-weight:700;margin-bottom:var(--s4);color:var(--fg-muted);text-transform:uppercase;font-size:var(--fz-eyebrow);letter-spacing:.08em}
.mutare-faq .faq{max-width:none}
@media(max-width:700px){
  .mutare-wrap{grid-template-columns:1fr}
  .mutare-visual{order:-1}
  .mutare-svg{max-width:20rem}
}