:root{
      --bg:#02030a;
      --text:#edf7ff;
      --muted:#9db3c9;
      --neon:#39ff14;
      --cyan:#4deeea;
      --violet:#b967ff;
      --orange:#ffb000;
      --glass:rgba(8,14,30,.58);
      --border:rgba(255,255,255,.14);
    }

    *{box-sizing:border-box;margin:0;padding:0}

    html,body{min-height:100%}

    body{
      min-height:100vh;
      overflow:hidden;
      font-family:Inter,Segoe UI,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 18% 18%, rgba(57,255,20,.23), transparent 26%),
        radial-gradient(circle at 78% 22%, rgba(77,238,234,.18), transparent 29%),
        radial-gradient(circle at 50% 86%, rgba(185,103,255,.24), transparent 34%),
        linear-gradient(135deg,#010208,#06101e 58%,#02030a);
    }

    .stars,
    .grid,
    .aurora,
    .scan,
    .noise{
      position:fixed;
      inset:0;
      pointer-events:none;
    }

    .stars{
      background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(77,238,234,.85) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(57,255,20,.75) 0 1px, transparent 1.5px);
      background-size:220px 220px, 310px 310px, 420px 420px;
      background-position:0 0, 70px 100px, 160px 40px;
      opacity:.35;
      animation:starDrift 55s linear infinite;
    }

    @keyframes starDrift{
      from{transform:translate3d(0,0,0)}
      to{transform:translate3d(-220px,120px,0)}
    }

    .grid{
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size:54px 54px;
      mask-image:radial-gradient(circle at center, black 22%, transparent 74%);
      transform:perspective(800px) rotateX(58deg) translateY(12vh) scale(1.25);
      transform-origin:center bottom;
      animation:gridMove 12s linear infinite;
      opacity:.8;
    }

    @keyframes gridMove{
      from{background-position:0 0}
      to{background-position:0 54px}
    }

    .aurora{
      inset:-30%;
      background:
        conic-gradient(from 180deg at 50% 50%,
          transparent,
          rgba(57,255,20,.13),
          transparent,
          rgba(77,238,234,.12),
          transparent,
          rgba(185,103,255,.12),
          transparent);
      filter:blur(65px);
      animation:spin 28s linear infinite;
      opacity:.95;
    }

    @keyframes spin{to{transform:rotate(360deg)}}

    .scan{
      background:linear-gradient(
        to bottom,
        transparent,
        transparent 48%,
        rgba(57,255,20,.08) 49%,
        transparent 51%,
        transparent
      );
      background-size:100% 9px;
      opacity:.35;
      mix-blend-mode:screen;
    }

    .noise{
      opacity:.075;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode:screen;
    }

    .orbit{
      position:fixed;
      width:760px;
      height:760px;
      border-radius:50%;
      border:1px solid rgba(77,238,234,.12);
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      box-shadow:
        0 0 70px rgba(77,238,234,.06),
        inset 0 0 70px rgba(57,255,20,.05);
      pointer-events:none;
      animation:orbit 18s linear infinite;
    }

    .orbit::before,
    .orbit::after{
      content:"";
      position:absolute;
      width:16px;
      height:16px;
      border-radius:50%;
      background:var(--neon);
      box-shadow:0 0 28px var(--neon);
    }

    .orbit::before{left:50%;top:-8px}
    .orbit::after{right:78px;bottom:72px;background:var(--cyan);box-shadow:0 0 28px var(--cyan)}

    @keyframes orbit{
      to{transform:translate(-50%,-50%) rotate(360deg)}
    }

    main{
      position:relative;
      z-index:10;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }

    .card{
      width:min(980px,100%);
      position:relative;
      padding:58px;
      border:1px solid var(--border);
      border-radius:34px;
      background:
        linear-gradient(145deg, rgba(8,14,30,.74), rgba(3,7,16,.55)),
        radial-gradient(circle at top right, rgba(77,238,234,.13), transparent 36%),
        radial-gradient(circle at bottom left, rgba(57,255,20,.11), transparent 38%);
      box-shadow:
        0 40px 120px rgba(0,0,0,.62),
        inset 0 0 0 1px rgba(255,255,255,.045),
        0 0 80px rgba(57,255,20,.12);
      backdrop-filter:blur(22px);
      overflow:hidden;
    }

    .card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.13) 43%, transparent 52% 100%);
      transform:translateX(-120%);
      animation:shine 7s ease-in-out infinite;
      pointer-events:none;
    }

    @keyframes shine{
      0%,55%{transform:translateX(-120%)}
      75%,100%{transform:translateX(120%)}
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border:1px solid rgba(57,255,20,.35);
      border-radius:999px;
      background:rgba(57,255,20,.07);
      color:#caffc5;
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      margin-bottom:34px;
    }

    .pulse{
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--neon);
      box-shadow:0 0 18px var(--neon);
      animation:pulse 1.4s ease-in-out infinite;
    }

    @keyframes pulse{
      50%{transform:scale(1.7);opacity:.55}
    }

    h1{
      font-size:clamp(54px,9vw,118px);
      letter-spacing:-.085em;
      line-height:.88;
      max-width:760px;
      margin-bottom:24px;
      text-shadow:0 0 40px rgba(57,255,20,.18);
    }

    h1 span{
      display:block;
      color:transparent;
      background:linear-gradient(90deg, var(--neon), var(--cyan), var(--violet));
      -webkit-background-clip:text;
      background-clip:text;
      filter:drop-shadow(0 0 22px rgba(77,238,234,.18));
    }

    .lead{
      max-width:720px;
      color:#cbdbee;
      font-size:20px;
      line-height:1.75;
      margin-bottom:38px;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      align-items:center;
      margin-bottom:34px;
    }

    .btn{
      min-height:64px;
      padding:0 28px;
      border-radius:20px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:11px;
      text-decoration:none;
      color:var(--text);
      font-weight:800;
      letter-spacing:.01em;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.065);
      position:relative;
      overflow:hidden;
      transition:.25s ease;
    }

    .btn::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
      transform:translateX(-130%) rotate(14deg);
      transition:.55s ease;
    }

    .btn:hover::before{transform:translateX(130%) rotate(14deg)}
    .btn:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.38)}

    .btn-main{
      font-size:20px;
      color:#001207;
      border:none;
      background:linear-gradient(135deg, #39ff14, #4deeea);
      box-shadow:
        0 0 35px rgba(57,255,20,.35),
        0 16px 40px rgba(57,255,20,.13);
    }

    .btn-matrix{
      color:#d5ffd5;
      border-color:rgba(57,255,20,.42);
      background:rgba(0,0,0,.25);
    }

    .chips{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }

    .chip{
      padding:10px 13px;
      border-radius:999px;
      color:#aec4d9;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      font-size:13px;
    }

    .side-code{
      position:absolute;
      right:26px;
      top:26px;
      bottom:26px;
      width:210px;
      opacity:.18;
      color:var(--neon);
      font-family:Consolas,monospace;
      font-size:13px;
      line-height:1.7;
      overflow:hidden;
      pointer-events:none;
      mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
    }

    .footer{
      position:absolute;
      left:58px;
      right:58px;
      bottom:24px;
      display:flex;
      justify-content:space-between;
      gap:20px;
      color:#758ca3;
      font-size:13px;
    }

    .corner{
      position:absolute;
      width:20px;
      height:20px;
      border-color:rgba(57,255,20,.62);
    }

    .tl{top:20px;left:20px;border-top:2px solid;border-left:2px solid}
    .tr{top:20px;right:20px;border-top:2px solid;border-right:2px solid}
    .bl{bottom:20px;left:20px;border-bottom:2px solid;border-left:2px solid}
    .br{bottom:20px;right:20px;border-bottom:2px solid;border-right:2px solid}

    @media(max-width:760px){
      body{overflow:auto}
      main{padding:18px}
      .card{padding:34px 24px 70px;border-radius:26px}
      .actions{flex-direction:column;align-items:stretch}
      .btn{width:100%}
      .side-code{display:none}
      .footer{left:24px;right:24px;flex-direction:column;gap:6px}
      .orbit{width:520px;height:520px}
    }