/* colshare.app's home page (src/acte/site-acasa.ts makes the HTML, acasa.js moves it). The design is
   Colshare/design_handoff_colshare_website: night, oat and paper bands, one ochre action, square web UI (only the mocks
   of the app and of the link page keep its 14 px radius), rules over cards. The fonts are the app's own (/acte/fonts/, OFL).
   Breakpoint 900 px. Every animated piece starts hidden only under html.anim, which the script sets when motion is
   allowed: without the script or with reduced motion the page shows its final state. */
@font-face { font-family: "Funnel Display"; font-weight: 700; font-display: swap; src: url("/acte/fonts/funnel-display-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Display"; font-weight: 700; font-display: swap; src: url("/acte/fonts/funnel-display-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("/acte/fonts/martian-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-display: swap; src: url("/acte/fonts/martian-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-display: swap; src: url("/acte/fonts/martian-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-display: swap; src: url("/acte/fonts/martian-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-weight: 400; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-weight: 400; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-weight: 600; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-weight: 600; font-display: swap; src: url("/acte/fonts/funnel-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --noapte: #121313;
  --noapte-2: #1c1d1e;
  --linie-n: #2a2c2e;     /* rules on night */
  --contur-n: #3a3c3f;    /* outlined buttons on night */
  --ovaz: #ece8df;
  --ovaz-adanc: #e3ded3;
  --hartie: #f7f5f0;
  --linie-h: #dedad0;     /* rules on paper */
  --linie-o: #c9c3b6;     /* rules on oat */
  --ocru: #e2a52b;        /* the seal and one action */
  --ocru-hover: #edb443;
  --ocru-text: #8a5a0b;   /* ochre as text on light */
  --piatra: #a8a398;      /* secondary text on night */
  --piatra-2: #c9c4ba;
  --estompat: #5c5850;    /* secondary text on light */
  --corp-h: #3c3a35;      /* body text on light */
  --rau: #f2a39b;
  --gri: #6a6c6f;
  --lat: clamp(20px, 4vw, 56px);
  --sec: clamp(72px, 9vw, 128px);
  --usor: cubic-bezier(0.2, 0.7, 0.2, 1);
  --titlu: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
  --text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace;
  /* The app's own text face (the mocks of its screens and of the link pages). */
  --aplicatie: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noapte); color: var(--ovaz); font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ocru); }
.ovaz a:hover, .hartie a:hover, .ovaz-adanc a:hover { color: var(--ocru-text); }
::selection { background: var(--ocru); color: var(--noapte); }
:focus-visible { outline: 2px solid var(--ocru); outline-offset: 3px; }
[hidden] { display: none !important; }
button { font: inherit; }
.simboluri { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--mono); }
.ocru { color: var(--ocru); }
.ocru-text { color: var(--ocru-text); }
.piatra { color: var(--piatra); }
.estompat { color: var(--estompat); }
.gri { color: var(--gri); }

/* The seal (src/acte/sigiliu.ts): ring and lines ochre, the face night; the wordmark's letters in currentColor. */
svg.sigiliu { display: block; fill: var(--ocru); overflow: visible; }
.marca-svg { display: block; fill: currentColor; }
.marca-svg .sigiliu { fill: var(--ocru); }
.jumatati .jum { transition: transform 600ms var(--usor), opacity 500ms var(--usor); }
[data-viata="0"] .jum, [data-deschis="0"] .jum { transform: translate(var(--x0), var(--y0)); }
[data-viata="1"] .jum { transform: none; }
[data-viata="2"] .jum, [data-deschis="1"] .jum { transform: translate(var(--x2), var(--y2)); }
[data-viata="3"] .jum { transform: translate(var(--x2), var(--y2)); opacity: 0; }
.jumatati .contur { stroke: #8b867c; opacity: 0; transition: opacity 500ms var(--usor); }
[data-viata="3"] .contur { opacity: 1; }

/* ------------------------------------------------------------------ layout and type */
.s { position: relative; }
.s[id] { scroll-margin-top: 68px; }
.s.noapte { background: var(--noapte); color: var(--ovaz); }
.s.ovaz { background: var(--ovaz); color: var(--noapte); }
.s.ovaz-adanc { background: var(--ovaz-adanc); color: var(--noapte); overflow: hidden; }
.s.hartie { background: var(--hartie); color: var(--noapte); }
.cadru { max-width: 1280px; margin: 0 auto; padding: var(--sec) var(--lat); }
.cadru.sus { padding-bottom: clamp(40px, 5vw, 72px); }
.cadru.jos { padding-top: 0; }
.coloana { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.centru { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.titlu-bloc { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .doua-mari { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.doua { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px 64px; align-items: end; }
.doua-mari { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.titlu-rand { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--linie-n); padding-bottom: 24px; }
.ovaz .titlu-rand, .hartie .titlu-rand { border-color: var(--noapte); }
.titlu-rand.jos-aliniat { border: 0; padding: 0; gap: 24px 48px; }
.linie-jos { border-bottom: 1px solid var(--noapte); padding-bottom: 28px; }
.linie-sus { border-top: 1px solid var(--noapte); padding-top: 24px; }

.eticheta { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font: 700 clamp(48px, 7vw, 100px)/0.92 var(--titlu); letter-spacing: -0.035em; max-width: 12ch; }
h1 span { display: inline-block; }
.h2 { font: 700 clamp(40px, 5vw, 72px)/0.98 var(--titlu); letter-spacing: -0.028em; max-width: 13ch; }
.h-declaratie { font: 700 clamp(44px, 7.4vw, 112px)/0.9 var(--titlu); letter-spacing: -0.04em; max-width: 13ch; text-wrap: balance; }
.h-declaratie.mic { font-size: clamp(44px, 6.4vw, 96px); max-width: 11ch; }
.h-declaratie.stanga { font-size: clamp(48px, 8vw, 128px); line-height: 0.88; letter-spacing: -0.045em; max-width: 12ch; }
.h-declaratie.stanga.mic { font-size: clamp(48px, 7vw, 104px); }
.h-mic { font: 700 clamp(24px, 2.4vw, 32px)/1.05 var(--titlu); letter-spacing: -0.02em; }
.cutie { display: inline-block; line-height: 0.9; background: var(--noapte); color: var(--ovaz); padding: 0.02em 0.12em 0.06em; }
.corp { margin: 0; font-size: 18px; line-height: 1.55; max-width: 46ch; text-wrap: pretty; color: var(--corp-h); }
.noapte .corp { color: var(--piatra-2); }
.corp.mic { font-size: 16px; max-width: 64ch; }
.centru .corp { max-width: 52ch; }
.lead { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--piatra-2); max-width: 46ch; text-wrap: pretty; }

.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; padding: 11px 18px; border: 1px solid transparent; transition: background 160ms, border-color 160ms, transform 160ms; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.plin { background: var(--ocru); color: var(--noapte); }
.btn.plin:hover { background: var(--ocru-hover); color: var(--noapte); }
.btn.contur { border-color: var(--contur-n); color: var(--ovaz); }
.btn.contur:hover { border-color: var(--ovaz); color: var(--ovaz); }
.btn.text { padding-left: 4px; padding-right: 4px; color: var(--piatra-2); text-decoration: underline; text-decoration-color: var(--contur-n); text-underline-offset: 6px; }
.btn.text:hover { color: var(--ovaz); text-decoration-color: var(--ocru); }
.btn.mare { padding: 16px 24px; font-size: 16px; }
.btn.mare.text { padding: 16px 4px; }
.btn.plin svg { transition: transform 160ms var(--usor); }
.btn.plin:hover svg { transform: translateX(3px); }
.actiuni { display: flex; gap: 12px; flex-wrap: wrap; }

/* Reveal on scroll: only when the script runs and motion is allowed (html.anim); otherwise everything is in place. */
html.anim [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--usor) var(--d, 0ms), transform 700ms var(--usor) var(--d, 0ms); }
html.anim [data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ header */
.antet { position: sticky; top: 0; z-index: 20; background: rgba(18, 19, 19, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linie-n); color: var(--ovaz); }
.antet-rand { max-width: 1280px; margin: 0 auto; padding: 0 var(--lat); min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.antet .marca { color: var(--ovaz); display: inline-flex; flex: none; }
.antet-nav { display: none; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 15px; }
.antet-nav a:not(.btn) { text-decoration: none; color: var(--piatra-2); white-space: nowrap; }
.antet-nav a:not(.btn):hover { color: var(--ovaz); }
.antet-ingust { display: flex; align-items: center; gap: 8px; }
.antet-ingust .btn { min-height: 44px; padding: 0 14px; }
.meniu-buton { width: 44px; height: 44px; padding: 0; border: 1px solid var(--contur-n); background: transparent; color: var(--ovaz); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.meniu-buton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.meniu-buton[aria-expanded="true"] .deschis, .meniu-buton[aria-expanded="false"] .inchis { display: none; }
.meniu { display: flex; flex-direction: column; border-top: 1px solid var(--linie-n); padding: 8px var(--lat) 20px; font: 700 28px/1.1 var(--titlu); letter-spacing: -0.02em; }
.meniu a { text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--linie-n); }
.meniu a:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .antet-nav { display: flex; }
  .antet-ingust, .meniu { display: none !important; }
}

/* ------------------------------------------------------------------ hero */
.erou { overflow: hidden; }
/* The faint −27° hatch, fading out towards the text so it never sits under the headline. */
.hasura { position: absolute; inset: 0; background-image: repeating-linear-gradient(-27deg, transparent 0 22px, #1a1b1c 22px 23px); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 70%); mask-image: linear-gradient(90deg, transparent 15%, #000 70%); }
.erou-grila { position: relative; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.erou-text { display: flex; flex-direction: column; gap: 28px; position: relative; z-index: 2; }
.erou h1 { text-wrap: balance; font-size: clamp(46px, 6.4vw, 96px); }
.insigna { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 7px 12px; border: 1px solid var(--contur-n); color: var(--piatra-2); }
.insigna i { width: 7px; height: 7px; border-radius: 50%; background: var(--ocru); box-shadow: 0 0 0 4px rgba(226, 165, 43, 0.16); }
.promisiuni { list-style: none; margin: 4px 0 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px; border-top: 1px solid var(--linie-n); }
.promisiuni li { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ovaz); }
.promisiuni svg { width: 18px; height: 18px; fill: none; stroke: var(--ocru); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.erou-scena { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; }
/* The seal behind the phone: large, still, half in the dark; the phone sits on it. */
.erou-sigiliu { position: absolute; width: min(560px, 112vw); height: auto; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -52%) rotate(8deg); }
.erou-scena::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 40px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); pointer-events: none; }
.erou-tel { flex: none; position: relative; z-index: 1; zoom: 0.82; }
.erou-tel .telefon { box-shadow: 0 0 0 1px var(--linie-n) inset, 0 50px 90px -20px rgba(0, 0, 0, 0.8), 0 0 0 10px rgba(18, 19, 19, 0.6); }
@media (min-width: 900px) {
  .erou-grila { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 4vw, 72px); min-height: min(820px, calc(100vh - 68px)); }
  .erou-scena { height: 720px; }
  .erou-tel { zoom: 0.9; }
}
@media (min-width: 1200px) { .erou-tel { zoom: 1; } }

/* ------------------------------------------------------------------ the app's screens (static mocks) */
.telefon { width: 320px; height: 690px; flex: none; background: #050505; border-radius: 44px; padding: 8px; box-shadow: 0 0 0 1px var(--linie-n) inset; font-family: var(--aplicatie); color: var(--ovaz); text-align: left; }
.tel-ecran { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; position: relative; background: var(--noapte); }
.tel-ecran-un { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity 300ms; }
.tel-ecran-un.activ { opacity: 1; }
.tel-stare { height: 32px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; font-size: 13px; font-weight: 500; }
.tel-baterie { display: flex; gap: 5px; align-items: center; }
.tel-baterie i:first-child { width: 14px; height: 10px; border-radius: 2px; background: currentColor; opacity: 0.8; }
.tel-baterie i:last-child { width: 20px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; }
.tel-bara { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px 0 6px; flex: none; }
.tel-bara.acasa { padding: 0 6px 0 20px; }
.tel-bara > svg:not(.marca-svg) { width: 22px; height: 22px; margin: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tel-pas { font: 10.5px var(--mono); color: var(--piatra); text-transform: uppercase; white-space: nowrap; }
.tel-pasi { display: flex; gap: 4px; padding: 0 18px; margin-bottom: 14px; }
.tel-pasi i { flex: 1; height: 3px; background: var(--linie-n); }
.tel-pasi i.gata { background: var(--ocru); }
.tel-corp { padding: 0 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
[data-e="acasa"] .tel-corp { padding: 6px 16px 0; gap: 0; }
.tel-h { font: 700 30px/1 var(--titlu); letter-spacing: -0.026em; }
.tel-erou { position: relative; overflow: hidden; border-radius: 16px; background: var(--noapte-2); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.tel-erou::before { content: ""; position: absolute; right: -30px; top: -20px; width: 150px; height: 160px; background: repeating-linear-gradient(-27deg, transparent 0 9px, #2e3032 9px 10px); }
.tel-erou > * { position: relative; }
.tel-erou .mono { font-size: 10px; letter-spacing: 0.02em; }
.tel-erou b { font: 700 21px/1.08 var(--titlu); letter-spacing: -0.03em; max-width: 12ch; }
.tel-erou small { font-size: 13.5px; line-height: 19px; color: var(--piatra); max-width: 26ch; }
.tel-titlu-lista { font: 10px var(--mono); letter-spacing: 0.02em; color: var(--piatra); margin: 24px 0 10px; }
.tel-dosare { display: flex; gap: 8px; margin-right: -16px; overflow: hidden; }
.tel-dosare > span { flex: none; width: 112px; height: 84px; border: 1px solid var(--linie-n); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.tel-dosare > span.nou { border: 1px dashed var(--contur-n); }
.tel-dosare svg { width: 20px; height: 20px; fill: none; stroke: var(--ovaz); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tel-dosare .nou svg { stroke: var(--ocru); }
.tel-dosare b { font-size: 14.5px; font-weight: 500; display: flex; flex-direction: column; }
.tel-dosare small { font-size: 12.5px; font-weight: 400; color: var(--piatra); }
.tel-acte { list-style: none; margin: 0; padding: 0; }
.tel-acte li { display: flex; align-items: center; gap: 14px; min-height: 64px; border-bottom: 1px solid var(--linie-n); }
.tel-acte li:last-child { border-bottom: 0; }
.tel-acte b { font-size: 15px; font-weight: 500; display: flex; flex-direction: column; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel-acte small { font: 9.5px var(--mono); color: var(--piatra); }
.mini { width: 38px; height: 48px; border-radius: 4px; background: var(--noapte-2); flex: none; position: relative; overflow: hidden; }
.mini.id::after { content: ""; position: absolute; left: 6px; top: 15.5px; width: 26px; height: 17px; border-radius: 2px; background: var(--contur-n); }
.mini.hasura::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-27deg, transparent 0 6px, #4a4c4f 6px 7px); }
.mini.linii { background: linear-gradient(var(--contur-n), var(--contur-n)) 8px 12px / 22px 2px no-repeat, linear-gradient(var(--contur-n), var(--contur-n)) 8px 18px / 22px 2px no-repeat, linear-gradient(var(--contur-n), var(--contur-n)) 8px 24px / 13px 2px no-repeat, var(--noapte-2); }
.tel-fab { position: absolute; right: 16px; bottom: 20px; display: flex; align-items: center; gap: 8px; }
.tel-fab span { display: flex; align-items: center; justify-content: center; height: 52px; border-radius: 14px; }
.tel-fab .mic { width: 52px; background: var(--noapte-2); border: 1px solid var(--linie-n); }
.tel-fab .mare { gap: 10px; padding: 0 22px 0 18px; background: var(--ocru); color: var(--noapte); font-weight: 600; font-size: 16px; }
.tel-fab svg, .tel-desenez svg, .tel-buton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tel-cadru { border-radius: 12px; padding: 12px; background: var(--noapte-2); }
.tel-cadru.foaie { padding: 18px 0; display: flex; justify-content: center; }
.tel-cadru.foaie .a4 { width: 168px; }
.tel-comutatoare { display: flex; flex-direction: column; border-top: 1px solid var(--linie-n); }
.tel-comutatoare span { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--linie-n); }
.tel-comutatoare b { font-size: 15px; font-weight: 500; }
.tel-comutatoare i, .comutator-rand i { width: 46px; height: 28px; border-radius: 14px; background: var(--linie-n); position: relative; flex: none; transition: background 200ms; }
.tel-comutatoare i::after, .comutator-rand i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--piatra); transition: left 200ms, background 200ms; }
.tel-comutatoare i.pornit { background: var(--ocru); }
.tel-comutatoare i.pornit::after { left: 22px; background: var(--noapte); }
.tel-desenez { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ocru); min-height: 40px; }
.tel-desenez svg { width: 18px; height: 18px; }
.tel-jos { padding: 10px 18px 24px; display: flex; flex-direction: column; gap: 8px; }
.tel-jos.rand { flex-direction: row; }
.tel-buton { background: var(--ocru); color: var(--noapte); border-radius: 14px; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; }
.tel-buton.contur { background: transparent; color: var(--ovaz); border: 1px solid var(--contur-n); min-height: 52px; font-weight: 500; font-size: 15.5px; }
.tel-jos.rand .tel-buton { flex: 1; }
.tel-jos.rand .tel-buton.ingust { flex: 0 0 96px; }
.tel-marcaj { font: 9.5px/1.6 var(--mono); color: var(--piatra); }
.tel-text { font-size: 14px; line-height: 20px; }
.tel-text.estompat { color: var(--piatra); }
.tel-sigiliu { width: 40px; height: 40px; }
.tel-randuri { margin: 0; border-top: 1px solid var(--linie-n); }
.tel-randuri div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--linie-n); font-size: 14px; }
.tel-randuri dt { color: var(--piatra); }
.tel-randuri dd { margin: 0; font-weight: 500; text-align: right; }
.tel-adresa { background: var(--noapte-2); border-radius: 12px; padding: 14px; font: 11px/1.6 var(--mono); word-break: break-all; }

/* The safe copy on A4 and the specimen card, sized by their own width (container units). */
.a4 { container-type: inline-size; width: 100%; }
.a4-pagina { width: 100%; aspect-ratio: 210 / 297; background: #fff; position: relative; overflow: hidden; font-family: var(--aplicatie); color: #2a3336; }
.a4-carti { position: absolute; left: 14cqw; right: 14cqw; top: 13cqw; display: flex; flex-direction: column; gap: 7cqw; }
.a4-marcaj { position: absolute; left: -60%; top: -40%; width: 220%; height: 180%; transform: rotate(-27deg); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.a4-marcaj div { white-space: pre; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.02em; color: rgba(62, 66, 68, 0.55); text-shadow: 0 0 0.5cqw rgba(255, 255, 255, 0.95), 0 0 0.2cqw rgba(255, 255, 255, 0.95); }
.a4-eticheta { position: absolute; top: 5cqw; right: 5cqw; padding: 1.6cqw 3cqw; background: var(--noapte); color: #fff; font: 700 3.6cqw/1 var(--titlu); letter-spacing: 0.14em; }
.a4-banda { position: absolute; left: 7cqw; right: 7cqw; bottom: 6cqw; display: flex; gap: 3.5cqw; align-items: center; background: #fff; padding: 1.2cqw; color: var(--noapte); }
.a4-qr { width: 16cqw; height: 16cqw; flex: none; display: block; }
.a4-banda div { display: flex; flex-direction: column; gap: 0.8cqw; }
.a4-banda b { font: 700 2.8cqw/1.1 var(--titlu); }
.a4-banda span { font-size: 2cqw; line-height: 1.35; }
.carte { container-type: inline-size; width: 100%; aspect-ratio: 85.6 / 54; background: #e8edee; border-radius: 4.5% / 7.1%; position: relative; overflow: hidden; font-family: var(--aplicatie); color: #2a3336; border: 1px solid #c7d0d2; }
.carte dl { margin: 0; }
.carte dd { margin: 0; }
.carte-sus { position: absolute; left: 0; right: 0; top: 0; height: 12cqw; background: #d2dde0; display: flex; align-items: center; justify-content: space-between; padding: 0 5cqw; }
.carte-sus b { font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.08em; }
.carte-sus i { font-style: normal; font-size: 2.8cqw; font-weight: 700; letter-spacing: 0.1em; color: #7a8689; }
.carte-poza { position: absolute; left: 5cqw; top: 17cqw; width: 23cqw; height: 31cqw; border-radius: 1.6cqw; background: #bcc7ca; overflow: hidden; }
.carte-poza span { position: absolute; background: #a3b0b4; }
.carte-poza span:first-child { left: 5.5cqw; top: 4.5cqw; width: 12cqw; height: 12cqw; border-radius: 50%; }
.carte-poza span:last-child { left: 2.5cqw; top: 18.5cqw; width: 18cqw; height: 16cqw; border-radius: 9cqw 9cqw 0 0; }
.carte-campuri { position: absolute; left: 33cqw; top: 16cqw; right: 4cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3cqw; }
.carte-campuri .lat { grid-column: 1 / 3; }
.carte dt { font-size: 2.4cqw; color: #6b777a; }
.carte-campuri dd { font-size: 3.4cqw; font-weight: 600; line-height: 1.25; }
.carte-campuri dd.mare { font-size: 4cqw; font-weight: 700; }
.carte-campuri .ascuns { position: relative; }
.carte-campuri .ascuns::after { content: ""; position: absolute; left: -0.8cqw; right: -0.8cqw; bottom: -0.6cqw; height: 5cqw; background: #111; }
.carte-adresa { position: absolute; left: 5cqw; top: 6cqw; right: 5cqw; display: flex; flex-direction: column; gap: 1.4cqw; }
.carte-adresa dd { font-size: 3.4cqw; font-weight: 600; line-height: 1.3; }
.carte-adresa dt:nth-of-type(2) { margin-top: 1.5cqw; }
.carte-mrz { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; font: 4.3cqw/1.35 ui-monospace, "Roboto Mono", Menlo, monospace; letter-spacing: 0.02em; white-space: nowrap; }
.carte-mrz.ascuns::after { content: ""; position: absolute; inset: -1cqw; background: #111; }

/* ------------------------------------------------------------------ 01 why */
/* A plain copy beside a Colshare copy: one ruled row per fact; the Colshare column is the night panel. */
.fata-in-fata { display: flex; flex-direction: column; border-top: 1px solid var(--noapte); }
.ff-cap { display: none !important; }
.ff-rand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--linie-o); }
.ff-rand > b { font: 700 clamp(22px, 2.2vw, 30px)/1.05 var(--titlu); letter-spacing: -0.02em; }
.ff-rand > s { font-size: 16.5px; line-height: 1.45; color: var(--estompat); text-decoration-color: #b4ad9f; text-decoration-thickness: 1px; }
.ff-rand > span { display: flex; gap: 10px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; font-weight: 600; color: var(--noapte); }
.ff-rand > span svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--ocru-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ff-mic { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--estompat); display: inline-block; width: 100%; margin-bottom: 2px; }
.ff-rand > span .ff-mic { color: var(--ocru-text); }
@media (min-width: 900px) {
  .fata-in-fata { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr); border-top: 0; }
  .ff-cap, .ff-rand { display: contents !important; }
  .ff-cap > * { display: flex; align-items: flex-end; }
  .ff-cap > * { padding: 0 24px 16px; border-bottom: 1px solid var(--noapte); }
  .ff-cap > :first-child { padding-left: 0; }
  .ff-cap > :last-child { background: var(--noapte); padding-top: 22px; }
  .ff-rand > * { padding: 26px 24px; border-bottom: 1px solid var(--linie-o); display: flex; align-items: center; }
  .ff-rand > b { padding-left: 0; }
  .ff-rand > span { background: var(--noapte); color: var(--ovaz); border-bottom-color: var(--linie-n); }
  .ff-rand > span svg { stroke: var(--ocru); margin-top: 0; }
  .ff-rand:last-child > span { border-bottom-color: var(--noapte); }
  .ff-mic { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.anim .ff-rand[data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ 02 how, 05 the seal: a sticky column beside steps */
.grila-lipita { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); }
[data-pasi] .lipit-col { display: none; }
.linie-jos-n { border-bottom: 1px solid var(--linie-n); padding-bottom: 28px; }
.lipit-tel { position: sticky; top: 96px; height: calc(100vh - 120px); min-height: 720px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.bare-pas { display: flex; flex-direction: column; gap: 10px; }
.bare-pas i { width: 3px; height: 44px; background: var(--linie-n); transition: background 300ms; }
.bare-pas i.activ { background: var(--ocru); }
.pasi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pasi li { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px 0; transition: opacity 400ms; }
.pasi h3 { font: 700 clamp(30px, 3.4vw, 48px)/1 var(--titlu); letter-spacing: -0.025em; }
.pasi p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 40ch; color: var(--corp-h); }
.noapte .pasi p { color: var(--piatra-2); }
.cifra { font: 700 clamp(80px, 10vw, 150px)/0.8 var(--titlu); letter-spacing: -0.05em; color: var(--ocru); }
@media (min-width: 900px) {
  .grila-lipita { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-pasi] .lipit-col { display: block; }
  [data-pasi] .pasi li { min-height: 62vh; }
  html.js [data-pasi] .pasi li { opacity: 0.3; }
  html.js [data-pasi] .pasi li.activ { opacity: 1; }
}

/* The seal's four states side by side, each seal drawn in its own state. */
.viata { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.viata li { display: flex; flex-direction: column; gap: 12px; padding: 32px 0; border-top: 1px solid var(--linie-h); }
.viata-sigiliu { display: flex; align-items: center; justify-content: flex-start; height: 140px; margin-bottom: 12px; }
.ciclu { width: 132px; height: 132px; }
.viata h3 { font: 700 clamp(28px, 2.6vw, 38px)/1 var(--titlu); letter-spacing: -0.026em; }
.viata p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--corp-h); max-width: 42ch; text-wrap: pretty; }
.viata li:first-child { border-top: 0; }
/* Narrow: the seal small, beside its words. */
@media (max-width: 639px) {
  .viata li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px 18px; align-items: start; }
  .viata-sigiliu { grid-row: 1 / 4; height: auto; margin: 0; }
  .ciclu { width: 76px; height: 76px; }
}
@media (min-width: 640px) { .viata { grid-template-columns: repeat(2, minmax(0, 1fr)); } .viata li:nth-child(2) { border-top: 0; } }
@media (min-width: 1100px) {
  .viata { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .viata li { border-top: 0; border-left: 1px solid var(--linie-h); padding: 8px 0 8px 24px; }
  .viata li:first-child { border-left: 0; padding-left: 0; }
  .viata-sigiliu { height: 200px; }
  .ciclu { width: 176px; height: 176px; }
  .viata .eticheta { min-height: 3em; }
}

/* ------------------------------------------------------------------ 03 the copy */
.copia-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.note { display: flex; flex-direction: column; gap: 32px; }
.nota { display: flex; flex-direction: column; gap: 10px; }
.nota-linie { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; width: 100%; }
.nota-linie i { flex: 1; height: 1px; background: var(--noapte); }
.nota-linie b { width: 9px; height: 9px; border-radius: 50%; background: var(--ocru); border: 1.5px solid var(--noapte); flex: none; }
.nota h3 { font: 700 22px/1.1 var(--titlu); letter-spacing: -0.02em; }
.nota p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--corp-h); max-width: 30ch; }
.copia-foaie { margin: 0; perspective: 1400px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.foaie-3d { width: 100%; max-width: 400px; transform: rotate(-1.2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(20, 24, 26, 0.06), 0 30px 60px -10px rgba(20, 24, 26, 0.22); }
.copia-foaie .eticheta { font-size: 11px; }
@media (min-width: 900px) {
  .copia-grila { grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr); gap: 32px clamp(24px, 3vw, 48px); }
  .note { gap: clamp(40px, 8vw, 120px); }
  .nota.stanga { text-align: right; align-items: flex-end; }
  .nota.stanga .nota-linie { flex-direction: row; }
}

/* ------------------------------------------------------------------ 04 send */
.cifre { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--linie-n); border-bottom: 1px solid var(--linie-n); }
.cifre > div { display: flex; align-items: flex-end; gap: 16px; padding: 28px 24px 28px 0; }
.cifre > div + div { border-top: 1px solid var(--linie-n); }
.cifre > div > span:last-child { font-size: 17px; line-height: 1.35; padding-bottom: 6px; max-width: 12ch; }
.cifra-mare { font: 700 clamp(96px, 12vw, 180px)/0.78 var(--titlu); letter-spacing: -0.06em; }
@media (min-width: 900px) {
  .cifre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifre > div + div { border-top: 0; border-left: 1px solid var(--linie-n); padding-left: 24px; }
}
.destinatar { margin: 0; display: flex; flex-direction: column; gap: 14px; perspective: 1600px; align-items: center; text-align: center; }
.destinatar .eticheta { font-size: 11px; }
.browser { background: var(--hartie); color: var(--noapte); border: 1px solid var(--contur-n); overflow: hidden; max-width: 560px; width: 100%; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7); text-align: left; }
.browser-bara { height: 40px; background: var(--ovaz-adanc); display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.browser-bara i { width: 10px; height: 10px; border-radius: 50%; background: #c4bdaf; flex: none; }
.browser-bara span { margin-left: 12px; background: var(--hartie); border-radius: 6px; padding: 5px 12px; font: 10px var(--mono); color: var(--estompat); white-space: nowrap; }
.browser-pagina { padding: 28px clamp(20px, 4vw, 40px) 32px; font-family: var(--aplicatie); min-height: 420px; }
.browser-sus { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; margin-bottom: 18px; }
.dest-sigiliu { width: 64px; height: 64px; flex: none; transition: opacity 120ms; }
[data-deschis="0"] .dest-sigiliu { opacity: 0; }
[data-deschis="1"] .dest-sigiliu .jum { transition-delay: 80ms; }
[data-deschis="0"] .dupa, [data-deschis="1"] .inainte { display: none; }
.inainte, .dupa { display: flex; flex-direction: column; gap: 18px; }
.browser h3 { font: 700 30px/1.02 var(--titlu); letter-spacing: -0.026em; }
.browser p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--corp-h); }
.browser .dest-nota { border-left: 2px solid var(--noapte); padding: 2px 0 2px 14px; font-size: 15.5px; line-height: 22px; }
.browser .dest-banda { background: var(--ovaz); padding: 10px 14px; font-size: 14px; color: var(--noapte); }
.dest-fisiere { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-h); }
.dest-fisiere li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linie-h); font-size: 14.5px; font-weight: 500; }
.dest-fisiere span { min-width: 0; overflow-wrap: anywhere; }
.dest-fisiere i { font: normal 9.5px var(--mono); color: var(--ocru-text); text-decoration: underline; }
.dest-buton { background: var(--noapte); color: var(--ovaz); border: 1px solid var(--noapte); border-radius: 14px; min-height: 52px; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform 140ms, background 140ms; }
.dest-buton:hover { background: var(--linie-n); }
.dest-buton:active { transform: scale(0.98); }
.dest-buton.contur { background: transparent; color: var(--noapte); }
.dest-buton.contur:hover { background: var(--ovaz); }

/* ------------------------------------------------------------------ 06 ask */
.doua-cer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 900px) { .doua-cer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 88px); } }
.cer-stanga { display: flex; flex-direction: column; gap: 32px; }
/* The kits by country: one ruled row per country, its uses as square toggles. */
.truse { display: flex; flex-direction: column; border-top: 1px solid var(--noapte); }
.truse-tara { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--linie-o); }
.truse-butoane { display: flex; flex-wrap: wrap; gap: 8px; }
.truse button { min-height: 44px; padding: 0 16px; border: 1px solid var(--linie-o); background: var(--hartie); color: var(--noapte); font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.truse button:hover { border-color: var(--noapte); }
.truse button[aria-pressed="true"] { background: var(--noapte); border-color: var(--noapte); color: var(--ovaz); }
html.anim .cer-linii li { animation: rand-in 420ms var(--usor) both; animation-delay: var(--d, 0ms); }
@keyframes rand-in { from { opacity: 0; transform: translateY(6px); } }
.cer-card { background: var(--noapte); color: var(--ovaz); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; box-shadow: 0 30px 60px rgba(18, 19, 19, 0.25); }
@media (min-width: 900px) { .cer-card { position: sticky; top: 110px; } }
.cer-sus { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cer-sus .eticheta { font-size: 11px; }
.cer-titlu { font: 700 clamp(26px, 2.6vw, 34px)/1.02 var(--titlu); letter-spacing: -0.026em; }
.cer-linii { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-n); min-height: 250px; font-family: var(--aplicatie); }
.cer-linii li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--linie-n); font-size: 15.5px; line-height: 1.45; }
.cer-linii li > span:first-child { font: 10px var(--mono); color: var(--ocru); padding-top: 4px; }
.cer-buton { background: var(--ocru); color: var(--noapte); border-radius: 14px; min-height: 52px; display: flex; align-items: center; justify-content: center; font: 600 16px var(--aplicatie); }
.cer-nota { font-size: 13.5px; line-height: 1.45; color: var(--piatra); }

/* ------------------------------------------------------------------ 07 black out */
.comutator-rand { border-top: 1px solid var(--linie-n); margin-top: 8px; }
.comutator-rand button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 0; border: 0; border-bottom: 1px solid var(--linie-n); background: transparent; color: var(--ovaz); font-size: 17px; text-align: left; cursor: pointer; }
.comutator-rand i::after { top: 3px; left: 3px; width: 22px; height: 22px; }
.comutator-rand [aria-checked="true"] i { background: var(--ocru); }
.comutator-rand [aria-checked="true"] i::after { left: 21px; background: var(--noapte); }
.extras-loc { margin: 0; perspective: 1400px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.extras-loc .eticheta { font-size: 11px; }
.extras { width: 100%; max-width: 500px; background: var(--hartie); color: var(--noapte); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; font-family: var(--aplicatie); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7); transform: rotate(-1deg); text-align: left; }
.extras-sus { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--noapte); padding-bottom: 12px; }
.extras-sus b { font-size: 17px; }
.extras-sus .mono { font-size: 10px; color: var(--estompat); }
.extras-date { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.extras-date div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.extras-date dt { color: var(--estompat); }
.extras-date dd { margin: 0; }
.extras-date dd.mono { font-size: clamp(10.5px, 3vw, 12.5px); }
.ascunde { position: relative; display: inline-block; justify-self: start; }
.bara { position: absolute; inset: -2px -4px; background: #111; transform-origin: 0 50%; transition: transform 600ms var(--usor) var(--d, 0ms); }
html.anim [data-extras]:not(.vazut) .bara:not(.tx) { transform: scaleX(0); }
.bara.tx { inset: -3px -4px; transform: scaleX(0); transition-duration: 500ms; }
.tx-on .bara.tx { transform: scaleX(1); }
.extras-tx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-h); font-size: 14px; }
.extras-tx li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie-h); align-items: center; }
.extras-tx li > span:first-child { font-size: 10.5px; color: var(--estompat); }
.extras-tx li > span:last-child { font-size: 12px; }
.extras-total { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
@media (min-width: 900px) {
  .extras-date div { grid-template-columns: 90px minmax(0, 1fr); }
  .extras-tx li { grid-template-columns: 54px minmax(0, 1fr) auto; }
}

/* ------------------------------------------------------------------ 08 proof */
.dovada-grila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .dovada-grila { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.qr-placa { background: #fff; border: 1px solid var(--linie-h); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-decoration: none; text-align: center; }
.qr-placa .eticheta { font-size: 11px; }
.qr { width: min(100%, 220px); height: auto; aspect-ratio: 1; display: block; }
.verdict { background: var(--noapte); color: var(--ovaz); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.verdict-file { display: flex; flex-wrap: wrap; border: 1px solid var(--contur-n); width: max-content; max-width: 100%; }
.verdict-file button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--ovaz); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 200ms, color 200ms; }
.verdict-file button[aria-pressed="true"] { background: var(--ovaz); color: var(--noapte); }
.verdict-un { display: flex; flex-direction: column; gap: 22px; }
.verdict-titlu { display: flex; align-items: center; gap: 14px; }
.verdict-titlu i { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ocru); }
.rau .verdict-titlu i { background: var(--rau); }
.nimic .verdict-titlu i { background: var(--gri); }
.verdict-titlu b { font: 700 clamp(28px, 3vw, 40px)/1 var(--titlu); letter-spacing: -0.026em; }
.verdict-randuri { margin: 0; border-top: 1px solid var(--linie-n); font-family: var(--aplicatie); }
.verdict-randuri div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linie-n); font-size: 15.5px; }
.verdict-randuri dt { font: 10.5px var(--mono); color: var(--piatra); padding-top: 3px; }
.verdict-randuri dd { margin: 0; }
.rau .fisier { color: var(--rau); }
.nimic .fisier { color: var(--piatra); }
@media (min-width: 900px) { .verdict-randuri div { grid-template-columns: 120px minmax(0, 1fr); } }

/* ------------------------------------------------------------------ 09 also in the app */
.placi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.placa { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; min-height: 300px; }
.placa.noapte { background: var(--noapte); color: var(--ovaz); }
.placa.hartie { background: var(--hartie); border: 1px solid var(--linie-h); }
.placa.ocru-plin { background: var(--ocru); color: var(--noapte); }
.placa.lata { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; align-items: center; }
.placa .eticheta { font-size: 10.5px; }
.placa-h { font: 700 clamp(24px, 2.2vw, 30px)/1.02 var(--titlu); letter-spacing: -0.025em; }
.placa-h.mare { font-size: clamp(26px, 2.6vw, 36px); }
.placa p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--corp-h); }
.placa.noapte p { font-size: 16px; line-height: 1.55; color: var(--piatra-2); max-width: 40ch; }
.placa.ocru-plin p { font-size: 16px; line-height: 1.55; color: var(--noapte); max-width: 40ch; }
.jos-auto { margin-top: auto; }
.mrz { position: relative; background: var(--noapte-2); padding: 22px 18px; overflow: hidden; font: clamp(10px, 2.7vw, 13px)/2 var(--mono); letter-spacing: 0.06em; white-space: nowrap; }
.mrz i { font-style: normal; color: var(--noapte); background: var(--ocru); }
.mrz .eticheta { display: block; margin-top: 12px; font-size: 11px; letter-spacing: 0.02em; white-space: normal; }
@media (min-width: 900px) { .mrz { font-size: clamp(9px, 0.98vw, 13px); letter-spacing: 0.03em; } }
/* The scan line passes twice when the tile comes into view, then it is gone. */
.scan-linie { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ocru); box-shadow: 0 0 18px 4px rgba(226, 165, 43, 0.45); opacity: 0; }
html.anim .in .scan-linie { animation: scan 2.2s linear 400ms 2 both; }
@keyframes scan { from { top: 0; opacity: 1; } 92% { opacity: 1; } to { top: 100%; opacity: 0; } }
.campuri { display: flex; flex-direction: column; gap: 10px; font-family: var(--aplicatie); }
.campuri div { display: flex; flex-direction: column; gap: 2px; }
.campuri span { font-size: 11px; color: var(--estompat); }
.campuri b { border-bottom: 1.5px solid var(--noapte); padding: 3px 0; font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; }
.campuri i { font-style: normal; color: var(--ocru-text); }
.rezerva { background: var(--noapte); color: var(--ovaz); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.rezerva .eticheta { font-size: 11px; }
.parola { font: 500 clamp(15px, 4.6vw, 22px) var(--mono); letter-spacing: 0.18em; color: var(--ocru); min-height: 30px; white-space: nowrap; overflow: hidden; }
.rezerva > i { height: 1px; background: var(--linie-n); }
.rezerva .mono { font-size: 11px; }
.cod-siguranta { font: 500 clamp(20px, 2.2vw, 28px) var(--mono); letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .placi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .placa.lata { grid-column: span 2; }
  .placi.fara-oameni .placa.ocru-plin { grid-column: span 3; }
}

/* ------------------------------------------------------------------ 10 privacy */
.adresa-banda { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--linie-n); border-bottom: 1px solid var(--linie-n); padding: 28px 0; }
.adresa { font: clamp(15px, 2.6vw, 34px)/1.3 var(--mono); letter-spacing: -0.01em; display: flex; flex-wrap: wrap; word-break: break-all; }
.legenda { display: flex; gap: 12px 32px; flex-wrap: wrap; font: 10.5px var(--mono); }
.doua-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px 64px; }
.lista-mare .eticheta { display: block; font-size: 10.5px; padding-bottom: 14px; }
.lista-mare ul { list-style: none; margin: 0; padding: 0; }
.lista-mare li { font: 700 clamp(22px, 2.4vw, 32px)/1.15 var(--titlu); letter-spacing: -0.02em; padding: 16px 0; border-top: 1px solid var(--linie-n); }
.lista-mare li:last-child { border-bottom: 1px solid var(--linie-n); }
.nu-vede li { color: var(--ocru); display: flex; align-items: baseline; gap: 14px; }
.nu-vede li::before { content: ""; flex: none; width: 22px; height: 0.62em; background: #000; box-shadow: 0 0 0 1px var(--linie-n); transform: translateY(-0.05em); }
.nu-banda { display: flex; gap: 10px 28px; flex-wrap: wrap; font: 11px var(--mono); color: var(--ovaz); }
.nu-banda i { font-style: normal; color: var(--estompat); }

/* ------------------------------------------------------------------ 11 pricing */
.segment { display: flex; border: 1px solid var(--noapte); }
.segment button { min-height: 48px; padding: 0 20px; border: 0; background: transparent; color: var(--noapte); font-size: 15px; font-weight: 600; cursor: pointer; transition: background 200ms, color 200ms; }
.segment button[aria-pressed="true"] { background: var(--noapte); color: var(--ovaz); }
.planuri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); border: 1px solid var(--noapte); }
.plan { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; }
.plan.noapte { background: var(--noapte); color: var(--ovaz); }
.plan-sus { position: relative; display: flex; flex-direction: column; gap: 6px; }
.plan .eticheta { font-size: 10.5px; }
.pret { font: 700 clamp(64px, 8vw, 112px)/0.85 var(--titlu); letter-spacing: -0.05em; }
.pret-rand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pe, .pret-nota { color: var(--piatra); }
.pe { font-size: 17px; }
.pret-nota { font-size: 14.5px; min-height: 20px; }
.plan ul { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--noapte); }
.plan.noapte ul { border-top-color: var(--ovaz); }
.plan li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--linie-o); font-size: 16px; }
.plan.noapte li { border-bottom-color: var(--linie-n); }
.plan li b { font-weight: 600; text-align: right; }
.plan-nota { margin: -12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--corp-h); }
.plan-sigiliu { position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; opacity: 0.16; pointer-events: none; }

/* ------------------------------------------------------------------ 12 questions */
.doua-intr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 80px; align-items: start; }
.intr-titlu { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .intr-titlu { position: sticky; top: 110px; } }
.faq { border-top: 1px solid var(--noapte); }
.faq details { border-bottom: 1px solid var(--linie-h); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 22px 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { font-size: 10.5px; font-weight: 400; color: var(--ocru-text); }
.faq summary i { font-style: normal; font-size: 26px; font-weight: 400; justify-self: end; transition: transform 200ms; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px 52px; font-size: 16px; line-height: 1.6; color: var(--corp-h); max-width: 58ch; }

/* ------------------------------------------------------------------ 13 get the app */
.ia { padding-bottom: clamp(40px, 5vw, 64px); }
.ia .titlu-bloc { gap: 28px; }
.ia-h { font-size: clamp(44px, 6vw, 88px); line-height: 0.94; letter-spacing: -0.033em; max-width: 11ch; }
.ia .eticheta { font-size: 10.5px; }
.sigiliu-final { display: flex; justify-content: center; }
.final { width: min(100%, 420px); height: auto; aspect-ratio: 1; }
.final .jum { transition-duration: 420ms; }

/* ------------------------------------------------------------------ footer */
.subsol { background: var(--noapte); color: var(--piatra); overflow: hidden; }
.subsol > .cadru:first-child { padding-top: 40px; padding-bottom: 0; }
.subsol-coloane { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 48px; font-size: 15px; border-top: 1px solid var(--linie-n); padding-top: 32px; }
.subsol-coloane > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.subsol-coloane a { text-decoration: none; overflow-wrap: anywhere; }
.subsol-coloane .eticheta { font-size: 11px; }
.limbi { display: flex; gap: 14px; }
.subsol-marca { margin: 40px 0 -1.6%; color: var(--ovaz); }
.subsol-marca svg { width: 100%; height: auto; }
.subsol-jos { position: relative; background: var(--noapte); padding-top: 16px; padding-bottom: 24px; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font: 10.5px var(--mono); }
.subsol-jos .firma { flex-basis: 100%; font: 12.5px/1.5 var(--text); color: var(--piatra); }

/* Reduced motion: every animated thing in its final state (the script also skips its loop, typing and scrambles). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  .scan-linie { display: none; }
}
.cer-pagina { font-size: 14.5px; color: var(--ovaz); text-decoration-color: var(--contur-n); align-self: flex-start; }
.cer-pagina:hover { text-decoration-color: var(--ocru); }