:root{
  --bg:#f8fafc; --card:#ffffff; --txt:#0f172a; --muted:#475569;
  --accent:#2563eb; --accent-2:#10b981; --ring:rgba(37,99,235,.18); --shadow:0 14px 32px rgba(2,6,23,.08);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif;color:var(--txt);background:var(--bg);line-height:1.65}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid #e5e7eb;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand img{width:34px;height:34px}
.nav a{color:var(--muted);text-decoration:none;margin:0 12px}
.nav a:hover{color:#0f172a}
.cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;background:linear-gradient(135deg,#60a5fa,#93c5fd);color:#0b132a;text-decoration:none;font-weight:700;border:0;box-shadow:var(--shadow)}
.cta.ghost{background:#eef2ff;color:#1e293b;border:1px solid #dbeafe}
.section{padding:40px 0} .card{background:var(--card);border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow);padding:18px}
.grid{display:grid;gap:16px} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:920px){.grid.cols-3{grid-template-columns:repeat(2,1fr)} .grid.cols-2{grid-template-columns:1fr}}
h1{font-size:40px;line-height:1.18;margin:0 0 10px} .lead{color:var(--muted)}
.input, select, textarea{width:100%;padding:12px 14px;border:1px solid #e5e7eb;background:#ffffff;color:#0f172a;border-radius:12px;outline:none}
.input:focus, select:focus, textarea:focus{border-color:#93c5fd;box-shadow:0 0 0 4px var(--ring)}
/* Estimation table */
.est-table{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:8px}
.est-table th,.est-table td{text-align:left;padding:10px 12px;background:#ffffff;border:1px solid #e5e7eb}
.est-table th{background:#f1f5f9;font-weight:700}
.est-table tr > *:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.est-table tr > *:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px;text-align:right}
.est-note{color:#475569;font-size:12px;margin-top:6px}
/* FAQ accordions */
.faq details{border:1px solid #e5e7eb;border-radius:12px;background:#fff;padding:10px 12px}
.faq details+details{margin-top:10px}
.faq summary{cursor:pointer;list-style:none;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq .answer{color:#475569;margin-top:8px}
/* Cases */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:920px){.cases{grid-template-columns:1fr}}
.footer{padding:24px 0;color:#64748b;border-top:1px solid #e5e7eb}
.small{font-size:12px;color:#64748b}

/* Toast */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.show{opacity:1}
/* Image preview */
.preview{display:flex;align-items:center;gap:10px;margin-top:8px}
.preview img{max-height:64px;border-radius:10px;border:1px solid #e5e7eb}
/* Inline helpers */
.helper{font-size:12px;color:#64748b}
.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:920px){.subgrid{grid-template-columns:1fr}}

/* Sticky CTA for mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;display:none;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -8px 24px rgba(0,0,0,.06);padding:10px 16px;gap:10px;z-index:50}
@media (max-width:820px){.sticky-cta{display:flex;justify-content:space-between;align-items:center}}
/* Dropzone */
.dropzone{border:2px dashed #93c5fd;border-radius:12px;padding:12px;text-align:center;background:#f8fafc;color:#475569}
.dropzone.drag{background:#eef2ff}

/* Top contact bar */
.topbar{position:sticky;top:0;background:#ffffff;border-bottom:1px solid #e5e7eb;z-index:30}
.topbar .row{max-width:1140px;margin:0 auto;padding:6px 20px;display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.topbar a{color:#0f172a;text-decoration:none}
.topbar .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff}
/* Shift header below topbar */
header{top:0}


/* Masthead column layout */
.mast-col{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0;text-align:center}
.mast-links a{margin:0 8px;color:#475569;text-decoration:none}
.mast-links a:hover{color:#0f172a}
.mast-contacts{margin-top:2px}
.pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#fff;text-decoration:none;color:#0f172a}
.icon{width:26px;height:26px;vertical-align:-4px;opacity:.95}
.service-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}

/* Refined masthead */
header{background:#ffffff;border-bottom:1px solid #e5e7eb}
.mast-grid{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 0}
.mast-left{display:flex;align-items:center;gap:10px}
.mast-left .brand span{font-weight:800;font-size:18px}
.mast-nav a{font-size:14px;margin:0 10px;color:#475569;text-decoration:none}
.mast-nav a:hover{color:#0f172a}
.mast-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.cta.cta-sm{padding:8px 12px;border-radius:12px;font-size:14px}
.pill.pill-sm{padding:6px 10px;font-size:13px}
.mast-contacts{font-size:12px;color:#64748b;text-align:right;margin-top:2px}
@media (max-width:920px){
  .mast-grid{grid-template-columns:1fr;gap:6px;text-align:left}
  .mast-actions{justify-content:flex-start}
  .mast-contacts{text-align:left}
}

/* --- Masthead readability upgrades --- */
header{background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 4px 18px rgba(2,6,23,.04)}
.mast-grid{display:grid;grid-template-columns:1fr auto auto;grid-auto-rows:auto;gap:10px;align-items:center;padding:8px 0}
.mast-left .brand span{font-weight:800;font-size:18px}
.mast-nav a{font-size:15px;margin:0 12px;color:#0f172a;text-decoration:none;font-weight:600}
.mast-nav a:hover{color:#2563eb;text-decoration:underline}
.mast-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.cta.cta-sm{padding:8px 12px;border-radius:12px;font-size:14px}
.pill.pill-sm{padding:6px 10px;font-size:13px}
.mast-contacts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.tel-list{display:flex;flex-wrap:wrap;gap:6px}
.tel-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;background:#f8fafc;color:#0f172a;font-weight:600}
.tel-chip img{width:16px;height:16px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill.pill-ico{display:inline-flex;align-items:center;gap:6px}
.pill.pill-ico img{width:16px;height:16px}
@media (max-width:920px){
  .mast-grid{grid-template-columns:1fr;gap:6px}
  .mast-actions{justify-content:flex-start}
}

/* Active nav state (scroll-spy) */
.mast-nav a.active{color:var(--accent);border-bottom:2px solid #93c5fd}
/* Micro-animations */
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(2,6,23,.10)}
.cta,.pill{transition:transform .15s ease, box-shadow .15s ease}
.cta:hover,.pill:hover{transform:translateY(-1px)}
/* Readability tweaks */
p,.lead{max-width:65ch}

/* Shrinking header */
header{transition:padding .18s ease, box-shadow .18s ease, border-color .18s ease}
header.shrink .mast-grid{padding:4px 0}
header.shrink .mast-left .brand span{font-size:16px}
header.shrink .mast-nav a{font-size:13px}
header.shrink .cta.cta-sm{padding:6px 10px}
header.shrink .pill.pill-sm{padding:5px 8px}
/* Reveal on scroll */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease}
.js .reveal.visible{opacity:1; transform:none}
/* Focus styles for a11y */
a:focus, button:focus{outline:2px solid #93c5fd; outline-offset:2px; border-radius:8px}

/* Admin config modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.45)}
.modal-card{position:relative;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(2,6,23,.25);padding:16px;max-width:560px;width:92%}
.modal-card h3{margin:0 0 8px 0}
.modal-card .input{width:100%}


/* --- Tweaks v5 (2025-09-18): spacing, visuals, and motion for three key blocks --- */
.section.tight{ padding-top:18px; padding-bottom:18px; }
#hero.tight-bottom{ padding-bottom:18px; }
.section + .section{ margin-top:6px; }

/* Consistent grid gaps for service cards */
#services .grid{ display:grid; gap:16px; }

/* Card presentation */
.card{ border:1px solid #e5e7eb; border-radius:16px; }
.card.elevated{ box-shadow: var(--shadow); }
.card.ribbon{ position:relative; overflow:hidden; }
.card.ribbon:before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  margin:-16px -16px 12px; border-radius:16px 16px 0 0;
}

/* Headings */
.h2-center h2{ text-align:center; margin:4px 0 10px; }

/* Motion (micro-interactions) */
.card{ transition: transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 18px 42px rgba(2,6,23,.12); }

/* Reveal polish */
.reveal{ will-change: transform, opacity; }
.js .reveal{ transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; }
.js .reveal.visible{ transform: none; }


/* --- Extra tweaks (2025-09-18, round 2) --- */

/* Reduce spacing even more */
.section{ padding:22px 0; }
.section.tight{ padding-top:12px; padding-bottom:12px; }
#hero.tight-bottom{ padding-bottom:12px; }
.section + .section{ margin-top:2px; }

/* Card liveliness */
.card{ transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.card:hover{ transform: translateY(-4px) scale(1.01); background:#fdfefe; box-shadow:0 20px 48px rgba(2,6,23,.14); }
.card.elevated.ribbon:hover:before{ height:6px; }

/* Animated icons in services */
#services .icon{ transition: transform .4s ease; }
#services .card:hover .icon{ transform: rotate(-6deg) scale(1.1); }

/* Headings subtle animation */
.h2-center h2{ position:relative; display:inline-block; }
.h2-center h2:after{ content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:30px; height:3px;
 background:var(--accent-2); border-radius:2px; opacity:.7; transition:width .3s ease; }
.h2-center h2:hover:after{ width:60px; }


/* --- Ultra-compact rhythm (2025-09-18 rev2) --- */
.section{ padding-top:18px; padding-bottom:18px; }
.section.tight{ padding-top:10px; padding-bottom:10px; }
#hero.tight-bottom{ padding-bottom:10px; }
.section + .section{ margin-top:2px; }
h1,h2,h3{ margin:6px 0 8px; line-height:1.2; }
.lead{ margin-top:6px; }
#services .grid{ display:grid; gap:12px; }
.container{ max-width:1120px; } /* чуть компактнее */


/* Lively cards */
.card{ border:1px solid #e5e7eb; border-radius:16px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover{ transform: translateY(-3px); box-shadow: 0 18px 42px rgba(2,6,23,.12); border-color:#cbd5e1; }

/* Animated gradient top-accent for .ribbon */
.card.ribbon{ position:relative; overflow:hidden; }
.card.ribbon:before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.9;
}

/* Service icon subtle wiggle on hover */
.service-head img{ display:inline-block; transform: translateZ(0); transition: transform .18s ease; }
.card:hover .service-head img{ transform: translateY(-2px) rotate(-1deg); }



/* --- Ultra-tight compact mode (2025-09-18 rev3) --- */
.section{ padding-top:10px; padding-bottom:10px; }
.section.tight{ padding-top:6px; padding-bottom:6px; }
.section + .section{ margin-top:0; }
h1,h2,h3{ margin:4px 0 6px; line-height:1.15; }
.lead{ margin-top:4px; margin-bottom:4px; }
#services .grid{ gap:10px; }

/* Alive cards - minimal but interactive */
.card{ border:1px solid #e5e7eb; border-radius:14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover{ transform: translateY(-4px) scale(1.01); box-shadow:0 16px 40px rgba(2,6,23,.14); border-color:#cbd5e1; }

/* Ribbon accent for special blocks */
.card.ribbon:before{ height:2px; opacity:1; }

/* Service icons bounce subtly on hover */
.card:hover .service-head img{ transform: translateY(-3px) scale(1.05); transition: transform .25s cubic-bezier(.2,.7,.4,1.4); }
.service-head img{ transition: transform .2s ease; }

/* Heading center for key sections */
.h2-center h2{ text-align:center; font-weight:800; letter-spacing:-0.3px; }



/* --- Ultra-compact UI pass (2025-09-18 rev3) --- */
/* Scope: only sections already marked .section/.tight and their cards to avoid touching unrelated blocks */
.section{ padding-top:12px; padding-bottom:12px; }
.section.tight{ padding-top:6px; padding-bottom:6px; }
#hero.tight-bottom{ padding-bottom:6px; }
.section + .section{ margin-top:0; }

/* Headings & text rhythm (only inside .section/.tight) */
.section h1, .section h2, .section h3{ margin:4px 0 6px; line-height:1.18; }
.section .lead{ margin-top:4px; }

/* Services grid extremely compact */
#services .grid{ gap:8px; }

/* Card compaction & refined look ONLY within tight sections */
.section.tight .card{
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  background:#fff;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* Livelier hover (subtle) */
.section.tight .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(2,6,23,.14);
  border-color:#cbd5e1;
}

/* Micro-accent hairline on hover */
.section.tight .card::after{
  content: "";
  position:absolute; inset:0; pointer-events:none; border-radius:14px;
  border:1px solid transparent;
}
.section.tight .card:hover::after{
  border-color: rgba(37,99,235,.25);
}

/* Service icon micro-bounce on hover */
.section.tight .service-head img{ transition: transform .16s ease; }
.section.tight .card:hover .service-head img{ transform: translateY(-1px) rotate(-0.6deg) scale(1.02); }

/* Stagger a bit faster */
.js .reveal{ transition-duration:.32s; }


/* --- 2025-09-18 rev4: Why-us cards, gradient ribbon animation, sticky-cta polish --- */

/* Gradient ribbon animation */
@keyframes ribbonFlow{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}
.card.ribbon:before{
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size:200% 200%;
  animation: ribbonFlow 4s linear infinite;
}

/* Why-us cards grid */
.why-cards{gap:8px;margin-top:8px;}
.why-cards .card{display:flex;align-items:center;gap:8px; padding:10px;}
.why-cards .service-head{display:flex;align-items:center;gap:6px;font-size:14px;}
.why-cards strong{font-weight:600;}

/* Sticky CTA always active on mobile */
@media (max-width:820px){
  .sticky-cta{display:flex!important;justify-content:space-between;align-items:center;}
}


/* --- Enhancements (2025-09-18 rev4) --- */

/* Animated ribbon gradient for .card.ribbon */
@keyframes gradientShift{ 
  0%{ background-position:0% 50%; } 
  100%{ background-position:100% 50%; } 
}
.card.ribbon:before{
  animation: gradientShift 6s linear infinite;
  background-size:200% 100%;
}

/* "Почему мы" mini-cards */
.why-cards{ display:grid; gap:8px; grid-template-columns:repeat(2,1fr); margin-top:6px; }
.mini-card{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(2,6,23,.06); }
.mini-card strong{ font-weight:700; }
.mini-ic{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; font-size:13px; line-height:1; }

/* Mobile adjustments */
@media (max-width: 640px){
  .why-cards{ grid-template-columns:1fr; gap:6px; }
}

/* Sticky CTA mobile dock */
.sticky-cta{
  position:sticky;
  bottom:0;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  padding:8px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid #e5e7eb;
}
.sticky-cta span{ display:none; }
.sticky-cta .cta{ padding:8px 10px; border-radius:10px; box-shadow:none; }
@media (min-width: 768px){
  .sticky-cta{ position:static; background:transparent; border-top:0; justify-content:flex-end; padding:0; gap:8px; }
  .sticky-cta span{ display:inline; color:var(--muted); margin-right:auto; }
}

/* Extra compact spacing in these sections only */
.section.tight h2{ margin:2px 0 4px; }
.section.tight .mini-card{ padding:8px 10px; }