/* Native, responsive scrolling. Motion is limited to compositor-friendly properties. */
html { scroll-behavior:auto !important; scroll-padding-top:88px; }
body > header {
 background:#080f20 !important;
 -webkit-backdrop-filter:none !important;
 backdrop-filter:none !important;
 transition:none !important;
}
.tech-card, .light-surface .tech-card {
 -webkit-backdrop-filter:none !important;
 backdrop-filter:none !important;
 transition:transform 220ms cubic-bezier(.2,.7,.2,1),border-color 220ms ease !important;
}
.hero-video { filter:none !important; transform:none; }
.hero-overlay {
 background:linear-gradient(rgba(0,0,0,.56),rgba(0,0,0,.56)),
 radial-gradient(circle at 75% 30%,rgba(0,102,255,.12),rgba(11,17,32,.88) 75%),
 linear-gradient(180deg,rgba(11,17,32,.4),rgba(11,17,32,.98));
}
.light-surface [class*="backdrop-blur"] { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.light-surface .product-card { contain:layout style; }
.light-surface .product-frame img { transition:transform 400ms cubic-bezier(.2,.7,.2,1); }
.btn-primary-glow,.btn-accent-glow { transition:transform 180ms ease,background-color 180ms ease; }
@media (hover:hover) and (pointer:fine) {
 .light-surface .tech-card:hover { transform:translateY(-3px); }
}
@media (hover:none) {
 .tech-card:hover,.product-card:hover .product-frame img { transform:none; }
}
/* Each entrance runs once; no scroll event handlers or page-wide moving layers. */
@media (prefers-reduced-motion:reduce) {
 .light-surface .tech-card,.product-frame img,.btn-primary-glow,.btn-accent-glow { transition:none !important; }
}

.color-mode-control { position:fixed; left:16px; bottom:16px; z-index:45; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #334155; border-radius:10px; background:#0f172a; color:#e2e8f0; font-size:12px; box-shadow:0 4px 12px #0002; }
.color-mode-control select { font:inherit; color:inherit; background:#0f172a; padding:4px; border:0; border-radius:4px; color-scheme:dark; }
.color-mode-control select:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
html[data-color-theme="light"] .color-mode-control { background:#fff; color:#334155; border-color:#cbd5e1; }
html[data-color-theme="light"] .color-mode-control select { background:#fff; color-scheme:light; }
@media(max-width:480px) { .color-mode-control { left:10px; bottom:10px; gap:4px; padding:5px 7px; } .color-mode-control > span { display:none; } }