/* Motion layer: transform/opacity for movement, native scrolling throughout. */
.sg-hero { isolation:isolate; overflow:clip; padding-top:36px; }
.sg-hero-inner { position:relative; }
.sg-hero-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:24px; color:#a9b9d0; font:12px/1.5 "Nippo",var(--font); letter-spacing:.12em; text-transform:uppercase; }
.sg-hero-eyebrow > span { width:6px; height:6px; background:#85baff; border-radius:50%; box-shadow:0 0 14px #428fff; }
.sg-hero-mark { width:min(600px,82vw); }
.sg-hero .sg-h1 { margin-top:22px; }
.sg-hero .sg-grad { background-size:220% 100%; animation:sg-spectrum 9s ease-in-out infinite alternate; }
.sg-hero-row { position:relative; isolation:isolate; margin-top:12px; padding:0 0 28px; }
.sg-hero-row .sg-hero-drone { width:min(560px,54vw); aspect-ratio:1/.61; }
.sg-hero-row .sg-hero-drone::before { left:8%; right:8%; bottom:-5%; height:42%; background:radial-gradient(ellipse at 50% 65%,rgba(63,139,255,.2),transparent 70%); filter:blur(22px); }
.sg-hero-row .sg-hero-uav { bottom:55%; width:35%; animation:sg-product-hover 6s ease-in-out infinite; }
.sg-hero-row .sg-hero-uav img { filter:brightness(1.2); }
.sg-hero-bottom { width:100%; padding:14px 0 22px; display:flex; justify-content:space-between; align-items:center; }
.sg-scroll-cue { display:flex; gap:12px; align-items:center; text-decoration:none; font-size:12px; color:#b0bdd3; }
.sg-scroll-cue > span { display:grid; place-items:center; width:20px; height:36px; }
.sg-motion-toggle { display:flex; align-items:center; gap:8px; padding:10px 12px; min-height:44px; border:0; border-radius:6px; background:transparent; color:#aab9d1; cursor:pointer; font-size:11px; }
.sg-motion-toggle[hidden] { display:none; }
.sg-motion-toggle:hover { color:#fff; }
.sg-motion-toggle:disabled { cursor:default; }
.sg-motion-icon { width:9px; height:10px; border-inline:2px solid currentColor; }
.sg-motion-toggle[aria-pressed="true"] .sg-motion-icon { border:0; background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%); }

/* Readable at every scroll position; the highlight moves across the motto. */
.sg-claim { padding:clamp(48px,7vw,96px) 0; }
.sg-claim-text { display:flex; flex-wrap:wrap; justify-content:center; gap:.12em .25em; font-size:clamp(26px,3.3vw,44px); font-weight:500; line-height:1.3; letter-spacing:-.035em; }
.sg-claim-text > span { color:#8996ad; transition:color .6s ease,text-shadow .6s ease; }
.sg-claim-text > span.is-lit { color:#f3f7ff; text-shadow:0 0 36px #639cfa38; }
.sg-claim-text > span:last-child.is-lit { color:#92bfff; }

/* Granular entrances avoid hiding a whole tall section on small screens. */
[data-motion="on"] .sg-enter { opacity:0; transform:translate3d(0,30px,0); }
[data-motion="on"] .sg-enter.sg-visible { opacity:1; transform:none; transition:opacity .85s var(--ease),transform .85s var(--ease); transition-delay:var(--entry-delay,0ms); }
[data-motion="on"] .sg-head.sg-enter .sg-h2 { clip-path:inset(0 0 100%); transform:translateY(24px); }
[data-motion="on"] .sg-head.sg-visible .sg-h2 { clip-path:inset(-10% -5% -15%); transform:none; transition:clip-path 1s var(--ease),transform 1s var(--ease); }
.sg-hub-figure { transform:perspective(1200px) rotateX(var(--screen-tilt,0deg)) scale(var(--screen-scale,1)); transform-origin:50% 90%; }
.sg-tile-art img,.sg-sol-art img,.sg-hub-shot img { transition:transform .8s var(--ease); }
.sg-showcase { --scan:0; }
.sg-showcase > picture { transform:translateY(var(--camera-y,0px)); }
.sg-showcase::before { opacity:.75; inset:0; height:38%; background:linear-gradient(180deg,transparent,#589cff0a 92%,#589cff65); transform:translateY(var(--scan-y,0px)); }
.sg-cine-art .sg-hero-uav img { translate:0 var(--flight-y,0px); rotate:var(--flight-roll,0deg); }
.sg-btn,.sg-btn-secondary { position:relative; isolation:isolate; overflow:hidden; }
.sg-btn::before { content:""; position:absolute; inset:-50%; z-index:-1; pointer-events:none; background:linear-gradient(105deg,transparent 38%,#ffffff30 50%,transparent 62%); transform:translateX(-100%); transition:transform .7s var(--ease); }
.sg-btn > span,.sg-btn-secondary > span { transition:transform .35s var(--ease); }
.sg-band { position:relative; overflow:hidden; isolation:isolate; }
.sg-band::before { content:""; position:absolute; z-index:-1; inset:-100% 0; background:conic-gradient(from 180deg at 70% 50%,transparent,#9dc9ff30,transparent 50%); animation:sg-band-light 12s ease-in-out infinite alternate; pointer-events:none; }
.sg-mobile-panel nav > a { transition:transform .4s var(--ease),opacity .4s; transform:translateX(18px); opacity:0; }
.sg-mobile-panel[data-open="true"] nav > a { transform:none; opacity:1; }
.sg-mobile-panel nav > a:nth-child(2) { transition-delay:30ms; }
.sg-mobile-panel nav > a:nth-child(3) { transition-delay:60ms; }
.sg-mobile-panel nav > a:nth-child(4) { transition-delay:90ms; }
.sg-mobile-panel nav > a:nth-child(5) { transition-delay:120ms; }
.sg-mobile-panel nav > a:nth-child(n+6) { transition-delay:150ms; }
.sg-quote-cell.sg-quote-changing { animation:sg-quote-change .48s var(--ease); }

/* A sticky illustration follows five real steps; the page keeps native scroll. */
.sg-story { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.sg-story-stage { position:sticky; top:110px; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r); background:linear-gradient(160deg,#10121c,var(--bg) 72%); box-shadow:inset 0 1px 0 #ffffff0d,0 32px 80px -48px #000; }
.sg-story-top { display:flex; justify-content:space-between; gap:10px; padding:20px 24px; border-bottom:1px solid var(--line); color:var(--muted); font:11px/1.5 "Nippo",var(--font); text-transform:uppercase; letter-spacing:.1em; }
.sg-story-top > span:first-child { display:flex; gap:8px; align-items:center; }
.sg-story-top i { width:6px; height:6px; border-radius:50%; background:#8abbff; box-shadow:0 0 14px #589eff; }
.sg-story-count { color:#7694be; }
.sg-story-scene { position:relative; aspect-ratio:10 / 7; overflow:hidden; isolation:isolate; }
.sg-story-scene::before { content:""; position:absolute; inset:30% 6% 0; z-index:-1; background:radial-gradient(ellipse at 50% 70%,rgba(47,123,255,.17),transparent 68%); pointer-events:none; }
.sg-story-visual { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(14px) scale(.98); transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s; }
.sg-story-visual.is-active { z-index:1; opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.sg-story-visual:not(.is-active) * { animation-play-state:paused!important; }
.sg-story-visual > picture { position:absolute; }
.sg-story-visual img { width:100%; height:100%; object-fit:contain; }
.sg-story-product-name { position:absolute; bottom:18px; left:20px; right:20px; text-align:center; font:11px/1.5 "Nippo",var(--font); letter-spacing:.14em; text-transform:uppercase; color:#9cc4ff; }
.sg-story-camera { height:82%; width:32%; top:4%; left:18%; }
.sg-story-detail { position:absolute; width:43%; right:6%; top:40%; padding:8px; border:1px solid var(--line-2); border-radius:12px; background:#0b101b; box-shadow:0 16px 38px -20px #000; }
.sg-story-detail > span { display:block; padding:0 2px 7px; color:var(--muted); font:9px/1.4 "Nippo",var(--font); letter-spacing:.08em; text-transform:uppercase; }
.sg-story-detail picture { overflow:hidden; border-radius:6px; }
.sg-story-hub { width:91%; height:76%; left:4.5%; top:9%; }
/* The phone already exists in the shared artwork: crop the right-hand device in layout. */
.sg-story-phone { height:80%; width:auto; aspect-ratio:340 / 747; top:5%; left:25%; overflow:hidden; }
.sg-story-phone img { object-fit:cover; object-position:right; }
.sg-story-message { position:absolute; width:45%; right:8%; top:42%; padding:16px 18px; border:1px solid #729bd143; border-radius:14px; background:linear-gradient(140deg,#151f32f5,#0e1421f5); box-shadow:0 20px 50px -25px #000; }
.sg-story-message-brand { display:block; width:85px; margin-bottom:13px; }
.sg-story-message strong { display:block; font-size:17px; line-height:1.3; font-weight:500; color:var(--text); }
.sg-story-message > span:last-child { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5; }
.sg-story-notification.is-active .sg-story-message { animation:sg-message-arrive .6s .12s var(--ease) both; }
.sg-story-dock { width:86%; height:auto; bottom:16%; left:7%; }
.sg-story-uav { width:31%; height:auto; top:16%; left:35%; }
.sg-story-flight.is-active .sg-story-uav { animation:sg-story-hover 6s ease-in-out infinite; }
.sg-story-response .sg-story-camera { height:75%; width:27%; left:3%; top:4%; }
.sg-story-response .sg-story-hub { width:75%; height:62%; top:auto; bottom:13%; left:23%; }
.sg-story-response .sg-story-uav { width:28%; top:9%; left:60%; }
.sg-story-caption { display:flex; align-items:flex-start; gap:10px; min-height:80px; padding:19px 24px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.55; }
.sg-story-indicator { width:7px; height:7px; margin-top:6px; flex-shrink:0; border-radius:50%; background:var(--blue); }
.sg-story-progress { height:2px; background:#4f79b42b; }
.sg-story-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#387eff,#a2cdff); transform:scaleX(var(--story-progress,.2)); transform-origin:left; transition:transform .8s var(--ease); }
.sg-story-steps { display:grid; padding-bottom:220px; }
.sg-story-steps li { min-height:155px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.sg-story-steps li:first-child { border-top:1px solid var(--line); }
.sg-story-step { scroll-margin-top:130px; display:grid; width:100%; grid-template-columns:44px 1fr 20px; gap:18px; align-items:start; border:0; background:none; padding:24px 12px; text-align:left; cursor:pointer; border-radius:12px; transition:background .4s; }
.sg-story-number { font:18px/1.5 "Nippo",var(--font); color:#7e91af; transition:color .4s; }
.sg-story-step strong { display:block; color:#a1afc5; font-size:23px; line-height:1.25; font-weight:500; letter-spacing:-.03em; transition:color .4s,translate .4s; }
.sg-story-step > span > span { display:block; margin-top:10px; font-size:14px; line-height:1.6; color:#8f9fb8; }
.sg-story-step i { color:#6883ab; font-style:normal; opacity:0; translate:-6px 6px; transition:opacity .4s,translate .4s; }
.sg-story-step.is-active { background:linear-gradient(90deg,#4b85e911,transparent); }
.sg-story-step.is-active .sg-story-number { color:#8dbbff; }
.sg-story-step.is-active strong { color:#f5f8ff; translate:4px 0; }
.sg-story-step.is-active i { opacity:1; translate:0; }
.sg-story-step:hover strong { color:#f5f8ff; }
@keyframes sg-product-hover { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-3px); } }
@keyframes sg-spectrum { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes sg-band-light { to { transform:translateX(-20%) rotate(20deg); } }
@keyframes sg-story-hover { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes sg-message-arrive { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@keyframes sg-quote-change { from { opacity:.4; translate:12px 0; } to { opacity:1; translate:0 0; } }

@media (hover:hover) and (pointer:fine) {
  .sg-tile:hover .sg-tile-art img,.sg-solution:hover .sg-sol-art img { transform:translateY(-8px) scale(1.025); }
  .sg-hub-cell:hover .sg-hub-shot img { transform:scale(1.05); }
  .sg-btn:hover::before { transform:translateX(100%); }
  .sg-btn:hover > span,.sg-btn-secondary:hover > span { transform:translate(2px,-2px); }
}
@media (max-width:1100px) {
  .sg-story-step { gap:10px; grid-template-columns:32px 1fr 16px; padding-inline:8px; }
  .sg-story-step strong { font-size:21px; }
}
@media (max-width:760px) {
  .sg-story { grid-template-columns:1fr; gap:24px; }
  .sg-story-stage { top:80px; z-index:3; border-radius:18px; box-shadow:0 12px 25px #08070ed9; }
  .sg-story-scene { aspect-ratio:auto; height:220px; max-width:400px; width:100%; margin-inline:auto; }
  .sg-story-product-name { bottom:10px; font-size:9px; }
  .sg-story-message { padding:10px 12px; border-radius:10px; }
  .sg-story-message-brand { width:64px; margin-bottom:8px; }
  .sg-story-message strong { font-size:13px; }
  .sg-story-message > span:last-child { font-size:10px; }
  .sg-story-detail { padding:6px; }
  .sg-story-detail > span { font-size:7px; padding-bottom:4px; }
  .sg-story-top { padding:12px 16px; font-size:9px; }
  .sg-story-caption { min-height:66px; padding:12px 16px; font-size:12px; }
  .sg-story-steps li { min-height:148px; }
  .sg-story-steps { padding-bottom:60px; }
  .sg-story-step { grid-template-columns:34px 1fr 20px; padding:22px 12px; scroll-margin-top:430px; }
  .sg-story-step strong { font-size:22px; }
}
@media (max-width:700px) {
  .sg-hero { padding-top:32px; }
  .sg-hero-eyebrow { font-size:9px; letter-spacing:.09em; margin-bottom:22px; }
  .sg-hero-mark { width:92%; }
  .sg-hero .sg-h1 { margin-top:20px; font-size:28px; }
  .sg-hero-actions { margin-top:24px; width:min(100%,340px); gap:10px; }
  .sg-hero-row { margin-top:22px; padding-bottom:12px; }
  .sg-hero-row .sg-hero-drone { width:90%; }
  .sg-hero-bottom { padding:16px 0; gap:10px; }
  .sg-scroll-cue { gap:8px; font-size:10px; }
  .sg-motion-toggle { padding:8px 10px; font-size:9px; }
  .sg-claim-text { flex-direction:column; gap:4px; font-size:32px; }
  .sg-hub-figure { transform:none; }
}
@media (max-height:650px) { .sg-story-stage { position:relative; top:auto; } }

/* Pause decorative loops outside the viewport and when the tab is hidden. */
[data-motion="on"] .sg-motion-away *,[data-motion="on"] .sg-motion-away *::before { animation-play-state:paused !important; }
[data-motion-hidden="true"] *,[data-motion-hidden="true"] *::before { animation-play-state:paused !important; }
[data-motion="off"] { scroll-behavior:auto; }
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after { animation:none!important; transition:none!important; }
[data-motion="off"] .sg-enter { opacity:1; transform:none; }
[data-motion="off"] .sg-claim-text > span { color:#d9e3f5; text-shadow:none; }
[data-motion="off"] .sg-hub-figure,[data-motion="off"] .sg-showcase > picture { transform:none; }
[data-motion="off"] .sg-hero-uav img { translate:none; rotate:none; }
[data-motion="off"] .sg-hero-dock { scale:1; }
[data-motion="off"] .sg-showcase::before { transform:none; opacity:0; }
[data-motion="off"] .sg-glass:hover,[data-motion="off"] .sg-story-step.is-active strong { translate:none; }
[data-motion="off"] .sg-tile-art img,[data-motion="off"] .sg-sol-art img,[data-motion="off"] .sg-hub-shot img { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .sg-hero-uav img { translate:none!important; rotate:none!important; }
  .sg-hub-figure,.sg-showcase > picture { transform:none; }
  .sg-claim-text > span { color:#d9e3f5; }
  .sg-glass:hover,.sg-story-step.is-active strong { translate:none; }
}