:root{
--blue: #042a77;
--blue-600: #0a3a9c;
--blue-500: #1e52c4;
--blue-400: #3f74e8;
--blue-50: #eef2fb;
--blue-100: #dbe4f6;
--ink: #0b1330;
--ink-2: #1a2447;
--muted: #5a6487;
--muted-2: #8a93b0;
--hairline: rgba(4,42,119,0.12);
--hairline-2: rgba(4,42,119,0.06);
--bg: #f6f7fb;
--bg-2: #ffffff;
--bg-card: #ffffff;
--bg-tint: #f1f4fc;
--radius: 14px;
--radius-lg: 22px;
--shadow-sm: 0 1px 0 rgba(10,20,60,.04), 0 1px 2px rgba(10,20,60,.04);
--shadow-md: 0 1px 0 rgba(10,20,60,.05), 0 12px 28px -12px rgba(4,42,119,.18);
--shadow-lg: 0 1px 0 rgba(10,20,60,.05), 0 30px 60px -24px rgba(4,42,119,.28);
--accent: #00d1b2; /* subtle live-status accent */
}
html[data-theme="dark"]{
--blue: #6c8bff;
--blue-600: #85a1ff;
--blue-500: #3f74e8;
--blue-400: #2b57c4;
--blue-50: #10163a;
--blue-100: #161e4d;
--ink: #eef1fb;
--ink-2: #c7cdec;
--muted: #8f97bd;
--muted-2: #6c7399;
--hairline: rgba(180,196,255,0.12);
--hairline-2: rgba(180,196,255,0.06);
--bg: #070a1c;
--bg-2: #0a0f26;
--bg-card: #0d1330;
--bg-tint: #0c1128;
--shadow-sm: 0 1px 0 rgba(0,0,0,.4);
--shadow-md: 0 1px 0 rgba(0,0,0,.5), 0 20px 40px -16px rgba(0,0,0,.6);
--shadow-lg: 0 1px 0 rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Full-bleed blocks (.logo-marquee) size off 100vw, which includes the
classic scrollbar gutter — that spills a few px on Windows/Linux. Clip it
without making a scroll container (position:sticky still works). */
html{overflow-x:clip}
body{
font-family:'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-feature-settings:'ss01','cv11';
background:var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
letter-spacing:-0.005em;
}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; font-feature-settings:'zero','ss01'}
.serif{font-family:'Instrument Serif', Georgia, serif; font-style:italic; letter-spacing:-0.01em}
/* Gutter shrinks with the viewport: 32px is a third of a 320px phone. */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px, 4vw, 32px)}
/* ---------- TOP RIBBON ---------- */
.ribbon{
font-family:'JetBrains Mono', monospace;
font-size:11px;
letter-spacing:0.04em;
color:var(--muted);
background:var(--bg-2);
border-bottom:1px solid var(--hairline-2);
}
.ribbon-inner{
display:flex;align-items:center;justify-content:space-between;
height:34px;
}
.ribbon .left{display:flex;gap:24px;align-items:center}
.ribbon .right{display:flex;gap:24px;align-items:center}
.ribbon .dot{
width:6px;height:6px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 0 3px rgba(0,209,178,.15);
animation:pulse 2.2s ease-in-out infinite;
display:inline-block;margin-right:8px;vertical-align:1px;
}
@keyframes pulse{
0%,100%{box-shadow:0 0 0 0 rgba(0,209,178,.35)}
50%{box-shadow:0 0 0 6px rgba(0,209,178,0)}
}
/* ---------- HEADER ---------- */
header.nav{
position:sticky;top:0;z-index:50;
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
background:color-mix(in oklab, var(--bg-2) 82%, transparent);
border-bottom:1px solid var(--hairline);
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;
height:76px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
/* Every ![]()
now carries width/height attributes so the browser can reserve
space (no CLS). Those attributes are presentational hints that map to the
CSS width/height properties, so a rule pinning only ONE dimension would
stretch the image to the attribute's other value — hence the explicit
width:auto here and on the footer wordmark. */
.logo img{height:34px;width:auto;display:block}
.foot-col img{width:auto}
/* Same knock-out for the footer wordmark: the artwork is navy line-art, which
in dark mode sat at ~2:1 against the near-black slab. */
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .foot-col img{filter:brightness(0) invert(1)}
nav.menu{display:flex;gap:4px;align-items:center}
nav.menu a{
display:inline-flex;align-items:center;gap:6px;
padding:10px 14px;border-radius:10px;
color:var(--ink-2);text-decoration:none;
font-size:14.5px;font-weight:500;letter-spacing:-0.005em;
transition:background .15s, color .15s;
}
nav.menu a:hover{background:var(--bg-tint);color:var(--ink)}
nav.menu a .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .18s, opacity .18s}
/* dropdown menus */
nav.menu .m{position:relative;display:flex}
nav.menu .m::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
/* .open mirrors :hover — a section link is a toggle, so clicking it pins the
panel open instead of navigating (see setupMobileNav in src/client.js) */
nav.menu .m:hover > a,
nav.menu .m.open > a{background:var(--bg-tint);color:var(--ink)}
nav.menu .m:hover > a .chev,
nav.menu .m.open > a .chev{transform:rotate(225deg) translateY(2px);opacity:.8}
nav.menu .sub{
position:absolute;top:100%;left:0;margin-top:6px;
min-width:248px;padding:8px;
background:var(--bg-card);
border:1px solid var(--hairline);
border-radius:14px;
box-shadow:var(--shadow-lg);
display:flex;flex-direction:column;gap:1px;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease, transform .16s ease, visibility .16s;
z-index:60;
}
nav.menu .m:hover .sub,
nav.menu .m.open .sub{opacity:1;visibility:visible;transform:translateY(0)}
nav.menu .sub a{
display:flex;flex-direction:column;align-items:flex-start;gap:1px;
padding:9px 12px;border-radius:10px;width:100%;
}
nav.menu .sub a b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
nav.menu .sub a span{font-size:12px;color:var(--muted);font-weight:450}
nav.menu .sub a:hover b{color:var(--blue)}
.nav-cta{display:flex;gap:10px;align-items:center}
/* Theme toggle — injected by the client bundle into the ribbon; auto/light/dark. */
.theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 auto;
background:transparent;color:var(--muted);
border:0;border-radius:7px;
cursor:pointer;padding:0;margin:-4px 0;
transition:background .15s ease, color .15s ease;
}
.theme-toggle:hover{background:var(--bg-tint);color:var(--ink)}
.theme-toggle svg{width:15px;height:15px;display:block}
/* Show only the icon matching the active mode. */
.theme-toggle .ico{display:none}
.theme-toggle[data-mode="auto"] .ico-auto{display:block}
.theme-toggle[data-mode="light"] .ico-light{display:block}
.theme-toggle[data-mode="dark"] .ico-dark{display:block}
/* Hamburger toggle — injected by the client bundle, only shown on mobile. */
.nav-toggle{
display:none;
width:42px;height:42px;
align-items:center;justify-content:center;
flex-direction:column;gap:5px;
background:transparent;border:0;
border-radius:10px;cursor:pointer;padding:0;
transition:background .15s ease;
}
.nav-toggle:hover{background:var(--bg-tint)}
.nav-toggle span{
display:block;width:22px;height:2px;border-radius:2px;
background:var(--ink);
transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-active span:nth-child(2){opacity:0}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Auth buttons cloned into the mobile panel footer; hidden on desktop. */
.menu-cta{display:none}
.btn{
display:inline-flex;align-items:center;gap:8px;
font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-0.005em;
padding:11px 18px;border-radius:10px;
text-decoration:none;cursor:pointer;border:1px solid transparent;
transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.btn-ghost{color:var(--ink-2);background:transparent;border-color:var(--hairline)}
.btn-ghost:hover{background:var(--bg-tint);border-color:transparent}
.btn-primary{
color:#fff;
background:var(--blue);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -6px rgba(4,42,119,.45);
}
html[data-theme="dark"] .btn-primary{color:#0a0f26;background:#e6ecff}
.btn-primary:hover{transform:translateY(-1px);box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 26px -8px rgba(4,42,119,.55);}
.btn .arr{width:14px;height:14px;position:relative}
.btn .arr::before,.btn .arr::after{content:"";position:absolute;inset:0;margin:auto;background:currentColor}
.btn .arr::before{width:12px;height:1.5px;top:0;bottom:0}
.btn .arr::after{width:7px;height:7px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);right:0;background:transparent}
/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 64px}
.hero::before{
content:"";position:absolute;inset:-40% -20% auto -20%;height:900px;z-index:0;
background:
radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--blue) 14%, transparent) 0%, transparent 60%),
radial-gradient(40% 40% at 85% 10%, color-mix(in oklab, var(--blue-400) 10%, transparent) 0%, transparent 60%);
pointer-events:none;
}
.hero-grid{
position:absolute;inset:0;z-index:0;
background-image:
linear-gradient(var(--hairline-2) 1px, transparent 1px),
linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
opacity:.6;
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:start}
.hero-left{min-width:0}
.hero-right{position:relative;min-height:520px}
/* Same badge as .uc-eyebrow on the use-case/legal/company pages: sans body
text, mono only inside the chip. A full mono sentence read like terminal
output rather than a product announcement. */
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
/* let the sentence wrap rather than crushing the chip beside it */
flex-wrap:wrap;
padding:6px 13px 6px 8px;border-radius:999px;
border:1px solid var(--hairline);
background:var(--bg-2);
font-size:13px;letter-spacing:-0.005em;font-weight:500;color:var(--ink-2);
box-shadow:var(--shadow-sm);
}
.eyebrow .tag{
padding:2px 9px;border-radius:999px;
background:var(--blue);color:#fff;
font-family:'JetBrains Mono', monospace;font-size:10px;letter-spacing:.1em;font-weight:500;
white-space:nowrap;
}
html[data-theme="dark"] .eyebrow .tag{background:#e6ecff;color:#0a0f26}
/* Headline shape, site-wide: the dark half sits on one row, the blue .em half
on the row under it. Because the copy length differs per page and per
language, the size is a share of the *column* (cqw), not of the viewport —
the largest headline that still fits the column on one line wins, and the
px clamp only caps the extremes. Changing copy no longer needs a new
breakpoint; it just resolves to a slightly smaller share. */
.hero-left{container-type:inline-size}
h1.display{
/* 7.7cqw: "Unmetered dedicated servers," measures 8.09% of the column per
1px of type, so this leaves ~5% headroom. */
font-size:clamp(26px, 7.7cqw, 52px);
line-height:1.03;
letter-spacing:-0.035em;
font-weight:500;
margin:22px 0 0;
color:var(--ink);
max-width:none;
/* only kicks in for a word longer than the line — stops display type
punching out of a 320px gutter */
overflow-wrap:break-word;
}
/* the hard-coded break would add an empty row now that .em is a block */
h1.display br{display:none}
h1.display .em{
display:block;
font-family:'Inter Tight', -apple-system, sans-serif;
font-style:normal;font-weight:500;
color:var(--blue);
letter-spacing:-0.035em;
}
html[data-theme="dark"] h1.display .em{color:var(--blue-600)}
/* i18n: same two-row shape, smaller share of the column — the translated
headlines run 35-45% longer than the English ones ("Serwery dedykowane bez
limitu transferu," is the worst case at 5.86cqw per 1px of type). */
:root:not([lang="en"]) h1.display{
font-size:clamp(24px, 5.6cqw, 46px);
}
:root:not([lang="en"]) h1.page-title{
font-size:clamp(24px, 5.4cqw, 56px);
}
:root:not([lang="en"]) .uc-hero .page-title{font-size:clamp(24px, 5.7cqw, 50px)}
:root:not([lang="en"]) .net-hero .page-title{font-size:clamp(24px, 5.8cqw, 52px)}
:root:not([lang="en"]) h2.section-title{font-size:clamp(24px, 5.2cqw, 46px)}
:root:not([lang="en"]) .cta h2{font-size:clamp(22px, 4.8cqw, 40px)}
.lede{
margin-top:24px;
max-width:56ch;
font-size:19px;line-height:1.55;color:var(--muted);
letter-spacing:-0.005em;
}
.hero-actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:12px}
.hero-meta{
margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
}
.hero-meta .cell{padding:22px 24px;border-right:1px solid var(--hairline)}
.hero-meta .cell:last-child{border-right:0}
.hero-meta .k{
font-family:'JetBrains Mono', monospace;
font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2);
}
.hero-meta .v{
display:flex;align-items:baseline;gap:6px;
font-size:28px;font-weight:500;letter-spacing:-0.025em;margin-top:6px;color:var(--ink);
}
.hero-meta .v .u{font-size:14px;color:var(--muted);font-weight:400}
/* ---------- FLOATING SERVER TOWER ---------- */
.tower{
position:absolute; top:-10px; right:-10px;
width:100%; max-width:460px;
aspect-ratio: 3/4;
perspective:1400px;
pointer-events:none;
z-index:2;
}
.tower-inner{
position:absolute;inset:0;
transform: rotateX(8deg) rotateY(-16deg) rotateZ(2deg);
/* Deliberately NOT preserve-3d. The cards only translate on X, so nothing needs a
real 3D context — but preserve-3d nested each animated .srv inside the animated
parent as its own 3D-projected compositor layer, and the browser intermittently
failed to raster their gradient fill, leaving see-through cards. Flattening is
pixel-identical here (verified: all five card rects unchanged) and paints reliably. */
animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty{
0%,100%{transform: rotateX(8deg) rotateY(-16deg) rotateZ(2deg) translateY(0)}
50%{transform: rotateX(8deg) rotateY(-16deg) rotateZ(2deg) translateY(-14px)}
}
.srv{
position:absolute; left:0; right:0;
height:64px;
border-radius:12px;
/* colour + gradient as separate properties on purpose: the solid colour is an opaque
floor, so if the gradient ever fails to raster the card still reads as a filled
card instead of an empty outline. */
background-color:var(--bg-2);
background-image:linear-gradient(180deg, var(--bg-2), var(--bg-tint));
border:1px solid var(--hairline);
box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.6);
display:grid; grid-template-columns: 48px 1fr 90px; align-items:center; gap:14px;
padding:0 14px;
text-decoration:none; color:inherit; cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.srv:hover{
transform:translateX(-6px) scale(1.015);
border-color:color-mix(in oklab, var(--blue) 45%, var(--hairline));
box-shadow: var(--shadow-lg), 0 8px 24px color-mix(in oklab, var(--blue) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.6);
}
.srv:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
html[data-theme="dark"] .srv{background-color:#121a42;background-image:linear-gradient(180deg, #121a42, #0c1330);box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.04)}
.srv .slots{display:flex;gap:3px}
.srv .slots i{width:5px;height:22px;background:color-mix(in oklab, var(--blue) 25%, transparent);border-radius:2px}
.srv .slots i.on{background:var(--blue);box-shadow:0 0 6px color-mix(in oklab, var(--blue) 60%, transparent)}
.srv .lbl{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-2);letter-spacing:.04em}
.srv .lbl b{display:block;color:var(--ink);font-weight:500;font-size:11.5px}
.srv .leds{display:flex;gap:4px;justify-content:flex-end;align-items:center}
.srv .leds i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(0,209,178,.18)}
.srv .leds i.b{background:var(--blue-500);animation:blink 1.4s infinite}
.srv .leds i.a{background:var(--accent);animation:blink 1.8s infinite .4s}
.srv .spark{position:absolute;right:10px;bottom:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted)}
.tower .srv:nth-child(1){top:0; animation: floatA 5.5s ease-in-out infinite}
.tower .srv:nth-child(2){top:84px; animation: floatB 6.2s ease-in-out infinite .3s}
.tower .srv:nth-child(3){top:168px; animation: floatA 5.9s ease-in-out infinite .6s}
.tower .srv:nth-child(4){top:252px; animation: floatB 6.4s ease-in-out infinite .9s}
.tower .srv:nth-child(5){top:336px; animation: floatA 5.7s ease-in-out infinite 1.1s}
@keyframes floatA{0%,100%{transform:translateX(0)} 50%{transform:translateX(-6px)}}
@keyframes floatB{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}
.tower-glow{
position:absolute;inset:10% -20% -10% -10%;
background:radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--blue) 22%, transparent), transparent 70%);
filter:blur(30px);z-index:-1;pointer-events:none;
}
.tower-orb{
position:absolute;
width:8px;height:8px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 12px var(--accent);
opacity:.7;
}
.tower-orb.o1{top:10%;right:-8px;animation:orb 4.2s ease-in-out infinite}
.tower-orb.o2{top:55%;left:-6px;animation:orb 3.6s ease-in-out infinite .7s;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.tower-orb.o3{top:80%;right:6%;animation:orb 5s ease-in-out infinite 1.2s}
@keyframes orb{
0%,100%{transform:translate(0,0);opacity:.2}
50%{transform:translate(-10px,-14px);opacity:.8}
}
/* Hero visual: stacking handled in the responsive block below — keep it visible. */
.rail{
margin-top:28px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.rail .chip{
font-family:'JetBrains Mono', monospace;
font-size:12px;letter-spacing:0.02em;
padding:7px 12px;border-radius:999px;
background:var(--bg-2);color:var(--ink-2);
border:1px solid var(--hairline);text-decoration:none;display:inline-block;cursor:pointer;
transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.rail a.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rail .chip:hover{transform:translateY(-1px);background:var(--blue);color:#fff;border-color:transparent}
html[data-theme="dark"] .rail .chip:hover{background:#e6ecff;color:#0a0f26}
.rail .chip.hl{background:var(--blue);color:#fff;border-color:transparent}
html[data-theme="dark"] .rail .chip.hl{background:#e6ecff;color:#0a0f26}
.rail .sep{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);margin:0 8px}
/* Hero bandwidth rail: 9 chips at their natural width overflow the hero
column by ~90px, which wrapped "200 Gbps" onto a row of its own. From the
width where 9 equal columns still hold "200 Gbps", lay them out as one
segmented row instead of letting flex-wrap orphan the last chip. */
@media (min-width: 1180px){
.hero .rail{
display:grid;grid-template-columns:repeat(9, minmax(0,1fr));gap:6px;
}
.hero .rail .chip{
text-align:center;white-space:nowrap;
padding:7px 4px;font-size:11px;letter-spacing:0;
}
}
/* ---------- FEATURED CONFIGS ---------- */
.featured{
margin-top:56px;
border:1px solid var(--hairline);
border-radius:var(--radius-lg);
background:linear-gradient(180deg, var(--bg-2), var(--bg-tint));
padding:20px;
box-shadow:var(--shadow-lg);
position:relative;overflow:hidden;
}
.featured-head{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
padding:6px 8px 14px;border-bottom:1px solid var(--hairline);
margin-bottom:16px;
}
.featured-head .title{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:0.04em}
.featured-head .title b{color:var(--ink)}
.featured-head .status{display:flex;gap:16px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);flex-wrap:wrap}
.featured-head .status .dot{
width:6px;height:6px;border-radius:50%;display:inline-block;
background:var(--accent);margin-right:6px;vertical-align:middle;
box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
animation:blink 2s infinite;
}
@keyframes blink{0%,80%,100%{opacity:.35}40%{opacity:1}}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:4px}
.fcard{
display:flex;flex-direction:column;
padding:20px;border-radius:14px;
background:var(--bg-card);
border:1px solid var(--hairline-2);
transition:transform .2s, border-color .2s, box-shadow .2s;
}
.fcard:hover{transform:translateY(-2px);border-color:var(--hairline);box-shadow:var(--shadow-sm)}
.featured-pop{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue), var(--shadow-sm)}
.ftag{
align-self:flex-start;
font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;
color:var(--muted-2);padding:4px 9px;border-radius:999px;
border:1px solid var(--hairline);background:var(--bg-tint);
}
.ftag.is-pop{color:#fff;background:var(--blue);border-color:transparent}
html[data-theme="dark"] .ftag.is-pop{color:#0a0f26;background:#e6ecff}
.fname{font-size:17px;font-weight:500;letter-spacing:-0.015em;color:var(--ink);margin-top:14px}
.fcpu{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:4px}
.fspecs{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--hairline-2);display:flex;flex-direction:column;gap:9px}
.fspecs li{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.fspecs li span{color:var(--muted)}
.fspecs li b{color:var(--ink-2);font-weight:500}
.fprice{margin-top:18px;display:flex;align-items:baseline;gap:4px}
.fprice .n{font-size:30px;font-weight:500;letter-spacing:-0.03em;color:var(--ink)}
.fprice .u{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.fbtn{margin-top:16px;width:100%;justify-content:center}
.featured-foot{
display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
margin-top:16px;padding:14px 8px 4px;border-top:1px solid var(--hairline);
font-size:13px;color:var(--muted);
}
.featured-foot a{
display:inline-flex;align-items:center;gap:6px;
color:var(--blue);font-weight:500;text-decoration:none;
}
html[data-theme="dark"] .featured-foot a{color:var(--blue-600)}
.featured-foot a:hover{text-decoration:underline}
@media (max-width:860px){
.fgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
.featured-head .status .dot{animation:none}
}
/* ---------- SECTION ---------- */
section{padding:clamp(56px, 9vw, 120px) 0;position:relative}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,40px);margin-bottom:clamp(28px,4.5vw,56px);flex-wrap:wrap}
.section-label{
font-family:'JetBrains Mono',monospace;
font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);
display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.section-label::before{content:"";width:20px;height:1px;background:var(--blue);display:inline-block}
/* same two-row shape as the h1s: dark half on its own row, blue .em half
under it, sized against the title column so each section's copy picks the
size. The label+title column is the unclassed first child of .section-head. */
/* inline-size containment zeroes this flex item's content contribution, so it
needs an explicit basis or it collapses to 0 and the title wraps one word
per line. Full row here; the ≥961px block re-flows it beside .section-sub. */
.section-head > *:first-child{container-type:inline-size;flex:1 1 100%;min-width:0}
h2.section-title{
font-size:clamp(28px, 7cqw, 54px);
line-height:1.02;letter-spacing:-0.03em;font-weight:500;margin:0;max-width:none;
}
h2.section-title .em{display:block;font-family:'Inter Tight',-apple-system,sans-serif;font-style:normal;font-weight:500;color:var(--blue)}
html[data-theme="dark"] h2.section-title .em{color:var(--blue-600)}
.section-sub{color:var(--muted);font-size:17px;line-height:1.55;max-width:44ch;margin:0}
/* space-between + wrap never actually resolved side by side: the title's
max-content width always won the initial layout, so the sub dropped under
it and the right half of every section header sat empty on desktop.
Pin the two columns above the tablet breakpoint. */
@media (min-width:961px){
.section-head{flex-wrap:nowrap}
.section-head > :first-child{flex:1 1 auto;min-width:0}
.section-head > .section-sub{flex:0 1 44ch}
}
/* ---------- LOCATIONS / MAP ---------- */
.map-card{
border:1px solid var(--hairline);
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--bg-2);
box-shadow:var(--shadow-md);
}
.map-head{
display:flex;align-items:center;justify-content:space-between;
padding:18px 22px;border-bottom:1px solid var(--hairline);
font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)
}
.map-head .legend{display:flex;gap:18px;align-items:center}
.map-head .legend span{display:inline-flex;align-items:center;gap:8px}
.map-head .legend i{width:8px;height:8px;border-radius:50%}
.map-head .legend i.node{background:#fff;box-shadow:0 0 0 1px rgba(4,42,119,.55), 0 0 0 3px rgba(4,42,119,.14)}
.map-head .legend i.flow{background:#c4cad6;border:1px solid rgba(4,42,119,.40)}
/* contain:paint keeps every repaint inside the stage box. Without it the pulse
animation (stroke-dashoffset, main-thread repaint every frame) invalidated a rect
that reached the ~320KB of land geometry and the radial gradient below it,
so each frame re-rastered the whole world map — which is why scrolling anywhere
near the map stuttered. */
.map-stage{position:relative;aspect-ratio: 1000/500;overflow:hidden;
contain:paint;
background:radial-gradient(120% 120% at 50% 42%, #ffffff 0%, #f3f5f9 60%, #e9edf3 100%);
}
html[data-theme="dark"] .map-stage{
background:radial-gradient(120% 120% at 50% 42%, #0b1740 0%, #081231 60%, #060d24 100%);
}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-svg .land path{fill:url(#mapGrad);stroke:none}
html[data-theme="dark"] .map-svg .land path{opacity:.92}
/* .pop is a zero-size anchor placed exactly on the lat/long point */
.pop{
position:absolute;width:0;height:0;
pointer-events:auto;z-index:2;
}
.pop .pin{
position:absolute;left:0;top:0;transform:translate(-50%,-50%);
width:8px;height:8px;border-radius:50%;
background:radial-gradient(circle at 38% 33%, #ffffff, #e6ecf8 75%);
box-shadow:0 0 0 1.5px rgba(4,42,119,.30), 0 0 8px rgba(255,255,255,.85);
}
/* sonar ring only on live + hub PoPs — idle nodes stay calm so the eye reads hierarchy */
.pop.live .pin::after,
.pop.hub .pin::after{
content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
border-radius:50%;border:1px solid rgba(255,255,255,.75);
animation:sonar 3s cubic-bezier(.2,.6,.3,1) infinite;
}
/* transform + opacity ONLY: these two are the compositable pair, so the rings run on the
GPU and never dirty the stage. border-width used to animate here too, which forced a
main-thread repaint of the whole map layer 60 times a second for six tiny rings.
The ring scales 4.2x, so a fixed 1px border still reads as a thinning stroke. */
@keyframes sonar{
0%{transform:scale(.55);opacity:.85}
70%{opacity:.14}
100%{transform:scale(4.2);opacity:0}
}
/* knock the rings out of phase so they don't pulse in unison */
.pop.live:nth-of-type(2n) .pin::after{animation-delay:-1.2s}
.pop.live:nth-of-type(3n) .pin::after{animation-delay:-2.1s}
.pop.live .pin{box-shadow:0 0 0 2px rgba(4,42,119,.30), 0 0 12px rgba(255,255,255,.75)}
.pop.hub .pin{width:14px;height:14px;box-shadow:0 0 0 3px rgba(4,42,119,.28), 0 0 22px rgba(255,255,255,.8)}
/* hub gets a second, larger slow ring for emphasis */
.pop.hub .pin::before{
content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
border-radius:50%;border:1px solid rgba(255,255,255,.6);
animation:sonar 3s ease-out .8s infinite;
}
.pop:hover{z-index:6}
@media (prefers-reduced-motion: reduce){
.pop .pin::after,.pop .pin::before{animation:none;opacity:0}
}
/* traffic flow overlay */
.flow-host{position:absolute;inset:0;pointer-events:none;z-index:1}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Give the flow overlay its own compositor layer while the map is on screen, so the
per-frame dash repaint touches only these thin strokes and leaves the land, the
gradient and the pins alone. Dropped again when idle so we don't hold the texture. */
.map-stage:not(.is-idle) .flow-svg{will-change:transform}
/* faint static "pipe" under everything; draws itself in on load (pathLength normalised to 100) */
.flow-svg .arc{
fill:none;stroke:#9aa1b0;stroke-width:1.6;stroke-linecap:round;opacity:.8;
stroke-dasharray:100;stroke-dashoffset:100;animation:arcDraw 1.1s ease forwards;
}
.flow-svg .arc.live{opacity:.95;stroke-width:2}
html[data-theme="dark"] .flow-svg .arc{opacity:.32}
@keyframes arcDraw{to{stroke-dashoffset:0}}
/* travelling light pulse — reads as live data running through the link */
.flow-svg .pulse{
fill:none;stroke:#c4cad6;stroke-linecap:round;stroke-width:2.4;
stroke-dasharray:var(--seg,4) var(--gap,96);stroke-dashoffset:100;
animation:flow var(--dur,3.4s) linear var(--delay,0s) infinite;
}
.flow-svg .pulse.live{stroke:#dfe3ea;stroke-width:3}
/* the link runs the other way: same keyframes played backwards, so a return pulse
costs nothing extra to paint. partials/network-map-js.html decides which links
get it (parallel links in a bundle alternate, so a pair reads as duplex fibre). */
.flow-svg .pulse.rev{animation-direction:reverse}
/* Halos live on the GROUP, not on each of the ~98 paths. Per-path they cost ~196
drop-shadow passes on every animated frame; per-group it is three, and the result is
the same read (the strokes are 1.6-3px with a sub-5px glow, so group-vs-element
compositing is indistinguishable here).
light + dark halo each, so a coloured link reads on the pale sea AND the deep-blue land */
.flow-svg .arc-lines{filter:drop-shadow(0 0 .6px rgba(255,255,255,.5)) drop-shadow(0 0 1px rgba(4,16,45,.4))}
.flow-svg .pulses{filter:drop-shadow(0 0 3px rgba(196,202,214,.9)) drop-shadow(0 0 2px rgba(4,42,119,.5))}
.flow-svg .pulses.live{filter:drop-shadow(0 0 5px rgba(223,227,234,.95)) drop-shadow(0 0 2px rgba(4,42,119,.55))}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* Scrolled out of view (plus 200px of lead-in): freeze everything. stroke-dashoffset is
not compositable, so an off-screen map was still costing a main-thread repaint per
frame for the entire rest of the page. See the IntersectionObserver in
partials/network-map-js.html, which owns .is-idle. */
.map-stage.is-idle .flow-svg .arc,
.map-stage.is-idle .flow-svg .pulse,
.map-stage.is-idle .pop .pin::after,
.map-stage.is-idle .pop .pin::before{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
.flow-svg .arc{animation:none;stroke-dashoffset:0}
.flow-svg .pulse{animation:none;opacity:.45;stroke-dasharray:2 6;stroke-dashoffset:0}
}
/* label floats above the pin, shown on hover */
.pop .lab{
position:absolute;left:0;top:0;
transform:translate(-50%,calc(-50% - 15px));
font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-2);
background:var(--bg-2);border:1px solid var(--hairline);border-radius:6px;padding:2px 6px;
white-space:nowrap;
opacity:0;transition:opacity .2s;
}
.pop:hover{z-index:7}
.pop:hover .lab{opacity:1}
.map-foot{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--hairline);
}
.map-foot .cell{padding:18px 22px;border-right:1px solid var(--hairline)}
.map-foot .cell:last-child{border-right:0}
.map-foot .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-2)}
.map-foot .v{font-size:22px;font-weight:500;letter-spacing:-0.02em;margin-top:4px}
/* ---------- DATACENTER CAROUSEL ---------- */
.dc-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.dc{
position:relative;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--hairline);background:var(--bg-2);
box-shadow:var(--shadow-sm);
transition:transform .3s, box-shadow .3s;
}
.dc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dc img{width:100%;aspect-ratio:6/5;height:auto;object-fit:cover;display:block;filter:saturate(.9)}
.dc .meta{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.dc .meta .name{font-size:15px;font-weight:500;letter-spacing:-0.01em}
.dc .meta .city{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.dc .tag{
position:absolute;top:12px;left:12px;
font-family:'JetBrains Mono',monospace;font-size:10.5px;
background:color-mix(in oklab, var(--bg-2) 85%, transparent);
backdrop-filter:blur(6px);
border:1px solid var(--hairline);
padding:4px 8px;border-radius:999px;color:var(--ink-2);
letter-spacing:.04em;
}
.dc .tag i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:6px;vertical-align:1px;box-shadow:0 0 0 2px rgba(0,209,178,.2)}
/* ---------- FEATURES ---------- */
.features{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--hairline);
border-left:1px solid var(--hairline);
border-radius:var(--radius-lg);
overflow:hidden;
background:var(--bg-2);
}
.feature{
padding:32px 32px 36px;
border-right:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
display:flex;flex-direction:column;gap:12px;
position:relative;
}
/* 220px was sized for the 3-up desktop grid; in the 2-up tablet band the
cells are ~345px wide and the copy left ~95px of drawn-in empty box. */
@media (min-width:961px){
.feature{min-height:220px}
}
.feature .num{
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2);letter-spacing:.14em
}
.feature h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-0.02em}
.feature p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:34ch}
.feature .ic{
position:absolute;top:28px;right:28px;width:36px;height:36px;
border:1px solid var(--hairline);border-radius:10px;
display:flex;align-items:center;justify-content:center;color:var(--blue);
background:var(--bg-tint);
}
html[data-theme="dark"] .feature .ic{color:var(--blue-600)}
/* ---------- PRICING TEASE ---------- */
.pricing-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.price-card{
border:1px solid var(--hairline);border-radius:var(--radius-lg);
padding:28px;background:var(--bg-2);display:flex;flex-direction:column;gap:18px;
position:relative;overflow:hidden;
transition:transform .2s, box-shadow .2s, border-color .2s;
}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab, var(--blue) 25%, var(--hairline))}
.price-card.hl{
background:
linear-gradient(180deg, color-mix(in oklab, var(--blue) 8%, var(--bg-2)), var(--bg-2));
border-color:color-mix(in oklab, var(--blue) 30%, var(--hairline));
}
.price-card .kind{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.price-card h3{margin:0;font-size:26px;font-weight:500;letter-spacing:-0.02em}
/* Side by side, a title that wraps to two lines pushed its price and bullet
list a line below the neighbouring cards. Subgrid aligns every row of the
three cards against shared tracks — no reserved empty band on the pages
whose titles all fit one line. Five in-flow children per card
(.kind, h3, price block, ul, cta); .badge is absolutely positioned. */
@media (min-width:961px){
.pricing-grid{grid-template-rows:auto auto auto 1fr auto}
.price-card{display:grid;grid-template-rows:subgrid;grid-row:span 5}
}
.price-card .from{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.price-card .pr{display:flex;align-items:baseline;gap:6px}
.price-card .pr .n{font-size:42px;font-weight:500;letter-spacing:-0.03em}
.price-card .pr .u{color:var(--muted);font-size:14px}
.price-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.price-card li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.price-card li::before{
content:"";width:14px;height:14px;border-radius:50%;
background:color-mix(in oklab, var(--blue) 15%, transparent);
flex:none;margin-top:3px;position:relative;
}
.price-card li::after{
content:"";position:absolute;width:6px;height:3px;border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);
transform:rotate(-45deg);margin-left:4px;margin-top:5px;
}
.price-card .badge{
position:absolute;top:20px;right:20px;
font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
padding:4px 9px;border-radius:999px;background:var(--blue);color:#fff
}
html[data-theme="dark"] .price-card .badge{background:#e6ecff;color:#0a0f26}
/* ---------- PARTNERS ---------- */
.partners{
padding:28px;border:1px solid var(--hairline);border-radius:var(--radius-lg);
background:var(--bg-2);overflow:hidden
}
.partners img{width:100%;height:auto;display:block;opacity:.85;filter:grayscale(20%)}
html[data-theme="dark"] .partners img{filter:invert(1) grayscale(30%);opacity:.7}
/* logo marquee — two rows scrolling opposite directions */
.logo-marquee{
width:100vw;margin-left:calc(50% - 50vw);
border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
background:var(--bg-2);overflow:hidden;padding:30px 0;
display:flex;flex-direction:column;gap:18px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}
.logo-row{overflow:visible}
.logo-track{
display:flex;width:max-content;
will-change:transform;animation:mq-left 46s linear infinite
}
.logo-track.ltr{animation-name:mq-right}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-item{
flex:0 0 auto;display:grid;place-items:center;
width:172px;height:74px;margin-right:16px;padding:0 22px;border-radius:14px;
background:#fff;border:1px solid var(--hairline);
text-decoration:none;cursor:pointer;
transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease
}
.logo-item img{
max-width:100%;max-height:40px;width:auto;height:auto;object-fit:contain;
filter:grayscale(100%);opacity:.72;transition:filter .25s ease,opacity .25s ease
}
.logo-item:hover{border-color:var(--blue-400);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.logo-item:hover img{filter:none;opacity:1}
.logo-item:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px}
/* dark mode: white cards were 20 glaring bricks on a near-black page. Cards
become faint glass instead, and every logo is rendered as a white
silhouette — grayscale+invert turns dark artwork light, and screen blending
drops the black that invert leaves behind (interlan.png ships an opaque
white background, so it needs the blend, not just alpha). */
html[data-theme="dark"] .logo-marquee{background:transparent;border-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .logo-item{
isolation:isolate;
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
border-color:rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 14px -8px rgba(0,0,0,.8)
}
html[data-theme="dark"] .logo-item img{
filter:grayscale(100%) invert(1) brightness(1.15);
mix-blend-mode:screen;
opacity:.66
}
html[data-theme="dark"] .logo-item:hover{
background:linear-gradient(180deg, rgba(108,139,255,.14), rgba(108,139,255,.05));
border-color:color-mix(in oklab, var(--blue) 55%, transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px -12px rgba(0,0,0,.9)
}
/* hover must beat the light-mode `filter:none` rule, so restate the filter */
html[data-theme="dark"] .logo-item:hover img{
filter:grayscale(100%) invert(1) brightness(1.35);
opacity:1
}
/* Orange and Telefónica ship their wordmark reversed out of a filled block.
Inverting those turns the block light and the letters dark — so leave them
un-inverted: the block greys down into the card and the type stays white. */
html[data-theme="dark"] .logo-item img[src*="orange"],
html[data-theme="dark"] .logo-item img[src*="telefonica"],
html[data-theme="dark"] .logo-item:hover img[src*="orange"],
html[data-theme="dark"] .logo-item:hover img[src*="telefonica"]{
filter:grayscale(100%) brightness(.85);
mix-blend-mode:normal
}
@keyframes mq-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mq-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:640px){
.logo-item{width:130px;height:60px;padding:0 16px}
.logo-item img{max-height:30px}
.logo-track{animation-duration:34s}
}
@media (prefers-reduced-motion:reduce){
.logo-track{animation:none;transform:none}
}
/* ---------- SUPPORT ---------- */
.support{
display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;
padding:40px;border:1px solid var(--hairline);border-radius:var(--radius-lg);
background:var(--bg-2);box-shadow:var(--shadow-md);
}
.support ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.support li{display:grid;grid-template-columns:28px 1fr;gap:14px;font-size:15px;color:var(--ink-2);line-height:1.5}
.support li b{color:var(--ink);font-weight:500;display:block}
.support li .d{color:var(--muted)}
.support li .ic{
width:28px;height:28px;border-radius:8px;border:1px solid var(--hairline);
display:flex;align-items:center;justify-content:center;color:var(--blue)
}
.support-img{
border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
background:
radial-gradient(60% 80% at 30% 20%, color-mix(in oklab, var(--blue) 18%, transparent), transparent 60%),
var(--bg-tint);
display:flex;align-items:center;justify-content:center;
border:1px solid var(--hairline);
}
.support-img img{width:100%;height:100%;max-width:none;object-fit:cover}
/* ---------- CTA ---------- */
.cta{
border-radius:var(--radius-lg);overflow:hidden;position:relative;
padding:72px 48px;
background:
radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--blue-400) 35%, transparent) 0%, transparent 50%),
radial-gradient(60% 80% at 0% 100%, color-mix(in oklab, var(--blue-500) 30%, transparent) 0%, transparent 50%),
var(--blue);
color:#fff;
box-shadow:var(--shadow-lg);
}
.cta::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}
.cta-inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.cta-inner > *:first-child{container-type:inline-size}
.cta h2{font-size:clamp(26px, 8cqw, 48px);line-height:1.05;letter-spacing:-0.03em;font-weight:500;margin:0;max-width:none}
.cta h2 .em{display:block;font-family:'Inter Tight',-apple-system,sans-serif;font-style:normal;font-weight:500;color:color-mix(in oklab, #fff 85%, transparent)}
.cta p{color:rgba(255,255,255,.75);margin:16px 0 0;max-width:44ch;font-size:16px;line-height:1.55}
.cta .actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
/* Below ~1100 the two buttons stop fitting the 1fr actions track and wrap
into a ragged right-aligned stack. Stack the CTA properly instead. */
@media (max-width:1100px){
.cta-inner{grid-template-columns:1fr;gap:26px}
.cta .actions{justify-content:flex-start}
}
/* dark mode: --blue flips to #6c8bff, so the light-mode recipe painted the
whole slab in bright periwinkle — a glare panel, and white body copy on it
sat around 2.4:1. Rebuild it as a deep navy card lit by the same two blue
glows, so the block reads as elevated rather than emissive. */
html[data-theme="dark"] .cta{
background:
radial-gradient(90% 120% at 100% 0%, rgba(108,139,255,.26) 0%, transparent 55%),
radial-gradient(70% 95% at 0% 100%, rgba(63,116,232,.20) 0%, transparent 55%),
linear-gradient(180deg, #131e4e 0%, #0a1030 100%);
border:1px solid rgba(140,165,255,.16);
box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
html[data-theme="dark"] .cta::before{
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}
html[data-theme="dark"] .cta p{color:rgba(226,232,255,.7)}
.btn-white{background:#fff;color:var(--blue);box-shadow:inset 0 1px 0 rgba(0,0,0,.06), 0 6px 18px -6px rgba(0,0,0,.4)}
.btn-white:hover{transform:translateY(-1px)}
/* var(--blue) is a light periwinkle in dark mode — unreadable on a white pill */
html[data-theme="dark"] .btn-white{background:#eef1fb;color:#0a1030}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-outline-white:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
/* ---------- FOOTER ---------- */
footer{padding:60px 0 40px;border-top:1px solid var(--hairline);margin-top:40px}
/* 5 columns + 4×40px gaps squeezed the brand blurb to ~196px at 1024 and
broke the company name across lines. Let the gutter shrink with the page. */
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:clamp(22px,3vw,40px)}
.foot-col h2{
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
margin:0 0 16px;font-weight:500;
}
.foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:6px 0;letter-spacing:-0.005em}
.foot-col a:hover{color:var(--blue)}
.foot-about{color:var(--muted);font-size:14px;line-height:1.6;margin-top:16px;max-width:34ch}
/* Social row, under the brand blurb. .foot-col a is display:block (and gets a
taller padding on mobile) for the link lists, so the icon links have to be
selected one level deeper to win and opt back into a row of square boxes. */
.foot-social{display:flex;align-items:center;gap:10px;margin-top:18px}
.foot-col .foot-social a{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;padding:0;border-radius:9px;
color:var(--muted);border:1px solid var(--hairline);
transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.foot-col .foot-social a:hover{
color:var(--blue);border-color:var(--blue);
background:color-mix(in oklab,var(--blue) 8%,transparent);
}
.foot-social svg{width:17px;height:17px;display:block}
.foot-legal{
margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);letter-spacing:.03em;line-height:1.8;
}
/* Separators live on the FOLLOWING item, so a wrap never strands a "·" at the
end of a line — the dot travels down with the field it introduces. Each
field is atomic (nowrap); only the long address may break internally. */
.foot-legal{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.55em}
.foot-legal span{white-space:nowrap}
.foot-legal .fl-addr{white-space:normal}
.foot-legal span + span::before{content:"·";margin-right:.55em;color:var(--muted-2);opacity:.7}
/* "AS 25198" in the ribbon and the footer's bottom line points at our PeeringDB
record. Both sit in muted mono runs, so the link inherits its surroundings
and only declares itself on hover. */
.as-link{color:inherit;text-decoration:none}
.as-link:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.fl-name{color:var(--ink-2);letter-spacing:.07em}
/* No rule matched the mailto, so it fell back to the UA link blue — a
saturated underlined stripe inside an otherwise muted mono run, and in dark
mode it buzzed against the near-black. Keep it in the run's own voice and
save the brand blue for hover. */
.foot-legal a{
color:var(--ink-2);text-decoration:underline;
text-decoration-color:color-mix(in srgb, currentColor 30%, transparent);
text-underline-offset:3px;text-decoration-thickness:1px;
}
.foot-legal a:hover{color:var(--blue);text-decoration-color:currentColor}
.foot-bottom{
display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;
margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);
font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);letter-spacing:.03em;
}
.foot-legal + .foot-bottom{margin-top:10px;padding-top:0;border-top:none}
/* ---------- TWEAKS PANEL ---------- */
.tweaks-panel{
position:fixed;right:20px;bottom:20px;z-index:100;
background:var(--bg-2);border:1px solid var(--hairline);
border-radius:14px;padding:14px;display:none;flex-direction:column;gap:10px;
box-shadow:var(--shadow-lg);
min-width:220px;
}
.tweaks-panel.on{display:flex}
.tweaks-panel .th{
display:flex;justify-content:space-between;align-items:center;
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
.tweaks-panel .th b{color:var(--ink);font-weight:500}
.tweaks-panel .row{display:flex;gap:6px}
.tweaks-panel .seg{
flex:1;padding:8px 10px;border:1px solid var(--hairline);border-radius:8px;
font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-2);
background:transparent;cursor:pointer;text-align:center
}
.tweaks-panel .seg.on{background:var(--blue);color:#fff;border-color:transparent}
html[data-theme="dark"] .tweaks-panel .seg.on{background:#e6ecff;color:#0a0f26}
/* ---------- RESPONSIVE ---------- */
/* The desktop bar needs ~1100px before the nav rows start crowding the
logo and the auth buttons — the menu collapsed at 960, so 960-1100 ran a
cramped full bar. Hamburger takes over from 1100 down. Layout rules for
the page body still switch at 960 (next block). */
@media (max-width: 1100px){
/* ----- Responsive nav: bar (logo + theme + hamburger) + accordion panel - */
.logo{order:1}
.nav-toggle{display:inline-flex;order:2;margin-left:auto}
/* CTAs leave the bar; a copy lives in the panel footer (.menu-cta). */
.nav-cta{display:none}
nav.menu{
display:flex;flex-direction:column;align-items:stretch;gap:0;
position:absolute;top:100%;left:0;right:0;
background:var(--bg-2);
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);
box-shadow:0 26px 50px -26px rgba(10,15,40,.30);
padding:6px 0 10px;
max-height:calc(100dvh - 76px);overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
header.nav.open nav.menu{opacity:1;visibility:visible;transform:none}
/* Top-level rows, separated by hairlines. */
nav.menu > a,
nav.menu .m > a{
display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;border-radius:0;
font-size:15.5px;font-weight:500;color:var(--ink);
}
nav.menu .m,
nav.menu > a{border-top:1px solid var(--hairline-2)}
nav.menu > .m:first-of-type,
nav.menu > a:first-of-type{border-top:0}
nav.menu .m{position:static;display:block}
nav.menu .m::after{display:none}
/* Kill the desktop hover-bg on the row links (not the footer buttons). */
nav.menu .m > a:hover,
nav.menu > a:hover,
nav.menu .sub a:hover{background:transparent}
nav.menu .m > a .chev{
width:8px;height:8px;border-color:var(--muted);opacity:.7;
transform:rotate(45deg) translateY(-2px);transition:transform .22s ease;
}
nav.menu .m.open > a{color:var(--blue)}
nav.menu .m.open > a .chev{transform:rotate(225deg) translateY(2px);border-color:var(--blue);opacity:1}
/* Accordion sub-menu — collapsed until its section is tapped. */
nav.menu .sub{
position:static;opacity:1;visibility:visible;transform:none;
min-width:0;width:auto;background:var(--bg-tint);
border:0;box-shadow:none;margin:0;padding:0;
display:flex;flex-direction:column;
max-height:0;overflow:hidden;
transition:max-height .28s ease;
}
nav.menu .m.open .sub{max-height:460px}
nav.menu .sub a{padding:11px 24px 11px 24px;gap:1px}
nav.menu .sub a b{font-size:14px}
nav.menu .sub a span{display:block;font-size:12px;color:var(--muted)}
/* Auth buttons, cloned into the panel footer by the client bundle. */
.menu-cta{
display:flex;flex-direction:column;gap:10px;
padding:16px 24px 8px;margin-top:4px;
border-top:1px solid var(--hairline);
}
.menu-cta .btn{width:100%;justify-content:center;padding:13px}
/* nav.menu a sets a dark color; restore each button's own text color. */
.menu-cta .btn-primary{color:#fff}
.menu-cta .btn-ghost{color:var(--ink)}
}
@media (max-width: 960px){
/* Stack hero to one column. The desktop "tower" is a 3D-rotated, absolutely
positioned stack — that perspective looks skewed/broken on narrow screens,
so flatten it into a clean flat list of spec cards instead. */
.hero-inner{grid-template-columns:1fr}
.hero-right{min-height:0;margin-top:20px}
.tower{
position:relative;top:auto;right:auto;left:auto;
width:100%;max-width:520px;margin:0 auto;
aspect-ratio:auto;perspective:none;pointer-events:auto;
}
.tower-inner{
position:relative;inset:auto;transform:none;animation:none;
display:flex;flex-direction:column;gap:10px;
}
.tower .srv{
position:static;top:auto;height:auto;min-height:58px;
transform:none !important;animation:none !important;width:100%;
grid-template-columns:44px 1fr auto;gap:12px;padding:12px 14px;
}
.tower .srv .lbl b{white-space:nowrap}
.tower-glow,.tower-orb{display:none}
.hero-meta{grid-template-columns:repeat(2,1fr)}
.hero-meta .cell:nth-child(2){border-right:0}
.hero-meta .cell:nth-child(1),.hero-meta .cell:nth-child(2){border-bottom:1px solid var(--hairline)}
.features{grid-template-columns:1fr 1fr}
.dc-row{grid-template-columns:1fr 1fr}
/* A single 700px-wide price card holding three short bullets stretched its
CTA to ~650px with the label pinned left. Keep two up on a tablet; the
odd third card spans the row so nothing is orphaned. */
.pricing-grid{grid-template-columns:repeat(2,1fr)}
.price-card:last-child:nth-child(odd){grid-column:1 / -1}
.map-foot{grid-template-columns:1fr 1fr}
.map-foot .cell:nth-child(2){border-right:0}
.support{grid-template-columns:1fr;padding:24px}
.cta{padding:40px 28px}
.cta-inner{grid-template-columns:1fr}
.cta .actions{justify-content:flex-start}
/* 5 cells in 2 tracks left "Company" alone on a third row. Tablet keeps the
brand block as a real left column spanning both link rows — full-width it
stranded a 34ch blurb against half a page of empty space and pushed the
footer past 700px tall. Links pair up 2×2 beside it. */
.foot-grid{grid-template-columns:1.15fr 1fr 1fr;row-gap:32px}
.foot-col:first-child{grid-row:1 / span 2}
/* The inline legal run needs ~830px; below that it always wraps. Rather than
one field per line (five ragged mono rows), give the name and address a
row each and let the two registration IDs share the third as a pair. The
leading separators on those two rows would start a line with a "·", so
they're dropped; the one BETWEEN the IDs stays. */
.foot-legal{row-gap:1px}
.fl-name,.fl-addr{flex:0 0 100%}
.fl-addr{text-wrap:balance}
.foot-legal .fl-addr::before,.foot-legal .fl-addr + span::before{content:none}
/* ----- Responsive ribbon ----- */
/* Drop the company text but keep the theme toggle reachable. */
.ribbon .right{gap:0}
.ribbon .right span{display:none}
.ribbon .left{gap:16px}
}
/* Below tablet a 42px price in a half-width card is cramped — go single. */
@media (max-width: 700px){
.pricing-grid{grid-template-columns:1fr}
}
/* ----- Tablet / large phone: drop the last of the 3-4 up rows ----- */
@media (max-width: 720px){
/* 2-up features leave ~120px per cell on a phone — the copy clipped
against the card's overflow:hidden. One column below tablet. */
.features{grid-template-columns:1fr}
.feature{min-height:0;padding:26px 24px 28px}
.feature .ic{top:24px;right:22px}
/* one column gives the heading the full card width, which runs it straight
under the absolutely positioned icon tile — reserve the icon's column */
.feature h3,.feature .num{padding-right:58px}
.feature p{max-width:none}
/* Three tracks leave ~170px per link column here — "Unmetered Dedicated"
and its longer translations wrap mid-label. Brand goes back to a
full-width row above a 2-up link block. */
.foot-grid{grid-template-columns:1fr 1fr}
.foot-col:first-child{grid-column:1 / -1;grid-row:auto}
.foot-about{max-width:46ch}
}
@media (max-width: 600px){
/* Phone: trim the tall top padding so content sits higher. */
.hero{padding:36px 0 60px}
.hero-right{margin-top:14px}
/* Micro-label floor: 10px mono reads fine on a 27" panel, not in the hand. */
.eyebrow .tag{font-size:11px}
/* Phone: reclaim the desktop cell padding — at 2-up it ate half the cell. */
.hero-meta .cell{padding:16px 14px}
.hero-meta .v{font-size:24px}
.map-head{padding:14px 16px;flex-wrap:wrap;gap:8px}
.map-head .legend{gap:14px;flex-wrap:wrap}
.map-foot .cell{padding:14px 16px}
.map-foot .v{font-size:19px}
.featured{padding:14px}
.cta{padding:32px 22px}
.cta p{margin-top:12px}
.support{padding:20px}
/* 10px mono labels are legible on a 27" display, not in the hand. */
.ftag,.dc .tag,.srv .lbl,.map-foot .k,.featured-head .status{font-size:11px}
/* the only control in the ribbon, in the hardest corner to reach */
.theme-toggle{width:34px;height:34px;margin:-5px -8px -5px 0}
.theme-toggle svg{width:16px;height:16px}
/* Phone: a single representative server card is enough; hide the rest. */
.tower .srv:nth-child(n+2){display:none}
/* Phone: keep the ribbon to a single clean status line. */
.ribbon .left span:nth-child(2){display:none}
/* Footer: trim the tall top padding and stack the mono bottom line so the
two items don't cram side by side. Grid stays 2-up from the 960 rule,
brand blurb full-width from the same rule. */
footer{padding:44px 0 32px;margin-top:24px}
.foot-grid{gap:28px 24px}
/* 14px links at 6px padding are a 29px tap target in a two-column list. */
.foot-col a{padding:9px 0}
/* standalone card link, not inline prose — give it a real touch box */
.featured-foot a{padding:8px 0}
/* Pull the legal zone in: at 48px it read as a detached slab of mono. */
.foot-legal{margin-top:28px;padding-top:18px}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}
/* "…Toate drepturile rezervate." otherwise strands one word on line two. */
.foot-bottom div{text-wrap:balance}
}
/* ----- Small phone (≤430px): the last 2-up rows go single file ----- */
@media (max-width: 430px){
/* 2-up datacenter cards leave a ~150px photo with a name under it —
the city line truncated. Full width reads properly. */
.dc-row{grid-template-columns:1fr;gap:14px}
.dc img{aspect-ratio:16/9}
/* Two 26px prices side by side wrapped mid-number. */
.hero-meta{grid-template-columns:1fr}
.hero-meta .cell{border-right:0;border-bottom:1px solid var(--hairline)}
.hero-meta .cell:last-child{border-bottom:0}
.map-foot{grid-template-columns:1fr}
.map-foot .cell{border-right:0;border-bottom:1px solid var(--hairline)}
.map-foot .cell:last-child{border-bottom:0}
.fprice .n{font-size:26px}
.hero-actions .btn,.cta .actions .btn{flex:1 1 100%;justify-content:center}
}