:root{
  --bg:#0b0612;--accent:#c43cff;--accent-2:#7c3aed;--text:#ece9f1;--muted:#b8a8c9;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text);
  background: #0b0612 url('./bg.png') center/cover fixed no-repeat;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg,rgba(10,6,18,.9),rgba(10,6,18,.4));backdrop-filter:blur(6px);border-bottom:1px solid rgba(196,60,255,.2)}
.bg{content:""}
.header-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px;gap:8px}
.brand{display:flex;align-items:center;gap:10px}
.brand.small .brand-name{font-size:16px}
.brand-name{font-weight:800;letter-spacing:.2px}
.brand-name span{color:var(--accent)}
.brand-mark{width:28px;height:28px;filter:drop-shadow(0 0 10px rgba(196,60,255,.3))}
.nav{display:flex;align-items:center}
.nav a{color:#fff;text-decoration:none;margin-left:18px;opacity:.9}
.nav a:hover{opacity:1}
.lang{margin-left:6px;border:1px solid rgba(196,60,255,.3);background:rgba(124,58,237,.15);color:#fff;border-radius:10px;height:40px;padding:0 10px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.card{display:flex;align-items:center;gap:12px;border:1px solid rgba(196,60,255,.2);background:linear-gradient(180deg,rgba(20,12,35,.5),rgba(20,12,35,.35));border-radius:16px;padding:12px;transition:transform .2s ease, background .2s}
.card:hover{transform:translateY(-2px);background:rgba(20,12,35,.6)}
.emoji{font-size:22px}
.card-body h3{margin:0 0 4px}
.faq-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.faq-card{border:1px solid rgba(196,60,255,.25);background:linear-gradient(180deg,rgba(20,12,35,.5),rgba(20,12,35,.35));border-radius:18px;padding:18px}
.faq-emoji{font-size:22px;margin-bottom:6px}
.hamburger{display:none;position:relative;width:40px;height:40px;border:1px solid rgba(196,60,255,.3);border-radius:10px;background:rgba(124,58,237,.15)}
.hamburger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:26px}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-block;border:1px solid rgba(196,60,255,.3);padding:10px 16px;border-radius:12px;color:#fff;text-decoration:none;background:rgba(124,58,237,.15)}
.btn:hover{background:rgba(124,58,237,.25)}
.btn-primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));border-color:transparent}
.btn-primary:hover{filter:brightness(1.1)}
.btn-secondary{background:rgba(255,255,255,.08)}

.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg .bg{width:100%;height:100%;object-fit:cover;opacity:.35}
.hero-bg .glow{position:absolute;inset:auto -20% -20% -20%;height:60vh;background:radial-gradient(50% 50% at 50% 50%,rgba(196,60,255,.35),rgba(196,60,255,0));filter:blur(40px)}
.hero-content{padding:96px 20px 72px}
.hero h1{font-size:44px;line-height:1.08;margin:0 0 12px}
.lead{font-size:18px}
.grad{background:linear-gradient(90deg,var(--accent),#9b5cf1);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:720px;color:#e8dcffb3}
.cta{display:flex;gap:12px;margin-top:18px}
.hero-3d{pointer-events:none;position:absolute;inset:0;z-index:0}
.logo-light{position:absolute;right:6%;top:8%;width:520px;height:520px;border-radius:50%;filter:blur(50px);opacity:.25;background:radial-gradient(closest-side, rgba(196,60,255,.55), rgba(196,60,255,0));transform:translateZ(0)}
.logo-3d{position:absolute;right:4%;top:6%;width:360px;max-width:46vw;opacity:.25;filter:blur(0.2px) drop-shadow(0 30px 60px rgba(124,58,237,.35))}
.logo-layer{display:block;width:100%;height:auto;position:absolute;left:0;top:0}
.logo-layer path{fill:#ffffff}
.logo-3d,.logo-layer{will-change:transform}
.logo-layer.l1{transform:translateZ(0)}
.logo-layer.l2{transform:translate(10px,8px);filter:blur(1px);opacity:.7}
.logo-layer.l3{transform:translate(20px,16px);filter:blur(2px);opacity:.45}

.section{padding:72px 0}
.section.alt{background:transparent}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.panel{border:1px solid rgba(196,60,255,.2);background:rgba(20,12,35,.5);border-radius:18px;padding:20px}
.bullets{margin:14px 0;padding-left:18px}
.bullets li{margin:6px 0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.card{display:flex;align-items:center;gap:12px;border:1px solid rgba(196,60,255,.2);background:rgba(20,12,35,.5);border-radius:16px;padding:12px;transition:transform .2s ease, background .2s}
.card:hover{transform:translateY(-2px);background:rgba(20,12,35,.6)}
.emoji{font-size:22px}
.card-body h3{margin:0 0 4px}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step-card{border:1px solid rgba(196,60,255,.25);background:rgba(20,12,35,.5);border-radius:18px;padding:18px;transition:transform .2s ease, box-shadow .2s}
.step-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(124,58,237,.18)}
.step-emoji{font-size:24px;margin-bottom:6px}

details{border:1px solid rgba(196,60,255,.2);background:rgba(20,12,35,.5);border-radius:12px;padding:12px;margin:10px 0}
summary{cursor:pointer}

.site-footer{border-top:1px solid rgba(196,60,255,.2);padding:24px 0;background:rgba(10,6,18,.6);backdrop-filter:blur(6px)}
.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot-nav a{margin-left:14px;color:#fff;text-decoration:none;opacity:.8}
.copy{opacity:.8;font-size:14px}

@media (max-width: 960px){
  .two-col{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:12px}
  .faq-cards{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .logo-3d{position:absolute;right:2%;top:10%;width:280px;max-width:60vw;opacity:.2}
  .nav{position:absolute;top:60px;right:8px;left:8px;flex-direction:column;background:rgba(20,12,35,.94);backdrop-filter:blur(8px);border:1px solid rgba(196,60,255,.25);border-radius:12px;padding:12px;display:none}
  .nav.open{display:flex}
  .nav a{margin:8px 6px}
  .hamburger{display:block}
  .cta{flex-direction:column;width:100%;max-width:360px}
}
@media (max-width: 640px){
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .faq-cards{grid-template-columns:1fr}
  .header-wrap{height:56px;padding:0 8px}
}