/* ============================================================
   ADAT · сайт-витрина бренда
   Тёмный люкс: обсидиан + шампанское золото.
   Сигнатура — «золотая нить»: стежки-ромбы прошивают секции,
   нить-прогресс затекает золотом по мере прокрутки.
   Шрифты: Marcellus (капс/вордмарк) · Cormorant (текст) · Caveat (акцент)
   Анимации: GSAP + ScrollTrigger, нативный скролл (см. main.js)
   ============================================================ */

:root{
  --obsidian:  #0E0C0B;
  --graphite:  #15120E;
  --graphite-2:#1C1812;
  --line:      #2A241B;

  --gold:      #C9A35F;
  --gold-pale: #E7CF9C;
  --gold-deep: #9A7B45;

  --ivory:     #F4EEE1;
  --ash:       #C3B9A6;   /* тело текста — контраст ~9:1 на обсидиане */
  --ash-dim:   #968C7B;   /* приглушённые подписи — ~4.6:1 */

  --serif: "Cormorant", "Times New Roman", serif;
  --caps:  "Marcellus", serif;
  --script:"Caveat", cursive;

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1140px;
  --pad: clamp(20px, 5vw, 48px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-x:clip; color-scheme:dark; }
/* плавные якоря — только десктоп: на таче smooth-скролл конфликтует с нативным жестом */
@media (pointer:fine){ html{ scroll-behavior:smooth; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* якоря под фикс-шапкой */
section[id]{ scroll-margin-top:84px; }

/* тач-таргеты */
a, button{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* сбалансированный перенос заголовков */
.h-sec, .statement, .cta__title{ text-wrap:balance; }

body{
  font-family:var(--serif);
  background:var(--obsidian);
  color:var(--ash);
  font-size:19px;
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  /* optimizeLegibility — известный источник скролл-джанка на Android, только для десктопа */
  text-rendering:auto;
}
@media (pointer:fine){ body{ text-rendering:optimizeLegibility; } }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; color:var(--gold-pale); }
::selection{ background:rgba(201,163,95,.28); color:#fff; }

.skip{
  position:fixed; top:-60px; left:16px; z-index:200;
  background:var(--gold); color:#1a1409; padding:10px 16px; border-radius:8px;
  font-family:var(--caps); letter-spacing:.08em; transition:top .25s;
}
.skip:focus{ top:16px; }

/* ---------- зерно плёнки ---------- */
/* Статичное зерно: собственный композитный слой (translateZ), без анимации —
   анимированный fullscreen soft-light пере-композитил всю страницу каждый кадр.
   На тач/узких экранах зерно на тёмном фоне не читается — прячем совсем. */
.grain{
  position:fixed; inset:-40%; z-index:90; pointer-events:none;
  opacity:.05; mix-blend-mode:soft-light;
  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='0.86' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:translateZ(0);
}
@media (max-width:900px), (pointer:coarse){ .grain{ display:none; } }

/* ---------- нить-прогресс сверху ---------- */
/* transform:scaleX вместо width — композит вместо layout+paint каждый кадр.
   Свечение — тонким градиентом в самом фоне, без анимируемого box-shadow. */
.topthread{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:rgba(201,163,95,.1); }
.topthread i{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center; will-change:transform;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-pale) 88%,#fff6df);
}

/* ============================================================
   ШАПКА
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:20px;
  padding:18px var(--pad);
  transition:background .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(14,12,11,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  padding-top:13px; padding-bottom:13px;
}
/* тач/мобайл: backdrop-filter на fixed-шапке пере-блюрит каждый кадр скролла —
   заменяем плотным полупрозрачным фоном. */
@media (max-width:900px), (pointer:coarse){
  .nav.scrolled{ background:rgba(14,12,11,.92); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.nav__brand{ display:flex; align-items:center; gap:11px; color:var(--gold); }
.nav__seal{ width:30px; height:30px; flex:0 0 auto; }
.nav__word{ font-family:var(--caps); font-size:21px; letter-spacing:.34em; color:var(--ivory); text-indent:.34em; }
.nav__links{ margin-left:auto; display:flex; gap:30px; }
.nav__links a{
  font-family:var(--caps); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash-dim); position:relative; padding:4px 0; transition:color .3s;
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--ivory); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ margin-left:6px; }
.show-sm{ display:none; }
@media (max-width:880px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; padding:12px 22px; font-size:12px; }
  .hide-sm{ display:none; }
  .show-sm{ display:inline; }
}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--caps); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px; line-height:1.05;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s, border-color .35s;
}
.btn--gold{ background:linear-gradient(180deg,var(--gold-pale),var(--gold)); color:#241a09; box-shadow:0 10px 30px -10px rgba(201,163,95,.6); }
.btn--gold:hover{ box-shadow:0 16px 40px -10px rgba(201,163,95,.8); }
.btn--ghost{ border-color:var(--gold-deep); color:var(--gold-pale); background:rgba(201,163,95,.04); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(201,163,95,.12); color:var(--ivory); }
.btn.full{ width:100%; }
.btn:focus-visible, a:focus-visible, .contact:focus-visible{ outline:2px solid var(--gold-pale); outline-offset:3px; }

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px var(--pad) 90px;
  overflow:hidden;
}
/* Герой без фото: обсидиан + тёплое сияние + гильошé-розетка (генерируется в main.js).
   Тонкая золотая гравюра волновых колец — язык ручной работы, резкость на любом экране. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(58% 40% at 50% 42%, rgba(201,163,95,.13), transparent 70%),
    radial-gradient(120% 90% at 50% 108%, rgba(154,123,69,.10), transparent 55%),
    var(--obsidian);
}
.hero__rosette{
  position:absolute; left:50%; top:43%;
  width:min(180vw, 780px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  /* кольцевая маска: центр чистый под текст, гравюра — нимбом вокруг */
  -webkit-mask-image:radial-gradient(circle, transparent 30%, #000 52%, #000 70%, transparent 90%);
  mask-image:radial-gradient(circle, transparent 30%, #000 52%, #000 70%, transparent 90%);
}
@media (pointer:coarse), (max-width:768px){
  .hero__rosette{ width:170vw; opacity:.8; }
}
.hero__rosette svg{ width:100%; height:100%; display:block; }
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero__rosette svg{ animation:rosette-spin 200s linear infinite; will-change:transform; }
}
@keyframes rosette-spin{ to{ transform:rotate(360deg); } }
/* ---------- мобайл: стежки-звёзды вместо документной SVG-нити ----------
   (embroidery() на coarse не создаётся — см. main.js: пересборки оверлея
   при схлопывании адресной строки давали скачки позиции скролла) */
@media (pointer:coarse){
  .band{ position:relative; }
  .band::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-.5px);
    width:1px; height:44px;
    background:linear-gradient(180deg, var(--gold-deep), transparent);
    opacity:.75; pointer-events:none;
  }
  .band::after{
    content:""; position:absolute; top:38px; left:50%; transform:translate(-50%,0);
    width:18px; height:18px; pointer-events:none; opacity:.9;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23C9A35F' stroke-width='1'%3E%3Crect x='5' y='5' width='10' height='10'/%3E%3Crect x='5' y='5' width='10' height='10' transform='rotate(45 10 10)'/%3E%3C/g%3E%3Cpath d='M10 8 L12 10 L10 12 L8 10 Z' fill='%23C9A35F'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .hero::before, .hero::after{ display:none; } /* герой без стежка */
  .embroidery{ display:none; }
}
/* золотая пыль в герое */
.hero__dust{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 18%, transparent 0%, rgba(14,12,11,.35) 55%, var(--obsidian) 100%),
    linear-gradient(180deg, rgba(14,12,11,.55) 0%, transparent 26%, transparent 55%, var(--obsidian) 100%);
}
.hero__inner{ position:relative; z-index:2; max-width:920px; display:grid; justify-items:center; gap:26px; }

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--caps); font-size:clamp(11px,2.6vw,13px); letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-pale);
}
.stitch{ width:30px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); position:relative; }
.stitch::after{ content:""; position:absolute; right:-3px; top:50%; width:5px; height:5px; background:var(--gold); transform:translateY(-50%) rotate(45deg); }

.hero__word{
  font-family:var(--caps); font-weight:400;
  font-size:clamp(82px, 27vw, 250px); line-height:.92;
  letter-spacing:.06em; text-indent:.06em; color:var(--ivory);
  display:flex; gap:.02em;
}
.hero__word .ch{
  display:inline-block;
  background-image:
    linear-gradient(105deg, transparent 43%, rgba(255,255,255,.92) 50%, transparent 57%),
    linear-gradient(180deg,#fff 0%,var(--gold-pale) 42%,var(--gold) 72%,var(--gold-deep) 100%);
  background-size:260% 100%, 100% 100%;
  background-position:var(--shx,260%) 0, 0 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}
.hero__sub{
  font-size:clamp(19px,4.6vw,25px); font-weight:300; max-width:30ch; color:var(--ash); line-height:1.5;
}
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

.hero__scroll{
  /* центрируем инсетами, НЕ transform: reveal-анимация ставит transform:none
     и сдвигала подпись вправо (баг «листайте съехало») */
  position:absolute; bottom:26px; left:0; right:0; margin-inline:auto; width:max-content; z-index:2;
  display:grid; justify-items:center; gap:9px;
  font-family:var(--caps); font-size:10px; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--ash-dim);
}
.hero__scroll i{ width:1px; height:42px; background:linear-gradient(180deg,var(--gold),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--gold-pale); transform:translateY(-100%); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(-100%)} 70%,100%{transform:translateY(240%)} }

/* ============================================================
   ОБЩИЕ СЕКЦИИ
   ============================================================ */
.band{ position:relative; padding:clamp(72px,10vw,120px) 0; }
.wrap{ width:min(var(--wrap), 100%); margin-inline:auto; padding-inline:var(--pad); }
.wrap.center, .center{ text-align:center; }

/* ---------- золотая нить-вышивка (сигнатура, непрерывный SVG-оверлей) ---------- */
.embroidery{
  position:absolute; top:0; left:0; z-index:0;
  pointer-events:none; overflow:clip; isolation:isolate;
}
.embroidery svg{ display:block; }
.embroidery .emb-thread{ fill:none; }
.embroidery .emb-node{ opacity:0; }        /* JS раскрывает */
.embroidery .emb-tip{ opacity:0; }          /* JS показывает при скролле */

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--caps); font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.eyebrow.center{ justify-content:center; }
.node{ width:6px; height:6px; background:var(--gold); transform:rotate(45deg); box-shadow:0 0 10px rgba(201,163,95,.7); }

.h-sec{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,7vw,58px); line-height:1.08; letter-spacing:.005em; color:var(--ivory);
}
.sub{ font-size:clamp(18px,3.4vw,21px); font-weight:300; color:var(--ash); max-width:56ch; margin:18px 0 0; }
.center .sub, .sub.center{ margin-inline:auto; }

/* ---------- манифест ---------- */
.band--manifesto{ padding-top:clamp(84px,12vw,140px); }
.statement{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(36px,9vw,82px); line-height:1.04; letter-spacing:-.01em; color:var(--ivory);
  margin-bottom:34px;
}
.statement>span{ display:block; }
.lede{ font-size:clamp(19px,3.6vw,23px); font-weight:300; max-width:62ch; color:var(--ash); }
.band--manifesto .wrap{ width:min(960px,100%); }

/* ============================================================
   ЧТО ДЕЛАЕМ — две карточки
   ============================================================ */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:54px; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.mode{
  position:relative; padding:42px 36px; border-radius:18px;
  background:linear-gradient(180deg,var(--graphite),var(--obsidian));
  border:1px solid var(--line); overflow:hidden;
}
.mode--accent{ border-color:var(--gold-deep); background:linear-gradient(180deg,var(--graphite-2),var(--graphite)); }
.mode--accent::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 80% 0%,rgba(201,163,95,.14),transparent 60%); pointer-events:none; }
.mode__tag{ font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.mode__title{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,5.5vw,38px); color:var(--ivory); margin:14px 0 12px; }
.mode__text{ font-size:18px; color:var(--ash); margin-bottom:22px; }
.ticks{ list-style:none; display:grid; gap:11px; }
.ticks li{ position:relative; padding-left:26px; font-size:17px; color:var(--ash); }
.ticks li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border:1px solid var(--gold); transform:rotate(45deg); }

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.marquee{ position:relative; overflow:hidden; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--graphite); }
.marquee__row{ display:flex; align-items:center; gap:30px; width:max-content; white-space:nowrap; will-change:transform; }
.marquee__row span{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(26px,5vw,44px); color:var(--ivory); opacity:.85; }
.marquee__row i{ color:var(--gold); font-style:normal; font-size:14px; }

/* ============================================================
   РАБОТЫ
   ============================================================ */
/* «Живые телефоны» — витрина работ */
.showcase-frame{ position:relative; margin-top:54px; }
.showcase{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(20px,3.4vw,44px);
}
.pcase{
  display:flex; flex-direction:column; align-items:center; flex:0 0 auto;
  width:min(272px,78vw); text-align:center;
}
/* центральный (Подкова) — крупнее и приподнят, боковые ниже.
   DOM: Подкова, Гравюра, Акварель → раскладка Гравюра | Подкова | Акварель */
@media (min-width:701px){
  .pcase{ transform:translateY(10px); }
  .pcase:nth-child(1){ order:2; }   /* Подкова — центр */
  .pcase:nth-child(2){ order:1; }   /* Гравюра — слева */
  .pcase:nth-child(3){ order:3; }   /* Акварель — справа */
  .pcase--lead{ transform:translateY(-18px) scale(1.06); }
}

/* устройство */
.phone{
  position:relative; width:100%; padding:10px; border-radius:44px;
  background:linear-gradient(180deg,#211c16,#141110 62%,#0f0d0b);
  border:1px solid rgba(201,163,95,.35);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.pcase--lead .phone{ box-shadow:0 30px 60px -30px rgba(0,0,0,.85), 0 46px 90px -34px rgba(201,163,95,.30); }
.phone__speaker{
  position:absolute; top:2.5px; left:50%; transform:translateX(-50%); z-index:3;
  width:54px; height:5px; border-radius:3px; background:#0a0908;
}
.phone__screen{
  position:relative; aspect-ratio:480 / 1038; border-radius:34px; overflow:hidden;
  background:#0a0908;
}
.phone__video{ width:100%; height:100%; object-fit:cover; display:block; }

/* бейдж-ярлык на устройстве */
.pcase__badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--caps); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
  background:rgba(20,18,14,.72); color:var(--gold-pale); border:1px solid var(--gold-deep);
  display:inline-flex; align-items:center; gap:7px;
}
@media (pointer:fine){
  .pcase__badge{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
}
@media (pointer:coarse){
  .pcase__badge{ background:rgba(20,18,14,.92); }
  .phone, .pcase--lead .phone{ box-shadow:0 18px 34px -20px rgba(0,0,0,.8); }
}
.pcase__badge--live{ background:var(--gold-pale); color:#1a1409; border-color:transparent; }
/* пульс «вживую»: transform:scale + opacity (композит) вместо анимации box-shadow
   (репейнт каждый кадр непрерывно). Тень статичная, готовая. */
.pcase__badge--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#1a6b3a; box-shadow:0 0 0 3px rgba(26,107,58,.22); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.35); opacity:.65 } }

/* мета под телефоном */
.pcase__meta{ margin-top:26px; display:grid; gap:8px; justify-items:center; }
.pcase__kind{ font-family:var(--caps); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.pcase__name{ font-family:var(--serif); font-weight:500; font-size:26px; color:var(--ivory); line-height:1.1; }
.pcase__desc{ font-size:16px; color:var(--ash-dim); max-width:30ch; }
.pcase__go{ font-family:var(--caps); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-pale); margin-top:6px; transition:letter-spacing .35s var(--ease); }

/* ховер: телефон приподнимается, тень глубже, буквы go разъезжаются */
@media (hover:hover) and (min-width:701px){
  .pcase:hover .phone{ transform:translateY(-8px); box-shadow:0 44px 80px -30px rgba(0,0,0,.9); }
  .pcase--lead:hover .phone{ transform:translateY(-8px) scale(1.06); box-shadow:0 44px 90px -30px rgba(0,0,0,.9), 0 52px 100px -34px rgba(201,163,95,.34); }
  .pcase:hover .pcase__go{ letter-spacing:.22em; }
}

/* хинт и точки — только мобайл */
.showcase__hint, .showcase__dots{ display:none; }

/* ---------- мобайл: карусель ---------- */
@media (max-width:700px){
  .showcase-frame{ margin-top:40px; }
  .showcase{
    justify-content:flex-start; flex-wrap:nowrap;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    gap:16px; padding-inline:13vw; padding-block:14px;
  }
  .showcase::-webkit-scrollbar{ display:none; }
  .pcase{ flex:0 0 74vw; width:74vw; scroll-snap-align:center; transform:none; }
  .phone{ width:100%; margin-inline:auto; }
  /* fade-кромки в фон (узкие — чтобы кромки соседних слайдов проглядывали) */
  .showcase-frame::before, .showcase-frame::after{
    content:""; position:absolute; top:0; bottom:0; width:6vw; z-index:3; pointer-events:none;
  }
  .showcase-frame::before{ left:0; background:linear-gradient(90deg,var(--obsidian),transparent); }
  .showcase-frame::after{ right:0; background:linear-gradient(270deg,var(--obsidian),transparent); }
  .showcase__hint{ display:block; text-align:center; margin-top:18px; font-family:var(--caps); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ash-dim); }
  .showcase__dots{ display:flex; gap:8px; justify-content:center; margin-top:14px; }
  .showcase__dots i{ width:7px; height:7px; border-radius:999px; background:var(--line); transition:background .3s, width .3s; }
  .showcase__dots i.on{ background:var(--gold); width:22px; }
}

/* ============================================================
   ПОЧЕМУ ADAT
   ============================================================ */
/* Асимметрия: верхний ряд — две «тяжёлые» карты (feat--wide, крупнее),
   нижний ряд — две «лёгкие» (feat--soft, меньше паддинг и кегль). 4 карты
   ровно ложатся в 2 колонки → без пустых ячеек; на узком — в один столбик. */
.feats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:56px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; text-align:left; }
@media (max-width:540px){ .feats{ grid-template-columns:1fr; } }
.feat{ background:var(--obsidian); padding:clamp(28px,6vw,36px); transition:background .4s; }
.feat:hover{ background:var(--graphite); }
.feat--wide{ padding:clamp(34px,6.5vw,46px); }
.feat--soft{ padding:clamp(22px,4.6vw,30px); }
.feat__ico{ width:30px; height:30px; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:18px; }
.feat--wide .feat__ico{ width:32px; height:32px; }
.feat--soft .feat__ico{ width:26px; height:26px; margin-bottom:14px; }
.feat__title{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--ivory); margin-bottom:9px; }
.feat--wide .feat__title{ font-size:27px; }
.feat--soft .feat__title{ font-size:21px; }
.feat__text{ font-size:16.5px; color:var(--ash-dim); }
.feat--soft .feat__text{ font-size:15.5px; }

/* строка фактов вместо счётчиков: одна тихая строка-лейбл, разделители ✦ золотом */
.facts{
  margin-top:clamp(42px,6vw,58px); text-align:center;
  font-family:var(--caps); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ash-dim); line-height:2.2;
}
.facts i{ color:var(--gold); font-style:normal; margin:0 .75em; font-size:11px; vertical-align:middle; }
@media (max-width:600px){
  .facts{ display:flex; flex-direction:column; gap:13px; line-height:1.5; }
  .facts i{ display:none; }
}

/* ============================================================
   ФОРМАТЫ / ЦЕНЫ
   ============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; align-items:stretch; text-align:left; }
@media (max-width:880px){ .plans{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:38px 32px; border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--graphite),var(--obsidian));
}
/* средняя карта не «поднимается» рамкой-градиентом: только мягкий тёплый фон
   и лёгкая золотая тень. Акцент несёт золотая кнопка «Обсудить проект». */
.plan--feature{ border-color:var(--gold-deep); background:linear-gradient(180deg,var(--graphite-2),var(--graphite)); box-shadow:0 24px 60px -44px rgba(201,163,95,.35); }
.plan__name{ font-family:var(--caps); font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.plan__price{ font-family:var(--serif); font-weight:400; font-size:clamp(40px,7vw,52px); color:var(--ivory); line-height:1; margin:18px 0 4px; }
.plan__price--ask{ font-size:clamp(30px,5vw,38px); font-style:italic; color:var(--gold-pale); }
.plan__from{ font-size:18px; color:var(--ash-dim); font-style:italic; vertical-align:middle; margin-right:4px; }
.plan__cur{ font-size:24px; color:var(--gold); }
.plan__note{ font-size:16px; font-style:italic; color:var(--ash-dim); margin-bottom:24px; }
.plan__list{ list-style:none; display:grid; gap:12px; margin-bottom:30px; }
.plan__list li{ position:relative; padding-left:26px; font-size:16.5px; color:var(--ash); }
.plan__list li::before{ content:""; position:absolute; left:1px; top:.5em; width:11px; height:7px; border-left:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }
.plan .btn{ margin-top:auto; }

/* ============================================================
   ПРОЦЕСС
   ============================================================ */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:56px; counter-reset:s; text-align:left; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; gap:36px 24px; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:30px; border-top:1px solid var(--line); }
.step__no{ font-family:var(--caps); font-size:14px; letter-spacing:.1em; color:var(--gold); }
.step__no::before{ content:""; position:absolute; top:-5px; left:0; width:8px; height:8px; background:var(--gold); transform:rotate(45deg); }
.step__title{ font-family:var(--serif); font-weight:500; font-size:25px; color:var(--ivory); margin:12px 0 8px; }
.step__text{ font-size:16.5px; color:var(--ash-dim); }

/* ============================================================
   ФИНАЛ / КОНТАКТ
   ============================================================ */
.band--cta{ overflow:hidden; }
.cta-bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(70% 60% at 50% 12%,rgba(201,163,95,.16),transparent 62%); pointer-events:none; }
.band--cta .wrap{ position:relative; z-index:1; }
.cta__title{ font-family:var(--serif); font-weight:300; font-size:clamp(40px,9vw,84px); line-height:1.04; color:var(--ivory); margin:6px 0 20px; }
.cta__sub{ font-size:clamp(18px,3.6vw,22px); font-weight:300; color:var(--ash); max-width:54ch; margin:0 auto 44px; }

.contacts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:560px; margin-inline:auto; }
@media (max-width:680px){ .contacts{ grid-template-columns:1fr; max-width:420px; } }
.contact{
  display:flex; align-items:center; gap:15px; text-align:left;
  padding:18px 22px; border-radius:14px; border:1px solid var(--line);
  background:var(--graphite); min-height:44px;
  transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.contact:hover{ transform:translateY(-4px); border-color:var(--gold-deep); background:var(--graphite-2); }
.contact svg{ width:30px; height:30px; flex:0 0 auto; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linejoin:round; }
.contact--wa svg, .contact--tg svg{ fill:var(--gold); stroke:none; }
.contact span{ display:grid; line-height:1.3; }
.contact b{ font-family:var(--caps); font-size:15px; letter-spacing:.06em; color:var(--ivory); font-weight:400; }
.contact i{ font-size:14px; font-style:italic; color:var(--ash-dim); }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot{ text-align:center; padding:64px var(--pad) 50px; border-top:1px solid var(--line); display:grid; justify-items:center; gap:14px; }
.foot__brand{ display:flex; align-items:center; gap:11px; color:var(--gold); }
.foot__tag{ font-family:var(--script); font-size:26px; color:var(--gold-pale); }
.foot__links{ display:flex; gap:24px; margin-top:4px; }
.foot__links a{ font-family:var(--caps); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim); transition:color .3s; }
.foot__links a:hover{ color:var(--gold-pale); }
.foot__copy{ font-size:13px; color:var(--ash-dim); letter-spacing:.04em; margin-top:8px; }

/* ============================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ (GSAP управляет, это запасной/исходный стейт)
   ============================================================ */
.preload .reveal{ opacity:0; }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* без JS — всё видно */
.no-js .reveal{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__img{ height:100% !important; }
}

/* ---------- карточка работ: основной (растянутый) + вторичный линк ----------
   Карточки-шаблоны (Гравюра/Акварель) — контейнер .pcase (div) с двумя ссылками:
   основная «Открыть шаблон» растянута на всю карточку (клик по карточке = демо),
   вторичная «настроить под себя» лежит выше по z-index и кликается отдельно. */
.pcase{ position:relative; }
.pcase__go--main::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:44px;
}
.pcase__go--main:focus-visible{ outline:none; }
.pcase__go--main:focus-visible::after{ outline:2px solid var(--gold-pale); outline-offset:4px; }
.pcase__tune{
  position:relative; z-index:2;
  font-family:var(--caps); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash-dim); border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.pcase__tune:hover{ color:var(--gold-pale); border-bottom-color:var(--gold-deep); }

/* ---------- ссылки-«хвосты» в карточках форматов ---------- */
.mode__go{
  display:inline-block; margin-top:20px;
  font-family:var(--caps); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-pale); transition:letter-spacing .35s var(--ease);
}
.mode__go:hover{ letter-spacing:.22em; }

/* ---------- финал: онлайн-сценарий впереди, контакты — для индивидуальных ---------- */
.cta__main{ margin-bottom:34px; }
.cta__alt{
  font-family:var(--caps); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ash-dim); margin-bottom:18px;
}

/* строка цены под кнопками героя */
.hero__price{
  font-family:var(--caps); font-size:11px; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; color:var(--ash-dim); margin-top:4px;
}