a {
    text-decoration: none;
}








/* ========================
   CSS CUSTOM PROPERTIES
   ======================== */
:root {
    --navy: #0a0f1e;
    --navy-mid: #0d1530;
    --navy-light: #111a3e;
    --sky: #38bdf8;
    --sky-light: #7dd3fc;
    --sky-dark: #0ea5e9;
    --orange: #f97316;
    --orange-dark: #ea580c;
    --orange-light: #fb923c;
    --white: #ffffff;
    --white-90: rgba(255, 255, 255, 0.9);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-05: rgba(255, 255, 255, 0.05);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-muted: rgba(255, 255, 255, 0.45);
    --border: rgba(56, 189, 248, 0.18);
    --border-hover: rgba(56, 189, 248, 0.45);
    --glass: rgba(13, 21, 48, 0.65);
    --shadow-sky: 0 0 40px rgba(56, 189, 248, 0.18);
    --shadow-orange: 0 0 40px rgba(249, 115, 22, 0.25);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================
   RESET & BASE
   ======================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--navy);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
    position: relative;
}

::-webkit-scrollbar {
    width: 6px;
    background: var(--navy);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--sky), var(--orange));
    border-radius: 99px;
}

::selection {
    background: rgba(56, 189, 248, 0.35);
    color: #fff;
}

/* ========================
   TYPOGRAPHY
   ======================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(90deg,
            var(--sky) 0%,
            var(--sky-light) 30%,
            var(--orange) 60%,
            var(--sky) 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-text 5s linear infinite;
}

@keyframes shimmer-text {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 250% center;
    }
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sky);
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 99px;
    padding: 6px 18px;
    margin-bottom: 18px;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

/* ========================
   LAYOUT
   ======================== */
.section {
    padding: 70px 0;
}

.section-center {
    text-align: center;
}

/* ========================
   BUTTONS
   ======================== */
.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 99px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    box-shadow: 0 4px 25px rgba(249, 115, 22, 0.4);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(249, 115, 22, 0.55);
    color: #fff;
}

.btn-sky-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 99px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    color: var(--navy);
    box-shadow: 0 4px 25px rgba(56, 189, 248, 0.4);
    transition: var(--transition);
}

.btn-sky-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(56, 189, 248, 0.55);
    color: var(--navy);
}

.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 99px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--sky);
    border: 2px solid var(--border);
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.btn-outline-custom:hover {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-3px);
    color: var(--sky);
}

/* ========================
   CARDS
   ======================== */
.glass-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sky), var(--orange), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}

.glass-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: var(--shadow-sky);
}

.glass-card:hover::before {
    opacity: 1;
}

/* ========================
   ICON BOX
   ======================== */
.icon-box {
    width: 62px;
    height: 62px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 22px;
}

.icon-box-sky {
    background: rgba(56, 189, 248, 0.15);
    color: var(--sky);
}

.icon-box-orange {
    background: rgba(249, 115, 22, 0.15);
    color: var(--orange);
}

/* ========================
   PARTICLES CANVAS
   ======================== */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

/* ========================
   NAVBAR
   ======================== */
.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    padding: 18px 0;
    transition: all 0.4s ease;
}

.navbar-custom.scrolled {
    padding: 12px 0;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

.logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.4);
}

.logo-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 40%, var(--sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.logo-tagline {
    font-size: 0.45rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange);
    display: block;
    margin-top: 1px;
}

.nav-link-custom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px !important;
    border-radius: 99px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary) !important;
    transition: var(--transition);
}

.nav-link-custom:hover,
.nav-link-custom.active {
    color: var(--white) !important;
    background: rgba(56, 189, 248, 0.08);
}

.navbar-toggler-custom {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white-05);
    padding: 8px 12px;
    color: var(--white);
}

.navbar-toggler-custom:hover {
    border-color: var(--sky);
}

/* ========================
   PAGE HERO
   ======================== */
.page-hero {
    padding: 120px 0 70px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(56, 189, 248, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(249, 115, 22, 0.07) 0%, transparent 60%),
        linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
}

.page-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.page-hero>.container {
    position: relative;
    z-index: 1;
}

.page-hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
}

.page-hero p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.8;
}

.breadcrumb-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 24px;
    background: transparent;
    padding: 0;
}

.breadcrumb-custom a {
    color: var(--sky);
    text-decoration: none;
}

.breadcrumb-custom a:hover {
    color: var(--orange);
}

.breadcrumb-custom i {
    font-size: 0.65rem;
}

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

.hero-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(249, 115, 22, 0.08) 0%, transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
}

.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.hero>.container {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 99px;
    padding: 7px 18px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sky);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
    animation: pulse-border 2.5s ease infinite;
}

@keyframes pulse-border {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.25);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
    }
}

.hero-badge .dot {
    width: 8px;
    height: 8px;
    background: var(--sky);
    border-radius: 50%;
    animation: blink 1.4s ease infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.hero-title {
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 24px;
}

.hero-title .highlight {
    background: linear-gradient(135deg, var(--sky) 0%, var(--sky-light) 40%, var(--orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title .line-orange {
    display: block;
    background: linear-gradient(135deg, var(--orange), var(--orange-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 40px;
}

.hero-stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.hero-stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

/* Code Card */
@keyframes floatBob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.hero-code-card {
    background: rgba(13, 21, 48, 0.85);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
    animation: floatBob 6s ease-in-out infinite;
}

.code-dots {
    display: flex;
    gap: 6px;
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

.code-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.9;
}

.c-key {
    color: #f472b6;
}

.c-func {
    color: var(--sky);
}

.c-str {
    color: #86efac;
}

.c-num {
    color: var(--orange);
}

.c-cm {
    color: #64748b;
}

.c-punc {
    color: #94a3b8;
}

.c-var {
    color: #fff;
}

.hero-float-badge {
    position: absolute;
    background: rgba(13, 21, 48, 0.9);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.hfb-1 {
    top: -20px;
    left: -40px;
    animation: floatBob 5s ease-in-out infinite 0.5s;
}

.hfb-2 {
    bottom: 20px;
    right: -30px;
    animation: floatBob 7s ease-in-out infinite 1s;
}

.hfb-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.hfb-icon-sky {
    background: rgba(56, 189, 248, 0.15);
    color: var(--sky);
}

.hfb-icon-orange {
    background: rgba(249, 115, 22, 0.15);
    color: var(--orange);
}

.hfb-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hfb-val {
    font-size: 0.9rem;
    color: var(--white);
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
}

.hero-orb {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.8;
}

/* ========================
   TRUSTED SECTION
   ======================== */
.trusted-section {
    padding: 35px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: rgba(13, 21, 48, 0.4);
}

.trust-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: var(--transition);
    opacity: 0.55;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-logo:hover {
    opacity: 1;
    color: var(--white);
}

/* ========================
   SERVICE CARDS
   ======================== */
.service-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    backdrop-filter: blur(20px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.35s;
    pointer-events: none;
}

.service-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.service-card:hover::after {
    opacity: 1;
}

.service-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 22px;
}

.service-icon-sky {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
}

.service-icon-orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
}

.service-icon-mix {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(249, 115, 22, 0.12));
    color: var(--sky-light);
}

.service-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--white-05);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ========================
   WHY CHOOSE US
   ======================== */
.why-section {
    background: var(--navy-mid);
}

.why-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--white-05);
    transition: var(--transition);
}

.why-item:hover {
    border-color: var(--border-hover);
    background: rgba(56, 189, 248, 0.05);
    transform: translateX(6px);
}

.why-item-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.why-item-icon.orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
}

.why-stat-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

.why-stat-card:hover {
    border-color: var(--sky);
    transform: scale(1.03);
}

.why-stat-card:nth-child(even) {
    margin-top: 32px;
}

.wsc-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.wsc-num-sky {
    color: var(--sky);
}

.wsc-num-orange {
    color: var(--orange);
}

/* ========================
   PROCESS STEPS
   ======================== */
.ps-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--glass);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.process-step:hover .ps-num {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.1);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
}

.ps-num-1,
.ps-num-3 {
    color: var(--sky);
}

.ps-num-2,
.ps-num-4 {
    color: var(--orange);
}

/* ========================
   TESTIMONIALS
   ======================== */
.testimonials-section {
    background: var(--navy-mid);
}

.testimonial-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

.testimonial-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
}

.tc-stars i {
    color: var(--orange);
    font-size: 0.85rem;
}

.tc-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-style: italic;
}

.tc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    flex-shrink: 0;
}

.av-sky {
    background: rgba(56, 189, 248, 0.15);
    color: var(--sky);
}

.av-orange {
    background: rgba(249, 115, 22, 0.15);
    color: var(--orange);
}

.av-white {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* Swiper Pagination Customization */
.testimonial-slider .swiper-pagination-bullet {
    background: var(--white-40);
    opacity: 1;
    width: 10px;
    height: 10px;
    transition: var(--transition);
}

.testimonial-slider .swiper-pagination-bullet-active {
    background: var(--sky);
    width: 24px;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

.testimonial-slider .swiper-slide {
    height: auto;
}

.testimonial-slider .testimonial-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

/* ========================
   CTA SECTION
   ======================== */
.cta-section {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
}

.cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(249, 115, 22, 0.12) 0%, transparent 70%),
        linear-gradient(135deg, var(--navy-mid), var(--navy));
}

/* ========================
   FOOTER
   ======================== */
.footer {
    background: var(--navy-mid);
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.footer-col h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, var(--sky), var(--orange));
    border-radius: 99px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    padding: 4px 0;
}

.footer-link i {
    font-size: 0.65rem;
    color: var(--sky);
}

.footer-link:hover {
    color: var(--white);
    padding-left: 4px;
}

.social-link {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    background: var(--white-05);
}

.social-link:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: rgba(56, 189, 248, 0.1);
    transform: translateY(-3px);
}

.newsletter-input {
    width: 100%;
    padding: 12px 18px;
    background: var(--white-05);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    outline: none;
    transition: var(--transition);
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

.newsletter-input:focus {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.06);
}

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-bottom-link {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.25s;
}

.footer-bottom-link:hover {
    color: var(--sky);
}

/* ========================
   PREMIUM ANIMATIONS
   ======================== */

.footer {
    overflow: visible !important;
}

.footer-wave-wrap {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}

.footer-wave-wrap svg {
    position: relative;
    display: block;
    width: calc(154% + 1.3px);
    height: 100px;
}

.footer-wave-wrap .shape-fill {
    fill: var(--navy-mid);
}

/* Layered Waves */
.wave-path {
    animation: waveMotion 20s linear infinite;
}

.wave-path-1 {
    opacity: 0.3;
    animation-duration: 25s;
    animation-direction: reverse;
}

.wave-path-2 {
    opacity: 0.5;
    animation-duration: 18s;
}

.wave-path-3 {
    opacity: 1;
    animation-duration: 12s;
}

@keyframes waveMotion {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Footer Orbs */
.footer-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.footer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    animation: orbFloat 15s ease-in-out infinite alternate;
}

.orb-sky {
    background: var(--sky);
    width: 300px;
    height: 300px;
    top: 10%;
    left: -100px;
}

.orb-orange {
    background: var(--orange);
    width: 250px;
    height: 250px;
    bottom: -50px;
    right: -80px;
    animation-delay: -5s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, -20px) scale(1.1);
    }

    100% {
        transform: translate(-20px, 40px) scale(0.9);
    }
}

/* Enhanced Hover States */
.footer-link:hover i {
    transform: translateX(4px) scale(1.2);
    color: var(--orange);
}

.social-link:hover {
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* --- Button Click Ripple --- */
.btn-primary-custom,
.btn-outline-custom,
.btn-sky-custom {
    position: relative;
    overflow: hidden;
}

@keyframes btn-ripple {
    from {
        transform: scale(0);
        opacity: 0.55;
    }

    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btn-ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
    animation: btn-ripple 0.55s ease-out forwards;
    transform-origin: center;
}

/* --- Card 3D Tilt (style, JS controls transform) --- */
.service-card,
.mvv-card,
.team-card,
.testimonial-card,
.pricing-card,
.award-card,
.industry-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* --- Trusted Logos Marquee --- */
.trust-marquee-wrap {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.trust-marquee-track {
    display: flex;
    gap: 48px;
    align-items: center;
    width: max-content;
    animation: marquee-scroll 22s linear infinite;
}

.trust-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Cursor Spotlight (injected by JS) --- */
#cursor-spotlight {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.055) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: left 0.25s ease, top 0.25s ease;
    will-change: left, top;
}

/* --- Glow flash when card revealed --- */
@keyframes reveal-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0);
    }

    40% {
        box-shadow: 0 0 30px 6px rgba(56, 189, 248, 0.22);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.0);
    }
}

.reveal.visible.glow-flash {
    animation: reveal-glow 0.9s ease forwards;
}

/* --- Section tag hover pulse --- */
.section-tag {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-tag:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

/* --- Floating WhatsApp / Call bounce on load --- */
@keyframes float-in-left {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.floating-contact-wrap {
    animation: float-in-left 0.7s cubic-bezier(0.4, 0, 0.2, 1) 1.2s both;
}

/* --- Hero badge dot glow --- */
.hero-badge .dot {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.6);
    animation: dot-ping 2s cubic-bezier(0.4, 0, 0.6, 1) infinite, blink 1.4s ease infinite;
}

@keyframes dot-ping {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(56, 189, 248, 0);
    }
}

/* --- Navbar scrolled glow --- */
.navbar-custom.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 60px rgba(56, 189, 248, 0.06);
}

/* ========================
   SCROLL REVEAL ANIMATIONS
   ======================== */

/* Base state — hidden before reveal */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Revealed state */
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* Direction variants */
.reveal.reveal-left {
    transform: translateX(-36px);
}

.reveal.reveal-left.visible {
    transform: none;
}

.reveal.reveal-right {
    transform: translateX(36px);
}

.reveal.reveal-right.visible {
    transform: none;
}

.reveal.reveal-scale {
    transform: scale(0.92) translateY(20px);
}

.reveal.reveal-scale.visible {
    transform: none;
}

/* Stagger delay utilities */
.reveal-d1 {
    transition-delay: 0.08s;
}

.reveal-d2 {
    transition-delay: 0.16s;
}

.reveal-d3 {
    transition-delay: 0.24s;
}

.reveal-d4 {
    transition-delay: 0.32s;
}

.reveal-d5 {
    transition-delay: 0.40s;
}

.reveal-d6 {
    transition-delay: 0.48s;
}

/* Disable animations on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ========================
   BACK TO TOP
   ======================== */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
    transition: var(--transition);
    opacity: 0;
    pointer-events: none;
    z-index: 500;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.55);
}

/* ========================
   ABOUT PAGE
   ======================== */
.story-img-frame {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.story-img-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--orange));
}

.story-code-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 2;
    color: var(--text-secondary);
}

.story-code-display .hl-sky {
    color: var(--sky);
}

.story-code-display .hl-orange {
    color: var(--orange);
}

.story-code-display .hl-green {
    color: #86efac;
}

.story-code-display .hl-pink {
    color: #f472b6;
}

.story-badge-float {
    position: absolute;
    background: rgba(13, 21, 48, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sbf-1 {
    bottom: -20px;
    right: -20px;
}

.sbf-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sbf-icon-sky {
    background: rgba(56, 189, 248, 0.15);
    color: var(--sky);
}

.sbf-icon-orange {
    background: rgba(249, 115, 22, 0.15);
    color: var(--orange);
}

.mvv-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    backdrop-filter: blur(20px);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.mvv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--sky), var(--orange), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}

.mvv-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.mvv-card:hover::before {
    opacity: 1;
}

.mvv-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.mvv-icon-sky {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
    border: 2px solid rgba(56, 189, 248, 0.25);
}

.mvv-icon-orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
    border: 2px solid rgba(249, 115, 22, 0.25);
}

.mvv-icon-mix {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(249, 115, 22, 0.12));
    color: var(--sky-light);
    border: 2px solid rgba(56, 189, 248, 0.2);
}

.team-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

.team-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.team-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 800;
    font-family: 'Space Grotesk', sans-serif;
    border: 3px solid var(--border);
    transition: var(--transition);
}

.team-card:hover .team-avatar {
    border-color: var(--sky);
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
}

.ta-sky {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
}

.ta-orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
}

.ta-white {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.ta-mix {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(249, 115, 22, 0.12));
    color: var(--sky-light);
}

.team-social-link {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-decoration: none;
    transition: var(--transition);
}

.team-social-link:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: rgba(56, 189, 248, 0.1);
}

.tech-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--white-05);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition);
    cursor: default;
}

.tech-pill:hover {
    border-color: var(--sky);
    color: var(--white);
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-2px);
}

.tp-sky {
    color: var(--sky);
}

.tp-orange {
    color: var(--orange);
}

.tp-green {
    color: #86efac;
}

.tp-pink {
    color: #f472b6;
}

.tp-yellow {
    color: #facc15;
}

.award-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

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

/* ========================
   SERVICES PAGE
   ======================== */
.svc-card-visual {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.svc-card-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--orange));
}

.svc-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.svc-features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--white-05);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.svc-features-list li:hover {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.06);
}

.svc-features-list li i {
    color: var(--sky);
    font-size: 0.8rem;
}

.svc-features-list li.orange i {
    color: var(--orange);
}

.svc-metric {
    background: var(--white-05);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
}

.svc-metric-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--white-05);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.pm-step {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

.pm-step:hover {
    border-color: var(--sky);
    transform: translateY(-4px);
}

/* Pricing */
.pricing-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 44px 36px;
    backdrop-filter: blur(20px);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
}

.pricing-card.featured {
    border-color: var(--sky);
    background: linear-gradient(160deg, rgba(56, 189, 248, 0.08) 0%, rgba(13, 21, 48, 0.8) 100%);
    box-shadow: var(--shadow-sky);
}

.pricing-card.featured::before {
    content: '🔥 Most Popular';
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
}

.pricing-card:not(.featured):hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
}

.price-currency {
    font-size: 1.3rem;
    color: var(--sky);
    font-weight: 700;
    margin-bottom: 6px;
}

.price-amount {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
}

.pricing-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 6px 0;
}

.pricing-feature-item i.fa-check {
    color: var(--sky);
}

.pricing-feature-item i.fa-times {
    color: rgba(255, 255, 255, 0.2);
}

.pricing-feature-item.disabled {
    opacity: 0.4;
}

/* ========================
   PORTFOLIO PAGE
   ======================== */
.filter-btn {
    padding: 10px 24px;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--white-05);
    color: var(--text-secondary);
    transition: var(--transition);
}

.filter-btn:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: rgba(56, 189, 248, 0.08);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--sky), var(--sky-dark));
    border-color: transparent;
    color: var(--navy);
    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.4);
}

.portfolio-item {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.portfolio-item:hover {
    border-color: var(--border-hover);
    transform: translateY(-8px);
    box-shadow: var(--shadow-sky);
}

.portfolio-preview {
    height: 220px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.5s ease;
}

.portfolio-item:hover .preview-bg {
    transform: scale(1.06);
}

.pb-web {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18) 0%, rgba(13, 21, 48, 0.9) 100%);
}

.pb-mobile {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18) 0%, rgba(13, 21, 48, 0.9) 100%);
}

.pb-cloud {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(249, 115, 22, 0.12) 100%);
}

.pb-ai {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(13, 21, 48, 0.9) 100%);
}

.pb-saas {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(13, 21, 48, 0.9) 100%);
}

.pb-ecom {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.20) 0%, rgba(56, 189, 248, 0.10) 100%);
}

.mock-browser {
    width: 82%;
    background: rgba(10, 15, 30, 0.9);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.mb-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mb-dot-r {
    background: #ff5f56;
}

.mb-dot-y {
    background: #ffbd2e;
}

.mb-dot-g {
    background: #27c93f;
}

.mb-url {
    flex: 1;
    height: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 0 7px;
    margin: 0 7px;
}

.mb-body {
    padding: 14px;
}

.mb-line {
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    margin-bottom: 7px;
}

.mb-line.sky {
    background: rgba(56, 189, 248, 0.25);
}

.mb-line.orange {
    background: rgba(249, 115, 22, 0.20);
}

.mock-phone {
    width: 100px;
    background: rgba(10, 15, 30, 0.9);
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    padding: 26px 10px 10px;
}

.phone-notch {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 5px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.ps-block {
    height: 11px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    margin-bottom: 5px;
}

.ps-block.sky {
    background: rgba(56, 189, 248, 0.3);
    width: 70%;
}

.ps-block.orange {
    background: rgba(249, 115, 22, 0.25);
    width: 55%;
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(10, 15, 30, 0.97) 0%, rgba(10, 15, 30, 0.5) 60%, transparent 100%);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    padding: 20px;
    transition: opacity 0.3s;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.overlay-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 99px;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: var(--transition);
}

.ol-live {
    background: var(--orange);
    color: #fff;
}

.ol-github {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pt {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--white-05);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.industry-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: var(--transition);
}

.industry-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
}

/* ========================
   CONTACT PAGE
   ======================== */
.contact-info-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sky), var(--orange));
    opacity: 0.6;
}

.contact-info-card:hover {
    border-color: var(--border-hover);
}

.cic-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cic-icon-sky {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
}

.cic-icon-orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
}

.hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.87rem;
    color: var(--text-secondary);
    padding: 8px 14px;
    background: var(--white-05);
    border-radius: 8px;
}

.hours-row .day {
    font-weight: 600;
    color: var(--white);
}

.hours-row .time {
    color: var(--sky);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

.hours-row .closed {
    color: rgba(255, 70, 70, 0.8);
}

.quick-contact-card {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(56, 189, 248, 0.08) 100%);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
}

.qc-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: var(--transition);
}

.qcb-wa {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.25);
}

.qcb-wa:hover {
    background: rgba(37, 211, 102, 0.2);
    transform: translateX(4px);
    color: #25d366;
}

.qcb-li {
    background: rgba(0, 119, 181, 0.12);
    color: #0a78b8;
    border: 1px solid rgba(0, 119, 181, 0.25);
}

.qcb-li:hover {
    background: rgba(0, 119, 181, 0.2);
    transform: translateX(4px);
    color: #0a78b8;
}

.qcb-em {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
    border: 1px solid var(--border);
}

.qcb-em:hover {
    background: rgba(56, 189, 248, 0.2);
    transform: translateX(4px);
    color: var(--sky);
}

.contact-form-wrapper {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 44px;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sky), var(--orange));
}

.form-label-custom {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.form-label-custom i {
    color: var(--sky);
    font-size: 0.75rem;
}

.form-control-custom {
    width: 100%;
    padding: 13px 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-size: 0.93rem;
    outline: none;
    transition: var(--transition);
}

.form-control-custom::placeholder {
    color: var(--text-muted);
}

.form-control-custom:focus {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.05);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
}

.form-control-custom:hover:not(:focus) {
    border-color: rgba(56, 189, 248, 0.35);
}

select.form-control-custom option {
    background: var(--navy-mid);
    color: var(--white);
}

textarea.form-control-custom {
    resize: vertical;
    min-height: 130px;
}

.budget-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background: var(--white-05);
    cursor: pointer;
    transition: var(--transition);
}

.budget-label:hover {
    border-color: var(--sky);
    color: var(--sky);
    background: rgba(56, 189, 248, 0.08);
}

.budget-option:checked+.budget-label {
    border-color: var(--orange);
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.form-submit-btn {
    width: 100%;
    padding: 16px 32px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark));
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.form-submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(249, 115, 22, 0.5);
}

.map-frame {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-pin {
    width: 60px;
    height: 60px;
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, var(--sky), var(--orange));
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(56, 189, 248, 0.5);
}

.map-pin i {
    transform: rotate(45deg);
    color: #fff;
    font-size: 1.3rem;
}

.map-ripple {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(56, 189, 248, 0.5);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}

.map-ripple:nth-child(2) {
    animation-delay: 0.5s;
}

.map-ripple:nth-child(3) {
    animation-delay: 1s;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.loc-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.faq-item {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    overflow: hidden;
    transition: var(--transition);
}

.faq-item.open {
    border-color: var(--sky);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--white);
    transition: color 0.25s;
    gap: 16px;
    user-select: none;
}

.faq-question:hover {
    color: var(--sky);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white-05);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.faq-item.open .faq-toggle {
    background: rgba(56, 189, 248, 0.15);
    border-color: var(--sky);
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    overflow: hidden;
    padding: 0 24px 22px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.faq-item.open .faq-answer {
    display: block !important;
}

/* ========================
   ALERT MESSAGES
   ======================== */
.alert-success-custom {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
    color: #86efac;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.alert-danger-custom {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ========================
   RESPONSIVE — Stable Layout
   ======================== */

/* --- Tablet (≤992px) --- */
@media (max-width: 992px) {
    .section {
        padding: 70px 0;
    }

    /* Hero: stack to single column on tablet */
    .hero {
        padding: 110px 0 60px;
        min-height: auto;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    /* Page hero */
    .page-hero {
        padding: 130px 0 70px;
    }

    /* Hide floating badges on tablet - they overflow */
    .hero-float-badge {
        display: none;
    }

    /* Pricing card featured — no scale on tablet (layout break) */
    .pricing-card.featured {
        transform: none !important;
    }

    .pricing-card.featured:hover {
        transform: translateY(-6px) !important;
    }
}

/* --- Mobile (≤768px) --- */
@media (max-width: 768px) {

    /* General */
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 1.9rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
        margin-bottom: 36px;
    }

    /* Hero */
    .hero {
        padding: 100px 0 50px;
        text-align: center;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-desc {
        font-size: 1rem;
    }

    .hero .d-flex.gap-3 {
        justify-content: center;
    }

    .hero .d-flex.gap-4 {
        justify-content: center;
    }

    /* Hide hero code card float badges */
    .hfb-1,
    .hfb-2 {
        display: none;
    }

    /* Page hero */
    .page-hero {
        padding: 110px 0 60px;
    }

    .page-hero h1 {
        font-size: 2.2rem;
    }

    /* Why Stats: no stagger offset on mobile */
    .why-stat-card:nth-child(even) {
        margin-top: 0;
    }

    .why-stat-card {
        padding: 24px 16px;
    }

    .wsc-num {
        font-size: 2.2rem;
    }

    /* Contact form */
    .contact-form-wrapper {
        padding: 28px 20px;
    }

    /* Pricing */
    .pricing-card {
        padding: 32px 24px;
    }

    /* Service visual cards */
    .svc-card-visual {
        padding: 28px;
    }

    /* Story badge — hide on mobile (overflows) */
    .story-badge-float {
        display: none;
    }

    /* Buttons: full width on mobile */
    .hero .btn-primary-custom,
    .hero .btn-outline-custom {
        width: 100%;
        justify-content: center;
    }
}

/* --- Small Mobile (≤576px) --- */
@media (max-width: 576px) {
    .hero-badge {
        font-size: 0.7rem;
        padding: 6px 14px;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .section-title {
        font-size: 1.7rem;
    }

    .page-hero h1 {
        font-size: 1.9rem;
    }

    /* Buttons */
    .btn-primary-custom,
    .btn-outline-custom,
    .btn-sky-custom {
        padding: 12px 22px;
        font-size: 0.88rem;
    }

    /* Careers modal buttons */
    .btn-primary-custom.w-100,
    .btn-outline-custom.w-100 {
        justify-content: center;
    }

    .modal-body .d-flex.justify-content-between {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .modal-body .text-end {
        text-align: center !important;
    }

    .form-label-custom {
        font-size: 0.8rem;
    }

    .upload-area {
        padding: 20px;
    }

    /* Trusted logos */
    .trusted-section .d-flex {
        gap: 16px !important;
    }

    .trust-logo {
        font-size: 0.9rem;
    }

    /* Testimonials padding */
    .testimonial-card {
        padding: 22px 18px;
    }

    /* Footer */
    .footer .d-flex.gap-3 {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Pricing */
    .pricing-card {
        padding: 28px 20px;
    }

    .price-amount {
        font-size: 2.4rem;
    }
}

/* --- Very small phones (≤400px) --- */
@media (max-width: 400px) {
    .hero-title {
        font-size: 1.65rem;
    }

    .section-title {
        font-size: 1.55rem;
    }

    .hero-code-card {
        display: none;
        /* code card too wide on tiny screens */
    }
}

/* ========================
   BOOTSTRAP 5 OVERRIDES
   ======================== */
/* Force dark background — Bootstrap's bg-light / bg-white can override body */
body {
    background-color: var(--navy) !important;
    color: var(--text-primary) !important;
}

/* Override Bootstrap link colour */
a {
    color: inherit;
}

a:hover {
    color: inherit;
}

/* Kill Bootstrap's default .container max-width changes that break layout */
.container {
    max-width: 1200px;
}

/* Bootstrap resets padding:0 on <ul> — restore for nav lists */
.list-unstyled {
    padding-left: 0;
    margin-bottom: 0;
}

/* Prevent Bootstrap border-box conflicts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Bootstrap overrides .form-control with white bg + dark text */
.form-control-custom,
select.form-control-custom,
textarea.form-control-custom {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

.form-control-custom:focus {
    background: rgba(56, 189, 248, 0.05) !important;
    border-color: var(--sky) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1) !important;
    color: var(--white) !important;
}

/* Floating Contact Buttons (Left) */
.floating-contact-wrap {
    position: fixed;
    bottom: 30px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.floating-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, background 0.3s;
    text-decoration: none !important;
}

.floating-btn:hover {
    transform: scale(1.1) translateY(-3px);
}

.floating-whatsapp {
    background: #25D366;
}

.floating-call {
    background: var(--sky);
}

/* Back to Top (Right) */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--white);
    display: none;
    /* Controlled by JS */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    transition: var(--transition);
}

.back-to-top.visible {
    display: flex;
}

.back-to-top:hover {
    background: var(--sky);
    border-color: var(--sky);
    transform: translateY(-3px);
}

/* Bootstrap btn reset — our custom buttons use -custom suffix so no conflict */
.btn-primary-custom,
.btn-sky-custom,
.btn-outline-custom {
    line-height: inherit;
    vertical-align: middle;
}

/* Ensure Bootstrap rows don't add unwanted gutters to hero float badges */
.hero-float-badge {
    z-index: 10;
}

/* Bootstrap sets h1–h6 line-height:1.2 already — keep our font-family */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Section padding reset — defined in responsive section above */

/* ========================
   DROPDOWN MENU
   ======================== */
.dropdown-menu.custom-dropdown {
    background: rgba(13, 21, 48, 0.9);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    padding: 12px 0;
    margin-top: 15px;
    animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform-origin: top center;
}

/* Force solid navbar on mobile */
@media (max-width: 992px) {
    .navbar-custom {
        background: rgba(10, 15, 30, 0.98) !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 12px 0 !important;
    }
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu.custom-dropdown .dropdown-item {
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 24px;
    transition: var(--transition);
    background: transparent;
}

.dropdown-menu.custom-dropdown .dropdown-item:hover,
.dropdown-menu.custom-dropdown .dropdown-item.active {
    color: var(--sky) !important;
    background: rgba(56, 189, 248, 0.08);
}

/* Hover Dropdown for Desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover>.dropdown-menu {
        display: block;
    }

    /* Invisible bridge to prevent hover loss */
    .dropdown-menu.custom-dropdown::before {
        content: '';
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        height: 20px;
        background: transparent;
    }
}

/* ======================== 
   CAREERS PAGE STYLES 
   ======================== */
.accordion-item {
    background: transparent !important;
    border: none !important;
}

.job-card {
    background: var(--white-05) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    transition: var(--transition);
}

.accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}

.accordion-button::after {
    display: none;
    /* Use our custom plus/minus icon instead */
}

.accordion-button:not(.collapsed) {
    border-radius: 16px 16px 0 0 !important;
    border-bottom: none !important;
}

.accordion-button:not(.collapsed) .fa-plus {
    transform: rotate(45deg);
    color: var(--orange);
}

.accordion-collapse {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 16px 16px !important;
    overflow: hidden;
}

.job-card:hover {
    border-color: var(--sky) !important;
    background: rgba(56, 189, 248, 0.05) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.job-pill {
    font-size: 0.7rem;
    background: rgba(56, 189, 248, 0.1);
    color: var(--sky);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.text-sky {
    color: var(--sky);
}

.text-orange {
    color: var(--orange);
}

/* Modal Specific Styles */
.form-label-custom {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.form-control-custom {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--white) !important;
    padding: 12px 16px !important;
    transition: var(--transition);
}

.form-control-custom:focus {
    border-color: var(--sky) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.upload-area {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.upload-area:hover {
    border-color: var(--sky);
    background: rgba(56, 189, 248, 0.05);
}

.form-step {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive Adjustments for Careers */
@media (max-width: 576px) {

    .btn-primary-custom,
    .btn-outline-custom {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        width: 100%;
        justify-content: center;
    }

    .modal-body .d-flex.justify-content-between {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .modal-body .text-end {
        text-align: center !important;
    }

    .form-label-custom {
        font-size: 0.8rem;
    }

    .upload-area {
        padding: 20px;
    }
}


/* ============================================================
   SERVICE PAGES — shared across:
   web-development.php | android-development.php |
   software-development.php | digital-marketing.php |
   social-media-marketing.php | ui-ux-design.php
   ============================================================ */

/* ── Hero image area ─────────────────────────────────────── */
/* .sp-hero-orb : glow orb positioned top-right behind the hero image */
.sp-hero-orb { top:-20%; right:-20%; width:300px; height:300px; }
/* .sp-hero-img : keeps hero image above the orb */
.sp-hero-img  { position:relative; z-index:1; }

/* ── Service detail rows ─────────────────────────────────── */
/* .sp-svc-divider : bottom border between service blocks (not on last) */
.sp-svc-divider { border-bottom:1px solid var(--border); }
/* .sp-emoji : large service-type emoji above the feature list */
.sp-emoji { font-size:3.5rem; line-height:1; margin-bottom:20px; }
/* .sp-svc-desc : service description paragraph */
.sp-svc-desc { font-size:0.95rem; color:var(--text-secondary); line-height:1.85; margin-bottom:20px; }
/* .sp-metric-label : small muted text below the stat number */
.sp-metric-label { font-size:0.72rem; color:var(--text-muted); margin-top:3px; }

/* ── Tech Stack Marquee (web-development.php only) ──────── */
/* .sp-marquee-section : outer section wrapper */
.sp-marquee-section {
    padding:50px 0;
    overflow:hidden;
    background:var(--navy-mid);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
/* .sp-marquee-clip : clips the scrolling belt */
.sp-marquee-clip { overflow:hidden; padding:6px 0; }
/* .marquee-belt : animated belt — items duplicated × 2 for seamless loop */
.marquee-belt {
    display:flex;
    width:max-content;
    animation:marqueeRoll 32s linear infinite;
    gap:18px;
    align-items:center;
}
.marquee-belt:hover { animation-play-state:paused; }
@keyframes marqueeRoll {
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
}
/* .mq-pill : individual technology badge pill */
.mq-pill {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 24px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:50px;
    white-space:nowrap;
    font-size:0.88rem;
    font-weight:600;
    color:var(--sky);
    flex-shrink:0;
    transition:border-color 0.3s, box-shadow 0.3s;
}
.mq-pill:hover { border-color:var(--sky); box-shadow:0 0 14px rgba(0,183,255,0.25); }
.mq-pill i { font-size:1.1rem; }

/* ── Key Features grid (web-development.php) ──────────────── */
/* .sp-feature-card : flex column card with icon + title + desc */
.sp-feature-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:20px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:16px;
    height:100%;
}
/* .sp-feature-icon-sky / .sp-feature-icon-orange : coloured icon boxes */
.sp-feature-icon-sky,
.sp-feature-icon-orange {
    width:48px;
    height:48px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
}
.sp-feature-icon-sky    { background:rgba(0,183,255,0.12); color:var(--sky); }
.sp-feature-icon-orange { background:rgba(251,146,60,0.12); color:var(--orange); }
.sp-feature-card h4 { font-size:0.95rem; font-weight:700; margin-bottom:8px; }
.sp-feature-card p  { font-size:0.82rem; color:var(--text-secondary); line-height:1.65; margin:0; }

/* ── Process + Pricing section background ─────────────────── */
/* .sp-bg-navy : navy-mid background used on process and pricing sections */
.sp-bg-navy { background:var(--navy-mid); }

/* ── Process step internals ───────────────────────────────── */
/* .sp-step-num   : "01" "02" step counter badge */
.sp-step-num   { font-size:0.72rem; font-weight:700; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; }
/* .sp-step-emoji : large emoji icon */
.sp-step-emoji { font-size:1.5rem; margin-bottom:10px; }
/* .sp-step-title : step label text */
.sp-step-title { font-size:0.82rem; font-weight:700; color:var(--white); line-height:1.3; margin:0; }

/* ── Pricing grid ─────────────────────────────────────────── */
/* .services-grid-wrapper : responsive auto CSS grid for pricing cards */
.services-grid-wrapper {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:24px;
}
/* .sp-pkg-card : pricing card padding + relative for the popular badge */
.sp-pkg-card { padding:24px; position:relative; }
/* .sp-pkg-popular-badge : gradient "MOST POPULAR" badge centred above card */
.sp-pkg-popular-badge {
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(135deg,var(--sky),var(--orange));
    color:#000;
    font-size:0.7rem;
    font-weight:800;
    padding:4px 16px;
    border-radius:20px;
    letter-spacing:1px;
    white-space:nowrap;
}
/* .sp-pkg-badge : "SMALL BUSINESS / MOST POPULAR / LARGE SCALE" tier label */
.sp-pkg-badge { font-size:0.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); margin-bottom:12px; }
/* .sp-pkg-badge.has-popular-above : extra top margin when popular badge is shown */
.sp-pkg-badge.has-popular-above { margin-top:8px; }
/* .sp-pkg-title : package title */
.sp-pkg-title { font-size:1.4rem; font-weight:800; margin-bottom:10px; }
/* .sp-pkg-currency : currency symbol (₹) */
.sp-pkg-currency { font-size:1rem; color:var(--text-muted); font-weight:600; }
/* .sp-pkg-price : price number — .sky for featured, .white for normal */
.sp-pkg-price { font-size:1.6rem; font-weight:800; line-height:1; }
.sp-pkg-price.sky   { color:var(--sky); }
.sp-pkg-price.white { color:var(--white); }
/* .sp-pkg-suffix : "/ project" or "/ month" period line */
.sp-pkg-suffix { font-size:0.75rem; color:var(--text-muted); margin-bottom:12px; display:block; }
/* .sp-pkg-desc : short package description with divider */
.sp-pkg-desc { font-size:0.8rem; color:var(--text-secondary); line-height:1.5; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
/* .pkg-category : "WHAT YOU GET / TECH STACK / SUPPORT" section label */
.pkg-category { font-size:0.65rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--sky); margin:14px 0 6px 0; border-bottom:1px dashed var(--border); padding-bottom:4px; }
/* .pkg-list : feature list inside pricing card */
.pkg-list { list-style:none; padding:0; margin:0; }
.pkg-list li { font-size:0.78rem; color:var(--text-secondary); margin-bottom:4px; line-height:1.35; display:flex; align-items:flex-start; gap:6px; }
.pkg-list li i { font-size:0.6rem; color:var(--sky); margin-top:4px; }
/* .sp-pkg-cta : compact CTA button inside pricing card */
.sp-pkg-cta { padding:10px; font-size:0.85rem; }

/* ── Maintenance & Support plan cards (web-development.php) ── */
/* .sp-plan-card : wrapper card (border is inline — color is dynamic PHP) */
.sp-plan-card { padding:24px; background:var(--card-bg); border-radius:16px; height:100%; position:relative; }
/* .sp-plan-popular-badge : orange "Most Popular" centred badge */
.sp-plan-popular-badge {
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--orange);
    color:#000;
    font-size:0.7rem;
    font-weight:800;
    padding:4px 14px;
    border-radius:20px;
    white-space:nowrap;
}
/* .sp-plan-name : plan name heading */
.sp-plan-name { font-size:1.2rem; font-weight:800; margin-bottom:10px; }
.sp-plan-name.has-popular-above { margin-top:8px; }
/* .sp-plan-price : large plan price (color is inline — dynamic PHP) */
.sp-plan-price { font-size:1.8rem; font-weight:800; }
/* .sp-plan-period : "/ month" period text */
.sp-plan-period { font-size:0.78rem; color:var(--text-muted); margin-bottom:4px; }
/* .sp-plan-list : feature list in support plan */
.sp-plan-list { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:10px; }
.sp-plan-list li { display:flex; align-items:center; gap:10px; font-size:0.85rem; color:var(--text-secondary); }

/* ── Pricing note banner (digital-marketing / social-media) ── */
/* .sp-pricing-note : note below pricing grid about ad budget exclusion */
.sp-pricing-note { font-size:0.85rem; color:var(--text-muted); padding:20px; border-radius:12px; background:var(--card-bg); border:1px solid var(--border); }

/* ── Why Us cards ─────────────────────────────────────────── */
/* .sp-why-card : flex card with icon + text */
.sp-why-card { background:var(--card-bg); border:1px solid var(--border); height:100%; }
/* .sp-why-icon : sky-coloured icon box */
.sp-why-icon { width:45px; height:45px; border-radius:10px; background:rgba(0,183,255,0.1); display:flex; align-items:center; justify-content:center; color:var(--sky); font-size:1.2rem; flex-shrink:0; }
.sp-why-card h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.sp-why-card p  { font-size:0.83rem; color:var(--text-secondary); line-height:1.6; margin:0; }

/* ── FAQ section ──────────────────────────────────────────── */
/* .sp-faq-q : question text */
.sp-faq-q { font-weight:600; color:var(--white); }
/* .sp-faq-icon : plus/minus icon with rotation transition */
.sp-faq-icon { color:var(--sky); transition:transform 0.3s; }

/* ── CTA section ──────────────────────────────────────────── */
/* .sp-cta-tag : section-tag centred with bottom spacing */
.sp-cta-tag { margin:0 auto 20px; }
/* .sp-cta-desc : centred description paragraph */
.sp-cta-desc { color:var(--text-secondary); max-width:540px; margin:0 auto 36px; line-height:1.8; }


/* ========================
   HERO SECTION — orb override & hero image
   ======================== */
/* Hero orb positioned top-right in the image column */
.wd-hero-orb {
    top: -20%;
    right: -20%;
    width: 300px;
    height: 300px;
}

/* Hero service image */
.wd-hero-img {
    position: relative;
    z-index: 1;
}

/* ========================
   SERVICES DETAILED — service row divider
   ======================== */
/* Rows between service blocks have a bottom border except the last */
.wd-svc-row-divider {
    border-bottom: 1px solid var(--border);
}

/* ========================
   SERVICES DETAILED — emoji icon above feature list
   ======================== */
.wd-svc-emoji {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 20px;
}

/* ========================
   SERVICES DETAILED — service description paragraph
   ======================== */
.wd-svc-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 20px;
}

/* ========================
   SERVICES DETAILED — metric label under the number
   ======================== */
.wd-metric-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ========================
   TECH STACK MARQUEE SECTION
   ======================== */
/* Outer section — compact padding + navy-mid bg */
.wd-marquee-section {
    padding: 40px 0;
    overflow: hidden;
    background: var(--navy-mid);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Flex wrapper that hides overflow so pills scroll seamlessly */
.tech-marquee-wrap {
    display: flex;
    gap: 0;
    overflow: hidden;
    user-select: none;
}

/* Each animated track (rendered twice for infinite loop) */
.tech-marquee-track {
    display: flex;
    gap: 16px;
    animation: marquee-scroll-wd 28s linear infinite;
    flex-shrink: 0;
}

/* Second track starts halfway through so there's no gap */
.tech-marquee-track:nth-child(2) {
    animation-delay: -14s;
}

@keyframes marquee-scroll-wd {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* Individual technology pill */
.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 50px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--transition);
}

/* Tech icon inside pill */
.tech-pill i {
    color: var(--sky);
    font-size: 1rem;
}

/* ========================
   KEY FEATURES / GUARANTEES GRID
   ======================== */
/* Individual feature card wrapper */
.wd-feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    height: 100%;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.wd-feature-card:hover {
    border-color: var(--sky);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
}

.wd-feature-card.orange-accent:hover {
    border-color: var(--orange);
}

/* Icon box inside feature card — sky variant */
.wd-feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.wd-feature-icon.icon-sky {
    background: rgba(56, 189, 248, 0.12);
    color: var(--sky);
}

.wd-feature-icon.icon-orange {
    background: rgba(249, 115, 22, 0.12);
    color: var(--orange);
}

/* Feature card heading */
.wd-feature-card h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Feature card body text */
.wd-feature-card p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ========================
   PROCESS SECTION
   ======================== */
/* Section bg override — uses navy-mid */
.wd-process-section {
    background: var(--navy-mid);
}

/* Step number label (e.g. "01") */
.wd-step-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Step emoji */
.wd-step-emoji {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Step title */
.wd-step-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
}

/* ========================
   PRICING SECTION
   ======================== */
/* Section bg override — uses navy-mid */
.wd-pricing-section {
    background: var(--navy-mid);
}

/* Responsive 3-column grid for pricing cards */
.services-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Pricing card inner padding + relative for "MOST POPULAR" badge */
.wd-pricing-card-inner {
    padding: 24px;
    position: relative;
}

/* "MOST POPULAR" top badge */
.wd-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--sky), var(--orange));
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Badge label above card title (e.g. "SMALL BUSINESS") */
.wd-card-badge-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Card main title */
.wd-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

/* Currency symbol beside price */
.wd-price-currency {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Price amount — featured uses sky colour, others white */
.wd-price-amount {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

.wd-price-amount.sky {
    color: var(--sky);
}

.wd-price-amount.white {
    color: var(--white);
}

/* Price period suffix (e.g. "/ project") */
.wd-price-suffix {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: block;
}

/* Short description under price */
.wd-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* Section category label inside card (e.g. "WHAT YOU GET") */
.pkg-category {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sky);
    margin: 14px 0 6px 0;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 4px;
}

/* Bullet list inside pricing card */
.pkg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkg-list li {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pkg-list li i {
    font-size: 0.6rem;
    color: var(--sky);
    margin-top: 4px;
}

/* Pricing CTA button override — smaller padding */
.wd-pkg-btn {
    padding: 10px;
    font-size: 0.85rem;
}

/* ========================
   MAINTENANCE & SUPPORT TIERS
   ======================== */
/* Card container for each support plan */
.wd-support-card {
    height: 100%;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
}

/* Featured support card glow */
.wd-support-card.featured {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.15);
}

/* "Most Popular" label inside support card */
.wd-support-popular {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Plan name heading */
.wd-support-card h4 {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
}

/* Plan price amount */
.wd-support-price {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.wd-support-price.sky {
    color: var(--sky);
}

.wd-support-price.orange {
    color: var(--orange);
}

/* Plan period suffix (e.g. "/ month") */
.wd-support-period {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-bottom: 4px;
}

/* Plan feature list */
.wd-support-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wd-support-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Check icon inside support list */
.wd-support-check {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.wd-support-check.sky {
    color: var(--sky);
}

.wd-support-check.orange {
    color: var(--orange);
}

/* Button inside support card */
.wd-support-btn {
    padding: 10px;
    font-size: 0.85rem;
}

/* ========================
   WHY US SECTION
   ======================== */
/* Section bg override — uses navy-mid */
.wd-why-section {
    background: var(--navy-mid);
}

/* Card wrapper in why-us grid */
.wd-why-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    height: 100%;
}

/* Icon box inside why-us card */
.wd-why-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(0, 183, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sky);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Why-us card heading */
.wd-why-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

/* Why-us card description */
.wd-why-card p {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ========================
   FAQ SECTION
   ======================== */
/* Outer FAQ item box */
.faq-item {
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--card-bg);
}

/* Clickable question row */
.faq-question {
    cursor: pointer;
    gap: 12px;
}

/* Question text */
.wd-faq-question-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
}

/* Toggle icon (+ / -) */
.wd-faq-icon {
    color: var(--sky);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Answer panel — collapsed by default; JS sets max-height */
.faq-answer {
    padding: 0 24px;
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

/* ========================
   CTA SECTION
   ======================== */
/* CTA section-tag: centered with bottom margin */
.wd-cta-tag {
    margin: 0 auto 20px;
}

/* CTA paragraph */
.wd-cta-desc {
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 auto 36px;
    line-height: 1.8;
}

/* ========================
   GLOBAL PADDING & MARGIN REDUCTION OVERRIDES
   ======================== */

/* Override custom section paddings globally */
.section { padding: 40px 0 !important; }
.page-hero { padding: 80px 0 30px !important; }
.hero { padding: 60px 0 20px !important; min-height: auto !important; }
.cta-section { padding: 40px 0 !important; }
.section-subtitle { margin-bottom: 30px !important; }

/* Override standard Bootstrap high-spacing utilities to make them tighter across all devices */
.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.pt-5 { padding-top: 2rem !important; }
.pb-5 { padding-bottom: 2rem !important; }

.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.mt-5 { margin-top: 2rem !important; }
.mb-5 { margin-bottom: 2rem !important; }

.py-4 { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
.pt-4 { padding-top: 1.2rem !important; }
.pb-4 { padding-bottom: 1.2rem !important; }

.mb-4 { margin-bottom: 1.2rem !important; }
.mt-4 { margin-top: 1.2rem !important; }

/* Further reduce on very small screens */
@media (max-width: 768px) {
    .section, .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .page-hero { padding: 60px 0 20px !important; }
    .hero { padding: 50px 0 20px !important; }
    .section-title { margin-bottom: 12px !important; font-size: 2.2rem !important; }
    .section-subtitle { margin-bottom: 20px !important; }
    
    /* Fix hero float badges visibility on mobile */
    .hfb-1 { left: 0px !important; top: -45px !important; transform: scale(0.85); }
    .hfb-2 { right: 0px !important; bottom: -25px !important; transform: scale(0.85); }
}