/*
 * Brand stylesheet on top of Bootstrap 5.
 * Styled 1:1 after Figma: LP_KOWR-AKTUAL (Rozłóż OZE na 6 i wygraj!)
 */

/* ==========================================================================
   1. Tokens (values taken straight from the Figma file)
   ========================================================================== */

:root {
    --brand-green: #5fa524;
    --brand-green-dark: #16300a;
    --brand-green-darker: #1d3d0e;
    --brand-green-band: #8dc63f;
    --brand-green-deep: #2f6b12;
    --brand-yellow: #ffd500;
    --brand-yellow-dark: #eec500;
    --brand-ink: #16300a;
    --brand-body: #3e5730;
    --brand-muted: #7a8f6c;
    --brand-muted-light: #7fa35c;
    --brand-pale: #f2f7ea;
    --brand-pale-2: #eef7eb;
    --brand-pale-3: #e4f0d2;
    --brand-gray: #f7f7f7;
    --brand-border: #ddebc8;
    --brand-placeholder: #9cb08c;
    --brand-danger: #c24a1e;
    --brand-orange: #ff7700;

    --brand-primary: var(--brand-green-deep);
    --brand-secondary: var(--brand-yellow);
    --brand-secondary-dark: var(--brand-orange);
    --brand-success: var(--brand-green-deep);


    --brand-font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --radius-card: 10px;
    --radius-panel: 20px;
    --radius-form: 32px;
    --radius-input: 10px;
    --radius-pill: 100px;
    --shadow-soft: 0 12px 32px rgb(22 48 10 / 8%);
    --shadow-card: 0 20px 48px rgb(22 48 10 / 12%);


    --brand-radius: 16px;
    --brand-radius-sm: 10px;
    --brand-radius-pill: 999px;
    --brand-shadow: 0 12px 32px rgb(23 37 28 / 8%);
    --brand-shadow-lg: 0 20px 48px rgb(23 37 28 / 14%);

    --navbar-height: 97px;
    --section-spacing: clamp(4rem, 7vw, 7.5rem);

    /* Bootstrap theme binds */
    --bs-primary: var(--brand-green);
    --bs-primary-rgb: 95 165 36;
    --bs-link-color: var(--brand-green);
    --bs-link-color-rgb: 95 165 36;
    --bs-link-hover-color: var(--brand-green-dark);
    --bs-border-color: var(--brand-border);
    --bs-body-color: var(--brand-ink);
    --bs-body-font-family: var(--brand-font);
    --bs-focus-ring-color: rgb(95 165 36 / 25%);
}

/* ==========================================================================
   2. Base & Typography
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--brand-font);
    color: var(--brand-ink);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* Design frame is 1920px wide with 1520px of content. */
.container-lg {
    max-width: 1592px;
}

@media (min-width: 1340px) {
.container-lg {
    max-width: 1920px;
    padding-left: min(200px, 10.417vw);
    padding-right: min(200px, 10.417vw);
}
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font);
    font-weight: 800;
    line-height: 1.12;
    color: var(--brand-green-dark);
    text-transform: uppercase;
}

/* Figma: Poppins ExtraBold 64px, tracking -2px, leading 66.56px */
h2 {
    font-size: clamp(2.1rem, 3.4vw, 4rem);
    letter-spacing: -0.03em;
    line-height: 1.04;
    margin-bottom: 0;
}


.accent-star {
    color: var(--brand-green);
}

a {
    color: var(--brand-green);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-green-dark);
}

strong {
    font-weight: 700;
}

.note {
    color: var(--brand-muted);
    font-size: 0.85rem;
}

/* Scroll anchors clear the fixed navbar. */
.hook {
    display: block;
    position: relative;
    top: calc(-1 * var(--navbar-height) - 1rem);
    visibility: hidden;
}

section {
    padding: var(--section-spacing) 0;
    position: relative;
}

/* Section header: big heading left, lead below, optional action on the right. */
.section-head {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Figma: Poppins Regular 20px #3e5730, leading 1.4 */
.section-head .lead-text {
    color: var(--brand-body);
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    line-height: 1.4;
    max-width: 40rem;
    margin: 1.25rem 0 0;
}

.section-head.is-centered {
    text-align: center;
}

.section-head.is-centered .lead-text {
    margin-inline: auto;
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.btn {
    font-weight: 700;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

/* Yellow pill — main CTA. Figma: Poppins Bold 16px #16300a, padding 16/24. */
.btn-cta {
    background: var(--brand-yellow);
    border: none;
    color: var(--brand-green-dark);
    font-size: 1rem;
    line-height: 1.25;
    padding: 0.75rem 1.5rem;
}

.btn-cta:hover,
.btn-cta:focus {
    background: var(--brand-yellow-dark);
    color: var(--brand-green-dark);
    transform: translateY(-1px);
}

/* Dark-outline pill — "Regulamin" in section headers. Figma: 1px #16300a border. */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--brand-green-dark);
    color: var(--brand-green-dark);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25;
    padding: 0.75rem 1.5rem;
}

.btn-ghost:hover {
    background: var(--brand-green-dark);
    color: #ffffff;
}

/* Transparent pill with a white border — hero "Regulamin". */
.btn-outline-white {
    background: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.65rem 1.5rem 0.35rem 1.5rem;
}

.btn-outline-white:hover {
    background: var(--brand-green-dark);
    color: #ffffff;
}


/* Green pill — before-page "Regulamin". Figma: #5fa524 bg, SemiBold 16 white. */
.btn-green {
    background: var(--brand-green);
    border: 1px solid var(--brand-green);
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
}

.btn-green:hover,
.btn-green:focus {
    background: var(--brand-green-deep);
    border-color: var(--brand-green-deep);
    color: #ffffff;
}

/* Dark green pill — "Wybierz plik", kontakt e-mail. */
.btn-dark-green {
    background: var(--brand-green-dark);
    border: none;
    color: #ffffff;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
}

.btn-dark-green:hover,
.btn-dark-green:focus {
    background: #0f2206;
    color: #ffffff;
}

/* ==========================================================================
   4. Navbar
   ========================================================================== */

/* Figma: rgba(255,255,255,0.89) with 4px backdrop blur. */
.navbar.fixed-top {
    min-height: var(--navbar-height);
    background: rgb(255 255 255 / 89%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: box-shadow 0.2s ease;
    padding-block: 0.75rem;
}

@media (min-width: 1340px) {
.navbar .container-lg {
    max-width: 1920px;
    padding-left: min(120px, 6.25vw);
    padding-right: min(120px, 6.25vw);
}
}


.navbar.top-nav-collapse {
    box-shadow: 0 6px 24px rgb(22 48 10 / 10%);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
}

.navbar-brand img {
    height: 55px;
    width: auto;
}

.navbar-brand .brand-partner {
    height: 55px;
}

.navbar-nav {
        gap: 1.25rem;
}

/* Figma: Poppins SemiBold 18px #16300a, tracking 0.15px. */
.navbar .nav-link {
    color: var(--brand-ink);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.15px;
    padding: 0.5rem 1.15rem;
    transition: color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--brand-green);
}

/* Figma: 38px circle, #f2f7ea. */
.nav-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-pale);
    color: var(--brand-green-deep);
    margin-inline: 0;
    transition: background 0.15s ease;
}

.nav-social:hover {
    background: var(--brand-border);
}

.navbar-cta {
    margin-left: 0;
}

/* ==========================================================================
   5. Hero (Section_01)
   ========================================================================== */

.home {
    position: relative;
    min-height: min(100vh, 1080px);
    display: flex;
    align-items: center;
    background: url("../images/hero-bg-oQZ6CIE.jpg") center 30% / cover no-repeat;
    color: #ffffff;
    padding: clamp(96px, 8vw, 8rem) 0;
    overflow: hidden;
}

@media (max-width: 767.98px) {
.home {
    background-position: center bottom;
    background-size: 100% auto;
    background-color: #044074;
    align-items: flex-start;
    padding-bottom: 50vw;
}

 }

.home::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgb(22 48 10 / 55%) 0%, rgb(22 48 10 / 8%) 65%);
    pointer-events: none;
}

.hero-video {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .hero-video {
    width: 100%;
    height: auto;
    top: auto;
    bottom: 0;
    z-index: 1;
    }

    .video-blend {
    position: absolute;
    bottom: calc(84vw - 40px);
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(4, 64, 116, 1) 10%,
        rgba(4, 64, 116, 0) 100%
    );
}
 }

.home > .container-fluid {
    position: relative;
    z-index: 2;
}

/* Figma: uppercase Poppins Medium 12px white on transparent pill. */
.hero-badge {
    display: inline-block;

    border: 1px solid transparent;
    background: linear-gradient(-30deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0),  rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1));



    background-size: contain;
    backdrop-filter: blur(6px);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.7rem 1.6rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1.5rem;
}

.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;

  padding: 1px;
  border-radius: inherit;

  background: linear-gradient(
    -5deg,
    rgba(255, 255, 255, 0.75),
     rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0),

 rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0.75)
  );

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  mask-composite: exclude;

  pointer-events: none;
}

/* Figma: Poppins ExtraBold 92px, tracking -2px, leading 94px,
   text-shadow 1px 9px 25.7px rgba(22,48,10,0.7). */
.home h1 {
    color: #ffffff;
    font-size: clamp(2.6rem, 4.8vw, 5.75rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-shadow: 1px 9px 25.7px rgb(22 48 10 / 70%);
    margin-bottom: 1.75rem;
    max-width: 9em;
}

.home h1 .accent-6 {
    color: var(--brand-yellow);
}

/* Figma: Poppins SemiBold 22px #edf7de, leading 1.4, shadow 0 4px 6.7px #16300a. */
.home .lead {
    color: #edf7de;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.3vw, 1.375rem);
    line-height: 1.4;
    text-shadow: 0 4px 6.7px var(--brand-green-dark);
    max-width: 23em;
    margin-bottom: 1.9rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2.75rem;
}

/* Figma: Poppins SemiBold 15px, tracking 0.3px, yellow 8px dot. */
.hero-dates {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.3px;
    text-shadow: 0 4px 4px rgb(0 0 0 / 25%);
}

.hero-dates::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--brand-yellow);
    flex: none;
}

.home .hero-ai-note {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 2.8vw, 3.4rem);
    bottom: 1.5rem;
    color: #ffffff;
    font-size: 0.75rem;
}

/* ==========================================================================
   6. Zasady (section_02)
   ========================================================================== */

.zasady {
    background: var(--brand-gray);
}

.section-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.rule-card {
    position: relative;
    border-radius: var(--radius-panel);
    padding: clamp(1.5rem, 2.5vw, 2.2rem);
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rule-card.is-light {
    background: var(--brand-pale);
    color: var(--brand-ink);
}

.rule-card.is-green {
    background: var(--brand-green);
    color: #ffffff;
}

/* Figma: Poppins ExtraBold 202px, tracking -6.06px; #cedfb5 / #e4f0d2. */
.rule-card .rule-num {
    position: absolute;
    top: -1.75rem;
    right: -0.5rem;
    font-size: min(42.5vw, 12.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #cedfb5;
    pointer-events: none;
}

.rule-card.is-green .rule-num {
    color: var(--brand-pale-3);
}

/* Figma: uppercase Poppins SemiBold 16px, radius 6px. */
.rule-badge {
    display: inline-block;
    align-self: flex-start;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    border-radius: 6px;
    padding: 0.8rem 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 90%;
}

.rule-card.is-light .rule-badge {
    background: var(--brand-green);
    border: 1px solid var(--brand-green);
    color: #ffffff;
}

.rule-card.is-green .rule-badge {
    background: var(--brand-yellow);
    color: var(--brand-green-dark);
}

.rule-photo {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.rule-photo img,
.rule-photo video {
    width: 100%;
    height: auto;
    aspect-ratio: 670 / 300;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Figma: linear-gradient(20deg, rgba(0,0,0,0.92) 4%, rgba(102,102,102,0) 51%). */
.rule-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(19.98deg, rgb(0 0 0 / 92%) 3.9%, rgb(102 102 102 / 0%) 51.1%);
    pointer-events: none;
}

.rule-photo .ai-note {
    position: absolute;
    z-index: 1;
    left: 1.25rem;
    bottom: 0.65rem;
    color: #ffffff;
    font-size: 0.75rem;
}

/* Figma: uppercase Poppins ExtraBold 26px, tracking -0.81px. */
.rule-card h3 {
    font-size: clamp(1.3rem, 1.7vw, 1.625rem);
    letter-spacing: -0.031em;
    margin-bottom: 0.4rem;
}

.rule-card.is-green h3 {
    color: #ffffff;
}

/* Figma: Poppins Regular 18px, leading 1.4. */
.rule-card p {
    font-size: clamp(0.95rem, 1vw, 1.125rem);
    line-height: 1.4;
    color: var(--brand-body);
    margin-bottom: 1.25rem;
}

.rule-card.is-green p {
    color: #ffffff;
}

/* Figma: Poppins Bold 15px; #2f6b12 / #ffd500. */
.rule-cta-note {
    margin-top: auto;
    font-weight: 700;
    font-size: 0.9375rem;
}

.rule-card.is-light .rule-cta-note {
    color: var(--brand-green-deep);
}

.rule-card.is-green .rule-cta-note {
    color: var(--brand-yellow);
}

/* Konkurs w dwóch etapach */
.stages-panel {
    background: #ffffff;
    border-radius: var(--radius-panel);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
}

/* Figma: uppercase Poppins ExtraBold 26px. */
.stages-panel h3 {
    font-size: clamp(1.3rem, 1.7vw, 1.625rem);
    margin-bottom: 2.3rem;
}

.stage {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.65rem;
    row-gap: 0.5rem;
}

/* Figma: 40px circle, Poppins Bold 21px. */
.stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.3125rem;
}

.stage-num.is-green {
    background: var(--brand-green);
    color: #ffffff;
}

.stage-num.is-yellow {
    background: var(--brand-yellow);
    color: var(--brand-green-dark);
}

/* Figma: Poppins ExtraBold 20px. */
.stage h4 {
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: none;
    align-self: center;
    margin: 0;
}

/* Figma: Poppins Regular 18px #3e5730, leading 1.4. */
.stage p {
    grid-column: 2;
    color: var(--brand-body);
    font-size: 1.125rem;
    line-height: 1.4;
    margin: 0;
    max-width: 620px;
}

/* Figma: Poppins Regular 13px #7a8f6c. */
.stages-footnote {
    color: var(--brand-muted);
    font-size: 0.8125rem;
    margin: 2.5rem 0 0;
}

/* ==========================================================================
   7. Nagrody (section_03)
   ========================================================================== */

.nagrody {
    background: var(--brand-pale);
}

/* Figma: white pill, 1px #ddebc8 border, 6/7 padding. */
.class-toggle {
    display: inline-flex;
    gap: 6px;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-pill);
    padding: 6px;
}

/* Figma: Poppins ExtraBold 16px; active bg #16300a. */
.class-toggle .btn {
    border: none;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    color: var(--brand-green-dark);
    background: transparent;
}

.class-toggle .btn.active {
    background: var(--brand-green-dark);
    color: #ffffff;
}

/* Figma: uppercase Poppins ExtraBold 16px #16300a. */
.prizes-label {
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--brand-green-dark);
    margin-bottom: 0.65rem;
    padding: 0.5rem 0;
}

/* Figma: #5fa524 card, radius 10, padding 10/20/20. */
.prize-card {
    background: var(--brand-green);
    border-radius: var(--radius-card);
    padding: 0.625rem 1.25rem  3.25rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}



.prize-card.is-dark {
    background: var(--brand-green-dark);
}

/* Figma: uppercase Poppins ExtraBold 20px white. */
.prize-place {
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: #ffffff;
    padding-block: 0.75rem;
    line-height: 1;
}

.prize-card.is-dark .prize-place {
    color: var(--brand-yellow);
}

.prize-photo {
    position: relative;
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 330 / 200;
    overflow: hidden;
}





.prize-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: opacity 0.4s ease;
}


.image-hovered {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.prize-photo:hover .image-default {
  opacity: 0;
}

.prize-photo:hover .image-hovered {
  opacity: 1;
}

/* Group prizes show full-bleed photos with a dark bottom-left gradient. */
.prize-photo.is-cover {
    padding: 0;
}

.prize-photo.is-cover img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.prize-photo.is-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
    background: linear-gradient(13.4deg, rgb(0 0 0 / 73%) 0.4%, rgb(102 102 102 / 0%) 50.9%);
    pointer-events: none;
}

.prize-photo .ai-note {
    position: absolute;
    z-index: 1;
    left: 1.25rem;
    bottom: 0.65rem;
    color: #ffffff;
    font-size: 0.75rem;
}

/* Figma: Poppins ExtraBold 20px white. */
.prize-name {
    font-weight: 800;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
}

/* Group prize captions use SemiBold in the design. */
.prize-name.is-regular {
    font-weight: 600;
    line-height: 1.2;
}

.prize-card.is-dark .prize-name {
    color: var(--brand-yellow);
}

/* Figma: yellow band, 110px tall, 58px count + 24px text. */
.prizes-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    background: var(--brand-yellow);
    border-radius: var(--radius-card);
    min-height: 110px;
    padding: 1.25rem 1.25rem;
    color: var(--brand-green-dark);
}

.prizes-banner .banner-count {
    font-size: clamp(2.4rem, 3vw, 3.625rem);
    font-weight: 800;
    line-height: 1;
}

.prizes-banner .banner-text {
    font-weight: 800;
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
    margin: 0;
}

/* Figma: Poppins Regular 12px #7a8f6c. */
.prizes-footnote {
    color: var(--brand-muted);
    font-size: 0.75rem;
    line-height: 1.2;
    max-width: 60rem;
    margin: 2rem 0 0;
}

/* ==========================================================================
   8. Formularz (section_04)
   ========================================================================== */

/* Figma: white + rgba(88,178,57,0.1) overlay with the Warstwa_1 waves behind. */
.form-section {
    background-image: url("../images/form-waves-FblQMaB.svg");
    background-position: top center;
    background-size: cover;
    background-color: var(--brand-pale-2);
    overflow: hidden;
}

.form-section .form-waves {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(233vw, 1920px);
    height: auto;
    pointer-events: none;
}

.form-section > .container-lg {
    position: relative;
}

.form-section .section-head {
    text-align: center;
}

/* Figma: #f2f7ea, radius 32. */
.form-card {
    background: var(--brand-pale);
    border-radius: var(--radius-form);
    padding: clamp(1.5rem, 4vw, 3.8rem);
    max-width: 1080px;
    margin: 0 auto;
}

.form-card:has(.zgody) {
    background: #fff;
}

/* Step indicator — Figma: 30px dots, #ffd500 active / #ddebc8 idle, Bold 14 labels. */
.form-steps {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.form-step {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brand-green-dark);
    flex: none;
}

.form-step .step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-border);
    color: var(--brand-muted);
    font-weight: 800;
    font-size: 0.875rem;
}

.form-step.active .step-dot {
    background: var(--brand-yellow);
    color: var(--brand-green-dark);
}

.form-steps .step-line {
    flex: 1;
    height: 2px;
    background: var(--brand-border);
}

/* Type tabs — Figma: white pill, #ddebc8 border, active bg #5fa524, ExtraBold 17. */
.form-tabs {
    display: flex;
    gap: 10px;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-pill);
    padding: 8px;
    margin-bottom: 2rem;
}

.form-tabs .btn {
    flex: 1;
    border: none;
    font-weight: 800;
    font-size: 1.0625rem;
    padding: 0.875rem 1rem;
    color: var(--brand-green-dark);
    background: transparent;
}

.form-tabs .btn.active {
    background: var(--brand-green);
    color: #ffffff;
}

/* Fields — Figma: Bold 14 labels, white inputs with 1px #ddebc8 border, radius 10. */
.form-card label,
.form-card .form-label {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brand-green-dark);
    margin-bottom: 0.6rem;
}

.form-card .form-label-l {
    font-size: 1.25rem;
}

.form-card label .req,
.form-card .form-label .req {
    color: var(--brand-danger);
}

.form-card .form-control,
.form-card .form-select {
    background-color: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-input);
    padding: 1rem 1.15rem;
    font-size: 1.0625rem;
    color: var(--brand-ink);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-card .form-control::placeholder {
    color: var(--brand-placeholder);
}

.form-card .form-select.is-empty {
    color: var(--brand-placeholder);
}

.form-card .form-control:focus,
.form-card .form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem rgb(95 165 36 / 15%);
}

/* Selects: chevron only where the design shows one. */
.form-card .form-select {
    background-image: url("../images/icon-caret-down-OG65QAx.svg");
    background-size: 16px;
}

.form-card .form-select.no-chevron {
    background-image: none;
}

.school-autocomplete {
    position: relative;
}

.school-autocomplete-results {
    position: absolute;
    z-index: 20;
    top: calc(100% - 1.25rem);
    right: 0;
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-soft);
}

.school-autocomplete-option,
.school-autocomplete-empty {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    background: #ffffff;
    color: var(--brand-ink);
    text-align: left;
}

.school-autocomplete-option:hover,
.school-autocomplete-option:focus {
    background: var(--brand-pale);
    outline: none;
}

.school-autocomplete-empty {
    color: var(--brand-muted);
}

/* Upload — Figma: 2px dashed #b9d493, radius 18, 52px icon disc on #e4f0d2. */
.upload {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: #ffffff;
    border: 2px dashed #b9d493;
    border-radius: 18px;
    padding: 1.1rem 1.6rem;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.upload:hover {
    border-color: var(--brand-green);
}

.upload-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand-pale-3);
    color: var(--brand-green-dark);
}

.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-texts {
    flex: 1;
    min-width: 0;
}

/* Figma: Bold 17 title + Regular 14 #7a8f6c hint. */
.upload-label {
    display: block;
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--brand-green-dark);
}

.file-info {
    display: block;
    color: var(--brand-muted);
    font-size: 0.875rem;
}

.upload .btn {
    /* position: relative;
    z-index: 1;
    flex: none; */
}

.form-divider {
    border: 0;
    border-top: 1px solid var(--brand-border);
    opacity: 1;
    margin: 2.25rem 0;
}

/* Consents (step 2) */

.zgody {
    padding-top: 3.75rem;
}

.zgody .form-check {
    padding: 1.25rem 1.25rem 1.25rem 3.375rem;
    background: var(--brand-pale);
    border-radius: 0.625rem;
}

.zgody .form-check-input {
    border-color: var(--brand-green);
    width: 1.5em;
    height: 1.5em;
    margin-top: 0.12em;
    margin-left: -2rem;
}

.zgody .form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.zgody .form-check-label {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--brand-body);
}

.zgody .zgody-all {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--brand-border);
}

.zgody .zgody-all .form-check-label {
    font-weight: 700;
    color: var(--brand-green-dark);
}

.form-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.form-nav .note {
    margin: 0 auto 0 0;
}

.btn-cta .arrow {
    margin-left: 0.4rem;
}

/* Fields hidden while on another step */
.form-step-panel[hidden] {
    display: none;
}

/* ==========================================================================
   9. OZE na 6 rozłożę (Section_05)
   ========================================================================== */

.oze-section {
    background: var(--brand-green-dark);
    overflow: hidden;
}

/* Figma: Poppins ExtraBold 453px #1d3d0e, tracking -13.59px. */
.oze-section .big-6 {
    position: absolute;
    top: 2rem;
    left: calc(50% - min(1080px, 62vw));
    font-size: clamp(18rem, 23.6vw, 28.3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand-green-darker);
    pointer-events: none;
    user-select: none;
}

.oze-section .container-lg {
    position: relative;
}

.oze-section h2 {
    color: #ffffff;
}

.oze-section h2 .accent-6 {
    color: var(--brand-yellow);
}

/* Figma: Poppins Regular 20px #b2c79a. */
.oze-section .lead-text {
    color: #b2c79a;
}

/* Figma: white card radius 10, padding 20/16. */
.card-6z {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 1.25rem 1rem;
    height: 100%;
}

/* Figma: 72px tile, radius 16, #ffd500, ExtraBold 25 with -0.75px tracking. */
.card-6z .num-6z {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--brand-yellow);
    color: var(--brand-green-dark);
    font-weight: 800;
    font-size: 1.5625rem;
    letter-spacing: -0.03em;
    margin: 0 0.6rem 1rem;
}

/* Figma: uppercase Poppins ExtraBold 29px, tracking -0.87px. */
.card-6z h3 {
    font-size: 1.8125rem;
    letter-spacing: -0.03em;
    padding-inline: 0.6rem;
    margin-bottom: 0.35rem;
}

/* Figma: Poppins Regular 18px #3e5730, leading 1.4. */
.card-6z p {
    color: var(--brand-body);
    font-size: 1.125rem;
    line-height: 1.4;
    padding-inline: 0.6rem;
    margin: 0;
}

/* ==========================================================================
   10. Quiz — Fakty i fejki (section_06)
   ========================================================================== */

.quiz-section {
    background: var(--brand-pale);
}

/* Figma: white pill with 1px #ddebc8 border; Bold 14 #3e5730. */
.quiz-status {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-pill);
    padding: 0.55rem 0.55rem 0.55rem 1.3rem;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--brand-body);
}

/* Figma: #e4f0d2 pill, Bold 13 #2f6b12. */
.quiz-status .btn-restart {
    background: var(--brand-pale-3);
    color: var(--brand-green-deep);
    border: none;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
}

.quiz-status .btn-restart:hover {
    background: #c9e2b0;
    color: var(--brand-green-deep);
}

/* Figma: white card, radius 10, padding 26/35, 14px gap between items. */
.quiz-item {
    background: #ffffff;
    border-radius: var(--radius-card);
    padding: 1.6rem 2.2rem;
    margin-bottom: 14px;
    transition: all .3s ease-in-out;
}

@media (max-width: 767.98px) {
    .quiz-item {
        padding: 1rem;
    }
}

.quiz-solved.quiz-item[data-answer="fejk"] {
    background-color: #FFF9F4;
}

.quiz-solved.quiz-item[data-answer="fakt"] {
    background-color: #F2F7EA;
}

.quiz-solved .quiz-num {
    background-color: #fff;
}

.quiz-item-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Figma: 50px tile, radius 6, #f2f7ea bg, ExtraBold 21 #5fa524. */
.quiz-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 52px;
    border-radius: 6px;
    background: var(--brand-pale);
    color: var(--brand-green);
    font-weight: 800;
    font-size: 1.3125rem;
    letter-spacing: -0.03em;
}

/* Figma: Poppins Bold 27px #16300a. */
.quiz-item h3 {
    font-weight: 700;
    font-size: clamp(1.15rem, 1.4vw, 1.6875rem);
    text-transform: none;
    margin: 0 0 0 0.65rem;
    flex: 1;
}

.quiz-actions {
    display: flex;
    gap: 1.25rem;
    flex: none;
}

/* Figma: 1px #5fa524 border pill, Bold 16 #5fa524. */
.quiz-actions .btn {
    background: transparent;
    border: 1px solid var(--brand-green);
    color: var(--brand-green);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.5rem;
    line-height: 1;
}

.quiz-actions .btn:hover {
    background: var(--brand-pale);
    color: var(--brand-green);
}

.quiz-actions .btn.is-correct {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #ffffff;
}

.quiz-actions .btn.is-wrong {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #ffffff;
}

.quiz-answer {
    margin-top: 1.75rem;
}

.quiz-answer[hidden] {
    display: none;
}

/* Figma: full-width verdict band, Bold 27 white, centered;
   #5fa524 for facts, #ff7700 for fakes. */
.quiz-verdict {
    display: block;
    border-radius: var(--radius-card);
    padding: 0.65rem;
    font-weight: 700;
    font-size: clamp(1.2rem, 1.4vw, 1.6875rem);
    text-align: center;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.quiz-item[data-answer="fakt"] .quiz-verdict {
    background: var(--brand-green);
}

.quiz-item[data-answer="fejk"] .quiz-verdict {
    background: var(--brand-orange);
}

/* Figma: Poppins Regular 20px #3e5730, leading 1.4. */
.quiz-answer p {
    color: var(--brand-body);
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
}

/* ==========================================================================
   11. Film (section_07)
   ========================================================================== */

.film-section {
    background: var(--brand-gray);
}

/* Figma: Poppins ExtraBold 59px, tracking -2px. */
.film-section h2 {
    font-size: clamp(2rem, 3.1vw, 3.6875rem);
}

.film-section  .lead-text {
    color: var(--brand-body);
    font-size: clamp(1rem, 1.1vw, 1.25rem);
    line-height: 1.4;
    max-width: 40rem;
    margin: 1.25rem 0 0;
}



/* Figma: 960x540 box, radius 28, #16300a. */
.video-box {
    position: relative;
    border-radius: 28px;
    background: var(--brand-green-dark);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Figma: 104px yellow disc with a #16300a play glyph and soft shadow. */
.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 104px;
    height: 104px;
    border-radius: 52px;
    background: var(--brand-yellow);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 20px rgb(0 0 0 / 30%);
    transition: transform 0.2s ease;
}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.video-box.is-playing .play-btn {
    display: none;
}

/* Restricted jury panel */
.jury-panel {
    min-height: 100vh;
    background: var(--brand-gray);
}

.jury-header {
    padding: 1rem 0;
    background: #ffffff;
    border-bottom: 1px solid var(--brand-border);
}

.jury-header .container-fluid {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.jury-header img {
    width: 88px;
}

.jury-header h1,
.jury-header p {
    margin: 0;
}

.jury-header h1 {
    font-size: 1.5rem;
}

.jury-table {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
}

.jury-table .table {
    margin: 0;
}

.jury-score-form {
    display: flex;
    gap: 0.5rem;
    min-width: 10rem;
}

/* ==========================================================================
   12. Kontakt
   ========================================================================== */

.kontakt {
    background: var(--brand-green-band);
    padding: clamp(2.5rem, 4vw, 4rem) 0;
}

/* Figma: uppercase Poppins ExtraBold 52px, tracking -2px. */
.kontakt h2 {
    font-size: clamp(1.8rem, 2.7vw, 3.25rem);
}

/* Figma: Poppins Regular 20px #24450f. */
.kontakt .lead-text {
    color: #24450f;
    font-size: 1.25rem;
    margin: 0.9rem 0 0;
}

/* Figma: #16300a pill, Bold 18 white, yellow envelope icon. */
.contact-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--brand-green-dark);
    color: #ffffff;
    font-size: min(3.75vw, 1.125rem);
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
}

.contact-email-btn:hover {
    background: #0f2206;
    color: #ffffff;
}

.contact-email-btn img {
    flex: none;
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

footer {
    background: var(--brand-pale);
    padding: clamp(3rem, 5vw, 7.5rem) 0 0;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.footer-brand img {
    height: 55px;
    width: auto;
}

.footer-brand .brand-partner-tile {
    display: inline-flex;
}

.footer-brand .brand-partner-tile img {
    height: 77px;
}

/* Figma: Poppins Regular 16px #16300a. */
.footer-col p {
    color: var(--brand-ink);
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

/* Figma: uppercase Poppins SemiBold 12px #7fa35c, tracking 1.44px. */
.footer-col .footer-label {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--brand-muted-light);
    margin-bottom: 0.5rem;
}


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

.footer-links a {
    display: inline-block;
    color: var(--brand-ink);
    font-size: 1rem;
    padding: 0.15rem 0;
}

.footer-links a:hover {
    color: var(--brand-green);
}

/* Figma: 0.5px #5fa524 divider, Poppins Regular 14px. */
.footer-bottom {
    border-top: 0.5px solid var(--brand-green);
    margin-top: clamp(2.5rem, 5vw, 6rem);
    padding: 1.6rem 0;
    color: var(--brand-ink);
    font-size: 0.875rem;
}

/* ==========================================================================
   14. Thank-you card (popup shown inline, in place of the form)
   ========================================================================== */

.thx-card {
    background: #ffffff;
    border-radius: var(--radius-card);
    max-width: 728px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 7.5rem) clamp(3rem, 7vw, 7.5rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
}

/* Figma: 44px #5fa524 disc with a 24px smiley. */
.thx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-green);
}

/* Figma: Poppins Bold 20px #16300a, leading 1.2. */
.thx-text {
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--brand-green-dark);
    margin: 0;
}

.thx-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ==========================================================================
   15. Standalone before/after pages (full-viewport, no navbar)
   ========================================================================== */

.standalone-page {
    min-height: 100vh;

    color: #ffffff;
    position: relative;
}

.standalone-page.is-before {
    background-image: url("../images/before-bg-643pVjU.jpg") ;
    background-position: center center;
    background-size: cover;
    background-color: #1074b4;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.standalone-page.is-after {
    background: url("../images/hero-bg-oQZ6CIE.jpg") center center / cover no-repeat #1074b4;
}

/* Figma (after page): blue gradient fading down from the top. */
.standalone-page.is-after::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(14 90 150 / 62%) 14.8%, rgb(18 99 160 / 0%) 60.9%);
    pointer-events: none;
}

.standalone-inner {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding:  7.5rem  1.25rem 1.25rem 1.25rem;
}

.standalone-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Figma: uppercase Poppins ExtraBold 64px, tracking -2px, leading 66.56px. */
.standalone-title {
    color: #ffffff;
    font-size: clamp(2.1rem, 4.946vw, 4rem);
    letter-spacing: -0.03em;
    line-height: 1.04;
    max-width: 1130px;
    margin-bottom: 0.65rem;
}

.standalone-title .accent-6,
.standalone-title .accent-green {
    color: var(--brand-green);
}

/* Figma: Poppins Regular 26px white. */
.standalone-lead {
    font-size: clamp(1.15rem, 2.009vw, 1.625rem);
    line-height: 1.2;
    margin: 0;
}

.standalone-lead-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 2.375rem;
}

/* Countdown — Figma: white card, radius 20, 1px #ddebc8 border, soft shadow;
   Poppins Bold 104px #5fa524 digits over #e4f0d2 unit bands. */
.countdown-card {
    display: inline-flex;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-panel);
    box-shadow: 0 18px 5.5px rgb(0 0 0 / 5%), 0 8px 4px rgb(0 0 0 / 9%), 0 2px 2px rgb(0 0 0 / 10%);
    padding: 2.125rem 1.25rem 1.25rem;
    margin-bottom: 2.375rem;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.countdown-unit strong {
    color: var(--brand-green);
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6.5rem);
    letter-spacing: -0.02em;
    line-height: 0.65;
    padding-inline: 1.25rem;
}

.countdown-unit small {
    display: block;
    width: 100%;
    background: var(--brand-pale-3);
    color: var(--brand-green);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.1vw, 1.25rem);
    line-height: 1.5;
    text-align: center;
    border-radius: 2px;
}

.countdown-colon {
    color: var(--brand-green);
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.65;
    padding: 0 0.65rem;
    align-self: flex-start;
    margin-top: 0.2em;
}

/* Prize teaser carousel — Figma: white cards, radius 10, 240px photos. */


@media (min-width: 1200px) {
.teaser-block {width: 62.5rem;}
 }

 @media (min-width: 992px) and (max-width: 1199.98px) {
.teaser-block {width: 46.5rem;}
 }

 @media (min-width: 576px) and (max-width: 991.98px) {
.teaser-block {width: 30.75rem;}
 }
@media (max-width: 575.98px) {
    .teaser-block {width: 15rem;}
 }

.teaser-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    text-align: left;
    margin-bottom: 1.25rem;
}

.teaser-prizes {
    display: flex;
    gap: 10px;
    padding: 0 1.25rem 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.teaser-prize {
    flex: none;
    width: 240px;
    background: #ffffff;
    border: 1px solid var(--brand-pale);
    border-radius: var(--radius-card);
    padding-bottom: 6px;
    scroll-snap-align: center;
    box-shadow: 0 13px 6.5px rgb(0 0 0 / 4%), 0 3px 3.5px rgb(0 0 0 / 5%);
    text-align: left;
}

.teaser-photo {
    display: block;
    width: 240px;
    height: 240px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.teaser-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teaser-photo.is-contain {
    background: #ffffff;
    padding: 1rem;
}

.teaser-photo.is-contain img {
    object-fit: contain;
}

/* Figma: Poppins Regular 20px #16300a. */
.teaser-name {
    display: block;
    color: var(--brand-ink);
    font-size: 1.25rem;
    line-height: 1.25;
    padding: 4px 10px;
}

.teaser-dots {
    display: block;
    margin: 0 auto;
}

/* Bottom links — Figma: Poppins Regular 18px white, spread apart. */
.standalone-footer {
    width: 100%;
    padding: 1.25rem clamp(1rem, 4vw, 5rem) 1.25rem;
}

.standalone-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.standalone-links a {
    color: #ffffff;
    font-size: 1.125rem;
    line-height: 1.2;
    padding: 0.65rem;
}

.standalone-links a:hover {
    color: var(--brand-yellow);
}

.standalone-ai-note {
    display: inline-block;
    color: #ffffff;
    font-size: 0.75rem;
    padding: 0.65rem;
}

/* ==========================================================================
   16. Responsive tweaks
   ========================================================================== */

@media (max-width: 1199.98px) {
    .navbar-collapse {
        background: #ffffff;
        border-radius: var(--radius-panel);
        padding: 1rem;
        margin-top: 0.5rem;
        box-shadow: var(--shadow-card);
    }

    .nav-social {
        margin-inline: 0;
    }

    .navbar-cta {
        margin: 0.5rem 0 0;
    }
}

@media (max-width: 991.98px) {
    :root {
        --navbar-height: 76px;
    }

    .navbar-brand {
        gap: 1.25rem;
    }

    .navbar-brand img {
        height: 44px;
    }

    .navbar-brand .brand-partner {
        height: 44px;
    }

    .quiz-item-row {
        flex-wrap: wrap;
    }

    .quiz-item h3 {
        flex-basis: calc(100% - 50px - 1.3rem);
    }

    .quiz-actions {
        margin-left: calc(50px + 1.3rem);
    }
}

@media (max-width: 767.98px) {
    .form-steps .step-line {
        display: none;
    }

    .form-steps {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .form-tabs {
        flex-direction: column;
        border-radius: 2rem;
    }

    .prizes-banner {
        padding: 1.25rem;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .form-nav {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .form-nav .note {
        margin: 0;
        order: 2;
    }

    .upload {
        flex-wrap: wrap;
    }

    .countdown-card {
        padding: 1.5rem 0.75rem 0.75rem;
    }

    .countdown-unit strong {
        padding-inline: 0.65rem;
    }

    .standalone-links {
        justify-content: center;
    }
}

.page-wrapper {
    overflow: hidden;
}

/* swiper  */

.rewards {
  position: relative;
  width: min(62.5rem, 100%);
  overflow: hidden;
}

.rewards__inner {
  position: relative;
  z-index: 1;
}

.swiper.rewards-swiper {
  padding-bottom: 3rem;
}

.rewards-swiper .swiper-slide {
  height: auto;
}

.prize-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.rewards-swiper .swiper-pagination {
  bottom: 4px;
}

.rewards-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 2px !important;
  opacity: 1;
  background: rgba(255, 255, 255, .85);
}

.rewards-swiper .swiper-pagination-bullet-active {
  background: #4a8c2d;
}

/* ==========================================================================
   14. Share
   ========================================================================== */

.share-trigger {
    position: fixed;
    right: 0;
    bottom: 15%;
    z-index: 1030;
    background: var(--brand-secondary);
    color: var(--brand-ink);
    font-weight: 700;
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: var(--brand-radius) 0 0 var(--brand-radius);
    box-shadow: 0 4px 16px rgb(23 37 28 / 20%);
}

.share-trigger:hover {
    background: var(--brand-secondary-dark);
    color: var(--brand-ink);
}

.share-modal-title {
    font-size: 1.5rem;
    text-align: center;
}

.share-modal-subtitle {
    text-align: center;
    color: var(--brand-muted);
}

.share-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.share-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    text-decoration: none;
    color: var(--brand-ink);
    font-weight: 600;
}

.share-option:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.share-icon svg {
    width: 24px;
    height: 24px;
    fill: currentcolor;
}

.share-copy {
    display: flex;
    gap: 0.5rem;
}

.share-copy-input {
    flex: 1 1 auto;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.share-copy-btn {
    border: 0;
    border-radius: var(--brand-radius-sm);
    background: var(--brand-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    font-weight: 700;
}

.share-copy-btn.is-copied {
    background: var(--brand-success);
}