/* Rhino Innovations — preview of the new look.
   Near-black, one accent, very large type, one idea per screen. */
:root{
  --bg:#060809; --bg-2:#0c1013; --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.16);
  --text:#f1f4f5; --muted:#8d989f; --dim:#56626a;
  --accent:#29d3ff; --accent-2:#7beaff; --accent-ink:#031117;
  --display:'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;}
html{background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
body{margin:0; background:var(--bg); font-family:var(--display); font-size:17px; line-height:1.55; overflow-x:hidden;}
img, video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent); color:var(--accent-ink);}

/* ---------- type ---------- */
.mono{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);}
.mono b{color:var(--accent); font-weight:500;}
.huge{font-size:clamp(64px, 15.5vw, 260px); line-height:0.84; letter-spacing:-0.055em; font-weight:800; margin:0; text-transform:uppercase;}
.xl{font-size:clamp(44px, 8vw, 132px); line-height:0.9; letter-spacing:-0.045em; font-weight:800; margin:0;}
.lg{font-size:clamp(32px, 4.6vw, 72px); line-height:0.98; letter-spacing:-0.035em; font-weight:700; margin:0;}
.md{font-size:clamp(22px, 2.2vw, 32px); line-height:1.2; letter-spacing:-0.02em; font-weight:600; margin:0;}
.lede{font-size:clamp(17px, 1.35vw, 21px); color:var(--muted); max-width:46ch; margin:0;}
.accent{color:var(--accent);}
.outline{-webkit-text-stroke:1.5px rgba(241,244,245,0.55); color:transparent;}
.line-mask{display:block; overflow:hidden; padding-bottom:0.04em;}
.line-mask > span{display:block; will-change:transform;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:12px; height:52px; padding:0 26px; border-radius:999px; font-weight:600; font-size:15px; letter-spacing:-0.005em; border:1px solid var(--line-2); color:var(--text); background:transparent; cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); font-family:var(--display);}
.btn:hover{border-color:var(--text);}
.btn .arr{display:inline-block; transition:transform .35s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}
.btn-solid{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn-solid:hover{background:var(--text); border-color:var(--text);}
.btn-light{background:var(--text); color:var(--bg); border-color:var(--text);}
.btn-light:hover{background:var(--accent); border-color:var(--accent);}
.btn[disabled]{opacity:.4; cursor:not-allowed;}

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:18px var(--gutter); transition:background .4s var(--ease), padding .4s var(--ease), transform .5s var(--ease);}
.nav.scrolled{background:rgba(6,8,9,0.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); padding-top:12px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.nav.hide{transform:translateY(-100%);}
.nav .logo img{height:30px; width:auto;}
.nav .links{display:flex; gap:34px; font-size:14px; font-weight:500;}
.nav .links a{color:rgba(241,244,245,0.78); position:relative; transition:color .3s;}
.nav .links a:hover, .nav .links a.on{color:var(--text);}
.nav .links a::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);}
.nav .links a:hover::after, .nav .links a.on::after{transform:scaleX(1);}
.nav .right{display:flex; align-items:center; gap:10px;}
.nav .pill{height:38px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; border:1px solid var(--line-2);}
.nav .pill:hover{border-color:var(--text);}
.nav .pill .count{min-width:20px; height:20px; border-radius:10px; background:var(--accent); color:var(--accent-ink); font-size:11px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;}
.menu-btn{display:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:none; color:var(--text); cursor:pointer; position:relative;}
.menu-btn i{position:absolute; left:13px; right:13px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), top .4s var(--ease);}
.menu-btn i:first-child{top:17px;} .menu-btn i:last-child{top:25px;}
body.menu-open .menu-btn i:first-child{top:21px; transform:rotate(45deg);}
body.menu-open .menu-btn i:last-child{top:21px; transform:rotate(-45deg);}
.overlay{position:fixed; inset:0; z-index:45; background:var(--bg); display:flex; flex-direction:column; justify-content:flex-end; padding:110px var(--gutter) 40px; clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease); pointer-events:none;}
body.menu-open .overlay{clip-path:inset(0 0 0 0); pointer-events:auto;}
.overlay a.big{font-size:clamp(44px, 12vw, 96px); font-weight:800; letter-spacing:-0.05em; line-height:1; padding:6px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;}
.overlay a.big span{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:0.12em;}
.overlay .foot{margin-top:28px; display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:14px;}

/* ---------- sections ---------- */
section{position:relative;}
.wrap{padding:0 var(--gutter);}
.pad{padding:clamp(90px, 14vh, 180px) var(--gutter);}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 90px); align-items:end;}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* hero */
.hero{height:100svh; min-height:640px; overflow:hidden;}
.hero .media{position:absolute; inset:0; overflow:hidden; will-change:clip-path;}
.hero video, .hero .poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(0.7) contrast(1.15) brightness(0.62);}
.hero .media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,8,9,0.55) 0%, rgba(6,8,9,0.05) 35%, rgba(6,8,9,0.25) 62%, rgba(6,8,9,0.96) 100%), radial-gradient(120% 80% at 50% 50%, transparent 40%, rgba(6,8,9,0.6) 100%);}
.hero .grain{position:absolute; inset:-50%; opacity:0.07; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(6) infinite;}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,-4%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}}
.hero .content{position:absolute; inset:auto 0 0 0; padding:0 var(--gutter) clamp(28px, 6vh, 60px); z-index:2;}
.hero .huge{margin-bottom:clamp(20px, 4vh, 40px);}
.hero .row{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.hero .row .lede{color:rgba(241,244,245,0.78);}
.hero .ctas{display:flex; gap:10px; flex-wrap:wrap;}
.hero .meta{position:absolute; top:96px; right:var(--gutter); text-align:right; z-index:2;}
.scroll-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:1px; height:46px; background:linear-gradient(var(--accent), transparent); z-index:2; animation:cue 2.2s var(--ease) infinite;}
@keyframes cue{0%{transform:translateX(-50%) scaleY(0); transform-origin:top} 50%{transform:translateX(-50%) scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:translateX(-50%) scaleY(0); transform-origin:bottom}}

/* statement: words light up as you scroll */
.statement p{font-size:clamp(30px, 4.4vw, 68px); line-height:1.08; letter-spacing:-0.035em; font-weight:700; margin:0; max-width:22ch;}
.statement .w{opacity:0.14; transition:none;}
.statement .w.hl{color:var(--accent);}

/* ranges: horizontal on desktop */
.ranges{position:relative;}
.ranges .track{display:flex; flex-direction:column;}
/* each machine sticks while the next one slides up over it - the page always scrolls down */
.range{position:sticky; top:0; width:100%; height:100svh; min-height:640px; display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:clamp(20px, 4vw, 70px); padding:110px var(--gutter) 60px; background:var(--bg); border-top:1px solid var(--line); transform-origin:50% 0; will-change:transform;}
.range:first-child{border-top:0;}
.range .name{font-size:clamp(84px, 16vw, 280px); line-height:0.8; letter-spacing:-0.06em; font-weight:800; text-transform:uppercase; margin:10px 0 18px;}
.range .tag{font-size:clamp(20px, 1.8vw, 28px); letter-spacing:-0.02em; font-weight:600; max-width:22ch; margin:0 0 24px;}
.range .stats{display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:10px 34px; margin:0 0 30px;}
.range .stat .v{font-size:clamp(26px, 2.6vw, 40px); font-weight:700; letter-spacing:-0.03em;}
.bars{display:flex; gap:4px; margin-top:6px;} .bars i{width:22px; height:4px; background:var(--line-2);} .bars i.on{background:var(--accent);}
.range .img{position:relative; height:min(72svh, 640px); overflow:hidden; border-radius:22px;}
.range .img img{width:100%; height:100%; object-fit:cover; transform:scale(1.12); will-change:transform;}
.range .price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:26px;}
.range .price .from{font-size:clamp(30px, 3vw, 46px); font-weight:700; letter-spacing:-0.03em;}
.range .idx{position:absolute; top:110px; right:var(--gutter);}
.ranges-head{padding:0 var(--gutter); margin-bottom:-60px; position:relative; z-index:3;}

/* details: sticky list, photos scroll by */
.details{display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(24px, 5vw, 90px); padding:clamp(90px, 14vh, 160px) var(--gutter);}
.details .sticky{position:sticky; top:20vh; align-self:start;}
.details ol{list-style:none; padding:0; margin:34px 0 0; counter-reset:d;}
.details li{counter-increment:d; padding:18px 0; border-top:1px solid var(--line); transition:color .4s, padding .4s var(--ease); color:var(--dim); cursor:default;}
.details li::before{content:'0' counter(d); font-family:var(--mono); font-size:12px; margin-right:18px; color:inherit;}
.details li b{font-size:clamp(20px, 1.9vw, 28px); letter-spacing:-0.02em; font-weight:650;}
.details li p{margin:8px 0 0 38px; font-size:15px; max-height:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .4s; opacity:0; color:var(--muted);}
.details li.on{color:var(--text); padding-left:8px;}
.details li.on::before{color:var(--accent);}
.details li.on p{max-height:120px; opacity:1;}
.details .shots{display:flex; flex-direction:column; gap:clamp(18px, 3vw, 40px);}
.details .shot{border-radius:22px; overflow:hidden; height:min(82svh, 760px); position:relative;}
.details .shot img{width:100%; height:120%; object-fit:cover; will-change:transform;}
.details .shot .cap{position:absolute; left:20px; bottom:18px;}

/* blueprint */
.blueprint{padding:clamp(90px, 14vh, 160px) var(--gutter); overflow:hidden; background:radial-gradient(60% 50% at 50% 55%, rgba(41,211,255,0.08), transparent 70%), var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.blueprint .grid-bg{position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(70% 60% at 50% 55%, #000 30%, transparent 75%); opacity:0.5;}
.blueprint .stage{position:relative; max-width:1200px; margin:clamp(40px, 7vh, 80px) auto 0;}
.blueprint .draw{position:relative; width:100%;}
.blueprint .draw img{width:100%; height:auto; filter:drop-shadow(0 0 14px rgba(41,211,255,0.35));}
.blueprint .draw .ghost{position:absolute; inset:0; opacity:0.12; filter:none;}
.blueprint .draw .live{clip-path:inset(0 100% 0 0); will-change:clip-path;}
.callout{position:absolute; display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(10px);}
.callout .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(41,211,255,0.15), 0 0 18px var(--accent);}
.callout .lbl{background:rgba(6,8,9,0.85); border:1px solid var(--line-2); padding:8px 12px; border-radius:10px; font-size:13px; white-space:nowrap; backdrop-filter:blur(8px);}
.callout .lbl b{display:block; font-size:15px; letter-spacing:-0.01em;}

/* software */
.software{padding:clamp(90px, 14vh, 160px) var(--gutter); display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 90px); align-items:center;}
.device{position:relative; max-width:520px; margin:0 auto; border-radius:28px; overflow:hidden; box-shadow:0 60px 140px -40px rgba(41,211,255,0.4), 0 0 0 1px var(--line-2); transform:perspective(1400px) rotateY(-14deg) rotateX(6deg); will-change:transform;}
.device img{width:100%; height:auto;}
.feature-rows{margin-top:34px; border-top:1px solid var(--line);}
.feature-rows div{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--muted);}
.feature-rows div b{color:var(--text); font-weight:600;}

/* numbers */
.numbers{display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line);}
.numbers > div{padding:clamp(40px, 7vh, 80px) var(--gutter) clamp(36px, 6vh, 70px); border-right:1px solid var(--line);}
.numbers > div:last-child{border-right:0;}
.numbers .n{font-size:clamp(64px, 8vw, 140px); font-weight:800; letter-spacing:-0.06em; line-height:0.9;}
.numbers .n small{font-size:0.32em; letter-spacing:-0.02em; margin-left:6px; color:var(--muted); font-weight:600;}
.numbers p{margin:14px 0 0; color:var(--muted); font-size:15px; max-width:24ch;}

/* bits marquee */
.bits{padding:clamp(90px, 14vh, 160px) 0; overflow:hidden;}
.marquee{display:flex; gap:14px; width:max-content; margin-top:46px; animation:marq 60s linear infinite;}
.marquee:hover{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}
.chip-card{width:220px; flex:none; background:#fff; border-radius:18px; overflow:hidden; position:relative;}
.chip-card img{width:100%; aspect-ratio:1/1; object-fit:contain; padding:14px;}
.chip-card .t{position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(transparent, rgba(6,8,9,0.85)); color:#fff; font-size:12px; font-weight:600;}

/* final */
.final{height:100svh; min-height:600px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 var(--gutter); overflow:hidden;}
.final .bgimg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.28; filter:blur(2px) saturate(0.6);}
.final .bgimg::after{content:''; position:absolute; inset:0; background:radial-gradient(80% 70% at 30% 50%, transparent, var(--bg) 90%);}
.final > *{position:relative;}

/* footer */
footer{padding:80px var(--gutter) 34px; border-top:1px solid var(--line);}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px;}
footer h5{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin:0 0 16px;}
footer a, footer p{display:block; color:rgba(241,244,245,0.8); font-size:14px; margin:0 0 10px;}
footer a:hover{color:var(--accent);}
footer .word{font-size:clamp(56px, 13.5vw, 230px); font-weight:800; letter-spacing:-0.065em; line-height:0.8; margin:70px 0 26px; color:transparent; -webkit-text-stroke:1px rgba(241,244,245,0.18); user-select:none;}
footer .legal{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:var(--dim); font-size:12px;}
footer .pay{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px;}
footer .pay img{height:22px; width:auto; background:#fff; border-radius:4px; padding:3px 6px;}

/* cursor follower (desktop only) */
.cursor{position:fixed; left:0; top:0; width:10px; height:10px; border-radius:50%; background:var(--accent); pointer-events:none; z-index:100; mix-blend-mode:difference; transform:translate(-50%, -50%); transition:width .3s var(--ease), height .3s var(--ease), opacity .3s; opacity:0;}
.cursor.big{width:64px; height:64px;}
@media (hover:none){ .cursor{display:none;} }

.preview-flag{position:fixed; left:16px; bottom:16px; z-index:60; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; background:var(--accent); color:var(--accent-ink); padding:7px 12px; border-radius:999px;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav .links{display:none;} .menu-btn{display:block;}
  .split, .software, .details{grid-template-columns:1fr;}
  .details .sticky{position:relative; top:0;}
  .details li p{max-height:none; opacity:1;}
  .details .shot{height:62svh;}
  .range{position:relative; width:100%; height:auto; min-height:0; grid-template-columns:1fr; padding:80px var(--gutter); border-bottom:1px solid var(--line);}
  .range .img{height:52svh; order:-1;}
  .range .idx{top:90px;}
  .numbers{grid-template-columns:1fr 1fr;}
  .numbers > div:nth-child(2){border-right:0;}
  .numbers > div:nth-child(-n+2){border-bottom:1px solid var(--line);}
  footer .cols{grid-template-columns:1fr 1fr;}
  .device{transform:none;}
  .callout .lbl{font-size:11px; padding:6px 9px;} .callout .lbl b{font-size:12px;}
}
@media (max-width:560px){
  .nav .pill.portal{display:none;}
  .hero .meta{display:none;}
  .range .stats{grid-template-columns:repeat(2, auto);}
  .feature-rows div{grid-template-columns:1fr; gap:4px;}
  .callout.opt{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .statement .w{opacity:1;}
  .blueprint .draw .live{clip-path:none;}
  .callout{opacity:1; transform:none;}
}