:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #eef4ff;
  --text: #10203d;
  --muted: #5e6b82;
  --primary: #0b2b67;
  --primary-2: #163f8f;
  --accent: #ff9f1a;
  --accent-2: #ffb84d;
  --border: rgba(16, 32, 61, 0.12);
  --shadow: 0 20px 45px rgba(11, 43, 103, 0.12);
  --radius: 22px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}
.narrow { width: min(calc(100% - 32px), 860px); }
.center { text-align: center; }

.hero {
  background:
    radial-gradient(circle at top left, rgba(255,184,77,0.25), transparent 32%),
    linear-gradient(135deg, #081f4d 0%, #0b2b67 55%, #143c88 100%);
  color: #fff;
  padding: 54px 0 42px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 38px;
  align-items: center;
}
.eyebrow,
.section-kicker {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow {
  color: var(--accent-2);
  margin-bottom: 14px;
}
.hero-logo {
  width: 280px;
  max-width: 70%;
  height: auto;
  display: block;
  margin-bottom: 18px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1.04;
  font-weight: 800;
}
.hero h1 span { color: var(--accent); }
.hero-text {
  margin: 18px 0 0;
  max-width: 700px;
  color: rgba(255,255,255,0.88);
  font-size: 1.02rem;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.hero-actions.left { justify-content: flex-start; }
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero-badges span {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}
.hero-visual img {
  border-radius: 26px;
  box-shadow: 0 24px 55px rgba(0,0,0,0.24);
  border: 4px solid rgba(255,255,255,0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%);
  color: #11213f;
  box-shadow: 0 14px 28px rgba(255, 159, 26, 0.28);
}
.btn-secondary {
  color: var(--primary);
  border: 1px solid rgba(11,43,103,0.18);
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(11,43,103,0.08);
}
.btn-outline-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
}
.btn.full, .btn.big { width: 100%; }
.btn.big { max-width: 520px; }
.whatsapp-btn {
  white-space: nowrap;
}
.whatsapp-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M16.01 3.2c-7.07 0-12.8 5.73-12.8 12.8 0 2.25.58 4.45 1.69 6.38L3.2 28.8l6.58-1.67a12.73 12.73 0 0 0 6.23 1.6h.01c7.07 0 12.8-5.73 12.8-12.8S23.08 3.2 16.01 3.2Z'/%3E%3Cpath fill='%23fff' d='M25.5 16c0 5.24-4.26 9.5-9.5 9.5-1.67 0-3.31-.44-4.75-1.27l-.34-.2-3.9.99 1.04-3.8-.22-.38A9.43 9.43 0 0 1 6.5 16c0-5.24 4.26-9.5 9.5-9.5s9.5 4.26 9.5 9.5Z'/%3E%3Cpath fill='%2325D366' d='M21.61 18.8c-.31-.16-1.84-.91-2.13-1.01-.28-.1-.48-.16-.68.16s-.78 1-.96 1.21c-.17.2-.35.23-.66.08-.31-.16-1.28-.47-2.44-1.5-.9-.8-1.5-1.78-1.68-2.09-.17-.31-.02-.48.13-.64.14-.14.31-.35.47-.52.16-.18.21-.31.31-.52.1-.2.05-.39-.03-.55-.08-.16-.68-1.65-.93-2.26-.24-.58-.49-.5-.68-.51h-.58c-.2 0-.52.08-.79.39-.27.31-1.04 1.01-1.04 2.46s1.06 2.86 1.21 3.05c.16.2 2.08 3.18 5.04 4.46.71.31 1.27.49 1.7.62.72.23 1.37.2 1.89.12.58-.09 1.84-.75 2.1-1.47.26-.72.26-1.34.18-1.47-.08-.13-.28-.21-.59-.36Z'/%3E%3C/svg%3E");
}
.btn-primary .whatsapp-icon {
  background-image: url("assets/whatsapp-white-logo-transparent.png");
}

.section { padding: 76px 0; }
.intro {
  background: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0));
}
.section-kicker {
  color: var(--primary-2);
  margin-bottom: 10px;
}
.section h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.12;
}
.section p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}
.card .icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,159,26,0.12);
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
}
.card p {
  font-size: 0.97rem;
}

.exclusive-grid,
.video-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 28px;
  align-items: center;
}
.exclusive {
  background: linear-gradient(180deg, rgba(11,43,103,0.02), rgba(11,43,103,0.06));
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.checklist li {
  position: relative;
  padding-left: 32px;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 500;
}
.checklist li::before {
  content: "•";
  position: absolute;
  left: 10px;
  top: 0;
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
}
.event-box {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 34px;
  box-shadow: var(--shadow);
}
.event-number {
  display: inline-block;
  font-size: 4.8rem;
  line-height: 1;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 12px;
}
.event-box h3 {
  margin: 0 0 16px;
  font-size: 1.6rem;
  line-height: 1.1;
}
.event-box p {
  margin: 0 0 10px;
}
.event-box .btn { margin-top: 18px; }

.timeline { background: #fff; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 28px;
}
.step {
  background: var(--surface-2);
  border: 1px solid rgba(11,43,103,0.08);
  border-radius: 24px;
  padding: 28px;
}
.step span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 16px;
}
.step h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
}

.video-embed-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-wrapper {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.final-cta {
  background: linear-gradient(135deg, #ffb031 0%, #ff9800 100%);
}
.final-cta-box {
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 30px;
  padding: 34px 28px;
  box-shadow: 0 28px 54px rgba(169, 92, 0, 0.2);
}
.final-cta .section-kicker,
.final-cta h2,
.final-cta p {
  color: #10203d;
}
.final-cta .section-kicker {
  letter-spacing: 0.1em;
}
.final-cta p { margin: 0 auto 28px; max-width: 760px; }
.final-cta .btn-primary {
  box-shadow: 0 16px 30px rgba(16, 32, 61, 0.18);
}

.footer {
  background: #081f4d;
  color: rgba(255,255,255,0.86);
  padding: 26px 0;
}
.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
}
.footer-brand {
  display: flex;
  align-items: center;
}
.footer-brand img {
  width: 220px;
  max-width: 42vw;
  height: auto;
}
.footer-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,184,77,0.28);
  color: var(--accent-2);
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.footer-video-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #ff8c00 100%);
  color: #0b2b67;
  font-size: 0.85rem;
}

@media (max-width: 980px) {
  .hero-grid,
  .exclusive-grid,
  .video-grid,
  .cards,
  .steps {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 34px;
  }

  .hero-visual {
    order: -1;
  }

  .hero-visual img {
    max-width: 560px;
    margin: 0 auto;
  }

  .cards,
  .steps {
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .section { padding: 58px 0; }
  .container { width: min(calc(100% - 24px), var(--container)); }
  .hero-actions, .footer-content {
    flex-direction: column;
    align-items: stretch;
  }
  .footer-brand {
    align-items: flex-start;
  }
  .btn, .btn.big { width: 100%; }
  .card, .step, .event-box { padding: 22px; }
  .event-number { font-size: 4rem; }
}