/* ============================================================
   CLUBUL FINANCIAR — UPGRADE.CSS v2 (BOLD / PREMIUM)
   Se incarca DUPA style.css. Inlocuieste complet upgrade.css.
   Pastreaza TOTI tokenii + TOATE clasele existente; doar le ridica
   dramatic si adauga componente noi optionale.
   ============================================================ */

/* @import TREBUIE sa fie prima regula din fisier (spec CSS).
   Fallback: daca <link> Sora nu e adaugat in HTML, fontul vine de aici. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

/* ============================================================
   1. TOKENI NOI (extind, nu inlocuiesc cei din style.css)
   ============================================================ */
:root{
  /* Font expresiv pentru titluri (geometric, modern, premium) */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scala tipografica fluida */
  --display-hero:    clamp(2.6rem, 1.8rem + 4.4vw, 5.0rem);
  --display-section: clamp(1.9rem, 1.3rem + 3vw, 3.2rem);
  --display-band:    clamp(2.0rem, 1.4rem + 3.4vw, 3.8rem);

  /* Accente / suprafete cu personalitate */
  --emerald-vivid: #0dcc8a;
  --navy-deep:    #081728;
  --navy-mid:     #0d2138;
  --navy-surface: #122c49;

  /* Gradienti semnatura */
  --grad-warm:    linear-gradient(135deg, var(--emerald), var(--gold));
  --grad-cool:    linear-gradient(135deg, var(--emerald), var(--blue));
  --grad-tri:     linear-gradient(120deg, var(--emerald) 0%, var(--blue) 55%, var(--gold) 120%);

  /* Umbre ridicate */
  --shadow-soft:  0 6px 22px rgba(15,37,64,.07);
  --shadow-pop:   0 26px 70px rgba(15,37,64,.18);
  --ring-emerald: 0 0 0 1px rgba(16,185,129,.18);

  /* Raze + tranzitii */
  --radius-xl: 28px;
  --ease: cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --shadow-soft: 0 6px 22px rgba(0,0,0,.4);
  --shadow-pop:  0 30px 80px rgba(0,0,0,.6);
  --ring-emerald: 0 0 0 1px rgba(13,204,138,.28);
}

/* ============================================================
   2. TIPOGRAFIE INDRAZNEATA
   ============================================================ */
body{ font-family: var(--font-body); font-weight: 450; }

h1, h2, h3, .title{ font-family: var(--font-display); }

h1, h2, h3{ letter-spacing: -.03em; line-height: 1.08; }

.hero h1{
  font-family: var(--font-display);
  font-size: var(--display-hero);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
}
h1{
  font-size: clamp(2.1rem, 1.5rem + 3.4vw, 3.8rem);
  font-weight: 800;
}
h2.title{
  font-family: var(--font-display);
  font-size: var(--display-section);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 12px 0 16px;
}
h3{ font-size: clamp(1.08rem,.96rem + .7vw, 1.34rem); font-weight: 700; }

/* eyebrow cu linie decorativa */
.eyebrow{
  font-family: var(--font-body);
  color: var(--emerald);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:''; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; flex-shrink: 0;
}
.center .eyebrow::before{ display:none; }

.lead{
  font-size: clamp(1.06rem, 1rem + .45vw, 1.24rem);
  line-height: 1.72;
  font-weight: 450;
}

/* grad-text mai bogat (tri-color) + fallback culoare */
.grad-text{
  background: var(--grad-tri);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* brand-logo .name optional (defensiv) */
.brand-logo .name{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }

/* numere = vedete vizuale */
.stat .num, .price .amt, .result-big{
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

/* ============================================================
   3. HERO — GRADIENT MESH SPECTACULOS + ORB + GRAIN
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 960px 640px at 82% -10%, rgba(37,99,235,.28),  transparent 52%),
    radial-gradient(ellipse 760px 540px at 2%  18%,  rgba(16,185,129,.24), transparent 50%),
    radial-gradient(ellipse 560px 420px at 52% 112%, rgba(232,194,104,.16),transparent 58%),
    radial-gradient(ellipse 420px 300px at 96% 88%,  rgba(16,185,129,.12), transparent 60%),
    var(--bg);
}
/* orb rotativ — plasma subtila in spate */
.hero::after{
  content:''; position:absolute; inset:-45%; z-index:0; pointer-events:none;
  border-radius:50%;
  background: conic-gradient(from 0deg at 64% 36%,
    rgba(16,185,129,.16) 0deg, rgba(37,99,235,.22) 90deg,
    rgba(232,194,104,.12) 160deg, transparent 215deg,
    rgba(37,99,235,.12) 295deg, rgba(16,185,129,.12) 360deg);
  animation: cf-orb 26s linear infinite;
  will-change: transform;
}
@keyframes cf-orb{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
/* grain premium */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero > *{ position: relative; z-index: 1; }

[data-theme="dark"] .hero{
  background:
    radial-gradient(ellipse 960px 640px at 82% -10%, rgba(37,99,235,.42),  transparent 52%),
    radial-gradient(ellipse 760px 540px at 2%  18%,  rgba(16,185,129,.34), transparent 50%),
    radial-gradient(ellipse 560px 420px at 52% 112%, rgba(232,194,104,.20),transparent 58%),
    radial-gradient(ellipse 420px 300px at 96% 88%,  rgba(16,185,129,.20), transparent 60%),
    var(--bg);
}
[data-theme="dark"] .hero::before{ opacity:.4; }

.hero .lead{ margin: 20px 0 30px; }
.hero-trust{ margin-top: 28px; font-weight: 700; }
.hero-trust span{ display:flex; align-items:center; gap:7px; }

/* ============================================================
   4. GLASSCARD — sticla reala + halo + flotare
   ============================================================ */
.glasscard{
  position: relative;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: saturate(190%) blur(18px);
  -webkit-backdrop-filter: saturate(190%) blur(18px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-emerald), var(--shadow-pop), inset 0 1px 0 rgba(255,255,255,.6);
  animation: cf-float 6s ease-in-out infinite;
  will-change: transform;
}
.glasscard::before{
  content:''; position:absolute; inset:-3px -3px -26px -3px; z-index:-1;
  border-radius: inherit;
  background: linear-gradient(148deg, rgba(16,185,129,.34), rgba(37,99,235,.28));
  filter: blur(30px); opacity:.65; transition: opacity .45s var(--ease);
  pointer-events: none;
}
.glasscard:hover::before{ opacity:1; }
@keyframes cf-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@media(prefers-reduced-motion: reduce){
  .glasscard, .hero::after{ animation: none; }
}
[data-theme="dark"] .glasscard{
  background: color-mix(in srgb, var(--card) 76%, transparent);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .glasscard::before{
  background: linear-gradient(148deg, rgba(13,204,138,.44), rgba(37,99,235,.38)); opacity:.5;
}

/* chart staggered + bara 6 aurie (payoff) */
.chart .bar{ background: var(--grad-cool); border-radius: 9px 9px 0 0; transition: filter .2s; }
.chart .bar:nth-child(1){ animation: grow .65s 0s var(--ease) both; }
.chart .bar:nth-child(2){ animation: grow .65s .09s var(--ease) both; }
.chart .bar:nth-child(3){ animation: grow .65s .18s var(--ease) both; }
.chart .bar:nth-child(4){ animation: grow .65s .27s var(--ease) both; }
.chart .bar:nth-child(5){ animation: grow .65s .36s var(--ease) both; }
.chart .bar:nth-child(6){
  animation: grow .65s .48s var(--ease) both;
  background: linear-gradient(to top, var(--emerald), var(--gold));
  box-shadow: 0 0 22px rgba(232,194,104,.6);
}
.glasscard:hover .chart .bar{ filter: saturate(1.15); }

/* ============================================================
   5. NAVBAR — premium glass + stripe gradient
   ============================================================ */
.nav{
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.nav::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--grad-tri); opacity:.7;
}
.brand-logo .dot{ box-shadow: 0 6px 16px rgba(16,185,129,.4); }
.nav-links a{ position: relative; }
.nav-links a::after{
  content:''; position:absolute; left:11px; right:11px; bottom:4px; height:2px;
  background: var(--grad-cool); border-radius:2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav-links a:hover::after{ transform: scaleX(1); }

/* ============================================================
   6. BUTOANE — mai indraznete + shine sweep
   ============================================================ */
.btn{
  font-family: var(--font-body);
  font-weight: 800;
  border-radius: 14px;
  padding: 14px 26px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
  position: relative; overflow: hidden;
}
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px); }
.btn-primary{
  background: var(--grad-cool);
  box-shadow: 0 10px 28px rgba(16,185,129,.4);
}
.btn-primary:hover{ box-shadow: 0 16px 40px rgba(16,185,129,.5); }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease);
}
.btn-primary:hover::after{ left:140%; }
.btn-ghost{ border-color: var(--border); font-weight: 700; }
.btn-ghost:hover{ border-color: var(--emerald); color: var(--emerald); background: color-mix(in srgb,var(--emerald) 7%, transparent); }

/* ============================================================
   7. STATS — accent gradient + ridicare
   ============================================================ */
.stat{
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.stat:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb,var(--emerald) 40%, var(--border)); }
.stat .num{
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem);
  font-weight: 800; line-height: .95;
  background: var(--grad-tri);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat .lbl{ font-weight: 600; }

/* ============================================================
   8. CARDURI — bold hover + bara de accent sus
   ============================================================ */
.card{
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  position: relative; overflow: hidden;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-cool); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-pop); border-color: color-mix(in srgb,var(--emerald) 45%, var(--border)); }
.card:hover::before{ transform: scaleX(1); }
.card .ic{
  width: 50px; height: 50px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(37,99,235,.18));
  font-size: 1.4rem; box-shadow: inset 0 0 0 1px rgba(16,185,129,.18);
}
.card:hover .ic{ background: var(--grad-cool); color:#fff; }
.card .more{ font-weight: 800; }
.card .more::after{ content:' →'; transition: margin .2s var(--ease); }
.card:hover .more::after{ margin-left: 4px; }

/* ============================================================
   9. LEVELS / PRICING / BAND
   ============================================================ */
.level{ border-radius: var(--radius); box-shadow: var(--shadow-soft); transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.level:hover{ transform: translateY(-4px); border-color: var(--emerald); box-shadow: var(--shadow-pop); }
.level .n{ background: var(--grad-cool); box-shadow: 0 8px 20px rgba(16,185,129,.32); font-family: var(--font-display); }

.price{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s; }
.price:hover{ transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.price.feat{
  border-color: var(--emerald);
  box-shadow: var(--ring-emerald), 0 26px 60px rgba(16,185,129,.28);
  transform: scale(1.02);
}
.price.feat:hover{ transform: scale(1.02) translateY(-5px); }
.price .amt{ font-size: clamp(2.1rem,1.7rem + 1.6vw, 3rem); font-weight: 800; }
.price li::before{ font-weight: 900; }

.band{
  background: var(--grad-tri);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  position: relative; overflow: hidden;
}
.band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(600px 300px at 80% -20%, rgba(255,255,255,.22), transparent 60%);
}
.band > *{ position: relative; z-index:1; }
.band h2{
  font-family: var(--font-display);
  font-size: var(--display-band);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
}

/* ============================================================
   10. PILL / BADGE + PILL nou
   ============================================================ */
.pill{
  background: color-mix(in srgb, var(--emerald) 12%, var(--card));
  color: var(--emerald-d);
  border: 1px solid color-mix(in srgb, var(--emerald) 30%, var(--border));
  font-weight: 800; border-radius: 999px;
}
[data-theme="dark"] .pill{ color: var(--emerald); }

/* componenta noua optionala: .badge (daca nu e definita altundeva) */
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--border); background: var(--bg-soft);
}

/* ============================================================
   11. ARTICOL — lizibilitate premium
   ============================================================ */
.article h1{ font-family: var(--font-body); font-weight: 800; letter-spacing: -.025em; }
.article h2{ font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.article p, .article li{ font-size: 1.06rem; line-height: 1.85; }
.article .disc{ border-left: 4px solid var(--gold); border-radius: 10px; }

/* ============================================================
   12. CALCULATOR
   ============================================================ */
.calc .panel{ border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.field input, .field select{ border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus{
  outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 22%, transparent);
}
.result-big{
  font-size: clamp(2.3rem,1.8rem + 2.6vw, 3.4rem); font-weight: 800;
  background: var(--grad-tri);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============================================================
   13. COMPONENTE NOI OPTIONALE
   ============================================================ */

/* --- .timeline (vertical, cu nod gradient) --- */
.timeline{ position: relative; display: grid; gap: 18px; }
.timeline::before{
  content:''; position:absolute; left:21px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(var(--emerald), var(--blue), var(--gold)); opacity:.35;
}
.tl-item{
  position: relative; display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-soft);
  transition: transform .18s var(--ease), border-color .18s, box-shadow .18s;
}
.tl-item:hover{ transform: translateX(4px); border-color: var(--emerald); box-shadow: var(--shadow-pop); }
.tl-node{
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px;
  background: var(--grad-cool); color:#fff; font-family: var(--font-display);
  font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(16,185,129,.32); position: relative; z-index:1;
}
.tl-title{ margin: 4px 0 4px; }
.tl-desc{ color: var(--muted); font-size: .95rem; }
.tl-link{ color: var(--emerald); font-weight: 800; font-size: .9rem; }

/* --- .testimonial --- */
.testimonial{
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-soft);
  position: relative;
}
.testimonial::before{
  content:'\201C'; position:absolute; top:6px; left:18px;
  font-family: var(--font-display); font-size: 4rem; line-height:1;
  color: var(--emerald); opacity:.18;
}
.testimonial p{ font-size: 1.06rem; line-height: 1.7; position: relative; z-index:1; }
.testimonial .who{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.testimonial .who img,
.testimonial .who .avatar{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  background: var(--grad-cool); display:grid; place-items:center; color:#fff; font-weight:800;
}
.testimonial .who b{ display:block; font-weight:800; }
.testimonial .who span{ color: var(--muted); font-size:.86rem; }

/* --- .logo-strip / trust-strip (marquee orizontal) --- */
.logo-strip{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-strip .track{ display:flex; gap: 40px; width: max-content; animation: cf-marquee 30s linear infinite; }
.logo-strip:hover .track{ animation-play-state: paused; }
@keyframes cf-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.logo-strip .item{ color: var(--muted); font-weight: 700; display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* --- sectiuni dark cu personalitate (optional, via .section--dark) --- */
.section--dark, .section--navy{
  background: var(--navy-deep); color: #e8eefb; position: relative;
}
.section--dark .num, .section--navy .num{
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section--dark .stat, .section--navy .card{
  background: var(--navy-surface); border-color: rgba(255,255,255,.08);
}
.section--dark .lbl, .section--navy p{ color: #93a7c4; }

/* ============================================================
   14. REVEAL on scroll (pastrat + curba)
   ============================================================ */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  .nav-links a::after, .card::before, .btn-primary::after, .logo-strip .track{ animation:none; transition:none; }
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media(max-width: 600px){
  .hero h1{ font-size: clamp(2.3rem, 9vw, 3.1rem); letter-spacing: -.03em; }
  .band h2{ font-size: clamp(1.9rem, 7vw, 2.8rem); }
  h2.title{ font-size: clamp(1.7rem, 6.5vw, 2.3rem); }
  .eyebrow::before{ width: 18px; }
  .price.feat{ transform: none; }
}

/* ============================================================
   16. FEATURES NOI: căutare, cuprins, progres, share, glosar
   ============================================================ */
/* --- bară progres citire --- */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--emerald),var(--blue));box-shadow:0 0 8px rgba(16,185,129,.5);transition:width .1s linear}

/* --- căutare (overlay + modal) --- */
.search-ov{position:fixed;inset:0;z-index:1300;background:rgba(8,16,30,.55);backdrop-filter:blur(5px);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 18px 18px}
.search-ov[hidden]{display:none}
.search-box{width:100%;max-width:620px;background:var(--card);border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;animation:searchIn .18s ease}
@keyframes searchIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.search-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.search-in span{font-size:1.1rem;opacity:.7}
.search-in input{flex:1;border:none;background:transparent;color:var(--text);font-size:1.08rem;outline:none;font-family:inherit}
.search-in button{border:none;background:var(--bg-soft);color:var(--muted);width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:.9rem}
.search-res{max-height:58vh;overflow-y:auto;padding:8px}
.search-hint{color:var(--muted);padding:22px 16px;text-align:center;font-size:.95rem}
.search-item{display:block;padding:12px 14px;border-radius:12px;transition:background .12s}
.search-item:hover{background:var(--bg-soft)}
.search-item div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-item strong{font-size:.98rem;color:var(--text)}
.search-item p{color:var(--muted);font-size:.86rem;margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-badge{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--emerald-d);
  background:var(--bg-soft2);border:1px solid var(--border);border-radius:999px;padding:2px 9px}

/* --- cuprins articol --- */
.toc{background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--emerald);
  border-radius:12px;padding:16px 20px;margin:20px 0 26px}
.toc-h{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.toc ul{list-style:none;padding:0;margin:0}
.toc li{margin:5px 0}
.toc li.toc-sub{margin-left:16px}
.toc li.toc-sub a{font-size:.92rem;color:var(--muted)}
.toc a{color:var(--text);font-weight:600;font-size:.97rem;border:none}
.toc a:hover{color:var(--emerald)}

/* --- acțiuni articol: marcare citit + share --- */
.art-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:34px 0 6px;padding:16px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.read-btn{background:var(--bg-soft);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:.9rem;
  padding:10px 18px;border-radius:11px;cursor:pointer;transition:.15s;font-family:inherit}
.read-btn:hover{border-color:var(--emerald);color:var(--emerald)}
.read-btn.done{background:color-mix(in srgb,var(--emerald) 16%,transparent);border-color:var(--emerald);color:var(--emerald-d)}
.share-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.share-row span{color:var(--muted);font-size:.86rem}
.share-row a,.share-row button{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--card);
  color:var(--text);display:grid;place-items:center;font-weight:800;cursor:pointer;font-size:.95rem;transition:.15s;text-decoration:none}
.share-row a:hover,.share-row button:hover{border-color:var(--emerald);color:var(--emerald);transform:translateY(-2px)}

/* --- articole conexe --- */
.related{margin-top:40px;padding-top:26px;border-top:1px solid var(--border)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.related-grid .card{padding:18px}
.related-grid h3{font-size:1rem;margin-bottom:6px}
.related-grid p{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){.related-grid{grid-template-columns:1fr}}

/* --- bifă „citit" pe carduri --- */
.read-tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--emerald);
  color:#fff;font-size:.66rem;font-weight:900;margin-left:7px;vertical-align:middle}

/* --- glosar --- */
.glos-alpha{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:22px 0 8px}
.glos-alpha button{min-width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card);
  color:var(--text);font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.glos-alpha button:hover:not(:disabled){border-color:var(--emerald);color:var(--emerald)}
.glos-alpha button.active{background:var(--grad);color:#fff;border-color:transparent}
.glos-alpha button:disabled{opacity:.3;cursor:default}
.glos-search{max-width:520px;margin:14px auto 0}
.glos-search input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-size:1rem;font-family:inherit}
.glos-list{max-width:820px;margin:26px auto 0;display:flex;flex-direction:column;gap:12px}
.glos-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow);scroll-margin-top:80px}
.glos-card h3{font-size:1.08rem;margin-bottom:5px;color:var(--text)}
.glos-card p{color:var(--muted);font-size:.96rem;line-height:1.6}
.glos-letter{font-size:1.5rem;font-weight:900;color:var(--emerald);margin:26px 0 2px;padding-left:4px}

/* --- căutare în hero (homepage) --- */
.hero-search{display:flex;align-items:center;gap:10px;width:100%;max-width:440px;margin-top:18px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px 16px;cursor:pointer;
  box-shadow:var(--shadow);transition:.16s;font-family:inherit;text-align:left}
.hero-search:hover{border-color:var(--emerald);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.hero-search .hs-txt{color:var(--muted);font-size:.98rem;flex:1}
.hero-search .hs-key{border:1px solid var(--border);border-radius:7px;padding:2px 9px;color:var(--muted);font-size:.82rem;font-weight:700}
@media(max-width:880px){.hero-search{max-width:100%}.hero-search .hs-key{display:none}}

/* ============================================================
   17. 3D: scenă hero (WebGL) + tilt carduri
   ============================================================ */
#hero3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 30%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 30%,#000 55%)}
#hero3d canvas{display:block;width:100%!important;height:100%!important}
.hero .container{position:relative;z-index:1}

/* tilt 3D pe carduri */
.tilt3d{transform-style:preserve-3d;will-change:transform}
.tilt-gloss{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .4s ease;mix-blend-mode:soft-light;z-index:3}
@media (hover:hover) and (pointer:fine){
  .card,.level,.price,.stat,.glasscard,.glos-card{transition:transform .55s cubic-bezier(.22,.61,.36,1),box-shadow .2s,border-color .2s}
}
@media (prefers-reduced-motion: reduce){
  #hero3d{display:none}
  .tilt-gloss{display:none}
}
@media (max-width:880px){ #hero3d{display:none} }

/* ============================================================
   18. HERO închis în ambele teme (3D integrat fără cusătură) + caption
   ============================================================ */
.hero{
  background:
    radial-gradient(820px 460px at 88% -12%, rgba(232,194,104,.20), transparent 60%),
    radial-gradient(680px 440px at 2% 6%, rgba(54,214,126,.18), transparent 55%),
    linear-gradient(150deg,#123056 0%,#0e2750 46%,#081428 100%) !important;
  --text:#eef3ff; --muted:#b9c9e2; --border:rgba(255,255,255,.14); --card:rgba(255,255,255,.06);
  --emerald:#36D67E; --emerald-d:#27c06a; --blue:#E8C268;
}
.hero h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.06; letter-spacing:-.03em; }
.hero .lead{ font-size:1.2rem; }
.hero .hero-trust{ color:#a7bbd6; }
.hero-3d-space{ align-self:start; width:100%; }
.hero-caption{ position:relative; z-index:2; max-width:350px; margin-left:auto; padding-top:4px;
  text-shadow:0 2px 22px rgba(0,0,0,.55); }
.hc-eyebrow{ display:inline-block; color:#46e08c; font-weight:800; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.hc-text{ color:#f3f7ff; font-weight:800; font-size:clamp(1.12rem,1.6vw,1.42rem); line-height:1.3; margin-top:8px; }
.hc-sub{ color:#E8C268; font-weight:600; font-size:.95rem; margin-top:10px; line-height:1.5; }
@media(max-width:880px){ .hero-caption{ display:none; } }

/* logo de profil în brand + iconițe social reale în footer */
.brand-img{ width:34px; height:34px; border-radius:9px; object-fit:cover; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.foot .soc a svg{ width:18px; height:18px; fill:currentColor; }
.foot .soc a:hover{ color:#fff; border-color:var(--emerald); background:var(--emerald); }
.foot .soc-h{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin:16px 0 9px; }