/* =====================================================================
   Nyansa Health — Shared Stylesheet
   Consolidated from all site pages into a single cacheable file.
   ===================================================================== */

/* ===================== RESET & VARIABLES ===================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --blue-900: #0a1628;
    --blue-800: #0d2245;
    --blue-700: #0f3460;
    --blue-600: #1a5276;
    --blue-500: #1e6fa6;
    --blue-400: #2e86c1;
    --blue-300: #3498db;
    --blue-200: #7fb3d3;
    --blue-100: #aed6f1;
    --blue-50:  #d6eaf8;
    --blue-10:  #eaf4fc;
    --accent:   #00c8ff;
    --accent2:  #0066ff;
    --white:    #ffffff;
    --gray-50:  #f8fafd;
    --gray-100: #eef2f7;
    --gray-200: #dde4ef;
    --gray-500: #8a9abf;
    --gray-700: #4a5568;
    --success:  #00c896;
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --shadow-sm: 0 2px 8px rgba(30,111,166,.10);
    --shadow-md: 0 8px 32px rgba(10,22,40,.13);
    --shadow-lg: 0 20px 60px rgba(10,22,40,.18);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--blue-900);
    overflow-x: hidden;
    line-height: 1.6;
  }

  /* ===================== UTILITY ===================== */
  .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--blue-10); color: var(--blue-500);
    border: 1px solid var(--blue-50);
    border-radius: 100px; padding: 6px 14px;
    font-size: 13px; font-weight: 500; letter-spacing: .02em;
  }
  .chip-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; border-radius: 100px;
    font-family: var(--font-body); font-size: 15px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: all .22s ease;
    border: none; white-space: nowrap;
  }
  .btn-primary {
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    color: var(--white);
    box-shadow: 0 4px 20px rgba(46,134,193,.35);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(46,134,193,.45); }
  .btn-secondary {
    background: var(--white); color: var(--blue-600);
    border: 1.5px solid var(--blue-200);
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover { transform: translateY(-2px); border-color: var(--blue-400); box-shadow: var(--shadow-md); }
  .btn-ghost { background: transparent; color: var(--blue-500); padding: 10px 20px; }
  .btn-ghost:hover { background: var(--blue-10); }
  .btn-white {
    background: var(--white); color: var(--blue-700);
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
  }
  .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
  .btn-outline-white {
    background: transparent; color: var(--white);
    border: 1.5px solid rgba(255,255,255,.45);
  }
  .btn-outline-white:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }

  /* ===================== SCROLL REVEAL ===================== */
  .reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-left  { opacity:0; transform: translateX(-40px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
  .reveal-right { opacity:0; transform: translateX(40px);  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
  .reveal-left.visible, .reveal-right.visible { opacity:1; transform: translateX(0); }
  .reveal-scale { opacity:0; transform: scale(.92); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
  .reveal-scale.visible { opacity:1; transform: scale(1); }
  .delay-1 { transition-delay: .1s !important; }
  .delay-2 { transition-delay: .2s !important; }
  .delay-3 { transition-delay: .3s !important; }
  .delay-4 { transition-delay: .4s !important; }
  .delay-5 { transition-delay: .5s !important; }

  /* ===================== NAVBAR ===================== */
  .navbar {
    position: fixed; top: 22px; left: 0; right: 0; z-index: 1000;
    padding: 0 18px;
    background: transparent;
    transition: top .28s ease;
  }
  .navbar.scrolled { top: 12px; }
  .nav-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 10px 14px 10px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(255,255,255,.68);
    box-shadow: 0 18px 50px rgba(10,22,40,.14);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
  .nav-inner {
    display: flex; align-items: center; gap: 28px;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
  }

  .brand-logo-img {
    display: block;
    width: 188px;
    height: auto;
    max-height: 46px;
    object-fit: contain;
  }
  footer .brand-logo-img {
    width: 196px;
    max-height: 52px;
  }
  @media (max-width: 900px) {
    .brand-logo-img {
      width: 165px;
      max-height: 42px;
    }
  }
  @media (max-width: 480px) {
    .brand-logo-img {
      width: 145px;
      max-height: 38px;
    }
  }
  .nav-logo-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(46,134,193,.25);
  }
  .nav-logo-icon svg { width: 22px; height: 22px; fill: white; }
  .nav-logo-text {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700;
    color: var(--blue-800);
    white-space: nowrap;
  }
  .nav-logo-text span { color: var(--blue-400); }
  .nav-links {
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin-left: auto;
  }
  .nav-links a {
    text-decoration: none; color: var(--blue-700);
    font-size: 14px; font-weight: 600;
    padding: 9px 13px; border-radius: 999px;
    transition: background .22s ease, color .22s ease, transform .22s ease;
  }
  .nav-links a:hover { background: rgba(46,134,193,.11); color: var(--blue-500); transform: translateY(-1px); }
  .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
  .nav-actions .btn { padding: 10px 20px; font-size: 14px; }
  .mobile-menu-btn {
    display: none;
    width: 44px; height: 44px;
    border: 0; border-radius: 50%;
    background: rgba(234,244,252,.9);
    color: var(--blue-800);
    cursor: pointer;
    align-items: center; justify-content: center;
    position: relative; margin-left: auto;
    transition: background .25s ease, transform .25s ease;
  }
  .mobile-menu-btn:hover { background: rgba(214,234,248,.95); }
  .hamburger-lines { width: 22px; height: 16px; position: relative; display: block; }
  .hamburger-lines span {
    position: absolute; left: 0;
    width: 22px; height: 2px;
    border-radius: 10px;
    background: currentColor;
    transition: transform .28s ease, top .28s ease, opacity .18s ease;
  }
  .hamburger-lines span:nth-child(1) { top: 0; }
  .hamburger-lines span:nth-child(2) { top: 7px; }
  .hamburger-lines span:nth-child(3) { top: 14px; }
  .mobile-menu-btn.active .hamburger-lines span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .mobile-menu-btn.active .hamburger-lines span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
  .mobile-menu-btn.active .hamburger-lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  .mobile-nav-panel { display: none; }

  /* ===================== HERO ===================== */
  .hero {
    min-height: 100vh;
    background: linear-gradient(160deg, #f0f7ff 0%, #e0f0ff 40%, #cce8ff 70%, #b3daff 100%);
    display: flex; align-items: center;
    padding: 120px 0 80px;
    position: relative; overflow: hidden;
  }
  .hero-bg-circles {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  }
  .hero-circle {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,134,193,.18), transparent 70%);
  }
  .hero-circle-1 { width: 700px; height: 700px; top: -200px; right: -150px; }
  .hero-circle-2 { width: 500px; height: 500px; bottom: -100px; left: -100px; background: radial-gradient(circle, rgba(0,200,255,.12), transparent 70%); }
  .hero-circle-3 { width: 300px; height: 300px; top: 30%; right: 20%; background: radial-gradient(circle, rgba(0,102,255,.1), transparent 70%); animation: floatOrb 8s ease-in-out infinite; }
  @keyframes floatOrb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-30px)} }
  .hero-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
  }
  .hero-eyebrow { margin-bottom: 22px; }
  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(42px,5.5vw,72px);
    font-weight: 800; line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--blue-900);
    margin-bottom: 22px;
  }
  .hero-title .highlight {
    background: linear-gradient(135deg, var(--blue-400), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-sub {
    font-size: 18px; color: var(--blue-700);
    line-height: 1.7; margin-bottom: 36px; font-weight: 300;
    max-width: 480px;
  }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
  .hero-trust {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--gray-500);
  }
  .trust-avatars { display: flex; }
  .trust-avatars span {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid white;
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    margin-left: -8px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    color: white;
  }
  .trust-avatars span:first-child { margin-left: 0; }

  /* Hero mockup */
  .hero-mockup {
    position: relative; display: flex; justify-content: center; align-items: flex-start;
    animation: heroFloat 6s ease-in-out infinite;
  }
  @keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
  .mockup-phone {
    width: 320px;
    background: white;
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(10,22,40,.22), 0 0 0 1px rgba(0,0,0,.06);
    overflow: hidden;
    position: relative;
  }
  .mockup-header {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    padding: 20px 20px 16px;
    color: white;
  }
  .mockup-header-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
  }
  .mockup-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
  .mockup-badge {
    background: rgba(255,255,255,.2);
    border-radius: 100px; padding: 3px 10px; font-size: 11px; font-weight: 600;
  }
  .mockup-patient-name { font-size: 20px; font-weight: 700; font-family: var(--font-display); margin-bottom: 2px; }
  .mockup-patient-meta { font-size: 12px; opacity: .75; }
  .mockup-body { padding: 16px 20px; }
  .mockup-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    color: var(--gray-500); text-transform: uppercase; margin-bottom: 8px;
  }
  .mockup-note-text {
    font-size: 12.5px; color: var(--gray-700); line-height: 1.6;
    background: var(--gray-50); border-radius: 10px; padding: 10px 12px;
    margin-bottom: 14px;
  }
  .mockup-actions { display: flex; flex-direction: column; gap: 8px; }
  .mockup-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    cursor: default;
  }
  .mockup-btn-approve { background: #e8fdf5; color: #00a870; border: 1px solid #b8f0de; }
  .mockup-btn-log    { background: var(--blue-10); color: var(--blue-600); border: 1px solid var(--blue-50); }
  .mockup-btn-send   { background: #fff5e8; color: #d67d00; border: 1px solid #fce3ba; }
  .mockup-btn-archive{ background: #f5f0ff; color: #7c4dff; border: 1px solid #ddd0ff; }
  .mockup-btn-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
  .mockup-btn-approve .mockup-btn-icon { background: rgba(0,168,112,.12); }
  .mockup-btn-log    .mockup-btn-icon { background: rgba(46,134,193,.12); }
  .mockup-btn-send   .mockup-btn-icon { background: rgba(214,125,0,.12); }
  .mockup-btn-archive .mockup-btn-icon { background: rgba(124,77,255,.12); }
  .mockup-badge-new {
    margin-left: auto; font-size: 10px; font-weight: 700;
    background: var(--blue-400); color: white;
    border-radius: 100px; padding: 2px 8px;
  }
  .mockup-float-badge {
    position: absolute; top: -14px; right: -16px;
    background: white; border-radius: 14px;
    padding: 10px 14px; box-shadow: var(--shadow-md);
    font-size: 12px; font-weight: 600; color: var(--blue-700);
    display: flex; align-items: center; gap: 7px;
    animation: badgePop 3s ease-in-out infinite;
  }
  .mockup-float-badge-2 {
    position: absolute; bottom: 40px; left: -24px;
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    color: white; border-radius: 14px;
    padding: 10px 14px; box-shadow: var(--shadow-md);
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; gap: 7px;
    animation: badgePop 3s ease-in-out 1.5s infinite;
  }
  @keyframes badgePop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

  /* ===================== LOGOS STRIP ===================== */
  .logos-section { padding: 50px 0; background: var(--white); border-bottom: 1px solid var(--gray-100); }
  .logos-label {
    text-align: center; font-size: 13px; font-weight: 600;
    color: var(--gray-500); text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 28px;
  }
  .logos-track {
    overflow: hidden; position: relative;
  }
  .logos-track::before, .logos-track::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  }
  .logos-track::before { left: 0; background: linear-gradient(to right, white, transparent); }
  .logos-track::after  { right: 0; background: linear-gradient(to left, white, transparent); }
  .logos-row {
    display: flex; gap: 60px; align-items: center;
    animation: scrollLogos 22s linear infinite;
    width: max-content;
  }
  @keyframes scrollLogos { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .logo-item {
    background: var(--gray-100); border-radius: 10px;
    padding: 10px 20px; font-family: var(--font-display);
    font-weight: 700; font-size: 14px; color: var(--gray-500);
    white-space: nowrap;
  }

  /* ===================== FEATURES ===================== */
  .features { padding: 110px 0; background: var(--white); }
  .section-header { text-align: center; margin-bottom: 70px; }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(34px,4vw,54px);
    font-weight: 800; line-height: 1.12;
    letter-spacing: -.02em; color: var(--blue-900);
    margin-top: 14px; margin-bottom: 18px;
  }
  .section-sub {
    font-size: 17px; color: var(--gray-500);
    max-width: 520px; margin: 0 auto;
    font-weight: 300; line-height: 1.7;
  }

  .features-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .feature-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 38px 36px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative; overflow: hidden;
  }
  .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
  .feature-card.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .feature-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 22px;
  }
  .feature-icon.green  { background: #e8fdf5; }
  .feature-icon.blue   { background: var(--blue-10); }
  .feature-icon.orange { background: #fff5e8; }
  .feature-icon.purple { background: #f5f0ff; }
  .feature-icon.teal   { background: #e8fbff; }
  .feature-card h3 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    color: var(--blue-900); margin-bottom: 10px;
  }
  .feature-card p { font-size: 15px; color: var(--gray-500); line-height: 1.7; }
  .feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .feature-tag {
    font-size: 12px; font-weight: 600; padding: 5px 12px;
    border-radius: 100px; background: var(--blue-10); color: var(--blue-500);
    border: 1px solid var(--blue-50);
  }

  .feature-demo {
    background: white; border-radius: var(--radius-md);
    border: 1px solid var(--gray-100); overflow: hidden;
    box-shadow: var(--shadow-md);
  }
  .demo-bar {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
  }
  .demo-bar span { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500; }
  .demo-bar-dots { display: flex; gap: 5px; }
  .demo-bar-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
  .demo-bar-dots i:nth-child(1){ background: #ff5f57; }
  .demo-bar-dots i:nth-child(2){ background: #febc2e; }
  .demo-bar-dots i:nth-child(3){ background: #28c840; }
  .demo-content { padding: 16px; }
  .demo-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 8px;
    font-size: 13px; font-weight: 500;
    transition: background .2s;
  }
  .demo-row:hover { background: var(--blue-10); }
  .demo-row-name { color: var(--blue-800); }
  .demo-row-status {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 100px;
  }
  .status-sent     { background: #e8fdf5; color: #00a870; }
  .status-pending  { background: #fff5e8; color: #d67d00; }
  .status-archived { background: #f5f0ff; color: #7c4dff; }

  /* ===================== HOW IT WORKS ===================== */
  .how-it-works {
    padding: 110px 0;
    background: linear-gradient(160deg, var(--blue-900), var(--blue-700));
    position: relative; overflow: hidden;
  }
  .how-it-works::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='%23ffffff' fill-opacity='0.03'%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");
  }
  .how-it-works .section-title { color: white; }
  .how-it-works .section-sub { color: rgba(255,255,255,.65); }
  .how-it-works .chip { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.2); }
  .steps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 28px; margin-top: 60px;
  }
  .step-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    text-align: center; position: relative;
    transition: background .3s, transform .3s;
  }
  .step-card:hover { background: rgba(255,255,255,.12); transform: translateY(-6px); }
  .step-number {
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-400), var(--accent));
    color: white; font-family: var(--font-display);
    font-size: 18px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 20px rgba(0,200,255,.3);
  }
  .step-card h3 {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: white; margin-bottom: 12px;
  }
  .step-card p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }
  .step-connector {
    position: absolute; top: 56px; right: -14px;
    width: 28px; height: 2px;
    background: linear-gradient(to right, var(--blue-400), transparent);
    display: none;
  }

  /* ===================== TESTIMONIALS ===================== */
  .testimonials { padding: 110px 0; background: var(--gray-50); }
  .testimonials-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 60px;
  }
  .testimonial-card {
    background: white; border-radius: var(--radius-md);
    border: 1px solid var(--gray-100);
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s;
  }
  .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .testimonial-stars { color: #fbbf24; font-size: 15px; margin-bottom: 14px; letter-spacing: 2px; }
  .testimonial-text {
    font-size: 15px; color: var(--blue-800);
    line-height: 1.75; font-style: italic; margin-bottom: 22px;
  }
  .testimonial-author { display: flex; align-items: center; gap: 12px; }
  .testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800;
    font-size: 14px; color: white; flex-shrink: 0;
  }
  .testimonial-name { font-weight: 700; font-size: 14px; color: var(--blue-900); }
  .testimonial-role { font-size: 12px; color: var(--gray-500); }

  /* ===================== PRICING ===================== */
  .pricing { padding: 110px 0; background: white; }
  .pricing-toggle-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin: 36px 0 60px;
  }
  .toggle-label { font-size: 15px; font-weight: 500; color: var(--blue-700); }
  .toggle-label.active { color: var(--blue-900); font-weight: 700; }
  .toggle-switch {
    position: relative; width: 52px; height: 28px; cursor: pointer;
  }
  .toggle-switch input { display: none; }
  .toggle-track {
    position: absolute; inset: 0; border-radius: 100px;
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    transition: background .3s;
  }
  .toggle-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: white; box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: transform .3s;
  }
  .toggle-switch input:not(:checked) ~ .toggle-thumb { transform: translateX(0); }
  .toggle-switch input:checked ~ .toggle-thumb { transform: translateX(24px); }
  .toggle-badge {
    background: linear-gradient(135deg, var(--success), #00a870);
    color: white; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 100px;
    box-shadow: 0 2px 10px rgba(0,200,150,.3);
  }

  .pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; align-items: start;
  }
  .price-card {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 38px 32px;
    position: relative;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    background: white;
  }
  .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .price-card.featured {
    border-color: var(--blue-400);
    box-shadow: 0 0 0 3px rgba(46,134,193,.12), var(--shadow-md);
    transform: scale(1.04);
    background: linear-gradient(160deg, #f0f8ff, white);
  }
  .price-card.featured:hover { transform: scale(1.04) translateY(-6px); }
  .price-popular-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    color: white; font-size: 12px; font-weight: 700;
    padding: 5px 18px; border-radius: 100px;
    box-shadow: 0 4px 12px rgba(46,134,193,.3);
    white-space: nowrap;
  }
  .price-plan { font-size: 13px; font-weight: 700; color: var(--blue-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
  .price-desc { font-size: 13.5px; color: var(--gray-500); line-height: 1.6; margin-bottom: 28px; }
  .price-amount {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 6px;
  }
  .price-currency { font-size: 22px; font-weight: 700; color: var(--blue-800); margin-top: 8px; }
  .price-number {
    font-family: var(--font-display);
    font-size: 56px; font-weight: 800; color: var(--blue-900);
    line-height: 1; transition: all .3s;
  }
  .price-period { font-size: 14px; color: var(--gray-500); }
  .price-billing { font-size: 12.5px; color: var(--gray-500); margin-bottom: 8px; }
  .price-saving {
    display: inline-flex; font-size: 12px; font-weight: 700;
    color: var(--success); background: #e8fdf5; border-radius: 100px;
    padding: 3px 10px; margin-bottom: 24px;
    opacity: 0; transition: opacity .3s;
  }
  .price-saving.show { opacity: 1; }
  .price-divider { border: none; border-top: 1px solid var(--gray-100); margin-bottom: 24px; }
  .price-features-list { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; }
  .price-features-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--blue-800); line-height: 1.5;
  }
  .price-check {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--blue-10); color: var(--blue-500);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; flex-shrink: 0; margin-top: 2px;
  }
  .price-card.featured .price-check { background: linear-gradient(135deg, var(--blue-400), var(--accent2)); color: white; }
  .price-trial { text-align: center; font-size: 12px; color: var(--gray-500); margin-top: 10px; }

  /* Enterprise card */
  .price-enterprise {
    background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
    border-color: var(--blue-700);
    color: white;
  }
  .price-enterprise .price-plan { color: var(--accent); }
  .price-enterprise .price-desc { color: rgba(255,255,255,.65); }
  .price-enterprise .price-currency,
  .price-enterprise .price-number,
  .price-enterprise .price-period { color: white; }
  .price-enterprise .price-billing { color: rgba(255,255,255,.6); }
  .price-enterprise .price-divider { border-color: rgba(255,255,255,.15); }
  .price-enterprise .price-features-list li { color: rgba(255,255,255,.85); }
  .price-enterprise .price-check { background: rgba(255,255,255,.15); color: var(--accent); }
  .price-enterprise:hover { box-shadow: 0 20px 60px rgba(10,22,40,.3); }

  /* ===================== CTA SECTION ===================== */
  .cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    text-align: center; position: relative; overflow: hidden;
  }
  .cta-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,200,255,.15), transparent 60%);
  }
  .cta-title {
    font-family: var(--font-display);
    font-size: clamp(36px,5vw,60px);
    font-weight: 800; line-height: 1.1;
    color: white; margin-bottom: 20px;
    letter-spacing: -.02em;
  }
  .cta-sub { font-size: 18px; color: rgba(255,255,255,.7); margin-bottom: 40px; font-weight: 300; }
  .cta-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
  .cta-note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.5); }

  /* ===================== FOOTER ===================== */
  footer {
    background: var(--blue-900);
    padding: 70px 0 30px;
    color: rgba(255,255,255,.6);
  }
  .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px; margin-bottom: 56px;
  }
  .footer-brand .nav-logo { margin-bottom: 16px; display: inline-flex; }
  .footer-brand .nav-logo-text { color: white; }
  .footer-tagline { font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
  .footer-col h4 {
    font-family: var(--font-display); font-size: 14px; font-weight: 700;
    color: white; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .06em;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul a { text-decoration: none; color: rgba(255,255,255,.55); font-size: 14px; transition: color .2s; }
  .footer-col ul a:hover { color: white; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-bottom p { font-size: 13px; }
  .footer-badges { display: flex; gap: 10px; }
  .footer-badge {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px; padding: 6px 12px;
    font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500;
  }

  /* ===================== HIPAA STRIP ===================== */
  .compliance-strip {
    background: var(--blue-10); border-top: 1px solid var(--blue-50); border-bottom: 1px solid var(--blue-50);
    padding: 20px 0;
  }
  .compliance-inner {
    display: flex; justify-content: center; align-items: center;
    gap: 40px; flex-wrap: wrap;
  }
  .compliance-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--blue-700);
  }
  .compliance-item span { font-size: 18px; }

  /* ===================== DEMO SECTION ===================== */
  .demo-section {
    padding: 110px 0;
    background: linear-gradient(160deg, #f0f7ff 0%, #e8f4fd 50%, #ddeeff 100%);
    position: relative; overflow: hidden;
  }
  .demo-section::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 50% at 80% 20%, rgba(46,134,193,.13), transparent),
      radial-gradient(ellipse 50% 60% at 10% 80%, rgba(0,200,255,.09), transparent);
  }
  .demo-inner {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    position: relative;
  }
  .demo-phone-wrap {
    margin-top: 56px; position: relative; display: inline-block;
    cursor: pointer;
  }
  /* Portrait phone shell */
  .demo-phone-shell {
    width: 260px;
    background: var(--blue-900);
    border-radius: 40px;
    padding: 14px 10px;
    box-shadow:
      0 40px 100px rgba(10,22,40,.30),
      0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 0 1px rgba(255,255,255,.04);
    position: relative;
  }
  .demo-phone-notch {
    width: 80px; height: 22px; background: var(--blue-900);
    border-radius: 0 0 16px 16px;
    margin: 0 auto 10px; position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .demo-phone-notch-cam {
    width: 8px; height: 8px; border-radius: 50%;
    background: #1a2d45;
    border: 1.5px solid rgba(255,255,255,.1);
  }
  .demo-phone-screen {
    border-radius: 28px; overflow: hidden;
    background: #000;
    aspect-ratio: 9/16;
    position: relative;
  }
  .demo-phone-screen video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 28px;
  }
  /* Play button overlay on phone shell */
  .demo-play-overlay {
    position: absolute; inset: 0; border-radius: 40px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; z-index: 10;
    background: linear-gradient(160deg, rgba(10,22,40,.25), rgba(15,52,96,.35));
    border-radius: 40px;
    transition: background .3s;
  }
  .demo-phone-wrap:hover .demo-play-overlay {
    background: linear-gradient(160deg, rgba(10,22,40,.1), rgba(15,52,96,.18));
  }
  .demo-play-btn {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(255,255,255,.97);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 0 0 10px rgba(255,255,255,.18);
    transition: transform .25s, box-shadow .25s;
  }
  .demo-phone-wrap:hover .demo-play-btn {
    transform: scale(1.1);
    box-shadow: 0 12px 50px rgba(0,0,0,.4), 0 0 0 14px rgba(255,255,255,.2);
  }
  .demo-play-btn svg { margin-left: 5px; }
  .demo-play-label {
    color: white; font-size: 13px; font-weight: 600;
    letter-spacing: .04em; text-shadow: 0 1px 8px rgba(0,0,0,.5);
  }
  /* Floating badges around phone */
  .demo-float-1 {
    position: absolute; top: 30px; left: -130px;
    background: white; border-radius: 14px;
    padding: 12px 16px; box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 600; color: var(--blue-700);
    display: flex; align-items: center; gap: 8px;
    animation: badgePop 4s ease-in-out infinite;
    white-space: nowrap;
  }
  .demo-float-2 {
    position: absolute; bottom: 60px; right: -140px;
    background: linear-gradient(135deg, var(--blue-500), var(--accent2));
    color: white; border-radius: 14px;
    padding: 12px 16px; box-shadow: var(--shadow-md);
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    animation: badgePop 4s ease-in-out 2s infinite;
    white-space: nowrap;
  }
  .demo-float-3 {
    position: absolute; bottom: 160px; left: -120px;
    background: #e8fdf5; border: 1px solid #b8f0de;
    border-radius: 14px; padding: 10px 14px;
    box-shadow: var(--shadow-sm);
    font-size: 12px; font-weight: 700; color: #00a870;
    display: flex; align-items: center; gap: 7px;
    animation: badgePop 4s ease-in-out 1s infinite;
    white-space: nowrap;
  }
  .demo-stats-row {
    display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
    margin-top: 64px;
  }
  .demo-stat {
    text-align: center;
  }
  .demo-stat-number {
    font-family: var(--font-display);
    font-size: 42px; font-weight: 800;
    background: linear-gradient(135deg, var(--blue-500), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
  }
  .demo-stat-label { font-size: 14px; color: var(--gray-500); margin-top: 6px; }

  /* ===================== VIDEO LIGHTBOX ===================== */
  .lightbox-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(5, 12, 30, 0.88);
    backdrop-filter: blur(14px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .35s cubic-bezier(.22,1,.36,1);
  }
  .lightbox-overlay.open {
    opacity: 1; pointer-events: all;
  }
  .lightbox-inner {
    position: relative;
    width: min(340px, 88vw);
    transform: scale(.88) translateY(30px);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
  }
  .lightbox-overlay.open .lightbox-inner {
    transform: scale(1) translateY(0);
  }
  /* Portrait phone chrome around video */
  .lightbox-phone {
    background: #0a1628;
    border-radius: 44px;
    padding: 16px 12px 24px;
    box-shadow:
      0 50px 120px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.1),
      inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .lightbox-notch {
    width: 90px; height: 24px; background: #0a1628;
    border-radius: 0 0 18px 18px;
    margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .lightbox-notch-cam {
    width: 9px; height: 9px; border-radius: 50%;
    background: #1a2d45; border: 1.5px solid rgba(255,255,255,.12);
  }
  .lightbox-screen {
    border-radius: 32px; overflow: hidden;
    background: #000;
    aspect-ratio: 9/16;
    position: relative;
  }
  .lightbox-screen video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Side buttons on phone chrome */
  .lightbox-btn-bar {
    position: absolute; right: -10px; top: 120px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .lightbox-side-btn {
    width: 4px; height: 32px; background: #1c2e4a;
    border-radius: 4px;
  }
  .lightbox-btn-bar-left {
    position: absolute; left: -10px; top: 100px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .lightbox-side-btn-l {
    width: 4px; background: #1c2e4a; border-radius: 4px;
  }
  /* Close button */
  .lightbox-close {
    position: absolute; top: -18px; right: -18px;
    width: 42px; height: 42px; border-radius: 50%;
    background: white; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    transition: transform .2s, background .2s;
    z-index: 10;
  }
  .lightbox-close:hover { transform: scale(1.1) rotate(90deg); background: #f0f4f8; }
  .lightbox-close svg { width: 16px; height: 16px; stroke: var(--blue-900); stroke-width: 2.5; }
  /* Label under phone */
  .lightbox-caption {
    text-align: center; margin-top: 20px;
    color: rgba(255,255,255,.6); font-size: 13px;
  }
  .lightbox-caption strong { color: white; }


    /* ===================== MOBILE ===================== */
  @media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-sub { max-width: 100%; }
    .hero-ctas { justify-content: center; }
    .hero-trust { justify-content: center; }
    .hero-mockup { display: none; }
    .features-grid { grid-template-columns: 1fr; }
    .feature-card.wide { grid-column: span 1; grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .price-card.featured { transform: none; }
    .price-card.featured:hover { transform: translateY(-6px); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .nav-links, .nav-actions { display: none; }
    .mobile-menu-btn { display: flex; }
    .demo-float-1, .demo-float-2, .demo-float-3 { display: none; }
    .demo-stats-row { gap: 24px; }
    .demo-stat-number { font-size: 32px; }
    .lightbox-inner { width: min(300px, 92vw); }

    .navbar { top: 12px; padding: 0 12px; }
    .navbar.scrolled { top: 8px; }
    .nav-shell { padding: 9px 10px 9px 14px; border-radius: 28px; }
    .nav-inner { gap: 12px; }
    .nav-logo-text { font-size: 18px; }
    .nav-logo-icon { width: 36px; height: 36px; border-radius: 11px; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav-panel {
      display: block;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-8px);
      transition: max-height .36s ease, opacity .25s ease, transform .25s ease, padding .25s ease;
    }
    .navbar.menu-open .mobile-nav-panel {
      max-height: 430px;
      opacity: 1;
      transform: translateY(0);
      padding-top: 14px;
    }
    .mobile-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px;
      border-radius: 22px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(255,255,255,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    }
    .mobile-nav-list a {
      display: block;
      padding: 12px 14px;
      color: var(--blue-700);
      font-weight: 700;
      text-decoration: none;
      border-radius: 16px;
      transition: background .22s ease, color .22s ease;
    }
    .mobile-nav-list a:hover { background: var(--blue-10); color: var(--blue-500); }
    .mobile-nav-cta {
      margin: 8px;
      display: block;
      text-align: center;
      padding: 13px 16px;
      background: linear-gradient(135deg, var(--blue-400), var(--accent2));
      color: white;
      border-radius: 999px;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 10px 28px rgba(46,134,193,.28);
    }
    .hero { padding-top: 145px; }
  }


  /* ===================== THEME TOGGLE + SMOOTH SECTION GRADIENTS ===================== */
  body, .nav-shell, section, .compliance-strip, .logos-section, .features, .testimonials, .pricing, .demo-section, footer,
  .feature-card, .testimonial-card, .price-card, .feature-demo, .mobile-nav-list, .demo-phone-shell {
    transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 5px 9px;
    border: 1px solid rgba(127,179,211,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    color: var(--blue-800);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .theme-icon {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: saturate(1.08);
  }

  .theme-toggle-track {
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d6eaf8, #ffffff);
    border: 1px solid rgba(127,179,211,.55);
    position: relative;
    box-shadow: inset 0 2px 6px rgba(10,22,40,.08);
  }

  .theme-toggle-thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff, #f8fafd);
    box-shadow: 0 2px 7px rgba(10,22,40,.25);
    transition: transform .28s ease, background .28s ease;
  }

  body.dark-mode .theme-toggle-track {
    background: linear-gradient(135deg, #0a1628, #1a5276);
    border-color: rgba(255,255,255,.18);
  }

  body.dark-mode .theme-toggle-thumb {
    transform: translateX(19px);
    background: linear-gradient(135deg, #00c8ff, #ffffff);
  }

  /* Light mode section blending */
  .hero {
    background: linear-gradient(180deg, #eaf4fc 0%, #d6eaf8 70%, #edf7ff 100%);
  }

  .compliance-strip {
    background: linear-gradient(180deg, #edf7ff 0%, #eaf4fc 55%, #ffffff 100%);
    border-top: 0;
    border-bottom: 0;
  }

  .logos-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 60%, #ffffff 100%);
    border-bottom: 0;
  }

  .features {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #eef8ff 100%);
  }

  .how-it-works {
    background: linear-gradient(180deg, #eef8ff 0%, #0f3460 14%, #0a1628 82%, #eef2f7 100%);
  }

  .testimonials {
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafd 50%, #ffffff 100%);
  }

  .demo-section {
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 18%, #ddeeff 78%, #ffffff 100%);
  }

  .pricing {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 50%, #eaf4fc 100%);
  }

  .cta-section {
    background: linear-gradient(180deg, #eaf4fc 0%, #1a5276 16%, #0d2245 100%);
  }

  footer {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 28%, #ffffff 100%);
    color: var(--gray-700);
    border-top: 1px solid var(--gray-100);
  }

  .footer-brand .nav-logo-text,
  footer .nav-logo-text {
    color: var(--blue-800);
  }

  .footer-tagline {
    color: var(--gray-700);
  }

  .footer-col h4 {
    color: var(--blue-900);
  }

  .footer-col ul a {
    color: var(--blue-600);
  }

  .footer-col ul a:hover {
    color: var(--blue-400);
  }

  .footer-bottom {
    border-top: 1px solid var(--gray-100);
  }

  .footer-bottom p {
    color: var(--gray-700);
  }

  .footer-badge {
    background: var(--blue-10);
    border: 1px solid var(--blue-50);
    color: var(--blue-700);
  }

  /* Dark mode */
  body.dark-mode {
    background: #06101f;
    color: #eaf4fc;
    --white: #0a1628;
    --gray-50: #0d1e35;
    --gray-100: #173353;
    --gray-200: #26476b;
    --gray-500: #a9c4de;
    --gray-700: #d4e7f8;
    --blue-10: #0d2a48;
    --blue-50: #14385d;
    --blue-100: #1d527e;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.20);
    --shadow-md: 0 10px 34px rgba(0,0,0,.32);
    --shadow-lg: 0 24px 70px rgba(0,0,0,.42);
  }

  body.dark-mode .nav-shell {
    background: rgba(7,16,32,.72);
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 18px 55px rgba(0,0,0,.35);
  }

  body.dark-mode .nav-logo-text,
  body.dark-mode .nav-links a,
  body.dark-mode .mobile-menu-btn,
  body.dark-mode .theme-toggle {
    color: #eaf4fc;
  }

  body.dark-mode .nav-links a:hover,
  body.dark-mode .btn-ghost:hover {
    background: rgba(255,255,255,.08);
  }

  body.dark-mode .theme-toggle {
    background: rgba(10,22,40,.62);
    border-color: rgba(255,255,255,.14);
  }

  body.dark-mode .mobile-menu-btn {
    background: rgba(255,255,255,.08);
  }

  body.dark-mode .mobile-nav-list {
    background: rgba(7,16,32,.92);
    border-color: rgba(255,255,255,.12);
  }

  body.dark-mode .mobile-nav-list a {
    color: #eaf4fc;
  }

  body.dark-mode .mobile-nav-list a:hover {
    background: rgba(255,255,255,.08);
  }

  body.dark-mode .hero {
    background: linear-gradient(180deg, #06101f 0%, #0d2245 62%, #102c4d 100%);
  }

  body.dark-mode .compliance-strip {
    background: linear-gradient(180deg, #102c4d 0%, #0b1a31 60%, #071020 100%);
  }

  body.dark-mode .logos-section {
    background: linear-gradient(180deg, #071020 0%, #0a1628 60%, #0b1a31 100%);
  }

  body.dark-mode .features {
    background: linear-gradient(180deg, #0b1a31 0%, #071020 54%, #0d2245 100%);
  }

  body.dark-mode .how-it-works {
    background: linear-gradient(180deg, #0d2245 0%, #06101f 18%, #0a1628 78%, #0b1a31 100%);
  }

  body.dark-mode .testimonials {
    background: linear-gradient(180deg, #0b1a31 0%, #071020 50%, #0a1628 100%);
  }

  body.dark-mode .demo-section {
    background: linear-gradient(180deg, #0a1628 0%, #0d2245 18%, #102c4d 78%, #071020 100%);
  }

  body.dark-mode .pricing {
    background: linear-gradient(180deg, #071020 0%, #0a1628 54%, #0d2245 100%);
  }

  body.dark-mode .cta-section {
    background: linear-gradient(180deg, #0d2245 0%, #0f3460 16%, #06101f 100%);
  }

  body.dark-mode footer {
    background: linear-gradient(180deg, #06101f 0%, #ffffff 18%, #ffffff 100%);
    color: #4a5568;
    border-top: 0;
  }

  body.dark-mode footer .nav-logo-text,
  body.dark-mode footer .footer-col h4 {
    color: #0a1628;
  }

  body.dark-mode footer .footer-tagline,
  body.dark-mode footer .footer-bottom p {
    color: #4a5568;
  }

  body.dark-mode footer .footer-col ul a {
    color: #1a5276;
  }

  body.dark-mode footer .footer-col ul a:hover {
    color: #2e86c1;
  }

  body.dark-mode footer .footer-bottom {
    border-top-color: #eef2f7;
  }

  body.dark-mode footer .footer-badge {
    background: #eaf4fc;
    border-color: #d6eaf8;
    color: #0f3460;
  }

  body.dark-mode .hero-title,
  body.dark-mode .section-title,
  body.dark-mode .feature-card h3,
  body.dark-mode .price-number,
  body.dark-mode .price-currency,
  body.dark-mode .price-period,
  body.dark-mode .testimonial-name,
  body.dark-mode .price-features-list li,
  body.dark-mode .demo-row-name {
    color: #f8fafd;
  }

  body.dark-mode .hero-sub,
  body.dark-mode .section-sub,
  body.dark-mode .feature-card p,
  body.dark-mode .testimonial-text,
  body.dark-mode .price-desc,
  body.dark-mode .price-billing,
  body.dark-mode .price-trial,
  body.dark-mode .demo-stat-label {
    color: #a9c4de;
  }

  body.dark-mode .feature-card,
  body.dark-mode .testimonial-card,
  body.dark-mode .price-card,
  body.dark-mode .feature-demo,
  body.dark-mode .mockup-phone,
  body.dark-mode .demo-row,
  body.dark-mode .demo-phone-shell {
    background: rgba(13,30,53,.86);
    border-color: rgba(255,255,255,.1);
  }

  body.dark-mode .price-card.featured {
    background: linear-gradient(160deg, rgba(15,52,96,.72), rgba(13,30,53,.94));
  }

  body.dark-mode .price-enterprise {
    background: linear-gradient(135deg, #050b16, #0f3460);
  }

  body.dark-mode .mockup-body,
  body.dark-mode .demo-content,
  body.dark-mode .mockup-note-text {
    background: rgba(7,16,32,.62);
  }

  body.dark-mode .mockup-note-text,
  body.dark-mode .mockup-section-label {
    color: #a9c4de;
  }

  body.dark-mode .logo-item {
    background: rgba(255,255,255,.08);
    color: #cde6f8;
  }

  body.dark-mode .logos-track::before { background: linear-gradient(to right, #071020, transparent); }
  body.dark-mode .logos-track::after { background: linear-gradient(to left, #0b1a31, transparent); }

  @media (max-width: 900px) {
    .theme-toggle {
      margin-left: auto;
      height: 38px;
      padding: 5px 7px;
    }

    .theme-icon {
      font-size: 12px;
    }

    .theme-toggle-track {
      width: 38px;
      height: 21px;
    }

    .theme-toggle-thumb {
      width: 15px;
      height: 15px;
    }

    body.dark-mode .theme-toggle-thumb {
      transform: translateX(17px);
    }
  }

  @media (max-width: 480px) {
    .nav-logo-text { font-size: 16px; }
  }


  /* ===================== FINAL REFINEMENTS: DEFAULT LIGHT MODE, SHORTER GRADIENT BLENDS, DEMO TEXT ANIMATION, FAVICON SUPPORT ===================== */
  .demo-attention {
    font-weight: 800;
    background: linear-gradient(90deg, var(--blue-500), var(--accent), var(--accent2), var(--blue-400), var(--blue-500));
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: demoTextFlow 3.2s ease-in-out infinite;
    text-shadow: none;
  }

  .btn-secondary .demo-attention {
    letter-spacing: .01em;
  }

  .demo-play-label.demo-attention {
    font-size: 13px;
    letter-spacing: .05em;
    filter: drop-shadow(0 2px 8px rgba(0, 102, 255, .28));
  }

  @keyframes demoTextFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .hero {
    background: linear-gradient(180deg, #eaf4fc 0%, #d6eaf8 88%, #edf7ff 100%);
  }

  .compliance-strip {
    background: linear-gradient(180deg, #edf7ff 0%, #f5fbff 35%, #ffffff 100%);
  }

  .logos-section {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 82%, #ffffff 100%);
  }

  .features {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 82%, #eef8ff 100%);
  }

  .how-it-works {
    background: linear-gradient(180deg, #eef8ff 0%, #1a5276 7%, #0a1628 92%, #eef2f7 100%);
  }

  .testimonials {
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafd 16%, #ffffff 100%);
  }

  .demo-section {
    background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 10%, #ddeeff 90%, #ffffff 100%);
  }

  .pricing {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafd 84%, #eaf4fc 100%);
  }

  .cta-section {
    background: linear-gradient(180deg, #eaf4fc 0%, #1a5276 7%, #0d2245 100%);
  }

  footer {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 14%, #ffffff 100%);
  }

  body.dark-mode .hero {
    background: linear-gradient(180deg, #06101f 0%, #0d2245 88%, #102c4d 100%);
  }

  body.dark-mode .compliance-strip {
    background: linear-gradient(180deg, #102c4d 0%, #0b1a31 28%, #071020 100%);
  }

  body.dark-mode .logos-section {
    background: linear-gradient(180deg, #071020 0%, #0a1628 82%, #0b1a31 100%);
  }

  body.dark-mode .features {
    background: linear-gradient(180deg, #0b1a31 0%, #071020 84%, #0d2245 100%);
  }

  body.dark-mode .how-it-works {
    background: linear-gradient(180deg, #0d2245 0%, #06101f 8%, #0a1628 92%, #0b1a31 100%);
  }

  body.dark-mode .testimonials {
    background: linear-gradient(180deg, #0b1a31 0%, #071020 18%, #0a1628 100%);
  }

  body.dark-mode .demo-section {
    background: linear-gradient(180deg, #0a1628 0%, #0d2245 10%, #102c4d 90%, #071020 100%);
  }

  body.dark-mode .pricing {
    background: linear-gradient(180deg, #071020 0%, #0a1628 84%, #0d2245 100%);
  }

  body.dark-mode .cta-section {
    background: linear-gradient(180deg, #0d2245 0%, #0f3460 8%, #06101f 100%);
  }

  body.dark-mode footer {
    background: linear-gradient(180deg, #06101f 0%, #ffffff 10%, #ffffff 100%);
  }


  /* ===================== DEVICE COMPATIBILITY SECTION ===================== */
  .device-section {
    padding: 110px 0;
    background: linear-gradient(180deg, #eef8ff 0%, #ffffff 14%, #f8fafd 88%, #eef2f7 100%);
    position: relative; overflow: hidden;
  }
  body.dark-mode .device-section {
    background: linear-gradient(180deg, #0d2245 0%, #071020 14%, #0a1628 88%, #0b1a31 100%);
  }
  .device-section::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 44% 38% at 8% 14%, rgba(0,200,255,.10), transparent 68%),
      radial-gradient(ellipse 50% 44% at 92% 72%, rgba(46,134,193,.13), transparent 70%);
  }

  /* Platform row — desktop + mobile */
  .device-hero-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-top: 64px;
    margin-bottom: 72px;
  }

  /* Desktop browser mockup */
  .device-desktop-wrap {
    position: relative;
  }
  .device-browser {
    background: white;
    border-radius: 16px;
    box-shadow: 0 28px 72px rgba(10,22,40,.18), 0 0 0 1px rgba(0,0,0,.06);
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
  }
  .device-browser:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 90px rgba(10,22,40,.22);
  }
  .device-browser-bar {
    background: linear-gradient(180deg, #f5f7fa, #eef2f7);
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
  }
  .device-browser-dots { display: flex; gap: 5px; }
  .device-browser-dots i {
    width: 10px; height: 10px; border-radius: 50%; display: block;
  }
  .device-browser-dots i:nth-child(1) { background: #ff5f57; }
  .device-browser-dots i:nth-child(2) { background: #febc2e; }
  .device-browser-dots i:nth-child(3) { background: #28c840; }
  .device-browser-url {
    flex: 1; background: white; border-radius: 6px;
    border: 1px solid rgba(0,0,0,.09);
    padding: 5px 12px; font-size: 12px;
    color: #6b7a99; display: flex; align-items: center; gap: 6px;
  }
  .device-browser-url svg { flex-shrink: 0; }
  .device-browser-screen {
    padding: 18px;
    background: linear-gradient(160deg, #f0f7ff, #e8f4fd);
    min-height: 220px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .browser-screen-topbar {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    border-radius: 10px; padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
    color: white; font-size: 12px; font-weight: 600;
  }
  .browser-screen-topbar-logo {
    font-family: var(--font-display); font-size: 13px; font-weight: 800;
  }
  .browser-screen-badge {
    background: rgba(255,255,255,.2); border-radius: 99px;
    padding: 3px 10px; font-size: 10px; font-weight: 700;
  }
  .browser-screen-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1;
  }
  .browser-mini-card {
    background: white; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    padding: 10px 12px; box-shadow: 0 2px 8px rgba(10,22,40,.06);
  }
  .browser-mini-card-label {
    font-size: 10px; font-weight: 700; color: var(--blue-400);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
  }
  .browser-mini-card-val {
    font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--blue-900);
  }
  .browser-mini-card-sub { font-size: 10px; color: var(--gray-500); margin-top: 2px; }
  .browser-wide-row {
    background: white; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.06);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 8px rgba(10,22,40,.06);
  }
  .browser-wide-dot {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .browser-wide-name { font-size: 11px; font-weight: 600; color: var(--blue-800); }
  .browser-wide-meta { font-size: 10px; color: var(--gray-500); }
  .browser-wide-status {
    margin-left: auto; font-size: 10px; font-weight: 700;
    padding: 3px 9px; border-radius: 99px;
  }
  .s-green { background: #e8fdf5; color: #00a870; }
  .s-amber { background: #fff5e8; color: #d67d00; }

  body.dark-mode .device-browser {
    background: #0d1e35; box-shadow: 0 28px 72px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08);
  }
  body.dark-mode .device-browser-bar { background: #071020; border-color: rgba(255,255,255,.08); }
  body.dark-mode .device-browser-url { background: #0a1628; border-color: rgba(255,255,255,.1); color: #6a94b4; }
  body.dark-mode .device-browser-screen { background: linear-gradient(160deg, #0d2245, #0b1a31); }
  body.dark-mode .browser-mini-card, body.dark-mode .browser-wide-row { background: rgba(13,30,53,.86); border-color: rgba(255,255,255,.1); }
  body.dark-mode .browser-mini-card-val { color: #f8fafd; }
  body.dark-mode .browser-wide-name { color: #d4e7f8; }

  /* Mobile phone stack */
  .device-phones-col {
    display: flex; flex-direction: column; gap: 0; align-items: center;
  }
  .device-phones-row {
    display: flex; gap: 22px; align-items: flex-end; justify-content: center;
  }

  /* Individual phone shells */
  .dphone {
    background: #0a1628;
    border-radius: 28px;
    padding: 10px 8px;
    box-shadow: 0 24px 60px rgba(10,22,40,.28), 0 0 0 1px rgba(255,255,255,.08);
    position: relative;
    transition: transform .3s, box-shadow .3s;
  }
  .dphone:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 36px 80px rgba(10,22,40,.34); }
  .dphone.iphone { width: 120px; border-radius: 28px; background: #1a1a2a; }
  .dphone.samsung { width: 110px; border-radius: 24px; background: #0d1520; }
  .dphone.tablet { width: 180px; border-radius: 22px; background: #111827; }
  .dphone-notch {
    width: 50px; height: 16px; background: inherit;
    border-radius: 0 0 12px 12px;
    margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .dphone.samsung .dphone-notch { width: 12px; height: 12px; border-radius: 50%; margin-bottom: 6px; }
  .dphone.tablet .dphone-notch { width: 14px; height: 14px; border-radius: 50%; }
  .dphone-notch-cam {
    width: 7px; height: 7px; border-radius: 50%;
    background: #1e2d40; border: 1px solid rgba(255,255,255,.1);
  }
  .dphone-screen {
    border-radius: 20px; overflow: hidden; background: var(--blue-900);
    position: relative;
  }
  .dphone.iphone .dphone-screen { border-radius: 22px; aspect-ratio: 9/18; }
  .dphone.samsung .dphone-screen { border-radius: 18px; aspect-ratio: 9/18; }
  .dphone.tablet .dphone-screen { border-radius: 16px; aspect-ratio: 4/3; }

  /* Mini screen contents */
  .dscreen-header {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    padding: 8px; font-size: 8px; font-weight: 700;
    color: white; text-align: center;
  }
  .dscreen-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; }
  .dscreen-row {
    background: rgba(255,255,255,.07); border-radius: 5px;
    padding: 4px 6px; font-size: 7px; color: rgba(255,255,255,.7);
    display: flex; align-items: center; gap: 4px;
  }
  .dscreen-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  }
  .dscreen-btn {
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    border-radius: 5px; padding: 4px 6px;
    font-size: 7px; font-weight: 800; color: white;
    text-align: center; margin-top: 2px;
  }

  /* Tablet landscape screen */
  .dscreen-tablet-body {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 6px; background: linear-gradient(135deg, #0d2245, #0b1a31);
  }
  .dscreen-tablet-card {
    background: rgba(255,255,255,.08); border-radius: 5px;
    padding: 5px 6px; font-size: 7px; color: rgba(255,255,255,.7);
  }
  .dscreen-tablet-card-num {
    font-family: var(--font-display); font-size: 13px; font-weight: 800;
    color: white; line-height: 1;
  }
  .dscreen-tablet-card-label { font-size: 6px; color: rgba(255,255,255,.5); margin-top: 1px; }

  /* Brand label under each phone */
  .dphone-label {
    text-align: center; margin-top: 10px;
    font-size: 11px; font-weight: 700;
    color: var(--blue-600);
  }
  .dphone-label small { display: block; font-size: 10px; color: var(--gray-500); font-weight: 400; }

  /* Features strip below phones/desktop */
  .device-features-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-top: 48px;
  }
  .device-feat {
    background: white;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
  }
  .device-feat:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--blue-100);
  }
  .device-feat-icon {
    font-size: 32px; margin-bottom: 12px;
    display: block; line-height: 1;
  }
  .device-feat h4 {
    font-family: var(--font-display);
    font-size: 15px; font-weight: 700;
    color: var(--blue-900); margin-bottom: 8px;
  }
  .device-feat p {
    font-size: 13px; color: var(--gray-500); line-height: 1.6;
  }
  .device-feat-tag {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 12px; font-size: 11px; font-weight: 700;
    color: var(--blue-400); background: var(--blue-10);
    border: 1px solid var(--blue-50); border-radius: 99px;
    padding: 3px 10px;
  }

  /* Platform badge row */
  .device-platform-badges {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; margin-top: 48px;
  }
  .platform-badge {
    display: flex; align-items: center; gap: 9px;
    background: white; border: 1.5px solid var(--gray-100);
    border-radius: 99px; padding: 9px 18px;
    font-size: 13.5px; font-weight: 700; color: var(--blue-800);
    box-shadow: var(--shadow-sm);
    transition: all .22s ease;
  }
  .platform-badge:hover {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--blue-500);
  }
  .platform-badge-icon { font-size: 20px; line-height: 1; }
  .platform-badge-sub { font-size: 11px; font-weight: 400; color: var(--gray-500); display: block; line-height: 1.2; margin-top: 1px; }

  body.dark-mode .device-feat {
    background: rgba(13,30,53,.86);
    border-color: rgba(255,255,255,.1);
  }
  body.dark-mode .device-feat h4 { color: #f8fafd; }
  body.dark-mode .device-feat p { color: #a9c4de; }
  body.dark-mode .device-feat-tag { background: #0d2a48; border-color: #1d3a5c; }
  body.dark-mode .platform-badge {
    background: rgba(13,30,53,.86);
    border-color: rgba(255,255,255,.12);
    color: #d4e7f8;
  }
  body.dark-mode .platform-badge:hover { border-color: var(--blue-300); color: #7fc8f0; }
  body.dark-mode .platform-badge-sub { color: #6a94b4; }
  body.dark-mode .dphone { box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }

  @media (max-width: 900px) {
    .device-hero-row { grid-template-columns: 1fr; gap: 36px; }
    .device-features-grid { grid-template-columns: repeat(2, 1fr); }
    .dphone.tablet { width: 150px; }
    .dphone.iphone { width: 100px; }
    .dphone.samsung { width: 90px; }
  }
  @media (max-width: 600px) {
    .device-features-grid { grid-template-columns: 1fr; }
    .device-phones-row { gap: 14px; }
    .dphone.tablet { width: 130px; }
    .dphone.iphone { width: 88px; }
    .dphone.samsung { width: 80px; }
  }


/* ===== FOOTER RESOURCES COLUMN ===== */
.footer-qr-block { margin-bottom: 16px; }
.footer-qr-trigger {
  display: flex; align-items: center; gap: 12px;
  border-radius: 18px; padding: 10px 12px;
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.footer-qr-trigger:hover { transform: translateY(-1px); }
.footer-qr-trigger:focus-visible { outline: 2px solid var(--accent, #00c8ff); outline-offset: 2px; }
.footer-qr-thumb {
  width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0;
  background: #fff; object-fit: contain; padding: 3px;
}
.footer-qr-caption { font-size: 13px; font-weight: 700; line-height: 1.4; }
.footer-link-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; transition: color .18s ease;
}

/* ===== QR / SELL SHEET LIGHTBOX ===== */
.nh-lightbox-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 16, 31, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 2.5s ease;
}
.nh-lightbox-overlay[hidden] { display: none; }
.nh-lightbox-overlay.is-open { opacity: 1; }
.nh-lightbox-box {
  position: relative; background-color: var(--white, #fff);
  border-radius: 28px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(10,22,40,.18));
  max-width: 420px; width: 100%; padding: 40px 32px 32px;
  text-align: center;
  opacity: 0; transform: scale(.88) translateY(24px);
  transition: opacity 2.5s cubic-bezier(.22,1,.36,1), transform 2.5s cubic-bezier(.22,1,.36,1),
              max-width 2.5s ease, min-height 2.5s ease, border-radius 2.5s ease, background-color 2.5s ease;
}
.nh-lightbox-overlay.is-open .nh-lightbox-box { opacity: 1; transform: scale(1) translateY(0); }
.nh-lightbox-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--gray-50, #f8fafd); color: var(--blue-800, #0d2245);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.nh-lightbox-close:hover { background: var(--gray-100, #eef2f7); transform: rotate(90deg); }
/* ===== PAYMENT LIGHTBOX (plan picker + Stripe checkout) ===== */
.nh-pay-panel { text-align: center; }
.nh-pay-logo { height: 34px; width: auto; margin: 0 auto 18px; display: block; }
.nh-pay-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.nh-pay-tab {
  border: 1px solid var(--gray-100, #eef2f7); background: var(--gray-50, #f8fafd);
  color: var(--blue-700, #0f3460); font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 100px; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nh-pay-tab:hover { background: var(--gray-100, #eef2f7); }
.nh-pay-tab.active {
  background: linear-gradient(135deg, var(--blue-400, #2e86c1), var(--accent2, #0066ff));
  color: #fff; border-color: transparent;
}
.nh-pay-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.nh-pay-toggle-label { font-size: 13px; font-weight: 500; color: var(--blue-700, #0f3460); }
.nh-pay-toggle-label.active { color: var(--blue-900, #0a1628); font-weight: 700; }
.nh-pay-switch { position: relative; width: 44px; height: 24px; cursor: pointer; flex: none; display: inline-block; }
.nh-pay-switch input { display: none; }
.nh-pay-switch-track { position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(135deg, var(--blue-400, #2e86c1), var(--accent2, #0066ff)); }
.nh-pay-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .3s; }
.nh-pay-switch input:checked ~ .nh-pay-switch-thumb { transform: translateX(20px); }
.nh-pay-plan-name { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--blue-900, #0a1628); margin: 0 0 4px; }
.nh-pay-price { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--blue-900, #0a1628); margin-bottom: 18px; }
.nh-pay-terms { list-style: none; margin: 0 0 22px; padding: 16px; text-align: left; background: var(--gray-50, #f8fafd); border-radius: 14px; border: 1px solid var(--gray-100, #eef2f7); }
.nh-pay-terms li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--gray-700, #4a5568); line-height: 1.5; padding: 5px 0; }
.nh-pay-check { color: var(--success, #00c896); font-weight: 800; flex: none; }
.nh-pay-note { font-size: 13.5px; color: var(--gray-700, #4a5568); line-height: 1.6; background: var(--gray-50, #f8fafd); border: 1px solid var(--gray-100, #eef2f7); border-radius: 14px; padding: 16px; margin-bottom: 22px; text-align: left; }
body.dark-mode .nh-pay-tab { background: #173353; border-color: #1d3a5c; color: #d4e7f8; }
body.dark-mode .nh-pay-tab.active { color: #fff; }
body.dark-mode .nh-pay-toggle-label { color: #d4e7f8; }
body.dark-mode .nh-pay-toggle-label.active { color: #f8fafd; }
body.dark-mode .nh-pay-plan-name,
body.dark-mode .nh-pay-price { color: #f8fafd; }
body.dark-mode .nh-pay-terms,
body.dark-mode .nh-pay-note { background: #0d1e35; border-color: #1d3a5c; color: #d4e7f8; }
@media (max-width: 600px) {
  .nh-pay-tabs { gap: 6px; }
  .nh-pay-tab { padding: 7px 12px; font-size: 12px; }
  .nh-pay-price { font-size: 26px; }
}
/* ===== STRIPE CHECKOUT TRANSITION + EMBEDDED BUY BUTTON =====
   Desktop: the lightbox box morphs to a new shape over 2.5s, then keeps
   that shape so the embedded Stripe payment form has room to sit inside
   the same lightbox.
   Mobile (<=600px): the shape never changes -- only the background tints
   grey for the 2.5s "preparing checkout" wait, then returns to white once
   the embedded payment form is ready. */
.nh-lightbox-box.nh-pay-shape-checkout {
  max-width: 480px;
  min-height: 420px;
  border-radius: 16px;
}
.nh-pay-loading-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; }
.nh-pay-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid var(--gray-100, #eef2f7); border-top-color: var(--blue-500, #1e6fa6);
  margin: 8px 0 22px; animation: nhPaySpin .9s linear infinite;
}
@keyframes nhPaySpin { to { transform: rotate(360deg); } }
.nh-pay-loading-note { font-size: 13.5px; color: var(--gray-700, #4a5568); line-height: 1.6; max-width: 280px; margin: 0 auto; }
body.dark-mode .nh-pay-spinner { border-color: #1d3a5c; border-top-color: var(--blue-400, #2e86c1); }
body.dark-mode .nh-pay-loading-note { color: #d4e7f8; }
.nh-pay-embed-panel { text-align: center; }
.nh-pay-buybutton-wrap { margin: 6px 0 18px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.nh-pay-fallback-link { display: inline-block; font-size: 12.5px; color: var(--blue-500, #1e6fa6); text-decoration: none; margin-bottom: 14px; }
.nh-pay-fallback-link:hover { text-decoration: underline; }
.nh-pay-back-link {
  border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--blue-700, #0f3460);
  padding: 6px 4px; margin-top: 4px;
}
.nh-pay-back-link:hover { text-decoration: underline; }
body.dark-mode .nh-pay-fallback-link { color: var(--blue-400, #2e86c1); }
body.dark-mode .nh-pay-back-link { color: #d4e7f8; }
@media (max-width: 600px) {
  .nh-lightbox-box.nh-pay-shape-checkout {
    max-width: 340px;
    min-height: 0;
    border-radius: 28px;
  }
  .nh-lightbox-box.nh-pay-loading-tint {
    background-color: #eef1f5;
  }
  body.dark-mode .nh-lightbox-box.nh-pay-loading-tint { background-color: #16273f; }
}
/* ===== SIGNUP + PAYMENT WIZARD (Start Free Trial) ===== */
.nh-lightbox-box.nh-wiz-shape { max-width: 560px; }
@media (max-width: 640px) {
  .nh-lightbox-box.nh-wiz-shape { max-width: 400px; }
}
.nh-wiz-panel { text-align: center; }
.nh-wiz-step-label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-500, #1e6fa6); margin-bottom: 6px; }
.nh-wiz-title { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--blue-900, #0a1628); margin: 0 0 6px; }
.nh-wiz-subtitle { font-size: 13.5px; color: var(--gray-700, #4a5568); line-height: 1.55; margin: 0 auto 18px; max-width: 400px; }
.nh-wiz-progress { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 22px; }
.nh-wiz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-200, #dde4ef); transition: background .2s ease, transform .2s ease; }
.nh-wiz-dot.active { background: linear-gradient(135deg, var(--blue-400, #2e86c1), var(--accent2, #0066ff)); transform: scale(1.3); }
.nh-wiz-dot.done { background: var(--success, #00c896); }
.nh-wiz-error { display: none; background: #fdecea; border: 1px solid #f6c4bd; color: #b3261e; font-size: 12.5px; font-weight: 600; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; text-align: left; }
.nh-wiz-error.show { display: block; }
.nh-wiz-body { text-align: left; max-height: 46vh; overflow-y: auto; margin: 0 -4px 20px; padding: 0 4px; }
.nh-wiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
@media (max-width: 480px) { .nh-wiz-options { grid-template-columns: 1fr; } }
.nh-wiz-options.three-col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 480px) { .nh-wiz-options.three-col { grid-template-columns: repeat(2, 1fr); } }
.nh-wiz-option {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--gray-100, #eef2f7); background: var(--gray-50, #f8fafd);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--blue-800, #0d2245);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
  text-align: left; position: relative; width: 100%;
}
.nh-wiz-option:hover { border-color: var(--blue-200, #7fb3d3); transform: translateY(-1px); }
.nh-wiz-option.selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue-400, #2e86c1), var(--accent2, #0066ff));
  color: #fff;
}
.nh-wiz-option-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; background: rgba(30,111,166,.10); display: flex; align-items: center; justify-content: center; color: var(--blue-500, #1e6fa6); }
.nh-wiz-option.selected .nh-wiz-option-icon { background: rgba(255,255,255,.2); color: #fff; }
.nh-wiz-option-icon svg { width: 16px; height: 16px; }
.nh-wiz-check { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gray-200, #dde4ef); flex: none; }
.nh-wiz-option.selected .nh-wiz-check { border-color: #fff; background: #fff; position: relative; }
.nh-wiz-option.selected .nh-wiz-check::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 9px; border-right: 2px solid var(--blue-500, #1e6fa6); border-bottom: 2px solid var(--blue-500, #1e6fa6); transform: translate(-50%,-58%) rotate(45deg); }
.nh-wiz-why { background: var(--gray-50, #f8fafd); border: 1px solid var(--gray-100, #eef2f7); border-radius: 14px; padding: 14px 16px; margin-bottom: 4px; }
.nh-wiz-why h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--blue-600, #1a5276); margin: 0 0 8px; }
.nh-wiz-why ul { margin: 0; padding: 0 0 0 16px; }
.nh-wiz-why li { font-size: 12.5px; color: var(--gray-700, #4a5568); line-height: 1.6; }
.nh-wiz-field-group { margin-bottom: 14px; }
.nh-wiz-field-group label { display: block; font-size: 12.5px; font-weight: 700; color: var(--blue-700, #0f3460); margin-bottom: 6px; }
.nh-wiz-field-group input {
  width: 100%; padding: 11px 14px; border-radius: 10px; box-sizing: border-box;
  border: 1.5px solid var(--gray-200, #dde4ef); background: var(--white, #fff);
  font-family: var(--font-body); font-size: 14px; color: var(--blue-900, #0a1628);
  transition: border-color .18s ease;
}
.nh-wiz-field-group input:focus { outline: none; border-color: var(--blue-400, #2e86c1); }
.nh-wiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 32px 28px; border-top: 1px solid var(--gray-100, #eef2f7); }
.nh-wiz-footer .btn { padding: 11px 20px; font-size: 13.5px; }
body.dark-mode .nh-wiz-title { color: #f8fafd; }
body.dark-mode .nh-wiz-subtitle { color: #a9c4de; }
body.dark-mode .nh-wiz-dot { background: #1d3a5c; }
body.dark-mode .nh-wiz-option { background: #0d1e35; border-color: #1d3a5c; color: #e6f0fa; }
body.dark-mode .nh-wiz-option:hover { border-color: var(--blue-400, #2e86c1); }
body.dark-mode .nh-wiz-option-icon { background: rgba(46,134,193,.18); color: #7fb3d3; }
body.dark-mode .nh-wiz-check { border-color: #2a4870; }
body.dark-mode .nh-wiz-why { background: #0d1e35; border-color: #1d3a5c; }
body.dark-mode .nh-wiz-why h4 { color: #7fb3d3; }
body.dark-mode .nh-wiz-why li { color: #a9c4de; }
body.dark-mode .nh-wiz-field-group label { color: #a9c4de; }
body.dark-mode .nh-wiz-field-group input { background: #0d1e35; border-color: #1d3a5c; color: #f8fafd; }
body.dark-mode .nh-wiz-footer { border-color: #1d3a5c; }
body.dark-mode .nh-wiz-error { background: #3a1414; border-color: #5c2323; color: #ff8a80; }
.nh-lightbox-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--blue-500, #1e6fa6); text-transform: uppercase; margin-bottom: 8px; }
.nh-lightbox-panel h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--blue-900, #0a1628); margin-bottom: 16px; }
.nh-lightbox-qr-img { width: 200px; height: 200px; object-fit: contain; border-radius: 12px; border: 1px solid var(--gray-100, #eef2f7); padding: 10px; background: #fff; margin: 0 auto 16px; display: block; }
.nh-lightbox-sellsheet-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; border: 1px solid var(--gray-100, #eef2f7); margin-bottom: 20px; display: block; background: var(--gray-50, #f8fafd); }
.nh-lightbox-panel p { font-size: 14px; color: var(--gray-700, #4a5568); line-height: 1.6; }
.nh-lightbox-download-btn { width: 100%; justify-content: center; }
body.nh-lightbox-locked { overflow: hidden; }

body.dark-mode .nh-lightbox-box { background-color: #0a1628; }
body.dark-mode .nh-lightbox-close { background: #173353; color: #eaf4fc; }
body.dark-mode .nh-lightbox-panel h3 { color: #f8fafd; }
body.dark-mode .nh-lightbox-panel p { color: #a9c4de; }
body.dark-mode .nh-lightbox-qr-img,
body.dark-mode .nh-lightbox-sellsheet-img { border-color: #1d3a5c; background: #0d1e35; }

/* ===== FOOTER MOBILE OPTIMIZATION ===== */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 8px; margin-bottom: 0; }
  .footer-grid .footer-col { padding: 20px 0; border-bottom: 1px solid rgba(127,179,211,.16); }
  .footer-grid .footer-col:last-child { border-bottom: none; }
  .footer-brand { padding-bottom: 24px; border-bottom: 1px solid rgba(127,179,211,.16); margin-bottom: 4px; }
  .footer-qr-trigger { padding: 12px 14px; }
  .footer-qr-thumb { width: 64px; height: 64px; }
  .nh-lightbox-box { padding: 32px 20px 24px; max-width: 340px; }
  .nh-lightbox-qr-img { width: 160px; height: 160px; }
}

/* ===== Resources column colors (light footer) ===== */
.footer-qr-trigger { background: var(--gray-50); border: 1px solid var(--gray-100); }
.footer-qr-trigger:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.footer-qr-caption { color: var(--blue-700); }
.footer-link-btn { color: var(--blue-600); }
.footer-link-btn:hover { color: var(--blue-400); }
body.dark-mode footer .footer-qr-trigger { background: #f8fafd; border-color: #eef2f7; }
body.dark-mode footer .footer-qr-trigger:hover { border-color: #aed6f1; box-shadow: 0 2px 8px rgba(30,111,166,.10); }
body.dark-mode footer .footer-qr-caption { color: #0f3460; }
body.dark-mode footer .footer-link-btn { color: #1a5276; }
body.dark-mode footer .footer-link-btn:hover { color: #2e86c1; }


/* ===== PARALLAX FEATURE SECTION ===== */
.nh-parallax-section {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nh-parallax-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,16,31,.58) 0%, rgba(6,16,31,.74) 100%);
  z-index: 0;
}
.nh-parallax-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.nh-parallax-content .chip {
  background: rgba(255,255,255,.14);
  color: #ffffff;
  border-color: rgba(255,255,255,.3);
  margin-bottom: 22px;
}
.nh-parallax-content .chip-dot { background: var(--accent); }
.nh-parallax-content h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.5vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #ffffff;
  margin-bottom: 18px;
}
.nh-parallax-content p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  font-weight: 300;
}
@media (max-width: 600px) {
  .nh-parallax-content { padding-top: 56px; padding-bottom: 56px; }
}

  /* Hide the sun/moon icons on mobile; keep only the toggle switch */
  @media (max-width: 900px) {
    .theme-icon { display: none !important; }
  }

/* ===== Navbar logo glow (dark mode only) ===== */
.navbar .nav-logo { position: relative; }
.navbar .nav-logo::before {
  content: '';
  position: absolute;
  inset: -16px -12px;
  border-radius: 999px;
  background: radial-gradient(ellipse 60% 65% at 50% 50%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 72%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .4s ease;
}
.navbar .nav-logo .brand-logo-img { position: relative; z-index: 1; }
body.dark-mode .navbar .nav-logo::before {
  opacity: .55;
  animation: navLogoGlowPulse 3s ease-in-out infinite;
}
@keyframes navLogoGlowPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .85; }
}

/* ===== WELCOME POPUP (auto-opens on page load) ===== */
.nh-welcome-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 16, 31, .6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 2.5s ease;
}
.nh-welcome-overlay[hidden] { display: none; }
.nh-welcome-overlay.is-open { opacity: 1; }
.nh-welcome-box {
  position: relative; background: var(--white, #fff);
  border-radius: 28px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(10,22,40,.18));
  max-width: 420px; width: 100%; padding: 40px 32px 32px;
  text-align: center;
  opacity: 0; transform: scale(.88) translateY(24px);
  transition: opacity 2.5s cubic-bezier(.22,1,.36,1), transform 2.5s cubic-bezier(.22,1,.36,1);
}
.nh-welcome-overlay.is-open .nh-welcome-box { opacity: 1; transform: scale(1) translateY(0); }
.nh-welcome-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--gray-50, #f8fafd); color: var(--blue-800, #0d2245);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.nh-welcome-close:hover { background: var(--gray-100, #eef2f7); transform: rotate(90deg); }
.nh-welcome-img {
  width: 160px; height: 160px; object-fit: cover; border-radius: 20px;
  border: 1px solid var(--gray-100, #eef2f7); margin: 0 auto 20px; display: block;
  background: var(--gray-50, #f8fafd);
}
.nh-welcome-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--blue-900, #0a1628); margin: 0;
}
body.nh-welcome-locked { overflow: hidden; }
body.dark-mode .nh-welcome-box { background: #0a1628; }
body.dark-mode .nh-welcome-close { background: #173353; color: #eaf4fc; }
body.dark-mode .nh-welcome-title { color: #f8fafd; }
body.dark-mode .nh-welcome-img { border-color: #1d3a5c; background: #0d1e35; }
@media (max-width: 600px) {
  .nh-welcome-box { padding: 32px 20px 24px; max-width: 340px; }
  .nh-welcome-img { width: 130px; height: 130px; }
}


/* ===== Additional styles — from about-us.html ===== */
/* ===== RESET & VARIABLES (exactly as contact page) ===== */

/* ===== UTILITY ===== */

/* ===== SCROLL REVEAL ===== */

.reveal {
      opacity: 0; transform: translateY(36px);
      transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
    }

.reveal-left  { opacity:0; transform: translateX(-36px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }

.reveal-right { opacity:0; transform: translateX(36px);  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }

.reveal-scale { opacity:0; transform: scale(.93); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }

/* ===== NAVBAR (identical) ===== */

.navbar {
      position: fixed; top: 22px; left: 0; right: 0; z-index: 1000;
      padding: 0 18px;
      transition: top .28s ease;
    }

.nav-links a:hover,
    .nav-links a.active { background: rgba(46,134,193,.11); color: var(--blue-500); }

.nav-links a.active { font-weight: 700; }

.theme-icon { font-size: 14px; line-height: 1; display: inline-flex; align-items: center; }

.mobile-menu-btn {
      display: none; width: 44px; height: 44px;
      border: 0; border-radius: 50%;
      background: rgba(234,244,252,.9); color: var(--blue-800);
      cursor: pointer; align-items: center; justify-content: center;
      position: relative; margin-left: auto; transition: background .25s ease;
    }

/* ===== PAGE HERO (privacy) ===== */

.page-hero {
      padding: 148px 0 90px;
      background: linear-gradient(160deg, #eaf4fc 0%, #d6eaf8 50%, #cce8ff 80%, #ddeeff 100%);
      position: relative; overflow: hidden;
      text-align: center;
    }

.page-hero::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 55% 60% at 15% -10%, rgba(46,134,193,.18), transparent 65%),
        radial-gradient(ellipse 50% 55% at 88% 105%, rgba(0,102,255,.12), transparent 60%),
        radial-gradient(ellipse 35% 40% at 60% 40%, rgba(0,200,255,.10), transparent 60%);
    }

.page-hero .container { position: relative; z-index: 1; }

.page-hero-eyebrow { margin-bottom: 20px; }

.page-hero-title {
      font-family: var(--font-display);
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
      color: var(--blue-900); margin-bottom: 20px;
    }

.page-hero-title .highlight {
      background: linear-gradient(135deg, var(--blue-400), var(--accent));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }

.page-hero-sub {
      font-size: 18px; color: var(--blue-700); line-height: 1.7;
      font-weight: 300; max-width: 560px; margin: 0 auto;
    }

.hero-orb {
      position: absolute; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(46,134,193,.15), transparent 70%);
    }

.hero-orb-1 { width: 550px; height: 550px; top: -200px; right: -100px; animation: floatOrb 9s ease-in-out infinite; }

.hero-orb-2 { width: 400px; height: 400px; bottom: -120px; left: -80px; background: radial-gradient(circle, rgba(0,200,255,.12), transparent 70%); animation: floatOrb 7s ease-in-out 2s infinite; }

@keyframes floatOrb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-22px)} }

/* ===== PRIVACY CONTENT ===== */

.privacy-section {
      padding: 80px 0 110px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #eef8ff 100%);
    }

.privacy-content {
      max-width: 820px;
      margin: 0 auto;
    }

.privacy-content h2 {
      font-family: var(--font-display);
      font-size: 28px;
      font-weight: 800;
      color: var(--blue-900);
      margin: 2.2rem 0 0.8rem;
      letter-spacing: -0.02em;
    }

.privacy-content h2:first-of-type { margin-top: 0; }

.privacy-content p {
      font-size: 16px;
      color: var(--gray-700);
      line-height: 1.8;
      margin-bottom: 1.2rem;
    }

.privacy-content ul {
      margin: 1rem 0 1.6rem 1.8rem;
      color: var(--gray-700);
    }

.privacy-content ul li {
      margin-bottom: 0.6rem;
      font-size: 16px;
      line-height: 1.7;
    }

.privacy-content strong {
      color: var(--blue-800);
    }

.privacy-card {
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg);
      padding: 36px 40px;
      margin: 2rem 0;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .22s ease, border-color .22s ease;
    }

.privacy-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); }

.privacy-card h3 {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 700;
      color: var(--blue-900);
      margin-bottom: 10px;
    }

.privacy-card p { margin-bottom: 0; }

.privacy-badge-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 1.8rem 0 0.8rem;
    }

.privacy-badge {
      background: var(--blue-10);
      border: 1px solid var(--blue-50);
      border-radius: 100px;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 700;
      color: var(--blue-700);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

.divider {
      height: 1px;
      background: var(--gray-200);
      margin: 2.8rem 0;
    }

.last-updated {
      font-size: 14px;
      color: var(--gray-500);
      margin-top: 2rem;
      font-style: italic;
    }

/* ===== CTA STRIP (same as contact page) ===== */

.cta-section {
      padding: 90px 0;
      background: linear-gradient(180deg, #eaf4fc 0%, #1a5276 7%, #0d2245 100%);
      text-align: center;
    }

.cta-title {
      font-family: var(--font-display); font-size: clamp(32px,4.5vw,52px);
      font-weight: 800; letter-spacing: -.02em; color: var(--white);
      margin-bottom: 16px; line-height: 1.1;
    }

.cta-sub { font-size: 17px; color: rgba(255,255,255,.7); font-weight: 300; margin-bottom: 36px; line-height: 1.6; }

.cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.cta-note { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 22px; }

/* ===== FOOTER (exact copy) ===== */

footer {
      background: linear-gradient(180deg, #f7fbff 0%, #ffffff 14%, #ffffff 100%);
      border-top: 1px solid var(--gray-100);
      padding-top: 70px; padding-bottom: 0;
    }

.footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: 48px; padding-bottom: 56px;
    }

.footer-tagline { font-size: 14px; color: var(--gray-700); margin: 14px 0 18px; line-height: 1.6; max-width: 280px; }

.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.footer-badge {
      background: var(--blue-10); border: 1px solid var(--blue-50);
      color: var(--blue-700); border-radius: 100px;
      padding: 5px 12px; font-size: 12px; font-weight: 700;
    }

.footer-col h4 { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--blue-900); margin-bottom: 16px; }

.footer-col ul a { color: var(--blue-600); text-decoration: none; font-size: 14px; transition: color .18s ease; }

.footer-bottom {
      border-top: 1px solid var(--gray-100);
      padding: 22px 0; display: flex;
      justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    }

.footer-bottom p { font-size: 13px; color: var(--gray-700); }

/* ===== DARK MODE (same as contact page) ===== */

body, .nav-shell, .contact-form-card, .contact-card, .faq-item, footer, .privacy-card {
      transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

body.dark-mode {
      background: #06101f; color: #eaf4fc;
      --white: #0a1628; --gray-50: #0d1e35; --gray-100: #173353;
      --gray-200: #26476b; --gray-500: #a9c4de; --gray-700: #d4e7f8;
      --blue-10: #0d2a48; --blue-50: #14385d; --blue-100: #1d527e;
      --shadow-sm: 0 2px 8px rgba(0,0,0,.22); --shadow-md: 0 10px 34px rgba(0,0,0,.35); --shadow-lg: 0 24px 70px rgba(0,0,0,.44);
    }

body.dark-mode .nav-links a:hover, body.dark-mode .nav-links a.active { background: rgba(255,255,255,.08); }

body.dark-mode .page-hero { background: linear-gradient(160deg, #06101f 0%, #0d2245 60%, #102c4d 100%); }

body.dark-mode .page-hero-title { color: #f8fafd; }

body.dark-mode .page-hero-sub { color: #a9c4de; }

body.dark-mode .privacy-section { background: linear-gradient(180deg, #0b1a31 0%, #071020 54%, #0d2245 100%); }

body.dark-mode .privacy-content h2 { color: #f8fafd; }

body.dark-mode .privacy-content p, body.dark-mode .privacy-content ul li { color: #a9c4de; }

body.dark-mode .privacy-content strong { color: #c5ddf0; }

body.dark-mode .privacy-card { background: #0d1e35; border-color: #1d3a5c; }

body.dark-mode .privacy-card:hover { border-color: var(--blue-300); }

body.dark-mode .privacy-card h3 { color: #eaf4fc; }

body.dark-mode .privacy-badge { background: #0d2a48; border-color: #1d3a5c; color: #a9c4de; }

body.dark-mode .divider { background: #1d3a5c; }

body.dark-mode .cta-section { background: linear-gradient(180deg, #0d2245 0%, #0f3460 7%, #06101f 100%); }

body.dark-mode footer { background: linear-gradient(180deg, #06101f 0%, #ffffff 10%, #ffffff 100%); border-top: none; }

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

@media (max-width: 900px) {
      .nav-links, .nav-actions { display: none; }
      .mobile-menu-btn { display: flex; }
      .navbar { top: 12px; padding: 0 12px; }
      .navbar.scrolled { top: 8px; }
      .nav-shell { padding: 9px 10px 9px 14px; border-radius: 28px; }
      .mobile-nav-panel {
        display: block; overflow: hidden; max-height: 0; opacity: 0;
        transform: translateY(-8px);
        transition: max-height .36s ease, opacity .25s ease, transform .25s ease, padding .25s ease;
      }
      .navbar.menu-open .mobile-nav-panel { max-height: 420px; opacity: 1; transform: translateY(0); padding-top: 14px; }
      .mobile-nav-list {
        list-style: none; display: flex; flex-direction: column; gap: 6px;
        padding: 8px; border-radius: 22px;
        background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.72);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
      }
      .mobile-nav-list a {
        display: block; padding: 12px 14px; color: var(--blue-700);
        font-weight: 700; text-decoration: none; border-radius: 16px;
        transition: background .22s ease, color .22s ease;
      }
      .mobile-nav-list a:hover { background: var(--blue-10); color: var(--blue-500); }
      .mobile-nav-cta {
        margin: 8px; display: block; text-align: center; padding: 13px 16px;
        background: linear-gradient(135deg, var(--blue-400), var(--accent2));
        color: white; border-radius: 999px; font-weight: 800; text-decoration: none;
        box-shadow: 0 10px 28px rgba(46,134,193,.28);
      }
      .page-hero { padding: 130px 0 70px; }
      .privacy-card { padding: 24px 20px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .brand-logo-img { width: 165px; max-height: 42px; }
    }

@media (max-width: 600px) {
      .footer-grid { grid-template-columns: 1fr; }
      .cta-buttons { flex-direction: column; align-items: center; }
      .footer-bottom { flex-direction: column; text-align: center; }
      .brand-logo-img { width: 145px; max-height: 38px; }
      .page-hero { padding: 120px 0 60px; }
    }

/* ===== NEW PAGE CONTENT (Integrations / Security / About / Careers) ===== */

.page-content-section {
  padding: 80px 0 110px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #eef8ff 100%);
}

.page-content-intro { max-width: 720px; margin: 0 auto 56px; text-align: center; }

.page-content-intro p { font-size: 17px; color: var(--gray-700); line-height: 1.8; }

.integration-grid, .values-grid, .role-list {
  display: grid; gap: 24px; margin-top: 8px;
}

.integration-grid { grid-template-columns: repeat(3, 1fr); }

.values-grid { grid-template-columns: repeat(4, 1fr); }

.role-list { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }

.integration-card, .value-card {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 30px 26px;
  box-shadow: var(--shadow-sm); text-align: left;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}

.integration-card:hover, .value-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.integration-card-icon, .value-card-icon { font-size: 30px; margin-bottom: 14px; display: block; }

.integration-card h3, .value-card h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--blue-900); margin-bottom: 8px;
}

.integration-card p, .value-card p { font-size: 14px; color: var(--gray-700); line-height: 1.65; margin: 0; }

.about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 900px; margin: 0 auto 64px;
}

.about-stat { text-align: center; }

.about-stat-num {
  font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800; color: var(--blue-400); line-height: 1.1; margin-bottom: 6px;
}

.about-stat-label { font-size: 13px; color: var(--gray-700); font-weight: 600; }

.section-kicker {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  color: var(--blue-900); text-align: center; margin: 0 0 36px;
  letter-spacing: -.01em;
}

.role-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg); padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, border-color .22s ease;
}

.role-card:hover { border-color: var(--blue-100); box-shadow: var(--shadow-md); }

.role-card-main h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--blue-900); margin-bottom: 8px;
}

.role-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.role-tag {
  background: var(--blue-10); border: 1px solid var(--blue-50); color: var(--blue-700);
  border-radius: 100px; padding: 4px 12px; font-size: 12px; font-weight: 700;
}

.role-card .btn { flex-shrink: 0; }

.careers-note {
  max-width: 820px; margin: 40px auto 0; text-align: center;
  font-size: 15px; color: var(--gray-700);
}

.careers-note a { color: var(--blue-400); font-weight: 700; text-decoration: none; }

.careers-note a:hover { text-decoration: underline; }

body.dark-mode .page-content-section { background: linear-gradient(180deg, #0b1a31 0%, #071020 54%, #0d2245 100%); }

body.dark-mode .page-content-intro p { color: #a9c4de; }

body.dark-mode .section-kicker { color: #f8fafd; }

body.dark-mode .integration-card, body.dark-mode .value-card, body.dark-mode .role-card {
  background: #0d1e35; border-color: #1d3a5c;
}

body.dark-mode .integration-card:hover, body.dark-mode .value-card:hover, body.dark-mode .role-card:hover { border-color: var(--blue-300); }

body.dark-mode .integration-card h3, body.dark-mode .value-card h3, body.dark-mode .role-card-main h3 { color: #eaf4fc; }

body.dark-mode .integration-card p, body.dark-mode .value-card p { color: #a9c4de; }

body.dark-mode .about-stat-label { color: #a9c4de; }

body.dark-mode .role-tag { background: #0d2a48; border-color: #1d3a5c; color: #a9c4de; }

body.dark-mode .careers-note { color: #a9c4de; }

@media (max-width: 900px) {
  .integration-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .role-card { padding: 22px 22px; }
}

@media (max-width: 600px) {
  .integration-grid, .values-grid { grid-template-columns: 1fr; }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .role-card { flex-direction: column; align-items: flex-start; }
  .role-card .btn { width: 100%; justify-content: center; }
}


/* ===== Additional styles — from careers.html ===== */
/* ===== Role detail lightbox ===== */

.nh-lightbox-box { max-height: 85vh; overflow-y: auto; }

.nh-lightbox-box.nh-lightbox-wide { max-width: 640px; }

.nh-lightbox-role-panel { text-align: left; }

.nh-lightbox-role-panel h3 { margin-bottom: 14px; }

.nh-lightbox-role-panel h4 {
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
  color: var(--blue-900); margin: 20px 0 10px;
}

.nh-role-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.nh-role-desc { margin-bottom: 4px; }

.nh-role-list { list-style: none; margin: 0 0 4px; padding: 0; }

.nh-role-list li {
  font-size: 14px; color: var(--gray-700); line-height: 1.6;
  padding: 4px 0 4px 22px; position: relative;
}

.nh-role-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--blue-400); font-weight: 700; }

body.dark-mode .nh-lightbox-role-panel h4 { color: #f8fafd; }

body.dark-mode .nh-role-desc { color: #a9c4de; }

body.dark-mode .nh-role-list li { color: #a9c4de; }

@media (max-width: 600px) {
  .nh-lightbox-box.nh-lightbox-wide { max-width: 340px; }
}


/* ===== Additional styles — from contact-us.html ===== */
/* Mobile nav */

/* ===================== HERO / PAGE HEADER ===================== */

/* Animated hero orbs */

/* ===================== CONTACT SECTION ===================== */

.contact-section {
  padding: 90px 0 110px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #eef8ff 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
}

/* LEFT — Info panel */

.contact-info { }

.contact-info-title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; line-height: 1.18;
  color: var(--blue-900); margin-bottom: 14px;
}

.contact-info-sub {
  font-size: 16px; color: var(--gray-700); line-height: 1.7;
  margin-bottom: 36px;
}

.contact-card-row { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }

.contact-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-100); }

.contact-card-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.contact-card-icon.blue   { background: linear-gradient(135deg, var(--blue-10), #d6eaf8); }

.contact-card-icon.green  { background: linear-gradient(135deg, #e6faf5, #c8f0e5); }

.contact-card-icon.purple { background: linear-gradient(135deg, #f3eeff, #e5d8ff); }

.contact-card-icon.amber  { background: linear-gradient(135deg, #fff8e8, #ffefc8); }

.contact-card-body h4 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--blue-900); margin-bottom: 3px;
}

.contact-card-body p { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }

.contact-card-body a { color: var(--blue-400); text-decoration: none; font-weight: 500; }

.contact-card-body a:hover { text-decoration: underline; }

/* Availability badge */

.avail-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #e6faf5; border: 1px solid #b8f0de;
  border-radius: 100px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: #00a870;
}

.avail-dot { width: 7px; height: 7px; background: #00c896; border-radius: 50%; animation: pulse 2s infinite; }

/* Social row */

.social-row { display: flex; gap: 10px; margin-top: 28px; }

.social-btn {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--gray-100); color: var(--blue-700);
  border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 18px;
  transition: all .2s ease;
}

.social-btn:hover { background: var(--blue-10); border-color: var(--blue-200); transform: translateY(-2px); }

/* RIGHT — Form card */

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: 44px 44px 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.contact-form-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--blue-400), var(--accent), var(--accent2));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.form-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--blue-900); margin-bottom: 6px;
}

.form-subtitle { font-size: 14px; color: var(--gray-500); margin-bottom: 28px; }

/* Form fields */

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-group { margin-bottom: 18px; }

.form-group label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--blue-800); margin-bottom: 7px; letter-spacing: .01em;
}

.form-group label .req { color: var(--blue-400); margin-left: 2px; }

.form-control {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14.5px; color: var(--blue-900);
  background: var(--gray-50);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance: none; -webkit-appearance: none;
}

.form-control:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3.5px rgba(46,134,193,.14);
  background: var(--white);
}

.form-control.error { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,.12); }

select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a9abf' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.6; }

.field-error { font-size: 12px; color: #e74c3c; margin-top: 5px; display: none; }

.field-error.show { display: block; }

/* Inquiry type pills */

.inquiry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px;
}

.inquiry-pill {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  padding: 10px 8px; text-align: center; cursor: pointer;
  transition: all .18s ease; background: var(--gray-50);
  font-size: 12.5px; font-weight: 600; color: var(--gray-700);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  user-select: none;
}

.inquiry-pill:hover { border-color: var(--blue-200); background: var(--blue-10); color: var(--blue-700); }

.inquiry-pill.selected {
  border-color: var(--blue-400); background: var(--blue-10); color: var(--blue-700);
  box-shadow: 0 0 0 3px rgba(46,134,193,.12);
}

.inquiry-pill-icon { font-size: 20px; line-height: 1; }

input[type="hidden"] { display: none; }

/* Consent checkbox */

.consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 20px 0 24px;
}

.consent-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  accent-color: var(--blue-400); cursor: pointer; border-radius: 4px;
}

.consent-row label {
  font-size: 12.5px; color: var(--gray-500); line-height: 1.55; cursor: pointer;
}

.consent-row a { color: var(--blue-400); text-decoration: none; }

.consent-row a:hover { text-decoration: underline; }

/* Submit */

.btn-submit {
  width: 100%; justify-content: center;
  padding: 15px 28px; font-size: 16px; font-weight: 700; border-radius: 100px;
  background: linear-gradient(135deg, var(--blue-400), var(--accent2));
  color: var(--white); border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(46,134,193,.38);
  transition: all .22s ease; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 10px;
}

.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(46,134,193,.48); }

.btn-submit:active { transform: translateY(0); }

.btn-submit .submit-spinner {
  width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: white; border-radius: 50%;
  animation: spin .7s linear infinite; display: none;
}

.btn-submit.loading .submit-text { display: none; }

.btn-submit.loading .submit-spinner { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

.form-note {
  text-align: center; font-size: 12px; color: var(--gray-500);
  margin-top: 14px; line-height: 1.5;
}

.form-note svg { vertical-align: -2px; margin-right: 4px; }

/* ===================== SUCCESS MESSAGE ===================== */

.form-success {
  display: none; text-align: center; padding: 20px 0;
  animation: successFade .5s ease;
}

@keyframes successFade { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.form-success.show { display: block; }

.success-icon-wrap {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, #e6faf5, #c8f0e5);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  animation: successPop .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes successPop { from{transform:scale(0)} to{transform:scale(1)} }

.success-icon-wrap svg { width: 40px; height: 40px; stroke: #00a870; stroke-width: 2.5; }

.success-title {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  color: var(--blue-900); margin-bottom: 10px;
}

.success-body { font-size: 15px; color: var(--gray-700); line-height: 1.65; max-width: 380px; margin: 0 auto 24px; }

.success-ref {
  display: inline-block; background: var(--blue-10);
  border: 1px solid var(--blue-50); border-radius: 99px;
  padding: 7px 18px; font-size: 13px; font-weight: 700;
  color: var(--blue-600); letter-spacing: .04em; margin-bottom: 24px;
}

.success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

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

.faq-section {
  padding: 90px 0;
  background: linear-gradient(180deg, #eef8ff 0%, #ffffff 60%);
}

.section-header { text-align: center; margin-bottom: 56px; }

.section-label {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-400); margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
  color: var(--blue-900); margin-bottom: 16px;
}

.section-sub {
  font-size: 17px; color: var(--blue-700);
  font-weight: 300; max-width: 540px; margin: 0 auto;
}

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.faq-item {
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .22s ease;
}

.faq-item:hover { box-shadow: var(--shadow-md); }

.faq-question {
  width: 100%; text-align: left;
  padding: 20px 22px; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--blue-900); transition: color .18s ease;
}

.faq-question:hover { color: var(--blue-400); }

.faq-chevron {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gray-100); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, background .2s ease;
}

.faq-chevron svg { width: 12px; height: 12px; stroke: var(--blue-400); stroke-width: 2.5; transition: transform .25s ease; }

.faq-item.open .faq-chevron { background: var(--blue-10); }

.faq-item.open .faq-chevron svg { transform: rotate(180deg); }

.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .32s cubic-bezier(.22,1,.36,1), padding .22s ease;
  padding: 0 22px;
}

.faq-answer p { font-size: 14.5px; color: var(--gray-700); line-height: 1.7; padding-bottom: 18px; }

.faq-item.open .faq-answer { max-height: 300px; }

/* ===================== CTA STRIP ===================== */

/* ===================== DARK MODE ===================== */

body, .nav-shell, .contact-form-card, .contact-card, .faq-item, footer {
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

body.dark-mode .contact-section { background: linear-gradient(180deg, #0b1a31 0%, #071020 54%, #0d2245 100%); }

body.dark-mode .contact-info-title { color: #f8fafd; }

body.dark-mode .contact-info-sub { color: #a9c4de; }

body.dark-mode .contact-card { background: #0d1e35; border-color: #1d3a5c; }

body.dark-mode .contact-card:hover { border-color: var(--blue-300); }

body.dark-mode .contact-card-body h4 { color: #eaf4fc; }

body.dark-mode .contact-card-body p { color: #8ab4d4; }

body.dark-mode .contact-card-icon.blue { background: linear-gradient(135deg, #0d2a48, #1a3d5c); }

body.dark-mode .contact-card-icon.green { background: linear-gradient(135deg, #0a2820, #12352a); }

body.dark-mode .contact-card-icon.purple { background: linear-gradient(135deg, #1a1234, #241548); }

body.dark-mode .contact-card-icon.amber { background: linear-gradient(135deg, #2a1e08, #3a2a0a); }

body.dark-mode .social-btn { background: #0d1e35; border-color: #1d3a5c; color: #a9c4de; }

body.dark-mode .social-btn:hover { background: #142540; }

body.dark-mode .contact-form-card { background: #0d1e35; border-color: #1d3a5c; box-shadow: 0 24px 70px rgba(0,0,0,.44); }

body.dark-mode .form-title { color: #f8fafd; }

body.dark-mode .form-subtitle { color: #8ab4d4; }

body.dark-mode .form-group label { color: #c5ddf0; }

body.dark-mode .form-control { background: #071020; border-color: #1d3a5c; color: #eaf4fc; }

body.dark-mode .form-control:focus { border-color: var(--blue-300); background: #0a1628; box-shadow: 0 0 0 3.5px rgba(46,134,193,.18); }

body.dark-mode select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a9c4de' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

body.dark-mode select.form-control option { background: #0a1628; color: #eaf4fc; }

body.dark-mode .inquiry-pill { background: #071020; border-color: #1d3a5c; color: #a9c4de; }

body.dark-mode .inquiry-pill:hover, body.dark-mode .inquiry-pill.selected { background: #0d2a48; border-color: var(--blue-300); color: #cde6f8; }

body.dark-mode .consent-row label { color: #8ab4d4; }

body.dark-mode .form-note { color: #6a94b4; }

body.dark-mode .faq-section { background: linear-gradient(180deg, #0d2245 0%, #0b1a31 60%, #071020 100%); }

body.dark-mode .section-title { color: #f8fafd; }

body.dark-mode .section-sub { color: #a9c4de; }

body.dark-mode .faq-item { background: #0d1e35; border-color: #1d3a5c; }

body.dark-mode .faq-question { color: #eaf4fc; }

body.dark-mode .faq-question:hover { color: var(--blue-300); }

body.dark-mode .faq-chevron { background: #142540; }

body.dark-mode .faq-item.open .faq-chevron { background: #0d2a48; }

body.dark-mode .faq-answer p { color: #a9c4de; }

body.dark-mode .avail-badge { background: #0a2820; border-color: #155235; color: #00c896; }

body.dark-mode .success-title { color: #f8fafd; }

body.dark-mode .success-body { color: #a9c4de; }

body.dark-mode .success-icon-wrap { background: linear-gradient(135deg, #0a2820, #0e3020); }

body.dark-mode .success-ref { background: #0d2a48; border-color: #1d3a5c; color: #7fc8f0; }

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

@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .mobile-menu-btn { display: flex; }
  .navbar { top: 12px; padding: 0 12px; }
  .navbar.scrolled { top: 8px; }
  .nav-shell { padding: 9px 10px 9px 14px; border-radius: 28px; }
  .mobile-nav-panel {
    display: block; overflow: hidden; max-height: 0; opacity: 0;
    transform: translateY(-8px);
    transition: max-height .36s ease, opacity .25s ease, transform .25s ease, padding .25s ease;
  }
  .navbar.menu-open .mobile-nav-panel { max-height: 420px; opacity: 1; transform: translateY(0); padding-top: 14px; }
  .mobile-nav-list {
    list-style: none; display: flex; flex-direction: column; gap: 6px;
    padding: 8px; border-radius: 22px;
    background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  }
  .mobile-nav-list a {
    display: block; padding: 12px 14px; color: var(--blue-700);
    font-weight: 700; text-decoration: none; border-radius: 16px;
    transition: background .22s ease, color .22s ease;
  }
  .mobile-nav-list a:hover { background: var(--blue-10); color: var(--blue-500); }
  .mobile-nav-cta {
    margin: 8px; display: block; text-align: center; padding: 13px 16px;
    background: linear-gradient(135deg, var(--blue-400), var(--accent2));
    color: white; border-radius: 999px; font-weight: 800; text-decoration: none;
    box-shadow: 0 10px 28px rgba(46,134,193,.28);
  }
  .page-hero { padding: 130px 0 70px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-form-card { padding: 28px 24px 26px; }
  .brand-logo-img { width: 165px; max-height: 42px; }
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .inquiry-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .brand-logo-img { width: 145px; max-height: 38px; }
  .page-hero { padding: 120px 0 60px; }
}


/* ===== Additional styles — from pricing.html ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --blue-900:#0a1628;--blue-800:#0d2245;--blue-700:#0f3460;--blue-600:#1a5276;
  --blue-500:#1e6fa6;--blue-400:#2e86c1;--blue-300:#3498db;--blue-200:#7fb3d3;
  --blue-100:#aed6f1;--blue-50:#d6eaf8;--blue-10:#eaf4fc;
  --accent:#00c8ff;--accent2:#0066ff;--white:#ffffff;
  --gray-50:#f8fafd;--gray-100:#eef2f7;--gray-200:#dde4ef;--gray-500:#8a9abf;--gray-700:#4a5568;
  --success:#00c896;
  --font-display:'Bricolage Grotesque',sans-serif;--font-body:'DM Sans',sans-serif;
  --shadow-sm:0 2px 8px rgba(30,111,166,.10);--shadow-md:0 8px 32px rgba(10,22,40,.13);--shadow-lg:0 20px 60px rgba(10,22,40,.18);
  --radius-sm:10px;--radius-md:18px;--radius-lg:28px;--radius-xl:40px;
}

html{scroll-behavior:smooth}

body{font-family:var(--font-body);background:var(--white);color:var(--blue-900);overflow-x:hidden;line-height:1.6}

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

.chip{display:inline-flex;align-items:center;gap:6px;background:var(--blue-10);color:var(--blue-500);border:1px solid var(--blue-50);border-radius:100px;padding:6px 14px;font-size:13px;font-weight:500;letter-spacing:.02em}

.chip-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:pulse 2s infinite}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:100px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .22s ease;border:none;white-space:nowrap}

.btn-primary{background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:var(--white);box-shadow:0 4px 20px rgba(46,134,193,.35)}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(46,134,193,.45)}

.btn-secondary{background:var(--white);color:var(--blue-600);border:1.5px solid var(--blue-200);box-shadow:var(--shadow-sm)}

.btn-secondary:hover{transform:translateY(-2px);border-color:var(--blue-400);box-shadow:var(--shadow-md)}

.btn-white{background:var(--white);color:var(--blue-700);box-shadow:0 4px 20px rgba(0,0,0,.12)}

.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.18)}

.btn-outline-white{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.45)}

.btn-outline-white:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}

.btn-ghost{background:transparent;color:var(--blue-500);padding:10px 20px}

.btn-ghost:hover{background:var(--blue-10)}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}

.reveal.visible{opacity:1;transform:translateY(0)}

.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}

.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}

.reveal-left.visible,.reveal-right.visible{opacity:1;transform:translateX(0)}

.delay-1{transition-delay:.1s!important}

.delay-2{transition-delay:.2s!important}

.delay-3{transition-delay:.3s!important}

.delay-4{transition-delay:.4s!important}

.delay-5{transition-delay:.5s!important}

.navbar{position:fixed;top:22px;left:0;right:0;z-index:1000;padding:0 18px;transition:top .28s ease}

.navbar.scrolled{top:12px}

.nav-shell{max-width:1160px;margin:0 auto;padding:10px 14px 10px 16px;border-radius:999px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.68);box-shadow:0 18px 50px rgba(10,22,40,.14);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}

.nav-inner{display:flex;align-items:center;gap:28px}

.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}

.brand-logo-img{display:block;width:188px;height:auto;max-height:46px;object-fit:contain}

footer .brand-logo-img{width:196px;max-height:52px}

.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin-left:auto}

.nav-links a{text-decoration:none;color:var(--blue-700);font-size:14px;font-weight:600;padding:9px 13px;border-radius:999px;transition:background .22s ease,color .22s ease,transform .22s ease}

.nav-links a:hover{background:rgba(46,134,193,.11);color:var(--blue-500);transform:translateY(-1px)}

.nav-links a.active-page{background:rgba(46,134,193,.13);color:var(--blue-500);font-weight:700}

.nav-actions{display:flex;align-items:center;gap:8px;margin-left:8px}

.nav-actions .btn{padding:10px 20px;font-size:14px}

.mobile-menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(234,244,252,.9);color:var(--blue-800);cursor:pointer;align-items:center;justify-content:center;position:relative;margin-left:auto;transition:background .25s ease}

.mobile-menu-btn:hover{background:rgba(214,234,248,.95)}

.hamburger-lines{width:22px;height:16px;position:relative;display:block}

.hamburger-lines span{position:absolute;left:0;width:22px;height:2px;border-radius:10px;background:currentColor;transition:transform .28s ease,top .28s ease,opacity .18s ease}

.hamburger-lines span:nth-child(1){top:0}

.hamburger-lines span:nth-child(2){top:7px}

.hamburger-lines span:nth-child(3){top:14px}

.mobile-menu-btn.active .hamburger-lines span:nth-child(1){top:7px;transform:rotate(45deg)}

.mobile-menu-btn.active .hamburger-lines span:nth-child(2){opacity:0;transform:translateX(-8px)}

.mobile-menu-btn.active .hamburger-lines span:nth-child(3){top:7px;transform:rotate(-45deg)}

.mobile-nav-panel{display:none}

/* Theme toggle */

body,.nav-shell,footer,.price-card,.faq-item{transition:background .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:5px 9px;border:1px solid rgba(127,179,211,.35);border-radius:999px;background:rgba(255,255,255,.62);color:var(--blue-800);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

.theme-icon{font-size:14px;line-height:1;display:inline-flex;align-items:center;filter:saturate(1.08)}

.theme-toggle-track{width:42px;height:22px;border-radius:999px;background:linear-gradient(135deg,#d6eaf8,#ffffff);border:1px solid rgba(127,179,211,.55);position:relative;box-shadow:inset 0 2px 6px rgba(10,22,40,.08)}

.theme-toggle-thumb{position:absolute;width:16px;height:16px;top:2px;left:3px;border-radius:50%;background:linear-gradient(135deg,#ffffff,#f8fafd);box-shadow:0 2px 7px rgba(10,22,40,.25);transition:transform .28s ease,background .28s ease}

body.dark-mode .theme-toggle-track{background:linear-gradient(135deg,#0a1628,#1a5276);border-color:rgba(255,255,255,.18)}

body.dark-mode .theme-toggle-thumb{transform:translateX(19px);background:linear-gradient(135deg,#00c8ff,#ffffff)}

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

.page-hero{padding:148px 0 90px;background:linear-gradient(180deg,#eaf4fc 0%,#d6eaf8 88%,#edf7ff 100%);position:relative;overflow:hidden;text-align:center}

.page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 12% -8%,rgba(46,134,193,.18),transparent 65%),radial-gradient(ellipse 50% 55% at 88% 108%,rgba(0,102,255,.12),transparent 60%),radial-gradient(ellipse 38% 44% at 58% 42%,rgba(0,200,255,.10),transparent 62%)}

.page-hero .container{position:relative;z-index:1}

.page-hero-title{font-family:var(--font-display);font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--blue-900);margin:18px 0 18px}

.page-hero-title .highlight{background:linear-gradient(135deg,var(--blue-400),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.page-hero-sub{font-size:18px;color:var(--blue-700);line-height:1.7;font-weight:300;max-width:540px;margin:0 auto 18px}

.hero-trust-row{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;font-size:13px;color:var(--gray-500);font-weight:500;margin-top:10px}

.hero-trust-item{display:flex;align-items:center;gap:6px}

.hero-trust-item svg{width:13px;height:13px;stroke:var(--success);stroke-width:2.5;fill:none;flex-shrink:0}

.hero-orb{position:absolute;border-radius:50%;pointer-events:none}

.hero-orb-1{width:560px;height:560px;top:-200px;right:-100px;background:radial-gradient(circle,rgba(46,134,193,.14),transparent 70%);animation:floatOrb 9s ease-in-out infinite}

.hero-orb-2{width:400px;height:400px;bottom:-110px;left:-80px;background:radial-gradient(circle,rgba(0,200,255,.10),transparent 70%);animation:floatOrb 7s ease-in-out 2s infinite}

@keyframes floatOrb{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* ===================== BILLING TOGGLE ===================== */

.pricing-toggle-wrap{display:flex;align-items:center;justify-content:center;gap:14px;margin:44px 0 52px}

.toggle-label{font-size:15px;font-weight:500;color:var(--blue-700)}

.toggle-label.active{color:var(--blue-900);font-weight:700}

.toggle-switch{position:relative;width:52px;height:28px;cursor:pointer}

.toggle-switch input{display:none}

.toggle-track{position:absolute;inset:0;border-radius:100px;background:linear-gradient(135deg,var(--blue-400),var(--accent2));transition:background .3s}

.toggle-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:white;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .3s}

.toggle-switch input:not(:checked)~.toggle-thumb{transform:translateX(0)}

.toggle-switch input:checked~.toggle-thumb{transform:translateX(24px)}

.toggle-badge{background:linear-gradient(135deg,var(--success),#00a870);color:white;font-size:12px;font-weight:700;padding:4px 12px;border-radius:100px;box-shadow:0 2px 10px rgba(0,200,150,.3)}

/* Annual callout banner */

.annual-callout{background:linear-gradient(135deg,#e6fdf5,#d0f5e8);border:1px solid #a7f0cc;border-radius:12px;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:600;color:#00865a;margin-bottom:44px;opacity:0;transition:opacity .3s}

.annual-callout.show{opacity:1}

.annual-callout svg{width:16px;height:16px;stroke:#00865a;stroke-width:2;fill:none;flex-shrink:0}

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

.pricing-section{padding:90px 0 80px;background:linear-gradient(180deg,#ffffff 0%,#f8fafd 84%,#eaf4fc 100%)}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;margin-bottom:72px}

.price-card{border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:38px 32px;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s;background:white}

.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

.price-card.featured{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(46,134,193,.12),var(--shadow-md);transform:scale(1.04);background:linear-gradient(160deg,#f0f8ff,white)}

.price-card.featured:hover{transform:scale(1.04) translateY(-6px)}

.price-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:white;font-size:12px;font-weight:700;padding:5px 18px;border-radius:100px;box-shadow:0 4px 12px rgba(46,134,193,.3);white-space:nowrap}

.price-plan{font-size:13px;font-weight:700;color:var(--blue-400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}

.price-desc{font-size:13.5px;color:var(--gray-500);line-height:1.6;margin-bottom:28px}

.price-amount{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}

.price-currency{font-size:22px;font-weight:700;color:var(--blue-800);margin-top:8px}

.price-number{font-family:var(--font-display);font-size:56px;font-weight:800;color:var(--blue-900);line-height:1;transition:all .3s}

.price-period{font-size:14px;color:var(--gray-500)}

.price-billing{font-size:12.5px;color:var(--gray-500);margin-bottom:4px;min-height:18px}

.price-annual-note{font-size:12px;color:var(--blue-600);font-weight:600;min-height:16px;margin-bottom:8px;opacity:0;transition:opacity .3s}

.price-annual-note.show{opacity:1}

.price-saving{display:inline-flex;font-size:12px;font-weight:700;color:var(--success);background:#e8fdf5;border-radius:100px;padding:3px 10px;margin-bottom:24px;opacity:0;transition:opacity .3s}

.price-saving.show{opacity:1}

.price-divider{border:none;border-top:1px solid var(--gray-100);margin-bottom:24px}

.price-features-list{list-style:none;margin-bottom:32px;display:flex;flex-direction:column;gap:10px}

.price-features-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--blue-800);line-height:1.5}

.price-check{width:20px;height:20px;border-radius:50%;background:var(--blue-10);color:var(--blue-500);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:2px}

.price-card.featured .price-check{background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:white}

.price-trial{text-align:center;font-size:12px;color:var(--gray-500);margin-top:10px}

.price-enterprise{background:linear-gradient(135deg,var(--blue-900),var(--blue-700));border-color:var(--blue-700);color:white}

.price-enterprise .price-plan{color:var(--accent)}

.price-enterprise .price-desc{color:rgba(255,255,255,.65)}

.price-enterprise .price-currency,.price-enterprise .price-number,.price-enterprise .price-period{color:white}

.price-enterprise .price-billing{color:rgba(255,255,255,.6)}

.price-enterprise .price-annual-note{color:rgba(255,255,255,.45)!important;opacity:1!important}

.price-enterprise .price-divider{border-color:rgba(255,255,255,.15)}

.price-enterprise .price-features-list li{color:rgba(255,255,255,.85)}

.price-enterprise .price-check{background:rgba(255,255,255,.15);color:var(--accent)}

/* ===================== COMPARISON TABLE ===================== */

.comparison-section{padding:0 0 90px}

.comparison-section-header{text-align:center;margin-bottom:48px}

.section-label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-400);margin-bottom:14px}

.section-title{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--blue-900);margin-bottom:14px}

.section-sub{font-size:16px;color:var(--gray-500);max-width:500px;margin:0 auto;font-weight:300;line-height:1.7}

.comparison-wrap{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--gray-100);-webkit-overflow-scrolling:touch}

table.comp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}

.comp-table thead tr th{padding:20px 22px 16px;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--blue-900);border-bottom:2px solid var(--gray-100);text-align:left;background:var(--gray-50)}

.comp-table thead tr th:not(:first-child){text-align:center}

.comp-table thead th.col-featured{background:linear-gradient(160deg,#f0f8ff,#e8f3ff);color:var(--blue-700);position:relative}

.comp-table thead th.col-featured::before{content:'Most Popular';position:absolute;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:white;font-size:10px;font-weight:800;padding:3px 12px;border-radius:0 0 8px 8px;white-space:nowrap}

.comp-table thead th.col-ent{background:linear-gradient(160deg,#0d2245,#1a3a5c);color:white}

.comp-table thead .plan-badge{display:block;font-family:var(--font-body);font-size:11.5px;font-weight:500;margin-top:3px;color:var(--gray-500)}

.comp-table thead th.col-featured .plan-badge{color:var(--blue-500)}

.comp-table thead th.col-ent .plan-badge{color:rgba(255,255,255,.55)}

.comp-table tbody tr{border-bottom:1px solid var(--gray-100)}

.comp-table tbody tr:last-child{border-bottom:none}

.comp-table tbody tr.group-row td{padding:14px 22px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-500);background:var(--gray-50);border-bottom:1px solid var(--gray-100)}

.comp-table tbody tr:not(.group-row):hover{background:var(--blue-10)}

.comp-table tbody tr.cta-row td{padding:22px;background:var(--gray-50);border-top:2px solid var(--gray-100)}

.comp-table tbody td{padding:13px 22px;color:var(--blue-800);vertical-align:middle}

.comp-table tbody td:not(:first-child){text-align:center}

.comp-table tbody td.col-featured{background:rgba(240,248,255,.45)}

.comp-table tbody td.col-ent{background:rgba(13,34,69,.04)}

.feat-name{font-size:14px;color:var(--blue-800);font-weight:500;line-height:1.4}

.feat-sub{font-size:11.5px;color:var(--gray-500);margin-top:2px}

.ci{font-size:17px;line-height:1;display:block}

.ci-yes{color:var(--blue-400)}

.ci-ent{color:var(--accent2)}

.ci-no{color:var(--gray-200)}

.comp-val{font-size:13px;font-weight:600;color:var(--blue-700)}

.comp-val.ent{color:var(--accent2)}

/* ===================== TESTIMONIALS ROW ===================== */

.testimonials-strip{padding:80px 0 72px;background:linear-gradient(180deg,#eef2f7 0%,#f8fafd 50%,#fff 100%)}

.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}

.testimonial-card{background:white;border-radius:var(--radius-md);border:1px solid var(--gray-100);padding:30px 28px;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}

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

.testimonial-stars{color:#fbbf24;font-size:15px;margin-bottom:14px;letter-spacing:2px}

.testimonial-text{font-size:14.5px;color:var(--blue-800);line-height:1.75;font-style:italic;margin-bottom:20px}

.testimonial-author{display:flex;align-items:center;gap:12px}

.testimonial-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:13px;color:white;flex-shrink:0}

.testimonial-name{font-weight:700;font-size:13.5px;color:var(--blue-900)}

.testimonial-role{font-size:12px;color:var(--gray-500)}

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

.faq-section{padding:80px 0 90px;background:linear-gradient(180deg,#fff 0%,#f8fafd 84%,#eaf4fc 100%)}

.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}

.faq-item{background:white;border:1.5px solid var(--gray-100);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .2s}

.faq-item:hover{box-shadow:var(--shadow-md);border-color:var(--blue-100)}

.faq-question{width:100%;text-align:left;padding:20px 22px;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--blue-900);transition:color .18s}

.faq-question:hover{color:var(--blue-400)}

.faq-chevron{width:22px;height:22px;border-radius:50%;background:var(--gray-100);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .2s}

.faq-chevron svg{width:11px;height:11px;stroke:var(--blue-400);stroke-width:2.5;fill:none;transition:transform .25s}

.faq-item.open .faq-chevron{background:var(--blue-10)}

.faq-item.open .faq-chevron svg{transform:rotate(180deg)}

.faq-answer{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1),padding .22s;padding:0 22px}

.faq-answer p{font-size:14.5px;color:var(--gray-700);line-height:1.7;padding-bottom:18px}

.faq-item.open .faq-answer{max-height:300px}

/* ===================== COMPLIANCE STRIP ===================== */

.compliance-strip{background:linear-gradient(180deg,#edf7ff 0%,#f5fbff 35%,#ffffff 100%);padding:22px 0}

.compliance-inner{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}

.compliance-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--blue-700)}

.compliance-item span{font-size:18px}

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

.cta-section{padding:96px 0;background:linear-gradient(180deg,#eaf4fc 0%,#1a5276 7%,#0d2245 100%);text-align:center}

.cta-title{font-family:var(--font-display);font-size:clamp(34px,5vw,58px);font-weight:800;line-height:1.1;color:white;margin-bottom:18px;letter-spacing:-.02em}

.cta-sub{font-size:17px;color:rgba(255,255,255,.7);margin-bottom:38px;font-weight:300;line-height:1.6}

.cta-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

.cta-note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5)}

footer{background:linear-gradient(180deg,#f7fbff 0%,#ffffff 14%,#ffffff 100%);color:var(--gray-700);border-top:1px solid var(--gray-100);padding-top:70px;padding-bottom:0}

.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}

.footer-tagline{font-size:14px;line-height:1.7;margin:14px 0 18px;color:var(--gray-700)}

.footer-col h4{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--blue-900);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em}

.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}

.footer-col ul a{text-decoration:none;color:var(--blue-600);font-size:14px;transition:color .2s}

.footer-col ul a:hover{color:var(--blue-400)}

.footer-bottom{border-top:1px solid var(--gray-100);padding:28px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

.footer-bottom p{font-size:13px;color:var(--gray-700)}

.footer-badges{display:flex;gap:10px;flex-wrap:wrap}

.footer-badge{background:var(--blue-10);border:1px solid var(--blue-50);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--blue-700);font-weight:500}

body.dark-mode{background:#06101f;color:#eaf4fc;--white:#0a1628;--gray-50:#0d1e35;--gray-100:#173353;--gray-200:#26476b;--gray-500:#a9c4de;--gray-700:#d4e7f8;--blue-10:#0d2a48;--blue-50:#14385d;--blue-100:#1d527e;--shadow-sm:0 2px 8px rgba(0,0,0,.22);--shadow-md:0 10px 34px rgba(0,0,0,.32);--shadow-lg:0 24px 70px rgba(0,0,0,.42)}

body.dark-mode .nav-shell{background:rgba(7,16,32,.72);border-color:rgba(255,255,255,.13);box-shadow:0 18px 55px rgba(0,0,0,.35)}

body.dark-mode .nav-links a,.dark-mode .theme-toggle,.dark-mode .mobile-menu-btn{color:#eaf4fc}

body.dark-mode .nav-links a:hover,.dark-mode .btn-ghost:hover{background:rgba(255,255,255,.08)}

body.dark-mode .theme-toggle{background:rgba(10,22,40,.62);border-color:rgba(255,255,255,.14)}

body.dark-mode .mobile-menu-btn{background:rgba(255,255,255,.08)}

body.dark-mode .mobile-nav-list{background:rgba(7,16,32,.92);border-color:rgba(255,255,255,.12)}

body.dark-mode .mobile-nav-list a{color:#eaf4fc}

body.dark-mode .mobile-nav-list a:hover{background:rgba(255,255,255,.08)}

body.dark-mode .page-hero{background:linear-gradient(180deg,#06101f 0%,#0d2245 88%,#102c4d 100%)}

body.dark-mode .page-hero-title{color:#f8fafd}

body.dark-mode .page-hero-sub{color:#a9c4de}

body.dark-mode .hero-trust-row{color:#6a94b4}

body.dark-mode .annual-callout{background:linear-gradient(135deg,#0a2820,#0d3520);border-color:#155235;color:#5eecb0}

body.dark-mode .annual-callout svg{stroke:#5eecb0}

body.dark-mode .pricing-section{background:linear-gradient(180deg,#0b1a31 0%,#071020 84%,#0d2245 100%)}

body.dark-mode .section-title{color:#f8fafd}

body.dark-mode .section-sub{color:#a9c4de}

body.dark-mode .price-card{background:rgba(13,30,53,.86);border-color:rgba(255,255,255,.1)}

body.dark-mode .price-card.featured{background:linear-gradient(160deg,rgba(15,52,96,.72),rgba(13,30,53,.94))}

body.dark-mode .price-enterprise{background:linear-gradient(135deg,#050b16,#0f3460)}

body.dark-mode .price-number,.dark-mode .price-currency,.dark-mode .price-period,.dark-mode .price-plan{color:#f8fafd!important}

body.dark-mode .price-desc,.dark-mode .price-billing,.dark-mode .price-trial{color:#a9c4de}

body.dark-mode .price-features-list li{color:#d4e7f8}

body.dark-mode .price-divider{border-color:rgba(255,255,255,.1)}

body.dark-mode .price-check{background:rgba(255,255,255,.1);color:#7fc8f0}

body.dark-mode .price-card.featured .price-check{background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:white}

body.dark-mode .toggle-label{color:#a9c4de}

body.dark-mode .toggle-label.active{color:#f8fafd}

body.dark-mode .comparison-section{background:transparent}

body.dark-mode .comparison-wrap{border-color:rgba(255,255,255,.12);box-shadow:0 10px 34px rgba(0,0,0,.4)}

body.dark-mode .comp-table{background:#0d1e35}

body.dark-mode .comp-table thead tr th{background:#071020;color:#c5ddf0;border-bottom-color:rgba(255,255,255,.12)}

body.dark-mode .comp-table thead th.col-featured{background:linear-gradient(160deg,#0d2a48,#142540);color:#cde6f8}

body.dark-mode .comp-table thead th.col-ent{background:linear-gradient(160deg,#050b16,#0f2040)}

body.dark-mode .comp-table tbody tr{border-bottom-color:rgba(255,255,255,.08)}

body.dark-mode .comp-table tbody tr.group-row td{background:#071020;color:#6a94b4}

body.dark-mode .comp-table tbody tr:not(.group-row):hover{background:#0d2a48}

body.dark-mode .comp-table tbody tr.cta-row td{background:#071020;border-top-color:rgba(255,255,255,.12)}

body.dark-mode .comp-table tbody td{color:#c5ddf0;background:transparent}

body.dark-mode .comp-table tbody td.col-featured{background:rgba(13,42,72,.4)}

body.dark-mode .comp-table tbody td.col-ent{background:rgba(5,11,22,.35)}

body.dark-mode .feat-name{color:#d4e7f8}

body.dark-mode .feat-sub{color:#6a94b4}

body.dark-mode .ci-no{color:rgba(255,255,255,.15)}

body.dark-mode .comp-val{color:#7fc8f0}

body.dark-mode .testimonials-strip{background:linear-gradient(180deg,#0b1a31 0%,#071020 50%,#0a1628 100%)}

body.dark-mode .testimonial-card{background:rgba(13,30,53,.86);border-color:rgba(255,255,255,.1)}

body.dark-mode .testimonial-text{color:#c5ddf0}

body.dark-mode .testimonial-name{color:#f8fafd}

body.dark-mode .faq-section{background:linear-gradient(180deg,#0a1628 0%,#071020 84%,#0d2245 100%)}

body.dark-mode .faq-item{background:rgba(13,30,53,.86);border-color:rgba(255,255,255,.1)}

body.dark-mode .faq-question{color:#eaf4fc}

body.dark-mode .faq-question:hover{color:#7fc8f0}

body.dark-mode .faq-chevron{background:#142540}

body.dark-mode .faq-item.open .faq-chevron{background:#0d2a48}

body.dark-mode .faq-answer p{color:#a9c4de}

body.dark-mode .compliance-strip{background:linear-gradient(180deg,#102c4d 0%,#0b1a31 28%,#071020 100%)}

body.dark-mode .compliance-item{color:#a9c4de}

body.dark-mode .cta-section{background:linear-gradient(180deg,#0d2245 0%,#0f3460 8%,#06101f 100%)}

body.dark-mode footer{background:linear-gradient(180deg,#06101f 0%,#ffffff 10%,#ffffff 100%);border-top:none;color:#4a5568}

body.dark-mode footer .footer-col h4{color:#0a1628}

body.dark-mode footer .footer-tagline,.dark-mode footer .footer-bottom p{color:#4a5568}

body.dark-mode footer .footer-col ul a{color:#1a5276}

body.dark-mode footer .footer-col ul a:hover{color:#2e86c1}

body.dark-mode footer .footer-bottom{border-top-color:#eef2f7}

body.dark-mode footer .footer-badge{background:#eaf4fc;border-color:#d6eaf8;color:#0f3460}

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

@media(max-width:900px){
  .nav-links,.nav-actions{display:none}
  .mobile-menu-btn{display:flex}
  .navbar{top:12px;padding:0 12px}
  .navbar.scrolled{top:8px}
  .nav-shell{padding:9px 10px 9px 14px;border-radius:28px}
  .nav-inner{gap:12px}
  .mobile-nav-panel{display:block;overflow:hidden;max-height:0;opacity:0;transform:translateY(-8px);transition:max-height .36s ease,opacity .25s ease,transform .25s ease,padding .25s ease}
  .navbar.menu-open .mobile-nav-panel{max-height:430px;opacity:1;transform:translateY(0);padding-top:14px}
  .mobile-nav-list{list-style:none;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:22px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
  .mobile-nav-list a{display:block;padding:12px 14px;color:var(--blue-700);font-weight:700;text-decoration:none;border-radius:16px;transition:background .22s,color .22s}
  .mobile-nav-list a:hover{background:var(--blue-10);color:var(--blue-500)}
  .mobile-nav-cta{margin:8px;display:block;text-align:center;padding:13px 16px;background:linear-gradient(135deg,var(--blue-400),var(--accent2));color:white;border-radius:999px;font-weight:800;text-decoration:none;box-shadow:0 10px 28px rgba(46,134,193,.28)}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .price-card.featured:hover{transform:translateY(-6px)}
  .testimonials-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .compliance-inner{gap:20px}
  .hero-trust-row{gap:14px;justify-content:center;flex-direction:column;align-items:center}
  .theme-toggle{margin-left:auto;height:38px;padding:5px 7px}
  .theme-toggle-track{width:38px;height:21px}
  .theme-toggle-thumb{width:15px;height:15px}
  body.dark-mode .theme-toggle-thumb{transform:translateX(17px)}
  .brand-logo-img{width:165px;max-height:42px}
}

@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .cta-buttons{flex-direction:column;align-items:center}
  .footer-bottom{flex-direction:column;text-align:center}
  .page-hero{padding:130px 0 70px}
  .pricing-toggle-wrap{gap:10px}
  .brand-logo-img{width:145px;max-height:38px}
  .annual-callout{flex-direction:column;text-align:center;gap:6px}
}


/* ===== Additional styles — from use-cases.html ===== */
/* ===== PAGE HERO (use cases) ===== */

/* ===== USE CASES CONTENT ===== */

.usecases-section {
      padding: 80px 0 110px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafd 52%, #eef8ff 100%);
    }

.usecase-block { scroll-margin-top: 120px; padding: 56px 0; }

.usecase-block:first-child { padding-top: 8px; }

.usecase-block-header { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; }

.usecase-block-icon { font-size: 44px; line-height: 1; flex-shrink: 0; }

.usecase-eyebrow {
      display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; color: var(--blue-500); margin-bottom: 6px;
    }

.usecase-block-header h2 {
      font-family: var(--font-display); font-size: 30px; font-weight: 800;
      color: var(--blue-900); letter-spacing: -.02em; margin: 0;
    }

.usecase-lead { font-size: 16px; color: var(--gray-700); line-height: 1.75; max-width: 820px; margin-bottom: 28px; }

.usecase-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }

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

.usecase-list li {
      font-size: 14.5px; color: var(--gray-700); line-height: 1.7;
      padding: 6px 0 6px 26px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e86c1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") left 8px no-repeat;
      background-size: 16px;
    }

.usecase-tag {
      display: inline-block;
      background: var(--blue-10);
      border: 1px solid var(--blue-50);
      border-radius: 100px;
      padding: 4px 14px;
      font-size: 12px;
      font-weight: 700;
      color: var(--blue-600);
      margin-bottom: 12px;
    }

.usecase-result-panel {
      background: var(--gray-50); border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg); padding: 26px 24px;
    }

.usecase-result-panel p { font-size: 14px; color: var(--gray-700); line-height: 1.65; margin: 0; }

.usecase-divider { height: 1px; background: var(--gray-200); }

@media (max-width: 900px) {
      .usecase-detail-grid { grid-template-columns: 1fr; }
      .usecase-block-header { gap: 14px; }
      .usecase-block-icon { font-size: 36px; }
      .usecase-block-header h2 { font-size: 24px; }
      .usecase-block { padding: 40px 0; }
    }

body, .nav-shell, .usecase-result-panel, footer {
      transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

body.dark-mode .usecases-section { background: linear-gradient(180deg, #0b1a31 0%, #071020 54%, #0d2245 100%); }

body.dark-mode .usecase-block-header h2 { color: #f8fafd; }

body.dark-mode .usecase-lead, body.dark-mode .usecase-list li { color: #a9c4de; }

body.dark-mode .usecase-tag { background: #0d2a48; border-color: #1d3a5c; color: #a9c4de; }

body.dark-mode .usecase-result-panel { background: #0d1e35; border-color: #1d3a5c; }

body.dark-mode .usecase-result-panel p { color: #a9c4de; }

body.dark-mode .usecase-divider { background: #1d3a5c; }

@media (max-width: 900px) {
      .nav-links, .nav-actions { display: none; }
      .mobile-menu-btn { display: flex; }
      .navbar { top: 12px; padding: 0 12px; }
      .navbar.scrolled { top: 8px; }
      .nav-shell { padding: 9px 10px 9px 14px; border-radius: 28px; }
      .mobile-nav-panel {
        display: block; overflow: hidden; max-height: 0; opacity: 0;
        transform: translateY(-8px);
        transition: max-height .36s ease, opacity .25s ease, transform .25s ease, padding .25s ease;
      }
      .navbar.menu-open .mobile-nav-panel { max-height: 420px; opacity: 1; transform: translateY(0); padding-top: 14px; }
      .mobile-nav-list {
        list-style: none; display: flex; flex-direction: column; gap: 6px;
        padding: 8px; border-radius: 22px;
        background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.72);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
      }
      .mobile-nav-list a {
        display: block; padding: 12px 14px; color: var(--blue-700);
        font-weight: 700; text-decoration: none; border-radius: 16px;
        transition: background .22s ease, color .22s ease;
      }
      .mobile-nav-list a:hover { background: var(--blue-10); color: var(--blue-500); }
      .mobile-nav-cta {
        margin: 8px; display: block; text-align: center; padding: 13px 16px;
        background: linear-gradient(135deg, var(--blue-400), var(--accent2));
        color: white; border-radius: 999px; font-weight: 800; text-decoration: none;
        box-shadow: 0 10px 28px rgba(46,134,193,.28);
      }
      .page-hero { padding: 130px 0 70px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .brand-logo-img { width: 165px; max-height: 42px; }
    }

/* =====================================================================
   New in this revision: Login nav link, Try It Free radiance animation,
   Contact Sales lightbox panel
   ===================================================================== */

.nav-login-link {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
  padding: 8px 6px;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-login-link:hover { color: var(--blue-400); text-decoration: underline; }
body.dark-mode .nav-login-link { color: #d6eaf8; }
body.dark-mode .nav-login-link:hover { color: var(--accent); }

.mobile-nav-login-link {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-700);
  text-decoration: none;
  padding: 12px 0 4px;
}
.mobile-nav-login-link:hover { color: var(--blue-400); }
body.dark-mode .mobile-nav-login-link { color: #d6eaf8; }

/* ── "Try It Free" radiance: blue/white rings pulsing outward ── */
.btn-try-free {
  position: relative;
  isolation: isolate;
}
.btn-try-free::before,
.btn-try-free::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  border: 2px solid rgba(255,255,255,.9);
  opacity: 0;
  animation: nh-radiance 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.btn-try-free::after {
  border-color: rgba(46,134,193,.95);
  animation-delay: 1s;
}
@keyframes nh-radiance {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.6);  opacity: 0; }
  100% { transform: scale(1.6);  opacity: 0; }
}
body.dark-mode .btn-try-free::before { border-color: rgba(255,255,255,.65); }
body.dark-mode .btn-try-free::after  { border-color: rgba(0,200,255,.9); }
@media (prefers-reduced-motion: reduce) {
  .btn-try-free::before, .btn-try-free::after { animation: none; opacity: 0; }
}

/* ── Contact Sales lightbox ── */
.nh-lightbox-contactsales-panel { text-align: left; max-width: 420px; }
.nh-lightbox-contactsales-panel .form-group { margin-bottom: 14px; }
.nh-lightbox-contactsales-panel textarea.form-control { resize: vertical; min-height: 72px; }