:root{
  --etn-blue:#003857;
  --etn-blue-2:#006c9a;
  --etn-blue-3:#0d4f73;
  --etn-blue-soft:#eef5f9;
  --etn-cta:#0bb769;
  --etn-cta-dark:#079456;
  --surface:#ffffff;
  --surface-soft:#f3f8fb;
  --text:#122435;
  --text-soft:#55697d;
  --border:#d7e3eb;
  --border-strong:#bfd2df;
  --shadow:0 14px 34px rgba(7,27,45,.08);
  --shadow-soft:0 8px 20px rgba(7,27,45,.05);
  --radius-lg:28px;
  --container:1200px;
}

main .container{
  width:min(var(--container), 92%);
  margin-inline:auto;
}

main section:not(.hero){
  padding:5rem 0;
}

main h1,
main h2,
main h3{
  margin:0 0 .8rem;
  line-height:1.15;
  color:var(--etn-blue);
}

main h1{
  font-size:clamp(2.4rem,4vw,4rem);
}

main h2{
  font-size:clamp(1.9rem,3vw,2.6rem);
}

main h3{
  font-size:1.15rem;
}

main p{
  margin:0 0 1rem;
  color:var(--text-soft);
}

main .eyebrow{
  display:inline-block;
  margin-bottom:1rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--etn-blue-2);
}

main .eyebrow-light{
  color:rgba(255,255,255,.78);
}

main .section-heading{
  margin-bottom:2rem;
}

main .section-heading.centered{
  max-width:820px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:2.4rem;
}

main .section-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
}

main .section-lead{
  max-width:720px;
  font-size:1.05rem;
}

main .inline-link{
  color:var(--etn-blue-2);
  font-weight:700;
  white-space:nowrap;
}

main .inline-link:hover{
  color:var(--etn-blue);
}

main .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.2rem;
  border-radius:14px;
  font-weight:700;
  border:1px solid transparent;
  transition:.25s;
}

main .btn:hover{
  transform:translateY(-2px);
}

main .btn-primary{
  background:var(--etn-cta);
  color:#fff;
}

main .btn-primary:hover{
  background:var(--etn-cta-dark);
}

main .btn-secondary{
  background:#fff;
  border:1px solid var(--border);
  color:var(--etn-blue);
}

main .btn-secondary-light{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.26);
}

/* HERO */
main .hero{
  padding:0 0 4rem;
  background:
    radial-gradient(circle at top left,rgba(0,108,154,.16),transparent 28%),
    linear-gradient(180deg,#f9fbfd 0%,#eef5f9 100%);
}

main .hero-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:2.5rem;
  align-items:center;
  padding-top:3rem;
}

main .hero-text{
  max-width:60ch;
  font-size:1.05rem;
}

main .hero-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin:1.4rem 0;
}

main .hero-benefits{
  list-style:none;
  padding:0;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}

main .hero-benefits li{
  background:#fff;
  border:1px solid var(--border);
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.9rem;
}

main .hero-visual{
  position:relative;
}

main .hero-card{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow);
}

main .hero-card img{
  display:block;
  width:100%;
  aspect-ratio:16/11;
  object-fit:cover;
}

main .hero-stat{
  position:absolute;
  left:-1rem;
  bottom:1rem;
  background:#fff;
  padding:.9rem;
  border-radius:16px;
  box-shadow:var(--shadow-soft);
  max-width:240px;
}

main .hero-stat strong{
  display:block;
  color:var(--etn-blue);
}

/* INTRO */
main .intro-band{
  background:#fff;
  padding:2rem 0;
}

main .intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

main .intro-item{
  padding:1.2rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow-soft);
}

main .intro-item h2{
  font-size:1.2rem;
  margin-bottom:.45rem;
}

/* WHY ETN */
main .why-etn{
  background:var(--etn-blue-soft);
}

main .feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}

main .feature-card{
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:18px;
  padding:1.3rem;
}

main .feature-number{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  margin-bottom:.6rem;
  background:linear-gradient(180deg,var(--etn-blue),var(--etn-blue-2));
}

/* ROUTES */
main .routes{
  background:#fff;
}

main .route-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}

main .route-card{
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  transition:.25s;
}

main .route-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

main .route-image-link img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

main .route-body{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

main .route-meta{
  font-size:.9rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

main .tag{
  background:var(--etn-blue-soft);
  border-radius:999px;
  padding:.2rem .6rem;
  font-size:.8rem;
}

main .text-link{
  color:var(--etn-blue-2);
  font-weight:700;
}

/* TRAVEL GUIDANCE */
main .destinations{
  background:var(--etn-blue-soft);
}

main .destination-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}

main .destination-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1.4rem;
  transition:.25s;
}

main .destination-panel:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

main .destination-panel p{
  margin:0;
}

/* EXPERIENCE */
main .experience{
  background:linear-gradient(135deg,var(--etn-blue),var(--etn-blue-3));
  color:#fff;
}

main .split-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.4rem;
  align-items:center;
}

main .split-media{
  overflow:hidden;
  border-radius:26px;
  background:#fff;
  box-shadow:var(--shadow);
}

main .split-media img{
  display:block;
  width:100%;
  aspect-ratio:16/12;
  object-fit:cover;
}

main .experience h2,
main .experience .eyebrow{
  color:#fff;
}

main .experience p{
  color:rgba(255,255,255,.82);
}

main .experience-points{
  display:grid;
  gap:.8rem;
  margin-top:1rem;
}

main .experience-points article{
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:1rem;
}

main .experience-points article p{
  color:var(--text-soft);
  margin:0;
}

/* HOW */
main .how-it-works{
  background:#fff;
}

main .how-layout{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:2rem;
}

main .steps-list{
  list-style:none;
  padding:0;
  counter-reset:step;
  display:grid;
  gap:.8rem;
}

main .steps-list li{
  position:relative;
  padding:1rem 1rem 1rem 3.5rem;
  border:1px solid var(--border);
  border-radius:16px;
}

main .steps-list li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:1rem;
  top:1rem;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--etn-blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:700;
}

main .steps-list span{
  display:block;
}

/* MORE ROUTES */
main .more-routes{
  background:#fff;
}

main .link-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

main .link-columns ul{
  list-style:none;
  padding:0;
  display:grid;
  gap:.7rem;
}

main .link-columns a{
  display:block;
  padding:.9rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
}

/* APP */
main .app-section{
  background:#fff;
}

main .app-panel{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  padding:2rem;
  border-radius:26px;
  background:linear-gradient(135deg,#edf6fb,#dfeef7);
}

main .store-buttons{
  display:flex;
  gap:1rem;
  margin-top:1rem;
  flex-wrap:wrap;
}

main .store-buttons img{
  height:54px;
  width:auto;
}

main .app-side{
  background:linear-gradient(135deg,var(--etn-blue),var(--etn-blue-3));
  border-radius:18px;
  padding:1.2rem;
}

main .app-points{
  list-style:none;
  padding:0;
  color:#fff;
}

/* FAQ */
main .faq{
  background:linear-gradient(180deg,#f7fbfd,#fff);
}

main .faq-wrap{
  max-width:980px;
}

main .faq-list{
  display:grid;
  gap:.8rem;
}

main details{
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  background:#fff;
}

main summary{
  font-weight:700;
  color:var(--etn-blue);
  cursor:pointer;
}

/* FINAL CTA */
main .final-cta{
  background:linear-gradient(90deg,var(--etn-blue),var(--etn-blue-2));
  color:#fff;
  padding:4rem 0;
}

main .final-layout{
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  flex-wrap:wrap;
}

main .final-cta h2{
  color:#fff;
}

main .final-copy{
  color:rgba(255,255,255,.82);
  max-width:620px;
  margin:0;
}

main .final-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

/* RESPONSIVE */
@media (max-width:1100px){
  main .feature-grid,
  main .destination-grid{
    grid-template-columns:1fr 1fr;
  }

  main .route-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:900px){
  main .hero-layout,
  main .split-layout,
  main .how-layout,
  main .app-panel{
    grid-template-columns:1fr;
  }

  main .link-columns,
  main .intro-grid{
    grid-template-columns:1fr 1fr;
  }

  main .hero-stat{
    position:static;
    margin-top:1rem;
  }

  main .section-heading-row,
  main .final-layout{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:720px){
  main section:not(.hero){
    padding:3.8rem 0;
  }

  main .hero{
    padding:0 0 3rem;
  }

  main .hero-layout{
    padding-top:2rem;
  }

  main .intro-grid,
  main .feature-grid,
  main .route-grid,
  main .destination-grid,
  main .link-columns{
    grid-template-columns:1fr;
  }

  main .hero-actions,
  main .final-actions{
    flex-direction:column;
    align-items:stretch;
  }

  main .btn{
    width:100%;
  }

  main .store-buttons img{
    height:52px;
  }
}