: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% 14%, rgba(79,106,214,.14), transparent 42%),
    radial-gradient(circle at 86% 10%, rgba(202,169,78,.06), transparent 38%),
    linear-gradient(180deg, #05060e, #0a0d1c 55%, #05060e);
  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;
}
/* deep-space twinkling star field, behind everything */
#starfield{position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none}
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-wrap{position:absolute; top:50%; right:-150px; width:680px; height:680px; z-index:1;
  pointer-events:none; transform:translateY(-50%);
  -webkit-mask-image:radial-gradient(circle, #000 70%, transparent 84%);
          mask-image:radial-gradient(circle, #000 70%, transparent 84%)}
.zodiac-bg{position:absolute; inset:0; opacity:.42;
  animation:zodiac-spin 200s linear infinite;
  filter:drop-shadow(0 0 6px rgba(190,210,255,.45)) drop-shadow(0 0 18px rgba(120,150,235,.25))}
.zodiac-bg svg{width:100%; height:100%; display:block}
@keyframes zodiac-spin{ to{ transform:rotate(360deg) } }
/* still, glowing aleph at the heart of the wheel */
.zodiac-aleph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-he); font-size:190px; line-height:1; color:#f4f0e4;
  text-shadow:0 0 18px rgba(232,242,255,.65), 0 0 44px rgba(150,180,255,.45), 0 0 90px rgba(110,140,235,.35);
  animation:aleph-pulse 6s ease-in-out infinite}
@keyframes aleph-pulse{ 0%,100%{ opacity:.82; text-shadow:0 0 18px rgba(232,242,255,.6), 0 0 44px rgba(150,180,255,.4), 0 0 90px rgba(110,140,235,.3) }
  50%{ opacity:1; text-shadow:0 0 26px rgba(232,242,255,.8), 0 0 60px rgba(150,180,255,.55), 0 0 120px rgba(110,140,235,.45) } }
@media (prefers-reduced-motion: reduce){ .zodiac-bg,.zodiac-aleph{ animation:none } }
@media(max-width:820px){ .zodiac-wrap{ right:auto; left:50%; transform:translate(-50%,-50%); opacity:.5 }
  .zodiac-aleph{ font-size:130px } }

/* 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} }