@charset "UTF-8";

@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/geist-regular.ttf") format("truetype")
}

@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("assets/fonts/geist-semibold.ttf") format("truetype")
}

:root{
  --paper:#F9FBFD;
  --surface:#FFFFFF;
  --ink:#101211;
  --muted:#52645D;
  --line:#CFDFD7;
  --soft:#E6F5EE;
  --primary:#118D62;
  --accent:#29AE87;
  --primary-soft:#E6F5EE;
  --primary-text:#08744E;
  --dark:#101211;
  --on-dark:#F9FBFD;
  --font:"Geist",sans-serif;
  --header:88px;
  color-scheme:light
}

:root[data-theme=dark]{
  --paper:#101211;
  --surface:#17241D;
  --ink:#F9FBFD;
  --muted:#A4BFB1;
  --line:#304D3D;
  --soft:#1A3225;
  --primary:#29AE87;
  --accent:#29AE87;
  --primary-soft:#17382B;
  --primary-text:#6ED8AD;
  --dark:#0B1610;
  --on-dark:#F9FBFD;
  color-scheme:dark
}

*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
body:has(dialog[open]){
  overflow:hidden
}
button,input,a{
  -webkit-tap-highlight-color:transparent
}
button,input{
  font:inherit
}
button,a{
  touch-action:manipulation
}
button{
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
button{
  color:inherit
}
button{
  background:none;
  border:0
}
button:disabled{
  cursor:default
}
img,svg{
  display:block;
  max-width:100%
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:5px
}
::selection{
  background:var(--primary);
  color:#F9FBFD
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  font-weight:600
}
p{
  color:var(--muted)
}
.technical,.eyebrow{
  font-family:var(--font);
  font-size:12px;
  letter-spacing:.065em;
  font-weight:400
}
.eyebrow{
  font-size:12px;
  font-weight:600;
  line-height:1.5
}
.text-primary{
  color:var(--primary)
}
.section-shell{
  padding-left:max(5.2vw,24px);
  padding-right:max(5.2vw,24px);
  max-width:1800px;
  margin-left:auto;
  margin-right:auto
}
.section-space{
  padding-top:104px;
  padding-bottom:104px
}
.section-kicker{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:40px
}
.section-kicker>.technical{
  color:var(--muted)
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:48px
}
.section-heading>div{
  max-width:330px
}
.section-heading p{
  max-width:355px;
  font-size:16px;
  line-height:1.7
}
.section-heading .text-link{
  margin-top:20px
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:25px;
  font-size:16px;
  font-weight:600;
  padding:5px 0;
  position:relative;
  text-align:left;
  line-height:1.5
}
.text-link:after{
  content:"";
  position:absolute;
  bottom:1px;
  left:0;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s
}
.text-link:hover:after{
  transform:scaleX(1)
}
.text-link span{
  transition:transform .3s
}
.text-link:hover span{
  transform:translate(3px,-2px)
}
.button{
  min-height:49px;
  padding:13px 21px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font-size:16px;
  font-weight:600;
  border:1px solid transparent;
  border-radius:2px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:background .25s,color .25s,transform .25s
}
.button span{
  font-size:20px;
  line-height:1;
  transition:transform .25s
}
.button:hover span{
  transform:translate(3px,-3px)
}
.button:active{
  transform:translateY(2px)
}
.button-primary{
  background:var(--primary);
  color:#F9FBFD
}
.button-primary:hover{
  background:#06633F
}
.button-dark{
  background:var(--ink);
  color:var(--paper)
}
.button-dark:hover{
  background:var(--primary);
  color:#F9FBFD
}
.button-outline{
  border-color:var(--line)
}
.button-outline:hover{
  border-color:var(--ink);
  background:var(--surface)
}
.signal-dot,.activity-dot{
  display:inline-block;
  width:6px;
  height:6px;
  background:#29AE87;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 0 3px #29AE8716
}
.activity-dot{
  background:var(--primary);
  box-shadow:0 0 0 3px #29AE8715
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  z-index:1000;
  top:0;
  left:20px;
  background:var(--primary);
  color:white;
  padding:12px 20px;
  transform:translateY(-110%)
}
.skip-link:focus{
  transform:translateY(0)
}

/* The frame */
.announcement{
  height:34px;
  background:#E6F5EE;
  color:#275441;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:12px;
  border-bottom:1px solid var(--line)
}
.announcement a{
  font-weight:600;
  margin-left:10px
}
.announcement a span{
  margin-left:8px
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  height:var(--header);
  display:flex;
  align-items:center;
  padding:0 3.7vw;
  border-bottom:1px solid var(--line);
  gap:42px;
  transition:box-shadow .3s
}
.site-header.scrolled{
  box-shadow:0 4px 20px #10121109
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
  line-height:1
}
.brand>svg{
  width:30px;
  height:34px;
  stroke:var(--primary);
  stroke-width:1.8;
  fill:none
}
.brand>span{
  font-size:28px;
  font-weight:600;
  letter-spacing:-1.5px
}
.brand-gio{
  font-weight:400;
  margin-left:5px
}
.brand small{
  display:block;
  font-family:var(--font);
  font-size:8px;
  letter-spacing:1px;
  margin-top:7px;
  font-weight:400
}
.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:29px;
  flex:1;
  font-size:12px;
  font-weight:600
}
.desktop-nav a,.nav-link{
  padding:12px 0;
  white-space:nowrap
}
.desktop-nav a:hover,.nav-link:hover{
  color:var(--primary)
}
.nav-link{
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px
}
.desktop-nav a span{
  font-size:12px;
  margin-left:4px
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:22px
}
.theme-toggle{
  width:32px;
  height:34px;
  display:grid;
  place-items:center;
  padding:6px
}
.theme-toggle svg{
  stroke:currentColor;
  stroke-width:1.4;
  fill:none;
  width:22px;
  transition:transform .5s
}
.theme-toggle:hover svg{
  transform:rotate(60deg)
}
.portal-link{
  font-size:12px;
  font-weight:600;
  border-left:1px solid var(--line);
  padding-left:23px;
  white-space:nowrap
}
.portal-link span{
  margin-left:17px;
  color:var(--primary);
  font-size:20px
}
.menu-toggle{
  display:none;
  width:34px;
  height:40px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px
}
.menu-toggle span{
  height:1px;
  width:22px;
  background:var(--ink);
  transition:transform .3s
}
.menu-toggle[aria-expanded=true] span:first-child{
  transform:translateY(3px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child{
  transform:translateY(-3px) rotate(-45deg)
}
.mobile-nav{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:20px 6vw 30px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 30px #10121111
}
.mobile-nav:not([hidden]){
  display:flex;
  flex-direction:column
}
.mobile-nav>a,.mobile-nav>button{
  padding:14px 0;
  text-align:left;
  border-bottom:1px solid var(--line)
}

/* Infrastructure, the first encounter */
.hero{
  position:relative;
  min-height:720px;
  height:calc(100svh - 122px);
  max-height:850px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  padding-top:38px;
  padding-bottom:82px;
  overflow:hidden
}
.hero-coordinate{
  position:absolute;
  top:24px;
  left:5.2vw;
  right:5.2vw;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:8px;
  z-index:2
}
.hero-coordinate span{
  opacity:.65
}
.hero-copy{
  align-self:center;
  position:relative;
  z-index:3;
  margin-top:28px;
  pointer-events:none
}
.hero-copy>*{
  pointer-events:auto
}
.hero-copy .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:25px;
  font-size:12px;
  letter-spacing:.05em
}
.tiny-cross{
  color:var(--primary);
  font-size:20px;
  font-weight:400;
  line-height:1
}
.hero h1{
  
  
  
  white-space:nowrap;
  font-weight:600
}
.hero h1 .period{
  color:var(--ink)
}
.hero-copy>p{
  max-width:390px;
  font-size:16px;
  line-height:1.8;
  margin-top:26px
}
.hero-ctas{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:30px
}
.hero-ctas .button{
  font-size:12px;
  gap:24px
}
.hero-ctas .text-link{
  font-size:12px;
  gap:13px
}
.local-note{
  margin-top:28px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px
}
.flag-id{
  display:inline-block;
  width:15px;
  height:10px;
  background:linear-gradient(#CE1126 50%,#F9FBFD 50%);
  border:1px solid #118D6230;
  flex-shrink:0
}
.hero-visual{
  position:relative;
  align-self:center;
  min-width:0;
  margin:15px -55px -5px -32px;
  z-index:1
}
.infrastructure-scene{
  position:relative;
  perspective:1000px;
  transform:translateZ(0)
}
#architecture{
  width:100%;
  overflow:visible;
  transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));
  transition:transform 1s ease-out
}
.iso-grid{
  stroke:var(--ink);
  stroke-opacity:.1;
  stroke-width:.65;
  fill:none
}
.iso-route{
  fill:none;
  stroke:var(--primary);
  stroke-width:1.2;
  stroke-opacity:.35
}
.iso-flow{
  stroke:var(--primary);
  stroke-width:2;
  stroke-dasharray:10 150;
  animation:data-flow 7s linear infinite
}
.iso-flow:nth-child(2){
  animation-delay:-2s
}
.iso-flow:nth-child(3){
  animation-delay:-4s
}
.iso-flow:nth-child(4){
  animation-delay:-1s
}
.box-top{
  fill:#E6F5EE;
  stroke:#6F9C86;
  stroke-width:.7
}
.box-front{
  fill:#B9DCCB;
  stroke:#6F9C86;
  stroke-width:.7
}
.box-side{
  fill:#91BDA7;
  stroke:#6F9C86;
  stroke-width:.7
}
.rack .box-top{
  fill:#285440;
  stroke:#43775E
}
.rack .box-front{
  fill:#183F2E;
  stroke:#43775E
}
.rack .box-side{
  fill:#102A1D;
  stroke:#43775E
}
.rack.raised{
  animation:server-breathe 6s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box
}
.rack.raised:nth-child(2){
  animation-delay:-2s
}
.rack-led{
  fill:#29AE87;
  animation:led-blink 3s steps(2) infinite
}
.rack-vent{
  stroke:#6F9C86;
  stroke-width:1;
  opacity:.8
}
.chip-top{
  fill:var(--primary);
  stroke:#7DE1BB;
  stroke-width:.7
}
.chip-front{
  fill:#06633F;
  stroke:#7DE1BB;
  stroke-width:.7
}
.chip-side{
  fill:#087B55;
  stroke:#7DE1BB;
  stroke-width:.7
}
.chip-mark{
  fill:#F9FBFD;
  font:600 20px var(--font);
  letter-spacing:-1px
}
.iso-node{
  fill:var(--primary)
}
.iso-node-ring{
  fill:none;
  stroke:var(--primary);
  opacity:.3;
  stroke-width:1
}
.floor-outline{
  fill:var(--surface);
  fill-opacity:.35;
  stroke:#6F9C86;
  stroke-opacity:.4;
  stroke-width:.8
}
.scene-label{
  position:absolute;
  font:8px var(--font);
  letter-spacing:.04em;
  line-height:1.8;
  color:var(--ink);
  border-left:1px solid var(--primary);
  padding-left:9px;
  transition:opacity .4s,transform .4s
}
.scene-label>span:last-child{
  display:block;
  color:var(--muted);
  font-size:8px
}
.scene-label .activity-dot{
  width:4px;
  height:4px;
  margin-right:3px
}
.label-compute{
  left:59%;
  top:28%
}
.label-network{
  left:4%;
  top:40%
}
.label-storage{
  right:7%;
  top:67%
}
.scene-orbit{
  position:absolute;
  bottom:13%;
  left:17%;
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:22px;
  align-items:center
}
.scene-orbit span{
  font-size:8px;
  letter-spacing:.1em
}
.scene-bottom{
  position:relative;
  z-index:4;
  margin:-30px 11% 0 12%;
  text-align:center
}
.scene-controls{
  display:flex;
  justify-content:center;
  border-bottom:1px solid var(--line)
}
.scene-controls button{
  font:12px var(--font);
  padding:13px 15px;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap
}
.scene-controls button span{
  font:8px var(--font);
  color:var(--muted);
  margin-right:7px
}
.scene-controls button.active{
  border-color:var(--primary);
  color:var(--primary)
}
.scene-bottom p{
  font-size:12px;
  margin-top:10px
}
.demo-label{
  display:block;
  color:var(--muted);
  opacity:.6;
  font-size:8px;
  margin-top:9px
}
.scroll-note{
  position:absolute;
  bottom:28px;
  left:5.2vw;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:8px;
  letter-spacing:.09em
}
.scroll-note>span{
  border:1px solid var(--line);
  width:25px;
  height:30px;
  display:grid;
  place-items:center;
  transition:transform .3s
}
.scroll-note:hover span{
  transform:translateY(4px)
}
.hero-index{
  position:absolute;
  right:5.2vw;
  bottom:35px;
  font-size:8px;
  color:var(--muted)
}
[data-layer=network] .scene-label:not(.label-network),[data-layer=storage] .scene-label:not(.label-storage){
  opacity:.3
}
[data-layer=network] .iso-route{
  stroke-opacity:.8
}
[data-layer=network] .iso-flow{
  stroke-width:3;
  animation-duration:4s
}
[data-layer=storage] .storage-unit{
  filter:drop-shadow(0 0 8px #29AE8744)
}

/* Evidence and foundations */
.foundation{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.technology-row{
  min-height:110px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-bottom:1px solid var(--line)
}
.technology-row>.technical{
  font-size:8px;
  color:var(--muted);
  line-height:1.7
}
.tech-logo{
  color:var(--muted);
  opacity:.85;
  white-space:nowrap
}
.amd{
  font-size:20px;
  letter-spacing:-.5px
}
.amd b{
  font-size:20px;
  margin-left:4px
}
.amd sup{
  font-size:8px;
  vertical-align:top
}
.nvidia{
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px
}
.nvidia svg{
  width:29px;
  fill:none;
  stroke:currentColor;
  stroke-width:2
}
.intel{
  font-size:36px;
  letter-spacing:-2px;
  font-weight:600;
  line-height:1
}
.intel span{
  font-size:8px;
  letter-spacing:0;
  vertical-align:top
}
.cloudflare{
  font-size:12px;
  font-weight:600;
  letter-spacing:1px
}
.cloudflare>span{
  font-size:28px;
  margin-right:3px;
  vertical-align:middle
}
.biznet-network{
  font-style:normal;
  font-weight:600;
  font-size:24px;
  line-height:1;
  letter-spacing:-1px
}
.biznet-network small{
  display:block;
  font-size:8px;
  letter-spacing:3px;
  font-style:normal;
  margin-top:5px
}
.metric-row{
  display:grid;
  grid-template-columns:1.15fr repeat(4,1fr);
  padding:34px 0 38px;
  align-items:center
}
.metric-context .eyebrow{
  font-size:8px;
  color:var(--primary)
}
.metric-context p{
  font-size:16px;
  line-height:1.35;
  color:var(--ink);
  margin-top:8px
}
.metric{
  border-left:1px solid var(--line);
  padding-left:26px;
  min-height:64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px
}
.metric>.technical{
  font-size:8px;
  color:var(--muted)
}
.metric strong{
  font-size:40px;
  letter-spacing:-1.8px;
  font-weight:600;
  line-height:1.15
}
.metric strong>span{
  font-size:16px;
  letter-spacing:-.3px;
  margin-left:5px
}

/* An interactive product workbench */
.products{
  border-bottom:1px solid var(--line)
}
.product-tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);
  border-bottom:0
}
.product-tabs button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:12px;
  padding:20px 13px;
  border-right:1px solid var(--line);
  border-bottom:2px solid transparent;
  position:relative;
  transition:background .3s,color .3s
}
.product-tabs button:last-child{
  border-right:0
}
.product-tabs button>span{
  font-size:20px;
  line-height:1
}
.product-tabs button small{
  font:8px var(--font);
  opacity:.5;
  margin-left:4px
}
.product-tabs button[aria-selected=true]{
  background:var(--primary-soft);
  border-bottom-color:var(--primary);
  color:var(--primary)
}
.product-tabs button:hover{
  background:var(--soft)
}
.product-stage{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  min-height:415px;
  background:var(--surface)
}
.product-graphic{
  background:var(--soft);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 24px 22px;
  border-right:1px solid var(--line)
}
.graphic-meta,.graphic-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:8px;
  position:relative;
  z-index:2
}
.chip-diagram{
  margin:-4px -24px;
  width:calc(100% + 48px);
  color:#6F9C86
}
.chip-diagram svg{
  width:100%;
  height:300px;
  overflow:visible
}
.board-traces{
  stroke-opacity:.4
}
.trace-flow{
  stroke:var(--primary);
  stroke-opacity:1;
  stroke-width:1.5;
  stroke-dasharray:25 250;
  animation:data-flow 7s linear infinite
}
.chip-base{
  fill:#B9DCCB;
  stroke:#6F9C86;
  stroke-width:1
}
.chip-inner{
  fill:#143A2A;
  stroke:#43775E;
  stroke-width:1
}
.chip-corners{
  fill:none;
  stroke:#91DDB9;
  stroke-width:1
}
.chip-title{
  font:600 36px var(--font);
  fill:#F9FBFD;
  letter-spacing:-1px
}
.chip-subtitle{
  font:8px var(--font);
  fill:#B9E9D2;
  letter-spacing:1px
}
.chip-pins{
  opacity:.4
}
.board-points{
  fill:var(--primary)
}
.graphic-bottom>span{
  display:flex;
  align-items:center;
  gap:8px
}
.product-info{
  padding:43px 40px 30px;
  display:flex;
  flex-direction:column
}
.product-overline{
  color:var(--primary);
  font-size:8px
}
.product-info h3{
  font-size:44px;
  letter-spacing:-1.8px;
  line-height:1.2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:11px 0 20px
}
.product-info h3>span{
  font-size:28px;
  color:var(--primary)
}
.product-info>p{
  font-size:16px;
  line-height:1.8;
  max-width:370px
}
.product-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:30px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  gap:15px
}
.product-specs>div{
  display:flex;
  flex-direction:column;
  gap:5px
}
.product-specs strong{
  font-size:20px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.4px
}
.product-specs span{
  font-size:8px;
  color:var(--muted)
}
.product-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin-top:auto;
  padding-top:24px
}
.product-footer>div>span{
  display:block;
  color:var(--muted);
  font-size:12px
}
.product-footer strong{
  font-size:24px;
  font-weight:600;
  letter-spacing:-1px;
  white-space:nowrap
}
.product-footer small{
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  margin-left:3px
}
.product-footer .button{
  font-size:12px;
  padding:12px 14px;
  min-height:43px;
  gap:17px
}
.product-footer .button span{
  font-size:20px
}
.product-below{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px;
  font-size:8px;
  color:var(--muted)
}
.product-below p{
  font-size:12px;
  font-family:var(--font);
  letter-spacing:0
}
.product-below p a{
  color:var(--ink);
  margin-left:5px
}
.product-stage[data-product=gpu] .chip-inner{
  fill:#143A2A
}
.product-stage[data-product=gpu] .chip-base{
  fill:#91DDB9
}
.product-stage[data-product=cloud] .chip-inner{
  fill:#164E3B
}
.product-stage[data-product=storage] .chip-inner{
  fill:#164E3B
}
.product-stage[data-product=hosting] .chip-inner{
  fill:#143A2A
}
.product-stage.switching .product-info>*{
  animation:content-in .45s both
}
.product-stage.switching .product-info>p{
  animation-delay:.04s
}
.product-stage.switching .product-specs{
  animation-delay:.07s
}

/* The network story */
.network-section{
  background:var(--dark);
  color:var(--on-dark);
  position:relative;
  overflow:hidden;
  isolation:isolate
}
.network-grid{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(#29AE8708 1px,transparent 1px),linear-gradient(90deg,#29AE8708 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(90deg,transparent,#101211)
}
.network-section .section-kicker{
  margin-bottom:52px
}
.network-section .section-kicker>.technical{
  display:flex;
  align-items:center;
  gap:10px;
  color:#A4BFB1;
  font-size:8px
}
.network-section .eyebrow{
  color:#B9DCCB
}
.network-layout{
  display:grid;
  grid-template-columns:.85fr 1.3fr;
  gap:40px;
  align-items:center
}
.network-copy h2>span{
  color:#29AE87
}
.network-copy>p{
  font-size:16px;
  line-height:1.8;
  max-width:310px;
  margin-top:24px;
  color:#A4BFB1
}
.network-facts{
  display:flex;
  gap:45px;
  margin:32px 0
}
.network-facts>div{
  display:flex;
  flex-direction:column;
  gap:7px
}
.network-facts strong{
  font-size:36px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:-1.2px
}
.network-facts strong span{
  font-size:16px;
  letter-spacing:0
}
.network-facts>div>span{
  font-size:12px;
  line-height:1.65;
  color:#A4BFB1
}
.network-copy .text-link{
  font-size:12px;
  color:#E6F5EE
}
.map-panel{
  position:relative;
  margin-right:-20px
}
.map-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  color:#91BDA7;
  margin:0 25px
}
.indonesia-map{
  width:100%;
  overflow:visible;
  margin:3px 0 10px
}
.map-routes path{
  stroke:#29AE87;
  stroke-width:.8;
  opacity:.6;
  stroke-dasharray:3 5
}
.map-routes .map-flow{
  stroke:#6ED8AD;
  stroke-width:2;
  stroke-dasharray:9 230;
  animation:data-flow 10s linear infinite;
  opacity:1
}
.map-nodes{
  fill:#29AE87;
  stroke:none
}
.map-pulse{
  fill:none;
  stroke:#29AE87;
  stroke-width:1;
  transform-box:fill-box;
  transform-origin:center;
  animation:map-pulse 3s ease-out infinite
}
.map-cloud rect{
  fill:#17382B;
  stroke:#43775E;
  stroke-width:.6
}
.map-cloud text{
  font:8px var(--font);
  fill:#E6F5EE;
  letter-spacing:.5px
}
.map-cloud .cloud-providers{
  font-size:8px;
  fill:#91BDA7
}
.map-annotations{
  stroke:none;
  fill:#B9DCCB;
  font:8px var(--font);
  letter-spacing:.5px
}
.map-annotations path{
  fill:none;
  stroke:#6F9C86;
  stroke-width:.6
}
.map-annotations .map-annotation-small{
  font-size:8px;
  fill:#91BDA7
}
.network-mode{
  display:flex;
  border-bottom:1px solid #F9FBFD1C;
  margin:0 25px
}
.network-mode button{
  font-size:12px;
  color:#A4BFB1;
  padding:12px 10px;
  flex:1;
  text-align:left;
  border-bottom:2px solid transparent;
  display:flex;
  justify-content:space-between;
  gap:15px;
  transition:color .3s
}
.network-mode button.active{
  color:#6ED8AD;
  border-color:#29AE87
}
.network-mode button:hover{
  color:#F9FBFD
}
.network-caption{
  font-size:12px;
  color:#A4BFB1;
  min-height:28px;
  margin:13px 35px 0
}
.network-bottom{
  border-top:1px solid #F9FBFD1C;
  margin-top:58px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:8px;
  color:#A4BFB1
}

/* Expertise */
.managed{
  border-bottom:1px solid var(--line)
}
.managed-layout{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:100px
}
.managed-intro{
  position:sticky;
  top:130px;
  align-self:start
}
.managed-intro>p{
  max-width:310px;
  margin:22px 0 26px;
  font-size:16px;
  line-height:1.8
}
.managed-intro .button{
  font-size:12px;
  gap:35px;
  min-height:44px
}
.service-visual{
  position:relative;
  width:310px;
  height:180px;
  margin-top:30px
}
.service-visual svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:var(--line);
  stroke-width:1
}
.service-flow{
  stroke:var(--primary);
  stroke-dasharray:8 90;
  animation:data-flow 6s linear infinite
}
.service-hub{
  position:absolute;
  left:calc(50% - 32px);
  top:calc(50% - 16px);
  z-index:2;
  background:var(--ink);
  color:var(--paper);
  width:64px;
  height:45px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 5px 0 var(--line);
  transform:skewY(-8deg)
}
.service-hub>span{
  font-size:20px;
  letter-spacing:-1px
}
.service-hub small{
  font:8px var(--font);
  letter-spacing:.4px
}
.service-satellite{
  position:absolute;
  font:8px var(--font);
  letter-spacing:.5px;
  padding:7px 11px;
  border:1px solid var(--line);
  background:var(--paper);
  z-index:2
}
.sat-one{
  top:20px;
  left:24px
}
.sat-two{
  top:20px;
  right:8px
}
.sat-three{
  bottom:10px;
  left:calc(50% - 25px)
}
.service-orbit{
  width:155px;
  height:90px;
  position:absolute;
  left:calc(50% - 77px);
  top:47px;
  border:1px dashed var(--line);
  border-radius:50%;
  transform:rotate(-15deg)
}
.service-note{
  font-size:8px;
  color:var(--muted);
  display:block;
  width:310px;
  text-align:center;
  margin-top:5px
}
.service-item{
  border-top:1px solid var(--line)
}
.service-item:last-child{
  border-bottom:1px solid var(--line)
}
.service-item>h3{
  font-weight:400
}
.service-trigger{
  display:flex;
  align-items:center;
  width:100%;
  text-align:left;
  gap:23px;
  padding:22px 0;
  transition:color .25s
}
.service-trigger:hover{
  color:var(--primary)
}
.service-number{
  font:8px var(--font);
  color:var(--muted)
}
.service-name{
  font-size:20px;
  letter-spacing:-.5px;
  flex:1
}
.service-plus{
  font-size:24px;
  font-weight:400;
  line-height:1;
  transition:transform .3s,color .3s
}
.service-trigger[aria-expanded=true]{
  color:var(--primary)
}
.service-trigger[aria-expanded=true] .service-plus{
  transform:rotate(45deg)
}
.service-body{
  padding:0 20px 25px 39px
}
.service-body p{
  font-size:12px;
  line-height:1.8;
  max-width:400px
}
.service-body .text-link{
  font-size:12px;
  margin-top:15px
}
.service-body:not([hidden]){
  animation:content-in .35s both
}

/* Pricing that reads like a spec sheet */
.pricing{
  border-bottom:1px solid var(--line)
}
.promo-link{
  font-size:12px;
  border-bottom:1px solid var(--line);
  padding-bottom:4px
}
.promo-link>span{
  color:var(--primary);
  margin-left:16px
}
.pricing .section-heading>p{
  font-size:16px
}
.pricing-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:17px;
  gap:20px
}
.pricing-switch{
  display:flex;
  gap:6px
}
.pricing-switch button{
  padding:10px 17px;
  font-size:12px;
  border:1px solid transparent;
  border-radius:2px;
  transition:background .3s
}
.pricing-switch button span{
  font:8px var(--font);
  border:1px solid var(--line);
  padding:2px 4px;
  margin-left:6px;
  vertical-align:middle
}
.pricing-switch button.active{
  border-color:var(--line);
  background:var(--surface)
}
.pricing-switch button:not(.active){
  color:var(--muted)
}
.pricing-toolbar>.technical{
  font-size:8px;
  color:var(--muted)
}
.pricing-table{
  width:100%;
  border-collapse:collapse;
  text-align:left
}
.pricing-table th{
  font:8px var(--font);
  color:var(--muted);
  padding:19px 20px 17px 0;
  letter-spacing:.04em
}
.pricing-table td{
  border-top:1px solid var(--line);
  padding:21px 20px 21px 0;
  font-size:12px
}
.pricing-table th:first-child,.pricing-table td:first-child{
  padding-left:20px
}
.pricing-table td:first-child{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.5px;
  min-width:170px
}
.pricing-table tr.featured{
  background:var(--primary-soft)
}
.pricing-table .plan-tag{
  font:8px var(--font);
  color:var(--primary);
  display:inline-block;
  margin-left:10px;
  border:1px solid #118D6233;
  padding:3px 5px;
  letter-spacing:.04em;
  vertical-align:middle
}
.pricing-table .plan-price{
  font-size:24px;
  font-weight:600;
  letter-spacing:-.7px;
  white-space:nowrap
}
.pricing-table td:last-child{
  text-align:right;
  padding-right:20px
}
.plan-select{
  padding:7px 0;
  font-size:12px;
  white-space:nowrap
}
.plan-select span{
  margin-left:25px;
  font-size:20px;
  color:var(--primary)
}
.plan-select:hover{
  color:var(--primary)
}
.pricing-notes{
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-top:18px
}
.pricing-notes p{
  font-size:12px;
  max-width:420px
}
.pricing-notes .text-link{
  font-size:12px;
  gap:25px
}

/* One last connection */
.closing{
  background:#08744E;
  color:#F9FBFD;
  position:relative;
  overflow:hidden;
  padding-top:35px;
  padding-bottom:42px;
  isolation:isolate
}
.closing-top{
  display:flex;
  justify-content:space-between;
  font-size:8px;
  border-bottom:1px solid #B9DCCB33;
  padding-bottom:22px
}
.closing-top>span:first-child{
  display:flex;
  gap:10px;
  align-items:center
}
.closing .signal-dot{
  background:#6ED8AD;
  box-shadow:0 0 0 3px #6ED8AD12
}
.closing-main{
  padding-top:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.closing-main h1>span{
  color:#B9E9D2
}
.closing-arrow{
  font-size:132px;
  line-height:1;
  font-weight:400;
  display:grid;
  place-items:center;
  border:1px solid #B9DCCB44;
  width:150px;
  height:150px;
  transition:background .3s,transform .3s
}
.closing-arrow:hover{
  background:#F9FBFD25;
  transform:translate(4px,-4px)
}
.closing-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:35px;
  margin-top:35px
}
.closing-bottom p{
  font-size:12px;
  line-height:1.75;
  color:#E6F5EE
}
.closing-bottom>div{
  display:flex;
  gap:25px;
  align-items:center
}
.closing .button-dark{
  background:#F9FBFD;
  color:#101211
}
.closing .button-dark:hover{
  background:#E6F5EE;
  color:#F9FBFD
}
.closing .text-link{
  font-size:12px
}
.closing-lines{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.1;
  background:repeating-linear-gradient(90deg,transparent,transparent calc(25% - 1px),#101211 calc(25% - 1px),#101211 25%);
  pointer-events:none
}
.site-footer{
  padding-top:62px;
  padding-bottom:24px
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:80px
}
.footer-top>div:first-child{
  flex:1
}
.footer-top .brand{
  gap:8px
}
.footer-top .brand>svg{
  width:26px;
  height:29px
}
.footer-top .brand>span{
  font-size:28px
}
.footer-top p{
  font-size:12px;
  line-height:1.7;
  margin-top:22px
}
.footer-local{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:8px;
  margin-top:25px
}
.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:75px;
  flex:1.4
}
.footer-links h3{
  font:8px var(--font);
  color:var(--muted);
  letter-spacing:.06em;
  margin-bottom:20px
}
.footer-links a,.footer-links button{
  display:block;
  font-size:12px;
  text-align:left;
  padding:4px 0
}
.footer-links a:hover,.footer-links button:hover{
  color:var(--primary)
}
.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:50px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:8px
}
.footer-bottom>div{
  display:flex;
  gap:28px;
  align-items:center
}
.back-top{
  font:8px var(--font);
  padding:0;
  margin-left:30px
}
.back-top:hover{
  color:var(--primary)
}

/* Directory */
.catalog-dialog{
  width:min(1060px,calc(100% - 60px));
  max-height:85svh;
  padding:36px;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 30px 150px #10121133;
  overflow:auto
}
.catalog-dialog::backdrop{
  background:#101211CC;
  backdrop-filter:blur(7px)
}
.catalog-dialog[open]{
  animation:dialog-in .3s both
}
.catalog-header{
  display:flex;
  justify-content:space-between;
  gap:20px
}
.catalog-header .eyebrow{
  font-size:8px;
  color:var(--primary)
}
.catalog-header h2{
  
  
  margin-top:10px
}
.dialog-close{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  font-size:16px;
  flex-shrink:0
}
.dialog-close:hover{
  border-color:var(--primary);
  color:var(--primary)
}
.catalog-search{
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:13px 16px;
  margin:25px 0
}
.catalog-search svg{
  fill:none;
  stroke:var(--muted);
  stroke-width:1.5;
  width:18px
}
.catalog-search input{
  border:0;
  background:none;
  color:var(--ink);
  outline:none!important;
  flex:1;
  min-width:0;
  font-size:16px
}
.catalog-search:focus-within{
  border-color:var(--primary)
}
.catalog-search>.technical{
  font-size:8px;
  color:var(--muted)
}
.catalog-layout{
  display:grid;
  grid-template-columns:155px 1fr;
  gap:30px
}
.catalog-categories{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-self:start;
  position:sticky;
  top:0
}
.catalog-categories button{
  font-size:12px;
  text-align:left;
  padding:9px 10px;
  border-left:2px solid transparent;
  transition:background .2s
}
.catalog-categories button.active{
  background:var(--primary-soft);
  color:var(--primary)
}
.catalog-categories button:hover{
  color:var(--primary)
}
.catalog-count{
  font-size:8px;
  color:var(--muted);
  margin-bottom:12px
}
.catalog-results{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line)
}
.catalog-card{
  display:block;
  background:var(--surface);
  padding:20px;
  transition:background .2s;
  min-height:145px;
  position:relative
}
.catalog-card:hover{
  background:var(--primary-soft)
}
.catalog-card>span{
  font:8px var(--font);
  color:var(--primary)
}
.catalog-card h3{
  font-size:20px;
  letter-spacing:-.4px;
  margin:7px 20px 7px 0
}
.catalog-card h3>span{
  position:absolute;
  right:18px;
  font-size:16px;
  color:var(--primary)
}
.catalog-card p{
  font-size:12px;
  line-height:1.6
}
.catalog-empty{
  grid-column:1/-1;
  padding:30px;
  background:var(--paper);
  font-size:16px
}

.pricing-table-wrap{
  position:relative
}
.catalog-card:only-child{
  grid-column:1/-1
}
.tab-hidden *,.tab-hidden *:before,.tab-hidden *:after{
  animation-play-state:paused!important
}

/* Designed dark, rather than inverted */
[data-theme=dark] .announcement{
  background:#17382B;
  color:#B9DCCB
}
[data-theme=dark] .box-top{
  fill:#43775E;
  stroke:#6F9C86
}
[data-theme=dark] .box-front{
  fill:#285440;
  stroke:#6F9C86
}
[data-theme=dark] .box-side{
  fill:#183F2E;
  stroke:#6F9C86
}
[data-theme=dark] .rack .box-top{
  fill:#43775E;
  stroke:#91BDA7
}
[data-theme=dark] .rack .box-front{
  fill:#183F2E;
  stroke:#6F9C86
}
[data-theme=dark] .rack .box-side{
  fill:#102A1D;
  stroke:#6F9C86
}
[data-theme=dark] .iso-grid{
  stroke-opacity:.18
}
[data-theme=dark] .floor-outline{
  fill:#183F2E;
  stroke:#6F9C86
}
[data-theme=dark] .chip-base{
  fill:#285440
}
[data-theme=dark] .chip-inner{
  fill:#102A1D
}
[data-theme=dark] .closing{
  background:#08744E;
  color:#F9FBFD
}
[data-theme=dark] .closing-main h1>span{
  color:#B9E9D2
}
[data-theme=dark] .tech-logo{
  opacity:.8
}

/* A motion language: packets, assembly, depth, and purposeful reveals */
@keyframes data-flow{
  to{
  stroke-dashoffset:-600
}

}
@keyframes led-blink{
  0%,80%,100%{
  opacity:1
}
85%{
  opacity:.25
}

}
@keyframes server-breathe{
  0%,100%{
  transform:translateY(0)
}
50%{
  transform:translateY(-7px)
}

}
@keyframes map-pulse{
  0%{
  transform:scale(.5);
  opacity:.8
}
100%{
  transform:scale(2);
  opacity:0
}

}
@keyframes content-in{
  from{
  opacity:0;
  transform:translateY(10px)
}
to{
  opacity:1;
  transform:translateY(0)
}

}
@keyframes dialog-in{
  from{
  opacity:0;
  transform:translateY(20px) scale(.98)
}
to{
  opacity:1;
  transform:none
}

}
.js-motion .reveal{
  opacity:0;
  transform:translateY(24px);
  clip-path:inset(0 0 12% 0);
  transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.25,1),clip-path .8s
}
.js-motion .reveal.is-visible{
  opacity:1;
  transform:none;
  clip-path:inset(0)
}

/* Adapt composition, rather than scale it */
@media(min-width:1600px){
  .hero-copy>p{
  font-size:16px;
  max-width:460px
}
.hero-ctas .button{
  font-size:16px
}
.hero-ctas .text-link{
  font-size:16px
}
.hero-copy .eyebrow{
  font-size:12px
}
.hero-visual{
  margin-left:-65px
}
.scene-bottom{
  margin-top:-70px
}
.product-info{
  padding:50px
}
.product-info>p{
  font-size:16px;
  max-width:470px
}
.product-info h3{
  font-size:52px
}
.chip-diagram svg{
  height:360px
}
.product-specs strong{
  font-size:24px
}
.product-specs span{
  font-size:12px
}
.product-footer .button{
  font-size:12px
}

}

@media(max-width:1150px){
  .site-header{
  gap:25px
}
.desktop-nav{
  gap:19px
}
.nav-actions{
  gap:12px
}
.portal-link{
  padding-left:15px
}
.hero{
  min-height:665px
}
.hero-visual{
  margin-left:-40px;
  margin-right:-40px
}
.hero-copy>p{
  font-size:12px;
  max-width:315px
}
.hero-ctas{
  gap:18px
}
.hero-ctas .button{
  padding:12px 15px;
  font-size:12px;
  gap:18px
}
.hero-ctas .text-link{
  font-size:12px;
  gap:8px
}
.scene-bottom{
  margin-top:-5px
}
.scene-controls button{
  font-size:12px;
  padding:12px
}
.metric{
  padding-left:20px
}
.metric strong{
  font-size:32px
}
.metric strong>span{
  font-size:12px
}
.product-info{
  padding:32px 27px 25px
}
.product-info h3{
  font-size:36px
}
.product-specs strong{
  font-size:16px
}
.product-footer{
  gap:12px
}
.product-footer strong{
  font-size:20px
}
.product-footer .button{
  font-size:12px;
  gap:12px;
  padding:10px
}
.product-footer small{
  font-size:8px
}
.managed-layout{
  gap:60px
}
.footer-links{
  gap:45px
}
.pricing-table td:first-child{
  min-width:145px
}
.pricing-table .plan-tag{
  display:block;
  margin-left:0;
  margin-top:5px;
  width:max-content
}
.closing-arrow{
  width:125px;
  height:125px;
  font-size:112px
}

}

@media(max-width:960px){
  :root{
  --header:76px
}
.site-header{
  padding:0 5.2vw
}
.desktop-nav{
  display:none
}
.nav-actions{
  margin-left:auto;
  gap:20px
}
.menu-toggle{
  display:flex
}
.hero{
  height:auto;
  min-height:680px;
  grid-template-columns:1fr 1fr;
  padding-top:90px;
  padding-bottom:105px
}
.hero-copy{
  margin-top:0
}
.hero-copy .eyebrow{
  font-size:8px;
  gap:7px
}
.hero-copy>p{
  font-size:12px;
  max-width:290px
}
.hero-ctas{
  flex-direction:column;
  align-items:flex-start;
  gap:14px
}
.hero-ctas .text-link{
  font-size:12px
}
.local-note{
  font-size:8px;
  margin-top:19px
}
.hero-visual{
  margin-left:-65px;
  margin-right:-55px
}
.scene-controls button{
  padding:10px 9px;
  font-size:8px
}
.scene-controls button span{
  font-size:8px;
  margin-right:5px
}
.scene-label{
  font-size:8px
}
.scene-label>span:last-child{
  font-size:8px
}
.scene-bottom p{
  font-size:8px
}
.scene-bottom{
  margin-left:25%;
  margin-right:14%;
  margin-top:10px
}
.scene-orbit{
  left:25%;
  bottom:9%
}
.technology-row{
  gap:20px;
  min-height:95px
}
.technology-row>.technical{
  font-size:8px
}
.tech-logo.amd{
  font-size:12px
}
.amd b{
  font-size:20px
}
.nvidia{
  font-size:12px;
  gap:4px
}
.nvidia svg{
  width:23px
}
.intel{
  font-size:28px
}
.cloudflare{
  font-size:8px;
  letter-spacing:.4px
}
.cloudflare>span{
  font-size:20px
}
.biznet-network{
  font-size:20px
}
.metric strong{
  font-size:32px
}
.metric{
  padding-left:16px
}
.metric>.technical{
  font-size:8px
}
.metric-context p{
  font-size:12px
}
.section-space{
  padding-top:80px;
  padding-bottom:80px
}
.section-kicker>.technical{
  font-size:8px
}
.section-kicker .eyebrow{
  font-size:8px
}
.section-heading>div{
  max-width:265px
}
.section-heading p{
  font-size:12px
}
.section-heading .text-link{
  font-size:12px
}
.product-tabs button{
  font-size:12px;
  padding:18px 8px;
  gap:8px
}
.product-tabs button small{
  display:none
}
.product-tabs button>span{
  font-size:20px
}
.product-info{
  padding:27px 22px
}
.product-info h3{
  font-size:32px
}
.product-info>p{
  font-size:12px
}
.product-specs{
  gap:10px
}
.product-specs strong{
  font-size:16px
}
.product-specs span{
  font-size:8px
}
.product-stage{
  min-height:390px
}
.product-graphic{
  padding:20px 18px
}
.graphic-meta,.graphic-bottom{
  font-size:8px
}
.chip-diagram{
  margin-left:-18px;
  width:calc(100% + 36px)
}
.chip-diagram svg{
  height:270px
}
.product-footer{
  flex-wrap:wrap;
  gap:16px
}
.product-footer strong{
  font-size:20px
}
.product-footer .button{
  font-size:12px;
  min-height:38px;
  width:100%
}
.network-layout{
  gap:15px;
  grid-template-columns:.95fr 1.2fr
}
.network-copy>p{
  font-size:12px;
  max-width:255px
}
.network-facts{
  gap:30px
}
.network-facts strong{
  font-size:28px
}
.network-facts>div>span{
  font-size:8px
}
.map-panel{
  margin-left:-35px;
  margin-right:-20px
}
.network-mode{
  margin:0 18px
}
.network-mode button{
  font-size:8px;
  padding:10px 7px
}
.network-caption{
  font-size:8px;
  margin-left:25px
}
.network-bottom{
  font-size:8px
}
.managed-layout{
  grid-template-columns:.9fr 1.1fr;
  gap:40px
}
.managed-intro>p{
  font-size:12px;
  max-width:265px
}
.service-name{
  font-size:16px
}
.service-trigger{
  gap:16px;
  padding:20px 0
}
.service-body{
  padding-left:30px
}
.service-body p{
  font-size:12px
}
.managed-intro .button{
  font-size:12px;
  padding:12px 15px;
  gap:15px
}
.pricing-table td{
  font-size:12px;
  padding-right:15px
}
.pricing-table th{
  font-size:8px;
  padding-right:10px
}
.pricing-table .plan-price{
  font-size:20px
}
.pricing-table td:first-child{
  font-size:16px;
  min-width:125px
}
.plan-select{
  font-size:12px
}
.plan-select span{
  margin-left:10px
}
.pricing-switch button{
  font-size:12px;
  padding:9px 12px
}
.closing-arrow{
  font-size:92px;
  height:105px;
  width:105px
}
.closing-bottom p{
  font-size:12px
}
.closing-bottom>div{
  gap:18px
}
.closing-bottom .button{
  font-size:12px;
  gap:20px
}
.closing-bottom .text-link{
  font-size:12px;
  gap:12px
}
.footer-top{
  gap:50px
}
.footer-links{
  gap:35px
}
.catalog-dialog{
  padding:28px
}

}

@media(max-width:700px){
  html{
  scroll-padding-top:90px
}
:root{
  --header:70px
}
.section-shell{
  padding-left:23px;
  padding-right:23px
}
.section-space{
  padding-top:64px;
  padding-bottom:64px
}
.announcement{
  font-size:8px;
  gap:8px;
  height:32px
}
.announcement a{
  margin-left:3px;
  font-size:8px
}
.announcement>span:nth-child(2){
  max-width:240px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.announcement .signal-dot{
  width:4px;
  height:4px
}
.announcement a span{
  margin-left:3px
}
.site-header{
  padding:0 22px
}
.brand>span{
  font-size:24px
}
.brand>svg{
  width:27px;
  height:31px
}
.brand small{
  font-size:8px;
  letter-spacing:.8px
}
.nav-actions{
  gap:10px
}
.portal-link{
  font-size:12px;
  padding-left:12px
}
.portal-link span{
  font-size:16px;
  margin-left:9px
}
.theme-toggle{
  width:29px;
  height:33px
}
.theme-toggle svg{
  width:19px
}
.menu-toggle{
  width:28px
}
.hero{
  grid-template-columns:1fr;
  min-height:0;
  max-height:none;
  height:auto;
  padding-top:80px;
  padding-bottom:55px;
  overflow:hidden
}
.hero-coordinate{
  left:23px;
  right:23px;
  top:22px;
  font-size:8px
}
.hero-coordinate span{
  font-size:8px
}
.hero-copy{
  margin:0;
  align-self:start
}
.hero-copy .eyebrow{
  font-size:8px;
  margin-bottom:18px
}
.hero h1{
  
  
  
  white-space:normal
}
.hero-copy>p{
  font-size:12px;
  line-height:1.75;
  max-width:320px;
  margin-top:23px
}
.hero-ctas{
  flex-direction:row;
  align-items:center;
  gap:20px;
  margin-top:23px
}
.hero-ctas .button{
  font-size:12px;
  padding:12px 14px;
  gap:18px;
  min-height:45px
}
.hero-ctas .text-link{
  font-size:12px;
  gap:9px
}
.local-note{
  font-size:8px;
  margin-top:19px
}
.hero-visual{
  width:calc(100% + 46px);
  margin:25px -23px 5px;
  align-self:start
}
.infrastructure-scene{
  margin-top:0
}
.scene-bottom{
  margin:-30px 15% 0
}
.scene-controls button{
  font-size:12px;
  padding:11px 10px;
  flex:1
}
.scene-controls button span{
  font-size:8px
}
.scene-bottom p{
  font-size:8px;
  margin-top:10px
}
.demo-label{
  font-size:8px;
  margin-top:6px
}
.scene-label{
  font-size:8px
}
.scene-label>span:last-child{
  font-size:8px
}
.label-compute{
  top:28%;
  left:59%
}
.label-network{
  left:6%;
  top:40%
}
.label-storage{
  right:7%;
  top:67%
}
.scene-orbit{
  bottom:11%;
  left:14%;
  font-size:8px;
  gap:18px
}
.scene-orbit span{
  font-size:8px
}
.scroll-note{
  left:23px;
  bottom:12px;
  font-size:8px;
  gap:8px
}
.scroll-note>span{
  height:23px;
  width:20px
}
.hero-index{
  right:23px;
  bottom:20px;
  font-size:8px
}
.technology-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  justify-items:center;
  gap:18px;
  padding:24px 0;
  min-height:135px
}
.technology-row>.technical{
  font-size:8px;
  justify-self:start;
  line-height:1.8
}
.tech-logo.amd{
  font-size:16px
}
.amd b{
  font-size:16px
}
.nvidia{
  font-size:12px
}
.intel{
  font-size:28px
}
.cloudflare{
  font-size:8px
}
.biznet-network{
  font-size:24px
}
.metric-row{
  grid-template-columns:repeat(2,1fr);
  gap:25px 0;
  padding:26px 0
}
.metric-context{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.metric-context .eyebrow{
  font-size:8px
}
.metric-context p{
  font-size:12px;
  margin:0
}
.metric-context p br{
  display:none
}
.metric{
  min-height:60px;
  padding-left:17px
}
.metric:nth-child(even){
  border-left:0;
  padding-left:0
}
.metric>.technical{
  font-size:8px
}
.metric strong{
  font-size:36px
}
.metric strong>span{
  font-size:16px
}
.section-kicker{
  margin-bottom:30px;
  gap:15px
}
.section-kicker .eyebrow{
  font-size:8px
}
.section-kicker>.technical{
  display:none
}
.section-heading{
  display:block;
  margin-bottom:30px
}
.section-heading>div{
  max-width:100%;
  margin-top:20px;
  display:flex;
  align-items:flex-end;
  gap:22px
}
.section-heading p{
  font-size:12px;
  max-width:245px
}
.section-heading .text-link{
  font-size:12px;
  gap:10px;
  margin:0;
  flex-shrink:0;
  max-width:110px
}
.product-tabs{
  grid-template-columns:repeat(5,1fr)
}
.product-tabs button{
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:14px 3px
}
.product-tabs button>span{
  font-size:20px
}
.product-stage{
  grid-template-columns:1fr;
  min-height:0
}
.product-graphic{
  border-right:0;
  border-bottom:1px solid var(--line);
  padding:20px 20px 17px;
  min-height:245px
}
.graphic-meta,.graphic-bottom{
  font-size:8px
}
.chip-diagram{
  margin:-18px -20px;
  width:calc(100% + 40px)
}
.chip-diagram svg{
  height:235px
}
.product-info{
  padding:27px 23px
}
.product-info h3{
  font-size:40px;
  margin:10px 0 16px
}
.product-overline{
  font-size:8px
}
.product-info>p{
  font-size:12px;
  max-width:100%
}
.product-specs{
  margin-top:24px;
  padding-bottom:24px;
  gap:12px
}
.product-specs strong{
  font-size:20px
}
.product-specs span{
  font-size:8px
}
.product-footer{
  padding-top:22px;
  flex-wrap:nowrap;
  gap:15px
}
.product-footer .button{
  width:auto;
  min-height:42px;
  font-size:12px;
  padding:11px;
  gap:14px
}
.product-footer strong{
  font-size:20px
}
.product-footer small{
  font-size:8px
}
.product-footer>div>span{
  font-size:8px
}
.product-below{
  font-size:8px;
  display:block;
  margin-top:13px
}
.product-below p{
  margin-top:9px;
  font-size:8px
}
.network-section .section-kicker{
  margin-bottom:30px
}
.network-section .section-kicker .eyebrow{
  font-size:8px
}
.network-layout{
  grid-template-columns:1fr;
  gap:15px
}
.network-copy h2 br:nth-of-type(2){
  display:none
}
.network-copy>p{
  font-size:12px;
  max-width:320px;
  margin-top:22px
}
.network-facts{
  gap:50px;
  margin:26px 0
}
.network-facts strong{
  font-size:36px
}
.network-facts strong span{
  font-size:16px
}
.network-facts>div>span{
  font-size:8px
}
.network-copy .text-link{
  font-size:12px
}
.map-panel{
  margin:30px -20px 0
}
.map-meta{
  font-size:8px;
  margin:0 22px
}
.indonesia-map{
  margin:5px 0
}
.network-mode{
  margin:0 20px
}
.network-mode button{
  font-size:12px;
  padding:12px 6px
}
.network-caption{
  font-size:8px;
  margin:12px 25px 0
}
.network-bottom{
  margin-top:30px;
  padding-top:17px;
  display:block;
  font-size:8px
}
.network-bottom>span{
  display:block
}
.network-bottom>span:last-child{
  margin-top:8px;
  font-size:8px
}
.managed-layout{
  grid-template-columns:1fr;
  gap:38px
}
.managed-intro{
  position:relative;
  top:0
}
.managed-intro h2 br:nth-of-type(2){
  display:none
}
.managed-intro>p{
  font-size:12px;
  max-width:315px;
  margin-top:20px
}
.managed-intro .button{
  font-size:12px;
  gap:30px
}
.service-visual,.service-note{
  display:none
}
.service-trigger{
  padding:20px 0;
  gap:20px
}
.service-number{
  font-size:8px
}
.service-name{
  font-size:20px
}
.service-plus{
  font-size:24px
}
.service-body{
  padding:0 10px 23px 33px
}
.service-body p{
  font-size:12px;
  max-width:100%
}
.service-body .text-link{
  font-size:12px
}
.pricing .section-kicker{
  align-items:flex-start
}
.promo-link{
  font-size:8px;
  white-space:nowrap
}
.promo-link>span{
  margin-left:7px
}
.pricing .section-heading>p{
  font-size:12px;
  margin-top:20px
}
.pricing-toolbar{
  gap:5px;
  align-items:center
}
.pricing-switch{
  gap:3px;
  flex:1
}
.pricing-switch button{
  font-size:12px;
  padding:9px 8px;
  white-space:nowrap
}
.pricing-switch button span{
  display:none
}
.pricing-toolbar>.technical{
  font-size:8px;
  white-space:nowrap
}
.pricing-table-wrap{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) var(--paper);
  margin-right:-23px;
  padding-right:23px
}
.pricing-table{
  min-width:580px
}
.pricing-table th{
  font-size:8px;
  padding:18px 12px 14px 0
}
.pricing-table td{
  font-size:12px;
  padding:17px 12px 17px 0
}
.pricing-table th:first-child,.pricing-table td:first-child{
  padding-left:12px
}
.pricing-table td:first-child{
  font-size:16px;
  min-width:100px
}
.pricing-table .plan-price{
  font-size:20px
}
.pricing-table .plan-tag{
  font-size:8px;
  padding:2px 3px
}
.pricing-table td:last-child{
  padding-right:12px
}
.plan-select{
  font-size:12px
}
.plan-select span{
  font-size:16px;
  margin-left:10px
}
.pricing-notes{
  align-items:flex-start;
  gap:20px
}
.pricing-notes p{
  font-size:8px;
  max-width:190px
}
.pricing-notes .text-link{
  font-size:12px;
  gap:10px;
  max-width:105px
}
.closing{
  padding-top:28px;
  padding-bottom:32px
}
.closing-top{
  font-size:8px;
  padding-bottom:20px
}
.closing-top>span:last-child{
  max-width:110px;
  text-align:right;
  line-height:1.7
}
.closing-main{
  padding-top:30px;
  gap:15px;
  align-items:flex-end
}
.closing-arrow{
  font-size:56px;
  height:63px;
  width:63px;
  flex-shrink:0
}
.closing-bottom{
  display:block;
  margin-top:25px
}
.closing-bottom p{
  font-size:12px
}
.closing-bottom>div{
  margin-top:23px;
  gap:25px
}
.closing-bottom .button{
  font-size:12px;
  min-height:44px;
  gap:25px
}
.closing-bottom .text-link{
  font-size:12px;
  gap:10px
}
.site-footer{
  padding-top:42px;
  padding-bottom:24px
}
.footer-top{
  flex-direction:column;
  gap:35px
}
.footer-top>div:first-child{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 20px;
  align-items:center
}
.footer-top p{
  font-size:12px;
  margin-top:0
}
.footer-local{
  font-size:8px;
  margin-top:5px
}
.footer-top .brand>span{
  font-size:24px
}
.footer-top .brand>svg{
  width:24px
}
.footer-links{
  gap:25px;
  grid-template-columns:repeat(3,1fr)
}
.footer-links h3{
  font-size:8px;
  margin-bottom:12px
}
.footer-links a,.footer-links button{
  font-size:8px;
  padding:5px 0
}
.footer-bottom{
  display:block;
  font-size:8px;
  margin-top:32px;
  padding-top:18px
}
.footer-bottom>div{
  margin-top:16px;
  gap:25px
}
.back-top{
  font-size:8px;
  margin-left:auto
}
.catalog-dialog{
  width:calc(100% - 24px);
  padding:24px 18px;
  max-height:92svh
}
.catalog-header .eyebrow{
  font-size:8px
}
.dialog-close{
  width:30px;
  height:30px;
  font-size:16px
}
.catalog-search{
  margin:20px 0;
  padding:11px 12px;
  gap:10px
}
.catalog-search input{
  font-size:12px
}
.catalog-search>.technical{
  display:none
}
.catalog-layout{
  grid-template-columns:1fr;
  gap:16px
}
.catalog-categories{
  position:relative;
  flex-direction:row;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:8px;
  max-width:100%;
  gap:5px
}
.catalog-categories button{
  white-space:nowrap;
  padding:7px 9px;
  border-left:0;
  border-bottom:2px solid transparent;
  font-size:12px;
  background:var(--soft)
}
.catalog-count{
  font-size:8px
}
.catalog-card{
  padding:15px;
  min-height:145px
}
.catalog-card>span{
  font-size:8px
}
.catalog-card h3{
  font-size:16px;
  line-height:1.25;
  margin-top:9px;
  margin-right:10px
}
.catalog-card h3>span{
  right:10px;
  font-size:12px
}
.catalog-card p{
  font-size:12px
}
.catalog-empty{
  padding:20px;
  font-size:12px
}

}

@media(max-width:700px){
  .pricing-table-wrap{
  margin-right:0;
  padding-right:0;
  overflow:visible
}
.pricing-table{
  display:block;
  min-width:0
}
.pricing-table thead{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.pricing-table tbody{
  display:block
}
.pricing-table tbody tr{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px 12px;
  padding:21px 14px 12px;
  border-top:1px solid var(--line)
}
.pricing-table tbody td{
  display:block;
  border:0;
  padding:0!important;
  min-width:0;
  font-size:12px
}
.pricing-table tbody td:first-child{
  grid-row:1;
  grid-column:1/3;
  font-size:20px
}
.pricing-table td.plan-price{
  grid-row:1;
  grid-column:3;
  text-align:right;
  font-size:20px;
  padding-top:3px!important
}
.pricing-table td:nth-child(2){
  grid-row:2;
  grid-column:1
}
.pricing-table td:nth-child(3){
  grid-row:2;
  grid-column:2
}
.pricing-table td:nth-child(4){
  grid-row:2;
  grid-column:3
}
.pricing-table td:nth-child(2):before,.pricing-table td:nth-child(3):before,.pricing-table td:nth-child(4):before{
  display:block;
  font:8px var(--font);
  color:var(--muted);
  margin-bottom:5px;
  letter-spacing:.08em
}
.pricing-table td:nth-child(2):before{
  content:'vCPU'
}
.pricing-table td:nth-child(3):before{
  content:'MEMORY'
}
.pricing-table td:nth-child(4):before{
  content:'STORAGE'
}
.pricing-table tbody td:last-child{
  grid-row:3;
  grid-column:1/-1;
  border-top:1px solid var(--line);
  text-align:left
}
.plan-select{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  padding:10px 0 0
}
.pricing-table .plan-tag{
  display:inline-block;
  margin-left:7px;
  margin-top:0;
  font-size:8px;
  vertical-align:middle
}
.pricing-notes p{
  max-width:195px
}

}

@media(max-width:375px){
  .announcement>span:nth-child(2){
  max-width:215px
}
.hero-ctas{
  gap:13px
}
.hero-ctas .button{
  font-size:12px;
  gap:10px
}
.hero-ctas .text-link{
  font-size:8px;
  gap:7px
}
.portal-link{
  display:none
}
.scene-bottom{
  margin-top:-20px
}
.section-heading>div{
  display:block
}
.section-heading .text-link{
  max-width:none;
  margin-top:15px
}
.product-footer{
  flex-wrap:wrap
}
.product-footer .button{
  width:100%
}
.product-tabs button{
  font-size:12px
}
.closing-arrow{
  width:49px;
  height:49px;
  font-size:44px
}
.pricing-table .plan-tag{
  display:block;
  margin-left:0;
  margin-top:4px
}
.pricing-table tbody td:first-child{
  font-size:20px
}
.pricing-table td.plan-price{
  font-size:16px
}

}

.button-primary{
  background:#087B55
}
.product-overline,.metric-context .eyebrow,.catalog-header .eyebrow,.catalog-card>span,.catalog-categories button.active,.service-trigger[aria-expanded=true],.scene-controls button.active,.product-tabs button[aria-selected=true],.pricing-table .plan-tag{
  color:var(--primary-text)
}
.desktop-nav a:hover,.nav-link:hover,.footer-links a:hover,.footer-links button:hover{
  color:var(--primary-text)
}
.desktop-nav,.nav-link,.portal-link{
  font-size:12px
}
.hero-copy>p{
  font-size:16px;
  max-width:410px
}
.product-info>p,.managed-intro>p,.network-copy>p{
  font-size:16px
}
.service-body p{
  font-size:16px
}
.footer-links a,.footer-links button{
  font-size:12px
}
.catalog-card p{
  font-size:12px
}
.catalog-categories button{
  font-size:12px
}

@media(max-width:960px){
  .hero-copy>p{
  font-size:16px;
  max-width:310px
}
.portal-link{
  font-size:12px
}
.product-info>p,.managed-intro>p,.network-copy>p{
  font-size:16px
}
.service-body p{
  font-size:12px
}
.catalog-categories button{
  font-size:12px
}

}

@media(max-width:700px){
  .hero-copy>p{
  font-size:16px;
  max-width:320px
}
.portal-link{
  font-size:12px
}
.product-info>p,.managed-intro>p,.network-copy>p{
  font-size:16px
}
.service-body p{
  font-size:12px
}
.footer-links a,.footer-links button{
  font-size:12px
}
.catalog-card p{
  font-size:12px
}
.catalog-categories button{
  font-size:12px
}
.catalog-card h3{
  font-size:16px
}
.section-heading p,.pricing .section-heading>p{
  font-size:12px
}
.pricing-notes p{
  font-size:12px
}
.local-note{
  font-size:8px
}

}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}
*,*:before,*:after{
  animation:none!important;
  transition:none!important
}
.js-motion .reveal{
  opacity:1;
  transform:none;
  clip-path:none
}
#architecture{
  transform:none!important
}

}


/* Geist / four-pixel typography scale. Real Regular and Semibold only. */
h3{font-size:20px}h4{font-size:20px}h5{font-size:16px}h6{font-size:12px}
.service-item>h3{font-size:20px;font-weight:600}.service-name{font-weight:600}.footer-links h3{font:600 12px/1.4 var(--font)}
.service-plus{display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;transform-origin:center}.service-trigger{padding-right:8px}
.scene-label,.catalog-card>span,.catalog-categories button.active,.service-number,.service-satellite,.service-hub small,.pricing-table th,.pricing-table .plan-tag,.pricing-switch button span,.map-cloud text,.map-annotations{font-weight:600}.scene-label>span:last-child,.map-cloud .cloud-providers,.map-annotation-small{font-weight:400}
body{
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  letter-spacing:0;
  font-synthesis:none
}

button,input,select,textarea{
  font-family:var(--font)
}

h1,h2,h3,h4,h5,h6,strong,b{
  font-weight:600
}
h3{
  line-height:1.2;
  letter-spacing:-.025em
}

p{
  letter-spacing:0;
  line-height:1.7
}
.technical,.eyebrow{
  font-weight:600;
  line-height:1.5;
  letter-spacing:.06em
}

.section-kicker{
  flex-wrap:wrap
}
.section-kicker .eyebrow{
  font-size:12px
}
.section-kicker>.technical{
  font-size:12px
}

.desktop-nav,.nav-link,.portal-link{
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0
}

.button,.text-link,.product-tabs button,.pricing-switch button{
  font-weight:600
}

.hero-copy>p,.product-info>p,.managed-intro>p,.network-copy>p,.service-body p,.section-heading p{
  font-size:16px;
  line-height:1.7
}

.product-info h3{
  font-weight:600;
  line-height:1.16
}
.product-overline{
  font-size:12px;
  line-height:1.5
}

.product-specs span,.product-footer>div>span,.product-footer small,.pricing-notes p,.product-below p{
  font-size:12px;
  line-height:1.5
}

.product-specs strong{
  font-weight:600
}
.product-footer{
  flex-wrap:wrap
}
.product-footer .button{
  font-size:12px
}

.pricing-table td{
  font-size:16px;
  line-height:1.5
}
.pricing-table th{
  font-size:12px;
  line-height:1.4
}
.pricing-table td:first-child{
  font-weight:600
}
.plan-select{
  font-size:12px
}

.footer-links a,.footer-links button,.footer-top p{
  font-size:12px;
  line-height:1.65
}
.catalog-card p,.catalog-categories button{
  font-size:12px;
  line-height:1.6
}

.catalog-search input{
  font-size:16px;
  line-height:1.5
}
.catalog-search>.technical{
  font-size:12px
}
.catalog-card>span{
  font-size:12px
}
.catalog-count{
  font-size:12px
}

.brand small{
  font-weight:600;
  font-size:8px
}
.brand-gio{
  font-weight:400
}
.tech-logo{
  font-style:normal
}
.tech-logo b{
  font-weight:600
}
sup{
  font-size:8px
}

.button-primary{
  background:#087B55;
  color:#F9FBFD
}
.button-primary:hover{
  background:#06633F
}
.button-dark:hover{
  background:#087B55;
  color:#F9FBFD
}

.closing{
  background:#08744E;
  color:#F9FBFD
}
.closing h1{
  color:#F9FBFD
}
.closing h1>span{
  color:#B9E9D2
}
.closing-bottom p{
  color:#E6F5EE;
  font-size:16px;
  line-height:1.65
}
.closing .text-link{
  color:#F9FBFD
}
.closing .button-dark{
  background:#E6F5EE;
  color:#101211
}
.closing .button-dark:hover{
  background:#F9FBFD;
  color:#101211
}

[data-theme=dark] .closing{
  background:#08744E;
  color:#F9FBFD
}
[data-theme=dark] .closing-main h1>span{
  color:#B9E9D2
}

@media(min-width:1600px){

}

@media(max-width:1280px) and (min-width:1151px){

}

@media(max-width:960px){
.product-info>p,.managed-intro>p,.network-copy>p,.service-body p{
  font-size:16px
}
.product-footer .button{
  width:100%
}
.product-footer strong{
  font-size:20px
}
.product-info{
  padding:28px 24px
}
.product-info h3{
  font-size:32px
}
.product-specs{
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.product-specs strong{
  font-size:16px
}
.section-kicker>.technical{
  font-size:8px
}

}

@media(max-width:800px) and (min-width:701px){
.hero-ctas{
  align-items:flex-start;
  flex-direction:column
}
.network-facts{
  gap:24px
}

}

@media(max-width:700px){
.hero-copy>p{
  font-size:16px;
  max-width:350px
}
.hero-copy .eyebrow{
  font-size:8px
}
.hero-ctas .button,.hero-ctas .text-link{
  font-size:12px
}
.hero-ctas{
  flex-wrap:wrap;
  gap:16px
}
.local-note{
  font-size:12px;
  line-height:1.5
}
.section-heading>div{
  display:block
}
.section-heading p,.pricing .section-heading>p{
  font-size:16px;
  max-width:100%
}
.section-heading .text-link{
  font-size:12px;
  margin-top:16px;
  max-width:none
}
.section-kicker .eyebrow{
  font-size:8px
}
.product-tabs button{
  font-size:12px
}
.product-info>p,.managed-intro>p,.network-copy>p,.service-body p{
  font-size:16px
}
.product-info h3{
  font-size:36px
}
.product-footer .button{
  width:auto;
  max-width:100%;
  min-height:44px
}
.product-footer{
  gap:20px
}
.product-specs{
  gap:12px
}
.product-specs strong{
  font-size:20px
}
.network-facts>div>span{
  font-size:12px
}
.network-caption{
  font-size:12px;
  line-height:1.65
}
.network-mode button{
  font-size:12px
}
.service-name{
  font-size:20px
}
.service-body{
  padding-left:28px
}
.service-body .text-link{
  font-size:12px
}
.pricing-switch button{
  font-size:12px;
  padding:8px
}
.pricing-toolbar>.technical{
  font-size:8px
}
.pricing-table tbody td{
  font-size:16px
}
.pricing-table td.plan-price{
  font-size:20px
}
.pricing-table td:nth-child(2):before,.pricing-table td:nth-child(3):before,.pricing-table td:nth-child(4):before{
  font-size:8px
}
.pricing-table .plan-tag{
  font-size:8px;
  display:block;
  margin:4px 0 0;
  width:max-content
}
.pricing-notes{
  flex-wrap:wrap
}
.pricing-notes p{
  font-size:12px;
  max-width:100%
}
.pricing-notes .text-link{
  font-size:12px;
  max-width:none
}
.closing-bottom p{
  font-size:16px
}
.closing-bottom .button,.closing-bottom .text-link{
  font-size:12px
}
.footer-links{
  gap:16px
}
.footer-links a,.footer-links button{
  font-size:12px;
  overflow-wrap:anywhere
}
.footer-bottom{
  font-size:8px
}
.catalog-card h3{
  font-size:20px
}
.catalog-card p,.catalog-categories button{
  font-size:12px
}
.catalog-card>span,.catalog-count{
  font-size:8px
}
.catalog-search input{
  font-size:16px
}
.catalog-results{
  grid-template-columns:1fr
}
.announcement{
  font-size:8px
}
.portal-link{
  font-size:12px
}
.portal-link span{
  margin-left:4px
}
.nav-actions{
  gap:8px
}
.scene-bottom p{
  font-size:12px
}
.scene-controls button{
  font-size:12px
}
.scene-controls button span{
  font-size:8px
}
.scene-controls button{
  padding-left:8px;
  padding-right:8px
}
.scene-bottom{
  margin-left:10%;
  margin-right:10%
}

}

@media(max-width:480px){
.portal-link{
  font-size:8px
}
.product-tabs button{
  font-size:12px
}
.closing-arrow{
  width:52px;
  height:52px;
  font-size:44px
}
.product-footer .button{
  width:100%
}

}

@media(max-width:375px){
.hero-ctas .text-link{
  font-size:12px
}
.hero-ctas{
  gap:12px
}
.closing-main{
  align-items:flex-start
}
.closing-arrow{
  width:44px;
  height:44px;
  font-size:36px
}
.pricing-switch button{
  font-size:12px;
  padding:8px 4px
}
.pricing-toolbar>.technical{
  display:none
}
.product-info h3{
  font-size:32px
}
.pricing-table td.plan-price{
  font-size:16px
}

}

@media(max-width:340px){
.product-specs strong{
  font-size:16px
}
.product-specs span{
  font-size:12px
}
.closing-bottom>div{
  flex-wrap:wrap
}
.footer-links{
  grid-template-columns:1fr 1fr;
  row-gap:24px
}

}


@media(max-width:700px){.product-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.product-tabs button{font-size:12px;letter-spacing:-.02em;line-height:1.4}.scene-controls button.active,.network-mode button.active{font-weight:600}}

/* Official supplied brand assets retain their original artwork and colors. */
.brand{gap:0;line-height:0;width:auto;height:40px}
.brand-logo{width:auto;height:40px;object-fit:contain;object-position:left center}
.brand-logo-dark{display:none}
[data-theme=dark] .brand-logo-light{display:none}
[data-theme=dark] .brand-logo-dark{display:block}
.footer-top .brand,.footer-top .brand-logo{width:auto;height:40px}

/* Original partner artwork: knock out white into alpha, then render in the theme color. */
.technology-row{display:grid;grid-template-columns:140px repeat(7,minmax(0,1fr));gap:24px;min-height:128px}
.partner-logo-item{display:flex;align-items:center;justify-content:center;min-width:0}
.partner-logo-filters{position:absolute;overflow:hidden;pointer-events:none}
.partner-logo{height:64px;width:auto;max-width:100%;object-fit:contain;opacity:1;filter:url(#partner-logo-knockout);clip-path:inset(4px)}
[data-theme=dark] .partner-logo{filter:url(#partner-logo-knockout) invert(1)}
@media(max-width:1200px){.technology-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 32px;padding:24px 0}.technology-row>.technical{justify-self:start}}
@media(max-width:700px){.technology-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}.technology-row>.technical{font-size:8px}}
@media(max-width:375px){.technology-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* NEO Domain: a practical search workbench directly below the foundation. */
.domain-section{padding-top:64px;padding-bottom:0}
.domain-card{display:grid;grid-template-columns:.85fr 1.35fr;gap:56px;padding:48px;background:var(--soft);border:1px solid var(--line);position:relative}
.domain-intro{align-self:center;min-width:0}
.domain-intro>.eyebrow{color:var(--primary-text);font-size:12px;line-height:1.5}
.domain-intro h2{margin:20px 0}
.domain-intro>p{font-size:16px;line-height:1.7;max-width:340px}
.domain-intro>.text-link{font-size:12px;margin-top:20px;gap:24px}
.domain-workbench{min-width:0}
.domain-workbench-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px;color:var(--muted)}
.domain-workbench-head .technical{font-size:12px;line-height:1.5;letter-spacing:.06em}
.domain-workbench-head>svg{width:24px;height:24px;fill:none;stroke:var(--primary-text);stroke-width:1.2;flex-shrink:0}
.domain-field-label{display:block;font-size:12px;line-height:1.5;font-weight:600;letter-spacing:0;margin-bottom:12px}
.domain-controls{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px;align-items:stretch}
.domain-controls>input{min-width:0;width:100%;height:56px;background:var(--surface);border:1px solid var(--line);border-radius:2px;color:var(--ink);font:400 16px/1.5 var(--font);padding:14px}
.domain-controls>input{letter-spacing:-.015em}
.domain-controls>input::placeholder{color:var(--muted);opacity:.8}
.domain-controls>input:focus,.domain-controls>input:focus-visible{outline:none;box-shadow:none}
.domain-controls>input[aria-invalid=true]{border-color:var(--ink)}
.domain-controls>.button{min-height:56px;padding:12px 16px;font-size:16px;gap:12px}
.domain-controls .domain-submit-label{font-size:16px;font-weight:600;line-height:1.5;transform:none}
.domain-submit-icon{font-size:20px;line-height:1}
.domain-help{font-size:12px;line-height:1.6;margin-top:12px}
.domain-error{font-size:12px;line-height:1.6;color:var(--ink);border-left:2px solid var(--ink);padding-left:10px;margin-top:12px}
.domain-extension-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:24px}
.domain-extension-options>button{display:flex;flex-direction:column;gap:4px;align-items:flex-start;border:1px solid var(--line);border-radius:2px;min-width:0;min-height:72px;padding:12px 10px;text-align:left;background:transparent;transition:border-color .2s,background .2s}
.domain-extension-options>button>strong{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.025em}
.domain-extension-options>button>span{font-size:12px;line-height:1.4;color:var(--muted)}
.domain-extension-options>button.active,.domain-extension-options>button:hover{border-color:var(--primary);background:var(--surface)}
.domain-workbench-foot{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;color:var(--muted);margin-top:20px}
.domain-result{border:1px solid var(--line);border-left:3px solid var(--primary);padding:20px;margin-top:20px;background:var(--surface)}
.domain-result[hidden],.domain-error[hidden]{display:none}
.domain-result-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.domain-result-name{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.025em;overflow-wrap:anywhere}
.domain-status{font-size:12px;font-weight:600;line-height:1.5;color:var(--primary-text);background:var(--primary-soft);padding:4px 8px;white-space:nowrap}
.domain-result-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.domain-price-detail{display:flex;flex-direction:column;gap:4px}
.domain-price-label{font-size:12px;line-height:1.5;color:var(--muted)}
.domain-result-price{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.domain-result-bottom .button{font-size:12px;min-height:44px;padding:10px 14px}
.domain-price-note,.domain-taken-copy,.domain-connection-copy{font-size:12px;line-height:1.65}
.domain-price-note{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.domain-taken-copy{max-width:290px}
.domain-result .text-link{font-size:12px}
.domain-connection-copy{margin:12px 0}
.domain-result[data-state=taken],.domain-result[data-state=error]{border-left-color:var(--muted)}
.domain-result[data-state=taken] .domain-status{color:var(--ink);background:var(--soft)}
.domain-search-form[data-loading=true] .domain-submit-icon{width:16px;height:16px;font-size:0px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:domain-loading .8s linear infinite}
.domain-controls :disabled,.domain-extension-options :disabled{cursor:wait;opacity:.65}
@keyframes domain-loading{to{transform:rotate(360deg)}}
@media(max-width:1200px){.domain-card{gap:32px;padding:36px;grid-template-columns:.8fr 1.2fr}.domain-controls{grid-template-columns:minmax(0,1fr) 112px}.domain-extension-options{grid-template-columns:repeat(3,minmax(0,1fr))}.domain-extension-options>button{min-height:64px}}
@media(max-width:960px){.domain-card{grid-template-columns:1fr;gap:32px;padding:32px}.domain-intro>p{max-width:560px}.domain-intro>.text-link{margin-top:16px}.domain-extension-options{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:700px){.domain-section{padding-top:40px}.domain-card{padding:24px;gap:28px}.domain-intro>.eyebrow{font-size:8px}.domain-intro h2{margin:16px 0}.domain-intro>p{font-size:16px}.domain-workbench-head{margin-bottom:20px;padding-bottom:16px}.domain-workbench-head .technical{font-size:8px}.domain-controls{grid-template-columns:minmax(0,1fr) 112px;gap:8px}.domain-controls>.button{justify-content:center}.domain-extension-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}.domain-extension-options>button{padding:12px 8px;min-height:68px}.domain-extension-options>button>strong{font-size:20px}.domain-extension-options>button>span{font-size:12px}.domain-workbench-foot{align-items:flex-start}.domain-workbench-foot>.activity-dot{margin-top:6px}.domain-result{padding:16px}.domain-result-name{font-size:20px}.domain-result-bottom{gap:16px}.domain-result-bottom .button{width:100%;justify-content:center}.domain-status{font-size:12px}}
@media(max-width:375px){.domain-card{padding:20px}.domain-extension-options{grid-template-columns:repeat(2,minmax(0,1fr))}.domain-result-name{font-size:16px}}

@media(max-width:700px){.domain-controls>.button{padding:12px;gap:8px}.domain-search-form[data-loading=true] .domain-submit-label{font-size:12px}}

/* Domain input fills the row; keyboard focus uses fill and text emphasis. */
.domain-controls input:focus,.domain-controls input:focus-visible,#domain-search-submit:focus,#domain-search-submit:focus-visible{outline:none;box-shadow:none}
.domain-controls>input:focus-visible{background:color-mix(in srgb,var(--surface) 90%,var(--accent) 10%);caret-color:var(--primary-text)}
#domain-search-submit:focus-visible .domain-submit-label{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
@media(max-width:480px){.domain-controls{grid-template-columns:minmax(0,1fr)}}

/* Keep hero annotations in clear zones around the infrastructure geometry. */
.label-compute{left:58%;top:17%;right:auto}
.hero-visual>.label-network{left:15%;top:46px;right:auto;z-index:4}
@media(max-width:1200px){.hero-visual>.label-network{top:20px}}
@media(max-width:960px){.hero-visual>.label-network{left:25%;top:-5px}}
@media(max-width:700px){.hero-visual>.label-network{left:8%;top:9px}}

/* Heading scale: compact display rhythm, comfortable section-title leading. */
:root{
  --heading-one-size:72px;
  --heading-one-leading:80px;
  --heading-one-tracking:-.04em;
  --heading-two-size:44px;
  --heading-two-leading:52px;
  --heading-two-tracking:-.025em;
}
:root h1{
  font-size:var(--heading-one-size);
  line-height:var(--heading-one-leading);
  letter-spacing:var(--heading-one-tracking);
  font-weight:600;
}
:root h2{
  font-size:var(--heading-two-size);
  line-height:var(--heading-two-leading);
  letter-spacing:var(--heading-two-tracking);
  font-weight:600;
}
h1,h2{overflow-wrap:break-word}
@media(max-width:960px){
  :root{--heading-one-size:64px;--heading-one-leading:72px}
}
@media(max-width:700px){
  :root{
    --heading-one-size:48px;--heading-one-leading:56px;--heading-one-tracking:-.035em;
    --heading-two-size:36px;--heading-two-leading:44px;--heading-two-tracking:-.02em;
  }
  .closing-main{flex-direction:column;align-items:flex-start;gap:24px}
}
@media(max-width:375px){
  :root{
    --heading-one-size:40px;--heading-one-leading:48px;--heading-one-tracking:-.025em;
    --heading-two-size:32px;--heading-two-leading:40px;
  }
}