@charset "UTF-8";

/* SilentVPS identity: private infrastructure, precise geometry, open space.
   Space Grotesk is served locally. Its SIL OFL accompanies the font file. */
@font-face {
  font-family: "Silent Grotesk";
  src: url("fonts/space-grotesk-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --bg: #070d0d;
  --surface: #0d1716;
  --text: #edf5f0;
  --muted: #a0b1ab;
  --mint: #a9f5cf;
  --ice: #94c8c5;
  --line: #293c35;
  --font: "Silent Grotesk", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-display: "Silent Grotesk", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --identity-rule: #a9f5cf48;
  --layout-section-space: 80px;
  --layout-heading-space: 40px;
  --layout-grid-gap: 32px;
  --layout-card-space: 24px;
}
@media(max-width:760px) {
  :root {
    --layout-section-space: 56px;
    --layout-heading-space: 32px;
    --layout-grid-gap: 24px;
    --layout-card-space: 20px;
  }
}

body {
  background-color: var(--bg);
  font-feature-settings: "ss02" 1;
  letter-spacing: -.015em;
}

/* Wide site chrome, with a modestly larger centered public content frame. */
body .nav-wrap { max-width: none; }
body footer .container:is(.footer-grid,.footer-explore,.footer-bottom) {
  width: calc(100% - 80px);
  max-width: none;
}
@media(min-width:1051px) {
  body .announcement { padding-inline: 40px; }
  body:not(:is(.view-login,.view-signup,.view-deploy,.view-track,.view-service,.view-dashboard,.view-checkout,.view-payment)) #main .container {
    width: min(1320px, calc(100% - 80px));
  }
}
@media(max-width:1050px) and (min-width:761px) {
  body footer .container:is(.footer-grid,.footer-explore,.footer-bottom) { width: calc(100% - 60px); }
}
@media(max-width:760px) {
  body footer .container:is(.footer-grid,.footer-explore,.footer-bottom) { width: calc(100% - 40px); }
}

h1, h2, h3, .brand, .hero-metrics strong,
.dashboard-stats strong, .summary-total, .checkout-total,
.step-number {
  font-family: var(--font-display);
}
h1, h2 { letter-spacing: -.052em; }
h3 { letter-spacing: -.032em; }
p { letter-spacing: -.007em; }
::selection { background: #a9f5cf38; color: #fff; }

/* A recognizable wordmark and a fine signal across every page. */
.site-header {
  background: #070d0df2;
  border-bottom-color: #a9f5cf16;
  backdrop-filter: blur(22px);
}
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a9f5cf06 12%, #a9f5cf55 30%, #a9f5cf13 55%, transparent 84%);
  pointer-events: none;
}
.nav-wrap { min-height: 82px; }
.brand { gap: 12px; }
.brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 14px #a9f5cf10);
}
.brand > span {
  font-size:1.625rem;
  font-weight: 650;
  letter-spacing: -1.3px;
}
.brand > span > span { color: var(--mint); font-weight: 450; }
.nav-wrap nav > a { font-size:var(--text-sm); font-weight: 500; color: #b2c2ba; }
.nav-wrap nav > a::after {
  height: 2px;
  background: linear-gradient(90deg, var(--mint) 70%, transparent 70%);
}
.account-link { color: #d2ded7; font-weight: 500; }
.announcement {
  color: #adcfbd;
  background: #0c1712;
  border-bottom-color: #a9f5cf14;
}
.language-menu { background: #0d1813; border-color: #3a5145; }

/* A small cut at the corner becomes the common action signature. */
body .button:not(.plan-cta) {
  position: relative;
  border-radius: 3px 10px 3px 3px;
  font-weight: 600;
  letter-spacing: -.025em;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
body .button.primary:not(.plan-cta) {
  color: #0a2117;
  border-color: #baffd8;
  background: linear-gradient(135deg, #c5ffdf, #a9f5cf 52%, #95edc0);
  box-shadow: inset 0 1px #e1ffef66, 0 4px 22px #a9f5cf07;
}
body .button.primary:not(.plan-cta):hover {
  background: linear-gradient(135deg, #e1ffed, #bdffdc 52%, #a6f5ce);
  box-shadow: inset 0 1px #effff4aa, 0 6px 26px #a9f5cf1a;
  transform: translateY(-2px);
}
body .button.outline:not(.plan-cta) {
  color: #d5e6db;
  background: #a9f5cf02;
  border-color: #446450;
}
body .button.outline:not(.plan-cta)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--mint);
  border-left: 1px solid var(--mint);
  border-top-left-radius: 3px;
  opacity: .7;
  pointer-events: none;
}
body .button.outline:not(.plan-cta):hover {
  border-color: #8ac6a4;
  background: #a9f5cf08;
}
.text-link { text-decoration-color: #a9f5cf40; text-underline-offset: 6px; }
.text-link:hover { color: #d4ffe7; text-decoration-color: #d4ffe7; }
.eyebrow { color: #a5e4c3; }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 11px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 1px;
}

/* Preserve the original welcome composition and server illustration. */
.view-home .hero {
  background: radial-gradient(ellipse at 83% 30%, #1a4e3719, transparent 53%),
              radial-gradient(ellipse at 10% 96%, #13372d16, transparent 60%), #070e0c;
  border-bottom-color: #a9f5cf26;
}
.view-home .hero::before {
  background-image: linear-gradient(#8ddbba06 1px, transparent 1px),
                    linear-gradient(90deg, #8ddbba06 1px, transparent 1px);
  background-size: 72px 72px;
}
.view-home .hero-copy h1 { font-weight: 570; letter-spacing: -.064em; }
.view-home .accent-text {
  background: linear-gradient(105deg, #c7ffdc, #9ae0c7);
  -webkit-background-clip: text;
  background-clip: text;
}
.view-home .hero-copy > p { color: #a9bbb0; }
.view-home .hero-copy .pill {
  border: 0;
  border-left: 2px solid var(--mint);
  border-radius: 0;
  padding: 2px 0 2px 13px;
  background: transparent;
  color: #b8e6ce;
  letter-spacing: .12em;
}
.view-home .hero-copy .pill svg { width: 15px; height: 15px; }
.view-home .hero-metrics > div { border-color: #75b9973b; }
.view-home .hero-metrics strong { font-weight: 500; letter-spacing: -.07em; }
.view-home .hero-metrics small { color: #9db0a4; }

/* Features sit on connected rules. No card surfaces or enclosing frames. */
.section-heading h2 { font-weight: 550; }
.view-home .info-card,
body:not(.view-home) .info-card {
  position: relative;
  border-top-color: #375343;
}
.info-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 36px;
  background: #a9f5cf99;
  transition: width .35s ease, opacity .35s ease;
  pointer-events: none;
}
.info-card:hover::before { width: 86px; opacity: 1; }
.view-home .info-card .icon-tile,
body:not(.view-home) .info-card .icon-tile {
  position: relative;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle, #a9f5cf0b, transparent 75%);
  color: #ade6c5;
}
.info-card .icon-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#69a487, #69a487) left top / 7px 1px no-repeat,
              linear-gradient(#69a487, #69a487) left top / 1px 7px no-repeat,
              linear-gradient(#69a487, #69a487) right bottom / 7px 1px no-repeat,
              linear-gradient(#69a487, #69a487) right bottom / 1px 7px no-repeat;
  opacity: .65;
  pointer-events: none;
  transition: opacity .25s ease;
}
.info-card:hover .icon-tile::after { opacity: 1; }
.view-home .info-card h3,
body:not(.view-home) .info-card h3 { color: #e4efe7; font-weight: 550; }
.view-home .info-card p,
body:not(.view-home) .info-card p { font-size:var(--text-base); line-height: 1.85; }
.view-home .how-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #0c1712, #07100d 58%, #0a1711);
  border-color: #31513c;
}
.view-home .how-section::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -100px;
  top: -180px;
  border-radius: 50%;
  border: 1px solid #a9f5cf14;
  box-shadow: 0 0 0 32px #a9f5cf03, 0 0 0 65px #a9f5cf04, 0 0 0 98px #a9f5cf03;
  pointer-events: none;
}
.view-home .how-section > .container { position: relative; }
.view-home .steps-grid article {
  position: relative;
  border-top-color: #477055;
}
.view-home .steps-grid article::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #abf5c7;
  left: 0;
  top: -3px;
  box-shadow: 0 0 12px #a9f5cf26;
}
.view-home .step-number { font-weight: 450; color: #a0d7b4; letter-spacing: -.06em; }
.view-home .steps-grid p { font-size:var(--text-base); line-height: 1.85; }
.view-home .faq-answer { font-size:var(--text-base); }
.faq-list summary:hover { color: var(--mint); }
.faq-list details[open] { border-bottom-color: #74a88a; }
.table-wrap thead { border-bottom: 1px solid #668c74; }
.table-wrap tbody tr { transition: background .22s ease; }
.table-wrap tbody tr:hover { background: #a9f5cf04; }

/* The call to action is an open horizon with a quiet orbital watermark. */
.cta-block,
body:not(.view-home) .cta-block {
  position: relative;
  overflow: hidden;
  padding-block: 48px;
  border-block: 1px solid #5a8065;
  background: radial-gradient(ellipse at 95% 50%, #185a3513, transparent 58%);
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: 40px;
  top: calc(50% - 130px);
  border: 1px solid #a9f5cf18;
  border-radius: 50%;
  box-shadow: 0 0 0 24px #a9f5cf03, 0 0 0 48px #a9f5cf04, 0 0 0 72px #a9f5cf02;
  pointer-events: none;
}
.cta-block::after {
  content: "";
  position: absolute;
  right: 286px;
  top: calc(50% - 43px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a9f5cf66;
  box-shadow: 252px 84px #a9f5cf66;
  pointer-events: none;
}
.cta-block h2 { color: #e7f8eb; }
footer {
  position: relative;
  background: linear-gradient(0deg, #060b09, #0a130e);
  border-top-color: #31523c;
}
.footer-brand .brand { margin-bottom: 22px; }
.footer-brand p { color: #98ad9e; }
.footer-column h3 { color: #c0dfcc; font-weight: 600; }
.footer-column a { color: #a1b4a7; }
.footer-column a:hover { color: #caffe0; }
.footer-bottom { border-top-color: #2c4032; }
.back-top { border-color: #557f61; border-radius: 2px 8px 2px 2px; }

/* Carry the identity into account and checkout without implying a status. */
body:is(.view-login,.view-signup,.view-deploy,.view-track,.view-service,.view-dashboard) {
  --client-line: #8bd6aa24;
  --client-muted: #9eb0a3;
}
body:is(.view-login,.view-signup,.view-deploy,.view-track,.view-service,.view-dashboard) #main {
  background: radial-gradient(ellipse at 88% 0, #3473480c, transparent 52%);
}
.auth-symbol > span { border-color: #649a7945; }
.auth-symbol > span::before { border-color: #a9f5cf45; }
.auth-symbol > svg { filter: drop-shadow(0 0 16px #a9f5cf20); }
.view-dashboard .dashboard-heading { border-bottom-color: #62806b; }
.view-dashboard .dashboard-tabs > a { border-radius: 0; border-left: 1px solid transparent; }
.view-dashboard .dashboard-tabs > a.active {
  border-left-color: var(--mint);
  background: linear-gradient(90deg, #a9f5cf0b, transparent);
  color: var(--mint);
}
.view-dashboard .account-avatar {
  border-radius: 8px 2px 8px 2px;
  color: #c9ffdc;
  background: linear-gradient(135deg, #a9f5cf12, #a9f5cf03);
  border-color: #a9f5cf44;
}
.view-dashboard .dashboard-stats strong { color: #d5f5df; font-weight: 450; }
.view-dashboard .dashboard-stats .metric-line { width: 26px; background: #a0e5b6; }
.view-dashboard .dashboard-signal > svg { color: #a3deb9; }
.view-dashboard .signal-orbit { border-color: #a9f5cf2b; }
.view-dashboard .signal-orbit.orbit-two { border-color: #a9f5cf18; }
.view-dashboard .dashboard-start { background: radial-gradient(ellipse at 100% 50%, #a9f5cf03, transparent 75%); }
.client-form.form-panel :is(input,select,textarea),
body.view-contact .form-panel :is(input,textarea),
.view-track .track-form input {
  border-color: #425d49;
  border-radius: 3px 8px 3px 3px;
  background: #a9f5cf02;
}
.client-form.form-panel :is(input,select,textarea):focus,
body.view-contact .form-panel :is(input,textarea):focus,
.view-track .track-form input:focus {
  border-color: #b8f9ce;
  background: #a9f5cf04;
}
.checkout-heading, .checkout-shell { --checkout-line: #8bd6aa26; --checkout-subtle: #9eb0a3; }
.checkout-steps [aria-current] span { border-radius: 7px 2px 7px 2px; }
.checkout-grid { border-top-color: #6c8a71; }
.checkout-plan-mark span { border-color: #b3f9ce; }
.checkout-summary h2 { color: #d5f5df; }
.checkout-section .checkout-section-top { padding-bottom: 12px; border-bottom: 1px solid #8bd6aa22; }

/* Keep decorative structure out of the mobile reading and control areas. */
@media (max-width: 1250px) {
  .nav-wrap { gap: 22px; }
  .brand > span { font-size:1.5rem; }
  .brand img { width: 36px; height: 36px; }
}
@media (max-width: 1050px) {
  .nav-wrap { min-height: 72px; }
  .nav-wrap nav { top: 72px; }
  .nav-wrap nav > a { font-size:var(--text-base); }
}
@media (max-width: 760px) {
  .nav-wrap { min-height: 66px; gap: 13px; }
  .nav-wrap nav { top: 66px; }
  .brand { gap: 9px; }
  .brand img { width: 32px; height: 32px; }
  .brand > span { font-size:1.375rem; letter-spacing: -1.1px; }
  .view-home .hero-copy h1 { letter-spacing: -.06em; }
  .view-home .hero-copy > p { line-height: 1.85; }
  .view-home .how-section::before { width: 300px; height: 300px; top: -180px; right: -220px; }
  .cta-block, body:not(.view-home) .cta-block { padding-block: 34px; }
  .cta-block::before { right: -190px; opacity: .7; }
  .cta-block::after { display: none; }
  .footer-brand .brand img { width: 36px; height: 36px; }
  .footer-brand .brand > span { font-size:1.625rem; }
}
@media (max-width: 390px) {
  .nav-wrap { gap: 10px; }
  .brand { gap: 7px; }
  .brand img { width: 28px; height: 28px; }
  .brand > span { font-size:var(--text-card); }
  .eyebrow { letter-spacing: .1em; }
  .eyebrow::before { margin-right: 8px; }
}
@media (max-width: 480px) {
  .site-header .nav-wrap { gap: 8px; }
  .site-header .nav-actions { gap: 8px; }
  body .site-header .nav-actions .button {
    min-height: 34px;
    width: auto;
    padding: 8px 10px;
    font-size:var(--text-sm);
    line-height: 1.5;
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .site-header .nav-wrap { gap: 6px; }
  .site-header .brand { gap: 7px; }
  .site-header .brand img { width: 26px; height: 26px; }
  .site-header .brand > span { font-size:var(--text-card); }
}
@media (prefers-reduced-motion: reduce) {
  .info-card::before, .info-card .icon-tile::after,
  body .button:not(.plan-cta), .table-wrap tbody tr { transition: none; }
  body .button:not(.plan-cta):hover { transform: none; }
}