/*
  ekb-avto.ru — EMERALD FUTURE CLEAN
  Designed to pair with Bootstrap 5
*/

:root{
  --bg:#F7FBF8;
  --bg-2:#ECF8F2;
  --panel:#FFFFFF;
  --panel-2:#F2FBF6;

  --text:#1F2937;
  --muted:#6B7280;
  --border:rgba(15, 23, 42, .10);

  --emerald:#0B8F6B;
  --emerald-2:#0AA37A;
  --mint:#CFF5E6;
  --lime-mint:#A7F3D0;

  --focus:rgba(11, 143, 107, .22);
  --shadow:0 14px 34px rgba(2, 6, 23, .08);
  --shadow-soft:0 10px 22px rgba(2, 6, 23, .06);

  --radius:18px;
  --radius-sm:14px;
  --container-max: 1100px;
}

html{ scroll-behavior:smooth; }

body{
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(11,143,107,.10), transparent 55%),
    radial-gradient(850px 560px at 85% 10%, rgba(167,243,208,.16), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
}

a{ color:var(--emerald); }
a:hover{ color:var(--emerald-2); }

.container-narrow{ max-width:var(--container-max); }

.section{
  padding:72px 0;
  position:relative;
}
.section.is-mint{
  background: linear-gradient(180deg, rgba(236,248,242,.92), rgba(247,251,248,.65));
}
.section:before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(11,143,107,.20), transparent);
}

/* Nav */
.site-nav{
  background: rgba(255,255,255,.76);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
.site-nav .navbar-brand{ font-weight:800; letter-spacing:.2px; }
.brand-mark{
  width:38px; height:38px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(11,143,107,.14), rgba(167,243,208,.32));
  border:1px solid rgba(11,143,107,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow-soft);
}
.brand-mark svg{ width:18px; height:18px; color:var(--emerald); }

.site-nav .nav-link{
  color: rgba(31,41,55,.88);
  font-weight:650;
  font-size:.95rem;
  padding:.6rem .9rem;
  position:relative;
}
.site-nav .nav-link:hover{ color: var(--emerald); }
.site-nav .nav-link.active:after{
  content:"";
  position:absolute;
  left:.9rem; right:.9rem;
  bottom:.25rem;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  border-radius:2px;
}

/* Buttons */
.btn-emerald{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--emerald);
  --bs-btn-border-color: rgba(11,143,107,.35);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg: var(--emerald-2);
  --bs-btn-hover-border-color: rgba(11,143,107,.45);
  --bs-btn-focus-shadow-rgb: 11,143,107;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(11,143,107,.16);
}

.btn-outline-emerald{
  --bs-btn-color: var(--emerald);
  --bs-btn-border-color: rgba(11,143,107,.42);
  --bs-btn-hover-color: var(--emerald);
  --bs-btn-hover-bg: rgba(207,245,230,.65);
  --bs-btn-hover-border-color: rgba(11,143,107,.55);
  --bs-btn-focus-shadow-rgb: 11,143,107;
  border-radius: 14px;
}

/* Hero */
.hero{ padding: 96px 0 72px; }
.kicker{
  display:inline-flex;
  gap:.6rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(207,245,230,.55);
  border:1px solid rgba(11,143,107,.18);
  color: rgba(31,41,55,.86);
  font-weight:700;
  font-size:.9rem;
}

.mini-badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mini-badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.65);
  color: rgba(31,41,55,.85);
  font-size:.86rem;
}

/* Cards */
.panel-card{
  background: rgba(255,255,255,.90);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mini-card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.mini-title{ font-weight:800; margin-bottom:.25rem; }
.mini-text{ color: rgba(31,41,55,.78); }

.clean-list{ margin:0; padding-left: 1.1rem; }
.clean-list li{ margin:.4rem 0; }

.callout{
  border-radius: var(--radius-sm);
  border: 1px solid rgba(11,143,107,.22);
  background: linear-gradient(180deg, rgba(207,245,230,.55), rgba(255,255,255,.78));
  padding: 14px 16px;
}
.callout-title{ font-weight:900; color: rgba(11,143,107,.92); }
.callout-text{ color: rgba(31,41,55,.80); }

/* Steps */
.step-card{
  background: rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.step-card:before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 200px at 20% 0%, rgba(11,143,107,.12), transparent 55%);
  pointer-events:none;
}
.step-num{
  width:46px; height:46px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color: var(--emerald);
  background: rgba(207,245,230,.65);
  border:1px solid rgba(11,143,107,.18);
  margin-bottom: 10px;
}
.step-title{ font-weight:900; }
.step-text{ color: rgba(31,41,55,.78); }

.flowline{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}
.flowline span{
  padding:.35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border:1px solid var(--border);
  font-size:.92rem;
}
.flowline .dot{
  width:8px; height:8px;
  border-radius: 999px;
  background: rgba(11,143,107,.55);
  border:1px solid rgba(11,143,107,.35);
}

/* Terms */
.term{ padding: 10px 0; border-bottom:1px dashed rgba(15, 23, 42, .12); }
.term:last-child{ border-bottom:none; }
.term-title{ font-weight:900; }
.term-text{ color: rgba(31,41,55,.78); }

/* Risks */
.risk-card{
  background: rgba(255,255,255,.88);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.risk-title{ font-weight:900; }
.risk-text{ color: rgba(31,41,55,.78); }

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border:1px solid rgba(15, 23, 42, .14);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(11,143,107,.45);
  box-shadow: 0 0 0 .25rem var(--focus);
}
.form-hint{ font-size:.86rem; color: rgba(31,41,55,.62); margin-top:.35rem; }
.field-error{ font-size:.9rem; color: #b42318; min-height: 1.2em; margin-top:.35rem; }
.form-result{ margin-top:.75rem; font-size:.95rem; min-height: 1.2em; }

/* Quiz */
.qblock{ padding: 14px 0; border-bottom:1px solid rgba(15,23,42,.08); }
.qblock:last-child{ border-bottom:none; }
.qtitle{ font-weight:900; margin-bottom:.55rem; }
.qhint{ font-size:.86rem; color: rgba(31,41,55,.62); margin-top:.55rem; }
.quiz-result{ margin-top: 12px; }

/* Accordion */
.emerald-accordion .accordion-item{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow:hidden;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
}
.emerald-accordion .accordion-button{
  font-weight:900;
}
.emerald-accordion .accordion-button:focus{
  box-shadow: 0 0 0 .25rem var(--focus);
}

/* Footer */
.footer{
  background: rgba(255,255,255,.72);
  border-top: 1px solid var(--border);
}
.footer-links{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:flex-end; }
.footer-links a{ color: rgba(31,41,55,.78); text-decoration:none; font-weight:700; }
.footer-links a:hover{ color: var(--emerald); text-decoration:underline; }

/* Contact rows */
.contact-row{ display:flex; gap:.5rem; padding: .35rem 0; border-bottom:1px dashed rgba(15,23,42,.10); }
.contact-row:last-child{ border-bottom:none; }
.contact-k{ min-width: 95px; color: rgba(31,41,55,.65); font-weight:800; }
.contact-v{ color: rgba(31,41,55,.88); }

@media (max-width: 991.98px){
  .hero{ padding: 80px 0 56px; }
  .section{ padding: 60px 0; }
  .footer-links{ justify-content:flex-start; }
}