:root{
      --bg:#020504;
      --accent:#00ff66;
      --text:#f7fff9;
      --muted:#9fb5a9;
      --border:rgba(255,255,255,.08);
      --shadow:0 24px 60px rgba(0,0,0,.65);
    }
    *{box-sizing:border-box}
    html,body{
      margin:0; padding:0; min-height:100%;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at 0% 0%, rgba(0,255,102,0.18), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0,255,102,0.12), transparent 55%),
        var(--bg);
      color:var(--text);
      scroll-behavior:smooth;
    }
    a{color:inherit; text-decoration:none}
    .page{min-height:100vh; display:flex; flex-direction:column}
    .container{max-width:960px; margin:0 auto; padding:0 1.5rem; width:100%}

    /* NAV */
    .nav{
      position:sticky; top:0; z-index:20;
      backdrop-filter:blur(14px);
      background:linear-gradient(to bottom, rgba(2,5,4,.96), rgba(2,5,4,.8), transparent);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:.85rem 0;
    }
    .brand{display:flex; align-items:center; gap:.6rem}
    .brand-mark{
      width:36px; height:36px; border-radius:9px;
      background:radial-gradient(circle at 20% 0%, rgba(0,255,102,.55), rgba(0,255,102,.1));
      border:1px solid rgba(0,255,102,.65);
      display:grid; place-items:center;
      box-shadow:0 0 18px rgba(0,255,102,.65);
    }
    .brand-mark span{
      font-weight:800; font-size:1rem;
      transform:skewX(-14deg);
      letter-spacing:.03em;
    }
    .brand-text{display:flex; flex-direction:column; gap:.1rem}
    .brand-title{
      font-weight:900; font-size:1rem;
      letter-spacing:.17em;
      text-transform:uppercase;
      transform:skewX(-10deg);
    }
    .brand-subtitle{
      font-size:.72rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--muted);
    }
    .nav-actions{display:flex; align-items:center; gap:.75rem}
    .nav-links{
      display:flex; gap:.75rem;
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.18em;
      color:var(--muted);
    }
    .nav-links a{position:relative; padding-bottom:.15rem}
    .nav-links a::after{
      content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
      background:var(--accent); transition:width .18s ease-out;
    }
    .nav-links a:hover::after{width:100%}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      border-radius:999px;
      border:1px solid rgba(0,255,102,.8);
      padding:.5rem 1.25rem;
      font-size:.83rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-weight:700;
      cursor:pointer;
      background:radial-gradient(circle at 0 0, rgba(0,255,102,.2), transparent 55%), rgba(2,5,4,.96);
      color:var(--accent);
      transition:transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
    }
    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 12px 30px rgba(0,255,102,.35);
      background:radial-gradient(circle at 100% 0, rgba(0,255,102,.26), transparent 55%), rgba(2,5,4,.98);
    }

    /* HERO */
    .hero{padding:3rem 0 1.5rem}
    .hero-inner{
      position:relative;
      padding:2rem 1.75rem;
      border-radius:22px;
      background:
        radial-gradient(circle at 0 0, rgba(0,255,102,.17), transparent 60%),
        linear-gradient(135deg, rgba(0,0,0,.96), rgba(5,15,10,.96));
      border:1px solid rgba(0,255,102,.4);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .hero-inner::before{
      content:""; position:absolute; inset:-40%;
      background-image:linear-gradient(135deg, transparent 43%, #000 43%, #000 57%, transparent 57%);
      opacity:.18; pointer-events:none;
    }
    .hero-kicker{
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.22em;
      color:var(--muted);
      margin-bottom:.75rem;
      position:relative; z-index:1;
    }
    .hero-title{
      font-size:clamp(2rem, 3.2vw, 2.6rem);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.13em;
      transform:skewX(-8deg);
      margin:0 0 .6rem;
      position:relative; z-index:1;
    }
    .hero-title span{color:var(--accent)}
    .hero-text{
      font-size:.98rem;
      line-height:1.7;
      color:#d6ece2;
      max-width:42rem;
      position:relative; z-index:1;
    }
    .hero-meta{
      margin-top:.9rem;
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.18em;
      color:var(--muted);
      position:relative; z-index:1;
    }

    /* CONTENT */
    main.terms{flex:1; padding:1.5rem 0 3rem}
    .terms-card{
      margin-top:1.5rem;
      padding:1.75rem 1.75rem 2.1rem;
      border-radius:20px;
      background:rgba(0,0,0,.88);
      border:1px solid var(--border);
      box-shadow:0 18px 40px rgba(0,0,0,.8);
    }
    .terms-meta{
      font-size:.8rem;
      color:var(--muted);
      margin-bottom:1.25rem;
    }
    .terms-section{margin-bottom:1.4rem}
    .terms-section h2{
      font-size:1.05rem;
      margin:0 0 .4rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--accent);
    }
    .terms-section p{
      font-size:.9rem;
      line-height:1.7;
      color:#e3f1ea;
      margin:0 0 .45rem;
    }
    .terms-section ul{
      margin:.15rem 0 .55rem 1.2rem;
      padding:0;
      font-size:.9rem;
      line-height:1.7;
      color:#e3f1ea;
    }
    .terms-section li{margin-bottom:.25rem}
    .highlight{
      padding:.85rem .9rem;
      border-radius:14px;
      background:rgba(0,255,102,.07);
      border:1px solid rgba(0,255,102,.3);
      font-size:.88rem;
      color:#dfffee;
      margin-top:.4rem;
    }

    /* FOOTER */
    footer{
      border-top:1px solid rgba(255,255,255,.06);
      padding:1.25rem 0 1.75rem;
      font-size:.78rem;
      color:var(--muted);
    }
    footer .footer-inner{
      display:flex; flex-wrap:wrap;
      justify-content:space-between;
      gap:.75rem;
      align-items:center;
    }

    /* RESPONSIVE */
    @media (max-width:900px){
      .nav-links{display:none}
      .hero-inner{padding:1.6rem 1.4rem}
      .terms-card{padding:1.4rem 1.3rem 1.8rem}
    }
    @media (max-width:600px){
      .container{padding:0 1.1rem}
      .brand-subtitle{display:none}
    }