:root{
    --bg: #0a0714;
    --bg-panel: #180f2c;
    --bg-panel-2: #1f1438;
    --accent: #8b5cf6;
    --accent-2: #b794ff;
    --accent-deep: #5b21b6;
    --gold: #f0c250;
    --text: #ece4ff;
    --text-dim: #9c8fc2;
    --line: rgba(183,148,255,0.18);
    --facet: 14px;
  }

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

  html{scroll-behavior:smooth;}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
      radial-gradient(ellipse 900px 500px at 15% -5%, rgba(139,92,246,0.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(183,148,255,0.10), transparent 55%),
      radial-gradient(ellipse 600px 400px at 50% 100%, rgba(91,33,182,0.18), transparent 60%);
    pointer-events:none;
    z-index:0;
  }

  .pixel{ font-family:'Silkscreen', monospace; }
  .display{ font-family:'Space Grotesk', sans-serif; }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--accent); color:var(--bg); }

  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  .facet{
    clip-path: polygon(
      var(--facet) 0, 100% 0,
      100% calc(100% - var(--facet)), calc(100% - var(--facet)) 100%,
      0 100%, 0 var(--facet)
    );
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,7,20,0.75);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .logo{
    font-family:'Silkscreen', monospace;
    font-size:15px;
    letter-spacing:0.5px;
    display:flex; align-items:center; gap:10px;
  }
  .logo .gem{
    width:16px; height:16px;
    background:linear-gradient(145deg, var(--accent-2), var(--accent-deep));
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    box-shadow:0 0 12px rgba(139,92,246,0.7);
  }
  .logo-icon{
    width:32px; height:32px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent), 0 0 14px rgba(139,92,246,0.55);
  }
  footer .logo-icon{ width:28px; height:28px; }
  .nav-links{
    display:flex; gap:36px; font-size:14px; color:var(--text-dim);
  }
  .nav-links a{ transition:color 0.2s; }
  .nav-links a:hover{ color:var(--accent-2); }
  .nav-cta{
    display:flex; gap:12px;
  }

  @media (max-width:760px){
    .nav-links{ display:none; }
  }

  /* ---------- BUTTONS ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    padding:13px 26px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:14.5px;
    cursor:pointer;
    border:none;
    transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  }
  .btn:active{ transform:translateY(1px) scale(0.98); }

  .btn-primary{
    background:linear-gradient(135deg, var(--gold), #d9a53c);
    color:#241605;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow:0 4px 20px rgba(240,194,80,0.25);
  }
  .btn-primary:hover{ filter:brightness(1.08); box-shadow:0 4px 26px rgba(240,194,80,0.4); }

  .btn-ghost{
    background:rgba(139,92,246,0.08);
    color:var(--text);
    border:1px solid var(--line);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .btn-ghost:hover{ background:rgba(139,92,246,0.16); border-color:var(--accent-2); }

  .btn-small{ padding:9px 16px; font-size:13px; }

  /* ---------- HERO ---------- */
  header.hero{
    position:relative;
    padding:96px 0 80px;
    z-index:1;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:40px;
    align-items:center;
  }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    header.hero{ padding:56px 0 48px; text-align:center; }
    .hero-grid > div:first-child{ order:1; }
    .crystal-wrap{ order:0; margin:0 auto 8px; }
  }

  .eyebrow{
    font-family:'Silkscreen', monospace;
    font-size:11.5px;
    letter-spacing:1.5px;
    color:var(--gold);
    background:rgba(240,194,80,0.08);
    border:1px solid rgba(240,194,80,0.3);
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    margin-bottom:26px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  h1.title{
    font-size:clamp(42px, 6.2vw, 76px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-1.5px;
    background:linear-gradient(180deg, #ffffff 10%, var(--accent-2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:22px;
  }

  .subtitle{
    font-size:17px;
    color:var(--text-dim);
    max-width:480px;
    margin-bottom:34px;
  }
  @media (max-width:900px){ .subtitle{ margin-left:auto; margin-right:auto; } }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13.5px;
    color:var(--text-dim);
    background:rgba(139,92,246,0.07);
    border:1px solid var(--line);
    padding:8px 14px;
    margin-bottom:22px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  @media (max-width:900px){ .status-pill{ margin-left:auto; margin-right:auto; } }

  .status-dot{
    width:9px; height:9px;
    border-radius:50%;
    background:var(--text-dim);
    flex-shrink:0;
    position:relative;
  }
  .status-dot.online{ background:#7dd6a0; box-shadow:0 0 8px rgba(125,214,160,0.7); }
  .status-dot.online::after{
    content:"";
    position:absolute; inset:-4px;
    border-radius:50%;
    border:1px solid #7dd6a0;
    animation:ping 1.8s ease-out infinite;
  }
  .status-dot.offline{ background:#e07a7a; }

  @keyframes ping{
    0%{ transform:scale(0.7); opacity:0.8; }
    100%{ transform:scale(1.8); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .status-dot.online::after{ animation:none; }
  }

  .status-pill strong{ color:var(--text); font-weight:600; }

  .ip-box{
    display:flex;
    align-items:stretch;
    background:var(--bg-panel);
    border:1px solid var(--line);
    margin-bottom:30px;
    max-width:420px;
  }
  @media (max-width:900px){ .ip-box{ margin-left:auto; margin-right:auto; } }

  .ip-box .ip-label{
    font-family:'Silkscreen', monospace;
    font-size:9px;
    color:var(--text-dim);
    letter-spacing:1px;
    display:block;
    margin-bottom:4px;
  }
  .ip-main{
    flex:1;
    padding:14px 18px;
    border-right:1px solid var(--line);
  }
  .ip-value{
    font-family:'Space Grotesk', monospace;
    font-size:17px;
    font-weight:600;
    color:var(--text);
  }
  .ip-copy{
    width:56px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:none;
    color:var(--accent-2);
    cursor:pointer;
    transition:background 0.15s;
  }
  .ip-copy:hover{ background:rgba(139,92,246,0.12); }
  .ip-copy svg{ width:18px; height:18px; }

  .port-note{
    font-size:13px;
    color:var(--text-dim);
    margin-bottom:34px;
    display:flex;
    gap:8px;
    align-items:center;
  }
  @media (max-width:900px){ .port-note{ justify-content:center; } }
  .port-note .pixel{ color:var(--accent-2); font-size:11px; }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
  @media (max-width:900px){ .cta-row{ justify-content:center; } }

  /* ---------- CRYSTAL ART ---------- */
  .crystal-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .crystal-wrap svg{ width:100%; max-width:420px; height:auto; filter:drop-shadow(0 20px 60px rgba(139,92,246,0.35)); }

  @keyframes pulse-glow{
    0%,100%{ opacity:0.55; }
    50%{ opacity:1; }
  }
  @keyframes drift{
    0%,100%{ transform:translateY(0px); }
    50%{ transform:translateY(-8px); }
  }
  .crystal-glow{ animation:pulse-glow 3.4s ease-in-out infinite; }
  .crystal-shard{ animation:drift 5.5s ease-in-out infinite; transform-origin:center; }
  .crystal-shard.d2{ animation-delay:0.6s; }
  .crystal-shard.d3{ animation-delay:1.2s; }

  @media (prefers-reduced-motion: reduce){
    .crystal-glow, .crystal-shard{ animation:none; }
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{ padding:70px 0; position:relative; z-index:1; }
  .section-head{ margin-bottom:44px; }
  .section-eyebrow{
    font-family:'Silkscreen', monospace;
    font-size:11px;
    color:var(--accent-2);
    letter-spacing:1.5px;
    margin-bottom:10px;
  }
  .section-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:clamp(26px, 3.4vw, 36px);
    font-weight:700;
    letter-spacing:-0.5px;
  }
  .section-sub{
    color:var(--text-dim);
    font-size:15px;
    margin-top:10px;
    max-width:520px;
  }

  /* ---------- JOIN CARDS ---------- */
  .join-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media (max-width:760px){ .join-grid{ grid-template-columns:1fr; } }

  .join-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:32px;
    position:relative;
    overflow:hidden;
  }
  .join-card::before{
    content:"";
    position:absolute;
    top:-40px; right:-40px;
    width:140px; height:140px;
    background:radial-gradient(circle, rgba(139,92,246,0.25), transparent 70%);
  }
  .join-card-head{
    display:flex; align-items:center; gap:12px;
    margin-bottom:20px;
  }
  .join-icon{
    width:38px; height:38px;
    background:linear-gradient(145deg, var(--accent-2), var(--accent-deep));
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    flex-shrink:0;
  }
  .join-card h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:19px;
    font-weight:600;
  }
  .join-card .join-tag{
    font-family:'Silkscreen', monospace;
    font-size:10px;
    color:var(--gold);
    letter-spacing:1px;
    display:block;
    margin-top:2px;
  }
  .join-steps{
    list-style:none;
    counter-reset:step;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .join-steps li{
    counter-increment:step;
    display:flex;
    gap:14px;
    font-size:14.5px;
    color:var(--text-dim);
  }
  .join-steps li::before{
    content:counter(step);
    font-family:'Silkscreen', monospace;
    font-size:11px;
    color:var(--accent-2);
    background:rgba(139,92,246,0.12);
    border:1px solid var(--line);
    width:24px; height:24px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  }
  .join-steps code{
    background:rgba(139,92,246,0.14);
    color:var(--accent-2);
    padding:1px 6px;
    font-size:13px;
    font-family:'Space Grotesk', monospace;
  }

  /* ---------- FEATURES ---------- */
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
  }
  @media (max-width:900px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }

  .feature-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .feature-icon{
    width:38px; height:38px;
    background:linear-gradient(145deg, var(--accent-2), var(--accent-deep));
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    flex-shrink:0;
  }
  .feature-card h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:17px;
    font-weight:600;
  }
  .feature-card p{
    color:var(--text-dim);
    font-size:14px;
  }
  .cmd-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:2px;
  }
  .cmd-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-size:13px;
  }
  .cmd-row code{
    background:rgba(139,92,246,0.14);
    color:var(--accent-2);
    padding:2px 7px;
    font-family:'Space Grotesk', monospace;
    font-size:12.5px;
    white-space:nowrap;
  }
  .cmd-row span{ color:var(--text-dim); }

  /* ---------- RULES ---------- */
  .rules-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  @media (max-width:760px){ .rules-grid{ grid-template-columns:1fr; } }

  .rules-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:30px;
  }
  .rules-card.allowed{ border-top:3px solid #7dd6a0; }
  .rules-card.disallowed{ border-top:3px solid #e07a7a; }

  .rules-card h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:16px;
    font-weight:600;
    letter-spacing:0.3px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .rules-card.allowed h3{ color:#8fe0ac; }
  .rules-card.disallowed h3{ color:#e79999; }

  .rules-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:13px;
  }
  .rules-list li{
    display:flex;
    align-items:flex-start;
    gap:11px;
    font-size:14.5px;
    color:var(--text-dim);
  }
  .rules-list svg{
    flex-shrink:0;
    width:17px; height:17px;
    margin-top:2px;
  }
  .rules-card.allowed .rules-list svg{ color:#7dd6a0; }
  .rules-card.disallowed .rules-list svg{ color:#e07a7a; }

  /* ---------- FAQ ---------- */
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:820px;
  }
  .faq-item{
    background:var(--bg-panel);
    border:1px solid var(--line);
    overflow:hidden;
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:20px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:15.5px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+";
    font-family:'Space Grotesk', sans-serif;
    font-size:20px;
    font-weight:400;
    color:var(--accent-2);
    flex-shrink:0;
    transition:transform 0.2s ease;
    line-height:1;
  }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item[open] summary{ border-bottom:1px solid var(--line); }

  .faq-body{
    padding:4px 24px 22px;
    color:var(--text-dim);
    font-size:14.5px;
  }
  .faq-body p{ margin-bottom:10px; }
  .faq-body p:last-child{ margin-bottom:0; }
  .faq-body code{
    background:rgba(139,92,246,0.14);
    color:var(--accent-2);
    padding:1px 6px;
    font-size:13px;
    font-family:'Space Grotesk', monospace;
  }
  .faq-body ul, .faq-body ol{
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:10px;
  }
  .shop-template{
    background:rgba(139,92,246,0.08);
    border:1px solid var(--line);
    padding:14px 18px;
    margin:10px 0;
    font-family:'Space Grotesk', monospace;
    font-size:13.5px;
    line-height:1.9;
    color:var(--text);
  }
  .faq-note{
    background:rgba(240,194,80,0.07);
    border:1px solid rgba(240,194,80,0.25);
    padding:12px 16px;
    font-size:13.5px;
    color:var(--text-dim);
    margin-top:8px;
  }
  .faq-note strong{ color:var(--gold); }

  /* ---------- CHANGELOG ---------- */
  .changelog-list{
    display:flex;
    flex-direction:column;
    gap:18px;
    max-width:780px;
  }
  .changelog-item{
    display:flex;
    gap:22px;
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:22px 26px;
  }
  @media (max-width:640px){
    .changelog-item{ flex-direction:column; gap:10px; }
  }
  .changelog-date{
    font-family:'Silkscreen', monospace;
    font-size:11px;
    color:var(--text-dim);
    letter-spacing:0.5px;
    white-space:nowrap;
    padding-top:3px;
    flex-shrink:0;
    width:96px;
  }
  .changelog-body{ flex:1; }
  .changelog-tag{
    display:inline-block;
    font-family:'Silkscreen', monospace;
    font-size:9.5px;
    letter-spacing:0.5px;
    padding:4px 9px;
    margin-bottom:10px;
    color:var(--accent-2);
    background:rgba(139,92,246,0.14);
    border:1px solid var(--line);
  }
  .changelog-tag.event{ color:var(--gold); background:rgba(240,194,80,0.1); border-color:rgba(240,194,80,0.3); }
  .changelog-tag.fix{ color:#7dd6a0; background:rgba(125,214,160,0.1); border-color:rgba(125,214,160,0.3); }
  .changelog-item h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:16.5px;
    font-weight:600;
    margin-bottom:6px;
  }
  .changelog-item p{
    color:var(--text-dim);
    font-size:14px;
  }
  .changelog-note{
    max-width:780px;
    font-size:13px;
    color:var(--text-dim);
    opacity:0.75;
    margin-top:18px;
  }

  /* ---------- SOCIALS ---------- */
  .social-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
  }
  @media (max-width:900px){ .social-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .social-grid{ grid-template-columns:1fr; } }

  .social-card{
    background:var(--bg-panel);
    border:1px solid var(--line);
    padding:26px;
    display:flex;
    align-items:center;
    gap:16px;
    transition:border-color 0.2s, transform 0.2s, background 0.2s;
  }
  .social-card:hover{
    border-color:var(--accent-2);
    background:var(--bg-panel-2);
    transform:translateY(-3px);
  }
  .social-icon{
    width:44px; height:44px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(139,92,246,0.12);
    color:var(--accent-2);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .social-icon svg{ width:22px; height:22px; }
  .social-name{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:15.5px;
  }
  .social-handle{
    font-size:13px;
    color:var(--text-dim);
  }

  /* ---------- STORE BAND ---------- */
  .store-band{
    background:linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel));
    border:1px solid var(--line);
    padding:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
  }
  .store-band h3{
    font-family:'Space Grotesk', sans-serif;
    font-size:24px;
    margin-bottom:6px;
  }
  .store-band p{ color:var(--text-dim); font-size:14.5px; max-width:420px; }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:36px 0;
    position:relative; z-index:1;
  }
  footer .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-links{
    display:flex; gap:24px;
    font-size:13.5px;
    color:var(--text-dim);
  }
  .footer-links a:hover{ color:var(--accent-2); }
  .footer-note{
    font-size:12.5px;
    color:var(--text-dim);
    opacity:0.7;
  }