/* ============================================================
   EMBLEMA — страница «Оптом» (B2B)
   Использует переменные и базовые компоненты из styles.css
   ============================================================ */

.opt-header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.opt-header-actions .button{ min-height:42px; }

.opt-mobile-nav{ display:none; flex-direction:column; padding:10px clamp(18px,4vw,56px) 16px; border-bottom:1px solid var(--line); background:var(--paper); }
.opt-mobile-nav a{ padding:10px 0; font-weight:700; font-size:14px; border-bottom:1px solid var(--line-soft); }
.opt-mobile-nav a:last-child{ border-bottom:0; }
.opt-mobile-nav.open{ display:flex; }

/* ---------- hero ---------- */
.opt-hero{ min-height:520px; overflow:hidden; position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); align-items:center; gap:40px; padding:clamp(48px,7vw,100px) clamp(20px,7vw,90px) clamp(56px,7vw,86px); background:var(--ink); color:#eef2e8; isolation:isolate; }
.opt-hero::after{ content:""; position:absolute; height:38vw; width:38vw; max-height:500px; max-width:500px; right:-10vw; top:-10vw; border-radius:50%; border:1px solid rgba(240,180,41,.4); box-shadow:0 0 0 30px rgba(240,180,41,.05); z-index:-1; }
.opt-hero-copy h1{ margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:1.02; font-size:clamp(38px,4.8vw,66px); }
.opt-hero-copy h1 em{ color:var(--acid); font-style:normal; }
.opt-hero-description{ max-width:460px; margin:20px 0 26px; color:#c9c9c9; font-size:14.5px; line-height:1.65; }
.opt-hero .hero-facts{ display:flex; gap:26px; margin-top:38px; flex-wrap:wrap; }
.opt-hero .hero-facts strong{ display:block; font-family:var(--serif); font-size:20px; font-weight:700; color:var(--acid); }
.opt-hero .hero-facts span{ display:block; margin-top:4px; font-size:10px; color:#a8a8a8; line-height:1.4; }

.opt-hero-art{ position:relative; height:360px; }
.opt-stack-card{ position:absolute; display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:var(--r-lg); background:rgba(255,255,255,.06); border:1px solid rgba(240,180,41,.3); backdrop-filter:blur(6px); font-size:12.5px; font-weight:700; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.opt-stack-card svg{ width:20px; color:var(--acid); }
.card-1{ top:10px; left:6%; }
.card-2{ top:130px; left:22%; }
.card-3{ top:250px; left:2%; }

/* ---------- tiers ---------- */
.opt-tiers{ background:var(--white); }
.opt-tiers .section-heading{ align-items:start; }
.opt-tiers-note{ max-width:280px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.opt-tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.opt-tier-card{ position:relative; padding:28px 24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); display:flex; flex-direction:column; gap:10px; transition:transform .2s ease,box-shadow .2s ease; }
.opt-tier-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.opt-tier-card.featured{ background:var(--ink); color:#fff; border-color:var(--ink); }
.opt-tier-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); font-weight:800; }
.opt-tier-card.featured .opt-tier-label{ color:var(--acid); }
.opt-tier-qty{ font-family:var(--serif); font-size:26px; font-weight:700; }
.opt-tier-discount{ display:inline-block; align-self:flex-start; padding:4px 10px; border-radius:var(--r-full); background:var(--acid); color:var(--acid-ink); font-family:var(--mono); font-size:11px; font-weight:800; }
.opt-tier-card p{ margin:4px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted2); }
.opt-tier-card.featured p{ color:#c9c9c9; }
.opt-tier-card ul{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.opt-tier-card li{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; }
.opt-tier-card li svg{ width:15px; color:var(--orange); flex:0 0 auto; }
.opt-tier-card.featured li svg{ color:var(--acid); }

/* ---------- steps ---------- */
.opt-steps{ background:var(--paper); }
.opt-steps-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.opt-step{ padding:22px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); }
.opt-step-num{ display:block; font-family:var(--mono); font-size:12px; color:var(--orange); font-weight:800; margin-bottom:14px; }
.opt-step h3{ margin:0 0 8px; font-family:var(--serif); font-size:17px; font-weight:700; }
.opt-step p{ margin:0; font-size:12px; color:var(--muted); line-height:1.55; }

/* ---------- opt cta (who it's for) ---------- */
.opt-cta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,7vw,100px); align-items:center; background:var(--ink); color:#fff; padding:clamp(60px,8vw,100px) clamp(20px,7vw,90px); overflow:hidden; }
.opt-illustration{ height:340px; position:relative; background:#1c1c1c; border-radius:var(--r-lg); overflow:hidden; }
.opt-badge-mark{ position:absolute; left:calc(50% - 70px); top:calc(50% - 70px); width:140px; height:140px; display:grid; place-items:center; border-radius:50%; background:var(--acid); box-shadow:0 20px 46px rgba(0,0,0,.4); }
.opt-badge-mark svg{ width:56px; height:56px; color:var(--acid-ink); fill:var(--acid-ink); }
.opt-cta-copy h2{ margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:1.05; font-size:clamp(32px,3.8vw,52px); }
.opt-cta-copy h2 em{ color:var(--acid); font-style:normal; }
.opt-cta-copy ul{ margin:24px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.opt-cta-copy li{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:#e8e8e2; }
.opt-cta-copy li svg{ width:17px; color:var(--acid); flex:0 0 auto; }

/* ---------- form ---------- */
.opt-form-section{ background:var(--white); }
.opt-form-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,70px); align-items:start; }
.opt-form-intro h2{ margin:0; font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:1.05; font-size:clamp(30px,3.4vw,46px); }
.opt-form-intro p:not(.eyebrow){ max-width:400px; margin:18px 0 22px; color:var(--muted); font-size:13.5px; line-height:1.65; }
.opt-form-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.opt-form-list li{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; }
.opt-form-list li svg{ width:16px; color:var(--orange); flex:0 0 auto; }
.opt-form{ padding:32px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.opt-form label{ display:block; margin-bottom:14px; font-size:11px; font-weight:800; }
.opt-form input,.opt-form textarea{ display:block; width:100%; margin-top:6px; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; outline:none; font-size:13px; font-weight:500; transition:border .2s,box-shadow .2s; }
.opt-form textarea{ height:auto; padding:10px 13px; resize:vertical; }
.opt-form input:focus,.opt-form textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(79,121,255,.15); }
.opt-form input.invalid{ border-color:#d9453b; }
.opt-form button{ margin-top:6px; }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .opt-tier-grid{ grid-template-columns:1fr; }
  .opt-steps-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1000px){
  .opt-hero{ grid-template-columns:1fr; }
  .opt-hero-art{ display:none; }
  .opt-cta{ grid-template-columns:1fr; }
  .opt-illustration{ order:-1; height:220px; }
  .opt-form-wrap{ grid-template-columns:1fr; }
  .main-nav{ display:none; }
  .menu-button{ display:grid; }
}
@media (max-width:720px){
  .opt-header-actions .button span{ display:none; }
  .opt-header-actions .button{ padding:0 14px; }
  .opt-steps-grid{ grid-template-columns:1fr 1fr; }
  .opt-tier-grid{ grid-template-columns:1fr; }
  .opt-form{ padding:22px; }
  .site-header{ padding:0 16px; }
}
@media (max-width:480px){
  .opt-steps-grid{ grid-template-columns:1fr; }
}