/* ═══════════════════════════════════════════════════════════════
   HOSTSTACK DESIGN SYSTEM — v2 "Precision"
   Loaded after tailwind.css. Owns: typography, design tokens,
   component classes (hs-*), motion, and the restyled legacy
   classes that older pages still reference.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink:        #0b1220;   /* primary text / dark surfaces */
  --ink-2:      #3f4b63;   /* secondary text */
  --ink-3:      #77839c;   /* tertiary text */
  --paper:      #ffffff;
  --paper-2:    #f7f8fa;   /* alternate section bg */
  --line:       #e6e9ef;   /* hairline borders on light */
  --line-2:     #d4d9e3;
  --carbon:     #0a101e;   /* dark section bg */
  --carbon-2:   #0e1628;   /* dark card bg */
  --carbon-line:rgba(148,163,190,.14);
  --blue:       #2563eb;
  --blue-deep:  #1d4ed8;
  --blue-soft:  #eaf0fe;
  --sky:        #60a5fa;
  --green:      #059669;
  --green-soft: #e7f6f0;
  --amber:      #d97706;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-disp:  'Space Grotesk', 'Inter', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --r-card: 10px;
  --r-btn:  8px;
  --shadow-1: 0 1px 2px rgba(11,18,32,.05);
  --shadow-2: 0 10px 32px -12px rgba(11,18,32,.14);
  --ease-out: cubic-bezier(.22,.61,.36,1);
}

/* ── Base typography ─────────────────────────────────────────── */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .font-display {
  font-family: var(--font-disp);
  letter-spacing: -0.015em;
}
.font-mono2 { font-family: var(--font-mono); }

::selection { background: var(--blue); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Signature: mono kicker with index ───────────────────────── */
.hs-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.hs-kicker::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.hs-kicker--light { color: var(--sky); }
.hs-kicker .idx { opacity: .5; }

/* ── Section header row: title left, meta right ──────────────── */
.hs-sechead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-bottom: 3rem;
}
.hs-sechead h2 { max-width: 34rem; }
.hs-sechead .aside { max-width: 24rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  padding: .95rem 1.5rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out),
              color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.hs-btn:active { transform: translateY(1px); }
.hs-btn svg { transition: transform .18s var(--ease-out); }
.hs-btn:hover svg.hs-arr { transform: translateX(3px); }

.hs-btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.18), var(--shadow-1);
}
.hs-btn--primary:hover { background: var(--blue-deep); }

.hs-btn--ink { background: var(--ink); color: #fff; box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.35); }
.hs-btn--ink:hover { background: #1b2740; }

.hs-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.hs-btn--ghost:hover { border-color: var(--ink); }

.hs-btn--ghost-inv { background: transparent; color: #fff; border-color: rgba(255,255,255,.24); }
.hs-btn--ghost-inv:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); }

.hs-btn--white { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.hs-btn--white:hover { background: var(--blue-soft); }

.hs-btn--sm { padding: .62rem 1rem; font-size: .82rem; }
.hs-btn--lg { padding: 1.1rem 1.9rem; font-size: 1rem; }

/* Arrow-link */
.hs-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue);
  transition: gap .18s var(--ease-out), color .15s;
}
.hs-link:hover { gap: .65rem; color: var(--blue-deep); }

/* ── Cards ───────────────────────────────────────────────────── */
.hs-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.hs-card--hover:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}
.hs-card--dark {
  background: var(--carbon-2);
  border: 1px solid var(--carbon-line);
  border-radius: var(--r-card);
  transition: border-color .2s var(--ease-out), transform .25s var(--ease-out);
}
.hs-card--dark:hover { border-color: rgba(96,165,250,.4); }

/* ── Chips / badges ──────────────────────────────────────────── */
.hs-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 500;
  padding: .38rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
}
.hs-chip--dark { background: rgba(255,255,255,.05); border-color: var(--carbon-line); color: #c3cbdc; }
.hs-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green); flex-shrink: 0; }

.hs-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .55rem;
  border-radius: 5px;
  background: var(--blue-soft);
  color: var(--blue-deep);
}
.hs-tag--green { background: var(--green-soft); color: var(--green); }
.hs-tag--dark  { background: rgba(96,165,250,.12); color: var(--sky); }

/* ── Backgrounds & patterns ──────────────────────────────────── */
/* Subtle dot grid on light */
.hs-dots {
  background-image: radial-gradient(circle, rgba(11,18,32,.075) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* Blueprint grid on dark */
.hs-blueprint {
  background-color: var(--carbon);
  background-image:
    linear-gradient(rgba(96,165,250,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* Fine horizontal ruled lines */
.hs-ruled {
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% 56px;
}

/* Section divider: hairline with center tick */
.hs-divider {
  position: relative;
  height: 1px;
  background: var(--line);
}
.hs-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--paper);
  border: 1px solid var(--line-2);
}

/* ── Spec sheet rows (dotted leaders) ────────────────────────── */
.hs-spec { font-size: .875rem; }
.hs-spec .row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
}
.hs-spec .row + .row { border-top: 1px dashed var(--line); }
.hs-spec .k { color: var(--ink-3); flex-shrink: 0; }
.hs-spec .lead { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.hs-spec .v { font-weight: 600; color: var(--ink); font-family: var(--font-mono); font-size: .82rem; }
.hs-spec--dark .row + .row { border-top-color: rgba(148,163,190,.12); }
.hs-spec--dark .k { color: #8b96ad; }
.hs-spec--dark .lead { border-bottom-color: rgba(148,163,190,.22); }
.hs-spec--dark .v { color: #fff; }

/* ── Tables ──────────────────────────────────────────────────── */
.hs-table { width: 100%; font-size: .875rem; border-collapse: collapse; }
.hs-table th {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line-2);
}
.hs-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.hs-table tbody tr { transition: background .15s; }
.hs-table tbody tr:hover { background: var(--paper-2); }
.hs-table .num { font-family: var(--font-mono); font-size: .82rem; color: var(--ink); }
.hs-table--dark th { color: #8b96ad; border-bottom-color: rgba(148,163,190,.25); }
.hs-table--dark td { color: #c3cbdc; border-bottom-color: rgba(148,163,190,.1); }
.hs-table--dark tbody tr:hover { background: rgba(255,255,255,.03); }
.hs-table--dark .num { color: #fff; }

/* ── Forms ───────────────────────────────────────────────────── */
.hs-input {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  transition: border-color .15s, box-shadow .15s;
}
.hs-input::placeholder { color: var(--ink-3); }
.hs-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.hs-label {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .45rem;
}

/* ── Accordion ───────────────────────────────────────────────── */
.hs-acc { border-top: 1px solid var(--line); }
.hs-acc-item { border-bottom: 1px solid var(--line); }
.hs-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem .25rem;
  text-align: left;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  transition: color .15s;
}
.hs-acc-btn:hover { color: var(--blue); }
.hs-acc-btn .ic {
  flex-shrink: 0;
  width: 1.4rem; height: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-3);
  transition: transform .25s var(--ease-out), background .2s, color .2s, border-color .2s;
}
.hs-acc-item.open .ic { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.hs-acc-body {
  display: none;
  padding: 0 2.5rem 1.25rem .25rem;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.65;
}
.hs-acc-item.open .hs-acc-body { display: block; }

/* ── Reveal motion (new system) ──────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.aos-in, .rv.rv-in { opacity: 1; transform: none; }

/* ── Status pulse dot ────────────────────────────────────────── */
.hs-pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #34d399; flex-shrink: 0; }
.hs-pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 1px solid #34d399;
  opacity: .6;
  animation: hsPing 2.2s var(--ease-out) infinite;
}
@keyframes hsPing { 0% { transform: scale(.5); opacity: .7; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

/* ── Latency meter bars ──────────────────────────────────────── */
.hs-meter { height: 4px; border-radius: 999px; background: rgba(148,163,190,.15); overflow: hidden; }
.hs-meter > i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #60a5fa);
  width: 0;
  transition: width 1.1s var(--ease-out) .2s;
}
.aos-in .hs-meter > i, .hs-meter.go > i { width: var(--w, 60%); }

/* ═══════════════════════════════════════════════════════════════
   LEGACY CLASSES — restyled to the new system so older pages
   inherit the redesign without markup changes.
   ═══════════════════════════════════════════════════════════════ */

/* AOS (kept: markup across the site uses data-aos) */
[data-aos] { opacity: 0; transition-property: opacity, transform, filter; transition-timing-function: var(--ease-out); transition-duration: 600ms; will-change: opacity, transform; }
[data-aos].aos-in { opacity: 1 !important; transform: none !important; filter: none !important; }
[data-aos="fade-up"]    { transform: translateY(26px); }
[data-aos="fade-down"]  { transform: translateY(-26px); }
[data-aos="fade-left"]  { transform: translateX(-34px); }
[data-aos="fade-right"] { transform: translateX(34px); }
[data-aos="zoom-in"]    { transform: scale(.94); }
[data-aos="zoom-up"]    { transform: scale(.95) translateY(18px); }
[data-aos="blur-up"]    { transform: translateY(16px); filter: blur(5px); }
[data-aos-delay="80"]{transition-delay:80ms}[data-aos-delay="100"]{transition-delay:100ms}
[data-aos-delay="120"]{transition-delay:120ms}[data-aos-delay="150"]{transition-delay:150ms}
[data-aos-delay="200"]{transition-delay:200ms}[data-aos-delay="240"]{transition-delay:240ms}
[data-aos-delay="250"]{transition-delay:250ms}[data-aos-delay="300"]{transition-delay:300ms}
[data-aos-delay="360"]{transition-delay:360ms}[data-aos-delay="400"]{transition-delay:400ms}
[data-aos-delay="480"]{transition-delay:480ms}[data-aos-delay="500"]{transition-delay:500ms}
[data-aos-delay="600"]{transition-delay:600ms}[data-aos-delay="700"]{transition-delay:700ms}
[data-aos-duration="400"]{transition-duration:400ms}[data-aos-duration="800"]{transition-duration:800ms}
[data-aos-duration="1000"]{transition-duration:1000ms}

/* Stagger children */
.stagger>* { opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.stagger.stagger-in>* { opacity: 1; transform: none; }
.stagger.stagger-in>*:nth-child(1){transition-delay:0ms}
.stagger.stagger-in>*:nth-child(2){transition-delay:70ms}
.stagger.stagger-in>*:nth-child(3){transition-delay:140ms}
.stagger.stagger-in>*:nth-child(4){transition-delay:210ms}
.stagger.stagger-in>*:nth-child(5){transition-delay:280ms}
.stagger.stagger-in>*:nth-child(6){transition-delay:350ms}
.stagger.stagger-in>*:nth-child(n+7){transition-delay:420ms}

/* Gradient text — restrained brand treatment */
.gradient-text {
  background: linear-gradient(115deg, #60a5fa 0%, #93c5fd 55%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark hero surface — flat carbon + blueprint grid, no mesh blobs */
.hero-mesh {
  background-color: var(--carbon);
  background-image:
    radial-gradient(ellipse 90% 60% at 70% -10%, rgba(37,99,235,.18) 0%, transparent 60%),
    linear-gradient(rgba(96,165,250,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

/* Particles: retired visually (kept as no-op so JS is harmless) */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particle { display: none; }

/* Keyframes still referenced */
@keyframes floatBob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulseSlow     { 0%,100%{opacity:.5} 50%{opacity:.85} }
@keyframes slideInLeft   { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInUp     { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes cursorBlink   { 0%,100%{opacity:1} 50%{opacity:0} }

.animate-float      { animation: floatBob 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulseSlow 4s ease-in-out infinite; }
.slide-in-left      { animation: slideInLeft .35s var(--ease-out); }
.slide-in-up        { animation: slideInUp .3s var(--ease-out); }

/* Button shimmer: retired — replaced with calm transitions */
.btn-shimmer { position: relative; }
.btn-shimmer::after { content: none; }

/* Cards (legacy) */
.card-lift { transition: transform .22s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s; }
.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.card-glow { transition: border-color .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.card-glow:hover { border-color: rgba(37,99,235,.35) !important; box-shadow: 0 8px 28px -10px rgba(37,99,235,.16); }
.icon-inner { transition: transform .25s var(--ease-out), background-color .2s; }
.card-lift:hover .icon-inner { transform: scale(1.06); }

/* Popular pricing card highlight — single crisp ring */
.popular-card { box-shadow: 0 0 0 2px var(--blue), 0 18px 44px -16px rgba(29,78,216,.35); }

/* Marquee */
.marquee-track { display: flex; width: max-content; animation: marqueeScroll 34s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Typewriter cursor */
.tw-cursor { display: inline-block; width: 3px; height: .85em; background: var(--sky); margin-left: 4px; vertical-align: middle; border-radius: 1px; animation: cursorBlink .8s step-end infinite; }

/* Decorative line — thinner, single-tone */
.deco-line { height: 2px; background: var(--blue); border-radius: 2px; width: 40px; }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-aos], .stagger>*, .rv { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .animate-float, .animate-pulse-slow, .marquee-track, .hs-pulse::after, .tw-cursor { animation: none !important; }
  * { scroll-behavior: auto !important; }
}