/* ============================================================
   lab.dnl.net.ua — космічна лабораторія
   Палітра: глибокий космос + акцент кожного розділу (--accent)
   Шрифти: Syne (дисплей), Spline Sans (текст), JetBrains Mono (приладні написи)
   ============================================================ */

:root{
  --bg-0:#05070f;
  --bg-1:#0a0e1d;
  --bg-2:#10162c;
  --ink:#e8ecf7;
  --ink-dim:#9aa6c4;
  --ink-faint:#5b6788;
  --line:rgba(150,170,220,.14);
  --accent:#36d1dc;            /* перевизначається на кожній сторінці */
  --card-bg:rgba(20,27,50,.55);
  --radius:18px;
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Spline Sans", system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(54,209,220,.10), transparent 60%),
    radial-gradient(900px 700px at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  line-height:1.55;
}

.mono{ font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:400; }
code{ font-family:"JetBrains Mono", monospace; font-size:.86em;
  background:rgba(255,255,255,.06); padding:.08em .4em; border-radius:6px;
  color:var(--accent); }
a{ color:inherit; text-decoration:none; }

/* =========================  КОСМІЧНИЙ ФОН  ========================= */
.cosmos{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  perspective:1000px;
}
.nebula{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.nebula--a{ width:60vw; height:60vw; left:-10vw; top:-15vw;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 38%,transparent), transparent 70%); }
.nebula--b{ width:48vw; height:48vw; right:-12vw; bottom:-18vw;
  background:radial-gradient(circle, rgba(123,97,255,.30), transparent 70%); }

.stars{ position:absolute; top:0; left:0; width:2px; height:2px; border-radius:50%;
  background:#fff; will-change:transform; }
.stars--far{ color:rgba(255,255,255,.55); opacity:.7; }
.stars--near{ color:#fff; width:2.4px; height:2.4px; opacity:.95; }

.layer{ position:absolute; inset:0; will-change:transform; }

.ico{ position:absolute; display:grid; place-items:center;
  color:var(--ink); transform:translate(-50%,-50%);
  will-change:transform; }
.ico svg{ width:100%; height:100%; }
.ico--dim{    color:rgba(168,182,214,.30); }
.ico--mid{    color:rgba(190,205,238,.42); }
.ico--bright{ color:color-mix(in srgb, var(--accent) 60%, #d4ddf7); opacity:.7; }
.ico--fore{   color:color-mix(in srgb, var(--accent) 72%, #fff); opacity:.5;
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)); }

@keyframes drift{
  0%   { transform:translate(-50%,-50%) translate(0,0)      rotate(0deg); }
  30%  { transform:translate(-50%,-50%) translate(16px,-46px) rotate(var(--rot)); }
  65%  { transform:translate(-50%,-50%) translate(-14px,22px) rotate(calc(var(--rot) * -0.5)); }
  100% { transform:translate(-50%,-50%) translate(0,0)      rotate(0deg); }
}

.grid-overlay{
  position:absolute; inset:0; opacity:.35;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 10%, transparent 75%);
          mask-image:radial-gradient(circle at 50% 35%, #000 10%, transparent 75%);
}
.vignette{ position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 0%, transparent 50%, var(--bg-0) 100%); }

/* =========================  ШАПКА  ========================= */
.lab-nav{
  position:relative; z-index:5; max-width:var(--maxw); margin:0 auto;
  padding:26px clamp(18px,4vw,40px); display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; font-family:"Syne"; font-weight:800;
  font-size:1.15rem; letter-spacing:.5px; }
.brand-mark{ width:34px; height:34px; display:grid; place-items:center; color:var(--accent);
  border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); }
.brand-mark svg{ width:20px; height:20px; }
.brand .dim{ color:var(--ink-dim); font-weight:600; }
.nav-meta,.nav-back{ color:var(--ink-dim); font-size:.82rem; }
.nav-back:hover{ color:var(--accent); }

/* =========================  КОНТЕНТ  ========================= */
.wrap{ position:relative; z-index:5; max-width:var(--maxw);
  margin:0 auto; padding:0 clamp(18px,4vw,40px) 80px; }

.hero{ padding:clamp(40px,8vh,90px) 0 clamp(36px,6vh,70px); max-width:760px; }
.kicker{ color:var(--accent); letter-spacing:.12em; text-transform:uppercase;
  font-size:.78rem; margin:0 0 18px; }
.hero-title{ font-family:"Syne"; font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:1.02; margin:0 0 22px; }
.hero-title em{ font-style:normal; color:var(--accent);
  text-shadow:0 0 36px color-mix(in srgb,var(--accent) 45%,transparent); }
.hero-title--sm{ font-size:clamp(2rem,5vw,3.2rem); }
.hero-sub{ color:var(--ink-dim); font-size:clamp(1rem,1.6vw,1.18rem); max-width:60ch;
  margin:0 0 30px; }
.hero-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 24px;
  border-radius:999px; font-weight:600; font-size:.96rem; transition:.25s; }
.btn--primary{ background:var(--accent); color:#06121a;
  box-shadow:0 8px 30px color-mix(in srgb,var(--accent) 35%,transparent); }
.btn--primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.scan-badge{ color:var(--ink-dim); font-size:.8rem; }
.scan-badge::first-letter{ color:#4ade80; }

.section-h{ color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase;
  font-size:.8rem; margin:0 0 22px; }

/* =========================  КАРТКИ  ========================= */
.cards{ display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(265px,1fr)); }

.card{
  position:relative; padding:24px; border-radius:var(--radius);
  background:var(--card-bg); border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.1);
  display:flex; flex-direction:column; gap:14px; min-height:210px;
  overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.card::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(380px 220px at var(--mx,80%) var(--my,0%),
    color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%);
  opacity:0; transition:opacity .35s; }
.card::after{ content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background:var(--accent); opacity:.0; transition:opacity .3s; }
.card:hover{ transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 24px 60px -20px color-mix(in srgb,var(--accent) 45%,transparent); }
.card:hover::before{ opacity:1; }
.card:hover::after{ opacity:.9; }

.card-top{ display:flex; align-items:center; justify-content:space-between; }
.card-ico{ width:46px; height:46px; display:grid; place-items:center; color:var(--accent);
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04); }
.card-ico svg{ width:26px; height:26px; }
.card-tag{ font-size:.72rem; color:var(--ink-dim); letter-spacing:.12em;
  border:1px solid var(--line); padding:3px 9px; border-radius:999px; }
.card-title{ font-family:"Syne"; font-weight:700; font-size:1.35rem; margin:2px 0 0;
  letter-spacing:-.01em; }
.card-blurb{ color:var(--ink-dim); font-size:.93rem; margin:0; flex:1; }
.card-foot{ display:flex; align-items:baseline; gap:8px; margin-top:6px;
  border-top:1px dashed var(--line); padding-top:14px; }
.count{ font-family:"Syne"; font-weight:800; font-size:1.5rem; color:var(--accent); line-height:1; }
.count-label{ font-size:.76rem; color:var(--ink-dim); }
.arrow{ margin-left:auto; color:var(--accent); font-size:1.2rem; transition:transform .3s; }
.card:hover .arrow{ transform:translateX(5px); }

.card--trainer{ min-height:190px; }

/* =========================  РОЗДІЛ  ========================= */
.hero--disc .disc-head{ display:flex; gap:22px; align-items:flex-start; margin:6px 0 24px; }
.disc-ico{ flex:none; width:74px; height:74px; display:grid; place-items:center;
  color:var(--accent); border:1px solid var(--line); border-radius:18px;
  background:rgba(255,255,255,.04);
  box-shadow:0 0 50px -10px color-mix(in srgb,var(--accent) 50%,transparent); }
.disc-ico svg{ width:40px; height:40px; }

.empty{ text-align:center; padding:70px 20px; border:1px dashed var(--line);
  border-radius:var(--radius); background:rgba(255,255,255,.02); }
.empty-ico{ display:inline-grid; place-items:center; width:64px; height:64px;
  color:var(--accent); opacity:.6; margin-bottom:14px; }
.empty-ico svg{ width:40px; height:40px; }
.empty h3{ font-family:"Syne"; margin:0 0 8px; font-size:1.4rem; }
.empty p{ color:var(--ink-dim); }

/* =========================  ПІДВАЛ  ========================= */
.lab-foot{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto;
  padding:30px clamp(18px,4vw,40px) 50px; display:flex; gap:18px;
  justify-content:space-between; flex-wrap:wrap; color:var(--ink-dim);
  font-size:.8rem; border-top:1px solid var(--line); }

/* =========================  ПОЯВА ПРИ СКРОЛІ  ========================= */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.is-in{ opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion:reduce){
  .ico{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

@media (max-width:560px){
  .hero--disc .disc-head{ flex-direction:column; gap:14px; }
  .nav-meta{ display:none; }
}