/* =========================
   styles.css – full file
   ========================= */
:root{
    --bg:#000;
    --fg:#fff;
    --muted:#b7b7b7;
    --accent:#e6e6e6;
    --pad:clamp(16px, 2vw, 28px);

    /* Header/nav */
    --nav-h: 128px;
    --brand-reserve-left: clamp(300px, 32vw, 520px);
    --united-primary: #FF5D1F;
    --united-secondary: #FFC247;
    --united-glow: #FF8A00;
    --united-yellow: var(--united-primary);
    --united-logo-size: 28px;
    --church-logo-size: 28px;

    /* Video / overlay */
    --video-dim: .55;
    --box-bg: rgba(0,0,0,.36);
    --box-blur: 6px;

    /* Timings & easings */
    --t-appear: 800ms;
    --t-reveal: 1100ms;
    --t-move: 1200ms;
    --ease-out: cubic-bezier(.22,.61,.36,1);
    --ease-inout: cubic-bezier(.65,0,.35,1);

    /* Brand scale în header */
    --brand-scale-final: 0.86;

    /* Program page */
    --card-bg: #0a0a0a;
    --card-brd: #191919;
    --card-r: 18px;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
    color:var(--fg);
    background:var(--bg);
    line-height:1.45;
}

/* ====== INTRO generic (index only - vertical) ====== */
.intro{
    position:fixed; inset:0; display:grid; place-items:center;
    background:var(--bg); z-index:1000;
    transition: background var(--t-move) var(--ease-out);
}

/* ====== YOUTH INTRO - Modern, Cinematic ====== */
.youth-intro{
    position:fixed; inset:0; z-index:1000;
    background: radial-gradient(circle at center, #0a0a0a, #000000);
    display:grid; place-items:center;
    overflow:hidden;
    transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Particle system */
.particle-field{
    position:absolute; inset:0;
    opacity:0;
    transition: opacity 800ms ease-out;
}
.youth-intro.youth-stage1 .particle-field{ opacity:1; }
.particles-canvas{
    position:absolute; inset:0; width:100%; height:100%;
}

/* Energy rings */
.energy-rings{
    position:absolute; inset:0;
    display:grid; place-items:center;
}
.ring{
    position:absolute;
    border:2px solid var(--united-yellow);
    border-radius:50%;
    opacity:0;
    transform:scale(0);
    filter:blur(1px);
    animation-fill-mode:forwards;
}
.ring-1{
    width:200px; height:200px;
    animation: ringExpand 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.ring-2{
    width:400px; height:400px;
    animation: ringExpand 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards;
}
.ring-3{
    width:600px; height:600px;
    animation: ringExpand 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
}
.youth-intro.youth-stage1 .ring{ animation-play-state:running; }

/* Main brand container */
.youth-brand{
    position:relative; z-index:10;
    display:grid; place-items:center; gap:clamp(20px, 4vw, 40px);
    transform:scale(0.8); opacity:0;
    transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 600ms ease-out;
}
.youth-intro.youth-stage2 .youth-brand{
    transform:scale(1); opacity:1;
}

/* Logo with effects */
.logo-container{
    position:relative; 
    width:clamp(80px, 12vw, 140px); 
    height:clamp(80px, 12vw, 140px);
}
.logo-base{
    position:relative; z-index:2;
    width:100%; height:100%; object-fit:contain;
    filter:brightness(1.1) contrast(1.1);
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.youth-intro.youth-stage3 .logo-base{
    transform:scale(1.1) rotate(3deg);
}

.logo-glow{
    position:absolute; inset:-20px; z-index:1;
    background: radial-gradient(circle, var(--united-yellow) 0%, transparent 70%);
    opacity:0; border-radius:50%;
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.youth-intro.youth-stage3 .logo-glow{
    opacity:0.4; transform:scale(1.2);
}

.logo-pulse{
    position:absolute; inset:-10px; z-index:0;
    border:3px solid var(--united-yellow);
    border-radius:50%; opacity:0;
    animation: logoPulse 2s ease-in-out infinite;
}
.youth-intro.youth-stage3 .logo-pulse{
    opacity:0.6;
}

/* Advanced typography */
.text-container{
    display:grid; gap:clamp(8px, 2vw, 16px);
    text-align:center;
}
.text-line{
    overflow:hidden;
}
.word{
    display:inline-flex;
}
.char{
    display:inline-block;
    font-weight:900;
    transform:translateY(100%);
    opacity:0;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 400ms ease-out;
}

/* Staggered character animation */
.youth-intro.youth-stage2 .char{
    transform:translateY(0); opacity:1;
}
.char:nth-child(1){ transition-delay:0ms; }
.char:nth-child(2){ transition-delay:80ms; }
.char:nth-child(3){ transition-delay:160ms; }
.char:nth-child(4){ transition-delay:240ms; }
.char:nth-child(5){ transition-delay:320ms; }
.char:nth-child(6){ transition-delay:400ms; }
.char:nth-child(7){ transition-delay:480ms; }

/* Text styling */
.text-line-1 .char{
    font-size:clamp(24px, 5vw, 48px);
    color:#fff;
    letter-spacing:clamp(2px, 0.5vw, 6px);
}
.text-line-2 .char{
    font-size:clamp(32px, 7vw, 72px);
    color:var(--united-yellow);
    letter-spacing:clamp(3px, 0.8vw, 8px);
    text-shadow: 0 0 20px rgba(255,93,31,0.5);
}

/* Energy burst effects */
.energy-burst{
    position:absolute; inset:0;
    opacity:0;
    transform:scale(0);
    transition: opacity 400ms ease-out, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.youth-intro.youth-stage4 .energy-burst{
    opacity:1; transform:scale(1);
}

.burst-ray{
    position:absolute;
    top:50%; left:50%;
    width:300px; height:4px;
    background: linear-gradient(90deg, transparent, var(--united-yellow), transparent);
    transform-origin:0 50%;
    transform:rotate(var(--angle)) translateX(-150px);
    opacity:0;
    animation: rayBlast 800ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.youth-intro.youth-stage4 .burst-ray{
    animation-play-state:running;
}

/* Screen flash effect */
.screen-flash{
    position:absolute; inset:0; z-index:20;
    background:var(--united-yellow);
    opacity:0;
    pointer-events:none;
}
.youth-intro.youth-stage4 .screen-flash{
    animation: screenFlash 300ms ease-out 1.2s forwards;
}

/* Final state */
.youth-intro.youth-final{
    opacity:0; pointer-events:none;
    transition: opacity 400ms ease-out;
}

/* Keyframe animations */
@keyframes ringExpand{
    0%{ opacity:0; transform:scale(0); }
    20%{ opacity:0.8; }
    100%{ opacity:0; transform:scale(2); }
}

@keyframes logoPulse{
    0%, 100%{ transform:scale(1); opacity:0.6; }
    50%{ transform:scale(1.1); opacity:0.2; }
}

@keyframes rayBlast{
    0%{ opacity:0; transform:rotate(var(--angle)) translateX(-150px) scaleX(0); }
    20%{ opacity:1; }
    100%{ opacity:0; transform:rotate(var(--angle)) translateX(150px) scaleX(2); }
}

@keyframes screenFlash{
    0%{ opacity:0; }
    10%{ opacity:0.3; }
    100%{ opacity:0; }
}

/* Youth intro responsive adjustments */
@media (max-width: 768px){
    .youth-brand{
        gap:clamp(16px, 3vw, 24px);
    }
    .logo-container{
        width:clamp(60px, 10vw, 100px);
        height:clamp(60px, 10vw, 100px);
    }
    .text-line-1 .char{
        font-size:clamp(20px, 6vw, 36px);
        letter-spacing:clamp(1px, 0.4vw, 4px);
    }
    .text-line-2 .char{
        font-size:clamp(28px, 8vw, 56px);
        letter-spacing:clamp(2px, 0.6vw, 6px);
    }
    .ring-1{ width:150px; height:150px; }
    .ring-2{ width:300px; height:300px; }
    .ring-3{ width:450px; height:450px; }
    .burst-ray{ width:200px; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
    .youth-intro *{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .particle-field{ display: none; }
    .energy-rings{ display: none; }
    .energy-burst{ display: none; }
}
.intro .brand{
    position:fixed; top:50%; left:50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: left top;
    display:flex; align-items:center; gap: clamp(10px, 2vw, 16px);
    opacity:0; z-index:1100;
    transition:
            top var(--t-move) var(--ease-inout),
            left var(--t-move) var(--ease-inout),
            transform var(--t-move) var(--ease-inout),
            opacity var(--t-appear) var(--ease-out);
}
.intro.stage1 .brand{ opacity:1; }
.intro.stage2 .brand{ transform: translate(calc(-50% - 20px), -50%) scale(1); }
.intro .logo{
    display:block; height: clamp(58px, 8vw, 96px); width:auto;
    background:#0a0a0a; padding:12px 14px; border-radius:14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.intro .text{
    margin-left: clamp(-16px, -1.2vw, -8px);
    -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path var(--t-reveal) var(--ease-out), clip-path var(--t-reveal) var(--ease-out);
}
.intro.stage2 .text{ -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
.intro .line{
    margin:0; white-space:nowrap; transform: translateX(-16px); opacity:0;
    transition: transform 900ms var(--ease-out), opacity 700ms var(--ease-out),
    font-size var(--t-move) var(--ease-inout), letter-spacing var(--t-move) var(--ease-inout);
}
.intro.stage2 .line{ transform:none; opacity:1; }

/* Landing (două linii) */
#intro .line1{ font-size: clamp(26px, 4.6vw, 54px); font-weight:800; letter-spacing:.2px; }
#intro .line2{ font-size: clamp(16px, 2.4vw, 26px); color:var(--muted); font-weight:500; margin-top: clamp(2px, .4vw, 6px); }

/* Tineret (o linie) */
#intro-youth .line1{ font-size: clamp(26px, 5vw, 58px); font-weight:700; }
#intro-youth .line1 strong{ font-weight:900; }

.intro.toTop .brand{ top: var(--pad); left: var(--pad); transform: translate(0,0) scale(var(--brand-scale-final)); }
#intro.toTop .line1{ font-size: clamp(20px, 3.2vw, 36px); letter-spacing:.1px; }
#intro.toTop .line2{ font-size: clamp(14px, 1.9vw, 22px); }
#intro-youth.toTop .line1{ font-size: clamp(20px, 3.6vw, 38px); }
.intro.final{ background:transparent; pointer-events:none; }

/* Temă Tineret intro */
body.youth .intro .line,
body.youth .intro .line strong{ color: var(--united-yellow); }
body.youth .intro .logo{
    background: rgba(255,93,31,.08);
    box-shadow: 0 0 24px rgba(255,93,31,.25), inset 0 0 0 1px rgba(255,93,31,.35);
    filter: brightness(0) saturate(100%) invert(86%) sepia(96%) saturate(600%) hue-rotate(19deg) brightness(105%) contrast(102%);
}

/* ====== Brand static ====== */
.brand-static{
    position:fixed; top: var(--pad); left: var(--pad); z-index:1100;
    display:flex; align-items:center; gap:12px; transform: scale(var(--brand-scale-final));
    transform-origin: left top;
}
.brand-static .logo{
    display:block; height: clamp(58px, 8vw, 96px); width:auto;
    background:#0a0a0a; padding:12px 14px; border-radius:14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
}
.brand-static .tt{ display:flex; flex-direction:column; }
.brand-static .tt strong{ font-weight:800; font-size: clamp(20px, 3.2vw, 36px); }
.brand-static .tt span{ color:var(--muted); font-size: clamp(14px, 1.9vw, 22px); }

/* ====== NAV ====== */
.site-nav{
    position:fixed; top: calc(var(--nav-h) * -1); left:0; right:0; height: var(--nav-h);
    display:flex; align-items:center; justify-content:flex-end;
    padding: 0 calc(var(--pad) + 8px);
    padding-left: calc(var(--brand-reserve-left) + var(--pad));
    z-index:900; opacity:0;
    transition: top var(--t-move) var(--ease-inout), opacity 400ms var(--ease-out);
    background: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,.85));
    border-bottom:1px solid #0e0e0e; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.site-nav.show{ top:0; opacity:1; }
.site-nav nav{ height:100%; display:flex; align-items:center; }
.site-nav nav ul{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap: clamp(16px, 2.5vw, 28px); }
.site-nav a{
    color:var(--fg); text-decoration:none; font-weight:700;
    font-size: clamp(18px, 1.6vw, 22px); line-height:1; padding:12px 10px; opacity:.95;
}
.site-nav a:hover{ opacity:1; }
.site-nav a.active, .site-nav .united-btn.active, .site-nav .church-btn.active{ outline:2px solid #222; border-radius:10px; }

/* UNITED button */
.site-nav .united-btn{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border:1px solid #1a1a1a; border-radius:12px; background:#0b0b0b;
    transition: transform 200ms var(--ease-out), background 200ms ease, border-color 200ms ease;
}
.site-nav .united-btn img{ height: var(--united-logo-size); width:auto; display:block; filter: drop-shadow(0 0 0.5px rgba(0,0,0,.6)); }
.site-nav .united-btn span{ color: var(--united-yellow); font-weight:800; letter-spacing:.2px; }
.site-nav .united-btn:hover{ transform: translateY(-1px); background:#0e0e0e; border-color:#222; }

/* CHURCH button (folosit doar pe Tineret) */
.site-nav .church-btn{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px; border:1px solid #1a1a1a; border-radius:12px; background:#0b0b0b;
    transition: transform 200ms var(--ease-out), background 200ms ease, border-color 200ms ease;
}
.site-nav .church-btn img{ height: var(--church-logo-size); width:auto; display:block; filter: grayscale(100%) brightness(1.05) contrast(1.15); }
.site-nav .church-btn span{ color: var(--fg); font-weight:800; letter-spacing:.2px; }
.site-nav .church-btn:hover{ transform: translateY(-1px); background:#0e0e0e; border-color:#222; }

/* ====== VIDEO Landing ====== */
.video-wrap{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.video-bg{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover;
    filter: saturate(1.05) contrast(1.05) brightness(.88);
    pointer-events: none;
}
/* Hide video controls and play button completely */
.video-bg::-webkit-media-controls {
    display: none !important;
}
.video-bg::-webkit-media-controls-enclosure {
    display: none !important;
}
.video-bg::-webkit-media-controls-panel {
    display: none !important;
}
.video-bg::-webkit-media-controls-play-button {
    display: none !important;
}
.video-bg::-webkit-media-controls-start-playback-button {
    display: none !important;
}
.video-overlay{
    position:absolute; inset:0;
    background:
            linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.30) 40%, rgba(0,0,0,.55)),
            rgba(0,0,0,var(--video-dim));
}

/* ====== LANDING ====== */
#content{ opacity:0; transform: translateY(12px);
    transition: opacity var(--t-move) var(--ease-out), transform var(--t-move) var(--ease-out);
    padding-top: var(--nav-h);
}
#content.show{ opacity:1; transform:none; }
body.landing{ overflow:hidden; }
.landing-hero{
    height: calc(100dvh - var(--nav-h));
    display:grid; place-items:center; padding: 0 var(--pad);
}
.landing-hero .text-box{
    display:grid; justify-items:center; align-content:center;
    gap: 8px; text-align:center;
    padding: 16px 22px; max-width: min(92vw, 900px);
    background: var(--box-bg);
    backdrop-filter: blur(var(--box-blur)) saturate(1.05);
    -webkit-backdrop-filter: blur(var(--box-blur)) saturate(1.05);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.landing-hero h1{ margin:0; line-height:1.1; font-size: clamp(30px, 5.2vw, 64px); }
.landing-hero p{ margin:0; line-height:1.34; font-size: clamp(15px, 2vw, 20px); color: var(--accent); max-width: 65ch; }
.cta{ display:inline-block; margin-top: 6px; padding:12px 18px; border:1px solid #444; border-radius:12px; color:var(--fg); text-decoration:none; font-weight:800; }

/* ====== TINERET (video doar în prima secțiune) ====== */
body.youth{ overflow:auto; }
.youth-hero{
    position:relative; height: calc(100dvh - var(--nav-h));
    display:grid; place-items:center; padding: 0 var(--pad); overflow:hidden;
}
.youth-hero .section-video{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.youth-hero video{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    min-width:100%; min-height:100%; object-fit:cover;
    filter: saturate(1.05) contrast(1.05) brightness(.9);
}
.youth-hero .video-overlay{ position:absolute; inset:0; background:
        linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.25) 40%, rgba(0,0,0,.55)),
        rgba(0,0,0,.35);
}
.youth-hero .hero-title{
    text-align:center; display:grid; gap:8px; padding: 12px 20px;
    background: var(--box-bg);
    backdrop-filter: blur(var(--box-blur)); -webkit-backdrop-filter: blur(var(--box-blur));
    border: 1px solid rgba(255,255,255,.06); border-radius:14px;
}
.youth-hero h1{ margin:0; font-size: clamp(28px, 5vw, 60px); }
.youth-hero h1 strong{ font-weight:900; color: var(--united-yellow); }
.youth-hero p{ margin:0; color:var(--accent); }

/* ====== Pagini interne - layout de bază ====== */
.page{ padding: calc(var(--nav-h) + var(--pad)) var(--pad) var(--pad); max-width: 1200px; margin:0 auto; }
.section{ padding: clamp(28px, 5vw, 64px) var(--pad); border-top:1px solid #111; }
.page h1, .page h2{ margin:0 0 16px 0; }
.footer{ padding: 40px var(--pad); color:#8a8a8a; text-align:center; border-top:1px solid #111; }

/* ====== PROGRAM PAGE ====== */
.program-page .prog-hero{
    text-align:center;
    margin-bottom: 18px;
}
.program-page .prog-hero h1{
    font-size: clamp(28px, 4.6vw, 56px);
    margin:0;
}
.program-page .prog-hero p{
    margin: 6px 0 0 0;
    color: var(--accent);
}

/* grid */
.program-page .prog-grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

/* card generic */
.program-page .prog-card{
    background: var(--card-bg);
    border:1px solid var(--card-brd);
    border-radius: var(--card-r);
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
    transform: translateY(10px);
    opacity:0;
    transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out), border-color 300ms ease;
}

/* card: coloane */
.program-page .service{ grid-column: span 7; }
.program-page .youth  { grid-column: span 5; }
.program-page .events { grid-column: span 12; }

/* head */
.program-page .card-head{
    display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.program-page .card-head h2{
    margin:0; font-size: clamp(20px, 2.6vw, 32px);
}

/* badge timp/zi */
.time-badge{
    display:grid; place-items:center; padding:8px 10px;
    border:1px solid #262626; border-radius:12px;
    background:#0d0d0d; min-width:94px;
}
.time-badge .day{ font-size:12px; color:#bdbdbd; text-transform:uppercase; letter-spacing:.6px; }
.time-badge .time{ font-size:20px; font-weight:800; line-height:1; }

/* versiune galbenă (youth) */
.time-badge.yellow{
    border-color: rgba(255,93,31,.45);
    background: linear-gradient(180deg, rgba(255,93,31,.10), rgba(255,93,31,.04));
}
.time-badge.yellow .day{ color: rgba(255,93,31,.9); }
.time-badge.yellow .time{ color: var(--united-yellow); }

/* timeline (biserică) */
.timeline{ list-style:none; margin:0; padding:4px 0 0 0; display:grid; gap:10px; }
.timeline li{
    display:grid; grid-template-columns: 20px 1fr; align-items:start; gap:12px;
    position:relative;
}
.timeline li::before{
    content:""; position:absolute; left:9px; top:0; bottom:-10px; width:2px;
    background: linear-gradient(180deg, #222, transparent);
}
.timeline li:last-child::before{ bottom:10px; }
.timeline .dot{
    width:18px; height:18px; border-radius:50%;
    background: radial-gradient(circle at 35% 35%, #fff, #ddd 45%, #999 60%, #666 100%);
    box-shadow: 0 0 0 2px #111, 0 0 18px rgba(255,255,255,.08);
    animation: pop 700ms var(--ease-out) backwards;
}
.timeline .step h3{ margin:0; font-size: clamp(16px, 2.2vw, 20px); }
.timeline .step p{ margin:4px 0 0 0; color:var(--accent); }

/* youth card – accente UNITED */
.program-page .youth{
    border-color: rgba(255,93,31,.35);
    background:
            radial-gradient(800px 400px at 10% -10%, rgba(255,93,31,.12), transparent 60%),
            linear-gradient(180deg, rgba(255,93,31,.10), rgba(255,93,31,.04));
}
.program-page .youth h2{ color: var(--united-yellow); }
.program-page .points{
    list-style:none; margin:0; padding:6px 0 0 0; display:grid; gap:8px;
}
.program-page .points li{
    display:flex; align-items:center; gap:10px;
}
.program-page .points .spark{
    width:10px; height:10px; border-radius:50%;
    background: var(--united-yellow);
    box-shadow: 0 0 18px rgba(255,93,31,.6), 0 0 4px rgba(255,93,31,1);
    animation: glow 2.2s ease-in-out infinite alternate;
}
.cta.ghost{
    display:inline-block; margin-top:12px; padding:10px 14px; border-radius:12px;
    border:1px solid rgba(255,93,31,.45); color: var(--united-yellow); text-decoration:none; font-weight:800;
    transition: transform 200ms var(--ease-out), background 200ms ease, border-color 200ms ease;
}
.cta.ghost:hover{ transform: translateY(-1px); background: rgba(255,93,31,.06); border-color: rgba(255,93,31,.65); }

/* evenimente speciale */
.program-page .events-grid{
    display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;
}
.program-page .event-card{
    grid-column: span 4;
    display:flex; gap:12px; align-items:center;
    background:#090909; border:1px solid #1a1a1a; border-radius:14px; padding:12px;
    transition: transform 250ms var(--ease-out), border-color 250ms ease, background 250ms ease;
}
.program-page .event-card:hover{
    transform: translateY(-2px);
    border-color:#2a2a2a; background:#0c0c0c;
}
.program-page .event-card .date-badge{
    display:grid; place-items:center; width:64px; height:64px; border-radius:12px;
    background:#0e0e0e; border:1px solid #222;
}
.program-page .event-card .date-badge .d{ font-size:22px; font-weight:900; line-height:1; }
.program-page .event-card .date-badge .m{ font-size:12px; letter-spacing:1.2px; color:#bdbdbd; }
.program-page .event-card .info h3{ margin:0; font-size: clamp(16px, 2.2vw, 20px); }
.program-page .event-card .info p{ margin:4px 0 0 0; color:var(--accent); }

/* ====== Reveal-on-scroll ====== */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.in{ opacity:1; transform:none; }
.reveal.in .prog-card{ opacity:1; transform:none; }

/* ====== Animations ====== */
@keyframes pop{
    0%{ transform: scale(.7); opacity:.6 }
    100%{ transform: scale(1); opacity:1 }
}
@keyframes glow{
    from{ box-shadow: 0 0 10px rgba(255,93,31,.4), 0 0 2px rgba(255,93,31,1) }
    to  { box-shadow: 0 0 22px rgba(255,93,31,.8), 0 0 6px rgba(255,93,31,1) }
}

/* ====== Responsive ====== */
@media (max-width: 1100px){
    .program-page .service{ grid-column: span 12; }
    .program-page .youth  { grid-column: span 12; }
    .program-page .events { grid-column: span 12; }
    .program-page .event-card{ grid-column: span 6; }
}
@media (max-width: 720px){
    :root{ --brand-scale-final: 0.78; --nav-h: 100px; --united-logo-size: 22px; --church-logo-size:22px; }
    .site-nav{ padding-left: calc(clamp(190px, 24vw, 260px) + var(--pad)); }
    .site-nav a{ font-size: clamp(16px, 4.4vw, 18px); }
    .site-nav .united-btn, .site-nav .church-btn{ padding:8px 12px; gap:10px; }

    .program-page .event-card{ grid-column: span 12; }
}

/* ====== Reduce Motion ====== */
@media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important }
}



/* ====== ABOUT PAGE ====== */
.about-page{
    max-width: 1300px; /* puțin mai lat pentru layout-ul cu poză mare */
}

.about-split{
    position:relative;
    display:grid;
    grid-template-columns: 1.1fr 0.9fr; /* text : imagine */
    gap: 18px;
    align-items:center;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: clamp(22px, 4vw, 36px);
    background: #0a0a0a;
    border: 1px solid #191919;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    overflow:hidden;
}

.about-content{
    z-index:2;
    padding: clamp(6px, 1vw, 10px) clamp(6px, 1vw, 10px);
}

.about-title{
    margin: 0 0 8px 0;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    font-size: clamp(34px, 6.4vw, 92px); /* FOARTE MARE */
}

.about-text{
    margin: 8px 0 0 0;
    color: var(--accent);
    font-size: clamp(15px, 2vw, 19px);   /* mai mic decât titlul */
    line-height: 1.5;
    max-width: 62ch;
}

.about-link{
    color:#fff; font-weight:800; text-decoration:none; border-bottom:1px solid #333;
}
.about-link:hover{ border-color:#555; }

.about-media{
    position:relative;
    height: clamp(220px, 40vw, 520px);
    border-radius: 14px;
    overflow:hidden;
    /* păstrăm imaginea în dreapta pe desktop */
    justify-self: end;
    width: 100%;
}
.about-media img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    transform: scale(1.02);
    filter: saturate(1.05) contrast(1.05);
}
.about-media .about-grad{
    position:absolute; inset:0;
    /* GRADIENT NEGRU peste poză (mai intens spre dreapta) */
    background:
            linear-gradient(90deg,
            rgba(0,0,0,0.10) 0%,
            rgba(0,0,0,0.35) 45%,
            rgba(0,0,0,0.70) 100%);
    pointer-events:none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Reveal pentru about */
.about-split.reveal{ opacity:0; transform: translateY(12px); }
.about-split.reveal.in{ opacity:1; transform:none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }

/* ====== RESPONSIVE (About) ====== */
@media (max-width: 1000px){
    .about-split{
        grid-template-columns: 1fr; /* stivuim pe mobil/tabletă */
        gap: 14px;
    }
    .about-media{
        order: 2;            /* rămâne la final, sub text */
        height: clamp(220px, 48vw, 440px);
        justify-self: stretch;
    }
    .about-title{ font-size: clamp(30px, 8vw, 64px); }
}


/* =========================
   CONTACT & LOCAȚIE — adaugă la finalul styles.css
   ========================= */

/* ===== CONTACT ===== */
.contact-page{ max-width:1200px; }

/* Hero */
.contact-hero{
    position:relative; text-align:center;
    padding:20px 0 10px;
}
.contact-hero .halo{
    position:absolute; inset:-40px 0 auto 0; height:280px;
    background:radial-gradient(600px 200px at 50% 20%, rgba(255,93,31,.22), transparent 60%);
    filter:blur(20px); z-index:-1;
}
.contact-hero h1{ margin:0; font-size:clamp(30px,5vw,64px); }
.contact-hero p{ margin:6px 0 0 0; color:var(--accent, #e6e6e6); }

/* Grid */
.contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
}

/* Card-uri */
.card{
    background:var(--card, #0a0a0a);
    border:1px solid var(--card-brd, #191919);
    border-radius:var(--r-lg, 18px);
    padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card.glass{
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.card h2{ margin:0 0 12px 0; }

/* Form */
.field{ display:grid; gap:6px; margin-bottom:10px; }
.field.two{ grid-template-columns:1fr 1fr; gap:10px; }
label{ font-size:14px; color:#cfcfcf; }
input, textarea{
    width:100%; background:#0e0e0e; border:1px solid #1e1e1e;
    border-radius:12px; padding:12px; color:#fff; outline:none;
}
input:focus, textarea:focus{ border-color:#2a2a2a; }
.form-msg{ margin-top:8px; color:var(--united-yellow, #FF5D1F); font-weight:700; }

/* Contact info + social */
.info .contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.info .contact-list li{ display:flex; align-items:center; gap:10px; }
.info .contact-list svg{ width:20px; height:20px; fill:#aaa; }
.info a{ color:#fff; text-decoration:none; border-bottom:1px solid #333; }

/* Donații */
.divider{ height:1px; background:#191919; margin:14px 0; }
.don-title{ margin:0 0 2px 0; }
.muted{ color:#a7a7a7; }
.don-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.don-card{
    background:#0b0b0b; border:1px solid #1a1a1a;
    border-radius:14px; padding:12px;
}
.don-card h4{ margin:0 0 6px 0; }
.iban{ margin:0 0 8px 0; }
.handle{ margin:0 0 8px 0; color:#cfcfcf; }

/* Butoane (scopate doar pentru paginile acestea ca să nu-ți strice alte stiluri) */
.contact-page .btn, .location-page .btn{
    display:inline-block; padding:12px 18px; border-radius:12px;
    font-weight:800; text-decoration:none; cursor:pointer;
    border:1px solid #444; color:#fff; background:transparent;
    transition:transform 200ms cubic-bezier(.22,.61,.36,1), background 200ms ease, border-color 200ms ease;
}
.contact-page .btn:hover, .location-page .btn:hover{ transform:translateY(-1px); }
.contact-page .btn.primary, .location-page .btn.primary{ border-color:#666; background:#111; }
.contact-page .btn.ghost, .location-page .btn.ghost{ border-color:#333; }

/* ===== LOCAȚIE ===== */
.location-page{ max-width:1200px; }

/* Hero */
.loc-hero{
    position:relative; text-align:center;
    padding:20px 0 6px;
}
.loc-hero .halo{
    position:absolute; inset:-40px 0 auto 0; height:260px;
    background:radial-gradient(600px 200px at 50% 20%, rgba(255,255,255,.16), transparent 60%);
    filter:blur(18px); z-index:-1;
}
.loc-hero h1{ margin:0; font-size:clamp(30px,5vw,64px); }
.loc-hero p{ margin:6px 0 10px 0; color:var(--accent, #e6e6e6); }
.cta-row{ display:flex; gap:10px; justify-content:center; }

/* Hartă */
.map-wrap{ margin-top:6px; }
.map-card{
    position:relative; border-radius:var(--r-lg, 18px); overflow:hidden;
    border:1px solid var(--card-brd, #191919);
    box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.map-card iframe{ display:block; width:100%; height:min(60vh, 560px); border:0; }
.map-card .map-overlay{
    position:absolute; inset:0; pointer-events:none;
    background:
            radial-gradient(600px 200px at 10% -10%, rgba(255,255,255,.06), transparent 60%),
            linear-gradient(180deg, transparent 70%, rgba(0,0,0,.35));
}
.center{ text-align:center; }

/* Direcții */
.dir-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px;
}
.dir-card{
    background:#0b0b0b; border:1px solid #1a1a1a; border-radius:14px; padding:14px;
    text-align:center; transition:transform 250ms cubic-bezier(.22,.61,.36,1);
}
.dir-card:hover{ transform:translateY(-2px); }
.icon-circle{
    width:42px; height:42px; border-radius:50%; background:#111;
    display:grid; place-items:center; margin:0 auto 8px auto; font-size:20px;
}

/* ===== Reveal on scroll (dacă nu-l ai deja) ===== */
.reveal{ opacity:0; transform:translateY(10px); }
.reveal.in{ opacity:1; transform:none; transition:opacity 700ms cubic-bezier(.22,.61,.36,1), transform 700ms cubic-bezier(.22,.61,.36,1); }

/* ===== Responsive ===== */
@media (max-width:900px){
    .contact-grid{ grid-template-columns:1fr; }
    .don-grid{ grid-template-columns:1fr 1fr; }
    .dir-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
    .don-grid{ grid-template-columns:1fr; }
}


/* === Spacing logo + text (intro: landing & tineret) === */
.intro .brand{
    gap: clamp(16px, 2.4vw, 28px);           /* înainte era mai mic */
}
.intro .text{
    margin-left: clamp(8px, 1.2vw, 16px);    /* scoatem margin-ul negativ */
}

/* === Spacing logo + text în header (după animație + pagini interne) === */
.brand-static{
    gap: clamp(16px, 2.2vw, 26px);           /* mai mult “respiro” lângă logo */
}



/* =========================
   NAV — matte glass + hamburger
   (ADD/REPLACE block)
   ========================= */

/* Variabile utile (opțional): dacă vrei, le poți muta în :root */
:root{
    --nav-glass-bg: rgba(12,12,12,.38);
    --nav-glass-brd: rgba(255,255,255,.06);
    --nav-glass-blur: 12px;
}

/* NAV bar — matte glass */
.site-nav{
    position:fixed; top: calc(var(--nav-h) * -1); left:0; right:0; height: var(--nav-h);
    display:flex; align-items:center; justify-content:flex-end;
    padding: 0 calc(var(--pad) + 8px);
    padding-left: calc(var(--brand-reserve-left) + var(--pad));
    z-index:900; opacity:0;

    /* 🔁 nou: matte glass */
    background: var(--nav-glass-bg);
    -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(1.05);
    backdrop-filter: blur(var(--nav-glass-blur)) saturate(1.05);
    border-bottom: 1px solid var(--nav-glass-brd);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    transition: top var(--t-move) var(--ease-inout), opacity 400ms var(--ease-out),
    background 250ms ease, border-color 250ms ease;
}

/* Când e vizibil */
.site-nav.show{ top:0; opacity:1; }

/* Link-urile rămân la fel */
.site-nav nav{ height:100%; display:flex; align-items:center; }
.site-nav nav ul{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap: clamp(16px, 2.5vw, 28px); }
.site-nav a{
    color:var(--fg); text-decoration:none; font-weight:700;
    font-size: clamp(18px, 1.6vw, 22px); line-height:1; padding:12px 10px; opacity:.95;
}
.site-nav a:hover{ opacity:1; }
.site-nav a.active, .site-nav .united-btn.active, .site-nav .church-btn.active{ outline:2px solid #222; border-radius:10px; }

/* Butoanele speciale din nav rămân cum erau (united/church) */


/* =========================
   HAMBURGER BUTTON
   ========================= */
.hamburger{
    display:none; /* ascuns pe desktop */
    position:relative;
    width:44px; height:44px;
    margin-left:12px;
    border-radius:10px;
    border:1px solid var(--nav-glass-brd);
    background: rgba(0,0,0,.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor:pointer;
    outline:none;
    transition: transform 200ms var(--ease-out), background 200ms ease, border-color 200ms ease;
}
.hamburger:hover{ transform: translateY(-1px); }
.hamburger:focus-visible{ box-shadow: 0 0 0 2px rgba(255,255,255,.2); }

/* cele 3 linii */
.hamburger span,
.hamburger::before,
.hamburger::after{
    content:"";
    position:absolute; left: 11px; right:11px; height:2px;
    background:#fff; border-radius:2px; transition: transform 300ms var(--ease-inout), opacity 200ms ease;
}
.hamburger::before{ top:14px; }
.hamburger span     { top:21px; }
.hamburger::after { top:28px; }

/* stare activă (X) */
.hamburger[aria-expanded="true"]::before{ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span{ opacity:0; }
.hamburger[aria-expanded="true"]::after{ transform: translateY(-7px) rotate(-45deg); }

/* =========================
   MENIU MOBIL (drawer simplu)
   ========================= */
.mobile-menu{
    position: fixed;
    top: var(--nav-h); left:0; right:0;
    z-index: 890;
    background: rgba(10,10,10,.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
    border-bottom: 1px solid var(--nav-glass-brd);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);

    transform: translateY(-8px);
    opacity:0; pointer-events:none;
    transition: transform 280ms var(--ease-out), opacity 220ms var(--ease-out);
}
.mobile-menu ul{
    margin:0; padding: 10px var(--pad) 14px var(--pad);
    list-style:none; display:grid; gap:8px;
}
.mobile-menu a{
    display:block; padding:12px 10px; border-radius:12px;
    color:#fff; text-decoration:none; font-weight:800; border:1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.22);
}
.mobile-menu a:hover{ background: rgba(255,255,255,.06); }

/* toggled on */
body.nav-open .mobile-menu{
    transform: none;
    opacity:1; pointer-events:auto;
}

/* Blochează scroll-ul fundalului când e deschis meniul */
body.nav-open{ overflow:hidden; }

/* =========================
   RESPONSIVE — afișează hamburger pe mobil
   ========================= */
@media (max-width: 980px){
    /* ascundem lista orizontală și afișăm hamburger */
    .site-nav nav ul{ display:none; }
    .hamburger{ display:block; }

    /* opțional: micșorăm puțin nav-ul pe mobil */
    :root{ --nav-h: 88px; }
    .site-nav{ padding-left: calc(clamp(180px, 24vw, 260px) + var(--pad)); }
}

/* (opțional) întărim puțin fundalul când userul a derulat */
.site-nav.is-sticky{
    background: rgba(12,12,12,.55);
    border-bottom-color: rgba(255,255,255,.08);
}

/* ===== Mobile menu — FULL SCREEN overlay ===== */
:root{
    --mobile-glass-bg: rgba(10,10,10,.55);
    --mobile-glass-brd: rgba(255,255,255,.08);
    --mobile-glass-blur: 14px;
}

/* acoperă toată pagina; rămâne sub .site-nav ca să poți apăsa hamburger-ul */
.mobile-menu{
    position: fixed;
    inset: 0;                         /* full screen */
    z-index: 880;                     /* sub .site-nav (900) */
    background: var(--mobile-glass-bg);
    -webkit-backdrop-filter: blur(var(--mobile-glass-blur)) saturate(1.05);
    backdrop-filter: blur(var(--mobile-glass-blur)) saturate(1.05);
    border-bottom: 1px solid var(--mobile-glass-brd);

    display: grid;
    grid-template-rows: auto 1fr;
    padding-top: calc(var(--nav-h) + 8px);   /* spațiu sub bară */
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: transform 280ms var(--ease-out), opacity 220ms var(--ease-out);
    overflow: hidden;
}

/* container scrollabil pentru link-uri */
.mobile-menu ul{
    margin: 0;
    padding: clamp(10px, 3.5vh, 28px) var(--pad) clamp(16px, 4vh, 36px) var(--pad);
    list-style: none;
    display: grid;
    gap: clamp(8px, 1.8vh, 14px);
    align-content: start;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* link-uri mari, ușor de apăsat */
.mobile-menu a{
    display: block;
    padding: clamp(12px, 1.8vh, 16px) clamp(12px, 2vw, 16px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: clamp(18px, 2.8vh, 22px);
    letter-spacing: .2px;
    transition: transform 200ms var(--ease-out), background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.mobile-menu a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

/* când e deschis */
body.nav-open .mobile-menu{
    transform: none;
    opacity: 1; pointer-events: auto;
}

/* UNITED în galben (și pe mobil) */
.mobile-menu a.united-btn{
    border-color: rgba(255,93,31,.45);
    color: var(--united-yellow);
    background: linear-gradient(180deg, rgba(255,93,31,.10), rgba(255,93,31,.04));
    text-shadow: 0 0 6px rgba(255,93,31,.35);
}
.mobile-menu a.united-btn:hover{
    background: rgba(255,93,31,.12);
    border-color: rgba(255,93,31,.65);
}

/* dacă UNITED are și imagine (copiată din nav), o micșorăm frumos */
.mobile-menu a.united-btn img{
    height: 22px; width: auto; vertical-align: middle; margin-right: 8px;
    filter: drop-shadow(0 0 .5px rgba(0,0,0,.6))
    brightness(1) saturate(1) invert(86%) sepia(96%) saturate(600%) hue-rotate(19deg) brightness(105%) contrast(102%);
}

/* opțional: stil neutru pentru church pe mobil */
.mobile-menu a.church-btn img{
    height: 22px; width: auto; vertical-align: middle; margin-right: 8px;
    filter: grayscale(100%) brightness(1.05) contrast(1.15);
}


/* =========================
   UNITED — Blobs, Matte Glass, Cards, Grid, Lightbox, etc.
   (scoped pe body.youth sau clase united-)
   ========================= */

/* Matte glass helpers */
.glass-soft{
    background: rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
    border:1px solid rgba(255,255,255,.06);
    border-radius:16px; padding:10px 14px;
}
.glass-strong{
    background: rgba(0,0,0,.38);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    backdrop-filter: blur(12px) saturate(1.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px; padding:16px;
}

/* Intro blobs */
body.youth .united-blobs{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    filter: blur(28px) saturate(1.2);
}
body.youth .united-blobs .blob{
    position:absolute; width:44vmax; height:44vmax; border-radius:50%;
    background: radial-gradient( at 30% 30%, rgba(255,93,31,.85), rgba(255,93,31,.25) 60%, transparent 70% );
    opacity:.35; animation: floatA 18s ease-in-out infinite;
}
body.youth .united-blobs .b1{ left:-10vmax; top:-6vmax; }
body.youth .united-blobs .b2{ right:-12vmax; bottom:-8vmax; animation-name: floatB; }
body.youth .united-blobs .b3{
    left: 10vmax; bottom: -10vmax; width:52vmax; height:52vmax;
    background: radial-gradient( at 60% 40%, rgba(255,255,255,.55), rgba(255,93,31,.2) 60%, transparent 75% );
    animation-name: floatC; opacity:.22;
}
@keyframes floatA { 0%{transform:translateY(0) } 50%{transform:translateY(20px)} 100%{transform:translateY(0)} }
@keyframes floatB { 0%{transform:translate(0,0)} 50%{transform:translate(-20px,10px)} 100%{transform:translate(0,0)} }
@keyframes floatC { 0%{transform:translate(0,0)} 50%{transform:translate(16px,-14px)} 100%{transform:translate(0,0)} }

/* HERO buttons */
body.youth .btn-primary, body.youth .btn-ghost{
    display:inline-block; padding:12px 16px; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer;
    border:1px solid rgba(255,255,255,.12); color:#fff; background: transparent;
    transition: transform 180ms cubic-bezier(.22,.61,.36,1), background 200ms ease, border-color 200ms ease;
}
body.youth .btn-primary{
    border-color: rgba(255,93,31,.55);
    color: var(--united-yellow); background: linear-gradient(180deg, rgba(255,93,31,.08), rgba(255,93,31,.03));
    text-shadow: 0 0 6px rgba(255,93,31,.35);
}
body.youth .btn-primary:hover{ transform: translateY(-1px); background: rgba(255,93,31,.12); }
body.youth .btn-ghost:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); }

/* Next Event card + Countdown */
.united-next .next-card{ position:relative; overflow:hidden; }
.united-next .next-card .head{ display:flex; align-items:center; gap:10px; }
.united-next .pill{
    display:inline-grid; place-items:center; padding:6px 10px; border-radius:999px;
    background: rgba(255,93,31,.14); color: var(--united-yellow); border:1px solid rgba(255,93,31,.35);
    font-weight:900; letter-spacing:.3px;
}
.united-next h2{ margin:6px 0 10px; font-size: clamp(22px, 4.8vw, 40px); }
.united-next .meta{ color:var(--accent); margin: 0 0 10px; }
.united-next .countdown{
    display:grid; grid-auto-flow:column; gap:10px; align-items:stretch; width:max-content;
    background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:8px 10px; margin: 4px 0 12px 0;
}
.united-next .countdown .num{ display:block; font-size: clamp(20px, 4.6vw, 30px); font-weight:900; line-height:1; text-align:center }
.united-next .countdown .lbl{ display:block; font-size:12px; text-align:center; color:#bdbdbd }

/* 4 cards grid */
.united-grid{
    display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
}
.united-card{
    grid-column: span 3;
    position:relative; overflow:hidden; padding:18px; border-radius:16px;
    border:1px solid #1a1a1a; background: #0a0a0a;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    transition: transform .22s var(--ease-out), border-color .22s ease, background .22s ease;
}
.united-card .halo{ position:absolute; inset:-40% -40%; background: radial-gradient(500px 240px at 10% 10%, rgba(255,93,31,.12), transparent 60%); filter: blur(16px); z-index:0; }
.united-card h3{ position:relative; z-index:1; margin:0 0 6px 0; font-size: clamp(18px, 3vw, 24px); color: var(--united-yellow); }
.united-card p{ position:relative; z-index:1; margin:0 0 10px 0; color: var(--accent); }
.united-card .card-link{ position:relative; z-index:1; color:#fff; font-weight:800; text-decoration:none; border-bottom:1px solid #333; }
.united-card:hover{ transform: translateY(-2px); border-color:#272727; background:#0d0d0d; }

@media (max-width: 1100px){
    .united-card{ grid-column: span 6; }
}
@media (max-width: 720px){
    .united-card{ grid-column: span 12; }
}

/* FAQ */
.united-faq .faq{
    background:#0b0b0b; border:1px solid #1a1a1a; border-radius:14px; padding:12px 14px; margin:10px 0;
}
.united-faq .faq summary{ cursor:pointer; font-weight:800; }
.united-faq .faq p{ color: var(--accent); margin:8px 0 0 0; }

/* Events page */
.united-header h1{ margin:0 0 6px 0; font-size: clamp(26px, 5.4vw, 60px); }
.united-header p{ margin:0 0 10px 0; color: var(--accent); }
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 6px; }
.chip{
    padding:8px 12px; border-radius:999px; border:1px solid #2a2a2a; background:#0c0c0c; color:#fff;
    cursor:pointer; font-weight:800;
}
.chip.active, .chip:focus{ outline: none; border-color: rgba(255,93,31,.45); color: var(--united-yellow); }

.united-events-grid{
    display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;
}
.event-card{
    grid-column: span 6;
    display:flex; gap:12px; align-items:center; padding:14px; border-radius:16px;
    background:#0b0b0b; border:1px solid #1a1a1a; transition: transform .2s var(--ease-out);
}
.event-card:hover{ transform: translateY(-2px); }
.event-card .date{
    display:grid; place-items:center; width:70px; height:70px; border-radius:14px; background:#0f0f0f; border:1px solid #222;
}
.event-card .date .d{ font-size:22px; font-weight:900; }
.event-card .date .m{ font-size:12px; letter-spacing:1px; color:#bdbdbd; }
.event-card .actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 1100px){
    .event-card{ grid-column: span 12; }
}

/* Groups page */
.united-groups-grid{
    display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:8px;
}
.group-card{
    grid-column: span 6; background:#0b0b0b; border:1px solid #1a1a1a; border-radius:16px; padding:14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
@media (max-width: 1100px){ .group-card{ grid-column: span 12; } }

.join-modal{ max-width:640px; width:calc(100% - 24px); border-radius:18px; }
.join-form .actions{ display:flex; gap:10px; justify-content:flex-end; }

/* Media page */
.united-media-grid{
    display:grid; grid-template-columns: repeat(12, 1fr); gap:10px; margin-top:8px;
}
.media-thumb{
    position:relative; grid-column: span 3; border-radius:14px; overflow:hidden; border:1px solid #1a1a1a; background:#0b0b0b;
}
.media-thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .25s var(--ease-out); }
.media-thumb:hover img{ transform: scale(1.02); }
.media-thumb .play{ position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.6); border:1px solid #333; border-radius:999px; padding:6px 10px; font-weight:900; }
@media (max-width: 1100px){ .media-thumb{ grid-column: span 6; } }
@media (max-width: 720px){ .media-thumb{ grid-column: span 12; } }

.lightbox{
    position: fixed; inset:0; display:none; place-items:center; background: rgba(0,0,0,.75);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1000;
}
.lightbox.show{ display:grid; }
.lightbox img{ max-width: 92vw; max-height: 86vh; border-radius:14px; border:1px solid #333; }
.lightbox .close{ position:absolute; top:16px; right:16px; border:1px solid #444; background:#111; color:#fff; border-radius:10px; padding:8px 10px; font-weight:900; }

/* Serve page */
.united-serve-grid{
    display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px;
}
.serve-opt{
    display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px; padding:10px 12px;
    border:1px solid #1a1a1a; border-radius:12px; background:#0b0b0b; cursor:pointer; user-select:none;
}
.serve-opt input{ accent-color: #dbea38; }

/* small utilities */
.muted{ color:#a7a7a7; }

/* =========================
   YOUTH REDESIGN - Modern, Interactive Components
   ========================= */

/* Youth branding in nav - moved to left */
.youth-branding-left{
    position:absolute; top:50%; left:var(--pad);
    transform:translateY(-50%);
    display:flex; align-items:center; gap:12px;
    z-index:10;
}
/* Old right position (deprecated) */
.youth-branding{
    position:absolute; top:50%; right:var(--pad);
    transform:translateY(-50%);
    display:flex; align-items:center; gap:12px;
    z-index:10;
}
.youth-logo{
    height:28px; width:auto;
    filter:brightness(1.1) contrast(1.1);
}
.youth-text{
    font-weight:800; font-size:18px;
    color:var(--united-yellow);
    letter-spacing:0.5px;
    text-shadow: 0 0 6px rgba(255,93,31,0.3);
}

/* Container utility */
.container{
    max-width:1200px; margin:0 auto;
    padding:0 var(--pad);
}

/* Hero section redesign */
.youth-hero-new{
    position:relative; height:100vh;
    display:grid; place-items:center;
    overflow:hidden; padding:0 var(--pad);
}
.hero-video-bg{
    position:absolute; inset:0; z-index:1;
}
.hero-video-bg video{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    min-width:100%; min-height:100%;
    object-fit:cover;
    filter:saturate(1.1) contrast(1.1) brightness(0.8);
}
.video-overlay-gradient{
    position:absolute; inset:0;
    background: 
        linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%),
        radial-gradient(circle at 30% 70%, rgba(255,93,31,0.15) 0%, transparent 60%);
}

.hero-content{
    position:relative; z-index:10;
    text-align:center; max-width:800px;
    animation: heroFadeIn 1s ease-out 0.5s both;
}
.hero-badge{
    display:inline-block; padding:8px 16px;
    background:rgba(255,93,31,0.2);
    border:1px solid rgba(255,93,31,0.4);
    border-radius:24px; margin-bottom:20px;
    font-weight:800; font-size:14px;
    color:var(--united-yellow);
    letter-spacing:1px;
    animation: badgePulse 2s ease-in-out infinite;
}
.hero-title{
    margin:0 0 16px 0; line-height:1.1;
}
.hero-title .line{
    display:block; font-size:clamp(36px, 8vw, 80px);
    font-weight:900;
}
.hero-title .highlight{
    color:var(--united-yellow);
    text-shadow: 0 0 30px rgba(255,93,31,0.5);
    position:relative;
}
.hero-subtitle{
    margin:0 0 32px 0; font-size:clamp(16px, 2.5vw, 22px);
    color:#e0e0e0; line-height:1.4;
}
.hero-actions{
    display:flex; gap:16px; justify-content:center;
    margin-bottom:40px; flex-wrap:wrap;
}
.hero-stats{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:24px; max-width:500px; margin:0 auto;
}
.stat{
    text-align:center;
}
.stat .number{
    display:block; font-size:clamp(24px, 4vw, 36px);
    font-weight:900; color:var(--united-yellow);
    line-height:1;
}
.stat .label{
    display:block; font-size:14px;
    color:#c0c0c0; margin-top:4px;
}

/* Floating Action Button */
.floating-action{
    position:fixed; bottom:24px; right:24px; z-index:100;
}
.fab{
    display:flex; align-items:center; gap:8px;
    padding:12px 20px; border-radius:50px;
    background:var(--united-yellow); color:#000;
    border:none; font-weight:800; cursor:pointer;
    box-shadow: 0 8px 25px rgba(255,93,31,0.4);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.fab:hover{
    transform:translateY(-2px);
    box-shadow: 0 12px 35px rgba(255,93,31,0.6);
}
.fab-icon{
    font-size:20px; font-weight:900;
}

/* Next Event Section */
.next-event-section{
    padding:clamp(40px, 8vw, 80px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.next-event-card{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:24px; padding:32px;
    position:relative; overflow:hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.next-event-card::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px 300px at 20% 20%, rgba(255,93,31,0.1), transparent 60%);
    pointer-events:none;
}
.event-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:24px;
}
.event-badge{
    display:flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:20px;
    background:rgba(255,93,31,0.15);
    border:1px solid rgba(255,93,31,0.3);
    font-weight:800; font-size:12px;
    color:var(--united-yellow); letter-spacing:1px;
}
.pulse-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--united-yellow);
    animation: pulse 2s ease-in-out infinite;
}
.share-btn{
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:10px; padding:8px;
    color:#fff; cursor:pointer;
    transition: all 200ms ease;
}
.share-btn:hover{
    background:rgba(255,255,255,0.2);
    transform:translateY(-1px);
}

.event-title{
    margin:0 0 20px 0;
    font-size:clamp(28px, 5vw, 48px);
    font-weight:900; color:var(--united-yellow);
    text-shadow: 0 0 20px rgba(255,93,31,0.3);
}
.event-meta{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:12px; margin-bottom:24px;
}
.meta-item{
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:10px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
}
.meta-item .icon{
    font-size:16px;
}

.countdown-wrapper{
    margin:24px 0; text-align:center;
}
.countdown{
    display:inline-grid; grid-template-columns:repeat(4,1fr);
    gap:16px; padding:20px; border-radius:16px;
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(255,93,31,0.2);
}
.time-unit{
    text-align:center;
}
.time-unit .num{
    display:block; font-size:clamp(24px, 4vw, 36px);
    font-weight:900; color:var(--united-yellow);
    line-height:1;
}
.time-unit .lbl{
    display:block; font-size:12px;
    color:#a0a0a0; margin-top:4px;
    text-transform:uppercase; letter-spacing:1px;
}

.event-actions{
    display:flex; gap:12px; flex-wrap:wrap;
    margin:24px 0;
}
.btn-primary, .btn-secondary{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 20px; border-radius:12px;
    font-weight:800; text-decoration:none;
    cursor:pointer; border:none;
    transition: all 200ms ease;
}
.btn-primary{
    background:var(--united-yellow); color:#000;
    box-shadow: 0 4px 15px rgba(255,93,31,0.3);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,93,31,0.5);
}
.btn-secondary{
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff;
}
.btn-secondary:hover{
    background:rgba(255,255,255,0.2);
    transform:translateY(-1px);
}
.btn-ghost{
    background:transparent;
    border:1px solid rgba(255,93,31,0.4);
    color:var(--united-yellow);
}
.btn-ghost:hover{
    background:rgba(255,93,31,0.1);
}

.event-attendees{
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:20px; margin-top:20px;
}
.attendees-list{
    display:flex; align-items:center; gap:8px;
}
.attendee-avatar{
    width:32px; height:32px; border-radius:50%;
    border:2px solid var(--united-yellow);
}
.attendees-count{
    font-weight:700; color:#c0c0c0;
    margin-left:8px;
}

/* Experience Section */
.experience-section{
    padding:clamp(60px, 10vw, 100px) 0;
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 70%);
}
.section-header{
    text-align:center; margin-bottom:48px;
}
.section-header h2{
    margin:0 0 8px 0;
    font-size:clamp(32px, 6vw, 56px);
    font-weight:900;
}
.section-header p{
    margin:0; font-size:clamp(16px, 2.5vw, 20px);
    color:#a0a0a0;
}

.experience-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
}
.exp-card{
    position:relative; height:300px;
    border-radius:20px; overflow:hidden;
    cursor:pointer;
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.exp-card:hover{
    transform:translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.card-bg{
    position:absolute; inset:0;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    transition: transform 300ms ease;
}
.exp-card:hover .card-bg{
    transform:scale(1.05);
}
.card-content{
    position:relative; z-index:2;
    padding:24px; height:100%;
    display:flex; flex-direction:column;
    background: linear-gradient(135deg, rgba(255,93,31,0.1) 0%, transparent 60%);
}
.card-icon{
    font-size:48px; margin-bottom:16px;
}
.card-content h3{
    margin:0 0 8px 0;
    font-size:24px; font-weight:900;
    color:var(--united-yellow);
}
.card-content p{
    margin:0 0 auto 0;
    color:#c0c0c0; line-height:1.4;
}
.card-stats{
    display:flex; flex-direction:column; gap:4px;
    margin-top:16px;
}
.card-stats span{
    font-size:12px; color:#a0a0a0;
    font-weight:600;
}
.card-hover{
    position:absolute; bottom:0; left:0; right:0;
    padding:16px 24px; background:var(--united-yellow);
    color:#000; font-weight:800;
    transform:translateY(100%);
    transition: transform 300ms ease;
}
.exp-card:hover .card-hover{
    transform:translateY(0);
}

/* Testimonials */
.testimonials-section{
    padding:clamp(60px, 10vw, 100px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.testimonials-section h2{
    text-align:center; margin:0 0 48px 0;
    font-size:clamp(32px, 6vw, 48px);
    font-weight:900;
}
.testimonials-slider{
    position:relative; max-width:800px;
    margin:0 auto; height:200px;
}
.testimonial{
    position:absolute; inset:0;
    opacity:0; transform:translateX(30px);
    transition: all 500ms ease;
}
.testimonial.active{
    opacity:1; transform:translateX(0);
}
.testimonial-content{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:32px;
}
.testimonial-content p{
    margin:0 0 24px 0; font-size:18px;
    line-height:1.6; font-style:italic;
}
.testimonial-author{
    display:flex; align-items:center; gap:16px;
}
.author-avatar{
    width:48px; height:48px; border-radius:50%;
    border:2px solid var(--united-yellow);
}
.testimonial-author div strong{
    display:block; font-weight:800;
    color:var(--united-yellow);
}
.testimonial-author div span{
    font-size:14px; color:#a0a0a0;
}

.slider-controls{
    display:flex; justify-content:center;
    align-items:center; gap:24px; margin-top:32px;
}
.slider-btn{
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%; width:48px; height:48px;
    color:#fff; cursor:pointer; font-size:24px;
    transition: all 200ms ease;
}
.slider-btn:hover{
    background:rgba(255,93,31,0.2);
    border-color:rgba(255,93,31,0.4);
}
.slider-dots{
    display:flex; gap:8px;
}
.dot{
    width:12px; height:12px; border-radius:50%;
    background:rgba(255,255,255,0.3);
    cursor:pointer;
    transition: all 200ms ease;
}
.dot.active{
    background:var(--united-yellow);
}

/* Modal */
.modal{
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(8px);
    display:none; place-items:center;
    padding:20px;
}
.modal.show{
    display:grid;
}
.modal-content{
    background:#1a1a1a; border:1px solid rgba(255,93,31,0.2);
    border-radius:20px; max-width:500px; width:100%;
    max-height:90vh; overflow-y:auto;
}
.modal-header{
    display:flex; justify-content:space-between;
    align-items:center; padding:24px 24px 0 24px;
}
.modal-header h3{
    margin:0; color:var(--united-yellow);
    font-weight:900;
}
.modal-close{
    background:none; border:none; color:#fff;
    font-size:24px; cursor:pointer;
    width:32px; height:32px; border-radius:50%;
    transition: background 200ms ease;
}
.modal-close:hover{
    background:rgba(255,255,255,0.1);
}
.modal-body{
    padding:24px;
}
.form-group{
    margin-bottom:16px;
}
.form-group label{
    display:block; margin-bottom:6px;
    font-weight:700; color:#e0e0e0;
}
.form-group input, .form-group select{
    width:100%; padding:12px; border-radius:8px;
    background:#0d0d0d; border:1px solid rgba(255,255,255,0.2);
    color:#fff; font-size:16px;
}
.form-group input:focus, .form-group select:focus{
    outline:none; border-color:var(--united-yellow);
}
.checkbox-group{
    display:flex; align-items:center; gap:8px;
    margin:16px 0;
}
.checkbox-group input[type="checkbox"]{
    width:auto; accent-color:var(--united-yellow);
}

/* Youth Footer */
.youth-footer{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border-top:1px solid rgba(255,93,31,0.2);
    padding:40px 0 20px;
}
.footer-content{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:32px; margin-bottom:32px;
}
.footer-brand img{
    height:40px; margin-bottom:12px;
}
.footer-brand p{
    margin:0; color:#a0a0a0;
}
.footer-quick-links h4{
    margin:0 0 16px 0; color:var(--united-yellow);
    font-weight:800;
}
.footer-quick-links a{
    display:block; margin-bottom:8px;
    color:#c0c0c0; text-decoration:none;
    transition: color 200ms ease;
}
.footer-quick-links a:hover{
    color:var(--united-yellow);
}
.footer-contact h4{
    margin:0 0 16px 0; color:var(--united-yellow);
    font-weight:800;
}
.footer-contact p{
    margin:0 0 8px 0; color:#c0c0c0;
}
.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.1);
    padding-top:20px; text-align:center;
}

/* Animations */
@keyframes heroFadeIn{
    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}
@keyframes badgePulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.05); }
}
@keyframes pulse{
    0%, 100%{ opacity:1; transform:scale(1); }
    50%{ opacity:0.7; transform:scale(1.2); }
}

/* Responsive */
@media (max-width: 768px){
    .youth-branding{
        right:clamp(16px, 4vw, 24px);
    }
    .youth-text{
        display:none; /* Hide text on mobile, keep only logo */
    }
    .hero-stats{
        grid-template-columns:1fr;
        gap:16px;
    }
    .hero-actions{
        flex-direction:column;
        align-items:center;
    }
    .event-meta{
        grid-template-columns:1fr;
    }
    .event-actions{
        flex-direction:column;
    }
    .experience-grid{
        grid-template-columns:1fr;
    }
    .footer-content{
        grid-template-columns:1fr;
        text-align:center;
    }
}

/* =========================
   POLLS PAGE - Interactive Voting System
   ========================= */

/* Polls Hero */
.polls-hero{
    padding:clamp(80px, 12vw, 120px) 0 clamp(40px, 8vw, 60px);
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    text-align:center;
}
.polls-hero .hero-badge{
    display:inline-block; padding:8px 16px;
    background:rgba(255,93,31,0.2);
    border:1px solid rgba(255,93,31,0.4);
    border-radius:24px; margin-bottom:20px;
    font-weight:800; font-size:14px;
    color:var(--united-yellow);
    letter-spacing:1px;
}

/* Active Polls Section */
.active-polls{
    padding:clamp(40px, 8vw, 80px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.polls-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
    gap:24px;
}

/* Poll Cards */
.poll-card{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:20px; padding:24px;
    position:relative; overflow:hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.poll-card:hover{
    transform:translateY(-4px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}
.poll-card.quick{
    border-color:rgba(255,107,107,0.3);
}
.poll-card::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(600px 300px at 20% 20%, rgba(255,93,31,0.08), transparent 60%);
    pointer-events:none;
}

/* Poll Header */
.poll-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px;
}
.poll-status{
    padding:6px 12px; border-radius:20px;
    font-weight:800; font-size:12px;
    letter-spacing:1px; text-transform:uppercase;
}
.poll-status.live{
    background:rgba(255,107,107,0.2);
    border:1px solid rgba(255,107,107,0.4);
    color:#ff6b6b;
}
.poll-status.quick{
    background:rgba(255,206,84,0.2);
    border:1px solid rgba(255,206,84,0.4);
    color:#ffce54;
}
.poll-timer{
    display:flex; align-items:center; gap:6px;
    color:#a0a0a0; font-size:14px; font-weight:600;
}

/* Poll Content */
.poll-content h3{
    margin:0 0 8px 0;
    font-size:clamp(18px, 3vw, 24px);
    font-weight:900; color:var(--united-yellow);
}
.poll-content p{
    margin:0 0 24px 0; color:#c0c0c0;
    line-height:1.5;
}

/* Poll Options */
.poll-options{
    display:grid; gap:12px; margin-bottom:20px;
}
.poll-options.quick{
    gap:8px;
}
.poll-option{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px; padding:16px;
    cursor:pointer;
    transition: all 200ms ease;
    position:relative; overflow:hidden;
}
.poll-option:hover{
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,93,31,0.3);
    transform:translateY(-1px);
}
.poll-option.voted{
    border-color:var(--united-yellow);
    background:rgba(255,93,31,0.1);
}

.option-content{
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px;
}
.option-icon{
    font-size:24px; width:40px; text-align:center;
}
.option-text strong{
    display:block; font-weight:800; color:#fff;
    font-size:16px; margin-bottom:2px;
}
.option-text span{
    font-size:14px; color:#a0a0a0;
}

.option-progress{
    display:flex; justify-content:space-between; align-items:center;
}
.progress-bar{
    flex:1; height:8px; background:rgba(255,255,255,0.1);
    border-radius:4px; margin-right:12px; overflow:hidden;
}
.progress-fill{
    height:100%; background:var(--united-yellow);
    border-radius:4px;
    transition: width 500ms ease;
    position:relative;
}
.progress-fill::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s ease-in-out infinite;
}
.progress-text{
    font-size:14px; font-weight:700;
    color:var(--united-yellow); min-width:80px;
    text-align:right;
}

/* Poll Stats */
.poll-stats{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:16px; border-top:1px solid rgba(255,255,255,0.1);
    font-size:14px; color:#a0a0a0;
}

/* Poll Suggestions */
.poll-suggestions{
    padding:clamp(40px, 8vw, 80px) 0;
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 70%);
}
.suggestion-card{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:20px; padding:32px;
    max-width:600px; margin:0 auto;
}
.suggestion-header{
    text-align:center; margin-bottom:32px;
}
.suggestion-header h2{
    margin:0 0 8px 0; color:var(--united-yellow);
    font-weight:900;
}
.suggestion-form{
    display:grid; gap:20px;
}
.suggestion-form .form-group{
    display:grid; gap:8px;
}
.suggestion-form label{
    font-weight:700; color:#e0e0e0;
}
.suggestion-form input, .suggestion-form textarea, .suggestion-form select{
    padding:12px 16px; border-radius:12px;
    background:#0a0a0a; border:1px solid rgba(255,255,255,0.2);
    color:#fff; font-size:16px;
    transition: border-color 200ms ease;
}
.suggestion-form input:focus, .suggestion-form textarea:focus, .suggestion-form select:focus{
    outline:none; border-color:var(--united-yellow);
}

/* Past Polls */
.past-polls{
    padding:clamp(40px, 8vw, 80px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.past-polls-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:20px;
}
.past-poll-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:20px;
    transition: transform 200ms ease;
}
.past-poll-card:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.05);
}
.past-poll-header{
    display:flex; justify-content:space-between; align-items:start;
    margin-bottom:16px;
}
.past-poll-header h4{
    margin:0; font-weight:800; color:#fff;
    font-size:16px; line-height:1.3;
}
.past-poll-date{
    font-size:12px; color:#a0a0a0;
    white-space:nowrap;
}
.past-poll-winner{
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px;
}
.winner-icon{
    font-size:24px;
}
.winner-text strong{
    display:block; color:var(--united-yellow);
    font-weight:800;
}
.winner-text span{
    font-size:14px; color:#c0c0c0;
}
.past-poll-impact{
    display:flex; align-items:center; gap:8px;
}
.impact-badge{
    padding:4px 8px; border-radius:12px;
    background:rgba(76,175,80,0.2);
    border:1px solid rgba(76,175,80,0.4);
    color:#4caf50; font-size:12px; font-weight:700;
}
.impact-text{
    font-size:14px; color:#a0a0a0;
}

/* Vote Modal */
.vote-modal{
    max-width:400px; text-align:center;
}
.vote-confirmation{
    padding:20px;
}
.vote-icon{
    font-size:48px; margin-bottom:16px;
}
.vote-details{
    margin-top:20px; padding:16px;
    background:rgba(255,93,31,0.1);
    border:1px solid rgba(255,93,31,0.3);
    border-radius:12px;
}

/* Animations */
@keyframes shimmer{
    0%{ transform:translateX(-100%); }
    100%{ transform:translateX(100%); }
}

/* Responsive */
@media (max-width: 768px){
    .polls-grid{
        grid-template-columns:1fr;
    }
    .poll-header{
        flex-direction:column; gap:8px;
        align-items:start;
    }
    .poll-stats{
        flex-direction:column; gap:8px;
        align-items:start;
    }
    .past-polls-grid{
        grid-template-columns:1fr;
    }
    .past-poll-header{
        flex-direction:column; gap:4px;
    }
}

/* =========================
   EVENTS PAGE - Hero & Content
   ========================= */

.events-hero{
    padding:clamp(80px, 12vw, 120px) 0 clamp(40px, 8vw, 60px);
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    text-align:center;
}
.events-hero .hero-badge{
    display:inline-block; padding:8px 16px;
    background:rgba(255,93,31,0.2);
    border:1px solid rgba(255,93,31,0.4);
    border-radius:24px; margin-bottom:20px;
    font-weight:800; font-size:14px;
    color:var(--united-yellow);
    letter-spacing:1px;
}
.events-hero h1{
    margin:0 0 16px 0;
    font-size:clamp(32px, 6vw, 64px);
    font-weight:900; line-height:1.1;
}
.events-hero p{
    margin:0 0 32px 0;
    color:#c0c0c0; font-size:clamp(16px, 2.5vw, 20px);
    max-width:600px; margin-left:auto; margin-right:auto;
}

.quick-actions{
    display:flex; gap:16px; justify-content:center;
    flex-wrap:wrap;
}
.quick-btn{
    display:flex; align-items:center; gap:8px;
    padding:12px 20px; border-radius:12px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff; font-weight:700;
    cursor:pointer;
    transition: all 200ms ease;
}
.quick-btn:hover{
    background:rgba(255,93,31,0.1);
    border-color:rgba(255,93,31,0.3);
    transform:translateY(-1px);
}

.events-controls{
    padding:20px 0;
    background:rgba(0,0,0,0.5);
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.controls-wrapper{
    display:flex; gap:20px; align-items:center;
    flex-wrap:wrap;
}
.search-box{
    position:relative; flex:1; min-width:200px;
}
.search-box input{
    width:100%; padding:12px 16px 12px 44px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px; color:#fff;
    font-size:16px;
}
.search-box .search-icon{
    position:absolute; left:16px; top:50%;
    transform:translateY(-50%); font-size:16px;
}

.filters{
    display:flex; gap:8px; flex-wrap:wrap;
}
.filter-chip{
    padding:8px 16px; border-radius:20px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff; font-weight:700; font-size:14px;
    cursor:pointer;
    transition: all 200ms ease;
}
.filter-chip:hover, .filter-chip.active{
    background:rgba(255,93,31,0.2);
    border-color:rgba(255,93,31,0.4);
    color:var(--united-yellow);
}

.view-toggle{
    display:flex; gap:4px;
}
.view-btn{
    padding:8px 12px; border-radius:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff; cursor:pointer;
    transition: all 200ms ease;
}
.view-btn:hover, .view-btn.active{
    background:rgba(255,93,31,0.2);
    color:var(--united-yellow);
}

/* =========================
   YOUTH LOCATION PAGE - Modern & Interactive
   ========================= */

.youth-location-hero{
    padding:clamp(80px, 12vw, 120px) 0 clamp(40px, 8vw, 60px);
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    text-align:center;
}
.youth-location-hero .hero-badge{
    display:inline-block; padding:8px 16px;
    background:rgba(255,93,31,0.2);
    border:1px solid rgba(255,93,31,0.4);
    border-radius:24px; margin-bottom:20px;
    font-weight:800; font-size:14px;
    color:var(--united-yellow);
    letter-spacing:1px;
}

.quick-location-info{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:16px; margin:32px auto; max-width:800px;
}
.location-item{
    display:flex; align-items:center; gap:8px;
    padding:12px 16px; border-radius:12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
}
.location-item .icon{
    font-size:20px;
}

.youth-map-section{
    padding:clamp(40px, 8vw, 80px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.map-wrapper{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:20px; padding:24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.map-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; flex-wrap:wrap; gap:16px;
}
.map-header h2{
    margin:0; color:var(--united-yellow);
    font-weight:900;
}
.map-controls{
    display:flex; gap:8px;
}
.map-btn{
    padding:8px 12px; border-radius:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    color:#fff; font-weight:600; font-size:14px;
    cursor:pointer;
    transition: all 200ms ease;
}
.map-btn:hover, .map-btn.active{
    background:rgba(255,93,31,0.2);
    border-color:rgba(255,93,31,0.4);
    color:var(--united-yellow);
}

.map-container{
    position:relative; height:400px;
    border-radius:16px; overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
}
.map-container iframe{
    width:100%; height:100%; border:none;
}
.map-overlay{
    position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.1));
}
.location-pin{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}
.pin-icon{
    font-size:32px; margin-bottom:4px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.pin-label{
    background:rgba(255,93,31,0.9);
    color:#000; padding:4px 8px; border-radius:8px;
    font-weight:800; font-size:12px;
}

/* Location Features */
.location-features{
    padding:clamp(60px, 10vw, 100px) 0;
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 70%);
}
.features-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:24px;
}
.feature-card{
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:16px; padding:24px;
    text-align:center;
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.feature-card:hover{
    transform:translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.feature-icon{
    font-size:48px; margin-bottom:16px;
}
.feature-card h3{
    margin:0 0 12px 0; color:var(--united-yellow);
    font-weight:900;
}
.feature-card p{
    margin:0 0 16px 0; color:#c0c0c0;
    line-height:1.5;
}
.feature-details{
    display:grid; gap:4px; text-align:left;
}
.feature-details span{
    font-size:14px; color:#a0a0a0;
    font-weight:600;
}

/* Directions */
.directions-section{
    padding:clamp(60px, 10vw, 100px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.directions-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
}
.direction-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:24px;
    text-align:center;
    transition: transform 200ms ease;
}
.direction-card:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.05);
}
.direction-icon{
    font-size:48px; margin-bottom:16px;
}
.direction-card h3{
    margin:0 0 16px 0; color:#fff;
    font-weight:800;
}
.direction-details{
    margin-bottom:20px; text-align:left;
}
.route{
    margin-bottom:8px; color:#c0c0c0;
    font-size:14px; line-height:1.4;
}
.route strong{
    color:#fff;
}
.direction-btn{
    padding:10px 16px; border-radius:10px;
    background:rgba(255,93,31,0.2);
    border:1px solid rgba(255,93,31,0.4);
    color:var(--united-yellow); font-weight:700;
    cursor:pointer;
    transition: all 200ms ease;
}
.direction-btn:hover{
    background:rgba(255,93,31,0.3);
    transform:translateY(-1px);
}

/* First Time Visitor */
.first-time-section{
    padding:clamp(60px, 10vw, 100px) 0;
    background: radial-gradient(ellipse at center, #0a0a0a 0%, #000 70%);
}
.first-time-card{
    display:grid; grid-template-columns:1fr 400px;
    gap:40px; align-items:center;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
    border:1px solid rgba(255,93,31,0.2);
    border-radius:20px; padding:40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.first-time-content h2{
    margin:0 0 16px 0; color:var(--united-yellow);
    font-weight:900; font-size:clamp(24px, 4vw, 36px);
}
.first-time-content p{
    margin:0 0 24px 0; color:#c0c0c0;
    line-height:1.6; font-size:16px;
}
.first-time-tips{
    display:grid; gap:12px; margin-bottom:32px;
}
.tip{
    display:flex; align-items:center; gap:12px;
    padding:12px; border-radius:10px;
    background:rgba(255,255,255,0.05);
}
.tip-icon{
    font-size:20px;
}
.first-time-actions{
    display:flex; gap:16px; flex-wrap:wrap;
}
.first-time-image{
    border-radius:16px; overflow:hidden;
}
.first-time-image img{
    width:100%; height:300px; object-fit:cover;
}

/* Youth Contact Section */
.youth-contact-section{
    padding:clamp(40px, 8vw, 80px) 0;
    background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
}
.contact-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:24px;
}
.contact-card{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:24px;
}
.contact-card h3{
    margin:0 0 16px 0; color:var(--united-yellow);
    font-weight:800;
}
.contact-details, .schedule-details, .quick-info{
    display:grid; gap:12px;
}
.contact-link{
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:8px;
    background:rgba(255,255,255,0.05);
    color:#fff; text-decoration:none;
    transition: all 200ms ease;
}
.contact-link:hover{
    background:rgba(255,93,31,0.1);
    color:var(--united-yellow);
}
.contact-icon{
    font-size:16px;
}
.schedule-item, .info-item{
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.1);
    color:#c0c0c0;
}
.schedule-item strong{
    color:#fff;
}

/* Responsive for location */
@media (max-width: 768px){
    .youth-branding-left{
        left:clamp(16px, 4vw, 24px);
    }
    .youth-text{
        display:none; /* Hide text on mobile */
    }
    .quick-location-info{
        grid-template-columns:1fr;
    }
    .map-header{
        flex-direction:column; align-items:start;
    }
    .features-grid{
        grid-template-columns:1fr;
    }
    .directions-grid{
        grid-template-columns:1fr;
    }
    .first-time-card{
        grid-template-columns:1fr;
        text-align:center;
    }
    .contact-grid{
        grid-template-columns:1fr;
    }
}