/* ═══════════════════════════════════════════════════════════════════
   Smart-Soft.tj — landing
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:        #05070D;
  --text:      #E4E9F2;
  --muted:     #8791A5;
  --dim:       #5A6377;
  --accent:    #5C9BFF;
  --accent-hi: #8AB8FF;
  --accent-in: #03080F;

  --line:      rgba(92,155,255,.28);
  --line-soft: rgba(228,233,242,.10);

  /* полупрозрачные подложки — сквозь них видно фоновый градиент */
  --cell:      rgba(5,7,13,.52);
  --cell-hi:   rgba(13,19,34,.76);

  --wrap:      1280px;
  --pad:       40px;

  --f-display: "Oswald", "Arial Narrow", sans-serif;
  --f-body:    "Onest", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── фоновый слой: диагональная основа + мягкие блики ────────────── */

body::before{
  content:"";
  position:fixed;
  inset:-6vh -6vw;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1100px 760px at 18% 12%,  rgba(72,132,255,.34), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 720px at 84% 78%,  rgba(48,92,232,.30),  rgba(0,0,0,0) 58%),
    radial-gradient(900px 700px  at 55% 45%,  rgba(34,152,222,.14), rgba(0,0,0,0) 62%),
    linear-gradient(125deg,
      #071231 0%,
      #070B1A 26%,
      #12306A 50%,
      #070C1E 68%,
      #0D2049 86%,
      #071231 100%);
}

h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-in);
  padding:12px 18px; font-family:var(--f-mono); font-size:12px;
}
.skip:focus{ left:0; }

/* ── каркас ──────────────────────────────────────────────────────── */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{
  border-top:1px solid var(--line-soft);
  padding-block:96px;
}

.section__head{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  align-items:baseline;
  justify-content:space-between;
  padding-bottom:40px;
}

/* ── типографика ─────────────────────────────────────────────────── */

.mono{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}

.label{ color:var(--muted); }
.label--dim{ color:var(--dim); }
.label--accent{ color:var(--accent); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
}

.display{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(2.9rem, 7.4vw, 5.6rem);
  line-height:1.02;
  /* Oswald узкий: на прописных отрицательный трекинг слипается */
  letter-spacing:.005em;
}

.body{
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
}
.body--dim{ color:var(--dim); font-size:14px; }

.link{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid transparent;
  align-self:flex-start;
  transition:border-color .2s;
}
.link:hover{ border-bottom-color:var(--accent); }

/* ── кнопки ──────────────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:14px 22px;
  border:1px solid var(--line);
  white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s;
}
.btn--solid{ background:var(--accent); color:var(--accent-in); border-color:var(--accent); font-weight:500; }
.btn--solid:hover{ background:var(--accent-hi); border-color:var(--accent-hi); }
.btn--line{ color:var(--text); }
.btn--line:hover{ border-color:var(--accent); color:var(--accent); }
.btn--ghost{ padding:9px 16px; color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ── 00 · верхняя полоса ─────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(5,7,13,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;
}
.logo{
  font-family:var(--f-body);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.02em;
}
.logo__tld{ color:var(--accent); }

/* ── 01 · hero ───────────────────────────────────────────────────── */

.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(90px, 13vw, 170px);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 70% at 22% 30%, #000 0%, transparent 78%);
  opacity:.55;
  pointer-events:none;
}
.hero__in{ position:relative; }

.hero .display{ margin-top:26px; }

/* точка у базовой линии — как в актуальном референсе: квадрат .22em,
   гаснет не в ноль, а до 8%, чтобы не мельтешить на периферии зрения */
.caret{
  display:inline-block;
  width:.22em; height:.22em;
  background:var(--accent);
  margin-left:.14em;
  vertical-align:.0em;
  animation:blink 1.05s step-end infinite;
}
@keyframes blink{ 0%,45%{ opacity:1 } 46%,100%{ opacity:.08 } }

.hero__lede{
  margin-top:34px;
  max-width:56ch;
  font-size:18px;
  line-height:1.62;
  color:var(--muted);
}
.hero__actions{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* ── 02 · тикер ──────────────────────────────────────────────────── */

.ticker{
  border-block:1px solid var(--line-soft);
  background:rgba(8,12,22,.66);
  overflow:hidden;
  padding-block:15px;
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:slide 46s linear infinite;
}
.ticker__set{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding-right:2.2em;
  white-space:nowrap;
}
.ticker__set b{ color:var(--accent); font-weight:400; padding-inline:.9em; }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── хайрлайн-сетка ──────────────────────────────────────────────── */

.hairgrid{
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.hairgrid--2{ grid-template-columns:repeat(2,1fr); }
.hairgrid--3{ grid-template-columns:repeat(3,1fr); }
.hairgrid > *{ background:var(--cell); }

/* ── иконка карточки ─────────────────────────────────────────────── */

.card-icon{
  width:60px; height:60px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-soft);
  color:var(--accent);
  flex:none;
  transition:border-color .25s;
}
.card-icon svg{
  width:28px; height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pillar:hover .card-icon,
.service:hover .card-icon,
.step:hover .card-icon{ border-color:var(--line); }

/* ── 03 · направления ────────────────────────────────────────────── */

.pillar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:38px 32px 34px;
  transition:background-color .25s;
}
.pillar:hover{ background:var(--cell-hi); }
.pillar__num{
  font-size:11.5px;
  color:var(--dim);
  letter-spacing:.16em;
}
.pillar h3{
  font-family:var(--f-body);
  font-size:26px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.015em;
}
.pillar .link{ margin-top:auto; padding-top:12px; }

/* ── 04 · услуги ─────────────────────────────────────────────────── */

.service{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:34px 32px;
  transition:background-color .25s;
}
.service:hover{ background:var(--cell-hi); }
.service h3{
  font-family:var(--f-body);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.012em;
}
.service__meta{
  margin-top:auto;
  padding-top:18px;
  font-size:11px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dim);
  line-height:2;
}
.service__meta span{ color:var(--muted); }

/* ── 05 · как работаем ───────────────────────────────────────────── */

.step{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:38px 32px;
  transition:background-color .25s;
}
.step:hover{ background:var(--cell-hi); }
.step h3{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  font-size:34px;
  line-height:1.06;
  letter-spacing:.015em;
}
.step__sub{
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  margin-top:-6px;
}

/* ── 06 · технологии ─────────────────────────────────────────────── */

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.tags li{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line-soft);
  padding:9px 15px;
  transition:border-color .2s, color .2s;
}
.tags li:hover{ border-color:var(--line); color:var(--accent); }

/* ── 07 · контакты ───────────────────────────────────────────────── */

.contact__lede{
  max-width:52ch;
  font-size:17px;
  color:var(--muted);
  padding-bottom:44px;
}
.contact__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:34px 30px 30px;
  transition:background-color .25s;
}
.contact__item:hover{ background:var(--cell-hi); }
.contact__value{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  word-break:break-word;
}
.contact__note{
  margin-top:auto;
  padding-top:14px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  transition:color .2s;
}
.contact__item:hover .contact__note{ color:var(--accent); }

/* ── 08 · футер ──────────────────────────────────────────────────── */

.footer{
  border-top:1px solid var(--line-soft);
  padding-block:28px;
}
.footer__in{
  display:flex;
  flex-wrap:wrap;
  gap:10px 32px;
  justify-content:space-between;
  color:var(--muted);
}
.footer__dim{ color:var(--dim); }

/* ── появление при скролле ───────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-in{ opacity:1; transform:none; }

/* Карточки одновременно и .reveal, и интерактивные. У обоих селекторов
   одинаковая специфичность, и .reveal объявлен ниже — без этого правила
   он затирает transition ховера, и подсветка срабатывает рывком. */
.reveal.pillar,
.reveal.service,
.reveal.step,
.reveal.contact__item{
  transition:opacity .55s ease, transform .55s ease, background-color .25s ease;
}

/* ── адаптив ─────────────────────────────────────────────────────── */

@media (max-width:1000px){
  :root{ --pad:28px; }
  .hairgrid--3{ grid-template-columns:repeat(2,1fr); }
  .section{ padding-block:72px; }
}

@media (max-width:640px){
  :root{ --pad:20px; }
  .hairgrid--2,
  .hairgrid--3{ grid-template-columns:1fr; }
  .hero__lede{ font-size:16px; }
  .hero__actions .btn{ flex:1 1 100%; justify-content:center; }
  .pillar,
  .service,
  .step,
  .contact__item{ padding:28px 22px; }
  .section__head{ padding-bottom:28px; }
  .footer__in{ flex-direction:column; }
}

/* ── уважение к настройкам движения ──────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .ticker__track{ animation:none; }
  .caret{ animation:none; }
  *{ transition-duration:.01ms !important; }
}