/* ===== Design tokens (light / dark) ===== */
:root {
  box-sizing: border-box;
  --bg: 250 249 246; --surface: 255 255 255; --soft: 238 245 244;
  --ink: 16 32 40; --muted: 88 104 112; --line: 224 229 231;
  --brand: 15 76 92; --brandtext: 15 76 92; --accent: 232 168 56;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: 11 20 24; --surface: 19 32 38; --soft: 15 27 32;
    --ink: 235 241 243; --muted: 152 168 175; --line: 38 54 61;
    --brand: 26 116 138; --brandtext: 118 205 221; --accent: 240 184 80;
  }
}
:root[data-theme="dark"] {
  --bg: 11 20 24; --surface: 19 32 38; --soft: 15 27 32;
  --ink: 235 241 243; --muted: 152 168 175; --line: 38 54 61;
  --brand: 26 116 138; --brandtext: 118 205 221; --accent: 240 184 80;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: rgb(var(--bg)); color: rgb(var(--ink)); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.hero-bg { background: linear-gradient(160deg, #0a3642 0%, #0f4c5c 55%, #167087 100%); }
.chip-active { background: rgb(var(--brand)); color: #fff; border-color: rgb(var(--brand)); }
.focus-ring:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: 2px; }
input[type=range] { accent-color: rgb(var(--brand)); }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* FAQ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }

/* Card + float animations */
.card-in { animation: cardIn .45s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.float-y { animation: floatY 5s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Image sliders: native scroll-snap (swipe / scroll) + JS auto-scroll */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.slider .track { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.slider .slide { scroll-snap-align: center; scroll-snap-stop: always; }
.slider .nav-btn { opacity: 0; transition: opacity .2s; }
.slider:hover .nav-btn, .slider:focus-within .nav-btn { opacity: 1; }
@media (hover: none) { .slider .nav-btn { opacity: 1; } }
.slider .dot { width: 6px; height: 6px; border-radius: 9999px; background: rgba(255,255,255,.6); transition: all .25s; }
.slider .dot.on { width: 18px; background: #fff; }
.thumb { opacity: .6; transition: opacity .2s; outline: 2px solid transparent; outline-offset: 1px; }
.thumb.on { opacity: 1; outline-color: rgb(var(--accent)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .float-y, .card-in { animation: none; }
}