.skip {
    position: absolute;
    left: -9999px;
    z-index: 30;
    padding: 10px 18px;
    border: 1px solid var(--border);
    border-radius: 0 0 12px 0;
    background: var(--card);
    color: var(--foreground);
}

.skip:focus { left: 0; top: 0; }

:root { --sticky-header: 64px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--sticky-header);
    border-bottom: 1px solid var(--border);
    background: oklch(0.13 0.02 282 / 0.72);
    backdrop-filter: blur(22px);
}

.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 10px; }

.site-nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }

.site-nav::-webkit-scrollbar { display: none; }

.site-nav a { padding: 8px 11px; border-radius: 10px; color: var(--muted-foreground); font-size: 14.5px; text-decoration: none; white-space: nowrap; }

.site-nav a:hover { background: oklch(1 0 0 / 0.06); color: var(--foreground); }

.nav-short { display: none; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 14px 30px -16px oklch(0.73 0.18 24 / 0.95); }

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -16px oklch(0.73 0.18 24 / 1); }

.btn-ghost { border-color: var(--border); background: oklch(1 0 0 / 0.04); color: var(--foreground); }

.btn-ghost:hover { border-color: oklch(0.73 0.18 24 / 0.55); color: var(--primary); }

.btn-sm { padding: 9px 16px; border-radius: 11px; font-size: 14.5px; }

.hero { position: relative; overflow: hidden; padding: 76px 0 66px; border-bottom: 1px solid var(--border); }

.hero::before {
    content: "";
    position: absolute;
    inset: -240px -12% auto;
    height: 760px;
    background:
        radial-gradient(540px 340px at 78% 46%, oklch(0.6 0.13 322 / 0.3), transparent 66%),
        radial-gradient(460px 300px at 14% 38%, oklch(0.73 0.18 24 / 0.16), transparent 62%);
    pointer-events: none;
}

.hero-grid { position: relative; display: grid; gap: 34px; align-items: start; }

@media (min-width: 920px) {
    .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 54px; align-items: center; }
}

.eyebrow { margin: 0 0 14px; color: var(--primary); font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -.024em; }

.lead { max-width: 60ch; margin: 0 0 22px; color: var(--muted-foreground); font-size: clamp(16px, 1.5vw, 18px); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }

.chips li { padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: oklch(1 0 0 / 0.03); color: var(--muted-foreground); font-size: 14px; }

.chips-note { margin: 0 0 22px; color: var(--muted-foreground); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

.actions .hint { flex-basis: 100%; margin: 0; color: var(--muted-foreground); font-size: 14px; }

.hero-card, .plan, .tile, .addons {
    border: 1px solid oklch(1 0 0 / 0.075);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, oklch(1 0 0 / 0.045), oklch(1 0 0 / 0.008) 46%, transparent),
        linear-gradient(180deg, oklch(0.175 0.024 282 / 0.94), oklch(0.135 0.02 282 / 0.92));
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.055),
        0 1px 2px -1px oklch(0 0 0 / 0.5),
        0 16px 40px -24px oklch(0 0 0 / 0.85);
}

.hero-card { padding: 26px; }

.card-title { margin: 0 0 16px; color: var(--muted-foreground); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.site-footer { padding: 46px 0 60px; border-top: 1px solid var(--border); background: oklch(0.13 0.02 282 / 0.5); color: var(--muted-foreground); font-size: 14.5px; }

.site-footer .wrap { display: grid; gap: 16px; }

.site-footer p { max-width: 70ch; margin: 0; }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

.footer-links a { color: var(--foreground); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px; }

.footer-links a:hover { color: var(--primary); border-color: var(--primary); }

.footer-copy { color: var(--muted-foreground); }

@media (min-width: 761px) and (max-width: 1023px) {
    :root { --sticky-header: 112px; }

    .site-nav { order: 3; width: 100%; margin-left: 0; }

    .header-cta { margin-left: auto; }
}

@media (max-width: 760px) {

    :root { --sticky-header: 0px; }

    .site-header { position: static; }

    .site-header .wrap { padding-block: 12px; }

    .header-cta { display: none; }

    .site-nav { order: 3; gap: 10px; width: 100%; margin-left: 0; justify-content: space-between; }

    .nav-full { display: none; }
    .nav-short { display: inline; }

    .site-nav a { padding: 10px 0; font-size: 13.5px; }

    .section { padding: 52px 0; }
    .hero { padding: 46px 0 42px; }
}

@media (max-width: 360px) {
    .site-header .wrap { padding-inline: 14px; }

    .site-nav a { font-size: 12.5px; }
}

@media print {
    :root {
        --background: #fff;
        --foreground: #000;
        --muted-foreground: #333;
        --primary: #000;
        --border: #bbb;
    }

    html, body { background: #fff; color: #000; }

    .site-header, .actions, .skip, .hero::before { display: none; }

    .hero-card, .plan, .plan-top, .tile, .addons, .callout, .section-alt, .site-footer, .steps li::before {
        background: none !important;
        box-shadow: none !important;
    }

    .plan, .callout { border-color: #bbb !important; }

    .callout { border-left-color: #000 !important; }

    .btn { border-color: #bbb !important; background: none !important; box-shadow: none !important; color: #000 !important; }

    a { color: #000; text-decoration: none; }
}

.section { padding: 68px 0; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--sticky-header) + 16px); }

.section:last-of-type { border-bottom: 0; }

.section-alt { background: oklch(0.13 0.02 282 / 0.5); }

.section h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px); line-height: 1.14; letter-spacing: -.022em; }

.section-intro { max-width: 70ch; margin: 0 0 32px; color: var(--muted-foreground); }

.section h3 { margin: 0 0 10px; font-size: 17px; }

.section p { max-width: 78ch; }

.facts, .marks { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }

.facts li, .marks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--muted-foreground); font-size: 15px; }

.facts li::before, .marks li::before { content: "✓"; color: var(--primary); font-weight: 700; }

.facts b { color: var(--foreground); font-weight: 600; }

.plans { display: grid; gap: 20px; margin: 0 0 24px; }

@media (min-width: 700px) {
    .plans { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

.plan { display: flex; flex-direction: column; padding: 28px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

.plan-top {
    border-color: oklch(0.73 0.18 24 / 0.45);
    background:
        linear-gradient(180deg, oklch(0.73 0.18 24 / 0.07), oklch(0.73 0.18 24 / 0.02) 46%, transparent),
        linear-gradient(180deg, oklch(0.2 0.03 284 / 0.96), oklch(0.15 0.024 284 / 0.94));
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.07),
        0 1px 2px -1px oklch(0 0 0 / 0.5),
        0 22px 50px -26px oklch(0 0 0 / 0.9),
        0 0 44px -22px oklch(0.73 0.18 24 / 0.5);
}

.plan-foot { margin-top: auto; padding-top: 26px; }

.plan-foot .btn { width: 100%; }

.plan:hover, .plan:focus-within {
    transform: translateY(-3px);
    border-color: oklch(1 0 0 / 0.16);
    box-shadow:
        inset 0 1px 0 oklch(1 0 0 / 0.055),
        0 26px 60px -30px oklch(0 0 0 / 0.9),
        0 0 44px -18px oklch(0.73 0.18 24 / 0.45);
}

.plan-name { margin: 0 0 8px; font-size: 19px; }

.plan-price { margin: 0 0 20px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.addons { padding: 22px 24px; }

.addons > p { margin: 0 0 6px; color: var(--muted-foreground); font-size: 14.5px; }

.addon-list { margin: 0; padding: 0; list-style: none; }

.addon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; padding: 15px 0; border-top: 1px solid var(--border); }

.addon:first-of-type { border-top: 0; }

.addon-name { font-weight: 600; }

.addon-price { margin-left: auto; font-weight: 700; white-space: nowrap; }

.addon-summary { flex-basis: 100%; color: var(--muted-foreground); font-size: 14.5px; }

.steps { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; counter-reset: step; }

.steps li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; color: var(--muted-foreground); }

.steps li::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid oklch(0.73 0.18 24 / 0.35);
    border-radius: 50%;
    background: oklch(0.73 0.18 24 / 0.12);
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
}

.steps b { display: block; color: var(--foreground); }

.tiles { display: grid; gap: 16px; margin: 0 0 24px; }

@media (min-width: 780px) {
    .tiles { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.tile { padding: 20px; }

.tile b { display: block; margin-bottom: 6px; }

.tile span { color: var(--muted-foreground); font-size: 14.5px; }

.pay-system { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 24px; }

.pay-system a { display: inline-flex; padding: 10px 16px; border-radius: var(--radius); background: #fff; }

.pay-system img { display: block; width: 161px; height: 24px; }

.pay-system span { color: var(--muted-foreground); font-size: 14.5px; }

.callout { margin: 26px 0 0; padding: 16px 20px; border: 1px solid oklch(0.73 0.18 24 / 0.28); border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; background: oklch(0.73 0.18 24 / 0.08); }

.callout p { margin: 0; }

.requisites { margin: 0; }

.requisites > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }

.requisites > div:last-child { border-bottom: 0; }

.requisites dt { color: var(--muted-foreground); }

.requisites dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }