:root {
    --bg: #070202;
    --bg-2: #120504;
    --panel: rgba(12, 5, 4, .78);
    --panel-strong: rgba(20, 8, 6, .92);
    --line: rgba(226, 174, 91, .26);
    --line-soft: rgba(226, 174, 91, .13);
    --gold: #f0c36f;
    --gold-2: #ffe3a2;
    --red: #9c1e18;
    --red-2: #e33e2f;
    --text: #fff4df;
    --muted: #c8b8a5;
    --soft: #8f7d68;
    --shadow: 0 24px 80px rgba(0,0,0,.55);
    --radius: 24px;
    --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 18% 12%, rgba(151, 21, 19, .28), transparent 34%),
        linear-gradient(180deg, rgba(9, 2, 2, .94), rgba(5, 1, 1, .98)),
        url('../img/panel-background-v2.webp') center top / cover fixed no-repeat,
        var(--bg);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.68), transparent 22%, transparent 76%, rgba(0,0,0,.72)),
        radial-gradient(circle at 50% 0%, rgba(245, 184, 95, .08), transparent 28%);
}

.bg-veil {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
}

.sakura-layer {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.petal {
    position: absolute;
    top: -8vh;
    left: var(--x, 50vw);
    width: var(--s, 12px);
    height: calc(var(--s, 12px) * .72);
    border-radius: 80% 0 80% 0;
    background: linear-gradient(135deg, rgba(255, 190, 204, .95), rgba(218, 61, 78, .72));
    box-shadow: 0 0 16px rgba(255, 108, 128, .25);
    opacity: var(--o, .62);
    transform: rotate(var(--r, 25deg));
    animation:
        fall var(--d, 14s) linear var(--delay, 0s) infinite,
        sway calc(var(--d, 14s) * .42) ease-in-out var(--delay, 0s) infinite alternate;
}

@keyframes fall {
    0% { top: -8vh; }
    100% { top: 108vh; }
}
@keyframes sway {
    0% { margin-left: -26px; transform: rotate(0deg); }
    100% { margin-left: 42px; transform: rotate(260deg); }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px clamp(18px, 5vw, 70px);
    background: rgba(5, 2, 2, .84);
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(16px);
}
.brand img { width: 188px; height: auto; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: #e8d4b8;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: .2s ease;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav .nav-cta {
    color: #180907;
    background: linear-gradient(135deg, #ffe5a5, #f0ad52 48%, #d84425);
    box-shadow: 0 10px 26px rgba(216, 68, 37, .28);
}

.section-shell {
    position: relative;
    z-index: 2;
    width: min(var(--max), calc(100% - 36px));
    margin-inline: auto;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1, h2, h3 { margin: 0; line-height: 1.08; }
h1 {
    font-size: clamp(2.1rem, 5.7vw, 4.65rem);
    letter-spacing: -.04em;
    font-weight: 900;
}
h2 {
    font-size: clamp(1.8rem, 4vw, 3.15rem);
    letter-spacing: -.035em;
    font-weight: 900;
}
h3 { font-size: 1.28rem; font-weight: 900; }
p { color: var(--muted); margin: 0 0 18px; }
strong { color: #fff2cd; }

.hero {
    min-height: calc(100vh - 73px);
    display: grid;
    place-items: center;
    padding: clamp(52px, 8vw, 96px) 0 48px;
    text-align: center;
}
.hero-content { width: min(920px, 100%); }
.hero-logo-wrap {
    width: min(560px, 82vw);
    margin: 0 auto 28px;
    padding: 6px 0;
    filter: drop-shadow(0 18px 32px rgba(0,0,0,.7));
}
.hero-logo-wrap img { width: 100%; }
.countdown-panel {
    margin: 0 auto 22px;
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--line);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(19, 8, 7, .78), rgba(7, 3, 3, .82));
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.countdown-label {
    display: block;
    margin-bottom: 18px;
    color: #efd8ad;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.countdown div {
    min-height: 112px;
    display: grid;
    place-items: center;
    padding: 16px 10px;
    border: 1px solid rgba(240, 195, 111, .28);
    border-radius: 22px;
    background: radial-gradient(circle at 50% 0%, rgba(240, 195, 111, .13), rgba(0,0,0,.26));
}
.countdown strong {
    display: block;
    color: var(--gold-2);
    font-size: clamp(2.15rem, 5vw, 4.2rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: -.05em;
    text-shadow: 0 0 24px rgba(238, 172, 77, .25);
}
.countdown span {
    color: #d4bea2;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.hero-text {
    width: min(780px, 100%);
    margin: 0 auto 24px;
    font-size: clamp(1rem, 1.8vw, 1.18rem);
}
.hero-actions, .modal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    color: #190906;
    background: linear-gradient(135deg, #ffe8ad, #f2b455 45%, #ec552d);
    box-shadow: 0 16px 38px rgba(229, 71, 38, .32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-ghost, .btn-soft {
    color: #ffe5b6;
    background: rgba(255,255,255,.055);
    border: 1px solid var(--line);
}
.btn-soft { width: 100%; }
.trust-strip {
    margin: 28px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.trust-strip span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #e6d1b1;
    background: rgba(0,0,0,.28);
    border: 1px solid var(--line-soft);
    font-size: .86rem;
    font-weight: 750;
}
.trust-strip span::before {
    content: "✓";
    margin-right: 7px;
    color: var(--gold);
}

.deadline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 26px;
    align-items: center;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(32, 8, 7, .86), rgba(8, 4, 4, .86));
    box-shadow: var(--shadow);
}
.deadline h1 { font-size: clamp(1.7rem, 3.6vw, 3rem); }
.deadline p { margin-bottom: 0; }
.countdown.compact { min-width: min(520px, 100%); }
.countdown.compact div { min-height: 86px; }
.countdown.compact strong { font-size: clamp(1.6rem, 3vw, 2.65rem); }

.section-title { text-align: center; padding-top: 82px; }
.section-title.left { text-align: left; padding-top: 0; }
.section-title p { width: min(800px, 100%); margin-inline: auto; }
.section-title.left p { margin-inline: 0; }

.kits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 30px;
    align-items: stretch;
}
.kit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(18, 7, 6, .9), rgba(8, 3, 3, .92));
    border: 1px solid var(--line-soft);
    box-shadow: 0 18px 54px rgba(0,0,0,.34);
}
.kit-card.featured {
    border-color: rgba(255, 210, 129, .62);
    background:
        radial-gradient(circle at 50% -8%, rgba(240, 195, 111, .18), transparent 34%),
        linear-gradient(180deg, rgba(30, 10, 7, .96), rgba(8, 3, 3, .95));
    box-shadow: 0 26px 80px rgba(240, 83, 44, .18), 0 18px 54px rgba(0,0,0,.44);
    transform: translateY(-10px);
}
.ribbon {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #1a0906;
    background: linear-gradient(135deg, #ffe8ad, #f2b455);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .09em;
}
.kit-tag {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--gold);
    background: rgba(240,195,111,.08);
    border: 1px solid var(--line-soft);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.kit-head p { margin: 12px 0 0; min-height: 78px; }
.price-row {
    display: grid;
    gap: 4px;
    padding: 18px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.price-row strong {
    color: #fff1cc;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: -.05em;
}
.price-row span { color: var(--gold); font-weight: 900; }
.note-box {
    padding: 14px;
    border-radius: 18px;
    color: #f4ddbd;
    background: rgba(151, 30, 24, .12);
    border: 1px solid rgba(240,195,111,.15);
    font-weight: 700;
}
.kit-card ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex: 1;
}
.kit-card li {
    position: relative;
    padding-left: 27px;
    color: #e7d6bf;
}
.kit-card li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--gold);
}
.kit-card .btn-primary { width: 100%; }

.trust-section {
    margin-top: 86px;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 24px;
    align-items: start;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 30px;
    border: 1px solid var(--line-soft);
    background: rgba(9, 4, 4, .72);
    box-shadow: var(--shadow);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.step-card {
    min-height: 210px;
    padding: 22px;
    border-radius: 22px;
    background: rgba(0,0,0,.26);
    border: 1px solid var(--line-soft);
}
.step-card span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #170806;
    background: var(--gold);
    font-weight: 950;
}
.step-card p { margin-bottom: 0; }

.comparison {
    margin-top: 82px;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 30px;
    border: 1px solid var(--line-soft);
    background: rgba(10, 4, 4, .76);
    box-shadow: var(--shadow);
}
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 780px; border-collapse: collapse; }
th, td {
    padding: 15px 14px;
    border-bottom: 1px solid rgba(240, 195, 111, .12);
    text-align: left;
    color: #e7d6bf;
}
th {
    color: var(--gold);
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .1em;
}
td:nth-child(3), th:nth-child(3) {
    background: rgba(240, 195, 111, .075);
    color: #fff0ca;
    font-weight: 900;
}

.faq { margin-top: 82px; }
.faq details {
    margin-bottom: 12px;
    padding: 19px 22px;
    border-radius: 20px;
    background: rgba(9,4,4,.74);
    border: 1px solid var(--line-soft);
}
.faq summary {
    cursor: pointer;
    color: #ffe3af;
    font-weight: 900;
}
.faq details p { margin: 12px 0 0; }

.final-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    margin-top: 82px;
    margin-bottom: 62px;
    padding: clamp(24px, 4vw, 40px);
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(105, 18, 14, .76), rgba(10, 4, 4, .88));
    border: 1px solid rgba(240,195,111,.3);
    box-shadow: var(--shadow);
}
.final-cta p { margin-bottom: 0; }

.footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 26px clamp(18px, 5vw, 72px);
    border-top: 1px solid var(--line-soft);
    background: rgba(4,2,2,.86);
    color: var(--muted);
}
.footer div { display: grid; gap: 4px; }
.footer strong, .footer a { color: var(--gold); font-weight: 900; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(8px);
}
.modal-card {
    position: relative;
    width: min(620px, 100%);
    padding: clamp(22px, 5vw, 34px);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(28, 9, 7, .98), rgba(5, 2, 2, .98));
    border: 1px solid rgba(240,195,111,.32);
    box-shadow: var(--shadow);
}
.modal-close {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--gold);
    background: rgba(255,255,255,.05);
    cursor: pointer;
    font-size: 1.35rem;
}
.modal-card textarea {
    width: 100%;
    min-height: 164px;
    resize: vertical;
    margin: 4px 0 16px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(0,0,0,.38);
    color: #fff4dc;
    padding: 16px;
    outline: none;
}
.modal-note { margin: 14px 0 0; font-size: .88rem; }

@media (max-width: 980px) {
    .deadline, .trust-section, .final-cta { grid-template-columns: 1fr; }
    .kits-grid { grid-template-columns: 1fr; }
    .kit-card.featured { transform: none; }
    .steps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .topbar { position: relative; flex-direction: column; align-items: center; }
    .brand img { width: 156px; }
    .nav { justify-content: center; flex-wrap: wrap; gap: 4px; }
    .nav a { padding: 8px 9px; font-size: .68rem; }
    .hero { min-height: auto; padding-top: 38px; }
    .hero-logo-wrap { width: min(440px, 92vw); }
    .countdown { grid-template-columns: repeat(2, 1fr); }
    .countdown div { min-height: 96px; }
    .deadline .countdown { grid-template-columns: repeat(2, 1fr); }
    .trust-strip { align-items: stretch; }
    .trust-strip span { width: calc(50% - 5px); text-align: center; }
    .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .petal { animation: none; display: none; }
    .btn { transition: none; }
}