:root {
  --gm-bg: #f4f6f8;
  --gm-surface: #ffffff;
  --gm-ink: #1d2733;
  --gm-muted: #5f6b78;
  --gm-brand: #0b63e5;
  --gm-accent: #17a673;
}

body {
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--gm-ink);
  background: var(--gm-bg);
}

.hero-section {
  color: #fff;
  background: linear-gradient(135deg, #0f2238 0%, #173a63 55%, #1f4f85 100%);
}

.hero-kicker {
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: #9cc3ff;
}

.hero-badge {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-card {
  background: var(--gm-surface);
  border: 1px solid #dde4ec;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(12, 27, 43, 0.06);
}

.section-light {
  background: #eef3f8;
}

.feature-list {
  padding-left: 1.1rem;
}

.feature-list li {
  margin-bottom: 0.55rem;
}

.notice-box {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-left: 4px solid var(--gm-accent);
  border-radius: 12px;
}

video {
  background: #d9dfe6;
  min-height: 220px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hero-section .display-5 {
    font-size: 2rem;
  }

  video {
    min-height: 180px;
  }
}