*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg-deep: #06060f;
      --bg-base: #0a0a14;
      --bg-card: #11111f;
      --bg-card-hover: #16162a;
      --bg-elevated: #1a1a2e;
      --accent: #6366f1;
      --accent-glow: rgba(99, 102, 241, 0.45);
      --accent-2: #22d3ee;
      --accent-3: #a78bfa;
      --wa-green: #128C7E;
      --wa-bg: #0b1419;
      --text: #e8eaf0;
      --text-muted: #8b93a8;
      --text-dim: #5c6478;
      --border: rgba(255,255,255,0.08);
      --border-glow: rgba(99,102,241,0.35);
      --icon: #94a3b8;
      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-nav: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      --max-w: 1140px;
      --nav-h: 72px;
    }
    html { scroll-behavior: smooth; }
    html.nav-open { overflow: hidden; }
    body {
      font-family: var(--font-sans);
      background: var(--bg-deep);
      color: var(--text);
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* Scroll progress */
    .scroll-progress {
      position: fixed; top: 0; left: 0; height: 3px; z-index: 10001;
      background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
      width: 0%; transition: width 0.1s linear;
      box-shadow: 0 0 12px var(--accent-glow);
    }

    /* Ambient orbs */
    .page-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .orb {
      position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
    }
    .orb-1 { width: 480px; height: 480px; background: #4f46e5; top: -10%; left: -5%; }
    .orb-2 { width: 360px; height: 360px; background: #0891b2; top: 40%; right: -8%; }
    .orb-3 { width: 300px; height: 300px; background: #7c3aed; bottom: 10%; left: 30%; opacity: 0.2; }

    .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
    .section { padding: 96px 0; position: relative; z-index: 1; }
    .eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--accent-2); margin-bottom: 14px; display: inline-block;
    }
    h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
    .section-h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin-bottom: 16px; }
    .section-sub { font-size: 17px; color: var(--text-muted); max-width: 560px; margin-bottom: 48px; line-height: 1.7; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 10px;
      font-size: 14px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; border: none; transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
      font-family: var(--font-sans); position: relative; overflow: hidden;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #4f46e5);
      color: white; box-shadow: 0 4px 24px rgba(99,102,241,0.35);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(99,102,241,0.5); }
    .btn-primary::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
      transform: translateX(-100%); transition: transform 0.5s;
    }
    .btn-primary:hover::after { transform: translateX(100%); }
    .btn-outline {
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-outline:hover { border-color: var(--border-glow); background: rgba(99,102,241,0.1); color: #c7d2fe; }
    .btn-ghost {
      background: transparent; border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.85); padding: 10px 20px; border-radius: 10px;
      font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
    }
    .btn-ghost:hover { border-color: var(--accent); color: white; background: rgba(99,102,241,0.12); }
    .icon-svg { width: 22px; height: 22px; stroke: var(--icon); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: stroke 0.2s; }
    .icon-box {
      width: 48px; height: 48px; border-radius: 12px;
      border: 1px solid var(--border); background: rgba(99,102,241,0.08);
      display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
      transition: all 0.3s;
    }
    .icon-box:hover { border-color: var(--border-glow); box-shadow: 0 0 20px rgba(99,102,241,0.2); transform: scale(1.05); }

    /* Scroll reveal — content fades up on scroll */
    .reveal {
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    html.js-ready .reveal:not(.visible) {
      opacity: 0;
      transform: translateY(32px);
    }
    html.js-ready .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(16px, 3vw, 32px); gap: 16px;
      background: rgba(6,6,15,0.92); backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border); transition: box-shadow 0.3s, border-color 0.3s;
    }
    nav.scrolled { box-shadow: 0 8px 32px rgba(0,0,0,0.4); border-bottom-color: rgba(99,102,241,0.2); }
    .nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.02em; color: white; flex-shrink: 0; }
    .nav-logo-mark {
      width: 36px; height: 36px; background: linear-gradient(135deg, var(--accent), var(--accent-3));
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px var(--accent-glow);
    }
    .nav-logo-mark svg { width: 18px; height: 18px; fill: white; }
    .nav-links {
      display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.8vw, 24px);
      list-style: none;
      font-family: var(--font-nav);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      flex: 1; min-width: 0; flex-wrap: nowrap;
    }
    .nav-links li { flex-shrink: 0; }
    .nav-links a {
      position: relative; padding: 6px 0; transition: color 0.25s, letter-spacing 0.25s;
      white-space: nowrap;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s;
    }
    .nav-links a:hover { color: white; letter-spacing: 0.08em; }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    .nav-cta .btn-ghost {
      padding: 8px 14px; font-size: 12px;
      font-family: var(--font-nav); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    }
    .nav-cta .btn-primary {
      padding: 8px 16px; font-size: 12px;
      font-family: var(--font-nav); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    }
    .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; }
    .nav-toggle span { display: block; width: 22px; height: 2px; background: white; margin: 5px 0; transition: 0.3s; }
    .nav-drawer {
      position: fixed; top: 0; right: 0; width: min(360px, 92vw); height: 100vh; height: 100dvh;
      background: linear-gradient(165deg, #12122a 0%, #0a0a16 55%, #0d1520 100%);
      z-index: 1002; padding: 0; transform: translateX(105%);
      transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.38s;
      overflow: hidden; border-left: 1px solid rgba(99,102,241,0.2);
      display: none; flex-direction: column;
      box-shadow: -24px 0 80px rgba(0,0,0,0.5);
      visibility: hidden; pointer-events: none;
    }
    .nav-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
    .nav-drawer::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
      background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    }
    .drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 20px 16px; padding-top: max(20px, env(safe-area-inset-top));
      border-bottom: 1px solid var(--border); flex: 0 0 auto; position: relative; z-index: 1;
    }
    .drawer-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .drawer-brand-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px var(--accent-glow); flex-shrink: 0;
    }
    .drawer-brand-icon svg { width: 20px; height: 20px; fill: white; }
    .drawer-brand-text { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: white; line-height: 1.2; letter-spacing: -0.02em; }
    .drawer-brand-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; }
    .nav-close {
      width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.06);
      border: 1px solid var(--border); color: white; font-size: 22px; cursor: pointer;
      display: flex; align-items: center; justify-content: center; line-height: 1;
      transition: all 0.2s; flex-shrink: 0;
    }
    .nav-close:hover { background: rgba(99,102,241,0.2); border-color: var(--border-glow); }
    .drawer-nav {
      flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
      -webkit-overflow-scrolling: touch; padding: 12px 16px 8px; position: relative; z-index: 1;
    }
    .drawer-nav ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
    .drawer-nav li { width: 100%; }
    .drawer-link {
      display: flex; align-items: center; gap: 12px; width: 100%;
      padding: 12px 14px;
      font-family: var(--font-nav);
      font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
      color: var(--text);
      border-radius: 10px; border: 1px solid transparent; transition: background 0.2s, color 0.2s, border-color 0.2s, letter-spacing 0.2s, transform 0.2s;
      box-sizing: border-box;
    }
    .drawer-link:hover, .drawer-link:focus-visible {
      color: white; background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.2);
      letter-spacing: 0.06em; transform: translateX(4px);
    }
    .drawer-link-icon {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: var(--accent-2);
      box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
    }
    .drawer-footer {
      flex: 0 0 auto; padding: 14px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--border); display: grid; gap: 8px;
      background: rgba(6,6,15,0.95); position: relative; z-index: 1;
    }
    .drawer-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 12px 16px; border-radius: 10px;
      font-family: var(--font-nav); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
      cursor: pointer; border: none; text-align: center;
      transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s; text-decoration: none;
      box-sizing: border-box; line-height: 1.2;
    }
    .drawer-btn:hover { transform: translateY(-1px); }
    .drawer-btn-talk {
      background: rgba(34,211,238,0.08); color: var(--accent-2);
      border: 1px solid rgba(34,211,238,0.28);
    }
    .drawer-btn-talk:hover { background: rgba(34,211,238,0.14); }
    .drawer-btn-register {
      background: var(--accent); color: white; border: 1px solid var(--accent);
    }
    .drawer-btn-register:hover { background: #4f46e5; border-color: #4f46e5; }
    .drawer-btn-login {
      background: transparent; color: var(--text); border: 1px solid var(--border);
    }
    .drawer-btn-login:hover { border-color: var(--border-glow); color: white; background: rgba(99,102,241,0.08); }
    .nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 1001; opacity: 0; pointer-events: none; transition: opacity 0.35s; backdrop-filter: blur(4px); display: none; }
    .nav-overlay.open { opacity: 1; pointer-events: auto; }

    /* HERO */
    .hero {
      min-height: 100vh; padding: calc(var(--nav-h) + 48px) 0 80px;
      background: var(--bg-deep); position: relative; overflow: hidden;
    }
    .hero-grid {
      position: absolute; inset: 0;
      background-image: linear-gradient(rgba(99,102,241,0.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(99,102,241,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent);
    }
    .hero-inner { display: flex; align-items: center; gap: 64px; }
    .hero-text { flex: 1; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
      color: var(--accent-2); letter-spacing: 0.06em; margin-bottom: 24px; padding: 6px 16px;
      border: 1px solid rgba(34,211,238,0.25); border-radius: 100px;
      background: rgba(34,211,238,0.06);
    }
    .hero-badge .dot { width: 6px; height: 6px; background: #22d3ee; border-radius: 50%; }
    .hero-title {
      font-size: clamp(36px, 5vw, 58px); line-height: 1.12; margin-bottom: 22px;
      font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
    }
    .hero-line { display: block; padding: 1px 0; }
    .hero-line-1 { color: var(--text); }
    .hero-line-2, .hero-line-3 { opacity: 1; }
    .hero-gradient {
      font-style: italic;
      background: linear-gradient(135deg, #a5b4fc, #22d3ee);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-rotate-wrap {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      line-height: 1.14;
      position: relative;
    }
    .hero-rotate-sizer {
      display: block;
      visibility: hidden;
      height: 0;
      overflow: hidden;
      font-style: italic;
      font-weight: 800;
      white-space: nowrap;
      pointer-events: none;
    }
    .hero-rotate-stage {
      position: relative;
      display: block;
      height: 1.14em;
      overflow: hidden;
    }
    .hero-rotate-word {
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      font-style: italic;
      white-space: nowrap;
      width: 100%;
      will-change: transform, opacity;
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
      background: linear-gradient(135deg, #25D366, #6ee7b7, #128C7E);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      z-index: 1;
    }
    .hero-rotate-word.no-transition {
      transition: none !important;
    }
    .hero-rotate-word.is-visible {
      transform: translateY(0);
      opacity: 1;
      z-index: 2;
    }
    .hero-rotate-word.is-next {
      transform: translateY(100%);
      opacity: 0;
      z-index: 1;
      pointer-events: none;
    }
    .hero-rotate-word.is-leaving {
      transform: translateY(-100%);
      opacity: 0;
      z-index: 1;
      pointer-events: none;
    }
    .hero-rotate-word[data-theme="whatsapp"] {
      filter: drop-shadow(0 0 16px rgba(37, 211, 102, 0.3));
      background: linear-gradient(135deg, #25D366, #6ee7b7, #128C7E);
      -webkit-background-clip: text; background-clip: text;
    }
    .hero-rotate-word[data-theme="itr"],
    .hero-rotate-word[data-theme="gst"] {
      filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.35));
      background: linear-gradient(135deg, #a5b4fc, #6366f1, #22d3ee);
      -webkit-background-clip: text; background-clip: text;
    }
    .hero-rotate-word[data-theme="docs"],
    .hero-rotate-word[data-theme="appt"],
    .hero-rotate-word[data-theme="tax"] {
      filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.3));
      background: linear-gradient(135deg, #22d3ee, #a78bfa, #818cf8);
      -webkit-background-clip: text; background-clip: text;
    }
    .hero-rotate-sr {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-rotate-word {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
        position: static;
      }
      .hero-rotate-word.is-next,
      .hero-rotate-word.is-leaving { display: none; }
    }
    .hero-dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent-2); margin-left: 4px; vertical-align: middle;
      box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    }
    .hero-sub { font-size: 18px; color: var(--text-muted); max-width: 500px; margin-bottom: 36px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
    .hero-proof { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-muted); }
    .hero-avatars { display: flex; }
    .hero-avatars span {
      width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg-deep);
      background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: white;
      font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
      margin-left: -8px; transition: transform 0.2s;
    }
    .hero-avatars span:hover { transform: translateY(-3px) scale(1.1); z-index: 2; }
    .hero-avatars span:first-child { margin-left: 0; }
    .hero-visual-desktop {
      flex-shrink: 0; width: min(420px, 44vw);
    }
    .hero-visual-mobile { display: none; }

    /* Desktop hero: automation command panel */
    .hero-panel {
      position: relative; overflow: hidden;
      background: rgba(17,17,31,0.8); border: 1px solid var(--border);
      border-radius: 20px; padding: 24px;
      box-shadow: 0 32px 64px rgba(0,0,0,0.45), 0 0 48px rgba(99,102,241,0.12);
      backdrop-filter: blur(12px);
    }
    .hero-panel-shine { display: none; }
    .hero-panel-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px; position: relative; z-index: 1;
    }
    .hero-panel-brand { display: flex; align-items: center; gap: 12px; }
    .hero-panel-icon {
      width: 44px; height: 44px; border-radius: 12px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px var(--accent-glow);
    }
    .hero-panel-icon svg { width: 22px; height: 22px; fill: white; }
    .hero-panel-title { font-size: 15px; font-weight: 800; color: white; line-height: 1.2; }
    .hero-panel-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .hero-panel-live {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      color: #22d3ee; padding: 5px 10px; border-radius: 100px;
      background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.25);
    }
    .hero-panel-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; }
    .hero-panel-metrics {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
      margin-bottom: 18px; position: relative; z-index: 1;
    }
    .hero-metric {
      text-align: center; padding: 12px 8px; border-radius: 12px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      transition: border-color 0.2s, transform 0.2s;
    }
    .hero-metric:hover { border-color: var(--border-glow); transform: translateY(-2px); }
    .hero-metric-val { display: block; font-size: 20px; font-weight: 800; color: white; line-height: 1.1; }
    .hero-metric-lbl { display: block; font-size: 10px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
    .hero-activity-log {
      display: flex; flex-direction: column; gap: 8px;
      margin-bottom: 14px; min-height: 156px; position: relative; z-index: 1;
    }
    .hero-activity-row {
      display: flex; align-items: center; gap: 12px; padding: 11px 12px;
      border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border);
      transition: opacity 0.35s, transform 0.35s, max-height 0.35s, margin 0.35s, padding 0.35s;
      overflow: hidden;
    }
    .hero-activity-check {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      background: rgba(34,197,94,0.15); color: #22c55e;
      font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
    }
    .hero-activity-icon {
      width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--border);
    }
    .hero-activity-icon svg { width: 14px; height: 14px; stroke-width: 1.75; fill: none; }
    .hero-activity-icon.doc { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); }
    .hero-activity-icon.doc svg { stroke: #a5b4fc; }
    .hero-activity-icon.reminder { background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.3); }
    .hero-activity-icon.reminder svg { stroke: #22d3ee; }
    .hero-activity-icon.appt { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.3); }
    .hero-activity-icon.appt svg { stroke: #c4b5fd; }
    .hero-activity-icon.qa { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.3); }
    .hero-activity-icon.qa svg { stroke: #6ee7b7; }
    .hero-activity-body { flex: 1; min-width: 0; }
    .hero-activity-title { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .hero-activity-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .hero-panel .hero-live-feed { margin-top: 0; max-width: none; }
    .hero-hub {
      position: relative; width: min(300px, 88vw); height: 280px; margin: 0 auto;
    }
    .hero-hub-ring {
      position: absolute; border-radius: 50%; border: 1px solid rgba(99,102,241,0.15);
      top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    .hero-hub-ring.ring-1 { width: 120px; height: 120px; }
    .hero-hub-ring.ring-2 { width: 190px; height: 190px; border-color: rgba(34,211,238,0.12); }
    .hero-hub-ring.ring-3 { width: 260px; height: 260px; border-color: rgba(167,139,250,0.1); }
    .hero-hub-core {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 72px; height: 72px; border-radius: 20px;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      box-shadow: 0 8px 32px var(--accent-glow), 0 0 60px rgba(99,102,241,0.2);
      z-index: 3;
    }
    .hero-hub-core svg { width: 26px; height: 26px; fill: white; }
    .hub-label { font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.85); margin-top: 2px; letter-spacing: 0.06em; }
    .hero-orbit {
      position: absolute;
      font-size: 11px; font-weight: 600;
    }
    .hero-orbit span {
      display: block; padding: 7px 12px; border-radius: 100px;
      background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
      white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .hero-orbit.orbit-1 { top: 4%; left: 50%; transform: translateX(-50%); }
    .hero-orbit.orbit-2 { top: 50%; right: 2%; transform: translateY(-50%); }
    .hero-orbit.orbit-3 { bottom: 4%; left: 50%; transform: translateX(-50%); }
    .hero-orbit.orbit-4 { top: 50%; left: 2%; transform: translateY(-50%); }
    .hero-orbit.orbit-1 span { border-color: rgba(99,102,241,0.35); color: #c7d2fe; }
    .hero-orbit.orbit-2 span { border-color: rgba(34,211,238,0.35); color: #a5f3fc; }
    .hero-orbit.orbit-3 span { border-color: rgba(167,139,250,0.35); color: #ddd6fe; }
    .hero-orbit.orbit-4 span { border-color: rgba(52,211,153,0.35); color: #a7f3d0; }
    .hero-live-feed {
      margin-top: 20px; padding: 12px 20px; border-radius: 14px;
      background: rgba(17,17,31,0.85); border: 1px solid var(--border);
      width: 100%; max-width: min(340px, 92vw); margin-left: auto; margin-right: auto;
      min-height: 44px; position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-feed-message {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; width: 100%; margin: 0;
      font-size: 12px; color: var(--text-muted); text-align: center;
      transition: opacity 0.4s ease, transform 0.4s ease;
      opacity: 1; transform: translateY(0);
    }
    .hero-feed-message.is-fading {
      opacity: 0; transform: translateY(8px);
    }
    .hero-feed-text {
      text-align: center; line-height: 1.4; flex: 0 1 auto;
    }
    .hero-feed-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #22d3ee;
      flex-shrink: 0;
    }
    .hero-feed-text strong { color: var(--text); font-weight: 600; }
    @keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14px) rotate(1deg)} }

    /* Mobile hero: interactive automation hub */
    .msg { max-width: 82%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; color: #d4e4dc; font-family: var(--font-sans); }
    .msg.msg-out { animation: msgOut 0.35s ease forwards; }
    @keyframes msgOut { to { opacity: 0; transform: translateY(-8px) scale(0.96); max-height: 0; padding: 0; margin: 0; } }
    @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .msg.client { background: #1a2832; border-radius: 2px 12px 12px 12px; align-self: flex-start; border: 1px solid rgba(255,255,255,0.06); }
    .msg.bot { background: #0f3d2e; border-radius: 12px 2px 12px 12px; align-self: flex-end; border: 1px solid rgba(34,197,94,0.15); }
    .msg .time { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 3px; display: block; text-align: right; }
    .typing-indicator { background: #1a2832; border-radius: 2px 12px 12px 12px; padding: 10px 14px; align-self: flex-start; display: none; border: 1px solid rgba(255,255,255,0.06); }
    .typing-dots { display: flex; gap: 4px; }
    .typing-dots span { width: 7px; height: 7px; background: rgba(255,255,255,0.35); border-radius: 50%; animation: bounce 1.2s infinite; }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }

    /* TRUST - marquee */
    .trust-strip {
      padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
      background: var(--bg-base); overflow: hidden;
    }
    .trust-strip p { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; text-align: center; }
    .trust-marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
    .trust-track {
      display: flex; align-items: center; gap: 48px;
      animation: marquee 32s linear infinite;
      white-space: nowrap; width: max-content;
    }
    .trust-marquee:hover .trust-track { animation-play-state: paused; }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .trust-logo { font-size: 15px; font-weight: 700; color: var(--text-dim); letter-spacing: -0.01em; transition: color 0.2s; }
    .trust-logo:hover { color: var(--accent-2); }

    /* ABOUT */
    #about { padding: 80px 0; background: var(--bg-base); border-bottom: 1px solid var(--border); }
    #about .about-inner { max-width: 720px; }
    #about h2 { font-size: 28px; margin-bottom: 20px; }
    #about p { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
    #about strong { color: var(--text); }

    /* PAIN */
    .section-pain { background: var(--bg-card); padding: 96px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .pain-card {
      padding: 28px; border: 1px solid var(--border); border-radius: 16px;
      background: var(--bg-elevated); transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
      position: relative; overflow: hidden;
    }
    .pain-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0; transition: opacity 0.3s;
    }
    .pain-card:hover { transform: translateY(-6px); border-color: var(--border-glow); box-shadow: 0 16px 48px rgba(0,0,0,0.35); }
    .pain-card:hover::before { opacity: 1; }
    .pain-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 10px; }
    .pain-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
    .pain-card:hover .icon-svg { stroke: var(--accent-2); }

    /* FEATURES */
    .section-features { background: var(--bg-deep); padding: 96px 0; }
    .features-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .feature-card {
      padding: 32px; border: 1px solid var(--border); border-radius: 16px;
      background: var(--bg-card); transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
      position: relative; overflow: hidden;
    }
    .feature-card::after {
      content: ''; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
      background: linear-gradient(135deg, transparent, rgba(99,102,241,0.3), transparent);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s;
    }
    .feature-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(99,102,241,0.12); background: var(--bg-card-hover); }
    .feature-card:hover::after { opacity: 1; }
    .feature-card h3 { font-size: 17px; margin-bottom: 10px; }
    .feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
    .feature-tag {
      display: inline-block; margin-top: 14px; font-size: 10px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px;
      background: rgba(99,102,241,0.12); color: var(--accent-2); border: 1px solid rgba(99,102,241,0.2);
    }

    /* STORIES */
    .section-stories { background: var(--bg-base); padding: 96px 0; }
    .stories-grid { display: flex; flex-direction: column; gap: 24px; }
    .story-card {
      border: 1px solid var(--border); border-radius: 20px; padding: 48px;
      background: var(--bg-card); transition: all 0.35s;
    }
    .story-card:hover { border-color: var(--border-glow); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
    .story-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
    .story-avatar {
      width: 48px; height: 48px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-3));
      display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: white; flex-shrink: 0;
    }
    .story-meta .name { font-size: 15px; font-weight: 700; }
    .story-meta .role { font-size: 13px; color: var(--text-muted); }
    .story-body { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
    .story-card blockquote {
      font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.5; font-style: italic;
      border-left: 3px solid var(--accent); padding-left: 20px; margin-bottom: 18px; color: var(--text);
    }
    .story-narrative { font-size: 14px; color: var(--text-muted); line-height: 1.75; }
    .story-stats { display: flex; flex-direction: column; gap: 14px; }
    .story-stat {
      text-align: center; background: var(--bg-elevated); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 22px; min-width: 120px; transition: transform 0.2s;
    }
    .story-stat:hover { transform: scale(1.05); border-color: var(--border-glow); }
    .story-stat .value { font-size: 28px; font-weight: 800; background: linear-gradient(135deg, #a5b4fc, #22d3ee); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .story-stat .label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* DEMO */
    .section-demo { background: var(--bg-card); padding: 96px 0; border-top: 1px solid var(--border); }
    .demo-wrap { display: flex; gap: 56px; align-items: center; margin-top: 48px; }
    .demo-text { flex: 1; }
    .demo-text p { font-size: 15px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.7; }
    .demo-scenarios { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .demo-scenario-btn {
      display: flex; align-items: center; gap: 12px; padding: 14px 18px;
      border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
      background: var(--bg-elevated); font-size: 14px; font-weight: 600; color: var(--text);
      text-align: left; transition: all 0.25s; font-family: var(--font-sans);
    }
    .demo-scenario-btn:hover, .demo-scenario-btn.active {
      border-color: var(--accent); color: #c7d2fe;
      background: rgba(99,102,241,0.12); box-shadow: 0 4px 20px rgba(99,102,241,0.15);
      transform: translateX(6px);
    }
    .demo-scenario-btn .icon svg { width: 18px; height: 18px; stroke: var(--icon); fill: none; stroke-width: 1.75; }
    .demo-scenario-btn.active .icon svg { stroke: var(--accent-2); }
    .demo-phone-wrap { flex-shrink: 0; width: 280px; }
    .demo-phone-frame { background: #0d0d18; border-radius: 28px; border: 2px solid rgba(99,102,241,0.3); box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 30px rgba(99,102,241,0.1); overflow: hidden; }
    .demo-phone-header { background: var(--wa-green); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
    .dph-av { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: white; }
    .dph-name { font-size: 14px; font-weight: 700; color: white; }
    .dph-status { font-size: 10px; color: rgba(255,255,255,0.65); }
    .demo-messages-wrap { background: var(--wa-bg); min-height: 360px; padding: 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }

    /* STATS */
    .section-stats {
      background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #134e4a 100%);
      padding: 72px 0; position: relative; overflow: hidden;
    }
    .section-stats::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");
    }
    .section-stats .inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; text-align: center; max-width: 900px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
    .stat-item { transition: transform 0.3s; }
    .stat-item:hover { transform: scale(1.05); }
    .stat-item .num { font-size: 48px; font-weight: 800; color: white; line-height: 1; }
    .stat-item .label { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 6px; }

    /* PRICING */
    .section-pricing { background: var(--bg-deep); padding: 96px 0; }
    .pricing-header { text-align: center; max-width: 560px; margin: 0 auto 48px; }
    .pricing-header .section-h2 { margin-bottom: 12px; }
    .pricing-note { font-size: 14px; color: var(--text-muted); margin-top: 8px; }
    .pricing-scroll { overflow: visible; }
    .pricing-grid {
      display: grid; gap: 16px;
      grid-template-columns: repeat(5, 1fr);
      align-items: stretch;
    }
    .price-card {
      border: 1px solid var(--border); border-radius: 16px; padding: 24px 18px;
      background: var(--bg-card); display: flex; flex-direction: column;
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s, border-color 0.3s, opacity 0.5s;
      position: relative;
    }
    .price-card:hover {
      transform: translateY(-6px);
      border-color: rgba(99,102,241,0.35);
      box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    }
    .price-card.popular {
      border-color: var(--accent); background: linear-gradient(180deg, rgba(99,102,241,0.15), var(--bg-card));
      box-shadow: 0 0 40px rgba(99,102,241,0.2);
    }
    .price-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; display: inline-block; background: rgba(255,255,255,0.06); color: var(--text-muted); }
    .price-card.popular .price-badge { background: var(--accent); color: white; }
    .price-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
    .price-tagline { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
    .price-amount { margin-bottom: 20px; }
    .price-amount .amount { font-size: 28px; font-weight: 800; }
    .price-amount .period { font-size: 13px; color: var(--text-muted); }
    .price-features { list-style: none; display: flex; flex-direction: column; gap: 7px; flex: 1; margin-bottom: 20px; }
    .price-features li { font-size: 12px; color: var(--text-muted); display: flex; gap: 8px; line-height: 1.5; }
    .price-features li::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
    .price-cta { display: block; text-align: center; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; transition: all 0.25s; }
    .price-card.popular .price-cta { background: linear-gradient(135deg, var(--accent), #4f46e5); color: white; }
    .price-card.popular .price-cta:hover { box-shadow: 0 8px 24px var(--accent-glow); transform: translateY(-2px); }
    .price-card:not(.popular) .price-cta { background: rgba(255,255,255,0.05); color: var(--text); border: 1px solid var(--border); }
    .price-card:not(.popular) .price-cta:hover { background: rgba(99,102,241,0.15); border-color: var(--border-glow); }

    /* CHANGELOG */
    .section-changelog { background: var(--bg-base); padding: 96px 0; }
    .changelog-feed { margin-top: 40px; position: relative; max-width: 720px; }
    .changelog-feed::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2), transparent); }
    .changelog-entry { display: flex; gap: 24px; margin-bottom: 36px; transition: transform 0.2s; }
    .changelog-entry:hover { transform: translateX(6px); }
    .changelog-dot-col { flex-shrink: 0; width: 32px; display: flex; justify-content: center; padding-top: 4px; }
    .changelog-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-base); position: relative; z-index: 1; box-shadow: 0 0 12px currentColor; }
    .changelog-dot.feat { background: var(--accent); color: var(--accent); }
    .changelog-dot.fix { background: var(--accent-3); color: var(--accent-3); }
    .changelog-dot.improve { background: #f59e0b; color: #f59e0b; }
    .changelog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
    .changelog-date { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-dim); text-transform: uppercase; }
    .changelog-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; }
    .changelog-tag.feat { background: rgba(99,102,241,0.15); color: #a5b4fc; }
    .changelog-tag.fix { background: rgba(167,139,250,0.15); color: #c4b5fd; }
    .changelog-tag.improve { background: rgba(245,158,11,0.15); color: #fbbf24; }
    .changelog-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .changelog-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

    /* ROADMAP */
    .section-roadmap { background: var(--bg-card); padding: 96px 0; border-top: 1px solid var(--border); }
    .roadmap-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
    .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
    .legend-dot.live { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
    .legend-dot.soon { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
    .legend-dot.planned { background: transparent; border: 2px solid var(--text-dim); }
    .roadmap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .roadmap-col-header { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
    .roadmap-col-header.live-h { color: #22c55e; }
    .roadmap-col-header.soon-h { color: #f59e0b; }
    .roadmap-col-header.planned-h { color: var(--text-muted); }
    .roadmap-items { display: flex; flex-direction: column; gap: 10px; }
    .roadmap-item { border-radius: 12px; padding: 16px; position: relative; border: 1px solid transparent; transition: all 0.25s; }
    .roadmap-item:hover { transform: translateY(-3px); }
    .roadmap-item.live { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); }
    .roadmap-item.soon { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.2); }
    .roadmap-item.planned { background: var(--bg-elevated); border-color: var(--border); }
    .roadmap-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .roadmap-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .roadmap-item.live .roadmap-item-dot { background: #22c55e; }
    .roadmap-item.soon .roadmap-item-dot { background: #f59e0b; }
    .roadmap-item.planned .roadmap-item-dot { background: var(--text-dim); }
    .roadmap-item-title { font-size: 14px; font-weight: 700; }
    .roadmap-item-desc { font-size: 12px; line-height: 1.6; margin-left: 18px; color: var(--text-muted); }
    .roadmap-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border-radius: 100px; }
    .roadmap-item.live .roadmap-badge { background: rgba(34,197,94,0.15); color: #22c55e; }
    .roadmap-item.soon .roadmap-badge { background: rgba(245,158,11,0.15); color: #f59e0b; }
    .roadmap-note { margin-top: 36px; padding: 20px 24px; border-radius: 12px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); font-size: 13px; color: var(--text-muted); line-height: 1.6; }
    .roadmap-note strong { color: var(--text); }
    .roadmap-note a { color: var(--accent-2); transition: color 0.2s; }
    .roadmap-note a:hover { color: white; }

    /* CONTACT */
    .section-contact { background: var(--bg-deep); padding: 96px 0; }
    .contact-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 56px; margin-top: 48px; align-items: start; }
    .form-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 36px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3); transition: border-color 0.3s;
    }
    .form-card:focus-within { border-color: var(--border-glow); box-shadow: 0 24px 60px rgba(99,102,241,0.1); }
    .form-title { font-size: 20px; font-weight: 800; margin-bottom: 24px; font-family: var(--font-display); letter-spacing: -0.02em; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .form-group label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
    .form-group input, .form-group select, .form-group textarea {
      padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
      background: var(--bg-elevated); color: var(--text); font-size: 14px; font-family: var(--font-sans);
      outline: none; transition: all 0.2s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
    }
    .form-group textarea { resize: vertical; min-height: 80px; }
    .form-submit {
      width: 100%; padding: 14px; border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), #4f46e5); color: white;
      font-size: 15px; font-weight: 700; cursor: pointer; border: none; margin-top: 8px;
      transition: all 0.25s; display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .form-submit:hover { box-shadow: 0 8px 28px var(--accent-glow); transform: translateY(-2px); }
    .form-submit.loading { opacity: 0.7; cursor: not-allowed; }
    .form-success { display: none; text-align: center; padding: 32px; color: var(--accent-2); }
    .form-success .checkmark svg { width: 48px; height: 48px; stroke: var(--accent-2); fill: none; stroke-width: 2; }
    .contact-options h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; font-family: var(--font-display); letter-spacing: -0.02em; }
    .contact-options > p { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
    .contact-method {
      display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px;
      border: 1px solid var(--border); background: var(--bg-card); transition: all 0.25s; margin-bottom: 10px;
    }
    .contact-method:hover { border-color: var(--border-glow); transform: translateX(6px); background: var(--bg-card-hover); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
    .contact-method .icon { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s; }
    .contact-method:hover .icon { border-color: var(--accent); }
    .contact-method .text .title { font-size: 14px; font-weight: 700; }
    .contact-method .text .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .contact-method .arrow { margin-left: auto; color: var(--text-dim); font-size: 18px; transition: transform 0.2s, color 0.2s; }
    .contact-method:hover .arrow { transform: translateX(4px); color: var(--accent-2); }
    .contact-pricing-note { margin-top: 8px; padding: 18px; border-radius: 12px; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); }
    .contact-pricing-note .title { color: var(--accent-2); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .contact-pricing-note p { color: var(--text-muted); font-size: 12px; line-height: 1.6; margin: 0; }

    /* INTERACTIVE FOOTER */
    footer {
      background: var(--bg-base); border-top: 1px solid var(--border);
      padding: 0; color: var(--text-muted); position: relative; overflow: hidden;
    }
    footer::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent);
    }
    .footer-glow {
      position: absolute; bottom: -120px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 200px; background: radial-gradient(ellipse, rgba(99,102,241,0.15), transparent 70%);
      pointer-events: none;
    }
    .footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 64px 24px 48px; max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; }
    .footer-brand .footer-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .footer-brand .logo-icon {
      width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent), var(--accent-3));
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px var(--accent-glow); transition: transform 0.3s;
    }
    .footer-brand .logo-icon:hover { transform: rotate(-8deg) scale(1.08); }
    .footer-brand .logo-icon svg { width: 20px; height: 20px; fill: white; }
    .footer-brand .brand-name { font-size: 18px; font-weight: 800; color: white; }
    .footer-brand p { font-size: 14px; line-height: 1.7; max-width: 280px; margin-bottom: 20px; }
    .footer-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
    .footer-cta-btn {
      padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
      transition: all 0.25s; border: 1px solid var(--border);
    }
    .footer-cta-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
    .footer-cta-btn.primary:hover { box-shadow: 0 6px 20px var(--accent-glow); transform: translateY(-2px); }
    .footer-cta-btn.secondary { background: transparent; color: var(--text); }
    .footer-cta-btn.secondary:hover { border-color: var(--accent); color: #c7d2fe; }
    .footer-col h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-bottom: 20px; font-family: var(--font-sans); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
    .footer-col a {
      display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: 14px;
      color: var(--text-muted); transition: all 0.2s; position: relative;
    }
    .footer-col a::before {
      content: ''; width: 0; height: 2px; background: var(--accent-2); position: absolute; bottom: 4px; left: 0; transition: width 0.25s;
    }
    .footer-col a:hover { color: white; padding-left: 6px; }
    .footer-col a:hover::before { width: 20px; }
    .footer-col a svg { width: 16px; height: 16px; stroke: var(--text-dim); fill: none; stroke-width: 1.75; transition: stroke 0.2s; }
    .footer-col a:hover svg { stroke: var(--accent-2); }
    .footer-bottom {
      border-top: 1px solid var(--border); padding: 24px; text-align: center;
      font-size: 13px; position: relative; z-index: 1;
    }
    .footer-bottom p { line-height: 1.7; }
    .footer-bottom .gstin { color: var(--text-dim); margin-top: 4px; }

    /* RESPONSIVE */
    @media (min-width: 901px) {
      .nav-drawer, .nav-overlay { display: none !important; }
      .nav-links, .nav-cta { display: flex !important; }
      .nav-links { font-size: 12px; letter-spacing: 0.07em; }
      .nav-links a { padding: 8px 0; }
      .nav-toggle { display: none !important; }
      .hero-visual-desktop { display: block; }
      .hero-visual-mobile { display: none !important; }
    }
    @media (max-width: 1200px) and (min-width: 901px) {
      .nav-links { gap: 12px; font-size: 11px; letter-spacing: 0.06em; }
      .nav-cta .btn-ghost { padding: 8px 12px; font-size: 11px; }
      .pricing-grid { grid-template-columns: repeat(6, 1fr); }
      .price-card[data-plan="0"] { grid-column: 1 / 3; }
      .price-card[data-plan="1"] { grid-column: 3 / 5; }
      .price-card[data-plan="2"] { grid-column: 5 / 7; }
      .price-card[data-plan="3"] { grid-column: 2 / 4; }
      .price-card[data-plan="4"] { grid-column: 4 / 6; }
    }
    @media (max-width: 1024px) {
      .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
    }
    @media (max-width: 900px) {
      nav { padding: 0 20px; }
      .nav-links, .nav-cta { display: none !important; }
      .nav-toggle { display: block; }
      .nav-drawer, .nav-overlay { display: flex; }
      .nav-overlay { display: block; }
      .drawer-footer {
        grid-template-columns: 1fr 1fr;
      }
      .drawer-btn-talk { grid-column: 1 / -1; }
      .hero-inner { flex-direction: column; gap: 28px; }
      .hero-text { order: 2; text-align: center; }
      .hero-sub { margin-left: auto; margin-right: auto; }
      .hero-actions { justify-content: center; }
      .hero-proof { justify-content: center; flex-wrap: wrap; }
      .hero-visual-desktop { display: none; }
      .hero-visual-mobile {
        display: block; order: 1; width: 100%;
      }
      .hero-line-2 { text-align: center; }
      .hero-live-feed { max-width: 100%; }
      .pricing-grid {
        display: flex; gap: 14px; overflow-x: auto;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        padding: 4px 4px 16px; margin: 0 -4px;
      }
      .pricing-grid::-webkit-scrollbar { height: 4px; }
      .pricing-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
      .price-card { min-width: 260px; flex-shrink: 0; scroll-snap-align: center; }
      .price-card:hover { transform: none; }
      .demo-wrap { flex-direction: column; }
      .demo-phone-wrap { width: 260px; margin: 0 auto; }
      .story-body { grid-template-columns: 1fr; }
      .story-stats { flex-direction: row; flex-wrap: wrap; }
      .contact-wrap { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
      .roadmap-cols { grid-template-columns: 1fr; }
      .story-card { padding: 32px 24px; }
      .section { padding: 72px 0; }
      .footer-main { grid-template-columns: 1fr; gap: 32px; }
    }
    /* Tablet: 601px - 900px */
    @media (min-width: 601px) and (max-width: 900px) {
      .nav-drawer {
        width: min(400px, 78vw);
        border-left: 1px solid rgba(99,102,241,0.25);
      }
      .drawer-header { padding: 24px 24px 18px; }
      .drawer-nav { padding: 16px 20px 12px; }
      .drawer-nav ul { gap: 8px; }
      .drawer-link { padding: 13px 16px; font-size: 15px; letter-spacing: 0.05em; }
      .drawer-footer { padding: 16px 20px 24px; gap: 10px; }
      .pricing-grid {
        display: grid; grid-template-columns: repeat(2, 1fr);
        overflow-x: visible; gap: 16px;
      }
      .price-card { min-width: unset; scroll-snap-align: unset; }
      .hero-inner { gap: 36px; }
      .hero-title { font-size: 42px; }
      .contact-wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
      .demo-wrap { flex-direction: row; gap: 40px; }
      .footer-main { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    /* Mobile: up to 600px - full-width menu */
    @media (max-width: 600px) {
      .nav-drawer {
        width: 100%; max-width: 100vw; right: 0; left: 0;
        border-left: none; box-shadow: none;
      }
      .nav-drawer.open { transform: translateX(0); }
      .drawer-footer {
        grid-template-columns: 1fr;
      }
      .drawer-btn-talk { grid-column: auto; }
    }
    @media (max-width: 640px) {
      .container { padding: 0 16px; }
      .pain-grid, .features-grid { grid-template-columns: 1fr; }
      .hero-title { font-size: 32px; }
      .hero-sub { font-size: 16px; }
    }