/* ========================================
   USQ Brand Page — Immersive Dark Forest Green + Gold
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@700;800;900&display=swap');

/* ========================================
   DESIGN TOKENS
   ======================================== */
:root {
    --bg:           #050d05;
    --bg-card:      #0a180a;
    --bg-card-alt:  #0d1f0d;
    --gold:         #eab308;
    --gold-light:   #fbbf24;
    --gold-dim:     rgba(234, 179, 8, 0.12);
    --gold-glow:    rgba(234, 179, 8, 0.25);
    --green:        #16a34a;
    --green-light:  #4ade80;
    --green-dim:    rgba(22, 163, 74, 0.12);
    --white:        #ffffff;
    --text:         #f0fdf4;
    --text-sub:     rgba(240, 253, 244, 0.65);
    --text-muted:   rgba(240, 253, 244, 0.35);
    --border:       rgba(255, 255, 255, 0.07);
    --border-gold:  rgba(234, 179, 8, 0.3);
    --border-green: rgba(22, 163, 74, 0.25);

    --font-body:    'Inter', sans-serif;
    --font-display: 'Barlow Condensed', sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.5rem;
    --fs-2xl:  2rem;
    --fs-3xl:  clamp(1.75rem, 3vw, 2.5rem);

    --sp-xs: 0.5rem;
    --sp-sm: 1rem;
    --sp-md: 2rem;
    --sp-lg: 3rem;
    --sp-xl: 4rem;

    --radius:    12px;
    --radius-lg: 16px;
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================
   RESET
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ========================================
   PRELOADER
   ======================================== */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}

.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader__inner {
    text-align: center;
}

.preloader__logo {
    width: 80px;
    height: auto;
    margin: 0 auto 1.5rem;
    animation: preloaderPulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(22, 163, 74, 0.5));
}

@keyframes preloaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.08); opacity: 1; }
}

.preloader__bar {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.preloader__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--green), var(--gold));
    border-radius: 3px;
    transition: width 0.3s var(--ease);
}

.preloader__text {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    animation: preloaderTextFade 2s ease-in-out infinite;
}

@keyframes preloaderTextFade {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* ========================================
   CUSTOM CURSOR
   ======================================== */
.cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 9990;
    pointer-events: none;
    mix-blend-mode: difference;
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .cursor { display: block; }
    body { cursor: none; }
    a, button, .btn, .gallery__trigger { cursor: none; }
}

.cursor__dot {
    position: absolute;
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s;
}

.cursor__ring {
    position: absolute;
    width: 40px; height: 40px;
    border: 1.5px solid rgba(234, 179, 8, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s;
}

.cursor.is-hovering .cursor__ring {
    width: 60px; height: 60px;
    border-color: var(--gold);
}

.cursor.is-hovering .cursor__dot {
    transform: translate(-50%, -50%) scale(0.5);
}

/* ========================================
   NOISE OVERLAY
   ======================================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ========================================
   UTILITIES
   ======================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-md);
}

.section {
    padding: var(--sp-xl) 0;
    position: relative;
    overflow: hidden;
}

.section__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--sp-md);
    color: var(--white);
    letter-spacing: 0.02em;
}

.section__title-text {
    display: inline;
    position: relative;
}

/* Section blob backgrounds */
.section__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    opacity: 0.5;
}

.section__blob--1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(22,163,74,0.08), transparent 70%);
    top: -200px; right: -200px;
    animation: blobMorph 20s ease-in-out infinite;
}

.section__blob--2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(234,179,8,0.06), transparent 70%);
    bottom: -150px; left: -150px;
    animation: blobMorph 25s ease-in-out infinite reverse;
}

.section__blob--3 {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(22,163,74,0.06), transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: blobMorph 18s ease-in-out infinite;
}

@keyframes blobMorph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) scale(1);
    }
    25% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(20px, -30px) scale(1.05);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate(-10px, 20px) scale(0.95);
    }
    75% {
        border-radius: 50% 40% 50% 60% / 35% 55% 45% 65%;
        transform: translate(15px, 10px) scale(1.02);
    }
}

/* ========================================
   SCROLL PROGRESS
   ======================================== */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--green), var(--gold));
    z-index: 1100;
    box-shadow: 0 0 12px var(--gold-glow);
    transition: width 0.1s linear;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.35s var(--ease);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.btn--sm  { padding: 0.5rem 1.4rem; font-size: var(--fs-xs); }
.btn--lg  { padding: 0.9rem 2.2rem; font-size: var(--fs-sm); }

.btn--glow {
    background: var(--gold);
    color: #070e07;
    box-shadow: 0 0 0 0 var(--gold-glow);
}
.btn--glow:hover {
    background: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--gold-glow), 0 0 60px rgba(234,179,8,0.15);
}

.btn--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease);
}
.btn--glow:hover::before {
    transform: translateX(100%);
}

.btn--outline {
    background: transparent;
    color: var(--text);
    border: 2px solid var(--border);
}
.btn--outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(234,179,8,0.1);
}

.btn--green {
    background: var(--green);
    color: var(--white);
}
.btn--green:hover {
    background: var(--green-light);
    color: #050d05;
    transform: translateY(-1px);
    box-shadow: 0 0 30px rgba(22,163,74,0.2);
}

/* Button shimmer for all buttons */
.btn::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* ========================================
   MORPH LOGO (animates from hero -> nav on scroll)
   ======================================== */
.morph-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    pointer-events: auto;
    will-change: transform;
    transform-origin: 0 0;
    filter: drop-shadow(0 4px 30px rgba(22, 163, 74, 0.3));
}

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

/* When docked in nav, enable hover */
.morph-logo.is-docked {
    filter: drop-shadow(0 0 12px rgba(22,163,74,0.3));
    transition: filter 0.3s;
}

.morph-logo.is-docked:hover {
    filter: drop-shadow(0 0 20px rgba(22,163,74,0.5));
}

/* ========================================
   NAV
   ======================================== */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem var(--sp-md);
}

/* Invisible slot — reserves space for the docked logo */
.nav__logo-slot {
    width: 48px;
    height: 52px;
    flex-shrink: 0;
}

.nav__links {
    display: none;
    gap: 2.5rem;
}

.nav__links a {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-sub);
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s;
}

.nav__links a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--gold);
    transition: width 0.35s var(--ease);
    border-radius: 1px;
}

.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { width: 100%; }

/* Hamburger button — mobile only */
.nav__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1010;
    transition: border-color 0.3s;
}

.nav__hamburger:hover {
    border-color: var(--border-gold);
}

.nav__hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.3s;
    transform-origin: center;
}

/* Hamburger → X animation */
.nav__hamburger.is-open .nav__hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav__hamburger.is-open .nav__hamburger-line:nth-child(2) {
    opacity: 0;
}
.nav__hamburger.is-open .nav__hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    background: rgba(5, 13, 5, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 1005;
    animation: menuFadeIn 0.3s var(--ease);
}

.nav__links.is-open a {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    transition: color 0.2s;
}

.nav__links.is-open a:hover {
    color: var(--gold);
}

@keyframes menuFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.nav.nav--scrolled {
    background: rgba(5, 13, 5, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

/* ========================================
   HERO
   ======================================== */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg);
    --hero-fade: 1;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: transform;
}

.hero__grid-floor {
    position: absolute;
    left: -60%; right: -60%;
    bottom: -5%; height: 65%;
    background-image:
        linear-gradient(rgba(22, 163, 74, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 163, 74, 0.14) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(500px) rotateX(58deg);
    transform-origin: center bottom;
    mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%);
    animation: gridPulse 8s ease-in-out infinite alternate;
}

@keyframes gridPulse {
    from { opacity: 0.5; background-size: 80px 80px; }
    to   { opacity: 1; background-size: 85px 85px; }
}

.hero__grid-flat {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 72%);
}

.hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.hero__glow--center {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(22,163,74,0.12) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: glowPulse 10s ease-in-out infinite alternate;
}

.hero__glow--left {
    width: 400px; height: 400px;
    background: rgba(234, 179, 8, 0.07);
    top: 10%; left: -5%;
    animation: orbDrift 22s ease-in-out infinite;
}

.hero__glow--right {
    width: 350px; height: 350px;
    background: rgba(22, 163, 74, 0.08);
    bottom: 15%; right: 5%;
    animation: orbDrift 16s ease-in-out infinite;
    animation-delay: -8s;
}

@keyframes glowPulse {
    from { opacity: 0.5; transform: translate(-50%,-50%) scale(0.9); }
    to   { opacity: 1;   transform: translate(-50%,-50%) scale(1.1); }
}

@keyframes orbDrift {
    0%, 100% { transform: translate(0,0) rotate(0deg); }
    33%  { transform: translate(20px,-25px) rotate(5deg); }
    66%  { transform: translate(-15px,15px) rotate(-3deg); }
}

/* Light beams */
.hero__beam {
    position: absolute;
    top: -20%; height: 140%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(234,179,8,0.08) 40%, rgba(234,179,8,0.12) 50%, rgba(234,179,8,0.08) 60%, transparent);
    transform: rotate(18deg);
    pointer-events: none;
    animation: beamFade 14s ease-in-out infinite;
}

.hero__beam--1 { left: 18%; animation-delay: 0s; }
.hero__beam--2 { left: 52%; width: 2px; animation-delay: -5s; opacity: 0.6; }
.hero__beam--3 { left: 79%; animation-delay: -10s; opacity: 0.4; }

@keyframes beamFade {
    0%,100% { opacity: 0; }
    20%     { opacity: 1; }
    50%     { opacity: 0.7; }
    80%     { opacity: 1; }
}

/* Particles */
.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(234, 179, 8, 0.6);
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.3);
    animation: particleFloat linear infinite;
}

.particle--1  { width:3px; height:3px; left:7%;  animation-duration:15s; animation-delay:-2s; }
.particle--2  { width:2px; height:2px; left:16%; animation-duration:19s; animation-delay:-6s;  background:rgba(22,163,74,.5); box-shadow:0 0 6px rgba(22,163,74,.3); }
.particle--3  { width:3px; height:3px; left:28%; animation-duration:13s; animation-delay:-1s; }
.particle--4  { width:2px; height:2px; left:40%; animation-duration:21s; animation-delay:-9s;  background:rgba(22,163,74,.4); box-shadow:0 0 6px rgba(22,163,74,.3); }
.particle--5  { width:3px; height:3px; left:53%; animation-duration:16s; animation-delay:-4s; }
.particle--6  { width:2px; height:2px; left:64%; animation-duration:18s; animation-delay:-7s;  background:rgba(22,163,74,.5); box-shadow:0 0 6px rgba(22,163,74,.3); }
.particle--7  { width:4px; height:4px; left:74%; animation-duration:17s; animation-delay:-11s; }
.particle--8  { width:2px; height:2px; left:87%; animation-duration:20s; animation-delay:-14s; background:rgba(22,163,74,.4); box-shadow:0 0 6px rgba(22,163,74,.3); }
.particle--9  { width:3px; height:3px; left:21%; animation-duration:23s; animation-delay:-5s; }
.particle--10 { width:2px; height:2px; left:46%; animation-duration:14s; animation-delay:-10s; background:rgba(22,163,74,.5); box-shadow:0 0 6px rgba(22,163,74,.3); }
.particle--11 { width:3px; height:3px; left:33%; animation-duration:22s; animation-delay:-3s; }
.particle--12 { width:2px; height:2px; left:69%; animation-duration:17s; animation-delay:-12s; background:rgba(22,163,74,.4); box-shadow:0 0 6px rgba(22,163,74,.3); }

@keyframes particleFloat {
    0%   { transform:translateY(105vh) scale(0); opacity:0; }
    8%   { opacity:1;  transform:translateY(92vh) scale(1); }
    90%  { opacity:.6; }
    100% { transform:translateY(-10vh) scale(.3); opacity:0; }
}

/* Hero content layout */
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem var(--sp-md) 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    text-align: center;
}

.hero__text {
    opacity: var(--hero-fade, 1);
}

.hero__title {
    white-space: nowrap;
}


/* Hero logo placeholder — reserves space where the morph logo starts */
.hero__logo-placeholder {
    width: clamp(160px, 22vw, 260px);
    height: clamp(176px, 24vw, 286px);
    margin: 0 auto var(--sp-xs);
}

.hero__title-top {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: var(--gold);
    text-shadow: 0 0 80px rgba(234,179,8,0.5), 0 0 30px rgba(234,179,8,0.25), 0 4px 20px rgba(0,0,0,0.5);
}

.hero__title-bottom {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--white);
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
    margin-bottom: var(--sp-xs);
}

.hero__sub {
    font-size: var(--fs-lg);
    color: var(--text-sub);
    max-width: 480px;
    margin: 0 auto var(--sp-md);
    line-height: 1.6;
}

.hero__sub strong { color: var(--white); }

.hero__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}

/* Harsha figure */
.hero__figure {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.hero__harsha {
    width: clamp(260px, 36vw, 480px);
    max-height: 70vh;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 50px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(22,163,74,0.18));
}

/* Scroll indicator */
.hero__scroll {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: var(--hero-fade, 1);
}

.hero__scroll span {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.hero__scroll-line {
    width: 1px; height: 40px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%   { opacity:0; transform:scaleY(0); transform-origin:top; }
    50%  { opacity:1; transform:scaleY(1); transform-origin:top; }
    100% { opacity:0; transform:scaleY(1); transform-origin:bottom; }
}

/* ========================================
   DIVIDER
   ======================================== */
.divider {
    display: flex;
    justify-content: center;
    padding: var(--sp-sm) var(--sp-md);
}

.divider__line {
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-green) 30%, var(--border-gold) 50%, var(--border-green) 70%, transparent);
    opacity: 0.6;
    position: relative;
}

.divider__line::after {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--gold-glow);
    animation: dividerDot 3s ease-in-out infinite;
}

@keyframes dividerDot {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(0.8); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* ========================================
   ABOUT
   ======================================== */
.about__intro {
    max-width: 700px;
    margin: 0 auto var(--sp-lg);
    text-align: center;
    color: var(--text-sub);
    line-height: 1.8;
}

.about__intro p + p { margin-top: var(--sp-sm); }
.about__intro strong { color: var(--gold); }

.about__rounds {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
}

/* Glow cards */
.glow-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
    overflow: hidden;
}

.glow-card__border {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--gold-dim), var(--green-dim));
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
}

/* Mouse-follow shine effect on cards */
.glow-card__shine {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(234,179,8,0.06), transparent 40%);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.glow-card:hover .glow-card__shine { opacity: 1; }

.glow-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-gold);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(234,179,8,0.05);
}
.glow-card:hover .glow-card__border { opacity: 1; }

.glow-card__content {
    position: relative;
    z-index: 1;
    padding: var(--sp-md);
    text-align: center;
}

.glow-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--sp-xs);
    filter: drop-shadow(0 0 12px var(--gold-glow));
    transition: transform 0.4s var(--ease);
}

.glow-card:hover .glow-card__icon {
    transform: scale(1.15) translateY(-4px);
}

.glow-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 0.12em;
    margin-bottom: 0.2rem;
}

.glow-card__subtitle {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--sp-sm);
}

.glow-card__desc {
    color: var(--text-sub);
    font-size: var(--fs-sm);
}

/* ========================================
   SEASONS
   ======================================== */
.seasons__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}

.season-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-md) var(--sp-md) var(--sp-md) calc(var(--sp-md) + 4px);
    overflow: hidden;
    transition: all 0.4s var(--ease);
}

.season-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, var(--gold), var(--green));
    transition: width 0.4s var(--ease);
}

.season-card:hover::before { width: 6px; }

.season-card__glow {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    border-radius: var(--radius-lg);
    transition: opacity 0.4s;
}

.season-card__glow--s1 { background: radial-gradient(circle at top right, var(--gold), transparent 70%); }
.season-card__glow--s2 { background: radial-gradient(circle at top right, var(--green), transparent 70%); }

.season-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: 0 12px 50px rgba(234,179,8,0.1);
}
.season-card:hover .season-card__glow { opacity: 0.1; }

.season-card__badge {
    display: inline-block;
    background: var(--gold-dim);
    color: var(--gold);
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-sm);
    border: 1px solid var(--border-gold);
}

.season-card__badge--s2 {
    background: var(--green-dim);
    color: var(--green-light);
    border-color: var(--border-green);
}

.season-card__year {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    margin-bottom: var(--sp-xs);
}

.season-card__network {
    font-size: var(--fs-sm);
    color: var(--text-sub);
    margin-bottom: 0.2rem;
}

.season-card__dates {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-sm);
}

.season-card__stats {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-sm);
}

.season-card__stats li {
    font-size: var(--fs-sm);
    color: var(--text-sub);
    padding: 0.3rem 0;
}

.season-card__stats li strong { color: var(--gold); }

/* Stats bar */
.stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    justify-content: center;
}

.stat {
    flex: 1 1 auto;
    min-width: calc(50% - var(--sp-xs));
    max-width: calc(50% - var(--sp-xs) / 2);
    text-align: center;
    padding: var(--sp-sm) var(--sp-xs);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    position: relative;
    overflow: hidden;
}

/* Animated border gradient on stats */
.stat::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    background: conic-gradient(from var(--angle, 0deg), transparent, var(--gold), transparent, var(--green), transparent);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
    animation: rotateBorder 6s linear infinite;
}

.stat::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-lg) - 1px);
    background: var(--bg-card);
    z-index: -1;
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateBorder {
    to { --angle: 360deg; }
}

.stat:hover {
    border-color: transparent;
    box-shadow: 0 6px 30px var(--gold-dim);
    transform: translateY(-4px);
}

.stat:hover::before { opacity: 1; }

.stat__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 30px rgba(234,179,8,0.3);
}

.stat__label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ========================================
   CHAMPIONS
   ======================================== */
.champions__season-label {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    text-align: center;
    color: var(--text-sub);
    letter-spacing: 0.06em;
    margin: var(--sp-md) 0 var(--sp-sm);
}

.podium {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}

.podium__card--gold   { order: 0; }
.podium__card--silver { order: 1; }
.podium__card--bronze { order: 2; }

.podium__card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-md);
    text-align: center;
    overflow: hidden;
    transition: all 0.4s var(--ease);
}

.podium__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(0,0,0,0.3);
}

.podium__card--gold {
    border-color: var(--border-gold);
    background: linear-gradient(135deg, rgba(234,179,8,0.08) 0%, var(--bg-card) 60%);
}

.podium__card--gold:hover {
    box-shadow: 0 16px 50px rgba(234,179,8,0.15), 0 0 60px rgba(234,179,8,0.05);
}

.podium__card--silver {
    border-color: rgba(148,163,184,0.25);
}

.podium__card--bronze {
    border-color: rgba(180,120,60,0.25);
}

.podium__crown {
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    animation: crownBounce 2.5s ease-in-out infinite;
}

@keyframes crownBounce {
    0%,100% { transform:translateX(-50%) translateY(0); }
    50%     { transform:translateX(-50%) translateY(-5px); }
}

.podium__rank {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: var(--sp-xs);
}

.podium__card--gold .podium__rank { color: var(--gold); }

.podium__medal {
    font-size: 2rem;
    margin: var(--sp-xs) 0;
    transition: transform 0.4s var(--ease);
}

.podium__card:hover .podium__medal {
    transform: scale(1.2) rotate(10deg);
}

.podium__school {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.podium__city {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.podium__winners {
    font-size: var(--fs-sm);
    color: var(--green-light);
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.podium__prize {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--gold);
}

.champions__bonus {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-md);
}

.champions__bonus strong { color: var(--green-light); }

.champions__showcase {
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 900px;
    margin: var(--sp-md) auto var(--sp-md);
    border: 1px solid var(--border);
    transition: all 0.4s var(--ease);
    position: relative;
}

/* Shimmer sweep on showcase images */
.champions__showcase::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.03) 50%, transparent 55%);
    transform: translateX(-100%);
    transition: transform 0.8s var(--ease);
    pointer-events: none;
    z-index: 1;
}

.champions__showcase:hover::after {
    transform: translateX(100%);
}

.champions__showcase:hover {
    border-color: var(--border-gold);
    box-shadow: 0 12px 50px rgba(234,179,8,0.1);
}

.champions__photo {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s var(--ease);
}

.champions__showcase:hover .champions__photo { transform: scale(1.04); }

/* ========================================
   GALLERY
   ======================================== */
.masonry {
    display: flex;
    gap: var(--sp-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 var(--sp-md);
    padding-bottom: var(--sp-xs);
    scrollbar-width: none;
}

.masonry::-webkit-scrollbar { display: none; }

.masonry__item {
    flex: 0 0 80%;
    scroll-snap-align: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
}

.gallery__trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: var(--bg-card);
    cursor: pointer;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: border-color 0.4s, box-shadow 0.4s;
}

.gallery__trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease), filter 0.4s;
}

.gallery__trigger:hover { border-color: var(--border-gold); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.gallery__trigger:hover img { transform: scale(1.08); filter: brightness(1.1); }

.gallery__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,13,5,0.95) 0%, rgba(5,13,5,0.3) 40%, transparent 55%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--sp-sm) var(--sp-md);
    opacity: 0;
    transition: opacity 0.4s;
}

.gallery__trigger:hover .gallery__overlay { opacity: 1; }

.gallery__caption {
    color: var(--white);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.gallery__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    font-size: 1.4rem;
    backdrop-filter: blur(8px);
    transition: transform 0.3s var(--ease);
}

.gallery__trigger:hover .gallery__zoom {
    transform: rotate(90deg) scale(1.1);
}

/* ========================================
   EPISODES (YouTube)
   ======================================== */
.episodes__intro {
    text-align: center;
    color: var(--text-sub);
    max-width: 600px;
    margin: 0 auto var(--sp-md);
}

.episodes__player {
    max-width: 900px;
    margin: 0 auto var(--sp-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
    transition: box-shadow 0.4s;
}

.episodes__player:hover {
    box-shadow: 0 12px 50px rgba(0,0,0,0.4), 0 0 40px rgba(234,179,8,0.05);
}

.episodes__embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.episodes__embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.episodes__cta { text-align: center; }

/* ========================================
   CTA SECTION
   ======================================== */
.cta {
    position: relative;
    overflow: hidden;
}

.cta__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(22,163,74,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(234,179,8,0.06) 0%, transparent 50%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cta__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.cta__orb--1 {
    width: 300px; height: 300px;
    background: rgba(22,163,74,0.1);
    top: -100px; left: 20%;
    animation: orbDrift 20s ease-in-out infinite;
}

.cta__orb--2 {
    width: 250px; height: 250px;
    background: rgba(234,179,8,0.08);
    bottom: -80px; right: 15%;
    animation: orbDrift 15s ease-in-out infinite reverse;
}

.cta__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.cta__heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--white);
    margin-bottom: var(--sp-sm);
    letter-spacing: 0.03em;
}

.cta__subtext {
    color: var(--text-sub);
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-lg);
}

.cta__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
}

.cta__app {
    margin-top: var(--sp-lg);
    text-align: center;
}

.cta__app-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--sp-sm);
}

.cta__app-links {
    display: flex;
    justify-content: center;
    gap: var(--sp-sm);
}

/* ========================================
   APP BADGES (shared)
   ======================================== */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: all 0.35s var(--ease);
    white-space: nowrap;
}

.app-badge svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.app-badge:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(234, 179, 8, 0.1);
}

.app-badge:hover svg {
    opacity: 1;
}

.app-badge--sm {
    padding: 0.45rem 1rem;
    font-size: var(--fs-xs);
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    border-top: 1px solid var(--border);
    padding: var(--sp-lg) 0 var(--sp-md);
    background: rgba(0,0,0,0.2);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md);
    text-align: center;
}

.footer__logo {
    height: 56px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s, filter 0.3s;
}

.footer__logo:hover {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(22,163,74,0.4));
}

.footer__socials {
    display: flex;
    gap: var(--sp-sm);
}

.footer__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    transition: all 0.35s var(--ease);
}

.footer__socials a:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 8px 20px rgba(234,179,8,0.1);
}

.footer__socials img {
    width: 18px; height: 18px;
    opacity: 0.65;
    transition: opacity 0.3s;
}

.footer__socials a:hover img { opacity: 1; }

.footer__apps {
    display: flex;
    gap: var(--sp-sm);
}

.footer__copy {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ========================================
   REGISTRATION MODAL
   ======================================== */
.reg-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-md);
}

.reg-modal[hidden] { display: none; }

.reg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: regFadeIn 0.3s var(--ease);
}

.reg-modal__card {
    position: relative;
    z-index: 1;
    max-width: 420px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg) var(--sp-md) var(--sp-md);
    text-align: center;
    overflow: hidden;
    animation: regCardIn 0.5s var(--ease);
    box-shadow:
        0 0 80px rgba(234, 179, 8, 0.08),
        0 30px 80px rgba(0, 0, 0, 0.5);
}

.reg-modal__glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, rgba(22, 163, 74, 0.06) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: regGlowPulse 4s ease-in-out infinite alternate;
}

.reg-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    z-index: 2;
}

.reg-modal__close:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    color: var(--gold);
    transform: rotate(90deg);
}

.reg-modal__icon {
    margin-bottom: var(--sp-sm);
    animation: regIconSpin 20s linear infinite;
}

.reg-modal__icon svg {
    filter: drop-shadow(0 0 20px rgba(234, 179, 8, 0.3));
}

.reg-modal__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 0.04em;
    margin-bottom: var(--sp-xs);
    text-shadow: 0 0 30px rgba(234, 179, 8, 0.2);
}

.reg-modal__text {
    font-size: var(--fs-sm);
    color: var(--text-sub);
    line-height: 1.7;
    margin-bottom: var(--sp-md);
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.reg-modal__socials {
    display: flex;
    justify-content: center;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-md);
}

.reg-modal__socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    transition: all 0.35s var(--ease);
}

.reg-modal__socials a:hover {
    background: var(--gold-dim);
    border-color: var(--border-gold);
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.12);
}

.reg-modal__socials img {
    opacity: 0.6;
    transition: opacity 0.3s;
}

.reg-modal__socials a:hover img {
    opacity: 1;
}

.reg-modal__got-it {
    min-width: 140px;
}

@keyframes regFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes regCardIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes regGlowPulse {
    from { opacity: 0.6; transform: translateX(-50%) scale(0.9); }
    to   { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

@keyframes regIconSpin {
    to { transform: rotate(360deg); }
}

/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.lightbox__content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox__img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    animation: imgZoomIn 0.4s var(--ease);
}

@keyframes imgZoomIn {
    from { opacity:0; transform:scale(0.88) translateY(20px); filter: blur(10px); }
    to   { opacity:1; transform:scale(1) translateY(0); filter: blur(0); }
}

.lightbox__caption {
    color: var(--text-sub);
    font-size: var(--fs-sm);
    margin-top: var(--sp-sm);
    text-align: center;
}

.lightbox__counter {
    position: absolute;
    bottom: -2rem;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute;
    z-index: 2;
    background: rgba(234,179,8,0.15);
    border: 1px solid var(--border-gold);
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s var(--ease);
}

.lightbox__close {
    top: 1rem; right: 1rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}

.lightbox__close:hover { background: var(--gold-dim); color: var(--gold); transform: rotate(90deg); }

.lightbox__prev, .lightbox__next {
    top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
}

.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }

.lightbox__prev:hover,
.lightbox__next:hover { background: var(--gold-dim); color: var(--gold); }
.lightbox__prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__next:hover { transform: translateY(-50%) translateX(3px); }

/* ========================================
   SCROLL REVEAL ANIMATIONS
   ======================================== */
[data-animate] {
    opacity: 0;
    transition-property: opacity, transform, filter, clip-path;
    transition-duration: 0.8s;
    transition-timing-function: var(--ease);
}

[data-animate="fade-up"]    { transform: translateY(50px); }
[data-animate="slide-left"] { transform: translateX(-80px); opacity: 0; }
[data-animate="slide-right"]{ transform: translateX(80px); opacity: 0; }
[data-animate="slide-up"]   { transform: translateY(80px); }
[data-animate="blur-in"]    { filter: blur(12px); transform: translateY(20px); }
[data-animate="scale-in"]   { transform: scale(0.85); filter: blur(8px); }
[data-animate="clip-up"]    { clip-path: inset(100% 0 0 0); }

[data-animate].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0);
}

/* ========================================
   TILT CARD (3D perspective)
   ======================================== */
.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (min-width: 480px) {
    .hero__buttons,
    .cta__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stats-bar { gap: var(--sp-sm); }

    .masonry {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        overflow: visible;
        scroll-snap-type: none;
    }
    .masonry__item {
        flex: none;
        aspect-ratio: auto;
    }
}

@media (min-width: 768px) {
    .nav__links { display: flex; }
    .nav__hamburger { display: none; }

    .nav__logo-slot {
        width: 48px;
        height: 52px;
    }

    .hero__content {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto 1fr;
        align-items: center;
        text-align: left;
        padding: 5.5rem var(--sp-md) 3rem;
        gap: 0 var(--sp-md);
        min-height: 0;
    }

    .hero__logo-placeholder {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 var(--sp-xs);
    }

    .hero__text {
        grid-column: 1;
        grid-row: 2;
    }

    .hero__figure {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: center;
        width: clamp(340px, 42vw, 540px);
    }

    .hero__sub  { margin-left: 0; }
    .hero__buttons { justify-content: flex-start; }
    .hero__harsha { width: 100%; height: auto; }

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

    .stat {
        min-width: 0;
        max-width: none;
        flex: 1 1 0;
        padding: var(--sp-md);
    }

    .podium {
        grid-template-columns: 1fr 1.2fr 1fr;
        align-items: end;
    }

    .podium__card--silver { order: 1; }
    .podium__card--gold   { order: 2; padding-bottom: calc(var(--sp-md) + 1rem); }
    .podium__card--bronze { order: 3; }

    .masonry {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 240px;
    }
    .masonry__item:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .lightbox__prev { left: 2rem; }
    .lightbox__next { right: 2rem; }
}

@media (min-width: 1024px) {
    .hero__figure { width: clamp(420px, 44vw, 600px); }
    .hero__grid-floor { height: 75%; }

    .masonry {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 220px;
    }
}

@media (max-width: 767px) {
    .nav__logo-slot {
        width: 48px;
        height: 53px;
    }

    .hero__content {
        flex-direction: column;
        padding-top: 4.5rem;
        padding-bottom: 3rem;
        gap: var(--sp-xs);
    }

    .hero__logo-placeholder {
        width: clamp(80px, 22vw, 130px);
        height: clamp(88px, 24vw, 143px);
    }

    .hero__figure {
        width: min(50vw, 240px);
        margin: 0 auto;
    }

    .hero__harsha {
        width: 100%;
        height: auto;
        max-height: 35vh;
        filter: drop-shadow(0 8px 40px rgba(0,0,0,0.7)) drop-shadow(0 0 30px rgba(22,163,74,0.2));
    }

    .hero__text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero__sub {
        font-size: var(--fs-sm);
        max-width: 90vw;
    }
}

@media (min-width: 1280px) {
    .section { padding: calc(var(--sp-xl) + 1rem) 0; }
}

/* ========================================
   RIPPLE KEYFRAME
   ======================================== */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html { scroll-behavior: auto; }

    [data-animate] { opacity: 1; transform: none; filter: none; clip-path: none; }
    .particle, .hero__beam { opacity: 0; }
    .hero__grid-floor { animation: none; }
    .cursor { display: none !important; }
    body { cursor: auto !important; }
    .preloader { display: none; }
}