:root{
      --bg:#0a0a0f;          /* deep night */
      --bg-2:#0f1020;        /* ink */
      --card:#13142a;        /* slate */
      --text:#f6f7fb;        /* near white */
      --muted:#b9bdd6;       /* cool grey */
      --brand:#f2b705;       /* gold */
      --brand-2:#A16D98;     /* royal violet */
      --accent:#28c8ff;      /* cyan */
      --success:#22c55e;
      --danger:#ef4444;
      --shadow:0 10px 30px rgba(0,0,0,.25);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
      color:var(--text); background:radial-gradient(1200px 600px at 10% -10%, rgba(251, 21, 209, 0.25), transparent),radial-gradient(800px 400px at 110% 10%, rgba(40,200,255,.12), transparent), var(--bg);
      line-height:1.55;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(1180px, 92vw); margin-inline:auto}

    /* NAV */
    .nav{position:sticky;top:0;z-index:40; backdrop-filter:saturate(1.2) blur(10px); background:rgba(10,10,15,.6); border-bottom:1px solid rgba(255,255,255,.08)}
    .nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
    .logo{display:flex; align-items:center; gap:12px}
    .logo-mark{width:40px; height:40px; display:grid; place-items:center; background:conic-gradient(from 210deg, var(--brand), var(--brand-2) 60%, var(--accent)); border-radius:50%; box-shadow:0 6px 20px rgba(124,58,237,.35)}
    .logo svg{width:22px; height:22px; fill:white}
    .logo-text{font-weight:800; letter-spacing:.2px}
    .nav-links{display:flex; gap:18px; align-items:center}
    .nav a{opacity:.9}
    .btn{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:12px 18px; font-weight:600; border:1px solid rgba(255,255,255,.12); transition:transform .2s ease, background .2s ease, border-color .2s ease}
    .btn:hover{transform:translateY(-2px)}
    .btn-brand{background:linear-gradient(135deg, var(--brand), #ffd666); color:#1b1200; border-color:rgba(255,214,102,.6)}
    .btn-ghost{background:transparent}
    .mobile-toggle{display:none}

    /* HERO */
    .hero{position:relative; overflow:hidden;}
    .hero::before{content:""; position:absolute; inset:-20%; background: radial-gradient(1200px 700px at 80% -20%, rgba(242,183,5,.25), transparent), radial-gradient(800px 500px at 10% 30%, rgba(124,58,237,.25), transparent);} 
    .hero .inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; padding:72px 0 32px}
    .eyebrow{display:inline-block; font-size:.95rem; letter-spacing:.4px; color:var(--muted)}
    h1{font-size: clamp(2rem, 1.4rem + 2.5vw, 3.75rem); line-height:1.12; margin:10px 0 14px; font-weight:900}
    .subtitle{font-size:1.1rem; color:var(--muted); max-width:52ch}
    .bulletrow{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 28px}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-weight:600}
    .countdown{display:grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap:12px; margin:28px 0 28px}
    .timebox{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:14px; text-align:center}
    .timebox .num{font-size:clamp(1.4rem, 1rem + 2.2vw, 2.6rem); font-weight:800}
    .timebox .lbl{font-size:.85rem; color:var(--muted)}
    .cta-row{display:flex; gap:12px; flex-wrap:wrap}

    .hero-card{align-self:center; background:linear-gradient(160deg, rgba(124,58,237,.22), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.12); border-radius:calc(var(--radius) + 6px); padding:22px; box-shadow:var(--shadow)}
    .hero-card .grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
    .stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:16px; text-align:center}
    .stat .big{font-size:1.9rem; font-weight:900}
    .badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(40,200,255,.12); border:1px solid rgba(40,200,255,.3); color:#c9f2ff; font-weight:600; margin-bottom:10px}

    /* SECTIONS */
    section{padding:70px 0}
    .section-title{font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.3rem); margin:0 0 12px; font-weight:800}
    .section-sub{color:var(--muted); margin:0 0 24px}

    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
    .card h3{margin:10px 0 8px}
    .card p{color:var(--muted)}

    /* SCHEDULE */
    .schedule{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px}
    .timeline{border-left:2px dashed rgba(255,255,255,.15); padding-left:14px}
    .tl-item{margin:14px 0; padding:10px 14px; border-radius:12px; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.3)}
    .tl-item .date{font-weight:800}

    .ticket{background:linear-gradient(135deg, rgba(242,183,5,.16), rgba(124,58,237,.18)); border:1px dashed rgba(255,255,255,.25); border-radius:24px; padding:18px}
    .ticket .row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between}


    h2 span {
      background: linear-gradient(270deg, var(--brand), var(--accent), var(--brand));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      background-size: 200% auto;
      animation: gradientMove 3s linear infinite;
    }

    @keyframes gradientMove {
      to {
        background-position: 200% center;
      }
    }



    /* GRID media */
    @media (max-width: 940px){
      .hero .inner, .schedule{grid-template-columns:1fr}
    }
    @media (max-width: 720px){
      .cards{grid-template-columns: 1fr}
      .countdown{grid-template-columns: repeat(2, 1fr)}
      .nav-links{display:none}
      .mobile-toggle{display:inline-flex}
    }

    /* FOOTER */
    footer{padding:40px 0; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)}
    .footgrid{display:grid; grid-template-columns: 1.2fr .8fr .8fr; gap:18px}
    .footgrid p{color:var(--muted)}
    @media (max-width: 880px){.footgrid{grid-template-columns:1fr}}

    /* Accessibility helpers */
    @media (prefers-reduced-motion: reduce){
      .btn, .nav, .hero, .card, .stat{transition:none}
    }
    .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}