:root{
  --bg:#060816;
  --bg-soft:#0a1022;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10);
  --text:#f5f7ff;
  --muted:#b6bfd8;
  --muted-2:#93a0c5;
  --blue:#6aa7ff;
  --cyan:#7ef0ff;
  --violet:#9c8cff;
  --green:#7be2b2;
  --gold:#ffd86f;
  --shadow:0 25px 80px rgba(0,0,0,.42);
  --radius:28px;
  --radius-sm:18px;
  --max:1220px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 10%, rgba(106,167,255,.16), transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(126,240,255,.12), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(156,140,255,.09), transparent 28%),
    linear-gradient(180deg,#070b18 0%, #060816 40%, #050712 100%);
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(16px);
  background:rgba(6,8,22,.70);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav{
  min-height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:800; letter-spacing:.02em;
}
.brand-mark{
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:0 14px 32px rgba(106,167,255,.32);
  position:relative;
}
.brand-mark::after{
  content:"";
  position:absolute; inset:7px; border-radius:10px;
  border:1px solid rgba(255,255,255,.42);
}
.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--muted); font-weight:650}
.nav-links a:hover{color:var(--text)}
.btn,.btn-secondary,.store-badge{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 20px; border-radius:999px;
  font-weight:800; transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.btn{
  color:#08111f;
  background:linear-gradient(135deg,var(--cyan),#fff 48%, var(--blue));
  box-shadow:0 14px 36px rgba(106,167,255,.28);
}
.btn:hover,.btn-secondary:hover,.store-badge:hover{transform:translateY(-2px)}
.btn-secondary{
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--text);
}
.hero{
  position:relative;
  padding:58px 0 26px;
}
.orb,.orb-2,.orb-3{
  position:absolute; border-radius:50%; filter:blur(10px); z-index:-1;
  animation:drift 10s ease-in-out infinite alternate;
}
.orb{width:260px;height:260px;left:-4%;top:2%;background:radial-gradient(circle, rgba(106,167,255,.22), transparent 70%)}
.orb-2{width:220px;height:220px;right:6%;top:8%;background:radial-gradient(circle, rgba(126,240,255,.16), transparent 70%);animation-duration:12s}
.orb-3{width:280px;height:280px;right:12%;bottom:6%;background:radial-gradient(circle, rgba(156,140,255,.12), transparent 70%);animation-duration:14s}
.hero-grid{
  display:grid; grid-template-columns:1.02fr .98fr; gap:32px; align-items:center;
  min-height:calc(100vh - 130px);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:#e0ebff; font-size:.92rem;
}
.dot{
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:0 0 0 8px rgba(106,167,255,.12);
  animation:pulse 2.3s infinite;
}
h1{
  margin:18px 0 16px;
  font-size:clamp(3rem, 7vw, 6rem);
  line-height:.92; letter-spacing:-.055em;
}
h2{
  line-height:1.02;
}
.hero-copy{
  color:var(--muted); line-height:1.78; font-size:clamp(1.03rem,2vw,1.18rem);
  max-width:680px;
}
.hero-actions,.stack-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.badge-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.badge-row span{
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:#dce6ff; font-weight:700; font-size:.92rem;
}
.hero-proof{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px;
}
.proof{
  padding:16px 18px; border-radius:20px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.proof strong{display:block; font-size:1.12rem}
.proof span{display:block; margin-top:4px; color:var(--muted-2); font-size:.9rem}
section{padding:64px 0}
.section-head{
  display:flex; justify-content:space-between; gap:20px; align-items:end; flex-wrap:wrap;
  margin-bottom:24px;
}
.section-head h2{margin:0; font-size:clamp(2rem,4vw,3.15rem); letter-spacing:-.035em}
.section-head p{max-width:700px; margin:0; color:var(--muted); line-height:1.8}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card,.panel,.cta-panel,.feature-block,.metric-band,.price-card,.rating-strip,.legal-shell{
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card,.feature-block,.panel,.price-card{border-radius:var(--radius); padding:24px}
.card h3,.feature-block h3,.panel h3,.price-card h3{margin:14px 0 10px; font-size:1.16rem}
.card p,.feature-block p,.panel p,.copy, li,.price-card p,.legal-shell p,.legal-shell li{color:var(--muted); line-height:1.82}
.icon{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(106,167,255,.20), rgba(126,240,255,.14));
  border:1px solid rgba(255,255,255,.12);
}
.kicker{
  font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#deebff;
}
.metric-band{
  border-radius:32px; padding:26px;
  background:linear-gradient(135deg, rgba(106,167,255,.10), rgba(126,240,255,.07), rgba(156,140,255,.08));
}
.metric-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.metric{
  padding:18px; border-radius:22px; background:rgba(255,255,255,.045); border:1px solid var(--line);
}
.metric strong{display:block; font-size:1.95rem}
.metric span{display:block; margin-top:6px; color:var(--muted)}
.hero-shot-wrap{
  position:relative;
  min-height:700px;
}
.device-stack{
  position:relative;
  height:700px;
}
.device-card{
  position:absolute;
  width:min(320px, 72vw);
  padding:10px;
  border-radius:36px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;
  transform-style:preserve-3d;
}
.device-card img{
  width:100%;
  border-radius:28px;
}
.device-main{ right:6%; top:20px; transform:rotate(2deg); z-index:3; }
.device-secondary{ left:3%; top:190px; transform:rotate(-7deg) scale(.95); opacity:.92; z-index:2; }
.device-tertiary{ right:10%; bottom:20px; transform:rotate(7deg) scale(.92); opacity:.86; z-index:1; }
.feature-row{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;
  margin-bottom:26px;
}
.feature-shot{ position:relative; }
.frame{
  padding:10px;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.45);
}
.frame img{ width:100%; border-radius:26px; }
.shot-glow{
  position:absolute; inset:auto auto -20px 10%; width:80%; height:40%;
  background:radial-gradient(circle, rgba(106,167,255,.22), transparent 70%);
  filter:blur(30px); z-index:-1;
}
.feature-copy h2{
  margin:0 0 10px;
  font-size:clamp(2rem,4vw,3rem); letter-spacing:-.035em;
}
.feature-copy p{color:var(--muted); line-height:1.85; margin:0 0 14px}
.feature-list{padding-left:18px; margin:0}
.feature-list li{margin:8px 0}
.cta-panel{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  border-radius:34px; padding:30px;
}
.cta-panel h2{margin:0 0 8px; font-size:clamp(2rem,4vw,3rem)}
.cta-panel p{margin:0; color:var(--muted); max-width:780px; line-height:1.82}
.rating-strip{
  border-radius:26px; padding:18px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
}
.store-badge{
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,.12); padding:12px 18px;
}
.store-badge small{display:block; opacity:.7; font-weight:600}
.store-badge strong{display:block; font-size:1.05rem}
.rating-group{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.stars{font-size:1.1rem; color:var(--gold)}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.price-card.featured{
  position:relative;
  background:linear-gradient(180deg, rgba(106,167,255,.16), rgba(255,255,255,.05));
  border-color:rgba(126,240,255,.34);
}
.price-badge{
  display:inline-flex; padding:7px 12px; border-radius:999px;
  background:rgba(126,240,255,.14); border:1px solid rgba(126,240,255,.22); color:#e7feff; font-weight:800; font-size:.82rem;
}
.price{
  font-size:2.5rem; font-weight:900; letter-spacing:-.04em; margin:8px 0 10px;
}
.price-sub{color:var(--muted-2); font-size:.92rem}
.social-card{position:relative}
.social-card::before{
  content:"“";
  position:absolute; top:18px; right:18px; font-size:3rem; color:rgba(255,255,255,.08); font-weight:900;
}
.faq-list{display:grid; gap:14px}
.faq-item{
  padding:22px 24px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid var(--line);
}
.faq-item strong{display:block; margin-bottom:8px; font-size:1.04rem}
.page-shell{
  padding:56px 0 72px;
}
.legal-shell{
  max-width:920px;
  margin:0 auto;
  border-radius:34px;
  padding:34px 28px;
}
.legal-shell h1{
  font-size:clamp(2.2rem,5vw,4rem);
  margin:0 0 12px;
}
.legal-shell h2{
  margin-top:28px;
  margin-bottom:10px;
  font-size:1.35rem;
}
.legal-shell ul{
  padding-left:20px;
}
.footer{
  padding:34px 0 58px; color:var(--muted)
}
.footer-grid{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line); padding-top:14px;
}
.footer-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-links a:hover{color:var(--text)}
.reveal{
  opacity:0; transform:translateY(28px) scale(.985);
  transition:opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay:var(--delay, 0ms);
}
.reveal.show{opacity:1; transform:none}
.float{ animation:floatY 8s ease-in-out infinite; }
.float-slow{ animation:floatY 11s ease-in-out infinite; }
.float-fast{ animation:floatY 6s ease-in-out infinite; }
.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 50%, transparent 65%);
  transform:translateX(-55%);
  animation:shine 7s linear infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.06); opacity:.72} }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes drift{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(18px,-18px,0)} }
@keyframes shine{ 0%{transform:translateX(-80%) rotate(6deg)} 100%{transform:translateX(80%) rotate(6deg)} }
@media (max-width: 1050px){
  .hero-grid,.grid-2,.grid-3,.grid-4,.feature-row,.metric-grid,.cta-panel,.hero-proof,.price-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .hero-shot-wrap,.device-stack{min-height:auto;height:auto}
  .device-card{position:relative; width:min(360px, 84vw); left:auto; right:auto; top:auto; bottom:auto; margin:0 auto 16px; transform:none !important; opacity:1}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}