/* ============================================================
   ZapCard website - deck-canonical design system
   Tokens mirror brand-kit/brand-kit-slides.jsx
   ============================================================ */
:root {
  --c-black:    #0A0A0B;
  --c-ink:      #111114;
  --c-graphite: #1A1A1E;
  --c-charcoal: #26262B;
  --c-steel:    #3A3A40;
  --c-ash:      #6E6E76;
  --c-silver:   #A8A8B0;
  --c-pearl:    #D4D4D8;
  --c-bone:     #E8E8EA;
  --c-paper:    #F5F5F7;
  --c-white:    #FFFFFF;
  --c-zap:      #1F6FEB;
  --c-zap-hi:   #3B82F6;
  --c-zap-glow: rgba(31,111,235,0.35);

  --f-display:  'Geist', system-ui, -apple-system, sans-serif;
  --f-mono:     'Geist Mono', ui-monospace, Menlo, monospace;

  --max:   1320px;
  --pad:   clamp(20px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-black);
  color: var(--c-bone);
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* GHL wraps our Custom HTML widget inside section/row/col ancestors
   whose .inner has max-width: 1170px set by the page-builder, plus
   20px section padding + 10px row padding + 10px col padding that
   pinches our layout AND leaves white bleed at the page edges.
   Zero them out so .zap-app fills the viewport edge-to-edge and our
   own --max + --pad drive the design. */
[id^="section-"]              { padding: 0 !important; margin: 0 !important; }
[id^="section-"] > .inner     { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
[id^="row-"]                  { padding: 0 !important; margin: 0 !important; }
[id^="row-"] > .inner         { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
[id^="col-"]                  { padding: 0 !important; margin: 0 !important; }
[id^="col-"] > .inner         { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
[class*="custom-code-"]       { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* GHL paints a full-width white "bgCover" backdrop and a white nav-menu
   panel on every page that shows around our content. Force them dark so
   any chrome that bleeds through the layout stays on-brand instead of
   flashing white gutters. */
.bgCover, .bg-fixed, .nav-menu-body, .hl_page-preview, .hl_page-preview--content {
  background: var(--c-black) !important;
  background-color: var(--c-black) !important;
}
html, body {
  background: var(--c-black) !important;
  background-color: var(--c-black) !important;
}

/* Wrapper that beats GHL's white container background. Our pages
   live inside a GHL Custom HTML widget, which is itself inside a
   page-wide white element. Without this wrapper, our body styles
   apply to the outer browser body but the visible page is still
   the white GHL chrome. .zap-app paints the dark theme onto our
   own element so it always wins. */
.zap-app {
  background: var(--c-black) !important;
  color: var(--c-bone) !important;
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  display: block;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   TYPE
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--c-white);
}
h1 { font-size: clamp(48px, 8vw, 96px); font-weight: 600; letter-spacing: -0.04em; }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
p  { color: var(--c-silver); }
.lead { font-size: clamp(17px, 1.7vw, 21px); color: var(--c-silver); max-width: 60ch; line-height: 1.5; }
.kicker {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  color: var(--c-zap);
  letter-spacing: 0.32em; text-transform: uppercase;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-silver);
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--c-zap);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(80px, 10vw, 120px) 0; position: relative; }
section + section { border-top: 1px solid var(--c-charcoal); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 10px;
  font-family: var(--f-display); font-weight: 500; font-size: 15px;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--c-zap); color: var(--c-white);
}
.btn-primary:hover {
  background: var(--c-zap-hi);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px var(--c-zap-glow);
}
.btn-ghost {
  background: transparent; color: var(--c-white);
  border-color: var(--c-charcoal);
}
.btn-ghost:hover { border-color: var(--c-steel); background: var(--c-graphite); }
.btn-large { padding: 18px 28px; font-size: 16px; }
.btn .arrow {
  width: 16px; height: 12px;
  display: inline-block;
}

/* ============================================================
   NAV
   ============================================================ */
nav.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(10,10,11,0.7);
  border-bottom: 1px solid var(--c-charcoal);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.lockup {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
}
.lockup .bolt-svg { width: 18px; height: 30px; flex-shrink: 0; }
.nav-links {
  display: flex; align-items: center; gap: 28px;
  color: var(--c-silver); font-size: 14px;
}
.nav-links a:hover { color: var(--c-white); }
.nav-links a[aria-current] { color: var(--c-white); }
.nav-secure {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; color: var(--c-silver);
  letter-spacing: 0.04em;
}
.nav-secure svg { width: 14px; height: 14px; }
/* nav mobile rules consolidated into end-of-file block */

/* ============================================================
   HERO (homepage)
   ============================================================ */
section.hero-home {
  min-height: 86vh;
  padding: 60px var(--pad) clamp(80px, 10vw, 120px);
  position: relative; overflow: hidden;
}
.hero-home .glow {
  position: absolute; right: -300px; top: -300px;
  width: 1100px; height: 1100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,111,235,0.22) 0%, transparent 60%);
  filter: blur(50px); pointer-events: none;
}
.hero-home-inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 64px; align-items: center; min-height: 78vh;
}
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--c-charcoal);
  background: var(--c-graphite);
  font-family: var(--f-mono);
  font-size: 12px; color: var(--c-silver);
  letter-spacing: 0.04em;
  margin-bottom: 32px;
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-zap);
  box-shadow: 0 0 12px var(--c-zap-glow);
}
.headline-accent { color: var(--c-zap); }
.subhead { font-size: clamp(17px, 1.6vw, 20px); color: var(--c-silver); margin-top: 28px; max-width: 540px; line-height: 1.5; }
.cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.trust {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--c-charcoal);
  font-family: var(--f-mono);
  font-size: 12px; color: var(--c-ash); letter-spacing: 0.04em;
  max-width: 480px;
}
.trust strong { color: var(--c-bone); font-weight: 500; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
section.page-header {
  padding: clamp(72px, 9vw, 110px) var(--pad) clamp(48px, 7vw, 80px);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 500px at 70% 0%, rgba(31,111,235,0.12), transparent 60%);
  pointer-events: none;
}
.page-header .wrap { position: relative; }
.page-header h1 { margin-top: 24px; max-width: 22ch; }
.page-header .lead { margin-top: 28px; }

/* ============================================================
   CARD VISUAL (the matte black NFC card with foil bolt)
   ============================================================ */
.card-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 480px;
}
.card-glow {
  position: absolute;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, var(--c-zap-glow) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.card {
  --w: 460px;
  width: var(--w); height: calc(var(--w) / 1.59);
  background: var(--c-ink); border-radius: 18px;
  box-shadow: 0 40px 80px -25px rgba(0,0,0,0.7),
              inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 25% 18%, rgba(255,255,255,0.05), transparent 60%);
}
.card .bolt-on-card {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.card .bolt-on-card svg { width: 78px; height: 130px; }
.card .nfc-glyph {
  position: absolute; bottom: 14px; right: 14px;
  opacity: 0.35; color: var(--c-silver);
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.card.small { --w: 340px; }
.card.tiny { --w: 220px; }
.card-tilt-left  { transform: rotate(-14deg); }
.card-tilt-right { transform: rotate(8deg); }
.card-tilt-soft  { transform: rotate(-6deg); }

/* Card showcase sections (#card / #teams) — tight, intentional layout. */
.card-section { padding: clamp(48px, 6vw, 72px) 0; }
.card-section .grid-2 { align-items: center; gap: 56px; }
.card-section .card-stage { min-height: 0; flex-direction: column; gap: 22px; padding: 8px 0; }
.card-section .card { --w: 380px; }
.card-section .card-glow { width: 380px; height: 380px; }
.card-caption { position: relative; z-index: 1; margin: 0; text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--c-silver); opacity: 0.78; }
.card-section .card-copy { align-self: center; }

/* ============================================================
   GENERIC GRIDS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 920px) {
  .grid-2 { grid-template-columns: 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .hero-home-inner { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
  .card { --w: 360px; }
}

/* ============================================================
   TILES / FEATURE CARDS
   ============================================================ */
.tile {
  background: var(--c-graphite);
  border: 1px solid var(--c-charcoal);
  border-radius: 14px;
  padding: 28px;
  transition: border-color 0.2s, transform 0.2s;
}
.tile:hover { border-color: var(--c-steel); }
.tile .tile-num {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  color: var(--c-zap);
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.tile h3 {
  font-size: 22px; margin-bottom: 10px; letter-spacing: -0.01em;
}
.tile p { color: var(--c-silver); font-size: 15px; line-height: 1.55; }
.tile .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(31,111,235,0.12);
  border: 1px solid rgba(31,111,235,0.25);
  border-radius: 10px;
  color: var(--c-zap);
  margin-bottom: 18px;
}

/* ============================================================
   SPEC LIST
   ============================================================ */
.spec-list {
  list-style: none; padding: 0; margin: 32px 0 0 0;
  border-top: 1px solid var(--c-charcoal);
}
.spec-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-charcoal);
  font-family: var(--f-mono);
  font-size: 13px; color: var(--c-silver);
  letter-spacing: 0.04em;
}
.spec-list li .label {
  color: var(--c-ash); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11px;
}
.spec-list li .val { color: var(--c-bone); text-align: right; }

/* ============================================================
   PRICING
   ============================================================ */
.tier {
  position: relative;
  background: var(--c-graphite);
  border: 1px solid var(--c-charcoal);
  border-radius: 18px;
  padding: 36px 32px;
}
.tier.featured {
  border-color: rgba(31,111,235,0.4);
  background: linear-gradient(180deg, rgba(31,111,235,0.08), var(--c-graphite));
  box-shadow: 0 30px 80px -30px var(--c-zap-glow);
}
.tier .tier-flag {
  position: absolute; top: -12px; left: 32px;
  background: var(--c-zap); color: var(--c-white);
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em;
}
.tier h3 {
  font-size: 22px; margin-bottom: 10px;
}
.tier .amount {
  display: flex; align-items: baseline; gap: 6px;
  margin: 14px 0 24px;
  font-family: var(--f-display);
  font-size: 56px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--c-white);
}
.tier .amount small {
  font-size: 16px; font-weight: 400; color: var(--c-ash);
  letter-spacing: 0;
}
.tier ul {
  list-style: none; padding: 0;
  display: grid; gap: 12px;
  margin-bottom: 28px;
  font-size: 14px; color: var(--c-pearl);
}
.tier ul li {
  display: flex; align-items: flex-start; gap: 10px;
}
.tier ul li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-zap); margin-top: 8px; flex-shrink: 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--c-charcoal);
}
.faq-item summary {
  cursor: pointer; padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; font-weight: 500; color: var(--c-white);
  list-style: none; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-family: var(--f-mono); font-size: 22px; color: var(--c-ash);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding: 0 0 24px 0; color: var(--c-silver); font-size: 15px; line-height: 1.6; max-width: 75ch; }

/* ============================================================
   FORMS
   ============================================================ */
.form {
  margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 480px;
}
.form input[type=email], .form input[type=text], .form input[type=number] {
  flex: 1; min-width: 200px;
  background: var(--c-graphite); border: 1px solid var(--c-charcoal);
  border-radius: 10px; padding: 14px 16px;
  color: var(--c-white); font-size: 14px;
  transition: border-color 0.2s;
}
.form input:focus {
  outline: none; border-color: var(--c-zap);
}
.form-note {
  margin-top: 14px; font-family: var(--f-mono);
  font-size: 11px; color: var(--c-ash); letter-spacing: 0.04em;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
section.cta-section {
  padding: 120px var(--pad);
  text-align: center;
  background: var(--c-black);
  position: relative; overflow: hidden;
}
.cta-section .glow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31,111,235,0.18) 0%, transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.cta-section .inner { max-width: 720px; margin: 0 auto; position: relative; }
.cta-section h2 { font-size: clamp(48px, 6vw, 80px); letter-spacing: -0.03em; }
.cta-section .subhead { margin: 28px auto 36px; font-size: 19px; }

/* ============================================================
   TABLE
   ============================================================ */
table.spec-table {
  width: 100%; max-width: 720px;
  border-collapse: collapse;
  margin-top: 24px;
}
table.spec-table th, table.spec-table td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--c-charcoal);
  font-size: 14px;
}
table.spec-table th {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ash); font-weight: 500;
}
table.spec-table td { color: var(--c-bone); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site {
  padding: 56px var(--pad) 40px;
  background: var(--c-black);
  border-top: 1px solid var(--c-charcoal);
  color: var(--c-ash);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.04em;
}
footer.site .inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
footer.site .footer-legal {
  max-width: var(--max); margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-charcoal);
  text-align: center;
  font-size: 11px; color: var(--c-ash);
  letter-spacing: 0.04em; line-height: 1.6;
}
footer.site .footer-legal strong { color: var(--c-bone); font-weight: 500; }
footer.site h4 {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  color: var(--c-ash); letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
footer.site a { display: block; padding: 4px 0; color: var(--c-silver); }
footer.site a:hover { color: var(--c-white); }
footer.site .meta { color: var(--c-ash); margin-top: 14px; }
footer.site .lockup { color: var(--c-white); }

/* "For your industry" — 100+ SEO landing links kept for crawlers/users but
   capped into a compact multi-column, gently-scrollable block so the footer
   (and the whole page) reads as a finished length, not an endless wall. */
footer.site .footer-col-for { grid-column: 1 / -1; }
footer.site .footer-for-links {
  column-width: 150px; column-gap: 28px;
  max-height: 188px; overflow-y: auto;
  padding: 4px 8px 4px 0;
  border: 1px solid var(--c-charcoal); border-radius: 10px;
  background: rgba(255,255,255,0.012);
  -webkit-mask-image: linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
          mask-image: linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
}
footer.site .footer-for-links a { break-inside: avoid; padding: 3px 0 3px 10px; }
footer.site .footer-for-links::-webkit-scrollbar { width: 7px; }
footer.site .footer-for-links::-webkit-scrollbar-thumb { background: var(--c-charcoal); border-radius: 4px; }
/* footer mobile rules consolidated into end-of-file block */

/* ============================================================
   PRODUCT MOCK (checkout)
   ============================================================ */
.product-mock {
  width: 80px; height: 80px;
  background: var(--c-ink); border: 1px solid var(--c-charcoal);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.product-mock svg { width: 36px; height: 60px; }

/* ============================================================
   MOBILE OVERRIDES - kept at end of file so source order wins
   over base rules at the same specificity. Two breakpoints:
   <= 760px (phone landscape + small tablet)
   <= 480px (typical phone portrait, 320-480px)
   ============================================================ */

@media (max-width: 760px) {
  /* Nav: only logo + primary CTA */
  .nav-links a:not(.btn-primary) { display: none; }
  .nav-links { gap: 0; }
  .nav-inner { padding: 14px var(--pad); gap: 12px; }
  .lockup { font-size: 17px; }
  .btn { padding: 10px 18px; font-size: 14px; }
  .btn-large { padding: 14px 22px; font-size: 15px; }

  /* Hero - tighter vertical rhythm */
  section.hero-home { padding-top: 40px; min-height: auto; }
  .hero-home-inner { gap: 36px; }
  .pill { font-size: 11px; padding: 7px 12px; margin-bottom: 24px; }
  .subhead { margin-top: 22px; }
  .cta-row { margin-top: 28px; }
  .trust { margin-top: 32px; padding-top: 20px; }

  /* Card stage shrinks */
  .card-stage { min-height: 360px; }
  .card-glow { width: 320px; height: 320px; }
  .card-section { padding: clamp(40px, 9vw, 60px) 0; }
  .card-section .grid-2 { gap: 32px; }
  .card-section .card-stage { min-height: 0; }
  .card-section .card { --w: 320px; }
  .card-section .card-glow { width: 300px; height: 300px; }

  /* Pricing layout collapses to one column */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .checkout-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .tier { padding: 28px 22px; }
  .tier .amount { font-size: 44px; }

  /* Checkout product row stacks */
  .checkout-product-row { flex-wrap: wrap; gap: 14px !important; }
  .checkout-product-row .product-mock { width: 64px; height: 64px; }
  .checkout-product-row .product-mock svg { width: 28px; height: 48px; }

  /* Section padding tighter on mobile */
  section { padding: clamp(56px, 12vw, 80px) 0; }

  /* Footer goes 2-col on tablet/landscape phone */
  footer.site .inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .card { --w: 300px; }
  .card .bolt-on-card svg { width: 60px; height: 100px; }
  .card-stage { min-height: 320px; }
  .card-glow { width: 280px; height: 280px; }

  /* Spec list - value wraps below label so long values never overflow.
     Both rules need !important to defeat the base .spec-list li .val
     rule (text-align:right) declared later in source. */
  .spec-list li { flex-wrap: wrap; gap: 4px 16px; padding: 12px 0 !important; }
  .spec-list li .val { text-align: left !important; flex-basis: 100% !important; font-size: 13px; }

  /* CTA buttons full width and stacked */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: center; }

  /* Footer single column on phone portrait */
  footer.site .inner { grid-template-columns: 1fr !important; gap: 28px; }
  footer.site a { word-break: break-word; overflow-wrap: anywhere; }

  /* Tier amount tighter */
  .tier .amount { font-size: 38px; }
  .tier { padding: 24px 20px; }

  /* Inline-styled section headlines that use big top margin should not push too far on tiny screens */
  section h2[style*="margin-top:18px"] { margin-top: 14px !important; }

  /* Page header - tighter padding so phone screens see content sooner */
  section.page-header { padding-top: clamp(48px, 12vw, 72px); padding-bottom: clamp(28px, 7vw, 48px); }
  .page-header h1 { max-width: 100%; }
}

/* ============================================================
   HERO 3D CARD - scroll-driven rotation, two faces (bolt one side)
   Set last so transforms aren't fought by base .card rules.
   --card-rotation + --card-tilt updated by inline script
   in index.html on scroll (requestAnimationFrame).
   ============================================================ */

.card-stage-3d {
  perspective: 1500px;
  perspective-origin: 50% 35%;
  /* keep the centered flex layout from .card-stage */
}

.card-3d-perspective {
  width: 460px;
  height: 290px; /* 460 / 1.59 = credit-card aspect */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  position: relative;
}

.card-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* JS-driven rotation. Default tilt of -8deg so it reads as a card not a slab when at rest. */
  transform: rotateX(var(--card-tilt, -8deg)) rotateY(var(--card-rotation, 0deg));
  will-change: transform;
  transition: transform 0.06s linear;
}

.card-3d-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--c-ink);
  box-shadow: 0 40px 80px -25px rgba(0,0,0,0.7),
              inset 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-3d-face::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 25% 18%, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}

/* FRONT - bolt + NFC corner label */
.card-3d-front {
  transform: rotateY(0deg);
}
.card-3d-front .bolt-on-card {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.card-3d-front .bolt-on-card svg { width: 78px; height: 130px; }
.card-3d-front .nfc-glyph {
  position: absolute; bottom: 14px; right: 14px;
  opacity: 0.35; color: var(--c-silver);
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* BACK - minimal: ZAPCARD wordmark + voltage rule + url */
.card-3d-back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
}
.card-3d-back .card-back-mark {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.45em;
  text-indent: 0.45em; /* visual centering with letter-spacing */
  color: var(--c-pearl);
  text-transform: uppercase;
}
.card-3d-back .card-back-rule {
  width: 30px; height: 1px;
  background: var(--c-zap);
  opacity: 0.7;
}
.card-3d-back .card-back-url {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--c-ash);
}

/* Mobile sizing - match existing .card breakpoints so layout stays consistent */
@media (max-width: 920px) {
  .card-3d-perspective { width: 360px; height: 226px; }
  .card-3d-front .bolt-on-card svg { width: 68px; height: 113px; }
  .card-3d-back .card-back-mark { font-size: 18px; letter-spacing: 0.4em; }
}
@media (max-width: 480px) {
  .card-3d-perspective { width: 300px; height: 188px; }
  .card-3d-front .bolt-on-card svg { width: 60px; height: 100px; }
  .card-3d-back .card-back-mark { font-size: 16px; letter-spacing: 0.36em; }
  .card-3d-back .card-back-url { font-size: 10px; }
}

/* Disable rotation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card-3d { transition: none; transform: rotateX(-8deg) rotateY(0deg) !important; }
}

/* ============================================================
   INTERACTIVE DYNAMICS * 2026-05-12
   Scroll reveals, cursor-aware glow, hover lift, voltage pulse.
   All motion is restrained: 300-600ms, ease-out, voltage-blue accent.
   ============================================================ */

/* Reveal-on-scroll: opacity 0 + translateY 18px -> 1 + 0 when .in-view */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.16,1,.3,1),
              transform 620ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* Stagger spec-list rows in sequence */
.spec-list li.reveal { transition-delay: calc(var(--i, 0) * 70ms); }
/* Stagger feature/step tiles */
.grid-3 .tile.reveal:nth-child(1) { transition-delay: 0ms; }
.grid-3 .tile.reveal:nth-child(2) { transition-delay: 90ms; }
.grid-3 .tile.reveal:nth-child(3) { transition-delay: 180ms; }

/* Tile hover lift + voltage glow */
.tile {
  position: relative;
  transition: transform 360ms cubic-bezier(.16,1,.3,1),
              border-color 360ms ease,
              box-shadow 360ms ease;
}
.tile:hover {
  transform: translateY(-5px);
  border-color: rgba(31, 111, 235, 0.45);
  box-shadow:
    0 16px 48px -12px rgba(31, 111, 235, 0.28),
    0 0 0 1px rgba(31, 111, 235, 0.18) inset;
}
.tile .icon { transition: transform 360ms ease, background 360ms ease, box-shadow 360ms ease; }
.tile:hover .icon {
  transform: scale(1.08);
  background: rgba(31, 111, 235, 0.22);
  box-shadow: 0 0 18px -2px rgba(31, 111, 235, 0.45);
}

/* CTA button glow + scale on hover (strengthens existing .btn-primary:hover) */
.btn-primary { transition: background 180ms ease, transform 240ms cubic-bezier(.16,1,.3,1), box-shadow 240ms ease; }
.btn-primary:hover {
  transform: translateY(-2px) scale(1.025);
  box-shadow:
    0 0 32px -4px rgba(31, 111, 235, 0.55),
    0 14px 36px -10px var(--c-zap-glow);
}
/* Idle voltage pulse on the BIG hero CTA only */
@keyframes voltage-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 111, 235, 0.0); }
  50%      { box-shadow: 0 0 26px 2px rgba(31, 111, 235, 0.32); }
}
.hero-home .btn-primary.btn-large { animation: voltage-pulse 3.6s ease-in-out infinite; }
.hero-home .btn-primary.btn-large:hover { animation: none; }

/* Ghost button gets a subtle voltage edge on hover too */
.btn-ghost { transition: background 200ms ease, border-color 240ms ease, transform 240ms cubic-bezier(.16,1,.3,1); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(31, 111, 235, 0.5); }

/* Cursor-aware radial glow - sits behind everything, screen-blend so it only brightens darks */
.voltage-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(31, 111, 235, 0.16) 0%,
              rgba(31, 111, 235, 0.08) 25%,
              transparent 60%);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: opacity 280ms ease;
  opacity: 0;
  will-change: transform;
}
.voltage-cursor.active { opacity: 1; }

/* Hero photo stage: brighten subtly on hover */
.hero-photo-stage { transition: filter 380ms ease; }
.hero-photo-stage:hover { filter: brightness(1.04) saturate(1.04); }

/* ============================================================
   HERO CARD FAN — rotating 3-card stack (auto, touch-safe)
   ============================================================ */
.hero-card-fan { position: relative; perspective: 1300px; min-height: 480px; }
.hero-card-fan .card-glow { width: 520px; height: 520px; animation: fan-glow-pulse 5.5s ease-in-out infinite; }
.fan-card {
  position: absolute; top: 50%; left: 50%;
  width: 340px; aspect-ratio: 1.586 / 1; border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.07), transparent 50%),
    linear-gradient(135deg, #18181b 0%, #050506 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.04);
  display: grid; place-items: center;
}
.fan-card .fan-bolt { width: 64px; height: 107px; opacity: .9; }
.fan-card--back { width: 300px; transform: translate(-58%, -50%) rotate(-15deg) scale(.9); z-index: 1; opacity: .42; filter: blur(.4px); }
.fan-card--mid  { width: 300px; transform: translate(-42%, -50%) rotate(11deg) scale(.93); z-index: 2; opacity: .62; }
.fan-card--front { transform: translate(-50%, -50%) rotate(-5deg); z-index: 3; animation: fan-front-float 6s ease-in-out infinite; }
.fan-card-spin {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform-style: preserve-3d; backface-visibility: visible;
  animation: fan-spin 9s linear infinite;
}
.fan-card-tag {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-silver); opacity: .55;
}
@keyframes fan-spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes fan-front-float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) translateY(0); }
  50%      { transform: translate(-50%, -52%) rotate(-5deg) translateY(-10px); }
}
@keyframes fan-glow-pulse { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@media (max-width: 920px) {
  .hero-card-fan { min-height: 360px; }
  .fan-card { width: 300px; }
  .fan-card--back, .fan-card--mid { width: 264px; }
}
@media (max-width: 560px) {
  .fan-card { width: 264px; }
  .fan-card--back { transform: translate(-62%, -50%) rotate(-13deg) scale(.88); }
  .fan-card--mid  { transform: translate(-38%, -50%) rotate(10deg) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .fan-card-spin, .fan-card--front, .hero-card-fan .card-glow { animation: none; }
}

/* Section reveals: kick the headings + leads + kickers */
h2.reveal, .lead.reveal, .kicker.reveal { will-change: opacity, transform; }

/* Reduced-motion: kill all custom animations */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .hero-home .btn-primary.btn-large { animation: none; }
  .voltage-cursor { display: none; }
}

/* ============================================================
   EXAMPLES GRID * 2026-05-12
   Industry showcase: 6 example profile cards on homepage.
   ============================================================ */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 56px;
}
@media (max-width: 920px) { .examples-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .examples-grid { grid-template-columns: 1fr; } }

.example-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
  background: var(--c-graphite);
  border: 1px solid var(--c-charcoal);
  border-radius: 14px;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: var(--c-bone);
  transition: transform 360ms cubic-bezier(.16,1,.3,1),
              border-color 360ms ease,
              box-shadow 360ms ease;
  will-change: transform;
}
.example-card:hover {
  transform: translateY(-5px);
  border-color: rgba(31, 111, 235, 0.45);
  box-shadow:
    0 16px 48px -12px rgba(31, 111, 235, 0.30),
    0 0 0 1px rgba(31, 111, 235, 0.18) inset;
}

.example-industry {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  color: var(--c-zap);
  letter-spacing: 0.24em; text-transform: uppercase;
}

.example-meta { display: flex; align-items: center; gap: 14px; }
.example-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-ink), var(--c-charcoal));
  border: 1px solid var(--c-charcoal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-size: 16px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--c-bone);
  flex: none;
  box-shadow: 0 4px 14px -4px rgba(31, 111, 235, 0.18);
}
.example-avatar::before { content: attr(data-init); }
.example-text { min-width: 0; }
.example-name {
  font-family: var(--f-display); font-weight: 600;
  font-size: 18px; color: var(--c-white);
  letter-spacing: -0.015em; line-height: 1.2;
}
.example-role {
  font-size: 13px; color: var(--c-bone);
  margin-top: 2px;
}
.example-org {
  font-size: 12px; color: var(--c-ash);
  font-family: var(--f-mono); letter-spacing: 0.03em;
  margin-top: 2px;
}

.example-links {
  display: flex; gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-charcoal);
}
.ex-link {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px;
  background: rgba(31, 111, 235, 0.10);
  border: 1px solid rgba(31, 111, 235, 0.20);
  border-radius: 8px;
  color: var(--c-zap);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.example-card:hover .ex-link { background: rgba(31, 111, 235, 0.18); }
.ex-link svg { width: 16px; height: 16px; }

.example-cta {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  color: var(--c-zap);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: -4px;
  transition: gap 220ms ease;
}
.example-card:hover .example-cta { color: var(--c-zap-hi); }

/* ============================================================
   SCROLL FX — progress bar · bolt indicator · section reveals
   Added 2026-06-10 via scroll-fx.js (injected by worker)
   ============================================================ */

/* Thin top progress bar */
#zap-top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-zap) 0%, var(--c-zap-hi) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}
/* CSS-native scroll-linked animation (Chrome 115+, Firefox 110+, Safari 18+) */
@supports (animation-timeline: scroll()) {
  #zap-top-bar {
    animation: _zfx-bar linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes _zfx-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Bolt fill indicator — fixed bottom-right corner */
#zap-bolt-prog {
  position: fixed; bottom: 26px; right: 22px;
  width: 26px; height: 44px;
  z-index: 200; pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#zap-bolt-prog.show { opacity: 1; }
@media (max-width: 640px) { #zap-bolt-prog { display: none; } }

/* Card reveal — applied via JS data-r + data-d attributes */
@media (prefers-reduced-motion: no-preference) {
  [data-r] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.52s cubic-bezier(.22,1,.36,1),
                transform 0.52s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }
  [data-r].in { opacity: 1; transform: none; }
  [data-r][data-d="2"] { transition-delay: 70ms; }
  [data-r][data-d="3"] { transition-delay: 140ms; }
  [data-r][data-d="4"] { transition-delay: 210ms; }
}