/* ============================================================
   Dashcrab Landing - page-only styles.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-body);
  text-rendering: optimizeLegibility;
}

::selection { background: #DDD2FF; color: #2A1A6E; }

button { font-family: inherit; cursor: pointer; }

.serif    { font-family: var(--font-title); font-variation-settings: "opsz" 144; letter-spacing: -0.02em; }
.serif-it { font-family: var(--font-title); font-style: italic; font-variation-settings: "opsz" 144; letter-spacing: -0.015em; }
.body     { font-family: var(--font-body); }
.eyebrow  { font: var(--type-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-secondary); }
.tabular  { font-variant-numeric: tabular-nums; }

.section { padding: 96px 32px; }
.section.narrow { padding: 64px 32px; }
.container { max-width: 1240px; margin: 0 auto; }
.container.wide { max-width: 1360px; }
.container.tight { max-width: 980px; }

.rule { height: 1px; background: var(--color-border); width: 100%; }
.rule-soft { height: 1px; background: rgba(232, 228, 240, 0.6); }
.rule-vt { width: 1px; background: var(--color-border); align-self: stretch; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font: 500 14px/1 var(--font-body);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(94, 60, 203, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.btn-ghost {
  border-color: var(--color-border);
  background: var(--color-surface);
}
.btn-ghost:hover { border-color: #C9C2DF; }
.btn-text { padding: 12px 8px; }
.btn-text:hover { color: var(--color-primary); }
.btn-dark {
  background: #1A1A2E; color: #fff;
}
.btn-dark:hover { background: #2A2A48; }

.btn-lg { padding: 14px 24px; font-size: 15px; }

@keyframes dc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.live-dot {
  width: 6px; height: 6px; border-radius: 999px; background: #DC2626;
  animation: dc-pulse 1.8s infinite;
}

@keyframes dc-draw {
  to { stroke-dashoffset: 0; }
}
.spark-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dc-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.spark-path.delay-1 { animation-delay: 0.4s; }
.spark-path.delay-2 { animation-delay: 0.8s; }

@keyframes dc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: dc-marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.card-lift { transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.card-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }

.feature-num {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.ws-tab {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font: 500 14px/1 var(--font-body);
  transition: all 0.18s ease;
}
.ws-tab:hover { color: var(--color-text); border-color: #C9C2DF; }
.ws-tab.is-active {
  background: #1A1A2E;
  color: #fff;
  border-color: #1A1A2E;
}

.mini-kpi {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.dark-bg {
  background: #14142A;
  color: #fff;
}
.dark-bg .eyebrow { color: rgba(255,255,255,0.55); }

.dot-grid {
  background-image: radial-gradient(rgba(123, 83, 234, 0.18) 1px, transparent 1px);
  background-size: 18px 18px;
}

.nav-frost {
  background: rgba(250, 247, 244, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.crab-eye {
  transition: transform 0.12s var(--ease-out);
}

@media (max-width: 980px) {
  .section { padding: 64px 20px; }
  .container { padding: 0; }
  .hide-md { display: none !important; }
}

.price-card {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 28px;
}
.price-card.is-featured {
  border-color: #1A1A2E;
  background: #1A1A2E;
  color: #fff;
}
.price-card.is-featured .eyebrow { color: rgba(255,255,255,0.6); }

/* ----- Connection diagram - animated dashed lines ----- */
@keyframes dc-flow {
  to { stroke-dashoffset: -20; }
}
.flow-line {
  stroke-dasharray: 6 14;
  stroke-dashoffset: 0;
  animation: dc-flow 1.4s linear infinite;
}

/* ----- GEO section: horizontal scan shimmer ----- */
@keyframes dc-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ----- GEO section: cursor blink ----- */
@keyframes dc-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ----- Hub pulsing ring ----- */
@keyframes dc-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(123,83,234,0.30), 0 0 0 0   rgba(123,83,234,0.10), 0 4px 16px rgba(0,0,0,0.08); }
  70%  { box-shadow: 0 0 0 16px rgba(123,83,234,0),   0 0 0 32px rgba(123,83,234,0),   0 4px 16px rgba(0,0,0,0.08); }
  100% { box-shadow: 0 0 0 0   rgba(123,83,234,0),   0 0 0 0   rgba(123,83,234,0),   0 4px 16px rgba(0,0,0,0.08); }
}
.hub-ring {
  animation: dc-pulse-ring 2.4s ease-out infinite;
}

/* ── Mobile layout fixes (≤ 768 px) ─────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 56px 20px; }
  .section.narrow { padding: 40px 20px; }

  /* Nav inner padding */
  .dc-nav-inner { padding: 0 20px !important; }

  /* Hero: stack columns, hide the diagram */
  .dc-hero-grid {
    grid-template-columns: 1fr !important;
    padding: 24px 20px 16px !important;
    gap: 0 !important;
  }
  .dc-connection-diagram { display: none !important; }

  /* 2-col → 1-col */
  .dc-2col-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 3-col → 1-col; fix border grid layout that relies on gridded borders */
  .dc-3col-grid { grid-template-columns: 1fr !important; }
  .dc-3col-grid > * { border-left: none !important; }

  /* Workspaces panel */
  .dc-workspace-grid { grid-template-columns: 1fr !important; }
  .dc-workspace-preview { display: none !important; }

  /* GEO featured card */
  .dc-geo-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 24px !important;
  }

  /* FAQ: stack, remove sticky */
  .dc-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .dc-faq-sticky { position: static !important; }

  /* Final CTA: stack, hide decorative visual */
  .dc-cta-inner { padding: 40px 24px !important; border-radius: 16px !important; }
  .dc-cta-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .dc-cta-visual { display: none !important; }

  /* Footer: 2 cols instead of 4 */
  .dc-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .dc-footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
}