:root{
  --bg:#050b16;
  --bg2:#081326;
  --panel:#071222;
  --panel2:#09182f;
  --ink:#f5f7fb;
  --muted:#a8b2c8;
  --line:rgba(110,146,212,.16);
  --gold:#e0b44c;
  --gold-d:#b88d28;
  --cyan:#1ee7ff;
  --pink:#ff3aa9;
  --violet:#8f4dff;
  --shadow:0 28px 80px rgba(0,0,0,.42);
  --radius:28px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(143,77,255,.14), transparent 22%),
    radial-gradient(circle at top right, rgba(30,231,255,.10), transparent 24%),
    linear-gradient(180deg, #040812 0%, #08111f 48%, #09152a 100%);
  overflow-x:hidden;
}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}

.glow{
  position:fixed; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; opacity:.34;
}
.glow-a{
  width:280px; height:280px; background:rgba(143,77,255,.16); top:80px; right:-40px;
}
.glow-b{
  width:260px; height:260px; background:rgba(30,231,255,.10); bottom:100px; left:-20px;
}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(4,8,18,.78);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(110,146,212,.12);
}
.nav{
  min-height:84px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand img{width:48px; height:48px}
.brand strong{
  display:block;
  font-family:Manrope, Inter, sans-serif;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.brand span{color:var(--muted); font-size:.9rem}
.nav-links{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.nav-links a:not(.btn){color:var(--muted); font-weight:500}
.nav-links a:not(.btn):hover{color:#fff}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 20px; border-radius:999px;
  font-weight:800; transition:.2s ease; border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, var(--gold), #f1cc71);
  color:#08101a;
  box-shadow:0 18px 40px rgba(224,180,76,.18);
}
.btn-outline{
  background:rgba(255,255,255,.03);
  border-color:rgba(110,146,212,.18);
  color:#fff;
}

.hero{padding:78px 0 34px; position:relative; z-index:1}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;
}
.eyebrow,.section-kicker{
  display:inline-flex; align-items:center;
  padding:9px 14px; border-radius:999px;
  border:1px solid rgba(110,146,212,.16);
  background:rgba(255,255,255,.03);
  color:#dce4f5; font-size:.84rem; font-weight:700; letter-spacing:.03em;
}
.hero h1,.section h2,.cta-box h2{
  font-family:Manrope, Inter, sans-serif;
  line-height:.96; letter-spacing:-.04em;
}
.hero h1{
  margin:16px 0 14px;
  font-size:clamp(2.8rem, 6vw, 5.4rem);
  max-width:11ch;
}
.hero p,.section-copy,.panel p,details p,.footer-wrap p{color:var(--muted); line-height:1.72}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 24px}
.hero-tags{display:flex; gap:12px; flex-wrap:wrap}
.hero-tags span{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(110,146,212,.16);
  color:#dbe4f7;
  font-size:.9rem;
  font-weight:600;
}

.hero-card,.panel,.design-card,details,.cta-box{
  background:linear-gradient(180deg, rgba(7,18,34,.92), rgba(9,24,47,.94));
  border:1px solid rgba(110,146,212,.14);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-card{padding:18px}
.hero-card img{border-radius:22px; width:100%; height:auto}

.ticker{padding:8px 0 14px; position:relative; z-index:1}
.ticker-row{display:flex; flex-wrap:wrap; gap:12px}
.ticker-row span{
  padding:12px 15px;
  border-radius:999px;
  border:1px solid rgba(110,146,212,.16);
  background:rgba(255,255,255,.03);
  color:#ecf2ff;
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.08em;
}

.section{padding:56px 0; position:relative; z-index:1}
.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:20px;
  margin-bottom:28px;
}
.section h2{
  font-size:clamp(2.1rem, 4vw, 3.5rem);
  margin:14px 0 0;
}
.section-copy{max-width:58ch}

.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.design-card{overflow:hidden}
.design-card img{
  width:100%;
  aspect-ratio:0.78;
  object-fit:cover;
  border-bottom:1px solid rgba(110,146,212,.14);
}
.card-body{padding:20px}
.card-body h3{margin:0 0 10px; font-size:1.22rem}
.card-body p{margin:0; color:var(--muted)}

.split-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;
}
.panel{padding:30px}
.mini-grid{
  margin-top:22px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.mini-grid div{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(110,146,212,.14);
  background:rgba(255,255,255,.025);
}
.mini-grid strong{display:block; margin-bottom:8px}
.mini-grid span{color:var(--muted); line-height:1.6}
.image-panel{display:flex; align-items:center; justify-content:center}

.faq-list{display:grid; gap:14px}
details{padding:18px 20px}
summary{cursor:pointer; font-weight:800}
details p{margin:12px 0 0}

.cta-box{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:30px;
  background:
    radial-gradient(circle at top right, rgba(143,77,255,.10), transparent 26%),
    radial-gradient(circle at left, rgba(30,231,255,.08), transparent 22%),
    linear-gradient(180deg, rgba(7,18,34,.94), rgba(9,24,47,.98));
}
.cta-box h2{
  font-size:clamp(1.9rem, 4vw, 3.1rem);
  margin:10px 0 0;
}

.site-footer{
  padding:24px 0 40px;
  border-top:1px solid rgba(110,146,212,.12);
  position:relative; z-index:1;
}
.footer-wrap{
  display:flex; justify-content:space-between; gap:20px; align-items:start; flex-wrap:wrap;
}
.footer-wrap strong{display:block; margin-bottom:6px}
.footer-note{max-width:38ch; color:var(--muted)}

@media (max-width: 980px){
  .hero-grid,.card-grid,.split-grid{grid-template-columns:1fr}
  .section-head{align-items:start; flex-direction:column}
}
@media (max-width: 720px){
  .nav{padding:12px 0; flex-direction:column; align-items:start}
  .hero{padding-top:42px}
  .hero h1{max-width:none}
  .mini-grid{grid-template-columns:1fr}
  .cta-box{flex-direction:column; align-items:start}
}