/* ==========================================================================
   promorio.pro — responsive layer
   Breakpoints: 1080 / 900 / 720 / 520
   ========================================================================== */

@media (max-width: 1080px) {
    :root { --sec-y: 84px; }

    .site-nav { gap: 20px; }
    .nav { gap: 19px; }
    .nav a { font-size: .88rem; }

    .hero { padding: 84px 0 92px; }
    .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; }
    .hero-card { padding: 30px 26px 26px; }
    .hero-card-num { font-size: 3.5rem; }

    .split { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 48px; }

    .panel { padding: 42px; gap: 40px; }
    .ctaband { padding: 40px; gap: 32px; }
    .tickets { gap: 26px; }
    .ticket-top, .ticket-bottom { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 900px) {
    :root { --sec-y: 74px; }

    /* --- mobile navigation ---------------------------------------------- */
    .nav-toggle { display: flex; }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 26px 26px;
        background: rgba(17, 8, 13, .985);
        backdrop-filter: saturate(160%) blur(14px);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 26px 44px -30px rgba(0, 0, 0, 1);
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        display: none;
    }
    .site-nav.is-open { display: flex; }

    .nav { flex-direction: column; align-items: stretch; gap: 0; }
    .nav li { border-bottom: 1px solid var(--line-soft); }
    .nav a {
        display: block;
        padding: 15px 2px;
        font-size: 1rem;
    }
    .nav a::after { display: none; }

    .lang { align-self: flex-start; margin-top: 20px; }

    /* --- layout ---------------------------------------------------------- */
    .hero { padding: 64px 0 76px; }
    .hero-in { grid-template-columns: minmax(0, 1fr); gap: 46px; }
    .hero-sub, .hero-text { max-width: 58ch; }
    .hero-card { transform: rotate(-1.4deg); align-self: flex-start; max-width: 420px; }

    .pagehead { padding: 58px 0 46px; }

    .split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .split .col-head { position: static; }

    .tickets { grid-template-columns: minmax(0, 1fr); gap: 30px; }

    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .panel { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 38px 32px; }

    .ctaband { flex-direction: column; align-items: flex-start; }

    .footer-top { grid-template-columns: minmax(0, 1fr); gap: 42px; }
}

@media (max-width: 720px) {
    :root { --sec-y: 64px; }

    body { font-size: 16.5px; }

    .topbar-ad { display: none; }

    .sec-head { margin-bottom: 38px; }

    .chips { gap: 24px; }
    .chip-n { font-size: 1.4rem; }

    .grid-3 { grid-template-columns: minmax(0, 1fr); }

    .card { padding: 28px 24px; }

    .panel { padding: 32px 24px; }

    /* comparison table becomes stacked cards */
    .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; }
    .ctable thead { display: none; }
    .table-wrap { border: 0; border-radius: 0; background: none; overflow: visible; }
    .ctable tbody tr {
        margin-bottom: 16px;
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--surface);
    }
    .ctable tbody tr:last-child { margin-bottom: 0; }
    .ctable tbody th {
        padding: 14px 20px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--line-soft);
    }
    .ctable tbody td {
        border-left: 0;
        padding: 15px 20px 15px 20px;
        position: relative;
    }
    .ctable tbody td::before {
        content: attr(data-label);
        display: block;
        font-family: var(--mono);
        font-size: .66rem;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: var(--celeste);
        margin-bottom: 5px;
    }
    .ctable tbody tr td:last-child { border-bottom: 0; }

    .err { padding: 82px 0 92px; }

    .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 520px) {
    .wrap { padding: 0 20px; }

    .header-in { min-height: 66px; }
    .site-nav { padding: 10px 20px 22px; max-height: calc(100vh - 66px); }

    .brand-name { font-size: 1.16rem; }

    .btn { width: 100%; padding: 16px 24px; }
    .btn-lg { padding: 18px 26px; font-size: 1rem; }
    .err-alt a, .lang-opt { width: auto; }
    .err-alt a { padding: 9px 16px; }

    .hero { padding: 48px 0 62px; }
    .hero-note { margin-bottom: 34px; }
    .hero-card { transform: none; padding: 26px 22px 24px; }
    .hero-card::after { left: 22px; right: 22px; }
    .hero-card-num { font-size: 3rem; }

    .chips { flex-direction: column; gap: 18px; }

    .fcols { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    .ticket-top, .ticket-bottom { padding: 26px 22px; }
    .ticket-bottom::before,
    .ticket-bottom::after { display: none; }

    .disclaimer { padding: 20px; }
    .form-done { padding: 26px 22px; }
    .helpbox { padding: 20px; }
    .helpbox-v { font-size: 1.6rem; }

    .faq-item summary { font-size: 1.03rem; gap: 16px; }
}

/* print ------------------------------------------------------------------ */
@media print {
    .topbar, .site-header, .nav-toggle, .ctaband, .btn { display: none !important; }
    body { background: #fff; color: #111; }
    a { color: #111; }
}