:root{
  --bg:#040712; --text:#F2F5FB; --text-dim:#C7D0E6; --muted:#9AA4C3;
  --pink:#ff5757; --violet:#8c52ff; --ice:#5de0e6;
  --logo-h:54px; --header-pad-y:10px;
}

/* Base */
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Helvetica Neue","Anton",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  background-image:url("assets/img/site-bg.webp");
  background-size:cover; background-repeat:no-repeat; background-attachment:fixed;
  background-position:center top;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}
section{padding:72px 0}

/* Header (compact, big logo inside) */
.header{position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(4,7,18,.9), rgba(4,7,18,.55) 65%, rgba(4,7,18,0));
  backdrop-filter:blur(6px)}
.header__row{display:flex; align-items:center; justify-content:space-between; padding:var(--header-pad-y) 0}
.logo{height:var(--logo-h); width:auto; display:block}
.nav{display:flex; align-items:center; gap:22px}
.nav a{color:var(--text); text-decoration:none; opacity:.95; font-size:17px}
.nav .cta{padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(90deg,var(--pink),var(--violet)); color:#fff; font-weight:800; font-size:17px; text-decoration:none}
@media (max-width:560px){
  :root{ --logo-h:40px; --header-pad-y:8px }
  .nav a:not(.cta){display:none}
  .nav .cta{font-size:16px; padding:8px 14px}
}

/* Hero video — no dim at all */
.hero{position:relative; min-height:74vh; display:grid; place-items:center; overflow:hidden}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; opacity:1}

/* Headings (gradient) */
h2{margin:0 0 14px; font-weight:800; letter-spacing:.2px; line-height:1.1; font-size:52px}
.grad-text{
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--ice));
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.underline{
  height:2px; width:100%; max-width:560px;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--ice));
  border-radius:2px; margin:12px 0 28px
}
p{font-size:20px; color:var(--text-dim); margin:0 0 18px}
.lead{font-size:22px}

/* Formula (centered, crisp ×) */
.approach{margin:26px 0 6px; text-align:center}
.formula{display:inline-block; font-size:36px; font-weight:800; line-height:1.05;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--ice));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* Services — accordion with light gradient */
.services{display:grid; gap:14px}
.svc{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
  border-radius:14px; padding:6px 14px 10px;
}
.svc__head{display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:14px; padding:10px 6px}
.svc__head h3{margin:0; font-size:24px; font-weight:800}
.chip{
  background:linear-gradient(90deg,var(--pink),var(--violet)); -webkit-background-clip:text; color:transparent}
.chev{opacity:.8; transition:.2s transform ease}
.svc[open] .chev{transform:rotate(180deg)}
.svc__body{padding:8px 6px 14px; color:var(--text-dim)}
.svc__body ul{margin:8px 0 0; padding:0; list-style:none}
.svc__body li{margin:6px 0; font-size:18px}
.svc:hover{box-shadow:0 0 26px rgba(140,82,255,.18); border-color:rgba(255,255,255,.18)}

/* Reach / CTA block */
.reach{position:relative; overflow:hidden; border-radius:18px;
  background: url("assets/img/hero-bg.png") center/cover no-repeat, radial-gradient(1200px 400px at 25% 0%, rgba(255,87,87,.2), transparent 60%), radial-gradient(1200px 400px at 85% 100%, rgba(140,82,255,.2), transparent 60%), #0a0f1c;
  padding:56px 28px; text-align:center}
.reach h2{font-size:44px; margin-bottom:16px}
.cta-mail{display:inline-block; padding:12px 18px; border-radius:999px; background:linear-gradient(90deg,var(--pink),var(--violet)); color:#fff; font-weight:800; text-decoration:none}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:28px}
.contact h3{margin:0 0 10px; font-size:36px; font-weight:800; color:#fff}
.mail{color:#fff; font-weight:800; text-decoration:underline}
.soc{display:flex; gap:14px; margin-top:12px}
.soc a{display:inline-flex; width:auto; height:auto; line-height:0}
.soc svg{width:24px; height:24px; display:block; fill:#fff}
.hq{border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px}
.hq h4{margin:0 0 8px; font-size:22px; color:#fff; font-weight:800}
.hq p{margin:0; font-size:16px} 
.contact .mail {
  display: block;
  margin: 6px 0 10px;
}

.social-links {
  display: flex;
  flex-direction: column;   /* вертикально */
  align-items: flex-start;  /* влево */
  gap: 6px;
}

.contact-grid {
  text-align: left;         /* весь блок контактов влево */
}


/* Footer */
footer.wrap {
  text-align: left;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 60px;
}

/* Cookies — centered & compact */
.cookie-banner{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:1000; width:min(560px, calc(100% - 28px));
  background:rgba(10,14,25,.92); color:var(--text);
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:12px 14px; display:none; gap:10px; backdrop-filter:blur(6px)
}
.cookie-row{display:flex; align-items:center; gap:8px; justify-content:center}
.cookie-ico{font-size:16px}
.cookie-text{text-align:center}
.cookie-actions{display:flex; gap:8px; justify-content:center; margin-top:8px}
.btn{padding:8px 12px; border-radius:10px; cursor:pointer; border:none; font-weight:800; font-size:14px}
.cookie-accept{background:linear-gradient(90deg,var(--pink),var(--violet)); color:#fff}
.cookie-reject{background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.2)}

/* === Patch: Legal pages use the same background and style as homepage === */
body.legal {
  background: var(--bg);
  color: var(--text);
  background-image:
    radial-gradient(1200px 600px at 25% 0%, rgba(255,87,87,.15), transparent 70%),
    radial-gradient(1200px 600px at 85% 100%, rgba(140,82,255,.15), transparent 70%),
    url("assets/img/site-bg.webp");
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

body.legal .wrap,
body.legal .prose,
body.legal section {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 20px;
  background: rgba(10, 14, 25, 0.55);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  color: #fff;
}

/* Preserve line breaks for imported legal texts */
.prose { 
  white-space: pre-wrap; 
}

/* === Patch: Text-based social links (instead of SVG icons) === */
.social-links a {
  color: #fff;
  text-decoration: underline;
}

.soc {
  display: block;
  margin-top: 12px;
}

.soc a {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1.4;
  color: #fff;
  text-decoration: underline;
  margin-right: 12px;
}

/* === Patch: Footer and mobile adjustments === */
footer.wrap {
  text-align: center;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-top: 60px;
}

footer.wrap .foot-links {
  margin-top: 8px;
}

footer.wrap .foot-links a {
  color: var(--text-dim);
  text-decoration: underline;
  margin: 0 10px;
  white-space: nowrap;
}

/* === Patch: Mobile layout improvements === */
@media (max-width: 768px) {
  .wrap { padding: 16px; }
  h2 { font-size: 34px; }
  .reach h2 { font-size: 32px; }
  .contact-grid { grid-template-columns: 1fr; }
  .social-links a { margin: 4px 12px; }
  footer.wrap .foot-links { display: flex; flex-direction: column; gap: 6px; }
}