:root {
  --bg: #071722;
  --ink: #f5fbfb;
  --muted: rgba(244, 249, 250, 0.82);
  --line: rgba(255,255,255,0.13);
  --panel: rgba(3, 19, 30, 0.44);
  --primary: linear-gradient(135deg, #8fd0d2 0%, #73b9c8 100%);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --radius-lg: 22px;
  --radius-md: 16px;
  --safe-bottom: max(20px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #08131d;
  color: var(--ink);
}

.mobile-stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(84, 136, 160, 0.25), transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(60, 122, 143, 0.25), transparent 30%),
    linear-gradient(180deg, #07131d 0%, #091a27 100%);
}

.hero-fullscreen {
  position: relative;
  width: min(100%, 430px);
  min-height: 100dvh;
  overflow: hidden;
  background: #0c1924;
}

.hero-media,
.hero-overlay,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slide {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 5.6s ease;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) brightness(0.88);
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-slide[data-tone="1"] {
  background:
    linear-gradient(180deg, rgba(7,18,28,0.18), rgba(7,18,28,0.72)),
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.06), transparent 16%),
    linear-gradient(135deg, #243a50 0%, #0f2334 38%, #091825 100%);
}
.hero-slide[data-tone="2"] {
  background:
    linear-gradient(180deg, rgba(10,18,27,0.2), rgba(8,16,25,0.78)),
    radial-gradient(circle at 72% 18%, rgba(246,205,152,0.11), transparent 15%),
    linear-gradient(135deg, #46372d 0%, #1b2733 45%, #0a1722 100%);
}
.hero-slide[data-tone="3"] {
  background:
    linear-gradient(180deg, rgba(7,16,24,0.14), rgba(7,16,24,0.75)),
    repeating-linear-gradient(95deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, #6e7d89 0%, #24394a 40%, #0b1823 100%);
}
.hero-slide[data-tone="4"] {
  background:
    linear-gradient(180deg, rgba(7,16,24,0.16), rgba(7,16,24,0.74)),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,0.06), transparent 18%),
    linear-gradient(135deg, #17354a 0%, #1f2436 50%, #091824 100%);
}
.hero-slide[data-tone="5"] {
  background:
    linear-gradient(180deg, rgba(7,18,28,0.12), rgba(7,18,28,0.65)),
    radial-gradient(circle at 30% 20%, rgba(255,223,179,0.08), transparent 20%),
    linear-gradient(135deg, #7d6856 0%, #3d514b 45%, #10222e 100%);
}
.hero-slide[data-tone="6"] {
  background:
    linear-gradient(180deg, rgba(7,16,24,0.12), rgba(7,16,24,0.72)),
    radial-gradient(circle at 50% 10%, rgba(255,201,177,0.12), transparent 22%),
    linear-gradient(135deg, #8589b0 0%, #5d7d8c 35%, #143246 70%, #0b1924 100%);
}
.hero-slide[data-tone="7"] {
  background:
    linear-gradient(180deg, rgba(7,16,24,0.16), rgba(7,16,24,0.67)),
    radial-gradient(circle at 70% 18%, rgba(255,223,179,0.1), transparent 18%),
    linear-gradient(135deg, #97785c 0%, #7b8b72 35%, #274558 68%, #0b1924 100%);
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(2,10,17,0.15) 0%, rgba(2,11,20,0.05) 20%, rgba(3,12,18,0.36) 44%, rgba(4,14,23,0.9) 74%, rgba(4,14,23,0.98) 100%);
}

.hero-shell {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  padding: 18px 18px var(--safe-bottom);
  display: flex;
  flex-direction: column;
}

.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.02rem;
}
.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #9ee0d9 0 28%, transparent 29%),
    radial-gradient(circle at 67% 34%, #74c2bf 0 22%, transparent 23%),
    radial-gradient(circle at 44% 68%, #4aa4aa 0 26%, transparent 27%),
    #174454;
}
.menu-btn {
  border: 0;
  background: transparent;
  padding: 8px 4px;
  display: grid;
  gap: 4px;
}
.menu-btn span {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  display: block;
}

.hero-copy {
  margin-top: auto;
  padding-top: 18vh;
}
.eyebrow {
  margin: 0 0 10px;
  color: rgba(216, 241, 241, 0.9);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  max-width: 11ch;
}
.hero-text {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.48;
  color: var(--muted);
  max-width: 28ch;
  min-height: 4.5em;
}

.slide-dots {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}
.dot {
  appearance: none;
  border: 0;
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
}
.dot.active {
  background: rgba(255,255,255,0.95);
  transform: scale(1.15);
}

.hero-actions {
  display: grid;
  gap: 11px;
  margin-top: 26px;
}
.btn {
  min-height: 58px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #07202b;
  background: var(--primary);
  box-shadow: 0 12px 28px rgba(98, 183, 197, 0.3);
}
.btn-secondary {
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.trust-item {
  text-align: center;
  padding: 11px 6px 4px;
  border-top: 1px solid var(--line);
  position: relative;
}
.trust-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 11px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.trust-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 0.95rem;
}
.trust-item strong {
  display: block;
  font-size: 0.93rem;
  font-weight: 600;
}
.trust-item span {
  display: block;
  font-size: 0.84rem;
  color: rgba(234,241,242,0.78);
  line-height: 1.25;
  margin-top: 3px;
}

.helper-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.helper-card {
  min-height: 72px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  color: #22313a;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow: var(--shadow);
}
.helper-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}
.helper-card span {
  color: #697983;
  font-size: 0.94rem;
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #284f67 0%, #7a9fb0 100%);
}
.wa-fab {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(180deg, #39d75e 0%, #1dab49 100%);
  box-shadow: 0 16px 36px rgba(34, 193, 86, 0.4);
}
.wa-fab svg {
  width: 34px;
  height: 34px;
}

@media (min-width: 700px) {
  .hero-fullscreen {
    min-height: 100dvh;
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
    margin: 18px 0;
  }
}