:root {
         --primary: #135bec;
         --primary-dark: #0e44b3;
         --background-light: #f6f6f8;
         --background-dark: #101622;
         --primary: #2b4bee;
         --primary-light: #4a69ff;
         --secondary: #8b5cf6;
         --success: #10b981;
         --background: #f8fafc;
         --surface: #ffffff;
         --text-primary: #0f172a;
         --text-secondary: #64748b;
         --text-muted: #94a3b8;
         --border: #e2e8f0;
     }

     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         backface-visibility: hidden;
     }



     .material-icons,
     .material-icons-round {
         font-family: 'Material Icons Round', 'Material Icons' !important;
         font-weight: normal;
         font-style: normal;
         font-size: 1.25rem;
         line-height: 1;
         letter-spacing: normal;
         text-transform: none;
         display: inline-block;
         white-space: nowrap;
         word-wrap: normal;
         direction: ltr;
         -webkit-font-feature-settings: 'liga';
         -webkit-font-smoothing: antialiased;
     }

     body {
         font-family: 'Manrope', sans-serif;
         background-color: var(--background-light);
         color: #1e293b;
         overflow-x: hidden;
         --ease-enterprise: cubic-bezier(.16, 1, .3, 1);
     }

     /* Smooth Scrolling */
     html {
         scroll-behavior: smooth;
     }

     /* Hero Section */
     .hero-section {
         padding: 140px 0 80px;
         position: relative;
         overflow: hidden;
         background: white;
     }

     .hero-bg {
         position: absolute;
         inset: 0;
         opacity: 0.3;
         background-image: radial-gradient(#135bec 1px, transparent 1px);
         background-size: 20px 20px;
         animation: bgMove 20s linear infinite;
     }

     @keyframes bgMove {
         0% {
             background-position: 0 0;
         }

         100% {
             background-position: 20px 20px;
         }
     }

     .hero-badge {
         display: inline-block;
         padding: 6px 16px;
         border-radius: 50px;
         background: rgba(19, 91, 236, 0.1);
         color: var(--primary);
         font-weight: 600;
         font-size: 0.875rem;
         border: 1px solid rgba(19, 91, 236, 0.2);
         animation: fadeInDown 0.8s ease-out;
     }

     .hero-title {
         font-size: clamp(2.5rem, 6vw, 4.5rem);
         font-weight: 800;
         line-height: 1.1;
         margin: 1.5rem 0;
         animation: fadeInUp 0.8s ease-out 0.2s both;
     }

     .hero-subtitle {
         font-size: 1.25rem;
         color: #64748b;
         max-width: 700px;
         margin: 0 auto 2.5rem;
         animation: fadeInUp 0.8s ease-out 0.4s both;
     }



     .btn-secondary-custom {
         background: white;
         color: #334155;
         padding: 14px 32px;
         border-radius: 8px;
         font-weight: 600;
         border: 1px solid #e2e8f0;
         transition: all 0.3s ease;
         animation: fadeInUp 0.8s ease-out 0.7s both;
     }

     .btn-secondary-custom:hover {
         border-color: rgba(19, 91, 236, 0.5);
         color: var(--primary);
     }

     .btn-secondary-custom .material-icons-round {
         transition: transform 0.3s ease;
     }

     .btn-secondary-custom:hover .material-icons-round {
         transform: translateX(4px);
     }

     /* Hero Image */
     .hero-image-wrapper {
         margin-top: 4rem;
         animation: fadeInUp 0.8s ease-out 0.8s both;
     }

     .hero-image {
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
         border: 1px solid #e2e8f0;
         position: relative;
         transition: transform 0.5s ease;
     }

     .hero-image:hover img {
         transform: scale(1.05);
     }

     .hero-image img {
         width: 100%;
         height: auto;
         display: block;
         transition: transform 0.7s ease;
     }

     .hero-stats {
         position: absolute;
         bottom: 2rem;
         left: 50%;
         transform: translateX(-50%);
         background: rgba(255, 255, 255, 0.8);
         backdrop-filter: blur(12px);
         padding: 1.5rem 2rem;
         border-radius: 12px;
         border: 1px solid rgba(226, 232, 240, 0.8);
         display: flex;
         gap: 3rem;
         box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.1);
         animation: slideUp 0.8s ease-out 1s both;
     }

     @keyframes slideUp {
         from {
             opacity: 0;
             transform: translateX(-50%) translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateX(-50%) translateY(0);
         }
     }

     .stat-item {
         text-align: center;
     }

     .stat-value {
         font-size: 1.75rem;
         font-weight: 700;
         color: var(--primary);
         display: block;
     }

     .stat-label {
         font-size: 0.75rem;
         color: #64748b;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         font-weight: 500;
     }


     /* ================================
   CORE PLATFORMS — SEXY UPGRADE
================================ */

     #platforms {
         position: relative;
         overflow: hidden;
     }

     /* ambient tech glow */
     #platforms::before {
         content: "";
         position: absolute;
         inset: -30%;
         background:
             radial-gradient(600px 300px at 15% 20%, rgba(19, 91, 236, .10), transparent 60%),
             radial-gradient(500px 280px at 85% 30%, rgba(56, 189, 248, .10), transparent 60%);
         pointer-events: none;
     }


     .platform-card {
         background:
             linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
         border-radius: 18px;
         padding: 2.4rem 2rem 2.6rem;
         border: 1px solid rgba(15, 23, 42, .08);
         position: relative;
         overflow: hidden;
         height: 100%;
         transition:
             transform .65s cubic-bezier(.16, 1, .3, 1),
             box-shadow .65s cubic-bezier(.16, 1, .3, 1),
             border-color .4s ease;

     }

     .platform-card h3 {
         font-size: 1.35rem;
         font-weight: 500;
         letter-spacing: -.02em;
         margin-bottom: .85rem;
     }

     .platform-card,
     .bento-card {
         animation: floatIdle 6s ease-in-out infinite;
     }

     .platform-card:nth-child(2),
     .bento-card:nth-child(2) {
         animation-delay: .8s;
     }

     .platform-card:nth-child(3),
     .bento-card:nth-child(3) {
         animation-delay: 1.6s;
     }

     @keyframes floatIdle {
         0% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-6px);
         }

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

     /* ===============================
   INERTIA HOVER RESPONSE
=============================== */

     .platform-card,
     .bento-card {
         transition:
             transform .9s var(--ease-enterprise),
             box-shadow .9s var(--ease-enterprise);
     }

     .platform-card:hover,
     .bento-card:hover {
         transform: translateY(-12px) scale(1.015);
     }

     /* ===============================
   ICON MAGNETIC MOTION
=============================== */

     .platform-icon,
     .icon-circle {
         transition:
             transform .6s var(--ease-enterprise),
             box-shadow .6s var(--ease-enterprise);
     }

     .platform-card:hover .platform-icon,
     .bento-card:hover .icon-circle {
         transform: translateY(-6px) scale(1.15) rotate(6deg);
     }

     /* ===============================
   TEXT STAGGER MOTION
=============================== */

     .platform-card h3,
     .bento-card h3,
     .platform-card p,
     .bento-card p {
         opacity: 0;
         transform: translateY(12px);
         animation: textReveal .9s var(--ease-enterprise) forwards;
     }

     .platform-card p,
     .bento-card p {
         animation-delay: .15s;
     }

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

     /* ===============================
   PROCESS FLOW ANIMATION
=============================== */

     .process-step {
         opacity: 0;
         transform: translateY(16px);
         animation: processIn .8s var(--ease-enterprise) forwards;
     }

     .process-step:nth-child(1) {
         animation-delay: .1s;
     }

     .process-step:nth-child(2) {
         animation-delay: .25s;
     }

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

     .process-step:nth-child(4) {
         animation-delay: .55s;
     }

     .process-step:nth-child(5) {
         animation-delay: .7s;
     }

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

     /* gradient edge */
     .platform-card::after {
         content: "";
         position: absolute;
         inset: 0;
         border-radius: inherit;
         padding: 1px;
         background: linear-gradient(135deg,
                 rgba(19, 91, 236, .35),
                 rgba(56, 189, 248, .35),
                 transparent 60%);
         -webkit-mask:
             linear-gradient(#fff 0 0) content-box,
             linear-gradient(#fff 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
         opacity: 0;
         transition: opacity .5s ease;
     }

     .platform-card:hover::after {
         opacity: 1;
     }

     /* lift + presence */
     .platform-card:hover {
         transform: translateY(-14px) scale(1.015);
         box-shadow:
             0 40px 90px -30px rgba(15, 23, 42, .25);
         border-color: rgba(19, 91, 236, .35);
     }

     /* ICON — more authority */
     .platform-icon {
         width: 54px;
         height: 54px;
         border-radius: 14px;
         background:
             linear-gradient(135deg, rgba(19, 91, 236, .15), rgba(56, 189, 248, .15));
         color: var(--primary);
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 1.8rem;
         box-shadow: inset 0 0 0 1px rgba(19, 91, 236, .25);
         transition: all .5s cubic-bezier(.16, 1, .3, 1);
     }


     .platform-card:hover .platform-icon {
         background: linear-gradient(135deg, var(--primary), #38bdf8) !important;
         color: #fff;
         transform: translateY(-4px) scale(1.15) rotate(6deg);
         box-shadow: 0 18px 40px rgba(19, 91, 236, .45);
     }

     @import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');

     .londrina-outline-regular {
         font-family: "Londrina Outline", sans-serif;
         font-weight: 400;
         font-style: normal;
     }

     .step-bg {
         position: absolute;
         bottom: 1.2rem;
         right: 1.5rem;
         transform: none;
         font-size: 6rem;
         font-weight: 500;
         color: #acd4ff;
         opacity: 0.25;
         z-index: 1;
         pointer-events: none;
         user-select: none;
         line-height: 1;
         font-family: "Londrina Outline", sans-serif;
     }

     @media (max-width: 991px) {


         .step-bg {
             font-size: 3rem;
             right: 1rem;
             bottom: 1rem;
         }
     }

     @media (max-width: 575px) {
         .step-bg {
             font-size: 1.5rem;
             right: 0.5rem;
             bottom: 0.5rem;
         }
     }

     /* TEXT — tighter, executive */
     .platform-card h3 {
         font-size: 1.35rem;
         font-weight: 800;
         letter-spacing: -.02em;
         margin-bottom: .85rem;
     }

     .platform-card p {
         font-size: .92rem;
         line-height: 1.75;
         color: #475569;
     }

     /* CTA — engineered motion */
     .learn-more {
         margin-top: 1.4rem;
         display: inline-flex;
         align-items: center;
         gap: 6px;
         font-weight: 700;
         font-size: .85rem;
         color: var(--primary);
         position: relative;
         text-decoration: none;
     }

     .learn-more::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -4px;
         width: 0;
         height: 2px;
         background: linear-gradient(90deg, var(--primary), #38bdf8);
         transition: width .4s cubic-bezier(.16, 1, .3, 1);
     }

     .platform-card:hover .learn-more::after {
         width: 100%;
     }

     .platform-card:hover .learn-more .material-icons-round {
         transform: translateX(6px);
     }

     /* Bento Grid Services */
     .bento-card {
         border-radius: 16px;
         overflow: hidden;
         border: 1px solid #e2e8f0;
         transition: all 0.4s ease;
         height: 100%;
         position: relative;
     }

     .bento-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.1);
     }

     .bento-card img {
         transition: transform 0.7s ease;
     }

     .bento-card:hover img {
         transform: scale(1.08);
     }

     .bento-large {
         background: #f8fafc;
         min-height: 320px;
     }

     .bento-image {
         background: #f8fafc;
         min-height: 320px;
         position: relative;
     }

     .bento-overlay {
         position: absolute;
         inset: 0;
         background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
         padding: 2rem;
         color: white;
     }

     .bento-primary {
         background: var(--primary);
         color: white;
         min-height: 320px;
         position: relative;
         overflow: hidden;
     }

     .bento-primary::before {
         content: '';
         position: absolute;
         top: -100px;
         right: -100px;
         width: 250px;
         height: 250px;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         filter: blur(60px);
     }

     .icon-circle {
         width: 48px;
         height: 48px;
         background: rgba(255, 255, 255, 0.2);
         backdrop-filter: blur(10px);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
     }

     .bento-primary:hover .icon-circle {
         background: rgba(255, 255, 255, 0.3);
         transform: scale(1.1);
     }

     /* Feature List */
     .feature-list {
         list-style: none;
         padding: 0;
     }

     .feature-item {
         display: flex;
         align-items: flex-start;
         gap: 1rem;
         margin-bottom: 1.5rem;
         animation: fadeInLeft 0.6s ease-out both;
     }

     .feature-item:nth-child(1) {
         animation-delay: 0.1s;
     }

     .feature-item:nth-child(2) {
         animation-delay: 0.2s;
     }

     .feature-item:nth-child(3) {
         animation-delay: 0.3s;
     }

     .feature-icon {
         width: 24px;
         height: 24px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         margin-top: 4px;
     }

     .icon-green {
         background: rgba(34, 197, 94, 0.1);
         color: #22c55e;
     }

     .icon-blue {
         background: rgba(19, 91, 236, 0.1);
         color: var(--primary);
     }

     .icon-purple {
         background: rgba(168, 85, 247, 0.1);
         color: #a855f7;
     }

     /* Code Block */
     .code-block {
         background: #1e293b;
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         border: 1px solid #334155;
         animation: fadeInRight 0.8s ease-out;
         position: relative;
     }

     .code-block::before {
         content: '';
         position: absolute;
         inset: -4px;
         background: linear-gradient(135deg, rgba(19, 91, 236, 0.3), rgba(168, 85, 247, 0.3));
         border-radius: 14px;
         filter: blur(15px);
         opacity: 0.5;
         z-index: -1;
     }

     .code-header {
         display: flex;
         align-items: center;
         padding: 0.75rem 1rem;
         background: #0f172a;
         border-bottom: 1px solid #334155;
     }

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

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

     .dot-red {
         background: #ef4444;
     }

     .dot-yellow {
         background: #eab308;
     }

     .dot-green {
         background: #22c55e;
     }

     .code-content {
         padding: 1.5rem;
         font-family: 'Courier New', monospace;
         font-size: 0.875rem;
         line-height: 1.8;
     }

     .code-keyword {
         color: #ec4899;
     }

     .code-property {
         color: #60a5fa;
     }

     .code-string {
         color: #4ade80;
     }

     .code-boolean {
         color: #a78bfa;
     }

     .code-comment {
         color: #64748b;
     }

     /* Process Steps */
     .process-step {
         background: white;
         padding: 1.5rem;
         border-radius: 12px;
         border: 1px solid #e2e8f0;
         text-align: center;
         transition: all 0.3s ease;
         position: relative;
         animation: fadeInUp 0.6s ease-out both;
     }

     .process-step:nth-child(1) {
         animation-delay: 0.1s;
     }

     .process-step:nth-child(2) {
         animation-delay: 0.2s;
     }

     .process-step:nth-child(3) {
         animation-delay: 0.3s;
     }

     .process-step:nth-child(4) {
         animation-delay: 0.4s;
     }

     .process-step:nth-child(5) {
         animation-delay: 0.5s;
     }

     .process-step:hover {
         border-color: rgba(19, 91, 236, 0.5);
         transform: translateY(-4px);
     }

     .process-number {
         width: 48px;
         height: 48px;
         border-radius: 50%;
         background: #f8fafc;
         border: 2px solid var(--primary);
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1rem;
         font-weight: 700;
         color: var(--primary);
         transition: all 0.3s ease;
     }

     .process-step:hover .process-number {
         background: var(--primary);
         color: white;
         transform: scale(1.1);
     }

     .process-step.inactive .process-number {
         border-color: #cbd5e1;
         color: #94a3b8;
     }

     .process-step:hover.inactive .process-number {
         border-color: var(--primary);
         color: var(--primary);
     }

     /* CTA Section */
     .cta-section {
         background: #1e293b;
         position: relative;
         overflow: hidden;
     }

     .cta-section::before {
         content: '';
         position: absolute;
         inset: 0;
         background: linear-gradient(135deg, rgba(19, 91, 236, 0.3), transparent);
     }

     .cta-glow {
         position: absolute;
         top: -200px;
         right: -200px;
         width: 500px;
         height: 500px;
         background: rgba(19, 91, 236, 0.3);
         border-radius: 50%;
         filter: blur(100px);
     }

     /* Keyframe Animations */
     @keyframes fadeInDown {
         from {
             opacity: 0;
             transform: translateY(-20px);
         }

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

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

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

     @keyframes fadeInLeft {
         from {
             opacity: 0;
             transform: translateX(-20px);
         }

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

     @keyframes fadeInRight {
         from {
             opacity: 0;
             transform: translateX(20px);
         }

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

     /* Scroll Reveal Animation */
     .reveal {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     }

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

     /* Responsive */
     @media (max-width: 768px) {
         .hero-stats {
             flex-direction: column;
             gap: 1rem;
             padding: 1rem;
         }

         .hero-title {
             font-size: 2.5rem;
         }

         .stat-item {
             padding: 0.5rem 0;
         }
     }

     /* Decorative Elements */
     .decorative-grid {
         position: absolute;
         inset: 0;
         opacity: 0.05;
         background-image: radial-gradient(#135bec 1px, transparent 1px);
         background-size: 10px 10px;
     }

     /* Footer Animations */
     footer a {
         transition: color 0.3s ease;
     }

     footer a:hover {
         color: var(--primary) !important;
     }

     .social-icon {
         width: 32px;
         height: 32px;
         border-radius: 50%;
         background: #f1f5f9;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #64748b;
         transition: all 0.3s ease;
     }

     .social-icon:hover {
         background: var(--primary);
         color: white;
         transform: translateY(-2px);
     }

     /* ---- RADIAL GRADIENT (BOTTOM RIGHT) ---- */
     .platform-card::before {
         content: "";
         position: absolute;
         inset: -45%;
         background:
             radial-gradient(520px 360px at 90% 90%,
                 rgba(19, 91, 236, 0.22),
                 rgba(56, 189, 248, 0.12),
                 transparent 65%);
         opacity: .9;
         pointer-events: none;
         z-index: 0;
     }





     /* ========== ANIMATED BACKGROUND GRID ========== */
     .cyber-grid {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image:
             linear-gradient(rgba(43, 75, 238, 0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(43, 75, 238, 0.03) 1px, transparent 1px);
         background-size: 50px 50px;
         animation: gridMove 20s linear infinite;
         pointer-events: none;
         z-index: 0;
     }

     @keyframes gridMove {
         0% {
             transform: translate(0, 0);
         }

         100% {
             transform: translate(50px, 50px);
         }
     }

     /* ========== FLOATING PARTICLES ========== */
     .particles {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         pointer-events: none;
         z-index: 1;
     }

     .particle {
         position: absolute;
         background: radial-gradient(circle, rgba(43, 75, 238, 0.8) 0%, transparent 70%);
         border-radius: 50%;
         animation: float 15s infinite;
         opacity: 0;
     }

     @keyframes float {

         0%,
         100% {
             transform: translateY(0) translateX(0);
             opacity: 0;
         }

         10% {
             opacity: 0.3;
         }

         50% {
             opacity: 0.5;
         }

         90% {
             opacity: 0.3;
         }
     }

     .particle:nth-child(1) {
         width: 3px;
         height: 3px;
         left: 10%;
         animation-delay: 0s;
         animation-duration: 12s;
     }

     .particle:nth-child(2) {
         width: 5px;
         height: 5px;
         left: 30%;
         animation-delay: 2s;
         animation-duration: 15s;
     }

     .particle:nth-child(3) {
         width: 4px;
         height: 4px;
         left: 50%;
         animation-delay: 4s;
         animation-duration: 18s;
     }

     .particle:nth-child(4) {
         width: 6px;
         height: 6px;
         left: 70%;
         animation-delay: 1s;
         animation-duration: 14s;
     }

     .particle:nth-child(5) {
         width: 3px;
         height: 3px;
         left: 90%;
         animation-delay: 3s;
         animation-duration: 16s;
     }

     /* ========== GLOWING ORBS BACKGROUND ========== */
     .glow-orb {
         position: fixed;
         border-radius: 50%;
         filter: blur(100px);
         opacity: 0.15;
         pointer-events: none;
         animation: orbFloat 20s ease-in-out infinite;
     }

     .orb-1 {
         width: 500px;
         height: 500px;
         background: #2b4bee;
         top: -200px;
         right: -200px;
         animation-delay: 0s;
     }

     .orb-2 {
         width: 400px;
         height: 400px;
         background: #6366f1;
         bottom: -150px;
         left: -150px;
         animation-delay: 5s;
     }

     .orb-3 {
         width: 300px;
         height: 300px;
         background: #8b5cf6;
         top: 50%;
         left: 50%;
         animation-delay: 10s;
     }

     @keyframes orbFloat {

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

         50% {
             transform: translate(30px, -30px) scale(1.1);
         }
     }

     /* ========== SECTION STYLING ========== */
     section {
         position: relative;
         z-index: 2;
     }

     /* ========== BADGE ANIMATIONS ========== */
     .badge-pulse {
         animation: badgePulse 2s ease-in-out infinite;
         backdrop-filter: blur(10px);
     }

     @keyframes badgePulse {

         0%,
         100% {
             box-shadow: 0 0 0 0 rgba(43, 75, 238, 0.7);
         }

         50% {
             box-shadow: 0 0 0 10px rgba(43, 75, 238, 0);
         }
     }

     .badge-custom {
         display: inline-flex;
         align-items: center;
         border-radius: 50px;
         background: rgba(43, 75, 238, 0.2);
         padding: 8px 16px;
         font-size: 0.75rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1.5px;
         color: #2b4bee;
         border: 1px solid rgba(43, 75, 238, 0.3);
     }

     .pulse-dot {
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: #2b4bee;
         animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             opacity: 1;
         }

         50% {
             opacity: 0.5;
         }
     }

     .pulse-dot:nth-child(2) {
         animation-delay: 0.5s;
     }

     /* ========== TITLE GRADIENT ANIMATION ========== */
     .gradient-text1 {
         background: linear-gradient(135deg, #fff 0%, #2b4bee 50%, #8b5cf6 100%);
         background-size: 200% 200%;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         animation: gradientShift 3s ease infinite;
     }

     @keyframes gradientShift {

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

         50% {
             background-position: 100% 50%;
         }
     }

     /* ========== TECH CARD ULTRA MODERN STYLING ========== */
     .tech-card {
         position: relative;
         background: rgba(15, 23, 42, 0.6);
         backdrop-filter: blur(20px);
         border: 1px solid rgba(43, 75, 238, 0.1);
         border-radius: 20px;
         padding: 2rem;
         overflow: hidden;
         transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         transform-style: preserve-3d;
         height: 100%;
     }

     .tech-card::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         height: 1px;
         background: linear-gradient(90deg,
                 transparent 0%,
                 rgba(43, 75, 238, 0.6) 50%,
                 transparent 100%);
         transform: translateX(-100%);
         transition: transform 0.8s ease;
     }

     .tech-card:hover::before {
         transform: translateX(100%);
     }

     /* Holographic Border Effect */
     .tech-card::after {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: linear-gradient(45deg,
                 #2b4bee,
                 #6366f1,
                 #8b5cf6,
                 #2b4bee);
         border-radius: 20px;
         z-index: -1;
         opacity: 0;
         filter: blur(10px);
         transition: opacity 0.5s ease;
         background-size: 300% 300%;
         animation: holographicShift 3s ease infinite;
     }

     @keyframes holographicShift {

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

         50% {
             background-position: 100% 50%;
         }
     }

     .tech-card:hover::after {
         opacity: 0.5;
     }

     .tech-card:hover {
         transform: translateY(-12px) scale(1.02);
         border-color: rgba(43, 75, 238, 0.4);
         box-shadow:
             0 0 60px rgba(43, 75, 238, 0.3),
             0 20px 60px -15px rgba(0, 0, 0, 0.5),
             inset 0 1px 0 rgba(255, 255, 255, 0.1);
     }

     /* ========== ICON CONTAINER WITH GLOW ========== */
     .icon-container {
         position: relative;
         width: 60px;
         height: 60px;
         background: linear-gradient(135deg, rgba(43, 75, 238, 0.2), rgba(139, 92, 246, 0.2));
         border-radius: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-bottom: 1.5rem;
         transition: all 0.4s ease;
         box-shadow: 0 0 30px rgba(43, 75, 238, 0.2);
     }

     .tech-card:hover .icon-container {
         transform: scale(1.1) rotate(5deg);
         box-shadow: 0 0 50px rgba(43, 75, 238, 0.6);
         background: linear-gradient(135deg, rgba(43, 75, 238, 0.4), rgba(139, 92, 246, 0.4));
     }

     .icon-container::before {
         content: '';
         position: absolute;
         inset: -2px;
         background: linear-gradient(45deg, #2b4bee, #8b5cf6);
         border-radius: 16px;
         z-index: -1;
         opacity: 0;
         transition: opacity 0.4s ease;
     }

     .tech-card:hover .icon-container::before {
         opacity: 1;
         animation: spin 3s linear infinite;
     }

     @keyframes spin {
         100% {
             transform: rotate(360deg);
         }
     }

     /* ========== DECORATIVE SVG ANIMATIONS ========== */
     .decoration-svg {
         transition: all 0.5s ease;
         opacity: 0.1;
         position: absolute;
     }

     .tech-card:hover .decoration-svg {
         opacity: 0.3;
         transform: scale(1.2) rotate(10deg);
     }

     /* ========== TEXT GLOW EFFECT ========== */
     .tech-card h3 {
         transition: text-shadow 0.3s ease;
     }

     .tech-card:hover h3 {
         text-shadow: 0 0 20px rgba(43, 75, 238, 0.6);
     }

     /* ========== ARROW HOVER ANIMATION ========== */
     .arrow-icon {
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }

     .tech-link:hover .arrow-icon {
         transform: translateX(8px);
         filter: drop-shadow(0 0 8px rgba(43, 75, 238, 0.8));
     }

     /* ========== FUTURISTIC BUTTON ========== */
     .futuristic-button {
         position: relative;
         background: linear-gradient(135deg, #2b4bee 0%, #6366f1 100%);
         padding: 14px 32px;
         border-radius: 12px;
         border: none;
         color: white;
         font-weight: 600;
         overflow: hidden;
         transition: all 0.3s ease;
         box-shadow: 0 0 30px rgba(43, 75, 238, 0.4);
         cursor: pointer;
     }

     .futuristic-button::before {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         width: 0;
         height: 0;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.3);
         transform: translate(-50%, -50%);
         transition: width 0.6s ease, height 0.6s ease;
     }

     .futuristic-button:hover::before {
         width: 300px;
         height: 300px;
     }

     .futuristic-button:hover {
         transform: scale(1.05);
         box-shadow: 0 0 50px rgba(43, 75, 238, 0.8);
     }

     .futuristic-button span {
         position: relative;
         z-index: 1;
         display: flex;
         align-items: center;
         gap: 8px;
     }

     /* ========== SCAN LINE EFFECT ========== */
     .scan-line {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 2px;
         background: linear-gradient(90deg,
                 transparent 0%,
                 rgba(43, 75, 238, 0.8) 50%,
                 transparent 100%);
         transform: translateY(-100%);
         opacity: 0;
         transition: all 0.5s ease;
     }

     .tech-card:hover .scan-line {
         animation: scan 2s ease-in-out infinite;
         opacity: 1;
     }

     @keyframes scan {
         0% {
             transform: translateY(-100%);
         }

         100% {
             transform: translateY(calc(100% + 2rem));
         }
     }

     /* ========== DATA STREAM EFFECT ========== */
     .data-stream {
         position: absolute;
         right: -10px;
         top: 0;
         width: 2px;
         height: 100%;
         background: linear-gradient(180deg,
                 transparent 0%,
                 rgba(43, 75, 238, 0.6) 50%,
                 transparent 100%);
         opacity: 0;
         transition: opacity 0.5s ease;
     }

     .tech-card:hover .data-stream {
         opacity: 1;
         animation: dataFlow 2s ease-in-out infinite;
     }

     @keyframes dataFlow {

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

         50% {
             transform: translateY(100%);
         }
     }

     /* ========== STAGGER ANIMATION FOR CARDS ========== */
     .tech-card {
         animation: fadeInUp 0.8s ease-out backwards;
     }

     .tech-card:nth-child(1) {
         animation-delay: 0.1s;
     }

     .tech-card:nth-child(2) {
         animation-delay: 0.2s;
     }

     .tech-card:nth-child(3) {
         animation-delay: 0.3s;
     }

     .tech-card:nth-child(4) {
         animation-delay: 0.4s;
     }

     .tech-card:nth-child(5) {
         animation-delay: 0.5s;
     }

     .tech-card:nth-child(6) {
         animation-delay: 0.6s;
     }

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

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

     /* ========== HEADER ANIMATION ========== */
     .header-content {
         animation: fadeIn 1s ease-out;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(-20px);
         }

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

     /* ========== GLITCH EFFECT ON HOVER ========== */
     .glitch-text {
         position: relative;
     }

     .tech-card:hover .glitch-text::before,
     .tech-card:hover .glitch-text::after {
         content: attr(data-text);
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0.8;
     }

     .tech-card:hover .glitch-text::before {
         animation: glitch-1 0.3s ease-in-out infinite;
         color: #2b4bee;
         z-index: -1;
     }

     .tech-card:hover .glitch-text::after {
         animation: glitch-2 0.3s ease-in-out infinite;
         color: #8b5cf6;
         z-index: -2;
     }

     @keyframes glitch-1 {

         0%,
         100% {
             transform: translate(0);
         }

         33% {
             transform: translate(-2px, 2px);
         }

         66% {
             transform: translate(2px, -2px);
         }
     }

     @keyframes glitch-2 {

         0%,
         100% {
             transform: translate(0);
         }

         33% {
             transform: translate(2px, -2px);
         }

         66% {
             transform: translate(-2px, 2px);
         }
     }

     /* ========== LINK GLOW ========== */
     .tech-link {
         position: relative;
         display: inline-flex;
         align-items: center;
         gap: 8px;
         color: #2b4bee;
         font-weight: 600;
         text-decoration: none;
         transition: all 0.3s ease;
     }

     .tech-link::after {
         content: '';
         position: absolute;
         bottom: -2px;
         left: 0;
         width: 0;
         height: 2px;
         background: linear-gradient(90deg, #2b4bee, #8b5cf6);
         transition: width 0.3s ease;
     }

     .tech-link:hover::after {
         width: 100%;
     }

     .tech-link:hover {
         text-shadow: 0 0 10px rgba(43, 75, 238, 0.6);
     }

     /* ========== CIRCUIT PATTERN ========== */
     .circuit-pattern {
         position: absolute;
         inset: 0;
         opacity: 0.03;
         background-image:
             linear-gradient(90deg, transparent 49%, rgba(43, 75, 238, 0.5) 49%, rgba(43, 75, 238, 0.5) 51%, transparent 51%),
             linear-gradient(0deg, transparent 49%, rgba(43, 75, 238, 0.5) 49%, rgba(43, 75, 238, 0.5) 51%, transparent 51%);
         background-size: 20px 20px;
     }

     .tech-card:hover .circuit-pattern {
         opacity: 0.1;
         animation: circuitPulse 2s ease-in-out infinite;
     }

     @keyframes circuitPulse {

         0%,
         100% {
             background-size: 20px 20px;
         }

         50% {
             background-size: 22px 22px;
         }
     }

     /* ========== SVG ICONS ========== */
     .svg-icon {
         width: 20px;
         height: 20px;
         stroke: currentColor;
         stroke-width: 2.5;
         fill: none;
     }

     /* ========== UTILITIES ========== */
     .text-slate-300 {
         color: #cbd5e1;
     }

     .text-slate-400 {
         color: #94a3b8;
     }

     /* ========== RESPONSIVE ========== */
     @media (max-width: 768px) {
         .tech-card {
             padding: 1.5rem;
         }

         .header-content .display-5 {
             font-size: 2.5rem !important;
         }
     }

     /* ========== ANIMATED BACKGROUND ========== */
     .section-wrapper {
         position: relative;
         overflow: hidden;
     }

     .floating-shapes {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
         pointer-events: none;
         z-index: 0;
     }

     .shape {
         position: absolute;
         opacity: 0.08;
         animation: floatShape 20s infinite ease-in-out;
     }

     .shape-1 {
         width: 400px;
         height: 400px;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         border-radius: 50%;
         top: -200px;
         right: -100px;
         filter: blur(80px);
         animation-delay: 0s;
     }

     .shape-2 {
         width: 300px;
         height: 300px;
         background: linear-gradient(135deg, var(--secondary), var(--primary));
         border-radius: 50%;
         bottom: -150px;
         left: -100px;
         filter: blur(80px);
         animation-delay: 5s;
     }

     .shape-3 {
         width: 250px;
         height: 250px;
         background: linear-gradient(135deg, var(--primary), var(--success));
         border-radius: 50%;
         top: 50%;
         left: 30%;
         filter: blur(80px);
         animation-delay: 10s;
     }

     @keyframes floatShape {

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

         33% {
             transform: translate(30px, -30px) scale(1.1);
         }

         66% {
             transform: translate(-30px, 30px) scale(0.9);
         }
     }

     /* Grid Pattern */
     .grid-pattern {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image:
             linear-gradient(rgba(43, 75, 238, 0.03) 1px, transparent 1px),
             linear-gradient(90deg, rgba(43, 75, 238, 0.03) 1px, transparent 1px);
         background-size: 40px 40px;
         animation: gridMove 30s linear infinite;
         pointer-events: none;
         z-index: 0;
     }

     @keyframes gridMove {
         0% {
             transform: translate(0, 0);
         }

         100% {
             transform: translate(40px, 40px);
         }
     }

     /* ========== SECTION BADGE ========== */
     .section-badge {
         display: inline-flex;
         align-items: center;
         gap: 8px;
         padding: 6px 16px;
         border-radius: 50px;
         background: linear-gradient(135deg, rgba(43, 75, 238, 0.08), rgba(139, 92, 246, 0.08));
         border: 1px solid rgba(43, 75, 238, 0.15);
         font-size: 0.75rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
         color: var(--primary);
         animation: badgeGlow 2s ease-in-out infinite;
     }

     @keyframes badgeGlow {

         0%,
         100% {
             box-shadow: 0 0 0 0 rgba(43, 75, 238, 0.2);
         }

         50% {
             box-shadow: 0 0 20px 5px rgba(43, 75, 238, 0.1);
         }
     }

     .section-badge::before {
         content: '';
         width: 6px;
         height: 6px;
         border-radius: 50%;
         background: var(--primary);
         animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             opacity: 1;
         }

         50% {
             opacity: 0.5;
         }
     }

     /* ========== TYPOGRAPHY ========== */
     .section-title {
         font-size: clamp(2rem, 5vw, 3rem);
         font-weight: 700;
         line-height: 1.2;
         letter-spacing: -0.02em;
         background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
         animation: titleSlide 1s ease-out;
     }

     @keyframes titleSlide {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

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

     /* ========== FEATURE LIST ========== */
     .feature-list {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .feature-item {
         display: flex;
         gap: 1.25rem;
         margin-bottom: 2rem;
         padding: 1.5rem;
         background: var(--surface);
         border-radius: 16px;
         /* border: 1px solid var(--border); */
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         overflow: hidden;
         animation: slideInLeft 0.6s ease-out backwards;
     }

     .feature-item:nth-child(1) {
         animation-delay: 0.1s;
     }

     .feature-item:nth-child(2) {
         animation-delay: 0.2s;
     }

     .feature-item:nth-child(3) {
         animation-delay: 0.3s;
     }

     @keyframes slideInLeft {
         from {
             opacity: 0;
             transform: translateX(-30px);
         }

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

     .feature-item::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 4px;
         height: 0;
         background: linear-gradient(180deg, var(--primary), var(--secondary));
         transition: height 0.4s ease;
     }

     .feature-item:hover::before {
         height: 100%;
     }

     .feature-item:hover {
         transform: translateX(8px);
         border-color: rgba(43, 75, 238, 0.2);
         box-shadow:
             0 20px 40px -10px rgba(43, 75, 238, 0.08),
             0 0 0 1px rgba(43, 75, 238, 0.05);
     }

     .feature-icon {
         width: 48px;
         height: 48px;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
     }

     .feature-icon::before {
         content: '';
         position: absolute;
         inset: -4px;
         border-radius: 14px;
         padding: 2px;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
         -webkit-mask-composite: xor;
         mask-composite: exclude;
         opacity: 0;
         transition: opacity 0.4s ease;
     }

     .feature-item:hover .feature-icon::before {
         opacity: 1;
         animation: spin 3s linear infinite;
     }

     @keyframes spin {
         100% {
             transform: rotate(360deg);
         }
     }

     .feature-item:hover .feature-icon {
         transform: scale(1.1) rotate(-5deg);
     }

     .icon-green {
         background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
         color: #059669;
     }

     .icon-blue {
         background: linear-gradient(135deg, rgba(43, 75, 238, 0.1), rgba(43, 75, 238, 0.05));
         color: var(--primary);
     }

     .icon-purple {
         background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
         color: #7c3aed;
     }

     /* ========== CODE BLOCK ========== */
     .code-block {
         background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
         border-radius: 20px;
         overflow: hidden;
         box-shadow:
             0 25px 50px -12px rgba(0, 0, 0, 0.25),
             0 0 0 1px rgba(255, 255, 255, 0.05) inset;
         animation: slideInRight 0.8s ease-out;
         position: relative;
     }

     @keyframes slideInRight {
         from {
             opacity: 0;
             transform: translateX(30px);
         }

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

     .code-block::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         background: linear-gradient(45deg,
                 var(--primary),
                 var(--secondary),
                 var(--primary));
         border-radius: 22px;
         z-index: -1;
         filter: blur(15px);
         opacity: 0.6;
         animation: borderGlow 3s ease infinite;
     }

     @keyframes borderGlow {

         0%,
         100% {
             opacity: 0.4;
             filter: blur(15px);
         }

         50% {
             opacity: 0.8;
             filter: blur(20px);
         }
     }

     .code-header {
         display: flex;
         align-items: center;
         padding: 1rem 1.5rem;
         background: rgba(15, 23, 42, 0.8);
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     }

     .window-dots {
         display: flex;
         gap: 8px;
     }

     .dot {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         transition: all 0.3s ease;
     }

     .dot:hover {
         transform: scale(1.2);
     }

     .dot-red {
         background: #ef4444;
         box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
     }

     .dot-yellow {
         background: #f59e0b;
         box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
     }

     .dot-green {
         background: #10b981;
         box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
     }

     .code-title {
         flex: 1;
         text-align: center;
         color: #94a3b8;
         font-size: 0.875rem;
         font-family: 'Courier New', monospace;
     }

     .code-content {
         padding: 2rem;
         font-family: 'Courier New', monospace;
         font-size: 0.875rem;
         line-height: 1.8;
         color: #e2e8f0;
         position: relative;
     }

     .code-line {
         position: relative;
         padding-left: 1rem;
         transition: all 0.2s ease;
     }

     .code-line:hover {
         background: rgba(43, 75, 238, 0.05);
         padding-left: 1.5rem;
     }

     .code-keyword {
         color: #f472b6;
         font-weight: 600;
     }

     .code-property {
         color: #60a5fa;
     }

     .code-string {
         color: #34d399;
     }

     .code-boolean {
         color: #a78bfa;
         font-weight: 600;
     }

     .code-comment {
         color: #64748b;
         font-style: italic;
     }

     /* Typing cursor effect */
     .code-content::after {
         content: '▊';
         color: var(--primary);
         animation: blink 1s step-end infinite;
         margin-left: 4px;
     }

     @keyframes blink {

         0%,
         50% {
             opacity: 1;
         }

         51%,
         100% {
             opacity: 0;
         }
     }

     /* ========== PROCESS STEPS ========== */
     .process-container {
         position: relative;
     }

     .process-title {
         font-size: 2rem;
         font-weight: 800;
         text-align: center;
         margin-bottom: 3rem;
         background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }

     /* Connection line */
     .process-line {
         position: absolute;
         top: 24px;
         left: 0;
         right: 0;
         height: 2px;
         background: linear-gradient(90deg,
                 transparent 0%,
                 var(--border) 10%,
                 var(--border) 90%,
                 transparent 100%);
         z-index: 0;
     }

     .process-line::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         height: 100%;
         width: 20%;
         background: linear-gradient(90deg, var(--primary), var(--secondary));
         border-radius: 2px;
         animation: progressFlow 3s ease-in-out infinite;
     }

     @keyframes progressFlow {
         0% {
             left: 0%;
             width: 0%;
             opacity: 0;
         }

         50% {
             width: 30%;
             opacity: 1;
         }

         100% {
             left: 100%;
             width: 0%;
             opacity: 0;
         }
     }

     .process-step {
         background: var(--surface);
         padding: 2rem 1.5rem;
         border-radius: 20px;
         border: 2px solid var(--border);
         text-align: center;
         transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         z-index: 1;
         animation: fadeInUp 0.6s ease-out backwards;
         overflow: hidden;
     }

     .process-step:nth-child(1) {
         animation-delay: 0.1s;
     }

     .process-step:nth-child(2) {
         animation-delay: 0.2s;
     }

     .process-step:nth-child(3) {
         animation-delay: 0.3s;
     }

     .process-step:nth-child(4) {
         animation-delay: 0.4s;
     }

     .process-step:nth-child(5) {
         animation-delay: 0.5s;
     }

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

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

     .process-step::before {
         content: '';
         position: absolute;
         top: 0;
         left: 50%;
         width: 0;
         height: 100%;
         background: linear-gradient(135deg, rgba(43, 75, 238, 0.03), rgba(139, 92, 246, 0.03));
         transform: translateX(-50%);
         transition: width 0.5s ease;
         z-index: -1;
     }

     .process-step:hover::before {
         width: 100%;
     }

     .process-step:hover {
         transform: translateY(-12px) scale(1.05);
         border-color: var(--primary);
         box-shadow:
             0 25px 50px -12px rgba(43, 75, 238, 0.15),
             0 0 0 1px rgba(43, 75, 238, 0.1);
     }

     .process-number {
         width: 56px;
         height: 56px;
         border-radius: 50%;
         background: var(--surface);
         border: 3px solid var(--primary);
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto 1.25rem;
         font-weight: 700;
         color: var(--primary);
         transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         position: relative;
         box-shadow: 0 0 0 0 rgba(43, 75, 238, 0.2);
     }

     .process-number::before {
         content: '';
         position: absolute;
         inset: -6px;
         border-radius: 50%;
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         opacity: 0;
         transition: opacity 0.4s ease;
         z-index: -1;
         animation: rotateGradient 3s linear infinite;
     }

     @keyframes rotateGradient {
         100% {
             transform: rotate(360deg);
         }
     }

     .process-step:hover .process-number {
         background: linear-gradient(135deg, var(--primary), var(--secondary));
         color: white;
         transform: scale(1.15) rotate(360deg);
         box-shadow:
             0 0 0 8px rgba(43, 75, 238, 0.1),
             0 10px 30px -5px rgba(43, 75, 238, 0.3);
     }

     .process-step:hover .process-number::before {
         opacity: 0.3;
     }

     .process-step.inactive .process-number {
         border-color: var(--border);
         color: var(--text-muted);
         background: var(--background);
     }

     .process-step.inactive:hover .process-number {
         border-color: var(--primary);
         color: var(--primary);
     }

     .step-title {
         font-size: 1rem;
         font-weight: 700;
         margin-bottom: 0.5rem;
         color: var(--text-primary);
         transition: color 0.3s ease;
     }

     .process-step:hover .step-title {
         color: var(--primary);
     }

     .step-description {
         font-size: 0.875rem;
         color: var(--text-muted);
         line-height: 1.6;
         margin: 0;
     }

     /* ========== REVEAL ANIMATION ========== */
     .reveal {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     }

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

     /* ========== RESPONSIVE ========== */
     @media (max-width: 992px) {
         .process-line {
             display: none;
         }

         .section-title {
             font-size: 2rem;
         }
     }

     @media (max-width: 768px) {
         .feature-item {
             padding: 1.25rem;
         }

         .process-step {
             padding: 1.5rem 1rem;
         }

         .code-content {
             padding: 1.5rem;
             font-size: 0.75rem;
         }
     }

     /* ========== CONTENT WRAPPER ========== */
     .content-wrapper {
         position: relative;
         z-index: 1;
     }














     /* NEW */

     /* Floating badge decoration */
     .floating-badge {
         position: absolute;
         top: -15px;
         right: 32px;
         background-color: #fff;
         border: 1px solid rgba(26,24,20,0.08);
         border-radius: 100px;
         padding: 0px 10px;
         font-size: 0.72rem;
         font-weight: 500;
         color: #1a1814;
         box-shadow: 0 12px 48px rgba(26,24,20,0.09);
         display: flex;
         align-items: center;
         gap: 6px;
         white-space: nowrap;
         opacity: 0;
         transform: translateY(10px);
         transition: opacity 0.7s cubic-bezier(.22,1,.36,1) 1s, transform 0.7s cubic-bezier(.22,1,.36,1) 1s;
         z-index: 5;
     }

     .floating-badge.visible {
         opacity: 1;
         transform: translateY(0);
     }

     .dash-shell {
         position: relative;
         z-index: 1;
         background-color: #ffff;
         border-radius: 20px;
         border: 1px solid rgba(26,24,20,0.08);
         box-shadow: 0 40px 90px rgba(26,24,20,0.12);
         overflow: hidden;

         opacity: 0;
         transform: translateY(48px) scale(0.97);
         transition: opacity 1s cubic-bezier(.22,1,.36,1) 0.25s, transform 1s cubic-bezier(.22,1,.36,1) 0.25s;
     }

     .dash-shell.visible {
         opacity: 1;
         transform: translateY(0) scale(1);
     }

     /* Window chrome */
     .dash-chrome {
         background-color: #f5f5f9;
         border-bottom: 1px solid #f5f5f9;;
         padding: 12px 16px;
         display: flex;
         align-items: center;
         gap: 10px;
     }

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

     .cd-r {
         background: #ff5f57;
     }

     .cd-y {
         background: #febc2e;
     }

     .cd-g {
         background: #28c840;
     }

     .chrome-bar {
         flex: 1;
         height: 22px;
         background-color: #fff;
         border: 1px solid #f5f5f9;;
         border-radius: 6px;
         margin: 0 8px;
         display: flex;
         align-items: center;
         padding: 0 10px;
     }

     .chrome-url a {
         font-size: 0.65rem;
         color: #6b6760;
         opacity: 0.6;
         font-family: 'Manrope', system-ui, -apple-system, sans-serif;
     }

     /* LIVE indicator */
     .live-indicator {
         display: inline-flex;
         align-items: center;
         gap: 5px;
         font-size: 0.6rem;
         font-weight: 500;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: #16a34a;
     }

     .live-dot {
         width: 6px;
         height: 6px;
         background: #16a34a;
         border-radius: 50%;
         animation: livePulse 1.5s ease-in-out infinite;
     }

     @keyframes livePulse {

         0%,
         100% {
             box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
         }

         50% {
             box-shadow: 0 0 0 5px rgba(22, 163, 74, 0);
         }
     }

     /* Dashboard content */
     .dash-content {
         padding: 1.4rem;
     }

     /* TOP ROW KPI cards */
     .kpi-row {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 0.7rem;
         margin-bottom: 1rem;
     }

     @media (max-width: 991px) {
         .product-section {
             padding: 5rem 0;
         }

         .kpi-row {
             grid-template-columns: 1fr 1fr;
         }

         .kpi-row .kpi-card:last-child {
             display: none;
         }
     }

     .kpi-card {
         background-color: #f5f5f9;
         border: 1px solid rgba(26,24,20,0.08);
         border-radius: 10px;
         padding: 1rem 1.1rem;
         opacity: 0;
         transform: translateY(14px);
         transition: opacity 0.5s cubic-bezier(.22,1,.36,1), transform 0.5s cubic-bezier(.22,1,.36,1);
     }

     .kpi-card.visible {
         opacity: 1;
         transform: translateY(0);
     }

     .kpi-label {
         font-size: 0.65rem;
         font-weight: 500;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: #6b6760;
         margin-bottom: 0px;
     }

     .kpi-value {
         font-family: 'Manrope', system-ui, -apple-system, sans-serif;
         font-size: 1.5rem;
         font-weight: 600;
         color:   #1a1814;
         line-height: 1;
         letter-spacing: -0.02em;
     }



     .kpi-up {
         /* background-color: #dcfce7; */
         color: #16a34a;
          font-size: 0.62rem;
         font-weight: 500;
     }

     .kpi-down {
         /* background-color:  #fee2e2; */
         color: #dc2626;
          font-size: 0.62rem;
         font-weight: 500;
     }

     /* MID ROW: chart + donut */
     .mid-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0.7rem;
         margin-bottom: 1rem;
     }

     .chart-panel,
     .donut-panel,
     .activity-panel {
         background-color: #f5f5f9;
         border: 1px solid rgba(26,24,20,0.08);
         border-radius: 10px;
         padding: 1rem;
     }

     .panel-label {
         font-size: 0.7rem;
         font-weight: 500;
         letter-spacing: 0.08em;
         text-transform: uppercase;
         color: #6b6760;
         /* margin-bottom: 0.8rem; */
     }

     .bar-chart-svg {
         width: 100%;
         height: 90px;
         overflow: visible;
     }

     .area-path {
         opacity: 0;
         transition: opacity 0.5s 1.5s;
     }

     .area-path.visible {
         opacity: 1;
     }

     /* SVG line/area chart */
     .line-path {
         stroke-dasharray: 600;
         stroke-dashoffset: 600;
         transition: stroke-dashoffset 2s cubic-bezier(.22,1,.36,1);
     }

     .line-path.visible {
         stroke-dashoffset: 0;
     }

     .donut-svg {
         width: 80px;
         height: 80px;
         display: block;
         margin: 0 auto 0.8rem;
     }

     .donut-track {
         fill: none;
         stroke: rgba(26,24,20,0.08);
         stroke-width: 8;
     }

     .donut-fill {
         fill: none;
         stroke-width: 8;
         stroke-linecap: round;
         stroke-dasharray: 166;
         stroke-dashoffset: 166;
         transition: stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
     }

     .donut-fill.visible {
         stroke-dashoffset: 42;
     }

     .donut-legend {
         display: flex;
         flex-direction: row;
             justify-content: space-between;
         
     }

     .legend-item {
         display: flex;
         align-items: center;
         gap: 6px;
         font-size: 0.68rem;
         color: #6b6760;
     }

     .legend-dot {
         width: 7px;
         height: 7px;
         border-radius: 50%;
         flex-shrink: 0;
     }

     /* BOTTOM ROW */
     .bottom-row {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 0.7rem;
     }

     /* Progress bars */
     .prog-item {
         margin-bottom: 0.6rem;
     }

     .prog-header {
         display: flex;
         justify-content: space-between;
         font-size: 0.68rem;
         color: #6b6760;
         margin-bottom: 4px;
     }

     .prog-track {
         height: 5px;
         background: rgba(26,24,20,0.08);
         border-radius: 100px;
         overflow: hidden;
     }

     .prog-fill {
         height: 100%;
         border-radius: 100px;
         /* background: linear-gradient(90deg, #2a6ee0, #e05c2a); */
         background: linear-gradient(90deg, #0f172a, #2b4bee);
         transform: scaleX(0);
         transform-origin: left;
         transition: transform 1.4s cubic-bezier(.22,1,.36,1);
     }

     .prog-fill.visible {
         transform: scaleX(1);
     }

     .activity-list {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
     }

     .activity-item {
         display: flex;
         align-items: center;
         gap: 0.7rem;
         padding: 0.55rem 0;
         border-bottom: 1px solid rgba(26,24,20,0.08);
         opacity: 0;
         transform: translateX(12px);
         transition: opacity 0.4s cubic-bezier(.22,1,.36,1), transform 0.4s cubic-bezier(.22,1,.36,1);
     }

     .activity-item:last-child {
         border-bottom: none;
     }

     .activity-item.visible {
         opacity: 1;
         transform: translateX(0);
     }
     .act-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 600;
  flex-shrink: 0;
  color: #fff;
}
.act-text {
  flex: 1;
  font-size: 0.72rem;
  color: #1a1814;
  line-height: 1.4;
}
.act-text span { color: #6b6760; }
.act-time {
  font-size: 0.62rem;
  color:#6b6760;
  opacity: 0.6;
  flex-shrink: 0;
}