/* ============================================
   WiFi Beyond The Clouds — BOOK WEBSITE STYLES
   ============================================ */

:root {
  --navy: #0a1628;
  --navy-deep: #050d18;
  --sky: #4a90d9;
  --sky-deep: #2a5a9e;
  --sky-light: #7ab3ed;
  --sky-pale: #dbeeff;
  --gold: #c9a84c;
  --gold-light: #e0c875;
  --gold-dark: #9a7a2a;
  --gold-pale: #fdf6e3;
  --cream: #f5f0e8;
  --white: #ffffff;
  --text-primary: #0a1628;
  --text-secondary: #3a4a62;
  --text-muted: #6b7a8d;
  --text-light: #9aabb8;
  --border: #d4cfc5;
  --shadow-sm: 0 2px 12px rgba(10,22,40,0.08);
  --shadow-md: 0 4px 24px rgba(10,22,40,0.14);
  --shadow-lg: 0 12px 48px rgba(10,22,40,0.20);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Lato', 'Helvetica Neue', sans-serif;
  --max-width: 1140px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-sans); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); }

/* ---- Layout ---- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.section { padding: clamp(64px, 8vw, 100px) 0; }

/* ---- Typography Helpers ---- */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  display: block;
}
.section-title {
  font-family: var(--font-serif);
  color: var(--navy);
  margin-bottom: 14px;
}
.section-subtitle {
  color: var(--text-secondary);
  font-size: 1.08rem;
  max-width: 560px;
  margin-bottom: 0;
  line-height: 1.7;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,168,76,0.4);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: rgba(10,22,40,0.4);
}
.btn-secondary:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-2px);
}
.btn-white {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
.btn-white:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-2px);
}

/* ---- NAV ---- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: all var(--transition);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.01em;
  transition: opacity var(--transition);
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo .gold { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
  background: rgba(255,255,255,0.1);
}
.nav-cta { margin-left: 10px; }

.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.nav-mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all var(--transition);
}

.site-nav.scrolled {
  background: rgba(5,13,24,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 24px rgba(0,0,0,0.3);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: rgba(5,13,24,0.97);
  backdrop-filter: blur(16px);
  z-index: 999;
  padding: 32px clamp(20px, 5vw, 48px);
  flex-direction: column;
  gap: 6px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: all var(--transition);
}
.mobile-menu a:hover { color: var(--gold); padding-left: 8px; }

/* ============================================================
   HERO — Full thematic background
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-deep);
}

/* Layered sky background — mirrors the book cover */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    /* Top divine light burst */
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(255,220,100,0.22) 0%, rgba(255,180,60,0.08) 40%, transparent 70%),
    /* Upper sky — deep blue-purple */
    linear-gradient(180deg, #060d1a 0%, #0a1628 15%, #0f2050 30%, #1a3a6e 45%, #2a5a9e 55%, #3a6aae 65%, #4a7ab8 75%, #5a8ac2 85%, #6a9acc 92%, #7aaad0 97%, transparent 100%),
    /* Horizon warm glow */
    radial-gradient(ellipse 100% 30% at 50% 100%, rgba(201,168,76,0.12) 0%, rgba(180,140,60,0.05) 40%, transparent 70%),
    /* Golden ribbon ambient glow */
    radial-gradient(ellipse 30% 50% at 35% 70%, rgba(201,168,76,0.12) 0%, transparent 70%);
}

/* Cloud layers — billowing darkness */
.hero-clouds {
  position: absolute;
  inset: 0;
  opacity: 1;
}
.cloud-layer {
  position: absolute;
  inset: 0;
}
.cloud-layer-1 {
  background:
    radial-gradient(ellipse 70% 35% at 20% 22%, rgba(20,35,65,0.95) 0%, rgba(15,28,55,0.7) 60%, transparent 100%),
    radial-gradient(ellipse 60% 30% at 70% 18%, rgba(25,40,75,0.90) 0%, rgba(20,35,65,0.5) 60%, transparent 100%),
    radial-gradient(ellipse 80% 40% at 45% 30%, rgba(15,30,60,0.80) 0%, transparent 100%);
}
.cloud-layer-2 {
  background:
    radial-gradient(ellipse 55% 25% at 80% 38%, rgba(20,35,65,0.75) 0%, transparent 70%),
    radial-gradient(ellipse 65% 30% at 10% 42%, rgba(18,32,60,0.70) 0%, transparent 70%),
    radial-gradient(ellipse 90% 35% at 55% 50%, rgba(12,25,50,0.60) 0%, transparent 80%);
}
.cloud-layer-3 {
  background:
    radial-gradient(ellipse 100% 20% at 50% 62%, rgba(10,22,45,0.50) 0%, transparent 70%),
    radial-gradient(ellipse 80% 15% at 30% 72%, rgba(15,30,60,0.40) 0%, transparent 70%);
}

/* Sun ray beams from the divine light */
.hero-rays {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background:
    conic-gradient(from 270deg at 50% -10%, transparent 0deg, rgba(255,220,120,1) 1deg, transparent 3deg,
      transparent 20deg, rgba(255,220,120,0.8) 21deg, transparent 23deg,
      transparent 40deg, rgba(255,220,120,0.6) 41deg, transparent 43deg,
      transparent 60deg, rgba(255,220,120,0.5) 61deg, transparent 63deg,
      transparent 80deg, rgba(255,220,120,0.7) 81deg, transparent 83deg,
      transparent 100deg, rgba(255,220,120,0.4) 101deg, transparent 103deg,
      transparent 120deg, rgba(255,220,120,0.6) 121deg, transparent 123deg,
      transparent 140deg, rgba(255,220,120,0.5) 141deg, transparent 143deg,
      transparent 160deg, rgba(255,220,120,0.4) 161deg, transparent 163deg,
      transparent 180deg, rgba(255,220,120,0.6) 181deg, transparent 183deg,
      transparent 200deg, rgba(255,220,120,0.3) 201deg, transparent 203deg,
      transparent 220deg, rgba(255,220,120,0.5) 221deg, transparent 223deg,
      transparent 240deg, rgba(255,220,120,0.4) 241deg, transparent 243deg,
      transparent 260deg, rgba(255,220,120,0.3) 261deg, transparent 263deg);
}

/* Landscape at bottom — dark pine forest + rolling hills */
.hero-landscape {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background:
    /* Foreground hills - darkest */
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(4,10,20,1) 0%, rgba(4,10,20,0.9) 30%, transparent 70%),
    /* Rolling hills mid-ground */
    radial-gradient(ellipse 100% 60% at 50% 90%, rgba(6,14,28,0.85) 0%, transparent 60%),
    /* Pine forest texture hint */
    radial-gradient(ellipse 60% 30% at 20% 85%, rgba(3,10,22,0.8) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 80% 88%, rgba(3,10,22,0.8) 0%, transparent 70%);
}

/* Golden cable glow */
.hero-cable {
  position: absolute;
  right: 82px;
  top: 0;
  width: 80px;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  opacity: 0.7;
}

.hero-cable svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Pulse animations - light traveling down the cable */
.cable-pulse.p1 {
  animation: pulse-travel-1 5s ease-in-out infinite;
}
.cable-pulse.p2 {
  animation: pulse-travel-2 5s ease-in-out infinite;
  animation-delay: 1.25s;
}
.cable-pulse.p3 {
  animation: pulse-travel-3 5s ease-in-out infinite;
  animation-delay: 2.5s;
}
.cable-pulse.p4 {
  animation: pulse-travel-4 5s ease-in-out infinite;
  animation-delay: 3.75s;
}

@keyframes pulse-travel-1 {
  0%   { opacity: 0; cy: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; cy: 600; }
}
@keyframes pulse-travel-2 {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; }
}
@keyframes pulse-travel-3 {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; }
}
@keyframes pulse-travel-4 {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; }
}

.cable-main {
  animation: cable-flicker 8s ease-in-out infinite;
}
.cable-glow {
  animation: cable-glow-pulse 4s ease-in-out infinite alternate;
}

@keyframes cable-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
  52% { opacity: 1; }
  54% { opacity: 0.8; }
  56% { opacity: 1; }
}

@keyframes cable-glow-pulse {
  0% { opacity: 0.3; stroke-width: 4; }
  100% { opacity: 0.8; stroke-width: 10; }
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 80px;
}

.hero-text { color: var(--white); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 6px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.hero-subtitle-line {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--gold-light);
  font-style: italic;
  margin-bottom: 22px;
  line-height: 1.3;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.hero p {
  color: rgba(255,255,255,0.8);
  font-size: 1.08rem;
  margin-bottom: 36px;
  max-width: 500px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-book {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-book-cover {
  width: 300px;
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px rgba(201,168,76,0.25),
    0 0 40px rgba(201,168,76,0.15),
    0 25px 70px rgba(0,0,0,0.6),
    0 0 120px rgba(74,144,217,0.15);
  transform: perspective(900px) rotateY(-6deg) rotateX(3deg);
  transition: transform var(--transition);
}
.hero-book-cover:hover {
  transform: perspective(900px) rotateY(0deg) rotateX(0deg) scale(1.02);
}
.hero-book-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Hero scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: scroll-bounce 2s ease-in-out infinite;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   SECTION BACKGROUNDS — Thematic sky/cloud variations
   ============================================================ */

/* Sky gradient — light section, blue sky */
.bg-sky {
  background:
    linear-gradient(180deg, var(--cream) 0%, #e8f2fc 40%, #c8dff5 70%, #a8c8e8 100%);
  position: relative;
}
.bg-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 80% 15%, rgba(74,144,217,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 20% at 20% 20%, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Deep sky — darker section */
.bg-deep-sky {
  background:
    linear-gradient(180deg, #0a1628 0%, #0f2050 30%, #1a3a6e 50%, #2a5a9e 70%, #3a6aae 100%);
  position: relative;
  color: var(--white);
}
.bg-deep-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,220,100,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 60%, rgba(201,168,76,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.bg-deep-sky .section-title { color: var(--white); }
.bg-deep-sky .section-subtitle { color: rgba(255,255,255,0.75); }
.bg-deep-sky .section-label { color: var(--gold); }

/* Cloudscape — white section */
.bg-clouds {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,1) 0%, rgba(240,245,255,0.8) 40%, rgba(220,235,255,0.5) 70%, transparent 100%),
    linear-gradient(180deg, #e8f2fc 0%, #f0f6ff 30%, #f5f8ff 60%, var(--cream) 100%);
  position: relative;
}
.bg-clouds::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 15% 20%, rgba(255,255,255,0.9) 0%, transparent 70%),
    radial-gradient(ellipse 40% 25% at 85% 30%, rgba(255,255,255,0.8) 0%, transparent 70%),
    radial-gradient(ellipse 60% 35% at 50% 10%, rgba(255,255,255,0.95) 0%, transparent 70%);
  pointer-events: none;
}

/* Dusk sky — warm transition */
.bg-dusk {
  background:
    linear-gradient(180deg, #1a2a4a 0%, #1e3060 20%, #2a4070 40%, #3a5078 55%, #4a6080 65%, #5a7090 75%, #6a8098 85%, #7a90a0 100%);
  position: relative;
  color: var(--white);
}
.bg-dusk::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 20%, rgba(255,200,80,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.bg-dusk .section-title { color: var(--white); }
.bg-dusk .section-subtitle { color: rgba(255,255,255,0.75); }
.bg-dusk .section-label { color: var(--gold-light); }

/* Golden horizon section */
.bg-golden {
  background:
    linear-gradient(180deg, #0a1628 0%, #102035 20%, #1a3050 35%, #204060 45%, #285070 55%, #306080 65%, #387090 75%, #4080a0 85%, var(--cream) 100%);
  position: relative;
  color: var(--white);
}
.bg-golden::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 30% at 50% 70%, rgba(201,168,76,0.15) 0%, rgba(201,168,76,0.05) 40%, transparent 70%),
    radial-gradient(ellipse 60% 20% at 50% 85%, rgba(255,200,80,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.bg-golden .section-title { color: var(--white); }
.bg-golden .section-subtitle { color: rgba(255,255,255,0.75); }

/* White section */
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }

/* ---- Cards ---- */
.card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-dark {
  background: rgba(10,22,40,0.85);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
}
.card-dark:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  border-color: rgba(201,168,76,0.2);
}

/* ---- Resource Cards ---- */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.resource-card {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 0 0 24px;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--gold);
}
.resource-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--sky));
  opacity: 0;
  transition: opacity var(--transition);
}
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.resource-card:hover::before { opacity: 1; }

.resource-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin-bottom: 16px;
}

.resource-card h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--navy);
  margin: 0 22px 8px;
}
.resource-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 22px 14px;
  flex: 1;
}
.resource-card .btn {
  align-self: flex-start;
  font-size: 0.85rem;
  padding: 10px 18px;
  margin: 0 22px;
}

/* ---- Book Cards ---- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.book-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}
.book-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

/* All book card cover images: identical fixed height, cropped uniformly */
.book-card > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .book-card > img {
    height: 300px;
  }
}

@media (min-width: 1024px) {
  .book-card > img {
    height: 360px;
  }
}

.book-card-body {
  padding: 20px;
  flex: 1;
}
.book-card-title { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.book-card-genre { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }
.book-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.testimonial-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(201,168,76,0.3);
}
.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}
.testimonial-stars svg { color: var(--gold); width: 18px; height: 18px; fill: var(--gold); }
.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.65;
  margin-bottom: 20px;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.testimonial-name { font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.testimonial-role { font-size: 0.8rem; color: var(--text-muted); }

/* ---- Blog Cards ---- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

/* Blog page full-width - single column on mobile, 2 columns on tablet+ */
#blog .blog-grid-wide {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin: 0 auto;
  gap: 36px;
}




/* Book page - The Premise section: 2-col on desktop, 1-col on mobile */
.premise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 767px) {
  .premise-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .premise-grid .fade-in h2,
  .premise-grid .fade-in p {
    width: 100%;
    max-width: 100%;
  }

  .premise-grid .fade-in img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (min-width: 768px) {
  #blog .blog-grid-wide {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
  }
}

#blog .blog-grid-wide .blog-card {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

#blog .blog-grid-wide .blog-card-img {
  height: 240px;
  width: 100%;
}

@media (min-width: 768px) {
  #blog .blog-grid-wide .blog-card-img {
    height: 280px;
  }
}

#blog .blog-grid-wide .blog-card-title {
  font-size: 1.4rem;
  line-height: 1.3;
}

@media (min-width: 768px) {
  #blog .blog-grid-wide .blog-card-title {
    font-size: 1.5rem;
  }
}

#blog .blog-grid-wide .blog-card-excerpt {
  font-size: 0.95rem;
  line-height: 1.75;
}

@media (min-width: 768px) {
  #blog .blog-grid-wide .blog-card-excerpt {
    font-size: 1rem;
  }
}

/* Also ensure home page blog preview is single column on mobile */
.blog-grid {
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.blog-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  border-top: 4px solid var(--gold);
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(201,168,76,0.4);
}
.blog-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.blog-card-body {
  padding: 28px;
}
.blog-card-category {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 10px;
}
.blog-card-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.35;
}
.blog-card-excerpt {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
}
.blog-card-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}
.blog-card-body { padding: 24px; }
.blog-card-category { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }
.blog-card-title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.blog-card-excerpt { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.blog-card-date { font-size: 0.8rem; color: var(--text-muted); }

/* ---- CTA Banner ---- */
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,220,100,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(74,144,217,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(201,168,76,0.10) 0%, transparent 50%);
}
.cta-banner-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
}
.cta-banner h2 { color: var(--white); margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.78); font-size: 1.08rem; max-width: 500px; margin: 0 auto 32px; }

/* ---- Speaking Topics ---- */
.speaking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.speaking-topics { display: flex; flex-direction: column; gap: 14px; }
.speaking-topic {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.6);
  transition: all var(--transition);
}
.speaking-topic:hover { border-color: rgba(201,168,76,0.4); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.speaking-topic-num { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--gold); line-height: 1; min-width: 36px; }
.speaking-topic h4 { font-family: var(--font-serif); color: var(--navy); margin-bottom: 4px; }
.speaking-topic p { font-size: 0.88rem; color: var(--text-secondary); }

/* ---- Newsletter ---- */
.newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
  position: relative;
  z-index: 1;
}
.newsletter-inner h2 { color: var(--white); margin-bottom: 12px; }
.newsletter-inner p { color: rgba(255,255,255,0.7); margin-bottom: 32px; }
.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: all var(--transition);
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-form input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255,255,255,0.15);
}

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.contact-info-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-sm);
}
.contact-info-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--radius-sm);
  background: var(--gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
}
.contact-info-card h4 { font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; color: var(--navy); margin-bottom: 4px; }
.contact-info-card p { font-size: 0.88rem; color: var(--text-secondary); }

.contact-form-wrap {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-primary);
  background: rgba(255,255,255,0.8);
  transition: all var(--transition);
  resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12);
}

/* ---- Media Cards ---- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.media-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.media-card-thumb {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}
.media-card-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,220,100,0.08) 0%, transparent 70%);
}
.media-card-thumb svg { position: relative; z-index: 1; }
.media-card-body { padding: 24px; }
.media-card-type { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.media-card-title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy); margin-bottom: 8px; line-height: 1.3; }
.media-card-desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }

/* ---- Footer ---- */
.site-footer {
  background: rgba(5,13,24,0.97);
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,0.6);
  padding: 60px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .nav-logo { display: block; margin-bottom: 16px; }
.footer-brand p { font-size: 0.88rem; line-height: 1.65; max-width: 280px; color: rgba(255,255,255,0.55); }
.footer-col h4 { font-family: var(--font-serif); font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 0.88rem; transition: all var(--transition); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  color: rgba(255,255,255,0.5);
}
.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* ---- Page pages ---- */
.page { display: none; }
.page.active { display: block; }

/* ---- Animations ---- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---- Messages ---- */
.form-message {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 16px;
  display: none;
}
.form-message.success { display: block; background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.form-message.error { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-text { order: 2; }
  .hero-book { order: 1; justify-content: center; }
  .hero p { margin: 0 auto 36px; }
  .hero-actions { justify-content: center; }
  .hero-book-cover { width: 220px; }
  .speaking-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-cta { display: none; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.7rem; }
  .section { padding: 48px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .blog-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
}