/* ═══════════════════════════════════════
       TOKENS - pulled from DocuForte logo
       Navy #1a237e  Red #c0392b  White
    ═══════════════════════════════════════ */
    :root {
      --brand-navy:   #1a237e;
      --brand-red:    #c0392b;
      --brand-red2:   #e74c3c;
      --navy-deep:    #0d1547;
      --navy-mid:     #1e3a8a;
      --blue:         #1e52d0;
      --blue-bright:  #2563eb;
      --blue-light:   #3b82f6;
      --blue-50:      #eff6ff;
      --blue-100:     #dbeafe;
      --red-50:       #fef2f2;
      --red-100:      #fee2e2;
      --cyan:         #06b6d4;
      --green:        #10b981;
      --amber:        #f59e0b;
      --slate-900:    #0f172a;
      --slate-800:    #1e293b;
      --slate-700:    #334155;
      --slate-600:    #475569;
      --slate-500:    #64748b;
      --slate-400:    #94a3b8;
      --slate-300:    #cbd5e1;
      --slate-200:    #e2e8f0;
      --slate-100:    #f1f5f9;
      --slate-50:     #f8fafc;
      --white:        #ffffff;
      --font-display: 'Plus Jakarta Sans', sans-serif;
      --font-body:    'Instrument Sans', sans-serif;
      --ease:         cubic-bezier(.4,0,.2,1);
      --t:            .22s;
      --tl:           .38s;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font-body); color: var(--slate-900); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    img  { max-width: 100%; display: block; }
    a    { text-decoration: none; color: inherit; }

    /* ═══════════════════════════════════════  TYPOGRAPHY */
    .df-title    { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px,3.6vw,42px); line-height:1.15; letter-spacing:-.025em; color:var(--brand-navy); }
    .df-title-wh { color: var(--white); }
    .df-body     { font-size: 17px; line-height: 1.78; color: var(--slate-500); }
    .df-body-wh  { color: rgba(255,255,255,.62); }

    .eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      letter-spacing: .11em; text-transform: uppercase;
      padding: 5px 13px; border-radius: 100px; margin-bottom: 18px;
    }
    .eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75; }
    .ey-dark  { background:rgba(26,35,126,.09); color:var(--brand-navy); border:1px solid rgba(26,35,126,.18); }
    .ey-red   { background:rgba(192,57,43,.09); color:var(--brand-red);  border:1px solid rgba(192,57,43,.18); }
    .ey-light { background:rgba(255,255,255,.11); color:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.18); }

    /* ═══════════════════════════════════════  BUTTONS */
    .df-btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font-display); font-size: 14px; font-weight: 700;
      padding: 13px 26px; border-radius: 12px; border: none;
      transition: all var(--t) var(--ease); white-space: nowrap; cursor: pointer;
    }
    .df-btn i { font-size: 16px; transition: transform var(--t) var(--ease); }
    .df-btn:hover i { transform: translateX(3px); }
    .df-btn-primary {
      background: linear-gradient(135deg, var(--brand-navy), var(--blue));
      color: var(--white);
      box-shadow: 0 4px 18px rgba(26,35,126,.35), inset 0 1px 0 rgba(255,255,255,.12);
    }
    .df-btn-primary:hover { box-shadow: 0 8px 28px rgba(26,35,126,.45); transform: translateY(-2px); color:var(--white); }
    .df-btn-red {
      background: linear-gradient(135deg, var(--brand-red), var(--brand-red2));
      color: var(--white);
      box-shadow: 0 4px 18px rgba(192,57,43,.32);
    }
    .df-btn-red:hover { box-shadow: 0 8px 28px rgba(192,57,43,.45); transform: translateY(-2px); color:var(--white); }
    .df-btn-outline {
      background: transparent; color: var(--brand-navy);
      border: 1.5px solid var(--slate-300);
    }
    .df-btn-outline:hover { border-color: var(--brand-navy); background: rgba(26,35,126,.05); transform: translateY(-2px); color:var(--brand-navy); }
    .df-btn-white { background: var(--white); color: var(--brand-navy); box-shadow: 0 4px 18px rgba(0,0,0,.16); }
    .df-btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,.22); transform: translateY(-2px); color:var(--brand-navy); }
    .df-btn-ghost-wh { background: rgba(255,255,255,.1); color:var(--white); border: 1.5px solid rgba(255,255,255,.25); }
    .df-btn-ghost-wh:hover { background: rgba(255,255,255,.18); color:var(--white); }

    /* ═══════════════════════════════════════  NAV */
    /* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */

.df-nav{
  background: var(--white);
  border-bottom: 1px solid var(--slate-200);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 10px 0;
}

/* LOGO */

.df-logo img{
  height: 42px;
  width: auto;
}

/* NAV LINKS */

.df-nav-links .nav-link{
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);

  padding: 10px 14px !important;
  border-radius: 10px;

  transition: .3s ease;
}

.df-nav-links .nav-link:hover{
  background: var(--blue-50);
  color: var(--brand-navy);
}

/* SIGN IN */

.df-nav-sign{
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);

  transition: .3s ease;
}

.df-nav-sign:hover{
  color: var(--brand-navy);
}

/* BUTTON */

.df-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 11px 18px;
  border-radius: 10px;
}

/* HAMBURGER BUTTON */
.df-drawer-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--slate-200);
  border-radius: 11px;
  background: var(--white);
  cursor: pointer;
  gap: 5px;
  transition: all .22s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  flex-shrink: 0;
}
.df-drawer-toggle:hover { border-color: var(--brand-navy); background: var(--blue-50); }
.df-drawer-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--slate-700);
  border-radius: 2px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
.df-drawer-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.df-drawer-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.df-drawer-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* DRAWER OVERLAY */
.df-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  transition: opacity .35s ease;
}
.df-drawer-overlay.visible { opacity: 1; }

/* DRAWER PANEL */
.df-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw);
  background: var(--white);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
  border-left: 1px solid var(--slate-100);
}
.df-drawer.open { transform: translateX(0); }

.df-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--slate-100);
}
.df-drawer-header img { height: 34px; width: auto; }
.df-drawer-close {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--slate-200);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  font-size: 16px;
  transition: all .2s ease;
}
.df-drawer-close:hover { background: var(--slate-100); color: var(--slate-800); }

.df-drawer-body {
  flex: 1;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.df-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-700);
  transition: all .2s ease;
  border: 1px solid transparent;
}
.df-drawer-link i { font-size: 17px; color: var(--slate-400); transition: color .2s; }
.df-drawer-link:hover {
  background: var(--blue-50);
  border-color: rgba(26,35,126,.1);
  color: var(--brand-navy);
}
.df-drawer-link:hover i { color: var(--brand-navy); }

.df-drawer-divider {
  height: 1px;
  background: var(--slate-100);
  margin: 12px 0;
}

.df-drawer-footer {
  padding: 20px 20px 28px;
  border-top: 1px solid var(--slate-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.df-drawer-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-600);
  border-radius: 11px;
  border: 1.5px solid var(--slate-200);
  transition: all .2s ease;
}
.df-drawer-signin:hover { border-color: var(--brand-navy); color: var(--brand-navy); background: var(--blue-50); }
.df-drawer-footer .df-btn { justify-content: center; }

/* Badge in drawer */
.df-drawer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(26,35,126,.07);
  color: var(--brand-navy);
  border: 1px solid rgba(26,35,126,.14);
  margin-bottom: 16px;
}
.df-drawer-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--green); }

@media (max-width: 991px) {
  .df-drawer-toggle { display: flex; }
  #mainNavbar { display: none !important; }
}

    /* ═══════════════════════════════════════
       HERO SECTION
       Light gradient background near logo colors
       (very soft navy-tinted white, not dark)
    ═══════════════════════════════════════ */
    .df-hero {
      min-height: 100vh;
      padding-top: 68px;
      /*background: linear-gradient(135deg,
        #f0f4ff 0%,
        #fafbff 30%,
        #fff5f5 70%,
        #f8f0ff 100%
      );*/
      background: linear-gradient(135deg, #7d9cf3 0%, #d8a6a6 30%, #b25656 70%, #894cbe 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    /* Soft glow orbs matching logo palette */
    .hero-orb {
      position: absolute; border-radius: 50%; pointer-events: none;
      filter: blur(90px);
    }
    .hero-orb-1 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(26,35,126,.12) 0%, transparent 70%);
      top: -150px; left: -100px;
      animation: orbFloat 10s ease-in-out infinite alternate;
    }
    .hero-orb-2 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(192,57,43,.09) 0%, transparent 70%);
      bottom: -80px; right: -80px;
      animation: orbFloat 12s ease-in-out infinite alternate-reverse;
    }
    .hero-orb-3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 70%);
      top: 50%; right: 30%;
      animation: orbFloat 8s ease-in-out infinite alternate;
    }
    @keyframes orbFloat {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(30px,-30px) scale(1.1); }
    }

    /* Subtle grid */
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(26,35,126,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,35,126,.04) 1px, transparent 1px);
      background-size: 52px 52px;
    }

    .hero-inner {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 1.2fr 1fr;
      gap: 30px; align-items: center;
      max-width: 1200px; margin: 0 auto; padding: 72px 24px 80px;
      width: 100%;
    }

    /* ── LEFT SIDE ── */
    .hero-badge {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--white); border: 1px solid var(--slate-200);
      border-radius: 100px; padding: 6px 16px 6px 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
      margin-bottom: 26px; font-size: 13px; font-weight: 500; color: var(--slate-700);
    }
    .hero-badge-dot {
      background: linear-gradient(135deg, var(--brand-red), var(--brand-red2));
      color: var(--white); font-size: 10px; font-weight: 800;
      padding: 3px 9px; border-radius: 100px;
      letter-spacing: .05em; text-transform: uppercase; font-family: var(--font-display);
    }

    .hero-title {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(36px, 5.2vw, 60px);
      line-height: 1.08; letter-spacing: -.03em;
      color: var(--brand-navy); margin-bottom: 20px;
    }
    .hero-title .hl-red {
      background: linear-gradient(135deg, var(--brand-red), #e91e63);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-title .hl-blue {
/*      background: linear-gradient(135deg, var(--brand-navy), var(--blue-bright));*/
      background: linear-gradient(135deg, #FFF, #ffffff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-sub { font-size: 16px; line-height: 1.78; color: #000; max-width: 480px; margin-bottom: 36px; }

    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }

/*    .hero-proof { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--slate-200); }*/
/*    .hero-avatars { display: flex; }*/
/*    .hero-av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--white); margin-left: -9px; }*/
/*    .hero-av:first-child { margin-left: 0; }*/
/*    .av1{background:linear-gradient(135deg,#3b82f6,#06b6d4)}*/
/*    .av2{background:linear-gradient(135deg,#10b981,#3b82f6)}*/
/*    .av3{background:linear-gradient(135deg,#f59e0b,#ef4444)}*/
/*    .av4{background:linear-gradient(135deg,#8b5cf6,#ec4899)}*/
    .hero-proof-text { font-size: 13px; color: var(--slate-500); }
    .hero-proof-text strong { color: var(--brand-navy); font-weight: 700; }

    /* Right column wrapper */
    .hero-right-col {
      position: relative;
      width: 100%;
    }

    /* ─────────────────────────────────────────
       RIGHT SIDE - ANIMATED DMS PIPELINE
       Shows: paper docs → scanner → AI → cloud
    ───────────────────────────────────────── */
    .hero-anim {
      position: relative;
      width: 100%;
      height: 500px;
    }

    /* Canvas is the scene container */
    .anim-scene {
      position: absolute; inset: 0;
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.75) 0%, rgba(240,244,255,.9) 100%);
      border: 1px solid rgba(26,35,126,.1);
      box-shadow: 0 24px 80px rgba(26,35,126,.12), 0 4px 16px rgba(0,0,0,.06);
      backdrop-filter: blur(8px);
      overflow: visible;
    }

    /* Scene clip - clips internal pipeline content but not the floating badges */
    .scene-clip {
      position: absolute; inset: 0;
      border-radius: 24px;
      overflow: hidden;
      pointer-events: none;
    }
    .scene-clip > * { pointer-events: auto;
      height: 40px;
/*      background: linear-gradient(90deg, var(--brand-navy), #1e3a8a);*/
      display: flex; align-items: center; gap: 8px; padding: 0 16px;
    }
    .scene-dot { width: 10px; height: 10px; border-radius: 50%; }
    .sd-r{background:#ff5f57} .sd-y{background:#febc2e} .sd-g{background:#28c840}
    .scene-title { font-family: var(--font-display); font-size: 11px; font-weight: 600; 
/*      color: rgba(255,255,255,.55); */
      flex:1; text-align:center; letter-spacing:.06em; }

    /* Scene body */
    .scene-body { position: relative; padding: 16px 12px 12px; height: calc(100% - 40px); overflow: hidden; }

    /* ── STAGE 1: Physical paper files (left area) ── */
    .stage-label {
      font-family: var(--font-display); font-size: 9px; font-weight: 800;
      letter-spacing: .1em; text-transform: uppercase; 
      color: var(--slate-400);
      margin-bottom: 6px;
    }

    /* Paper document stacks */
    .paper-zone { position: absolute; left: 2%; top: 28px; width: 88px; }
    .paper-stack { position: relative; width: 70px; height: 88px; margin: 0 auto; }
    .paper-sheet {
      position: absolute; left: 0; right: 0; height: 82px;
      background: var(--white); border: 1px solid var(--slate-300);
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,.08);
    }
    .paper-sheet:nth-child(1) { top: 0; transform: rotate(-3deg); z-index: 1; }
    .paper-sheet:nth-child(2) { top: 3px; transform: rotate(1deg); z-index: 2; }
    .paper-sheet:nth-child(3) { top: 6px; transform: rotate(-1deg); z-index: 3; background: #fafafa; }
    /* Lines on paper */
    .paper-sheet::before, .paper-sheet::after {
      content: ''; position: absolute; left: 8px; right: 8px; height: 1px;
      background: var(--slate-200);
    }
    .paper-sheet::before { top: 16px; }
    .paper-sheet::after  { top: 24px; box-shadow: 0 8px 0 var(--slate-100), 0 16px 0 var(--slate-100); }

    /* Flying document animation */
    .flying-doc {
      position: absolute;
      width: 52px; height: 64px;
      background: var(--white); border: 1px solid var(--slate-300);
      border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      z-index: 20;
    }
    .flying-doc::before, .flying-doc::after {
      content: ''; width: 32px; height: 2px;
      background: var(--slate-200); border-radius: 1px;
    }
    .flying-doc::after { width: 24px; }
    .fly1 { animation: flyDoc1 4s ease-in-out infinite; left: 5%; top: 60px; }
    .fly2 { animation: flyDoc2 4s ease-in-out 1.3s infinite; left: 3%; top: 80px; }
    .fly3 { animation: flyDoc3 4s ease-in-out 2.6s infinite; left: 4%; top: 70px; }
    @keyframes flyDoc1 { 0%{transform:translate(0,0) rotate(0deg);opacity:1} 60%{transform:translate(4vw,-20px) rotate(-8deg);opacity:1} 70%{transform:translate(10vw,-22px) rotate(-8deg);opacity:0} 100%{transform:translate(0,0) rotate(0deg);opacity:0} }
    @keyframes flyDoc2 { 0%{transform:translate(0,0) rotate(2deg);opacity:1} 60%{transform:translate(7vw,-28px) rotate(-6deg);opacity:1} 70%{transform:translate(11vw,-30px) rotate(-6deg);opacity:0} 100%{transform:translate(0,0) rotate(0deg);opacity:0} }
    @keyframes flyDoc3 { 0%{transform:translate(0,0) rotate(-1deg);opacity:1} 60%{transform:translate(8vw,-24px) rotate(-7deg);opacity:1} 70%{transform:translate(8vw,-26px) rotate(-7deg);opacity:0} 100%{transform:translate(0,0) rotate(0deg);opacity:0} }

    /* ── STAGE 2: Scanner ── */
    .scanner-zone { position: absolute; left: 26%; top: 20px; width: 96px; }
    .scanner-body {
      width: 84px; height: 104px;
      background: linear-gradient(145deg, #1e2a5e, var(--brand-navy));
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.15);
      box-shadow: 0 8px 24px rgba(26,35,126,.35), inset 0 1px 0 rgba(255,255,255,.1);
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    }
    .scanner-slot {
      width: 56px; height: 6px;
      background: rgba(6,182,212,.6); border-radius: 3px;
      box-shadow: 0 0 8px rgba(6,182,212,.8);
    }
    .scanner-light {
      position: absolute; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, transparent, rgba(6,182,212,.9), rgba(255,255,255,.8), rgba(6,182,212,.9), transparent);
      box-shadow: 0 0 12px rgba(6,182,212,.9), 0 0 24px rgba(6,182,212,.5);
      animation: scanBeam 2s ease-in-out infinite;
      top: 20px;
    }
    @keyframes scanBeam { 0%,100%{top:20px;opacity:.6} 50%{top:80px;opacity:1} }
    .scanner-icon { color: rgba(6,182,212,.9); font-size: 22px; position: relative; z-index: 1; }
    .scanner-label { font-family: var(--font-display); font-size: 8px; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .08em; position: relative; z-index: 1; }
    /* Glow pulse on scanner */
    .scanner-glow {
      position: absolute; inset: -20px;
      background: radial-gradient(circle, rgba(6,182,212,.2) 0%, transparent 70%);
      animation: glowPulse 2s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes glowPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }

    /* AI particles from scanner */
    .scan-particle {
      position: absolute; width: 4px; height: 4px; border-radius: 50%;
      background: var(--cyan); box-shadow: 0 0 6px var(--cyan);
      animation: particleFlow 2.5s linear infinite;
    }
    .sp1{left:49%;top:44px;animation-delay:0s}
    .sp2{left:49%;top:56px;animation-delay:.3s;background:#60a5fa;box-shadow:0 0 6px #60a5fa}
    .sp3{left:49%;top:68px;animation-delay:.6s;background:rgba(192,57,43,.8);box-shadow:0 0 6px rgba(192,57,43,.8)}
    .sp4{left:49%;top:80px;animation-delay:.9s}
    .sp5{left:49%;top:50px;animation-delay:1.2s;background:#a78bfa;box-shadow:0 0 6px #a78bfa}
    .sp6{left:49%;top:72px;animation-delay:1.5s;background:#34d399;box-shadow:0 0 6px #34d399}
    @keyframes particleFlow { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateX(80px);opacity:0} }

    /* ── STAGE 3: AI Brain ── */
    .ai-zone { position: absolute; left: 51%; top: 16px; width: 96px; }
    .ai-brain {
      width: 88px; height: 112px;
      background: linear-gradient(145deg, rgba(192,57,43,.1), rgba(26,35,126,.15));
      border: 1px solid rgba(192,57,43,.3);
      border-radius: 14px;
      backdrop-filter: blur(12px);
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 20px rgba(192,57,43,.15), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .ai-brain-icon { font-size: 28px; color: var(--brand-red); position: relative; z-index: 1; animation: aiPulse 2s ease-in-out infinite; }
    @keyframes aiPulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(192,57,43,.5))} 50%{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(192,57,43,.9))} }
    .ai-brain-title { font-family: var(--font-display); font-size: 8px; font-weight: 800; color: var(--brand-red); letter-spacing: .08em; position: relative; z-index: 1; }
    /* Orbiting rings */
    .ai-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(192,57,43,.25);
    }
    .ai-ring-1 { width: 70px; height: 70px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: ringRotate 6s linear infinite; }
    .ai-ring-2 { width: 90px; height: 90px; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: ringRotate 10s linear infinite reverse; border-color: rgba(26,35,126,.2); }
    @keyframes ringRotate { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
    .ai-ring-1::before, .ai-ring-2::before {
      content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%;
      background: var(--brand-red); box-shadow: 0 0 8px var(--brand-red); top: -3px; left: 50%; transform: translateX(-50%);
    }
    .ai-ring-2::before { background: var(--blue-bright); box-shadow: 0 0 8px var(--blue-bright); }

    /* AI categorized tags appear */
    .ai-tag {
      position: absolute; right: 0; font-family: var(--font-display);
      font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 100px;
      animation: tagAppear 3s ease-in-out infinite;
    }
    .ai-tag-1 { background: rgba(16,185,129,.15); color: #059669; border:1px solid rgba(16,185,129,.3); top: 22px; right: -4px; animation-delay: 0s; }
    .ai-tag-2 { background: rgba(37,99,235,.12); color: var(--blue); border:1px solid rgba(37,99,235,.3); top: 42px; right: -4px; animation-delay:.8s; }
    .ai-tag-3 { background: rgba(245,158,11,.12); color: #d97706; border:1px solid rgba(245,158,11,.3); top: 62px; right: -4px; animation-delay:1.6s; }
    .ai-tag-4 { background: rgba(192,57,43,.1); color: var(--brand-red); border:1px solid rgba(192,57,43,.25); top: 82px; right: -4px; animation-delay:2.4s; }
    @keyframes tagAppear { 0%,100%{opacity:0;transform:translateX(8px)} 30%,70%{opacity:1;transform:translateX(0)} }

    /* Arrows between stages */
    .stage-arrow {
      position: absolute; top: 62px;
      display: flex; align-items: center; gap: 0;
    }
    .sa-1 { left: 23%; }
    .sa-2 { left: 48%; }
    .sa-3 { left: 73%; }
    .arrow-line {
      width: 22px; height: 2px;
      background: linear-gradient(90deg, rgba(26,35,126,.3), rgba(6,182,212,.6));
      position: relative; animation: arrowPulse 2s ease-in-out infinite;
    }
    .arrow-head { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid rgba(6,182,212,.7); animation: arrowPulse 2s ease-in-out infinite; }
    @keyframes arrowPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

    /* ── STAGE 4: Cloud Storage ── */
    .cloud-zone { position: absolute; left: 74%; top: 12px; width: 116px; }
    .cloud-box {
      width: 108px; height: 120px;
      background: linear-gradient(145deg, var(--blue-50), #e0ebff);
      border: 1px solid rgba(26,35,126,.18);
      border-radius: 16px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
      position: relative; overflow: hidden;
      box-shadow: 0 4px 20px rgba(26,35,126,.12), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .cloud-icon { font-size: 30px; color: var(--brand-navy); animation: cloudFloat 3s ease-in-out infinite; z-index: 1; }
    @keyframes cloudFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
    .cloud-label { font-family: var(--font-display); font-size: 8px; font-weight: 800; color: var(--brand-navy); letter-spacing:.07em; z-index:1; }
    .cloud-shine {
      position: absolute; top: 0; left: 0; right: 0; height: 40%;
      background: linear-gradient(180deg, rgba(255,255,255,.7), transparent);
      border-radius: 16px 16px 0 0;
    }
    /* Ping dot on cloud */
    .cloud-ping {
      position: absolute; top: 12px; right: 12px;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--green); box-shadow: 0 0 0 0 rgba(16,185,129,.5);
      animation: pingAnim 2s ease-out infinite;
    }
    @keyframes pingAnim { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 10px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

    /* Incoming digital files to cloud */
    .digital-file {
      position: absolute; left: 71%; top: 48px;
      width: 18px; height: 22px;
      background: linear-gradient(135deg, var(--blue-bright), var(--cyan));
      border-radius: 4px 4px 4px 4px;
      animation: fileToCloud 2s ease-in-out infinite;
      box-shadow: 0 2px 8px rgba(37,99,235,.4);
    }
    .df2 { animation-delay: .7s; background: linear-gradient(135deg, #10b981, #06b6d4); top: 62px; box-shadow: 0 2px 8px rgba(16,185,129,.4); }
    .df3 { animation-delay: 1.4s; background: linear-gradient(135deg, var(--brand-red), #f97316); top: 76px; box-shadow: 0 2px 8px rgba(192,57,43,.4); }
    @keyframes fileToCloud { 0%{transform:translateX(0);opacity:1} 70%{transform:translateX(22px);opacity:1} 80%{transform:translateX(24px);opacity:0} 100%{transform:translateX(0);opacity:0} }

    /* ── BOTTOM ROW: organized folders + search ── */
    .bottom-row { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 12px 12px; }
    .bottom-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(26,35,126,.15), transparent); margin-bottom: 10px; }

    .folders-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .mini-folder {
      flex: 1; background: var(--white); border: 1px solid var(--slate-200);
      border-radius: 8px; padding: 8px 8px 7px;
      display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
      box-shadow: 0 2px 8px rgba(0,0,0,.06);
      transition: transform .3s var(--ease);
      animation: folderPop .6s var(--ease) both;
    }
    .mini-folder:nth-child(1){animation-delay:.2s} .mini-folder:nth-child(2){animation-delay:.4s}
    .mini-folder:nth-child(3){animation-delay:.6s} .mini-folder:nth-child(4){animation-delay:.8s}
    @keyframes folderPop { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
    .mf-icon { font-size: 18px; color: var(--brand-navy); }
    .mf-name { font-family: var(--font-display); font-size: 8px; font-weight: 700; color: var(--slate-700); }
    .mf-count { font-size: 8px; color: var(--slate-400); }
    .mf-bar { width: 100%; height: 2px; background: var(--slate-100); border-radius: 1px; overflow: hidden; }
    .mf-fill { height: 100%; border-radius: 1px; background: linear-gradient(90deg, var(--brand-navy), var(--blue-bright)); }

    /* Search result cards */
    .search-bar-demo {
      background: var(--white); border: 1px solid var(--slate-200);
      border-radius: 8px; padding: 7px 10px;
      display: flex; align-items: center; gap: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,.05); margin-bottom: 7px;
    }
    .search-bar-demo i { color: var(--slate-400); font-size: 13px; }
    .search-typing {
      font-size: 11px; color: var(--slate-500); font-family: var(--font-display);
      overflow: hidden; white-space: nowrap;
      animation: typing 4s steps(22) infinite;
    }
    @keyframes typing { 0%,5%{width:0} 50%,95%{width:22ch} 100%{width:0} }
    .search-cursor { display: inline-block; width: 2px; height: 11px; background: var(--brand-navy); animation: blink .8s step-end infinite; vertical-align: middle; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .search-badge { margin-left: auto; font-family: var(--font-display); font-size: 9px; font-weight: 700; color: var(--green); background: rgba(16,185,129,.1); padding: 2px 7px; border-radius: 100px; white-space: nowrap; }

    .result-cards { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
    .result-card {
      flex: 1; background: var(--white); border: 1px solid var(--slate-200);
      border-radius: 7px; padding: 6px 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
      display: flex; align-items: center; gap: 6px;
    }
    .rc-type { font-size: 8px; font-weight: 800; font-family: var(--font-display); padding: 2px 5px; border-radius: 3px; flex-shrink:0; }
    .rc-pdf  { background: rgba(239,68,68,.12); color: #dc2626; }
    .rc-doc  { background: rgba(37,99,235,.12);  color: #1d4ed8; }
    .rc-xls  { background: rgba(16,185,129,.12); color: #047857; }
    .rc-info { flex: 1; overflow: hidden; }
    .rc-name { font-size: 9px; font-weight: 600; color: var(--slate-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rc-meta { font-size: 8px; color: var(--slate-400); }
    .rc-status { font-size: 8px; font-weight: 700; font-family: var(--font-display); padding: 2px 6px; border-radius: 100px; }
    .rs-ok  { background: rgba(16,185,129,.12); color: #047857; }
    .rs-rev { background: rgba(245,158,11,.12); color: #b45309; }
    .rs-sec { background: rgba(37,99,235,.12); color: #1d4ed8; }

    /* Floating badges on hero */
    .hero-float {
      position: absolute; z-index: 30;
      background: var(--white); border: 1px solid var(--slate-200);
      border-radius: 12px; padding: 10px 14px;
      box-shadow: 0 8px 28px rgba(0,0,0,.1);
      display: flex; align-items: center; gap: 10px;
    }
    .hf-top { top: 12px; right: 12px; animation: hfloat1 5s ease-in-out infinite; }
    .hf-bot { bottom: 14px; left: 12px; animation: hfloat2 6s ease-in-out infinite; }
    @keyframes hfloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
    @keyframes hfloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
    .hfi { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .hfi i { font-size: 17px; }
    .hfi-g { background: rgba(16,185,129,.12); color: var(--green); }
    .hfi-b { background: rgba(26,35,126,.1); color: var(--brand-navy); }
    .hfv { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--slate-900); }
    .hfl { font-size: 11px; color: var(--slate-500); margin-top: 1px; }

    /* Stage labels */
    .slabel {
      font-family: var(--font-display); font-size: 8px; font-weight: 800;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--white); background: var(--brand-navy);
      padding: 2px 7px; border-radius: 100px;
      position: absolute;
    }
    .sl-1 { top: 152px; left: 2%; }
    .sl-2 { top: 152px; left: 26%; }
    .sl-3 { top: 152px; left: 51%; }
    .sl-4 { top: 148px; left: 74%; background: linear-gradient(135deg,var(--brand-red),var(--brand-red2)); }

    /* Workflow connector lines (SVG overlay) */
    .workflow-svg { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

    /* ═══════════════════════════════════════  TRUSTED */
    .trusted { 
/*      background: var(--slate-50);*/
      background: #1a237e; 
      border-top: 1px solid var(--slate-200); border-bottom: 1px solid var(--slate-200); padding: 48px 0; }
    .trusted-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); text-align: center; margin-bottom: 32px; }
    .trusted-logos { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
    .tlogo { 
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
     color: var(--slate-300); 
    letter-spacing: -.02em;
    /* transition: all var(--t) var(--ease); */
    /* filter: grayscale(1); */
    /* opacity: .5; */
    }

    .tlogo:hover { filter: none; opacity: .85; color: var(--slate-600); }
    .tlm { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
    .tlm i { font-size: 15px; }
    .tl1 .tlm{background:#dbeafe;color:#1d4ed8} .tl2 .tlm{background:#dcfce7;color:#15803d} .tl3 .tlm{background:#fef3c7;color:#b45309}
    .tl4 .tlm{background:#fce7f3;color:#be185d} .tl5 .tlm{background:#ede9fe;color:#6d28d9} .tl6 .tlm{background:#ffedd5;color:#c2410c}

    /* ═══════════════════════════════════════  FEATURES */
    .df-features { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f0f4ff 100%); position: relative; overflow: hidden; }
    .df-features::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--slate-200),transparent); }
    .feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
    .feat-card {
      background: var(--white); border: 1px solid var(--slate-200); border-radius: 20px; padding: 30px;
      position: relative; overflow: hidden; transition: all var(--tl) var(--ease); box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .feat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand-navy),var(--blue-bright)); transform:scaleX(0); transform-origin:left; transition:transform var(--tl) var(--ease); }
    .feat-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,35,126,.03) 0%,transparent 60%); opacity:0; transition:opacity var(--t) var(--ease); }
    .feat-card:hover { border-color:rgba(26,35,126,.25); box-shadow:0 16px 48px rgba(0,0,0,.10); transform:translateY(-5px); }
    .feat-card:hover::before { transform:scaleX(1); }
    .feat-card:hover::after { opacity:1; }
    .feat-icon-wrap { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; z-index:1; }
    .feat-icon-wrap i { font-size:24px; }
    .fi-1{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:var(--brand-navy)}
    .fi-2{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
    .fi-3{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309}
    .fi-4{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9}
    .fi-5{background:linear-gradient(135deg,#cffafe,#a5f3fc);color:#0e7490}
    .fi-6{background:linear-gradient(135deg,var(--red-100),#fecaca);color:var(--brand-red)}
    .feat-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--brand-navy); margin-bottom:10px; position:relative; z-index:1; }
    .feat-desc  { font-size:14px; color:var(--slate-500); line-height:1.72; position:relative; z-index:1; }
    .feat-tags  { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; position:relative; z-index:1; }
    .ftag       { font-size:10px; font-weight:700; font-family:var(--font-display); padding:3px 9px; border-radius:100px; }
    .ft-a{background:var(--blue-100);color:var(--brand-navy)} .ft-b{background:var(--slate-100);color:var(--slate-600)}

    /* ═══════════════════════════════════════  WORKFLOW - Premium Redesign */
    .df-workflow {
      background: #03071a;
      position: relative; overflow: hidden;
    }
    .df-workflow::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 15% 50%, rgba(30,82,208,.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 85% 20%, rgba(6,182,212,.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 100%, rgba(99,44,200,.16) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 70% 60%, rgba(26,35,126,.22) 0%, transparent 55%);
      pointer-events: none;
    }
    .df-workflow::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
      background-size: 44px 44px;
      pointer-events: none;
    }
    .df-workflow .wf-sweep {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, transparent 0%, rgba(37,99,235,.06) 50%, transparent 100%);
      animation: wfSweep 6s ease-in-out infinite alternate;
    }
    @keyframes wfSweep {
      from { transform: translateY(-20%); opacity: .5; }
      to   { transform: translateY(20%);  opacity: 1; }
    }
    .df-workflow .wf-glow-tl {
      position:absolute; top:-120px; left:-80px; width:380px; height:380px; border-radius:50%;
      background:radial-gradient(circle, rgba(37,99,235,.22) 0%, transparent 70%);
      filter:blur(60px); pointer-events:none;
    }
    .df-workflow .wf-glow-br {
      position:absolute; bottom:-100px; right:-60px; width:320px; height:320px; border-radius:50%;
      background:radial-gradient(circle, rgba(6,182,212,.18) 0%, transparent 70%);
      filter:blur(60px); pointer-events:none;
    }
    .wf-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; margin-top: 2.5em; }
    .wf-steps { display:flex; flex-direction:column; }
    .wf-step { display:flex; gap:20px; padding-bottom:30px; }
    .wf-step:last-child { padding-bottom:0; }
    .wf-sl { display:flex; flex-direction:column; align-items:center; }
    .wf-num {
      width:44px; height:44px; border-radius:12px; flex-shrink:0;
      background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(6,182,212,.1));
      border: 1px solid rgba(37,99,235,.4);
      display:flex; align-items:center; justify-content:center;
      font-family:var(--font-display); font-size:15px; font-weight:800; color:#60a5fa;
      transition:all var(--t) var(--ease);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .wf-step:hover .wf-num {
      background: linear-gradient(135deg, var(--blue), var(--cyan));
      border-color: var(--blue-bright); color: var(--white);
      box-shadow: 0 0 22px rgba(37,99,235,.5), 0 0 0 4px rgba(37,99,235,.12);
      border-radius: 50%;
    }
    .wf-line {
      width:1px; flex:1; margin-top:6px; min-height:24px;
      background: linear-gradient(to bottom, rgba(37,99,235,.4), rgba(6,182,212,.08));
      position: relative;
    }
    .wf-line::after {
      content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
      width:3px; height:30%; border-radius:2px;
      background: linear-gradient(to bottom, #60a5fa, transparent);
      animation: lineSlide 2.5s ease-in-out infinite;
    }
    @keyframes lineSlide { 0%,100%{top:0;opacity:1} 80%{top:70%;opacity:0} }
    .wf-step:last-child .wf-line { display:none; }
/*    .wf-body { padding-top:10px; }*/
    .wf-ibg {
      width:32px; height:32px; border-radius:8px;
      background: linear-gradient(135deg, rgba(37,99,235,.2), rgba(6,182,212,.12));
      border: 1px solid rgba(37,99,235,.25);
      display:flex; align-items:center; justify-content:center; margin-bottom:8px;
    }
    .wf-ibg i { font-size:15px; color:#93c5fd; }
    .wf-st { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--white); margin-bottom:6px; }
    .wf-sd { font-size:14px; color:rgba(255,255,255,.42); line-height:1.68; }
    .wf-doc {
      background: linear-gradient(135deg, rgba(255,255,255,.055) 0%, rgba(37,99,235,.06) 100%);
      border: 1px solid rgba(255,255,255,.1);
      border-top: 1px solid rgba(255,255,255,.15);
      border-radius:16px; padding:18px; backdrop-filter:blur(14px);
      box-shadow: 0 8px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
      transition: all var(--t) var(--ease);
    }
    .wf-doc:hover { border-color: rgba(37,99,235,.35); transform:translateY(-2px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
    .wf-doc+.wf-doc { margin-top:12px; }
    .wf-dh { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
    .wf-dtype { padding:4px 10px; border-radius:6px; font-size:10px; font-weight:800; font-family:var(--font-display); }
    .dt-pdf{background:rgba(239,68,68,.18);color:#fca5a5;border:1px solid rgba(239,68,68,.2)} .dt-doc{background:rgba(37,99,235,.18);color:#93c5fd;border:1px solid rgba(37,99,235,.25)} .dt-con{background:rgba(245,158,11,.18);color:#fcd34d;border:1px solid rgba(245,158,11,.2)}
    .wf-dname { font-size:13px; font-weight:600; color:rgba(255,255,255,.85); }
    .wf-meta { display:flex; gap:12px; }
    .wf-mi { display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.32); }
    .wf-mi i { font-size:11px; }
    .wf-prog { margin-top:12px; }
    .wf-pl { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:rgba(255,255,255,.38); margin-bottom:6px; font-family:var(--font-display); }
    .wf-pb { height:5px; background:rgba(255,255,255,.07); border-radius:100px; overflow:hidden; }
    .wf-pf { height:100%; border-radius:100px; background:linear-gradient(90deg, #3b82f6, var(--cyan)); box-shadow:0 0 8px rgba(37,99,235,.5); }
    .wf-appr { display:flex; align-items:center; gap:8px; margin-top:12px; }
    .wf-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; font-family:var(--font-display); color:var(--white); }
    .wf-av.dn{background:linear-gradient(135deg,#10b981,#059669)} .wf-av.wt{background:rgba(255,255,255,.1);color:rgba(255,255,255,.35)} .wf-av.cu{background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 0 12px rgba(37,99,235,.6)}
    .wf-avl { font-size:11px; color:rgba(255,255,255,.32); }

    /* ═══════════════════════════════════════  BENEFITS */
    .df-benefits { background:linear-gradient(135deg,#020617 0%,#0a1628 50%,#050d1f 100%); position:relative; overflow:hidden; }
    .df-benefits::before { content:''; position:absolute; width:900px; height:500px; top:-150px; left:50%; transform:translateX(-50%); background:radial-gradient(ellipse,rgba(26,35,126,.2) 0%,transparent 70%); pointer-events:none; }
    .df-benefits::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
    .bene-wrap { position:relative; z-index:1; }
    .bene-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.06); border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.06); margin-top:56px; }
    .bene { background:rgba(13,27,62,.6); padding:40px; position:relative; overflow:hidden; transition:background var(--t) var(--ease); }
    .bene:hover { background:rgba(26,35,126,.14); }
    .bene::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(37,99,235,.5),transparent); opacity:0; transition:opacity var(--t) var(--ease); }
    .bene:hover::before { opacity:1; }
    .bene-icon-w { width:52px; height:52px; border-radius:14px; margin-bottom:20px; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.25); display:flex; align-items:center; justify-content:center; color:#60a5fa; }
    .bene-icon-w i { font-size:24px; }
    .bene-num { font-family:var(--font-display); font-size:40px; font-weight:800; background:linear-gradient(135deg,#60a5fa,var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; }
    .bene-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--white); margin-bottom:8px; }
    .bene-text { font-size:14px; color:rgba(255,255,255,.45); line-height:1.7; }

    /* ═══════════════════════════════════════  INDUSTRIES */
    .df-industries { background:linear-gradient(180deg,#ffffff 0%,#f0f4ff 60%,#e8eeff 100%); position:relative; overflow:hidden; }
    .df-industries::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(26,35,126,.04) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
    .ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:1; }
    .ind-card { background:var(--white); border:1px solid var(--slate-200); border-radius:20px; padding:30px; transition:all var(--tl) var(--ease); position:relative; overflow:hidden; }
    .ind-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--brand-navy),var(--blue-bright)); transform:scaleX(0); transform-origin:left; transition:transform var(--tl) var(--ease); }
    .ind-card:hover { box-shadow:0 16px 48px rgba(0,0,0,.10); transform:translateY(-5px); border-color:rgba(26,35,126,.2); }
    .ind-card:hover::before { transform:scaleX(1); }
    .ind-icon-wrap { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
    .ind-icon-wrap i { font-size:26px; }
    .ii-1{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
    .ii-2{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:var(--brand-navy)}
    .ii-3{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309}
    .ii-4{background:linear-gradient(135deg,#fce7f3,#fbcfe8);color:#be185d}
    .ii-5{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#6d28d9}
    .ii-6{background:linear-gradient(135deg,var(--red-100),#fecaca);color:var(--brand-red)}
    .ind-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--brand-navy); margin-bottom:8px; }
    .ind-text  { font-size:14px; color:var(--slate-500); line-height:1.68; margin-bottom:16px; }
    .ind-tags  { display:flex; gap:6px; flex-wrap:wrap; }
    .ind-tag   { font-size:10px; font-weight:600; font-family:var(--font-display); background:var(--slate-100); color:var(--slate-600); padding:3px 9px; border-radius:100px; }

    /* ═══════════════════════════════════════  COMPLIANCE STRIP - Dark Enterprise */
    .df-compliance {
      background: #070d1c;
      padding:80px 0; position:relative; overflow:hidden;
    }
    /* Multi-layer premium dark background */
    .df-compliance::before {
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 70% 80% at 0% 50%, rgba(192,57,43,.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 100% 50%, rgba(30,58,138,.2) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 0%, rgba(6,182,212,.08) 0%, transparent 60%);
      pointer-events:none;
    }
    /* Diagonal stripe texture */
    .df-compliance::after {
      content:'';
      position:absolute; inset:0;
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 40px,
        rgba(255,255,255,.012) 40px,
        rgba(255,255,255,.012) 41px
      );
      pointer-events:none;
    }
    .comp-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
    .comp-title { font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--white); margin-bottom:6px; }
    .comp-sub   { font-size:14px; color:rgba(255,255,255,.45); }
    .comp-badges { display:flex; gap:12px; flex-wrap:wrap; }
    .cbadge {
      background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
      border: 1px solid rgba(255,255,255,.1);
      border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:10px;
      transition:all var(--t) var(--ease);
      backdrop-filter: blur(8px);
    }
    .cbadge:hover {
      background: linear-gradient(135deg, rgba(192,57,43,.15) 0%, rgba(192,57,43,.06) 100%);
      border-color:rgba(192,57,43,.4);
      transform:translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    .cbadge-icon { width:36px; height:36px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(192,57,43,.18); color:#fca5a5; border:1px solid rgba(192,57,43,.25); }
    .cbadge-icon i { font-size:17px; }
    .cbadge-name { font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--white); }
    .cbadge-desc { font-size:11px; color:rgba(255,255,255,.38); margin-top:1px; }

    /* ═══════════════════════════════════════  SUSTAINABILITY */
    .df-sustain {
      background: #f8fbf8;
      position: relative;
      overflow: hidden;
      padding: 110px 0;
    }

    /* Layered background - eco-tech atmosphere */
    .df-sustain::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 10% 20%, rgba(16,185,129,.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 90% 80%, rgba(6,182,212,.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 50% 5%,  rgba(26,35,126,.06) 0%, transparent 65%),
        radial-gradient(ellipse 35% 35% at 80% 10%, rgba(16,185,129,.05) 0%, transparent 55%);
      pointer-events: none;
    }
    /* Fine dot grid */
    .df-sustain::after {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(rgba(16,185,129,.07) 1.5px, transparent 1.5px);
      background-size: 30px 30px;
      pointer-events: none;
    }

    /* Ambient glow orbs */
    .sustain-orb {
      position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px);
    }
    .sustain-orb-1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(16,185,129,.1) 0%, transparent 70%);
      top: -120px; right: -60px;
      animation: orbFloat 14s ease-in-out infinite alternate;
    }
    .sustain-orb-2 {
      width: 380px; height: 380px;
      background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 70%);
      bottom: -80px; left: -40px;
      animation: orbFloat 10s ease-in-out infinite alternate-reverse;
    }
    .sustain-orb-3 {
      width: 250px; height: 250px;
      background: radial-gradient(circle, rgba(26,35,126,.06) 0%, transparent 70%);
      top: 40%; left: 50%;
      animation: orbFloat 8s ease-in-out infinite alternate;
    }

    /* Eyebrow for sustainability */
    .ey-eco {
      background: rgba(16,185,129,.1);
      color: #047857;
      border: 1px solid rgba(16,185,129,.25);
    }

    /* Header area */
    .sustain-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 70px;
      position: relative; z-index: 1;
    }
    .sustain-headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.12;
      letter-spacing: -.028em;
      color: var(--brand-navy);
      margin-bottom: 18px;
    }
    .sustain-headline .hl-eco {
      background: linear-gradient(135deg, #059669, #10b981, #06b6d4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .sustain-sub {
      font-size: 17px;
      line-height: 1.78;
      color: var(--slate-500);
      max-width: 560px;
      margin: 0 auto;
    }

    /* Main two-card grid */
    .sustain-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      position: relative; z-index: 1;
      margin-bottom: 22px;
    }

    /* Premium sustainability card */
    .sustain-card {
      background: var(--white);
      border: 1px solid rgba(16,185,129,.15);
      border-radius: 24px;
      padding: 40px 36px;
      position: relative;
      overflow: hidden;
      transition: all .38s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 0 0 0 rgba(16,185,129,0);
    }
    /* Top accent line */
    .sustain-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #059669, #10b981, #06b6d4);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    /* Inner glow */
    .sustain-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(16,185,129,.04) 0%, transparent 60%);
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }
    .sustain-card:hover {
      border-color: rgba(16,185,129,.35);
      box-shadow: 0 20px 56px rgba(16,185,129,.1), 0 4px 16px rgba(0,0,0,.06);
      transform: translateY(-6px);
    }
    .sustain-card:hover::before { transform: scaleX(1); }
    .sustain-card:hover::after { opacity: 1; }

    /* Card icon */
    .sustain-icon-wrap {
      width: 58px; height: 58px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
      position: relative; z-index: 1;
      transition: all .3s ease;
    }
    .sustain-icon-wrap i { font-size: 26px; }
    .si-1 {
      background: linear-gradient(135deg, rgba(5,150,105,.12), rgba(16,185,129,.08));
      color: #059669;
      border: 1px solid rgba(16,185,129,.2);
      box-shadow: 0 4px 14px rgba(16,185,129,.12);
    }
    .si-2 {
      background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(16,185,129,.08));
      color: #0e7490;
      border: 1px solid rgba(6,182,212,.2);
      box-shadow: 0 4px 14px rgba(6,182,212,.12);
    }
    .sustain-card:hover .sustain-icon-wrap {
      transform: scale(1.08) rotate(-3deg);
    }

    /* Card label */
    .sustain-card-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 800; font-family: var(--font-display);
      letter-spacing: .1em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 100px;
      margin-bottom: 14px;
      position: relative; z-index: 1;
    }
    .sl-eco { background: rgba(16,185,129,.1); color: #047857; border: 1px solid rgba(16,185,129,.2); }
    .sl-water { background: rgba(6,182,212,.1); color: #0e7490; border: 1px solid rgba(6,182,212,.2); }

    .sustain-card-title {
      font-family: var(--font-display);
      font-size: 20px; font-weight: 700;
      color: var(--brand-navy);
      margin-bottom: 12px;
      position: relative; z-index: 1;
    }
    .sustain-card-desc {
      font-size: 14px;
      color: var(--slate-500);
      line-height: 1.75;
      position: relative; z-index: 1;
      margin-bottom: 24px;
    }

    /* Stats row inside card */
    .sustain-stats {
      display: flex;
      gap: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(16,185,129,.12);
      position: relative; z-index: 1;
    }
    .sustain-stat { flex: 1; }
    .sustain-stat-num {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 800;
      color: var(--brand-navy);
      line-height: 1;
      margin-bottom: 4px;
    }
    .sustain-stat-num .eco-accent { color: #059669; }
    .sustain-stat-label {
      font-size: 11px; font-weight: 500;
      color: var(--slate-400);
      line-height: 1.4;
    }

    /* Decorative corner in card */
    .sustain-card-bg-icon {
      position: absolute;
      bottom: -10px; right: -10px;
      font-size: 100px;
      color: rgba(16,185,129,.04);
      pointer-events: none;
      line-height: 1;
      transition: all .4s ease;
    }
    .sustain-card:hover .sustain-card-bg-icon {
      color: rgba(16,185,129,.07);
      transform: scale(1.08) rotate(5deg);
    }

    /* Bottom metrics strip */
    /*.sustain-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      position: relative; z-index: 1;
    }
    .sustain-metric {
      background: var(--white);
      border: 1px solid rgba(16,185,129,.12);
      border-radius: 18px;
      padding: 28px 28px 26px;
      display: flex;
      align-items: center;
      gap: 18px;
      transition: all .32s ease;
      box-shadow: 0 1px 6px rgba(0,0,0,.04);
    }
    .sustain-metric:hover {
      border-color: rgba(16,185,129,.28);
      box-shadow: 0 10px 32px rgba(16,185,129,.09);
      transform: translateY(-3px);
    }
    .sm-icon {
      width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    .sm-i1 { background: linear-gradient(135deg,rgba(5,150,105,.12),rgba(16,185,129,.06)); color:#059669; border:1px solid rgba(16,185,129,.18); }
    .sm-i2 { background: linear-gradient(135deg,rgba(6,182,212,.12),rgba(6,182,212,.06)); color:#0e7490; border:1px solid rgba(6,182,212,.18); }
    .sm-i3 { background: linear-gradient(135deg,rgba(26,35,126,.1),rgba(37,99,235,.06)); color:var(--brand-navy); border:1px solid rgba(26,35,126,.15); }
    .sm-body { flex: 1; }
    .sm-value {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 800;
      color: var(--brand-navy);
      line-height: 1;
      margin-bottom: 5px;
    }
    .sm-label {
      font-size: 13px; font-weight: 500;
      color: var(--slate-500);
    }*/

    /* Eco pulse dot animation */
    .eco-pulse {
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 0 0 rgba(16,185,129,.5);
      animation: ecoPing 2s ease-out infinite;
      vertical-align: middle;
      margin-right: 6px;
    }
    @keyframes ecoPing {
      0%  { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
      70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
      100%{ box-shadow: 0 0 0 0 rgba(16,185,129,0); }
    }

    /* ═══════════════════════════════════════  WHY CHOOSE */
    .df-why {
      background: var(--white);
      position: relative;
      overflow: hidden;
      padding: 110px 0;
    }
    /* Layered ambient wash */
    .df-why::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 65% 55% at 5% 10%,  rgba(26,35,126,.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 95% 90%,  rgba(37,99,235,.05) 0%, transparent 60%),
        radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(6,182,212,.03) 0%, transparent 60%);
      pointer-events: none;
    }
    /* Subtle grid lines */
    .df-why::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(26,35,126,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,35,126,.025) 1px, transparent 1px);
      background-size: 56px 56px;
      pointer-events: none;
    }

    .why-header {
      text-align: center;
      max-width: 660px;
      margin: 0 auto 64px;
      position: relative; z-index: 1;
    }
    .why-headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1.12;
      letter-spacing: -.028em;
      color: var(--brand-navy);
      margin-bottom: 16px;
    }
    .why-sub {
      font-size: 17px;
      line-height: 1.78;
      color: var(--slate-500);
    }

    /* 4-card grid */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      position: relative; z-index: 1;
    }

    /* Individual card */
    .why-card {
      background: var(--white);
      border: 1px solid var(--slate-200);
      border-radius: 22px;
      padding: 34px 28px 30px;
      position: relative;
      overflow: hidden;
      transition: all .38s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 1px 6px rgba(0,0,0,.05), 0 0 0 0 rgba(26,35,126,0);
      cursor: default;
    }
    /* Animated top bar */
    .why-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      border-radius: 22px 22px 0 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .42s cubic-bezier(.4,0,.2,1);
    }
    /* Inner light wash */
    .why-card::after {
      content: '';
      position: absolute; inset: 0;
      opacity: 0;
      transition: opacity .32s ease;
      pointer-events: none;
      border-radius: 22px;
    }
    .why-card:hover {
      border-color: transparent;
      transform: translateY(-7px);
    }
    .why-card:hover::before { transform: scaleX(1); }
    .why-card:hover::after  { opacity: 1; }

    /* Per-card color themes */
    .wc-1::before { background: linear-gradient(90deg, var(--brand-navy), var(--blue-bright)); }
    .wc-1:hover   { box-shadow: 0 20px 52px rgba(26,35,126,.14), 0 1px 0 rgba(26,35,126,.08); }
    .wc-1::after  { background: linear-gradient(145deg, rgba(26,35,126,.03) 0%, transparent 55%); }

    .wc-2::before { background: linear-gradient(90deg, #059669, #06b6d4); }
    .wc-2:hover   { box-shadow: 0 20px 52px rgba(5,150,105,.12), 0 1px 0 rgba(5,150,105,.08); }
    .wc-2::after  { background: linear-gradient(145deg, rgba(5,150,105,.04) 0%, transparent 55%); }

    .wc-3::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
    .wc-3:hover   { box-shadow: 0 20px 52px rgba(6,182,212,.12), 0 1px 0 rgba(6,182,212,.08); }
    .wc-3::after  { background: linear-gradient(145deg, rgba(6,182,212,.04) 0%, transparent 55%); }

    .wc-4::before { background: linear-gradient(90deg, var(--brand-red), #f59e0b); }
    .wc-4:hover   { box-shadow: 0 20px 52px rgba(192,57,43,.11), 0 1px 0 rgba(192,57,43,.08); }
    .wc-4::after  { background: linear-gradient(145deg, rgba(192,57,43,.03) 0%, transparent 55%); }

    /* Icon wrap */
    .why-icon {
      width: 54px; height: 54px;
      border-radius: 15px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
      position: relative; z-index: 1;
      transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
    }
    .why-icon i { font-size: 24px; }
    .why-card:hover .why-icon { transform: scale(1.1) rotate(-4deg); }

    .wi-1 {
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      color: var(--brand-navy);
      border: 1px solid rgba(26,35,126,.12);
      box-shadow: 0 4px 14px rgba(26,35,126,.1);
    }
    .wi-2 {
      background: linear-gradient(135deg, #d1fae5, #a7f3d0);
      color: #047857;
      border: 1px solid rgba(5,150,105,.15);
      box-shadow: 0 4px 14px rgba(5,150,105,.1);
    }
    .wi-3 {
      background: linear-gradient(135deg, #cffafe, #a5f3fc);
      color: #0e7490;
      border: 1px solid rgba(6,182,212,.15);
      box-shadow: 0 4px 14px rgba(6,182,212,.1);
    }
    .wi-4 {
      background: linear-gradient(135deg, var(--red-100), #fecaca);
      color: var(--brand-red);
      border: 1px solid rgba(192,57,43,.12);
      box-shadow: 0 4px 14px rgba(192,57,43,.1);
    }
    .why-card:hover .wi-1 { box-shadow: 0 8px 24px rgba(26,35,126,.18); }
    .why-card:hover .wi-2 { box-shadow: 0 8px 24px rgba(5,150,105,.18); }
    .why-card:hover .wi-3 { box-shadow: 0 8px 24px rgba(6,182,212,.18); }
    .why-card:hover .wi-4 { box-shadow: 0 8px 24px rgba(192,57,43,.18); }

    /* Card number badge */
    .why-card-num {
      position: absolute;
      top: 22px; right: 22px;
      font-family: var(--font-display);
      font-size: 11px; font-weight: 800;
      letter-spacing: .06em;
      color: var(--slate-300);
      transition: color .3s ease;
      z-index: 1;
    }
    .why-card:hover .why-card-num { color: var(--slate-400); }

    .why-card-title {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 700;
      color: var(--brand-navy);
      margin-bottom: 10px;
      position: relative; z-index: 1;
      line-height: 1.3;
    }
    .why-card-desc {
      font-size: 14px;
      color: var(--slate-500);
      line-height: 1.74;
      position: relative; z-index: 1;
      margin-bottom: 22px;
    }

    /* Feature pills */
    .why-pills {
      display: flex; flex-wrap: wrap; gap: 6px;
      position: relative; z-index: 1;
    }
    .why-pill {
      font-size: 10px; font-weight: 700;
      font-family: var(--font-display);
      padding: 4px 10px; border-radius: 100px;
      letter-spacing: .04em;
      transition: all .2s ease;
    }
    .wp-navy { background: var(--blue-100); color: var(--brand-navy); }
    .wp-green { background: #d1fae5; color: #047857; }
    .wp-cyan  { background: #cffafe; color: #0e7490; }
    .wp-red   { background: var(--red-100); color: var(--brand-red); }
    .why-card:hover .why-pill { filter: brightness(.96) saturate(1.1); }

    /* Bottom decorative number watermark */
    .why-card-watermark {
      position: absolute;
      bottom: -18px; right: 14px;
      font-family: var(--font-display);
      font-size: 88px; font-weight: 900;
      color: rgba(26,35,126,.03);
      line-height: 1;
      pointer-events: none;
      transition: all .4s ease;
      letter-spacing: -.05em;
    }
    .why-card:hover .why-card-watermark { color: rgba(26,35,126,.055); transform: scale(1.05); }

    /* ═══════════════════════════════════════  CTA - Light Modern SaaS */
    .df-cta {
      background: #f0f4ff;
      position:relative; overflow:hidden; text-align:center; padding:120px 0;
    }
    /* Soft radial color washes */
    .df-cta::before {
      content:'';
      position:absolute; inset:0;
      background:
        radial-gradient(ellipse 60% 70% at 50% -10%, rgba(26,35,126,.1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 10% 100%, rgba(192,57,43,.07) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 90% 90%, rgba(6,182,212,.08) 0%, transparent 60%);
      pointer-events:none;
    }
    /* Dot grid overlay */
    .df-cta::after {
      content:'';
      position:absolute; inset:0;
      background-image: radial-gradient(rgba(26,35,126,.06) 1.5px, transparent 1.5px);
      background-size: 28px 28px;
      pointer-events:none;
    }
    /* Frosted card container */
    .cta-inner {
      position:relative; z-index:1;
      background: rgba(255,255,255,.7);
      border: 1px solid rgba(26,35,126,.1);
      border-radius: 28px;
      padding: 72px 64px;
      backdrop-filter: blur(20px);
      box-shadow: 0 24px 80px rgba(26,35,126,.12), 0 2px 0 rgba(255,255,255,.8) inset;
      max-width: 860px;
      margin: 0 auto;
    }
    .cta-title { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,5vw,52px); line-height:1.12; letter-spacing:-.03em; color:var(--brand-navy); margin-bottom:18px; }
    .cta-sub   { font-size:18px; color:var(--slate-600); max-width:520px; margin:0 auto 40px; line-height:1.75; }
    .cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
    .cta-trust { display:flex; align-items:center; justify-content:center; gap:28px; margin-top:44px; flex-wrap:wrap; padding-top:32px; border-top:1px solid rgba(26,35,126,.1); }
    .cta-ti { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--slate-600); }
    .cta-ti i { font-size:14px; color:var(--brand-navy); }

    /* ═══════════════════════════════════════  FOOTER */
    .df-footer { background:#020617; padding:72px 0 36px; }
    .footer-top { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px; }
    .footer-logo { display:block; margin-bottom:18px; }
    .footer-logo img { height:30px; width:auto; }
    .footer-tagline { font-size:13px; /*color:var(--slate-600);*/ color: #e6e6e6; line-height:1.65; margin-bottom:26px; max-width:260px; }
    .footer-social { display:flex; gap:10px; }
    .footer-social a { width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:var(--slate-500); transition:all var(--t) var(--ease); }
    .footer-social a:hover { background:var(--blue); color:var(--white); border-color:var(--blue); }
    .footer-social a i { font-size:15px; }
    .footer-col-title { font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-400); margin-bottom:18px; }
    .footer-links { display:flex; flex-direction:column; gap:11px; }
    .footer-links a { font-size:14px; color:#e6e6e6; transition:color var(--t) var(--ease); }
    .footer-links a:hover { color:var(--white); }
    .footer-contact { display:flex; flex-direction:column; gap:10px; }
    .footer-ci { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:#e6e6e6; }
    .footer-ci i { font-size:14px; color:var(--blue-light); flex-shrink:0; margin-top:1px; }
    .footer-divider { height:1px; background:rgba(255,255,255,.06); margin-bottom:28px; }
    .footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
    .footer-copy { font-size:13px; color:#e6e6e6; }
    .footer-legal { display:flex; gap:22px; }
    .footer-legal a { font-size:13px; color:#e6e6e6; transition:color var(--t) var(--ease); }
    .footer-legal a:hover { color:var(--white); }

    /* ═══════════════════════════════════════  ANIMATIONS */
    @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
    .anim { opacity:0; }
    .anim.in { animation:fadeUp .65s var(--ease) forwards; }
    .d1{animation-delay:.08s} .d2{animation-delay:.16s} .d3{animation-delay:.24s}
    .d4{animation-delay:.32s} .d5{animation-delay:.40s} .d6{animation-delay:.48s}

    /* ═══════════════════════════════════════  RESPONSIVE */
    @media(max-width:1100px){
      .hero-inner{grid-template-columns:1fr;gap:40px}
      .hero-anim{order:-1;height:500px}
      .hf-top,.hf-bot{display:none}
      .feat-grid{grid-template-columns:repeat(2,1fr)}
      .wf-inner{grid-template-columns:1fr;gap:48px}
      .bene-grid{grid-template-columns:1fr}
      .ind-grid{grid-template-columns:repeat(2,1fr)}
      .footer-top{grid-template-columns:1fr 1fr;gap:36px}
      .sustain-metrics{grid-template-columns:1fr 1fr}
      .why-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:768px){
/*      .df-nav-links,.df-nav-actions{display:none}*/
      .df-hamburger{display:flex}
      .df-mobile-menu.open{display:flex;flex-direction:column;gap:4px;position:fixed;top:68px;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);padding:24px;z-index:999;}
      .df-mobile-menu a{font-size:15px;font-weight:500;color:var(--slate-700);padding:13px 16px;border-radius:10px;transition:background var(--t) var(--ease)}
      .df-mobile-menu a:hover{background:var(--slate-100)}
      .df-mobile-menu .df-btn{margin-top:12px;justify-content:center}
      .feat-grid,.ind-grid{grid-template-columns:1fr}
      .footer-top{grid-template-columns:1fr}
      .footer-bottom{flex-direction:column;text-align:center}
      .footer-legal{flex-wrap:wrap;justify-content:center}
      .comp-inner{flex-direction:column}
      .hero-anim{height:520px}
      .cloud-zone{display:block} .sa-3{display:none} .sl-4{display:block}
      .cloud-box { width: 75px; height: 87px;}
      .ai-brain { width: 60px; height: 85px;}
      .scanner-body { width: 65px; height: 81px;}
      .flying-doc { position: absolute; width: 32px; height: 42px; border-radius: 3px;}
      .paper-zone { width: 70px;}
      .paper-sheet {height: 68px;}
      .paper-stack {width: 55px;}
      .sl-1, .sl-2, .sl-3, .sl-4 {top: 140px;}
      .sl-2 {left: 30%;} .sl-1 {left: 5%;} .sl-4 {left: 76%;}
      .hero-inner{padding: 72px 24px 0px;}
      .trusted-logos {gap:20px;} .tlogo {font-size: 10px;}
      .py-section, .df-cta {padding: 70px 0 !important;}
      .cbadge {width: 100%;}
      .slabel { font-size: 6px;}
      .fly2 {top: 70px;}
      .result-cards {grid-template-columns: repeat(1, 1fr);}
      .ai-tag-1,.ai-tag-2,.ai-tag-3,.ai-tag-4{display:none}
      .sustain-grid{grid-template-columns:1fr}
      .sustain-metrics{grid-template-columns:1fr}
      .sustain-stats{flex-wrap:wrap;gap:14px}
      .why-grid{grid-template-columns:1fr}
    }
    @media(max-width:480px){
      section{padding:64px 0}
      .hero-actions{flex-direction:column}
      .hero-actions .df-btn{justify-content:center}
      .cta-actions{flex-direction:column;align-items:center}
      .hero-anim{height:520px;}
    }

    /* section padding helper */
    .py-section { padding: 100px 0; }
    .py-section-sm { padding: 64px 0; }

    /* ═══════════════════════════════════════
       AI INTELLIGENCE SECTION
    ═══════════════════════════════════════ */
    .df-ai-intel {
      position: relative;
      padding: 110px 0 120px;
      background: linear-gradient(160deg, #060d24 0%, #0c1a42 35%, #0a1230 65%, #050b1e 100%);
      overflow: hidden;
    }

    /* Background grid */
    .ai-intel-grid {
      position: absolute; inset: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(99,179,237,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,179,237,.04) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
    }

    /* Glow orbs */
    .ai-intel-orb {
      position: absolute; border-radius: 50%; pointer-events: none;
      filter: blur(80px); opacity: .55;
    }
    .ai-orb-1 {
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(26,35,126,.6) 0%, transparent 70%);
      top: -200px; left: -150px;
      animation: aiOrbFloat 14s ease-in-out infinite alternate;
    }
    .ai-orb-2 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(6,182,212,.3) 0%, transparent 70%);
      bottom: -100px; right: -80px;
      animation: aiOrbFloat 11s ease-in-out infinite alternate-reverse;
    }
    .ai-orb-3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, rgba(192,57,43,.25) 0%, transparent 70%);
      top: 40%; left: 55%;
      animation: aiOrbFloat 9s ease-in-out infinite alternate;
    }
    @keyframes aiOrbFloat {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(40px,-40px) scale(1.12); }
    }

    /* Header */
    .ai-intel-header {
      text-align: center;
      margin-bottom: 72px;
    }
    .ai-intel-title {
      font-family: var(--font-display);
      font-size: clamp(32px, 4.5vw, 54px);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -.03em;
      color: var(--white);
      margin-bottom: 20px;
    }
    .ai-title-glow {
      background: linear-gradient(135deg, #60a5fa 0%, #06b6d4 50%, #34d399 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      filter: drop-shadow(0 0 20px rgba(96,165,250,.4));
    }
    .ai-intel-sub {
      font-size: 17px; line-height: 1.8;
      color: rgba(255,255,255,.55);
      max-width: 580px; margin: 0 auto;
    }

    /* Body layout */
    .ai-intel-body {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 40px;
      align-items: start;
      margin-bottom: 64px;
    }

    /* ── LEFT: Stat Panel ── */
    .ai-stat-panel {
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 24px;
      padding: 36px 32px;
      backdrop-filter: blur(12px);
      position: relative;
      overflow: hidden;
    }
    .ai-stat-panel::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(26,35,126,.15) 0%, transparent 60%);
      pointer-events: none;
    }

    .ai-stat-item {
      display: grid;
      grid-template-columns: 44px 1fr;
      grid-template-rows: auto auto auto;
      column-gap: 16px;
      row-gap: 2px;
      margin-bottom: 28px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .ai-stat-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .ai-stat-icon {
      grid-row: 1 / 3;
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(26,35,126,.5);
      border: 1px solid rgba(99,130,250,.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: #818cf8;
      box-shadow: 0 0 18px rgba(99,130,250,.15);
    }
    .ai-si-cyan { background: rgba(6,182,212,.12); border-color: rgba(6,182,212,.25); color: #22d3ee; box-shadow: 0 0 18px rgba(6,182,212,.15); }
    .ai-si-green { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); color: #34d399; box-shadow: 0 0 18px rgba(16,185,129,.15); }
    .ai-si-amber { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); color: #fbbf24; box-shadow: 0 0 18px rgba(245,158,11,.15); }

    .ai-stat-data {
      display: flex; align-items: baseline; gap: 2px;
    }
    .ai-stat-num {
      font-family: var(--font-display); font-weight: 800;
      font-size: 28px; color: var(--white); line-height: 1;
    }
    .ai-stat-suffix {
      font-family: var(--font-display); font-weight: 700;
      font-size: 18px; color: rgba(255,255,255,.6);
    }
    .ai-stat-label {
      font-size: 13px; color: rgba(255,255,255,.45); font-weight: 500;
      grid-column: 2;
    }
    .ai-stat-bar {
      grid-column: 1 / -1;
      height: 4px; border-radius: 2px;
      background: rgba(255,255,255,.07);
      margin-top: 10px; overflow: hidden;
    }
    .ai-stat-fill {
      height: 100%; border-radius: 2px; width: 0;
      background: linear-gradient(90deg, #4f6ef7, #818cf8);
      transition: width 1.4s cubic-bezier(.4,0,.2,1);
    }
    .ai-fill-cyan { background: linear-gradient(90deg, #0e7490, #22d3ee); }
    .ai-fill-green { background: linear-gradient(90deg, #065f46, #34d399); }
    .ai-fill-amber { background: linear-gradient(90deg, #92400e, #fbbf24); }
    .ai-stat-item.counted .ai-stat-fill { width: var(--fill); }

    /* Live badge */
    .ai-live-badge {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 24px;
      padding: 8px 16px;
      border-radius: 100px;
      background: rgba(16,185,129,.1);
      border: 1px solid rgba(16,185,129,.2);
      font-size: 12px; font-weight: 600; font-family: var(--font-display);
      color: #34d399; letter-spacing: .04em;
    }
    .ai-live-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 8px #34d399;
      animation: livePulse 1.6s ease-in-out infinite;
    }
    @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

    /* ── RIGHT: Capability Cards ── */
    .ai-caps-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .ai-cap-card {
      position: relative;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 20px;
      padding: 28px 24px;
      overflow: hidden;
      transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
      cursor: default;
    }
    .ai-cap-card:hover {
      transform: translateY(-6px);
      border-color: rgba(96,165,250,.25);
      box-shadow: 0 20px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(96,165,250,.1);
    }
    .ai-cap-card:hover .ai-cap-glow { opacity: 1; }

    .ai-cap-glow {
      position: absolute; inset: 0; pointer-events: none;
      border-radius: 20px; opacity: 0;
      transition: opacity .28s ease;
    }
    .aci-glow-1 { background: radial-gradient(circle at 50% 0%, rgba(129,140,248,.12) 0%, transparent 60%); }
    .aci-glow-2 { background: radial-gradient(circle at 50% 0%, rgba(34,211,238,.1) 0%, transparent 60%); }
    .aci-glow-3 { background: radial-gradient(circle at 50% 0%, rgba(52,211,153,.1) 0%, transparent 60%); }
    .aci-glow-4 { background: radial-gradient(circle at 50% 0%, rgba(251,191,36,.1) 0%, transparent 60%); }

    .ai-cap-icon {
      width: 46px; height: 46px;
      border-radius: 13px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; margin-bottom: 18px;
    }
    .aci-1 { background: rgba(99,130,250,.15); color: #818cf8; border: 1px solid rgba(99,130,250,.25); }
    .aci-2 { background: rgba(6,182,212,.12); color: #22d3ee; border: 1px solid rgba(6,182,212,.25); }
    .aci-3 { background: rgba(52,211,153,.12); color: #34d399; border: 1px solid rgba(52,211,153,.25); }
    .aci-4 { background: rgba(251,191,36,.1); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }

    .ai-cap-tag {
      font-family: var(--font-display); font-size: 10px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.35); margin-bottom: 6px;
    }
    .ai-cap-title {
      font-family: var(--font-display); font-size: 15px; font-weight: 700;
      color: var(--white); margin-bottom: 10px; line-height: 1.3;
    }
    .ai-cap-desc {
      font-size: 13px; line-height: 1.7;
      color: rgba(255,255,255,.45);
      margin: 0;
    }

    /* ── Lifecycle Timeline ── */
    .ai-lifecycle {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 20px;
      padding: 32px 40px;
    }
    .ai-lc-label {
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.3); margin-bottom: 24px; text-align: center;
    }
    .ai-lc-track {
      display: flex; align-items: center; justify-content: center;
    }
    .ai-lc-step {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    .ai-lc-node {
      width: 52px; height: 52px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 19px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      transition: transform .28s ease, box-shadow .28s ease;
    }
    .ai-lc-node:hover { transform: scale(1.15); }
    .aln-1 { color: #818cf8; border-color: rgba(129,140,248,.3); box-shadow: 0 0 16px rgba(129,140,248,.2); }
    .aln-2 { color: #22d3ee; border-color: rgba(34,211,238,.3); box-shadow: 0 0 16px rgba(34,211,238,.2); }
    .aln-3 { color: #60a5fa; border-color: rgba(96,165,250,.3); box-shadow: 0 0 16px rgba(96,165,250,.2); }
    .aln-4 { color: #34d399; border-color: rgba(52,211,153,.3); box-shadow: 0 0 16px rgba(52,211,153,.2); }
    .aln-5 { color: #fbbf24; border-color: rgba(251,191,36,.3); box-shadow: 0 0 16px rgba(251,191,36,.2); }
    .ai-lc-text {
      font-family: var(--font-display); font-size: 12px; font-weight: 600;
      color: rgba(255,255,255,.45); letter-spacing: .04em;
    }
    .ai-lc-line {
      flex: 1; height: 2px;
      background: rgba(255,255,255,.06);
      position: relative; overflow: hidden;
      margin: 0 8px; min-width: 40px;
    }
    .ai-lc-flow {
      position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(96,165,250,.6), transparent);
      animation: lcFlow 2.4s ease-in-out infinite;
    }
    @keyframes lcFlow { 0%{left:-100%} 100%{left:100%} }

    /* Responsive */
    @media(max-width:991px) {
      .ai-intel-body { grid-template-columns: 1fr; }
      .ai-lc-track { flex-wrap: wrap; gap: 16px; justify-content: center; }
      .ai-lc-line { display: none; }
    }
    @media(max-width:600px) {
      .ai-caps-grid { grid-template-columns: 1fr; }
      .ai-lifecycle { padding: 28px 20px; }
    }




/* DocuForte SEO Silo Pages - based on provided design */
.silo-hero{min-height:92vh;padding:120px 0 70px;background:linear-gradient(135deg,#f0f4ff 0%,#fff7f7 45%,#eef6ff 100%);position:relative;overflow:hidden}
.silo-hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(26,35,126,.16),transparent 68%);top:-230px;left:-160px;filter:blur(20px)}
.silo-hero:after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(192,57,43,.13),transparent 70%);right:-140px;bottom:-180px;filter:blur(30px)}
.silo-wrap{position:relative;z-index:1}.breadcrumb-lite{font-size:13px;color:var(--slate-500);margin-bottom:26px}.breadcrumb-lite a{color:var(--brand-navy);font-weight:700}.silo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}.silo-kicker{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--slate-200);border-radius:999px;padding:7px 15px;font-size:12px;font-weight:800;color:var(--brand-navy);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 20px rgba(15,23,42,.07)}.silo-h1{font-family:var(--font-display);font-size:clamp(36px,3.4vw,64px);line-height:1.05;letter-spacing:-.04em;color:var(--brand-navy);font-weight:800;margin:24px 0 20px}.silo-h1 span{background:linear-gradient(135deg,var(--brand-red),#e91e63);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.silo-lead{font-size:18px;line-height:1.8;color:#243047;max-width:720px}.silo-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.proof-card{background:rgba(255,255,255,.75);border:1px solid rgba(26,35,126,.12);border-radius:16px;padding:16px;box-shadow:0 8px 26px rgba(15,23,42,.07);backdrop-filter:blur(8px)}.proof-card strong{display:block;color:var(--brand-navy);font-size:18px;font-family:var(--font-display)}.proof-card span{font-size:13px;color:var(--slate-500)}.silo-panel{background:rgba(255,255,255,.82);border:1px solid rgba(26,35,126,.12);border-radius:26px;padding:26px;box-shadow:0 26px 80px rgba(26,35,126,.14);backdrop-filter:blur(10px)}.panel-title{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--brand-navy);margin-bottom:18px}.mini-row{display:flex;gap:14px;padding:17px 0;border-top:1px solid var(--slate-200)}.mini-row:first-of-type{border-top:0}.mini-row i{width:42px;height:42px;border-radius:13px;background:var(--blue-50);color:var(--brand-navy);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}.mini-row b{color:var(--slate-900);font-family:var(--font-display)}.mini-row p{margin:4px 0 0;color:var(--slate-500);font-size:14px;line-height:1.55}
.content-section{padding:50px 0}
.soft-section{background:linear-gradient(180deg,#fff,var(--slate-50))}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.story-card,.seo-card,.faq-box{background:#fff;border:1px solid var(--slate-200);border-radius:24px;padding:30px;box-shadow:0 16px 45px rgba(15,23,42,.06)}.story-card h2,.seo-card h2,.silo-section-title{font-family:var(--font-display);font-weight:800;color:var(--brand-navy);letter-spacing:-.025em}.story-card p,.seo-card p,.silo-copy,.faq-box p{font-size:16px;line-height:1.78;color:var(--slate-600)}.benefit-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.benefit{background:#fff;border:1px solid var(--slate-200);border-radius:22px;padding:24px;box-shadow:0 12px 36px rgba(15,23,42,.05);transition:.22s ease}.benefit:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(26,35,126,.10)}
.benefit i{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5b7cff,#26c6da);color:#fff;font-size:20px;margin-bottom:16px}
.benefit h3{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--brand-navy)}
.benefit p{font-size:15px;line-height:1.68;color:var(--slate-500)}.silo-nav-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.silo-nav-list a{padding:10px 14px;border-radius:999px;background:var(--blue-50);border:1px solid var(--blue-100);color:var(--brand-navy);font-weight:700;font-size:13px}.faq-box{margin-bottom:14px;padding:22px}.faq-box h3{font-family:var(--font-display);font-size: 16px;
    /* font-weight: 800; */
    color:var(--brand-navy)}.cta-band{border-radius:28px;padding:38px;background:linear-gradient(135deg,var(--brand-navy),var(--blue));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 24px 70px rgba(26,35,126,.28)}.cta-band h2{font-family:var(--font-display);font-weight:800}.cta-band p{color:rgba(255,255,255,.75);margin:0}.df-footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:30px 0}.human-note{background:linear-gradient(135deg,#fff,var(--red-50));border:1px solid var(--red-100);border-radius:20px;padding:22px;margin-top:20px}.human-note strong{color:var(--brand-red)}@media(max-width:991px){.silo-grid,.two-col{grid-template-columns:1fr}.benefit-list{grid-template-columns:1fr 1fr}.silo-proof{grid-template-columns:1fr}.silo-panel{margin-top:10px}.cta-band{flex-direction:column;align-items:flex-start}}@media(max-width:575px){.benefit-list{grid-template-columns:1fr}.content-section{padding:58px 0}.silo-hero{padding-top:100px}.story-card,.seo-card{padding:22px}.silo-h1{font-size:36px}}





/*common navbar*/

/******************************************************************
     * Theme variables & defaults (Light theme is the default)
     *
     * Rules:
     *  - Use CSS variables everywhere for colors and surfaces.
     *  - Toggling dark <-> light is achieved by adding/removing
     *    the `dark-mode` class on the <body>.
     *  - The hero section is excluded from variable-driven theming
     *    and keeps its hard-coded original styling via `.hero-section`.
     ******************************************************************/

    /* --- Base variables (Light theme default) --- */
    :root{
      /* global */
      /*--bg: #FFFFFF; */                    /* page background (light default) */
      --text-primary: #0c172a;           /* primary text (dark blue) */
      --text-muted: #6c757d;
      --accent: #11204e;                 /* primary brand blue */
      --accent-2: #26c6da;
      --danger: #e31e24;
      --yellow: #ffc107;

      /* content boxes (cards/sections inside body) */
      --content-bg: #F0F0F0;             /* .content-box background (light) */
      --content-border: rgba(0,0,0,0.06);

      /* card / neutral surfaces */
      --card-bg: #ffffff;
      --card-shadow: 0 10px 30px rgba(20,30,60,0.06);

      /* UI */
      --glass-blur: 12px;

      /* transitions */
      --ease-fast: cubic-bezier(.2,.9,.3,1);

      /* accessible focus outline */
      --focus-ring: 3px solid rgba(81,90,255,0.18);
    }

    /* --- Dark Mode overrides (applied with body.dark-mode) --- */
    body.dark-mode {
      --bg: #09132c;                     /* page background (dark) */
      --text-primary: #F5F5F5;           /* primary text (light) */
      --text-muted: #aebfd4;
      --accent: #09132c;
      --accent-2: #26c6da;
      --danger: #e31e24;


      --content-bg: #1E1E1E;             /* .content-box in dark mode */
      --content-border: rgba(255,255,255,0.04);

      --card-bg: rgba(255,255,255,0.03);
      --card-shadow: 0 10px 30px rgba(0,0,0,0.6);
    }

    /* --- Global page layout --- */
    :root, body, html { height: 100%; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background-color: var(--bg);
      color: var(--text-primary);
      transition: background-color .36s var(--ease-fast), color .36s var(--ease-fast);
    }

    /* ensure hero section is preserved exactly the same:
       any variable changes must not affect hero visual. */
    .hero-section {
      /* Hero keeps original hard-coded styling: we set forced background and text.
         Use !important to make sure theme variables don't change it. */
      background:
        radial-gradient(1000px 600px at 10% 10%, rgba(38,198,218,.12), transparent 60%),
        radial-gradient(800px 500px at 90% 20%, rgba(91,124,255,.12), transparent 55%),
        linear-gradient(135deg, #09132c 0%, #11204e 100%) !important;
      color: #f0f4f9 !important;
    }

    /* NAVBAR: adapt to theme */
    .navbar {
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) ;
      transition: background-color .36s var(--ease-fast), box-shadow .36s var(--ease-fast);
    }
    body:not(.dark-mode) .navbar { /* light navbar polish for light theme */
/*      background: rgba(255,255,255,0.6);*/
      background: #fff;
      backdrop-filter: blur(6px);
    }
    body.dark-mode .navbar {
      /*background: var(--accent);
      color: var(--text-primary);*/
      background: #fff;
      color: #000;
      box-shadow: 0 6px 16px rgba(8,10,20,0.25);
    }
    body.dark-mode p { color: #fff !important; }

    .navbar .nav-link { color: inherit; }
    .navbar .btn:focus { outline: none; box-shadow: var(--focus-ring); border-radius: 999px; }

    /* primary content container helper */
    .container-card {
      background: var(--card-bg);
      border: 1px solid var(--content-border);
/*      box-shadow: var(--card-shadow);*/
      border-radius: 14px;
      padding: 1.5rem;
      transition: background-color .36s var(--ease-fast), transform .25s var(--ease-fast);
    }

    /* content-box special rule (responds to theme variables) */
    .content-box {
/*      background: var(--content-bg);*/
/*      border: 1px solid var(--content-border);*/
      padding: 1.2rem;
      border-radius: 12px;
      transition: background-color .36s var(--ease-fast), border-color .36s var(--ease-fast);
      color: var(--text-primary);
    }

    /* Preserve your existing hero look for nested elements too */
    .hero-section .card, .hero-section .brand-glow, .hero-section .float-anim {
      /* keep hero internal styling unchanged */
    }

    /* particle container (full hero) - keep pointer-events none */
    #particles-js, #particles-green { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; mix-blend-mode: screen; }




/*    common footer*/
/* footer */
    footer{ 
/*      background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); */
      background: linear-gradient(135deg, var(--accent), #0e2274);
      color: #fff; 
      padding-top:2.5rem; 
      padding-bottom:1.5rem; 
    }
    footer a { color: inherit; text-decoration: none; }

    /* responsive tweaks */
    @media (max-width: 767px){
      .icon-pill{ width:48px; height:48px; }
      .hero{ padding-top:7.5rem; padding-bottom:4.5rem; }
      .navbar-brand img {width: 180px;}
      #particles-js { opacity: .35; }
      .navbar-brand img {width: 180px;}
    }

    /* reduce motion preference */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
    }

    /* small typographic scales */
    h1 { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.05; }
    h2 { font-size: clamp(1.25rem, 2vw, 1.9rem); }
    p.lead { font-size: 1.05rem; color: var(--text-muted); }

    /* utility: visually-hidden (for accessible labels) */
    .visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

   /* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  z-index: 9999;
}
.accessibility-bar .font-controls button:hover {
  background-color: #ffc107;
  border-color: #ffc107;
}

/* Font size classes */
.font-small {
  font-size: 90%;
}

.font-normal {
  font-size: 100%;
}

.font-large {
  font-size: 115%;
}