/* ===== bază comună: structură, formular, accesibilitate ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--acc); color: var(--on-acc); padding: 10px 14px; z-index: 100; border-radius: 6px; }
.skip:focus { top: 12px; }

.sec { padding: 72px 0; }
.sec-alt { background: var(--bg2); }
.lead { color: var(--mute); max-width: 62ch; margin-top: 14px; font-size: 1.06rem; }
.sec-head { margin-bottom: 36px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; text-decoration: none; font-weight: 700; border: 2px solid transparent; cursor: pointer; background: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-acc { background: var(--acc); color: var(--on-acc); }
.btn-wa { background: #1f9d4a; color: #fff; }
.btn-line { border-color: currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ----- antet ----- */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; }
.top-in { display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; margin-right: auto; white-space: nowrap; }
.brand svg { width: 30px; height: 30px; flex: none; }
.nav { display: none; gap: 22px; font-size: .95rem; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.theme { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; cursor: pointer; border-radius: 50%; }
.theme svg { width: 20px; height: 20px; }
.theme .sun { display: none; }
[data-theme="dark"] .theme .sun { display: block; }
[data-theme="dark"] .theme .moon { display: none; }
.top .btn { min-height: 44px; padding: 0 18px; display: none; }
@media (min-width: 900px) { .nav { display: flex; } .top .btn { display: inline-flex; } }

/* ----- erou ----- */
.hero { position: relative; color: #fff; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-in { position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero-sub { margin-top: 18px; max-width: 52ch; font-size: 1.12rem; color: rgba(255,255,255,.88); }
.hero .btn-row { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; font-size: .9rem; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.22); border-radius: 99px; color: #fff; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chip .st { color: #ffc531; letter-spacing: 1px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa0a6; }
[data-open="1"] ~ .dot, .chip:has([data-open="1"]) .dot { background: #34c759; }

/* ----- formular ----- */
.calc { display: grid; gap: 28px; }
@media (min-width: 960px) { .calc { grid-template-columns: 1.25fr .9fr; align-items: start; } .calc-side { position: sticky; top: 100px; } }
.fields { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 620px) { .field.wide-m { grid-column: 1 / -1; } .hero-in { padding-bottom: 96px !important; } }
.field label, .legend { font-weight: 700; font-size: .95rem; }
.opt { font-weight: 400; color: var(--mute); }
.inp { width: 100%; min-height: 52px; padding: 0 14px; background: var(--field); border: 1.5px solid var(--line2); border-radius: var(--r-s); }
textarea.inp { padding: 12px 14px; min-height: 84px; resize: vertical; }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 21px) 23px, calc(100% - 15px) 23px; background-size: 6px 6px; background-repeat: no-repeat; }
.inp:disabled { opacity: .5; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border: 1.5px solid var(--line2); border-radius: var(--r-pill); background: var(--field); font-size: .95rem; }
.pick input:checked + span { background: var(--acc); border-color: var(--acc); color: var(--on-acc); font-weight: 700; }
.pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; }
.panel h3 { font-size: 1.05rem; }
.adv-empty, .adv-lead { color: var(--mute); margin-top: 8px; font-size: .97rem; }
.adv-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.adv-parts li { padding: 6px 12px; border-radius: 99px; background: var(--tint); color: var(--acc-text); font-weight: 700; font-size: .93rem; }
.adv-note { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--acc); background: var(--tint); font-size: .93rem; }
.offer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.offer b { font-size: 2rem; line-height: 1; }
.offer s { color: var(--mute); }
.offer span { color: var(--mute); font-size: .93rem; flex-basis: 100%; }
.preview { margin-top: 16px; padding: 14px; background: var(--bubble); color: var(--bubble-ink); border-radius: 4px 16px 16px 16px; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.panel .btn { width: 100%; margin-top: 12px; }
.hint { margin-top: 10px; color: var(--warn); font-weight: 700; font-size: .95rem; }
.small { color: var(--mute); font-size: .88rem; margin-top: 12px; }

/* ----- piese ----- */
.part picture, .part img { width: 100%; }
.part img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.part h3 { font-size: 1.25rem; }
.part p { color: var(--mute); margin-top: 8px; }

/* ----- pași ----- */
.steps { display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: s; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); }
.step::before { content: counter(s); display: block; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--acc-text); font-weight: 700; }
.step h3 { margin-top: 10px; font-size: 1.2rem; }
.step p { margin-top: 8px; color: var(--mute); }

/* ----- două coloane text ----- */
.two { display: grid; gap: 36px; }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; gap: 56px; } }
.ticks li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 14px; height: 8px; border-left: 3px solid var(--acc-text); border-bottom: 3px solid var(--acc-text); transform: rotate(-45deg); }
.plain li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--mute); }
.plain b { color: var(--ink); }

/* ----- preț ----- */
.price-big { font-family: var(--display); font-weight: 700; line-height: .9; font-size: clamp(4.2rem, 13vw, 8.5rem); letter-spacing: var(--display-ls); }
.price-old { color: var(--mute); font-size: 1.2rem; }
.cmp { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .97rem; }
.cmp th, .cmp td { text-align: left; padding: 14px 12px 14px 0; border-top: 1px solid var(--line); vertical-align: top; }
.cmp th { font-weight: 700; width: 46%; }
.cmp tr.me th, .cmp tr.me td { color: var(--acc-text); font-weight: 700; }
.cmp td small { display: block; color: var(--mute); font-weight: 400; }

/* ----- cinstit ----- */
.honest { border: 2px solid var(--acc); border-radius: var(--r-l); padding: 28px; background: var(--card); }
.honest ul { margin-top: 14px; display: grid; gap: 10px; }
.honest li { padding-left: 26px; position: relative; }
.honest li::before { content: "×"; position: absolute; left: 0; top: -2px; font-weight: 700; font-size: 1.3rem; color: var(--warn); }

/* ----- recenzii + contact ----- */
.rating { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rating b { font-family: var(--display); font-size: clamp(4rem, 10vw, 6.5rem); line-height: .9; font-weight: 700; }
.rating .st { color: #e6a700; font-size: 1.5rem; letter-spacing: 3px; }
.info li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.info span:first-child { color: var(--mute); }
.info a { font-weight: 700; }

/* ----- întrebări ----- */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 20px 44px 20px 0; font-weight: 700; font-size: 1.08rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.7rem; font-weight: 400; color: var(--acc-text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--mute); max-width: 70ch; }

/* ----- final + subsol ----- */
.final { text-align: left; }
.foot { padding: 44px 0 110px; border-top: 1px solid var(--line); color: var(--mute); font-size: .92rem; }
.foot-in { display: grid; gap: 22px; }
@media (min-width: 800px) { .foot-in { grid-template-columns: 1.3fr 1fr 1fr; } .foot { padding-bottom: 44px; } }
.foot b { color: var(--ink); }
.foot a { text-underline-offset: 3px; }
.foot .legal { margin-top: 10px; font-size: .84rem; }
.todo { margin-top: 8px; padding: 10px 12px; border: 1.5px dashed var(--warn); color: var(--warn); border-radius: 6px; }

.bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bar); border-top: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bar .btn { min-height: 48px; padding: 0 10px; font-size: .95rem; }
@media (min-width: 800px) { .bar { display: none; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* =========================================================
   Viață pe pagină: mașina de scris, apariții, plutire, carduri glisabile
   ========================================================= */

/* ----- titlul scris literă cu literă ----- */
.tw-w { white-space: nowrap; }
.tw-c { opacity: 0; }
.tw-c.on { opacity: 1; }
.caret { display: inline-block; width: .08em; height: .9em; margin-left: .04em; vertical-align: -.06em; background: var(--acc); animation: blink .9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----- apariție la derulare ----- */
.js .rv { opacity: 0; translate: 0 28px; transition: opacity .8s ease, translate .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rd, 0ms); }
.js .rv.in { opacity: 1; translate: 0 0; }

/* ----- carduri care plutesc ----- */
.float { animation: flt 6.5s ease-in-out infinite; animation-delay: var(--fd, 0s); transition: box-shadow .35s ease, border-color .35s ease, scale .35s ease; }
@keyframes flt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float:hover { animation-play-state: paused; scale: 1.015; box-shadow: 0 18px 40px rgba(0,0,0,.18); }

/* ----- zoom pe imagini ----- */
.part picture { display: block; overflow: hidden; }
.part img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.part:hover img { transform: scale(1.08); }

/* ----- cronometrul celor 75 de minute ----- */
.run { display: grid; gap: 26px; align-items: center; margin-bottom: 28px; }
@media (min-width: 760px) { .run { grid-template-columns: 220px 1fr; gap: 40px; } }
.clock { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.clock .trk { fill: none; stroke: var(--line); stroke-width: 9; }
.clock .arc { fill: none; stroke: var(--acc); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.clock-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.clock-c b { font-family: var(--display); font-size: 4.2rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--display-ls); }
.clock-c span { color: var(--mute); font-size: .9rem; margin-top: 4px; }
.clock.done .arc { stroke: #1f9d4a; }
.clock-msg { font-size: 1.2rem; font-weight: 700; max-width: 34ch; min-height: 2.9em; }
.run-side .btn { margin-top: 14px; }
.step { position: relative; border: 1px solid var(--line); transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease, scale .35s ease; }
.step.live { border-color: var(--acc); box-shadow: 0 0 0 4px var(--tint); }
.step.done::after { content: ""; position: absolute; right: 20px; top: 22px; width: 16px; height: 9px; border-left: 3px solid #1f9d4a; border-bottom: 3px solid #1f9d4a; transform: rotate(-45deg); }
.step .bar-in { display: block; height: 3px; margin-top: 14px; background: var(--line); border-radius: 3px; overflow: hidden; }
.step .bar-in i { display: block; height: 100%; width: 0; background: var(--acc); }

/* ----- piste de carduri (glisare pe telefon) ----- */
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 10px 20px 18px; scroll-padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 560px) { .track { grid-auto-columns: 46%; } }
@media (min-width: 960px) { .track { grid-auto-flow: row; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } }
.swipe { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: .9rem; margin-top: 4px; }
.swipe span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; color: var(--acc-text); font-weight: 700; }
@keyframes nudge { 50% { transform: translateX(6px); } }
@media (min-width: 960px) { .swipe { display: none; } }
.dots { display: flex; gap: 6px; margin-top: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); transition: width .3s ease, background-color .3s ease; }
.dots i.on { width: 20px; border-radius: 4px; background: var(--acc); }
@media (min-width: 960px) { .dots { display: none; } }

.ccard, .bcard, .qcard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px 22px 24px; overflow: hidden; }
.ccard h3, .bcard h3 { font-size: 1.15rem; margin-top: 14px; line-height: 1.25; }
.ccard p, .bcard p { color: var(--mute); margin-top: 8px; font-size: .97rem; }
.ci { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: var(--tint); color: var(--acc-text); }
.ci svg { width: 26px; height: 26px; }
.ccard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--warn); }
.ccard .ci { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.bcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1f9d4a; }
.bcard .ci { background: rgba(31,157,74,.14); color: #1f9d4a; }
.ccard .ci svg, .bcard .ci svg { animation: wob 5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes wob { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-6deg) scale(1.06); } 55% { transform: rotate(5deg) scale(1.06); } }

.qcard { padding: 20px 20px 6px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.qcard summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding-right: 34px; position: relative; padding-bottom: 14px; }
.qcard summary::-webkit-details-marker { display: none; }
.qcard summary::after { content: "+"; position: absolute; right: 0; top: -4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--acc-text); font-weight: 700; transition: transform .35s ease; }
.qcard details[open] summary::after { transform: rotate(45deg); }
.qcard details p { color: var(--mute); padding-bottom: 18px; font-size: .97rem; animation: open .45s ease; }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.qcard:has(details[open]) { border-color: var(--acc); }

/* ----- butoane plutitoare (WhatsApp și telefon) ----- */
.fab { position: fixed; z-index: 60; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; justify-items: end; }
.fab a { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .25s ease; }
.fab a:hover { transform: scale(1.08); }
.fab svg { width: 26px; height: 26px; }
.fab-wa { background: #25d366; color: #fff; }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: ring 2.6s ease-out infinite; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.fab-call { width: 48px !important; height: 48px !important; background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.fab-call svg { width: 22px; height: 22px; }
.tip { position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%; white-space: nowrap; background: var(--ink); color: var(--bg); font-size: .85rem; font-weight: 700; padding: 6px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.fab a:hover .tip, .fab a:focus-visible .tip { opacity: 1; }
.foot { padding-bottom: 100px; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; translate: none; }
  .tw-c { opacity: 1; }
  .float, .ci svg, .swipe span, .fab-wa::before { animation: none; }
}

/* ----- formularul în trei pași care se deschid ----- */
.steps-form { display: grid; gap: 12px; min-width: 0; }
.grp { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); overflow: hidden; transition: border-color .3s ease; }
.grp[open] { border-color: color-mix(in srgb, var(--acc) 55%, var(--line)); }
.grp > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.grp > summary::-webkit-details-marker { display: none; }
.gn { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--tint); color: var(--acc-text); transition: background-color .3s ease, color .3s ease; }
.grp.ok .gn { background: var(--acc); color: var(--on-acc); font-size: 0; }
.grp.ok .gn::before { content: ""; width: 13px; height: 7px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-2px) rotate(-45deg); }
.gt { flex: 1; min-width: 0; display: grid; }
.gt b { font-size: 1.05rem; }
.gt small { color: var(--mute); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .3s ease; margin-right: 4px; }
.grp[open] .gx { transform: rotate(-135deg); }
.grp .fields { padding: 4px 18px 20px; animation: open .4s ease; }
.next { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
@media (min-width: 960px) { .next { display: none; } }
.msg { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.msg > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.msg > summary::-webkit-details-marker { display: none; }
.msg > summary::after { content: "+"; color: var(--acc-text); font-size: 1.4rem; line-height: 1; }
.msg[open] > summary::after { content: "–"; }
.msg .preview { margin-top: 12px; }
@media (max-width: 959px) { .calc-side .panel { padding: 20px; } .offer b { font-size: 1.7rem; } }

/* ===== Varianta A „Martor”: întunecat, litere condensate, chihlimbarul martorului de bord ===== */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-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: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-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; }

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --display-ls: .005em;
  --r-s: 4px; --r-l: 6px; --r-pill: 4px;
  --acc: #ffb300; --on-acc: #1a1300; --focus: #ffd66b;
}
:root, [data-theme="dark"] {
  --bg: #121416; --bg2: #191c1f; --card: #1f2327; --field: #15181b;
  --ink: #f1efe9; --mute: #a9adb1; --line: #2c3136; --line2: #454b52;
  --acc-text: #ffb300; --tint: rgba(255,179,0,.12); --warn: #ff8a5c;
  --bubble: #0f3d2a; --bubble-ink: #e9fff3; --bar: rgba(18,20,22,.88);
}
[data-theme="light"] {
  --bg: #eceef0; --bg2: #e1e4e7; --card: #ffffff; --field: #ffffff;
  --ink: #15181b; --mute: #51585f; --line: #cfd4d9; --line2: #9aa2aa;
  --acc-text: #8a5a00; --tint: rgba(255,179,0,.2); --warn: #b3401a;
  --bubble: #dcf8c6; --bubble-ink: #10261a; --bar: rgba(236,238,240,.9);
}

h1, h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--display-ls); line-height: 1.12; }
h2 { font-size: clamp(2.5rem, 6.4vw, 4.6rem); max-width: 18ch; }
.btn { border-radius: 4px; font-family: var(--display); text-transform: uppercase; font-size: 1.18rem; letter-spacing: .04em; }

.top { padding: 12px 0; }
.top-in { background: rgba(14,16,18,.82); border: 1px solid rgba(255,255,255,.14); padding: 8px 10px 8px 18px; border-radius: 4px; color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { font-family: var(--display); font-size: 1.45rem; text-transform: uppercase; letter-spacing: .06em; }
.brand svg { color: var(--acc); }
.theme { border-color: rgba(255,255,255,.3); border-radius: 4px; }

.hero { min-height: min(100svh, 860px); display: flex; align-items: flex-end; background: #0b0c0d; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,9,10,.92) 0%, rgba(8,9,10,.7) 42%, rgba(8,9,10,.1) 78%), linear-gradient(0deg, rgba(8,9,10,.85), transparent 40%); }
.hero-in { padding: 130px 0 48px; }
.lamp { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; letter-spacing: .08em; color: var(--acc); }
.lamp svg { width: 46px; height: 46px; filter: drop-shadow(0 0 14px rgba(255,179,0,.7)); animation: lamp 2.4s ease-in-out 3; }
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { font-size: clamp(2.9rem, 6.6vw, 5.7rem); line-height: 1.12; margin-top: 10px; max-width: 21ch; }
.hero h1 .l2 { display: block; color: var(--acc); }

.strip { background: var(--acc); color: var(--on-acc); overflow: hidden; white-space: nowrap; font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .05em; padding: 12px 0; }
.strip div { display: inline-block; animation: run 38s linear infinite; }
.strip span { margin: 0 22px; }
.strip i { font-style: normal; opacity: .55; }
@keyframes run { to { transform: translateX(-50%); } }

.parts { display: grid; gap: 14px; }
@media (min-width: 700px) { .parts { grid-template-columns: repeat(6, 1fr); } .part { grid-column: span 2; } .part:nth-child(1), .part:nth-child(2) { grid-column: span 3; } }
.part { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.part div { padding: 20px 22px 24px; }
.part h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.75rem; letter-spacing: .02em; line-height: 1; }
.part:nth-child(1) img, .part:nth-child(2) img { aspect-ratio: 16 / 9; }

.step h3, .panel h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .03em; }
.h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.7rem; letter-spacing: .03em; margin-bottom: 14px; }
.final { background: var(--acc); color: var(--on-acc); }
.final h2 { max-width: 20ch; }
.final .lead { color: #3d2e00; }
.final .btn-line { color: #1a1300; }
.final .btn-acc { background: #1a1300; color: #ffb300; }

/* ----- filmul „Drumul funinginii” (numai varianta A) ----- */
.film { background: #0b0c0d; color: #f1efe9; padding: 84px 0 72px; }
.film h2 { color: #fff; }
.film .lead { color: #a9adb1; }
.film .small { color: #7d8288; }
.film-head { margin-bottom: 30px; }
.film-stage { display: grid; gap: 18px; }
@media (min-width: 960px) { .film-stage { grid-template-columns: 1.75fr 1fr; gap: 26px; align-items: start; } }
.film-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; overflow: hidden; background: #000; border: 1px solid #2c3136; }
.film-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-tag { position: absolute; left: 14px; top: 14px; margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: 1.05rem; }
.film-tag span { display: inline-block; padding: 5px 12px; border-radius: 4px; }
.film-tag .dirty { background: #ffb300; color: #1a1300; }
.film-tag .clean { background: #f1efe9; color: #0b0c0d; }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.film-bar i { display: block; height: 100%; width: 0; background: #ffb300; }
.film-play { position: absolute; right: 12px; bottom: 14px; width: 42px; height: 42px; border-radius: 4px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.55); color: #fff; font-weight: 700; cursor: pointer; }
.film-ch { display: grid; gap: 4px; counter-reset: c; }
.film-ch button { width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid #2c3136; color: #a9adb1; padding: 9px 0 9px 16px; cursor: pointer; display: grid; gap: 2px; }
.film-ch b { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; color: #d9d6cf; font-weight: 700; }
.film-ch span { font-size: .93rem; display: none; }
.film-ch .on button { border-left-color: #ffb300; color: #f1efe9; }
.film-ch .on b { color: #ffb300; }
.film-ch .on span { display: block; }
.film-ch li:last-child.on b { color: #fff; }
@media (min-width: 960px) { .film-ch span { display: block; } .film-ch button { padding: 10px 0 10px 18px; } }