:root{
  --bg:#020611;
  --bg2:#081225;
  --surface:rgba(10,16,34,.68);
  --surface-2:rgba(14,24,51,.78);
  --line:rgba(117,188,255,.18);
  --line-strong:rgba(110,215,255,.45);
  --text:#edf8ff;
  --muted:#88a5c7;
  --primary:#6ef0ff;
  --secondary:#7f5cff;
  --accent:#00ffa3;
  --warning:#ff7af6;
  --shadow:0 18px 48px rgba(0,0,0,.32);
  --radius:24px;
  --pointer-x:50%;
  --pointer-y:50%;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 20%, rgba(0,255,163,.10), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(110,240,255,.14), transparent 30%),
    radial-gradient(circle at 55% 50%, rgba(127,92,255,.12), transparent 35%),
    linear-gradient(180deg, #030712 0%, #07111f 48%, #020611 100%);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(110,240,255,.045), transparent 18%);
  pointer-events:none;
  z-index:0;
  will-change:transform, opacity;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
main,header,footer{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  contain:layout paint style;
}

.scene-grid,
.scene-noise,
.scene-aurora,
.particles{
  position:absolute;
  inset:0;
}

.scene-grid{
  background:
    linear-gradient(rgba(110,240,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,240,255,.08) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(255,255,255,.8), transparent 88%);
  opacity:.22;
  transform:perspective(900px) rotateX(76deg) translateY(-8%);
  transform-origin:top center;
  animation:gridDrift 28s linear infinite;
  will-change:transform;
}

.scene-noise{
  opacity:.04;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.3) 0 1px, transparent 1px);
  background-size:160px 160px;
}

.scene-aurora{
  filter:blur(18px);
  opacity:.34;
  will-change:transform;
}

.aurora-a{
  inset:auto auto 12% -10%;
  width:32rem;
  height:32rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,163,.28), rgba(0,255,163,0));
  animation:floatA 18s ease-in-out infinite;
}

.aurora-b{
  inset:2% -8% auto auto;
  width:30rem;
  height:30rem;
  border-radius:50%;
  background:radial-gradient(circle, rgba(127,92,255,.32), rgba(127,92,255,0));
  animation:floatB 20s ease-in-out infinite;
}

.particles span{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(110,240,255,.58);
  box-shadow:0 0 8px rgba(110,240,255,.35);
  animation:particleFloat var(--duration, 22s) linear infinite;
  animation-delay:var(--delay, 0s);
  opacity:.34;
  will-change:transform, opacity;
}

.top{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(10px);
  background:rgba(2,8,20,.68);
  border-bottom:1px solid rgba(122,205,255,.12);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.top.is-scrolled{
  background:rgba(3,8,20,.84);
  border-bottom-color:rgba(122,205,255,.24);
  box-shadow:0 18px 48px rgba(0,0,0,.25);
}

.top .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-shell{
  position:relative;
  padding:2px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(110,240,255,.8), rgba(127,92,255,.8));
  box-shadow:0 0 30px rgba(110,240,255,.2);
}

.logo-shell::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:22px;
  border:1px solid rgba(110,240,255,.18);
}

.logo{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(5,12,26,.96);
}

.logo img{
  width:40px;
  height:40px;
  object-fit:contain;
  transition:transform .25s ease, filter .25s ease;
}

.top.is-scrolled .logo img{
  transform:scale(.94);
  filter:drop-shadow(0 0 16px rgba(110,240,255,.35));
}

.brand-name{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.brand-sub{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.18em;
}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(110,240,255,.12);
  border-radius:999px;
  background:rgba(10,18,36,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.14);
  color:#b8d8ff;
  font-size:.9rem;
  backdrop-filter:blur(8px);
}

.nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  color:#b8d8ff;
  opacity:.92;
  font-weight:700;
  letter-spacing:.04em;
  transition:opacity .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.nav a::after{
  content:"";
  position:absolute;
  inset:auto 16px 8px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(110,240,255,0), rgba(110,240,255,.95), rgba(127,92,255,.95), rgba(110,240,255,0));
  transform:scaleX(.35);
  opacity:0;
  transition:transform .2s ease, opacity .2s ease;
}

.nav a:hover{
  opacity:1;
  color:#fff;
  background:rgba(110,240,255,.08);
  transform:translateY(-1px);
}

.nav a:hover::after{
  transform:scaleX(1);
  opacity:1;
}

.nav a.is-active{
  color:#f7fcff;
  background:linear-gradient(180deg, rgba(110,240,255,.16), rgba(127,92,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(11,25,53,.26);
}

.nav a.is-active::after{
  transform:scaleX(1);
  opacity:1;
}

.hero{
  padding:20px 0 42px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:36px;
  align-items:center;
}

.hero-copy,
.hero-stack{
  position:relative;
  z-index:1;
}

.parallax{
  transform:translate3d(0, 0, 0);
  will-change:transform;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 12px;
  margin-bottom:18px;
  border-radius:999px;
  background:rgba(110,240,255,.08);
  border:1px solid rgba(110,240,255,.2);
  color:#b4fcff;
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.section-kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(0,255,163,.85);
}

h1{
  margin:0 0 16px;
  font-size:clamp(2.9rem, 6vw, 5rem);
  line-height:1.03;
  letter-spacing:-.04em;
}


.muted{
  color:#b9d4ff;
  font-weight:700;
  text-shadow:0 0 24px rgba(110,240,255,.15);
}


.lead{
  max-width:56ch;
  margin:0 0 22px;
  color:var(--muted);
  font-size:1.05rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 22px;
}

.btn{
  appearance:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 20px;
  border-radius:16px;
  border:1px solid rgba(110,240,255,.22);
  background:rgba(255,255,255,.03);
  color:var(--text);
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn::before,
.single-price::before,
.verify-btn::before{
  content:"";
  position:absolute;
  inset:-120% 40% auto -40%;
  height:240%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:rotate(18deg);
  transition:transform .65s ease;
}

.btn:hover,
.single-price:hover,
.verify-btn:hover{
  transform:translateY(-2px);
}

.btn:hover::before,
.single-price:hover::before,
.verify-btn:hover::before{
  transform:translate(120%, 0) rotate(18deg);
}

.btn-primary{
  border-color:transparent;
  background:linear-gradient(135deg, var(--primary), #2ee2ff 45%, #b3fff3 120%);
  color:#031017;
  font-weight:900;
  box-shadow:0 18px 40px rgba(46,226,255,.28);
}

.btn-primary:hover{
  box-shadow:0 22px 48px rgba(46,226,255,.36);
}

.btn.is-copied{
  box-shadow:0 0 0 1px rgba(0,255,163,.45), 0 22px 52px rgba(0,255,163,.24);
  background:linear-gradient(135deg, #8fffe7 0%, #7cf6ff 48%, #b7fff3 100%);
}

.btn-ghost{
  background:rgba(15,24,52,.35);
  box-shadow:inset 0 0 0 1px rgba(110,240,255,.05);
}

.trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(110,240,255,.16);
  background:rgba(13,19,39,.5);
  color:#c2d8f7;
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-stack{
  display:grid;
  gap:18px;
}

.card,
.info-card,
.metric-card,
.quote-card,
.faq-card{
  position:relative;
  overflow:hidden;
}

.card::before,
.info-card::before,
.metric-card::before,
.quote-card::before,
.faq-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0%, rgba(110,240,255,.08) 35%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
}

.card:hover::before,
.info-card:hover::before,
.metric-card:hover::before,
.quote-card:hover::before,
.faq-card:hover::before{
  transform:translateX(120%);
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(14,24,51,.88), rgba(6,13,29,.78));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-hud{
  padding:22px 22px 18px;
  min-height:180px;
}

.hero-hud-link{
  display:block;
  cursor:pointer;
}

.hud-line{
  position:absolute;
  left:16px;
  right:16px;
  top:16px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(110,240,255,.65), transparent);
  box-shadow:0 0 16px rgba(110,240,255,.45);
}

.hud-top,
.hud-stats{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hud-top{
  margin-top:14px;
}

.hud-label,
.hud-signal,
.hud-stats span{
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#a8c6ef;
}

.hud-signal{
  color:#94ffbd;
}

.hud-main{
  margin:22px 0 18px;
}

.hud-price{
  font-size:3rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  text-shadow:0 0 24px rgba(110,240,255,.28);
}

.hud-price-unit{
  margin-left:4px;
  font-size:.34em;
  font-weight:700;
  color:#b9d7ff;
  letter-spacing:.04em;
  vertical-align:middle;
}

.hud-copy{
  margin-top:10px;
  color:var(--muted);
  max-width:28ch;
}

.hud-stats strong{
  display:block;
  margin-top:6px;
  font-size:1rem;
  color:#fff;
}

.order-card{
  padding:0;
}

.order-card-header{
  padding:26px 26px 18px;
  border-bottom:1px solid rgba(110,240,255,.12);
}

.card-title{
  margin:0 0 8px;
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-.03em;
}

.card-sub{
  color:var(--muted);
  font-size:.95rem;
}

.order-card-content{
  display:grid;
  gap:14px;
  padding:24px 26px 26px;
}

.single-price,
.verify-btn{
  position:relative;
  display:block;
  padding:16px 18px;
  border-radius:18px;
  text-align:center;
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:.04em;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.single-price{
  border:1px solid transparent;
  background:linear-gradient(135deg, #76efff 0%, #80b2ff 50%, #9a7cff 100%);
  color:#041018;
  box-shadow:0 18px 40px rgba(110,240,255,.22);
}

.verify-btn{
  border:1px solid rgba(110,240,255,.28);
  background:rgba(255,255,255,.03);
  color:#c6edff;
}

.single-price:hover{
  box-shadow:0 22px 48px rgba(110,240,255,.3);
}

.single-price.is-copied{
  box-shadow:0 0 0 1px rgba(0,255,163,.45), 0 22px 52px rgba(0,255,163,.24);
  background:linear-gradient(135deg, #7dffe5 0%, #7df7ff 48%, #87bbff 100%);
}

.verify-btn:hover{
  background:rgba(110,240,255,.08);
  border-color:rgba(110,240,255,.44);
}

.section{
  padding:44px 0;
}

.section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top:1px solid rgba(110,240,255,.08);
  border-bottom:1px solid rgba(110,240,255,.08);
}

.section-head{
  text-align:center;
  margin-bottom:24px;
}

h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 2.8rem);
  letter-spacing:-.04em;
}

.steps3{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:22px;
  align-items:center;
  margin-top:28px;
}

.step-item{
  padding:28px 18px 22px;
  text-align:center;
  border:1px solid rgba(110,240,255,.14);
  border-radius:24px;
  background:rgba(12,18,37,.48);
  box-shadow:var(--shadow);
}

.step-circle{
  width:92px;
  height:92px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  font-weight:900;
  color:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.02), 0 0 24px currentColor;
  animation:pulse 3s ease-in-out infinite;
}

.step1{background:radial-gradient(circle at 30% 30%, #7a74ff, #3327aa)}
.step2{background:radial-gradient(circle at 30% 30%, #21e0d8, #0d7b90)}
.step3{background:radial-gradient(circle at 30% 30%, #68ffb3, #0f9d63)}

.step-title{
  margin-bottom:8px;
  font-size:1.08rem;
  font-weight:800;
}

.step-desc{
  color:var(--muted);
  font-size:.94rem;
}

.step-line{
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(110,240,255,.1), rgba(110,240,255,.8), rgba(127,92,255,.8), rgba(110,240,255,.1));
  box-shadow:0 0 18px rgba(110,240,255,.3);
}

.center-title{
  text-align:center;
}

.card3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.info-card{
  padding:28px 24px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(12,20,42,.74), rgba(7,13,28,.84));
  border:1px solid rgba(110,240,255,.14);
  box-shadow:var(--shadow);
  text-align:center;
}

.iconball{
  width:88px;
  height:88px;
  margin:6px auto 18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.8rem;
  box-shadow:0 0 28px rgba(255,255,255,.12);
}

.iconball.g1{background:linear-gradient(135deg, #2cffc6, #2684ff)}
.iconball.g2{background:linear-gradient(135deg, #a86cff, #ff57d8)}
.iconball.g3{background:linear-gradient(135deg, #ff995f, #ff446e)}

.ic-title{
  margin:0 0 10px;
  font-size:1.35rem;
  font-weight:900;
}

.ic-desc{
  margin:0;
  color:#bdd0ec;
  font-size:.95rem;
  line-height:1.8;
}

.metric4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.metric-card{
  padding:22px 18px;
  border-radius:22px;
  background:rgba(11,19,38,.58);
  border:1px solid rgba(110,240,255,.12);
  box-shadow:var(--shadow);
  text-align:center;
}

.m-ico{
  width:58px;
  height:58px;
  margin:2px auto 12px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(110,240,255,.16), rgba(127,92,255,.2));
  border:1px solid rgba(110,240,255,.14);
  font-size:1.7rem;
}

.m-big{
  font-size:2rem;
  font-weight:900;
  letter-spacing:-.03em;
}

.m-sub{
  margin-top:8px;
  font-weight:800;
}

.m-label{
  margin-top:8px;
  color:var(--muted);
  font-size:.82rem;
}

.quote3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:18px;
}

.quote-card{
  padding:22px 20px;
  border-radius:22px;
  background:rgba(11,19,38,.58);
  border:1px solid rgba(110,240,255,.12);
  box-shadow:var(--shadow);
  text-align:center;
}

.q-text{
  color:#d3e7ff;
  font-weight:600;
  line-height:1.85;
}

.stars{
  margin-top:14px;
  color:#ffd66e;
  letter-spacing:3px;
}

.faq-head{
  text-align:center;
  margin-bottom:20px;
}

.faq-title{
  font-size:clamp(2rem, 4vw, 2.7rem);
  font-weight:900;
  letter-spacing:-.04em;
}

.faq-sub{
  margin-top:10px;
  color:var(--muted);
}

.faq-cards{
  display:grid;
  gap:18px;
}

.faq-card{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px;
  border-radius:22px;
  background:rgba(11,19,38,.58);
  border:1px solid rgba(110,240,255,.12);
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.faq-card:hover{
  transform:translateY(-2px);
  border-color:rgba(110,240,255,.26);
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}

.faq-ico{
  flex:0 0 auto;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  font-weight:900;
  background:rgba(255,255,255,.04);
}

.faq-ico.q{color:#ff8f8f;background:rgba(255,77,79,.14)}
.faq-ico.lock{color:#78c7ff;background:rgba(22,119,255,.14)}
.faq-ico.x{color:#ff8f8f;background:rgba(255,77,79,.14)}
.faq-ico.vs{color:#ffd36f;background:rgba(250,173,20,.16);font-size:.86rem}
.faq-ico.loop{color:#7effbf;background:rgba(82,196,26,.14)}

.faq-q{
  margin:0 0 8px;
  font-size:1.16rem;
  font-weight:900;
}

.faq-a{
  color:#c6d8f3;
  font-size:.95rem;
  line-height:1.85;
}

.footer{
  padding:26px 0 42px;
  border-top:1px solid rgba(110,240,255,.08);
}

.footer-row{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:#84a3c7;
  font-size:.82rem;
}

.footer-left{
  white-space:nowrap;
}

.footer-right{
  max-width:780px;
  line-height:1.9;
  opacity:.78;
}

.quick-dock{
  position:fixed;
  top:82px;
  right:10px;
  z-index:26;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:12px 18px;
  border-radius:18px;
  border:1px solid rgba(110,240,255,.28);
  background:rgba(7,14,29,.9);
  box-shadow:0 12px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  color:#eaf9ff;
  backdrop-filter:blur(14px);
  opacity:0;
  transform:translateY(-10px) scale(.94);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow:visible;
}

.quick-dock::before,
.quick-dock::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
}

.quick-dock::before{
  border:1px solid rgba(110,240,255,.18);
  box-shadow:0 0 22px rgba(110,240,255,.2);
  animation:quickDockRing 3.2s ease-in-out infinite;
}

.quick-dock::after{
  inset:auto 16px -10px 16px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(110,240,255,.4), rgba(110,240,255,0) 74%);
  filter:blur(10px);
  opacity:.92;
  animation:quickDockGlow 3.2s ease-in-out infinite;
}

.quick-dock-label{
  font-size:.88rem;
  color:#b8d8ff;
  letter-spacing:.1em;
}

.quick-dock strong{
  font-size:1.08rem;
  letter-spacing:.03em;
}

.quick-dock-unit{
  margin-left:2px;
  font-size:.7em;
  font-weight:700;
  color:#b9d7ff;
}

body.show-quick-dock .quick-dock{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  animation:quickDockJump 3.2s cubic-bezier(.22,.9,.3,1) infinite;
}

.quick-dock:hover{
  border-color:rgba(110,240,255,.42);
  box-shadow:0 20px 52px rgba(0,0,0,.38), 0 0 0 1px rgba(110,240,255,.08);
}

.reveal{
  opacity:0;
  transform:translateY(26px) scale(.985);
  transition:opacity .8s ease, transform .8s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

section[id]{scroll-margin-top:88px}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .reveal{
    opacity:1;
    transform:none;
  }
}

@media (pointer: coarse){
  body::before{
    display:none;
  }

  .parallax{
    transform:none !important;
  }
}

@media (max-width: 1080px){
  .hero-grid,
  .card3,
  .quote3{
    grid-template-columns:1fr;
  }

  .metric4{
    grid-template-columns:repeat(2, 1fr);
  }

  .steps3{
    grid-template-columns:1fr;
  }

  .step-line{
    width:2px;
    height:48px;
    margin:0 auto;
  }

}

@media (max-width: 780px){
  .wrap{
    padding:0 18px;
  }

  .top .wrap{
    padding:14px 18px;
  }

  .nav{
    display:none;
  }

  .hero{
    padding:72px 0 32px;
  }

  h1{
    font-size:clamp(2.4rem, 11vw, 3.5rem);
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .metric4{
    grid-template-columns:1fr;
  }

  .faq-card{
    padding:18px;
  }

  .footer-row{
    flex-direction:column;
  }

  .footer-left{
    white-space:normal;
  }

  .quick-dock{
    top:74px;
    right:8px;
    min-height:46px;
    padding:10px 14px;
    border-radius:15px;
  }

  .quick-dock-label{
    font-size:.76rem;
  }
}

@keyframes gridDrift{
  from{transform:perspective(900px) rotateX(76deg) translateY(-8%)}
  50%{transform:perspective(900px) rotateX(76deg) translateY(-4%)}
  to{transform:perspective(900px) rotateX(76deg) translateY(-8%)}
}

@keyframes twinkle{
  0%,100%{opacity:.05}
  50%{opacity:.11}
}

@keyframes floatA{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(24px,-18px,0) scale(1.06)}
}

@keyframes floatB{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-30px,24px,0) scale(1.08)}
}

@keyframes pulse{
  0%,100%{transform:scale(1); box-shadow:0 0 0 8px rgba(255,255,255,.02), 0 0 24px currentColor}
  50%{transform:scale(1.05); box-shadow:0 0 0 14px rgba(255,255,255,.03), 0 0 34px currentColor}
}

@keyframes particleFloat{
  0%{transform:translate3d(0, 100vh, 0) scale(.6); opacity:0}
  10%{opacity:.55}
  80%{opacity:.45}
  100%{transform:translate3d(0, -10vh, 0) scale(1.3); opacity:0}
}

@keyframes quickDockJump{
  0%,100%{
    transform:translateY(0) scale(1);
    box-shadow:0 16px 42px rgba(0,0,0,.32), 0 0 0 0 rgba(110,240,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
  }
  10%{
    transform:translateY(0) scale(1);
    box-shadow:0 16px 42px rgba(0,0,0,.32), 0 0 0 0 rgba(110,240,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
  }
  18%{
    transform:translateY(-8px) scale(1.055);
    box-shadow:0 26px 58px rgba(0,0,0,.42), 0 0 0 6px rgba(110,240,255,.08), inset 0 1px 0 rgba(255,255,255,.06);
  }
  24%{
    transform:translateY(0) scale(.99);
    box-shadow:0 18px 46px rgba(0,0,0,.34), 0 0 0 10px rgba(127,92,255,.05), inset 0 1px 0 rgba(255,255,255,.05);
  }
  31%{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 22px 52px rgba(0,0,0,.38), 0 0 0 4px rgba(110,240,255,.06), inset 0 1px 0 rgba(255,255,255,.05);
  }
  38%{
    transform:translateY(0) scale(1);
    box-shadow:0 16px 42px rgba(0,0,0,.32), 0 0 0 0 rgba(110,240,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
  }
}

@keyframes quickDockRing{
  0%,100%{
    opacity:.38;
    transform:scale(1);
  }
  18%{
    opacity:1;
    transform:scale(1.12);
  }
  31%{
    opacity:.82;
    transform:scale(1.06);
  }
}

@keyframes quickDockGlow{
  0%,100%{
    opacity:.42;
    transform:scaleX(.8) scaleY(.92);
  }
  18%{
    opacity:1;
    transform:scaleX(1.22) scaleY(1.18);
  }
  31%{
    opacity:.74;
    transform:scaleX(1.02) scaleY(1.04);
  }
}