/* =====================================================================
   Cloudsect — creative layer
   Richer gradients, layered shadows, gradient borders, spotlight & tilt
   hovers, glossy icons, aurora backgrounds, wave vectors, scroll motion.
   Loaded last on every page. Additive only — no content is hidden or removed.
   ===================================================================== */

/* ---------- 1. Refined gradient & shadow tokens (same brand palette) ---------- */
:root {
    --grad-primary:   linear-gradient(135deg, #4a86f5 0%, #2f6fe4 42%, #1a4bb0 100%);
    --grad-secondary: linear-gradient(135deg, #f45b66 0%, #e63946 45%, #a81f2b 100%);
    --grad-duo:       linear-gradient(120deg, #3b7bef 0%, #1f56c2 40%, #5b3a8f 72%, #d0303d 100%);
    --grad-dark:      linear-gradient(140deg, #06142f 0%, #0b2257 48%, #14306f 100%);
    --grad-text:      linear-gradient(110deg, #2f6fe4 0%, #3d5fd8 30%, #7b3fa8 62%, #e63946 100%);
    --grad-border:    linear-gradient(135deg, #8bb6ff 0%, #2f6fe4 40%, #7b3fa8 70%, #e63946 100%);
    --sh-soft: 0 1px 2px rgba(16,46,112,0.04), 0 6px 18px -10px rgba(16,46,112,0.14);
    --sh-lift: 0 2px 6px rgba(16,46,112,0.05), 0 22px 44px -20px rgba(47,111,228,0.38), 0 44px 80px -48px rgba(230,57,70,0.30);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Animated gradient text ---------- */
.text-gradient, .hero-stat-number {
    background-image: var(--grad-text);
    background-size: 220% 100%;
    animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.about-left h2 span {
    background: var(--grad-secondary); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: gradShift 8s ease-in-out infinite;
}
.stat-number {
    background: linear-gradient(180deg, #ffffff 30%, #b8d4ff 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- 3. Cards: soft depth, gradient borders, cursor spotlight ---------- */
.service-card, .team-card, .b2b-card, .about-feature, .testimonial-card, .blog-card,
.portfolio-card, .process-step, .role-card, .faq-item, .aside-card:not(.dark) {
    box-shadow: var(--sh-soft);
}
.service-card:hover, .team-card:hover, .b2b-card:hover, .about-feature:hover,
.testimonial-card:hover, .blog-card:hover, .process-step:hover, .role-card:hover {
    border-color: transparent;
    background:
        radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(47,111,228,0.09), transparent 45%) padding-box,
        linear-gradient(var(--white), var(--white)) padding-box,
        var(--grad-border) border-box;
    box-shadow: var(--sh-lift);
}
.portfolio-card:hover { box-shadow: var(--sh-lift); }

/* After the reveal animation finishes, hovers react instantly and every property eases smoothly */
.reveal.is-revealed {
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out),
                box-shadow 0.45s var(--ease-out), border-color 0.35s ease, background-color 0.35s ease;
}

/* Subtle 3D tilt (desktop pointers only; set by creative.js) */
@media (hover: hover) and (pointer: fine) {
    .fx-tilt { transform-style: preserve-3d; }
    .service-card.fx-tilt:hover, .team-card.fx-tilt:hover {
        transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px);
    }
    .b2b-card.fx-tilt:hover, .about-feature.fx-tilt:hover, .process-step.fx-tilt:hover {
        transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    }
}

/* Testimonials */
.testimonial-card:hover::before {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.testimonial-avatar { box-shadow: 0 0 0 3px var(--white), 0 6px 16px -6px rgba(47,111,228,0.5); }

/* Portfolio & blog images get a branded tint on hover */
.blog-card-img::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, rgba(47,111,228,0) 40%, rgba(23,65,154,0.45) 100%);
    opacity: 0; transition: opacity 0.5s ease;
}
.blog-card:hover .blog-card-img::after { opacity: 1; }
.portfolio-card-category, .blog-card-category { box-shadow: 0 6px 16px -8px rgba(16,46,112,0.4); }

/* Portfolio stats & capability stats */
.portfolio-stat, .cap-head-stat { box-shadow: var(--sh-soft); }
.portfolio-stat:hover { box-shadow: var(--sh-lift); }
.portfolio-stat strong {
    background: var(--grad-text); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- 4. Glossy, glowing icons ---------- */
.about-feature-icon, .b2b-card-icon, .contact-info-icon, .floating-card-icon, .nav-cta {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 16px -10px rgba(0,0,0,0.25), 0 10px 22px -10px rgba(47,111,228,0.6);
}
.floating-card-icon.red, .about-feature:nth-child(even) .about-feature-icon, .b2b-card:nth-child(2) .b2b-card-icon,
.contact-info-item:nth-child(2) .contact-info-icon, .cap-ai-header-icon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 16px -10px rgba(0,0,0,0.25), 0 10px 22px -10px rgba(230,57,70,0.6);
}
.about-feature-icon, .b2b-card-icon { transition: transform 0.45s var(--ease-out), box-shadow 0.45s ease; }
.about-feature:hover .about-feature-icon, .b2b-card:hover .b2b-card-icon {
    transform: rotate(-8deg) scale(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 6px rgba(47,111,228,0.10), 0 16px 30px -10px rgba(47,111,228,0.6);
}
.service-card:hover .service-icon-wrap, .team-card:hover .team-card-icon {
    box-shadow: 0 0 0 7px rgba(47,111,228,0.10), 0 18px 36px -12px rgba(47,111,228,0.6), inset 0 1px 0 rgba(255,255,255,0.35);
}
.service-card:nth-child(even):hover .service-icon-wrap {
    box-shadow: 0 0 0 7px rgba(230,57,70,0.10), 0 18px 36px -12px rgba(230,57,70,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.team-card-icon, .service-icon-wrap { position: relative; }
.team-card-icon::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1.5px dashed rgba(47,111,228,0.35); opacity: 0;
    transition: opacity 0.4s ease;
}
.team-card:hover .team-card-icon::after { opacity: 1; animation: spin 10s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 5. Buttons: richer gradient, light sweep, magnetic ---------- */
.btn::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
    transform: skewX(-20deg); transition: left 0.75s var(--ease-out); pointer-events: none;
}
.btn:hover::after { left: 150%; }
.btn-primary { background-size: 160% 160%; background-position: 0% 50%; transition: all 0.35s var(--ease-out), background-position 0.6s ease; }
.btn-primary:hover { background-position: 100% 50%; transform: translate(var(--bx, 0px), calc(var(--by, 0px) - 3px)); }
.btn-secondary { box-shadow: 0 8px 20px -14px rgba(47,111,228,0.5); }
.nav-cta { position: relative; overflow: hidden; }
.nav-cta::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg); transition: left 0.75s var(--ease-out);
}
.nav-cta:hover::after { left: 150%; }

/* ---------- 6. Navbar polish ---------- */
.navbar.scrolled {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-bottom-color: rgba(139,182,255,0.35);
}
@media (min-width: 810px) {
    .nav-link:hover { background: var(--blue-50); }
}

/* ---------- 7. Capabilities ---------- */
.cap-tabs {
    background: linear-gradient(135deg, #0a1e4a 0%, #102e70 60%, #2a1f5e 100%);
    box-shadow: 0 20px 48px -20px rgba(10,30,74,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cap-tab.active { box-shadow: 0 8px 20px -8px rgba(47,111,228,0.8); }
.cap-panel { background-size: 140% 140%; transition: all 0.45s var(--ease-out), background-position 0.8s ease; }
.cap-panel:hover { background-position: 100% 100%; }
.cap-panel:hover, .cap-ai-card:hover, .stat-card:hover, .contact-info-item:hover {
    background-image: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.12), transparent 50%), var(--panel-bg, none);
}
.cap-panel:hover { --panel-bg: linear-gradient(135deg, #1f56c2 0%, #17419a 55%, #0a1e4a 100%); }

/* ---------- 8. Aurora glow on dark sections ---------- */
.stats-section::after, .contact-section::after, .footer::after, .pat-darklines[style]::after {
    content: ''; position: absolute; inset: -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 48% at 18% 22%, rgba(91,147,247,0.24), transparent 62%),
        radial-gradient(32% 42% at 82% 78%, rgba(230,57,70,0.18), transparent 62%),
        radial-gradient(28% 36% at 60% 10%, rgba(123,63,168,0.16), transparent 62%);
    animation: aurora 22s ease-in-out infinite alternate;
}
.footer::after { opacity: 0.55; }
@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(4%, -3%, 0) rotate(6deg); }
    100% { transform: translate3d(-4%, 3%, 0) rotate(-4deg); }
}
.stats-inner, .contact-inner, .footer-inner { position: relative; z-index: 1; }
.cta-deco { z-index: 1; }
.footer::before { height: 2px; background: var(--grad-duo); opacity: 0.8; }

/* ---------- 9. Vectors: wave divider under heroes ---------- */
.fx-wave {
    position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px;
    z-index: 2; pointer-events: none; display: block;
}
.fx-wave .w1 { fill: rgba(255,255,255,0.45); animation: waveDrift 14s ease-in-out infinite alternate; }
.fx-wave .w2 { fill: #ffffff; }
@keyframes waveDrift { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@media (max-width: 809px) { .fx-wave { height: 36px; } }

/* ---------- 10. Section headers: animated gradient accent ---------- */
.section-header .eyebrow { box-shadow: 0 6px 18px -10px rgba(47,111,228,0.45); }
.section-header h2::after {
    content: ''; display: block; width: 0; height: 4px; border-radius: 4px;
    margin: 18px auto 0; background: var(--grad-duo); transition: width 0.9s var(--ease-out) 0.15s;
}
.section-header.in-view h2::after { width: 72px; }

/* ---------- 11. Scroll experience ---------- */
.reveal { filter: blur(6px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.reveal.visible { filter: none; }
.about-right img { transform: scale(1.08) translateY(var(--py, 0px)); transition: transform 0.2s linear; will-change: transform; }
html { scrollbar-color: #2f6fe4 #eef5ff; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eef5ff; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4a86f5, #1f56c2 60%, #c22531); border-radius: 10px; border: 2px solid #eef5ff; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2f6fe4, #17419a 60%, #9c1b25); }

/* ---------- 12. Forms ---------- */
.form-group input:focus, .form-group textarea:focus {
    border-color: transparent;
    background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-border) border-box;
}
.contact-form-card { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(139,182,255,0.25); }

/* ---------- 13. Inner pages ---------- */
.page-hero-art img { filter: drop-shadow(0 26px 30px rgba(16,46,112,0.16)); }
.faq-item[open] { border-color: transparent; background: linear-gradient(var(--white), var(--white)) padding-box, var(--grad-border) border-box; }
.legal-toc, .aside-card:not(.dark) { box-shadow: var(--sh-soft); }

/* ---------- 14. Accessibility: honour reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal { filter: none; }
    .about-right img { transform: none; }
    .fx-wave .w1 { animation: none; }
}