:root{
  --brand:#3a5cc9;
  --brand-2:#f28a2b;
  --ink:#1b1e28;
  --light:#f7f9ff;
  --panel:#ffffff;
  --maxw:1180px;
  --radius:16px;

  --fs-base:18px;
  --fs-h1:clamp(34px,6vw,64px);
  --fs-h2:clamp(26px,3.4vw,36px);
  --fs-h3:clamp(20px,2.4vw,24px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:var(--fs-base)/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--ink);
  background:#0b1220; /* fallback color if image is slow */
}
img{max-width:100%;height:auto;display:block}
a{color:#3a5cc9;text-decoration:underline;text-underline-offset:3px}

/* ===== Header ===== */
header{ position:sticky; top:0; z-index:1000; }
.site-header{
  background:linear-gradient(270deg, #5770c6 0%, #000e39 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; max-width:var(--maxw); margin:0 auto; padding:14px 24px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.3px; color:#fff; text-decoration:none;
}
.brand img{height:28px;width:auto}

/* Desktop nav (single source of truth) */
nav ul{margin:0;padding:0;list-style:none;display:flex;gap:18px}
nav a{
  color:#fff; text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
nav a:hover{background:rgba(255,255,255,.15)}

/* Mobile menu */
.menu-btn{
  display:none; border:1px solid rgba(255,255,255,.7); color:#fff; background:transparent;
  padding:8px 10px; border-radius:10px; font-weight:800;
}
.mobile-menu{ display:none; }
.mobile-menu.show{ display:flex; }

@media (max-width:960px){
  nav ul{display:none} /* hide desktop list on small screens */
  .menu-btn{display:inline-flex}
  .mobile-menu{
    position:absolute; right:16px; top:62px; flex-direction:column; min-width:220px;
    background:#ffffff; color:#0b1220; border:1px solid rgba(0,0,0,.15); padding:12px; border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
  .mobile-menu a{color:#0b1220; text-decoration:none; padding:8px 10px; border-radius:10px}
  .mobile-menu a:hover{background:#eef2ff}
}

/* ===== HERO (fills screen; background image) ===== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh; /* iOS safe */
  display:grid; place-items:center; text-align:center; color:#fff;
  background-image:url('/assets/water-bg.jpg'); /* root-relative */
  background-size:cover;
  background-position:center 40%;
  background-repeat:no-repeat;
}
/* LIGHTER overlay so header image appears brighter on all sizes */
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.16),   /* was .25 */
    rgba(0,0,0,.12) 55%,  /* was .18 */
    rgba(0,0,0,.04)      /* was .08 */
  );
}
.hero-inner{
  position:relative; z-index:1; max-width:900px; padding:40px 24px;
  text-shadow:0 1px 2px rgba(0,0,0,.20);
}
.hero .kicker{color:var(--brand-2); font-weight:800; letter-spacing:.4px; margin:0 0 10px}
.hero h1{ margin:0 0 10px; font-size:var(--fs-h1); line-height:1.05; }
.hero p.lead{
  font-size:clamp(18px,1.6vw,22px); color:#eef2ff; margin:10px auto 22px; max-width:760px;
}

/* CTA buttons — iOS-safe spacing (gap + margin fallback) */
.cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:-7px; }
.cta .btn{ margin:7px; }
.btn{
  appearance:none; border:0; cursor:pointer; font-weight:800;
  padding:14px 18px; border-radius:12px; text-decoration:none; display:inline-flex; align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.btn.primary{background:#ffffff; color:#0b1220}
.btn.secondary{background:transparent; color:#fff; border:2px solid rgba(255,255,255,.75)}
.btn.secondary:hover{background:rgba(255,255,255,.08)}
.btn:focus-visible{outline:3px solid #fff; outline-offset:2px}

/* ===== Sections ===== */
.section{padding:72px 0; background:#fff;}
.section.alt{background:var(--light)}
.container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section-title{ text-align:center; margin:0 0 26px; font-size:var(--fs-h2); color:var(--brand); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.card{ background:var(--panel); border:1px solid #e6e8f1; border-radius:var(--radius); box-shadow:0 10px 28px rgba(0,0,0,.06); padding:22px; }
.cover{ border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08); background:#fff }

/* Features */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px; }
.feature{ background:#fff; border:1px dashed #d6daf0; border-radius:12px; padding:18px; text-align:center; }
.feature h3{font-size:var(--fs-h3); margin:10px 0 6px}
.feature p{margin:0; color:#3b4053}

/* Reviews */
.reviews{ display:grid; grid-template-columns:1fr; gap:18px; }
blockquote.review{
  margin:0; padding:22px; background:#ffffff; border:1px solid #e6e8f1; border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  font-size:1.05rem; line-height:1.75;
}
.review footer{ margin-top:12px; color:#58607a; font-weight:600; }

/* Get the Book buttons */
.btn-group{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px; margin:-8px; margin-top:14px; }
.btn-group .btn{ background:#eef2ff; color:#233; border:1px solid #dfe4ff; min-width:180px; justify-content:center; margin:8px; }

/* Author */
.author img{ border-radius:var(--radius); box-shadow:0 10px 24px rgba(0,0,0,.08) }

/* Footer */
footer{ padding:26px 0 60px; color:#5f6475; text-align:center; background:#fff }

/* Responsive */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .features{grid-template-columns:1fr; gap:16px;}
}
@media (max-width:560px){
  .btn-group .btn{min-width:100%}
}