@font-face { font-family: system-ui; src: local(".SFNS-Regular"); }
:root{
  --bg:#05070b; --panel:#0d121a; --panel2:#121923; --text:#f6f2ea; --muted:#b9c0c7;
  --gold:#f5a400; --gold2:#ffd37a; --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:
    radial-gradient(circle at 80% 20%, rgba(245,164,0,.28), transparent 28rem),
    radial-gradient(circle at 15% 15%, rgba(61,132,180,.24), transparent 24rem),
    linear-gradient(180deg,#05070b,#0a1017 48%,#05070b);
}
a{color:inherit}
.site-header{
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem,4vw,4rem); background:rgba(5,7,11,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)
}
.brand{text-decoration:none; font-weight:800; letter-spacing:.04em; text-transform:uppercase}
nav{display:flex; gap:1.25rem; flex-wrap:wrap}
nav a{text-decoration:none; color:var(--muted); font-size:.95rem}
nav a:hover{color:var(--text)}
.hero{
  min-height:92vh; display:grid; grid-template-columns:1.05fr .75fr; align-items:center;
  gap:clamp(2rem,5vw,6rem); padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem);
  position:relative; overflow:hidden;
}
.hero:before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.25;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image:linear-gradient(to bottom, #000 0, transparent 65%);
}
.hero-copy,.book-wrap{position:relative}
.eyebrow{color:var(--gold2); text-transform:uppercase; letter-spacing:.2em; font-weight:800; font-size:.82rem}
h1{font-size:clamp(3.4rem,9vw,8.4rem); line-height:.88; margin:.2rem 0; letter-spacing:-.06em; text-transform:uppercase}
.subtitle{font-size:clamp(1.25rem,2.6vw,2rem); color:var(--gold); font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem); max-width:48rem; color:var(--muted); line-height:1.65}
.buttons{display:flex; gap:.85rem; flex-wrap:wrap; margin-top:2rem}
.button{
  padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,.06); color:var(--text); font-weight:800
}
.button.primary{background:linear-gradient(135deg,var(--gold),#ffbf3f); color:#101010; border:0}
.book-wrap{display:flex; justify-content:center; perspective:1200px}
.book-cover{
  width:min(360px,75vw); border-radius:10px; box-shadow:0 32px 90px rgba(0,0,0,.55);
  transform:rotateY(-9deg) rotateX(3deg); border:1px solid rgba(255,255,255,.25)
}
.section{padding:clamp(4rem,7vw,7rem) clamp(1.25rem,6vw,7rem); border-top:1px solid var(--line)}
.two-col{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,5rem)}
h2{font-size:clamp(2rem,4vw,4rem); line-height:1; margin:.2rem 0 1rem; letter-spacing:-.04em}
.prose{font-size:1.15rem; color:var(--muted); line-height:1.8}
.highlight{color:var(--gold2); font-weight:900}
.icons{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line);
  margin:0 clamp(1.25rem,6vw,7rem); border:1px solid var(--line); border-radius:22px; overflow:hidden
}
.icons div{background:rgba(13,18,26,.78); padding:1.5rem; text-align:center}
.icons span{display:block; color:var(--gold); font-size:2rem; margin-bottom:.6rem}
.icons strong{text-transform:uppercase; letter-spacing:.08em; font-size:.82rem}
.author{display:grid; grid-template-columns:280px 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.portrait img{width:100%; border-radius:18px; border:1px solid var(--line); background:var(--panel)}
.author p{color:var(--muted); line-height:1.8; font-size:1.1rem}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2rem}
.card{
  min-height:120px; display:flex; align-items:end; padding:1.2rem; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:18px; text-decoration:none; font-weight:900
}
.card:hover{border-color:rgba(245,164,0,.8)}
.cta{background:linear-gradient(180deg,rgba(245,164,0,.06),transparent)}
.cta p{font-size:1.15rem;color:var(--muted)}
footer{padding:2rem clamp(1.25rem,6vw,7rem); color:var(--muted); border-top:1px solid var(--line)}
@media(max-width:850px){
  .site-header{position:relative; display:block}
  nav{margin-top:.8rem}
  .hero,.two-col,.author{grid-template-columns:1fr}
  .book-wrap{order:-1}
  .icons,.cards{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.icons,.cards{grid-template-columns:1fr} h1{font-size:3.2rem}}