:root {
    --red: #cf001b;
    --red-dark: #8f0012;
    --red-deep: #520008;
    --gold: #d4a055;
    --gold-light: #f2d49d;
    --orange: #ed6a23;
    --orange-dark: #c94a0e;
    --green: #26a633;
    --green-dark: #147b22;
    --ink: #201714;
    --muted: #756d68;
    --soft: #f6f2ed;
    --white: #ffffff;
    --radius: 26px;
    --shadow: 0 24px 60px rgba(80, 0, 10, .14);
    --container: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
}

button,
input,
select {
    font: inherit;
}

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

img {
    max-width: 100%;
    display: block;
}

.site-header,
main,
section,
.site-footer {
    max-width: 100%;
}

.hero-content,
.hero-visual,
.register-copy,
.register-card,
.check-grid > *,
.faq-grid > *,
.rating-toolbar > * {
    min-width: 0;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

.container {
    width: min(calc(100% - 40px), var(--container));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.header-row {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 900;
    letter-spacing: -2px;
    transform: skew(-8deg);
}

.brand-zur {
    font-size: 34px;
    color: var(--red);
}

.brand-bosh {
    font-size: 22px;
    color: var(--ink);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    font-weight: 700;
}

.main-nav a:not(.nav-cta):hover {
    color: var(--red);
}

.nav-cta {
    color: var(--white);
    background: var(--red);
    padding: 12px 18px;
    border-radius: 999px;
}

.menu-toggle {
    position: relative;
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    left: 9px;
    right: 9px;
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
    transition: top .25s ease, transform .25s ease, opacity .18s ease;
}

.menu-toggle span:nth-child(1) { top: 12px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 28px; }

.menu-toggle.is-active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2);
}

.menu-toggle.is-active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

.menu-backdrop {
    position: fixed;
    inset: 78px 0 0;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    background: rgba(24, 12, 10, .48);
    backdrop-filter: blur(3px);
    transition: opacity .22s ease, visibility .22s ease;
}

.menu-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    color: var(--white);
    background:
        radial-gradient(circle at 55% 40%, rgba(255,0,24,.8), transparent 36%),
        linear-gradient(135deg, var(--red-deep), var(--red) 48%, #77000d);
}

.hero::after {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -120px;
    width: 65%;
    height: 280px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    transform: rotate(-8deg);
    opacity: .95;
}

.hero-grid {
    position: relative;
    z-index: 2;
    min-height: 720px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 40px;
    align-items: center;
    padding: 90px 0 110px;
}

.eyebrow,
.section-kicker {
    display: inline-block;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 800;
}

.eyebrow {
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 999px;
}

.hero h1 {
    margin: 0;
    font-size: clamp(72px, 10vw, 148px);
    line-height: .84;
    letter-spacing: -8px;
    font-style: italic;
    text-shadow: 12px 14px 0 rgba(48, 0, 4, .35);
}

.hero h1 span {
    display: block;
    font-size: .86em;
}

.hero-lead {
    max-width: 610px;
    margin: 30px 0;
    font-size: clamp(18px, 2vw, 25px);
    color: rgba(255,255,255,.9);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    padding: 0 24px;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-light {
    background: var(--white);
    color: var(--red);
}

.button-outline {
    color: var(--white);
    border: 1px solid rgba(255,255,255,.55);
}

.button-primary {
    color: var(--white);
    background: var(--red);
}

.button-dark {
    color: var(--white);
    background: var(--ink);
}

.button-full {
    width: 100%;
}

.hero-stats {
    display: flex;
    gap: 42px;
    margin-top: 42px;
}

.hero-stats div {
    display: grid;
    gap: 2px;
}

.hero-stats strong {
    font-size: 26px;
}

.hero-stats span {
    font-size: 13px;
    color: rgba(255,255,255,.72);
}

.hero-visual {
    position: relative;
    min-height: 520px;
}

.pack {
    position: absolute;
    width: 320px;
    height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 34px;
    border-radius: 18px;
    --pack-x: 0px;
    --pack-y: 0px;
    --pack-scroll: 0px;
    --pack-rotate: -8deg;
    box-shadow: 0 28px 50px rgba(0,0,0,.35);
    transform:
        translate3d(
            var(--pack-x),
            calc(var(--pack-y) + var(--pack-scroll)),
            0
        )
        rotate(var(--pack-rotate));
    transition: transform .18s ease-out;
    will-change: transform;
    overflow: hidden;
}

.pack::after {
    content: "";
    position: absolute;
    inset: auto -50px -90px auto;
    width: 240px;
    height: 190px;
    background: rgba(255,255,255,.14);
    transform: rotate(-20deg);
}

.pack-logo {
    position: relative;
    z-index: 1;
    font-size: 68px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -6px;
    text-shadow: 6px 6px 0 rgba(0,0,0,.22);
}

.pack-flavour {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pack-red {
    top: 35px;
    right: 18px;
    background: linear-gradient(135deg, #ec0a2a, #98000e);
}

.pack-orange {
    top: 195px;
    right: 160px;
    --pack-rotate: 6deg;
    background: linear-gradient(135deg, #ff832f, #db430d);
}

.pack-green {
    top: 340px;
    right: 28px;
    --pack-rotate: -3deg;
    background: linear-gradient(135deg, #38bf43, #107c21);
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .3;
}

.hero-shape-one {
    width: 320px;
    height: 320px;
    right: -70px;
    top: -80px;
    background: #ff9b00;
}

.hero-shape-two {
    width: 220px;
    height: 220px;
    left: 32%;
    bottom: -80px;
    background: #ff0000;
}

.section {
    padding: 100px 0;
}

.countdown-section {
    position: relative;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 88% 18%, rgba(255, 178, 63, .34), transparent 27%),
        linear-gradient(135deg, var(--red-deep), var(--red) 58%, #8a0011);
}

.countdown-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    left: -190px;
    bottom: -270px;
    border-radius: 50%;
    border: 70px solid rgba(255,255,255,.055);
}

.countdown-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.countdown-heading h2 {
    max-width: 760px;
    margin: 0 0 12px;
    font-size: clamp(40px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -3px;
}

.countdown-heading p {
    max-width: 720px;
    margin: 0;
    color: rgba(255,255,255,.72);
    font-size: 18px;
}

.countdown-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.countdown-card {
    padding: 28px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius);
    background: rgba(255,255,255,.1);
    box-shadow: 0 24px 55px rgba(47,0,6,.2);
    backdrop-filter: blur(14px);
}

.countdown-monthly {
    color: var(--ink);
    border-color: rgba(255,255,255,.48);
    background: linear-gradient(135deg, #f4d8a5, var(--gold));
}

.countdown-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
}

.countdown-card-head span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-card h3 {
    margin: 0;
    font-size: 24px;
}

.countdown-period {
    max-width: 190px;
    text-align: right;
    color: rgba(255,255,255,.7);
    font-size: 12px;
}

.countdown-monthly .countdown-period {
    color: rgba(32,23,20,.62);
}

.countdown-values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin: 28px 0 24px;
}

.countdown-values div {
    min-width: 0;
    padding: 16px 8px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255,255,255,.12);
}

.countdown-monthly .countdown-values div {
    background: rgba(255,255,255,.55);
}

.countdown-values strong {
    display: block;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-values span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.66);
    font-size: 11px;
    text-transform: uppercase;
}

.countdown-monthly .countdown-values span {
    color: rgba(32,23,20,.56);
}

.countdown-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.15);
}

.countdown-monthly .countdown-progress {
    background: rgba(32,23,20,.12);
}

.countdown-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--gold-light);
    transition: width .8s ease;
}

.countdown-monthly .countdown-progress span {
    background: var(--red);
}


.section-light {
    background: var(--white);
}

.section-soft {
    background: var(--soft);
}

.section-gold {
    background:
        linear-gradient(135deg, rgba(255,255,255,.28), transparent 35%),
        linear-gradient(135deg, #efc47f, var(--gold));
}

.section-red {
    color: var(--white);
    background:
        radial-gradient(circle at 90% 10%, rgba(255,124,0,.34), transparent 26%),
        linear-gradient(135deg, #5a0008, var(--red) 55%, #920012);
}

.section-heading {
    max-width: 700px;
    margin-bottom: 45px;
}

.section-heading h2,
.register-copy h2,
.check-grid h2,
.faq-grid h2 {
    margin: 0 0 14px;
    font-size: clamp(40px, 6vw, 72px);
    line-height: .98;
    letter-spacing: -3px;
}

.section-heading p,
.register-copy p,
.check-grid p,
.faq-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.section-heading-light p {
    color: rgba(255,255,255,.72);
}

.bloggers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.blogger-card {
    --team-color: var(--red);
    --team-color-dark: var(--red-dark);
    position: relative;
    overflow: hidden;
    border: 1px solid #eee7e2;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 18px 45px rgba(48, 0, 6, .08);
}

.team-card-one {
    --team-color: var(--red);
    --team-color-dark: var(--red-dark);
}

.team-card-two {
    --team-color: var(--orange);
    --team-color-dark: var(--orange-dark);
}

.team-card-three {
    --team-color: var(--green);
    --team-color-dark: var(--green-dark);
}

.blogger-card.is-leader {
    border-color: var(--gold);
    box-shadow: 0 24px 60px rgba(212,160,85,.3);
}

.team-card:hover {
    border-color: var(--team-color);
}

.leader-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--gold-light);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.blogger-photo {
    aspect-ratio: 4 / 4.5;
}

.placeholder-photo,
.placeholder-prize,
.placeholder-gallery {
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.76);
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
        linear-gradient(135deg, #3a2925, #a90317);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blogger-card-body {
    padding: 24px;
}

.blogger-number {
    color: var(--team-color);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blogger-card h3 {
    margin: 7px 0 18px;
    font-size: 28px;
}

.blogger-score {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
}

.blogger-score strong {
    font-size: 38px;
    color: var(--team-color);
}

.blogger-score span {
    color: var(--muted);
    font-size: 13px;
}

.score-bar {
    height: 10px;
    margin: 12px 0 22px;
    border-radius: 999px;
    overflow: hidden;
    background: #eee8e4;
}

.score-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--team-color);
}

.team-button {
    color: var(--white);
    background: var(--team-color);
}

.team-button:hover {
    background: var(--team-color-dark);
}

.battle-total {
    margin-top: 32px;
    padding: 28px;
    border-radius: var(--radius);
    background: var(--soft);
}

.battle-total-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.battle-total-head span {
    color: var(--muted);
    font-size: 13px;
}

.multi-progress {
    display: flex;
    height: 20px;
    overflow: hidden;
    border-radius: 999px;
    background: #ddd;
}

.team-one { background: var(--red); }
.team-two { background: var(--orange); }
.team-three { background: var(--green); }

.progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    color: var(--muted);
    font-size: 13px;
}

.progress-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
}

.register-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 65px;
    align-items: center;
}

.mini-steps {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 16px;
}

.mini-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 700;
}

.mini-steps span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--white);
}

.register-card {
    padding: 34px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label,
legend {
    font-size: 13px;
    font-weight: 800;
}

input,
select {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    border: 1px solid #ddd3cc;
    border-radius: 13px;
    padding: 0 15px;
    outline: 0;
    background: var(--white);
}

input:focus,
select:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(207,0,27,.08);
}

.register-card > form > label,
.register-card fieldset {
    display: block;
    margin-top: 18px;
}

fieldset {
    padding: 0;
    border: 0;
}

.team-choice {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.team-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.team-choice span {
    min-height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd3cc;
    border-radius: 13px;
    cursor: pointer;
}

.team-option {
    --team-color: var(--red);
}

.team-option-one { --team-color: var(--red); }
.team-option-two { --team-color: var(--orange); }
.team-option-three { --team-color: var(--green); }

.team-option span {
    color: var(--team-color);
    border-color: color-mix(in srgb, var(--team-color) 45%, #ddd3cc);
}

.team-option input:checked + span {
    color: var(--white);
    border-color: var(--team-color);
    background: var(--team-color);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--team-color) 26%, transparent);
}

.check-line {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 !important;
    color: var(--muted);
    font-weight: 500;
}

.check-line input {
    width: 18px;
    min-height: 18px;
    margin: 2px 0 0;
}

.form-status {
    display: none;
    margin-top: 16px;
}

.form-status.is-visible {
    display: block;
}

.status-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #eee8e4;
}

.status-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--red);
    transition: width .6s ease;
}

.status-message {
    margin-top: 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--soft);
    font-size: 14px;
}

.rating-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tab {
    min-height: 44px;
    border: 1px solid #ded7d1;
    border-radius: 999px;
    padding: 0 18px;
    background: var(--white);
    font-weight: 800;
    cursor: pointer;
}

.tab[data-team="1"] { --tab-color: var(--red); }
.tab[data-team="2"] { --tab-color: var(--orange); }
.tab[data-team="3"] { --tab-color: var(--green); }

.tab[data-team] {
    color: var(--tab-color);
    border-color: color-mix(in srgb, var(--tab-color) 42%, #ded7d1);
}

.tab.is-active {
    color: var(--white);
    border-color: var(--tab-color);
    background: var(--tab-color);
}

.rating-toolbar select {
    width: auto;
    min-width: 180px;
    margin: 0;
}

.rating-card {
    overflow: hidden;
    border: 1px solid #ece6e1;
    border-radius: var(--radius);
}

.rating-row {
    display: grid;
    grid-template-columns: 90px 1.4fr 1fr 90px;
    gap: 15px;
    align-items: center;
    min-height: 62px;
    padding: 0 24px;
    border-bottom: 1px solid #eee9e5;
}

.rating-row:last-child {
    border-bottom: 0;
}

.rating-head {
    min-height: 50px;
    color: var(--muted);
    background: var(--soft);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

#rating {
    --active-team-color: var(--red);
}

#rating[data-active-team="1"] { --active-team-color: var(--red); }
#rating[data-active-team="2"] { --active-team-color: var(--orange); }
#rating[data-active-team="3"] { --active-team-color: var(--green); }

.rating-row strong {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--active-team-color);
    font-size: 17px;
    transition: background .25s ease;
}

.rating-row b {
    text-align: right;
}

.prizes-grid {
    display: grid;
    grid-template-columns: 1.35fr .825fr .825fr;
    gap: 22px;
}

.prize-card {
    overflow: hidden;
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--white);
}

.prize-image {
    aspect-ratio: 16 / 10;
}

.prize-card > div:last-child {
    padding: 24px;
}

.prize-card span {
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.prize-card h3 {
    margin: 7px 0;
    font-size: 24px;
}

.prize-main {
    grid-row: span 2;
}

.prize-main .prize-image {
    aspect-ratio: 16 / 12;
}

.timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 9%;
    right: 9%;
    top: 31px;
    height: 3px;
    background: #eadfd8;
}

.timeline::after {
    content: "";
    position: absolute;
    left: 9%;
    top: 31px;
    width: var(--timeline-fill-width, 0%);
    height: 3px;
    background: var(--red);
    transition: width .65s ease;
}

.timeline-item {
    position: relative;
    z-index: 2;
}

.timeline-number {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 50%;
    color: var(--red);
    border: 3px solid #eadfd8;
    background: var(--white);
    font-weight: 900;
}

.timeline-item.is-complete .timeline-number,
.timeline-item.is-current .timeline-number {
    color: var(--white);
    border-color: var(--red);
    background: var(--red);
}

.timeline-item.is-current .timeline-number {
    box-shadow: 0 0 0 9px rgba(207,0,27,.12);
    transform: scale(1.07);
}

.timeline-number {
    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.timeline-item small {
    color: var(--red);
    font-weight: 800;
}

.timeline-item h3 {
    margin: 7px 0;
}

.timeline-item p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.check-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.check-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.check-form input {
    margin: 0;
}

.check-result {
    grid-column: 1 / -1;
    display: none;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--white);
}

.check-result.is-visible {
    display: block;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.gallery-item {
    aspect-ratio: 4 / 3;
    border-radius: 18px;
}

.gallery-item:nth-child(2),
.gallery-item:nth-child(5) {
    transform: translateY(24px);
}

.faq-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
}

.accordion {
    display: grid;
    gap: 10px;
}

.accordion-item {
    overflow: hidden;
    border-radius: 16px;
    background: var(--white);
}

.accordion-item button {
    width: 100%;
    min-height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 800;
    cursor: pointer;
}

.accordion-item button span {
    font-size: 24px;
    color: var(--red);
}

.accordion-content {
    display: none;
    padding: 0 20px 20px;
    color: var(--muted);
}

.accordion-item.is-open .accordion-content {
    display: block;
}

.site-footer {
    padding: 65px 0;
    color: rgba(255,255,255,.72);
    background: #1f1513;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 50px;
}

.footer-grid h4 {
    margin: 0 0 15px;
    color: var(--white);
}

.footer-grid a,
.footer-grid span {
    display: block;
    margin: 8px 0;
}

.footer-brand .brand-zur,
.footer-brand .brand-bosh {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 45px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.15);
    font-size: 13px;
}

.developer-credit strong {
    color: var(--white);
    letter-spacing: .5px;
}

@media (max-width: 980px) {
    body.menu-open {
        overflow: hidden;
    }

    .main-nav {
        position: fixed;
        inset: 90px 20px auto;
        z-index: 102;
        display: flex;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(.98);
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
        border-radius: 18px;
        background: var(--white);
        box-shadow: var(--shadow);
        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .menu-toggle {
        display: block;
    }

    .hero-grid,
    .register-grid,
    .check-grid,
    .faq-grid,
    .countdown-grid {
        grid-template-columns: 1fr;
    }

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

    .hero-grid {
        padding-top: 70px;
    }

    .hero-visual {
        min-height: 450px;
    }

    .bloggers-grid {
        grid-template-columns: 1fr;
    }

    .bloggers-grid .blogger-card,
    .blogger-card:first-child {
        width: 100%;
        max-width: none;
        grid-column: auto;
        justify-self: stretch;
    }

    .prizes-grid {
        grid-template-columns: 1fr 1fr;
    }

    .prize-main {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .timeline {
        grid-template-columns: 1fr 1fr;
    }

    .timeline::before,
    .timeline::after {
        display: none;
    }
}

@media (max-width: 680px) {
    .container {
        width: min(calc(100% - 28px), var(--container));
    }

    .section {
        padding: 72px 0;
    }

    .hero {
        min-height: auto;
    }

    .hero-grid {
        min-height: auto;
        padding: 64px 0 90px;
    }

    .hero h1 {
        font-size: 78px;
        letter-spacing: -5px;
    }

    .hero-actions,
    .hero-stats {
        flex-direction: column;
    }

    .hero-stats {
        gap: 16px;
    }

    .hero-visual {
        min-height: 390px;
    }

    .pack {
        width: 245px;
        height: 135px;
        padding: 20px 24px;
    }

    .pack-logo {
        font-size: 52px;
    }

    .pack-red {
        right: 0;
    }

    .pack-orange {
        right: auto;
        left: 0;
        top: 155px;
    }

    .pack-green {
        right: 10px;
        top: 275px;
    }

    .bloggers-grid,
    .prizes-grid,
    .timeline,
    .gallery-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .form-row,
    .team-choice {
        grid-template-columns: 1fr;
    }

    .rating-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .rating-toolbar select {
        width: 100%;
    }

    .rating-row {
        grid-template-columns: 54px 1fr 70px;
        padding: 12px 15px;
    }

    .rating-row span:nth-child(3) {
        display: none;
    }

    .check-form {
        grid-template-columns: 1fr;
    }

    .countdown-values {
        gap: 6px;
    }

    .countdown-card {
        padding: 22px 16px;
    }

    .countdown-card-head {
        flex-direction: column;
    }

    .countdown-period {
        max-width: none;
        text-align: left;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .gallery-item:nth-child(2),
    .gallery-item:nth-child(5) {
        transform: none;
    }

    .register-card {
        padding: 22px;
    }

    .section-heading h2,
    .register-copy h2,
    .check-grid h2,
    .faq-grid h2 {
        font-size: 44px;
        letter-spacing: -2px;
    }
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .pack,
    .button,
    .status-progress span,
    .menu-toggle span,
    .menu-backdrop,
    .main-nav,
    .timeline-number,
    .timeline::after,
    .countdown-progress span {
        transition: none;
    }
}