:root{
  --bg:#040816;
  --panel:rgba(8,16,35,.82);
  --line:rgba(116,144,219,.18);
  --text:#f4f7fb;
  --muted:#a6b1c4;
  --green:#75ff70;
  --cyan:#2bd8ff;
  --blue:#4c7dff;
  --violet:#a855f7;
  --shadow:0 20px 60px rgba(0,0,0,.38);
  --radius:28px;
  --max:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(43,216,255,.08), transparent 24rem),
    radial-gradient(circle at 80% 8%, rgba(168,85,247,.10), transparent 26rem),
    radial-gradient(circle at 70% 60%, rgba(76,125,255,.08), transparent 24rem),
    linear-gradient(180deg, #050915 0%, #040816 55%, #030610 100%);
  overflow-x:hidden;
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.06;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
}
.container{width:min(var(--max), calc(100% - 40px)); margin-inline:auto}
.header{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:min(var(--max), calc(100% - 40px));
  margin:14px auto 0; padding:14px 18px;
  border:1px solid rgba(102,128,184,.16);
  background:rgba(6,11,24,.74);
  backdrop-filter:blur(20px);
  border-radius:20px;
}
.brand img{display:block; width:220px; height:auto}
.nav{display:flex; gap:26px; align-items:center}
.nav a, .simple-link, .footer a{color:#d8e0ee; text-decoration:none; font-weight:700}
.nav a:hover,.simple-link:hover,.footer a:hover{color:var(--cyan)}
.header-cta{
  padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:800;
  color:var(--text); background:linear-gradient(135deg, rgba(43,216,255,.18), rgba(168,85,247,.24));
  border:1px solid rgba(111,144,255,.24)
}
.hero{
  display:grid; grid-template-columns:1.03fr .97fr; gap:34px; align-items:center;
  padding:46px 0 18px;
}
.eyebrow{
  display:inline-flex; padding:10px 14px; border:1px solid rgba(43,216,255,.28);
  background:rgba(10,18,42,.64); border-radius:999px; color:var(--cyan);
  font-size:.92rem; font-weight:800; letter-spacing:.02em;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}
.hero h1{
  margin:18px 0 18px; font-size:clamp(3rem, 6vw, 6rem);
  line-height:.96; letter-spacing:-.075em
}
.hero h1 span,.hero h1 em{
  font-style:normal; background:linear-gradient(90deg,var(--cyan),var(--blue) 40%,var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.lead{margin:0 0 16px; font-size:1.16rem; line-height:1.7; color:#dbe2ef; max-width:760px}
.sublead{margin:0 0 22px; color:var(--muted); line-height:1.7; max-width:720px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 22px;
  border-radius:16px; text-decoration:none; font-weight:900; border:1px solid rgba(255,255,255,.16)
}
.btn-primary{color:#031019; background:linear-gradient(135deg,var(--green),var(--cyan))}
.btn-secondary{color:var(--text); background:rgba(10,18,40,.72)}
.hero-mini-card,.card-glass{
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(10,18,40,.92), rgba(8,14,30,.76));
  box-shadow:var(--shadow)
}
.hero-mini-card{
  max-width:700px; border-radius:22px; padding:18px 20px
}
.hero-mini-card p{margin:10px 0 0; color:#d7deeb; line-height:1.6}
.terminal-tag{
  color:var(--green); font-weight:800;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
}
.hero-visual,.story-visual,.compi-visual,.about-visual,.evolution-roadmap{
  overflow:hidden; border-radius:32px
}
.hero-visual img,.story-visual img,.episode-card img,.evolution-roadmap img,.about-visual img{
  display:block; width:100%; height:auto; object-fit:cover
}
.highlight-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px
}
.highlight-card{
  padding:24px; border-radius:24px;
  background:linear-gradient(135deg, rgba(9,16,38,.9), rgba(7,11,24,.9));
  border:1px solid var(--line); box-shadow:var(--shadow)
}
.highlight-card h3{margin:0 0 12px; font-size:1.45rem; line-height:1.1; letter-spacing:-.03em}
.highlight-card p{margin:0; color:var(--muted); line-height:1.65}
.story,.compi,.about{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; margin-top:26px
}
.story-copy h2,.episodes h2,.statement h2,.compi-copy h2,.about-copy h2,.subscribe-copy h2,.evolution h2{
  margin:12px 0 16px; font-size:clamp(2rem,4vw,3.35rem); letter-spacing:-.05em; line-height:1.03
}
.story-copy p,.compi-copy p,.about-copy p,.statement p,.subscribe-copy p{
  color:#c6cfdf; line-height:1.8; margin:0 0 14px
}
.terminal-box{
  margin-top:20px; border-radius:22px; overflow:hidden;
  border:1px solid rgba(43,216,255,.18); background:#040915
}
.terminal-box pre{
  margin:0; padding:24px; color:#dfffe4; font:500 1rem/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.episodes{margin-top:34px}
.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:18px
}
.episode-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.episode-card{
  overflow:hidden; border-radius:24px;
  background:linear-gradient(135deg, rgba(10,18,40,.9), rgba(7,11,24,.92));
  border:1px solid var(--line); box-shadow:var(--shadow)
}
.episode-card img{aspect-ratio:16/9}
.episode-body{padding:20px 20px 22px}
.episode-meta{
  display:inline-block; color:var(--cyan);
  font:800 .92rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  margin-bottom:10px
}
.episode-card h3{margin:0 0 10px; font-size:1.45rem; line-height:1.15; letter-spacing:-.03em}
.episode-card p{margin:0; color:var(--muted); line-height:1.65}
.statement,.subscribe{
  margin-top:26px; padding:28px; border-radius:28px; display:grid; gap:22px; align-items:center
}
.statement{grid-template-columns:110px 1fr}
.statement-icon{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:var(--green);
  font:900 2rem ui-monospace, monospace; border:1px solid rgba(117,255,112,.28); background:rgba(117,255,112,.06)
}
.evolution{margin-top:30px}
.evolution-roadmap{margin-top:12px}
.evolution-summary{
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:16px
}
.summary-step{
  border:1px solid var(--line); background:rgba(7,12,24,.78);
  border-radius:18px; padding:16px
}
.summary-step strong{display:block; margin-bottom:8px; font-size:1rem}
.summary-step span{color:var(--muted); line-height:1.55; font-size:.95rem}
.compi-visual{
  min-height:520px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(15,20,44,.95), rgba(7,12,24,.95))
}
.compi-visual img{
  width:min(100%, 560px); height:auto; object-fit:contain
}
.subscribe{grid-template-columns:1fr 1fr}
.subscribe-form{display:flex; gap:12px; width:100%}
.subscribe-form input{
  flex:1; min-width:0; min-height:56px; border-radius:16px;
  border:1px solid rgba(114,142,204,.24); background:rgba(7,11,24,.82);
  color:var(--text); padding:0 18px; font:inherit
}
.subscribe-form button{
  min-height:56px; border:0; border-radius:16px; padding:0 20px;
  font:900 1rem/1 Inter,sans-serif; color:#051018;
  background:linear-gradient(135deg,var(--green),var(--cyan)); cursor:pointer
}
.form-note{grid-column:1 / -1; margin:4px 0 0; color:var(--muted); font-size:.92rem}
.footer{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:30px 0 50px; color:var(--muted)
}
@media (max-width:1180px){
  .nav{display:none}
  .hero,.story,.compi,.about,.subscribe{grid-template-columns:1fr}
  .highlight-strip,.episode-grid,.evolution-summary{grid-template-columns:1fr}
  .statement{grid-template-columns:1fr}
}
@media (max-width:720px){
  .container{width:min(var(--max), calc(100% - 26px))}
  .header{padding:14px 16px}
  .brand img{width:170px}
  .header-cta{padding:10px 14px}
  .hero{padding-top:28px}
  .hero h1{font-size:2.8rem}
  .story-copy h2,.episodes h2,.statement h2,.compi-copy h2,.about-copy h2,.subscribe-copy h2,.evolution h2{
    font-size:2.1rem
  }
  .hero-actions,.subscribe-form,.footer{flex-direction:column; align-items:stretch}
}