:root{
  --primary:#1a66e0;--on-primary:#fff;--primary-c:#d8e6ff;--on-primary-c:#001a41;
  --surface:#f8faff;--surface-1:#fff;--surface-2:#edf1f9;--surface-3:#e2e8f2;
  --on-surface:#191c20;--on-var:#43474e;--outline:#74777f;--outline-v:#c9ccd6;
  --ok:#0b6b3a;--ok-c:#c6f1d6;
  --sh1:0 1px 2px #0003,0 1px 3px 1px #00000014;
  --sh3:0 4px 8px 3px #00000014,0 1px 3px #0003;
  --sh-hero:0 30px 80px -20px #1a66e045,0 8px 24px -8px #0002;
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:36px;
  --font:"Google Sans","Google Sans Text","DM Sans",Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --ease:cubic-bezier(.2,0,0,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --primary:#a8c8ff;--on-primary:#002f68;--primary-c:#004493;--on-primary-c:#d8e6ff;
  --surface:#111318;--surface-1:#1a1c22;--surface-2:#22252b;--surface-3:#2d3037;
  --on-surface:#e2e2e9;--on-var:#c4c6d0;--outline:#8e9099;--outline-v:#43474e;
  --ok:#8ee0ac;--ok-c:#12432a;
  --sh1:0 1px 2px #0008;--sh3:0 4px 12px #0009;
  --sh-hero:0 30px 80px -20px #a8c8ff26,0 8px 24px -8px #000a;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --primary:#a8c8ff;--on-primary:#002f68;--primary-c:#004493;--on-primary-c:#d8e6ff;
    --surface:#111318;--surface-1:#1a1c22;--surface-2:#22252b;--surface-3:#2d3037;
    --on-surface:#e2e2e9;--on-var:#c4c6d0;--outline:#8e9099;--outline-v:#43474e;
    --ok:#8ee0ac;--ok-c:#12432a;
    --sh1:0 1px 2px #0008;--sh3:0 4px 12px #0009;
    --sh-hero:0 30px 80px -20px #a8c8ff26,0 8px 24px -8px #000a;
    color-scheme:dark;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--font);background:var(--surface);color:var(--on-surface);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s var(--ease),color .3s var(--ease)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.wrap.narrow{width:min(760px,100% - 48px)}
.appbar{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.appbar.scrolled{background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--outline-v)}
.appbar-in{width:min(1200px,100% - 48px);height:68px;margin-inline:auto;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;white-space:nowrap}
.mark{display:block;width:38px;height:38px;object-fit:contain}
.links{display:flex;gap:4px;margin-left:12px}
.links a{padding:8px 16px;border-radius:999px;font-size:.95rem;font-weight:500;color:var(--on-var);transition:background .2s,color .2s}
.links a:hover{background:var(--surface-3);color:var(--on-surface)}
.actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--on-var);cursor:pointer;transition:background .2s}
.icon-btn:hover{background:var(--surface-3)}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}:root[data-theme="dark"] .i-moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:none}:root:not([data-theme="light"]) .i-moon{display:block}}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 24px;border:0;border-radius:999px;font:500 .95rem var(--font);letter-spacing:.01em;cursor:pointer;transition:box-shadow .2s var(--ease),background .2s,transform .2s var(--ease)}
.btn.sm{height:38px;padding:0 20px}
.btn.lg{height:56px;padding:0 32px;font-size:1rem}
.btn.block{display:flex;width:100%}
.btn.filled{background:var(--primary);color:var(--on-primary)}
.btn.filled:hover{box-shadow:var(--sh1);transform:translateY(-1px)}
.btn.filled::after,.btn.tonal::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .2s;pointer-events:none}
.btn:hover::after{opacity:.08}.btn:active::after{opacity:.12}
.btn.tonal{background:var(--primary-c);color:var(--on-primary-c)}
.fill{position:absolute;inset:0;width:0;background:#ffffff40}.bl{position:relative}
.hero{padding:132px 0 40px;background:
  radial-gradient(900px 480px at 15% -5%,color-mix(in srgb,var(--primary) 14%,transparent),transparent 70%),
  radial-gradient(700px 420px at 90% 0%,color-mix(in srgb,#22d3ee 10%,transparent),transparent 70%)}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1px solid var(--outline-v);border-radius:var(--r-sm);font-size:.85rem;font-weight:500;color:var(--on-var);background:var(--surface-1)}
.chip-dot{width:8px;height:8px;border-radius:50%;background:#1e9e5a;box-shadow:0 0 0 3px #1e9e5a33}
h1{margin:24px 0 20px;max-width:16ch;text-wrap:balance;font-weight:500;font-size:clamp(2.6rem,7.4vw,5.6rem);line-height:1.04;letter-spacing:-.035em}
.grad{background:linear-gradient(90deg,#22b8f0,#1a66e0 50%,#4f46e5);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:560px;font-size:1.2rem;line-height:1.55;color:var(--on-var);margin-bottom:34px}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.stage{position:relative;margin-top:64px;aspect-ratio:16/9;max-height:78vh;margin-inline:auto;border-radius:var(--r-xl);overflow:hidden;background:#05090b;border:1px solid var(--outline-v);box-shadow:var(--sh-hero)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.snd{position:absolute;right:20px;bottom:20px;z-index:5;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:16px;background:#ffffffe6;color:#0b1a20;cursor:pointer;box-shadow:var(--sh3);transition:transform .2s var(--ease),background .2s}
.snd:hover{transform:scale(1.06);background:#fff}
.snd .on{display:none}.snd:not(.off) .on{display:inline}.snd:not(.off) .x{display:none}
.snd.off{animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:var(--sh3),0 0 0 0 #1a66e0aa}100%{box-shadow:var(--sh3),0 0 0 16px #1a66e000}}
.section{padding:112px 0 24px}
.head{margin-bottom:48px;max-width:720px}
.head.center{text-align:center;margin-inline:auto;margin-bottom:36px}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
h2{text-wrap:balance;font-weight:500;font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;letter-spacing:-.025em}
.muted{margin-top:12px;color:var(--on-var)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{padding:32px;border-radius:var(--r-lg);background:var(--surface-2);transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{background:var(--surface-3);transform:translateY(-4px);box-shadow:var(--sh1)}
.ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;margin-bottom:28px;background:var(--primary-c);color:var(--on-primary-c)}
.card h3{font-size:1.3rem;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.card p{color:var(--on-var)}
.panel{padding:clamp(24px,5vw,48px);border-radius:var(--r-xl);background:var(--surface-1);border:1px solid var(--outline-v);box-shadow:var(--sh1)}
.plats{list-style:none;display:grid;gap:8px;margin-bottom:28px}
.plat{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:var(--r-md);border:1px solid var(--outline-v);color:var(--on-var)}
.plat .pic{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--surface-2)}
.plat .pt{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.plat b{font-weight:500;font-size:1.05rem;color:var(--on-surface)}
.plat small{font-size:.85rem}
.tag{margin-left:auto;flex:none;padding:4px 12px;border-radius:8px;font-size:.78rem;font-weight:500;background:var(--surface-2);color:var(--on-var)}
.plat.on{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface-1))}
.plat.on .pic{background:var(--primary);color:var(--on-primary)}
.tag.ok{background:var(--ok-c);color:var(--ok)}
.plat:not(.on){opacity:.8}
.fine{margin-top:14px;text-align:center;font-size:.85rem;color:var(--on-var)}
.foot{margin-top:112px;border-top:1px solid var(--outline-v);background:var(--surface-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:32px 0 calc(32px + env(safe-area-inset-bottom,0px));font-size:.9rem;color:var(--on-var)}
.foot .brand{font-size:1.1rem;color:var(--on-surface)}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .grid3 .rv:nth-child(2){transition-delay:.08s}.js .grid3 .rv:nth-child(3){transition-delay:.16s}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 18px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-weight:500;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.kicker{display:block;margin-bottom:14px;font-size:clamp(1rem,1.9vw,1.3rem);font-weight:500;letter-spacing:.01em;color:var(--primary)}
.hero-meta{margin-top:18px;font-size:.9rem;color:var(--on-var)}
.stage{margin-inline:auto}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{position:relative;padding:32px;border-radius:var(--r-lg);border:1px solid var(--outline-v);background:var(--surface-1)}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:20px;background:var(--primary);color:var(--on-primary);font-weight:700}
.step h3{font-size:1.2rem;font-weight:500;margin-bottom:6px}
.step p{color:var(--on-var)}
.faq{display:grid;gap:8px}
.faq details{border:1px solid var(--outline-v);border-radius:var(--r-md);background:var(--surface-1);transition:background .2s,border-color .2s}
.faq details[open]{background:var(--surface-2);border-color:var(--primary)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer;list-style:none;font-weight:500;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--on-var);border-bottom:2px solid var(--on-var);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{padding:0 24px 22px;color:var(--on-var)}
.foot-in{align-items:flex-start}
.foot-l{display:grid;gap:8px}
.dev{color:var(--on-surface);font-weight:500}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.foot-links a:hover{color:var(--primary)}
.copy{flex-basis:100%;padding-top:16px;border-top:1px solid var(--outline-v);font-size:.85rem}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
@media(max-width:860px){.grid3{grid-template-columns:1fr}.links{display:none}.hero{padding-top:108px}.stage{border-radius:var(--r-md);margin-top:44px}.section{padding-top:80px}}
@media(max-width:520px){.appbar .brand-sub{display:none}.wrap,.appbar-in{width:calc(100% - 32px)}.appbar-in{gap:12px}.btn.lg{width:100%}.cta{width:100%}.tag{display:none}.snd{right:12px;bottom:12px;width:44px;height:44px;border-radius:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}
.appbar-in{height:64px;gap:16px}
.brand{font-size:1.25rem;font-weight:500;letter-spacing:0}
.mark{width:32px;height:32px}
.links{margin-left:24px}
.links a{padding:8px 14px;font-size:.9rem}
.links a.active{background:var(--primary-c);color:var(--on-primary-c)}
.btn{height:40px;font-weight:500;letter-spacing:.01em}
.btn.lg{height:52px;padding:0 28px}
.btn.filled:hover{transform:none;box-shadow:var(--sh1)}
.btn.tonal,.btn.outline{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1px var(--outline)}
.hero{padding:120px 0 72px;text-align:center}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:64px}
.chip{height:32px;border-radius:8px;gap:10px;font-size:.8rem;letter-spacing:.02em;font-weight:500;color:var(--on-var)}
.chip svg{color:var(--primary)}
.chip i,.hero-meta i{font-style:normal;opacity:.5}
h1{margin:28px 0 20px;max-width:14ch;font-size:clamp(2.8rem,8vw,6rem);line-height:1.02;letter-spacing:-.04em}
.lead{max-width:620px;font-size:1.25rem;margin-bottom:36px}
.hero-meta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:.85rem}
.hero-art{width:100%;max-width:1120px}
.device{padding:8px;border-radius:var(--r-xl);background:var(--surface-1);border:1px solid var(--outline-v);box-shadow:var(--sh-hero)}
.device img,.shot-frame img{display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 8px)}
.pills{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:56px}
.pills li{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px 0 8px;border-radius:999px;border:1px solid var(--outline-v);background:var(--surface-1);font-size:.9rem;font-weight:500;color:var(--on-surface)}
.pi{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary-c);color:var(--on-primary-c)}
.pi svg{width:18px;height:18px}
.section{padding:120px 0 0}
.head{margin-bottom:56px}
.eyebrow{font-size:.8rem;letter-spacing:.12em}
h2{font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.1}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.gallery .g{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.gallery svg{display:block;width:100%;height:100%}
.grid3{gap:12px}
.card{padding:32px;border-radius:var(--r-lg);background:var(--surface-2);min-height:260px;display:flex;flex-direction:column}
.card:hover{transform:none;background:var(--surface-3)}
.ic{width:52px;height:52px;border-radius:16px;margin-bottom:auto}
.card h3{margin-top:48px;font-size:1.35rem}
.shot-frame{padding:8px;border-radius:var(--r-xl);background:var(--surface-1);border:1px solid var(--outline-v);box-shadow:var(--sh-hero)}
.callouts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.callouts li{display:flex;flex-direction:column;gap:6px;padding:24px 28px;border-radius:var(--r-md);background:var(--surface-2)}
.callouts b{font-weight:500;font-size:1.05rem}
.callouts span{color:var(--on-var);font-size:.95rem}
.stage{margin-top:12px;border-radius:var(--r-xl)}
.panel{border-radius:var(--r-xl);box-shadow:none}
.plat{border-radius:var(--r-md);padding:12px 16px}
.step{border-radius:var(--r-lg);background:var(--surface-2);border:0}
.num{background:var(--primary-c);color:var(--on-primary-c)}
.about-dev{margin-top:40px;text-align:center;color:var(--on-var)}
.about-dev b{color:var(--on-surface);font-weight:500}
.faq details{border-radius:var(--r-md)}
.foot{margin-top:120px}
.foot .brand{display:flex}
@media(max-width:860px){.gallery{grid-template-columns:repeat(2,1fr)}.callouts{grid-template-columns:1fr}.hero{padding-top:104px}.hero-grid{gap:44px}.card{min-height:0}.ic{margin-bottom:0}.card h3{margin-top:24px}}
@media(max-width:520px){.pills li{font-size:.85rem}.lead{font-size:1.1rem}.device,.shot-frame{padding:4px;border-radius:var(--r-md)}.device img,.shot-frame img{border-radius:calc(var(--r-md) - 4px)}}