/* ===== Base design tokens ===== */
:root{
  --bg:#0b0b0f; --ink:#ffffff; --muted:#a5acb8; --stroke:rgba(255,255,255,.25); --blue:#1e40ff;
  --heading-color:#ffffff; --text-color:rgba(255,255,255,.5);
  --radius:10px; 
  --gap:36px; --gap2:18px; 
  --space-xxl:96px; --space-xl:60px; --space-lg:48px; --space-md:24px; --space-sm:12px;

  --stripes-height:220px;
  --bars-count:24;
  --bar-base:14px;
  --bar-speed:2.4s;
  --delay-step:0.10s;
  --line-color:#1e40ff;
  --seg-radius:0px;
  --segments:3;
  --seg-gap:0px;
  --rand-dur:0.80;
  --rand-delay:0.50;

  /* Typography */
  --font-heading:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;

  --h1-size:56px; --h1-weight:900; --h1-lh:0.85; --h1-ls:-0.02em;
  --h2-size:56px; --h2-weight:800; --h2-lh:1.10; --h2-ls:-0.01em;
  --h3-size:20px; --h3-weight:700; --h3-lh:1.15; --h3-ls:0em;
  --p-size:18px; --p-lh:1.6;
  --kicker-size:12px; --kicker-ls:.18em; --kicker-transform:uppercase;
  --lead-size:18px; --lead-lh:1.6;

  /* Links */
  --link-color:#1e40ff;
  --link-hover-color:#ffffff;
  --link-underline-color:#1e40ff;
  --link-underline-thickness:1px;
}

/* ===== Resets & primitives ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text-color);
  font-family:var(--font-body);line-height:1.55;
}

/* ===== Links ===== */
a{
  color:var(--link-color);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:var(--link-underline-color);
  text-decoration-thickness:var(--link-underline-thickness);
  transition:all 0.2s ease;
}
a:hover{
  color:var(--link-hover-color);
  text-decoration-color:var(--link-hover-color);
}
a:visited{
  color:var(--muted);
  text-decoration-color:var(--muted);
}

h1,h2,h3{color:var(--heading-color);margin:0 0 .5em;font-family:var(--font-heading)}
h1{font-size:var(--h1-size);font-weight:var(--h1-weight);line-height:var(--h1-lh);letter-spacing:var(--h1-ls)}
h2{font-size:var(--h2-size);font-weight:var(--h2-weight);line-height:var(--h2-lh);letter-spacing:var(--h2-ls)}
h3{font-size:var(--h3-size);font-weight:var(--h3-weight);line-height:var(--h3-lh);letter-spacing:var(--h3-ls)}
p,li{font-size:var(--p-size);line-height:var(--p-lh);color:var(--text-color)}
.kicker{font-family:var(--font-heading);font-size:var(--kicker-size);letter-spacing:var(--kicker-ls);text-transform:var(--kicker-transform);font-weight:700;color:var(--muted)}
.lead{font-family:var(--font-body);font-size:var(--lead-size);line-height:var(--lead-lh);color:var(--text-color)}

/* ===== Layout ===== */
.grid{display:grid;grid-template-columns:320px 1fr;min-height:100vh}
.side{
  position:sticky;top:0;height:100vh;border-right:2px solid var(--stroke);
  padding:var(--space-lg);background:#0b0b0f;display:flex;flex-direction:column;gap:var(--gap)
}
.main{display:flex;flex-direction:column}
.section{border-bottom:2px solid var(--stroke);padding:var(--space-xxl) var(--space-xl)}
.section h2{margin:0 0 var(--space-lg)}

/* ===== Logo (унифицировано для всех страниц) ===== */
.logo{display:flex;justify-content:flex-start;align-items:flex-start;gap:0}
.logo-img{
  display:block;height:54px;width:auto;max-width:100%;
}
@media (max-width:1080px){ .logo-img{height:54px} }

/* ===== Controls ===== */
.lang-switch{display:flex;gap:var(--gap2)}
.lang-btn{border:2px solid var(--stroke);padding:8px 12px;font-weight:600;cursor:pointer;border-radius:var(--radius)}
.lang-btn.active{background:#fff;color:#1e40ff}

.nav{display:flex;flex-direction:column;gap:var(--gap2)}
.link{
  display:block;border:2px solid var(--stroke);padding:14px 16px;font-weight:600;letter-spacing:.4px;border-radius:var(--radius)
}
/* важный сброс для компонентных ссылок в любом месте сайта */
.link, .link:link, .link:visited, .btn, .btn:link, .btn:visited{ text-decoration:none }

.link:hover{background:#fff;color:#1e40ff}
.link.active{background:#fff;color:#000}
.link:focus-visible,.btn:focus-visible,summary:focus-visible{
  outline:3px solid #ffffff;outline-offset:3px
}

.cta{margin-top:auto;display:flex;flex-direction:column;gap:var(--gap2)}
.btn{border:2px solid var(--stroke);padding:14px 16px;font-weight:600;letter-spacing:.4px;text-align:center;border-radius:var(--radius);text-decoration:none}
.btn.primary{background:#fff;color:#1e40ff}

/* ===== Hero / Stripes ===== */
.hero{display:grid;gap:var(--space-xl);align-items:stretch}
.hero-col{display:flex;flex-direction:column}
.hero-kicker{margin-bottom:20px}
.hero-titles{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.hero-lead{margin:var(--space-md) 0 var(--space-lg)}
.hero-cta{display:flex;gap:var(--gap2);flex-wrap:wrap;margin-top:6px}

.stripes{
  height:var(--stripes-height);border:2px solid var(--stroke);border-radius:var(--radius);
  background:rgba(255,255,255,.02);overflow:hidden;position:relative;padding:10px
}
.stripes-inner{height:100%;display:flex;justify-content:space-between;align-items:stretch}
.bar{
  width:var(--bar-base);height:100%;background:transparent;border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--seg-gap)
}
.seg{
  width:100%;
  height:calc((100% - (var(--seg-gap) * (var(--segments) - 1))) / var(--segments));
  background:var(--line-color);border-radius:var(--seg-radius);
  transform-origin:center center;transform:scaleX(.25);
  animation:growX var(--bar-speed) ease-in-out infinite;will-change:transform
}
@keyframes growX{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.seg{animation:none;transform:scaleX(.5)}}

/* ===== Cards / FAQ ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{border:2px solid var(--stroke);padding:22px;border-radius:var(--radius);background-color:rgba(255,255,255,.03);display:flex;flex-direction:column}
.card h3{margin:0 0 12px;font-size:20px}
.card p{margin:0;line-height:1.5;flex-grow:1}
.card .time{margin-top:16px;font-size:24px;color:var(--blue);font-weight:400;letter-spacing:0.5px}

details{border:2px solid var(--stroke);border-radius:var(--radius);padding:0;overflow:hidden;background:rgba(255,255,255,.02)}
details+details{margin-top:var(--gap)}
summary{padding:18px 20px;font-weight:900;cursor:pointer;list-style:none;color:var(--heading-color)}
summary::-webkit-details-marker{display:none}
details[open] summary{border-bottom:2px solid var(--stroke)}
details p{margin:0;padding:18px 20px}

/* ===== Footer & progress ===== */
footer{padding:var(--space-xl) var(--space-xl);display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center;justify-content:space-between}
.legal a{text-decoration:underline}
#progress{position:fixed;top:0;left:0;height:5px;width:0%;background:linear-gradient(90deg,#1e40ff,#ffffff);border-radius:10px;z-index:9999}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .grid{grid-template-columns:1fr}
  .side{position:relative;height:auto}
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .section{padding:36px var(--space-lg)}
  .stripes{height:var(--stripes-height)}
  .card .time{font-size:13px;margin-top:12px}
  .hero-titles{gap:4px;margin-bottom:12px}
  .hero-lead{margin:12px 0 20px}
}

@media (min-width:1080px){
  .hero{grid-template-columns:1.1fr .9fr}
  .stripes{height:auto}
}

@media (max-width:1080px){
  :root{--h1-size:44px;--h2-size:28px;--p-size:16px;--lead-size:16px}
}