:root{
  --bg:#0b1020;         
  --bg-soft:#0f172a;    
  --card:#111827;       
  --text:#e5e7eb;       
  --muted:#9ca3af;      
  --accent:#38bdf8;     
  --accent-2:#f59e0b;   
  --ring:rgba(56,189,248,.35);
  --max:1100px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; background:linear-gradient(180deg,var(--bg),var(--bg-soft)); color:var(--text); font-family: system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.55}
a{color:var(--accent); text-decoration:none}
a:hover{ text-decoration:underline }

.wrap{ width: min(100% - 2rem, var(--max)); margin-inline:auto }
header{ position:sticky; top:0; backdrop-filter:saturate(150%) blur(8px); background:rgba(11,16,32,.6); border-bottom:1px solid rgba(255,255,255,.06); z-index:10 }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .8rem 0 }
.brand{ display:flex; align-items:center; gap:.8rem; font-weight:700; letter-spacing:.3px }
.brand .logo{ width:34px; height:34px; border-radius:10px; background: radial-gradient(120px 60px at 30% 20%, #1f2937, #0b1020); display:grid; place-items:center; box-shadow: var(--shadow) }
.brand .logo span{ font-size:18px }
.nav a.btn{ padding:.6rem 1rem; border-radius:12px; background: var(--accent); color:#04121a; font-weight:700; display:inline-block }
.nav a.btn:hover{ filter: brightness(1.05) }

.hero{ padding: 6rem 0 4rem; display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center }
@media (max-width: 920px){ .hero{ grid-template-columns:1fr; padding:4rem 0 2rem } }
.title{ font-size: clamp(2rem, 1.2rem + 3.5vw, 3.4rem); line-height:1.1; margin:0 0 .8rem; font-weight:900 }
.subtitle{ color:var(--muted); margin:0 0 1.3rem; font-size: clamp(1rem, .9rem + .5vw, 1.2rem) }
.cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem }
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.1); padding:.9rem 1.1rem; border-radius:14px; background:#0b1325; color:var(--text); font-weight:700; box-shadow: var(--shadow) }
.btn.primary{ background: linear-gradient(180deg, #7dd3fc, #38bdf8); color:#081018; border-color:transparent }
.btn.alt{ background: #111827 }
.btn:hover{ transform:translateY(-1px); filter: brightness(1.05) }

.cover{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio: 3/4; background: linear-gradient(145deg,#0f172a,#1f2937); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.08) }
.cover::before{ content:""; position:absolute; inset:0; background: radial-gradient(60% 40% at 30% 20%, rgba(56,189,248,.25), transparent 60%), radial-gradient(50% 50% at 80% 10%, rgba(245,158,11,.18), transparent 60%) }
.cover-inner{position:absolute; inset:0; display:grid; grid-template-rows: 1fr auto; padding:1.2rem}
.cover h2{ margin:0; font-size: clamp(1.4rem, 1rem + 2vw, 10rem);
  
text-shadow:
    1px 2px 0 #000,
   -1px 2px 0 #000,
    1px -2px 0 #000,
   -1px -2px 0 #000; }
.cover h5 {
  font-size:large;
  text-shadow:
    1px 2px 0 #000,
   -1px 2px 0 #000,
    1px -2px 0 #000,
   -1px -2px 0 #000;
}
.cover p {text-shadow:
    1px 1px 0 #000,
   -1px 1px 0 #000,
    1px -1px 0 #000,
   -1px -1px 0 #000;}
.cover .by{ color:var(--muted); font-size:.95rem ;   color: #ffd166;   /* or any hex/RGB/HSL */
text-shadow:
    1px 1px 0 #000,
   -1px 1px 0 #000,
    1px -1px 0 #000,
   -1px -1px 0 #000;}
.spine{ position:absolute; left:0; top:0; bottom:0; width:8px; background:linear-gradient(180deg,#93c5fd,#38bdf8); box-shadow: 6px 0 12px rgba(0,0,0,.35) }

section{ padding: 3rem 0; border-top:1px solid rgba(255,255,255,.06) }
h3{ margin:0 0 1rem; font-size: clamp(1.3rem, 1rem + .9vw, 1.8rem) }
p{ margin:.5rem 0 1rem }
.grid{ display:grid; gap:1.2rem }
.grid.cols-2{ grid-template-columns: 1fr 1fr }
.grid.cols-3{ grid-template-columns: repeat(3,1fr) }
@media (max-width: 900px){ .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr } }

.card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:1.2rem 1.2rem; box-shadow: var(--shadow) }
.meta{ color:var(--muted); font-size:.95rem }

blockquote{ margin:0; padding:1.2rem 1.2rem 1.2rem 1rem; border-left:4px solid var(--accent); background:#0b1325; border-radius:12px }

form{ display:grid; grid-template-columns: 1fr auto; gap:.8rem; margin-top:1rem }
input[type="email"], input[type="text"]{ background:#0d1427; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1rem; color:var(--text); outline:none }
input:focus{ border-color: var(--accent); box-shadow: 0 0 0 6px var(--ring) }
button[type="submit"]{ border:none; border-radius:12px; padding:1rem 1.2rem; font-weight:800; background:linear-gradient(180deg,#7dd3fc,#38bdf8); color:#071219; box-shadow: var(--shadow); cursor:pointer }
button[type="submit"]:hover{ filter:brightness(1.05); transform: translateY(-1px) }

footer{ padding:2rem 0 3rem; color:var(--muted) }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.tiny{ font-size:.9rem }
.links{ display:flex; gap:1rem; flex-wrap:wrap }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* Show the real cover image */
.cover {
  background: none;                 /* kill the gradient */
  background-image: url('cover.jpg');
  background-size: cover;
  background-position: center;
}

/* Remove the glow overlay so the image isn’t dulled */
.cover::before { background: none; }