/* ============================================================
   NextGIS · Чёрная пятница 2026 · лендинг
   Шрифты, отступы (кратны 4 px), радиусы, высоты кнопок,
   анимация – по стайлгайду NextGIS (nextgis.ru/extra/styleguide).
   Цвета – палитра баннера «Чёрной пятницы».
   ============================================================ */

:root {
    /* ---------- Цвета (из баннера) ---------- */
    --bf-bg: #121212;
    --bf-bg-mid: #1d1a15;
    --bf-glow: rgba(255, 176, 32, 0.10);
    --bf-line: rgba(255, 190, 70, 0.24);
    --bf-line-strong: rgba(255, 197, 61, 0.56);
    --bf-surface: rgba(255, 255, 255, 0.03);
    --bf-surface-hover: rgba(255, 197, 61, 0.08);
    --bf-text: #f3efe6;
    --bf-text-secondary: #c9c1b2;
    --bf-text-muted: #948b7c;
    --bf-dates: #ffa64d;
    --bf-accent: #ffc53d;
    --bf-btn-bg: #ffc53d;
    --bf-btn-bg-hover: #ffd873;
    --bf-btn-text: #1a1204;
    --bf-btn-shine: rgba(255, 255, 255, 0.45);
    --bf-focus: #fff1c2;
    --bf-link-hover: #ffd873;

    /* ---------- Шрифты ---------- */
    --ng-font-heading: Ubuntu, Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    --ng-font-body: Roboto, Ubuntu, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ---------- Радиусы ---------- */
    --ng-radius-button: 8px;
    --ng-radius-card: 10px;
    --ng-radius-section: 12px;

    /* ---------- Высоты кнопок ---------- */
    --ng-control-height-md: 2.5rem;   /* 40 px */
    --ng-control-height-lg: 3rem;     /* 48 px, промо */

    /* ---------- Анимация ---------- */
    --ng-easing: cubic-bezier(0.2, 0, 0, 1);
    --ng-motion-fast: 120ms;
    --ng-motion-promo-shine: 750ms;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--bf-bg);
    background-image:
        radial-gradient(60% 40% at 50% 0%, var(--bf-glow), transparent 72%),
        linear-gradient(90deg, var(--bf-bg), var(--bf-bg-mid) 50%, var(--bf-bg));
    color: var(--bf-text);
    font-family: var(--ng-font-body);
    font-size: 1.0625rem;           /* 17 px */
    line-height: 1.75rem;           /* 28 px */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a:focus-visible {
    outline: 2px solid var(--bf-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    max-width: 75rem;               /* 1200 px */
    margin: 0 auto;
    padding: 0 1.5rem;              /* 24 px */
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    padding: 6rem 0 5rem;           /* 96 / 80 */
    text-align: center;
}

.hero-bg {
    position: absolute;
    top: -8rem;
    left: 50%;
    width: 36rem;
    height: 36rem;
    margin-left: -18rem;
    background: radial-gradient(circle, rgba(255, 176, 32, 0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-label {
    color: var(--bf-dates);
    font-family: var(--ng-font-heading);
    font-size: 1.125rem;            /* 18 px */
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 0.1875rem;      /* 3 px */
    text-transform: uppercase;
}

.logo {
    display: block;
    width: 11.5rem;                 /* 184 px */
    height: auto;
    margin: 1.25rem auto 0.5rem;    /* 20 / 8 */
}

.hero-title {
    margin: 1rem 0 0;
    font-family: var(--ng-font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hero-title span {
    color: var(--bf-accent);
    white-space: nowrap;
}

/* ---------- Кнопки (промо: Ubuntu, 48 px, блик при наведении) ---------- */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: var(--ng-control-height-lg);
    padding: 0 2rem;                /* 32 px */
    border: 1px solid transparent;
    border-radius: var(--ng-radius-button);
    background-color: var(--bf-btn-bg);
    color: var(--bf-btn-text);
    font-family: var(--ng-font-heading);
    font-size: 1.125rem;            /* 18 px */
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
    white-space: nowrap;
    transition:
        background-color var(--ng-motion-fast) var(--ng-easing),
        color var(--ng-motion-fast) var(--ng-easing);
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--bf-btn-shine), transparent);
    transition: left var(--ng-motion-promo-shine) var(--ng-easing);
    pointer-events: none;
}

/* Наведение и нажатие выглядят одинаково (правило стайлгайда) */
.btn:hover,
.btn:active {
    background-color: var(--bf-btn-bg-hover);
    color: var(--bf-btn-text);
}

.btn:hover::before {
    left: 100%;
}

.btn:focus-visible {
    outline: 2px solid var(--bf-focus);
    outline-offset: 2px;
    border-radius: var(--ng-radius-button);
}

.btn.content {
    margin-bottom: 3rem;            /* 48 px */
}

/* ---------- Цены ---------- */
#pricing {
    position: relative;
    padding: 7.5rem 0 5rem;         /* 120 / 80 */
}

#pricing::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(255, 176, 32, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.section-title {
    margin-bottom: 1rem;
    font-family: var(--ng-font-heading);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
}

.section-subtitle {
    margin-bottom: 4rem;            /* 64 px */
    color: var(--bf-dates);
    font-family: var(--ng-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2rem;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 2rem;
}

.card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 2.5rem 2rem;           /* 40 / 32 */
    border: 1px solid var(--bf-line);
    border-radius: var(--ng-radius-card);
    background-color: var(--bf-surface);
    transition:
        border-color var(--ng-motion-fast) var(--ng-easing),
        background-color var(--ng-motion-fast) var(--ng-easing);
}

/* Полоса сверху проявляется при наведении (только прозрачность) */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--bf-dates), var(--bf-accent));
    opacity: 0;
    transition: opacity var(--ng-motion-fast) var(--ng-easing);
}

.card:hover,
.card:active {
    border-color: var(--bf-line-strong);
    background-color: var(--bf-surface-hover);
}

.card:hover::before,
.card:active::before {
    opacity: 1;
}

.card:focus-visible {
    outline: 2px solid var(--bf-focus);
    outline-offset: 2px;
    border-radius: var(--ng-radius-card);
}

.card-title {
    margin-bottom: 1.5rem;
    font-family: var(--ng-font-heading);
    font-size: 1.75rem;             /* 28 px */
    font-weight: 500;
    line-height: 2.25rem;
}

.old-price {
    margin-bottom: 0.5rem;
    color: var(--bf-text-muted);
    font-size: 1rem;
    line-height: 1.5rem;
    text-decoration: line-through;
}

.new-price {
    color: var(--bf-accent);
    font-family: var(--ng-font-heading);
    font-size: 2.25rem;             /* 36 px */
    font-weight: 700;
    line-height: 2.75rem;
}

.new-price span {
    font-size: 1.125rem;
    vertical-align: super;
}

.divider {
    height: 1px;
    margin: 2rem 0 0;
    background: linear-gradient(90deg, transparent, var(--bf-line), transparent);
}

/* ---------- Описание ---------- */
.info {
    padding: 1.25rem 0 4rem;        /* 20 / 64 */
}

.info-left {
    max-width: 56rem;               /* 896 px */
    text-align: left;
}

.info-left h2 {
    margin-bottom: 2rem;
    font-family: var(--ng-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.75rem;
}

.info-left p.simple {
    margin-bottom: 1.5rem;
    color: var(--bf-text-secondary);
}

.info-left p.list-header {
    margin-bottom: 0.75rem;
    font-family: var(--ng-font-heading);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.75rem;
}

.info ul {
    margin: 0 0 1.5rem 1.25rem;
}

.info li {
    margin-bottom: 0.25rem;
    color: var(--bf-text-secondary);
}

.info li::marker {
    color: var(--bf-dates);
}

.info li a,
.info-small a {
    color: var(--bf-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2em;
    transition:
        color var(--ng-motion-fast) var(--ng-easing),
        text-decoration-color var(--ng-motion-fast) var(--ng-easing);
}

.info li a:hover,
.info-small a:hover {
    color: var(--bf-link-hover);
    text-decoration-color: currentColor;
}

.separator {
    height: 1px;
    margin: 4rem 0;
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Условия ---------- */
.info-small {
    padding: 0 0 5rem;
}

.info-small .info-left p {
    color: var(--bf-text-muted);
    font-size: 0.875rem;            /* 14 px */
    line-height: 1.5rem;
}

/* ---------- Фоновый блик внизу ---------- */
.pricing-bg-bottom {
    position: fixed;
    bottom: -6rem;
    left: -6rem;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(255, 176, 32, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ---------- Планшет ---------- */
@media (max-width: 768px) {
    .hero { padding: 5rem 0 4rem; }
    .hero-bg { width: 24rem; height: 24rem; margin-left: -12rem; top: -6rem; }
    #pricing { padding: 5rem 0 4rem; }
    #pricing::before { right: 0; width: 20rem; height: 20rem; }
    .pricing-grid { gap: 1.5rem; }
    .card { padding: 2rem 1.5rem; }
    .info-left h2 { font-size: 2rem; line-height: 2.5rem; }

    .btn-group {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
    .btn {
        width: 100%;
        max-width: 20rem;           /* 320 px */
    }
}

/* ---------- Телефон ---------- */
@media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .hero { padding: 4rem 0 2.5rem; }
    .hero-title { font-size: 2.5rem; }
    .hero-bg { width: 18rem; height: 18rem; margin-left: -9rem; top: -4rem; }
    #pricing { padding: 4rem 0 2.5rem; }
    .section-subtitle { margin-bottom: 2.5rem; }
    .btn-group { gap: 0.75rem; }
    .btn { padding: 0 1.5rem; font-size: 1rem; }
    .pricing-bg-bottom { width: 20rem; height: 20rem; }
}

/* ---------- Без анимации по системной настройке ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .btn::before, .card, .card::before,
    .info li a, .info-small a { transition: none; }
    .btn::before { display: none; }
}