/* ============================================================
   R A B ENTERPRISES — ULTIMATE PREMIUM STYLES
   ============================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
    --navy:        #06101f;
    --navy-mid:    #0A192F;
    --navy-light:  #112240;
    --cyan:        #00D2FF;
    --cyan-glow:   rgba(0, 210, 255, 0.35);
    --cyan-glass:  rgba(0, 210, 255, 0.08);
    --gold:        #FFB800;
    --gold-dark:   #e5a400;
    --gold-glow:   rgba(255, 184, 0, 0.40);
    --white:       #FFFFFF;
    --off-white:   #F4F8FF;
    --gray:        #64748B;
    --light-gray:  #E2E8F0;
    --card-bg:     #FFFFFF;
    --section-alt: #F0F6FF;

    --font-head:   'Plus Jakarta Sans', sans-serif;
    --font-body:   'Inter', sans-serif;

    --shadow-s:    0 4px 16px rgba(0,0,0,0.08);
    --shadow-m:    0 12px 40px rgba(0,0,0,0.12);
    --shadow-xl:   0 30px 80px rgba(0,0,0,0.18);
    --shadow-cyan: 0 8px 32px rgba(0, 210, 255, 0.25);
    --shadow-gold: 0 8px 32px rgba(255, 184, 0, 0.35);

    --radius-s:    8px;
    --radius-m:    16px;
    --radius-l:    24px;
    --radius-xl:   36px;

    --max-w:       1200px;
    --sec-pad:     140px 0;

    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; font-size:16px; }
body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--navy-mid);
    line-height: 1.65;
    overflow-x: hidden;
}
ul { list-style:none; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,h5 { font-family:var(--font-head); line-height:1.2; font-weight:800; }

/* ─── CUSTOM SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#06101f; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--cyan),var(--gold)); border-radius:99px; }

/* ─── SELECTION ─────────────────────────────────────────── */
::selection { background:var(--cyan-glow); color:var(--cyan); }

/* ─── CONTAINER ─────────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }

/* ─── CURSOR GLOW (desktop) ─────────────────────────────── */
.cursor-glow {
    pointer-events:none;
    position:fixed;
    width:400px; height:400px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,210,255,0.06) 0%,transparent 70%);
    transform:translate(-50%,-50%);
    z-index:0;
    transition:transform 0.12s linear;
}

/* ─── BUTTONS ───────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 32px;
    border-radius:var(--radius-m);
    font-family:var(--font-head); font-weight:700; font-size:1rem;
    cursor:pointer; border:none;
    transition:all 0.35s var(--ease-bounce);
    position:relative; overflow:hidden;
    white-space:nowrap;
}
.btn::before {
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent);
    opacity:0; transition:opacity 0.3s;
}
.btn:hover::before { opacity:1; }

.btn-primary {
    background:linear-gradient(135deg,var(--gold),#FF8C00);
    color:var(--navy);
    box-shadow:var(--shadow-gold);
}
.btn-primary:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 16px 48px rgba(255,184,0,0.5); }

.btn-outline-white {
    background:transparent;
    border:2px solid rgba(255,255,255,0.5);
    color:var(--white);
    backdrop-filter:blur(8px);
}
.btn-outline-white:hover { background:rgba(255,255,255,0.12); border-color:var(--white); transform:translateY(-4px); }

.glow-btn { animation:pulseGold 2.5s infinite; }
@keyframes pulseGold {
    0%,100% { box-shadow:0 0 0 0 rgba(255,184,0,0.5); }
    70%      { box-shadow:0 0 0 18px rgba(255,184,0,0); }
}

/* ─── SECTION HEADERS ───────────────────────────────────── */
.section-tag {
    display:inline-block;
    padding:6px 18px;
    background:linear-gradient(135deg,rgba(0,210,255,0.15),rgba(0,210,255,0.05));
    border:1px solid rgba(0,210,255,0.3);
    border-radius:99px;
    font-size:0.8rem; font-weight:700; letter-spacing:2px;
    text-transform:uppercase; color:var(--cyan);
    margin-bottom:20px;
}
.section-header { text-align:center; margin-bottom:64px; }
.section-header h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.section-header p { font-size:1.1rem; color:var(--gray); max-width:640px; margin:0 auto; }
.text-cyan { color:var(--cyan); }
.text-gold { color:var(--gold); }

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
#navbar {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    padding:18px 0;
    transition:all 0.4s var(--ease-smooth);
}
#navbar.scrolled {
    padding:10px 0;
    background:rgba(6,16,31,0.85);
    backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid rgba(0,210,255,0.12);
    box-shadow:0 4px 32px rgba(0,0,0,0.3);
}
.nav-content { display:flex; align-items:center; justify-content:space-between; gap:24px; }

/* Logo */
.logo { display:flex; align-items:center; gap:12px; }
.brand-logo { height:56px; width:auto; object-fit:contain; transition:height 0.4s; border-radius:50%; }
#navbar.scrolled .brand-logo { height:44px; }
.logo-text-group { display:flex; flex-direction:column; }
.logo-name { font-family:var(--font-head); font-size:1.05rem; font-weight:800; color:var(--white); line-height:1.1; }
.logo-tagline { font-size:0.68rem; color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }

/* Nav Links */
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-link {
    font-weight:600; font-size:0.9rem; color:rgba(255,255,255,0.8);
    position:relative; padding-bottom:4px;
    transition:color 0.3s;
}
.nav-link::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--gold));
    border-radius:99px;
    transition:width 0.35s var(--ease-smooth);
}
.nav-link:hover, .nav-link.active { color:var(--white); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

.nav-cta { padding:11px 24px; font-size:0.9rem; border-radius:var(--radius-s); }

/* Hamburger */
.mobile-menu-toggle {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:8px; z-index:1100;
}
.hamburger-line {
    display:block; width:26px; height:2.5px; border-radius:99px;
    background:var(--white); transition:all 0.35s var(--ease-smooth);
    transform-origin:center;
}
.mobile-menu-toggle.open .hamburger-line:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.mobile-menu-toggle.open .hamburger-line:nth-child(2) { opacity:0; transform:scaleX(0); }
.mobile-menu-toggle.open .hamburger-line:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ─── MOBILE DRAWER ─────────────────────────────────────── */
.drawer-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);
    z-index:2000; opacity:0; pointer-events:none;
    transition:opacity 0.4s var(--ease-smooth);
}
.drawer-overlay.open { opacity:1; pointer-events:all; }

.mobile-drawer {
    position:fixed; top:0; right:-100%; width:min(320px,90vw); height:100vh;
    background:linear-gradient(160deg,var(--navy) 0%,#0d2145 100%);
    border-left:1px solid rgba(0,210,255,0.15);
    z-index:2100; display:flex; flex-direction:column;
    transition:right 0.45s var(--ease-smooth);
    overflow:hidden;
}
.mobile-drawer.open { right:0; }
.mobile-drawer::before {
    content:''; position:absolute; top:-80px; right:-80px;
    width:240px; height:240px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,210,255,0.12),transparent 70%);
    pointer-events:none;
}

.mobile-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:24px 20px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.drawer-close {
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
    border-radius:50%; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    color:var(--white); cursor:pointer; transition:all 0.3s;
}
.drawer-close:hover { background:rgba(0,210,255,0.2); color:var(--cyan); }

.mobile-nav { padding:16px 0; flex:1; }
.mobile-nav-link {
    display:flex; align-items:center; gap:14px;
    padding:16px 24px; color:rgba(255,255,255,0.8);
    font-weight:600; font-size:1rem;
    border-left:3px solid transparent;
    transition:all 0.3s;
}
.mobile-nav-link:hover {
    background:rgba(0,210,255,0.08);
    border-left-color:var(--cyan); color:var(--white);
    padding-left:32px;
}
.mobile-book-btn { margin:24px 20px; display:block; text-align:center; border-radius:var(--radius-m); }

/* ══════════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════════ */
.hero {
    position:relative; min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding-top:90px; overflow:hidden;
    background:var(--navy);
}

/* Animated Mesh Gradient Background */
.hero-bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0,210,255,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0,80,180,0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(255,130,0,0.1) 0%, transparent 40%),
        linear-gradient(135deg, #06101f 0%, #0A192F 50%, #06101f 100%);
    animation:meshShift 18s ease-in-out infinite alternate;
}
@keyframes meshShift {
    0%   { filter:hue-rotate(0deg) brightness(1); }
    100% { filter:hue-rotate(20deg) brightness(1.05); }
}

/* Particle canvas */
#particleCanvas {
    position:absolute; inset:0; z-index:1; pointer-events:none;
}

/* Animated grid lines */
.hero-grid {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(0,210,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,210,255,0.04) 1px, transparent 1px);
    background-size:60px 60px;
    animation:gridFade 6s ease-in-out infinite alternate;
}
@keyframes gridFade { from{opacity:0.6} to{opacity:1} }

/* Floating orbs */
.hero-orb {
    position:absolute; border-radius:50%; filter:blur(80px);
    pointer-events:none; z-index:1; animation:orbFloat linear infinite;
}
.hero-orb-1 { width:500px;height:500px; background:radial-gradient(circle,rgba(0,210,255,0.15),transparent 70%); top:-100px; left:-120px; animation-duration:20s; }
.hero-orb-2 { width:400px;height:400px; background:radial-gradient(circle,rgba(0,80,200,0.2),transparent 70%); bottom:-80px; right:-80px; animation-duration:16s; animation-direction:reverse; }
.hero-orb-3 { width:300px;height:300px; background:radial-gradient(circle,rgba(255,184,0,0.1),transparent 70%); top:40%; right:15%; animation-duration:24s; }
@keyframes orbFloat {
    0%   { transform:translate(0,0) scale(1); }
    33%  { transform:translate(30px,-40px) scale(1.06); }
    66%  { transform:translate(-20px,30px) scale(0.96); }
    100% { transform:translate(0,0) scale(1); }
}

.hero-content { position:relative; z-index:5; width:100%; }

/* Badge */
.hero-badge {
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 20px;
    background:rgba(0,210,255,0.08);
    border:1px solid rgba(0,210,255,0.3);
    border-radius:99px; margin-bottom:28px;
    color:var(--cyan); font-size:0.85rem; font-weight:600;
    animation:heroFadeUp 0.7s ease both 0.1s;
    backdrop-filter:blur(8px);
}
.hero-badge i { width:16px; height:16px; }

/* Hero Title */
.hero-title {
    font-size:clamp(2.8rem,7vw,5.2rem);
    color:var(--white); margin-bottom:24px;
    letter-spacing:-1px;
    animation:heroFadeUp 0.9s ease both 0.2s;
}
.hero-highlight {
    background:linear-gradient(135deg,var(--cyan),#00aaff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    position:relative;
}
.hero-highlight::after {
    content:''; position:absolute;
    bottom:-6px; left:0; width:100%; height:3px;
    background:linear-gradient(90deg,var(--cyan),transparent);
    border-radius:99px;
}

/* Hero Subtitle */
.hero-subtitle {
    font-size:clamp(1rem,2vw,1.2rem);
    color:rgba(255,255,255,0.72);
    max-width:600px; margin-bottom:44px;
    animation:heroFadeUp 0.9s ease both 0.35s;
}

/* Hero Actions */
.hero-actions {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    margin-bottom:56px;
    animation:heroFadeUp 0.9s ease both 0.5s;
}

/* Trust Badges */
.trust-badges {
    display:flex; align-items:center; flex-wrap:wrap; gap:12px;
    animation:heroFadeUp 0.9s ease both 0.65s;
}
.trust-badge {
    display:flex; align-items:center; gap:8px;
    padding:9px 18px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:99px;
    color:rgba(255,255,255,0.85); font-size:0.82rem; font-weight:600;
    backdrop-filter:blur(6px);
    transition:all 0.3s;
}
.trust-badge:hover { background:rgba(0,210,255,0.12); border-color:var(--cyan); color:var(--white); transform:translateY(-2px); }
.trust-badge i { color:var(--cyan); width:15px; height:15px; }

/* Scroll Hint */
.hero-scroll-hint {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    color:rgba(255,255,255,0.4); font-size:0.78rem; letter-spacing:2px; text-transform:uppercase;
    animation:heroFadeUp 1s ease both 1s;
    z-index:5;
}
.scroll-arrow {
    width:24px; height:24px;
    border-right:2px solid rgba(0,210,255,0.5);
    border-bottom:2px solid rgba(0,210,255,0.5);
    transform:rotate(45deg);
    animation:arrowBounce 1.5s ease-in-out infinite;
}
@keyframes arrowBounce { 0%,100%{transform:rotate(45deg) translate(0,0);opacity:1} 50%{transform:rotate(45deg) translate(6px,6px);opacity:0.4} }

/* Hero entrance */
@keyframes heroFadeUp {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   STATS SECTION
══════════════════════════════════════════════════════════ */
.stats-section {
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
    padding:60px 0; position:relative; overflow:hidden;
}
.stats-section::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300D2FF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; position:relative; z-index:1; }
.stat-card {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:40px 24px; position:relative;
    border-right:1px solid rgba(0,210,255,0.1);
    transition:background 0.3s;
}
.stat-card:last-child { border-right:none; }
.stat-card:hover { background:rgba(0,210,255,0.04); }
.stat-icon {
    width:52px; height:52px; border-radius:var(--radius-m);
    background:rgba(0,210,255,0.1); border:1px solid rgba(0,210,255,0.2);
    display:flex; align-items:center; justify-content:center;
    color:var(--cyan); margin-bottom:20px;
    transition:all 0.4s; flex-shrink:0;
}
.stat-card:hover .stat-icon { background:var(--cyan); color:var(--navy); transform:rotateY(180deg); }
.stat-number {
    font-family:var(--font-head); font-size:clamp(2.2rem,4vw,3rem);
    font-weight:800; color:var(--white); line-height:1;
}
.stat-suffix { font-family:var(--font-head); font-size:1.6rem; font-weight:800; color:var(--gold); line-height:1; margin-top:-2px; }
.stat-label { font-size:0.9rem; color:rgba(255,255,255,0.55); margin-top:10px; font-weight:500; }

/* ══════════════════════════════════════════════════════════
   SERVICES SECTION
══════════════════════════════════════════════════════════ */
.services { padding:var(--sec-pad); background:var(--off-white); position:relative; overflow:hidden; }
.extra-service-card { display:none !important; }
.extra-service-card.show { display:flex !important; }
.services-more-container {
    text-align:center;
    margin-top:48px;
}
.services-more-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:2px solid var(--light-gray);
    color:var(--navy-mid);
    padding:14px 32px;
    border-radius:var(--radius-m);
    font-family:var(--font-head);
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
    transition:all 0.3s;
}
.services-more-btn:hover {
    border-color:var(--cyan);
    color:var(--cyan);
    background:rgba(0,210,255,0.05);
}
.services::before {
    content:''; position:absolute; top:-200px; right:-200px;
    width:600px; height:600px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,210,255,0.06),transparent 70%);
    pointer-events:none;
}

/* Tabs */
.service-tabs { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:48px; }
.tab-btn {
    padding:10px 24px; border-radius:99px; border:2px solid var(--light-gray);
    background:transparent; cursor:pointer;
    font-family:var(--font-head); font-weight:700; font-size:0.9rem; color:var(--gray);
    transition:all 0.3s var(--ease-smooth);
}
.tab-btn:hover { border-color:var(--cyan); color:var(--navy-mid); }
.tab-btn.active { background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:var(--white); border-color:transparent; box-shadow:0 8px 24px rgba(10,25,47,0.25); }

/* Grid */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:24px; margin-bottom:48px; }

/* Service Card */
.service-card {
    background:var(--card-bg); border-radius:var(--radius-l);
    padding:0; position:relative; overflow:hidden;
    border:1.5px solid rgba(0,0,0,0.06);
    box-shadow:var(--shadow-s);
    transition:all 0.45s var(--ease-smooth);
    display:flex; flex-direction:column;
}

.card-img-container {
    height: 180px; width: 100%; overflow: hidden; position: relative;
    background: #f0f4f8;
}

.card-img-container img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .card-img-container img { transform: scale(1.1); }

.service-card-content { padding: 24px 32px 36px; display: flex; flex-direction: column; flex-grow: 1; }

/* Animated shimmer border on hover */
.service-card::after {
    content:''; position:absolute; inset:-1.5px; border-radius:var(--radius-l);
    background:linear-gradient(135deg,var(--cyan),var(--gold),var(--cyan));
    background-size:200% 200%;
    opacity:0; z-index:-1;
    transition:opacity 0.4s;
    animation:shimmerBorder 3s linear infinite paused;
    pointer-events: none;
}
.service-card:hover::after { opacity:1; animation-play-state:running; }
@keyframes shimmerBorder { 0%{background-position:0 0} 100%{background-position:200% 200%} }

/* Inner white bg to show border effect */
.service-card::after {
    content:''; position:absolute; inset:1.5px; border-radius:calc(var(--radius-l) - 2px);
    background:var(--card-bg); z-index:-1;
    transition:background 0.4s;
}

.service-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 24px 60px rgba(0,0,0,0.15); }
.service-card:hover::after { background:#F8FDFF; }

/* Badge */
.card-badge {
    position:absolute; top:20px; right:20px;
    padding:4px 12px; border-radius:99px; font-size:0.75rem; font-weight:700;
}
.card-badge.popular { background:linear-gradient(135deg,#FFB800,#FF8C00); color:var(--navy); }
.card-badge.new     { background:linear-gradient(135deg,#00D2FF,#007ACC); color:var(--white); }
.card-badge.urgent  { background:linear-gradient(135deg,#EF4444,#B91C1C); color:var(--white); }

/* Icon */
.card-icon {
    width:64px; height:64px; border-radius:var(--radius-m);
    background:color-mix(in srgb,var(--icon-color,#00D2FF) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--icon-color,#00D2FF) 25%,transparent);
    display:flex; align-items:center; justify-content:center;
    color:var(--icon-color, var(--cyan));
    margin-bottom:24px; flex-shrink:0;
    transition:all 0.4s var(--ease-bounce);
}
.service-card:hover .card-icon {
    background:var(--icon-color, var(--cyan));
    color:var(--white); transform:rotate(12deg) scale(1.1);
    box-shadow:0 8px 24px color-mix(in srgb,var(--icon-color,#00D2FF) 40%,transparent);
}

.service-card h3 { font-size:1.2rem; margin-bottom:10px; }
.service-card > p { color:var(--gray); font-size:0.92rem; flex:1; margin-bottom:20px; }

/* Features */
.card-features { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.card-features span {
    display:flex; align-items:center; gap:5px;
    font-size:0.78rem; font-weight:600; color:var(--navy-mid);
    background:rgba(0,210,255,0.08); border-radius:99px; padding:4px 10px;
}
.card-features i { width:12px; height:12px; color:var(--cyan); }

/* Card Footer */
.price-notice {
    display:flex; align-items:center; flex-wrap:wrap; gap:4px;
    font-size:0.72rem; color:var(--gray);
    background:rgba(0,210,255,0.05); border:1px solid rgba(0,210,255,0.12);
    border-radius:8px; padding:6px 10px; margin-top:14px; margin-bottom:2px;
    line-height:1.4;
}
.price-notice strong { color:var(--cyan); font-weight:800; }
.price-notice span   { color:rgba(0,0,0,0.4); font-style:italic; }
.card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.card-price { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--navy-mid); }
.explore-link {
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-head); font-weight:700; font-size:0.9rem;
    color:var(--cyan); transition:gap 0.3s;
}
.explore-link:hover { gap:12px; }
.explore-link i { width:16px; height:16px; }

/* View All CTA */
.view-all-cta {
    text-align:center; padding:48px;
    margin-top:56px;
    background:linear-gradient(135deg,rgba(0,210,255,0.06),rgba(0,210,255,0.02));
    border:2px dashed rgba(0,210,255,0.25); border-radius:var(--radius-xl);
}
.view-all-cta p { color:var(--gray); margin-bottom:20px; font-size:1.05rem; }

/* ══════════════════════════════════════════════════════════
   MINI SERVICES
══════════════════════════════════════════════════════════ */
.mini-services-section {
    padding:var(--sec-pad);
    background:var(--white);
    border-top:3px solid rgba(0,210,255,0.12);
}
.mini-services-grid {
    display:grid; 
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); 
    gap:24px;
}
.mini-card {
    background:var(--gray-light);
    border:1px solid rgba(0,0,0,0.05);
    border-radius:var(--radius-m);
    padding:28px 24px;
    display:flex; flex-direction:column;
    transition:all 0.3s var(--ease-smooth);
    position:relative;
    overflow:hidden;
}
.mini-card:hover {
    transform:translateY(-5px);
    background:var(--white);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    border-color:rgba(0,210,255,0.2);
}
.mini-card::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    box-shadow:inset 0 0 0 2px transparent; transition:box-shadow 0.3s;
    border-radius:inherit;
}
.mini-card:hover::after {
    box-shadow:inset 0 0 0 2px var(--cyan);
}
.mini-card-icon {
    width:48px; height:48px;
    background:rgba(0,210,255,0.1);
    color:var(--cyan);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:20px;
    transition:transform 0.3s var(--ease-bounce), background 0.3s;
}
.mini-card:hover .mini-card-icon {
    transform:scale(1.1) rotate(5deg);
    background:var(--cyan);
    color:var(--white);
}
.mini-card-icon i {
    width:24px; height:24px;
}
.mini-card h4 {
    font-size:1.1rem; margin-bottom:12px; color:var(--navy);
}
.mini-desc {
    font-size:0.85rem; color:var(--gray); flex:1; margin-bottom:20px; line-height:1.5;
}
.mini-price {
    font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--cyan);
    background:rgba(0,210,255,0.08);
    padding:10px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:6px;
    align-self:flex-start;
}
.mini-price span {
    font-size:0.75rem; font-weight:600; color:var(--navy-mid);
    text-transform:lowercase;
}

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════════ */
.how-it-works {
    padding:var(--sec-pad) 0;
    background:linear-gradient(135deg,var(--navy),var(--navy-light));
    position:relative; overflow:hidden;
}
.how-it-works .section-header h2,
.how-it-works .section-tag {
    color:var(--white);
}
.how-it-works .section-header h2 span.text-cyan {
    color:var(--cyan);
}
.how-it-works::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 50%,rgba(0,210,255,0.08) 0%,transparent 70%);
}

.mini-services-more-container {
    text-align:center;
    margin-top:40px;
}
.mini-services-more-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:2px solid var(--light-gray);
    color:var(--navy-mid);
    padding:12px 28px;
    border-radius:var(--radius-m);
    font-family:var(--font-head);
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    transition:all 0.3s;
}
.mini-services-more-btn:hover {
    border-color:var(--cyan);
    color:var(--cyan);
    background:rgba(0,210,255,0.05);
}
.extra-mini {
    display:none;
}

.steps-grid {
    display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0;
    align-items:center; position:relative; z-index:1;
}
.step-card {
    text-align:center; padding:40px 24px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-l);
    transition:all 0.4s var(--ease-smooth);
    position:relative; overflow:hidden;
}
.step-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(0,210,255,0.06),transparent);
    opacity:0; transition:opacity 0.4s;
}
.step-card:hover::before { opacity:1; }
.step-card:hover { transform:translateY(-8px); border-color:rgba(0,210,255,0.3); box-shadow:0 16px 48px rgba(0,0,0,0.3); }

.step-number {
    font-family:var(--font-head); font-size:3.5rem; font-weight:800;
    color:rgba(0,210,255,0.1); line-height:1; margin-bottom:16px;
}
.step-icon {
    width:72px; height:72px; border-radius:50%;
    background:linear-gradient(135deg,rgba(0,210,255,0.2),rgba(0,210,255,0.05));
    border:2px solid rgba(0,210,255,0.3);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px; color:var(--cyan);
    transition:all 0.4s;
}
.step-card:hover .step-icon { background:var(--cyan); color:var(--navy); transform:scale(1.1); box-shadow:0 0 32px var(--cyan-glow); }
.step-card h3 { font-size:1.15rem; color:var(--white); margin-bottom:12px; }
.step-card p { font-size:0.9rem; color:rgba(255,255,255,0.55); }

.step-connector {
    display:flex; align-items:center; justify-content:center;
    padding:0 16px; color:rgba(0,210,255,0.4);
    font-size:1.5rem;
}
.step-connector::before { content:'→'; font-weight:700; }

/* ══════════════════════════════════════════════════════════
   WHY CHOOSE US
══════════════════════════════════════════════════════════ */
.why-us { padding:var(--sec-pad); background:var(--white); }

.why-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }

/* Visual side */
.why-visual { position:relative; }
.why-visual-inner {
    position:relative;
    background:linear-gradient(135deg,var(--section-alt),var(--off-white));
    border:2px solid rgba(0,210,255,0.15);
    border-radius:var(--radius-xl);
    padding:60px 40px; text-align:center; overflow:hidden;
}
.why-visual-inner::before {
    content:''; position:absolute; inset:0; border-radius:var(--radius-xl);
    background:radial-gradient(circle at 50% 30%,rgba(0,210,255,0.08),transparent 70%);
}
.why-logo-img { width:180px; height:180px; border-radius:50%; margin:0 auto; object-fit:contain; position:relative; z-index:1; }

/* Floating badges */
.floating-badge {
    position:absolute; display:flex; align-items:center; gap:8px;
    padding:10px 18px;
    background:var(--white); border-radius:99px;
    box-shadow:var(--shadow-m);
    font-size:0.82rem; font-weight:700; color:var(--navy-mid);
    animation:badgeFloat ease-in-out infinite alternate;
    border:1.5px solid rgba(0,210,255,0.15);
    z-index:2;
}
.floating-badge i { width:16px; height:16px; color:var(--cyan); }
.badge-1 { top:20px; left:-20px; animation-duration:3s; }
.badge-2 { top:20px; right:-20px; animation-duration:4s; }
.badge-3 { bottom:30px; left:50%; transform:translateX(-50%); animation-duration:3.5s; }
@keyframes badgeFloat { from{transform:translateY(0)} to{transform:translateY(-10px)} }
.badge-3 { animation-name:badge3Float; }
@keyframes badge3Float { from{transform:translateX(-50%) translateY(0)} to{transform:translateX(-50%) translateY(-10px)} }

/* Benefit items */
.benefits-list { margin-top:32px; display:flex; flex-direction:column; gap:24px; }
.benefit-item {
    display:flex; gap:20px; align-items:flex-start;
    padding:20px; border-radius:var(--radius-m);
    border:1.5px solid transparent;
    transition:all 0.35s;
}
.benefit-item:hover { background:var(--off-white); border-color:rgba(0,210,255,0.2); transform:translateX(8px); }
.benefit-icon {
    width:52px; height:52px; flex-shrink:0; border-radius:var(--radius-s);
    background:linear-gradient(135deg,rgba(0,210,255,0.15),rgba(0,210,255,0.05));
    border:1.5px solid rgba(0,210,255,0.2);
    display:flex; align-items:center; justify-content:center; color:var(--cyan);
    transition:all 0.4s;
}
.benefit-item:hover .benefit-icon { background:var(--cyan); color:var(--white); transform:scale(1.1); }
.benefit-item h4 { font-size:1rem; margin-bottom:6px; }
.benefit-item p { font-size:0.88rem; color:var(--gray); }

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════ */
.testimonials {
    padding:var(--sec-pad); background:var(--section-alt);
    position:relative; overflow:hidden;
}
.testimonials::after {
    content:''; position:absolute; bottom:-100px; right:-100px;
    width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle,rgba(255,184,0,0.06),transparent 70%);
}

.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial-card {
    background:var(--white); border-radius:var(--radius-l); padding:36px;
    border:1.5px solid rgba(0,0,0,0.06); box-shadow:var(--shadow-s);
    position:relative; overflow:hidden;
    transition:all 0.4s var(--ease-smooth);
}
.testimonial-card::before {
    content:'"'; position:absolute; top:16px; right:24px;
    font-size:6rem; line-height:1; font-family:serif;
    color:rgba(0,210,255,0.1); font-weight:900;
}
.testimonial-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,0.12); border-color:rgba(0,210,255,0.25); }

.stars { color:var(--gold); font-size:1.1rem; letter-spacing:2px; margin-bottom:16px; }
.testimonial-card > p { color:var(--gray); font-size:0.93rem; line-height:1.7; margin-bottom:24px; }
.testimonial-author { display:flex; align-items:center; gap:14px; }
.author-avatar {
    width:48px; height:48px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--cyan),var(--navy));
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-head); font-weight:800; color:var(--white); font-size:1.1rem;
}
.testimonial-author strong { display:block; font-size:0.9rem; color:var(--navy-mid); }
.testimonial-author span { font-size:0.8rem; color:var(--gray); }

/* ══════════════════════════════════════════════════════════
   FLOATING CTA
══════════════════════════════════════════════════════════ */
.floating-cta {
    position:fixed; bottom:30px; right:30px; z-index:999;
    display:flex; align-items:center; gap:10px;
    padding:14px 24px;
    background:linear-gradient(135deg,var(--gold),#FF8C00);
    color:var(--navy); font-family:var(--font-head); font-weight:800;
    border-radius:99px; box-shadow:var(--shadow-gold);
    transition:all 0.35s var(--ease-bounce);
    animation:pulseGold 2.5s infinite;
}
.floating-cta:hover { transform:translateY(-4px) scale(1.05); }
.floating-cta i { width:20px; height:20px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer {
    background:var(--navy);
    position:relative; overflow:hidden;
}
footer::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,210,255,0.5),transparent);
}
footer::after {
    content:''; position:absolute; bottom:-150px; left:-150px;
    width:500px; height:500px; border-radius:50%;
    background:radial-gradient(circle,rgba(0,210,255,0.05),transparent 70%);
    pointer-events:none;
}

.footer-grid {
    display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr;
    gap:48px; padding:80px 0 48px; position:relative; z-index:1;
}

.footer-logo-wrap { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.footer-logo { height:64px; object-fit:contain; border-radius:50%; background:white; padding:6px; }
.footer-brand-title { font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--white); display:block; }
.footer-brand-sub { font-size:0.72rem; color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase; }
.footer-brand > p { color:rgba(255,255,255,0.5); font-size:0.9rem; max-width:280px; line-height:1.65; }

.social-links { display:flex; gap:12px; margin-top:24px; }
.social-btn {
    width:40px; height:40px; border-radius:var(--radius-s);
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.6);
    transition:all 0.3s;
}
.social-btn:hover { background:rgba(0,210,255,0.15); border-color:rgba(0,210,255,0.4); color:var(--cyan); transform:translateY(-3px); }
.social-btn i { width:18px; height:18px; }

.footer-links h4, .footer-contact h4 {
    font-size:0.85rem; letter-spacing:2px; text-transform:uppercase;
    color:rgba(255,255,255,0.9); margin-bottom:24px; font-weight:700;
}
.footer-links ul li { margin-bottom:12px; }
.footer-links ul li a { color:rgba(255,255,255,0.5); font-size:0.9rem; transition:all 0.3s; display:inline-block; }
.footer-links ul li a:hover { color:var(--cyan); transform:translateX(6px); }

.footer-contact p {
    display:flex; align-items:center; gap:12px;
    color:rgba(255,255,255,0.5); font-size:0.9rem; margin-bottom:16px;
}
.footer-contact p a { color:rgba(255,255,255,0.5); transition:color 0.3s; }
.footer-contact p a:hover { color:var(--cyan); }
.footer-contact i { width:18px; height:18px; color:var(--cyan); flex-shrink:0; }
.footer-hours { font-weight:600 !important; color:rgba(255,255,255,0.7) !important; }

.footer-book-btn { margin-top:24px; width:100%; justify-content:center; border-radius:var(--radius-m); }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.06); padding:28px 0;
    text-align:center; position:relative; z-index:1;
    color:rgba(255,255,255,0.3); font-size:0.85rem;
}

/* ══════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════════════════════ */
.reveal { opacity:1; transform:none; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤1024px)
══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .stat-card:nth-child(2) { border-right:none; }
    .stat-card:nth-child(1),.stat-card:nth-child(2) { border-bottom:1px solid rgba(0,210,255,0.1); }
    .why-layout { grid-template-columns:1fr; gap:48px; }
    .testimonials-grid { grid-template-columns:1fr 1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
    .steps-grid { grid-template-columns:1fr; gap:24px; }
    .step-connector { display:flex; transform:rotate(90deg); }
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .bhk-options { gap:6px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤768px)
══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
    :root { --sec-pad: 80px 0; }

    /* ── Container ── */
    .container { padding:0 20px; }

    /* ── Navbar ── */
    .nav-links { display:none; }
    .mobile-menu-toggle { display:flex; }
    .logo-tagline { display:none; }
    #navbar .btn { display:none; }          /* hide Book Now in nav, mobile drawer has it */

    /* ── Mobile Drawer ── */
    .mobile-drawer { width:100%; border-radius:0; }

    /* ── Hero ── */
    .hero { padding:120px 0 64px; }
    .hero-content { padding:0 20px; }
    .hero-title { font-size:2.1rem; line-height:1.15; }
    .hero-subtitle { font-size:1rem; }
    .hero-actions { flex-direction:column; align-items:stretch; width:100%; gap:12px; }
    .hero-actions .btn { width:100%; justify-content:center; text-align:center; }
    .trust-badges { gap:8px; flex-wrap:wrap; }
    .trust-badge span { display:none; }
    .trust-badge { padding:10px; border-radius:50%; }
    .scroll-indicator { display:none; }

    /* ── Stats ── */
    .stats-grid { grid-template-columns:repeat(2,1fr); }
    .stat-card { padding:28px 16px; border-right:none; border-bottom:1px solid rgba(0,210,255,0.08); }
    .stat-card:nth-child(odd) { border-right:1px solid rgba(0,210,255,0.08); }
    .stat-card:last-child,.stat-card:nth-last-child(2):nth-child(odd) { border-bottom:none; }
    .stat-number { font-size:2.4rem; }
    .stat-label { font-size:0.82rem; }

    /* ── Section headers ── */
    .section-header { margin-bottom:40px; }
    .section-header h2 { font-size:1.85rem; line-height:1.2; }
    .section-header p { font-size:0.95rem; }

    /* ── Services ── */
    .services-grid { grid-template-columns:1fr; gap:20px; }
    .service-tabs { gap:6px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; justify-content:flex-start;
        -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .service-tabs::-webkit-scrollbar { display:none; }
    .tab-btn { font-size:0.8rem; padding:9px 18px; white-space:nowrap; flex-shrink:0; }
    .service-card { border-radius:var(--radius-m); }
    .service-card-content { padding:20px 20px 28px; }
    .card-img-container { height:160px; }
    .card-icon { width:52px; height:52px; margin-bottom:16px; }
    .service-card h3 { font-size:1.1rem; }
    .service-card p { font-size:0.88rem; }

    /* ── BHK pricing ── */
    .bhk-options { gap:6px; }
    .bhk-item { padding:10px 6px; border-radius:10px; }
    .bhk-label { font-size:0.74rem; }
    .bhk-price { font-size:0.88rem; }

    /* ── Price notice ── */
    .price-notice { font-size:0.7rem; padding:6px 10px; }

    /* ── Category dividers ── */
    .category-divider { padding:8px 0 6px; }
    .category-divider span { font-size:0.78rem; padding:7px 14px; gap:6px; }

    /* ── Show More btn ── */
    .services-more-btn { font-size:0.9rem; padding:12px 24px; width:100%; justify-content:center; }
    .services-more-container { margin-top:32px; }

    /* ── Steps / How It Works ── */
    .steps-grid { grid-template-columns:1fr; gap:16px; }
    .step-connector { transform:rotate(90deg); }
    .step-card { padding:28px 20px; flex-direction:row; align-items:flex-start; gap:16px; text-align:left; }
    .step-num { font-size:2rem; flex-shrink:0; }
    .step-card h3 { font-size:1rem; }
    .step-card p  { font-size:0.88rem; }

    /* ── Mini Services ── */
    .mini-services-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
    .mini-card { padding:20px 16px; }
    .mini-card-icon { width:48px; height:48px; margin:0 auto 12px; }
    .mini-card h4 { font-size:0.95rem; }
    .mini-desc { font-size:0.8rem; }
    .mini-price { font-size:1.1rem; }
    .mini-services-more-btn { font-size:0.88rem; padding:12px 20px; }
    .mini-services-more-container { margin-top:24px; }

    /* ── View All CTA ── */
    .view-all-cta { padding:32px 20px; border-radius:var(--radius-m); }
    .view-all-cta p { font-size:0.92rem; }

    /* ── Why Us ── */
    .why-layout { grid-template-columns:1fr; gap:36px; }
    .why-visual-inner { padding:32px 20px; min-height:auto; }
    .badge-1,.badge-2 { display:none; }
    .benefit-item { gap:14px; }
    .benefit-icon { width:48px; height:48px; flex-shrink:0; }

    /* ── Testimonials ── */
    .testimonials-grid { grid-template-columns:1fr; gap:16px; }
    .testimonial-card { padding:24px 20px; }

    /* ── Footer ── */
    .footer-grid { grid-template-columns:1fr; gap:28px; padding:52px 0 28px; }
    .footer-brand { max-width:100%; }
    .footer-desc { font-size:0.88rem; }
    .footer-heading { font-size:0.85rem; }
    .footer-links a { font-size:0.88rem; padding:3px 0; }
    .footer-bottom { flex-direction:column; gap:12px; text-align:center; font-size:0.78rem; }
    .social-links { justify-content:center; }

    /* ── Floating CTA ── */
    .floating-cta span { display:none; }
    .floating-cta { padding:14px; border-radius:50%; bottom:80px; right:16px; }

    /* ── Offer Popup ── */
    #offerPopup {
        width:calc(100% - 32px) !important;
        max-width:100% !important;
        max-height:90vh !important;
        overflow-y:auto !important;
        top:50% !important; left:50% !important;
        padding:24px 20px !important;
        border-radius:20px !important;
    }

    /* ── Sticky Coupon Bar ── */
    #stickyCouponBar {
        flex-direction:column;
        align-items:flex-start;
        padding:14px 16px;
        gap:10px;
    }
    .coupon-bar-left { gap:10px; }
    .coupon-bar-code { font-size:1.1rem; }
    .coupon-bar-text { font-size:0.76rem; }
    .coupon-bar-actions { width:100%; justify-content:space-between; }
    .coupon-bar-copy, .coupon-bar-book { font-size:0.78rem; padding:8px 14px; flex:1; text-align:center; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤480px)
══════════════════════════════════════════════════════════ */
@media (max-width:480px) {
    :root { --sec-pad: 64px 0; }

    .hero-title { font-size:1.9rem; }
    .section-header h2 { font-size:1.6rem; }
    .btn { padding:13px 20px; font-size:0.9rem; }

    /* Mini cards 2-col on small */
    .mini-services-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .mini-card { padding:18px 12px; }
    .mini-card h4 { font-size:0.88rem; }
    .mini-price { font-size:1rem; }

    /* BHK stack vertically on very small screens */
    .bhk-options { flex-direction:column; gap:8px; }
    .bhk-item { flex-direction:row; justify-content:space-between; align-items:center; padding:10px 14px; }
    .bhk-badge { font-size:0.5rem; }

    /* Stat grid — 2 col stays */
    .stat-number { font-size:2.1rem; }

    /* Footer tweaks */
    .social-links { gap:10px; }
    .social-btn { width:40px; height:40px; }

    /* Popup full-screen on tiny phones */
    #offerPopup {
        width:calc(100% - 24px) !important;
        max-height:92vh !important;
        padding:20px 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════
   PREMIUM ZOOM EFFECT
══════════════════════════════════════════════════════════ */

/* -- Shared image container zoom -- */
.card-img-container,
.ba-card,
.gallery-card,
.ba-full .ba-side {
    position: relative;
    overflow: hidden;
}

/* Zoom overlay with magnifying icon */
.card-img-container::after,
.ba-card::before,
.gallery-card::before,
.ba-full .ba-side::before {
    content: '🔍';
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(
        135deg,
        rgba(0, 210, 255, 0.10) 0%,
        rgba(6, 16, 31, 0.30) 100%
    );
    opacity: 0;
    transition: opacity 0.45s var(--ease-smooth);
    pointer-events: none;
    border-radius: inherit;
}

/* Show overlay on hover */
.service-card:hover .card-img-container::after,
.ba-card:hover::before,
.gallery-card:hover::before,
.ba-full .ba-side:hover::before {
    opacity: 1;
}

/* Premium scale for all card images */
.card-img-container img,
.ba-card > img,
.gallery-card > img,
.ba-full .ba-side img {
    transition: transform 0.7s var(--ease-smooth), filter 0.7s var(--ease-smooth);
    will-change: transform;
}

.service-card:hover .card-img-container img,
.ba-card:hover > img,
.gallery-card:hover > img,
.ba-full .ba-side:hover img {
    transform: scale(1.15);
    filter: brightness(1.05) contrast(1.02);
}

/* Subtle inner glow border on hover */
.card-img-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.0);
    transition: box-shadow 0.5s var(--ease-smooth);
    pointer-events: none;
}
.service-card:hover .card-img-container::before {
    box-shadow: inset 0 0 30px rgba(0, 210, 255, 0.18);
}

/* ══════════════════════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════════════════════ */
#preloader {
    position:fixed; inset:0; z-index:9999;
    background:var(--navy);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:20px;
    transition:opacity 0.6s,visibility 0.6s;
}
#preloader.gone { opacity:0; visibility:hidden; }
.preloader-ring {
    width:64px; height:64px; border-radius:50%;
    border:3px solid rgba(0,210,255,0.15);
    border-top-color:var(--cyan);
    animation:spinRing 1s linear infinite;
}
@keyframes spinRing { to { transform:rotate(360deg); } }
.preloader-text { font-family:var(--font-head); font-size:0.85rem; letter-spacing:3px; color:rgba(255,255,255,0.4); text-transform:uppercase; }