/* Knowledge Technology Solutions - Unified cyber/AI theme */
:root {
  --bg-primary: #050814;
  --bg-secondary: #0c1021;
  --bg-surface: #141a2f;
  --bg-card: #1a2340;
  --text-primary: #f5f7ff;
  --text-secondary: #c8cce5;
  --text-muted: #9aa3c5;
  --accent-magenta: #e52189;
  --accent-cyan: #1fe1ff;
  --accent-teal: #3bcbb5;
  --border-color: rgba(255, 255, 255, 0.08);
  --shadow-xl: 0 22px 60px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --radius-lg: 22px;
}

/* FIX: Moved inline styles into CSS classes to allow CSP without 'unsafe-inline' */

/* Section background utility */
.section.bg-secondary {
  background: var(--bg-secondary);
}

/* Hero background images per page */
.bg-hero-index {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/20/Riyadh_Skyline.jpg');
}
.bg-hero-about {
  background-image: url('https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&w=1920');
}
.bg-hero-contact {
  background-image: url('https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&w=1920');
}
.bg-hero-cyber {
  background-image: url('https://images.pexels.com/photos/5380664/pexels-photo-5380664.jpeg?auto=compress&cs=tinysrgb&w=1920');
}
.bg-hero-ai {
  background-image: url('https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=1920');
}
.bg-hero-clients {
  background-image: url('https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1920');
}

/* Card cover images used across pages */
.cover-about-1 { background-image: url('https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-cyber-1 { background-image: url('https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-ai-1 { background-image: url('https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-clients-1 { background-image: url('https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=800'); }

.cover-cyber-secops { background-image: url('https://images.pexels.com/photos/5473298/pexels-photo-5473298.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-cyber-cloud { background-image: url('https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-cyber-data { background-image: url('https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=800'); }

.cover-transform-1 { background-image: url('https://images.pexels.com/photos/7688336/pexels-photo-7688336.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-transform-2 { background-image: url('https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-transform-3 { background-image: url('https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-transform-4 { background-image: url('https://images.pexels.com/photos/325229/pexels-photo-325229.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-transform-5 { background-image: url('https://images.pexels.com/photos/5380642/pexels-photo-5380642.jpeg?auto=compress&cs=tinysrgb&w=800'); }

.cover-clients-gov { background-image: url('https://images.pexels.com/photos/1134176/pexels-photo-1134176.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-clients-fin { background-image: url('https://images.pexels.com/photos/210574/pexels-photo-210574.jpeg?auto=compress&cs=tinysrgb&w=800'); }
.cover-clients-ent { background-image: url('https://images.pexels.com/photos/3912981/pexels-photo-3912981.jpeg?auto=compress&cs=tinysrgb&w=800'); }

/* Service card icon backgrounds - Custom SVG Illustrations */
.service-icon-consultancy {
  background: linear-gradient(135deg, rgba(229, 33, 137, 0.2), rgba(31, 225, 255, 0.2)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23e52189;stop-opacity:1" /><stop offset="100%" style="stop-color:%231fe1ff;stop-opacity:1" /></linearGradient></defs><circle cx="60" cy="60" r="50" fill="url(%23grad1)" opacity="0.15"/><rect x="25" y="35" width="70" height="50" fill="none" stroke="url(%23grad1)" stroke-width="2" opacity="0.6" rx="4"/><circle cx="35" cy="45" r="3" fill="url(%23grad1)"/><circle cx="55" cy="42" r="3" fill="url(%23grad1)"/><circle cx="75" cy="48" r="3" fill="url(%23grad1)"/><path d="M35 45 L55 42 L75 48" stroke="url(%23grad1)" stroke-width="1.5" fill="none" opacity="0.7"/><line x1="25" y1="60" x2="95" y2="60" stroke="url(%23grad1)" stroke-width="1" opacity="0.5"/><circle cx="45" cy="72" r="2.5" fill="url(%23grad1)"/><circle cx="65" cy="75" r="2.5" fill="url(%23grad1)"/><circle cx="85" cy="70" r="2.5" fill="url(%23grad1)"/></svg>') center/contain no-repeat;
  background-size: 80%;
  background-position: center;
}

.service-icon-security {
  background: linear-gradient(135deg, rgba(229, 33, 137, 0.2), rgba(31, 225, 255, 0.2)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23e52189;stop-opacity:1" /><stop offset="100%" style="stop-color:%231fe1ff;stop-opacity:1" /></linearGradient></defs><path d="M60 15 L85 28 L85 60 Q85 85 60 100 Q35 85 35 60 L35 28 Z" fill="url(%23grad2)" opacity="0.3" stroke="url(%23grad2)" stroke-width="2"/><circle cx="60" cy="50" r="8" fill="url(%23grad2)" opacity="0.8"/><path d="M60 40 L60 50 M55 45 L65 45" stroke="url(%23grad2)" stroke-width="1.5" opacity="0.9"/><line x1="45" y1="70" x2="75" y2="70" stroke="url(%23grad2)" stroke-width="1.5" opacity="0.6"/><circle cx="50" cy="80" r="1.5" fill="url(%23grad2)"/><circle cx="60" cy="82" r="1.5" fill="url(%23grad2)"/><circle cx="70" cy="80" r="1.5" fill="url(%23grad2)"/></svg>') center/contain no-repeat;
  background-size: 80%;
  background-position: center;
}

.service-icon-infrastructure {
  background: linear-gradient(135deg, rgba(229, 33, 137, 0.2), rgba(31, 225, 255, 0.2)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23e52189;stop-opacity:1" /><stop offset="100%" style="stop-color:%231fe1ff;stop-opacity:1" /></linearGradient></defs><rect x="30" y="30" width="20" height="28" fill="url(%23grad3)" opacity="0.2" stroke="url(%23grad3)" stroke-width="1.5"/><rect x="65" y="30" width="20" height="28" fill="url(%23grad3)" opacity="0.2" stroke="url(%23grad3)" stroke-width="1.5"/><circle cx="40" cy="38" r="2" fill="url(%23grad3)"/><circle cx="40" cy="48" r="2" fill="url(%23grad3)"/><circle cx="75" cy="38" r="2" fill="url(%23grad3)"/><circle cx="75" cy="48" r="2" fill="url(%23grad3)"/><path d="M50 60 L70 60" stroke="url(%23grad3)" stroke-width="2" opacity="0.7"/><circle cx="40" cy="75" r="12" fill="none" stroke="url(%23grad3)" stroke-width="1.5" opacity="0.6"/><circle cx="40" cy="75" r="8" fill="none" stroke="url(%23grad3)" stroke-width="1" opacity="0.4"/><circle cx="80" cy="75" r="10" fill="url(%23grad3)" opacity="0.15" stroke="url(%23grad3)" stroke-width="1.5"/><line x1="50" y1="70" x2="70" y2="80" stroke="url(%23grad3)" stroke-width="1" opacity="0.5"/></svg>') center/contain no-repeat;
  background-size: 80%;
  background-position: center;
}

.service-icon-ai {
  background: linear-gradient(135deg, rgba(229, 33, 137, 0.2), rgba(31, 225, 255, 0.2)),
              url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><defs><linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23e52189;stop-opacity:1" /><stop offset="100%" style="stop-color:%231fe1ff;stop-opacity:1" /></linearGradient></defs><circle cx="60" cy="40" r="14" fill="url(%23grad4)" opacity="0.25" stroke="url(%23grad4)" stroke-width="2"/><circle cx="35" cy="70" r="8" fill="url(%23grad4)" opacity="0.2" stroke="url(%23grad4)" stroke-width="1.5"/><circle cx="85" cy="70" r="8" fill="url(%23grad4)" opacity="0.2" stroke="url(%23grad4)" stroke-width="1.5"/><circle cx="60" cy="85" r="8" fill="url(%23grad4)" opacity="0.2" stroke="url(%23grad4)" stroke-width="1.5"/><path d="M60 54 L35 70" stroke="url(%23grad4)" stroke-width="1.5" opacity="0.6"/><path d="M60 54 L85 70" stroke="url(%23grad4)" stroke-width="1.5" opacity="0.6"/><path d="M60 54 L60 77" stroke="url(%23grad4)" stroke-width="1.5" opacity="0.6"/><circle cx="60" cy="40" r="4" fill="url(%23grad4)" opacity="0.8"/><circle cx="35" cy="70" r="2" fill="url(%23grad4)"/><circle cx="85" cy="70" r="2" fill="url(%23grad4)"/><circle cx="60" cy="85" r="2" fill="url(%23grad4)"/></svg>') center/contain no-repeat;
  background-size: 80%;
  background-position: center;
}

/* Why section illustrative icons */
.why-icon {
  --why-icon-graphic: none;
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: var(--radius);
  border: 1px solid rgba(31, 225, 255, 0.45);
  background-color: #0b1224;
  background-image: linear-gradient(150deg, rgba(31, 225, 255, 0.16), rgba(229, 33, 137, 0.08)), var(--why-icon-graphic);
  background-size: 160% 160%, 72% 72%;
  background-repeat: no-repeat;
  background-position: center, center;
  box-shadow: inset 0 0 0 1px rgba(31, 225, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.45);
  display: grid;
  place-items: center;
}

.why-icon-local {
  --why-icon-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='g1' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%231fe1ff'/><stop offset='100%' stop-color='%23e52189'/></linearGradient></defs><path d='M60 15 C42 15 28 29 28 47 C28 70 49 94 60 106 C71 94 92 70 92 47 C92 29 78 15 60 15 Z' fill='none' stroke='url(%23g1)' stroke-width='3' opacity='0.7'/><rect x='40' y='40' width='40' height='34' rx='5' fill='url(%23g1)' opacity='0.16' stroke='url(%23g1)' stroke-width='2'/><line x1='44' y1='48' x2='76' y2='48' stroke='url(%23g1)' stroke-width='2' opacity='0.8'/><line x1='44' y1='56' x2='76' y2='56' stroke='url(%23g1)' stroke-width='2' opacity='0.7'/><line x1='44' y1='64' x2='76' y2='64' stroke='url(%23g1)' stroke-width='2' opacity='0.7'/><circle cx='50' cy='48' r='2.5' fill='url(%23g1)'/><circle cx='50' cy='56' r='2.5' fill='url(%23g1)'/><circle cx='50' cy='64' r='2.5' fill='url(%23g1)'/><path d='M44 74 C52 78 68 78 76 74' stroke='url(%23g1)' stroke-width='2' opacity='0.6' fill='none'/><circle cx='60' cy='74' r='5' fill='url(%23g1)' opacity='0.82'/></svg>");
}

.why-icon-heritage {
  --why-icon-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='g2' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%231fe1ff'/><stop offset='100%' stop-color='%23e52189'/></linearGradient></defs><path d='M60 18 L86 32 L86 58 Q86 80 60 100 Q34 80 34 58 L34 32 Z' fill='url(%23g2)' opacity='0.16' stroke='url(%23g2)' stroke-width='2.5'/><path d='M60 30 L60 50' stroke='url(%23g2)' stroke-width='2' opacity='0.8'/><circle cx='60' cy='30' r='4' fill='url(%23g2)' opacity='0.9'/><circle cx='60' cy='52' r='3' fill='url(%23g2)' opacity='0.9'/><path d='M60 52 L44 60 L38 54' stroke='url(%23g2)' stroke-width='2' opacity='0.8' fill='none'/><path d='M60 52 L76 60 L82 54' stroke='url(%23g2)' stroke-width='2' opacity='0.8' fill='none'/><circle cx='38' cy='54' r='2.5' fill='url(%23g2)'/><circle cx='82' cy='54' r='2.5' fill='url(%23g2)'/><path d='M46 70 C54 62 66 62 74 70' stroke='url(%23g2)' stroke-width='2' opacity='0.8' fill='none'/><circle cx='46' cy='70' r='2.5' fill='url(%23g2)'/><circle cx='74' cy='70' r='2.5' fill='url(%23g2)'/><circle cx='60' cy='74' r='4' fill='url(%23g2)' opacity='0.85'/></svg>");
}

.why-icon-custom {
  --why-icon-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='g3' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%231fe1ff'/><stop offset='100%' stop-color='%23e52189'/></linearGradient></defs><rect x='30' y='34' width='22' height='16' rx='4' fill='url(%23g3)' opacity='0.15' stroke='url(%23g3)' stroke-width='2'/><rect x='68' y='34' width='22' height='16' rx='4' fill='url(%23g3)' opacity='0.15' stroke='url(%23g3)' stroke-width='2'/><rect x='32' y='50' width='56' height='8' rx='4' fill='none' stroke='url(%23g3)' stroke-width='2' opacity='0.85'/><circle cx='48' cy='54' r='4' fill='url(%23g3)' opacity='0.9'/><rect x='32' y='62' width='56' height='8' rx='4' fill='none' stroke='url(%23g3)' stroke-width='2' opacity='0.7'/><circle cx='74' cy='66' r='4' fill='url(%23g3)' opacity='0.9'/><circle cx='60' cy='80' r='11' fill='none' stroke='url(%23g3)' stroke-width='2' opacity='0.8'/><path d='M60 69 L60 91 M52 74 L68 86 M68 74 L52 86' stroke='url(%23g3)' stroke-width='2' opacity='0.65' fill='none'/></svg>");
}

.why-icon-partnership {
  --why-icon-graphic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><linearGradient id='g4' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' stop-color='%231fe1ff'/><stop offset='100%' stop-color='%23e52189'/></linearGradient></defs><path d='M32 46 L48 46 L58 54 L62 54 L72 46 L88 46' stroke='url(%23g4)' stroke-width='2.2' fill='none' opacity='0.85'/><circle cx='32' cy='46' r='3' fill='url(%23g4)'/><circle cx='48' cy='46' r='3' fill='url(%23g4)'/><circle cx='72' cy='46' r='3' fill='url(%23g4)'/><circle cx='88' cy='46' r='3' fill='url(%23g4)'/><path d='M34 68 Q46 56 60 64 L60 78 Q48 72 36 80 Z' fill='url(%23g4)' opacity='0.14' stroke='url(%23g4)' stroke-width='2'/><path d='M86 68 Q74 56 60 64 L60 78 Q72 72 84 80 Z' fill='url(%23g4)' opacity='0.14' stroke='url(%23g4)' stroke-width='2'/><path d='M52 64 L60 72 L68 64 L68 72 L60 80 L52 72 Z' fill='url(%23g4)' opacity='0.6'/><path d='M40 86 L60 94 L80 86' stroke='url(%23g4)' stroke-width='2' opacity='0.65' fill='none'/></svg>");
}

/* Utility helpers to remove inline styles */
.heading-md { font-size: 1.9rem; }

/* Service card icon container */
.service-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(31, 225, 255, 0.05);
  border: 1px solid rgba(31, 225, 255, 0.15);
}

/* Service card header wrapper */
.service-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(31, 225, 255, 0.1);
}

/* Service card heading */
.service-card-title {
  color: var(--accent-cyan);
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}
.heading-xl { font-size: 2rem; }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.is-hidden { display: none; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(229, 33, 137, 0.08), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(31, 225, 255, 0.08), transparent 50%);
  z-index: -2;
}
a { color: inherit; text-decoration: none; transition: 0.3s ease; }
img { max-width: 100%; display: block; border-radius: var(--radius); }
p { color: var(--text-secondary); }
ul { list-style: none; }
.text-muted { color: var(--text-muted); }

.container { width: min(1200px, 94vw); margin: 0 auto; padding: 0 1rem; }
main { padding-top: 88px; }

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(5, 8, 20, 0.9);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(16px);
}
.site-header.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.brand { display: flex; align-items: center; gap: 1.1rem; font-weight: 700; }
.brand:hover { transform: translateY(-2px); }
.brand:hover .logo-img {
  box-shadow: 0 10px 35px rgba(229, 33, 137, 0.5), 0 0 30px rgba(31, 225, 255, 0.35);
  transform: scale(1.03);
}
.logo-img { 
  width: 56px; 
  height: 56px; 
  flex-shrink: 0; 
  border-radius: 14px;
  background: #ffffff;
  padding: 6px;
  object-fit: contain;
  box-shadow: 0 6px 25px rgba(229, 33, 137, 0.4), 0 0 20px rgba(31, 225, 255, 0.25), inset 0 0 0 1px rgba(229, 33, 137, 0.1);
  border: 2px solid rgba(229, 33, 137, 0.2);
  transition: all 0.3s ease;
}
.brand-words { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.brand-name { 
  font-size: 1.1rem; 
  color: var(--text-primary); 
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  color: var(--text-secondary);
  font-weight: 600;
  position: relative;
}
.nav-links a::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  height: 2px;
  background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.nav-links a:hover::before, .nav-links a.active::before { transform: scaleX(1); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.hamburger span { display: block; height: 2px; width: 22px; background: var(--text-primary); transition: 0.3s ease; margin: 0 auto; }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: 80px;
    right: -100%;
    width: 280px;
    background: rgba(12, 16, 33, 0.98);
    border-left: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    transition: 0.3s ease;
    box-shadow: var(--shadow-xl);
  }
  .nav-links.active { right: 0; }
  .hamburger { display: inline-flex; }
}

/* Hero - Standardized heights */
.hero { 
  position: relative; 
  min-height: 50vh; 
  display: flex; 
  align-items: center; 
  overflow: hidden; 
  padding: 6rem 0; 
}
.hero-home { 
  min-height: 70vh; 
  padding: 7rem 0 5rem; 
}
.hero-page { 
  min-height: 50vh; 
  padding: 6rem 0; 
}
.hero-bg { 
  position: absolute; 
  inset: 0; 
  background-size: cover; 
  background-position: center; 
  filter: saturate(1.05); 
  transform: scale(1.02); 
}
.hero-overlay { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(135deg, rgba(5, 8, 20, 0.92), rgba(12, 16, 33, 0.88), rgba(5, 8, 20, 0.94)); 
}
.hero-content { 
  position: relative; 
  z-index: 1; 
  max-width: 880px; 
  text-align: center; 
  margin: 0 auto; 
  padding: 0 1rem;
}
.hero-content h1 { 
  font-size: clamp(2.2rem, 4vw, 3.5rem); 
  margin-bottom: 1.25rem; 
  line-height: 1.2;
}
.hero-subtitle { 
  font-size: clamp(1.05rem, 2vw, 1.3rem); 
  color: var(--accent-cyan); 
  margin-bottom: 1rem; 
  font-weight: 600; 
}
.hero-desc { 
  font-size: 1.05rem; 
  color: var(--text-secondary); 
  margin-bottom: 2rem; 
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow - hero/section context */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 225, 255, 0.5);
  background: rgba(31, 225, 255, 0.08);
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  width: auto;
  max-width: fit-content;
}

/* Eyebrow inside cards - smaller and inline */
.card-body .eyebrow {
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  margin-bottom: 0.75rem;
  background: rgba(31, 225, 255, 0.1);
  border: 1px solid rgba(31, 225, 255, 0.4);
  color: var(--accent-cyan);
  align-self: flex-start;
  width: auto;
}

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0.01em;
}
.btn-primary { 
  background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan)); 
  color: #fff; 
  box-shadow: 0 8px 24px rgba(229, 33, 137, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: none;
}
.btn-primary:hover { 
  transform: translateY(-3px); 
  box-shadow: 0 12px 32px rgba(229, 33, 137, 0.5);
  filter: brightness(1.1);
}
.btn-ghost { 
  background: rgba(31, 225, 255, 0.05); 
  border-color: rgba(31, 225, 255, 0.5); 
  color: var(--accent-cyan); 
}
.btn-ghost:hover { 
  background: rgba(31, 225, 255, 0.15); 
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 24px rgba(31, 225, 255, 0.25); 
  transform: translateY(-3px); 
}
.btn-secondary { 
  background: var(--accent-cyan); 
  color: #0a0f1e; 
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(31, 225, 255, 0.3);
}
.btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(31, 225, 255, 0.45);
  filter: brightness(1.1);
}

.stat-row { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; 
  margin: 3rem 0 0; 
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}
.stat-card {
  background: linear-gradient(145deg, rgba(26, 35, 64, 0.9), rgba(17, 23, 41, 0.95));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.stat-num { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { color: var(--accent-cyan); font-weight: 700; letter-spacing: 0.06em; margin: 0.35rem 0; }
.stat-desc { color: var(--text-muted); font-size: 0.95rem; }

.section { padding: 5rem 0; position: relative; }
.section-header { text-align: center; max-width: 780px; margin: 0 auto 3.5rem; }
.section-title { font-size: clamp(2rem, 3vw, 3rem); margin-bottom: 0.6rem; background: linear-gradient(135deg, #fff, var(--accent-cyan)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-intro { color: var(--text-secondary); font-size: 1.05rem; }

.grid { display: grid; gap: 2.25rem; align-items: stretch; }
/* Content-heavy cards: 2 columns for 4+ items, 3 columns for 3 items */
.overview-grid { grid-template-columns: repeat(2, 1fr); gap: 2.25rem; }
.overview-grid-3 { grid-template-columns: repeat(3, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
.ai-portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.diff-grid { grid-template-columns: repeat(2, 1fr); }
.values-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.service-cards { grid-template-columns: repeat(2, 1fr); }
.data-management-grid { grid-template-columns: repeat(2, 1fr); }
.security-grid { grid-template-columns: repeat(2, 1fr); }

/* Responsive: single column on smaller screens */
@media (max-width: 992px) {
  .overview-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .overview-grid, .overview-grid-3, .why-grid, .portfolio-grid, .ai-portfolio-grid, 
  .services-grid, .diff-grid, .values-grid, .two-col, 
  .service-cards, .data-management-grid, .security-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .service-card .card-body, .dm-card .card-body, .security-card .card-body {
    padding: 1.75rem;
  }
  .service-card-header {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    gap: 1rem;
  }
  .service-card-icon {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 480px) {
  .grid { gap: 1.5rem; }
  .service-card .card-body, .dm-card .card-body, .security-card .card-body {
    padding: 1.5rem;
  }
  .service-card-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    gap: 0.85rem;
  }
  .service-card-icon {
    width: 52px;
    height: 52px;
  }
  .service-card-title {
    font-size: 1rem;
  }
  .service-card li, .dm-card li, .security-card li {
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
  }
}

.card, .overview-card, .why-card, .portfolio-card, .service-card, .dm-card, .security-card, .ai-portfolio-card, .phase-card, .product-detail, .contact-info-card, .offices-mini, .client-card, .partner-card, .why-contact-card {
  background: linear-gradient(145deg, rgba(26, 35, 64, 0.8), rgba(17, 23, 41, 0.9));
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Equal height cards in grid rows */
.overview-card, .why-card, .portfolio-card, .service-card, .dm-card, .security-card, .ai-portfolio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.overview-card .card-body, .why-card .card-body, .portfolio-card .card-body, 
.service-card .card-body, .dm-card .card-body, .security-card .card-body, 
.ai-portfolio-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.overview-card .btn, .why-card .btn, .portfolio-card .btn, 
.service-card .btn, .dm-card .btn, .security-card .btn, 
.ai-portfolio-card .btn {
  margin-top: 1.25rem;
  align-self: flex-start;
}

/* Buttons inside card-body need spacing from content above */
.card-body .btn {
  margin-top: 1.25rem;
}

.overview-card:hover, .why-card:hover, .portfolio-card:hover, .service-card:hover, .dm-card:hover, .security-card:hover, .ai-portfolio-card:hover, .client-card:hover, .partner-card:hover, .why-contact-card:hover { 
  transform: translateY(-5px); 
  border-color: rgba(229, 33, 137, 0.4); 
  box-shadow: 0 16px 40px rgba(31, 225, 255, 0.15), 0 0 1px rgba(229, 33, 137, 0.2);
}

.card-body { padding: 2rem; }
.cover-img { 
  height: 180px; 
  background-size: cover; 
  background-position: center; 
  border-radius: var(--radius); 
  margin: 1rem 1rem 1.25rem 1rem; 
  position: relative; 
  overflow: hidden; 
}
.cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 8, 20, 0.85)); }

.overview-card h3, .service-card h4, .dm-card h4, .security-card h4, .ai-portfolio-card h3 { 
  color: var(--accent-cyan); 
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}
.overview-card p, .service-card p, .dm-card p, .security-card p, .ai-portfolio-card p { 
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.badge, .chip { 
  display: inline-flex; 
  align-items: center; 
  padding: 0.4rem 0.85rem; 
  border-radius: 999px; 
  background: rgba(31, 225, 255, 0.08); 
  border: 1px solid rgba(31, 225, 255, 0.3); 
  color: var(--accent-cyan); 
  font-weight: 600; 
  font-size: 0.75rem; 
  text-transform: uppercase; 
  letter-spacing: 0.06em;
  width: fit-content;
  margin-bottom: 0.75rem;
}
.value-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

.list { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--text-secondary); }
.list li { margin-bottom: 0.45rem; position: relative; }
.list li::before { content: '-'; position: absolute; left: -1.1rem; color: var(--accent-cyan); font-weight: 700; }

.highlight-box { background: rgba(229, 33, 137, 0.08); border: 1px solid rgba(229, 33, 137, 0.3); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; color: var(--text-secondary); }

/* Logo Wall - 3 columns grid for sector/vendor items */
.logo-wall {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
}
.logo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.75rem 1.25rem;
  min-height: 120px;
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(26, 35, 64, 0.6), rgba(17, 23, 41, 0.8));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.logo-slot i {
  font-size: 2rem;
  color: var(--accent-cyan);
  transition: all 0.3s ease;
}
.logo-slot:hover {
  background: linear-gradient(145deg, rgba(31, 225, 255, 0.1), rgba(229, 33, 137, 0.08));
  border-color: rgba(31, 225, 255, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(31, 225, 255, 0.15);
}
.logo-slot:hover i {
  color: var(--accent-magenta);
  transform: scale(1.1);
}

/* Responsive logo wall */
@media (max-width: 768px) {
  .logo-wall {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .logo-wall {
    grid-template-columns: 1fr !important;
  }
  .logo-slot {
    min-height: 100px;
  }
}

/* Service & data cards */
/* Service & AI Portfolio cards */
.service-card, .dm-card, .security-card { padding: 0; }
.service-card .card-body, .dm-card .card-body, .security-card .card-body { padding: 2rem; }

/* AI Portfolio card specific styles */
.ai-portfolio-card {
  padding: 2rem;
}
.ai-portfolio-card h3 {
  margin-bottom: 1rem;
}
.ai-portfolio-card p {
  margin-bottom: 1.25rem;
  line-height: 1.7;
}
.ai-portfolio-card ul {
  margin-top: 0;
  padding-left: 1.25rem;
  color: var(--text-muted);
}
.ai-portfolio-card li {
  margin-bottom: 0.65rem;
  position: relative;
  line-height: 1.5;
}
.ai-portfolio-card li::before {
  content: '-';
  position: absolute;
  left: -1.1rem;
  color: var(--accent-cyan);
}

.service-card ul, .dm-card ul, .security-card ul { 
  margin-top: 1rem; 
  margin-bottom: 0;
  padding-left: 1.1rem; 
  color: var(--text-muted);
  line-height: 1.7;
}
.service-card p, .dm-card p, .security-card p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.service-card li, .dm-card li, .security-card li { 
  margin-bottom: 0.6rem; 
  position: relative;
  line-height: 1.5;
}
.service-card li::before, .dm-card li::before, .security-card li::before { 
  content: '-'; 
  position: absolute; 
  left: -1.1rem; 
  color: var(--accent-cyan); 
}

.diff-grid .diff-card, .values-grid .value-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.diff-card h4, .value-card h4 { color: var(--accent-cyan); margin-bottom: 0.5rem; }

.vmv-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; }
.vmv-card { padding: 2rem; }
.vmv-card.vision-card { border-left: 4px solid var(--accent-magenta); }
.vmv-card.mission-card { border-left: 4px solid var(--accent-cyan); }

.portfolio-highlights { margin-top: 2.5rem; display: grid; gap: 1rem; }
.highlight-item { padding: 1rem 1.25rem; background: rgba(31, 225, 255, 0.06); border: 1px solid rgba(31, 225, 255, 0.2); border-radius: var(--radius); color: var(--text-secondary); }

/* Consultancy Phases */
.consultancy-phases { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.phase-card { padding: 0; overflow: hidden; }
.phase-header { 
  background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan)); 
  padding: 1.5rem 2rem; 
  display: flex; 
  align-items: center; 
  gap: 1.25rem; 
}
.phase-number { 
  background: rgba(0, 0, 0, 0.2); 
  border-radius: 50%; 
  width: 60px; 
  height: 60px; 
  min-width: 60px;
  display: grid; 
  place-items: center; 
  font-weight: 800; 
  font-size: 0.9rem;
  color: #fff;
}
.phase-header h3 {
  color: #fff;
  margin: 0;
  font-size: 1.25rem;
}
.phase-content { padding: 2rem; }
.phase-content > p { margin-bottom: 1.5rem; }
.phase-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 1.25rem; }
.phase-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1.25rem; }
.phase-item h5 { color: var(--accent-cyan); margin-bottom: 0.5rem; font-size: 0.95rem; }
.phase-item p { font-size: 0.9rem; line-height: 1.6; }
.deliverables { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--accent-magenta); background: rgba(229, 33, 137, 0.08); border-radius: var(--radius); color: var(--text-secondary); }

/* Product Details */
.product-detail { padding: 0; margin-bottom: 2.5rem; overflow: hidden; }
.product-header { 
  padding: 1.75rem 2rem; 
  background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan)); 
  color: #fff; 
}
.product-header h3 { margin: 0 0 0.5rem; font-size: 1.35rem; }
.product-subtitle { color: rgba(255, 255, 255, 0.95); font-size: 1rem; }
.product-grid { 
  display: grid; 
  gap: 2rem; 
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
  padding: 2rem; 
}
.product-grid h4 {
  color: var(--accent-cyan);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.product-grid p {
  line-height: 1.7;
}
.product-grid ul {
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}
.product-grid li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.product-img-row { padding: 0 2rem 2rem; }
.module-card { 
  background: rgba(255, 255, 255, 0.04); 
  border: 1px solid var(--border-color); 
  border-radius: var(--radius); 
  padding: 1.5rem; 
}
.module-card h4 {
  color: var(--accent-cyan);
  margin-bottom: 0.5rem;
}
.product-features { padding: 0 2rem 2rem; }
.product-features h4 {
  color: var(--accent-cyan);
  margin-bottom: 1rem;
}
.product-features ul {
  padding-left: 1.25rem;
}
.product-features li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.cta-box {
  background: linear-gradient(135deg, rgba(229, 33, 137, 0.18), rgba(31, 225, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.cta-box h2 { margin-bottom: 0.75rem; }
.cta-box p { margin-bottom: 1.5rem; }

.logo-wall + .logo-wall { margin-top: 1.25rem; }

/* Services Grid */
.services-grid { gap: 1.5rem; }
.services-content > p {
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.service-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(145deg, rgba(26, 35, 64, 0.6), rgba(17, 23, 41, 0.8));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  align-items: flex-start;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}
.service-item:hover { 
  transform: translateY(-4px); 
  border-color: rgba(31, 225, 255, 0.4); 
  background: linear-gradient(145deg, rgba(31, 225, 255, 0.08), rgba(229, 33, 137, 0.05));
}
.service-item h4 { 
  color: var(--text-primary); 
  margin-bottom: 0.5rem; 
  font-size: 1.05rem;
}
.service-item p { 
  color: var(--text-secondary); 
  font-size: 0.95rem; 
  line-height: 1.6;
}
.service-num { 
  font-size: 2.25rem; 
  font-weight: 800; 
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-magenta)); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  flex-shrink: 0; 
  line-height: 1;
  min-width: 50px;
}

/* Services CTA */
.services-cta {
  margin-top: 3rem;
  text-align: center;
  padding: 2.5rem;
  background: linear-gradient(145deg, rgba(26, 35, 64, 0.6), rgba(17, 23, 41, 0.8));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.services-cta h3 {
  color: var(--accent-cyan);
  margin-bottom: 0.75rem;
}
.services-cta p {
  margin-bottom: 1.5rem;
}

/* SDAIA Box */
.sdaia-box {
  margin-top: 2.5rem;
  padding: 2rem;
  background: linear-gradient(145deg, rgba(31, 225, 255, 0.08), rgba(229, 33, 137, 0.05));
  border: 1px solid rgba(31, 225, 255, 0.25);
  border-radius: var(--radius-lg);
}
.sdaia-box h4 {
  color: var(--accent-cyan);
  margin-bottom: 0.75rem;
}
.sdaia-box p {
  line-height: 1.7;
}

.testimonial-box {
  margin-top: 3rem;
  padding: 2.5rem;
  background: rgba(229, 33, 137, 0.08);
  border-left: 4px solid var(--accent-magenta);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.testimonial-quote { font-size: 1.15rem; font-style: italic; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.8; }
.testimonial-author { color: var(--text-muted); font-weight: 700; }

/* Contact */
.contact-wrapper { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-weight: 600; color: var(--text-secondary); }
.form-group input, .form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  color: var(--text-primary);
  font-family: inherit;
}
.form-group input:focus, .form-group textarea:focus { outline: 2px solid rgba(31, 225, 255, 0.4); border-color: rgba(31, 225, 255, 0.6); }
.form-group textarea { min-height: 140px; resize: vertical; }
.form-success { margin-top: 1rem; padding: 1rem; background: rgba(31, 225, 255, 0.12); border: 1px solid rgba(31, 225, 255, 0.35); border-radius: var(--radius); color: var(--text-primary); text-align: center; }
/* Contact info card */
.contact-info-card {
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.contact-info-card h3 {
  color: var(--accent-cyan);
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
}
.info-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}
.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.info-content strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.info-content p {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.info-content a {
  color: var(--accent-cyan);
}
.info-content a:hover {
  text-decoration: underline;
}

.offices-mini { padding: 1.75rem; }
.offices-mini h4 {
  color: var(--accent-cyan);
  margin-bottom: 1rem;
}
.office-mini-list { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.office-mini-item { 
  background: rgba(255, 255, 255, 0.04); 
  border-radius: var(--radius); 
  padding: 1rem 1.25rem; 
  display: grid; 
  gap: 0.4rem; 
}
.office-mini-item strong {
  color: var(--text-primary);
}
.office-mini-item span {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}
.office-mini-item a {
  color: var(--accent-cyan);
}
.office-mini-item a:hover {
  text-decoration: underline;
}
.map-placeholder { position: relative; height: 240px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-color); background: linear-gradient(135deg, rgba(31, 225, 255, 0.2), rgba(229, 33, 137, 0.2)); display: grid; place-items: center; color: #fff; font-weight: 700; }
.map-placeholder::before { content: ''; position: absolute; inset: 0; background: url('https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&w=800') center/cover; filter: grayscale(1); opacity: 0.35; }

/* Footer */
.site-footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); margin-top: 6rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.5rem; padding: 3.5rem 0; }
.footer-logo { 
  width: 172px; 
  height: 122px; 
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
  margin-bottom: 1rem;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
}
.footer-brand { 
  font-weight: 800; 
  font-size: 1.15rem;
  letter-spacing: 0.03em; 
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.footer-tagline { 
  color: var(--accent-cyan); 
  margin-top: 0.4rem; 
  font-size: 0.95rem;
  font-weight: 500;
}
.footer-links li { margin-bottom: 0.55rem; }
.footer-links a { color: var(--text-secondary); }
.footer-links a:hover { color: var(--accent-cyan); padding-left: 6px; }
.footer-bottom { border-top: 1px solid var(--border-color); padding: 1.5rem 0; text-align: center; color: var(--text-muted); }

[data-animate] { opacity: 0; transform: translateY(24px); transition: 0.8s ease; }
[data-animate].animated { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .hero-content { text-align: center; }
  .hero { padding: 5rem 0; }
  .hero-home { min-height: 60vh; }
  .section { padding: 4rem 0; }
}

@media (max-width: 900px) {
  main { padding-top: 80px; }
  .hero-content { text-align: center; }
  .contact-wrapper { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .stat-card { padding: 1.25rem 1rem; }
  .stat-num { font-size: 2.25rem; }
}

@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  .hero { padding: 4rem 0; }
  .hero-home { min-height: 55vh; padding: 5rem 0 4rem; }
  .hero-page { min-height: 45vh; }
  .stat-row { grid-template-columns: 1fr; max-width: 320px; }
  .btn { width: 100%; justify-content: center; }
  .brand-name { font-size: 0.85rem; }
  .brand-k { font-size: 0.72rem; }
  .logo-img { width: 46px; height: 46px; padding: 4px; }
  .section { padding: 3rem 0; }
  .card-body { padding: 1.5rem; }
  .logo-wall { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
  .logo-slot { padding: 1.25rem 1rem; font-size: 0.8rem; }
}