:root{
    --bg-0:#070a14;
    --bg-1:#0b0f1e;
    --bg-2:#10152a;
    --line: rgba(148,168,214,0.14);
    --ice: #6fd7ff;
    --ice-soft: rgba(111,215,255,0.14);
    --violet: #9b7bff;
    --violet-soft: rgba(155,123,255,0.16);
    --text-0: #eef2ff;
    --text-1: #aab3cf;
    --text-2: #6f7896;
    --radius: 14px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background: radial-gradient(1200px 700px at 18% -10%, rgba(155,123,255,0.16), transparent 55%),
                radial-gradient(1000px 600px at 100% 10%, rgba(111,215,255,0.14), transparent 50%),
                var(--bg-0);
    color: var(--text-0);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1,h2,h3, .display{ font-family: 'Space Grotesk', 'Inter', sans-serif; }
  a{ color: inherit; text-decoration:none; }
  img, svg{ max-width:100%; display:block; }
  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }

  /* NAV */
  nav{
    position: sticky; top:0; z-index: 50;
    background: rgba(7,10,20,0.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height: 68px; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.05rem; }
  .brand .cube{ width:28px; height:28px; object-fit:contain; filter: drop-shadow(0 0 8px rgba(111,215,255,0.6)); }
  footer .brand .cube{ width:24px; height:24px; }
  .nav-links{ display:flex; gap:28px; align-items:center; }
  .nav-links a{ color: var(--text-1); font-size:0.92rem; transition: color .15s ease; }
  .nav-links a:hover{ color: var(--text-0); }
  .nav-cta{
    padding: 9px 18px; border-radius: 999px;
    background: linear-gradient(135deg, var(--ice), var(--violet));
    color:#070a14; font-weight:600; font-size:0.88rem;
  }
  @media (max-width:720px){ .nav-links a:not(.nav-cta){ display:none; } }

  /* HERO */
  header.hero{
    position:relative;
    padding: 108px 0 96px;
    text-align:center;
    border-bottom: 1px solid var(--line);
  }
  .cube-mark{
    width: 168px; height:168px; margin: 0 auto 32px;
    border-radius: 34px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(160deg, rgba(111,215,255,0.16), rgba(155,123,255,0.16));
    border: 1px solid var(--line);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 30px 60px -20px rgba(111,215,255,0.25);
    overflow: hidden;
  }
  .cube-mark img{ width:100%; height:100%; object-fit:cover; }
  .eyebrow{
    display:inline-block; font-size: 0.85rem; color: var(--ice);
    background: var(--ice-soft); border: 1px solid rgba(111,215,255,0.3);
    padding: 6px 14px; border-radius: 999px; margin-bottom: 26px;
  }
  h1.title{
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(120deg, #ffffff 30%, var(--ice) 65%, var(--violet) 100%);
    -webkit-background-clip: text; background-clip:text; color: transparent;
  }
  .subtitle{
    margin-top: 16px;
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    color: var(--text-1);
    font-weight:500;
  }
  .description{
    max-width: 520px; margin: 26px auto 0;
    color: var(--text-1); font-size: 1rem;
  }
  .description .line{ display:block; }
  .hero-ctas{
    margin-top: 40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  }
  .btn{
    padding: 14px 30px; border-radius: 999px; font-weight:600; font-size:0.98rem;
    transition: transform .15s ease, box-shadow .15s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{
    background: linear-gradient(135deg, var(--ice), var(--violet));
    color: #070a14;
    box-shadow: 0 12px 30px -10px rgba(111,215,255,0.45);
  }
  .btn-secondary{
    background: transparent; color: var(--text-0);
    border: 1px solid var(--line);
  }
  .btn-secondary:hover{ border-color: rgba(111,215,255,0.5); }

  /* SECTION GENERIC */
  section{ padding: 88px 0; border-bottom: 1px solid var(--line); }
  .section-head{ max-width: 640px; margin-bottom: 44px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head h2{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight:600; letter-spacing:-0.01em; }
  .section-head p{ margin-top:14px; color: var(--text-1); }

  /* ABOUT */
  .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
  .about-copy p{ color: var(--text-1); font-size:1.05rem; margin-bottom:16px; }
  .about-copy p:last-child{ margin-bottom:0; }
  .about-visual{
    aspect-ratio: 1/1; border-radius: 24px;
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
    border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    padding: 14%;
  }
  .about-visual::before{
    content:""; position:absolute; inset:-40%;
    background: radial-gradient(circle at 30% 30%, rgba(111,215,255,0.25), transparent 60%),
                radial-gradient(circle at 75% 75%, rgba(155,123,255,0.25), transparent 60%);
  }
  .about-visual img{ position:relative; width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 0 26px rgba(111,215,255,0.5)); }
  @media (max-width: 820px){ .about-grid{ grid-template-columns: 1fr; } .about-visual{ order:-1; max-width:260px; margin:0 auto; } }

  /* TOKEN */
  .token-card{
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 8px;
  }
  .token-row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
    gap: 16px;
  }
  .token-row:last-child{ border-bottom:none; }
  .token-row .label{ color: var(--text-2); font-size:0.92rem; }
  .token-row .value{ font-weight:600; font-size:1rem; text-align:right; }
  .token-row .value.mono{ font-family: 'Space Grotesk', monospace; font-size:0.9rem; word-break: break-all; color: var(--ice); }
  .copy-btn{
    background: var(--ice-soft); border:1px solid rgba(111,215,255,0.3); color: var(--ice);
    font-size: 0.78rem; padding: 5px 11px; border-radius: 8px; cursor:pointer; margin-left:10px;
    font-family:'Inter',sans-serif; white-space:nowrap;
  }
  .copy-btn:hover{ background: rgba(111,215,255,0.24); }
  .contract-wrap{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px; }

  /* COMMUNITY */
  .community-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .community-card{
    background: var(--bg-1); border:1px solid var(--line); border-radius: 18px;
    padding: 28px; display:flex; flex-direction:column; gap:14px;
  }
  .community-card .icon{
    width:44px; height:44px; border-radius:12px;
    background: var(--violet-soft); border:1px solid rgba(155,123,255,0.3);
    display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .community-card h3{ font-size:1.1rem; font-weight:600; }
  .community-card .status{ color: var(--text-1); font-size:0.95rem; }
  .community-card .status.soon{ color: var(--text-2); font-style:italic; }
  .community-card a.link{ color: var(--ice); font-weight:600; font-size:0.95rem; }
  @media (max-width:640px){ .community-grid{ grid-template-columns: 1fr; } }

  /* FOOTER */
  footer{ padding: 52px 0; text-align:center; }
  footer .brand{ justify-content:center; margin-bottom:8px; }
  footer p{ color: var(--text-2); font-size:0.9rem; }

  ::selection{ background: rgba(111,215,255,0.3); }