:root{
  --bg:#080613;
  --bg2:#0d0820;
  --card:rgba(255,255,255,.075);
  --card2:rgba(255,255,255,.105);
  --line:rgba(255,255,255,.14);
  --text:#f7f3ff;
  --muted:#bdb1d7;
  --muted2:#81769a;
  --primary:#b45cff;
  --secondary:#22d3ee;
  --pink:#ff5cc8;
  --gold:#ffd087;
  --green:#6ee7b7;
  --shadow:0 24px 80px rgba(0,0,0,.45);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(180,92,255,.25), transparent 35%),
    radial-gradient(circle at 88% 20%, rgba(34,211,238,.16), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255,92,200,.12), transparent 30%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}
.noise{
  pointer-events:none;
  position:fixed; inset:0; z-index:-1;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.aurora{position:fixed; width:36vw; height:36vw; border-radius:50%; filter:blur(70px); opacity:.25; z-index:-2}
.aurora-a{top:12%; left:-12%; background:var(--primary)}
.aurora-b{right:-12%; bottom:10%; background:var(--secondary)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,56px);
  backdrop-filter: blur(24px);
  background:linear-gradient(180deg,rgba(8,6,19,.86),rgba(8,6,19,.45));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex; gap:12px; align-items:center}
.brand-mark{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(180,92,255,.95), rgba(34,211,238,.72));
  box-shadow:0 0 28px rgba(180,92,255,.45);
  font-weight:900;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text b{font-size:18px}
.brand-text small{color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.nav{display:flex; gap:22px; align-items:center; color:var(--muted); font-size:14px}
.nav a:hover{color:var(--text)}
.nav-toggle{display:none; border:0; background:var(--card); color:var(--text); border-radius:14px; padding:10px 12px; font-size:18px}
.section{padding:96px clamp(18px,5vw,72px)}
.hero{
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,560px);
  gap:56px;
  align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:#e9d5ff;
  border:1px solid rgba(180,92,255,.35);
  background:rgba(180,92,255,.12);
  border-radius:999px;
  padding:8px 12px;
  font-size:13px;
  margin-bottom:22px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--secondary); box-shadow:0 0 14px var(--secondary)}
h1,h2,h3,p{margin-top:0}
h1{
  font-size:clamp(44px,7vw,86px);
  line-height:.96;
  letter-spacing:-.06em;
  margin-bottom:26px;
}
h2{
  font-size:clamp(30px,4vw,54px);
  line-height:1.05;
  letter-spacing:-.045em;
  margin-bottom:18px;
}
h3{font-size:22px; letter-spacing:-.02em}
.lead{font-size:19px; color:var(--muted); line-height:1.8; max-width:760px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:34px 0}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:14px 22px;
  font-weight:800; border:1px solid var(--line);
  transition:.25s ease; cursor:pointer;
}
.btn-primary{
  color:#080613;
  background:linear-gradient(135deg,#fff,#e9d5ff 35%,#67e8f9);
  box-shadow:0 16px 38px rgba(180,92,255,.26), inset 0 0 0 1px rgba(255,255,255,.55);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 52px rgba(34,211,238,.22), 0 16px 38px rgba(180,92,255,.28)}
.btn-secondary,.btn-outline{
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.btn-secondary:hover,.btn-outline:hover{background:rgba(255,255,255,.12); transform:translateY(-2px)}
.full{width:100%}
.metrics{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:30px; max-width:680px}
.metrics div{
  padding:16px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.05)
}
.metrics b{display:block; font-size:28px}
.metrics span{display:block; color:var(--muted); font-size:13px}
.glass-card{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.hero-visual{position:relative; padding:14px; transform:rotate(1deg)}
.hero-visual img{border-radius:22px; aspect-ratio:4/5; object-fit:cover}
.floating-card{
  position:absolute; padding:14px 16px; border-radius:18px;
  background:rgba(8,6,19,.78); border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  max-width:250px;
}
.floating-card b{display:block; margin-bottom:6px}
.floating-card span{color:var(--muted); font-size:13px; line-height:1.5}
.f1{top:8%; left:-28px}
.f2{right:-24px; bottom:8%}
.strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-top:0;
}
.strip-item{
  border:1px solid rgba(180,92,255,.25);
  background:linear-gradient(135deg,rgba(180,92,255,.1),rgba(34,211,238,.05));
  color:#eadbff;
  padding:18px;
  border-radius:22px;
  text-align:center;
  font-weight:700;
}
.section-head{max-width:900px; margin:0 auto 44px; text-align:center}
.section-head p{color:var(--muted); line-height:1.8; font-size:17px}
.comparison{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.compare-card,.price-card,.partner-card,.step{
  border:1px solid var(--line);
  background:rgba(255,255,255,.055);
  border-radius:24px;
  padding:28px;
  box-shadow:0 18px 60px rgba(0,0,0,.18);
}
.compare-card.highlight{
  background:linear-gradient(180deg,rgba(180,92,255,.18),rgba(34,211,238,.08));
  border-color:rgba(180,92,255,.45);
}
.compare-card ul,.price-card ul,.check-list{padding:0; margin:18px 0 0; list-style:none}
.compare-card li,.price-card li,.check-list li{
  color:var(--muted); padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07)
}
.two-col{
  display:grid; grid-template-columns:1fr .9fr; gap:58px; align-items:center;
}
.two-col.reverse{grid-template-columns:.9fr 1fr}
.two-col p{color:var(--muted); font-size:17px; line-height:1.85}
.bullet-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px}
.bullet-grid span{
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.055);
  padding:14px 16px; border-radius:18px; color:#e9ddff;
}
.phone-demo{display:flex; justify-content:center}
.phone{
  position:relative; width:min(360px,100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:42px; padding:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  box-shadow:var(--shadow);
}
.phone-bar{width:96px; height:7px; border-radius:999px; background:rgba(255,255,255,.3); margin:0 auto 12px}
.phone img{border-radius:30px; aspect-ratio:9/16; object-fit:cover}
.phone-caption{position:absolute; left:28px; right:28px; bottom:34px; padding:16px; border-radius:22px; background:rgba(8,6,19,.72); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.18)}
.phone-caption b{display:block}
.phone-caption span{color:var(--muted); font-size:13px}
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.step b{font-size:30px; color:var(--secondary)}
.step h3{margin:14px 0 10px; font-size:20px}
.step p{color:var(--muted); line-height:1.65}
.filter-bar{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px}
.filter{
  border:1px solid var(--line); color:var(--muted); background:rgba(255,255,255,.06);
  padding:10px 16px; border-radius:999px; cursor:pointer;
}
.filter.active{color:#080613; background:linear-gradient(135deg,#e9d5ff,#67e8f9)}
.scene-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.scene-card{
  overflow:hidden; border-radius:24px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); transition:.25s ease;
}
.scene-card:hover{transform:translateY(-5px); border-color:rgba(180,92,255,.45)}
.scene-card img{width:100%; aspect-ratio:3/4; object-fit:cover}
.scene-card div{padding:16px}
.scene-card b{display:block}
.scene-card span{display:block; color:var(--muted); font-size:13px; margin-top:6px}
.image-stack{position:relative; min-height:480px}
.image-stack img{
  position:absolute; width:70%; border-radius:28px;
  border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow); object-fit:cover;
}
.stack-a{left:0; top:0; aspect-ratio:4/3}
.stack-b{right:0; bottom:0; aspect-ratio:4/3}
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.price-card{display:flex; flex-direction:column}
.price-card.featured{background:linear-gradient(180deg,rgba(180,92,255,.2),rgba(255,255,255,.06)); border-color:rgba(180,92,255,.48)}
.tag{display:inline-flex; align-self:flex-start; padding:7px 10px; border-radius:999px; background:rgba(34,211,238,.12); color:#a5f3fc; border:1px solid rgba(34,211,238,.22); margin-bottom:18px}
.price-card p,.partner-card p{color:var(--muted); line-height:1.65}
.price-card .btn{margin-top:auto}
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.partner-card span{display:block; color:#d8b4fe; font-weight:700; margin-top:18px}
.apply{
  display:grid; grid-template-columns:.85fr 1fr; gap:42px; align-items:start;
}
.apply-copy p{color:var(--muted); line-height:1.85; font-size:17px}
.apply-note{
  margin-top:24px; padding:20px; border-radius:22px; border:1px solid rgba(255,208,135,.24);
  background:rgba(255,208,135,.08); color:#ffe9be;
}
.lead-form{padding:28px}
.lead-form label{display:block; color:#f6eeff; font-weight:700; margin-bottom:16px}
input,select,textarea{
  width:100%; margin-top:8px; border-radius:16px; border:1px solid rgba(255,255,255,.14);
  background:rgba(8,6,19,.72); color:var(--text);
  padding:14px 15px; outline:none; font:inherit;
}
input:focus,select:focus,textarea:focus{border-color:rgba(34,211,238,.55); box-shadow:0 0 0 4px rgba(34,211,238,.08)}
.form-tip{font-size:12px; color:var(--muted2); line-height:1.6; margin:14px 0 0}
.footer{
  padding:42px clamp(18px,5vw,72px);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:28px; color:var(--muted);
  background:rgba(0,0,0,.18);
}
.footer p{max-width:520px}
.footer-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-links a:hover{color:var(--text)}
.modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.68); padding:20px;
}
.modal.show{display:flex}
.modal-card{
  width:min(680px,100%); background:#120b28; border:1px solid rgba(255,255,255,.16);
  border-radius:28px; padding:26px; box-shadow:var(--shadow); position:relative;
}
.modal-close{position:absolute; right:18px; top:16px; border:0; background:rgba(255,255,255,.08); color:var(--text); border-radius:50%; width:36px; height:36px; font-size:22px; cursor:pointer}
#resultText{min-height:220px}

@media (max-width:1080px){
  .hero,.two-col,.two-col.reverse,.apply{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .pricing-grid,.scene-grid{grid-template-columns:repeat(2,1fr)}
  .comparison,.partner-grid{grid-template-columns:1fr}
  .image-stack{min-height:420px}
}
@media (max-width:780px){
  .site-header{padding:14px 18px}
  .nav{
    display:none; position:absolute; top:74px; left:18px; right:18px;
    flex-direction:column; align-items:stretch; padding:16px;
    border:1px solid var(--line); background:rgba(8,6,19,.96);
    border-radius:22px;
  }
  .nav.open{display:flex}
  .nav a{padding:12px}
  .nav-toggle{display:block}
  .section{padding:72px 18px}
  .hero{gap:36px}
  .metrics,.strip,.steps,.pricing-grid,.scene-grid{grid-template-columns:1fr}
  .bullet-grid{grid-template-columns:1fr}
  .floating-card{position:static; margin:12px 0 0}
  .hero-visual{transform:none}
  h1{font-size:46px}
  .lead{font-size:16px}
  .image-stack{min-height:auto; display:grid; gap:16px}
  .image-stack img{position:static; width:100%}
  .footer{flex-direction:column}
}