:root{
  --midnight:#0b1020;
  --night:#121733;
  --ink:#e8ecff;
  --muted:#a8b0d9;
  --glow:#f3b46a;   /* fire color */
  --glow-2:#f7cf8d; /* softer rim */
  --line:#20274b;
  --card:#141b39;
  --accent:#c9d2ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2355 0%, transparent 60%),
              radial-gradient(800px 400px at 80% 0%, rgba(247,207,141,.10) 0%, transparent 65%),
              var(--midnight);
  line-height:1.65;
}
a{color:inherit; text-decoration:none}
.container{width:min(1100px,92%); margin-inline:auto}

/* Header */
header{
  position:sticky; top:0; z-index:30;
  background: linear-gradient(180deg, rgba(10,14,32,.8), rgba(10,14,32,.35));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand img{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  border-radius:6px;
}
.menu-toggle{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid rgba(243,180,106,.6);            /* gentle fire border */
  border-radius:12px;
  background:rgba(243,180,106,.08);                 /* gentle fire fill */
  color:var(--glow-2);
  cursor:pointer
}
.menu-toggle:hover{background:rgba(243,180,106,.14)}
nav ul{
  list-style:none; margin:0; padding:10px; display:none; gap:8px; flex-wrap:wrap;
  background:rgba(12,18,42,.75); border:1px solid var(--line); border-radius:14px
}
nav.open ul{display:flex}
nav a{display:inline-flex; padding:8px 12px; border-radius:999px}
nav a:hover{background:rgba(255,255,255,.04)}

/* Hero */
.hero{position:relative; overflow:hidden; padding: clamp(54px, 8vw, 120px) 0 36px}
.grid{display:grid; gap:30px; grid-template-columns: 1fr}
@media (min-width: 860px){ .grid{ grid-template-columns: 1.05fr .95fr; align-items:center } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:999px;
  background:rgba(20,27,57,.6)
}
h1{
  margin:10px 0 12px; font-size: clamp(34px, 5.2vw, 58px); line-height:1.08; letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.3)
}
.lead{color:var(--muted); max-width:60ch; font-size: clamp(16px, 2.1vw, 18px)}


.sky{position:relative; height:300px; border-radius:12px; background: linear-gradient(180deg,#0c1130,#0a0f28)}
.star{position:absolute; width:2px; height:2px; background:#cdd6ff; border-radius:50%; opacity:.65; animation: twinkle 3.8s ease-in-out infinite}
@keyframes twinkle{ 0%,100%{opacity:.22} 50%{opacity:.9} }


/* Sections */
section{padding: 24px 0}
.section-title{font-size:20px; color:var(--accent); letter-spacing:.4px; margin-bottom:10px}
.cards{display:grid; gap:14px}
@media (min-width: 720px){ .cards{grid-template-columns: repeat(3,1fr)} }
.card{
  background:linear-gradient(180deg, rgba(14,19,45,.85), rgba(14,19,45,.6));
  border:1px solid var(--line); border-radius:16px; padding:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22)
}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

/* Buttons: gentle fire color */
.soft-cta{
  display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:999px;
  border:1px solid rgba(243,180,106,.6);
  background:rgba(243,180,106,.10);
  color:var(--ink); margin-top:10px
}
.soft-cta:hover{background:rgba(243,180,106,.18)}

/* Blog list & posts */
.post-list{display:grid; gap:14px}
@media (min-width: 760px){ .post-list{grid-template-columns: 1fr 1fr} }
.post{
  background:linear-gradient(180deg, rgba(14,19,45,.85), rgba(14,19,45,.6));
  border:1px solid var(--line); border-radius:16px; padding:16px
}
.post time{color:var(--muted); font-size:12px}

/* Footer */
footer{margin: 34px 0 60px; color:var(--muted); font-size:13px}
.disclosure{border-top:1px dashed var(--line); margin-top:10px; padding-top:10px}

/* Reveal */
.reveal{opacity:0; transform: translateY(10px); transition: all .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Global starfield behind everything */
.stars-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0; /* stays behind the content/header */
}

/* Individual stars (app.js will create them) */
.star{
  position:absolute;
  width:2px; height:2px;
  background:#cdd6ff;
  border-radius:50%;
  opacity:.65;
  animation: twinkle 3.8s ease-in-out infinite;
}

@keyframes twinkle{ 0%,100%{opacity:.22} 50%{opacity:.9} }

.moon{
  position:fixed;
  top:28px; 
  left:50%; 
  transform:translateX(-50%);
  width:56px; 
  height:56px; 
  border-radius:50%;

  /* misty gradient */
  background: radial-gradient(circle at 30% 30%, 
              rgba(255,255,255,0.82) 0%, 
              rgba(220,225,255,0.60) 40%, 
              rgba(170,180,230,0.38) 70%, 
              transparent 100%);

  /* gentle aura */
  box-shadow:
    0 0 18px 5px rgba(200,210,255,0.22),
    0 0 52px 18px rgba(180,190,255,0.13),
    0 0 100px 34px rgba(160,170,220,0.07);

  opacity:0.60;  /* a touch brighter than 0.55 */
  z-index:0;
}

.hero-text {
  text-align: center;
  margin: 0 auto;
}