/* ===== GrowthOS Elite SaaS Landing Page ===== */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
 @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700,800&display=swap');

 /* --- Light mode design tokens --- */
 :root {
   --bg: #ffffff;
   --bg-darker: #f8f9fa;
   --bg2: #f1f3f5;
   --surface: rgba(0, 0, 0, 0.02);
   --surface2: rgba(0, 0, 0, 0.04);
   --surface3: rgba(0, 0, 0, 0.06);
   --surface-opaque: #f8f9fa;
   --surface-hover: rgba(0, 0, 0, 0.04);
   --border: rgba(0, 0, 0, 0.08);
   --border-strong: rgba(0, 0, 0, 0.18);
   --text: #0f1117;
   --text-mid: #4a5568;
   --text-dim: #8a94a6;
   --t3: #8a94a6;
   --accent: #4f6ef7;
   --accent-glow: rgba(79, 110, 247, 0.10);
   --accent-strong: #3755e0;
   --green: #16a34a;
   --green-bg: rgba(22, 163, 74, 0.08);
   --green-b: rgba(22, 163, 74, 0.2);
   --amber: #d97706;
   --amber-bg: rgba(217, 119, 6, 0.09);
   --danger: #dc2626;
   --gradient: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
   --glow: radial-gradient(circle at center, rgba(79, 110, 247, 0.07), transparent 70%);
   --radius: 8px;
   --radius-lg: 12px;
   --radius-xl: 18px;
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
   --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
   --ease: cubic-bezier(0.19, 1, 0.22, 1);
   --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   --font-heading: 'General Sans', 'Inter', sans-serif;
 }

 /* --- Reset --- */
 *,
 *::before,
 *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   font-size: 16px;
 }

 body {
   font-family: var(--font-main);
   background: var(--bg);
   color: var(--text);
   line-height: 1.5;
   letter-spacing: -0.01em;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 html,
 body {
   width: 100%;
   max-width: 100vw;
 }

 a {
   text-decoration: none;
   color: inherit;
   transition: color .2s var(--ease);
 }

 button {
   cursor: pointer;
   border: none;
   background: none;
   font-family: inherit;
   transition: all .2s var(--ease);
 }

 img {
   max-width: 100%;
   display: block;
   border-radius: var(--radius);
 }

 ul {
   list-style: none;
 }

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

 /* --- Typography --- */
 .hero-title {
   font-family: var(--font-heading);
   font-size: clamp(48px, 6vw, 84px);
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.04em;
   margin-bottom: 24px;
 }

 .section-title {
   font-family: var(--font-heading);
   font-size: clamp(32px, 4vw, 48px);
   font-weight: 600;
   line-height: 1.1;
   letter-spacing: -0.03em;
   text-align: center;
   margin-bottom: 0px;
 }

 .section-subtitle {
   font-size: clamp(16px, 1.2vw, 20px);
   color: var(--text-mid);
   line-height: 1.5;
   max-width: 600px;
   letter-spacing: -0.01em;
   margin: 2px auto 60px auto;
   text-align: center;
 }

 .section-tag {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--text-dim);
   margin-bottom: 20px;
   text-align: center;
   width: max-content;
   margin-left: auto;
   margin-right: auto;
 }

 .section-tag::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 1px;
   background: var(--accent);
   box-shadow: 0 0 10px var(--accent);
   display: inline-block;
   transform: rotate(45deg);
   flex-shrink: 0;
 }

 .gradient-text {
   background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 /* --- Scroll Reveal --- */
 /* Global Section Headers */
 .problem-header,
 .shift-header,
 .arch-header,
 .workflow-header,
 .impact-header,
 .uni-header,
 .blog-header,
 .vision-header,
 .faq-header {
   text-align: center;
   margin-bottom: 0px;
   /* Reset so .section-subtitle controls the 60px margin perfectly */
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity .8s var(--ease), transform .8s var(--ease);
 }

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

 /* --- Buttons --- */
 .btn-primary {
   padding: 13px 20px;
   border-radius: 6px;
   font-size: 16px;
   font-weight: 500;
   background: var(--accent);
   color: #fff;
   transition: all .2s var(--ease);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid var(--accent);
 }

 .btn-primary:hover {
   background: var(--accent-strong);
   border-color: var(--accent-strong);
   transform: translateY(-1px);
 }

 .btn-secondary {
   padding: 13px 20px;
   border-radius: 6px;
   font-size: 16px;
   font-weight: 500;
   background: #fff;
   color: var(--text);
   border: 1px solid var(--border);
   transition: all .2s var(--ease);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   box-shadow: var(--shadow-sm);
 }

 .btn-secondary:hover {
   background: var(--bg-darker);
   border-color: var(--border-strong);
   transform: translateY(-1px);
 }

 /* --- Waitlist --- */
 .waitlist-input-wrap {
   display: flex;
   gap: 0;
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--border);
   background: var(--surface);
 }

 .waitlist-input {
   flex: 1;
   padding: 14px 18px;
   background: transparent;
   border: none;
   color: var(--text);
   font-size: 15px;
   font-family: inherit;
   outline: none;
 }

 .waitlist-input::placeholder {
   color: var(--text-dim);
 }

 .waitlist-btn {
   padding: 14px 32px;
   background: var(--accent);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: all .25s var(--ease);
   white-space: nowrap;
 }

 .waitlist-btn:hover {
   background: var(--accent2);
 }

 .waitlist-success {
   display: none;
   padding: 16px;
   font-size: 15px;
   color: var(--green);
   font-weight: 500;
 }

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

 /* ===== 1. NAVIGATION ===== */
 .nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   height: 64px;
   display: flex;
   align-items: center;
   transition: all .3s var(--ease);
   border-bottom: 1px solid transparent;
 }

 .nav.scrolled {
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
   box-shadow: var(--shadow-sm);
 }

 .nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 24px;
 }

 .nav-logo {
   display: flex;
   align-items: center;
   text-decoration: none;
 }

 .nav-logo img {
   height: 28px;
   width: auto;
   display: block;
 }


 .nav-links {
   display: flex;
   align-items: center;
   gap: 24px;
 }

 .nav-links a {
   font-size: 14px;
   font-weight: 400;
   color: var(--text-mid);
   transition: color .2s var(--ease);
 }

 .nav-links a:hover {
   color: var(--text);
 }

 .nav-cta {
   padding: 8px 16px;
   border-radius: 5px;
   font-size: 13px;
   font-weight: 500;
   background: var(--accent);
   color: #fff !important;
   border: 1px solid var(--accent);
   transition: all .2s var(--ease);
 }

 .nav-cta:hover {
   background: var(--accent-strong);
   color: #fff !important;
   border-color: var(--accent-strong);
 }

 .nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 32px;
   height: 32px;
   cursor: pointer;
   z-index: 2005;
   position: relative;
   background: transparent;
   border: none;
   padding: 8px 6px;
   margin-left: 15px;
 }

 .nav-toggle span {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--text);
   border-radius: 2px;
   transition: all .3s var(--ease);
   transform-origin: center;
 }

 /* Light mode nav background when open */
 .nav-links.open {
   background: #fff;
   border: 1px solid var(--border);
 }

 /* ===== 2. HERO ===== */
 .hero {
   min-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 120px 0 80px;
   position: relative;
   overflow: hidden;
   text-align: center;
 }

 .hero::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 50% -10%, rgba(79, 110, 247, 0.08), transparent 65%);
   pointer-events: none;
 }

 .hero .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 900px;
   text-align: center;
 }

 .hero-content {
   position: relative;
   z-index: 2;
   margin-bottom: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   width: 100%;
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }

 .hero .container {
   max-width: 1400px;
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px;
   border-radius: 100px;
   background: rgba(79, 110, 247, 0.07);
   border: 1px solid rgba(79, 110, 247, 0.2);
   font-size: 13px;
   font-weight: 500;
   color: var(--accent-strong);
   margin-bottom: 24px;
 }

 .hero-badge .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent);
 }

 .hero-sub {
   font-size: clamp(18px, 1.5vw, 22px);
   color: var(--text-mid);
   margin-top: 0;
   line-height: 1.4;
   max-width: 680px;
   margin-left: auto;
   margin-right: auto;
 }

 .hero-actions {
   display: flex;
   gap: 16px;
   margin-top: 40px;
   justify-content: center;
 }

 .hero-see-how {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 20px;
   font-size: 14px;
   color: var(--text-mid);
   font-weight: 500;
   transition: color .2s;
 }

 .hero-see-how:hover {
   color: var(--accent);
 }

 /* Hero Visual */
 .hero-visual {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 520px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .hero-visual-card {
   background: rgba(255, 255, 255, 0.02);
   border-radius: 12px;
   border: 1px solid var(--border);
   padding: 40px;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(4px);
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: center;
   mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
   width: 100%;
 }

 .hero-visual-label {
   font-size: 11px;
   font-weight: 500;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 8px;
   text-align: center;
 }

 .hero-node {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 16px 24px;
   background: rgba(255, 255, 255, 0.03);
   border-radius: 8px;
   border: 1px solid var(--border);
   width: max-content;
   min-width: 180px;
   opacity: 1;
   transform: none;
   animation: none;
 }

 .hero-node-icon {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
 }

 .hero-node-text {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }

 .hero-node-text h4 {
   font-size: 13px;
   font-weight: 500;
   color: #fff;
   margin: 0;
 }

 .hero-node-text p {
   font-size: 12px;
   color: var(--text-dim);
   margin: 4px 0 0 0;
 }

 .hero-connector {
   width: 1px;
   height: 24px;
   background: var(--border);
   margin: 0;
 }

 .hero-connector::after {
   display: none;
 }

 /* Hero Trust */
 .hero-trust {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 48px;
   justify-content: center;
 }

 .hero-trust-avatars {
   display: flex;
 }

 .trust-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   margin-right: -8px;
   border: 2px solid var(--bg);
 }

 .hero-trust-text {
   font-size: 13px;
   color: var(--text-mid);
 }

 .hero-trust-text strong {
   color: #fff;
 }

 .hero-waitlist {
   margin-top: 32px;
   max-width: 440px;
 }

 /* ===== 3. AUTHORITY STRIP ===== */
 .authority-strip {
   min-height: 120px;
   padding: 40px 0;
   background: var(--bg-darker);
   display: flex;
   align-items: center;
 }

 .authority-inner {
   text-align: center;
 }

 .authority-labels {
   margin-bottom: 32px;
 }

 .authority-label {
   font-size: 11px;
   font-weight: 700;
   color: var(--text-dim);
   letter-spacing: 2.5px;
   text-transform: uppercase;
   margin-bottom: 40px;
 }

 .authority-logos {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   max-width: 1000px;
   margin: 0 auto;
 }


 .logo-box {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.05);
   border-radius: 12px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px 24px;
   transition: all 0.3s var(--ease);
   box-shadow: none;
 }

 .logo-box img {
   max-height: 40px;
   max-width: 100%;
   width: auto;
   object-fit: contain;
   opacity: 1;
   filter: none;
 }

 .logo-box:hover {
   background: #ffffff;
   border-color: rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }

 /* ===== 3.5. PROOF STATS BAR ===== */
 .proof-stats {
   padding: 80px 0 0 0;
   background: var(--bg);
 }

 .stats-grid-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   align-items: center;
 }

 .stat-card-clean {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 32px 24px;
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   transition: all 0.3s var(--ease);
 }

 .stat-card-clean:hover {
   transform: translateY(-3px);
   border-color: var(--border-strong);
   background: var(--surface-hover);
 }

 .stat-number {
   font-family: var(--font-heading);
   font-size: clamp(32px, 3vw, 42px);
   font-weight: 700;
   color: var(--accent);
   margin-bottom: 8px;
   letter-spacing: -1px;
 }

 .stat-label {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-mid);
 }



 /* ===== 4.5. HOW IT WORKS ===== */
 .how-it-works {
   padding: 100px 0;
   background: var(--bg);
 }

 .how-header {
   text-align: center;
   margin-bottom: 60px;
 }

 .flow-wrapper {
   margin-top: 40px;
 }

 .flow-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   position: relative;
 }

 .flow-step {
   flex: 1;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   box-shadow: var(--shadow-sm);
   transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
   position: relative;
   min-height: 220px;
 }

 .flow-step:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
   border-color: var(--border-strong);
 }

 .flow-icon {
   width: 52px;
   height: 52px;
   background: var(--green-bg);
   color: var(--green);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
 }

 .flow-icon .material-icons {
   font-size: 26px;
 }

 .flow-title {
   font-family: var(--font-heading);
   font-weight: 600;
   font-size: 16px;
   color: var(--text);
   margin-bottom: 12px;
   line-height: 1.4;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
   gap: 6px;
 }

 .flow-dot {
   width: 10px;
   height: 10px;
   background-color: var(--green);
   border-radius: 50%;
   box-shadow: 0 0 6px var(--green-b);
   display: inline-block;
 }

 .flow-desc {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.5;
 }

 .flow-arrow {
   color: rgba(0, 0, 0, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .flow-arrow .material-icons {
   font-size: 24px;
 }

 @media (max-width: 900px) {
   .flow-container {
     flex-direction: column;
     gap: 24px;
   }

   .flow-step {
     width: 100%;
     min-height: auto;
   }

   .flow-arrow {
     transform: rotate(90deg);
   }
 }

 /* ===== 4. PROBLEM ===== */
 .problem {
   padding: 120px 0;
   background: var(--bg);
 }

 .problem-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
 }

 .problem-card {
   padding: 48px 32px;
   background: var(--bg);
   transition: all .3s var(--ease);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .problem-card:hover {
   background: rgba(255, 255, 255, 0.01);
 }

 .problem-card-icon {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   margin-bottom: 24px;
   color: #fff;
 }

 .problem-card h3 {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 12px;
   color: #fff;
   text-align: center;
 }

 .problem-card p {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.6;
   text-align: center;
 }

 /* --- Redesigned Problem Section --- */
 .problem-header-alt {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   max-width: 800px;
   margin: 0 auto 6rem;
 }

 .section-title-alt {
   font-family: var(--font-heading);
   font-size: clamp(2.8rem, 5vw, 4.5rem);
   font-weight: 800;
   line-height: 1.0;
   letter-spacing: -0.03em;
   text-align: center;
   margin-bottom: 1.5rem;
 }

 .section-subtitle-alt {
   font-size: clamp(16px, 1.2vw, 20px);
   color: var(--text-mid);
   line-height: 1.75;
   text-align: center;
   max-width: 600px;
   margin: 24px auto 60px auto;
 }

 .problem-editorial-list {
   display: flex;
   flex-direction: column;
 }

 .problem-editorial-item {
   display: grid;
   grid-template-columns: 80px 1fr 1fr;
   gap: 2rem;
   align-items: start;
   padding: 2.5rem 0;
   border-top: 1px solid var(--border);
   transition: all 0.3s ease;
 }

 .problem-editorial-item:last-child {
   border-bottom: 1px solid var(--border);
 }

 .problem-editorial-item:hover {
   border-top-color: var(--border-strong);
   background: rgba(0, 0, 0, 0.015);
 }

 .problem-editorial-num {
   font-family: var(--font-heading);
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--text-dim);
   letter-spacing: 0.1em;
   padding-top: 0.2rem;
 }

 .problem-editorial-icon-title {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .problem-editorial-icon {
   width: 44px;
   height: 44px;
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
 }

 .problem-editorial-item:hover .problem-editorial-icon {
   background: var(--accent-glow);
   border-color: var(--accent);
 }

 .problem-editorial-icon .material-icons {
   font-size: 20px;
   color: var(--text-dim);
   transition: color 0.3s;
 }

 .problem-editorial-item:hover .material-icons {
   color: var(--accent);
 }

 .problem-editorial-title {
   font-family: var(--font-heading);
   font-size: 1.4rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--text);
 }

 .problem-editorial-desc {
   font-size: 0.95rem;
   color: var(--text-mid);
   line-height: 1.75;
   padding-top: 0.2rem;
 }

 @media (max-width: 991px) {
   .problem-header-alt {
     gap: 2rem;
   }

   .problem-editorial-item {
     grid-template-columns: 60px 1fr;
     gap: 1.5rem;
   }

   .problem-editorial-desc {
     grid-column: 2;
     padding-top: 0;
   }
 }

 /* --- Redesigned New Model Section --- */
 .new-model {
   padding: 120px 0;
   background: var(--bg-darker);
 }

 .new-model-header-wrap {
   text-align: center;
   margin: 0 auto 60px;
 }

 .model-compare {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: stretch;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   margin-bottom: 80px;
   background: var(--surface);
 }

 .compare-col {
   padding: 3rem;
   display: flex;
   flex-direction: column;
 }

 .compare-col.before {
   background: var(--bg-darker);
 }

 .compare-col.after {
   background: rgba(79, 110, 247, 0.04);
   border-left: 1px solid var(--border);
 }

 .compare-divider {
   width: 1px;
   background: var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }

 .vs-badge {
   background: var(--bg-darker);
   border: 1px solid var(--border);
   color: var(--text-dim);
   font-size: 0.7rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   padding: 0.4rem 0.5rem;
   border-radius: 6px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space: nowrap;
   z-index: 10;
 }

 .compare-label {
   font-size: 0.7rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   font-weight: 500;
   margin-bottom: 1.5rem;
   color: var(--text-dim);
 }

 .compare-col.after .compare-label {
   color: var(--accent);
 }

 .compare-title {
   font-family: var(--font-heading);
   font-size: 1.4rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   margin-bottom: 2rem;
 }

 .compare-col.before .compare-title {
   color: var(--text-mid);
 }

 .compare-list {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
 }

 .compare-list li {
   display: flex;
   gap: 0.75rem;
   align-items: flex-start;
   font-size: 0.95rem;
   line-height: 1.5;
   color: var(--text-mid);
 }

 .compare-col.after li {
   color: var(--text);
 }

 .compare-list li .bullet {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   margin-top: 2px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   background: rgba(0, 0, 0, 0.05);
   color: var(--text-dim);
 }

 .compare-col.after .bullet {
   background: var(--accent);
   color: #fff;
   font-weight: 700;
 }

 .model-pillars-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5px;
   background: var(--border);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
 }

 .pillar-item {
   background: var(--bg);
   padding: 3rem 2.5rem;
   transition: background 0.3s;
 }

 .pillar-item:hover {
   background: var(--surface);
 }

 .pillar-icon {
   font-size: 24px;
   color: var(--accent);
   margin-bottom: 1.5rem;
   display: block;
 }

 .pillar-title {
   font-family: var(--font-heading);
   font-size: 1.1rem;
   font-weight: 700;
   letter-spacing: -0.01em;
   margin-bottom: 1rem;
   color: var(--text);
 }

 .pillar-desc {
   font-size: 0.9rem;
   color: var(--text-mid);
   line-height: 1.6;
 }

 @media (max-width: 991px) {
   .model-compare {
     grid-template-columns: 1fr;
   }

   .compare-divider {
     height: 1px;
     width: 100%;
   }

   .vs-badge {
     transform: translate(-50%, -50%) rotate(0deg);
   }

   .model-pillars-grid {
     grid-template-columns: 1fr;
   }
 }

 /* --- Redesigned System Architecture (Five Systems) --- */
 .arch-systems-layout {
   display: grid;
   grid-template-columns: 320px 1fr;
   gap: 1px;
   background: var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   border: 1px solid var(--border);
   min-height: 460px;
 }

 .arch-tabs {
   background: var(--bg2);
   display: flex;
   flex-direction: column;
 }

 .arch-tab {
   padding: 1.5rem 1.75rem;
   border-bottom: 1px solid var(--border);
   cursor: pointer;
   transition: all 0.25s var(--ease);
   display: flex;
   align-items: center;
   gap: 1rem;
   position: relative;
   background: var(--bg2);
   text-align: left;
 }

 .arch-tab:last-child {
   border-bottom: none;
 }

 .arch-tab.active {
   background: var(--bg);
 }

 .arch-tab.active::after {
   content: '';
   position: absolute;
   right: -1px;
   top: 0;
   width: 2px;
   height: 100%;
   background: var(--accent);
   box-shadow: 0 0 10px var(--accent);
 }

 .arch-tab-num {
   font-size: 0.7rem;
   letter-spacing: 0.1em;
   color: var(--text-dim);
   font-weight: 500;
   min-width: 24px;
   transition: color 0.25s;
 }

 .arch-tab.active .arch-tab-num {
   color: var(--accent);
 }

 .arch-tab-info {
   flex: 1;
 }

 .arch-tab-name {
   font-family: var(--font-heading);
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--text-mid);
   transition: color 0.25s;
   display: block;
   margin-bottom: 0.15rem;
 }

 .arch-tab.active .arch-tab-name {
   color: var(--text);
 }

 .arch-tab-micro {
   font-size: 0.75rem;
   color: var(--text-dim);
   transition: color 0.25s;
 }

 .arch-tab:hover:not(.active) {
   background: var(--surface);
 }

 .arch-tab:hover:not(.active) .arch-tab-name {
   color: var(--text);
 }

 .arch-tab-arrow {
   font-size: 10px;
   color: var(--text-dim);
   opacity: 0;
   transition: opacity 0.2s;
 }

 .arch-tab.active .arch-tab-arrow {
   opacity: 1;
   color: var(--accent);
 }

 .arch-content {
   background: var(--bg);
   padding: 3rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .arch-panel {
   display: none;
 }

 .arch-panel.active {
   display: block;
   animation: slideUpFade 0.5s var(--ease);
 }

 @keyframes slideUpFade {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .arch-panel-icon {
   font-size: 32px;
   color: var(--accent);
   margin-bottom: 1.5rem;
   display: block;
 }

 .arch-panel-title {
   font-family: var(--font-heading);
   font-size: 1.8rem;
   font-weight: 700;
   letter-spacing: -0.02em;
   line-height: 1.1;
   margin-bottom: 1rem;
   color: var(--text);
 }

 .arch-panel-desc {
   font-size: 1rem;
   color: var(--text-mid);
   line-height: 1.8;
   max-width: 520px;
   margin-bottom: 2rem;
 }

 .arch-panel-highlight {
   padding: 1.25rem 1.5rem;
   background: var(--accent-glow);
   border-left: 2px solid var(--accent);
   border-radius: 0 10px 10px 0;
   font-size: 0.875rem;
   color: var(--accent-strong);
   line-height: 1.65;
   margin-bottom: 2rem;
 }

 .arch-panel-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
 }

 .arch-tag {
   font-size: 0.75rem;
   padding: 0.35rem 0.85rem;
   border-radius: 100px;
   border: 1px solid var(--border);
   color: var(--text-dim);
   letter-spacing: 0.02em;
 }

 @media (max-width: 991px) {
   .arch-systems-layout {
     grid-template-columns: 1fr;
     gap: 30px;
     min-height: auto;
     background: transparent;
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
   }

   .arch-tabs {
     flex-direction: column;
     overflow-x: visible;
     border-bottom: none;
     border-right: none;
     margin-bottom: 0;
     background: transparent;
   }

   .arch-tab {
     border-bottom: 1px solid var(--border);
     border-right: none;
     white-space: normal;
     padding: 20px;
     text-align: left;
   }

   .arch-tab:last-child {
     border-bottom: none;
   }

   .arch-tab.active::after {
     width: 2px;
     height: 100%;
     bottom: 0;
     top: 0;
     left: 0;
   }
 }

 /* ===== 5. CATEGORY SHIFT ===== */
 .category-shift {
   padding: 120px 0;
   background: var(--bg);
   border-top: 1px solid var(--border);
 }

 .shift-pillars {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .shift-pillar {
   padding: 48px 32px;
   border-radius: var(--radius-lg);
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   transition: all .3s var(--ease);
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .shift-pillar:hover {
   border-color: var(--border-strong);
   transform: translateY(-2px);
 }

 .shift-pillar-icon {
   width: 48px;
   height: 48px;
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   margin-bottom: 24px;
 }

 .shift-pillar h3 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 12px;
   color: var(--text);
   text-align: center;
 }

 .shift-pillar p {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.6;
   text-align: center;
 }

 /* ===== 5.5. BEFORE VS AFTER ===== */
 .before-after {
   padding: 100px 0 120px 0;
   background: var(--bg);
 }

 .ba-header {
   text-align: center;
   margin-bottom: 64px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .ba-table {
   max-width: 900px;
   margin: 0 auto;
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
 }

 .ba-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border-bottom: 1px solid var(--border);
 }

 .ba-row:last-child {
   border-bottom: none;
 }

 .ba-row.ba-header-row {
   background: rgba(255, 255, 255, 0.02);
   font-weight: 600;
 }

 .ba-col {
   padding: 24px;
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }

 .ba-header-row .ba-col {
   font-family: var(--font-heading);
   font-size: 16px;
   color: #fff;
 }

 .ba-col:first-child {
   font-weight: 600;
   color: #fff;
   border-right: 1px solid var(--border);
 }

 .ba-col.ba-before {
   color: var(--text-mid);
   border-right: 1px solid var(--border);
   opacity: 0.8;
 }

 .ba-col.ba-after {
   color: var(--green);
   font-weight: 500;
   background: linear-gradient(90deg, transparent, rgba(63, 185, 80, 0.05));
 }



 /* ===== 6. SYSTEM ARCHITECTURE ===== */
 .architecture {
   padding: 120px 0;
   background: var(--bg);
 }

 .arch-map {
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
 }

 .arch-node {
   padding: 32px;
   border-radius: var(--radius-lg);
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   text-align: center;
   transition: all .3s var(--ease);
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: calc(33.333% - 16px);
   min-width: 250px;
 }

 .arch-node:hover {
   border-color: var(--border-strong);
   transform: translateY(-2px);
 }

 .arch-node-icon {
   font-size: 24px;
   margin-bottom: 20px;
   display: block;
 }

 .arch-node h4 {
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 8px;
   color: var(--text);
 }

 .arch-node p {
   font-size: 13px;
   color: var(--text-mid);
   line-height: 1.5;
   opacity: 1;
   max-height: none;
   overflow: visible;
 }

 .arch-node.center-node {
   background: var(--surface-opaque);
   border-color: var(--border);
 }

 /* ===== 7. INTERACTIVE PRODUCT STORY (VERTICAL NAV) ===== */
 .interactive-workflow {
   padding: 120px 0;
   background: var(--bg2);
   position: relative;
   min-height: 720px;
 }

 .interactive-workflow::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   max-width: 600px;
   height: 600px;
   background: var(--glow);
   pointer-events: none;
 }

 .workflow-header {
   position: relative;
   z-index: 2;
 }

 /* Vertical split layout */
 .workflow-split {
   display: grid;
   grid-template-columns: 320px 1fr;
   gap: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--shadow-xl);
   position: relative;
   z-index: 2;
   min-height: 580px;
 }

 /* Left vertical nav */
 .workflow-nav {
   background: var(--bg);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   padding: 32px 0;
 }

 .nav-group-label {
   font-size: 11px;
   font-weight: 700;
   color: var(--text-dim);
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 24px 28px 8px;
 }

 .workflow-nav-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding: 24px 28px;
   cursor: pointer;
   border-left: 3px solid transparent;
   transition: all .3s var(--ease);
   position: relative;
 }

 .workflow-nav-item:hover {
   background: rgba(79, 124, 255, .04);
 }

 .workflow-nav-item.active {
   background: rgba(79, 124, 255, .06);
   border-left-color: var(--accent);
 }


 .wn-number {
   font-family: 'General Sans', sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: var(--text-dim);
   letter-spacing: 1px;
   padding-top: 2px;
   flex-shrink: 0;
   transition: color .3s;
 }

 .workflow-nav-item.active .wn-number {
   color: var(--accent);
 }

 .wn-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--text-mid);
   transition: color .3s;
   margin-bottom: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .workflow-nav-item.active .wn-title {
   color: var(--text);
 }

 .wn-desc {
   font-size: 13px;
   color: var(--text-dim);
   line-height: 1.4;
   max-height: 0;
   overflow: hidden;
   transition: max-height .4s var(--ease), opacity .3s;
   opacity: 0;
 }

 .workflow-nav-item.active .wn-desc {
   max-height: 60px;
   opacity: 1;
 }

 .wn-arrow {
   color: var(--accent);
   font-size: 16px;
   opacity: 0;
   transition: all .3s;
   transform: translateX(-4px);
 }

 .workflow-nav-item.active .wn-arrow {
   opacity: 1;
   transform: translateX(0);
 }

 /* Right content panel */
 .workflow-panels {
   position: relative;
   overflow: hidden;
   padding: 0px;
   box-sizing: border-box;
 }

 .workflow-pane {
   display: none;
   height: 100%;
   animation: paneFadeIn .5s var(--ease);
 }

 .workflow-pane.active {
   display: block;
 }

 @keyframes paneFadeIn {
   from {
     opacity: 0;
     transform: translateX(10px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* Legacy tab classes kept for JS compatibility */
 .workflow-tabs {
   display: none;
 }

 /* Light mode workflow section - clean light surface */
 .dark-demo {
   --surface: #f8f9fb;
   --surface2: #eef0f5;
   --surface3: #e4e7ef;
   --border: rgba(0, 0, 0, 0.08);
   --border2: rgba(0, 0, 0, 0.05);
   --text: #0f1117;
   --text-mid: #4a5568;
   --text-dim: #8a94a6;
   --accent: #4f6ef7;
   --accent2: #3755e0;
   --accent-light: rgba(79, 110, 247, 0.10);
   --accent-base: rgba(79, 110, 247, 0.20);
   --green: #16a34a;
   --green-bg: rgba(22, 163, 74, 0.09);
   --green-b: rgba(22, 163, 74, 0.22);
   --cyan: #0891b2;
   --amber: #d97706;
   background: #f4f6fc;
 }

 /* KB Styles */
 .kb-inner {
   max-width: 1000px;
   margin: 0 auto;
   color: var(--text);
   height: 100%;
   display: flex;
   flex-direction: column;
   padding: 40px 40px 0 40px;
   box-sizing: border-box;
 }

 .kb-inner .sec-header {
   text-align: center;
   margin-bottom: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .kb-inner .sec-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   border-radius: 20px;
   background: var(--surface2);
   border: 1px solid var(--border);
   font-size: 13px;
   font-weight: 600;
   color: var(--text-mid);
   margin-bottom: 20px;
   letter-spacing: .5px;
 }

 .kb-inner .sec-eyebrow-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 8px var(--accent);
 }

 .kb-inner .sec-title {
   font-family: 'General Sans', sans-serif;
   font-size: clamp(32px, 4vw, 48px);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -1px;
   margin-bottom: 16px;
   color: #fff;
 }

 .kb-inner .sec-title .grad {
   background: linear-gradient(to right, #fff, var(--text-dim));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .kb-inner .sec-sub {
   font-size: 17px;
   color: var(--text-mid);
   max-width: 500px;
   line-height: 1.5;
   margin-bottom: 32px;
   text-align: center;
 }

 .insight-pill {
   display: inline-flex;
   align-items: center;
   gap: 16px;
   padding: 12px 16px;
   border-radius: 12px;
   background: rgba(79, 124, 255, .08);
   border: 1px solid rgba(79, 124, 255, .2);
   text-align: left;
 }

 .insight-pill .pill-icon {
   font-size: 20px;
 }

 .insight-pill .pill-text {
   font-size: 13px;
   font-weight: 600;
   color: #fff;
 }

 .insight-pill .pill-text span {
   color: var(--text-mid);
   font-weight: 400;
 }

 .btn-review {
   padding: 8px 14px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   background: var(--surface2);
   color: #fff;
   border: 1px solid var(--border);
   transition: all .2s;
   cursor: pointer;
 }

 .btn-review:hover {
   background: var(--surface3);
   border-color: rgba(255, 255, 255, .2);
 }

 .client-bar {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 16px;
   margin-bottom: 8px;
   scrollbar-width: thin;
   scrollbar-color: var(--surface3) transparent;
 }

 .client-chip {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
   border-radius: 10px;
   background: var(--surface2);
   border: 1px solid var(--border);
   cursor: pointer;
   transition: all .2s;
   flex-shrink: 0;
 }

 .client-chip:hover {
   border-color: rgba(255, 255, 255, .15);
   background: var(--surface3);
 }

 .client-chip.active {
   background: var(--surface);
   border-color: var(--border2);
   box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
 }

 .cc-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent);
   box-shadow: 0 0 6px var(--accent-base);
 }

 .cc-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
 }

 .cc-count {
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 4px;
   background: var(--accent-light);
   color: var(--accent);
   border: 1px solid var(--accent-base);
 }

 .intel-panel {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 16px 16px 0 0;
   border-bottom: none;
   padding: 24px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
   flex-grow: 1;
 }

 .panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--border);
   flex-wrap: wrap;
   gap: 16px;
 }

 .panel-title-wrap {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .panel-title {
   font-size: 18px;
   font-weight: 600;
   color: var(--text);
 }

 .panel-verified-badge {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   font-weight: 600;
   color: var(--green);
   padding: 4px 10px;
   border-radius: 20px;
   background: var(--green-bg);
   border: 1px solid var(--green-b);
 }

 .panel-verified-badge svg {
   width: 12px;
   height: 12px;
 }

 .filter-search {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   border-radius: 8px;
   background: var(--surface2);
   border: 1px solid var(--border);
   font-size: 13px;
   color: var(--text-mid);
   width: 200px;
 }

 .filter-search svg {
   width: 14px;
   height: 14px;
 }

 .section-label {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   color: var(--text-dim);
   margin-bottom: 16px;
   letter-spacing: .5px;
 }

 .cards-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
 }

 .insight-card {
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px;
   cursor: pointer;
   transition: all .2s var(--ease);
   display: flex;
   flex-direction: column;
 }

 .insight-card:hover {
   transform: translateY(-3px);
   border-color: var(--accent-base);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
 }

 .card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
 }

 .card-type-row {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .card-type-icon {
   width: 24px;
   height: 24px;
   border-radius: 6px;
   background: var(--accent);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   border: 1px solid var(--accent);
 }

 .card-type-icon svg {
   width: 12px;
   height: 12px;
 }

 .card-type-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-mid);
 }

 .card-badge {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 600;
   color: var(--green);
 }

 .card-badge svg {
   width: 10px;
   height: 10px;
 }

 .card-body {
   font-size: 14px;
   color: var(--text);
   line-height: 1.5;
   margin-bottom: 16px;
   flex-grow: 1;
 }

 .card-source {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 12px;
   border-top: 1px solid var(--border);
 }

 .card-source-left {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--text-dim);
 }

 .card-source-left svg {
   width: 14px;
   height: 14px;
 }

 .card-arrow {
   color: var(--accent);
   font-size: 16px;
   font-weight: bold;
   opacity: 0;
   transform: translateX(-4px);
   transition: all .2s;
 }

 .insight-card:hover .card-arrow {
   opacity: 1;
   transform: translateX(0);
 }

 /* Drawer */
 .drawer-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .6);
   backdrop-filter: blur(4px);
   z-index: 9999;
   display: flex;
   justify-content: flex-end;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s;
 }

 .drawer-overlay.active {
   opacity: 1;
   pointer-events: auto;
 }

 .drawer {
   width: 100%;
   max-width: 500px;
   height: 100%;
   background: #fff;
   border-left: 1px solid rgba(0, 0, 0, 0.10);
   box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
   transform: translateX(100%);
   transition: transform .4s var(--ease);
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 .drawer-overlay.active .drawer {
   transform: translateX(0);
 }

 .drawer-header {
   padding: 24px;
   border-bottom: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--surface2);
 }

 .dh-left {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .dh-file-icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   background: var(--surface3);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
 }

 .dh-file-icon svg {
   width: 16px;
   height: 16px;
 }

 .drawer-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   flex: 1;
 }

 .drawer-x {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text-mid);
   cursor: pointer;
   transition: all .2s;
 }

 .drawer-x:hover {
   background: var(--surface3);
   color: #fff;
 }

 .drawer-info-bar {
   padding: 12px 24px;
   background: rgba(79, 124, 255, .05);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text-mid);
 }

 .drawer-info-bar svg {
   width: 16px;
   height: 16px;
   color: var(--accent);
 }

 .drawer-info-bar strong {
   color: var(--accent);
   font-weight: 600;
 }

 .drawer-body {
   padding: 24px;
   overflow-y: auto;
   flex-grow: 1;
   font-size: 14px;
   line-height: 1.6;
   color: var(--text);
 }

 .doc-h1 {
   font-size: 20px;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 24px;
 }

 .doc-h2 {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
   margin: 24px 0 12px;
 }

 .doc-p {
   margin-bottom: 16px;
   color: var(--text-mid);
 }

 .doc-list {
   margin-bottom: 16px;
   padding-left: 20px;
   list-style: disc;
   color: var(--text-mid);
 }

 .doc-list li {
   margin-bottom: 8px;
 }

 .highlighted-text {
   display: inline;
   background: var(--accent);
   color: #fff;
   padding: 2px 8px;
   border-radius: 4px;
   font-weight: 600;
   font-size: 0.92em;
   letter-spacing: 0.01em;
   white-space: nowrap;
 }

 .highlighted-text::after {
   content: 'Captured';
   position: absolute;
   top: -20px;
   right: 0;
   font-size: 10px;
   font-weight: 600;
   background: var(--accent);
   color: #fff;
   padding: 2px 6px;
   border-radius: 4px;
   pointer-events: none;
   opacity: 0;
   transition: opacity .2s;
 }

 .highlighted-text:hover::after {
   opacity: 1;
 }

 /* Dashboard Widgets & Activity Feed */
 .dashboard-widgets {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 24px;
 }

 .dash-widget {
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   flex-direction: column;
 }

 .widget-header {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-mid);
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .widget-body {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 8px;
 }

 .stat-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   color: var(--text);
   padding: 4px 0;
 }

 .stat-label {
   color: var(--text-mid);
 }

 .stat-val {
   font-weight: 600;
 }

 .stat-row.warning .stat-val {
   color: var(--amber);
 }

 .status-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   padding: 6px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }

 .status-row:last-child {
   border-bottom: none;
 }

 .sr-left {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--text);
 }

 .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
 }

 .status-dot.running {
   background: var(--green);
   box-shadow: 0 0 8px var(--green-b);
 }

 .status-dot.waiting {
   background: var(--amber);
 }

 .status-badge {
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 4px;
 }

 .status-badge.running {
   background: var(--green-bg);
   color: var(--green);
   border: 1px solid var(--green-b);
 }

 .status-badge.waiting {
   background: rgba(245, 158, 11, 0.1);
   color: var(--amber);
   border: 1px solid rgba(245, 158, 11, 0.2);
 }

 .ai-widget {
   background: linear-gradient(135deg, rgba(79, 124, 255, 0.1), transparent);
   border-color: rgba(79, 124, 255, 0.3);
 }

 .ai-sparkle {
   color: #facc15;
 }

 .ai-insight-text {
   font-size: 13px;
   color: var(--text);
   line-height: 1.5;
   margin-bottom: 12px;
 }

 .ai-action-box {
   background: rgba(0, 0, 0, 0.2);
   padding: 12px;
   border-radius: 8px;
   border: 1px solid var(--border);
 }

 .ai-action-text {
   font-size: 12px;
   color: var(--text-mid);
   margin-bottom: 8px;
 }

 .ai-btn {
   background: var(--accent);
   color: #fff;
   border: none;
   padding: 6px 12px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   transition: background 0.2s;
 }

 .ai-btn:hover {
   background: var(--accent2);
 }

 .activity-feed {
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--border);
 }

 .feed-title {
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   margin-bottom: 16px;
 }

 .feed-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .feed-item {
   display: flex;
   gap: 12px;
   align-items: flex-start;
 }

 .feed-icon {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   flex-shrink: 0;
 }

 .feed-icon.orange {
   background: rgba(245, 158, 11, 0.15);
   color: var(--amber);
 }

 .feed-icon.green {
   background: var(--green-bg);
   color: var(--green);
 }

 .feed-icon.green svg,
 .feed-icon.blue svg {
   width: 14px;
   height: 14px;
 }

 .feed-icon.blue {
   background: rgba(79, 124, 255, 0.15);
   color: var(--accent);
 }

 .feed-content p {
   font-size: 13px;
   color: var(--text);
   margin-bottom: 4px;
 }

 .feed-time {
   font-size: 11px;
   color: var(--text-dim);
 }

 /* PB Styles */
 .pb-inner {
   max-width: 1100px;
   margin: 0 auto;
   color: var(--text);
   display: flex;
   flex-direction: column;
   position: relative;
   padding: 40px;
   box-sizing: border-box;
   height: 100%;
 }

 .pb-inner .sec-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 32px;
   padding-bottom: 24px;
   border-bottom: 1px solid var(--border);
 }

 .pb-inner .sec-header-left {
   max-width: 500px;
 }

 .pb-inner .sec-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   border-radius: 20px;
   background: var(--surface2);
   border: 1px solid var(--border);
   font-size: 13px;
   font-weight: 600;
   color: var(--text-mid);
   margin-bottom: 16px;
   letter-spacing: .5px;
 }

 .pb-inner .sec-eyebrow-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--accent2);
   box-shadow: 0 0 8px var(--accent2);
 }

 .pb-inner .sec-title {
   font-family: 'General Sans', sans-serif;
   font-size: 40px;
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -1px;
   margin-bottom: 12px;
   color: #fff;
 }

 .pb-inner .sec-title .grad {
   background: linear-gradient(to right, #fff, var(--text-dim));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .pb-inner .sec-sub {
   font-size: 15px;
   color: var(--text-mid);
   line-height: 1.5;
 }

 .pb-inner .btn-primary {
   padding: 10px 18px;
   border-radius: 10px;
   font-size: 13px;
   font-weight: 600;
   background: #fff;
   color: #000;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: all .2s;
 }

 .pb-inner .btn-primary:hover {
   opacity: .9;
   transform: translateY(-1px);
 }

 .board-area {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   min-height: 500px;
   overflow-x: auto;
   padding-bottom: 20px;
 }

 .stage {
   background: var(--surface2);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .stage-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
 }

 .stage-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 2px;
 }

 .stage-count {
   font-size: 12px;
   color: var(--text-dim);
 }

 .stage-add {
   width: 28px;
   height: 28px;
   border-radius: 8px;
   border: 1px dashed var(--border);
   background: transparent;
   color: var(--text-mid);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all .2s;
 }

 .stage-add:hover {
   background: var(--surface3);
   color: #fff;
   border-style: solid;
 }

 .task-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 14px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
   cursor: grab;
   transition: transform .2s, border-color .2s;
 }

 .task-card:hover {
   border-color: rgba(255, 255, 255, .2);
   transform: translateY(-3px);
 }

 .client-tag {
   font-size: 11px;
   font-weight: 600;
   padding: 3px 8px;
   border-radius: 4px;
   background: var(--surface3);
   color: var(--text-mid);
 }

 .card-menu-wrap {
   position: relative;
 }

 .card-menu-btn {
   background: none;
   border: none;
   color: var(--text-dim);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
   line-height: 0;
   transition: color .2s;
 }

 .card-menu-btn:hover {
   color: #fff;
   background: var(--surface3);
 }

 .card-menu-btn svg {
   width: 14px;
   height: 14px;
 }

 .card-dd {
   position: absolute;
   top: 100%;
   right: 0;
   margin-top: 4px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 6px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
   min-width: 140px;
   z-index: 10;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-5px);
   transition: all .2s;
 }

 .card-dd.show {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0);
 }

 .dd-item {
   padding: 8px 10px;
   font-size: 13px;
   color: var(--text);
   border-radius: 6px;
   cursor: pointer;
   transition: background .2s;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .dd-item:hover {
   background: var(--surface3);
 }

 .card-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   margin-bottom: 12px;
   line-height: 1.4;
 }

 .card-meta {
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .stat {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--text-mid);
   padding: 6px 10px;
   border-radius: 6px;
   background: var(--surface2);
 }

 .stat svg {
   width: 14px;
   height: 14px;
 }

 .stat.warning {
   background: rgba(210, 153, 34, .1);
   color: var(--amber);
 }

 .stat.success {
   background: rgba(63, 185, 80, .1);
   color: var(--green);
 }

 .config-panel {
   position: fixed;
   top: 0;
   right: 0;
   height: 100%;
   width: 400px;
   max-width: 100%;
   background: #fff;
   border-left: 1px solid rgba(0, 0, 0, 0.10);
   box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   z-index: 20;
   transform: translateX(100%);
   transition: transform .4s var(--ease);
   visibility: hidden;
 }

 .config-panel.open {
   transform: translateX(0);
   visibility: visible;
 }

 .cp-header {
   padding: 20px 24px;
   border-bottom: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .cp-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
 }

 .cp-close {
   background: var(--surface2);
   border: 1px solid var(--border);
   width: 28px;
   height: 28px;
   border-radius: 6px;
   color: var(--text-mid);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: all .2s;
 }

 .cp-close:hover {
   background: var(--surface3);
   color: #fff;
 }

 .cp-body {
   padding: 24px;
   overflow-y: auto;
   flex-grow: 1;
 }

 .cp-group {
   margin-bottom: 20px;
 }

 .cp-label {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-dim);
   margin-bottom: 8px;
   text-transform: uppercase;
   letter-spacing: .5px;
 }

 .cp-input,
 .cp-select {
   width: 100%;
   padding: 12px;
   border-radius: 8px;
   background: var(--surface2);
   border: 1px solid var(--border);
   color: var(--text);
   font-size: 13px;
   font-family: inherit;
   transition: border-color .2s;
 }

 .cp-input:focus {
   outline: none;
   border-color: var(--accent);
 }

 .cp-select {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
 }

 .cp-select svg {
   width: 14px;
   height: 14px;
   color: var(--text-dim);
 }

 .cp-template {
   background: rgba(79, 110, 247, 0.04);
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 16px;
   font-size: 13px;
   color: var(--text-mid);
   line-height: 1.5;
 }

 .cp-template strong {
   color: var(--accent);
 }

 .cp-toggle {
   display: flex;
   align-items: center;
   cursor: pointer;
 }

 .cp-toggle input {
   display: none;
 }

 .toggle-bg {
   width: 36px;
   height: 20px;
   background: var(--surface3);
   border-radius: 10px;
   position: relative;
   transition: background .2s;
 }

 .toggle-knob {
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 50%;
   position: absolute;
   top: 2px;
   left: 2px;
   transition: transform .2s;
 }

 .cp-toggle input:checked+.toggle-bg {
   background: var(--green);
 }

 .cp-toggle input:checked+.toggle-bg .toggle-knob {
   transform: translateX(16px);
 }

 .cp-footer {
   padding: 20px 24px;
   border-top: 1px solid var(--border);
   background: var(--surface2);
 }

 /* Sequence Monitor */
 .product-demo {
   padding: 0;
 }



 .seq-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 28px;
   border-bottom: 1px solid var(--border);
 }

 .seq-header-left h3 {
   font-size: 18px;
   font-weight: 700;
   color: var(--text);
 }

 .seq-header-left p {
   font-size: 13px;
   color: var(--text-mid);
 }

 .seq-header-actions {
   display: flex;
   gap: 16px;
 }

 .seq-action {
   font-size: 13px;
   font-weight: 500;
   color: var(--text-mid);
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 6px 10px;
   border-radius: 8px;
   transition: all .2s;
 }

 .seq-action:hover {
   background: var(--surface2);
 }

 .seq-action.danger {
   color: var(--danger);
 }

 .seq-progress {
   padding: 16px 28px;
   border-bottom: 1px solid var(--border);
 }

 .seq-progress-header {
   display: flex;
   justify-content: space-between;
   margin-bottom: 8px;
 }

 .seq-progress-header span {
   font-size: 13px;
   color: var(--text-mid);
   font-weight: 500;
 }

 .seq-progress-track {
   height: 8px;
   background: var(--bg2);
   border-radius: 8px;
   overflow: hidden;
 }

 .seq-progress-fill {
   height: 100%;
   background: var(--green);
   border-radius: 8px;
   transition: width .8s var(--ease);
 }

 .seq-steps {
   padding: 8px 0;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
 }

 .seq-step {
   display: flex;
   align-items: flex-start;
   padding: 0 28px;
   position: relative;
   width: 100%;
   box-sizing: border-box;
 }

 .seq-step-timeline {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-right: 16px;
   padding-top: 20px;
   min-width: 32px;
 }

 .seq-step-dot {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   border: 2px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--surface);
   flex-shrink: 0;
   transition: all .4s;
 }

 .seq-step-dot.sent {
   background: var(--green);
   border-color: var(--green);
 }

 .seq-step-dot.waiting {
   border-color: var(--amber);
 }

 .seq-step-dot svg,
 .seq-step-dot .material-icons {
   width: 14px;
   height: 14px;
   display: none;
   font-size: 14px;
   line-height: 1;
 }

 .seq-step-dot.sent svg,
 .seq-step-dot.sent .material-icons {
   display: block;
 }

 .seq-step-dot.waiting .material-icons {
   display: block;
   color: var(--amber);
 }

 .seq-step-line {
   width: 2px;
   flex: 1;
   min-height: 20px;
   background: var(--border);
   transition: background .4s;
 }

 .seq-step-line.sent {
   background: var(--green);
 }

 .seq-step-gap {
   font-size: 11px;
   color: var(--text-dim);
   padding: 6px 0 6px 76px;
   display: flex;
   align-items: center;
   gap: 4px;
   width: 100%;
   box-sizing: border-box;
 }

 .seq-step-card {
   flex: 1;
   padding: 16px 20px;
   margin: 8px 0;
   border-radius: var(--radius);
   border: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all .3s;
   background: var(--surface);
   min-width: 0;
 }

 .seq-step-card.highlight {
   background: rgba(210, 153, 34, .04);
   border-color: rgba(210, 153, 34, .3);
 }

 .seq-step-card-left h4 {
   font-size: 15px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .seq-step-card-left .meta {
   font-size: 12px;
   color: var(--text-mid);
   margin-top: 4px;
 }

 .badge {
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 600;
 }

 .badge-sent {
   background: rgba(63, 185, 80, .15);
   color: var(--green);
 }

 .badge-waiting {
   background: rgba(210, 153, 34, .15);
   color: var(--amber);
 }

 .badge-pending {
   background: var(--bg2);
   color: var(--text-dim);
 }

 .send-btn {
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 600;
   background: var(--accent);
   border: 1px solid var(--accent);
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all .25s;
   color: #fff;
 }

 .send-btn .material-icons {
   color: #fff !important;
 }

 .send-btn:hover {
   background: var(--accent-strong);
   border-color: var(--accent-strong);
   transform: translateY(-1px);
 }

 .view-btn {
   font-size: 13px;
   font-weight: 500;
   color: var(--text-mid);
   display: flex;
   align-items: center;
   gap: 6px;
 }

 /* Modal */
 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   backdrop-filter: blur(4px);
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   pointer-events: none;
   transition: all .3s;
 }

 .modal-overlay.open {
   opacity: 1;
   pointer-events: all;
 }

 .modal {
   background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.10);
   border-radius: var(--radius-lg);
   width: 480px;
   max-width: 90vw;
   padding: 32px;
   box-shadow: var(--shadow-xl);
   transform: translateY(20px) scale(.97);
   transition: transform .3s;
 }

 .modal-overlay.open .modal {
   transform: translateY(0) scale(1);
 }

 .modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 28px;
   height: 28px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s;
   font-size: 18px;
   color: var(--text-mid);
 }

 .modal-close:hover {
   background: var(--surface2);
 }

 .modal h3 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 4px;
 }

 .modal .modal-sub {
   font-size: 14px;
   color: var(--text-mid);
   margin-bottom: 24px;
 }

 .modal label {
   display: block;
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 6px;
   color: var(--text-mid);
 }

 .modal input,
 .modal textarea {
   width: 100%;
   padding: 12px 14px;
   border-radius: 10px;
   font-size: 14px;
   border: 1.5px solid var(--border);
   background: var(--bg2);
   font-family: inherit;
   margin-bottom: 16px;
   transition: border-color .2s;
   color: var(--text);
 }

 .modal input:focus,
 .modal textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 3px rgba(79, 124, 255, .1);
 }

 .modal textarea {
   min-height: 120px;
   resize: none;
   line-height: 1.6;
 }

 .modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 8px;
 }

 .modal-cancel {
   padding: 10px 20px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   border: 1px solid var(--border);
   color: var(--text-mid);
   transition: all .2s;
 }

 .modal-cancel:hover {
   background: var(--surface2);
 }

 .modal-send {
   padding: 10px 24px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   background: var(--accent);
   color: #fff;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: all .25s;
 }

 .modal-send:hover {
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }

 .toast {
   position: fixed;
   bottom: 30px;
   right: 30px;
   background: #fff;
   color: var(--text);
   padding: 14px 22px;
   border-radius: var(--radius);
   font-size: 14px;
   font-weight: 500;
   z-index: 3000;
   display: flex;
   align-items: center;
   gap: 10px;
   opacity: 0;
   transform: translateY(20px);
   pointer-events: none;
   transition: all .4s var(--ease);
   border: 1px solid var(--border);
   box-shadow: var(--shadow-md);
 }

 .toast.show {
   opacity: 1;
   transform: translateY(0);
   pointer-events: all;
 }

 .toast svg {
   width: 18px;
   height: 18px;
   color: var(--green);
 }

 /* ===== 8. IMPACT ===== */
 .impact {
   padding: 120px 0;
   background: var(--bg);
 }

 .impact-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   max-width: 1200px;
   margin: 0 auto;
 }

 .impact-card {
   padding: 48px;
   border-radius: var(--radius-lg);
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .impact-number {
   font-family: var(--font-heading);
   font-size: clamp(40px, 4vw, 56px);
   font-weight: 600;
   line-height: 1;
   color: var(--accent);
   margin-bottom: 12px;
   letter-spacing: -0.04em;
 }

 .impact-label {
   font-size: 15px;
   font-weight: 500;
   margin-bottom: 8px;
   color: var(--text);
 }

 .impact-desc {
   font-size: 14px;
   color: var(--text-mid);
   line-height: 1.5;
 }

 /* ===== 9. DEMO ===== */


 /* ===== 12. EARLY ACCESS APPLICATION ===== */
 .conversion {
   padding: 120px 0;
   background: var(--bg);
   position: relative;
   text-align: center;
 }

 .conversion .section-tag {
   justify-content: center;
   text-align: center;
 }

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

 .conversion .section-subtitle {
   text-align: center;
   margin: 2px auto 0 auto;
   max-width: 800px;
 }

 .responsive-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start;
   max-width: 1100px;
   margin: 0 auto;
 }

 /* Benefits */
 .benefits-label {
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--text-dim);
   margin-bottom: 20px;
   text-align: left;
 }

 .pricing-feature {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   text-align: left;
 }

 .pricing-check {
   color: var(--green);
   font-size: 16px;
   font-weight: 700;
   flex-shrink: 0;
 }

 .pricing-feature-text {
   font-size: 15px;
   color: var(--text);
 }

 /* Testimonial card */
 .testimonial-card {
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 24px;
 }

 .testimonial-quote {
   font-size: 13px;
   color: var(--text-mid);
   margin-bottom: 14px;
   font-style: italic;
   line-height: 1.6;
   text-align: left;
 }

 .testimonial-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--surface);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   color: var(--text);
   flex-shrink: 0;
 }

 .testimonial-name {
   font-size: 14px;
   color: var(--text);
   font-weight: 500;
   margin: 0;
 }

 .testimonial-role {
   font-size: 12px;
   color: var(--text-dim);
   margin: 0;
 }

 /* Stats grid */
 .stats-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
 }

 .stat-card {
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 18px;
   text-align: center;
 }

 .stat-card-number {
   font-family: var(--font-heading);
   font-size: 32px;
   font-weight: 700;
   color: var(--text);
   letter-spacing: -0.04em;
 }

 .stat-card-label {
   font-size: 12px;
   color: var(--text-dim);
   margin-top: 4px;
 }

 /* Waitlist form */
 .waitlist-form {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 40px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .waitlist-form-title {
   font-family: var(--font-heading);
   font-size: 20px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 6px;
   text-align: center;
 }

 .waitlist-form-subtitle {
   font-size: 14px;
   margin-bottom: 28px;
   color: var(--text-mid);
   text-align: center;
 }

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

 .form-row {
   display: flex;
   gap: 12px;
 }

 .form-label {
   display: block;
   font-size: 13px;
   font-weight: 500;
   color: var(--text-mid);
   margin-bottom: 8px;
   text-align: left;
 }

 .form-input {
   width: 100%;
   padding: 12px 16px;
   border-radius: var(--radius);
   background: var(--surface);
   border: 1px solid var(--border);
   color: var(--text);
   font-size: 14px;
   font-family: inherit;
   transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
   outline: none;
 }

 .form-input::placeholder {
   color: var(--text-dim);
 }

 .form-input:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-glow);
 }

 .form-select,
 select.form-input {
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b4bcd0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 16px;
   padding-right: 40px;
   cursor: pointer;
   height: auto;
 }

 .form-select option,
 select.form-input option {
   background: var(--bg-darker);
   color: var(--text);
 }

 .zf-errorMessage {
   display: none;
   color: var(--danger);
   font-size: 12px;
   margin-top: 4px;
   text-align: left;
 }

 .form-submit {
   width: 100%;
   justify-content: center;
   padding: 14px 28px;
   font-size: 15px;
   font-weight: 600;
   margin-top: 8px;
   background: var(--accent);
   color: #fff;
   border: 1px solid var(--accent);
   border-radius: var(--radius);
   cursor: pointer;
   transition: all .25s var(--ease);
 }

 .form-submit:hover {
   background: var(--accent-strong);
   border-color: var(--accent-strong);
   transform: translateY(-1px);
   box-shadow: 0 4px 16px rgba(94, 106, 210, 0.3);
 }

 .form-note {
   font-size: 12px;
   color: var(--text-dim);
   text-align: center;
   margin-top: 16px;
 }

 /* ===== 14. FOOTER ===== */
 .footer {
   padding: 80px 0 40px;
   background: var(--bg-darker);
 }

 .footer-grid {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 40px;
 }

 .footer-brand {
   flex: 0 0 300px;
 }

 .footer-brand p {
   font-size: 14px;
   color: var(--text-dim);
   margin-top: 16px;
   line-height: 1.5;
   max-width: 240px;
 }

 .footer-col h4 {
   font-size: 13px;
   font-weight: 500;
   margin-bottom: 20px;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.1em;
 }

 .footer-col a {
   display: block;
   font-size: 14px;
   color: var(--text-dim);
   margin-bottom: 12px;
   transition: color .2s var(--ease);
 }

 .footer-col a:hover {
   color: var(--text);
 }

 .footer-bottom {
   display: flex;
   justify-content: space-between;
   padding-top: 40px;
   margin-top: 60px;
   border-top: 1px solid var(--border);
   font-size: 12px;
   color: var(--text-dim);
 }

 /* ===== 13. FAQ ===== */
 .faq {
   padding: 120px 0;
   background: var(--bg-darker);
 }

 .trust-proven {
   padding: 80px 0;
   background: var(--bg);
 }

 .visual-break {
   padding: 120px 0;
   text-align: center;
   background: var(--bg-darker);
 }

 .faq-header {
   margin-bottom: 60px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .faq-list {
   max-width: 900px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .faq-item {
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: all 0.3s var(--ease);
 }

 .faq-item:hover {
   border-color: var(--border-strong);
   background: var(--surface-hover);
 }

 .faq-item.active {
   border-color: var(--accent-base);
   background: var(--surface);
 }

 .faq-question {
   padding: 24px 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   box-sizing: border-box;
   cursor: pointer;
   font-weight: 600;
   color: var(--text);
   font-size: 16px;
   transition: color 0.3s;
 }

 .faq-text {
   flex: 1;
   margin-right: 12px;
   text-align: left;
 }

 .faq-item:hover .faq-question {
   color: var(--text);
 }

 .faq-icon {
   font-size: 22px;
   line-height: 1;
   color: var(--text-dim);
   flex-shrink: 0;
   margin-left: auto;
   transition: transform 0.4s var(--ease), color 0.3s;
 }

 .faq-item.active .faq-icon {
   transform: rotate(180deg);
   color: var(--accent);
 }

 .faq-answer {
   max-height: 0;
   opacity: 0;
   padding: 0 32px;
   visibility: hidden;
   transition: max-height 0.4s var(--ease), opacity 0.3s, padding 0.4s;
 }

 .faq-item.active .faq-answer {
   max-height: 400px;
   opacity: 1;
   padding: 0 32px 32px 32px;
   visibility: visible;
 }

 .faq-answer p {
   font-size: 15px;
   color: var(--text-mid);
   line-height: 1.6;
 }

 /* ===== ANIMATIONS ===== */
 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: .4;
   }
 }

 @keyframes nodeSlideIn {
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 @keyframes connectorGrow {
   to {
     height: 100%;
   }
 }

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }




   /* ============================================================== 

   DASHBOARD PORT PREVIEW
   ============================================================== */
 .browser-wrap {
   --d-bg: var(--bg2);
   --d-s1: var(--surface);
   --d-s2: rgba(255, 255, 255, 0.06);
   --d-t1: var(--text);
   --d-t2: var(--text-mid);
   --d-t3: var(--text-dim);
   --d-b1: var(--border);
   --d-b2: var(--border-strong);
   --d-v: var(--accent);
   --d-v-bg: rgba(90, 130, 250, 0.1);
   --d-g: var(--green);
   --d-g-bg: var(--green-bg);
   --d-a: var(--amber);
   --d-a-bg: var(--amber-bg);
   --d-r: var(--red);
   --d-r-bg: var(--red-bg);
   --d-r1: 8px;
   --d-r2: 12px;
   --d-sh: 0 4px 16px rgba(0, 0, 0, 0.06);
 }

 /* Container - Browser mockup */
 .browser-wrap {
   position: relative;
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--border);
   background: var(--bg);
   height: auto;
 }

 .chrome-bar {
   height: 44px;
   background: var(--d-s1);
   border-bottom: 1px solid var(--d-b1);
   display: flex;
   align-items: center;
   padding: 0 16px;
   gap: 16px;
   width: 100%;
 }

 .c-dots {
   display: flex;
   gap: 6px;
 }

 .cd {
   width: 10px;
   height: 10px;
   border-radius: 50%;
 }

 .cd.r {
   background: #ff5f56;
 }

 .cd.a {
   background: #ffbd2e;
 }

 .cd.g {
   background: #27c93f;
 }

 .c-url {
   flex: 1;
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: 6px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: var(--d-t2);
   gap: 8px;
   position: relative;
   max-width: 600px;
   margin: 0 auto;
 }

 .c-url svg {
   height: 12px;
   width: 12px;
   color: var(--d-t3);
 }

 .c-url-actions {
   position: absolute;
   right: 8px;
   display: flex;
   gap: 8px;
   color: var(--d-t3);
 }

 /* App Layout */
 .app {
   display: flex;
   flex: 1;
   overflow: hidden;
   background: var(--d-bg);
   text-align: left;
 }

 /* SIDEBAR */
 .sidebar {
   width: 240px;
   background: var(--d-s1);
   border-right: 1px solid var(--d-b1);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
 }

 .sb-top {
   height: 60px;
   display: flex;
   align-items: center;
   padding: 0 20px;
   border-bottom: 1px solid var(--d-b1);
 }

 .sb-brand {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .sb-logo {
   width: 28px;
   height: 28px;
   background: var(--d-v);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text);
   font-weight: 700;
   font-family: 'Syne', sans-serif;
   font-size: 14px;
 }

 .sb-brand-name {
   font-family: 'Syne', sans-serif;
   font-weight: 700;
   font-size: 16px;
   color: var(--d-t1);
 }

 .sb-nav {
   padding: 16px 12px;
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 4px;
   overflow-y: auto;
 }

 .sb-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
   border-radius: var(--d-r1);
   font-size: 14px;
   color: var(--d-t2);
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
 }

 .sb-item:hover {
   background: var(--d-s2);
   color: var(--d-t1);
 }

 .sb-item.active {
   background: var(--d-v-bg);
   color: var(--d-v);
 }

 .sb-item svg {
   width: 16px;
   height: 16px;
   opacity: 0.8;
 }

 .sb-section {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--d-t3);
   font-weight: 600;
   padding: 12px 12px 4px;
 }

 .sb-divider {
   height: 1px;
   background: var(--d-b1);
   margin: 8px 12px;
 }

 .sb-bottom {
   padding: 12px;
   border-top: 1px solid var(--d-b1);
 }

 /* MAIN COL */
 .main-col {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--d-bg);
 }


 /* TOPBAR */
 .topbar {
   height: 60px;
   border-bottom: 1px solid var(--d-b1);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
   background: var(--d-bg);
   flex-shrink: 0;
 }

 .tb-srch {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: var(--d-t3);
   background: var(--d-s1);
   padding: 8px 16px;
   border-radius: var(--d-r1);
   width: 300px;
   border: 1px solid var(--d-b1);
 }

 .tb-srch svg {
   width: 14px;
   height: 14px;
 }

 .tb-r {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .tb-bell {
   position: relative;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   border: 1px solid var(--d-b1);
   color: var(--d-t2);
 }

 .tb-bell svg {
   width: 16px;
   height: 16px;
 }

 .tb-bell-dot {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 6px;
   height: 6px;
   background: var(--d-r);
   border-radius: 50%;
   box-shadow: 0 0 0 2px var(--d-bg);
 }

 .tb-av {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--d-v);
   color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   font-size: 14px;
 }

 .tb-name {
   font-size: 14px;
   font-weight: 500;
   color: var(--d-t1);
 }

 /* CONTENT */
 .content {
   flex: 1;
   overflow-y: auto;
   padding: 24px 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
   position: relative;
   min-width: 0;
   overflow-x: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }

 .content::-webkit-scrollbar {
   display: none;
 }

 /* Welcome Row */
 .welcome-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
 }

 .wl h1 {
   font-family: 'Syne', sans-serif;
   font-size: 24px;
   font-weight: 700;
   color: var(--d-t1);
   margin-bottom: 8px;
 }

 .wl h1 span {
   color: var(--d-v);
 }

 .wl p {
   font-size: 14px;
   color: var(--d-t2);
   margin-top: 0;
 }

 .ai-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--d-v-bg);
   color: var(--d-v);
   padding: 8px 16px;
   border-radius: 100px;
   font-size: 13px;
   font-weight: 600;
   border: 1px solid rgba(99, 102, 241, 0.2);
 }

 .ai-pill svg {
   width: 14px;
   height: 14px;
 }

 .ai-pill-dot {
   width: 6px;
   height: 6px;
   background: var(--d-v);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--d-v);
   animation: dash-pulse 2s infinite;
 }

 @keyframes dash-pulse {
   0% {
     opacity: 1;
     box-shadow: 0 0 8px var(--d-v);
   }

   50% {
     opacity: 0.4;
     box-shadow: none;
   }

   100% {
     opacity: 1;
     box-shadow: 0 0 8px var(--d-v);
   }
 }

 /* Impact Bar */
 .impact-bar {
   background: var(--d-s1);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r2);
   display: flex;
 }

 .ib-header {
   width: 200px;
   padding: 20px;
   border-right: 1px solid var(--d-b1);
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
 }

 .ib-icon {
   width: 32px;
   height: 32px;
   background: var(--d-v);
   color: var(--text);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
 }

 .ib-t {
   font-weight: 600;
   font-size: 14px;
   color: var(--d-t1);
   margin-bottom: 4px;
 }

 .ib-s {
   font-size: 12px;
   color: var(--d-t3);
 }

 .ib-stats {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
 }

 .ib-stat {
   padding: 20px;
   border-right: 1px solid var(--d-b1);
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .ib-stat:last-child {
   border-right: none;
 }

 .ib-stat-ico {
   width: 36px;
   height: 36px;
   background: var(--d-bg);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   border: 1px solid var(--d-b1);
   box-shadow: var(--d-sh);
 }

 .ib-val {
   font-size: 20px;
   font-weight: 700;
   color: var(--d-t1);
   margin-bottom: 4px;
   font-family: 'Syne', sans-serif;
 }

 .ib-val.v {
   color: var(--d-v);
 }

 .ib-val.g {
   color: var(--d-g);
 }

 .ib-val.c {
   color: var(--d-t1);
 }

 .ib-val.a {
   color: var(--d-a);
 }

 .ib-lbl {
   font-size: 12px;
   color: var(--d-t2);
   font-weight: 500;
 }

 /* Main Grid */
 .mgrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   align-items: start;
   min-width: 0;
   width: 100%;
 }

 .lpanel,
 .rpanel {
   display: flex;
   flex-direction: column;
   gap: 24px;
   min-width: 0;
 }

 /* Card Common */
 .panel-hdr {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }

 .ph-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--d-t1);
   margin-left: 6px;
 }

 .ph-act {
   font-size: 13px;
   color: var(--d-v);
   font-weight: 500;
   cursor: pointer;
 }

 .ph-act:hover {
   text-decoration: underline;
 }

 .ph-l {
   display: flex;
   align-items: center;
 }

 .ph-badge-g {
   background: var(--d-g-bg);
   color: var(--d-g);
   font-size: 11px;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: 100px;
   margin-left: 12px;
   text-transform: uppercase;
 }

 .ph-badge-v {
   background: var(--d-v-bg);
   color: var(--d-v);
   font-size: 12px;
   font-weight: 600;
   padding: 2px 8px;
   border-radius: 4px;
   margin-left: 12px;
 }

 /* Quick Actions */
 .qa-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 12px;
 }

 .qa-card {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   padding: 16px;
   box-shadow: var(--d-sh);
   cursor: pointer;
   transition: all 0.2s;
   position: relative;
   overflow: hidden;
 }

 .qa-card:hover {
   transform: translateY(-2px);
   border-color: var(--d-b2);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .qa-card.feat {
   background: var(--d-v);
   color: var(--text);
   border: none;
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
 }

 .qa-card.feat:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
 }

 .qa-ic {
   margin-bottom: 12px;
   font-size: 18px;
 }

 .qa-t {
   font-size: 14px;
   font-weight: 600;
   color: var(--d-t1);
   margin-bottom: 6px;
 }

 .feat .qa-t {
   color: var(--text);
 }

 .qa-s {
   font-size: 12px;
   color: var(--d-t3);
   line-height: 1.4;
 }

 .feat .qa-s {
   color: rgba(255, 255, 255, 0.8);
 }

 .qa-cta {
   margin-top: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
   display: inline-block;
 }

 /* Sequence Monitor Mini */
 .seq-mini {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r2);
   padding: 20px;
   box-shadow: var(--d-sh);
 }

 .sp-wrap {
   background: var(--d-s1);
   padding: 16px;
   border-radius: var(--d-r1);
   margin-bottom: 24px;
   border: 1px solid var(--d-b1);
 }

 .sp-row {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
   color: var(--d-t2);
   margin-bottom: 8px;
   font-weight: 500;
 }

 .sp-row strong {
   color: var(--d-t1);
 }

 .sp-track {
   height: 6px;
   background: var(--d-b1);
   border-radius: 3px;
   overflow: hidden;
 }

 .sp-fill {
   height: 100%;
   background: var(--d-g);
   border-radius: 3px;
   transition: width 0.5s ease;
 }

 .seq-steps {
   display: flex;
   flex-direction: column;
 }

 .ssp {
   display: flex;
 }

 .ssp-l {
   width: 30px;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   flex-shrink: 0;
 }

 .ssp-ico {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--d-bg);
   border: 2px solid var(--d-b2);
   color: var(--d-t3);
   z-index: 2;
 }

 .ssp-ico.done {
   background: var(--d-g);
   border-color: var(--d-g);
   color: var(--text);
 }

 .ssp-ico.wait {
   background: var(--d-bg);
   border-color: var(--d-v);
   color: var(--d-v);
 }

 .ssp-ico.pend {
   background: var(--d-s1);
   border-color: var(--d-b1);
   color: var(--d-t3);
 }

 .ssp-line {
   width: 2px;
   flex: 1;
   background: var(--d-b1);
   margin: 4px 0;
 }

 .ssp-line.done-l {
   background: var(--d-g);
 }

 .ssp-gap {
   display: flex;
   justify-content: center;
   padding: 4px 0;
 }

 .ssp-gap-pill {
   background: var(--d-s1);
   font-size: 10px;
   font-weight: 600;
   color: var(--d-t3);
   padding: 2px 6px;
   border-radius: 100px;
   border: 1px solid var(--d-b1);
 }

 .ssp-r {
   flex: 1;
   padding-bottom: 16px;
   padding-left: 12px;
 }

 .ssp-cw {
   position: relative;
 }

 .ssp-card {
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   padding: 12px 16px;
   background: var(--d-bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .ssp-card.wait-c {
   border-color: var(--d-v);
   background: var(--d-v-bg);
   box-shadow: 0 0 0 1px inset var(--d-v);
 }

 .ssp-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--d-t1);
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
 }

 .ssp-sub {
   font-size: 12px;
   color: var(--d-t3);
 }

 .ssp-badge {
   font-size: 10px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .sent-s {
   background: var(--d-g-bg);
   color: var(--d-g);
 }

 .wait-s {
   background: var(--d-bg);
   color: var(--d-v);
   border: 1px solid rgba(99, 102, 241, 0.2);
 }

 .pend-s {
   background: var(--d-s1);
   color: var(--d-t3);
 }

 .ssp-view {
   background: transparent;
   border: 1px solid var(--d-b1);
   color: var(--d-t2);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
 }

 .ssp-view:hover {
   background: var(--d-s1);
   color: var(--d-t1);
 }

 .ssp-send {
   background: var(--d-v);
   border: none;
   color: var(--text);
   font-size: 12px;
   font-weight: 600;
   padding: 6px 12px;
   border-radius: 4px;
   cursor: pointer;
   transition: all var(--ease);
   box-shadow: 0 2px 4px rgba(99, 102, 241, 0.1);
 }

 .ssp-send:hover {
   opacity: 0.8;
   box-shadow: 0 4px 8px rgba(99, 102, 241, 0.4);
 }

 /* KB Panel */
 .kb-panel {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r2);
   padding: 20px;
   box-shadow: var(--d-sh);
 }

 .kb-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }

 .kb-card {
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   padding: 16px;
   background: var(--d-bg);
   display: flex;
   flex-direction: column;
   gap: 12px;
   cursor: pointer;
   transition: all 0.2s;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
 }

 .kb-card:hover {
   border-color: var(--d-b2);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .kbc-hdr {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .kbc-type {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .kbc-ic {
   width: 24px;
   height: 24px;
   background: var(--d-s2);
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--d-t2);
 }

 .kbc-ic svg {
   width: 14px;
   height: 14px;
 }

 .kbc-name {
   font-size: 14px;
   font-weight: 600;
   color: var(--d-t1);
 }

 .kbc-vfy {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 700;
   color: var(--d-g);
   background: var(--d-g-bg);
   padding: 2px 6px;
   border-radius: 4px;
   text-transform: uppercase;
 }

 .kbc-vfy svg {
   width: 10px;
   height: 10px;
 }

 .kbc-body {
   font-size: 13px;
   color: var(--d-t2);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .kbc-src {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
   font-weight: 500;
   color: var(--d-t3);
   margin-top: auto;
   padding-top: 12px;
   border-top: 1px solid var(--d-b1);
 }

 .kbc-src-l {
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .kbc-src-l svg {
   width: 12px;
   height: 12px;
 }

 .kbc-arr {
   font-size: 16px;
   line-height: 1;
 }

 .kb-card:hover .kbc-arr {
   color: var(--d-v);
 }

 /* Kanban Strip */
 .kb-board {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r2);
   padding: 20px;
   box-shadow: var(--d-sh);
   overflow: hidden;
   min-width: 0;
   width: 100%;
 }

 .kanban-strip {
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 8px;
   width: 100%;
 }

 .kn-col {
   width: 260px;
   flex-shrink: 0;
   background: var(--d-s1);
   border-radius: var(--d-r1);
   padding: 12px;
   border: 1px solid var(--d-b1);
   display: flex;
   flex-direction: column;
   gap: 12px;
 }

 .kn-hdr {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 4px;
 }

 .kn-title {
   font-size: 13px;
   font-weight: 600;
   color: var(--d-t1);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .kn-count {
   font-size: 12px;
   font-weight: 600;
   background: var(--d-b2);
   color: var(--d-t1);
   padding: 2px 6px;
   border-radius: 100px;
 }

 .kn-empty {
   font-size: 13px;
   color: var(--d-t3);
   text-align: center;
   padding: 20px;
   background: rgba(0, 0, 0, 0.02);
   border: 1px dashed var(--d-b2);
   border-radius: var(--d-r1);
 }



 .tc {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   padding: 12px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   gap: 10px;
   cursor: grab;
   transition: border-color 0.2s;
   position: relative;
 }

 .tc:hover {
   border-color: var(--d-v);
 }

 .tc:hover .tc-hint {
   opacity: 1;
 }

 .tc-hint {
   position: absolute;
   top: -20px;
   right: 0;
   background: var(--d-t1);
   color: var(--d-bg);
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 4px;
   opacity: 0;
   transition: opacity 0.2s;
   pointer-events: none;
   white-space: nowrap;
 }

 .tc-hint::after {
   content: "";
   position: absolute;
   bottom: -4px;
   right: 8px;
   border-width: 4px 4px 0;
   border-style: solid;
   border-color: var(--d-t1) transparent transparent transparent;
 }

 .tc-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
 }

 .tc-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--d-t1);
   line-height: 1.4;
   padding-right: 8px;
 }

 .tc-dots {
   background: transparent;
   border: none;
   color: var(--d-t3);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
   display: flex;
   transition: all 0.2s;
 }

 .tc-dots:hover {
   background: var(--d-s2);
   color: var(--d-t1);
 }

 .tc-dots svg {
   width: 14px;
   height: 14px;
 }

 .tc-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
 }

 .tc-tag {
   font-size: 11px;
   font-weight: 600;
   padding: 2px 6px;
   border-radius: 4px;
   line-height: 1;
 }

 .tag-v {
   background: var(--d-v-bg);
   color: var(--d-v);
 }

 .tag-b {
   background: var(--d-s2);
   color: var(--d-t2);
 }

 .tag-c {
   background: rgba(2, 132, 199, 0.2);
   color: #38bdf8;
 }

 .tag-g {
   background: var(--d-g-bg);
   color: var(--d-g);
 }

 .tc-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--d-b1);
   padding-top: 10px;
 }

 .tc-date {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: var(--d-t3);
   font-weight: 500;
 }

 .tc-date svg {
   width: 12px;
   height: 12px;
 }

 .tc-avs {
   display: flex;
 }

 .tc-av {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--d-v);
   color: var(--text);
   font-size: 9px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid var(--d-bg);
 }

 .tc-av.g {
   background: var(--d-g);
 }

 /* Dropdowns & Modals */
 .dd {
   position: absolute;
   top: 100%;
   right: 0;
   width: 180px;
   background: var(--d-bg);
   border: 1px solid var(--d-b2);
   border-radius: var(--d-r1);
   box-shadow: var(--d-sh);
   padding: 4px;
   display: none;
   z-index: 100;
   margin-top: 4px;
 }

 .dd.show {
   display: block;
   animation: dashFadeUp 0.15s ease;
 }

 @keyframes dashFadeUp {
   from {
     opacity: 0;
     transform: translateY(4px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .dd-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   font-size: 13px;
   font-weight: 500;
   color: var(--d-t2);
   cursor: pointer;
   border-radius: 4px;
   transition: background 0.1s;
 }

 .dd-item:hover {
   background: var(--d-s1);
   color: var(--d-t1);
 }

 .dd-item.danger {
   color: var(--d-r);
 }

 .dd-item.danger:hover {
   background: var(--d-r-bg);
   color: var(--d-r);
 }

 .dd-item svg {
   width: 14px;
   height: 14px;
 }

 .dd-sep {
   height: 1px;
   background: var(--d-b1);
   margin: 4px;
 }

 /* Dashboard Modals Layer */
 .dash-modal-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 /* Dashboard Modal */
 .d-modal-ov {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .d-modal-ov.show {
   opacity: 1;
   pointer-events: auto;
 }

 .d-modal {
   background: var(--d-bg);
   border-radius: var(--d-r2);
   width: 100%;
   max-width: 440px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
   border: 1px solid var(--d-b2);
   transform: translateY(20px);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   text-align: left;
 }

 .d-modal-ov.show .d-modal {
   transform: translateY(0);
 }

 .dm-hdr {
   padding: 16px 20px;
   border-bottom: 1px solid var(--d-b1);
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--d-s1);
 }

 .dm-hdr-l {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .dm-hdr-ic {
   width: 32px;
   height: 32px;
   background: var(--d-v-bg);
   color: var(--d-v);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .dm-hdr-ic.ai {
   background: var(--d-bg);
   border: 1px solid rgba(99, 102, 241, 0.2);
 }

 .dm-t {
   font-size: 15px;
   font-weight: 600;
   color: var(--d-t1);
 }

 .dm-st {
   font-size: 12px;
   color: var(--d-t3);
 }

 .dm-x {
   background: transparent;
   border: none;
   color: var(--d-t3);
   cursor: pointer;
   padding: 4px;
   border-radius: 4px;
 }

 .dm-x:hover {
   background: var(--d-b1);
   color: var(--d-t1);
 }

 .dm-x svg {
   width: 16px;
   height: 16px;
 }

 /* Send Modal Specifics */
 .dm-body {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 16px;
 }

 .dm-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--d-t2);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 6px;
   display: block;
 }

 .dm-sel {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--d-b2);
   border-radius: var(--d-r1);
   font-family: inherit;
   font-size: 14px;
   color: var(--d-t1);
   background: var(--d-bg);
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
 }

 .dm-sel svg {
   width: 16px;
   height: 16px;
   color: var(--d-t3);
 }

 .dm-email {
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   overflow: hidden;
 }

 .dm-e-top {
   padding: 10px 12px;
   border-bottom: 1px solid var(--d-b1);
   background: var(--d-s1);
   font-size: 13px;
   color: var(--d-t2);
   display: flex;
   gap: 8px;
 }

 .dm-e-top span {
   color: var(--d-t1);
   font-weight: 500;
 }

 .dm-e-b {
   padding: 12px;
   font-size: 13px;
   color: var(--d-t1);
   line-height: 1.5;
   height: 120px;
   outline: none;
   background: var(--d-bg);
   border: none;
   width: 100%;
   resize: none;
   font-family: 'DM Sans', sans-serif;
 }

 .dm-e-b:focus {
   background: var(--d-s1);
 }

 .dm-ai-gen {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
   background: var(--d-v-bg);
   border-radius: var(--d-r1);
   border: 1px solid rgba(99, 102, 241, 0.2);
 }

 .dm-ai-l {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 500;
   color: var(--d-v);
 }

 .dm-ai-btn {
   background: var(--text);
   border: 1px solid var(--d-b2);
   padding: 4px 10px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 600;
   color: var(--d-bg);
   cursor: pointer;
 }

 .dm-foot {
   padding: 16px 20px;
   border-top: 1px solid var(--d-b1);
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   background: var(--d-s1);
 }

 .btn-c {
   padding: 8px 16px;
   background: transparent;
   border: 1px solid var(--d-b2);
   color: var(--d-t2);
   font-size: 14px;
   font-weight: 600;
   border-radius: var(--d-r1);
   cursor: pointer;
   transition: 0.2s;
 }

 .btn-c:hover {
   background: var(--d-b1);
   color: var(--d-t1);
 }

 .btn-p {
   padding: 8px 16px;
   background: var(--d-v);
   border: 1px solid var(--d-v);
   color: var(--text);
   font-size: 14px;
   font-weight: 600;
   border-radius: var(--d-r1);
   cursor: pointer;
   transition: all var(--ease);
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .btn-p:hover {
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
   opacity: 0.8;
 }

 /* Task Modal Specifics */
 .dm-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }

 .dm-inp {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--d-b2);
   border-radius: var(--d-r1);
   font-family: inherit;
   font-size: 14px;
   color: var(--d-t1);
   background: var(--d-bg);
   outline: none;
 }

 .dm-inp:focus {
   border-color: var(--d-v);
   box-shadow: 0 0 0 2px var(--d-v-bg);
 }

 .dm-desc {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--d-b2);
   border-radius: var(--d-r1);
   font-family: inherit;
   font-size: 14px;
   color: var(--d-t1);
   background: var(--d-bg);
   resize: none;
   height: 80px;
   outline: none;
 }

 .dm-desc:focus {
   border-color: var(--d-v);
   box-shadow: 0 0 0 2px var(--d-v-bg);
 }

 /* Checkboxes */
 .dm-chk {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   cursor: pointer;
 }

 .dm-chk input {
   display: none;
 }

 .cb-sq {
   width: 18px;
   height: 18px;
   border: 1px solid var(--d-b2);
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--d-bg);
   color: transparent;
   transition: 0.2s;
   margin-top: 2px;
 }

 .cb-sq svg {
   width: 12px;
   height: 12px;
 }

 .dm-chk input:checked+.cb-sq {
   background: var(--d-v);
   border-color: var(--d-v);
   color: var(--text);
 }

 .dm-chk-t {
   display: flex;
   flex-direction: column;
 }

 .dm-chk-t strong {
   font-size: 14px;
   font-weight: 500;
   color: var(--d-t1);
 }

 .dm-chk-t span {
   font-size: 12px;
   color: var(--d-t3);
 }

 .ai-box {
   padding: 12px;
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   border-left: 3px solid var(--d-v);
   margin-top: 8px;
 }

 /* In-dashboard Drawer (Right side) */
 .dash-drawer-ov {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(2px);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
   display: flex;
   justify-content: flex-end;
 }

 .dash-drawer-ov.show {
   opacity: 1;
   pointer-events: auto;
 }

 .dash-drawer {
   width: 100%;
   max-width: 400px;
   height: 100%;
   background: var(--d-bg);
   border-left: 1px solid var(--d-b2);
   box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
   transform: translateX(100%);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   display: flex;
   flex-direction: column;
   text-align: left;
 }

 .dash-drawer-ov.show .dash-drawer {
   transform: translateX(0);
 }

 .ddr-hdr {
   padding: 16px 20px;
   border-bottom: 1px solid var(--d-b1);
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--d-s1);
 }

 .ddr-l {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .ddr-ic {
   width: 32px;
   height: 32px;
   background: var(--d-s2);
   color: var(--d-t2);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .ddr-ic.ai {
   background: var(--d-v-bg);
   color: var(--d-v);
 }

 .ddr-ic svg {
   width: 16px;
   height: 16px;
 }

 .ddr-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--d-t1);
 }

 .ddr-vfy {
   font-size: 12px;
   font-weight: 600;
   color: var(--d-g);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .ddr-vfy svg {
   width: 12px;
   height: 12px;
 }

 .ddr-body {
   padding: 24px 20px;
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 /* Drawer Block */
 .d-blk {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .d-blk-lbl {
   font-size: 12px;
   font-weight: 600;
   color: var(--d-t3);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .d-blk-val {
   font-size: 14px;
   color: var(--d-t1);
   line-height: 1.6;
   background: var(--d-s1);
   padding: 16px;
   border-radius: var(--d-r1);
   border: 1px solid var(--d-b1);
 }

 /* Drawer Src */
 .d-src {
   background: var(--d-bg);
   border: 1px solid var(--d-b1);
   border-radius: var(--d-r1);
   display: flex;
   flex-direction: column;
 }

 .d-src-h {
   padding: 12px 16px;
   border-bottom: 1px solid var(--d-b1);
   font-size: 13px;
   font-weight: 600;
   color: var(--d-t2);
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--d-s1);
 }

 .d-src-b {
   padding: 16px;
   font-family: monospace;
   font-size: 12px;
   color: var(--d-t2);
   line-height: 1.5;
   white-space: pre-wrap;
   background: var(--d-s1);
 }

 /* ===== 8.5. TESTIMONIALS ===== */
 .testimonials {
   padding: 80px 0 120px 0;
   background: var(--bg);
 }

 .testimonials-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   max-width: 1200px;
   margin: 0 auto;
 }

 .testimonial-card-clean {
   background: var(--surface-opaque);
   border: 1px solid var(--border);
   padding: 40px;
   border-radius: var(--radius-lg);
   transition: all .3s var(--ease);
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   justify-content: space-between;
   gap: 0;
 }

 .testimonial-card-clean:hover {
   border-color: var(--border-strong);
   transform: translateY(-3px);
   background: var(--surface-hover);
 }

 .t-mark {
   font-family: var(--font-heading);
   font-size: 72px;
   color: var(--accent);
   font-style: italic;
   line-height: 1;
   height: 40px;
   margin: 0 auto 24px auto;
   opacity: 0.8;
 }

 .t-quote {
   font-size: 16px;
   line-height: 1.6;
   color: var(--text-high);
   margin: 0;
   display: -webkit-box;
   line-clamp: 6;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .t-divider {
   height: 1px;
   background: var(--border);
   margin: 32px 0 24px 0;
   width: 100%;
 }

 .t-author {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   width: 100%;
 }

 .t-avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--surface);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 700;
   color: var(--accent);
   flex-shrink: 0;
 }

 .t-info {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .t-info strong {
   font-size: 15px;
   color: #000;
   font-weight: 600;
   margin-bottom: 2px;
 }

 .t-info span {
   font-size: 13px;
   color: var(--text-dim);
   margin-bottom: 8px;
 }

 .t-result {
   font-size: 13px;
   color: var(--green);
   font-weight: 500;
   display: inline-block;
   padding: 4px 10px;
   background: rgba(39, 201, 63, 0.1);
   border: 1px solid rgba(39, 201, 63, 0.2);
   border-radius: 4px;
 }

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

 /* ---------- TABLET LANDSCAPE (max-width:1100px) ---------- */
 @media (max-width:1100px) {

   /* Global */
   .container {
     padding: 0 28px;
   }

   .problem,
   .category-shift,
   .architecture,
   .interactive-workflow,
   .impact,
   .faq,
   .conversion {
     padding: 80px 0;
   }

   .problem-header,
   .shift-header,
   .arch-header,
   .workflow-header,
   .impact-header,
   .faq-header {
     margin-bottom: 0px;
   }

   /* Hero */
   .hero .container {
     gap: 40px;
   }

   .hero {
     padding: 100px 0 60px;
   }

   /* Grids → 2 columns */
   .problem-grid,
   .shift-pillars,
   .impact-grid,
   .blog-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 1px;
   }

   .shift-pillars {
     gap: 16px;
   }

   .impact-grid {
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     max-width: 100%;
   }

   .stats-grid-row {
     grid-template-columns: repeat(2, 1fr);
   }

   /* Testimonials */
   .testimonials-grid {
     grid-template-columns: repeat(2, 1fr);
     max-width: 800px;
   }

   .arch-map {
     gap: 16px;
   }

   .arch-node {
     width: calc(50% - 12px);
     min-width: 200px;
   }

   /* Demo */


   .demo-text h3 {
     font-size: 26px;
   }

   /* Interactive Workflow */
   .workflow-split {
     grid-template-columns: 1fr !important;
     min-height: auto;
   }

   .workflow-nav {
     border-right: none;
     border-bottom: 1px solid var(--border);
     flex-direction: row;
     padding: 0;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }

   .workflow-nav::-webkit-scrollbar {
     display: none;
   }

   .nav-group-label {
     display: none;
   }

   .workflow-nav-item {
     flex-shrink: 0;
     padding: 16px 20px;
     border-left: none;
     border-bottom: 3px solid transparent;
     white-space: nowrap;
     min-width: max-content;
   }

   .workflow-nav-item.active {
     border-left-color: transparent;
     border-bottom-color: var(--accent);
   }

   .wn-number {
     display: none;
   }

   .wn-desc {
     display: none;
   }

   .wn-arrow {
     display: none;
   }

   .wn-title {
     font-size: 14px;
   }

   /* KB inner */
   .kb-inner {
     padding: 24px;
   }

   .cards-grid {
     grid-template-columns: 1fr;
   }

   /* PB inner */
   .pb-inner {
     padding: 24px;
   }

   .board-area {
     grid-template-columns: repeat(3, minmax(220px, 1fr));
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     gap: 40px;
   }

   /* Footer */
   .footer-grid {
     flex-wrap: wrap;
     gap: 32px;
   }

   .footer-brand {
     flex: 0 0 100%;
   }

   /* University / Blog */
   .uni-grid {
     grid-template-columns: repeat(2, 1fr);
   }

   /* Browser wrap */
   .browser-wrap {
     width: 100%;
     left: 0;
     margin-left: 0;
     height: auto;
     border-radius: 10px;
   }
 }

 /* ---------- TABLET PORTRAIT (max-width:900px) ---------- */
 @media (max-width:900px) {

   /* Navigation */
   .nav-links {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 64px;
     left: 0;
     width: 100vw;
     height: calc(100vh - 64px);
     background: var(--bg);
     padding: 40px 24px;
     border-top: 1px solid var(--border);
     z-index: 1001;
     align-items: flex-start;
     gap: 0;
     overflow-y: auto;
   }

   .nav-links a {
     padding: 16px 0;
     font-size: 18px;
     width: 100%;
     border-bottom: 1px solid var(--border);
   }

   .nav-links .nav-cta {
     margin-top: 16px;
     padding: 14px 24px;
     font-size: 16px;
     text-align: center;
     justify-content: center;
     width: 100%;
     border-bottom: none;
   }

   .nav-links.open {
     display: flex;
     visibility: visible;
     opacity: 1;
   }

   .nav-toggle {
     display: flex !important;
     visibility: visible !important;
     opacity: 1 !important;
   }

   /* Hamburger active animation */
   .nav-toggle.active span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);
   }

   .nav-toggle.active span:nth-child(2) {
     opacity: 0;
     transform: translateX(-10px);
   }

   .nav-toggle.active span:nth-child(3) {
     transform: translateY(-7px) rotate(-45deg);
   }

   /* Hero */
   .hero {
     padding: 90px 0 48px;
     min-height: auto;
   }

   .hero-title {
     font-size: clamp(28px, 8vw, 40px);
   }

   .hero-sub {
     font-size: 15px;
   }

   .hero-badge {
     font-size: 12px;
     padding: 5px 12px;
   }

   .hero-actions {
     flex-direction: column;
     width: 100%;
   }

   .hero-actions a {
     width: 100%;
     justify-content: center;
     text-align: center;
   }

   .hero-visual-card {
     padding: 20px;
   }

   .hero-content {
     margin-bottom: 32px;
   }

   /* Authority Strip */
   .authority-logos {
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
   }

   .logo-box {
     height: 64px;
     padding: 10px 16px;
   }

   .logo-box img {
     max-height: 28px;
   }

   /* Testimonials */
   .testimonials-grid {
     grid-template-columns: 1fr;
   }

   .testimonial-card-clean {
     padding: 32px;
   }

   /* Before vs After */
   .ba-row {
     grid-template-columns: 1fr;
     border-bottom: none;
     padding: 16px;
     border-top: 1px solid var(--border);
   }

   .ba-row.ba-header-row {
     display: none;
   }

   .ba-col {
     padding: 12px 16px;
     justify-content: space-between;
     border-right: none;
   }

   .ba-col::before {
     content: attr(data-label);
     font-weight: 600;
     color: var(--text-dim);
   }

   .ba-col:first-child {
     border-bottom: 1px solid var(--border);
     background: rgba(0, 0, 0, 0.02);
     font-size: 16px;
     margin: -16px -16px 12px;
     padding: 16px;
     border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   }

   /* Section globals */
   .section-title {
     font-size: clamp(24px, 6vw, 36px);
   }

   .demo-text h3 {
     font-size: 24px;
     line-height: 1.2;
     text-align: center;
   }


   .demo-text .section-tag {
     margin-left: auto;
     margin-right: auto;
     justify-content: center;
   }

   .demo-text p {
     text-align: center;
   }

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

   .section-subtitle {
     font-size: 15px;
   }

   .section-tag {
     font-size: 11px;
   }

   .problem,
   .category-shift,
   .architecture,
   .interactive-workflow,
   .impact,
   .faq,
   .conversion {
     padding: 60px 0;
   }

   .before-after {
     padding: 60px 0;
   }


   .impact-grid {
     grid-template-columns: 1fr;
     gap: 24px;
   }

   /* Grid layouts → single column */
   .problem-grid {
     grid-template-columns: 1fr;
     gap: 1px;
   }

   .shift-pillars {
     grid-template-columns: 1fr;
     gap: 12px;
   }

   .faq-list {
     gap: 16px;
   }

   .arch-map {
     flex-direction: column;
   }

   .arch-node {
     width: 100%;
     min-width: 0;
   }



   .demo-text h3 {
     font-size: 22px;
   }

   .demo-text p {
     font-size: 15px;
   }

   .workflow-split {
     grid-template-columns: 1fr;
     min-height: auto;
   }

   .workflow-nav {
     border-right: none;
     border-bottom: 1px solid var(--border);
     flex-direction: row;
     padding: 0;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
   }

   .workflow-nav::-webkit-scrollbar {
     display: none;
   }

   .workflow-nav-item {
     flex-shrink: 0;
     padding: 14px 16px;
     border-left: none;
     border-bottom: 3px solid transparent;
     white-space: nowrap;
     min-width: max-content;
   }

   .workflow-nav-item.active {
     border-left-color: transparent;
     border-bottom-color: var(--accent);
   }

   .nav-group-label {
     display: none;
   }

   .wn-number {
     display: none;
   }

   .wn-desc {
     display: none;
   }

   .wn-arrow {
     display: none;
   }

   .wn-title {
     font-size: 13px;
   }

   .kb-inner {
     padding: 20px;
   }

   .pb-inner {
     padding: 20px;
   }

   .panel-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }

   .panel-title-wrap {
     flex-wrap: wrap;
     gap: 8px;
   }

   .panel-title {
     font-size: 16px;
     width: 100%;
     margin-bottom: 4px;
   }

   .filter-search {
     .stage {
       min-height: auto;
     }

     /* Config panel */
     .config-panel {
       width: 100%;
       max-width: 100%;
       position: fixed;
     }

     /* Sequence Monitor */
     .seq-step {
       padding: 0 16px;
     }

     .seq-step-card {
       flex-direction: column;
       gap: 12px;
       align-items: flex-start;
       padding: 14px 16px;
     }

     .seq-step-card-left h4 {
       font-size: 14px;
       flex-wrap: wrap;
     }

     .seq-progress {
       padding: 14px 16px;
     }

     .seq-header {
       padding: 16px;
       flex-direction: column;
       align-items: flex-start;
       gap: 8px;
     }

     /* FAQ */
     .faq-question {
       padding: 18px 20px;
       font-size: 15px;
       height: auto;
       min-height: 56px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       /* Vcent icon to middle-right */
       gap: 16px;
       width: 100%;
     }

     .faq-text {
       flex: 1;
       line-height: 1.4;
       margin-right: 12px;
     }

     .faq-answer {
       padding: 0 20px;
     }

     .faq-item.active .faq-answer {
       padding: 0 20px 24px 20px;
     }

     .faq-answer p {
       font-size: 14px;
     }

     /* Conversion */
     .responsive-grid {
       grid-template-columns: 1fr;
       gap: 32px;
     }

     .waitlist-form {
       padding: 28px 20px;
     }

     .waitlist-form-title {
       font-size: 18px;
     }

     .stats-grid {
       grid-template-columns: 1fr 1fr;
     }

     /* Footer */
     .footer {
       padding: 48px 0 28px;
     }

     .footer-grid {
       flex-direction: column;
       gap: 32px;
     }

     .footer-brand {
       flex: auto;
     }

     .footer-brand p {
       max-width: none;
     }

     .footer-bottom {
       flex-direction: column;
       gap: 12px;
       align-items: center;
       text-align: left;
       margin-top: 32px;
       padding-top: 24px;
     }

     /* Modal */
     .modal {
       width: 100%;
       max-width: 95vw;
       padding: 24px;
       margin: 16px;
     }

     .modal h3 {
       font-size: 18px;
     }

     .modal-actions {
       flex-direction: column;
     }

     .modal-cancel,
     .modal-send {
       width: 100%;
       justify-content: center;
     }

     /* Browser wrap */
     .browser-wrap {
       width: 100%;
       left: 0;
       margin-left: 0;
       height: auto;
       border-radius: 8px;
     }

     /* Drawer */
     .drawer {
       max-width: 100%;
       width: 100%;
     }

     /* Drawer Header Mobile */
     .drawer-header {
       padding: 12px 16px;
       position: sticky;
       top: 0;
       z-index: 10;
       background: #fff;
     }

     .drawer-x {
       width: 28px;
       height: 28px;
       padding: 0;
     }

     .drawer-x svg {
       width: 14px;
       height: 14px;
     }

     .drawer-overlay {
       z-index: 10000;
       /* Higher than navbar */
     }

     /* Global Fix for overflow */
     .interactive-workflow::before {
       display: none;
     }
   }

   /* ---------- MOBILE (max-width:600px) ---------- */
   @media (max-width:600px) {

     /* Container */
     .container {
       padding: 0 16px;
     }

     .nav-inner {
       padding: 0 16px;
     }

     /* Hero */
     .hero {
       padding: 80px 0 36px;
       overflow: hidden !important;
       position: relative;
     }

     .hero-title {
       font-size: clamp(32px, 10vw, 42px) !important;
       line-height: 1.1 !important;
       margin-bottom: 16px;
       overflow-wrap: anywhere !important;
       white-space: normal !important;
       word-break: break-word !important;
       max-width: 100% !important;
       text-align: center;
     }

     .hero-sub {
       font-size: 14px;
       max-width: 100% !important;
       text-align: center;
     }

     .hero-content {
       margin-bottom: 24px;
     }

     .hero-badge {
       font-size: 11px;
       padding: 4px 10px;
     }

     /* Sections */
     .problem,
     .category-shift,
     .architecture,
     .interactive-workflow,
     .impact,
     .faq,
     .conversion {
       padding: 48px 0;
     }

     .before-after {
       padding: 48px 0;
     }

     .section-title {
       font-size: clamp(22px, 6.5vw, 30px);
     }

     .section-subtitle {
       font-size: 14px;
     }

     .faq .section-title {
       margin-bottom: 60px;
       /* Specific 60px gap for FAQ header on mobile */
     }

     /* Problem cards */
     .problem-card {
       padding: 24px 20px;
     }

     /* Shift pillars */
     .shift-pillar {
       padding: 24px 20px;
     }

     /* Impact */
     .impact-card {
       padding: 24px 20px;
     }

     .impact-number {
       font-size: clamp(32px, 8vw, 44px);
     }

     /* Interactive workflow */
     .workflow-nav-item {
       padding: 12px 14px;
     }

     .wn-title {
       font-size: 12px;
     }

     .kb-inner {
       padding: 16px;
     }

     .pb-inner {
       padding: 16px;
     }

     .intel-panel {
       padding: 16px;
     }

     .insight-card {
       padding: 14px;
     }

     .card-body {
       font-size: 13px;
     }

     .card-source-left {
       font-size: 11px;
     }

     .seq-step {
       padding: 0 12px;
     }

     .seq-step-card {
       padding: 12px;
     }

     .seq-step-card-left h4 {
       font-size: 13px;
     }

     .seq-header {
       padding: 14px;
     }

     .seq-progress {
       padding: 12px 14px;
     }

     .send-btn,
     .view-btn {
       font-size: 12px;
       padding: 6px 12px;
     }

     .stats-grid-row {
       grid-template-columns: 1fr;
     }

     /* Proof stats */
     .proof-stats {
       padding: 48px 0 0 0;
     }

     .stat-card-clean {
       padding: 24px 16px;
     }

     /* Before vs After */
     .ba-table {
       border-radius: var(--radius);
     }

     /* Demo */
     .demo-text h3 {
       font-size: 20px;
     }

     .demo-text p {
       font-size: 14px;
     }



     /* FAQ */
     .faq-question {
       padding: 16px;
       font-size: 14px;
       gap: 12px;
       height: auto;
       min-height: 48px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       /* Vcent icon to middle-right */
       width: 100%;
     }

     .faq-text {
       flex: 1;
       line-height: 1.4;
       margin-right: 8px;
     }

     .faq-icon {
       width: 18px;
       height: 18px;
       flex-shrink: 0;
     }

     .faq-answer {
       padding: 0 16px;
     }

     .faq-item.active .faq-answer {
       padding: 0 16px 20px 16px;
       max-height: 600px;
     }

     .faq-answer p {
       font-size: 13px;
     }

     /* Conversion / Form */
     .waitlist-form {
       padding: 24px 16px;
       border-radius: var(--radius-lg);
     }

     .conversion .section-title {
       font-size: clamp(20px, 6vw, 28px);
     }

     .form-submit {
       padding: 14px 20px;
       font-size: 14px;
     }

     .form-row {
       flex-direction: column !important;
       gap: 12px !important;
     }

     .form-row>div {
       width: 100% !important;
     }

     .conversion .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       /* Center the waitlist header on mobile */
       text-align: center;
     }

     .conversion .section-title,
     .conversion .section-subtitle {
       margin-left: 0;
     }

     /* Footer */
     .footer {
       padding: 36px 0 20px;
     }

     .footer-col h4 {
       font-size: 12px;
       margin-bottom: 14px;
     }

     .footer-col a {
       font-size: 13px;
       margin-bottom: 10px;
     }

     /* Authority */
     .authority-strip {
       padding: 20px 0;
     }

     .authority-logos {
       gap: 12px 16px;
     }

     .authority-logos span {
       font-size: 12px;
     }

     .authority-label {
       border-radius: 6px;
     }

     /* Modal */
     .modal {
       padding: 20px;
       margin: 8px;
       max-width: 100vw;
     }
   }

   /* ============================================================
   ADDITIONAL RESPONSIVE FIXES — LIGHT MODE MOBILE & TABLET
   ============================================================ */

   /* --- Nav: Mobile hamburger / overlay menu --- */
   @media (max-width: 768px) {
     .nav-toggle {
       display: flex;
     }

     .nav-links {
       display: none;
       position: fixed;
       top: 64px;
       left: 0;
       right: 0;
       background: #fff;
       border-bottom: 1px solid var(--border);
       flex-direction: column;
       padding: 16px 24px 24px;
       gap: 4px;
       z-index: 999;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
     }

     .nav-links.open {
       display: flex;
     }

     .nav-links a {
       font-size: 15px;
       padding: 10px 0;
       color: var(--text);
       border-bottom: 1px solid var(--border);
     }

     .nav-links a:last-child {
       border-bottom: none;
     }

     .nav-cta {
       margin-top: 8px;
       text-align: center;
       justify-content: center;
     }

     /* Hamburger bar animation when open */
     .nav-toggle.active span:nth-child(1) {
       transform: translateY(8px) rotate(45deg);
     }

     .nav-toggle.active span:nth-child(2) {
       opacity: 0;
     }

     .nav-toggle.active span:nth-child(3) {
       transform: translateY(-8px) rotate(-45deg);
     }

     /* Hero actions stack on very small */
     .hero-actions {
       flex-direction: column;
       align-items: center;
       gap: 12px;
     }

     .hero-actions .btn-primary,
     .hero-actions .btn-secondary {
       width: 100%;
       max-width: 320px;
       justify-content: center;
     }

     /* Authority logos: 2 col on mobile */
     .authority-logos {
       grid-template-columns: repeat(2, 1fr);
     }

     /* Stats grid: 2 col on tablet */
     .stats-grid-row {
       grid-template-columns: repeat(2, 1fr);
     }

     /* Problem editorial: flatten to simpler stack */
     .problem-editorial-item {
       grid-template-columns: 1fr;
       gap: 1rem;
     }

     .problem-editorial-num {
       display: none;
     }

     .problem-editorial-desc {
       grid-column: 1;
     }

     /* New model: pillar grid single col */
     .model-pillars-grid {
       grid-template-columns: 1fr;
     }

     /* Impact grid */
     .impact-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 16px;
     }

     /* Section title alt size */
     .section-title-alt {
       font-size: clamp(2rem, 7vw, 3rem);
     }

     /* Proof stats top padding */
     .proof-stats {
       padding: 48px 0 0;
     }

     /* New model header */
     .new-model-header-wrap {
       margin-bottom: 40px;
     }

     /* Compare layout already stacks via existing media query — ensure padding */
     .compare-col {
       padding: 2rem 1.5rem;
     }

     /* Architecture content padding */
     .arch-content {
       padding: 1.5rem;
     }

     /* Arch tab: hide arrow on mobile */
     .arch-tab-arrow {
       display: none;
     }
   }

   /* --- Tablet: 769px–1024px --- */
   @media (min-width: 769px) and (max-width: 1024px) {

     /* Authority logos: still 4-col but tighter */
     .authority-logos {
       grid-template-columns: repeat(2, 1fr);
     }

     /* Stats grid: 2x2 */
     .stats-grid-row {
       grid-template-columns: repeat(2, 1fr);
     }

     /* Impact grid: 3-col causes overflow on tablet */
     .impact-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     /* Architecture tabs: wrap into scrollable row on tablet too */
     .arch-systems-layout {
       grid-template-columns: 1fr;
     }

     .arch-tabs {
       flex-direction: row;
       overflow-x: auto;
     }
   }

   /* ============================================================
   PRODUCT DEMO – Header Spacing
   ============================================================ */


   /* ============================================================
   GLOBAL MOBILE GRID OVERRIDE
   ============================================================ */
   @media (max-width: 900px) {

     .board-area,
     .workflow-split,
     .arch-systems-layout,
     .problem-grid,
     .testimonials-grid,
     .blog-grid,
     .kb-grid,
     .shift-pillars,
     .cards-grid,
     .ba-row,
     .stats-grid-row,
     .problem-editorial-item,
     .model-pillars-grid,
     .responsive-grid,
     .stats-grid,
     .model-compare,
     .impact-grid,
     .footer-grid {
       grid-template-columns: 1fr !important;
     }
   }
 }