/* =========================================================
   Лаборатория звука — styles.css
   ========================================================= */

/* ---------- Переменные ---------- */
:root{
  --bg:#0b0b0d;
  --bg-2:#111114;
  --fg:#f2f2f2;
  --fg-dim:#9a9a9a;
  --line:rgba(255,255,255,.12);
  --accent:#e8a33d;
  --accent-hi:#f0b45a;
  --danger:#e0614a;
  --success:#7ec37a;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:6px;
  --header-h:72px;
  --container:1280px;
  --pad-x:48px;
}

/* ---------- Сброс ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-padding-top:var(--header-h);}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img,svg,video{display:block;max-width:100%;}

/* ---------- SITE HEADER ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px var(--pad-x);
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  letter-spacing:.02em;
  flex-shrink:0;
}
.brand__logo{
  width:34px;
  height:34px;
  display:block;
  flex-shrink:0;
}
.top-contact{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--fg-dim);
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  text-align:right;
}
.top-contact a{color:var(--fg);white-space:nowrap;}
.top-contact a:hover{color:var(--accent);}
.top-contact span{white-space:nowrap;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
}

/* Слой 0: фолбэк-фон */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% 10%, #1b1b22 0%, transparent 60%),
    radial-gradient(1000px 700px at 85% 90%, #17171c 0%, transparent 60%),
    linear-gradient(180deg,#0e0e12 0%,#08080a 100%);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(232,163,61,.06) 0 2px,
      transparent 2px 26px);
  mask-image:radial-gradient(ellipse at 50% 60%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 60%, #000 0%, transparent 75%);
}

/* Слой 1: видео */
.hero__video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

/* Слой 2: затемнение */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(0,0,0,.7);
}

/* Слой 3: контент */
.hero__center{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 24px;
  gap:20px;
}

.hero__title{
  font-size:clamp(32px,4.8vw,72px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.02;
  text-wrap:balance;
}
.hero__typed{
  font-family:var(--font-mono);
  font-size:clamp(15px,2vw,20px);
  color:var(--fg-dim);
  display:inline-flex;
  align-items:baseline;
  gap:.5ch;
  min-height:1.6em;
  flex-wrap:wrap;
  justify-content:center;
}
.hero__typed .static{color:var(--fg-dim);}
.hero__typed .variable{
  color:var(--fg);
  font-weight:500;
}
.hero__typed .caret{
  display:inline-block;
  width:2px;
  height:1.1em;
  background:var(--fg-dim);
  transform:translateY(2px);
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* CTA */
.cta{
  display:inline-block;
  margin-top:14px;
  padding:20px 56px;
  min-height:60px;
  background:var(--accent);
  color:#12100c;
  font-weight:700;
  font-size:18px;
  letter-spacing:.01em;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  transition:background .18s ease, transform .18s ease;
  cursor:pointer;
}
.cta:hover{
  background:var(--accent-hi);
  border-color:var(--accent-hi);
  transform:translateY(-2px);
  color:#12100c;
}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* noscript-альтернатива CTA */
.cta-noscript{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.cta-noscript__link{
  display:inline-block;
  padding:15px 38px;
  min-height:48px;
  background:var(--accent);
  color:#12100c;
  font-weight:600;
  font-size:16px;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  line-height:1.2;
}
.cta-noscript__link:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:#12100c;}
.cta-noscript__hint{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--fg-dim);
}
.cta-noscript__hint a{color:var(--accent);}

/* ---------- REEL WIDGET ---------- */
.reel-widget{
  width:clamp(220px, 26vw, 320px);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  margin-top:8px;
}
.reel-widget__stage{width:100%;background:transparent;}
.reel-widget__stage svg{display:block;width:100%;height:auto;overflow:visible;}

.reel-widget__controls{
  margin-top:-4px;
  padding:8px 14px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.reel-widget__controls label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  cursor:pointer;
  text-align:center;
}
.reel-widget__controls input[type="range"]{
  width:min(100%, 360px);
  min-height:32px;
  accent-color:var(--fg-dim);
  cursor:pointer;
}
.reel-widget__controls input[type="range"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- SOCIALS ---------- */
.socials-block{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:40px var(--pad-x);
}
.socials-block__inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.socials-block__label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  white-space:nowrap;
}
.socials{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  flex:1;
  max-width:820px;
}
.socials a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  min-height:56px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font-weight:500;
  font-size:14.5px;
  transition:border-color .18s, color .18s, background .18s;
}
.socials a:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(232,163,61,.05);
}
.socials svg{width:24px;height:24px;display:block;flex-shrink:0;}
.socials img{
  width:24px;
  height:24px;
  display:block;
  flex-shrink:0;
  object-fit:contain;
}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  padding:56px var(--pad-x) 28px;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.1fr 1.1fr 1.2fr;
  gap:48px;
  max-width:var(--container);
  margin:0 auto;
}
.footer h3{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:16px;
}
.footer p,.footer li{
  font-size:14.5px;
  color:var(--fg);
  line-height:1.7;
}
.footer .dim{color:var(--fg-dim);}
.footer ul{list-style:none;display:grid;gap:4px;}
.footer a:hover{color:var(--accent);}
.footer .mono{font-family:var(--font-mono);font-size:13.5px;}

.footer__bottom{
  max-width:var(--container);
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--fg-dim);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- GURU SIGNATURE ---------- */
.guru-sign{
  position:relative;
  display:block;
  background:#05050a;
  overflow:hidden;
  isolation:isolate;
  padding:44px 24px;
  border-top:1px solid var(--line);
  text-align:center;
  cursor:pointer;
  transition:background .3s ease;
  content-visibility:auto;
  contain-intrinsic-size:180px;
}
.guru-sign:hover{background:#07070d;}

.guru-sign__bg{
  position:absolute;
  inset:-20%;
  z-index:-2;
  background:
    radial-gradient(circle at 25% 35%, rgba(245,197,24,.25), transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(200,90,40,.20), transparent 45%),
    radial-gradient(circle at 55% 15%, rgba(60,90,160,.18), transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(140,60,120,.15), transparent 50%),
    #05050a;
  background-size:200% 200%;
  animation:guruDrift 28s ease-in-out infinite;
}
@keyframes guruDrift{
  0%,100%{background-position:0% 0%, 100% 100%, 50% 0%, 0% 100%;}
  33%{background-position:60% 40%, 40% 60%, 20% 80%, 80% 20%;}
  66%{background-position:100% 70%, 0% 30%, 80% 20%, 20% 80%;}
}
.guru-sign__noise{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.05;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.guru-sign__inner{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.guru-sign__label{
  font-family:-apple-system,'Segoe UI',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#e8eef5;
  opacity:.5;
  transition:opacity .25s ease;
}
.guru-sign:hover .guru-sign__label{opacity:.75;}
.guru-sign__title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(28px,4.5vw,52px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  color:#e8eef5;
  display:inline-flex;
  align-items:baseline;
  gap:.28em;
  flex-wrap:wrap;
  justify-content:center;
  transition:color .25s ease;
}
.guru-sign__title .guru-accent{
  color:#f5c518;
  font-style:italic;
  transition:color .25s ease, text-shadow .25s ease;
}
.guru-sign:hover .guru-sign__title{color:#ffffff;}
.guru-sign:hover .guru-sign__title .guru-accent{
  color:#ffd63d;
  text-shadow:0 0 24px rgba(245,197,24,.55);
}
.guru-sign__arrow{
  color:#f5c518;
  font-style:normal;
  display:inline-block;
  transition:transform .25s ease, color .25s ease;
}
.guru-sign:hover .guru-sign__arrow{transform:translateX(6px);color:#ffd63d;}
.guru-sign:focus-visible{outline:2px solid #f5c518;outline-offset:-4px;}

/* ---------- МОДАЛЬНОЕ ОКНО ---------- */
.modal{
  width:min(100% - 32px, 520px);
  max-height:calc(100dvh - 32px);
  margin:auto;                 /* ← ключевое: центрирование */
  padding:0;
  border:none;
  border-radius:12px;
  background:var(--bg-2);
  color:var(--fg);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:auto;               /* если контент выше экрана — внутренний скролл */
}
.modal::backdrop{
  background:rgba(5,5,10,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.modal[open]{animation:modalIn .22s ease-out;}
@keyframes modalIn{
  from{opacity:0;transform:translateY(12px) scale(.98);}
  to{opacity:1;transform:none;}
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 22px 8px;
}
.modal__title{
  font-size:20px;
  font-weight:600;
  line-height:1.25;
}
.modal__subtitle{
  font-size:13.5px;
  color:var(--fg-dim);
  margin-top:4px;
}
.modal__close{
  flex-shrink:0;
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--fg-dim);
  transition:color .18s, border-color .18s, background .18s;
}
.modal__close:hover{color:var(--fg);border-color:var(--fg-dim);background:rgba(255,255,255,.04);}
.modal__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.modal__body{
  padding:12px 22px 22px;
}

/* Форма */
.form{display:flex;flex-direction:column;gap:14px;}
.form__row{display:flex;flex-direction:column;gap:6px;}
.form__label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.form__label .req{color:var(--accent);}
.form__input,
.form__select,
.form__textarea{
  width:100%;
  background:#0d0d10;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font-family:var(--font-sans);
  font-size:15px;
  padding:12px 14px;
  min-height:46px;
  transition:border-color .15s, background .15s;
}
.form__textarea{min-height:96px;resize:vertical;line-height:1.45;}
.form__select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a9a9a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  padding-right:40px;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#101014;
}
.form__input::placeholder,
.form__textarea::placeholder{color:#5f5f63;}

.form__input[aria-invalid="true"],
.form__select[aria-invalid="true"],
.form__textarea[aria-invalid="true"]{
  border-color:var(--danger);
}

.form__error{
  font-size:12.5px;
  color:var(--danger);
  min-height:1em;
}

.form__check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:var(--fg-dim);
  line-height:1.45;
  cursor:pointer;
}
.form__check input{
  flex-shrink:0;
  width:18px;height:18px;
  accent-color:var(--accent);
  margin-top:2px;
  cursor:pointer;
}
.form__check a{color:var(--accent);text-decoration:underline;}

/* Honeypot */
.hp{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.form__actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:18px;
  text-align:center;
}
.form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 28px;
  min-height:48px;
  background:var(--accent);
  color:#12100c;
  font-weight:600;
  font-size:15px;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  transition:background .18s, opacity .18s;
}
.form__submit:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi);}
.form__submit:disabled{opacity:.6;cursor:not-allowed;}
.form__submit:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.form__status{
  font-size:13.5px;
  color:var(--fg-dim);
  margin-top:2px;
}
.form__status[data-state="error"]{color:var(--danger);}
.form__status[data-state="success"]{color:var(--success);}

/* Состояние «успех» */
.form[data-state="success"] .form__body{display:none;}
.form__success{
  display:none;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:12px 0 4px;
}
.form[data-state="success"] .form__success{display:flex;}
.form__success-title{font-size:18px;font-weight:600;}
.form__success-text{font-size:14px;color:var(--fg-dim);line-height:1.5;}

/* ---------- ПЛАНШЕТ ≤1023px ---------- */
@media (max-width:1023px){
  :root{--pad-x:32px;--header-h:68px;}
  .socials-block__inner{flex-direction:column;align-items:flex-start;gap:20px;}
  .socials{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;width:100%;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px;}
  .footer__grid > div:nth-child(3){grid-column:1 / -1;}
}

/* ---------- МОБИЛКА ≤767px ---------- */
@media (max-width:767px){
  :root{--pad-x:20px;--header-h:64px;}

  .site-header{padding:12px var(--pad-x);gap:12px;}
  .brand{font-size:15px;gap:10px;}
  .brand__logo{width:30px;height:30px;}
  .top-contact{gap:8px 14px;font-size:11.5px;justify-content:flex-end;}

  .hero{min-height:calc(100svh - var(--header-h));}
  .hero__center{padding:24px 18px;gap:16px;}
  .hero__title{font-size:clamp(28px,8vw,44px);}
  .hero__typed{font-size:clamp(14px,3.6vw,18px);padding:0 4px;}

  .cta{width:min(100%, 320px);padding:16px 24px;}

  .reel-widget{width:min(100%, 300px);}
  .reel-widget__controls{padding:6px 8px 8px;}

  .socials-block{padding:32px var(--pad-x);}
  .socials a{font-size:14px;padding:14px 16px;min-height:52px;}
  .socials svg{width:20px;height:20px;}
  .socials img{width:20px;height:20px;}

  .footer{padding:44px var(--pad-x) 24px;}
  .footer__grid{grid-template-columns:1fr;gap:32px;}
  .footer__grid > div:nth-child(3){grid-column:auto;}
  .footer p,.footer li{font-size:15px;}

  .footer__bottom{margin-top:32px;font-size:12px;flex-direction:column;align-items:flex-start;gap:8px;}

  .guru-sign{padding:36px 18px;}
  .guru-sign__title{gap:.24em;}

  .modal{width:100%;height:100%;max-height:100dvh;border-radius:0;}
  .modal__head{padding:18px 18px 6px;}
  .modal__body{padding:10px 18px 18px;}
  .form__submit{width:100%;}
}

/* ---------- УЗКИЕ ≤380px ---------- */
@media (max-width:380px){
  :root{--pad-x:16px;}
  .hero__title{font-size:clamp(26px,8.4vw,34px);}
  .top-contact{font-size:11px;gap:6px 10px;}
  .brand{font-size:14px;}
  .socials a{font-size:13px;gap:10px;padding:12px 14px;}
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero__typed .caret{animation:none;opacity:1;}
  .guru-sign__bg{animation:none;}
  .guru-sign__arrow,
  .guru-sign__title,
  .guru-sign__title .guru-accent,
  .cta,
  .modal[open]{transition:none;animation:none;}
  .cta:hover{transform:none;}
  .guru-sign:hover .guru-sign__arrow{transform:none;}
  .hero__video{display:none;}
}


/* ---------- СТРАНИЦЫ-ДОКУМЕНТЫ (privacy.php и т.п.) ---------- */
.page__main{
  max-width:820px;
  width:100%;
  margin:0 auto;
  padding:48px var(--pad-x) 64px;
  min-height:calc(100vh - var(--header-h) - 200px);
}
.page__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:28px;
  transition:color .18s;
}
.page__back:hover{color:var(--accent);}
.page__back svg{width:14px;height:14px;display:block;}

.page__title{
  font-size:clamp(28px,4vw,44px);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.1;
  margin-bottom:8px;
}
.page__meta{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--fg-dim);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:32px;
}
.page__content{
  font-size:16px;
  line-height:1.7;
  color:var(--fg);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.page__content p{margin:0;}
.page__content strong{color:var(--fg);}

@media (max-width:767px){
  .page__main{padding:32px var(--pad-x) 48px;}
}