/* Homepage design, shared by both homepages and all service pages. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
      margin: 0;
      color: var(--ink);
      background: #071225;
      letter-spacing: 0;
      max-width: 100%;
      overflow-x: hidden;
    }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero {
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(4, 12, 31, .68), rgba(4, 12, 31, .92)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 92px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px),
        #071225;
    }
.hero::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 38%;
      background: linear-gradient(180deg, transparent, rgba(30, 232, 240, .08));
      pointer-events: none;
    }
.hero-grid {
      position: relative;
      z-index: 1;
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.04fr) minmax(320px, .96fr);
      align-items: center;
      gap: 54px;
      padding: 42px 0 84px;
    }
.eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #9beef1;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
    }
.eyebrow::before {
      content: "";
      width: 42px;
      height: 2px;
      background: var(--cyan);
    }
h1 {
      margin: 18px 0 20px;
      font-size: clamp(46px, 8vw, 92px);
      line-height: .94;
      letter-spacing: 0;
      max-width: 780px;
    }
.hero-copy {
      max-width: 660px;
      color: #c5d4e8;
      font-size: clamp(18px, 2.1vw, 23px);
      line-height: 1.45;
      margin: 0;
    }
.actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }
.button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 6px;
      padding: 12px 18px;
      font: inherit;
      border: 1px solid var(--line);
      font-weight: 750;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
    }
.button.primary {
      color: #031224;
      background: linear-gradient(90deg, #31f3ee, #4aa0ff);
      border-color: transparent;
    }
.button:disabled { opacity: .62; cursor: wait; }
.button.secondary { background: rgba(255,255,255,.055); color: #eef6ff; }
.hero-logo {
      position: relative;
      min-height: 680px;
      display: grid;
      grid-template-rows: auto minmax(150px, 1fr) 250px;
      align-content: center;
      gap: 18px;
      padding: 26px;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid rgba(172,210,255,.16);
      background:
        linear-gradient(135deg, rgba(11,118,255,.18), rgba(30,232,240,.08) 42%, rgba(255,176,87,.05)),
        rgba(2, 10, 26, .66);
    }
.hero-brand-lockup {
      position: relative;
      z-index: 2;
      width: min(430px, 88%);
      align-self: center;
      justify-self: center;
      isolation: isolate;
    }
.hero-brand-lockup > [data-fastvps-hero-logo] {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 28px 80px rgba(0, 137, 255, .28));
    }
.hero-logo .metric {
      position: relative;
      z-index: 3;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 27px;
      border: 1px solid rgba(172,210,255,.14);
      background: rgba(172,210,255,.12);
    }
.metric > span {
      display: block;
      padding: 14px;
      background: rgba(3, 14, 34, .86);
      color: #c9d7e7;
      font-size: 13px;
    }
.metric strong {
      display: block;
      color: #fff;
      font-size: 18px;
      margin-bottom: 2px;
    }
.metric .metric-text { display: block; }
.hero-renewable-stack {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-rows: minmax(0, 194px) 48px;
      gap: 8px;
      width: 100%;
      height: 250px;
      min-height: 0;
    }
.hero-renewables {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: visible;
      filter: drop-shadow(0 14px 30px rgba(0, 118, 255, .18));
    }
.renewable-weather-status {
      position: absolute;
      z-index: 4;
      top: 12px;
      right: 12px;
      display: grid;
      justify-items: end;
      gap: 2px;
      padding: 5px 7px;
      border: 1px solid rgba(71, 209, 140, .24);
      border-radius: 4px;
      background: rgba(5, 17, 37, .82);
      pointer-events: none;
    }
.renewable-weather-status strong {
      color: #75e7a0;
      font-size: 10px;
      line-height: 1;
    }
.renewable-weather-status strong.is-stale { color: #ffca66; }
.renewable-weather-status span {
      color: #7f9cb5;
      font-size: 8px;
      line-height: 1.2;
    }
.renewable-ground {
      fill: none;
      stroke: rgba(159, 178, 200, .34);
      stroke-width: 2;
    }
.renewable-sun-halo {
      fill: rgba(255, 202, 102, .13);
      stroke: rgba(255, 202, 102, .32);
      stroke-width: 2;
    }
.renewable-sun-core {
      fill: #ffca66;
      filter: drop-shadow(0 0 13px rgba(255, 176, 87, .66));
      transform-box: fill-box;
      transform-origin: center;
      animation: fastvps-sun-pulse 3.2s ease-in-out infinite;
    }
.renewable-sun-rays {
      fill: none;
      stroke: #ffb057;
      stroke-linecap: round;
      stroke-width: 4;
      transform-box: view-box;
      transform-origin: 0 0;
      animation: fastvps-sun-rays 15s linear infinite;
    }
.renewable-celestial[hidden],
.renewable-solar-beams[hidden],
.renewable-cloud-layer[hidden] {
      display: none;
    }
.renewable-moon-halo {
      fill: rgba(184, 219, 255, .08);
      stroke: rgba(184, 219, 255, .2);
      stroke-width: 2;
    }
.renewable-moon-shadow {
      fill: #0a1730;
      stroke: rgba(223, 249, 255, .46);
      stroke-width: 1.5;
    }
.renewable-moon-light {
      fill: #dff5ff;
      filter: drop-shadow(0 0 9px rgba(172, 210, 255, .5));
    }
.renewable-solar-beam {
      fill: none;
      stroke: #ffca66;
      stroke-dasharray: 8 11;
      stroke-linecap: round;
      stroke-width: 3;
      animation: fastvps-solar-flow 1.8s linear infinite;
    }
.renewable-solar-beam:nth-child(2) { animation-delay: -.6s; }
.renewable-solar-beam:nth-child(3) { animation-delay: -1.2s; }
.renewable-cloud-layer {
      opacity: var(--fastvps-cloud-opacity, .45);
      transition: opacity .8s ease;
    }
.renewable-cloud-anchor { transition: opacity .8s ease; }
.renewable-cloud-layer[data-cloud-density="low"] .renewable-cloud-anchor:nth-child(n/**/+2),
.renewable-cloud-layer[data-cloud-density="medium"] .renewable-cloud-anchor:nth-child(3) { opacity: 0; }
.renewable-cloud-shape {
      fill: rgba(205, 225, 244, .82);
      stroke: rgba(121, 169, 211, .6);
      stroke-width: 1.5;
      filter: drop-shadow(0 5px 7px rgba(2, 10, 26, .26));
      transform-box: fill-box;
      transform-origin: center;
      animation: fastvps-cloud-drift var(--fastvps-cloud-duration, 24s) ease-in-out infinite alternate;
    }
.renewable-panel-frame {
      fill: rgba(9, 94, 183, .88);
      stroke: #8fdcf6;
      stroke-linejoin: round;
      stroke-width: 3;
    }
.renewable-panel-edge {
      fill: rgba(2, 10, 26, .92);
      stroke: rgba(127, 156, 181, .78);
      stroke-linejoin: round;
      stroke-width: 2;
    }
.renewable-panel-grid {
      fill: none;
      stroke: rgba(205, 244, 255, .68);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.6;
    }
.renewable-panel-stand {
      fill: none;
      stroke: #9fb2c8;
      stroke-linecap: round;
      stroke-width: 5;
    }
.renewable-wind-line {
      fill: none;
      stroke: #39dce8;
      stroke-dasharray: 34 16;
      stroke-linecap: round;
      stroke-width: 3;
      animation: fastvps-wind-flow var(--fastvps-wind-duration, 1.65s) linear infinite;
      animation-play-state: var(--fastvps-wind-play, running);
    }
.renewable-wind-line:nth-child(2) { animation-delay: -.55s; }
.renewable-wind-line:nth-child(3) { animation-delay: -1.1s; }
.renewable-turbine-mast {
      fill: rgba(238, 246, 255, .2);
      stroke: #b9cce0;
      stroke-linejoin: round;
      stroke-width: 3;
    }
.renewable-turbine-perspective {
      width: 640px;
      height: 280px;
      transform-origin: 516px 94px;
      transform: perspective(540px) rotateY(-60deg) scaleX(1.414214);
    }
.renewable-turbine-viewport {
      display: block;
      width: 640px;
      height: 280px;
      overflow: visible;
    }
.renewable-turbine-rotor {
      fill: #5af1ef;
      stroke: #dffcff;
      stroke-linejoin: round;
      stroke-width: 1.5;
      filter: drop-shadow(0 0 10px rgba(30, 232, 240, .42));
      transform-box: view-box;
      transform-origin: 516px 94px;
      animation: fastvps-turbine-spin-clockwise var(--fastvps-turbine-duration, 4.2s) linear infinite;
      animation-play-state: var(--fastvps-turbine-play, running);
    }
.renewable-turbine-hub {
      fill: #eef6ff;
      stroke: #0b76ff;
      stroke-width: 4;
    }
.renewable-power-circuit {
      position: absolute;
      z-index: 1;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }
.renewable-power-cable {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
.renewable-power-cable--base {
      stroke: rgba(111, 153, 187, .48);
      stroke-width: 4;
    }
.renewable-power-cable--flow {
      stroke: #79ffe1;
      stroke-width: 3;
      stroke-dasharray: 3 14;
      filter: drop-shadow(0 0 5px rgba(121, 255, 225, .82));
      animation: fastvps-power-flow var(--fastvps-power-duration, 2.2s) linear infinite;
      animation-play-state: var(--fastvps-power-play, paused);
      opacity: var(--fastvps-power-opacity, 0);
      transition: opacity .8s ease;
    }
.renewable-power-cable--solar {
      --fastvps-power-duration: var(--fastvps-solar-cable-duration, 2.2s);
      --fastvps-power-play: var(--fastvps-solar-cable-play, paused);
      --fastvps-power-opacity: var(--fastvps-solar-cable-opacity, 0);
    }
.renewable-power-cable--wind {
      --fastvps-power-duration: var(--fastvps-wind-cable-duration, 2.2s);
      --fastvps-power-play: var(--fastvps-wind-cable-play, paused);
      --fastvps-power-opacity: var(--fastvps-wind-cable-opacity, 0);
    }
.renewable-power-cable--combined {
      --fastvps-power-duration: var(--fastvps-combined-cable-duration, 2.2s);
      --fastvps-power-play: var(--fastvps-combined-cable-play, paused);
      --fastvps-power-opacity: var(--fastvps-combined-cable-opacity, 0);
    }
.renewable-power-junction rect {
      fill: rgba(5, 21, 43, .96);
      stroke: rgba(121, 255, 225, .82);
      stroke-width: 2;
      filter: drop-shadow(0 0 7px rgba(30, 232, 240, .28));
    }
.renewable-power-junction circle,
.renewable-power-port {
      fill: #79ffe1;
      filter: drop-shadow(0 0 6px rgba(121, 255, 225, .8));
      opacity: var(--fastvps-combined-cable-opacity, 0);
      transition: opacity .8s ease;
    }
.carbon-story__actions small a { color: #75e7a0; }
.hero-carbon-gauges {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }
.hero-carbon-gauge {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto 6px;
      align-items: center;
      gap: 4px 8px;
      min-width: 0;
      padding: 7px 9px;
      border: 1px solid rgba(71, 209, 140, .24);
      border-radius: 6px;
      background: rgba(3, 14, 34, .82);
    }
.hero-carbon-gauge__label {
      color: #9fb2c8;
      font-size: 9px;
      font-weight: 800;
      line-height: 1.05;
      text-transform: uppercase;
      white-space: normal;
    }
.hero-carbon-gauge strong {
      color: #eef6ff;
      font-size: 11px;
      line-height: 1;
      white-space: nowrap;
    }
.hero-carbon-gauge strong small {
      color: #75e7a0;
      font-size: 8px;
      font-weight: 800;
    }
.hero-carbon-gauge__track {
      grid-column: 1 / -1;
      height: 6px;
      overflow: hidden;
      border-radius: 3px;
      background: rgba(255, 255, 255, .09);
    }
.hero-carbon-gauge__fill {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #1ee8f0, #47d18c);
      box-shadow: 0 0 10px rgba(71, 209, 140, .28);
      transition: width .8s ease;
    }
.hero-carbon-gauges.is-unavailable .hero-carbon-gauge__fill { opacity: .28; }
@keyframes fastvps-sun-pulse {
      0%, 100% { opacity: .9; transform: scale(.94); }
      50% { opacity: 1; transform: scale(1.08); }
    }
@keyframes fastvps-sun-rays {
      to { transform: rotate(360deg); }
    }
@keyframes fastvps-solar-flow {
      to { stroke-dashoffset: -38; }
    }
@keyframes fastvps-wind-flow {
      to { stroke-dashoffset: -50; }
    }
@keyframes fastvps-power-flow {
      to { stroke-dashoffset: -34; }
    }
@keyframes fastvps-cloud-drift {
      from { transform: translateX(-10px); }
      to { transform: translateX(16px); }
    }
@keyframes fastvps-turbine-spin-clockwise {
      to { transform: rotate(360deg); }
    }
.section {
      padding: 78px 0;
      background: var(--paper);
      color: var(--paper-ink);
    }
.section.dark {
      background: #071225;
      color: var(--ink);
    }
.section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 32px;
      margin-bottom: 30px;
    }
.section h2 {
      margin: 0;
      font-size: clamp(32px, 4.8vw, 56px);
      line-height: 1;
      letter-spacing: 0;
    }
.section-head p {
      margin: 0;
      color: var(--paper-muted);
      max-width: 520px;
      font-size: 17px;
      line-height: 1.55;
    }
.dark .section-head p { color: var(--muted); }
.services {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
.service {
      border: 1px solid #dbe4ef;
      background: #fff;
      border-radius: 8px;
      padding: 26px;
      min-height: 288px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
.service h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: 0; }
.service p { margin: 0; color: var(--paper-muted); line-height: 1.55; }
.service ul {
      margin: 24px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
      color: #334258;
    }
.service li::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--blue);
      margin-right: 10px;
    }
.service:nth-child(2) li::before { background: var(--green); }
.service:nth-child(3) li::before { background: var(--orange); }
.ops {
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      gap: 36px;
      align-items: stretch;
    }
.ops-panel {
      border: 1px solid rgba(172,210,255,.18);
      background: var(--panel);
      border-radius: 8px;
      padding: 28px;
    }
.ops-panel h3 { margin: 0 0 16px; font-size: 28px; }
.ops-panel p { margin: 0; color: var(--muted); line-height: 1.6; }
.checks {
      display: grid;
      gap: 12px;
    }
.check {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 20px;
      align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid rgba(172,210,255,.14);
    }
.check:last-child { border-bottom: 0; }
.check strong { color: #fff; }
.check span { color: var(--muted); line-height: 1.45; }
.pill {
      width: fit-content;
      padding: 6px 10px;
      border: 1px solid rgba(30,232,240,.42);
      border-radius: 999px;
      color: #adfbff;
      font-size: 13px;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 16px;
    }
.plans {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 14px;
    }
.plan {
      border: 1px solid rgba(172,210,255,.16);
      background: rgba(255,255,255,.045);
      border-radius: 8px;
      padding: 20px;
      min-height: 276px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
.plan b { display: block; font-size: 20px; }
.plan span { display: block; color: var(--muted); line-height: 1.48; }
.plan-label {
      width: fit-content;
      padding: 5px 9px;
      border: 1px solid rgba(71,209,140,.42);
      border-radius: 999px;
      color: #b8ffd7;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
.plan-price {
      color: #fff;
      font-size: 34px;
      line-height: 1;
      letter-spacing: 0;
    }
.plan-price > [data-hosting-starting-price] {
      display: inline;
      color: inherit;
      line-height: inherit;
    }
.plan-price small {
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }
.plan ul {
      margin: auto 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
      color: #d6e4f4;
      font-size: 14px;
      line-height: 1.42;
    }
.plan li::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 2px;
      background: var(--green);
      margin-right: 9px;
    }
.feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
.feature-card {
      border: 1px solid #dbe4ef;
      background: #fff;
      border-radius: 8px;
      padding: 26px;
      min-height: 220px;
    }
.feature-kicker {
      display: block;
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 14px;
    }
.feature-card h3 {
      margin: 0 0 12px;
      font-size: 25px;
      letter-spacing: 0;
    }
.feature-card p {
      margin: 0;
      color: var(--paper-muted);
      line-height: 1.58;
    }
.generator {
      display: grid;
      grid-template-columns: minmax(0, 1.16fr) minmax(300px, .84fr);
      gap: 22px;
      align-items: stretch;
    }
.generator > * {
      min-width: 0;
      max-width: 100%;
    }
.generator-controls,
.generator-summary {
      border: 1px solid rgba(172,210,255,.16);
      background: rgba(255,255,255,.045);
      border-radius: 8px;
      padding: 24px;
    }
.generator-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
.field {
      display: grid;
      gap: 8px;
    }
.field span {
      color: #d9e8f9;
      font-size: 14px;
      font-weight: 800;
    }
.field select,
.field input[type="number"] {
      width: 100%;
      min-height: 46px;
      border: 1px solid rgba(172,210,255,.26);
      border-radius: 6px;
      background: #0c1c35;
      color: #fff;
      padding: 0 12px;
      font: inherit;
      outline: none;
    }
.field select:focus,
.field input[type="number"]:focus {
      border-color: rgba(30,232,240,.82);
      box-shadow: 0 0 0 3px rgba(30,232,240,.12);
    }
.field small {
      color: var(--muted);
      line-height: 1.42;
    }
.checkbox-field {
      border: 1px solid rgba(172,210,255,.18);
      border-radius: 8px;
      padding: 14px;
      background: rgba(3, 14, 34, .38);
    }
.checkbox-field input {
      width: 18px;
      height: 18px;
      accent-color: var(--cyan);
    }
.checkbox-label {
      display: flex;
      align-items: center;
      gap: 10px;
    }
.generator-summary {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
    }
.generator-summary h3 {
      margin: 0;
      font-size: 24px;
      letter-spacing: 0;
    }
.generator-price {
      color: #fff;
      font-size: clamp(44px, 7vw, 72px);
      line-height: .95;
      font-weight: 900;
      letter-spacing: 0;
    }
.generator-summary p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }
.generator-note {
      border-top: 1px solid rgba(172,210,255,.14);
      padding-top: 14px;
      font-size: 14px;
    }
#hosting-generator .generator {
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
      gap: 24px;
      align-items: stretch;
    }
#hosting-generator .generator-controls,
#hosting-generator .generator-summary {
      border-color: rgba(80, 211, 225, .22);
      background: rgba(10, 27, 49, .92);
      box-shadow: 0 18px 48px rgba(1, 8, 22, .22);
    }
#hosting-generator .generator-controls {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto 1fr;
      gap: 20px;
      align-content: start;
      align-items: start;
      padding: 22px;
    }
.hosting-generator-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(172,210,255,.14);
    }
.hosting-generator-heading h3 {
      margin: 0;
      color: #f4fbff;
      font-size: 21px;
      line-height: 1.2;
      letter-spacing: 0;
    }
.hosting-generator-heading .pill {
      flex: 0 0 auto;
      white-space: nowrap;
    }
.hosting-generator-fields {
      display: grid;
      gap: 18px;
      width: 100%;
    }
#hosting-generator .field {
      display: grid;
      grid-template-rows: auto 48px auto;
      gap: 8px;
      align-content: start;
      min-width: 0;
    }
#hosting-generator .field select {
      display: block;
      height: 48px;
      min-height: 48px;
      max-height: 48px;
      padding: 0 14px;
      border-color: rgba(80, 211, 225, .3);
      background-color: #07182f;
      font-size: 15px;
      line-height: 48px;
      cursor: pointer;
    }
#hosting-generator .field small {
      font-size: 13px;
      line-height: 1.45;
    }
.static-ip-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-width: 0;
      padding: 13px 14px;
      border: 1px solid rgba(98,232,220,.3);
      border-radius: 8px;
      background: rgba(6,21,38,.72);
      color: #f4fbff;
      cursor: pointer;
    }
.static-ip-option:hover {
      border-color: rgba(98,232,220,.62);
      background: rgba(12,39,61,.82);
    }
.static-ip-option:focus-within {
      outline: 2px solid rgba(98,232,220,.72);
      outline-offset: 2px;
    }
.static-ip-option input {
      width: 20px;
      height: 20px;
      margin: 0;
      accent-color: #62e8dc;
      cursor: pointer;
    }
.static-ip-option-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }
.static-ip-option-copy strong {
      font-size: 14px;
      line-height: 1.25;
    }
.static-ip-option-copy small {
      color: #9fb5cd;
      font-size: 12px;
      line-height: 1.4;
    }
.hosting-inclusions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 22px;
      padding-top: 8px;
      border-top: 1px solid rgba(172,210,255,.14);
      align-self: end;
    }
.hosting-inclusions span {
      position: relative;
      min-width: 0;
      padding: 10px 0 10px 20px;
      color: #d9e8f9;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.35;
    }
.hosting-inclusions span::before {
      content: "";
      position: absolute;
      left: 0;
      top: 15px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #31f3ee;
      box-shadow: 0 0 0 3px rgba(49,243,238,.12);
    }
#hosting-generator .generator-summary {
      gap: 14px;
      padding: 22px;
    }
#hosting-generator .generator-summary h3 {
      margin-top: 10px;
      font-size: 22px;
    }
.hosting-price-caption {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }
#hosting-generator .generator-price {
      font-size: clamp(40px, 5vw, 56px);
      line-height: 1;
    }
#hosting-generator .mail-breakdown {
      gap: 0;
      padding: 4px 14px;
    }
#hosting-generator .breakdown-row {
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid rgba(172,210,255,.1);
    }
#hosting-generator .breakdown-row:last-child {
      border-bottom: 0;
    }
#hosting-generator [data-hosting-summary] {
      color: #d9e8f9;
      font-size: 13px;
    }
#hosting-generator .button.primary {
      width: 100%;
      min-height: 48px;
    }
@media (max-width: 900px){
#hosting-generator .generator {
        grid-template-columns: minmax(0, 1fr);
      }

}
@media (max-width: 520px){
#hosting-generator .generator-controls,
#hosting-generator .generator-summary {
        padding: 18px;
      }
.hosting-inclusions {
        grid-template-columns: minmax(0, 1fr);
      }
#hosting-generator .field select {
        font-size: 14px;
      }
#hosting-generator .generator-price {
        font-size: 40px;
      }

}
.reseller-hosting-block {
      margin-top: 48px;
      padding-top: 38px;
      border-top: 1px solid rgba(172,210,255,.16);
    }
.reseller-hosting-heading {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      margin-bottom: 22px;
    }
.reseller-hosting-heading h3 {
      margin: 10px 0 8px;
      color: #f4fbff;
      font-size: 28px;
      line-height: 1.15;
      letter-spacing: 0;
    }
.reseller-hosting-heading p {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }
.reseller-cycle-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(112px, 1fr));
      gap: 4px;
      padding: 4px;
      border: 1px solid rgba(172,210,255,.22);
      border-radius: 8px;
      background: rgba(5,18,37,.76);
    }
.reseller-cycle-switch button {
      min-height: 40px;
      padding: 8px 14px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: #b9cce2;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0;
      cursor: pointer;
    }
.reseller-cycle-switch button:hover,
.reseller-cycle-switch button:focus-visible {
      color: #fff;
      background: rgba(80,211,225,.1);
    }
.reseller-cycle-switch button.is-active {
      color: #061526;
      background: #62e8dc;
    }
.reseller-hosting-controls {
      display: grid;
      gap: 10px;
      min-width: 250px;
    }
.reseller-static-ip-option {
      min-height: 50px;
    }
.reseller-plan-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
.reseller-plan {
      --reseller-accent: #62e8dc;
      position: relative;
      display: grid;
      grid-template-rows: auto auto 1fr auto auto;
      gap: 16px;
      min-width: 0;
      padding: 20px;
      overflow: hidden;
      border: 1px solid rgba(172,210,255,.18);
      border-radius: 8px;
      background: rgba(8,24,45,.9);
      box-shadow: 0 16px 38px rgba(1,8,22,.2);
    }
.reseller-plan::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: var(--reseller-accent);
    }
.reseller-plan[data-reseller-plan="studio"] { --reseller-accent: #9ee37d; }
.reseller-plan[data-reseller-plan="scale"] { --reseller-accent: #ffd166; }
.reseller-plan[data-reseller-plan="atlas"] { --reseller-accent: #ff8f70; }
.reseller-plan header {
      display: grid;
      gap: 6px;
    }
.reseller-plan h4 {
      margin: 0;
      color: #fff;
      font-size: 23px;
      line-height: 1.15;
      letter-spacing: 0;
    }
.reseller-plan header p {
      min-height: 40px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
.reseller-plan-kicker {
      color: var(--reseller-accent);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }
.reseller-plan-price {
      display: grid;
      gap: 3px;
    }
.reseller-plan-price strong {
      color: #fff;
      font-size: 29px;
      line-height: 1;
      letter-spacing: 0;
    }
.reseller-plan-price span {
      color: #a9bdd5;
      font-size: 12px;
    }
.reseller-plan ul {
      display: grid;
      align-content: start;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
.reseller-plan li {
      position: relative;
      padding-left: 16px;
      color: #dceaf8;
      font-size: 13px;
      line-height: 1.4;
    }
.reseller-plan li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--reseller-accent);
    }
.reseller-plan-billing {
      display: grid;
      gap: 4px;
      padding-top: 13px;
      border-top: 1px solid rgba(172,210,255,.12);
    }
.reseller-plan-billing span {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
    }
.reseller-plan-billing small {
      color: var(--reseller-accent);
      font-size: 12px;
      line-height: 1.35;
    }
.reseller-plan .button {
      width: 100%;
      min-height: 44px;
      border-color: color-mix(in srgb, var(--reseller-accent) 55%, transparent);
    }
@media (max-width: 1100px){
.reseller-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

}
@media (max-width: 720px){
.reseller-hosting-heading {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
      }
.reseller-cycle-switch {
        width: 100%;
      }
.reseller-hosting-controls {
        width: 100%;
        min-width: 0;
      }

}
@media (max-width: 560px){
.reseller-plan-grid {
        grid-template-columns: minmax(0, 1fr);
      }
.reseller-plan header p {
        min-height: 0;
      }

}
.mail-presets {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
.mail-business-title {
      grid-column: 1 / -1;
      border: 1px solid rgba(30,232,240,.42);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(30,232,240,.12), rgba(11,118,255,.06));
      padding: 18px;
      display: grid;
      gap: 8px;
    }
.mail-business-title strong {
      color: #fff;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1;
    }
.mail-business-title span:not(.pill) {
      color: var(--muted);
      line-height: 1.45;
    }
.mail-package {
      position: relative;
      display: block;
      cursor: pointer;
    }
.mail-package input {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }
.mail-package-body {
      min-height: 150px;
      border: 1px solid rgba(172,210,255,.18);
      border-radius: 8px;
      background: rgba(3, 14, 34, .42);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }
.mail-package:hover .mail-package-body,
.mail-package input:focus-visible + .mail-package-body {
      border-color: rgba(30,232,240,.62);
      background: rgba(30,232,240,.08);
    }
.mail-package input:checked + .mail-package-body {
      border-color: rgba(30,232,240,.9);
      background: linear-gradient(180deg, rgba(30,232,240,.16), rgba(11,118,255,.08));
      transform: translateY(-2px);
    }
.mail-package-body b {
      color: #fff;
      font-size: 18px;
      line-height: 1.2;
    }
.mail-package-body strong {
      color: #adfbff;
      font-size: 26px;
      line-height: 1;
    }
.mail-package-body span {
      color: var(--muted);
      line-height: 1.4;
      font-size: 14px;
    }
.mail-breakdown {
      display: grid;
      gap: 10px;
      border: 1px solid rgba(172,210,255,.14);
      border-radius: 8px;
      padding: 14px;
      background: rgba(3, 14, 34, .36);
    }
.breakdown-row {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: #d9e8f9;
      line-height: 1.35;
    }
.breakdown-row span:first-child {
      color: var(--muted);
    }
.mail-stance {
      display: grid;
      gap: 10px;
      color: #d9e8f9;
      line-height: 1.5;
      margin: 0;
      padding: 0;
      list-style: none;
    }
.mail-stance li {
      display: flex;
      gap: 10px;
    }
.mail-stance li::before {
      content: "";
      width: 7px;
      height: 7px;
      margin-top: 8px;
      border-radius: 2px;
      background: var(--cyan);
      flex: 0 0 auto;
    }
.order-guide {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: #07162c;
    }
.order-guide__intro {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr);
      gap: 36px;
      align-items: end;
    }
.order-guide__intro h2 {
      margin: 0;
      color: #f4f8ff;
      font-size: 42px;
      line-height: 1.08;
      letter-spacing: 0;
    }
.order-guide__intro p {
      margin: 0;
      color: var(--muted);
      line-height: 1.72;
    }
.order-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 26px;
      margin: 42px 0 0;
      padding: 0;
      list-style: none;
      counter-reset: order-step;
    }
.order-steps li {
      position: relative;
      min-height: 142px;
      padding: 40px 0 0 18px;
      border-left: 2px solid rgba(30,232,240,.45);
      color: #9fb2c8;
      font-size: 13px;
      line-height: 1.65;
      counter-increment: order-step;
    }
.order-steps li::before {
      content: counter(order-step, decimal-leading-zero);
      position: absolute;
      top: 0;
      left: 18px;
      color: var(--cyan);
      font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    }
.order-steps strong { display: block; margin-bottom: 7px; color: #edf6ff; font-size: 14px; }
.order-guide__notice { margin: 30px 0 0; padding: 18px 0; border-top: 1px solid var(--line); color: #b8c9dc; line-height: 1.7; }
.order-guide__links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 18px; }
.order-guide__links a { color: var(--cyan); font-size: 12px; font-weight: 800; }
.contact-band {
      background: #0d1f3b;
      color: #fff;
      padding: 58px 0;
    }
.contact-inner {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr);
      align-items: start;
      gap: 32px;
    }
.contact-inner h2 {
      margin: 0;
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: 0;
    }
.contact-inner p { color: #b9c9dd; margin: 10px 0 0; line-height: 1.58; }
.contact-meta {
      display: grid;
      gap: 12px;
      margin-top: 22px;
      color: #d9e7f8;
      line-height: 1.45;
    }
.contact-meta span {
      display: flex;
      gap: 10px;
      align-items: center;
    }
.contact-meta span::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--cyan);
      flex: 0 0 auto;
    }
.contact-form {
      border: 1px solid rgba(172,210,255,.16);
      background: rgba(255,255,255,.045);
      border-radius: 8px;
      padding: 24px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }
.contact-field {
      display: grid;
      gap: 8px;
    }
.contact-field.full { grid-column: 1 / -1; }
.contact-field span {
      color: #d9e8f9;
      font-size: 14px;
      font-weight: 800;
    }
.contact-field input,
.contact-field select,
.contact-field textarea {
      width: 100%;
      min-height: 46px;
      border: 1px solid rgba(172,210,255,.26);
      border-radius: 6px;
      background: #0c1c35;
      color: #fff;
      padding: 0 12px;
      font: inherit;
      outline: none;
    }
.contact-field textarea {
      min-height: 138px;
      padding: 12px;
      resize: vertical;
    }
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
      border-color: rgba(30,232,240,.82);
      box-shadow: 0 0 0 3px rgba(30,232,240,.12);
    }
.contact-actions {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }
.contact-consent {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      gap: 11px;
      align-items: start;
      color: #aebfd1;
      font-size: 12px;
      line-height: 1.55;
    }
.contact-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cyan); }
.contact-consent a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.contact-status {
      margin: 0;
      color: #b9c9dd;
      min-height: 22px;
      line-height: 1.45;
    }
.honeypot {
      position: absolute;
      left: -100vw;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
.security-field {
      grid-column: 1 / -1;
      border: 1px solid rgba(30,232,240,.28);
      background: rgba(3, 14, 34, .52);
      border-radius: 8px;
      padding: 14px;
    }
.security-check {
      display: grid;
      grid-template-columns: minmax(92px, .28fr) minmax(180px, 1fr);
      gap: 12px;
      align-items: center;
    }
.security-question {
      min-height: 46px;
      border: 1px solid rgba(172,210,255,.22);
      border-radius: 6px;
      background: rgba(5, 18, 42, .9);
      color: #adfbff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 900;
    }
.security-field small {
      color: #9fb2c8;
      line-height: 1.45;
    }
@media (max-width: 1160px) and (min-width: 901px){


}
@media (max-width: 900px){
.hero-grid,
.ops,
.feature-grid { grid-template-columns: 1fr; }
.generator { grid-template-columns: minmax(0, 1fr); }
.hero-logo { min-height: 650px; }
.section-head {
        align-items: flex-start;
        flex-direction: column;
      }
.contact-inner { grid-template-columns: 1fr; }
.order-guide__intro { grid-template-columns: 1fr; align-items: start; }
.order-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services { grid-template-columns: 1fr; }
.plans,
.mail-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 560px){
.shell { width: min(100% - 28px, 1180px); }
.hero { min-height: auto; }
.hero-grid { padding: 28px 0 58px; gap: 32px; }
.hero-logo {
        min-height: 435px;
        grid-template-rows: auto auto 190px;
        align-content: center;
        gap: 12px;
        padding: 18px;
      }
.hero-brand-lockup { width: 200px; }
.hero-logo .metric {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 36px 0 0;
      }
.hero-logo .metric > span { min-width: 0; padding: 10px 8px; font-size: 11px; }
.hero-logo .metric strong { font-size: 14px; }
.hero-renewable-stack {
        grid-template-rows: minmax(0, 142px) 40px;
        height: 190px;
      }
.hero-renewables { height: 100%; }
.hero-carbon-gauge { padding: 4px 6px; }
.hero-carbon-gauge__label { font-size: 8px; }
.hero-carbon-gauge strong { font-size: 9px; }
.hero-carbon-gauge strong small { font-size: 7px; }
.plans,
.mail-presets,
.generator-controls,
.contact-form { grid-template-columns: 1fr; }
.order-guide__intro h2 { font-size: 34px; }
.order-steps { grid-template-columns: 1fr; }
.order-steps li { min-height: 0; padding-bottom: 20px; }
.contact-actions .button { width: 100%; }
.security-check { grid-template-columns: 1fr; }
.check { grid-template-columns: 1fr; gap: 8px; }
.button { width: 100%; white-space: normal; }

}
@media (max-width: 560px){


}
@media (prefers-reduced-motion: reduce){
.renewable-sun-core,
.renewable-sun-rays,
.renewable-solar-beam,
.renewable-wind-line,
.renewable-turbine-rotor,
.renewable-cloud-shape,
.renewable-power-cable--flow { animation: none; }
.hero-carbon-gauge__fill { transition: none; }

}

/* Preserve the English homepage's existing typography and compact spacing. */
html[lang="en"] .hero-grid { padding:28px 0 60px; }
html[lang="en"] h1 { font-size:80px; }
@media(max-width:900px) { html[lang="en"] h1 { font-size:64px; } }
@media(max-width:600px) {
  html[lang="en"] h1 { font-size:46px; }
  html[lang="en"] .hero-grid { padding:18px 0 28px; gap:20px; }
  html[lang="en"] .hero-copy { font-size:18px; }
  html[lang="en"] .hero .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
  html[lang="en"] .hero-logo .metric { display:grid; }
}