/* ===== BYMW Design System — style.css ===== */

:root {
  --sand: #f4f0e8;
  --sand-dark: #e8e2d6;
  --sand-deep: #d9d1c1;
  --earth: #2c2518;
  --earth-mid: #5c5345;
  --earth-light: #8a8172;
  --earth-muted: #b5ad9f;
  --energy: #22c55e;
  --energy-dim: rgba(34, 197, 94, 0.1);
  --energy-glow: rgba(34, 197, 94, 0.15);
  --white: #fffdf8;
  --error: #dc4a3f;
  --radius: 6px;
  --radius-lg: 14px;
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--earth);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== TOPO BACKGROUND ===== */
.topo {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden; opacity: 0.35;
}
.topo svg { position: absolute; width: 140%; height: 140%; top: -20%; left: -20%; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 48px; position: relative; z-index: 1; }

/* ===== NAV ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 60px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(244, 240, 232, 0.85);
  backdrop-filter: blur(16px);
}
nav::after {
  content: ''; position: absolute; bottom: 0; left: 48px; right: 48px;
  height: 1px; background: var(--sand-deep);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--energy); box-shadow: 0 0 8px var(--energy-glow);
}
.brand-label {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--earth);
}
.brand-label span { font-weight: 400; color: var(--earth-light); }
.brand-sub {
  font-size: 10px; color: var(--earth-muted); font-weight: 500;
  letter-spacing: 0.3px; margin-left: 4px;
  padding-left: 8px; border-left: 1px solid var(--sand-deep);
}

.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav-links a {
  color: var(--earth-light); text-decoration: none; font-size: 13px;
  font-weight: 500; transition: color var(--transition);
}
.nav-links a:hover { color: var(--earth); }
.nav-cta {
  color: var(--earth) !important; background: var(--energy);
  padding: 8px 20px; border-radius: 100px;
  font-weight: 600 !important; transition: all var(--transition) !important;
}
.nav-cta:hover { box-shadow: 0 4px 16px var(--energy-glow); transform: translateY(-1px); }

.nav-sep { width: 1px; height: 20px; background: var(--sand-deep); }

.nav-links a.nav-link { color: var(--earth-light); font-weight: 400; }
.nav-links a.nav-link:hover { color: var(--earth); }
.nav-links a.nav-page { color: var(--earth); font-weight: 500; border-bottom: 1.5px solid var(--sand-deep); padding-bottom: 2px; }
.nav-links a.nav-page:hover { border-color: var(--earth-muted); }
.nav-links a.nav-page.active { border-color: var(--energy); }

/* Language switcher */
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  background: var(--sand-dark);
  border-radius: 100px; padding: 2px;
}
.lang-switch a {
  padding: 4px 10px !important; border-radius: 100px;
  font-size: 11px !important; font-weight: 600 !important;
  font-family: var(--font-mono);
  letter-spacing: 0.5px; text-transform: uppercase;
  transition: all var(--transition);
}
.lang-switch a.active {
  background: var(--white) !important;
  color: var(--earth) !important;
  box-shadow: 0 1px 4px rgba(44, 37, 24, 0.08);
}

/* ===== BUTTONS ===== */
.btn-energy {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--energy); color: var(--earth);
  padding: 14px 28px; border-radius: 100px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all var(--transition); border: none; cursor: pointer;
  font-family: var(--font-body);
}
.btn-energy:hover { box-shadow: 0 8px 28px var(--energy-glow); transform: translateY(-2px); }
.btn-energy .arrow { transition: transform var(--transition); }
.btn-energy:hover .arrow { transform: translateX(3px); }

.btn-sand {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--earth);
  padding: 14px 24px; border: 1.5px solid var(--sand-deep);
  border-radius: 100px; font-size: 15px; font-weight: 500;
  text-decoration: none; transition: all var(--transition);
}
.btn-sand:hover { border-color: var(--earth-muted); }

/* ===== HERO (index) ===== */
.hero {
  position: relative; z-index: 1;
  padding: 148px 0 80px;
}
.hero-aligned { padding: 140px 0 80px; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
  animation: riseUp 0.8s ease both;
}
.hero-content { padding-top: 20px; }
.hero-content h1 { margin-bottom: 24px; }

.hero-overline {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--energy);
  letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.hero-overline::before {
  content: ''; width: 32px; height: 2px;
  background: var(--energy); border-radius: 1px;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(42px, 6.5vw, 82px);
  font-weight: 700; line-height: 0.95;
  letter-spacing: -2.5px; color: var(--earth);
  max-width: 750px;
}
.hero h1 .energy-word { color: var(--energy); position: relative; }

.hero-desc {
  font-size: 17px; line-height: 1.7; color: var(--earth-mid);
  max-width: 420px; padding-top: 8px;
}
.hero-actions { display: flex; gap: 12px; margin-top: 28px; }

/* ===== HERO (operators) ===== */
.hero-op {
  position: relative; z-index: 1;
  padding: 148px 0 80px;
  animation: riseUp 0.8s ease both;
}
.hero-op-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 56px; align-items: start;
}
.hero-op-content { padding-top: 12px; }
.hero-op h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700; line-height: 1;
  letter-spacing: -2px; color: var(--earth);
  max-width: 600px; margin-bottom: 24px;
}
.hero-op h1 .energy-word { color: var(--energy); }
.hero-op-desc {
  font-size: 17px; line-height: 1.7; color: var(--earth-mid);
  max-width: 480px; margin-bottom: 32px;
}

.hero-op-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hero-op-stat {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 24px 20px;
  text-align: center; transition: all var(--transition);
}
.hero-op-stat:hover { border-color: var(--energy); }
.hero-op-stat-val {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700; color: var(--energy);
  line-height: 1; margin-bottom: 6px;
}
.hero-op-stat-label { font-size: 13px; color: var(--earth-mid); font-weight: 500; }

/* ===== MW COUNTER ===== */
.mw-strip { animation: riseUp 0.8s ease 0.2s both; }
.mw-card {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: 0 2px 12px rgba(44, 37, 24, 0.04);
}
.mw-card-live { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.mw-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--energy); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.mw-card-live span {
  font-family: var(--font-mono);
  font-size: 12px; color: var(--earth-muted);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
}
.mw-big {
  font-family: var(--font-display);
  font-size: 54px; font-weight: 700; color: var(--earth);
  line-height: 1; letter-spacing: -2px;
}
.mw-big .mw-unit { font-size: 28px; color: var(--energy); font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.mw-counter-reveal {
  display: inline-block;
  animation: counterReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes counterReveal {
  0% { opacity: 0; transform: scale(0.85) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mw-card-sub { font-size: 13px; color: var(--earth-muted); margin-top: 4px; }

.mw-meta { display: flex; gap: 0; margin-top: 24px; border-top: 1px solid var(--sand-dark); }
.mw-meta-item { flex: 1; padding: 16px 0; text-align: center; border-right: 1px solid var(--sand-dark); }
.mw-meta-item:last-child { border-right: none; }
.mw-meta-val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--earth); margin-bottom: 2px; }
.mw-meta-label { font-size: 18px; color: var(--earth-muted); font-weight: 500; }

/* ===== MW PIPELINE ===== */
.mw-pipeline { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--sand-dark); }
.mw-pipeline-header { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.mw-pipeline-header span {
  font-family: var(--font-mono); font-size: 12px; color: var(--earth-muted);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 500;
}
.mw-pipeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.mw-pipeline-item {
  background: var(--sand); border: 1px solid var(--sand-dark);
  border-radius: var(--radius); padding: 12px 8px;
  text-align: center; transition: all var(--transition);
}
.mw-pipeline-item:hover { border-color: var(--energy); }
.mw-pipeline-year { font-family: var(--font-mono); font-size: 10px; color: var(--earth-muted); margin-bottom: 4px; font-weight: 500; }
.mw-pipeline-val { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--energy); line-height: 1; }
.mw-pipeline-unit { font-family: var(--font-mono); font-size: 12px; color: var(--energy); opacity: 0.7; margin-top: 2px; }
.mw-pipeline-bar { height: 3px; background: var(--energy); border-radius: 2px; margin-top: 10px; opacity: 0.6; }
.mw-pipeline-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding: 10px 14px;
  background: var(--energy-dim); border-radius: var(--radius);
}
.mw-pipeline-total-label { font-size: 12px; color: var(--earth-mid); }
.mw-pipeline-total-val { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--energy); }

/* ===== SECTIONS ===== */
.section { position: relative; z-index: 1; padding: 100px 0; }
.section-marker {
  font-family: var(--font-mono); font-size: 10px; color: var(--energy);
  letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.section-marker::before { content: ''; width: 20px; height: 2px; background: var(--energy); border-radius: 1px; }
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700; letter-spacing: -1px;
  color: var(--earth); line-height: 1.1;
  max-width: 520px; margin-bottom: 48px;
}

/* ===== PROCESS CARDS ===== */
.process-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.process-card {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 32px 24px;
  transition: all var(--transition); position: relative; overflow: hidden;
}
.process-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(44, 37, 24, 0.06); }
.process-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--energy), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.process-card:hover::before { transform: scaleX(1); }
.process-num {
  font-family: var(--font-display); font-size: 64px; font-weight: 700;
  color: var(--sand-dark); line-height: 1; margin-bottom: 16px;
}
.process-card h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--earth); margin-bottom: 8px; letter-spacing: -0.3px;
}
.process-card p { font-size: 14px; color: var(--earth-mid); line-height: 1.6; }

/* ===== TRUST (index) ===== */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-item {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 24px 20px;
  transition: all var(--transition);
}
.trust-item:hover { border-color: var(--energy); }
.trust-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--energy-dim); color: var(--energy);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; margin-bottom: 14px;
}
.trust-item h3 { font-size: 15px; font-weight: 700; color: var(--earth); margin-bottom: 6px; }
.trust-item p { font-size: 13px; color: var(--earth-mid); line-height: 1.55; }

/* ===== ADVANTAGES (operators) ===== */
.advantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.advantage-card {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 32px 24px;
  transition: all var(--transition); position: relative; overflow: hidden;
}
.advantage-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(44, 37, 24, 0.06); }
.advantage-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--energy), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.advantage-card:hover::before { transform: scaleX(1); }
.advantage-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--energy-dim); color: var(--energy);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; margin-bottom: 18px;
}
.advantage-card h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--earth); margin-bottom: 8px; letter-spacing: -0.3px;
}
.advantage-card p { font-size: 14px; color: var(--earth-mid); line-height: 1.6; }

/* ===== PROFILES (operators) ===== */
.profiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.profile-card {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 36px 32px;
  transition: all var(--transition);
}
.profile-card:hover { border-color: var(--energy); }
.profile-tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--energy);
  letter-spacing: 2px; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px;
}
.profile-card h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--earth); margin-bottom: 12px; letter-spacing: -0.5px;
}
.profile-card p { font-size: 14px; color: var(--earth-mid); line-height: 1.65; margin-bottom: 16px; }
.profile-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.profile-features li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--earth-mid); }
.profile-features li::before {
  content: '✓'; width: 18px; height: 18px; border-radius: 50%;
  background: var(--energy-dim); color: var(--energy);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}

/* ===== CONTACT PAGE ===== */
.contact-page { position: relative; z-index: 1; padding: 148px 0 120px; }
.contact-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-left { position: sticky; top: 90px; }
.contact-left .section-heading { margin-bottom: 16px; }
.contact-copy { font-size: 15px; color: var(--earth-mid); line-height: 1.65; margin-bottom: 28px; }

.contact-info { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 1px solid var(--sand-deep); }
.contact-info-item { display: flex; align-items: flex-start; gap: 12px; }
.contact-info-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--energy-dim); color: var(--energy);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.contact-info-text { font-size: 14px; color: var(--earth-mid); line-height: 1.5; }
.contact-info-text strong { display: block; color: var(--earth); font-weight: 600; margin-bottom: 2px; }

/* ===== QUICK LINKS (contact) ===== */
.quick-links { position: relative; z-index: 1; padding: 60px 0 80px; }
.quick-links-heading {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--earth); margin-bottom: 20px; letter-spacing: -0.3px;
}
.quick-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quick-link-card {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 28px 24px;
  text-decoration: none; transition: all var(--transition);
  position: relative; overflow: hidden;
}
.quick-link-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(44, 37, 24, 0.06); }
.quick-link-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--energy), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.quick-link-card:hover::before { transform: scaleX(1); }
.quick-link-card h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--earth); margin-bottom: 6px; }
.quick-link-card p { font-size: 13px; color: var(--earth-mid); line-height: 1.55; }
.quick-link-arrow {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--energy);
  transition: transform var(--transition);
}
.quick-link-card:hover .quick-link-arrow { transform: translateX(4px); }

/* ===== SEPARATOR ===== */
.sep { height: 1px; background: var(--sand-deep); max-width: 1140px; margin: 0 auto; position: relative; z-index: 1; }

/* ===== BOOKING / FORM SECTION ===== */
.booking { position: relative; z-index: 1; padding: 100px 0 120px; }
.booking-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.booking-left { position: sticky; top: 90px; }
.booking-left .section-heading { margin-bottom: 16px; }
.booking-copy { font-size: 15px; color: var(--earth-mid); line-height: 1.65; margin-bottom: 28px; }

/* ===== CONTEXT / INDEX ===== */
.context { position: relative; z-index: 1; }
.context-text { font-size: 15px; color: var(--earth-mid); line-height: 1.65; margin-bottom: 28px; }


.assurances { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--sand-deep); }
.assurance { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--earth-mid); }
.assurance-pip {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--energy-dim); color: var(--energy);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}

/* ===== FORM SHELL ===== */
.form-shell {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 4px 20px rgba(44, 37, 24, 0.05);
}
.form-bar { height: 3px; background: var(--sand-dark); }
.form-bar-fill { height: 100%; background: var(--energy); transition: width 0.5s ease; width: 50%; border-radius: 0 2px 2px 0; }
.form-inner { padding: 36px 32px; }
.form-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--earth); letter-spacing: -0.3px; margin-bottom: 4px;
}
.form-sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--earth-muted);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--earth-light); margin-bottom: 5px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 12px 14px;
  background: var(--sand); border: 1.5px solid var(--sand-dark);
  border-radius: var(--radius); color: var(--earth);
  font-size: 14px; font-family: var(--font-body);
  transition: all var(--transition); outline: none;
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8172' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--earth-muted); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--energy); box-shadow: 0 0 0 3px var(--energy-dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ===== MW SLIDER ===== */
.mw-pick {
  padding: 24px 20px; background: var(--sand);
  border: 1.5px solid var(--sand-dark); border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.mw-pick-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.mw-pick-top label { font-size: 13px; font-weight: 600; color: var(--earth-light); }
.mw-pick-val { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--earth); }
.mw-pick-val span { font-size: 14px; color: var(--energy); font-weight: 500; }

input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 5px;
  background: var(--sand-dark); border-radius: 3px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: var(--energy);
  border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25);
  cursor: pointer; transition: transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--energy); border: 3px solid var(--white);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25); cursor: pointer;
}
.range-ticks {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--font-mono); font-size: 9px; color: var(--earth-muted);
}

/* ===== OPT TILES ===== */
.opt-block { margin-bottom: 20px; }
.opt-block > label { display: block; font-size: 13px; font-weight: 600; color: var(--earth-light); margin-bottom: 6px; }
.opt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .opt-face {
  padding: 14px; background: var(--sand);
  border: 1.5px solid var(--sand-dark); border-radius: var(--radius);
  transition: all var(--transition); display: flex; align-items: center; gap: 10px;
}
.opt-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--sand-deep); flex-shrink: 0;
  transition: all var(--transition); position: relative;
}
.opt-dot::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--energy);
  transform: scale(0); transition: transform var(--transition);
}
.opt-txt .opt-label { font-size: 14px; font-weight: 600; color: var(--earth); display: block; }
.opt-txt .opt-desc { font-size: 11px; color: var(--earth-muted); }
.opt input:checked + .opt-face { border-color: var(--energy); background: var(--energy-dim); }
.opt input:checked + .opt-face .opt-dot { border-color: var(--energy); }
.opt input:checked + .opt-face .opt-dot::after { transform: scale(1); }
.opt:hover .opt-face { border-color: var(--earth-muted); }

.loc-detail { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.3s ease; margin-top: 0; }
.loc-detail.visible { max-height: 90px; opacity: 1; margin-top: 8px; }

/* ===== FORM NAV ===== */
.form-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }
.btn-back {
  background: var(--sand); border: 1.5px solid var(--sand-dark);
  color: var(--earth-mid); padding: 12px 22px; border-radius: 100px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  font-family: var(--font-body); transition: all var(--transition);
}
.btn-back:hover { border-color: var(--earth-muted); color: var(--earth); }
.btn-go {
  background: var(--energy); color: var(--earth);
  padding: 12px 26px; border-radius: 100px;
  font-size: 14px; font-weight: 600; border: none;
  cursor: pointer; font-family: var(--font-body); transition: all var(--transition);
  margin-left: auto;
}
.btn-go:hover { box-shadow: 0 4px 16px var(--energy-glow); }

.form-page { display: none; }
.form-page.active { display: block; animation: riseUp 0.4s ease; }

/* ===== SUCCESS ===== */
.success { text-align: center; padding: 36px 12px; }
.success-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--energy-dim); border: 2px solid var(--energy);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; color: var(--energy); font-size: 20px; font-weight: 700;
}
.success h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--earth); margin-bottom: 8px; letter-spacing: -0.3px;
}
.success p { color: var(--earth-mid); font-size: 14px; line-height: 1.6; max-width: 340px; margin: 0 auto; }
.success-data {
  margin-top: 22px; padding: 18px; background: var(--sand);
  border: 1px solid var(--sand-dark); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--earth-mid); text-align: left;
}
.success-data strong { color: var(--energy); font-weight: 600; }

/* ===== CTA BANNER ===== */
.cta-banner { position: relative; z-index: 1; padding: 60px 0; }
.cta-banner-inner {
  background: var(--white); border: 1px solid var(--sand-dark);
  border-radius: var(--radius-lg); padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.cta-banner-text h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  color: var(--earth); letter-spacing: -0.5px; margin-bottom: 8px;
}
.cta-banner-text p { font-size: 14px; color: var(--earth-mid); line-height: 1.6; max-width: 460px; }
.cta-banner-actions { flex-shrink: 0; }

/* ===== FOOTER ===== */
footer { position: relative; z-index: 1; padding: 36px 48px; }
footer::before {
  content: ''; position: absolute; top: 0; left: 48px; right: 48px;
  height: 1px; background: var(--sand-deep);
}
.footer-inner { max-width: 1140px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-left { font-size: 12px; color: var(--earth-muted); }
.footer-left b { color: var(--energy); font-weight: 600; }
.footer-links { display: flex; gap: 20px; list-style: none; }
.footer-links a { color: var(--earth-muted); text-decoration: none; font-size: 12px; transition: color var(--transition); }
.footer-links a:hover { color: var(--earth-mid); }

/* ===== ANIMATIONS ===== */
@keyframes riseUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  nav { padding: 0 20px; }
  nav::after { left: 20px; right: 20px; }
  .nav-links { display: none; }
  .container { padding: 0 20px; }
  .hero { padding: 120px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-content { padding-top: 0; }
  .hero-op { padding: 120px 0 60px; }
  .hero-op-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-op-stats { grid-template-columns: 1fr 1fr 1fr; }
  .process-cols { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr 1fr; }
  .advantages-grid { grid-template-columns: 1fr; }
  .profiles-grid { grid-template-columns: 1fr; }
  .booking-split { grid-template-columns: 1fr; gap: 32px; }
  .booking-left { position: static; }
  .contact-page { padding: 120px 0 80px; }
  .contact-split { grid-template-columns: 1fr; gap: 32px; }
  .contact-left { position: static; }
  .form-inner { padding: 24px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .opt-pair { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .quick-links-grid { grid-template-columns: 1fr; }
  .cta-banner-inner { flex-direction: column; text-align: center; }
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }
  footer::before { left: 20px; right: 20px; }
  .mw-pipeline-grid { grid-template-columns: repeat(2, 1fr); }
  .mw-pipeline-val { font-size: 18px; }
}

/* ===== LEGAL PAGES ===== */
.legal-page {
  padding-top: 140px;
  padding-bottom: 80px;
}

.legal-header {
  margin-bottom: 48px;
}

.legal-header .section-heading {
  margin-bottom: 12px;
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--earth-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.legal-content {
  max-width: 760px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: 0 2px 12px rgba(44, 37, 24, 0.04);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--earth);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--earth);
  margin-top: 24px;
  margin-bottom: 8px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--earth-mid);
  margin-bottom: 16px;
}

.legal-content ul {
  margin-bottom: 16px;
  padding-left: 24px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--earth-mid);
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--energy);
  text-decoration: none;
  transition: color var(--transition);
}

.legal-content a:hover {
  color: var(--earth);
}

.legal-content strong {
  color: var(--earth);
  font-weight: 600;
}

@media (max-width: 900px) {
  .legal-page {
    padding-top: 120px;
  }
  .legal-content {
    padding: 28px 20px;
  }
}

/* ===== 404 ERROR PAGE ===== */
.error-hero {
  padding: 148px 0 100px;
  min-height: calc(100vh - 100px);
}

.error-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: center;
}

.error-content h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  color: var(--earth);
  line-height: 1.1;
  margin-bottom: 20px;
}

.error-code {
  font-family: var(--font-mono);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  color: var(--energy);
}

.error-card {
  position: relative;
}

.error-card-inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 2px 12px rgba(44, 37, 24, 0.04);
  text-align: center;
}

.error-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--energy-dim);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--energy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.error-live .live-dot {
  width: 8px;
  height: 8px;
  background: var(--energy);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.error-mw {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.error-mw-value {
  font-family: var(--font-mono);
  font-size: 72px;
  font-weight: 600;
  color: var(--earth);
  line-height: 1;
}

.error-mw-unit {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--energy);
}

.error-mw-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--earth-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}

.error-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--sand-dark);
}

.error-meta-item {
  text-align: center;
}

.error-meta-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--earth);
}

.error-meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--earth-light);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (max-width: 900px) {
  .error-hero {
    padding: 120px 0 60px;
  }
  .error-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .error-card-inner {
    padding: 24px 20px;
  }
  .error-mw-value {
    font-size: 56px;
  }
  .error-mw-unit {
    font-size: 22px;
  }
}


/* --- FAQ ---------------------------------------------------- */
.faq-list {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--sand-deep);
}

.faq-item {
  border-bottom: 1px solid var(--sand-deep);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--earth);
  line-height: 1.45;
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--energy);
}

.faq-question[aria-expanded="true"] {
  color: var(--energy);
}

.faq-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sand-dark);
  color: var(--earth-mid);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.faq-question:hover .faq-icon {
  background: var(--energy-dim);
  color: var(--energy);
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--energy-dim);
  color: var(--energy);
  transform: rotate(45deg);
}

/* Animate the vertical bar of the + to form × */
.faq-icon-v {
  transition: transform var(--transition), opacity var(--transition);
  transform-origin: center;
}

.faq-question[aria-expanded="true"] .faq-icon-v {
  transform: scaleY(0);
  opacity: 0;
}

/* Answer panel */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer:not([hidden]) {
  max-height: 400px; /* large enough for any answer */
}

/* override hidden so CSS transition works */
.faq-answer[hidden] {
  display: block !important;
  visibility: hidden;
}

.faq-answer p {
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--earth-mid);
  max-width: 640px;
}

@media (max-width: 900px) {
  .faq-question {
    font-size: 14px;
    padding: 16px 0;
  }
}