:root {
  color: #173c3b;
  background: #fbfaf6;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-synthesis: none;
  --ink: #173c3b;
  --muted: #647876;
  --teal: #087f83;
  --teal-dark: #075e62;
  --mint: #dff3ed;
  --cream: #f5f0e6;
  --paper: #fff;
  --line: #dfe7e2;
  --orange: #ef7a56;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: #fbfaf6; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; border-radius: 10px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed; z-index: 30; inset: 0 0 auto; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px;
  padding: 0 max(28px, calc((100% - 1160px) / 2));
  background: rgba(251,250,246,.82); border-bottom: 1px solid transparent;
  backdrop-filter: blur(18px); transition: background .25s, box-shadow .25s, border-color .25s;
}
.site-header.is-scrolled { background: rgba(255,255,255,.94); border-color: var(--line); box-shadow: 0 8px 30px rgba(29,63,60,.06); }
.brand, .footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img, .footer-brand img { width: 40px; height: 40px; border-radius: 12px; }
.brand span, .footer-brand span { display: grid; }
.brand strong, .footer-brand strong { font-size: 17px; letter-spacing: .06em; }
.brand small, .footer-brand small { color: #7a8d8a; font-size: 8px; letter-spacing: .17em; }
.site-header nav { display: flex; gap: 32px; }
.site-header nav a { color: #526e6b; font-size: 12px; font-weight: 700; text-decoration: none; }
.site-header nav a:hover { color: var(--teal); }
.header-launch { justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; border-radius: 99px; color: white; background: var(--teal); font-size: 12px; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(8,127,131,.18); }
.header-launch span { font-size: 16px; transition: transform .2s; }
.header-launch:hover span { transform: translateX(3px); }

.hero { position: relative; min-height: 1000px; padding: 146px 24px 120px; text-align: center; background: radial-gradient(circle at 50% 43%, rgba(202,235,225,.82), transparent 31%), linear-gradient(180deg,#fbfaf6,#f5f0e6); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero::before { top: 170px; left: max(4%, calc(50% - 610px)); width: 110px; height: 110px; background: #f5d9ca; opacity: .55; }
.hero::after { top: 450px; right: max(5%, calc(50% - 620px)); width: 76px; height: 76px; background: #cde8e1; }
.hero-copy { position: relative; z-index: 2; max-width: 830px; margin: 0 auto; }
.eyebrow { margin: 0 0 18px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.hero h1 { margin: 0; font-size: clamp(48px,5.2vw,70px); font-weight: 800; line-height: 1.15; letter-spacing: -.045em; }
.hero-lead { max-width: 660px; margin: 25px auto 0; color: var(--muted); font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 30px; }
.button { display: inline-grid; place-items: center; min-height: 56px; padding: 0 28px; border-radius: 99px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: white; background: var(--teal); box-shadow: 0 14px 34px rgba(8,127,131,.2); }
.text-link { color: var(--teal-dark); font-size: 12px; font-weight: 800; text-underline-offset: 5px; }
.text-link span { display: inline-block; margin-left: 5px; transition: transform .2s; }
.text-link:hover span { transform: translateX(3px); }
.hero-note { max-width: 650px; margin: 20px auto 0; color: #81918e; font-size: 10px; line-height: 1.7; }

.product-stage { position: relative; display: grid; justify-items: center; width: min(700px,100%); min-height: 770px; margin: 64px auto 0; }
.stage-orbit { position: absolute; top: 80px; width: 610px; height: 610px; border: 1px solid rgba(8,127,131,.12); border-radius: 50%; }
.stage-orbit::before, .stage-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.stage-orbit::before { top: 44px; right: 28px; width: 18px; height: 18px; background: var(--orange); box-shadow: 0 0 0 9px #f9e4dc; }
.stage-orbit::after { bottom: 93px; left: -2px; width: 14px; height: 14px; background: var(--teal); box-shadow: 0 0 0 8px #d9eee8; }
.video-phone { position: relative; z-index: 2; overflow: hidden; width: 366px; padding: 10px; border: 3px solid #183b3a; border-radius: 48px; background: #183b3a; box-shadow: 0 45px 90px rgba(32,74,70,.2), 0 8px 20px rgba(32,74,70,.12); }
.product-video { display: block; width: 100%; aspect-ratio: 390/844; border-radius: 36px; background: #f7faf8; object-fit: cover; }

.proof-strip { display: grid; grid-template-columns: repeat(3,1fr); width: min(1080px,calc(100% - 48px)); margin: 0 auto; padding: 34px 0; border-bottom: 1px solid var(--line); }
.proof-strip p { display: grid; grid-template-columns: 34px 1fr; gap: 10px; margin: 0; padding: 0 28px; border-right: 1px solid var(--line); text-align: left; }
.proof-strip p:first-child { padding-left: 0; } .proof-strip p:last-child { padding-right: 0; border: 0; }
.proof-strip > p > b { color: var(--teal); font-size: 9px; letter-spacing: .12em; }
.proof-strip span { display: grid; gap: 5px; }
.proof-strip strong { font-size: 13px; } .proof-strip small { color: var(--muted); font-size: 10px; }

.experience, .devices { width: min(1040px,calc(100% - 48px)); margin: 0 auto; padding: 140px 0; }
.section-intro { max-width: 760px; }
.section-intro h2, .devices h2, .final-cta h2 { margin: 0; font-size: clamp(40px,4.6vw,61px); font-weight: 780; line-height: 1.24; letter-spacing: -.04em; }
.section-intro > p:last-child { max-width: 610px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.journey { margin: 76px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.journey li { display: grid; grid-template-columns: 92px 1fr; gap: 22px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.journey > li > span { color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.journey h3 { margin: 0 0 11px; font-size: 25px; }
.journey p { max-width: 680px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

.difference { margin: 0 24px; padding: 120px max(30px,calc((100% - 1040px)/2)); border-radius: 42px; background: #e7f2ed; }
.section-intro.light h2 { color: var(--ink); }
.benefit-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 68px; }
.benefit-list article { min-height: 280px; padding: 28px; border: 1px solid rgba(8,127,131,.1); border-radius: 24px; background: rgba(255,255,255,.78); }
.benefit-list span { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.benefit-list h3 { margin: 68px 0 13px; font-size: 22px; }
.benefit-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }

.devices { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 80px; }
.devices > div > p:not(.eyebrow) { max-width: 600px; margin: 24px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.device-steps { padding: 8px 28px; border-radius: 26px; background: var(--cream); }
.device-steps p { display: grid; gap: 8px; margin: 0; padding: 25px 0; border-bottom: 1px solid #ded8cd; }
.device-steps p:last-child { border: 0; }
.device-steps b { font-size: 18px; } .device-steps span { color: var(--muted); font-size: 12px; }

.final-cta { padding: 130px 24px; text-align: center; background: #f5f0e6; }
.final-cta > img { width: 66px; height: 66px; margin-bottom: 25px; border-radius: 19px; box-shadow: 0 15px 35px rgba(25,70,66,.13); }
.final-cta .eyebrow { margin-bottom: 16px; }
.final-cta > p:not(.eyebrow) { color: var(--muted); }
.final-cta > div { display: flex; justify-content: center; align-items: center; gap: 23px; margin-top: 29px; }
.final-cta > small { display: block; max-width: 650px; margin: 28px auto 0; color: #7c8c89; font-size: 9px; line-height: 1.7; }
.site-footer { padding: 58px 24px 44px; color: #71827f; background: white; text-align: center; font-size: 10px; line-height: 1.8; }
.footer-brand { justify-content: center; margin-bottom: 24px; color: var(--ink); }
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 19px; }
.site-footer nav a { color: #536b68; text-underline-offset: 4px; }
.site-footer > p { max-width: 690px; margin: 0 auto 10px; } .site-footer > small { font-size: 8px; }
.mobile-launch { display: none; }

@media (prefers-reduced-motion:no-preference) {
  .hero-copy { animation: rise .65s cubic-bezier(.22,1,.36,1) both; }
  .product-stage { animation: rise .8s .08s cubic-bezier(.22,1,.36,1) both; }
  .stage-orbit { animation: breathe 5s ease-in-out infinite; }
  .motion-ready [data-reveal] { opacity: 0; transform: translateY(25px); transition: opacity .65s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1); }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
  @keyframes rise { from { opacity: 0; transform: translateY(22px); } }
  @keyframes breathe { 50% { transform: scale(1.025); opacity: .72; } }
}

@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; height:68px; padding:0 18px; }
  .site-header nav,.header-launch { display:none; }
  .hero { min-height:auto; padding:125px 24px 100px; }
  .product-stage { margin-top:60px; }
  .proof-strip { grid-template-columns:1fr; padding:18px 0; }
  .proof-strip p,.proof-strip p:first-child,.proof-strip p:last-child { padding:18px 0; border-right:0; border-bottom:1px solid var(--line); }
  .proof-strip p:last-child { border-bottom:0; }
  .benefit-list { grid-template-columns:1fr; }
  .benefit-list article { min-height:auto; }
  .benefit-list h3 { margin-top:34px; }
  .devices { grid-template-columns:1fr; gap:56px; }
  .site-footer { padding-bottom:125px; }
  .mobile-launch { position:fixed; z-index:40; right:14px; bottom:calc(12px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:32px auto 26px; align-items:center; gap:9px; min-width:194px; min-height:54px; padding:7px 9px; border:1px solid rgba(255,255,255,.7); border-radius:18px; color:white; background:rgba(8,95,98,.96); box-shadow:0 18px 48px rgba(16,65,62,.25); backdrop-filter:blur(16px); text-decoration:none; transition:opacity .2s,transform .2s; }
  .mobile-launch.is-hidden { opacity:0; transform:translateY(120%); pointer-events:none; }
  .mobile-launch img { width:32px; height:32px; border-radius:9px; }
  .mobile-launch strong { font-size:12px; }
  .mobile-launch span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--teal-dark); background:#d8f0e9; }
}

@media (max-width:430px) {
  .brand img { width:38px; height:38px; } .brand strong { font-size:16px; }
  .hero { padding:108px 18px 82px; }
  .hero::before { top:150px; left:-35px; width:88px; height:88px; }
  .hero h1 { font-size:40px; line-height:1.19; letter-spacing:-.04em; }
  .hero-lead { margin-top:22px; font-size:14px; line-height:1.85; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:17px; }
  .hero-note { font-size:9px; }
  .product-stage { min-height:725px; margin-top:50px; }
  .stage-orbit { top:76px; width:390px; height:390px; }
  .video-phone { width:min(326px,calc(100vw - 48px)); border-radius:44px; }
  .product-video { border-radius:33px; }
  .proof-strip { width:calc(100% - 36px); }
  .experience,.devices { width:calc(100% - 36px); padding:100px 0; }
  .section-intro h2,.devices h2,.final-cta h2 { font-size:35px; line-height:1.27; }
  .section-intro > p:last-child,.devices > div > p:not(.eyebrow) { font-size:14px; }
  .journey { margin-top:55px; }
  .journey li { grid-template-columns:42px 1fr; gap:9px; padding:30px 0; }
  .journey h3 { font-size:20px; } .journey p { font-size:13px; }
  .difference { margin:0 10px; padding:94px 18px; border-radius:30px; }
  .benefit-list { margin-top:52px; }
  .benefit-list article { padding:24px; border-radius:20px; }
  .final-cta { padding:100px 18px; }
  .final-cta > div { align-items:stretch; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .motion-ready [data-reveal] { opacity:1!important; transform:none!important; }
}