/* Shared styles for the application pages (robotics.html, gearbox.html).
   Tokens, buttons, nav and footer mirror index.html; keep them in sync. */
:root{
  --bg:#020518; --bg-2:#020518; --panel:#070C24;
  --ink:#F3F5FB; --mute:#A3ABC6; --dim:#6E7899; --line:rgba(243,245,251,.1); --line-2:rgba(243,245,251,.26);
  --y:#FCC800; --y-ink:#1A1400;
  --f-d:"Archivo","Inter",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; --f-b:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --gut:clamp(20px,5vw,72px);
  --nav-h:76px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
@media (max-width:860px){:root{--nav-h:62px}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--y);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:3px;border:1px solid transparent;font:600 15px/1 var(--f-b);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.btn-y{background:var(--y);color:var(--y-ink)}
.btn-y:hover{background:#FFD83D}
.btn-o{border-color:rgba(243,245,251,.45);color:var(--ink);background:transparent}
.btn-o:hover{border-color:var(--ink)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}

.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:clamp(24px,3vw,44px);height:var(--nav-h);padding:0 var(--gut);transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
/* a soft dark band from the start keeps the links readable over any picture; the solid bar takes over on scroll */
.nav::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(2,5,24,.92),rgba(2,5,24,.6) 55%,transparent);transition:opacity .3s}
.nav.solid{background:rgba(2,5,24,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.nav.solid::before{opacity:0}
.nav .mark{margin-right:auto;display:flex;align-items:center}
.nav .mark img{height:42px;width:auto}
.nav nav{display:flex;gap:clamp(22px,2.4vw,34px)}
.nav nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--mute);transition:color .2s}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink)}
@media (max-width:860px){.nav nav{display:none}.nav .mark img{height:34px}}

.kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:600 13px/1 var(--f-b);color:var(--y);letter-spacing:.02em}
.kicker::before{content:"";width:22px;height:2px;background:var(--y)}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.h2{font:800 clamp(32px,4.4vw,64px)/1.02 var(--f-d);font-stretch:82%;letter-spacing:-.015em}
.lead{margin-top:16px;font-size:17px;line-height:1.55;color:var(--mute);max-width:34em}
.sec{padding:clamp(96px,11vw,160px) var(--gut)}
/* one background everywhere, so sections meet the videos and stills without a seam; a hairline marks the break */
.sec-alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wrap{max-width:1240px;margin:0 auto}
.illus{font-size:12px;color:var(--dim)}

/* ---------- hero ---------- */
.ahero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
/* the picture starts under the header and fades in, so nothing runs into the menu */
.ahero>img{position:absolute;inset:var(--nav-h) 0 auto;width:100%;height:calc(100% - var(--nav-h));object-fit:cover;-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%);object-position:70% 50%;transform-origin:70% 50%;will-change:transform}
.ahero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,5,24,.92) 0%,rgba(2,5,24,.55) 36%,transparent 58%),linear-gradient(180deg,transparent 70%,var(--bg) 100%);pointer-events:none}
.ahero>img[data-base]{object-position:0 50%;transform-origin:100% 50%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%),linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%),linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.ahero-copy{position:absolute;z-index:2;left:var(--gut);bottom:clamp(90px,15vh,160px);max-width:min(620px,88vw);will-change:transform,opacity}
.a-title{font:italic 900 clamp(44px,5.6vw,92px)/.9 var(--f-d);font-stretch:80%;letter-spacing:-.01em;text-transform:uppercase}
.a-title span{display:block}
.a-title .y{color:var(--y)}
.ahero-sub{margin:22px 0 28px;max-width:30em;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--mute)}
.ahero-cta{display:flex;flex-wrap:wrap;gap:12px}
.ahero .illus{position:absolute;z-index:2;right:var(--gut);bottom:24px}
@media (max-width:860px){
  .ahero>img,.ahero>img[data-base]{object-position:78% 30%;height:68%;-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
  .ahero::after{background:linear-gradient(180deg,transparent 34%,rgba(2,5,24,.85) 62%,var(--bg) 74%)}
  .ahero-copy{bottom:56px}
  .ahero-cta .btn{flex:1}
  .ahero .illus{display:none}
}

/* ---------- page head: text-only opener for pages that start straight into a tour ---------- */
.phead{padding:clamp(128px,18vh,190px) var(--gut) clamp(36px,6vh,72px)}
.phead .ahero-sub{margin-bottom:0}
.phead .ahero-cta{margin-top:28px}

/* ---------- tour: a pinned picture the camera travels across while the copy steps along ---------- */
.tour{position:relative}
.tour-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.tour-fig{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
/* feather all four edges so the picture's rectangle never shows against the page */
.tour-fig canvas{position:absolute;inset:0}
.tour-fig img,.tour-fig canvas{display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.tour-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg) 0%,rgba(2,5,24,.88) 30%,rgba(2,5,24,.2) 50%,transparent 60%),radial-gradient(130% 100% at 66% 50%,transparent 55%,rgba(2,5,24,.7) 100%)}
.tour-copy{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-50%);width:min(440px,36vw)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.step{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;pointer-events:none}
.step.on{opacity:1;transform:none;pointer-events:auto}
.step h3{font:800 clamp(26px,2.6vw,40px)/1.05 var(--f-d);font-stretch:84%;letter-spacing:-.01em}
.step p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--mute)}
.step .tag{display:inline-block;margin-top:16px;padding:6px 10px;border:1px solid rgba(252,200,0,.5);border-radius:2px;font:600 12px/1 var(--f-b);color:var(--y);letter-spacing:.03em}
.tour-bar{display:flex;gap:6px;margin-top:30px}
.tour-bar i{flex:1;height:2px;background:var(--line-2);transition:background-color .3s}
.tour-bar i.on{background:var(--y)}
.tour .illus{position:absolute;z-index:3;right:var(--gut);bottom:20px}

/* markers live inside the picture; --s is the camera scale, used to keep rings and labels a fixed size */
.mk{position:absolute;width:0;height:0;opacity:0;transition:opacity .4s}
.mk.on{opacity:1}
.mk::before,.mk::after{content:"";position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--y);transform:scale(calc(1 / var(--s,1)))}
.mk::after{border-width:1px;animation:ping 1.8s ease-out infinite}
.mk.nr::before,.mk.nr::after{display:none}
@keyframes ping{0%{transform:scale(calc(1 / var(--s,1)));opacity:.9}100%{transform:scale(calc(2.4 / var(--s,1)));opacity:0}}
.mk b{position:absolute;left:0;top:0;transform:scale(calc(1 / var(--s,1)));transform-origin:0 0;white-space:nowrap}
.mk b span{display:block;margin:-9px 0 0 22px;padding:5px 9px;background:rgba(2,5,24,.82);border-left:2px solid var(--y);font:600 13px/1.2 var(--f-b);color:var(--ink)}
.mk.below b span{margin:22px 0 0;transform:translateX(-50%);border-left:0;border-top:2px solid var(--y);text-align:center}
.mk.left b span{margin-left:0;transform:translateX(calc(-100% - 22px));border-left:0;border-right:2px solid var(--y)}
@media (prefers-reduced-motion:reduce){.mk::after{animation:none;opacity:0}}

@media (max-width:860px){
  .tour-shade{background:linear-gradient(180deg,transparent 46%,rgba(2,5,24,.9) 64%,var(--bg) 76%)}
  /* clear the pinned phone quote button (.mcta: 14px from the bottom, 52px high) */
  .tour-copy{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:none;right:var(--gut);width:auto}
  .step h3{font-size:24px}
  .step p{font-size:14.5px;margin-top:8px}
  .step .tag{margin-top:10px}
  .tour-bar{margin-top:18px}
  .tour .illus{display:none}
  .mk b span{font-size:12px;padding:4px 7px}
}

/* ---------- regular blocks ---------- */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:48px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:48px}
.cell{padding-top:16px;border-top:2px solid var(--y)}
.cell b{display:block;font:800 clamp(20px,1.7vw,24px)/1.15 var(--f-d);font-stretch:86%}
.cell p{margin-top:8px;font-size:15px;color:var(--mute)}
.pcard{border:1px solid var(--line);border-radius:4px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.pcard .ph{background:radial-gradient(120% 95% at 50% 32%,#F6F7FA 0%,#E4E7EE 62%,#D3D7E1 100%);aspect-ratio:16/10}
.pcard .ph img{width:100%;height:100%;object-fit:contain}
.pcard .tx{padding:20px 22px 24px}
.pcard h3{font:800 24px/1.1 var(--f-d);font-stretch:86%}
.pcard .for{margin-top:6px;font-size:13px;font-weight:600;color:var(--y)}
.pcard p{margin-top:10px;font-size:15px;color:var(--mute)}
.pcard.main{border-color:rgba(252,200,0,.55)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.chips li{padding:9px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,5vw,80px);align-items:center}
.fig-wrap{position:relative;border-radius:4px;overflow:hidden}
.fig-wrap .mk{opacity:1}
.fig-cap{margin-top:12px;font-size:13px;color:var(--dim)}
.parts-row{display:flex;flex-wrap:wrap;gap:6px 8px;margin:22px 0 0;padding:0;list-style:none;counter-reset:p}
.parts-row li{font-size:13.5px;color:var(--mute)}
.parts-row li+li::before{content:"→";margin-right:8px;color:var(--dim)}
.parts-row li.hl{color:var(--y);font-weight:600}
.ask{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.ask ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.ask li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.ask li span{display:block;font-size:14px;color:var(--mute)}
.ask .note{margin-top:22px;font-size:13px;color:var(--dim)}
.ask .btn{margin-top:30px}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:40px var(--gut);border-top:1px solid var(--line)}
.next a{text-decoration:none;font:800 clamp(22px,2.4vw,32px)/1.1 var(--f-d);font-stretch:86%}
.next a:hover{color:var(--y)}
.next small{display:block;font:500 13px var(--f-b);color:var(--dim);margin-bottom:6px}
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid3,.split,.ask{grid-template-columns:1fr}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}}