:root{--o:#FF6A13;--o2:#FF9A3C;--bg:#050506;--card:#111114;--card2:#18181C;--dim:#9DA0A8;--new:#2ECC71;--imp:#4C8DFF;--fix:#FFB020;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:#EDEDED;font:16px/1.55 var(--font);overflow-x:hidden}
a{color:var(--o);text-decoration:none}
.dim{color:var(--dim)}
::selection{background:var(--o);color:#000}

/* film grain over everything */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:100;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* glowing cursor (desktop) */
.cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(255,106,19,.16),rgba(255,106,19,0) 60%);transform:translate(-999px,-999px);mix-blend-mode:screen}
@media (hover:none){.cursor{display:none}}

/* header */
.top{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:28px;
  padding:10px 12px 10px 20px;border-radius:999px;background:rgba(14,14,16,.55);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08)}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff}
.brand span{font-size:9px;letter-spacing:3px;color:var(--o);font-weight:800}
.brand b{font-size:18px;font-weight:900;letter-spacing:-.5px}.brand i{font-style:normal;color:var(--o)}
.top nav{display:flex;gap:6px}
.top nav a{color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.top nav a:hover{background:var(--o);color:#000}

/* HERO */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;flex-direction:column;align-items:center}
#road{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:2;text-align:center;margin-top:15vh;padding:0 16px}
.kick{color:var(--o);font-size:12px;font-weight:800;letter-spacing:5px;margin:0 0 10px}
.mega{margin:0;font-weight:900;font-size:clamp(64px,15vw,230px);line-height:.82;letter-spacing:-.04em;display:flex;gap:.12em;justify-content:center;flex-wrap:wrap}
.mega .solid{color:#fff;text-shadow:0 0 60px rgba(255,106,19,.35)}
.mega .outline{background:linear-gradient(180deg,#FFB070,var(--o) 55%,#C2410C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 28px rgba(255,106,19,.55));animation:flick 6s infinite}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}
.lede{max-width:620px;margin:22px auto 0;font-size:clamp(16px,1.6vw,20px);color:#D8D9DE;text-shadow:0 2px 20px #000}

.odo-wrap{position:absolute;z-index:3;bottom:9vh;left:50%;transform:translateX(-50%);text-align:center;
  padding:16px 26px 14px;border-radius:26px;background:rgba(8,8,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,106,19,.35);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 20px 80px rgba(0,0,0,.7),inset 0 0 40px rgba(255,106,19,.08)}
.odo-label{margin:0 0 8px;font-size:11px;letter-spacing:4px;font-weight:800;color:var(--o)}
.odo-label .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o);margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--o);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.odo{display:flex;align-items:flex-start;gap:8px}
.grp{display:flex;flex-direction:column;align-items:center}
.grp small{font-size:10px;letter-spacing:3px;color:var(--dim);margin-top:6px;font-weight:700}
.drums{display:flex;gap:3px}
.drum{width:.68em;height:1em;overflow:hidden;font-size:clamp(38px,6vw,64px);font-weight:900;line-height:1;color:#fff;
  background:linear-gradient(#000,#1b1b1f 40%,#1b1b1f 60%,#000);border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums;text-align:center;position:relative}
.drum::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.65),transparent 28%,transparent 72%,rgba(0,0,0,.65));pointer-events:none}
.drum .strip{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.2,1.4,.4,1)}
.drum .strip span{height:1em;display:block}
.drums.secs .drum{color:var(--o)}
.colon{font-size:clamp(30px,5vw,52px);font-weight:900;color:var(--o);line-height:1.1;animation:blink 1s steps(1) infinite}
.odo-date{margin:10px 0 0;font-size:13px;color:var(--dim)}
.odo.live .drum{color:var(--o)}

.scroll-cue{position:absolute;z-index:3;bottom:22px;left:50%;transform:translateX(-50%);width:22px;height:36px;border:2px solid rgba(255,255,255,.4);border-radius:12px}
.scroll-cue span{position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;background:var(--o);border-radius:2px;animation:cue 1.6s infinite}
@keyframes cue{to{transform:translateY(12px);opacity:0}}

/* TICKERS */
.tickers{position:relative;z-index:4;margin:-30px 0 40px;height:170px}
.ticker{position:absolute;left:-5%;width:110%;overflow:hidden;white-space:nowrap;padding:14px 0;font-weight:900;font-size:clamp(20px,3vw,34px);letter-spacing:.02em}
.ticker .track{display:inline-flex;animation:tick 30s linear infinite}
.ticker span{padding-right:0}
.t1{top:30px;background:var(--o);color:#000;transform:rotate(-3deg);box-shadow:0 20px 60px rgba(255,106,19,.25)}
.t2{top:90px;background:#000;color:#5c5e66;transform:rotate(2deg);border-top:1px solid #222;border-bottom:1px solid #222}
.t2 .track{animation-direction:reverse;animation-duration:40s}
@keyframes tick{to{transform:translateX(-50%)}}

/* SECTIONS */
.sec{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:90px 24px}
.big{margin:0 0 44px;font-weight:900;font-size:clamp(48px,9vw,128px);line-height:.88;letter-spacing:-.045em;color:#fff}
.big em{font-style:normal;background:linear-gradient(90deg,var(--o),#FFB070);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{color:var(--dim);font-size:18px;margin:-20px 0 26px}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px}
.cell{position:relative;overflow:hidden;border-radius:28px;padding:26px;background:var(--card);border:1px solid rgba(255,255,255,.06);
  transform-style:preserve-3d;transition:transform .25s ease,border-color .3s;--mx:50%;--my:50%}
.cell::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,106,19,.22),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.cell:hover{border-color:rgba(255,106,19,.45)}.cell:hover::before{opacity:1}
.cell h3{margin:0 0 8px;color:#fff;font-size:24px;font-weight:850;letter-spacing:-.02em;position:relative}
.cell p{margin:0;color:var(--dim);font-size:15px;max-width:330px;position:relative}
.num{display:block;font-weight:900;font-size:13px;color:var(--o);letter-spacing:3px;margin-bottom:14px}
.c-maps{grid-column:span 2;grid-row:span 2;background:radial-gradient(circle at 80% 85%,rgba(46,204,113,.18),transparent 55%),var(--card)}
.c-maps .float{position:absolute;right:-20px;bottom:-30px;width:62%;max-width:360px;border-radius:50%;box-shadow:0 0 0 8px #1a1a1e,0 30px 80px rgba(0,0,0,.8);animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(-3deg)}}
.c-pointer{grid-column:span 2}
.needle{position:absolute;right:24px;top:50%;width:150px;height:150px;margin-top:-75px}
.needle circle{fill:none;stroke:rgba(255,106,19,.35);stroke-width:2;stroke-dasharray:3 6}
.needle path{fill:var(--o);filter:drop-shadow(0 0 8px var(--o));transform-origin:50px 50px;animation:point 7s cubic-bezier(.6,-0.3,.3,1.4) infinite}
@keyframes point{0%,12%{transform:rotate(0)}20%,32%{transform:rotate(68deg)}40%,52%{transform:rotate(-40deg)}60%,72%{transform:rotate(160deg)}80%,92%{transform:rotate(-95deg)}100%{transform:rotate(0)}}
.c-pointer p{max-width:300px}
.c-crew{grid-row:span 2}
.radar{position:absolute;left:50%;bottom:26px;width:190px;height:190px;margin-left:-95px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 30px,rgba(255,106,19,.18) 31px 32px);border:1px solid rgba(255,106,19,.3)}
.radar i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,106,19,.45),transparent 25%);animation:sweep 3s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar b{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--o)}
.radar .b1{left:60%;top:22%;animation:ping 3s infinite}.radar .b2{left:25%;top:55%;animation:ping 3s 1s infinite}.radar .b3{left:68%;top:70%;animation:ping 3s 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,106,19,.8)}70%{box-shadow:0 0 0 16px rgba(255,106,19,0)}}
.c-map{padding:0;display:grid;place-items:center;background:#000}
.c-map .spin{width:86%;border-radius:50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.c-safe{grid-column:span 2;background:linear-gradient(135deg,#1a0b0b,var(--card) 60%)}
.pulse{position:absolute;right:40px;top:50%;width:60px;height:60px;margin-top:-30px;border-radius:50%;background:#E5484D;box-shadow:0 0 40px #E5484D;animation:beat 1.4s infinite}
.pulse::before,.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #E5484D;animation:ring 1.4s infinite}
.pulse::after{animation-delay:.7s}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
@keyframes ring{to{transform:scale(2.6);opacity:0}}
.c-safe p{max-width:360px}
.c-journal{background:linear-gradient(160deg,#101a2e,var(--card) 70%)}
.c-garage{grid-column:span 2;background:linear-gradient(160deg,#1e1708,var(--card) 70%)}
.c-voice{grid-column:span 2;background:linear-gradient(160deg,#16102a,var(--card) 70%)}
.c-voice p{max-width:300px}
.eq{position:absolute;right:30px;bottom:34px;display:flex;align-items:flex-end;gap:6px;height:90px}
.eq i{width:8px;border-radius:4px;background:linear-gradient(var(--o),#8B5CF6);animation:eq 1s ease-in-out infinite alternate}
.eq i:nth-child(1){animation-delay:-.2s}.eq i:nth-child(2){animation-delay:-.5s}.eq i:nth-child(3){animation-delay:-.1s}.eq i:nth-child(4){animation-delay:-.7s}
.eq i:nth-child(5){animation-delay:-.3s}.eq i:nth-child(6){animation-delay:-.9s}.eq i:nth-child(7){animation-delay:-.4s}.eq i:nth-child(8){animation-delay:-.6s}.eq i:nth-child(9){animation-delay:-.8s}
@keyframes eq{from{height:12%}to{height:100%}}

/* STATS */
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;padding:30px 24px;gap:16px}
.stat{border-top:2px solid var(--o);padding-top:16px}
.stat b{display:block;font-size:clamp(48px,7vw,96px);font-weight:900;line-height:1;color:#fff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim);font-size:15px}

/* FILTERS */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 40px}
.filters button{background:var(--card2);color:#ddd;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:10px 20px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--o)}
.filters button.on{background:var(--o);color:#000;border-color:var(--o)}

/* ROAD LOG */
.roadlog{position:relative;padding-bottom:40px}
.tarmac{position:absolute;top:0;bottom:0;left:50%;width:120px;margin-left:-60px;background:linear-gradient(90deg,#0d0d0f,#17171a 20%,#17171a 80%,#0d0d0f);
  border-left:3px solid rgba(255,106,19,.65);border-right:3px solid rgba(255,106,19,.65);box-shadow:0 0 40px rgba(255,106,19,.12)}
.lane{position:absolute;top:0;bottom:0;left:50%;width:6px;margin-left:-3px;
  background:repeating-linear-gradient(to bottom,#F5F5F0 0 36px,transparent 36px 72px);background-position:0 var(--scroll,0px)}
#timeline{list-style:none;margin:0;padding:0;position:relative}
.loading{text-align:center;color:var(--dim);padding:40px}
.day{position:relative;padding:40px 0 10px}
.milestone{position:relative;z-index:2;margin:0 auto 26px;width:118px;height:150px;border-radius:59px 59px 10px 10px;overflow:hidden;
  background:linear-gradient(var(--o) 0 46%,#F4F1EA 46%);box-shadow:0 18px 40px rgba(0,0,0,.7),inset 0 -6px 0 rgba(0,0,0,.12);text-align:center;
  display:flex;flex-direction:column;align-items:center}
.milestone .ms-top{height:46%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px;color:#000}
.milestone .ms-top small{font-size:10px;font-weight:900;letter-spacing:2px}
.milestone .ms-top b{font-size:30px;font-weight:900;line-height:1}
.milestone .ms-bot{padding-top:10px;color:#111;font-weight:900;font-size:16px;line-height:1.15}
.milestone .ms-bot span{display:block;font-size:11px;font-weight:700;color:#555;letter-spacing:1px}
.items{display:grid;grid-template-columns:1fr 140px 1fr;row-gap:14px;grid-auto-flow:row dense}
.items .L{grid-column:1}.items .R{grid-column:3}
.item{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:16px 18px;transition:transform .3s,border-color .3s}
.item:hover{transform:translateY(-3px);border-color:rgba(255,106,19,.4)}
.item.L::after,.item.R::after{content:"";position:absolute;top:24px;width:20px;height:2px;background:rgba(255,106,19,.6)}
.item.L::after{right:-21px}.item.R::after{left:-21px}
.item-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.item-head b{color:#fff;font-size:16px}
.tag{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;border-radius:999px;padding:3px 9px;color:#000}
.tag.new{background:var(--new)}.tag.improved{background:var(--imp);color:#fff}.tag.fixed{background:var(--fix)}
.item p{margin:6px 0 0;color:var(--dim);font-size:14.5px}
.more{display:block;margin:30px auto 0;position:relative;z-index:2;background:var(--o);color:#000;border:0;border-radius:999px;padding:12px 26px;font:inherit;font-weight:900;cursor:pointer}
.finish{position:relative;z-index:2;margin:50px auto 0;width:max-content;max-width:100%;text-align:center;padding:22px 34px;border-radius:24px;
  background:repeating-linear-gradient(45deg,#fff 0 18px,#000 18px 36px);color:#000}
.finish span,.finish b,.finish em{display:block;background:#fff;padding:0 10px}
.finish span{font-size:11px;letter-spacing:4px;font-weight:900}
.finish b{font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1.05}
.finish em{font-style:normal;font-weight:800;color:var(--o)}

/* FOOTER */
footer{position:relative;z-index:2;overflow:hidden;padding:60px 0 40px}
.giant{font-weight:900;font-size:19vw;line-height:.8;letter-spacing:-.06em;white-space:nowrap;text-align:center;color:transparent;
  background:linear-gradient(90deg,var(--o),#fff,var(--o));-webkit-background-clip:text;background-clip:text;
  background-size:200% 100%;-webkit-text-fill-color:transparent;opacity:.9;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.foot{max-width:1200px;margin:30px auto 0;padding:0 24px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot p{margin:0;font-size:16px}.foot b{color:var(--o)}
.foot nav a{margin-right:18px;font-size:14px}

/* MOBILE */
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .c-maps{grid-column:span 2}
  .c-pointer,.c-safe,.c-garage,.c-voice{grid-column:span 2}
  .c-crew{grid-row:span 1}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .top{gap:12px;padding:8px 8px 8px 16px}.top nav a{padding:7px 10px;font-size:13px}
  .hero-in{margin-top:13vh}
  .odo-wrap{bottom:7vh;padding:12px 14px 10px;width:calc(100% - 24px)}
  .odo{gap:4px;justify-content:center}.drums{gap:2px}.drum{font-size:34px;border-radius:6px}.colon{font-size:28px}
  .tickers{height:140px}.t2{top:80px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .cell{min-height:200px;grid-column:auto!important;grid-row:auto!important}
  .c-maps{min-height:380px}.c-crew{min-height:330px}.c-map{min-height:300px}
  .needle{width:100px;height:100px;margin-top:-50px;right:14px;opacity:.9}.c-pointer p{max-width:62%}
  .c-safe p{max-width:70%}
  .c-voice{min-height:250px}.c-voice p{max-width:100%}.eq{height:60px;bottom:22px}
  .tarmac{left:26px;width:44px;margin-left:-22px}
  .milestone{margin:0 0 20px 0;width:96px;height:124px;border-radius:48px 48px 8px 8px}
  .milestone .ms-top b{font-size:24px}.milestone .ms-bot{font-size:13px}
  .items{grid-template-columns:62px 1fr}
  .items .L,.items .R{grid-column:2}
  .item.L::after,.item.R::after{left:-15px;right:auto;width:14px}
  .finish{margin-left:0}
  .foot{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  body::after{display:none}
}

.cta{display:inline-block;margin-top:26px;background:var(--o);color:#000;font-weight:900;font-size:16px;
  padding:14px 26px;border-radius:999px;box-shadow:0 10px 40px rgba(255,106,19,.35);transition:transform .2s}
.cta:hover{transform:translateY(-2px)}

/* ---- device previews ---- */
.devices{display:grid;grid-template-columns:0.8fr 1.2fr;gap:40px;align-items:center;margin-top:10px}
.dev{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px}
.dev figcaption{text-align:center}
.dev figcaption b{display:block;color:#fff;font-size:20px;font-weight:800}
.dev figcaption span{color:var(--dim);font-size:14px}
.d-round{width:min(320px,70vw);aspect-ratio:1;border-radius:50%;padding:16px;background:
  radial-gradient(circle at 50% 30%,#2a2b30,#0c0c0e 70%);box-shadow:0 30px 80px rgba(0,0,0,.7),
  0 0 0 2px #000,0 0 0 8px #161619,0 0 60px rgba(255,106,19,.25);position:relative}
.d-round::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(255,106,19,.35);pointer-events:none}
.d-round img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.d-rect{width:100%;max-width:560px;aspect-ratio:800/480;border-radius:26px;padding:16px 18px;background:
  linear-gradient(160deg,#26272c,#0c0c0e 70%);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 2px #000,0 0 0 9px #161619,
  0 0 60px rgba(255,106,19,.2);position:relative}
.d-rect img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}
.d-rect .cam{position:absolute;top:50%;left:9px;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#333}
@media (max-width:860px){.devices{grid-template-columns:1fr;gap:48px}.d-rect{margin:0 auto}}

/* ---- Ruby teaser ---- */
.ruby-tease{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:110px 24px;text-align:center}
.ruby-q{font-weight:900;font-size:clamp(44px,8vw,96px);line-height:.95;margin:22px 0 18px;color:#fff;letter-spacing:-.03em}
.ruby-q em{font-style:normal;background:linear-gradient(90deg,var(--o),#FFB070);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ruby-sub{color:var(--dim);font-size:clamp(16px,2vw,20px);max-width:640px;margin:0 auto 26px;line-height:1.6}
.ruby-soon{display:inline-block;border:1px solid rgba(255,106,19,.5);color:var(--o);font-weight:800;font-size:13px;
  letter-spacing:1px;border-radius:999px;padding:9px 18px}
.ruby-orb{position:relative;width:120px;height:120px;margin:0 auto}
.ruby-orb b{position:absolute;inset:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFB070,var(--o) 60%,#C2410C);
  box-shadow:0 0 50px rgba(255,106,19,.6);animation:breathe 2.6s ease-in-out infinite}
.ruby-orb span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,106,19,.45);animation:halo 2.8s ease-out infinite}
.ruby-orb span:nth-child(2){animation-delay:.9s}.ruby-orb span:nth-child(3){animation-delay:1.8s}
@keyframes breathe{50%{transform:scale(1.12)}}
@keyframes halo{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.ruby-orb b,.ruby-orb span{animation:none}}

/* ---- device renders (real hardware) ---- */
.dev .render{width:100%;max-width:560px;height:auto;display:block;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.65)) drop-shadow(0 0 50px rgba(255,106,19,.18));
  animation:devfloat 6s ease-in-out infinite}
.dev:nth-child(2) .render{animation-delay:-3s}
@keyframes devfloat{50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.dev .render{animation:none}}

/* ---- mobile fixes ---- */
@media (max-width:720px){
  .top{left:10px;right:10px;transform:none;width:auto;justify-content:space-between;gap:8px;padding:9px 10px 9px 16px}
  .top nav{display:none}
  .brand b{font-size:17px}
}
@media (max-width:860px){
  .ruby-tease{padding:80px 20px}
  .ruby-q{margin:18px 0 20px}
}
.follow{color:var(--dim);font-size:15px;margin:4px 0}
.follow a{color:var(--o);font-weight:700}