/* ═══════════════════════════════════════════════════════════════
   Junction Systems — main.css  v1.0.8
   HCI-optimised: WCAG AA contrast, type hierarchy, elevation system
   Fonts: Plus Jakarta Sans (display) + Inter (body)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Brand — Emerald. Contrast on bg-base: 4.8:1 ✓ WCAG AA */
  --brand:       #10B981;
  --brand-hover: #059669;
  --brand-light: #34D399;
  --brand-glow:  rgba(16,185,129,.12);
  --brand-glow2: rgba(16,185,129,.06);

  /* Backgrounds — Zinc elevation scale */
  --bg-base:     #09090B;   /* page base       */
  --bg-surface:  #111113;   /* cards, panels   */
  --bg-elevated: #18181B;   /* dropdowns, nav  */
  --bg-high:     #27272A;   /* tooltips, chips */

  /* Text — all meet WCAG AA on bg-base */
  --text-1: #FAFAFA;        /* 19.1:1  — headings, primary    */
  --text-2: #D4D4D8;        /* 11.6:1  — body text            */
  --text-3: #A1A1AA;        /*  7.0:1  — secondary, captions  */
  --text-4: #fff;        /* #71717A 4.6:1  — muted, placeholders  */

  /* Borders */
  --border-1: rgba(255,255,255,.06);   /* subtle dividers     */
  --border-2: rgba(255,255,255,.10);   /* card borders        */
  --border-3: rgba(255,255,255,.18);   /* emphasis / focused  */

  /* Semantic */
  --success: #22C55E;
  --warning: #F59E0B;
  --error:   #EF4444;

  /* Typography */
  --font-d: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;

  /* Type scale (Major Third — 1.25) */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */

  /* Spacing (8px base) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  --max-w: 1200px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body  { background: var(--bg-base); color: var(--text-2); font-family: var(--font-b);
        font-size: var(--text-base); line-height: 1.65; overflow-x: hidden;
        -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-light); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ── Layout ────────────────────────────────────────────────────── */
.js-container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-5); }
.js-section   { padding: var(--sp-9) 0; }
.js-main      { min-height: 60vh; }

/* ── Header ────────────────────────────────────────────────────── */
.js-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(9,9,11,.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-1);
}
.js-nav-inner  { height: 64px; display: flex; align-items: center; gap: var(--sp-5); }
.js-nav-logo   { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; text-decoration: none; }
.js-nav-brand  { font-family: var(--font-d); font-weight: 800; font-size: var(--text-lg);
                 color: var(--text-1); letter-spacing: -.02em; }
.js-nav-brand span { color: var(--brand); }
.js-nav-links  { display: flex; align-items: center; gap: var(--sp-5); list-style: none; flex: 1; }
.js-nav-links li a { color: var(--text-3); font-size: var(--text-sm); font-weight: 500;
                     transition: color .15s; padding: var(--sp-1) 0; }
.js-nav-links li a:hover,
.js-nav-links .current-menu-item > a { color: var(--text-1); }
.js-nav-actions    { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
.js-mobile-toggle  { display: none; background: none; border: none; cursor: pointer;
                     padding: var(--sp-1); flex-direction: column; gap: 5px; }
.js-mobile-toggle span { display: block; width: 22px; height: 2px;
                          background: var(--text-1); border-radius: 2px; transition: all .3s; }

/* ── Buttons ───────────────────────────────────────────────────── */
.js-btn-primary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--brand); color: #09090B;
  padding: 11px var(--sp-6); border-radius: var(--r-md);
  font-family: var(--font-b); font-weight: 600; font-size: var(--text-sm);
  border: none; cursor: pointer; transition: all .15s ease; text-decoration: none;
  letter-spacing: .01em;
}
.js-btn-primary:hover { background: var(--brand-hover); color: #09090B;
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(16,185,129,.25); }
.js-btn-primary:active { transform: translateY(0); }

.js-btn-outline {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; color: var(--text-1);
  padding: 10px var(--sp-6); border-radius: var(--r-md);
  font-family: var(--font-b); font-weight: 600; font-size: var(--text-sm);
  border: 1px solid var(--border-3); cursor: pointer; transition: all .15s; text-decoration: none;
}
.js-btn-outline:hover { border-color: var(--brand); color: var(--brand);
  background: var(--brand-glow2); }

.js-btn-ghost {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--brand-glow); color: var(--brand);
  padding: 10px var(--sp-6); border-radius: var(--r-md);
  font-family: var(--font-b); font-weight: 600; font-size: var(--text-sm);
  border: 1px solid rgba(16,185,129,.25); cursor: pointer; transition: all .15s; text-decoration: none;
}
.js-btn-ghost:hover { background: rgba(16,185,129,.18); color: var(--brand); }
.js-btn-cta  { background: var(--brand); color: #09090B; padding: 7px 18px;
               border-radius: var(--r-sm); font-weight: 600; font-size: var(--text-sm);
               transition: all .15s; text-decoration: none; }
.js-btn-cta:hover { background: var(--brand-hover); color: #09090B; }
.js-btn-full { width: 100%; justify-content: center; }

/* ── Section headers ────────────────────────────────────────────── */
.js-section-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700; color: var(--brand);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3);
}
.js-section-eyebrow::before {
  content: ''; width: 20px; height: 2px;
  background: var(--brand); border-radius: 2px; flex-shrink: 0;
}
.js-section-title {
  font-family: var(--font-d); font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  color: var(--text-1); margin-bottom: var(--sp-4);
}
.js-section-sub  { font-size: var(--text-lg); color: var(--text-3); line-height: 1.7;
                   font-weight: 400; max-width: 560px; }
.js-section-header { margin-bottom: var(--sp-7); }
.js-accent { color: var(--brand); font-style: normal; }

/* ── Hero ───────────────────────────────────────────────────────── */
.js-hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 0 80px; position: relative; overflow: hidden;
}
.js-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 65% 40%, rgba(16,185,129,.07), transparent),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(16,185,129,.04), transparent);
}
/* Subtle grid overlay */
.js-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .03;
  background-image: linear-gradient(var(--border-2) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border-2) 1px, transparent 1px);
  background-size: 48px 48px;
}
.js-hero-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; position: relative; z-index: 1; }
.js-eyebrow     { display: inline-flex; align-items: center; gap: var(--sp-2);
                  background: var(--brand-glow); border: 1px solid rgba(16,185,129,.2);
                  border-radius: var(--r-full); padding: 5px 14px;
                  font-size: var(--text-xs); font-weight: 700; color: var(--brand);
                  letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.js-eyebrow-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%;
                  animation: jsPulse 2s ease infinite; }
@keyframes jsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(1.5)} }
.js-hero-title  { font-family: var(--font-d); font-size: clamp(var(--text-4xl),5.5vw,var(--text-6xl));
                  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
                  color: var(--text-1); margin-bottom: var(--sp-4); }
.js-hero-title em { color: var(--brand); font-style: normal; }
.js-hero-sub    { font-size: var(--text-lg); color: var(--text-3); line-height: 1.75;
                  margin-bottom: var(--sp-6); font-weight: 400; max-width: 480px; }
.js-hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.js-hero-badges  { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.js-hero-badge   { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-4); }
.js-hero-badge span:last-child { font-weight: 500; color: var(--text-3); }
.js-junction-diagram { background: var(--bg-surface); border: 1px solid var(--border-2);
                       border-radius: var(--r-xl); padding: var(--sp-6); width: 100%;
                       position: relative; overflow: hidden; }
.js-junction-diagram::before { content: ''; position: absolute; top: -80px; right: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.12), transparent 70%); pointer-events: none; }

/* ── Stats ──────────────────────────────────────────────────────── */
.js-stats-band   { background: var(--bg-surface); border-top: 1px solid var(--border-1);
                   border-bottom: 1px solid var(--border-1); padding: var(--sp-7) 0; }
.js-stats-inner  { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
.js-stat         { text-align: center; }
.js-stat-number  { font-family: var(--font-d); font-size: var(--text-5xl); font-weight: 800;
                   color: var(--brand); line-height: 1; letter-spacing: -.04em; }
.js-stat-label   { font-size: var(--text-sm); color: var(--text-4); margin-top: var(--sp-2); font-weight: 500; }

/* ── Products ───────────────────────────────────────────────────── */
.js-products-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.js-product-card  { background: var(--bg-surface); border: 1px solid var(--border-1);
                    border-radius: var(--r-lg); padding: var(--sp-7); position: relative;
                    overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.js-product-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.js-product-card:hover { border-color: var(--border-3); transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.js-product-card:hover::before { transform: scaleX(1); }
.js-product-icon    { font-size: 36px; margin-bottom: var(--sp-4); display: block; }
.js-product-name    { font-family: var(--font-d); font-size: var(--text-2xl); font-weight: 700;
                      color: var(--text-1); margin-bottom: var(--sp-2); letter-spacing: -.02em; }
.js-product-tagline { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-5); line-height: 1.65; }
.js-product-features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.js-product-features li { font-size: var(--text-sm); color: var(--text-3); display: flex; align-items: flex-start; gap: var(--sp-2); }
.js-product-features li::before { content: '✓'; color: var(--brand); font-weight: 700; flex-shrink: 0; }
.js-product-link { color: var(--brand); font-weight: 600; font-size: var(--text-sm);
                   display: inline-flex; align-items: center; gap: var(--sp-2); transition: gap .2s; }
.js-product-link:hover { gap: var(--sp-3); color: var(--brand-light); }
.js-demo-strip { background: var(--bg-elevated); border: 1px solid var(--border-2);
                 border-radius: var(--r-lg); padding: var(--sp-6);
                 display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.js-demo-strip-text h3 { font-family: var(--font-d); font-size: var(--text-lg); font-weight: 700;
                         color: var(--text-1); margin-bottom: var(--sp-1); }
.js-demo-strip-text p  { font-size: var(--text-sm); color: var(--text-4); }
.js-demo-btns    { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.js-demo-btn     { padding: 10px 18px; border-radius: var(--r-md); font-weight: 600;
                   font-size: var(--text-sm); transition: all .15s; white-space: nowrap; text-decoration: none; }
.js-demo-btn-store { background: var(--brand); color: #09090B; }
.js-demo-btn-store:hover { background: var(--brand-hover); color: #09090B; }
.js-demo-btn-pos   { background: transparent; color: var(--brand); border: 1px solid rgba(16,185,129,.35); }
.js-demo-btn-pos:hover { background: var(--brand-glow); }

/* ── Features ───────────────────────────────────────────────────── */
.js-features-section { background: var(--bg-surface); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); }
.js-features-grid    { display: grid; grid-template-columns: repeat(3,1fr); }
.js-feature-item     { padding: var(--sp-6); border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); transition: background .2s; }
.js-feature-item:nth-child(3n) { border-right: none; }
.js-feature-item:hover { background: var(--bg-elevated); }
.js-feature-icon  { font-size: 24px; margin-bottom: var(--sp-3); display: block; }
.js-feature-title { font-family: var(--font-d); font-size: var(--text-base); font-weight: 700;
                    color: var(--text-1); margin-bottom: var(--sp-2); }
.js-feature-desc  { font-size: var(--text-sm); color: var(--text-4); line-height: 1.65; }

/* ── How it works ───────────────────────────────────────────────── */
.js-how-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); position: relative; }
.js-how-grid::before { content: ''; position: absolute; top: 43px; left: calc(12.5% + 20px);
  right: calc(12.5% + 20px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand), transparent); }
.js-how-item { text-align: center; position: relative; z-index: 1; }
.js-how-num  { width: 86px; height: 86px; background: var(--bg-surface); border: 1px solid var(--border-2);
               border-radius: 50%; display: flex; align-items: center; justify-content: center;
               margin: 0 auto var(--sp-4); font-family: var(--font-d); font-size: var(--text-2xl);
               font-weight: 800; color: var(--brand); transition: all .2s; letter-spacing: -.02em; }
.js-how-item:hover .js-how-num { background: var(--brand-glow); border-color: rgba(16,185,129,.35); }
.js-how-title { font-family: var(--font-d); font-size: var(--text-base); font-weight: 700;
                color: var(--text-1); margin-bottom: var(--sp-2); }
.js-how-desc  { font-size: var(--text-sm); color: var(--text-4); line-height: 1.65; }

/* ── Pricing ────────────────────────────────────────────────────── */
.js-pricing-section { border-top: 1px solid var(--border-1); }
.js-pricing-grid    { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); align-items: start; }
.js-all-plans-band  { background: var(--bg-surface); border: 1px solid var(--border-2);
                      border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-6);
                      margin-bottom: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.js-apb-title  { font-family: var(--font-d); font-size: var(--text-sm); font-weight: 700;
                 color: var(--brand); white-space: nowrap; flex-shrink: 0; }
.js-apb-items  { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.js-apb-items span { font-size: var(--text-sm); color: var(--text-3); white-space: nowrap; }

.js-price-card { background: var(--bg-surface); border: 1px solid var(--border-2);
                 border-radius: var(--r-lg); padding: var(--sp-6); position: relative;
                 transition: border-color .2s, box-shadow .2s; display: flex; flex-direction: column; }
.js-price-card:hover { border-color: var(--border-3); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.js-price-card--featured { background: var(--bg-elevated); border-color: rgba(16,185,129,.3);
  box-shadow: 0 0 0 1px rgba(16,185,129,.1), 0 16px 40px rgba(0,0,0,.3); }
.js-price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
                  background: var(--brand); color: #09090B; font-size: var(--text-xs);
                  font-weight: 700; padding: 3px 14px; border-radius: var(--r-full);
                  white-space: nowrap; letter-spacing: .05em; }
.js-price-tier   { font-size: var(--text-xs); font-weight: 700; color: var(--brand);
                   letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sp-3); }
.js-price-amount { font-family: var(--font-d); font-size: 40px; font-weight: 800;
                   line-height: 1; color: var(--text-1); margin-bottom: 2px; letter-spacing: -.04em; }
.js-price-amount span { font-size: var(--text-lg); font-weight: 400; color: var(--text-4); }
.js-price-period { font-size: var(--text-sm); color: var(--text-4); margin-bottom: var(--sp-5); }
.js-price-features { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-6); flex: 1; }
.js-pf-on  { font-size: var(--text-sm); color: var(--text-3); display: flex; align-items: flex-start; gap: var(--sp-2); }
.js-pf-on::before  { content: '✓'; color: var(--brand); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.js-pf-off { font-size: var(--text-sm); color: var(--text-4); display: flex; align-items: flex-start; gap: var(--sp-2); opacity: .5; }
.js-pf-off::before { content: '—'; flex-shrink: 0; margin-top: 1px; }
.js-price-note { font-size: var(--text-xs); color: var(--text-4); text-align: center; margin-top: var(--sp-3); }

.js-pricing-faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
                  margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--border-1); }
.js-pfaq-item strong { font-family: var(--font-d); font-size: var(--text-base); font-weight: 700;
                       color: var(--text-1); display: block; margin-bottom: var(--sp-2); }
.js-pfaq-item p { font-size: var(--text-sm); color: var(--text-4); line-height: 1.7; }

/* ── Testimonials ───────────────────────────────────────────────── */
.js-testimonials-section { background: var(--bg-surface); }
.js-testi-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.js-testi-card  { background: var(--bg-elevated); border: 1px solid var(--border-2);
                  border-radius: var(--r-lg); padding: var(--sp-5); transition: border-color .2s; }
.js-testi-card:hover { border-color: var(--border-3); }
.js-testi-stars { color: var(--warning); font-size: var(--text-sm); letter-spacing: 2px; margin-bottom: var(--sp-3); }
.js-testi-quote { font-size: var(--text-base); line-height: 1.75; color: var(--text-2);
                  margin-bottom: var(--sp-5); font-style: italic; }
.js-testi-author { display: flex; align-items: center; gap: var(--sp-3); }
.js-testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-glow);
                   border: 1px solid rgba(16,185,129,.25); display: flex; align-items: center;
                   justify-content: center; font-family: var(--font-d); font-weight: 700;
                   font-size: var(--text-sm); color: var(--brand); flex-shrink: 0; }
.js-testi-name  { font-weight: 600; font-size: var(--text-sm); color: var(--text-1); display: block; }
.js-testi-biz   { font-size: var(--text-xs); color: var(--text-4); }

/* ── CTA ────────────────────────────────────────────────────────── */
.js-cta-section { padding: var(--sp-9) 0; text-align: center; position: relative; overflow: hidden; }
.js-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); width: 600px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(16,185,129,.08), transparent 70%); pointer-events: none; }
.js-cta-title   { font-family: var(--font-d); font-size: clamp(var(--text-3xl),5vw,var(--text-5xl));
                  font-weight: 800; line-height: 1.1; margin-bottom: var(--sp-4);
                  letter-spacing: -.03em; color: var(--text-1); position: relative; }
.js-cta-sub     { font-size: var(--text-lg); color: var(--text-3); margin-bottom: var(--sp-7); position: relative; }
.js-cta-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap;
                  margin-bottom: var(--sp-5); position: relative; }
.js-cta-contact { font-size: var(--text-sm); color: var(--text-4); position: relative; }
.js-cta-contact a { color: var(--brand); }

/* ── Footer ─────────────────────────────────────────────────────── */
.js-footer        { border-top: 1px solid var(--border-1); padding: var(--sp-8) 0 var(--sp-6); }
.js-footer-inner  { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-5); }
.js-footer-top    { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-8); margin-bottom: var(--sp-8); }
.js-footer-brand  { display: flex; flex-direction: column; }
.js-footer-tagline { font-size: var(--text-sm); color: var(--text-4); line-height: 1.75; margin-bottom: var(--sp-4); }
.js-footer-contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.js-footer-contact a { font-size: var(--text-sm); color: var(--text-4); transition: color .15s;
                       display: flex; align-items: center; gap: var(--sp-2); }
.js-footer-contact a:hover { color: var(--brand); }
.js-footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.js-footer-social a { width: 32px; height: 32px; background: var(--bg-elevated); border: 1px solid var(--border-2);
                      border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
                      font-size: var(--text-xs); font-weight: 700; color: var(--text-4); transition: all .15s; }
.js-footer-social a:hover { border-color: var(--brand); color: var(--brand); }
.js-footer-col .widget-title { font-family: var(--font-d); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); margin-bottom: var(--sp-4); }
.js-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.js-footer-col ul li a { font-size: var(--text-sm); color: var(--text-4); transition: color .15s; }
.js-footer-col ul li a:hover { color: var(--brand); }
.js-footer-col ul li { font-size: var(--text-sm); color: var(--text-4); }
.js-footer-bottom { display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--sp-5); border-top: 1px solid var(--border-1);
  font-size: var(--text-xs); color: var(--text-4); flex-wrap: wrap; gap: var(--sp-3); }

/* ── Inner page hero ────────────────────────────────────────────── */
.js-page-hero     { background: var(--bg-surface); border-bottom: 1px solid var(--border-1); padding: var(--sp-8) 0; }
.js-page-hero--sm { padding: var(--sp-7) 0; }
.js-page-hero-title { font-family: var(--font-d); font-size: clamp(var(--text-3xl),4vw,var(--text-5xl));
                      font-weight: 800; letter-spacing: -.03em; color: var(--text-1); margin-bottom: var(--sp-3); }
.js-page-hero-sub   { font-size: var(--text-lg); color: var(--text-3); font-weight: 400; }

/* ── Contact ────────────────────────────────────────────────────── */
.js-contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-8); align-items: start; }
.js-contact-info h2 { font-family: var(--font-d); font-size: var(--text-2xl); font-weight: 700;
                      color: var(--text-1); margin-bottom: var(--sp-3); }
.js-contact-info > p { color: var(--text-3); font-size: var(--text-base); margin-bottom: var(--sp-6); line-height: 1.7; }
.js-contact-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.js-contact-item  { display: flex; align-items: flex-start; gap: var(--sp-3); }
.js-contact-item > span { font-size: 20px; flex-shrink: 0; }
.js-contact-item strong { display: block; font-size: var(--text-xs); color: var(--text-4); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.js-contact-item a { font-size: var(--text-base); color: var(--text-2); }
.js-contact-item a:hover { color: var(--brand); }

/* ── Forms ──────────────────────────────────────────────────────── */
.js-contact-form-wrap { background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); padding: var(--sp-6); }
.js-contact-form      { display: flex; flex-direction: column; gap: var(--sp-4); }
.js-form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.js-form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.js-form-group label { font-size: var(--text-sm); font-weight: 600; color: var(--text-3); }
.js-form-group label span { color: var(--brand); }
.js-form-group input,
.js-form-group select,
.js-form-group textarea { background: var(--bg-elevated); border: 1px solid var(--border-2);
  color: var(--text-1); padding: 10px 14px; border-radius: var(--r-md); font-size: var(--text-sm);
  font-family: var(--font-b); outline: none; transition: border-color .15s; width: 100%; }
.js-form-group input:focus,
.js-form-group select:focus,
.js-form-group textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.js-form-group select option { background: var(--bg-elevated); color: var(--text-1); }
.js-form-group input::placeholder, .js-form-group textarea::placeholder { color: var(--text-4); }
.js-form-status { padding: 12px 16px; border-radius: var(--r-md); font-size: var(--text-sm); display: none; }
.js-form-status.success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: var(--success); display: block; }
.js-form-status.error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.3);  color: var(--error);   display: block; }

/* ── Page content ───────────────────────────────────────────────── */
.js-page-content  { padding: var(--sp-8) 0; }
.js-page-title    { font-family: var(--font-d); font-size: clamp(var(--text-3xl),4vw,var(--text-4xl));
                    font-weight: 800; letter-spacing: -.02em; color: var(--text-1); margin-bottom: var(--sp-5); }
.js-entry-content { font-size: var(--text-base); color: var(--text-2); line-height: 1.8; max-width: 720px; }
.js-entry-content h2 { font-family: var(--font-d); font-size: var(--text-2xl); font-weight: 700;
                       color: var(--text-1); margin: var(--sp-7) 0 var(--sp-3); }
.js-entry-content h3 { font-family: var(--font-d); font-size: var(--text-xl); font-weight: 600;
                       color: var(--text-1); margin: var(--sp-5) 0 var(--sp-2); }
.js-entry-content p  { margin-bottom: var(--sp-4); }
.js-entry-content ul, .js-entry-content ol { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.js-entry-content li { margin-bottom: var(--sp-2); }
.js-entry-content a  { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.js-entry-content code { background: var(--bg-elevated); padding: 2px 7px; border-radius: 4px;
                          font-size: var(--text-sm); font-family: 'Courier New', monospace; color: var(--brand-light); }

/* ── Animations ─────────────────────────────────────────────────── */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ── Accessibility ──────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto;
  padding: 12px 20px; background: var(--brand); color: #fff; font-weight: 700; z-index: 9999; }

/* ══════════════════════ RESPONSIVE ══════════════════════════════ */
@media (max-width: 1024px) {
  .js-hero-grid  { grid-template-columns: 1fr; gap: var(--sp-7); }
  .js-hero-visual { display: none; }
  .js-footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 768px) {
  :root { --sp-9: 64px; }
  .js-section    { padding: var(--sp-8) 0; }
  .js-products-grid,
  .js-pricing-grid,
  .js-testi-grid,
  .js-contact-layout { grid-template-columns: 1fr; }
  .js-features-grid  { grid-template-columns: 1fr 1fr; }
  .js-features-grid .js-feature-item { border-right: none; }
  .js-stats-inner    { grid-template-columns: repeat(2,1fr); }
  .js-how-grid       { grid-template-columns: 1fr 1fr; }
  .js-how-grid::before { display: none; }
  .js-demo-strip     { flex-direction: column; text-align: center; }
  .js-form-row       { grid-template-columns: 1fr; }
  .js-footer-top     { grid-template-columns: 1fr; gap: var(--sp-5); }
  .js-pricing-faq    { grid-template-columns: 1fr; }
  .js-all-plans-band { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .js-nav-links {
    display: none; position: fixed; inset: 64px 0 0;
    background: rgba(9,9,11,.97); backdrop-filter: blur(20px);
    flex-direction: column; padding: var(--sp-6) var(--sp-5);
    gap: 0; border-top: 1px solid var(--border-1); overflow-y: auto; z-index: 99;
  }
  .js-nav-links.open   { display: flex; }
  .js-nav-links li     { border-bottom: 1px solid var(--border-1); }
  .js-nav-links li a   { display: block; padding: var(--sp-4) 0; font-size: var(--text-base); }
  .js-mobile-toggle    { display: flex; }
}

@media (max-width: 480px) {
  .js-features-grid { grid-template-columns: 1fr; }
  .js-hero-actions  { flex-direction: column; }
  .js-cta-actions   { flex-direction: column; align-items: center; }
  .js-demo-btns     { flex-direction: column; width: 100%; }
}