:root{
  /* Light theme palette */
  --bg:#f8f9fc;
  --panel:#ffffff;
  --muted:#6b6f76;
  --text:#212529;
  --brand:#2ec4b6;         /* accent: teal */
  --brand-2:#ffd166;       /* accent: gold */
  --cta:#ef476f;           /* accent: crimson */
  --cyprus:#2aa745;        /* subtle nod */
  --gb:#1c3f94;            /* subtle nod */
  --card:#ffffff;
  --ring: 0 0 0 2px rgba(46,196,182,.35), 0 12px 24px -12px rgba(0,0,0,.18);
  --radius:22px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --grad: radial-gradient(1200px 600px at 80% -10%, rgba(46,196,182,.08), transparent 60%),
          radial-gradient(900px 500px at -10% 10%, rgba(28,63,148,.06), transparent 70%),
          linear-gradient(180deg, #f8f9fc 0%, #f1f3f6 100%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--grad); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Header */
.nav{
  position:sticky; top:0; z-index:40; background:#ffffff; border-bottom:1px solid #e9edf3;
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-inner{max-width:1150px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px; color:#1f2937}
.brand-badge{height:34px;}
.brand span{font-family:"Playfair Display", serif; font-size:1.05rem}
.nav-links{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.nav-links a{padding:8px 12px; border-radius:12px; color:#334155}
.nav-links a:hover{background:#f1f5f9}
.cta-btn{background:var(--cta); color:#fff !important; padding:10px 14px; border-radius:14px; font-weight:700}
.cta-btn:hover{filter:brightness(1.07)}

/* Sections */
section{scroll-margin-top:90px}
.wrap{max-width:1150px; margin:0 auto; padding:48px 20px}
.section-title{margin:0 0 18px; font-size:clamp(1.25rem, 2.2vw, 1.6rem); color:#0f172a}

/* Hero */
.hero{position:relative; padding:72px 0 32px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.hero h1{font-family:"Playfair Display",serif; font-size:clamp(2rem, 3.8vw, 3.2rem); line-height:1.1; margin:0 0 14px; color:#0f172a}
.hero p.lead{font-size:clamp(1rem, 1.6vw, 1.15rem); color:#475569}
.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 24px}
.badge{font-size:.85rem; padding:8px 12px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; color:#334155}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:16px; font-weight:700; border:1px solid rgba(0,0,0,.06); background:#ffffff; box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(180deg, var(--brand) 0%, #21a99c 100%); color:#071217; border-color:transparent}
.btn.secondary{background:#f1f5f9; color:#0f172a;}
.subtle{font-size:.9rem; color:var(--muted)}

.book-card{position:relative; border-radius:var(--radius); background:linear-gradient(160deg, #f4f7fb, #ffffff 60%); border:1px solid #e5e7eb; padding:18px; box-shadow:var(--shadow)}
.book-img{aspect-ratio:3/4; border-radius:14px; background:linear-gradient(180deg, #e8eef7, #ffffff); display:grid; place-items:center; font-weight:700; color:#4f76c7; border:1px solid #e5e7eb}
.media-pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}
.hero-photo{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:1px solid #e5e7eb}
.book-cover{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:1px solid #e5e7eb}
.flag-ribbon{position:absolute; inset:auto 12px 12px auto; display:flex; gap:6px}
.flag{width:18px; height:12px; border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.12)}
.flag.gb{background:linear-gradient(135deg, #00247d 50%, #cf142b 50%), #fff; outline:2px solid #fff}
.flag.cy{
  background:
    radial-gradient(7px 7px at 7px 6px, #f4a300 98%, transparent 100%),
    linear-gradient(#fff,#fff); outline:1px solid rgba(0,0,0,.08)
}

/* Testimonial cards */
.grid{display:grid; gap:18px}
.grid.cards{grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 4; background:var(--card); border:1px solid #e9edf3; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h4{margin:8px 0 8px; font-size:1rem; color:#0f172a}
.quote{color:#334155}

/* Two-column sections */
.two{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.two > .section-title{grid-column:1 / -1; margin-bottom:8px}
.panel{background:var(--panel); border:1px solid #e5e7eb; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.bullets{margin-top:12px}

/* Lists */
ul.clean{list-style:none; padding:0; margin:0; display:grid; gap:10px}
ul.clean li{display:flex; gap:10px; align-items:flex-start}
.tick{width:20px; height:20px; border-radius:6px; background:linear-gradient(180deg, var(--brand), #1fb5a6); display:grid; place-items:center; color:#071217; font-weight:900; font-size:.9rem}

/* Resources */
.resource{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid #e5e7eb; border-radius:var(--radius); padding:18px}

/* Book detail layout */
.book-detail{display:grid; grid-template-columns: .9fr 1.1fr; gap:28px; align-items:center}
.book-detail__cover{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; border:1px solid #e5e7eb; box-shadow:var(--shadow)}

/* Carousel gallery */
.carousel{position:relative; display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:10px}
.carousel-control{appearance:none; border:0; background:#0f172a; color:#fff; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; cursor:pointer; opacity:.9}
.carousel-control:hover{opacity:1}
.carousel-viewport{overflow:hidden; border-radius:18px; width:100%}
.carousel-track{display:flex; width:100%; transition:transform .4s ease}
.carousel-page{min-width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:4px; box-sizing:border-box}
.carousel-card{display:flex; flex-direction:column}
.carousel-card .media{aspect-ratio:4/5; width:100%; overflow:hidden; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.08)}
.carousel-card img{width:100%; height:100%; object-fit:cover; display:block}
.carousel-caption{background:#fff; border:1px solid #e5e7eb; padding:10px 12px; border-radius:12px; margin-top:8px}
.carousel-caption h3{margin:0 0 4px; font-size:1rem}
.carousel-caption p{margin:0; color:#475569; font-size:.92rem}

/* Lead magnet form */
form{display:grid; gap:12px}
.field{display:grid; gap:6px}
label{font-size:.9rem; color:#475569}
input, textarea, select{background:#ffffff; color:#0f172a; border:1px solid #cbd5e1; border-radius:12px; padding:12px 14px; outline:none}
input:focus, textarea:focus{box-shadow:var(--ring); border-color:transparent}

/* Footer */
footer{border-top:1px solid #e5e7eb; background:#f8fafc}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:20px}
.small{font-size:.92rem; color:#374151}
.muted{color:var(--muted)}

/* Media */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr;}
  .card{grid-column:span 6}
  .footer-grid{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .book-detail{grid-template-columns:1fr}
  .carousel-page{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .card{grid-column:span 12}
  .nav-links{display:none}
  .carousel-page{grid-template-columns:1fr}
}