.elementor-kit-20{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-20 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- 1. CORE VARIABLES & RESET --- */
:root {
    --primary-dark: #250444;
    --accent-gold: #FFCA58;
    --bg-light: #F5F4F7;
    --text-dark: #1F1F24;
    --text-light: #ffffff;
    --spacing-unit: 1rem;
    --container-width: 1200px;
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

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

/* Note: Body font is usually handled by Global Fonts in Elementor, 
   but keeping this here ensures your specific style overrides. */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    line-height: 1.3;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
}

p {
    margin-bottom: 1.5rem;
}

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

ul {
    list-style-position: inside;
    margin-bottom: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 2. UTILITY CLASSES --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 28px;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background-color: var(--accent-gold);
    color: var(--primary-dark);
    border: 2px solid var(--accent-gold);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent-gold);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
}

.btn-secondary:hover {
    background-color: var(--text-light);
    color: var(--primary-dark);
}

.section-padding {
    padding: 80px 0;
}

.text-center { text-align: center; }
.text-light { color: var(--text-light); }
.highlight { color: var(--accent-gold); }
.bg-white { background-color: #ffffff; }

/* --- 3. HERO SECTION (LCP Critical) --- */
.hero {
    background-color: var(--primary-dark);
    color: var(--text-light);
    padding: 100px 0;
    position: relative;
}

.hero h1, .hero h2 {
    color: var(--text-light);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 20px;
}

.hero-lead {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* --- ANIMATED GRAPHICS CSS --- */
/* Common Graphic Container */
.graphic-box {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 1. Hero: Analytics Dashboard */
.analytics-graph { display: flex; align-items: flex-end; gap: 8px; height: 100px; width: 150px; position: relative; }
.bar { width: 20px; background: var(--accent-gold); border-radius: 3px 3px 0 0; animation: grow-bar 2s infinite ease-in-out alternate; }
.bar:nth-child(1) { height: 40px; animation-delay: 0s; }
.bar:nth-child(2) { height: 70px; animation-delay: 0.2s; background: #fff; }
.bar:nth-child(3) { height: 50px; animation-delay: 0.4s; }
.bar:nth-child(4) { height: 90px; animation-delay: 0.6s; background: #fff; }
.trend-line { position: absolute; top: 0; left: 0; right: 0; height: 100%; border-top: 2px dashed rgba(255,255,255,0.3); transform: rotate(-15deg) translateY(10px); }
@keyframes grow-bar { from { transform: scaleY(0.8); transform-origin: bottom; } to { transform: scaleY(1.1); transform-origin: bottom; } }

/* 2. Intro: Connected Nodes */
.node-hub { position: relative; width: 140px; height: 140px; }
.center-node { width: 40px; height: 40px; background: var(--primary-dark); border: 2px solid var(--accent-gold); border-radius: 50%; position: absolute; top: 50px; left: 50px; z-index: 2; box-shadow: 0 0 20px rgba(255, 202, 88, 0.4); }
.sat-node { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; animation: orbit 8s linear infinite; }
.sat-node:nth-child(2) { top: 0; left: 60px; animation-delay: 0s; }
.sat-node:nth-child(3) { top: 120px; left: 60px; animation-delay: -4s; }
.sat-node:nth-child(4) { top: 60px; left: 0; animation-delay: -2s; }
.sat-node:nth-child(5) { top: 60px; left: 120px; animation-delay: -6s; }
.line-link { position: absolute; top: 70px; left: 70px; width: 60px; height: 2px; background: var(--accent-gold); transform-origin: left center; animation: spin-lines 8s linear infinite; opacity: 0.5; }
@keyframes orbit { 0% { transform: rotate(0deg) translateX(60px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); } }
@keyframes spin-lines { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 3. Startup: Rocket Ship */
.rocket-container { position: relative; width: 80px; height: 120px; animation: hover-fly 3s ease-in-out infinite; }
.rocket-body { width: 40px; height: 70px; background: #fff; border-radius: 50% 50% 5px 5px; margin: 0 auto; position: relative; overflow: hidden; border: 2px solid #eee; }
.rocket-window { width: 15px; height: 15px; background: var(--primary-dark); border-radius: 50%; margin: 15px auto; border: 2px solid var(--accent-gold); }
.rocket-fin-l { position: absolute; bottom: 10px; left: 10px; width: 0; height: 0; border-right: 15px solid #fff; border-bottom: 20px solid transparent; transform: skewX(10deg); }
.rocket-fin-r { position: absolute; bottom: 10px; right: 10px; width: 0; height: 0; border-left: 15px solid #fff; border-bottom: 20px solid transparent; transform: skewX(-10deg); }
.rocket-flame { width: 20px; height: 30px; background: var(--accent-gold); border-radius: 50% 50% 5px 5px; margin: 0 auto; margin-top: -5px; animation: flicker 0.2s infinite alternate; z-index: -1; }
@keyframes hover-fly { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes flicker { from { transform: scale(1); opacity: 1; } to { transform: scale(0.9); opacity: 0.8; } }

/* 4. SME: Gear System */
.gear-system { position: relative; width: 120px; height: 120px; }
.gear { position: absolute; border: 8px dashed var(--primary-dark); border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.gear::after { content: ''; width: 60%; height: 60%; background: var(--accent-gold); border-radius: 50%; }
.gear-big { width: 80px; height: 80px; top: 0; left: 0; animation: spin-gear 4s linear infinite; }
.gear-small { width: 50px; height: 50px; bottom: 10px; right: 10px; border-color: #888; animation: spin-gear-rev 2s linear infinite; }
.gear-small::after { background: var(--primary-dark); }
@keyframes spin-gear { to { transform: rotate(360deg); } }
@keyframes spin-gear-rev { to { transform: rotate(-360deg); } }

/* 5. Corporate: Skyscraper */
.skyscraper { width: 60px; height: 120px; background: var(--primary-dark); position: relative; border-radius: 4px 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px 8px; align-content: start; box-shadow: 10px 0 0 rgba(0,0,0,0.1); }
.sky-window { width: 100%; height: 8px; background: rgba(255,255,255,0.2); transition: 0.3s; }
.sky-antenna { position: absolute; top: -20px; left: 50%; width: 2px; height: 20px; background: var(--text-dark); transform: translateX(-50%); }
.zigzag-item:hover .sky-window:nth-child(odd) { background: var(--accent-gold); }

/* 6. Local: Map Pin */
.map-wrapper { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.map-target { width: 80px; height: 30px; background: rgba(0,0,0,0.1); border-radius: 50%; transform: rotateX(60deg); position: absolute; bottom: 40px; }
.pin-head { width: 40px; height: 40px; background: var(--primary-dark); border-radius: 50% 50% 0 50%; transform: rotate(45deg); position: absolute; top: 30px; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.2); animation: pin-bounce 1.5s ease-out infinite; }
.pin-dot { width: 14px; height: 14px; background: var(--accent-gold); border-radius: 50%; position: absolute; top: 10px; left: 10px; }
@keyframes pin-bounce { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(-5px, -5px); } }

/* 7. Ecommerce: Shopping Bag */
.bag-container { position: relative; width: 80px; height: 90px; }
.bag-handle { width: 40px; height: 40px; border: 4px solid var(--primary-dark); border-radius: 50%; position: absolute; top: -15px; left: 20px; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
.bag-body { width: 80px; height: 80px; background: var(--accent-gold); border-radius: 0 0 8px 8px; position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--primary-dark); font-size: 24px; box-shadow: inset -5px -5px 0 rgba(0,0,0,0.1); }
.bag-star { position: absolute; top: 20px; right: -10px; font-size: 24px; color: var(--primary-dark); animation: pop 1s infinite alternate; }
@keyframes pop { from { transform: scale(1); } to { transform: scale(1.3); } }


/* --- 4. CONTENT SECTIONS --- */

/* Intro Section */
.intro {
    background-color: #ffffff;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Grid Layouts for Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.card-grid-tight {
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.card {
    background: #ffffff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: var(--transition);
    border-bottom: 3px solid transparent;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--accent-gold);
}

.card h3 {
    color: var(--primary-dark);
}

.card ul {
    padding-left: 20px;
    margin-top: 10px;
}

/* --- ZIGZAG LAYOUT --- */
.zigzag-wrapper {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 50px;
}

.zigzag-item {
    display: flex;
    align-items: center;
    gap: 50px;
    background: #fff;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid transparent;
}

.zigzag-item:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(37, 4, 68, 0.15);
    border-color: var(--accent-gold);
}

.zigzag-item:nth-child(even) {
    flex-direction: row-reverse;
    background: var(--primary-dark);
    color: var(--text-light);
}

.zigzag-item:nth-child(even) h3 {
    color: var(--accent-gold);
}

.zigzag-item:nth-child(even) p {
    color: rgba(255,255,255,0.9);
}

.zigzag-content {
    flex: 1.2;
}

.zigzag-visual {
    flex: 0.8;
    height: 250px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e6e6e6 100%);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.zigzag-item:nth-child(even) .zigzag-visual {
     background: rgba(255,255,255,0.05);
     border: 1px solid rgba(255,255,255,0.1);
}


/* Services Section */
.services {
    background-color: var(--primary-dark);
    color: var(--text-light);
}

.services h2 { color: var(--text-light); }

.services .card {
    background: rgba(255,255,255,0.05);
    color: var(--text-light);
}

.services .card h3 {
    color: var(--accent-gold);
}

.services .card ul {
    list-style: none;
    padding: 0;
}

.services .card ul li::before {
    content: "•";
    color: var(--accent-gold);
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Integration Section */
.integration {
    background-color: var(--accent-gold);
    color: var(--primary-dark);
}
.integration h2 { color: var(--primary-dark); }
.integration .card { background: rgba(255,255,255,0.9); }

/* Process Steps */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.step {
    display: flex;
    gap: 20px;
    background: #fff;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.step-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-gold);
    min-width: 60px;
}

/* Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}

.metric-box {
    background: var(--primary-dark);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
}

.metric-box h3 {
    color: var(--accent-gold);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* List Group for "Why Partner" */
.list-group-item {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    border-left: 5px solid var(--accent-gold);
}

/* FAQ Accordion (Pure CSS) */
details {
    background: #ffffff;
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
}

summary {
    padding: 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    position: relative;
    color: var(--primary-dark);
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    color: var(--primary-dark);
    font-size: 1.5rem;
    font-weight: 400;
}

details[open] summary::after {
    content: '-';
}

details p {
    padding: 0 20px 20px 20px;
    margin: 0;
    border-top: 1px solid #eee;
}

/* --- 5. CTA SECTION STYLES --- */
.final-cta {
    background: var(--primary-dark);
    color: var(--text-light);
    padding: 80px 0;
    text-align: center;
}

.final-cta h2 { color: var(--text-light); }

.cta-box {
    background: var(--accent-gold);
    color: var(--primary-dark);
    padding: 50px;
    border-radius: var(--border-radius);
    max-width: 800px;
    margin: 0 auto;
}

.cta-box h2 { color: var(--primary-dark); margin-bottom: 15px; }

/* --- 6. RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-grid, .intro-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        text-align: center;
        padding: 60px 0;
    }

    .hero-actions {
        justify-content: center;
    }

    /* Zigzag collapse on mobile */
    .zigzag-item, .zigzag-item:nth-child(even) {
        flex-direction: column !important;
        text-align: center;
        gap: 20px;
    }

    .zigzag-visual {
        width: 100%;
        min-height: 200px;
    }
}

/* Performance Optimization */
.render-optimize {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}/* --- 3D FLIP CARD STYLES --- */
.flip-card {
    background-color: transparent;
    perspective: 1000px; /* Gives the 3D depth effect */
    height: 100%;
    min-height: 320px; /* Ensures all cards have equal starting height */
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: var(--border-radius);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Common style for Front and Back */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Card A (Front) Styles */
.flip-card-front {
    background: rgba(255,255,255,0.05); /* Glassmorphism style to match theme */
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-light);
}

.flip-card-front h3 {
    font-size: 1.5rem;
    color: var(--accent-gold);
    margin-bottom: 15px;
}

.flip-card-front .tap-hint {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 15px;
    border: 1px solid var(--accent-gold);
    padding: 5px 15px;
    border-radius: 20px;
}

/* Card B (Back/Pop out) Styles */
.flip-card-back {
    background-color: var(--accent-gold);
    color: var(--primary-dark);
    transform: rotateY(180deg);
    overflow-y: auto; /* Adds scroll if content is too long */
    text-align: left; /* Better for reading descriptions */
    align-items: flex-start; /* Aligns text to top/left */
}

.flip-card-back h3 {
    color: var(--primary-dark);
    border-bottom: 2px solid var(--primary-dark);
    padding-bottom: 10px;
    width: 100%;
    margin-bottom: 15px;
}

.flip-card-back ul {
    padding-left: 20px;
    margin: 0;
}

.flip-card-back li {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.flip-card-back p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Mobile fix: Ensure height adjusts if content is huge */
@media (max-width: 768px) {
    .flip-card { min-height: 350px; }
}/* End custom CSS */