:root {
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 20px;
   --radius-pill: 9999px;

   --gradient-start: #2563eb;
   --gradient-end: #7c3aed;
   --accent-blue: #2563eb;
   --accent-success: #059669;
   --accent-warning: #d97706;
   --accent-error: #dc2626;
   --accent-cng: #6d28d9;

   --bg-base: #f8fafc;
   --bg-light: #f1f5f9;
   --bg-lighter: #ffffff;
   --text-primary: #0f172a;
   --text-secondary: #475569;
   --text-muted: #94a3b8;
   --border: rgba(15, 23, 42, 0.08);
   --glass-bg: rgba(255, 255, 255, 0.82);
   --glass-border: rgba(15, 23, 42, 0.10);
   --glow-blue: rgba(37, 99, 235, 0.18);
   --glow-purple: rgba(109, 40, 217, 0.15);

   --nav-h: 68px;
   --lighthouse-glow-strong: rgba(37, 99, 235, 0.8);
   --lighthouse-glow-soft: rgba(37, 99, 235, 0.4);
 }

 [data-theme="dark"] {
   --gradient-start: #60a5fa;
   --gradient-end: #a78bfa;
   --accent-blue: #3b82f6;
   --accent-success: #10b981;
   --accent-warning: #f59e0b;
   --accent-error: #ef4444;
   --accent-cng: #8b5cf6;
   --bg-base: #0b0e14;
   --bg-light: #151a23;
   --bg-lighter: #1d2430;
   --text-primary: #f1f5f9;
   --text-secondary: #94a3b8;
   --text-muted: #64748b;
   --border: rgba(255, 255, 255, 0.08);
   --glass-bg: rgba(21, 26, 35, 0.80);
   --glass-border: rgba(255, 255, 255, 0.10);
   --glow-blue: rgba(59, 130, 246, 0.25);
   --glow-purple: rgba(139, 92, 246, 0.25);
   --lighthouse-glow-strong: rgba(96, 165, 250, 0.6);
   --lighthouse-glow-soft: rgba(96, 165, 250, 0.25);
 }

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

 html, body {
   scroll-behavior: smooth;
   font-size: 16px;
   overflow-x: hidden;
   width: 100%;
   position: relative;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: var(--bg-base);
   color: var(--text-primary);
   line-height: 1.6;
   transition: background .4s, color .4s;
 }

 ::selection {
   background: rgba(96, 165, 250, .22);
   color: var(--text-primary)
 }

 ::-webkit-scrollbar {
   width: 5px
 }

 ::-webkit-scrollbar-track {
   background: var(--bg-base)
 }

 ::-webkit-scrollbar-thumb {
   background: var(--gradient-end);
   border-radius: 99px
 }

 img,
 svg {
   display: block
 }

 a {
   color: inherit;
   text-decoration: none
 }

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

 section {
   position: relative;
   z-index: 1;
   padding: 96px 0
 }

 @media (max-width: 480px) {
   section {
     padding: 56px 0
   }
 }

 .section-alt {
   background: var(--bg-light)
 }

 [data-theme="dark"] .section-alt {
   background: #10141c
 }

 .gradient-text {
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .pro-cycle {
   display: inline-block;
   vertical-align: baseline;
   overflow: visible;
   line-height: inherit;
   transition: opacity .3s ease;
 }

 .section-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
   font-family: 'Copperplate Bold', 'Copperplate', serif;
   font-size: .85rem;
   font-weight: 900;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--gradient-start);
   margin-bottom: 18px;
 }

 .section-title {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(1.9rem, 3.8vw, 2.9rem);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -.025em;
   margin-bottom: 14px;
   color: var(--text-primary);
 }

 .section-subtitle {
   font-size: 1.05rem;
   color: var(--text-secondary);
   line-height: 1.75;
   max-width: 560px
 }

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

 .section-header .section-subtitle {
   margin: 0 auto
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 26px;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   color: #fff;
   font-family: 'Inter', sans-serif;
   font-size: .92rem;
   font-weight: 600;
   border: none;
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: transform .22s, box-shadow .22s;
   box-shadow: 0 4px 18px var(--glow-blue);
   position: relative;
   overflow: hidden;
 }

 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent);
   opacity: 0;
   transition: opacity .2s
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 28px var(--glow-purple)
 }

 .btn-primary:hover::before {
   opacity: 1
 }

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

 .btn-lg {
   padding: 15px 32px;
   font-size: 1rem
 }

 .btn-xl {
   padding: 16px 36px;
   font-size: 1rem
 }

 .btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 24px;
   background: transparent;
   color: var(--text-secondary);
   font-family: 'Inter', sans-serif;
   font-size: .92rem;
   font-weight: 500;
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-pill);
   cursor: pointer;
   transition: background .2s, border-color .2s, color .2s, transform .2s;
 }

 .btn-ghost:hover {
   background: var(--bg-light);
   border-color: var(--accent-blue);
   color: var(--text-primary);
   transform: translateY(-1px)
 }

 .btn-ghost.btn-lg {
   padding: 14px 30px;
   font-size: 1rem
 }

 .btn-ghost.btn-xl {
   padding: 15px 34px;
   font-size: 1rem
 }

 .glass-card {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px)
 }

 .glow-border {
   position: relative
 }

 .glow-border::after {
   content: '';
   position: absolute;
   inset: -1px;
   border-radius: calc(var(--radius-lg) + 1px);
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   opacity: 0;
   z-index: -1;
   filter: blur(12px);
   transition: opacity .4s
 }

 .glow-border:hover::after {
   opacity: .35
 }

 .bg-orbs {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   overflow: hidden
 }

 .orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(120px);
   opacity: .12;
   animation: orbFloat 24s ease-in-out infinite
 }

 [data-theme="dark"] .orb {
   opacity: .18
 }

 .orb-1 {
   width: 600px;
   height: 600px;
   background: var(--gradient-start);
   top: -200px;
   left: -200px;
   animation-delay: 0s
 }

 .orb-2 {
   width: 500px;
   height: 500px;
   background: var(--gradient-end);
   top: 30%;
   right: -160px;
   animation-delay: -9s
 }

 .orb-3 {
   width: 380px;
   height: 380px;
   background: var(--accent-success);
   bottom: 15%;
   left: 5%;
   animation-delay: -17s
 }

 @keyframes orbFloat {

   0%,
   100% {
     transform: translate(0, 0) scale(1)
   }

   33% {
     transform: translate(28px, -36px) scale(1.05)
   }

   66% {
     transform: translate(-18px, 18px) scale(.97)
   }
 }

 nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 14px 0;
   transition: background .3s, padding .3s, border-color .3s
 }

 nav.scrolled {
   background: var(--glass-bg);
   border-bottom: 1px solid var(--glass-border);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   padding: 9px 0
 }

 .nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between
 }

 .nav-logo {
   display: flex;
   align-items: center;
   gap: 9px
 }

 .nav-logo-mark {
   width: 34px;
   height: 34px;
   border-radius: 9px;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 14px var(--glow-purple)
 }

 .nav-logo-mark svg {
   width: 18px;
   height: 18px
 }

 .nav-logo-text {
   font-family: 'Outfit', sans-serif;
   font-size: 1.45rem;
   font-weight: 800;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 28px;
   list-style: none
 }

 .nav-links a {
   font-size: .88rem;
   font-weight: 500;
   color: var(--text-secondary);
   transition: color .2s
 }

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

 .nav-actions {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .theme-toggle {
   width: 38px;
   height: 38px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--glass-border);
   background: var(--glass-bg);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-secondary);
   transition: all .2s
 }

 .theme-toggle:hover {
   color: var(--text-primary);
   border-color: var(--accent-blue)
 }

 .nav-btn-login {
   padding: 7px 18px;
   font-size: .85rem;
   border-radius: var(--radius-pill);
   border: 1px solid var(--glass-border);
   background: transparent;
   color: var(--text-secondary);
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   transition: all .2s
 }

 .nav-btn-login:hover {
   color: var(--text-primary);
   border-color: var(--accent-blue);
   background: rgba(37, 99, 235, .06)
 }

 .nav-btn-cta {
   padding: 8px 18px;
   font-size: .85rem
 }

 .hamburger {
   display: none;
   flex-direction: column;
   gap: 5px;
   cursor: pointer;
   padding: 8px;
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   background: transparent
 }

 .hamburger span {
   display: block;
   width: 20px;
   height: 2px;
   background: var(--text-secondary);
   border-radius: 2px;
   transition: all .3s
 }

 @media(max-width:768px) {

   .nav-links,
   .nav-btn-login,
   .nav-btn-cta {
     display: none
   }

   .hamburger {
     display: flex
   }
 }

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

 .mobile-menu {
   display: none;
   position: fixed;
   inset: 0;
   background: var(--bg-base);
   z-index: 999;
   padding: 80px 24px 40px;
   flex-direction: column;
   gap: 4px;
   overflow-y: auto;
 }

 .mobile-menu .btn-primary {
   border-bottom: none;
   margin-top: 32px;
   font-size: 1.1rem;
   font-weight: 600;
   padding: 16px;
   color: #ffffff !important;
   justify-content: center;
 }

 .mobile-menu.open {
   display: flex;
 }

 .mobile-menu a,
 .mobile-dropdown-header {
   font-family: 'Outfit', sans-serif;
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--text-primary);
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
   transition: color .2s;
   text-decoration: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .mobile-dropdown-header {
   cursor: pointer;
 }

 .mobile-menu a:hover,
 .mobile-dropdown-header:hover {
   color: var(--gradient-start);
 }

 .mobile-dropdown-content {
   display: none;
   flex-direction: column;
   padding-left: 20px;
   padding-top: 12px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--border);
 }

 .mobile-dropdown-content.expanded {
   display: flex;
 }

 .mobile-dropdown-content a {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--text-primary);
   padding: 12px 0;
   border-bottom: none;
 }

 .mobile-menu-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background: transparent;
   border: none;
   font-size: 1.4rem;
   color: var(--text-muted);
   cursor: pointer
 }

 .animate-in {
   opacity: 0;
   transform: translateY(24px);
   animation: fadeInUp .65s ease forwards
 }

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

 .hero-split {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: calc(var(--nav-h) + 80px) 0 72px;
   position: relative;
   z-index: 1;
 }

 .hero-container-split {
   max-width: 1320px;
   margin: 0 auto;
   padding: 0 24px;
   display: grid;
   grid-template-columns: 1fr 1.14fr;
   gap: 44px;
   align-items: center;
 }

 @media (max-width: 960px) {
   .hero-container-split {
     grid-template-columns: 1fr;
     text-align: center;
     gap: 40px;
   }
 }

 .hero-content-left {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
 }

 @media (max-width: 960px) {
   .hero-content-left {
     align-items: center;
     text-align: center;
   }

   .hero-content-left .hero-brand-block,
   .hero-content-left .hero-actions,
   .hero-content-left .hero-social-proof {
     justify-content: center;
   }
 }

 .hero-content-left .hero-brand-block {
   margin-bottom: 28px;
 }

 .hero-visual-right {
   position: relative;
   width: 100%;
   height: 600px;
 }

 .hero-cards-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   transform: translate(-50%, -50%);
 }

 @media (max-width: 480px) {
   .hero-visual-right {
     height: 440px
   }
 }

 .hero-globe-card {
   position: absolute;
   top: 50%;
   left: 4%;
   width: 128%;
   aspect-ratio: 1 / 1;
   transform: translateY(-50%);
   z-index: 2;
   pointer-events: none;
   animation: globeBreathe 7s ease-in-out infinite;
 }

 .hero-globe-orb {
   position: relative;
   width: 100%;
   height: 100%;
 }

 #heroGlobeCanvas {
   display: block;
   width: 100%;
   height: 100%;
 }

 .hero-globe-caption {
   position: absolute;
   right: 2%;
   bottom: -3%;
   z-index: 10;
   display: flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   padding: 8px 16px;
   border-radius: var(--radius-pill);
   font-size: .76rem;
   font-weight: 700;
   color: var(--text-primary);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
 }

 .hero-globe-caption .dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--accent-success);
   box-shadow: 0 0 0 3px var(--glow-blue);
   flex-shrink: 0;
 }

 @keyframes globeBreathe {

   0%,
   100% {
     transform: translateY(-50%) scale(1);
   }

   50% {
     transform: translateY(-50%) scale(1.03);
   }
 }

 @media (max-width: 1240px) {
   .hero-globe-card {
     left: -6%;
     width: 118%;
   }
 }

 @media (max-width: 960px) {

   /* Keep the spinning globe on tablet/mobile too, sized to fit the
      wrapper (left offset centers it — transform stays translateY so the
      globeBreathe animation isn't broken). */
   .hero-globe-card {
     display: block;
     left: 4%;
     width: 92%;
   }

   .hero-globe-caption {
     display: none;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .hero-globe-card {
     animation: none;
   }
 }

 .hero-visual-card.card-top-right {
   position: absolute;
   top: 2%;
   right: 20%;
   width: 58%;
   z-index: 1;
   transform: scale(0.85);
   opacity: 0.6;
   pointer-events: none;
 }

 .hero-visual-card.card-bot-right {
   position: absolute;
   bottom: 2%;
   right: 20%;
   width: 58%;
   z-index: 2;
   transform: scale(0.85);
   opacity: 0.6;
   pointer-events: none;
 }

 .hero-visual-card.card-mid-left {
   position: absolute;
   top: 50%;
   left: -5%;
   width: 80%;
   z-index: 4;
   transform: translateY(-50%);
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
   padding: 0;
 }

 @media (max-width: 1240px) {
   .hero-visual-card.card-mid-left {
     width: 88%;
   }

   .hero-visual-card.card-top-right,
   .hero-visual-card.card-bot-right {
     right: 8%;
     width: 62%;
   }
 }

 @media (max-width: 480px) {
   /* Mirror the desktop composition on phones: card on the LEFT (wider),
      globe big and bleeding off the right corner. */
   .hero-visual-card.card-mid-left {
     left: 50%;
     width: 380px;
     transform: translate(-50%, -50%) scale(.75);
     transform-origin: center center;
   }

   /* Overrides the ≤960 contained globe (this block is later in source). */
   .hero-globe-card {
     left: 20%;
     width: 160%;
   }
 }

 .hero-visual-card {
   background: var(--bg-lighter);
   border-radius: var(--radius-lg);
   padding: 0;
   overflow: visible;
 }

 .hero-visual-topbar {
   display: flex;
   gap: 8px;
   padding: 14px 18px;
   border-bottom: 1px solid var(--border);
   background: var(--bg-light);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 }

 .hero-visual-body {
   padding: 32px;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .h-stat-row {
   display: flex;
   justify-content: space-between;
 }

 .h-stat {
   display: flex;
   flex-direction: column;
   gap: 4px;
 }

 .h-label {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }

 .h-val {
   font-family: 'Outfit', sans-serif;
   font-size: 2.2rem;
   font-weight: 800;
   color: var(--text-primary);
 }

 .h-chart {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   height: 120px;
   margin-top: 10px;
 }

 .h-bar {
   flex: 1;
   background: var(--text-muted);
   opacity: 0.2;
   border-radius: 6px 6px 0 0;
 }

 .h-alert {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px;
   background: rgba(5, 150, 105, 0.1);
   border: 1px solid rgba(5, 150, 105, 0.2);
   border-radius: 12px;
   color: var(--accent-success);
   font-weight: 600;
   font-size: 0.95rem;
 }

 .hero-float-badge {
   position: absolute;
   padding: 12px 18px;
   border-radius: var(--radius-md);
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(16px);
   font-size: 0.85rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 10px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
   color: var(--text-primary);
   animation: floatBob 3.5s ease-in-out infinite;
 }

 .hfb-1 {
   bottom: -20px;
   right: -30px;
   animation-delay: 0s;
 }

 .hfb-2 {
   top: 40px;
   left: -40px;
   animation-delay: -1.5s;
 }

 #hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: calc(var(--nav-h) + 60px) 0 72px;
   position: relative;
   z-index: 1;
 }

 .hero-container {
   max-width: 820px;
   margin: 0 auto;
   text-align: center;
 }

 .hero-brand-block {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-bottom: 24px
 }

 .hero-logo-wrap {
   flex-shrink: 0
 }

 .hero-brand-text {
   text-align: center;
   width: 100%
 }

 .hero-brand-name {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(3rem, 7vw, 5.5rem);
   font-weight: 900;
   letter-spacing: -.02em;
   line-height: 1.2;
   display: flex;
   align-items: baseline;
   justify-content: center
 }

 .pro-wrapper {
   display: inline-block;
   width: 2.2em;
   text-align: left
 }

 .animated-pro {
   display: inline-block;
   transition: opacity 0.4s ease, transform 0.4s ease, font-size 0.4s ease;
   white-space: nowrap
 }

 .hero-brand-tagline {
   font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   font-weight: 500;
   color: var(--text-muted);
   letter-spacing: .01em;
   margin-top: 3px
 }

 .hero-headline {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(2.8rem, 6vw, 5.2rem);
   font-weight: 900;
   line-height: 1.04;
   letter-spacing: -.03em;
   color: var(--text-primary);
   margin-bottom: 22px;
 }

 .hero-subheadline {
   font-size: 1.15rem;
   color: var(--text-secondary);
   line-height: 1.75;
   margin-bottom: 30px
 }

 .br-desktop {
   display: block
 }

 @media(max-width:600px) {
   .br-desktop {
     display: none
   }
 }

 .hero-mission {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-left: 3px solid var(--gradient-start);
   border-radius: var(--radius-md);
   padding: 18px 22px;
   margin: 0 auto 36px;
   max-width: 680px;
   text-align: left;
 }

 .hero-mission-bar {
   width: 3px;
   height: 100%;
   background: linear-gradient(180deg, var(--gradient-start), var(--gradient-end));
   border-radius: 2px;
   flex-shrink: 0;
   display: none
 }

 .hero-mission p {
   font-size: .93rem;
   color: var(--text-secondary);
   line-height: 1.75
 }

 .hero-mission strong {
   color: var(--text-primary);
   font-weight: 700
 }

 .hero-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
   margin-bottom: 32px
 }

 .hero-social-proof {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin-bottom: 44px
 }

 .hero-avatars {
   display: flex
 }

 .hero-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid var(--bg-base);
   margin-left: -10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .65rem;
   font-weight: 700;
   color: white;
   font-family: 'Inter', sans-serif
 }

 .hero-avatars .hero-avatar:first-child {
   margin-left: 0
 }

 .av-blue {
   background: linear-gradient(135deg, #2563eb, #1d4ed8)
 }

 .av-green {
   background: linear-gradient(135deg, #059669, #047857)
 }

 .av-amber {
   background: linear-gradient(135deg, #d97706, #b45309)
 }

 .av-purple {
   background: linear-gradient(135deg, #7c3aed, #6d28d9)
 }

 .hero-social-proof p {
   font-size: .84rem;
   color: var(--text-muted)
 }

 .hero-social-proof strong {
   color: var(--text-secondary);
   font-weight: 600
 }

 .scroll-cue {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   color: var(--text-muted);
   font-size: .78rem;
   font-weight: 500
 }

 .scroll-arrow-anim {
   animation: bounceDown 2s ease-in-out infinite
 }

 @keyframes bounceDown {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(7px)
   }
 }

 #trust-bar {
   padding: 32px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   background: var(--bg-lighter);
   overflow: hidden;
   position: relative;
   z-index: 1
 }

 .trust-bar-label {
   text-align: center;
   font-size: .78rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--text-muted);
   margin-bottom: 20px
 }

 .logos-marquee {
   overflow: hidden;
   position: relative
 }

 .logos-marquee::before,
 .logos-marquee::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   width: 80px;
   z-index: 2
 }

 .logos-marquee::before {
   left: 0;
   background: linear-gradient(90deg, var(--bg-lighter), transparent)
 }

 .logos-marquee::after {
   right: 0;
   background: linear-gradient(-90deg, var(--bg-lighter), transparent)
 }

 .logos-track {
   display: flex;
   align-items: center;
   gap: 0;
   width: max-content;
 }

 .logos-set {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   animation: marquee 35s linear infinite;
 }

 @keyframes marquee {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-100%);
   }
 }

 .logos-track:hover .logos-set {
   animation-play-state: paused;
 }

 .omc-logo {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 10px 36px;
   white-space: nowrap;
   font-family: 'Outfit', sans-serif;
   font-size: 1.05rem;
   font-weight: 800;
   color: var(--text-secondary);
   opacity: .7;
   transition: opacity .2s;
   border-right: 1px solid var(--border);
 }

 .omc-logo:hover {
   opacity: 1
 }

 .omc-logo img {
   height: 28px;
   width: auto;
   object-fit: contain;
 }

 .logo-shell span {
   color: #cc2200
 }

 .logo-hpcl span {
   color: #006633
 }

 .logo-iocl span {
   color: #003B8E
 }

 .logo-bp span {
   color: #009A44
 }

 .logo-nayara span {
   color: #6B21A8
 }

 .logo-jiobp span {
   color: #0066CC
 }

 @media (max-width: 480px) {
   .omc-logo {
     padding: 8px 18px;
     font-size: .85rem;
     gap: 6px
   }

   .omc-logo img {
     height: 22px
   }

   .logos-marquee::before,
   .logos-marquee::after {
     width: 28px
   }
 }

 #mission-strip {
   padding: 52px 0;
   background: var(--bg-base);
   position: relative;
   z-index: 1
 }

 .mission-inner {
   display: grid;
   grid-template-columns: 1fr auto 1fr auto 1fr;
   gap: 0;
   align-items: start
 }

 @media(max-width:768px) {
   .mission-inner {
     grid-template-columns: 1fr;
     gap: 28px
   }

   .mission-divider {
     display: none !important
   }
 }

 .mission-divider {
   width: 1px;
   background: var(--border);
   margin: 0 40px;
   align-self: stretch
 }

 .mission-goal-block {
   padding: 0 20px
 }

 @media (max-width: 480px) {
   .mission-inner {
     gap: 22px
   }

   .mission-goal-block {
     text-align: center;
     padding: 0 12px
   }

   .mission-goal-block:not(:first-child) {
     border-top: 1px solid var(--border);
     padding-top: 22px
   }

   .mission-goal-label {
     display: inline-block;
     padding: 3px 12px;
     border-radius: var(--radius-pill);
     background: rgba(37, 99, 235, .08);
     margin-bottom: 12px
   }
 }

 .mission-goal-label {
   font-size: .72rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--gradient-start);
   margin-bottom: 10px
 }

 .mission-goal-text {
   font-size: .95rem;
   color: var(--text-secondary);
   line-height: 1.72
 }

 #problem {
   background: var(--bg-base)
 }

 .problem-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
 }

 @media(max-width:900px) {
   .problem-grid {
     grid-template-columns: 1fr
   }
 }

 .problem-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  position: relative;
  transition: transform .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}

 .problem-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 40px rgba(0, 0, 0, .08)
 }

 @media (max-width: 480px) {
   .problem-card {
     padding: 22px
   }
 }

 .problem-icon-wrap {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px;
   flex-shrink: 0
 }

 /* ── the stat is the hook ── */
 .pc-stat {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(2.1rem, 4.4vw, 2.6rem);
   font-weight: 800;
   line-height: 1;
   letter-spacing: -.02em;
   font-variant-numeric: tabular-nums;
   margin-bottom: 8px;
 }

 .pc-stat.pc-quote {
   font-size: clamp(1.75rem, 3.6vw, 2.15rem);
   letter-spacing: -.01em;
 }

 .pc-red { color: var(--accent-error); }
 .pc-amber { color: var(--accent-warning); }
 .pc-purple { color: var(--accent-cng); }

 .pc-stat-label {
   font-size: .68rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--text-muted);
   line-height: 1.45;
   margin-bottom: 16px;
 }

 .pc-proof {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .8rem;
   font-weight: 700;
   color: var(--gradient-start);
   margin-bottom: 18px;
   transition: gap .2s ease;
 }

 .pc-proof:hover { gap: 10px; }

 .problem-footnote {
   margin-top: 26px;
   font-size: .78rem;
   line-height: 1.65;
   color: var(--text-muted);
   text-align: center;
   max-width: 780px;
   margin-left: auto;
   margin-right: auto;
 }

 .problem-footnote a {
   color: var(--gradient-start);
   font-weight: 600;
   white-space: nowrap;
 }

 .problem-card h3 {
   font-family: 'Outfit', sans-serif;
   font-size: 1.05rem;
   font-weight: 700;
   margin-bottom: 10px;
   color: var(--text-primary)
 }

 .problem-card p {
   font-size: .88rem;
   color: var(--text-secondary);
   line-height: 1.72;
   margin-bottom: 18px
 }

 .problem-resolution {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent-success);
  margin-top: auto;
}

 .problem-resolution svg {
   flex-shrink: 0;
   margin-top: 2px
 }

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

 .db-dot-r {
   background: #ef4444
 }

 .db-dot-y {
   background: #f59e0b
 }

 .db-dot-g {
   background: #10b981
 }

 #product-reveal {
   background: var(--bg-light)
 }

 [data-theme="dark"] #product-reveal {
   background: #10141c
 }

 #product-reveal {
   background: var(--bg-light)
 }

 [data-theme="dark"] #product-reveal {
   background: #10141c
 }

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

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

 @keyframes pulseDot {

   0%,
   100% {
     opacity: 1;
     transform: scale(1)
   }

   50% {
     opacity: .55;
     transform: scale(.8)
   }
 }

 @keyframes floatBob {

   0%,
   100% {
     transform: translateY(0)
   }

   50% {
     transform: translateY(-7px)
   }
 }

 .flow-diagram {
   position: relative;
   width: 100%;
   max-width: 700px;
   margin: 40px auto 0;
   aspect-ratio: 1 / 1;
 }

 .flow-stat-badge {
   position: absolute;
   top: -6px;
   right: 0;
   z-index: 4;
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 9px 14px;
   border-radius: 9999px;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(16px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
   font-size: .78rem;
   font-weight: 700;
   color: var(--text-primary);
   animation: floatBob 3.5s ease-in-out infinite;
   white-space: nowrap;
 }

 .flow-lines {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
 }

 .flow-path {
   fill: none;
   stroke: var(--border);
   stroke-width: .6;
 }

 .flow-traveler {
   filter: drop-shadow(0 0 5px var(--gradient-start));
 }

 .flow-hub {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -44%);
   width: 116px;
   height: 116px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 7px;
   z-index: 3;
   text-align: center;
 }

 .flow-hub-core {
   width: 62px;
   height: 62px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 12px 32px var(--glow-blue), 0 0 0 6px var(--bg-light);
 }

 .flow-hub-label {
   font-family: 'Outfit', sans-serif;
   font-size: .8rem;
   font-weight: 800;
   letter-spacing: .01em;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .flow-hub-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
   border: 1.5px solid var(--gradient-start);
   opacity: 0;
   animation: hubPing 3s ease-out infinite;
   pointer-events: none;
 }

 .flow-hub-ring-2 {
   animation-delay: 1.5s;
 }

 @keyframes hubPing {
   0% {
     transform: scale(.55);
     opacity: .55
   }

   80%,
   100% {
     transform: scale(1.25);
     opacity: 0
   }
 }

 .flow-node {
   position: absolute;
   transform: translate(-50%, -50%) scale(.5);
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--bg-lighter);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 10px 14px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
   opacity: 0;
   transition: opacity .6s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
   z-index: 2;
   white-space: nowrap;
 }

 .flow-diagram.visible .flow-node {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
 }

 .flow-diagram.visible .flow-node.fn-1 {
   transition-delay: .1s
 }

 .flow-diagram.visible .flow-node.fn-2 {
   transition-delay: .22s
 }

 .flow-diagram.visible .flow-node.fn-3 {
   transition-delay: .34s
 }

 .flow-diagram.visible .flow-node.fn-4 {
   transition-delay: .46s
 }

 .flow-diagram.visible .flow-node.fn-5 {
   transition-delay: .58s
 }

 .flow-diagram.visible .flow-node.fn-6 {
   transition-delay: .70s
 }

 .flow-node-icon {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(var(--fn-color), .12);
   color: rgb(var(--fn-color));
   animation: floatBob 4s ease-in-out infinite;
 }

 .flow-node-text {
   display: flex;
   flex-direction: column;
   line-height: 1.25;
   text-align: left;
 }

 .flow-node-text strong {
   font-size: .82rem;
   font-weight: 700;
   color: var(--text-primary);
 }

 .flow-node-text span {
   font-size: .7rem;
   color: var(--text-muted);
 }

 @media (max-width: 760px) {
   .flow-diagram {
     aspect-ratio: auto;
     max-width: 380px;
     display: flex;
     flex-direction: column;
     gap: 14px;
     padding: 0 16px;
     margin: 0 auto;
   }

   .flow-stat-badge {
     display: none;
   }

   .flow-lines,
   .flow-hub {
     display: none;
   }

   .flow-diagram::before {
     display: none;
   }

   @keyframes lineSweepVertical {
     0% {
       background-position: 0 0, 0 200%;
     }

     100% {
       background-position: 0 0, 0 -100%;
     }
   }

   .flow-node {
     position: static;
     width: 100%;
     justify-content: flex-start;
     transform: none;
   }

   .flow-diagram.visible .flow-node {
     transform: none;
   }
 }

 .feature-showcase {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
   margin-bottom: 72px;
 }

 .feature-showcase:last-child {
   margin-bottom: 0
 }

 .feature-showcase-right .feature-visual-panel {
   order: 2
 }

 .feature-showcase-right .feature-content-panel {
   order: 1
 }

 @media(max-width:900px) {
   .feature-showcase {
     grid-template-columns: 1fr;
     gap: 36px
   }

   .feature-showcase-right .feature-visual-panel {
     order: 0
   }

   .feature-showcase-right .feature-content-panel {
     order: 0
   }
 }

 .feature-tag {
   font-size: .68rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .1em;
   padding: 3px 11px;
   border-radius: var(--radius-pill);
   margin-bottom: 14px;
   display: inline-block
 }

 .ft-blue {
   background: rgba(37, 99, 235, .08);
   color: var(--gradient-start);
   border: 1px solid rgba(37, 99, 235, .18)
 }

 .ft-green {
   background: rgba(5, 150, 105, .08);
   color: var(--accent-success);
   border: 1px solid rgba(5, 150, 105, .18)
 }

 .ft-purple {
   background: rgba(109, 40, 217, .08);
   color: var(--accent-cng);
   border: 1px solid rgba(109, 40, 217, .18)
 }

 .feature-content-panel h3 {
   font-family: 'Outfit', sans-serif;
   font-size: clamp(1.7rem, 3vw, 2.4rem);
   font-weight: 800;
   line-height: 1.1;
   letter-spacing: -.02em;
   margin-bottom: 14px;
   color: var(--text-primary)
 }

 .feature-content-panel p {
   font-size: .93rem;
   color: var(--text-secondary);
   line-height: 1.75;
   margin-bottom: 20px
 }

 .feature-points {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 9px
 }

 .feature-points li {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   font-size: .88rem;
   color: var(--text-secondary)
 }

 .feature-points li::before {
   content: '✓';
   font-weight: 800;
   color: var(--accent-success);
   flex-shrink: 0;
   margin-top: 1px
 }

 .shift-animation-card {
   background: var(--bg-lighter);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
   position: relative;
   overflow: hidden;
   zoom: 0.70;
 }

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

 .shift-card-title {
   font-family: 'Outfit', sans-serif;
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text-primary)
 }

 .shift-status-badge {
   padding: 4px 11px;
   background: rgba(37, 99, 235, .1);
   border: 1px solid rgba(37, 99, 235, .2);
   border-radius: 9999px;
   font-size: .85rem;
   font-weight: 700;
   color: var(--gradient-start)
 }

 .shift-meter-group {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-bottom: 20px
 }

 .shift-meter-row {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 12px
 }

 .shift-meter-label {
   font-size: .85rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--text-muted);
   margin-bottom: 10px
 }

 .shift-reading-pair {
   display: flex;
   align-items: center;
   gap: 10px
 }

 .shift-reading-box {
   flex: 1;
   text-align: center
 }

 .shift-reading-box.closing {
   background: rgba(37, 99, 235, .05);
   border: 1px solid rgba(37, 99, 235, .15);
   border-radius: 8px;
   padding: 8px
 }

 .shift-meter-stats {
   display: flex;
   justify-content: space-between;
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px dashed var(--border);
   font-size: .9rem;
 }

 .shift-meter-stats .stat-item {
   display: flex;
   gap: 8px;
   align-items: center;
 }

 .shift-meter-stats .stat-item span {
   color: var(--text-muted);
 }

 .shift-meter-stats .stat-item strong {
   font-family: 'Outfit', sans-serif;
   color: var(--text-primary);
 }

 .shift-reading-sublabel {
   font-size: .75rem;
   font-weight: 600;
   color: var(--text-muted);
   margin-bottom: 3px
 }

 .shift-reading-val {
   font-family: 'Outfit', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--text-primary)
 }

 .shift-arrow {
   font-size: 1rem;
   color: var(--text-muted);
   flex-shrink: 0
 }

 .shift-auto-calc {
   background: linear-gradient(135deg, rgba(37, 99, 235, .05), rgba(124, 58, 237, .05));
   border: 1px solid rgba(37, 99, 235, .12);
   border-radius: 10px;
   padding: 14px;
   margin-bottom: 12px
 }

 .shift-calc-row {
   display: flex;
   justify-content: space-between;
   padding: 4px 0;
   font-size: 1rem;
   color: var(--text-secondary)
 }

 .shift-calc-total {
   border-top: 1px solid var(--border);
   margin-top: 6px;
   padding-top: 8px;
   font-weight: 700;
   font-size: 1.15rem
 }

 .calc-val {
   font-family: 'Outfit', sans-serif;
   font-weight: 700;
   color: var(--text-primary)
 }

 .shift-done-banner {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   background: rgba(5, 150, 105, .08);
   border: 1px solid rgba(5, 150, 105, .2);
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   color: var(--accent-success);
   opacity: 0;
   transition: opacity .6s
 }

 .shift-done-banner.show {
   opacity: 1
 }

 .dsr-card {
   background: var(--bg-lighter);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .1)
 }

 @media (max-width: 480px) {
   .shift-animation-card {
     padding: 16px;
     margin: 0 auto;
   }

   .dsr-card {
     padding: 16px;
     margin: 0 auto;
   }

   .shift-reading-val {
     font-size: .9rem
   }

   .shift-card-title {
     font-size: .82rem
   }
 }

 .dsr-card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   margin-bottom: 18px;
   gap: 12px;
   flex-wrap: wrap
 }

 .dsr-title {
   font-family: 'Outfit', sans-serif;
   font-size: .95rem;
   font-weight: 700;
   color: var(--text-primary)
 }

 .dsr-sub {
   font-size: .7rem;
   color: var(--text-muted);
   margin-top: 3px
 }

 .dsr-status-badge {
   padding: 4px 11px;
   background: rgba(5, 150, 105, .1);
   border: 1px solid rgba(5, 150, 105, .2);
   border-radius: 9999px;
   font-size: .72rem;
   font-weight: 700;
   color: var(--accent-success);
   white-space: nowrap
 }

 .dsr-table {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 14px
 }

 .dsr-table-head {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 0;
   padding: 8px 14px;
   border-bottom: 1px solid var(--border)
 }

 .dsr-table-head span {
   font-size: .62rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--text-muted)
 }

 .dsr-table-row {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   padding: 9px 14px;
   border-bottom: 1px solid var(--border);
   align-items: center
 }

 .dsr-table-row:last-child {
   border-bottom: none
 }

 .dsr-table-row span {
   font-size: .8rem;
   color: var(--text-secondary)
 }

 .dsr-petrol span:first-child {
   font-weight: 700;
   color: #2563eb
 }

 .dsr-diesel span:first-child {
   font-weight: 700;
   color: #d97706
 }

 .dsr-cng span:first-child {
   font-weight: 700;
   color: var(--accent-cng)
 }

 .ok {
   color: var(--accent-success) !important;
   font-weight: 700 !important
 }

 .dsr-footer {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap
 }

 .dsr-total-block,
 .dsr-variance-block {
   flex: 1;
   padding: 10px 14px;
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 8px
 }

 .dsr-total-label {
   font-size: .62rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--text-muted);
   margin-bottom: 3px
 }

 .dsr-total-val {
   font-family: 'Outfit', sans-serif;
   font-size: 1.05rem;
   font-weight: 800;
   color: var(--text-primary)
 }

 .dsr-download-btn {
   padding: 9px 18px;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   color: white;
   border: none;
   border-radius: 9999px;
   font-size: .8rem;
   font-weight: 600;
   cursor: pointer;
   white-space: nowrap;
   transition: transform .2s
 }

 .dsr-download-btn:hover {
   transform: translateY(-1px)
 }

 #credit-story {
   background: var(--bg-light)
 }

 [data-theme="dark"] #credit-story {
   background: #10141c
 }

 .credit-story-layout {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 64px;
   align-items: center
 }

 @media(max-width:900px) {
   .credit-story-layout {
     grid-template-columns: 1fr;
     gap: 48px
   }
 }

 .book-animation-zone {
   position: relative;
   height: 380px;
   display: flex;
   align-items: center;
   justify-content: center
 }

 .book-pile {
   position: relative;
   width: 380px;
   height: 300px
 }

 @media (max-width: 480px) {
   .book-animation-zone {
     height: 300px;
     max-width: 100%;
   }

   .book-pile {
     transform: scale(.78);
     transform-origin: center center;
     flex-shrink: 0;
   }
 }

 .ledger-book {
   position: absolute;
   width: 120px;
   height: 158px;
   border-radius: 2px 8px 8px 2px;
   box-shadow: 3px 6px 16px rgba(0, 0, 0, .22);
   display: flex;
   overflow: hidden;
   transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .55s ease;
   cursor: default;
 }

 .lb-spine {
   width: 18px;
   flex-shrink: 0;
   background: linear-gradient(180deg, #6b4a1a, #8b6225, #5a3c10);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .lb-cover {
   flex: 1;
   padding: 10px 8px 8px;
   background: linear-gradient(165deg, #f5e6c8, #ead9b0, #ddc898);
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: relative;
   overflow: hidden;
 }

 .lb-lines {
   display: flex;
   flex-direction: column;
   gap: 5px;
   margin-bottom: auto
 }

 .lb-lines div {
   height: 1px;
   background: rgba(0, 0, 0, .15);
   border-radius: 1px
 }

 .lb-company-name {
   font-family: 'Outfit', sans-serif;
   font-size: .6rem;
   font-weight: 700;
   color: #5a3c10;
   line-height: 1.3;
   text-align: center;
   margin-top: auto;
   word-break: break-word
 }

 .lb-1 {
   top: 60px;
   left: 10px;
   transform: rotate(-12deg)
 }

 .lb-2 {
   top: 40px;
   left: 80px;
   transform: rotate(5deg)
 }

 .lb-3 {
   top: 80px;
   left: 150px;
   transform: rotate(-6deg)
 }

 .lb-4 {
   top: 20px;
   left: 220px;
   transform: rotate(9deg)
 }

 .lb-5 {
   top: 100px;
   left: 50px;
   transform: rotate(3deg)
 }

 .lb-6 {
   top: 55px;
   left: 270px;
   transform: rotate(-14deg)
 }

 .books-gone .lb-1 {
   transform: translate(-500px, -350px) rotate(-60deg);
   opacity: 0
 }

 .books-gone .lb-2 {
   transform: translateY(-450px) rotate(25deg);
   opacity: 0
 }

 .books-gone .lb-3 {
   transform: translate(400px, -300px) rotate(40deg);
   opacity: 0
 }

 .books-gone .lb-4 {
   transform: translate(500px, 100px) rotate(-30deg);
   opacity: 0
 }

 .books-gone .lb-5 {
   transform: translate(-380px, 300px) rotate(55deg);
   opacity: 0
 }

 .books-gone .lb-6 {
   transform: translate(250px, 350px) rotate(-50deg);
   opacity: 0
 }

 .credit-digital-panel {
   position: absolute;
   inset: 0;
   background: var(--bg-lighter);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 22px;
   box-shadow: 0 24px 56px rgba(0, 0, 0, .12), 0 0 0 1px var(--glass-border), 0 0 40px var(--glow-purple);
   opacity: 0;
   transform: scale(.95);
   transition: opacity .65s ease .55s, transform .65s ease .55s;
   display: flex;
   flex-direction: column;
   gap: 14px;
   pointer-events: none;
 }

 .credit-digital-panel.visible {
   opacity: 1;
   transform: scale(1);
   pointer-events: auto
 }

 .cdp-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap
 }

 .cdp-title {
   font-family: 'Outfit', sans-serif;
   font-size: .95rem;
   font-weight: 800;
   color: var(--text-primary)
 }

 .cdp-sub {
   font-size: .68rem;
   color: var(--text-muted);
   margin-top: 2px
 }

 .cdp-btn {
   padding: 5px 13px;
   border-radius: 9999px;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   color: white;
   font-size: .7rem;
   font-weight: 700;
   cursor: pointer;
   white-space: nowrap
 }

 .cdp-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px
 }

 .cdp-stat {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 9px;
   padding: 10px 12px
 }

 .cdp-warn {
   background: rgba(220, 38, 38, .05);
   border-color: rgba(220, 38, 38, .15)
 }

 .cdp-ok {
   background: rgba(5, 150, 105, .05);
   border-color: rgba(5, 150, 105, .15)
 }

 .cdp-stat-label {
   font-size: .62rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .07em;
   color: var(--text-muted);
   margin-bottom: 4px
 }

 .cdp-stat-val {
   font-family: 'Outfit', sans-serif;
   font-size: 1.05rem;
   font-weight: 800;
   color: var(--text-primary)
 }

 .cdp-stat-val.warn {
   color: var(--accent-warning)
 }

 .cdp-stat-val.ok {
   color: var(--accent-success)
 }

 .cdp-ledger-rows {
   display: flex;
   flex-direction: column;
   gap: 0;
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 9px;
   overflow: hidden
 }

 .cdp-row {
   display: grid;
   grid-template-columns: 1fr 1.5fr 1fr 1fr;
   gap: 0;
   padding: 9px 12px;
   border-bottom: 1px solid var(--border);
   font-size: .76rem;
   align-items: center
 }

 .cdp-row:last-child {
   border-bottom: none
 }

 .cdp-row .bold {
   font-weight: 700;
   color: var(--text-primary)
 }

 .cdp-row .warn-text {
   color: var(--accent-warning);
   font-weight: 600;
   font-size: .72rem
 }

 .cdp-row .ok-text {
   color: var(--accent-success);
   font-weight: 600;
   font-size: .72rem
 }

 .cdp-row span {
   color: var(--text-secondary)
 }

 .cdp-reminder-chip {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 9px 12px;
   background: rgba(37, 99, 235, .06);
   border: 1px solid rgba(37, 99, 235, .14);
   border-radius: 9px;
   font-size: .76rem;
   font-weight: 600;
   color: var(--gradient-start)
 }

 .more-features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
 }

 @media(max-width:900px) {
   .more-features-grid {
     grid-template-columns: repeat(2, 1fr)
   }
 }

 @media(max-width:540px) {
   .more-features-grid {
     grid-template-columns: 1fr
   }
 }

 .mf-card {
   padding: 28px;
   border-radius: var(--radius-lg);
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   backdrop-filter: blur(16px);
   display: flex;
   gap: 16px;
   transition: transform .3s, box-shadow .3s;
 }

 .mf-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, .08)
 }

 @media (max-width: 480px) {
   .mf-card {
     padding: 18px;
     gap: 12px
   }
 }

 .mf-icon-wrap {
   width: 46px;
   height: 46px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
 }

 .mf-blue {
   background: rgba(37, 99, 235, .1)
 }

 .mf-green {
   background: rgba(5, 150, 105, .1)
 }

 .mf-purple {
   background: rgba(109, 40, 217, .1)
 }

 .mf-amber {
   background: rgba(217, 119, 6, .1)
 }

 .mf-content h4 {
   font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 7px;
   color: var(--text-primary)
 }

 .mf-content p {
   font-size: .84rem;
   color: var(--text-secondary);
   line-height: 1.65;
   margin-bottom: 10px
 }

 .mf-chip {
   display: inline-block;
   font-size: .72rem;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: var(--radius-pill);
   background: rgba(37, 99, 235, .07);
   border: 1px solid rgba(37, 99, 235, .14);
   color: var(--gradient-start)
 }

 #how-it-works {
   background: var(--bg-light)
 }

 [data-theme="dark"] #how-it-works {
   background: #10141c
 }

 .workflow-steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   position: relative
 }

 .workflow-steps::before {
   content: '';
   position: absolute;
   top: 31px;
   left: 12.5%;
   right: 12.5%;
   height: 2px;
   background: linear-gradient(90deg, transparent 0%, transparent 40%, var(--lighthouse-glow-strong) 50%, transparent 60%, transparent 100%);
   background-size: 200% 100%;
   animation: lineSweep 4s infinite linear;
   z-index: 0;
   box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
 }

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

   100% {
     background-position: -33.333% 0;
   }
 }

 @media(max-width:768px) {
   .workflow-steps {
     grid-template-columns: 1fr;
     gap: 32px
   }

   .workflow-steps::before {
     display: none
   }
 }

 .workflow-step {
   text-align: center;
   padding: 0 16px;
   position: relative;
   z-index: 1
 }

 .workflow-step-num {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Outfit', sans-serif;
   font-size: 1.4rem;
   font-weight: 800;
   color: white;
   margin: 0 auto 20px;
   box-shadow: 0 0 15px var(--glow-blue);
   animation: stepPulse 4s infinite ease-in-out;
 }

 @media (max-width: 480px) {
   .workflow-step-num {
     width: 52px;
     height: 52px;
     font-size: 1.15rem;
     margin-bottom: 14px
   }

   .workflow-step {
     padding: 0 8px
   }
 }

 .workflow-step:nth-child(1) .workflow-step-num {
   animation-delay: 0s;
 }

 .workflow-step:nth-child(2) .workflow-step-num {
   animation-delay: 1s;
 }

 .workflow-step:nth-child(3) .workflow-step-num {
   animation-delay: 2s;
 }

 .workflow-step:nth-child(4) .workflow-step-num {
   animation-delay: 3s;
 }

 @keyframes stepPulse {
   0% {
     box-shadow: 0 0 35px 10px var(--lighthouse-glow-soft);
     filter: brightness(1.15);
   }

   30%,
   80% {
     box-shadow: 0 0 15px var(--glow-blue);
     filter: brightness(1);
   }

   100% {
     box-shadow: 0 0 35px 10px var(--lighthouse-glow-soft);
     filter: brightness(1.15);
   }
 }

 .workflow-step h4 {
   font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 8px;
   color: var(--text-primary)
 }

 .workflow-step p {
   font-size: .84rem;
   color: var(--text-secondary);
   line-height: 1.65
 }

 .roles-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
 }

 @media(max-width:768px) {
   .roles-grid {
     grid-template-columns: 1fr
   }
 }

  .role-card {
    padding: 0;
    transition: transform .3s;
    display: flex;
    flex-direction: column;
  }

  .role-card-content {
    padding: 36px;
  }

  .role-card:hover {
    transform: translateY(-4px)
  }

 @media (max-width: 480px) {
   .role-card-content {
     padding: 22px
   }
 }

  .role-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  }

  .role-visual {
    height: 240px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
    background: linear-gradient(160deg, var(--bg-light), var(--bg-lighter));
  }

  .role-visual-owner {
    display: flex;
    flex-direction: column;
  }

  .rv-winbar {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-lighter);
  }

  .rv-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 20px 22px;
  }

  .rv-stats-row {
    display: flex;
    gap: 10px;
  }

  .rv-stat {
    flex: 1;
    background: var(--bg-light);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .rv-stat span {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: 5px;
  }

  .rv-stat strong {
    font-family: 'Outfit', sans-serif;
    font-size: .95rem;
    color: var(--text-primary);
  }

  .rv-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 44px;
  }

  .rv-bars i {
    flex: 1;
    display: block;
    font-style: normal;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, var(--gradient-start), var(--gradient-end));
  }

  .role-visual-manager {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 22px 24px;
  }

  .rv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .rv-header strong {
    font-family: 'Outfit', sans-serif;
    font-size: .92rem;
    color: var(--text-primary);
  }

  .rv-badge {
    font-size: .62rem;
    font-weight: 700;
    background: rgba(217, 119, 6, .12);
    color: var(--accent-warning);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .rv-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .rv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-light);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .76rem;
  }

  .rv-row span:first-child {
    color: var(--text-secondary);
    flex: 1;
  }

  .rv-row strong {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .rv-approve {
    font-size: .66rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    padding: 5px 10px;
    border-radius: var(--radius-pill);
  }

  .rv-row-done {
    opacity: .75;
  }

  .rv-check {
    color: var(--accent-success);
    font-weight: 700;
  }

  .role-visual-attendant {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
  }

  .rv-phone {
    width: 150px;
    height: 206px;
    background: var(--bg-lighter);
    border: 3px solid var(--bg-light);
    border-radius: 22px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    gap: 8px;
  }

  .rv-phone-notch {
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    margin-bottom: 2px;
  }

  .rv-phone-label {
    font-size: .6rem;
    color: var(--text-muted);
    text-align: center;
  }

  .rv-phone-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text-primary);
  }

  .rv-phone-value span {
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
  }

  .rv-phone-btn {
    margin-top: auto;
    width: 100%;
    text-align: center;
    font-size: .64rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    padding: 9px 6px;
    border-radius: var(--radius-pill);
  }

 .role-title-tag {
   display: inline-block;
   font-size: .7rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .08em;
   padding: 3px 10px;
   border-radius: var(--radius-pill);
   margin-bottom: 12px
 }

 .rt-blue {
   background: rgba(37, 99, 235, .08);
   color: var(--gradient-start);
   border: 1px solid rgba(37, 99, 235, .15)
 }

 .rt-green {
   background: rgba(5, 150, 105, .08);
   color: var(--accent-success);
   border: 1px solid rgba(5, 150, 105, .15)
 }

 .rt-purple {
   background: rgba(109, 40, 217, .08);
   color: var(--accent-cng);
   border: 1px solid rgba(109, 40, 217, .15)
 }

 .role-card h3 {
   font-family: 'Outfit', sans-serif;
   font-size: 1.1rem;
   font-weight: 800;
   margin-bottom: 8px;
   color: var(--text-primary)
 }

 .role-card p {
   font-size: .87rem;
   color: var(--text-secondary);
   line-height: 1.7;
   margin-bottom: 16px
 }

 .role-card ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 7px
 }

 .role-card ul li {
   display: flex;
   align-items: flex-start;
   gap: 7px;
   font-size: .84rem;
   color: var(--text-secondary)
 }

 .role-card ul li::before {
   content: '✓';
   font-weight: 800;
   color: var(--accent-success);
   flex-shrink: 0;
   margin-top: 1px
 }

 #cta {
   padding: 96px 0
 }

 .cta-card {
   padding: 64px 48px;
   text-align: center;
   position: relative;
   overflow: hidden
 }

 .cta-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(37, 99, 235, .04), rgba(124, 58, 237, .04))
 }

 .cta-headline,
 .cta-subtitle {
   position: relative;
   z-index: 1
 }

 .cta-subtitle {
   max-width: 500px;
   margin: 0 auto 36px
 }

 .cta-actions {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   flex-wrap: wrap;
   position: relative;
   z-index: 1
 }

 .cta-note {
   margin-top: 18px;
   font-size: .76rem;
   color: var(--text-muted);
   position: relative;
   z-index: 1
 }

 @media(max-width:640px) {
   .cta-card {
     padding: 40px 24px
   }
 }

 @media (max-width: 480px) {
   #cta {
     padding: 56px 0
   }

   .cta-card {
     padding: 32px 20px
   }
 }

 footer {
   border-top: 1px solid var(--border);
   padding: 52px 0 32px;
   position: relative;
   z-index: 1
 }

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

 @media(max-width:768px) {
   .footer-inner {
     grid-template-columns: 1fr 1fr;
     gap: 28px
   }
 }

 @media(max-width:480px) {
   .footer-inner {
     grid-template-columns: 1fr 1fr;
     gap: 32px 16px;
   }
   .footer-brand {
     grid-column: 1 / -1;
     margin-top: 16px;
     margin-bottom: 0px;
     order: 1;
   }
 }

 .footer-brand p {
   font-size: .87rem;
   color: var(--text-muted);
   line-height: 1.7;
   margin-bottom: 10px;
   max-width: 280px
 }

 .footer-tagline {
   font-family: 'Outfit', sans-serif;
   font-size: .85rem;
   font-weight: 700;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text
 }

 .footer-col h5 {
   font-family: 'Outfit', sans-serif;
   font-size: .85rem;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--text-primary);
   margin-bottom: 20px
 }

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

 .footer-col ul li a {
   font-size: .95rem;
   color: var(--text-secondary);
   transition: color .2s;
   padding: 6px 0;
   display: inline-block;
 }

 .footer-col ul li a:hover {
   color: var(--text-primary)
 }

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

 .footer-bottom p {
   font-size: .78rem;
   color: var(--text-muted)
 }

 .footer-bottom-links {
   display: flex;
   gap: 18px
 }

 .footer-bottom-links a {
   font-size: .78rem;
   color: var(--text-muted);
   transition: color .2s
 }

 .footer-bottom-links a:hover {
   color: var(--text-secondary)
 }

 .modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .55);
   backdrop-filter: blur(8px);
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s
 }

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

 .modal-card {
   background: var(--bg-lighter);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-lg);
   padding: 40px;
   max-width: 450px;
   width: 100%;
   transform: scale(.95) translateY(16px);
   transition: transform .3s ease;
   position: relative
 }

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

 @media (max-width: 480px) {
   .modal-card {
     padding: 24px
   }
 }

 .modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .9rem;
   transition: all .2s
 }

 .modal-close:hover {
   color: var(--text-primary);
   background: var(--bg-light)
 }

 .modal-icon-wrap {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px
 }

 .modal-card h3 {
   font-family: 'Outfit', sans-serif;
   font-size: 1.45rem;
   font-weight: 800;
   margin-bottom: 6px
 }

 .modal-card>p {
   font-size: .87rem;
   color: var(--text-secondary);
   margin-bottom: 22px;
   line-height: 1.65
 }

 .form-group {
   margin-bottom: 13px
 }

 .form-group label {
   display: block;
   font-size: .78rem;
   font-weight: 600;
   color: var(--text-secondary);
   margin-bottom: 5px
 }

 .form-group input,
 .form-group select {
   width: 100%;
   padding: 10px 13px;
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   color: var(--text-primary);
   font-family: 'Inter', sans-serif;
   font-size: .87rem;
   outline: none;
   transition: border-color .2s, box-shadow .2s
 }

 .form-group input:focus,
 .form-group select:focus {
   border-color: var(--accent-blue);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
 }

 .form-group select {
   appearance: none;
   cursor: pointer
 }

 .toast {
   position: fixed;
   bottom: 26px;
   right: 26px;
   padding: 13px 18px;
   background: var(--bg-lighter);
   border: 1px solid var(--accent-success);
   border-radius: var(--radius-md);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .15), 0 0 14px rgba(5, 150, 105, .15);
   font-size: .875rem;
   font-weight: 500;
   color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: 10px;
   z-index: 99999;
   transform: translateX(220%);
   transition: transform .4s cubic-bezier(.175, .885, .32, 1.275)
 }

 .toast.show {
   transform: translateX(0)
 }

 .toast-icon {
   font-size: 1.1rem;
   flex-shrink: 0
 }

 .reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .7s ease, transform .7s ease
 }

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

 .reveal-delay-1 {
   transition-delay: .12s
 }

 .reveal-delay-2 {
   transition-delay: .22s
 }

 .reveal-delay-3 {
   transition-delay: .32s
 }

 .animated-pro {
   display: inline-block;
   min-width: 60px;
   
   transition: opacity 0.4s ease, transform 0.4s ease;
 }
/* ============================================
   FAQ SECTION
   ============================================ */
#faq {
  padding: 100px 0;
}

.faq-list {
  max-width: 820px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.faq-item[open] {
  border-color: color-mix(in srgb, var(--gradient-start) 45%, transparent);
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.08);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 22px;
  position: relative;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--text-primary);
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 24px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .25s ease, border-color .25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  border-color: var(--gradient-start);
}

.faq-item summary:hover {
  color: var(--gradient-start);
}

.faq-answer {
  padding: 0 22px 22px;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0;
}

@media (max-width: 640px) {
  #faq {
    padding: 64px 0;
  }

  .faq-list {
    margin-top: 32px;
    gap: 12px;
  }

  .faq-item summary {
    padding: 16px 46px 16px 18px;
    font-size: 0.96rem;
  }

  .faq-item summary::after {
    right: 18px;
    top: 20px;
    width: 9px;
    height: 9px;
  }

  .faq-answer {
    padding: 0 18px 18px;
    font-size: 0.92rem;
  }
}

/* ============================================
   REUSABLE PRODUCT-MOCKUP UI KIT
   (powers the "Beyond the Basics" feature showcases)
   ============================================ */
.mock-card {
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .1);
  position: relative;
  overflow: hidden;
}

.mock-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.mock-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.mock-sub {
  font-size: .76rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.mock-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mock-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mock-chip.ok   { color: var(--accent-success); background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .2); }
.mock-chip.warn { color: var(--accent-error);   background: rgba(239, 68, 68, .07);  border: 1px solid rgba(239, 68, 68, .2); }
.mock-chip.info { color: var(--gradient-start);  background: rgba(37, 99, 235, .08);  border: 1px solid rgba(37, 99, 235, .18); }

.mock-rows { display: flex; flex-direction: column; gap: 9px; }

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-light);
  border-radius: 10px;
  padding: 12px 14px;
}
.mock-row.hl { border: 1px solid color-mix(in srgb, var(--gradient-start) 30%, transparent); background: color-mix(in srgb, var(--gradient-start) 6%, var(--bg-light)); }

.mock-label { font-size: .8rem; color: var(--text-secondary); }
.mock-val   { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .92rem; color: var(--text-primary); white-space: nowrap; }
.mock-val.neg { color: var(--accent-error); }
.mock-val.pos { color: var(--accent-success); }

.mock-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.mock-tile  { background: var(--bg-light); border-radius: 10px; padding: 12px; }
.mock-tile-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.mock-tile-val   { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--text-primary); }

.mock-divider { height: 1px; background: var(--border); margin: 14px 0; }

.mock-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}
.mock-flag svg { flex-shrink: 0; }
.mock-flag.warn { color: var(--accent-error);   background: rgba(239, 68, 68, .06);  border: 1px solid rgba(239, 68, 68, .16); }
.mock-flag.ok   { color: var(--accent-success); background: rgba(16, 185, 129, .06); border: 1px solid rgba(16, 185, 129, .16); }

@media (max-width: 480px) {
  .mock-card { padding: 18px; }
  .mock-tiles { gap: 8px; }
  .mock-tile { padding: 10px; }
  .mock-tile-val { font-size: .92rem; }
}

/* ============================================
   CONTENT / GUIDE PAGES
   ============================================ */
.docpage { padding-top: calc(var(--nav-h) + 40px); padding-bottom: 96px; position: relative; z-index: 1; }

.doc-breadcrumb {
  /* override the global `nav { position: fixed }` — this is a breadcrumb nav */
  position: static; padding: 0; z-index: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--text-muted); margin-bottom: 22px;
}
.doc-breadcrumb a { color: var(--text-secondary); }
.doc-breadcrumb a:hover { color: var(--gradient-start); }
.doc-breadcrumb .sep { opacity: .5; }

.doc-hero { max-width: 780px; margin-bottom: 12px; }
.doc-hero h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 5vw, 3.3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  color: var(--text-primary); margin: 14px 0 18px;
}
.doc-lead { font-size: 1.15rem; line-height: 1.7; color: var(--text-secondary); max-width: 720px; }

/* prose */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  font-family: 'Outfit', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  color: var(--text-primary); margin-top: 8px;
}
.prose h3 {
  font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700;
  color: var(--text-primary); margin-top: 10px;
}
.prose p, .prose li { font-size: 1.02rem; line-height: 1.78; color: var(--text-secondary); }
.prose strong { color: var(--text-primary); font-weight: 700; }
.prose ul, .prose ol { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prose ul li, .prose ol li { position: relative; padding-left: 26px; }
.prose ul li::before, .prose ol li::before {
  content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.prose ol { counter-reset: p; }

.doc-section { margin-top: 64px; }
.doc-section-head { max-width: 760px; margin-bottom: 26px; }

/* ── register component (mirrors the app's tables) ── */
.reg-card {
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
  overflow: hidden;
  position: relative;
}
.reg-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border); background: var(--bg-light);
}
.reg-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.reg-sub { font-size: .78rem; color: var(--text-muted); }
.reg-tabs { display: flex; gap: 8px; margin-left: auto; }
.reg-tab {
  font-size: .74rem; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-lighter);
}
.reg-tab.active { color: var(--gradient-start); border-color: color-mix(in srgb, var(--gradient-start) 40%, transparent); background: color-mix(in srgb, var(--gradient-start) 8%, transparent); }

.reg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.reg-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.reg-table th {
  text-align: right; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 12px 14px; white-space: nowrap; border-bottom: 1px solid var(--border);
  background: var(--bg-light);
}
.reg-table th:first-child, .reg-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-lighter); }
.reg-table th:first-child { background: var(--bg-light); }
.reg-table td {
  text-align: right; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .86rem;
  color: var(--text-primary); padding: 13px 14px; white-space: nowrap; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.reg-table tbody tr:last-child td { border-bottom: 0; }
.reg-table td.lbl { font-weight: 500; color: var(--text-secondary); font-family: 'Inter', sans-serif; }
.reg-auto { color: var(--gradient-start); }
.reg-pos { color: var(--accent-success); }
.reg-neg { color: var(--accent-error); }
.reg-muted { color: var(--text-muted); font-weight: 500; }

.reg-badge {
  position: absolute; top: -12px; right: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; color: var(--text-primary);
  background: var(--bg-lighter); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 7px 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.reg-badge svg { color: var(--accent-success); }

/* staggered row reveal when the card scrolls in */
.reg-card.reveal-up .reg-table tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reg-card.reveal-up.visible .reg-table tbody tr { opacity: 1; transform: none; }
.reg-card.reveal-up.visible .reg-table tbody tr:nth-child(1) { transition-delay: .05s; }
.reg-card.reveal-up.visible .reg-table tbody tr:nth-child(2) { transition-delay: .13s; }
.reg-card.reveal-up.visible .reg-table tbody tr:nth-child(3) { transition-delay: .21s; }
.reg-card.reveal-up.visible .reg-table tbody tr:nth-child(4) { transition-delay: .29s; }
.reg-card.reveal-up.visible .reg-table tbody tr:nth-child(5) { transition-delay: .37s; }
.reg-card.reveal-up.visible .reg-auto { animation: regGlow 1.4s ease .5s both; }
@keyframes regGlow {
  0% { background: color-mix(in srgb, var(--gradient-start) 22%, transparent); }
  100% { background: transparent; }
}

.reg-note { font-size: .82rem; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* ── callouts ── */
.callout {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border); border-left: 3px solid var(--gradient-start);
  background: var(--bg-light); border-radius: var(--radius-md);
  padding: 18px 20px; margin-top: 24px;
}
.callout.tip { border-left-color: var(--accent-success); }
.callout.warn { border-left-color: var(--accent-warning); }
.callout-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gradient-start) 12%, transparent); color: var(--gradient-start); }
.callout.tip .callout-ico { background: rgba(16,185,129,.12); color: var(--accent-success); }
.callout.warn .callout-ico { background: rgba(245,158,11,.14); color: var(--accent-warning); }
.callout h4 { font-family: 'Outfit', sans-serif; font-size: .98rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.callout p { font-size: .92rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }

/* ── split (text + visual) ── */
.doc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.doc-split.flip .doc-split-visual { order: -1; }
@media (max-width: 880px) { .doc-split { grid-template-columns: 1fr; gap: 32px; } .doc-split.flip .doc-split-visual { order: 0; } }

/* before / after compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .compare { grid-template-columns: 1fr; } }
.compare-col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; background: var(--bg-light); }
.compare-col.after { background: color-mix(in srgb, var(--gradient-start) 6%, var(--bg-lighter)); border-color: color-mix(in srgb, var(--gradient-start) 25%, transparent); }
.compare-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; display: inline-block; }
.compare-col.before .compare-tag { color: var(--accent-error); }
.compare-col.after .compare-tag { color: var(--gradient-start); }
.compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.compare-col ul li { display: flex; gap: 9px; padding-left: 0; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); }
.compare-col ul li::before { content: none; }
.compare-col ul li svg { flex-shrink: 0; margin-top: 2px; }

/* ── related guides ── */
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .guides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .guides-grid { grid-template-columns: 1fr; } }
.guide-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-lighter); padding: 20px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.guide-card:hover { border-color: color-mix(in srgb, var(--gradient-start) 40%, transparent); box-shadow: 0 12px 30px rgba(37,99,235,.08); transform: translateY(-2px); }
.guide-card .g-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gradient-start) 10%, transparent); color: var(--gradient-start); margin-bottom: 12px; }
.guide-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.guide-card p { font-size: .85rem; line-height: 1.55; color: var(--text-secondary); }

/* ── page CTA ── */
.doc-cta {
  margin-top: 72px; text-align: center; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-light);
  padding: 52px 28px; position: relative; overflow: hidden;
}
.doc-cta h2 { font-family: 'Outfit', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: 12px; }
.doc-cta p { color: var(--text-secondary); max-width: 520px; margin: 0 auto 26px; line-height: 1.7; }
.doc-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .docpage { padding-top: calc(var(--nav-h) + 24px); }
  .doc-section { margin-top: 48px; }
  .prose p, .prose li { font-size: .98rem; }
}

/* ── Dropdown and Guides ── */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--bg-lighter);
  min-width: 220px;
  box-shadow: 0px 8px 24px rgba(0,0,0,0.15);
  z-index: 100;
  border-radius: 8px;
  overflow: hidden;
  top: 100%;
  border: 1px solid var(--border);
}
.dropdown-content a {
  color: var(--text-primary);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 0.95rem;
  transition: background-color 0.2s;
}
.dropdown-content a:hover {
  background-color: color-mix(in srgb, var(--accent-blue) 10%, transparent);
  color: var(--accent-blue);
}
.dropdown:hover .dropdown-content {
  display: block;
}



.guide-link-text {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.guide-highlight {
  color: var(--accent-blue);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-blue);
  transition: all 0.2s;
}
.guide-highlight:hover {
  color: color-mix(in srgb, var(--accent-blue) 80%, white);
  border-bottom-style: solid;
}


/* ============================================
   FUEL LOSS REPORT — proof page components
   ============================================ */
.flr-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .flr-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .flr-tiles { grid-template-columns: repeat(2, 1fr); } }

.flr-tile {
  background: var(--bg-lighter);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 20px 28px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flr-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}
.flr-tile-v {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.flr-tile-k {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-top: 11px;
  line-height: 1.45;
}
@media (max-width: 560px) {
  .flr-tile { padding: 24px 14px 20px; }
  .flr-tile-k { font-size: .68rem; }
}

/* ── the fill-the-column table ── */
.flc-btn {
  margin-left: auto;
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  border: 0;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .28);
}
.flc-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(37, 99, 235, .34); }
.flc-btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.flc-scroll { max-height: 460px; overflow: auto; -webkit-overflow-scrolling: touch; }
.flc-table thead th { position: sticky; top: 0; z-index: 2; }
.flc-head {
  color: var(--gradient-start) !important;
  border-left: 1px dashed color-mix(in srgb, var(--gradient-start) 45%, transparent);
}
.flc-cum {
  border-left: 1px dashed color-mix(in srgb, var(--gradient-start) 45%, transparent);
  background: color-mix(in srgb, var(--gradient-start) 4%, transparent);
  color: var(--accent-error);
  font-weight: 700;
  min-width: 128px;
}
.flc-cum.lit { animation: flcPop .45s ease; }
@keyframes flcPop {
  0% { background: color-mix(in srgb, var(--accent-error) 26%, transparent); }
  100% { background: color-mix(in srgb, var(--gradient-start) 4%, transparent); }
}
.flc-table tfoot td {
  border-top: 2px solid var(--border);
  font-size: .92rem;
  padding: 14px;
  position: sticky;
  bottom: 0;
  background: var(--bg-light);
}
.flc-total { color: var(--accent-error); font-family: 'Outfit', sans-serif; font-weight: 800; }

/* ── 168-day dot grid ── */
.dotgrid {
  display: grid;
  grid-template-columns: repeat(28, 1fr);
  gap: 6px;
  padding: 22px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
@media (max-width: 760px) { .dotgrid { grid-template-columns: repeat(14, 1fr); gap: 5px; padding: 16px; } }
.dotgrid i {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--accent-error);
  opacity: .82;
}
.dotgrid i.g { background: var(--accent-success); opacity: 1; }
.dotgrid i.n { background: var(--text-muted); opacity: .35; }

.dotgrid-key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-top: 14px;
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
}
.dotgrid-key span { display: inline-flex; align-items: center; gap: 7px; }
.dk { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.dk-red { background: var(--accent-error); }
.dk-green { background: var(--accent-success); }
.dk-grey { background: var(--text-muted); opacity: .4; }

/* ── comparison bars ── */
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 58px; align-items: center; gap: 14px; }
@media (max-width: 560px) { .bar-row { grid-template-columns: 92px 1fr 50px; gap: 10px; } }
.bar-lbl { font-size: .82rem; font-weight: 600; color: var(--text-secondary); }
.bar-track { height: 12px; border-radius: 99px; background: var(--bg-light); border: 1px solid var(--border); overflow: hidden; }
.bar-track i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-warning), #fb923c);
}
.bar-track i.bar-hot { background: linear-gradient(90deg, #f87171, var(--accent-error)); }
.bar-val { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .88rem; text-align: right; font-variant-numeric: tabular-nums; }