@font-face{font-family:'Archivo';src:url(fonts/archivo.ttf);font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(fonts/jbm.ttf);font-weight:100 800;font-display:swap}
:root{
  --concrete:#D4D3CE;--paper:#ECEBE6;--graphite:#1D1E1B;--flame:#F05A1E;--rock:#BDBCB6;
  --screen:#0F1512;--glow:#8FF0C0;--mut:#5C5D58;--line:#C3C2BC;
  --r-dev:14px;--wrap:1120px;
}
*{box-sizing:border-box}html,body{margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--graphite);font:400 16px/1.55 Archivo,system-ui,sans-serif;font-stretch:100%;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--flame);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.disp{font-stretch:125%;font-weight:800;letter-spacing:-.035em;line-height:.92}
.bar{background:var(--graphite);color:var(--paper);font-size:13px;text-align:center;padding:9px 16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;max-width:var(--wrap);margin:0 auto}
.logo{font-stretch:125%;font-weight:900;font-size:26px;letter-spacing:-.05em;text-decoration:none;display:flex;align-items:flex-end;gap:3px}
.logo i{display:inline-block;width:9px;height:9px;background:var(--flame);border-radius:2px;margin-bottom:6px}
.hr{display:flex;align-items:center;gap:8px}
.langs{display:flex;font-size:13px;font-weight:600}
.langs a{text-decoration:none;color:var(--mut);padding:6px 6px;border-radius:8px}
.langs a.on{color:var(--graphite);background:var(--concrete)}
.hbtn{font:700 14px Archivo;background:var(--graphite);color:var(--paper);border:0;border-radius:10px;padding:10px 14px;text-decoration:none;cursor:pointer}

/* hero / configurator */
.hero{display:grid;gap:26px;padding:14px 20px 56px;max-width:var(--wrap);margin:0 auto}
.hero h1{font-size:clamp(52px,13vw,112px);margin:6px 0 14px}
.lead{font-size:18px;max-width:34em;margin:0;color:#34352f}
.stage{position:relative;background:var(--concrete);border-radius:22px;overflow:hidden;aspect-ratio:1/1}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.screen{position:absolute;left:14px;bottom:14px;background:var(--screen);color:var(--glow);border-radius:10px;padding:10px 13px;font:500 13px/1.45 'JetBrains Mono',monospace;box-shadow:0 0 0 3px #2a2f2b inset;min-width:180px}
.screen b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#c9ffe4}
.screen .bars{display:flex;gap:4px;margin-top:6px}
.screen .bars span{height:6px;flex:1;border-radius:2px;background:#1f3a2c}
.screen .bars span.on{background:var(--glow)}
.pick{display:grid;gap:18px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg button{font:inherit;text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r-dev);padding:12px 12px 11px;cursor:pointer;color:var(--graphite)}
.seg button b{display:block;font-stretch:115%;font-weight:800;font-size:17px;letter-spacing:-.02em}
.seg button span{display:block;font-size:13px;color:var(--mut)}
.seg button[aria-checked=true]{border-color:var(--graphite);box-shadow:0 0 0 1px var(--graphite)}
.colors{display:flex;gap:10px;align-items:center}
.colors button{display:flex;align-items:center;gap:8px;font:600 14px Archivo;background:none;border:2px solid transparent;border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;color:var(--graphite)}
.colors button i{width:26px;height:26px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.colors button[aria-checked=true]{border-color:var(--graphite)}
.incl{font-size:15px;color:#34352f;margin:0;min-height:3em}
.buyrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.price{font-stretch:115%;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.price s{font-size:16px;font-weight:500;color:var(--mut);letter-spacing:0;margin-left:6px}
.cta{flex:1;min-width:200px;font:700 17px Archivo;background:var(--flame);color:#fff;border:0;border-radius:var(--r-dev);padding:17px 18px;cursor:pointer;text-align:center;text-decoration:none}
.cta:hover{background:#d94c14}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--mut)}
.trust li:before{content:'';display:inline-block;width:7px;height:7px;background:var(--glow);border-radius:50%;margin-right:7px;box-shadow:0 0 0 2px var(--screen)}

section{padding:64px 20px;max-width:var(--wrap);margin:0 auto}
h2{font-size:clamp(34px,7vw,60px);margin:0 0 16px}
.sub{font-size:17px;max-width:36em;color:#34352f;margin:0 0 26px}

/* video */
.vid{display:grid;gap:24px;align-items:center}
.vid video{width:100%;max-width:400px;border-radius:22px;background:#000;aspect-ratio:9/16;object-fit:cover}

/* modules */
.mods{background:var(--graphite);color:var(--paper);max-width:none;padding:70px 0}
.mods .wrap{display:grid;gap:30px}
.mods .sub{color:#c9c8c2}
.stack{display:flex;justify-content:center}
.stack svg{width:100%;max-width:360px;height:auto}
.stack .m{transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s;cursor:pointer}
.mtabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mtabs button{font:700 15px Archivo;background:transparent;color:var(--paper);border:2px solid #4a4b45;border-radius:10px;padding:10px 14px;cursor:pointer}
.mtabs button[aria-selected=true]{background:var(--paper);color:var(--graphite);border-color:var(--paper)}
.mpanel h3{font-stretch:115%;font-weight:800;font-size:28px;letter-spacing:-.02em;margin:0 0 8px}
.mpanel p{margin:0;color:#d7d6d0;max-width:30em}
.mpanel .k{font:500 14px 'JetBrains Mono',monospace;color:var(--glow);margin-top:14px}

/* moments */
.moments{display:grid;gap:14px}
.mo{margin:0}
.mo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.mo figcaption{font-weight:600;margin-top:10px;font-size:16px}

/* compare */
.cmp{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border-radius:18px;overflow:hidden}
.cmp th,.cmp td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--paper)}
.cmp thead th{font-stretch:115%;font-weight:800;font-size:18px;background:var(--concrete)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}
.cmp tr:last-child td{border-bottom:0;font-weight:700}
.no{color:#9c9b95}
.duo{margin-top:14px;font-size:15px;color:#34352f}

.specs{display:grid;grid-template-columns:1fr;border-top:2px solid var(--graphite)}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.specs dt{color:var(--mut)}.specs dd{margin:0;font-weight:600;text-align:right}

details{border-bottom:1px solid var(--line);padding:16px 0}
summary{font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary:after{content:'+';font-size:22px;line-height:1;color:var(--flame)}
details[open] summary:after{content:'\2212'}
details p{margin:10px 0 0;color:#34352f;max-width:44em}

.final{background:var(--flame);color:#fff;max-width:none;text-align:left}
.final .wrap{display:grid;gap:18px;justify-items:start}
.final h2{font-size:clamp(46px,11vw,100px);margin:0}
.final .cta{background:var(--graphite);flex:none}

footer{background:var(--graphite);color:#bdbcb6;font-size:14px;padding:34px 20px 44px}
footer .wrap{display:grid;gap:14px;padding:0}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer nav a{color:var(--paper);text-decoration:none;font-weight:600}

/* docs */
.doc{max-width:760px;margin:0 auto;padding:20px 20px 60px}
.doc h1{font-size:clamp(32px,8vw,60px);margin:10px 0 14px;hyphens:auto;overflow-wrap:break-word}
h1,h2{hyphens:auto;overflow-wrap:break-word}
.doc h2{font-size:22px;font-stretch:110%;letter-spacing:-.01em;margin:30px 0 8px;line-height:1.2}
.doc p,.doc li{font-size:15.5px;color:#2c2d29}
.doc .upd{color:var(--mut);font-size:14px}
.doc .note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15px}
.doc td{border-bottom:1px solid var(--line);padding:9px 4px;vertical-align:top}
.center{text-align:center}

@media (min-width:860px){
  .hero{grid-template-columns:1.1fr .9fr;grid-template-areas:'stage copy' 'stage pick';grid-template-rows:auto 1fr;column-gap:44px;row-gap:22px;align-items:start;padding-top:20px}
  .hero .copy{grid-area:copy}.hero .stage{grid-area:stage;position:sticky;top:20px}.hero .pick{grid-area:pick}
  .hero h1{font-size:clamp(56px,6.4vw,88px);margin-top:0}
  .lead{font-size:17px}
  .vid{grid-template-columns:1fr 1fr}
  .mods .wrap{grid-template-columns:1fr 1fr;align-items:center}
  .moments{grid-template-columns:repeat(3,1fr)}
  .specs{grid-template-columns:1fr 1fr;column-gap:40px}
}
@media (max-width:480px){
  .cmp{font-size:13.5px}.cmp th,.cmp td{padding:11px 6px}.cmp thead th{font-size:15px}
  .seg button{padding:11px 9px}.seg button b{font-size:15.5px}
}
@media (max-width:420px){
  header{padding:14px 16px;gap:8px}.logo{font-size:22px}.logo i{width:8px;height:8px;margin-bottom:5px}
  .langs a{padding:5px 4px}.hbtn{padding:9px 11px;font-size:13px}
}
@media (max-width:420px){
  header{padding:14px 16px;gap:8px}.logo{font-size:22px}.logo i{width:8px;height:8px;margin-bottom:5px}
  .langs a{padding:5px 4px}.hbtn{padding:9px 11px;font-size:13px}
}
.credit{font-size:13px;color:var(--mut);margin-top:8px}