/* Центр подготовки операторов БПЛА — центр-бпла.рф
   Тёмная «полевая» гамма по макету: почти чёрный графит, оливково-золотой
   акцент, кремовый текст. Montserrat в заголовках, Manrope в тексте. */
:root{
  --bg:#0E100E;
  --bg2:#141713;
  --panel:#181B17;
  --panel2:#1E221C;
  --line:#2A2F27;
  --text:#ECE8DC;
  --muted:#A5A291;
  --dim:#7C7A6C;
  --gold:#B8A36A;
  --gold-d:#9C8850;
  --gold-soft:rgba(184,163,106,.14);
  --on-gold:#14150F;
  --radius:10px;
  --gutter:22px;
  --head:"Montserrat","Arial Black",Arial,sans-serif;
  --body:"Manrope",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{overflow-x:clip;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--body); padding-inline:var(--gutter);}
a{color:var(--gold);}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
::selection{background:var(--gold); color:var(--on-gold);}
.wrap{max-width:1180px; margin-inline:auto;}
.eyebrow{font:500 11px/1.4 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--gold);}
h1,h2,h3{font-family:var(--head); margin:0; text-wrap:balance;}
h2{font-weight:800; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08; text-transform:uppercase; letter-spacing:-.005em; margin-top:12px;}
.lead{color:var(--muted); max-width:38em;}

/* ── кнопки ── */
.btn{display:inline-flex; align-items:center; gap:14px; font:700 13px/1 var(--body); letter-spacing:.12em; text-transform:uppercase;
  padding:17px 26px; border-radius:6px; border:1px solid var(--gold); background:var(--gold); color:var(--on-gold); text-decoration:none; cursor:pointer;
  transition:background .15s, border-color .15s;}
.btn:hover{background:#CBB67C; border-color:#CBB67C;}
.btn .arr{font-size:18px; line-height:0;}
.btn-sm{padding:12px 18px; font-size:11.5px;}

/* ── шапка ── */
.head{position:sticky; top:0; z-index:30; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
  background:rgba(14,16,14,.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.head-in{max-width:1180px; margin-inline:auto; min-height:76px; display:flex; align-items:center; gap:28px;}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text);}
.logo svg{width:42px; height:42px; flex:none;}
.logo span{font:800 11.5px/1.25 var(--head); letter-spacing:.06em; text-transform:uppercase;}
.nav{display:flex; gap:28px; margin-left:auto;}
.nav a{color:var(--muted); text-decoration:none; font-size:13.5px;}
.nav a:hover{color:var(--text);}
.head .btn{margin-left:8px;}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--text); border-radius:6px; padding:8px 12px; font:700 13px var(--body); cursor:pointer;}

/* ── фото-слоты: пока нет снимков — графика в той же гамме ── */
.ph{position:relative; overflow:hidden; background:
   radial-gradient(120% 90% at 70% 30%, rgba(184,163,106,.16), transparent 60%),
   linear-gradient(160deg,#20251E,#121511);}
.ph::before{content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(184,163,106,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(184,163,106,.14) 1px,transparent 1px);
  background-size:38px 38px; mask-image:radial-gradient(circle at 60% 40%,#000,transparent 75%);}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ph .ph-icon{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:64px; height:64px; color:var(--gold); opacity:.55;}
.ph .ph-note{position:absolute; left:16px; bottom:14px; font:500 10px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--dim);}

/* ── первый экран ── */
.hero{position:relative; padding-block:64px 64px; isolation:isolate;}
.hero-art{position:absolute; z-index:-1; top:0; bottom:0; right:calc(-1 * var(--gutter)); width:62%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 38%); mask-image:linear-gradient(to right,transparent,#000 38%);}
.hero-art svg{width:100%; height:100%; display:block;}
.hero h1{font-weight:900; font-size:clamp(3rem,8vw,6.2rem); line-height:.95; text-transform:uppercase; letter-spacing:-.02em; margin:22px 0 22px;}
.hero h1 span{display:block; color:var(--gold);}
.hero .sub{font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.4; max-width:21em; margin:0 0 34px;}
.feats{display:flex; flex-wrap:wrap; gap:18px 28px; margin-bottom:40px; max-width:780px;}
.feat{display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.35; color:var(--muted); max-width:160px;}
.feat i{flex:none; width:40px; height:40px; border:1.5px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold);}
.feat i svg{width:20px; height:20px;}
.hero-tags{position:absolute; right:0; bottom:64px; text-align:right; font:500 10.5px/2 var(--mono); letter-spacing:.24em; color:var(--muted); text-transform:uppercase;}

/* ── разделы ── */
section{padding-block:72px; border-top:1px solid var(--line);}
.sec-top{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:20px 48px; align-items:end; margin-bottom:34px;}
.facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto; gap:0 14px; margin-top:34px;}
.fact{display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0;}
.fact{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;}
.fact b{display:block; font:800 clamp(1.6rem,3vw,2.2rem)/1.05 var(--head); color:var(--gold);}
.fact span{display:block; margin-top:8px; align-self:start; font-size:13px; color:var(--muted); line-height:1.45;}

/* Карточки в ряд выровнены построчно (subgrid): место под фото, значок,
   заголовок и описание у всех четырёх на одних уровнях, даже если заголовок
   у одной карточки в две строки, а у соседней — в одну. */
.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,auto); gap:0 16px;}
.card{position:relative; display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); margin-bottom:16px;}
.card .ph{position:absolute; inset:0;}
.card .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(14,16,14,.96) 38%,rgba(14,16,14,.25) 78%,transparent);}
.card > :not(.ph){position:relative; margin-inline:22px;}
.card-sp{min-height:150px;}
.card .ph .ph-icon{top:32%;}
.card i{display:grid; place-items:center; width:40px; height:40px; border:1.5px solid var(--gold); border-radius:50%; color:var(--gold); margin-bottom:14px; align-self:end;}
.card i svg{width:20px; height:20px;}
.card h3{font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.01em; line-height:1.25; align-self:start;}
.card p{margin:8px 22px 22px; font-size:13.5px; color:var(--muted); line-height:1.5; align-self:start;}
@supports not (grid-template-rows:subgrid){ .card{display:flex; flex-direction:column; justify-content:flex-end; min-height:300px;} .card-sp{flex:1;} }

/* программа */
.program{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px 56px; align-items:center;}
.days{display:inline-flex; align-items:baseline; gap:10px; margin-top:22px; color:var(--muted);}
.days b{font:900 3.4rem/1 var(--head); color:var(--gold);}
ol.steps{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
ol.steps li{display:grid; grid-template-columns:38px minmax(0,1fr); gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;}
ol.steps .n{width:34px; height:34px; border-radius:50%; background:var(--gold-soft); border:1px solid var(--gold-d); color:var(--gold); display:grid; place-items:center; font:700 12px var(--mono);}
ol.steps b{display:block; font-weight:700;}
ol.steps span{display:block; color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:2px;}

/* диплом */
.diploma{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px 48px; align-items:center;}
.diploma h2{font-size:clamp(1.5rem,2.5vw,2.15rem); overflow-wrap:anywhere;}
.diploma-art svg{width:100%; max-width:420px; height:auto; display:block; margin-inline:auto; filter:drop-shadow(0 24px 50px rgba(0,0,0,.55));}
.dip-perks{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.dip-perks li{display:flex; flex-direction:column; gap:18px; padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); position:relative; overflow:hidden;}
.dip-perks li::before{content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--gold),transparent 70%);}
.dip-perks i{flex:none; width:48px; height:48px; border:1.5px solid var(--gold); border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; color:var(--gold);}
.dip-perks i svg{width:22px; height:22px;}
.dip-perks b{font:800 15px/1.3 var(--head); text-transform:uppercase; letter-spacing:.01em; text-wrap:balance;}
.checks{list-style:none; margin:0; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:grid; gap:18px;}
.checks li{display:flex; gap:14px; align-items:center; font-size:14px; line-height:1.35;}
.checks i{flex:none; width:38px; height:38px; border:1.5px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold);}
.checks i svg{width:18px; height:18px;}

/* спецконтракт после обучения */
.contract{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px 32px; align-items:center;
  padding:30px 32px; border:1px solid var(--gold-d); border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(184,163,106,.12),rgba(184,163,106,.02) 60%), var(--panel);}
.contract h2{font-size:clamp(1.4rem,2.6vw,2rem);}
.contract-icon{width:76px; height:76px; border:1.5px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold);}
.contract-icon svg{width:38px; height:38px;}
@media (max-width:860px){ .contract{grid-template-columns:1fr; padding:24px;} .contract-icon{width:60px; height:60px;} .contract-icon svg{width:30px; height:30px;} }

/* галерея */
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:220px; gap:14px;}
.gallery .ph{border:1px solid var(--line); border-radius:var(--radius);}
.gallery .wide{grid-column:span 2;}

/* о нас пишут */
.media{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.media{grid-template-rows:repeat(3,auto); row-gap:0;}
.media a{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:10px; margin-bottom:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; text-decoration:none; color:var(--text);}
.media a:hover{border-color:var(--gold-d);}
.media .src{font:500 10.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);}
.media .t{font-weight:700; line-height:1.4;}
.media .d{font-size:12.5px; color:var(--dim);}
.empty{background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); padding:26px; color:var(--muted); font-size:14px;}

/* заявка */
.apply{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 56px; align-items:start;}
.apply-perks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:26px;}
.perk{display:flex; gap:12px; align-items:center; font-size:13.5px; color:var(--muted); line-height:1.35;}
.perk i{flex:none; color:var(--gold);}
.perk i svg{width:26px; height:26px;}
form.lead-form{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:grid; gap:14px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px;}
.field input{width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:6px; color:var(--text); font:16px var(--body); padding:13px 14px;}
.field input:focus{outline:1px solid var(--gold); border-color:var(--gold);}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--dim); line-height:1.5;}
.consent input{margin-top:3px; accent-color:var(--gold); width:16px; height:16px; flex:none;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-msg{font-size:14px; min-height:1.2em;}
.form-msg.err{color:#E38D7A;}
.form-msg.ok{color:#A8C489;}
form.lead-form .btn{justify-content:center;}

/* подвал */
footer{border-top:1px solid var(--line); padding-block:30px 40px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; align-items:center; color:var(--dim); font-size:12.5px;}
footer a{color:var(--muted);}

/* ── адаптив ── */
@media (max-width:1060px){
  .nav{display:none;} .burger{display:block;} .head .btn{display:none;}
  .head.open .nav{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:76px; background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gutter) 16px; gap:0;}
  .head.open .nav a{padding:12px 0; border-bottom:1px solid var(--line);}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto;}
  .diploma{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:860px){
  .hero-art{width:100%; opacity:.35;}
  .hero-tags{display:none;}
  .sec-top,.program,.apply{grid-template-columns:1fr;}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; grid-auto-rows:auto; row-gap:14px;}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:170px;}
  .media{grid-template-columns:1fr;}
  .diploma{grid-template-columns:1fr;}
  .dip-perks{grid-template-columns:1fr; margin-top:28px;}
  .dip-perks li{flex-direction:row; align-items:center; padding:18px 20px;}
}
@media (max-width:560px){
  :root{--gutter:16px;}
  .hero{padding-block:40px 48px;}
  section{padding-block:54px;}
  .cards{grid-template-columns:1fr;}
  .card-sp{min-height:110px;}
  .diploma{grid-template-columns:1fr;}
  .row2,.apply-perks{grid-template-columns:1fr;}
  .logo span{font-size:10.5px;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important;}}