:root{
  --bg:#080a14; --bg2:#0e1224; --panel:#11152a;
  --ink:#efe7d2; --ink-soft:#cabd9f; --ink-dim:#8f876f;
  --gold:#caa94e; --gold-bright:#e8d28a; --gold-deep:#8a6e2e;
  --lapis:#23357a; --lapis-bright:#4f6ad6;
  --line:rgba(202,169,78,.14); --line-soft:rgba(202,169,78,.08);
  --font-display:'Spectral',Georgia,serif;
  --font-body:'Cardo',Georgia,serif;
  --font-he:'Frank Ruhl Libre',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(79,106,214,.10), transparent 38%),
    radial-gradient(circle at 86% 8%, rgba(202,169,78,.07), transparent 34%),
    radial-gradient(1px 1px at 20% 30%, rgba(239,231,210,.30), transparent 60%),
    radial-gradient(1px 1px at 67% 18%, rgba(239,231,210,.22), transparent 60%),
    radial-gradient(1px 1px at 41% 64%, rgba(239,231,210,.18), transparent 60%),
    radial-gradient(1px 1px at 88% 52%, rgba(239,231,210,.20), transparent 60%),
    radial-gradient(1px 1px at 12% 80%, rgba(239,231,210,.16), transparent 60%),
    linear-gradient(180deg, var(--bg), #0a0d1c 60%, var(--bg));
  background-attachment: fixed;
  color:var(--ink); font-family:var(--font-body); font-size:19px; line-height:1.7;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-bright); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s}
a:hover{border-bottom-color:var(--gold)}
.wrap{max-width:1080px; margin:0 auto; padding:0 26px}
.narrow{max-width:600px}

/* header */
header.site{display:flex; align-items:center; justify-content:space-between;
  padding:18px 26px; border-bottom:1px solid var(--line-soft); position:sticky; top:0;
  background:rgba(8,10,20,.72); backdrop-filter:blur(12px); z-index:10}
.brand{font-family:var(--font-display); font-size:23px; font-weight:600; letter-spacing:.3px; color:var(--ink)}
.brand .he{font-family:var(--font-he); color:var(--gold); margin-right:9px; font-weight:500}
nav a{margin-left:22px; font-size:15px; color:var(--ink-dim); border:none; letter-spacing:.2px}
nav a:hover{color:var(--ink); border:none}

/* hero — asymmetric, left-set, with the slow zodiac behind it */
.hero{position:relative; padding:96px 0 48px; overflow:hidden}
.hero-inner{position:relative; z-index:2; max-width:660px}
.hero .eyebrow{font-family:var(--font-body); font-style:italic; font-size:17px; color:var(--gold);
  letter-spacing:.6px; margin:0 0 20px}
.hero h1{font-family:var(--font-display); font-weight:600; font-size:clamp(42px,6.8vw,72px);
  line-height:1.0; margin:0 0 24px; color:var(--ink); letter-spacing:-.6px}
.hero h1 .gold{color:var(--gold); font-style:italic; font-weight:600}
.hero p.sub{font-size:21px; color:var(--ink-soft); max-width:540px; margin:0 0 34px; line-height:1.55}
.cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.col{max-width:740px}   /* shared left-aligned content column for lower sections */

/* slowly-rotating ornamental zodiac wheel behind the hero */
.zodiac-bg{position:absolute; top:50%; right:-130px; width:640px; height:640px; z-index:1;
  opacity:.18; pointer-events:none; transform:translateY(-50%);
  animation:zodiac-spin 180s linear infinite;
  -webkit-mask-image:radial-gradient(circle, #000 58%, transparent 80%);
          mask-image:radial-gradient(circle, #000 58%, transparent 80%)}
.zodiac-bg svg{width:100%; height:100%; display:block}
@keyframes zodiac-spin{ to{ transform:translateY(-50%) rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .zodiac-bg{ animation:none } }
@media(max-width:820px){ .zodiac-bg{ right:auto; left:50%; transform:translate(-50%,-50%); opacity:.08;
  animation-name:zodiac-spin-c } }
@keyframes zodiac-spin-c{ to{ transform:translate(-50%,-50%) rotate(360deg) } }

/* buttons — flatter, carved, not a SaaS gradient pill */
.btn{display:inline-block; cursor:pointer; border:none; font-family:var(--font-body);
  font-size:18px; padding:13px 28px; border-radius:1px; transition:.16s; letter-spacing:.3px}
.btn-gold{background:var(--gold); color:#15110a; font-weight:700; box-shadow:0 1px 0 var(--gold-deep)}
.btn-gold:hover{background:var(--gold-bright)}
.btn-ghost{background:transparent; border:1px solid var(--gold-deep); color:var(--gold-bright)}
.btn-ghost:hover{border-color:var(--gold); background:rgba(202,169,78,.06)}
.btn[disabled]{opacity:.45; cursor:default}

/* editorial feature rows — divided list, NOT a 3-card grid */
.features{padding:30px 0 70px; border-top:1px solid var(--line-soft); margin-top:50px}
.feature{display:grid; grid-template-columns:42px 1fr; gap:20px; align-items:start;
  padding:24px 0; border-bottom:1px solid var(--line-soft)}
.feature .num{font-family:var(--font-display); font-size:20px; color:var(--gold); font-style:italic; padding-top:4px}
.feature h3{font-family:var(--font-display); color:var(--ink); font-size:25px; font-weight:600; margin:0 0 6px}
.feature p{margin:0; color:var(--ink-soft); font-size:18px; max-width:62ch}

/* panels / forms */
.card{border:1px solid var(--line); border-radius:3px; background:var(--panel); padding:28px;
  box-shadow:0 18px 50px -30px rgba(0,0,0,.8)}
.field{margin-bottom:17px}
.field label{display:block; font-family:var(--font-body); font-size:14px; color:var(--ink-dim);
  margin-bottom:6px; letter-spacing:.4px; text-transform:uppercase}
.field input,.field select{width:100%; padding:12px 14px; font-size:17px; font-family:var(--font-body);
  background:rgba(0,0,0,.32); border:1px solid var(--line); border-radius:2px; color:var(--ink)}
.field input:focus,.field select:focus{outline:none; border-color:var(--gold)}
.row{display:flex; gap:15px}
.row .field{flex:1}
.err{color:#e2967e; font-size:15px; margin:0 0 14px}
.muted{color:var(--ink-dim); font-size:16px}

/* section heading with carved rule */
h2.section{font-family:var(--font-display); font-size:31px; font-weight:600; color:var(--ink);
  margin:46px 0 8px; letter-spacing:-.3px; position:relative; padding-bottom:8px}
h2.section::after{content:""; position:absolute; left:0; bottom:0; width:46px; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

.reading{white-space:pre-wrap; font-size:18.5px; line-height:1.78; color:var(--ink-soft)}
.lock{border:1px solid var(--line); border-radius:4px; padding:30px; text-align:center;
  background:linear-gradient(180deg, rgba(35,53,122,.14), rgba(202,169,78,.04))}
.lock h3{font-family:var(--font-display); color:var(--ink); font-size:26px; font-weight:600; margin:0 0 8px}
.pill{display:inline-block; font-family:var(--font-body); font-size:13px; padding:3px 11px;
  border:1px solid var(--line); border-radius:2px; color:var(--ink-dim); margin-left:8px; letter-spacing:.3px}
.chartlist{list-style:none; padding:0}
.chartlist li{display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-bottom:1px solid var(--line-soft)}
footer.site{border-top:1px solid var(--line-soft); padding:34px 0; color:var(--ink-dim);
  font-size:14px; text-align:center; margin-top:40px; font-style:italic}
@media(max-width:760px){ .row{flex-direction:column; gap:0} .hero{padding-top:54px} }