:root{
  --bg0:#070a14;
  --bg1:#0b1020;
  --card:#0f1731cc;
  --cardSolid:#111a35;
  --text:#e9ecff;
  --muted:#aab0d3;
  --line:#243055;
  --accentA:#56e0ff;
  --accentB:#7c5cff;
  --accentC:#2fe59b;
  --shadow: 0 22px 60px rgba(0,0,0,.55);
  --shadowSoft: 0 16px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radiusLg: 26px;
  --container: 1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(124,92,255,.25), transparent 55%),
    radial-gradient(900px 650px at 85% 15%, rgba(86,224,255,.18), transparent 55%),
    radial-gradient(900px 650px at 70% 85%, rgba(47,229,155,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, #070a14);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.45;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;
  left:12px; top:12px;
  transform: translateY(-160%);
  background:rgba(255,255,255,.9);
  color:#111;
  padding:10px 12px;
  border-radius:12px;
  z-index: 9999;
  transition: transform .2s ease;
}
.skip-link:focus{transform: translateY(0)}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index: 80;
  background:rgba(7,10,20,.3);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(36,48,85,.35);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.site-header[data-elevated="true"]{
  background:rgba(7,10,20,.62);
  border-color: rgba(36,48,85,.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  min-width: 120px;
}
.brand-footer{opacity:.95}
.brand-text{
  font-weight: 700;
  letter-spacing: .2px;
}
.brand-mark{
  width:30px;height:30px;border-radius: 12px;
  background:
    radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(18px 18px at 60% 65%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, rgba(86,224,255,.95), rgba(124,92,255,.95));
  box-shadow: 0 12px 26px rgba(124,92,255,.25), 0 14px 28px rgba(86,224,255,.18);
  position:relative;
}
.brand-mark::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.25);
}

.nav{display:flex; align-items:center; gap:14px}
.nav-links{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav-links a{
  text-decoration:none;
  color:rgba(233,236,255,.86);
  padding:8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nav-links a:hover{
  background:rgba(17,26,53,.55);
  border-color: rgba(36,48,85,.55);
  color:rgba(255,255,255,.95);
}
.nav-links a[aria-current="true"]{
  background:rgba(17,26,53,.7);
  border-color: rgba(86,224,255,.28);
}

.nav-toggle{
  display:none;
  background:rgba(17,26,53,.55);
  border:1px solid rgba(36,48,85,.6);
  border-radius: 12px;
  padding:10px 10px;
  line-height:0;
  cursor:pointer;
}
.nav-toggle:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset: 2px}
.nav-toggle-icon{
  width:18px; height:2px; background:rgba(255,255,255,.86);
  display:inline-block;
  position:relative;
  border-radius: 999px;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:rgba(255,255,255,.86);
  border-radius: 999px;
}
.nav-toggle-icon::before{top:-6px}
.nav-toggle-icon::after{top:6px}

.hero{
  position:relative;
  padding: 64px 0 18px;
}
.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.grid{
  position:absolute;
  inset:-20% -20%;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(closest-side at 50% 20%, rgba(0,0,0,.85), transparent 70%);
  opacity:.55;
}
.blob{
  position:absolute;
  filter: blur(30px);
  opacity:.8;
  transform: translate3d(0,0,0);
}
.blob-1{
  width:560px;height:560px;
  left:-180px; top:-220px;
  background: radial-gradient(circle at 30% 30%, rgba(86,224,255,.9), rgba(124,92,255,.2) 55%, transparent 70%);
}
.blob-2{
  width:620px;height:620px;
  right:-220px; top:-160px;
  background: radial-gradient(circle at 50% 40%, rgba(124,92,255,.85), rgba(47,229,155,.18) 55%, transparent 70%);
}
.blob-3{
  width:720px;height:520px;
  left:20%; bottom:-240px;
  background: radial-gradient(circle at 55% 55%, rgba(47,229,155,.55), rgba(86,224,255,.16) 60%, transparent 72%);
  opacity:.65;
}

.hero-inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap: 46px;
  position:relative;
}
.hero-copy{max-width: 560px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(17,26,53,.55);
  border:1px solid rgba(36,48,85,.6);
  color:rgba(233,236,255,.88);
  font-weight: 600;
  font-size: 14px;
}
.pill .dot{
  width:8px;height:8px;border-radius: 999px;
  background: linear-gradient(180deg, var(--accentA), var(--accentC));
  box-shadow: 0 0 0 4px rgba(86,224,255,.14);
}
h1{
  font-size: clamp(42px, 4.3vw, 58px);
  line-height: 1.03;
  margin: 0 0 14px;
  letter-spacing: -0.9px;
}
.gradient-text{
  background: linear-gradient(90deg, var(--accentA), var(--accentB) 60%, var(--accentC));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{
  margin: 0 0 22px;
  font-size: 17px;
  color: rgba(233,236,255,.82);
}

.hero-cta{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.btn{
  border-radius: 14px;
  border:1px solid rgba(36,48,85,.75);
  background: rgba(17,26,53,.55);
  padding: 11px 14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}
.btn:hover{transform: translateY(-1px); border-color: rgba(86,224,255,.28)}
.btn:active{transform: translateY(0)}
.btn-primary{
  background: linear-gradient(135deg, rgba(86,224,255,.9), rgba(124,92,255,.92));
  border-color: transparent;
  color: #081022;
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(86,224,255,.14), 0 22px 46px rgba(124,92,255,.18);
}
.btn-primary:hover{
  box-shadow: 0 22px 46px rgba(86,224,255,.18), 0 28px 60px rgba(124,92,255,.22);
}
.btn-secondary{
  background: linear-gradient(135deg, rgba(47,229,155,.92), rgba(86,224,255,.7));
  border-color: transparent;
  color: #07101c;
  font-weight: 800;
}
.btn-ghost{
  background: rgba(17,26,53,.35);
}

.hero-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 0;
}
.metric{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(17,26,53,.4);
  border:1px solid rgba(36,48,85,.55);
}
.metric dt{
  font-weight: 800;
  margin:0;
  font-size: 13px;
  color: rgba(233,236,255,.9);
}
.metric dd{
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(170,176,211,.9);
}

.hero-media{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 460px;
}

.device{
  position:relative;
  border-radius: 44px;
  padding: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.device::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(86,224,255,.35), rgba(124,92,255,.24), rgba(47,229,155,.18));
  opacity:.7;
  z-index:-1;
  filter: blur(0px);
}
.device-frame{
  overflow:hidden;
  border-radius: 34px;
  background: transparent;
}
.device-frame img{
  width: 330px;
  height: auto;
}
.device-hero .device-frame{
  width: clamp(250px, 26vw, 330px);
  height: clamp(470px, 66vh, 590px);
  background: #000;
}
.device-hero .device-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
.device-glow{
  position:absolute;
  inset:-60px;
  border-radius: 60px;
  background:
    radial-gradient(closest-side at 45% 25%, rgba(86,224,255,.18), transparent 60%),
    radial-gradient(closest-side at 65% 70%, rgba(124,92,255,.2), transparent 60%),
    radial-gradient(closest-side at 35% 80%, rgba(47,229,155,.14), transparent 60%);
  filter: blur(12px);
  z-index:-2;
}

.float-card{
  position:absolute;
  border-radius: 16px;
  background: rgba(15,23,49,.75);
  border:1px solid rgba(36,48,85,.65);
  box-shadow: var(--shadowSoft);
  padding: 12px 12px;
  backdrop-filter: blur(12px);
  min-width: 160px;
}
.float-title{font-weight: 900; letter-spacing: .1px}
.float-sub{color: rgba(170,176,211,.9); font-size: 13px; margin-top: 2px}
.float-card-top{left:-10px; top: 62px; transform: rotate(-2deg)}
.float-card-bottom{right:-10px; bottom: 66px; transform: rotate(2deg)}

.section{
  padding: 74px 0;
  position:relative;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 22px;
  margin-bottom: 26px;
}
.section-head h2{
  margin:0;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.5px;
}
.section-head p{
  margin:0;
  color: rgba(170,176,211,.92);
  max-width: 520px;
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}
.card{
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  background: rgba(17,26,53,.5);
  border:1px solid rgba(36,48,85,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  min-height: 160px;
}
.card h3{
  margin: 10px 0 8px;
  letter-spacing: -0.2px;
}
.card p{
  margin:0;
  color: rgba(170,176,211,.95);
  font-size: 14.5px;
}
.card-icon{
  width:40px;height:40px;border-radius: 14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
}
.i{
  width:18px;height:18px; display:block;
  background: linear-gradient(135deg, var(--accentA), var(--accentB));
  mask-size: contain; mask-repeat:no-repeat; mask-position:center;
  -webkit-mask-size: contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
}
.i-scan{
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 36%),
    linear-gradient(#000,#000);
  -webkit-mask-size: 100% 100%, 70% 70%;
  -webkit-mask-position: center, center;
  -webkit-mask-repeat:no-repeat;
  mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 36%), linear-gradient(#000,#000);
  mask-size: 100% 100%, 70% 70%;
  mask-position: center, center;
  mask-repeat:no-repeat;
}
.i-macros{
  -webkit-mask-image: linear-gradient(#000,#000);
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(#000,#000);
  position:relative;
}
.i-story{
  -webkit-mask-image: linear-gradient(135deg, #000 60%, transparent 61%);
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(135deg, #000 60%, transparent 61%);
}
.i-fix{
  -webkit-mask-image: conic-gradient(#000 0 25%, transparent 25% 50%, #000 50% 75%, transparent 75% 100%);
  -webkit-mask-size: 100% 100%;
  mask-image: conic-gradient(#000 0 25%, transparent 25% 50%, #000 50% 75%, transparent 75% 100%);
  border-radius: 999px;
}
.i-insights{
  -webkit-mask-image: linear-gradient(#000,#000);
  mask-image: linear-gradient(#000,#000);
  clip-path: polygon(0 70%, 18% 58%, 34% 64%, 52% 40%, 70% 48%, 86% 30%, 100% 38%, 100% 100%, 0 100%);
}
.i-privacy{
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 63%);
}

.section-screens{
  background: radial-gradient(900px 520px at 50% 20%, rgba(86,224,255,.10), transparent 60%);
}
.screen-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.screen{
  border:1px solid rgba(36,48,85,.65);
  background: rgba(17,26,53,.35);
  border-radius: 22px;
  padding: 14px 14px 14px;
  cursor:pointer;
  text-align:left;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.screen:hover{transform: translateY(-2px); border-color: rgba(86,224,255,.35)}
.screen:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}
.screen-label{
  display:block;
  font-weight: 800;
  margin-bottom: 10px;
  color: rgba(233,236,255,.9);
  font-size: 13px;
}
.device-small{padding: 10px; border-radius: 36px}
.device-small{
  /* thumbnails: avoid extra shadow/gradient bleed */
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 36px;
}
.device-small::before{
  opacity: 0;
  background: transparent;
}
.device-small .device-frame{
  border-radius: 28px;
  background: rgba(7,10,20,.55);
  position: relative;
}
.device-small .device-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 1;
  background: linear-gradient(180deg, rgba(110,220,255,.16) 0%, rgba(110,220,255,0) 38%);
}
.device-small .device-frame img{width: 100%}
.device-small .device-frame img{
  filter: brightness(1.04) saturate(1.03) contrast(1.02);
}
.screen-highlight{
  background: linear-gradient(180deg, rgba(86,224,255,.12), rgba(17,26,53,.35));
  border-color: rgba(86,224,255,.28);
}

.steps{
  list-style:none;
  padding:0;
  margin: 0 0 20px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.step{
  padding: 18px 18px 16px;
  border-radius: 22px;
  border:1px solid rgba(36,48,85,.6);
  background: rgba(17,26,53,.45);
  display:flex;
  gap: 12px;
}
.step-num{
  width:34px;height:34px;border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight: 900;
}
.step-body h3{margin:0 0 6px; letter-spacing:-.2px}
.step-body p{margin:0; color: rgba(170,176,211,.95); font-size: 14.5px}

.callout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radiusLg);
  border:1px solid rgba(36,48,85,.65);
  background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(86,224,255,.10));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
.callout h3{margin:0 0 6px}
.callout p{margin:0; color: rgba(170,176,211,.95)}

.faq details{
  border-radius: 18px;
  border:1px solid rgba(36,48,85,.6);
  background: rgba(17,26,53,.4);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.faq summary{
  cursor:pointer;
  font-weight: 800;
  letter-spacing: -.1px;
}
.faq-body{
  color: rgba(170,176,211,.95);
  margin-top: 10px;
}
.faq-body p{margin:0}

.section-final{
  padding: 60px 0 80px;
}
.final-inner{display:flex; justify-content:center}
.final-card{
  width:min(920px, 100%);
  padding: 26px 22px;
  border-radius: 28px;
  border:1px solid rgba(36,48,85,.65);
  background:
    radial-gradient(420px 220px at 20% 20%, rgba(86,224,255,.18), transparent 60%),
    radial-gradient(420px 240px at 80% 60%, rgba(124,92,255,.18), transparent 62%),
    rgba(17,26,53,.42);
  box-shadow: var(--shadowSoft);
  text-align:center;
}
.final-card h2{margin:0 0 8px; letter-spacing:-.4px}
.final-card p{margin:0 0 18px; color: rgba(170,176,211,.95)}
.final-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.site-footer{
  border-top:1px solid rgba(36,48,85,.45);
  background: rgba(7,10,20,.45);
}
.footer-inner{
  padding: 22px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}
.muted{color: rgba(170,176,211,.92)}
.tiny{font-size: 12.5px}
.sep{opacity:.6}
.footer-right{display:flex; align-items:center; gap:10px}
.footer-right a{text-decoration:none; padding:6px 8px; border-radius:12px}
.footer-right a:hover{background: rgba(17,26,53,.45)}
.linklike{
  background: transparent;
  border:none;
  padding:6px 8px;
  cursor:pointer;
  border-radius:12px;
  color: rgba(233,236,255,.92);
}
.linklike:hover{background: rgba(17,26,53,.45)}
.linklike:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}

.kbd{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border:1px solid rgba(36,48,85,.65);
  background: rgba(17,26,53,.45);
  font-size: 12.5px;
  color: rgba(233,236,255,.9);
}

.lightbox,
.modal{
  position:fixed;
  inset:0;
  z-index: 120;
}
.lightbox-backdrop,
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
}
.lightbox-figure{
  position:relative;
  margin:0;
  height:100%;
  display:grid;
  place-items:center;
  padding: 22px;
}
.lightbox-img{
  width:min(420px, 92vw);
  max-height: 84vh;
  border-radius: 26px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.14);
  background: #000;
}
.lightbox-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border:1px solid rgba(36,48,85,.65);
  background: rgba(17,26,53,.75);
  cursor:pointer;
}
.lightbox-close:hover{border-color: rgba(86,224,255,.35)}
.lightbox-close:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}
.lightbox-close span{font-size: 26px; line-height: 1}

.modal-card{
  position:relative;
  width:min(640px, calc(100% - 40px));
  margin: 10vh auto 0;
  padding: 18px 18px 16px;
  border-radius: 26px;
  border:1px solid rgba(36,48,85,.7);
  background:
    radial-gradient(520px 280px at 10% 10%, rgba(86,224,255,.14), transparent 55%),
    radial-gradient(520px 280px at 90% 55%, rgba(124,92,255,.14), transparent 58%),
    rgba(17,26,53,.78);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.modal-close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border:1px solid rgba(36,48,85,.65);
  background: rgba(15,23,49,.65);
  cursor:pointer;
}
.modal-close:hover{border-color: rgba(86,224,255,.35)}
.modal-close:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}
.modal-close span{font-size: 24px; line-height: 1}
.modal-content h3{margin:0 0 10px; letter-spacing:-.2px}
.modal-content p{margin:0 0 12px}

.store-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin: 14px 0 10px;
}
.store-btn{
  display:flex;
  align-items:center;
  gap: 12px;
  text-align:left;
  padding: 12px 12px;
  border-radius: 18px;
  border:1px solid rgba(36,48,85,.7);
  background: rgba(15,23,49,.55);
  cursor:pointer;
}
.store-btn:hover{border-color: rgba(86,224,255,.35)}
.store-btn:focus-visible{outline:2px solid rgba(86,224,255,.55); outline-offset:2px}
.store-badge{
  width:40px;height:40px;border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size: 18px;
}
.store-small{display:block; font-size: 12px; color: rgba(170,176,211,.92)}
.store-big{display:block; font-weight: 900}

.privacy-list{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(170,176,211,.95);
}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(17,26,53,.82);
  border:1px solid rgba(36,48,85,.75);
  box-shadow: var(--shadowSoft);
  color: rgba(233,236,255,.92);
  z-index: 140;
}

@media (max-width: 960px){
  .hero-inner{grid-template-columns: 1fr; gap: 26px}
  .hero-media{min-height: unset}
  .float-card{display:none}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .screen-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns: 1fr}
  .section-head{flex-direction:column; align-items:flex-start}
}

@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    position:absolute;
    right: 20px;
    top: 60px;
    width: min(340px, calc(100vw - 40px));
    padding: 10px;
    border-radius: 18px;
    background: rgba(7,10,20,.86);
    border:1px solid rgba(36,48,85,.7);
    box-shadow: var(--shadowSoft);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 12px}
  .hero{padding-top: 56px}
  .device-hero .device-frame{
    width: min(320px, 86vw);
    height: min(540px, 72vh);
  }
  .hero-metrics{grid-template-columns: 1fr}
  .cards{grid-template-columns: 1fr}
  .footer-inner{flex-direction:column; align-items:flex-start}
  .store-row{grid-template-columns: 1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn, .screen, .nav-links a{transition:none}
}