/* bridge — мостовые пролёты. namespace .br */

:root{
  --river:#0e1620;
  --panel:#17212d;
  --cable:#8fb3d9;
  --signal:#f4761f;
  --concrete:#e8eef4;
  --cable-dim:rgba(143,179,217,.34);
  --cable-faint:rgba(143,179,217,.16);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--river);
  color:var(--concrete);
}

.br{
  font-family:'Rubik',-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.68;
  color:var(--concrete);
  background:
    radial-gradient(1100px 420px at 50% -80px, rgba(143,179,217,.10), transparent 70%),
    linear-gradient(180deg,#0e1620 0%,#101a25 55%,#0e1620 100%);
  overflow-x:hidden;
}

.br h1,.br h2{
  font-family:'Cormorant Unicase','Cormorant Garamond','Times New Roman',serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.015em;
  line-height:1.16;
  margin:0;
  color:var(--concrete);
}
.br h1{font-size:clamp(23px,5.6vw,44px)}
.br h2{font-size:clamp(18px,3.9vw,30px)}
.br h3{
  font-family:'Rubik',-apple-system,'Segoe UI',Arial,sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.4;
  margin:0 0 6px;
  color:var(--concrete);
}
.br p{margin:0 0 14px}
.br a{color:var(--cable)}
.br a:hover{color:var(--signal)}

.brWrap{max-width:1140px;margin:0 auto;padding:0 16px}

/* ── шапка ───────────────────────────────────────────── */
.brTop{
  border-bottom:1px solid var(--cable-faint);
  background:rgba(14,22,32,.92);
}
.brTopIn{
  max-width:1140px;margin:0 auto;padding:11px 16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.brMark{display:flex;align-items:center;gap:9px;text-decoration:none}
.brMark svg{display:block;flex:0 0 auto}
.brWord{
  font-family:'Cormorant Unicase','Cormorant Garamond',serif;
  font-weight:700;font-size:21px;letter-spacing:.09em;
  color:var(--concrete);text-transform:uppercase;line-height:1;
}
.brTopMeta{
  margin-left:auto;font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--cable);
}

/* ── кнопки ──────────────────────────────────────────── */
.br a.brGo{
  display:inline-block;text-decoration:none;
  background:var(--signal);
  color:#12100c;
  font-family:'Rubik',Arial,sans-serif;
  font-weight:600;font-size:15px;letter-spacing:.04em;
  padding:13px 26px;
  border:0;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);
  transition:background .15s ease;
}
.br a.brGo:hover{background:#ff8b33;color:#12100c}
.br a.brGoSm{
  display:inline-block;text-decoration:none;
  background:transparent;color:var(--signal);
  border:1px solid var(--signal);
  font-weight:500;font-size:13.5px;letter-spacing:.04em;
  padding:9px 18px;
}
.br a.brGoSm:hover{background:var(--signal);color:#12100c}

/* ── настил моста (линия с подвесами) ────────────────── */
.brDeck{
  position:relative;height:38px;
  border-top:2px solid var(--cable-dim);
  margin-bottom:4px;
}
.brDeck i{
  position:absolute;top:0;width:1px;
  background:linear-gradient(180deg,var(--cable),rgba(143,179,217,0));
}
.brDeck i:nth-child(1){left:3%;height:30px}
.brDeck i:nth-child(2){left:12%;height:14px}
.brDeck i:nth-child(3){left:21%;height:34px}
.brDeck i:nth-child(4){left:30%;height:19px}
.brDeck i:nth-child(5){left:41%;height:27px}
.brDeck i:nth-child(6){left:53%;height:12px}
.brDeck i:nth-child(7){left:64%;height:32px}
.brDeck i:nth-child(8){left:75%;height:17px}
.brDeck i:nth-child(9){left:86%;height:25px}
.brDeck i:nth-child(10){left:95%;height:11px}

/* ── пролёт (секция) ─────────────────────────────────── */
.brSpan{
  position:relative;
  padding:0 46px;
  margin:0 0 6px;
}
.brTruss{
  position:absolute;top:0;bottom:0;width:28px;
  background-image:
    repeating-linear-gradient(45deg,transparent 0 11px,var(--cable-dim) 11px 12px),
    repeating-linear-gradient(-45deg,transparent 0 11px,var(--cable-dim) 11px 12px);
  opacity:.75;
}
.brTrussL{left:0;border-left:1px solid var(--cable-faint);border-right:1px solid var(--cable-faint)}
.brTrussR{right:0;border-left:1px solid var(--cable-faint);border-right:1px solid var(--cable-faint)}

/* опора с номером пролёта */
.brPylon{
  display:inline-block;
  padding:7px 22px 6px;
  margin:0 0 12px;
  background:var(--panel);
  border:1px solid var(--signal);
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 100%,0 100%);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--signal);
  line-height:1;
}

/* стык между пролётами */
.brJoint{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:30px 0 26px;
}
.brJoint i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--cable);opacity:.8}
.brJoint u{display:block;width:min(200px,42vw);height:2px;background:var(--cable-dim);text-decoration:none}

/* ── герой ───────────────────────────────────────────── */
.brHero{padding:30px 0 6px}
.brHeroIn{
  background:linear-gradient(180deg,rgba(23,33,45,.9),rgba(23,33,45,.45));
  border:1px solid var(--cable-faint);
  border-left:3px solid var(--signal);
  padding:26px 22px 24px;
}
.brLede{font-size:17px;font-weight:300;color:#cfdced;margin:12px 0 18px;max-width:64ch}
.brFig{
  display:flex;flex-wrap:wrap;gap:0;
  margin:20px 0 0;
  border-top:1px solid var(--cable-faint);
}
.brFig div{
  flex:1 1 150px;padding:12px 14px 10px;
  border-right:1px solid var(--cable-faint);
  border-bottom:1px solid var(--cable-faint);
}
.brFig div:last-child{border-right:0}
.brFig span{display:block;font-size:20px;color:var(--signal);font-weight:500;line-height:1.2}
.brFig em{display:block;font-style:normal;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cable);margin-top:4px}

/* ── контент ─────────────────────────────────────────── */
.brBody{max-width:74ch;margin:14px 0 0}
.brBody p{color:#d5dfea}

/* ступени пакета */
.brSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 6px}
.brStep{
  background:var(--panel);border:1px solid var(--cable-faint);
  border-top:2px solid var(--signal);
  padding:14px 14px 12px;
}
.brStep span{display:block;font-size:11px;letter-spacing:.2em;color:var(--cable);text-transform:uppercase}
.brStepBig{display:block;font-style:normal;font-size:23px;color:var(--concrete);margin:6px 0 2px;font-weight:500}
.brStep em{display:block;font-style:normal;font-size:13px;color:var(--signal)}
.brStep p{font-size:13px;margin:8px 0 0;color:#aebccb;line-height:1.5}

/* каталог — вантовая развёртка */
.brFan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 4px}
.brSlot{
  position:relative;
  background:var(--panel);
  border:1px solid var(--cable-faint);
  padding:14px 14px 13px;
}
.brSlot .brCable{
  position:absolute;left:18px;bottom:100%;width:2px;
  background:linear-gradient(180deg,rgba(143,179,217,0),var(--cable));
}
.brSlot:nth-child(1) .brCable{height:19px}
.brSlot:nth-child(2) .brCable{height:56px}
.brSlot:nth-child(3) .brCable{height:37px}
.brSlot:nth-child(4) .brCable{height:44px}
.brSlot:nth-child(5) .brCable{height:20px}
.brSlot:nth-child(6) .brCable{height:32px}
.brSlot:nth-child(7) .brCable{height:18px}
.brSlot:nth-child(8) .brCable{height:34px}
.brSlot:nth-child(9) .brCable{height:15px}
.brSlot:nth-child(10) .brCable{height:17px}
.brSlot:nth-child(11) .brCable{height:27px}
.brSlot:nth-child(12) .brCable{height:24px}
.brSlotMeta{
  font-size:12.5px;color:var(--signal);letter-spacing:.02em;
  margin:0 0 7px;
}
.brSlotName{font-size:15.5px;font-weight:500;color:var(--concrete);margin:0 0 5px;line-height:1.3}
.brSlot p{font-size:12.5px;color:#a9b8c8;margin:0;line-height:1.5}
.brFanNote{font-size:13px;color:var(--cable);margin:14px 0 0}

/* клуб — опоры растущей высоты + трос */
.brPylons{position:relative;margin:22px 0 18px;padding-top:26px}
.brPylonRow{display:flex;align-items:flex-end;gap:8px;height:150px}
.brPylonCol{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.brPylonBar{width:100%;max-width:56px;background:linear-gradient(180deg,var(--cable),rgba(143,179,217,.18));border-top:2px solid var(--signal)}
.brPylonCol:nth-child(1) .brPylonBar{height:36%}
.brPylonCol:nth-child(2) .brPylonBar{height:48%}
.brPylonCol:nth-child(3) .brPylonBar{height:60%}
.brPylonCol:nth-child(4) .brPylonBar{height:72%}
.brPylonCol:nth-child(5) .brPylonBar{height:85%}
.brPylonCol:nth-child(6) .brPylonBar{height:100%}
.brPylonPct{font-size:12.5px;color:var(--signal);margin-bottom:6px;font-weight:500}
.brCableArc{position:absolute;left:0;right:0;top:18px;height:140px;pointer-events:none}
.brCableArc svg{width:100%;height:100%;display:block}
.brTiers{border-top:1px solid var(--cable-faint);margin-top:6px}
.brTier{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:11px 2px;border-bottom:1px solid var(--cable-faint);
}
.brTierName{flex:0 0 132px;font-size:14.5px;color:var(--concrete);letter-spacing:.06em;text-transform:uppercase}
.brTierPct{flex:0 0 70px;font-size:14.5px;color:var(--signal)}
.brTierTxt{flex:1 1 220px;font-size:13.5px;color:#a9b8c8}

/* касса */
.brTableWrap{overflow-x:auto;margin:20px 0 6px;border:1px solid var(--cable-faint)}
.brTable{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.brTable th{
  text-align:left;padding:11px 13px;
  background:var(--panel);color:var(--cable);
  font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid var(--cable-dim);
}
.brTable td{padding:11px 13px;border-bottom:1px solid var(--cable-faint);color:#d5dfea}
.brTable tr:last-child td{border-bottom:0}
.brTable td:nth-child(3){color:var(--signal)}

/* врезка-отзыв */
.brQuote{
  margin:20px 0;padding:16px 18px 14px;
  background:var(--panel);
  border-left:3px solid var(--cable);
  position:relative;
}
.brQuote p{font-size:14.5px;color:#d5dfea;margin:0 0 9px;line-height:1.6}
.brQuoteWho{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cable)}

/* списки-факты */
.brFacts{list-style:none;margin:16px 0;padding:0}
.brFacts li{
  position:relative;padding:0 0 0 22px;margin:0 0 9px;
  font-size:14.5px;color:#d5dfea;line-height:1.6;
}
.brFacts li:before{
  content:"";position:absolute;left:0;top:10px;
  width:11px;height:1px;background:var(--signal);
}

/* сетка мини-блоков */
.brGrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 4px}
.brGrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 4px}
.brBox{background:var(--panel);border:1px solid var(--cable-faint);padding:15px 15px 13px}
.brBox p{font-size:13.5px;margin:0;color:#a9b8c8;line-height:1.55}

/* FAQ */
.brFaq{margin:18px 0 0}
.brFaq details{
  border:1px solid var(--cable-faint);
  background:var(--panel);
  margin:0 0 8px;
}
.brFaq summary{
  cursor:pointer;padding:13px 15px;
  font-size:14.5px;font-weight:400;color:var(--concrete);
  list-style:none;position:relative;padding-right:40px;
}
.brFaq summary::-webkit-details-marker{display:none}
.brFaq summary:after{
  content:"+";position:absolute;right:15px;top:11px;
  color:var(--signal);font-size:18px;line-height:1;
}
.brFaq details[open] summary:after{content:"–"}
.brFaq div{padding:0 15px 14px;font-size:13.5px;color:#a9b8c8;line-height:1.62}

/* CTA-полоса */
.brCta{
  margin:26px 0 0;padding:20px 20px 18px;
  background:linear-gradient(90deg,rgba(244,118,31,.14),rgba(23,33,45,.5));
  border:1px solid rgba(244,118,31,.35);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.brCta p{margin:0;flex:1 1 280px;font-size:14.5px;color:#d5dfea}

/* автор + подвал */
.brNote{
  margin:34px 0 0;padding:18px 20px 14px;
  border:1px dashed var(--cable-faint);
}
.brNote p{font-size:13px;color:#9db0c2;margin:0 0 9px;line-height:1.6}
.brFoot{
  margin-top:26px;border-top:1px solid var(--cable-faint);
  background:rgba(23,33,45,.5);
  padding:22px 0 30px;
}
.brFoot p{font-size:12.5px;color:#8fa2b5;margin:0 0 9px;line-height:1.62;max-width:92ch}
.brAge{
  display:inline-block;border:1px solid var(--signal);color:var(--signal);
  font-size:12px;letter-spacing:.1em;padding:4px 10px;margin:0 0 10px;
}

/* ── адаптив ─────────────────────────────────────────── */
@media(max-width:980px){
  .brSteps{grid-template-columns:repeat(2,1fr)}
  .brFan{grid-template-columns:repeat(3,1fr)}
  .brGrid3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .brSpan{padding:0 20px}
  .brTruss{width:14px}
  .brFan{grid-template-columns:repeat(2,1fr)}
  .brPylonRow{height:118px}
  .brCableArc{height:110px}
  .brTierName{flex:0 0 110px}
}
@media(max-width:560px){
  .br{font-size:15.5px}
  .brSpan{padding:0 14px}
  .brTruss{width:10px;opacity:.6}
  .brSteps{grid-template-columns:1fr}
  .brFan{grid-template-columns:1fr}
  .brGrid2,.brGrid3{grid-template-columns:1fr}
  .brHeroIn{padding:20px 15px 20px}
  .brFig div{flex:1 1 44%}
  .brFig span{font-size:18px}
  .brPylonRow{height:96px;gap:5px}
  .brCableArc{height:92px;top:14px}
  .brPylonPct{font-size:11px}
  .brTierName{flex:1 1 100%}
  .brTierPct{flex:0 0 auto}
  .brDeck{height:28px}
  .brTopMeta{display:none}
  .br a.brGo{padding:12px 20px;font-size:14.5px}
}