:root {
    /* Light Theme (Primary) */
    --bg-color: #FFFFFF;
    --surface-color: #F5F5F7;
    --surface-hover: #E5E7EB;
    --surface-border: rgba(0, 0, 0, 0.06);
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-border: rgba(255, 255, 255, 0.6);
    
    --text-primary: #111111;
    --text-secondary: #6B7280;
    --text-caption: #9CA3AF;
    
    /* Apple Blue Accent */
    --accent-color: #0071E3;
    --accent-hover: #0077ED;
    --accent-glow: rgba(0, 113, 227, 0.15);
    --accent-gradient: linear-gradient(135deg, #0071E3, #4CB3FF);
    
    --nav-bg: rgba(10, 25, 47, 0.95);
    --nav-border: rgba(0, 0, 0, 0.05);
    
    --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-medium: 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Dark Theme */
body.dark-mode {
    --bg-color: #111111;
    --surface-color: #0f172a;
    --surface-hover: #1e293b;
    --surface-border: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(15, 23, 42, 0.6);
    --card-border: rgba(255, 255, 255, 0.08);
    
    --text-primary: #FFFFFF;
    --text-secondary: #cbd5e1;
    --text-caption: #94a3b8;
    
    --accent-color: #00d9ff;
    --accent-hover: #7b2cff;
    --accent-glow: rgba(0, 217, 255, 0.25);
    --accent-gradient: linear-gradient(135deg, #00d9ff, #7b2cff);
    
    --nav-bg: rgba(17, 17, 17, 0.72);
    --nav-border: rgba(255, 255, 255, 0.1);
    
    --shadow-sm: 0 4px 12px rgba(0, 217, 255, 0.1);
    --shadow-md: 0 8px 24px rgba(123, 44, 255, 0.2);
    --shadow-lg: 0 16px 40px rgba(123, 44, 255, 0.3);
}

html {
    scroll-behavior: smooth;
}

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

body {
    font-family: 'Stack Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    background-image: radial-gradient(var(--surface-border) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: -15px -15px;
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-medium), color var(--transition-medium);
}



/* Typography */
h1, h2, h3, h4 {
    font-family: 'Stack Sans Text', sans-serif;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

p {
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

.link-arrow {
    color: var(--accent-color);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.05rem;
}

.link-arrow:hover {
    color: var(--accent-hover);
}

/* Utility */
.gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header.align-left {
    text-align: left;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.04em;
}

.section-header p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-secondary);
}

.section-header.align-left p {
    margin: 0;
}

/* Buttons */
.btn {
    font-family: 'Stack Sans Text', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border-radius: 980px; /* Apple-style pill button */
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.01em;
    transition: all var(--transition-medium);
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-primary {
    background: var(--accent-color);
    color: #FFFFFF;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: scale(1.02);
    box-shadow: 0 6px 20px var(--accent-glow);
    color: #FFFFFF;
}

.btn-secondary {
    background: var(--surface-color);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
}

.btn-secondary:hover {
    background: var(--surface-hover);
    transform: scale(1.02);
}

.btn-nav {
    padding: 0.5rem 1.25rem;
    background: var(--accent-color);
    color: #FFFFFF;
    font-size: 0.9rem;
}

.btn-nav:hover {
    background: var(--accent-hover);
    color: #FFFFFF;
    transform: scale(1.02);
}

body.dark-mode .btn-primary,
body.dark-mode .btn-nav {
    background: #792cff;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 1.25rem 0;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: all var(--transition-medium);
}

/* Light mode: always show navbar with dark blue, same size as scrolled state */
body:not(.dark-mode) .navbar {
    padding: 0.75rem 0;
    background: rgba(10, 25, 47, 0.97);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Light mode: fix text colors inside the dark navbar */
body:not(.dark-mode) .nav-links a {
    color: rgba(255, 255, 255, 0.7);
}

body:not(.dark-mode) .nav-links a:hover {
    color: #ffffff;
}

/* Light mode: blue glow on Contact Us button */
body:not(.dark-mode) .btn-nav {
    box-shadow: 0 0 18px rgba(0, 113, 227, 0.7), 0 4px 14px rgba(0, 113, 227, 0.4);
}

.navbar.scrolled {
    padding: 0.75rem 0;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--nav-border);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.logo img {
    height: 48px;
    margin-right: 8px;
    /* Soft shadow on logo to make it premium */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04));
    position: relative;
    z-index: 1;
}


.nav-links {
    display: flex;
    gap: 2.5rem; /* Apple menu spacing */
    list-style: none;
}

.nav-links a {
    font-family: 'Stack Sans Text', sans-serif;
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
    position: relative;
    padding-bottom: 4px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent-color);
    transition: width var(--transition-medium);
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 8rem 2rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero-content {
    flex: 1;
    max-width: 800px;
}

/* Hero Animations */
@keyframes rotateInTitle {
    0% { opacity: 0; transform: perspective(1000px) rotateX(60deg) translateY(80px) scale(0.9); }
    100% { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1); }
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}


.hero-kicker {
    font-size: 0.65rem;
    color: #a0aabf;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform-origin: bottom center;
    animation: rotateInTitle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
    font-size: 5.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    letter-spacing: -0.05em;
    line-height: 1.05;
    opacity: 0;
    transform-origin: bottom center;
    animation: rotateInTitle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-subtitle {
    font-size: 1.35rem;
    margin: 0 auto 2.5rem;
    max-width: 650px;
    color: var(--text-secondary);
    font-weight: 400;
    opacity: 0;
    animation: popIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

/* Scroll Animations */
.animate-flip {
    opacity: 0;
    transform: perspective(1000px) rotateY(45deg);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-pop {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    opacity: 0;
    animation: popIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

/* Neon Orbs Background */
.hero-bg-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.6;
    animation: drift 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .orb {
    opacity: 0.8;
}

.orb-1 {
    width: 45vw;
    height: 45vw;
    background: #ff007f; /* Vibrant Neon Pink */
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 50vw;
    height: 50vw;
    background: #00d9ff; /* Vibrant Neon Cyan */
    bottom: -20%;
    right: -10%;
    animation-delay: -5s;
    animation-duration: 25s;
}

.orb-3 {
    width: 35vw;
    height: 35vw;
    background: #7b2cff; /* Vibrant Neon Purple */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
    animation-duration: 30s;
}

@keyframes drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10%, 10%) scale(1.1); }
    66% { transform: translate(-5%, 15%) scale(0.9); }
    100% { transform: translate(-10%, -5%) scale(1.05); }
}

/* Marquee / Clients */
.clients {
    padding: 4rem 0;
    border-top: 1px solid var(--surface-border);
    border-bottom: 1px solid var(--surface-border);
    background: var(--surface-color);
    overflow: hidden;
}

.section-label {
    text-align: center;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 2rem;
    color: var(--text-caption);
    font-weight: 600;
}

.marquee {
    display: flex;
    white-space: nowrap;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
}

.marquee-content span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-caption);
    margin: 0 4rem;
    transition: color var(--transition-medium);
    letter-spacing: -0.02em;
}

.marquee-content span:hover {
    color: var(--text-primary);
}

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

/* Common Section Padding */
section {
    padding: 8rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* About Section */
.about-container {
    display: flex;
    gap: 6rem;
    align-items: center;
}

.about-text {
    flex: 1;
}

.about-description {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.about-stats {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.stat-box {
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 2.5rem 2rem;
    border-radius: 24px;
    border: 1px solid transparent;
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.stat-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Light mode: richer layered shadow */
body:not(.dark-mode) .stat-box {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.10),
        0 24px 48px rgba(0, 113, 227, 0.07);
}

body:not(.dark-mode) .stat-box:hover {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10),
        0 20px 48px rgba(0, 0, 0, 0.12),
        0 32px 64px rgba(0, 113, 227, 0.12);
}

/* Dark mode: vivid neon accent glow */
body.dark-mode .stat-box {
    box-shadow:
        0 0 20px rgba(0, 217, 255, 0.12),
        0 8px 32px rgba(123, 44, 255, 0.20),
        0 16px 48px rgba(0, 0, 0, 0.40);
}

body.dark-mode .stat-box:hover {
    box-shadow:
        0 0 32px rgba(0, 217, 255, 0.25),
        0 12px 40px rgba(123, 44, 255, 0.35),
        0 24px 60px rgba(0, 0, 0, 0.50);
}

.stat-box h3 {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    letter-spacing: -0.05em;
}

.stat-box p {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Vision & Mission Section */
.vision-mission-wrapper {
    margin-top: 4rem;
    text-align: center;
    width: 100%;
}

.vision-mission-content {
    margin-top: 2rem;
    max-height: 5000px; /* enough to show all content including core values on mobile */
    opacity: 1;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

.vision-mission-content.hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.vision-card, .mission-card {
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--transition-medium);
}

body:not(.dark-mode) .vision-card,
body:not(.dark-mode) .mission-card {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.05) 0%, rgba(76, 179, 255, 0.05) 100%);
}

.vision-card:hover, .mission-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.vision-card h3, .mission-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
}

.commitments-section {
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.commitments-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.commitments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.commitment-box {
    background: var(--surface-color); /* Light gray in light mode, dark in dark mode */
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
    display: flex;
    align-items: center;
}

body:not(.dark-mode) .commitment-box {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.05) 0%, rgba(76, 179, 255, 0.05) 100%);
    border-color: rgba(0, 113, 227, 0.1);
}

.commitment-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.commitment-box p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Animated Glow Button (Running Light) */
.animated-glow-btn {
    position: relative;
    padding: 1rem 2.5rem; /* Larger padding */
    font-size: 1.1rem;    /* Larger text */
    overflow: hidden;
    z-index: 1;
    border: 1px solid transparent;
}

.animated-glow-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    /* Light mode: Glowing Blue running light */
    background: conic-gradient(from 0deg, transparent 0%, transparent 60%, rgba(0, 113, 227, 0.9) 80%, rgba(0, 113, 227, 1) 100%);
    z-index: -2;
    animation: rotateGlow 2.5s linear infinite;
    opacity: 1;
}

body.dark-mode .animated-glow-btn::before {
    /* Dark mode: Neon Cyan running light */
    background: conic-gradient(from 0deg, transparent 0%, transparent 60%, rgba(0, 217, 255, 0.9) 80%, rgba(0, 217, 255, 1) 100%);
}

.animated-glow-btn::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--surface-color); /* Inner background to cover glow, matches surface */
    border-radius: inherit;
    z-index: -1;
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

.service-card {
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 3rem 2.5rem;
    transition: all var(--transition-medium);
    box-shadow: var(--shadow-md), 0 10px 25px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

body:not(.dark-mode) .service-card {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.05) 0%, rgba(76, 179, 255, 0.05) 100%);
}

/* Soft reflective gradient on cards */
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.5;
    pointer-events: none;
}

body.dark-mode .service-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

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

.service-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: var(--accent-glow);
    border-radius: 16px;
}

.service-card h3 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.service-card p {
    font-size: 1rem;
}

/* Portfolio Section */
.portfolio-slider-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: 2rem 0 4rem;
    position: relative;
}

/* Fading edges for marquee */
.portfolio-slider-container::before,
.portfolio-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15vw;
    z-index: 2;
    pointer-events: none;
}
.portfolio-slider-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color) 0%, transparent 100%);
}
.portfolio-slider-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color) 0%, transparent 100%);
}

.portfolio-slider {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scrollMarquee 50s linear infinite;
    padding: 0 2rem;
}

.portfolio-slider:hover {
    animation-play-state: paused;
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 320px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
}

.portfolio-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.portfolio-image {
    flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--surface-border);
}

.web-mockup {
    background-color: #0071E3;
    background-image: linear-gradient(135deg, rgba(0,113,227,0.8), rgba(0,217,255,0.8));
}
.web-mockup-2 {
    background-color: #7b2cff;
    background-image: linear-gradient(135deg, rgba(123,44,255,0.8), rgba(255,0,127,0.8));
}
.poster-mockup {
    background-color: #ff007f;
    background-image: linear-gradient(135deg, rgba(255,0,127,0.8), rgba(255,165,0,0.8));
}
.video-mockup {
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    padding-left: 5px; /* Visual center for play button */
    border: 1px solid rgba(255,255,255,0.3);
}

.portfolio-info {
    padding: 1.5rem;
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
}

.portfolio-info h4 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.portfolio-info span {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Play icon for video portfolio card */
.play-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #111;
    padding-left: 5px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}
.portfolio-item:hover .play-icon {
    transform: scale(1.15);
}

/* Placeholder gradient for cards without images yet */
.portfolio-placeholder {
    background-size: cover !important;
    background-position: center !important;
}

/* Hide Contact button in desktop nav */
.nav-contact-mobile {
    display: none;
}
@media (max-width: 900px) {
    .nav-contact-mobile {
        display: list-item;
    }
}

@media (max-width: 900px) {
    .portfolio-item {
        width: 300px;
        height: 260px;
    }
}

/* Portfolio Page Styles */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 3rem;
}

.portfolio-grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: start;
}

.portfolio-item-lg, .portfolio-item-sm {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    text-decoration: none;
}

.portfolio-item-lg {
    height: 400px;
}

.portfolio-item-sm {
    height: 350px;
}

.portfolio-item-lg:hover, .portfolio-item-sm:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    .portfolio-item-lg {
        height: 350px;
    }
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.testimonial-card {
    background: var(--surface-color);
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    transition: transform var(--transition-medium);
}

/* =============================================
   Frosted Glass Border — ::before mask trick
   Works on all rounded cards without clipping.
   ============================================= */
.stat-box::before,
.service-card::before,
.testimonial-card::before,
.vision-card::before,
.mission-card::before,
.commitments-section::before,
.commitment-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* Light mode: blue-silver frosted shimmer */
    background: linear-gradient(
        135deg,
        rgba(0, 113, 227, 0.55) 0%,
        rgba(255, 255, 255, 0.70) 35%,
        rgba(76, 179, 255, 0.20) 60%,
        rgba(0, 113, 227, 0.40) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    transition: background var(--transition-medium), opacity var(--transition-medium);
}

/* Dark mode: cyan → purple neon gradient border */
body.dark-mode .stat-box::before,
body.dark-mode .service-card::before,
body.dark-mode .testimonial-card::before,
body.dark-mode .vision-card::before,
body.dark-mode .mission-card::before,
body.dark-mode .commitments-section::before,
body.dark-mode .commitment-box::before {
    background: linear-gradient(
        135deg,
        rgba(0, 217, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(123, 44, 255, 0.40) 100%
    );
}

/* Intensify glass border on hover */
.stat-box:hover::before,
.service-card:hover::before,
.testimonial-card:hover::before,
.vision-card:hover::before,
.mission-card:hover::before,
.commitment-box:hover::before {
    opacity: 1.5;
}

body.dark-mode .stat-box:hover::before,
body.dark-mode .service-card:hover::before,
body.dark-mode .testimonial-card:hover::before,
body.dark-mode .vision-card:hover::before,
body.dark-mode .mission-card:hover::before,
body.dark-mode .commitment-box:hover::before {
    background: linear-gradient(
        135deg,
        rgba(0, 217, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(123, 44, 255, 0.60) 100%
    );
}

.testimonial-card:hover {
    transform: translateY(-4px);
}

.stars {
    color: #fbbf24;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}

.quote {
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0 auto 2.5rem;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.client-avatar {
    width: 56px;
    height: 56px;
    background: var(--accent-gradient);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 500;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.client-info h4 {
    font-size: 1.05rem;
    margin: 0;
    font-weight: 600;
}

.client-info p {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-secondary);
}

/* Blog Section */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.blog-card {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--surface-border);
    background: var(--card-bg);
    transition: all var(--transition-medium);
    box-shadow: var(--shadow-sm);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.blog-image {
    width: 100%;
    height: 240px;
    background: var(--surface-hover);
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 1px solid var(--surface-border);
}

.blog-card:nth-child(1) .blog-image { background: linear-gradient(135deg, #e0f2fe, #bae6fd); }
.blog-card:nth-child(2) .blog-image { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); }
.blog-card:nth-child(3) .blog-image { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }

body.dark-mode .blog-card:nth-child(1) .blog-image { background: linear-gradient(135deg, #0369a1, #0c4a6e); }
body.dark-mode .blog-card:nth-child(2) .blog-image { background: linear-gradient(135deg, #6b21a8, #4c1d95); }
body.dark-mode .blog-card:nth-child(3) .blog-image { background: linear-gradient(135deg, #15803d, #14532d); }

.blog-content {
    padding: 2.5rem;
}

.blog-category {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--accent-color);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
}

.blog-card h3 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

/* Contact Section */
.contact-section {
    padding: 8rem 2rem;
    background: var(--surface-color);
    border-top: 1px solid var(--surface-border);
    max-width: 100%;
}

.contact-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 0; /* Apple style unified card */
    background: var(--bg-color);
    border-radius: 32px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.contact-info {
    flex: 1;
    padding: 4rem;
    background: var(--accent-gradient);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.contact-info h2, .contact-info p {
    color: #FFFFFF;
    position: relative;
    z-index: 2;
}

.contact-info h2 {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.03em;
}

.contact-details {
    margin-top: 4rem;
    position: relative;
    z-index: 2;
}

.contact-details p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
    font-size: 1.05rem;
}

.contact-form {
    flex: 1.2;
    padding: 4rem;
}

.form-group {
    margin-bottom: 1.75rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all var(--transition-medium);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    background: var(--bg-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Service Dropdown Select */
.form-select {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid var(--surface-border);
    border-radius: 16px;
    background: var(--surface-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all var(--transition-medium);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    padding-right: 3rem;
}

.form-select:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: var(--bg-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

/* Force options to always be readable in all browsers & themes */
.form-select option {
    background-color: #1a1a2e;
    color: #ffffff;
    padding: 0.5rem;
}

[data-theme="light"] .form-select option,
body:not(.dark-mode) .form-select option {
    background-color: #ffffff;
    color: #111111;
}

/* Footer */
footer {
    border-top: 1px solid var(--surface-border);
    padding: 6rem 2rem 3rem;
    background: var(--bg-color);
}

/* Light mode: match footer to navbar dark blue */
body:not(.dark-mode) footer {
    background: rgba(10, 25, 47, 0.97);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body:not(.dark-mode) footer p,
body:not(.dark-mode) .footer-brand p,
body:not(.dark-mode) .link-column a,
body:not(.dark-mode) .footer-bottom {
    color: rgba(255, 255, 255, 0.6);
}

body:not(.dark-mode) .link-column h4 {
    color: #ffffff;
}

body:not(.dark-mode) .footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 5rem;
}

.footer-brand .logo {
    margin-bottom: 1rem;
}

.footer-brand .logo img {
    height: 80px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.04));
}

.footer-brand p {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    gap: 6rem;
}

.link-column h4 {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.link-column a {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.link-column a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid var(--surface-border);
    padding-top: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-caption);
}

/* Custom Theme Switcher Styles */
.theme-controls {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
    display: flex;
    gap: 0.5rem;
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 0.5rem;
    border-radius: 980px;
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-lg), 0 10px 25px rgba(0,0,0,0.1);
}

.theme-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.theme-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.theme-btn.active {
    background: var(--surface-color);
    color: var(--accent-color);
    box-shadow: var(--shadow-md), 0 4px 15px rgba(0,0,0,0.15);
}

.theme-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Theme Toggle */
.nav-actions {
    display: flex;
    align-items: center;
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin-right: 1rem;
    transition: color var(--transition-fast);
}

.theme-toggle:hover {
    color: var(--accent-color);
}

[data-theme="dark"] {
    --bg-color: #050505;
    --surface-color: #111111;
    --surface-hover: #1c1c1c;
    --surface-border: rgba(255, 255, 255, 0.08);
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --nav-bg: rgba(5, 5, 5, 0.85);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .contact-container,
[data-theme="dark"] .vision-card,
[data-theme="dark"] .mission-card,
[data-theme="dark"] .commitments-section,
[data-theme="dark"] .commitment-box,
[data-theme="dark"] footer,
[data-theme="dark"] .contact-section {
    background-color: var(--surface-color);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .blog-card {
    background-color: var(--surface-hover);
}

[data-theme="dark"] .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--surface-border);
}

[data-theme="dark"] .blog-image {
    background: #2a2a2a; /* Neutral dark for blog image placeholders */
}

/* Responsive */
@media (max-width: 900px) {
    .hero, .about-container, .contact-container {
        flex-direction: column;
    }
    
    .hero {
        padding-top: 8rem;
        text-align: center;
        gap: 3rem;
    }
    
    
.hero-kicker {
    font-size: 0.65rem;
    color: #a0aabf;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform-origin: bottom center;
    animation: rotateInTitle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        margin: 0 auto 2.5rem;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .nav-links {
        display: none;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 3rem;
    }
    
    .footer-links {
        gap: 3rem;
        flex-wrap: wrap;
    }

    .section-header.align-left {
        text-align: center;
    }
    
    .contact-container {
        border-radius: 24px;
        flex-direction: column;
    }
    
    .contact-info, .contact-form {
        padding: 3rem 2rem;
    }
    
    .about-stats {
        width: 100%;
    }
    
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }
}

/* Pricing Modal & Cards */
.btn-pricing {
    width: 100%;
    margin-top: 1.5rem;
}

.pricing-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.pricing-modal.active {
    display: flex;
}

.pricing-popup {
    width: 94%;
    max-width: 1450px;
    background: var(--card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--surface-border);
    border-radius: 25px;
    padding: 3rem;
    position: relative;
    animation: popup 0.35s ease;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes popup {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pricing-close {
    position: absolute;
    right: 25px;
    top: 18px;
    font-size: 36px;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.3s;
}

.pricing-close:hover {
    color: var(--accent-color);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 35px;
}

.pricing-plan-card {
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    display: flex;
    flex-direction: column;
}

.pricing-plan-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.pricing-plan-card.popular {
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

body:not(.dark-mode) .pricing-plan-card.popular {
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.2);
}

.plan-ribbon {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: #fff;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.plan-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.plan-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.plan-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.plan-features li:last-child {
    border: none;
}

.feature-check {
    color: var(--accent-color);
    font-weight: bold;
}

.plan-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
    border-top: 1px solid var(--surface-border);
}

.pricing-plan-card .btn {
    margin-top: 1.5rem;
    width: 100%;
}

/* Hamburger Menu & Mobile Resizing */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    width: 28px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
}

@media (max-width: 900px) {
    .hamburger {
        display: flex;
    }
    .nav-links {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -280px;
        width: 260px;
        height: 100vh;
        background: var(--surface-color);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--surface-border);
        padding: 5rem 2rem 2rem;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        align-items: flex-start;
        gap: 0.5rem;
        box-shadow: -8px 0 32px rgba(0,0,0,0.15);
    }
    .nav-links li {
        width: 100%;
    }
    .nav-links li a {
        display: block;
        padding: 0.85rem 1rem;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 500;
        transition: background 0.2s;
    }
    .nav-links li a:hover {
        background: var(--surface-hover);
    }
    .nav-links.active {
        right: 0;
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-actions { display: none; }
}

@media (max-width: 768px) {
    
}

/* Custom Success Modal */
.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.success-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.success-modal-content {
    background: #0f121d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px 30px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(121, 44, 255, 0.15);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-modal-overlay.active .success-modal-content {
    transform: scale(1);
}

.success-icon {
    font-size: 50px;
    color: #00d26a;
    margin-bottom: 15px;
    font-weight: bold;
    display: inline-block;
}

.success-title {
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 10px;
}

.success-message {
    font-size: 15px;
    color: #a0a5b5;
    margin-bottom: 30px;
}

.success-home-btn {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: linear-gradient(135deg, #792cff, #a260ff);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(121, 44, 255, 0.4);
}

.success-home-btn:hover {
    box-shadow: 0 6px 20px rgba(121, 44, 255, 0.6);
    transform: translateY(-2px);
}


/* Advanced Hero Typography Media Queries */
@media (max-width: 900px) {
    .hero-kicker {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }
    .hero-title {
        font-size: 3.5rem;
    }
    .hero-subtitle {
        font-size: 1.15rem;
        margin-bottom: 2rem;
    }
}


/* Refined Mobile Layouts for iPhone 16 Pro and all mobiles */
@media (max-width: 480px) {
    .hero {
        padding-top: calc(6rem + env(safe-area-inset-top));
        padding-left: 20px;
        padding-right: 20px;
    }
    .hero-kicker {
        font-size: 0.6rem;
        letter-spacing: 2.5px;
        margin-bottom: 0.8rem;
    }
    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 1.2rem;
        line-height: 1.15;
    }
    .hero-subtitle {
        font-size: 1.05rem;
        margin-bottom: 2rem;
        line-height: 1.6;
        padding: 0 10px;
    }
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 12px;
        padding: 0 20px;
    }
    .hero-actions .btn {
        width: 100%;
        font-size: 1.05rem;
        padding: 1rem 1.8rem;
    }
}

@media (max-width: 395px) {
    .hero-title {
        font-size: 2.3rem;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        padding: 0 5px;
    }
    .hero-actions {
        padding: 0 5px;
    }
}

/* --- Hero Subtitle Performance Text --- */
.performance-text {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .br-desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .br-all {
        display: none;
    }
}
/* -------------------------------------- */

/* --- Responsive Punchy Orbs --- */
@media (max-width: 1024px) {
    .orb-1 { width: 60vw; height: 60vw; }
    .orb-2 { width: 70vw; height: 70vw; }
    .orb-3 { width: 50vw; height: 50vw; }
    .orb { filter: blur(90px); opacity: 0.7; }
    body.dark-mode .orb { opacity: 0.9; }
}

@media (max-width: 768px) {
    .orb-1 { width: 80vw; height: 80vw; top: -5%; left: -20%; }
    .orb-2 { width: 90vw; height: 90vw; bottom: -10%; right: -20%; }
    .orb-3 { width: 70vw; height: 70vw; }
    .orb { filter: blur(70px); opacity: 0.8; }
    body.dark-mode .orb { opacity: 1; }
}

@media (max-width: 480px) {
    .orb-1 { width: 350px; height: 350px; }
    .orb-2 { width: 400px; height: 400px; }
    .orb-3 { width: 300px; height: 300px; }
    .orb { filter: blur(55px); opacity: 0.9; }
    body.dark-mode .orb { opacity: 1; }
}
/* ------------------------------ */

/* --- Move Hero Content Up on Mobile --- */
@media (max-width: 900px) {
    .hero-content {
        transform: translateY(-10vh) !important;
    }
}
/* -------------------------------------- */

/* --- UI Polish Session Updates --- */
@media (max-width: 900px) {
    /* Centralize hero content again */
    .hero-content { transform: none !important; }
}

@media (max-width: 768px) {
    /* Nav Adjustments */
    .nav-container .logo img { max-width: 140px !important; }
    
    /* Hero Typography */
    .hero { padding-top: 6rem !important; padding-bottom: 2rem !important; min-height: 80vh !important; }
    
    
    
    /* Global Typography */
    
    
    
    /* Section Spacing */
    
    .clients, .contact-section { padding: 3rem 1.5rem !important; }
    
    /* Trusted Brands Adjustments */
    .section-label { font-size: 0.8rem !important; margin-bottom: 1rem !important; }
    .marquee-content span { font-size: 1.2rem !important; margin: 0 1rem !important; }
    
    /* About Stats Grid Overlap Fix */
    .stat-box { padding: 1.5rem 0.5rem !important; border-radius: 16px !important; }
    .stat-box h3 { font-size: 2rem !important; margin-bottom: 0.2rem !important; }
    .stat-box p { font-size: 0.75rem !important; line-height: 1.2 !important; }
    .about-stats { gap: 0.5rem !important; }
    
    /* Contact Form Adjustments */
    .contact-info, .contact-form { padding: 1.5rem !important; }
    .form-group { margin-bottom: 1rem !important; }
    .contact-container { border-radius: 16px !important; }
    .contact-info h2 { margin-bottom: 1rem !important; }
    

    
}
/* --------------------------------- */
/* --- UI Polish Session Updates 2 --- */
@media (max-width: 768px) {
    /* Vision & Mission Cards Overflow Fix */
    .vision-mission-grid { gap: 1rem !important; }
    .vision-card, .mission-card { padding: 1.5rem !important; border-radius: 16px !important; }
    
    
    
    /* Contact Section Spacing Fix */
    .contact-info > p { margin-bottom: 0.5rem !important; }
    .contact-details p { margin-bottom: 0.25rem !important; }
    
    /* Perfectly Balanced Animation Flow */
    /* Remove staggered delays on mobile to prevent 'laggy' waterfall effect */
    .reveal, .fade-in, .animate-up, .animate-scale, .animate-right, .animate-flip, .animate-pop {
        transition-delay: 0s !important;
        transition-duration: 0.5s !important;
    }
}
/* ----------------------------------- */
/* --- UI Polish Session Updates 3 --- */
@media (max-width: 768px) {
    /* Perfectly Uniform Section Spacing */
    section, .clients, .contact-section { padding: 3rem 1.5rem !important; }
    .vision-mission-wrapper { margin-top: 2rem !important; }
    
    /* Hardware Acceleration to Fix Mosaic/Pixelation */
    .reveal, .fade-in, .animate-up, .animate-scale, .animate-right, .animate-flip, .animate-pop,
    .stat-box, .service-card, .testimonial-card, .vision-card, .mission-card, .commitment-box,
    .orb {
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    
    /* Smoother, Fluffy Hero Animation (No heavy 3D math on mobile) */
    @keyframes fluffyUp {
        0% { opacity: 0; transform: translateY(30px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .hero-kicker, .hero-title, .hero-subtitle {
        animation-name: fluffyUp !important;
        animation-duration: 1.2s !important;
        will-change: transform, opacity;
    }
}
/* ----------------------------------- */
/* --- Mobile Footer Logo & Caption Polish --- */
@media (max-width: 768px) {
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important; /* Ensure strict left alignment */
    }
    .footer-brand .logo img {
        height: 100px !important; /* Noticeably increase logo size */
        margin-left: -5px !important; /* Optically align the SVG graphic with the text below it */
    }
    .footer-brand p {
        font-size: 1rem !important; /* Slightly larger to balance the large logo */
        max-width: 180px !important; /* Wrap the text cleanly so it stays the same width as the logo */
        margin-top: 0.5rem !important;
        text-align: left !important;
    }
}
/* ------------------------------------------- */
/* --- Ultimate Footer Polish --- */
@media (max-width: 768px) {
    .footer-brand .logo img {
        height: auto !important; /* Remove the aggressive 100px height override */
        width: 180px !important; /* Set a perfectly balanced responsive width */
        max-width: 100% !important;
    }
}
/* ------------------------------ */
/* --- Mobile Contact Details Gap Fix --- */
@media (max-width: 768px) {
    .contact-details {
        margin-top: 1.5rem !important; /* Drastically reduce the 4rem gap */
    }
}
/* -------------------------------------- */
/* --- Mobile Contact Details Font Size Fix --- */
@media (max-width: 768px) {
    .contact-details p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    .contact-details a {
        font-size: 0.85rem !important;
    }
    .contact-details strong {
        font-size: 0.9rem !important;
    }
}
/* ------------------------------------------- */
/* --- Mobile Section Header Font Size Fix --- */
@media (max-width: 768px) {
    .section-header h2 {
        font-size: 2.6rem !important; /* Scale down from 3rem */
        margin-bottom: 0.8rem !important;
    }
    .section-header p {
        font-size: 0.85rem !important; /* Scale down from 1.25rem */
    }
}
/* ------------------------------------------- */


/* =========================================================
   ADWEX MOBILE PERFORMANCE PATCH
   Keeps the desktop visual design, but removes expensive
   compositor effects on touch/mobile devices.
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    html {
        scroll-behavior: auto;
    }

    body {
        /* background-attachment:fixed triggers full-page repaint/raster work
           on several Android/Chrome GPUs while the page is scrolling. */
        background-attachment: scroll !important;
        touch-action: pan-y;
    }

    /* Replace three huge blurred animated layers with the same visual idea
       rendered as one static gradient. */
    .hero-bg-orbs {
        background:
            radial-gradient(circle at 10% 18%, rgba(255, 0, 127, 0.44) 0, rgba(255, 0, 127, 0.18) 24%, transparent 48%),
            radial-gradient(circle at 86% 24%, rgba(0, 217, 255, 0.42) 0, rgba(0, 217, 255, 0.16) 26%, transparent 50%),
            radial-gradient(circle at 58% 82%, rgba(123, 44, 255, 0.42) 0, rgba(123, 44, 255, 0.15) 25%, transparent 50%);
    }

    .orb {
        display: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
        translate: 0 0 !important;
        will-change: auto !important;
    }

    /* Blur/backdrop-filter is one of the main causes of mobile tile/raster
       artifacts when combined with fixed/sticky and transformed layers. */
    .navbar,
    .navbar.scrolled,
    body:not(.dark-mode) .navbar,
    .stat-box,
    .vision-card,
    .mission-card,
    .commitments-section,
    .service-card,
    .play-icon,
    .portfolio-info,
    .theme-controls,
    .pricing-modal,
    .pricing-popup,
    .nav-links,
    .success-modal-overlay,
    .hero-actions .btn-secondary {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .navbar,
    .navbar.scrolled,
    body:not(.dark-mode) .navbar {
        background: rgba(5, 5, 5, 0.97) !important;
    }

    .nav-links,
    .theme-controls,
    .pricing-popup {
        background: #111111 !important;
    }

    .stat-box,
    .vision-card,
    .mission-card,
    .commitments-section,
    .service-card,
    .portfolio-info {
        background-color: var(--surface-color) !important;
    }

    /* Avoid creating dozens of permanent GPU layers. The previous mobile
       will-change rule increased memory pressure and caused black mosaic tiles. */
    .reveal,
    .fade-in,
    .animate-up,
    .animate-scale,
    .animate-right,
    .animate-flip,
    .animate-pop,
    .stat-box,
    .service-card,
    .testimonial-card,
    .vision-card,
    .mission-card,
    .commitment-box,
    .hero-kicker,
    .hero-title,
    .hero-subtitle {
        will-change: auto !important;
        -webkit-backface-visibility: visible !important;
        backface-visibility: visible !important;
    }

    /* Touch devices do not need hover lift/scale layers. */
    .service-card:hover,
    .stat-box:hover,
    .testimonial-card:hover,
    .blog-card:hover,
    .portfolio-item:hover,
    .commitment-box:hover,
    .pricing-plan-card:hover,
    .vision-card:hover,
    .mission-card:hover {
        transform: none !important;
    }

    /* Infinite decorative effects keep the compositor busy even while the
       user is vertically scrolling. On mobile, portfolio becomes swipeable. */
    .animated-glow-btn::before {
        animation: none !important;
    }

    /* Keep the Our Works marquee alive on phones. This is a single
       compositor-friendly transform animation and is far cheaper than the
       blurred/orb effects that were disabled for mobile performance. */
    .portfolio-slider-container {
        overflow: hidden !important;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        contain: paint;
    }
    .portfolio-slider-container::-webkit-scrollbar {
        display: none;
    }
    .portfolio-slider-container::before,
    .portfolio-slider-container::after {
        display: none !important;
    }
    .portfolio-slider {
        animation: mobilePortfolioMarquee 55s linear infinite !important;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    @keyframes mobilePortfolioMarquee {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-50%, 0, 0); }
    }

    /* A simple 2D entrance is cheaper than perspective/3D transforms. */
    .animate-flip,
    .animate-scale,
    .animate-pop,
    .animate-right,
    .animate-up {
        transform-style: flat !important;
        perspective: none !important;
    }
}

/* Respect accessibility and also provide a guaranteed low-cost rendering path. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .orb { display: none !important; }
}

/* =========================================================
   ADWEX SELECTIVE MOBILE GLASS RESTORE + NAV LOGO CONSISTENCY
   Restores glass ONLY for the main navigation and theme switcher.
   Heavy content cards, Vision/Mission, pricing modal and other
   mobile compositor optimizations remain untouched.
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    /* Main navigation: restore the premium frosted-glass appearance. */
    .navbar,
    .navbar.scrolled,
    body:not(.dark-mode) .navbar {
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .navbar,
    body.dark-mode .navbar.scrolled {
        background: rgba(17, 17, 17, 0.72) !important;
    }

    body:not(.dark-mode) .navbar,
    body:not(.dark-mode) .navbar.scrolled {
        background: rgba(10, 25, 47, 0.78) !important;
    }

    /* Theme switcher: restore its original compact glass capsule only. */
    .theme-controls {
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        background: rgba(17, 17, 17, 0.70) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    body:not(.dark-mode) .theme-controls {
        background: rgba(255, 255, 255, 0.72) !important;
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* Keep the header logo identical on Home, Insights and Blog pages. */
    .navbar .nav-container .logo img {
        width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        max-height: 48px !important;
        object-fit: contain !important;
        margin-right: 8px !important;
    }
}

/* =========================================================
   ADWEX UNIVERSAL MOBILE RESPONSIVE PASS — 2026-09-20
   Brand-agnostic: targets CSS viewport width, not phone model.
   Covers compact phones, standard phones, large phones,
   landscape phones and small tablets without restoring the
   expensive content blurs/orbs removed by the performance fix.
   ========================================================= */

/* Mobile navigation geometry: fluid instead of one fixed 140px logo. */
@media (max-width: 900px) {
    .navbar,
    .navbar.scrolled,
    body:not(.dark-mode) .navbar {
        padding: 0.65rem 0 !important;
    }

    .navbar .nav-container {
        width: 100%;
        max-width: 100%;
        min-height: 56px;
        padding-left: clamp(14px, 4vw, 28px) !important;
        padding-right: clamp(14px, 4vw, 28px) !important;
        gap: 12px;
        justify-content: space-between;
    }

    .navbar .logo {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 58px);
        overflow: visible;
    }

    .navbar .nav-container .logo img {
        width: clamp(112px, 34vw, 140px) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain !important;
        object-position: left center !important;
        margin: 0 !important;
    }

    .navbar .nav-actions {
        display: none !important;
    }

    .navbar .hamburger {
        display: flex !important;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        margin-left: auto;
        padding: 8px;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border-radius: 12px;
        touch-action: manipulation;
    }

    .navbar .hamburger span {
        width: 26px;
        flex: 0 0 2px;
    }

    .navbar .nav-links {
        width: min(82vw, 280px) !important;
        right: -100vw;
        height: 100vh;
        height: 100dvh;
        padding: max(5rem, calc(env(safe-area-inset-top) + 4.5rem)) 1.25rem 2rem !important;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar .nav-links.active {
        right: 0;
    }

    body.mobile-nav-open {
        overflow: hidden;
    }
}

/* Standard and compact phones. */
@media (max-width: 480px) {
    .navbar .nav-container {
        min-height: 52px;
        padding-left: clamp(12px, 4vw, 18px) !important;
        padding-right: clamp(12px, 4vw, 18px) !important;
        gap: 8px;
    }

    .navbar .nav-container .logo img {
        width: clamp(106px, 35vw, 128px) !important;
        max-height: 38px !important;
    }

    .navbar .hamburger {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        padding: 8px;
    }

    .navbar .hamburger span {
        width: 25px;
    }
}

/* Very narrow devices (roughly 320–359 CSS px). */
@media (max-width: 359px) {
    .navbar .nav-container {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .navbar .nav-container .logo img {
        width: clamp(102px, 34vw, 116px) !important;
        max-height: 35px !important;
    }

    .navbar .hamburger {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

/* Insights listing page: remove the desktop-only stacked top spacing and
   make the grid/card dimensions safe down to 320 CSS px. The body class is
   added by main.js only on insights.html, so the home page is unaffected. */
@media (max-width: 900px) {
    body.insights-mobile-page > div[style*="padding-top"] {
        padding-top: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    body.insights-mobile-page .blog#blog {
        width: 100%;
        max-width: 100%;
        min-height: auto !important;
        padding-top: clamp(6.25rem, 15vw, 7rem) !important;
        padding-right: clamp(1rem, 4vw, 1.5rem) !important;
        padding-bottom: clamp(3.5rem, 9vw, 5rem) !important;
        padding-left: clamp(1rem, 4vw, 1.5rem) !important;
        margin: 0 auto;
        overflow: hidden;
    }

    body.insights-mobile-page .section-header {
        width: 100%;
        max-width: 680px;
        margin: 0 auto clamp(2rem, 7vw, 3rem) !important;
        padding: 0;
    }

    body.insights-mobile-page .section-header h1 {
        max-width: 100%;
        margin: 0 auto 0.65rem !important;
        padding: 0 0.25rem;
        font-size: clamp(0.66rem, 2.4vw, 0.82rem) !important;
        line-height: 1.55 !important;
        letter-spacing: clamp(1.6px, 0.55vw, 2.7px) !important;
        overflow-wrap: anywhere;
    }

    body.insights-mobile-page .section-header h2 {
        margin: 0 0 0.85rem !important;
        font-size: clamp(2.2rem, 9vw, 3rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.045em !important;
        text-wrap: balance;
    }

    body.insights-mobile-page .section-header p {
        max-width: 34rem;
        margin: 0 auto !important;
        padding: 0 0.25rem;
        font-size: clamp(1rem, 3.8vw, 1.2rem) !important;
        line-height: 1.55 !important;
        text-wrap: balance;
    }

    body.insights-mobile-page .blog-grid {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(1rem, 4vw, 1.5rem) !important;
    }

    body.insights-mobile-page .blog-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-radius: clamp(18px, 4vw, 24px);
        transform: none;
    }

    body.insights-mobile-page .blog-card:hover {
        transform: none;
    }

    body.insights-mobile-page .blog-image {
        width: 100%;
        height: clamp(180px, 55vw, 250px) !important;
        background-position: center !important;
    }

    body.insights-mobile-page .blog-content {
        padding: clamp(1.2rem, 5vw, 2rem) !important;
    }

    body.insights-mobile-page .blog-card h3 {
        font-size: clamp(1.2rem, 4.8vw, 1.45rem) !important;
        line-height: 1.3;
    }

    body.insights-mobile-page .blog-content p {
        font-size: clamp(0.95rem, 3.8vw, 1.05rem);
        line-height: 1.6;
    }
}

/* Compact phones: tighter vertical rhythm, no oversized empty hero gap. */
@media (max-width: 480px) {
    body.insights-mobile-page .blog#blog {
        padding-top: clamp(5.5rem, 24vw, 6.25rem) !important;
        padding-right: clamp(12px, 4.5vw, 18px) !important;
        padding-left: clamp(12px, 4.5vw, 18px) !important;
        padding-bottom: 3.25rem !important;
    }

    body.insights-mobile-page .section-header {
        margin-bottom: 1.75rem !important;
    }

    body.insights-mobile-page .section-header h2 {
        font-size: clamp(2.05rem, 11vw, 2.65rem) !important;
    }

    body.insights-mobile-page .section-header p {
        font-size: clamp(0.98rem, 4.7vw, 1.08rem) !important;
    }

    body.insights-mobile-page .blog-image {
        height: clamp(175px, 56vw, 225px) !important;
    }
}

/* 320–359 CSS px phones. */
@media (max-width: 359px) {
    body.insights-mobile-page .blog#blog {
        padding-top: 5.25rem !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    body.insights-mobile-page .section-header h1 {
        font-size: 0.62rem !important;
        letter-spacing: 1.45px !important;
    }

    body.insights-mobile-page .section-header h2 {
        font-size: 2rem !important;
    }

    body.insights-mobile-page .section-header p {
        font-size: 0.96rem !important;
    }

    body.insights-mobile-page .blog-content {
        padding: 1.1rem !important;
    }
}

/* Phones in landscape: use height efficiently without changing desktop. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    body.insights-mobile-page .blog#blog {
        padding-top: 5rem !important;
    }

    body.insights-mobile-page .section-header {
        margin-bottom: 1.5rem !important;
    }

    body.insights-mobile-page .section-header h2 {
        font-size: clamp(2rem, 6vw, 2.6rem) !important;
    }
}

/* =========================================================
   ADWEX 340px + UNIVERSAL PHONE RESPONSIVE CORRECTION
   2026-09-21
   Fixes compact 320–480 CSS px phones and keeps larger phones safe.
   ========================================================= */

/* Never allow fixed overlays/cards to create horizontal page overflow. */
@media (max-width: 900px) {
    html, body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    /* Direct old-style navbar contact buttons are hidden on phones.
       Insights now also ships the same nav-actions + hamburger markup as Home. */
    .navbar .nav-container > a.btn-nav {
        display: none !important;
    }

    .navbar .nav-container {
        box-sizing: border-box;
        min-width: 0;
    }

    .navbar .logo {
        min-width: 0 !important;
        max-width: calc(100% - 52px) !important;
    }

    .navbar .nav-container .logo img {
        display: block;
        width: clamp(104px, 32vw, 132px) !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 38px !important;
    }

    /* PRICING MODAL: one-column, zero horizontal overflow on every phone. */
    .pricing-modal {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .pricing-popup {
        box-sizing: border-box !important;
        width: min(100%, 680px) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 0 auto !important;
        padding: 20px 16px 22px !important;
        border-radius: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pricing-title {
        padding: 0 34px !important;
        margin: 0 0 0.35rem !important;
        font-size: clamp(1.55rem, 7vw, 2rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere;
    }

    #pricing-subtitle {
        margin: 0 auto 1.15rem !important;
        padding: 0 0.4rem !important;
        max-width: 34rem;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    .pricing-close {
        right: 12px !important;
        top: 8px !important;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px !important;
        line-height: 1 !important;
        z-index: 3;
    }

    .pricing-cards {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 1.25rem !important;
    }

    .pricing-plan-card {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 20px 18px !important;
        border-radius: 18px !important;
        overflow-wrap: anywhere;
    }

    .pricing-plan-card .plan-title {
        font-size: clamp(1.3rem, 5.8vw, 1.65rem) !important;
    }

    .pricing-plan-card .plan-price {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.08 !important;
    }

    .pricing-plan-card .plan-subtitle,
    .pricing-plan-card .plan-features li,
    .pricing-plan-card .plan-footer {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .plan-ribbon {
        max-width: calc(100% - 24px) !important;
        padding: 5px 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Vision/Mission running-light border on mobile.
       This is the same lightweight conic-gradient rotation used on desktop.
       Only one small pseudo-element rotates, so the expensive background/orb
       effects remain disabled on phones. */
    .animated-glow-btn::before {
        animation: rotateGlow 2.5s linear infinite !important;
        transform-origin: 50% 50% !important;
        will-change: transform;
    }

    .vision-mission-content {
        transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.32s ease,
                    margin-top 0.32s ease !important;
    }

    .vision-mission-content:not(.hidden) .vision-card,
    .vision-mission-content:not(.hidden) .mission-card,
    .vision-mission-content:not(.hidden) .commitments-section {
        animation: adwexMobileVisionReveal 0.38s ease-out both;
    }

    @keyframes adwexMobileVisionReveal {
        from { opacity: 0; transform: translate3d(0, 10px, 0); }
        to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
}

/* Insights has a fixed navbar, so its own top rhythm is explicitly controlled.
   No 100px spacer + global section padding stacking. */
@media (max-width: 900px) {
    body.insights-page .blog#blog,
    body.insights-mobile-page .blog#blog {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 88px clamp(14px, 4vw, 22px) 52px !important;
        overflow: hidden !important;
    }

    body.insights-page .section-header,
    body.insights-mobile-page .section-header {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto 24px !important;
        padding: 0 !important;
    }

    body.insights-page .section-header h1,
    body.insights-mobile-page .section-header h1 {
        margin: 0 auto 8px !important;
        padding: 0 2px !important;
        font-size: clamp(0.62rem, 2.5vw, 0.76rem) !important;
        line-height: 1.5 !important;
        letter-spacing: clamp(1.3px, 0.55vw, 2.2px) !important;
        overflow-wrap: anywhere !important;
    }

    body.insights-page .section-header h2,
    body.insights-mobile-page .section-header h2 {
        margin: 0 0 10px !important;
        font-size: clamp(2rem, 9.7vw, 2.75rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em !important;
    }

    body.insights-page .section-header p,
    body.insights-mobile-page .section-header p {
        max-width: 30rem !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: clamp(0.95rem, 4.1vw, 1.08rem) !important;
        line-height: 1.48 !important;
    }

    body.insights-page .blog-grid,
    body.insights-mobile-page .blog-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 620px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        gap: 18px !important;
    }

    body.insights-page .blog-card,
    body.insights-mobile-page .blog-card {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 18px !important;
        transform: none !important;
    }

    body.insights-page .blog-image,
    body.insights-mobile-page .blog-image {
        width: 100% !important;
        height: clamp(170px, 54vw, 230px) !important;
        background-size: cover !important;
        background-position: center !important;
    }

    body.insights-page .blog-content,
    body.insights-mobile-page .blog-content {
        padding: clamp(16px, 4.8vw, 24px) !important;
    }
}

/* Exact compact-phone correction: 340px lives in this range. */
@media (max-width: 360px) {
    .navbar,
    .navbar.scrolled,
    body:not(.dark-mode) .navbar {
        padding: 7px 0 !important;
    }

    .navbar .nav-container {
        min-height: 48px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 6px !important;
    }

    .navbar .nav-container .logo img {
        width: clamp(98px, 31vw, 108px) !important;
        max-height: 32px !important;
    }

    .navbar .hamburger {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        padding: 7px !important;
        border-radius: 10px !important;
    }

    .navbar .hamburger span {
        width: 23px !important;
    }

    .navbar .nav-links {
        width: min(88vw, 270px) !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .pricing-modal {
        padding: max(5px, env(safe-area-inset-top)) 5px max(5px, env(safe-area-inset-bottom)) !important;
    }

    .pricing-popup {
        width: 100% !important;
        max-height: calc(100dvh - 10px) !important;
        padding: 16px 11px 18px !important;
        border-radius: 14px !important;
    }

    #pricing-title {
        padding: 0 30px !important;
        font-size: 1.5rem !important;
    }

    #pricing-subtitle {
        font-size: 0.82rem !important;
        margin-bottom: 0.9rem !important;
    }

    .pricing-cards {
        gap: 13px !important;
        margin-top: 1rem !important;
    }

    .pricing-plan-card {
        padding: 18px 14px !important;
        border-radius: 15px !important;
    }

    .pricing-plan-card .plan-title {
        font-size: 1.25rem !important;
    }

    .pricing-plan-card .plan-subtitle {
        margin-bottom: 1rem !important;
        font-size: 0.82rem !important;
        line-height: 1.42 !important;
    }

    .pricing-plan-card .plan-price {
        margin-bottom: 1rem !important;
        font-size: 1.8rem !important;
    }

    .pricing-plan-card .plan-price span {
        font-size: 0.82rem !important;
    }

    .pricing-plan-card .plan-features {
        margin-bottom: 1rem !important;
    }

    .pricing-plan-card .plan-features li {
        padding: 7px 0 !important;
        gap: 7px !important;
        font-size: 0.82rem !important;
        line-height: 1.38 !important;
    }

    .pricing-plan-card .btn {
        margin-top: 0.9rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .plan-ribbon {
        top: -13px !important;
        font-size: 0.67rem !important;
        letter-spacing: 0.035em !important;
    }

    body.insights-page .blog#blog,
    body.insights-mobile-page .blog#blog {
        padding: 76px 11px 42px !important;
    }

    body.insights-page .section-header,
    body.insights-mobile-page .section-header {
        margin-bottom: 20px !important;
    }

    body.insights-page .section-header h1,
    body.insights-mobile-page .section-header h1 {
        font-size: 0.58rem !important;
        letter-spacing: 1.2px !important;
        margin-bottom: 7px !important;
    }

    body.insights-page .section-header h2,
    body.insights-mobile-page .section-header h2 {
        font-size: clamp(1.92rem, 10.8vw, 2.25rem) !important;
        margin-bottom: 9px !important;
    }

    body.insights-page .section-header p,
    body.insights-mobile-page .section-header p {
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    body.insights-page .blog-grid,
    body.insights-mobile-page .blog-grid {
        gap: 14px !important;
    }

    body.insights-page .blog-image,
    body.insights-mobile-page .blog-image {
        height: clamp(164px, 52vw, 188px) !important;
    }

    body.insights-page .blog-content,
    body.insights-mobile-page .blog-content {
        padding: 15px !important;
    }

    body.insights-page .blog-card h3,
    body.insights-mobile-page .blog-card h3 {
        font-size: 1.12rem !important;
        line-height: 1.28 !important;
    }
}

/* Extra-narrow legacy phones. */
@media (max-width: 320px) {
    .navbar .nav-container .logo img {
        width: 94px !important;
    }

    .pricing-popup {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    body.insights-page .blog#blog,
    body.insights-mobile-page .blog#blog {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

/* =========================================================
   ADWEX MOBILE FINAL POLISH — PORTFOLIO + INSIGHTS
   Targets compact phones (including 300px/320px/340px CSS widths)
   without changing desktop presentation.
   ========================================================= */

@media (max-width: 900px) {
    /* Portfolio page: remove desktop-sized inline spacing and type. */
    body.portfolio-page .page-header {
        box-sizing: border-box !important;
        padding-top: 92px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin-bottom: 1.5rem !important;
    }

    body.portfolio-page .page-header .hero-title {
        font-size: clamp(2rem, 8.5vw, 3rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.045em !important;
        overflow-wrap: anywhere !important;
    }

    body.portfolio-page .page-header p {
        max-width: 38rem !important;
        margin: 0.8rem auto !important;
        font-size: clamp(0.9rem, 3.8vw, 1.1rem) !important;
        line-height: 1.5 !important;
    }

    body.portfolio-page .portfolio-page-container {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 1200px !important;
        padding: 0 14px 4rem !important;
    }

    body.portfolio-page .portfolio-page-container > section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.portfolio-page .portfolio-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body.portfolio-page .portfolio-grid-masonry {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body.portfolio-page .portfolio-item-lg {
        width: 100% !important;
        min-width: 0 !important;
        height: clamp(220px, 66vw, 330px) !important;
        border-radius: 16px !important;
    }

    body.portfolio-page .portfolio-item-sm {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border-radius: 16px !important;
    }

    body.portfolio-page .portfolio-image {
        min-height: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }

    body.portfolio-page .portfolio-info {
        padding: 13px 14px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.portfolio-page .portfolio-info h4 {
        font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
        line-height: 1.25 !important;
    }

    body.portfolio-page .portfolio-info span {
        font-size: clamp(0.7rem, 3vw, 0.9rem) !important;
    }

    body.portfolio-page .section-header {
        margin-bottom: 18px !important;
    }

    body.portfolio-page .section-header h2 {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.1 !important;
    }

    body.portfolio-page .section-header p {
        font-size: clamp(0.88rem, 3.6vw, 1rem) !important;
        line-height: 1.5 !important;
    }

    /* Social campaign images are lazy-loaded in portfolio.html. */
    body.portfolio-page .portfolio-item-sm img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Insights listing: avoid expensive entrance transitions on touch phones. */
    body.insights-page .animate-up,
    body.insights-mobile-page .animate-up {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    body.insights-page .blog-card,
    body.insights-mobile-page .blog-card {
        contain: layout paint style !important;
        box-shadow: var(--shadow-sm) !important;
    }

    body.insights-page .blog-image,
    body.insights-mobile-page .blog-image {
        will-change: auto !important;
        transform: translateZ(0);
    }
}

@media (max-width: 480px) {
    body.portfolio-page .page-header {
        padding-top: 82px !important;
        margin-bottom: 1rem !important;
    }

    body.portfolio-page .page-header .hero-title {
        font-size: clamp(1.8rem, 9.5vw, 2.35rem) !important;
    }

    body.portfolio-page .page-header p {
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    body.portfolio-page .portfolio-page-container {
        padding-left: 11px !important;
        padding-right: 11px !important;
        padding-bottom: 3rem !important;
    }

    body.portfolio-page .portfolio-page-container > section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body.portfolio-page .portfolio-item-lg {
        height: clamp(205px, 63vw, 280px) !important;
        border-radius: 14px !important;
    }

    body.portfolio-page .portfolio-item-sm {
        border-radius: 14px !important;
    }

    body.portfolio-page .portfolio-info {
        padding: 11px 12px !important;
    }
}

@media (max-width: 360px) {
    body.portfolio-page .page-header {
        padding-top: 76px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.portfolio-page .page-header .hero-title {
        font-size: 1.78rem !important;
        line-height: 1.04 !important;
    }

    body.portfolio-page .page-header p {
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
    }

    body.portfolio-page .portfolio-page-container {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    body.portfolio-page .portfolio-item-lg {
        height: 210px !important;
        border-radius: 13px !important;
    }

    body.portfolio-page .portfolio-info h4 {
        font-size: 0.98rem !important;
    }

    body.portfolio-page .portfolio-info span {
        font-size: 0.68rem !important;
    }

    body.portfolio-page .section-header h2 {
        font-size: 1.45rem !important;
    }

    body.portfolio-page .section-header p {
        font-size: 0.82rem !important;
    }
}

@media (max-width: 320px) {
    body.portfolio-page .page-header .hero-title {
        font-size: 1.65rem !important;
    }

    body.portfolio-page .portfolio-item-lg {
        height: 195px !important;
    }
}