:root{
    --void: #07070d;
    --void-2: #111119;
    --void-3: #181822;
    --blue: #4a63ff;
    --violet: #9b3ff0;
    --violet-deep: #4c1d95;
    --ash: #a6a6ba;
    --paper: #f4f3fa;
    --online: #23c16b;
    --afk: #f2a93b;
    --neon-pink: #e34fe0;
    --line: rgba(255,255,255,0.08);
    --radius: 16px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--void);
    color:var(--paper);
    font-family:'Plus Jakarta Sans', sans-serif;
    line-height:1.5;
    overflow-x:hidden;
  }

  a{color:inherit;}
  .mono{ font-family:'JetBrains Mono', monospace; }

  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 24px;
  }

  /* ---------- ambient background for non-hero sections ---------- */
  .glow-field{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(ellipse 700px 500px at 15% 20%, rgba(74,99,255,0.16), transparent 60%),
      radial-gradient(ellipse 800px 600px at 90% 60%, rgba(155,63,240,0.14), transparent 60%),
      var(--void);
  }

  /* ---------- nav ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(14px);
    background:rgba(7,7,13,0.65);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:64px;
  }
  .brand{
    font-family:'Anton', sans-serif;
    font-size:1.2rem;
    letter-spacing:0.02em;
  }
  .brand span{
    background:linear-gradient(90deg, var(--blue), var(--violet));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .nav-cta{
    font-size:0.85rem;
    font-weight:700;
    padding:9px 18px;
    border-radius:999px;
    background:var(--paper);
    color:var(--void);
    text-decoration:none;
    white-space:nowrap;
  }

  /* ---------- hero (cinematic key art) ---------- */
  .hero{
    position:relative;
    width:100%;
    min-height:78vh;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
  }
  .hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    will-change:transform;
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(7,7,13,0.15) 0%, rgba(7,7,13,0.05) 40%, rgba(7,7,13,0.55) 78%, var(--void) 100%),
      linear-gradient(0deg, rgba(7,7,13,0.35), transparent 30%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    width:100%;
    padding:0 24px 56px;
    text-align:center;
  }

  .status-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 16px 8px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(7,7,13,0.55);
    backdrop-filter: blur(8px);
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--ash);
    margin-bottom:26px;
  }
  .status-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--online);
    box-shadow:0 0 10px var(--online);
    flex-shrink:0;
    transition:background 0.5s ease, box-shadow 0.5s ease;
  }
  .status-dot.afk{ background:var(--afk); box-shadow:0 0 10px var(--afk); }
  .status-text{ transition:opacity 0.3s ease; }

  .hero-ctas{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
  }

  .btn-primary{
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 30px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--blue), var(--violet));
    color:#fff;
    font-weight:700;
    font-size:1.02rem;
    text-decoration:none;
    box-shadow:0 10px 34px -8px rgba(155,63,240,0.65);
    transition:transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 38px -6px rgba(155,63,240,0.8); }
  .btn-primary:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

  .btn-ghost{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 24px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.22);
    background:rgba(7,7,13,0.4);
    backdrop-filter: blur(8px);
    color:var(--paper);
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    font-family:inherit;
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .btn-ghost:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.36); }
  .btn-ghost:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

  .link-fallback-note{
    margin-top:18px;
    font-size:0.8rem;
    color:var(--ash);
  }
  .link-fallback-note .mono{ color:var(--paper); }

  /* ---------- ticker ---------- */
  .ticker-outer{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--void-2);
    overflow:hidden;
    padding:14px 0;
  }
  .ticker-track{
    display:flex;
    gap:40px;
    white-space:nowrap;
    width:max-content;
    animation:scroll 34s linear infinite;
  }
  .ticker-track span{
    font-family:'JetBrains Mono', monospace;
    font-size:0.82rem;
    color:var(--ash);
  }
  .ticker-track span b{ color:var(--paper); }
  @keyframes scroll{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }

  /* ---------- sections ---------- */
  section{ padding:96px 0; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:14px;
  }

  h2{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.9rem, 4.8vw, 2.8rem);
    text-transform:uppercase;
    line-height:1.05;
    max-width:640px;
  }

  .section-sub{
    margin-top:16px;
    color:var(--ash);
    max-width:520px;
    font-size:1.02rem;
  }

  /* quotes / artefacts */
  .quotes{
    margin-top:48px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
  }
  .quote-card{
    background:var(--void-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    position:relative;
  }
  .quote-card.sticky{
    background:#2a2612;
    border-color:rgba(255,214,79,0.25);
  }
  .quote-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom:12px;
  }
  .quote-avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; }
  .avatar-1{ background:linear-gradient(135deg, var(--blue), #7c9bff); }
  .avatar-2{ background:linear-gradient(135deg, var(--violet), #d48fff); }
  .avatar-3{ background:linear-gradient(135deg, var(--online), #7de6ac); }
  .quote-channel{ font-family:'JetBrains Mono', monospace; font-size:0.75rem; color:var(--ash); }
  .quote-body{ font-size:0.92rem; color:var(--paper); }
  .quote-body em{ color:var(--ash); font-style:normal; }
  .sticky-label{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    color:#e8c96a;
    margin-bottom:10px;
    display:block;
  }

  /* channels */
  .channels-grid{
    margin-top:48px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .channel-group{
    background:var(--void-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
  }
  .channel-group h3{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--ash);
    margin-bottom:14px;
  }
  .channel-item{
    display:flex; align-items:center; gap:9px;
    padding:8px 0;
    font-size:0.94rem;
    border-top:1px solid var(--line);
  }
  .channel-item:first-of-type{ border-top:none; }
  .channel-hash{ color:#5c5c74; font-weight:700; }

  /* neon sign block */
  .neon-block{
    margin-top:48px;
    border:1px solid rgba(227,79,224,0.35);
    border-radius:var(--radius);
    padding:28px;
    background:
      radial-gradient(ellipse 400px 200px at 0% 0%, rgba(227,79,224,0.12), transparent 70%),
      var(--void-2);
  }
  .neon-title{
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--neon-pink);
    margin-bottom:18px;
  }
  .neon-list{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  .neon-item{
    font-weight:700;
    font-size:0.95rem;
    color:var(--paper);
    display:flex; align-items:center; gap:8px;
  }

  /* values chips */
  .chips{
    margin-top:24px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .chip{
    padding:10px 18px;
    border-radius:999px;
    background:var(--void-2);
    border:1px solid var(--line);
    font-size:0.9rem;
    font-weight:600;
  }
  .chip.blue{ border-color:rgba(74,99,255,0.4); }
  .chip.violet{ border-color:rgba(155,63,240,0.4); }

  /* platforms */
  .platforms{
    margin-top:36px;
    display:flex;
    gap:28px;
    flex-wrap:wrap;
    align-items:center;
    margin-left:25%;
  }
  .platform{
    display:flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    color:var(--ash);
  }
  .platform-dot{ width:6px; height:6px; border-radius:50%; background:var(--ash); }

  /* final cta */
  .final-cta{
    text-align:center;
    padding:100px 0 116px;
  }
  .final-cta h2{ margin:0 auto; }
  .final-cta .section-sub{ margin-left:auto; margin-right:auto; }

  .copy-row{
    margin-top:26px;
    display:inline-flex;
    align-items:center;
    background:var(--void-2);
    border:1px solid var(--line);
    border-radius:999px;
    padding:6px 6px 6px 20px;
    max-width:100%;
  }
  .copy-row .mono{
    font-size:0.85rem;
    color:var(--paper);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:220px;
  }
  .copy-btn{
    margin-left:14px;
    padding:10px 18px;
    border-radius:999px;
    border:none;
    background:var(--paper);
    color:var(--void);
    font-weight:700;
    font-size:0.82rem;
    font-family:inherit;
    cursor:pointer;
    white-space:nowrap;
    transition:background 0.15s ease;
  }
  .copy-btn:hover{ background:#dcdaf0; }
  .copy-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

  .tiktok-note{ margin-top:14px; font-size:0.8rem; color:var(--ash); }

  /* footer */
 footer{
    border-top:1px solid var(--line);
    padding:56px 0 28px;
  }
  .footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:32px;
    padding-bottom:32px;
    border-bottom:1px solid var(--line);
  }
  .footer-brand .brand{ margin-bottom:8px; }
  .footer-tagline{
    color:var(--ash);
    font-size:0.92rem;
  }
  .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
  }
  .footer-links a{
    font-size:0.9rem;
    font-weight:600;
    color:var(--ash);
    text-decoration:none;
    transition:color 0.15s ease;
  }
  .footer-links a:hover{ color:var(--paper); }
  .footer-links a:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .footer-vote{ color:var(--afk) !important; }
  .footer-vote:hover{ color:#ffc266 !important; }
  .footer-bottom{
    margin-top:22px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .footer-copy{ font-size:0.75rem; color:#6b6b80; }

  /* ---------- responsive ---------- */
  @media (max-width: 760px){
    .hero{ min-height:64vh; }
    .quotes{ grid-template-columns:1fr; }
    .channels-grid{ grid-template-columns:1fr; }
    .neon-list{ grid-template-columns:1fr 1fr; }
    .copy-row{ flex-direction:column; align-items:stretch; padding:16px; border-radius:18px; }
    .copy-row .mono{ max-width:100%; margin-bottom:10px; }
    .copy-btn{ margin-left:0; width:100%; }
  }

  /* ---------- grain overlay (cinematic texture) ---------- */
  .grain{
    position:fixed; inset:0;
    z-index:100;
    pointer-events:none;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---------- scroll reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- founder message (style Discord) ---------- */
  .founder-msg{
    margin-top:44px;
    max-width:640px;
    display:flex;
    gap:16px;
  }
  .founder-avatar{
    width:46px; height:46px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg, var(--blue), var(--violet));
    display:flex; align-items:center; justify-content:center;
    font-family:'Anton', sans-serif;
    font-size:1.1rem;
    color:#fff;
  }
  .founder-body-wrap{ padding-top:2px; }
  .founder-head{
    display:flex; align-items:baseline; gap:10px;
    margin-bottom:6px;
  }
  .founder-name{
    font-weight:800;
    color:#f0725c;
    font-size:1rem;
  }
  .founder-tag{
    font-size:0.7rem;
    color:var(--ash);
    background:var(--void-3);
    padding:2px 8px;
    border-radius:5px;
  }
  .founder-body{
    font-size:1rem;
    color:var(--paper);
    line-height:1.65;
    max-width:560px;
  }

  /* ---------- contact modo form ---------- */
.contact-card{
  margin-top:48px;
  max-width:520px;
  margin-left:auto; margin-right:auto;
  background:var(--void-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  text-align:left;
}
.contact-card label{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  color:var(--ash);
  text-transform:uppercase;
  letter-spacing:0.05em;
  margin-bottom:8px;
}
.contact-field{ margin-bottom:18px; }
.contact-field input,
.contact-field textarea{
  width:100%;
  background:var(--void-3);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--paper);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:0.95rem;
  resize:vertical;
}
.contact-field input:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:var(--blue);
}
.contact-field textarea{ min-height:110px; }
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.contact-submit{
  width:100%;
  padding:14px;
  border-radius:999px;
  border:none;
  background:linear-gradient(90deg, var(--blue), var(--violet));
  color:#fff;
  font-weight:700;
  font-size:0.95rem;
  font-family:inherit;
  cursor:pointer;
}
.contact-submit:disabled{ opacity:0.6; cursor:default; }
.contact-feedback{
  margin-top:14px;
  font-size:0.85rem;
  min-height:1.2em;
}
.contact-feedback.ok{ color:var(--online); }
.contact-feedback.err{ color:#f0725c; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .ticker-track{ animation:none; }
    .btn-primary:hover{ transform:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }