:root{
      --bg:#070b12;
      --panel:#101824;
      --panel-2:#162232;
      --text:#f4f8ff;
      --muted:#a7b4c5;
      --line:rgba(255,255,255,.12);
      --lime:#8fff00;
      --lime-2:#b6ff33;
      --blue:#2d8dff;
      --blue-deep:#0b2d52;
      --gold:#ffd15c;
      --danger:#ff4d6d;
      --shadow:0 24px 80px rgba(0,0,0,.45);
      --radius:24px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,Arial,Helvetica,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 75% 0%, rgba(45,141,255,.24), transparent 34%),
        radial-gradient(circle at 20% 20%, rgba(143,255,0,.10), transparent 26%),
        linear-gradient(180deg,#05070c 0%,#0a111c 42%,#07101a 100%);
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}

    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(5,7,12,.86);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(16px);
    }

    .nav{
      min-height:74px;
      display:grid;
      grid-template-columns:auto auto;
      gap:22px;
      align-items:center;
      justify-content:space-between;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:1000;
      letter-spacing:-1.4px;
      font-size:34px;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .logo-dot{
      color:var(--lime);
      text-shadow:0 0 20px rgba(143,255,0,.75);
    }

    .nav-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 22px;
      border:0;
      cursor:pointer;
      font-weight:1000;
      text-transform:uppercase;
      letter-spacing:.2px;
      transition:.2s ease;
      border-radius:0;
      box-shadow:none;
      white-space:nowrap;
    }

    .btn:hover{transform:translateY(-2px)}
    .btn-login{background:#fff;color:#07101a}
    .btn-register{background:var(--lime);color:#050706;box-shadow:0 0 34px rgba(143,255,0,.24)}
    .btn-bonus{background:linear-gradient(135deg,#ffdc74,#ffb524);color:#171005}
    .btn-dark{background:#142132;color:#fff;border:1px solid rgba(255,255,255,.16)}

    .hero{
      position:relative;
      min-height:650px;
      isolation:isolate;
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }

    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-3;
      background:
        linear-gradient(90deg,rgba(4,8,13,.95) 0%,rgba(6,16,28,.86) 42%,rgba(10,35,62,.52) 100%),
        radial-gradient(circle at 72% 22%,rgba(166,214,255,.75),transparent 7%),
        radial-gradient(circle at 81% 18%,rgba(166,214,255,.50),transparent 6%),
        radial-gradient(circle at 91% 18%,rgba(166,214,255,.38),transparent 5%),
        linear-gradient(135deg,#0c2945 0%,#06111e 58%,#05070b 100%);
    }

    .hero:after{
      content:"";
      position:absolute;
      inset:auto -8% -180px -8%;
      height:440px;
      z-index:-2;
      background:
        repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 120px),
        radial-gradient(ellipse at center,rgba(143,255,0,.16),transparent 56%);
      transform:perspective(700px) rotateX(58deg);
      opacity:.9;
    }

    .hero-grid{
      min-height:650px;
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:34px;
      align-items:center;
      position:relative;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:9px 13px;
      border:1px solid rgba(143,255,0,.32);
      background:rgba(143,255,0,.09);
      color:var(--lime-2);
      font-weight:900;
      text-transform:uppercase;
      border-radius:999px;
      font-size:13px;
    }

    .eyebrow:before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--lime);
      box-shadow:0 0 18px var(--lime);
    }

    h1{
      margin:20px 0 18px;
      font-size:clamp(42px,6vw,82px);
      line-height:.94;
      letter-spacing:-3px;
      text-transform:uppercase;
    }

    .accent{color:var(--lime);text-shadow:0 0 28px rgba(143,255,0,.42)}
    .hero-copy{max-width:650px;color:#c5d2df;font-size:19px;line-height:1.7;margin:0 0 30px}

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin:0 0 28px;
    }

    .hero-actions .btn{min-height:58px;padding:0 28px;font-size:17px}

    .stadium-card{
      position:relative;
      min-height:500px;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02)),
        radial-gradient(circle at 50% 25%,rgba(45,141,255,.44),transparent 42%),
        rgba(13,22,34,.66);
      box-shadow:var(--shadow);
      overflow:hidden;
      border-radius:var(--radius);
    }

    .stadium-card:before{
      content:"MAKE YOUR\A LUCK";
      white-space:pre;
      position:absolute;
      top:46px;
      left:42px;
      font-size:clamp(54px,7vw,118px);
      line-height:.82;
      font-weight:1000;
      letter-spacing:-5px;
      color:rgba(255,255,255,.09);
      text-transform:uppercase;
    }

    .player{
      position:absolute;
      right:8%;
      bottom:-28px;
      width:min(360px,58%);
      aspect-ratio: .7 / 1;
      border-radius:46% 46% 20% 20%;
      background:
        radial-gradient(circle at 50% 8%,#ffe3c0 0 7%,transparent 8%),
        linear-gradient(180deg,transparent 0 15%,#59bdff 16% 45%,#152a45 46% 100%);
      filter:drop-shadow(0 20px 34px rgba(0,0,0,.45));
      opacity:.96;
    }

    .player:before,
    .player:after{
      content:"";
      position:absolute;
      background:#59bdff;
      border-radius:24px;
      top:25%;
      width:52px;
      height:180px;
      transform-origin:top center;
    }
    .player:before{left:3%;transform:rotate(28deg)}
    .player:after{right:2%;transform:rotate(-34deg)}

    .bonus-ticket{
      position:absolute;
      left:34px;
      bottom:34px;
      width:min(420px,calc(100% - 68px));
      padding:24px;
      border-radius:22px;
      background:rgba(5,9,16,.84);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(14px);
      box-shadow:0 20px 60px rgba(0,0,0,.34);
    }

    .bonus-ticket small{
      color:var(--muted);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.9px;
    }

    .bonus-ticket strong{
      display:block;
      margin:8px 0 18px;
      font-size:34px;
      line-height:1.05;
      letter-spacing:-1px;
    }

    .ticker{
      border-block:1px solid rgba(255,255,255,.12);
      background:linear-gradient(90deg,rgba(143,255,0,.08),rgba(45,141,255,.06));
      overflow:hidden;
    }

    .ticker-track{
      display:flex;
      gap:34px;
      width:max-content;
      padding:14px 0;
      animation:move 24s linear infinite;
      color:#d9e5f1;
      font-weight:900;
      text-transform:uppercase;
      font-size:14px;
    }

    @keyframes move{to{transform:translateX(-50%)}}

    section{padding:82px 0}
    .section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
    .section-head h2{font-size:clamp(32px,4vw,54px);line-height:1;margin:0;letter-spacing:-1.7px;text-transform:uppercase}
    .section-head p{max-width:560px;margin:0;color:var(--muted);line-height:1.65}

    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

    .feature,
    .step,
    .game-card,
    .faq-item{
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
      border-radius:22px;
      box-shadow:0 18px 50px rgba(0,0,0,.22);
    }

    .feature{padding:24px;min-height:230px;position:relative;overflow:hidden}
    .feature:after{
      content:"";
      position:absolute;
      width:120px;
      height:120px;
      border-radius:50%;
      right:-44px;
      top:-44px;
      background:rgba(143,255,0,.10);
    }

    .icon{
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      border-radius:16px;
      background:linear-gradient(135deg,rgba(143,255,0,.2),rgba(45,141,255,.18));
      border:1px solid rgba(255,255,255,.14);
      font-size:25px;
      margin-bottom:18px;
    }

    .feature h3,.step h3,.game-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.4px}
    .feature p,.step p,.game-card p,.faq-item p{margin:0;color:var(--muted);line-height:1.65}

    .bonus-area{
      position:relative;
      padding:38px;
      border-radius:30px;
      border:1px solid rgba(255,255,255,.14);
      background:
        linear-gradient(100deg,rgba(6,11,19,.96),rgba(9,34,60,.86)),
        radial-gradient(circle at 88% 22%,rgba(143,255,0,.22),transparent 28%);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .bonus-area:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,transparent,rgba(143,255,0,.08),transparent);
      transform:skewX(-18deg) translateX(-80%);
      animation:shine 6s infinite;
    }

    @keyframes shine{50%,100%{transform:skewX(-18deg) translateX(130%)}}

    .bonus-layout{position:relative;display:grid;grid-template-columns:1fr 390px;gap:30px;align-items:center}
    .bonus-big{font-size:clamp(42px,5vw,76px);line-height:.95;margin:10px 0 18px;font-weight:1000;letter-spacing:-2px;text-transform:uppercase}
    .bonus-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px 0 0;padding:0;list-style:none}
    .bonus-list li{padding:13px 14px;background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#dce8f4;font-weight:750}

    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
    .step{padding:24px;position:relative;counter-increment:step}
    .step:before{
      content:"0" counter(step);
      display:inline-flex;
      width:44px;
      height:44px;
      align-items:center;
      justify-content:center;
      margin-bottom:18px;
      background:var(--lime);
      color:#050706;
      font-weight:1000;
      border-radius:14px;
    }

    .game-card{padding:22px;min-height:190px;background:linear-gradient(180deg,rgba(20,36,55,.82),rgba(11,17,26,.92))}
    .game-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px}
    .badge{padding:7px 10px;border-radius:999px;background:rgba(143,255,0,.12);color:var(--lime-2);font-weight:900;font-size:12px;text-transform:uppercase}
    .game-symbol{font-size:38px;filter:drop-shadow(0 0 18px rgba(143,255,0,.2))}

    .payments{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:center;
      padding:28px;
      background:rgba(255,255,255,.045);
      border:1px solid rgba(255,255,255,.12);
      border-radius:24px;
    }
    .pay{min-width:120px;text-align:center;padding:13px 16px;border-radius:14px;background:#fff;color:#101824;font-weight:1000;text-transform:uppercase}

    .faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .faq-item{padding:22px}
    .faq-item h3{margin:0 0 8px;font-size:19px}

    .final-cta{
      text-align:center;
      padding:56px 28px;
      border-radius:30px;
      background:
        radial-gradient(circle at 50% 0%,rgba(143,255,0,.20),transparent 32%),
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:var(--shadow);
    }
    .final-cta h2{margin:0 0 14px;font-size:clamp(34px,5vw,66px);line-height:1;text-transform:uppercase;letter-spacing:-2px}
    .final-cta p{max-width:720px;margin:0 auto 24px;color:var(--muted);line-height:1.7}

    .footer{
      padding:30px 0;
      border-top:1px solid var(--line);
      color:#8f9dae;
      font-size:14px;
      line-height:1.6;
    }
    .footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}
    .age{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;font-weight:1000}

    @media (max-width:980px){
      .nav{grid-template-columns:1fr;gap:12px;padding:14px 0}
      .nav-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
      .nav-actions .btn{padding:0 10px;font-size:13px}
      .hero-grid{grid-template-columns:1fr;min-height:auto;padding:62px 0}
      .stadium-card{min-height:430px}
      .section-head{display:block}
      .section-head p{margin-top:14px}
      .grid-3,.grid-4,.steps,.bonus-layout,.faq{grid-template-columns:1fr 1fr}
      .bonus-layout{gap:22px}
    }

    @media (max-width:640px){
      .wrap{width:min(100% - 22px,1180px)}
      .logo{font-size:30px}
      .hero{min-height:auto}
      .hero-grid{padding:42px 0;gap:22px}
      h1{letter-spacing:-1.7px}
      .hero-copy{font-size:16px}
      .hero-actions{display:grid;grid-template-columns:1fr;gap:10px}
      .hero-actions .btn{width:100%}
      .stadium-card{min-height:390px;border-radius:20px}
      .stadium-card:before{left:18px;top:24px;font-size:54px;letter-spacing:-2px}
      .player{right:-4%;width:66%}
      .bonus-ticket{left:14px;right:14px;bottom:14px;width:auto;padding:18px}
      .bonus-ticket strong{font-size:25px}
      section{padding:54px 0}
      .grid-3,.grid-4,.steps,.bonus-layout,.bonus-list,.faq{grid-template-columns:1fr}
      .bonus-area{padding:24px;border-radius:22px}
      .payments{padding:18px;justify-content:stretch}
      .pay{width:calc(50% - 5px);min-width:0;font-size:13px}
      .footer-row{display:block;text-align:center}
      .age{margin-top:14px}
    }