/* ========================================================================
 * VG Electrons Technology — Premium style.css
 * ITCSS order: Settings → Tools → Base → Objects → Components → Utilities
 * All existing class names preserved. Zero HTML edits required to upgrade.
 * ====================================================================== */

/* ========================================================================
 * 1. SETTINGS — Design Tokens (CSS Variables, no selectors)
 * ====================================================================== */

:root {
    /* ——— Primary tonal ramp (Deep Navy) ——— */
    --color-primary-50:  #f1f5fb;
    --color-primary-100: #e0e9f6;
    --color-primary-200: #b8cde9;
    --color-primary-300: #84aad5;
    --color-primary-400: #4a7fbb;
    --color-primary-500: #2563eb;
    --color-primary-600: #1547a8;
    --color-primary-700: #0f3466;
    --color-primary-800: #0b2b50;
    --color-primary-900: #071a2f;
    --color-primary-950: #04101d;

    --color-primary:      var(--color-primary-900);
    --color-primary-dark: var(--color-primary-950);

    /* ——— Accent Blue ——— */
    --color-accent-50:  #eff6ff;
    --color-accent-100: #dbeafe;
    --color-accent-200: #bfdbfe;
    --color-accent-300: #93c5fd;
    --color-accent-400: #60a5fa;
    --color-accent-500: #2563eb;
    --color-accent-600: #1d4ed8;
    --color-accent-700: #1e40af;
    --color-accent-800: #1e3a8a;
    --color-accent-900: #172554;

    --color-accent:       var(--color-accent-600);
    --color-accent-light: var(--color-accent-100);

    /* ——— Neutral (Secondary) ramp ——— */
    --color-secondary-50:  #f9fafb;
    --color-secondary-100: #f3f4f6;
    --color-secondary-200: #e5e7eb;
    --color-secondary-300: #d1d5db;
    --color-secondary-400: #9ca3af;
    --color-secondary-500: #6b7280;
    --color-secondary-600: #4b5563;
    --color-secondary-700: #374151;
    --color-secondary-800: #1f2937;
    --color-secondary-900: #111827;

    --color-secondary:      var(--color-secondary-800);
    --color-secondary-light:var(--color-secondary-600);

    /* ——— Backward-compat legacy neutral aliases ——— */
    --color-gray-50:      var(--color-secondary-50);
    --color-gray-100:     var(--color-secondary-100);
    --color-border:       var(--color-secondary-200);
    --color-input-border: var(--color-secondary-300);
    --color-white:        #ffffff;
    --color-blue-50:      var(--color-accent-50);
    --color-blue-100:     var(--color-accent-100);  /* FIXED: was UNDEFINED, caused wrong renders */
    --color-blue-200:     var(--color-accent-200);

    /* ——— Purple (Automate pillar & accents) ——— */
    --color-purple-50:  #f5f3ff;
    --color-purple-100: #ede9fe;
    --color-purple-200: #ddd6fe;
    --color-purple-300: #c4b5fd;
    --color-purple-400: #a78bfa;
    --color-purple-500: #8b5cf6;
    --color-purple-600: #7c3aed;

    /* ——— Gold (Build highlight, dashes) ——— */
    --color-gold-50:  #fffbeb;
    --color-gold-100: #fef3c7;
    --color-gold-200: #fde68a;
    --color-gold-300: #fcd34d;
    --color-gold-400: #fbbf24;
    --color-gold-500: #f59e0b;

    /* ——— Teal / Green (Repair pillar) ——— */
    --color-teal-50:  #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-500: #14b8a6;
    --color-green-500:#10b981;

    --color-whatsapp:      #25D366;
    --color-whatsapp-dark: #1ebd59;

    /* ——— Semantic ——— */
    --color-success-50:  #f0fdf4;
    --color-success-100: #dcfce7;
    --color-success-500: #22c55e;
    --color-success-700: #15803d;
    --color-error-50:    #fef2f2;
    --color-error-100:   #fee2e2;
    --color-error-300:   #fca5a5;
    --color-error-500:   #ef4444;
    --color-error-700:   #b91c1c;
    --color-warning-50:  #fffbeb;
    --color-warning-500: #f59e0b;

    /* ——— Border tokens ——— */
    --color-border-subtle: rgba(17, 24, 39, 0.08);
    --color-border-strong: rgba(17, 24, 39, 0.16);
    --color-border-accent: rgba(37, 99, 235, 0.28);
    --color-border-light:  rgba(255, 255, 255, 0.12);

    /* ——— Glass colors ——— */
    --glass-bg-1:     rgba(255, 255, 255, 0.06);
    --glass-bg-2:     rgba(255, 255, 255, 0.10);
    --glass-bg-3:     rgba(255, 255, 255, 0.14);
    --glass-stroke:   rgba(255, 255, 255, 0.12);
    --glass-stroke-s: rgba(255, 255, 255, 0.22);

    /* ====================================================================
     * TYPOGRAPHY
     * ================================================================== */
    --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Fluid type: clamp(min, vw-preferred, max) — zero jumpy px breakpoints */
    --fs-xs:   0.75rem;
    --fs-sm:   clamp(0.8125rem, 0.76rem + 0.13vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.88rem + 0.15vw, 1rem);
    --fs-md:   clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
    --fs-lg:   clamp(1.125rem, 1rem + 0.3125vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.1rem + 0.375vw, 1.5rem);
    --fs-2xl:  clamp(1.5rem, 1.25rem + 0.625vw, 1.875rem);
    --fs-3xl:  clamp(1.875rem, 1.45rem + 1.071vw, 2.5rem);
    --fs-4xl:  clamp(2.25rem, 1.6rem + 1.63vw, 3.25rem);
    --fs-5xl:  clamp(2.75rem, 1.8rem + 2.4vw, 4.25rem);

    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold:800;

    /* ====================================================================
     * SPACE — 4/8/12 modular scale
     * ================================================================== */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ====================================================================
     * RADIUS
     * ================================================================== */
    --radius-xs:   0.25rem;
    --radius-sm:   0.5rem;
    --radius-md:   0.625rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1.125rem;
    --radius-2xl:  1.5rem;
    --radius-3xl:  1.75rem;
    --radius-4xl:  2.25rem;
    --radius-full: 9999px;

    /* Backward-compat: match old naming */
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.125rem;
    --radius-2xl:1.5rem;

    /* ====================================================================
     * SHADOWS — Layered (ambient + key + rim-inset), navy-toned
     * ================================================================== */
    --shadow-1:
        0 1px 2px rgba(7, 26, 47, 0.06),
        0 1px 3px rgba(7, 26, 47, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
    --shadow-2:
        0 2px 4px rgba(7, 26, 47, 0.06),
        0 6px 14px rgba(7, 26, 47, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --shadow-3:
        0 4px 8px rgba(7, 26, 47, 0.07),
        0 14px 28px rgba(7, 26, 47, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.80);
    --shadow-4:
        0 8px 16px rgba(7, 26, 47, 0.08),
        0 24px 48px rgba(7, 26, 47, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.90);
    --shadow-5:
        0 16px 32px rgba(7, 26, 47, 0.10),
        0 40px 80px rgba(7, 26, 47, 0.14),
        0 0 0 1px rgba(7, 26, 47, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    --shadow-glow-blue:
        0 8px 30px rgba(37, 99, 235, 0.16),
        0 2px 6px rgba(37, 99, 235, 0.10);
    --shadow-glow-purple:
        0 8px 30px rgba(124, 58, 237, 0.18),
        0 2px 6px rgba(124, 58, 237, 0.10);
    --shadow-glow-whatsapp:
        0 8px 30px rgba(37, 211, 102, 0.24),
        0 2px 6px rgba(37, 211, 102, 0.15);

    /* Legacy shadow aliases (preserved so old call sites still work) */
    --shadow-sm:   var(--shadow-1);
    --shadow-md:   var(--shadow-2);
    --shadow-lg:   var(--shadow-3);
    --shadow-soft: var(--shadow-4);
    --shadow-glow: var(--shadow-glow-blue);

    /* ====================================================================
     * EASING — realistic spring curves
     * ================================================================== */
    --ease-linear: linear;
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* out-expo     */
    --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);    /* out-back     */
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);       /* in-out-quart */
    --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);         /* standard     */

    --transition-fast:   180ms var(--ease-soft);
    --transition:        280ms var(--ease-out);
    --transition-slow:   520ms var(--ease-out);
    --transition-slower: 800ms var(--ease-out);

    /* ====================================================================
     * FOCUS & Z-INDEX & PATTERNS
     * ================================================================== */
    --focus-ring:      0 0 0 2px var(--color-white), 0 0 0 5px rgba(37, 99, 235, 0.35);
    --focus-ring-dark: 0 0 0 2px rgba(7, 26, 47, 1), 0 0 0 5px rgba(191, 219, 254, 0.8);

    --z-header:     50;
    --z-mobile:     60;
    --z-overlay:    100;
    --z-modal:      200;
    --z-float:      1000;

    /* SVG data URIs (inline, no external requests) */
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
    --dots:      radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1.2px);
    --dots-dark: radial-gradient(rgba(7,26,47,0.12) 1px, transparent 1.2px);
}

/* ========================================================================
 * 2. TOOLS — Mixin-like global utilities (no component styles)
 * ====================================================================== */

/* ========================================================================
 * 3. BASE — Element-level resets (no classes, no IDs)
 * ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    color: var(--color-secondary-600);
    background-color: var(--color-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01", "ss03";
}

/* ----- Typography base ----- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-900);
    line-height: 1.15;
    margin: 0;
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.02em;
    word-break: normal;
    hyphens: auto;
}
h1 { font-size: var(--fs-5xl); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--fs-4xl); letter-spacing: -0.028em; line-height: 1.1;  }
h3 { font-size: var(--fs-3xl); letter-spacing: -0.022em; line-height: 1.15; }
h4 { font-size: var(--fs-2xl); letter-spacing: -0.018em; }
h5 { font-size: var(--fs-xl);  letter-spacing: -0.012em; }
h6 { font-size: var(--fs-lg);  letter-spacing: -0.008em; }

p { margin: 0 0 var(--space-4); color: var(--color-secondary-600); }

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-bold); color: var(--color-secondary-800); }
em, i { font-style: italic; }

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-600); }

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

hr {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-8) 0;
}

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.5rem; }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--color-accent-500); }

code, pre, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
    background-color: var(--color-secondary-50);
    border-radius: var(--radius-xs);
    padding: 0.12em 0.4em;
}

blockquote {
    margin: var(--space-6) 0;
    padding: var(--space-4) var(--space-6);
    border-left: 4px solid var(--color-accent-500);
    background-color: var(--color-accent-50);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    color: var(--color-secondary-700);
    font-style: italic;
}

/* ----- Forms (element-level) ----- */
button, input, select, textarea, optgroup {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.5;
    margin: 0;
    touch-action: manipulation;
}
button, [role="button"], [type="button"], [type="submit"], [type="reset"], summary {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
input:focus, textarea:focus, select:focus, button:focus {
    outline: none;
}

/* ----- Selection styling ----- */
::selection {
    background: rgba(37, 99, 235, 0.18);
    color: var(--color-primary-900);
}
::-moz-selection {
    background: rgba(37, 99, 235, 0.18);
    color: var(--color-primary-900);
}
.section-dark ::selection,
.hero ::selection,
.footer ::selection {
    background: rgba(191, 219, 254, 0.30);
    color: var(--color-white);
}

/* ----- Global :focus-visible ONLY, never :focus ----- */
:focus-visible {
    outline: none;
    border-radius: 6px;
    box-shadow: var(--focus-ring);
}
.section-dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible {
    box-shadow: var(--focus-ring-dark);
}

/* ----- Scrollbar (thin, toned, non-intrusive) ----- */
@supports (scrollbar-color: auto auto) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary-700) var(--color-secondary-100);
    }
    .section-dark,
    .hero,
    .footer {
        scrollbar-color: var(--color-accent-300) rgba(255,255,255,0.05);
    }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-secondary-50); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary-600), var(--color-accent-500));
    border-radius: var(--radius-full);
    border: 2px solid var(--color-secondary-50);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--color-primary-700), var(--color-accent-600)); }

/* ----- Fieldset / legend ----- */
fieldset { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-6); }
legend { padding: 0 var(--space-3); font-weight: var(--fw-bold); color: var(--color-primary-900); }

/* Placeholder */
::placeholder { color: rgba(107, 114, 128, 0.55); font-weight: var(--fw-regular); opacity: 1; }

/* ========================================================================
 * 4. OBJECTS — Layout, grids, reveal primitives
 * ====================================================================== */

.container {
    max-width: min(1200px, 94vw);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.section-padding { padding: clamp(3.25rem, 6vw, 6rem) 0; }

.reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.995);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
    will-change: opacity, transform;
    transition-delay: var(--reveal-delay, 0ms);
    contain: layout style;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

.three-col-grid    { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.two-col-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.section-grid     { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.content-grid      { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.container-max   { max-width: 768px;  margin: 0 auto; padding: 0 var(--space-6); }

.flex-row       { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.flex-between    { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.divider         { height: 1px; background: var(--color-border-subtle); margin: var(--space-8) 0; }
.hover-card      { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.hover-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-4); }
body.overflow-hidden { overflow: hidden; }

/* ========================================================================
 * 5. COMPONENTS — Top Bar + Header/Nav + Buttons + Mobile Menu
 * ====================================================================== */

/* ---- Top Bar ---- */
.top-bar {
    background: linear-gradient(180deg, var(--color-primary-950) 0%, var(--color-primary-900) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 0.6rem 0;
    font-size: var(--fs-xs);
    color: var(--color-white);
    position: relative;
}
.top-bar::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 160px;
    opacity: 0.04;
    pointer-events: none;
}
.top-bar .container { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.top-bar-links { display: flex; gap: var(--space-8); }
.top-bar-link {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: rgba(255,255,255,0.82);
    font-weight: var(--fw-medium);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.top-bar-link:hover { color: var(--color-blue-200); transform: translateY(-1px); }
.top-bar-location { display: inline-flex; align-items: center; gap: var(--space-2); opacity: 0.9; }

/* ---- Header / Sticky Nav ---- */
.header {
    position: sticky; top: 0; z-index: var(--z-header);
    background-color: rgba(255,255,255,0.78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(7,26,47,0.06);
    box-shadow: 0 1px 0 rgba(7,26,47,0.04), 0 12px 30px -20px rgba(7,26,47,0.18);
    transition: box-shadow var(--transition), backdrop-filter var(--transition);
}
.header .container {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--space-4); padding-bottom: var(--space-4);
    min-height: 76px;
}
.logo-img {
    height: 4rem; width: auto; object-fit: contain;
    transition: transform 0.45s var(--ease-out);
    transform-origin: left center;
}
a.logo:hover .logo-img { transform: scale(1.035); }

.desktop-nav { display: none; align-items: center; gap: var(--space-10); }
.nav-link {
    position: relative; display: inline-block;
    font-size: 0.8125rem; font-weight: var(--fw-extrabold);
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-secondary-700);
    padding: 0.2rem 0;
    transition: color var(--transition-fast);
}
.nav-link::after {
    content: '';
    position: absolute; left: 50%; bottom: -0.35rem;
    width: 0; height: 2px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-purple-500), var(--color-accent-500));
    background-size: 200% 100%;
    transform: translateX(-50%);
    transition: width var(--transition), background-position 2.5s linear;
}
.nav-link.active, .nav-link:hover { color: var(--color-primary-900); }
.nav-link.active::after, .nav-link:hover::after { width: 100%; background-position: 200% 0; }

/* ---- Buttons ---- */
.btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-full);
    font-weight: var(--fw-extrabold); font-size: 0.8125rem;
    letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
    transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background 280ms var(--ease-out),
                color 280ms var(--ease-out), border-color 280ms var(--ease-out), filter 280ms var(--ease-out);
    border: 1px solid transparent; cursor: pointer; overflow: hidden; isolation: isolate;
    text-decoration: none; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit; user-select: none;
}
.btn > svg { flex-shrink: 0; }
.btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.14) 47%,
        rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.14) 53%, transparent 70%);
    transform: translateX(-115%);
    transition: transform 900ms var(--ease-out);
    pointer-events: none; z-index: -1; border-radius: inherit;
}
.btn-primary {
    background-image: linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-900) 45%, var(--color-primary-700) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-2), var(--shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.05);
}
.btn-outline {
    background: transparent; color: var(--color-primary-900);
    border: 2px solid var(--color-primary-900);
    padding: calc(0.85rem - 1px) calc(1.75rem - 1px);
}
.btn-outline:hover {
    background: var(--color-primary-900); color: var(--color-white);
    box-shadow: var(--shadow-2), var(--shadow-glow-blue);
}
.btn-white {
    background: var(--color-white); color: var(--color-primary-900);
    box-shadow: var(--shadow-3), 0 25px 50px -12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(7,26,47,0.05);
}
.btn-white:hover { background: var(--color-blue-50); box-shadow: var(--shadow-4), 0 30px 60px -12px rgba(0,0,0,0.26), inset 0 1px 0 rgba(7,26,47,0.06); }
.btn-whatsapp {
    background-image: linear-gradient(135deg, var(--color-whatsapp) 0%, var(--color-green-500) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-2), var(--shadow-glow-whatsapp), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-whatsapp:hover { box-shadow: var(--shadow-3), var(--shadow-glow-whatsapp), 0 0 0 3px rgba(37,211,102,0.22), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-large { padding: 1.05rem 2.4rem; font-size: 0.9375rem; }
.w-full { width: 100%; }

@media (hover: hover) {
    .btn:hover { transform: translateY(-2px); filter: brightness(1.04) saturate(1.05); }
    .btn:hover::after { transform: translateX(115%); }
    .btn:active { transform: translateY(0); filter: brightness(0.98); }
}

/* ---- Mobile Menu ---- */
.menu-toggle {
    display: block; background: none; border: none;
    color: var(--color-primary-900);
    padding: var(--space-2); border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.menu-toggle:hover { background: var(--color-secondary-50); color: var(--color-accent-600); }
.menu-toggle:active { transform: scale(0.94); }
.mobile-menu {
    position: fixed; top: 0; right: 0;
    width: min(18rem, 84vw); height: 100%;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-secondary-50) 100%);
    z-index: var(--z-mobile);
    box-shadow: -16px 0 50px rgba(7,26,47,0.12), -2px 0 0 rgba(7,26,47,0.05) inset;
    transform: translateX(100%);
    transition: transform 420ms var(--ease-out);
    overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-inner { padding: var(--space-8); }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-12); }
.menu-close {
    background: none; border: none; color: var(--color-secondary-600);
    padding: var(--space-2); border-radius: var(--radius-lg);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.menu-close:hover { background: var(--color-secondary-100); color: var(--color-primary-900); }
.menu-close:active { transform: scale(0.92) rotate(90deg); }
.mobile-nav-links { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); }
.mobile-nav-link {
    display: inline-flex; align-items: center;
    font-size: 1.05rem; font-weight: var(--fw-extrabold);
    letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--color-secondary-700);
    padding: var(--space-2) 0; position: relative;
    transition: color var(--transition-fast), transform var(--transition-fast), padding-left var(--transition-fast);
}
.mobile-nav-link::before {
    content: ''; position: absolute; left: -1rem; top: 50%;
    width: 0; height: 3px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-purple-500));
    transition: width var(--transition), left var(--transition);
    transform: translateY(-50%);
}
.mobile-nav-link:hover { color: var(--color-primary-900); padding-left: 0.5rem; }
.mobile-nav-link:hover::before { width: 0.75rem; left: -0.8rem; }
.mobile-contact {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border-subtle);
    display: flex; flex-direction: column; gap: var(--space-5);
}
.mobile-contact-link {
    display: inline-flex; align-items: center; gap: var(--space-4);
    color: var(--color-secondary-600);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.mobile-contact-link svg { color: var(--color-accent-500); flex-shrink: 0; }
.mobile-contact-link:hover { color: var(--color-primary-900); transform: translateX(2px); }
.menu-overlay {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 70% 0%, rgba(7,26,47,0.55), rgba(7,26,47,0.75) 80%);
    z-index: calc(var(--z-mobile) - 1);
    opacity: 0; pointer-events: none;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: opacity var(--transition);
}
.menu-overlay.active { opacity: 1; pointer-events: auto; }
.hidden { display: none !important; }

/* ========================================================================
 * 5.x COMPONENTS — Hero + Sections + Pillars + Steps + Testimonials + CTA
 * ====================================================================== */

/* ---- Hero Section ---- */
.hero {
    position: relative;
    min-height: 100svh;
    min-height: calc(100vh - 0px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-primary-950);
    color: var(--color-white);
    isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg-img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.18;
    filter: saturate(1.05) blur(1px);
    mix-blend-mode: luminosity;
}
/* ---- FIXED L360 SYNTAX ERROR: previously missing closing paren; now correct 3-radial mesh gradient ---- */
.hero-bg-gradient {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 45% 55% at 12% 18%, rgba(37, 99, 235, 0.42), transparent 60%),
        radial-gradient(ellipse 50% 60% at 88% 30%, rgba(124, 58, 237, 0.34), transparent 60%),
        radial-gradient(ellipse 75% 55% at 50% 110%, rgba(20, 184, 166, 0.22), transparent 65%),
        linear-gradient(180deg, var(--color-primary-950) 0%, #050f1c 55%, var(--color-primary-950) 100%);
}
.hero-bg-radial { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before,
.hero-bg-gradient::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 200px 200px;
    opacity: 0.045;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 2;
}
.hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--dots);
    background-size: 22px 22px;
    opacity: 0.06;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    pointer-events: none;
    z-index: 3;
    animation: grid-drift 30s linear infinite;
}
.hero-content {
    position: relative; z-index: 10;
    padding-top: 7rem; padding-bottom: 4rem;
}
.hero-badge {
    display: inline-flex;
    align-items: center; gap: var(--space-2);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-white);
    background: var(--glass-bg-2);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-stroke);
    margin-bottom: var(--space-8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, var(--shadow-3);
}
.hero-badge-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-blue-200);
    box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.22), 0 0 16px rgba(191, 219, 254, 0.6);
    animation: pulse 2s infinite;
}
.hero-title {
    font-size: clamp(2.5rem, 4.2vw + 1rem, 4.5rem);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-white);
    margin-bottom: var(--space-8);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .hero-title {
        background: linear-gradient(180deg,
            #fff 0%,
            var(--color-blue-100) 58%,
            var(--color-blue-200) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .hero-title::selection {
        -webkit-text-fill-color: var(--color-primary-900);
        background: rgba(191,219,254,0.3);
    }
}
.hero-subtitle {
    font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem);
    line-height: 1.65;
    font-weight: var(--fw-regular);
    color: rgba(255,255,255,0.78);
    margin-bottom: var(--space-10);
    max-width: 48rem;
}
.hero-buttons {
    display: flex; flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.hero-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    max-width: 48rem;
}
.glass-card {
    position: relative;
    padding: var(--space-5);
    color: var(--color-white);
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-2xl);
    box-shadow: 0 12px 32px rgba(2,6,23,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
    z-index: 1;
}
.glass-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top left, rgba(191,219,254,0.12), transparent 55%);
    pointer-events: none; z-index: -1;
}
@media (hover: hover) {
    .glass-card:hover {
        transform: translateY(-3px);
        border-color: rgba(191,219,254,0.35);
        box-shadow: 0 18px 44px rgba(2,6,23,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
    }
}
.glass-card-header {
    display: flex; align-items: center;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
}
.glass-card-icon {
    color: var(--color-blue-200);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 4px rgba(191,219,254,0.35));
}
.glass-card-title { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.glass-card-text  { font-size: var(--fs-sm); color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0; }

.hero-features { display: none; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-16); }
.hero-feature-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    color: var(--color-white);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.hero-feature-card:hover { transform: translateY(-4px); border-color: rgba(191,219,254,0.3); background: rgba(255,255,255,0.08); }
.hero-feature-icon { color: var(--color-blue-200); margin-bottom: var(--space-4); }
.hero-feature-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.hero-feature-text { font-size: var(--fs-sm); color: rgba(255,255,255,0.8); margin: 0; line-height: 1.6; }

/* ---- Section Headers ---- */
.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}
.section-label {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-accent);
    background: rgba(37, 99, 235, 0.08);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent-600);
    margin-bottom: var(--space-4);
    box-shadow: inset 0 1px 0 rgba(37,99,235,0.06);
}
.section-title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    margin-bottom: var(--space-6);
    display: inline-block;
    position: relative;
}
.section-header .section-title { display: block; text-align: center; }
.section-header .section-title::after {
    content: '';
    display: block;
    width: 72px; height: 4px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-purple-500));
    margin: var(--space-5) auto 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.section-description {
    font-size: var(--fs-md);
    line-height: 1.7;
    max-width: 48rem;
    margin: 0 auto;
    color: var(--color-secondary-600);
}
.section-gray { background: var(--color-secondary-50); position: relative; }
.section-gray::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--dots-dark);
    background-size: 28px 28px;
    opacity: 0.35;
    mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 15%, black 85%, transparent 100%);
    pointer-events: none;
}
.section-dark {
    background: var(--color-primary-900);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.section-dark::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 15% 10%, rgba(37,99,235,0.28), transparent 60%),
        radial-gradient(ellipse 70% 50% at 100% 80%, rgba(124,58,237,0.22), transparent 55%),
        linear-gradient(180deg, var(--color-primary-900), #04101d 100%);
    z-index: -2;
}
.section-dark::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 220px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: overlay;
}
.section-dark .section-title, .section-dark .section-label { color: var(--color-white); }
.section-dark .section-label {
    color: var(--color-blue-200);
    background: rgba(191, 219, 254, 0.1);
    border-color: rgba(191, 219, 254, 0.25);
}
.section-dark .section-title::after { background: linear-gradient(90deg, var(--color-blue-200), var(--color-purple-300)); }
.section-dark .section-description { color: var(--color-blue-100); }

.section-banner {
    background: var(--color-primary-900);
    padding: var(--space-12) 0;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}
.section-banner::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(37,99,235,0.25), transparent 60%);
    pointer-events: none;
}
.section-banner h1, .section-banner h2 { color: var(--color-white); }

/* ---- Pillar Overview Cards (3-click banner on services top) ---- */
.pillar-overview-card {
    position: relative;
    padding: var(--space-6);
    border-radius: var(--radius-3xl);
    background: linear-gradient(180deg, var(--color-white), var(--color-secondary-50));
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
    cursor: pointer;
}
.pillar-overview-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 55%, var(--pillar-accent, rgba(37,99,235,0.06)) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
}
.pillar-overview-card:hover::before { opacity: 1; }
.pillar-overview-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-4), var(--shadow-glow-blue);
    border-color: var(--color-border-accent);
}
.pillar-overview-icon { margin-bottom: var(--space-4); filter: drop-shadow(0 4px 10px rgba(37,99,235,0.22)); }

/* ---- Service Pillars (index.html / Build-Automate-Repair 3 cards) ---- */
.service-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
.service-pillar-card {
    position: relative;
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-secondary-50) 0%, transparent 60%);
    border-radius: var(--radius-3xl);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-2);
    padding: var(--space-10);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
    overflow: hidden;
    z-index: 1;
}
.service-pillar-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37,99,235,0), rgba(124,58,237,0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    transition: background var(--transition);
    z-index: 2;
}
.service-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-4), var(--shadow-glow-blue);
    background-image: linear-gradient(180deg, rgba(37,99,235,0.05) 0%, transparent 60%);
    border-color: rgba(37,99,235,0.22);
}
.service-pillar-card:hover::before {
    background: linear-gradient(135deg, rgba(37,99,235,0.5), rgba(124,58,237,0.35));
}
.service-pillar-icon-wrapper {
    width: 4rem; height: 4rem;
    border-radius: var(--radius-xl);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-6);
    position: relative;
    transition: transform var(--transition), box-shadow var(--transition);
    will-change: transform;
}
.service-pillar-card:hover .service-pillar-icon-wrapper {
    transform: translateY(-2px) scale(1.05);
}
.service-pillar-icon-wrapper.blue {
    background-image: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(37,99,235,0.05));
    color: var(--color-primary-900);
    box-shadow: inset 0 1px 0 rgba(37,99,235,0.2), 0 6px 20px rgba(37,99,235,0.18);
    border: 1px solid rgba(37,99,235,0.25);
}
.service-pillar-icon-wrapper.cyan {
    background-image: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(20,184,166,0.04));
    color: #0e7490;
    box-shadow: inset 0 1px 0 rgba(20,184,166,0.2), 0 6px 20px rgba(20,184,166,0.15);
    border: 1px solid rgba(20,184,166,0.25);
}
.service-pillar-icon-wrapper.purple {
    background-image: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(124,58,237,0.05));
    color: var(--color-purple-600);
    box-shadow: inset 0 1px 0 rgba(124,58,237,0.2), 0 6px 20px rgba(124,58,237,0.18);
    border: 1px solid rgba(124,58,237,0.28);
}
.service-pillar-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-3); color: var(--color-primary-900); letter-spacing: -0.015em; }
.service-pillar-text  { color: var(--color-secondary-600); margin: 0; line-height: 1.7; }
.service-pillar-list  { list-style: none; padding: 0; margin: var(--space-6) 0; }
.service-pillar-item  {
    display: flex; align-items: flex-start;
    padding: 0.35rem 0;
    color: var(--color-secondary-600);
}
.service-pillar-check {
    margin-right: var(--space-3);
    margin-top: 0.1rem;
    color: var(--color-accent-500);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(37,99,235,0.3));
}

/* ---- Service / Feature / Product Cards ---- */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-6); }
.service-card, .feature-card, .info-card, .project-card, .contact-card, .portfolio-card {
    position: relative;
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-secondary-50), transparent 60%);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-2);
    padding: var(--space-7);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
    overflow: hidden;
    z-index: 1;
}
.service-card::after, .feature-card::after, .info-card::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top left, rgba(37,99,235,0.08), transparent 55%);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
    z-index: -1;
}
@media (hover: hover) {
    .service-card:hover, .feature-card:hover, .info-card:hover, .project-card:hover, .contact-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-4), var(--shadow-glow-blue);
        border-color: var(--color-border-accent);
    }
    .service-card:hover::after, .feature-card:hover::after, .info-card:hover::after { opacity: 1; }
}
.service-card-icon, .info-card-icon, .project-card-icon, .contact-card-icon {
    width: 3rem; height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--color-accent-50);
    color: var(--color-accent-600);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(37,99,235,0.15), 0 4px 12px rgba(37,99,235,0.10);
    border: 1px solid rgba(37,99,235,0.18);
}
.info-card-header, .project-card-header, .contact-card-header {
    display: flex; align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.service-card-title, .feature-card-title-shared, .info-card-title, .project-card-title, .contact-card-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--color-primary-900);
    margin: 0;
    letter-spacing: -0.015em;
}
.service-card-text, .info-card-text, .project-card-text, .contact-card-text {
    color: var(--color-secondary-600);
    font-size: var(--fs-base);
    line-height: 1.7;
    margin: 0;
}
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.feature-card { padding: var(--space-5); }
.feature-card-header { display: flex; align-items: center; margin-bottom: var(--space-2); gap: var(--space-2); }
.feature-card-icon { margin-right: var(--space-2); color: var(--color-primary-900); }
.feature-card-title { font-weight: var(--fw-bold); color: var(--color-primary-900); }
.feature-card-text { font-size: var(--fs-sm); line-height: 1.6; color: var(--color-secondary-600); margin: 0; }

/* ---- Steps Grid ---- */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.step-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-3xl);
    padding: var(--space-8);
    color: var(--color-white);
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
    position: relative;
    overflow: hidden;
}
.step-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, rgba(191,219,254,0.10), transparent 55%);
    pointer-events: none;
}
.step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(191,219,254,0.28);
    background: rgba(255,255,255,0.08);
}
.step-number {
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-blue-200);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-xl);
    margin-bottom: var(--space-6);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 20px rgba(2,6,23,0.35);
    position: relative;
    z-index: 1;
}
.step-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.step-text  { color: var(--color-blue-100); line-height: 1.7; margin: 0; }

/* ---- Why Choose (dark, list layout) ---- */
.why-choose-list { display: flex; flex-direction: column; gap: var(--space-8); }
.why-choose-item { display: flex; align-items: flex-start; transition: transform var(--transition); }
.why-choose-item:hover { transform: translateX(4px); }
.why-choose-icon-wrapper {
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.18);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-right: var(--space-6);
    flex-shrink: 0;
    color: var(--color-blue-200);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.why-choose-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-white); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.why-choose-text  { color: var(--color-blue-100); line-height: 1.7; margin: 0; }

/* ---- Testimonial Cards ---- */
.testimonial-card {
    position: relative;
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-white), var(--color-secondary-50));
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-8) var(--space-8) var(--space-8);
    box-shadow: var(--shadow-2);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
    z-index: 1;
}
.testimonial-card::before {
    content: "\201C";
    position: absolute;
    top: -1.2rem; left: 1.25rem;
    font-size: 9rem;
    line-height: 1;
    font-family: Georgia, serif;
    color: var(--color-accent-500);
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
    font-weight: var(--fw-extrabold);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-4), var(--shadow-glow-blue); border-color: var(--color-border-accent); }
.testimonial-quote {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--color-secondary-700);
    margin: 0 0 var(--space-6);
    font-style: normal;
}
.testimonial-author { display: flex; align-items: center; }
.testimonial-avatar {
    width: 3rem; height: 3rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-600));
    color: var(--color-white);
    font-weight: var(--fw-bold);
    display: flex; align-items: center; justify-content: center;
    margin-right: var(--space-4);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.2);
    border: 2px solid var(--color-white);
}
.testimonial-name { font-weight: var(--fw-bold); color: var(--color-primary-900); font-size: var(--fs-base); }
.testimonial-role { font-size: var(--fs-sm); color: var(--color-secondary-500); }

/* ---- CTA Section (gradient banner) ---- */
.cta-section {
    position: relative;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-accent-700) 48%, var(--color-purple-600) 100%);
    border-radius: var(--radius-4xl);
    padding: var(--space-12);
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
    box-shadow: var(--shadow-5), var(--shadow-glow-purple);
    isolation: isolate;
}
.cta-section::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 200px;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}
.cta-section::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--dots);
    background-size: 24px 24px;
    opacity: 0.05;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.cta-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.025em;
    margin-bottom: var(--space-4);
    color: var(--color-white);
}
.cta-text {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
    margin: 0 auto var(--space-8);
    max-width: 42rem;
}
.cta-buttons {
    display: flex; flex-direction: column; gap: var(--space-4);
    justify-content: center; align-items: center;
}

/* ========================================================================
 * 5.y COMPONENTS — Footer + WhatsApp Float + Forms + FAQ + Portfolio
 *                    + Pillar Labels + Discount Modal
 * ====================================================================== */

/* ---- Footer ---- */
.footer {
    position: relative;
    background-color: var(--color-primary-950);
    background-image:
        linear-gradient(180deg, #061427 0%, var(--color-primary-950) 50%, #02070e 100%);
    color: rgba(255,255,255,0.82);
    padding-top: var(--space-16);
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-purple-500), #14b8a6, var(--color-accent-500));
    background-size: 300% 100%;
    animation: gradient-x 10s linear infinite;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
.footer::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 220px;
    opacity: 0.045;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.footer-bg {
    position: absolute; inset: 0;
    background-image: var(--dots);
    background-size: 26px 26px;
    opacity: 0.05;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 0%, transparent 70%);
    pointer-events: none;
}
.footer .container { position: relative; z-index: 1; padding-bottom: var(--space-4); }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}
.footer-brand-text { color: rgba(255,255,255,0.72); line-height: 1.75; margin: var(--space-6) 0; font-size: var(--fs-sm); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social-link {
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl);
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform var(--transition), color var(--transition), background var(--transition), border-color var(--transition);
}
.footer-social-link:hover {
    transform: translateY(-3px) rotate(-3deg);
    color: var(--color-blue-200);
    background: rgba(191,219,254,0.12);
    border-color: rgba(191,219,254,0.28);
}
.footer-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: var(--space-6);
    position: relative;
    padding-bottom: var(--space-3);
}
.footer-title::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 44px; height: 2px; border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-purple-500));
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-link {
    color: rgba(255,255,255,0.72);
    font-size: var(--fs-sm);
    display: inline-flex; align-items: center;
    position: relative;
    transition: color var(--transition-fast), transform var(--transition-fast), padding-left var(--transition-fast);
    padding-left: 0;
}
.footer-link::before {
    content: '';
    position: absolute; left: -0.9rem; top: 50%;
    width: 4px; height: 4px; border-radius: var(--radius-full);
    background: var(--color-accent-500);
    transform: translateY(-50%) scale(0);
    transition: transform var(--transition);
}
.footer-link:hover { color: var(--color-blue-200); transform: translateX(4px); padding-left: 0.3rem; }
.footer-link:hover::before { transform: translateY(-50%) scale(1); }
.footer-contact-item {
    display: flex; align-items: flex-start;
    margin-bottom: var(--space-4);
    color: rgba(255,255,255,0.75);
    font-size: var(--fs-sm);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-contact-item:hover { color: var(--color-blue-200); transform: translateX(2px); }
.footer-contact-icon { margin-right: var(--space-3); flex-shrink: 0; margin-top: 0.1rem; color: var(--color-blue-200); }
.footer-bottom {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-8) 0;
    margin-top: var(--space-8);
    z-index: 1;
}
.footer-bottom-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-6);
    text-align: center;
}
.footer-copyright { color: rgba(255,255,255,0.55); font-size: var(--fs-sm); }
.footer-bottom-links { display: flex; gap: var(--space-8); }
.footer-bottom-link {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.55);
    transition: color var(--transition-fast);
}
.footer-bottom-link:hover { color: var(--color-blue-200); }

/* ---- WhatsApp Float Button ---- */
.whatsapp-float { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-float); }
.whatsapp-float-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 3.6rem; height: 3.6rem;
    border-radius: var(--radius-full);
    color: var(--color-white);
    background-image: linear-gradient(135deg, var(--color-whatsapp) 0%, var(--color-green-500) 100%);
    box-shadow: var(--shadow-4), var(--shadow-glow-whatsapp), inset 0 1px 0 rgba(255,255,255,0.22),
                0 0 0 3px rgba(37,211,102,0.14);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    will-change: transform;
    isolation: isolate;
}
.whatsapp-float-btn::before,
.whatsapp-float-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-whatsapp);
    opacity: 0.6;
    animation: pulse-ring 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
    z-index: -1;
}
.whatsapp-float-btn::after { animation-delay: 0.8s; }
.whatsapp-float-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-5), var(--shadow-glow-whatsapp), inset 0 1px 0 rgba(255,255,255,0.28),
                0 0 0 5px rgba(37,211,102,0.22);
    filter: brightness(1.06);
}
.whatsapp-float-btn:active { transform: translateY(0) scale(0.97); }

/* ---- Forms ---- */
.contact-form, .quote-form, .focus-form, .discount-form, .generic-form {
    background-image: linear-gradient(180deg, #fefefe, #fbfbfd);
    background-color: var(--color-white);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-4), inset 0 1px 0 rgba(255,255,255,0.9);
    padding: var(--space-8);
    border: 1px solid var(--color-border-subtle);
}
.form-row { margin-bottom: var(--space-5); }
.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-secondary-700);
    letter-spacing: 0.005em;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 0.9rem 1.05rem;
    font-size: var(--fs-base);
    font-family: inherit;
    font-weight: var(--fw-regular);
    color: var(--color-secondary-800);
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, #ffffff, #fcfcfd);
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: inset 0 1px 2px rgba(7,26,47,0.04);
    transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
                background-color 180ms var(--ease-out), transform 180ms var(--ease-out), color 180ms var(--ease-out);
    outline: none;
    -webkit-appearance: none;
            appearance: none;
}
.form-textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071a2f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 1.25rem 1.25rem;
    padding-right: 2.6rem;
    cursor: pointer;
}
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: var(--color-border-accent); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--color-accent-500);
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12), 0 0 0 1px rgba(37,99,235,0.6) inset;
    transform: translateY(-1px);
    color: var(--color-secondary-800);
}
.form-input::placeholder, .form-textarea::placeholder { color: rgba(107,114,128,0.6); }
.form-input:invalid:not(:placeholder-shown) { border-color: rgba(239, 68, 68, 0.6); }
.form-input:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 4px rgba(239,68,68,0.10); }
.form-error {
    display: none;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    color: #b91c1c;
    font-size: var(--fs-sm);
    border-radius: var(--radius-lg);
    animation: fadeIn 320ms var(--ease-out);
}
.form-error.visible { display: block; }
.form-success {
    display: none;
    margin-top: var(--space-3);
    padding: var(--space-4);
    background-color: rgba(22,163,74,0.08);
    border: 1px solid rgba(22,163,74,0.22);
    color: #15803d;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: var(--radius-lg);
    text-align: center;
    animation: fadeIn 320ms var(--ease-out);
}
.form-success.visible { display: block; }
.form-required { color: var(--color-error-500); margin-left: 2px; }
.form-hint {
    font-size: var(--fs-xs);
    color: var(--color-secondary-500);
    margin-top: var(--space-2);
    display: block;
}

/* ---- Focus Box (services callouts) ---- */
.focus-box {
    border-radius: var(--radius-3xl);
    background: linear-gradient(180deg, var(--color-white), var(--color-secondary-50));
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-10);
    box-shadow: var(--shadow-3);
}
.focus-title { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--color-primary-900); margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.focus-lead { color: var(--color-secondary-600); line-height: 1.7; margin-bottom: var(--space-6); }
.focus-list { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-4); }
.focus-list-item {
    display: flex; align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    background: rgba(37,99,235,0.04);
    border: 1px solid rgba(37,99,235,0.08);
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.focus-list-item:hover { transform: translateX(4px); border-color: rgba(37,99,235,0.22); background: rgba(37,99,235,0.07); }
.focus-list-icon { color: var(--color-accent-500); margin-right: var(--space-3); flex-shrink: 0; }

/* ---- FAQ ---- */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item {
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-white), #fbfbfd);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out),
                border-color 320ms var(--ease-out), background-color 320ms var(--ease-out);
    position: relative;
}
.faq-item::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    background: transparent;
    border-image: linear-gradient(180deg, var(--color-accent-500), var(--color-purple-500)) 1;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 320ms var(--ease-out);
}
.faq-item:hover { border-color: rgba(37,99,235,0.2); }
.faq-item.active {
    box-shadow: var(--shadow-4), var(--shadow-glow-blue);
    border-color: var(--color-border-accent);
    background-image: linear-gradient(180deg, #ffffff, rgba(37,99,235,0.03));
}
.faq-item.active::before { transform: scaleY(1); }
.faq-question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-6) var(--space-6);
    padding-left: calc(var(--space-6) + var(--space-3));
    background: none; border: none; cursor: pointer;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-primary-900);
    text-align: left;
    transition: padding var(--transition);
    font-family: inherit;
    line-height: 1.5;
}
.faq-item.active .faq-question { padding-left: calc(var(--space-6) + var(--space-4)); }
.faq-chevron {
    margin-left: var(--space-4);
    color: var(--color-accent-600);
    transition: transform 380ms var(--ease-out), color var(--transition-fast);
    flex-shrink: 0;
}
.faq-item.active .faq-chevron { transform: rotate(180deg); color: var(--color-purple-600); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 var(--space-6);
    transition: max-height 480ms var(--ease-out), padding 320ms var(--ease-out);
    clip-path: inset(0 0 100% 0);
}
.faq-item.active .faq-answer {
    padding: var(--space-4) var(--space-6) var(--space-7);
    padding-left: calc(var(--space-6) + var(--space-4));
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transition: max-height 480ms var(--ease-out), padding 320ms var(--ease-out),
                clip-path 450ms var(--ease-out);
}
.faq-answer p, .faq-answer li { color: var(--color-secondary-600); line-height: 1.7; }
.faq-answer p { margin: 0 0 var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { padding-left: 1.1rem; margin: var(--space-3) 0; }
.faq-answer li { margin: 0.25rem 0; }

.faq-group-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary-900);
    margin: var(--space-8) 0 var(--space-5);
    letter-spacing: -0.015em;
    display: inline-flex; align-items: center; gap: var(--space-3);
}
.faq-group-title::before {
    content: '';
    display: inline-block;
    width: 6px; height: 1.5rem;
    border-radius: var(--radius-full);
    background: linear-gradient(180deg, var(--color-accent-500), var(--color-purple-500));
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.faq-group { margin-bottom: var(--space-12); }

/* ---- Portfolio / Gallery ---- */
.filter-bar {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-12);
}
.filter-btn {
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.03em;
    border: 1.5px solid var(--color-border-subtle);
    background-color: var(--color-white);
    color: var(--color-secondary-600);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition),
                background-image var(--transition), color var(--transition), border-color var(--transition);
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.filter-btn:hover {
    transform: translateY(-2px);
    border-color: var(--color-border-accent);
    color: var(--color-primary-900);
    box-shadow: var(--shadow-2);
}
.filter-btn.active {
    background-image: linear-gradient(135deg, var(--color-primary-800), var(--color-accent-600));
    border-color: transparent;
    color: var(--color-white);
    box-shadow: var(--shadow-3), var(--shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,0.18);
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-8);
}
.portfolio-card {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    will-change: transform;
}
.portfolio-card:hover {
    transform: translateY(-7px) scale(1.005);
    box-shadow: var(--shadow-5), var(--shadow-glow-purple);
    border-color: var(--color-border-accent);
}
.portfolio-card.hidden { display: none !important; }
.portfolio-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-secondary-50);
}
.portfolio-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--ease-out), filter var(--transition);
}
.portfolio-card:hover .portfolio-img {
    transform: scale(1.08);
    filter: saturate(1.08);
}
.portfolio-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7,26,47,0.88) 100%);
    display: flex; align-items: flex-end;
    padding: var(--space-5);
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay-label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: var(--fw-bold); color: var(--color-white);
    font-size: var(--fs-sm);
}
.portfolio-content {
    padding: var(--space-5) var(--space-6) var(--space-6);
}
.portfolio-category {
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-600);
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.12);
}
.portfolio-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-primary-900);
    margin-bottom: var(--space-3);
    letter-spacing: -0.015em;
}
.portfolio-description { color: var(--color-secondary-600); line-height: 1.7; font-size: var(--fs-sm); margin: 0; }
.portfolio-meta { margin-top: var(--space-4); display: flex; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border-subtle); }
.portfolio-meta-item { font-size: var(--fs-xs); color: var(--color-secondary-500); display: inline-flex; align-items: center; gap: 0.35rem; }
.portfolio-link-wrapper { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Gallery page (images grid w/o overlay) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-4); }
.gallery-item {
    position: relative; overflow: hidden;
    border-radius: var(--radius-2xl);
    aspect-ratio: 1 / 1;
    background: var(--color-secondary-50);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 600ms var(--ease-out), filter var(--transition);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--color-border-accent); }
.gallery-item:hover img { transform: scale(1.07); filter: saturate(1.06); }

/* ---- Pillar / Category Labels (on product / portfolio chips) ---- */
.pillar-label {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(37,99,235,0.08);
    color: var(--color-primary-900);
    border: 1px solid rgba(37,99,235,0.18);
    box-shadow: inset 0 1px 0 rgba(37,99,235,0.06);
}
.pillar-label::before {
    content: '';
    width: 6px; height: 6px; border-radius: var(--radius-full);
    background: var(--color-accent-500);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.pillar-label.blue   { background: rgba(37,99,235,0.10); color: #0b3d91; border-color: rgba(37,99,235,0.22); }
.pillar-label.teal   { background: rgba(20,184,166,0.12); color: #0f766e; border-color: rgba(20,184,166,0.22); }
.pillar-label.purple { background: rgba(124,58,237,0.12); color: #6d28d9; border-color: rgba(124,58,237,0.25); }
.pillar-label.gold   { background: rgba(202,138,4,0.12); color: #854d0e; border-color: rgba(202,138,4,0.22); }

/* ---- Discount Modal (10% off popup) ---- */
.discount-modal-overlay {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(7,26,47,0.55), rgba(7,26,47,0.82) 80%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: var(--z-modal);
    display: none;
    align-items: center; justify-content: center;
    padding: var(--space-6);
    animation: fadeIn 220ms var(--ease-out);
}
.discount-modal-overlay.open { display: flex; }
.discount-modal-content {
    position: relative;
    max-width: 28rem;
    width: 100%;
    padding: var(--space-10);
    background-image:
        radial-gradient(ellipse 120% 60% at 0% 0%, rgba(191,219,254,0.35), transparent 60%),
        radial-gradient(ellipse 120% 60% at 100% 100%, rgba(216,180,254,0.4), transparent 60%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    background-color: var(--color-white);
    border-radius: var(--radius-4xl);
    box-shadow: var(--shadow-5), var(--shadow-glow-purple), inset 0 1px 0 rgba(255,255,255,0.9);
    border: 1px solid rgba(124,58,237,0.18);
    overflow: hidden;
    animation: modalPopIn 460ms var(--ease-out-back) both;
    isolation: isolate;
}
.discount-modal-content::before {
    content: ''; position: absolute; inset: 0;
    background-image: var(--dots);
    background-size: 26px 26px;
    opacity: 0.06;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
    z-index: -1;
}
.discount-modal-close {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl);
    border: none; background: rgba(7,26,47,0.06); color: var(--color-secondary-700);
    cursor: pointer;
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
    z-index: 4;
}
.discount-modal-close:hover { transform: rotate(90deg) scale(1.05); background: rgba(7,26,47,0.12); color: var(--color-primary-900); }
.discount-modal-offer {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-purple-600));
    color: var(--color-white);
    font-weight: var(--fw-extrabold);
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--space-5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--shadow-glow-blue);
}
.discount-modal-title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    color: var(--color-primary-900);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: var(--space-3);
}
.discount-modal-sub {
    color: var(--color-secondary-600);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-size: var(--fs-sm);
}
.discount-form { padding: 0; box-shadow: none; background: transparent; border: none; }
.discount-form-submit { width: 100%; }
.discount-modal-note {
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--color-secondary-500);
    text-align: center;
}
.discount-form-success {
    display: none;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    background: linear-gradient(180deg, rgba(22,163,74,0.05), rgba(22,163,74,0.10));
    border: 1px solid rgba(22,163,74,0.18);
    border-radius: var(--radius-2xl);
    color: #166534;
    font-weight: var(--fw-medium);
    animation: fadeIn 360ms var(--ease-out);
}
.discount-form-success.visible { display: block; }

/* ---- Generic Modals (portfolio lightbox / project details) ---- */
.modal-overlay {
    position: fixed; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(7,26,47,0.6), rgba(7,26,47,0.85) 80%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: none;
    align-items: center; justify-content: center;
    padding: var(--space-6);
    animation: fadeIn 200ms var(--ease-out);
}
.modal-overlay.open { display: flex; }
.modal-content {
    position: relative;
    max-width: 48rem;
    width: 100%;
    background-color: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-white), var(--color-secondary-50));
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-5), var(--shadow-glow-blue);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    max-height: 90vh;
    display: flex; flex-direction: column;
    animation: modalPopIn 420ms var(--ease-out-back) both;
}
.modal-close {
    position: absolute; top: var(--space-5); right: var(--space-5);
    z-index: 3;
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xl);
    border: none; background: var(--color-white);
    box-shadow: var(--shadow-3), 0 0 0 1px rgba(7,26,47,0.06);
    cursor: pointer;
    color: var(--color-secondary-700);
    transition: transform var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.modal-close:hover { transform: rotate(90deg) scale(1.05); color: var(--color-primary-900); box-shadow: var(--shadow-4); }
.modal-header {
    padding: var(--space-8) var(--space-10) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
}
.modal-title { font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); color: var(--color-primary-900); letter-spacing: -0.025em; }
.modal-body {
    padding: var(--space-8) var(--space-10);
    overflow-y: auto;
    color: var(--color-secondary-600);
    line-height: 1.75;
}
.modal-body p { margin: 0 0 var(--space-4); }
.modal-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    margin: 0 0 var(--space-5);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-2);
}
.modal-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.modal-fact {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--color-secondary-50);
    border: 1px solid var(--color-border-subtle);
}
.modal-fact-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-secondary-500); font-weight: var(--fw-bold); margin-bottom: 0.2rem; }
.modal-fact-value { font-weight: var(--fw-bold); color: var(--color-primary-900); }

/* ---- Thank You Page ---- */
.thank-you-illustration { margin-bottom: var(--space-6); display: flex; justify-content: center; }
.thank-you-check {
    width: 5rem; height: 5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-green-500), var(--color-whatsapp));
    color: var(--color-white);
    box-shadow: var(--shadow-4), var(--shadow-glow-whatsapp), inset 0 1px 0 rgba(255,255,255,0.22);
}
.thank-you-title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-bottom: var(--space-5);
    color: var(--color-primary-900);
}
.thank-you-sub {
    color: var(--color-secondary-600);
    line-height: 1.8;
    max-width: 44rem;
    margin: 0 auto var(--space-10);
    font-size: var(--fs-md);
}
.thank-you-actions {
    display: flex; flex-direction: column; gap: var(--space-4);
    justify-content: center; align-items: center;
    margin-bottom: var(--space-16);
}

/* ---- 404 Page ---- */
.not-found {
    min-height: calc(100vh - 220px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-12) 0;
}
.not-found-wrapper {
    text-align: center;
    padding: var(--space-16) var(--space-8);
}
.not-found-code {
    font-size: clamp(7rem, 12vw, 11rem);
    font-weight: var(--fw-extrabold);
    line-height: 0.9;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--color-primary-800), var(--color-purple-600));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 24px rgba(37,99,235,0.25));
}
.not-found-title { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-primary-900); margin: var(--space-5) 0 var(--space-4); letter-spacing: -0.02em; }
.not-found-text { color: var(--color-secondary-600); margin: 0 auto var(--space-8); max-width: 32rem; line-height: 1.75; }
.not-found-buttons { display: flex; flex-direction: column; gap: var(--space-3); justify-content: center; align-items: center; }

/* ---- Page Header (services/products/faq/privacy etc.) ---- */
.page-header {
    background: var(--color-primary-900);
    color: var(--color-white);
    padding: var(--space-16) 0 var(--space-12);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.page-header::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 80% at 50% 0%, rgba(37,99,235,0.35), transparent 65%),
        linear-gradient(180deg, var(--color-primary-900), #040d19 100%);
    z-index: -2;
}
.page-header::after {
    content: ''; position: absolute; inset: 0;
    background-image: var(--noise);
    background-size: 200px;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}
.page-header h1 {
    font-size: clamp(2.5rem, 3.2vw + 1rem, 4rem);
    font-weight: var(--fw-extrabold);
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--color-white);
    margin-bottom: var(--space-5);
}
.page-header-sub { color: var(--color-blue-100); line-height: 1.8; max-width: 46rem; font-size: var(--fs-md); }
.page-header-faq {
    padding-top: var(--space-16);
    padding-bottom: var(--space-10);
}
.page-header-faq h1 {
    font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
.page-header-faq p { color: var(--color-blue-100); line-height: 1.8; margin: 0; }
.page-header-faq .container { position: relative; z-index: 1; }

/* ---- Content Sections (for legal/terms/privacy prose) ---- */
.content-section { padding: var(--space-16) 0; }
.content-section h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); color: var(--color-primary-900); letter-spacing: -0.02em; }
.content-section h2:first-child { margin-top: 0; }
.content-section h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--color-primary-900); font-size: var(--fs-xl); letter-spacing: -0.01em; }
.content-section p, .content-section li { color: var(--color-secondary-700); line-height: 1.8; }
.content-section ul, .content-section ol { padding-left: 1.4rem; margin: var(--space-4) 0; }
.content-section li { margin: 0.4rem 0; }

/* ---- Contact Info Grid ---- */
.contact-info-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

/* ---- Floating scroll-to-top hidden by default ---- */
.back-to-top {
    position: fixed; right: var(--space-6); bottom: 6rem;
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(7,26,47,0.8);
    color: var(--color-white);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: var(--shadow-3);
    z-index: calc(var(--z-float) - 1);
    opacity: 0; transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-primary-900); }

/* ---- Products / Product Card Extras ---- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-6); }
.product-card {
    position: relative;
    background: var(--color-white);
    background-image: linear-gradient(180deg, var(--color-white), var(--color-secondary-50));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-3xl);
    padding: var(--space-7);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-4), var(--shadow-glow-blue); border-color: var(--color-border-accent); }
.product-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-5);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-secondary-50);
}
.product-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-primary-900); margin-bottom: var(--space-3); letter-spacing: -0.01em; }
.product-desc  { color: var(--color-secondary-600); line-height: 1.7; margin-bottom: var(--space-5); font-size: var(--fs-sm); }
.product-price { color: var(--color-accent-600); font-weight: var(--fw-extrabold); font-size: var(--fs-xl); margin-bottom: var(--space-4); letter-spacing: -0.01em; }

/* ========================================================================
 * 6. KEYFRAMES — Shared animations
 * ====================================================================== */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.25); }
}
@keyframes modalPopIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.008); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes gradient-x {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}
@keyframes pulse-ring {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes shine {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes grid-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 22px 22px; }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
 * 7. UTILITIES — Reduced Motion FIRST (WCAG 2.3.3) + Responsive
 * ====================================================================== */

/* ---- PREFERS-REDUCED-MOTION: Disables ALL animations/transitions/reveals. FIRST. ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero-bg::after { animation: none !important; }
    .nav-link::after { transition: none !important; background-position: 0 0 !important; }
    .footer::before { animation: none !important; }
    .btn::after { transition: none !important; transform: translateX(200%) !important; display: none !important; }
    .whatsapp-float-btn::before,
    .whatsapp-float-btn::after { display: none !important; }
    .hero-badge-dot { animation: none !important; }
    .discount-modal-content { animation: none !important; }
    .modal-content { animation: none !important; }
    .form-error, .form-success, .discount-form-success { animation: none !important; }
}

/* ========================================================================
 * Responsive Breakpoints
 *   All existing breakpoints 375 / 480 / 640 / 1024 / 1440 preserved:
 *     - fluid clamp() tokens reduce need for font overrides
 *     - grid overrides (hero-benefits 3-col, steps 2→4, footer 4-col,
 *       portfolio 2→3, container @1440) retained
 * ====================================================================== */

@media (min-width: 375px) {
    .hero-buttons { flex-direction: column; }
    .cta-buttons { flex-direction: column; }
    .filter-bar { justify-content: center; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .not-found-buttons { flex-direction: column; }
    .thank-you-actions { flex-direction: column; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-facts { grid-template-columns: 1fr; }
}

@media (min-width: 480px) {
    .hero-buttons { flex-direction: row; flex-wrap: wrap; }
    .cta-buttons { flex-direction: row; flex-wrap: wrap; }
    .not-found-buttons { flex-direction: row; flex-wrap: wrap; }
    .thank-you-actions { flex-direction: row; flex-wrap: wrap; }
    .modal-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
    .hero-benefits { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .three-col-grid { grid-template-columns: repeat(2, 1fr); }
    .two-col-form-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
    .pillar-overview-card .section-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .hero-features { display: grid; }
    .hero-content { padding-top: 9rem; padding-bottom: 5rem; }
    .two-col-form-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-info-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .desktop-nav { display: flex; }
    .menu-toggle { display: none; }
    .hero-benefits { grid-template-columns: repeat(3, 1fr); }
    .three-col-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--space-10); }
    .footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .steps-grid { grid-template-columns: repeat(4, 1fr); }
    .service-pillars { grid-template-columns: repeat(3, 1fr); }
    .section-grid { grid-template-columns: 1fr 1fr; }
    .pillar-overview-card .section-grid { grid-template-columns: repeat(3, 1fr); }
    .portfolio-grid { grid-template-columns: repeat(3, minmax(16rem, 1fr)); }
    .hero-content { padding-top: 10rem; padding-bottom: 6rem; }
    .hero-buttons { gap: var(--space-5); }
    .focus-form-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
    .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1440px) {
    .container { max-width: min(1320px, 94vw); }
    .content-grid { max-width: 1320px; }
}

/* ---- Global overflow guard ---- */
html, body { overflow-x: hidden; }