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

:root { font-family: 'DM Sans', sans-serif; font-synthesis: none; color-scheme: dark; --bg:#0c1017; --surface:#141b26; --text:#f0f3fa; --muted:#9ba8bd; --line:#283244; --accent:#a7bcff; --accent-bg:#718df0; --green:#88dab4; --shadow:0 28px 90px #0005; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:112px; }
body { margin:0; color:var(--text); background:var(--bg); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
button { color:inherit; }
img { max-width:100%; }
svg { overflow:visible; }
::selection { background:#718df066; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:'Manrope',sans-serif; }
.wrap { max-width:1200px; margin:auto; padding:0 36px; }
.motion-toggle { border:0; background:none; color:var(--muted); font-size:14.5px; padding:5px 9px; }
.motion-toggle:hover { color:var(--text); }
.site-header { height:86px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:23.5px; letter-spacing:-.8px; }
.brand img { width:30px; height:30px; border-radius:9px; }
.nav { display:flex; align-items:center; gap:30px; font-size:17px; color:var(--muted); }
.nav a:hover { color:var(--text); }
.nav .nav-download { border:1px solid var(--line); padding:8px 16px; color:var(--text); border-radius:8px; }
.eyebrow { color:var(--accent); font-size:14.5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:9px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #88dab410; }
.hero { padding:66px 0 30px; }
.hero-grid { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:65px; }
h1 { font-size:clamp(40px,4.8vw,64px); line-height:1.08; letter-spacing:-3px; margin:24px 0; font-weight:800; }
h1 em { color:var(--accent); font-style:normal; }
.hero-description { font-size:19.5px; line-height:1.7; max-width:500px; color:var(--muted); }
.hero-actions { display:flex; align-items:center; gap:20px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 22px; border-radius:8px; font-size:17px; font-weight:700; background:var(--accent-bg); color:#0c142d; border:1px solid transparent; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 24px #718df026; }
.text-link { font-size:17px; border-bottom:1px solid var(--line); padding-bottom:3px; }
.platform-note { font-size:15px; color:var(--muted); margin-top:17px; }
.hero-demo { min-width:0; }
.desktop-stage { position:relative; height:440px; padding:36px 22px; border-radius:18px; background:radial-gradient(ellipse at 70% 20%,#2f44633d,transparent 70%),#101722; border:1px solid #33415a80; box-shadow:var(--shadow); }
.stage-label { position:absolute; left:22px; top:12px; font-size:12.5px; text-transform:uppercase; letter-spacing:1.5px; color:#8594ae; }
.window { border:1px solid #354159; background:#19212f; border-radius:9px; box-shadow:0 12px 40px #0002; }
.mail-window { margin-top:4px; min-height:290px; }
.window-top { height:34px; display:flex; align-items:center; padding:0 12px; gap:5px; border-bottom:1px solid #354159; font-size:13px; color:#92a0b8; }
.window-dot { width:6px; height:6px; border-radius:50%; background:#526078; }
.window-dot:first-child { background:#cf7e88; }
.window-dot:nth-child(2) { background:#c4b583; }
.window-dot:nth-child(3) { background:#84b9a0; }
.window-title { margin:auto; padding-right:20px; }
.mail-meta { display:flex; align-items:center; gap:12px; padding:13px 18px; font-size:14px; border-bottom:1px solid #354159; color:#dce3f3; }
.mail-meta span:first-child { color:#8794aa; }
.mail-body { padding:16px 18px 30px; font-size:16px; line-height:1.8; color:#c4cee0; }
.sample-text { display:inline; transition:background .4s,color .4s; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.demo[data-step='0'] .sample-text,.demo[data-step='1'] .sample-text,.demo[data-step='2'] .sample-text { background:#7696ff50; color:#eef3ff; }
.demo[data-step='3'] .sample-text { color:#a1e9c4; }
.mail-greeting { margin-bottom:9px; }
.mail-signature { margin-top:13px; color:#8d9ab0; font-size:14.5px; }
.ghost-menu { position:absolute; right:10px; top:128px; width:220px; background:#222c3d; border:1px solid #516384; border-radius:10px; padding:12px; box-shadow:0 18px 45px #0007; z-index:3; opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; transition:opacity .4s,transform .4s; }
.demo[data-step='1'] .ghost-menu,.demo[data-step='2'] .ghost-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.ghost-menu-head { display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:700; margin-bottom:10px; }
.ghost-menu-head img { height:20px; width:20px; border-radius:5px; }
.menu-action { display:flex; justify-content:space-between; width:100%; border:0; border-radius:5px; padding:7px 9px; background:none; font-size:14.5px; color:#bcc7db; text-align:left; }
.menu-action.active { background:#718df036; color:#c9d6ff; }
.menu-action:hover { background:#718df050; }
.menu-model { border-top:1px solid #43506a; padding-top:8px; margin-top:8px; color:#91a2bd; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.demo-cursor { position:absolute; width:21px; height:27px; z-index:4; top:176px; left:66%; pointer-events:none; transition:top .7s,left .7s,opacity .4s; filter:drop-shadow(0 3px 3px #0005); }
.demo[data-step='1'] .demo-cursor,.demo[data-step='2'] .demo-cursor { left:83%; top:224px; }
.demo[data-step='3'] .demo-cursor { opacity:0; }
.shortcut { position:absolute; bottom:20px; left:20px; display:flex; align-items:center; gap:6px; color:#9aabc5; font-size:13px; }
.demo[data-step='2'] .shortcut span,.demo[data-step='3'] .shortcut span { display:none; }
kbd { display:inline-flex; align-items:center; justify-content:center; padding:4px 7px; min-width:26px; font:11px 'DM Sans',sans-serif; background:#263246; border:1px solid #4a5870; border-bottom-width:3px; border-radius:5px; color:#d9e3f7; transition:background .3s,transform .3s; }
.demo[data-step='1'] .shortcut kbd { background:#526cad; transform:translateY(2px); }
.result-toast { position:absolute; bottom:20px; right:20px; color:#94e6bb; font-size:14px; display:flex; align-items:center; gap:6px; opacity:0; transform:translateY(5px); transition:.4s; }
.demo[data-step='3'] .result-toast { opacity:1; transform:translateY(0); }
.processing { position:absolute; bottom:20px; right:20px; color:#adc1f8; font-size:14px; opacity:0; }
.demo[data-step='2'] .processing { opacity:1; }
.processing:before { content:''; display:inline-block; margin-right:6px; border:2px solid #adc1f850; border-top-color:#adc1f8; width:9px; height:9px; border-radius:50%; animation:spin 1s linear infinite; vertical-align:middle; }
.demo-controls { display:flex; align-items:flex-start; gap:6px; margin-top:17px; }
.step-button { flex:1; border:0; background:none; color:var(--muted); font-size:14px; line-height:1.4; padding:7px 0; text-align:left; position:relative; }
.step-button:before { content:''; height:2px; width:100%; background:var(--line); display:block; margin-bottom:9px; transition:background .3s; }
.step-button[aria-current='step'] { color:var(--accent); }
.step-button[aria-current='step']:before { background:var(--accent); }
.step-button b { margin-right:5px; font-weight:400; opacity:.6; }
.demo-play { width:29px; height:29px; margin-left:8px; border:1px solid var(--line); background:var(--surface); border-radius:50%; font-size:12.5px; }
.demo-note { margin-top:8px; font-size:13px; color:var(--muted); text-align:right; }
.app-strip { display:flex; align-items:center; gap:28px; padding:34px 0; margin-top:29px; border-bottom:1px solid var(--line); color:var(--muted); font-size:17px; }
.app-strip>span { font-size:14px; text-transform:uppercase; letter-spacing:1.1px; margin-right:auto; }
.app-name { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.app-name svg { width:18px; height:18px; }
.section { padding:85px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:32px; }
.section-heading h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-1.7px; line-height:1.2; margin-top:15px; }
.section-heading>p { max-width:360px; font-size:18.5px; color:var(--muted); }
.feature-tabs { display:flex; gap:6px; margin-bottom:26px; }
.feature-tab { padding:7px 16px; font-size:15px; background:none; border:1px solid transparent; border-radius:30px; color:var(--muted); }
.feature-tab[aria-pressed='true'] { color:var(--accent); background:var(--surface); border-color:var(--line); }
.feature-tab:hover { color:var(--text); }
.feature-board { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:16px; }
.feature-card { min-width:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:25px; }
.feature-card h3 { font-size:19.5px; margin-top:23px; margin-bottom:9px; letter-spacing:-.5px; }
.feature-card p { font-size:16.5px; line-height:1.7; color:var(--muted); }
.card-visual { height:147px; border-bottom:1px solid var(--line); padding-bottom:20px; position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.wave { display:flex; align-items:center; justify-content:center; gap:4px; height:48px; }
.wave i { width:3px; border-radius:4px; height:var(--height); background:var(--accent); animation:wave 1.2s ease-in-out infinite alternate; animation-delay:var(--delay); }
.wave-label { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12.5px; margin-top:9px; }
.transcript-line { font-size:14.5px; text-align:center; margin-top:17px; color:var(--text); }
.transcript-line:after { content:''; display:inline-block; height:12px; width:2px; margin-left:3px; background:var(--accent); animation:blink 1s steps(2) infinite; vertical-align:middle; }
.video-frame { height:81px; background:linear-gradient(130deg,#31415b,#172332); border:1px solid #ffffff0f; display:grid; place-items:center; border-radius:6px; position:relative; }
.video-frame svg { width:30px; opacity:.5; }
.caption { position:absolute; left:12px; right:12px; bottom:7px; text-align:center; padding:3px 7px; background:#0c1017c9; color:#e6ecfa; font-size:13px; border-radius:3px; animation:caption 6s ease-in-out infinite; }
.caption-meter { display:flex; align-items:center; gap:3px; height:17px; margin-top:11px; }
.caption-meter i { flex:1; height:3px; background:var(--accent); animation:meter 2s infinite alternate; animation-delay:var(--delay); border-radius:3px; }
.ocr-diagram { display:flex; align-items:center; justify-content:center; gap:15px; }
.scan-document { position:relative; padding:13px 11px; width:91px; height:86px; border:1px solid var(--line); border-radius:5px; background:var(--bg); transform:rotate(-6deg); font-family:Georgia,serif; font-size:10px; }
.scan-document strong { font-size:15.5px; display:block; margin-bottom:6px; }
.scan-line { position:absolute; left:-3px; right:-3px; height:2px; top:8px; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:scan 3s ease-in-out infinite; }
.ocr-result { font-size:14px; line-height:1.8; padding:10px; border-left:2px solid var(--green); }
.ocr-arrow { color:var(--accent); }
.action-preview { display:flex; gap:10px; flex-direction:column; font-size:15.5px; }
.before-copy { color:var(--muted); text-decoration:line-through; text-decoration-color:#cd819d; }
.after-copy { color:var(--green); animation:reveal 4s ease-in-out infinite; }
.translate-row { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.language-pill { font-size:12.5px; padding:2px 7px; border:1px solid var(--line); border-radius:4px; }
.local-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; padding-top:15px; padding-bottom:85px; }
.local-copy h2 { font-size:36px; letter-spacing:-1.6px; line-height:1.25; margin:17px 0; }
.local-copy p { color:var(--muted); font-size:17.5px; line-height:1.7; max-width:460px; }
.local-points { display:flex; gap:18px; margin-top:24px; font-size:14.5px; color:var(--muted); }
.local-points span:before { content:'✓'; color:var(--green); margin-right:6px; }
.local-art { position:relative; height:290px; display:grid; place-items:center; border:1px solid var(--line); background:radial-gradient(ellipse,#718df00c,transparent 70%); border-radius:14px; overflow:hidden; }
.local-orbit { position:absolute; width:200px; height:200px; border-radius:50%; border:1px dashed var(--line); animation:spin 35s linear infinite; }
.local-orbit.outer { width:290px; height:290px; }
.local-orbit:before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); position:absolute; top:28px; left:28px; box-shadow:0 0 14px var(--accent); }
.model-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; width:104px; height:104px; border:1px solid var(--accent); background:var(--surface); border-radius:17px; z-index:2; box-shadow:0 0 50px #718df019; }
.model-chip img { width:35px; height:35px; border-radius:9px; margin-bottom:8px; }
.model-chip span { font-size:14.5px; font-weight:700; }
.orbit-node { position:absolute; z-index:2; padding:7px 13px; border:1px solid var(--line); background:var(--bg); border-radius:6px; font-size:14.5px; color:var(--muted); }
.orbit-node.n1 { top:33px; left:38px; }
.orbit-node.n2 { right:21px; top:84px; }
.orbit-node.n3 { left:33px; bottom:42px; }
.orbit-node.n4 { right:53px; bottom:27px; color:var(--green); }
.local-caption { position:absolute; top:16px; left:18px; font-size:12.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); }
.download-section { border-top:1px solid var(--line); padding:65px 0; }
.download-heading { text-align:center; }
.download-heading h2 { font-size:34px; letter-spacing:-1.3px; }
.download-heading p { font-size:17.5px; color:var(--muted); margin-top:12px; }
.download-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:35px; }
.download-card { border:1px solid var(--line); border-radius:10px; padding:22px; background:var(--surface); }
.download-card h3 { font-size:20.5px; margin-bottom:8px; }
.download-card p { color:var(--muted); font-size:16px; min-height:48px; }
.download-card a { font-size:15.5px; display:flex; justify-content:space-between; padding-top:15px; margin-top:15px; border-top:1px solid var(--line); color:var(--accent); }
.footer { border-top:1px solid var(--line); padding:25px 0; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:15px; }
.footer .brand { font-size:20.5px; color:var(--text); }
.footer-links { display:flex; gap:20px; font-size:15px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes wave { to { transform:scaleY(.25); opacity:.5; } }
@keyframes blink { to { opacity:0; } }
@keyframes scan { 50% { top:76px; } }
@keyframes meter { to { opacity:.2; transform:scaleX(.5); } }
@keyframes caption { 0%,100% { opacity:.4; } 15%,80% { opacity:1; } }
@keyframes reveal { 0%,10% { opacity:.25; transform:translateY(4px); } 30%,90% { opacity:1; transform:translateY(0); } }
@keyframes float { 50% { transform:translateY(-7px) rotate(var(--tilt,0deg)); } }

body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after { animation-play-state:paused !important; }

/* Flow: make local inference and the device boundary visible throughout. */
.flow h1 { font-size:clamp(40px,4.3vw,58px); letter-spacing:-2.6px; }
.flow .hero-description strong { font-weight:500; color:var(--text); }
.privacy-promises { display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--green); font-size:15.5px; margin-top:19px; }
.flow .stage-label { color:#99c8b1; }
.device-flow { margin-top:12px; border:1px dashed #527a6580; border-radius:10px; padding:13px 15px 11px; background:#17261f45; }
.device-flow-header { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; color:#9fc6ae; }
.device-flow-header>span:first-child { display:flex; align-items:center; gap:6px; }
.device-flow-header svg { width:15px; height:15px; flex:none; }
.device-badge { font-size:9.5px; letter-spacing:.8px; color:#789b87; white-space:nowrap; }
.device-flow-track { display:flex; align-items:center; gap:10px; margin-top:12px; }
.device-node { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--muted); white-space:nowrap; transition:color .4s; }
.device-node svg { width:19px; height:19px; flex:none; }
.device-connector { height:1px; min-width:12px; flex:1; background:#466153; position:relative; }
.device-connector:before { content:''; border:solid #466153; border-width:1px 1px 0 0; padding:2px; transform:rotate(45deg); position:absolute; right:0; top:-2px; }
.device-connector:after { content:''; width:4px; height:4px; background:var(--green); border-radius:50%; position:absolute; top:-1px; left:0; opacity:0; }
.flow .demo[data-step='0'] .selection-node,.flow .demo[data-step='1'] .selection-node,.flow .demo[data-step='2'] .inference-node,.flow .demo[data-step='3'] .result-node { color:var(--green); }
.flow .demo[data-step='2'] .device-connector:after,.flow .demo[data-step='3'] .return-connector:after { opacity:1; animation:local-transfer 1.6s linear infinite; }
.device-status { color:#91ad9e; font-size:14px; margin-top:11px; }
.flow .local-section { padding-top:65px; padding-bottom:55px; border-bottom:1px solid var(--line); }
.local-setup { list-style:none; padding:0; margin:24px 0; display:grid; gap:18px; }
.local-setup li { display:flex; align-items:flex-start; gap:14px; }
.setup-number { font-size:14px; color:var(--green); border:1px solid #88dab42a; border-radius:6px; padding:5px 7px; background:#88dab408; }
.local-setup strong { display:block; font-size:17px; font-weight:500; }
.local-setup div>span { display:block; margin-top:3px; font-size:15.5px; color:var(--muted); }
.local-copy .provider-note { font-size:15.5px; line-height:1.75; padding-top:17px; border-top:1px solid var(--line); }
.flow .local-art { height:360px; border:1px dashed #527a6590; background:radial-gradient(ellipse,#88dab410,transparent 75%); }
.flow .model-chip { width:156px; height:140px; text-align:center; border-color:#88dab475; }
.flow .model-chip small { color:var(--muted); font-size:12.5px; margin-top:5px; }
.flow .local-caption { color:var(--green); font-size:13px; }
.flow .orbit-node { font-size:14.5px; color:#b1c9ba; border-color:#88dab433; }
.flow .orbit-node.n1 { top:69px; }
.flow .orbit-node.n2 { top:124px; }
.flow .orbit-node.n3 { bottom:85px; }
.flow .orbit-node.n4 { bottom:68px; }
.device-boundary-label { position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--green); font-size:14.5px; }
.flow .feature-subheading { margin:45px 0 22px; }
.flow .feature-subheading h3 { margin-top:10px; font-size:27px; letter-spacing:-1px; }
.flow .after-copy { animation:none; color:#a1e9c4; }
.flow .feature-board { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
/* Four cards: two by two, not three and one left over. */
.flow .feature-board.quad { grid-template-columns:repeat(2,minmax(0,1fr)); }
.flow .feature-card { --scene-accent:#a9baff; --scene-wash:#596dd129; padding:0; overflow:hidden; border-color:#36425a; background:#161d29; transition:transform .25s,border-color .25s,box-shadow .25s; }
.flow .feature-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--scene-accent) 50%,#36425a); box-shadow:0 18px 36px #0003; }
.flow .feature-card[data-kind='translate'] { --scene-accent:#d4adf4; --scene-wash:#a462c933; }
.flow .feature-card[data-kind='custom'] { --scene-accent:#9de2bd; --scene-wash:#47ae8540; }
.flow .feature-card[data-kind='voice'] { --scene-accent:#94bdff; --scene-wash:#558dd139; }
.flow .feature-card[data-kind='captions'] { --scene-accent:#bfa9fa; --scene-wash:#8f70d139; }
.flow .feature-card[data-kind='read'] { --scene-accent:#8fd8e8; --scene-wash:#4fb3c933; }
.flow .feature-card[data-kind='image'] { --scene-accent:#e8bc88; --scene-wash:#c58c4d39; }
.flow .feature-card>div:last-child { padding:23px 23px 26px; }
.flow .feature-card h3 { margin:0 0 8px; font-size:20.5px; line-height:1.35; }
.flow .feature-card p { font-size:16.5px; line-height:1.65; }
.flow .feature-card .card-visual { display:block; height:320px; padding:0; border:0; position:relative; isolation:isolate; color:#e3e9f5; background:radial-gradient(circle at 85% 6%,var(--scene-wash),transparent 55%),linear-gradient(155deg,#1c2738,#17202e 72%); }
.flow .card-visual:before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:22px 22px; opacity:.4; mask-image:linear-gradient(to bottom,transparent,#000); }
.scene-top { display:flex; align-items:center; justify-content:space-between; gap:10px; height:46px; padding:0 17px; border-bottom:1px solid #ffffff1a; color:#bac6d9; font-size:15.5px; }
.scene-top span:first-child { display:flex; align-items:center; gap:7px; }
.scene-top span:last-child { color:var(--scene-accent); font-size:13px; font-weight:700; letter-spacing:.8px; white-space:nowrap; }
.scene-dot { width:7px; height:7px; border-radius:50%; background:var(--scene-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--scene-accent) 15%,transparent); }
.scene-pair { margin:20px 17px 0; }
.scene-line { display:flex; flex-direction:column; gap:5px; min-height:65px; padding:10px 12px; background:#111b2bba; border:1px solid #455267; border-radius:7px; }
.scene-line small,.chat-bubble small,.custom-selection small,.custom-answer small,.voice-transcript small,.ocr-paper small,.ocr-plain small { color:#a5b4ca; font-size:12.5px; font-weight:700; letter-spacing:.8px; }
.scene-line span { font-size:16px; }
.scene-line .scene-old { color:#bbc4d3; text-decoration:line-through; text-decoration-color:#d99dab; }
.scene-line.scene-result { border-color:color-mix(in srgb,var(--scene-accent) 55%,#455267); background:color-mix(in srgb,var(--scene-accent) 9%,#101b29); }
.scene-line.scene-result span { color:#cef2db; }
.scene-action { height:32px; display:flex; align-items:center; gap:8px; color:var(--scene-accent); font-size:14px; }
.scene-action b { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid color-mix(in srgb,var(--scene-accent) 65%,transparent); font-size:12.5px; animation:scene-glow 3s ease-in-out infinite; }
.scene-action i { flex:1; height:1px; background:linear-gradient(90deg,var(--scene-accent),transparent); opacity:.6; }
.scene-foot { position:absolute; bottom:16px; left:17px; right:17px; display:flex; align-items:center; gap:8px; color:var(--scene-accent); font-size:14px; }
.scene-check { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; color:#12211c; background:var(--scene-accent); font-size:12.5px; font-weight:700; }
.scene-chat { margin:18px 17px 0; display:flex; flex-direction:column; gap:7px; }
.chat-bubble { display:flex; flex-direction:column; gap:5px; padding:10px 12px; max-width:88%; min-width:78%; border-radius:9px 9px 9px 3px; background:#182b42; border:1px solid #49627b; }
.chat-bubble span { font-size:16px; color:#eff2fa; }
.chat-bubble.target { align-self:flex-end; border-radius:9px 9px 3px 9px; background:#342642; border-color:#8e6baa; }
.chat-bubble.target small,.chat-bubble.target span { color:#eadcf6; }
.chat-transfer { display:flex; justify-content:center; align-items:center; gap:8px; height:30px; color:var(--scene-accent); font-size:14px; }
.chat-transfer>span:first-child { font-size:18px; line-height:1; animation:scene-nudge 1.8s ease-in-out infinite; }
.custom-stack { display:flex; flex-direction:column; gap:14px; margin:20px 17px 0; }
.custom-selection,.custom-answer { display:flex; flex-direction:column; gap:5px; font-size:16px; }
.custom-selection span { color:#bbc6d7; border-left:2px solid #6b839d; padding-left:8px; }
.custom-command { display:flex; align-items:center; gap:8px; padding:12px; background:#132b2a; border:1px solid #78b99a; border-radius:7px; box-shadow:0 0 22px #7ddfb214; font-size:16px; }
.custom-command b { color:var(--scene-accent); font-size:17px; line-height:1; }
.custom-command i { width:1px; height:13px; background:var(--scene-accent); animation:blink 1s steps(2) infinite; }
.custom-command small { margin-left:auto; color:#8cac9a; font-size:14px; }
.custom-answer { padding:8px 11px; background:#a8e6be13; border:1px solid #7bbd9840; border-radius:6px; }
.custom-answer span { color:#bff0d1; font-size:17px; font-weight:700; }
.scene-voice { padding:20px 16px 0; text-align:center; }
.voice-ring { width:28px; height:28px; display:grid; place-items:center; margin:0 auto 7px; border-radius:50%; border:1px solid #8bb8f6; background:#5994cf22; color:#9ec7ff; box-shadow:0 0 0 5px #5994cf12; font-size:12.5px; animation:scene-glow 3s infinite; }
.scene-voice .wave { height:51px; gap:3px; }
.scene-voice .wave i { background:var(--scene-accent); }
.voice-transcript { display:flex; flex-direction:column; gap:3px; margin:8px 2px 0; padding:8px 11px; border:1px solid #49627b; background:#14253a; border-radius:7px; text-align:left; }
.voice-transcript span { font-size:15.5px; }
.scene-video { margin:16px 15px 0; height:159px; position:relative; border-radius:7px; overflow:hidden; background:radial-gradient(ellipse at 38% 30%,#6872a1,#303b63 45%,#1b2740 90%); border:1px solid #7180ae66; }
.scene-video:before { content:''; position:absolute; top:22px; left:27px; width:100px; height:100px; background:#c5baf255; border-radius:50%; filter:blur(18px); animation:scene-drift 8s ease-in-out infinite; }
.video-play { position:absolute; top:37px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid #ffffff66; background:#ffffff1a; color:#fff; font-size:26px; }
.video-sound { position:absolute; top:12px; right:12px; font-size:15px; color:#d4cbff; letter-spacing:2px; }
.subtitle { position:absolute; left:10px; right:10px; bottom:13px; background:#0a0e1bd9; border-radius:4px; padding:7px; text-align:center; font-size:15.5px; color:#fff; }
.scene-ocr { display:flex; align-items:center; gap:9px; margin:18px 15px 0; height:146px; }
.ocr-paper { position:relative; width:44%; height:125px; transform:rotate(-4deg); background:#f0e9d9; border-radius:5px; color:#374039; padding:13px 10px; box-shadow:0 7px 18px #0003; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.ocr-paper small { color:#817e6f; font-size:12.5px; }
.ocr-paper b { font:700 15px Georgia,serif; }
.ocr-paper span { font:13.5px/1.4 Georgia,serif; }
.ocr-paper i { position:absolute; top:7px; left:0; right:0; height:2px; background:#b8894f; box-shadow:0 0 12px #b8894f; animation:scene-scan 3.2s ease-in-out infinite; }
.ocr-moving { color:var(--scene-accent); font-size:20.5px; animation:scene-shift 2s ease-in-out infinite; }
.ocr-plain { width:44%; min-height:99px; padding:10px; border:1px solid #e4b57a88; background:#3e3026; border-radius:5px; display:flex; flex-direction:column; gap:10px; }
.ocr-plain small { font-size:12.5px; }
.ocr-plain span { color:#ffe2be; font-size:15.5px; line-height:1.4; }
@keyframes scene-glow { 50% { box-shadow:0 0 0 6px color-mix(in srgb,var(--scene-accent) 12%,transparent); } }
@keyframes scene-nudge { 50% { transform:translateY(3px); } }
@keyframes scene-drift { 50% { transform:translateX(48px); } }
@keyframes scene-scan { 50% { top:113px; } }
@keyframes scene-shift { 50% { transform:translateX(4px); } }
.flow .download-heading .eyebrow { justify-content:center; margin-bottom:10px; }
.flow .download-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.flow .download-card { display:flex; flex-direction:column; }
.latest-badge { display:inline-block; margin-top:18px; padding:5px 13px; color:var(--green); border:1px solid #88dab43d; border-radius:100px; background:#88dab40d; font-size:14.5px; }
.download-card-title { display:flex; align-items:center; justify-content:space-between; }
.download-card-title span { font:12px 'DM Sans',sans-serif; color:var(--faint); }
.flow .download-card p { min-height:78px; font-size:16px; line-height:1.6; }
.asset-list { margin-top:auto; padding-top:17px; display:flex; flex-direction:column; gap:14px; }
.asset-choice { border:0; margin:0; padding:0; min-width:0; }
.asset-choice legend,.flow .download-card .asset-legend { padding:0; min-height:0; line-height:1.4; margin-bottom:7px; color:var(--faint); font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.asset-options { display:flex; gap:6px; }
.asset-options label { flex:1; position:relative; }
.asset-options input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.asset-options label span { display:block; padding:9px 6px; border:1px solid var(--line); border-radius:7px; text-align:center; color:var(--muted); font-size:15px; line-height:1.2; transition:background .2s,border-color .2s,color .2s; }
.asset-options label:hover span { color:var(--text); border-color:#88dab466; }
.asset-options input:checked + span { color:#dff7e8; border-color:#88dab4aa; background:#88dab41c; }
.asset-options input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.asset-options input:disabled + span { opacity:.35; cursor:not-allowed; }
.asset-fixed { padding:9px 12px; line-height:1.2; text-align:center; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:15px; }
.asset-list a { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:13px 16px; border:1px solid #88dab480; border-radius:8px; background:#88dab41a; color:#dff7e8; font-size:16.5px; font-weight:600; transition:background .2s,border-color .2s; }
.asset-list a:hover { background:#88dab430; border-color:#88dab4cc; }
.asset-list a span { min-width:0; }
.asset-list a small { flex:none; color:#a9cdb9; font-size:14px; font-weight:400; }
.asset-loading { display:block; padding:10px 0; color:var(--muted); font-size:15px; }
.asset-retry { border:1px solid var(--line); background:var(--surface); color:var(--text); padding:8px 12px; border-radius:6px; margin-top:8px; font-size:15px; }
.download-footnote { color:var(--muted); font-size:15px; text-align:center; margin-top:19px; }
.model-showcase { display:grid; grid-template-columns:.91fr 1.09fr; gap:68px; align-items:center; padding:32px 0 82px; }
.flow #features,.flow #models,.native-section { scroll-margin-top:60px; }
.model-copy h2 { max-width:420px; font-size:clamp(29px,3vw,40px); letter-spacing:-1.6px; line-height:1.2; margin:14px 0 17px; }
.model-copy>p:not(.eyebrow) { max-width:480px; color:var(--muted); font-size:17.5px; line-height:1.75; }
.model-benefits { display:grid; gap:19px; margin:29px 0 24px; }
.model-benefits>div { display:flex; align-items:flex-start; gap:14px; }
.benefit-icon { width:30px; height:30px; flex:none; display:grid; place-items:center; color:#b9c8ff; background:#718df016; border:1px solid #718df048; border-radius:7px; font-size:18.5px; }
.model-benefits strong { display:block; color:var(--text); font-size:17px; line-height:1.4; font-weight:600; }
.model-benefits div div span { display:block; margin-top:3px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.model-copy .model-platforms { padding-top:16px; border-top:1px solid var(--line); font-size:15.5px; }
.model-console { min-width:0; border:1px solid #4c5a73; border-radius:16px; background:#1c2533; box-shadow:0 26px 65px #0004,0 0 0 6px #718df00a; overflow:hidden; }
.model-console-bar { height:43px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 17px; background:#18202d; border-bottom:1px solid #3b4960; color:#acb8cf; font-size:14.5px; }
.model-console-bar>div { display:flex; gap:5px; }
.model-console-bar i { width:7px; height:7px; border-radius:50%; background:#9aadc9; }
.model-console-bar i:first-child { background:#d98b92; }
.model-console-bar i:nth-child(2) { background:#d2b984; }
.model-console-bar i:nth-child(3) { background:#88c6a6; }
.model-console-lock { color:#a8dabb; font-size:13px; }
.model-console-body { padding:26px; }
.model-console-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.model-console-title small { color:#91a5c6; font-size:12.5px; font-weight:700; letter-spacing:1.4px; }
.model-console-title h3 { margin-top:6px; font-size:22.5px; letter-spacing:-.7px; }
.model-local-tag { padding:5px 10px; background:#83d4a518; color:#91ddb1; border:1px solid #83d4a554; border-radius:30px; font-size:14px; white-space:nowrap; }
.model-console-intro { margin:6px 0 19px; color:#99a8bd; font-size:15.5px; }
.model-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:12px; min-height:72px; margin-top:8px; padding:10px 12px; background:#182231; border:1px solid #39475d; border-radius:8px; }
.model-row.active { background:linear-gradient(90deg,#293858,#202e3f); border-color:#798ed6; box-shadow:0 0 25px #718df017; }
.model-row-mark { width:32px; height:32px; display:grid; place-items:center; color:#dce5ff; background:#667cba55; border-radius:8px; font:800 14px 'Manrope',sans-serif; }
.model-row-mark.gemma { color:#e7dcfb; background:#987ac855; }
.model-row strong { display:block; color:#f1f4fa; font-size:16.5px; }
.model-row div:nth-child(2) span { display:block; margin-top:3px; color:#a6b4c8; font-size:14.5px; }
.model-row>small { color:#9eabc0; font-size:14.5px; white-space:nowrap; }
.model-state { padding:5px 8px; border:1px solid #4a5970; border-radius:6px; color:#b4c3d9; font-size:13px; }
.model-row.active .model-state { border-color:#8bacf4; background:#8bacf422; color:#c6d5ff; }
.model-console-footer { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:15px; border-top:1px solid #3b4960; color:#a7d8ba; font-size:14.5px; }
.native-section { padding:62px 0 82px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.native-intro { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.native-intro h2 { font-size:clamp(29px,3vw,39px); letter-spacing:-1.5px; margin-top:11px; }
.native-intro>p { max-width:390px; color:var(--muted); font-size:17.5px; }
.native-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:31px; }
.native-stat { min-height:176px; padding:20px; border:1px solid #344157; border-radius:11px; background:linear-gradient(150deg,#1c2735,#151e2b); }
.native-stat-icon { display:grid; place-items:center; width:44px; height:44px; color:#bccbff; border:1px solid #708bd270; background:#718df01f; border-radius:10px; }
.native-stat-icon svg { width:24px; height:24px; }
.native-stat strong { display:block; margin:15px 0 5px; color:#eef2fb; font:800 28px 'Manrope',sans-serif; letter-spacing:-1px; line-height:1; }
.native-stat p { max-width:210px; color:var(--muted); font-size:15.5px; line-height:1.55; }
@keyframes local-transfer { to { left:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none !important; transition:none !important; } }
@media (max-width:1000px) {
 .flow .download-grid { grid-template-columns:1fr; max-width:620px; margin-left:auto; margin-right:auto; }
 .flow .download-card p { min-height:0; }
 .flow .feature-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .model-showcase { gap:28px; }
 .model-console-body { padding:20px; }
 .model-row { gap:8px; }
 .native-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hero-grid { gap:30px; grid-template-columns:.9fr 1fr; }
 h1 { font-size:49px; letter-spacing:-2.5px; }
 .desktop-stage { height:435px; padding-left:15px; padding-right:15px; }
 .mail-body { font-size:15.5px; }
 .ghost-menu { right:7px; width:195px; }
 .local-section { gap:45px; }
 .floating-card.voice { left:0; }
 .floating-card.language,.floating-card.image { right:0; }
 .hand-note { left:10px; }
 .app-strip { gap:18px; }
}
@media (max-width:760px) {
 .flow .feature-board, .flow .feature-board.quad { grid-template-columns:1fr; }
 .flow .feature-card { display:block; }
 .flow .feature-card .card-visual { height:320px; border:0; padding:0; }
 .flow .feature-card h3 { margin-top:0; }
 .model-showcase { grid-template-columns:1fr; padding:18px 0 65px; gap:30px; }
 .model-copy>p:not(.eyebrow) { max-width:550px; }
 .native-intro { display:block; }
 .native-intro>p { margin-top:12px; max-width:420px; }
 .wrap { padding:0 22px; }
 .nav { gap:18px; }
 .nav .github-nav { display:none; }
 .hero { padding-top:35px; }
 .hero-grid { grid-template-columns:1fr; gap:35px; }
 .hero-copy { text-align:center; }
 .hero-copy .eyebrow,.hero-copy .hero-actions { justify-content:center; }
 .hero-description { margin:auto; }
 h1 { font-size:52px; }
 .hero-demo { max-width:570px; width:100%; margin:auto; }
 .app-strip { justify-content:center; flex-wrap:wrap; gap:13px 23px; }
 .section { padding:60px 0; }
 .section-heading { display:block; }
 .section-heading>p { margin-top:18px; max-width:420px; }
 .feature-board { grid-template-columns:1fr; gap:16px; }
 .feature-card { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; }
 .feature-card h3 { margin-top:0; }
 .card-visual { border-bottom:0; border-right:1px solid var(--line); padding-right:15px; padding-bottom:0; height:140px; }
 .local-section { grid-template-columns:1fr; gap:30px; }
 .local-art { max-width:480px; width:100%; margin:auto; }
 .privacy-promises { justify-content:center; }
 .download-grid { grid-template-columns:1fr; }
 .flow .download-grid { grid-template-columns:1fr; }
 .download-card p { min-height:0; }
 .flow .download-card p { min-height:0; }
 .footer { flex-wrap:wrap; gap:20px; }
 .paper-window { width:370px; }
 .floating-card { width:106px; padding:10px; }
 .floating-card.voice { left:-6px; top:183px; }
 .floating-card.language { right:-6px; top:0; }
 .floating-card.image { right:-6px; bottom:26px; }
 .hand-note { display:none; }
}
@media (max-width:450px) {
 .scene-top { font-size:14px; }
 .scene-top span:last-child { font-size:10.5px; }
 .model-console-body { padding:16px; }
 .model-row { grid-template-columns:29px minmax(0,1fr) auto; padding:10px 9px; }
 .model-row-mark { width:29px; height:29px; }
 .model-row>small { display:none; }
 .model-console-footer { flex-wrap:wrap; }
 .native-stats { gap:9px; }
 .native-stat { min-height:170px; padding:14px; }
 .native-stat strong { font-size:25.5px; }
 .native-stat p { font-size:14.5px; }
 .motion-toggle { font-size:12.5px; }
 .nav { gap:15px; font-size:15px; }
 .nav .nav-guide { display:none; }
 .nav .nav-download { padding:7px 10px; }
 .brand { font-size:22.5px; }
 .hero-description { font-size:18.5px; }
 .hero-actions { gap:15px; }
 .button { padding:12px 18px; font-size:15.5px; }
 .desktop-stage { height:410px; padding:30px 11px; }
 .mail-body { font-size:14.5px; padding:13px; }
 .mail-meta { padding:12px; font-size:12.5px; }
 .ghost-menu { top:122px; width:175px; }
 .menu-action { font-size:13px; padding:6px; }
 .shortcut { bottom:20px; left:13px; gap:4px; font-size:10.5px; }
 .shortcut>span { display:none; }
 .result-toast,.processing { right:14px; bottom:23px; font-size:10.5px; }
 .step-button { font-size:12.5px; }
 .step-button b { display:none; }
 .flow h1 { font-size:38px; letter-spacing:-1.9px; }
 .device-flow { padding:12px 10px; }
 .device-flow-header { font-size:12.5px; }
 .device-badge { display:none; }
 .device-flow-track { gap:7px; }
 .device-node { flex-direction:column; gap:5px; font-size:10px; }
 .device-status { font-size:12.5px; }
 .flow .local-section { padding-top:45px; }
 .flow .orbit-node { font-size:12.5px; padding:6px 9px; }
 .flow .orbit-node.n1 { left:17px; top:67px; }
 .flow .orbit-node.n2 { right:14px; top:109px; }
 .flow .orbit-node.n3 { left:17px; bottom:89px; }
 .flow .orbit-node.n4 { right:19px; bottom:57px; }
 .feature-tabs { flex-wrap:wrap; }
 .feature-tab { padding:6px 11px; font-size:14px; }
 .feature-card { padding:19px; grid-template-columns:1fr; gap:8px; }
 .card-visual { border-right:0; border-bottom:1px solid var(--line); padding-bottom:20px; }
 .feature-card h3 { margin-top:12px; }
 .local-points { flex-wrap:wrap; }
 .paper-window { width:calc(100% - 28px); height:251px; top:22px; }
 .paper-content { padding:16px 20px; }
 .paper-content h3 { font-size:22.5px; }
 .paper-content p { font-size:16px; }
 .floating-card.voice { top:241px; left:0; width:91px; }
 .floating-card.voice .wave { height:15px; }
 .floating-card.language { top:2px; width:82px; padding:8px; z-index:2; }
 .floating-card.language .language-symbol { font-size:21.5px; margin:0; }
 .floating-card.language small { display:none; }
 .floating-card.image { right:0; bottom:31px; width:91px; }
 .floating-card.image svg { height:19px; margin-bottom:0; }
 .floating-card strong { font-size:9px; }
 .floating-card small { font-size:8px; }
}

.flow .hero-demo .motion-toggle { display:block; margin:8px 0 0 auto; padding:5px 8px; }