/* =============================================================================
   styles.css — оформление сайта.
   Палитра и основные размеры — в переменных :root, их можно безопасно менять.
   Весь ТЕКСТ редактируется в js/content.js.
   ========================================================================== */

:root{
  --bone:#E7E3D8;        /* костяной фон */
  --bone-2:#DEDACE;      /* подложки/карточки */
  --ink:#141310;         /* почти чёрный текст */
  --ink-soft:#5C584E;    /* второстепенный текст */
  --accent:#3F38F0;      /* электрический индиго (акцент) */
  --accent-ink:#ECEAFF;  /* текст на акценте */
  --line:rgba(20,19,16,.16);

  --font-d:'Syne', sans-serif;            /* дисплейный (заголовки) */
  --font-b:'Space Grotesk', system-ui, sans-serif; /* основной текст */
  --font-m:'Space Mono', ui-monospace, monospace;  /* метки и индексы */

  --pad: clamp(1.6rem, 5vw, 3.5rem);
  --maxw: 1400px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-b);
  background:var(--bone);
  color:var(--ink);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* зерно поверх всего */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:var(--maxw);margin:0 auto}
.mono{font-family:var(--font-m);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.accent{color:var(--accent)}

/* фокус для доступности */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:3px;
}

/* ===== кастомный курсор ===== */
.cursor{position:fixed;top:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--accent);
  z-index:10000;pointer-events:none;transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s,opacity .25s;mix-blend-mode:difference;opacity:0}
.cursor.visible{opacity:1}
.cursor.big{width:64px;height:64px;background:#fff}
@media (hover:hover) and (pointer:fine){ body.cursor-on{cursor:none} }

/* ===== прелоадер ===== */
.pre{position:fixed;inset:0;z-index:9999;background:var(--ink);color:var(--bone);
  display:flex;align-items:flex-end;justify-content:space-between;padding:var(--pad);
  transition:transform .9s cubic-bezier(.76,0,.24,1)}
.pre.done{transform:translateY(-101%)}
.pre .nm{font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,6vw,4rem);line-height:.95;text-transform:uppercase}
.pre .ct{font-family:var(--font-m);font-size:clamp(2rem,6vw,4rem)}

/* ===== кнопки ===== */
.cta{display:inline-flex;align-items:center;gap:.7rem;background:var(--ink);color:var(--bone);
  padding:1rem 1.6rem;border-radius:999px;font-family:var(--font-b);font-weight:600;font-size:.95rem;
  cursor:pointer;border:none;transition:background .25s,transform .25s;white-space:nowrap}
.cta:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.cta .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);transition:background .25s}
.cta:hover .dot{background:#fff}
.cta--accent{background:var(--accent);color:#fff}
.cta--accent .dot{background:#fff}
.cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cta--ghost .dot{background:var(--accent)}
.cta--ghost:hover{background:var(--ink);color:var(--bone)}

/* ===== навигация ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:1.1rem var(--pad);mix-blend-mode:difference;color:#fff}
.nav .logo{font-family:var(--font-d);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.nav-links{display:flex;gap:1.6rem;margin-left:auto}
.nav-links a{font-family:var(--font-m);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.nav-links a:hover{opacity:.6}
.nav-cta{padding:.6rem 1.1rem;font-size:.82rem;background:#fff;color:#000;mix-blend-mode:normal}
.nav-cta .dot{display:none}
.nav-cta:hover{background:var(--accent);color:#fff;transform:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}

/* ===== HERO ===== */
.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;padding-top:6rem;padding-bottom:3rem}
.hero .blob{position:absolute;width:44vw;height:44vw;max-width:660px;max-height:660px;right:-2vw;top:10vh;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6f69ff, var(--accent) 55%, #1b16b8);filter:blur(6px);z-index:0;
  animation:floatPulse 7s ease-in-out infinite, hue 15s ease-in-out infinite}
@keyframes floatPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.12)}}
/* мягкий перелив в приятном диапазоне: индиго → голубой → фиолетовый → розовый
   (без резких зелёных/жёлтых) */
@keyframes hue{0%,100%{filter:blur(6px) hue-rotate(-38deg)}50%{filter:blur(6px) hue-rotate(72deg)}}
.hero .meta-row{display:flex;justify-content:space-between;gap:2rem;align-items:flex-end;position:relative;z-index:2;margin-bottom:1.2rem}
.hero .meta-row .mono{color:var(--ink-soft);max-width:34ch}
.hero h1{font-family:var(--font-d);font-weight:800;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(2.4rem,13.2vw,13rem);white-space:nowrap;position:relative;z-index:2;mix-blend-mode:difference;color:#fff}
.hero h1 .l{display:inline-block}
.no-motion .hero h1 .l,.in .l{transform:none;opacity:1}
.hero h1 .l{transform:translateY(110%);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s}
.hero h1 .l.in{transform:none;opacity:1}
.hero .sub{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:2rem;position:relative;z-index:2;flex-wrap:wrap}
.hero .lead{font-size:clamp(1.05rem,1.7vw,1.45rem);max-width:36ch;line-height:1.35}
.scroll-cue{font-family:var(--font-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;color:var(--ink-soft)}
.scroll-cue::before{content:"";width:42px;height:1px;background:var(--ink-soft)}

/* ===== МАНИФЕСТ ===== */
.manifesto{padding-top:clamp(5rem,15vh,15rem);padding-bottom:clamp(5rem,15vh,15rem)}
.manifesto .eyebrow{display:block;margin-bottom:2rem;color:var(--accent)}
.manifesto .big{font-family:var(--font-d);font-weight:700;line-height:1.1;letter-spacing:-.01em;font-size:clamp(1.7rem,4.4vw,3.5rem)}
.manifesto .big w{color:color-mix(in srgb,var(--ink) 16%,var(--bone));transition:color .4s;display:inline}
.manifesto .big w.lit{color:var(--ink)}
.manifesto .big w.hl{color:var(--accent)}
.no-motion .manifesto .big w{color:var(--ink)}
.no-motion .manifesto .big w.hl-word{color:var(--accent)}

/* ===== ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ===== */
.hwrap{position:relative}
.hpin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.htrack{display:flex;align-items:stretch;gap:1.5rem;padding:0 var(--pad);will-change:transform}
.hintro{flex:0 0 38vw;display:flex;flex-direction:column;justify-content:center;padding-right:3vw}
.hintro .eyebrow{color:var(--accent);margin-bottom:1rem;display:block}
.hintro h2{font-family:var(--font-d);font-weight:800;font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;text-transform:uppercase;letter-spacing:-.02em}
.hintro p{margin-top:1.1rem;color:var(--ink-soft);max-width:32ch}
.hcard{flex:0 0 30vw;min-width:320px;border:1px solid var(--line);border-radius:6px;padding:2.2rem;
  display:flex;flex-direction:column;background:var(--bone-2);position:relative;transition:background .3s,color .3s}
.hcard .idx{font-family:var(--font-m);font-size:.8rem;color:var(--accent)}
.hcard h3{font-family:var(--font-d);font-weight:700;font-size:clamp(1.5rem,2.2vw,2.3rem);line-height:1.02;margin-top:1.6rem}
.hcard p{margin-top:1rem;color:var(--ink-soft);font-size:.95rem}
.hcard:hover{background:var(--accent);color:#fff}
.hcard:hover .idx,.hcard:hover p{color:var(--accent-ink)}

/* ===== МАРКИЗ ===== */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.5rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq .row{display:flex;gap:2.5rem;width:max-content;animation:m1 40s linear infinite}
.marq .row.r2{animation:m2 40s linear infinite;margin-top:.3rem}
.marq span{font-family:var(--font-d);font-weight:700;font-size:clamp(1.5rem,3vw,2.6rem);white-space:nowrap;
  display:flex;align-items:center;gap:2.5rem;text-transform:uppercase;letter-spacing:-.01em}
.marq span::after{content:"✦";color:var(--accent);font-size:.6em}
.marq .o{color:transparent;-webkit-text-stroke:1px var(--ink)}
@keyframes m1{to{transform:translateX(-50%)}}
@keyframes m2{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ===== СЕКЦИИ-СТРОКИ (образование / гарантии) ===== */
.rows{padding-top:clamp(4.5rem,12vh,11rem);padding-bottom:clamp(4.5rem,12vh,11rem)}
.rows .eyebrow{display:block;color:var(--accent);margin-bottom:1.4rem}
.rows h2{font-family:var(--font-d);font-weight:800;font-size:clamp(2.1rem,5vw,4rem);text-transform:uppercase;letter-spacing:-.02em;line-height:.95;white-space:pre-line;margin-bottom:2.6rem}
.rline{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:1.7rem 0;border-top:1px solid var(--line);transition:padding-left .3s,color .3s}
.rows .rline:last-of-type{border-bottom:1px solid var(--line)}
.rline:hover{padding-left:1.1rem;color:var(--accent)}
.rline .n{font-family:var(--font-m);font-size:.85rem}
.rline .t{font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,2.3vw,1.95rem);line-height:1.05}
.rline .d{color:var(--ink-soft);font-size:.92rem;text-align:right;max-width:34ch}
.rline:hover .d{color:var(--accent)}

/* статы-счётчики */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3.5rem}
.stats .s{background:var(--bone);padding:2.2rem;display:flex;flex-direction:column;gap:.4rem}
.stats .num{font-family:var(--font-d);font-weight:800;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1}
.stats .lab{font-family:var(--font-m);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}

/* ===== ЦЕНЫ ===== */
.price{padding-top:clamp(4.5rem,12vh,11rem);padding-bottom:clamp(4.5rem,12vh,11rem)}
.price .h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1rem;margin-bottom:1rem}
.price .eyebrow{display:block;color:var(--accent);margin-bottom:.8rem}
.price h2{font-family:var(--font-d);font-weight:800;font-size:clamp(2.1rem,5vw,4rem);text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.price .note{font-family:var(--font-m);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);max-width:36ch}
.price .grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.8rem}
.pc{border:1px solid var(--line);border-radius:6px;padding:2.4rem;display:flex;flex-direction:column}
.pc.feat{background:var(--ink);color:var(--bone)}
.pc .pk{font-family:var(--font-m);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.pc .pv{font-family:var(--font-d);font-weight:800;font-size:clamp(2.8rem,6vw,5rem);line-height:1;margin:.5rem 0}
.pc .pv .cur{font-size:.4em;color:var(--accent);vertical-align:super}
.pc .pu{color:var(--ink-soft);font-size:.95rem}
.pc.feat .pu{color:#a7a39a}
.pc ul{list-style:none;margin:1.6rem 0;display:grid;gap:.7rem}
.pc li{font-size:.95rem;padding-left:1.4rem;position:relative}
.pc li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.pc .go{margin-top:auto;align-self:flex-start}

/* ===== ФИНАЛ / КОНТАКТ ===== */
.final{min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding-top:6rem}
.final h2{font-family:var(--font-d);font-weight:800;font-size:clamp(2.6rem,11vw,11rem);line-height:.9;text-transform:uppercase;letter-spacing:-.03em;white-space:pre-line}
.final h2 .arrow{color:var(--accent)}
.contact-body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);margin-top:3rem;align-items:start}
.contact-lead{font-family:var(--font-m);font-size:.84rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);max-width:40ch;margin-bottom:1.6rem}
.messengers{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.4rem}
.contact-direct{display:flex;flex-wrap:wrap;gap:1.2rem;font-family:var(--font-m);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.contact-direct a:hover{color:var(--accent)}
.contact-portrait{border-radius:6px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);max-width:340px}
.contact-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.02)}

.cform{display:grid;gap:1rem;margin-top:.4rem}
.cform .field{display:block}
.cform .field span{display:block;font-family:var(--font-m);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:.5rem}
.cform input,.cform textarea{width:100%;padding:.9rem 1rem;background:var(--bone-2);border:1px solid var(--line);border-radius:6px;
  font-family:var(--font-b);font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(63,56,240,.16)}
.cform textarea{resize:vertical;min-height:90px}
.cform .consent{font-family:var(--font-m);font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);line-height:1.5}
.cform .status{font-family:var(--font-m);font-size:.74rem;min-height:1.2em;font-weight:700}
.cform .status.ok{color:var(--accent)}
.cform .status.err{color:#c0392b}

.foot{padding:2rem 0;margin-top:4rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--font-m);font-size:.74rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.foot .disc{flex-basis:100%;text-transform:none;letter-spacing:0;font-family:var(--font-b);font-size:.8rem;line-height:1.5;max-width:760px;margin-top:.6rem;opacity:.85}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
.no-motion .reveal{opacity:1;transform:none}

/* ===== мобильное меню (выезжает) ===== */
.mobile-menu{position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;gap:1.2rem;padding:var(--pad);
  transform:translateY(-101%);transition:transform .4s cubic-bezier(.76,0,.24,1)}
body.menu-open .mobile-menu{transform:none}
.mobile-menu a{font-family:var(--font-d);font-weight:700;font-size:2rem;text-transform:uppercase}
/* призыв в меню — на всю ширину, текст переносится, не вылезает за экран */
.mobile-menu .cta{font-family:var(--font-b);font-weight:600;font-size:1.05rem;line-height:1.25;
  text-transform:none;white-space:normal;width:100%;justify-content:center;text-align:center;
  border-radius:999px;padding:1.1rem 1.6rem;margin-top:.6rem}
.mobile-menu .cta .dot{display:none}

/* ===== адаптив ===== */
@media (max-width:980px){
  .contact-body{grid-template-columns:1fr}
  .contact-portrait{order:-1;max-width:280px}
}
@media (max-width:860px){
  body.cursor-on{cursor:auto}
  .cursor{display:none}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .hero{min-height:auto;padding-top:7rem}
  /* шар за именем: виден вверху и буквы «наезжают» на него (mix-blend) */
  .hero .blob{width:66vw;height:66vw;top:14vh;bottom:auto;right:-10vw;opacity:.95}
  .hero .meta-row{flex-direction:column;align-items:flex-start;gap:.6rem}
  .hero .sub{flex-direction:column;align-items:flex-start}
  /* горизонтальный скролл превращаем в обычную вертикаль */
  .hpin{position:static;height:auto;display:block;padding:3rem 0}
  .htrack{flex-direction:column;transform:none !important;gap:1rem}
  .hintro,.hcard{flex:none;width:100%;min-width:0}
  .rline{grid-template-columns:auto 1fr;gap:1.1rem}
  .rline .d{display:none}
  .stats{grid-template-columns:1fr}
  .price .grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .blob{animation:none}
  .marq .row{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hero h1 .l{opacity:1;transform:none;transition:none}
  .manifesto .big w{color:var(--ink)}
  .manifesto .big w.hl-word{color:var(--accent)}
}