/* ============ RESET & BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --navy: #10262c;
  --navy-2: #0b1f24;
  --teal: #2D7D84;
  --teal-light: #2D7D84;
  --teal-pale: #e7f3f1;
  --bg-explorers: #f4f4f1;
  --bg-hosts: #eceeec;
  --gray-text: #3e4d4f;
  --white: #ffffff;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 50px;
}

html{ scroll-behavior: smooth; }

body{
  color: var(--navy);
  background: var(--white);
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3{
  font-family: 'Cormorant Garamond', serif;
  color: var(--navy);
  line-height: 1.12;
}


a{ text-decoration: none; color: inherit; }
ul{ list-style: none; }
button{ font-family: 'Inter', sans-serif; cursor: pointer; border: none; }
img{ max-width: 100%; display: block; }

.eyebrow{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow.with-icon i{ font-size: 12px; margin-right: 4px; }
.eyebrow.with-icon img,
.notify-option-icon img{
  display: inline-block;
  width: 30px;
  height: 25px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
.notify-option-icon img{
  width: 22px;
  height: 22px;
  margin-right: 0;
}

.teal-word{ color: var(--teal-light); font-weight: 600; }
.underline-word{ position: relative; }

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn i{ font-size: 12px; transition: transform 0.25s ease; }
.btn:hover i{ transform: translateX(4px); }
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-dark-teal{
  background: var(--navy);
  color: #fff;
  box-shadow: 0 10px 24px rgba(16,38,44,0.28);
}
.btn-dark-teal:hover{ background: #163038; box-shadow: 0 14px 28px rgba(16,38,44,0.35); }

.btn-outline-teal{
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn-outline-teal:hover{ background: var(--teal); color: #fff; }

.btn-dark{
  background: var(--navy);
  color: #fff;
  padding: 13px 22px;
  font-size: 12px;
}
.btn-dark:hover{ background: #163038; }

.btn-teal-solid{
  background: var(--teal-light);
  color: #fff;
  padding: 15px 26px;
  white-space: nowrap;
}
.btn-teal-solid:hover{ background: #299d8f; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 720px;
  padding: 40px 60px 70px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 58% center;
}

.hero-overlay-left{
  position: absolute;
  top: 0; left: 0;
  width: 62%;
  height: 100%;
  background: linear-gradient(90deg, rgba(238,242,240,0.55) 0%, rgba(238,242,240,0.15) 70%, rgba(238,242,240,0) 100%);
  z-index: 1;
  pointer-events: none;
}

.site-header{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
}

.site-logo{
  width: auto;
  height: 60px;
  object-fit: contain;
  filter: none;
}

.header-right{
  display: flex;
  align-items: center;
  gap: 18px;
}
.follow-text{
  font-size: 18px;
  color: var(--navy);
  font-weight: 500;
}
.social-icons{ display: flex; gap: 10px; }
.social-icons a{
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: transform 0.25s ease, background 0.25s ease;
}
.social-icons a:hover{ background: var(--teal); transform: translateY(-3px); }

.hero-content{
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.hero-title{
  font-size: 60px;
  font-weight: 800 !important;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.hero-title .hand{
  font-family: 'Caveat', cursive;
  color: var(--teal-light);
  font-size: 56px;
  font-weight: 700;
  display: inline-block;
  margin-top: 4px;
}

.hero-sub{
  font-size: 24px;
  font-weight: 300;
  font-family: 'Inter', sans-serif;
  color: #33413f;
  line-height: 1.6;
  margin: 18px 0 26px;
}

.launch-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--teal);
  margin-bottom: 16px;
}
.launch-label i{ font-size: 14px; }

.countdown{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}
.cd-block{ display: flex; flex-direction: column; align-items: flex-start; min-width: 44px; }
.cd-num{
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.cd-label{
  font-size: 12px;
  letter-spacing: 1px;
  color: #6b7674;
  margin-top: 8px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
}
.cd-divider{ color: #9aa5a3; font-size: 24px; font-weight: 300; }

/* ============ FOR EXPLORERS ============ */
.explorers{
  position: relative;
  background: var(--bg-explorers);
  padding: 72px 60px;
  overflow: hidden;
}

.dot-grid{
  position: absolute;
  left: 10px;
  top: 55%;
  transform: translateY(-50%);
  width: 90px;
  height: 130px;
  background-image: radial-gradient(var(--teal) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.45;
}

.explorers-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 78px;
}

.photo-stack{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.stack-card{
  width: 200px;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(20,40,35,0.16);
  border: 3px solid #fff;
  transition: transform 0.4s ease;
}
.card-1{ transform: rotate(-6deg) translateX(20px); z-index: 1; }
.card-2{ transform: translateY(-10px); z-index: 2; margin: 0 -18px; }
.card-3{ transform: rotate(6deg) translateX(-20px); z-index: 1; }

.photo-stack:hover .card-1{ transform: rotate(-9deg) translateX(14px) translateY(4px); }
.photo-stack:hover .card-3{ transform: rotate(9deg) translateX(-14px) translateY(4px); }

.scene{
  width: 100%; height: 100%;
  position: relative;
  display: block;
  object-fit: cover;
}
.scene-porch{ object-position: 12% center; }
.scene-waterfall{ object-position: 48% center; }
.scene-raft{ object-position: 88% center; }

.scene-hosthouse{
  object-fit: cover;
}

.explorers-text{ max-width: 470px; }
.section-title{
  font-size: 50px;
  font-weight: 800;
  margin-bottom: 14px;
}
.hand-num{
  font-family: 'Caveat', cursive;
  font-style: italic;
  color: var(--teal-light);
  font-weight: 600;
}
.section-sub{
  font-size: 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--gray-text);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 400px;
}

.gift-decor{
  position: absolute;
  right: 6%;
  bottom: 12%;
  font-size: 58px;
  color: var(--teal-light);
  opacity: 0.35;
  transform: rotate(-8deg);
}

/* ============ HOSTS ============ */
.hosts{
  padding: 90px 60px;
}
.hosts-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.hosts-text{ flex: 0 0 400px; max-width: 400px; }
.hosts-text .section-sub{ max-width: 360px; }

.checklist{ margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.checklist li{
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  color: var(--gray-text);
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}
.check-ic{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--teal);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

.hosts-media{
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
}
.host-photo{
  width: 100%;
  max-width: 480px;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(16,38,44,0.2);
}
.scene-hosthouse{
  object-fit: cover;
  object-position: center 58%;
}

.host-card{
  position: absolute;
  top: -30px;
  right: -50px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 26px 26px;
  width: 255px;
  box-shadow: 0 20px 45px rgba(16,38,44,0.18);
}
.host-icon{
  width: 52px; height: 52px;
  border-radius: 12px;
  border: 1.5px solid var(--teal-light);
  background: rgba(31, 186, 197, 0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.host-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.host-card h3{
  font-size: 25px;
  font-family:'Inter', sans-serif;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.2;
}
.host-card p{
  font-size: 16px;
  color: var(--gray-text);
  line-height: 1.5;
  font-family:'Inter', sans-serif;
  margin-bottom: 18px;
}

.leaf-decor{
  position: absolute;
  right: -30px;
  bottom: -10px;
  font-size: 90px;
  color: #6f9c72;
  opacity: 0.55;
  transform: rotate(15deg);
}

/* ============ NEWSLETTER ============ */
.newsletter-wrap{
  padding: 0 60px;
  margin: 50px 0;
}
.newsletter{
  max-width: 1300px;
  margin: 0 auto;
  background: linear-gradient(120deg, var(--navy-2), #123239);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.newsletter-left{
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
}
.envelope-icon{
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 35px;
  flex-shrink: 0;
}
.newsletter-left h3{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 6px;
}
.newsletter-left p{
  font-size: 18px;
  color: rgba(255,255,255,0.75);
  max-width: 320px;
  line-height: 1.5;
  font-family: "Times New Roman", serif;
}

.newsletter-form{
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-pill);
  padding: 6px;
  gap: 6px;
  flex: 1;
  max-width: 480px;
  min-width: 280px;
}
.newsletter-form input{
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  padding: 10px 16px;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.55); }

/* ============ FOOTER ============ */
.site-footer{
  background: var(--navy-2);
  padding: 32px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-logo{ height: 50px; }

.footer-tagline{
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: #fff;
  font-style: normal;
}
.footer-tagline .teal-word{ color: var(--teal-light); }
.underline-word::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--teal-light);
  border-radius: 2px;
  opacity: 0.7;
}

.footer-copy{
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.986);
}

/* ============ GET NOTIFIED MODAL ============ */
.notify-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(11,31,36,0.68);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.notify-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.notify-modal-panel{
  position: relative;
  width: min(880px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 42px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  background: #f4f7f5;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.3s ease;
}
.notify-modal.is-open .notify-modal-panel{ transform: translateY(0) scale(1); }
.notify-modal-close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(16,38,44,0.08);
  color: var(--navy);
  font-size: 16px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.notify-modal-close:hover{ background: rgba(26,143,130,0.16); transform: rotate(8deg); }
.notify-modal-heading{ max-width: 590px; padding-right: 40px; margin-bottom: 28px; }
.notify-modal-heading .eyebrow{ margin-bottom: 8px; font-size: 12px; }
.notify-modal-heading h2{ margin-bottom: 8px; font-size: 42px; }
.notify-modal-heading > p:last-child{ color: var(--gray-text); line-height: 1.55; }
.notify-modal-options{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.notify-option{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 330px;
  padding: 26px;
  border: 1px solid rgba(16,38,44,0.1);
  border-radius: var(--radius-md);
  background: #fff;
}
.notify-option-explorer{ background: var(--navy); color: #fff; border-color: var(--navy); }
.notify-option-icon{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal);
}
.notify-option-explorer .notify-option-icon{ background: rgba(53,179,163,0.16); color: var(--teal-light); }
.notify-option-kicker{ margin-bottom: 6px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }
.notify-option-explorer .notify-option-kicker{ color: var(--teal-light); }
.notify-option h3{ margin-bottom: 8px; color: inherit; font-size: 29px; }
.notify-option > div > p:not(.notify-option-kicker){ color: var(--gray-text); font-size: 14px; line-height: 1.55; }
.notify-option-explorer > div > p:not(.notify-option-kicker){ color: rgba(255,255,255,0.78); }
.notify-option ul{ display: grid; gap: 9px; margin: 18px 0 24px; }
.notify-option li{ display: flex; align-items: flex-start; gap: 9px; color: var(--navy); font-size: 13px; line-height: 1.35; }
.notify-option-explorer li{ color: rgba(255,255,255,0.82); }
.notify-option li i{ margin-top: 2px; color: var(--teal); font-size: 11px; }
.notify-option-explorer li i{ color: var(--teal-light); }
.notify-option .modal-cta{ width: 100%; justify-content: center; margin-top: auto; padding: 14px 16px; font-size: 11px; }
.notify-option-explorer .modal-cta{ background: var(--teal-light); }
body.modal-open{ overflow: hidden; }

/* ============ HOST FORM MODAL ============ */
.host-form-modal,
.explorer-form-modal{
  font-family: 'Inter', sans-serif;
}
.host-form-modal{
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11,31,36,0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.host-form-modal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.host-form-panel{
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 34px 34px 24px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.3s ease;
}
.host-form-modal.is-open .host-form-panel{ transform: translateY(0) scale(1); }
.host-form-close{
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16,38,44,0.08);
  color: var(--navy);
  font-size: 16px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.host-form-close:hover{ background: rgba(26,143,130,0.16); transform: rotate(8deg); }
.host-form-heading{ padding: 0 38px 10px 2px; }
.host-form-heading .eyebrow{ margin-bottom: 7px; font-size: 11px; }
.host-form-heading h2{ margin-bottom: 6px; font-size: 34px; }
.host-form-heading p:last-child{ color: var(--gray-text); font-size: 14px; line-height: 1.45; }
.host-form{ display: grid; gap: 15px; }
.host-field{ display: grid; gap: 7px; }
.host-field > span,
.host-category-field > label > span{ display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 13px; font-weight: 700; }
.host-field b{
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #35B3A3;
  color: var(--navy);
  font-size: 12px;
}
.host-field input,
.host-field select,
.host-field textarea{
  width: 100%;
  border: 1px solid rgba(16,38,44,0.18);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.host-field input:focus,
.host-field select:focus,
.host-field textarea:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(26,143,130,0.12); }
.host-field input::placeholder,
.host-field textarea::placeholder{ color: #9aa3a1; }
.host-field textarea{ min-height: 68px; resize: vertical; }
.host-category-field{ gap: 8px; }
.host-category-chips{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.host-category-chip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 5px;
  border-radius: 9px;
  background: #faf8f1;
  color: var(--navy);
  font-size: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}
.host-category-chip:hover,
.host-category-chip.is-selected{ background: var(--teal-pale); color: var(--teal); }
.host-category-chip i{ font-size: 14px; }
.host-submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border-radius: 24px;
  background: #35B3A3;
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.host-submit:hover{ background: #299d8f; transform: translateY(-2px); }
.host-privacy{ display: flex; justify-content: center; gap: 8px; color: #7d8784; font-size: 10px; line-height: 1.35; }
.host-privacy i{ margin-top: 2px; color: #899391; font-size: 16px; }

/* ============ EXPLORER FORM MODAL ============ */
.explorer-form-modal{
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11,31,36,0.62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.explorer-form-modal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; }
.explorer-form-panel{
  position: relative;
  width: min(490px, 100%);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 38px 34px 24px;
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.3s ease;
}
.explorer-form-modal.is-open .explorer-form-panel{ transform: translateY(0) scale(1); }
.explorer-form-close{
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(16,38,44,0.08);
  color: var(--navy);
  font-size: 16px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.explorer-form-close:hover{ background: rgba(26,143,130,0.16); transform: rotate(8deg); }
.explorer-form-heading{ padding: 0 34px 17px 2px; }
.explorer-form-kicker{
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.explorer-form-kicker img{
  width: 30px;
  height: 25px;
  object-fit: contain;
  display: inline-block;
}
.explorer-form-heading h2{ margin-bottom: 10px; font-size: 32px; line-height: 1.08; }
.explorer-form-heading p:last-child{ color: var(--gray-text); font-size: 13px; line-height: 1.5; }
.explorer-form{ display: grid; gap: 17px; }
.explorer-field{ display: grid; gap: 7px; }
.explorer-field > span{ display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 12px; font-weight: 700; }
.explorer-field > span i{ width: 16px; color: var(--navy); font-size: 14px; text-align: center; }
.explorer-field > span b{ color: #1b1f20; }
.explorer-field input,
.explorer-phone-field select{
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(16,38,44,0.16);
  border-radius: 9px;
  padding: 11px 13px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.explorer-field input:focus,
.explorer-phone-field select:focus{ border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16,38,44,0.1); }
.explorer-field input::placeholder{ color: #9aa3a1; }
.explorer-phone-field{ display: grid; grid-template-columns: 84px minmax(0, 1fr); }
.explorer-phone-field select{ border-radius: 9px 0 0 9px; border-right: 0; }
.explorer-phone-field input{ border-radius: 0 9px 9px 0; }
.explorer-submit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 3px;
  border-radius: 10px;
  background: var(--navy-2);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.explorer-submit:hover{ background: var(--teal); transform: translateY(-2px); }
.explorer-privacy,
.explorer-note{ display: flex; justify-content: center; align-items: center; gap: 7px; color: #697572; font-size: 10px; }
.explorer-privacy i{ font-size: 12px; }
.explorer-divider{ height: 1px; background: rgba(16,38,44,0.1); }
.explorer-note{ color: #9aa3a1; }

/* ============ TOAST ============ */
.toast{
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity: 0;

  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .hero, .explorers, .hosts{ padding-left: 40px; padding-right: 40px; }
  .newsletter-wrap, .site-footer{ padding-left: 40px; padding-right: 40px; }
  .explorers-inner, .hosts-inner{ gap: 40px; }
}

@media (max-width: 980px){
  .hero-image{ object-position: 64% center; }
  .hero-overlay-left{ width: 100%; background: linear-gradient(180deg, rgba(238,242,240,0.75) 0%, rgba(238,242,240,0.35) 55%, rgba(238,242,240,0.15) 100%); }
  .hero-content{ max-width: 100%; }
  .hero-title{ font-size: 38px; }
  .hero-title .hand{ font-size: 46px; }

  .explorers-inner, .hosts-inner{ flex-direction: column; text-align: left; }
  .hosts-inner{ flex-direction: column-reverse; }
  .photo-stack{ margin-bottom: 20px; }
  .hosts-text{ flex-basis: auto; max-width: 100%; }
  .host-photo{ max-width: 100%; }
  .dot-grid{ display: none; }
}

@media (max-width: 768px){
  .hero-image{ object-position: 70% center; }
  .hosts{ background-position: 62% center; }
  .hero, .explorers, .hosts{ padding-left: 28px; padding-right: 28px; }
  .newsletter-wrap, .site-footer{ padding-left: 28px; padding-right: 28px; }
  .hero{ min-height: 660px; padding-top: 28px; padding-bottom: 56px; }
  .site-header{ align-items: center; margin-bottom: 52px; }
  .header-right{ gap: 10px; }
  .hero-title{ font-size: clamp(36px, 7vw, 52px); }
  .hero-title .hand{ font-size: clamp(42px, 8vw, 54px); }
  .hero-sub br{ display: none; }

  .explorers, .hosts{ padding-top: 64px; padding-bottom: 64px; }
  .explorers-inner, .hosts-inner{ gap: 38px; }
  .photo-stack{ justify-content: center; gap: 10px; width: 100%; transform: none; margin-bottom: 0; }
  .stack-card{ width: calc((100% - 20px) / 3); height: 220px; border-radius: 14px; }
  .card-1, .card-2, .card-3{ transform: none; margin: 0; }
  .card-1{ transform: rotate(-3deg); }
  .card-3{ transform: rotate(3deg); }
  .section-title{ font-size: clamp(34px, 6vw, 44px); }
  .section-sub{ font-size: 16px; }
  .hosts-text{ width: 100%; }
  .hosts-media{ width: 100%; }
  .host-photo{ height: min(48vw, 320px); min-height: 230px; }
  .host-card{ right: 0; }

  .newsletter{ gap: 24px; }
  .newsletter{ flex-direction: column; align-items: stretch; }
  .newsletter-left{ align-items: flex-start; width: 100%; }
  .newsletter-left h3{ font-size: 26px; }
  .newsletter-left p{ font-size: 16px; }
  .newsletter-form{ width: 100%; max-width: none; min-width: 0; }
}

@media (max-width: 640px){
  .hero-image{ object-position: 74% center; }
  .hosts{ background-position: 68% center; }
  .hero-overlay-left{
    width: 100%;
    background: linear-gradient(180deg,
      rgba(238,242,240,0.94) 0%,
      rgba(238,242,240,0.88) 42%,
      rgba(238,242,240,0.68) 72%,
      rgba(238,242,240,0.42) 100%);
  }
  .hero{ padding: 24px 22px 50px; min-height: 620px; }
  .site-header{ margin-bottom: 40px; }
  .follow-text{ display: none; }
  .site-logo{ height: 42px; }

  .hero-title{ font-size: 30px; line-height: 1.08; text-shadow: 0 1px 1px rgba(255,255,255,0.35); }
  .hero-title .hand{ font-size: 38px; }
  .hero-sub{ font-size: 14px; color: var(--navy); line-height: 1.55; font-weight: 500; }
  .launch-label{ color: #087d73; }

  .countdown{ gap: 10px; }
  .cd-num{ font-size: 28px; }
  .cd-block{ min-width: 34px; }

  .explorers, .hosts{ padding: 60px 22px; }
  .newsletter-wrap{ padding: 0 22px; margin: 30px 0; }
  .site-footer{ padding: 26px 22px; flex-direction: column; text-align: center; }

  .photo-stack{ transform: scale(0.85); }
  .section-title{ font-size: 26px; }

  .host-card{
    position: static;
    width: 100%;
    margin-top: 18px;
    border-radius: var(--radius-md);
  }
  .hosts-media{ flex-direction: column; gap: 0; }
  .leaf-decor{ display: none; }

  .newsletter{ flex-direction: column; align-items: flex-start; padding: 30px 26px; }
  .newsletter-form{ width: 100%; max-width: 100%; }

  .gift-decor{ display: none; }

  .notify-modal{ padding: 12px; }
  .notify-modal-panel{ max-height: calc(100vh - 24px); padding: 32px 18px 18px; border-radius: 16px; }
  .notify-modal-heading{ padding: 0 30px 0 4px; margin-bottom: 20px; }
  .notify-modal-heading h2{ font-size: 32px; }
  .notify-modal-options{ grid-template-columns: 1fr; gap: 12px; }
  .notify-option{ min-height: 0; padding: 20px; }
  .notify-option-icon{ margin-bottom: 14px; }
  .notify-option h3{ font-size: 26px; }
  .notify-option ul{ margin-bottom: 20px; }

  .host-form-modal{ padding: 10px; }
  .host-form-panel{ max-height: calc(100vh - 20px); padding: 30px 18px 20px; border-radius: 16px; }
  .host-form-heading{ padding-right: 34px; }
  .host-form-heading h2{ font-size: 29px; }
  .host-form{ gap: 13px; }
  .host-category-chips{ gap: 5px; }
  .host-category-chip{ font-size: 9px; }

  .explorer-form-modal{ padding: 10px; }
  .explorer-form-panel{ max-height: calc(100vh - 20px); padding: 32px 18px 20px; border-radius: 16px; }
  .explorer-form-heading{ padding-right: 30px; }
  .explorer-form-heading h2{ font-size: 29px; }
  .explorer-form{ gap: 14px; }
}

@media (max-width: 420px){
  .hero{ min-height: 620px; }
  .site-logo{ height: 38px; }
  .social-icons a{ width: 29px; height: 29px; font-size: 12px; }
  .hero-title{ font-size: 30px; }
  .hero-title .hand{ font-size: 37px; }
  .countdown{ justify-content: space-between; gap: 5px; width: 100%; }
  .cd-block{ min-width: 0; }
  .cd-num{ font-size: 26px; }
  .cd-divider{ font-size: 20px; }
  .btn{ width: 100%; justify-content: center; }

  .photo-stack{ gap: 7px; }
  .stack-card{ width: calc((100% - 14px) / 3); height: 165px; border-width: 2px; border-radius: 11px; }
  .card-1{ transform: rotate(-2deg); }
  .card-3{ transform: rotate(2deg); }
  .section-title{ font-size: 31px; }
  .host-photo{ height: 220px; min-height: 0; }
  .host-card{ padding: 22px; }
  .host-card h3{ font-size: 27px; }
  .newsletter{ padding: 24px 20px; }
  .newsletter-left{ gap: 14px; }
  .envelope-icon{ width: 58px; height: 58px; font-size: 25px; }
  .newsletter-left h3{ font-size: 23px; }
  .newsletter-form{ flex-direction: column; align-items: stretch; border: none; padding: 0; background: transparent; }
  .newsletter-form input{ min-height: 46px; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-pill); }
  .newsletter-form .btn{ width: 100%; }
}