:root{
    --ink:#0a0a0a;
    --paper:#f5f1e6;
    --orange:#ef6a1f;
    --orange-2:#f5943e;
    --purple:#6c3fa8;
    --purple-2:#9b5cff;
    --olive:#5c5f38;
    --olive-2:#484b2c;
    --line: rgba(245,241,230,0.14);
    --line-strong: rgba(245,241,230,0.28);
    --surface:#141414;
    --surface-2:#1c150e;
    --text-dim: rgba(245,241,230,0.65);
    --text-dimmer: rgba(245,241,230,0.45);
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:10px;
    --font-display:'Luckiest Guy', cursive;
    --font-body:'Space Grotesk', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  html, body{
    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE / old Edge */
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar{
    display:none;              /* Chrome, Safari, new Edge */
    width:0;
    height:0;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
  }
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    overflow-x:hidden;
  }

/* ===========================
   UTB LOADER
=========================== */

#utb-loader{
    position:fixed;
    inset:0;
    background:#090909;
    z-index:999999;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

#utb-loader::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,
        rgba(239,106,31,.28),
        transparent 70%);
    filter:blur(80px);
}

.utb-loader-content{
    position:relative;
    z-index:2;
    text-align:center;
}

.utb-loader-logo{
    width:110px;
    margin-bottom:18px;
}

.utb-loader-title{
    color:#fff;
    letter-spacing:4px;
    font-size:18px;
    margin-bottom:12px;
}

.utb-loader-text{
    color:#bdbdbd;
    margin-bottom:35px;
    letter-spacing:2px;
    font-size:14px;
}

.utb-loader-eq{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:7px;
    height:70px;
}

.utb-loader-eq span{
    width:8px;
    background:#ef6a1f;
    border-radius:20px;
    animation:utbEqualizer .9s ease-in-out infinite;
}

.utb-loader-eq span:nth-child(1){
    animation-delay:.1s;
}
.utb-loader-eq span:nth-child(2){
    animation-delay:.3s;
}
.utb-loader-eq span:nth-child(3){
    animation-delay:.5s;
}
.utb-loader-eq span:nth-child(4){
    animation-delay:.2s;
}
.utb-loader-eq span:nth-child(5){
    animation-delay:.6s;
}
.utb-loader-eq span:nth-child(6){
    animation-delay:.4s;
}
.utb-loader-eq span:nth-child(7){
    animation-delay:.15s;
}
.utb-loader-eq span:nth-child(8){
    animation-delay:.45s;
}

@keyframes utbEqualizer{

    0%,100%{
        height:12px;
    }

    25%{
        height:60px;
    }

    50%{
        height:30px;
    }

    75%{
        height:50px;
    }

}











  ::selection{ background:var(--orange); color:var(--ink); }
  .display{
    font-family:'Luckiest Guy', cursive;
    letter-spacing:0.5px;
  }

  /* ---------- doodle shapes ---------- */
  .doodle{position:absolute; pointer-events:none; opacity:0.9; z-index:0;}
  svg.spin{animation:spin 22s linear infinite;}
  @keyframes spin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){ svg.spin{animation:none;} }

  /* ---------- marquee ---------- */
  .marquee-wrap{
    display: block;
    background:var(--orange);
    color:var(--ink);
    border-bottom:3px solid var(--ink);
    overflow:hidden;
    white-space:nowrap;
    padding:9px 0;
    position:relative;
    z-index:5;
  }
  .marquee-wrap-2{
    display: block;
    color:white;
    border-bottom:3px solid var(--ink);
    overflow:hidden;
    white-space:nowrap;
    padding:9px 0;
    position:relative;
    z-index:5;
  }
  .marquee-track{
    display:inline-flex;
    align-items:center;
    width:max-content;
    white-space:nowrap;
    animation:scroll-left 18s linear infinite;
    font-weight:700;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  .marquee-track span{margin:0 22px;}
  @keyframes scroll-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  .marquee-star{
    display:inline-block;
    vertical-align:middle;
    width:22px;
    height:22px;
    margin:0 22px;
    object-fit:contain;
    animation: star-spin 3s linear infinite;
  }

  /* ---------- nav ---------- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 5vw;
    position:sticky;
    top:0;
    z-index:50;
    background:var(--ink);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:1px;}
  .brand img{width:50px; height:50px; object-fit:contain;}
  .brand small{ display:block; font-size:11px; letter-spacing:2px; color:var(--orange-2); text-transform:uppercase; }
  .brand strong{font-size:15px; letter-spacing:1px;}
  nav{display:flex; align-items:center;}
  nav a{
    color:var(--paper); text-decoration:none; font-size:14px; margin-left:28px;
    opacity:0.8; transition:opacity .2s;
  }
  nav a:hover{opacity:1; color: var(--orange-2);}
  .btn{
    display:inline-block;
    background:var(--paper);
    color:var(--ink);
    font-weight:700;
    padding:11px 22px;
    border-radius:999px;
    text-decoration:none;
    font-size:14px;
    border:2px solid var(--paper);
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--orange); border-color:var(--orange); color:var(--ink);}
  .btn-primary:hover{ box-shadow:0 10px 26px rgba(239,106,31,.35); }
  .btn-ghost-line{ background:transparent; color:var(--paper); border-color:var(--line-strong); }
  .btn-ghost-line:hover{ border-color:var(--paper); }
  .btn-full{ width:100%; text-align:center; }
  .grain{
    position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* Hamburger */
.menu-toggle{
    display:none;
    font-size:30px;
    color:white;
    cursor:pointer;
    background:none;
    border:none;
}

/* Smooth transition */
nav{
    transition:.3s ease;
}

/* -------------------------- */
/* Tablet */
/* -------------------------- */

@media (max-width:1100px){

    nav a{
        margin-left:18px;
        font-size:13px;
    }

    .ticket-btn{
        padding:10px 18px;
        font-size:13px;
    }
}

@media (max-width:900px){

    nav a{
        margin-left:14px;
        font-size:12px;
    }

    .ticket-btn{
        padding:9px 15px;
        font-size:12px;
    }
}

/* -------------------------- */
/* Mobile */
/* -------------------------- */

@media (max-width:768px){

    header{
        position:relative;
        padding:12px 20px;
        display: none;
        
    }

    .menu-toggle{
        display:block;
        order:3;
    }

    .ticket-btn{
        margin-left:auto;
        margin-right:15px;
        padding:8px 14px;
        font-size:12px;
        display: none;
    }

    nav{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#111;
        display:;
        flex-direction:column;
        align-items:center;

        max-height:0;
        overflow:hidden;

        border-top:1px solid rgba(255,255,255,.08);
    }

    nav.active{
        max-height:400px;
        padding:15px 0;
    }

    nav a{
        margin:15px 0;
        font-size:16px;
    }
}
  /* ---------- hero ---------- */
  .hero{
    /* min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; */
    padding-top:100px; overflow:hidden;
  }
  .hero-bg{ position:absolute; inset:0; z-index:-1; background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(255,90,31,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(255,179,71,.14), transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0d0c0f 60%, #0a0a0b 100%);
    animation:hero-drift 16s ease-in-out infinite alternate;
  }
    @keyframes hero-drift{ 0%{ filter:hue-rotate(0deg) brightness(1);} 100%{ filter:hue-rotate(6deg) brightness(1.08);} }
  .hero-grid{ position:absolute; inset:0; z-index:0; opacity:.35;
    background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%); }
  .hero-content{ position:relative; z-index:1; text-align:center; padding:0 20px; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--orange-2);
    border:1px solid var(--border-strong); padding:7px 16px; border-radius:100px; margin-bottom:28px;
    background:rgba(255,255,255,.03);
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    padding:8px 18px; border-radius:999px;
    font-size:12px; letter-spacing:3px; text-transform:uppercase;
    color:var(--orange-2);
    margin-bottom:28px;
  }
  .pulse-dot{ width:7px; height:7px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 0 rgba(255,77,77,.6); animation:pulse 1.8s infinite; flex-shrink:0; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,77,77,.6);} 70%{box-shadow:0 0 0 10px rgba(255,77,77,0);} 100%{box-shadow:0 0 0 0 rgba(255,77,77,0);} }
  .hero-logo{
    width:min(82vw, 700px);
    height:auto;
    display:block;
    margin:-50px auto;
  }
  .hero p{
    max-width:560px; margin:90px auto 0;
    font-size:17px; line-height:1.6; color:rgba(245,241,230,0.78);
    position:relative; z-index:1;
  }
  .hero-ctas{margin-top:20px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}

  /* ---------- section shell ---------- */
  section{position:relative; padding:100px 5vw; z-index:2;}
  @media (max-width:720px){ section{padding:70px 5vw;} }
  .section-alt{ background:#0d0d0d; }
  .section-head{max-width:680px; margin:0 auto 56px; text-align:center;}
  .section-head.wide{max-width:900px;}
  .section-head .tag{
    color:var(--olive-2); background:var(--paper); display:inline-block;
    font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:700;
    padding:6px 14px; border-radius:999px; margin-bottom:18px;
  }
  .about-right .tag{
    color:var(--olive-2); background:var(--paper); display:inline-block;
    font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:700;
    padding:6px 14px; border-radius:999px; margin-bottom:18px;
  }
  .section-head h2{font-size:clamp(30px,5vw,48px); color:var(--paper);}
  .section-head p{margin-top:14px; color:rgba(245,241,230,0.65); font-size:15px;}

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- neon border card (reused from part-card technique) ---------- */
  .neon-card{
    position:relative; overflow:hidden;
    background:var(--surface);
    border:2px solid transparent;
    border-radius:var(--radius-lg);
    transition:transform .25s ease;
  }
  .neon-card:hover{ transform:translateY(-6px); }
  .neon-card::before{
    content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .3s;
  }
  .neon-card:hover::before{ opacity:1; animation:neonRun 2s linear infinite; }
  .neon-card.tone-orange::before{ background:conic-gradient(from 0deg, transparent 0deg, transparent 260deg, #ff7b00 300deg, #ffd54f 320deg, #ff7b00 340deg, transparent 360deg); }
  .neon-card.tone-purple::before{ background:conic-gradient(from 0deg, transparent 0deg, transparent 260deg, #9b5cff 300deg, #d39cff 320deg, #9b5cff 340deg, transparent 360deg); }
  @keyframes neonRun{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

  /* ---------- phases ---------- */
  .phase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:1180px; margin:0 auto; }
  @media (max-width:940px){ .phase-grid{ grid-template-columns:1fr; } }
  .phase-card{ padding:36px 32px; display:flex; flex-direction:column; gap:22px; }
  .phase-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .phase-num{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
  .tone-orange .phase-num{ color:var(--orange-2); }
  .tone-purple .phase-num{ color:var(--purple-2); }
  .phase-card h3.display{ font-size:clamp(30px,3.6vw,42px); margin-top:6px; }
  .tone-orange h3.display{ color:var(--orange-2); }
  .tone-purple h3.display{ color:var(--purple-2); }
  .phase-desc{ color:var(--text-dim); font-size:14.5px; line-height:1.65; margin-top:-8px; }
  .status-pill{
    font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    padding:6px 12px; border-radius:100px; display:flex; align-items:center; gap:7px; white-space:nowrap;
    border:1px solid var(--line-strong); background:rgba(245,241,230,.04);
  }
  .status-pill.live{ color:#ff4d4d; border-color:rgba(255,77,77,.4); }
  .status-pill.upcoming{ color:var(--purple-2); }

  .video-frame{ position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:#000; }
  .video-frame iframe{ width:100%; height:100%; border:0; }
  .video-tag{ position:absolute; top:12px; left:12px; z-index:2; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.6); padding:5px 10px; border-radius:100px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }

  .countdown{ display:flex; gap:10px; }
  .cd-box{ flex:1; background:rgba(0,0,0,.35); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 6px; text-align:center; }
  .cd-num{ font-family:var(--font-display); font-size:clamp(22px,3vw,30px); color:var(--orange-2); }
  .cd-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dimmer); margin-top:2px; }

  .schedule-list{ display:flex; flex-direction:column; gap:2px; }
  .schedule-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 4px; border-bottom:1px dashed var(--line); font-size:14px; }
  .schedule-row:last-child{ border-bottom:none; }
  .schedule-day{ font-family:var(--font-mono); font-size:11px; color:var(--orange-2); letter-spacing:.06em; min-width:52px; }
  .schedule-title{ flex:1; padding:0 12px; color:var(--paper); }
  .schedule-time{ font-family:var(--font-mono); font-size:12px; color:var(--text-dimmer); }

  .venue-map{ border-radius:var(--radius-md); border:1px solid var(--line); overflow:hidden; background:radial-gradient(circle at 30% 30%, #241030, #0c0a0d 70%); position:relative; aspect-ratio:16/10; }
  .map-pin{ position:absolute; width:14px; height:14px; }
  .map-pin::before{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--purple-2); box-shadow:0 0 0 4px rgba(155,92,255,.25); }
  .map-pin::after{ content:''; position:absolute; inset:-10px; border-radius:50%; border:1px solid rgba(155,92,255,.4); animation:ripple 2.4s ease-out infinite; }
  @keyframes ripple{ 0%{ transform:scale(.4); opacity:1;} 100%{ transform:scale(2.4); opacity:0;} }
  .map-label{ position:absolute; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }

  .venue-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .fact{ background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; }
  .fact-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); }
  .fact-value{ font-size:16px; margin-top:4px; font-weight:600; color:var(--paper); }

  /* ---------- timeline (fader signature) ---------- */
  .timeline-wrap{ overflow-x:auto; padding-bottom:14px; }
  .timeline{ display:flex; align-items:flex-end; gap:0; min-width:760px; position:relative; padding:60px 10px 10px; }
  .timeline-track{ position:absolute; left:40px; right:40px; bottom:96px; height:2px; background:var(--line); }
  .timeline-track-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:linear-gradient(90deg, var(--orange), var(--orange-2)); transition:width 1.6s cubic-bezier(.16,.8,.3,1); }
  .day-col{ flex:1; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; }
  .fader-track{ width:3px; height:130px; background:var(--surface); border:1px solid var(--line); border-radius:4px; position:relative; margin-bottom:16px; }
  .fader-fill{ position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(180deg, var(--orange-2), var(--orange)); border-radius:4px; height:0%; transition:height 1.4s cubic-bezier(.16,.8,.3,1); transition-delay:.2s; }
  .fader-knob{ position:absolute; left:50%; bottom:0%; width:22px; height:12px; background:var(--paper); border-radius:4px; transform:translate(-50%,50%); box-shadow:0 0 0 1px var(--ink), 0 2px 6px rgba(0,0,0,.5); transition:bottom 1.4s cubic-bezier(.16,.8,.3,1); transition-delay:.2s; }
  .day-col.on .fader-fill{ height:var(--lvl); }
  .day-col.on .fader-knob{ bottom:var(--lvl); background:var(--orange-2); }
  .day-col.on .day-dot{ background:var(--orange); box-shadow:0 0 14px var(--orange); }
  .day-dot{ width:11px; height:11px; border-radius:50%; background:var(--surface); border:1px solid var(--line-strong); margin-bottom:14px; transition:all .4s; }
  .day-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--text-dimmer); text-transform:uppercase; }
  .day-name{ font-family:var(--font-display); font-size:16px; margin-top:6px; text-align:center; letter-spacing:.02em; color:var(--paper); }
  .day-desc{ font-size:12px; color:var(--text-dim); text-align:center; margin-top:4px; max-width:130px; }

  /* ---------- lineup ---------- */
  .lineup-cols{ display:grid; grid-template-rows:1fr 1fr; gap:40px; max-width:100%; margin:0 auto; }
  @media (max-width:860px){ .lineup-cols{ grid-template-columns:1fr; } }
  .crew-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:26px; }
  .crew-title{ display:flex; align-items:center; gap:14px; }
  .crew-swatch{ width:38px; height:38px; border-radius:12px; flex-shrink:0; }
  .crew-swatch.hindustan{ background:linear-gradient(135deg, var(--purple-2), var(--purple)); }
  .crew-swatch.revolution{ background:linear-gradient(135deg, #ffd54f, var(--orange)); }
  .crew-head h3.display{ font-size:26px; }
  .crew-head.hindustan h3.display{ color:var(--purple-2); }
  .crew-head.revolution h3.display{ color:var(--orange-2); }
  .crew-sub{ font-family:var(--font-mono); font-size:11px; color:var(--text-dimmer); letter-spacing:.08em; text-transform:uppercase; }
  .part-tag{
    font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:700;
    padding:6px 14px; border-radius:999px;
  }
  .part-tag.hindustan{ background:var(--purple); color:var(--paper); }
  .part-tag.revolution{ background:var(--orange); color:var(--ink); }


.eb-overlay{
    position:fixed;
    inset:0;
    z-index:99998;
    background:rgba(6,5,4,0.72);
    backdrop-filter:blur(6px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
}

.eb-overlay.show{
    opacity:1;
    visibility:visible;
}

.eb-modal{
    position:relative;
    width:100%;
    max-width:420px;
    background:linear-gradient(180deg, #171310, #0e0c0a);
    border:2px solid var(--line-strong);
    border-radius:var(--radius-lg);
    padding:40px 32px 32px;
    text-align:center;
    overflow:hidden;
    transform:scale(.9) translateY(14px);
    transition:transform .4s cubic-bezier(.2,.9,.25,1.2);
    box-shadow:0 30px 70px rgba(0,0,0,.55);
}

.eb-overlay.show .eb-modal{
    transform:scale(1) translateY(0);
}

.eb-glow{
    position:absolute;
    top:-120px;
    left:50%;
    transform:translateX(-50%);
    width:340px;
    height:340px;
    background:radial-gradient(circle, rgba(239,106,31,.35), transparent 70%);
    filter:blur(60px);
    pointer-events:none;
    z-index:0;
}

.eb-close{
    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--line-strong);
    background:rgba(245,241,230,.05);
    color:var(--paper);
    font-size:14px;
    cursor:pointer;
    z-index:2;
    transition:background .2s ease, transform .2s ease;
}

.eb-close:hover{
    background:rgba(245,241,230,.14);
    transform:rotate(90deg);
}

.eb-logo{
    position:relative;
    z-index:1;
    width:88px;
    margin:0 auto 18px;
    display:block;
}

.eb-tag{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:7px;
    background:rgba(239,106,31,.14);
    border:1px solid rgba(239,106,31,.4);
    color:var(--orange-2);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    padding:7px 14px;
    border-radius:999px;
    margin-bottom:18px;
}

.eb-title{
    position:relative;
    z-index:1;
    font-size:clamp(26px,5vw,34px);
    line-height:1.15;
    color:var(--paper);
    margin-bottom:14px;
}

.eb-sub{
    position:relative;
    z-index:1;
    color:var(--text-dim);
    font-size:14.5px;
    line-height:1.6;
    max-width:320px;
    margin:0 auto 26px;
}

.eb-btn{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    text-align:center;
    padding:15px 22px;
    font-size:15px;
}

.eb-later{
    position:relative;
    z-index:1;
    display:block;
    margin:16px auto 0;
    background:none;
    border:none;
    color:var(--text-dimmer);
    font-size:13px;
    text-decoration:underline;
    cursor:pointer;
}

@media (max-width:480px){
    .eb-modal{ padding:34px 22px 26px; }
    .eb-logo{ width:72px; }
}











  ::selection{ background:var(--orange); color:var(--ink); }
  .display{
    font-family:'Luckiest Guy', cursive;
    letter-spacing:0.5px;
  }


/* Floating Music Elements */

.music-particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:99999; /* Increase if you want them above sections */
}

.music-particle{
    position:absolute;
    bottom:-80px;
    color:rgba(255,255,255,.08);
    animation:floatUp linear infinite;
    user-select:none;
    filter:blur(.2px);
    will-change:transform;
}

@keyframes floatUp{

    0%{
        transform:
            translateY(0)
            translateX(0)
            rotate(0deg);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{
        transform:
            translateY(-50vh)
            translateX(40px)
            rotate(180deg);
    }

    100%{
        transform:
            translateY(-120vh)
            translateX(-40px)
            rotate(360deg);

        opacity:0;
    }

}




.socials{
     display:flex; align-items:center; justify-content:space-between;
     gap:.2cm;

  
}



  
.about-section{
    display:flex;
    align-items:center;
    padding:100px 8%;
    background-color: #191717;
}
  .about-bg{ position:absolute; inset:0; z-index:-1; background:
    radial-gradient(ellipse 60% 80% at 70% 60%, rgba(255,90,31,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(255,179,71,.14), transparent 60%),
    linear-gradient(180deg, #0a0a0b 0%, #0d0c0f 60%, #0a0a0b 100%);
    animation:hero-drift 16s ease-in-out infinite alternate;
  }
.about-left{
    flex:1;
    display:flex;
    justify-content:center;
    z-index: 9999;
}
.about-slideshow{
    position:relative;
    width:80%;
    aspect-ratio:4/3;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.about-slideshow img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    animation:aboutSlideFade 9s infinite;
}
.about-slideshow img:nth-child(1){ animation-delay:0s; }
.about-slideshow img:nth-child(2){ animation-delay:4.5s; }

@keyframes aboutSlideFade{
    0%      { opacity:1; }
    44%     { opacity:1; }
    50%     { opacity:0; }
    94%     { opacity:0; }
    100%    { opacity:1; }
}

.about-right{
    flex:1;
    max-width:600px;
    margin-left:auto;
}
.tag-wrapper {
    text-align: center;
}

.about-right p{
    margin:24px 10px;
    line-height:1.8;
    color:#bdbdbd;
}

@media (max-width: 768px){

    .about-section{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 20px;
        text-align: center;
    }

    .about-left{
        display: flex;
        justify-content: center;
        order: 2;
        flex: 0 0 auto;
        width: calc(100% + 28px);
        max-width: calc(100% + 28px);
        margin: 24px -14px 0;
        overflow: hidden;
        align-self: center;
    }
    .about-slideshow{
        width: 100%;
        aspect-ratio: 4/3;
        border-radius: 10px;
    }

    .about-right{
        order: 1;
        flex: 0 0 100%;
        max-width: 700px;
        margin: 0 auto;
        
    }

    .about-right p{
        margin: 20px 0;
        text-align: justify
    }
}

  /* .artist-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; gap:14px; } */
.artist-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

.artist-grid{
    display:flex;
    gap:14px;
    width:max-content;
    animation: scrollArtists 45s linear infinite;
}

.artist-slider:hover .artist-grid{
    animation-play-state: paused;
}

.artist-grid-2{
    display:flex;
    gap:14px;
    width:max-content;
    animation: scrollArtists2 45s linear infinite;
}
.artist-slider:hover .artist-grid-2{
    animation-play-state: paused;
}

.artist-card{
    flex:0 0 calc((100vw - 56px)/5);
    max-width:calc((100vw - 56px)/5);
}

@keyframes scrollArtists {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes scrollArtists2{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media (max-width:1100px){
    .artist-card{
        flex:0 0 calc((100vw - 42px)/4);
        max-width:calc((100vw - 42px)/4);
    }
}

/* Tablets - 3 cards */
@media (max-width:900px){
    .artist-card{
        flex:0 0 calc((100vw - 28px)/3);
        max-width:calc((100vw - 28px)/3);
    }
}

/* Phones - 2 cards */
@media (max-width:600px){
    .artist-card{
        flex:0 0 calc((100vw - 14px)/2);
        max-width:calc((100vw - 14px)/2);
    }
}

/* Small Phones - 1 card */
@media (max-width:420px){
    .artist-card{
        flex:0 0 100vw;
        max-width:100vw;
    }
}

  @media (max-width:500px){ .artist-grid{ grid-template-columns:1fr } }

  .artist-card{ padding:18px; display:flex; flex-direction:column; gap:12px; border-radius:var(--radius-md); }
  .avatar{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-sm); position:relative; overflow:hidden; }
  .avatar::after{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)), radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%); }
  .artist-name{ font-family:var(--font-display); font-size:17px; letter-spacing:.01em; color:var(--paper); }
  .artist-meta{ font-family:var(--font-mono); font-size:10px; color:var(--text-dimmer); letter-spacing:.08em; text-transform:uppercase; }
  .artist-day{ font-size:12px; color:var(--text-dim); }

  /* ---------- sponsors ---------- */
  .sponsor-row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
  .sponsor-chip{ font-family:var(--font-display); font-size:20px; letter-spacing:.03em; color:var(--text-dimmer); border:1px solid var(--line); padding:18px 34px; border-radius:var(--radius-sm); transition:color .3s, border-color .3s; }
  .sponsor-chip:hover{ color:var(--paper); border-color:var(--line-strong); }

  /* ---------- gallery ---------- */
  .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:12px; max-width:1180px; margin:0 auto; }
  @media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
  .g-tile{ border-radius:var(--radius-sm); position:relative; overflow:hidden; border:1px solid var(--line); }
  .g-tile span{ position:absolute; bottom:10px; left:12px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(245,241,230,.8); }
  .g1{ grid-column:span 2; grid-row:span 2; background:radial-gradient(circle at 30% 30%, #ef6a1f, #1a0a04 75%); }
  .g2{ background:radial-gradient(circle at 70% 30%, #ffd54f, #1a1204 75%); }
  .g3{ background:radial-gradient(circle at 40% 70%, #9b5cff, #12061f 75%); }
  .g4{ grid-row:span 2; background:linear-gradient(160deg,#6c3fa8,#12061f); }
  .g5{ background:linear-gradient(160deg,#ff9d4c,#3a1503); }
  .g6{ background:radial-gradient(circle at 60% 60%, #d39cff, #1c0d33 75%); }
  .g7{ grid-column:span 2; background:linear-gradient(120deg,#9b5cff,#ef6a1f); }

  /* ---------- faq ---------- */
  .faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:22px 4px; cursor:pointer; font-size:16px; font-weight:600; gap:20px; color:var(--paper); }
  .faq-plus{ width:22px; height:22px; position:relative; flex-shrink:0; }
  .faq-plus::before, .faq-plus::after{ content:''; position:absolute; background:var(--orange-2); transition:transform .3s; }
  .faq-plus::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
  .faq-plus::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
  .faq-item.open .faq-plus::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,.8,.3,1); }
  .faq-item.open .faq-a{ max-height:200px; }
  .faq-a p{ padding:0 4px 22px; color:var(--text-dim); font-size:14px; line-height:1.7; max-width:640px; }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:56px 5vw 34px;
    position:relative; z-index:2;
  }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; margin-bottom:44px; max-width:1180px; margin-left:auto; margin-right:auto; }
  .footer-tagline{ font-family:var(--font-display); font-size:clamp(22px,3vw,32px); max-width:420px; color:var(--paper); }
  .footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
  .footer-col h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dimmer); margin-bottom:14px; }
  .footer-col a{ display:block; color:var(--text-dim); font-size:14px; margin-bottom:10px; transition:color .2s; }
  .footer-col a:hover{ color:var(--orange-2); }
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:20px;
    max-width:1180px;
    margin:0 auto;
    padding-top:26px;
    border-top:1px solid var(--line);
    font-size:13px;
    color:var(--text-dimmer);
}

.footer-left{
    display:flex;
    flex-direction:column;
    gap:6px;
    
}

.designer{
    font-size:13px;
    font-weight:300;
    color:var(--text-dimmer);
}

.footer-right{
    display:flex;
    gap:24px;
    align-items:center;
    flex-wrap:wrap;
    color: var(--orange-2);
}

.footer-right a{
    color: var(--orange-2);
    text-decoration:none;
}

.footer-right a:hover{
    color:var(--primary);
}

.footer-right i{
    margin-right:6px;
}
@media (max-width: 768px){

    .footer-bottom{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-left{
        align-items: center;
    }

    .footer-right{
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .designer{
        margin-top: 4px;
    }
}

  footer a{color:var(--orange-2); text-decoration:none;}

  a:focus-visible, button:focus-visible{ outline:2px solid var(--orange-2); outline-offset:3px; border-radius:4px; }

  /* NOTE: the old blanket "nav{display:none}" rule that used to live in this
     max-width:640px query has been removed — it was fighting the hamburger
     nav.active system defined at 768px above and hid the menu entirely on
     small screens. Mobile nav visibility is now handled purely by
     .menu-toggle / nav.active, see the responsive block below. */
  @media (max-width:640px){
    .footer-bottom{flex-direction:column; text-align:center;}
  }
 /* ---------- category cards ---------- */

   .stepper{
    display:flex; justify-content:center; gap:10px; margin-bottom:44px; font-size:13px;
    color:rgba(245,241,230,0.5); letter-spacing:1px;
  }
  .stepper .dot{
    width:8px; height:8px; border-radius:50%; background:var(--line); align-self:center;
  }
  .stepper .active{color:var(--orange-2); font-weight:700;}

  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:22px;
    max-width:1180px;
    margin:0 auto;
  }
  .card{
    background:#141414;
    border:2px solid var(--line);
    border-radius:22px;
    padding:26px;
    cursor:pointer;
    transition:border-color .18s ease, transform .18s ease, background .18s ease;
    position:relative;
  }
  .card:hover{transform:translateY(-4px); border-color:rgba(239,106,31,0.5);}
  .card.selected{border-color:var(--orange); background:#1c150e;}
  .card.selected::after{
    content:"✓";
    position:absolute; top:18px; right:18px;
    width:26px; height:26px; border-radius:50%;
    background:var(--orange); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px;
  }
  .card .icon{
    width:56px; height:56px; border-radius:14px;
    background:var(--olive-2);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; margin-bottom:18px;
  }
  .card h3{font-size:19px; margin-bottom:8px; color:var(--paper);}
  .card p.desc{font-size:13.5px; color:rgba(245,241,230,0.6); line-height:1.5; min-height:40px;}
  .card .meta{display:flex; justify-content:space-between; margin-top:20px; padding-top:16px; border-top:1px dashed var(--line);}
  .card .meta div{font-size:11px; text-transform:uppercase; letter-spacing:1px; color:rgba(245,241,230,0.45);}
  .card .meta strong{display:block; font-size:15px; color:var(--orange-2); margin-top:4px; font-weight:600;}

  .continue-row{text-align:center; margin-top:46px;}
  .btn-disabled{opacity:0.35; pointer-events:none;}

  /* ---------- form step ---------- */
  .form-wrap{max-width:620px; margin:0 auto; display:none;}
  .form-wrap.active{display:block;}
  .selected-pill{
    display:inline-flex; align-items:center; gap:8px;
    background:#141414; border:1px solid var(--line); border-radius:999px;
    padding:8px 16px; font-size:13px; margin-bottom:30px;
  }
  .selected-pill button{
    background:none; border:none; color:var(--orange-2); cursor:pointer; font-size:12px; text-decoration:underline;
  }
  .field{margin-bottom:20px;}
  .field label{display:block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:rgba(245,241,230,0.55); margin-bottom:8px;}
  .field input, .field select, .field textarea{
    width:100%; background:#141414; border:1.5px solid var(--line); color:var(--paper);
    padding:13px 15px; border-radius:10px; font-family:inherit; font-size:14.5px;
    transition:border-color .15s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--orange);
  }
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  textarea{resize:vertical; min-height:90px;}
  .form-actions{display:flex; justify-content:space-between; align-items:center; margin-top:32px;}
  .link-btn{background:none; border:none; color:rgba(245,241,230,0.6); font-size:14px; cursor:pointer; text-decoration:underline;}

  /* ---------- confirmation ---------- */
  .confirm-wrap{max-width:520px; margin:0 auto; text-align:center; display:none;}
  .confirm-wrap.active{display:block;}
  .confirm-icon{
    width:78px; height:78px; border-radius:50%; background:var(--orange);
    display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
    font-size:34px; color:var(--ink);
  }
  .confirm-wrap h2{font-size:30px; margin-bottom:12px;}
  .confirm-wrap p{color:rgba(245,241,230,0.65); font-size:15px; line-height:1.6;}
  .confirm-wrap .btn{margin-top:28px;}


/* =========================================================================
   RESPONSIVE ENHANCEMENTS
   Added below without altering any existing rule above. These only add
   breakpoints/behaviour for components that had no (or incomplete)
   responsive coverage: hero, phase cards, countdown, schedule, venue facts,
   timeline, lineup, gallery, faq, footer, stepper/cards, form rows,
   confirmation, and general small-screen spacing.
   ========================================================================= */

/* ---- large tablet / small laptop ---- */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
  .footer-links{ gap:36px; }
}

/* ---- tablet ---- */
@media (max-width:900px){
  .hero{ padding-top:90px; }
  .hero p{ margin-top:60px; padding:0 12px; }
  .phase-card{ padding:28px 22px; }
  .venue-facts{ gap:10px; }
  .footer-top{ gap:24px; }
}
.tp-highlight{
  background-color: var(--orange);
  font-weight: 600;
}
.tp-highlight1{
  color: var(--orange-2);
}

/* ---- mobile (matches existing 768px header breakpoint) ---- */
@media (max-width:768px){
  .brand strong{ font-size:13px; }
  .brand small{ font-size:10px; }

  section{ padding:60px 5vw; }
  .section-head{ margin-bottom:40px; }

  /* Hero fills the full screen on mobile, logo + CTAs centered vertically.
     Desktop/tablet hero above (>768px) is untouched. */
.hero{
    padding:160px 20px 100px;
    height:auto;
    min-height:auto;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}
  .hero-logo{ width:80vw; margin:0}
  .hero p{ font-size:15.5; margin-top:28px; }
  .hero-ctas{ gap:12px; margin-top:28px; flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ flex:none; width:100%; text-align:center; }

  .phase-grid{ gap:18px; }
  .phase-card{ padding:24px 18px; gap:16px; }
  .phase-top{ flex-wrap:wrap; }
  .phase-card h3.display{ font-size:28px; }

  .countdown{ flex-wrap:wrap; }
  .cd-box{ flex:1 1 calc(25% - 8px); min-width:64px; }

  .schedule-row{ flex-wrap:wrap; row-gap:4px; }
  .schedule-title{ flex:1 1 100%; order:1; padding:0; }
  .schedule-day{ order:0; }
  .schedule-time{ order:2; }

  .venue-facts{ grid-template-columns:1fr 1fr; }

  .timeline{ padding:50px 10px 10px; }

  .lineup-cols{ gap:28px; }
  .crew-head h3.display{ font-size:22px; }

  .gallery-grid{ grid-auto-rows:130px; gap:10px; }

  .faq-q{ font-size:14.5px; padding:18px 4px; }

  .footer-top{ flex-direction:column; }
  .footer-links{ gap:28px; width:100%; }
  .footer-tagline{ max-width:100%; }

  .row-2{ grid-template-columns:1fr; gap:0; }
  .form-actions{ flex-direction:column; gap:14px; align-items:stretch; text-align:center; }

  .card{ padding:20px; }
  .card .icon{ width:48px; height:48px; font-size:22px; margin-bottom:14px; }
}

/* ---- small phones ---- */
@media (max-width:480px){
  header{ padding:10px 16px; }
  .brand img{ width:40px; height:40px; }

  section{ padding:50px 5vw; }

  .hero-logo{ width:80vw; }
  .hero-badge, .eyebrow{ font-size:10.5px; padding:6px 12px; }

  .section-head h2{ font-size:26px; }
  .section-head p{ font-size:13.5px; }

  .phase-card h3.display{ font-size:24px; }
  .status-pill{ font-size:10px; padding:5px 10px; }

  .cd-box{ flex:1 1 calc(50% - 6px); padding:10px 6px; }
  .cd-num{ font-size:20px; }

  .venue-facts{ grid-template-columns:1fr; }

  .crew-swatch{ width:32px; height:32px; }
  .crew-head h3.display{ font-size:19px; }
  .part-tag{ font-size:10px; padding:5px 10px; }

  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:170px; }
  .g1, .g4, .g7{ grid-column:span 1; grid-row:span 1; }

  .sponsor-chip{ font-size:16px; padding:14px 22px; }

  .faq-q{ font-size:13.5px; gap:12px; }

  footer{ padding:44px 6vw 28px; }
  .footer-tagline{ font-size:22px; }
  .footer-links{ gap:22px; }

  .confirm-wrap h2{ font-size:24px; }
  .confirm-icon{ width:64px; height:64px; font-size:28px; }

  .stepper{ font-size:11px; gap:6px; flex-wrap:wrap; }
}

/* ---- very small phones ---- */
@media (max-width:360px){
  .hero p{ font-size:14px; }
  .cd-box{ flex:1 1 100%; }
  .schedule-day{ min-width:auto; }
  .card h3{ font-size:17px; }
}

/* ---- landscape phones (short viewport height) ---- */
@media (max-height:480px) and (orientation:landscape){
  .hero-logo{ width:60vw; }
  section{ padding:40px 5vw; }
}

.sponsor-marquee{
    width:100%;
    overflow:hidden;
    margin-top:40px;
    position:relative;
    margin-bottom:1.5cm ;
}

.sponsor-track{
    display:flex;
    align-items:center;
    gap:80px;
    width:max-content;
    animation:sponsorScroll 30s linear infinite;
}

.sponsor-track img{
    height:70px;
    width:auto;
    object-fit:contain;
    opacity:.9;
    transition:.3s ease;
}
@media (max-width:768px){
.sponsor-track img{
    height:50px;
    width:auto;
    object-fit:contain;
    opacity:.9;
    transition:.3s ease;}
.sponsor-marquee{
    margin-bottom:.4cm ;
}
}
.sponsor-track img:hover{
    opacity:1;
    filter:none;
    transform:scale(1.08);
}

@keyframes sponsorScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
.sponsor-marquee::before,
.sponsor-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.sponsor-marquee::before{
    left:0;
    background:linear-gradient(to right,#0b0b12,transparent);
}

.sponsor-marquee::after{
    right:0;
    background:linear-gradient(to left,#0b0b12,transparent);
}



.mobile-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: none; /* shown only on mobile via media query below */
  align-items: flex-end;
  justify-content: space-around;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 4px 22px;
}

.mobile-navbar .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex: 1;
}

.mobile-navbar .nav-icon {
  width: 22px;
  height: 22px;
}

.mobile-navbar .nav-item.active {
  color: #f5891f; /* orange, matches active "HOME" state */
}

/* Center raised circular Tickets button */
.mobile-navbar .nav-item.center {
  position: relative;
  color: #f5891f;
}

.mobile-navbar .center-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e5502a; /* orange-red like the screenshot */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -34px; /* raises it above the bar */
  box-shadow: 0 0 0 6px rgba(229,80,42,0.15), 0 4px 14px rgba(0,0,0,0.5);
  color: #fff;
}

.mobile-navbar .center-circle .nav-icon {
  width: 24px;
  height: 24px;
}

/* Only show on mobile / portrait screens */
@media (max-width: 768px) {
  .mobile-navbar {
    display: flex;
  }
  body {
    padding-bottom: 78px; /* keep content from hiding behind the bar */
  }
}

/* ===========================
   TICKET PHASES POPUP
=========================== */
.tp-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.tp-overlay.show{
  opacity:1;
  visibility:visible;
}
.tp-sheet{
  position:relative;
  width:100%;
  max-width:520px;
  background:#141414;
  border-top-left-radius:var(--radius-lg);
  border-top-right-radius:var(--radius-lg);
  padding:32px 24px 28px;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  max-height:88vh;
  overflow-y:auto;
}
.tp-overlay.show .tp-sheet{
  transform:translateY(0);
}
.tp-close{
  position:absolute;
  top:20px;
  right:20px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.08);
  color:var(--paper);
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tp-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:var(--orange);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  animation: tp-float 3s ease-in-out infinite;
}

@keyframes tp-float{
  0%, 100%{
    transform: translateY(0) rotate(0deg);
  }
  50%{
    transform: translateY(-6px) rotate(-3deg);
  }
}
.tp-title{
  font-family:var(--font-display);
  color:var(--orange-2);
  font-size:clamp(28px,7vw,36px);
  letter-spacing:.5px;
  margin-bottom:8px;
  line-height:1.1;
  text-align: center;
}
.tp-sub{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:26px;
  text-align: center;
}
.tp-phase{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px;
  margin-bottom:14px;
  background:rgba(255,255,255,.02);
}
.tp-phase-active{
  border-color:var(--orange);
  background:rgba(239,106,31,.06);
}
.tp-phase-inactive{
  border-color:var(grey);
  background:rgba(107, 100, 96, 0.06);
  color: grey;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale();
}
.tp-status{
  position:absolute;
  top:-11px;
  right:14px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px;
  padding:4px 12px;
  border-radius:999px;
}
.tp-status-live{
  background:var(--orange);
  color:#1a0d05;
}
.tp-status-upcoming{
  background:var(--olive);
  color:#e8e6d8;
}


.tp-phase-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.tp-badge{
  flex-shrink:0;
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:16px;
}
.tp-badge-orange{
  background:var(--orange);
  color:#1a0d05;
}
.tp-badge-dim{
  background:var(--olive-2);
  color:var(--orange-2);
}
.tp-phase-info{
  flex:1;
  min-width:0;
}
.tp-phase-name{
  font-weight:700;
  font-size:15px;
  color:var(--paper);
}
.tp-phase-note{
  font-size:12.5px;
  color:var(--text-dimmer);
  margin-top:2px;
}
.tp-price{
  font-family:var(--font-display);
  font-size:20px;
  color:var(--paper);
  flex-shrink:0;
}
.tp-book-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  text-align:center;
  margin-top:10px;
  font-family:var(--font-display);
  font-size:17px;
  letter-spacing:.5px;
  padding:16px;
}
.tp-arrow{
  font-size:16px;
}
.tp-footer-note{
  text-align:center;
  font-size:12px;
  color:var(--text-dimmer);
  margin-top:14px;
}



.top-loading-bar{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--orange), var(--orange-2));
  z-index:999999;
  opacity:0;
  transition:opacity .2s ease;
}
.top-loading-bar.active{
  opacity:1;
  animation: tp-loading-bar-progress 1.1s ease-in-out infinite;
}
@keyframes tp-loading-bar-progress{
  0%{ width:0%; margin-left:0%; }
  50%{ width:65%; margin-left:10%; }
  100%{ width:0%; margin-left:100%; }
}
@media(max-width: 786px){
.top-loading-bar{
  position:fixed;
  bottom:0;
  left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--orange), var(--orange-2));
  z-index:999999;
  opacity:0;
  transition:opacity .2s ease;
  top:auto;
}
}