/* ==================================================
   SECTION 01: HEADER
================================================== */
:root {
  --bg: #080c10;
  --bg-soft: #0b1117;
  --card: rgba(11, 17, 23, .78);
  --text: #f2f4f4;
  --muted: #929ba5;
  --line: rgba(170, 190, 202, .19);
  --green: #b9f45d;
  --green-bright: #d0ff79;
  --purple: #7770ff;
  --container: 1350px;
  --header-height: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Manrope", "Inter", Arial, sans-serif; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
body.menu-open, body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 10px 16px; color: #071006; background: var(--green); transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: var(--header-height); transition: transform .4s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(7, 11, 15, .75); border-color: rgba(180, 200, 210, .12); box-shadow: 0 10px 35px rgba(0, 0, 0, .2); backdrop-filter: blur(18px); }
.header.is-hidden { transform: translateY(-105%); }
.header__inner { height: 100%; display: grid; grid-template-columns: 300px 1fr auto; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; width: max-content; line-height: 1; }
.brand__logo { display: block; width: 100%; height: auto; }
.brand--header { width: 300px; height: var(--header-height); overflow: hidden; }
.brand--footer { width: 250px; max-width: 100%; }
.header__nav { display: flex; justify-content: center; gap: clamp(20px, 2.2vw, 42px); color: #c5cbd0; font-size: 14px; }
.header__nav a { position: relative; transition: color .25s; }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.header__nav a:hover { color: #fff; }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.language-switcher { display: flex; align-items: center; gap: 5px; color: #68737d; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.language-switcher a { padding: 7px 1px; transition: color .2s; }
.language-switcher a:hover, .language-switcher a.is-active { color: var(--green); }

.language-switch{
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.header-contact { position: relative; }
.header-contact__toggle { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #b9c2c8; background: rgba(11, 17, 23, .55); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.header-contact__toggle:hover, .header-contact__toggle[aria-expanded="true"] { color: var(--green); border-color: rgba(185, 244, 93, .5); background: rgba(185, 244, 93, .05); }
.header-contact__toggle svg { width: 17px; height: 17px; }
.header-contact__panel { position: absolute; top: calc(100% + 16px); right: -58px; width: 275px; padding: 19px; border: 1px solid rgba(153, 176, 191, .28); border-radius: 12px; background: radial-gradient(circle at 100% 0, rgba(111, 92, 255, .13), transparent 42%), rgba(8, 14, 19, .92); box-shadow: 0 22px 55px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-7px); transition: opacity .2s, transform .2s; backdrop-filter: blur(18px); }
.header-contact__panel[hidden] { display: none; }
.header-contact__panel.is-open { opacity: 1; transform: none; }
.header-contact__panel > p { margin: 0 0 6px; color: #77838d; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.header-contact__phone { display: block; padding: 4px 0 13px; border-bottom: 1px solid rgba(166, 184, 197, .12); font-size: 14px; font-weight: 600; }
.header-contact__panel > div { display: flex; gap: 8px; margin-top: 13px; }
.header-contact__panel > div a { display: inline-flex; min-height: 38px; padding: 0 11px; align-items: center; gap: 6px; border: 1px solid #313e48; border-radius: 20px; color: #aeb7bd; font-size: 12px; transition: color .2s, border-color .2s; }
.header-contact__panel > div a:hover { color: var(--green); border-color: rgba(185, 244, 93, .45); }
.header-contact__panel svg { width: 14px; height: 14px; }
.menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(15, 20, 26, .7); cursor: pointer; }
.menu-toggle span { position: absolute; width: 19px; height: 1px; margin-left: -9px; background: white; transition: transform .3s, margin .3s; }
.menu-toggle span:first-child { margin-top: -4px; }
.menu-toggle span:last-child { margin-top: 4px; }
.menu-toggle.is-active span:first-child { margin-top: 0; transform: rotate(45deg); }
.menu-toggle.is-active span:last-child { margin-top: 0; transform: rotate(-45deg); }
.mobile-menu { position: fixed; z-index: 90; inset: 0; display: none; flex-direction: column; justify-content: center; padding: 110px max(32px, 8vw) 42px; background: rgba(5, 9, 13, .94); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__glow { position: absolute; width: 60vw; height: 60vw; top: 4%; right: -20%; border-radius: 50%; background: rgba(98, 82, 255, .12); filter: blur(70px); }
.mobile-menu__nav { position: relative; display: flex; flex-direction: column; }
.mobile-menu__nav a { padding: 11px 0; font-size: clamp(30px, 7vw, 54px); letter-spacing: -.04em; transform: translateY(20px); opacity: 0; transition: opacity .4s, transform .4s, color .2s; }
.mobile-menu__nav a span { display: inline-block; width: 40px; color: var(--green); font-size: 12px; letter-spacing: .08em; vertical-align: top; margin-top: 10px; }
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; transition-delay: calc(var(--index) * 60ms + 100ms); }
.mobile-menu__footer { position: relative; display: flex; justify-content: space-between; margin-top: auto; color: var(--muted); font-size: 14px; }
.mobile-menu__meta { position: relative; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(168, 187, 199, .13); }
.mobile-languages { display: flex; gap: 8px; margin-bottom: 18px; }
.mobile-languages a { display: grid; min-width: 48px; min-height: 44px; place-items: center; border: 1px solid #34414b; border-radius: 24px; color: #9ca6ad; font-size: 13px; font-weight: 600; }
.mobile-languages a.is-active { color: #0b1207; border-color: var(--green); background: var(--green); }
.mobile-contacts > p { margin: 0 0 4px; color: #77838d; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.mobile-contacts__phone { display: inline-flex; min-height: 42px; align-items: center; font-size: 15px; font-weight: 600; }
.mobile-contacts > div { display: flex; gap: 10px; }
.mobile-contacts > div a { display: inline-flex; min-height: 44px; padding-right: 10px; align-items: center; gap: 7px; color: #aeb7bd; font-size: 13px; }
.mobile-contacts svg { width: 18px; height: 18px; color: var(--green); }

/* ==================================================
   SECTION 02: HERO
================================================== */
.hero { position: relative; min-height: min(830px, 100vh); padding: 160px 0 42px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 42%, rgba(42, 44, 124, .3), transparent 38%), radial-gradient(circle at 39% 91%, rgba(104, 174, 54, .11), transparent 30%), linear-gradient(120deg, #090e12, #070b10 62%, #090e18); }
.hero::after { content: ""; position: absolute; right: -11%; bottom: -44%; width: 72%; height: 90%; border: 1px solid rgba(119, 112, 255, .28); border-radius: 50%; filter: blur(1px); transform: rotate(-15deg); box-shadow: 0 0 75px rgba(119, 112, 255, .13), inset 0 0 80px rgba(185, 244, 93, .05); }
.hero__grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, transparent 3%, black 40%, transparent 95%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; min-height: 540px; }
.eyebrow { margin: 0 0 16px; color: #8e99a3; font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.hero__title { margin: 0; font-size: clamp(62px, 6.2vw, 108px); font-weight: 600; letter-spacing: -.065em; line-height: .91; }
.hero__title span { display: block; }
.hero__title .accent { color: var(--green); text-shadow: 0 0 32px rgba(185, 244, 93, .13); }
.hero__description { margin: 30px 0 0; color: #b7bec5; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.6; }
.hero__actions, .cta__actions { display: flex; gap: 14px; margin-top: 32px; }
.button { --mx: 0px; --my: 0px; position: relative; display: inline-flex; min-height: 56px; padding: 0 27px; align-items: center; justify-content: center; gap: 13px; overflow: hidden; border: 1px solid var(--green); border-radius: 100px; color: #0b1207; background: linear-gradient(110deg, var(--green-bright), #a9e950); box-shadow: 0 10px 35px rgba(161, 226, 76, .12), inset 0 1px rgba(255,255,255,.55); font-size: 14px; font-weight: 700; transform: translate(var(--mx), var(--my)); transition: transform .25s ease, box-shadow .3s, background .3s; }
.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.4), transparent 75%); transform: translateX(-120%); transition: transform .55s; }
.button:hover { box-shadow: 0 13px 45px rgba(185, 244, 93, .28), inset 0 1px rgba(255,255,255,.65); }
.button:hover::before { transform: translateX(120%); }
.button svg { width: 18px; height: 18px; transition: transform .3s; }
.button:hover svg { transform: translateX(4px); }
.button--small { min-height: 42px; justify-self: end; padding: 0 22px; font-size: 14px; background: transparent; color: var(--green); box-shadow: none; }
.button--ghost { border-color: #697582; color: #d4d9dc; background: rgba(9, 14, 20, .45); box-shadow: none; font-weight: 500; }
.button--ghost:hover { border-color: #aab4bd; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.button--ghost .play { width: 17px; color: white; fill: transparent; }
.hero-animate { opacity: 0; transform: translateY(25px); animation: hero-in .75s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--delay); }
@keyframes hero-in { to { opacity: 1; transform: none; } }
.hero-visual { --visual-scale: 1; position: relative; width: min(730px, 51vw); height: 535px; justify-self: end; opacity: 0; isolation: isolate; transform: translateY(28px) scale(var(--visual-scale)); animation: visual-in 1s .25s cubic-bezier(.2,.7,.2,1) forwards; perspective: 1300px; }
@keyframes visual-in { to { opacity: 1; transform: scale(var(--visual-scale)); } }
.hero-visual::before, .hero-visual::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(65px); }
.hero-visual::before { top: 5%; right: -3%; width: 76%; height: 64%; background: rgba(75, 69, 210, .2); }
.hero-visual::after { bottom: -2%; left: 19%; width: 51%; height: 34%; background: rgba(159, 231, 75, .13); filter: blur(55px); }
.hero-visual__orbit { position: absolute; z-index: 0; inset: 9% -2% 1% 8%; border: 1px solid rgba(126, 119, 255, .2); border-radius: 50%; transform: rotate(-14deg); box-shadow: inset 0 -25px 55px rgba(136, 255, 93, .045), 0 0 50px rgba(105, 91, 255, .06); }
.screen, .visual-plane, .performance-card, .hero-visual__note { transition: transform .35s ease-out; will-change: transform; }
.visual-plane { position: absolute; overflow: hidden; border: 1px solid rgba(138, 148, 189, .2); border-radius: 10px; background: linear-gradient(145deg, rgba(29, 38, 53, .36), rgba(9, 15, 22, .22)); box-shadow: 0 28px 60px rgba(0, 0, 0, .25); backdrop-filter: blur(4px); }
.visual-plane span { position: absolute; left: 12%; width: 70%; height: 1px; background: linear-gradient(90deg, rgba(171, 183, 217, .18), transparent); }
.visual-plane span:nth-child(1) { top: 18%; }
.visual-plane span:nth-child(2) { top: 28%; width: 49%; }
.visual-plane span:nth-child(3) { top: 78%; width: 80%; }
.visual-plane--far { z-index: 1; top: 24%; left: 5%; width: 310px; height: 330px; transform: rotateY(10deg) rotateZ(-11deg); }
.visual-plane--middle { z-index: 3; top: 30%; left: 21%; width: 300px; height: 315px; border-color: rgba(171, 192, 213, .25); background: linear-gradient(145deg, rgba(43, 52, 63, .36), rgba(8, 16, 21, .28)); transform: rotateY(7deg) rotateZ(-5deg); }
.screen { position: absolute; overflow: hidden; border: 1px solid rgba(139, 147, 255, .4); border-radius: 10px; background: rgba(7, 13, 23, .93); box-shadow: 0 35px 75px rgba(0,0,0,.52), 0 0 42px rgba(80, 66, 206, .15); }
.screen__bar { display: flex; height: 38px; align-items: center; gap: 8px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.08); color: #9ca5b0; font-size: 12px; }
.screen--back .screen__bar span { width: 5px; height: 5px; border-radius: 50%; background: #606975; }
.screen--back { z-index: 2; width: 485px; height: 390px; right: 1%; top: 2%; transform: rotateY(-8deg) rotateX(2deg) rotateZ(5deg); transform-origin: center right; }
.screen--back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(83, 72, 230, .12), transparent 50%); pointer-events: none; }
.code-lines { display: flex; flex-direction: column; padding: 29px 35px; color: #a8b5ff; font: 13px/1.65 monospace; }
.code-lines i { font-style: normal; }
.code-lines i:nth-child(3n) { color: #d7ddfa; }
.screen--front { z-index: 4; width: 285px; height: 370px; left: 24%; top: 18%; transform: rotateY(7deg) rotateX(-1deg) rotateZ(-6deg); transform-origin: center bottom; border-color: rgba(229,235,255,.42); background: #e9e9e5; color: #101215; box-shadow: 0 38px 72px rgba(0, 0, 0, .48), 0 0 24px rgba(218, 226, 255, .08); }
.screen--front .screen__bar { justify-content: flex-end; border-color: rgba(0,0,0,.09); color: #62666a; }
.screen--front .screen__bar > img { width: 78px; height: auto; margin-right: auto; }
.mock-site { padding: 25px 24px; }
.mock-site > p { margin: 0; font-size: 27px; font-weight: 600; line-height: .92; letter-spacing: -.05em; }
.mock-site__button { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 20px; color: white; background: #151718; font-size: 12px; }
.mock-site__image { position: absolute; right: 16px; bottom: 0; width: 48%; height: 70%; background: linear-gradient(145deg, #c3c0b4, #6b7664); }
.mock-site__image span { position: absolute; bottom: 8%; left: 50%; width: 8px; height: 78%; border-radius: 50%; background: #334632; transform-origin: bottom; transform: rotate(-14deg); box-shadow: -26px 12px 0 #50634d, 22px 6px 0 #455c42, -42px 31px 0 #607257, 40px 28px 0 #2d432e; }
.performance-card { position: absolute; z-index: 6; right: 8%; bottom: 0; width: 220px; min-height: 155px; padding: 18px 19px 15px; border: 1px solid rgba(138, 151, 255, .45); border-radius: 12px; background: rgba(10, 17, 29, .9); box-shadow: 0 25px 48px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025); backdrop-filter: blur(12px); }
.performance-card small { color: #a8b1bc; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.performance-card div { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; }
.performance-card strong { color: var(--green); font-size: 22px; font-weight: 600; }
.performance-card b { color: #d8e2ee; font-size: 14px; font-weight: 500; }
.performance-card p { margin: 1px 0 -1px; color: #8995a2; font-size: 12px; }
.performance-card svg { width: 100%; height: 42px; stroke: #897cff; opacity: .9; filter: drop-shadow(0 0 5px rgba(130,110,255,.45)); }
.hero-visual__note { position: absolute; z-index: 7; top: 6%; right: -1%; color: #949add; font-size: 16px; font-style: italic; transform: rotate(-6deg); }
.hero-visual__words { position: absolute; z-index: 5; right: 0; bottom: 29%; display: flex; flex-direction: column; color: #8c96a3; font-size: 15px; line-height: 1.35; }
.hero-benefits { position: relative; z-index: 3; display: flex; gap: clamp(30px, 4vw, 68px); }
.hero-benefits div { display: flex; align-items: center; gap: 13px; color: #cad0d5; font-size: 13px; line-height: 1.35; }
.hero-benefits svg { width: 27px; height: 27px; color: var(--green); }
.hero__scroll { position: absolute; z-index: 3; right: max(32px, calc((100vw - var(--container)) / 2)); bottom: 36px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #89939f; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hero__scroll svg { width: 21px; height: 21px; }

/* ==================================================
   SECTION 03: SERVICES
================================================== */
.section { position: relative; padding: 92px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 90px; margin-bottom: 45px; }
.section-heading h2, .cta h2 { margin: 0; font-size: clamp(38px, 4vw, 60px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; }
.section-heading h2 span { color: #aeb5bc; font-weight: 400; }
.section-heading > p { max-width: 475px; margin: 0 0 4px; color: #9da6af; font-size: 14px; line-height: 1.6; }
.services { background: radial-gradient(circle at -4% 77%, rgba(139, 216, 65, .13), transparent 17%), radial-gradient(circle at 103% 55%, rgba(103, 82, 255, .15), transparent 20%); }
.ambient { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(80px); opacity: .14; }
.ambient--green { bottom: -80px; left: -140px; background: var(--green); }
.ambient--purple { top: 40%; right: -170px; background: var(--purple); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-card, .support-card, .advantage-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(13,20,26,.9), rgba(8,13,18,.72)); box-shadow: inset 0 1px rgba(255,255,255,.015); transition: transform .35s, border-color .5s cubic-bezier(.22,1,.36,1), box-shadow .52s cubic-bezier(.22,1,.36,1); }
.service-card { display: flex; min-height: 450px; padding: 28px; flex-direction: column; border-radius: 12px; }
.service-card:hover, .advantage-card:hover { transform: translateY(-6px); border-color: rgba(185,244,93,.42); box-shadow: 0 20px 55px rgba(0,0,0,.24), inset 0 0 35px rgba(185,244,93,.025); }
.service-card h3, .support-card h3, .advantage-card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.03em; }
.service-card > div > p, .support-card div p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.service-card ul { display: grid; gap: 9px; margin: 26px 0; padding: 0; list-style: none; color: #c8ced2; font-size: 14px; }
.service-card li::before { content: "✓"; display: inline-block; width: 23px; color: var(--green); font-weight: 700; }
.service-card__footer { display: flex; align-items: end; justify-content: space-between; margin-top: auto; }
.service-card__footer p { margin: 0; color: #c4c9cd; }
.service-card__footer strong, .support-card__price strong { color: var(--green); font-size: 29px; font-weight: 500; }
.circle-link { display: inline-flex; width: 47px; height: 47px; align-items: center; justify-content: center; border: 1px solid rgba(185,244,93,.65); border-radius: 50%; color: var(--green); transition: background .3s, color .3s, transform .3s; }
.circle-link svg { width: 19px; height: 19px; transition: transform .3s; }
.circle-link:hover { color: #0b1107; background: var(--green); transform: rotate(-8deg); }
.circle-link:hover svg { transform: translateX(3px); }
.support-card { position: relative; display: grid; grid-template-columns: 1.1fr 1fr .8fr; align-items: center; gap: 34px; min-height: 230px; margin-top: 16px; padding: 31px 34px 24px; overflow: hidden; border-radius: 12px; }
.support-card::after { content: ""; position: absolute; top: -70px; right: 12%; width: 220px; height: 180px; border-radius: 50%; background: rgba(89, 82, 213, .09); filter: blur(55px); pointer-events: none; }
.support-card:hover { border-color: rgba(185, 244, 93, .35); box-shadow: 0 16px 48px rgba(0, 0, 0, .18), inset 0 0 40px rgba(185, 244, 93, .02); }
.support-card__intro { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 18px; }
.support-card__icon { display: grid; width: 58px; min-width: 58px; height: 58px; place-items: center; border: 1px solid rgba(157, 151, 255, .18); border-radius: 50%; color: #b7b4ff; background: radial-gradient(circle, rgba(134,124,255,.22), transparent 68%); }
.support-card__icon svg { width: 31px; height: 31px; }
.support-card__intro h3 { margin-top: 3px; }
.support-card__intro p { max-width: 290px; line-height: 1.6; }
.support-card__benefits { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: #c0c7cc; font-size: 14px; }
.support-card__benefits li::before { content: "✓"; display: inline-block; width: 23px; color: var(--green); font-weight: 700; }
.support-card__offer { position: relative; z-index: 1; padding-left: 30px; border-left: 1px solid rgba(171, 188, 200, .14); }
.support-card__price { margin: 0; color: #c8cdd1; }
.support-card__price strong { color: var(--green); font-size: 29px; font-weight: 500; }
.support-card__price span { color: #808b98; }
.support-card__one-off { margin: 6px 0 17px !important; color: #929ca5 !important; font-size: 14px !important; }
.support-card__one-off strong { color: #bdc5ca; font-weight: 500; }
.support-card__cta { display: inline-flex; min-height: 44px; padding: 0 18px; align-items: center; gap: 10px; border: 1px solid rgba(185, 244, 93, .55); border-radius: 22px; color: var(--green); font-size: 14px; font-weight: 600; transition: color .2s, background .2s, box-shadow .2s; }
.support-card__cta svg { width: 16px; height: 16px; transition: transform .2s; }
.support-card__cta:hover { color: #0b1207; background: var(--green); box-shadow: 0 8px 25px rgba(185, 244, 93, .15); }
.support-card__cta:hover svg { transform: translateX(3px); }
.support-card__note { position: relative; z-index: 1; grid-column: 1 / -1; margin: -2px 0 0; padding-top: 16px; border-top: 1px solid rgba(171, 188, 200, .1); color: #89949c; font-size: 14px; line-height: 1.55; }

/* ==================================================
   SECTION 04: PROJECTS
================================================== */
.projects { background: radial-gradient(circle at 92% 95%, rgba(145, 222, 61, .14), transparent 18%); }
.projects__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.project-card { min-width: 0; }
.project-card__image { position: relative; display: block; overflow: hidden; aspect-ratio: 1.38; border: 1px solid rgba(200,210,218,.25); border-radius: 9px; background: #151b20; transition: transform .35s, border-color .35s, box-shadow .35s; }
.project-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,10,12,.28), transparent 55%); opacity: 0; transition: opacity .35s; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project-card:hover .project-card__image { transform: translateY(-5px); border-color: rgba(185,244,93,.4); box-shadow: 0 20px 45px rgba(0,0,0,.28); }
.project-card:hover .project-card__image img { transform: scale(1.045); }
.project-card:hover .project-card__image::after { opacity: 1; }
.project-card__title { display: flex; justify-content: space-between; align-items: center; margin-top: 17px; }
.project-card__title h3 { margin: 0; font-size: 15px; }
.project-card__title svg { width: 22px; height: 22px; color: var(--green); transition: transform .3s; }
.project-card:hover .project-card__title svg { transform: translateX(4px); }
.project-card > p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.projects__note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 38px auto 0; color: #88939c; font-size: 13px; line-height: 1.5; }
.projects__note span { display: grid; width: 22px; min-width: 22px; height: 22px; place-items: center; border: 1px solid #59636d; border-radius: 50%; font-size: 12px; }

/* ==================================================
   SECTION 05: WORK PROCESS
================================================== */
.process { background: linear-gradient(115deg, rgba(17,25,31,.5), transparent 45%); }
.process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 38px; }
.process-step { position: relative; }
.process-step:not(:last-child)::after { content: "→"; position: absolute; top: 28px; right: -27px; color: #5d6770; font-size: 23px; font-weight: 300; }
.process-step__number { color: #858fa0; font-size: 30px; font-weight: 400; }
.process-step__title { display: flex; height: 72px; flex-direction: column; justify-content: space-between; margin: 7px 0 17px; }
.process-step__title h3 { margin: 0; font-size: 16px; }
.process-step__title svg { width: 29px; height: 29px; color: var(--green); }
.process-step p { margin: 0; color: #a6aeb5; font-size: 14px; line-height: 1.6; }

/* ==================================================
   SECTION 06: ADVANTAGES
================================================== */
.advantages { background: radial-gradient(circle at 50% 100%, rgba(31,54,53,.14), transparent 30%); }
.advantages__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.advantage-card { min-height: 285px; padding: 28px 24px; border-radius: 11px; }
.advantage-card__icon { display: grid; width: 54px; height: 54px; margin-bottom: 19px; place-items: center; border: 1px solid rgba(185,244,93,.12); border-radius: 50%; color: var(--green); background: radial-gradient(circle, rgba(185,244,93,.2), transparent 70%); transition: filter .3s, transform .3s; }
.advantage-card__icon--violet { color: #9891ff; background: radial-gradient(circle, rgba(130,116,255,.22), transparent 70%); }
.advantage-card__icon svg { width: 31px; height: 31px; }
.advantage-card:hover .advantage-card__icon { filter: drop-shadow(0 0 8px currentColor); transform: scale(1.06); }
.advantage-card h3 { font-size: 16px; }
.advantage-card p { margin: 13px 0 0; color: #a5adb4; font-size: 14px; line-height: 1.6; }

/* ==================================================
   SECTION 07: CTA
================================================== */
.cta { position: relative; min-height: 340px; overflow: hidden; border-bottom: 1px solid rgba(116,114,255,.35); background: radial-gradient(circle at 82% 70%, rgba(68,62,185,.35), transparent 27%), linear-gradient(115deg, #0d1218, #080c12 58%, #101426); }
.cta::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.08) 46%, transparent 47%); background-size: 90px 90px; }
.cta__landscape { position: absolute; right: -3%; bottom: -55px; width: 35%; height: 180px; background: linear-gradient(145deg, transparent 48%, #090d13 49%) 0 0/34% 100%, linear-gradient(210deg, transparent 45%, #070b10 46%) 50% 0/42% 100%; filter: drop-shadow(0 -8px 16px rgba(94,74,255,.35)); }
.cta__inner { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr auto; align-items: center; gap: 70px; min-height: 340px; }
.cta__content > p { max-width: 500px; margin: 0; color: #aeb6bd; font-size: 15px; line-height: 1.6; }
.cta__actions { margin-top: 24px; }
.cta__scribble { align-self: center; margin: 0 25px 0 0; color: #9a9bdb; font-size: 15px; font-style: italic; line-height: 1.4; transform: rotate(-7deg); }

/* ==================================================
   SECTION 08: FOOTER
================================================== */
.footer { padding: 55px 0 25px; background: #070b0f; }
.footer__grid { display: grid; grid-template-columns: 1.15fr .7fr .8fr 1fr; gap: 70px; }
.footer h3 { margin: 0 0 18px; font-size: 14px; font-weight: 500; }
.footer__about > p, .footer__newsletter > p { margin: 22px 0; color: #9aa3aa; font-size: 14px; line-height: 1.65; }
.socials { display: flex; gap: 9px; }
.socials a { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #3a444d; border-radius: 50%; color: #bac2c7; font-size: 12px; transition: color .2s, border-color .2s; }
.socials a:hover { color: var(--green); border-color: var(--green); }
.socials svg { width: 14px; height: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; color: #9ba4ab; font-size: 14px; }
.footer__links a { transition: color .2s; }
.footer__links a:hover { color: var(--green); }
.footer__contacts { gap: 14px; }
.footer__contacts a, .footer__contacts span { display: flex; align-items: flex-start; gap: 9px; }
.footer__contacts svg { width: 15px; min-width: 15px; height: 15px; color: #b9c1c7; }
.footer__newsletter form { position: relative; }
.footer__newsletter input { width: 100%; height: 47px; padding: 0 52px 0 18px; border: 1px solid #3d4751; border-radius: 30px; outline: none; color: #e5e9eb; background: transparent; font-size: 14px; transition: border-color .2s; }
.footer__newsletter input:focus { border-color: var(--green); }
.footer__newsletter button { position: absolute; top: 0; right: 4px; width: 43px; height: 47px; border: 0; color: #c8cfd4; background: transparent; cursor: pointer; }
.footer__newsletter button svg { width: 17px; height: 17px; }
.footer-languages { display: flex; gap: 7px; margin-top: 14px; }
.footer-languages a { display: grid; width: 38px; height: 32px; place-items: center; border: 1px solid #2c3740; border-radius: 16px; color: #818c94; font-size: 12px; font-weight: 600; transition: color .2s, border-color .2s; }
.footer-languages a:hover, .footer-languages a.is-active { color: var(--green); border-color: rgba(185, 244, 93, .45); }
.footer__bottom { display: flex; justify-content: space-between; margin-top: 45px; padding-top: 22px; border-top: 1px solid rgba(180,195,205,.1); color: #7e8991; font-size: 12px; padding-right: 50px;}
.footer__bottom span { color: var(--green); }

/* ==================================================
   SECTION 09: SHARED COMPONENTS
================================================== */
.scroll-progress { position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 2px; }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--green); box-shadow: 0 0 5px rgba(185, 244, 93, .45); transform: scaleX(0); transform-origin: left; }
.back-to-top { position: fixed; z-index: 80; right: 26px; bottom: 26px; display: grid; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid #46515b; border-radius: 50%; color: #d7dcdf; background: rgba(13,19,25,.78); backdrop-filter: blur(10px); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(15px); transition: opacity .3s, visibility .3s, transform .3s, border-color .2s; }
.back-to-top.is-visible { opacity: .8; visibility: visible; transform: none; }
.back-to-top:hover { opacity: 1; border-color: var(--green); transform: translateY(-3px); }
.back-to-top svg { width: 18px; height: 18px; }
.view-cursor { position: fixed; z-index: 150; top: 0; left: 0; display: grid; width: 62px; height: 62px; place-items: center; border-radius: 50%; color: #10160b; background: var(--green); font-size: 12px; font-weight: 700; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity .2s, transform .2s; }
.view-cursor.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.drag-scroll.has-horizontal-overflow { cursor: grab; }
.drag-scroll.has-horizontal-overflow .cursor-view { cursor: grab; }
.drag-scroll.is-dragging, .drag-scroll.is-dragging .cursor-view { cursor: grabbing; user-select: none; }
.projects__track img { -webkit-user-drag: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.reveal { --reveal-distance: 20px; opacity: 1; translate: none; }
.js-enabled .reveal.is-visible { transition: opacity .55s ease-out calc(var(--stagger, 0) * 65ms), translate .55s cubic-bezier(.2,.7,.2,1) calc(var(--stagger, 0) * 65ms); }
.js-enabled .reveal:not(.is-visible) { opacity: 0; translate: 0 var(--reveal-distance); }
.reveal.is-visible { opacity: 1; translate: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* ==================================================
   SECTION 10: RESPONSIVE
================================================== */
@media (max-width: 1100px) {
  :root { --header-height: 76px; }
  .container { width: min(calc(100% - 48px), var(--container)); }
  .header__inner { grid-template-columns: 1fr auto auto; }
  .brand--header { width: 220px; }
  .header__nav { display: none; }
  .header__actions { display: none; }
  .menu-toggle, .mobile-menu { display: flex; }
  .menu-toggle { position: relative; }
  .mobile-menu { justify-content: flex-start; overflow-y: auto; }
  .mobile-menu__nav { margin-top: auto; }
  .mobile-menu__footer { margin-top: 18px; }
  .hero { padding-top: 130px; }
  .hero__inner { grid-template-columns: .9fr 1.1fr; }
  .hero-visual { --visual-scale: .84; width: 620px; margin-left: -85px; transform-origin: center right; }
  .screen--back { width: 455px; height: 375px; right: 0; }
  .screen--front { width: 270px; height: 355px; left: 23%; }
  .visual-plane--far { left: 6%; width: 285px; }
  .visual-plane--middle { left: 20%; width: 285px; }
  .performance-card { right: 4%; }
  .services__grid { gap: 12px; }
  .service-card { padding: 23px 20px; }
  .support-card { grid-template-columns: 1fr 1fr; }
  .support-card__offer { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 0 0; border-top: 1px solid rgba(171, 188, 200, .12); border-left: 0; }
  .support-card__one-off { margin: 0 !important; }
  .projects__track { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .process__grid { grid-template-columns: repeat(5, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 15px; scrollbar-color: var(--green) transparent; }
  .advantages__grid { grid-template-columns: repeat(2, 1fr); }
  .cta__inner { grid-template-columns: .85fr 1.15fr; }
  .cta__scribble { display: none; }
  .footer__grid { grid-template-columns: 1.2fr .7fr 1fr; }
  .footer__newsletter { grid-column: 1 / -1; max-width: 420px; }
}

@media (min-width: 761px) and (max-width: 820px) {
  .hero-visual { --visual-scale: .92; width: 430px; height: 420px; margin-left: 0; }
  .screen--back { width: 380px; height: 325px; right: 0; top: 5%; }
  .screen--front { width: 230px; height: 310px; left: 18%; top: 20%; }
  .visual-plane--middle { top: 27%; left: 12%; width: 245px; height: 275px; }
  .visual-plane--far, .performance-card, .hero-visual__note, .hero-visual__words { display: none; }
}

@media (max-width: 760px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .header__inner { gap: 12px; }
  .header .button--small { display: none; }
  .hero { min-height: auto; padding: 120px 0 35px; }
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; }
  .hero__title { font-size: clamp(52px, 15.8vw, 82px); }
  .hero__description br { display: none; }
  .hero-visual { --visual-scale: .73; width: 540px; max-width: none; height: 415px; margin: 32px 0 0; align-self: center; transform-origin: center; }
  .screen--back { width: 420px; height: 335px; right: 1%; top: 5%; transform: rotateY(-6deg) rotateZ(4deg); }
  .screen--front { width: 255px; height: 325px; left: 24%; top: 20%; transform: rotateY(5deg) rotateZ(-5deg); }
  .visual-plane--far, .performance-card, .hero-visual__note, .hero-visual__words { display: none; }
  .visual-plane--middle { top: 27%; left: 17%; width: 275px; height: 290px; }
  .hero-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .hero__scroll { display: none; }
  .section { padding: 72px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 23px; margin-bottom: 36px; }
  .section-heading h2, .cta h2 { font-size: clamp(36px, 10.5vw, 52px); }
  .section-heading > p { max-width: 100%; }
  .services__grid { grid-template-columns: 1fr; }
  .service-card { min-height: 410px; }
  .support-card { grid-template-columns: 1fr; gap: 25px; padding: 26px 22px 22px; }
  .support-card__intro { flex-direction: column; gap: 14px; }
  .support-card__intro p { max-width: 100%; font-size: 14px; }
  .support-card__benefits { gap: 11px; font-size: 14px; }
  .support-card__offer { grid-column: auto; display: block; padding: 22px 0 0; }
  .support-card__one-off { margin: 6px 0 18px !important; font-size: 14px !important; }
  .support-card__cta { min-height: 46px; padding-inline: 19px; font-size: 14px; }
  .support-card__note { grid-column: auto; margin-top: -8px; line-height: 1.6; }
  .projects__track { display: flex; gap: 14px; width: calc(100vw - 18px); overflow-x: auto; padding: 0 18px 20px 0; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
  .project-card { min-width: min(82vw, 360px); scroll-snap-align: start; }
  .process__grid { margin-right: -18px; }
  .advantages__grid { grid-template-columns: 1fr; }
  .advantage-card { min-height: 220px; }
  .cta { padding: 70px 0; }
  .cta__inner { display: block; min-height: auto; }
  .cta__content { margin-top: 25px; }
  .cta__landscape { width: 65%; opacity: .5; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 46px 25px; }
  .footer__about, .footer__newsletter { grid-column: 1 / -1; }
  .footer__bottom { gap: 20px; }
  .reveal { --reveal-distance: 12px; }
  .js-enabled .reveal.is-visible { transition-duration: .48s; }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .brand--header { width: 200px; }
  .brand--footer { width: 230px; }
  .hero__actions, .cta__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button, .cta__actions .button { width: 100%; }
  .hero-visual { --visual-scale: .64; height: 370px; }
  .hero-benefits div { font-size: 13px; }
  .support-card__icon { width: 52px; min-width: 52px; height: 52px; }
  .mobile-menu__footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__about, .footer__newsletter { grid-column: auto; }
  .footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (pointer: fine) {
  .cursor-view { cursor: none; }
}

@media (hover: hover) and (pointer: fine) {
  .spotlight-card { position: relative; isolation: isolate; overflow: hidden; }
  .spotlight-card::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle 360px at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(185, 244, 93, .06), rgba(185, 244, 93, .025) 38%, transparent 72%); opacity: 0; pointer-events: none; transition: opacity .46s cubic-bezier(.22,1,.36,1); }
  .spotlight-card.is-spotlight-active::before { opacity: 1; transition-duration: .55s; }
  .spotlight-card > * { position: relative; z-index: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .hero-animate, .hero-visual { opacity: 1; transform: none; }
  .js-enabled .reveal, .js-enabled .reveal:not(.is-visible) { opacity: 1; translate: none; transition: none; }
  .spotlight-card::before { display: none; }
}

/* ==================================================
   PROJECT GALLERY / LIGHTBOX
================================================== */
.project-card__zoom { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(185, 244, 93, .55); border-radius: 50%; color: var(--green); background: rgba(7, 12, 16, .78); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.75); transition: opacity .25s, transform .25s, background .25s; backdrop-filter: blur(8px); }
.project-card__zoom svg { width: 21px; height: 21px; }
.project-card__image:hover .project-card__zoom, .project-card__image:focus-visible .project-card__zoom { opacity: 1; transform: scale(1); }
.modal-shell { position: fixed; z-index: 300; inset: 0; display: grid; padding: 24px; place-items: center; overflow: hidden; background: rgba(2, 6, 9, .82); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; backdrop-filter: blur(12px); }
.modal-shell[hidden] { display: none; }
.modal-shell.is-open { opacity: 1; visibility: visible; }
.gallery-dialog { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(90vw, 1200px); max-height: calc(100dvh - 48px); padding: 25px 28px 22px; overflow: hidden; border: 1px solid rgba(147, 168, 183, .35); border-radius: 15px; outline: none; background: radial-gradient(circle at 88% 4%, rgba(89, 74, 210, .12), transparent 26%), linear-gradient(145deg, rgba(13, 21, 28, .98), rgba(6, 11, 15, .98)); box-shadow: 0 35px 100px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .025); transform: translateY(15px) scale(.985); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.modal-shell.is-open .gallery-dialog { transform: none; }
.gallery-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 20px; }
.gallery-dialog__heading h2 { margin: 0; font-size: clamp(21px, 2vw, 29px); font-weight: 600; letter-spacing: -.035em; }
.gallery-dialog__heading p { margin: 2px 0 0; color: #9aa5b2; font-size: 13px; }
.gallery-dialog__controls { display: flex; align-items: center; gap: 10px; }
.gallery-dialog__counter { min-width: 55px; margin-right: 3px; color: #9da7b5; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.modal-icon-button { display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid #35424d; border-radius: 50%; color: #bdc7ce; background: rgba(7, 13, 18, .7); cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.modal-icon-button:hover { color: var(--green); border-color: rgba(185, 244, 93, .7); background: rgba(185, 244, 93, .06); transform: translateY(-2px); }
.modal-icon-button svg { width: 18px; height: 18px; }
.modal-icon-button--close { width: 46px; height: 46px; margin-left: 7px; color: #f1f3f4; }
.modal-icon-button--close svg { width: 21px; height: 21px; }
.gallery-dialog.is-single .gallery-dialog__previous, .gallery-dialog.is-single .gallery-dialog__next, .gallery-dialog.is-single .gallery-dialog__thumbnails { display: none; }
.gallery-dialog__viewport { min-height: 220px; max-height: calc(100dvh - 230px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(181, 197, 209, .18); border-radius: 10px; background: #0a0f14; scrollbar-width: thin; scrollbar-color: #62713f #111820; touch-action: pan-y; }
.gallery-dialog__image { width: min(100%, 920px); height: auto; margin: 0 auto; object-fit: contain; opacity: 1; transition: opacity .18s ease; }
.gallery-dialog__image.is-changing { opacity: .16; }
.gallery-dialog__thumbnails { display: flex; gap: 11px; max-width: 100%; padding: 17px 2px 1px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--green) transparent; }
.gallery-thumbnail { position: relative; width: 128px; min-width: 128px; aspect-ratio: 1.55; padding: 3px; overflow: hidden; border: 1px solid #3b4650; border-radius: 8px; color: #d2d8dc; background: #0b1116; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gallery-thumbnail img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; object-position: top; opacity: .65; transition: opacity .2s; }
.gallery-thumbnail span { position: absolute; right: 7px; bottom: 5px; color: white; font-size: 12px; text-shadow: 0 1px 3px #000; }
.gallery-thumbnail:hover { transform: translateY(-2px); }
.gallery-thumbnail.is-active { border-color: var(--green); box-shadow: 0 0 16px rgba(185, 244, 93, .14); }
.gallery-thumbnail.is-active img { opacity: 1; }

/* ==================================================
   CONTACT MODAL
================================================== */
.contact-dialog { position: relative; width: min(94vw, 900px); max-height: calc(100dvh - 48px); padding: 44px 50px 38px; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(139, 164, 183, .45); border-radius: 17px; outline: none; background: linear-gradient(135deg, rgba(12, 21, 29, .985), rgba(6, 12, 18, .99)); box-shadow: 0 35px 110px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .025); transform: translateY(18px) scale(.985); transition: transform .32s cubic-bezier(.2, .7, .2, 1); scrollbar-width: thin; scrollbar-color: #526044 transparent; }
.modal-shell.is-open .contact-dialog { transform: none; }
.contact-dialog__glow { position: absolute; top: 8%; right: -12%; width: 390px; height: 390px; border-radius: 50%; background: rgba(50, 71, 147, .15); filter: blur(60px); pointer-events: none; }
.contact-dialog__close { position: absolute; z-index: 2; top: 28px; right: 28px; width: 52px; height: 52px; }
.contact-dialog__header { position: relative; padding-right: 80px; }
.contact-dialog__header .eyebrow { color: var(--green); }
.contact-dialog__header h2 { margin: 0; font-size: clamp(42px, 5vw, 62px); font-weight: 600; line-height: 1; letter-spacing: -.055em; }
.contact-dialog__header h2 span { color: var(--green); }
.contact-dialog__header > p:last-child { margin: 17px 0 0; color: #abb6c5; font-size: 16px; line-height: 1.55; }
.contact-dialog__body { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: 34px; margin-top: 35px; }
.contact-benefits { display: flex; flex-direction: column; padding: 12px 22px 0 0; }
.contact-benefit { display: flex; align-items: center; gap: 13px; padding: 12px 0; }
.contact-benefit > span { display: grid; width: 47px; min-width: 47px; height: 47px; place-items: center; border: 1px solid rgba(137, 161, 181, .1); border-radius: 11px; color: var(--green); background: rgba(17, 28, 36, .6); }
.contact-benefit svg { width: 27px; height: 27px; }
.contact-benefit p { margin: 0; color: #a3adb6; font-size: 13px; line-height: 1.5; }
.contact-benefit strong { display: block; margin-bottom: 3px; color: #edf0f1; font-size: 14px; font-weight: 600; }
.contact-alternatives { margin-top: 16px; padding: 17px 0; border-top: 1px solid rgba(169, 187, 199, .1); border-bottom: 1px solid rgba(169, 187, 199, .1); }
.contact-alternatives > p { margin: 0 0 9px; color: #87929b; font-size: 12px; letter-spacing: .025em; }
.contact-alternatives > a { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; color: #d2d8dc; font-size: 13px; font-weight: 500; }
.contact-alternatives > div { display: flex; gap: 8px; margin-top: 7px; }
.contact-alternatives > div a { display: inline-flex; min-height: 36px; padding: 0 10px; align-items: center; gap: 6px; border: 1px solid #303d47; border-radius: 18px; color: #b9c1c7; font-size: 12px; transition: color .2s, border-color .2s; }
.contact-alternatives a:hover { color: var(--green); border-color: rgba(185, 244, 93, .45); }
.contact-alternatives svg { width: 14px; height: 14px; color: var(--green); }
.contact-privacy { display: flex; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 22px; color: #87929f; }
.contact-privacy svg { width: 23px; min-width: 23px; height: 23px; }
.contact-privacy p { margin: 0; font-size: 13px; line-height: 1.55; }
.contact-form { display: grid; gap: 13px; }
.form-field label { display: block; margin: 0 0 6px; color: #cbd2d8; font-size: 13px; }
.form-field label span { color: #ff6159; }
.form-field__control { position: relative; }
.form-field__control > svg { position: absolute; z-index: 1; top: 50%; left: 15px; width: 21px; height: 21px; color: #8290a3; transform: translateY(-50%); pointer-events: none; }
.form-field__control input, .form-field__control textarea { display: block; width: 100%; border: 1px solid #3c4a58; border-radius: 8px; outline: none; color: #eef1f3; background: rgba(10, 19, 27, .72); transition: border-color .2s, box-shadow .2s, background .2s; }
.form-field__control input { height: 48px; padding: 0 15px 0 49px; }
.form-field__control textarea { min-height: 100px; padding: 14px 14px 14px 49px; resize: vertical; line-height: 1.5; }
.form-field__control--textarea > svg { top: 17px; transform: none; }
.form-field__control input::placeholder, .form-field__control textarea::placeholder { color: #84909e; }
.form-field__control input:focus, .form-field__control textarea:focus { border-color: rgba(185, 244, 93, .65); background: rgba(11, 22, 29, .9); box-shadow: 0 0 0 3px rgba(185, 244, 93, .055); }
.form-field.is-invalid .form-field__control input, .form-field.is-invalid .form-field__control textarea { border-color: rgba(255, 92, 83, .85); box-shadow: 0 0 0 3px rgba(255, 79, 70, .06); }
.form-field__error { min-height: 17px; margin: 3px 0 -8px; color: #ff827b; font-size: 12px; line-height: 1.4; }
.recaptcha-placeholder { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 11px; min-height: 57px; padding: 10px 14px; border: 1px dashed #46535f; border-radius: 8px; color: #b8c1c7; background: rgba(8, 15, 21, .58); }
.recaptcha-placeholder svg { grid-row: 1 / 3; width: 28px; height: 28px; color: #728091; }
.recaptcha-placeholder span { font-size: 13px; }
.recaptcha-placeholder small { color: #7d8994; font-size: 12px; }
.contact-form__submit { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; gap: 14px; border: 1px solid #ff8b55; border-radius: 10px; color: white; background: linear-gradient(110deg, #f14136, #ff6345); box-shadow: 0 9px 26px rgba(255, 72, 50, .19), inset 0 1px rgba(255, 255, 255, .4); font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .25s, box-shadow .25s, filter .25s; }
.contact-form__submit svg { width: 19px; height: 19px; transition: transform .25s; }
.contact-form__submit:hover { transform: translateY(-2px) scale(1.005); filter: brightness(1.07); box-shadow: 0 13px 34px rgba(255, 72, 50, .3), inset 0 1px rgba(255, 255, 255, .5); }
.contact-form__submit:hover svg { transform: translateX(4px); }
.contact-form__status { min-height: 18px; margin: -5px 0 0; color: #b6c0c7; font-size: 12px; line-height: 1.45; text-align: center; }

/* Project Gallery — Responsive */
@media (max-width: 760px) {
  .project-card__zoom { top: 10px; right: 10px; width: 40px; height: 40px; opacity: .85; transform: none; }
  .modal-shell { padding: 10px; }
  .gallery-dialog { width: 100%; max-height: calc(100dvh - 20px); padding: 18px 15px 15px; border-radius: 13px; }
  .gallery-dialog__header { align-items: flex-start; flex-direction: column; gap: 14px; padding-bottom: 14px; }
  .gallery-dialog__heading { padding-right: 52px; }
  .gallery-dialog__controls { width: 100%; }
  .gallery-dialog__counter { margin-right: auto; text-align: left; }
  .gallery-dialog__controls .modal-icon-button { width: 46px; height: 46px; }
  .gallery-dialog__controls .modal-icon-button--close { position: absolute; top: 14px; right: 13px; width: 48px; height: 48px; }
  .gallery-dialog__viewport { max-height: calc(100dvh - 200px); border-radius: 8px; }
  .gallery-dialog.is-single .gallery-dialog__viewport { max-height: calc(100dvh - 118px); }
  .gallery-thumbnail { width: 104px; min-width: 104px; }
}

/* Contact Modal — Responsive */
@media (max-width: 760px) {
  .contact-dialog { width: 100%; max-height: calc(100dvh - 20px); padding: 30px 22px 25px; border-radius: 14px; }
  .contact-dialog__close { top: 18px; right: 17px; width: 49px; height: 49px; }
  .contact-dialog__header { padding-right: 54px; }
  .contact-dialog__header h2 { font-size: clamp(39px, 13vw, 53px); }
  .contact-dialog__header > p:last-child { font-size: 14px; }
  .contact-dialog__header > p:last-child br { display: none; }
  .contact-dialog__body { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
  .contact-form { order: 1; }
  .contact-benefits { order: 2; padding: 0; }
  .contact-benefit { padding: 9px 0; }
  .contact-alternatives { margin-top: 13px; }
  .contact-alternatives > a { min-height: 40px; font-size: 13px; }
  .contact-alternatives > div a { min-height: 42px; padding-inline: 13px; font-size: 12px; }
  .contact-privacy { margin-top: 14px; }
  .form-field__control input { height: 52px; }
  .contact-form__submit { min-height: 58px; }
}

@media (max-width: 380px) {
  .contact-dialog { padding-inline: 17px; }
  .contact-dialog__header h2 { font-size: 39px; }
  .contact-dialog__header > p:last-child { font-size: 14px; }
  .gallery-dialog__heading h2 { max-width: 220px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-dialog, .contact-dialog, .project-card__zoom { transform: none; }
  .gallery-dialog__image { transition: opacity .01ms; }
}



.footer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-weight: 600;
}

.footer__cta svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
}


/* ==================================================
   CONTACT FORM — GOOGLE RECAPTCHA
================================================== */

.contact-recaptcha {
    width: 100%;
    margin: 18px 0;
}

.contact-recaptcha .g-recaptcha {
    max-width: 100%;
}

.contact-recaptcha__error {
    margin: 8px 0 0;
    color: #e57373;
    font-size: 13px;
    line-height: 1.5;
}

.contact-recaptcha__error:empty {
    display: none;
}


/* ==================================================
   MOBILE MENU — HIDE SCROLLBAR
================================================== */

.mobile-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-menu::-webkit-scrollbar {
    display: none;
}


/* ==================================================
   CONTACT POPUP — VISIBLE ACCENT SCROLLBAR
================================================== */

/* Firefox */
.contact-dialog {
    scrollbar-width: auto;
    scrollbar-color: #c7ff6b #172027;
}

/* Chrome, Edge, Safari */
.contact-dialog::-webkit-scrollbar {
    width: 10px;
}

.contact-dialog::-webkit-scrollbar-track {
    background: #172027;
    border-radius: 10px;
}

.contact-dialog::-webkit-scrollbar-thumb {
    background: #c7ff6b;
    border-radius: 10px;
    border: 2px solid #172027;
}

.contact-dialog::-webkit-scrollbar-thumb:hover {
    background: #d8ff95;
}

/* ==================================================
   CONTACT MODAL — SUBMISSION NOTICE
================================================== */

.contact-dialog__notice {
    position: relative;

    margin-top: 25px;
    padding: 15px 20px;

    border: 1px dashed var(--green);
    border-radius: 9px;

    color: var(--green);
    background: rgba(185, 244, 93, 0.055);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

/* Скрытый элемент не должен занимать место */
.contact-dialog__notice[hidden] {
    display: none;
}

/* Успешная отправка */
.contact-dialog__notice.is-success {
    color: var(--green);
    border-color: rgba(185, 244, 93, 0.8);
    background: rgba(185, 244, 93, 0.055);
}

/* Ошибка отправки */
.contact-dialog__notice.is-error {
    color: #ff827b;
    border-color: rgba(255, 98, 88, 0.8);
    background: rgba(255, 98, 88, 0.055);
}

/* ==================================================
   VMWEB — BREADCRUMBS
================================================== */

.breadcrumbs {
    padding: 28px 0;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;

    font-size: 13px;
    color: var(--muted);
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    color: #59636d;
}

.breadcrumbs__item a {
    color: #aeb8c0;
    transition: color .2s ease;
}

.breadcrumbs__item a:hover {
    color: var(--green);
}

.breadcrumbs__item--current {
    color: var(--green);
}


/* ==================================================
   VMWEB — ERROR 404
================================================== */

.error-page {
    position: relative;
    overflow: hidden;

    padding: 90px 0 130px;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(119, 112, 255, .13),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(185, 244, 93, .06),
            transparent 35%
        );
}

.error-page__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.error-page__content {
    position: relative;
    z-index: 2;
}

.error-page__code {
    margin-bottom: 15px;

    color: var(--green);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .25em;
}

.error-page__eyebrow {
    margin: 0 0 20px;

    color: var(--muted);

    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.error-page__title {
    margin: 0;

    font-size: clamp(48px, 5vw, 78px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.055em;
}

.error-page__description {
    max-width: 510px;

    margin: 28px 0 0;

    color: #aeb8c0;

    font-size: 16px;
    line-height: 1.8;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 38px;
}

.error-page__visual {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 390px;
}

.error-page__visual-code {
    position: relative;
    z-index: 2;

    color: rgba(185, 244, 93, .09);

    font-size: clamp(140px, 18vw, 290px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.1em;

    user-select: none;
}

.error-page__circle {
    position: absolute;

    width: 310px;
    height: 310px;

    border: 1px solid rgba(119, 112, 255, .25);
    border-radius: 50%;
}

.error-page__circle--one {
    transform: rotate(-25deg) scaleX(1.4);
}

.error-page__circle--two {
    transform: rotate(30deg) scaleX(.8);
    border-color: rgba(185, 244, 93, .14);
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 768px) {

    .breadcrumbs {
        padding: 22px 0;
    }

    .error-page {
        padding: 50px 0 90px;
    }

    .error-page__inner {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .error-page__visual {
        min-height: 180px;
        grid-row: 1;
    }

    .error-page__visual-code {
        font-size: 150px;
    }

    .error-page__circle {
        width: 180px;
        height: 180px;
    }

    .error-page__description {
        font-size: 15px;
    }

}

/* =========================================================
   VMWEB — ERROR 404
   ========================================================= */

.vm-error404 {
    --error-bg: #0d1217;
    --error-green: #b9f45d;
    --error-purple: #9384cf;
    --error-text: #f0f3f6;
    --error-muted: #a7b0bb;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background: var(--error-bg);
    color: var(--error-text);

    padding: 80px 0 105px;
}


/* ---------------------------------------------------------
   Background
--------------------------------------------------------- */

.vm-error404__background {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 74% 48%,
            rgba(147, 132, 207, .095),
            transparent 40%
        ),
        radial-gradient(
            ellipse at 45% 88%,
            rgba(185, 244, 93, .055),
            transparent 38%
        );
}


/* ---------------------------------------------------------
   Main layout
--------------------------------------------------------- */

.vm-error404__container {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: 55px;
    min-height: 600px;
}


/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.vm-error404__content {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.vm-error404__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 28px;

    color: var(--error-green);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .27em;
    text-transform: uppercase;
}

.vm-error404__eyebrow-line {
    display: block;

    width: 25px;
    height: 1px;

    background: var(--error-green);
}


/* ---------------------------------------------------------
   Title
--------------------------------------------------------- */

.vm-error404__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    margin: 0;

    font-size: clamp(45px, 5.2vw, 82px);
    font-weight: 750;
    line-height: 1.04;
    letter-spacing: -.055em;
}

.vm-error404__title > span {
    display: block;
}

.vm-error404__title-accent {
    color: var(--error-green);
}


/* ---------------------------------------------------------
   Description
--------------------------------------------------------- */

.vm-error404__description {
    max-width: 560px;

    margin: 32px 0 0;

    color: var(--error-muted);

    font-size: 17px;
    line-height: 1.85;
}


/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.vm-error404__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;

    margin-top: 44px;
}

.vm-error404__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 24px;

    min-height: 58px;
    padding: 15px 28px;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.vm-error404__button:hover {
    transform: translateY(-3px);
}

.vm-error404__button--primary {
    background: var(--error-green);
    color: #101510;

    box-shadow:
        0 10px 45px rgba(185, 244, 93, .08);
}

.vm-error404__button--primary:hover {
    background: #cdfb88;
    color: #101510;

    box-shadow:
        0 15px 50px rgba(185, 244, 93, .16);
}

.vm-error404__button--primary svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-error404__button--secondary {
    background: transparent;

    border-color: rgba(210, 220, 230, .45);
    color: var(--error-text);
}

.vm-error404__button--secondary:hover {
    border-color: var(--error-green);
    color: var(--error-green);
}


/* ---------------------------------------------------------
   Useful links
--------------------------------------------------------- */

.vm-error404__useful {
    margin-top: 68px;
}

.vm-error404__useful-label {
    margin: 0 0 22px;

    color: #91a0ae;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.vm-error404__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 27px;
}

.vm-error404__links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #b9c3cd;

    font-size: 13px;
    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.vm-error404__links a span {
    color: var(--error-green);
    font-size: 15px;
}

.vm-error404__links a:hover {
    color: var(--error-green);
    transform: translateY(-2px);
}


/* =========================================================
   VISUAL
   ========================================================= */

.vm-error404__visual {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 0;
    min-height: 540px;

    perspective: 1100px;
}


/* ---------------------------------------------------------
   Glass card
--------------------------------------------------------- */

.vm-error404__card {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(76%, 400px);
    aspect-ratio: 1 / 1.16;

    padding: 35px;

    border: 1px solid rgba(173, 161, 236, .45);
    border-left-color: rgba(185, 244, 93, .65);

    border-radius: 25px;

    background:
        linear-gradient(
            130deg,
            rgba(185, 244, 93, .065),
            transparent 35%
        ),
        linear-gradient(
            155deg,
            rgba(32, 38, 46, .95),
            rgba(13, 18, 23, .94)
        );

    box-shadow:
        -15px 18px 70px rgba(0, 0, 0, .45),
        -3px 0 35px rgba(185, 244, 93, .07),
        inset 0 1px 0 rgba(255, 255, 255, .08);

    transform:
        rotateZ(10deg)
        rotateY(-9deg)
        rotateX(5deg);

    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.vm-error404__visual:hover .vm-error404__card {
    transform:
        rotateZ(6deg)
        rotateY(-3deg)
        rotateX(2deg)
        translateY(-8px);

    box-shadow:
        -15px 25px 85px rgba(0, 0, 0, .5),
        -3px 0 45px rgba(185, 244, 93, .11);
}


/* ---------------------------------------------------------
   Card text
--------------------------------------------------------- */

.vm-error404__card-top {
    position: absolute;
    top: 55px;

    color: #9aa9b6;

    font-size: 11px;
    letter-spacing: .55em;
}

.vm-error404__card-number {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #c0c9cf;

    font-size: clamp(95px, 10vw, 165px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.11em;

    text-shadow:
        0 3px 3px rgba(0, 0, 0, .5),
        0 -1px 1px rgba(255, 255, 255, .35);
}

.vm-error404__card-number span {
    position: relative;
}

.vm-error404__card-number span::after {
    content: "";

    position: absolute;
    top: 5%;
    left: 50%;

    width: 2px;
    height: 105%;

    background: var(--error-green);

    transform: rotate(36deg);

    box-shadow:
        0 0 14px rgba(185, 244, 93, .4);
}

.vm-error404__card-divider {
    width: 46px;
    height: 1px;

    margin: 22px 0;

    background: rgba(185, 244, 93, .65);
}

.vm-error404__card-bottom {
    color: #96a6b4;

    font-size: 10px;
    letter-spacing: .42em;
    text-align: center;
}


/* ---------------------------------------------------------
   Orbit lines
--------------------------------------------------------- */

.vm-error404__orbit {
    position: absolute;
    z-index: 1;

    width: 108%;
    height: 62%;

    border: 1px solid rgba(157, 146, 212, .28);
    border-radius: 50%;

    pointer-events: none;
}

.vm-error404__orbit--one {
    transform: rotate(33deg);
}

.vm-error404__orbit--two {
    width: 95%;
    height: 56%;

    border-color: rgba(185, 244, 93, .23);

    transform: rotate(-29deg);
}


/* ---------------------------------------------------------
   Decorative sphere
--------------------------------------------------------- */

.vm-error404__sphere {
    position: absolute;
    z-index: 3;

    top: 26%;
    left: 5%;

    width: 47px;
    height: 47px;

    border: 1px solid rgba(185, 244, 93, .28);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            #5c7864,
            #202a28 42%,
            #11171b 75%
        );

    box-shadow:
        inset -5px -7px 15px rgba(0, 0, 0, .6),
        0 10px 35px rgba(0, 0, 0, .4);
}


/* ---------------------------------------------------------
   Side details
--------------------------------------------------------- */

.vm-error404__side-note {
    position: absolute;
    z-index: 3;

    top: 13%;
    right: 0;

    color: #84919f;

    font-size: 9px;
    line-height: 1.9;
    letter-spacing: .35em;
}

.vm-error404__side-line {
    position: absolute;

    right: 4%;
    bottom: 12%;

    width: 28px;
    height: 1px;

    background: var(--error-green);
}


/* =========================================================
   BREADCRUMBS — HOME ICON
   ========================================================= */

.breadcrumbs__item--home a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.breadcrumbs__home-icon {
    display: block;
    flex-shrink: 0;

    width: 16px;
    height: 16px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .vm-error404__container {
        gap: 25px;
    }

    .vm-error404__title {
        font-size: clamp(43px, 5vw, 65px);
    }

    .vm-error404__card {
        width: 80%;
    }

    .vm-error404__card-number {
        font-size: clamp(90px, 10vw, 135px);
    }

}


@media (max-width: 850px) {

    .vm-error404 {
        padding: 45px 0 75px;
    }

    .vm-error404__container {
        grid-template-columns: 1fr;

        min-height: auto;
        gap: 30px;
    }

    .vm-error404__content {
        max-width: 650px;
    }

    .vm-error404__title {
        font-size: clamp(48px, 8vw, 72px);
    }

    .vm-error404__visual {
        min-height: 410px;
        max-width: 600px;
        width: 100%;

        margin: 0 auto;
    }

    .vm-error404__card {
        width: min(64%, 330px);
    }

    .vm-error404__card-number {
        font-size: clamp(100px, 15vw, 140px);
    }

    .vm-error404__useful {
        margin-top: 48px;
    }

}


@media (max-width: 520px) {

    .vm-error404 {
        padding: 35px 0 60px;
    }

    .vm-error404__eyebrow {
        margin-bottom: 22px;
    }

    .vm-error404__title {
        font-size: clamp(40px, 10vw, 56px);
    }

    .vm-error404__description {
        margin-top: 24px;

        font-size: 15px;
        line-height: 1.75;
    }

    .vm-error404__actions {
        margin-top: 32px;
        gap: 12px;
    }

    .vm-error404__button {
        width: 100%;
        min-height: 54px;
    }

    .vm-error404__useful {
        margin-top: 43px;
    }

    .vm-error404__links {
        gap: 16px 22px;
    }

    .vm-error404__visual {
        min-height: 300px;
    }

    .vm-error404__card {
        width: min(67%, 245px);

        padding: 20px;
        border-radius: 18px;
    }

    .vm-error404__card-top {
        top: 33px;
        font-size: 9px;
    }

    .vm-error404__card-number {
        font-size: clamp(85px, 21vw, 110px);
    }

    .vm-error404__card-bottom {
        font-size: 8px;
        letter-spacing: .25em;
    }

    .vm-error404__sphere {
        width: 34px;
        height: 34px;
    }

    .vm-error404__side-note {
        display: none;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .vm-error404__card,
    .vm-error404__button,
    .vm-error404__links a {
        transition: none;
    }

}