:root{
  --bg:#050611;
  --panel:#0d1020;
  --text:#f7f7fb;
  --muted:#a8abc0;
  --line:rgba(255,255,255,.09);
  --purple:#8b5cf6;
  --blue:#3b82f6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#050611;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1160px,calc(100% - 40px));margin:auto}

/* Animated A4Craft-inspired atmosphere */
.animated-background{
  position:fixed;
  inset:0;
  z-index:-10;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%,rgba(92,64,190,.12),transparent 36%),
    linear-gradient(135deg,#04050d 0%,#070817 45%,#04050d 100%);
}
.animated-background::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 25% 35%,rgba(124,58,237,.22),transparent 23%),
    radial-gradient(circle at 78% 25%,rgba(37,99,235,.20),transparent 24%),
    radial-gradient(circle at 55% 80%,rgba(168,85,247,.13),transparent 22%);
  filter:blur(35px);
  animation:auroraMove 18s ease-in-out infinite alternate;
  transform:translate3d(0,0,0);
}
.gradient-blob{
  position:absolute;
  width:34vw;
  height:34vw;
  min-width:300px;
  min-height:300px;
  border-radius:50%;
  filter:blur(90px);
  opacity:.17;
  mix-blend-mode:screen;
  animation:blobFloat 16s ease-in-out infinite;
}
.blob-1{background:#7c3aed;left:-13vw;top:5vh}
.blob-2{background:#2563eb;right:-12vw;top:28vh;animation-delay:-5s}
.blob-3{background:#a855f7;left:34vw;bottom:-24vw;animation-delay:-9s}
.grid-overlay{
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(139,92,246,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,130,246,.16) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 80%,transparent 100%);
  animation:gridDrift 20s linear infinite;
}
#spaceCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.72;
}
@keyframes auroraMove{
  0%{transform:translate3d(-3%,0,0) scale(1)}
  50%{transform:translate3d(4%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-1%,4%,0) scale(1.03)}
}
@keyframes blobFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(45px,-35px,0) scale(1.12)}
}
@keyframes gridDrift{
  from{background-position:0 0,0 0}
  to{background-position:80px 40px,-40px 80px}
}
.bg-orb{
  position:fixed;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(100px);
  opacity:.10;
  pointer-events:none;
  z-index:-8
}
.orb-a{background:#7c3aed;left:-180px;top:280px}
.orb-b{background:#2563eb;right:-180px;top:680px}

.header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(5,6,17,.62);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:20px;letter-spacing:-.5px}
.brand>span:last-child>span{color:#9b7cff}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 8px 30px rgba(124,58,237,.35)
}
.nav-links{display:flex;gap:28px;color:#b8b9ca;font-size:14px}
.nav-links a{transition:.2s}
.nav-links a:hover{color:#fff}
.tg-btn{
  padding:11px 18px;border:1px solid rgba(139,92,246,.45);border-radius:12px;
  background:rgba(139,92,246,.10);font-weight:700;transition:.2s
}
.tg-btn:hover{background:rgba(139,92,246,.18);transform:translateY(-1px)}

.hero{padding:100px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:80px}
.eyebrow{font-size:11px;letter-spacing:2.5px;color:#9c9fb7;font-weight:800;display:flex;align-items:center;gap:9px}
.eyebrow span{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 0 15px #7c3aed}
h1{font-size:clamp(52px,7vw,88px);line-height:.95;letter-spacing:-4px;margin:20px 0 25px}
h1 strong{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy>p{max-width:610px;color:var(--muted);font-size:18px;line-height:1.7}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 22px}
.primary,.secondary{
  display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  padding:14px 20px;font-weight:800;cursor:pointer;border:0;font-size:14px;transition:.2s
}
.primary{
  color:#fff;background:linear-gradient(135deg,var(--purple),var(--blue));
  box-shadow:0 12px 35px rgba(99,70,230,.28)
}
.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(99,70,230,.38)}
.secondary{color:#eee;background:rgba(255,255,255,.045);border:1px solid var(--line)}
.secondary:hover{background:rgba(255,255,255,.08)}
.server-line{display:flex;align-items:center;gap:10px;color:#d7d8e3;font-size:14px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80}
.version{color:#8e91a7;border-left:1px solid var(--line);padding-left:10px}

.hero-card{
  position:relative;min-height:430px;border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(139,92,246,.15),rgba(10,13,31,.82));
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 35px 100px rgba(0,0,0,.35);
  backdrop-filter:blur(8px)
}
.hero-card::after{
  content:"";position:absolute;inset:0;border-radius:30px;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.06) 50%,transparent 75%);
  transform:translateX(-120%);animation:shine 7s ease-in-out infinite;
}
.card-glow{position:absolute;width:250px;height:250px;background:linear-gradient(135deg,#8b5cf6,#3b82f6);filter:blur(75px);opacity:.25;animation:pulseGlow 5s ease-in-out infinite}
.crystal{font-size:100px;line-height:1;color:#a78bfa;text-shadow:0 0 45px #7c3aed;transform:rotate(45deg);margin-bottom:45px;animation:crystalFloat 4s ease-in-out infinite}
.hero-card-title{font-size:27px;font-weight:950;letter-spacing:4px}
.hero-card-subtitle{margin-top:8px;color:#9b9db3;letter-spacing:3px;font-size:12px}
.hero-card-stat{
  position:absolute;bottom:25px;left:25px;right:25px;padding:15px 18px;
  border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18);
  display:flex;justify-content:space-between;gap:15px;font-size:13px;backdrop-filter:blur(10px)
}
.hero-card-stat span{color:#888ba1}.hero-card-stat b{color:#ddd}
@keyframes crystalFloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-12px)}}
@keyframes pulseGlow{0%,100%{opacity:.18;transform:scale(.92)}50%{opacity:.34;transform:scale(1.1)}}
@keyframes shine{0%,55%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}

.section{padding:90px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:38px}
.section-head h2{font-size:44px;letter-spacing:-2px;margin:12px 0 0}
.section-head>p{max-width:500px;color:var(--muted);line-height:1.6}
.section-head.center{display:block;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center>p{margin:15px auto 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{
  padding:30px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  border-radius:20px;transition:.25s;backdrop-filter:blur(7px)
}
.feature:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.4);background:rgba(255,255,255,.04)}
.feature-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(59,130,246,.16));
  color:#b59cff;font-size:22px
}
.feature h3{margin:22px 0 9px;font-size:19px}.feature p{color:var(--muted);line-height:1.65;margin:0}

.donate-section{background:linear-gradient(180deg,transparent,rgba(139,92,246,.035),transparent)}
.donate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.donate-card{
  position:relative;padding:25px 22px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  overflow:hidden;transition:.25s;backdrop-filter:blur(8px)
}
.donate-card::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--rank-color) 13%,transparent),transparent 55%);
  transition:.25s;pointer-events:none
}
.donate-card:hover::before{opacity:1}
.donate-card:hover{transform:translateY(-6px);border-color:var(--rank-color);box-shadow:0 20px 55px rgba(0,0,0,.25)}
.rank-dot{width:10px;height:10px;border-radius:50%;background:var(--rank-color);box-shadow:0 0 16px var(--rank-color);display:inline-block;margin-right:8px}
.rank{color:var(--rank-color);font-size:20px;font-weight:950;letter-spacing:.3px}
.rank-desc{height:44px;margin-top:10px;color:#9ea1b7;font-size:13px;line-height:1.5}
.price{font-size:27px;font-weight:950;margin:17px 0 16px}.price small{font-size:12px;color:#898ca0;font-weight:600}
.rank-line{height:1px;background:var(--line);margin-bottom:14px}
.perk{color:#c8cad5;font-size:13px;line-height:1.65;margin:6px 0}.perk b{color:var(--rank-color)}
.donate-note{text-align:center;color:#85889e;margin:28px auto 18px;font-size:13px}
.center-actions{text-align:center}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.step{
  display:flex;gap:20px;padding:25px;border:1px solid var(--line);border-radius:18px;
  background:rgba(255,255,255,.025);backdrop-filter:blur(7px)
}
.step>span{font-size:12px;font-weight:900;color:#9b7cff}.step h3{margin:0 0 7px}.step p{margin:0;color:var(--muted);line-height:1.55}
.cta{
  padding:70px 0;background:linear-gradient(100deg,rgba(124,58,237,.13),rgba(37,99,235,.09));
  border-block:1px solid var(--line)
}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{font-size:35px;letter-spacing:-1.5px;margin:12px 0 8px}.cta p{color:var(--muted);margin:0}
.footer{padding:30px 0;color:#777a91;font-size:13px}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer a{color:#aaa}
.toast{
  position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);padding:12px 18px;
  background:#181a30;border:1px solid var(--line);border-radius:12px;opacity:0;
  pointer-events:none;transition:.25s;z-index:30
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1000px){.donate-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){
  .nav-links{display:none}.hero{padding:70px 0}.hero-grid{grid-template-columns:1fr;gap:45px}
  h1{letter-spacing:-3px}.hero-card{min-height:340px}.feature-grid,.steps{grid-template-columns:1fr}
  .section-head{display:block}.section-head>p{margin-top:15px}.cta-inner{display:block}.cta .primary{margin-top:25px}
}
@media(max-width:560px){
  .container{width:min(100% - 26px,1160px)}.donate-grid{grid-template-columns:1fr}.nav{height:66px}
  .tg-btn{padding:9px 13px}.hero{padding:55px 0}.hero-copy>p{font-size:16px}h1{font-size:52px}
  .hero-actions>*{width:100%}.hero-card-stat{display:block}.hero-card-stat b{display:block;margin-top:6px}
  .section{padding:65px 0}.section-head h2{font-size:36px}.footer-inner{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}