@font-face {
font-family: "Golos Text";
src: url("../fonts/golos-text-variable-2.004-d98e51d0.woff2") format("woff2");
font-style: normal;
font-weight: 400 900;
font-display: swap;
}

:root {
--font-sans: "Golos Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
--font-mono: "Golos Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
--ink: #081824;
--ink-2: #0d2033;
--muted: #526376;
--muted-dark: #8fa0b6;
--line: #d5dee7;
--paper: #f3f6f8;
--white: #ffffff;
--blue: #2355df;
--blue-dark: #1745b5;
--lime: #b7f34a;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: auto;
}

body {
min-width: 320px;
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-kerning: normal;
font-synthesis: none;
text-rendering: optimizeLegibility;
}

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

button,
input,
select,
textarea {
font: inherit;
}

img {
display: block;
max-width: 100%;
}

summary {
-webkit-tap-highlight-color: transparent;
}

::selection {
background: var(--lime);
color: var(--ink);
}

[id] {
scroll-margin-top: 24px;
}

.topbar {
position: relative;
z-index: 30;
width: min(1240px, calc(100% - 40px));
height: 76px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 32px;
}

.brand {
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 750;
font-size: 20px;
letter-spacing: -0.04em;
}

.brandMark {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--ink);
color: var(--lime);
}

.desktopNav {
align-self: stretch;
display: flex;
align-items: center;
gap: 3px;
margin-right: auto;
color: var(--muted);
font-size: 14px;
font-weight: 700;
}

.desktopNav > a,
.desktopMegaMenu > summary {
min-height: 44px;
min-width: 44px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
transition: background 0.2s, color 0.2s;
}

.desktopNav > a:hover,
.desktopNav > a:focus-visible,
.desktopNav > a[aria-current="page"],
.desktopMegaMenu > summary:hover,
.desktopMegaMenu > summary:focus-visible,
.desktopMegaMenu > summary.isCurrent,
.desktopMegaMenu[open] > summary {
background: #edf3ff;
color: var(--blue);
}

.desktopMegaMenu {
position: relative;
align-self: stretch;
display: flex;
align-items: center;
}

.desktopMegaMenu > summary {
gap: 9px;
list-style: none;
cursor: pointer;
user-select: none;
}

.desktopMegaMenu > summary::-webkit-details-marker {
display: none;
}

.desktopMegaMenu > summary > i {
width: 7px;
height: 7px;
margin-top: -4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: margin 0.2s, transform 0.2s;
}

.desktopMegaMenu[open] > summary > i {
margin-top: 4px;
transform: rotate(225deg);
}

.desktopMegaMenuPanel {
position: absolute;
z-index: 40;
top: calc(100% - 3px);
left: 0;
width: min(800px, calc(100vw - 40px));
padding: 22px;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(230px, 0.8fr);
gap: 22px;
border: 1px solid #dbe3ec;
border-radius: 16px;
background: var(--white);
box-shadow: 0 28px 70px rgba(8, 24, 36, 0.18);
}

.desktopMegaMenuGroup {
min-width: 0;
}

.desktopMegaMenuPages {
padding-left: 22px;
border-left: 1px solid var(--line);
}

.desktopMegaMenuLabel {
min-height: 28px;
padding: 0 10px 8px;
display: flex;
align-items: center;
color: var(--blue);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.desktopMegaMenuLinks {
display: grid;
gap: 4px;
}

.desktopMegaMenuServices .desktopMegaMenuLinks {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.desktopMegaMenuLinks a {
min-height: 50px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid transparent;
border-radius: 10px;
color: var(--ink);
font-size: 14px;
font-weight: 700;
}

.desktopMegaMenuLinks a i {
color: #9cacbd;
font-size: 15px;
font-style: normal;
transition: color 0.2s, transform 0.2s;
}

.desktopMegaMenuLinks a:hover,
.desktopMegaMenuLinks a:focus-visible,
.desktopMegaMenuLinks a[aria-current="page"] {
border-color: #d7e3ff;
background: #f4f7ff;
color: var(--ink);
}

.desktopMegaMenuLinks a:hover i,
.desktopMegaMenuLinks a:focus-visible i,
.desktopMegaMenuLinks a[aria-current="page"] i {
color: var(--blue);
transform: translateX(2px);
}

.topbarActions {
display: flex;
align-items: center;
gap: 10px;
}

.accountActionsDesktop {
display: flex;
align-items: center;
gap: 5px;
}

.accountAction {
min-height: 44px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 10px;
font-size: 13px;
font-weight: 650;
white-space: nowrap;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.accountActionLogin:hover,
.accountActionLogin:focus-visible {
background: #edf3ff;
color: var(--blue);
}

.accountActionRegister {
border-color: var(--line);
background: var(--white);
}

.accountActionRegister:hover,
.accountActionRegister:focus-visible {
border-color: var(--blue);
color: var(--blue);
}

.languageSwitch {
min-width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--white);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.08em;
}

.languageSwitch:hover {
border-color: var(--blue);
color: var(--blue);
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 23px;
border-radius: 11px;
background: var(--blue);
color: #fff;
font-weight: 700;
box-shadow: 0 12px 28px rgba(35, 85, 223, 0.18);
transition: transform 0.2s, background 0.2s;
}

.button:hover {
background: var(--blue-dark);
transform: translateY(-2px);
}

.buttonSmall {
min-height: 44px;
padding: 0 18px;
font-size: 13px;
}

.mobileMenu {
position: relative;
display: none;
}

.mobileMenuToggle {
width: 44px;
height: 44px;
padding: 11px 10px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--white);
cursor: pointer;
}

.mobileMenuToggle span {
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--ink);
}

.mobileMenuPanel {
position: absolute;
z-index: 10;
top: 0;
right: 0;
scroll-margin-top: 62px;
width: min(370px, calc(100vw - 20px));
max-height: calc(100vh - 28px);
padding: 12px;
display: none;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--white);
box-shadow: 0 24px 60px rgba(8, 24, 36, 0.18);
}

.mobileMenuPanel:target {
display: grid;
}

.has-js .mobileMenu.is-open .mobileMenuPanel {
display: grid;
}

html.has-js.qdc-menu-open,
html.has-js.qdc-menu-open body {
overflow: hidden;
}

.mobileMenuPanel a {
min-height: 46px;
padding: 13px 14px;
display: flex;
align-items: center;
border-radius: 8px;
color: var(--muted);
font-size: 15px;
font-weight: 700;
}

.mobileMenuPanel a:hover,
.mobileMenuPanel a:focus-visible {
background: var(--paper);
color: var(--ink);
}

.mobileMenuPanel .mobileMenuClose {
position: sticky;
z-index: 2;
top: 0;
right: auto;
justify-self: end;
width: 44px;
height: 44px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--white);
color: var(--ink);
box-shadow: 0 8px 18px rgba(8, 24, 36, 0.08);
}

.mobileMenuClose::before,
.mobileMenuClose::after {
content: "";
position: absolute;
width: 20px;
height: 2px;
border-radius: 2px;
background: currentColor;
}

.mobileMenuClose::before {
transform: rotate(45deg);
}

.mobileMenuClose::after {
transform: rotate(-45deg);
}

.mobileMenuPanel .mobileRequest {
margin-top: 6px;
background: var(--blue);
color: #fff;
text-align: center;
}

.mobileMenuPanel .mobileRequest:hover,
.mobileMenuPanel .mobileRequest:focus-visible {
background: var(--blue-dark);
color: #fff;
}

.mobileAccountActions {
margin: 4px 0 8px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}

.mobileMenuPanel .mobileAccountActions a {
justify-content: center;
border: 1px solid var(--line);
color: var(--ink);
text-align: center;
}

.mobileMenuPanel .mobileAccountActions .mobileAccountRegister {
border-color: var(--blue);
background: var(--blue);
color: var(--white);
}

.mobileMenuPanel .mobileAccountActions .mobileAccountRegister:hover,
.mobileMenuPanel .mobileAccountActions .mobileAccountRegister:focus-visible {
background: var(--blue-dark);
color: var(--white);
}

.mobileMenuGroupLabel {
min-height: 35px;
margin-top: 7px;
padding: 14px 13px 6px;
display: flex;
align-items: flex-end;
border-top: 1px solid var(--line);
color: var(--blue);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.mobileMenuPanel .mobileDirectoryLink[aria-current="page"] {
background: #edf3ff;
color: var(--blue);
}

.hero {
position: relative;
overflow: clip;
width: min(1240px, calc(100% - 40px));
min-height: 0;
padding: 44px 0 48px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.96fr 1.04fr;
gap: 48px;
align-items: center;
}

.hero h1,
main[lang="en"] .hero h1 {
font-size: clamp(42px, 4.7vw, 64px);
line-height: 1.04;
}

.hero .heroLead {
margin-top: 22px;
line-height: 1.5;
}

.hero .heroActions,
.hero .heroFacts {
margin-top: 24px;
}

.hero::before {
content: "";
position: absolute;
z-index: -1;
width: 340px;
height: 340px;
left: -120px;
top: 80px;
border-radius: 50%;
background: rgba(35, 85, 223, 0.09);
filter: blur(70px);
}

.eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
color: #405167;
text-transform: uppercase;
letter-spacing: 0.13em;
font-size: 11px;
font-weight: 750;
}

.eyebrow span {
flex: 0 0 auto;
width: 30px;
height: 2px;
background: var(--blue);
}

.eyebrowLight {
color: var(--white);
}

.eyebrowLight span {
background: var(--lime);
}

h1 {
max-width: 640px;
margin: 0;
font-size: clamp(46px, 5.6vw, 78px);
font-weight: 650;
line-height: 0.98;
letter-spacing: -0.04em;
}

h1 em {
color: var(--blue);
font-style: normal;
}

main[lang="en"] h1 {
font-size: clamp(45px, 5.2vw, 72px);
}

.heroLead {
max-width: 590px;
margin: 30px 0 0;
color: var(--muted);
font-size: 18px;
line-height: 1.65;
}

.heroActions {
display: flex;
align-items: center;
gap: 26px;
margin-top: 34px;
}

.textLink {
min-height: 44px;
display: inline-flex;
align-items: center;
font-weight: 700;
}

.textLink span {
margin-left: 6px;
color: var(--blue);
}

.textLinkLight span {
color: var(--white);
}

.heroFacts {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 32px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.heroFacts b {
color: var(--ink);
font-size: 14px;
}

.heroPanel {
overflow: hidden;
border: 1px solid #182941;
border-radius: 22px;
background:
  linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
  var(--ink);
background-size: 32px 32px;
color: #fff;
box-shadow: 0 22px 48px rgba(8, 24, 36, 0.17);
}

.panelTop {
min-height: 58px;
padding: 0 20px;
display: flex;
gap: 20px;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #223149;
background: rgba(8, 24, 36, 0.88);
color: #9eacbd;
font: 700 13px/1.2 var(--font-sans);
}

.panelTop span:first-child {
color: #eef4fb;
font-size: 14px;
}

.panelTop span:last-child {
text-align: right;
}

.serviceMiniGrid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}

.serviceMiniGrid a {
min-height: 84px;
padding: 16px 18px;
display: grid;
grid-column: span 3;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
border: solid #223149;
border-width: 0 1px 1px 0;
background: rgba(8, 24, 36, 0.7);
transition: background 0.2s, color 0.2s;
}

.serviceMiniGrid a:nth-child(4),
.serviceMiniGrid a:nth-child(7) {
border-right: 0;
}

.serviceMiniGrid a:nth-child(n + 5) {
grid-column: span 4;
border-bottom: 0;
}

.serviceMiniGrid a:hover,
.serviceMiniGrid a:focus-visible {
background: var(--blue);
}

.serviceMiniGrid strong {
font-size: 16px;
line-height: 1.25;
letter-spacing: -0.015em;
}

.serviceArrow {
color: var(--lime);
font-size: 18px;
font-weight: 750;
}

.section {
width: min(1240px, calc(100% - 40px));
margin: 0 auto;
padding: 96px 0;
}

.sectionHeading h2 {
max-width: 850px;
margin: 0;
font-size: clamp(36px, 4vw, 56px);
font-weight: 650;
line-height: 1.04;
letter-spacing: -0.035em;
}

.splitHeading {
display: grid;
grid-template-columns: 1.35fr 0.65fr;
gap: 80px;
align-items: end;
}

.splitHeading > p {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.65;
}

.servicesSection {
border-top: 1px solid var(--line);
}

.serviceCards {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
margin-top: 44px;
}

.serviceCard {
grid-column: span 3;
min-height: 220px;
padding: 22px;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--white);
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.serviceCard:nth-last-child(-n + 3) {
grid-column: span 4;
}

.serviceCard:hover {
transform: translateY(-4px);
border-color: #aac2ed;
box-shadow: 0 18px 42px rgba(8, 24, 36, 0.08);
}

.serviceCode {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 10px;
background: #eaf1ff;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
}

.serviceCard h3 {
margin: 20px 0 8px;
font-size: 19px;
letter-spacing: -0.025em;
}

.serviceCard p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}

.cardLink {
margin-top: auto;
min-height: 44px;
padding-top: 12px;
display: flex;
align-items: flex-end;
justify-content: space-between;
font-size: 14px;
font-weight: 750;
}

.cardLink b {
float: right;
color: var(--blue);
}

.plansSection {
width: 100%;
padding: 72px max(20px, calc((100% - 1240px) / 2));
background: var(--ink);
color: #fff;
}

.plansSection .sectionHeading h2 {
max-width: 760px;
font-size: clamp(34px, 3.5vw, 50px);
line-height: 1.04;
}

.plansSection .splitHeading {
gap: 56px;
align-items: start;
}

.plansSection .eyebrow {
margin-bottom: 16px;
font-size: 12px;
}

.plansSection .splitHeading > p {
color: #b4c0cf;
font-size: 16px;
line-height: 1.55;
}

.planGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 30px;
}

.homePlansSection {
padding-top: 42px;
padding-bottom: 42px;
}

.homePlanGrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homePlanGrid .planCard h3 {
font-size: 23px;
line-height: 1.25;
}

.planCard {
position: relative;
overflow: hidden;
min-height: 0;
padding: 22px 22px 18px;
display: flex;
flex-direction: column;
border: 1px solid #2d425e;
border-radius: 14px;
background: var(--ink-2);
}

.planCard.featured {
border-color: var(--blue);
box-shadow: inset 0 0 0 1px var(--blue);
}

.planCard.featured::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
top: -115px;
right: -85px;
border-radius: 50%;
background: var(--blue);
filter: blur(38px);
opacity: 0.3;
}

.planTop {
display: flex;
justify-content: space-between;
align-items: center;
color: #c0cbd8;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.065em;
}

.planTop b {
color: var(--lime);
}

.planCard h3 {
margin: 20px 0 6px;
font-size: 22px;
line-height: 1.2;
}

.price {
margin: 0;
display: flex;
gap: 7px;
align-items: baseline;
font-size: 46px;
font-weight: 750;
line-height: 1.05;
letter-spacing: 0;
}

.priceValue,
.serverPrice {
display: inline-flex;
gap: 0.12em;
align-items: baseline;
font-kerning: none;
letter-spacing: -0.035em;
}

.priceCurrency {
flex: 0 0 auto;
font-size: 0.82em;
letter-spacing: 0;
}

.priceAmount {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
}

.price small {
margin-left: 0;
color: #9eacc0;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
}

.planCard ul {
padding: 0;
margin: 20px 0 16px;
list-style: none;
color: #bac7d6;
font-size: 15px;
line-height: 1.45;
}

.planCard li {
padding: 7px 0;
border-bottom: 1px solid #203149;
}

.planCard li::before {
content: "•";
margin-right: 9px;
color: var(--lime);
}

.planMinimumPayment {
margin: 0 0 14px;
padding: 10px 11px;
display: grid;
gap: 3px;
border-radius: 9px;
background: #0d2034;
}

.planMinimumPayment span {
color: #aebccd;
font-size: 13px;
line-height: 1.25;
}

.planMinimumPayment strong {
color: #fff;
font-size: 15px;
line-height: 1.3;
font-variant-numeric: tabular-nums;
}

.planCard > a {
margin-top: auto;
min-height: 50px;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #2a3a52;
font-size: 14px;
font-weight: 750;
}

.planCard > a span {
color: var(--lime);
}

.howSection {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: 90px;
align-items: start;
}

.steps {
margin: 0;
padding: 0;
list-style: none;
}

.steps li {
padding: 28px 0;
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 22px;
border-top: 1px solid var(--line);
}

.steps > li > span {
color: var(--blue);
font: 900 11px/1 var(--font-mono);
}

.steps h3 {
margin: 0 0 8px;
font-size: 18px;
}

.steps p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}

.faqSection {
border-top: 1px solid var(--line);
}

.faqList {
max-width: 900px;
margin-top: 46px;
}

.faqList details {
border-top: 1px solid var(--line);
}

.faqList details:last-child {
border-bottom: 1px solid var(--line);
}

.faqList summary {
padding: 25px 0;
display: flex;
justify-content: space-between;
gap: 30px;
cursor: pointer;
list-style: none;
font-size: 17px;
font-weight: 750;
}

.faqList summary::-webkit-details-marker {
display: none;
}

.faqList summary .faqToggle {
color: var(--blue);
font-size: 24px;
font-weight: 400;
transition: transform 0.2s;
}

.faqList details[open] summary .faqToggle {
transform: rotate(45deg);
}

.faqList details p {
max-width: 760px;
margin: -5px 0 26px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}

.requestSection {
padding: 88px max(20px, calc((100% - 1240px) / 2));
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 100px;
align-items: center;
background: var(--blue);
color: #fff;
}

.requestSection>*{min-width:0}

.requestSection h2{max-width:700px;margin:0;font-size:clamp(42px,5.2vw,72px);line-height:.96;letter-spacing:-.05em;overflow-wrap:anywhere}

.requestCard {
padding: 30px;
border-radius: 18px;
background: #fff;
color: var(--ink);
box-shadow: 0 26px 70px rgba(4, 33, 92, 0.22);
}

.requestCard > p {
margin: 0 0 17px;
font-weight: 750;
}

.requestCard ul {
padding: 0;
margin: 0 0 25px;
list-style: none;
color: var(--muted);
font-size: 13px;
}

.requestCard li {
padding: 9px 0;
border-bottom: 1px solid var(--line);
}

.requestCard li::before {
content: "✓";
margin-right: 9px;
color: var(--blue);
font-weight: 750;
}

.disabledAction {
display: block;
padding: 15px;
border-radius: 10px;
background: #edf1f5;
color: #758295;
text-align: center;
font-size: 12px;
font-weight: 750;
}

.siteFooter {
padding: 44px max(28px, calc((100% - 1240px) / 2)) 22px;
background: var(--ink);
color: #9eacbd;
}

.footerTop {
padding-bottom: 34px;
display: grid;
grid-template-columns: minmax(300px, 1.2fr) repeat(3, minmax(160px, 0.72fr));
gap: 32px;
align-items: start;
}

.footerIntro {
max-width: 360px;
}

.footerBrand {
gap: 12px;
color: #fff;
font-size: 24px;
}

.footerBrand .brandMark {
width: 40px;
height: 40px;
border: 1px solid #35506e;
border-radius: 12px;
background: #10283b;
font-size: 18px;
}

.footerIntro p {
margin: 18px 0 17px;
color: #aab8c9;
font-size: 16px;
line-height: 1.55;
}

.footerDomain {
color: var(--lime);
font: 750 14px/1 var(--font-mono);
}

.footerPayments {
margin-top: 26px;
}

.footerPayments > strong {
display: block;
margin-bottom: 12px;
color: #fff;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.footerPayments > div {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.footerPayments span {
min-height: 36px;
padding: 8px 12px;
display: inline-flex;
align-items: center;
border: 1px solid #35506e;
border-radius: 999px;
background: rgba(255, 255, 255, 0.025);
color: #c0ccda;
font-size: 13px;
font-weight: 650;
}

.footerColumn {
padding-left: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
border-left: 1px solid #203149;
}

.footerColumn h3 {
margin: 3px 0 16px;
color: #fff;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.06em;
}

.footerColumn a {
min-height: 40px;
display: inline-flex;
align-items: center;
color: #b0bdcd;
font-size: 16px;
font-weight: 600;
line-height: 1.35;
transition: color 0.2s;
}

.footerColumn a:hover {
color: #fff;
}

.footerBottom {
min-height: 68px;
display: grid;
grid-template-columns: 1fr auto auto;
gap: 28px;
align-items: center;
border-top: 1px solid #203149;
color: #a6b4c6;
font-size: 13px;
}

.footerBottom a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: #fff;
font-weight: 700;
}

.errorPage {
min-height: 100vh;
padding: 0 max(20px, calc((100% - 1240px) / 2));
display: grid;
grid-template-rows: auto 1fr;
}

.errorHeader {
min-height: 82px;
display: flex;
justify-content: space-between;
align-items: center;
}

.errorContent {
max-width: 760px;
padding: 80px 0 140px;
align-self: center;
}

.errorCode {
margin: 0 0 22px;
color: var(--blue);
font: 900 14px/1 var(--font-mono);
letter-spacing: 0.16em;
}

.errorContent h1 {
max-width: none;
}

.errorContent > p:not(.errorCode):not(.eyebrow) {
max-width: 590px;
margin: 28px 0 34px;
color: var(--muted);
font-size: 18px;
line-height: 1.65;
}

.errorContent > .eyebrow {
margin-bottom: 18px;
font-size: 11px;
}

.errorOptions {
margin-top: 52px;
padding-top: 30px;
border-top: 1px solid var(--line);
}

.errorContactLink {
margin-left: 22px;
}

.errorOptions h2 {
margin: 0 0 18px;
font-size: 24px;
letter-spacing: -0.04em;
}

.errorOptions > div {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}

.errorOptions a {
min-height: 132px;
padding: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px 12px;
align-content: start;
border: 1px solid var(--line);
border-radius: 13px;
background: var(--white);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.errorOptions a:hover,
.errorOptions a:focus-visible {
border-color: #aac2ed;
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(8, 24, 36, 0.07);
}

.errorOptions strong {
font-size: 15px;
}

.errorOptions span {
grid-column: 1 / -1;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}

.errorOptions b {
color: var(--blue);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid var(--lime);
outline-offset: 4px;
border-radius: 6px;
}

.serviceHero {
position: relative;
overflow: clip;
width: min(1240px, calc(100% - 40px));
min-height: 0;
margin: 0 auto;
padding: 52px 0 58px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
gap: 64px;
align-items: center;
border-top: 1px solid var(--line);
}

.serviceHero::before {
content: none;
}

.serviceHero h1 {
max-width: 760px;
font-size: clamp(42px, 4.3vw, 62px);
}

.serviceHero .breadcrumbs {
margin-bottom: 30px;
}

.breadcrumbs {
margin-bottom: 42px;
display: flex;
flex-wrap: wrap;
gap: 8px;
color: var(--muted);
font-size: 11px;
font-weight: 700;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
color: var(--blue);
}

.breadcrumbs a {
min-height: 28px;
display: inline-flex;
align-items: center;
}

.breadcrumbItem {
display: inline-flex;
}

.htmlTrackingPixel {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}

.htmlContactDock {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 20;
display: flex;
gap: 8px;
}

.htmlContactDock a {
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
background: #0b1a2c;
color: #fff;
box-shadow: 0 12px 32px rgba(8, 24, 36, 0.22);
font-size: 13px;
font-weight: 700;
}

.htmlContactDock a:hover,
.htmlContactDock a:focus-visible {
border-color: var(--blue);
background: #10243b;
}

.serviceHeroPoints {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 9px;
}

.serviceHeroPoints span {
padding: 9px 12px;
border: 1px solid #cdd9e7;
border-radius: 999px;
background: rgba(255, 255, 255, 0.65);
color: #405167;
font-size: 11px;
font-weight: 700;
}

.servicePricePanel {
position: relative;
overflow: hidden;
padding: 31px;
border: 1px solid #203451;
border-radius: 22px;
background:
  linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
  var(--ink);
background-size: 30px 30px;
color: #fff;
box-shadow: 0 28px 64px rgba(8, 24, 36, 0.2);
}

.servicePricePanel::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
top: -115px;
right: -70px;
border-radius: 50%;
background: var(--blue);
filter: blur(42px);
opacity: 0.42;
}

.servicePriceTop {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--lime);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}

.servicePriceTop > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid #33465f;
border-radius: 10px;
color: #fff;
}

.servicePricePanel > p {
margin: 42px 0 10px;
color: #8fa0b6;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.servicePricePanel > strong {
display: block;
font-size: clamp(36px, 4vw, 52px);
letter-spacing: -0.06em;
}

.servicePricePanel > span {
display: block;
margin-top: 9px;
color: #aab7c7;
font-size: 13px;
line-height: 1.6;
}

.servicePricePanel ul {
margin: 29px 0;
padding: 0;
list-style: none;
color: #d6deea;
font-size: 13px;
}

.servicePricePanel li {
padding: 11px 0;
border-top: 1px solid #243650;
}

.servicePricePanel li::before {
content: "✓";
margin-right: 10px;
color: var(--lime);
font-weight: 750;
}

.servicePricePanel small {
display: block;
padding-top: 19px;
border-top: 1px solid #243650;
color: #7f90a6;
font-size: 12px;
line-height: 1.55;
}

.serverServiceHero {
padding: 22px 0 24px;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}

.serverServiceHero .serviceHeroCopy {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
column-gap: 64px;
align-items: end;
}

.serverServiceHero .breadcrumbs {
margin-bottom: 14px;
grid-column: 1 / -1;
}

.serverServiceHero .eyebrow,
.serverServiceHero h1 {
grid-column: 1;
}

.serverServiceHero h1 {
max-width: 680px;
margin-top: 16px;
font-size: clamp(40px, 4vw, 54px);
}

main[lang="en"] .serverServiceHero h1 {
font-size: clamp(40px, 4vw, 54px);
}

.serverServiceHero .heroLead {
max-width: 500px;
margin: 0;
grid-column: 2;
grid-row: 2 / span 2;
align-self: center;
}

.serverServiceHero .heroActions {
margin-top: 18px;
grid-column: 2;
}

.serverServiceHero + .servicePlansSection {
padding-top: 26px;
}

.serverServiceHero + .servicePlansSection .sectionHeading h2 {
font-size: clamp(24px, 2.5vw, 32px);
}

.serverServiceHero + .servicePlansSection .splitHeading {
align-items: end;
}

.serverPlansHeading {
display: block;
}

.serviceAdvantages {
border-top: 1px solid var(--line);
}

.uspGrid,
.fitGrid {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.uspCard {
min-height: 235px;
padding: 24px;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--white);
}

.uspCard > span {
color: var(--blue);
font: 900 11px/1 var(--font-mono);
}

.uspCard h3,
.bonusCard h3,
.fitGrid h3 {
margin: 32px 0 12px;
font-size: 20px;
letter-spacing: -0.03em;
}

.uspCard p,
.bonusCard p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.65;
}

.fitGrid p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}

.servicePlansSection {
overflow: hidden;
}

.servicePlanGridCount1 {
width: min(100%, 595px);
margin-right: auto;
margin-left: auto;
grid-template-columns: minmax(0, 1fr);
}

.servicePlanGridCount2 {
max-width: 830px;
margin-right: auto;
margin-left: auto;
grid-template-columns: repeat(2, 1fr);
}

.servicePlanGridCount4,
.servicePlanGridCount8 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.subnetPricing {
margin-top: 30px;
padding-top: 28px;
border-top: 1px solid #2d425e;
}

.subnetPricingHeader {
display: grid;
grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
gap: 48px;
align-items: end;
}

.subnetPricingEyebrow {
margin: 0 0 10px;
color: var(--lime);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
}

.subnetPricingHeader h3 {
margin: 0;
font-size: clamp(26px, 2.5vw, 34px);
line-height: 1.08;
letter-spacing: -0.04em;
}

.subnetPricingHeader > p {
max-width: 650px;
margin: 0;
color: #b4c0cf;
font-size: 15px;
line-height: 1.55;
}

.subnetTableGrid {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.subnetTableCard {
overflow: hidden;
border: 1px solid #2d425e;
border-radius: 14px;
background: var(--ink-2);
}

.subnetTable {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

.subnetTableTerms {
padding: 11px 13px;
caption-side: top;
text-align: left;
border-bottom: 1px solid #243750;
background: #0d2034;
}

.subnetTableTermsInner {
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.subnetTableTerm {
min-height: 30px;
padding: 0 10px;
display: inline-flex;
align-items: center;
border: 1px solid #314863;
border-radius: 999px;
color: #eef4fb;
font-size: 11px;
font-weight: 750;
line-height: 1.2;
}

.subnetTable th,
.subnetTable td {
text-align: left;
}

.subnetTable thead th {
padding: 11px 15px;
color: #8fa0b5;
font: 800 10px/1.2 var(--font-mono);
letter-spacing: 0.055em;
text-transform: uppercase;
}

.subnetTable thead th:first-child {
width: 25%;
}

.subnetTable thead th:nth-child(2) {
width: 34%;
}

.subnetTable thead th:nth-child(3) {
width: 41%;
}

.subnetTable tbody th,
.subnetTable tbody td {
padding: 11px 15px;
border-top: 1px solid #243750;
vertical-align: middle;
}

.subnetCidr strong {
display: block;
font-size: 19px;
line-height: 1.1;
letter-spacing: -0.02em;
}

.subnetCidr small {
display: block;
margin-top: 4px;
color: #91a1b5;
font-size: 11px;
font-weight: 650;
line-height: 1.2;
}

.subnetMonthlyPrice {
display: inline-flex;
align-items: baseline;
gap: 3px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}

.subnetMonthlyPrice b {
font-size: 16px;
}

.subnetMonthlyPrice strong {
font-size: 22px;
line-height: 1;
letter-spacing: -0.025em;
}

.subnetMonthlyPrice small {
margin-left: 2px;
color: #9eacc0;
font-size: 11px;
font-weight: 700;
}

.subnetOrderHeading,
.subnetOrderCell {
text-align: right !important;
}

.subnetOrderAction {
width: 100%;
min-height: 44px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--blue);
color: var(--white);
font-size: 13px;
font-weight: 850;
line-height: 1;
text-decoration: none;
transition: background-color 160ms ease, transform 160ms ease;
}

.subnetOrderAction:hover,
.subnetOrderAction:focus-visible {
background: #2b6bff;
transform: translateY(-1px);
}

.serviceLocationPanel {
margin-top: 48px;
padding: 25px;
display: grid;
grid-template-columns: minmax(210px, 0.8fr) minmax(300px, 1.4fr) auto;
gap: 26px;
align-items: center;
border: 1px solid #2b405d;
border-radius: 17px;
background: #0a1829;
}

.serviceLocationCopy small {
color: var(--lime);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.09em;
text-transform: uppercase;
}

.serviceLocationCopy h3 {
margin: 9px 0 8px;
color: var(--white);
font-size: 22px;
letter-spacing: -0.035em;
}

.serviceLocationCopy p {
margin: 0;
color: #aab7c7;
font-size: 13px;
line-height: 1.55;
}

.locationTagList {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
}

.locationTagList li {
padding: 9px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: #405167;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}

.serviceLocationPanel .locationTagList li {
border-color: #344b69;
background: #10243b;
color: #e0e7f1;
}

.serviceLocationPanel > a {
min-height: 44px;
padding: 0 15px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #3b536f;
border-radius: 10px;
color: var(--white);
font-size: 11px;
font-weight: 750;
text-align: center;
}

.serviceLocationPanel > a span {
margin-left: 8px;
color: var(--lime);
}

.serviceLocationPanel > a:hover,
.serviceLocationPanel > a:focus-visible {
border-color: var(--lime);
background: #10243b;
}

.serverCatalog {
margin-top: 18px;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
align-items: start;
}

.serverFilterPanel {
position: static;
border: 1px solid #29405e;
border-radius: 18px;
background: #0a1829;
overflow: clip;
}

.serverCatalog:has(> .serverFilterPanel:not([open])) {
grid-template-columns: minmax(0, 1fr);
}

.serverCatalog:has(> .serverFilterPanel:not([open])) .serverResults {
grid-column: 1;
}

.serverFilters {
padding: 16px 18px 18px;
}

.serverFiltersHeading {
min-height: 44px;
padding: 12px 16px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
border-bottom: 1px solid #243650;
cursor: pointer;
list-style: none;
}

.serverFiltersHeading::-webkit-details-marker {
display: none;
}

.serverFiltersHeading::marker {
content: "";
}

.serverFilterHeadingCopy {
display: grid;
gap: 7px;
}

.serverFilterTitle,
.serverResultsHeading h3 {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.035em;
}

.serverFilterText {
color: #94a4b9;
font-size: 13px;
line-height: 1.5;
}

.serverFilterHeadingMeta {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: space-between;
}

.serverFilterToggle {
min-height: 44px;
padding: 0 12px;
display: inline-flex;
gap: 10px;
align-items: center;
border: 1px solid #3b536f;
border-radius: 10px;
color: #e4ebf4;
font-size: 13px;
font-weight: 700;
}

.serverFilterToggle::after {
content: "−";
color: var(--lime);
font-size: 18px;
line-height: 1;
}

.serverFilterToggleShow {
display: none;
}

.serverFilterPanel:not([open]) {
position: static;
}

.serverFilterPanel:not([open]) .serverFiltersHeading {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
border-bottom: 0;
}

.serverFilterPanel:not([open]) .serverFilterText,
.serverFilterPanel:not([open]) .serverFilterToggleHide {
display: none;
}

.serverFilterPanel:not([open]) .serverFilterHeadingMeta {
justify-content: flex-end;
}

.serverFilterPanel:not([open]) .serverFilterToggleShow {
display: inline;
}

.serverFilterPanel:not([open]) .serverFilterToggle::after {
content: "+";
}

.serverFilterFields {
margin: 0;
padding: 12px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 10px;
border: 0;
}

.serverFilterFields + .serverFilterFields {
margin-top: 14px;
border-top: 1px solid #243650;
}

.serverFilterFields legend {
width: auto;
height: auto;
padding: 0;
color: #91a2b7;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.serverFilterFields label {
display: grid;
gap: 6px;
}

.serverFilterFields label > span {
color: #d8e1ed;
font-size: 13px;
font-weight: 700;
}

.serverFilterFields select {
width: 100%;
min-height: 44px;
padding: 0 12px;
border: 1px solid #304765;
border-radius: 9px;
background: #10223a;
color: #fff;
font-size: 14px;
cursor: pointer;
}

.serverFilterFields select:hover {
border-color: #597391;
}

.serverFilterActions {
margin-top: 18px;
display: grid;
grid-template-columns: minmax(180px, 240px) minmax(140px, 200px);
gap: 10px;
}

.serverFilterActions button {
min-height: 44px;
padding: 0 16px;
border: 0;
border-radius: 10px;
background: var(--blue);
color: #fff;
font-size: 14px;
font-weight: 750;
cursor: pointer;
box-shadow: 0 12px 28px rgba(35, 85, 223, 0.18);
}

.serverFilterActions button:hover {
background: var(--blue-dark);
}

.serverFilterActions a {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: #aab7c7;
font-size: 13px;
font-weight: 700;
text-align: center;
}

.serverFilterActions a:hover,
.serverFilterActions a:focus-visible {
color: #fff;
}

.serverResults {
min-width: 0;
}

.serverResultsHeading {
min-height: 32px;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}

.serverResultsHeading > strong {
flex: 0 0 auto;
color: #9dacbf;
font-size: 13px;
line-height: 26px;
}

.serverResultsHeading > strong span {
margin-right: 3px;
color: #fff;
font-size: 18px;
}

.serverActiveFilters {
min-height: 31px;
margin: 17px 0 13px;
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
}

.serverActiveFilters > span,
.serverActiveFilters > b {
padding: 7px 10px;
border: 1px solid #2c425e;
border-radius: 999px;
color: #9dacbf;
font-size: 12px;
line-height: 1;
}

.serverActiveFilters > b span {
color: #91a2b7;
font-weight: 650;
}

.serverActiveFilters > b {
border-color: #3f5d7f;
background: #112640;
color: #e1e8f2;
}

.serverList {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 11px;
}

.serverCard {
padding: 16px;
border: 1px solid #243650;
border-radius: 16px;
background: var(--ink-2);
transition: border-color 0.2s, transform 0.2s;
}

.serverCard:hover {
border-color: #3b5577;
transform: translateY(-2px);
}

.serverCard > header {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
}

.serverCard > header span {
color: var(--lime);
font: 800 12px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}

.serverCard > header h4 {
margin: 9px 0 0;
font-size: 19px;
letter-spacing: -0.025em;
}

.serverCardPrice {
margin-top: 12px;
min-height: 50px;
padding: 8px 10px;
display: flex;
flex-wrap: wrap;
gap: 6px 7px;
align-items: baseline;
border: 1px solid #2d4665;
border-radius: 11px;
background: #0b1b2f;
}

.serverPriceLabel,
.serverPricePeriod {
color: #8fa0b6;
font-size: 13px;
font-weight: 700;
}

.serverCardPrice .serverPrice {
color: #fff;
font-size: 28px;
font-weight: 750;
line-height: 1;
letter-spacing: 0;
}

.serverSpecs {
margin: 12px 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid #243650;
border-radius: 11px;
overflow: hidden;
}

.serverSpecs > div {
min-width: 0;
padding: 10px;
border-right: 1px solid #243650;
border-bottom: 1px solid #243650;
}

.serverSpecs > div:nth-child(3n) {
border-right: 0;
}

.serverSpecs > div:nth-last-child(-n + 3) {
border-bottom: 0;
}

.serverSpecs dt {
margin-bottom: 5px;
color: #7f90a6;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}

.serverSpecs dd {
margin: 0;
overflow-wrap: anywhere;
color: #edf2f8;
font-size: 14px;
font-weight: 700;
}

.serverAvailability {
margin: 10px 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid #2d4665;
border-radius: 11px;
background: #0b1b2f;
}

.serverAvailability > div {
min-width: 0;
padding: 9px 10px;
border-right: 1px solid #2d4665;
border-bottom: 1px solid #2d4665;
}

.serverAvailability > div:nth-child(2n) {
border-right: 0;
}

.serverAvailability > div:nth-last-child(-n + 2) {
border-bottom: 0;
}

.serverAvailability dt,
.serverAvailability dd {
margin: 0;
}

.serverAvailability dt {
margin-bottom: 4px;
color: #7f90a6;
font-size: 12px;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.serverAvailability dd {
color: #eef3f8;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}

.serverAvailability dd strong {
color: var(--lime);
font-size: 17px;
}

.serverBandwidthHint {
position: relative;
display: inline-flex;
gap: 6px;
align-items: center;
cursor: help;
}

.serverBandwidthHint i {
width: 17px;
height: 17px;
display: inline-grid;
place-items: center;
border: 1px solid #4a6484;
border-radius: 50%;
color: var(--lime);
font-size: 10px;
font-style: normal;
}

.serverBandwidthHint::after {
content: attr(data-tooltip);
position: absolute;
z-index: 8;
left: 0;
bottom: calc(100% + 10px);
width: min(280px, 72vw);
padding: 10px 12px;
border: 1px solid #49627f;
border-radius: 9px;
background: #071424;
color: #edf3fa;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
font-size: 12px;
font-weight: 600;
line-height: 1.45;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 0.16s, transform 0.16s;
}

.serverBandwidthHint:hover::after,
.serverBandwidthHint:focus-visible::after {
opacity: 1;
transform: translateY(0);
}

.serverCardFooter {
margin-top: 12px;
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-end;
}

.serverCardFooter small {
display: block;
margin-bottom: 8px;
color: #8394aa;
font-size: 14px;
line-height: 1.45;
}

.serverSetup {
display: block;
margin-bottom: 8px;
color: var(--lime);
font-size: 13px;
font-weight: 700;
}

.serverTermPrice {
flex: 1 0 100%;
margin-top: 0;
color: #8394aa;
font-size: 11px;
font-style: normal;
}

.serverCardActions {
flex: 0 0 auto;
display: flex;
gap: 8px;
align-items: center;
}

.serverCardActions > a {
min-height: 44px;
padding: 0 14px;
display: inline-flex;
gap: 14px;
align-items: center;
justify-content: space-between;
border: 1px solid #385273;
border-radius: 9px;
color: #fff;
font-size: 14px;
font-weight: 750;
}

.serverCardActions > a:hover,
.serverCardActions > a:focus-visible {
border-color: var(--lime);
}

.serverCardActions .serverConfigureLink {
color: #aebed1;
}

.serverCardActions .serverOrderAction {
border-color: var(--blue);
background: var(--blue);
}

.serverCardActions .serverOrderAction:hover,
.serverCardActions .serverOrderAction:focus-visible {
border-color: var(--lime);
}

.serverCardActions > a span {
color: var(--lime);
}

.serverLocationsPanel {
margin-top: 22px;
padding: 0 20px;
border: 1px solid #2a405c;
border-radius: 14px;
background: #0b1b2e;
}

.serverLocationsPanel summary {
min-height: 72px;
display: flex;
gap: 24px;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
}

.serverLocationsPanel summary::-webkit-details-marker {
display: none;
}

.serverLocationsPanel summary > span {
display: grid;
gap: 5px;
}

.serverLocationsPanel summary strong {
color: #fff;
font-size: 17px;
}

.serverLocationsPanel summary small {
color: #91a1b5;
font-size: 14px;
}

.serverLocationsPanel summary > b,
.serverLocationsPanel > a {
color: var(--lime);
font-size: 14px;
}

.serverLocationsPanel[open] {
padding-bottom: 20px;
}

.serverLocationsPanel > .locationTagList {
padding-top: 18px;
border-top: 1px solid #263b56;
}

.serverLocationsPanel > a {
min-height: 44px;
margin-top: 12px;
display: inline-flex;
gap: 8px;
align-items: center;
font-weight: 700;
}

.serverEmptyState {
min-height: 210px;
padding: 28px;
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
border: 1px dashed #3d5574;
border-radius: 16px;
background: var(--ink-2);
}

.serverEmptyState > span {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border: 1px solid #3f5878;
border-radius: 14px;
color: var(--lime);
font: 900 17px/1 var(--font-mono);
}

.serverEmptyState h4 {
margin: 0 0 9px;
font-size: 19px;
}

.serverEmptyState p {
max-width: 510px;
margin: 0;
color: #95a5b9;
font-size: 13px;
line-height: 1.6;
}

.serverEmptyState > a {
padding: 12px 14px;
border: 1px solid #3b5577;
border-radius: 9px;
font-size: 13px;
font-weight: 750;
}

.bonusesSection {
border-top: 0;
}

.bonusGrid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}

.bonusCard {
position: relative;
min-height: 285px;
padding: 26px;
border-radius: 17px;
background: #eaf1ff;
}

.bonusCard > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--blue);
color: #fff;
font-size: 25px;
font-weight: 400;
}

.bonusCard > small {
position: absolute;
top: 31px;
right: 27px;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
}

.bonusCard h3 {
margin-top: 48px;
}

.fitSection {
border-top: 1px solid var(--line);
}

.paymentSection {
border-top: 1px solid var(--line);
background:
  radial-gradient(circle at 92% 12%, rgba(183, 243, 74, 0.2), transparent 22%),
  #eaf1ff;
}

.paymentHeading > p {
max-width: 540px;
}

.paymentGrid {
margin-top: 24px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.paymentCard {
min-height: 0;
padding: 20px;
display: flex;
flex-direction: column;
border: 1px solid #cbd8ec;
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
box-shadow: none;
}

.paymentCardTop {
display: flex;
justify-content: space-between;
align-items: center;
}

.paymentCardTop > span {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--ink);
color: var(--lime);
font: 900 12px/1 var(--font-mono);
}

.paymentCardTop > small {
color: var(--blue);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
}

.paymentCard h3 {
margin: 18px 0 10px;
font-size: 22px;
}

.paymentCard p {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 1.5;
}

.paymentBottom {
margin-top: 14px;
display: flex;
justify-content: flex-end;
}

.paymentBottom .button {
min-width: 190px;
}

.fitGrid article {
min-height: 0;
padding: 22px 0 8px;
border-top: 3px solid var(--ink);
}

.fitGrid h3 {
margin-top: 0;
}

.serviceFaqSection .faqList {
max-width: 980px;
}

.requestLead {
max-width: 650px;
margin: 25px 0 0;
color: #dbe7ff;
font-size: 15px;
line-height: 1.7;
}

.dcStatusPanel {
position: relative;
overflow: hidden;
padding: 31px;
border: 1px solid #203451;
border-radius: 22px;
background:
  linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
  var(--ink);
background-size: 30px 30px;
color: #fff;
box-shadow: 0 28px 64px rgba(8, 24, 36, 0.2);
}

.dcStatusPanel::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
top: -125px;
right: -75px;
border-radius: 50%;
background: var(--blue);
filter: blur(44px);
opacity: 0.42;
}

.dcStatusPanel > p {
margin: 43px 0 19px;
color: #8fa0b6;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.dcStatusList {
border-top: 1px solid #243650;
}

.dcStatusList > div {
min-height: 82px;
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 16px;
align-items: center;
border-bottom: 1px solid #243650;
}

.dcStatusList strong {
color: var(--lime);
font-size: 30px;
letter-spacing: -0.05em;
}

.dcStatusList span {
color: #aab7c7;
font-size: 12px;
line-height: 1.45;
}

.locationsSection {
border-top: 1px solid var(--line);
}

.serviceLocationGrid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.serviceLocationCard {
min-width: 0;
padding: 28px;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--white);
}

.serviceLocationCard[data-service-locations="servers"] {
grid-column: 1 / -1;
}

.serviceLocationCardTop {
display: flex;
justify-content: space-between;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
}

.serviceLocationCardTop b {
color: var(--muted);
}

.serviceLocationCard h3 {
margin: 29px 0 8px;
font-size: 25px;
letter-spacing: -0.04em;
}

.serviceLocationCard > p {
max-width: 680px;
margin: 0 0 24px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}

.serviceLocationCard .locationTagList {
margin-bottom: 26px;
}

.serviceLocationCard .locationTagList li {
display: inline-flex;
gap: 7px;
align-items: center;
}

.serviceLocationCard .locationTagList li b {
padding: 4px 6px;
border-radius: 999px;
background: var(--ink);
color: var(--lime);
font-size: 9px;
font-weight: 750;
}

.serviceLocationCard > a {
min-height: 44px;
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--line);
color: var(--ink);
font-size: 12px;
font-weight: 750;
}

.serviceLocationCard > a span {
color: var(--blue);
}

.locationScopeNote {
margin-top: 16px;
padding: 20px 22px;
display: grid;
grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
gap: 26px;
border: 1px solid #c9d6e4;
border-radius: 14px;
background: #eaf0f6;
}

.locationScopeNote strong {
font-size: 14px;
}

.locationScopeNote p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}

.locationOwnershipNote {
margin-top: 12px;
padding: 20px 22px;
display: grid;
grid-template-columns: minmax(140px, 0.3fr) minmax(0, 1fr);
gap: 26px;
border: 1px solid #29415e;
border-radius: 14px;
background: var(--ink);
color: #fff;
}

.locationOwnershipNote > span {
color: var(--lime);
font: 800 11px/1.4 var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}

.locationOwnershipNote strong {
font-size: 16px;
}

.locationOwnershipNote p {
margin: 7px 0 0;
color: #a7b5c6;
font-size: 13px;
line-height: 1.55;
}

.dcGrid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.dcCard {
padding: 28px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--white);
}

.dcCardTop {
display: flex;
justify-content: space-between;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
text-transform: uppercase;
}

.dcCard h3 {
margin: 32px 0 7px;
font-size: 28px;
letter-spacing: -0.045em;
}

.dcCard > p {
margin: 0 0 28px;
color: var(--muted);
font-size: 13px;
}

.dcCard dl,
.dcCard dt,
.dcCard dd {
margin: 0;
}

.dcCard dl > div {
padding: 13px 0;
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 18px;
border-top: 1px solid var(--line);
}

.dcCard dt {
color: var(--muted);
font-size: 11px;
font-weight: 700;
}

.dcCard dd {
font-size: 12px;
font-weight: 700;
}

.configuratorHero h1 {
max-width: 850px;
}

.configuratorStatus .dcStatusList strong {
font-size: 18px;
letter-spacing: 0;
}

.platformForm {
margin: 0;
padding: 18px 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px 16px;
align-items: end;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: #f8fafc;
box-shadow: none;
}

.platformForm > .platformSelectField {
grid-column: 1 / -1;
}

.platformFleetFields {
min-width: 0;
display: grid;
grid-template-columns: minmax(90px, 0.7fr) minmax(120px, 1fr) minmax(140px, 1.2fr);
gap: 10px;
}

.platformSelectField {
min-width: 0;
display: grid;
gap: 8px;
}

.platformQuantityField {
min-width: 0;
display: grid;
gap: 8px;
}

.platformQuantityField > span,
.platformQuantityField small {
color: var(--muted);
font-size: 12px;
font-weight: 750;
}

.platformQuantityField input {
width: 100%;
min-height: 52px;
padding: 0 14px;
border: 1px solid #b9c8d8;
border-radius: 10px;
background: #f7f9fb;
color: var(--ink);
font: inherit;
font-size: 16px;
font-weight: 750;
}

.platformQuantityField small {
font-size: 10px;
line-height: 1.3;
}

.platformSelectField > span {
color: var(--muted);
font-size: 12px;
font-weight: 750;
}

.platformSelectField select {
width: 100%;
min-height: 52px;
padding: 0 14px;
border: 1px solid #b9c8d8;
border-radius: 10px;
background: #f7f9fb;
color: var(--ink);
font: inherit;
font-size: 15px;
font-weight: 650;
cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s;
}

.platformSelectField select:hover {
border-color: #879db5;
}

.platformSelectField select:focus-visible {
outline: 3px solid rgba(35, 85, 223, 0.18);
outline-offset: 2px;
border-color: var(--blue);
}

.platformSelectedSummary {
grid-column: 1 / -1;
padding-top: 12px;
display: flex;
gap: 14px;
align-items: center;
border-top: 1px solid var(--line);
}

.platformSelectedSummary > span {
flex: 0 0 auto;
min-width: 64px;
min-height: 32px;
padding: 0 10px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 999px;
background: #eaf1ff;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
}

.platformSelectedSummary p {
max-width: 760px;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}

.platformFormActions {
margin: 0;
min-width: 0;
display: flex;
gap: 24px;
align-items: center;
}

.platformForm .platformFormActions button {
min-height: 52px;
padding: 0 16px;
gap: 12px;
font-size: 14px;
}

.platformFormActions button,
.configSubmit button {
min-height: 50px;
padding: 0 20px;
display: inline-flex;
justify-content: space-between;
gap: 28px;
align-items: center;
border: 0;
border-radius: 10px;
background: var(--blue);
color: #fff;
font-size: 13px;
font-weight: 750;
cursor: pointer;
box-shadow: 0 12px 28px rgba(35, 85, 223, 0.18);
}

.platformFormActions button:hover,
.configSubmit button:hover {
background: var(--blue-dark);
}

.configSubmit button:disabled,
.configSubmit button[aria-disabled="true"] {
background: #617086;
box-shadow: none;
cursor: not-allowed;
}

.configSubmit button:disabled span,
.configSubmit button[aria-disabled="true"] span {
color: var(--white);
}

.platformFormActions button span,
.configSubmit button span {
color: var(--lime);
}

.configuratorSection {
width: 100%;
padding: 48px max(20px, calc((100% - 1240px) / 2)) 56px;
background: var(--ink);
color: #fff;
}

.configuratorSectionInner {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}

.configuratorHeading > p {
color: #9eacbd;
}

.configuratorHeading h2 {
max-width: 760px;
font-size: clamp(36px, 3.7vw, 52px);
}

.configuratorHero {
min-height: 0;
padding-top: 46px;
padding-bottom: 54px;
grid-template-columns: minmax(0, 860px);
}

.configuratorHero .serviceHeroPoints {
margin-top: 24px;
}

.configuratorHeading .eyebrow {
margin-bottom: 14px;
}

.configAlert {
margin-top: 26px;
padding: 18px 20px;
display: flex;
justify-content: space-between;
gap: 28px;
align-items: flex-start;
border: 1px solid #35506f;
border-radius: 13px;
background: #10223a;
color: #dbe5f1;
}

.configAlert > strong,
.configAlert > div > strong {
flex: 0 0 auto;
color: #fff;
font-size: 12px;
}

.configAlert p {
margin: 0;
color: #aab8c9;
font-size: 12px;
line-height: 1.55;
}

.configAlertPreview {
border-color: #546231;
background: rgba(183, 243, 74, 0.06);
}

.configAlertPreview > strong {
color: var(--lime);
font: 900 10px/1.4 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}

.configAlertSuccess {
border-color: #4a743b;
background: rgba(183, 243, 74, 0.08);
}

.configAlertSuccess > span {
flex: 0 0 auto;
color: #b9c7d7;
font-size: 11px;
}

.configAlertSuccess > span b {
color: var(--lime);
font-family: var(--font-mono);
}

.configAlertError {
display: block;
border-color: #8c4252;
background: rgba(194, 63, 86, 0.11);
}

.configAlertError ul {
margin: 10px 0 0;
padding-left: 20px;
color: #e0bac2;
font-size: 12px;
line-height: 1.65;
}

.configuratorWorkspace {
margin-top: 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 18px;
align-items: start;
}

.configuratorMain {
overflow: hidden;
border: 1px solid #2d4564;
border-radius: 18px;
background: var(--white);
}

.configuratorForm {
position: relative;
overflow: hidden;
padding: 20px 24px 24px;
border-radius: 0;
background: var(--white);
color: var(--ink);
}

.hpField {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}

.configFieldset {
margin: 0;
padding: 18px 0;
border: 0;
border-bottom: 1px solid var(--line);
}

.configuratorForm .configFieldset:first-of-type {
padding-top: 0;
}

.configFieldset > legend {
width: 100%;
margin: 0 0 15px;
padding: 0;
font-size: 18px;
font-weight: 750;
letter-spacing: -0.02em;
}

.configFieldGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
}

.configFieldGridThree {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.configFieldGridThree > .configFieldWide {
grid-column: 1 / -1;
}

.configFieldGrid label,
.storageConfigCard label,
.notesField,
.configStaticField {
min-width: 0;
display: grid;
gap: 7px;
}

.configFieldGrid label > span,
.storageConfigCard label > span,
.notesField > span,
.configStaticField > span {
color: var(--muted);
font-size: 13px;
font-weight: 750;
}

.configStaticField {
min-height: 46px;
padding: 8px 12px;
align-content: center;
border: 1px solid #cfd9e4;
border-radius: 9px;
background: #f7f9fb;
}

.configStaticField strong {
font-size: 15px;
}

.configFieldGrid select,
.configFieldGrid input,
.storageConfigCard select,
.notesField textarea {
width: 100%;
min-height: 46px;
padding: 0 12px;
border: 1px solid #cfd9e4;
border-radius: 9px;
background: #f7f9fb;
color: var(--ink);
font-size: 15px;
}

.notesField textarea {
min-height: 92px;
padding-top: 12px;
padding-bottom: 12px;
resize: vertical;
line-height: 1.5;
}

.configFieldGrid select:hover,
.configFieldGrid input:hover,
.storageConfigCard select:hover,
.notesField textarea:hover {
border-color: #9dafc2;
}

.storageConfigGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 11px;
}

.storageConfigCard {
padding: 15px;
display: grid;
gap: 13px;
border: 1px solid var(--line);
border-radius: 12px;
background: #f5f8fb;
}

.storageConfigCard > strong {
color: var(--blue);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.06em;
}

.contactFieldset {
padding-bottom: 26px;
}

.fieldHint {
margin: 10px 0 19px;
color: var(--muted);
font-size: 13px;
}

.consentField {
margin-top: 18px;
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 10px;
align-items: start;
color: #526175;
font-size: 13px;
line-height: 1.5;
cursor: pointer;
}

.consentField input {
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--blue);
}

.configSubmit {
padding-top: 26px;
display: flex;
gap: 20px;
align-items: center;
}

.configSubmit button {
flex: 0 0 auto;
}

.configSubmit p {
max-width: 390px;
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}

.configSummary {
position: sticky;
top: 18px;
padding: 22px;
border: 1px solid #2d4564;
border-radius: 18px;
background: #0b1b2f;
}

.configSummary > span {
color: var(--lime);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
}

.configSummary > p:not(.configSummaryNote) {
margin: 22px 0 8px;
color: #8293a9;
font-size: 12px;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.configSummary h3 {
margin: 0;
font-size: 22px;
letter-spacing: -0.035em;
}

.configSummary > small {
display: block;
margin: 12px 0 23px;
color: #94a4b9;
font-size: 13px;
line-height: 1.55;
}

.configSummary dl,
.configSummary dt,
.configSummary dd {
margin: 0;
}

.configSummary dl > div {
padding: 12px 0;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 13px;
border-top: 1px solid #243a57;
}

.configSummary dt {
color: #788aa1;
font-size: 12px;
font-weight: 700;
}

.configSummary dd {
overflow-wrap: anywhere;
color: #edf2f8;
font-size: 13px;
font-weight: 750;
text-align: right;
}

.configSummaryNote {
margin: 20px 0 0;
padding: 13px;
border: 1px solid #3c492e;
border-radius: 9px;
background: rgba(183, 243, 74, 0.05);
color: #9eacbd;
font-size: 12px;
line-height: 1.55;
}

.configPriceEstimate{margin-top:18px;padding-top:17px;border-top:1px solid #304966}
.configMobilePriceEstimate{display:none}
.configPriceEstimateHeading{display:grid;gap:5px}
.configPriceEstimateHeading strong{color:#fff;font-size:16px}
.configPriceEstimateHeading span,
.configPriceEstimate > p{color:#8fa0b5;font-size:13px;line-height:1.45}
.configPriceRows{margin-top:12px;border:1px solid #2b4565;border-radius:10px;overflow:hidden}
.configPriceHeader,
.configPriceRow{display:grid;grid-template-columns:.65fr .55fr 1fr;gap:7px;align-items:center}
.configPriceHeader{padding:8px 10px;background:#10243b;color:#758aa4;font-size:11px;font-weight:750;text-transform:uppercase}
.configPriceRow{position:relative;padding:10px;border-top:1px solid #2b4565;color:#dce6f2;font-size:14px}
.configPriceRow strong{color:#fff}
.configPriceRow>span{color:var(--lime)}
.configPriceRow>b{color:#fff;text-align:right}
.configPriceRow small{grid-column:1/-1;color:#7f91a7;font-size:12px}
.configPriceEstimate>p{margin:10px 0 0}
.configSelectedTotal{display:grid;gap:6px;margin:16px 0}
.configSelectedTotal>span,.configSelectedTotal>small{color:#b0bdcd;font-size:13px;line-height:1.4}
.configSelectedAmount{color:#fff;font-size:32px;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.configPriceAlternatives{border-top:1px solid #304966}
.configPriceAlternatives>summary{min-height:44px;padding:12px 0;color:#dce6f2;font-size:14px;cursor:pointer}
.configPriceRow.isSelected{background:#14304c;box-shadow:inset 3px 0 var(--lime)}

.configAdvanced {
border-bottom: 1px solid var(--line);
}

.configAdvanced > summary {
min-height: 58px;
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
color: var(--ink);
font-size: 16px;
font-weight: 750;
cursor: pointer;
list-style: none;
}

.configAdvanced > summary::-webkit-details-marker {
display: none;
}

.configAdvanced > summary span {
color: var(--blue);
font-size: 13px;
}

.configAdvanced[open] > summary span {
visibility: hidden;
}

.configAdvanced[open] > summary span::after {
content: "−";
visibility: visible;
}

.configAdvanced .configFieldset {
padding-top: 0;
border-bottom: 0;
}

.configAdvanced .configFieldset > legend {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}

.contentHero,
.articleIndexHero {
min-height: 0;
}

main[data-page="contacts"] .contentHero {
min-height: 0;
padding-top: 46px;
padding-bottom: 56px;
grid-template-columns: minmax(0, 860px);
}

.contactRoutes {
width: min(1240px, calc(100% - 40px));
margin: 24px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px;
}

.contactRoutes a {
min-height: 92px;
padding: 18px 20px;
display: grid;
gap: 7px;
align-content: center;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}

.contactRoutes strong {
font-size: 17px;
}

.contactRoutes span {
color: var(--muted);
font-size: 14px;
line-height: 1.45;
}

.contactRoutes a:hover,
.contactRoutes a:focus-visible {
border-color: var(--blue);
}

.contentStatusPanel .dcStatusList strong {
min-width: 58px;
}

.contentNotice {
width: min(1240px, calc(100% - 40px));
margin: 0 auto;
padding: 28px 31px;
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 24px;
align-items: start;
border: 1px solid #e5c869;
border-radius: 16px;
background: #fff8d9;
}

.contentNotice > span {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--ink);
color: var(--lime);
font-size: 22px;
font-weight: 750;
}

.contentNotice h2 {
margin: 1px 0 8px;
font-size: 20px;
letter-spacing: -0.03em;
}

.contentNotice p {
max-width: 900px;
margin: 0;
color: #655b36;
font-size: 14px;
line-height: 1.7;
}

.businessDetails.contentNotice {
margin-top: 24px;
margin-bottom: 24px;
grid-template-columns: minmax(0, 1fr);
border-color: var(--line);
background: var(--white);
}

.businessDetailList {
margin: 20px 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 28px;
}

.businessDetailList > div {
min-width: 0;
padding-top: 12px;
border-top: 1px solid var(--line);
}

.businessDetailList dt {
color: var(--muted);
font-size: 14px;
line-height: 1.4;
}

.businessDetailList dd {
margin: 6px 0 0;
font-size: 16px;
line-height: 1.5;
overflow-wrap: anywhere;
}

.businessDetailList a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
}

.articleCode {
max-width: 100%;
margin: 22px 0;
padding: 16px;
overflow-x: auto;
border: 1px solid #243650;
border-radius: 12px;
background: var(--ink);
color: #edf2f8;
font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
tab-size: 4;
}

.articleCode code {
font: inherit;
}

.articleBody .articleSources {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 14px;
}

.articleSources a {
color: var(--blue);
overflow-wrap: anywhere;
text-decoration: underline;
text-underline-offset: 3px;
}

.inquirySection {
width: 100%;
margin-top: 76px;
padding: 88px max(20px, calc((100% - 1240px) / 2));
background: var(--ink);
color: #fff;
}

.inquirySectionInner {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}

.inquiryHeading > p {
color: #aab8c9;
}

.inquiryForm {
width: min(920px, 100%);
margin-top: 30px;
}

.inquiryServiceFieldset {
padding-top: 0;
}

.infoSection {
border-top: 1px solid var(--line);
}

.infoSectionGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

.infoCard {
min-height: 340px;
padding: 34px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
}

.infoCard > span {
display: inline-flex;
margin-bottom: 44px;
color: var(--blue);
font: 900 12px/1 var(--font-mono);
}

.infoCard h2 {
max-width: 560px;
margin: 0 0 20px;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.04;
letter-spacing: -0.05em;
}

.infoCard p {
margin: 0 0 15px;
color: var(--muted);
font-size: 14px;
line-height: 1.75;
}

.infoCard ul,
.articleBody ul {
margin: 23px 0 0;
padding: 0;
list-style: none;
color: #405167;
font-size: 13px;
line-height: 1.6;
}

.infoCard li,
.articleBody li {
position: relative;
padding: 9px 0 9px 22px;
border-top: 1px solid var(--line);
}

.infoCard li::before,
.articleBody li::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
left: 1px;
top: 16px;
border-radius: 50%;
background: var(--blue);
}

.contentCtaActions {
align-self: center;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
}

.contentCtaActions .button {
min-width: 230px;
text-align: center;
}

.textLinkLight,
.contentBackLink {
color: #fff;
}

.contentBackLink {
min-height: 44px;
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 750;
}

.articleTopics{padding:34px;border:1px solid #203451;border-radius:22px;background:var(--ink);color:#fff;box-shadow:0 28px 64px rgba(8,24,36,.2)}

.articleTopics > span {
color: var(--lime);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.1em;
}

.articleTopics h2{margin:24px 0 14px;font-size:32px;letter-spacing:-.05em}

.articleTopics p{margin:0;color:#9babc0;font-size:13px;line-height:1.7}

.articleTopics ol {
margin: 20px 0 0;
padding: 0;
list-style: none;
}

.articleTopics li {
padding: 14px 0;
display: flex;
gap: 16px;
border-top: 1px solid #243650;
color: #dce4ee;
font-size: 13px;
font-weight: 700;
}

.articleTopics li b {
color: var(--lime);
font: 900 11px/1.4 var(--font-mono);
}

.articleCardsSection {
border-top: 1px solid var(--line);
}

.articleCardGrid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.articleCard {
min-height: 410px;
padding: 28px;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
transition: transform 0.2s, border-color 0.2s;
}

.articleCard:hover {
transform: translateY(-3px);
border-color: #b7c9dc;
}

.articleCardTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
}

.articleCardTop span {
color: var(--blue);
font: 900 12px/1 var(--font-mono);
}

.articleCardTop b {
padding: 7px 9px;
border-radius: 999px;
background: #edf3ff;
color: #34547d;
font-size: 11px;
}

.articleCard h2 {
margin: 34px 0 18px;
font-size: clamp(25px, 2.5vw, 34px);
line-height: 1.05;
letter-spacing: -0.05em;
}

.articleCard h2 a:hover,
.articleCard h2 a:focus-visible {
color: var(--blue);
}

.articleCard > p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}

.articleMeta {
margin-top: auto;
padding-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 8px;
color: #7d8999;
font-size: 11px;
font-weight: 700;
}

.articleCardLink {
margin-top: 22px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--blue);
font-size: 12px;
font-weight: 750;
}

.softwareSection {
border-top: 1px solid var(--line);
}

.softwareGrid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}

.softwareCard {
min-width: 0;
min-height: 430px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
transition: transform 0.2s, border-color 0.2s;
}

.softwareCard:hover {
transform: translateY(-3px);
border-color: #b7c9dc;
}

.softwareCardInner {
min-height: 100%;
padding: 28px;
display: flex;
flex-direction: column;
}

.softwareCardTop {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
}

.softwareCardTop span {
color: var(--blue);
font: 900 12px/1 var(--font-mono);
}

.softwareCardTop b {
padding: 7px 9px;
border-radius: 999px;
background: #edf3ff;
color: #34547d;
font-size: 11px;
text-align: right;
}

.softwareCard h3 {
margin: 46px 0 12px;
font-size: clamp(27px, 2.7vw, 38px);
line-height: 1.03;
letter-spacing: -0.05em;
}

.softwareSystems {
margin: 0 0 20px;
color: var(--blue);
font: 800 12px/1.55 var(--font-mono);
}

.softwareDescription {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}

.softwareSource {
margin-top: auto;
padding-top: 30px;
display: grid;
gap: 7px;
}

.softwareSource span {
color: #7d8999;
font-size: 11px;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.softwareSource strong {
min-width: 0;
color: var(--ink);
font: 800 11px/1.45 var(--font-mono);
overflow-wrap: anywhere;
}

.softwareCardLink {
min-height: 48px;
margin-top: 18px;
padding-top: 13px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid var(--line);
color: var(--blue);
font-size: 12px;
font-weight: 750;
}

.softwareCardLink:hover,
.softwareCardLink:focus-visible {
color: #113eb8;
}

.softwareCardLink span {
font-size: 17px;
}

.softwareSafetySection {
width: 100%;
padding: 96px max(20px, calc((100% - 1240px) / 2));
background: var(--ink);
color: #fff;
}

.softwareSafetySection .splitHeading > p {
color: #9babc0;
}

.softwareSafetyGrid {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid #243650;
border-bottom: 1px solid #243650;
}

.softwareSafetyGrid article {
min-width: 0;
min-height: 245px;
padding: 28px;
border-right: 1px solid #243650;
}

.softwareSafetyGrid article:last-child {
border-right: 0;
}

.softwareSafetyGrid span {
color: var(--lime);
font: 900 11px/1 var(--font-mono);
}

.softwareSafetyGrid h3 {
margin: 52px 0 13px;
font-size: 22px;
letter-spacing: -0.035em;
}

.softwareSafetyGrid p {
margin: 0;
color: #aab8c9;
font-size: 12px;
line-height: 1.7;
}

.softwareSafetyAction {
width: fit-content;
min-height: 48px;
margin-top: 24px;
display: flex;
align-items: center;
gap: 18px;
color: #fff;
font-size: 12px;
font-weight: 750;
}

.softwareSafetyAction span {
color: var(--lime);
font-size: 18px;
}

.articleHero {
width: min(1040px, calc(100% - 40px));
margin: 0 auto;
padding: 46px 0 58px;
border-top: 1px solid var(--line);
}

.articleHero h1 {
max-width: 990px;
font-size: clamp(42px, 5.2vw, 64px);
line-height: 0.98;
}

.articleHero .heroLead {
max-width: 820px;
}

.articleHeroActions {
margin-top: 30px;
display: flex;
gap: 24px;
align-items: center;
}

.articleHeroMeta {
margin-top: 40px;
padding-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
align-items: center;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
font-weight: 700;
}

.articleHeroMeta > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--ink);
color: var(--lime);
font: 900 12px/1 var(--font-mono);
}

.articleLayout {
padding-top: 92px;
display: grid;
grid-template-columns: 260px minmax(0, 760px);
justify-content: space-between;
gap: 74px;
border-top: 1px solid var(--line);
}

.articleToc {
position: sticky;
top: 24px;
align-self: start;
padding: 24px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
}

.articleToc > p {
margin: 0 0 16px;
color: var(--blue);
font-size: 11px;
font-weight: 750;
text-transform: uppercase;
letter-spacing: 0.08em;
}

.articleToc ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: article-toc;
}

.articleToc li {
counter-increment: article-toc;
border-top: 1px solid var(--line);
}

.articleToc a {
padding: 12px 0;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 8px;
color: #4f5f73;
font-size: 11px;
font-weight: 700;
line-height: 1.45;
}

.articleToc a::before {
content: counter(article-toc, decimal-leading-zero);
color: var(--blue);
font: 900 10px/1.55 var(--font-mono);
}

.articleToc a:hover,
.articleToc a:focus-visible {
color: var(--blue);
}

.articleBody {
min-width: 0;
}

.articleIntro {
padding: 0 0 54px;
border-bottom: 1px solid var(--line);
}

.articleIntro p:first-child {
color: var(--ink);
font-size: 22px;
line-height: 1.55;
letter-spacing: -0.02em;
}

.articleBody p {
margin: 0 0 20px;
color: #4f5e70;
font-size: 16px;
line-height: 1.82;
}

.articleBody > section {
padding: 66px 0 52px;
border-bottom: 1px solid var(--line);
}

.articleBody > section > span {
color: var(--blue);
font: 900 12px/1 var(--font-mono);
}

.articleBody h2 {
margin: 18px 0 28px;
font-size: clamp(32px, 4.1vw, 50px);
line-height: 1.02;
letter-spacing: -0.055em;
}

.articleBody ul {
margin: 28px 0 10px;
font-size: 15px;
}

.articleBody li {
padding-top: 12px;
padding-bottom: 12px;
}

.articleBody li::before {
top: 20px;
}

.articleSectionNext {
min-height: 58px;
margin-top: 34px;
padding: 12px 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px 18px;
align-items: center;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--white);
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.articleSectionNext small {
grid-column: 1 / -1;
color: var(--blue);
font: 900 11px/1 var(--font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}

.articleSectionNext span {
color: var(--ink);
font-size: 12px;
font-weight: 750;
line-height: 1.4;
}

.articleSectionNext b {
color: var(--blue);
}

.articleSectionNext:hover,
.articleSectionNext:focus-visible {
border-color: #aac2ed;
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(8, 24, 36, 0.06);
}

.articleFaq {
border-top: 1px solid var(--line);
}

.promoHero {
min-height: 0;
grid-template-columns: minmax(0, 1.14fr) minmax(340px, 0.72fr);
}

.promoHero h1 {
max-width: 760px;
}

.promoTermsPanel {
min-width: 0;
padding: 28px;
border: 1px solid #ccd9eb;
border-radius: 22px;
background: #f7faff;
box-shadow: 0 18px 44px rgba(35, 85, 223, 0.08);
}

.promoTermsTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--muted);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.promoTermsTop b {
color: var(--blue);
font: inherit;
}

.promoTermsPanel h2 {
margin: 24px 0 18px;
font-size: clamp(25px, 2.4vw, 32px);
line-height: 1.08;
letter-spacing: -0.035em;
}

.promoTermsList {
margin: 0;
padding: 0;
list-style: none;
}

.promoTermsList li {
min-height: 48px;
padding: 10px 0;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 12px;
align-items: center;
border-top: 1px solid var(--line);
color: var(--ink);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
}

.promoTermsList span {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e5f7bd;
color: #204200;
font-size: 13px;
font-weight: 750;
}

.promoTermsPanel > p {
margin: 18px 0 0;
padding-top: 17px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}

.promoExplorerSection {
border-top: 1px solid var(--line);
}

.promoExplorer {
min-width: 0;
margin: 44px 0 0;
padding: 0;
border: 0;
}

.promoExplorer > legend,
.promoFilterInput {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}

.promoFilterControls {
width: fit-content;
max-width: 100%;
padding: 5px;
display: flex;
flex-wrap: wrap;
gap: 5px;
border: 1px solid var(--line);
border-radius: 15px;
background: #e9eef4;
}

.promoFilterControls label {
min-height: 44px;
padding: 0 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 10px;
color: #536276;
cursor: pointer;
font-size: 14px;
font-weight: 750;
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

#promo-filter-all:checked ~ .promoFilterControls label[for="promo-filter-all"],
#promo-filter-hosting:checked ~ .promoFilterControls label[for="promo-filter-hosting"],
#promo-filter-vps:checked ~ .promoFilterControls label[for="promo-filter-vps"],
#promo-filter-servers:checked ~ .promoFilterControls label[for="promo-filter-servers"] {
border-color: #d5deea;
background: #fff;
color: var(--ink);
box-shadow: 0 6px 16px rgba(8, 24, 36, 0.08);
}

#promo-filter-all:focus-visible ~ .promoFilterControls label[for="promo-filter-all"],
#promo-filter-hosting:focus-visible ~ .promoFilterControls label[for="promo-filter-hosting"],
#promo-filter-vps:focus-visible ~ .promoFilterControls label[for="promo-filter-vps"],
#promo-filter-servers:focus-visible ~ .promoFilterControls label[for="promo-filter-servers"] {
outline: 3px solid var(--lime);
outline-offset: 3px;
}

.promoDeck {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 30px;
}

#promo-filter-hosting:checked ~ .promoDeck .promoCard:not(.promoHosting),
#promo-filter-vps:checked ~ .promoDeck .promoCard:not(.promoVps),
#promo-filter-servers:checked ~ .promoDeck .promoCard:not(.promoServers) {
display: none;
}

#promo-filter-hosting:checked ~ .promoDeck,
#promo-filter-vps:checked ~ .promoDeck,
#promo-filter-servers:checked ~ .promoDeck {
grid-template-columns: minmax(0, 760px);
justify-content: center;
}

.promoCard {
--promo-accent: #4de1d3;
--promo-soft: #e4faf8;
position: relative;
overflow: hidden;
min-width: 0;
min-height: 0;
padding: 22px;
display: flex;
flex-direction: column;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 46px rgba(8, 24, 36, 0.06);
transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.promoCard::before {
content: "";
position: absolute;
width: 180px;
height: 180px;
top: -115px;
right: -70px;
border-radius: 50%;
background: var(--promo-accent);
filter: blur(45px);
opacity: 0.22;
}

.promoCard:hover {
transform: translateY(-5px);
border-color: var(--promo-accent);
box-shadow: 0 24px 58px rgba(8, 24, 36, 0.1);
}

.promoVps {
--promo-accent: #7185ff;
--promo-soft: #eef0ff;
}

.promoServers {
--promo-accent: #9fdb35;
--promo-soft: #f2fbdc;
}

.promoCardTop {
position: relative;
z-index: 1;
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.promoCardTop > span {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--promo-soft);
color: var(--ink);
font: 900 11px/1 var(--font-mono);
}

.promoCardTop b {
display: inline-flex;
align-items: center;
gap: 8px;
color: #68778a;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.promoCardTop b i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ffaf38;
box-shadow: 0 0 0 4px rgba(255, 175, 56, 0.13);
}

.promoCategory {
margin: 24px 0 8px;
color: var(--muted);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.11em;
text-transform: uppercase;
}

.promoCard h3 {
max-width: 330px;
margin: 0;
font-size: clamp(28px, 2.4vw, 36px);
line-height: 0.98;
letter-spacing: -0.055em;
}

.promoLead {
margin: 14px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}

.promoFocus {
margin: 16px 0 0;
padding: 14px;
display: grid;
gap: 7px;
border: 1px solid color-mix(in srgb, var(--promo-accent) 35%, #d5dee7);
border-radius: 13px;
background: var(--promo-soft);
}

.promoFocus span {
color: var(--muted);
font-size: 11px;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.promoFocus strong {
font-size: 14px;
line-height: 1.4;
}

.promoPoints {
margin: 14px 0 0;
padding: 0;
list-style: none;
color: #566579;
font-size: 14px;
line-height: 1.5;
}

.promoPoints li {
position: relative;
padding: 7px 0 7px 19px;
border-bottom: 1px solid #edf1f5;
}

.promoPoints li::before {
content: "";
position: absolute;
width: 7px;
height: 7px;
top: 13px;
left: 0;
border-radius: 2px;
background: var(--promo-accent);
}

.promoTerms {
margin-top: 14px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.promoTerms summary {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
cursor: pointer;
list-style: none;
color: var(--ink);
font-size: 14px;
font-weight: 750;
}

.promoTerms summary::-webkit-details-marker {
display: none;
}

.promoTerms summary span {
color: var(--blue);
font-size: 18px;
font-weight: 400;
transition: transform 0.2s;
}

.promoTerms[open] summary span {
transform: rotate(45deg);
}

.promoTerms p {
margin: -1px 0 16px;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}

.promoCardActions {
margin-top: auto;
padding-top: 14px;
display: grid;
gap: 6px;
}

.promoCardActions a {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink);
font-size: 14px;
font-weight: 750;
}

.promoCardActions a > span {
color: var(--blue);
}

.promoCardActions .promoSecondaryAction {
min-height: 44px;
justify-content: flex-start;
color: var(--muted);
font-size: 14px;
}

.promoCardActions a:hover,
.promoCardActions a:focus-visible {
color: var(--blue);
}

.promoFaqSection {
border-top: 0;
}

.promoRequestSection {
background:
  radial-gradient(circle at 12% 120%, rgba(183, 243, 74, 0.24), transparent 31%),
  var(--blue);
}

.promoRequestActions {
display: flex;
align-items: center;
gap: 22px;
}

.promoBulkSection{border-top:1px solid var(--line)}
.promoBulkGrid{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.promoBulkGrid article{min-width:0;min-height:150px;padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.promoBulkGrid h3{margin:0;font-size:18px}
.promoBulkGrid p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
.promoFocus {
  border-color: var(--line);
}
}

@media (max-width: 1300px) {
.topbar{gap:20px}
.desktopNav>a,.desktopMegaMenu>summary{padding-right:10px;padding-left:10px}
.topbarActions{gap:8px}
.accountAction{padding-right:10px;padding-left:10px}
.desktopRequest{padding-right:16px;padding-left:16px}
}

@media (max-width: 1180px) {
.platformForm{grid-template-columns:minmax(0,1fr)}
.platformFleetFields{grid-column:1}
.platformFormActions{grid-row:auto;grid-column:1;justify-self:end}
.servicePlanGridCount8 .price{font-size:36px}
}

@media (max-width: 1050px) {
.topbar {
  gap: 20px;
}

.desktopNav > a,
.desktopMegaMenu > summary {
  padding-right: 9px;
  padding-left: 9px;
}

.desktopMegaMenuPanel {
  width: min(760px, calc(100vw - 40px));
}

.serviceCards {
  grid-template-columns: repeat(2, 1fr);
}

.serviceCards > .serviceCard,
.serviceCards > .serviceCard:nth-last-child(-n + 3) {
  grid-column: auto;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) {
  min-height: 170px;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(150px, 0.48fr);
  grid-template-rows: auto auto;
  gap: 8px 20px;
  align-items: start;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) .serviceCode {
  grid-row: 1 / span 2;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) h3 {
  margin: 0;
  grid-column: 2;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) p {
  grid-column: 2;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) .cardLink {
  margin-top: 0;
  padding: 0 0 0 20px;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  align-items: center;
  border-left: 1px solid var(--line);
}

.bonusGrid {
  grid-template-columns: repeat(2, 1fr);
}

.configuratorWorkspace {
  grid-template-columns: minmax(0, 1fr) 290px;
}

.storageConfigGrid {
  grid-template-columns: 1fr;
}

.serverCatalog {
  grid-template-columns: minmax(0, 1fr);
}

.serverSpecs {
  grid-template-columns: repeat(2, 1fr);
}

.serverList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serverSpecs > div:nth-child(3n) {
  border-right: 1px solid #243650;
}

.serverSpecs > div:nth-child(2n) {
  border-right: 0;
}

.serverSpecs > div:nth-last-child(-n + 3) {
  border-bottom: 1px solid #243650;
}

.serverSpecs > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.splitHeading {
  gap: 45px;
}

.footerTop {
  grid-template-columns: minmax(260px, 1.05fr) repeat(3, minmax(135px, 0.8fr));
  gap: 24px;
}

.footerColumn {
  padding-left: 18px;
}

.promoHero {
  grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr);
  gap: 48px;
}

.promoDeck {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promoCard:last-child {
  grid-column: 1 / -1;
}

}

@media (max-width: 1080px) {
.desktopNav,
.desktopRequest,
.accountActionsDesktop {
  display: none;
}

.topbar {
  gap: 16px;
}

.topbarActions {
  margin-left: auto;
}

.mobileMenu {
  display: block;
}
}

@media (max-width: 900px) {
.desktopNav,
.desktopRequest {
  display: none;
}

.topbar {
  gap: 16px;
}

.topbarActions {
  margin-left: auto;
}

.mobileMenu {
  display: block;
}

.hero {
  min-height: 0;
  padding: 32px 0 40px;
  grid-template-columns: 1fr;
  gap: 38px;
}

.serviceHero {
  min-height: 0;
  padding: 50px 0 68px;
  grid-template-columns: 1fr;
  gap: 38px;
}

.serverServiceHero .serviceHeroCopy{display:block}
.serverServiceHero .heroLead{max-width:720px;margin-top:20px}
.serverServiceHero+.servicePlansSection{padding-top:30px}

.section {
  padding: 82px 0;
}

.plansSection,
.configuratorSection {
  padding: 64px 20px;
}

.plansSection .splitHeading {
  gap: 22px;
}

.planGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homePlanGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.homePlanGrid .planCard {
  padding: 18px 16px;
}

.homePlanGrid .price {
  font-size: 36px;
}

.servicePlanGridCount1 {
  grid-template-columns: minmax(0, 1fr);
}

.servicePlanGridCount2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.servicePlanGridCount4,
.servicePlanGridCount8 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.servicePlanGridCount8 .price {
  font-size: 46px;
}

.servicePricePanel {
  max-width: 640px;
}

.serviceLocationPanel {
  grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
}

.serviceLocationPanel > a {
  width: max-content;
  grid-column: 1 / -1;
}

.dcStatusPanel {
  max-width: 640px;
}

.heroPanel {
  max-width: 680px;
}

.splitHeading,
.howSection,
.requestSection {
  grid-template-columns: 1fr;
}

.uspGrid,
.fitGrid {
  grid-template-columns: 1fr;
}

.uspCard {
  min-height: 0;
}

.splitHeading,
.howSection {
  gap: 38px;
}

.requestSection {
  padding: 82px 20px;
  gap: 48px;
}

.siteFooter {
  padding: 62px 20px 26px;
}

.serverCatalog {
  grid-template-columns: 1fr;
  gap: 14px;
}

.serverFilterPanel {
  position: static;
}

.configuratorWorkspace {
  grid-template-columns: 1fr;
}

.configSummary {
  position: static;
}

.configSummary dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
}

.contentHero,
.articleIndexHero {
  min-height: 0;
}

.articleTopics {
  max-width: 640px;
}

.articleCardGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.softwareGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.articleCard:last-child {
  grid-column: 1 / -1;
  min-height: 360px;
}

.articleLayout {
  padding-top: 72px;
  grid-template-columns: 1fr;
  gap: 46px;
}

.articleToc {
  position: static;
}

.promoHero {
  grid-template-columns: 1fr;
}

.promoTermsPanel {
  max-width: 680px;
}

.serverFilterFields {
  grid-template-columns: repeat(3, 1fr);
}

.serverFilterActions {
  grid-template-columns: minmax(190px, 0.6fr) 1fr;
  align-items: center;
}

.serverFilterActions a {
  text-align: left;
}
}

@media (max-width: 820px) {
.footerTop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 22px;
}

.footerIntro {
  max-width: 520px;
  grid-column: 1 / -1;
}
}

@media (max-width: 720px) {
.footerTop {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 22px;
}

.softwareSafetySection {
  padding-top: 64px;
  padding-bottom: 64px;
}

.softwareSafetyGrid {
  grid-template-columns: 1fr;
}

.softwareSafetyGrid article {
  min-height: 0;
  padding: 25px 0;
  border-right: 0;
  border-bottom: 1px solid #243650;
}

.softwareSafetyGrid article:last-child {
  border-bottom: 0;
}

.softwareSafetyGrid h3 {
  margin-top: 26px;
}

.footerIntro {
  max-width: 520px;
  grid-column: 1 / -1;
}
}

@media (max-width: 620px) {
.articleIndexHero .articleTopics{display:none}
.topbar,
.hero,
.serviceHero,
.articleHero,
.section {
  width: min(calc(100% - 28px), 1240px);
}

.topbar {
  height: 68px;
}

h1,
main[lang="en"] h1 {
  font-size: clamp(40px, 11.5vw, 50px);
}

.sectionHeading h2,
.plansSection .sectionHeading h2,
.configuratorHeading h2 {
  font-size: clamp(32px, 9.6vw, 42px);
}

.configuratorHeading {
  gap: 18px;
}

.hero {
  padding: 36px 0 60px;
}

.serviceHero {
  padding: 30px 0 48px;
  gap: 26px;
}

.serverServiceHero {
  padding-top: 16px;
  padding-bottom: 18px;
}

.serverServiceHero .heroActions{flex-flow:row wrap;gap:12px;margin-top:20px;font-size:14px}
.serverServiceHero .heroActions .button{padding:0 10px}
.serverServiceHero+.servicePlansSection{padding-top:18px}
.serverServiceHero+.servicePlansSection .splitHeading>p{display:none}
.serverServiceHero+.servicePlansSection .sectionHeading h2{font-size:26px;line-height:1.15}
.serverServiceHero+.servicePlansSection .serverCatalog{margin-top:14px}

.serverServiceHero .breadcrumbs{margin-bottom:10px}
.serverServiceHero .eyebrow{margin-bottom:10px;font-size:10px}
main[data-service="servers"] .serverServiceHero h1{font-size:clamp(32px,9vw,36px);line-height:1.08;margin-top:0}
.serverServiceHero .heroLead{font-size:16px;line-height:1.5;margin-top:14px}
.serverServiceHero .heroActions{margin-top:14px}

.serviceHero h1 {
  font-size: clamp(39px, 11.5vw, 49px);
}

.dcHero h1 {
  font-size: clamp(36px, 11.5vw, 50px);
}

.articleHero {
  padding: 38px 0 56px;
}

.articleHero h1 {
  font-size:clamp(36px,9.7vw,44px);
}

.breadcrumbs {
  margin-bottom: 24px;
}

.htmlContactDock {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 0 14px 14px;
  align-items: stretch;
  flex-direction: column;
  background: #081824;
}

.htmlContactDock a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}

.servicePricePanel {
  padding: 22px;
}

.servicePricePanel > p {
  margin-top: 28px;
}

.servicePricePanel ul {
  margin: 20px 0;
}

.servicePricePanel li {
  padding: 9px 0;
}

.servicePricePanel small {
  padding-top: 14px;
}

.dcStatusPanel {
  padding: 24px;
}

.heroActions {
  gap: 16px;
  margin-top: 28px;
  align-items: flex-start;
  flex-direction: column;
}

.articleHeroActions {
  align-items: stretch;
  flex-direction: column;
}

.articleHeroActions .button,
.articleHeroActions .textLink {
  width: 100%;
  justify-content: center;
}

.heroLead {
  margin-top: 22px;
}

.heroFacts {
  display: grid;
  grid-template-columns: 1fr;
}

.serviceMiniGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serviceMiniGrid a,
.serviceMiniGrid a:nth-child(n + 5) {
  min-height: 72px;
  grid-column: auto;
  border-right: 1px solid #223149;
  border-bottom: 1px solid #223149;
}

.serviceMiniGrid a:nth-child(even) {
  border-right: 0;
}

.serviceMiniGrid a:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

.section {
  padding: 48px 0;
}

.splitHeading,
.howSection {
  gap: 22px;
}

.servicesSection {
  width: min(calc(100% - 28px), 1240px);
}

.serviceCards,
.planGrid,
.servicePlanGridCount1,
.servicePlanGridCount2,
.servicePlanGridCount4,
.servicePlanGridCount8,
.bonusGrid,
.paymentGrid,
.serviceLocationGrid,
.dcGrid,
.infoSectionGrid,
.articleCardGrid {
  grid-template-columns: 1fr;
}

.softwareGrid {
  margin-top: 32px;
  grid-template-columns: 1fr;
}

.softwareCard {
  min-height: 0;
}

.softwareCardInner {
  padding: 22px;
}

.softwareCard h3 {
  margin-top: 34px;
}

.promoDeck {
  grid-template-columns: 1fr;
}

.promoBulkGrid{grid-template-columns:repeat(2,minmax(0,1fr))}

.promoCard:last-child {
  grid-column: auto;
}

.serviceCards,
.planGrid,
.uspGrid,
.bonusGrid,
.paymentGrid,
.serviceLocationGrid,
.dcGrid,
.serverCatalog,
.articleCardGrid {
  margin-top: 32px;
}

.articleCard:last-child {
  grid-column: auto;
  min-height: 400px;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) {
  min-height: 220px;
  padding: 22px;
  grid-column: auto;
  display: flex;
  flex-direction: column;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) .serviceCode {
  grid-row: auto;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) h3 {
  margin: 20px 0 8px;
  grid-column: auto;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) p {
  grid-column: auto;
}

.serviceCards > .serviceCard:last-child:nth-child(odd) .cardLink {
  margin-top: auto;
  min-height: 44px;
  padding: 12px 0 0;
  grid-column: auto;
  grid-row: auto;
  align-self: auto;
  align-items: flex-end;
  border-left: 0;
}

.articleCard {
  min-height: 0;
  padding: 22px;
}

.articleCard h2 {
  margin-top: 40px;
}

.contentNotice {
  width: min(calc(100% - 28px), 1240px);
  padding: 22px;
  grid-template-columns: 1fr;
}

.businessDetailList {
  grid-template-columns: minmax(0, 1fr);
}

.infoCard {
  min-height: 0;
  padding: 24px;
}

.infoCard > span {
  margin-bottom: 30px;
}

.articleLayout {
  padding-top: 56px;
  gap: 36px;
}

.articleToc {
  padding: 20px;
}

.articleIntro p:first-child {
  font-size: 19px;
}

.articleIntro {
  padding-bottom: 40px;
}

.articleBody > section {
  padding: 48px 0 40px;
}

.articleBody h2 {
  margin: 16px 0 22px;
}

.articleBody p {
  font-size: 15px;
}

.promoTermsPanel {
  padding: 20px;
}

.promoTermsPanel h2 {
  margin-top: 20px;
  font-size: 24px;
}

.promoTermsList li {
  font-size: 13px;
}

.promoFilterControls {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promoFilterControls label {
  padding: 0 10px;
}

.promoCard {
  min-height: 0;
  padding: 22px;
}

.promoRequestActions {
  align-items: stretch;
  flex-direction: column;
}

.promoRequestActions .button,
.promoRequestActions .textLink {
  width: 100%;
  justify-content: center;
}

.contentCtaActions,
.contentCtaActions .button {
  width: 100%;
}

.configuratorSection {
  padding: 48px 14px;
}

.inquirySection {
  margin-top: 54px;
  padding: 60px 14px;
}

.configFieldGrid,
.configFieldGridThree,
.configSummary dl {
  grid-template-columns: 1fr;
}

.platformForm {
  padding: 18px;
  grid-template-columns: 1fr;
}

.platformFleetFields{grid-template-columns:1fr}

.platformFleetFields,
.platformFormActions,
.platformSelectedSummary {
  grid-column: 1;
}

.platformFormActions {
  grid-row: auto;
}

.platformFormActions,
.configSubmit,
.configAlert {
  align-items: stretch;
  flex-direction: column;
}

.platformFormActions {
  justify-self: stretch;
}

.platformFormActions button,
.configSubmit button {
  width: 100%;
}

.platformSelectedSummary {
  grid-column: auto;
}

.configMobilePriceEstimate {
  margin: 0 0 14px;
  padding: 18px;
  display: block;
  border: 1px solid #2d4564;
  border-radius: 14px;
  background: #0b1b2f;
}

.configDesktopPriceEstimate{display:none}

.configuratorForm,
.configSummary {
  padding: 20px;
}

.serviceLocationPanel,
.locationScopeNote,
.locationOwnershipNote {
  grid-template-columns: 1fr;
}

.serviceLocationPanel {
  padding: 21px;
  gap: 20px;
}

.serviceLocationPanel > a {
  width: 100%;
}

.serviceLocationCard[data-service-locations="servers"] {
  grid-column: auto;
}

.serviceCard {
  min-height: 220px;
  padding: 22px;
}

.bonusCard,
.paymentCard {
  min-height: 0;
  padding: 20px;
}

.bonusCard h3 {
  margin-top: 30px;
}

.paymentCard h3 {
  margin-top: 16px;
}

.paymentGrid {
  margin-top: 22px;
}

.faqList summary {
  padding: 21px 0;
}

.plansSection {
  width: 100%;
  padding: 46px 14px;
}

.plansSection .splitHeading {
  gap: 18px;
}

.subnetPricing {
  margin-top: 24px;
  padding-top: 22px;
}

.subnetPricingHeader {
  grid-template-columns: 1fr;
  gap: 12px;
}

.subnetPricingHeader h3 {
  font-size: 27px;
}

.subnetPricingHeader > p {
  font-size: 14px;
}

.subnetTableGrid {
  margin-top: 16px;
  grid-template-columns: 1fr;
  gap: 10px;
}

.subnetTable thead th,
.subnetTable tbody th,
.subnetTable tbody td {
  padding-right: 10px;
  padding-left: 10px;
}

.subnetTable thead th {
  font-size: 9px;
}

.subnetTableTerm {
  min-height: 28px;
  padding-right: 8px;
  padding-left: 8px;
  font-size: 10px;
}

.subnetMonthlyPrice strong {
  font-size: 20px;
}

.subnetOrderAction {
  padding-right: 8px;
  padding-left: 8px;
  font-size: 12px;
}

.planGrid {
  margin-top: 24px;
}

.planCard {
  min-height: 0;
  padding: 20px 20px 16px;
}

.planCard h3 {
  margin-top: 18px;
}

.planCard ul {
  margin: 18px 0 14px;
}

.serverCatalog {
  margin-top: 20px;
}

.serverList {
  grid-template-columns: 1fr;
}

.serverFilters,
.serverFiltersHeading,
.serverCard {
padding: 16px;
}

.serverFiltersHeading{grid-template-columns:1fr}

.serverFilterHeadingMeta {
  align-items: stretch;
  flex-direction: column;
}

.serverFilterToggle {
  width: 100%;
  justify-content: space-between;
}

.serverFilterPanel:not([open]) .serverFilterHeadingMeta {
  justify-content: flex-start;
}

.serverFilterFields,
.serverFilterActions {
  grid-template-columns: 1fr;
}

.serverFilterActions a {
  text-align: center;
}

.serverCardFooter {
  align-items: flex-start;
  flex-direction: column;
}

.serverResultsHeading {
  min-height: 0;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.serverResultsHeading > strong {
  line-height: 1;
}

.serverSpecs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.serverSpecs > div,
.serverSpecs > div:nth-child(3n) {
  border-right: 1px solid #243650;
  border-bottom: 1px solid #243650;
}

.serverSpecs > div:nth-child(2n) {
  border-right: 0;
}

.serverSpecs > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.serverSpecs > div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}

.serverLocationsPanel {
  padding: 0 16px;
}

.serverLocationsPanel summary {
  min-height: 76px;
  gap: 14px;
}

.serverLocationsPanel summary > b {
  max-width: 120px;
  text-align: right;
}

.serverCardActions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

.serverCardActions > a {
  width: 100%;
}

.serverEmptyState {
  padding: 22px;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
}

.serverEmptyState > a {
  grid-column: 1 / -1;
  text-align: center;
}

.requestSection {
  padding: 48px 14px;
  gap: 30px;
}

.paymentBottom {
  justify-content: stretch;
}

.paymentBottom .button {
  width: 100%;
}

.requestSection h2 {
  font-size: clamp(36px, 10.5vw, 46px);
}

.requestCard {
  padding: 22px;
}

.steps li {
  grid-template-columns: 42px minmax(0, 1fr);
}

.siteFooter {
  padding: 54px 14px 24px;
}

.footerTop {
  padding-bottom: 36px;
  grid-template-columns: 1fr 1fr;
  gap: 32px 18px;
}

.footerIntro {
  max-width: none;
  grid-column: 1 / -1;
}

.footerBottom {
  padding: 22px 0 4px;
  grid-template-columns: 1fr;
  gap: 12px;
}

.footerColumn a,
.footerBottom a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footerColumn:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.footerColumn:last-child h3 {
  grid-column: 1 / -1;
}

.errorHeader {
  min-height: 68px;
}

.errorContent {
  padding: 60px 0 100px;
}

.errorOptions {
  margin-top: 42px;
}

.errorOptions > div {
  grid-template-columns: 1fr;
}

.errorOptions a {
  min-height: 112px;
}
}

@media (max-width: 420px) {
.footerTop {
  grid-template-columns: 1fr;
  gap: 24px;
}

.footerColumn,
.footerColumn:last-child {
  padding: 20px 0 0;
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  border-top: 1px solid #203149;
  border-left: 0;
}

.footerColumn h3,
.footerColumn:last-child h3 {
  grid-column: 1 / -1;
  margin-bottom: 10px;
}
}

@media (max-width: 360px) {
.serviceMiniGrid {
  grid-template-columns: 1fr;
}

.serviceMiniGrid a,
.serviceMiniGrid a:nth-child(n + 5),
.serviceMiniGrid a:nth-child(even),
.serviceMiniGrid a:last-child {
  min-height: 64px;
  grid-column: 1;
  border-right: 0;
  border-bottom: 1px solid #223149;
}

.serviceMiniGrid a:last-child {
  border-bottom: 0;
}
.serviceHero {
  padding-top: 22px;
}

.serviceHero .breadcrumbs {
  margin-bottom: 14px;
}

.serviceHero .eyebrow {
  margin-bottom: 14px;
}

.serviceHero h1 {
  font-size: 38px;
}

.serviceHero .heroLead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.5;
}

.serviceHero .heroActions {
  margin-top: 18px;
}

.articleHero {
  padding-top: 18px;
}

.articleHero .breadcrumbs {
  margin-bottom: 14px;
}

.articleHero .breadcrumbItemCurrent,
.articleHero .breadcrumbSeparatorBeforeCurrent {
  display: none;
}

.articleHero .eyebrow {
  margin-bottom: 14px;
}

.articleHero h1 {
  font-size: 34px;
  line-height: 0.96;
}

.articleHero .heroLead {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
}

.articleHeroActions {
  margin-top: 14px;
}
}

@media (prefers-reduced-motion: reduce) {
html {
  scroll-behavior: auto;
}

*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
}
}