/* ══════════════════════════════════════════════════════════════
   CYBOGENIX — Solway + Outfit + JetBrains Mono
   Consolidated stylesheet (Fathom layout + Cybogenix brand)
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;

  /* Fluid root font-size — every rem-based value scales with viewport */
  font-size: clamp(16px, 0.625vw + 8px, 24px);
}

body {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, sans-serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  transition: background-color .3s ease, color .3s ease;
}

/* ══════════════════════════════════════════════════════════════
   THEME VARIABLES
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:          #0A1618;
  --bg-2:        #0F2426;
  --ink:         #F4FAF9;
  --dim:         rgba(244,250,249,0.55);
  --dim-2:       rgba(244,250,249,0.35);

  --line:        rgba(95,224,208,0.14);
  --line-2:      rgba(95,224,208,0.08);

  --accent:      #17B8A6;
  --accent-soft: #5FE0D0;
  --accent-deep: #0B5E58;
  --ok:          #5FE0D0;

  --glass-bg:            rgba(255,255,255,0.045);
  --glass-bg-hover:      rgba(95,224,208,0.08);
  --glass-border:        rgba(95,224,208,0.12);
  --glass-border-hover:  rgba(95,224,208,0.35);
  --glass-shadow:        0 10px 40px -18px rgba(0,0,0,0.7);

  --blob-1: #17B8A6; --blob-1-op: .22;
  --blob-2: #0B5E58; --blob-2-op: .35;
  --blob-3: #5FE0D0; --blob-3-op: .16;
}

html:not(.dark) {
  --bg:          #F1F7F5;
  --bg-2:        #FFFFFF;
  --ink:         #08191B;
  --dim:         rgba(8,25,27,0.72);
  --dim-2:       rgba(8,25,27,0.58);

  --line:        rgba(11,94,88,0.22);
  --line-2:      rgba(11,94,88,0.12);

  --accent:      #084C43;
  --accent-soft: #0B6E63;
  --accent-deep: #063D36;
  --ok:          #0B6E63;

  --glass-bg:            rgba(255,255,255,0.85);
  --glass-bg-hover:      rgba(255,255,255,1);
  --glass-border:        rgba(11,94,88,0.10);
  --glass-border-hover:  rgba(11,94,88,0.28);
  --glass-shadow:        0 10px 40px -18px rgba(11,94,88,0.18);

  --blob-1: #17B8A6; --blob-1-op: .18;
  --blob-2: #0B5E58; --blob-2-op: .10;
  --blob-3: #5FE0D0; --blob-3-op: .14;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ══════════════════════════════════════════════════════════════ */
.font-display { font-family: 'Solway', ui-serif, Georgia, serif; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ══════════════════════════════════════════════════════════════
   AMBIENT BLOBS
   ══════════════════════════════════════════════════════════════ */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  transition: opacity .35s ease, background-color .35s ease;
}
.blob-1 { width: 620px; height: 620px; background: var(--blob-1); opacity: var(--blob-1-op); top: -140px; left: -180px; }
.blob-2 { width: 520px; height: 520px; background: var(--blob-2); opacity: var(--blob-2-op); top: 280px; right: -160px; }
.blob-3 { width: 520px; height: 520px; background: var(--blob-3); opacity: var(--blob-3-op); bottom: -160px; left: 32%; }

/* ══════════════════════════════════════════════════════════════
   GLASS SURFACES
   ══════════════════════════════════════════════════════════════ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.glass-hover:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}
.panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.panel:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-hover); }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--dim);
}

/* ══════════════════════════════════════════════════════════════
   FLOATING TOP BAR (Cybogenix pill)
   ══════════════════════════════════════════════════════════════ */
.topbar {
  position: fixed;
  top: 0.75rem;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
}

.topbar-inner {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  max-width: 100%;
}

.topbar-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, 0.55);
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html:not(.dark) .topbar-capsule {
  box-shadow: 0 10px 40px -20px rgba(11, 94, 88, 0.28);
}

/* Main content offset under the floating pill */
.main-offset { padding-top: 3.75rem; position: relative; z-index: 10; }

/* ---------- Brand ---------- */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.5rem;
  transition: background-color .2s ease;
}
.nav-brand:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.brand-mark {
  display: grid;
  place-items: center;
  color: var(--accent-soft);
  flex-shrink: 0;
  border-radius: 0.5rem;
  transition: color .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}
.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
.nav-brand:hover .brand-mark { transform: scale(1.06); }

.brand-text {
  font-family: 'Solway', serif;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--accent-soft);
  transition: color .2s ease;
}

/* ---------- Dividers ---------- */
.nav-divider {
  display: inline-block;
  width: 1px;
  height: 1rem;
  background: var(--line);
  margin: 0 0.25rem;
  align-self: center;
  flex-shrink: 0;
}
.nav-divider-desktop { display: none; }
@media (min-width: 768px) { .nav-divider-desktop { display: inline-block; } }

/* ---------- Desktop nav ---------- */
.nav-links {
  display: none;
  align-items: center;
  gap: 0.0625rem;
}
@media (min-width: 768px) {
  .nav-links { display: inline-flex; }
}

.topbar .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  color: var(--dim);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.topbar .nav-link::before {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.topbar .nav-link:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}
/* Active state driven by vue-router's .router-link-exact-active */
.topbar .nav-link.router-link-exact-active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-soft);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.topbar .nav-link.router-link-exact-active::before {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Icon buttons ---------- */
.nav-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--dim);
  display: grid; place-items: center;
  font-size: 0.75rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .2s ease, color .2s ease;
}
.nav-icon:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
}
.nav-icon:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}
.nav-hamburger { display: grid; }
@media (min-width: 768px) { .nav-hamburger { display: none; } }

/* ---------- Mobile menu (drops below the pill) ---------- */
.mobile-nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 20rem);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6);
}
html:not(.dark) .mobile-nav {
  box-shadow: 0 24px 48px -24px rgba(11, 94, 88, 0.35);
}
.nav-link-mobile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--dim);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.nav-link-mobile::before {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.nav-link-mobile:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}
.nav-link-mobile.router-link-exact-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-soft);
  font-weight: 500;
}
.nav-link-mobile.router-link-exact-active::before {
  opacity: 1;
  transform: scale(1);
}

/* ══════════════════════════════════════════════════════════════
   GENERIC NAV LINK (used in footer + inline links)
   ══════════════════════════════════════════════════════════════ */
.nav-link {
  color: var(--dim);
  transition: color .2s ease;
  text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   LIVE STATUS DOT
   ══════════════════════════════════════════════════════════════ */
.live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent);
  animation: livePulse 2s ease-in-out infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes livePulse { 50% { opacity: .55; } }

/* ══════════════════════════════════════════════════════════════
   GENERIC ROUND ICON BUTTON (footer social, header extras)
   ══════════════════════════════════════════════════════════════ */
.icon-btn {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--dim);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 14px;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .3s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent-soft); }
.icon-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — big brand mark bottom-left, copyright bottom-right
   ══════════════════════════════════════════════════════════════ */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 1.125rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.75rem;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              background-color .2s ease;
}
.footer-brand:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.footer-brand-text {
  font-family: 'Solway', serif;
  font-weight: 700;
  font-size: 2.125rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--accent-soft);
  transition: color .2s ease;
}
@media (max-width: 640px) {
  .footer-brand { gap: 0.875rem; }
  .footer-brand-text { font-size: 1.625rem; }
  .footer-brand .brand-mark { width: 2.625rem !important; height: 2.625rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 500;
  padding: 0.875rem 1.625rem;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background-color .2s ease, transform .2s ease, color .2s ease;
  font-size: 0.875rem;
  cursor: pointer;
  border: 0;
  text-decoration: none;
}
.btn-primary:hover { background: var(--accent-soft); transform: translateY(-1px); }
html:not(.dark) .btn-primary { color: #F4FAF9; }
html:not(.dark) .btn-primary:hover { color: var(--bg); }

.btn-ghost {
  padding: 0.875rem 1.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: border-color .2s ease, background-color .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--glass-border-hover); background: var(--glass-bg-hover); }

/* ══════════════════════════════════════════════════════════════
   LOAD-IN ANIMATION
   ══════════════════════════════════════════════════════════════ */
.load { opacity: 0; transform: translateY(8px); animation: loadIn .6s cubic-bezier(.16,1,.3,1) forwards; }
.load.d1 { animation-delay: .05s } .load.d2 { animation-delay: .12s }
.load.d3 { animation-delay: .19s } .load.d4 { animation-delay: .26s }
.load.d5 { animation-delay: .33s } .load.d6 { animation-delay: .40s }
@keyframes loadIn { to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════════════════════════════ */
.page-enter-active, .page-leave-active {
  transition: opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1);
}
.page-enter-from { opacity: 0; transform: translateY(8px); }
.page-leave-to   { opacity: 0; transform: translateY(-8px); }

/* ══════════════════════════════════════════════════════════════
   SERVICE REGISTRY ROW
   ══════════════════════════════════════════════════════════════ */
.row { transition: background-color .18s ease; }
.row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.row:hover .arr { opacity: 1; transform: translateX(0); }
.arr { opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; color: var(--accent-soft); display: inline-block; }

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEALS
   ══════════════════════════════════════════════════════════════ */
.reveal-init {
  opacity: 0; transform: translateY(24px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-in { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   SPLIT TEXT
   ══════════════════════════════════════════════════════════════ */
.split-word { display: inline-block; vertical-align: top; }
.split-word-inner {
  display: inline-block; opacity: 0; transform: translateY(28px);
  animation: word-rise .85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes word-rise { to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════════════════════════════════════
   MAGNETIC BUTTONS
   ══════════════════════════════════════════════════════════════ */
.magnetic {
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .2s ease,
              border-color .2s ease, color .2s ease;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS
   ══════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   FORM INPUTS
   ══════════════════════════════════════════════════════════════ */
.form-label {
  display: block;
  font-size: 0.75rem;
  color: var(--dim);
  margin-bottom: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.form-input {
  width: 100%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.form-input:focus { border-color: var(--accent-soft); background: var(--glass-bg-hover); }

/* ══════════════════════════════════════════════════════════════
   VUE CLOAK
   ══════════════════════════════════════════════════════════════ */
[v-cloak] { display: none; }

/* ══════════════════════════════════════════════════════════════
   TECH LOGOS — auto-width tiles, fixed height
   ══════════════════════════════════════════════════════════════ */
.tech-logo-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  min-width: 2.75rem;
  width: auto;
  padding: 0 0.625rem;
  border-radius: 0.6875rem;
  background: #FFFFFF;
  border: 1px solid rgba(11, 94, 88, 0.10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease,
              background-color .3s ease;
}
.dark .tech-logo-box {
  background: #D6E2E2;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.tech-logo-box:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 8px 20px -10px rgba(11, 94, 88, 0.35);
}
.dark .tech-logo-box:hover {
  border-color: rgba(95, 224, 208, 0.7);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}
.tech-logo {
  display: block;
  height: 1.5rem;
  width: auto;
  font-size: 1.5rem;
  line-height: 1;
}
.tech-logo svg {
  height: 100%;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .tech-logo-box {
    height: 3rem;
    min-width: 3rem;
    padding: 0 0.75rem;
    border-radius: 0.75rem;
  }
  .tech-logo {
    height: 1.625rem;
    font-size: 1.625rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO TYPING SLIDER (dots, caret, stat fade)
   ══════════════════════════════════════════════════════════════ */
.typing-caret::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent-soft);
  margin-left: 3px;
  vertical-align: -0.12em;
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  cursor: pointer;
  transition: background-color .25s ease, width .25s ease, border-radius .25s ease;
}
.hero-dot:hover { background: color-mix(in srgb, var(--ink) 50%, transparent); }
.hero-dot.is-active {
  background: var(--accent-soft);
  width: 24px;
  border-radius: 4px;
}
.hero-dot:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

.stat-card {
  animation: statFade .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes statFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   CASE-STUDY HERO ILLUSTRATION
   ══════════════════════════════════════════════════════════════ */
.cs-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 16.25rem;
  padding: 0.5rem;
}
.cs-illustration > svg {
  position: relative;
  width: 100%;
  max-width: 28.75rem;
  height: auto;
  display: block;
}
.cs-illustration > div { position: absolute; }
@media (max-width: 1023px) {
  .cs-illustration { min-height: 13.75rem; margin-top: 0.5rem; }
  .cs-illustration > svg { max-width: 23.75rem; }
}
@media (max-width: 480px) {
  .cs-illustration { min-height: 11.25rem; }
  .cs-illustration > svg { max-width: 18.75rem; }
}

/* SVG animate helpers used inside case-study illustrations */
.draw-path {
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: drawPath 2.4s ease-out .3s forwards;
}
@keyframes drawPath { to { stroke-dashoffset: 0; } }

.chart-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: growBar .8s ease-out both;
}
@keyframes growBar { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }

.spin-slow {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinSlow 9s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   CURSOR FOLLOWER — 32 styles
   ══════════════════════════════════════════════════════════════ */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  will-change: transform;
  transition: opacity .25s ease;
}
.cursor-inner {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border-radius .25s ease;
}
.cursor-shape {
  position: absolute; inset: 0;
  transition: background-color .25s ease, border-color .25s ease,
              border-radius .25s ease, transform .35s cubic-bezier(.16,1,.3,1),
              opacity .25s ease;
  transform-origin: center;
}
.cursor-lag { display: none; }

html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }

/* 01 · halo */
html[data-cursor="halo"] .cursor-main .cursor-inner { width: 6px; height: 6px; }
html[data-cursor="halo"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="halo"] .cursor-main.is-hovering .cursor-inner { width: 10px; height: 10px; }
html[data-cursor="halo"] .cursor-main.is-hovering .cursor-shape { background: #5FE0D0; }
html[data-cursor="halo"] .cursor-lag { display: block; }
html[data-cursor="halo"] .cursor-lag .cursor-inner { width: 32px; height: 32px; }
html[data-cursor="halo"] .cursor-lag .cursor-shape { border: 1.5px solid rgba(23,184,166,.55); border-radius: 50%; background: transparent; }
html[data-cursor="halo"] .cursor-lag.is-hovering .cursor-inner { width: 52px; height: 52px; }
html[data-cursor="halo"] .cursor-lag.is-hovering .cursor-shape { border-color: rgba(23,184,166,.95); }

/* 02 · crosshair */
html[data-cursor="crosshair"] .cursor-main .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="crosshair"] .cursor-main .cursor-shape::before,
html[data-cursor="crosshair"] .cursor-main .cursor-shape::after { content: ''; position: absolute; background: rgba(23,184,166,.9); transition: background-color .2s ease; }
html[data-cursor="crosshair"] .cursor-main .cursor-shape::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
html[data-cursor="crosshair"] .cursor-main .cursor-shape::after { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
html[data-cursor="crosshair"] .cursor-main.is-hovering .cursor-inner { width: 34px; height: 34px; }
html[data-cursor="crosshair"] .cursor-main.is-hovering .cursor-shape::before,
html[data-cursor="crosshair"] .cursor-main.is-hovering .cursor-shape::after { background: #5FE0D0; }

/* 03 · bar */
html[data-cursor="bar"] .cursor-main .cursor-inner { width: 2px; height: 22px; }
html[data-cursor="bar"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 2px; }
html[data-cursor="bar"] .cursor-main.is-hovering .cursor-inner { width: 28px; height: 22px; }
html[data-cursor="bar"] .cursor-main.is-hovering .cursor-shape { background: #5FE0D0; }

/* 04 · invert */
html[data-cursor="invert"] .cursor-main .cursor-inner { width: 28px; height: 28px; }
html[data-cursor="invert"] .cursor-main .cursor-shape { background: #ffffff; border-radius: 50%; mix-blend-mode: difference; }
html[data-cursor="invert"] .cursor-main.is-hovering .cursor-inner { width: 56px; height: 56px; }

/* 05 · glow */
html[data-cursor="glow"] .cursor-main .cursor-inner { width: 220px; height: 220px; }
html[data-cursor="glow"] .cursor-main .cursor-shape { background: radial-gradient(circle, rgba(23,184,166,.22) 0%, rgba(23,184,166,.10) 35%, transparent 65%); border-radius: 50%; transition: background .35s ease; }
html[data-cursor="glow"] .cursor-main.is-hovering .cursor-inner { width: 280px; height: 280px; }
html[data-cursor="glow"] .cursor-main.is-hovering .cursor-shape { background: radial-gradient(circle, rgba(95,224,208,.30) 0%, rgba(23,184,166,.14) 35%, transparent 65%); }

/* 06 · brackets */
html[data-cursor="brackets"] .cursor-main .cursor-inner { width: 34px; height: 34px; }
html[data-cursor="brackets"] .cursor-main .cursor-shape {
  background:
    linear-gradient(#17B8A6,#17B8A6) 0 0 / 11px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 0 / 1.5px 11px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 0 / 11px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 0 / 1.5px 11px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 100% / 11px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 100% / 1.5px 11px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 100% / 11px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 100% / 1.5px 11px no-repeat;
}
html[data-cursor="brackets"] .cursor-main.is-hovering .cursor-inner { width: 52px; height: 52px; }

/* 07 · square */
html[data-cursor="square"] .cursor-main .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="square"] .cursor-main .cursor-shape { border: 1.5px solid rgba(23,184,166,.85); border-radius: 3px; }
html[data-cursor="square"] .cursor-main.is-hovering .cursor-inner { width: 32px; height: 32px; }
html[data-cursor="square"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; transform: rotate(45deg); }

/* 08 · dot-only */
html[data-cursor="dot-only"] .cursor-main .cursor-inner { width: 8px; height: 8px; }
html[data-cursor="dot-only"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="dot-only"] .cursor-main.is-hovering .cursor-inner { width: 14px; height: 14px; }
html[data-cursor="dot-only"] .cursor-main.is-hovering .cursor-shape { background: #5FE0D0; }

/* 09 · ring */
html[data-cursor="ring"] .cursor-main .cursor-inner { width: 24px; height: 24px; }
html[data-cursor="ring"] .cursor-main .cursor-shape { border: 1.5px solid rgba(23,184,166,.9); border-radius: 50%; }
html[data-cursor="ring"] .cursor-main.is-hovering .cursor-inner { width: 40px; height: 40px; }
html[data-cursor="ring"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; }

/* 10 · dot-ring */
html[data-cursor="dot-ring"] .cursor-main .cursor-inner { width: 30px; height: 30px; }
html[data-cursor="dot-ring"] .cursor-main .cursor-shape { border: 1.5px dashed rgba(23,184,166,.75); border-radius: 50%; animation: cursor-rotate 6s linear infinite; }
html[data-cursor="dot-ring"] .cursor-main .cursor-shape::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background: #17B8A6; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-cursor="dot-ring"] .cursor-main.is-hovering .cursor-inner { width: 44px; height: 44px; }
html[data-cursor="dot-ring"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; animation-duration: 3s; }
@keyframes cursor-rotate { to { transform: rotate(360deg); } }

/* 11 · double-ring */
html[data-cursor="double-ring"] .cursor-main .cursor-inner { width: 14px; height: 14px; }
html[data-cursor="double-ring"] .cursor-main .cursor-shape { border: 1.5px solid rgba(23,184,166,.9); border-radius: 50%; }
html[data-cursor="double-ring"] .cursor-main.is-hovering .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="double-ring"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; }
html[data-cursor="double-ring"] .cursor-lag { display: block; }
html[data-cursor="double-ring"] .cursor-lag .cursor-inner { width: 44px; height: 44px; }
html[data-cursor="double-ring"] .cursor-lag .cursor-shape { border: 1px solid rgba(23,184,166,.4); border-radius: 50%; }
html[data-cursor="double-ring"] .cursor-lag.is-hovering .cursor-inner { width: 60px; height: 60px; }
html[data-cursor="double-ring"] .cursor-lag.is-hovering .cursor-shape { border-color: rgba(23,184,166,.75); }

/* 12 · diamond */
html[data-cursor="diamond"] .cursor-main .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="diamond"] .cursor-main .cursor-shape { border: 1.5px solid rgba(23,184,166,.85); transform: rotate(45deg); }
html[data-cursor="diamond"] .cursor-main.is-hovering .cursor-inner { width: 32px; height: 32px; }
html[data-cursor="diamond"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; transform: rotate(135deg); }

/* 13 · hexagon */
html[data-cursor="hexagon"] .cursor-main .cursor-inner { width: 28px; height: 28px; }
html[data-cursor="hexagon"] .cursor-main .cursor-shape { background: #17B8A6; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
html[data-cursor="hexagon"] .cursor-main .cursor-shape::before { content: ''; position: absolute; inset: 3px; background: #F4FAF9; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
html[data-cursor="hexagon"] .cursor-main.is-hovering .cursor-inner { width: 40px; height: 40px; }
html[data-cursor="hexagon"] .cursor-main.is-hovering .cursor-shape { background: #5FE0D0; }

/* 14 · pill */
html[data-cursor="pill"] .cursor-main .cursor-inner { width: 8px; height: 22px; }
html[data-cursor="pill"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 999px; }
html[data-cursor="pill"] .cursor-main.is-hovering .cursor-inner { width: 42px; height: 22px; }
html[data-cursor="pill"] .cursor-main.is-hovering .cursor-shape { background: #5FE0D0; }

/* 15 · chevron */
html[data-cursor="chevron"] .cursor-main .cursor-inner { width: 26px; height: 18px; }
html[data-cursor="chevron"] .cursor-main .cursor-shape::before,
html[data-cursor="chevron"] .cursor-main .cursor-shape::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid #17B8A6; border-right: 1.5px solid #17B8A6; transform: translateY(-50%) rotate(45deg); }
html[data-cursor="chevron"] .cursor-main .cursor-shape::before { left: 0; }
html[data-cursor="chevron"] .cursor-main .cursor-shape::after { left: 10px; }
html[data-cursor="chevron"] .cursor-main.is-hovering .cursor-shape::before,
html[data-cursor="chevron"] .cursor-main.is-hovering .cursor-shape::after { border-color: #5FE0D0; }

/* 16 · target */
html[data-cursor="target"] .cursor-main .cursor-inner { width: 26px; height: 26px; }
html[data-cursor="target"] .cursor-main .cursor-shape { border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(23,184,166,.9), inset 0 0 0 5px transparent, inset 0 0 0 6.5px rgba(23,184,166,.55); }
html[data-cursor="target"] .cursor-main.is-hovering .cursor-inner { width: 40px; height: 40px; }

/* 17 · plus */
html[data-cursor="plus"] .cursor-main .cursor-inner { width: 20px; height: 20px; }
html[data-cursor="plus"] .cursor-main .cursor-shape::before,
html[data-cursor="plus"] .cursor-main .cursor-shape::after { content: ''; position: absolute; background: #17B8A6; }
html[data-cursor="plus"] .cursor-main .cursor-shape::before { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
html[data-cursor="plus"] .cursor-main .cursor-shape::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%); }
html[data-cursor="plus"] .cursor-main.is-hovering .cursor-inner { width: 30px; height: 30px; }
html[data-cursor="plus"] .cursor-main.is-hovering .cursor-shape::before,
html[data-cursor="plus"] .cursor-main.is-hovering .cursor-shape::after { background: #5FE0D0; }

/* 18 · x-mark */
html[data-cursor="x-mark"] .cursor-main .cursor-inner { width: 18px; height: 18px; }
html[data-cursor="x-mark"] .cursor-main .cursor-shape::before,
html[data-cursor="x-mark"] .cursor-main .cursor-shape::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1.5px; background: #17B8A6; }
html[data-cursor="x-mark"] .cursor-main .cursor-shape::before { transform: translate(-50%, -50%) rotate(45deg); }
html[data-cursor="x-mark"] .cursor-main .cursor-shape::after  { transform: translate(-50%, -50%) rotate(-45deg); }
html[data-cursor="x-mark"] .cursor-main.is-hovering .cursor-inner { width: 28px; height: 28px; }

/* 19 · sparkle */
html[data-cursor="sparkle"] .cursor-main .cursor-inner { width: 24px; height: 24px; }
html[data-cursor="sparkle"] .cursor-main .cursor-shape { background: #17B8A6; clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); animation: cursor-sparkle-rot 8s linear infinite; }
html[data-cursor="sparkle"] .cursor-main.is-hovering .cursor-inner { width: 36px; height: 36px; }
@keyframes cursor-sparkle-rot { to { transform: rotate(360deg); } }

/* 20 · asterisk */
html[data-cursor="asterisk"] .cursor-main .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="asterisk"] .cursor-main .cursor-shape::before,
html[data-cursor="asterisk"] .cursor-main .cursor-shape::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 1.5px; background: #17B8A6; }
html[data-cursor="asterisk"] .cursor-main .cursor-shape::before { transform: translate(-50%, -50%) rotate(60deg); }
html[data-cursor="asterisk"] .cursor-main .cursor-shape::after { transform: translate(-50%, -50%) rotate(-60deg); }
html[data-cursor="asterisk"] .cursor-main.is-hovering .cursor-inner { width: 32px; height: 32px; }

/* 21 · trail */
html[data-cursor="trail"] .cursor-main .cursor-inner { width: 8px; height: 8px; }
html[data-cursor="trail"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="trail"] .cursor-main.is-hovering .cursor-inner { width: 14px; height: 14px; }
html[data-cursor="trail"] .cursor-lag { display: block; }
html[data-cursor="trail"] .cursor-lag .cursor-inner { width: 22px; height: 22px; }
html[data-cursor="trail"] .cursor-lag .cursor-shape { background: rgba(23,184,166,.35); border-radius: 50%; filter: blur(4px); }
html[data-cursor="trail"] .cursor-lag.is-hovering .cursor-inner { width: 40px; height: 40px; }

/* 22 · pulse */
html[data-cursor="pulse"] .cursor-main .cursor-inner { width: 8px; height: 8px; }
html[data-cursor="pulse"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="pulse"] .cursor-main .cursor-shape::before { content: ''; position: absolute; inset: -3px; border: 1.5px solid rgba(23,184,166,.7); border-radius: 50%; animation: cursor-pulse 1.6s ease-out infinite; }
@keyframes cursor-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
html[data-cursor="pulse"] .cursor-main.is-hovering .cursor-inner { width: 14px; height: 14px; }

/* 23 · orbit */
html[data-cursor="orbit"] .cursor-main .cursor-inner { width: 26px; height: 26px; }
html[data-cursor="orbit"] .cursor-main .cursor-shape::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: #17B8A6; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-cursor="orbit"] .cursor-main .cursor-shape::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin-left: -2px; margin-top: -2px; background: #5FE0D0; border-radius: 50%; animation: cursor-orbit 1.8s linear infinite; }
@keyframes cursor-orbit { from { transform: rotate(0deg) translateX(11px) rotate(0deg); } to { transform: rotate(360deg) translateX(11px) rotate(-360deg); } }
html[data-cursor="orbit"] .cursor-main.is-hovering .cursor-inner { width: 40px; height: 40px; }

/* 24 · capsule */
html[data-cursor="capsule"] .cursor-main .cursor-inner { width: 34px; height: 14px; }
html[data-cursor="capsule"] .cursor-main .cursor-shape { border: 1.5px solid rgba(23,184,166,.85); border-radius: 999px; }
html[data-cursor="capsule"] .cursor-main.is-hovering .cursor-inner { width: 48px; height: 22px; }
html[data-cursor="capsule"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; }

/* 25 · corner-dot */
html[data-cursor="corner-dot"] .cursor-main .cursor-inner { width: 26px; height: 26px; }
html[data-cursor="corner-dot"] .cursor-main .cursor-shape::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: #17B8A6; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-cursor="corner-dot"] .cursor-main .cursor-shape::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(#17B8A6,#17B8A6) 0 0 / 4px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 0 / 1.5px 4px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 0 / 4px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 0 / 1.5px 4px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 100% / 4px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 0 100% / 1.5px 4px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 100% / 4px 1.5px no-repeat,
    linear-gradient(#17B8A6,#17B8A6) 100% 100% / 1.5px 4px no-repeat;
}
html[data-cursor="corner-dot"] .cursor-main.is-hovering .cursor-inner { width: 38px; height: 38px; }

/* 26 · notch */
html[data-cursor="notch"] .cursor-main .cursor-inner { width: 26px; height: 26px; }
html[data-cursor="notch"] .cursor-main .cursor-shape { border-radius: 50%; background: conic-gradient(from 0deg, #17B8A6 0deg 270deg, transparent 270deg 360deg); -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); animation: cursor-rotate 1.4s linear infinite; }
html[data-cursor="notch"] .cursor-main.is-hovering .cursor-inner { width: 38px; height: 38px; }

/* 27 · dashed-ring */
html[data-cursor="dashed-ring"] .cursor-main .cursor-inner { width: 30px; height: 30px; }
html[data-cursor="dashed-ring"] .cursor-main .cursor-shape { border: 1.5px dashed rgba(23,184,166,.85); border-radius: 50%; animation: cursor-rotate 8s linear infinite; }
html[data-cursor="dashed-ring"] .cursor-main.is-hovering .cursor-inner { width: 46px; height: 46px; }
html[data-cursor="dashed-ring"] .cursor-main.is-hovering .cursor-shape { border-color: #5FE0D0; animation-duration: 4s; }

/* 28 · crescent */
html[data-cursor="crescent"] .cursor-main .cursor-inner { width: 20px; height: 20px; }
html[data-cursor="crescent"] .cursor-main .cursor-shape { border-radius: 50%; box-shadow: inset 4px 0 0 0 #17B8A6; transform: rotate(-30deg); }
html[data-cursor="crescent"] .cursor-main.is-hovering .cursor-inner { width: 30px; height: 30px; }
html[data-cursor="crescent"] .cursor-main.is-hovering .cursor-shape { box-shadow: inset 6px 0 0 0 #5FE0D0; transform: rotate(30deg); }

/* 29 · minimal */
html[data-cursor="minimal"] .cursor-main .cursor-inner { width: 4px; height: 4px; }
html[data-cursor="minimal"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="minimal"] .cursor-main.is-hovering .cursor-inner { width: 8px; height: 8px; }

/* 30 · arrow */
html[data-cursor="arrow"] .cursor-main .cursor-inner { width: 22px; height: 16px; }
html[data-cursor="arrow"] .cursor-main .cursor-shape::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: #17B8A6; transform: translateY(-50%); }
html[data-cursor="arrow"] .cursor-main .cursor-shape::after { content: ''; position: absolute; right: 0; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid #17B8A6; border-right: 1.5px solid #17B8A6; transform: translateY(-50%) rotate(45deg); }
html[data-cursor="arrow"] .cursor-main.is-hovering .cursor-inner { width: 34px; height: 16px; }
html[data-cursor="arrow"] .cursor-main.is-hovering .cursor-shape::before,
html[data-cursor="arrow"] .cursor-main.is-hovering .cursor-shape::after { border-color: #5FE0D0; background: #5FE0D0; }

/* 31 · line-dot */
html[data-cursor="line-dot"] .cursor-main .cursor-inner { width: 34px; height: 6px; }
html[data-cursor="line-dot"] .cursor-main .cursor-shape::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: #17B8A6; transform: translateY(-50%); }
html[data-cursor="line-dot"] .cursor-main .cursor-shape::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: #17B8A6; border-radius: 50%; transform: translate(-50%, -50%); }
html[data-cursor="line-dot"] .cursor-main.is-hovering .cursor-inner { width: 56px; height: 6px; }
html[data-cursor="line-dot"] .cursor-main.is-hovering .cursor-shape::before,
html[data-cursor="line-dot"] .cursor-main.is-hovering .cursor-shape::after { background: #5FE0D0; }

/* 32 · beacon */
html[data-cursor="beacon"] .cursor-main .cursor-inner { width: 6px; height: 6px; }
html[data-cursor="beacon"] .cursor-main .cursor-shape { background: #17B8A6; border-radius: 50%; }
html[data-cursor="beacon"] .cursor-main .cursor-shape::before,
html[data-cursor="beacon"] .cursor-main .cursor-shape::after { content: ''; position: absolute; inset: -2px; border: 1.5px solid rgba(23,184,166,.7); border-radius: 50%; animation: cursor-beacon 2.2s ease-out infinite; }
html[data-cursor="beacon"] .cursor-main .cursor-shape::after { animation-delay: 1.1s; }
@keyframes cursor-beacon { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
html[data-cursor="beacon"] .cursor-main.is-hovering .cursor-inner { width: 12px; height: 12px; }

/* ══════════════════════════════════════════════════════════════
   ARBITRARY PX FONT-SIZES → REM
   Tailwind arbitrary sizes (text-[9px] etc.) don't scale with
   the fluid root font-size, so we remap them.
   ══════════════════════════════════════════════════════════════ */
html .text-\[8px\]    { font-size: 0.5rem; }
html .text-\[9px\]    { font-size: 0.5625rem; }
html .text-\[9\.5px\] { font-size: 0.59375rem; }
html .text-\[10px\]   { font-size: 0.625rem; }
html .text-\[11px\]   { font-size: 0.6875rem; }
html .text-\[12px\]   { font-size: 0.75rem; }
html .text-\[13px\]   { font-size: 0.8125rem; }
html .text-\[14px\]   { font-size: 0.875rem; }
html .text-\[15px\]   { font-size: 0.9375rem; }
html .text-\[16px\]   { font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .load, .live { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal-init { opacity: 1 !important; transform: none !important; transition: none !important; }
  .magnetic { transform: none !important; transition: none !important; }
  .split-word-inner { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cursor, .cursor * { display: none !important; }
  html.has-custom-cursor, html.has-custom-cursor * { cursor: auto !important; }
  html { scroll-behavior: auto; }
  .page-enter-active, .page-leave-active { transition: none !important; }
  .cursor-shape, .cursor-shape::before, .cursor-shape::after { animation: none !important; }
  .typing-caret::after { animation: none; opacity: 1; }
  .stat-card { animation: none; opacity: 1; transform: none; }
  .draw-path, .chart-bar, .spin-slow { animation: none !important; }
}
/* ══════════════════════════════════════════════════════════════
   HERO TYPING — reserve space so typing doesn't reflow the page.
   min-height uses `em` so it scales with the element's own
   font-size at every breakpoint automatically.
   ══════════════════════════════════════════════════════════════ */

/* h1 — longest heading is "Replace a Research Team With One Pipeline
   That Never Sleeps" (~59 chars). At max-w-4xl / leading-[1.02]:
     • mobile (text-5xl, 3rem)   → up to ~4 lines
     • md     (text-7xl, 4.5rem) → ~3 lines
     • lg     (5.25rem)          → ~3 lines                             */
.hero-typing-heading {
  min-height: 4.2em;
}
@media (min-width: 768px) {
  .hero-typing-heading { min-height: 3.1em; }
}

/* p — longest quote is "Universities rarely lose money on tuition.
   They lose it in the gaps between systems that don't talk to each
   other." (~116 chars). At text-lg / leading-relaxed (1.625):
     • mobile → up to ~3 lines
     • md+    → ~2 lines                                                */
.hero-typing-quote {
  min-height: 4.9em;
}
@media (min-width: 768px) {
  .hero-typing-quote { min-height: 3.3em; }
}

/* ══════════════════════════════════════════════════════════════
   TECHNOLOGIES PAGE — grid of logo tiles with names underneath
   ══════════════════════════════════════════════════════════════ */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .tech-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; }
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.5rem 0.75rem;
  border-radius: 0.75rem;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.tech-item:hover { transform: translateY(-2px); }

.tech-item-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-align: center;
  color: var(--dim);
  max-width: 100%;
  word-break: break-word;
}