:root {
    --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #818cf8;
    --secondary: #0ea5e9; --accent: #f59e0b; --success: #10b981; --danger: #ef4444;
    --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8;
    --border: #e2e8f0; --border-light: #f1f5f9;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-primary: 'Plus Jakarta Sans', sans-serif; --font-secondary: 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: hidden; }
body { font-family: var(--font-secondary); line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); overflow-x: hidden; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.skip-link { position: absolute; top: -100px; left: 0; background: var(--primary); color: white; padding: 0.75rem 1.5rem; z-index: 10000; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 0; }

/* ============================================
   BUTTONS (WHITE TEXT FORCED)
   ============================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-family: var(--font-primary); font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: var(--radius-lg); border: 2px solid transparent; cursor: pointer; transition: var(--transition-base); }

/* PRIMARY BUTTON: Background Purple, Text WHITE */
.btn--primary { background: var(--primary); border-color: var(--primary); color: #ffffff !important; box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.39); }
.btn--primary:hover, .btn--primary:focus { background: var(--primary-dark); border-color: var(--primary-dark); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); }

.btn--outline { background: transparent; color: var(--primary) !important; border-color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: #ffffff !important; transform: translateY(-2px); }
.btn--lg { padding: 1.125rem 2.25rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.btn--full { width: 100%; }

/* ============================================
   LAYOUT & SECTIONS
   ============================================ */
header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
/* Brand accent ribbon: runs from the screen edge to roughly the end of the logo. */
.header::before { content: ""; position: absolute; top: 0; left: 0; height: 8px; width: min(320px, 45%); background: linear-gradient(90deg, var(--primary-dark), var(--primary)); border-radius: 0 999px 999px 0; }
.header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 80px; }
.logo { text-decoration: none; display: inline-flex; align-items: center; line-height: 0; }
.logo__img { height: 50px; width: auto; }
.logo__fallback { display: none; font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
/* Exact brand lockup (partials/brand-logo): navy on light, white tint on dark.
   Force-white callers (footer) emit a bare <img>; auto callers swap the two.
   Display is controlled HERE, not inline — only one tint may ever render, else
   the two stack (100px) and overflow the header. */
.brand-logo--auto .brand-logo__navy { display: block; }
.brand-logo--auto .brand-logo__white { display: none; }
:root[data-theme="dark"] .brand-logo--auto .brand-logo__navy { display: none; }
:root[data-theme="dark"] .brand-logo--auto .brand-logo__white { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo--auto .brand-logo__navy { display: none; }
    :root:not([data-theme="light"]) .brand-logo--auto .brand-logo__white { display: block; }
}
.nav ul { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav a { text-decoration: none; color: var(--text-secondary); font-weight: 500; transition: var(--transition-fast); }
.nav a:not(.btn):hover { color: var(--primary); }
.nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; }
.nav-close { display: none; position: absolute; top: 1.25rem; right: 1.25rem; background: var(--bg-tertiary); border: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.25rem; color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; transition: var(--transition-fast); z-index: 10; }
.nav-close:hover { background: var(--border); }
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; transition: opacity var(--transition-base); }
.nav-backdrop.active { opacity: 1; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--text-primary); position: relative; transition: var(--transition-base); }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 100%; height: 100%; background: inherit; transition: inherit; }
.nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; }
.nav-toggle.active span { background: transparent; }
.nav-toggle.active span::before { transform: rotate(45deg); top: 0; }
.nav-toggle.active span::after { transform: rotate(-45deg); top: 0; }

section { padding: 5rem 0; }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 3.5rem; }
.section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; }
.section-title { font-family: var(--font-primary); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--text-primary); margin-bottom: 1rem; line-height: 1.2; }
.section-subtitle { font-size: 1.125rem; color: var(--text-secondary); line-height: 1.7; }

/* HERO */
.hero { position: relative; padding: 6rem 0 8rem; overflow: hidden; background: var(--bg-secondary); }
.hero__bg { position: absolute; inset: 0; }
.hero__gradient { position: absolute; top: -50%; right: -20%; width: 1000px; height: 1000px; background: radial-gradient(circle, rgba(102,126,234,0.15) 0%, transparent 70%); border-radius: 50%; animation: pulse 8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } }
.hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(102,126,234,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(102,126,234,0.03) 1px, transparent 1px); background-size: 60px 60px; }
.hero__content { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; text-align: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: var(--primary); margin-bottom: 2rem; }
.pulse { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
.hero__title { font-family: var(--font-primary); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
.gradient-text { background: var(--gradient-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero__subtitle { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto; }
.hero__usp { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0 2.5rem; }
.usp-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: white; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: var(--text-primary); box-shadow: var(--shadow-md); }
.usp-item i { color: var(--primary); }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.hero__trust { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero__trust > span { font-size: 0.875rem; color: var(--text-muted); }
.hero__trust-logos { display: flex; gap: 2rem; flex-wrap: wrap; }
.trust-logo { padding: 0.5rem 1.5rem; background: white; border-radius: var(--radius-md); font-weight: 700; box-shadow: var(--shadow-md); }
.hero__visual { position: absolute; top: 50%; right: 5%; transform: translateY(-50%); display: none; }
.floating-card { position: absolute; background: white; padding: 1.25rem 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-2xl); display: flex; align-items: center; gap: 1rem; font-weight: 600; animation: float 6s ease-in-out infinite; }
.floating-card i { font-size: 2rem; color: var(--primary); }
.card-1 { top: 0; right: 0; } .card-2 { top: 120px; right: -50px; animation-delay: 2s; } .card-3 { top: 240px; right: 50px; animation-delay: 4s; } .card-4 { top: 360px; right: -30px; animation-delay: 1s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

/* STATS */
.stats-section { padding: 4rem 0; background: white; margin-top: -4rem; position: relative; z-index: 10; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; }
.stat-card { background: white; padding: 2.5rem 2rem; border-radius: var(--radius-xl); text-align: center; box-shadow: var(--shadow-xl); border: 1px solid var(--border); transition: var(--transition-base); }
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2xl); }
.stat-icon { width: 60px; height: 60px; margin: 0 auto 1.5rem; background: var(--gradient-1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }
.stat-number { font-family: var(--font-primary); font-size: 3rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { color: var(--text-secondary); font-weight: 500; }

/* VALUE PROPS */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.value-card { background: white; padding: 2.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border); transition: var(--transition-base); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); border-color: var(--primary-light); }
.value-icon { width: 70px; height: 70px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: white; margin-bottom: 1.5rem; }
.gradient-1 { background: var(--gradient-1); } .gradient-2 { background: var(--gradient-2); } .gradient-3 { background: var(--gradient-3); } .gradient-4 { background: var(--gradient-4); }
.value-card h3 { font-family: var(--font-primary); font-size: 1.375rem; font-weight: 700; margin-bottom: 0.75rem; }
.value-card p { color: var(--text-secondary); line-height: 1.7; }

/* SOLUTIONS */
.solutions-section { background: white; }
.solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
.solution-card { background: white; border-radius: var(--radius-xl); border: 1px solid var(--border); padding: 2rem; transition: var(--transition-base); display: flex; flex-direction: column; min-height: 480px; }
.solution-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--primary-light); }
.solution-card.featured { border: 2px solid var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }
.solution-card__header { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-light); }
.solution-icon { width: 56px; height: 56px; background: var(--gradient-1); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; flex-shrink: 0; }
.solution-title h3 { font-family: var(--font-primary); font-size: 1.375rem; font-weight: 700; margin-bottom: 0.25rem; }
.solution-subtitle { font-size: 0.9375rem; color: var(--primary); font-weight: 500; }
.solution-desc { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.7; flex-grow: 1; }
.solution-features { list-style: none; margin-bottom: 2rem; }
.solution-features li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--text-secondary); font-size: 0.9375rem; }
.solution-features i { color: var(--success); }
.solution-card__footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--border-light); }
.cta-wrapper { margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed var(--border); }
.cta-box { background: var(--gradient-hero); padding: 2.5rem; border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: space-between; gap: 2rem; color: white; box-shadow: var(--shadow-2xl); }
.cta-content h3 { font-family: var(--font-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.cta-content p { opacity: 0.95; font-size: 1rem; }

/* CUSTOM & CLIENTS */
.custom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.custom-subtitle { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.8; margin-bottom: 3rem; }
.process-steps { display: flex; flex-direction: column; gap: 1.25rem; }
.process-step { display: flex; gap: 1.25rem; padding: 1.25rem; background: white; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.process-step:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); }
.step-number { font-family: var(--font-primary); font-size: 1.25rem; font-weight: 800; color: var(--primary); background: rgba(99,102,241,0.1); padding: 0.5rem 1rem; border-radius: var(--radius-md); }
.step-content h4 { font-weight: 700; margin-bottom: 0.25rem; }
.step-content p { color: var(--text-secondary); font-size: 0.9375rem; }
.services-tags { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; background: white; border: 1px solid var(--border); border-radius: 9999px; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); transition: var(--transition-fast); }
.tag:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.code-showcase { background: #1e293b; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-2xl); margin-bottom: 2rem; }
.code-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: #334155; border-bottom: 1px solid #475569; }
.code-dots { display: flex; gap: 0.5rem; } .dot { width: 12px; height: 12px; border-radius: 50%; } .dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; }
.code-title { font-size: 0.875rem; color: #94a3b8; font-family: monospace; }
.code-content { padding: 1.5rem; overflow-x: auto; }
.code-content pre { font-family: 'Fira Code', monospace; font-size: 0.875rem; line-height: 1.7; color: #e2e8f0; }
.code-keyword { color: #c084fc; } .code-class { color: #60a5fa; } .code-function { color: #4ade80; } .code-var { color: #f472b6; } .code-string { color: #fbbf24; } .code-comment { color: #64748b; font-style: italic; }
.consultation-card { background: white; padding: 2.5rem; border-radius: var(--radius-xl); border: 2px solid var(--border); text-align: center; box-shadow: var(--shadow-xl); }
.consult-icon { width: 70px; height: 70px; background: var(--gradient-1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.75rem; margin: 0 auto 1.5rem; }
.consultation-card h3 { font-family: var(--font-primary); font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.consultation-card > p { color: var(--text-secondary); margin-bottom: 1.5rem; }

.clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-bottom: 4rem; }
.client-card { background: white; padding: 2.5rem; border-radius: var(--radius-2xl); border: 1px solid var(--border); transition: var(--transition-base); position: relative; }
.client-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.client-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.client-avatar { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; }
.client-info h4 { font-family: var(--font-primary); font-weight: 700; margin-bottom: 0.25rem; }
.client-info span { color: var(--text-muted); font-size: 0.875rem; }
.client-rating { color: var(--accent); margin-bottom: 1rem; }
.client-quote { color: var(--text-secondary); font-style: italic; line-height: 1.8; margin-bottom: 1.5rem; }

/* CONTACT */
.contact-section { background: var(--bg-secondary); position: relative; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; }
.contact-gradient { position: absolute; bottom: -30%; left: -10%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%); border-radius: 50%; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; position: relative; z-index: 1; }
.contact-info .section-badge, .contact-info .section-title { text-align: left; }
.contact-subtitle { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.8; margin-bottom: 2.5rem; }
.contact-details { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1.25rem; }
.contact-icon { width: 50px; height: 50px; background: white; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.25rem; box-shadow: var(--shadow-md); flex-shrink: 0; }
.contact-text { display: flex; flex-direction: column; }
.contact-label { font-weight: 600; margin-bottom: 0.25rem; }
.contact-text a { color: var(--primary); text-decoration: none; } .contact-text a:hover { text-decoration: underline; }
.contact-links { display: flex; gap: 1rem; flex-wrap: wrap; } .contact-links a { color: var(--primary); text-decoration: none; font-weight: 500; }
.contact-social { display: flex; align-items: center; gap: 1.5rem; }
.contact-social > span { color: var(--text-secondary); font-weight: 500; }
.social-links { display: flex; gap: 0.75rem; }
.social-links a { width: 45px; height: 45px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.125rem; box-shadow: var(--shadow-md); transition: var(--transition-base); }
.social-links a:hover { background: var(--primary); color: white; transform: translateY(-3px); }

.contact-form { background: white; padding: 3rem; border-radius: var(--radius-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-xl); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-bottom: 0.625rem; }
.form-group label i { color: var(--primary); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--border); border-radius: var(--radius-lg); font-family: var(--font-secondary); font-size: 1rem; transition: var(--transition-fast); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }
.form-group textarea { min-height: 140px; resize: vertical; }
.char-counter { text-align: right; font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; }
.hp-field { display: none !important; position: absolute; left: -9999px; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.875rem; margin-top: 1.5rem; text-align: center; }
.form-note i { color: var(--success); }
.form-message { margin-top: 1.5rem; padding: 1rem; border-radius: var(--radius-lg); text-align: center; font-weight: 600; display: none; }
.form-message.success { display: block; background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.form-message.error { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* FOOTER */
.footer { background: var(--text-primary); color: white; padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 2fr; gap: 4rem; margin-bottom: 3rem; }
.footer-logo { text-decoration: none; display: inline-flex; align-items: center; line-height: 0; }
.footer-logo__img { height: 60px; width: auto; filter: brightness(0) invert(1); display: block; }
.footer-logo__fallback { display: none; font-weight: 700; font-size: 1.25rem; color: white; align-items: center; gap: 0.5rem; }
.footer-brand > p { color: #94a3b8; line-height: 1.8; margin-bottom: 1.5rem; max-width: 400px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col h4 { font-family: var(--font-primary); font-weight: 700; margin-bottom: 1.5rem; }
.footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.75rem; }
.footer-col a { color: #94a3b8; text-decoration: none; transition: var(--transition-fast); } .footer-col a:hover { color: white; }
.footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-content { text-align: center; } .footer-bottom-content > p { color: #94a3b8; font-size: 0.9375rem; }

.email-protected, .email-link { color: var(--primary); text-decoration: none; font-weight: 500; cursor: pointer; }
.email-protected:hover, .email-link:hover { text-decoration: underline; }

/* RESPONSIVE */
@media (min-width: 1024px) { .hero__visual { display: block; } }
@media (max-width: 1024px) {
    .custom-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .contact-info { text-align: center; } .contact-info .section-badge, .contact-info .section-title, .contact-info .contact-subtitle { text-align: center; }
    .contact-details { align-items: center; } .contact-social { justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 3rem; } .footer-brand { text-align: center; } .footer-brand > p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
    .container { padding: 0 1.25rem; } .header__inner { padding: 0 1.25rem; height: 70px; } .logo__img { height: 40px; } .brand-logo img { height: 40px !important; }
    .nav-toggle { display: block; }
    .nav-close { display: flex; }
    .nav-backdrop { display: block; pointer-events: none; }
    .nav-backdrop.active { pointer-events: auto; }
    .nav { position: fixed; top: 0; right: -100%; width: 80%; max-width: 400px; height: 100vh; background: white; padding: 5rem 2rem 2rem; box-shadow: var(--shadow-2xl); transition: var(--transition-base); z-index: 999; overflow-y: auto; }
    .nav.active { right: 0; } .nav ul { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .code-showcase { display: none; }
    .custom-grid > * { min-width: 0; }
    .hero { padding: 4rem 0 6rem; } .hero__title { font-size: 2.25rem; } .hero__usp { flex-direction: column; align-items: center; } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .stat-card { padding: 1.5rem 1rem; } .stat-number { font-size: 2rem; }
    .solutions-grid { grid-template-columns: 1fr; } .solution-card { min-height: auto; } .solution-card__header { flex-direction: column; text-align: center; } .solution-icon { margin: 0 auto; }
    .cta-box { flex-direction: column; text-align: center; padding: 2rem; }
    .form-row { grid-template-columns: 1fr; } .footer-links { grid-template-columns: 1fr; gap: 2rem; } .clients-grid { grid-template-columns: 1fr; } .contact-form { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) { .hero__title { font-size: 1.875rem; } .section-title { font-size: 1.75rem; } .stats-grid { grid-template-columns: 1fr; } .value-grid { grid-template-columns: 1fr; } .solution-features { grid-template-columns: 1fr; } .solution-card__footer { text-align: center; } .process-step { flex-direction: column; } .services-tags { justify-content: center; } }

@media (prefers-color-scheme: dark) {
    :root { --bg-primary: #0f172a; --bg-secondary: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --border-light: #475569; }
    .solution-card, .value-card, .client-card, .stat-card, .usp-item, .contact-form, .tag { background: var(--bg-secondary); }
    .footer-logo__img { filter: none; }
    .about-chip, .process-step { background: var(--bg-tertiary); }
    .websites-section { background: linear-gradient(135deg, #1e1b4b 0%, #2d1f69 100%); }
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 9999; width: 3.5rem; height: 3.5rem; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: var(--transition-base); text-decoration: none; }
.whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6); color: white; }
.whatsapp-float__tooltip { position: absolute; right: 4.25rem; background: #0f172a; color: white; font-size: 0.8125rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: var(--radius-md); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
.whatsapp-float__tooltip::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #0f172a; border-right: none; }
.whatsapp-float:hover .whatsapp-float__tooltip { opacity: 1; }
@media (max-width: 768px) { .whatsapp-float { bottom: 1.25rem; right: 1.25rem; width: 3rem; height: 3rem; font-size: 1.5rem; } .whatsapp-float__tooltip { display: none; } }

/* ============================================
   SOLUTION PREVIEW IMAGES
   ============================================ */
.solution-preview { border-radius: var(--radius-lg); overflow: hidden; margin: 1.25rem 0; border: 1px solid var(--border-light); }
.solution-preview img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform var(--transition-base); }
.solution-card:hover .solution-preview img { transform: scale(1.04); }

/* ============================================
   ABOUT SECTION
   ============================================ */
.about-section { background: var(--bg-secondary); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-content .section-badge { margin-bottom: 1rem; }
.about-content .section-title { text-align: left; }
.about-text { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.8; margin-bottom: 1.25rem; }
.about-chips { display: flex; flex-direction: column; gap: 1.25rem; }
.about-chip { display: flex; align-items: flex-start; gap: 1.25rem; background: white; padding: 1.25rem 1.5rem; border-radius: var(--radius-xl); border: 1px solid var(--border); transition: var(--transition-base); }
.about-chip:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateX(4px); }
.about-chip__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem; flex-shrink: 0; }
.about-chip h4 { font-family: var(--font-primary); font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.about-chip p { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 3rem; } .about-content .section-title { text-align: center; } .about-content .section-badge { display: flex; justify-content: center; } }

/* ============================================
   WEBSITES CALLOUT SECTION
   ============================================ */
.websites-section { background: linear-gradient(135deg, #312e81 0%, #4c1d95 50%, #6d28d9 100%); color: white; text-align: center; }
.websites-inner { max-width: 800px; margin: 0 auto; }
.websites-section .section-badge { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: white; }
.websites-section .section-title { color: white; }
.websites-section .section-subtitle { color: rgba(255,255,255,0.85); margin-bottom: 2.5rem; }
.websites-features { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.website-chip { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.5rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 9999px; font-weight: 600; font-size: 0.9375rem; color: white; backdrop-filter: blur(10px); transition: var(--transition-fast); }
.website-chip:hover { background: rgba(255,255,255,0.2); }
.website-chip i { font-size: 1rem; }
.websites-section .btn--primary { background: white; color: #4c1d95 !important; border-color: white; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.websites-section .btn--primary:hover { background: rgba(255,255,255,0.9); color: #4c1d95 !important; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
@media (max-width: 768px) { .websites-features { gap: 0.75rem; } .website-chip { padding: 0.625rem 1rem; font-size: 0.875rem; } }

/* ============================================
   INTEGRATIONS STRIP (inside websites section)
   ============================================ */
.integrations-strip { margin: 2.5rem 0 2.75rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-xl); padding: 2rem; backdrop-filter: blur(8px); text-align: left; }
.int-strip-title { font-size: 0.9375rem; font-weight: 600; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.5rem; text-align: center; }
.int-group { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.int-group:last-child { margin-bottom: 0; }
.int-group-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; min-width: 155px; padding-top: 0.3rem; }
.int-group-label i { font-size: 0.875rem; }
.int-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.int-pill { display: inline-flex; align-items: center; padding: 0.35rem 0.875rem; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.22); border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; color: white; transition: var(--transition-fast); }
.int-pill:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 768px) {
    .integrations-strip { padding: 1.5rem 1.25rem; }
    .int-group { flex-direction: column; gap: 0.625rem; }
    .int-group-label { min-width: unset; }
}
@media (prefers-color-scheme: dark) { .integrations-strip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); } }

/* ============================================
   PROCESS & SERVICES TITLES
   ============================================ */
.process-title, .services-title { font-family: var(--font-primary); font-size: 1.125rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.25rem; margin-top: 2.5rem; }
.process-title { margin-top: 0; }

/* ============================================
   DARK MODE (OS-LEVEL PREFERENCE)
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f172a;
        --bg-secondary: #1e293b;
        --bg-tertiary: #334155;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border: #334155;
        --border-light: #1e293b;
    }

    /* Override explicitly white hardcoded elements to use var(--bg-primary) or var(--bg-secondary) */
    .stat-card, .value-card, .solution-card, .process-step, .tag, .consultation-card, .client-card, .contact-form, .usp-item, .trust-logo, .floating-card, .contact-icon, .social-links a {
        background: var(--bg-primary) !important;
        border-color: var(--border) !important;
    }

    /* Special treatment for header to remain slightly transparent */
    header {
        background: rgba(15, 23, 42, 0.95) !important;
        border-color: var(--border) !important;
    }
    
    .stats-section, .solutions-section {
        background: var(--bg-primary) !important;
    }

    /* Form Inputs in Dark Mode */
    .form-group input, .form-group select, .form-group textarea {
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border) !important;
    }
}