/* Tenzor Autohaus: компоненты. Основа перенята с лендинга Rezar (кнопки-пилюли, карточки, шаги, таймлайн,
   плашки, галочки), адаптирована под логотип Tenzor. Раскладка страницы в landing.css. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--surface);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
ol,ul{list-style:none}
[hidden]{display:none!important}
.shell{width:var(--shell);margin-inline:auto}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.section--ink :focus-visible,.card--ink :focus-visible,.footer :focus-visible{outline-color:var(--lime)}

/* ── логотип: знак «T» на чёрном квадрате (как в логотипе) + слово ── */
.logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);min-height:44px}
.logo-mark{width:2.6rem;height:2.6rem;flex:none}
.logo-word{display:grid;font:900 1.2rem/1 var(--font-display);letter-spacing:.06em}
.logo-word small{font:800 .56rem/1 var(--font-body);letter-spacing:.52em;margin-top:.35rem}
.logo--light{color:var(--white)}

/* ── типографика ── */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:800 .78rem/1.2 var(--font-body);
  letter-spacing:.14em;text-transform:uppercase}
/* маркер eyebrow: скошенный срез, как концы перекладины «T» */
.eyebrow::before{content:"";flex:none;width:.6rem;height:.55rem;background:currentColor;clip-path:polygon(0 0,100% 0,72% 100%,28% 100%)}
.display{font:900 var(--fs-hero)/.98 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.h2{font:900 var(--fs-h2)/1.04 var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.h3{font:800 var(--fs-h3)/1.2 var(--font-display);letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.55;font-weight:500}
.muted{color:var(--muted)}

/* ── кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.4rem;padding:0 1.6rem;
  border-radius:999px;border:2px solid transparent;font:800 1rem/1 var(--font-body);text-decoration:none;
  cursor:pointer;transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:1.2rem;height:1.2rem;flex:none}
.btn--ink{background:var(--ink);color:var(--lime)}
.btn--ink:hover{background:var(--graphite)}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:var(--lime-deep)}
.btn--outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--outline:hover{background:var(--ink);color:var(--lime)}
.btn--outline-light{border-color:rgba(255,255,255,.5);color:var(--white);background:transparent}
.btn--outline-light:hover{background:var(--white);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* ── чипы ── */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:999px;
  font:700 .9rem/1 var(--font-body);background:rgba(18,18,17,.08);color:var(--ink)}
.chip--ink{background:var(--ink);color:var(--lime)}

/* ── секции ── */
.section{padding-block:var(--space-section)}
.section--ink{background:var(--ink);color:var(--white)}
.section--ink .muted{color:var(--muted-dark)}
.section--lime{background:var(--lime)}
.section-head{display:grid;gap:var(--s-4);max-width:46rem;margin-bottom:var(--s-7)}
.section-head .lead{max-width:40rem}
.section--ink .eyebrow{color:var(--lime)}

/* ── шаг процесса: номер 01 лаймом, графитовая карточка ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:var(--s-4);counter-reset:step}
.step{position:relative;padding:1.6rem 1.5rem 1.7rem;border-radius:var(--radius);background:var(--graphite);
  border:1px solid var(--line-dark);counter-increment:step;color:var(--white)}
.step::before{content:counter(step,decimal-leading-zero);display:block;font:900 2.4rem/1 var(--font-display);
  color:var(--lime);margin-bottom:var(--s-5);letter-spacing:-.04em}
.step p{color:var(--muted-dark);margin-top:var(--s-2);font-size:.97rem}
/* выделенный шаг: лаймовая плоскость */
.step--lime{background:var(--lime);border-color:transparent;color:var(--ink)}
.step--lime::before{color:var(--ink)}
.step--lime p{color:var(--ink)}

/* ── карточка ── */
.card{padding:1.8rem;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line)}
.card--lime{background:var(--lime);border-color:transparent}
.card--ink{background:var(--ink);color:var(--white);border-color:transparent}

/* ── прайс-лист ── */
.price-list{display:grid}
.price-list li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px dashed var(--line);font-size:.97rem}
.price-list li span:last-child{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── плашка ── */
.note{display:flex;gap:.8rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);background:rgba(18,18,17,.06);
  font-size:.93rem;align-items:flex-start;line-height:1.5}
.note::before{content:"!";flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--ink);color:var(--lime);font-weight:900;font-size:.85rem}
/* спокойная плашка-информация (маршрут через третью страну): не предупреждение, а сведение */
.note--info{background:rgba(208,250,9,.22);border:1px solid rgba(18,18,17,.12)}
.note--info::before{content:"i";background:var(--ink);color:var(--lime);font-style:normal}

/* ── список с галочками ── */
.checks{display:grid;gap:var(--s-3)}
.checks li{display:flex;gap:.7rem;align-items:flex-start}
.checks li::before{content:"";flex:none;width:1.35rem;height:1.35rem;margin-top:.15rem;border-radius:6px;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23121211' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.section--lime .checks li::before{background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23D0FA09' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ── таймлайн (пункты цены по порядку) ── */
.timeline{display:grid;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:3.4rem 1fr;gap:var(--s-1) var(--s-5);align-items:baseline;
  padding:var(--s-5) 0;border-bottom:1px solid var(--line)}
.timeline .n{font:900 2rem/1 var(--font-display);letter-spacing:-.04em;grid-row:span 2}
.timeline b{display:block}
.timeline small{display:block;color:var(--muted);font-size:.94rem;line-height:1.5}

/* ── аккордеон (FAQ) ── */
.acc{border-top:2px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:4rem;padding:var(--s-4) 0;
  cursor:pointer;list-style:none;font:800 var(--fs-h3)/1.25 var(--font-display);letter-spacing:-.01em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:2.2rem;height:2.2rem;border-radius:50%;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%23D0FA09' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/1rem no-repeat;
  transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{padding:0 3rem var(--s-5) 0;color:var(--muted);max-width:46rem}
.acc details a{text-decoration-color:rgba(18,18,17,.4);text-underline-offset:3px}

/* ── текстовая ссылка ── */
.text-link{display:inline-flex;align-items:center;min-height:44px;font:800 .95rem/1.2 var(--font-body);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--lime-deep)}
.text-link:hover{text-decoration-color:currentColor}

@media (max-width:640px){
  .btn{width:100%;white-space:normal;text-align:center;line-height:1.2}
  .card{padding:var(--s-5)}
  .timeline li{grid-template-columns:2.4rem 1fr;column-gap:var(--s-4)}
  .timeline .n{font-size:1.6rem}
  .acc details p{padding-right:0}
}

/* ── движение ── */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both}
  .rise-2{animation-delay:.08s}.rise-3{animation-delay:.16s}.rise-4{animation-delay:.24s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(1px) scale(.98)}
  .step{transition:transform .3s var(--ease),border-color .3s}
  .step:hover{transform:translateY(-3px);border-color:rgba(208,250,9,.45)}
  .step--lime:hover{border-color:transparent}
  /* блик по главной кнопке */
  .btn--shine{position:relative;overflow:hidden;isolation:isolate}
  .btn--shine::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,rgba(208,250,9,.35) 50%,transparent 70%);
    transform:translateX(-120%);transition:transform .8s var(--ease)}
  .btn--shine:hover::after{transform:translateX(120%)}
  @supports (animation-timeline:view()){
    .reveal-list > *{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    .pop{animation:pop linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
  }
}
@keyframes rise{from{opacity:.001;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes reveal{from{opacity:.001;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:.001;transform:scale(.92)}to{opacity:1;transform:none}}