:root{
      --bg:#050913;
      --bg2:#08101f;
      --panel:#0e172b;
      --panel2:#111d35;
      --line:rgba(255,255,255,.08);
      --line-gold:rgba(233,190,86,.24);
      --text:#f7f8fb;
      --muted:#929bb0;
      --gold:#e5b84e;
      --gold2:#f3d47a;
      --gold3:#c88d22;
      --green:#51cf95;
      --purple:#8676ed;
      --shadow:0 22px 70px rgba(0,0,0,.34);
      --r:24px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 50% -8%, rgba(53,75,143,.25), transparent 32%),
        radial-gradient(circle at 90% 26%, rgba(143,102,35,.11), transparent 25%),
        var(--bg);
      font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      line-height:1.5;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    button{font:inherit}

    .wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
    .section{padding:92px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 11px;border:1px solid var(--line-gold);
      background:rgba(229,184,78,.06);
      border-radius:999px;color:#e9c86c;
      font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase
    }
    .section-title{
      margin:15px 0 12px;
      font-size:clamp(32px,4.4vw,56px);
      line-height:1.03;
      letter-spacing:-.045em;
    }
    .section-copy{
      color:var(--muted);font-size:17px;max-width:660px;margin:0;
    }
    .gold{color:var(--gold2)}

    /* Header */
    .header{
      position:sticky;top:0;z-index:1000;
      border-bottom:1px solid rgba(255,255,255,.055);
      background:rgba(5,9,19,.78);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }
    .nav{
      min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
    }
    .brand{display:flex;align-items:center;gap:11px;font-weight:900;font-size:20px;letter-spacing:-.03em}
    .brand-icon{
      width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
      color:#17120a;font-size:22px;font-weight:1000;
      border:1px solid rgba(255,255,255,.28);
      background:linear-gradient(145deg,#f4d982,#d79f33);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 25px rgba(216,163,53,.18);
    }
    .navlinks{display:flex;align-items:center;gap:27px;color:#c6cada;font-size:14px;font-weight:650}
    .navlinks a:hover{color:#fff}
    .play-small{
      display:inline-flex;align-items:center;justify-content:center;
      padding:11px 19px;border-radius:12px;
      color:#17120a!important;font-weight:900!important;
      background:linear-gradient(135deg,var(--gold2),var(--gold3));
      box-shadow:0 8px 26px rgba(218,166,51,.17);
    }
    .mobile-toggle{display:none;border:0;background:transparent;color:#fff;font-size:27px;cursor:pointer}

    /* Hero */
    .hero{padding:90px 0 70px;position:relative}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
    .hero h1{
      margin:18px 0 20px;
      font-size:clamp(49px,6.8vw,86px);
      line-height:.94;letter-spacing:-.065em;
      max-width:710px;
    }
    .hero h1 span{
      background:linear-gradient(100deg,#f6dda1,#e3b44b 60%,#f1cc71);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero p{font-size:19px;color:#a0a9bd;max-width:610px;margin:0 0 30px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:52px;padding:0 22px;border-radius:14px;font-weight:900;
      border:1px solid var(--line);transition:.2s ease;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{
      color:#17120a;
      background:linear-gradient(135deg,#f3d576,#d89b29);
      border-color:rgba(255,225,147,.35);
      box-shadow:0 12px 34px rgba(220,164,47,.20);
    }
    .btn-secondary{background:rgba(255,255,255,.035);color:#eef0f7}
    .hero-notes{display:flex;gap:19px;flex-wrap:wrap;color:#7f899f;font-size:12px;margin-top:22px;font-weight:650}
    .hero-notes span{display:flex;align-items:center;gap:6px}
    .hero-notes b{color:var(--green)}

    /* Game phone */
    .stage{position:relative;min-height:600px;display:grid;place-items:center}
    .glow{
      position:absolute;width:390px;height:390px;border-radius:50%;
      background:radial-gradient(circle,rgba(57,74,144,.25),transparent 68%);
      filter:blur(4px);
    }
    .phone{
      width:min(100%,390px);padding:14px;border-radius:40px;
      border:1px solid rgba(255,255,255,.11);
      background:linear-gradient(145deg,#11192a,#060b16);
      box-shadow:0 35px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05);
      position:relative;z-index:2;transform:rotate(1.5deg);
    }
    .phone-screen{
      border-radius:30px;min-height:560px;padding:22px;
      background:
        radial-gradient(circle at 50% 5%,rgba(50,67,125,.22),transparent 35%),
        #08101e;
      border:1px solid rgba(255,255,255,.06);
    }
    .phone-top{display:flex;align-items:center;justify-content:space-between;color:#9ca5b8;font-size:12px}
    .phone-logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:900}
    .mini-q{
      width:31px;height:31px;border-radius:10px;display:grid;place-items:center;
      background:linear-gradient(145deg,#f0ce72,#ce9029);color:#181208;font-size:18px
    }
    .game-card{
      margin-top:23px;padding:22px 18px;border:1px solid rgba(255,255,255,.07);
      border-radius:23px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    }
    .game-label{font-size:10px;color:#d9b655;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
    .game-card h3{font-size:22px;margin:9px 0 17px;letter-spacing:-.03em}
    .clue{
      min-height:56px;padding:12px 13px;border-radius:14px;background:#101a2f;
      border:1px solid rgba(255,255,255,.055);margin-top:9px;
      display:flex;gap:11px;align-items:center;color:#cbd0dc;font-size:12px;
    }
    .clue b{
      flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;
      background:rgba(228,184,78,.11);color:#e5bc58
    }
    .answer{
      margin-top:18px;padding:13px 14px;border-radius:13px;
      border:1px solid rgba(255,255,255,.07);color:#6f788d;font-size:12px;background:#080e1a
    }
    .keyrow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:9px}
    .key{
      height:31px;border-radius:7px;background:#172139;display:grid;place-items:center;
      color:#d5d9e4;font-size:9px;font-weight:800;border:1px solid rgba(255,255,255,.045)
    }
    .game-submit{
      margin-top:10px;width:100%;height:43px;border:0;border-radius:12px;
      background:linear-gradient(135deg,#f1cf6a,#d89928);font-weight:950;color:#171109
    }
    .float-card{
      position:absolute;z-index:3;padding:13px 14px;border-radius:16px;
      background:rgba(13,22,41,.95);border:1px solid rgba(255,255,255,.09);
      box-shadow:var(--shadow);font-size:11px;color:#cbd0dc
    }
    .float-card b{display:block;color:#fff;font-size:12px;margin-bottom:2px}
    .float-1{left:-8px;top:120px}
    .float-2{right:-2px;bottom:96px}
    .float-icon{font-size:19px;margin-right:7px}

    /* logos stats */
    .trust{padding:17px 0 55px}
    .trustbar{
      border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      display:grid;grid-template-columns:repeat(4,1fr)
    }
    .stat{padding:22px;text-align:center;border-right:1px solid var(--line)}
    .stat:last-child{border-right:0}
    .stat strong{display:block;font-size:22px}
    .stat span{color:#7f899e;font-size:12px}

    /* Steps */
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
    .step{
      padding:28px;border-radius:var(--r);background:linear-gradient(145deg,var(--panel),#0b1324);
      border:1px solid var(--line);position:relative;overflow:hidden
    }
    .step::after{
      content:"";position:absolute;width:100px;height:100px;border-radius:50%;
      right:-35px;top:-40px;background:radial-gradient(circle,rgba(229,184,78,.10),transparent 70%)
    }
    .step-number{
      width:43px;height:43px;border-radius:14px;display:grid;place-items:center;
      color:#181208;font-weight:950;background:linear-gradient(145deg,#f0d071,#cf942c)
    }
    .step h3{font-size:20px;margin:20px 0 7px}
    .step p{margin:0;color:#8d97ac;font-size:14px}

    /* Modes */
    .modes-bg{background:linear-gradient(180deg,transparent,rgba(14,25,47,.42),transparent)}
    .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
    .mode{
      min-height:310px;padding:27px;border-radius:27px;border:1px solid var(--line);
      background:linear-gradient(150deg,#111b31,#09111f);display:flex;flex-direction:column;
      transition:.2s ease;position:relative;overflow:hidden
    }
    .mode:hover{transform:translateY(-5px);border-color:rgba(229,184,78,.21)}
    .mode-icon{
      width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
      font-size:25px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)
    }
    .mode h3{font-size:23px;margin:22px 0 8px}
    .mode p{color:#8e98ad;font-size:14px;margin:0 0 22px}
    .mode a{margin-top:auto;color:#e7c15e;font-size:13px;font-weight:900}
    .mode.featured{
      border-color:rgba(229,184,78,.25);
      background:linear-gradient(150deg,rgba(229,184,78,.09),#111728 36%,#09111f)
    }
    .mode-badge{
      position:absolute;right:18px;top:18px;padding:5px 8px;border-radius:999px;
      font-size:9px;font-weight:900;background:rgba(229,184,78,.12);color:#e9c86e
    }

    /* league */
    .league-wrap{
      padding:39px;border-radius:30px;border:1px solid var(--line);
      background:
        radial-gradient(circle at 90% 0%,rgba(229,184,78,.11),transparent 25%),
        linear-gradient(145deg,#0f192c,#09101e)
    }
    .league-head{display:flex;justify-content:space-between;gap:35px;align-items:end}
    .league-head h2{font-size:clamp(31px,4vw,51px);line-height:1;margin:13px 0 0;letter-spacing:-.045em}
    .league-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:34px}
    .rank{
      padding:17px 8px;text-align:center;border-radius:16px;border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.025)
    }
    .rank i{display:block;font-style:normal;font-size:25px;margin-bottom:7px}
    .rank strong{font-size:11px}
    .rank.master{border-color:rgba(229,184,78,.28);background:rgba(229,184,78,.06)}

    /* split feature */
    .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
    .feature-box{
      padding:31px;border-radius:27px;border:1px solid var(--line);
      background:linear-gradient(145deg,#101a30,#0a1221)
    }
    .feature-box h3{font-size:25px;margin:15px 0 8px}
    .feature-box p{color:#8e98ac;font-size:14px;margin:0}
    .missions{margin-top:23px;display:grid;gap:9px}
    .mission{
      display:flex;justify-content:space-between;align-items:center;gap:12px;
      padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.055);font-size:12px
    }
    .mission span:last-child{color:#d7b554;font-weight:900}
    .bracket{display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:center;gap:5px;margin-top:30px}
    .team{
      padding:11px 8px;border-radius:12px;text-align:center;background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);font-size:10px
    }
    .arrow{text-align:center;color:#7a8397}
    .champ{border-color:rgba(229,184,78,.25);color:#f0cb6f;background:rgba(229,184,78,.06)}

    /* CTA */
    .cta{padding:70px 0 98px}
    .cta-card{
      padding:60px 35px;text-align:center;border-radius:32px;
      border:1px solid rgba(229,184,78,.20);
      background:
        radial-gradient(circle at 50% 0%,rgba(229,184,78,.14),transparent 36%),
        linear-gradient(145deg,#111a2d,#080f1d);
      box-shadow:var(--shadow)
    }
    .cta-card h2{font-size:clamp(37px,5vw,61px);line-height:1;letter-spacing:-.05em;margin:12px auto 14px}
    .cta-card p{color:#919bb0;font-size:16px;max-width:600px;margin:0 auto 25px}

    /* footer */
    footer{border-top:1px solid var(--line);padding:50px 0 25px;background:#040812}
    .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px}
    .footer-brand p{max-width:330px;color:#7f899f;font-size:13px}
    .footer-col strong{display:block;margin-bottom:13px;font-size:13px}
    .footer-col a{display:block;color:#7f899f;font-size:12px;margin:9px 0}
    .footer-col a:hover{color:#fff}
    .copyright{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:#667086;font-size:11px}

    @media(max-width:900px){
      .hero-grid{grid-template-columns:1fr;gap:35px}
      .hero{padding-top:63px}
      .hero-copy{text-align:center}
      .hero-copy .eyebrow{margin:auto}
      .hero p{margin-left:auto;margin-right:auto}
      .hero-actions,.hero-notes{justify-content:center}
      .stage{min-height:570px}
      .steps,.modes{grid-template-columns:1fr}
      .mode{min-height:235px}
      .league-head{align-items:start;flex-direction:column}
      .league-row{grid-template-columns:repeat(3,1fr)}
      .feature-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
      .footer-brand{grid-column:1/-1}
    }
    @media(max-width:720px){
      .wrap{width:min(100% - 28px,var(--max))}
      .section{padding:68px 0}
      .navlinks{
        display:none;position:absolute;left:14px;right:14px;top:72px;
        padding:15px;border:1px solid var(--line);border-radius:18px;
        background:#0b1323;flex-direction:column;align-items:stretch;gap:4px;box-shadow:var(--shadow)
      }
      .navlinks.open{display:flex}
      .navlinks a{padding:11px 12px;border-radius:10px}
      .mobile-toggle{display:block}
      .hero h1{font-size:54px}
      .stage{min-height:525px}
      .phone{width:330px}
      .phone-screen{min-height:500px;padding:18px}
      .float-card{display:none}
      .trustbar{grid-template-columns:repeat(2,1fr)}
      .stat:nth-child(2){border-right:0}
      .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .league-wrap{padding:27px 20px}
      .league-row{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
      .footer-brand{grid-column:1/-1}
      .copyright{flex-direction:column}
    }
    @media(max-width:430px){
      .hero h1{font-size:46px}
      .hero p{font-size:16px}
      .hero-actions .btn{width:100%}
      .phone{width:100%}
      .stage{min-height:auto}
      .trust{padding-top:35px}
      .steps{gap:11px}
      .section-title{font-size:36px}
      .feature-box{padding:24px 20px}
      .bracket{grid-template-columns:1fr 13px 1fr;gap:4px}
      .bracket .last-arrow,.bracket .champ{display:none}
      .footer-grid{grid-template-columns:1fr}
      .cta-card{padding:45px 20px}
    }

/* WordPress base fixes */
html{margin:0!important}
body{min-height:100vh}
body.admin-bar .header{top:32px}
@media(max-width:782px){body.admin-bar .header{top:46px}}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
