@import url("/css/tokens.css");
/* Zender - stil comun pentru toate paginile (directia "Cherry Soda").
   Paleta: ink / cream / cherry + culori deschise (butter, mint, lilac, blush)
   folosite DOAR cu text inchis (ink), niciodata cu text alb.
   Font self-hosted (fara Google Fonts CDN): Archivo variabil - titluri mari 900
   condensat in majuscule, titluri mici/butoane 700-800, text 400/500, italic accente. */

/* Archivo (OFL), variabil: wght 100-900, wdth 62-125. Un singur font pe tot site-ul:
   titluri mari 900 condensat (62%) in majuscule, titluri mici/butoane 700-800 la 100%,
   text 400/500 la 100%, italic pentru accente. latin-ext acopera ă â î ș ț. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-var-latin-ext.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: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-var-latin.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: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-var-italic-latin-ext.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: "Archivo"; font-style: italic; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url(/fonts/archivo-var-italic-latin.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 {
  /* tokens.css (importat mai sus) defineste paleta, tipografia, motion si alias-urile
     vechi (--ink, --cherry, --wa etc.). Aici raman doar alias-urile care lipsesc acolo. */
  --ok-bg: var(--z-ok-bg); --ok-ink: var(--z-ok-ink); --warn-bg: var(--z-warn-bg); --warn-ink: var(--z-warn-ink);
  --err-bg: var(--z-err-bg); --err-ink: var(--z-err-ink);
  --plum: var(--p-plum-900); /* ink fix, nu se inverseaza in dark */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--z-bg); color: var(--z-text); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 12px; }
h1 { font-size: clamp(40px, 11vw, 64px); }
h2 { font-size: clamp(32px, 8.8vw, 52px); }
h3 { font-size: 20px; letter-spacing: -.01em; }
/* titluri mari: Archivo 900 condensat, majuscule (h3, intrebari, butoane raman la 100%, fara majuscule) */
h1, h2 { font-weight: 900; line-height: var(--lh-poster); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); }
p { margin: 0 0 14px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
em.s { font-family: var(--serif); font-style: italic; } /* Archivo italic, mosteneste greutatea/latimea titlului */
:focus-visible { outline: 3px solid var(--z-focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 720px; margin: 0 auto; }
.eyebrow { display: inline-block; font: 700 12px/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--z-cherry-text); margin-bottom: 12px; }
.muted { color: var(--z-text-muted); }
.small { font-size: 14px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 246, 236, .88); background: color-mix(in srgb, var(--z-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--z-text); }
/* logo 1F (launch-audit/landing-v2/logo-final): inimi cireasa fixe, wordmark = currentColor */
.logo svg { display: block; height: 28px; width: auto; }
.mini-cta { font: 700 14px/1 var(--body); background: var(--plum); color: #fff; text-decoration: none; padding: 11px 16px; border-radius: 999px; }

/* ---------- butoane ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 15px 22px; border-radius: 999px; border: 0; font: 800 18px/1.15 var(--display); text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-main { background: var(--z-cherry); color: var(--z-on-cherry); box-shadow: var(--sh-cta); }
.btn-main:hover:not([disabled]) { background: var(--cherry-deep); }
.btn-ink { background: var(--z-surface-inv); color: var(--z-text-on-inv); }
.btn-ghost { background: transparent; color: var(--z-text); border: 2px solid var(--z-text); }
.btn-soft { background: var(--z-surface); color: var(--z-text); border: 1px solid var(--z-line-strong); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 15px; width: auto; }
.btn-row { display: grid; gap: 10px; }
.btn-row.two { grid-template-columns: 1fr 1fr; }
.link-btn { background: none; border: 0; padding: 6px 0; color: var(--z-cherry-text); font: 700 15px var(--body); text-decoration: underline; cursor: pointer; }

.micro { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.micro span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cherry); margin-right: 6px; vertical-align: 2px; }

/* ---------- landing ---------- */
.landing section { padding: 56px 0; }
.landing section.tight { padding-top: 0; }
.hero { padding: 20px 0 40px !important; }
.hero-grid { display: grid; gap: 28px; }
.hero h1 { font-size: clamp(44px, 13vw, 84px); margin-bottom: 14px; }
.hero h1 em.s { color: var(--cherry); }
.hero .lead { font-size: 17.5px; color: #3A2E3E; max-width: 36ch; margin-bottom: 0; }
.hero .cta-box { margin-top: 18px; }
.price-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.price-line b { font: 900 38px/1 var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); }
.price-line span { color: var(--text-2); font-size: 15px; }
.phone-stage { position: relative; display: flex; justify-content: center; padding: 10px 0 6px; }
.story { width: 250px; aspect-ratio: 9 / 16; border-radius: 30px; background: radial-gradient(120% 60% at 90% 0%, #FF5F86 0, transparent 60%), var(--cherry); color: #fff; padding: 26px 18px 18px; box-shadow: var(--shadow); transform: rotate(-3deg); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.story .wm { font: 800 20px/1 var(--display); letter-spacing: -.03em; }
.story .sub { font-size: 8.5px; letter-spacing: .14em; margin-top: 8px; }
.story .names { font: 900 30px/.92 var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); margin: 16px 0 10px; }
.story .score { width: 112px; height: 112px; border-radius: 50%; background: var(--butter); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 900 54px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); transform: rotate(-6deg); }
.story .score sup { font-size: 22px; align-self: flex-start; margin-top: 30px; }
.story .lbl { font: 800 15px/1.1 var(--display); margin: 14px 0 10px; }
.story .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.story .chip { background: var(--ink-2); border-radius: 12px; padding: 7px 8px; text-align: left; font-size: 9px; }
.story .chip b { display: block; font: 800 15px/1.1 var(--display); }
.story .foot { margin-top: auto; font-size: 10px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.story .foot i { font-style: normal; background: #fff; color: var(--ink); padding: 4px 8px; border-radius: 999px; }
.example-tag { position: absolute; top: 0; right: 8%; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 6px 9px; border-radius: 999px; transform: rotate(4deg); z-index: 2; }
.sticker { position: absolute; font: 700 13px/1.2 var(--body); background: #fff; color: var(--ink); padding: 10px 12px; border-radius: 16px; box-shadow: var(--shadow); }
.sticker.s1 { left: 0; top: 30%; transform: rotate(-7deg); }
.sticker.s2 { right: 3%; bottom: 12%; transform: rotate(6deg); background: var(--butter); }

.ticker { background: var(--ink); color: var(--cream); overflow: hidden; white-space: nowrap; padding: 14px 0; font: 800 18px/1 var(--display); }
.ticker .track { display: inline-block; animation: scroll 32s linear infinite; }
.ticker span { margin: 0 18px; }
.ticker span:nth-child(odd) { color: var(--butter); }
@keyframes scroll { to { transform: translateX(-50%); } }

.steps { display: grid; gap: 14px; margin-top: 22px; counter-reset: s; }
.step { background: var(--paper); border-radius: var(--r-lg); padding: 22px 20px 20px 70px; position: relative; border: 1px solid var(--line); }
.step::before { counter-increment: s; content: counter(s); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--blush); color: var(--cherry-deep); display: grid; place-items: center; font: 800 18px/1 var(--display); }
.step:nth-child(2)::before { background: var(--butter); color: var(--ink); }
.step:nth-child(3)::before { background: var(--mint); color: var(--ink); }
.step p { margin: 0; color: var(--text-2); }

.preview { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: 24px 16px; margin-top: 22px; }
.pv-row { display: grid; gap: 12px; }
.pv { background: var(--ink-2); border-radius: var(--r-lg); padding: 18px; }
.pv h3 { color: #fff; margin-bottom: 6px; }
.pv p { color: rgba(255, 255, 255, .8); font-size: 15px; margin: 0; }
.pv .tag { display: inline-block; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; margin-bottom: 10px; color: var(--ink); }
.pv .row { font-size: 14px; display: flex; justify-content: space-between; margin-top: 8px; }
.bar { height: 10px; background: rgba(255, 255, 255, .12); border-radius: 10px; margin: 6px 0 2px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 10px; }
.blurred { position: relative; }
.blurred p { filter: blur(5px); user-select: none; }
.blurred .lock { position: absolute; inset: auto 0 14px 0; text-align: center; font: 700 13px/1 var(--body); color: var(--butter); }
.preview-note { color: rgba(255, 255, 255, .7); font-size: 13px; margin: 14px 4px 0; }

.duel-demo { background: var(--blush); border-radius: var(--r-xl); padding: 26px 20px; margin-top: 22px; text-align: center; }
.duel-demo .q { font: 800 24px/1.15 var(--display); margin: 6px 0 18px; }
.duel-demo .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duel-demo button { min-height: 84px; border-radius: var(--r-lg); border: 2px solid var(--ink); background: #fff; font: 800 20px/1.1 var(--display); color: var(--ink); cursor: pointer; transition: transform .15s, background .15s; }
.duel-demo button:active { transform: scale(.96); }
.duel-demo button.on { background: var(--ink); color: #fff; }
.duel-demo .res { min-height: 48px; margin-top: 14px; font-size: 15px; color: var(--text-2); }

.privacy-grid { display: grid; gap: 12px; margin-top: 20px; }
.pcard { background: var(--paper); border-radius: var(--r-lg); padding: 20px; border: 1px solid var(--line); }
.pcard h3 { margin-bottom: 6px; }
.pcard p { margin: 0; color: var(--text-2); font-size: 15px; }
.pcard .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: var(--mint); font-size: 20px; }

.price-card { background: var(--paper); border-radius: var(--r-xl); padding: 30px 22px 24px; box-shadow: var(--shadow); border: 2px solid var(--ink); position: relative; margin-top: 22px; }
.price-card .ribbon { position: absolute; top: -14px; left: 22px; background: var(--butter); font: 800 13px/1 var(--display); padding: 8px 12px; border-radius: 999px; border: 2px solid var(--ink); }
.price-card .amt { font: 900 76px/1 var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); }
.price-card .amt small { font: 700 18px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); margin-left: 6px; }
.price-card .per { color: var(--muted); margin: 6px 0 18px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cherry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.pay-note { text-align: center; margin-top: 12px; font-size: 13px; color: var(--muted); }

details.faq { background: var(--paper); border-radius: var(--r-md); border: 1px solid var(--line); margin-bottom: 10px; }
details.faq summary { list-style: none; cursor: pointer; padding: 18px 48px 18px 18px; font: 700 16.5px/1.3 var(--body); position: relative; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 800 24px/1 var(--display); color: var(--cherry-deep); }
details.faq[open] summary::after { content: "–"; }
details.faq p { padding: 0 18px 18px; margin: 0; color: var(--text-2); }

.final { background: var(--cherry-deep); color: #fff; text-align: center; border-radius: var(--r-xl); padding: 40px 22px; }
.final h2 { color: #fff; }
.final .btn { background: #fff; color: var(--ink); margin-top: 10px; }

.sticky { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30; transform: translateY(160%); transition: transform .3s ease; }
.sticky.show { transform: none; }
.sticky .btn { box-shadow: 0 18px 30px -10px rgba(28, 18, 32, .5); }
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ---------- pagini de flux (quiz, checkout, success, raport) ---------- */
.shell { max-width: 560px; margin: 0 auto; padding: 8px 16px 40px; }
.card { background: var(--z-surface); border-radius: var(--r-lg); padding: 24px 20px; border: 1px solid var(--z-line); box-shadow: var(--sh-1); margin-bottom: 16px; }
.card h2 { font-size: clamp(30px, 8.4vw, 40px); }
.card > p:last-child { margin-bottom: 0; }
.badge { display: inline-block; font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--blush); color: var(--cherry-deep); padding: 7px 10px; border-radius: 999px; margin-bottom: 14px; }
.badge.ink { background: var(--z-surface-inv); color: var(--z-text-on-inv); }
.badge.mint { background: var(--mint); color: var(--z-on-pastel); }
.badge { color: var(--p-cherry-700); }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.field .hint { font-size: 13.5px; color: var(--z-text-muted); margin-top: 6px; }
.input { width: 100%; height: 54px; border-radius: var(--r-md); border: 2px solid var(--z-line-strong); background: var(--z-surface); padding: 0 16px; font: 500 17px var(--body); color: var(--z-text); transition: border-color .15s; }
.input:focus { outline: none; border-color: var(--z-text); }
textarea.input { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; line-height: 1.45; }
.input[aria-invalid="true"] { border-color: var(--z-cherry); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r-md); background: var(--z-surface-2); border: 2px solid transparent; margin-bottom: 10px; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--z-text-2); }
.check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cherry); cursor: pointer; }
.check.invalid { border-color: var(--z-cherry); }
.check a { color: var(--z-text); font-weight: 700; }
.field-error { color: var(--err-ink); font-size: 14px; font-weight: 700; margin: -4px 0 12px; }

.notice { border-radius: var(--r-md); padding: 14px 16px; font-size: 15px; margin-bottom: 16px; }
.notice.info { background: var(--blush); color: var(--z-on-pastel); }
.notice.info a, .notice.info .link-btn { color: var(--z-on-pastel); }
.notice.ok { background: var(--ok-bg); color: var(--ok-ink); }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.err { background: var(--err-bg); color: var(--err-ink); }
.notice strong { display: block; margin-bottom: 2px; }
.notice .link-btn { padding: 0; }
.mock-badge { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }

.loader-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 12px; gap: 16px; }
.loader-wrap p { color: var(--z-text-2); max-width: 32ch; margin: 0; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--z-track); border-top-color: var(--z-cherry); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.linkbox { display: flex; gap: 8px; align-items: stretch; margin: 8px 0 6px; }
.linkbox input { flex: 1; min-width: 0; height: 50px; border-radius: var(--r-md); border: 2px solid var(--z-line-strong); background: var(--z-surface-2); padding: 0 12px; font: 500 14px var(--body); color: var(--z-text); }
.linkbox .btn { width: auto; min-height: 50px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.copied { color: var(--z-text-2); font-weight: 700; font-size: 14px; min-height: 20px; }

.recap { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.recap li { padding-left: 30px; position: relative; color: var(--text-2); }
.recap li b { color: var(--ink); }
.recap li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' stroke='%231C1220' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.price-box { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); padding: 14px 0; margin: 4px 0 18px; }
.price-box .amount { font: 900 56px/1 var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); }
.price-box .unit { color: var(--muted); font-size: 14px; text-align: right; }
.teaser { background: var(--plum); color: #fff; border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.teaser .sc { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: var(--butter); color: var(--ink); display: grid; place-items: center; font: 900 27px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); transform: rotate(-6deg); }
.teaser b { font: 800 19px/1.15 var(--display); display: block; }
.teaser span { color: rgba(255, 255, 255, .78); font-size: 14px; }

/* ---------- asteptare (success, raport) ---------- */
.wait-steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; text-align: left; }
.wait-steps li { padding: 10px 14px; border-radius: var(--r-sm); background: var(--z-surface-2); font-size: 14.5px; color: var(--z-text-2); }
.wait-steps li.done { background: var(--ok-bg); color: var(--ok-ink); font-weight: 700; }
.wait-steps li.now { background: var(--butter); color: var(--z-on-pastel); font-weight: 700; }

/* ---------- pagini legale ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; }
.legal h1 { font-size: clamp(40px, 11vw, 60px); margin-top: 8px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.legal h2 { font-size: 21px; font-weight: 800; font-stretch: 100%; text-transform: none; line-height: 1.2; margin: 30px 0 10px; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--text-2); font-size: 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--cherry-deep); font-weight: 700; }
.legal .box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; margin: 12px 0; }
.legal .box p:last-child { margin-bottom: 0; }
.legal .toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; }
.legal .toc a { color: var(--ink); font-weight: 500; }

/* ---------- footer comun ---------- */
.site-foot { background: var(--plum); color: rgba(255, 255, 255, .78); padding: 36px 0 110px; font-size: 13.5px; line-height: 1.6; margin-top: 40px; }
.site-foot .logo { color: var(--p-cream-50); }
.site-foot p { margin: 0 0 12px; }
.site-foot a { color: #fff; }
.foot-grid { display: grid; gap: 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 700; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-anpc { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-anpc a { display: inline-block; background: #fff; color: var(--plum); text-decoration: none; font: 700 12.5px/1.2 var(--body); padding: 8px 12px; border-radius: 8px; }
.foot-company { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.page-flow .site-foot { padding-bottom: 40px; }

/* ---------- admin ---------- */
.shell-admin { max-width: 1100px; margin: 0 auto; padding: 8px 16px 48px; }
.admin-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--r-md); overflow: hidden; font-size: 13.5px; border: 1px solid var(--line); }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { background: var(--ink); color: #fff; font: 700 12px/1.2 var(--body); text-transform: uppercase; letter-spacing: .05em; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill.yes { background: var(--ok-bg); color: var(--ok-ink); }
.pill.no { background: var(--warn-bg); color: var(--warn-ink); }
.pill.bad { background: var(--err-bg); color: var(--err-ink); }
.token-form { display: flex; gap: 8px; }
.token-form .input { height: 48px; }
.token-form .btn { width: auto; min-height: 48px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .ticker .track { animation: none; }
}

/* ---------- desktop ---------- */
@media (min-width: 880px) {
  .landing section { padding: 88px 0; }
  .hero { padding: 48px 0 72px !important; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .hero .cta-box { max-width: 440px; }
  .hero .micro { justify-content: flex-start; }
  .story { width: 300px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .pv-row { grid-template-columns: repeat(2, 1fr); }
  .preview { padding: 28px; }
  .privacy-grid { grid-template-columns: repeat(3, 1fr); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .sticky { display: none; }
  .foot-grid { grid-template-columns: 1.1fr 1.4fr; column-gap: 48px; }
  .site-foot { padding-bottom: 48px; }
  .shell { padding-top: 24px; }
  .card { padding: 30px 28px; }
}
@media (max-width: 360px) {
  .btn-row.two { grid-template-columns: 1fr; }
}

/* =====================================================================
   v4 - componente noi (caseta evidentiata, footer SAL, consimtamant, quiz, raport)
   Culorile vin din tokens.css. Pe pasteluri text doar --z-on-pastel.
   ===================================================================== */

/* ---------- caseta evidentiata (ex. "Partenerul nu plateste") ---------- */
.guarantee { display: flex; gap: 12px; align-items: flex-start; background: var(--p-mint-200); color: var(--z-on-pastel); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 14px; font-size: 15px; line-height: 1.4; text-align: left; }
.guarantee svg { flex: 0 0 auto; margin-top: 1px; }
.guarantee b { display: block; font: 800 16.5px/1.25 var(--display); }
.guarantee a { color: var(--z-on-pastel); font-weight: 700; }
.price-sub { color: var(--z-text-2); font-size: 14.5px; margin: 4px 0 0; }

/* ---------- footer: ANPC + pictograma SAL ---------- */
.foot-anpc { align-items: center; }
.foot-anpc a.sal { display: inline-block; background: transparent; padding: 0; border-radius: 6px; line-height: 0; }
.foot-anpc a.sal img { width: 201px; height: 50px; border-radius: 6px; }
.foot-links button.cookie-link { background: none; border: 0; padding: 0; color: #fff; font: 700 13.5px/1.6 var(--body); cursor: pointer; }
.foot-links button.cookie-link:hover { text-decoration: underline; }

/* ---------- banner consimtamant ---------- */
.consent { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; max-width: 560px; margin: 0 auto; background: var(--p-white); color: var(--p-plum-900); border: 2px solid var(--p-plum-900); border-radius: var(--r-lg); box-shadow: 3px 4px 0 var(--p-plum-900), var(--sh-2); padding: 16px; font-size: 14.5px; line-height: 1.45; max-height: calc(100dvh - 24px); overflow-y: auto; }
.consent h2 { font: 800 19px/1.2 var(--display); text-transform: none; letter-spacing: -.01em; margin: 0 0 6px; color: var(--p-plum-900); }
.consent p { margin: 0 0 12px; color: var(--p-plum-600); }
.consent a { color: var(--p-plum-900); font-weight: 700; }
.consent .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.consent .btn { min-height: 48px; font-size: 16px; padding: 10px 14px; }
.consent .btn-eq { background: var(--p-plum-900); color: #fff; }
.consent .btn-set { grid-column: 1 / -1; background: transparent; color: var(--p-plum-900); border: 2px solid var(--p-plum-900); min-height: 44px; }
.consent .opt-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); background: var(--p-cream-100); margin-bottom: 8px; color: var(--p-plum-900); cursor: pointer; }
.consent .opt-row input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--p-cherry-500); flex: 0 0 auto; }
.consent .opt-row small { display: block; color: var(--p-plum-600); }

/* ---------- landing: beneficii ---------- */
.benefits { display: grid; gap: 12px; margin-top: 22px; }
.benefit { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--r-lg); padding: 18px; }
.benefit .n { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 800 18px/1 var(--display); color: var(--z-on-pastel); background: var(--blush); }
.benefit:nth-child(4n+2) .n { background: var(--butter); }
.benefit:nth-child(4n+3) .n { background: var(--mint); }
.benefit:nth-child(4n+4) .n { background: var(--lilac); }
.benefit h3 { font-size: 18.5px; margin: 2px 0 4px; }
.benefit p { margin: 0; color: var(--z-text-2); font-size: 15px; }
@media (min-width: 880px) { .benefits { grid-template-columns: 1fr 1fr; } }

/* =================== QUIZ v2 (dupa mockup-quiz.html) =================== */
.page-quiz main.shell { padding-top: 0; padding-bottom: 8px; }
.q-screen { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); padding-bottom: var(--sp-6); }
.qbar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 56px; gap: var(--sp-2); }
.icon-btn { width: 44px; height: 44px; border-radius: var(--r-pill); border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.icon-btn:active { background: var(--z-surface-2); }
.chap { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--body); background: var(--z-surface); color: var(--z-text); border: 1px solid var(--z-line); padding: 8px 12px; border-radius: var(--r-pill); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chap i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--cat-comunicare)); flex: 0 0 auto; }
.chap span { color: var(--z-text-muted); font-weight: 500; }
.segs { display: grid; gap: 5px; margin: 2px 0 var(--sp-5); }
.seg { height: 6px; border-radius: var(--r-pill); background: var(--z-track); overflow: hidden; }
.seg b { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width var(--dur-base) var(--ease-out); }
.stack { position: relative; margin-top: auto; padding-top: var(--sp-5); isolation: isolate; }
.stack::before, .stack::after { content: ""; position: absolute; left: 14px; right: 14px; top: 10px; height: 40px; border-radius: var(--r-lg); background: var(--z-blush); transform: rotate(-2deg); z-index: -1; }
.stack::after { left: 28px; right: 28px; top: 2px; background: var(--z-butter); transform: rotate(1.5deg); z-index: -2; }
.qcard { position: relative; z-index: 1; background: var(--z-surface); border: 2px solid var(--z-text); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5) var(--sp-5); box-shadow: var(--sh-sticker); animation: cardIn var(--dur-base) var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateX(28px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.kicker { font: 700 var(--fs-micro)/1.2 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--z-cherry-text); margin-bottom: var(--sp-3); }
.qtext { font: 800 var(--fs-question)/1.18 var(--display); letter-spacing: -.015em; text-transform: none; margin: 0 0 var(--sp-6); }
.scale { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 2px; }
.dot { --s: 44px; flex: 0 0 auto; width: var(--s); height: var(--s); border-radius: 50%; border: 3px solid var(--c); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast); position: relative; -webkit-tap-highlight-color: transparent; }
.dot::after { content: ""; position: absolute; inset: -6px; }
.dot:nth-child(1) { --s: 54px; --c: var(--p-lilac-400); }
.dot:nth-child(2) { --s: 44px; --c: var(--p-lilac-400); }
.dot:nth-child(3) { --s: 36px; --c: var(--z-line-strong); }
.dot:nth-child(4) { --s: 44px; --c: var(--z-cherry); }
.dot:nth-child(5) { --s: 54px; --c: var(--z-cherry); }
.dot svg { opacity: 0; transform: scale(.4); transition: all var(--dur-fast) var(--ease-spring); }
.dot:active { transform: scale(.9); }
.dot.sel { background: var(--c); transform: scale(1.08); }
.dot.sel svg { opacity: 1; transform: none; }
.dot:nth-child(-n+3).sel svg path { stroke: var(--p-plum-900); }
.ends { display: flex; justify-content: space-between; margin-top: var(--sp-3); font: 700 13px/1.2 var(--body); color: var(--z-text-2); }
.live { min-height: 28px; text-align: center; margin-top: var(--sp-4); font: 800 18px/1.4 var(--display); }
.live span { display: inline-block; background: var(--z-butter); color: var(--z-on-pastel); padding: 2px 12px; border-radius: var(--r-pill); transform: rotate(-2deg); animation: pop var(--dur-fast) var(--ease-spring); }
@keyframes pop { from { transform: scale(.6) rotate(-2deg); opacity: 0; } }
.qfoot { margin-top: auto; padding-top: var(--sp-6); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-small); color: var(--z-text-muted); }
.qfoot .save { display: inline-flex; align-items: center; gap: 6px; }
.qfoot .save i { width: 8px; height: 8px; border-radius: 50%; background: var(--p-mint-400); }
.qhint { font-size: 13px; color: var(--z-text-muted); text-align: center; margin: var(--sp-5) 0 0; }
.opts { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; text-align: left; min-height: 64px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--z-line-strong); background: var(--z-surface); color: var(--z-text); cursor: pointer; font: inherit; transition: border-color var(--dur-fast), transform var(--dur-instant); width: 100%; }
.opt:active { transform: scale(.985); }
.opt .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--z-surface-2); }
.opt b { display: block; font: 800 17px/1.2 var(--display); }
.opt small { display: block; color: var(--z-text-2); font-size: 14px; line-height: 1.35; margin-top: 2px; }
.opt.sel { border-color: var(--z-text); background: var(--z-text); color: var(--z-bg); }
.opt.sel small { color: inherit; opacity: .85; }
.opt.sel .ico { background: var(--z-butter); color: var(--p-plum-900); }
/* Tu sau Eu */
body.duel-bg, body.duel-bg .top { background: var(--p-blush-200); }
body.duel-bg .top .logo { color: var(--p-plum-900); }
.duel-screen { color: var(--p-plum-900); }
.duel-screen .icon-btn { color: var(--p-plum-900); }
.duel-top { text-align: center; margin: var(--sp-2) 0 var(--sp-4); }
.duel-top .title { font: 900 38px/.92 var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); }
.duel-top .pips { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.duel-top .pips i { width: 22px; height: 6px; border-radius: var(--r-pill); background: rgba(28, 18, 32, .15); }
.duel-top .pips i.d { background: var(--p-plum-900); }
.dq { background: var(--p-white); color: var(--p-plum-900); border: 2px solid var(--p-plum-900); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-5); text-align: center; box-shadow: 3px 4px 0 var(--p-plum-900); transform: rotate(-1.2deg); animation: cardIn var(--dur-base) var(--ease-out) both; }
.dq .who-lbl { font: 700 var(--fs-micro)/1 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--p-cherry-600); margin-bottom: 12px; }
.dq p { font: 800 25px/1.18 var(--display); margin: 0; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--sp-5); }
.pick button { min-height: 132px; border-radius: var(--r-lg); border: 2px solid var(--p-plum-900); background: var(--p-white); color: var(--p-plum-900); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--sh-press); transition: transform var(--dur-instant), background var(--dur-fast); font: inherit; padding: 10px; min-width: 0; }
.pick button:active { transform: translateY(2px); }
.pick button.sel { background: var(--p-plum-900); color: #fff; }
.pick .av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 22px/1 var(--display); border: 2px solid var(--p-plum-900); color: var(--p-plum-900); }
.pick button:first-child .av { background: var(--p-butter-200); }
.pick button:last-child .av { background: var(--p-mint-200); }
.pick b { font: 800 19px/1.1 var(--display); overflow-wrap: anywhere; max-width: 100%; }
.pick small { font-size: 12.5px; color: var(--p-plum-600); margin-top: -6px; overflow-wrap: anywhere; max-width: 100%; }
.pick button.sel small { color: rgba(255, 255, 255, .8); }
.duel-note { text-align: center; font-size: 13.5px; color: var(--p-plum-600); margin-top: var(--sp-4); }
/* Jumatate */
body.half-bg, body.half-bg .top { background: var(--p-plum-950); }
body.half-bg .top .logo { color: var(--p-cream-50); }
.half { color: var(--p-cream-50); text-align: center; justify-content: center; position: relative; overflow: hidden; }
.half .ring { width: 188px; height: 188px; margin: 0 auto var(--sp-6); position: relative; }
.half .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.half .ring .n { position: absolute; inset: 0; display: grid; place-items: center; font: 900 64px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); }
.half .ring .n small { display: block; font: 500 14px/1.2 var(--body); letter-spacing: 0; color: var(--p-plum-300); margin-top: 4px; }
.half h1 { font: 900 52px/var(--lh-poster) var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); margin: 0 0 var(--sp-3); color: var(--p-cream-50); }
.half h1 em { color: var(--p-cherry-400); }
.half p { color: var(--p-plum-200); max-width: 32ch; margin: 0 auto var(--sp-6); }
.tidbit { background: var(--p-butter-200); color: var(--p-plum-900); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); text-align: left; transform: rotate(-1.5deg); box-shadow: 3px 4px 0 #000; margin: 0 4px var(--sp-8); }
.tidbit small { display: block; font: 700 var(--fs-micro)/1 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: 6px; }
.tidbit b { font: 800 18px/1.3 var(--display); }
.btn-light { background: var(--p-cream-50); color: var(--p-plum-900); }
.conf { position: absolute; inset: 0; pointer-events: none; }
.conf i { position: absolute; width: 10px; height: 16px; border-radius: 3px; opacity: .9; animation: fall 2.4s var(--ease-out) forwards; }
@keyframes fall { from { transform: translateY(-40px) rotate(0); } to { transform: translateY(260px) rotate(260deg); opacity: 0; } }
/* Tranzitie capitol */
body.chap-bg, body.chap-bg .top { background: var(--chap-c, var(--cat-valori)); }
body.chap-bg .top .logo { color: var(--p-plum-900); }
.chapter { color: var(--p-plum-900); justify-content: space-between; padding-top: var(--sp-6); }
.chapter .done { display: inline-flex; align-items: center; gap: 8px; background: var(--p-white); border: 2px solid var(--p-plum-900); border-radius: var(--r-pill); padding: 8px 14px; font: 700 14px/1 var(--body); align-self: flex-start; box-shadow: 3px 4px 0 var(--p-plum-900); }
.chapter .num { font: 900 120px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); opacity: .18; margin-top: var(--sp-8); }
.chapter h1 { font: 900 clamp(44px, 13vw, 58px)/var(--lh-poster) var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); margin: -40px 0 var(--sp-3); color: var(--p-plum-900); }
.chapter p { font-size: var(--fs-body-l); max-width: 30ch; margin: 0 0 var(--sp-4); }
.chapter .meta { display: flex; gap: 8px; flex-wrap: wrap; }
.chapter .meta span { background: rgba(28, 18, 32, .1); padding: 6px 12px; border-radius: var(--r-pill); font: 700 13px/1.2 var(--body); }
.chapter .btn { background: var(--p-plum-900); color: var(--p-cream-50); margin-top: var(--sp-8); box-shadow: none; }
/* Start / final / partener 2 */
.q-intro { padding-top: var(--sp-4); }
.chips3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--sp-5); }
.chips3 span { background: var(--p-white); color: var(--p-plum-900); border: 2px solid var(--p-plum-900); border-radius: var(--r-pill); padding: 7px 12px; font: 700 13.5px/1 var(--body); }
.invite-hero { background: var(--p-blush-200); color: var(--p-plum-900); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); margin: var(--sp-2) 0 var(--sp-4); }
.invite-hero h1 { font: 900 clamp(36px, 10.4vw, 50px)/var(--lh-poster) var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); color: var(--p-plum-900); margin: var(--sp-4) 0 var(--sp-4); overflow-wrap: anywhere; }
.invite-hero h1 em { color: var(--p-cherry-600); }
.invite-hero .stk { display: inline-block; background: var(--p-white); border: 2px solid var(--p-plum-900); border-radius: var(--r-md); padding: 8px 12px; font: 800 15px/1.1 var(--display); transform: rotate(-3deg); box-shadow: 3px 4px 0 var(--p-plum-900); overflow-wrap: anywhere; }
.invite-hero h3 { color: var(--p-plum-900); font-size: 17px; margin: 0 0 10px; }
.gets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gets li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; font-size: 15px; }
.gets li i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--p-white); font-style: normal; }
.gets li b { display: block; font: 800 16px/1.2 var(--display); }
.handover { background: var(--p-plum-950); color: var(--p-cream-50); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-5); text-align: center; margin-top: var(--sp-4); }
.handover h1 { color: var(--p-cream-50); font-size: clamp(36px, 10vw, 50px); overflow-wrap: anywhere; }
.handover p { color: var(--p-plum-200); }
.handover .btn { background: var(--p-cream-50); color: var(--p-plum-900); box-shadow: none; }
details.more { font-size: 13.5px; color: var(--z-text-2); margin: -4px 0 12px 4px; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--z-text); }
details.more p { margin: 6px 0 0; }
.done-hero { text-align: center; padding: var(--sp-6) var(--sp-2) var(--sp-4); }
.stk-big { display: inline-block; background: var(--p-butter-200); color: var(--p-plum-900); font: 800 22px/1.15 var(--display); padding: 12px 18px; border-radius: var(--r-md); transform: rotate(-3deg); box-shadow: 3px 4px 0 var(--p-plum-900); margin-bottom: var(--sp-5); }
.teaser-blur { display: flex; align-items: center; gap: 14px; background: var(--p-plum-900); color: #fff; border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 16px; }
.teaser-blur .scb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--p-butter-200); color: var(--p-plum-900); display: grid; place-items: center; font: 900 25px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); transform: rotate(-6deg); }
.teaser-blur b { font: 800 18px/1.15 var(--display); display: block; overflow-wrap: anywhere; }
.teaser-blur span { color: rgba(255, 255, 255, .78); font-size: 14px; }

/* =================== SUCCESS v2 =================== */
.variant-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.variant-chips button { min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill); border: 2px solid var(--z-line-strong); background: var(--z-surface); color: var(--z-text); font: 700 14px/1.2 var(--body); cursor: pointer; }
.variant-chips button[aria-pressed="true"] { background: var(--z-text); color: var(--z-bg); border-color: var(--z-text); }
.msg-preview { background: #E7F8EE; color: #10301F; border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 15px; line-height: 1.45; margin-bottom: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.btn-row.three { grid-template-columns: 1fr 1fr; }
.btn-row.three > :first-child { grid-column: 1 / -1; }
.card.same-phone { background: var(--p-plum-950); color: var(--p-cream-50); border: 0; }
.card.same-phone h3 { color: var(--p-cream-50); }
.card.same-phone p { color: var(--p-plum-200); }
.card.same-phone .btn { background: var(--p-cream-50); color: var(--p-plum-900); }
.card.own-link { background: var(--p-butter-200); color: var(--p-plum-900); border: 2px solid var(--p-plum-900); box-shadow: 3px 4px 0 var(--p-plum-900); }
.card.own-link h2, .card.own-link p { color: var(--p-plum-900); }
.card.own-link .linkbox input { background: #fff; color: var(--p-plum-900); border-color: rgba(28, 18, 32, .25); }
.card.own-link .btn-ink { background: var(--p-plum-900); color: #fff; }
.card.own-link .copied { color: var(--p-plum-900); }

/* =================== RAPORT v2 (dupa mockup-report.html) =================== */
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--z-line-strong); background: var(--z-surface); color: var(--z-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rp .sec { margin-top: var(--sp-10); }
.rp .sec > h2 { font-size: 34px; }
.rp .rcard { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); }
.reveal { position: relative; overflow: hidden; background: radial-gradient(90% 55% at 85% 0%, rgba(255, 77, 122, .55) 0, transparent 60%), radial-gradient(70% 45% at 0% 100%, rgba(179, 157, 255, .35) 0, transparent 60%), var(--p-plum-950); color: var(--p-cream-50); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-5) var(--sp-6); text-align: center; margin-top: var(--sp-1); }
.reveal .kick { font: 700 var(--fs-micro)/1 var(--body); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--p-plum-300); }
.reveal .names { font: 900 clamp(38px, 11vw, 56px)/var(--lh-poster) var(--display); font-stretch: var(--poster); text-transform: uppercase; letter-spacing: var(--ls-poster); margin: var(--sp-3) 0 var(--sp-5); overflow-wrap: anywhere; }
.reveal .names em { color: var(--p-cherry-400); }
.gauge { position: relative; width: 236px; height: 236px; margin: 0 auto; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .arc { stroke-dasharray: 640.9; stroke-dashoffset: 640.9; animation: arc var(--dur-reveal) var(--ease-out) .3s forwards; }
@keyframes arc { to { stroke-dashoffset: var(--off); } }
.gauge .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 var(--fs-score)/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); }
.gauge .num sup { font-size: .34em; margin-top: -1.1em; margin-left: 2px; }
.type-sticker { display: inline-block; background: var(--p-butter-200); color: var(--p-plum-900); font: 800 22px/1.15 var(--display); padding: 12px 18px; border-radius: var(--r-md); transform: rotate(-3deg); box-shadow: 3px 4px 0 #000; margin: var(--sp-5) 0; animation: stick var(--dur-slow) var(--ease-spring) 1.5s both; max-width: 100%; overflow-wrap: anywhere; }
@keyframes stick { from { opacity: 0; transform: scale(.5) rotate(-12deg); } }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.mini div { background: rgba(255, 246, 236, .07); border: 1px solid rgba(255, 246, 236, .1); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--p-plum-200); }
.mini b { display: block; font: 900 28px/1.05 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); color: var(--p-cream-50); }
.mini i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.rp .ai-note { font-size: 13px; color: var(--z-text-muted); text-align: center; margin: var(--sp-3) var(--sp-2) 0; }
.share { background: var(--z-surface); border: 2px solid var(--z-text); border-radius: var(--r-xl); padding: var(--sp-5) 0; box-shadow: var(--sh-sticker); margin-top: var(--sp-6); }
.share h2 { font-size: 30px; padding: 0 var(--sp-5); margin-bottom: 4px; }
.share .sub { padding: 0 var(--sp-5); color: var(--z-text-2); font-size: 14.5px; }
.rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-3) var(--sp-5) var(--sp-4); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.sc { flex: 0 0 138px; aspect-ratio: 9 / 16; border-radius: 18px; scroll-snap-align: start; position: relative; border: 3px solid transparent; cursor: pointer; padding: 0; background: var(--z-surface-2); }
.sc img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; display: block; }
.sc[aria-checked="true"] { border-color: var(--z-text); }
.sc .tag { position: absolute; top: -9px; right: 8px; background: var(--z-text); color: var(--z-bg); font: 700 10px/1 var(--body); padding: 4px 7px; border-radius: 99px; z-index: 1; }
.share-actions { display: grid; gap: 10px; padding: 0 var(--sp-5); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share .fine, .share .tipbox { margin: 12px var(--sp-5) 0; font-size: 13px; color: var(--z-text-muted); }
.share .tipbox { color: var(--z-text-2); background: var(--z-surface-2); border-radius: var(--r-sm); padding: 10px 12px; }
.rp .quote { font: italic 500 var(--fs-quote)/1.25 var(--serif); margin: var(--sp-10) 0 0; padding-left: var(--sp-4); border-left: 4px solid var(--z-cherry); }
.rp .by { font-size: 13px; color: var(--z-text-muted); margin: var(--sp-2) 0 0 var(--sp-5); }
.bars { display: grid; gap: var(--sp-4); }
.brow .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.brow .hd b { font: 800 17px/1.2 var(--display); }
.brow .hd span { font: 900 28px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); }
.track { height: 14px; border-radius: 99px; background: var(--z-track); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 99px; width: 0; animation: grow var(--dur-slow) var(--ease-out) .2s forwards; }
@keyframes grow { to { width: var(--w); } }
.legend { font-size: 13px; color: var(--z-text-muted); margin: var(--sp-4) 0 0; }
details.cat { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--r-lg); margin-top: 10px; overflow: hidden; }
details.cat summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 12px 1fr auto 20px; gap: 12px; align-items: center; padding: 16px; font: 800 17px/1.2 var(--display); }
details.cat summary::-webkit-details-marker { display: none; }
details.cat summary .c { width: 12px; height: 12px; border-radius: 50%; }
details.cat summary .p { font-size: 18px; }
details.cat summary svg { transition: transform var(--dur-fast); }
details.cat[open] summary svg { transform: rotate(180deg); }
details.cat .body { padding: 0 16px 16px; color: var(--z-text-2); font-size: 15.5px; }
.tagrow { display: grid; gap: 6px; margin-top: var(--sp-3); }
.tagrow span { font-size: 14px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--z-surface-2); color: var(--z-text); }
.two { display: grid; gap: 12px; }
.list { border-radius: var(--r-lg); padding: var(--sp-5); color: var(--p-plum-900); }
.list.same { background: var(--p-mint-200); }
.list.diff { background: var(--p-lilac-200); }
.list h3 { font-size: 19px; margin-bottom: var(--sp-3); color: var(--p-plum-900); }
.list ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.list li { background: rgba(255, 255, 255, .6); border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px; line-height: 1.4; }
.asks { display: grid; gap: 10px; counter-reset: ask; }
.ask { background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--r-md); padding: 14px 16px 14px 56px; position: relative; }
.ask::before { counter-increment: ask; content: counter(ask); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--p-blush-200); color: var(--p-plum-900); display: grid; place-items: center; font: 800 15px/1 var(--display); }
.ask small { display: block; font: 700 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--z-text-muted); margin-bottom: 4px; }
.ask b { font: 800 17px/1.3 var(--display); }
.love { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: var(--sp-2) 0 var(--sp-4); }
.person { border-radius: var(--r-lg); padding: var(--sp-4); color: var(--p-plum-900); position: relative; min-height: 140px; display: flex; flex-direction: column; }
.person.a { background: var(--p-butter-200); transform: rotate(-1.5deg); }
.person.b { background: var(--p-mint-200); transform: rotate(1.5deg); }
.person small { font: 700 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.person b { font: 800 20px/1.1 var(--display); margin: 8px 0 6px; }
.person span { font-size: 13.5px; line-height: 1.35; margin-top: auto; }
.tip { display: flex; gap: 12px; align-items: flex-start; background: var(--z-surface-2); border-radius: var(--r-md); padding: var(--sp-4); font-size: 15px; color: var(--z-text); margin-top: 10px; }
.tip svg { flex: 0 0 auto; margin-top: 2px; }
.tip ul { margin: 6px 0 0; padding-left: 18px; }
.duel-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.duel-score { flex: 0 0 auto; width: 92px; height: 92px; border-radius: 50%; background: var(--z-cherry); color: #fff; display: flex; align-items: center; justify-content: center; font: 900 42px/1 var(--display); font-stretch: var(--poster); letter-spacing: var(--ls-poster); transform: rotate(-6deg); box-shadow: var(--sh-sticker); }
.duel-score small { font-size: 16px; }
.duel-head p { margin: 0; font-size: 15px; color: var(--z-text-2); }
.duel-head p b { display: block; font: 800 20px/1.15 var(--display); color: var(--z-text); margin-bottom: 4px; }
.drows { display: grid; gap: 8px; }
.drow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--z-surface); border: 1px solid var(--z-line); border-radius: var(--r-md); padding: 12px 14px; font-size: 14.5px; }
.drow .who { font: 700 12.5px/1 var(--body); padding: 7px 10px; border-radius: 99px; white-space: nowrap; color: var(--p-plum-900); max-width: 44vw; overflow: hidden; text-overflow: ellipsis; }
.who.a { background: var(--p-butter-200); }
.who.b { background: var(--p-mint-200); }
.who.x { background: var(--z-surface-2); color: var(--z-text-2); }
.fut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: var(--sp-2) 0 var(--sp-3); }
.fut div { border: 2px solid var(--z-text); border-radius: var(--r-md); padding: 12px; background: var(--z-surface); }
.fut small { display: block; font: 700 11px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--z-text-muted); margin-bottom: 6px; overflow-wrap: anywhere; }
.fut b { font: 800 16px/1.2 var(--display); }
.ideas { display: grid; gap: 10px; }
.idea { background: var(--p-butter-200); color: var(--p-plum-900); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.idea:nth-child(2) { background: var(--p-mint-200); }
.idea:nth-child(3) { background: var(--p-lilac-200); }
.idea b { display: block; font: 800 18px/1.2 var(--display); margin-bottom: 4px; }
.idea span { font-size: 15px; }
.bonus-box { border: 2px dashed var(--z-line-strong); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: 12px; background: var(--z-surface); }
.bonus-box h3 { font-size: 20px; }
.bonus-box p { color: var(--z-text-2); font-size: 15px; }
.bonus-box .state { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.bonus-box .state span { font: 700 12.5px/1 var(--body); padding: 7px 10px; border-radius: 99px; background: var(--z-surface-2); color: var(--z-text-2); }
.bonus-box .state span.ok { background: var(--p-mint-200); color: var(--p-plum-900); }
.bq { border-top: 1px solid var(--z-line); padding-top: 16px; margin-top: 16px; }
.bq .qtext { font-size: 20px; margin-bottom: 14px; }
.rp .closing { background: var(--p-lilac-200); color: var(--p-plum-900); border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5); margin-top: var(--sp-10); }
.rp .closing h2 { font-size: 32px; color: var(--p-plum-900); }
.rp .closing p { margin: 0; font-size: 16.5px; }
.rate { text-align: center; }
.stars { display: flex; justify-content: center; gap: 6px; margin: var(--sp-3) 0; }
.stars button { width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.stars svg path { fill: var(--z-track); stroke: var(--z-line-strong); stroke-width: 1; transition: fill var(--dur-fast); }
.stars button.on svg path { fill: var(--p-butter-400); stroke: var(--p-butter-400); }
.rate .check, .rate .field { text-align: left; }
.rp .viral { background: var(--z-cherry); color: #fff; border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-5); margin-top: var(--sp-10); text-align: center; }
.rp .viral h2 { color: #fff; font-size: 34px; }
.rp .viral p { color: rgba(255, 255, 255, .92); }
.rp .viral .btn { background: #fff; color: var(--p-plum-900); box-shadow: none; }
.rp .viral .btn.o { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .85); margin-top: 10px; }
.rp .fine { font-size: 12.5px; color: var(--z-text-muted); text-align: center; margin-top: var(--sp-6); }
.rv2 { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.rv2.in { opacity: 1; transform: none; }
.rv2:not(.in) .track i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rv2 { opacity: 1; transform: none; }
  .gauge .arc { stroke-dashoffset: var(--off); animation: none; }
  .track i { width: var(--w); animation: none; }
  .type-sticker, .qcard, .dq { animation: none; }
}
@media (min-width: 880px) { .two { grid-template-columns: 1fr 1fr; } }