/* HUMANiKRON Comics — той самий OS-токен-набір, що й humanikron-portal (OsShell.astro),
   портований у чистий CSS для окремого статичного сайту (без Astro-збірки). */
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:local("JetBrains Mono");}

:root{
  --orange:#ff7217; --cyan:#46e5e4; --bg:#020811; --bg1:#06101a; --bg2:#0a1622;
  --line:rgba(255,116,29,.28); --text:#d8dde2; --text2:#aab2b8; --text3:#858d97;
  --font:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  min-height:100vh; overflow-x:hidden; position:relative;
}

/* ── фонова сітка/скан-лінії: та сама "цифрова тканина", що й у решти екосистеми ── */
.grid-field{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(70,229,228,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,229,228,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.scanline{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
.glow-orb{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.28;}
.glow-orb.o1{top:-160px; right:-120px; width:420px; height:420px; background:radial-gradient(circle, var(--orange), transparent 70%);}
.glow-orb.o2{bottom:-200px; left:-140px; width:480px; height:480px; background:radial-gradient(circle, var(--cyan), transparent 70%); opacity:.16;}

/* ── header ── */
.os-header{
  position:relative; z-index:3; height:104px; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:0 28px; border-bottom:1px solid rgba(66,151,190,.09);
  max-width:1400px; margin:0 auto;
}
.os-header .brand{display:flex; align-items:center; gap:16px; color:var(--orange); text-decoration:none}
.os-header .brand img{width:52px; height:52px; display:block; flex:0 0 auto}
.os-header .brand b{font:700 16px var(--font); letter-spacing:.15em; display:block}
.os-header .brand small{display:block; margin-top:5px; color:#89919a; font:9px var(--font); letter-spacing:.08em}
.os-header nav{display:flex; justify-content:center; gap:34px}
.os-header nav a{font-size:12px; letter-spacing:.08em; padding:42px 0 23px; color:#858d97; text-decoration:none; text-transform:uppercase; border-bottom:2px solid transparent; white-space:nowrap}
.os-header nav a.active, .os-header nav a:hover{color:var(--orange); border-bottom-color:var(--orange)}
.os-header .header-cta{font-size:11px; letter-spacing:.08em; padding:13px 20px; border:1px solid #a64b16; color:#aaa; text-decoration:none; text-transform:uppercase; white-space:nowrap}
.os-header .header-cta span{color:var(--orange)}
.os-header .header-cta:hover{border-color:var(--cyan); color:var(--cyan)}
@media (max-width:900px){ .os-header nav{display:none} .os-header{grid-template-columns:1fr auto; height:78px; padding:0 16px} .os-header .brand img{width:42px;height:42px} .os-header .header-cta{display:none} }

/* ── layout ── */
main{position:relative; z-index:2; max-width:1400px; margin:0 auto; padding:0 28px}
.wrap{max-width:900px; margin:0 auto; padding:48px 0 90px}
@media (max-width:900px){ main{padding:0 16px} }

/* ── eyebrow / hero ── */
.eyebrow{display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--text3)}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:#39d98a; box-shadow:0 0 9px #39d98aa8; animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
h1{font-size:clamp(28px,4vw,52px); line-height:1.15; text-transform:uppercase; letter-spacing:.06em; margin:10px 0 16px; color:#f2f4f4}
h1 em{color:var(--orange); font-style:normal}
.lead{font-size:14px; line-height:1.9; color:#c9d6e5; max-width:65ch; margin:0 0 8px}

/* ── HUD-рамка з кутовими скобами (той самий візуальний прийом, що portal-hero) ── */
.hud-frame{position:relative; margin-top:34px; padding:clamp(24px,3.5vw,40px); border:1px solid var(--line);
  background:radial-gradient(70% 140% at 88% 8%, rgba(255,114,23,.10), transparent 60%), linear-gradient(120deg, #07111c 0%, #020811 72%);
}
.hud-frame::after{content:''; position:absolute; inset:9px; pointer-events:none; background:
  linear-gradient(rgba(255,107,0,.55), rgba(255,107,0,.55)) left top/14px 1px,
  linear-gradient(rgba(255,107,0,.55), rgba(255,107,0,.55)) left top/1px 14px,
  linear-gradient(rgba(255,107,0,.55), rgba(255,107,0,.55)) right bottom/14px 1px,
  linear-gradient(rgba(255,107,0,.55), rgba(255,107,0,.55)) right bottom/1px 14px;
  background-repeat:no-repeat;
}

/* ── термінал-рядок: натяк на те, чим займаємось (AI-генерація + брендовий конвеєр) ── */
.terminal{font-size:11.5px; line-height:2; color:var(--cyan); margin-top:22px}
.terminal b{color:var(--text2); font-weight:400}
.terminal .cursor{display:inline-block; width:7px; height:13px; margin-left:4px; background:var(--cyan); vertical-align:-2px; animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ── картки-герої ── */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:36px}
a.hero{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); background:rgba(7,15,28,.5); transition:border-color .15s, transform .15s}
a.hero:hover{border-color:var(--cyan); transform:translateY(-3px)}
.hero.soon{opacity:.45}
.cover{aspect-ratio:2/3; overflow:hidden; background:var(--bg1); display:flex; align-items:center; justify-content:center; color:var(--text3); font-size:11px; letter-spacing:.1em; position:relative}
.cover img{width:100%; height:100%; object-fit:cover; display:block}
.hero-meta{padding:12px 14px}
.hero-meta h3{font-size:13px; margin:0 0 4px; color:#fff}
.hero-meta p{font-size:11px; letter-spacing:.04em; color:var(--text3); margin:0}

/* ── сторінки коміксу як "панелі" ── */
.pages{display:flex; flex-direction:column; gap:52px; margin-top:44px}
.page{position:relative}
.page .tag{position:absolute; top:-12px; left:16px; z-index:1; background:var(--bg); padding:0 8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); border:1px solid var(--line)}
.page .label{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin-bottom:10px; padding-top:6px}
.page .label span{color:var(--text3)}
.page .frame{border:1px solid var(--line); position:relative; overflow:hidden}
.page .frame::before{content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 40px rgba(70,229,228,.06)}
.page img{width:100%; display:block}
.page figcaption{font-size:12px; line-height:1.7; color:var(--text3); margin-top:10px}

/* ── розділ-роздільник ── */
.sec-label{color:var(--orange); font-size:9px; letter-spacing:.3em; text-transform:uppercase}
.sec-divider{display:flex; align-items:center; gap:14px; margin:0 0 12px}
.sec-divider-line{flex:1; height:1px; background:rgba(63,126,158,.16)}

/* ── CTA-блок ── */
.end{margin-top:56px; border:1px solid var(--line); border-left:2px solid var(--orange); padding:24px; background:rgba(255,114,23,.05)}
.end h2{font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--orange); margin:0 0 12px}
.end p{font-size:13px; line-height:1.85; max-width:60ch; color:#c9d6e5; margin:0 0 18px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 22px; border:1px solid var(--orange); color:var(--orange); text-decoration:none; font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:background .2s, color .2s}
.btn:hover{background:var(--orange); color:#0a1017}
.btn.ghost{border-color:#234052; color:var(--text2)}
.btn.ghost:hover{border-color:var(--cyan); color:var(--cyan); background:none}

/* ── footer ── */
.os-footer{position:relative; z-index:2; max-width:1400px; margin:60px auto 28px; padding:0 28px}
.os-footer-inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:18px 22px; border:1px solid var(--line)}
.os-footer-inner b{display:block; font-size:10px; margin-right:auto}
.os-footer-inner small{display:block; margin-top:9px; color:#77818b; font-size:8px}
.os-footer-more{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.os-footer-more a{color:#77818b; text-decoration:none; font-size:9px; letter-spacing:.18em; text-transform:uppercase; transition:color .3s}
.os-footer-more a:hover{color:var(--orange)}
.os-footer-social{display:flex; align-items:center; gap:20px}
.os-footer-social a{color:#aab2b8; text-decoration:none; font-size:16px; transition:color .3s, text-shadow .3s}
.os-footer-social a:hover{color:var(--orange); text-shadow:0 0 12px rgba(255,114,23,.7)}
@media (max-width:900px){ .os-footer{margin:40px auto 16px; padding:0 16px} }

/* ── reveal-on-scroll ── */
.rv{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }