/* =============================================================
   ONELINKPDF — LAYOUT.CSS
   Modern Black & White Design System
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Core palette */
  --black:      #000000;
  --off-black:  #0a0a0a;
  --dark:       #111111;
  --charcoal:   #1c1c1e;
  --zinc:       #27272a;
  --iron:       #3f3f46;
  --mid:        #71717a;
  --silver:     #a1a1aa;
  --ash:        #d4d4d8;
  --mist:       #e4e4e7;
  --ghost:      #f4f4f5;
  --snow:       #fafafa;
  --white:      #ffffff;

  /* Semantic tokens */
  --brand:          var(--dark);
  --brand-dark:     var(--black);
  --brand-light:    var(--iron);
  --text:           var(--dark);
  --muted:          var(--mid);
  --border:         var(--mist);
  --lighter:        var(--ghost);
  --light:          var(--snow);
  --surface:        var(--white);
  --section:        var(--snow);
  --bg:             #0f0f12;

  /* Header / Footer tokens */
  --header-bg:      var(--off-black);
  --header-border:  rgba(255,255,255,0.06);
  --footer-bg:      var(--black);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --shadow:    0 4px 20px rgba(0,0,0,.08);
  --shadow-md: 0 8px 28px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.13);
  --shadow-xl: 0 24px 72px rgba(0,0,0,.18);

  /* Transitions */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --speed: 0.18s;
}

/* ── Base ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ================================================================
   HEADER — BLADE MODERN BLACK
   ================================================================ */

.navbar {
  background: #0a0a0a !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding: 0 !important;
  height: 76px;
  transition: background var(--speed) var(--ease);
  box-shadow: 0 1px 32px rgba(0,0,0,0.32);
}

.navbar .container {
  height: 76px;
  display: flex;
  align-items: center;
}

/* Logo */
.navbar-brand {
  color: #fff !important;
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 2.5rem;
  flex-shrink: 0;
}

.navbar-brand img {
  height: 32px;
  width: auto;
}

/* Center nav list */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Nav links — NO background boxes, text + underline only */
.nav-link {
  font-size: 1.0625rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0;
  background: transparent !important;
  letter-spacing: 0.015em;
  position: relative;
  transition: color 0.15s ease;
}

/* Bottom underline indicator */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.2s ease, left 0.2s ease;
}

.nav-link:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: transparent !important;
}

.nav-link:hover::after {
  width: 70%;
  left: 15%;
}

.nav-link.active {
  color: #fff !important;
  background: transparent !important;
}

.nav-link.active::after {
  width: 70%;
  left: 15%;
}

/* Remove old ::before underline */
.nav-link::before { display: none !important; }

/* Separator between nav and buttons */
.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.1);
  margin: 0 1rem;
  flex-shrink: 0;
}

/* Login ghost button */
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: #fff !important;
  background: transparent !important;
}

/* Start free CTA */
.btn-brand {
  background: #fff !important;
  color: #000 !important;
  font-weight: 700;
  padding: 0.375rem 1.125rem;
  border-radius: var(--radius-sm);
  border: 1px solid #fff !important;
  font-size: 1rem;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-brand:hover {
  background: #ebebeb !important;
  color: #000 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* Hamburger toggler */
.navbar-toggler {
  border: none !important;
  background: transparent !important;
  padding: 0.4rem;
  cursor: pointer;
}

.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 22px;
  height: 22px;
}

/* ── Mobile collapse ── */
@media (max-width: 991.98px) {
  .navbar {
    height: auto;
    padding: 0 !important;
  }

  .navbar .container {
    height: 60px;
    flex-wrap: wrap;
  }

  .navbar-collapse {
    width: 100%;
    background: #0d0d0d;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 1.5rem 0 1.25rem;
    margin-top: 0.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }

  .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 0.5rem;
    margin-bottom: 0.875rem;
  }

  .nav-link {
    width: 100%;
    padding: 0.625rem 0.75rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6) !important;
  }

  .nav-link::after { display: none; }

  .nav-link.active { color: #fff !important; }

  .nav-divider { display: none; }

  .d-flex.align-items-center.gap-2 {
    padding: 0.5rem 0.5rem 0;
    gap: 0.5rem !important;
  }

  .btn-ghost,
  .btn-brand {
    flex: 1;
    text-align: center;
    padding: 0.6rem 1rem !important;
    justify-content: center;
  }
}

/* ================================================================
   FOOTER — MODERN BLACK BLADE
   ================================================================ */

.footer {
  background: var(--footer-bg) !important;
  color: #9ca3af !important;
  padding: 72px 0 0;
  position: relative;
  overflow: hidden;
}

/* Gradient top border accent */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.12) 75%,
    transparent 100%
  );
}

/* Decorative radial glow (subtle) */
.footer::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 0;
  width: 600px;
  height: 300px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center top, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

.footer h5,
.footer h6 {
  color: #fff !important;
  font-weight: 700;
  font-size: 0.9375rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem !important;
  position: relative;
  display: block;
}

.footer h5::after,
.footer h6::after {
  display: none;
}

.footer p {
  color: #9ca3af;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75;
}

.footer address {
  color: #9ca3af;
  font-style: normal;
  font-size: 0.9375rem;
  font-weight: 600;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li {
  margin-bottom: 0.6rem;
  display: block;
}

.footer ul li::before {
  display: none;
}

.footer a {
  color: #9ca3af !important;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: color var(--speed) var(--ease);
  position: static;
}

.footer a::before,
.footer a::after {
  display: none;
}

.footer a:hover {
  color: #e4e4e7 !important;
  text-decoration: none;
  opacity: 1;
}

/* Social icons (footer only — contact page uses .contact-card .social-links) */
.footer .social-links {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.footer .social-links a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9ca3af !important;
  font-size: 0.9rem;
  transition: all var(--speed) var(--ease) !important;
}

.footer .social-links a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Newsletter form in footer */
.footer .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  transition: border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}

.footer .form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  box-shadow: none;
}

.footer .form-control::placeholder {
  color: #6b7280;
}

.footer .btn-brand {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.4rem 0.875rem !important;
  transition: all var(--speed) var(--ease) !important;
}

.footer .btn-brand:hover {
  background: #e8e8e8 !important;
  color: #000 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.5rem 0;
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.copyright {
  color: #52525b;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.legal-links a {
  color: #52525b !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

.legal-links a:hover {
  color: #d4d4d8 !important;
}

.legal-links a::after {
  display: none;
}

.divider {
  color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 767.98px) {
  .footer {
    padding-top: 56px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .legal-links {
    justify-content: center;
    gap: 0.875rem;
  }
}

/* ================================================================
   BUTTONS
   ================================================================ */

/* Main site buttons (not in navbar) */
.section .btn-brand,
.hero .btn-brand,
.cta-section .btn-brand {
  background: var(--dark) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-sm);
  transition: all var(--speed) var(--ease);
}

.section .btn-brand:hover,
.hero .btn-brand:hover,
.cta-section .btn-brand:hover {
  background: var(--black) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ================================================================
   HERO
   ================================================================ */

.hero, .hero-pro {
  overflow: hidden;
  padding: 5.5rem 0 4rem;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(0,0,0,.05) 0%, transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(0,0,0,.04) 0%, transparent 60%),
    linear-gradient(180deg, #fafafa 0%, #f6f7f8 40%, #fff 100%);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: .7;
  pointer-events: none;
}

.hero .badge {
  background: rgba(0,0,0,0.06);
  color: var(--dark);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 0.85rem;
}

.text-gradient {
  background: linear-gradient(135deg, #111 0%, #555 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ================================================================
   SECTIONS
   ================================================================ */

.section { padding: 5rem 0; }

.section-title {
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.025em;
}

.section-title.centered {
  text-align: center;
}

.section-title.centered::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--dark);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.section-subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

/* ================================================================
   CARDS
   ================================================================ */

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
  box-shadow: var(--shadow-xs);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #c4c4c8;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: var(--ghost);
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 1.25rem;
}

/* ================================================================
   CODE CARD
   ================================================================ */

.code-card, .glass-card {
  background: #0f0f14;
  color: #e5e7eb;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.code-card:hover, .glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(0,0,0,0.24);
}

.code-card .toolbar, .glass-card .toolbar {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
}

pre {
  margin: 0;
  padding: 1.25rem;
  font-size: 0.875rem;
  overflow: auto;
  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
  line-height: 1.6;
}

.snippet-tabs .btn {
  --bs-btn-color: #e2e8f0;
  --bs-btn-border-color: rgba(255,255,255,0.18);
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

.snippet-tabs .btn.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}

/* ================================================================
   PRICING
   ================================================================ */

.pricing-section {
  background: var(--section);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Currency toggle: both buttons visible on light background (override navbar .btn-ghost) */
.pricing-section .btn-ghost {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--white) !important;
}
.pricing-section .btn-ghost:hover {
  color: var(--dark) !important;
  border-color: var(--dark) !important;
  background: var(--ghost) !important;
}
.pricing-section .btn-brand {
  color: #fff !important;
  border-color: var(--dark) !important;
  background: var(--dark) !important;
}
.pricing-section .btn-brand:hover {
  color: #fff !important;
  border-color: var(--black) !important;
  background: var(--black) !important;
}

.plan {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 1.875rem;
  height: 100%;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
  box-shadow: var(--shadow-xs);
  position: relative;
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #b0b0b8;
}

.plan.featured {
  border-color: var(--dark);
  box-shadow: var(--shadow-lg);
}

.plan.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: var(--dark);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.22rem 0.875rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.plan-title { font-weight: 700; margin-bottom: 0.35rem; }
.plan-price { font-weight: 800; font-size: 2.25rem; margin-bottom: 0.35rem; color: var(--text); }
.plan-features { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.plan-features li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.check { color: var(--dark); }

/* ================================================================
   STEPS
   ================================================================ */

.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  height: 100%;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #c4c4c8;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--dark);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* ================================================================
   FAQ
   ================================================================ */

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.375rem 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--speed) var(--ease);
}

.faq-item:hover {
  border-color: #b0b0b8;
}

.faq-question {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.faq-question i { color: var(--dark); }

/* ================================================================
   CTA SECTION
   ================================================================ */

.cta-section {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2l-2 2-36 36v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0L80 12v2L54 40h-2zm4 0L80 16v2L58 40h-2zm4 0L80 20v2L62 40h-2zm4 0L80 24v2L66 40h-2zm4 0L80 28v2L70 40h-2zm4 0L80 32v2L74 40h-2zm4 0L80 36v2L78 40h-2zm4 0L80 40 80 40h-2z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.cta-section h2, .cta-section h3 { color: #fff; }
.cta-section p { color: rgba(255,255,255,0.7); }

.cta-section .btn-brand {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

.cta-section .btn-brand:hover {
  background: #e8e8e8 !important;
  color: #000 !important;
}

.cta-section .btn-ghost {
  border-color: rgba(255,255,255,0.3) !important;
  color: rgba(255,255,255,0.85) !important;
}

.cta-section .btn-ghost:hover {
  border-color: rgba(255,255,255,0.6) !important;
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ================================================================
   DEMO SECTION
   ================================================================ */

.demo-section {
  background: linear-gradient(180deg, var(--snow) 0%, #fff 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.demo-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.demo-header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-browser iframe {
  width: 100%;
  height: 600px;
  border: none;
  background: #fff;
}

.demo-controls {
  padding: 1.125rem 1.25rem;
  background: var(--ghost);
  border-top: 1px solid var(--border);
}

.demo-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.demo-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.demo-feature-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--dark);
}

/* ================================================================
   MISC / UTILITIES
   ================================================================ */

.muted { color: var(--muted); }
.rounded-4 { border-radius: var(--radius) !important; }
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-7 { padding-top: 6rem !important; padding-bottom: 6rem !important; }

.pill {
  background: var(--ghost);
  border: 1px solid var(--border);
  color: var(--dark);
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  background: var(--ghost);
  border: 1px solid var(--border);
  color: var(--dark);
  border-radius: 999px;
  padding: 0.3rem 0.625rem;
  font-size: 0.8rem;
}

.logo-strip {
  display: flex;
  gap: 14px;
  align-items: center;
}

.logo-strip img {
  height: 22px;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--speed) var(--ease), filter var(--speed) var(--ease);
}

.logo-strip img:hover { opacity: 1; filter: grayscale(0); }

/* Nav pills (monochrome) */
.nav-pills .nav-link {
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem !important;
  font-size: 0.875rem;
  transition: all var(--speed) var(--ease);
}

.nav-pills .nav-link:hover { background: var(--ghost); }

.nav-pills .nav-link.active {
  background: var(--dark) !important;
  color: #fff !important;
  border-color: var(--dark) !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 767.98px) {
  .hero, .hero-pro { padding: 4rem 0 3rem; }
  .section { padding: 3.5rem 0; }
  .display-5, .display-4 { font-size: 2.25rem; }
  .demo-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .cta-section { padding: 2.5rem 1.25rem; }
}