@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#07080c;
  --bg2:#0b0d13;
  --card:#10131b;
  --card2:#141823;
  --line:#242a38;
  --txt:#f5f7fb;
  --muted:#929aaa;
  --accent:#7c6cff;
  --accent2:#31d7ff;
  --accent3:#b56cff;
  --glow:rgba(124,108,255,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--txt);
  font-family:"DM Sans",sans-serif;
  background:
    radial-gradient(circle at 15% -10%,rgba(124,108,255,.16),transparent 30%),
    radial-gradient(circle at 85% 8%,rgba(49,215,255,.09),transparent 25%),
    var(--bg);
}
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.035;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}
a{color:inherit;text-decoration:none}
header{
  height:78px;max-width:1240px;margin:auto;padding:0 26px;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:5;
}
.brand{font:700 21px "Space Grotesk";letter-spacing:-.03em}
.brand:first-letter{filter:drop-shadow(0 0 12px var(--accent))}
nav{display:flex;gap:30px;color:#aab1bf;font-size:14px}
nav a{transition:.2s}nav a:hover{color:#fff}
.pill,.btn{
  border-radius:999px;padding:12px 18px;font-weight:700;
  border:1px solid #ffffff12;
  background:linear-gradient(135deg,var(--accent),#5b4be6);
  color:#fff;box-shadow:0 10px 35px var(--glow);
}
.btn{display:inline-flex;align-items:center;gap:8px}
.ghost{background:#ffffff05;color:#fff;box-shadow:none;border-color:var(--line)}
.hero{
  max-width:1240px;min-height:700px;margin:auto;padding:75px 26px 95px;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:55px;
}
.hero small,section>small,.split small,main.legal small,.maintenance small,.loginbox small{
  color:#9da6ba;letter-spacing:.2em;font-weight:700;font-size:10px
}
.hero h1{
  font:700 clamp(56px,8vw,100px)/.92 "Space Grotesk";
  letter-spacing:-.065em;margin:20px 0;
}
.hero em{
  font-style:normal;
  background:linear-gradient(100deg,#fff,var(--accent2) 42%,var(--accent3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p,.split>p,article p,details p,.legal p{
  color:var(--muted);line-height:1.8;font-size:17px;max-width:650px
}
.actions{display:flex;gap:12px;margin-top:30px}
.hero-art{height:500px;display:grid;place-items:center;position:relative}
.orb{
  width:370px;height:370px;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#ffffff 0 1%,transparent 2%),
    radial-gradient(circle at 30% 25%,#8b7cff,transparent 32%),
    radial-gradient(circle at 65% 70%,#25d6ff,transparent 42%),
    linear-gradient(145deg,#17152d,#090b12 68%);
  box-shadow:0 0 100px rgba(124,108,255,.22),inset 0 0 80px rgba(49,215,255,.08);
  position:relative;
  animation:float 6s ease-in-out infinite;
}
.orb:after{
  content:"";position:absolute;inset:-35px;border-radius:50%;
  border:1px solid rgba(124,108,255,.2);
  box-shadow:0 0 55px rgba(124,108,255,.12);
}
@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}
.float{
  position:absolute;right:2px;bottom:55px;
  background:rgba(15,18,27,.82);border:1px solid #ffffff12;
  border-radius:18px;padding:18px 20px;backdrop-filter:blur(18px);
  box-shadow:0 18px 50px #0008
}
.float span{display:block;color:var(--accent2);font-size:10px;margin-top:4px;letter-spacing:.12em}
.split,section:not(.hero){
  max-width:1240px;margin:auto;padding:110px 26px;border-top:1px solid var(--line)
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.split h2,h2{
  font:700 clamp(38px,5vw,62px)/1 "Space Grotesk";
  letter-spacing:-.05em;margin:15px 0
}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
article{
  background:linear-gradient(145deg,#11141c,#0d1016);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:.25s;box-shadow:0 12px 45px #0003
}
article:hover{transform:translateY(-5px);border-color:#4a466b;box-shadow:0 20px 65px #0006}
.thumb{
  height:270px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#292449,#11131b 65%);
  font-size:70px
}
.thumb img{width:100%;height:100%;object-fit:cover}
.body{padding:25px}.body small{font-size:10px;color:#8f98aa}
.body h3{font:700 28px "Space Grotesk";margin:9px 0}
.body a{color:var(--accent2);font-weight:700}
.socials{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:38px}
.socials a{
  background:linear-gradient(145deg,#11141c,#0d1016);
  border:1px solid var(--line);border-radius:16px;padding:20px;
  display:flex;gap:15px;align-items:center;transition:.2s
}
.socials a:hover{border-color:#4a466b;transform:translateY(-3px)}
.socials span{color:var(--muted);flex:1}
.socials b{font-size:16px}
details{border-top:1px solid var(--line);padding:22px 0}
summary{display:flex;justify-content:space-between;cursor:pointer;font-weight:700}
summary b{color:var(--accent2)}
footer{
  max-width:1240px;margin:auto;border-top:1px solid var(--line);
  padding:40px 26px 60px;display:flex;justify-content:space-between;color:var(--muted)
}
.legal{min-height:70vh}
.login,.maintenance{min-height:100vh;display:grid;place-items:center}
.loginbox{
  width:min(440px,92%);background:linear-gradient(145deg,#12151e,#0c0f15);
  border:1px solid var(--line);padding:40px;border-radius:25px;box-shadow:0 30px 100px #0008
}
.loginbox input,.loginbox button{
  width:100%;margin:8px 0;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:#080a0e;color:white
}
.loginbox button{background:linear-gradient(135deg,var(--accent),#5b4be6);font-weight:700}
.bear{font-size:75px;filter:drop-shadow(0 0 25px rgba(124,108,255,.3))}
.maintenance{text-align:center;max-width:700px;margin:auto}
.maintenance h1{font:700 52px "Space Grotesk"}
.maintenance p{color:var(--muted);line-height:1.8}
@media(max-width:800px){
 nav{display:none}.hero{grid-template-columns:1fr;padding-top:35px}
 .hero-art{order:-1;height:310px}.orb{width:245px;height:245px}
 .split,.grid,.socials{grid-template-columns:1fr}
 footer{display:block}footer div{margin-top:12px}
}

.thumb img{display:block;width:100%;height:100%;object-fit:contain;padding:55px;filter:drop-shadow(0 18px 35px rgba(0,0,0,.35));}.thumb{overflow:hidden;position:relative}.thumb:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,rgba(0,0,0,.35));pointer-events:none}.thumb img{position:relative;z-index:1}