:root{
    --purple:#9f00d0;
    --yellow:#fff666;
    --black:#000000;
    --white:#ffffff;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', system-ui, sans-serif;
    background:var(--black);
    color:var(--white);
    overflow-x:hidden;
  }
  h1,h2,h3, .display{
    font-family:'Anton', 'Inter', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:1.02;
  }
  section{
    min-height:100svh;
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    padding:7vh 6vw;
    text-align:center;
    overflow:hidden;
  }
  .tag{
    display:inline-block;
    font-size:0.72rem;
    font-weight:800;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--yellow);
    border:1px solid var(--yellow);
    padding:6px 14px;
    border-radius:999px;
    margin-bottom:22px;
  }
  .eyebrow{
    font-size:0.7rem;
    font-weight:800;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--purple);
    margin-bottom:14px;
  }
  p.lead{
    font-size:clamp(1rem, 4.4vw, 1.3rem);
    font-weight:600;
    max-width:640px;
    color:rgba(255,255,255,0.86);
    line-height:1.5;
  }
  .content-wrap{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:680px;
  }

  /* ===== SLIDE 1 — HERO ===== */
  #slide-1{
    background-image:radial-gradient(circle at 50% 25%, rgba(159,0,208,0.45), rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.98) 80%), url('../assets/crown.jpg');
    background-size:cover;
    background-position:center 40%;
  }
  #slide-1 img.logo{
    width:min(58vw, 260px);
    margin-bottom:34px;
    filter:drop-shadow(0 0 40px rgba(159,0,208,0.55));
  }
  #slide-1 h1{
    font-size:clamp(1.9rem, 8.5vw, 3.4rem);
    color:var(--white);
  }
  #slide-1 h1 span{color:var(--yellow);}
  .scroll-cue{
    position:absolute;
    bottom:5vh;
    left:50%;
    transform:translateX(-50%);
    font-size:0.7rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.5);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }
  .scroll-cue .arrow{
    width:1px; height:26px; background:linear-gradient(var(--purple), transparent);
    animation:pulse-down 1.8s ease-in-out infinite;
  }
  @keyframes pulse-down{
    0%,100%{opacity:0.3; transform:scaleY(0.7);}
    50%{opacity:1; transform:scaleY(1);}
  }

  /* ===== SLIDE 2 ===== */
  #slide-2{background:var(--black);}
  #slide-2 h2{
    font-size:clamp(1.7rem, 8vw, 2.7rem);
    color:var(--white);
    margin-bottom:26px;
  }
  #slide-2 h2 .hl{color:var(--yellow);}
  #slide-2 .statement{
    font-size:clamp(1.05rem, 4.6vw, 1.35rem);
    font-weight:700;
    color:var(--yellow);
    margin-top:10px;
  }
  #slide-2 .statement.solo{
    color:var(--white);
    font-weight:800;
    margin-top:24px;
    font-size:clamp(1.15rem, 5vw, 1.5rem);
  }

  /* ===== SLIDE 3 — video origin ===== */
  #slide-3{
    background:var(--black);
    padding-top:6vh;
    padding-bottom:6vh;
  }
  #slide-3 h2{font-size:clamp(1.5rem, 6.6vw, 2.2rem); margin-bottom:18px;}
  #slide-3 h2 span{color:var(--yellow);}
  .video-frame{
    width:min(78vw, 320px);
    aspect-ratio:9/16;
    border-radius:18px;
    overflow:hidden;
    border:2px solid var(--purple);
    box-shadow:0 0 50px rgba(159,0,208,0.3);
    margin:22px 0 26px;
    background:#111;
  }
  .video-frame video{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  #slide-3 .result{
    font-size:clamp(0.95rem, 4.2vw, 1.15rem);
    font-weight:600;
    color:rgba(255,255,255,0.85);
    max-width:560px;
    margin-bottom:14px;
  }
  #slide-3 .born{
    font-weight:800;
    color:var(--yellow);
    font-size:clamp(1rem, 4.6vw, 1.25rem);
    text-transform:uppercase;
    letter-spacing:0.02em;
  }

  /* ===== SLIDE 4 — formats ===== */
  #slide-4{background:var(--white); color:var(--black);}
  #slide-4 h2{font-size:clamp(1.6rem, 7vw, 2.4rem); color:var(--black); margin-bottom:10px;}
  #slide-4 .lead{color:rgba(0,0,0,0.7); margin-bottom:32px;}
  .format-cards{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
    max-width:520px;
  }
  .format-card{
    background:var(--black);
    color:var(--white);
    border-radius:16px;
    padding:22px 22px;
    text-align:left;
    border:1px solid rgba(159,0,208,0.4);
  }
  .format-card .num{
    color:var(--yellow);
    font-family:'Anton', sans-serif;
    font-size:1.4rem;
    display:block;
    margin-bottom:6px;
  }
  .format-card p{font-weight:700; font-size:1.02rem; line-height:1.4;}
  #slide-4 .essence{
    margin-top:30px;
    font-weight:700;
    font-size:clamp(0.95rem, 4vw, 1.1rem);
    color:var(--purple);
    max-width:520px;
  }

  /* ===== SLIDE 5 — dynamic ===== */
  #slide-5{
    background-image:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.95) 100%), url('../assets/bikes.jpg');
    background-size:cover;
    background-position:center 55%;
  }
  #slide-5 h2{font-size:clamp(1.6rem, 7vw, 2.4rem); margin-bottom:6px;}
  #slide-5 .lead{margin-bottom:34px;}
  .stat-row{
    display:flex;
    gap:14px;
    width:100%;
    max-width:520px;
    margin-bottom:26px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .stat-box{
    flex:1 1 130px;
    background:rgba(159,0,208,0.12);
    border:1px solid var(--purple);
    border-radius:14px;
    padding:18px 10px;
  }
  .stat-box .big{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.6rem,7vw,2.1rem);
    color:var(--yellow);
    display:block;
  }
  .stat-box .small{
    font-size:0.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.75);
  }
  .rule-line{
    font-weight:800;
    font-size:clamp(1.1rem, 5vw, 1.4rem);
    color:var(--white);
    max-width:480px;
    margin-bottom:14px;
  }
  .rule-line .yellow{color:var(--yellow);}
  #slide-5 .final-line{
    font-weight:800;
    color:var(--yellow);
    text-transform:uppercase;
    letter-spacing:0.03em;
    font-size:clamp(0.95rem, 4.2vw, 1.15rem);
  }

  /* ===== SLIDE 6 — bracket ===== */
  #slide-6{background:var(--white); color:var(--black);}
  #slide-6 h2{font-size:clamp(1.5rem, 6.6vw, 2.2rem); color:var(--black); margin-bottom:10px;}
  #slide-6 .lead{color:rgba(0,0,0,0.7); margin-bottom:8px;}
  .bracket{
    width:100%;
    max-width:420px;
    margin:28px 0 30px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .bracket-row{display:flex; align-items:center; gap:8px; justify-content:center;}
  .bracket-node{
    background:var(--black);
    color:var(--white);
    font-weight:700;
    font-size:0.7rem;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid var(--purple);
  }
  .bracket-node.win{background:var(--purple); border-color:var(--purple);}
  .bracket-node.king{background:var(--yellow); color:var(--black); border-color:var(--yellow); font-size:0.72rem;}
  .bracket-vs{color:var(--purple); font-weight:800; font-size:0.65rem;}
  #slide-6 .closing{
    font-weight:800;
    color:var(--purple);
    max-width:480px;
    font-size:clamp(0.95rem, 4.2vw, 1.1rem);
  }

  /* ===== SLIDE 7 — trono ===== */
  #slide-7{
    background-image:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.92) 100%), url('../assets/trono.jpg');
    background-size:cover;
    background-position:center 30%;
  }
  #slide-7 h2{font-size:clamp(1.7rem, 8vw, 2.6rem); margin-bottom:14px;}
  #slide-7 h2 span{color:var(--yellow);}
  #slide-7 .no-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:18px 0 22px;
    font-weight:700;
    color:rgba(255,255,255,0.75);
    font-size:clamp(0.85rem, 3.8vw, 1rem);
  }
  #slide-7 .no-list li::before{content:"✕  "; color:var(--yellow); font-weight:800;}
  #slide-7 .king-line{
    font-weight:800;
    font-size:clamp(1.1rem, 5vw, 1.4rem);
    color:var(--yellow);
    margin-bottom:14px;
  }
  #slide-7 .lead{color:rgba(255,255,255,0.9);}

  /* ===== SLIDE 8 — categories ===== */
  #slide-8{background:var(--black);}
  #slide-8 h2{font-size:clamp(1.6rem, 7vw, 2.4rem); margin-bottom:6px;}
  #slide-8 .lead{margin-bottom:28px;}
  .cat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    width:100%;
    max-width:480px;
    margin-bottom:26px;
  }
  .cat-card{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(159,0,208,0.5);
    border-radius:14px;
    padding:16px 10px;
    text-align:left;
  }
  .cat-card .name{
    font-family:'Anton', sans-serif;
    color:var(--yellow);
    font-size:1.05rem;
    display:block;
    margin-bottom:6px;
  }
  .cat-card .desc{
    font-size:0.78rem;
    font-weight:600;
    color:rgba(255,255,255,0.75);
    line-height:1.35;
  }
  #slide-8 .meta-line{
    font-weight:700;
    color:var(--white);
    max-width:520px;
    font-size:clamp(0.9rem, 4vw, 1.05rem);
    margin-bottom:8px;
  }
  #slide-8 .meta-final{
    font-weight:800;
    color:var(--yellow);
    font-size:clamp(0.95rem, 4.2vw, 1.1rem);
  }

  /* ===== SLIDE 9 — viral ===== */
  #slide-9{background:var(--white); color:var(--black);}
  #slide-9 h2{font-size:clamp(1.6rem, 7vw, 2.4rem); color:var(--black); margin-bottom:28px;}
  .feature-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    max-width:520px;
    text-align:left;
  }
  .feature-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:rgba(159,0,208,0.06);
    border-left:4px solid var(--purple);
    border-radius:10px;
    padding:14px 16px;
  }
  .feature-item .icon{
    font-family:'Anton', sans-serif;
    color:var(--purple);
    font-size:1.3rem;
    line-height:1;
  }
  .feature-item p{font-weight:700; font-size:0.92rem; color:var(--black); line-height:1.4;}
  .feature-item p .sub{display:block; font-weight:500; color:rgba(0,0,0,0.6); font-size:0.85rem; margin-top:3px;}

  /* ===== SLIDE 10 — screens ===== */
  #slide-10{background:var(--black);}
  #slide-10 h2{font-size:clamp(1.6rem, 7vw, 2.4rem); margin-bottom:28px;}
  .feature-list.dark .feature-item{background:rgba(159,0,208,0.1); border-left-color:var(--yellow);}
  .feature-list.dark .feature-item .icon{color:var(--yellow);}
  .feature-list.dark .feature-item p{color:var(--white);}
  .feature-list.dark .feature-item p .sub{color:rgba(255,255,255,0.65);}
  #slide-10 .cobrand{
    margin-top:26px;
    font-weight:700;
    color:var(--yellow);
    max-width:520px;
    font-size:clamp(0.88rem, 3.9vw, 1.02rem);
  }

  /* ===== SLIDE 11 — CTA ===== */
  #slide-11{
    background:radial-gradient(circle at 50% 20%, rgba(159,0,208,0.4), rgba(0,0,0,1) 70%);
  }
  #slide-11 img.logo-small{
    width:min(28vw, 120px);
    margin-bottom:26px;
    opacity:0.9;
  }
  #slide-11 h2{
    font-size:clamp(1.7rem, 7.5vw, 2.5rem);
    margin-bottom:16px;
  }
  #slide-11 h2 span{color:var(--yellow);}
  #slide-11 .lead{margin-bottom:36px;}
  .cta-btn{
    display:inline-block;
    background:var(--yellow);
    color:var(--black);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:1.05rem;
    padding:18px 42px;
    border-radius:999px;
    text-decoration:none;
    box-shadow:0 0 40px rgba(255,246,102,0.35);
    transition:transform 0.15s ease;
  }
  .cta-btn:active{transform:scale(0.96);}
  footer{
    margin-top:40px;
    font-size:0.7rem;
    color:rgba(255,255,255,0.4);
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  /* Eyebrow labels sit on dark/black backgrounds in these slides — force yellow, never purple on black */
  #slide-2 .eyebrow,
  #slide-3 .eyebrow,
  #slide-5 .eyebrow,
  #slide-8 .eyebrow,
  #slide-10 .eyebrow{
    color:var(--yellow);
  }

  @media (min-width:640px){
    section{padding:8vh 10vw;}
  }