@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:    #060414;
  --bg1:   #0a0818;
  --bg2:   #0e0c20;
  --bg3:   #131128;
  --p:     #8b5cf6;
  --p-l:   #a78bfa;
  --p-d:   #6d28d9;
  --c:     #06b6d4;
  --c-l:   #22d3ee;
  --grad:  linear-gradient(135deg,#8b5cf6,#06b6d4);
  --online:#10b981;
  --red:   #ef4444;
  --gold:  #f59e0b;
  --tx0:   #f1f0ff;
  --tx1:   #b8b4d8;
  --tx2:   #6b6890;
  --tx3:   #3d3960;
  --border:rgba(139,92,246,.15);
  --border2:rgba(139,92,246,.28);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--tx0); font-family:'Inter',sans-serif; overflow-x:hidden; line-height:1.5; }
a { text-decoration:none; color:inherit; }
button { font-family:'Inter',sans-serif; cursor:pointer; border:none; }
input,textarea,select { font-family:'Inter',sans-serif; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:rgba(139,92,246,.3); border-radius:2px; }

.grad-text { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hidden { display:none !important; }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,60px);
  background:rgba(6,4,20,.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
nav::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--grad); opacity:.2;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:900;
}
.nav-logo-icon { width:32px; height:32px; flex-shrink:0; }
.nav-logo-text { color:var(--tx0); }
.nav-logo-text b { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:13px; font-weight:500; color:var(--tx2); transition:color .15s; }
.nav-links a:hover { color:var(--tx0); }
.nav-actions { display:flex; align-items:center; gap:10px; }
.btn-nav-login {
  padding:7px 18px; border-radius:8px;
  background:transparent; border:1px solid var(--border2);
  color:var(--tx0); font-size:13px; font-weight:600; transition:all .15s;
}
.btn-nav-login:hover { background:rgba(139,92,246,.1); }
.btn-nav-register {
  padding:7px 18px; border-radius:8px;
  background:var(--grad); color:#fff;
  font-size:13px; font-weight:700;
  box-shadow:0 4px 16px rgba(139,92,246,.35); transition:all .2s;
}
.btn-nav-register:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(139,92,246,.5); }

/* FOOTER */
footer {
  border-top:1px solid var(--border);
  padding:50px clamp(20px,5vw,60px) 30px;
}
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand { }
.footer-logo { display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:900; margin-bottom:14px; }
.footer-logo b { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-desc { font-size:13px; color:var(--tx2); line-height:1.7; max-width:260px; }
.footer-col-title { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--tx3); margin-bottom:14px; }
.footer-col a { display:block; font-size:13px; color:var(--tx2); margin-bottom:8px; transition:color .15s; }
.footer-col a:hover { color:var(--tx0); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:12px; color:var(--tx3); }
.footer-socials { display:flex; gap:12px; }
.fs-link { width:32px; height:32px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .15s; }
.fs-link:hover { border-color:var(--border2); background:rgba(139,92,246,.1); }

/* BUTTONS */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:10px;
  background:var(--grad); color:#fff;
  font-size:14px; font-weight:700;
  box-shadow:0 6px 24px rgba(139,92,246,.4); transition:all .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(139,92,246,.55); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 28px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--tx0); font-size:14px; font-weight:600; transition:all .2s;
}
.btn-secondary:hover { background:rgba(139,92,246,.1); border-color:var(--border2); }
.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:8px;
  background:transparent; border:1px solid var(--border2);
  color:var(--p-l); font-size:13px; font-weight:600; transition:all .2s;
}
.btn-outline:hover { background:rgba(139,92,246,.1); }

/* FORM ELEMENTS */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--tx2); margin-bottom:6px; }
.form-input {
  width:100%; background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; padding:11px 14px; font-size:13px; color:var(--tx0); outline:none;
  transition:all .2s;
}
.form-input:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(139,92,246,.1); }
.form-input::placeholder { color:var(--tx3); }

/* SECTION */
.section { padding:90px clamp(20px,5vw,60px); max-width:1200px; margin:0 auto; }
.sec-eyebrow { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--p-l); margin-bottom:12px; }
.sec-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(26px,4vw,44px); font-weight:800; line-height:1.15; margin-bottom:14px; }
.sec-sub { font-size:15px; color:var(--tx1); line-height:1.7; max-width:500px; }

@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)} }
@keyframes glow { 0%,100%{box-shadow:0 0 20px rgba(139,92,246,.3)}50%{box-shadow:0 0 40px rgba(139,92,246,.6)} }

@media(max-width:768px){
  .nav-links { display:none; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .footer-top { grid-template-columns:1fr; }
}