/* /ranger/ - product page styles, standalone (the site stylesheet is not
   loaded here). The pixel face is Ranger's own OLED type: it is used for
   headings and UI, body copy stays in a clean sans. Pixel things move in
   steps(); reveals are short ease-outs. */

@font-face{
  font-family:'NJ Pixel';
  src:url('/fonts/njpixel.ttf') format('truetype');
  font-display:swap;
}

:root{
  --ranger:#66e08c;--ranger-deep:#0b1210;--ranger-2:#0f1915;--night:#05070a;
  --void:#131218;--edge:#1f2d26;--white:#f4f7f5;--grey:#9aa8a1;--dim:#62706a;
  --gold:#ffe45c;--aqua:#55ffff;--green:#66e06b;--red:#ff6b6b;
  --pixel:'NJ Pixel',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ranger-deep)}
body{margin:0;background:var(--ranger-deep);color:var(--white);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--ranger);color:var(--ranger-deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
b,strong{font-weight:600}
em{font-style:normal}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* pixel type: headings and UI only, at multiples of 8 so glyphs stay crisp */
.r-h1,.r-h2,.r-kick,.r-chip,.r-btn,.fcard-n,.fcard-t,.tag,.net-cap .n,.sim button,.sim-lbl,
.sim-guide,.ph-step .n,.ph-count,.gd summary,.spec,.use b,.r-big,.pin b,.ba-tag,.ba figcaption,
.ba-line::after,.r-inset figcaption,.ph-ranger figcaption,.sim-nojs,.net-svg text,.nosvc,.clip figcaption{
  font-family:var(--pixel);font-size:16px;font-weight:400;line-height:1.5}

/* ---- site header and footer, on the night palette -------------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1rem,4vw,3.5rem);
  background:rgba(5,7,10,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge)}
.brand{font-family:'Playfair Display','Iowan Old Style',Georgia,serif;font-size:1.15rem;font-weight:600}
.brand em{font-style:italic;color:var(--ranger)}
.nav nav{display:flex;gap:clamp(.9rem,2vw,1.8rem);align-items:center;flex-wrap:wrap}
.nav nav a{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);transition:color .2s}
.nav nav a:hover{color:var(--white)}
.nav nav a.pill{background:var(--white);color:var(--ranger-deep);border-radius:999px;padding:.6rem 1.2rem}
.nav nav a.pill:hover{background:var(--ranger)}
.foot{border-top:1px solid var(--edge);padding:3rem clamp(1rem,4vw,3rem) 2rem;background:var(--night)}
.foot-in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start}
.foot-name{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem}
.foot-sub{color:var(--grey);font-size:.85rem;margin-top:.3rem}
.foot-links{display:flex;gap:.7rem}
.foot-links a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--edge);border-radius:50%;
  color:var(--grey);transition:color .2s,border-color .2s}
.foot-links a:hover{color:var(--ranger);border-color:var(--ranger)}
.foot-links svg{width:17px;height:17px}
.foot-copy{max-width:var(--max);margin:2rem auto 0;color:var(--dim);font-size:.78rem}

/* ---- buttons ---------------------------------------------------- */
.r-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;cursor:pointer;
  border:1px solid #2c4236;background:rgba(16,27,22,.8);color:var(--white);
  transition:border-color .2s,color .2s,background .2s,transform .2s}
.r-btn:hover{border-color:var(--ranger);color:var(--ranger);transform:translateY(-1px)}
.r-btn-go{background:var(--ranger);border-color:var(--ranger);color:var(--ranger-deep)}
.r-btn-go:hover{background:#8af0aa;color:var(--ranger-deep)}

.r-main{max-width:none;padding:0}
.r-wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ul{color:var(--ranger);text-decoration:underline;text-underline-offset:4px}
.ul:hover{color:var(--gold)}

/* ---- OLED -------------------------------------------------- */
/* Always a whole-number scale of 128x64, so every OLED pixel lands on
   the grid. Stills are white-on-transparent so the glow hugs the pixels. */
.oled{position:relative;display:block;flex:none;width:calc(128px*var(--s,2));max-width:100%;aspect-ratio:2/1;
  overflow:hidden;background:#000;
  box-shadow:0 0 0 3px #000,0 0 0 6px #1d2a24,0 0 32px rgba(102,224,140,.14)}
.oled .lay{position:absolute;inset:0;overflow:hidden;background:#000}
.oled img{width:100%;height:100%;image-rendering:pixelated;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.oled img.strip{width:calc(var(--n)*100%);max-width:none;filter:none;
  animation:spr var(--d) steps(var(--n)) infinite}
.oled::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--s,2)*1px - 1px),rgba(0,0,0,.28) 0 calc(var(--s,2)*1px))}
@keyframes spr{to{transform:translateX(-100%)}}
.lay.wipe{animation:wipe .3s steps(6) both}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* the hero inset plays boot logo -> menu -> tracking, no JS needed */
.seq .lay:nth-child(3){animation:gone 1ms steps(1) 1.4s forwards}
.seq .lay:nth-child(2){animation:gone 1ms steps(1) 3s forwards}
@keyframes gone{from,to{opacity:0;visibility:hidden}}

/* ---- loops pause when off-screen or in a hidden tab ---------- */
.paused,.paused *,.paused *::before,.paused *::after,
.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important}

/* ---- section furniture ----------------------------------------- */
.r-sec{position:relative;padding:96px 0;background:var(--ranger-deep);border-top:1px solid var(--edge)}
.r-sec-alt{background:radial-gradient(120% 80% at 50% 0%,#12221b,var(--ranger-2) 60%)}
.r-kick{color:var(--ranger);margin-bottom:8px}
.r-h2{font-size:48px;line-height:1.2;color:var(--white);text-shadow:0 0 24px rgba(102,224,140,.18);max-width:22ch;margin-bottom:40px}
.r-sec ol{list-style:none;padding:0;margin:0}
.r-lead{max-width:62ch;margin:-16px 0 40px;color:#d8e6de}
.r-lead b{color:var(--gold)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .3s ease-out,transform .3s ease-out}
.rv.in{opacity:1;transform:none}

/* ---- hero ---------------------------------------------------- */
.r-hero{position:relative;overflow:hidden;min-height:calc(100svh - 64px);display:flex;align-items:center;
  padding:48px 0 136px;border-bottom:1px solid var(--edge)}
.r-sky{position:absolute;inset:0;z-index:0;
  background:linear-gradient(var(--night) 0%,#0a0f14 45%,#0e1a16 78%,#122019 100%)}
.r-dawn{position:absolute;inset:0;opacity:0;
  background:linear-gradient(#0f2230 0%,#123329 55%,#1a3d2c 100%);
  animation:fadein .6s ease-out 2.6s forwards}
@keyframes fadein{to{opacity:1}}

.rain{position:absolute;inset:0;background-repeat:repeat;
  animation:fall var(--t) steps(var(--st)) infinite,thin .6s ease-out 2.6s forwards}
.rain1{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'192'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'62'%20y%3D'72'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'30'%20y%3D'74'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'76'%20y%3D'134'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'58'%20y%3D'154'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'78'%20y%3D'16'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'60'%20y%3D'2'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'42'%20y%3D'174'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'54'%20y%3D'54'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3Crect%20x%3D'58'%20y%3D'104'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.55)'%2F%3E%3C%2Fsvg%3E");--h:192px;--t:.48s;--st:8}
.rain2{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'128'%20height%3D'256'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'104'%20y%3D'160'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'4'%20y%3D'112'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'94'%20y%3D'82'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'94'%20y%3D'126'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'14'%20y%3D'22'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'118'%20y%3D'102'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3Crect%20x%3D'62'%20y%3D'192'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.35)'%2F%3E%3C%2Fsvg%3E");--h:256px;--t:.8s;--st:8}
.rain3{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'160'%20height%3D'320'%20shape-rendering%3D'crispEdges'%3E%3Crect%20x%3D'2'%20y%3D'292'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3Crect%20x%3D'46'%20y%3D'228'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3Crect%20x%3D'128'%20y%3D'166'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3Crect%20x%3D'70'%20y%3D'0'%20width%3D'2'%20height%3D'16'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3Crect%20x%3D'102'%20y%3D'130'%20width%3D'2'%20height%3D'12'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3Crect%20x%3D'24'%20y%3D'160'%20width%3D'2'%20height%3D'8'%20fill%3D'rgba(150%2C170%2C230%2C.22)'%2F%3E%3C%2Fsvg%3E");--h:320px;--t:1.2s;--st:10}
@keyframes fall{from{background-position:0 0}to{background-position:calc(var(--h)*-.15) var(--h)}}
@keyframes thin{to{opacity:.3}}

.bolt{position:absolute;inset:0;background:#e9f0ff;opacity:0;animation:bolt 7.6s steps(1) 0.6s infinite}
@keyframes bolt{0%{opacity:0}62%{opacity:.5}63.5%{opacity:0}65%{opacity:.28}66%{opacity:0}}

.tower{position:absolute;right:2%;bottom:72px;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.tower-svg{width:120px;height:240px;image-rendering:pixelated;opacity:.92}
.nosvc{order:-1;padding:2px 8px;background:rgba(40,8,10,.85);color:var(--red);border:1px solid #6a1f24;
  animation:blink 1s steps(2) infinite,gone 1ms steps(1) 4.6s forwards}
@keyframes blink{50%{opacity:.25}}

.r-terrain{position:absolute;left:0;right:0;bottom:0;height:96px;display:flex;align-items:flex-end;overflow:hidden}
.r-terrain i{display:block;flex:0 0 32px;
  background:linear-gradient(#1d3329 0 2px,#0c1612 2px,#070d0a)}

.r-hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy stage" "inset stage";
  column-gap:32px;align-items:center}
.r-copy{grid-area:copy;align-self:end}
.r-chip{display:inline-flex;align-items:center;gap:8px;padding:2px 12px;background:rgba(0,0,0,.45);
  border:1px solid #2c4236;color:var(--gold)}
.r-chip .dot{width:8px;height:8px;background:var(--ranger);animation:blink 1.2s steps(2) infinite}
.r-h1{font-size:96px;line-height:1.1;margin:8px 0;color:var(--white);letter-spacing:4px;
  text-shadow:0 0 32px rgba(102,224,140,.35)}
.r-sub{font-size:24px;line-height:1.4;color:var(--ranger);max-width:28ch}
.r-line{margin:16px 0 20px;color:#cfd8d3;max-width:60ch;background:rgba(5,7,10,.55);padding:8px 12px;
  border-left:6px solid var(--ranger)}
.r-btns{margin-bottom:24px}
.r-inset{grid-area:inset;align-self:start;display:grid;gap:12px;justify-items:start}
.r-inset figcaption{color:var(--grey)}
.live{color:var(--red);animation:blink 1.2s steps(2) infinite}

.r-stage{grid-area:stage;position:relative;justify-self:center;width:100%;max-width:440px}
.r-devs{position:relative;z-index:1;opacity:0;animation:rise .4s cubic-bezier(.2,.8,.2,1) 1.2s forwards;
  filter:drop-shadow(0 0 24px rgba(102,224,140,.35))}
.r-devs img{width:100%;height:auto}
@keyframes rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hl{stroke:var(--ranger);stroke-width:6;stroke-dasharray:24 18;opacity:0;
  animation:fadein .3s ease-out calc(1.8s + var(--i)*.15s) forwards}
.hp{fill:var(--ranger);opacity:0}
.hp1{animation:hp1 3s linear 2.2s infinite}
.hp2{animation:hp2 3s linear 3.2s infinite}
.hp3{animation:hp3 3s linear 4.2s infinite}
@keyframes hp1{0%{transform:translate(630px,305px);opacity:1}40%{transform:translate(338px,1115px);opacity:1}41%,100%{transform:translate(338px,1115px);opacity:0}}
@keyframes hp2{0%{transform:translate(630px,305px);opacity:1}40%{transform:translate(965px,1090px);opacity:1}41%,100%{transform:translate(965px,1090px);opacity:0}}
@keyframes hp3{0%{transform:translate(338px,1115px);opacity:1}40%{transform:translate(965px,1090px);opacity:1}41%,100%{transform:translate(965px,1090px);opacity:0}}
.rings{position:absolute;left:-30%;top:-20%;width:160%;height:140%;z-index:0;overflow:visible;pointer-events:none}
.ring{fill:none;stroke:var(--ranger);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;
  animation:ring 2.4s ease-out calc(1.6s + var(--i)*.8s) infinite}
@keyframes ring{0%{transform:scale(.3);opacity:.8}100%{transform:scale(2.2);opacity:0}}

/* ---- problem -> answer -------------------------------------- */
.flips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;perspective:900px}
.flip{opacity:1;transform:none}
.flip-in{display:grid;height:100%;transform-style:preserve-3d;transition:transform .4s ease-out}
.flip .face{grid-area:1/1;padding:20px;border:1px solid var(--edge);backface-visibility:hidden}
.f-q{background:#131a17;color:#cfd8d3}
.f-a{background:linear-gradient(160deg,#173526,#0f2219);border-color:#2f5a43;color:#e9fff1;transform:rotateY(180deg)}
.tag{display:block;margin-bottom:8px}
.f-q .tag{color:var(--red)}
.f-a .tag{color:var(--ranger)}
.flip.in .flip-in{transform:rotateY(180deg);transition-delay:calc(.5s + var(--i)*80ms)}

/* ---- network ------------------------------------------------- */
.net{display:grid;gap:24px}
.net-svg{width:100%;height:auto;background:linear-gradient(#060b09,#0d1a15);border:1px solid var(--edge)}
.net-svg text{font-family:var(--pixel);fill:#fff}
.nr-l{font-size:16px}
.nr-note{font-size:16px;fill:var(--grey)!important}
.far{opacity:.45}
.range{fill:rgba(102,224,140,.04);stroke:var(--ranger);stroke-width:2;stroke-dasharray:8 8;opacity:.6}
.link{stroke:var(--ranger);stroke-width:4;stroke-dasharray:12 10;opacity:.75}
.wifi{fill:none;stroke:var(--aqua);stroke-width:3;stroke-dasharray:4 8;opacity:.35}
.relay-t{font-size:16px;fill:#131218!important}
.relay-t.gold{fill:var(--gold)!important}
.pk,.relay-in,.biglock-in{opacity:0}
.pk1{animation:pk1 8s linear infinite}
.pk2{animation:pk2 8s linear infinite}
@keyframes pk1{0%{opacity:0;transform:translate(220px,166px)}3%{opacity:1;transform:translate(220px,166px)}20%{opacity:1;transform:translate(452px,126px)}22%,100%{opacity:0;transform:translate(452px,126px)}}
@keyframes pk2{0%,29%{opacity:0;transform:translate(452px,126px)}30%{opacity:1;transform:translate(452px,126px)}47%{opacity:1;transform:translate(684px,166px)}49%,100%{opacity:0;transform:translate(684px,166px)}}
.relay-in{transform-box:fill-box;transform-origin:center;animation:relay 8s steps(1) infinite}
@keyframes relay{0%,21%{opacity:0}22%,46%{opacity:1}47%,100%{opacity:0}}
.biglock-in{animation:biglock 8s steps(1) infinite}
@keyframes biglock{0%,50%{opacity:0}51%,74%{opacity:1}75%,100%{opacity:0}}
.wifi{animation:wifi 8s linear infinite}
@keyframes wifi{0%,74%{opacity:.25;stroke-dashoffset:0}75%{opacity:1}100%{opacity:1;stroke-dashoffset:-48}}
.nphone-scr{animation:phonescr 8s steps(1) infinite}
@keyframes phonescr{0%,76%{fill:#2b2a34}77%,100%{fill:var(--aqua)}}
.net-cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.net-cap li{display:flex;gap:10px;align-items:flex-start;padding:12px;background:rgba(0,0,0,.35);
  border:1px solid var(--edge);color:var(--dim);animation:cap 8s steps(1) infinite;animation-delay:calc(var(--i)*2s - 8s)}
.net-cap .n{color:var(--ranger)}
@keyframes cap{0%{color:#fff;border-color:var(--ranger)}25%,100%{color:var(--dim);border-color:var(--edge)}}

/* ---- feature showcase ---------------------------------------- */
.show{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:64px;align-items:start}
.show-dev{position:sticky;top:max(72px,calc(50vh - 330px))}
.dev{position:relative;aspect-ratio:784/1180;overflow:hidden;filter:drop-shadow(0 0 24px rgba(102,224,140,.35))}
.dev>img{position:absolute;left:3.06%;top:-52.54%;width:176.4%;max-width:none;height:auto}
.oled.dev-scr{position:absolute;left:8.67%;top:17.46%;width:39.54%;height:13.14%;aspect-ratio:auto;box-shadow:none}
.show-cards{display:grid;gap:24px}
.fcard{min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;
  border-left:2px solid var(--edge);padding-left:24px;transition:border-color .2s}
.fcard.on{border-left-color:var(--ranger)}
.fcard-sos.on{border-left-color:var(--red)}
.fcard-oled{display:none;margin-bottom:16px}
.fcard-n{color:var(--dim)}
.fcard-t{font-size:32px;line-height:1.3;color:var(--white);margin:4px 0 12px}
.fcard-sos .fcard-t{color:var(--red)}
.fcard-p{color:#cfd8d3;max-width:44ch}

/* ---- footage ------------------------------------------------- */
.clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:start}
.clip{padding:6px;border:1px solid var(--edge);background:#111915}
.clip video,.clip img{width:100%;height:auto;background:#000}
.clip figcaption{padding:12px 8px 4px;color:#cfd8d3}

/* ---- simulator ----------------------------------------------- */
.sim{position:relative;display:grid;grid-template-columns:auto 160px;grid-template-areas:"scr side" "keys side";
  gap:24px 32px;width:max-content;max-width:100%;margin:0 auto;padding:32px;
  background:#0d0e10;border:1px solid #000;border-radius:14px;
  box-shadow:0 0 0 1px #2c4236,0 24px 64px rgba(0,0,0,.55),0 0 80px rgba(102,224,140,.06);
  background-image:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:16px 16px}
.sim:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.sim-scr{grid-area:scr;position:relative;padding:12px;background:#17181c;border:1px solid #2b2c33;border-radius:6px}
.sim-nojs{display:none;position:absolute;left:50%;bottom:24px;transform:translateX(-50%);padding:4px 10px;
  background:var(--gold);color:#131218;text-shadow:none;white-space:nowrap}
.sim-side{grid-area:side;display:flex;flex-direction:column;align-items:center;gap:16px}
.sim button{font-family:var(--pixel);font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.sim-pwr{display:grid;gap:4px;justify-items:center;padding:8px;background:transparent;border:0;color:#d8d8e0}
.sw{display:block;width:72px;height:28px;padding:5px;background:#2b2a34;border:1px solid #000;border-radius:4px}
.sw i{display:block;width:28px;height:16px;background:#c9c9d2;transform:translateX(30px);transition:transform .12s steps(3)}
.sim-pwr[aria-pressed="true"] .sw i{transform:none;background:var(--ranger)}
.sim-pwr.hint .sw{animation:hint 1s steps(2) infinite}
@keyframes hint{50%{box-shadow:0 0 0 4px var(--gold)}}
.sw-l{color:var(--grey)}
.sim-knob-row{display:flex;align-items:center;gap:6px}
.sim-kb{width:32px;height:32px;padding:0;background:#22242a;border:1px solid #000;border-radius:50%;color:#d8d8e0}
.sim-kb:hover{color:var(--gold)}
.sim-knob{position:relative;width:72px;height:72px;padding:0;border:1px solid #000;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#3b3a45,#121116 70%);touch-action:none;
  box-shadow:0 4px 0 #000}
.sim-knob i{position:absolute;left:50%;top:6px;width:6px;height:18px;margin-left:-3px;background:#e8e8f0;
  transform-origin:3px 30px;transform:rotate(var(--a,0deg))}
.sim-knob:active{transform:translateY(1px)}
.sim-lbl{color:var(--grey)}
.sim-keys{grid-area:keys;display:grid;grid-template-columns:repeat(3,96px);gap:12px 24px;justify-content:start}
.key{display:grid;justify-items:center;gap:0;padding:6px 0 4px;background:linear-gradient(#e4d6b0,#cdbb8f);color:#2a2418;
  border:1px solid #000;border-radius:6px;box-shadow:0 3px 0 #000;
  transition:transform .05s steps(1)}
.sim .key b{font-size:24px;line-height:1.2;font-weight:400}
.key small{font-size:16px;line-height:1.2;color:#5a4d32}
.key:hover{background:#e8dab3}
.key:active,.key.down{transform:translateY(2px);box-shadow:0 1px 0 #000}
.sim-voice{grid-column:1;background:linear-gradient(#ef5a50,#d03e35);color:#fff;border:1px solid #000;border-radius:6px;
  box-shadow:0 3px 0 #000;touch-action:none}
.sim-voice.down,.sim-voice:active{transform:translateY(2px);box-shadow:0 1px 0 #000;background:#c23a33}
.key0{grid-column:2}
.sim-bar{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px}
.sim-guide{padding:8px 12px;background:rgba(0,0,0,.45);border:1px solid var(--edge);color:var(--gold)}
.sim-sound[aria-pressed="true"]{color:var(--ranger)}

/* ---- phones -------------------------------------------------- */
.ph{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:48px;align-items:start}
.ph-visual{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ranger ." "arc phone" "ctl ctl";align-items:start}
.ph-ranger{grid-area:ranger;display:grid;gap:8px;color:var(--grey);transition:transform .2s steps(2)}
.ph-ranger.glow .oled{box-shadow:0 0 0 3px #000,0 0 0 6px var(--gold),0 0 32px rgba(255,228,92,.35)}
.ph-arc{grid-area:arc;justify-self:end;width:160px;height:72px;margin:8px 0}
.arc{fill:none;stroke:var(--aqua);stroke-width:3;stroke-dasharray:4 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}
.phone{grid-area:phone;position:relative;width:280px;max-width:100%;padding:14px 10px;border-radius:40px;
  background:#0a0a0c;border:3px solid #34333d;box-shadow:inset 0 0 0 3px #000,0 24px 48px rgba(0,0,0,.5)}
.notch{position:absolute;left:50%;top:18px;z-index:2;width:84px;height:20px;margin-left:-42px;background:#000;border-radius:12px}
.phone-scr{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:28px;scrollbar-width:none;
  background:#111;aspect-ratio:780/1688}
.phone-scr::-webkit-scrollbar{display:none}
.phone-scr img{flex:0 0 100%;width:100%;height:auto;scroll-snap-align:center;image-rendering:auto}
.ph-ctl{grid-area:ctl;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.ph-ctl .r-btn{padding:8px 14px}
.ph-count{min-width:56px;text-align:center;color:var(--grey)}
.ph-steps{display:grid;gap:8px;counter-reset:s}
.ph-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;width:100%;text-align:left;
  padding:12px 14px;background:rgba(0,0,0,.35);border:1px solid var(--edge);color:#cfd8d3;
  font-size:16px;line-height:1.6;cursor:pointer}
.ph-step:hover{border-color:#2f4a3c}
.ph-step.on{border-color:var(--ranger);color:#fff;background:rgba(102,224,140,.08)}
.ph-step .n{color:var(--ranger)}
.ph-step b{color:var(--white)}
.ph-step em{color:var(--aqua)}
.callout{display:flex;gap:16px;align-items:center;margin-top:24px;padding:16px;background:#0d1612;border:1px solid var(--ranger)}
.callout p{color:#e9fff1}
.small{margin-top:16px;color:var(--grey);max-width:60ch}

/* ---- quick guide ---------------------------------------------- */
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.gd{border:1px solid var(--edge);background:#111915}
.gd summary{cursor:pointer;list-style:none;padding:14px 16px;color:var(--white);display:flex;justify-content:space-between;gap:12px}
.gd summary::-webkit-details-marker{display:none}
.gd summary::after{content:"+";color:var(--ranger)}
.gd[open] summary::after{content:"−"}
.gd[open] summary{color:var(--gold)}
.gd-b{display:flex;gap:16px;align-items:flex-start;padding:0 16px 16px}
.gd-t{color:#cfd8d3}
.gd-list li+li{margin-top:4px}
.gd-t b{color:var(--white)}

/* ---- under the hood ------------------------------------------ */
.ba{position:relative;margin:0 0 48px;aspect-ratio:16/9;border:1px solid var(--edge);background:#0d0e10;overflow:hidden;
  user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%}
.ba-before{object-fit:cover}
.ba-after{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#173225,#0b1210 70%);
  clip-path:inset(0 0 0 var(--x))}
.ba-after img{object-fit:contain;padding:16px;filter:drop-shadow(0 0 24px rgba(102,224,140,.35))}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--gold);
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.ba-line::after{content:"◀▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:4px 6px;
  background:var(--gold);color:#131218;border-radius:999px;white-space:nowrap}
.ba-tag{position:absolute;top:12px;padding:2px 8px;background:rgba(0,0,0,.7)}
.ba-l{left:12px}.ba-r{right:12px;color:var(--ranger)}
.ba figcaption{position:absolute;left:12px;bottom:12px;padding:2px 8px;background:rgba(0,0,0,.7);color:var(--gold)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba:focus-within{outline:3px solid var(--gold);outline-offset:3px}

.hood{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:48px;align-items:start;margin-bottom:48px}
.pcb-wrap{display:grid;gap:12px;justify-items:center}
.pcb{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;perspective:1200px}
.pcb-in{display:grid;transform-style:preserve-3d;transition:transform .4s ease-out}
.pcb[aria-pressed="true"] .pcb-in{transform:rotateY(180deg)}
.pcb-face{grid-area:1/1;position:relative;display:block;backface-visibility:hidden}
.pcb-face img{width:100%;height:auto}
.pcb-back{transform:rotateY(180deg)}
.pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--gold);border:2px solid #000;border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,228,92,.25)}
.pin b{position:absolute;left:20px;top:-6px;padding:0 6px;white-space:nowrap;background:rgba(5,7,10,.88);
  color:var(--gold);font-size:16px;line-height:1.6}
.pin-l b{left:auto;right:20px}
.pcb-hint{color:var(--grey)}

.spec{padding:16px 20px;background:rgba(5,7,10,.85);border:1px solid var(--edge);line-height:1.6}
.spec-h{color:var(--gold);margin-bottom:8px}
.spec p:not(.spec-h){display:grid;grid-template-columns:15ch minmax(0,1fr);gap:8px;color:#dcdce6}
.spec .k{overflow:hidden;white-space:nowrap;color:var(--aqua)}
.spec .k::after{content:" ...................................";color:var(--dim)}
.spec p:not(.spec-h){clip-path:inset(0 100% 0 0)}
.spec.in p:not(.spec-h){animation:type .45s steps(16) calc(var(--i)*.15s) forwards}
@keyframes type{to{clip-path:inset(0)}}

.bp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bp figure{border:1px solid var(--edge);background:#0d0e10}
.bp-img{display:block;aspect-ratio:4/3;overflow:hidden}
.bp-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);animation:pan 18s ease-in-out infinite alternate;
  transition:filter .3s ease-out}
.bp figure:hover img{filter:grayscale(1) invert(1) sepia(1) saturate(4) hue-rotate(175deg) brightness(.9)}
.bp figcaption{padding:8px 12px;color:var(--grey)}
@keyframes pan{from{transform:scale(1.15) translate(-4%,-3%)}to{transform:scale(1.15) translate(4%,3%)}}

/* ---- uses ---------------------------------------------------- */
.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.use{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;padding:16px;
  background:#111915;border:1px solid var(--edge);transition-delay:calc(var(--i)*60ms)}
.use-ic{grid-row:1/3;width:64px;height:64px;padding:10px;background:#0b1210;border:1px solid var(--edge);color:var(--ranger)}
.use-ic svg{width:100%;height:100%}
.use:nth-child(1) .use-ic{color:var(--gold)}
.use:nth-child(5) .use-ic{color:var(--aqua)}
.use:nth-child(6) .use-ic{color:var(--red)}
.use b{color:var(--white)}
.use span:last-child{color:#cfd8d3}

/* ---- closing ------------------------------------------------- */
.r-cta{text-align:center;background:linear-gradient(var(--ranger-deep),#05070a)}
.r-cta .r-wrap{display:grid;justify-items:center;gap:32px}
.r-big{font-size:48px;line-height:1.3;max-width:24ch;text-shadow:0 0 32px rgba(102,224,140,.25)}
.r-btns-c{justify-content:center;margin:0}

/* ---- responsive ---------------------------------------------- */
@media (max-width:1000px){
  .flips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ph{grid-template-columns:1fr}
}
@media (max-width:900px){
  .r-hero{min-height:0;padding:32px 0 128px}
  .r-hero-in{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "inset";row-gap:24px}
  .r-stage{max-width:320px}
  .tower{right:4%;bottom:56px}
  .tower-svg{width:72px;height:144px}
  .show{grid-template-columns:1fr;gap:0}
  .show-dev{display:none}
  .fcard{min-height:0;padding:24px 0 24px 20px}
  .fcard-oled{display:block}
  .net-cap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hood{grid-template-columns:1fr}
  .pcb-wrap{max-width:380px;margin:0 auto}
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide{grid-template-columns:1fr}
}
@media (max-width:700px){
  .r-sec{padding:64px 0}
  .r-h1{font-size:64px}
  .r-btns{gap:8px}
  .r-btns .r-btn{padding:8px 12px}
  .r-h2{font-size:32px}
  .r-sub{font-size:16px}
  .r-big{font-size:32px}
  .fcard-t{font-size:24px}
  .flips{grid-template-columns:1fr 1fr}
  .net-cap{grid-template-columns:1fr}
  .net-cap li{animation:none;color:#cfd8d3}
  .sim{grid-template-columns:auto;grid-template-areas:"scr" "side" "keys";padding:16px;gap:16px}
  .sim-side{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .sim-keys{grid-template-columns:repeat(3,minmax(0,80px));gap:10px 14px;justify-content:center}
  .ph-visual{grid-template-columns:1fr;grid-template-areas:"ranger" "arc" "phone" "ctl";justify-items:center}
  .ph-arc{justify-self:center;transform:rotate(20deg)}
  .bp{grid-template-columns:1fr}
  .uses{grid-template-columns:1fr}
  .spec p:not(.spec-h){grid-template-columns:1fr;gap:0}
  .spec .k::after{content:""}
  .spec .v{padding-left:16px}
  .callout{flex-direction:column;align-items:flex-start}
  .gd-b{flex-direction:column}
  .ba{aspect-ratio:4/3}
}
/* short desktop screens: keep the whole hero above the hotbar */
@media (min-width:901px) and (max-height:1000px){
  .r-inset .oled.big{--s:2!important}
}
@media (max-width:860px){
  .oled.big{--s:3!important}
}
@media (max-width:600px){
  .oled.big{--s:2!important}
}
@media (max-width:420px){
  .r-h1{font-size:48px;letter-spacing:2px}
  .flips{grid-template-columns:1fr}
}

/* ---- reduced motion: no weather, no auto-play, sprites hold frame 1 */
@media (prefers-reduced-motion:reduce){
  .rain,.bolt,.rings,.hp,.r-chip .dot,.live{display:none}
  .r-dawn,.r-devs,.hl{animation:none;opacity:1}
  .oled img.strip,.arc,.bp-img img,.nosvc,.sim-pwr.hint .sw,.r-chip .dot{animation:none}
  .bp-img img{transform:none}
  .rv{transform:none;transition:opacity .2s linear}
  .flip-in{transition:none}
  .flip .face{backface-visibility:visible;transition:opacity .3s linear}
  .flip.in .flip-in{transform:none}
  .flip.in .f-q{opacity:0}
  .f-a{transform:none;opacity:0}
  .flip.in .f-a{opacity:1;transition-delay:calc(.4s + var(--i)*80ms)}
  .pcb-in{transition:none}
  .spec.in p:not(.spec-h){animation:none;clip-path:none}
  .pk,.relay-in,.biglock-in,.wifi,.nphone-scr,.net-cap li{animation:none}
  .net-cap li{color:#cfd8d3}
  .relay-in,.biglock-in{opacity:1}
  .lay.wipe{animation:none}
}