/* ============================================================
   MOBILE-RESPONSIVE FIXED STYLESHEET
   Fixes applied:
   1. body line-height 2.7 → 1.6 (was causing huge text gaps)
   2. btn min-width overflow on phones fixed
   3. modal-client-card position:fixed → position:relative (critical bug)
   4. modal fixed controls right spacing fixed for small screens
   5. image-card width:25rem → responsive width
   6. image-cards-container gap reduced for large screens
   7. timeline-mobile white-space invalid → margin-bottom
   8. footer-grid added 2-col tablet layout
   9. logo-img responsive height
   10. hero padding adjusted for 768-1023px range
   ============================================================ */

/* ── Reset & Base ──────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #0E7F66;
    --secondary-color: #10b981;
    --accent-color: #1FA58A;
    --blue-color: #3b82f6;
    --dark-color: #1f2937;
    --gray-900: #111827;
    --gray-800: #1f2937;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --gray-50:  #f9fafb;
    --white:    #ffffff;
    --border-radius: 0.5rem;
    --shadow:    0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 25px 50px -12px rgba(0,0,0,0.25);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* FIX #1: was 2.7 — way too large, causes massive gaps between lines */
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem;   } }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(30px) }  to { opacity:1; transform:translateY(0) } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-50px) } to { opacity:1; transform:translateX(0) } }
@keyframes fadeInRight{ from { opacity:0; transform:translateX(50px) }  to { opacity:1; transform:translateX(0) } }
@keyframes slideDown  { from { opacity:0; transform:translateY(-100px) } to { opacity:1; transform:translateY(0) } }
@keyframes float      { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes scroll     { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px)   } }

.animate-on-scroll { opacity:0; transform:translateY(30px); transition:all 0.6s ease-out; }
.animate-on-scroll.animate { opacity:1; transform:translateY(0); }

/* ── Navigation ────────────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    animation: slideDown 0.8s ease-out;
}

.nav-container { max-width:1280px; margin:0 auto; padding:0 1rem; }
@media (min-width: 640px)  { .nav-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .nav-container { padding: 0 2rem;   } }

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
@media (min-width: 640px) { .nav-content { height: 80px; } }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.nav-logo:hover { transform: scale(1.03); }

/* FIX #9: Logo height responsive — was fixed 68px (too tall on phones) */
.logo-img {
    height: 44px;
    width: auto;
    border-radius: 8px;
}
@media (min-width: 640px)  { .logo-img { height: 56px; } }
@media (min-width: 1024px) { .logo-img { height: 68px; } }

.logo-text { font-size:1.125rem; font-weight:bold; color:#111; }
@media (min-width: 640px) { .logo-text { font-size:1.25rem; } }

.desktop-nav { display:none; align-items:center; gap:2rem; }
@media (min-width: 768px) { .desktop-nav { display:flex; } }

.nav-link {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease-out forwards;
}
.nav-link:nth-child(1){ animation-delay:0.3s }
.nav-link:nth-child(2){ animation-delay:0.4s }
.nav-link:nth-child(3){ animation-delay:0.5s }
.nav-link:hover { color:#0E7F66; transform:translateY(-2px); }

.mobile-menu-btn {
    display: block;
    background: none; border: none;
    cursor: pointer; padding: 0.5rem;
}
@media (min-width: 768px) { .mobile-menu-btn { display:none; } }

.hamburger { width:24px; height:24px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.hamburger-line { width:24px; height:2px; background:#555; border-radius:1px; transition:all 0.3s ease; }
.hamburger-line:nth-child(2) { margin:3px 0; }

.mobile-menu-btn.active .hamburger-line:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.mobile-menu-btn.active .hamburger-line:nth-child(2) { opacity:0; }
.mobile-menu-btn.active .hamburger-line:nth-child(3) { transform:rotate(-45deg) translate(7px,-6px); }

.mobile-menu { max-height:0; overflow:hidden; transition:max-height 0.3s ease; border-top:1px solid rgba(0,0,0,0.1); }
.mobile-menu.active { max-height:200px; }
.mobile-menu-content { padding:0.5rem; }
.mobile-nav-link { display:block; padding:0.75rem 1rem; text-decoration:none; color:#555; font-weight:500; transition:color 0.2s ease; }
.mobile-nav-link:hover { color:#0E7F66; }

/* ── Hero Section ──────────────────────────────────────────── */
.hero-section {
    min-height: 100vh;
    position: relative;
    padding: 80px 0 48px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
@media (min-width: 640px)  { .hero-section { padding: 90px 0 56px; } }
@media (min-width: 1024px) { .hero-section { padding: 96px 0 64px; } }

.hero-backgrounds { position:absolute; inset:0; }
.hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    opacity: 0; transform: scale(1.1);
    transition: all 1.5s ease-in-out;
}
.hero-bg.active { opacity:1; transform:scale(1); }
.hero-overlay-dark    { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.hero-overlay-gradient{
    position:absolute; inset:0;
    background:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.3), transparent);
}

.hero-content {
    position: relative; z-index: 10;
    width: 100%; max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex; align-items: center; justify-content: flex-start;
}
@media (min-width: 640px)  { .hero-content { padding: 0 1.5rem; } }
/* FIX #10: was 0 5rem — too aggressive for 768-1023px, changed to clamp */
@media (min-width: 1024px) { .hero-content { padding: 0 clamp(1.5rem, 4vw, 5rem); } }

.hero-text { color:white; text-align:left; animation:heroFadeInUp 0.8s ease-out; }
@keyframes heroFadeInUp { from{ opacity:0; transform:translateY(50px) } to{ opacity:1; transform:translateY(0) } }

.experience-badge {
    background-color: #eaeaed;
    border-radius: 20px; padding:0.3rem 0.75rem;
    margin-bottom: 1rem;
    display: flex; align-items: center; gap:0.5rem;
    color: #636363; width:fit-content;
    font-size: 13px; letter-spacing:0.5px;
}
@media (min-width: 640px) {
    .experience-badge {
        border-radius:30px; padding:0.75rem 1.25rem;
        margin-bottom:1.5rem; gap:1rem;
        font-size:16px; letter-spacing:0.7px;
    }
}
@media (min-width: 1024px) {
    .experience-badge { padding:1rem 1.5rem; font-size:18px; letter-spacing:0.81px; }
}

.avatars { display:flex; margin-left:-0.25rem; }
@media (min-width: 640px) { .avatars { margin-left:-0.5rem; } }
.avatar { width:28px; height:28px; border-radius:50%; border:2px solid white; margin-left:-0.25rem; }
@media (min-width: 640px) { .avatar { width:35px; height:35px; margin-left:-0.5rem; } }
.avatar-1{ background-color:#d1d5db; }
.avatar-2{ background-color:#9ca3af; }
.avatar-3{ background-color:#6b7280; }
.avatar-4{ background-color:#4b5563; }

.hero-title {
    font-size: 26px; font-weight:bold;
    line-height:1.15; letter-spacing:0.8px; margin-bottom:1rem;
}
@media (min-width: 480px) { .hero-title { font-size:32px; letter-spacing:1px; } }
@media (min-width: 640px) { .hero-title { font-size:40px; line-height:1.2; letter-spacing:1.5px; margin-bottom:1.25rem; } }
@media (min-width: 768px) { .hero-title { font-size:50px; letter-spacing:2px; } }
@media (min-width: 1024px){ .hero-title { font-size:60px; letter-spacing:2.6px; margin-bottom:1.5rem; } }

.hero-subtitle {
    font-size: 15px; color:#d1d5db;
    line-height:1.55; letter-spacing:0.4px;
    margin-bottom:1.5rem; max-width:100%;
}
@media (min-width: 640px) {
    .hero-subtitle { font-size:19px; line-height:1.45; letter-spacing:0.75px; margin-bottom:2rem; max-width:90%; }
}
@media (min-width: 768px) {
    .hero-subtitle { font-size:23px; line-height:1.42; letter-spacing:1px; }
}
@media (min-width: 1024px){
    .hero-subtitle { font-size:28px; line-height:1.43; letter-spacing:1.4px; max-width:724px; }
}

.hero-buttons {
    display: flex; flex-direction:column;
    gap: 0.75rem; align-items:stretch;
    width: 100%;
}
@media (min-width: 480px) { .hero-buttons { align-items:flex-start; } }
@media (min-width: 640px) { .hero-buttons { flex-direction:row; gap:1rem; } }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    padding: 0.75rem 1.25rem;
    font-size: 14px; font-weight:bold;
    letter-spacing: 0.5px; border-radius:10px;
    height: 48px; border:none; cursor:pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex; align-items:center; justify-content:center;
    /* FIX #2: no fixed width on mobile — use full width via flex parent */
    width: 100%;
}
@media (min-width: 480px) {
    .btn {
        width: auto;
        /* FIX #2: min-width was 450px at xl — overflowed on phones */
        min-width: 180px;
        padding: 0.875rem 1.5rem;
        font-size: 15px;
    }
}
@media (min-width: 640px) {
    .btn { font-size:16px; letter-spacing:0.7px; height:54px; min-width:220px; }
}
@media (min-width: 1024px){
    .btn { font-size:18px; letter-spacing:0.9px; height:58px; min-width:260px; }
}
@media (min-width: 1280px){
    /* FIX #2: was 450px (too wide and overflows on some layouts) — use clamp */
    .btn { min-width: clamp(260px, 25vw, 380px); }
}

.btn-primary { background-color:#0E7F66; color:white; }
.btn-primary:hover { background:#1FA58A; box-shadow:0 10px 25px rgba(31,165,138,0.4); }

.btn-group { display:flex; width:100%; }
@media (min-width: 480px) { .btn-group { width:auto; } }

.btn-secondary {
    border: 2px solid rgba(255,255,255,0.8);
    color: #ffffff;
    background: transparent;
    flex: 1;
    border-radius: 10px;
    min-width: 0; /* allow flex shrink */
}
@media (min-width: 480px) { .btn-secondary { min-width:160px; } }
@media (min-width: 640px) { .btn-secondary { min-width:200px; } }
@media (min-width: 1024px){ .btn-secondary { min-width:220px; } }
@media (min-width: 1280px){ .btn-secondary { min-width:clamp(220px, 18vw, 280px); } }

.btn-secondary:hover { background-color:#13690b; color:white; transform:translateY(-2px); }

.btn-arrow {
    background-color: #4f4f4f;
    display: flex; align-items:center; justify-content:center;
    padding: 0 0.75rem;
    border-radius: 0 10px 10px 0;
    box-shadow: var(--shadow-lg);
    color: var(--secondary-color);
    font-size: 20px;
}
@media (min-width: 640px) { .btn-arrow { padding: 0 1rem; } }

/* ── Section Styles ────────────────────────────────────────── */
.section { padding: 3rem 0; }
@media (min-width: 640px)  { .section { padding: 4rem 0; } }
@media (min-width: 1024px) { .section { padding: 9rem 0; } }

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto; margin-right: auto;
    opacity: 0; transform: translateY(30px);
    animation: sectionHeaderFadeIn 0.6s ease-out forwards;
}
@media (min-width: 640px)  { .section-header { margin-bottom: 3rem; } }
@media (min-width: 1024px) { .section-header { margin-bottom: 4rem; } }

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

.section-header h2,
.section-title {
    font-size: 26px; font-weight:800;
    color: #1a1a1a; letter-spacing:-0.5px;
    line-height: 1.2; margin-bottom:1rem;
}
@media (min-width: 640px) { .section-header h2, .section-title { font-size:34px; letter-spacing:-0.8px; margin-bottom:1.25rem; } }
@media (min-width: 768px) { .section-header h2, .section-title { font-size:40px; } }
@media (min-width: 1024px){ .section-header h2, .section-title { font-size:48px; letter-spacing:-1px; margin-bottom:1.5rem; } }

.highlight       { color: #0E7F66; }
.highlight-blue  { color: #1FA58A; }
.text-white      { color: var(--white); }

.section-header p,
.section-description {
    font-size: 15px; color:#666;
    letter-spacing:0.4px; line-height:1.6;
    max-width: 90%; margin:0 auto;
}
@media (min-width: 640px) { .section-header p, .section-description { font-size:18px; letter-spacing:0.7px; max-width:48rem; } }
@media (min-width: 768px) { .section-header p, .section-description { font-size:21px; letter-spacing:1px; line-height:1.5; } }
@media (min-width: 1024px){ .section-header p, .section-description { font-size:24px; letter-spacing:1.2px; max-width:60rem; } }

/* ── Feature Cards ─────────────────────────────────────────── */
.feature-cards-section { padding:5rem 0; background:var(--gray-50); }

.feature-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width: 640px)  { .feature-grid { grid-template-columns:repeat(2,1fr); gap:2rem; } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns:repeat(3,1fr); } }

.feature-card {
    background: var(--white);
    border-radius: 0.5rem; border:1px solid var(--gray-200);
    padding: 1.5rem; transition: var(--transition); transform:translateY(0);
}
@media (min-width: 640px) { .feature-card { padding:2rem; } }
.feature-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }

.feature-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
@media (min-width: 640px) { .feature-header { margin-bottom:1.5rem; } }

.feature-icon {
    width:2.5rem; height:2.5rem; flex-shrink:0;
    background:linear-gradient(135deg,var(--blue-color),#06b6d4);
    border-radius:0.5rem; display:flex; align-items:center; justify-content:center;
    color:var(--white); transform:rotate(12deg); transition:var(--transition);
}
.feature-card:hover .feature-icon { transform:rotate(0deg); }
.feature-icon svg { width:1.5rem; height:1.5rem; }

.feature-title { font-size:1.25rem; font-weight:bold; color:var(--gray-900); transition:var(--transition); }
@media (min-width: 640px) { .feature-title { font-size:1.5rem; } }
.feature-card:hover .feature-title { color:#1FA58A; }

.feature-description { color:var(--gray-600); line-height:1.6; font-size:0.9rem; }
@media (min-width: 640px) { .feature-description { font-size:1rem; } }

/* ── Image Cards ───────────────────────────────────────────── */
.image-cards-section { padding:4rem 0; background:var(--gray-50); }
@media (min-width: 1024px) { .image-cards-section { padding:5rem 0; } }

.image-cards-container {
    display: flex; flex-direction:column;
    gap: 1.5rem; align-items:center;
    overflow-x: auto; padding:0 1rem 1.5rem;
    /* allow horizontal scroll on very small screens gracefully */
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) { .image-cards-container { gap:2rem; padding:0 1.5rem 2rem; } }
@media (min-width: 1024px) {
    .image-cards-container {
        flex-direction: row;
        /* FIX #6: was 6rem gap — too large, causes overflow on 1024-1200px range */
        gap: clamp(1.5rem, 4vw, 4rem);
        justify-content: center;
        overflow-x: visible; padding:0;
    }
}

.image-card {
    position: relative;
    /* FIX #5: was fixed width:25rem — overflows on phones */
    width: min(100%, 25rem);
    height: clamp(380px, 50vw, 525px);
    flex-shrink: 0; transition: var(--transition);
}
@media (min-width: 1024px) { .image-card { width: 22rem; } }
@media (min-width: 1280px) { .image-card { width: 25rem; } }
.image-card:hover { transform:scale(1.04); }

.image-card-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    border-radius:1rem;
}

.image-card-content {
    position:absolute; bottom:1.5rem; left:1rem; right:1rem;
    background:var(--white); border-radius:0.625rem;
    padding:1.25rem; box-shadow:var(--shadow-lg); text-align:center;
    transition:var(--transition);
}
@media (min-width: 640px) { .image-card-content { bottom:1.875rem; left:1.3125rem; right:1.3125rem; padding:1.5rem; } }
.image-card:hover .image-card-content { transform:scale(1.04); box-shadow:0 25px 50px -12px rgba(0,0,0,0.4); }

.image-card-content h3 {
    font-size:1.25rem; font-weight:bold;
    color:rgba(22,22,22,0.6); line-height:1.2;
    letter-spacing:0.08em; margin-bottom:0.75rem;
}
@media (min-width: 640px)  { .image-card-content h3 { font-size:1.5rem; } }
@media (min-width: 1024px) { .image-card-content h3 { font-size:2rem; } }

.image-card-content p { font-size:0.9rem; color:#8f9497; line-height:1.7; letter-spacing:0.04em; }
@media (min-width: 640px)  { .image-card-content p { font-size:1rem; } }
@media (min-width: 1024px) { .image-card-content p { font-size:1.125rem; } }

/* ── Process Timeline ──────────────────────────────────────── */
.process-timeline-section { padding:6rem 0; background:var(--white); }
@media (min-width: 1024px) { .process-timeline-section { padding:10rem 0; } }

.timeline-desktop { display:none; position:relative; }
@media (min-width: 1024px) { .timeline-desktop { display:block; } }

.timeline-line {
    position:absolute; top:5rem; left:0; right:0;
    height:2px; background:var(--gray-300);
}
.timeline-numbers { display:flex; justify-content:space-between; margin-bottom:4rem; }
.timeline-number {
    width:3rem; height:3rem;
    background:linear-gradient(135deg,var(--primary-color),#1FA58A);
    border-radius:0.5rem; display:flex; align-items:center; justify-content:center;
    color:var(--white); font-weight:bold; position:relative; z-index:10;
}

.timeline-content { display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; }
@media (min-width: 1024px) { .timeline-content { gap:2rem; } }

.timeline-step { text-align:center; }
.timeline-card {
    background:var(--white); border-radius:0.5rem;
    border:1px solid var(--gray-200); padding:1.5rem;
    margin-bottom:2rem; transition:var(--transition);
}
.timeline-card:hover { box-shadow:var(--shadow-lg); }
.timeline-icon {
    width:4rem; height:4rem;
    background:linear-gradient(135deg,var(--accent-color),var(--primary-color));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem; color:var(--white);
}
.timeline-icon svg { width:2rem; height:2rem; }
.timeline-card h3 { font-size:1.25rem; font-weight:bold; color:var(--gray-900); margin-bottom:1rem; }
.timeline-card p  { color:var(--gray-600); font-size:0.875rem; line-height:1.6; }

/* FIX #6: was white-space:2rem which is invalid — changed to margin-bottom */
.timeline-mobile { display:block; }
@media (min-width: 1024px) { .timeline-mobile { display:none; } }

.mobile-timeline-step {
    display:flex; align-items:flex-start; gap:1rem;
    /* FIX: replaced invalid white-space:2rem */
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .mobile-timeline-step { gap:1.5rem; margin-bottom:2rem; } }

.mobile-step-number {
    width:3rem; height:3rem; flex-shrink:0;
    background:linear-gradient(135deg,var(--blue-color),#06b6d4);
    border-radius:0.5rem; display:flex; align-items:center; justify-content:center;
    color:var(--white); font-weight:bold;
}
.mobile-step-content {
    flex:1; background:var(--white); border-radius:0.5rem;
    border:1px solid var(--gray-200); padding:1.25rem;
}
@media (min-width: 640px) { .mobile-step-content { padding:1.5rem; } }
.mobile-step-content .timeline-icon { width:3rem; height:3rem; margin-bottom:1rem; }
.mobile-step-content .timeline-icon svg { width:1.5rem; height:1.5rem; }
.mobile-step-content h3 { font-size:1.125rem; font-weight:bold; color:var(--gray-900); margin-bottom:0.5rem; }
@media (min-width: 640px) { .mobile-step-content h3 { font-size:1.25rem; } }
.mobile-step-content p { color:var(--gray-600); font-size:0.875rem; }

/* ── Domain Expertise ──────────────────────────────────────── */
.domain-expertise-section { padding:4rem 0; position:relative; overflow:hidden; }
@media (min-width: 1024px) { .domain-expertise-section { padding:5rem 0; } }

.domain-bg { position:absolute; inset:0; }
.domain-bg img { width:100%; height:100%; object-fit:cover; }
.domain-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.75); }

.domain-grid {
    display:grid; grid-template-columns:1fr;
    gap:1rem; position:relative; z-index:10;
}
@media (min-width: 480px) { .domain-grid { grid-template-columns:repeat(2,1fr); gap:1.25rem; } }
@media (min-width: 640px) { .domain-grid { gap:1.5rem; } }
@media (min-width: 1024px){ .domain-grid { grid-template-columns:repeat(5,1fr); } }

.domain-card {
    background:rgba(0,0,0,0.8); backdrop-filter:blur(10px);
    border-radius:0.5rem; padding:1.25rem; text-align:center;
    transition:var(--transition);
}
@media (min-width: 640px) { .domain-card { padding:1.5rem; } }
.domain-card:hover { background:rgba(0,0,0,0.9); transform:scale(1.05); }

.domain-icon {
    width:3.5rem; height:3.5rem;
    background:linear-gradient(135deg,var(--accent-color),var(--primary-color));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin:0 auto 1rem; color:var(--white); transition:var(--transition);
}
@media (min-width: 640px) { .domain-icon { width:4rem; height:4rem; } }
.domain-card:hover .domain-icon { transform:scale(1.1); }
.domain-icon svg { width:1.75rem; height:1.75rem; }
@media (min-width: 640px) { .domain-icon svg { width:2rem; height:2rem; } }

.domain-card h3 { font-size:1.1rem; font-weight:bold; color:var(--white); margin-bottom:0.5rem; transition:var(--transition); }
@media (min-width: 640px) { .domain-card h3 { font-size:1.25rem; margin-bottom:0.75rem; } }
.domain-card:hover h3 { color:var(--accent-color); }
.domain-card p { color:var(--gray-300); font-size:0.8rem; }
@media (min-width: 640px) { .domain-card p { font-size:0.875rem; } }

/* ── Additional Services ───────────────────────────────────── */
.additional-services-section { padding:6rem 0; background:var(--gray-50); }
@media (min-width: 1024px) { .additional-services-section { padding:10rem 0; } }

.services-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width: 640px)  { .services-grid { grid-template-columns:repeat(2,1fr); gap:2rem; } }
@media (min-width: 1024px) { .services-grid { grid-template-columns:repeat(3,1fr); } }

.service-card {
    background:var(--white); border-radius:0.5rem;
    overflow:hidden; box-shadow:var(--shadow); transition:var(--transition);
}
.service-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-8px); }
.service-image { aspect-ratio:16/9; overflow:hidden; }
.service-image img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.service-card:hover .service-image img { transform:scale(1.1); }
.service-content { padding:1.25rem; }
@media (min-width: 640px) { .service-content { padding:1.5rem; } }

.service-inner {
    background:var(--white); border-radius:0.5rem;
    padding:1rem; margin-top:-2rem; position:relative; z-index:10;
    box-shadow:var(--shadow); text-align:center;
}
.service-inner h3 { font-size:1.35rem; font-weight:bold; color:var(--gray-900); margin-bottom:0.5rem; transition:var(--transition); }
@media (min-width: 640px) { .service-inner h3 { font-size:1.65rem; } }
.service-card:hover .service-inner h3 { color:#1FA58A; }
.service-inner p { color:var(--gray-600); font-size:0.875rem; line-height:1.6; }

/* ── Learn More Button ─────────────────────────────────────── */
.learn-more-btn {
    margin-top: 1.25rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg,#0E7F66,#1FA58A);
    color: white; border:none; border-radius:10px;
    font-weight:600; font-size:0.875rem; letter-spacing:0.5px;
    cursor:pointer; display:inline-flex; align-items:center; gap:0.5rem;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:0 4px 12px rgba(14,127,102,0.2);
    width:100%; justify-content:center;
}
@media (min-width: 640px) { .learn-more-btn { padding:0.875rem 1.75rem; font-size:0.9375rem; margin-top:1.5rem; } }
.learn-more-btn:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(14,127,102,0.4); background:linear-gradient(135deg,#1FA58A,#0E7F66); }
.learn-more-btn:active { transform:translateY(-1px); }
.learn-more-btn svg { width:18px; height:18px; transition:transform 0.3s ease; }
.learn-more-btn:hover svg { transform:translateX(4px); }

/* ── Service / IFS Modal ───────────────────────────────────── */
.service-modal {
    position:fixed; inset:0; z-index:9999;
    opacity:0; visibility:hidden;
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
}
.service-modal.active { opacity:1; visibility:visible; }

.modal-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(10px);
}
.modal-container {
    position:relative; width:100%; height:100%;
    overflow-y:auto; overflow-x:hidden;
    scroll-behavior:smooth; background:#0a0a0a;
}
.modal-container::-webkit-scrollbar { width:8px; }
.modal-container::-webkit-scrollbar-track { background:rgba(255,255,255,0.05); }
.modal-container::-webkit-scrollbar-thumb { background:rgba(14,127,102,0.3); border-radius:4px; }
.modal-container::-webkit-scrollbar-thumb:hover { background:rgba(14,127,102,0.5); }

/* Close Button */
.modal-close {
    position:fixed; z-index:10000;
    /* FIX #4: responsive positioning */
    top:clamp(12px,2vw,20px);
    right:clamp(12px,2vw,20px);
    width:44px; height:44px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s ease; backdrop-filter:blur(10px);
}
@media (min-width: 640px) { .modal-close { width:50px; height:50px; } }
.modal-close:hover { background:#0E7F66; border-color:#0E7F66; transform:rotate(90deg) scale(1.1); }
.modal-close svg { width:22px; height:22px; color:white; }
@media (min-width: 640px) { .modal-close svg { width:24px; height:24px; } }
.modal-close:hover svg { color:#0a0a0a; }

/* Navigation Arrows */
.modal-nav-arrow {
    position:fixed;
    /* FIX #4: responsive right position */
    right:clamp(10px,2vw,30px);
    width:42px; height:42px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(14,127,102,0.3);
    border-radius:50%; cursor:pointer; z-index:10000;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s ease; backdrop-filter:blur(10px);
}
@media (min-width: 640px) { .modal-nav-arrow { width:50px; height:50px; } }
.modal-nav-up   { bottom:clamp(110px,15vw,140px); }
.modal-nav-down { bottom:clamp(58px,8vw,80px);    }
.modal-nav-arrow:hover { background:#0E7F66; border-color:#0E7F66; transform:scale(1.1); }
.modal-nav-arrow svg { width:22px; height:22px; color:#0E7F66; transition:color 0.3s ease; }
@media (min-width: 640px) { .modal-nav-arrow svg { width:24px; height:24px; } }
.modal-nav-arrow:hover svg { color:#0a0a0a; }
.modal-nav-arrow:disabled { opacity:0.3; cursor:not-allowed; pointer-events:none; }

/* Section Indicators */
.modal-section-indicators {
    position:fixed;
    /* FIX #4: responsive right position */
    right:clamp(8px,1.5vw,30px);
    top:50%; transform:translateY(-50%);
    z-index:10000; display:flex; flex-direction:column; gap:10px;
}
@media (min-width: 640px) { .modal-section-indicators { gap:12px; } }

.indicator-dot {
    width:10px; height:10px;
    background:rgba(255,255,255,0.3);
    border:2px solid rgba(14,127,102,0.5);
    border-radius:50%; cursor:pointer;
    transition:all 0.3s ease; padding:0;
}
@media (min-width: 640px) { .indicator-dot { width:12px; height:12px; } }
.indicator-dot:hover { background:rgba(14,127,102,0.5); transform:scale(1.3); }
.indicator-dot.active { background:#0E7F66; box-shadow:0 0 12px rgba(14,127,102,0.6); }

/* Modal Content & Sections */
.modal-content { position:relative; max-width:1280px; margin:0 auto; padding:0; }
.modal-section-snap { scroll-snap-align:start; }

.modal-section {
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    padding:clamp(60px,10vw,120px) clamp(16px,4vw,60px);
    position:relative; background:#0a0a0a;
}
.modal-section h2 {
    font-size:clamp(24px,5vw,48px); font-weight:bold; color:white;
    text-align:center; margin-bottom:clamp(30px,8vw,80px);
    letter-spacing:-0.02em;
}

/* Capabilities Section */
.modal-capabilities-section { background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%); position:relative; }
.modal-capabilities-section::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(12,80,255,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(14,127,102,0.06) 0%, transparent 50%);
    pointer-events:none;
}
.modal-capabilities-section::after {
    content:''; position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(14,127,102,0.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(14,127,102,0.03) 1px,transparent 1px);
    background-size:50px 50px; opacity:0.3; pointer-events:none;
}

@keyframes headerFadeIn { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.modal-section-header {
    text-align:center; margin-bottom:clamp(40px,8vw,80px);
    position:relative; z-index:1; animation:headerFadeIn 0.8s ease-out;
}
.modal-section-header h2 {
    font-size:clamp(28px,5vw,52px); font-weight:bold; color:white;
    letter-spacing:-0.02em; line-height:1.2; margin:0;
    position:relative; display:inline-block;
}
.modal-section-header h2::after {
    content:''; position:absolute; bottom:-10px; left:50%;
    transform:translateX(-50%); width:80px; height:3px;
    background:linear-gradient(90deg,transparent,#0E7F66,transparent); border-radius:2px;
}

/* Modal Intro Text */
.modal-intro-text {
    max-width:1000px; margin:0 auto clamp(40px,8vw,70px);
    text-align:center; position:relative; z-index:1;
}
.modal-intro-text p {
    font-size:clamp(15px,2.5vw,20px); color:rgba(255,255,255,0.8);
    line-height:1.7; letter-spacing:0.025em; margin-bottom:1.25rem;
}
.modal-intro-text p:last-child { margin-bottom:0; }

/* Services Grid */
.modal-services-grid {
    display:grid; gap:clamp(20px,5vw,60px);
    grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
    position:relative; z-index:1;
}
@media (max-width: 640px) { .modal-services-grid { grid-template-columns:1fr; } }

.modal-service-card {
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    border-radius:20px; padding:clamp(20px,5vw,40px);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
    backdrop-filter:blur(10px); transform:translateY(0);
}
.modal-service-card:hover {
    background:rgba(255,255,255,0.06); border-color:rgba(14,127,102,0.4);
    transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.5);
}
.modal-service-icon { position:relative; margin-bottom:clamp(16px,4vw,30px); width:fit-content; }
.modal-service-card .icon-bg-1 {
    width:40px; height:40px;
    background:linear-gradient(to bottom,#1A9B88,#1581bd);
    border-radius:8px; transform:rotate(15deg); position:absolute;
}
.modal-service-card .icon-bg-2 {
    width:34px; height:34px;
    background:linear-gradient(to bottom,#0c99ff,#0ce2ff);
    border-radius:8px; position:relative;
    margin-left:3px; margin-top:3px;
    display:flex; align-items:center; justify-content:center;
}
.modal-service-card .icon-bg-2 svg { width:20px; height:20px; color:white; }

.modal-service-card h3 {
    font-size:clamp(18px,3vw,28px); font-weight:bold; color:white;
    margin-bottom:clamp(12px,3vw,20px); letter-spacing:0.05em; line-height:1.2;
}
.modal-service-card p {
    font-size:clamp(14px,2vw,18px); color:rgba(255,255,255,0.7);
    line-height:1.6; margin-bottom:1rem; letter-spacing:0.025em;
}

.modal-list { list-style:none; padding:0; margin:clamp(12px,3vw,24px) 0; }
.modal-list li {
    font-size:clamp(14px,2vw,17px); color:rgba(255,255,255,0.8);
    padding:7px 0 7px 26px; position:relative; line-height:1.5;
}
.modal-list li::before {
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:11px; height:11px; background:#0E7F66; border-radius:50%;
    box-shadow:0 0 8px rgba(14,127,102,0.5);
}

/* Modal Divider */
.modal-divider {
    width:80px; height:3px;
    background:linear-gradient(90deg,transparent,#0E7F66,transparent);
    margin:clamp(40px,10vw,80px) auto; border-radius:2px;
}

/* Secondary Heading */
.modal-secondary-heading { margin-top:clamp(40px,10vw,80px); margin-bottom:clamp(30px,8vw,60px); }

/* Features Grid */
.modal-features-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:clamp(14px,4vw,30px); max-width:900px; margin:0 auto;
}
.modal-feature {
    display:flex; align-items:center; gap:14px;
    background:rgba(255,255,255,0.03); padding:clamp(14px,3vw,24px);
    border-radius:12px; border:1px solid rgba(255,255,255,0.08); transition:all 0.3s ease;
}
.modal-feature:hover {
    background:rgba(255,255,255,0.06); border-color:rgba(14,127,102,0.4);
    transform:translateX(6px);
}
.feature-dot {
    width:12px; height:12px; background:#0E7F66;
    border-radius:50%; flex-shrink:0; box-shadow:0 0 12px rgba(14,127,102,0.6);
}
.modal-feature p { font-size:clamp(14px,2vw,18px); color:white; margin:0; line-height:1.4; }

/* Tech Tags */
.tech-tags { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:clamp(20px,4vw,36px) 0; }
@media (min-width: 640px) { .tech-tags { gap:12px; } }
.tech-tag {
    padding:8px 16px; background:rgba(255,255,255,0.05); color:white;
    border:1px solid rgba(14,127,102,0.3); border-radius:24px;
    font-size:13px; font-weight:600; transition:all 0.3s ease; backdrop-filter:blur(10px);
}
@media (min-width: 640px) { .tech-tag { padding:10px 20px; font-size:14px; } }
.tech-tag:hover { background:rgba(14,127,102,0.2); border-color:rgba(14,127,102,0.6); transform:translateY(-2px); }

/* ── Why Choose Section ────────────────────────────────────── */
.why-choose-section {
    padding:clamp(60px,12vw,140px) 0;
    background:linear-gradient(180deg,#ffffff 0%,#f8f9fa 100%);
    position:relative; overflow:hidden;
}
.why-choose-section::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(14,127,102,0.2),transparent);
}

.why-choose-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(18px,4vw,40px);
    margin-top:clamp(30px,6vw,60px);
}
@media (min-width: 640px)  { .why-choose-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1280px) { .why-choose-grid { grid-template-columns:repeat(4,1fr); } }

.why-choose-card {
    position:relative; background:white;
    border-radius:20px; overflow:hidden;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    transition:all 0.4s cubic-bezier(0.4,0,0.2,1); cursor:pointer;
}
.why-choose-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg,#0E7F66,#1FA58A);
    transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.why-choose-card:hover { transform:translateY(-12px); box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.why-choose-card:hover::before { transform:scaleX(1); }

.card-image {
    position:relative; width:100%;
    /* FIX #7: clamp so it doesn't look cramped on small screens */
    height:clamp(180px,30vw,240px);
    background-size:cover; background-position:center; transition:transform 0.6s ease;
    overflow:hidden;
}
.why-choose-card:hover .card-image { transform:scale(1.08); }
.card-overlay {
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.6) 100%);
    transition:opacity 0.4s ease;
}
.why-choose-card:hover .card-overlay { opacity:0.8; }

.card-badge {
    position:absolute; top:16px; right:16px;
    width:44px; height:44px;
    background:rgba(255,255,255,0.95); backdrop-filter:blur(10px);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    z-index:2; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:all 0.3s ease;
}
@media (min-width: 640px) { .card-badge { top:20px; right:20px; width:48px; height:48px; } }
.why-choose-card:hover .card-badge { transform:rotate(360deg) scale(1.1); background:linear-gradient(135deg,#0E7F66,#1FA58A); }
.card-badge svg { width:22px; height:22px; color:#0E7F66; transition:color 0.3s ease; }
@media (min-width: 640px) { .card-badge svg { width:24px; height:24px; } }
.why-choose-card:hover .card-badge svg { color:white; }

.card-content { padding:clamp(18px,4vw,32px); position:relative; background:white; }

.card-stats {
    display:flex; gap:16px; margin-bottom:16px; padding-bottom:16px;
    border-bottom:2px solid #f0f0f0; flex-wrap:wrap;
}
@media (min-width: 640px) { .card-stats { gap:20px; margin-bottom:20px; padding-bottom:20px; } }

.stat-item { display:flex; flex-direction:column; align-items:flex-start; }
.stat-number {
    font-size:clamp(22px,4vw,32px); font-weight:800;
    background:linear-gradient(135deg,#0E7F66,#1FA58A);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; line-height:1; margin-bottom:4px;
}
.stat-label { font-size:11px; color:#666; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
@media (min-width: 640px) { .stat-label { font-size:12px; } }

.card-content h3 {
    font-size:clamp(18px,3vw,24px); font-weight:700; color:#1a1a1a;
    margin-bottom:10px; letter-spacing:-0.02em; line-height:1.3;
}
@media (min-width: 640px) { .card-content h3 { margin-bottom:12px; } }
.card-content p { font-size:clamp(13px,2vw,16px); color:#666; line-height:1.6; margin-bottom:16px; }

.card-highlights { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
@media (min-width: 640px) { .card-highlights { gap:8px; margin-top:16px; } }
.highlight-tag {
    padding:5px 12px; background:rgba(14,127,102,0.08); color:#0E7F66;
    border-radius:20px; font-size:11px; font-weight:600;
    transition:all 0.3s ease; border:1px solid rgba(14,127,102,0.2);
}
@media (min-width: 640px) { .highlight-tag { padding:6px 14px; font-size:12px; } }
.why-choose-card:hover .highlight-tag { background:rgba(14,127,102,0.15); border-color:rgba(14,127,102,0.4); transform:translateY(-2px); }

/* Trust Indicators */
.trust-indicators {
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(14px,4vw,30px);
    margin-top:clamp(40px,8vw,80px);
    padding-top:clamp(30px,6vw,60px);
    border-top:1px solid #e0e0e0;
}
@media (min-width: 640px)  { .trust-indicators { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1024px) { .trust-indicators { grid-template-columns:repeat(4,1fr); } }

.trust-item {
    display:flex; align-items:center; gap:14px;
    padding:clamp(14px,3vw,20px); background:white;
    border-radius:12px; border:1px solid #f0f0f0; transition:all 0.3s ease;
}
@media (min-width: 640px) { .trust-item { gap:16px; } }
.trust-item:hover { border-color:rgba(14,127,102,0.3); box-shadow:0 4px 12px rgba(0,0,0,0.08); transform:translateY(-4px); }

.trust-icon {
    width:44px; height:44px; min-width:44px;
    background:linear-gradient(135deg,rgba(14,127,102,0.1),rgba(31,165,138,0.1));
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    transition:all 0.3s ease;
}
@media (min-width: 640px) { .trust-icon { width:48px; height:48px; min-width:48px; } }
.trust-item:hover .trust-icon { background:linear-gradient(135deg,#0E7F66,#1FA58A); transform:scale(1.1); }
.trust-icon svg { width:22px; height:22px; color:#0E7F66; transition:color 0.3s ease; }
@media (min-width: 640px) { .trust-icon svg { width:24px; height:24px; } }
.trust-item:hover .trust-icon svg { color:white; }

.trust-content h4 { font-size:clamp(14px,2vw,17px); font-weight:700; color:#1a1a1a; margin-bottom:3px; letter-spacing:-0.01em; }
.trust-content p  { font-size:clamp(12px,1.8vw,14px); color:#666; margin:0; line-height:1.4; }

/* ── Approach Section ──────────────────────────────────────── */
.approach-section .section-header { margin-bottom:clamp(50px,8vw,80px); }
.approach-section .section-header h2 { margin-bottom:clamp(30px,6vw,60px); }
.approach-section .section-header p .highlight { font-weight:700; color:#0E7F66; text-shadow:0 0 1px rgba(12,80,255,0.3); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { position:relative; overflow:hidden; }
.footer-bg {
    position:absolute; inset:0;
    background-image:url("https://cdn.pixabay.com/photo/2020/05/04/13/30/outdoors-5129182_960_720.jpg");
    background-size:cover; background-position:center;
}
.footer-overlay { position:absolute; inset:0; background:rgba(17,17,17,0.75); }
.footer-content { position:relative; z-index:10; padding:3rem 0; }
@media (min-width: 640px) { .footer-content { padding:4rem 0; } }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* phone: single column */
    gap: 2.5rem;
}
/* FIX #8: added 2-column tablet layout that was missing */
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2,1fr); gap:2rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:3rem; } }

.footer-company { grid-column:span 1; }
/* On tablet, company section spans 2 cols for visual balance */
@media (min-width: 640px) and (max-width: 1023px) { .footer-company { grid-column:span 2; } }

.footer-logo { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.footer-logo img { height:40px; width:auto; border-radius:8px; }
@media (min-width: 640px) { .footer-logo img { height:48px; } }
.footer-logo-text { font-size:1.125rem; font-weight:bold; color:white; }
@media (min-width: 640px) { .footer-logo-text { font-size:1.25rem; } }

.footer-description { color:rgba(255,255,255,0.8); line-height:1.6; margin-bottom:1.5rem; font-size:0.9rem; }
@media (min-width: 640px) { .footer-description { font-size:1rem; } }

.footer-social { display:flex; gap:0.875rem; }
.social-link {
    width:34px; height:34px; background:#ccc; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s ease; text-decoration:none; color:#555;
}
@media (min-width: 640px) { .social-link { width:36px; height:36px; } }
.social-link:hover { background:#0E7F66; transform:scale(1.1); }
.social-link svg { width:18px; height:18px; }
@media (min-width: 640px) { .social-link svg { width:20px; height:20px; } }

.footer-section-title { font-size:1.1rem; font-weight:bold; color:white; margin-bottom:1.25rem; }
@media (min-width: 640px) { .footer-section-title { font-size:1.25rem; margin-bottom:1.5rem; } }

.footer-links { color:rgba(255,255,255,0.8); }
.footer-links p { margin-bottom:0.875rem; cursor:pointer; transition:color 0.2s ease; font-size:0.9rem; }
@media (min-width: 640px) { .footer-links p { margin-bottom:1rem; font-size:1rem; } }
.footer-links p:hover { color:white; }

.footer-contact { color:rgba(255,255,255,0.8); }
.footer-contact-item { display:flex; align-items:flex-start; gap:0.875rem; margin-bottom:0.875rem; }
@media (min-width: 640px) { .footer-contact-item { gap:1rem; margin-bottom:1rem; } }
.contact-icon { width:22px; height:22px; flex-shrink:0; margin-top:2px; }
@media (min-width: 640px) { .contact-icon { width:24px; height:24px; } }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.2);
    margin-top:2.5rem; padding-top:1.75rem;
    display:flex; flex-direction:column; align-items:center; gap:1rem;
    text-align:center;
}
@media (min-width: 640px) { .footer-bottom { margin-top:3rem; padding-top:2rem; } }
@media (min-width: 1024px) { .footer-bottom { flex-direction:row; justify-content:space-between; text-align:left; } }

.footer-copyright { color:rgba(255,255,255,0.6); font-size:0.875rem; }
@media (min-width: 640px) { .footer-copyright { font-size:1rem; } }

.footer-legal { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }
@media (min-width: 640px) { .footer-legal { gap:2rem; } }
.footer-legal-link { color:rgba(255,255,255,0.6); text-decoration:none; transition:color 0.2s ease; font-size:0.875rem; }
@media (min-width: 640px) { .footer-legal-link { font-size:1rem; } }
.footer-legal-link:hover { color:white; }

/* ── Modal Client Card fix ─────────────────────────────────── */
/*
   FIX #3: Original had position:fixed which is a critical bug —
   client cards were stacking on top of everything. Changed to relative.
*/
.modal-client-card {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px; padding:clamp(24px,5vw,40px);
    text-align:center; transition:all 0.4s ease;
    position:relative; /* FIX: was position:fixed — critical layout bug */
    opacity:1; transform:translateY(0);
}
.modal-client-card:hover {
    background:rgba(255,255,255,0.06); border-color:rgba(14,127,102,0.4);
    transform:translateY(-8px); box-shadow:0 16px 32px rgba(0,0,0,0.5);
}
.modal-clients-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:clamp(20px,5vw,40px); max-width:1000px; margin:0 auto;
}
@media (min-width: 640px)  { .modal-clients-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width: 1024px) { .modal-clients-grid { grid-template-columns:repeat(3,1fr); } }

.client-icon {
    width:56px; height:56px; margin:0 auto clamp(14px,3vw,24px);
    background:linear-gradient(135deg,rgba(12,80,255,0.15),rgba(12,226,255,0.15));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(12,226,255,0.3);
}
@media (min-width: 640px) { .client-icon { width:60px; height:60px; } }
.client-icon img { width:28px; height:28px; filter:brightness(0) invert(1); }
@media (min-width: 640px) { .client-icon img { width:32px; height:32px; } }
.modal-client-card p { font-size:clamp(15px,2.5vw,20px); color:white; line-height:1.4; margin:0; }

/* ── Why choose modal section ──────────────────────────────── */
.modal-why-section { background:linear-gradient(135deg,#0a0a0a 0%,#151515 100%); }
.modal-clients-section { background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%); }

/* ── Scroll animations ─────────────────────────────────────── */
.fade-in-up   { opacity:0; transform:translateY(30px); transition:all 0.6s ease-out; }
.fade-in-up.animate   { opacity:1; transform:translateY(0); }
.fade-in-left { opacity:0; transform:translateX(-50px); transition:all 0.6s ease-out; }
.fade-in-left.animate { opacity:1; transform:translateX(0); }
.fade-in-right{ opacity:0; transform:translateX(50px); transition:all 0.6s ease-out; }
.fade-in-right.animate{ opacity:1; transform:translateX(0); }

[data-aos="fade-up"] { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease; }
[data-aos="fade-up"].aos-animate { opacity:1; transform:translateY(0); }

/* ── Responsive fallback ───────────────────────────────────── */
@media (max-width: 480px) {
    .hero-title    { font-size:24px; }
    .section-title { font-size:24px; }
    .hero-buttons  { gap:0.625rem; }
    .btn           { height:44px; font-size:13px; padding:0.625rem 1rem; }
    .modal-section-indicators { display:none; } /* too small — hide on tiny phones */
}