:root{
  --bg:#fff;--bg2:#f5f7f6;--ink:#0e1612;--mute:#58655e;--line:#e3e8e5;--green:#13773b;--logo-green:#2ecc59;--on-green:#fff;
  --shadow:0 1px 2px rgba(14,22,18,.06),0 12px 32px -12px rgba(14,22,18,.18);
  --frame:#0e1612;--screen:#eef2f0;
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;--max:1160px;--gut:clamp(20px,5vw,40px);
  color-scheme:light;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0f19;--bg2:#121a15;--ink:#f1f5f3;--mute:#98a89f;--line:#223028;--green:#3ddc6b;--on-green:#06210f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -12px rgba(0,0,0,.6);--frame:#26332b;--screen:#18221c;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b0f19;--bg2:#121a15;--ink:#f1f5f3;--mute:#98a89f;--line:#223028;--green:#3ddc6b;--on-green:#06210f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -12px rgba(0,0,0,.6);--frame:#26332b;--screen:#18221c;color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.025em;line-height:1.08}
p{margin:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:12px}

/* header */
header.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;padding-top:env(safe-area-inset-top,0px)}
header.top.scrolled{border-color:var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:inline-flex;font-weight:800;font-size:28px;letter-spacing:-.04em;text-decoration:none;line-height:1}
.logo b{color:var(--logo-green);font-weight:800}
nav.main{margin-left:auto;display:flex;gap:4px}
nav.main a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;color:var(--mute);transition:color .2s,background .2s}
nav.main a:hover,nav.main a[aria-current="true"]{color:var(--ink);background:var(--bg2)}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--bg2)}
.menu-btn{display:none}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;border:1px solid transparent;font:700 16px var(--font);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.play-badge{display:inline-block;width:clamp(156px,24vw,168px);vertical-align:middle;flex:none}
.play-badge img{width:100%;height:auto}
.btn-install{background:var(--green);color:var(--on-green)}
.btn-install:hover{box-shadow:var(--shadow)}
.install-note{margin-top:8px;color:var(--mute);font-size:14px}
.play-badge.hdr-cta{width:156px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .play-badge{transition:transform 220ms ease}
  .play-badge:hover{transform:translateY(-2px)}
}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--bg2)}

/* hero */
.hero{position:relative;isolation:isolate;padding:clamp(48px,9vw,112px) 0 clamp(56px,8vw,104px);overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;gap:56px;grid-template-columns:1.05fr .95fr;align-items:center}
/* Keep the reference canvas behind the hero content and inside its bounds. */
.hero-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero h1{font-size:clamp(44px,7vw,84px);font-weight:800;letter-spacing:-.045em;line-height:1}
.hero h1 em{font-style:normal;color:var(--green)}
.lede{margin-top:24px;font-size:clamp(18px,2vw,21px);color:var(--mute);max-width:30em}
.cta-row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.note{margin-top:20px;font-size:14px;color:var(--mute)}
.stage{position:relative;display:grid;place-items:center;min-height:540px}
.stage::before{content:"";position:absolute;width:min(440px,90%);aspect-ratio:1;border-radius:50%;background:var(--bg2)}
.stage .phone{position:relative;width:min(280px,64vw);animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.stage .phone.back{position:absolute;width:min(230px,52vw);right:0;top:48px;opacity:.9;transform:rotate(6deg);animation:none}
.stage .phone.front{transform:rotate(-3deg)}
@keyframes rise{from{opacity:0;transform:translateY(28px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}

/* device */
.phone{aspect-ratio:1536/2752;background:var(--frame);border-radius:12% / 5.6%;padding:0;box-shadow:var(--shadow);position:relative}




/* sections */
section{padding:clamp(64px,9vw,120px) 0}
.alt{background:var(--bg2)}
.head{max-width:640px;margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:clamp(32px,4.6vw,52px);font-weight:800}
.head p{margin-top:16px;color:var(--mute);font-size:19px}

/* feature explorer */
.explorer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.tabs{display:grid;gap:4px}
.tab{text-align:left;background:none;border:0;border-left:2px solid var(--line);padding:16px 0 16px 24px;cursor:pointer;color:var(--mute);font:inherit;transition:color .25s,border-color .25s}
.tab-title{font-size:22px;font-weight:700;color:inherit;letter-spacing:-.02em}
.tab-description{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .35s ease,opacity .35s ease,margin .35s ease;font-size:16px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--green)}
.tab[aria-selected="true"] .tab-description{max-height:160px;opacity:1;margin-top:8px;color:var(--mute)}
.panel-stage{display:grid;place-items:center;background:var(--bg2);border-radius:28px;padding:clamp(28px,5vw,56px) 24px;min-height:520px}
.panel-stage .phone{width:min(260px,70%);transition:opacity .25s,transform .25s}


/* gallery */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.gal-head .head{margin-bottom:40px}
.gal-ctrl{display:flex;gap:10px;margin-bottom:40px}
.rail{display:flex;gap:clamp(20px,3vw,36px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail figure{margin:0;flex:0 0 auto;width:clamp(200px,62vw,252px);scroll-snap-align:center}
.rail figcaption{margin-top:18px;text-align:center;font-size:15px;font-weight:600}
.rail-wrap{max-width:var(--max);margin:0 auto}

/* benefits */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px)}
.benefit h3{font-size:clamp(26px,3.4vw,36px);font-weight:800;margin:20px 0 14px}
.benefit>p{color:var(--mute);font-size:18px}
.benefit ul{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.benefit li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.benefit li svg{flex:none;margin-top:3px;color:var(--green)}
.ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg2);color:var(--green)}
.alt .ico{background:var(--bg)}

/* final */
.final{text-align:center}
.final h2{font-size:clamp(36px,6vw,68px);font-weight:800;letter-spacing:-.04em}
.final p{margin:20px auto 0;max-width:30em;color:var(--mute);font-size:19px}
.final .cta-row{justify-content:center}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:15px;color:var(--mute)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{margin:0 0 14px;color:var(--ink);font-size:15px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--ink);text-decoration:underline}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px}

/* mobile menu + responsive */
@media (max-width:860px){
  .hero .wrap,.explorer,.two{grid-template-columns:1fr}
  .stage{min-height:460px}
  .foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}
  .menu-btn{display:grid;margin-left:auto}
  nav.main{position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:8px var(--gut) 20px;display:none}
  nav.main.open{display:flex}
  nav.main a{padding:14px 4px;font-size:18px;border-radius:8px}
  .hdr-cta{display:none}
  .panel-stage{min-height:440px}
  .tab-description{font-size:15px}

}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.phone{border-radius:16px;overflow:hidden}
.phone img{width:100%;height:auto}
.tab-title,.tab-description{display:block}
.panel-stage{min-width:0}
.rail figure{scroll-snap-align:start}
.rail{scroll-padding-inline:var(--gut)}
.gal-ctrl .icon-btn:disabled{opacity:.4;cursor:default}
.foot h3{margin:0 0 14px;color:var(--ink);font-size:15px}
.brand-note{margin-top:14px;max-width:26em}
.theme-switch{
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,1fr);place-items:center;
  flex:none;width:76px;height:44px;padding:4px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg2);color:var(--mute);cursor:pointer
}
.theme-switch::before{
  content:"";position:absolute;z-index:-1;left:4px;top:4px;width:33px;height:34px;border-radius:999px;
  background:var(--ink);transition:transform 250ms ease,background-color 250ms ease
}
:root[data-theme="dark"] .theme-switch::before{transform:translateX(33px)}
.theme-switch svg{transition:color 250ms ease}
:root[data-theme="light"] .theme-sun,:root[data-theme="dark"] .theme-moon{color:var(--bg)}
.theme-switch:focus-visible{border-radius:999px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:860px){
  .bar{gap:14px}
  .theme-switch{margin-left:auto}
  .menu-btn{margin-left:0}
  .stage{min-height:0;padding:18px 0}
  .stage .phone.front{margin-right:16%}
  .stage .phone.back{top:8%}
  .gal-head{align-items:start;flex-direction:column;gap:0}
  .gal-head .head{margin-bottom:16px}
  .gal-ctrl{margin-bottom:12px}
  .panel-stage{min-height:0;padding:18px 0}
}
@media(max-width:420px){.btn-ghost{padding-inline:16px}.hero .wrap{gap:32px}}

@font-face {
  font-family: Manrope;
  src: url("manrope.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
.brand-mark{width:32px;height:32px;border-radius:8px;margin-right:8px}
.logo{align-items:center}
.tab-title{font-size:22px;font-weight:700;letter-spacing:-.02em}
.foot a{overflow-wrap:anywhere}
@media (max-width:540px){.foot{grid-template-columns:1fr;gap:24px}}


@property --sweep-angle {
  syntax: "<angle>";
  initial-value: 110deg;
  inherits: false;
}
.stage .hero-carousel{overflow:visible;background:transparent;box-shadow:none}
.hero-slides{
  position:absolute;inset:0;isolation:isolate;border-radius:inherit;box-shadow:var(--shadow);
  background:var(--frame);touch-action:pan-y pinch-zoom
}
.hero-slide{
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;opacity:0;visibility:hidden;
  transition:opacity 650ms ease,visibility 650ms
}
.hero-slide.current{opacity:1;visibility:visible;z-index:1}
.hero-rim{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
.hero-rim::before,.hero-rim-bloom::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:conic-gradient(from var(--sweep-angle),transparent 0deg,transparent 215deg,
    #38bdf8 255deg,#818cf8 295deg,#f472b6 325deg,#e0f2fe 350deg,transparent 360deg);
  padding:1.5px;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}
.hero-rim{--rim-intensity:.86;--rim-bloom:.48}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero-rim{--rim-intensity:1;--rim-bloom:.65}
}
:root[data-theme="dark"] .hero-rim{--rim-intensity:1;--rim-bloom:.65}
.hero-rim.sweeping::before{animation:hero-rim-sweep 1.7s linear both}
@keyframes hero-rim-sweep{
  0%{--sweep-angle:110deg;opacity:0}
  17%,80%{opacity:var(--rim-intensity)}
  100%{--sweep-angle:470deg;opacity:0}
}
.hero-rim-bloom{position:absolute;inset:-3px;z-index:2;border-radius:inherit;pointer-events:none;filter:blur(10px)}
.hero-rim-bloom::before{padding:3px}
.hero-rim.sweeping .hero-rim-bloom::before{animation:hero-rim-sweep 1.7s linear both;--rim-intensity:var(--rim-bloom)}
.hero-controls:not([hidden]){
  position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%) rotate(3deg);
  display:flex;align-items:center;gap:1px;padding:2px 4px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);z-index:3
}
.hero-controls button{
  border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;
  display:grid;place-items:center;min-width:25px;height:32px;padding:0;font:inherit;line-height:1
}
.hero-controls .hero-prev,.hero-controls .hero-next{font-size:24px;min-width:31px}
.hero-controls .hero-rotation{font-size:13px;min-width:30px}
.hero-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mute)}
.hero-dot[aria-current="true"]::before{background:var(--green);width:10px;height:10px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-slides,.stage .phone.back,.tab .tab-title,.rail figure .phone{transition:transform 250ms ease}
  .hero-slides:hover,.rail figure:hover .phone{transform:translateY(-2px) scale(1.03)}
  .stage .phone.back:hover{transform:translateY(-2px) rotate(6deg) scale(1.03)}
  .tab:hover .tab-title{transform:translateX(2px) scale(1.02);transform-origin:left center}
}
.hero-controls button[hidden]{display:none}