/* ========== Base ========== */
:root{
  --ink:#111; --muted:#6b7280; --line:#111; --bd:#e5e7eb;
  --hdr-h:72px;        /* fixed header height */
  --wip-h:32px;        /* fixed wip bar height */
}
@media (max-width:720px){ :root{ --hdr-h:92px; --wip-h:30px; } }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#fff; color:var(--ink); }
img,video{ max-width:100%; height:auto; display:block; }
.sr-only{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ========== Fixed Header ========== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--hdr-h);
  background:#fff; border-bottom:1px solid #000;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:8px 16px;
}
.logo img{ height:32px; }
.hdr-ctl{ display:flex; align-items:center; gap:14px; }

/* Telegram link */
.tg-link{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; color:inherit;
  border-bottom:1px solid #000; padding-bottom:1px;
  font:600 13px/1 Inter,system-ui;
}

/* Languages */
.lang{ display:flex; gap:8px; }
.lang button{
  border:1px solid #111; padding:4px 12px; border-radius:999px; background:#fff;
  font:700 13px/1 Inter,system-ui; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.lang button:hover{ background:#f3f4f6; transform:translateY(-1px); }
.lang button.active, .lang [aria-current="true"]{ background:#111; color:#fff; border-color:#111; }
.lang button:focus-visible{ outline:0; box-shadow:0 0 0 2px #1113; }

/* Mobile header layout */
@media (max-width:720px){
  .site-header{
    padding:8px 12px;
    display:grid; grid-template-columns:1fr; grid-auto-rows:auto; row-gap:6px;
    align-content:center; justify-items:center;
  }
  .logo{ order:1; }
  .logo img{ height:16px; }             /* ещё меньше логотип */
  .hdr-ctl{
    order:2; width:100%;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px;                      /* больше «воздуха» между TG и языками */
    margin-top:4px;
  }
  .tg-link{ font-size:12px; }
  .lang button{ font-size:14px; padding:4px 12px; }
}

/* ========== Fixed WIP bar ========== */
.wip-fixed{
  position:fixed; left:0; right:0; top:var(--hdr-h); z-index:999;
  height:var(--wip-h);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-bottom:1px solid #eee;
  gap:8px;
}
.wip-dot{
  width:8px; height:8px; border-radius:50%;
  background:#ff3b30; box-shadow:0 0 0 0 rgba(255,59,48,.55);
  animation:pulseDot 1.6s infinite;
}
.wip-text{ font:700 12px/1 Inter,system-ui; letter-spacing:.02em; color:#ff3b30; }
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.55) }
  70%{ box-shadow:0 0 0 10px rgba(255,59,48,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0) }
}

/* Spacer that accounts for header + wip */
.masthead-spacer{ height:calc(var(--hdr-h) + var(--wip-h)); }

/* ========== Hero ========== */
.hero{ padding:0 16px 28px; }
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center;
  max-width:1200px; margin:0 auto;
}
.hero-copy{ align-self:center; }

.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero-title .line1 {
  font-size: 3.2rem;   /* чуть меньше чем было */
}

.hero-title .line2 {
  font-size: 2.5rem;   /* заметно меньше */
  font-weight: 400;    /* без жирного */
}


.hero-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border:2px solid #111; border-radius:14px; text-decoration:none; background:#fff;
  box-shadow:0 6px 0 #111; color:inherit; font:700 16px/1 Inter,system-ui; min-width:160px;
  margin-top:32px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.hero-cta:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #111; background:#fafafa; }
.hero-cta:active{ transform:translateY(2px); box-shadow:0 2px 0 #111; }

/* Video bigger, cropped nicely */
.hero-media{ justify-self:end; }
.hero-video{
  width:min(720px,48vw);
  aspect-ratio: 16/10;
  object-fit:cover;
  border-radius:20px;
}
@media (max-width:720px){
  .hero-grid{ grid-template-columns:1fr; gap:12px; }
  .hero-media{ order:1; justify-self:stretch; }
  .hero-video{ width:100%; aspect-ratio:4/3; max-height:none; min-height:260px; }
  .hero-copy{ order:2; text-align:center; }
  .hero-cta{ width:100%; }
}

/* ========== Services ========== */
.services{ padding:24px 16px 56px; max-width:1200px; margin:0 auto; }

/* Launching line (внутри секции — как было) */
.pre-services{ margin:28px 0 10px; }
.pre-services .launching{ display:inline-block; font:600 14px/1.25 Inter,system-ui; color:var(--muted); border-bottom:1px solid #ddd; padding-bottom:2px; margin-right:4px; }
.pre-services .dots{ display:inline-block; width:3ch; text-align:left; font:600 14px/1.25 Inter,system-ui; color:var(--muted); }
.pre-services .dots::after{ content:""; animation:dots 1.5s steps(3,end) infinite; }
@keyframes dots{ 0%{content:""} 33%{content:"."} 66%{content:".."} 100%{content:"..."} }

/* Section title */
.section-title{
  margin:0 0 16px; font:800 32px/1.1 "PT Serif",serif;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
}

/* Cards */
.svc-grid{ display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1024px){ .svc-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-card{
  padding:0; border-radius:16px; border:1px solid var(--bd);
  box-shadow:0 6px 0 #111; background:#fff; min-height:140px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #111; border-color:#c9ccd1; }
.svc-inner{ padding:32px; }
@media (max-width:640px){ .svc-inner{ padding:28px; } }
.svc-card h3{ margin:0 0 8px; font:700 18px/1.2 Inter,system-ui; }
.svc-card p{ margin:0; color:#374151; font:500 14px/1.6 Inter,system-ui; }

/* Flat pastels */
.svc-audit{  background:#FFF3DF; }
.svc-ux{     background:#EAF2FF; }
.svc-web{    background:#EEF0FF; }
.svc-content{background:#FFE7EF; }
.svc-auto{   background:#E7F7EF; }
.svc-brand{  background:#F2EEFF; }

/* ========== Flow ========== */
.flow{ padding:24px 16px 56px; max-width:1200px; margin:0 auto; }
.flow-grid{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px){ .flow-grid{ grid-template-columns:1fr; } }

.flow-step{
  position:relative; border:1px solid var(--bd); border-radius:16px;
  background:#fff; box-shadow:none;    /* без тени */
  min-height:160px; padding:16px 16px 18px;
}
.step-head{ display:flex; align-items:center; gap:10px; margin:0 0 8px; }
.badge{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:#111; color:#fff; font:700 13px/1 Inter,system-ui; }
.flow-step h3{ margin:0; font:700 18px/1.2 Inter,system-ui; }
.flow-step p{ margin:6px 0 0; color:#374151; font:500 14px/1.5 Inter,system-ui; }

/* ========== Final CTA ========== */
.final-cta{ padding:24px 16px 64px; }
.cta-box{ max-width:900px; margin:0 auto; padding:28px; border:1px solid var(--bd); border-radius:20px; box-shadow:0 8px 0 #111; background:#fff; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.cta-box h2{ margin:0; font:800 28px/1.15 "PT Serif",serif; }
.cta-box .hero-cta{ margin-top:2px; }
@media (max-width:720px){ .cta-box .hero-cta{ width:100%; } }

/* ========== Footer ========== */
.footer{ padding:24px 16px 40px; border-top:1px solid #000; }
.footer-inner{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; }
.footer-logo{ height:22px; width:auto; }
.footer-inner p{ margin:8px 0 0; }