/* Qualiflai Demo Center
   Shared stylesheet for demo/*.html. Tokens, nav, hero, buttons and footer are
   lifted from the house pages (index.html, trades.html) so the Demo Center
   reads as the same site. Demo-only components are grouped further down.
   The root pages keep their inline <style>; this file exists because four demo
   pages share one layout and duplicating it four times would drift. */

:root {
  --teal: #1D9E75;
  --teal-light: #5DCAA5;
  --teal-dark: #0F6E56;
  --bg: #0C0C0B;
  --bg2: #141413;
  --bg3: #1A1A18;
  --border: rgba(255,255,255,0.08);
  --text: #F0EFE9;
  --muted: #888880;
  --accent-line: 3px solid var(--teal);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* FOCUS AND SKIP LINK
   One authored focus ring for every interactive element, so keyboard focus is
   the brand's rather than each browser's default. Inside the closing panel the
   ground is teal, where a teal ring is invisible, so it goes white there. */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.close-cta :focus-visible { outline-color: #fff; }

/* Read by a screen reader, never drawn. Used by the skip link before it is
   focused and by the replay description. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* --teal-dark, not --teal: white on --teal computes 3.39:1, under the 4.5:1
   floor for text this size. On --teal-dark it computes 6.20:1. */
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--teal-dark); color: #fff;
  font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 12px 20px;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(12,12,11,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 120px;
}
.nav-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 22px; letter-spacing: .04em;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
}
.nav-logo img { height: 109px; width: auto; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 14px; color: var(--muted); text-decoration: none;
  transition: color .2s; font-weight: 400;
}
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-links a.nav-cta, .nav-cta {
  background: var(--teal); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px;
  padding: 10px 22px; border: none; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background .2s;
}
.nav-links a.nav-cta:hover { background: var(--teal-light); color: #fff; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: .2s; }

/* HERO */
.hero {
  padding: 180px 0 100px;
  text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle at center, rgba(29,158,117,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 28px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; display: block;
  width: 24px; height: 2px; background: var(--teal);
}
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: clamp(46px, 7vw, 84px);
  line-height: .95; letter-spacing: -.01em;
  text-transform: uppercase; margin-bottom: 28px;
}
.hero h1 em { color: var(--teal); font-style: normal; display: block; }
.hero-sub {
  font-size: 19px; font-weight: 300; color: var(--muted);
  max-width: 640px; margin: 0 auto 44px; line-height: 1.65;
}
.hero-sub strong { color: var(--text); font-weight: 500; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; }

.hero-band {
  margin-top: 56px; position: relative; z-index: 1;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  height: 300px; overflow: hidden;
}
.hero-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; opacity: .72; }

/* BUTTONS */
.btn-primary {
  background: var(--teal); color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px;
  padding: 16px 32px; border: none; cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: background .2s, transform .15s;
  letter-spacing: .01em;
  position: relative; overflow: hidden;
}
.btn-primary:hover { background: var(--teal-light); transform: translateY(-1px); }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover::after { left: 140%; }
.btn-outline {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px;
  padding: 15px 30px; text-decoration: none; display: inline-block;
  transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
.btn-secondary {
  color: var(--muted); font-size: 14px; font-weight: 400;
  text-decoration: none; border-bottom: 1px solid var(--border);
  padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.btn-secondary:hover { color: var(--text); border-color: var(--muted); }

/* SECTION SHARED */
section { padding: 100px 0; }
.section-alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-label {
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; display: block;
  width: 20px; height: 2px; background: var(--teal); flex-shrink: 0;
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05; text-transform: uppercase; margin-bottom: 20px;
}
.section-sub {
  font-size: 17px; font-weight: 300; color: var(--muted);
  max-width: 620px; line-height: 1.65;
}

/* PRODUCT CARDS (demo home) */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
.product-card {
  background: var(--bg); padding: 44px 34px;
  border-top: 3px solid var(--border);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-top-color .3s, transform .25s cubic-bezier(.16,1,.3,1), background .3s;
}
.product-card:hover { border-top-color: var(--teal); transform: translateY(-6px); background: var(--bg3); }
.product-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 28px; text-transform: uppercase;
  margin-bottom: 6px; line-height: 1.1;
}
.product-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.product-desc { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; flex: 1; }
.product-link {
  font-size: 13px; font-weight: 500; color: var(--teal);
  letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.product-card:hover .product-link { gap: 10px; }

/* A DAY WITH IT: numbered walkthrough steps */
.walk { display: flex; flex-direction: column; gap: 2px; margin-top: 60px; }
.walk-step {
  background: var(--bg2); border-top: var(--accent-line);
  padding: 44px 40px;
  display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start;
}
.walk-step.has-media { grid-template-columns: 96px 1fr 1fr; }
.walk-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 64px; line-height: .9;
  color: rgba(255,255,255,0.10);
}
.walk-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 24px; text-transform: uppercase;
  margin-bottom: 12px; line-height: 1.1;
}
.walk-text { font-size: 15px; color: var(--muted); line-height: 1.7; }
.walk-text + .walk-text { margin-top: 12px; }
.walk-media { align-self: stretch; }
.walk-media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; opacity: .8; border: 1px solid var(--border); }

/* NOTIFICATION LADDER */
.ladder { list-style: none; margin-top: 28px; border-left: 1px solid var(--border); padding-left: 0; }
.ladder li { position: relative; padding: 0 0 22px 28px; }
.ladder li:last-child { padding-bottom: 0; }
.ladder li::before {
  content: ''; position: absolute; left: -5px; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 4px var(--bg2);
}
.ladder-rung {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 17px; text-transform: uppercase;
  letter-spacing: .03em; margin-bottom: 3px;
}
.ladder-detail { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* TIMELINE (QualiConnect renewal ladder) */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 60px; }
.timeline-item {
  background: var(--bg); padding: 32px 24px;
  border-top: 3px solid var(--border); transition: border-top-color .3s;
}
.timeline-item:hover { border-top-color: var(--teal); }
.timeline-when {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 12px;
}
.timeline-what {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 19px; text-transform: uppercase;
  line-height: 1.15; margin-bottom: 10px;
}
.timeline-detail { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* INTEGRATION BADGES */
.badge-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.badge {
  border: 1px solid var(--border); background: var(--bg2);
  font-size: 13px; color: var(--muted); letter-spacing: .02em;
  padding: 11px 18px; transition: border-color .2s, color .2s;
}
.badge:hover { border-color: var(--teal); color: var(--text); }
.badge.badge-open { border-style: dashed; color: var(--teal); }

/* FEATURE / REACH GRID */
.reach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 60px; }
.reach-card { background: var(--bg); padding: 34px; border-top: 1px solid var(--border); transition: border-top-color .2s; }
.reach-card:hover { border-top-color: var(--teal); }
.reach-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 10px;
}
.reach-text { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* PRICING LINE */
.price-block {
  margin-top: 44px; background: var(--bg2);
  border-top: var(--accent-line); padding: 40px;
  max-width: 760px;
}
.price-headline {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 40px; line-height: 1; margin-bottom: 10px;
}
.price-headline span { font-size: 18px; font-weight: 400; color: var(--muted); }
.price-detail { font-size: 15px; color: var(--muted); line-height: 1.7; }
.price-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }

/* DEMO SCREENSHOT SLOTS
   A .demo-shot is a real product screenshot. While the shot is still being
   captured it carries .pending and renders as a labeled slot instead of an
   image. See demo/README.md for how to drop the real file in. */
.shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 60px; }
.shot-grid.one-up { grid-template-columns: 1fr; }
.demo-shot { background: var(--bg2); border: 1px solid var(--border); margin: 0; }
.demo-shot img { width: 100%; height: auto; display: block; }
.demo-shot figcaption {
  font-size: 13px; color: var(--muted); line-height: 1.6;
  padding: 16px 20px; border-top: 1px solid var(--border);
}
.demo-shot.pending { border-style: dashed; border-color: rgba(29,158,117,0.35); }
.demo-shot.pending .shot-slot {
  min-height: 240px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 40px 24px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px),
    var(--bg3);
}
/* .shot-tag and .shot-file are shared by .demo-shot and .artifact slots, so
   they are deliberately unscoped. Scoping them to .demo-shot once let the long
   monospace file path inside an .artifact render at body size with no wrap,
   which pushed the whole grid past the viewport. */
.shot-tag {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); border: 1px solid rgba(29,158,117,0.4); padding: 5px 12px;
}
/* The slot keeps its file path in the markup so whoever fills it knows what to
   drop in, but a visitor should never read our asset paths. Hidden, not deleted. */
.shot-file, .video-slot-file { display: none; }
.demo-shot.pending figcaption { border-top-style: dashed; }

/* Grid and flex children default to min-width:auto, which lets a long
   unbreakable string widen its whole track. Every grid on these pages holds
   text, so none of them wants that. */
.product-grid > *, .shot-grid > *, .reach-grid > *, .timeline > *,
.after > *, .callpanel > *, .walk-step > *, .artifact-strip > * { min-width: 0; }

/* CALL / BOOK CTA PAIR (ends every page) */
.close-cta { background: var(--teal-dark); border-top: 1px solid rgba(255,255,255,0.1); text-align: center; position: relative; overflow: hidden; }
.close-cta::before {
  content: 'QUALIFLAI';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 200px;
  color: rgba(255,255,255,0.04); white-space: nowrap; pointer-events: none; letter-spacing: .04em;
}
.close-cta h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: clamp(36px, 5.5vw, 64px);
  text-transform: uppercase; line-height: 1; margin-bottom: 18px; position: relative;
}
/* Text on the closing panel sits on --teal-dark #0F6E56. At 0.72 and 0.6 alpha
   these computed 4.05:1 and 3.30:1, both under the 4.5:1 AA floor for body
   text. At 0.8 they compute 4.60:1. */
.close-cta p { font-size: 17px; color: rgba(255,255,255,0.85); margin: 0 auto 36px; max-width: 620px; position: relative; }
.close-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; position: relative; }
.close-cta .btn-primary { background: #fff; color: var(--teal-dark); }
.close-cta .btn-primary:hover { background: var(--text); }
.close-cta .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; }
.close-cta .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }
.demo-line-note { font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 24px; position: relative; }

/* DEMO LINE PANEL */
.callpanel { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.callpanel > div { background: var(--bg2); padding: 40px; border-top: var(--accent-line); }
.callpanel-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: clamp(32px, 4.5vw, 46px); line-height: 1;
  color: var(--teal); text-decoration: none; display: inline-block; margin-bottom: 12px;
}
.callpanel-num:hover { color: var(--teal-light); }
.callpanel-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.callpanel-text { font-size: 15px; color: var(--muted); line-height: 1.7; }

/* WHO WE ARE */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 60px; }
.who img { width: 100%; height: 340px; object-fit: cover; display: block; border: 1px solid var(--border); opacity: .8; }
.who-text p { font-size: 16px; color: var(--muted); line-height: 1.75; }
.who-text p + p { margin-top: 16px; }
.who-text strong { color: var(--text); font-weight: 500; }

/* AFTER YOU BOOK */
.after { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 48px; }
.after-item { background: var(--bg2); padding: 30px 26px; border-top: 1px solid var(--border); }
.after-item-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px; text-transform: uppercase; margin-bottom: 8px;
}
.after-item-text { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* FOOTER */
footer { background: var(--bg); border-top: 1px solid var(--border); padding: 40px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-logo img { height: 82px; width: auto; }
.footer-copy { font-size: 13px; color: var(--muted); }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--teal); }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-eyebrow { animation: fadeUp .6s ease both; }
.hero h1 { animation: fadeUp .7s .1s cubic-bezier(.16,1,.3,1) both; }
.hero-sub { animation: fadeUp .6s .25s ease both; }
.hero-actions { animation: fadeUp .6s .4s ease both; }
@keyframes heroPulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.12); }
}
.hero::before { animation: heroPulse 7s ease-in-out infinite; will-change: opacity, transform; }
@keyframes drawLine { from { width: 0; } to { width: 24px; } }
.hero-eyebrow::before, .hero-eyebrow::after { animation: drawLine .6s .5s ease both; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.stagger.in > * { animation: fadeUp .6s ease both; }
.reveal.stagger.in > *:nth-child(1) { animation-delay: .04s; }
.reveal.stagger.in > *:nth-child(2) { animation-delay: .12s; }
.reveal.stagger.in > *:nth-child(3) { animation-delay: .20s; }
.reveal.stagger.in > *:nth-child(4) { animation-delay: .28s; }
.reveal.stagger.in > *:nth-child(5) { animation-delay: .36s; }
.reveal.stagger.in > *:nth-child(6) { animation-delay: .44s; }
.walk-step { transition: transform .25s cubic-bezier(.16,1,.3,1), border-top-color .3s; }
.walk-step:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .product-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .after { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  section { padding: 72px 0; }
  .nav-toggle { display: block; }
  .nav-inner { height: 72px; }
  .nav-logo img { height: 44px; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(12,12,11,0.98); border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 16px; width: 100%; }
  .nav-links a.nav-cta { margin-top: 8px; text-align: center; }
  .hero { padding: 120px 0 72px; }
  .hero-band { height: 200px; margin-top: 40px; }
  .walk-step, .walk-step.has-media { grid-template-columns: 1fr; gap: 16px; padding: 32px 24px; }
  .walk-num { font-size: 44px; }
  .walk-media img { min-height: 180px; }
  .shot-grid, .reach-grid, .callpanel, .timeline { grid-template-columns: 1fr; }
  .who { grid-template-columns: 1fr; gap: 28px; }
  .who img { height: 240px; }
  .price-block { padding: 28px 24px; }
  .close-cta::before { font-size: 110px; }
  .callpanel > div { padding: 28px 24px; }
}