/* DEUS · прототип №3 — дизайн-мова a1.mod.gov.ua (UAF Sans, чорне тло, фаска 50px, бренд-кнопка), кольори DEUS */
@font-face{font-family:"uaf-wide-semibold";src:url(fonts/UAFSans-WideSemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"uaf-wide-book";src:url(fonts/UAFSans-WideBook.ttf) format("truetype");font-display:swap}
@font-face{font-family:"uaf-wide-regular";src:url(fonts/UAFSans-WideRegular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"uaf-regular";src:url(fonts/UAFSans-Regular.ttf) format("truetype");font-display:swap}
@font-face{font-family:"uaf-book";src:url(fonts/UAFSans-Book.ttf) format("truetype");font-display:swap}
@font-face{font-family:"uaf-light";src:url(fonts/UAFSans-Light.ttf) format("truetype");font-display:swap}

:root{--brand:#f80000;--brand-text:#ff3b3b;--bg:#000;--card:#202020;--line:#373737;--line2:#383838;--mut:rgba(255,255,255,.7);--dim:#9d9d9d;--page-padding:4rem;--ink:#fff}
html{font-size:62.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"uaf-regular",Arial,sans-serif;font-size:2.2rem;line-height:1.2;letter-spacing:-.1rem;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:1rem 2rem;z-index:100}.skip:focus{left:1rem}

/* — nav — */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:8rem;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-padding);background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));transition:background .3s}
.nav.solid{background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav-logo{display:flex;align-items:center;gap:1.2rem;text-decoration:none}
.nav-logo img{height:4.4rem;width:auto}
.nav-logo b{font-family:"uaf-wide-semibold";font-size:2rem;letter-spacing:0;text-transform:uppercase}
.nav-links{display:flex;gap:0;align-items:center;height:100%}
.nav-links a{font-family:"uaf-book";font-size:1.6rem;letter-spacing:0;text-decoration:none;padding:0 2rem;height:100%;display:flex;align-items:center;color:#fff}
.nav-links a:hover,.nav-links a.on{color:var(--brand-text)}
.nav-right{font-family:"uaf-wide-semibold";font-size:2.6rem;letter-spacing:0;display:flex;align-items:center;gap:1rem}
.nav-right img{height:3.2rem}
.burger{display:none;background:none;border:1px solid var(--line);color:#fff;width:4.8rem;height:4.8rem;font-size:2.2rem;cursor:pointer}

/* — hero (A1: чорне тло, сяйво, мозаїка з блюр-плиток) — */
.hero{position:relative;min-height:clamp(62rem,100svh,96rem);max-height:100rem;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:clip;cursor:default}
.hero-visual{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center}
.hero-visual .ring{position:absolute;width:140vmin;height:140vmin;top:50%;left:50%;transform:translate(-50%,-38%);opacity:.9;pointer-events:none}
.hero-visual .art{position:absolute;inset:0;background:url(img/banner-masks.jpg) center 35%/cover no-repeat;opacity:.55;mix-blend-mode:screen}
.mosaic{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;pointer-events:none}
.mosaic i{display:block;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:rgba(0,0,0,.05);transition:backdrop-filter .4s;pointer-events:auto}
.mosaic i:nth-child(3n){-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mosaic i:nth-child(5n){-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);background:rgba(0,0,0,.12)}
.mosaic i:hover{-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px)}
.hero-top{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4rem;padding:12rem var(--page-padding) 6rem;pointer-events:none}
.h1{font-family:"uaf-wide-semibold";font-weight:400;text-transform:uppercase;letter-spacing:-.4rem;font-size:clamp(5rem,9vw,12rem);line-height:.95;margin:0;text-wrap:balance}
.hero-desc{font-family:"uaf-regular";font-size:2.6rem;max-width:52rem;text-shadow:0 0 25px rgba(0,0,0,.55);color:#fff}
.hero-desc span{display:block}
.hero-bottom{position:relative;z-index:2;text-align:center;padding:0 var(--page-padding) 10rem;display:flex;flex-direction:column;align-items:center;gap:3rem;pointer-events:none}
.hero-bottom .kicker{font-size:2.6rem;color:#fff}
.h2{font-family:"uaf-wide-semibold";font-weight:400;text-transform:uppercase;letter-spacing:-.2rem;font-size:6rem;line-height:1;margin:0;text-wrap:balance}
.h2.hero-h2{font-size:5rem;max-width:110rem}
.h2.brand{color:var(--brand-text)}
.h3{font-family:"uaf-wide-book";font-weight:400;font-size:2.8rem;letter-spacing:-.05rem;margin:0;text-transform:uppercase;line-height:1.2}

/* — page header for inner pages — */
.phead{position:relative;padding:16rem var(--page-padding) 8rem;text-align:center;overflow:clip;min-height:clamp(40rem,50svh,56rem);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3rem}
.phead .ring{position:absolute;width:120vmin;height:120vmin;left:50%;top:50%;transform:translate(-50%,-42%);opacity:.7;z-index:0;pointer-events:none}
.phead .art{position:absolute;inset:0;background:var(--art) center 30%/cover no-repeat;opacity:.5;mix-blend-mode:screen;z-index:0}
.phead>*{position:relative;z-index:1}
.phead .sub{font-size:2.6rem;color:var(--mut);max-width:80rem}
.phead .sub b{color:var(--brand-text);font-weight:400}
.phead .avatar{width:16rem;height:16rem;border-radius:50%;object-fit:cover;border:2px solid var(--line2)}
.phead .avatars{display:flex;gap:2rem}

/* — sections — */
.section{padding:8rem var(--page-padding);position:relative}
.section.tight{padding-top:4rem}
.section .h2{margin-bottom:4rem}
.center{text-align:center}
.mut{color:var(--mut)}
.lead{color:var(--mut);max-width:84rem;margin:2rem auto 0;text-align:center}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}

/* картки напрямків (A1 dir-card / workflow-card) */
.card{background:var(--card);display:flex;flex-direction:column;gap:2rem;padding:2.6rem 3rem 3rem;min-height:36rem;font-size:2.8rem}
.card.bordered{background:#000;border:1px solid var(--line)}
.card .num{font-family:"uaf-book";font-size:1.8rem;letter-spacing:0;color:rgba(255,255,255,.5);margin-bottom:auto}
.card .descr{color:var(--mut);font-size:2.2rem}
.card .h3{margin-top:auto}

/* медіа-картка: картинка + підпис + кнопка (структура Google-сайту) */
.mcard{border:1px solid var(--line);background:#000;display:flex;flex-direction:column}
.mcard .pic{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111}
.mcard .pic.wide{aspect-ratio:16/9}
.mcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mcard:hover .pic img{transform:scale(1.03)}
.mcard .body{padding:2.4rem 2.6rem 2.6rem;display:flex;flex-direction:column;gap:1.6rem;flex:1}
.mcard .num{font-family:"uaf-book";font-size:1.6rem;letter-spacing:0;color:var(--dim)}
.mcard .h3{color:var(--brand-text)}
.mcard p{margin:0;color:var(--mut);font-size:2rem;flex:1}
.mcard .btn{margin-top:auto}

/* кнопка A1 */
.btn{display:flex;align-items:center;justify-content:center;background:var(--brand);color:#000;text-decoration:none;font-family:"uaf-wide-book";font-size:2.2rem;text-transform:uppercase;letter-spacing:-.08rem;height:6.4rem;padding:0 3rem;border:0;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#fff}
.btn.ghost{background:transparent;color:#fff;border:1px solid var(--line2)}
.btn.ghost:hover{border-color:#fff}
.btn.big{height:8.4rem;font-size:2.4rem}
.btn-row{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}

/* brut-card — рамка з фаскою (A1 positions) */
.brut{clip-path:polygon(50px 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%,0 50px);background:var(--line);padding:3px;width:100%}
.brut-in{clip-path:polygon(48px 0,calc(100% - 48px) 0,100% 48px,100% 100%,0 100%,0 48px);background:#000;padding:6rem 4rem}

/* соцмережі */
.soc{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;padding:3rem 0 0}
.soc a{display:block;width:4rem;height:4rem;border-radius:50%;overflow:hidden;transition:transform .2s}
.soc a:hover{transform:translateY(-3px)}
.soc img{width:100%;height:100%}
.soc.left{justify-content:flex-start;padding-top:1.6rem}

/* відео (клік → iframe youtube-nocookie) */
.yt{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt::after{content:"";position:absolute;left:50%;top:50%;width:8.8rem;height:6.2rem;transform:translate(-50%,-50%);background:var(--brand);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.yt::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:2.4rem solid #000;border-top:1.4rem solid transparent;border-bottom:1.4rem solid transparent;z-index:2}
.yt:hover::after{background:#fff}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.on::after,.yt.on::before{display:none}

/* список консультацій (AI-інструктор) */
.rows{display:flex;flex-direction:column;gap:1rem}
.row{display:grid;grid-template-columns:8rem 1fr auto;align-items:center;gap:2.4rem;border:1px solid var(--line);padding:1.6rem 2.4rem;background:#000}
.row img{width:8rem;height:8rem;border-radius:50%;object-fit:cover;border:2px solid var(--line2)}
.row .h3{text-transform:none;font-family:"uaf-regular";font-size:2.6rem}
.row .btn{height:5.4rem;font-size:1.8rem}

/* команда */
.team{display:grid;grid-template-columns:1fr;gap:1rem}
.member{display:grid;grid-template-columns:26rem 1fr;gap:4rem;align-items:center;border:1px solid var(--line);padding:3rem}
.member>img{width:26rem;height:26rem;border-radius:50%;object-fit:cover;border:2px solid var(--line2)}
.member p{margin:0;font-size:2.4rem}
.member .role{color:var(--brand-text)}

/* текстові блоки */
.prose{max-width:84rem;font-size:2.2rem;line-height:1.35;color:var(--mut)}
.prose p{margin:0 0 1.6rem}
.prose b{color:#fff;font-weight:400}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.split .h2{font-size:4.4rem}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.gallery img{border:1px solid var(--line);width:100%}
.gallery .full{grid-column:1/-1}

/* форма доступу (пароль / верифікація) */
.access{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
.access .cell{border:1px solid var(--line);padding:3rem;display:flex;flex-direction:column;gap:2rem}
.access .cell .h3{color:var(--brand-text)}
.access input{background:#000;border:1px solid var(--line2);color:#fff;font:inherit;font-size:2.2rem;padding:1.6rem 2rem;width:100%}
.access .btn{height:6rem}

/* footer A1 (4 колонки) */
.footer{border-top:1px solid var(--line);padding:6rem var(--page-padding) 6.8rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.6rem;font-size:1.8rem}
.footer .col{display:flex;flex-direction:column;gap:1.2rem}
.footer .lbl{font-family:"uaf-book";text-transform:uppercase;letter-spacing:.06em;font-size:1.3rem;color:var(--dim)}
.footer a{text-decoration:none;color:#fff}.footer a:hover{color:var(--brand-text)}
.footer .copy{grid-column:1/-1;color:var(--dim);font-size:1.5rem;margin-top:2rem}
.footer .soc{padding:0;justify-content:flex-start}.footer .soc a{width:3.2rem;height:3.2rem}

/* reveal */
.rv{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}html.js .rv.in{opacity:1;transform:none}}

@media(max-width:991px){
 :root{--page-padding:2.4rem}
 .nav{height:7rem}
 .nav-links{position:fixed;inset:7rem 0 auto 0;background:#000;flex-direction:column;align-items:stretch;height:auto;display:none;border-bottom:1px solid var(--line);padding:2rem 0}
 .nav-links.open{display:flex}
 .nav-links a{font-family:"uaf-wide-semibold";font-size:2.4rem;text-transform:uppercase;height:7rem;border-top:2px solid rgba(255,255,255,.1);padding:0 var(--page-padding)}
 .burger{display:block}
 .nav-right{display:none}
 .h2{font-size:4.4rem}.h2.hero-h2{font-size:4rem}
 .grid,.grid.g4{grid-template-columns:1fr 1fr}
 .split,.access{grid-template-columns:1fr}
 .footer{grid-template-columns:1fr 1fr}
 .mosaic{grid-template-columns:repeat(5,1fr)}
 .member{grid-template-columns:18rem 1fr;gap:2.4rem}.member>img{width:18rem;height:18rem}
}
@media(max-width:600px){
 :root{--page-padding:2rem}
 body{font-size:2rem}
 .h1{letter-spacing:-.3rem}.h2{font-size:3rem;line-height:1.1}.h2.hero-h2{font-size:3rem}
 .hero-desc,.hero-bottom .kicker{font-size:2rem;line-height:1.4}
 .grid,.grid.g2,.grid.g4,.gallery{grid-template-columns:1fr}
 .footer{grid-template-columns:1fr;gap:4rem}
 .mosaic{grid-template-columns:repeat(3,1fr)}
 .card{min-height:0;font-size:2.2rem}
 .row{grid-template-columns:6rem 1fr}.row .btn{grid-column:1/-1;font-size:1.6rem;white-space:nowrap}.row img{width:6rem;height:6rem}
 .member{grid-template-columns:1fr;text-align:center;justify-items:center}
 .brut{clip-path:polygon(0 0,calc(100% - 50px) 0,100% 50px,100% 100%,0 100%)}.brut-in{clip-path:polygon(0 0,calc(100% - 51px) 0,100% 51px,100% 100%,0 100%);padding:4rem 2rem}
 .btn{font-size:1.9rem}
}
@media print{.nav,.mosaic,.ring{display:none}body{background:#fff;color:#000}}