/* ─────────────────────────────────────────────────────────────────────────────
   Going Stellar — design system.

   Un singur fișier, fără framework. Pagina trebuie să se încarce instant, de pe
   mobil, în România, pe o conexiune slabă. Fonturile au fallback complet, deci
   pagina arată corect și dacă Google Fonts nu răspunde.

   Ordinea: 1 token · 2 bază · 3 tipografie · 4 layout · 5 antet · 6 controale
            7 hero · 8 dovezi · 9 carduri · 10 listă de app-uri · 11 studii de caz
            12 pași · 13 bandă CTA · 14 subsol · 15 mișcare
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Fundal: navy aproape negru, nu negru pur — negrul pur face textul să vibreze
     pe ecrane OLED. Fiecare treaptă e o suprafață, nu o nuanță decorativă. */
  --bg:        #05070f;
  --bg-1:      #080b17;
  --bg-2:      #0b101f;
  --bg-3:      #101728;

  --line:      #1c2542;
  --line-2:    #141b31;
  --line-3:    #0f1425;

  --ink:       #f3f6fd;
  --ink-2:     #a9b4ce;
  --ink-3:     #6f7d9c;

  --accent:    #7c9cff;
  --accent-2:  #5ee7ff;
  --violet:    #a78bfa;
  --mint:      #5fd39a;
  --gold:      #f4c667;

  /* Nuanța paginii curente. Fiecare pagină o rescrie o singură dată, pe <body>,
     și tot restul (eyebrow, aura, hover, numerotare) o moștenește de aici. */
  --tint:      var(--accent);

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 28px;

  --w:     1200px;
  --w-txt: 68ch;
  --gut:   clamp(20px, 5vw, 40px);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 18px 44px -30px rgba(0,0,0,.9);
  --shadow-3: 0 40px 90px -50px rgba(0,0,0,1);

  --f-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif:   "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --f-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

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

/* ───────────────────────── 2 · bază ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(16px, .4vw + 15px, 17.5px)/1.7 var(--f-body);
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Granulație. Un singur strat fix, ieftin, deasupra a tot: e diferența dintre un
   fundal întunecat „plat" și unul care pare tipărit. Nu prinde niciun click. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: color-mix(in srgb, var(--tint) 34%, transparent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a3559; }

/* ───────────────────────── 3 · tipografie ───────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.024em;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.6vw, 5.1rem); letter-spacing: -.038em; line-height: 1.02; }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.1rem); letter-spacing: -.03em; }
h3 { font-size: 1.1rem; letter-spacing: -.012em; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Clauza în serif italic e singurul accent editorial din pagină. Folosit rar:
   titlul din hero, un citat, cifra dintr-un studiu de caz. */
.ser { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

.grad {
  background: linear-gradient(96deg, var(--ink) 4%, var(--accent) 46%, var(--accent-2) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.lede { font-size: clamp(1.08rem, 1.35vw + .78rem, 1.32rem); line-height: 1.62; color: var(--ink-2); max-width: 60ch; }
.small { font-size: .9rem; }
.muted { color: var(--ink-3); }
strong { color: var(--ink); font-weight: 600; }
code {
  font-family: var(--f-mono); font-size: .86em;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 2px 6px; color: var(--ink);
  overflow-wrap: anywhere; word-break: break-word;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: .715rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tint);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, currentColor);
}

/* ───────────────────────── 4 · layout ───────────────────────── */

.wrap { width: min(100% - (2 * var(--gut)), var(--w)); margin-inline: auto; }
.narrow { max-width: var(--w-txt); }

section { padding: clamp(64px, 8vw, 128px) 0; position: relative; }
section.tight { padding-block: clamp(48px, 5.5vw, 80px); }

/* Aura de secțiune: o singură pată foarte slabă, în nuanța paginii, sus-stânga.
   Nu e un gradient decorativ pe tot ecranul — doar dă adâncime marginii de sus. */
section.glow::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 460px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 100% at 12% 0%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 68%),
    radial-gradient(46% 80% at 92% 8%, color-mix(in srgb, var(--tint) 12%, transparent), transparent 70%);
}
section > .wrap { position: relative; z-index: 1; }

.rule { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line) 50%, var(--line-2) 82%, transparent); }

.sec-head { max-width: var(--w-txt); margin-bottom: clamp(30px, 4.4vw, 60px); }
.sec-head p { color: var(--ink-2); margin-top: 16px; }
.sec-head .lede { margin-top: 18px; }

/* Numărul de secțiune: mic, mono, în nuanța paginii. Dă ritm unei pagini lungi
   fără să adauge încă un titlu. */
.sec-num {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  color: var(--ink-3); display: block; margin-bottom: 10px;
}
.sec-num b { color: var(--tint); font-weight: 400; }

.grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .grid { gap: 22px; }
  .g2, .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stack-lg > * + * { margin-top: clamp(52px, 7vw, 96px); }

/* Tipar rupt: pe ecrane mari, coloanele pare coboară cu un pas. Rândul nu mai e
   o linie perfectă — atât cât să se vadă că e o decizie, nu o eroare. */
@media (min-width: 1000px) {
  .g2 > :nth-child(even) { margin-top: 40px; }
  .g4 > :nth-child(even) { margin-top: 28px; }
  .g3 > :nth-child(3n+2) { margin-top: 32px; }
  /* Cardurile au min-height:100%, deci se întind pe toată înălțimea rândului;
     marginea de mai sus le împinge cu pasul respectiv SUB cutia gridului, iar
     rândul nu crește la loc. Fără rezerva de dedesubt, secțiunea următoare urcă
     peste ele și taie ultimul rând de text. Rezerva = pasul. */
  .g2:has(> :nth-child(even)) { padding-bottom: 40px; }
  .g4:has(> :nth-child(even)) { padding-bottom: 28px; }
  .g3:has(> :nth-child(3n+2)) { padding-bottom: 32px; }
}

/* Rezerva de mai sus repară aşezarea în repaus. Nu ajunge: animaţia de intrare
   coboară cardul cu 44px faţă de cutia lui de aşezare, iar dacă blocul următor
   începe exact unde se termină gridul, cei 44px cad peste el — exact ce se
   vedea, ultimul rând de text tăiat de panoul de dedesubt. Deci: ce urmează
   după un grid stă mai jos decât poate călători orice animaţie de intrare.
   Măsurat pe toate poziţiile de derulare, nu doar în repaus. */
.grid + *, .grid + .shot { margin-top: clamp(48px, 4.5vw, 68px); }

/* Acelaşi motiv, pentru listele de rânduri care se dezvăluie: subsolul de sub
   ele stătea la 18px, adică mai puţin decât cursa animaţiei. */
.applist + p, .applist + * { margin-top: clamp(30px, 3vw, 42px) !important; }

/* ───────────────────────── 5 · antet ───────────────────────── */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bg-3); color: var(--ink); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

header.top {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line-3);
}
.top-in { display: flex; align-items: center; gap: 22px; height: 68px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.024em;
  text-decoration: none; font-size: 1.05rem; white-space: nowrap; color: var(--ink);
}
.brand .star { width: 21px; height: 21px; flex: none; color: var(--accent);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 50%, transparent)); }

.nav { display: flex; gap: 4px; margin-left: 14px; align-items: center; }
.nav > a {
  white-space: nowrap;
  text-decoration: none; color: var(--ink-2); font-size: .945rem;
  padding: 8px 13px; border-radius: 99px; position: relative;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav > a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.nav > a.is-current { color: var(--ink); }
.nav > a.is-current::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 1.5px;
  background: var(--tint); border-radius: 2px;
}

.top-act { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* NU font mono: în mono, „O" din RO se citește ca zero — arăta „R0". */
.lang {
  font-family: var(--f-body); font-weight: 600; font-size: .78rem; letter-spacing: .07em;
  border: 1px solid var(--line); padding: 7px 11px; border-radius: 99px;
  text-decoration: none; color: var(--ink-2); transition: border-color .18s, color .18s;
}
.lang:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--ink); }

.burger {
  display: none; width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); cursor: pointer;
}
.burger span { display: block; width: 17px; height: 10px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease), top .22s var(--ease);
}
.burger span::before { top: 0; }
.burger span::after  { top: 8.5px; }
.burger[aria-expanded="true"] span::before { top: 4.25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 4.25px; transform: rotate(-45deg); }

.mnav {
  border-top: 1px solid var(--line-3);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  padding: 10px var(--gut) 22px;
}
.mnav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; text-decoration: none; color: var(--ink);
  font-family: var(--f-display); font-size: 1.16rem; letter-spacing: -.02em;
  border-bottom: 1px solid var(--line-3);
}
.mnav a:last-of-type { border-bottom: 0; }
.mnav a::after { content: "→"; color: var(--ink-3); font-family: var(--f-body); font-size: .95rem; }
.mnav a.is-current { color: var(--tint); }
.mnav .btn { width: 100%; justify-content: center; margin-top: 16px; }
.mnav .btn::after { content: none; }

/* Șapte intrări în meniu: sub 1240px se strâng, sub 1060px intră în burger —
   altfel „Ce am făcut" se rupea pe trei rânduri. */
@media (max-width: 1240px) {
  .nav { margin-left: 6px; gap: 0; }
  .nav > a { padding: 8px 9px; font-size: .9rem; }
  .nav > a.is-current::after { left: 9px; right: 9px; }
}
@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .top-act .btn { display: none; }
}
@media (min-width: 1061px) { .mnav { display: none !important; } }

/* Fără JavaScript meniul rămâne accesibil: linkurile se afișează pe un rând
   care se poate derula lateral, sub antet. */
.nojs-nav { display: none; }

/* ───────────────────────── 6 · controale ───────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 24px; border-radius: 99px; min-height: 46px;
  font: 600 .96rem/1 var(--f-body); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), border-color .2s, background .2s, color .2s;
  white-space: nowrap;
}
.btn-sm { padding: 10px 17px; min-height: 40px; font-size: .9rem; }

/* ⚠️ `.nav a` bătea `.btn-primary` pe specificitate și butonul din antet moștenea
   culoarea de link — text deschis pe fundal deschis. De asta culoarea e legată de
   `.btn-primary` cu o clasă în plus, nu doar de element. */
a.btn-primary, .btn-primary {
  background: linear-gradient(118deg, var(--accent), var(--accent-2));
  color: #04101d;
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--accent) 90%, transparent);
}
a.btn-primary:hover, .btn-primary:hover {
  transform: translate(var(--bx, 0px), calc(-2px + var(--by, 0px)));
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--accent) 95%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  a.btn-primary:hover, .btn-primary:hover { transform: none; }
}
a.btn-ghost, .btn-ghost { border-color: var(--line); color: var(--ink); background: color-mix(in srgb, var(--ink) 3%, transparent); }
a.btn-ghost:hover, .btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); transform: translateY(-2px); }

.cta { display: flex; gap: 12px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-3);
  white-space: nowrap; vertical-align: middle;
}
.chip.live { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 40%, transparent);
  background: color-mix(in srgb, var(--mint) 9%, transparent); }
.chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 8px var(--mint); }
.chip.review { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent);
  background: color-mix(in srgb, var(--gold) 8%, transparent); }
.chip.built { color: var(--ink-3); }

/* Legătură-text cu săgeată. Săgeata se mișcă, textul nu — nimic nu sare. */
.arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--tint); text-decoration: none; font-weight: 500; font-size: .945rem;
}
.arrow::after { content: "→"; transition: transform .2s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }

/* Sub-navigația paginilor de aplicații. Pe telefon se derulează lateral. */
.subnav {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 4px; margin-bottom: clamp(28px, 4vw, 44px);
  -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 99px; border: 1px solid var(--line-2);
  color: var(--ink-2); font-size: .9rem; background: var(--bg-1);
  transition: border-color .18s, color .18s, background .18s;
}
.subnav a:hover { color: var(--ink); border-color: var(--line); }
.subnav a.is-current {
  color: var(--ink); border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  background: color-mix(in srgb, var(--tint) 12%, transparent);
}

.crumbs { font-size: .84rem; color: var(--ink-3); margin-bottom: 18px; }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--ink-2); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* ───────────────────────── 7 · hero ───────────────────────── */

.hero { padding-top: clamp(52px, 7vw, 104px); padding-bottom: clamp(44px, 6vw, 88px); overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { max-width: 15ch; }
.hero.lead h1 { max-width: 18ch; }
.hero .lede { margin-top: 24px; }
.hero .cta { margin-top: 34px; }

/* Aurora + stele + grilă: pur CSS, fără imagini, fără JS. Grila se stinge spre
   marginea de jos, ca să nu taie textul. */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky::before {
  content: ""; position: absolute; inset: -34% -12% auto -12%; height: 820px;
  background:
    radial-gradient(closest-side at 20% 36%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
    radial-gradient(closest-side at 74% 22%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
    radial-gradient(closest-side at 54% 72%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 72%);
  filter: blur(66px);
  opacity: .58;
  animation: drift 30s ease-in-out infinite alternate;
}
.sky::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-radial-gradient(circle at 78% 12%,
      transparent 0 118px,
      color-mix(in srgb, var(--ink) 7%, transparent) 118px 119px);
  mask-image: radial-gradient(120% 86% at 62% 6%, #000 8%, transparent 74%);
  -webkit-mask-image: radial-gradient(120% 86% at 62% 6%, #000 8%, transparent 74%);
  opacity: .8;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
.stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 12%, #fff, transparent),
    radial-gradient(1px   1px   at 34% 62%, #cfe0ff, transparent),
    radial-gradient(1.6px 1.6px at 82% 46%, #fff, transparent),
    radial-gradient(1px   1px   at 52% 33%, #cfe0ff, transparent),
    radial-gradient(1.2px 1.2px at 92% 74%, #fff, transparent),
    radial-gradient(1px   1px   at 24% 86%, #cfe0ff, transparent),
    radial-gradient(1.3px 1.3px at 6%  56%, #fff, transparent);
  animation: twinkle 8s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .3; } to { opacity: .6; } }

/* ───────────────── 7b · sistemul orbital (prima pagină) ─────────────────
   Iconițele de pe inele sunt aplicațiile publicate, nu decor. Fiecare satelit
   stă într-un cerc care se rotește; imaginea din el se rotește INVERS, cu
   aceeași perioadă, altfel s-ar da peste cap în timp ce orbitează. */

.hero.has-system { overflow: hidden; }
.hero-solo { max-width: 46rem; }

.system {
  position: absolute; z-index: 1; pointer-events: none;
  right: 120px; top: 50%;
  width: 0; height: 0;
}
.system > * { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; }

.planet {
  width: 168px; height: 168px;
  background: radial-gradient(circle at 34% 28%,
    color-mix(in srgb, var(--accent) 72%, #fff),
    var(--accent) 40%, #2b3f8f 66%, #101c44 88%);
  box-shadow: 0 0 110px -12px color-mix(in srgb, var(--accent) 72%, transparent),
              inset -18px -22px 46px -18px #05070f;
}
.ring { border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.r1 { width: 320px; height: 320px; }
.r2 { width: 500px; height: 500px; border-color: color-mix(in srgb, var(--accent) 14%, transparent); }
.r3 { width: 700px; height: 700px; border-color: color-mix(in srgb, var(--accent) 9%, transparent); }

.orb { animation: orbit var(--od) linear var(--ph) infinite; }
.orb > a {
  position: absolute; left: 50%; top: 0; translate: -50% -50%;
  display: block; border-radius: 12px; pointer-events: auto;
  animation: orbit var(--od) linear var(--ph) infinite reverse;
}
.orb img {
  width: 46px; height: 46px; border-radius: 12px; background: #fff; display: block;
  box-shadow: 0 6px 24px -8px #000, 0 0 0 1px var(--line-2);
  transition: scale .22s var(--ease), box-shadow .22s var(--ease);
}
.orb > a:hover img, .orb > a:focus-visible img {
  scale: 1.18;
  box-shadow: 0 10px 34px -8px #000, 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Eticheta apare la hover și stă sub iconiță; orbita se rotește, ea nu. */
.orb-tip {
  position: absolute; top: calc(100% + 9px); left: 50%; translate: -50% 0;
  font: 500 .78rem/1 var(--f-body); white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; color: var(--ink);
  background: color-mix(in srgb, var(--bg-3) 92%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  opacity: 0; translate: -50% 4px; transition: opacity .18s, translate .18s var(--ease);
  pointer-events: none;
}
.orb > a:hover .orb-tip, .orb > a:focus-visible .orb-tip { opacity: 1; translate: -50% 0; }
/* Poziția de start se dă prin `animation-delay` NEGATIV, nu prin `rotate`.
   Cu `rotate`, contra-rotația copilului anula doar partea animată, iar iconițele
   rămâneau înclinate cu unghiul static — se vedea imediat. Cu delay, părintele
   și copilul pornesc din aceeași fază și se anulează exact.
   Perioade diferite = configurația nu se repetă niciodată identic. */
/* Perioada și faza stau în variabile, ca să le poată folosi și ramura de
   „reduced motion": acolo animația nu e ștearsă, ci PUSĂ PE PAUZĂ — altfel toți
   sateliții se strâng la ora 12 și inelele rămân goale. */
.o1 { width: 320px; height: 320px; --od: 88s;  --ph: -73.8s; }
.o2 { width: 500px; height: 500px; --od: 132s; --ph: -78.5s; }
.o3 { width: 500px; height: 500px; --od: 132s; --ph: -123.9s; }
.o4 { width: 700px; height: 700px; --od: 190s; --ph: -133.0s; }
.o5 { width: 700px; height: 700px; --od: 190s; --ph: -154.1s; }

@keyframes orbit { to { transform: rotate(360deg); } }

/* Pe telefon sistemul se micșorează și iese pe după marginea dreaptă: rămâne
   ca semn, fără să concureze cu titlul. */
@media (max-width: 1240px) { .system { right: -30px; scale: .86; } }
@media (max-width: 1000px) { .system { right: -140px; scale: .74; } }
/* Pe telefon sateliții se taie pe muchia ecranului și arată a accident, nu a
   intenție. Rămâne limbul planetei și inelele — atmosferă, nu jumătăți de
   iconițe. Iconițele se văd oricum, întregi, în banda de mai jos. */
@media (max-width: 720px) {
  .system { right: -120px; top: 58%; scale: .62; opacity: .95; }
  .system .orb { display: none; }
  .hero.has-system { padding-bottom: clamp(56px, 9vw, 96px); }
}

/* ───────────────────────── 8 · dovezi ───────────────────────── */

.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line-3);
  border-block: 1px solid var(--line-3);
}
.stat { background: var(--bg); padding: 0; position: relative; container-type: inline-size; }
/* Cifra se desface la clic. <details> face asta nativ — merge fără JavaScript,
   se navighează din tastatură și rămâne găsibilă cu Ctrl+F în pagină. */
.stat summary { padding: 30px var(--gut) 26px; cursor: pointer; list-style: none;
  display: block; transition: background .2s; }
.stat summary::-webkit-details-marker { display: none; }
.stat summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.stat summary em {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font: 500 .76rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tint); font-style: normal; opacity: .85;
}
.stat summary em::after { content: "+"; font-size: 1.05em; transition: rotate .22s var(--ease); }
.stat[open] summary em::after { rotate: 45deg; }
.stat ul { margin: 0; padding: 0 var(--gut) 30px; list-style: none;
  display: grid; gap: 8px; color: var(--ink-2); font-size: .9rem; }
.stat ul li { padding-left: 16px; position: relative; }
.stat ul li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 1px; background: var(--tint); }
@media (min-width: 900px) {
  .stat summary { padding: 46px 32px 32px; }
  .stat ul { padding: 0 32px 40px; }
}
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat { padding: 46px 32px 40px; } }
.stat b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.9rem, 17cqi, 4.8rem); letter-spacing: -.055em; line-height: .92;
  background: linear-gradient(168deg, var(--ink) 26%, color-mix(in srgb, var(--tint) 80%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { display: block; margin-top: 16px; color: var(--ink-3); font-size: .875rem; line-height: 1.5;
  max-width: 30ch; }

@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ───────────── 8b · citatul mare și peretele de aplicații ─────────────
   Două momente în care pagina ridică vocea. Amândouă sunt SCARĂ, nu efecte:
   un site premium se aude tare prin mărime, nu prin filtre. */

.quote-sec { padding-block: clamp(72px, 11vw, 168px); }
.quote-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(72% 120% at 18% 50%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 66%),
    radial-gradient(60% 100% at 88% 40%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 68%);
}
.pull {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 6.2vw, 5.2rem); line-height: 1.04; letter-spacing: -.028em;
  max-width: 20ch; text-wrap: balance;
}
.pull {
  background: linear-gradient(100deg,
    var(--ink) 46%, color-mix(in srgb, var(--ink) 40%, transparent) 54%) 0 0 / 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pull.pull { animation: sweep linear both; animation-timeline: view();
            animation-range: entry 16% cover 54%; }
    @keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
  }
}
.pull::before {
  content: "\201C"; display: block;
  font-size: clamp(4rem, 11vw, 9rem); line-height: .5; color: var(--tint);
  opacity: .5; margin-bottom: .18em; -webkit-text-fill-color: var(--tint);
}
.pull cite { display: block; margin-top: clamp(24px, 3vw, 40px);
  font: 500 .82rem/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); font-style: normal; }

/* Peretele: trei rânduri de iconițe, sensuri alternate, pe toată lățimea.
   Aceleași 28 de aplicații publicate — dovada la prima vedere. */
.wall-head { display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.wall-num {
  font-family: var(--f-display); font-weight: 600; line-height: .82;
  font-size: clamp(4.5rem, 13vw, 12rem); letter-spacing: -.06em;
  background: linear-gradient(160deg, var(--ink) 24%, var(--tint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: none;
}
.wall-head > div { flex: 1 1 22rem; padding-top: clamp(6px, 1.4vw, 20px); }
.wall-head p { color: var(--ink-2); margin-top: 14px; max-width: 52ch; }

.wall { position: relative; margin-top: clamp(34px, 5vw, 64px);
  display: grid; gap: clamp(12px, 1.4vw, 20px); overflow: hidden; }
.wall::before, .wall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(60px, 10vw, 180px);
  z-index: 2; pointer-events: none;
}
.wall::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.wall::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.wall-row { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content;
  animation: marquee linear infinite; }
.wall-row:nth-child(1) { animation-duration: 78s; }
.wall-row:nth-child(2) { animation-duration: 96s; animation-direction: reverse; }
.wall-row:nth-child(3) { animation-duration: 112s; }
.wall-row img {
  width: clamp(52px, 6.4vw, 78px); height: clamp(52px, 6.4vw, 78px);
  border-radius: clamp(13px, 1.6vw, 20px); background: #fff; flex: none;
  box-shadow: 0 10px 30px -14px #000, 0 0 0 1px var(--line-2);
}
.wall:hover .wall-row { animation-play-state: paused; }

/* ─────────────── 8c · lumina de sub cursor și starea interactivă ───────────
   Un card întunecat e mort până când reacționează. Pata radială urmărește
   cursorul prin două variabile scrise din JS; desenatul îl face CSS-ul. Fără
   JavaScript, variabilele lipsesc, pata stă în afara cardului și nu se vede
   nimic — exact cum era înainte. */
.card, .case, .app-row, .creed li, .step { position: relative; isolation: isolate; }
.card::after, .case::after, .app-row::after, .creed li::after, .step::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .28s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, -200%),
    color-mix(in srgb, var(--tint) 15%, transparent), transparent 68%);
}
.card:hover::after, .case:hover::after, .app-row:hover::after,
.creed li:hover::after, .step:hover::after { opacity: 1; }

/* ─────────────── 8d · catalogul care se poate interoga ─────────────── */

/* Bara apare doar dacă scriptul a pornit: altfel ar fi o unealtă care nu face
   nimic. Lista de dedesubt e completă și corectă în ambele cazuri. */
.finder { display: none; }
.js .finder {
  display: grid; gap: 14px; margin-bottom: 26px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
@media (max-width: 900px) { .js .finder { grid-template-columns: minmax(0, 1fr); } }

.fsearch {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line); border-radius: 99px;
  background: var(--bg-1); padding: 0 8px 0 16px; min-height: 50px;
  transition: border-color .2s, box-shadow .2s;
}
.fsearch:focus-within {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}
.fsearch svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.fsearch input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--ink); font: 400 1rem/1 var(--f-body); padding: 14px 0;
}
.fsearch input::placeholder { color: var(--ink-3); }
.fsearch input::-webkit-search-cancel-button { display: none; }
.fsearch button {
  border: 1px solid var(--line); background: none; color: var(--ink-2);
  border-radius: 99px; padding: 8px 14px; font: 500 .84rem/1 var(--f-body); cursor: pointer;
}
.fsearch button:hover { color: var(--ink); border-color: var(--accent); }

.fchips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip {
  border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink-2);
  border-radius: 99px; padding: 10px 16px; font: 500 .88rem/1 var(--f-body);
  cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.fchip:hover { color: var(--ink); border-color: var(--line); }
.fchip[aria-pressed="true"] {
  color: var(--ink); border-color: color-mix(in srgb, var(--tint) 58%, transparent);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
}
.fcount { grid-column: 1 / -1; margin: 0; color: var(--ink-3); font-size: .86rem;
  font-family: var(--f-mono); letter-spacing: .04em; }
.fcount b { color: var(--tint); font-weight: 400; }
.none { color: var(--ink-2); padding: 40px 0; font-size: 1.02rem; }

/* Insigna de stare din catalog stă la capătul rândului. */
.app-row > .chip { justify-self: end; }
.applist [data-app][hidden] { display: none; }

/* ─────────────── 8e · calculatorul de prag ─────────────── */

.calc {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: clamp(24px, 3.4vw, 44px);
  display: grid; gap: clamp(24px, 3vw, 40px);
}
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); } }
.calc-in { display: grid; gap: 16px; align-content: start; }
/* Eticheta și câmpul pe ACELAȘI rând. Fără poziționare explicită, `grid-row: 1`
   doar pe input împingea eticheta pe rândul doi — se vedea imediat în randare. */
.fld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: center; }
.fld > span { grid-area: 1 / 1; color: var(--ink-2); font-size: .94rem; }
.fld input {
  grid-area: 1 / 2; justify-self: end; width: 9rem;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: 600 1.05rem/1 var(--f-display); letter-spacing: -.02em;
  padding: 11px 12px; text-align: right; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.fld input:focus {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}
.fld em { grid-area: 1 / 2; justify-self: end; align-self: center;
  font-style: normal; font-size: .8rem; color: var(--ink-3);
  pointer-events: none; padding-right: 14px; }
.fld input { padding-right: 3.4rem; }

.calc-out { display: grid; gap: 14px; align-content: start; }
.res { border: 1px solid var(--line-2); border-radius: var(--r); padding: 20px 22px;
  background: color-mix(in srgb, var(--ink) 2.5%, transparent); }
.res-k { display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.res b {
  display: block; margin: 8px 0 6px; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.res-n { color: var(--ink-3); font-size: .86rem; line-height: 1.5; }
.res.is-key { border-color: color-mix(in srgb, var(--tint) 40%, transparent);
  background: color-mix(in srgb, var(--tint) 9%, transparent); }
.res.is-key b { background: linear-gradient(150deg, var(--ink), color-mix(in srgb, var(--tint) 85%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Un prag negativ nu e o cifră mică — e un verdict. Se vede ca atare. */
.calc.is-under .res.is-key { border-color: color-mix(in srgb, #ff8f8f 46%, transparent);
  background: color-mix(in srgb, #ff8f8f 10%, transparent); }
.calc.is-under .res.is-key b { background: none; color: #ff9d9d; }
.calc-f { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid var(--line-2);
  display: grid; gap: 10px; }
.calc-f code { justify-self: start; font-size: .8rem; }
.calc-f span { color: var(--ink-3); font-size: .88rem; max-width: 68ch; }

/* ─────────────── 8f · sala de date ───────────────
   Sursa nu e o notă de subsol, e o coloană. O cifră fără interogarea din care a
   ieșit e o afirmație, nu o măsurătoare — iar pagina asta există exact ca să
   țină diferența vizibilă. */

.nums { display: grid; border-top: 1px solid var(--line-2); }
.num {
  display: grid; gap: 6px 28px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr);
  padding: 26px 12px 26px 4px; border-bottom: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
@media (min-width: 860px) {
  .num { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px 32px; }
}
.num b {
  font-family: var(--f-display); font-weight: 600; line-height: .9;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem); letter-spacing: -.045em; white-space: nowrap;
  background: linear-gradient(160deg, var(--ink) 28%, color-mix(in srgb, var(--tint) 82%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.num > p { color: var(--ink); font-size: 1rem; margin: 0; align-self: center; }
.num dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
  font-size: .78rem; align-self: center; }
.num dt { font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); }
.num dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.num dd code { font-size: .95em; padding: 1px 5px; }

/* Distribuția pe țări: bara e proporția reală, nu o ilustrație. */
.cbars { display: grid; gap: 10px; margin-top: clamp(28px, 4vw, 48px); }
.cbar { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  gap: 16px; align-items: center; }
@media (max-width: 620px) { .cbar { grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n v" "t t"; row-gap: 6px; }
  .cbar-n { grid-area: n; } .cbar-v { grid-area: v; } .cbar-t { grid-area: t; } }
.cbar-n { color: var(--ink-2); font-size: .94rem; }
.cbar-t { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 5%, transparent);
  overflow: hidden; }
.cbar-t i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 55%, transparent), var(--tint)); }
.cbar-v { font-family: var(--f-mono); font-size: .84rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

/* Rândul „txt" din pagina pentru AI. */
.app-row .dot { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; }

/* ─────────────── 8g · scena care se adună ───────────────
   Cele 28 de iconițe vin din împrăștiere și se așază în grilă în timp ce
   derulezi. Scena e înaltă, etajul din ea e lipit; animația e legată de
   `view-timeline`-ul secțiunii, pe intervalul `contain` — adică exact cât timp
   etajul stă fixat.

   ⚠️ Se animează DOAR translate/rotate/scale. Niciodată opacitatea: dacă un
   interval nu se rezolvă, conținutul trebuie să rămână vizibil, nu să dispară.
   Și tot ce ține de scenă (înălțimea, lipirea) stă în @supports — fără
   scroll-driven animations, secțiunea e o grilă normală. */

.stage-head { display: flex; align-items: flex-start; gap: clamp(18px, 3.4vw, 44px);
  flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 52px); }
.stage-head > div { flex: 1 1 22rem; padding-top: clamp(4px, 1.2vw, 16px); }
.stage-head p { color: var(--ink-2); margin-top: 12px; max-width: 52ch; }

.swarm { display: grid; gap: clamp(10px, 1.3vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; }
@media (min-width: 620px) { .swarm { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.swarm img {
  width: 100%; max-width: clamp(46px, 7vw, 82px); aspect-ratio: 1;
  border-radius: clamp(12px, 1.6vw, 20px); background: #fff;
  box-shadow: 0 12px 34px -16px #000, 0 0 0 1px var(--line-2);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 320vh e mereu mai mult decât ecranul, deci intervalul `contain` există
       întotdeauna și animația se termină garantat. */
    .scene { view-timeline: --scene block; height: 320vh; padding: 0; }
    .stage { position: sticky; top: 0; height: 100vh; display: grid; align-content: center;
      overflow: hidden; }
    .swarm img {
      animation: gather linear both;
      animation-timeline: --scene;
      animation-range: contain calc(var(--ph) * 100%) contain calc(var(--ph) * 100% + 62%);
    }
    @keyframes gather {
      from { translate: var(--dx) var(--dy); rotate: var(--r); scale: .42; }
      to   { translate: 0 0; rotate: 0deg; scale: 1; }
    }
    /* Titlul intră o dată cu ele, dar mai devreme și mai discret. */
    .stage-head {
      animation: gather-head linear both;
      animation-timeline: --scene; animation-range: contain 0% contain 34%;
    }
    @keyframes gather-head { from { transform: translateY(26px); } to { transform: none; } }
  }
}

/* ─────────────── 8h · bara de progres a derulării ───────────────
   Legată de derularea documentului, nu de un ascultător de scroll. */
.prog { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; pointer-events: none;
  transform-origin: 0 50%; scale: 0 1;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--tint)); }
@supports (animation-timeline: scroll()) {
  .prog { animation: fill linear both; animation-timeline: scroll(root block); }
  @keyframes fill { from { scale: 0 1; } to { scale: 1 1; } }
}

/* ─────────────── 8i · cercetare ───────────────
   Un articol lung se citește altfel decât o pagină de prezentare: măsură mai
   scurtă, text mai mare, aer între secțiuni. Structura e făcută ca un asistent
   să-l poată cita la fel de ușor ca un om — un h1, h2-uri pe secțiuni, data în
   <time>, limitele într-o secțiune proprie, nu într-o notă de subsol. */

.arts { border-top: 1px solid var(--line-2); }
.art-row {
  display: grid; gap: 6px 26px; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 26px 10px 26px 4px; border-bottom: 1px solid var(--line-2);
  text-decoration: none; border-radius: var(--r-sm);
  transition: background .18s var(--ease);
}
@media (min-width: 860px) {
  .art-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 8px 36px; }
}
.art-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.art-meta { display: flex; flex-direction: column; gap: 6px; }
/* Pe telefon metadatele stau pe un rând deasupra titlului, nu într-o coloană
   îngustă: „CERCETARE · METODĂ" intra peste titlu. */
@media (max-width: 859px) {
  .art-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
}
.art-meta time { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; color: var(--tint); }
.art-meta > span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.art-body b { display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.14rem, 1.7vw, 1.45rem); letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 8px; }
.art-body p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.art-row .go { color: var(--ink-3); align-self: center; transition: transform .2s var(--ease), color .2s; }
.art-row:hover .go { color: var(--tint); transform: translateX(4px); }

.art { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 104px); position: relative; }
/* Coloana articolului se centrează: lăsată la marginea din stânga a lui
   `.wrap`, atârna cu o jumătate de ecran gol în dreapta. 38rem ≈ 68 de
   caractere pe rând, cât se citește confortabil. */
.art .narrow { max-width: 38rem; margin-inline: auto; }
.art h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: 22px; }
.art .lede { font-size: clamp(1.1rem, 1.5vw, 1.34rem); max-width: none; }
.art-date { margin-top: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line-2);
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .08em; color: var(--ink-3); }
.art h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: clamp(44px, 5vw, 68px) 0 18px;
  letter-spacing: -.026em;
}
.art h2::before {
  content: ""; display: block; width: 30px; height: 1px; margin-bottom: 20px;
  background: linear-gradient(90deg, var(--tint), transparent);
}
.art p { font-size: 1.05rem; line-height: 1.72; color: var(--ink-2); margin-bottom: 1.1em; }
.art p b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.art p em { color: var(--ink); font-style: italic; }
/* Blocul de citare. Există ca să nu fie nevoie ca cineva — om sau asistent —
   să inventeze formatul în care ne citează. */
.cite { margin-top: clamp(44px, 5vw, 68px); padding: 24px 26px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: color-mix(in srgb, var(--tint) 5%, transparent); }
.cite h2 { font-size: 1rem; margin: 0 0 12px; letter-spacing: -.01em; }
.cite h2::before { content: none; }
.cite p { font-size: .92rem; color: var(--ink-2); margin-bottom: .7em; line-height: 1.6; }
.cite a { color: var(--tint); overflow-wrap: anywhere; }
.cite-md { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2); }
.art-back { margin-top: clamp(28px, 3.4vw, 44px); padding-top: 26px;
  border-top: 1px solid var(--line-2); }

/* ─────────────── 8j · banda de cifre ───────────────
   Un rând care curge, cu cifre verificate. Rupe ritmul vertical al paginii fără
   să adauge încă o secțiune de citit. */
.ticker { overflow: hidden; border-block: 1px solid var(--line-2);
  padding: clamp(16px, 2vw, 26px) 0; position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: clamp(50px, 8vw, 140px); z-index: 2; pointer-events: none; }
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.tick-track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.tick-track span {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem); letter-spacing: -.035em; color: var(--ink);
  white-space: nowrap;
}
.tick-track span::after { content: "·"; color: var(--tint); font-weight: 400; }
.ticker:hover .tick-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tick-track { animation: none; } }

/* ───────────────────────── 9 · carduri ───────────────────────── */

.card {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 4%, transparent), color-mix(in srgb, var(--ink) 1.2%, transparent)), var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 26px 24px;
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .28s var(--ease);
}
/* Lumina de sus: o linie de 1px care imită un reflex. Detaliul care face
   diferența dintre „un dreptunghi" și „un obiect". */
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 20%, transparent) 24%, color-mix(in srgb, var(--ink) 20%, transparent) 76%, transparent);
}
.card:hover {
  border-color: color-mix(in srgb, var(--tint) 45%, var(--line-2));
  box-shadow: var(--shadow-2), 0 0 0 1px color-mix(in srgb, var(--tint) 14%, transparent);
  /* Trei grade, nu treizeci: cardul răspunde, nu se dă în spectacol.
     --nx/--ny vin din JS, fiindcă CSS-ul nu știe cât e de mare elementul. */
  transform: perspective(1000px) translateY(-3px)
             rotateY(calc(var(--nx, 0) * 3deg))
             rotateX(calc(var(--ny, 0) * -3deg));
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card h3, .card .card-h { margin-bottom: 10px; }
/* Titlu de card care e <h2> din motive de structură, nu de mărime. */
.card-h { font-size: 1.14rem; letter-spacing: -.012em; line-height: 1.25; }
.card-lg .card-h { font-size: 1.3rem; margin-bottom: 16px; }
.card p { color: var(--ink-2); font-size: .955rem; }
.card > .ico { width: 30px; height: 30px; margin-bottom: 18px; color: var(--tint); stroke-width: 1.4; }
.card ul { margin: 16px 0 0; padding-left: 17px; color: var(--ink-3); font-size: .9rem; }
.card ul li { margin: .34em 0; }
.card ul li::marker { color: color-mix(in srgb, var(--tint) 70%, transparent); }

.card-lg { padding: clamp(28px, 3.4vw, 40px); border-radius: var(--r-lg); }

/* Card de platformă (hub-ul de aplicații). Un card care e în întregime un link. */
.plat {
  display: flex; flex-direction: column; gap: 14px; text-decoration: none;
  min-height: 100%;
}
.plat .plat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plat h3 { font-size: 1.3rem; margin: 0; }
.plat .count {
  font-family: var(--f-display); font-size: 2.5rem; font-weight: 600; letter-spacing: -.04em;
  line-height: 1; color: var(--tint);
}
.plat .count small { font-family: var(--f-body); font-size: .8rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); display: block; margin-top: 6px; }
.plat p { flex: 1; }
.plat .arrow { margin-top: 4px; }

/* ───────────────────────── 10 · listă de app-uri ───────────────────────── */

/* Optsprezece carduri identice sunt un zid. Un index cu linii fine se citește
   mai repede, e mult mai scurt pe telefon și arată ca un catalog, nu ca un grid. */
.applist { border-top: 1px solid var(--line-2); }
.app-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  padding: 18px 14px 18px 10px;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background .18s var(--ease), border-color .18s;
}
.app-row:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }
.app-row img {
  width: 46px; height: 46px; border-radius: 12px; background: #fff; flex: none;
  box-shadow: 0 2px 10px -5px #000, 0 0 0 1px var(--line-2);
}
.app-row .nm { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.app-row .nm b { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; color: var(--ink); }
.app-row .nm span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.app-row p { color: var(--ink-2); font-size: .93rem; margin: 0; }
.app-row .go { color: var(--ink-3); font-size: .95rem; transition: transform .2s var(--ease), color .2s; }
.app-row:hover .go { color: var(--tint); transform: translateX(4px); }

@media (max-width: 860px) {
  .app-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas: "ico nm go" ".  txt txt";
    row-gap: 8px; padding: 18px 8px;
  }
  .app-row img { grid-area: ico; }
  .app-row .nm { grid-area: nm; }
  .app-row p  { grid-area: txt; font-size: .9rem; }
  .app-row .go { grid-area: go; }
}

/* Varianta fără link, pentru aplicațiile construite dar nepublicate. */
.app-row.static { cursor: default; }
.app-row.static:hover { background: transparent; }
.app-row.static .go { display: none; }
.app-row.static .dot {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--bg-2);
  font-family: var(--f-mono); font-size: .78rem; color: var(--tint);
}

/* Card de aplicație scoasă în față (cele trei „flagship"). */
.app-feat { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.app-feat .app-top { display: flex; align-items: center; gap: 13px; }
.app-feat img {
  width: 52px; height: 52px; border-radius: 14px; background: #fff; flex: none;
  box-shadow: 0 3px 14px -6px #000, 0 0 0 1px var(--line-2);
}
.app-feat .app-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-feat h3 { margin: 0; font-size: 1.12rem; }
.app-feat .host { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.app-feat p { flex: 1; }
.app-feat .arrow { margin-top: 2px; font-size: .9rem; }

/* ───────────────────────── 11 · studii de caz ───────────────────────── */

.case {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: clamp(26px, 3vw, 34px);
  background: var(--bg-1);
  transition: border-color .22s var(--ease);
}
.case::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 18%, transparent) 24%, color-mix(in srgb, var(--ink) 18%, transparent) 76%, transparent);
}
.case:hover { border-color: color-mix(in srgb, var(--tint) 34%, var(--line-2)); }
.case .kicker {
  font-family: var(--f-mono); font-size: .69rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tint); margin-bottom: 14px;
}
.case h3 { font-size: clamp(1.22rem, 1.6vw, 1.42rem); margin-bottom: 12px; }
.case p { color: var(--ink-2); font-size: .96rem; }
.case .metrics {
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2);
}
.case .metrics div b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.4rem, 4.6vw, 4.4rem); letter-spacing: -.045em; line-height: .95;
  background: linear-gradient(100deg, var(--ink), color-mix(in srgb, var(--tint) 85%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.case .metrics div span { color: var(--ink-3); font-size: .82rem; display: block; margin-top: 4px; }

/* ───────────────────────── 12 · pași ───────────────────────── */

.steps { counter-reset: s; display: grid; gap: 1px; background: var(--line-3);
  border: 1px solid var(--line-3); border-radius: var(--r); overflow: hidden; }
.step { background: var(--bg-1); padding: 28px 26px; display: grid;
  grid-template-columns: 46px 1fr; gap: 20px; align-items: start; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--f-mono); font-size: .86rem; color: var(--tint);
  border: 1px solid color-mix(in srgb, var(--tint) 26%, var(--line-2));
  background: color-mix(in srgb, var(--tint) 7%, transparent);
  border-radius: 11px; width: 44px; height: 44px; display: grid; place-items: center;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: .955rem; }
@media (max-width: 520px) {
  .step { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
}

/* ───────────────────────── 13 · bandă CTA ───────────────────────── */

.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 64px);
  background:
    radial-gradient(120% 150% at 10% 0%, color-mix(in srgb, var(--tint) 17%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 26%, transparent) 30%, transparent 80%);
}
.cta-band h2 { max-width: 17ch; }
.cta-band .lede { margin-top: 16px; }
.cta-band .cta { margin-top: 30px; }

/* Notă onestă: un bloc de text cu o bară în stânga, pentru avertismentele care
   trebuie citite (ex. „construite, dar nepublicate"). */
.note {
  border-left: 2px solid color-mix(in srgb, var(--tint) 60%, transparent);
  background: color-mix(in srgb, var(--tint) 6%, transparent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 20px 22px; color: var(--ink-2); font-size: .95rem;
}
.note strong { color: var(--ink); }

/* ───────────────────────── 14 · subsol ───────────────────────── */

footer.site {
  border-top: 1px solid var(--line-3);
  padding: clamp(48px, 6vw, 72px) 0 40px;
  color: var(--ink-3); font-size: .9rem;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-1) 90%, transparent));
}
footer.site .cols { display: grid; gap: 34px;
  grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.8fr); }
@media (max-width: 900px) { footer.site .cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; } }
@media (max-width: 520px) { footer.site .cols { grid-template-columns: 1fr; gap: 28px; } }
/* Titlurile de coloană din subsol sunt <h2> pentru ca structura documentului să
   nu sară un nivel (erau <h4> după un <h3> de conținut). Vizual rămân etichete. */
footer.site .foot-h {
  font-family: var(--f-body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 15px; font-weight: 600; line-height: 1.4;
}
footer.site nav a { color: var(--ink-2); text-decoration: none; display: block; margin: .5em 0; transition: color .18s; }
footer.site nav a:hover { color: var(--ink); }
footer.site dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
footer.site dt { color: var(--ink-3); }
footer.site dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
footer.site dd a { color: var(--ink-2); text-decoration: none; }
footer.site dd a:hover { color: var(--ink); }
footer.site .legal {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-3);
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  font-size: .8rem; line-height: 1.6;
}
footer.site .legal span:last-child { max-width: 74ch; }

/* ───────────────── 14b · hero cu captură, figuri, crez, fapte ───────────────── */

/* Hero-ul primei pagini are o captură REALĂ de produs în dreapta. E singurul
   argument pe care un șablon nu-l poate falsifica: o firmă care spune că a
   publicat 28 de aplicații și nu arată niciuna se citește ca o firmă cu zero. */
.hero-grid { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 54px; }
  /* Titlul din hero-ul cu captură primește o coloană mai îngustă, deci scade cu
     un pas: altfel clauza în serif („then we run the growth.") se rupe în două
     rânduri și ultimul cuvânt rămâne singur. */
  .hero.has-aside h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); max-width: 17ch; }
}

/* Hero-ul paginilor interioare: titlul mare ocupă stânga, introducerea și
   butoanele stau jos-dreapta. Varianta pe o singură coloană lăsa 400px de
   nimic în dreapta titlului și încă un ecran gol sub butoane. */
@media (min-width: 1000px) {
  .hero-grid.split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 60px; }
  /* Titlul stă într-o coloană de ~685px, deci scade cu un pas față de mărimea
     de bază: la 81px, „Twenty-eight live." se rupea în două, iar „money." și
     „built." rămâneau singure pe câte un rând. */
  .hero.lead h1 { font-size: clamp(2.5rem, 4.6vw, 4.15rem); max-width: 16ch; }
  .hero-say { padding-bottom: 6px; }
  .hero-say .lede { max-width: 44ch; }
}
.hero-say .cta { margin-top: 28px; }

.shot { margin: 0; position: relative; }
.shot img {
  width: 100%; border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  background: var(--bg-2);
}
.shot figcaption {
  margin-top: 14px; color: var(--ink-3); font-size: .85rem; line-height: 1.55;
  max-width: 62ch;
}
.shot figcaption:empty { display: none; }
/* Captura din hero se înclină ușor și iese puțin din coloană — dă adâncime fără
   să ceară o a doua imagine. Pe telefon rămâne dreaptă, ca să se citească. */
@media (min-width: 1040px) {
  .hero .shot img { transform: perspective(1600px) rotateY(-7deg) rotateX(2deg) translateZ(0); }
}

/* Cele șase principii: o listă numerotată, nu al patrulea grid de carduri. */
.creed { list-style: none; counter-reset: c; margin: 0; padding: 0;
  display: grid; gap: 2px; }
@media (min-width: 860px) { .creed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 44px; } }
.creed li {
  counter-increment: c; position: relative;
  padding: 22px 0 22px 52px;
  border-top: 1px solid var(--line-2);
}
.creed li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--f-mono); font-size: .78rem; letter-spacing: .1em;
  color: var(--tint);
}
.creed h3 { margin-bottom: 8px; font-size: 1.14rem; }
.creed p { color: var(--ink-2); font-size: .955rem; }

/* Datele firmei — definiție/valoare, nu un tabel. */
.facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 10px 22px; margin: 0; font-size: .95rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts dd a { color: var(--tint); text-decoration: none; }
.facts dd a:hover { text-decoration: underline; }
@media (max-width: 460px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .facts dd { margin-bottom: 12px; } }

/* ───────────────────────── 15 · mișcare ─────────────────────────
   Apariția la scroll se face DOAR cu scroll-driven animations, deci fără JS și
   fără riscul clasic: dacă browserul nu le suportă, conținutul e deja vizibil. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    /* Sistemul se depărtează pe măsură ce derulezi — hero-ul are un final,
       nu doar un început. `translate`/`scale` sunt proprietăți independente,
       deci nu intră în conflict cu rotațiile copiilor. */
    .system {
      animation: depart linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes depart {
      from { translate: 0 0; scale: 1; }
      to   { translate: 120px -30px; scale: 1.42; }
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 68%;
    }
    /* Cursa animaţiei e cea mai mică distanţă cu care un element poate cădea
       peste ce urmează după el. La 44px depăşea spaţiul normal dintre blocuri
       şi tăia text pe două pagini diferite — de fiecare dată invizibil în
       repaus, vizibil doar în timpul derulării. 20px rămâne o intrare care se
       vede şi nu mai încape peste nimic. */
    @keyframes rise {
      from { translate: 0 20px; scale: .985; }
      to   { translate: 0 0; scale: 1; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wall-row { animation: none; }
  /* Excepție de la regula de mai sus: orbitele NU se mișcă, dar trebuie să
     rămână așezate pe inele. Durata reală + faza le dau poziția, pauza le
     oprește. Cu `animation: none` sau cu durata forțată la 0.001ms, toate cele
     cinci iconițe ajung suprapuse în vârful primului inel. */
  .orb, .orb img {
    animation-duration: var(--od) !important;
    animation-delay: var(--ph) !important;
    animation-iteration-count: infinite !important;
    animation-play-state: paused !important;
  }
}

@media print {
  body::after, .sky, .stars, header.top, .mnav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ─────────────── 8k · alte cercetări, la piciorul articolului ───────────────
   Fără blocul ăsta, cine aterizează direct pe un articol vede un capăt de drum.
   Cu el, oricare articol e o poartă către toate celelalte — pentru cititor şi
   pentru orice colector care urmăreşte legăturile. */
.rel { margin-top: clamp(48px, 6vw, 84px); padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--line); }
.rel > h2 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dim); font-weight: 600; margin: 0 0 18px; }
.rel ul { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px; }
.rel a { display: grid; gap: 2px 18px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 14px 14px 16px; margin: 0 -16px; border-radius: 12px;
  text-decoration: none; color: inherit; position: relative;
  transition: background .18s ease, translate .18s ease; }
.rel .rel-k { grid-column: 1; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tint); opacity: .85; }
.rel .rel-t { grid-column: 1; font-size: 1.02rem; line-height: 1.3;
  letter-spacing: -.011em; color: var(--ink); }
.rel time { grid-column: 2; grid-row: 1 / span 2; font-size: .8rem;
  color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel a:hover { background: color-mix(in oklab, var(--tint) 9%, transparent);
  translate: 3px 0; }
.rel a:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
@media (max-width: 560px) {
  .rel a { grid-template-columns: minmax(0, 1fr); }
  .rel time { grid-column: 1; grid-row: auto; }
}

/* „Pe scurt" și întrebările frecvente: frazele care se pot cita singure. */
.tldr { margin: 26px 0 8px; padding: 20px 24px; border-left: 3px solid var(--tint);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--tint) 6%, transparent); }
.art .tldr h2 { font-size: .8rem; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tint); margin: 0 0 10px; }
.art .tldr h2::before { content: none; }
.tldr ul { margin: 0; padding-left: 1.1em; }
.tldr li { color: var(--ink); line-height: 1.6; margin: .35em 0; }
.faq { margin-top: clamp(40px, 4.6vw, 60px); }
.faq details { border-bottom: 1px solid var(--line-2); padding: 14px 0; }
.faq summary { cursor: pointer; color: var(--ink); font-weight: 600; line-height: 1.5; list-style-position: outside; }
.faq details p { margin: 10px 0 2px; }

.arts-group { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tint); margin: 36px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.arts-group:first-child { margin-top: 8px; }

.srcs { margin-top: clamp(36px, 4vw, 52px); }
.srcs ol { padding-left: 1.3em; margin: 0; }
.srcs li { margin: .45em 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.srcs a { color: var(--tint); overflow-wrap: anywhere; }

/* Aplicația noastră care face lucrul din articol. */
.cta-apps { margin-top: clamp(36px, 4vw, 52px); padding: 22px 24px; border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, var(--line-2));
  background: color-mix(in srgb, var(--tint) 7%, transparent); }
.art .cta-apps h2 { font-size: 1.05rem; margin: 0 0 6px; }
.art .cta-apps h2::before { content: none; }
.art .cta-apps > p { font-size: .95rem; margin: 0 0 14px; }
.cta-app { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; padding: 12px 0;
  border-top: 1px solid var(--line-2); }
.cta-app img { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.cta-app b { display: block; color: var(--ink); font-size: 1.02rem; }
.cta-app span span { display: block; color: var(--ink-2); font-size: .93rem; line-height: 1.5; margin: 2px 0 4px; }
.cta-app em { font-style: normal; color: var(--tint); font-size: .9rem; font-weight: 600; }