/* ============================================================================
   «Лекс·Защита» — premium law-firm theme. Navy + brass gold, Cormorant serif.
   Industry flourish: gold hairlines, numbered practice areas, vertical
   case-timeline with gold nodes, crest monogram, paper-cream sections.
   ========================================================================== */
:root {
  --ink: #0b1a2e;
  --ink-800: #11253f;
  --ink-700: #1a3050;
  --gold: #c9a356;
  --gold-bright: #e4c884;
  --gold-deep: #9c7a2d;
  --paper: #f6f2ea;
  --paper-2: #efe9dd;
  --line: rgba(201,163,86,.34);

  --text: #16243a;
  --text-muted: #51617a;
  --text-faint: #8593a6;
  --bg: #ffffff;
  --danger: #c0392b;
  --success: #2f9e63;

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;

  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.1rem, .6rem + 3vw, 3rem);

  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(11,26,46,.06), 0 2px 6px rgba(11,26,46,.06);
  --sh-md: 0 8px 24px rgba(11,26,46,.10);
  --sh-lg: 0 24px 60px rgba(11,26,46,.18);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms; --dur: 260ms; --dur-slow: 520ms;
  --z-header: 100; --z-modal: 1000;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body {
  font-family: var(--font-sans); font-size: clamp(.98rem,.94rem+.2vw,1.06rem);
  line-height: 1.65; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img,svg,iframe { display:block; max-width:100% } img{height:auto}
a { color: var(--gold-deep); text-underline-offset: 3px; }
h1,h2,h3 { font-family: var(--font-display); line-height: 1.08; font-weight: 700; letter-spacing: .005em; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.u-visually-hidden { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link { position:absolute; left:50%; translate:-50% -130%; top:8px; z-index:var(--z-modal); background:var(--gold); color:var(--ink); padding:.5rem 1rem; border-radius:var(--r-sm); font-weight:600; transition:translate var(--dur) var(--ease); }
.skip-link:focus { translate:-50% 0; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* ---- Eyebrow ---- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before { content:""; width:34px; height:1px; background:var(--gold); }
.hero .eyebrow { color:var(--gold-bright); }

/* ---- Buttons ---- */
.btn {
  --_bg:var(--gold); --_fg:var(--ink); --_bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font:inherit; font-weight:600; letter-spacing:.02em; line-height:1;
  padding:.95rem 1.7rem; border:1px solid var(--_bd); border-radius:var(--r-sm);
  background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn--primary:hover { background:var(--gold-bright); box-shadow:0 10px 30px rgba(201,163,86,.35); transform:translateY(-2px); }
.btn--ghost { --_bg:transparent; --_fg:var(--gold-bright); --_bd:rgba(201,163,86,.5); }
.btn--ghost:hover { --_bg:rgba(201,163,86,.12); border-color:var(--gold); }
.btn--lg { padding:1.1rem 2rem; font-size:1.02rem; }
.btn--block { width:100%; }
.section .btn--ghost, .calc__form .btn--ghost { --_fg:var(--gold-deep); --_bd:var(--line); }

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:var(--z-header);
  background:color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(201,163,86,.18);
}
.site-header__inner { display:flex; align-items:center; gap:var(--sp-4); padding-block:.85rem; }
.logo { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; }
.logo__mark {
  display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-sm);
  border:1px solid var(--gold); color:var(--gold-bright); font-size:1.25rem;
  background:linear-gradient(160deg, rgba(201,163,86,.16), transparent);
}
.logo__text { font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:.01em; color:#fff; }
.logo__text strong { color:var(--gold-bright); font-weight:700; }
.nav { margin-left:auto; }
.nav__menu { list-style:none; display:flex; gap:1.8rem; padding:0; }
.nav__menu a { color:rgba(255,255,255,.82); text-decoration:none; font-size:.92rem; font-weight:500; letter-spacing:.01em; transition:color var(--dur-fast) var(--ease); }
.nav__menu a:hover { color:var(--gold-bright); }
.nav__toggle { display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.nav__burger,.nav__burger::before,.nav__burger::after { display:block; width:24px; height:2px; background:var(--gold-bright); border-radius:2px; transition:var(--dur) var(--ease); }
.nav__burger::before,.nav__burger::after { content:""; position:relative; } .nav__burger::before{top:-7px} .nav__burger::after{top:5px}
.site-header__phone { --_fg:rgba(255,255,255,.92); --_bd:rgba(255,255,255,.22); font-weight:500; }
.site-header__phone:hover { --_bg:rgba(255,255,255,.08); }

/* ---- Hero ---- */
.hero {
  position:relative; color:#fff;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(201,163,86,.14), transparent 55%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-800) 100%);
}
.hero__inner { display:grid; gap:var(--sp-7); align-items:center; padding-block:clamp(3rem,1.5rem+7vw,6.5rem); }
.hero__title { font-size:clamp(2.6rem,1.7rem+3.6vw,4.5rem); font-weight:700; color:#fff; margin:1.1rem 0 1.3rem; }
.hero__title::after { content:""; display:block; width:96px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin-top:1.3rem; }
.hero__lead { font-size:1.12rem; color:rgba(255,255,255,.78); max-width:46ch; }
.hero__usps { list-style:none; padding:0; margin:1.6rem 0; display:grid; gap:.7rem; }
.hero__usps li { position:relative; padding-left:1.9rem; color:rgba(255,255,255,.88); }
.hero__usps li::before { content:"§"; position:absolute; left:0; color:var(--gold); font-family:var(--font-display); font-size:1.2rem; line-height:1.3; }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.hero__media { position:relative; }
.hero__art { width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:var(--r-md); border:1px solid rgba(201,163,86,.35); }
.hero__media::after { content:""; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--gold); border-radius:var(--r-md); z-index:-1; }

/* ---- Trust bar ---- */
.trustbar { background:var(--ink-800); border-top:1px solid rgba(201,163,86,.2); border-bottom:1px solid rgba(201,163,86,.2); }
.trustbar__inner { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(201,163,86,.16); }
.trustbar__inner > div { background:var(--ink-800); padding:1.6rem 1rem; text-align:center; display:flex; flex-direction:column; gap:.2rem; }
.trustbar strong { font-family:var(--font-display); font-size:clamp(1.8rem,1.2rem+2vw,2.6rem); color:var(--gold-bright); font-weight:700; }
.trustbar span { color:rgba(255,255,255,.62); font-size:.86rem; letter-spacing:.02em; }

/* ---- Credentials strip ---- */
.creds { background:var(--ink); padding-block:1.4rem; }
.creds__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2.4rem; }
.creds__item { color:rgba(255,255,255,.72); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
.creds__item::before { content:"✦"; color:var(--gold); font-size:.7rem; }

/* ---- Sections ---- */
.section { padding-block:clamp(3.5rem,2rem+6vw,6.5rem); }
.section--muted { background:var(--paper); }
.section--accent { background:linear-gradient(160deg,var(--ink) 0%, var(--ink-800) 100%); color:#fff; }
.section__head { max-width:var(--container-narrow); margin:0 auto var(--sp-7); text-align:center; }
.section__head .eyebrow { justify-content:center; }
.section__title { font-size:clamp(2rem,1.4rem+2.2vw,3.1rem); color:var(--text); }
.section--accent .section__title { color:#fff; }
.section__subtitle { margin-top:1rem; color:var(--text-muted); font-size:1.08rem; }
.section--accent .section__subtitle { color:rgba(255,255,255,.75); }

/* ---- Practice cards ---- */
.cards { display:grid; gap:1.4rem; grid-template-columns:1fr; counter-reset:pa; }
.cards:not(.cards--team) .card { counter-increment:pa; }
.card {
  position:relative; background:var(--bg); border:1px solid #e7e1d4; border-radius:var(--r-md);
  padding:2.2rem 1.8rem 1.9rem; box-shadow:var(--sh-sm);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  overflow:hidden;
}
.card::before { content:""; position:absolute; left:0; top:0; width:46px; height:3px; background:var(--gold); transition:width var(--dur) var(--ease); }
.cards:not(.cards--team) .card::after { content:"0" counter(pa); position:absolute; top:1.3rem; right:1.6rem; font-family:var(--font-display); font-size:1.5rem; color:var(--line); font-weight:700; }
.card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--line); }
.card:hover::before { width:100%; }
.card__title { font-size:1.5rem; margin-bottom:.5rem; color:var(--text); }
.card p { color:var(--text-muted); }

/* ---- Process timeline ---- */
.timeline { list-style:none; padding:0; margin:0; display:grid; gap:0; position:relative; }
.timeline__step { position:relative; padding:0 0 2.4rem 3.4rem; }
.timeline__step::before { content:""; position:absolute; left:17px; top:6px; bottom:-6px; width:2px; background:var(--line); }
.timeline__step:last-child::before { display:none; }
.timeline__num { position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--gold-bright); font-family:var(--font-display); font-weight:700; font-size:.95rem; border:1px solid var(--gold); }
.timeline__step h3 { font-size:1.45rem; color:var(--text); margin-bottom:.3rem; }
.timeline__step p { color:var(--text-muted); max-width:60ch; }
@media (min-width:760px){
  .timeline { grid-template-columns:repeat(4,1fr); gap:2rem; }
  .timeline__step { padding:3.2rem 1rem 0 0; }
  .timeline__step::before { left:0; right:-2rem; top:17px; bottom:auto; width:auto; height:2px; }
  .timeline__step:last-child::before { display:none; }
}

/* ---- Calculator ---- */
.calc__form { max-width:620px; margin:0 auto; background:var(--bg); border:1px solid #e7e1d4; border-top:3px solid var(--gold); border-radius:var(--r-md); padding:2.2rem; box-shadow:var(--sh-md); display:grid; gap:1.2rem; }
.calc__result { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; background:var(--ink); border-radius:var(--r-sm); }
.calc__result-label { color:rgba(255,255,255,.7); font-size:.92rem; }
.calc__result-value { font-family:var(--font-display); font-size:clamp(1.8rem,1.3rem+1.8vw,2.4rem); color:var(--gold-bright); font-weight:700; }

/* ---- Forms ---- */
.field { display:grid; gap:.45rem; }
.field label { font-weight:600; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.field__opt { text-transform:none; letter-spacing:0; color:var(--text-faint); font-weight:400; }
.field input,.field select,.field textarea {
  font:inherit; padding:.85rem 1rem; border:1px solid #d8d0c0; border-radius:var(--r-sm);
  background:#fffdf9; color:var(--text); width:100%;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,163,86,.2); outline:none; }
.field[data-invalid] input,.field[data-invalid] textarea { border-color:var(--danger); }
.field__err { color:var(--danger); font-size:.82rem; }

/* ---- Lawyers ---- */
.cards--team { grid-template-columns:1fr; }
.lawyer { text-align:left; }
.lawyer img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); border:1px solid #e0d8c8; filter:grayscale(.2) contrast(1.02); transition:filter var(--dur) var(--ease); }
.lawyer:hover img { filter:grayscale(0); }
.lawyer h3 { font-size:1.5rem; margin-top:1rem; color:var(--text); }
.lawyer__role { color:var(--gold-deep); font-weight:600; font-size:.92rem; }
.lawyer__spec { color:var(--text-muted); font-size:.95rem; margin-top:.2rem; }

/* ---- Documents ---- */
.docs { list-style:none; padding:0; display:grid; gap:1rem; grid-template-columns:1fr; }
.doc { display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.3rem; background:var(--bg); border:1px solid #e7e1d4; border-radius:var(--r-md); text-decoration:none; color:var(--text); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.doc:hover { border-color:var(--gold); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.doc__icon { flex:0 0 auto; width:44px; height:52px; display:grid; place-items:center; background:var(--ink); color:var(--gold-bright); font-size:.66rem; font-weight:700; letter-spacing:.05em; border-radius:3px; }
.doc__body { display:flex; flex-direction:column; }
.doc__body b { font-weight:600; }
.doc__body small { color:var(--text-faint); }
.doc__dl { margin-left:auto; color:var(--gold-deep); font-size:1.3rem; }

/* ---- Reviews ---- */
.review { position:relative; background:var(--bg); border:1px solid #e7e1d4; border-radius:var(--r-md); padding:2.4rem 1.8rem 1.8rem; box-shadow:var(--sh-sm); }
.review::before { content:"“"; position:absolute; top:-.4rem; left:1.1rem; font-family:var(--font-display); font-size:4.5rem; color:var(--line); line-height:1; }
.review p { position:relative; color:var(--text); font-size:1.05rem; }
.review__stars { color:var(--gold); letter-spacing:2px; margin-bottom:.8rem; }
.review footer { margin-top:1.2rem; color:var(--text-faint); font-size:.88rem; font-weight:600; }

/* ---- Lead ---- */
.lead { display:grid; gap:var(--sp-7); align-items:center; }
.lead__list { list-style:none; padding:0; margin-top:1.2rem; display:grid; gap:.6rem; }
.lead__list li { position:relative; padding-left:1.7rem; color:rgba(255,255,255,.85); }
.lead__list li::before { content:"§"; position:absolute; left:0; color:var(--gold); font-family:var(--font-display); }
.lead__form { background:var(--paper); border-radius:var(--r-md); border-top:3px solid var(--gold); padding:2.2rem; display:grid; gap:1.1rem; box-shadow:var(--sh-lg); }
.lead__form .field label { color:var(--text-muted); }
.lead__note { font-size:.82rem; color:var(--text-faint); text-align:center; }
.lead__note a { color:var(--gold-deep); }

/* ---- Contacts ---- */
.contacts { display:grid; gap:var(--sp-6); }
.contacts__phone { font-family:var(--font-display); font-size:2rem; font-weight:700; text-decoration:none; color:var(--text); }
.contacts__info p { margin-top:.5rem; color:var(--text-muted); }
.contacts__info a { color:var(--gold-deep); }

/* ---- Footer ---- */
.site-footer { background:var(--ink); color:rgba(255,255,255,.6); padding-block:1.8rem; border-top:1px solid rgba(201,163,86,.2); }
.site-footer__inner { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; font-size:.9rem; }
.site-footer a { color:var(--gold-bright); text-decoration:none; }

/* ---- Modal ---- */
.modal { border:0; border-top:3px solid var(--gold); border-radius:var(--r-md); padding:0; max-width:440px; width:calc(100% - 2rem); box-shadow:var(--sh-lg); }
.modal::backdrop { background:rgba(11,26,46,.6); backdrop-filter:blur(3px); }
.modal__body { padding:2.6rem 2.2rem; text-align:center; display:grid; gap:.8rem; justify-items:center; }
.modal__icon { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--gold-bright); font-size:1.8rem; border:1px solid var(--gold); }
.modal__body h2 { font-size:1.9rem; }
.modal__body p { color:var(--text-muted); }

/* ---- FAB ---- */
.fab { position:fixed; right:1.3rem; bottom:1.3rem; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--ink); box-shadow:var(--sh-lg); z-index:var(--z-header); transition:transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.fab:hover { transform:scale(1.08); background:var(--gold-bright); }
.fab svg { width:26px; height:26px; fill:var(--ink); }

/* ---- Reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---- Responsive ---- */
@media (min-width:680px){ .trustbar__inner{ grid-template-columns:repeat(4,1fr) } .docs{ grid-template-columns:1fr 1fr } }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr) } .cards--team{ grid-template-columns:repeat(3,1fr) } .contacts{ grid-template-columns:1fr 1.3fr } }
@media (min-width:920px){ .hero__inner{ grid-template-columns:1.15fr .85fr } .lead{ grid-template-columns:1fr 1fr } .docs{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){
  .site-header__phone{ display:none } .nav__toggle{ display:inline-flex }
  .nav__menu{ position:absolute; inset:100% 0 auto 0; flex-direction:column; gap:0; background:var(--ink); border-bottom:1px solid rgba(201,163,86,.25); padding:.4rem var(--gutter); display:none; }
  .nav__menu.is-open{ display:flex } .nav__menu li{ padding-block:.7rem; border-bottom:1px solid rgba(255,255,255,.08) }
}
@media (max-width:520px){ .site-header__cta{ display:none } }
@media (max-width:640px){ .field input,.field select,.field textarea{ font-size:16px } }