/*
 * v2-home.css: the homepage (index.php, main.site-main--home), loaded right after v2.css. The shared
 * look, the scenes and the motion hooks stay in v2.css and assets/js/motion.js; this file stages the
 * homepage on them. The page runs in three light-and-dark groups: hero | platform | console |
 * applications + operating systems | locations, the four facts and the closing box (one dark run) |
 * FAQ. Everything that moves is for visitors who haven't asked for less motion and runs once (or a
 * few times, then rests); without motion.js, or with less motion, everything is simply shown.
 */

/* ── Rhythm ─────────────────────────────────────────────────────────────────────────────── */
.site-main--home :is(.section-white, .section-plain) {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
.site-main--home :is(.section-white, .section-plain) {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
}
.site-main--home .scene:not(.home-hero) {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
@media (min-width: 1024px) {
.site-main--home .scene:not(.home-hero) {
  padding-top: 9rem;
  padding-bottom: 9rem;
}
}
/* Tile sections sit on the page (grey by day, charcoal after hours), so the tiles read as objects. */
.site-main--home .section-white:not(.scene) {
  background-color: var(--color-surface);
}
/* Applications and operating systems are one chapter: the second follows the first closely. */
.site-main--home #applications {
  padding-bottom: 2.5rem;
}
.site-main--home #operating-systems {
  padding-top: 2.5rem;
}
@media (min-width: 1024px) {
.site-main--home #applications {
  padding-bottom: 3.5rem;
}
.site-main--home #operating-systems {
  padding-top: 3.5rem;
}
}
/* Locations runs straight into the four facts, which centre themselves on the screen: less room below
   the globe, so no band of empty black opens between them. */
.site-main--home #network {
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
.site-main--home #network {
  padding-bottom: 4.5rem;
}
}
/* Scenes that follow one another are one stage: no hairline between them. */
.site-main--home .scene + .scene {
  box-shadow: none;
}
.site-main--home .scene :is(.v2-stars, .v2-stars--near) {
  opacity: 0.55;
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────────── */
/* The dark picture in both themes (the hero is a scene), the light behind it, glass cards on it. */
:root .home-hero--split,
:root[data-theme='dark'] .home-hero--split {
  --v2-glow-x: 74%;
  --v2-glow-y: 48%;
  --hero-title: #ffffff;
  --hero-badge-bg: rgb(24 24 28 / 0.94);
  --hero-badge-edge: rgb(255 255 255 / 0.14);
  --hero-badge-shadow: rgb(0 0 0 / 0.55);
  --hero-badge-title: #f5f5f7;
  --hero-badge-note: #a1a1a6;
  --hero-badge-icon: #d2d2d7;
}
/* The hero's cards look the same in both themes (site.css tints them navy after hours only). */
:root[data-theme] .site-main--home .home-hero.home-hero--split {
  --amb-card: #141416;
  --color-surface-container-lowest: #141416;
}
@media (max-width: 1023.98px) {
.home-hero--split {
  --v2-glow-x: 50%;
  --v2-glow-y: 70%;
}
}
.home-hero--split .home-hero__art-img-dark {
  display: block;
}
.home-hero__badge {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
.home-hero--split .home-hero__badge-storage .home-hero__badge-icon {
  color: #6e9bff;
}
/* Depth: stars far behind (only around the picture, never behind the headline), the light, then the
   picture, which drifts a little slower than the page and leans toward the pointer. */
.home-hero--split .home-hero__stars {
  -webkit-mask-image: radial-gradient(ellipse 50% 58% at 74% 46%, #000 0, rgb(0 0 0 / 0.45) 55%, transparent 88%);
  mask-image: radial-gradient(ellipse 50% 58% at 74% 46%, #000 0, rgb(0 0 0 / 0.45) 55%, transparent 88%);
}
@media (max-width: 1023.98px) {
.home-hero--split .home-hero__stars {
  -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 46%, #000 0, rgb(0 0 0 / 0.45) 55%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 40% at 50% 46%, #000 0, rgb(0 0 0 / 0.45) 55%, transparent 90%);
}
}
.home-hero__depth {
  position: relative;
  min-width: 0;
}
@media (prefers-reduced-motion: no-preference) {
/* The three cards float a few times, then rest. */
.home-hero__badge {
  animation: v2-float 7s ease-in-out 3;
}
.home-hero__badge-uptime {
  animation-delay: -2.3s;
}
.home-hero__badge-storage {
  animation-delay: -4.6s;
}
}
@keyframes v2-float {
50% { translate: 0 -6px; }
}
/* Desktop: the first screen leaves room for "What you build" to show at its foot, instead of a band
   of empty black between the buttons and the figure. */
@media (min-width: 1024px) {
.site-main--home .home-hero__split {
  min-height: min(calc(100vh - 9rem), 75vw);
  min-height: min(calc(100svh - 9rem), 75vw);
}
.site-main--home .home-hero--split .home-hero__figure {
  margin-top: 0.5rem;
}
}
/* What you build → what it runs on: the four lines draw down as they come into view, each node lights,
   then a slow light runs down each line into the platform, three times, and rests. */
.home-hero__connector:nth-child(2) { --c: 1; }
.home-hero__connector:nth-child(3) { --c: 2; }
.home-hero__connector:nth-child(4) { --c: 3; }
.home-hero__line {
  position: relative;
}
.home-hero__line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, rgb(170 200 255 / 0), #e4eeff);
  box-shadow: 0 0 10px 2px rgb(110 155 255 / 0.7);
  opacity: 0;
}
.home-hero__node::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgb(200 220 255 / 0.95) 0, rgb(110 155 255 / 0.45) 38%, rgb(41 72 255 / 0) 70%);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
/* (the connectors wait unseen until they reach the window, then draw in place: they don't rise) */
html.v2-motion .home-hero__connectors.is-in {
  animation: none;
}
html.v2-js .home-hero__connectors.is-in .home-hero__line {
  transform-origin: 50% 0;
  animation: home-draw-y 0.7s var(--v2-ease-out) backwards;
  animation-delay: calc(0.2s + var(--c, 0) * 0.12s);
}
html.v2-js .home-hero__connectors.is-in .home-hero__node {
  animation: home-pop 0.45s var(--v2-ease-out) backwards;
  animation-delay: calc(0.7s + var(--c, 0) * 0.12s);
}
html.v2-js .home-hero__connectors.is-in .home-hero__line::after {
  animation: home-pulse 3.6s linear 3;
  animation-delay: calc(1.5s + var(--c, 0) * 0.45s);
}
html.v2-js .home-hero__connectors.is-in .home-hero__node::after {
  animation: home-node-glow 3.6s ease-out 3;
  animation-delay: calc(1.5s + var(--c, 0) * 0.45s);
}
}
@keyframes home-draw-y {
from { transform: scaleY(0); }
}
@keyframes home-pop {
from { scale: 0; opacity: 0; }
}
@keyframes home-pulse {
0% { opacity: 0; transform: translateY(-4px); }
8% { opacity: 1; }
40% { opacity: 1; transform: translateY(calc(2.25rem - 10px)); }
50%, 100% { opacity: 0; transform: translateY(calc(2.25rem - 4px)); }
}
@keyframes home-node-glow {
0%, 36% { opacity: 0; }
46% { opacity: 1; }
80%, 100% { opacity: 0; }
}

/* ── Platform: start small, scale up ───────────────────────────────────────────────────────
   Four tiles, each with a picture of its tier on a small black stage (the same floor grid in all
   four, so the growth reads: a slice drawn out of a shared server, a partitioned server, pinned
   cores, a full chassis). Wide screens: one row under a rail that fills as the row comes into view,
   a node lighting at each tile. Tablets: two by two. Phones: a column along a rail. The capacity bars
   rise as each tile arrives. */
.site-main--home {
  --home-rail: rgb(0 0 0 / 0.08);
  --home-node: #f5f5f7;
}
:root[data-theme='dark'] .site-main--home {
  --home-rail: rgb(255 255 255 / 0.1);
  --home-node: #101012;
}
.site-main--home :is(.platform__scale, .platform__track, .platform__node) {
  display: none;
}
.site-main--home .platform__paths {
  margin-top: 3rem;
}
@media (min-width: 768px) {
.site-main--home .platform__paths {
  margin-top: 3.5rem;
}
}
.site-main--home .platform__stage {
  --fill: 1;
}
.site-main--home .platform__steps {
  display: grid;
  gap: 1rem;
}
.site-main--home .platform__step:nth-child(1) { --k: 0.02; }
.site-main--home .platform__step:nth-child(2) { --k: 0.27; }
.site-main--home .platform__step:nth-child(3) { --k: 0.52; }
.site-main--home .platform__step:nth-child(4) { --k: 0.77; }
.site-main--home .platform__step,
.site-main--home .platform__step:first-child {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 0.5rem 1.75rem 1.75rem;
  box-shadow: var(--shadow-card);
}
.site-main--home .platform__art {
  position: relative;
  display: block;
  margin: 0 -1.25rem 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--v2-radius-tile) - 0.5rem);
  background-color: #000000;
}
.site-main--home .platform__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-main--home .platform__art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.07);
  pointer-events: none;
}
.site-main--home .platform__capacity {
  height: 1.5rem;
  gap: 4px;
}
.site-main--home .platform__capacity > span {
  width: 5px;
  border-radius: 3px;
}
.site-main--home .platform__capacity > :nth-child(2) { --b: 1; }
.site-main--home .platform__capacity > :nth-child(3) { --b: 2; }
.site-main--home .platform__capacity > :nth-child(4) { --b: 3; }
.site-main--home :is(.platform__level-1, .platform__level-2, .platform__level-3, .platform__level-4) {
  background-image: linear-gradient(180deg, #4f8bff, #2948ff);
  background-color: transparent;
}
:root[data-theme='dark'] .site-main--home :is(.platform__level-1, .platform__level-2, .platform__level-3, .platform__level-4) {
  background-image: linear-gradient(180deg, #7aa7ff, #2f6bff);
  box-shadow: 0 0 8px rgb(47 107 255 / 0.45);
}
.site-main--home .platform__level-1, .site-main--home .platform__level-1-off { height: 0.5rem; }
.site-main--home .platform__level-2, .site-main--home .platform__level-2-off { height: 0.8125rem; }
.site-main--home .platform__level-3, .site-main--home .platform__level-3-off { height: 1.125rem; }
.site-main--home .platform__level-4, .site-main--home .platform__level-4-off { height: 1.5rem; }
.site-main--home .platform__step-title {
  margin-top: 1rem;
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.026em;
  font-weight: 700;
}
.site-main--home .platform__step-kicker {
  margin-top: 0.5rem;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: var(--color-primary);
}
.site-main--home .platform__step .card-text {
  margin-top: 0.625rem;
  margin-bottom: 1.5rem;
  font-size: 17px;
  line-height: 1.47;
  color: var(--color-tertiary);
}
.site-main--home .platform__step-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 980px;
  padding: 0.625rem 1.125rem;
  background-color: var(--color-primary-container);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.25s ease, box-shadow 0.3s var(--v2-ease-out);
}
.site-main--home .platform__step-link:hover {
  background-color: var(--color-primary-solid);
  box-shadow: 0 10px 24px -12px rgb(0 113 227 / 0.6);
  text-decoration: none;
}
.site-main--home .platform__step-link .material-symbols-outlined {
  transition: translate 0.3s var(--v2-ease-out);
}
.site-main--home .platform__step-link:hover .material-symbols-outlined {
  translate: 0.15rem 0;
}
/* The rail: a hairline, its lit part, and a node per tile that lights as the lit part reaches it. */
.site-main--home .platform__stage {
  position: relative;
}
.site-main--home .platform__track {
  border-radius: 1px;
  background-image: none;
  background-color: var(--home-rail);
}
.site-main--home .platform__track::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(90deg, #2948ff, #2997ff 65%, #6fd3ff);
  box-shadow: 0 0 10px rgb(41 151 255 / 0.45);
  transform-origin: 0 50%;
  transform: scaleX(var(--fill));
}
.site-main--home .platform__node {
  width: 0.625rem;
  height: 0.625rem;
  transform: none;
  border-radius: 50%;
  background-color: var(--home-node);
  box-shadow: inset 0 0 0 2px var(--home-rail), 0 0 0 4px var(--home-node);
}
.site-main--home .platform__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #2f7bff;
  box-shadow: 0 0 0 3px rgb(47 123 255 / 0.18), 0 0 14px 2px rgb(47 123 255 / 0.55);
  opacity: clamp(0, (var(--fill) - var(--k, 0)) * 40, 1);
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--home .platform__stage {
  --fill: clamp(0, (var(--v2-in, 1) - 0.25) / 0.62, 1);
}
/* Each tile's bars rise as it arrives, one after another. */
html.v2-js .site-main--home .platform__step.is-in :is(.platform__level-1, .platform__level-2, .platform__level-3, .platform__level-4) {
  transform-origin: 50% 100%;
  animation: home-bar 0.7s var(--v2-ease-out) backwards;
  animation-delay: calc(var(--v2-i, 0) * 90ms + 380ms + var(--b, 0) * 90ms);
}
.site-main--home .platform__art img {
  transition: scale 0.7s var(--v2-ease-out);
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--home .platform__step:hover .platform__art img {
  scale: 1.04;
}
}
@keyframes home-bar {
from { transform: scaleY(0); }
}
/* Tablets: two by two. */
@media (min-width: 768px) {
.site-main--home .platform__steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Wide screens: one row of four under the rail, from small to large. */
@media (min-width: 1200px) {
.site-main--home .platform__scale {
  display: flex;
  margin-bottom: 0.25rem;
}
.site-main--home .platform__stage {
  padding-top: 2.25rem;
}
.site-main--home .platform__track {
  display: block;
  top: 0.5rem;
  height: 2px;
}
.site-main--home .platform__node {
  display: block;
  top: calc(-1.75rem - 0.3125rem + 1px);
  left: calc(1.75rem - 0.3125rem);
}
.site-main--home .platform__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-main--home .platform__art {
  aspect-ratio: 4 / 3;
}
.site-main--home .platform__step-title {
  font-size: 1.75rem;
}
.site-main--home .platform__step .card-text {
  font-size: 16px;
}
}
/* Phones: the four down a rail, each tile compact with its picture beside the name; "Start small" at
   the head of the rail and "Scale up" at its foot. */
@media (max-width: 767.98px) {
.site-main--home .platform__paths {
  display: flex;
  flex-direction: column;
}
.site-main--home .platform__scale {
  display: contents;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tertiary);
}
.site-main--home .platform__scale > :first-child {
  margin-bottom: 0.875rem;
}
.site-main--home .platform__stage {
  order: 1;
  padding-left: 1.75rem;
}
.site-main--home .platform__scale-end {
  order: 2;
  margin-top: 0.875rem;
}
.site-main--home .platform__scale-end .material-symbols-outlined {
  rotate: 90deg;
}
.site-main--home .platform__ways-label {
  order: 3;
}
.site-main--home .platform__ways {
  order: 4;
}
.site-main--home .platform__track {
  display: block;
  top: 0;
  bottom: 0;
  left: calc(0.5rem - 1px);
  right: auto;
  width: 2px;
  height: auto;
}
.site-main--home .platform__track::before {
  background-image: linear-gradient(180deg, #2948ff, #2997ff 65%, #6fd3ff);
  transform-origin: 50% 0;
  transform: scaleY(var(--fill));
}
.site-main--home .platform__node {
  display: block;
  top: 1.5rem;
  left: calc(-1.25rem - 0.3125rem);
}
.site-main--home .platform__step,
.site-main--home .platform__step:first-child {
  padding: 1.25rem 1.25rem 1.5rem;
}
.site-main--home .platform__art {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: clamp(6rem, 30vw, 8rem);
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
}
.site-main--home .platform__art img {
  scale: 1.3;
}
.site-main--home .platform__step > :is(.platform__capacity, .platform__step-title, .platform__step-kicker) {
  margin-right: calc(clamp(6rem, 30vw, 8rem) + 0.75rem);
}
.site-main--home .platform__step-title {
  margin-top: 0.875rem;
  font-size: clamp(1.375rem, 6vw, 1.625rem);
}
.site-main--home .platform__step-kicker {
  font-size: 15px;
  line-height: 20px;
}
.site-main--home .platform__step .card-text {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 16px;
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--home .platform__stage {
  --fill: clamp(0, var(--v2-p, 1) * 1.8 - 0.33, 1);
}
}
.site-main--home .platform__ways-label {
  margin-top: 3rem;
  text-align: center;
}
.site-main--home .platform__ways {
  gap: 1rem;
}
.site-main--home .platform__way {
  border-radius: var(--v2-radius-tile);
  background-color: var(--v2-tile);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.site-main--home .platform__way:hover {
  background-color: var(--v2-tile);
}

/* ── Console: a scene; the window rises out of the light, leaning back, and settles flat ────
   (its own --v2-in). Its CPU line draws itself, the meters fill to their values, the "now" point
   appears; nothing counts and nothing ticks. */
.site-main--home #control {
  --v2-glow-y: 62%;
}
:root[data-theme] .site-main--home .console-preview__window {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 60px 120px -40px rgb(var(--glow-blue) / 0.55), 0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.site-main--home .console-preview__caption .label-strong {
  color: #ffffff;
}
.site-main--home .console-preview__metrics > :nth-child(2) { --m: 1; }
.site-main--home .console-preview__metrics > :nth-child(3) { --m: 2; }
.site-main--home .console-preview__metrics > :nth-child(4) { --m: 3; }
@media (prefers-reduced-motion: no-preference) {
html.v2-js .site-main--home .console-preview__window {
  --home-f: clamp(0, (var(--v2-in, 1) - 0.05) / 0.9, 1);
  --home-flat: calc(var(--home-f) * (2 - var(--home-f)));
  transform: perspective(1800px) translate3d(0, calc((1 - var(--home-flat)) * 40px), 0) rotateX(calc((1 - var(--home-flat)) * 24deg)) scale(calc(0.92 + var(--home-flat) * 0.08));
  transform-origin: 50% 100%;
  will-change: transform;
}
html.v2-motion .site-main--home #control .console-preview__window.is-in {
  animation: v2-rise-fade 0.6s linear backwards;
}
/* (dashes in the line's own length, 1; with its non-scaling stroke they are measured on the screen,
   where the stretched line is a little longer, hence 1.2) */
html.v2-js .site-main--home .console-preview__line {
  stroke-dasharray: 1.2 1.2;
}
html.v2-js .site-main--home .console-preview__window.is-in .console-preview__line {
  animation: home-draw 1.7s var(--v2-ease-io) 0.45s backwards;
}
html.v2-js .site-main--home .console-preview__window.is-in .console-preview__area {
  animation: v2-rise-fade 0.9s linear 1.2s backwards;
}
html.v2-js .site-main--home .console-preview__window.is-in .console-preview__now {
  animation: home-pop 0.45s var(--v2-ease-out) 2.05s backwards;
}
html.v2-js .site-main--home .console-preview__window.is-in .console-preview__meter > * {
  transform-origin: 0 50%;
  animation: home-meter 1.1s var(--v2-ease-out) backwards;
  animation-delay: calc(0.5s + var(--m, 0) * 0.1s);
}
/* The one pulsing dot ("Deploying") pulses a few times, then rests. */
.site-main--home .console-preview__dot-deploying {
  animation-iteration-count: 3;
}
}
@keyframes home-draw {
from { stroke-dashoffset: 1.2; }
to { stroke-dashoffset: 0; }
}
@keyframes home-meter {
from { scale: 0 1; }
}
/* Phones: the window is cropped to the server, its meters and its chart (it fades out below), and the
   server's spec line wraps instead of being cut. */
@media (max-width: 767.98px) {
.site-main--home .console-preview__spec {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
.site-main--home .console-preview__panels {
  grid-template-columns: minmax(0, 1fr);
}
}

/* ── Applications and operating systems: Apple tiles, one chapter ──────────────────────── */
.site-main--home .home-apps__list,
.site-main--home .os-picker__list {
  gap: 1rem;
}
.site-main--home .home-apps__app,
.site-main--home .os-picker__option {
  border-radius: var(--v2-radius-card);
  background-color: var(--v2-tile);
  box-shadow: var(--shadow-card);
}
.site-main--home .home-apps__app {
  padding: 1.75rem 1rem;
}
/* After hours the tiles catch a little light along their top, like the platform tiles. */
:root[data-theme='dark'] .site-main--home :is(.home-apps__app, .os-picker__option, .platform__step, .platform__way) {
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0) 42%);
}
.site-main--home :is(.home-apps__app, .os-picker__option, .platform__step, .platform__way) {
  transition: box-shadow 0.35s var(--v2-ease-out), transform 0.45s var(--v2-ease-out);
}
.site-main--home :is(.home-apps__app, .os-picker__option) > :first-child {
  transition: scale 0.5s var(--v2-ease-out);
}
@media (hover: hover) and (pointer: fine) {
.site-main--home :is(.home-apps__app, .os-picker__option, .platform__step, .platform__way):hover {
  box-shadow: var(--shadow-card-hover);
}
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.site-main--home :is(.home-apps__app, .os-picker__option, .platform__step, .platform__way):hover {
  transform: translateY(-4px);
}
.site-main--home :is(.home-apps__app, .os-picker__option):hover > :first-child {
  scale: 1.08;
}
}

/* ── Locations: a scene; mountains of light (original artwork, home-terrain-*) with the two data
   centers pinned on them, a trail of light from Mumbai to Delhi NCR drawing itself as the stage
   rises, and each data center's card beside its pin (below the mountains on phones). ────────── */
.site-main--home #network {
  --v2-glow-y: 34%;
  --v2-glow: var(--glow-cyan);
}
.home-terrain {
  position: relative;
  max-width: 1600px;
  margin: 2rem auto 0;
}
.home-terrain__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.home-terrain__stage {
  position: relative;
  aspect-ratio: 1600 / 820;
}
/* The picture is black where nothing is drawn: screened onto the scene, only its light shows, so the
   scene's glow stays behind the ridges. The edges fade into the scene. */
.home-terrain__land {
  position: absolute;
  inset: -3% 0;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 78%, transparent);
  mask-composite: intersect;
}
.home-terrain__land picture,
.home-terrain__img,
.home-terrain__route {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.home-terrain__img {
  object-fit: cover;
}
.home-terrain__arc {
  fill: none;
  stroke: url(#home-terrain-trail);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--home-route, 1));
}
.home-terrain__arc--glow {
  stroke-width: 9;
  opacity: 0.35;
  filter: blur(3px);
}
.home-terrain__core {
  fill: #effdff;
}
.home-terrain__pin--to {
  opacity: clamp(0.35, var(--home-route, 1) * 1.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .home-terrain {
  --home-route: clamp(0, (var(--v2-in, 1) - 0.25) / 0.6, 1);
}
}

/* The data-center cards: dark glass, as they were on the globe. */
.home-terrain__cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-dc {
  position: absolute;
  width: clamp(18.5rem, 25vw, 23rem);
  border-radius: 18px;
  background-color: rgb(14 30 44 / 0.78);
  padding: 1rem 1.125rem 0.875rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 0 0 1px rgb(120 210 235 / 0.16), 0 24px 48px -24px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  pointer-events: auto;
  color: #f5f5f7;
}
.home-dc--delhi {
  top: 7%;
  left: 64.5%;
}
.home-dc--mumbai {
  top: 66%;
  left: 3.5%;
}
.home-dc__head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  column-gap: 0.625rem;
}
.home-dc__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: #9fd8ec;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-dc__name {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.home-dc__ping {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 14px;
  color: #d2d2d7;
}
.home-dc__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #3ccf91;
}
.home-dc__live {
  border-radius: 980px;
  padding: 0.125rem 0.5rem;
  box-shadow: inset 0 0 0 1px rgb(60 207 145 / 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #5fdca6;
}
.home-dc__sub {
  margin: 0.375rem 0 0 2.375rem;
  font-size: 13px;
  color: #a1a1a6;
}
.home-dc__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.home-dc__stats li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.home-dc__stats li + li {
  padding-left: 0.5rem;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.08);
}
.home-dc__i {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: #7fcfe6;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-dc__stats strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: #f5f5f7;
  white-space: nowrap;
}
.home-dc__stats strong + span {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #8f939c;
}
/* Phones and small tablets: the mountains on their own (a little taller, both pins still in view),
   the two cards below them. */
@media (max-width: 899.98px) {
.home-terrain__stage {
  aspect-ratio: auto;
}
.home-terrain__land {
  position: relative;
  inset: auto;
  aspect-ratio: 1.45;
}
.home-terrain__cards {
  position: static;
  display: grid;
  gap: 0.75rem;
  margin-top: -1.5rem;
  padding: 0 var(--gutter-mobile, 1rem);
  pointer-events: auto;
}
.home-dc {
  position: relative;
  inset: auto;
  width: auto;
  max-width: 28rem;
  margin: 0 auto;
}
}
@media (min-width: 600px) and (max-width: 899.98px) {
.home-terrain__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-dc {
  max-width: none;
  margin: 0;
}
}

/* ── The four facts: one per screen, the light changing colour with each; a line drawing above each
   draws itself while its fact holds the screen. Without motion.js, or with less motion, the four
   stand one under another, drawn. ─────────────────────────────────────────────────────────── */
@property --home-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgb(41 72 255);
}
.v2-story {
  --home-glow: rgb(41 72 255);
}
.v2-story[data-active='1'] { --v2-glow: var(--glow-cyan); --home-glow: rgb(0 170 255); }
.v2-story[data-active='2'] { --v2-glow: var(--glow-violet); --home-glow: rgb(124 77 255); }
.v2-story[data-active='3'] { --v2-glow: 0 168 150; --home-glow: rgb(0 168 150); }
@media (prefers-reduced-motion: no-preference) {
.v2-story {
  transition: --home-glow 1s var(--v2-ease-io);
}
}
.v2-story::before {
  display: none;
}
/* The story's stage carries its own padding (or, while it holds the screen, centres itself). */
.site-main--home .v2-story.scene {
  padding-top: 0;
  padding-bottom: 0;
}
.v2-story__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6rem var(--gutter-mobile);
}
.v2-story__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, rgb(var(--v2-glow, var(--glow-blue)) / 0.5) 0%, rgb(var(--v2-glow, var(--glow-blue)) / 0.16) 40%, rgb(var(--v2-glow, var(--glow-blue)) / 0) 72%);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
.v2-story__stage::before {
  background:
    radial-gradient(ellipse 50% 55% at 50% 50%, color-mix(in srgb, var(--home-glow) 50%, transparent) 0%, color-mix(in srgb, var(--home-glow) 16%, transparent) 40%, transparent 72%);
}
}
.v2-story__steps {
  display: grid;
  width: 100%;
  max-width: 60rem;
  gap: 4.5rem;
}
.v2-story__step {
  --home-local: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.v2-story__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 980px;
  background-color: rgb(255 255 255 / 0.1);
  padding: 0.5rem 1rem;
  font-size: 15px;
  font-weight: 600;
  color: #e3e3e8;
}
.v2-story__icon {
  font-size: 18px;
  color: #a9c1ff;
}
.v2-story__value {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 10vw, 10rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
  background-image: linear-gradient(180deg, #ffffff 30%, #9db8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.v2-story__text {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  line-height: 1.3;
  letter-spacing: -0.016em;
  font-weight: 600;
  color: #c7c7cc;
}
/* The drawings: thin lines in the colour of the light (a pale blue without color-mix). */
.v2-story__art {
  display: block;
  width: min(20rem, 68vw);
  height: auto;
  aspect-ratio: 320 / 200;
  margin-bottom: 1.25rem;
  overflow: visible;
  color: #a9c1ff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
.v2-story__art {
  color: color-mix(in srgb, var(--home-glow) 38%, #e2ecff);
}
}
.v2-story__track,
.v2-story__ring {
  stroke-opacity: 0.24;
}
.v2-story__faint {
  stroke-opacity: 0.16;
}
.v2-story__step:first-child .v2-story__faint {
  stroke-dasharray: 1.5 6;
}
.v2-story__draw {
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--home-local) - var(--a, 0)) / (1 - var(--a, 0)), 1));
}
.v2-story__head,
.v2-story__point {
  fill: #ffffff;
  stroke: none;
  filter: drop-shadow(0 0 4px currentColor);
}
.v2-story__orbit {
  transform-box: view-box;
  transform-origin: 160px 100px;
  transform: rotate(calc(var(--home-local) * 360deg));
}
.v2-story__scan {
  stroke-opacity: 0.8;
  stroke-width: 1.4;
  transform: translateY(calc(14px + var(--home-local) * 172px));
  opacity: clamp(0, min(var(--home-local), 1 - var(--home-local)) * 6, 1);
}
.v2-story__chip {
  fill: currentColor;
  fill-opacity: 0.08;
  opacity: clamp(0.15, (var(--home-local) - var(--t, 0)) * 10, 1);
}
.v2-story__chip--ecc {
  fill-opacity: 0.32;
  stroke: #ffffff;
}
.v2-story__ring--to,
.v2-story__point--to {
  opacity: clamp(0, (var(--home-local) - 0.86) * 7.2, 1);
}
.v2-story__dots {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  display: none;
  translate: -50% 0;
  gap: 0.5rem;
}
.v2-story__dots span {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: rgb(255 255 255 / 0.25);
  transition: width 0.4s var(--v2-ease), background-color 0.4s ease;
}
.v2-story[data-active='0'] .v2-story__dots span:nth-child(1),
.v2-story[data-active='1'] .v2-story__dots span:nth-child(2),
.v2-story[data-active='2'] .v2-story__dots span:nth-child(3),
.v2-story[data-active='3'] .v2-story__dots span:nth-child(4),
.v2-story:not([data-active]) .v2-story__dots span:nth-child(1) {
  width: 24px;
  background-color: #ffffff;
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .v2-story {
  height: 300vh;
  height: 300svh;
}
html.v2-js .v2-story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0 var(--gutter-mobile);
}
html.v2-js .v2-story__steps {
  gap: 0;
}
html.v2-js .v2-story__step {
  grid-area: 1 / 1;
  opacity: 0;
  translate: 0 40px;
  filter: blur(8px);
  transition: opacity 0.7s var(--v2-ease), translate 0.9s var(--v2-ease), filter 0.7s var(--v2-ease);
}
html.v2-js .v2-story__step.is-active {
  opacity: 1;
  translate: none;
  filter: none;
}
html.v2-js .v2-story__dots {
  display: flex;
}
/* Each drawing completes in the first 60% of its fact's turn, then holds. */
html.v2-js .v2-story__step:nth-child(1) { --home-local: clamp(0, var(--v2-story, 1) * 4 / 0.6, 1); }
html.v2-js .v2-story__step:nth-child(2) { --home-local: clamp(0, (var(--v2-story, 1) * 4 - 1) / 0.6, 1); }
html.v2-js .v2-story__step:nth-child(3) { --home-local: clamp(0, (var(--v2-story, 1) * 4 - 2) / 0.6, 1); }
html.v2-js .v2-story__step:nth-child(4) { --home-local: clamp(0, (var(--v2-story, 1) * 4 - 3) / 0.6, 1); }
}

/* ── Get started: the glass box sits on the rim of a planet whose horizon of light rises as the scene
   comes up (--v2-p); stars above it. ───────────────────────────────────────────────────────── */
.site-main--home .get-started-scene {
  --v2-glow-y: 46%;
}
.site-main--home .get-started-scene .v2-stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / 0.6) 45%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / 0.6) 45%, transparent 70%);
}
.home-horizon {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.home-horizon__planet {
  position: absolute;
  top: 62%;
  left: 50%;
  width: clamp(900px, 210vw, 3400px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 0, #0b1433 0, #03050e 9%, #000000 26%);
  box-shadow:
    0 -1px 0 0 rgb(214 228 255 / 0.85),
    0 -4px 16px -2px rgb(150 185 255 / 0.6),
    0 -30px 110px -10px rgb(41 72 255 / 0.55),
    inset 0 2px 28px -10px rgb(150 185 255 / 0.55);
}
@media (max-width: 767.98px) {
.home-horizon__planet {
  top: 76%;
}
}
@media (prefers-reduced-motion: no-preference) {
html.v2-js .home-horizon__planet {
  transform: translate3d(0, calc((0.6 - var(--v2-p, 0.6)) * 200px), 0);
  will-change: transform;
}
}

/* The hostname field shows that it has focus. */
.site-main--home .get-started__field:focus-within {
  box-shadow: inset 0 0 0 2px #6e9bff;
}