/* ============================================================================
   UNRIVALS Deck System v2 — deck.css
   ----------------------------------------------------------------------------
   Sistemul vizual al deck-urilor de board. Versionat în cale (/deck/v1/): o
   schimbare de sistem înseamnă un folder v2/, niciodată o editare pe v1 sub
   deck-uri deja trimise.

   Principiul: PÂNZĂ FIXĂ 1600x900. Tipografia se declară în px pe pânză, iar
   JS-ul scalează pânza întreagă (transform: scale). Nimic nu se recalculează
   după lățimea ecranului, deci proporțiile desenate rămân identice de la un
   deck la altul. Sub 900px pânza se desface și slide-ul derulează vertical.

   Paleta: cele 7 tokenuri V01, atât. Fără verde, fără culori de dashboard.

   v2 (09.10.2026, deck Viva Toys) — LIZIBILITATE + TEMĂ:
   · pânza se vede la ~0,8x pe un laptop, deci 16px pe pânză = ~13px pe ecran.
     Textul de citit urcă la 20-24px, greutatea 300 → 400, contrastul 62% → 86%.
   · regula: niciun text sub 14px pe pânză; textul de citit minimum 20px.
   · toate culorile trec prin variabile, ca tema cream să le poată schimba.
     Tema: <html data-theme="cream">, comutată din butonul din bară (deck.js).
   · componentele care stăteau în <style>-ul unui singur deck au urcat aici
     (secțiunea 4.16). Un deck nu mai are <style> propriu.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* --- cele 7 culori V01, rol semantic fix --------------------------------- */
  --void:#0A0A0A;
  --surface:#1A1A1A;
  --border:#888888;
  --cream:#F0EDE8;
  --signal:#C8372D;        /* accent pe DARK */
  --signal-dark:#9B2520;   /* accent pe LIGHT */
  --burgundy:#741C1C;      /* logo only */

  /* --- ink derivat (aceleași culori, transparență de suprafață) ------------ */
  --ink:var(--cream);
  --ink-dim:rgba(240,237,232,.86);
  --ink-faint:rgba(240,237,232,.56);
  --rule:rgba(240,237,232,.16);
  --alt-tint:rgba(116,28,28,.26);
  --shade:10,10,10;       /* RGB-ul fundalului, pentru degradeuri */
  --on-image:#F0EDE8;     /* text peste fotografie întunecată, în ambele teme */
  --accent:var(--signal); /* accentul de text: signal pe dark, signal-dark pe cream */
  --rule-signal:rgba(200,55,45,.26);

  /* --- pânza -------------------------------------------------------------- */
  --W:1600;
  --H:900;
  --margin:96px;      /* margine de siguranță stânga/dreapta */
  --margin-top:64px;
  --margin-bot:92px;  /* lasă loc barei de jos */
  --gutter:32px;
  --col:calc((1600px - (2 * var(--margin)) - (11 * var(--gutter))) / 12); /* 85.33px */

  /* --- scala tipografică, px pe pânză ------------------------------------- */
  --t-display:116px;
  --t-h1:88px;
  --t-h2:52px;
  --t-h3:26px;
  --t-lead:28px;
  --t-body:22px;
  --t-card:22px;     /* textul din carduri (quad, find, mir, proof) */
  --t-caption:17px;
  --t-mono:15px;     /* eyebrow */
  --t-small:14px;    /* etichete mono mici: pragul de jos al întregului deck */

  --font:'Alexandria',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.55;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================================
   1 · PÂNZA
   ========================================================================= */

.deck{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;}

.slide{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  z-index:1;
}
.slide.active{display:flex;}

/* pânza propriu-zisă: 1600x900, scalată din JS prin --fit */
.stage{
  position:relative;
  width:1600px;height:900px;
  flex:0 0 auto;
  transform:scale(var(--fit,1));
  transform-origin:center center;
  padding:var(--margin-top) var(--margin) var(--margin-bot);
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.stage>*{position:relative;z-index:2;}
.stage>.bg,.stage>.motif{z-index:0;}

/* ============================================================================
   2 · FUNDALURI ȘI TEXTURI
   portate din motorul de reels (_engine/src/Visuals.tsx): DotGrid gap 44,
   Lattice gap 96, Hatch gap 26 la 45°, Glow radial. Aceleași valori.
   ========================================================================= */

.bg{position:absolute;inset:0;pointer-events:none;}
.bg.dots{
  opacity:.20;
  background-image:radial-gradient(circle at 22px 22px, var(--cream) 1.6px, transparent 1.7px);
  background-size:44px 44px;
}
.bg.lattice{
  opacity:.10;
  background-image:linear-gradient(var(--cream) 1px,transparent 1px),
                   linear-gradient(90deg,var(--cream) 1px,transparent 1px);
  background-size:96px 96px;
}
.bg.hatch{
  opacity:.07;
  background-image:repeating-linear-gradient(45deg,var(--cream) 0 1.2px,transparent 1.2px 26px);
}
.bg.glow{
  opacity:.5;
  background:radial-gradient(58% 62% at 78% 22%, rgba(200,55,45,.30), transparent 62%);
}
/* grain — portat din carousel-template.html */
.bg.grain{
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* motiv Code of Continuity ca ancoră vizuală, colț dreapta */
.motif{
  position:absolute;right:-64px;top:50%;transform:translateY(-50%);
  width:420px;height:420px;color:var(--signal);opacity:.07;pointer-events:none;
}
.motif.sm{width:280px;height:280px;top:14%;transform:none;right:-40px;}
.motif svg{width:100%;height:100%;display:block;}

/* fundal de pagină, subtil, comun tuturor slide-urilor */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(200,55,45,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(200,55,45,.035) 1px,transparent 1px);
  background-size:52px 52px;
}
.slide.alt .stage{background:radial-gradient(110% 88% at 86% 14%, var(--alt-tint), transparent 60%);}

/* ============================================================================
   3 · TIPOGRAFIE — 3 niveluri vizibile per slide, maximum
   ========================================================================= */

.eyebrow{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
}
.eyebrow .ei{width:20px;height:20px;flex:0 0 auto;}
.eyebrow .ei svg{width:100%;height:100%;}

h1,.display{font-size:var(--t-display);font-weight:900;line-height:.9;letter-spacing:-.032em;text-transform:uppercase;}
h2,.title{font-size:var(--t-h2);font-weight:700;line-height:1.06;letter-spacing:-.018em;}
h3{font-size:var(--t-h3);font-weight:700;line-height:1.25;letter-spacing:-.01em;}

.lead{font-size:var(--t-lead);font-weight:400;line-height:1.5;color:var(--ink-dim);max-width:56ch;margin-top:20px;}
.lead b,.lead strong{color:var(--ink);font-weight:700;}
.body{font-size:var(--t-body);font-weight:400;line-height:1.55;color:var(--ink-dim);max-width:64ch;}
.mono{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.signal{color:var(--accent);}
strong{color:var(--ink);font-weight:700;}

/* bara de sursă — obligatorie pe orice slide cu cifre */
.srcbar{
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.02em;line-height:1.5;
  color:var(--ink-faint);margin-top:20px;max-width:110ch;
}

/* build-in: fiecare copil direct marcat .an intră etajat */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.slide.active .an{animation:rise .5s var(--ease) both;}
.slide.active .an:nth-child(1){animation-delay:.02s}
.slide.active .an:nth-child(2){animation-delay:.09s}
.slide.active .an:nth-child(3){animation-delay:.16s}
.slide.active .an:nth-child(4){animation-delay:.23s}
.slide.active .an:nth-child(5){animation-delay:.30s}
.slide.active .an:nth-child(6){animation-delay:.37s}
.slide.active .an:nth-child(7){animation-delay:.44s}
@media (prefers-reduced-motion:reduce){.slide.active .an{animation:none;}}

/* ============================================================================
   4 · TIPURI DE SLIDE
   ========================================================================= */

/* --- 4.1 cover ----------------------------------------------------------- */
.cover-top{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:48px;}
.logo-lockup img{height:48px;width:auto;display:block;}
.cover-tag{font-family:var(--mono);font-size:15px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-top:28px;}
.cover-lead{font-size:var(--t-lead);font-weight:400;line-height:1.45;color:var(--ink-dim);max-width:52ch;margin-top:28px;}
.cover-why{
  border-left:3px solid var(--signal);padding-left:24px;margin-top:30px;max-width:56ch;
  font-size:28px;font-weight:400;line-height:1.45;color:var(--ink);
}
.cover-why cite{display:block;margin-top:14px;font-family:var(--mono);font-size:var(--t-small);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-style:normal;}
.slide.cover .stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--cover-img,none) center 32%/cover no-repeat;
  filter:grayscale(1) invert(1);opacity:.14;
}
.slide.cover .stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--shade),.34) 0%,rgba(var(--shade),.06) 42%,rgba(var(--shade),.76) 100%);
}

/* --- 4.2 statement (un singur gând, tipografie mare) --------------------- */
.slide-type-statement h2{max-width:22ch;}

/* --- 4.3 stat cards ------------------------------------------------------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
.stats.c3{grid-template-columns:repeat(3,1fr);}
.stats.c2{grid-template-columns:repeat(2,1fr);}
.stat{
  border:1px solid var(--rule);border-top:2px solid var(--border);
  background:var(--surface);padding:26px 24px;min-height:190px;
  display:flex;flex-direction:column;gap:10px;
}
.stats.tight .stat{min-height:104px;padding:14px 18px;}
.stats.tight .s-num{font-size:44px;}
.stat.sig{border-top-color:var(--signal);}
.stat .st-ico{width:28px;height:28px;color:var(--ink-faint);}
.stat.sig .st-ico{color:var(--accent);}
.stat .st-ico svg{width:100%;height:100%;}
.stat .s-num{font-size:56px;font-weight:900;line-height:1;letter-spacing:-.02em;margin-top:auto;color:var(--ink);}
.stat.sig .s-num{color:var(--accent);}
.stat .s-num span{font-family:var(--mono);font-size:.3em;font-weight:500;color:var(--ink-faint);letter-spacing:.04em;}
.stat .s-lbl{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim);line-height:1.5;}

/* --- 4.4 verdict / exec summary ------------------------------------------ */
.exec{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;margin-top:32px;align-items:start;}
.exec .verdict{font-size:26px;font-weight:400;line-height:1.5;color:var(--ink-dim);}
.exec .verdict strong{color:var(--ink);font-weight:700;}
.finds{display:flex;flex-direction:column;gap:16px;}
.find{
  border:1px solid var(--rule);border-left:3px solid var(--signal);
  background:var(--surface);padding:18px 22px;display:flex;gap:18px;align-items:center;
}
.find .f-ico{width:28px;height:28px;flex:0 0 auto;color:var(--accent);}
.find .f-ico svg{width:100%;height:100%;}
.find .f-num{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent);line-height:1;flex:0 0 auto;}
.find .f-txt{font-size:var(--t-card);color:var(--ink-dim);line-height:1.45;font-weight:400;}
.find .f-txt b{color:var(--ink);font-weight:700;}

/* --- 4.5 trei oglinzi ---------------------------------------------------- */
.mirrors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.mir{border:1px solid var(--rule);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:10px;}
.mir.hot{border-left:3px solid var(--signal);}
.mir .mir-t{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}
.mir .mir-q{font-size:var(--t-card);font-weight:400;line-height:1.45;color:var(--ink);}
.mir .mir-q b{color:var(--accent);font-weight:700;}

/* --- 4.6 hartă 2x2 / cadrane --------------------------------------------- */
.map2x2{margin-top:28px;}
.m-grid{
  position:relative;width:100%;height:340px;border:1px solid var(--rule);background:
    linear-gradient(90deg,transparent 49.85%,var(--rule) 49.85%,var(--rule) 50.15%,transparent 50.15%),
    linear-gradient(180deg,transparent 49.85%,var(--rule) 49.85%,var(--rule) 50.15%,transparent 50.15%),
    var(--surface);
}
.m-dot{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:var(--t-small);color:var(--ink-dim);white-space:nowrap;z-index:2;
}
.m-dot i{width:9px;height:9px;background:var(--border);border-radius:50%;flex:0 0 auto;}
.m-dot.me{color:var(--accent);font-weight:700;font-size:15px;}
.m-dot.me i{background:var(--signal);width:13px;height:13px;box-shadow:0 0 0 4px rgba(200,55,45,.18);}
.m-dot.ghost i{background:none;border:1.5px dashed var(--signal);width:12px;height:12px;}
.m-ax{position:absolute;font-family:var(--mono);font-size:var(--t-small);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;z-index:1;}
.m-ax.l{left:14px;bottom:10px;} .m-ax.r{right:14px;bottom:10px;}
.m-ax.t{left:14px;top:10px;}    .m-ax.b{left:14px;bottom:34px;}

/* --- 4.7 ERRC 4 cadrane / oportunități ----------------------------------- */
.quads{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
.quad{border:1px solid var(--rule);border-top:2px solid var(--signal);background:var(--surface);padding:20px 24px;display:flex;flex-direction:column;gap:10px;}
.quad .q-tag{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.quad h3{font-size:24px;line-height:1.25;}
.quad p{font-size:var(--t-card);font-weight:400;line-height:1.5;color:var(--ink-dim);}

/* --- 4.8 tabel comparativ ------------------------------------------------ */
/* .tbl-wrap — containerul care face tabelele late derulabile pe lateral in loc
   sa fie TAIATE de .stage{overflow:hidden}. Clasa era folosita in deck-uri si
   documentata in manualul de deck (regula 17) DAR nu era definita nicaieri, deci
   nu facea nimic: pe 390px, tabelele cu 4-5 coloane pierdeau pana la 139px de
   continut, invizibil. Adaugata 02.09.2026, pe deck-ul De Coltesti.
   ⛔ Testul care ar fi trebuit sa prinda asta (documentElement.scrollWidth >
   innerWidth) NU POATE iesi negativ, fiindca body si .deck au overflow:hidden.
   Verificarea corecta compara marginea elementului cu marginea clipper-ului lui. */
.tbl-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl-wrap>.tbl{margin-top:0;}
.tbl-wrap{margin-top:32px;}
.tbl{width:100%;border-collapse:collapse;margin-top:32px;font-size:20px;}
.tbl th,.tbl td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--rule);}
.tbl th{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;}
.tbl td{color:var(--ink-dim);font-weight:400;}
.tbl td.num{font-family:var(--mono);color:var(--ink);white-space:nowrap;}
.tbl tr.me td{color:var(--ink);font-weight:700;}
.tbl tr.me td.hot{color:var(--accent);}
.tbl caption{caption-side:bottom;font-family:var(--mono);font-size:var(--t-small);color:var(--ink-faint);text-align:left;margin-top:14px;letter-spacing:.05em;}

/* --- 4.9 carduri de grafic (motor: deck-charts.js) ----------------------- */
.chart-card{border:1px solid var(--rule);background:var(--surface);padding:24px 26px 20px;display:flex;flex-direction:column;margin-top:30px;}
.chart-card .c-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;}
.chart-card .c-name{font-weight:700;font-size:24px;letter-spacing:-.01em;}
.chart-card .c-delta{font-family:var(--mono);font-weight:700;font-size:24px;color:var(--accent);}
.chart-card .c-sub{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:4px 0 18px;}
.chart-card .c-foot{font-size:20px;color:var(--ink-dim);font-weight:400;line-height:1.5;margin-top:16px;}
.chart-card .c-foot b{color:var(--ink);font-weight:700;}
.chart-card svg{width:100%;height:auto;display:block;overflow:visible;}
.charts2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.charts2 .chart-card{margin-top:0;}

/* --- 4.10 puncte (max 1 slide de bullet la 4 de vizual) ------------------ */
.points{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:20px;max-width:74ch;}
.points li{position:relative;padding-left:32px;font-size:24px;font-weight:400;line-height:1.5;color:var(--ink-dim);}
.points li::before{content:'';position:absolute;left:0;top:.52em;width:10px;height:10px;background:var(--signal);transform:rotate(45deg);}
.points li b{color:var(--ink);font-weight:700;}
.points.num{counter-reset:p;}
.points.num li{padding-left:38px;}
.points.num li::before{
  content:counter(p);counter-increment:p;background:none;transform:none;top:0;left:0;
  width:auto;height:auto;font-family:var(--mono);font-size:18px;color:var(--accent);font-weight:700;
}
.points.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;max-width:none;}
/* v2: în .split lista stă lângă tabel/imagine; marginea de sus doar împinge slide-ul afară */
.split .points{margin-top:0;gap:16px;}

/* --- 4.11 imagine: full-bleed, split, packshot -------------------------- */
.split{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center;margin-top:24px;}
/* fara min-width:0 coloana de grid se lateste dupa continutul ei intrinsec si
   impinge tot randul in afara ecranului (prins pe mobil, s3 si s11) */
.split>*{min-width:0;}
.split.rev{grid-template-columns:1.3fr 1fr;}
.figure{margin:0;border:1px solid var(--rule);background:var(--surface);}
.figure img{width:100%;height:auto;display:block;}
/* În split, pânza fixă nu iartă: imaginea primește un plafon de înălțime,
   altfel slide-ul iese afară și ultimul rând se pierde tăcut. Rama se strânge
   pe imagine (fit-content), altfel suprafața cardului lasă benzi gri laterale
   la orice imagine în picioare. */
.split .figure{width:fit-content;margin-inline:auto;max-width:100%;}
.split .figure img{max-height:526px;width:auto;max-width:100%;margin:0 auto;}
/* rama se strange pe imagine: altfel suprafata cardului lasa benzi laterale */
.figure.mini{width:fit-content;margin-inline:auto;}
.figure.mini img{max-height:246px;}
.figure figcaption{
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-faint);line-height:1.45;padding:10px 16px;border-top:1px solid var(--rule);
}
.figure.tall img{max-height:400px;object-fit:cover;object-position:center 38%;}
/* în split, imaginea are un plafon mai jos: coloana de stat cards dictează
   înălțimea, iar pânza este fixă — o imagine mai înaltă împinge slide-ul afară */
.split .figure.tall img{max-height:470px;}
.bleed{position:relative;margin:0;height:520px;border:1px solid var(--rule);overflow:hidden;background:var(--surface);}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.bleed::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55),rgba(10,10,10,.18) 34%,rgba(10,10,10,.9));}
/* peste fotografie textul rămâne deschis în ambele teme: degradeul de mai sus e mereu întunecat */
.bleed .b-cap{position:relative;z-index:2;padding:24px;margin-top:auto;height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
.bleed .b-cap p{color:var(--on-image);font-size:20px;font-weight:400;line-height:1.45;max-width:60ch;}

/* --- 4.11b IMAGINE EROU: poza rulează pe toată înălțimea pânzei -----------
   Slide-urile în care imaginea ESTE argumentul (poster, planșă, concept) nu-și
   permit plafonul din .split: acolo eyebrow-ul și titlul mănâncă din înălțime
   înainte ca imaginea să înceapă. Aici textul stă LÂNGĂ imagine, nu deasupra,
   iar imaginea folosește cei 900px întregi. */
.stage.hero{padding:0 0 0 var(--margin);}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;height:100%;align-items:center;}
.hero-txt{padding:var(--margin-top) 0 var(--margin-bot);display:flex;flex-direction:column;justify-content:center;}
.hero-txt .eyebrow{margin-bottom:20px;}
/* coloana e mai îngustă decât în .split, deci titlul coboară o treaptă ca să
   respecte ruperea de rând scrisă în conținut */
.hero-txt h2{margin-bottom:22px;font-size:44px;}
.hero-fig{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px 0;}
.hero-fig .figure{width:fit-content;max-width:100%;margin:0;display:flex;flex-direction:column;min-height:0;}
/* plafon explicit: 900 (pânza) - 2x28 (aer) - ~38 (captionul) */
.hero-fig .figure img{max-height:786px;height:auto;max-width:100%;width:auto;object-fit:contain;}
/* --- 4.11d PLANȘĂ: slide cu o singură imagine, fără text ---------------------
   Pentru afișele gata scrise (reclamă-concept, planșă de brand) care își poartă
   propriul titlu ÎN imagine. Se folosește ca `.stage.hero.plate`, cu un singur
   copil `.hero-fig`; nu primi eyebrow, h2 sau srcbar — dublează ce scrie deja
   în planșă. Două lucruri pe care .stage.hero singur nu le rezolvă:
   1. .stage.hero are margine doar în stânga (corect când imaginea are coloană de
      text lângă ea) — o planșă singură iese vizibil descentrată; aici marginea
      este simetrică;
   2. bara fixă de subsol (lockup, paginație, săgeți) ocupă ultimii ~77px din
      ecran, iar o imagine centrată pe toată pânza intră peste ea — de-aia
      plafonul este 740px, cu 96px rezervați jos.
   Introdusă 02.09.2026, deck Romturingia (6 planșe Roșca între cover și concept). */
.stage.plate{padding:0 var(--margin);}
.stage.plate .hero-fig{height:100%;width:100%;display:flex;align-items:center;justify-content:center;padding:20px 0 96px;}
.stage.plate .figure{margin:0;}
.stage.plate .figure img{max-height:740px;width:auto;max-width:100%;object-fit:contain;}

/* --- 4.11c IMAGINEA ÎNTÂI: figura este primul copil al grilei ----------------
   Pe desktop stă în stânga, textul în dreapta; pe telefon ordinea din DOM o
   pune deasupra textului, deci este primul ecran (cerință Roșca, deck Pescado,
   31.08.2026: „prima imagine a prezentării trebuie să fie vizuală, sus”). */
.stage.hero.img-first{padding:0 var(--margin) 0 0;}
.hero-grid.img-first{grid-template-columns:1.05fr 1fr;}
/* coverul în regim erou: 88px nu încape pe o coloană de ~700px */
.slide.cover .hero-txt h1{font-size:64px;}
.slide.cover .hero-txt .cover-why{font-size:24px;margin-top:22px;}
.slide.cover .hero-txt .cover-top{margin-bottom:32px;}
/* fazele F1–F7 pe 4+3 în coloana îngustă a textului; punctele coboară o
   treaptă, altfel slide-ul „Primele 90 de zile” iese din pânză cu ~230px */
.hero-txt .phases{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px;}
.hero-txt .phase{min-height:84px;padding:12px;}
.hero-txt .points{margin-top:20px;gap:12px;max-width:none;}
.hero-txt .points li{font-size:20px;line-height:1.45;padding-left:26px;}
@media(max-width:900px){
  .stage.hero.img-first{padding:56px 20px 88px;}
  .hero-grid.img-first{grid-template-columns:1fr;}
  .hero-txt .phases{grid-template-columns:1fr 1fr;}
  /* regulile de mai sus sunt mai specifice decât cele din blocul mobil generic,
     deci se readuc explicit la mărimile de telefon */
  .slide.cover .hero-txt h1{font-size:var(--t-h1);}
  .slide.cover .hero-txt .cover-why{font-size:19px;}
}
@media(max-width:900px){
  .stage.hero{padding:56px 20px 88px;}
  .hero-grid{grid-template-columns:1fr;height:auto;gap:22px;}
  .hero-txt{padding:0;}
  .hero-fig{height:auto;padding:0;}
  .hero-fig .figure{width:auto;margin-inline:-20px;}
  .hero-fig .figure img{max-height:420px;width:100%;object-fit:cover;}
  /* planșa rămâne întreagă (contain, nu cover) și se centrează pe verticală —
     nu are text sub ea care să o echilibreze dacă stă lipită de marginea de sus */
  .stage.plate{justify-content:center;padding:56px 20px 88px;}
  .stage.plate .hero-fig{height:auto;padding:0;}
  .stage.plate .figure img{max-height:none;width:100%;object-fit:contain;}
}

/* --- 4.12 citat ---------------------------------------------------------- */
.pull{border-left:3px solid var(--signal);padding-left:32px;margin-top:32px;max-width:60ch;}
.pull p{font-size:34px;font-weight:400;line-height:1.35;color:var(--ink);}
.pull cite{display:block;margin-top:18px;font-family:var(--mono);font-size:var(--t-small);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);font-style:normal;}

/* --- 4.13 timeline / faze ----------------------------------------------- */
.phases{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:36px;}
.phase{border:1px solid var(--rule);border-top:2px solid var(--border);background:var(--surface);padding:16px 14px;display:flex;flex-direction:column;gap:8px;min-height:118px;}
.phase.on{border-top-color:var(--signal);}
.phase .p-n{font-family:var(--mono);font-size:var(--t-small);font-weight:700;color:var(--accent);letter-spacing:.08em;}
.phase .p-t{font-size:17px;line-height:1.35;color:var(--ink-dim);font-weight:400;}
.phase.on .p-t{color:var(--ink);font-weight:700;}

/* --- 4.14 ofertă / preț -------------------------------------------------- */
.price{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:26px;}
.price .old{font-family:var(--mono);font-size:26px;color:var(--ink-faint);text-decoration:line-through;letter-spacing:.06em;}
.price .now{font-size:76px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--accent);}
.price .per{font-family:var(--mono);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);}
.proof{border:1px solid var(--rule);border-left:3px solid var(--signal);background:var(--surface);padding:22px 26px;margin-top:26px;max-width:64ch;}
.proof .pr-t{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.proof p{font-size:var(--t-card);font-weight:400;line-height:1.55;color:var(--ink-dim);}
.proof p b{color:var(--ink);font-weight:700;}
.proof a{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:16px;}

/* --- 4.15 contact / închidere ------------------------------------------- */
.contact{margin-top:28px;font-family:var(--mono);font-size:16px;letter-spacing:.08em;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-dim);}
.contact .dot{width:7px;height:7px;background:var(--signal);transform:rotate(45deg);}
.contact a{color:var(--accent);text-decoration:none;}

/* ============================================================================
   5 · CROM — bara, contorul, progresul
   ========================================================================= */

.bar{
  position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,44px);
  font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
}
.bar .brand{display:flex;align-items:center;gap:10px;}
.bar .brand .d{width:8px;height:8px;background:var(--signal);transform:rotate(45deg);}
.bar .nav{display:flex;align-items:center;gap:16px;}
.bar .nav button{
  background:none;border:1px solid var(--rule);color:var(--ink);width:40px;height:40px;
  border-radius:2px;cursor:pointer;font-size:16px;line-height:1;
  transition:border-color .2s,color .2s;
}
.bar .nav button:hover{border-color:var(--signal);color:var(--signal);}
.counter{min-width:60px;text-align:center;white-space:nowrap;}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--signal);z-index:11;transition:width .4s var(--ease);}

/* ============================================================================
   6 · MOBIL ≤900px — pânza se desface, slide-ul derulează
   Regimul calibrat 09.08.2026: fără scalare (text ilizibil la 0.5x),
   mărime naturală, imagini full-bleed, bară compactă cu fade.
   ========================================================================= */

@media(max-width:900px){
  .slide{align-items:flex-start;overflow-y:auto;}
  .stage{
    width:100%;height:auto;min-height:100%;transform:none;
    padding:56px 20px 88px;justify-content:flex-start;
  }
  .motif{display:none;}

  :root{
    --t-display:44px;--t-h1:38px;--t-h2:28px;--t-h3:19px;
    --t-lead:19px;--t-body:17px;--t-card:17px;--t-caption:15px;--t-mono:13px;--t-small:13px;
  }
  h1,.display{line-height:.98;}
  .cover-why{font-size:19px;padding-left:16px;}
  .cover-top{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:28px;}

  .stats{grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;}
  /* cifrele mari cu unitate lipita ("41.345/luna") nu se rup: pe doua coloane
     de ~169px cardul isi depaseste coloana si impinge randul afara. Pe telefon
     stat cards-urile stau unul sub altul. */
  .stats.tight{grid-template-columns:1fr;}
  .stats .stat{min-width:0;}
  .stat{min-height:140px;padding:16px;}
  .stat .s-num{font-size:36px;}
  .exec,.split,.split.rev{grid-template-columns:1fr;gap:22px;}
  .mirrors,.quads,.charts2,.points.cols{grid-template-columns:1fr;gap:12px;}
  .phases{grid-template-columns:1fr 1fr;gap:8px;}
  .points li{font-size:18px;padding-left:26px;}
  .pull p{font-size:22px;}
  .price .now{font-size:48px;}
  .m-grid{height:280px;}
  .tbl{font-size:16px;}
  /* v2: titlul și cifra cardului se rup pe două rânduri, altfel cifra mono împinge cardul afară */
  .chart-card .c-head{flex-wrap:wrap;gap:4px 16px;}
  .chart-card .c-delta{font-size:18px;}
  .tbl th,.tbl td{padding:9px 10px;}

  /* imaginile ies din margine în margine; width-ul de fit-content din regimul
     de desktop se anuleaza, altfel rama depaseste ecranul spre dreapta */
  .figure,.bleed{margin-left:-20px;margin-right:-20px;border-left:0;border-right:0;}
  .split .figure,.figure.mini{width:auto;margin-inline:-20px;max-width:none;}
  .bleed{height:300px;}
  .figure.tall img{max-height:300px;}

  .bar{justify-content:flex-end;padding:20px 20px 14px;background:linear-gradient(180deg,rgba(var(--shade),0),rgba(var(--shade),.92) 34%);}
  .bar .brand{display:none;}
  .bar .nav button{width:46px;height:46px;}
}

/* ============================================================================
   4.16 · COMPONENTE PROMOVATE DIN DECK-URI (v2, 09.10.2026)
   Stăteau în <style>-ul deck-ului Viva Toys. Un deck nu mai are stil propriu:
   ce folosește un deck intră aici, ca o schimbare să ajungă la toate.
   ========================================================================= */
.tbl.tight th,.tbl.tight td{padding:8px 18px}
.tbl.tighter th,.tbl.tighter td{padding:6px 14px}
.tbl td.tag{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;white-space:nowrap;color:var(--ink-faint)}
.tbl td a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.shot{margin:0}
.shot img{width:100%;height:224px;object-fit:cover;object-position:left top;display:block;border:1px solid var(--rule)}
.shot figcaption{font-size:20px;font-weight:400;line-height:1.4;color:var(--ink-dim);margin-top:8px}
.shot figcaption b{color:var(--ink);font-weight:700}
.shot.single img{height:auto;max-height:470px;object-fit:contain}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:28px}
.qlist{display:flex;flex-direction:column;gap:14px}
.qlist .q{border-left:3px solid var(--signal);padding:6px 0 6px 16px;font-size:var(--t-card);line-height:1.45;font-weight:400;color:var(--ink)}
.qlist .q cite{display:block;font-family:var(--mono);font-size:var(--t-small);color:var(--ink-faint);font-style:normal;margin-top:6px;letter-spacing:.05em;text-transform:uppercase}
@media (max-width:760px){.cols2{grid-template-columns:1fr;gap:14px}.shot img{height:auto}}
/* TIP 27b: reclama propusă, compusă în pagină (fără imagine generată).
   Culorile din .am-logo / .am-visual sunt ale reclamei clientului, nu ale deck-ului. */
.admock{border:1px solid var(--rule);border-radius:14px;padding:22px 24px;background:var(--surface);display:flex;flex-direction:column;gap:14px}
.admock-azi{justify-content:center;opacity:.85}
.admock .am-tag{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.admock .am-azi{font-size:22px;line-height:1.45}
.admock .am-head{display:flex;gap:12px;align-items:center;font-size:18px;line-height:1.25}
.admock .am-head small{opacity:.7}
.admock .am-logo{width:40px;height:40px;border-radius:50%;background:#2b3240;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}
.admock .am-text{font-size:20px;line-height:1.45;margin:0}
.admock .am-visual{background:#2b3240;border-radius:10px;padding:26px 22px;display:flex;flex-direction:column;gap:8px}
.admock .am-k{font-size:40px;font-weight:800;letter-spacing:.02em;color:#c9d2dc}
.admock .am-s{font-size:17px;color:#fff;opacity:.85}
.admock .am-cta{font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}

/* KARUSEL · STANDURI (Autoglobus, 02.10.2026; urcat în v2 pe 09.10): titlu, vizual,
   6 standuri și semnătură pe o singură pânză */
.stage.standuri{padding:48px var(--margin) 92px;justify-content:center;gap:22px;}
.stage.standuri h2{font-size:44px;font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:-.02em;max-width:none;}
.stage.standuri .st-fig{align-self:center;}
.stage.standuri .st-fig img{height:372px;width:auto;max-width:100%;}
.st-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;}
.st-grid .quad{padding:16px 16px 18px;gap:8px;}
.st-grid .quad h3{font-size:18px;line-height:1.3;}
.st-sign{display:flex;align-items:baseline;justify-content:center;gap:22px;flex-wrap:wrap;}
.st-brand{font-size:30px;font-weight:900;letter-spacing:.14em;color:var(--ink);}
.st-claim{font-family:var(--mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);}
.st-claim em{font-style:normal;color:var(--accent);font-weight:700;}
@media(max-width:900px){
  .stage.standuri{padding:56px 20px 88px;gap:18px;}
  .stage.standuri h2{font-size:30px;}
  .stage.standuri .st-fig{margin-inline:-20px;align-self:stretch;}
  .stage.standuri .st-fig img{height:auto;width:100%;}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .stage.standuri h2 br{display:none;}
  .st-brand{font-size:24px;}
  .st-claim{font-size:13px;text-align:center;}
}

/* ============================================================================
   7 · TEMA CREAM — aceleași variabile, alte valori
   Comutată din butonul din bară (deck.js) sau din adresă: ?tema=cream.
   Accentul de text trece pe signal-dark (#9B2520): #C8372D pe cream are
   contrast 4,3:1, sub pragul de text mic; #9B2520 are ~6,9:1.
   ========================================================================= */
:root[data-theme="cream"]{
  color-scheme:light;
  --void:#F0EDE8;
  --surface:#FBFAF7;
  --cream:#0A0A0A;          /* folosit de texturi și de --ink: devine cerneala închisă */
  --border:#6E6E6E;
  --ink:#0A0A0A;
  --ink-dim:rgba(10,10,10,.84);
  --ink-faint:rgba(10,10,10,.62);
  --rule:rgba(10,10,10,.16);
  --rule-signal:rgba(155,37,32,.26);
  --accent:var(--signal-dark);
  --alt-tint:rgba(155,37,32,.07);
  --shade:240,237,232;
}
[data-theme="cream"] .bg.dots{opacity:.12;}
[data-theme="cream"] .bg.lattice{opacity:.07;}
[data-theme="cream"] .bg.glow{opacity:.28;}
[data-theme="cream"] .slide.cover .stage::before{filter:grayscale(1);opacity:.10;}
/* sigla are litere cream: pe fond cream se inversează, roșul rămâne roșu */
[data-theme="cream"] .logo-lockup img{filter:invert(1) hue-rotate(180deg);}

/* butonul de temă, în bara de jos */
.bar .nav button.theme-btn{width:auto;padding:0 14px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;}