/* ================================================================
   IshunEnterprise — Premium Modern Design System v3
   ================================================================ */

:root {
    /* Neumorphism Color Palette */
    --bg-body:       #e0e5ec;
    --bg-card:       #e0e5ec;
    --bg-dark:       #2d3748;
    --bg-dark-2:     #4a5568;
    
    /* Primary colors - soft blue */
    --primary:       #6b7db3;
    --primary-dark:  #5a6a9c;
    --primary-light: #7c8dc5;
    --primary-pale:  rgba(107, 125, 179, 0.1);
    
    /* Legacy alias */
    --orange:        #6b7db3;
    --orange-dark:   #5a6a9c;
    --orange-light:  #7c8dc5;
    
    /* Steel colors for Neumorphism */
    --steel-dark:    #d1d9e6;
    --steel-mid:     #e0e5ec;
    --steel-card:    #e0e5ec;
    --steel-border:  rgba(255, 255, 255, 0.2);
    --steel-hover:   rgba(255, 255, 255, 0.3);
    
    /* Text */
    --text-body:     #4a5568;
    --text-muted:    #718096;
    --text-light:    #2d3748;
    
    /* Design tokens */
    --card-radius:   20px;
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --transition:    all 0.3s var(--ease);
    
    /* Neumorphism Shadows - dual shadows for extruded effect */
    --shadow-soft-out:
        8px 8px 16px rgba(163, 177, 198, 0.6),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    --shadow-soft-in:
        inset 8px 8px 16px rgba(163, 177, 198, 0.6),
        inset -8px -8px 16px rgba(255, 255, 255, 0.8);
    --shadow-medium-out:
        12px 12px 24px rgba(163, 177, 198, 0.6),
        -12px -12px 24px rgba(255, 255, 255, 0.8);
    --shadow-medium-in:
        inset 12px 12px 24px rgba(163, 177, 198, 0.6),
        inset -12px -12px 24px rgba(255, 255, 255, 0.8);
    --shadow-hard-out:
        4px 4px 8px rgba(163, 177, 198, 0.6),
        -4px -4px 8px rgba(255, 255, 255, 0.8);
    --shadow-hard-in:
        inset 4px 4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);
    
    /* Legacy shadow aliases for compatibility */
    --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm:  var(--shadow-hard-out);
    --shadow-md:  var(--shadow-soft-out);
    --shadow-lg:  var(--shadow-medium-out);
    --shadow-xl:  0 32px 72px rgba(107, 125, 179, 0.22), 0 12px 36px rgba(0,0,0,0.08);
    --shadow-glow: 0 0 40px rgba(107, 125, 179, 0.25);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
    font-family:'Plus Jakarta Sans','Inter', system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--text-body);
    overflow-x: hidden;
    padding-top: 80px;
    line-height: 1.65;
}

h1,h2,h3,h4,.section-title,.stat-number {
    font-family:'Barlow Condensed','Inter',sans-serif;
    letter-spacing: -0.3px;
}

/* ================================================================
   PAGE LOADER
   ================================================================ */
#pageLoader {
    position:fixed; inset:0;
    background: var(--bg-dark);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; transition: opacity .5s, visibility .5s;
}
#pageLoader.hidden { opacity:0; visibility:hidden; }
.loader-ring {
    width:48px; height:48px;
    border:3px solid rgba(255,255,255,0.08);
    border-top-color: var(--primary);
    border-radius:50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

#scrollProgress {
    position:fixed; top:0; left:0; height:3px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light), var(--primary-dark));
    z-index:10000; width:0%; transition:width .1s;
    box-shadow: 0 0 8px rgba(107, 125, 179, 0.5);
}

.ripple {
    position:fixed; border-radius:50%;
    background:rgba(107, 125, 179, 0.15);
    transform:scale(0); animation:rippleAnim .6s linear;
    pointer-events:none; z-index:9998;
}
@keyframes rippleAnim { to { transform:scale(4); opacity:0; } }

/* ================================================================
   NAVBAR — Neumorphism
   ================================================================ */
#mainNav {
    background: transparent;
    transition: var(--transition); padding:18px 0;
    border-bottom:1px solid transparent;
}
#mainNav.scrolled {
    background: var(--bg-card);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    padding:12px 0;
    border-bottom-color: rgba(107, 125, 179, 0.1);
    box-shadow: var(--shadow-hard-out);
}

.navbar-brand {
    display:flex; align-items:center; gap:14px; text-decoration:none;
}
.brand-logo {
    width:44px; height:44px;
    background: var(--bg-card);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:20px; color: var(--primary);
    box-shadow: var(--shadow-hard-out);
    transition:var(--transition); flex-shrink:0;
}
.brand-logo-sm { width:36px; height:36px; font-size:16px; border-radius:10px; }
.navbar-brand:hover .brand-logo {
    transform:scale(1.08) rotate(-6deg);
    box-shadow: var(--shadow-medium-out);
    color: var(--primary-dark);
}
.brand-text-wrap { display:flex; flex-direction:column; }
.brand-main {
    font-family:'Barlow Condensed',sans-serif;
    font-size:1.35rem;
    font-weight:800;
    color: var(--text-body);
    line-height:1.1;
}
.brand-sub {
    font-size:0.6rem;
    color: var(--text-muted);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1.2px;
}

.nav-hover {
    color: var(--text-muted) !important;
    font-weight:500; font-size:0.875rem;
    padding:8px 14px !important;
    border-radius:8px; transition:var(--transition);
    position:relative;
}
.nav-hover::after {
    content:''; position:absolute; bottom:4px; left:50%; right:50%;
    height:2px; background:linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius:2px; transition:var(--transition);
}
.nav-hover:hover {
    color: var(--primary) !important;
    background: var(--bg-card);
    box-shadow: var(--shadow-hard-out);
}
.nav-hover:hover::after { left:14px; right:14px; }

.btn-nav-cta {
    font-weight:700; font-size:0.8rem;
    border-radius:10px; padding:10px 22px;
    background: var(--bg-card);
    border:none;
    color: var(--primary-dark) !important;
    transition: all 0.15s ease-out;
    box-shadow: var(--shadow-hard-out);
    text-transform:uppercase; letter-spacing:0.5px;
    position:relative; overflow:hidden;
    z-index:1;
}
.btn-nav-cta i, .btn-nav-cta span {
    position:relative;
    z-index:2;
}
.btn-nav-cta::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    opacity:0; transition:opacity 0.12s ease-out;
    border-radius:10px;
    z-index:1;
}
.btn-nav-cta:hover {
    transform:translateY(-2px);
    box-shadow: var(--shadow-medium-out);
    color:#fff !important;
}
.btn-nav-cta:hover::before { opacity:1; }

.navbar-toggler { padding:8px; border:none !important; }
.toggler-icon { display:flex; flex-direction:column; gap:5px; width:22px; }
.toggler-icon span { height:2px; background:var(--primary); border-radius:2px; transition:var(--transition); display:block; }
.navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(2) { opacity:0; transform:scaleX(0); }
.navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:991px) {
    .navbar-collapse {
        background: var(--bg-card);
        backdrop-filter:blur(24px);
        border-radius:16px; padding:16px; margin-top:12px;
        border:1px solid var(--steel-border);
        box-shadow: var(--shadow-medium-out);
    }
    .nav-hover::after { display:none; }
    .btn-nav-cta { width:100%; text-align:center; margin-top:8px; }
}

/* ================================================================
   HERO / SLIDER — Neumorphism
   ================================================================ */
.hero-slider { position:relative; }
.hero-slider .carousel-item { min-height:90vh; }
.slider-img { width:100%; height:90vh; object-fit:cover; filter:brightness(0.75) saturate(0.8); }

/* Hero when no slider images */
.hero-placeholder {
    min-height:90vh;
    background: var(--bg-body);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
}
/* Neumorphism grid pattern */
.hero-placeholder::after {
    content:'';
    position:absolute; inset:0;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(163,177,198,0.6) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.3;
    pointer-events:none;
}
/* Animated neumorphism orb */
.hero-placeholder::before {
    content:'';
    position:absolute;
    width:700px; height:700px;
    background: radial-gradient(circle,
        rgba(224, 229, 236, 0.9) 0%,
        rgba(208, 214, 224, 0.7) 30%,
        rgba(163, 177, 198, 0.4) 70%,
        transparent 100%);
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    animation:heroOrb 8s ease-in-out infinite;
    pointer-events:none;
    border-radius: 50%;
    box-shadow:
        inset 20px 20px 40px rgba(255, 255, 255, 0.8),
        inset -20px -20px 40px rgba(163, 177, 198, 0.6),
        40px 40px 80px rgba(163, 177, 198, 0.6),
        -40px -40px 80px rgba(255, 255, 255, 0.8);
}
@keyframes heroOrb {
    0%,100% {
        transform:translate(-50%,-50%) scale(1) rotate(0deg);
        opacity:0.8;
    }
    33%      {
        transform:translate(-50%,-50%) scale(1.2) rotate(120deg);
        opacity:1;
    }
    66%      {
        transform:translate(-50%,-50%) scale(0.9) rotate(240deg);
        opacity:0.7;
    }
}

.hero-placeholder .container { position:relative; z-index:2; }

.carousel-caption {
    top:50%; transform:translateY(-50%);
    bottom:unset; text-align:center; left:10%; right:10%;
    color: #fff !important;
    animation: captionFadeIn 0.8s ease forwards;
}
.carousel-item.active .carousel-caption { animation: captionFadeIn 0.8s ease forwards; }
@keyframes captionFadeIn {
    from { opacity:0; transform:translateY(calc(-50% + 20px)); }
    to   { opacity:1; transform:translateY(-50%); }
}
.carousel-caption .btn-outline-custom {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.85);
    color: #fff;
    box-shadow: none;
}
.carousel-caption .btn-outline-custom:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
}
.carousel-caption * { color: #fff !important; }
.carousel-caption h1 {
    font-size:clamp(2.8rem, 6.5vw, 5.5rem);
    font-weight:800; line-height:1.03;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 8px 32px rgba(0,0,0,0.6);
}
.carousel-caption p {
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
    font-size:1.1rem; margin-top:10px;
}

/* Badge for hero — always visible over images */
.badge-custom {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff !important;
    font-size:0.72rem; font-weight:700;
    padding:5px 16px; border-radius:100px;
    text-transform:uppercase; letter-spacing:2px;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-hard-out);
}

/* ================================================================
   SECTION COMMONS — Neumorphism
   ================================================================ */
.section { padding:96px 0; }
.section-sm { padding:64px 0; }

.section-label {
    display:inline-flex; align-items:center; gap:6px;
    background: var(--bg-card);
    border: none;
    color: var(--primary-dark); font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:2px;
    padding:5px 16px; border-radius:100px; margin-bottom:14px;
    box-shadow: var(--shadow-hard-out);
}

.section-title {
    font-size:clamp(2rem, 5vw, 3.4rem);
    font-weight:800; line-height:1.08;
    color:var(--text-body); margin-bottom:16px;
    text-transform:uppercase;
}
.section-sub {
    color:var(--text-muted); font-size:1.05rem;
    max-width:580px; line-height:1.75;
}
.text-gradient {
    background:linear-gradient(135deg, var(--primary), var(--primary-light));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.divider-line {
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(107, 125, 179, 0.15), transparent);
    margin:72px 0;
}

/* Section overrides for Neumorphism */
.page-header .section-title,
.cta-section .section-title,
.stats-bar .section-title { color:var(--text-body); }
.page-header .section-sub,
.cta-section .section-sub  { color:var(--text-muted); }
.page-header .section-label,
.cta-section .section-label {
    background: var(--bg-card);
    box-shadow: var(--shadow-hard-out);
    border-color: rgba(255,255,255,0.2);
    color: var(--text-body);
}

/* ================================================================
   STATS BAR — Neumorphism
   ================================================================ */
.stats-bar {
    background: var(--bg-dark);
    padding:56px 0; position:relative; overflow:hidden;
    box-shadow: inset 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 -8px 32px rgba(255, 255, 255, 0.05);
}
.stats-bar::before {
    content:'';
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
}
.stats-bar::after {
    content:'';
    position:absolute; top:-60%; left:50%;
    transform:translateX(-50%);
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(107, 125, 179, 0.2) 0%, transparent 60%);
    pointer-events:none;
}
.stat-item { text-align:center; position:relative; z-index:1; }
.stat-number {
    font-size:3.4rem; font-weight:900; color:#fff; line-height:1;
    background: linear-gradient(135deg, #fff, var(--primary-light));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
}
.stat-label {
    font-size:0.75rem; font-weight:600;
    color:rgba(255,255,255,0.65); margin-top:6px;
    text-transform:uppercase; letter-spacing:1.5px;
}

/* ================================================================
   CARDS — Neumorphism Design
   ================================================================ */
.glass-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft-out);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}
.glass-card:hover {
    box-shadow: var(--shadow-medium-out);
    transform: translateY(-4px);
}
.glass-card:active {
    box-shadow: var(--shadow-soft-in);
    transform: scale(0.98) !important;
}

/* ================================================================
   WORK CARDS
   ================================================================ */
.work-card { border-radius: var(--card-radius); overflow:hidden; }
.work-card .work-img-wrapper { position:relative; overflow:hidden; }
.work-card .work-thumb { height:230px; width:100%; object-fit:cover; transition:transform .5s var(--ease); }
.work-card:hover .work-thumb { transform:scale(1.08); }
.work-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(13,12,34,0.9) 0%, rgba(13,12,34,0.2) 60%, transparent 100%);
    display:flex; align-items:flex-end; padding:24px;
    opacity:0; transition:var(--transition);
}
.work-card:hover .work-overlay { opacity:1; }
.work-thumb-placeholder {
    height:230px;
    background: linear-gradient(135deg, #ebeeff, #f5f6ff);
    display:flex; align-items:center; justify-content:center;
}

/* ================================================================
   PRODUCT CARDS — Neumorphism
   ================================================================ */
.product-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft-out);
    transition: var(--transition); overflow:hidden; position:relative;
}
.product-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    transform:scaleX(0); transform-origin:left;
    transition: transform .35s var(--ease);
}
.product-card:hover {
    transform:translateY(-6px);
    box-shadow: var(--shadow-medium-out);
}
.product-card:hover::before { transform:scaleX(1); }
.product-card:active {
    box-shadow: var(--shadow-soft-in);
    transform: scale(0.97) !important;
}

.product-icon-wrap {
    width:60px; height:60px;
    background: var(--bg-card);
    border: none;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; margin-bottom:18px; transition:var(--transition);
    box-shadow: var(--shadow-hard-out);
    color: var(--primary);
}
.product-card:hover .product-icon-wrap {
    background: var(--bg-card);
    transform:scale(1.1) rotate(4deg);
    box-shadow: var(--shadow-medium-out);
    color: var(--primary-dark);
}

.product-badge {
    position:absolute; top:14px; right:14px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; font-size:0.63rem; font-weight:700;
    padding:4px 12px; border-radius:100px;
    text-transform:uppercase; letter-spacing:0.5px;
    box-shadow:0 4px 12px rgba(107, 125, 179, 0.35);
}
.product-badge-inline {
    display:inline-block;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; font-size:0.62rem; font-weight:700;
    padding:4px 12px; border-radius:100px;
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px;
    box-shadow:0 4px 12px rgba(107, 125, 179, 0.3);
}
.product-img { height:200px; width:100%; object-fit:cover; }

/* ================================================================
   CAPABILITY / TECH CARDS — Neumorphism
   ================================================================ */
.tech-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--card-radius);
    padding:32px 24px; text-align:center;
    box-shadow: var(--shadow-soft-out);
    transition:var(--transition); position:relative; overflow:hidden;
}
.tech-card::before {
    content:''; position:absolute; bottom:0; left:0; right:0; height:0;
    background:linear-gradient(to top, rgba(107, 125, 179, 0.1), transparent);
    transition:var(--transition);
}
.tech-card:hover {
    transform:translateY(-6px);
    box-shadow: var(--shadow-medium-out);
}
.tech-card:hover::before { height:100%; }
.tech-icon {
    font-size:2.4rem;
    margin-bottom:16px;
    display:block;
    transition:transform .35s;
    color: var(--primary);
}
.tech-card:hover .tech-icon {
    transform:scale(1.25) rotate(-5deg);
    color: var(--primary-dark);
}
.tech-bar {
    height:6px;
    background: rgba(163, 177, 198, 0.3);
    border-radius:6px;
    overflow:hidden;
    margin-top:12px;
    box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.6),
                inset -2px -2px 4px rgba(255, 255, 255, 0.8);
}
.tech-bar-fill {
    height:100%; border-radius:6px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    width:0%; transition:width 1.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 2px 2px 4px rgba(107, 125, 179, 0.3);
}

/* ================================================================
   VALUE CARDS — Neumorphism
   ================================================================ */
.value-card {
    background: var(--bg-card);
    border: none;
    border-radius: var(--card-radius);
    padding:32px; text-align:center;
    box-shadow: var(--shadow-soft-out);
    transition:var(--transition);
}
.value-card:hover {
    transform:translateY(-6px);
    box-shadow: var(--shadow-medium-out);
}
.value-icon {
    width:70px; height:70px; margin:0 auto 20px;
    background: var(--bg-card);
    border: none;
    border-radius:18px; display:flex; align-items:center; justify-content:center;
    font-size:1.8rem; transition:var(--transition);
    box-shadow: var(--shadow-hard-out);
    color: var(--primary);
}
.value-card:hover .value-icon {
    transform:scale(1.12) rotate(4deg);
    box-shadow: var(--shadow-medium-out);
    color: var(--primary-dark);
}

/* ================================================================
   PAGE HEADER — Dark Premium
   ================================================================ */
.page-header {
   padding:130px 0 90px;
   background: var(--bg-body);
   position:relative; overflow:hidden;
   box-shadow: var(--shadow-soft-in);
}
.page-header::before {
   content:'';
   position:absolute; inset:0;
   background-image:
       radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 1px, transparent 1px),
       radial-gradient(circle at 75% 75%, rgba(163,177,198,0.6) 1px, transparent 1px);
   background-size: 60px 60px;
   opacity: 0.3;
   pointer-events:none;
}
.page-header::after {
   content:'';
   position:absolute; bottom:-80px; right:-80px;
   width:400px; height:400px;
   background: radial-gradient(circle,
       rgba(224, 229, 236, 0.9) 0%,
       rgba(208, 214, 224, 0.7) 30%,
       rgba(163, 177, 198, 0.4) 70%,
       transparent 100%);
   pointer-events:none;
   border-radius: 50%;
   box-shadow:
       inset 20px 20px 40px rgba(255, 255, 255, 0.8),
       inset -20px -20px 40px rgba(163, 177, 198, 0.6),
       40px 40px 80px rgba(163, 177, 198, 0.6),
       -40px -40px 80px rgba(255, 255, 255, 0.8);
   animation: heroOrb 8s ease-in-out infinite;
}
.page-header .container { position:relative; z-index:2; }

/* ================================================================
   BUTTONS — Neumorphism
   ================================================================ */
.btn-primary-custom {
   background: var(--bg-card);
   color: var(--primary-dark);
   font-weight:700;
   border:none;
   padding:13px 32px; border-radius:12px;
   transition: all 0.15s ease-out;
   box-shadow: var(--shadow-hard-out);
   position:relative; overflow:hidden;
   text-transform:uppercase; letter-spacing:0.5px; font-size:0.85rem;
   display:inline-flex; align-items:center; gap:8px;
   z-index:1;
}
.btn-primary-custom:hover {
   background: linear-gradient(135deg, var(--primary-light), var(--primary));
   color:#fff !important; transform:translateY(-3px);
   box-shadow: var(--shadow-medium-out);
}
.btn-primary-custom:active {
   box-shadow: var(--shadow-hard-in);
   transform:scale(0.96) !important;
}

.btn-outline-custom {
    background: var(--bg-card);
    color:var(--primary);
    font-weight:700;
    padding:13px 32px; border-radius:12px;
    border:2px solid rgba(107, 125, 179, 0.3);
    transition: all 0.15s ease-out;
    text-transform:uppercase; letter-spacing:0.5px; font-size:0.85rem;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow: var(--shadow-hard-out);
}
.btn-outline-custom:hover {
    background:var(--primary); color:#fff;
    border-color:var(--primary);
    box-shadow: var(--shadow-medium-out);
    transform:translateY(-2px);
}

/* ================================================================
   CONTACT — Neumorphism
   ================================================================ */
.contact-card {
    background:var(--bg-card);
    border: none;
    border-radius:var(--card-radius);
    padding:28px;
    box-shadow: var(--shadow-soft-out);
    transition:var(--transition);
}
.contact-card:hover {
    transform:translateY(-4px);
    box-shadow: var(--shadow-medium-out);
}
.contact-icon {
    width:52px; height:52px; flex-shrink:0;
    background: var(--bg-card);
    border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:1.1rem; color: var(--primary);
    box-shadow: var(--shadow-hard-out);
}
.form-glass {
    background: var(--bg-card) !important;
    border: none !important;
    color: var(--text-body) !important;
    border-radius:12px !important;
    padding:13px 18px !important;
    transition:var(--transition) !important;
    box-shadow: var(--shadow-hard-in) !important;
}
.form-glass::placeholder { color: var(--text-muted) !important; }
.form-glass:focus {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-hard-out) !important;
    color: var(--text-body) !important;
    outline:none !important;
}
.form-label-custom {
    color:var(--text-muted); font-size:0.78rem; font-weight:600;
    margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px;
}

/* ================================================================
   CTA SECTION — Dark Premium
   ================================================================ */
.cta-section {
   background: var(--bg-body);
   position:relative; overflow:hidden;
   box-shadow: var(--shadow-soft-in);
}
.cta-section::before {
   content:''; position:absolute; inset:0;
   background-image:
       radial-gradient(circle at 25% 25%, rgba(255,255,255,0.8) 1px, transparent 1px),
       radial-gradient(circle at 75% 75%, rgba(163,177,198,0.6) 1px, transparent 1px);
   background-size: 60px 60px;
   opacity: 0.3;
   pointer-events:none;
}
.cta-section::after {
   content:''; position:absolute; top:-100px; left:50%;
   transform:translateX(-50%);
   width:700px; height:700px;
   background: radial-gradient(circle,
       rgba(224, 229, 236, 0.9) 0%,
       rgba(208, 214, 224, 0.7) 30%,
       rgba(163, 177, 198, 0.4) 70%,
       transparent 100%);
   pointer-events:none;
   border-radius: 50%;
   box-shadow:
       inset 20px 20px 40px rgba(255, 255, 255, 0.8),
       inset -20px -20px 40px rgba(163, 177, 198, 0.6),
       40px 40px 80px rgba(163, 177, 198, 0.6),
       -40px -40px 80px rgba(255, 255, 255, 0.8);
   animation: heroOrb 8s ease-in-out infinite;
}
.cta-section .container { position:relative; z-index:2; }

/* ================================================================
   PRODUCT IMAGE CAROUSEL (Public)
   ================================================================ */
.product-slider-wrap { position:relative; overflow:hidden; }
.product-carousel { border-radius:var(--card-radius) var(--card-radius) 0 0; }
.product-slide-img { width:100%; height:220px; object-fit:cover; display:block; transition:transform .4s ease; }
.product-card:hover .product-slide-img { transform:scale(1.05); }
.product-slide-placeholder {
    height:220px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #ebeeff, #f5f6ff);
}
.product-carousel-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%;
    background:rgba(13,12,34,0.55) !important;
    border:1px solid rgba(255,255,255,0.2) !important;
    color:#fff !important; display:flex; align-items:center; justify-content:center;
    font-size:0.65rem; opacity:0; transition:opacity .2s,background .2s; z-index:10;
    backdrop-filter:blur(4px);
}
.product-card:hover .product-carousel-btn { opacity:1; }
.product-carousel-btn.carousel-control-prev { left:8px; }
.product-carousel-btn.carousel-control-next { right:8px; }
.product-carousel-btn:hover { background:rgba(107, 125, 179, 0.8) !important; }
.product-carousel-btn .carousel-control-prev-icon,
.product-carousel-btn .carousel-control-next-icon { display:none; }
.product-slide-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:10; }
.slide-dot { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,0.45); border:none; padding:0; transition:width .3s,background .3s; cursor:pointer; }
.slide-dot.active { width:18px; background:var(--primary); }
.product-img-count {
    position:absolute; top:10px; right:10px;
    background:rgba(13,12,34,0.6); backdrop-filter:blur(6px);
    color:#fff; font-size:0.65rem; font-weight:600;
    padding:3px 10px; border-radius:100px;
    border:1px solid rgba(255,255,255,0.15);
}

/* ================================================================
   FILTER BUTTONS
   ================================================================ */
.filter-btn {
    background:var(--bg-card);
    border:1.5px solid rgba(107, 125, 179, 0.15);
    color:var(--text-muted); padding:8px 20px; border-radius:100px;
    font-size:0.8rem; font-weight:600; transition:var(--transition);
    cursor:pointer; text-decoration:none; display:inline-block;
    text-transform:uppercase; letter-spacing:0.5px;
    box-shadow: var(--shadow-xs);
}
.filter-btn:hover, .filter-btn.active {
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color:transparent; color:#fff;
    box-shadow:0 6px 18px rgba(107, 125, 179, 0.35);
    transform:translateY(-1px);
}

/* ================================================================
   FOOTER — Neumorphism Dark
   ================================================================ */
.site-footer {
    background: var(--bg-dark);
    border-top:1px solid rgba(255,255,255,0.06);
}
.footer-top { padding:72px 0 52px; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.site-footer .brand-main { color:#fff; }
.site-footer .brand-sub { color:rgba(255,255,255,0.5); }
.footer-desc { color:#fff !important; line-height:1.75; margin:16px 0 20px; font-size:0.875rem; }
.footer-heading {
    color:#fff; font-weight:700; font-size:0.72rem;
    text-transform:uppercase; letter-spacing:2px; margin-bottom:20px;
    position:relative; padding-bottom:10px;
}
.footer-heading::after {
    content:''; position:absolute; bottom:0; left:0;
    width:28px; height:2px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius:2px;
}
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:10px; }
.footer-links a {
    color:rgba(255,255,255,0.55); text-decoration:none; font-size:0.875rem;
    transition:var(--transition); display:inline-flex; align-items:center; gap:8px;
}
.footer-links a::before {
    content:'›'; color:var(--primary); font-size:1rem; transition:var(--transition);
}
.footer-links a:hover { color:#fff; padding-left:4px; }
.footer-contact-list { list-style:none; padding:0; }
.footer-contact-list li {
    display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;
    font-size:0.875rem; color:rgba(255,255,255,0.6);
}
.footer-contact-list i { margin-top:2px; flex-shrink:0; width:14px; }
.social-links { display:flex; gap:8px; flex-wrap:wrap; }
.social-btn {
    width:40px; height:40px;
    background: rgba(45, 55, 72, 0.5);
    border:1px solid rgba(255,255,255,0.12); border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.65); text-decoration:none; font-size:0.9rem;
    transition:var(--transition);
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.05);
}
.social-btn:hover {
    background:var(--primary); border-color:var(--primary);
    color:#fff; transform:translateY(-3px);
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.1);
}
.social-btn-wa:hover { background:#25D366 !important; border-color:#25D366 !important; box-shadow:0 8px 20px rgba(37,211,102,0.4) !important; }

.footer-cert-badges { display:flex; gap:8px; flex-wrap:wrap; }
.cert-badge {
    background:rgba(107, 125, 179, 0.12);
    border:1px solid rgba(107, 125, 179, 0.25);
    color:var(--primary-light); font-size:0.65rem; font-weight:700;
    padding:5px 12px; border-radius:100px;
    text-transform:uppercase; letter-spacing:0.5px;
}
.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.06); padding:20px 0;
    background:rgba(0,0,0,0.2);
}
.footer-bottom p { color:rgba(255,255,255,0.4); font-size:0.8rem; }

/* ================================================================
   CALL FLOATING BUTTON
   ================================================================ */
.call-float {
    position:fixed; right:24px; bottom:162px;
    width:58px; height:58px;
    background:linear-gradient(135deg, #e63946, #c1121f);
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; color:#fff; text-decoration:none;
    z-index:998;
    box-shadow:0 8px 28px rgba(230,57,70,0.45);
    transition:var(--transition);
    animation:callPulse 3s infinite;
}
.call-float:hover {
    transform:scale(1.12) translateY(-3px);
    box-shadow:0 14px 40px rgba(230,57,70,0.55);
    color:#fff; border-radius:50%;
}
.call-float:hover .call-tooltip { opacity:1; transform:translateY(-50%) translateX(0); }
@keyframes callPulse {
    0%,100% { box-shadow:0 8px 28px rgba(230,57,70,0.45); }
    50%      { box-shadow:0 8px 36px rgba(230,57,70,0.65), 0 0 0 10px rgba(230,57,70,0.1); }
}
.call-tooltip {
    position:absolute; right:72px; top:50%;
    transform:translateY(-50%) translateX(8px);
    background:#0f172a; color:#fff; font-size:0.75rem; font-weight:600;
    padding:7px 14px; border-radius:10px; white-space:nowrap;
    opacity:0; transition:var(--transition); pointer-events:none;
}
.call-tooltip::after {
    content:''; position:absolute; right:-6px; top:50%;
    transform:translateY(-50%);
    border:6px solid transparent; border-right:none;
    border-left-color:#0f172a;
}

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.whatsapp-float {
    position:fixed; right:24px; bottom:90px;
    width:58px; height:58px;
    background:linear-gradient(135deg, #25D366, #128C7E);
    border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.7rem; color:#fff; text-decoration:none;
    z-index:998;
    box-shadow:0 8px 28px rgba(37,211,102,0.45);
    transition:var(--transition);
    animation:waPulse 3s infinite;
}
.whatsapp-float:hover {
    transform:scale(1.12) translateY(-3px);
    box-shadow:0 14px 40px rgba(37,211,102,0.55);
    color:#fff; border-radius:50%;
}
.whatsapp-float:hover .wa-tooltip { opacity:1; transform:translateY(-50%) translateX(0); }
@keyframes waPulse {
    0%,100% { box-shadow:0 8px 28px rgba(37,211,102,0.45); }
    50%      { box-shadow:0 8px 36px rgba(37,211,102,0.65), 0 0 0 10px rgba(37,211,102,0.1); }
}
.wa-tooltip {
    position:absolute; right:72px; top:50%;
    transform:translateY(-50%) translateX(8px);
    background:#0f172a; color:#fff; font-size:0.75rem; font-weight:600;
    padding:7px 14px; border-radius:10px; white-space:nowrap;
    opacity:0; transition:var(--transition); pointer-events:none;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.wa-tooltip::after {
    content:''; position:absolute; top:50%; right:-5px;
    transform:translateY(-50%);
    border:5px solid transparent; border-left-color:#0f172a; border-right:0;
}

/* ================================================================
   BACK TO TOP
   ================================================================ */
.back-to-top {
    position:fixed; bottom:24px; right:24px;
    width:48px; height:48px;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    border:none; border-radius:14px; color:#fff; font-size:0.9rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:999;
    opacity:0; transform:translateY(20px) scale(0.8);
    transition:var(--transition);
    box-shadow:0 8px 24px rgba(107, 125, 179, 0.4);
}
.back-to-top.visible { opacity:1; transform:translateY(0) scale(1); }
.back-to-top:hover {
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 12px 32px rgba(107, 125, 179, 0.5);
}

/* ================================================================
   MISC UTILITIES
   ================================================================ */
.glow-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--primary); display:inline-block;
    box-shadow:0 0 12px var(--primary);
    animation:glowPulse 2s infinite;
}
@keyframes glowPulse {
    0%,100% { box-shadow:0 0 8px var(--primary); }
    50%      { box-shadow:0 0 20px var(--primary), 0 0 32px rgba(107, 125, 179, 0.3); }
}
.accent-bar {
    display:inline-block; width:40px; height:3px;
    background:linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius:3px; margin-bottom:14px;
}

/* ================================================================
   CARD TEXT — light background overrides
   ================================================================ */
.glass-card .text-white,
.product-card .text-white,
.tech-card .text-white,
.value-card .text-white,
.work-card .text-white,
.contact-card .text-white { color:#0f172a !important; }

.glass-card .text-muted,
.product-card .text-muted,
.tech-card .text-muted,
.value-card .text-muted,
.work-card .text-muted,
.contact-card .text-muted { color:#64748b !important; }

/* Text on dark sections stays white */
.stats-bar .text-white,
.hero-placeholder .text-white,
.site-footer .text-white { color:#fff !important; }

/* ================================================================
   BOOTSTRAP OVERRIDES — Purple theme
   ================================================================ */
.text-warning { color:var(--primary) !important; }
.bg-warning   { background-color:var(--primary) !important; }
.btn-warning {
    background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-color:transparent !important;
    color:#fff !important; font-weight:700;
    box-shadow:0 6px 18px rgba(107, 125, 179, 0.35);
    border-radius:10px;
    transition:var(--transition);
}
.btn-warning:hover {
    background:var(--bg-card) !important;
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    box-shadow:0 8px 24px rgba(107, 125, 179, 0.2);
    transform:translateY(-2px);
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-body); }
::-webkit-scrollbar-thumb { background:rgba(107, 125, 179, 0.25); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(107, 125, 179, 0.45); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:768px) {
    body { padding-top:72px; }
    .section { padding:70px 0; }
    .page-header { padding:110px 0 64px; }
    .back-to-top,.whatsapp-float,.call-float { right:16px; }
    .whatsapp-float { bottom:80px; }
    .call-float { bottom:148px; }
    .stat-number { font-size:2.6rem; }
}
@media (max-width:480px) {
    .section-title { font-size:1.9rem; }
    .carousel-caption h1 { font-size:2.2rem; }
    .brand-sub { display:none; }
    .btn-primary-custom, .btn-outline-custom { padding:11px 24px; }
}

/* Optimize Neumorphism shadows for mobile */
@media (max-width:768px) {
    :root {
        --shadow-soft-out:
            4px 4px 8px rgba(163, 177, 198, 0.6),
            -4px -4px 8px rgba(255, 255, 255, 0.8);
        --shadow-soft-in:
            inset 4px 4px 8px rgba(163, 177, 198, 0.6),
            inset -4px -4px 8px rgba(255, 255, 255, 0.8);
        --shadow-medium-out:
            6px 6px 12px rgba(163, 177, 198, 0.6),
            -6px -6px 12px rgba(255, 255, 255, 0.8);
        --shadow-medium-in:
            inset 6px 6px 12px rgba(163, 177, 198, 0.6),
            inset -6px -6px 12px rgba(255, 255, 255, 0.8);
        --shadow-hard-out:
            2px 2px 4px rgba(163, 177, 198, 0.6),
            -2px -2px 4px rgba(255, 255, 255, 0.8);
        --shadow-hard-in:
            inset 2px 2px 4px rgba(163, 177, 198, 0.6),
            inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    }
    
    /* Reduce large orb sizes on mobile */
    .hero-placeholder::before,
    .page-header::after,
    .cta-section::after {
        width: 300px;
        height: 300px;
    }
    
    .hero-placeholder::before {
        width: 400px;
        height: 400px;
    }
}