/* ==========================================================================
   Главный лендинг (/) — только его собственные компоненты.
   Токены, навигация, форма и подвал приходят из /site/base.css.
   ========================================================================== */

/* ---------- первый экран ---------- */
.hero{padding:calc(var(--nav-h) + clamp(56px,9vh,110px)) 0 clamp(60px,8vh,100px);position:relative;overflow:hidden}
.hero__grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,80px);align-items:center}
.hero__title{margin-bottom:26px}
.hero__lead{max-width:56ch;margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--mono);font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-mute)}
.hero__facts span{display:flex;align-items:center;gap:9px}
.hero__facts span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--red)}

/* Композиция первого экрана нарисована стилями, а не фотографией: снимков
   производства, согласованных к публикации, пока нет. Заменяется на
   фотосерию без правки разметки — см. .hero__stage img */
.hero__stage{position:relative;aspect-ratio:4/4.6;border-radius:2px;background:linear-gradient(160deg,#EFE6D4,#E2D6BE 58%,#D8C9AC);overflow:hidden;box-shadow:0 50px 90px -60px rgba(33,30,25,.75)}
.hero__lattice{position:absolute;inset:0;opacity:.4;background-image:repeating-linear-gradient(58deg,transparent 0 26px,rgba(33,30,25,.16) 26px 27px),repeating-linear-gradient(-58deg,transparent 0 26px,rgba(33,30,25,.16) 26px 27px)}
/* Кадр изделия. object-fit:cover — потому что пропорции съёмки и слота
   не совпадают и совпадать не обязаны: заменить снимок можно любым. */
.hero__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* Честная подпись: на кадре визуализация, а не фотография готового изделия */
.hero__render,.shots__note{
  position:absolute;top:18px;left:18px;z-index:2;
  padding:5px 11px;border-radius:30px;
  background:rgba(28,26,23,.62);backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,231,215,.82);
}
.hero__mark{position:absolute;inset:auto 0 0;padding:26px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(to top,rgba(28,26,23,.86),transparent);color:var(--cream)}
.hero__mark b{font-family:var(--serif);font-size:1.28rem;font-weight:500}
.hero__mark span{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.hero__seal{position:absolute;top:24px;right:24px;width:78px;height:78px;border:1px solid rgba(33,30,25,.28);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-align:center;color:var(--ink-soft);line-height:1.5}
/* ---------- три сценария ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.path{display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px);background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);transition:transform .3s ease,box-shadow .3s ease}
.path:hover{transform:translateY(-5px);box-shadow:0 40px 66px -46px rgba(33,30,25,.6)}
.path__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--ink-mute);margin-bottom:20px}
.path__title{font-family:var(--serif);font-size:clamp(1.4rem,1.9vw,1.75rem);margin-bottom:12px}
.path__text{font-size:.95rem;line-height:1.62;color:var(--ink-soft);margin:0 0 22px}
.path__out{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:9px}
.path__out::after{content:'→';color:var(--red);transition:transform .25s ease}
.path:hover .path__out::after{transform:translateX(5px)}
/* ---------- направления ---------- */
.dirs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.dir{padding:clamp(24px,2.4vw,34px);background:var(--bg);transition:background .3s ease}
.dir:hover{background:var(--bg-card)}
.dir__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--ink-mute);margin-bottom:14px}
.dir__t{font-family:var(--serif);font-size:1.24rem;margin-bottom:9px}
.dir__d{font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin:0}
/* ---------- процесс ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d)}
.step{padding:26px 22px 30px;background:var(--dark)}
.step__n{font-family:var(--mono);font-size:.72rem;color:var(--gold-l);margin-bottom:16px}
.step__t{font-family:var(--serif);font-size:1.1rem;margin-bottom:8px;color:var(--cream)}
.step__d{font-size:.86rem;line-height:1.58;color:rgba(239,231,215,.6);margin:0}
/* ---------- материалы ---------- */
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(14px,1.6vw,20px)}
.mat{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-card)}
.mat__tex{aspect-ratio:5/3;position:relative;display:flex;align-items:flex-end;padding:14px}
.mat__tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82);mix-blend-mode:difference}
.mat__tex--felt{background:linear-gradient(135deg,#E4D9C0,#CFC0A2)}
.mat__tex--leather{background:linear-gradient(135deg,#8A5B3C,#5E3A24)}
.mat__tex--wood{background:linear-gradient(135deg,#C39A5E,#8E6A38)}
.mat__tex--textile{background:linear-gradient(135deg,#51607A,#33405A)}
.mat__tex--laser{background:linear-gradient(135deg,#2B2822,#14120F)}
.mat__tex--print{background:linear-gradient(135deg,#B14533,#7C2C1F)}
.mat__tex--nfc{background:linear-gradient(135deg,#3F6152,#22392F)}
.mat__tex--hand{background:linear-gradient(135deg,#9A8D72,#6E6350)}
.mat__body{padding:18px 20px 22px}
.mat__t{font-family:var(--serif);font-size:1.1rem;margin-bottom:7px}
.mat__d{font-size:.87rem;line-height:1.58;color:var(--ink-soft);margin:0}
/* ---------- персонализация ---------- */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(14px,1.7vw,22px)}
.level{padding:24px 24px 28px;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);border-left:2px solid var(--gold)}
.level__n{font-family:var(--mono);font-size:.72rem;color:var(--gold);margin-bottom:12px}
.level__t{font-family:var(--serif);font-size:1.12rem;margin-bottom:8px}
.level__d{font-size:.88rem;line-height:1.58;color:var(--ink-soft);margin:0}
/* ---------- конструктор ---------- */
.studio{display:grid;grid-template-columns:1fr .92fr;gap:clamp(30px,5vw,70px);align-items:center}
.studio__badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid var(--line-d);border-radius:30px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l);margin-bottom:22px}
.studio__badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold-l)}
.studio__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.studio__note{margin-top:20px;font-size:.83rem;line-height:1.6;color:rgba(239,231,215,.55)}
.studio__panel{border:1px solid var(--line-d);border-radius:var(--r);background:var(--dark-2);padding:22px;display:grid;gap:12px}
.studio__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;background:rgba(239,231,215,.045);border-radius:3px;font-size:.86rem}
.studio__row span{color:rgba(239,231,215,.62)}
.studio__row b{font-weight:600;color:var(--cream)}
.studio__canvas{aspect-ratio:16/10;border-radius:3px;background:linear-gradient(150deg,#2B2822,#191713);display:grid;place-items:center;position:relative;overflow:hidden}
.studio__orn{width:56%;aspect-ratio:1;border:1px solid rgba(201,154,94,.5);position:relative}
.studio__orn::before,.studio__orn::after{content:'';position:absolute;inset:16%;border:1px solid rgba(201,154,94,.36)}
.studio__orn::after{inset:32%;border-radius:50%}
/* ---------- продуктовый подлендинг ---------- */
.promo{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,60px);align-items:center;padding:clamp(28px,3.4vw,48px);background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r)}
.promo__fig{aspect-ratio:4/3;border-radius:3px;overflow:hidden;background:var(--bg-sand)}
.promo__fig img{width:100%;height:100%;object-fit:cover}
.promo__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
/* ---------- основатель ---------- */
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(26px,4vw,64px);align-items:center}
.founder__fig{aspect-ratio:4/5;border-radius:3px;background:linear-gradient(160deg,#2B2822,#14120F);display:grid;place-items:center;text-align:center;padding:26px;color:rgba(239,231,215,.5);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;line-height:2}
.founder__q{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.28;margin:0 0 22px}
.founder__who{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:26px}
/* ---------- финал ---------- */
.final{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.final__half{padding:clamp(34px,4vw,58px);background:var(--bg);display:flex;flex-direction:column}
.final__half--accent{background:var(--bg-sand)}
.final__t{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.05rem);margin-bottom:12px}
.final__d{font-size:.95rem;line-height:1.62;color:var(--ink-soft);margin:0 0 26px}
.final__half .btn{align-self:flex-start;margin-top:auto}

/* ---------- адаптив страницы ---------- */
@media (max-width:1080px){
  .hero__grid,.studio,.promo,.founder{grid-template-columns:1fr}
  .hero__stage{aspect-ratio:16/11}
  .founder__fig{aspect-ratio:16/9}
  .dirs,.paths{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .paths,.dirs,.final{grid-template-columns:1fr}
  .final{border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){ .path:hover{transform:none} }

/* ---------- RTL ---------- */
/* Стрелка указывает в сторону чтения, а не всегда вправо */
[dir='rtl'] .path__out::after{content:'←'}
[dir='rtl'] .path:hover .path__out::after{transform:translateX(-5px)}
[dir='rtl'] .level{border-left:0;border-right:2px solid var(--gold)}
[dir='rtl'] .hero__seal{right:auto;left:24px}
[dir='rtl'] .studio__row,[dir='rtl'] .hero__facts span{flex-direction:row-reverse}

/* ---------- полоса изделий ---------- */
.shots{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px);margin-bottom:clamp(30px,4vw,52px)}
.shot{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--dark)}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 58%;transition:transform 1s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{
  position:absolute;inset:auto 0 0;padding:22px 20px 18px;
  background:linear-gradient(to top,rgba(28,26,23,.88),transparent);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);
}
.shots__note{top:auto;bottom:14px;right:14px;left:auto}

@media (max-width:680px){
  .shots{grid-template-columns:1fr}
  .shot img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){ .shot:hover img{transform:none} }

/* ---------- RTL для новых блоков ---------- */
[dir='rtl'] .hero__render{left:auto;right:18px}
[dir='rtl'] .shots__note{right:auto;left:14px}