/* ═══ DROPLINKSY — сторінка ABOUT ════════════════════════════════
   Доповнює matrix.css: змінні, шрифт, логотип і CRT-шари беруться звідти.
   ═══════════════════════════════════════════════════════════════ */

body.page{
  overflow-x:hidden;
  min-height:100vh;
}

/* фоновий дощ — тьмяно, щоб не заважав читати */
body.page #noise{
  display:block;position:fixed;inset:0;width:100%;height:100%;
  z-index:0;opacity:.16;
}

/* шапка стає звичайною, у потоці документа */
body.page .head{
  position:static;background:none;
  padding:clamp(46px,9vh,96px) 20px clamp(6px,1.5vh,18px);
  pointer-events:auto;
}
body.page .logolink{display:block}
body.page .logo{cursor:pointer}

/* ── контент ────────────────────────────────────────────────────── */
.wrap{
  position:relative;z-index:5;
  max-width:760px;margin:0 auto;
  padding:clamp(34px,6vh,70px) clamp(18px,4vw,32px) clamp(50px,9vh,110px);
}

.sec{margin:0 0 clamp(38px,6vh,64px)}
.sec h2{
  margin:0 0 16px;
  font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grn);text-shadow:0 0 12px rgba(0,255,156,.55);
}
.sec h2::before{content:"// ";color:var(--grn-dim)}
.sec p{
  margin:0 0 14px;
  color:var(--grn-mid);font-size:14px;line-height:1.85;
  max-width:66ch;
}

/* ── перший абзац секції — трохи більший ────────────────────────── */
.sec p.opening{
  font-size:16px;line-height:1.75;color:var(--white);
  text-shadow:0 0 14px rgba(0,255,156,.22);
}

/* ── пронумеровані блоки «what we do» ───────────────────────────── */
.items{display:grid;gap:1px;background:rgba(0,255,156,.14);
  border:1px solid rgba(0,255,156,.14)}

.item{
  position:relative;
  background:rgba(1,10,6,.86);
  padding:26px clamp(18px,3vw,30px) 28px clamp(52px,7vw,74px);
  transition:background .2s;
}
.item:hover{background:rgba(0,255,156,.045)}

.num{
  position:absolute;left:clamp(16px,2.4vw,26px);top:26px;
  font-size:11px;letter-spacing:.12em;
  color:var(--grn-dim);
}
.item:hover .num{color:var(--grn);text-shadow:0 0 12px rgba(0,255,156,.7)}

.item h3{
  margin:0 0 12px;
  font-size:13.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);text-shadow:0 0 10px rgba(0,255,156,.55);
}
.item p{margin:0 0 12px;color:var(--txt);font-size:14px;line-height:1.8;max-width:62ch}
.item p:last-child{margin-bottom:0}

/* короткий акцентний рядок усередині блоку */
.note{
  border-left:2px solid var(--grn);
  padding-left:14px;
  color:var(--white) !important;
  text-shadow:0 0 12px rgba(0,255,156,.3);
}

/* ── контакт: велика кнопка з поштою ────────────────────────────── */
.mailbtn{margin:24px 0 0}
.mailbtn a{
  display:inline-block;padding:14px 30px;
  background:rgba(0,255,156,.1);
  border:1px solid var(--grn);
  color:var(--white);
  font-size:14px;letter-spacing:.08em;
  text-shadow:0 0 8px rgba(0,255,156,.7);
  transition:background .15s,box-shadow .15s;
}
.mailbtn a:hover{
  background:rgba(0,255,156,.22);
  box-shadow:0 0 30px rgba(0,255,156,.45);
}

.back{
  margin:0;padding-top:8px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.back a{color:var(--grn-dim)}
.back a:hover{color:var(--grn);text-shadow:0 0 12px rgba(0,255,156,.6)}

/* ── читабельність: на сторінці з текстом CRT-шари мʼякші ───────── */
body.page{ --txt:#8bf0c9; }
body.page .vignette{
  background:radial-gradient(ellipse at 50% 34%,
    transparent 58%,rgba(0,0,0,.45) 90%,rgba(0,0,0,.75) 100%);
}
body.page .scanlines{opacity:.45}
body.page::after{display:none}          /* без флікеру трубки */

.sec p{color:var(--txt)}
.sec p{font-size:14.5px}