@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --primary-blue: #3b82f6;
  --primary-hover: #2563eb;
  --navy-dark: #1e293b;
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-light: #94a3b8;
  --bg-white: #ffffff;
  --bg-gray-light: #f8fafc;
  --bg-gray-soft: #f1f5f9;
  --border-light: #e2e8f0;
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The header's mega-menu dropdown (.dropdown-menu.mega-menu) uses width:max-content
   and is positioned off to the left of its trigger - by design for a wide desktop
   hover panel, but the site has no mobile/tablet nav breakpoint at all, so below
   ~1050px that panel (still in the layout even while invisible via opacity/visibility)
   silently pushes the whole page's scrollable width out to ~980px, causing real
   horizontal scroll/cut-off content on tablet and mobile. This is the safety net;
   see the .dropdown-menu.mega-menu media query further down for the actual menu fix. */
html { overflow-x: hidden; }
body {
  font-family: var(--font-main);
  background-color: var(--bg-white);
  color: var(--text-muted);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: calc(2rem + 10px);
  padding-right: 2rem;
}

a { text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn-blue {
  background-color: var(--primary-blue);
  color: white;
}
.btn-blue:hover { background-color: var(--primary-hover); }
.btn-outline {
  background-color: white;
  color: var(--text-main);
  border: 1px solid var(--border-light);
}
.btn-outline:hover { background-color: var(--bg-gray-light); }

/* Header */
.main-header {
   padding: 0.75rem 0;
  background: white;
  border-bottom: 1px solid var(--border-light);
}
.header-container { display: flex; align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.logo {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-main);
 flex-shrink: 0; white-space: nowrap;}
.logo .accent { color: var(--primary-blue); }
.nav-links { margin-left: auto; margin-right: 2rem;   display: flex; gap: 2rem; }
.nav-links a {
  color: #718096; font-size: 0.875rem; font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text-main); }
.header-actions { display: flex; gap: 1.25rem; align-items: center; }
.btn-login { color: #718096; font-size: 0.875rem; font-weight: 500; }

/* Hero */
.hero-section {
  padding: 2rem 0 3rem 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
.hero-pill {
  display: inline-block;
  background-color: #eff6ff;
  color: var(--primary-blue);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.hero-title {
  /* Was 60px/800 - fine for a full-width hero, but this class is mostly used
     unoverridden inside .hero-grid's ~55%-width text column (home, about,
     services, and all 10 service pages), where 60px/800 reads oversized and
     heavy against the small kicker and modest body copy next to it. */
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: var(--text-main);
}
.text-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Body-text scale tied to heading level: text directly under an H1 (hero subtitle/
   desc) = 18px, under H2 (.section-subheading) = 16px, under H3 (card descriptions
   with an h3 title) = 15px, under H4 (stat-card captions with an h4 sub-label) = 12px. */
.hero-subtitle {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 500px;
  margin-bottom: 2.25rem;
  line-height: 1.65;
}
/* Was completely unstyled (no rule existed) - rendering as unstyled black browser-default
   text on all 10 service pages, /services, and /faqs. */
.hero-desc {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 500px;
  margin-bottom: 2.25rem;
  line-height: 1.65;
}
.hero-actions { display: flex; gap: 0.8rem; margin-bottom: 2rem; }
.hero-stats { display: flex; gap: 2rem; border-top: 1px solid var(--border-light); padding-top: 2rem; }
.stat-item h4 { font-size: 1.75rem; font-weight: 800; color: var(--text-main); line-height: 1; margin-bottom: 0.4rem; }
.stat-item p { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
.hero-image-container {
  background: var(--bg-gray-soft);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image-container img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.06);
}

/* Sections Global Rhythm */
section {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.bg-light {
  background-color: var(--bg-gray-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.section-kicker { color: var(--primary-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; }
.section-heading { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.85rem; line-height: 1.15; color: var(--text-main); }
.section-subheading { color: var(--text-muted); font-size: 16px; max-width: 620px; margin-bottom: 2rem; line-height: 1.6; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Clients / Ventures Section */
.stat-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }


.stat-card p { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }

.logo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.logo-box strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.logo-box span { font-size: 0.7rem; color: var(--text-light); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

/* Capabilities Section */
.pill-nav { display: flex; gap: 0.6rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pill { padding: 0.5rem 1.2rem; border-radius: 99px; background: #f1f5f9; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.pill.active { background: white; border: 1px solid var(--border-light); color: var(--text-main); }

.capabilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.capability-card { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; }
.icon-box { width: 42px; height: 42px; background: #f8fafc; border: 1px solid var(--border-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--text-main); }
.capability-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-main); }
.capability-card p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }
.banner-box { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.75rem 2.25rem; display: flex;  align-items: center; font-size: 0.95rem; font-weight: 500; white-space: nowrap; color: var(--text-main); }

/* Inside the Build Window */
.mock-window { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.04); margin-top: 1rem; }
.window-top { background: #f8fafc; border-bottom: 1px solid var(--border-light); padding: 0.85rem 1.5rem; display: flex; align-items: center;  }
.window-dots { display: flex; gap: 6px; }
.dot-r { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.dot-y { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; }
.dot-g { width: 10px; height: 10px; border-radius: 50%; background: #10b981; }
.window-title { font-size: 0.75rem; color: var(--text-light); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.window-nav { display: flex; background: #f8fafc; border-bottom: 1px solid var(--border-light); }
.w-tab { padding: 0.9rem 1.85rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); border-right: 1px solid var(--border-light); cursor: pointer; }
.w-tab.active { background: white; color: var(--text-main); font-weight: 600; border-bottom: 2px solid white; margin-bottom: -1px; }
.window-body { padding: 2rem; }
.window-body h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--text-main); }
.window-body p { color: var(--text-muted); max-width: 620px; margin-bottom: 1.5rem; }
.mock-ui { background: #f8fafc; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 1.75rem; display: flex; gap: 1.25rem; min-height: 220px; }
.ui-side { width: 180px; display: flex; flex-direction: column; gap: 0.85rem; }
.ui-bar { height: 12px; background: #e2e8f0; border-radius: 4px; }
.ui-bar.btn-bar { height: 30px; background: var(--primary-blue); border-radius: 6px; width: 100px; margin-top: 1rem; }
.ui-main { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ui-card { background: white; border: 1px solid var(--border-light); border-radius: 6px; }

/* 3 Cards Grid */
.cards-3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.card-item { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; }
.card-item h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--text-main); }
/* Most instances of this class pair an h4 sub-label directly above the p (the
   service-page stat cards: h3.stat-number -> h4 label -> p description), so this
   is treated as H4-tier body text. */
.card-item p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* Stat-number callout (service page "0.8s / 100% / 99.9%" cards). Was a 48px inline
   override on every instance - nearly double the codeans 24px stat-number reference.
   Selector is deliberately more specific than ".card-item h3" above so it actually wins. */
.card-item h3.stat-number { font-size: 1.5rem; font-weight: 800; color: #2563eb; margin-bottom: 0.5rem; letter-spacing: -0.02em; }

/* Process Section */
.process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.process-card { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; }
.step-lbl { font-size: 0.7rem; font-weight: 700; color: var(--text-light); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; display: block; }
.process-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--text-main); }
.process-card p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* CTA Banner */
.cta-banner { background-color: var(--bg-gray-light); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); text-align: center; }

/* Footer */
.main-footer { padding: 5rem 0 2.5rem 0; background: white; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 1.5rem; margin-bottom: 4rem; }
.footer-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 1rem; max-width: 320px; line-height: 1.6; }
.address-card { background: #f8fafc; border: 1px solid var(--border-light); border-radius: 8px; padding: 1.25rem; margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-muted); }
.address-card strong { color: var(--text-main); display: block; margin-bottom: 0.35rem; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-col h5 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; color: var(--text-main); }
.footer-col a { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.75rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--text-main); }
.footer-bottom { border-top: 1px solid var(--border-light); padding-top: 2rem; display: flex;  font-size: 0.8rem; color: var(--text-muted); }
.footer-bottom a { color: var(--primary-blue); font-weight: 600; }

@media (max-width: 1280px) {
  /* This used to target a dead, unused class ("floating-socials") so it never
     actually fired - the real sidebar (.social-sidebar) was left overlapping
     content on narrower desktop/laptop widths. */
  .social-sidebar { display: none; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}




/* Growth-Call Style Additions */
.text-gradient-purple {
    background: linear-gradient(to right, #6366f1, #3b82f6);
    -webkit-background-clip: text;
    color: transparent;
}
.text-gradient-green {
    background: linear-gradient(to right, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    color: transparent;
}
.btn-codeans-green {
    background-color: #0f9d58;
    color: white !important;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.4s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
}
.btn-codeans-green:hover {
    background-color: #0b8043;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 157, 88, 0.25);
}

.hero-mockup-wrapper {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
    margin-top: 2rem;
}
.mock-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(240,24df,255,0.6) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    pointer-events: none;
}
.mock-main-window {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    position: relative;
    z-index: 1;
    animation: mock-float-main 8s ease-in-out infinite;
}
.mock-browser-top {
    background: #f8fafc;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    
    border-bottom: 1px solid #f1f5f9;
}
.mock-dots { display: flex; gap: 6px; }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; }
.mock-url {
    background: #ffffff;
    border-radius: 6px;
    flex: 0 1 280px;
    text-align: center;
    font-size: 11px;
    color: #64748b;
    padding: 6px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    border: 1px solid #f1f5f9;
    font-weight: 500;
}
.mock-browser-body { padding: 35px; background: #ffffff; }
.mock-line { height: 8px; background: #f1f5f9; border-radius: 4px; margin-bottom: 12px; }
.mock-line-lg { height: 14px; border-radius: 6px; }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 25px; }
.mock-card { background: #f8fafc; height: 110px; border-radius: 8px; border: 1px solid #f1f5f9; }

.mock-floating-admin {
    position: absolute;
    left: -60px;
    top: 150px;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
    width: 340px;
    z-index: 2;
    animation: mock-float-admin 7s ease-in-out infinite;
    animation-delay: -2s;
}
.mock-title { font-size: 11px; font-weight: 700; color: #64748b; letter-spacing: 0.5px; margin-bottom: 18px; text-transform: uppercase;}
.mock-admin-header { display: flex; gap: 12px; margin-bottom: 18px; }
.mock-box-lg { flex: 1; height: 32px; background: #f1f5f9; border-radius: 6px; }
.mock-box-sm { width: 65px; height: 32px; background: #e0e7ff; border-radius: 6px; }
.mock-list { list-style: none; padding: 0; margin: 0; }
.mock-list li { display: flex; align-items: center; margin-bottom: 14px; }
.mock-dot-green { width: 8px; height: 8px; background: #10b981; border-radius: 50%; margin-right: 14px; }

.mock-floating-status {
    position: absolute;
    right: -40px;
    bottom: -40px;
    background: #ffffff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.03);
    width: 280px;
    z-index: 3;
    animation: mock-float-status 9s ease-in-out infinite;
    animation-delay: -4.5s;
}
.mock-status-header { display: flex;  align-items: center; margin-bottom: 16px; }
.mock-badge { background: #d1fae5; color: #059669; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 12px; }
.mock-status-body { height: 65px; background: #f8fafc; border-radius: 8px; border: 1px solid #f1f5f9;}

/* Slow, steady drift for the hero mockup stack. Different durations/delays per
   element (8s/7s/9s, offset delays) so they move independently rather than
   bobbing in lockstep - reads as ambient motion, not a synced toy animation. */
@keyframes mock-float-main {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes mock-float-admin {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-12px) translateX(4px); }
}
@keyframes mock-float-status {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-10px) translateX(-5px); }
}
@keyframes mock-glow-pulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}
.mock-bg-glow { animation: mock-glow-pulse 10s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mock-main-window, .mock-floating-admin, .mock-floating-status, .mock-bg-glow {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .mock-floating-admin { left: -20px; top: auto; bottom: -20px; z-index: 3; transform-origin: bottom left; animation: mock-float-admin-mobile 7s ease-in-out infinite; animation-delay: -2s; }
    .mock-floating-status { right: -10px; bottom: 80px; transform-origin: bottom right; animation: mock-float-status-mobile 9s ease-in-out infinite; animation-delay: -4.5s; }
}
@keyframes mock-float-admin-mobile {
    0%, 100% { transform: scale(0.8) translateY(0) translateX(0); }
    50% { transform: scale(0.8) translateY(-12px) translateX(4px); }
}
@keyframes mock-float-status-mobile {
    0%, 100% { transform: scale(0.8) translateY(0) translateX(0); }
    50% { transform: scale(0.8) translateY(-10px) translateX(-5px); }
}


/* Social Sidebar & Tools */
.social-sidebar {
    position: absolute;
    left: calc(2rem + 10px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 10;
}
.social-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    /* Was rgba(0,0,0,0.04) - functionally invisible, same "border not showing"
       issue fixed elsewhere on the site. */
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: white;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    position: relative;
    text-decoration: none;
    /* Staggered load-in: each icon fades/slides in from the left in sequence
       rather than all appearing at once. animation-delay is set per icon below
       via nth-child, since these come from a shared server-rendered list. */
    opacity: 0;
    animation: social-icon-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.social-sidebar .social-icon-btn:nth-child(1) { animation-delay: 0.15s; }
.social-sidebar .social-icon-btn:nth-child(2) { animation-delay: 0.28s; }
.social-sidebar .social-icon-btn:nth-child(3) { animation-delay: 0.41s; }
.social-sidebar .social-icon-btn:nth-child(4) { animation-delay: 0.54s; }
.social-sidebar .social-icon-btn:nth-child(5) { animation-delay: 0.67s; }

@keyframes social-icon-in {
    from { opacity: 0; transform: translateX(-14px) scale(0.85); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.social-icon-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 10px 20px -6px rgba(15, 23, 42, 0.18);
}
.social-icon-btn:active { transform: translateY(-1px) scale(1.02); }

/* Per-platform brand color on hover instead of one generic blue for everything. */
.social-icon-btn.si-linkedin:hover { color: #0a66c2; border-color: #0a66c2; background: #eff6fb; box-shadow: 0 10px 20px -6px rgba(10, 102, 194, 0.3); }
.social-icon-btn.si-facebook:hover { color: #1877f2; border-color: #1877f2; background: #eff6ff; box-shadow: 0 10px 20px -6px rgba(24, 119, 242, 0.3); }
.social-icon-btn.si-instagram:hover { color: #d6249f; border-color: #d6249f; background: #fdf2f8; box-shadow: 0 10px 20px -6px rgba(214, 36, 159, 0.3); }
.social-icon-btn.si-github:hover { color: #181717; border-color: #181717; background: #f8fafc; box-shadow: 0 10px 20px -6px rgba(24, 23, 23, 0.25); }
.social-icon-btn.si-website:hover { color: #3b82f6; border-color: #3b82f6; background: #eff6ff; box-shadow: 0 10px 20px -6px rgba(59, 130, 246, 0.3); }

@media (prefers-reduced-motion: reduce) {
    .social-icon-btn { opacity: 1; animation: none; }
}


/* Floating Tools Right */
.tools-right {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.tool-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: white;
    cursor: pointer;
    transition: all 0.4s ease;
}
.tool-btn:hover { border-color: #94a3b8; color: #1e293b; }

.chat-btn-fixed {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(59,130,246,0.4);
    cursor: pointer;
    z-index: 50;
    transition: all 0.4s ease;
}
.chat-btn-fixed:hover { transform: scale(1.05); }

/* Overrides for Hero */
/* Header is 93px tall and sits in normal flow (not fixed), so filling the rest of
   the viewport below it and vertically centering gives the hero real breathing room
   under the header while keeping the whole thing visible in one screen, on any
   viewport height, instead of a fixed padding value that only worked by accident. */
.hero-section { position: relative; min-height: calc(100vh - 93px); display: flex; align-items: center; padding: 3rem 0 !important; }
@media (max-width: 1024px) {
  .hero-section { min-height: auto; padding: 2.5rem 0 3rem 0 !important; }
}






/* .social-sidebar needs `fixed` (not `absolute`) so it stays put while the page
   scrolls - kept here as the single source of truth instead of 3 duplicate,
   partly-dead blocks that used to fight over this. */
.social-sidebar {
    position: fixed !important;
    left: calc(2rem + 10px) !important;
}

/* Tooltip */
.social-icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    background: #111827;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.social-icon-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* Scroll Animations */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Infinite Tech-Stack Marquee */
.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 3rem 0;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    z-index: 2;
}
.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc, transparent);
}
.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc, transparent);
}

.marquee-track {
    display: inline-block;
    animation: marquee 25s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: #94a3b8;
    margin: 0 3rem;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}
.marquee-item:hover {
    color: #0f172a;
}


/* Enhanced Header Styles */
.nav-links { margin-left: auto; margin-right: 2rem;  
    display: flex;
    align-items: center;
    gap:   1.5rem;
    height: 100%;
}

.nav-item {
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    position: relative;
    padding: 0.85rem 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.nav-item:hover {
    color: #0f172a;
}

.nav-item.active {
    color: #0f172a;
    font-weight: 600;
}

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #3b82f6;
    border-radius: 3px 3px 0 0;
}

/* Dropdown Logic */
.nav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0,0,0,0.03);
    min-width: 240px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}

/* Mega Menu Styles */
.dropdown-menu.mega-menu {
    left: -10.5rem;
    transform: translate(0, 15px);
    width: max-content;
    padding: 2.5rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.03);
    border: none;
}

.nav-dropdown:hover .dropdown-menu.mega-menu {
    transform: translate(0, 0);
}

.mega-menu-grid {
    display: flex;
    gap: 4rem;
}

/* Below ~1100px the mega-menu's natural width:max-content (usually ~930px, positioned
   10.5rem left of its trigger) no longer fits - it was previously relying entirely on
   `overflow-x: hidden` on <body> to hide the resulting overflow rather than actually
   fitting the viewport. Re-centered and allowed to wrap instead of clipped. */
@media (max-width: 1100px) {
    .dropdown-menu.mega-menu {
        left: 50%;
        transform: translate(-50%, 15px);
        width: min(90vw, 700px);
    }
    .nav-dropdown:hover .dropdown-menu.mega-menu {
        transform: translate(-50%, 0);
    }
    .mega-menu-grid {
        flex-wrap: wrap;
        gap: 2rem;
    }
}

.mega-col {
    display: flex;
    flex-direction: column;
    min-width: 240px;
}

.mega-heading {
    font-size: 0.75rem;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
    padding-left: 1rem;
    border-bottom: 2px solid #eff6ff;
    padding-bottom: 0.75rem;
}

.mega-col a {
    position: relative;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
    transition: all 0.2s ease;
}

.mega-col a:hover {
    background: #eff6ff;
    color: #2563eb;
    transform: translateX(4px);
}.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 0.6rem 1rem;
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem; font-weight: 500; white-space: nowrap;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dropdown-menu a:hover {
    background: #f8fafc;
    color: #3b82f6;
}

.btn-login-outline {
    border: 1px solid #cbd5e1;
    background: white;
    color: #334155;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-login-outline:hover {
    border-color: #94a3b8;
    color: #0f172a;
    background: #f8fafc;
}




























.stat-card { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.stat-card h3 { font-size: 1.85rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.4rem; }
.logo-box { background: white; border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 1.25rem 1rem; text-align: center; }

/* Scroll Animations */
.fade-up-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}



/* Vertical Alternating Timeline */
.v-timeline {
    position: relative;
    max-width: 900px;
    margin: 4rem auto;
}
.v-timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: #bfdbfe;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}
.v-timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}
.v-timeline-item::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    right: -7px;
    background: #e0e7ff;
    border: 3px solid var(--primary-blue);
    top: 32px;
    border-radius: 50%;
    z-index: 1;
}
.v-timeline-item.left { left: 0; }
.v-timeline-item.right { left: 50%; }
.v-timeline-item.right::after { left: -7px; }

.v-timeline-card {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.v-timeline-item.left .v-timeline-card { text-align: right; }
.v-timeline-item.right .v-timeline-card { text-align: left; }

.v-timeline-year {
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.v-timeline-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}
.v-timeline-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .v-timeline::after { left: 31px; }
    .v-timeline-item { width: 100%; padding-left: 70px; padding-right: 0; }
    .v-timeline-item.left, .v-timeline-item.right { left: 0; }
    .v-timeline-item.left::after, .v-timeline-item.right::after { left: 24px; }
    .v-timeline-item.left .v-timeline-card { text-align: left; }
}

/* Mega-Footer */
.mega-footer {
    background: #f8fafc;
    padding: 6rem 0 2rem 0;
    border-top: 1px solid var(--border-light);
}
.mega-footer-grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr auto;
    gap: 3rem;
    margin-bottom: 4rem;
}
.mf-brand-col { display: flex; flex-direction: column; gap: 1rem; padding-right: 2rem; }
.mf-contact-card { background: white; border: 1px solid var(--border-light); border-radius: 8px; padding: 1rem; font-size: 0.8rem; line-height: 1.5; }
.mf-contact-card strong {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.mf-contact-card span {
    font-weight: 600;
    color: var(--text-main);
}
.mf-col h5 {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}
.mf-col a, .mf-col p { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.85rem; text-decoration: none; transition: color 0.2s; }
.mf-col a:hover { color: var(--text-main); }

.mf-social-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mf-social-btn {
    width: 38px;
    height: 38px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
}
.mf-social-btn:hover {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}
.mf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-light);
    padding-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.mf-bottom a { color: var(--primary-blue); font-weight: 600; text-decoration: none; }

@media (max-width: 1024px) {
    .mega-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
    .mf-brand-col { grid-column: 1 / -1; padding-right: 0; }
    .mf-social-col { flex-direction: row; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .mega-footer-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE NAVIGATION — Hamburger + Slide-in Drawer
   ============================================================ */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s;
    z-index: 1002;
    margin-left: auto;
}
.mobile-menu-toggle:hover { background: #f1f5f9; }
.hamburger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #334155;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}
.mobile-menu-toggle.open .hamburger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.open .hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle.open .hamburger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Overlay behind the drawer */
.mobile-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.mobile-nav-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Slide-in drawer */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: #ffffff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}
.mobile-nav.open {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.mobile-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #64748b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.mobile-close-btn:hover { background: #f1f5f9; color: #0f172a; }

.mobile-nav-body {
    padding: 1rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-nav-group {
    margin-bottom: 0.5rem;
}
.mobile-nav-group-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.75rem 0.75rem 0.35rem;
}
.mobile-nav-link {
    display: block;
    padding: 0.65rem 0.75rem;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
}
.mobile-nav-link:hover { background: #f1f5f9; color: #0f172a; }
.mobile-nav-link.top-level {
    font-weight: 700;
    color: #0f172a;
}
.mobile-nav-link.sub-level {
    font-size: 0.875rem;
    color: #475569;
    padding-left: 1.25rem;
}
.mobile-nav-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0.5rem 0.75rem;
}

.mobile-nav-cta {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.mobile-nav-cta .btn {
    width: 100%;
    justify-content: center;
    border-radius: 8px;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
}
.mobile-nav-cta .btn-blue { background: #3b82f6; color: white; }
.mobile-nav-cta .btn-blue:hover { background: #2563eb; }
.mobile-nav-cta .btn-outline { border: 1.5px solid #e2e8f0; color: #334155; background: white; }
.mobile-nav-cta .btn-outline:hover { background: #f8fafc; border-color: #94a3b8; }

/* Show/hide based on breakpoint */
@media (max-width: 1024px) {
    .nav-links { display: none !important; }
    .header-actions { display: none !important; }
    .mobile-menu-toggle { display: flex; }
}

/* Social sidebar: the base rule (.social-sidebar { display:flex }) sits at line ~454,
   after the earlier @media (max-width:1280px) hide rule, so that earlier rule was
   silently overridden by cascade order. This rule comes last and wins. */
@media (max-width: 1280px) {
    .social-sidebar { display: none !important; }
}


/* ============================================================
   RESPONSIVE GRID BREAKPOINTS — Tablet (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* Hero */
    .hero-title { font-size: 34px !important; }
    .hero-subtitle, .hero-desc { font-size: 16px; }

    .hero-actions {
        flex-direction: column;
        gap: 0.65rem;
    }
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        gap: 1rem;
        flex-wrap: wrap;
    }
    .stat-item h4 { font-size: 1.4rem; }

    /* Section spacing */
    section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Content grids → single column */
    .cards-3-grid { grid-template-columns: 1fr; }
    .stat-cards-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .logo-strip { grid-template-columns: repeat(2, 1fr); }

    /* Banner box — stacks vertically on mobile */
    .banner-box {
        flex-direction: column;
        gap: 1rem;
        white-space: normal;
        text-align: center;
        align-items: center;
    }

    /* Career-evolution tabs — horizontal scroll instead of overflow-cut */
    .window-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .window-nav::-webkit-scrollbar { display: none; }
    .w-tab { white-space: nowrap; flex-shrink: 0; }

    /* Section headings scale */
    .section-heading { font-size: 1.65rem; }
    .hero-pill { font-size: 0.65rem; }

    /* Mock window body padding */
    .window-body { padding: 1.25rem; }
    .mock-ui { flex-direction: column; min-height: auto; }
    .ui-side { width: 100%; }

    /* Footer bottom */
    .mf-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}