/* ============================================================
   RDSI — спільна тема (Fable 5 halftone-естетика)
   Підключається на кожній сторінці. Нічого тут не дублюй —
   сторінки містять лише контент.
   ============================================================ */
:root{
  --bg:#0d0c0a;
  --panel:#f6efdb;
  --ink:#efe7d2;
  --dim:#aaa189;
  --red:#e14b3c;
  --amber:#f0a13c;
  --salmon:#d97757;
  --dot:#221d17;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:var(--panel)}
a{color:inherit;text-decoration:none}
button{font-family:var(--mono);cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* фон-канвас з крапками (движок створює сам) */
#bg{position:fixed;inset:0;z-index:0;display:block}
/* сканлайни + віньєтка */
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);}
.scan::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(0,0,0,.5) 100%)}

main,header,footer{position:relative;z-index:2}

/* ============ ШАПКА (движок впорскує сам) ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 12px;
  background:linear-gradient(rgba(13,12,10,.88),rgba(13,12,10,.55) 75%,transparent);
  backdrop-filter:blur(3px);
}
.logo{display:block}
nav{display:flex;align-items:center;gap:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
nav a{color:var(--dim);transition:color .2s}
nav a:hover{color:var(--amber)}
#prog{position:absolute;left:0;right:0;bottom:-2px;display:flex;justify-content:center;gap:6px;padding:0 20px}
#prog i{width:4px;height:4px;border-radius:50%;background:#241f18;transition:background .25s,box-shadow .25s}
#prog i.on{background:var(--amber);box-shadow:0 0 6px rgba(240,161,60,.7)}

/* ============ ДОТ-МАТРИЧНИЙ ШРИФТ ============ */
.dw{display:grid;justify-content:center;place-items:center}
.dw i{display:block;width:var(--d);height:var(--d);border-radius:50%;
  background:var(--dwc,#fff);place-self:center;
  transform:scale(0);
  transition:transform .55s cubic-bezier(.2,1.7,.4,1);}
.dw.in i{transform:scale(1)}
.dw i.fl{opacity:.2}

/* ============ ВИВІСКИ ============ */
.sign{
  position:relative;width:min(88vw,640px);margin:0 auto;
  background:var(--panel);border-radius:26px;
  padding:74px 52px 56px;
  transform:scale(.94);opacity:0;
  transition:transform 1s cubic-bezier(.2,1.3,.3,1),opacity .8s;
}
.loaded .sign{transform:scale(1);opacity:1}
.sign.small{width:min(88vw,560px);padding:58px 48px 46px;border-radius:22px}
.bar{
  position:absolute;top:0;left:50%;transform:translate(-50%,-52%);
  background:#0a0908;border-radius:10px;padding:12px 20px;
  box-shadow:0 4px 18px rgba(0,0,0,.6);
  white-space:nowrap;
}

/* ============ ГЕРОЙ (головна) ============ */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 20px 90px;position:relative;text-align:center}
.hero-in{transition:opacity .3s linear;will-change:transform,opacity}
.tag{margin-top:34px;font-size:15px;letter-spacing:.42em;color:var(--ink);
  text-transform:uppercase;font-weight:700;text-shadow:0 1px 10px rgba(13,12,10,.9)}
.tag span{color:var(--red)}
.sub{margin-top:16px;font-size:13px;line-height:1.75;color:#cfc6ae;letter-spacing:.04em;
  text-shadow:0 1px 10px rgba(13,12,10,.9)}
.cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.85}
.chev{width:12px;height:12px;border-right:3px solid var(--dim);border-bottom:3px solid var(--dim);
  transform:rotate(45deg);animation:bnc 1.6s ease-in-out infinite}
@keyframes bnc{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}
  50%{transform:rotate(45deg) translate(5px,5px);opacity:1}}

/* герой-лайт для підсторінок */
.hero-lite{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:150px 20px 30px;text-align:center;gap:6px}

/* поява тексту */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,1,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.3s}

/* ============ БІГУЧІ РЯДКИ ============ */
.mq{overflow:hidden;white-space:nowrap;position:relative;z-index:2}
.mq-in{display:inline-block;will-change:transform}
.mq-chunk{display:inline-block;padding-right:.5em}
.mq-cream{background:var(--panel);transform:rotate(-1.4deg) scale(1.02);
  padding:16px 0;margin:4vh 0;
  font-weight:800;font-size:clamp(16px,2.6vw,26px);letter-spacing:.18em;color:var(--red)}
.mq-dark{background:#0a0908;border-top:1px solid #262019;border-bottom:1px solid #262019;
  padding:14px 0;margin:6vh 0 0;
  font-weight:700;font-size:clamp(12px,1.8vw,16px);letter-spacing:.3em;color:var(--amber);
  text-shadow:0 0 9px rgba(240,161,60,.55)}

/* ============ СЕКЦІЇ-АКТИ ============ */
.sec{
  min-height:92vh;max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:6vw;align-items:center;
  padding:12vh 6vw;scroll-margin-top:70px;
}
.sec.rev .txt{order:2}
.sec.rev .gfx{order:1}
.kick{font-size:12px;letter-spacing:.3em;color:var(--acc,var(--amber));
  text-transform:uppercase;margin-bottom:26px}
.txt .dw{justify-content:start;margin-bottom:30px}
.body{font-size:15px;line-height:1.85;color:#d9d0b9;max-width:46ch}
.feats{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:12px}
.feats li{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.feats li::before{content:"";width:9px;height:9px;background:var(--acc,var(--red));flex:none;
  box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.gfx{display:flex;align-items:center;justify-content:center;min-height:340px}
.gfx canvas{display:block}
#ladder{width:min(180px,42vw);height:auto}
.skywrap{width:100%;height:440px;position:relative}
#sky{width:100%;height:100%}
.bulbwrap{display:flex;flex-direction:column;align-items:center;gap:18px}
#bulb{cursor:pointer;width:min(240px,60vw);height:auto}
#maze{width:min(320px,78vw);height:auto}
.hint{font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* ============ ПРОСТА ПРОЗА (підсторінки) ============ */
.page{max-width:780px;margin:0 auto;padding:5vh 6vw 12vh}
.page .body{max-width:none;margin:16px 0}
.ph{font-size:13px;letter-spacing:.3em;color:var(--acc,var(--amber));
  text-transform:uppercase;margin:46px 0 12px}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ============ КНОПКА ============ */
.btn{
  display:inline-block;margin-top:38px;
  background:var(--red);color:var(--panel);
  border:none;border-radius:12px;
  font-size:15px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  padding:18px 34px;
  box-shadow:0 7px 0 #8c2a1e;
  transition:transform .1s,box-shadow .1s,background .2s;
}
.btn:hover{transform:translateY(2px);box-shadow:0 5px 0 #8c2a1e;background:#ea5949}
.btn:active{transform:translateY(7px);box-shadow:0 0 0 #8c2a1e}

/* ============ CTA (головна) ============ */
.cta{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14vh 20px;text-align:center;scroll-margin-top:70px}
.cta .sub{max-width:44ch}

/* ============ КАРТКИ ПРОЄКТІВ ============ */
.cards-wrap{max-width:1120px;margin:0 auto;padding:6vh 6vw 14vh}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.card{
  background:#12100d;border:1px solid #262019;border-radius:16px;
  padding:28px 24px 22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .25s,border-color .25s,background .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--amber);background:#15120e}
.card .cdw{justify-content:start;min-height:34px}
.card p{font-size:12.5px;line-height:1.7;color:#c9c0a9;flex-grow:1}
.crow{display:flex;justify-content:space-between;align-items:center;margin-top:6px;
  font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.st{display:flex;align-items:center;gap:8px}
.go{color:var(--dim);transition:color .2s}
.card:hover .go{color:var(--amber)}
.led{width:8px;height:8px;border-radius:50%;flex:none}
.led.active{background:var(--amber);animation:ledp 1.8s ease-in-out infinite}
.led.wip{background:var(--red);box-shadow:0 0 5px rgba(225,75,60,.6)}
.led.paused{background:#4a443a}
@keyframes ledp{0%,100%{box-shadow:0 0 4px rgba(240,161,60,.7)}50%{box-shadow:0 0 11px rgba(240,161,60,1)}}
.empty{grid-column:1/-1;text-align:center;padding:8vh 0}
.et{font-size:16px;font-weight:800;letter-spacing:.3em;color:var(--ink);margin-bottom:14px}
.loading{grid-column:1/-1;text-align:center;color:var(--dim);letter-spacing:.3em;font-size:12px;padding:8vh 0}

/* ============ 404 ============ */
.err{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 20px 100px;text-align:center;gap:8px}

/* ============ ФУТЕР (движок впорскує сам) ============ */
footer{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px 26px 100px;
  font-size:11px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;
  border-top:1px solid #1d1913;
}
footer b{color:var(--amber);font-weight:700}
.clockwrap{display:flex;align-items:center;gap:14px}
#clock{display:block;image-rendering:pixelated}

/* ============ СВИНКА ============ */
#pig{position:fixed;bottom:12px;left:0;z-index:30;cursor:pointer;image-rendering:pixelated;
  will-change:transform}
#oink{
  position:fixed;z-index:31;bottom:0;left:0;
  background:var(--panel);color:var(--red);
  font-weight:800;font-size:13px;letter-spacing:.14em;
  padding:8px 14px;border-radius:10px;
  opacity:0;transform:translate(-50%,8px) scale(.7);
  transition:opacity .18s,transform .25s cubic-bezier(.2,1.7,.4,1);
  pointer-events:none;
}
#oink::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--panel);border-bottom:0}
#oink.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* ============ АДАПТИВ ============ */
@media (max-width:820px){
  .sec{grid-template-columns:1fr;gap:8vw;min-height:auto;padding:14vh 7vw}
  .sec.rev .txt{order:1}
  .sec.rev .gfx{order:2}
  .txt .dw{justify-content:center}
  .txt{text-align:center}
  .body{margin:0 auto}
  .feats{align-items:center}
  .sign{padding:58px 26px 42px}
  .sign.small{padding:48px 22px 38px}
  .tag{font-size:12px;letter-spacing:.26em}
  nav{gap:14px}
  nav a{font-size:11px}
  footer{justify-content:center;text-align:center}
  .skywrap{height:340px}
  .hero-lite{padding-top:130px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dw i,.rv,.sign{transition:none}
  .chev{animation:none}
  .led.active{animation:none}
}