@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Cyrillic.woff2?v=1") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Latin.woff2?v=1") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; } :root { --bg: #0e1118; --surface-1: #141821; --surface-2: #1b202b; --border: #232a38; --border-2: #2d3442; --text: #e9ebf0; --text-2: #c3cad6; --muted: #99a2b1; --muted-2: #6e7889; --brand: #0d8bf2; --blue: #59b8f4; --blue-ink: #7cc7f7; --blue-soft: rgba(89, 184, 244, 0.13); --gold: #dfa952; --green: #55c77b; --danger: #ff8177; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 99px; --glow: 0 0 26px rgba(89, 184, 244, 0.15); --shell: 1440px; --pad-x: max( clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right) ); --pad-y: clamp(48px, 6vw, 88px); --gap: clamp(14px, 2vw, 22px); --header-h: 66px; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } [hidden] { display: none !important; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--blue-ink); text-decoration: none; } a:hover { color: #a5d8fa; } button { font: inherit; color: inherit; } ::selection { background: rgba(89, 184, 244, 0.28); } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(34px, 6.2vw, 74px); line-height: 1.02; letter-spacing: -0.03em; } h2 { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.025em; } h3 { font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.3; letter-spacing: -0.01em; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } .kicker { display: inline-flex; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-ink); } .lead { max-width: 62ch; font-size: clamp(14.5px, 1.4vw, 17px); line-height: 1.6; color: var(--text-2); } .muted { color: var(--muted); font-size: 13.5px; } .section { border-top: 1px solid #1c2230; } .section:first-child { border-top: 0; } .section--light { --surface-1: #ffffff; --surface-2: #e9eff5; --border: #d7e0e8; --border-2: #b9c8d6; --text: #111a26; --text-2: #344255; --muted: #66758a; --muted-2: #7b8797; --blue-ink: #0871bd; --blue-soft: rgba(13, 139, 242, 0.1); background: #f3f6f9; color: var(--text); border-color: #d7e0e8; } .section--light .btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 8px 24px rgba(13, 139, 242, 0.2); } .section--light .btn--primary:hover { background: #0876cf; color: #fff; } main > .section:nth-of-type(even):not(.section--light) { background: linear-gradient(180deg, rgba(18, 29, 44, 0.72), rgba(13, 20, 31, 0.72)); } .section__inner { max-width: var(--shell); margin: 0 auto; padding: var(--pad-y) var(--pad-x); } .section--tight .section__inner { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: clamp(28px, 3.5vw, 48px); } .section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(22px, 3vw, 38px); } .section__head-text { min-width: 0; } .section__head h2 { margin-top: 12px; } .section__head .lead { margin-top: 14px; } .grid { display: grid; gap: var(--gap); } .grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); } .grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .divider { height: 1px; border: 0; margin: 0; background: linear-gradient( 90deg, transparent, var(--border) 40px, var(--border) calc(100% - 40px), transparent ); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); transform: translateY(-200%); transition: transform 0.15s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } @media (scripting: none) { .reveal { opacity: 1; transform: none; } }.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--text); font-size: 15px; font-weight: 500; text-align: center; cursor: pointer; background: transparent; transition: transform 0.12s ease-out, background 0.15s ease, border-color 0.15s ease; } .btn:hover { background: var(--surface-2); color: var(--text); } .btn:active { transform: scale(0.97); } .btn--primary { border-color: var(--blue); color: var(--blue-ink); font-weight: 600; box-shadow: var(--glow); } .btn--primary:hover { background: var(--blue-soft); color: var(--blue-ink); } .btn--lg { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 10px; } .btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; } .btn--block { width: 100%; } .btn .icon { flex: 0 0 auto; } .btn--disabled { flex-wrap: wrap; cursor: not-allowed; opacity: 0.72; border-style: dashed; } .btn--disabled:hover, .btn--disabled:active { transform: none; background: transparent; } .yButton { display: none !important; } .dev-badge, .footer__disabled small { padding: 2px 6px; border-radius: var(--r-pill); background: rgba(89, 184, 244, 0.12); color: var(--blue-ink); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .price-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; } .price-legend { max-width: 230px; white-space: normal; color: var(--muted); font-size: 10.5px; font-weight: 400; line-height: 1.35; } .footer__disabled { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); } .header { position: sticky; top: 0; z-index: 40; background: rgba(14, 17, 24, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #222836; } .header__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); max-width: var(--shell); margin: 0 auto; padding: 12px clamp(16px, 4vw, 56px); } .brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px; color: var(--text); } .brand:hover { color: var(--text); } .brand__lockup { display: block; width: 124px; height: auto; } .nav { display: flex; flex: 1 1 auto; min-width: 0; gap: clamp(10px, 1.6vw, 22px); font-size: 14px; white-space: nowrap; overflow: visible; scrollbar-width: none; } .nav__item { position: relative; } .nav__submenu { position: absolute; z-index: 20; top: calc(100% - 2px); left: -18px; display: grid; min-width: 230px; padding: 8px; border: 1px solid var(--border-2); border-radius: var(--r-md); background: #0c1017; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32); opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease; } .nav__item:hover .nav__submenu, .nav__item:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__submenu-link { padding: 11px 12px; border-radius: var(--r-sm); color: var(--muted); font-size: 13px; } .nav__submenu-link:hover, .nav__submenu-link.is-active { background: var(--surface-2); color: var(--text); } .nav__submenu-link--disabled { color: var(--text-3); cursor: default; opacity: 0.62; } .nav__submenu-link--disabled:hover { background: transparent; color: var(--text-3); } .nav::-webkit-scrollbar { display: none; } .nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); } .nav__link:hover { color: var(--text); } .nav__link.is-active { color: var(--text); font-weight: 500; } .header__cta { flex: 0 0 auto; } .header__socials { display: flex; gap: 7px; flex: 0 0 auto; } .header__social { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--border-2); border-radius: var(--r-sm); color: var(--text-2); } .header__social:hover { border-color: rgba(13, 139, 242, 0.55); color: var(--blue-ink); } .header__phone { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 42px; color: var(--text-2); font-size: 13px; white-space: nowrap; } .header__phone:hover { color: var(--blue-ink); } .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: transparent; cursor: pointer; } .burger span { display: block; width: 18px; height: 1.5px; margin: 0 auto; background: var(--text); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 1100px) and (min-width: 861px) { .nav { gap: 14px; font-size: 13.5px; } } @media (max-width: 1280px) { .header__inner { flex-wrap: wrap; row-gap: 0; } .burger { display: flex; order: 3; } .header__socials { order: 2; margin-left: auto; } .header__phone { order: 2; } .header__cta { order: 2; } .nav { order: 4; flex: 1 0 100%; flex-direction: column; gap: 0; overflow: hidden; max-height: 0; transition: max-height 0.26s var(--ease); } .nav.is-open { max-height: 320px; border-top: 1px solid var(--border); margin-top: 8px; } .nav__link { min-height: 48px; font-size: 15px; border-bottom: 1px solid #1c2230; } .nav__item { display: grid; } .nav__submenu { position: static; min-width: 0; padding: 0 0 4px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .nav__submenu-link { min-height: 42px; padding: 10px 12px; border-left: 1px solid var(--border); } .nav.is-open { max-height: 720px; overflow-y: auto; } } @media (max-width: 700px) { .header__cta { display: none; } .header__phone span { display: none; } } .footer { border-top: 1px solid #1c2230; background: #0c0f15; } .footer__inner { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1fr) minmax(300px, 1.25fr); gap: clamp(20px, 3vw, 40px); max-width: var(--shell); margin: 0 auto; padding: clamp(34px, 4vw, 56px) var(--pad-x) clamp(24px, 3vw, 36px); } .footer__map-link { grid-column: 1 / -1; display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); } .footer__map-link:hover { border-color: rgba(13, 139, 242, 0.55); } .footer__map.photo[data-ratio] { width: 100%; height: 260px; min-height: 220px; aspect-ratio: auto; border: 0; border-radius: 0; } .footer__actions { display: grid; gap: 8px; margin-top: 14px; } .footer__actions .btn { width: 100%; } @media (max-width: 920px) { .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__col--contacts { grid-column: 1 / -1; } } @media (max-width: 560px) { .footer__inner { grid-template-columns: 1fr; } .footer__col--contacts { grid-column: auto; } } .footer__company { color: var(--muted); font-size: 13px; } .footer__title { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); } .footer__list { display: grid; gap: 9px; font-size: 14px; color: var(--text-2); } .footer__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); gap: 8px; } @media (min-width: 921px) { .footer__inner { grid-template-columns: minmax(380px, 1.25fr) minmax(220px, 0.75fr) minmax(300px, 1fr); } .footer__col--sections .footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } } .site-consult { padding-top: 0; } .site-consult__band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(13, 139, 242, 0.38); border-radius: var(--r-lg); background: radial-gradient(circle at 88% 12%, rgba(13, 139, 242, 0.2), transparent 36%), linear-gradient(145deg, #121a27, #0d1119 72%); } .site-consult__band h2 { max-width: 720px; margin-top: 10px; } .site-consult__band .lead { max-width: 760px; margin-top: 12px; } .site-consult__actions { display: grid; gap: 10px; min-width: 220px; } @media (max-width: 760px) { .site-consult__band { grid-template-columns: 1fr; } .site-consult__actions { min-width: 0; } } .footer__list a:hover { color: var(--blue-ink); } .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; padding: 10px clamp(12px, 4vw, 20px) calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 17, 24, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid #222836; } .sticky-cta .btn { width: 100%; } @media (max-width: 700px) { .sticky-cta { display: block; } body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) and (min-width: 481px) and (max-height: 460px) { .header__cta { display: inline-flex; } .sticky-cta { display: none; } body { padding-bottom: 0; } } .card { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); } .card--link { transition: transform 0.15s var(--ease), border-color 0.15s ease, background 0.15s ease; } @media (hover: hover) { .card--link:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-2px); } } .card__title { color: var(--text); font-size: 16.5px; font-weight: 600; } .card__text { font-size: 13.5px; line-height: 1.55; color: var(--muted); } .card__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--border-2); color: var(--blue-ink); font-size: 13px; font-weight: 600; } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); font-size: 12.5px; color: var(--text-2); } .pill--accent { border-color: rgba(89, 184, 244, 0.4); background: var(--blue-soft); color: var(--blue-ink); } .pill-row { display: flex; flex-wrap: wrap; gap: 10px; } .price { color: var(--blue-ink); font-weight: 600; white-space: nowrap; } .price__old { margin-right: 8px; color: var(--muted-2); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--blue); text-decoration-thickness: 2px; } .check-list { display: grid; gap: 11px; } .check-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--text-2); } .check-list .icon { margin-top: 3px; color: var(--green); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-2); } .crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--muted-2); } .crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); } .crumbs a:hover { color: var(--blue-ink); } .photo-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 18px; border: 1px dashed var(--border-2); border-radius: var(--r-md); background: linear-gradient(160deg, var(--surface-1), #10131b); color: var(--muted-2); text-align: center; overflow: hidden; } [data-ratio="16/10"] { aspect-ratio: 16 / 10; } [data-ratio="16/9"] { aspect-ratio: 16 / 9; } [data-ratio="4/5"] { aspect-ratio: 4 / 5; } [data-ratio="3/4"] { aspect-ratio: 3 / 4; } [data-ratio="4/3"] { aspect-ratio: 4 / 3; } [data-ratio="3/2"] { aspect-ratio: 3 / 2; } [data-ratio="1/1"] { aspect-ratio: 1 / 1; } [data-ratio="9/16"] { aspect-ratio: 9 / 16; } .photo { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface-1); } .photo picture, .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-slot__icon { opacity: 0.7; } .photo-slot__caption { max-width: 30ch; font-size: 12.5px; line-height: 1.45; } .accordion { display: grid; } .accordion__item { border-top: 1px solid #1c2230; } .accordion__item:last-child { border-bottom: 1px solid #1c2230; } .accordion__btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 60px; padding: 16px 0; border: 0; background: transparent; text-align: left; font-size: 15.5px; font-weight: 500; cursor: pointer; } .accordion__btn .icon { flex: 0 0 auto; color: var(--muted); transition: transform 0.26s var(--ease); } .accordion__btn[aria-expanded="true"] .icon { transform: rotate(90deg); color: var(--blue-ink); } .accordion__panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.26s var(--ease), opacity 0.26s var(--ease); } .accordion__panel.is-open { grid-template-rows: 1fr; opacity: 1; } .accordion__panel > div { overflow: hidden; } .accordion__panel p { padding-bottom: 18px; max-width: 76ch; font-size: 14.5px; color: var(--muted); } .carousel { position: relative; } .carousel__track { display: flex; gap: clamp(12px, 1.5vw, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; } .carousel__track::-webkit-scrollbar { display: none; } .carousel__slide { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; } .carousel--gallery .carousel__slide { flex: 0 0 clamp(260px, 32vw, 380px); scroll-snap-align: center; } .carousel__bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; } .carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface-1); color: var(--text); cursor: pointer; transition: opacity 0.15s ease, background 0.15s ease; } .carousel__btn:hover { background: var(--surface-2); } .carousel__btn[disabled] { opacity: 0.35; pointer-events: none; } .carousel__dots { display: flex; gap: 6px; margin-left: auto; } .carousel__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--border-2); cursor: pointer; transition: width 0.2s var(--ease), background 0.2s ease; } .carousel__dot.is-active { width: 26px; background: var(--blue); } .carousel__dot::after { content: ""; position: absolute; inset: -19px -6px; } .carousel__dot { position: relative; } .carousel__count { font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; } .compare { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border); touch-action: pan-y; user-select: none; } .compare__layer { position: absolute; inset: 0; } .compare__layer > * { width: 100%; height: 100%; border: 0; border-radius: 0; } .compare__layer--top { clip-path: inset(0 50% 0 0); } .compare__tag { position: absolute; top: 12px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(14, 17, 24, 0.82); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--text); } .compare__tag--before { left: 12px; } .compare__tag--after { right: 12px; } .compare__handle { position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; background: transparent; border: 0; padding: 0; touch-action: none; } .compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blue); box-shadow: 0 0 18px rgba(89, 184, 244, 0.55); } .compare__grip { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--blue); color: var(--blue-ink); box-shadow: var(--glow); }.hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; top: -180px; right: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(89, 184, 244, 0.16), transparent 68%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; gap: clamp(28px, 4vw, 56px); max-width: var(--shell); margin: 0 auto; padding: clamp(40px, 6vw, 88px) var(--pad-x) clamp(36px, 5vw, 72px); } .hero__text { min-width: 0; } .hero__title { margin-top: 14px; max-width: 15ch; } .hero__lead { margin-top: 20px; max-width: 52ch; font-size: clamp(15px, 1.5vw, 19px); } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero__actions .btn { min-height: 54px; padding: 0 24px; font-size: 16px; border-radius: 10px; } .home-service-list { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 26px; color: var(--muted); font-size: 13.5px; } .home-service-list li { position: relative; padding-left: 13px; } .home-service-list li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--blue); } .photo-slot--hero { width: 100%; min-height: clamp(240px, 40vw, 540px); border-radius: 18px; } .service-card { gap: 12px; color: var(--text); } .home-hero .hero__title { max-width: 18ch; font-size: clamp(38px, 4.5vw, 60px); line-height: 1.04; overflow-wrap: anywhere; } @media (max-width: 1080px) and (min-width: 681px) { .hero__inner { grid-template-columns: 1fr; } .hero__media { max-width: 760px; } } .home-hero__address { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--text-2); } .direction-group + .direction-group { margin-top: clamp(32px, 5vw, 64px); } .direction-group__title { margin: 0 0 18px; color: var(--text-2); font-size: clamp(20px, 2.4vw, 28px); } .home-direction { display: flex; flex-direction: column; overflow: hidden; } .home-direction__media { width: calc(100% + clamp(32px, 4vw, 44px)); height: 180px; margin: calc(clamp(16px, 2vw, 22px) * -1) calc(clamp(16px, 2vw, 22px) * -1) 8px; border: 0; border-radius: 0; } .home-direction__media img { width: 100%; height: 100%; object-fit: cover; } .home-direction__link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 22px; color: var(--blue-ink); font-weight: 600; } .inspection-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 4vw, 52px); border: 1px solid rgba(13, 139, 242, 0.38); border-radius: var(--r-lg); background: radial-gradient(circle at 90% 8%, rgba(13, 139, 242, 0.18), transparent 38%), #101620; } .inspection-grid__copy > p:not(.lead) { max-width: 72ch; color: var(--text-2); } .inspection-grid__copy .inspection-grid__intro { margin-top: 18px; font-size: 15px; line-height: 1.55; } .reviews-head { align-items: end; } .reviews-head .btn { flex: 0 0 auto; } .reviews-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .review-card { display: flex; flex-direction: column; min-height: 240px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 14px 34px rgba(31, 51, 72, 0.08); } .review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .review-card__stars { color: #f6b91a; letter-spacing: 0.08em; } .review-card__source { color: var(--muted); font-size: 12px; } .review-card blockquote { flex: 1; margin: 28px 0 24px; color: var(--text); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.45; } .review-card__author { color: var(--text-2); font-size: 14px; font-weight: 600; } @media (max-width: 760px) { .reviews-head { align-items: start; } .reviews-row { grid-template-columns: repeat(3, minmax(82vw, 1fr)); margin-right: calc(var(--pad-x) * -1); padding-right: var(--pad-x); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .reviews-row::-webkit-scrollbar { display: none; } .review-card { min-height: 220px; scroll-snap-align: start; } } .inspection-grid__copy h3 { margin: 28px 0 12px; font-size: 17px; } .inspection-steps { display: grid; gap: 11px; padding: 0; list-style: none; } .inspection-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; color: var(--text-2); } .inspection-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(13, 139, 242, 0.16); color: var(--blue-ink); font-size: 12px; font-weight: 700; } .inspection-grid__note { margin: 20px 0; color: var(--text) !important; font-weight: 600; } .studio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 20px); } .studio-gallery__item { min-height: 240px; } @media (max-width: 820px) { .inspection-grid { grid-template-columns: 1fr; } .inspection-grid__media { overflow: hidden; max-height: 460px; border-radius: var(--r-lg); } .inspection-grid__media .photo, .inspection-grid__media img { width: 100%; height: 100% !important; } .inspection-grid__media .photo { aspect-ratio: auto !important; } .inspection-grid__media img { object-fit: cover; } } @media (max-width: 600px) { .studio-gallery { grid-template-columns: 1fr; } } .service-card .photo-slot { margin-bottom: 4px; } .service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #1c2230; } .service-card__more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: var(--muted); } .detailing-showcase { background: linear-gradient(180deg, transparent, rgba(13, 139, 242, 0.035), transparent); } .detailing-card { min-height: 235px; } .detailing-card .photo { margin: -1px -1px 6px; border-radius: calc(var(--r-md) - 1px); } .detailing-card .service-card__foot { color: var(--muted); } .section__actions { display: flex; flex-wrap: wrap; gap: 10px; } .consult-showcase { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr); overflow: hidden; border: 1px solid rgba(13, 139, 242, 0.45); border-radius: var(--r-lg); background: radial-gradient(circle at 14% 12%, rgba(13, 139, 242, 0.2), transparent 34%), #0d1119; } .consult-showcase__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 5vw, 64px); } .consult-showcase__title { max-width: 760px; margin-top: 12px; } .consult-showcase__text .lead { max-width: 700px; margin-top: 16px; } .consult-showcase__list { margin-top: 24px; } .consult-showcase__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .consult-showcase__media, .consult-showcase__media .photo, .consult-showcase__media img { height: 100%; } .consult-showcase__media img { object-fit: cover; } @media (max-width: 760px) { .consult-showcase { grid-template-columns: 1fr; } .consult-showcase__media { max-height: 420px; } } @media (hover: hover) { .service-card:hover .service-card__more { color: var(--blue-ink); } } .tier-card { position: relative; gap: 8px; overflow: hidden; } .tier-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border: 1px solid rgba(89, 184, 244, 0.35); border-radius: 15px; color: var(--blue-ink); background: rgba(89, 184, 244, 0.08); } .tier-card--pro .tier-card__icon { color: var(--gold); border-color: rgba(223, 169, 82, 0.42); background: rgba(223, 169, 82, 0.09); } .tier-card--vip .tier-card__icon { color: #f3f5fa; border-color: rgba(243, 245, 250, 0.32); background: linear-gradient(145deg, rgba(89, 184, 244, 0.18), rgba(223, 169, 82, 0.1)); } .tier-card--gold .pill--accent { border-color: rgba(223, 169, 82, 0.42); background: rgba(223, 169, 82, 0.12); color: var(--gold); } .tier-card--platinum .pill--accent { border-color: rgba(233, 235, 240, 0.35); background: rgba(233, 235, 240, 0.08); color: var(--text); } .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 32px); padding: clamp(22px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(140deg, var(--surface-1), #10131b 70%); } .cta-band__text { min-width: min(320px, 100%); } .cta-band__text .lead { margin-top: 12px; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; } .notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-height: 46vh; justify-content: center; } .review { gap: 14px; } .review__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); } .review__name { font-size: 13.5px; color: var(--muted); } .home-compare { max-width: 560px; margin: 0 auto; aspect-ratio: 3 / 4; } .home-compare__hint { max-width: 560px; margin: 12px auto 0; text-align: center; }.services-intro__title { margin: 16px 0 12px; max-width: 20ch; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; } .services-intro .lead { margin-bottom: 24px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 980px; } .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border-2); border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: transform 0.12s ease-out, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chip:hover { background: var(--surface-2); color: var(--text); } .chip.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); } .chip:active { transform: scale(0.97); } .chips[hidden], .cat-card[hidden], .calc-sum__picked[hidden] { display: none; } .services-catalog { grid-template-columns: 1fr; margin-top: clamp(22px, 3vw, 32px); } .cat-card { display: flex; flex-direction: column; padding: clamp(18px, 2vw, 26px); border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, #161a24, #12151d); scroll-margin-top: calc(var(--header-h) + 18px); } .section--light .cat-card { border-color: var(--border); background: var(--surface-1); box-shadow: 0 14px 34px rgba(31, 51, 72, 0.08); } .cat-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .cat-card__title { font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; } .cat-card__count { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cat-card__list { display: flex; flex-direction: column; } .svc { position: relative; padding: 16px 0 18px; } .svc:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--border) 40px, var(--border) calc(100% - 40px), transparent ); } .svc__row { display: flex; align-items: baseline; gap: 14px; } .svc--class-prices .svc__row { display: grid; grid-template-columns: 1fr; gap: 9px; } .svc--class-prices .svc__price { align-items: stretch; } .svc__title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; } .svc__copy { flex: 1; min-width: 0; } .svc__title a { color: var(--text); } .svc__title a:hover { color: var(--blue-ink); } .svc__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; } .svc__price .price-legend { max-width: 205px; text-align: right; } .svc__price .price { font-size: 16px; } .svc__price .price__old { margin-right: 0; font-size: 12.5px; color: var(--muted); } .svc__price-list { display: grid; gap: 5px; width: 100%; min-width: 0; margin: 0; padding: 0; list-style: none; } .svc__price-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.35; } .svc__price-list span { color: var(--muted); white-space: normal; } .svc__price-list strong { color: var(--text); font-size: 13px; white-space: nowrap; } .svc__text { margin-top: 5px; padding-right: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); } .svc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; } .catalog-note { margin-top: 22px; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--muted); } @media (max-width: 620px) { .chips { flex-wrap: nowrap; max-width: none; margin-right: calc(var(--pad-x) * -1); padding-right: var(--pad-x); overflow-x: auto; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .svc__row { align-items: flex-start; flex-direction: column; } .svc__price, .svc__price-list { align-items: stretch; width: 100%; min-width: 0; } } .calc { background: linear-gradient(180deg, #111520, var(--bg)); } .calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: start; } .calc__panel { padding: clamp(18px, 2vw, 26px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); } .calc__step { margin: 0; padding: 0; border: 0; min-width: 0; } .calc__step + .calc__step { margin-top: 26px; } .calc__legend { display: block; padding: 0; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .calc-classes { display: flex; flex-wrap: wrap; gap: 9px; } .calc-class { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 52px; padding: 9px 15px; border: 1px solid var(--border-2); border-radius: 10px; color: var(--text-2); cursor: pointer; transition: transform 0.12s ease-out, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .calc-class:active { transform: scale(0.97); } .calc-class__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .calc-class:has(.calc-class__input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); } .calc-class:has(.calc-class__input:checked) .calc-class__hint { color: var(--blue-ink); } .calc-class:has(.calc-class__input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .calc-class__code { font-size: 14px; font-weight: 600; } .calc-class__hint { font-size: 11.5px; color: var(--muted); } .calc-rows { display: flex; flex-direction: column; } .calc-row { position: relative; } .calc-row:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--border) 30px, var(--border) calc(100% - 30px), transparent ); } .calc-row__label { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 11px 2px; border-radius: var(--r-sm); cursor: pointer; transition: background 0.15s ease; } .calc-row__label:hover { background: rgba(89, 184, 244, 0.05); } .calc-row__label:has(.calc-row__input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; } .calc-row__label:has(.calc-row__input:disabled) { opacity: 0.55; cursor: not-allowed; } .calc-row__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .calc-row__box { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--border-2); border-radius: 7px; transition: background 0.15s ease, border-color 0.15s ease; } .calc-row__box::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: translateY(-2px) rotate(-45deg); opacity: 0; transition: opacity 0.15s ease; } .calc-row__label:has(.calc-row__input:checked) .calc-row__box { border-color: var(--green); background: rgba(85, 199, 123, 0.14); } .calc-row__label:has(.calc-row__input:checked) .calc-row__box::after { opacity: 1; } .calc-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .calc-row__title { font-size: 14px; font-weight: 500; } .calc-row__cat { font-size: 12px; color: var(--muted); } .calc-row__price { font-size: 14.5px; font-weight: 600; color: var(--blue-ink); white-space: nowrap; } .calc-sum { position: sticky; top: calc(var(--header-h) + 22px); padding: clamp(18px, 2vw, 26px); border: 1px solid rgba(89, 184, 244, 0.34); border-radius: 14px; background: linear-gradient(180deg, #151b26, #11141c); box-shadow: 0 0 44px rgba(89, 184, 244, 0.08); } .calc-sum__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .calc-sum__amount { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 4px; } .calc-sum__value { font-size: clamp(32px, 4.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--text); } .calc-sum__unit { font-size: 15px; color: var(--muted); } .calc-sum__hint { font-size: 13px; line-height: 1.5; color: var(--muted); } .calc-sum__picked { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); } .calc-picked { display: flex; align-items: center; gap: 12px; font-size: 13.5px; } .calc-picked__title { flex: 1; min-width: 0; color: var(--text-2); } .calc-picked__price { color: var(--muted); white-space: nowrap; } .calc-picked__remove { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .calc-picked__remove:hover { color: var(--danger); border-color: var(--danger); } .calc-sum__cta { margin-top: 18px; } .calc-sum__note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--muted); } .calc-class__input:checked ~ .calc-class__code, .calc-class__input:checked ~ .calc-class__hint { color: var(--blue-ink); } .calc-row__input:checked ~ .calc-row__box { border-color: var(--green); background: rgba(85, 199, 123, 0.14); } .calc-row__input:checked ~ .calc-row__box::after { opacity: 1; } .calc-row__input:disabled ~ .calc-row__text { opacity: 0.55; } @media (max-width: 900px) { .calc__grid { display: flex; flex-direction: column; } .calc-sum { order: -1; top: calc(var(--header-h) + 8px); } } .calc-class__input:focus-visible ~ .calc-class__code, .calc-row__input:focus-visible ~ .calc-row__box { outline: 2px solid var(--blue); outline-offset: 3px; }.crumbs + .svc-top { margin-top: 18px; } .svc-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; gap: clamp(20px, 3vw, 44px); } .svc-main { min-width: 0; } .svc-pills { margin-bottom: 14px; } .svc-title { max-width: 22ch; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.06; } .svc-lead { margin: 14px 0 26px; max-width: 58ch; } .svc-media .carousel__track { border-radius: var(--r-lg); } .svc-slide { position: relative; border-radius: var(--r-lg); overflow: hidden; } .svc-slide .photo-slot { height: 100%; border-radius: var(--r-lg); } .svc-slide__tag { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: var(--r-pill); background: rgba(14, 17, 24, 0.8); font-size: 12px; font-weight: 600; color: var(--text-2); pointer-events: none; } .svc-slide__tag--video { color: var(--blue-ink); } .svc-hint { margin-top: 12px; max-width: 60ch; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .svc-card { position: sticky; top: calc(var(--header-h) + 22px); min-width: 0; padding: clamp(20px, 2.2vw, 28px); border: 1px solid rgba(89, 184, 244, 0.34); border-radius: var(--r-lg); background: linear-gradient(180deg, #151b26, #11141c); box-shadow: 0 0 44px rgba(89, 184, 244, 0.08); } .svc-card__label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .svc-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 10px 0 6px; } .svc-card__amount { font-size: clamp(28px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--blue-ink); } .svc-card__price .price-legend { flex-basis: 100%; max-width: 260px; } .svc-card__old { font-size: 18px; color: var(--muted); text-decoration-color: var(--blue); text-decoration-thickness: 2px; } .svc-card__promo { padding: 4px 9px; border: 1px solid var(--green); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; color: var(--green); } .svc-card__note { font-size: 13px; line-height: 1.5; color: var(--muted); } .svc-card__actions { display: grid; gap: 10px; margin-top: 18px; } .svc-card__actions .btn { width: 100%; } .svc-card__actions .btn--primary { min-height: 52px; font-size: 15.5px; } .svc-card__rule { margin: 20px 0 14px; } .svc-card__audience { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); } .svc-stages { background: linear-gradient(180deg, #111520, var(--bg)); } .svc-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; gap: clamp(20px, 3vw, 44px); } .svc-col { min-width: 0; } .svc-col h2 { margin-bottom: 16px; font-size: clamp(22px, 2.8vw, 32px); } .svc-col .btn { margin-top: 18px; } .svc-others { display: flex; flex-direction: column; } .svc-other { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 2px; color: var(--text); } .svc-other::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( 90deg, transparent, var(--border) 30px, var(--border) calc(100% - 30px), transparent ); } .svc-other:hover { color: var(--blue-ink); } .svc-other__title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; } .svc-other__chevron { flex: 0 0 auto; color: var(--muted); }.works-intro .section__inner { padding-bottom: clamp(22px, 3vw, 34px); } .works-intro h1 { margin-top: 16px; max-width: 20ch; } .works-intro .lead { margin-top: 14px; } .works-slider { border-top: 0; } .works-slider .section__inner { padding-top: 0; } .works-compare { height: clamp(300px, 46vw, 560px); } .works-compare__slot--before { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 20px; } .works-compare__slot--after { justify-content: flex-end; align-items: flex-end; text-align: right; padding: 20px; } .works-compare .compare__tag--before { top: auto; bottom: 12px; } .works-compare .compare__tag--after { color: var(--blue-ink); } .works-hint { margin-top: 12px; } .works-gallery-section { background: linear-gradient(180deg, #111520, var(--bg)); } .works-shot { position: relative; } .works-shot__media { aspect-ratio: 4 / 5; height: 100%; border-radius: 14px; } .works-shot__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill); background: rgba(14, 17, 24, 0.82); font-size: 12px; font-weight: 600; color: var(--text-2); pointer-events: none; } .works-shot__tag--video { color: var(--blue-ink); } .works-gallery .carousel__dot { position: relative; } .works-gallery .carousel__dot::after { content: ""; position: absolute; inset: -19px -3px; } .works-note { margin-top: 14px; max-width: 64ch; }.loyalty-intro .section__inner { padding-top: clamp(34px, 4.5vw, 64px); padding-bottom: clamp(26px, 3.4vw, 40px); } .loyalty-intro .crumbs { margin-bottom: 16px; } .loyalty-intro .kicker { color: var(--gold); } .loyalty-intro h1 { margin: 10px 0 12px; max-width: 22ch; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.06; } .loyalty-tiers { border-top: 0; } .loyalty-tiers .section__inner { padding-top: 0; } .tier { gap: 0; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg); } .tier__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tier__icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: var(--r-pill); color: var(--muted); } .tier--pro { border-color: rgba(223, 169, 82, 0.35); background: linear-gradient(180deg, #1b1a17, #12141b); } .tier--pro .pill, .tier--pro .tier__icon, .tier--pro .tier__value { color: var(--gold); border-color: rgba(223, 169, 82, 0.5); } .tier--vip { border-color: rgba(89, 184, 244, 0.38); background: linear-gradient(155deg, #18202d, #11141c 72%); box-shadow: 0 0 44px rgba(89, 184, 244, 0.1); } .tier--vip .pill, .tier--vip .tier__icon, .tier--vip .tier__value { color: var(--blue-ink); border-color: rgba(89, 184, 244, 0.5); } .tier__value { margin: 18px 0 4px; font-size: clamp(30px, 3.8vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; } .tier__caption { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .tier__meta { margin-top: 12px; font-size: 13.5px; color: var(--text-2); } .tier__text { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.55; color: var(--text-2); } .tier--gold { border-color: rgba(223, 169, 82, 0.35); background: linear-gradient(180deg, #1b1a17, #12141b); } .tier--gold .pill { border-color: rgba(223, 169, 82, 0.55); background: rgba(44, 37, 23, 0.8); color: var(--gold); } .tier--gold .tier__icon { border-color: rgba(223, 169, 82, 0.5); color: var(--gold); } .tier--gold .tier__value { color: var(--gold); } .tier--platinum { border-color: rgba(89, 184, 244, 0.34); background: linear-gradient(180deg, #151b26, #11141c); box-shadow: 0 0 44px rgba(89, 184, 244, 0.08); } .tier--platinum .pill { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-ink); } .tier--platinum .tier__icon { border-color: rgba(89, 184, 244, 0.5); color: var(--blue-ink); } .tier--platinum .tier__value { color: var(--blue-ink); } .tier-note { margin-top: 20px; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--muted); } .loyalty-steps { background: linear-gradient(180deg, #111520, #0e1118); } .loyalty-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .loyalty-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: clamp(22px, 3vw, 42px); } .loyalty-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 34px; width: calc(100% - 34px); height: 1px; background: linear-gradient(90deg, var(--blue), var(--border-2)); } .loyalty-step .card__num { position: relative; z-index: 1; border-radius: 50%; background: #111520; box-shadow: 0 0 0 8px #111520; } .loyalty-step .card__title { margin-top: 14px; } @media (max-width: 720px) { .loyalty-timeline { grid-template-columns: 1fr; gap: 28px; } .loyalty-step { min-height: 86px; padding: 0 0 0 58px; } .loyalty-step .card__num { position: absolute; top: 0; left: 0; } .loyalty-step:not(:last-child)::after { top: 34px; left: 17px; width: 1px; height: calc(100% + 28px); background: linear-gradient(180deg, var(--blue), var(--border-2)); } .loyalty-step .card__title { margin-top: 4px; } } .loyalty-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; gap: clamp(20px, 3vw, 44px); } .loyalty-faq__col { min-width: 0; } .loyalty-faq__title { margin-bottom: 16px; font-size: clamp(22px, 2.8vw, 32px); } .faq__q { font-size: inherit; font-weight: inherit; letter-spacing: normal; } .cta-bot { gap: 0; min-width: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); border-color: rgba(223, 169, 82, 0.35); background: linear-gradient(180deg, #1b1a17, #12141b); } .cta-bot__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(223, 169, 82, 0.5); border-radius: var(--r-md); background: rgba(44, 37, 23, 0.8); color: var(--gold); } .cta-bot__title { margin: 16px 0 8px; font-size: clamp(20px, 2.4vw, 28px); } .cta-bot__text { margin-bottom: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); } .cta-bot .btn { width: 100%; } .cta-bot .btn + .btn { margin-top: 10px; } .btn--gold { min-height: 50px; border-color: var(--gold); color: var(--gold); font-weight: 600; } .btn--gold:hover { background: rgba(223, 169, 82, 0.12); color: var(--gold); }.contacts-intro__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; gap: clamp(20px, 3vw, 44px); margin-top: 16px; } .contacts-intro__text { min-width: 0; } .contacts-brand { margin-top: 14px; color: var(--blue-ink); font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.035em; } .contacts-title { margin: 8px 0 24px; max-width: 20ch; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.06; } .contacts-hours { display: grid; gap: 14px; margin: 0; max-width: 44ch; } .contacts-hours__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .contacts-hours__row:last-child { padding-bottom: 0; border-bottom: 0; } .contacts-hours dt { font-size: 14px; color: var(--muted); } .contacts-hours dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); } .contacts-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .contacts-map { height: clamp(260px, 32vw, 420px); border-radius: var(--r-lg); } .channel-card { gap: 0; padding: clamp(20px, 2.4vw, 30px); } .channel-card .card__icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--bg); color: var(--text-2); } .channel-card .card__title { margin: 16px 0 8px; font-size: 19px; } .channel-card .card__text { flex: 1; font-size: 14px; line-height: 1.55; } .channel-card .btn { width: 100%; min-height: 50px; margin-top: 18px; border-radius: 10px; } .channel-card--accent { border-color: rgba(89, 184, 244, 0.34); box-shadow: 0 0 44px rgba(89, 184, 244, 0.08); } .channel-card--accent .card__icon { border-color: rgba(89, 184, 244, 0.45); background: var(--blue-soft); color: var(--blue-ink); } .faq-accordion { max-width: 900px; } .faq-accordion h3 { font-size: inherit; font-weight: inherit; letter-spacing: normal; } .faq-accordion .accordion__panel > div { visibility: hidden; transition: visibility 0s 0.26s; } .faq-accordion .accordion__panel.is-open > div { visibility: visible; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .faq-accordion .accordion__panel > div { transition: none; } } .contacts-map__box { display: grid; gap: 8px; } .contacts-map__link { display: block; border-radius: var(--r-lg); overflow: hidden; } .contacts-map__credit { font-size: 12px; color: var(--muted-2); }.about-intro .section__inner { padding-bottom: clamp(24px, 3vw, 38px); } .about-title { margin-top: 14px; max-width: 18ch; } .about-lead { margin-top: 16px; max-width: 60ch; } .about-lead + .about-lead { margin-top: 12px; } .about-founder { display: grid; grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .about-founder__photo { display: block; width: 100%; height: 100%; min-height: 470px; border-radius: var(--r-lg); object-fit: cover; } .about-founder__name { margin: 16px 0 22px; color: var(--blue-ink); font-weight: 700; } .about-founder__quote { margin: 0; font-style: italic; } .about-founder__quote p + p { margin-top: 12px; } .about-direction .home-direction__link { margin-top: auto; } @media (max-width: 760px) { .about-founder { grid-template-columns: 1fr; } .about-founder__photo { min-height: 340px; } } .about-gallery { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .about-shot { border-radius: var(--r-lg); } .about-group__list { display: grid; gap: 10px; margin-top: 4px; } .about-group__list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #1c2230; font-size: 14.5px; } .about-group__list li:first-child { border-top: 0; } .about-group__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); } .about-group__list a:hover { color: var(--blue-ink); } .about-group__list .price-stack { align-items: flex-end; text-align: right; }.direction-hero { padding: clamp(34px, 5vw, 70px) 0 clamp(28px, 4vw, 54px); background: radial-gradient(circle at 78% 8%, rgba(13, 139, 242, 0.17), transparent 34%); } .direction-hero__inner { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .direction-hero__title { max-width: 19ch; margin-top: 14px; font-size: clamp(36px, 4.5vw, 64px); } .direction-hero__lead { max-width: 70ch; margin-top: 18px; } .direction-hero__lead p + p, .direction-copy > p + p { margin-top: 12px; } .direction-hero .pill-row { margin-top: 18px; } .direction-hero .pill-row .pill { flex: 1 1 260px; justify-content: center; text-align: center; } .direction-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .direction-hero__media { width: 100%; min-height: 0; } .direction-hero + .section .section__inner { padding-top: clamp(30px, 4vw, 54px); } .direction-card__media { width: auto; margin: calc(clamp(20px, 3vw, 30px) * -1) calc(clamp(20px, 3vw, 30px) * -1) 22px; border-radius: 0; } .direction-polishing { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.75fr); gap: 18px; } .direction-polishing__types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .direction-polishing__ceramic { display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(13, 139, 242, 0.28); border-radius: var(--r-lg); background: #dcecff; } .direction-polishing__ceramic h3 { margin-top: 8px; font-size: clamp(22px, 2.5vw, 31px); } .direction-section-cta { margin-top: 24px; } .direction-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .direction-point { display: flex; gap: 13px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: 600; } .direction-point svg { flex: 0 0 auto; margin-top: 2px; color: var(--blue); } .direction-process .card { border-left: 2px solid rgba(13, 139, 242, 0.7); background: linear-gradient(135deg, #121a27, #0c1119); } .direction-guarantees .card__title { color: var(--blue); font-size: clamp(29px, 3.8vw, 47px); line-height: 1; } .direction-highlight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 34px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(13, 139, 242, 0.38); border-radius: var(--r-lg); background: linear-gradient(145deg, #121a27, #0d1119 72%); } .direction-highlight h2 { font-size: clamp(24px, 3vw, 38px); } .direction-consult { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 52px); border-radius: var(--r-lg); background: radial-gradient(circle at 90% 8%, rgba(13, 139, 242, 0.2), transparent 38%), #101620; } .direction-consult__note { margin: 20px 0; color: var(--text); font-weight: 600; } .direction-consult .check-list { margin: 24px 0; } .direction-consult__actions { display: flex; flex-wrap: wrap; gap: 10px; } .direction-consult__media { min-height: 430px; } .direction-copy { position: relative; max-width: 1160px; padding: clamp(26px, 4vw, 52px); overflow: hidden; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: radial-gradient(circle at 96% 0%, rgba(0, 161, 255, 0.12), transparent 34%), linear-gradient(145deg, var(--surface-1), var(--bg)); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.15); } .direction-copy::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--brand), rgba(0, 161, 255, 0.08)); content: ""; } .direction-copy .section__head { margin-bottom: clamp(18px, 2.5vw, 30px); } .direction-copy > p, .direction-copy > .lead { max-width: 76ch; } .direction-copy .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(22px, 3vw, 34px) 0; padding: 0; } .direction-copy .check-list li { min-height: 62px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 72%, transparent); color: var(--text); font-size: 15px; font-weight: 600; } .direction-copy .check-list .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(0, 161, 255, 0.14); color: var(--blue); } .direction-copy .btn { margin-top: 24px; } .direction-copy-list { display: grid; gap: 10px; margin: 18px 0; padding-left: 22px; color: var(--text-2); } .direction-cards .card { min-height: 100%; border-color: rgba(0, 161, 255, 0.2); background: linear-gradient(180deg, rgba(0, 161, 255, 0.05), transparent 42%), var(--surface-1); } .direction-cards .card__num { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; margin-bottom: 18px; border: 1px solid rgba(0, 161, 255, 0.5); border-radius: 50%; color: var(--blue); background: rgba(0, 161, 255, 0.08); } .direction-cards .card__title { margin-top: 0; } .direction-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 24px); } .direction-film-card { position: relative; overflow: hidden; padding: clamp(24px, 3.5vw, 38px); border: 1px solid var(--border); border-radius: var(--r-lg); background: linear-gradient(145deg, var(--surface-1), var(--surface-2)); } .direction-film-card--premium { border-color: rgba(0, 161, 255, 0.48); background: radial-gradient(circle at 100% 0%, rgba(0, 161, 255, 0.18), transparent 42%), linear-gradient(145deg, var(--surface-1), var(--surface-2)); } .direction-film-card__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; color: var(--text-2); font-size: 14px; font-weight: 600; } .direction-film-card h3 { margin: 24px 0 10px; font-size: clamp(25px, 3vw, 36px); line-height: 1.08; } .direction-film-card > p { margin-bottom: 24px; color: var(--text-2); } .direction-film-card .check-list { gap: 14px; margin: 0; padding: 0; } .direction-film-card .check-list li { align-items: flex-start; } .direction-film-card .check-list .icon { flex: 0 0 auto; margin-top: 3px; color: var(--blue); } .direction-films__assurances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: clamp(16px, 2.5vw, 24px); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--border); } .direction-films__assurances span { padding: 18px 20px; background: var(--surface-1); color: var(--text-2); } .direction-films__assurances strong { display: block; margin-bottom: 3px; color: var(--text); } .direction-films__note { display: grid; grid-template-columns: minmax(190px, 0.32fr) 1fr; gap: 16px 28px; margin-top: clamp(16px, 2.5vw, 24px); padding: 20px 24px; border: 1px solid rgba(0, 161, 255, 0.28); border-radius: var(--r-md); background: rgba(0, 161, 255, 0.07); } .direction-films__note strong { color: var(--blue); } .direction-films__note span { color: var(--text-2); } .direction-faq .accordion__item { border-color: rgba(0, 161, 255, 0.18); background: var(--surface-1); } .direction-calculator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr); gap: clamp(28px, 5vw, 64px); align-items: center; } .direction-calculator .btn { margin-top: 24px; } .direction-related { display: flex; flex-direction: column; } .direction-related .home-direction__link { margin-top: auto; } .direction-feature .direction-copy { padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(13, 139, 242, 0.38); border-radius: var(--r-lg); background: linear-gradient(145deg, #121a27, #0d1119 72%); } @media (max-width: 850px) { .direction-hero__inner, .direction-consult, .direction-calculator { grid-template-columns: 1fr; } .direction-hero__media, .direction-consult__media { max-height: 500px; } .direction-hero__media { min-height: 0; } .direction-consult__media { min-height: 320px; } .direction-highlight { grid-template-columns: auto 1fr; } .direction-highlight .btn { grid-column: 1 / -1; width: 100%; } .direction-polishing { grid-template-columns: 1fr; } .direction-films { grid-template-columns: 1fr; } .direction-films__assurances { grid-template-columns: 1fr; } } @media (max-width: 520px) { .direction-hero__actions .btn { width: 100%; } .direction-polishing__types, .direction-points, .direction-copy .check-list { grid-template-columns: 1fr; } .direction-copy { padding: 24px 20px; } .direction-films__note { grid-template-columns: 1fr; } .direction-film-card__head { align-items: flex-start; flex-direction: column; } }.promo-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .promo-hero h1 { max-width: 15ch; margin: 14px 0 20px; } .promo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); } .promo-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-1); } .promo-card__title { font-size: clamp(21px, 2.6vw, 30px); } .promo-card__text { margin-top: 10px; color: var(--text-2); } .promo-list--secondary { margin-top: var(--gap); } .promo-list--featured > .promo-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .promo-card--detailed { align-content: start; } .promo-card__badge { display: inline-flex; margin-bottom: 12px; padding: 7px 11px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .promo-card__list-title { margin-top: 24px; font-size: 17px; } .promo-card__list { margin: 14px 0 24px; } .promo-loyalty-note { max-width: 72ch; margin: 26px auto 0; color: var(--text-2); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; text-align: center; } .promo-cta { max-width: 880px; } .promo-cta h2 { margin: 12px 0; } .promo-cta .btn { margin-top: 24px; } @media (max-width: 760px) { .promo-hero, .promo-list { grid-template-columns: 1fr; } .promo-list--featured > .promo-card:last-child:nth-child(odd) { grid-column: auto; } }:root { --bg: #000000; --surface-1: #080b10; --surface-2: #0e141b; --border: #1b2733; --border-2: #2b4154; --text: #ffffff; --text-2: #d7dde4; --muted: #a9b3bd; --muted-2: #778491; --brand: #00a1ff; --blue: #00a1ff; --blue-ink: #00a1ff; --blue-soft: rgba(0, 161, 255, 0.14); --gold: #00a1ff; --green: #00a1ff; --glow: 0 0 26px rgba(0, 161, 255, 0.16); --pad-y: clamp(38px, 4.5vw, 64px); --type-h1: clamp(38px, 4.6vw, 56px); --type-h2: clamp(30px, 3.4vw, 40px); --type-copy: 15px; } body, .header, .footer, main > .section, main > .section:nth-of-type(even):not(.section--light) { background: #000000; } .header { background: rgba(0, 0, 0, 0.9); border-color: var(--border); } .section, .footer { border-color: var(--border); } h1 { font-size: var(--type-h1) !important; line-height: 1.06; } h2 { font-size: var(--type-h2) !important; line-height: 1.12; } .section--light { --surface-1: #080b10; --surface-2: #0e141b; --border: #1b2733; --border-2: #2b4154; --text: #ffffff; --text-2: #d7dde4; --muted: #a9b3bd; --muted-2: #778491; --blue-ink: #00a1ff; --blue-soft: rgba(0, 161, 255, 0.14); color: var(--text); background: #000000; border-color: var(--border); } .section--light .btn--primary, .btn--primary { color: #ffffff; background: var(--brand); border-color: var(--brand); box-shadow: 0 8px 24px rgba(0, 161, 255, 0.2); } .section--light .btn--primary:hover, .btn--primary:hover { color: #ffffff; background: #008bdc; } .section__inner, .hero__inner, .direction-hero__inner { padding-top: var(--pad-y); padding-bottom: var(--pad-y); } .direction-hero { padding: 0; } .section--tight .section__inner, .direction-hero + .section .section__inner { padding-top: clamp(30px, 3.5vw, 46px); padding-bottom: clamp(30px, 3.5vw, 46px); } .section__head { margin-bottom: clamp(22px, 2.5vw, 32px); } .direction-group + .direction-group { margin-top: clamp(28px, 3.5vw, 46px); } .card, .cat-card { height: 100%; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); box-shadow: none; } .grid > .card { align-self: stretch; } .card__title, .direction-guarantees .card__title { color: var(--text); font-size: var(--type-copy) !important; font-weight: 700; line-height: 1.5; } .card__text { color: var(--text-2); font-size: var(--type-copy); font-weight: 400; line-height: 1.5; } .direction-polishing__types { align-items: stretch; } .direction-polishing__ceramic, .direction-point, .direction-process .card { border-color: var(--border); background: var(--surface-1); } .direction-polishing__ceramic h3 { color: var(--text); font-size: var(--type-copy); font-weight: 700; line-height: 1.5; } .direction-polishing__ceramic p, .direction-point { color: var(--text-2); font-size: var(--type-copy); font-weight: 400; line-height: 1.5; } .direction-card__media { margin: calc(clamp(18px, 2vw, 24px) * -1) calc(clamp(18px, 2vw, 24px) * -1) 10px; } .home-direction__media { width: calc(100% + clamp(36px, 4vw, 48px)); margin: calc(clamp(18px, 2vw, 24px) * -1) calc(clamp(18px, 2vw, 24px) * -1) 8px; } .section--light .cat-card { background: var(--surface-1); box-shadow: none; } .review-card__stars { color: var(--blue); } .footer__title { color: var(--text); font-size: 14px !important; font-weight: 700; line-height: 1.55; letter-spacing: 0; text-transform: none; } .direction-faq { max-width: 980px; } .direction-faq h3 { font-size: inherit; font-weight: inherit; letter-spacing: normal; } .direction-faq .accordion__panel > div { visibility: hidden; transition: visibility 0s 0.26s; } .direction-faq .accordion__panel.is-open > div { visibility: visible; transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .direction-faq .accordion__panel > div { transition: none; } } @media (max-width: 700px) { :root { --pad-y: clamp(30px, 8vw, 42px); --type-h1: clamp(34px, 10vw, 44px); --type-h2: clamp(27px, 8vw, 34px); } .section__head { margin-bottom: 22px; } .direction-group + .direction-group { margin-top: 30px; } .footer__inner { padding-top: 32px; } }.legal-page { max-width: 920px; } .legal-page .crumbs { margin-bottom: clamp(24px, 4vw, 46px); } .legal-page__title { max-width: 21ch; margin-bottom: clamp(30px, 5vw, 56px); } .legal-page__heading { margin-top: clamp(30px, 4vw, 48px); font-size: clamp(21px, 2.5vw, 28px) !important; } .legal-page__text { margin-top: 12px; color: var(--text-2); font-size: 15px; line-height: 1.7; } @media (max-width: 700px) { .legal-page__text { font-size: 14px; } }.care-hero { max-width: 1060px; } .care-hero h1 { margin: 20px 0; max-width: 29ch; text-wrap: balance; } .care-hero__lead { max-width: 85ch; color: var(--text-2); } .care-hero__lead p + p { margin-top: 12px; } .care-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; } .care-facts li { display: grid; gap: 6px; padding: 20px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 16px; } .care-facts strong { color: var(--blue); } .care-facts span { color: var(--muted); } .care-layout { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .care-toc { position: sticky; top: calc(var(--header-h) + 24px); padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-1); } .care-toc ol { padding: 0; margin: 16px 0; list-style: none; display: grid; gap: 12px; } .care-toc a { color: var(--muted); text-decoration: none; } .care-toc a:hover { color: var(--blue); } .care-toc .care-back { display: flex; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--blue); } .care-chapters { min-width: 0; } .care-chapter { padding: 0 0 32px; scroll-margin-top: calc(var(--header-h) + 24px); } .care-chapter + .care-chapter { border-top: 1px solid var(--border); padding-top: 32px; } .care-chapter__number { display: block; color: var(--blue); font-weight: 700; letter-spacing: .12em; margin-bottom: 12px; } .care-chapter h2 { margin: 0 0 22px; text-wrap: balance; } .care-chapter p { color: var(--text-2); margin: 14px 0; line-height: 1.7; } .care-list { display: grid; gap: 12px; padding: 18px; margin: 18px 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px; list-style: none; } .care-list li { display: flex; gap: 12px; align-items: baseline; color: var(--text-2); } .care-list svg { flex: 0 0 17px; color: var(--blue); } .care-list--avoid svg { display: none; } .care-list--avoid li::before { content: '×'; color: var(--muted); font-weight: 700; width: 17px; flex-shrink: 0; } .care-chapter .care-note { padding: 20px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--blue-soft); color: var(--text); } .care-contact { padding: clamp(22px, 4vw, 40px); border: 1px solid var(--border-2); border-radius: 22px; background: linear-gradient(120deg, var(--surface-2), #061521); } .care-contact p { margin-top: 16px; color: var(--muted); } .care-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .care-faq-link { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; margin-top: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .direction-videos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .direction-video { margin: 0; min-width: 0; padding: 12px; background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 20px; } .direction-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; } .direction-video figcaption { padding: 14px 6px 4px; } .direction-video a { display: inline-flex; align-items: center; gap: 8px; } .calculator-preview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px; margin: 24px 0; border: 1px solid var(--border-2); border-radius: 18px; background: linear-gradient(120deg, var(--surface-2), #061521); } .calculator-preview__copy { flex: 1 1 280px; } .calculator-preview__copy p { margin-top: 8px; color: var(--muted); max-width: 70ch; } .svc__price .calculator-link { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .wrap-packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .wrap-package { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--border-2); border-radius: 18px; background: var(--surface-1); } .wrap-package h3 { margin-bottom: 12px; } .wrap-package p { color: var(--muted); margin-bottom: 20px; } .wrap-package .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 760px) { .care-layout { grid-template-columns: minmax(0, 1fr); } .care-toc { position: static; } .care-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; } .care-facts li { padding: 14px 18px; } .care-contact__actions { flex-direction: column; } .direction-videos__grid, .wrap-packages { grid-template-columns: minmax(0, 1fr); } .calculator-preview { padding: 18px; } .svc__price .calculator-link { justify-content: flex-start; } }.page-lead-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border-2); border-radius: var(--r-lg); background: #0e141d; color: var(--text); box-shadow: 0 28px 100px rgba(0, 0, 0, 0.7); } .page-lead-dialog::backdrop { background: rgba(0, 0, 0, 0.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .page-lead-dialog__card { position: relative; padding: clamp(24px, 5vw, 40px); background: radial-gradient(circle at 0 0, rgba(89, 184, 244, 0.12), transparent 42%), #0e141d; } .page-lead-dialog__card h2 { margin: 4px 0 0; max-width: 420px; padding-right: 32px; font-size: clamp(26px, 5vw, 36px); } .page-lead-dialog__eyebrow { margin: 0; color: var(--blue-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .page-lead-dialog__intro { max-width: 410px; margin: 12px 0 0; color: var(--text-2); } .page-lead-dialog__close { position: absolute; z-index: 1; top: 16px; right: 16px; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--border-2); border-radius: 50%; background: transparent; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; } .page-lead-dialog__close:hover { color: var(--text); border-color: var(--blue); } .page-lead-dialog form { display: grid; gap: 16px; margin-top: 26px; } .page-lead-dialog label { display: grid; gap: 8px; font-size: 14px; font-weight: 600; } .page-lead-dialog input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: #080b10; color: var(--text); font: inherit; } .page-lead-dialog input:focus { outline: 2px solid var(--blue); outline-offset: 2px; } .page-lead-dialog .honeypot { position: absolute; left: -9999px; } .page-lead-dialog__consent, .page-lead-dialog__message { color: var(--muted); font-size: 12px; line-height: 1.5; } .page-lead-dialog__message { min-height: 18px; color: var(--blue-ink); } .page-lead-dialog .btn { width: 100%; } .thank-you-body { min-height: 100dvh; background: radial-gradient(circle at 50% 10%, rgba(13, 139, 242, 0.19), transparent 38%), #07090d; } .thank-you { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100dvh; padding: clamp(82px, 10vh, 104px) var(--pad-x) clamp(28px, 5vh, 48px); text-align: center; } .thank-you__brand { position: absolute; top: max(24px, env(safe-area-inset-top)); left: var(--pad-x); } .thank-you__brand img { width: clamp(130px, 18vw, 170px); height: auto; } .thank-you__card { position: relative; width: min(720px, 100%); padding: clamp(34px, 5vw, 54px); overflow: hidden; border: 1px solid var(--border-2); border-radius: clamp(20px, 3vw, 32px); background: linear-gradient(145deg, rgba(89, 184, 244, 0.09), transparent 48%), rgba(14, 17, 24, 0.96); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45), var(--glow); } .thank-you__close { position: absolute; top: 18px; right: 18px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--border-2); border-radius: 50%; color: var(--muted); font-size: 28px; line-height: 1; } .thank-you__close:hover { border-color: var(--blue); color: var(--text); } .thank-you__icon { display: grid; width: 58px; height: 58px; margin: 0 auto 16px; place-items: center; border: 1px solid rgba(89, 184, 244, 0.5); border-radius: 50%; background: var(--blue-soft); color: var(--blue); box-shadow: var(--glow); } .thank-you__eyebrow { margin: 0 0 12px; color: var(--blue-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; } .thank-you h1 { max-width: 650px; margin: 0 auto; color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 650; line-height: 1.12; } .thank-you__text { max-width: 560px; margin: 16px auto 0; color: var(--text-2); font-size: clamp(15px, 2vw, 18px); } .thank-you__actions { display: flex; justify-content: center; gap: 12px; margin-top: 26px; } @media (max-width: 560px) { .thank-you__actions { flex-direction: column; } .thank-you__actions .btn { width: 100%; } }