/* Marketing — layout helpers, responsive breakpoints, motion.
   Tokens/base come from the design system's styles.css. */

@keyframes gzRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes gzRiseT { from { transform: translateY(14px); } to { transform: none; } }

/* entrance: content is always visible (never opacity:0) so it survives
   print, reduced-motion, and static capture; motion is a gentle settle. */
.mkt-rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-rise { animation: gzRiseT 700ms cubic-bezier(.2,.7,.2,1) both; }
  .mkt-rise--2 { animation-duration: 800ms; animation-delay: 120ms; }
}

html, body { margin: 0; }
body { overflow-x: hidden; background: var(--surface-page); }

/* faint engineering grid wash behind the page */
.mkt-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--text-strong) 4%, transparent) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, color-mix(in srgb, var(--text-strong) 4%, transparent) 1px, transparent 1px) 0 0 / 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, black 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, black 25%, transparent 78%);
}
#app { position: relative; z-index: 1; }

/* responsive visibility */
.mkt-show-md { display: none !important; }

/* nav collapses to a hamburger earlier than the layout grids */
@media (max-width: 1040px) {
  .mkt-hide-md { display: none !important; }
  .mkt-show-md { display: flex !important; }
}

@media (max-width: 900px) {
  .mkt-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .mkt-ads-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .mkt-agency-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .mkt-feat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mkt-step-grid { grid-template-columns: 1fr !important; }
  .mkt-legal-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .mkt-toc { display: none !important; }
  .mkt-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 620px) {
  .mkt-hide-sm { display: none !important; }
  .mkt-feat-grid { grid-template-columns: 1fr !important; }
  .mkt-footer-grid { grid-template-columns: 1fr !important; }
  section { padding-left: 22px !important; padding-right: 22px !important; }
}

/* the reveal utility is defined in the DS base.css (.gz-reveal / .in) */

/* live metrics: pulse dot + skeleton shimmer + responsive grid */
.mkt-livedot { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .mkt-livedot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 1px solid var(--success); opacity: 0.6; animation: mktPulse 2s var(--ease-out) infinite;
  }
}
@keyframes mktPulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.1); opacity: 0; } 100% { opacity: 0; } }

.mkt-shimmer { position: relative; overflow: hidden; background: var(--surface-sunken); }
.mkt-shimmer::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-strong) 8%, transparent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .mkt-shimmer::after { animation: mktShimmer 1.4s infinite; }
}
@keyframes mktShimmer { 100% { transform: translateX(100%); } }

@media (max-width: 900px) { .mkt-metric-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .mkt-metric-grid { grid-template-columns: 1fr !important; } }

/* ---- hero connect hub (3D) ---- */
.hub-wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hub-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; perspective: 820px; }
.hub-3d { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-9deg) rotateX(6deg); will-change: transform; }
.hub-floor {
  position: absolute; left: 50%; top: 62%; width: 46%; height: 20%;
  transform: translate(-50%, -50%) translateZ(-60px);
  background: radial-gradient(ellipse at center, rgba(47,144,239,0.22), transparent 70%);
  filter: blur(6px); border-radius: 50%; pointer-events: none;
}
.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: translateZ(0.1px); }
.hub-line {
  stroke: var(--accent); stroke-width: 0.5; opacity: 0.35;
  stroke-dasharray: 1; stroke-dashoffset: 0;   /* base: drawn */
}
[data-theme="dark"] .hub-line { stroke: var(--blue-400); opacity: 0.45; }
.flow-dot { opacity: 0; }
.flow-in { fill: var(--accent); }
.flow-out { fill: var(--success); }
[data-theme="dark"] .flow-in { fill: var(--blue-300); }
.hub-ring { fill: none; stroke: var(--accent); stroke-width: 0.6; opacity: 0; }
[data-theme="dark"] .hub-ring { stroke: var(--blue-400); }

.hub-node {
  position: absolute; transform: translate(-50%, -50%) translateZ(var(--z, 0px));
  width: 47px; height: 47px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--surface-card); color: var(--brand, var(--text-strong));
  border: 1px solid color-mix(in srgb, var(--brand, #888) 34%, var(--border-default));
  box-shadow: var(--shadow-md), 0 2px 0 color-mix(in srgb, var(--brand, #888) 18%, transparent);
}
.hub-node--grad {
  background: linear-gradient(135deg, #feda75 0%, #fa7e1e 32%, #d62976 66%, #962fbf 100%);
  color: #fff; border-color: transparent;
}
.hub-node__ic { display: grid; place-items: center; }
.hub-ping { position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--brand, var(--accent)); opacity: 0; }
.hub-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(52px);
  width: 68px; height: 68px; border-radius: 20px;
  display: grid; place-items: center; z-index: 2;
  background: var(--accent); color: #fff;
  box-shadow: var(--inset-glossy), 0 16px 34px rgba(47,144,239,0.5);
}
.hub-core__mark { display: grid; place-items: center; color: #fff; line-height: 0; }
.hub-core__spark { position: absolute; top: -7px; right: -7px; color: var(--amber-500); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }

/* status chips — pop right beside the core, floating forward */
.hub-chips { position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none; }
.hub-chip {
  position: absolute; left: 0; top: 0;
  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)));
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-medium);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill); padding: 5px 11px; box-shadow: var(--shadow-lg); opacity: 0;
}
.hub-caption {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--text-muted); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 7px 15px;
}
.hub-caption svg { color: var(--accent); }

/* ---- ATOM MODEL: nucleus + orbiting electrons in 3D ---- */
.atom { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-8deg) rotateX(6deg); will-change: transform; }
.nucleus {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; z-index: 3; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 34% 30%, #eaf3ff, var(--accent) 52%, var(--accent-active));
  box-shadow: var(--inset-glossy), 0 0 30px 5px rgba(47,144,239,0.55);
}
.nucleus::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--accent-soft-bd); opacity: 0.55; }
.nucleus__spark { display: grid; place-items: center; line-height: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 28px; line-height: 1; color: #fff; }

.orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateY(var(--ty)); }
.orbit__ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--rad) * 2); height: calc(var(--rad) * 2);
  margin: calc(var(--rad) * -1) 0 0 calc(var(--rad) * -1);
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
[data-theme="dark"] .orbit__ring { border-color: color-mix(in srgb, var(--blue-400) 48%, transparent); }
.orbit__spin { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.electron { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotate(var(--a)) translateX(var(--rad)); }
.e-a { transform-style: preserve-3d; transform: rotate(calc(-1 * var(--a))); }
.e-spin { transform-style: preserve-3d; }
.e-tilt { transform-style: preserve-3d; transform: rotateY(calc(-1 * var(--ty))) rotateX(calc(-1 * var(--tx))); }
.electron-tile {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-card); color: var(--brand, var(--text-strong));
  border: 1px solid color-mix(in srgb, var(--brand, #888) 34%, var(--border-default));
  box-shadow: var(--shadow-md);
}
.electron-tile.grad { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 32%, #d62976 66%, #962fbf 100%); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .orbit__spin { animation: atomSpin var(--dur) linear infinite; }
  .e-spin { animation: atomSpinRev var(--dur) linear infinite; }
  .nucleus { animation: hubCore 3s ease-in-out infinite; }
  .hub-caption { opacity: 0; animation: hubFade 0.6s var(--ease-out) forwards 1.2s; }
}
@media (prefers-reduced-motion: reduce) { .atom { transform: rotateY(-8deg) rotateX(6deg); } }
@keyframes atomSpin { to { transform: rotate(360deg); } }
@keyframes atomSpinRev { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .hub-line { stroke-dashoffset: 1; animation: hubDraw 0.7s var(--ease-out) forwards; animation-delay: calc(var(--d) * 0.12s + 0.15s); }
  .hub-node {
    opacity: 0; animation: hubPop 0.55s var(--ease-out) forwards, hubRecv 2.4s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.12s + 0.55s), calc(var(--d) * 0.48s + 2.3s);
  }
  .hub-node__ic { animation: hubBob 4.5s ease-in-out infinite; animation-delay: calc(var(--d) * 0.6s); }
  .hub-ping { animation: hubPing 2.4s var(--ease-out) infinite; animation-delay: calc(var(--d) * 0.48s + 2.3s); }
  .hub-core { animation: hubCore 3s ease-in-out infinite; }
  .hub-core__mark { animation: hubSpark 3.4s ease-in-out infinite; transform-origin: center; }
  .hub-chip { animation: hubChip 9s ease-in-out infinite; animation-delay: calc(var(--i) * 3s + 2s); }
  .hub-caption { opacity: 0; animation: hubFade 0.6s var(--ease-out) forwards 1.4s; }
}
/* reduced-motion: flat stage, no flow, static graph */
@media (prefers-reduced-motion: reduce) { .hub-flow { display: none; } .hub-3d { transform: rotateY(-9deg) rotateX(6deg); } .hub-floor { display: none; } }

@keyframes hubTilt {
  0%, 100% { transform: rotateX(6deg) rotateY(-9deg); }
  50% { transform: rotateX(2deg) rotateY(9deg); }
}
@keyframes hubDraw { to { stroke-dashoffset: 0; } }
@keyframes hubPop { from { opacity: 0; transform: translate(-50%, -50%) translateZ(var(--z, 0px)) scale(0.55); } to { opacity: 1; transform: translate(-50%, -50%) translateZ(var(--z, 0px)) scale(1); } }
/* flash a brand-colored ring the moment an inbound message arrives */
@keyframes hubRecv {
  0%, 100% { box-shadow: var(--shadow-md), 0 2px 0 color-mix(in srgb, var(--brand, #888) 18%, transparent); border-color: color-mix(in srgb, var(--brand, #888) 34%, var(--border-default)); }
  5% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, var(--accent)) 26%, transparent), var(--shadow-md); border-color: var(--brand, var(--accent)); }
  22% { box-shadow: var(--shadow-md), 0 2px 0 color-mix(in srgb, var(--brand, #888) 18%, transparent); border-color: color-mix(in srgb, var(--brand, #888) 34%, var(--border-default)); }
}
@keyframes hubBob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@keyframes hubPing { 0% { opacity: 0.55; transform: scale(1); } 45% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hubCore {
  0%, 100% { box-shadow: var(--inset-glossy), 0 16px 34px rgba(47,144,239,0.5); }
  50% { box-shadow: var(--inset-glossy), 0 18px 50px rgba(47,144,239,0.8); }
}
@keyframes hubSpark { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.3) rotate(20deg); opacity: 0.85; } }
@keyframes hubChip {
  0%, 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 8px)) scale(0.9); }
  6%, 26% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
  32% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) - 8px)) scale(0.95); }
}
@keyframes hubFade { to { opacity: 1; } }