/* ============================================================
   DIVINE BEING — Dark edition.
   Deep-navy ground · light text · single BLUE accent (no green).
   Fraunces (headings) + Inter (body). One system, every page.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

:root {
  /* ---- ground (deep navy) ---- */
  --bg:#0b1420;        --bg-warm:#101d2e;    --bg-cream:#0e1826;
  --surface:#14243a;   --surface-2:#1a2c45;

  /* ---- single accent: blue (brighter for dark) ---- */
  --blue:#3d92d6;      --blue-deep:#2c6fa6;   --blue-bright:#66b0ee;   --blue-soft:rgba(61,146,214,0.14);
  --red:#e0575c;       /* functional tag only */

  /* ---- text (light) ---- */
  --ink:#e9eff7;       --slate:#aebccd;       --muted:#7f8ea3;        --faint:#566577;
  --line:rgba(255,255,255,0.09);  --line-2:rgba(255,255,255,0.17);

  --shadow-sm:0 2px 12px rgba(0,0,0,.30);
  --shadow-md:0 14px 40px rgba(0,0,0,.42);
  --shadow-lg:0 26px 64px rgba(0,0,0,.52);
  --r-sm:12px; --r-md:18px; --r-lg:26px;

  /* ---- aliases so existing markup keeps working (green -> blue) ---- */
  --paper:var(--bg); --paper-2:var(--bg-warm); --paper-3:var(--bg-cream); --paper-ink:#13263e;
  --ink-2:var(--slate); --ink-3:var(--muted); --ink-4:var(--faint);
  --accent:var(--blue); --accent-deep:var(--blue-deep); --accent-soft:var(--blue-soft);
  --garnet:var(--blue); --garnet-deep:var(--blue-deep); --garnet-soft:var(--blue-soft);
  --green:var(--blue); --green-deep:var(--blue-bright); --green-soft:var(--blue-soft);
  --gold:var(--blue); --rule:var(--line); --rule-2:var(--line-2); --rule-gold:rgba(61,146,214,.5);
  --radius:var(--r-md);

  --display:'Fraunces','Georgia',serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --wrap:1180px; --wrap-narrow:760px; --prose:640px;
  --pad:clamp(22px,5vw,60px); --section:clamp(76px,11vw,140px);
}

body { background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-optical-sizing:auto; }
.atmos { display:none; }
main, nav, footer { position:relative; z-index:1; }

/* ---------- Layout ---------- */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.wrap-narrow{ max-width:var(--wrap-narrow); } .wrap-prose{ max-width:var(--prose); }
.section { padding-top:var(--section); padding-bottom:var(--section); }
.section-tight { padding-top:clamp(52px,8vw,88px); padding-bottom:clamp(52px,8vw,88px); }
.panel { background:var(--bg-warm); }
.divider { height:1px; background:var(--line); border:0; }
.rule-double { border:0; height:1px; background:var(--line); }
.rule-gold { border:0; height:2px; background:linear-gradient(90deg,transparent,var(--blue) 18%,var(--blue) 82%,transparent); opacity:.55; }

/* ---------- Type ---------- */
.eyebrow { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); }
.eyebrow-ink { color:var(--muted); }
.sec-index { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:12px; }
.sec-index::before { content:""; width:26px; height:2px; border-radius:2px; background:var(--blue); }

.display { font-family:var(--display); font-weight:600; line-height:1.13; letter-spacing:-.01em; color:var(--ink); font-variation-settings:'opsz' 110; }
h1.display { font-size:clamp(40px,5.6vw,66px); }
h2.display { font-size:clamp(30px,4vw,46px); }
h3.display { font-size:clamp(22px,2.8vw,32px); }
.display em, .display .accent { font-style:normal; color:var(--blue-bright); }
.italic { font-style:italic; }
.accent { color:var(--blue-bright); }

.lede { font-family:var(--body); font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--slate); }
.italic-line { font-family:var(--display); font-style:italic; font-size:clamp(20px,2.6vw,28px); color:var(--blue-bright); font-weight:500; line-height:1.3; }
.prose { max-width:var(--prose); }
.prose p { color:var(--slate); margin-bottom:1.05em; }
.prose p:last-child{ margin-bottom:0; }
.dropcap::first-letter { font-family:var(--display); font-weight:600; font-size:3.4em; line-height:.82; float:left; margin:.05em .09em 0 0; color:var(--blue-bright); }
.muted{ color:var(--muted); } .faint{ color:var(--faint); }
.mono-num{ font-variant-numeric:tabular-nums; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:15px 28px; border:1.5px solid transparent; cursor:pointer; transition:all .22s ease; white-space:nowrap; border-radius:999px; }
.btn .arw{ transition:transform .22s ease; } .btn:hover .arw{ transform:translateX(4px); }
.btn-solid { background:var(--blue); color:#08111c; border-color:var(--blue); box-shadow:var(--shadow-sm); }
.btn-solid:hover { background:var(--blue-bright); border-color:var(--blue-bright); }
.btn-green { background:var(--blue); color:#08111c; border-color:var(--blue); }
.btn-green:hover { background:var(--blue-bright); border-color:var(--blue-bright); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue-bright); }
.btn-block{ width:100%; justify-content:center; }
.link-a { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-bright); display:inline-flex; align-items:center; gap:8px; transition:gap .2s ease; }
.link-a:hover{ gap:12px; } .link-a::after{ content:"→"; }

/* ---------- Nav ---------- */
.nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:15px var(--pad); background:rgba(11,20,32,.82); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--line); transition:box-shadow .3s ease, background .3s ease; }
.nav.scrolled { box-shadow:var(--shadow-sm); background:rgba(11,20,32,.95); }
.nav-brand { display:flex; flex-direction:column; line-height:1; }
.nb-name { font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.nb-name b { font-weight:600; font-style:italic; color:var(--blue-bright); }
.nb-sub { font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-top:4px; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-family:var(--sans); font-size:14px; font-weight:500; color:var(--slate); padding:9px 14px; border-radius:999px; transition:color .18s ease, background .18s ease; }
.nav-links a:hover,.nav-links a.is-active { color:var(--blue-bright); background:var(--blue-soft); }
.nav-cta { color:#08111c !important; background:var(--blue); font-weight:600 !important; margin-left:8px; }
.nav-cta:hover { background:var(--blue-bright) !important; color:#08111c !important; }
.nav-toggle { display:none; flex-direction:column; gap:5px; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; }
.nav-toggle span { width:22px; height:2px; border-radius:2px; background:var(--ink); transition:all .28s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:880px){
  .nav-toggle{ display:flex; }
  .nav-links{ position:fixed; inset:0 0 auto 0; top:60px; z-index:45; flex-direction:column; gap:4px; align-items:stretch; background:#0c1726; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg); padding:14px var(--pad) 22px; transform:translateY(-130%); visibility:hidden; transition:transform .3s ease,visibility .3s; }
  .nav-links.is-open{ transform:translateY(0); visibility:visible; }
  .nav-links a{ padding:13px 16px; border-radius:12px; font-size:15px; }
  .nav-links .nav-cta{ margin:8px 0 0; justify-content:center; text-align:center; }
}

/* ---------- Hero ---------- */
.hero { text-align:center; padding:clamp(66px,10vw,112px) var(--pad) clamp(56px,8vw,90px); background:linear-gradient(180deg,#122740,var(--bg) 76%); }
.hero .estab { font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:30px; }
.hero h1{ margin:0; }
.hero .rule-short { width:52px; height:2px; border-radius:2px; background:var(--blue); margin:26px auto; }
.hero .italic-line{ margin-top:4px; }
.hero .lede{ max-width:540px; margin:20px auto 0; }
.hero .actions{ display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:32px; }
.hero .byline{ font-family:var(--display); font-style:italic; font-size:17px; color:var(--muted); margin-top:28px; }

/* ---------- Section head ---------- */
.head{ max-width:680px; } .head.center{ margin:0 auto; text-align:center; }
.head .sec-index{ margin-bottom:18px; } .head.center .sec-index{ justify-content:center; }
.head h2{ margin-bottom:16px; } .head .lede{ max-width:600px; }
.head.center .lede{ margin-left:auto; margin-right:auto; }

/* ---------- Books ---------- */
.book-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px); margin-top:52px; }
@media (max-width:900px){ .book-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .book-grid{ grid-template-columns:1fr; max-width:360px; margin-left:auto; margin-right:auto; } }
.book { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.book:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.book-figure { position:relative; aspect-ratio:3/4; background:#0c1826; padding:18px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.book-figure img { width:100%; height:100%; object-fit:cover; border-radius:6px; box-shadow:var(--shadow-md); }
.book-plinth{ text-align:center; padding:10px; }
.book-plinth .pl-mark{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:12px; }
.book-plinth .pl-title{ font-family:var(--display); font-style:italic; font-size:clamp(24px,3vw,32px); color:var(--slate); line-height:1.1; }
.book-tag{ position:absolute; top:16px; right:16px; font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--red); padding:4px 9px; border-radius:999px; }
.book-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.book-title{ font-family:var(--display); font-size:22px; font-weight:600; line-height:1.16; color:var(--ink); margin-bottom:8px; }
.book-desc{ font-size:14.5px; color:var(--muted); line-height:1.55; margin-bottom:16px; flex:1; }
.book-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); }
.book-price{ font-family:var(--display); font-size:22px; font-weight:600; color:var(--ink); }

/* ---------- Bundle band ---------- */
.bundle { margin-top:52px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; background:linear-gradient(135deg,#173657,#101f33); border:1px solid var(--line-2); color:var(--ink); padding:clamp(28px,4vw,48px); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.bundle .display{ color:var(--ink); }
.bundle .b-price{ font-family:var(--display); font-size:clamp(38px,5vw,56px); font-weight:600; color:var(--blue-bright); line-height:1; }
.bundle .btn-solid{ background:var(--blue); border-color:var(--blue); color:#08111c; }
.bundle .btn-solid:hover{ background:var(--blue-bright); border-color:var(--blue-bright); }

/* ---------- Two-column ---------- */
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,88px); align-items:center; }
@media (max-width:840px){ .cols-2{ grid-template-columns:1fr; gap:44px; } }
.quote-card { background:var(--blue-soft); border-radius:var(--r-lg); border-left:4px solid var(--blue); padding:clamp(26px,3vw,40px); }

/* ---------- Trine / features ---------- */
.trine { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); margin-top:50px; }
@media (max-width:760px){ .trine{ grid-template-columns:1fr; max-width:460px; margin-left:auto; margin-right:auto; } }
.trine .cell { text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:clamp(24px,3vw,34px); }
.trine .roman { font-family:var(--display); font-style:italic; font-size:32px; color:var(--blue-bright); margin-bottom:12px; }
.trine h3 { font-family:var(--display); font-size:23px; font-weight:600; margin-bottom:8px; color:var(--ink); }
.trine p { font-size:14.5px; color:var(--muted); margin-bottom:18px; }

.feature-list{ list-style:none; }
.feature-list li{ display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); }
.feature-list li:last-child{ border-bottom:0; }
.feature-num{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.06em; color:#08111c; background:var(--blue); width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 30px; }
.feature-txt h4{ font-family:var(--display); font-size:21px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.feature-txt p{ font-size:14.5px; color:var(--muted); }

/* ---------- Forms / connect ---------- */
.signup-form{ display:flex; gap:10px; max-width:460px; margin:30px auto 0; }
.signup-form .input{ flex:1; }
@media (max-width:520px){ .signup-form{ flex-direction:column; } }
.input,.textarea,select.input{ background:var(--bg-cream); border:1.5px solid var(--line-2); border-radius:999px; padding:14px 18px; color:var(--ink); font-family:var(--body); font-size:16px; width:100%; transition:border-color .2s ease; }
.textarea{ border-radius:var(--r-sm); resize:vertical; min-height:92px; }
.input:focus,.textarea:focus{ outline:none; border-color:var(--blue); }
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px; }
.field label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }

.link-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:40px; }
.link-tile{ display:flex; align-items:center; gap:15px; padding:17px 19px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm); transition:all .22s ease; }
.link-tile:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.link-tile .ico{ width:38px; height:38px; flex:0 0 38px; display:flex; align-items:center; justify-content:center; color:var(--blue-bright); background:var(--blue-soft); border-radius:10px; }
.link-tile .ico svg{ width:18px; height:18px; }
.link-tile .lt-label{ font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink); }
.link-tile .lt-sub{ font-size:12px; color:var(--faint); font-family:var(--sans); margin-top:1px; }

/* ---------- Payment box ---------- */
.pay-methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:16px 0; }
.pay-method{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; }
.pay-method .pm-label{ font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:5px; }
.pay-method .pm-value{ font-family:var(--sans); font-size:14px; color:var(--ink); word-break:break-word; }
.ref-code{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:15px; letter-spacing:.05em; color:var(--blue-bright); background:var(--blue-soft); border:1px dashed var(--blue); border-radius:var(--r-sm); padding:9px 13px; display:inline-block; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:clamp(52px,8vw,80px) var(--pad) 44px; text-align:center; background:var(--bg-warm); }
.footer .f-brand{ font-family:var(--display); font-size:28px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.footer .f-brand b{ font-style:italic; color:var(--blue-bright); font-weight:600; }
.footer .f-tag{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.footer .f-nav{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:26px; }
.footer .f-nav a{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.footer .f-nav a:hover{ color:var(--blue-bright); }
.footer .f-social{ display:flex; gap:14px; justify-content:center; margin-bottom:28px; }
.footer .f-social a{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:999px; color:var(--slate); background:var(--surface); transition:all .22s; }
.footer .f-social a:hover{ border-color:var(--blue); color:var(--blue-bright); }
.footer .f-social svg{ width:17px; height:17px; }
.footer .f-rights{ font-family:var(--sans); font-size:11px; color:var(--faint); letter-spacing:.02em; line-height:1.8; }

/* ---------- Utilities ---------- */
.center{ text-align:center; }
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:48px}
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } }