/* ── Home page ─────────────────────────────────────────── */

/* ─── Hero: dashboard composition ─── */
.hero.dash-hero { padding:6.5rem 0 3rem; }
.dash-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  align-items:start;
  margin-top:2rem;
}
@media (min-width:1000px) {
  .dash-grid { grid-template-columns: 0.95fr 1.1fr; gap:4rem; align-items:center; }
}
.dash-hl {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:1;
  color:var(--fg);
}
.dash-hl .g {
  background:linear-gradient(100deg, var(--accent) 0%, var(--accent-3) 55%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dash-sub {
  color:var(--fg-2);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height:1.55;
  margin-top:1.6rem;
  max-width:46ch;
}
.dash-cta-row { display:flex; gap:1rem; align-items:center; margin-top:2.2rem; flex-wrap:wrap; }
.dash-link {
  font-size:0.78rem;
  color:var(--fg-soft);
  letter-spacing:0.06em;
}

/* Product Hunt badge — subtle social proof under hero CTA.
   The img src is swapped via JS (MutationObserver on data-theme)
   so only one image is ever in the DOM. */
.ph-badge {
  display:inline-block;
  margin-top:1.6rem;
  opacity:0.82;
  transition:opacity .2s var(--ease);
  line-height:0;
}
.ph-badge:hover { opacity:1; }
.ph-badge__img {
  display:block;
  width:200px;
  height:auto;
  border-radius:4px;
}
@media (max-width:480px) {
  .ph-badge__img { width:170px; }
}

/* The dashboard mock */
.panel {
  border:1px solid var(--rule);
  border-radius:8px;
  background:linear-gradient(180deg, var(--bg-2), var(--surface));
  overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
}
.panel-bar {
  padding:0.7rem 1rem;
  border-bottom:1px solid var(--rule);
  background:var(--bg-3);
  display:flex; align-items:center; justify-content:space-between;
  gap:0.8rem;
}
.panel-bar-l {
  display:flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-soft);
}
.panel-bar-l .blob {
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
.panel-bar-l .sub { color:var(--fg); font-family:var(--font-sans); font-size:0.78rem; }
.panel-bar-r {
  font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.16em; color:var(--accent);
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.4rem;
}
.panel-bar-r::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation:dashpulse 1.8s ease-in-out infinite;
}
@keyframes dashpulse { 50% { opacity:.35; } }

.panel-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--rule);
}
.panel-cell {
  background:var(--surface);
  padding:1.1rem 1.2rem;
  min-height:120px;
  display:flex; flex-direction:column; gap:0.5rem;
}
.panel-cell.span-2 { grid-column:1 / -1; }
.panel-cell .label {
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.18em;
  color:var(--fg-soft);
  text-transform:uppercase;
  display:flex; justify-content:space-between;
}
.panel-cell .label .status { color:var(--accent); }
.panel-cell .label .status.idle { color:var(--fg-dim); }
.panel-cell .big-stat {
  font-family:var(--font-mono);
  font-size:1.6rem;
  color:var(--fg);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1;
}
.panel-cell .big-stat .accent { color:var(--accent); }
.panel-cell .big-stat .accent-3 { color:var(--accent-3); }
.panel-cell .big-stat--sm { font-size:1.1rem; }
.panel-cell .stat-sub {
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--fg-soft);
  line-height:1.5;
}
.panel-cell .stat-sub code {
  color:var(--accent); font-family:var(--font-mono);
}
.meter {
  height:5px;
  background:var(--bg-3);
  border-radius:2px;
  overflow:hidden;
  margin-top:0.4rem;
}
.meter > span {
  display:block; height:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.meter.muscle > span { background:linear-gradient(90deg, var(--accent-3), var(--accent)); }

.log-row {
  font-family:var(--font-mono);
  font-size:0.74rem;
  line-height:1.7;
  color:var(--fg-2);
  display:grid;
  grid-template-columns: 70px 1fr;
  gap:1rem;
}
.log-row .t { color:var(--fg-dim); }
.log-row .accent { color:var(--accent); }
.log-row .accent-3 { color:var(--accent-3); }
.log-row .ok { color:var(--accent); }

/* ─── Pricing ─── */
.deck-card {
  border:1px solid var(--rule);
  border-radius:6px;
  padding:2.4rem 2.5rem;
  background:linear-gradient(135deg, rgba(143,176,107,.06), transparent 60%), var(--surface);
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:start;
  margin-bottom:2.5rem;
  border-left:3px solid var(--accent);
}
@media (min-width:900px) {
  .deck-card { grid-template-columns: 1fr 1.6fr; gap:3.5rem; }
}
.deck-card .left { display:flex; flex-direction:column; gap:0.6rem; }
.deck-card .amount-lg {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1;
  margin-top:0.8rem;
}
.deck-card .amount-lg .per {
  font-size:1rem; color:var(--fg-soft); font-weight:400; margin-left:0.3rem;
}
.deck-card .left p {
  color:var(--fg-2); font-size:0.95rem; max-width:32ch;
  margin-top:0.8rem; line-height:1.5;
}
.deck-card ul {
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem 1.4rem;
}
.deck-card ul li {
  color:var(--fg-2);
  font-size:0.88rem;
  padding-left:1.1rem;
  position:relative;
  line-height:1.45;
}
.deck-card ul li::before {
  content:"+"; position:absolute; left:0; top:0;
  color:var(--accent); font-family:var(--font-mono); font-weight:500;
}

.agents-eyebrow {
  margin-top:3rem; margin-bottom:1.2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; align-items:baseline;
}
.agents-eyebrow .label {
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.2em;
  color:var(--accent-3);
  text-transform:uppercase;
}
.agents-eyebrow .meta {
  font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-soft);
}
.agents-eyebrow .meta strong { color:var(--fg); font-weight:500; }

.tier-row3 { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:900px) { .tier-row3 { grid-template-columns:repeat(3, 1fr); } }

.compute-tier {
  padding:1.6rem 1.5rem 1.8rem;
  border:1px solid var(--rule);
  border-radius:4px;
  background:var(--surface);
  display:flex; flex-direction:column; gap:0.7rem;
}
.compute-tier.featured {
  background:linear-gradient(180deg, rgba(176,107,143,.05), transparent 50%), var(--surface);
  border-color:color-mix(in oklab, var(--accent-3) 40%, var(--rule));
}
.compute-tier .name {
  font-family:var(--font-mono);
  font-size:0.66rem; letter-spacing:0.2em;
  color:var(--accent-3); text-transform:uppercase;
}
.compute-tier .amount-v {
  font-size:1.9rem; font-weight:500;
  letter-spacing:-0.02em; color:var(--fg);
}
.compute-tier .amount-v .per { font-size:0.85rem; color:var(--fg-soft); margin-left:0.2rem; font-weight:400; }
.compute-tier p {
  color:var(--fg-2); font-size:0.88rem; line-height:1.5;
}
.compute-tier .meta-list {
  margin-top:auto; padding-top:1rem;
  border-top:1px dashed var(--rule);
  display:flex; flex-direction:column; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.74rem;
}
.compute-tier .meta-list .r {
  display:flex; justify-content:space-between; gap:1rem;
}
.compute-tier .meta-list .r span:first-child { color:var(--fg-soft); }
.compute-tier .meta-list .r span:last-child { color:var(--fg); }
.compute-tier .tier-cta { margin-top:1rem; }
.compute-tier.featured .tier-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  color: #fff;
}
.compute-tier.featured .tier-cta:hover { filter: brightness(1.08); box-shadow: 0 0 18px var(--glow); }

.faq-cols {
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:900px) { .faq-cols { grid-template-columns:1fr 1fr; gap:0 3rem; } }

/* ─── Screens showcase ─── */
.screens-head {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  margin-bottom:2rem;
}
.screens-head .meta {
  font-family:var(--font-mono); font-size:0.72rem; color:var(--fg-soft);
  letter-spacing:0.06em;
}
.screens-head .meta .accent { color:var(--accent); }

.screens-stage {
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  align-items:end;
}
@media (min-width:1000px) {
  .screens-stage {
    grid-template-columns: 3fr 1fr;
    gap:2.5rem;
  }
}

/* Browser-chrome frame for the desktop shot */
.browser-frame {
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-3);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02);
}
.browser-bar {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.6rem 0.9rem;
  background:var(--bg-3);
  border-bottom:1px solid var(--rule);
}
.browser-dots { display:flex; gap:0.35rem; }
.browser-dots span {
  width:9px; height:9px; border-radius:50%;
  background:var(--rule);
}
.browser-dots span:nth-child(1) { background:#e06363; }
.browser-dots span:nth-child(2) { background:#e0b863; }
.browser-dots span:nth-child(3) { background:#7fc285; }
.browser-url {
  flex:1;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--fg-soft);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:4px;
  padding:0.25rem 0.7rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browser-url .lock { color:var(--accent); margin-right:0.4rem; }
.browser-url .path { color:var(--fg); }
.browser-frame img {
  display:block;
  width:100%;
  height:auto;
}

/* Phone-stack column */
.phone-stack {
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:end;
}
.phone-stack > div {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.phone {
  border:1px solid var(--rule);
  border-radius:22px;
  padding:6px;
  background:linear-gradient(180deg, var(--bg-3), var(--surface));
  box-shadow:0 30px 60px -25px rgba(0,0,0,.6);
  position:relative;
}
.phone::before {
  content:"";
  position:absolute;
  top:10px; left:50%; transform:translateX(-50%);
  width:54px; height:6px;
  background:var(--bg);
  border-radius:3px;
  z-index:2;
}
.phone img {
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid var(--rule);
}

/* Telegram-style chat mock (in-phone, non-image) */
.tg-screen {
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--rule);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(143,176,107,.05), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(107,143,176,.05), transparent 50%),
    #0e1116;
  display:flex; flex-direction:column;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  color:#e9eaed;
}
.tg-screen .tg-status {
  flex:0 0 auto;
  height:16px;
  padding:0 12px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:8px;
  font-weight:600;
  color:#e9eaed;
}
.tg-screen .tg-status .ico { display:inline-flex; gap:2px; align-items:center; }
.tg-screen .tg-status .ico svg { width:8px; height:8px; }

.tg-screen .tg-header {
  flex:0 0 auto;
  height:32px;
  padding:0 8px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:6px;
  border-bottom:1px solid rgba(255,255,255,.04);
  background:rgba(20, 24, 30, 0.6);
  backdrop-filter:blur(8px);
}
.tg-screen .tg-back {
  display:flex; align-items:center; gap:2px;
  color:#5aa9ff; font-size:9px;
}
.tg-screen .tg-back .chev {
  width:5px; height:5px;
  border-left:1.2px solid #5aa9ff;
  border-bottom:1.2px solid #5aa9ff;
  transform: rotate(45deg);
  margin-right:1px;
}
.tg-screen .tg-title {
  text-align:center;
  line-height:1.05;
}
.tg-screen .tg-title .name {
  font-size:9px; font-weight:600; color:#fff;
}
.tg-screen .tg-title .status {
  font-size:7px; color:#9aa0a6; margin-top:1px;
}
.tg-screen .tg-title .status .dot {
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:#7fc285; margin-right:2px; vertical-align:1px;
}
.tg-screen .tg-avatar {
  width:20px; height:20px; border-radius:50%;
  background:
    conic-gradient(from 210deg, #8fb06b, #6b8fb0, #b06b8f, #8fb06b);
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:700; color:#0e1116;
  letter-spacing:0;
}

.tg-screen .tg-body {
  flex:1 1 auto;
  overflow:hidden;
  padding:6px 6px 4px;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  gap:3px;
  position:relative;
}
/* Telegram chrome wrapping a Nebula Deck screenshot */
.tg-screen .tg-body.tg-body-img {
  padding:0;
  position:relative;
  overflow:hidden;
  background:#0e1116;
  justify-content:flex-start;
  flex: 0 0 auto;
}
.tg-content-img {
  display:block;
  width:100%;
  height:auto;
}

.tg-screen .tg-compose {
  flex:0 0 auto;
  height:30px;
  padding:4px 6px 6px;
  border-top:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center; gap:4px;
  background:rgba(20, 24, 30, 0.85);
}
.tg-screen .tg-compose .clip,
.tg-screen .tg-compose .mic {
  width:16px; height:16px; flex:0 0 auto;
  color:#8a909a;
  display:flex; align-items:center; justify-content:center;
}
.tg-screen .tg-compose .clip svg,
.tg-screen .tg-compose .mic svg { width:12px; height:12px; }
.tg-screen .tg-compose .field {
  flex:1; height:18px;
  border-radius:9px;
  background:#1f242b;
  color:#8a909a; font-size:8px;
  padding:0 7px;
  display:flex; align-items:center;
}

.phone .phone-cap {
  margin-top:0.6rem;
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-soft);
  text-align:center;
  padding-bottom:0.2rem;
}
.phone .phone-cap .accent { color:var(--accent); }

.screens-callouts {
  display:grid;
  grid-template-columns:1fr;
  gap:0.8rem;
  margin-top:2rem;
  font-family:var(--font-mono);
  font-size:0.74rem;
  color:var(--fg-2);
}
@media (min-width:900px) {
  .screens-callouts { grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
}
.screens-callouts .co {
  border-top:1px solid var(--rule);
  padding-top:0.9rem;
  line-height:1.55;
}
.screens-callouts .co .k {
  display:block;
  font-size:0.64rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.3rem;
}
.screens-callouts .co:nth-child(2) .k { color:var(--accent-2); }
.screens-callouts .co:nth-child(3) .k { color:var(--accent-3); }