/* ═══════════ WatchSafety homepage ═══════════
   Palette sampled from the approved design boards:
   deep navy #031022 / #01152D / #041730 · blue #1D6AB2 / #2E86D1 · cyan #06B6D4 · paper #F7F8FB
*/
:root {
  --navy-deep: #031022;
  --navy: #041730;
  --navy-alt: #01152D;
  --surface: #0a2440;
  --hairline: rgba(255, 255, 255, 0.09);
  --blue: #1d6ab2;
  --blue-bright: #2e86d1;
  --cyan: #06b6d4;
  --paper: #f7f8fb;
  --ink: #0b2545;
  --text: #eef4fa;
  --text-dim: #a8bdd4;
  --radius: 18px;
  --font: "Poppins", "Avenir Next", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }

/* ─── Reveal animations ─── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.24s; }
.d3 { transition-delay: 0.36s; }
.d4 { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  video { display: none; }
}

/* ─── Shared bits ─── */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cyan);
}
.eyebrow.blue { color: var(--blue-bright); }
.body { color: var(--text-dim); font-weight: 300; font-size: 1.06rem; max-width: 34rem; }
.btn {
  display: inline-block;
  padding: 0.95rem 2.1rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.98rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 30px rgba(29, 106, 178, 0.35);
}
.btn-primary:hover { background: var(--blue-bright); transform: translateY(-2px); }
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-ghost:hover { border-color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 1.1rem 2.8rem; border-radius: 999px; font-size: 1.05rem; }
.link-arrow {
  display: inline-block;
  color: var(--cyan);
  font-weight: 500;
  border-bottom: 1px solid var(--cyan);
  padding-bottom: 0.3rem;
}
.link-arrow::after { content: " →"; transition: margin-left 0.25s ease; margin-left: 0.2rem; }
.link-arrow:hover::after { margin-left: 0.55rem; }

/* ─── Nav ─── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 1.15rem clamp(1.4rem, 4vw, 3.4rem);
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.nav.scrolled {
  background: rgba(3, 16, 34, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
  padding-block: 0.75rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.logo-mark { width: 34px; height: 34px; }
.logo-word { font-size: 1.28rem; font-weight: 300; letter-spacing: -0.01em; }
.logo-word strong { font-weight: 600; }
.nav-links { display: flex; gap: 1.9rem; font-size: 0.93rem; color: var(--text-dim); }
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover { color: #fff; }
.lang-switch { display: flex; gap: 0.35rem; }
.lang-switch button {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button.active { color: var(--cyan); border-color: rgba(6, 182, 212, 0.45); }

/* ─── Hero ─── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(1.4rem, 5vw, 4.2rem) clamp(3.4rem, 7vh, 5.6rem);
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-video { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(3, 16, 34, 0.92) 0%, rgba(3, 16, 34, 0.25) 45%, rgba(3, 16, 34, 0.45) 100%),
    radial-gradient(90% 70% at 22% 72%, rgba(3, 16, 34, 0.72) 0%, transparent 60%);
}
.hero-content { position: relative; max-width: 46rem; }
.hero h1 {
  font-size: clamp(3rem, 8.4vw, 6.6rem);
  color: #fff;
  margin: 1.1rem 0 1.4rem;
}
.hero-sub { color: var(--text-dim); font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 30rem; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero-scroll {
  position: absolute;
  right: clamp(1.6rem, 4vw, 3.6rem);
  bottom: 3.4rem;
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.hero-scroll span {
  position: absolute;
  top: -40%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--cyan);
  animation: drip 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes drip { to { top: 110%; } }

/* ─── Platform ─── */
.platform { background: var(--navy); padding: clamp(5rem, 11vh, 8.5rem) clamp(1.4rem, 5vw, 4.2rem); }
.platform-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2.4rem, 5vw, 5.5rem);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.platform-visual { perspective: 1200px; }
.platform-visual .tilt {
  position: relative;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}
.platform-visual img {
  display: block;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: reduce) {
  .platform-visual .tilt { transform: none !important; }
}
.platform-copy h2 { font-size: clamp(2.1rem, 3.6vw, 3.3rem); color: #fff; margin: 1.1rem 0 1.3rem; }
.platform-copy .link-arrow { margin-top: 1.8rem; }

/* ─── Explainer video ─── */
.explainer {
  background: var(--navy-alt);
  padding: clamp(5rem, 11vh, 8.5rem) clamp(1.4rem, 5vw, 4.2rem);
}
.explainer-head { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.explainer-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); color: #fff; margin-top: 1rem; }
.explainer-player {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--hairline);
}
.explainer-player video { width: 100%; display: block; }
.explainer-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(29, 106, 178, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
  box-shadow: 0 12px 40px rgba(3, 16, 34, 0.6);
}
.explainer-play svg { width: 38px; height: 38px; margin-left: 4px; }
.explainer-play:hover { transform: scale(1.08); background: var(--blue-bright); }
.explainer-player.playing .explainer-play { display: none; }

/* ─── How it works ─── */
.how { background: var(--paper); color: var(--ink); padding: clamp(5rem, 11vh, 8.5rem) clamp(1.4rem, 5vw, 4.2rem); }
.how-head { text-align: center; max-width: 46rem; margin: 0 auto 4rem; }
.how-head h2 { font-size: clamp(2rem, 3.4vw, 3rem); color: var(--ink); margin-top: 1rem; }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  max-width: 1180px;
  margin: 0 auto;
}
.steps-line {
  position: absolute;
  top: 21px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: #c9d8ea;
}
.step { text-align: center; position: relative; }
.step-num {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--paper);
}
.step h3 { font-size: 1.35rem; margin: 0.9rem 0 0.4rem; }
.step p { color: #5b6b80; font-size: 0.95rem; font-weight: 300; max-width: 19rem; margin: 0 auto 1.4rem; }
.step img {
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(11, 37, 69, 0.14);
  transition: transform 0.4s ease;
}
.step img:hover { transform: translateY(-6px); }

/* ─── Features / bento ─── */
.features { background: var(--navy-alt); padding: clamp(5rem, 11vh, 8.5rem) clamp(1.4rem, 5vw, 4.2rem); }
.features-head { max-width: 1280px; margin: 0 auto 3.4rem; }
.features-head h2 { font-size: clamp(2.1rem, 3.6vw, 3.2rem); color: #fff; margin: 1rem 0 0.8rem; }
.bento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  grid-template-areas:
    "permits visitor visitor"
    "permits map access"
    "permits map lang";
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.tile {
  background: linear-gradient(160deg, rgba(21, 52, 88, 0.55), rgba(8, 28, 54, 0.85));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.9rem;
  overflow: hidden;
  position: relative;
  display: flex;
  gap: 1rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.tile:hover { border-color: rgba(6, 182, 212, 0.35); transform: translateY(-4px); }
.t-icon { width: 30px; height: 30px; stroke: var(--cyan); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.tile h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.5rem; }
.tile p { color: var(--text-dim); font-weight: 300; font-size: 0.94rem; max-width: 24rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.chips span {
  font-size: 0.78rem;
  color: #cfe3f5;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
}
.tile-permits { grid-area: permits; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 0; }
.tile-permits .tile-copy { position: relative; z-index: 1; padding: 1.9rem; background: linear-gradient(to top, rgba(2, 13, 28, 0.94) 55%, transparent); }
.tile-permits .tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.tile-visitor { grid-area: visitor; align-items: center; justify-content: space-between; }
.tile-badge { width: clamp(110px, 12vw, 170px); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); }
.tile-map { grid-area: map; flex-direction: column; padding-bottom: 0; }
.tile-map .tile-photo-b { margin-top: auto; border-radius: 12px 12px 0 0; opacity: 0.92; }
.tile-access { grid-area: access; }
.tile-lang { grid-area: lang; }
.lang-chips span { color: var(--cyan); border-color: rgba(6, 182, 212, 0.4); }

/* ─── In the field ─── */
.field {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  background: var(--navy);
  min-height: 640px;
}
.field-media { position: relative; overflow: hidden; }
.field-media video, .field-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.field-copy { padding: clamp(3.4rem, 7vh, 6.5rem) clamp(1.8rem, 4.5vw, 5rem); align-self: center; }
.field-copy h2 { font-size: clamp(2rem, 3.2vw, 3rem); color: #fff; margin: 1.1rem 0 1.3rem; max-width: 24rem; }
.quote {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--cyan);
  border-radius: 12px;
  padding: 1.5rem 1.7rem;
  margin-top: 2.2rem;
  max-width: 30rem;
}
.quote p { color: #dcebf7; font-size: 1.08rem; font-weight: 400; }
.quote cite { display: block; color: var(--text-dim); font-style: normal; font-size: 0.86rem; margin-top: 0.8rem; }
.field-copy .link-arrow { margin-top: 2.2rem; }

/* ─── CTA ─── */
.cta {
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(29, 106, 178, 0.32) 0%, transparent 70%),
    var(--navy-deep);
  text-align: center;
  padding: clamp(6rem, 14vh, 10rem) clamp(1.4rem, 5vw, 4.2rem) 2.4rem;
}
.cta-mark { width: 58px; height: 58px; margin: 0 auto 1.8rem; }
.cta-title { font-size: clamp(2.4rem, 5.4vw, 4.4rem); color: #fff; margin-bottom: 1.1rem; }
.cta .body { margin: 0 auto 2.4rem; }
.footer {
  margin-top: clamp(5rem, 10vh, 8rem);
  border-top: 1px solid var(--hairline);
  padding-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem 2.2rem;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.footer-links { display: flex; align-items: center; gap: 0.9rem; }
.footer-links a:hover { color: #fff; }
.footer-links i { font-style: normal; color: rgba(255, 255, 255, 0.25); }
.lang-switch.small button { font-size: 0.74rem; padding: 0.26rem 0.5rem; }
.copyright { color: rgba(168, 189, 212, 0.7); }

/* ─── Responsive ─── */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .platform-inner { grid-template-columns: 1fr; }
  .platform-copy { order: -1; }
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "permits permits"
      "visitor visitor"
      "map access"
      "map lang";
  }
  .tile-permits { min-height: 440px; }
  .field { grid-template-columns: 1fr; }
  .field-media { min-height: 340px; position: relative; }
  .field-media video, .field-media img { position: relative; height: 100%; min-height: 340px; }
}
@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; gap: 3rem; }
  .steps-line { display: none; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "permits" "visitor" "map" "access" "lang"; }
  .tile-visitor { flex-direction: column; align-items: flex-start; }
  .hero { align-items: center; }
  .hero-scroll { display: none; }
}