/* Premium visual layer shared across the site. */
:root {
  --page-bg: #fbfaf7;
  --page-bg-alt: #f2f0ea;
  --black: #121417;
  --blue: #41409E;
  --blue-dark: #2d2a75;
  --blue-soft: #7a79ea;
  --red: #b71f17;
  --red-bright: #d52b20;
  --grey: #667078;
  --grey-dark: #252b31;
  --card-bg: #fffdf8;
  --premium-ink: #151b22;
  --premium-ink-soft: #222b33;
  --premium-line: rgba(255,255,255,0.16);
  --premium-shadow: 0 28px 70px rgba(21,27,34,0.18);
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

input,
select,
textarea {
  min-width: 0;
}

.contact-item-text span,
.footer-links a,
.payment-steps li > div:last-child {
  overflow-wrap: anywhere;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(15,111,119,0.08), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(183,31,23,0.08), transparent 18%),
    linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-alt) 100%);
}

nav {
  background: rgba(251,250,247,0.9);
  border-bottom: 1px solid rgba(21,27,34,0.1);
  box-shadow: 0 10px 32px rgba(21,27,34,0.06);
}

.nav-mobile.open {
  background: rgba(251,250,247,0.97);
  border-bottom: 1px solid rgba(21,27,34,0.1);
}

.hero {
  isolation: isolate;
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(251,250,247,0.95));
  pointer-events: none;
  z-index: 0;
}

.hero-bg {
  background:
    linear-gradient(115deg, rgba(251,250,247,0.96) 0%, rgba(251,250,247,0.9) 46%, rgba(242,240,234,0.76) 100%),
    repeating-linear-gradient(135deg, rgba(21,27,34,0.035) 0 1px, transparent 1px 42px),
    radial-gradient(circle at 84% 22%, rgba(183,31,23,0.13), transparent 20%),
    radial-gradient(circle at 8% 14%, rgba(15,111,119,0.1), transparent 24%);
}

.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251,250,247,0.92) 0%, rgba(251,250,247,0.72) 42%, transparent 74%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 42%);
  pointer-events: none;
}

.hero-bg img {
  opacity: 0.3;
  filter: saturate(0.86) contrast(1.08);
}

.hero-grid-line {
  background: linear-gradient(to bottom, transparent, rgba(21,27,34,0.1) 30%, rgba(21,27,34,0.1) 70%, transparent);
}

.hero-img-wrap::before {
  background: linear-gradient(to right, rgba(251,250,247,0.96), rgba(251,250,247,0.48), transparent);
}

.hero-img-wrap img {
  opacity: 0.62;
  filter: saturate(0.88) contrast(1.06);
}

.hero-content {
  width: min(100%, 780px);
  max-width: 780px;
  min-width: 0;
  padding: clamp(30px, 4vw, 52px);
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(21,27,34,0.97), rgba(34,43,51,0.94)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.035) 22px 23px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  box-shadow: var(--premium-shadow);
  overflow: hidden;
}

.hero-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  background: linear-gradient(180deg, var(--red), var(--blue-soft));
}

.hero-content::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50%;
  pointer-events: none;
}

.hero h1,
.hero h1 em,
.hero-sub,
.hero-tag,
.hero-actions,
.hero-stats {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.24);
  overflow-wrap: break-word;
}

.hero h1 em {
  color: var(--blue);
}

.hero-sub {
  color: rgba(255,255,255,0.84);
}

.hero-tag {
  background: rgba(255,255,255,0.1);
  border-color: var(--premium-line);
  color: rgba(255,255,255,0.86);
}

.hero-tag span {
  background: var(--red-bright);
  box-shadow: 0 0 0 5px rgba(213,43,32,0.14);
}

.hero-stats {
  border-top-color: rgba(255,255,255,0.14);
}

.hero-stat strong {
  color: #ffffff;
}

.hero-stat span {
  color: rgba(255,255,255,0.68);
}

.btn-primary,
.form-submit {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  box-shadow: 0 14px 28px rgba(15,111,119,0.18);
}

.btn-primary:hover,
.form-submit:hover {
  background: linear-gradient(135deg, #0f2b33, #0f6f77);
}

.btn-outline {
  border-color: rgba(255,255,255,0.48);
  color: #ffffff;
}

.btn-outline:hover {
  border-color: #ffffff;
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}

.section-label,
.block-hours,
.contact-item-text strong,
.footer-small,
.inst-card p {
  color: var(--blue);
}

section::before {
  background:
    linear-gradient(90deg, transparent, rgba(21,27,34,0.028), transparent),
    repeating-linear-gradient(135deg, transparent, transparent 38px, rgba(21,27,34,0.024) 38px, rgba(21,27,34,0.024) 39px);
}

.why-card,
.block-card,
.payment-box,
.policy-card,
.inst-card,
.timeline-card,
.value-card,
.testimonial-card,
.contact-form {
  background-color: var(--card-bg);
  border-color: rgba(21,27,34,0.1);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(21,27,34,0.06);
}

.why-card:hover,
.block-card:hover,
.timeline-card:hover,
.value-card:hover {
  border-color: rgba(15,111,119,0.28);
  box-shadow: 0 24px 56px rgba(21,27,34,0.12);
}

.block-card,
.contact-form,
.timeline-card,
.testimonial-card,
.cta-box,
.policy-card {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.92)),
    repeating-linear-gradient(135deg, transparent, transparent 28px, rgba(21,27,34,0.026) 28px, rgba(21,27,34,0.026) 29px);
}

.block-card.featured {
  border-color: rgba(183,31,23,0.58);
}

.block-card.featured::before {
  background: var(--red);
}

.block-book {
  background: var(--red);
}

.block-book:hover {
  background: var(--red-bright);
}

.contact-item-icon,
.step-num {
  background: rgba(15,111,119,0.09);
  border: 1px solid rgba(15,111,119,0.18);
}

.story-highlight,
.modal-info {
  background: rgba(15,111,119,0.08);
  border-left-color: var(--blue);
}

footer {
  background:
    linear-gradient(180deg, rgba(251,250,247,0.96), rgba(242,240,234,0.98)),
    repeating-linear-gradient(135deg, transparent, transparent 42px, rgba(21,27,34,0.03) 42px, rgba(21,27,34,0.03) 43px);
  border-top-color: rgba(21,27,34,0.1);
}

@media (max-width: 900px) {
  .nav-cta {
    display: none;
  }

  .hero {
    overflow: hidden;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(34px, 7vw, 56px);
  }

  .hero-sub {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-stats {
    flex-wrap: wrap;
  }

  .btn-outline {
    border-color: rgba(255,255,255,0.44);
    color: #ffffff;
  }
}

@media (max-width: 700px) {
  body {
    background-attachment: scroll;
  }

  nav {
    padding: 14px 20px;
  }

  .logo-mark {
    width: min(280px, 58vw);
  }

  .hero {
    padding: 112px 20px 64px;
  }

  .hero-content {
    width: 100%;
    max-width: calc(100vw - 40px);
    flex: 0 1 auto;
    padding: 28px 24px 30px;
  }

  .hero h1 {
    font-size: clamp(30px, 8.4vw, 36px);
    line-height: 1.05;
  }

  .hero-stats {
    gap: 22px;
  }

  .blocks-grid,
  .policies-grid,
  .why-grid,
  .inst-grid,
  .timeline-grid,
  .values-grid,
  .testimonials-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .block-card,
  .policy-card,
  .why-card,
  .inst-card,
  .timeline-card,
  .value-card,
  .testimonial-card,
  .contact-form,
  .payment-box {
    min-width: 0;
  }

  .block-price strong {
    font-size: clamp(28px, 9vw, 32px);
  }

  .whatsapp-button,
  .form-submit,
  .block-book {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}