/* Правки шаблона astraform-studio под «Смирнов Дизайн».
   Подключается после astraform.css и tailwind.css (preflight). */

/* ---------- шрифт: Inter Tight лежит локально, с кириллицей ---------- */
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-tight-cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-tight-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-tight-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url(../fonts/inter-tight-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 52px;
}

/* ---------- курсор: свой только там, где есть мышь ----------
   В шаблоне cursor:none висел на body до ширины 900px независимо от устройства:
   планшет в альбомной ориентации оставался без указателя. */
body {
cursor: auto;
}
a,
button {
cursor: pointer;
}
#cursor {
display: none;
}
@media (hover:hover) and (pointer:fine) and (min-width:901px) {
body,
a,
button {
cursor: none;
}
#cursor {
display: block;
opacity: 0;
transition: opacity .3s;
}
#cursor.is-live {
opacity: 1;
}
}

/* ---------- заставка: шаблон держал первый экран около двух секунд ---------- */
#loader {
transition: clip-path .6s var(--ease);
animation: loaderSafety .01s 4s forwards;
}
.loader-line {
transition: width .42s cubic-bezier(.65, 0, .35, 1);
}
@keyframes loaderSafety {
to {
clip-path: inset(0 0 100% 0);
visibility: hidden;
}
}

/* ---------- типографика под кириллицу ----------
   Трекинг и интерлиньяж шаблона подобраны под латиницу: прописные Ш, Щ, Ж слипаются,
   а маска строки срезает кратку у Й и хвосты у Д, Ц, Щ. */
.muted {
color: #8a8986;
}
.display {
letter-spacing: -.03em;
word-spacing: .06em;
line-height: .94;
}
.hero-headline {
letter-spacing: -.035em;
word-spacing: .06em;
line-height: .9;
}
.mask-line {
padding-top: .2em;
margin-top: -.2em;
padding-bottom: .14em;
margin-bottom: -.14em;
}
.hero-kicker {
letter-spacing: -.02em;
line-height: 1.02;
}
.hero-services {
letter-spacing: -.015em;
line-height: 1.1;
}
.project-title h2,
.clients-content h2 {
margin-top: 14px;
letter-spacing: -.03em;
word-spacing: .06em;
line-height: .98;
}
.more-projects a {
letter-spacing: -.045em;
}
.project-info h3,
.process-step h3,
.tile h3,
.price-row h3,
.footer-grid h3 {
letter-spacing: -.035em;
line-height: 1.05;
}
.award-feature h3 {
letter-spacing: -.04em;
line-height: .98;
}
.case-copy h3 {
letter-spacing: -.045em;
line-height: 1;
margin: 18px 0 20px;
}
.quote blockquote {
font-size: clamp(2.2rem, 4.6vw, 5.6rem);
letter-spacing: -.03em;
line-height: 1;
}
.quote-mark {
font: 700 6rem/.5 "Inter Tight", Arial, sans-serif;
}
.price-row .price {
letter-spacing: -.04em;
line-height: 1.1;
}
.price-row small {
display: block;
max-width: 30ch;
font-size: 13px;
line-height: 1.35;
color: #666;
}
.logo-track span {
letter-spacing: -.04em;
}

/* мелкий текст: 9–11 px шаблона для кириллицы мелко */
.eyebrow {
font-size: 11px;
line-height: 1.25;
}
.hero-meta {
max-width: 240px;
font-size: 11px;
line-height: 1.45;
}
.hero-side-note {
font-size: 10px;
}
.nav-links {
font-size: 12px;
}
.nav-time {
font-size: 11px;
}
.project-info p {
font-size: 11px;
}
.service-index,
.service-tags {
font-size: 12.5px;
}
.service-counter {
font-size: 11px;
}
.stat p,
.team-notes p {
font-size: 14px;
line-height: 1.45;
}
.metric p {
max-width: 28ch;
font-size: 14px;
line-height: 1.4;
}
.feature-list {
font-size: 12.5px;
}
.pack {
font-size: 11px;
}
.quote cite {
font-size: 13px;
}
.footer-grid ul {
font-size: 13px;
}
.footer-bottom {
font-size: 11px;
gap: 16px;
}
.award-row {
gap: 16px;
}
.award-row small {
font-size: 12px;
text-align: right;
white-space: nowrap;
color: #666;
}
.process-step p,
.case-copy p {
font-size: 14px;
line-height: 1.45;
}
.case-copy p {
max-width: 44ch;
}

/* ---------- шапка ---------- */
.brand {
text-decoration: none;
}
.brand::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 7px;
border-radius: 50%;
background: var(--signal);
vertical-align: .12em;
}
.nav-toggle {
display: none;
}
.mobile-menu {
display: none;
}

/* ---------- первый экран ---------- */
.hero-media img {
object-position: 50% 42%;
}
/* кадр почти чёрный, затемнение шаблона гасило изделие */
.hero-media::after {
background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, 0)), linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 46%);
}
.hero-cta {
margin-top: 22px;
color: #fff;
}
.scroll-cue {
text-decoration: none;
}

/* ---------- проекты: шесть карточек-ссылок ---------- */
.project-card {
display: block;
color: #fff;
text-decoration: none;
}
.project-info {
gap: 16px;
}
.project-info > p {
white-space: nowrap;
}
/* предметный кадр на белом: показываем целиком, а не обрезаем по карточке */
.project-card.contain {
background: #fff;
}
.project-card.contain img {
object-fit: contain;
}
@media (min-width:901px) {
.project-pin {
height: 400vh;
}
/* шаблон: заголовок 27vh + лента 73vh + отступ под шапку 52px не помещались
   в 100vh, низ карточек с названиями уходил под обрез */
.project-track {
height: calc(73vh - 52px);
}
/* предметные кадры на ровном фоне: предмет целиком в верхней части панели,
   подпись под ним, а не поверх */
.service-panel.fit {
align-items: flex-start;
}
.service-panel.fit img {
height: 80%;
object-fit: contain;
object-position: 50% 0;
}
}
/* нижний край предметного кадра растворяется в фоне панели */
.service-panel.fit img {
-webkit-mask-image: linear-gradient(#000 84%, transparent);
mask-image: linear-gradient(#000 84%, transparent);
}

/* ---------- задачи: подпись в панели ---------- */
.panel-copy {
position: absolute;
z-index: 2;
left: 7%;
right: 7%;
bottom: 8%;
color: #fff;
}
.service-panel .panel-title {
position: static;
font-size: clamp(2.4rem, 4.2vw, 4.8rem);
line-height: .94;
letter-spacing: -.03em;
color: inherit;
}
.service-panel.product .panel-title {
color: inherit;
}
.service-panel.product .panel-copy {
color: #080808;
}
.panel-note {
max-width: 36ch;
margin-top: 18px;
font-size: 14px;
line-height: 1.4;
}
.service-panel {
background: var(--panel-bg, #111);
}
.service-panel img {
object-position: 50% 100%;
}
.service-panel:not(.product)::after {
content: "";
position: absolute;
inset: 38% 0 0;
background: linear-gradient(transparent, rgba(0, 0, 0, .78));
}
.service-panel.product::after {
content: "";
position: absolute;
inset: 50% 0 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .82));
}

/* ---------- цифры: единица измерения мельче числа ---------- */
.stat strong small {
margin-left: .14em;
font-size: .3em;
font-weight: 500;
letter-spacing: -.02em;
}
.stat {
grid-template-columns: 44% 1fr;
gap: 0 18px;
}

/* ---------- полоса с видео ---------- */
.showreel img {
object-position: 50% 60%;
}
.showreel::after {
background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .12) 62%);
}
.showreel-meta {
max-width: 360px;
margin-top: 14px;
font-size: 14px;
line-height: 1.4;
}
.play {
flex: none;
padding-left: .12em;
}
.showreel-link,
.quote-link {
margin-top: 18px;
color: #fff;
}
.quote-link {
align-self: flex-start;
margin-top: 28px;
}
/* в шаблоне стили окна написаны под img, а внутри лежит video:
   ролик оставался в потоке, подпись закрывала кадр */
.modal-card video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.modal-copy {
position: absolute;
left: 24px;
right: 24px;
bottom: 20px;
text-align: left;
text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.modal-copy p {
margin-top: 8px;
font-size: clamp(1.2rem, 2.4vw, 2.2rem);
letter-spacing: -.03em;
line-height: 1.05;
}
.modal-card::after {
content: "";
position: absolute;
inset: 60% 0 0;
background: linear-gradient(transparent, rgba(0, 0, 0, .6));
pointer-events: none;
}
.modal-copy,
.modal-close {
z-index: 3;
}

/* ---------- блок с призывом ---------- */
.cta-title {
max-width: 22ch;
margin: 28px 0;
font-size: clamp(1.8rem, 3.3vw, 4.2rem);
font-weight: 600;
line-height: 1;
letter-spacing: -.04em;
}
.cta-direct {
justify-self: end;
}
.cta-direct p {
margin-top: 14px;
font-size: clamp(1.1rem, 1.6vw, 1.6rem);
line-height: 1.3;
letter-spacing: -.02em;
}
.cta-direct a:hover,
.footer-grid a:hover,
.footer-bottom a:hover {
color: var(--signal);
}

/* шаблон: кнопки в колонках-флексах растягивались на всю ширину блока */
.award-feature .button,
.case-copy .button {
align-self: flex-start;
}

/* ---------- плитки ---------- */
/* шаблон: кольца заданы прозрачными тенями, которые ничего не вырезают, —
   вместо тонких концентрических линий получалось одно толстое кольцо */
.rings {
right: -110px;
bottom: -150px;
width: 420px;
border: 0;
box-shadow: none;
background: repeating-radial-gradient(circle at center, transparent 0 35px, currentColor 35px 36px);
}
.tile img {
max-width: none;
}
.tile.red .eyebrow {
position: relative;
z-index: 2;
}

/* ---------- этапы ---------- */
.price-row h3 {
margin-bottom: 10px;
}
.price-row .price {
color: var(--signal);
}

/* ---------- вопросы ---------- */
.faq-aside h3 {
font-size: clamp(1.5rem, 2.2vw, 2.4rem);
font-weight: 600;
letter-spacing: -.035em;
line-height: 1.05;
}
.faq-aside p {
margin: 12px 0 22px;
color: #666;
}
.faq-question {
gap: 20px;
font-size: 17px;
font-weight: 500;
line-height: 1.25;
}
.faq-question i {
flex: none;
}
.faq-item.open .faq-answer {
max-height: 420px;
}

/* ---------- подвал ---------- */
.footer-word {
font-size: clamp(2.6rem, 12.6vw, 15rem);
letter-spacing: -.07em;
line-height: .8;
}
.footer-grid p {
font-size: 14px;
line-height: 1.45;
}
.newsletter {
justify-content: space-between;
align-items: center;
max-width: 360px;
margin-top: 22px;
padding: 12px 0;
font-size: 15px;
text-decoration: none;
}
.newsletter .signal {
font-size: 18px;
}

/* ---------- узкие экраны ---------- */
@media (max-width:900px) {
.nav-inner {
grid-template-columns: 1fr auto auto;
gap: 18px;
}
.nav-toggle {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 99px;
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.mobile-menu {
position: fixed;
inset: 52px 0 0;
z-index: 99;
display: flex;
flex-direction: column;
gap: 4px;
padding: 28px 18px 32px;
overflow-y: auto;
background: #080808;
color: #fff;
}
.mobile-menu[hidden] {
display: none;
}
.mobile-menu > a {
padding: 6px 0;
font-size: clamp(2rem, 9vw, 3.4rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -.04em;
text-transform: uppercase;
text-decoration: none;
}
.mobile-menu-contacts {
display: grid;
gap: 6px;
margin-top: auto;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, .14);
font-size: 16px;
}
.mobile-menu-contacts a {
text-decoration: none;
}
.hero-side-note {
display: none;
}
.hero-grid {
padding-bottom: 92px;
}
.cta-direct {
justify-self: start;
}
.panel-copy {
bottom: 6%;
}
/* на телефоне предмет стоит целиком вверху панели, подпись — под ним */
.service-panel.fit img {
object-fit: contain;
object-position: 50% 0;
}
.service-panel:not(.product)::after {
inset: 45% 0 0;
}
.price-row small {
max-width: none;
}
/* шаблон: кнопка строки растягивалась на всю колонку сетки */
.price-row .button {
justify-self: start;
}
.showreel-content {
gap: 20px;
}
/* шаблон: в одну колонку кнопка кейса вставала вплотную под абзац */
.case-copy .button {
margin-top: 24px;
}
}
@media (max-width:560px) {
.display {
font-size: clamp(2.05rem, 10.4vw, 2.9rem);
}
.hero-headline {
font-size: clamp(2.2rem, 11.4vw, 3.15rem);
}
/* белый корпус коптера уходит вправо из-под адреса, кнопки и списка */
.hero-media img {
object-position: 37% 42%;
}
.project-title h2,
.clients-content h2 {
font-size: clamp(2rem, 10vw, 2.6rem);
}
.clients-content h2 {
padding-inline: 18px;
}
.section-head {
align-items: flex-start;
}
.section-head .eyebrow:last-child {
text-align: right;
}
.footer-word {
font-size: 12.6vw;
}
/* шаблон: плитки по 280px лежали в строках сетки по 220px и наезжали друг на друга */
.bento {
grid-auto-rows: auto;
}
/* кольца шириной 420px закрывали всю узкую плитку и перечёркивали её текст */
.rings {
bottom: -160px;
width: 300px;
}
.award-row {
grid-template-columns: 1fr;
gap: 4px;
padding: 16px 20px;
}
.award-row small {
text-align: left;
white-space: normal;
}
.price-row {
grid-template-columns: 1fr;
gap: 18px;
}
.price-row .feature-list,
.price-row .button {
grid-column: 1;
justify-self: start;
}
.pack {
width: 90px;
}
.footer-bottom {
flex-direction: column;
gap: 8px;
}
.showreel-content {
flex-direction: column;
align-items: flex-start;
}
.metric strong {
font-size: clamp(2.6rem, 14vw, 3.4rem);
}
}

@media (prefers-reduced-motion:reduce) {
#loader {
display: none;
}
.hero-media img,
.showreel img,
.team-photo img {
transform: none;
}
}