/* ==========================================================================
   SyncTide — components: nav, buttons, cards, sections
   ========================================================================== */

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - 32px));
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 12px 40px -20px rgba(0,0,0,0.6);
  transition: transform .5s var(--ease-out), background .3s;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg-1) 92%, transparent);
}

.nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text);
}
.nav .brand img {
  width: 28px; height: 28px;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(94,176,255,0.35);
}
.nav-links { display: flex; gap: 6px; }
.nav-links a {
  color: var(--text-muted);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: all .2s var(--ease-out);
}
.nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.nav-cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg-0);
  font-size: 14px;
  font-weight: 600;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.nav-cta:hover { transform: translateY(-1px); color: var(--bg-0); box-shadow: 0 10px 24px -10px rgba(255,255,255,0.4); }

.nav-mobile-toggle { display: none; }

@media (max-width: 820px) {
  .nav-links, .nav-cta { display: none; }
  .nav-mobile-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text); cursor: pointer;
  }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .3s, background .3s, border-color .3s;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  font-family: inherit;
}
.btn-primary {
  color: #04131f;
  background: #fff;
  box-shadow: 0 20px 40px -18px rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: var(--grad-hero);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  filter: blur(10px);
}
.btn-primary:hover { transform: translateY(-2px); color: #04131f; }
.btn-primary:hover::before { opacity: 0.7; }

.btn-secondary {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-color: var(--border-hi);
  backdrop-filter: blur(12px);
}
.btn-secondary:hover {
  color: var(--text);
  background: var(--surface-hi);
  border-color: var(--accent);
}

.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: #cfe5ff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.badge .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  position: relative;
}
.badge .dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: ping 1.8s var(--ease-out) infinite;
}
@keyframes ping {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--grad-card), var(--surface);
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .3s;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(94,176,255,0.15), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  pointer-events: none;
}
.card:hover { border-color: var(--border-hi); transform: translateY(-4px); box-shadow: var(--glow-soft); }
.card:hover::before { opacity: 1; }

.card .icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(94,176,255,0.18), rgba(124,92,255,0.08));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  margin-bottom: 18px;
  transition: transform .4s var(--ease-out);
}
.card:hover .icon { transform: scale(1.08) rotate(-4deg); }
.card .icon svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- Sections ---------- */
section { padding: 120px 0; position: relative; }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.section-head .eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--accent);
}
.section-head h2 { margin-bottom: 18px; }
.section-head h2 em { color: var(--accent); font-style: normal; font-family: "Space Grotesk", sans-serif; font-weight: 600; }
.section-head p { color: var(--text-dim); font-size: 18px; max-width: 620px; }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Hero ---------- */
.hero {
  padding: calc(var(--nav-h) + 120px) 0 120px;
  position: relative;
  text-align: center;
}
.hero-orb {
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 14s var(--ease-in-out) infinite alternate;
}
.hero-orb.one { background: #5eb0ff; top: -100px; left: -120px; }
.hero-orb.two { background: #7c5cff; top: 40px; right: -160px; animation-delay: -4s; }
.hero-orb.three { background: #3ddc97; bottom: -200px; left: 30%; opacity: 0.28; animation-delay: -8s; }
@keyframes orbFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(60px, -40px, 0) scale(1.08); }
}

.hero-inner { position: relative; z-index: 2; }
.hero h1 {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 26px auto 22px;
  max-width: 14ch;
}
.hero h1 .glow {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* background-clip:text on the <h1> stops working as soon as animations.js
   wraps words in <span class="word" style="display:inline-block">…</span>
   — the inline-block children create their own layout box and the parent's
   clipped background no longer renders behind them.
   Solution: push the gradient down the tree. `background: inherit` on the
   [data-split] + .word + .inner chain carries the h1's gradient (or the
   .glow override) all the way to the innermost animated span. */
.hero h1 [data-split],
.hero h1 [data-split] .word,
.hero h1 [data-split] .inner {
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Guarantee layout even when animations.js hasn't run yet (CDN blocked,
     slow connection, etc.) — prevents an invisible hero on first paint. */
  display: inline-block;
}
.hero .lead {
  max-width: 620px; margin: 0 auto;
  color: var(--text-dim);
  font-size: 19px;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

.hero-marquee {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 13px;
}
.hero-marquee .row {
  display: flex; gap: 40px; align-items: center;
  opacity: 0.6;
  font-family: "JetBrains Mono", monospace;
}

/* ---------- Feature grid (bento) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 20px;
}
.bento > .card { grid-column: span 2; }
.bento > .card.wide { grid-column: span 4; }
.bento > .card.tall { grid-row: span 2; }
.bento > .card.full { grid-column: span 6; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > .card, .bento > .card.wide, .bento > .card.full { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .card, .bento > .card.wide, .bento > .card.full { grid-column: span 1; }
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(8px);
}
.stats .stat {
  padding: 32px;
  border-right: 1px solid var(--border);
  position: relative;
}
.stats .stat:last-child { border-right: 0; }
.stats .stat .num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats .stat .label { margin-top: 12px; color: var(--text-muted); font-size: 14px; }
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats .stat:nth-child(2) { border-right: 0; }
  .stats .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  padding-left: 28px;
}
.timeline::before {
  content: ""; position: absolute;
  left: 8px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.timeline .item { position: relative; padding-bottom: 32px; }
.timeline .item::before {
  content: ""; position: absolute;
  left: -24px; top: 6px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 2px solid var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.timeline .item .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.timeline .item h3 { margin: 4px 0 6px; }
.timeline .item p { color: var(--text-muted); font-size: 14.5px; }

/* ---------- Download hero ---------- */
.download {
  position: relative;
  padding: 72px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(400px circle at 20% 30%, rgba(94,176,255,0.22), transparent 60%),
    radial-gradient(400px circle at 80% 70%, rgba(124,92,255,0.22), transparent 60%),
    linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-hi);
  overflow: hidden;
  text-align: center;
}
.download::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.05) 50%, transparent 51%);
  background-size: 36px 36px;
  opacity: 0.5;
  pointer-events: none;
}
.download h2 { margin: 16px 0 12px; }
.download p.lead { color: var(--text-dim); max-width: 560px; margin: 0 auto 28px; }
.download .meta {
  margin-top: 22px;
  display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
  font-family: "JetBrains Mono", monospace;
}
.download .meta span { display: flex; align-items: center; gap: 8px; }
.download .meta svg { width: 14px; height: 14px; color: var(--accent-3); }
@media (max-width: 700px) { .download { padding: 44px 24px; } }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
  color: var(--text-muted);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h4 { font-family: "Inter", sans-serif; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid ul a { color: var(--text-muted); }
.footer-grid ul a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; gap: 8px; } }

/* ---------- Page header (sub-pages) ---------- */
.page-hero {
  padding: calc(var(--nav-h) + 120px) 0 40px;
  position: relative;
}
.page-hero h1 { font-size: clamp(44px, 6vw, 72px); margin-bottom: 16px; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-hero p { color: var(--text-dim); font-size: 18px; max-width: 620px; }

/* ---------- Changelog entry ---------- */
.release {
  position: relative;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
  transition: border-color .3s;
}
.release:hover { border-color: var(--border-hi); }
.release-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.release-head .v {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.release-head .date { color: var(--text-muted); font-size: 14px; font-family: "JetBrains Mono", monospace; }
.release h3 { margin: 22px 0 10px; color: var(--accent); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; font-family: "JetBrains Mono", monospace; font-weight: 500; }
.release h4 { margin: 18px 0 8px; font-family: "Inter", sans-serif; font-weight: 600; font-size: 16px; }
.release ul { color: var(--text-dim); padding-left: 22px; margin: 0; }
.release ul li { margin: 6px 0; }
.release ul li strong { color: var(--text); font-weight: 600; }
.release table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.release table th, .release table td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.release table th { font-family: "JetBrains Mono", monospace; font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--text-muted); }

/* ---------- Docs cards ---------- */
.doc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .4s var(--ease-out), border-color .3s;
}
.doc-card:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.doc-card .doc-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(94,176,255,0.2), rgba(124,92,255,0.1));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.doc-card h3 { margin: 0; }
.doc-card p { color: var(--text-muted); font-size: 14.5px; flex: 1; }
.doc-actions { display: flex; gap: 10px; }
.doc-actions a {
  flex: 1; text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  transition: all .25s var(--ease-out);
}
.doc-actions a:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.doc-actions a.primary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--surface-hi); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.price-card.featured {
  background:
    radial-gradient(400px circle at 50% 0%, rgba(94,176,255,0.14), transparent 70%),
    var(--surface);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 30px 70px -30px rgba(94,176,255,0.35);
}
.price-card.featured::before {
  content: "MOST POPULAR";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--grad-hero);
  color: #04131f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 5px 14px;
  border-radius: 999px;
}
.price-card .tier-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.price-card .tier-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: -6px;
}
.price-card .tier-price .num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 56px;
  line-height: 1;
  color: var(--text);
}
.price-card .tier-price .unit { color: var(--text-muted); font-size: 14px; }
.price-card .tier-desc { color: var(--text-muted); font-size: 14.5px; }
.price-card ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px;
  flex: 1;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}
.price-card ul li {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--text-dim); font-size: 14px;
}
.price-card ul li svg {
  flex-shrink: 0; width: 16px; height: 16px;
  color: var(--accent-3); margin-top: 3px;
}
.price-card .tier-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid var(--border-hi);
  color: var(--text);
  background: transparent;
  transition: all .25s var(--ease-out);
}
.price-card .tier-cta:hover { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.price-card.featured .tier-cta {
  background: #fff; color: #04131f; border-color: transparent;
}
.price-card.featured .tier-cta:hover { color: #04131f; box-shadow: 0 12px 28px -10px rgba(255,255,255,0.35); transform: translateY(-1px); }

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: 18px;
  max-width: 560px;
}
.form label { display: grid; gap: 6px; font-size: 13px; color: var(--text-dim); font-weight: 500; }
.form input,
.form textarea,
.form select {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form textarea { resize: vertical; min-height: 120px; }
.form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form .row-2 { grid-template-columns: 1fr; } }
.form button[type="submit"] {
  width: 100%;
  padding: 15px 24px;
  background: #fff;
  color: #04131f;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
.form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(255,255,255,0.35); }
.form .form-help { font-size: 13px; color: var(--text-muted); }
.form .form-help a { color: var(--accent); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info .item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contact-info .item:last-child { border-bottom: 0; }
.contact-info .item .icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info .item h4 { margin: 0 0 4px; font-size: 15px; font-family: "Inter", sans-serif; font-weight: 600; }
.contact-info .item p { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---------- OG image preview template ---------- */
body.og-preview {
  width: 1200px; height: 630px;
  overflow: hidden;
  padding: 0; margin: 0;
  background: #05070d;
}

/* ==========================================================================
   Mobile pass — single consolidated block. Targets the phones-and-narrow-
   tablets range (≤ 760px). Each rule below is a real-world fix observed
   on a Pixel-sized viewport, not speculative polish.
   ========================================================================== */

/* Mobile nav drawer — the hamburger flips body.nav-open. Previously the JS
   toggle did nothing visible (no CSS for .nav-open). The drawer reuses the
   existing .nav-links element so no HTML changes are needed across pages. */
@media (max-width: 820px) {
  /* Pin the hamburger to the viewport's top-right corner instead of
     keeping it inside the nav pill. This is bullet-proof: no matter
     what else happens on the page (overflowing child, oversized image,
     etc.), the toggle is always exactly where the user's thumb expects
     it to be. Independent of the centered nav pill. */
  .nav-mobile-toggle {
    position: fixed;
    /* Vertically centre against the nav pill. Nav: top 16px + 68px
       tall (--nav-h); button: 44px tall.
       16 + (68 - 44) / 2 = 28px. */
    top: 28px;
    right: 28px;
    z-index: 70;
    /* Slightly larger hit-target for easier tapping. */
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
    border: 1px solid var(--border);
    color: var(--text);
  }

  /* Override the earlier `display: none` on .nav-links / .nav-cta — they
     become the drawer, hidden via transform instead of display so the
     transition works. */
  .nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 55;
    padding: calc(var(--nav-h) + 32px) 24px 28px;
    background: color-mix(in srgb, var(--bg-1) 96%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-110%);
    transition: transform .35s var(--ease-out);
    pointer-events: none;
  }
  .nav-links a {
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
    padding: 14px 4px;
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    /* 48px+ tall — meets WCAG / Apple HIG touch-target guidance. */
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav-links a:last-child { border-bottom: 0; }
  /* The Download CTA pill stays hidden in the drawer — it's redundant with
     the prominent #download anchor link in nav-links on the index page,
     and other pages handle download separately. */
  .nav-cta { display: none !important; }

  body.nav-open .nav-links {
    transform: translateY(0);
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  /* Animate hamburger -> X */
  .nav-mobile-toggle svg path { transition: transform .25s var(--ease-out), opacity .2s; transform-origin: center; }
  body.nav-open .nav-mobile-toggle svg path:first-child { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-mobile-toggle svg path:nth-child(2) { opacity: 0; }
  body.nav-open .nav-mobile-toggle svg path:last-child { transform: translateY(-6px) rotate(-45deg); }
}

/* Single tight breakpoint catches phones + narrow tablets in portrait. */
@media (max-width: 760px) {
  /* Sections were 120px top+bottom — way too much air on a 6" screen.
     Drop to ~60px so the page actually scrolls through content. */
  section { padding: 64px 0; }

  /* Hero — pull in the top padding (no big nav-pill margin needed) and
     give the headline some side breathing room. */
  .hero {
    padding: calc(var(--nav-h) + 56px) 0 64px;
  }
  .hero h1 { margin: 18px auto 18px; }
  .hero .lead { font-size: 16.5px; padding: 0 4px; }

  /* CTAs full-width stacked, with primary first. flex-wrap was already
     on, but with 14px gap and pill paddings the buttons were overflowing
     into half-and-half pairs that visually broke the hierarchy. */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; padding: 0 4px; margin-top: 28px; }
  .hero-cta .btn { justify-content: center; padding: 16px 22px; }

  /* Marquee row was a horizontal flex with 40px gap — overflowed off-
     screen on phones. Let it wrap, smaller gap, smaller font. */
  .hero-marquee { margin-top: 48px; }
  .hero-marquee .row { flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 11.5px; }

  /* Orbs — 560px @ 120px blur is heavy for a mobile GPU and runs the
     fan. Halve the surface area + drop blur. Visually identical effect
     because the viewport is smaller anyway. */
  .hero-orb { width: 320px; height: 320px; filter: blur(80px); opacity: 0.4; }
  .hero-orb.three { display: none; }

  /* Section heads */
  .section-head { margin-bottom: 36px; }
  .section-head p { font-size: 16px; }

  /* Stats: 4-up was already 2x2 at 900px; tighten the cell padding so
     numbers don't overflow on a 360px-wide screen. */
  .stats .stat { padding: 22px 16px; }

  /* Bento card padding shrinks (was 32px from .card defaults) */
  .card { padding: 22px; }

  /* Download hero — already has a 700px breakpoint with 44px 24px,
     but on a 360px screen 24px sides are still tight. Let .meta wrap
     more aggressively and shrink the headline gap. */
  .download h2 { font-size: clamp(28px, 7vw, 40px); }
  .download .meta { gap: 14px 22px; font-size: 12px; }

  /* Page hero (sub-pages) — same idea as main hero. */
  .page-hero {
    padding: calc(var(--nav-h) + 56px) 0 28px;
  }
  .page-hero p { font-size: 16px; }

  /* Changelog release cards: 40px padding wastes a third of the screen.
     Also break long URLs / commit hashes that horizontally overflow. */
  .release { padding: 24px 20px; border-radius: var(--radius); }
  .release h2 { font-size: 24px !important; line-height: 1.15; }
  .release h3 { font-size: 17px; margin-top: 22px; }
  .release p, .release li { font-size: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
  .release .release-head { flex-wrap: wrap; gap: 8px; }
  .release pre, .release code { white-space: pre-wrap; word-break: break-word; }

  /* Footer columns — 1fr 1fr at 820px is fine; on phones, single column
     reads better and saves a scroll. */
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Pricing — pricing-grid already collapses at 960px. Tighten card
     padding so the price + bullets fit without internal scroll. */
  .pricing-grid > * { padding: 28px 22px !important; }

  /* Forms — already collapse at 560px; bump field height for thumb taps. */
  .form input, .form textarea, .form select {
    min-height: 48px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }

  /* Nav pill on phones — full-width with viewport-edge alignment.
     Critical: drop the `left: 50%; transform: translateX(-50%)` from
     desktop. `transform` on an ancestor creates a containing block for
     position: fixed descendants, which means the hamburger's
     `right: 16px` was being measured relative to the nav (which itself
     overflows the viewport by a hair due to rounding), not relative to
     the actual viewport. Removing the transform makes the hamburger's
     `position: fixed` resolve against the viewport, so it's pinned
     exactly at the screen edge regardless of nav width. */
  .nav {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    padding: 0 14px;
  }
  .nav .brand span { font-size: 15px; }
  .nav .brand img { width: 24px; height: 24px; }
}

/* Tighter still — the iPhone SE / 375px range. */
@media (max-width: 380px) {
  .hero h1 { font-size: 38px; }
  .download { padding: 32px 18px; }
  .release { padding: 20px 16px; }
}

/* Belt-and-suspenders: stop any descendant from making the page wider
   than the viewport on mobile. The hero has absolutely-positioned orbs
   at `right: -160px` that extend past the viewport edge; without an
   ancestor clipping them, the page can scroll horizontally even with
   body/html overflow-x set. Repeat the clip at each major block-level
   container so positioned children get caught at the nearest level. */
@media (max-width: 760px) {
  .hero, .page-hero, section, footer, .container { overflow-x: clip; }
  /* `overflow-x: clip` (not `hidden`) doesn't create a new scroll
     context, so position: sticky and intersection-observer reveals
     keep working. */

  /* Flex / grid items default to `min-width: auto` which means a long
     unbroken word, image, or pre tag can force the column wider than
     1fr — making the parent grid wider than the viewport. Force shrink
     by setting `min-width: 0` on common containers. */
  .bento > *, .grid > *, .stats > .stat, .footer-grid > *, .pricing-grid > * {
    min-width: 0;
  }

  /* Words / URLs that can't break (long commit hashes, file paths)
     wrap by character on mobile — better than horizontal scroll. */
  body { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Mobile performance — kill the heavy GPU effects on small viewports. The
   site looks fine on a desktop where compositing handles them in stride;
   on a mid-range phone they cost 15–30 fps and visibly stutter on scroll.
   ========================================================================== */
@media (max-width: 760px) {
  /* `.reveal { opacity: 0 }` is set in base.css — content stays invisible
     until GSAP loads and animates. On a 3G phone with a cold cache that's
     1–3 seconds of blank page waiting on 3 CDN scripts. Show content
     immediately on mobile; the animations add little on a 6" screen. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Same problem with the hero word-split — `[data-split]` relies on
     animations.js to wrap each word in spans for the inherited gradient.
     If the script lags, the headline reads as clipped/transparent. Force
     the gradient onto the parent so something readable paints day-one. */
  .hero h1 [data-split] { display: inline; }

  /* Mesh background is a 22-second-loop animated radial-gradient stack —
     constant repaint cost. Stop the animation and shrink the gradients so
     compositing has less area to redraw on scroll. */
  body::before { animation: none; opacity: 0.7; }

  /* The grid overlay (body::after) is a 56px-tile pattern with a radial
     mask — it's the single most expensive piece of CSS on the page on
     mobile because mask-image rerasterises on every scroll. Drop it. */
  body::after { display: none; }

  /* Hero orbs were halved earlier; also kill their float animation so the
     blur layer isn't recomposited every frame. The static glow is enough. */
  .hero-orb { animation: none; }

  /* backdrop-filter blur on the nav pill is GPU-heavy on iOS Safari and
     stutters on scroll-up reveal. Drop it; use a solid translucent fill
     instead — visually almost identical against the dark bg. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--bg-1) 92%, transparent);
  }
  .nav-links {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-1);
  }

  /* Tilt + magnetic interactions are pointer-only on mobile anyway — let
     them no-op (the JS already short-circuits on touch, but make the
     transforms cheaper if a stray translate3d is left over). */
  .card { transform: none !important; }
  .card:hover { transform: none !important; }
}


/* ---------- Hero product screenshot ---------- */
.hero-shot-wrap { margin-top: -56px; margin-bottom: 8px; position: relative; z-index: 3; }
.hero-shot {
  margin: 0 auto;
  max-width: 1080px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #1d2944);
  background: #0a0e1a;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(94,176,255,0.08);
  position: relative;
}
.hero-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.hero-shot-bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #0c1322; border-bottom: 1px solid var(--border, #1d2944); }
.hero-shot-bar .tl { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hero-shot-bar .tl.r { background: #ff5d73; }
.hero-shot-bar .tl.y { background: #f2c14e; }
.hero-shot-bar .tl.g { background: #3ddc97; }
.hero-shot-url { margin-left: 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--text-muted, #7d8aa8); background: #05070d; border: 1px solid var(--border, #1d2944); padding: 3px 14px; border-radius: 999px; }
.hero-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .hero-shot-wrap { margin-top: -24px; } .hero-shot { border-radius: 12px; } .hero-shot-url { font-size: 10.5px; } }