/* ============================================================
   THE LINK — shared design tokens
   Ink/Paper base, Timing = bib red/flag yellow, Colocation = data blue/slate teal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink: #14161A;
  --ink-soft: #21242B;
  --paper: #F6F5F1;
  --paper-dim: #EAE8E1;
  --line: rgba(20,22,26,0.12);
  --line-soft: rgba(246,245,241,0.16);
  --muted: #6B7280;

  --timing-1: #E8432F;   /* bib red */
  --timing-2: #F5B301;   /* flag yellow */
  --timing-glow: rgba(232,67,47,0.35);

  --colo-1: #2F6FED;     /* data blue */
  --colo-2: #0E7C86;     /* slate teal */
  --colo-glow: rgba(47,111,237,0.35);

  --font-display-timing: 'Anton', sans-serif;
  --font-display-colo: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radius: 6px;
  --container: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
@media (max-width:720px){ section{ padding:64px 0; } }

h1,h2,h3{ margin:0 0 0.4em; line-height:1.05; }
p{ margin:0 0 1em; color:var(--muted); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:0.5;
}

/* ---------- shared header / footer ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,245,241,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ink); font-weight:700; font-size:18px; letter-spacing:0.02em;
}
.brand-logo{ height:40px; width:auto; flex-shrink:0; }
.nav{ display:flex; align-items:center; gap:32px; }
.nav a{
  color:var(--ink); opacity:0.68; font-size:14.5px; font-weight:500;
  transition:opacity .2s ease;
}
.nav a:hover{ opacity:1; }
.nav .btn{ opacity:1; }
.nav .btn-outline{ color:var(--ink); border-color:var(--line); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-timing{ background:var(--timing-1); color:#fff; }
.btn-colo{ background:var(--colo-1); color:#fff; }
.btn-outline{ background:transparent; border-color:currentColor; }

.site-footer{
  background:var(--ink); color:rgba(246,245,241,0.72);
  padding:56px 0 28px;
}
.site-footer .wrap{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px;
}
.site-footer h4{ color:var(--paper); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 14px; }
.site-footer p, .site-footer a{ font-size:14.5px; color:rgba(246,245,241,0.68); margin:0 0 8px; }
.site-footer a:hover{ color:var(--paper); }
.footer-bottom{
  max-width:var(--container); margin:40px auto 0; padding:20px 28px 0;
  border-top:1px solid var(--line-soft);
  font-size:12.5px; color:rgba(246,245,241,0.45);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media (max-width:720px){
  .site-footer .wrap{ grid-template-columns:1fr; }
  .nav{ gap:16px; }
  .nav a:not(.btn){ display:none; }
}

/* ============================================================
   HUB PAGE — split hero
   ============================================================ */
body.hub{ background:var(--ink); }
.split-hero{
  position:relative;
  min-height:calc(100vh - 76px);
  display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:860px){ .split-hero{ grid-template-columns:1fr; } }

.split-panel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 56px;
  min-height:420px;
}
@media (max-width:720px){ .split-panel{ padding:48px 28px; } }

.split-panel.timing-panel{
  background:
    radial-gradient(circle at 30% 20%, var(--timing-glow), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 34px),
    var(--ink);
}
.split-panel.colo-panel{
  background:
    radial-gradient(circle at 70% 80%, var(--colo-glow), transparent 55%),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
    var(--ink);
  background-size:auto, 42px 42px, 42px 42px, auto;
}
.split-panel .tag{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.16em;
  text-transform:uppercase; margin-bottom:18px;
}
.timing-panel .tag{ color:var(--timing-2); }
.colo-panel .tag{ color:var(--colo-2); }

.timing-panel h2{
  font-family:var(--font-display-timing); font-weight:400;
  font-size:clamp(40px,6vw,64px); color:#fff; text-transform:uppercase; letter-spacing:0.01em;
}
.colo-panel h2{
  font-family:var(--font-display-colo); font-weight:700;
  font-size:clamp(36px,5.4vw,56px); color:#fff;
}
.split-panel p{ color:rgba(246,245,241,0.68); max-width:38ch; font-size:16px; }
.split-panel .btn{ margin-top:20px; width:fit-content; }

.chain-seam{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:5; width:88px; height:88px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
@media (max-width:860px){ .chain-seam{ display:none; } }

.hub-intro{ background:var(--paper); color:var(--ink); text-align:center; }
.hub-intro h3{ font-family:var(--font-body); font-size:28px; max-width:640px; margin:0 auto 18px; }
.hub-intro p{ max-width:560px; margin:0 auto; }
.stat-row{
  display:flex; justify-content:center; gap:64px; margin-top:48px; flex-wrap:wrap;
}
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-mono); font-size:34px; font-weight:600; }
.stat .label{ font-size:13px; color:var(--muted); letter-spacing:0.04em; text-transform:uppercase; }

/* ============================================================
   TIMING PAGE — bold & athletic
   ============================================================ */
body.timing{ --accent:var(--timing-1); --accent-2:var(--timing-2); }
.timing-hero{
  background:
    radial-gradient(circle at 20% 0%, var(--timing-glow), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 34px),
    var(--ink);
  color:#fff; padding:110px 0 90px; text-align:left;
}
.timing-hero h1{
  font-family:var(--font-display-timing); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,7vw,84px); letter-spacing:0.01em; max-width:14ch;
}
.timing-hero .sub{ color:rgba(246,245,241,0.72); max-width:52ch; font-size:18px; }
.race-clock{
  margin-top:36px; display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--font-mono); font-size:15px; color:var(--timing-2);
  border:1px solid rgba(245,179,1,0.35); border-radius:999px; padding:10px 20px;
}
.race-clock .time{ font-size:24px; font-weight:600; color:#fff; letter-spacing:0.03em; }

.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-family:var(--font-display-timing); font-size:clamp(28px,4vw,42px); text-transform:uppercase; }
body.timing .section-head h2{ color:var(--ink); }

.tri-columns{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .tri-columns{ grid-template-columns:1fr; } }
.phase-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px;
}
.phase-card .phase-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--timing-1); margin-bottom:14px;
}
.phase-card ul{ margin:0; padding-left:18px; color:var(--ink); font-size:15px; }
.phase-card li{ margin-bottom:8px; }

.table-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:16px 22px; font-size:15px; border-bottom:1px solid var(--line); }
th{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); background:var(--paper-dim); }
tr:last-child td{ border-bottom:none; }
.price-cell{ font-family:var(--font-mono); font-weight:600; }
.note{ font-size:13.5px; color:var(--muted); margin-top:14px; }

.why-band{ background:var(--ink); color:#fff; }
.why-band .section-head h2{ color:#fff; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:860px){ .why-grid{ grid-template-columns:1fr; } }
.why-item{ border-left:2px solid var(--timing-1); padding-left:18px; }
.why-item .big{ font-family:var(--font-mono); font-size:32px; color:var(--timing-2); }
.why-item p{ color:rgba(246,245,241,0.7); }

.cta-band{
  background:var(--timing-1); color:#fff; text-align:center;
}
.cta-band h2{ font-family:var(--font-display-timing); text-transform:uppercase; font-size:clamp(30px,5vw,48px); }
.cta-band .btn{ background:#fff; color:var(--timing-1); margin-top:10px; }

/* ============================================================
   COLOCATION PAGE — technical & professional
   ============================================================ */
body.colo{ --accent:var(--colo-1); --accent-2:var(--colo-2); }
.colo-hero{
  background:
    radial-gradient(circle at 80% 10%, var(--colo-glow), transparent 60%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    var(--ink);
  background-size:auto, 40px 40px, 40px 40px, auto;
  color:#fff; padding:110px 0 90px;
}
.colo-hero h1{
  font-family:var(--font-display-colo); font-weight:700;
  font-size:clamp(38px,5.6vw,60px); max-width:16ch;
}
.colo-hero .sub{ color:rgba(246,245,241,0.72); max-width:54ch; font-size:18px; }
.uptime-chip{
  display:inline-flex; align-items:center; gap:8px; margin-top:32px;
  font-family:var(--font-mono); font-size:13px; color:var(--colo-2);
  border:1px solid rgba(14,124,134,0.4); border-radius:999px; padding:9px 18px;
}
.uptime-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--colo-2); box-shadow:0 0 0 4px rgba(14,124,134,0.2); }

body.colo .section-head h2{ font-family:var(--font-display-colo); color:var(--ink); font-size:clamp(26px,3.6vw,38px); }

/* rack visualization */
.rack-wrap{ display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:center; }
@media (max-width:860px){ .rack-wrap{ grid-template-columns:1fr; } }
.rack{
  background:var(--ink-soft); border-radius:10px; padding:16px; border:1px solid var(--line);
}
.rack-unit{
  height:16px; margin-bottom:4px; border-radius:2px;
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; padding:0 8px;
}
.rack-unit.filled{ background:var(--colo-1); }
.rack-unit .u-label{ font-family:var(--font-mono); font-size:8px; color:rgba(255,255,255,0.5); }
.rack-unit.filled .u-label{ color:#fff; }

.tier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:960px){ .tier-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; display:flex; flex-direction:column;
}
.tier-card.featured{ border-color:var(--colo-1); box-shadow:0 0 0 1px var(--colo-1); }
.tier-card .u{ font-family:var(--font-mono); font-size:13px; color:var(--colo-2); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
.tier-card .price{ font-family:var(--font-mono); font-size:30px; font-weight:600; margin-bottom:4px; }
.tier-card .price span{ font-size:14px; font-weight:400; color:var(--muted); }
.tier-card ul{ list-style:none; margin:16px 0 0; padding:0; font-size:14px; color:var(--ink); flex-grow:1; }
.tier-card li{ padding:7px 0; border-top:1px solid var(--line); }
.tier-card li:first-child{ border-top:none; }
.tier-card .btn{ margin-top:18px; text-align:center; justify-content:center; }

.infra-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:860px){ .infra-grid{ grid-template-columns:repeat(2,1fr); } }
.infra-card{ text-align:left; }
.infra-card .icon{ width:36px; height:36px; margin-bottom:14px; color:var(--colo-1); }
.infra-card h4{ font-size:15.5px; margin:0 0 6px; }
.infra-card p{ font-size:14px; margin:0; }

.colo-cta{ background:var(--colo-1); color:#fff; text-align:center; }
.colo-cta h2{ font-family:var(--font-display-colo); font-size:clamp(28px,4.4vw,42px); }
.colo-cta .btn{ background:#fff; color:var(--colo-1); margin-top:10px; }

.band-alt{ background:var(--paper-dim); }