/* CyberXG — main stylesheet */
/* Lexend, self-hosted (SIL Open Font License, see assets/fonts/Lexend-OFL.txt) */
@font-face{font-family:'Lexend';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/lexend-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  color-scheme: dark;
  --midnight:#070B18; --navy:#111C44; --electric:#2D4BFF; --electric-deep:#2440E8;
  --azure:#1F8CFF; --cyan:#18D6F2; --ice:#F4F6FB; --text:#F4F6FB; --muted:#AAB5CF;
  --faint:#6F7C9E; --line:rgba(170,181,207,.16); --field:#0C1330;
}
*{box-sizing:border-box}
html{background:var(--midnight)}
body{margin:0;background:var(--midnight);color:var(--text);font:400 17px/1.6 'Lexend','Segoe UI',system-ui,sans-serif;
  padding-inline:clamp(16px,5vw,64px);min-height:100%;position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(150,175,255,.08) 1.4px,transparent 1.7px);background-size:32px 32px}
.wrap{max-width:1180px;margin-inline:auto;position:relative}
.streak-layer{position:absolute;inset:0 calc(-1*clamp(16px,5vw,64px));overflow:hidden;pointer-events:none;z-index:0}
.streaks{position:absolute;inset:0;width:100%;height:100%;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-18px,14px)}to{transform:translate(18px,-14px)}}
header.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:28px 8px;position:relative;z-index:1}
main{overflow-x:clip}
.brand-logo{display:block;width:min(230px,52vw);height:auto}
.domain{font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;
  padding-block:clamp(32px,7vw,88px) clamp(40px,6vw,72px);position:relative;z-index:1}
.status{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);background:rgba(17,28,68,.55)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(24,214,242,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(24,214,242,.55)}70%{box-shadow:0 0 0 10px rgba(24,214,242,0)}100%{box-shadow:0 0 0 0 rgba(24,214,242,0)}}
h1{font-weight:800;font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.04;letter-spacing:-.025em;margin:22px 0 0;text-wrap:balance;max-width:14ch}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--electric),var(--azure) 55%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);max-width:56ch;margin:22px 0 0}
.signup{margin-top:34px;max-width:520px}
.signup label{display:block;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:10px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row input{flex:1 1 240px;min-width:0;height:54px;padding:0 18px;border-radius:12px;border:1px solid rgba(170,181,207,.28);
  background:var(--field);color:var(--text);font:inherit;font-size:1rem}
.row input::placeholder{color:var(--faint)}
.row input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-color:transparent}
.row button{height:54px;padding:0 26px;border:0;border-radius:12px;background:var(--electric);color:#fff;font:inherit;font-weight:700;
  font-size:1rem;cursor:pointer;transition:background .2s ease}
.row button:hover{background:var(--electric-deep)}
.row button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.row button[disabled]{opacity:.7;cursor:progress}
.note{margin:12px 0 0;font-size:.9rem;color:var(--faint);min-height:1.5em}
.note.ok{color:var(--cyan)} .note.err{color:#FFB4A8}
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:30px}
.follow span.lbl{font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.follow a{display:inline-flex;align-items:center;gap:6px;color:var(--ice);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(24,214,242,.45);padding-block:4px}
.follow a:hover{color:var(--cyan)}
.follow a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:2px}
.follow a[aria-disabled="true"]{color:var(--faint);border-bottom-color:var(--line);pointer-events:none}
.follow a small{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.visual{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:100%}
.visual::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(31,79,255,.42) 0%,rgba(31,79,255,.12) 45%,rgba(31,79,255,0) 70%)}
.visual .ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(170,181,207,.14)}
.visual .ring.r2{inset:16%;border:1.5px dashed rgba(24,214,242,.35);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-mark{position:relative;width:74%;height:auto;display:block;filter:drop-shadow(0 12px 40px rgba(31,140,255,.35))}
.coming{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:40px 56px}
.coming h2{font-size:.8rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.topic{padding:4px 28px 4px 0;display:flex;flex-direction:column;gap:8px}
.topic + .topic{padding-left:28px;border-left:1px solid var(--line)}
.topic .tag{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.topic h3{margin:0;font-size:1.12rem;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.topic p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
footer{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);
  padding-block:22px 34px;color:var(--faint);font-size:.85rem}
footer b{font-weight:500;letter-spacing:.2em;text-transform:uppercase;font-size:.75rem}
@media (max-width:980px){
  .topics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .topic:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .visual{position:absolute;right:-12%;top:-4%;width:min(78vw,420px);opacity:.28;z-index:-1}
  .visual .ring{display:none}
  .domain{display:none}
}
@media (max-width:560px){
  .topics{grid-template-columns:minmax(0,1fr)}
  .topic,.topic + .topic{padding:0 0 22px;border-left:0;border-bottom:1px solid var(--line)}
  .topic:last-child{border-bottom:0;padding-bottom:0}
  .row button{flex:1 1 100%}
  .follow span.lbl{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.streaks,.status i,.visual .ring.r2{animation:none}}
/* Spam trap: hidden from people, visible to bots */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.privacy{margin:4px 0 0;font-size:.8rem;color:var(--faint)}