/* ─── PREMIUM DARK DESIGN TOKENS (ABYSS THEME) ─── */
 :root {
     --bg-base: #07090f;
     --bg-subtle: #0f1423;
     --bg-surface: #141a2e;
     --text-main: #ffffff;
     --text-muted: #94a3b8;

     --border-light: rgba(255, 255, 255, 0.4);
     --border-hover: rgba(255, 255, 255, 0.6);

     --brand-gold: #fbbf24;
     --brand-gold-light: #fde047;
     --brand-gold-dark: #d97706;
     --brand-primary: var(--brand-gold);
     --brand-primary-hover: var(--brand-gold-light);
     --brand-secondary: #e2e8f0;
     --brand-accent: #94a3b8;

     --brand-gradient: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold-dark));
     --gold-gradient: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold-dark));
     --glass-bg: rgba(7, 9, 14, 0.5);

     --success: #10b981;
     --warning: #fbbf24;
     --danger: #ef4444;

     --font-main: 'Plus Jakarta Sans', sans-serif;

     --max-w: 1320px;
     --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.5);
     --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
     --shadow-glow: 0 10px 30px -10px rgba(251, 191, 36, 0.25);
     --shadow-gold: 0 10px 40px -10px rgba(251, 191, 36, 0.3);
     --shadow-float: 0 20px 40px rgba(0, 0, 0, 0.8);
     --shadow-glass: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

     --radius-sm: 8px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --radius-xl: 32px;

     --transition: all 0.2s ease-in-out;
     --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
     --header-bg: rgba(7, 9, 15, 0.85);
 }

 /* ─── RESET & BASE ─── */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 html {
     scroll-behavior: smooth;
     font-size: 90%;
 }

 body {
     font-family: var(--font-main);
     background-color: var(--bg-base);
     color: var(--text-main);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
 }

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

 button {
     border: none;
     background: none;
     font-family: inherit;
     cursor: pointer;
 }

 ul {
     list-style: none;
 }

 .mr-2 {
     margin-right: 8px;
 }

 .bg-subtle {
     background-color: var(--bg-subtle);
 }

 .container {
     width: 100% !important;
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 24px;
     position: relative;
     z-index: 10;
 }

 .fit-frame {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding-top: 100px;
     padding-bottom: 60px;
 }

 .ambient-bloom {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     pointer-events: none;
     z-index: 0;
     opacity: 0.35;
 }

 .bloom-gold {
     background: rgba(251, 191, 36, 0.25);
 }

 .bloom-violet {
     background: rgba(124, 58, 237, 0.15);
 }

 .bloom-dark-purple {
     background: rgba(88, 28, 135, 0.20);
 }

 /* ─── TYPOGRAPHY ─── */
 h1,
 h2,
 h3,
 h4 {
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -0.04em;
 }

 .heading-xl {
     font-size: clamp(3rem, 6vw, 4.5rem);
     font-weight: 900;
 }

 .heading-lg {
     font-size: clamp(2.5rem, 5vw, 3.5rem);
 }

 .heading-md {
     font-size: clamp(1.5rem, 2.5vw, 2.25rem);
 }

 .text-gradient,
 .text-gold {
     background: var(--gold-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }

 /* ─── BUTTONS ─── */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 14px 28px;
     border-radius: 999px;
     font-weight: 700;
     font-size: 16px;
     transition: var(--transition);
     cursor: pointer;
     border: 1px solid var(--border-light);
 }

 .btn-primary,
 .btn-gold {
     background: var(--gold-gradient);
     color: #000 !important;
     box-shadow: var(--shadow-gold);
     border: 1px solid var(--border-light);
 }

 .btn-primary:hover,
 .btn-gold:hover,
 .btn-primary:focus,
 .btn-gold:focus {
     transform: translateY(-3px);
     box-shadow: 0 15px 40px -5px rgba(251, 191, 36, 0.4);
     border: 1px solid var(--border-light);
     outline: none !important;
 }

 .btn-outline {
     background: transparent;
     color: var(--text-main);
     border: 1px solid var(--border-light);
 }

 .btn-outline:hover {
     border-color: var(--brand-gold);
 }

 .btn-secondary {
     background: rgba(255, 255, 255, 0.02);
     color: var(--text-main);
     border: 1px solid var(--border-light);
     backdrop-filter: blur(10px);
 }

 .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.06);
     border-color: var(--brand-gold);
     transform: translateY(-1px);
 }

 /* ─── HEADER & NAVIGATION ─── */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: var(--header-bg);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border-light);
     transition: var(--transition);
 }

 .header.scrolled {
     box-shadow: var(--shadow-sm);
 }

 .nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 80px;
     max-width: var(--max-w);
 }

 .nav-left {
     display: flex;
     align-items: center;
     gap: 48px;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 900;
     font-size: 24px;
     color: var(--text-main);
     letter-spacing: -0.05em;
     margin-left: -8px;
 }

 .brand-logo {
     height: 80px;
     width: auto;
     display: block;
     object-fit: contain;
     filter: brightness(0) invert(1);
 }

 .footer-brand-logo {
     height: 75px;
     width: auto;
     display: block;
     object-fit: contain;
     filter: brightness(0) invert(1);
 }

 .nav-links {
     display: flex;
     gap: 28px;
     font-weight: 600;
     font-size: 14px;
     color: var(--text-muted);
     align-items: center;
 }

 .nav-links a {
     transition: color 0.2s;
 }

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

 .mobile-menu-toggle {
     display: none;
     font-size: 24px;
     color: var(--text-main);
 }


 /* ─── APP NAVIGATION ELEMENTS ─── */
 .hidden-on-mobile {
     display: flex;
     gap: 12px;
     align-items: center;
 }

 .btn-nav {
     padding: 10px 16px;
     font-size: 14px;
     border-radius: 8px;
     outline: none !important;
     box-shadow: none;
 }

 .btn-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.02);
     border: 1px solid var(--border-light);
     color: var(--text-main);
     position: relative;
     transition: var(--transition);
 }

 .btn-icon:hover {
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid var(--brand-gold) !important;
     transform: translateY(-1px);
     color: var(--brand-gold) !important;
 }

 .btn-icon .badge {
     position: absolute;
     top: -2px;
     right: -2px;
     background: var(--danger);
     color: white;
     font-size: 10px;
     font-weight: 800;
     padding: 2px 6px;
     border-radius: 99px;
     border: 2px solid var(--border-light);
 }

 .user-dropdown {
     position: relative;
     display: inline-block;
 }

 .user-dropdown-content {
     position: absolute;
     right: 0;
     top: calc(100% + 12px);
     background: var(--header-bg);
     backdrop-filter: blur(20px);
     min-width: 220px;
     box-shadow: var(--shadow-xl);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md);
     z-index: 1000;
     flex-direction: column;
     padding: 8px;
     display: flex;
     visibility: hidden;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease 0.2s;
 }

 .user-dropdown:hover .user-dropdown-content {
     visibility: visible;
     opacity: 1;
     transform: translateY(0);
     transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
 }

 .dropdown-item {
     padding: 10px 16px;
     color: var(--text-main);
     font-size: 14px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     border-radius: 6px;
     transition: var(--transition);
 }

 .dropdown-item:hover {
     background: var(--bg-subtle);
     color: var(--brand-gold);
 }

 /* ─── HERO SECTION ─── */
 .main-content,
 form[name="frmsearchcu"] {
     position: relative;
     padding: 100px 0 100px;
     text-align: center;
     overflow: hidden;
     border-bottom: 1px solid var(--border-light);
 }

 .hero,
 .my-contact {
     position: relative;
     padding: 130px 0 100px;
     text-align: center;
     overflow: hidden;
     border-bottom: 1px solid var(--border-light);
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 16px;
     border-radius: 999px;
     background: rgba(251, 191, 36, 0.08);
     border: 1px solid var(--border-light);
     color: var(--brand-gold);
     font-weight: 800;
     font-size: 13px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 24px;
 }

 .hero-subtitle {
     font-size: 1.375rem;
     color: var(--text-muted);
     max-width: 750px;
     margin: 24px auto 48px;
     font-weight: 500;
 }

 .hero-search-wrap {
     max-width: 850px;
     margin: 0 auto;
     position: relative;
     z-index: 10;
 }

 .massive-search {
     display: flex;
     align-items: center;
     background: var(--glass-bg);
     padding: 8px 8px 8px 24px;
     border-radius: 999px;
     border: 1px solid var(--border-light);
     box-shadow: var(--shadow-glass);
     backdrop-filter: blur(20px);
     transition: var(--transition);
 }

 .massive-search:focus-within {
     border-color: var(--brand-gold);
     box-shadow: var(--shadow-glow);
 }

 .massive-search i {
     color: var(--text-muted);
 }

 .search-input {
     flex: 1;
     border: none;
     outline: none;
     font-size: 1.26rem;
     font-weight: 500;
     font-family: inherit;
     color: var(--text-main);
     background: transparent;
     padding: 0 16px;
 }

 .search-input::placeholder {
     color: var(--text-muted);
     opacity: 0.7;
 }

 .hero-metrics {
     display: flex;
     justify-content: center;
     gap: 40px;
     margin-top: 48px;
     color: var(--text-muted);
     font-weight: 600;
     font-size: 16.5px;
 }

 .hero-metrics span {
     color: var(--text-main);
     font-weight: 800;
 }

 /* Floating Profile Cards */
 .floating-cards-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 10;
     overflow: hidden;
 }

 .float-card {
     position: absolute;
     background: var(--bg-surface);
     padding: 16px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-float);
     border: 1px solid var(--border-light);
     display: flex;
     flex-direction: column;
     gap: 12px;
     animation: float-up-down 6s ease-in-out infinite;
     min-width: 220px;
     text-align: left;
 }

 .float-card.pos-1 {
     top: 20%;
     left: 5%;
     animation-delay: 0s;
     transform: rotate(-5deg);
 }

 .float-card.pos-2 {
     bottom: 15%;
     right: 8%;
     animation-delay: -2s;
     transform: rotate(3deg);
 }

 .float-card.pos-3 {
     top: 35%;
     right: 3%;
     animation-delay: -4s;
     transform: rotate(5deg);
     opacity: 0.6;
     filter: blur(2px);
 }

 .fc-header {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .fc-av {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 1px solid var(--border-light);
     background: var(--bg-subtle);
     display: grid;
     place-items: center;
     font-weight: bold;
     color: var(--brand-gold);
 }

 .fc-info h4 {
     font-size: 14px;
     margin-bottom: 2px;
 }

 .fc-info p {
     font-size: 12px;
     color: var(--text-muted);
     font-weight: 500;
 }

 .fc-data {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     font-weight: 600;
     color: var(--text-main);
     background: var(--bg-subtle);
     padding: 6px 10px;
     border-radius: 6px;
     border: 1px solid var(--border-light);
 }

 .fc-data i {
     color: var(--brand-gold);
 }

 @keyframes float-up-down {

     0%,
     100% {
         transform: translateY(0) rotate(var(--rot, 0deg));
     }

     50% {
         transform: translateY(-20px) rotate(var(--rot, 0deg));
     }
 }

 /* ─── LOGO TICKER (Social Proof) ─── */
 .logo-ticker {
     position: relative;
     z-index: 10;
     padding: 40px 0;
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
     background: var(--bg-subtle);
     text-align: center;
     overflow: hidden;
 }

 .ticker-title {
     font-size: 13.2px;
     font-weight: 800;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 24px;
 }

 .ticker-track {
     display: flex;
     gap: 64px;
     width: max-content;
     animation: slide 40s linear infinite;
     align-items: center;
 }

 .ticker-item {
     font-size: 24px;
     font-weight: 900;
     color: var(--text-muted);
     opacity: 0.5;
     text-transform: uppercase;
     letter-spacing: -0.03em;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .ticker-item i {
     width: 32px;
     height: 32px;
 }

 @keyframes slide {
     to {
         transform: translateX(-50%);
     }
 }

 /* ─── CATEGORY INSIGHT SECTION ─── */
 .category-insight {
     background: var(--bg-base);
     padding: 90px 0;
     position: relative;
     overflow: hidden;
 }

 .insight-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
     align-items: stretch;
     position: relative;
     z-index: 10;
 }

 .insight-card {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-lg);
     padding: 40px;
     position: relative;
     overflow: hidden;
     transition: var(--transition);
     box-shadow: var(--shadow-sm);
     display: flex;
     flex-direction: column;
 }

 .insight-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--card-accent);
     opacity: 0.8;
 }

 .insight-card:hover {
     transform: translateY(-8px);
     border-color: var(--card-accent);
     box-shadow: var(--shadow-md);
 }

 .insight-card.grapout-way {
     border: 2px solid rgba(16, 185, 129, 0.6);
     background: linear-gradient(180deg, var(--bg-surface), rgba(16, 185, 129, 0.05));
     box-shadow: 0 15px 40px -10px rgba(16, 185, 129, 0.25);
 }

 .insight-card.grapout-way:hover {
     transform: translateY(-8px);
     border-color: var(--success);
     box-shadow: 0 20px 50px -10px rgba(16, 185, 129, 0.4);
 }

 .ic-icon {
     width: 56px;
     height: 56px;
     border-radius: 16px;
     display: grid;
     place-items: center;
     margin-bottom: 24px;
     font-size: 24px;
     color: var(--card-accent);
     border: 1px solid var(--border-light);
 }

 .contrast-label {
     font-size: 13.2px;
     font-weight: 900;
     letter-spacing: .18em;
     text-transform: uppercase;
     margin-bottom: 18px;
 }

 .contrast-heading {
     font-size: clamp(1.45rem, 2.2vw, 2rem);
     color: var(--text-main);
     margin-bottom: 18px;
     line-height: 1.45;
 }

 .ic-body {
     color: var(--text-muted);
     font-size: 1.1rem;
     line-height: 1.7;
     flex-grow: 1;
 }

 /* ─── STATS ─── */
 .infographic-stats {
     padding: 80px 0;
     background: var(--bg-subtle);
     position: relative;
     z-index: 10;
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
 }

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

 .stat-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 24px;
     border-radius: var(--radius-lg);
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     box-shadow: var(--shadow-sm);
     transition: var(--transition);
 }

 .stat-card:hover {
     transform: translateY(-5px);
     border-color: var(--brand-gold);
     box-shadow: var(--shadow-glow);
 }

 .stat-info h3 {
     font-size: 2.5rem;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .stat-info p {
     color: var(--text-muted);
     font-weight: 700;
     font-size: 0.935rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .gauge-wrap {
     width: 60px;
     height: 60px;
     position: relative;
 }

 .gauge-bg {
     fill: none;
     stroke: var(--bg-subtle);
     stroke-width: 8;
 }

 .gauge-fill {
     fill: none;
     stroke: var(--brand-gold);
     stroke-width: 8;
     stroke-linecap: round;
     stroke-dasharray: 200;
     stroke-dashoffset: 200;
     transition: stroke-dashoffset 2s ease-out;
 }

 .stat-card.visible .gauge-fill {
     stroke-dashoffset: 10;
 }

 .spark-wrap {
     display: flex;
     align-items: flex-end;
     gap: 4px;
     height: 40px;
 }

 .spark-bar {
     width: 8px;
     background: var(--brand-gold);
     border-radius: 4px;
     opacity: 0.3;
     animation: pulseBar 1.5s infinite alternate;
     border: 1px solid var(--border-light);
 }

 .spark-bar:nth-child(1) {
     height: 40%;
     animation-delay: 0s;
 }

 .spark-bar:nth-child(2) {
     height: 60%;
     animation-delay: 0.2s;
 }

 .spark-bar:nth-child(3) {
     height: 80%;
     animation-delay: 0.4s;
 }

 .spark-bar:nth-child(4) {
     height: 100%;
     opacity: 1;
     animation: none;
 }

 @keyframes pulseBar {
     to {
         opacity: 0.8;
         height: calc(var(--h) + 10%);
     }
 }

 .node-wrap {
     width: 60px;
     height: 60px;
     position: relative;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--border-light);
     display: grid;
     place-items: center;
     color: var(--brand-secondary);
 }

 .node-wrap svg {
     width: 34px;
     height: 34px;
     animation: spinNode 20s linear infinite;
 }

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

 /* ─── FEATURES: PIPELINE ─── */
 .section {
     padding: 80px 0;
     position: relative;
     overflow: hidden;
     border-bottom: 1px solid var(--border-light);
 }

 .section-header {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 40px;
     position: relative;
     z-index: 10;
 }

 .section-label {
     color: var(--brand-gold);
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 16px;
     font-size: 14px;
     display: inline-block;
     padding: 4px 12px;
     border-radius: 99px;
     border: 1px solid var(--border-light);
     background: rgba(255, 255, 255, 0.05);
 }

 .section-header p {
     font-size: 1.26rem;
     color: var(--text-muted);
     margin-top: 16px;
 }

 .feature-row {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 50px;
     align-items: center;
     position: relative;
     z-index: 10;
     margin-bottom: 0;
 }

 .feature-content h2 {
     margin-bottom: 20px;
 }

 .feature-content p {
     font-size: 1.26rem;
     color: var(--text-muted);
     margin-bottom: 24px;
 }

 .feature-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 24px;
 }

 .feature-list-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: 1.05rem;
     font-weight: 600;
 }

 .feature-list-item i {
     color: var(--brand-gold);
     flex-shrink: 0;
     margin-top: 2px;
 }

 /* ─── ANIMATED PIPELINE MOCKUP ─── */
 .animation-wrapper {
     width: 100%;
     max-width: 650px;
     height: 380px;
     position: relative;
     perspective: 1500px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: auto;
 }

 .mockup-scene {
     width: 100%;
     max-width: 580px;
     height: 360px;
     position: relative;
 }

 .stack-card {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: var(--radius-lg);
     transition: all 0.8s var(--spring-easing);
 }

 .bg-card-light {
     background: var(--bg-subtle);
     border: 1px solid var(--border-light);
     z-index: 1;
     transform: scale(0.9) translate(0, 0);
     opacity: 0.5;
 }

 .bg-card-brand {
     background: var(--brand-gradient);
     box-shadow: var(--shadow-glow);
     z-index: 2;
     transform: scale(0.95) translate(0, 0);
     opacity: 0.5;
     border: 1px solid var(--border-light);
 }

 .mockup-scene.state-1 .bg-card-light {
     transform: scale(1) translate(-15px, -10px) rotate(-4deg);
     opacity: 1;
 }

 .mockup-scene.state-1 .bg-card-brand {
     transform: scale(1) translate(25px, 15px) rotate(3deg);
     opacity: 1;
 }

 .mockup-scene.state-2 .bg-card-light {
     transform: scale(1) translate(-20px, -5px) rotate(-6deg);
     opacity: 1;
 }

 .mockup-scene.state-2 .bg-card-brand {
     transform: scale(1) translate(30px, 10px) rotate(5deg);
     opacity: 1;
 }

 .mockup-scene.state-3 .bg-card-light {
     transform: scale(1) translate(-10px, -15px) rotate(-2deg);
     opacity: 1;
 }

 .mockup-scene.state-3 .bg-card-brand {
     transform: scale(1) translate(20px, 20px) rotate(2deg);
     opacity: 1;
 }

 .mockup-scene.state-4 .bg-card-light {
     transform: scale(1) translate(-25px, -8px) rotate(-5deg);
     opacity: 1;
 }

 .mockup-scene.state-4 .bg-card-brand {
     transform: scale(1) translate(15px, 25px) rotate(4deg);
     opacity: 1;
 }

 .main-card {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
     z-index: 3;
     overflow: hidden;
     transition: all 0.8s var(--spring-easing);
 }

 .mockup-scene:not(.state-0) .main-card {
     transform: translate(-10px, -5px);
 }

 .slider-track {
     display: flex;
     width: 500%;
     height: 100%;
     transition: transform 0.8s var(--spring-easing);
 }

 .view {
     flex: 0 0 20%;
     height: 100%;
     position: relative;
     background: var(--bg-surface);
     display: flex;
     flex-direction: column;
 }

 .list-header {
     padding: 16px 20px;
     background: var(--bg-subtle);
     border-bottom: 1px solid var(--border-light);
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .lh-title {
     font-size: 15px;
     font-weight: 800;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .lh-badge {
     background: rgba(16, 185, 129, 0.1);
     color: var(--success);
     padding: 4px 10px;
     border-radius: 99px;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border: 1px solid var(--border-light);
 }

 .list-body {
     padding: 12px 16px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
     overflow: hidden;
 }

 /* SLIDER STATES */
 .view-grid {
     background-color: var(--bg-subtle);
     background-image: radial-gradient(var(--border-hover) 1px, transparent 1px);
     background-size: 20px 20px;
 }

 .grid-lines {
     position: absolute;
     inset: 0;
     pointer-events: none;
 }

 .grid-lines path {
     fill: none;
     stroke: var(--brand-gold);
     stroke-width: 2;
     stroke-dasharray: 6 6;
     opacity: 0.3;
 }

 .data-packet {
     fill: var(--brand-secondary);
     filter: drop-shadow(0 0 4px var(--brand-secondary));
 }

 .block {
     position: absolute;
     background: var(--bg-surface);
     color: var(--text-main);
     padding: 10px 14px;
     border-radius: 10px;
     font-size: 12px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-light);
 }

 .block-icon {
     width: 24px;
     height: 24px;
     border-radius: 6px;
     display: grid;
     place-items: center;
     border: 1px solid var(--border-light);
 }

 .block-origin {
     border: 2px solid var(--brand-gold);
 }

 .block-origin .block-icon {
     background: rgba(251, 191, 36, 0.15);
     color: var(--brand-gold);
 }

 .block-filter .block-icon {
     background: rgba(255, 255, 255, 0.05);
     color: white;
 }

 .block-match .block-icon {
     background: var(--bg-subtle);
     color: var(--text-muted);
 }

 .block-success {
     background: var(--success);
     color: white;
     border: 1px solid var(--border-light);
     box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
 }

 .block-success .block-icon {
     background: rgba(255, 255, 255, 0.2);
     color: white;
 }

 .b-source1 {
     top: 150px;
     left: 20px;
     z-index: 10;
 }

 .b-source2 {
     top: 70px;
     left: 220px;
 }

 .b-source3 {
     top: 230px;
     left: 220px;
 }

 .b-verify {
     top: 150px;
     right: 20px;
     z-index: 10;
 }

 .contact-row {
     display: flex;
     align-items: center;
     padding: 10px 14px;
     border-radius: 10px;
     border: 1px solid var(--border-light);
     background: var(--bg-surface);
 }

 .av-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--bg-subtle);
     margin-right: 14px;
     display: grid;
     place-items: center;
     font-weight: 800;
     font-size: 12px;
     color: var(--brand-gold);
     flex-shrink: 0;
     border: 1px solid var(--border-light);
 }

 .row-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex: 1;
     min-width: 0;
 }

 .row-name {
     font-size: 13px;
     font-weight: 700;
     color: var(--text-main);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .row-role {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .row-email {
     font-size: 12px;
     font-weight: 600;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .row-phone {
     font-size: 11px;
     font-weight: 500;
     color: var(--text-muted);
 }

 .intel-card {
     border: 1px solid var(--border-light);
     border-radius: 10px;
     padding: 14px;
     background: var(--bg-surface);
     margin-bottom: 6px;
 }

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

 .tc-company {
     font-size: 13px;
     font-weight: 800;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .tc-industry {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-muted);
     background: var(--bg-subtle);
     padding: 4px 8px;
     border-radius: 4px;
     border: 1px solid var(--border-light);
 }

 .intel-tags-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
 }

 .intel-badge {
     font-size: 10px;
     font-weight: 600;
     padding: 4px 8px;
     border-radius: 6px;
     border: 1px solid var(--border-light);
     display: flex;
     align-items: center;
     gap: 6px;
     background: var(--bg-subtle);
     color: var(--text-main);
 }

 .intel-badge.tech {
     border-left: 3px solid var(--text-muted);
 }

 .intel-badge.funding {
     border-left: 3px solid var(--success);
 }

 .intent-card {
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding: 14px;
     border: 1px solid var(--border-light);
     border-radius: 10px;
     background: var(--bg-surface);
     margin-bottom: 6px;
 }

 .intent-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .intent-metric {
     font-size: 16px;
     font-weight: 800;
     color: var(--text-main);
 }

 .intent-label {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-muted);
 }

 .intent-bar-wrap {
     width: 100%;
     height: 6px;
     background: var(--bg-subtle);
     border-radius: 4px;
     overflow: hidden;
     position: relative;
     border: 1px solid var(--border-light);
 }

 .intent-bar-fill {
     height: 100%;
     background: var(--brand-gold);
     border-radius: 4px;
     border-right: 1px solid var(--border-light);
 }

 .export-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     text-align: center;
     padding: 20px;
 }

 .export-box {
     border: 2px dashed var(--border-light);
     border-radius: 16px;
     padding: 24px;
     width: 100%;
     background: var(--bg-subtle);
 }

 .export-box i {
     color: var(--brand-gold);
     margin-bottom: 12px;
 }

 .export-title {
     font-size: 16px;
     font-weight: 800;
     color: var(--text-main);
     margin-bottom: 8px;
 }

 .export-desc {
     font-size: 13.2px;
     color: var(--text-muted);
     margin-bottom: 20px;
 }

 .btn-download {
     background: var(--brand-gradient);
     color: #000;
     border: 1px solid var(--border-light);
     padding: 10px 20px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 13px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     box-shadow: var(--shadow-glow);
 }

 /* ─── GRAPHS BENTO GRID ─── */
 .bento-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 24px;
     position: relative;
     z-index: 10;
 }

 .bento-card {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-lg);
     padding: 32px;
     box-shadow: var(--shadow-sm);
     transition: var(--transition);
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
 }

 .bento-card:hover {
     box-shadow: var(--shadow-xl);
     transform: translateY(-4px);
     border-color: var(--brand-gold);
 }

 .bento-card h3 {
     font-size: 1.25rem;
     margin-bottom: 8px;
     color: var(--text-main);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .bento-card h3 i {
     color: var(--brand-gold);
 }

 .bento-card p {
     color: var(--text-muted);
     font-size: 1.05rem;
 }

 .span-4 {
     grid-column: span 4;
 }

 .span-8 {
     grid-column: span 8;
 }

 /* Funnel Graph */
 .mockup-funnel {
     margin-top: auto;
     border-radius: 12px;
     border: 1px solid var(--border-light);
     background: var(--bg-subtle);
     padding: 20px;
     position: relative;
     overflow: hidden;
 }

 .funnel-row {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 12px;
     position: relative;
 }

 .funnel-row:last-child {
     margin-bottom: 0;
 }

 .funnel-bar-wrap {
     flex: 1;
     background: var(--bg-surface);
     height: 28px;
     border-radius: 6px;
     overflow: hidden;
     border: 1px solid var(--border-light);
     position: relative;
 }

 .funnel-bar {
     height: 100%;
     border-radius: 4px;
     background: var(--border-hover);
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding-right: 12px;
     font-size: 11px;
     font-weight: 800;
     color: white;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
 }

 .funnel-bar.step-1 {
     width: 100%;
     background: var(--bg-subtle);
     color: var(--text-muted);
 }

 .funnel-bar.step-2 {
     width: 65%;
     background: rgba(251, 191, 36, 0.3);
     border-right: 2px solid var(--brand-gold);
     color: var(--brand-gold);
 }

 .funnel-bar.step-3 {
     width: 35%;
     background: var(--brand-gradient);
     color: #000;
     text-shadow: none;
     animation: pulseWidth 3s ease-in-out infinite alternate;
 }

 @keyframes pulseWidth {
     0% {
         width: 32%;
     }

     100% {
         width: 38%;
     }
 }

 /* Bar Graph */
 .bar-graph-card {
     position: relative;
     width: 100%;
     height: 220px;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 12px;
     margin-top: 32px;
     padding-top: 20px;
 }

 .bar-col {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
     justify-content: flex-end;
     height: 100%;
     position: relative;
 }

 .bar-fill {
     width: 100%;
     max-width: 40px;
     background: linear-gradient(to top, rgba(251, 191, 36, 0.1), var(--brand-gold));
     border-radius: 6px 6px 0 0;
     transition: height 1s ease-out;
     position: relative;
     border: 1px solid var(--brand-gold-light);
     border-bottom: none;
     opacity: 0.8;
 }

 .bar-fill:hover {
     opacity: 1;
     box-shadow: 0 -10px 20px rgba(251, 191, 36, 0.3);
     cursor: pointer;
 }

 .bar-label {
     font-size: 12px;
     color: var(--text-muted);
     font-weight: 700;
     text-transform: uppercase;
 }

 .bar-val {
     position: absolute;
     top: -28px;
     font-size: 13px;
     font-weight: 800;
     color: var(--text-main);
     opacity: 0;
     transition: opacity 0.3s;
     transform: translateY(5px);
 }

 .bar-fill:hover .bar-val {
     opacity: 1;
     transform: translateY(0);
 }

 .grid-bg-lines {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-bottom: 1px solid var(--border-light);
     z-index: 0;
     pointer-events: none;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .grid-bg-lines div {
     border-top: 1px dashed var(--border-light);
     width: 100%;
     opacity: 0.3;
 }

 /* Donut Graph */
 .donut-wrap {
     position: relative;
     width: 160px;
     height: 160px;
     margin: 32px auto 20px;
 }

 .donut-svg {
     transform: rotate(-90deg);
     width: 100%;
     height: 100%;
 }

 .donut-circle-bg {
     fill: none;
     stroke: var(--bg-subtle);
     stroke-width: 14;
 }

 .donut-circle-1 {
     fill: none;
     stroke: var(--brand-gold);
     stroke-width: 14;
     stroke-dasharray: 251.2;
     stroke-dashoffset: 60;
     stroke-linecap: round;
     filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
     transition: stroke-dashoffset 1.5s ease;
 }

 .donut-circle-2 {
     fill: none;
     stroke: var(--success);
     stroke-width: 14;
     stroke-dasharray: 251.2;
     stroke-dashoffset: 210;
     stroke-linecap: round;
     filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
     transition: stroke-dashoffset 1.5s ease;
 }

 .donut-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
 }

 .donut-center span {
     display: block;
     font-size: 28px;
     font-weight: 900;
     color: var(--text-main);
     line-height: 1;
 }

 .donut-center small {
     font-size: 11px;
     font-weight: 700;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .donut-legend {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin-top: 16px;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     font-weight: 600;
     color: var(--text-muted);
 }

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

 /* Area Graph */
 .area-graph-wrap {
     position: relative;
     width: 100%;
     height: 200px;
     margin-top: 32px;
 }

 .area-svg {
     width: 100%;
     height: 100%;
     overflow: visible;
 }

 .area-path {
     fill: url(#areaGradient);
     animation: fadeIn 2s ease-out;
 }

 .line-path {
     fill: none;
     stroke: var(--brand-gold);
     stroke-width: 3;
     filter: drop-shadow(0 4px 6px rgba(251, 191, 36, 0.3));
     stroke-dasharray: 1000;
     stroke-dashoffset: 1000;
     animation: dash 2s forwards ease-out;
 }

 .data-point {
     fill: var(--bg-surface);
     stroke: var(--brand-gold);
     stroke-width: 2;
     transition: all 0.3s;
     cursor: pointer;
 }

 .data-point:hover {
     fill: var(--brand-gold);
     r: 6;
 }

 @keyframes dash {
     to {
         stroke-dashoffset: 0;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* ─── VIDEO MOCKUP SECTION ─── */
 .video-mockup-wrapper {
     max-width: 1000px;
     margin: 0 auto;
     border-radius: var(--radius-lg);
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     box-shadow: var(--shadow-xl);
     position: relative;
     aspect-ratio: 16 / 10;
     overflow: hidden;
     z-index: 10;
 }

 .video-mockup-top {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     padding: 12px 16px;
     background: var(--bg-surface);
     border-bottom: 1px solid var(--border-light);
     display: flex;
     align-items: center;
     justify-content: space-between;
     z-index: 10;
 }

 .mac-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: 1px solid var(--border-light);
 }

 .mac-dot.red {
     background: #ff5f56;
 }

 .mac-dot.yellow {
     background: #ffbd2e;
 }

 .mac-dot.green {
     background: #27c93f;
 }

 .mock-url-bar {
     background: var(--bg-subtle);
     border-radius: 6px;
     padding: 6px 16px;
     font-size: 12px;
     color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 8px;
     width: 100%;
     max-width: 400px;
     justify-content: center;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
     border: 1px solid var(--border-light);
 }

 .simulated-video {
     width: 100%;
     height: 100%;
     background-color: var(--bg-subtle);
     background-image: radial-gradient(var(--border-hover) 1px, transparent 1px);
     background-size: 30px 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     padding-top: 48px;
 }

 .video-text {
     font-weight: 700;
     font-size: 1.2rem;
     color: var(--text-main);
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     padding: 12px 24px;
     border-radius: 99px;
     box-shadow: var(--shadow-sm);
     position: relative;
     z-index: 1;
 }

 .mock-cursor {
     position: absolute;
     color: var(--text-main);
     z-index: 20;
     animation: moveCursor 6s ease-in-out infinite;
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
 }

 @keyframes moveCursor {
     0% {
         top: 70%;
         left: 60%;
         transform: scale(1);
     }

     25% {
         top: 40%;
         left: 30%;
         transform: scale(1);
     }

     30% {
         top: 40%;
         left: 30%;
         transform: scale(0.9);
     }

     50% {
         top: 60%;
         left: 70%;
         transform: scale(1);
     }

     60% {
         top: 60%;
         left: 70%;
         transform: scale(0.9);
     }

     100% {
         top: 70%;
         left: 60%;
         transform: scale(1);
     }
 }

 .sim-pulse-ring {
     position: absolute;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--brand-gold);
     animation: pulseClick 6s infinite;
     opacity: 0;
     z-index: 15;
 }

 @keyframes pulseClick {

     0%,
     25% {
         opacity: 0;
         transform: scale(0.5);
         top: calc(40% + 12px);
         left: calc(30% + 12px);
     }

     28% {
         opacity: 0.5;
         transform: scale(1.5);
         top: calc(40% + 12px);
         left: calc(30% + 12px);
     }

     32% {
         opacity: 0;
         transform: scale(2);
         top: calc(40% + 12px);
         left: calc(30% + 12px);
     }

     55% {
         opacity: 0;
         transform: scale(0.5);
         top: calc(60% + 12px);
         left: calc(70% + 12px);
     }

     58% {
         opacity: 0.5;
         transform: scale(1.5);
         top: calc(60% + 12px);
         left: calc(70% + 12px);
     }

     62% {
         opacity: 0;
         transform: scale(2);
         top: calc(60% + 12px);
         left: calc(70% + 12px);
     }

     100% {
         opacity: 0;
     }
 }

 .video-progress-container {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 6px;
     background: rgba(255, 255, 255, 0.05);
     z-index: 10;
     border-top: 1px solid var(--border-light);
 }

 .video-progress-fill {
     height: 100%;
     background: var(--brand-gold);
     animation: videoProgress 15s linear infinite;
 }

 @keyframes videoProgress {
     0% {
         width: 0%;
     }

     100% {
         width: 100%;
     }
 }

 /* ─── API FLOWCHART ─── */
 .api-flowchart-wrapper {
     background: var(--bg-subtle);
     border-radius: var(--radius-lg);
     padding: 60px;
     position: relative;
     border: 1px solid var(--border-light);
     margin-top: 40px;
     box-shadow: var(--shadow-glass);
     z-index: 10;
 }

 .api-flowchart {
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     width: 100%;
     height: 480px;
     z-index: 2;
 }

 .flowchart-lines {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .fc-path {
     fill: none;
     stroke: var(--border-light);
     stroke-width: 2px;
 }

 .fc-col {
     display: flex;
     flex-direction: column;
     position: relative;
     z-index: 2;
     width: 30%;
     height: 100%;
     justify-content: center;
 }

 .fc-col.middle {
     width: 35%;
     align-items: center;
     justify-content: space-around;
 }

 .fc-col.right {
     align-items: flex-end;
     justify-content: space-around;
 }

 .fc-node-origin {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: 12px;
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 16px;
     width: 100%;
     max-width: 260px;
     box-shadow: var(--shadow-md);
     position: relative;
 }

 .fc-icon-bg {
     background: var(--brand-gradient);
     width: 48px;
     height: 48px;
     border-radius: 12px;
     display: grid;
     place-items: center;
     color: #000;
     border: 1px solid var(--border-light);
 }

 .fc-node-box {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: 8px;
     padding: 16px;
     width: 100%;
     max-width: 280px;
     transition: var(--transition);
     position: relative;
 }

 .fc-node-box:hover {
     border-color: var(--brand-gold);
     transform: translateY(-2px);
     box-shadow: var(--shadow-glow);
 }

 .fc-node-box h5 {
     font-size: 14px;
     margin-bottom: 4px;
     display: flex;
     align-items: center;
     gap: 8px;
     color: white;
     font-weight: 700;
 }

 .fc-node-box h5::before {
     content: "";
     display: block;
     width: 8px;
     height: 8px;
     background: var(--success);
     border-radius: 2px;
     border: 1px solid var(--border-light);
 }

 .fc-node-box p {
     font-size: 12px;
     color: var(--text-muted);
     margin-bottom: 12px;
 }

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

 .fc-tag {
     background: var(--bg-base);
     color: var(--text-muted);
     border: 1px solid var(--border-light);
     font-size: 10px;
     padding: 4px 8px;
     border-radius: 4px;
     font-weight: 600;
     letter-spacing: 0.05em;
 }

 .fc-crm-node {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: 8px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     max-width: 240px;
     transition: var(--transition);
 }

 .fc-crm-node:hover {
     border-color: var(--text-muted);
     background: var(--bg-subtle);
     transform: translateX(-4px);
 }

 .fc-crm-node span {
     font-size: 13px;
     font-weight: 600;
     color: white;
 }

 .fc-crm-node .plus {
     margin-left: auto;
     color: var(--text-muted);
     background: var(--bg-base);
     border: 1px solid var(--border-light);
     width: 24px;
     height: 24px;
     display: grid;
     place-items: center;
     border-radius: 4px;
     font-size: 12px;
 }

 /* ─── INDUSTRIES SECTION ─── */
 .industries-section {
     background: var(--bg-base);
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
     padding: 95px 0;
     text-align: center;
 }

 .industry-pills {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 18px 24px;
     margin-top: 54px;
 }

 .industry-pill {
     min-width: 190px;
     padding: 20px 30px;
     border-radius: 14px;
     background: rgba(0, 0, 0, .24);
     border: 1px solid var(--border-light);
     color: var(--text-main);
     font-weight: 800;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     box-shadow: var(--shadow-sm);
 }

 .industry-pill::before {
     content: '';
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--success);
     display: inline-block;
 }

 /* ─── CONCIERGE SERVICE SECTION ─── */
 .concierge-wrapper {
     background-color: var(--bg-subtle);
     color: #ffffff;
     padding: 120px 0;
     position: relative;
     overflow: hidden;
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
 }

 .concierge-content {
     position: relative;
     z-index: 10;
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     gap: 80px;
     align-items: center;
 }

 .concierge-label {
     color: var(--brand-gold);
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.15em;
     margin-bottom: 16px;
     font-size: 14px;
     display: inline-block;
     padding: 4px 12px;
     border-radius: 99px;
     border: 1px solid var(--border-light);
     background: rgba(255, 255, 255, 0.05);
 }

 .concierge-heading {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     line-height: 1.15;
     margin-bottom: 24px;
     letter-spacing: -0.03em;
     color: #ffffff;
 }

 .concierge-text {
     font-size: 1.26rem;
     color: var(--text-muted);
     margin-bottom: 48px;
     line-height: 1.6;
 }

 .c-list-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 32px;
 }

 .c-list-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: rgba(251, 191, 36, 0.1);
     display: grid;
     place-items: center;
     color: var(--brand-gold);
     flex-shrink: 0;
     border: 1px solid var(--border-light);
 }

 .c-list-text h4 {
     font-size: 16px;
     color: #ffffff;
     margin-bottom: 6px;
     font-weight: 700;
 }

 .c-list-text p {
     font-size: 15.4px;
     color: var(--text-muted);
     line-height: 1.5;
 }

 .c-mockup {
     background: var(--glass-bg);
     border: 1px solid var(--border-light);
     border-radius: 20px;
     overflow: hidden;
     backdrop-filter: blur(20px);
     box-shadow: var(--shadow-glass);
     position: relative;
     z-index: 10;
 }

 .c-mockup-header {
     padding: 24px;
     border-bottom: 1px solid var(--border-light);
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: linear-gradient(to right, rgba(255, 255, 255, 0.02), transparent);
 }

 .c-mockup-title {
     display: flex;
     align-items: center;
     gap: 12px;
     font-weight: 700;
     font-size: 16px;
     color: white;
 }

 .c-mockup-badge {
     font-size: 11px;
     font-weight: 700;
     color: #000;
     background: var(--brand-gold);
     padding: 6px 12px;
     border-radius: 99px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border: 1px solid var(--border-light);
 }

 .c-mockup-table {
     width: 100%;
     border-collapse: collapse;
     border-top: 1px solid var(--border-light);
 }

 .c-mockup-table th {
     padding: 16px 24px;
     text-align: left;
     font-size: 11px;
     font-weight: 800;
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border-bottom: 1px solid var(--border-light);
 }

 .c-mockup-table td {
     padding: 20px 24px;
     border-bottom: 1px solid var(--border-light);
     font-size: 14px;
     color: var(--text-main);
     font-weight: 500;
 }

 .c-mockup-table tr:hover td {
     background: rgba(255, 255, 255, 0.02);
 }

 .c-av-wrap {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .c-av {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-weight: 700;
     font-size: 13px;
     color: white;
     border: 1px solid var(--border-light);
 }

 .c-status {
     padding: 6px 12px;
     border-radius: 6px;
     font-size: 11px;
     font-weight: 800;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     border: 1px solid var(--border-light);
 }

 .c-status.confirmed {
     background: rgba(16, 185, 129, 0.1);
     color: #34d399;
 }

 .c-status.pending {
     background: rgba(255, 255, 255, 0.05);
     color: var(--text-muted);
 }

 /* ─── DATA DEMO SECTION ─── */
 .data-section {
     border-top: 1px solid var(--border-light);
     border-bottom: 1px solid var(--border-light);
     position: relative;
     z-index: 10;
     padding: 80px 0;
 }

 .search-app-ui {
     background: var(--bg-surface);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
     overflow: hidden;
 }

 .app-toolbar {
     padding: 16px 24px;
     border-bottom: 1px solid var(--border-light);
     display: flex;
     gap: 16px;
     align-items: center;
     background: var(--bg-base);
 }

 .app-search {
     flex: 1;
     display: flex;
     align-items: center;
     gap: 12px;
     background: var(--bg-subtle);
     padding: 10px 16px;
     border-radius: 8px;
     border: 1px solid var(--border-light);
 }

 .app-search input {
     border: none;
     background: transparent;
     outline: none;
     width: 100%;
     font-family: inherit;
     font-size: 14px;
     color: var(--text-main);
 }

 .app-table {
     width: 100%;
     border-collapse: collapse;
     text-align: left;
 }

 .app-table th {
     padding: 16px 24px;
     font-size: 12px;
     font-weight: 800;
     text-transform: uppercase;
     color: var(--text-muted);
     border-bottom: 1px solid var(--border-light);
     background: var(--bg-base);
     border-top: 1px solid var(--border-light);
 }

 .app-table td {
     padding: 16px 24px;
     border-bottom: 1px solid var(--border-light);
     font-size: 14px;
     font-weight: 500;
     transition: var(--transition);
 }

 .app-table tr:hover td {
     background: var(--bg-subtle);
 }

 .contact-cell {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .contact-cell .av {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-weight: 700;
     font-size: 12px;
     flex-shrink: 0;
     border: 1px solid var(--border-light);
     background: var(--bg-subtle);
     color: var(--text-main);
 }

 .contact-name {
     font-weight: 700;
     color: var(--text-main);
     font-size: 15px;
 }

 .contact-role {
     font-size: 13px;
     color: var(--text-muted);
 }

 .blur-text {
     filter: blur(4px);
     opacity: 0.6;
     user-select: none;
 }

 .app-table tr:hover .blur-text {
     filter: blur(2px);
 }

 .unlock-btn {
     padding: 6px 12px;
     font-size: 12px;
     font-weight: 700;
     background: var(--brand-gold);
     color: #000;
     border-radius: 6px;
     border: 1px solid var(--border-light);
 }

 /* ─── BIG CTA ─── */
 .big-cta {
     background: var(--glass-bg);
     backdrop-filter: blur(20px);
     border: 1px solid var(--border-light);
     box-shadow: var(--shadow-glass);
     border-radius: var(--radius-xl);
     padding: 80px 40px;
     text-align: center;
     position: relative;
     overflow: hidden;
     margin-bottom: 80px;
     z-index: 10;
     margin-top: 60px;
 }

 .big-cta h2 {
     color: var(--text-main);
     margin-bottom: 24px;
 }

 .big-cta p {
     color: var(--text-muted);
     font-size: 1.32rem;
     margin-bottom: 40px;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .big-cta .btn-primary {
     background: var(--gold-gradient);
     color: #000 !important;
     box-shadow: none !important;
     padding: 18px 40px;
     font-size: 18px;
     border: 1px solid var(--border-light);
 }

 .big-cta .btn-primary:hover {
     transform: scale(1.05);
     box-shadow: var(--shadow-gold);
 }

 /* ─── FOOTER ─── */
 .footer {
     padding: 60px 0;
     background: var(--bg-base);
     border-top: 1px solid var(--border-light);
     position: relative;
     z-index: 10;
 }

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

 .footer-col h4 {
     font-weight: 800;
     margin-bottom: 20px;
     font-size: 14px;
     text-transform: uppercase;
     color: var(--text-main);
 }

 .footer-col ul {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .footer-col a {
     color: var(--text-muted);
     font-weight: 500;
     font-size: 15.4px;
 }

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

 .footer-bottom {
     border-top: 1px solid var(--border-light);
     padding-top: 32px;
     display: flex;
     justify-content: space-between;
     color: var(--text-muted);
     font-size: 15.4px;
     font-weight: 500;
 }

 .footer p {
     font-size: 15.4px;
 }

 /* ─── ANIMATIONS ─── */
 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease, transform 0.8s ease;
 }

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

 .heading_top h3 {
     color: #ffffff !important;
     margin-bottom: 5px;
 }

 .popbody .account-modal .account-modal-dialog {
     width: min(1080px, calc(100vw - 32px));
     margin: 32px auto;
 }

 .popbody .account-modal .account-modal-content {
     background:
         radial-gradient(circle at top left, rgba(251, 191, 36, 0.16), transparent 34%),
         radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.16), transparent 28%),
         linear-gradient(145deg, rgba(18, 24, 41, 0.98), rgba(7, 9, 15, 0.98));
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 28px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
 }

 .popbody .account-modal .account-modal-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 24px;
     padding: 28px 32px 0;
     border-bottom: 0;
 }

 .popbody .account-modal-brand h2 {
     margin: 6px 0 0;
     font-size: clamp(2rem, 3vw, 2.5rem);
     color: #ffffff;
 }

 .popbody .account-modal-kicker,
 .popbody .auth-kicker,
 .popbody .auth-aside-kicker {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 7px 14px;
     border-radius: 999px;
     background: rgba(251, 191, 36, 0.12);
     border: 1px solid rgba(251, 191, 36, 0.22);
     color: #fde68a;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
 }

 .popbody .account-modal-close.close {
     width: 44px;
     height: 44px;
     margin: 0;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.12);
     color: #ffffff;
     opacity: 1;
     font-size: 28px;
     line-height: 1;
     text-shadow: none;
     transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
 }

 .popbody .account-modal-close.close:hover,
 .popbody .account-modal-close.close:focus {
     background: rgba(251, 191, 36, 0.16);
     border-color: rgba(251, 191, 36, 0.35);
     color: #ffffff;
     transform: translateY(-1px);
     outline: none;
 }

 .popbody .account-modal .account-modal-body {
     padding: 24px 32px 32px;
 }

 .popbody .auth-shell {
     position: relative;
 }

 .popbody .auth-shell-split::before {
     content: "";
     position: absolute;
     top: 0;
     right: 33%;
     width: 1px;
     height: 100%;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
 }

 .popbody .auth-panel {
     border-radius: 24px;
     background: rgba(8, 11, 20, 0.46);
     border: 1px solid rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(12px);
     padding: 28px;
 }

 .popbody .auth-heading {
     margin-bottom: 24px;
 }

 .popbody .auth-heading h3 {
     margin-top: 14px;
     margin-bottom: 8px;
     font-size: clamp(1.9rem, 2.8vw, 2.45rem);
     letter-spacing: -0.05em;
 }

 .popbody .auth-heading p {
     margin: 0;
     color: #cbd5e1;
     font-size: 15px;
     line-height: 1.6;
 }

 .popbody .auth-grid {
     display: grid;
     grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.72fr);
     gap: 32px;
     align-items: stretch;
 }

 .popbody .auth-grid-single {
     grid-template-columns: minmax(0, 1fr);
 }

 .popbody .auth-fields,
 .popbody .auth-aside {
     width: 100%;
 }

 .popbody .auth-aside-panel {
     display: flex;
     height: 100%;
     flex-direction: column;
     justify-content: center;
     padding: 24px;
     border-radius: 22px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
     border: 1px solid rgba(255, 255, 255, 0.08);
 }

 .popbody .auth-aside-panel h4 {
     margin: 16px 0 12px;
     font-size: 1.8rem;
     line-height: 1.15;
     color: #ffffff;
 }

 .popbody .auth-aside-panel p {
     margin-bottom: 0;
     color: #cbd5e1;
     font-size: 14px;
 }

 .popbody .auth-social-stack {
     display: grid;
     gap: 14px;
     margin-top: 24px;
 }

 .popbody .account-modal .form-control {
     width: 100%;
     height: 54px;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: rgba(255, 255, 255, 0.04);
     color: #ffffff;
     box-shadow: none;
     padding: 14px 18px;
     font-size: 15px;
     transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 }

 .popbody .account-modal .form-control::placeholder {
     color: #94a3b8;
 }

 .popbody .account-modal .form-control:focus {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(251, 191, 36, 0.55);
     box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.12);
     outline: none;
 }

 .popbody .account-modal .form-control.input-error {
     border-color: #f87171;
     box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
 }

 .popbody .auth-hidden-field {
     display: none;
 }

 .popbody .login_submit,
 .popbody .google_btn,
 .popbody .facebook_btn {
     width: 100%;
     min-height: 54px;
     border-radius: 16px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     font-size: 15px;
     font-weight: 700;
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
 }

 .popbody .login_submit {
     background: linear-gradient(135deg, #fde047, #d97706);
     color: #111827 !important;
     box-shadow: 0 18px 36px rgba(217, 119, 6, 0.28);
 }

 .popbody .login_submit:hover,
 .popbody .login_submit:focus {
     color: #111827 !important;
     transform: translateY(-1px);
     box-shadow: 0 22px 42px rgba(217, 119, 6, 0.34);
     outline: none;
 }

 .popbody .google_btn,
 .popbody .facebook_btn {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
     color: #ffffff !important;
 }

 .popbody .google_btn:hover,
 .popbody .facebook_btn:hover,
 .popbody .google_btn:focus,
 .popbody .facebook_btn:focus {
     border-color: rgba(251, 191, 36, 0.32);
     background: rgba(255, 255, 255, 0.08);
     color: #ffffff !important;
     transform: translateY(-1px);
     outline: none;
 }

 .popbody .google_btn img,
 .popbody .facebook_btn img {
     width: 18px;
     height: 18px;
 }

 .popbody .auth-inline-error {
     display: block;
     margin-top: 10px;
     color: #fca5a5;
     font-size: 13px;
     line-height: 1.5;
 }

 .popbody .erronreg {
     color: inherit;
     font-weight: 600;
 }

 .popbody .erronreg a {
     color: #fde68a !important;
 }

 .popbody .auth-flash-message,
 .popbody #spforpassw h3 {
     margin-bottom: 20px;
     padding: 14px 16px;
     border-radius: 16px;
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.08);
     font-size: 14px;
     font-weight: 600;
     text-align: center;
 }

 .popbody .auth-meta {
     color: #cbd5e1;
     font-size: 14px;
 }

 .popbody .log_signup,
 .popbody .auth-terms-copy {
     margin-bottom: 10px;
 }

 .popbody .forgotpass,
 .popbody .log_signup a {
     color: #fde68a !important;
     font-weight: 700;
 }

 .popbody .forgotpass:hover,
 .popbody .log_signup a:hover {
     color: #fbbf24 !important;
 }

 .popbody .auth-center {
     text-align: center;
 }

 .popbody .modal-backdrop.in {
     opacity: 0.72;
 }

 .menu-right-section {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .dashboard-btn {
     display: none !important;
 }

 /* ─── RESPONSIVE ─── */
 @media (max-width: 1150px) {

     .nav-links {
         display: none !important;
     }

     .mobile-menu-toggle {
         display: block !important;
     }

     .hamburger {
         background: none;
         border: none;
         cursor: pointer;
         display: flex;
         flex-direction: column;
         gap: 5px;
     }

     .bar {
         width: 22px;
         height: 2px;
         background: #ffffff;
         border-radius: 2px;
         transition: transform .25s, opacity .25s;
     }

     .hamburger.open .bar:nth-child(1) {
         transform: translateY(7px) rotate(45deg);
     }

     .hamburger.open .bar:nth-child(2) {
         opacity: 0;
     }

     .hamburger.open .bar:nth-child(3) {
         transform: translateY(-7px) rotate(-45deg);
     }

     .nav-links {
         position: fixed;
         top: 80px;
         right: -100%;
         background: #0b0e15;
         border-right: 1px solid #0b0e15;
         z-index: 9;
         transition: right .28s ease;
         height: calc(100vh - 80px);
         width: 300px;
         text-align: left;
         flex-direction: column;
         padding: 20px 30px;
         overflow: auto;
     }

     .nav-links.open {
         right: 0;
         display: flex !important;
     }

     .overlay {
         position: fixed;
         inset: 0;
         background: rgba(0, 0, 0, .25);
         z-index: 8;
         opacity: 0;
         pointer-events: none;
         transition: opacity .28s;
         height: 100vh;
         width: 100vw;
     }

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

     .nav-links a {
         display: block;
         width: 100%;
         color: #e0e0e0;
     }

     .btn-nav {
         padding: 6px 5px !important;
     }

     .nav-left {
         margin-right: 15px !important;
     }

     .nav-links .dashboard-btn {
         display: block !important;
     }
 }

 @media (max-width: 1024px) {
     .popbody .account-modal .account-modal-dialog {
         width: calc(100vw - 24px);
         margin: 18px auto;
     }

     .popbody .account-modal .account-modal-header,
     .popbody .account-modal .account-modal-body {
         padding-left: 22px;
         padding-right: 22px;
     }

     .popbody .auth-panel {
         padding: 22px;
     }

     .popbody .auth-grid {
         grid-template-columns: 1fr;
     }

     .popbody .auth-shell-split::before {
         display: none;
     }

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

     .span-4,
     .span-8 {
         grid-column: span 1;
     }

     .feature-row {
         grid-template-columns: 1fr;
         gap: 40px;
     }

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

     .concierge-content {
         grid-template-columns: 1fr;
     }

     .api-flowchart {
         flex-direction: column;
         height: auto;
         gap: 40px;
     }

     .fc-col,
     .fc-col.middle,
     .fc-col.right {
         width: 100%;
         align-items: center;
     }

     .flowchart-lines {
         display: none;
     }

     .api-flowchart-wrapper {
         padding: 40px 20px;
     }

     .fit-frame {
         min-height: auto;
         padding-top: 60px;
         padding-bottom: 60px;
     }
 }

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

 @media (max-width: 768px) {
     .popbody .account-modal-brand h2 {
         font-size: 1.7rem;
     }

     .popbody .account-modal .account-modal-header {
         align-items: center;
         padding-top: 22px;
     }

     .popbody .account-modal .account-modal-body {
         padding-top: 18px;
         padding-bottom: 22px;
     }

     .popbody .auth-panel {
         padding: 18px;
         border-radius: 20px;
     }

     .popbody .auth-aside-panel {
         padding: 20px;
     }

     .popbody .auth-heading h3 {
         font-size: 1.7rem;
     }

     .hero {
         padding: 140px 0 80px;
     }

     .massive-search {
         flex-direction: column;
         padding: 8px;
         border-radius: 16px;
         gap: 8px;
     }

     .search-input {
         padding: 16px;
         width: 100%;
         text-align: center;
     }

     .massive-search .btn-primary {
         width: 100%;
         border-radius: 8px;
     }

     .floating-cards-container {
         display: none;
     }

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

     .app-toolbar {
         flex-direction: column;
     }

     .app-table thead {
         display: none;
     }

     .app-table td {
         display: block;
         padding: 12px 24px;
         border: none;
     }

     .app-table tr {
         border-bottom: 1px solid var(--border-light);
         display: block;
         padding: 12px 0;
     }

     .c-mockup-table thead {
         display: none;
     }

     .c-mockup-table td {
         display: block;
         padding: 12px 24px;
         border: none;
     }

     .c-mockup-table tr {
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
         display: block;
         padding: 12px 0;
     }

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

     .mockup-scene {
         transform: scale(0.8);
         transform-origin: left center;
     }

     .container {
         padding: 15px;
     }
 }

 @media (max-width: 480px) {
     .popbody .account-modal .account-modal-dialog {
         width: calc(100vw - 16px);
         margin: 8px auto;
     }

     .popbody .account-modal .account-modal-header,
     .popbody .account-modal .account-modal-body {
         padding-left: 14px;
         padding-right: 14px;
     }

     .popbody .account-modal-close.close {
         width: 38px;
         height: 38px;
         font-size: 24px;
     }

     .popbody .auth-panel,
     .popbody .auth-aside-panel {
         padding: 16px;
     }

     .popbody .account-modal .form-control,
     .popbody .login_submit,
     .popbody .google_btn,
     .popbody .facebook_btn {
         min-height: 50px;
     }

     .mockup-scene {
         transform: scale(0.6);
         transform-origin: left center;
     }

     .animation-wrapper {
         height: 280px;
     }

     .sign-up-btn {
         display: none;
     }
 }

 .search-results-pagination li .btn.btn-page {
     border-radius: 4px !important;
     background: rgba(255, 255, 255, 0.05);
     color: var(--text-muted);
 }

 .search-results-pagination li .btn.btn-page.btn-page-active,
 .search-results-pagination li .btn.btn-page.btn-page-active:focus,
 .search-results-pagination li .btn.btn-page:hover {
     background: var(--gold-gradient) !important;
     color: #000 !important;
     box-shadow: var(--shadow-glow) !important;
 }

 body.page-ui-loading {
			background: var(--bg-base) !important;
		}

		body.page-ui-loading>* {
			visibility: hidden;
		}

		body.page-ui-loading::before {
			content: '';
			position: fixed;
			top: 50%;
			left: 50%;
			width: 56px;
			height: 56px;
			margin: -52px 0 0 -28px;
			border: 4px solid rgba(37, 99, 235, 0.15) !important;
			border-top-color: var(--color-primary) !important;
			border-radius: 50%;
			animation: pageUiSpinner 0.7s linear infinite;
			z-index: 9999;
		}

		body.page-ui-loading::after {
			content: 'Loading page...';
			position: fixed;
			top: 50%;
			left: 50%;
			margin: 18px 0 0 -70px;
			width: 140px;
			text-align: center;
			font: 600 14px/1.4 Arial, sans-serif;
			color: #334155;
			letter-spacing: 0.02em;
			z-index: 9999;
		}

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