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

    /* ══════════════════════════════════════════
       COPILOT-INSPIRED GRADIENT THEME
       Smooth, light, pastel: blue→green→yellow→orange→pink→purple
    ══════════════════════════════════════════ */
    :root {
   
    /* Main focused palette */
    --c-purple: #7B4DFF;
    --c-magenta: #D85BFF;
    --c-pink: #FF6FB5;
    --c-orange: #FF9A57;

    /* Soft supporting shades */
    --c-lavender: #B79CFF;
    --c-peach: #FFC29B;
.service-card {
    cursor: pointer !important;
}
    /* Backgrounds */
    --bg: #FDF8FF;
    --bg2: #FFF4EF;
    --bg3: #F7F2FF;

    --surface: #FFFFFF;
    --surface2: rgba(255,255,255,0.75);

    /* Text */
    --text: #5D4B78;
    --text-strong: #2E1F4D;
    --text-mid: #85739A;
    --muted: #B2A4C2;

    --border: rgba(123,77,255,0.12);

    /* Main Copilot Theme Gradient */
    --grad-copilot: linear-gradient(135deg,
        #7B4DFF 0%,
        #A855F7 20%,
        #D85BFF 40%,
        #FF6FB5 65%,
        #FF9A57 100%
    );

    /* Reverse gradient */
    --grad-copilot-r: linear-gradient(135deg,
        #FF9A57 0%,
        #FF6FB5 30%,
        #D85BFF 60%,
        #7B4DFF 100%
    );

    /* UI gradients */
    --grad-soft: linear-gradient(135deg,
        #B79CFF 0%,
        #D85BFF 50%,
        #FF6FB5 100%
    );

    --grad-warm: linear-gradient(135deg,
        #FFB084 0%,
        #FF8FB1 45%,
        #D85BFF 100%
    );

    --grad-btn: linear-gradient(135deg,
        #7B4DFF 0%,
        #D85BFF 50%,
        #FF8C7A 100%
    );

    /* Page background */
    --page-bg: linear-gradient(160deg,
        #F8F2FF 0%,
        #FFF4FA 35%,
        #FFF2EB 70%,
        #FDF8FF 100%
    );
}
    html { scroll-behavior: smooth; }
    body {
        font-family: 'DM Sans', 'Manrope', sans-serif;
        color: var(--text);
        background: var(--page-bg);
        overflow-x: hidden;
    }
    h1,h2,h3,h4,h5,h6 {
        font-family: 'Plus Jakarta Sans', 'Clash Display', sans-serif;
        font-weight: 700;
        color: var(--text-strong);
    }
    a { text-decoration: none; color: inherit; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; }

    /* ── Gradient text ── */
    .grad-text {
        background: var(--grad-copilot);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .grad-text-warm {
        background: var(--grad-warm);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .grad-text-cool {
        background: var(--grad-cool);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ══ NAVBAR ══ */
    .navbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        background: rgba(253, 248, 246, 0.88);
        backdrop-filter: blur(28px) saturate(200%);
        border-bottom: 1px solid rgba(149,117,205,0.1);
        transition: all 0.4s ease;
    }
    .navbar.scrolled {
        background: rgba(253, 248, 246, 0.97);
        box-shadow: 0 4px 40px rgba(149,117,205,0.12);
    }
    .navbar::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
        background: var(--grad-copilot);
    }
    .nav-inner {
        display: flex; align-items: center; justify-content: space-between;
        height: 72px;
    }
    .nav-logo {
        font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px;
        letter-spacing: -0.5px; display: flex; align-items: center; gap: 10px;
    }
    .logo-icon {
        width: 38px; height: 38px;
        background: var(--grad-copilot);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 17px; font-weight: 900; color: white;
        box-shadow: 0 4px 20px rgba(149,117,205,0.35);
        flex-shrink: 0;
    }
    .logo-v { background: var(--grad-copilot); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .logo-rest { color: var(--text-strong); }

    .nav-links {
        display: flex; gap: 2px; align-items: center;
        background: rgba(255,255,255,0.7);
        border: 1px solid rgba(149,117,205,0.15);
        border-radius: 50px; padding: 5px;
        backdrop-filter: blur(10px);
    }
    .nav-links a {
        font-size: 13.5px; font-weight: 600; color: var(--text-mid);
        padding: 8px 18px; border-radius: 50px; transition: all 0.25s;
        white-space: nowrap;
    }
    .nav-links a:hover { color: var(--text-strong); background: rgba(149,117,205,0.08); }
    .nav-links a.active {
        color: var(--text-strong);
        background: white;
        box-shadow: 0 2px 12px rgba(149,117,205,0.18);
    }
    .nav-right { display: flex; align-items: center; gap: 12px; }
    .nav-badge {
        display: flex; align-items: center; gap: 6px;
        background: rgba(255,181,74,0.12);
        border: 1px solid rgba(255,181,74,0.3);
        color: #E8904A; font-size: 11px; font-weight: 700;
        padding: 5px 12px; border-radius: 50px; letter-spacing: 0.5px;
    }
    .nav-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-orange); animation: pulse 1.5s infinite; }
    .nav-cta {
        background: var(--grad-btn);
        color: white; font-weight: 700; font-size: 13.5px;
        padding: 11px 26px; border-radius: 50px; transition: all 0.3s;
        box-shadow: 0 4px 20px rgba(79,195,247,0.35);
        white-space: nowrap;
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(79,195,247,0.45); }

    /* Hamburger */
    .hamburger {
        display: none; flex-direction: column; gap: 5px; cursor: pointer;
        background: none; border: none; padding: 6px;
    }
    .hamburger span {
        display: block; width: 24px; height: 2px;
        background: var(--text-mid); border-radius: 2px; transition: all 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    .mobile-menu {
        display: none; flex-direction: column;
        background: rgba(253,248,246,0.98); border-top: 1px solid rgba(149,117,205,0.1);
        padding: 16px 20px 20px;
        backdrop-filter: blur(20px);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
        color: var(--text-mid); font-size: 15px; font-weight: 600;
        padding: 12px 0; border-bottom: 1px solid rgba(149,117,205,0.08);
        transition: color 0.2s;
    }
    .mobile-menu a:last-child { border-bottom: none; }
    .mobile-menu a:hover { color: var(--text-strong); }

    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.4)} }

    /* ══ HERO ══ */
    .hero {
        min-height: 100vh;
        position: relative; overflow: hidden;
        display: flex; align-items: center;
        padding: 140px 0 100px;
    }

    /* Copilot-style mesh background */
    .hero::before {
        content: '';
        position: absolute; inset: 0;
        background:
            radial-gradient(ellipse at 20% 50%, rgba(79,195,247,0.18) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 20%, rgba(186,104,200,0.15) 0%, transparent 50%),
            radial-gradient(ellipse at 60% 80%, rgba(255,181,74,0.12) 0%, transparent 45%),
            radial-gradient(ellipse at 40% 30%, rgba(129,199,132,0.12) 0%, transparent 40%);
        pointer-events: none;
    }

    /* Floating orbs with Copilot colors */
    .hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
    .orb-1 { width:520px;height:520px; background:radial-gradient(circle, rgba(79,195,247,0.22), rgba(77,208,225,0.15), transparent); top:-200px; right:-100px; animation:orbFloat 9s ease-in-out infinite; }
    .orb-2 { width:420px;height:420px; background:radial-gradient(circle, rgba(186,104,200,0.2), rgba(149,117,205,0.12), transparent); bottom:-150px; left:-80px; animation:orbFloat 11s ease-in-out infinite reverse; }
    .orb-3 { width:350px;height:350px; background:radial-gradient(circle, rgba(255,213,79,0.18), rgba(255,181,74,0.1), transparent); top:30%; right:20%; animation:orbFloat 7s ease-in-out infinite 2s; }
    .orb-4 { width:280px;height:280px; background:radial-gradient(circle, rgba(240,98,146,0.15), rgba(229,115,115,0.08), transparent); top:15%; left:30%; animation:orbFloat 8s ease-in-out infinite 1s; }
    .orb-5 { width:200px;height:200px; background:radial-gradient(circle, rgba(129,199,132,0.18), transparent); bottom:20%; right:35%; animation:orbFloat 6s ease-in-out infinite 3s; }
    @keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-28px) scale(1.04)} }

    .hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; position:relative; z-index:2; }

    .hero-badge {
        display: inline-flex; align-items: center; gap: 10px;
        background: rgba(255,255,255,0.85);
        border: 1px solid rgba(149,117,205,0.2);
        color: var(--text-mid); font-weight: 700;
        font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
        padding: 8px 18px; border-radius: 50px; margin-bottom: 28px;
        box-shadow: 0 4px 16px rgba(149,117,205,0.1);
        backdrop-filter: blur(10px);
    }
    .badge-pill {
        width: 18px; height: 10px; border-radius: 5px;
        background: var(--grad-copilot);
        flex-shrink: 0;
        animation: pillShift 3s ease-in-out infinite;
    }
    @keyframes pillShift { 0%,100%{filter:hue-rotate(0deg)} 50%{filter:hue-rotate(60deg)} }

    .hero-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: clamp(36px, 5.2vw, 62px);
        line-height: 1.06; margin-bottom: 22px;
        letter-spacing: -1.5px; color: var(--text-strong);
        font-weight: 800;
    }
    .typed-wrapper { display: block; min-height: 1.12em; }
    .hero-desc { font-size:17px; line-height:1.85; color:var(--text-mid); max-width:480px; margin-bottom:42px; font-weight:400; }
    .hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

    .btn-grad {
        display: inline-flex; align-items: center; gap: 10px;
        background: var(--grad-btn); color: #fff;
        font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px;
        padding: 16px 34px; border-radius: 50px;
        transition: all 0.3s; box-shadow: 0 4px 25px rgba(79,195,247,.35);
        position: relative; overflow: hidden;
    }
    .btn-grad::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.2), transparent); opacity:0; transition:opacity 0.3s; }
    .btn-grad:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(79,195,247,.5); }
    .btn-grad:hover::after { opacity:1; }
    .btn-grad svg { width:18px;height:18px;stroke:white;stroke-width:2.5;flex-shrink:0; fill:none;}

    .btn-warm {
        display: inline-flex; align-items: center; gap: 10px;
        background: var(--grad-warm2); color: #fff;
        font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px;
        padding: 16px 34px; border-radius: 50px;
        transition: all 0.3s; box-shadow: 0 4px 25px rgba(255,138,101,.3);
    }
    .btn-warm:hover { transform:translateY(-3px); box-shadow:0 10px 40px rgba(255,138,101,.5); }
    .btn-warm svg { width:18px;height:18px;stroke:white;stroke-width:2.5;flex-shrink:0; fill:none;}

    .btn-ghost {
        display: inline-flex; align-items: center; gap: 10px;
        background: rgba(255,255,255,0.85); border: 1.5px solid rgba(149,117,205,0.25);
        color: var(--text-strong); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px;
        padding: 15px 30px; border-radius: 50px; transition: all 0.3s;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 16px rgba(149,117,205,0.1);
    }
    .btn-ghost:hover { background:rgba(255,255,255,1); border-color:rgba(149,117,205,0.45); transform:translateY(-2px); box-shadow:0 8px 28px rgba(149,117,205,0.15); }

    .hero-stats {
        display: flex; gap: 40px; margin-top: 54px;
        padding-top: 36px; border-top: 1px solid rgba(149,117,205,0.12); flex-wrap: wrap;
    }
    .stat-number { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:42px; line-height:1; }
    .stat-number sup { font-size:20px; }
    .stat-label { font-size:12px; color:var(--muted); margin-top:5px; font-weight:500; letter-spacing:0.3px; }

    /* ── Hero Right ── */
    .hero-right { position:relative; height:580px; }
    .hero-ring {
        position:absolute; top:-40px; left:50%; transform:translateX(-50%);
        width:380px; height:380px; border-radius:50%;
        padding: 2px; z-index:1;
        background: conic-gradient(from 180deg, #4FC3F7,#81C784,#FFD54F,#FFB74D,#FF8A65,#F06292,#BA68C8,#9575CD,#4FC3F7);
        animation:rotateSlow 16s linear infinite;
        opacity: 0.45;
    }
    .hero-ring-inner { width:100%;height:100%;border-radius:50%;background: var(--page-bg); }
    @keyframes rotateSlow { from{transform:translateX(-50%) rotate(0deg)} to{transform:translateX(-50%) rotate(360deg)} }

    .hero-img-main { position:absolute; top:0; left:50%; transform:translateX(-50%); width:255px; height:340px; border-radius:28px; overflow:hidden; box-shadow:0 24px 70px rgba(149,117,205,.2); z-index:3; border:2.5px solid rgba(255,255,255,0.9); }
    .hero-img-left { position:absolute; left:0; top:65px; width:205px; height:270px; border-radius:22px; overflow:hidden; box-shadow:0 16px 55px rgba(79,195,247,.18); z-index:2; border:2.5px solid rgba(255,255,255,0.9); }
    .hero-img-right { position:absolute; right:0; top:120px; width:200px; height:255px; border-radius:22px; overflow:hidden; box-shadow:0 16px 55px rgba(255,138,101,.18); z-index:2; border:2.5px solid rgba(255,255,255,0.9); }
    .hero-img-main img, .hero-img-left img, .hero-img-right img { width:100%;height:100%;object-fit:cover;display:block; }

    .float-el { position:absolute; z-index:10; animation:floatY 4s ease-in-out infinite; }
    @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    .float-rocket { top:6px; right:14px; animation-delay:.4s; }
    .float-lamp   { left:6px; bottom:100px; animation-delay:1s; }

    .float-card {
        position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
        background: rgba(255,255,255,0.92);
        border: 1.5px solid rgba(149,117,205,0.15);
        border-radius: 20px; padding: 14px 22px;
        box-shadow: 0 10px 45px rgba(149,117,205,.15);
        display: flex; align-items: center; gap: 14px; white-space: nowrap;
        animation: floatY 3s ease-in-out infinite .3s; z-index: 10;
        backdrop-filter: blur(16px);
    }
    .float-card-icon { width:46px;height:46px;background:var(--grad-copilot);border-radius:13px;display:flex;align-items:center;justify-content:center; }
    .float-card-icon svg { width:22px;height:22px;stroke:white;stroke-width:2;fill:none; }
    .float-card-text strong { display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:18px;color:var(--text-strong); }
    .float-card-text span { font-size:12px;color:var(--muted); }

    .float-tag {
        position: absolute; top: 30px; left: 10px; z-index: 10;
        background: var(--grad-warm); color: white;
        font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 11px;
        padding: 7px 14px; border-radius: 50px; white-space: nowrap;
        box-shadow: 0 6px 20px rgba(255,138,101,0.35);
        animation: floatY 5s ease-in-out infinite 0.8s;
    }

    /* ══ BRANDS SECTION ══ */
    .brands-section {
        padding: 60px 0;
        background: rgba(255,255,255,0.7);
        border-top: 1px solid rgba(149,117,205,0.08);
        border-bottom: 1px solid rgba(149,117,205,0.08);
        position: relative; overflow: hidden;
        backdrop-filter: blur(10px);
    }
    .brands-section::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(ellipse at 50%, rgba(149,117,205,0.04) 0%, transparent 70%);
    }
    .brands-label {
        text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 3px;
        text-transform: uppercase; color: var(--muted); margin-bottom: 40px;
        position: relative;
    }
    .brands-label::before, .brands-label::after {
        content: ''; display: inline-block; width: 40px; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(149,117,205,0.4));
        vertical-align: middle; margin: 0 14px;
    }
    .brands-label::after { background: linear-gradient(90deg, rgba(149,117,205,0.4), transparent); }

    .brands-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
    .brand-card {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; padding: 28px 20px;
        background: rgba(255,255,255,0.85);
        border: 1.5px solid rgba(149,117,205,0.1);
        border-radius: 20px; transition: all 0.35s;
        cursor: default; position: relative; overflow: hidden;
        min-height: 120px; backdrop-filter: blur(10px);
    }
    .brand-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(149,117,205,0.15); border-color: rgba(149,117,205,0.3); background: rgba(255,255,255,1); }

    /* Each brand card gets a different gradient accent */
    .brand-card:nth-child(1) .brand-icon { background: linear-gradient(135deg, #4FC3F7, #4DD0E1); }
    .brand-card:nth-child(2) .brand-icon { background: linear-gradient(135deg, #81C784, #AED581); }
    .brand-card:nth-child(3) .brand-icon { background: linear-gradient(135deg, #FFD54F, #FFB74D); }
    .brand-card:nth-child(4) .brand-icon { background: linear-gradient(135deg, #FF8A65, #F06292); }
    .brand-card:nth-child(5) .brand-icon { background: linear-gradient(135deg, #BA68C8, #9575CD); }

    .brand-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;color:white;flex-shrink:0;transition:transform 0.35s; }
    .brand-card:hover .brand-icon { transform: rotate(-8deg) scale(1.1); }
    .brand-name { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:14px; color:var(--text-strong); text-align:center; line-height:1.3; }
    .brand-tag { font-size:10px; font-weight:600; letter-spacing:0.5px; color:var(--muted); text-transform:uppercase; }

    /* ══ SECTION COMMONS ══ */
    .section-label { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; }
    .sl-dot span { width:5px;height:5px;border-radius:50%;background:currentColor;animation:dotBlink 1.5s infinite;display:inline-block;margin:0 2px; }
    .sl-dot span:nth-child(2) { animation-delay:0.2s; }
    .sl-dot span:nth-child(3) { animation-delay:0.4s; }
    @keyframes dotBlink { 0%,100%{opacity:0.3} 50%{opacity:1} }
    .section-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(28px,4.2vw,50px); line-height:1.12; margin-bottom:18px; letter-spacing:-0.5px; color:var(--text-strong); font-weight:800; }
    .section-desc { font-size:17px; line-height:1.85; color:var(--text-mid); max-width:520px; margin-bottom:60px; }

   /* ══ SERVICES ══ */
.services-section { padding:120px 0; position:relative; z-index:2; background:transparent; }
.services-section::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    pointer-events:none;
}
.services-section .container { position:relative; z-index:1; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card {
    background: rgba(255,255,255,0.8);
    border: 1.5px solid rgba(149,117,205,0.1);
    border-radius: 28px; padding: 38px 32px;
    transition: all 0.45s; position: relative; overflow: hidden;
    cursor: pointer; backdrop-filter: blur(16px);
    text-decoration: none; display: block;
}
.service-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--grad-copilot); opacity:0; transition:opacity .4s;
}

/* Different bottom glow per card */
.service-card:nth-child(1)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(24,119,242,0.15), transparent); transition: all 0.5s; transform:scale(0.5); }
.service-card:nth-child(2)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(255,252,0,0.2), transparent); transition: all 0.5s; transform:scale(0.5); }
.service-card:nth-child(3)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(66,133,244,0.15), transparent); transition: all 0.5s; transform:scale(0.5); }
.service-card:nth-child(4)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(34,197,94,0.15), transparent); transition: all 0.5s; transform:scale(0.5); }
.service-card:nth-child(5)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(245,158,11,0.15), transparent); transition: all 0.5s; transform:scale(0.5); }
.service-card:nth-child(6)::after { content:''; position:absolute; bottom:-60px; right:-60px; width:140px; height:140px; border-radius:50%; background: radial-gradient(circle, rgba(214,36,159,0.15), transparent); transition: all 0.5s; transform:scale(0.5); }

.service-card:hover { transform:translateY(-10px); box-shadow:0 24px 60px rgba(149,117,205,.12); border-color:rgba(149,117,205,0.25); background:rgba(255,255,255,0.97); }
.service-card:hover::before { opacity:1; }
.service-card:hover::after { transform:scale(1.5); }
.service-card > * { position:relative; z-index:1; }

/* Service icon - platform logo container */
.service-icon {
    width:62px; height:62px;
    border-radius:18px; display:flex; align-items:center; justify-content:center;
    margin-bottom:24px; transition:all 0.4s;
    border: 1.5px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.service-icon svg { width:36px; height:36px; }

/* On hover - subtle lift, keep logo intact */
.service-card:hover .service-icon {
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.1);
    background: white;
}

/* Per-card icon background tints */
.service-card:nth-child(1) .service-icon { background: rgba(24,119,242,0.06); border-color:rgba(24,119,242,0.15); }
.service-card:nth-child(2) .service-icon { background: rgba(255,252,0,0.12); border-color:rgba(0,0,0,0.08); }
.service-card:nth-child(3) .service-icon { background: rgba(255,255,255,0.95); border-color:rgba(66,133,244,0.2); }
.service-card:nth-child(4) .service-icon { background: rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.25); }
.service-card:nth-child(5) .service-icon { background: rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.25); }
.service-card:nth-child(6) .service-icon { background: rgba(255,255,255,0.95); border-color:rgba(214,36,159,0.2); }

.service-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:19px; margin-bottom:12px; color:var(--text-strong); font-weight:700; }
.service-desc { font-size:14px; line-height:1.8; color:var(--text-mid); }
.service-arrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; margin-top:18px; opacity:0; transform:translateX(-8px); transition:all 0.3s; }
.service-arrow svg { width:14px; height:14px; stroke:currentColor; stroke-width:2.5; fill:none; }
.service-card:nth-child(1) .service-arrow { color:#1877F2; }
.service-card:nth-child(2) .service-arrow { color:#222; }
.service-card:nth-child(3) .service-arrow { color:#4285F4; }
.service-card:nth-child(4) .service-arrow { color:#22C55E; }
.service-card:nth-child(5) .service-arrow { color:#F59E0B; }
.service-card:nth-child(6) .service-arrow { color:#d6249f; }
.service-card:hover .service-arrow { opacity:1; transform:translateX(0); }
.services-cta { text-align:center; margin-top:56px; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; border:1.5px solid rgba(149,117,205,0.25); background:rgba(255,255,255,0.8); color:var(--text-strong); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:13px; padding:14px 34px; border-radius:50px; transition:all .3s; letter-spacing:.3px; backdrop-filter:blur(10px); text-decoration:none; }
.btn-outline:hover { border-color:rgba(149,117,205,0.5); background:rgba(255,255,255,1); box-shadow:0 4px 20px rgba(149,117,205,.12); transform:translateY(-2px); }

/* Responsive */
@media (max-width: 900px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
    .services-grid { grid-template-columns: 1fr; }
    .service-card { padding: 28px 24px; }
}
    /* ══ SCROLLING MARQUEE ══ */
    .scrolling-section {
        position: relative; overflow: hidden; padding: 0;
        background: linear-gradient(135deg, #F5F0FF 0%, #EFF8FF 30%, #FFF5F0 60%, #FFF0F8 100%);
    }
    .scrolling-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1.5px; background:var(--grad-copilot); opacity:0.6; }
    .scrolling-section::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:1.5px; background:var(--grad-copilot); opacity:0.6; }
    .marquee-fade-left  { position:absolute;top:0;bottom:0;left:0;width:140px;z-index:2;pointer-events:none;background:linear-gradient(to right,#F5F0FF 0%,transparent 100%); }
    .marquee-fade-right { position:absolute;top:0;bottom:0;right:0;width:140px;z-index:2;pointer-events:none;background:linear-gradient(to left,#FFF0F8 0%,transparent 100%); }
    .marquee-orb { position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none; }
    .m-orb-1 { width:300px;height:300px;background:rgba(79,195,247,0.12);top:-100px;left:20%; }
    .m-orb-2 { width:250px;height:250px;background:rgba(240,98,146,0.1);bottom:-80px;right:30%; }
    .scrolling-tracks-wrap { padding:0;overflow:hidden; }
    .scrolling-track-1 { display:flex;gap:0;padding:32px 0 20px;white-space:nowrap;animation:scrollLeft 30s linear infinite; }
    .scrolling-track-2 { display:flex;gap:0;padding:20px 0 32px;white-space:nowrap;animation:scrollRight 25s linear infinite; }
    @keyframes scrollLeft  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @keyframes scrollRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .scroll-item { display:inline-flex;align-items:center;gap:14px;flex-shrink:0;padding:0 8px; }
    .scroll-pill { display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:50px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:clamp(13px,1.6vw,15px);letter-spacing:0.3px;white-space:nowrap; }
    .scroll-pill.style-a { background:rgba(79,195,247,0.12);border:1.5px solid rgba(79,195,247,0.25);color:#2196A0; }
    .scroll-pill.style-b { background:rgba(129,199,132,0.12);border:1.5px solid rgba(129,199,132,0.25);color:#388E3C; }
    .scroll-pill.style-c { background:rgba(255,213,79,0.15);border:1.5px solid rgba(255,213,79,0.3);color:#F57F17; }
    .scroll-pill.style-d { background:rgba(255,138,101,0.12);border:1.5px solid rgba(255,138,101,0.25);color:#BF360C; }
    .scroll-pill.style-e { background:rgba(186,104,200,0.12);border:1.5px solid rgba(186,104,200,0.25);color:#6A1B9A; }
    .scroll-pill-icon { width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .scroll-pill-icon svg { width:13px;height:13px; }
    .style-a .scroll-pill-icon { background:rgba(79,195,247,0.2); } .style-a .scroll-pill-icon svg { stroke:#4FC3F7;stroke-width:2;fill:none; }
    .style-b .scroll-pill-icon { background:rgba(129,199,132,0.2); } .style-b .scroll-pill-icon svg { stroke:#66BB6A;stroke-width:2;fill:none; }
    .style-c .scroll-pill-icon { background:rgba(255,213,79,0.2); } .style-c .scroll-pill-icon svg { stroke:#FFC107;stroke-width:2;fill:none; }
    .style-d .scroll-pill-icon { background:rgba(255,138,101,0.2); } .style-d .scroll-pill-icon svg { stroke:#FF7043;stroke-width:2;fill:none; }
    .style-e .scroll-pill-icon { background:rgba(186,104,200,0.2); } .style-e .scroll-pill-icon svg { stroke:#BA68C8;stroke-width:2;fill:none; }
    .scroll-sep-star { font-size:16px;color:rgba(149,117,205,0.2);flex-shrink:0;margin:0 6px; }

    /* ══ PROCESS ══ */
    .process-section { padding:120px 0 160px;position:relative;overflow:hidden;z-index:2; }
    .process-section::before {
        content:''; position:absolute; inset:0;
        background:
            radial-gradient(ellipse at 80% 20%, rgba(79,195,247,0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 10% 80%, rgba(255,138,101,0.06) 0%, transparent 40%);
        pointer-events:none;
    }
    .process-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:64px;position:relative; }
    .process-connector { position:absolute;top:52px;left:calc(12.5% + 42px);right:calc(12.5% + 42px);height:1px;z-index:0;background:repeating-linear-gradient(90deg,rgba(149,117,205,0.2) 0,rgba(149,117,205,0.2) 8px,transparent 8px,transparent 18px); }
    .process-card { text-align:center;position:relative;z-index:1; }
    .process-num { position:absolute;top:-12px;right:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:68px;line-height:1;pointer-events:none;background:var(--grad-copilot);-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:.07; }
    .process-icon-wrap { width:86px;height:86px;background:rgba(255,255,255,0.85);border:1.5px solid rgba(149,117,205,0.15);border-radius:24px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;transition:all .35s;box-shadow:0 4px 20px rgba(149,117,205,0.08); }
    .process-card:nth-child(2) .process-icon-wrap svg { stroke:#4FC3F7; }
    .process-card:nth-child(3) .process-icon-wrap svg { stroke:#FFB74D; }
    .process-card:nth-child(4) .process-icon-wrap svg { stroke:#F06292; }
    .process-card:nth-child(5) .process-icon-wrap svg { stroke:#BA68C8; }
    .process-icon-wrap svg { width:34px;height:34px;stroke:#81C784;stroke-width:1.6;fill:none;transition:stroke .35s; }
    .process-card:hover .process-icon-wrap { background:var(--grad-copilot);border-color:transparent;box-shadow:0 12px 40px rgba(149,117,205,.25);transform:translateY(-4px); }
    .process-card:hover .process-icon-wrap svg { stroke:white; }
    .process-title { font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;color:var(--text-strong);margin-bottom:10px;font-weight:700; }
    .process-desc { font-size:14px;color:var(--text-mid);line-height:1.8; }

    /* ══ ABOUT ══ */
    .about-section { padding:120px 0;position:relative;z-index:2; }
    .about-section::before {
        content:''; position:absolute; inset:0;
        background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(240,248,255,0.7) 50%, rgba(255,245,255,0.5) 100%);
        pointer-events:none;
    }
    .about-inner { display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;position:relative;z-index:1; }
    .about-img-wrap { position:relative; }
    .about-img-main { width:100%;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(149,117,205,.16);border:2.5px solid rgba(255,255,255,0.9); }
    .about-img-main img { width:100%;height:500px;object-fit:cover;display:block; }
    .about-img-badge { position:absolute;bottom:-24px;right:-24px;background:var(--grad-warm);color:white;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;padding:26px 30px;border-radius:24px;text-align:center;box-shadow:0 16px 45px rgba(255,138,101,.3); }
    .about-img-badge .num { font-size:42px;line-height:1; }
    .about-img-badge .lbl { font-size:11.5px;font-weight:600;opacity:.9;margin-top:4px;letter-spacing:0.3px; }
    .about-features { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:42px; }
    .about-feature { display:flex;align-items:flex-start;gap:14px;background:rgba(255,255,255,0.85);border:1.5px solid rgba(149,117,205,0.1);border-radius:18px;padding:20px;transition:all .3s;backdrop-filter:blur(10px); }
    .about-feature:hover { border-color:rgba(149,117,205,0.28);transform:translateY(-3px);box-shadow:0 10px 28px rgba(149,117,205,.1); }
    .feature-icon { width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .feature-icon.f1 { background:linear-gradient(135deg,#4FC3F7,#4DD0E1); }
    .feature-icon.f2 { background:linear-gradient(135deg,#FFD54F,#FFB74D); }
    .feature-icon.f3 { background:linear-gradient(135deg,#FF8A65,#F06292); }
    .feature-icon.f4 { background:linear-gradient(135deg,#BA68C8,#9575CD); }
    .feature-icon svg { width:22px;height:22px;stroke:white;stroke-width:1.8;fill:none; }
    .feature-text strong { display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:var(--text-strong);margin-bottom:3px; }
    .feature-text span { font-size:13px;color:var(--muted); }

    /* ══ TESTIMONIALS ══ */
    .testimonials-section { padding:120px 0;position:relative;z-index:2;overflow:hidden; }
    .testimonials-section::before {
        content:''; position:absolute; inset:0;
        background: linear-gradient(135deg, #F8F0FF 0%, #EDF5FF 35%, #FFF5F0 70%, #FFF0F8 100%);
        pointer-events:none;
    }

    /* ══ CONTACT SECTION OVERRIDE ══ */
    .git-section {
        background: linear-gradient(135deg, #F5F0FF 0%, #EFF8FF 40%, #FFF5F0 70%, #FFF0F8 100%) !important;
    }
    .git-info-side {
        background: linear-gradient(145deg, #2D1B4E 0%, #1A3A6E 50%, #1B2A5E 100%) !important;
    }

    /* ══ FAQ SECTION OVERRIDE ══ */
    .faq-section-v2 {
        background: linear-gradient(135deg, #FFF8F6 0%, #F0F8FF 40%, #FFF5FF 100%) !important;
    }
    .faq2-item.open { border-color:rgba(79,195,247,0.4) !important; box-shadow: 0 8px 32px rgba(79,195,247,0.1) !important; }
    .faq2-item.open .faq2-toggle { background: var(--grad-btn) !important; }
    .faq2-cta-card { background: linear-gradient(145deg, #2D1B4E 0%, #1A3A6E 55%, #1B2A5E 100%) !important; }
    .faq2-stat-num { background:var(--grad-copilot) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }

    /* ══ BACK TO TOP ══ */
    #back-to-top { position:fixed;bottom:40px;left:40px;width:52px;height:52px;background:var(--grad-copilot);color:white;border:none;border-radius:15px;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 4px 25px rgba(149,117,205,.4);z-index:999;transition:all .3s;font-size:20px; }
    #back-to-top.visible { display:flex; }
    #back-to-top:hover { transform:translateY(-4px);box-shadow:0 8px 40px rgba(149,117,205,.5); }

    /* ══ CHAT WIDGET OVERRIDE ══ */
    .chat-toggle-btn { background:var(--grad-btn) !important; }
    .chat-toggle-btn::before, .chat-toggle-btn::after { background:var(--grad-btn) !important; }
    .chat-popup-header { background:var(--grad-btn) !important; }

    /* ══ RESPONSIVE ══ */
    @media(max-width:1100px){ .brands-grid{grid-template-columns:repeat(3,1fr);} }
    @media(max-width:992px){
        .hero-inner,.about-inner { grid-template-columns:1fr; }
        .hero-right { height:400px; }
        .services-grid,.process-grid { grid-template-columns:repeat(2,1fr); }
        .process-connector { display:none; }
        .nav-links { display:none; }
        .hamburger { display:flex; }
        .nav-badge { display:none; }
        .brands-grid { grid-template-columns:repeat(3,1fr); }
    }
    @media(max-width:768px){
        .brands-grid { grid-template-columns:repeat(2,1fr); }
        .about-img-badge { right:0;bottom:-20px; }
    }
    @media(max-width:600px){
        .services-grid,.process-grid { grid-template-columns:1fr; }
        .hero-right { display:none; }
        .hero-stats { flex-wrap:wrap;gap:20px; }
        .brands-grid { grid-template-columns:1fr 1fr; }
        .about-features { grid-template-columns:1fr; }
        .marquee-fade-left, .marquee-fade-right { width:60px; }
    }
    @media(max-width:420px){
        .brands-grid { grid-template-columns:1fr; }
        .hero-actions { flex-direction:column;align-items:flex-start; }
    }