/* ============================================================
   ФОРМУЛА — стиль «Monad»: editorial tech journal on parchment
   Serif (Newsreader) заголовки · Mono (JetBrains) весь UI ·
   Lake Blue единственный акцент · hairline-бордеры · без теней
   ============================================================ */

/* ============ TOKENS ============ */
:root {
  --parchment:  #f6f3f1;
  --parchment-2:#efeae7;   /* чуть темнее — ховеры/подложки */
  --lake:       #2b59d1;
  --lake-ink:   #244fbd;
  --periwinkle: #cfdaf5;
  --sky:        #a0b5eb;
  --mint:       #a7fccd;
  --coral:      #ff9473;
  --gold:       #ecda98;
  --crimson:    #f37a0a;
  --off-black:  #242424;
  --ink:        #000000;
  --graphite:   #4e4d4d;
  --smoke:      #797776;
  --ash:        #cecac8;

  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 28px;
  --r-panel:36px;
  --r-pill: 100px;
  --r-tag:  999px;

  --maxw: 1240px;
  --shadow: rgba(0,0,0,.1) 0 0 10px 0;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET ============ */
* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth; }
body {
  font-family:var(--mono);
  background:var(--parchment);
  color:var(--off-black);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.12; color:var(--off-black); }

.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section { padding:104px 0; position:relative; }
main > section { border-top:1px solid var(--ash); }
section[id] { scroll-margin-top:130px; }

.eyebrow {
  font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:20px;
}
.section-head { max-width:760px; margin:0 auto 64px; text-align:center; }
.section-head h2 { font-size:clamp(2rem,4.4vw,3rem); }
.section-sub { color:var(--graphite); margin-top:20px; font-size:20px; letter-spacing:-.02em; }
.muted { color:var(--smoke); }
.tabnum { font-variant-numeric:tabular-nums; }
h2 { font-size:clamp(2rem,4.4vw,3rem); }

/* ============ BUTTONS ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-weight:500; font-size:14px; letter-spacing:.02em;
  text-transform:uppercase; padding:15px 30px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; transition:.2s var(--ease); white-space:nowrap;
}
.btn-primary { background:var(--lake); color:#fff; }
.btn-primary::after { content:'▸'; font-size:12px; transform:translateY(-.5px); }
.btn-primary:hover { background:var(--lake-ink); }
.btn-ghost { background:transparent; color:var(--off-black); border-color:var(--off-black); }
.btn-ghost:hover { background:var(--off-black); color:var(--parchment); }
.btn-ghost:disabled { opacity:.35; cursor:not-allowed; }
.btn-ghost:disabled:hover { background:transparent; color:var(--off-black); }
.btn-dark { background:var(--off-black); color:var(--parchment); }
.btn-dark:hover { background:#000; }
.btn-sm { padding:12px 22px; }
.btn-block { width:100%; }

/* ============ ANNOUNCEMENT BAR ============ */
.announce {
  position:fixed; top:0; left:0; right:0; z-index:101;
  background:var(--ink); color:var(--parchment); height:52px; display:flex; align-items:center;
}
.announce-inner { display:flex; align-items:center; gap:24px; min-height:52px; }
.announce-text {
  font-family:var(--mono); font-size:12px; line-height:1.35; letter-spacing:.055em; text-transform:uppercase;
  color:var(--parchment); opacity:.92;
}
.announce-pill {
  margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(246,243,241,.5); border-radius:var(--r-tag); padding:8px 16px; transition:.2s var(--ease);
}
.announce-pill:hover { background:var(--parchment); color:var(--ink); border-color:var(--parchment); }
.announce-close { background:none; border:0; color:var(--parchment); font-size:18px; line-height:1; cursor:pointer; opacity:.7; }
.announce-close:hover { opacity:1; }
body.announce-hidden .announce { display:none; }

/* ============ HEADER ============ */
.site-header {
  position:fixed; top:52px; left:0; right:0; z-index:100; transition:.3s var(--ease);
  border-bottom:1px solid transparent;
}
body.announce-hidden .site-header { top:0; }
.site-header.scrolled { background:rgba(246,243,241,.9); backdrop-filter:blur(12px); border-bottom-color:var(--ash); }
.header-inner { display:flex; align-items:center; gap:32px; height:76px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-mark {
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--off-black); color:var(--parchment); font-family:var(--serif); font-size:1.2rem;
}
.logo-text { font-family:var(--serif); font-size:1.35rem; line-height:1; display:flex; flex-direction:column; gap:3px; letter-spacing:-.02em; }
.logo-text em { font-style:normal; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--smoke); }
.nav { display:flex; gap:28px; margin-left:auto; }
.nav a {
  font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--off-black);
  position:relative; transition:.2s;
}
.nav a:hover { color:var(--smoke); }
.header-cta { flex-shrink:0; }
.burger { display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.burger span { width:24px; height:1.5px; background:var(--off-black); transition:.3s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============ HERO ============ */
.hero { position:relative; padding:192px 0 88px; overflow:hidden; border-top:0 !important; }
.hero-glow {
  position:absolute; top:-10%; right:-8%; width:60%; height:80%; pointer-events:none; z-index:0;
  background:
    radial-gradient(closest-side at 70% 40%, rgba(255,148,115,.75), transparent),
    radial-gradient(closest-side at 30% 70%, rgba(160,181,235,.75), transparent),
    radial-gradient(closest-side at 55% 55%, rgba(167,252,205,.6), transparent);
  filter:blur(64px); opacity:.8;
}
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.badge {
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:var(--r-tag);
  background:var(--parchment); border:1px solid var(--ash);
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--graphite); margin-bottom:28px;
}
.badge .dot { width:7px; height:7px; border-radius:50%; background:var(--lake); }
.hero h1 { font-size:clamp(2.6rem,6vw,5rem); margin-bottom:26px; }
.hero h1 .accent { font-style:italic; }
.hero-sub { font-family:var(--mono); font-size:20px; color:var(--graphite); max-width:560px; margin-bottom:36px; letter-spacing:-.02em; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }
.hero-metrics { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.hero-metrics li { display:flex; flex-direction:column; gap:6px; }
.hero-metrics b { font-family:var(--serif); font-weight:400; font-size:2rem; color:var(--off-black); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.hero-metrics span { font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--smoke); line-height:1.4; }

/* Hero process panel */
.live-panel { background:var(--periwinkle); border-radius:var(--r-panel); padding:40px; box-shadow:var(--shadow); position:relative; }
.live-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.live-title { display:flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:500; font-size:14px; letter-spacing:.045em; text-transform:uppercase; color:var(--off-black); }
.pulse { width:8px; height:8px; border-radius:50%; background:var(--lake); position:relative; }
.pulse::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--lake); animation:ping 1.8s var(--ease) infinite; }
@keyframes ping { 0%{ transform:scale(.6); opacity:.8 } 100%{ transform:scale(1.9); opacity:0 } }
.live-time { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--graphite); font-size:12px; }
.live-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.live-row span { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--graphite); }
.live-row b { font-family:var(--serif); font-weight:400; font-size:1.6rem; color:var(--off-black); }
.live-bar { height:6px; border-radius:var(--r-tag); background:rgba(36,36,36,.12); overflow:hidden; margin-bottom:24px; }
.live-bar i { display:block; height:100%; background:var(--off-black); border-radius:var(--r-tag); transition:width 1s var(--ease); }
.live-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.live-cell { background:var(--parchment); border:1px solid var(--ash); border-radius:16px; padding:14px 16px; }
.live-cell span { display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--smoke); margin-bottom:6px; }
.live-cell b { font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--off-black); }
.live-foot { display:flex; gap:18px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.live-foot .ok { color:var(--graphite); }
.process-tag {
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--lake); border:1px solid rgba(43,89,209,.35); border-radius:var(--r-tag); padding:7px 11px;
}
.process-metrics {
  display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:10px; margin-bottom:14px;
}
.process-metrics > div {
  min-width:0; padding:14px 15px; border:1px solid rgba(36,36,36,.13); border-radius:16px;
  background:rgba(246,243,241,.58);
}
.process-metrics b {
  display:block; color:var(--off-black); font-family:var(--serif); font-size:1.65rem;
  font-weight:400; line-height:1; letter-spacing:-.02em; white-space:nowrap;
}
.process-metrics span {
  display:block; margin-top:7px; color:var(--graphite); font-family:var(--mono);
  font-size:10px; line-height:1.3; letter-spacing:.035em; text-transform:uppercase;
}
.process-flow { list-style:none; display:grid; gap:12px; }
.process-flow li {
  display:grid; grid-template-columns:50px 1fr; gap:16px; align-items:center;
  background:rgba(246,243,241,.88); border:1px solid rgba(36,36,36,.14); border-radius:18px; padding:17px 18px;
  animation:processStep 8s var(--ease) infinite;
}
.process-flow li > span {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--off-black); color:var(--parchment); font-family:var(--mono); font-size:13px;
  transition:.3s var(--ease);
}
.process-flow b {
  display:block; color:var(--off-black); font-family:var(--serif); font-size:1.34rem;
  line-height:1.15; font-weight:400; margin-bottom:5px;
}
.process-flow small { display:block; color:var(--graphite); font-family:var(--mono); font-size:13px; line-height:1.45; }
.process-flow li:nth-child(2) { animation-delay:2s; }
.process-flow li:nth-child(3) { animation-delay:4s; }
.process-flow li:nth-child(4) { animation-delay:6s; }
@keyframes processStep {
  0%, 18% {
    background:#fff; border-color:rgba(43,89,209,.55);
    box-shadow:0 8px 24px rgba(43,89,209,.1);
  }
  24%, 100% {
    background:rgba(246,243,241,.88); border-color:rgba(36,36,36,.14);
    box-shadow:none;
  }
}
.process-note {
  margin-top:18px; padding-top:18px; border-top:1px solid rgba(36,36,36,.18);
  font-family:var(--mono); font-size:13px; line-height:1.55; color:var(--graphite);
}

.marketplaces {
  position:relative; z-index:1; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-top:64px; padding-top:28px; border-top:1px solid var(--ash);
}
.marketplaces span { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--smoke); }
.marketplaces b { font-family:var(--serif); font-weight:400; font-size:1.3rem; color:var(--graphite); transition:.2s; }
.marketplaces b:hover { color:var(--off-black); }

/* ============ ABOUT ============ */
.about-inner { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.about-copy h2 { margin-bottom:24px; }
.lead { font-family:var(--mono); font-size:18px; color:var(--graphite); margin-bottom:18px; letter-spacing:-.02em; line-height:1.5; }
.about-stats { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.about-stats li { background:transparent; border:1px solid var(--ash); border-radius:var(--r-card); padding:28px; transition:.2s var(--ease); }
.about-stats li:hover { border-color:var(--off-black); background:var(--parchment-2); }
.about-stats b { display:block; font-family:var(--serif); font-weight:400; font-size:1.7rem; color:var(--off-black); margin-bottom:8px; }
.about-stats span { font-family:var(--mono); font-size:13px; color:var(--graphite); letter-spacing:-.02em; }

/* ============ SERVICES ============ */
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.card { background:transparent; border:1px solid var(--ash); border-radius:var(--r-card); padding:32px; transition:.22s var(--ease); }
.card:hover { border-color:var(--off-black); background:var(--parchment-2); }
.card-ico { font-size:1.6rem; margin-bottom:20px; }
.card h3 { font-size:1.4rem; margin-bottom:12px; }
.card p { font-family:var(--mono); color:var(--graphite); font-size:14px; letter-spacing:-.02em; }
/* Одна цветная карточка (periwinkle) — FBO */
.card-extra { background:var(--periwinkle); border-color:transparent; }
.card-extra:hover { background:var(--periwinkle); border-color:var(--off-black); }

/* ============ WAREHOUSE ============ */
.warehouse-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.warehouse-copy h2 { margin-bottom:24px; }
.feature-list { list-style:none; margin:26px 0; display:grid; gap:14px; }
.feature-list li { display:flex; gap:12px; align-items:flex-start; font-family:var(--mono); font-size:15px; color:var(--graphite); letter-spacing:-.02em; }
.feature-list span { color:var(--lake); font-weight:700; }
.warehouse-addr { margin-top:26px; padding:18px 20px; border:1px solid var(--ash); border-radius:16px; font-family:var(--mono); font-size:14px; color:var(--graphite); letter-spacing:-.02em; }
.warehouse-visual { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wv-tile { border:1px solid var(--ash); border-radius:var(--r-card); padding:30px 26px; min-height:150px; display:flex; flex-direction:column; justify-content:center; gap:10px; transition:.2s var(--ease); }
.wv-tile:first-child { background:var(--periwinkle); border-color:transparent; }
.wv-tile.wide { grid-column:1 / -1; min-height:auto; padding:26px; }
.wv-tile:hover { border-color:var(--off-black); }
.wv-tile:first-child:hover { border-color:var(--off-black); }
.wv-tile b { font-family:var(--serif); font-weight:400; font-size:2.1rem; color:var(--off-black); font-variant-numeric:tabular-nums; }
.wv-tile span { font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--smoke); }

/* ============ ADVANTAGES ============ */
.adv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.adv { border:1px solid var(--ash); border-radius:var(--r-card); padding:32px; transition:.2s var(--ease); }
.adv:hover { border-color:var(--off-black); background:var(--parchment-2); }
.adv b { font-family:var(--mono); font-weight:500; font-size:13px; letter-spacing:.06em; color:var(--smoke); display:block; margin-bottom:18px; }
.adv h3 { font-size:1.35rem; margin-bottom:10px; }
.adv p { font-family:var(--mono); color:var(--graphite); font-size:14px; letter-spacing:-.02em; }

/* ============ QUIZ ============ */
.quiz-wrap { max-width:840px; }
.quiz-head { text-align:center; margin-bottom:48px; }
.quiz-card { border:1px solid var(--ash); border-radius:var(--r-panel); padding:44px; min-height:430px; display:flex; flex-direction:column; background:var(--parchment); }
.quiz-progress { margin-bottom:32px; }
.quiz-progress-bar { height:4px; border-radius:var(--r-tag); background:var(--lake); width:16.6%; transition:width .4s var(--ease); }
.quiz-progress-label { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--smoke); }
.quiz-step { border:0; display:none; animation:fade .35s var(--ease); }
.quiz-step.is-active { display:block; }
@keyframes fade { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.quiz-step legend { max-width:680px; font-family:var(--serif); font-weight:400; font-size:1.85rem; line-height:1.2; margin-bottom:28px; letter-spacing:-.02em; }
.options { display:grid; gap:12px; }
.options-multi { grid-template-columns:1fr 1fr; }
.opt {
  display:flex; align-items:center; gap:13px; min-height:58px; padding:15px 18px; cursor:pointer;
  background:transparent; border:1px solid var(--ash); border-radius:16px;
  font-family:var(--mono); font-size:14px; line-height:1.4; letter-spacing:-.015em; transition:.18s var(--ease);
}
.opt:hover { border-color:var(--off-black); }
.opt input { accent-color:var(--lake); width:18px; height:18px; flex-shrink:0; }
.opt:has(input:checked) { border-color:var(--lake); background:rgba(43,89,209,.06); }
.fields { display:grid; gap:14px; }
.fields input, .fields textarea, .lead-form input, .lead-form textarea {
  width:100%; padding:15px 18px; background:var(--parchment); color:var(--off-black);
  border:1px solid var(--ash); border-radius:16px; font-family:var(--mono); font-size:15px; letter-spacing:-.02em; resize:vertical;
}
.fields input:focus, .fields textarea:focus, .lead-form input:focus, .lead-form textarea:focus {
  outline:none; border-color:var(--lake);
}
.fields input::placeholder, .fields textarea::placeholder,
.lead-form input::placeholder, .lead-form textarea::placeholder { color:var(--smoke); text-transform:uppercase; font-size:13px; letter-spacing:.03em; }
.consent { display:flex; align-items:flex-start; gap:10px; font-family:var(--mono); font-size:13px; color:var(--smoke); cursor:pointer; letter-spacing:-.01em; }
.consent input { accent-color:var(--lake); width:17px; height:17px; margin-top:2px; flex-shrink:0; }
.quiz-nav { display:flex; gap:12px; margin-top:auto; padding-top:30px; }
.quiz-nav .btn-primary { margin-left:auto; }
.btn:disabled { opacity:.55; cursor:wait; }
.form-error, .lead-note.is-error {
  margin-top:14px; color:#b42318; font-family:var(--mono); font-size:12px; line-height:1.45;
}
.quiz-nav .btn-ghost { margin-right:auto; }
.quiz-success { text-align:center; padding:28px 0; }
.quiz-success .qs-ico { width:64px; height:64px; border-radius:50%; background:var(--lake); color:#fff; display:grid; place-items:center; font-size:2rem; margin:0 auto 20px; }
.quiz-success h3 { font-size:1.7rem; margin-bottom:12px; }
.quiz-success p { font-family:var(--mono); color:var(--graphite); font-size:15px; }

/* ============ LEAD ============ */
.lead-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  border:1px solid var(--ash); border-radius:var(--r-panel); padding:56px; background:var(--periwinkle);
}
.lead-copy h2 { margin-bottom:20px; }
.lead-points { list-style:none; margin-top:24px; display:grid; gap:12px; }
.lead-points li { font-family:var(--mono); font-size:15px; color:var(--graphite); letter-spacing:-.02em; }
.lead-form { display:grid; gap:14px; background:var(--parchment); border:1px solid var(--ash); border-radius:var(--r-card); padding:30px; }
.lead-note { font-family:var(--mono); color:var(--lake); font-size:13px; text-transform:uppercase; letter-spacing:.03em; }

/* ============ CONTACTS ============ */
.contacts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.contact-card { border:1px solid var(--ash); border-radius:var(--r-card); padding:32px; transition:.2s var(--ease); }
.contact-card:hover { border-color:var(--off-black); background:var(--parchment-2); }
.contact-card .ci { font-size:1.5rem; display:block; margin-bottom:16px; }
.contact-card h3 { font-size:1.35rem; margin-bottom:12px; }
.contact-card p { font-family:var(--mono); color:var(--graphite); font-size:14px; letter-spacing:-.02em; }
.contact-card p.muted { color:var(--smoke); font-size:12px; margin-top:8px; text-transform:uppercase; letter-spacing:.03em; }
.contact-link { color:var(--off-black); border-bottom:1px solid var(--ash); transition:.2s var(--ease); }
.contact-link:hover { color:var(--lake); border-bottom-color:var(--lake); }

/* ============ FOOTER ============ */
.site-footer { background:var(--off-black); color:var(--parchment); padding:72px 0 32px; border-top:0 !important; }
.site-footer .logo-mark { background:var(--parchment); color:var(--off-black); }
.site-footer .logo-text { color:var(--parchment); }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:44px; padding-bottom:40px; border-bottom:1px solid rgba(246,243,241,.14); }
.footer-brand p { font-family:var(--mono); color:#a7a3a1; font-size:13px; margin-top:18px; max-width:340px; letter-spacing:-.01em; }
.footer-nav, .footer-legal { display:flex; flex-direction:column; gap:12px; }
.footer-nav b, .footer-legal b { font-family:var(--mono); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#a7a3a1; margin-bottom:8px; }
.footer-nav a, .footer-legal a { font-family:var(--mono); color:var(--parchment); font-size:13px; letter-spacing:-.01em; transition:.2s; }
.footer-nav a:hover, .footer-legal a:hover { color:var(--sky); }
.footer-legal .muted { font-family:var(--mono); color:#7d7a78; font-size:11px; margin-top:8px; text-transform:uppercase; letter-spacing:.03em; line-height:1.7; }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#7d7a78; }

/* ============ FAB ============ */
.fab {
  position:fixed; right:28px; bottom:28px; z-index:90;
  background:var(--off-black); color:var(--parchment); padding:15px 26px; border-radius:var(--r-pill);
  font-family:var(--mono); font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  transform:translateY(120px); transition:.4s var(--ease); opacity:0;
}
.fab.show { transform:none; opacity:1; }
.fab:hover { background:var(--ink); }

/* ============ REVEAL ============ */
.js .reveal { opacity:0; transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal[data-anim="up"], .js .reveal:not([data-anim]) { transform:translateY(20px); }
.js .reveal[data-anim="left"]  { transform:translateX(-28px); }
.js .reveal[data-anim="right"] { transform:translateX(28px); }
.js .reveal[data-anim="scale"] { transform:scale(.96) translateY(16px); }
.js .reveal.in { opacity:1; transform:none; }
.js .live-panel { transition:opacity .7s var(--ease), transform .2s var(--ease); }

/* Подчёркивание заголовков секций — тонкая hairline */
.section-head h2 { position:relative; }
.section-head h2::after {
  content:''; display:block; width:56px; height:1px; margin:24px auto 0; background:var(--off-black);
  transform:scaleX(0); transition:transform .7s .15s var(--ease);
}
.section-head.in h2::after { transform:scaleX(1); }

/* Nav hover — тонкая линия */
.nav a::after { content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--off-black); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
.nav a:hover::after { transform:scaleX(1); }

.quiz-progress-bar { animation:none; }

/* ============ SERVICES (переработанный блок) ============ */
.svc-ico svg, .svc-stat .ico svg, .svc-feat .fico svg, .svc-arrow svg {
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; fill:none;
}
/* верхняя часть: интро + иллюстрация */
.services-top { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:64px; }
.services-intro h2 { font-size:clamp(2rem,4vw,3.1rem); margin-bottom:20px; }
.services-intro .section-sub { margin:0 0 32px; text-align:left; max-width:440px; }
.svc-stats { display:flex; flex-direction:column; gap:12px; max-width:380px; }
.svc-stat { display:flex; align-items:center; gap:14px; border:1px solid var(--ash); border-radius:16px; padding:13px 18px; transition:.2s var(--ease); }
.svc-stat:hover { border-color:var(--off-black); }
.svc-stat .ico { width:40px; height:40px; border-radius:11px; background:rgba(43,89,209,.1); display:grid; place-items:center; flex-shrink:0; }
.svc-stat .ico svg { width:20px; height:20px; stroke:var(--lake); }
.svc-stat b { font-family:var(--serif); font-weight:400; font-size:1.15rem; display:block; line-height:1.1; }
.svc-stat em { font-style:normal; font-family:var(--mono); font-size:11px; letter-spacing:.03em; text-transform:uppercase; color:var(--smoke); }
.services-illu img { width:100%; height:auto; }

/* сетка карточек */
.svc-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.svc-card { position:relative; display:flex; flex-direction:column; border:1px solid var(--ash); border-radius:var(--r-card); overflow:hidden; background:var(--parchment); transition:.22s var(--ease); }
.svc-card:hover { border-color:var(--off-black); transform:translateY(-3px); }

/* обложка карточки — фото */
.svc-cover { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--parchment-2); }
.svc-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.svc-card:hover .svc-cover img { transform:scale(1.05); }
/* нижняя виньетка, чтобы номер/иконка не терялись на светлых кадрах */
.svc-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18)); pointer-events:none; }

/* иконка + номер как оверлей на фото */
.svc-card-top { position:absolute; z-index:1; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; }
.svc-ico { width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.svc-ico svg { width:22px; height:22px; stroke:var(--lake); }
.svc-num { font-family:var(--mono); font-size:12px; color:var(--off-black); background:rgba(255,255,255,.92); backdrop-filter:blur(6px); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; box-shadow:0 4px 12px rgba(0,0,0,.08); }

/* тело карточки — текст */
.svc-body { display:flex; flex-direction:column; padding:22px 24px 22px; min-height:180px; }
.svc-card h3 { font-size:1.3rem; margin-bottom:10px; }
.svc-card p { font-family:var(--mono); font-size:13.5px; line-height:1.5; letter-spacing:-.02em; color:var(--graphite); margin-bottom:18px; }
.svc-arrow { margin-top:auto; align-self:flex-end; width:42px; height:42px; border-radius:50%; border:1px solid var(--ash); display:grid; place-items:center; color:var(--off-black); transition:.2s var(--ease); }
.svc-arrow svg { width:18px; height:18px; stroke:currentColor; }
.svc-card:hover .svc-arrow { background:var(--lake); border-color:var(--lake); color:#fff; }

/* FBO — синяя карта, фото затонировано в Lake */
.svc-card--fbo { background:linear-gradient(180deg,#3f66d6,#2b59d1); border-color:transparent; }
.svc-cover--fbo img { filter:grayscale(.9) brightness(.75) contrast(1.05); mix-blend-mode:luminosity; }
.svc-cover--fbo { background:var(--lake); }
.svc-cover--fbo::after { background:linear-gradient(180deg, rgba(43,89,209,.55), rgba(43,89,209,.85)); }
.svc-card--fbo h3, .svc-card--fbo p { color:#fff; }
.svc-card--fbo p { color:rgba(255,255,255,.85); }
.svc-card--fbo .svc-num { background:rgba(255,255,255,.18); color:#fff; box-shadow:none; }
.svc-ico--light { background:rgba(255,255,255,.22) !important; box-shadow:none !important; }
.svc-ico--light svg { stroke:#fff !important; }
.btn-fbo { margin-top:auto; align-self:flex-start; background:#fff; color:var(--lake); padding:12px 22px; }
.btn-fbo::after { content:none; }
.btn-fbo:hover { background:var(--parchment); }

/* строка преимуществ */
.svc-features { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:52px; padding-top:44px; border-top:1px solid var(--ash); }
.svc-feat { display:flex; gap:14px; align-items:flex-start; }
.svc-feat .fico { width:44px; height:44px; border-radius:12px; background:rgba(43,89,209,.09); display:grid; place-items:center; flex-shrink:0; }
.svc-feat .fico svg { width:22px; height:22px; stroke:var(--lake); }
.svc-feat b { font-family:var(--serif); font-weight:400; font-size:1.08rem; display:block; margin-bottom:5px; letter-spacing:-.01em; }
.svc-feat em { font-style:normal; font-family:var(--mono); font-size:12.5px; line-height:1.45; letter-spacing:-.02em; color:var(--graphite); }

/* ============ MARKING + WMS ============ */
.operations { background:var(--parchment-2); }
.operations-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px; align-items:stretch; }
.operation-card {
  display:flex; flex-direction:column; min-height:100%;
  border:1px solid var(--ash); border-radius:var(--r-card); padding:32px;
  background:var(--parchment);
}
.operation-card--accent { background:var(--periwinkle); border-color:transparent; }
.operation-card--route { background:var(--off-black); color:var(--parchment); border-color:var(--off-black); }
.operation-kicker {
  align-self:flex-start; margin-bottom:26px; padding:7px 12px; border-radius:var(--r-tag);
  border:1px solid currentColor; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lake);
}
.operation-card--route .operation-kicker { color:var(--sky); }
.operation-card h3 { font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:16px; }
.operation-card--route h3 { color:var(--parchment); }
.operation-card > p { font-family:var(--mono); color:var(--graphite); font-size:13px; line-height:1.55; margin-bottom:22px; }
.operation-card--route > p { color:#c9c6c4; }
.operation-card--route > p.muted { color:#8f8b89; margin-top:auto; margin-bottom:0; }
.operation-list { list-style:none; display:grid; gap:11px; margin-top:auto; }
.operation-list li {
  position:relative; padding-left:20px; font-family:var(--mono); font-size:12.5px; line-height:1.45; color:var(--graphite);
}
.operation-list li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--lake); font-weight:700; }
.route-line {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:16px 0 24px; font-family:var(--mono); font-size:12px; text-transform:uppercase;
}
.route-line b { color:var(--parchment); font-weight:500; }
.route-line i { color:var(--sky); font-style:normal; }

@media (max-width:960px){
  .services-top { grid-template-columns:1fr; gap:36px; }
  .services-illu { order:-1; max-width:460px; }
  .svc-cards { grid-template-columns:1fr 1fr; }
  .svc-features { grid-template-columns:1fr 1fr; gap:22px; }
  .operations-grid { grid-template-columns:1fr 1fr; }
  .operation-card--accent { grid-row:span 2; }
}
@media (max-width:720px){
  .svc-cards { grid-template-columns:1fr; }
  .svc-features { grid-template-columns:1fr; }
  .svc-stats { max-width:none; }
  .operations-grid { grid-template-columns:1fr; }
  .operation-card--accent { grid-row:auto; }
  .operation-card { padding:26px 22px; }
}

/* ============ DARK SECTIONS (инверсия на off-black, стиль Monad сохранён) ============ */
.section-dark { background:var(--off-black); color:var(--parchment); border-top-color:transparent; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark legend { color:var(--parchment); }
.section-dark .eyebrow { color:#a7a3a1; }
.section-dark .section-sub, .section-dark .lead { color:#c2bebc; }
.section-dark .muted { color:#8f8b89; }
.section-dark .section-head h2::after { background:var(--parchment); }

/* hairline-бордеры на чёрном → полупрозрачный светлый (кроме periwinkle-карточек) */
.section-dark .card,
.section-dark .adv,
.section-dark .contact-card,
.section-dark .warehouse-addr,
.section-dark .wv-tile:not(:first-child) { border-color:rgba(246,243,241,.16); }
.section-dark .card:hover,
.section-dark .adv:hover,
.section-dark .contact-card:hover,
.section-dark .wv-tile:not(:first-child):hover { border-color:var(--parchment); background:rgba(246,243,241,.04); }

/* приглушённый текст на чёрном */
.section-dark .card p, .section-dark .adv p,
.section-dark .feature-list li, .section-dark .warehouse-addr,
.section-dark .wv-tile:not(:first-child) span { color:#c2bebc; }
.section-dark .adv b { color:#8f8b89; }
.section-dark .wv-tile:not(:first-child) b { color:var(--parchment); }

/* ghost-кнопки на чёрном */
.section-dark .btn-ghost { border-color:var(--parchment); color:var(--parchment); }
.section-dark .btn-ghost:hover { background:var(--parchment); color:var(--off-black); }

/* HERO на чёрном */
.section-dark .badge { background:rgba(246,243,241,.06); border-color:rgba(246,243,241,.22); color:#d8d5d3; }
.section-dark .hero-sub { color:#c9c6c4; }
.section-dark .hero-metrics b { color:var(--parchment); }
.section-dark .hero-metrics span { color:#8f8b89; }
.section-dark .marketplaces { border-top-color:rgba(246,243,241,.16); }
.section-dark .marketplaces span { color:#8f8b89; }
.section-dark .marketplaces b { color:#c9c6c4; }
.section-dark .marketplaces b:hover { color:var(--parchment); }
/* свечение-wash на чёрном — ярче */
.section-dark .hero-glow { opacity:.9; mix-blend-mode:screen; }

/* LEAD (CTA) на чёрном: панель делаем ink с рамкой — сильный призыв */
.lead.section-dark .lead-inner { background:#141414; border-color:rgba(246,243,241,.18); }
.lead.section-dark .lead-copy h2 { color:var(--parchment); }
.lead.section-dark .lead-points li { color:#c9c6c4; }
.lead.section-dark .lead-form { background:rgba(246,243,241,.05); border-color:rgba(246,243,241,.16); }
.lead.section-dark .lead-form input, .lead.section-dark .lead-form textarea { background:rgba(246,243,241,.04); border-color:rgba(246,243,241,.2); color:var(--parchment); }
.lead.section-dark .lead-form input::placeholder, .lead.section-dark .lead-form textarea::placeholder { color:#8f8b89; }
.lead.section-dark .consent { color:#a7a3a1; }

/* Адаптивный хедер: над тёмным героем (до скролла) — светлый */
.site-header:not(.scrolled) .logo-mark { background:var(--parchment); color:var(--off-black); }
.site-header:not(.scrolled) .logo-text { color:var(--parchment); }
.site-header:not(.scrolled) .logo-text em { color:rgba(246,243,241,.65); }
.site-header:not(.scrolled) .nav a { color:var(--parchment); }
.site-header:not(.scrolled) .nav a:hover { color:#c9c6c4; }
.site-header:not(.scrolled) .nav a::after { background:var(--parchment); }
.site-header:not(.scrolled) .burger span { background:var(--parchment); }

/* ============ RIBBONS (бегущие ленты) ============ */
.ribbon { overflow:hidden; width:100%; background:var(--parchment); border-top:1px solid var(--ash); border-bottom:1px solid var(--ash); }
.ribbon--dark { background:var(--off-black); border-color:transparent; }
.ribbon--peri { background:var(--periwinkle); border-color:transparent; }
main > .ribbon { border-top:1px solid var(--ash); }        /* hairline к соседней секции */
.ribbon--dark + section, .ribbon--peri + section { border-top:0; }
.ribbon-track { display:flex; width:max-content; animation:marquee 36s linear infinite; will-change:transform; }
.ribbon--reverse .ribbon-track { animation-direction:reverse; }
.ribbon:hover .ribbon-track { animation-play-state:paused; }
.ribbon-group { display:flex; align-items:center; flex-shrink:0; padding:15px 0; }
.ribbon-group span {
  font-family:var(--mono); font-weight:500; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--off-black); padding:0 22px; white-space:nowrap;
}
.ribbon--dark .ribbon-group span { color:var(--parchment); }
.ribbon-group i { font-style:normal; font-size:11px; color:var(--coral); transform:translateY(-1px); }
.ribbon--peri .ribbon-group i { color:var(--lake); }
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .reveal { opacity:1 !important; transform:none !important; }
  .hero-glow, .pulse::after, .ribbon-track { animation:none !important; transform:none !important; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero-inner, .about-inner, .warehouse-inner, .lead-inner { grid-template-columns:1fr; gap:44px; }
  .cards { grid-template-columns:1fr 1fr; }
  .adv-grid { grid-template-columns:1fr 1fr; }
  .contacts-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .lead-inner { padding:36px 28px; }
}
@media (max-width:720px){
  .container { padding:0 20px; }
  .nav { display:none; }
  .nav.open {
    display:flex; flex-direction:column; position:absolute; top:76px; left:0; right:0;
    background:var(--parchment); padding:22px 24px; border-bottom:1px solid var(--ash); gap:18px;
  }
  .site-header:not(.scrolled) .nav.open a { color:var(--off-black); }
  .site-header:not(.scrolled) .nav.open a::after { background:var(--off-black); }
  .header-cta { display:none; }
  .burger { display:flex; margin-left:auto; }
  .announce { height:56px; }
  .announce-inner { min-height:56px; gap:10px; }
  .announce-text { max-width:220px; font-size:9px; line-height:1.35; letter-spacing:.025em; }
  .announce-pill { padding:7px 10px; font-size:9px; flex-shrink:0; }
  .site-header { top:56px; }
  .section { padding:76px 0; }
  .hero { padding:164px 0 48px; }
  .hero-metrics { grid-template-columns:1fr 1fr; gap:20px; }
  .live-panel { padding:26px 20px; }
  .live-head { align-items:flex-start; gap:12px; }
  .live-title { font-size:12px; }
  .process-tag { font-size:9px; padding:6px 8px; }
  .process-metrics { grid-template-columns:1fr 1fr 1fr; gap:7px; }
  .process-metrics > div { padding:12px 9px; }
  .process-metrics b { font-size:1.3rem; }
  .process-metrics span { font-size:8px; }
  .process-flow li { grid-template-columns:44px 1fr; gap:12px; padding:14px 13px; }
  .process-flow li > span { width:42px; height:42px; }
  .process-flow b { font-size:1.15rem; }
  .process-flow small, .process-note { font-size:11.5px; }
  .cards, .adv-grid, .warehouse-visual, .live-grid { grid-template-columns:1fr; }
  .about-stats { grid-template-columns:1fr 1fr; }
  .options-multi { grid-template-columns:1fr; }
  .quiz-card { min-height:460px; padding:30px 22px; }
  .quiz-step legend { font-size:1.55rem; margin-bottom:22px; }
  .footer-inner { grid-template-columns:1fr; }
  .fab { display:none; }
  /* горизонтальные reveal → вертикальные, чтобы не было overflow */
  .js .reveal[data-anim="left"], .js .reveal[data-anim="right"] { transform:translateY(20px); }
  .js .reveal.in { transform:none; }
}