/* ========================================
   GLOBAL STYLES
   ======================================== */

body {
    font-family: 'Inter', system-ui, sans-serif;
}

:root {
    --stoney-primary: #0066ff;
    --stoney-secondary: #00d4aa;
    --stoney-radius-2xl: 1.5rem;
    --stoney-shadow-card: 0 18px 50px rgba(0, 0, 0, 0.18);
    --stoney-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 15% 5%, rgba(0, 102, 255, 0.08), transparent 28rem),
        radial-gradient(circle at 85% 20%, rgba(0, 212, 170, 0.045), transparent 24rem),
        #0f172a;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    color: #ffffff;
    background: rgba(0, 102, 255, 0.55);
}

img,
svg {
    max-width: 100%;
}

img {
    height: auto;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

a,
button {
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(0, 212, 170, 0.95) !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(0, 212, 170, 0.14) !important;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

/* ========================================
   NAVBAR - Glassmorphism Background
   Premium frosted glass with depth + scroll state
   ======================================== */

.nav-glass {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.68));
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(2, 6, 23, 0.22);
    transition: background 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

/* Scrolled state — deeper glass + stronger shadow for clearer separation */
.nav-glass.nav-scrolled {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.82));
    border-bottom-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 40px rgba(2, 6, 23, 0.38);
}

/* ========================================
   DESKTOP NAV BUTTONS
   ======================================== */

.nav-btn {
    position: relative;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    letter-spacing: -0.01em;
    transition: color 220ms var(--stoney-transition),
                background-color 220ms var(--stoney-transition),
                box-shadow 220ms ease;
}

/* Gradient underline indicator */
.nav-btn::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #0066ff, #00d4aa);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: width 280ms var(--stoney-transition), box-shadow 280ms ease;
}

.nav-btn:hover::after,
.nav-btn:focus-visible::after,
.nav-btn.active::after {
    width: 60%;
    box-shadow: 0 0 12px rgba(0, 102, 255, 0.45);
}

/* Active (current page) state — crisp, premium pill */
.nav-btn.active {
    color: #fff !important;
    background: rgba(0, 102, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.14), 0 6px 18px rgba(0, 102, 255, 0.08);
}

/* ========================================
   HAMBURGER - Animated Icon + Touch Target
   ======================================== */

/* Ensure comfortable 44px minimum touch target */
#menuToggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.burger-line {
    transition: transform 320ms var(--stoney-transition), opacity 220ms ease;
    transform-origin: center;
}

/* Line 1: slides to center, then rotates into the X */
.burger-line:nth-child(1).open {
    transform: translateY(7px) rotate(45deg);
}

/* Line 2: fades + shrinks out */
.burger-line:nth-child(2).open {
    opacity: 0;
    transform: scaleX(0);
}

/* Line 3: slides to center, then rotates into the X */
.burger-line:nth-child(3).open {
    transform: translateY(-7px) rotate(-45deg);
}

/* ========================================
   MOBILE MENU - Disclosure Animation
   visibility is managed so that when the menu
   is closed its links are removed from the
   keyboard tab order (accessibility).
   ======================================== */

.mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 360ms var(--stoney-transition),
                opacity 240ms ease,
                visibility 0s linear 240ms;
}

.mobile-menu.open {
    max-height: 34rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 360ms var(--stoney-transition),
                opacity 240ms ease,
                visibility 0s linear 0s;
}

/* Subtle staggered entrance for a refined open feel */
@keyframes mobileNavFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mobile-menu.open .mobile-nav-link {
    animation: mobileNavFade 320ms var(--stoney-transition) both;
}

.mobile-menu.open .mobile-nav-link:nth-child(1) { animation-delay: 40ms; }
.mobile-menu.open .mobile-nav-link:nth-child(2) { animation-delay: 90ms; }
.mobile-menu.open .mobile-nav-link:nth-child(3) { animation-delay: 140ms; }
.mobile-menu.open .mobile-nav-link:nth-child(4) { animation-delay: 190ms; }


/* ========================================
   SHARED NETWORK BACKGROUND STYLES
   ======================================== */

.network-node {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform, opacity;
}

.network-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(15, 23, 42, 0.35) 100%);
    pointer-events: none;
    z-index: 0;
}


/* ========================================
   HOMEPAGE - Rich Glowing Network
   (Glowing nodes, connecting lines, grid, particles)
   ======================================== */

.network-bg-home {
    position: relative;
    isolation: isolate;
}

/* Layer 1: Deep gradient base */
.network-home-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 102, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 212, 170, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0, 102, 255, 0.05) 0%, transparent 50%);
    animation: networkBaseShift 30s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes networkBaseShift {
    0%   { opacity: 0.6; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.03); }
    100% { opacity: 0.8; transform: scale(1.01); }
}

/* Layer 2: Subtle grid pattern */
.network-home-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 102, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: networkGridDrift 40s linear infinite;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 65%);
}

@keyframes networkGridDrift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(80px, 80px); }
}

/* Layer 3: Glowing network nodes */
.network-home-node {
    width: 6px;
    height: 6px;
    background: rgba(0, 102, 255, 0.8);
    box-shadow: 0 0 6px rgba(0, 102, 255, 0.6), 0 0 18px rgba(0, 102, 255, 0.2);
    animation: homeNodePulse 5s ease-in-out infinite;
}

.network-home-node--teal {
    background: rgba(0, 212, 170, 0.7);
    box-shadow: 0 0 6px rgba(0, 212, 170, 0.5), 0 0 18px rgba(0, 212, 170, 0.15);
    width: 5px;
    height: 5px;
}

@keyframes homeNodePulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%      { transform: scale(2.2); opacity: 1; }
}

/* Layer 4: Connecting lines */
.network-home-line {
    position: absolute;
    height: 1px;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.12), rgba(0, 212, 170, 0.08), transparent);
    transform-origin: left center;
    animation: homeLineGlow 8s ease-in-out infinite;
}

@keyframes homeLineGlow {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.7; }
}

/* Layer 5: Floating particles */
.network-home-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 102, 255, 0.5);
    box-shadow: 0 0 4px rgba(0, 102, 255, 0.3);
    pointer-events: none;
    z-index: 0;
    bottom: 10%;
    animation: homeParticleFloat linear infinite;
    will-change: transform, opacity;
}

.network-home-particle--teal {
    background: rgba(0, 212, 170, 0.4);
    box-shadow: 0 0 4px rgba(0, 212, 170, 0.25);
    width: 2px;
    height: 2px;
}

@keyframes homeParticleFloat {
    0%   { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    10%  { opacity: 0.7; transform: translateY(-40px) translateX(5px) scale(1); }
    50%  { opacity: 1;   transform: translateY(-200px) translateX(-10px) scale(1.2); }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-400px) translateX(20px) scale(0.7); opacity: 0; }
}

/* Interactive mouse glow (homepage only) */
.network-glow-interactive {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.07) 0%, rgba(0, 212, 170, 0.04) 30%, transparent 70%);
    filter: blur(40px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.8s ease;
    will-change: transform, opacity;
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
}

.network-bg-home:hover .network-glow-interactive {
    opacity: 1;
}

/* Ensure hero content stays above all background layers */
.network-bg-home > .relative {
    position: relative;
    z-index: 1;
}


/* ========================================
   ABOUT PAGE - Soft Minimal Network
   (Fewer nodes, slower movement, calm feel)
   ======================================== */

.network-bg-about {
    position: relative;
    isolation: isolate;
}

.network-about-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0, 102, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(0, 212, 170, 0.04) 0%, transparent 50%);
    animation: aboutBaseShift 25s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes aboutBaseShift {
    0%   { opacity: 0.5; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.02); }
    100% { opacity: 0.7; transform: scale(1.01); }
}

/* About: Soft minimal nodes */
.network-about-node {
    width: 5px;
    height: 5px;
    background: rgba(0, 102, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.25);
    animation: aboutNodeFloat 12s ease-in-out infinite;
}

.network-about-node--teal {
    background: rgba(0, 212, 170, 0.4);
    box-shadow: 0 0 10px rgba(0, 212, 170, 0.2);
}

@keyframes aboutNodeFloat {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.3; }
    50%      { transform: scale(1.6) translate(10px, -10px); opacity: 0.8; }
}

/* About: Soft light diffusion */
.network-about-diffusion {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 40% 40%, rgba(0, 102, 255, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 65% 70%, rgba(0, 212, 170, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: aboutDiffusion 15s ease-in-out infinite alternate;
}

@keyframes aboutDiffusion {
    0%   { opacity: 0.5; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.02); }
    100% { opacity: 0.7; transform: scale(0.99); }
}

.network-bg-about > .relative {
    position: relative;
    z-index: 1;
}


/* ========================================
   SERVICES PAGE - Structured Technical Grid
   (Clean connecting lines, precise nodes, technical feel)
   ======================================== */

.network-bg-services {
    position: relative;
    isolation: isolate;
}

.network-services-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(0, 102, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(0, 212, 170, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Services: Structured grid with diagonal + straight lines */
.network-services-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 80px,
            rgba(0, 102, 255, 0.03) 80px,
            rgba(0, 102, 255, 0.03) 81px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(0, 212, 170, 0.02) 100px,
            rgba(0, 212, 170, 0.02) 101px
        ),
        linear-gradient(rgba(0, 102, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.02) 1px, transparent 1px);
    background-size: 114px 114px, 142px 142px, 60px 60px, 60px 60px;
    animation: servicesGridSlide 35s linear infinite;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

@keyframes servicesGridSlide {
    0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 114px 114px, -142px -142px, 60px 60px, 60px 60px; }
}

/* Services: Scanning horizontal line */
.network-services-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.network-services-scan::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 102, 255, 0.12) 20%,
        rgba(0, 212, 170, 0.15) 50%,
        rgba(0, 102, 255, 0.12) 80%,
        transparent 100%);
    box-shadow: 0 0 15px rgba(0, 102, 255, 0.08);
    animation: servicesScanLine 8s ease-in-out infinite;
}

@keyframes servicesScanLine {
    0%   { top: -2%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 102%; opacity: 0; }
}

/* Services: Precise junction nodes */
.network-services-node {
    width: 5px;
    height: 5px;
    background: rgba(0, 212, 170, 0.6);
    box-shadow: 0 0 6px rgba(0, 212, 170, 0.3), 0 0 16px rgba(0, 212, 170, 0.1);
    animation: servicesNodePulse 4s ease-in-out infinite;
}

.network-services-node--teal {
    background: rgba(0, 102, 255, 0.5);
    box-shadow: 0 0 6px rgba(0, 102, 255, 0.3), 0 0 16px rgba(0, 102, 255, 0.1);
}

@keyframes servicesNodePulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50%      { transform: scale(1.8); opacity: 1; }
}

/* Technical gradient overlay */
.network-services-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.25) 0%,
        transparent 30%,
        transparent 70%,
        rgba(15, 23, 42, 0.25) 100%);
    pointer-events: none;
    z-index: 0;
}

.network-bg-services > .relative {
    position: relative;
    z-index: 1;
}


/* ========================================
   CONTACT PAGE - Pulsing Communication Nodes
   (Pulsing rings, communication nodes, warm glow)
   ======================================== */

.network-bg-contact {
    position: relative;
    isolation: isolate;
}

.network-contact-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 102, 255, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 60%, rgba(0, 212, 170, 0.03) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
    animation: contactBaseGlow 12s ease-in-out infinite alternate;
}

@keyframes contactBaseGlow {
    0%   { opacity: 0.5; transform: scale(1); }
    50%  { opacity: 1;   transform: scale(1.03); }
    100% { opacity: 0.7; transform: scale(0.98); }
}

/* Contact: Pulsing concentric rings */
.network-contact-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 102, 255, 0.06);
    pointer-events: none;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: contactRingPulse ease-in-out infinite;
}

.network-contact-ring-1 {
    width: 280px;
    height: 280px;
    animation-duration: 6s;
    border-color: rgba(0, 102, 255, 0.07);
    box-shadow: 0 0 25px rgba(0, 102, 255, 0.03);
}

.network-contact-ring-2 {
    width: 440px;
    height: 440px;
    animation-duration: 8s;
    animation-delay: 1.5s;
    border-color: rgba(0, 212, 170, 0.05);
    box-shadow: 0 0 35px rgba(0, 212, 170, 0.02);
}

.network-contact-ring-3 {
    width: 600px;
    height: 600px;
    animation-duration: 10s;
    animation-delay: 3s;
    border-color: rgba(0, 102, 255, 0.04);
    box-shadow: 0 0 45px rgba(0, 102, 255, 0.015);
}

@keyframes contactRingPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.3; }
    50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

/* Contact: Communication nodes with outward pulse */
.network-contact-node {
    width: 6px;
    height: 6px;
    background: rgba(0, 102, 255, 0.6);
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.3);
    animation: contactNodePulse 5s ease-in-out infinite;
}

.network-contact-node--teal {
    background: rgba(0, 212, 170, 0.5);
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.25);
}

@keyframes contactNodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
        box-shadow: 0 0 8px rgba(0, 102, 255, 0.3);
    }
    50% {
        transform: scale(2);
        opacity: 1;
        box-shadow: 0 0 14px rgba(0, 102, 255, 0.5), 0 0 28px rgba(0, 102, 255, 0.15);
    }
}

/* Contact: Bottom wave glow */
.network-contact-wave {
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 120%;
    height: 200px;
    background: radial-gradient(ellipse at 50% 100%, rgba(0, 102, 255, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: contactWaveGlow 10s ease-in-out infinite alternate;
}

@keyframes contactWaveGlow {
    0%   { transform: translateY(0) scaleX(1);   opacity: 0.4; }
    100% { transform: translateY(-15px) scaleX(1.05); opacity: 1; }
}

.network-bg-contact > .relative {
    position: relative;
    z-index: 1;
}


/* ========================================
   MOBILE PERFORMANCE - Disable heavy animations
   ======================================== */

@media (max-width: 768px) {
    .network-home-grid,
    .network-home-line,
    .network-home-particle,
    .network-glow-interactive,
    .network-services-grid,
    .network-services-scan,
    .network-contact-ring,
    .network-contact-wave {
        display: none !important;
    }

    .network-home-node,
    .network-about-node,
    .network-services-node,
    .network-contact-node {
        animation-duration: 0s !important;
        opacity: 0.4;
    }
}


/* ========================================
   ANIMATIONS - Fade In
   ======================================== */

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

.animate-fade-in {
    animation: fadeInUp 0.8s ease forwards;
}


/* ========================================
   MOBILE NAV LINKS - Active State
   ======================================== */

.mobile-nav-link.active {
    color: #fff !important;
    background: rgba(0, 102, 255, 0.08);
}

.mobile-nav-link.active span {
    background: rgba(0, 102, 255, 0.2) !important;
}

/* ========================================
   FLOATING WHATSAPP BUTTON - Glassmorphism
   ======================================== */

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4),
                    0 0 20px rgba(37, 211, 102, 0.15);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0),
                    0 0 20px rgba(37, 211, 102, 0.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0),
                    0 0 20px rgba(37, 211, 102, 0.15);
    }
}

.whatsapp-float {
    background: rgba(37, 211, 102, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(37, 211, 102, 0.3);
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.15);
    animation: whatsappPulse 2s infinite;
}

/* Pause pulse on hover so the scale-up feels smooth */
.whatsapp-float:hover {
    animation: none;
    background: rgba(37, 211, 102, 0.4);
    border-color: rgba(37, 211, 102, 0.5);
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.25);
}

/* ========================================
   PRODUCTION UI/UX REFINEMENTS
   Premium polish without changing brand/content
   ======================================== */

section > .max-w-7xl,
footer > .max-w-7xl {
    width: min(100% - 2rem, 80rem);
}

.network-bg-home,
.network-bg-about,
.network-bg-services,
.network-bg-contact {
    min-height: clamp(28rem, 58vh, 44rem);
}

.network-bg-home::after,
.network-bg-about::after,
.network-bg-services::after,
.network-bg-contact::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.28), rgba(0, 212, 170, 0.18), transparent);
    z-index: 1;
    pointer-events: none;
}

.group[class*="bg-white/"][class*="rounded-2xl"],
a.group[class*="bg-white/"][class*="rounded-2xl"],
div[class*="bg-white/"][class*="rounded-2xl"] {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022));
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: var(--stoney-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.group[class*="bg-white/"][class*="rounded-2xl"]:hover,
a.group[class*="bg-white/"][class*="rounded-2xl"]:hover,
div[class*="bg-white/"][class*="rounded-2xl"]:hover {
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.32), 0 0 0 1px rgba(0, 102, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

img[class*="rounded-3xl"],
img[class*="rounded-xl"] {
    background: rgba(255, 255, 255, 0.04);
}

.group img[class*="object-cover"],
div.relative > img[class*="object-cover"] {
    transition: transform 420ms var(--stoney-transition), filter 420ms ease, border-color 220ms ease;
}

.group:hover img[class*="object-cover"],
div.relative:hover > img[class*="object-cover"] {
    transform: scale(1.018);
    filter: saturate(1.06) contrast(1.03);
}

a[class*="rounded-full"],
button[class*="rounded-full"] {
    min-height: 2.75rem;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

a[class*="rounded-full"]:active,
button[class*="rounded-full"]:active {
    transform: translateY(0) scale(0.985);
}

footer a { border-radius: 0.5rem; }
footer svg { transition: transform var(--stoney-transition), opacity var(--stoney-transition); }

/* ===== FOOTER — Premium Closing Section (scoped) ===== */
.ux-footer { position: relative; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,102,255,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0,212,170,0.05), transparent 45%),
    linear-gradient(180deg,#0b1426,#0f172a); }
.ux-footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(0,102,255,0.5),rgba(0,212,170,0.4),transparent); }

.ux-footer-cta { position: relative; z-index: 2; }
.ux-footer-cta-card { position: relative; max-width: 64rem; margin: 0 auto;
  transform: translateY(-3.5rem); padding: clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem);
  border-radius: var(--stoney-radius-2xl); border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(0,102,255,0.12), rgba(0,212,170,0.06));
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 30px 80px rgba(2,6,23,0.5), inset 0 1px 0 rgba(255,255,255,0.08); text-align: center; overflow: hidden; }
.ux-footer-cta-glow { position:absolute; inset:-40% -10% auto -10%; height:70%; pointer-events:none;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,102,255,0.22), transparent 60%); }
.ux-footer-cta-content { position: relative; }
.ux-footer-cta-eyebrow { display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--stoney-secondary); margin-bottom:0.85rem; }
.ux-footer-cta-title { font-size:clamp(1.6rem,4vw,2.5rem); font-weight:800; line-height:1.1; letter-spacing:-0.02em; margin-bottom:0.85rem; }
.ux-grad-text { background:linear-gradient(90deg,var(--stoney-primary),var(--stoney-secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ux-footer-cta-text { max-width:40rem; margin:0 auto 1.75rem; color:rgba(255,255,255,0.7);
  font-size:clamp(0.95rem,1.6vw,1.075rem); line-height:1.6; }
.ux-footer-cta-buttons { display:flex; flex-wrap:wrap; gap:0.85rem; justify-content:center; }
.ux-btn-call, .ux-btn-wa { display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  min-height:3rem; padding:0.85rem 1.75rem; border-radius:999px; font-weight:600; font-size:1rem;
  letter-spacing:-0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform var(--stoney-transition), box-shadow var(--stoney-transition), background var(--stoney-transition); }
.ux-btn-call { background:linear-gradient(135deg,var(--stoney-primary),#0052cc); color:#fff; }
.ux-btn-call:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,102,255,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }
.ux-btn-wa { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; }
.ux-btn-wa:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(37,211,102,0.4), inset 0 1px 0 rgba(255,255,255,0.25); }

.ux-footer-main { position: relative; z-index: 2; }
.ux-footer-grid { display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:640px){ .ux-footer-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .ux-footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:3rem;} }
.ux-footer-col { min-width:0; }
.ux-footer-brand { display:inline-flex; align-items:center; gap:0.75rem; margin-bottom:1.1rem; }
.ux-footer-brand img { height:2.5rem; width:auto; border-radius:0.5rem; background:rgba(255,255,255,0.9);
  padding:0.25rem; object-fit:contain; transition: transform var(--stoney-transition); }
.ux-footer-brand:hover img { transform:scale(1.08); }
.ux-footer-brand span { font-size:1.25rem; font-weight:800; letter-spacing:-0.02em; }
.ux-footer-desc { color:rgba(255,255,255,0.55); font-size:0.9rem; line-height:1.65; margin-bottom:1.25rem; max-width:30rem; }

.ux-footer-trust { display:flex; flex-wrap:wrap; gap:0.5rem; }
.ux-trust-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.75rem; border-radius:999px;
  border:1px solid rgba(255,255,255,0.09); background:rgba(255,255,255,0.035); color:rgba(255,255,255,0.75);
  font-size:0.75rem; font-weight:600; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ux-trust-chip svg { width:0.85rem; height:0.85rem; color:var(--stoney-secondary); flex:0 0 auto; }

.ux-footer-head { font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.5); margin-bottom:1.1rem; position:relative; padding-bottom:0.6rem; }
.ux-footer-head::after { content:''; position:absolute; left:0; bottom:0; width:1.75rem; height:2px; border-radius:999px;
  background:linear-gradient(90deg,var(--stoney-primary),var(--stoney-secondary)); }

.ux-footer-list { list-style:none; padding:0; margin:0; display:grid; gap:0.6rem; }
.ux-footer-link { display:inline-flex; align-items:center; min-height:2.5rem; gap:0.6rem; color:rgba(255,255,255,0.6); font-size:0.9rem;
  transition: color var(--stoney-transition), transform var(--stoney-transition); }
.ux-footer-link svg { width:0.85rem; height:0.85rem; opacity:0.5;
  transition: opacity var(--stoney-transition), transform var(--stoney-transition); }
.ux-footer-link:hover, .ux-footer-link:focus-visible { color:#fff; transform:translateX(3px); }
.ux-footer-link:hover svg { opacity:1; transform:translateX(1px); }

.ux-footer-contact { list-style:none; padding:0; margin:0; display:grid; gap:0.85rem; }
.ux-contact-item { display:flex; align-items:flex-start; min-height:2.5rem; gap:0.75rem; color:rgba(255,255,255,0.6); font-size:0.9rem;
  line-height:1.5; border-radius:0.5rem; transition: color var(--stoney-transition); }
a.ux-contact-item:hover, a.ux-contact-item:focus-visible { color:#fff; }
.ux-contact-ic { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; flex:0 0 auto;
  border-radius:0.6rem; background:rgba(0,102,255,0.1); color:var(--stoney-primary); }
.ux-contact-ic svg { width:1rem; height:1rem; }

.ux-footer-bottom { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(2,6,23,0.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.ux-footer-bottom-inner { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:1.5rem 0; text-align:center; }
@media (min-width:768px){ .ux-footer-bottom-inner{ flex-direction:row; justify-content:space-between; text-align:left; } }
.ux-footer-copy { color:rgba(255,255,255,0.4); font-size:0.85rem; }
.ux-footer-credit { color:rgba(255,255,255,0.3); font-size:0.8rem; }
.ux-back-to-top { display:inline-flex; align-items:center; min-height:2.75rem; gap:0.4rem; padding:0.6rem 1.1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.7); font-size:0.8rem; font-weight:600;
  transition: color var(--stoney-transition), border-color var(--stoney-transition), background var(--stoney-transition); }
.ux-back-to-top svg { width:0.85rem; height:0.85rem; transition: transform var(--stoney-transition); }
.ux-back-to-top:hover, .ux-back-to-top:focus-visible { color:#fff; border-color:rgba(0,212,170,0.4); background:rgba(0,212,170,0.08); }
.ux-back-to-top:hover svg { transform: translateY(-2px); }

@media (max-width:640px){ .ux-footer-cta-card{ transform:translateY(-2rem); } .ux-footer-brand span{ font-size:1.1rem; } }
@media (prefers-reduced-motion: reduce){ .ux-footer-cta-card{ transform:none; } }

form {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--stoney-radius-2xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.018));
    box-shadow: var(--stoney-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

input,
select,
textarea {
    min-height: 2.875rem;
    caret-color: var(--stoney-secondary);
}

/* iOS Safari auto-zooms on input focus when font-size < 16px.
   Ensures comfortable, zoom-free typing on all touch devices. */
@media (max-width: 1024px) {
    input,
    select,
    textarea {
        font-size: 1rem;
    }
}

textarea {
    line-height: 1.65;
}

label {
    letter-spacing: -0.005em;
}

a[href^="mailto:"],
a[href^="tel:"] {
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .network-bg-home,
    .network-bg-about,
    .network-bg-services,
    .network-bg-contact {
        min-height: auto;
    }
}

/* Defensive overflow guard: clamp decorative fixed-width glows on the
   narrowest viewports so they can never force horizontal scroll. */
@media (max-width: 430px) {
    section .absolute[class*="w-[600px]"] {
        width: min(600px, 110%);
    }
    section .absolute[class*="h-[600px]"] {
        height: min(600px, 60vh);
    }
}

@media (max-width: 640px) {
    .nav-glass nav > div:first-child {
        min-height: 4.5rem;
    }

    .nav-glass img[alt*="Logo"] {
        max-height: 2.25rem;
    }

    .nav-glass span.text-xl,
    footer span.text-xl {
        font-size: clamp(1rem, 5vw, 1.25rem);
        line-height: 1.15;
    }

    section > .max-w-7xl,
    footer > .max-w-7xl {
        width: min(100% - 1.5rem, 80rem);
    }

    .mobile-nav-link {
        min-height: 3rem;
    }

    a[class*="rounded-full"],
    button[class*="rounded-full"] {
        min-height: 3rem;
    }

    .whatsapp-float {
        right: 1rem !important;
        bottom: 1rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   SECOND-PASS UX COMMUNICATION REFINEMENTS
   Hierarchy, scanability, trust signals
   ======================================== */

.ux-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ux-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ux-trust-dot {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--stoney-primary), var(--stoney-secondary));
    box-shadow: 0 0 14px rgba(0, 212, 170, 0.22);
}

/* ========================================
   NAVIGATION — PREMIUM ENTERPRISE POLISH
   Refined depth, motion, and active/hover states.
   Scope: header / .nav-glass only. No structural change,
   no branding change, no new dependencies.
   ======================================== */

/* Scrolled header gains a luminous top hairline for crisp,
   "mounted" separation — a hallmark of premium SaaS headers.
   (.nav-glass is already a positioning context via sticky.) */
.nav-glass.nav-scrolled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 102, 255, 0.55), rgba(0, 212, 170, 0.35), transparent);
    pointer-events: none;
    z-index: 2;
}

/* Desktop links: smooth, tactile micro-interaction.
   Guarded so the lift only applies on hover-capable devices
   (prevents stuck hover states on touch). */
@media (hover: hover) {
    .nav-btn {
        transition: color 220ms var(--stoney-transition),
                    background-color 220ms var(--stoney-transition),
                    box-shadow 220ms ease,
                    transform 220ms var(--stoney-transition);
    }
    .nav-btn:hover {
        transform: translateY(-1px);
    }
    .nav-btn:active {
        transform: translateY(0);
    }
}

/* Active (current page) link: persistent premium glow + a wider,
   brighter indicator so "you are here" is unmistakable. */
.nav-btn.active {
    text-shadow: 0 0 18px rgba(0, 102, 255, 0.25);
}
.nav-btn.active::after {
    width: 70%;
    box-shadow: 0 0 14px rgba(0, 102, 255, 0.6);
}

/* Hamburger: refined hover + press feedback for a quality feel. */
#menuToggle {
    transition: background-color 200ms ease, transform 200ms var(--stoney-transition);
}
@media (hover: hover) {
    #menuToggle:hover {
        transform: scale(1.04);
    }
}
#menuToggle:active {
    transform: scale(0.96);
}

/* Mobile menu panel: a distinct, frosted premium surface when open,
   so the expanded menu reads as its own layered element. */
.mobile-menu.open {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.35));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(2, 6, 23, 0.4);
}

/* Mobile links: leading gradient accent for a clear, premium
   "you are here" cue (and a gentler hint on hover). */
.mobile-nav-link {
    position: relative;
}
.mobile-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #0066ff, #00d4aa);
    transform: translateY(-50%);
    transition: height 260ms var(--stoney-transition), box-shadow 260ms ease;
}
.mobile-nav-link.active::before {
    height: 60%;
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.5);
}
@media (hover: hover) {
    .mobile-nav-link:hover::before {
        height: 35%;
    }
}

/* Very small screens: tighten header rhythm without sacrificing
   the 44px minimum touch targets. */
@media (max-width: 360px) {
    .nav-glass nav > div:first-child {
        gap: 0.5rem;
    }
    .nav-glass img[alt*="Logo"] {
        max-height: 2rem;
    }
}

/* Reduced motion: neutralize navigation micro-movements
   (global rule already collapses durations; this removes the
   hover transforms themselves for motion-sensitive users). */
@media (prefers-reduced-motion: reduce) {
    .nav-btn:hover,
    #menuToggle:hover {
        transform: none !important;
    }
}

.ux-section-note {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.ux-proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.ux-proof-row span,
.ux-service-intro {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.ux-proof-row span {
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

.ux-service-intro {
    max-width: 52rem;
    margin-inline: auto;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--stoney-radius-2xl);
    text-align: center;
}

.ux-service-intro p {
    max-width: 42rem;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.75;
}

.ux-inline-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.35rem;
    color: var(--stoney-secondary);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--stoney-transition), transform var(--stoney-transition);
}

.ux-inline-cta:hover {
    color: #7fffe6;
    transform: translateX(3px);
}

@media (min-width: 1024px) {
    .grid.lg\:grid-cols-2.items-center > div:first-child:not(.order-2) {
        max-width: 35rem;
    }
}

@media (max-width: 768px) {
    .ux-proof-row {
        grid-template-columns: 1fr;
    }

    .ux-trust-strip {
        justify-content: center;
    }

    .ux-trust-item {
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .ux-trust-strip {
        gap: 0.55rem;
    }

    .ux-trust-item {
        width: 100%;
        min-height: 2.5rem;
    }

    .ux-service-intro {
        text-align: left;
    }
}

/* ========================================
   HERO SECTION - PREMIUM UX REFINEMENTS
   Hierarchy, rhythm, CTA emphasis, motion
   (Scoped to .ux-hero-* — no other sections)
   ======================================== */

/* --- Staggered entrance cascade (reuses fadeInUp keyframes) ---
   Gives a calm, premium reveal order:
   badge -> headline -> tagline -> copy -> trust -> CTA (+ media). */
.ux-hero-badge {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.05s;
}

.ux-hero-headline {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.15s;
    /* Tighter optical tracking + subtle brand-tinted depth glow
       lifts the H1 above the busy network background. */
    letter-spacing: -0.02em;
    filter: drop-shadow(0 10px 26px rgba(0, 102, 255, 0.18));
}

.ux-hero-tagline {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.3s;
    letter-spacing: 0.005em;
}

.ux-hero-description {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.42s;
}

.ux-hero-content .ux-trust-strip {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.54s;
}

.ux-hero-cta {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.66s;
}

/* Hero media reveals slightly after the headline for a balanced two-column feel */
.ux-hero-media {
    animation: fadeInUp 0.9s ease both;
    animation-delay: 0.35s;
}

/* --- Primary CTA emphasis ---
   Stronger resting + hover shadow establishes "Call Now" as the #1 next action. */
a.ux-hero-cta-primary {
    box-shadow:
        0 12px 30px -10px rgba(0, 102, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

a.ux-hero-cta-primary:hover {
    box-shadow:
        0 20px 42px -12px rgba(0, 102, 255, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Secondary CTA gets a softer, contained glow so the pair reads as one group */
a.ux-hero-cta-secondary {
    box-shadow:
        0 10px 26px -12px rgba(16, 185, 129, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* --- Hero media framing ---
   Deeper, layered shadow + hairline ring for a premium "card" feel. */
.ux-hero-media-img {
    box-shadow:
        0 34px 64px -22px rgba(2, 6, 23, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Gentle float on desktop only (mobile already strips heavy motion) */
@media (min-width: 1024px) {
    .ux-hero-media-frame {
        animation: uxHeroMediaFloat 7s ease-in-out infinite;
        will-change: transform;
    }
}

@keyframes uxHeroMediaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* --- Small-screen typography polish (320–360px) ---
   Keeps the headline + tagline graceful on the narrowest phones. */
@media (max-width: 360px) {
    .ux-hero-headline {
        font-size: 2rem;
        line-height: 1.12;
    }

    .ux-hero-tagline {
        font-size: 1.0625rem;
    }
}

/* Keep CTA pair comfortably spaced when stacked on compact widths */
@media (max-width: 430px) {
    .ux-hero-cta {
        gap: 0.6rem;
    }
}


/* ========================================
   SERVICES SECTION — UX & CONVERSION REFINEMENTS
   Scope: homepage services preview (.ux-svc-*) and the services
   page detail section (.ux-svc-detail, .ux-inline-cta) ONLY.
   Goals: equal heights, hierarchy, spacing, icon alignment,
   scanability, whitespace, hover polish, CTA emphasis.
   No brand color / icon / copy changes.
   ======================================== */

/* ---------- Homepage: services preview cards ---------- */

/* Equal-height cards: stretch to the row height and flow content
   top-to-bottom so the per-card CTA always aligns across a row,
   even when descriptions differ in length. */
.ux-svc-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Icon: gentle lift on card hover for a more tactile, premium feel.
   (transform is not set by utilities here, so this layers cleanly) */
.ux-svc-card__icon {
    will-change: transform;
}

@media (hover: hover) {
    .ux-svc-card:hover .ux-svc-card__icon {
        transform: translateY(-2px) scale(1.05);
    }
}

/* Title: tighter optical tracking for a clearer hierarchy step
   above the body copy. */
.ux-svc-card__title {
    letter-spacing: -0.015em;
}

/* Body text absorbs the free vertical space so the CTA stays pinned
   to the bottom — this is what makes the cards visually consistent. */
.ux-svc-card__text {
    flex: 1 1 auto;
}

/* Per-card CTA: a repeatable, scannable affordance pinned to the
   bottom of every card. A hairline divider separates copy from
   action and improves scanability. */
.ux-svc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    min-height: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--stoney-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-decoration: none;
    transition: color var(--stoney-transition);
}

.ux-svc-card__cta svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--stoney-transition);
}

/* Whole-card hover reinforces that the card is an entry point. */
@media (hover: hover) {
    .ux-svc-card:hover .ux-svc-card__cta {
        color: #4d94ff;
    }

    .ux-svc-card:hover .ux-svc-card__cta svg {
        transform: translateX(3px);
    }
}

/* "View All Services": stronger resting + hover presence so it reads
   as the section's primary next action. */
.ux-svc-allbtn {
    box-shadow: 0 10px 26px -16px rgba(0, 102, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
    .ux-svc-allbtn:hover {
        box-shadow: 0 18px 38px -16px rgba(0, 102, 255, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
}

/* ---------- Services page: detailed service blocks ---------- */

/* Description: a touch more breathing room before the feature list
   (overrides the mb-4 utility via higher specificity). */
.ux-svc-detail p[class*="leading-relaxed"] {
    margin-bottom: 1.5rem;
}

/* Feature lists: comfier line-height for easier scanning + a subtle
   hover affordance. */
.ux-svc-detail ul {
    margin-top: 0.25rem;
}

.ux-svc-detail ul li {
    line-height: 1.5;
    transition: color var(--stoney-transition);
}

@media (hover: hover) {
    .ux-svc-detail ul li:hover {
        color: rgba(255, 255, 255, 0.85);
    }
}

/* Detail icons: consistent premium depth across all blocks. */
.ux-svc-detail div.w-14.h-14 {
    box-shadow: 0 12px 28px -18px rgba(0, 102, 255, 0.45);
}

/* Inline CTA ("Discuss this service"): clearer emphasis to nudge
   conversion — slightly larger, more vertical air, soft hover glow. */
.ux-inline-cta {
    margin-top: 1.6rem;
    padding: 0.75rem 0;
    min-height: 2.5rem;
    font-size: 0.95rem;
}

@media (hover: hover) {
    .ux-inline-cta:hover {
        text-shadow: 0 0 18px rgba(0, 212, 170, 0.25);
    }
}

/* ========================================
   ABOUT PAGE — TRUST, READABILITY & FLOW
   Scope: about.html ONLY (.ux-about-* classes).
   Goals: hierarchy, whitespace, card consistency,
   storytelling flow, trust-building, CTA visibility.
   No global selectors — safe, self-contained additions. */
/* === Hero: tighter badge→headline rhythm for a confident opening === */
.ux-about-hero__inner > * + * {
    margin-top: 0;
}

/* === Overview body: optimized reading rhythm (max-width + spacing) === */
.ux-about-overview__body p {
    line-height: 1.75;
    max-width: 38rem;
}

.ux-about-overview__body p + p {
    margin-top: 1.25rem;
}

/* === Services strip: visual "what we do" bridge (who→what flow) === */
.ux-about-services-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.75rem;
    max-width: 38rem;
}

.ux-about-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color var(--stoney-transition),
                background-color var(--stoney-transition),
                border-color var(--stoney-transition);
}

@media (hover: hover) {
    .ux-about-chip:hover {
        color: #4d94ff;
        background: rgba(0, 102, 255, 0.08);
        border-color: rgba(0, 102, 255, 0.25);
    }
}

/* === Bridge CTA: low-friction "explore services" link (what→why flow) === */
.ux-about-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    min-height: 2.5rem;
    padding-block: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #00d4aa;
    text-decoration: none;
    transition: color var(--stoney-transition), gap var(--stoney-transition);
}

.ux-about-cta-link svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--stoney-transition);
}

@media (hover: hover) {
    .ux-about-cta-link:hover {
        color: #7fffe6;
    }

    .ux-about-cta-link:hover svg {
        transform: translateX(3px);
    }
}

.ux-about-cta-link:focus-visible {
    outline: 2px solid #00d4aa;
    outline-offset: 4px;
    border-radius: 0.3rem;
}

/* === Section rhythm: consistent vertical breathing between blocks === */
.ux-about-section {
    scroll-margin-top: 6rem;
}

/* === Card consistency: equal-height flex cards across all About grids === */
.ux-about-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ux-about-card > h3 + p,
.ux-about-card > h3 + .text-white\/60 {
    flex: 1 1 auto;
}

/* Cards: soften border, add resting depth for a premium feel */
.ux-about-card {
    box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) {
    .ux-about-card:hover {
        box-shadow: 0 18px 40px -22px rgba(0, 102, 255, 0.35);
    }
}

/* === Trust cards: lift icon + title relationship for scanability === */
.ux-about-card h3 {
    letter-spacing: -0.01em;
}

/* === Responsive: comfortable spacing at all breakpoints === */
@media (max-width: 430px) {

    /* Tighter hero on small phones — no overflow, good readability */
    .ux-about-hero__inner h1 {
        font-size: 2.25rem;
        line-height: 1.15;
    }

    .ux-about-hero__inner .text-xl,
    .ux-about-hero__inner p.text-xl {
        font-size: 1.125rem;
    }

    /* Chips wrap cleanly, comfortable touch targets */
    .ux-about-chip {
        font-size: 0.75rem;
        padding: 0.3rem 0.7rem;
    }

    /* Cards: slightly less padding on smallest screens */
    .ux-about-card {
        padding: 1.5rem;
    }
}

@media (min-width: 1024px) {

    /* Desktop: cards align in a clean visual row */
    .ux-about-card {
        padding: 2rem;
    }
}

/* ========================================
   CONTACT PAGE — TRUST, FORM CLARITY & CONVERSION
   Scope: contact.html ONLY (.ux-contact-* classes).
   Goals: hierarchy, contact method visibility, form readability,
   field consistency, CTA emphasis, trust-building.
   No global selectors — safe, self-contained additions. */

/* === Method cards: equal heights + consistent depth === */
.ux-contact-method {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ux-contact-method > h3 {
    margin-top: auto;
}

.ux-contact-method {
    box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) {
    .ux-contact-method:hover {
        box-shadow: 0 18px 40px -22px rgba(0, 102, 255, 0.35);
    }
}

/* === Badge: "Quick chat" hint for WhatsApp (fastest channel) === */
.ux-contact-badge {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-bottom: 0.5rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #00d4aa;
    background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.25);
}

/* === Form: clear label hierarchy === */
.ux-contact-form label {
    letter-spacing: -0.005em;
}

/* Required field marker */
.ux-contact-req {
    color: #00d4aa;
    font-weight: 700;
    margin-left: 0.15rem;
}

/* === Field consistency: visible focus ring for keyboard users === */
.ux-contact-field:focus-visible {
    outline: 2px solid rgba(0, 212, 170, 0.95);
    outline-offset: 2px;
    border-color: rgba(0, 102, 255, 0.6) !important;
}

/* === Select: restore visible dropdown chevron === */
.ux-contact-select-wrap {
    position: relative;
}

.ux-contact-chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%);
    pointer-events: none;
    transition: color var(--stoney-transition), transform var(--stoney-transition);
}

@media (hover: hover) {
    .ux-contact-select-wrap:hover .ux-contact-chevron {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* === Submit button: stronger resting emphasis === */
.ux-contact-submit {
    box-shadow: 0 12px 30px -12px rgba(0, 102, 255, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
    letter-spacing: -0.01em;
}

@media (hover: hover) {
    .ux-contact-submit:hover {
        box-shadow: 0 20px 42px -14px rgba(0, 102, 255, 0.65),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* === Reassurance note: trust-building response promise === */
.ux-contact-reassure {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    background: rgba(0, 212, 170, 0.04);
    border: 1px solid rgba(0, 212, 170, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    line-height: 1.55;
}

.ux-contact-reassure svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    color: #00d4aa;
}

/* === Contact detail cards: consistent depth === */
.ux-contact-card {
    box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) {
    .ux-contact-card:hover {
        box-shadow: 0 14px 32px -22px rgba(0, 102, 255, 0.25);
    }
}

/* === Responsive: comfortable spacing on small screens === */
@media (max-width: 430px) {

    /* Form fields: generous touch targets */
    .ux-contact-field {
        min-height: 3rem;
        font-size: 1rem; /* >=16px prevents iOS Safari auto-zoom on focus */
    }

    /* Reassurance note: readable line length */
    .ux-contact-reassure {
        font-size: 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    /* Method cards: comfortable padding */
    .ux-contact-method {
        padding: 1.5rem;
    }

    /* Submit: full-width, comfortable */
    .ux-contact-submit {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (min-width: 1024px) {

    /* Desktop: form section gets a comfortable max-width */
    .ux-contact-form {
        max-width: 36rem;
    }
}