/* base.css: fonts, colour tokens and the pieces every page shares.
   Fonts are served from this site (no third-party requests). */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/poppins-500.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/poppins-800.woff2") format("woff2")}

:root{
  --bg:#000000; --bg2:#070614; --card:#121212; --card2:#0F111A; --field:#070614;
  --cyan:#00F3FF; --green:#00C896; --purple:#9E00FF; --violet:#B500FF; --pink:#FF00FF;
  --text:#FEFEFE; --mute:#B4BAC6;
  --line:#262B3F;            /* quiet dividers */
  --line-strong:#69718F;     /* edges of inputs: 3:1 against the cards */
  --grad:linear-gradient(90deg,#00C896 0%,#9E00FF 100%);      /* big decorative type only */
  --grad-btn:linear-gradient(90deg,#008562 0%,#8A00E0 100%);  /* buttons: white text keeps 4.5:1 across it */
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;         /* native menus, pickers and scrollbars follow the dark theme on every system */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; text-transform:uppercase; line-height:1.15; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
option,optgroup{background:#0B0D1C; color:#FEFEFE}   /* the open list of a select, on Windows too */
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.center{text-align:center}
.left{text-align:left}

/* nav */
.nav{position:sticky; top:0; z-index:20; background:rgba(5,5,10,.86); backdrop-filter:blur(10px); border-bottom:1px solid #14172a}
.nav-in{display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:16px}
.logo{min-height:44px; font-weight:800; font-size:22px; text-transform:uppercase; text-decoration:none; display:flex; align-items:center; letter-spacing:.01em}
.logo i{display:inline-block; width:20px; height:20px; border-radius:50%; background:var(--green); box-shadow:12px 6px 0 -2px var(--purple); margin-right:24px}
.nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0; align-items:center}
.nav ul a{text-decoration:none; font-weight:500; padding:12px 2px}
.nav ul a.btn{padding:11px 22px; font-weight:700}
@media (hover:hover){ .nav ul a:not(.btn):hover{color:var(--green)} }

/* buttons */
.btn{
  display:inline-block; font-weight:700; text-transform:uppercase; text-decoration:none; cursor:pointer; text-align:center;
  border-radius:40px; padding:14px 28px; font-size:15px; letter-spacing:.02em; line-height:1.2;
  border:1.6px solid transparent; color:#fff; background:none;
  transition:transform .12s ease-out, box-shadow .2s ease, background-color .2s ease;
}
.btn:active{transform:scale(.97)}
.btn-grad{background:var(--grad-btn); position:relative; overflow:hidden; isolation:isolate}
.btn-grad::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%); transform:translateX(-120%); animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(-120%)} 100%{transform:translateX(120%)}}
.glow{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(158,0,255,0), 0 6px 22px -10px rgba(0,200,150,.7)} 50%{box-shadow:0 0 0 6px rgba(158,0,255,.16), 0 10px 34px -6px rgba(158,0,255,.9)}}
.btn-line{border-color:var(--cyan); color:var(--cyan)}
.btn-sm{padding:11px 20px; font-size:13px}
.btn-lg{font-size:19px; padding:20px 44px}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55; cursor:not-allowed; pointer-events:none}
@media (hover:hover){
  .btn-grad:hover{box-shadow:0 10px 36px -8px rgba(158,0,255,.85)}
  .btn-line:hover{background-color:rgba(0,243,255,.1)}
}

/* neon card */
.neon{background:var(--card); border:1.6px solid var(--cyan); border-radius:16px; padding:26px; position:relative}

footer{border-top:1px solid var(--line); padding:44px 0; color:var(--mute); font-size:14.5px; background:var(--bg)}
footer .wrap{display:flex; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; align-items:center}
footer nav{display:flex; gap:24px; flex-wrap:wrap}
footer a{color:#fff}

@media (max-width:860px){ .nav ul li.opt{display:none} .wrap{padding:0 20px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} .glow,.btn-grad::after{animation:none} }