:root { --paper:#f7f4ec; --ink:#111111; --lime:#c6ff20; --coral:#ff4e21; --blue:#3157ff; --line:rgba(17,17,17,.24); --sans:"Manrope",Arial,sans-serif; --condensed:"Barlow Condensed","Arial Narrow",sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.container { width:min(1240px, calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; top:-4rem; left:1rem; z-index:99; background:var(--lime); padding:10px; font-weight:800; }.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 94%, transparent); backdrop-filter:blur(12px); }
.nav-row { min-height:99px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--ink); }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--condensed); font-size:18px; line-height:.78; font-weight:900; letter-spacing:-.7px; white-space:nowrap; }.brand small { display:block; margin-top:5px; font:600 8px var(--mono); letter-spacing:.4px; text-transform:uppercase; }.brand-mark { display:grid; width:48px; aspect-ratio:1; place-items:center; border:3px solid var(--ink); border-radius:50%; background:var(--lime); font-family:var(--condensed); font-size:21px; font-weight:900; letter-spacing:-2px; }
.nav-links { display:flex; margin-left:auto; gap:36px; align-items:center; font-size:13px; font-weight:800; }.nav-links a:hover,.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.nav-actions { display:flex; gap:24px; align-items:center; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:58px; padding:0 25px; border:1.5px solid var(--ink); font-size:12px; font-weight:900; letter-spacing:-.15px; transition:transform .2s,box-shadow .2s; }.button span { margin-left:20px; font-size:18px; }.button:hover { transform:translate(-3px,-3px); box-shadow:4px 4px 0 var(--lime); }.button-dark { background:var(--ink); color:white; }.button-small { min-height:51px; padding:0 20px; }.share-button { min-height:44px; padding:0 17px; border:2px solid var(--ink); background:transparent; text-transform:uppercase; font:700 11px var(--sans); letter-spacing:.7px; cursor:pointer; }.share-button span { font-size:20px; vertical-align:-2px; margin-right:7px; }.menu-toggle { display:none; }
.section { padding:112px 0; }.hero { padding:86px 0 78px; overflow:hidden; }.hero-grid { display:grid; grid-template-columns:1.02fr .8fr; gap:78px; align-items:center; }.eyebrow,.section-label { display:flex; gap:11px; align-items:center; font:500 11px var(--mono); letter-spacing:.5px; }.eyebrow span { width:26px; height:2px; background:var(--ink); }.eyebrow b { border:1.5px solid var(--ink); padding:6px 8px; background:var(--lime); font:700 11px var(--sans); letter-spacing:.3px; }.eyebrow strong { font:800 11px var(--sans); letter-spacing:1.1px; }.hero h1,.section h2 { margin:24px 0 0; font-family:var(--condensed); font-size:clamp(74px, 8.1vw, 126px); font-weight:900; line-height:.81; letter-spacing:-4.5px; text-transform:uppercase; }.hero h1 em,.section h2 i { color:var(--coral); font-style:normal; }.marker-line { height:10px; width:81%; margin:25px 0 11px; background:var(--lime); transform:skewY(-1.4deg); }.hero-text { max-width:650px; margin:0; font-size:18px; line-height:1.64; letter-spacing:-.65px; }.hero-cta { display:flex; align-items:center; gap:28px; margin-top:30px; }.text-link { font-size:12px; font-weight:900; border-bottom:1px solid var(--ink); padding-bottom:6px; }.text-link span { margin-left:10px; font-size:16px; }.hero-flags { display:grid; gap:10px; max-width:400px; margin-top:20px; }.hero-flags div { position:relative; display:flex; align-items:center; gap:15px; min-height:46px; padding:6px 12px; border:2px solid var(--ink); background:#fffdf7; box-shadow:4px 4px 0 var(--lime); font-size:10px; text-transform:uppercase; }.hero-flags div:nth-child(2) { box-shadow:4px 4px 0 var(--coral); }.hero-flags b { padding:4px 7px; border:1px solid var(--ink); background:var(--lime); }.hero-flags span { font-weight:800; }.disclosure { max-width:540px; margin:18px 0 0; font-size:10px; color:#5d5b56; }
.hero-video { position:relative; min-height:632px; }.video-shell { position:absolute; z-index:2; inset:32px 42px 6px 28px; overflow:hidden; border:6px solid var(--ink); border-radius:36px 30px 33px 30px; background:#393633; transform:rotate(3.1deg); box-shadow:15px 24px 0 rgba(17,17,17,.18); }.hero-film { width:100%; height:100%; display:block; object-fit:cover; opacity:.94; }.video-shell:after { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.27),transparent 32%,rgba(0,0,0,.14)); pointer-events:none; }.video-top,.video-bottom { position:absolute; z-index:2; display:flex; justify-content:space-between; left:21px; right:21px; font:10px var(--mono); color:white; text-shadow:0 1px 2px #000; }.video-top { top:17px; }.video-top b { color:#ff6464; }.video-bottom { bottom:14px; }.play-button { position:absolute; z-index:4; top:50%; left:50%; display:grid; place-items:center; width:86px; height:86px; border:5px solid var(--ink); border-radius:50%; background:var(--lime); transform:translate(-50%,-50%); cursor:pointer; box-shadow:7px 8px 0 rgba(17,17,17,.55); }.play-button span { margin-left:5px; font-size:30px; }.shape { position:absolute; z-index:0; }.shape-lime { right:0; top:175px; width:155px; height:254px; border:4px solid var(--ink); border-radius:50% 50% 6px 6px; background:var(--lime); }.shape-orange { left:0; bottom:4px; width:145px; height:210px; border:4px solid var(--ink); border-radius:55% 45% 60% 35%; background:var(--coral); }.sticker { position:absolute; z-index:5; display:block; border:3px solid var(--ink); box-shadow:6px 7px 0 var(--ink); padding:11px 18px; font-family:var(--condensed); font-size:28px; font-weight:900; line-height:.8; letter-spacing:-.5px; }.sticker-orange { top:66px; right:11px; background:var(--coral); transform:rotate(8deg); }.sticker-blue { bottom:69px; left:0; background:var(--blue); color:white; transform:rotate(-7deg); }.sticker-blue b { color:var(--lime); }
.intro-section { border-top:1px solid var(--line); }.split-heading { display:grid; grid-template-columns:1fr 1.5fr 1.3fr; gap:35px; }.section-label { font-size:10px; font-weight:800; }.section-label span { color:#099e51; }.section-kicker { margin:0; font:500 14px var(--mono); }.section h2 { margin:14px 0 0; font-size:clamp(56px,6vw,92px); letter-spacing:-3px; }.section-body { align-self:end; padding-bottom:5px; font-size:16px; line-height:1.68; letter-spacing:-.45px; }.section-body p { margin:0 0 17px; }.section-body p + p { font-size:13px; }
.steps-section { background:var(--ink); color:var(--paper); }.steps-section .section-label span { color:var(--lime); }.steps-section h2 i { color:var(--lime); }.section-top { display:grid; grid-template-columns:1fr 2fr; }.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:0; margin:84px 0 0; border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.35); list-style:none; }.steps-grid li { min-height:288px; padding:20px 25px 29px; border-right:1px solid rgba(255,255,255,.35); }.steps-grid li:last-child { border-right:0; }.step-no { color:var(--lime); font:500 11px var(--mono); }.icon { display:grid; width:62px; height:62px; place-items:center; margin:36px 0 29px; border:2px solid var(--paper); color:var(--lime); font-size:31px; }.icon-camera { border-radius:50%; }.icon-check { background:var(--lime); color:var(--ink); transform:rotate(8deg); }.steps-grid h3 { margin:0; font-size:16px; }.steps-grid p { margin:8px 0 0; color:#d5d2c9; font-size:12px; line-height:1.55; }.process-link { display:inline-block; margin-top:28px; color:var(--lime); border-bottom:1px solid var(--lime); padding-bottom:6px; font-size:12px; font-weight:800; }.process-link span { margin-left:12px; }
.work-section { overflow:hidden; }.task-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:76px; }.task-card { min-height:392px; position:relative; overflow:hidden; padding:20px; border:2px solid var(--ink); background:#fffdf9; }.task-card:nth-child(2) { transform:translateY(40px); }.card-no { margin:0; font:500 11px var(--mono); }.task-card h3 { position:relative; margin:17px 0 5px; font:900 45px/1 var(--condensed); text-transform:uppercase; }.task-card > p:last-child { position:relative; max-width:230px; margin:0; font-size:12px; line-height:1.52; }.task-art { position:absolute; inset:48px 17px 0; }.motion .task-art { background:#a9d4ef; }.motion .sun { position:absolute; top:26px; right:31px; width:73px; aspect-ratio:1; border:3px solid var(--ink); border-radius:50%; background:var(--lime); }.motion .road { position:absolute; width:135%; height:180px; bottom:-92px; left:-45px; border-top:3px solid var(--ink); background:var(--coral); transform:rotate(-9deg); }.motion .walker { position:absolute; top:83px; left:37%; font-size:132px; line-height:1; transform:rotate(-23deg); }.voice .task-art { background:var(--lime); }.voice .wave { position:absolute; top:36px; left:19px; font:900 93px/1 var(--condensed); letter-spacing:-20px; transform:rotate(90deg); }.voice .mic { position:absolute; top:95px; right:40px; display:grid; width:125px; aspect-ratio:1; place-items:center; border:4px solid var(--ink); border-radius:50%; background:var(--coral); font-size:70px; }.image .task-art { background:var(--blue); }.image .frame { position:absolute; top:34px; left:34px; display:grid; width:190px; height:218px; place-items:center; border:5px solid var(--ink); background:#ffe3a8; font-size:120px; transform:rotate(-6deg); }.image .spark { position:absolute; top:11px; right:27px; font-size:60px; color:var(--lime); }.section-note { margin:81px 0 0; font-size:11px; color:#5d5b56; }
.fit-section { margin-top:70px; background:var(--coral); }.fit-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:110px; }.fit-section .section-label span,.fit-section h2 i { color:var(--lime); }.fit-list { padding:0; margin:10px 0 0; border-top:2px solid var(--ink); list-style:none; }.fit-list li { display:grid; grid-template-columns:55px 1fr; gap:12px; padding:20px 0; border-bottom:2px solid var(--ink); font-size:15px; font-weight:700; line-height:1.45; }.fit-list b { font:500 11px var(--mono); }
.device-layout { display:grid; grid-template-columns:1.1fr .8fr; gap:110px; align-items:end; }.device-copy { max-width:450px; margin:24px 0; font-size:14px; line-height:1.65; }.device-specs { padding:0; list-style:none; font-size:13px; line-height:2; }.device-specs b { display:inline-block; width:90px; font-family:var(--mono); font-size:11px; }.compat-card { border:3px solid var(--ink); background:var(--ink); color:var(--paper); box-shadow:12px 12px 0 var(--lime); }.compat-head { display:flex; justify-content:space-between; padding:14px 17px; color:var(--ink); background:var(--lime); font:500 10px var(--mono); }.live-dot { color:#e82020; }.compat-card h3 { margin:28px 25px 5px; font:900 32px/1 var(--condensed); text-transform:uppercase; }.compat-card > p { margin:0 25px 23px; color:#d5d2c9; font-size:12px; line-height:1.55; }.compat-row { display:flex; justify-content:space-between; padding:14px 25px; border-top:1px solid #525252; font-size:12px; }.compat-row b { color:var(--lime); }.compat-result { margin:24px 25px 16px; padding:13px; border:2px solid var(--lime); font-size:12px; font-weight:800; }.retry-button { width:calc(100% - 50px); margin:0 25px 25px; padding:13px; border:1px solid var(--paper); color:var(--paper); background:transparent; font-size:11px; font-weight:800; cursor:pointer; }.retry-button:hover { background:var(--paper); color:var(--ink); }
.alert-section { padding-top:70px; }.alert-box { display:grid; grid-template-columns:130px 1fr 1fr; gap:40px; padding:52px; border:4px solid var(--ink); background:var(--lime); }.alert-mark { margin:0; color:var(--coral); font:900 172px/.75 var(--condensed); }.alert-section h2 { margin-top:15px; }.alert-text { align-self:end; font-size:14px; line-height:1.6; }.alert-text p { margin-top:0; font-weight:700; }.alert-text ul { padding-left:19px; }.alert-text li { margin:9px 0; }
.faq-layout { display:grid; grid-template-columns:1fr 1fr; gap:115px; }.faq-list { border-top:2px solid var(--ink); }.faq-list details { border-bottom:2px solid var(--ink); }.faq-list summary { display:flex; justify-content:space-between; gap:16px; padding:21px 0; cursor:pointer; font-size:14px; font-weight:800; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { font-size:26px; line-height:.6; transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { max-width:510px; margin:0; padding:0 0 21px; font-size:13px; line-height:1.65; }
.final-cta { background:var(--blue); color:#fff; text-align:center; }.final-cta .container { position:relative; }.cta-arrow { position:absolute; top:-27px; left:4%; color:var(--lime); font:900 80px/1 var(--condensed); transform:rotate(-26deg); }.final-cta h2 { font-size:clamp(72px,8vw,130px); }.final-cta h2 i { color:var(--lime); }.final-cta .button { margin-top:31px; background:var(--lime); color:var(--ink); }.final-caption { margin:16px 0 0; font-size:10px; opacity:.75; }
.site-footer { padding:48px 0 30px; background:var(--ink); color:var(--paper); }.site-footer .brand-mark { border-color:var(--paper); }.footer-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }.footer-grid > p { margin:0; font-size:12px; line-height:1.6; }.footer-grid > div { display:grid; gap:8px; font-size:12px; font-weight:700; }.footer-grid .copyright { grid-column:1/-1; padding-top:27px; border-top:1px solid #4e4e4e; color:#aaa69d; font-size:10px; }
.toast { position:fixed; z-index:90; right:18px; bottom:18px; max-width:300px; padding:14px 17px; background:var(--ink); color:white; box-shadow:5px 5px 0 var(--lime); font-size:12px; font-weight:700; transform:translateY(140%); transition:transform .25s; }.toast.show { transform:translateY(0); }
.reveal { animation:reveal .75s both; }.reveal:nth-child(2) { animation-delay:.08s; }.reveal:nth-child(3) { animation-delay:.16s; }@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,html { scroll-behavior:auto; animation:none !important; transition:none !important; } }
@media (max-width:950px) { .nav-row { min-height:78px; gap:15px; }.nav-links { gap:17px; }.nav-actions { gap:9px; }.button-small { padding:0 12px; }.share-button { padding:0 10px; }.hero-grid { gap:35px; }.hero-video { min-height:500px; }.sticker { font-size:22px; }.split-heading { grid-template-columns:.75fr 1.25fr; }.section-body { grid-column:2; }.fit-layout,.device-layout,.faq-layout { gap:55px; }.alert-box { grid-template-columns:78px 1fr; }.alert-text { grid-column:2; }.task-card:nth-child(2) { transform:translateY(20px); } }
@media (max-width:700px) { .container { width:min(100% - 32px, 1240px); }.site-header { position:relative; }.nav-row { min-height:76px; flex-wrap:wrap; padding:10px 0; }.nav-actions { margin-left:auto; }.nav-actions .share-button { display:none; }.button-small { min-height:43px; font-size:10px; }.menu-toggle { display:block; order:2; margin-left:auto; padding:7px 0; border:0; background:transparent; text-transform:uppercase; font-size:10px; font-weight:900; }.nav-links { display:none; order:3; flex-basis:100%; margin:0; padding:9px 0 12px; border-top:1px solid var(--line); }.nav-links.open { display:flex; justify-content:space-between; }.hero { padding-top:48px; }.hero-grid { grid-template-columns:1fr; gap:40px; }.hero h1 { font-size:clamp(68px,20vw,105px); letter-spacing:-3px; }.hero-text { font-size:15px; }.hero-cta { align-items:stretch; flex-direction:column; gap:18px; }.hero-cta .button { width:100%; }.text-link { align-self:flex-start; }.hero-video { width:min(100%,465px); min-height:498px; margin:0 auto; }.video-shell { inset:25px 30px 18px 18px; }.sticker-orange { top:50px; right:0; }.sticker-blue { bottom:65px; left:-3px; }.section { padding:76px 0; }.split-heading,.section-top,.fit-layout,.device-layout,.faq-layout { grid-template-columns:1fr; gap:26px; }.section-body { grid-column:auto; }.section h2 { font-size:clamp(58px,17vw,90px); }.steps-grid,.task-grid { grid-template-columns:1fr; }.steps-grid { margin-top:48px; }.steps-grid li { min-height:0; border-right:0; border-bottom:1px solid rgba(255,255,255,.35); }.steps-grid li:last-child { border-bottom:0; }.icon { margin:22px 0; }.task-grid { margin-top:44px; }.task-card { min-height:355px; }.task-card:nth-child(2) { transform:none; }.section-note { margin-top:26px; }.fit-section { margin-top:0; }.device-layout { gap:49px; }.alert-section { padding-top:40px; }.alert-box { grid-template-columns:58px 1fr; gap:18px; padding:27px 22px; }.alert-mark { font-size:96px; }.alert-text { grid-column:1/-1; }.faq-layout { gap:43px; }.final-cta h2 { font-size:clamp(64px,18vw,100px); }.cta-arrow { left:0; font-size:57px; }.footer-grid { grid-template-columns:1fr; gap:25px; }.footer-grid .copyright { grid-column:auto; }.footer-grid > div { grid-template-columns:1fr 1fr; } }