/* ============ Direction B — «Инженерная сетка» (technical precision) ============ */
:root{ --accent:var(--mint-700); }
body.dir-b{background:var(--paper)}
body.dir-b .section-kicker,
body.dir-b .eyebrow{color:var(--mint-700)}

/* sharper geometry echoing the 1950 mark */
body.dir-b .card,body.dir-b .mini-card,body.dir-b .sidebar-card,
body.dir-b .calc,body.dir-b .reader-box{border-radius:6px}
body.dir-b .btn{border-radius:7px}

/* numbered section heads */
.b-head{display:flex;align-items:baseline;gap:20px;border-top:2px solid var(--ink);padding-top:18px;margin-bottom:44px}
.b-head .num{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.85rem;color:var(--mint-700);letter-spacing:.05em;padding-top:6px}
.b-head .section-title{flex:1;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.b-head .section-copy{max-width:420px;margin:0;font-size:1rem}

/* ---- HERO: blueprint dark ---- */
.b-hero{background:var(--ink);color:#EAF0F8;position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 clamp(60px,8vw,100px)}
.b-hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(151,229,190,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(151,229,190,.07) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 100% at 70% 30%,#000 30%,transparent 80%)}
.b-hero::after{content:"";position:absolute;right:-160px;top:-160px;width:480px;height:480px;border:1.5px solid rgba(151,229,190,.18);border-radius:24px;transform:rotate(15deg)}
.b-hero .container{position:relative;z-index:1}
.b-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.b-coord{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.14em;color:var(--mint);text-transform:uppercase;display:flex;gap:18px;margin-bottom:24px}
.b-coord span{opacity:.8}
.b-hero h1{font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:-.035em;line-height:1.05;color:#fff}
.b-hero h1 em{font-style:normal;color:var(--mint)}
.b-hero .lead{font-size:1.18rem;color:#A9B6CC;margin:22px 0 30px;max-width:540px}
.b-hero .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.b-hero .btn-secondary:hover{border-color:var(--mint)}
.b-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden}
.b-specs .s{padding:16px 18px;border-right:1px solid rgba(255,255,255,.12)}
.b-specs .s:last-child{border-right:0}
.b-specs .s b{display:block;font-family:"JetBrains Mono",monospace;font-size:1.25rem;color:#fff;letter-spacing:-.02em}
.b-specs .s span{font-size:.78rem;color:#8493AC}

/* hero pipeline: source -> translate -> result */
.b-pipe{display:grid;grid-template-columns:1fr;gap:14px;position:relative}
.b-panel{background:#0F2649;border:1px solid rgba(151,229,190,.22);border-radius:8px;padding:18px 20px}
.b-panel .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.1em;color:var(--mint)}
.b-panel .ph .tag{background:rgba(151,229,190,.12);padding:3px 8px;border-radius:4px;color:var(--mint)}
.b-panel .pl{height:9px;border-radius:4px;background:rgba(255,255,255,.13);margin-bottom:10px}
.b-panel .pl.cjk{background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 14px,transparent 14px 20px)}
.b-panel .pl.short{width:52%}.b-panel .pl.mid{width:76%}
.b-panel .pl.mint{background:var(--mint);width:62%}
.b-panel.is-out{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint),0 16px 40px rgba(0,0,0,.4)}
.b-connector{display:flex;align-items:center;gap:12px;font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--mint);letter-spacing:.12em;padding-left:6px}
.b-connector .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--mint),transparent)}
.b-connector .dot{width:8px;height:8px;border-radius:2px;background:var(--mint)}

/* sections on light: subtle ruled bg */
body.dir-b .section{position:relative}
body.dir-b .is-muted{background:#F1F0E8}
body.dir-b .card{border-top:3px solid transparent;transition:border-color .18s,transform .18s,box-shadow .2s}
body.dir-b .card:hover{border-top-color:var(--mint)}
body.dir-b .card .badge{background:transparent;padding-left:0;color:var(--muted);border-radius:0}

/* mark motif strip */
.b-motif{display:grid;grid-template-columns:repeat(auto-fill,minmax(8px,1fr));gap:6px;height:8px;margin-bottom:0}
.b-motif i{height:8px;border-radius:2px;background:var(--line)}
.b-motif i:nth-child(4n){background:var(--mint)}

/* trust band */
.b-trust{background:var(--paper-2)}
.b-trust .container{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.b-trust .seal-img{width:140px;height:140px}
.b-trust h2{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-bottom:12px}
.b-trust p{color:var(--muted);max-width:560px;margin-bottom:22px}

/* calculator section (light, framed) */
.b-calc-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;background:var(--ink);color:#fff;border-radius:12px;padding:clamp(30px,4vw,52px);position:relative;overflow:hidden}
.b-calc-wrap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(151,229,190,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(151,229,190,.06) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(100% 100% at 0% 100%,#000,transparent 70%)}
.b-calc-wrap > *{position:relative;z-index:1}
.b-calc-wrap h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.b-calc-wrap p{color:#A9B6CC}
.b-calc-wrap .calc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.b-calc-wrap .calc, .b-calc-wrap .calc *{--text:#fff;--text-soft:#A9B6CC;--surface:rgba(255,255,255,.05);--hairline:rgba(255,255,255,.16);--ink:var(--mint);--paper-2:rgba(255,255,255,.06)}
.b-calc-wrap .calc .seg button{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.16)}
.b-calc-wrap .calc .seg button[aria-pressed="true"]{background:var(--mint);color:#06152F;border-color:var(--mint)}
.b-calc-wrap .calc-price{color:var(--mint)}

/* ---- calculator inside the dark hero ---- */
.b-hero .calc{background:rgba(255,255,255,.05);border:1px solid rgba(151,229,190,.22);box-shadow:0 18px 50px rgba(0,0,0,.42)}
.b-hero .calc, .b-hero .calc *{--text:#fff;--text-soft:#A9B6CC;--surface:rgba(255,255,255,.05);--hairline:rgba(255,255,255,.16)}
.b-hero .calc .seg button{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.16)}
.b-hero .calc .seg button[aria-pressed="true"]{background:var(--mint);color:#06152F;border-color:var(--mint)}
.b-hero .calc .calc-price{color:var(--mint)}
.b-hero .calc input[type=range]{accent-color:var(--mint)}
.b-hero .calc-note{color:#8493AC}

/* CTA form area */
.b-cta{border:2px solid var(--ink);border-radius:12px;padding:clamp(28px,3.5vw,44px);background:var(--white)}
.b-cta-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.b-cta .badge.is-neutral{background:var(--mint-050);color:var(--mint-700)}

@media(max-width:980px){
  .b-hero-grid{grid-template-columns:1fr;gap:42px}
  .b-trust .container{grid-template-columns:1fr}
  .b-calc-wrap{grid-template-columns:1fr;gap:30px}
  .b-cta-grid{grid-template-columns:1fr;gap:30px}
  .b-head{flex-direction:column;gap:8px}
}

/* ===== "Рассчитать" quote modal (global) ===== */
.quote-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.quote-modal[hidden]{display:none}
.quote-overlay{position:fixed;inset:0;background:rgba(6,21,47,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.quote-dialog{position:relative;z-index:1;width:min(560px,100%);margin:auto 0;background:#fff;border:1px solid #E2E0D6;border-radius:20px;box-shadow:0 30px 80px rgba(6,21,47,.35);padding:28px}
.quote-close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:28px;line-height:1;color:#5C667A;cursor:pointer}
.quote-close:hover{color:#06152F}
.quote-title{font-size:1.5rem;margin:0 0 6px;color:#06152F}
.quote-sub{color:#5C667A;margin:0 0 18px}
.quote-dialog label span{color:#06152F}
.quote-dialog .consent-line,.quote-dialog .consent-line span{color:#5C667A}
.quote-dialog .input,.quote-dialog .select,.quote-dialog .textarea{border-color:#E2E0D6}
.quote-dialog .btn{width:100%}
.quote-dialog .lead-success{color:#06152F}
body.quote-open{overflow:hidden}
@media (max-width:640px){.quote-modal{padding:0;align-items:stretch}.quote-dialog{border-radius:0;min-height:100%;padding:22px}}

/* Kwork button icon */
.btn-kwork { gap: 10px; }
.kwork-ico { width: 22px; height: 22px; border-radius: 5px; background: #fff; flex: 0 0 auto; object-fit: contain; }