:root{
  /* Sampled straight from the real book cover art */
  --bg:#0a2226;
  --bg2:#0e2c30;
  --panel:#123539;
  --panel2:#0d2a2e;
  --line:#1e484c;
  --line-soft:#163a3d;
  --glow-dim:#4a8f99;
  --glow:#7fd3c9;
  --glow-li:#9ee6da;
  --glow-bright:#c8fbf7;
  --white:#eef9fa;
  --ink:#dff2f2;
  --ink-soft:#8fb8ba;
  --ink-faint:#5f8c8f;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;background:var(--bg);}
body{
  font-family:'Lora',serif;
  color:var(--ink);
  background:transparent;
  line-height:1.6;
  font-size:17px;
}
a{color:inherit;}

/* ---------- ANIMATED CIRCUIT BACKGROUND ---------- */
#circuit-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  display:block;
  background:var(--bg);
}
.smallcaps{
  font-family:'Lato',sans-serif;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-weight:700;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.narrow{max-width:720px;margin:0 auto;padding:0 24px;}

/* ---------- CIRCUIT TEXTURE ---------- */
.circuit-bg{
  background-image:
    radial-gradient(1px 1px at 20px 20px, rgba(127,211,201,.35) 1px, transparent 1px),
    linear-gradient(rgba(30,72,76,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,72,76,.55) 1px, transparent 1px);
  background-size:120px 120px, 40px 40px, 40px 40px;
}

/* ---------- NAV ---------- */
.nav{
  background:rgba(13,42,46,.68);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--white);
  padding:16px 0;
  position:relative;
  z-index:10;
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.nav .brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Lora',serif;font-weight:600;font-size:17px;
  color:var(--white);text-decoration:none;
}
.nav .brand svg{width:24px;height:24px;filter:drop-shadow(0 0 6px rgba(127,211,201,.5));}
.nav .links{display:flex;align-items:center;gap:26px;list-style:none;}
.nav .links a{
  font-family:'Lato',sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:#a9cfd1;text-decoration:none;transition:color .15s;
}
.nav .links a:hover{color:var(--glow-bright);}
@media (max-width:640px){
  .nav .links{gap:14px;}
  .nav .links span{display:none;}
}

/* ---------- BUTTON ---------- */
.btn{
  display:inline-block;
  font-family:'Lato',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:15px;
  color:#06181a;
  background:var(--glow);
  border:none;
  padding:18px 38px;
  border-radius:4px;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s, transform .1s, box-shadow .2s;
  box-shadow:0 0 0 1px rgba(127,211,201,.25), 0 8px 26px rgba(127,211,201,.28), 0 0 40px rgba(127,211,201,.18);
  text-align:center;
}
.btn:hover{background:var(--glow-bright);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(200,251,247,.4), 0 10px 30px rgba(127,211,201,.4), 0 0 50px rgba(127,211,201,.3);}
.btn.outline{
  background:transparent;border:1.5px solid var(--glow-dim);box-shadow:none;color:var(--white);
}
.btn.outline:hover{background:rgba(127,211,201,.08);border-color:var(--glow);}
.btn.small{padding:12px 24px;font-size:12px;}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(127,211,201,.20), transparent 60%),
    linear-gradient(180deg, rgba(6,26,29,.35) 0%, rgba(10,34,38,.2) 55%, rgba(14,44,48,.35) 100%);
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:64px 0 80px;
}
.hero .wrap{position:relative;z-index:2;text-align:center;}
.emblem{width:84px;height:84px;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 18px rgba(127,211,201,.55));}
.emblem.small{width:54px;height:54px;margin-bottom:16px;}
.hero .pre{color:var(--glow-li);font-size:12px;margin-bottom:18px;}
.hero h1{
  font-family:'Lora',serif;font-weight:600;
  font-size:46px;line-height:1.12;letter-spacing:.01em;
  max-width:760px;margin:0 auto 20px;
  text-shadow:0 0 30px rgba(127,211,201,.18);
}
.hero .sub{
  font-style:italic;font-size:20px;color:#b7dcdd;
  max-width:620px;margin:0 auto 34px;line-height:1.55;
}
.hero .scroll-cue{margin-top:26px;font-size:13px;color:var(--ink-faint);}
.hero.compact{padding:56px 0 64px;}
.hero.compact h1{font-size:36px;}

/* ---------- HERO WITH COVER (two-column) ---------- */
.hero .split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
  text-align:left;position:relative;z-index:2;
}
.hero .split .copy{max-width:560px;}
.hero .split .pre{margin-bottom:16px;}
.hero .split h1{margin:0 0 18px;font-size:44px;max-width:none;}
.hero .split .sub{margin:0 0 30px;max-width:none;text-align:left;}
.hero .split .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero .split .cover{
  display:flex;justify-content:center;align-items:center;position:relative;
}
.hero .split .cover img{
  width:100%;max-width:320px;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(127,211,201,.25), 0 0 0 1px rgba(127,211,201,.25);
}
@media (max-width:860px){
  .hero .split{grid-template-columns:1fr;text-align:center;gap:36px;}
  .hero .split .copy{max-width:620px;margin:0 auto;}
  .hero .split h1{font-size:36px;}
  .hero .split .sub{text-align:center;margin-left:auto;margin-right:auto;}
  .hero .split .ctas{justify-content:center;}
}

/* ---------- FORM CARD ---------- */
.formcard{
  background:linear-gradient(180deg, rgba(18,53,57,.92), rgba(10,34,38,.92));
  border:1px solid rgba(127,211,201,.3);
  border-radius:10px;
  padding:26px 24px;
  max-width:440px;margin:0 auto;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(127,211,201,.1);
  text-align:left;
}
.hero .split .formcard{margin:0;}
.formcard h3{
  font-family:'Lato',sans-serif;font-weight:900;
  color:var(--glow-bright);font-size:18px;text-align:center;margin-bottom:4px;
}
.formcard .note{color:var(--ink-soft);font-size:13px;text-align:center;margin-bottom:18px;}
.field{margin-bottom:12px;}
.field label{
  display:block;font-family:'Lato',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px;
}
.field input{
  width:100%;font-family:'Lora',serif;font-size:16px;
  padding:13px 14px;border:1px solid var(--line);border-radius:5px;
  background:rgba(6,20,22,.65);color:var(--white);
}
.field input::placeholder{color:var(--ink-faint);}
.field input:focus{outline:none;border-color:var(--glow);box-shadow:0 0 0 3px rgba(127,211,201,.18);}
.formcard .btn{width:100%;text-align:center;margin-top:6px;}
.formcard .fineprint{font-size:11.5px;color:var(--ink-faint);text-align:center;margin-top:12px;line-height:1.5;}
.form-success{display:none;text-align:center;padding:14px 6px;}
.form-success .check{
  width:54px;height:54px;border-radius:50%;background:var(--glow);
  color:#06181a;font-size:28px;line-height:54px;margin:0 auto 14px;
}
.form-success h3{color:var(--glow-bright);margin-bottom:8px;}
.form-success p{color:var(--ink-soft);font-size:15px;}

/* ---------- SECTIONS ---------- */
section.block{padding:70px 0;}
.kicker{color:var(--glow-li);font-size:12px;text-align:center;display:block;margin-bottom:12px;}
h2.sec{
  font-family:'Lora',serif;font-weight:600;color:var(--white);
  font-size:32px;line-height:1.2;text-align:center;max-width:640px;
  margin:0 auto 12px;
}
.lead{max-width:600px;margin:0 auto;text-align:center;color:var(--ink-soft);font-size:18px;}

.inside{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:42px auto 0;}
.inside .item{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:24px 24px 24px 58px;position:relative;
}
.inside .item .leaf{position:absolute;left:20px;top:24px;width:24px;height:24px;color:var(--glow);filter:drop-shadow(0 0 6px rgba(127,211,201,.5));}
.inside .item h4{font-family:'Lato',sans-serif;font-weight:900;color:var(--white);font-size:16px;margin-bottom:6px;}
.inside .item p{font-size:15px;color:var(--ink-soft);line-height:1.55;}

.seasons{max-width:720px;margin:40px auto 0;}
.srow{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);}
.srow:first-child{border-top:1px solid var(--line);}
.srow .rn{font-family:'Lato',sans-serif;font-weight:900;color:var(--glow);font-size:13px;width:28px;letter-spacing:.1em;}
.srow .st{flex:1;}
.srow .st b{color:var(--white);font-weight:600;}
.srow .st span{color:var(--ink-soft);font-style:italic;}
.srow .ch{font-family:'Lato',sans-serif;font-size:11px;color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase;}

/* ---------- RESOURCE CARDS (grid on /resources) ---------- */
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:42px auto 0;}
.res-card{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:28px 26px;display:flex;flex-direction:column;gap:10px;position:relative;
  text-decoration:none;color:var(--ink);transition:transform .15s, box-shadow .15s, border-color .15s;
}
.res-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 30px rgba(127,211,201,.15);border-color:var(--glow-dim);}
.res-card .flag{
  position:absolute;top:-10px;right:18px;background:var(--glow);color:#06181a;
  font-family:'Lato',sans-serif;font-weight:900;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:3px;
}
.res-card .r-tag{font-family:'Lato',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow-li);}
.res-card h3{font-family:'Lora',serif;font-weight:600;color:var(--white);font-size:20px;}
.res-card p{font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.res-card .get{font-family:'Lato',sans-serif;font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--glow);margin-top:auto;padding-top:6px;}
@media (max-width:720px){.res-grid{grid-template-columns:1fr;}}

/* ---------- WHO / TRUST ---------- */
.who{background:rgba(13,42,46,.62);backdrop-filter:blur(2px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.who .inner{max-width:680px;margin:0 auto;text-align:center;}
.who p{font-size:19px;margin-bottom:18px;}
.who .sig{font-family:'Lato',sans-serif;font-weight:700;color:var(--white);font-size:14px;letter-spacing:.04em;}
.who .co{color:var(--glow-li);font-size:13px;margin-top:3px;}

/* ---------- STORY BLOCK (book page) ---------- */
.story{background:var(--panel);border-left:3px solid var(--glow);border-radius:6px;padding:30px 32px;margin:34px auto 0;max-width:720px;}
.story p{font-size:17px;margin-bottom:14px;line-height:1.65;color:var(--ink);}
.story p:last-child{margin-bottom:0;}

/* ---------- BOOK PAGE COVER LAYOUT ---------- */
.book-hero{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;text-align:left;
  position:relative;z-index:2;
}
.book-hero .cover img{
  width:100%;max-width:280px;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(127,211,201,.25), 0 0 0 1px rgba(127,211,201,.25);
}
.book-hero .cover{display:flex;justify-content:center;}
.book-hero .copy h1{text-align:left;margin:0 0 18px;max-width:none;}
.book-hero .copy .sub{text-align:left;margin:0 0 30px;max-width:none;}
.book-hero .copy .pre{text-align:left;}
@media (max-width:860px){
  .book-hero{grid-template-columns:1fr;text-align:center;}
  .book-hero .copy h1,.book-hero .copy .sub,.book-hero .copy .pre{text-align:center;}
}

/* ---------- FINAL CTA ---------- */
.final{background:linear-gradient(180deg,rgba(14,44,48,.55) 0%,rgba(6,26,29,.75) 100%);color:var(--white);text-align:center;border-top:1px solid var(--line);}
.final h2{color:var(--white);font-family:'Lora',serif;font-weight:600;font-size:32px;margin-bottom:14px;}
.final p{color:var(--ink-soft);max-width:520px;margin:0 auto 30px;font-size:18px;}

footer{background:rgba(6,26,29,.85);color:var(--ink-faint);text-align:center;padding:30px 24px;font-size:13px;border-top:1px solid var(--line);}
footer a{color:var(--ink-soft);text-decoration:underline;}
footer .flinks{margin-top:8px;font-size:12px;}
footer .flinks a{margin:0 8px;}

@media (max-width:720px){
  .hero h1{font-size:34px;}
  .hero .sub{font-size:18px;}
  .inside{grid-template-columns:1fr;}
  h2.sec{font-size:26px;}
  body{font-size:16px;}
}