@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap");

:root {
  --navy: #171330;
  --blue: #6f63ee;
  --green: #00B866;
  --green-dark: #009E58;
  --violet: #00B866;
  --orange: #ff6a19;
  --gold: #ffae16;
  --muted: #746f8c;
  --line: #e7e3ff;
  --surface: rgba(255, 255, 255, 0.94);
  --shadow: 0 22px 55px rgba(0, 126, 70, 0.13);
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--navy);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f7fbff;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 14px;
  left: 50%;
  width: min(1480px, calc(100% - 48px));
  height: var(--header-h);
  transform: translateX(-50%);
  padding: 0 20px 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid rgba(220, 233, 245, 0.8);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(43, 89, 127, 0.1);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
}
.brand-mark {
  position: relative; width: 48px; height: 42px; border-radius: 16px;
  background: linear-gradient(145deg, #fff, #e8eef4);
  box-shadow: inset 0 -4px 8px #dce5ed, 0 4px 12px rgba(20, 50, 80, .12);
}
.brand-mark .ear { position:absolute; top: 3px; width: 15px; height: 18px; border-radius: 7px; background:#cbd5df; }
.brand-mark .ear.left { left:-4px; } .brand-mark .ear.right { right:-4px; }
.brand-mark .eye { position:absolute; top:16px; width:5px; height:8px; border-radius:5px; background:#101822; }
.brand-mark .eye.left { left:13px; } .brand-mark .eye.right { right:13px; }
.brand-mark .nose { position:absolute; top:20px; left:19px; width:11px; height:9px; border-radius:4px 4px 6px 6px; background:#111820; }
.brand-mark::after { content:"◆"; position:absolute; right:-7px; top:-9px; color:#16d477; font-size:13px; }
.brand-copy { display:flex; flex-direction:column; }
.brand-copy strong { font-size:22px; letter-spacing:1px; line-height:1.1; }
.brand-copy small { margin-top:4px; font-size:8px; letter-spacing:4px; color:#1c2b41; }
.nav-links { display:flex; gap:54px; font-size:15px; font-weight:600; color:#34435b; }
.nav-links { grid-column:2; }
.nav-links a { position:relative; padding:25px 0; transition:.2s; }
.nav-links a::after { content:""; position:absolute; bottom:13px; left:50%; width:0; height:3px; border-radius:3px; background:var(--green); transform:translateX(-50%); transition:.25s; }
.nav-links a:hover, .nav-links a.active { color:var(--navy); }
.nav-links a:hover::after, .nav-links a.active::after { width:28px; }
.nav-cta {
  justify-self:end; padding:13px 27px; border-radius:12px; color:#fff;
  background:linear-gradient(135deg,#1fd07b,#08aa60); box-shadow:0 8px 20px rgba(8,185,105,.26);
  font-size:15px; font-weight:700; transition:.2s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(8,185,105,.33); }

.snap-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.screen {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #fff;
}
.section-inner { position:relative; z-index:2; width:min(1440px, calc(100% - 80px)); height:100%; margin:0 auto; }
.compact { padding: 106px 0 30px; display:flex; flex-direction:column; justify-content:center; }
.hero { background:linear-gradient(112deg,#fff 0%,#f7fbff 48%,#eaf5ff 100%); }
.hero-art, .subscribe-art {
  position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover;
}
.hero-art { background-image:url("./assets/hero-koala.png"); }
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:145px;
  background:linear-gradient(to top,rgba(215,237,255,.72),transparent);
  clip-path:polygon(0 58%,5% 48%,8% 72%,12% 39%,16% 62%,20% 33%,25% 71%,30% 44%,34% 64%,39% 31%,44% 70%,49% 46%,54% 75%,58% 39%,62% 66%,67% 30%,71% 62%,76% 45%,80% 70%,85% 37%,89% 67%,94% 43%,100% 56%,100% 100%,0 100%);
  opacity:.32;
}
.hero-inner { display:flex; align-items:center; }
.hero-copy { width:58%; padding-top:55px; }
.hero h1 { margin:0 0 42px; font-size:clamp(54px,4.1vw,78px); line-height:1.25; letter-spacing:-3px; font-weight:900; }
.hero h1 em { color:var(--green); font-style:normal; font-size:1.18em; }
.hero-points { display:flex; width:650px; margin-bottom:42px; }
.hero-points > div { width:25%; text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; }
.hero-points > div:not(:last-child)::after { content:""; position:absolute; right:0; top:10px; width:1px; height:68px; background:#ccd7e4; }
.hero-points strong { margin-top:8px; font-size:17px; }
.hero-points small { font-size:14px; color:#55637a; margin-top:2px; }
.point-icon { position:relative; display:block; width:43px; height:43px; color:var(--green); }
.user-icon::before { content:""; position:absolute; left:14px; top:3px; width:13px; height:13px; border:3px solid currentColor; border-radius:50%; }
.user-icon::after { content:""; position:absolute; left:7px; bottom:1px; width:27px; height:18px; border:3px solid currentColor; border-bottom:0; border-radius:18px 18px 0 0; }
.chart-icon { color:var(--blue); border-bottom:3px solid currentColor; }
.chart-icon::before { content:""; position:absolute; left:7px; bottom:5px; width:5px; height:14px; background:currentColor; box-shadow:10px -8px currentColor,20px -18px currentColor,30px -25px currentColor; }
.chart-icon::after { content:"↗"; position:absolute; right:0; top:-7px; font-size:28px; font-weight:700; }
.target-icon { color:#00A85E; border:3px solid currentColor; border-radius:50%; transform:scale(.78); box-shadow:inset 0 0 0 8px white,inset 0 0 0 11px currentColor; }
.target-icon::after { content:"↗"; position:absolute; right:-9px; top:-15px; font-size:27px; font-weight:900; }
.shield-icon { color:#ff8b15; width:38px; height:42px; border:3px solid currentColor; border-radius:6px 6px 15px 15px; }
.shield-icon::after { content:"✓"; position:absolute; left:8px; top:5px; font-size:20px; font-weight:900; }
.primary-button, .subscribe-button {
  display:inline-flex; align-items:center; justify-content:center; gap:20px; border:0; cursor:pointer;
  padding:17px 31px; border-radius:14px; color:#fff; font-weight:700; font-size:18px;
  background:linear-gradient(135deg,#12c871,#06a95e); box-shadow:0 13px 30px rgba(8,185,105,.28);
  transition:transform .2s, box-shadow .2s;
}
.primary-button:hover, .subscribe-button:hover { transform:translateY(-3px); box-shadow:0 17px 36px rgba(8,185,105,.35); }
.scroll-hint { position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); color:#65758b; font-size:12px; letter-spacing:2px; }
.scroll-hint::after { content:""; display:block; width:1px; height:22px; margin:7px auto 0; background:linear-gradient(var(--green),transparent); animation:scrollLine 1.5s infinite; }
@keyframes scrollLine { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

.features { background:radial-gradient(circle at 50% 25%,#fff 0,#f7fbff 70%,#edf7ff 100%); }
.section-title { display:flex; align-items:center; justify-content:center; gap:19px; text-align:center; margin-bottom:22px; }
.section-title h2 { margin:0; font-size:37px; line-height:1.2; letter-spacing:1px; }
.section-title h2 span { color:#00A85E; margin-left:8px; }
.section-title p { margin:7px 0 0; color:var(--muted); font-size:15px; }
.spark { color:var(--green); font-size:15px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; min-height:0; flex:1; max-height:710px; }
.feature-card {
  --accent:var(--green); position:relative; overflow:hidden; min-height:0; padding:22px 22px 12px 70px;
  border:1px solid rgba(218,229,240,.95); border-radius:22px; background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(38,87,132,.08); transition:.25s;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 14px 35px rgba(38,87,132,.13); }
.feature-card.blue{--accent:var(--blue)} .feature-card.violet{--accent:var(--violet)} .feature-card.orange{--accent:var(--orange)} .feature-card.gold{--accent:var(--gold)} .feature-card.emerald{--accent:#00a968}
.number { position:absolute; top:18px; left:18px; display:grid; place-items:center; width:39px; height:39px; border-radius:50%; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--accent),white 20%),var(--accent)); font-size:22px; font-weight:800; box-shadow:0 5px 13px color-mix(in srgb,var(--accent),transparent 65%); }
.feature-content h3 { margin:1px 0 5px; color:var(--accent); font-size:22px; }
.feature-content p { margin:0; color:#34435b; font-size:15px; }
.feature-icon {
  position:absolute;
  left:36px;
  right:30px;
  bottom:4px;
  height:62%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.feature-icon::before {
  content:"";
  position:absolute;
  left:50%;
  bottom:8%;
  width:58%;
  height:18%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,96,54,.18),transparent 70%);
  filter:blur(9px);
  transform:translateX(-50%);
  opacity:.7;
}
.feature-icon img {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 14px 14px rgba(20,50,45,.14));
  transform:translateY(3px) scale(.96);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
.feature-card:hover .feature-icon img {
  transform:translateY(-4px) scale(1.01) rotate(-1deg);
  filter:drop-shadow(0 20px 18px rgba(0,112,62,.2));
}
.scene { position:absolute; left:22px; right:22px; bottom:8px; height:54%; }
.person { position:absolute; bottom:8px; width:62px; height:87px; border-radius:30px 30px 16px 16px; background:#16bd70; color:#fff; font-size:27px; font-weight:800; display:grid; place-items:center; box-shadow:inset 0 12px #f8d1bb; }
.teacher { left:23%; } .student { right:25%; height:70px; background:#173353; box-shadow:inset 0 14px #f4c7a7; }
.desk { position:absolute; left:13%; right:13%; bottom:0; height:26px; border-radius:8px; background:#eef4f8; box-shadow:0 5px 13px #cbd7e3; }
.chat { position:absolute; left:50%; top:2px; padding:4px 10px; border-radius:12px 12px 12px 2px; background:#84d9a8; color:#fff; letter-spacing:3px; }
.diagnosis-scene svg { width:100%; height:100%; overflow:visible; }
.diagnosis-scene path { fill:none; stroke:#2e7cec; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.diagnosis-scene .area { fill:rgba(63,140,243,.15); stroke:none; }
.score { position:absolute; left:9%; bottom:8px; padding:8px 13px; border-radius:10px; background:#fff; color:#71809a; box-shadow:0 5px 16px rgba(35,80,130,.13); font-size:11px; }
.score b { color:#1769ea; font-size:20px; }
.target-rings { position:absolute; left:28%; top:0; width:112px; height:112px; border:17px solid #00A85E; border-radius:50%; box-shadow:inset 0 0 0 14px #E7F8F0,inset 0 0 0 27px #00A85E; }
.arrow { position:absolute; left:47%; top:34px; width:70px; height:9px; border-radius:10px; background:#008F50; transform:rotate(-43deg); }
.arrow::after { content:""; position:absolute; right:-8px; top:-7px; border-left:18px solid #008F50; border-top:11px solid transparent; border-bottom:11px solid transparent; }
.checklist { position:absolute; right:16%; bottom:0; width:72px; height:90px; padding:12px 16px; border-radius:9px; background:#fff; color:#20bf75; font-size:20px; line-height:22px; box-shadow:0 8px 18px rgba(53,54,145,.16); transform:rotate(7deg); }
.folder { position:absolute; left:16%; bottom:15px; width:90px; height:63px; border-radius:8px; background:linear-gradient(#ffbd43,#ff7c0f); color:white; display:grid; place-items:center; font-size:30px; box-shadow:0 8px 18px rgba(255,105,15,.22); }
.folder::before { content:""; position:absolute; left:9px; top:-11px; width:36px; height:18px; border-radius:5px 5px 0 0; background:#ff9b20; }
.folder.second { left:auto; right:13%; transform:scale(.8); }
.report { position:absolute; left:44%; bottom:10px; width:92px; height:105px; padding:54px 15px 10px; border-radius:9px; background:#fff; box-shadow:0 8px 18px rgba(30,75,125,.14); }
.report::before { content:""; position:absolute; left:13px; top:16px; width:35px; height:35px; border-radius:50%; background:conic-gradient(#2ea6ec 0 25%,#ffbd32 0 52%,#51ca7d 0); }
.report i { display:inline-block; vertical-align:bottom; width:10px; margin-right:3px; background:#4a9af4; }.report i:nth-child(1){height:12px}.report i:nth-child(2){height:25px}.report i:nth-child(3){height:37px}
.trophy { position:absolute; left:22%; bottom:5px; width:110px; height:98px; border-radius:10px 10px 45px 45px; background:linear-gradient(135deg,#ffc637,#ef8b00); color:#fff2b7; display:grid; place-items:center; font-size:42px; box-shadow:0 10px 22px rgba(239,139,0,.25); }
.trophy::before,.trophy::after { content:""; position:absolute; top:12px; width:34px; height:45px; border:10px solid #eda00c; }.trophy::before{left:-30px;border-radius:25px 0 0 25px}.trophy::after{right:-30px;border-radius:0 25px 25px 0}
.medal { position:absolute; left:52%; bottom:0; width:46px; height:46px; border:9px solid #ffb81d; border-radius:50%; background:#fff1b3; color:#e88800; display:grid; place-items:center; font-weight:900; }
.progress { position:absolute; right:11%; bottom:7px; width:110px; height:105px; padding:35px 13px 10px; background:white; border-radius:10px; box-shadow:0 8px 18px rgba(30,75,125,.13); }.progress::before{content:"学习进度";position:absolute;top:0;left:0;right:0;padding:7px;background:#69d379;color:#fff;border-radius:10px 10px 0 0;font-size:11px}.progress i{display:block;width:80%;height:5px;margin:8px 0;background:#d7e5ec;border-radius:5px}.progress i::before{content:"";display:block;width:70%;height:100%;background:#55ca7e;border-radius:5px}
.calendar-scene { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; padding:0 9%; }
.calendar-scene span { display:grid; place-items:center; height:82px; color:white; font-size:30px; box-shadow:0 9px 18px rgba(19,113,98,.12); }.calendar-scene span:nth-child(1){background:#33bff2}.calendar-scene span:nth-child(2){background:#42cb91}.calendar-scene span:nth-child(3){background:#ffbd22}.calendar-scene span:nth-child(4){background:#e88525}
.calendar-scene::before { content:""; position:absolute; left:7%; right:7%; top:4px; height:18px; border-radius:8px; background:#00a968; box-shadow:25px -8px 0 -5px #00a968,92px -8px 0 -5px #00a968,159px -8px 0 -5px #00a968,226px -8px 0 -5px #00a968,293px -8px 0 -5px #00a968; }
.price-strip { display:flex; align-items:center; justify-content:center; gap:18px; padding-top:17px; }
.price-strip b { color:var(--blue); font-size:32px; }.price-strip span{font-size:17px;font-weight:700}

.download {
  background:
    radial-gradient(circle at 76% 48%, rgba(110, 229, 170, .19), transparent 27%),
    radial-gradient(circle at 18% 80%, rgba(75, 143, 255, .12), transparent 29%),
    linear-gradient(135deg, #f8fcff, #fff 45%, #effff6);
}
.download-inner { display:grid; grid-template-columns: 48% 52%; align-items:center; padding-top:70px; }
.download-copy h2 { margin:0; font-size:58px; line-height:1.25; letter-spacing:-2px; }
.download-copy h2::first-line { color:var(--navy); }
.download-copy > p { width:600px; margin:20px 0 34px; color:#65758b; font-size:18px; line-height:1.9; }
.download-actions { display:flex; align-items:center; gap:24px; }
.qr-card { width:200px; padding:16px 16px 14px; border:1px solid #dfe9f2; border-radius:21px; background:white; box-shadow:0 15px 35px rgba(33,85,120,.12); text-align:center; }
.qr-card span { display:block; margin-top:10px; color:#4e5d72; font-size:14px; font-weight:600; }
.qr-code { display:block; width:166px; height:166px; margin:0 auto; padding:8px; border-radius:11px; background:#f5fbf8; object-fit:contain; }
.store-buttons { display:flex; flex-direction:column; gap:10px; }
.store-button { position:relative; display:grid; grid-template-columns:45px 1fr; grid-template-rows:auto auto; width:245px; min-height:69px; padding:10px 18px; border-radius:14px; background:#08182f; color:white; box-shadow:0 10px 24px rgba(8,24,47,.16); transition:.2s; }
.store-button:hover { transform:translateY(-2px); background:#0c2446; }
.store-logo { grid-row:1/3; align-self:center; font-size:29px; }.store-logo.play{font-size:25px;color:#42d987}
.store-button small { align-self:end; font-size:10px; color:#cbd4df; }.store-button b{font-size:18px;line-height:1.15}
.store-buttons p { margin:1px 0 0; text-align:center; color:#8592a5; font-size:12px; }
.phone-stage { position:relative; height:760px; }
.phone {
  position:absolute;
  overflow:hidden;
  width:326px;
  aspect-ratio:750/1623;
  padding:9px;
  border:3px solid #1c2636;
  border-radius:48px;
  background:#111827;
  box-shadow:0 35px 70px rgba(16,64,80,.24), inset 0 0 0 1px #7f8c9d;
}
.phone img { display:block; width:100%; height:100%; border-radius:37px; object-fit:cover; }
.main-phone { z-index:2; left:44%; top:24px; transform:rotate(4deg); }
.back-phone { z-index:1; left:4%; top:74px; transform:rotate(-9deg) scale(.9); opacity:.94; }
.phone-screen { height:100%; overflow:hidden; border-radius:34px; background:linear-gradient(#edfff5,#f7fbff); }
.home-screen { padding:58px 22px 24px; }
.app-head { display:flex; align-items:center; gap:13px; }.app-koala{display:grid;place-items:center;width:57px;height:57px;border-radius:18px;background:white;font-size:35px;box-shadow:0 7px 18px rgba(37,90,120,.1)}
.app-head div{display:flex;flex-direction:column}.app-head small{color:#8090a3;font-size:12px}.app-head b{margin-top:3px;font-size:16px}
.study-card { position:relative; height:138px; margin-top:25px; padding:20px; border-radius:22px; color:white; background:linear-gradient(135deg,#10c879,#079f5d); box-shadow:0 14px 28px rgba(8,185,105,.25); }
.study-card span{display:block;font-size:13px}.study-card b{display:block;margin-top:10px;font-size:35px}.study-card i{position:absolute;left:20px;right:20px;bottom:21px;height:8px;border-radius:8px;background:rgba(255,255,255,.3)}.study-card i::after{content:"";display:block;width:75%;height:100%;border-radius:8px;background:white}
.app-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 }.app-grid span{height:83px;padding-top:47px;border-radius:17px;background:white;text-align:center;color:#405068;font-size:12px;box-shadow:0 8px 19px rgba(35,80,120,.08)}.app-grid span::before{content:"◆";display:block;margin-top:-31px;color:var(--green);font-size:21px}
.home-screen button { width:100%;padding:14px;border:0;border-radius:13px;background:#10284b;color:white;font-weight:700 }
.report-screen { padding:58px 24px 25px;background:linear-gradient(#eef4ff,#fff) }.screen-label{font-size:19px;font-weight:800}.radar{width:185px;height:185px;margin:32px auto;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 25px,#b9cef4 26px 27px),conic-gradient(from 20deg,rgba(50,115,237,.55),rgba(38,205,133,.3),rgba(111,79,240,.55),rgba(50,115,237,.55));clip-path:polygon(50% 0,95% 27%,85% 80%,50% 100%,13% 78%,7% 29%)}
.bars { display:flex;align-items:end;gap:11px;height:175px;padding:20px;border-radius:20px;background:white;box-shadow:0 10px 25px rgba(40,75,130,.1) }.bars i{flex:1;border-radius:7px 7px 2px 2px;background:linear-gradient(#6d5ef5,#3789f1)}.bars i:nth-child(1){height:40%}.bars i:nth-child(2){height:68%}.bars i:nth-child(3){height:51%}.bars i:nth-child(4){height:90%}
.float-cube { position:absolute; width:56px;height:56px; border:2px solid rgba(15,192,113,.35); background:rgba(29,220,132,.14); box-shadow:inset 12px 0 rgba(54,201,238,.08); transform:rotate(22deg); }.cube-a{right:2%;top:80px}.cube-b{left:2%;bottom:80px;width:38px;height:38px}.cube-c{right:10%;bottom:35px;width:29px;height:29px;background:rgba(66,125,255,.18);border-color:rgba(66,125,255,.35)}
.download-orb { position:absolute;border-radius:50%;filter:blur(2px) }.orb-one{right:7%;top:15%;width:180px;height:180px;border:1px solid rgba(8,185,105,.14)}.orb-two{left:4%;bottom:8%;width:260px;height:260px;border:1px solid rgba(45,111,229,.1)}

.about { background:linear-gradient(132deg,#f5fbff,#fff 52%,#f1fff7); }
.about-inner { display:grid;grid-template-columns:46% 54%;align-items:center;padding-top:72px }
.about-copy { padding-left:70px; }
.about-copy h2 { margin:0 0 20px;color:var(--green);font-size:25px;letter-spacing:5px }
.about-copy h3 { margin:0;font-size:68px;line-height:1.3;letter-spacing:-2px }
.about-copy h3 span { color:var(--green); }
.about-copy > p { max-width:710px;margin:0;color:#65758b;font-size:17px;line-height:2 }
.values { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:35px 0 32px }
.values article { display:flex;gap:12px;padding:19px 14px;border:1px solid #deebf4;border-radius:17px;background:rgba(255,255,255,.85);box-shadow:0 9px 24px rgba(35,78,120,.07) }
.values i { color:var(--green);font-size:13px;font-style:normal;font-weight:800 }.values article div{display:flex;flex-direction:column}.values b{font-size:15px}.values span{margin-top:5px;color:#8793a4;font-size:11px}
.about-button { padding:15px 31px;font-size:16px }
.about-visual { position:relative;height:650px;display:grid;place-items:center }
.about-logo {
  position:relative;
  z-index:2;
  width:min(360px, 62%);
  aspect-ratio:1;
  object-fit:contain;
  background:transparent;
  filter:drop-shadow(0 22px 26px rgba(43, 76, 118, .13));
}
.about-mark { position:relative;width:330px;height:295px;border-radius:105px;background:linear-gradient(145deg,#fff,#dfe8ef);box-shadow:inset -20px -25px 40px #cbd8e2,0 40px 70px rgba(48,94,125,.17);transform:rotate(-3deg) }
.about-ear { position:absolute;top:25px;width:122px;height:147px;border-radius:55px;background:linear-gradient(145deg,#f8fafc,#c9d5df);box-shadow:inset -12px -10px 22px #b8c6d1 }.about-ear.left{left:-75px}.about-ear.right{right:-75px}
.about-mark i,.about-mark b { position:absolute;top:125px;width:31px;height:52px;border-radius:22px;background:#111820;box-shadow:inset 5px 5px #4a5360 }.about-mark i{left:76px}.about-mark b{right:76px}
.about-mark em { position:absolute;left:50%;top:144px;width:72px;height:65px;border-radius:23px 23px 30px 30px;background:#111820;transform:translateX(-50%);box-shadow:inset 8px 7px #333c47 }
.about-mark::before,.about-mark::after{content:"";position:absolute;top:180px;width:38px;height:23px;border-radius:50%;background:#ffc7cb}.about-mark::before{left:38px}.about-mark::after{right:38px}
.orbit { position:absolute;border:1px solid rgba(8,185,105,.2);border-radius:50%;transform:rotate(-18deg) }.orbit-one{width:540px;height:380px}.orbit-two{width:640px;height:490px;border-color:rgba(52,113,230,.13);transform:rotate(25deg)}.orbit-one::before,.orbit-two::after{content:"";position:absolute;width:31px;height:31px;background:rgba(8,185,105,.65);border-radius:7px;transform:rotate(25deg)}.orbit-one::before{right:35px;top:42px}.orbit-two::after{left:43px;bottom:60px;background:rgba(61,113,240,.45)}
.about-city { position:absolute;left:0;right:0;bottom:0;height:170px;opacity:.18;background:linear-gradient(to top,#9bc7e9,transparent);clip-path:polygon(0 65%,4% 65%,4% 35%,8% 35%,8% 75%,12% 75%,12% 18%,16% 18%,16% 60%,20% 60%,20% 42%,25% 42%,25% 70%,30% 70%,30% 28%,34% 28%,34% 76%,39% 76%,39% 45%,44% 45%,44% 70%,49% 70%,49% 24%,54% 24%,54% 68%,59% 68%,59% 40%,63% 40%,63% 76%,68% 76%,68% 15%,73% 15%,73% 64%,78% 64%,78% 37%,83% 37%,83% 71%,88% 71%,88% 23%,93% 23%,93% 61%,100% 61%,100% 100%,0 100%)}
.about footer { position:absolute;z-index:3;left:20px;right:20px;bottom:14px;text-align:center;color:#98a5b6;font-size:12px;line-height:1.8 }
.about footer a { color:inherit; }

.benefits { background:linear-gradient(180deg,#fff,#f3f8ff); }
.benefits .section-title { margin-bottom:35px; }
.benefit-list { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; height:min(55vh,520px); }
.benefit-card { position:relative; overflow:hidden; padding:28px 15px 18px; border:1px solid var(--line); border-radius:21px; background:#fff; text-align:center; box-shadow:var(--shadow); transition:.25s; }
.benefit-card:hover { transform:translateY(-5px); }
.benefit-card > b { color:#6d65f5; font-size:39px; line-height:1; }
.benefit-card h3 { margin:15px 0 7px; font-size:17px; }.benefit-card p{margin:0;color:var(--muted);font-size:13px}
.benefit-icon { position:absolute; left:50%; bottom:24px; width:150px; height:150px; transform:translateX(-50%); }
.benefit-icon.calendar { border-radius:20px; background:linear-gradient(#24C77E 0 27%,#fff 27%); box-shadow:0 13px 25px rgba(0,126,70,.18); }
.benefit-icon.calendar::before { content:""; position:absolute; inset:53px 22px 30px; background:repeating-linear-gradient(90deg,#dce5ef 0 12px,transparent 12px 26px),repeating-linear-gradient(#dce5ef 0 5px,transparent 5px 20px); }
.benefit-icon.calendar span { position:absolute; right:-13px; bottom:-8px; width:56px; height:56px; display:grid;place-items:center;border-radius:50%;background:#51ca83;color:white;font-size:30px;border:7px solid white }
.benefit-icon.headset::before { content:""; position:absolute; left:35px; top:5px; width:80px; height:100px; border-radius:38px 38px 28px 28px; background:linear-gradient(#343745 0 25%,#f3d6c5 25% 53%,#fff 53%); box-shadow:inset 0 0 0 9px #f7fbff; }
.benefit-icon.headset::after { content:""; position:absolute; left:19px; top:17px; width:103px; height:75px; border:13px solid #31c47c; border-bottom:0; border-radius:55px 55px 0 0; }
.benefit-icon.headset span { position:absolute; right:4px; top:64px; width:47px; height:37px; border-radius:10px; background:#00A85E; box-shadow:0 8px 15px rgba(0,112,62,.22); }
.benefit-icon.report-icon { border-radius:16px; background:#fff; box-shadow:0 12px 30px rgba(61,100,150,.18); }
.benefit-icon.report-icon::before { content:""; position:absolute; left:24px; bottom:25px; width:20px; height:45px; background:#82d991; box-shadow:30px -20px #71a9f5,60px -47px #7c6cf4,90px -66px #446ce4; border-radius:5px 5px 0 0; }
.benefit-icon.report-icon::after { content:""; position:absolute; left:20px; top:18px; width:50px; height:50px; border:13px solid #5ed08b; border-right-color:#dfe8ef; border-radius:50%; }
.benefit-icon.scan { width:142px; height:142px; border-radius:38px; background:linear-gradient(145deg,#8198be,#42597d); clip-path:polygon(50% 0,88% 13%,100% 50%,87% 88%,50% 100%,12% 87%,0 50%,13% 13%); box-shadow:inset 0 0 0 22px rgba(255,255,255,.25); }
.benefit-icon.scan span { position:absolute; inset:39px; display:grid;place-items:center;border-radius:17px;background:#14bd74;color:white;font-size:45px;font-weight:900 }
.benefit-icon.message { width:156px;height:129px;border-radius:25px;background:linear-gradient(145deg,#8be4ad,#29b96f);box-shadow:0 13px 30px rgba(18,153,92,.22) }.benefit-icon.message::after{content:"";position:absolute;left:30px;bottom:-17px;border-top:31px solid #29b96f;border-right:31px solid transparent}.benefit-icon.message span{font-size:70px;line-height:1.7}
.assurance-bar { margin-top:28px; min-height:72px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 12px 32px rgba(38,87,132,.07); }
.assurance-bar span { display:flex; align-items:center; justify-content:center; gap:10px; color:#34435b; font-size:15px; font-weight:600; }
.assurance-bar i { display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e2faeb;color:var(--green);font-style:normal;font-weight:900 }

.pricing { background:radial-gradient(circle at 85% 20%,#edfff5,#fff 42%,#f3f8ff); }
.pricing-heading { text-align:center; margin-bottom:23px; }
.pricing-heading h2 { margin:0; font-size:38px; }.pricing-heading h2 span{color:var(--green);font-size:44px}.pricing-heading p{margin:7px 0 0;color:var(--muted);font-size:15px}.pricing-heading p b{color:var(--green)}
.comparison-wrap { overflow:hidden; border:1px solid #dce8f3; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
th,td { height:72px; padding:8px 13px; border-right:1px solid #e1eaf3; border-bottom:1px solid #e1eaf3; text-align:center; font-size:14px; color:#43516a; }
thead th { height:62px; background:#fbfdff; color:#2f3f57; font-size:15px; }
tbody th { text-align:left; padding-left:34px; color:#24364f; font-weight:700; }
tbody th i { display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:7px;background:#e4f9ed;color:var(--green);font-style:normal }
tr:last-child th,tr:last-child td{border-bottom:0} th:last-child,td:last-child{border-right:0}
.yes { color:var(--green); font-size:23px; font-weight:900; }.no{color:#9ba8bb;font-size:23px}
.featured { border-left:2px solid #4ad489 !important; border-right:2px solid #4ad489 !important; background:#f7fffa !important; color:#0b7e4d; }
thead .featured { border-top:2px solid #4ad489; border-radius:18px 18px 0 0; color:var(--green-dark); font-weight:800; font-size:17px; }
tbody tr:last-child .featured { border-bottom:2px solid #4ad489; border-radius:0 0 18px 18px; }
.featured b{color:var(--green);font-size:16px}.price-cell{font-size:25px;font-weight:900;color:var(--green)}
.mini-koala { float:right; font-size:25px; }
.pricing .assurance-bar { margin-top:20px; }

.subscribe { background:#fff; }
.subscribe-art { background-image:url("./assets/reading-koala.png"); }
.subscribe-inner { display:flex; align-items:center; }
.subscribe-copy { width:51%; padding-top:40px; }
.subscribe-copy h2 { margin:0; font-size:59px; line-height:1.24; letter-spacing:-2px; }.subscribe-copy h2 span{color:var(--green)}
.subscribe-copy > p { margin:17px 0 28px; color:#6d7c91; font-size:20px; }
.subscribe-button { width:490px; font-size:24px; border-radius:16px; }
.agreement { display:flex;align-items:center;gap:9px;margin-top:17px;color:#7c899b;font-size:12px;cursor:pointer }
.agreement input { width:18px;height:18px;accent-color:var(--green) }
.form-message { height:22px; margin:8px 0 0 !important; font-size:13px !important; color:#ef4b4b !important; }
.subscribe footer { position:absolute; z-index:3; left:0; right:0; bottom:18px; text-align:center; color:#98a5b6; font-size:12px; }

.section-dots { position:fixed; z-index:45; right:26px; top:50%; display:flex; flex-direction:column; gap:12px; transform:translateY(-50%); }
.section-dots a { width:8px;height:8px;border-radius:50%;background:#c6d3e1;transition:.25s;box-shadow:0 0 0 5px transparent }
.section-dots a.active { background:var(--green); transform:scale(1.35); box-shadow:0 0 0 5px rgba(8,185,105,.13) }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.feature-card:nth-child(2),.benefit-card:nth-child(2){transition-delay:.06s}.feature-card:nth-child(3),.benefit-card:nth-child(3){transition-delay:.12s}.feature-card:nth-child(4),.benefit-card:nth-child(4){transition-delay:.18s}.feature-card:nth-child(5),.benefit-card:nth-child(5){transition-delay:.24s}.feature-card:nth-child(6){transition-delay:.3s}

@media (max-width: 1400px), (max-height: 850px) {
  :root { --header-h:64px; }
  .site-header { top:10px; width:calc(100% - 32px); }
  .compact { padding-top:84px; padding-bottom:18px; }
  .section-inner { width:min(1260px,calc(100% - 60px)); }
  .hero h1 { font-size:55px; margin-bottom:28px; }.hero-points{margin-bottom:27px}
  .section-title { margin-bottom:14px }.section-title h2{font-size:31px}.section-title p{font-size:13px}
  .feature-grid { gap:10px }.feature-card{padding-top:15px;padding-bottom:8px}.feature-content h3{font-size:18px}.feature-content p{font-size:13px}.number{width:34px;height:34px;font-size:18px;top:13px}
  .price-strip{padding-top:9px}.price-strip b{font-size:25px}.price-strip span{font-size:14px}
  .download-inner,.about-inner{padding-top:60px}.download-copy h2{font-size:49px}.download-copy>p{width:520px;font-size:15px}.phone-stage{height:650px;transform:scale(.87);transform-origin:center}.about-visual{height:560px;transform:scale(.9)}.about-copy h3{font-size:56px}.about-copy>p{font-size:14px}.values{margin:24px 0}.values article{padding:14px 10px}
  .benefits .section-title{margin-bottom:18px}.benefit-list{height:min(58vh,440px)}.benefit-card{padding-top:18px}.benefit-card>b{font-size:30px}.benefit-card h3{margin:9px 0 4px;font-size:14px}.benefit-icon{transform:translateX(-50%) scale(.78);transform-origin:bottom center}
  .assurance-bar{margin-top:15px;min-height:58px}
  .pricing-heading{margin-bottom:12px}.pricing-heading h2{font-size:31px}.pricing-heading h2 span{font-size:36px}th,td{height:58px}.comparison-wrap{max-height:65vh}.pricing .assurance-bar{margin-top:12px}
  .subscribe-copy h2{font-size:51px}.subscribe-button{width:430px}
}

@media (prefers-reduced-motion: reduce) {
  html,.snap-container{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-hint::after{animation:none}
}

/* 2026 purple pixel design system */
body {
  background:#F3FBF7;
  cursor:default;
}

.site-header {
  border-color:rgba(0,184,102,.18);
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 45px rgba(0,112,62,.11), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(1.25);
}
.brand-mark {
  background:linear-gradient(145deg,#fff,#eeeaff);
  box-shadow:inset 0 -4px 8px #D7F1E4,0 6px 15px rgba(0,126,70,.18);
}
.brand-mark::after { color:#00B866; text-shadow:0 3px 9px rgba(0,184,102,.4); }
.brand-copy small { color:#625a82; }
.nav-links { color:#5f5974; }
.nav-links a::after { height:4px; background:#00B866; box-shadow:0 3px 10px rgba(0,184,102,.45); }
.nav-links a:hover,.nav-links a.active { color:#241d4d; }
.nav-cta {
  border:1px solid rgba(255,255,255,.45);
  border-radius:14px;
  background:#00B866;
  box-shadow:0 10px 25px rgba(0,158,88,.3),inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-cta:hover { background:#009E58; box-shadow:0 15px 30px rgba(0,158,88,.38); }

.screen::selection { color:white; background:#00B866; }
.hero {
  background:
    radial-gradient(circle at 12% 18%,rgba(0,184,102,.16),transparent 24%),
    radial-gradient(circle at 80% 72%,rgba(178,238,219,.28),transparent 28%),
    #fbfaff;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.48;
  background-image:
    linear-gradient(rgba(0,184,102,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,184,102,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(90deg,#000,transparent 58%);
}
.hero::after {
  height:180px;
  opacity:.22;
  background:#00B866;
  clip-path:polygon(0 68%,4% 68%,4% 42%,8% 42%,8% 77%,13% 77%,13% 26%,18% 26%,18% 64%,23% 64%,23% 48%,28% 48%,28% 76%,34% 76%,34% 35%,40% 35%,40% 67%,46% 67%,46% 45%,52% 45%,52% 75%,58% 75%,58% 30%,64% 30%,64% 69%,70% 69%,70% 42%,76% 42%,76% 78%,82% 78%,82% 33%,88% 33%,88% 66%,94% 66%,94% 49%,100% 49%,100% 100%,0 100%);
}
.hero-art { z-index:1; }
.hero-copy { position:relative; z-index:3; }
.hero-copy::before {
  content:"PIXEL  LEARNING  COMPANION";
  display:block;
  width:max-content;
  margin-bottom:20px;
  color:#00B866;
  font-size:12px;
  font-weight:800;
  letter-spacing:5px;
}
.hero h1 { color:#171330; text-shadow:0 2px 0 #fff; }
.hero h1 em {
  color:#00B866;
  -webkit-text-fill-color:#00B866;
  text-shadow:0 8px 24px rgba(0,184,102,.13);
}
.hero-points {
  width:670px;
  padding:20px 12px;
  border:1px solid rgba(0,184,102,.14);
  border-radius:22px;
  background:rgba(255,255,255,.67);
  box-shadow:0 18px 45px rgba(0,126,70,.08);
  backdrop-filter:blur(15px);
}
.hero-points > div:not(:last-child)::after { background:#D8F1E5; }
.hero-points .point-icon { color:#00B866; }
.hero-points small { color:#79728e; }
.primary-button,.subscribe-button {
  border-radius:16px;
  background:#00B866;
  box-shadow:0 15px 34px rgba(0,158,88,.32),inset 0 1px 0 rgba(255,255,255,.3);
}
.primary-button span { transition:transform .25s; }
.primary-button:hover,.subscribe-button:hover { background:#009E58; box-shadow:0 20px 40px rgba(0,158,88,.4); }
.primary-button:hover span { transform:translateY(4px); }
.scroll-hint::after { width:2px; background:linear-gradient(#00B866,transparent); }

.features {
  background:
    radial-gradient(circle at 8% 80%,rgba(0,184,102,.14),transparent 25%),
    linear-gradient(155deg,#F3FBF7,#fff 52%,#EEF9F3);
}
.features::before {
  content:"";
  position:absolute;
  top:17%;right:-80px;
  width:310px;height:310px;
  border:1px solid rgba(0,184,102,.18);
  border-radius:68px;
  transform:rotate(24deg);
  box-shadow:inset 40px 0 rgba(0,184,102,.035);
}
.section-title { margin-bottom:28px; }
.section-title h2 { color:#1e183f; font-size:40px; letter-spacing:-1px; }
.section-title p { color:#77708f; }
.spark { color:#00B866; filter:drop-shadow(0 4px 6px rgba(0,184,102,.38)); }
.feature-grid { gap:18px; }
.feature-card {
  --accent:#00B866;
  border:1px solid rgba(0,184,102,.16);
  border-radius:26px 12px 26px 12px;
  background:rgba(255,255,255,.82);
  box-shadow:0 14px 38px rgba(0,120,67,.09),inset 0 1px 0 white;
  backdrop-filter:blur(12px);
}
.feature-card::before {
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:5px;
  background:linear-gradient(90deg,var(--accent),transparent 72%);
  opacity:.8;
}
.feature-card::after {
  content:"";
  position:absolute;
  right:-34px;top:-34px;
  width:90px;height:90px;
  border:1px solid color-mix(in srgb,var(--accent),transparent 72%);
  border-radius:22px;
  transform:rotate(25deg);
}
.feature-card:hover {
  transform:translateY(-7px) rotate(-.25deg);
  border-color:rgba(0,184,102,.35);
  box-shadow:0 24px 50px rgba(0,120,67,.15);
}
.feature-card.blue{--accent:#6c8cff}.feature-card.violet{--accent:#00B866}.feature-card.orange{--accent:#ff8a65}.feature-card.gold{--accent:#f4b94f}.feature-card.emerald{--accent:#55c8a5}
.number { border-radius:13px 7px 13px 7px; }
.feature-content h3 { letter-spacing:.2px; }
.target-rings { border-color:#00B866; box-shadow:inset 0 0 0 14px #E7F8F0,inset 0 0 0 27px #00B866; }
.arrow { background:#009E58; }.arrow::after{border-left-color:#009E58}
.calendar-scene::before { background:#00B866; box-shadow:25px -8px 0 -5px #00B866,92px -8px 0 -5px #00B866,159px -8px 0 -5px #00B866,226px -8px 0 -5px #00B866,293px -8px 0 -5px #00B866; }

.download {
  background:
    radial-gradient(circle at 77% 48%,rgba(0,184,102,.18),transparent 31%),
    radial-gradient(circle at 12% 83%,rgba(113,205,183,.12),transparent 25%),
    #F8FCFA;
}
.download::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(0,184,102,.16) 1.5px,transparent 1.5px);
  background-size:34px 34px;
  mask-image:linear-gradient(100deg,#000,transparent 42%);
  opacity:.45;
}
.download-copy { position:relative; }
.download-copy::before {
  content:"APP / 01";
  display:grid;
  place-items:center;
  width:78px;height:32px;
  margin-bottom:22px;
  border:1px solid rgba(0,184,102,.28);
  border-radius:8px;
  color:#009E58;
  background:rgba(255,255,255,.65);
  font-size:11px;font-weight:800;letter-spacing:2px;
}
.download-copy h2 { color:#1b1539; font-size:64px; }
.download-copy h2::first-line { color:#1b1539; }
.download-copy > p { color:#77708d; }
.qr-card {
  position:relative;
  border:1px solid rgba(0,184,102,.2);
  border-radius:14px 30px 14px 30px;
  background:rgba(255,255,255,.88);
  box-shadow:0 22px 50px rgba(0,126,70,.14);
}
.qr-card::after {
  content:"";
  position:absolute;
  right:-10px;top:-10px;
  width:24px;height:24px;
  border-radius:7px;
  background:#00B866;
  box-shadow:0 8px 15px rgba(0,184,102,.3);
  transform:rotate(18deg);
}
.qr-code { background:#EAF8F1; }
.phone {
  border-color:#2b2450;
  background:#211b3e;
  box-shadow:0 42px 75px rgba(0,82,46,.26),inset 0 0 0 1px #00B866;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.phone-stage:hover .main-phone { transform:rotate(1deg) translateY(-10px); }
.phone-stage:hover .back-phone { transform:rotate(-12deg) scale(.9) translateX(-8px); }
.float-cube { border-color:rgba(0,184,102,.42); background:rgba(0,184,102,.13); box-shadow:inset 12px 0 rgba(151,232,196,.12),0 12px 30px rgba(0,184,102,.12); }
.cube-c { background:rgba(85,200,165,.15);border-color:rgba(85,200,165,.38); }
.download-orb { border-color:rgba(0,184,102,.16)!important; }

.about {
  background:
    radial-gradient(circle at 20% 50%,rgba(0,184,102,.2),transparent 25%),
    linear-gradient(125deg,#F1FAF6,#fff 53%,#EAF8F1);
}
.about::before {
  content:"";
  position:absolute;
  left:-120px;top:20%;
  width:520px;height:520px;
  border:1px solid rgba(0,184,102,.18);
  border-radius:110px;
  transform:rotate(22deg);
  box-shadow:inset -80px 0 rgba(0,184,102,.035);
}
.about-visual::before,.about-visual::after {
  content:"";
  position:absolute;
  border:1px solid rgba(0,184,102,.23);
  transform:rotate(26deg);
}
.about-visual::before { width:460px;height:460px;border-radius:88px; }
.about-visual::after { width:340px;height:340px;border-radius:70px;transform:rotate(-12deg); }
.about-logo { z-index:3; filter:drop-shadow(0 28px 28px rgba(0,112,62,.18)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.about-visual:hover .about-logo { transform:translateY(-9px) rotate(-2deg); }
.about-copy { position:relative; padding-left:80px; }
.about-copy::before {
  content:"";
  position:absolute;
  left:30px;top:4px;bottom:4px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(#00B866,rgba(0,184,102,.08));
}
.about-copy h2 { color:#00B866; }
.about-copy h3 { color:#191432; font-size:72px; }
.about-copy h3 span { color:#00B866; }
.about-city { opacity:.12;background:#00B866; }
.about footer { color:#85809a; }

.section-dots { right:30px; gap:15px; }
.section-dots a { width:9px;height:9px;background:#CFE8DC; }
.section-dots a.active { background:#00B866;box-shadow:0 0 0 6px rgba(0,184,102,.14),0 0 18px rgba(0,184,102,.4); }
.reveal { transform:translateY(24px) scale(.985); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { transform:none; }

@media (max-width:1400px),(max-height:850px) {
  .hero-copy::before { margin-bottom:13px; }
  .hero-points { padding:13px 10px; }
  .section-title { margin-bottom:16px; }
  .feature-grid { gap:12px; }
  .download-copy h2 { font-size:52px; }
  .phone-stage { height:620px;transform:scale(.8); }
  .about-copy h3 { font-size:58px; }
}