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

:root {
  --bg-white: #FFFFFF;
  --bg-light: #F7F8FC;
  --primary: #1A4FD6;
  --primary-hover: #1340B0;
  --primary-glow: rgba(26,79,214,0.18);
  --secondary: #0EA5E9;
  --accent: #6366F1;
  --text-primary: #0D1117;
  --text-secondary: #556070;
  --border: #E2E8F0;
  --footer-bg: #080F1E;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02);
  --shadow-hover: 0 20px 25px -5px rgba(26,79,214,0.1), 0 10px 10px -5px rgba(26,79,214,0.04);
  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 8px;
  --transition: 0.4s cubic-bezier(.4,0,.2,1);
}

/* Base Resets & Viewport Protection */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; position: relative; }
body { font-family:'DM Sans',sans-serif; color:var(--text-primary); line-height:1.7; background:var(--bg-white); -webkit-font-smoothing: antialiased; }
a { text-decoration:none; color:inherit; transition:color var(--transition); }
ul { list-style:none; }
img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
section { padding:100px 0; position:relative; width: 100%; clear: both; }
.bg-light { background:var(--bg-light); }
.text-center { text-align:center; }

/* Fluid Typography Framework */
h1,h2,h3,h4 { font-family:'Syne',sans-serif; font-weight:700; letter-spacing:-0.02em; color:var(--text-primary); line-height:1.2; word-wrap: break-word; overflow-wrap: break-word; }
h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); font-weight: 800; margin-bottom: 24px; }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: 16px; }
h3 { font-size: clamp(1.3rem, 3vw, 1.5rem); margin-bottom: 12px; }
p { color:var(--text-secondary); margin-bottom: 16px; font-size: clamp(0.95rem, 1.5vw, 1.05rem); }

/* UI Elements: Buttons & Badges */
.badge { display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; background:linear-gradient(135deg,rgba(26,79,214,.09),rgba(99,102,241,.09)); color:var(--primary); padding:6px 16px; border-radius:20px; margin-bottom:20px; border:1px solid rgba(26,79,214,.15); max-width: max-content; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 30px; border-radius:var(--radius-btn); font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all var(--transition); border:1.5px solid transparent; text-align:center; position:relative; overflow:hidden; font-size:1rem; min-width: 160px; }
.btn::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%); transform:translateX(-100%); transition:transform 0.6s ease; }
.btn:hover::after { transform:translateX(100%); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 4px 18px var(--primary-glow); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(26,79,214,.3); color: #fff; }
.btn-outline { background:transparent; color:var(--primary); border-color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-3px); box-shadow:0 12px 28px var(--primary-glow); }

/* Ambient Blur Background Animations */
.bg-shape { position:absolute; border-radius:50%; filter:blur(100px); z-index:0; opacity:0.4; animation:floatShape 10s infinite alternate ease-in-out; pointer-events: none; }
.shape-1 { top:-10%; left:-5%; width:500px; height:500px; background:var(--primary-glow); }
.shape-2 { bottom:10%; right:-5%; width:400px; height:400px; background:rgba(99,102,241,0.15); animation-delay:-5s; }
@keyframes floatShape { 0% { transform:translate(0, 0) scale(1); } 100% { transform:translate(50px, 50px) scale(1.1); } }

/* Micro-interaction Loaders */
#page-loader { position:fixed; inset:0; background:#fff; z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease,visibility .5s ease; }
#page-loader.hidden { opacity:0; visibility:hidden; }
.loader-ring { width:50px; height:50px; border:3px solid var(--border); border-top-color:var(--primary); border-radius:50%; animation:spin .8s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Scroll-driven Orchestrated Reveals */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }

/* Fixed Navigation Structure */
.navbar { position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(226,232,240,.6); z-index:1000; transition:box-shadow var(--transition), padding var(--transition); padding: 12px 0; }
.navbar.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.06); padding: 6px 0; background:rgba(255,255,255,.95); }
.nav-container { display:flex; justify-content:space-between; align-items:center; height:60px; }

.logo { display: flex; align-items: center; text-decoration: none; max-width: 65%; }
.logo img { height: auto; max-height: 52px; width: 100%; display: block; object-fit: contain; }

.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { font-weight:600; color:var(--text-secondary); font-size:0.95rem; position:relative; padding-bottom:4px; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--primary); border-radius:2px; transition:width var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--text-primary); }
.mobile-menu-btn { display:none; font-size:32px; cursor:pointer; background:none; border:none; color:var(--text-primary); z-index: 1001; }

/* Sub-page Internal Page Header Optimization */
.page-header { padding: 130px 0 70px; text-align: center; background: var(--bg-light); position: relative; width: 100%; }

/* Layout Grid Engines */
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:40px; }
.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:32px; }
.grid-4 { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:24px; }

/* Hero Section (Padding recalibrated to prevent massive empty whitespace drops) */
.hero { padding: 120px 0 80px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
.hero-content { display: flex; flex-direction: column; }
.hero-content h1 { background:linear-gradient(135deg,var(--text-primary) 30%,var(--primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-btns { display:flex; gap:16px; margin-bottom:16px; flex-wrap: wrap; }
.hero-visual img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-hover); }

/* Core Features & Layout Cards */
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-card); padding:40px; box-shadow:var(--shadow); transition:all var(--transition); position: relative; overflow: hidden; }
.card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, var(--primary), var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform var(--transition); }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); border-color:rgba(26,79,214,.15); }
.card:hover::before { transform:scaleX(1); }

.card-icon { font-size:30px; color:var(--primary); margin-bottom:24px; background:linear-gradient(135deg,rgba(26,79,214,.06),rgba(99,102,241,.06)); width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(26,79,214,.08); transition: transform var(--transition); }
.card:hover .card-icon { transform: scale(1.08) rotate(3deg); }
.card ul li { display: flex; align-items: start; gap: 8px; margin-bottom: 12px; color: var(--text-secondary); font-size: 0.95rem; text-align: left; }
.card ul li i { color: var(--primary); font-size: 1.1rem; margin-top: 2px; }

/* Counters & Performance Metrics classes */
.expertise-metric-card { text-align: center; padding: 24px; }
.expertise-metric-card h2 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 12px; margin-bottom: 4px; white-space: nowrap; }
.expertise-metric-card p { font-weight: 600; color: var(--text-primary); margin-bottom: 0; font-size: 1rem; }

/* "Why Choose Us" Geometric Grid Engine */
.why-section { background: #fff; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 0l40 23v46L40 80 0 69V23z' fill='none' stroke='rgba(26,79,214,0.015)' stroke-width='1'/%3E%3C/svg%3E"); }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; margin-top: 60px; }
.why-card { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 44px 32px 32px; text-align: center; box-shadow: var(--shadow); transition: all var(--transition); position: relative; }
.why-card-icon-container { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 8px 20px rgba(26, 79, 214, 0.25); border: 4px solid #FFFFFF; transition: all var(--transition); }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(26, 79, 214, 0.2); }
.why-card:hover .why-card-icon-container { transform: translateX(-50%) translateY(-4px) scale(1.05); box-shadow: 0 12px 24px rgba(26, 79, 214, 0.35); }
.why-card h3 { font-size: 1.35rem; margin-top: 12px; margin-bottom: 14px; color: var(--text-primary); font-weight: 700; }
.why-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0; }

/* High Contrast CTA Banners */
.cta-banner { background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%); color:#fff; padding:80px 48px; text-align:center; border-radius:24px; margin:80px 0; position:relative; overflow:hidden; box-shadow: 0 20px 40px var(--primary-glow); }
.cta-banner::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.2)'/%3E%3C/svg%3E"); opacity:.8; }
.cta-banner h2 { color:#fff; position:relative; z-index:1; margin-bottom: 16px; }
.cta-banner p { color:#FFFFFF !important; font-size: 1.15rem; margin-bottom: 32px; opacity: 0.95; position:relative; z-index:1; }
.cta-banner .btn { position:relative; z-index:1; }

/* Interactive B2B Forms */
.form-group { margin-bottom:24px; text-align: left; }
.form-group { margin-bottom:24px; text-align: left; }
.form-label { display:block; font-weight:600; margin-bottom:8px; font-size:.9rem; color:var(--text-primary); }
.form-control { width:100%; padding:14px 18px; border:1.5px solid var(--border); border-radius:var(--radius-input); font-family:'DM Sans',sans-serif; font-size:1rem; transition:all var(--transition); background:var(--bg-light); color:var(--text-primary); }
.form-control:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); background:#fff; }
textarea.form-control { resize:vertical; min-height:140px; }

/* Footer Ecosystem */
.footer { background:var(--footer-bg); color:#94A3B8; padding:80px 0 32px; position: relative; overflow: hidden; margin-top: 80px; width: 100%; }
.footer h4 { color:#fff; font-family:'Syne',sans-serif; margin-bottom:24px; font-size:1.1rem; }
.footer ul li { margin-bottom:14px; }
.footer ul li a { color:#64748B; font-size:.95rem; transition:color var(--transition); }
.footer ul li a:hover { color:#fff; padding-left: 4px; }
.footer-bottom { border-top:1px solid #1E293B; margin-top:48px; padding-top:32px; display:flex; justify-content:space-between; align-items:center; color:#475569; font-size:.9rem; }
.social-icons { display:flex; gap:16px; font-size:1.4rem; }
.social-icons a { color:#475569; transition:all var(--transition); }
.social-icons a:hover { color:#fff; transform: translateY(-3px); }

/* Strict Multi-Device Responsiveness Breakpoints */
@media(max-width:1024px) {
  .grid-3, .grid-4, .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width:992px) {
  section { padding: 80px 0; }
  
  /* FIXED: Tightened layout constraint to 100px so elements are no longer pulled downwards excessively */
  .hero { grid-template-columns:1fr; text-align:center; padding-top: 100px !important; gap: 40px; }
  .page-header { padding-top: 110px !important; }
  
  .hero-content { align-items: center; }
  .hero-content p { max-width:100%; margin: 0 auto 32px; }
  .hero-btns { justify-content:center; }
  
  .mobile-menu-btn { display:block; }
  .nav-links { 
    position:absolute; 
    top:100%; 
    left:-24px; 
    right:-24px; 
    background:rgba(255, 255, 255, 0.98); 
    backdrop-filter:blur(18px); 
    -webkit-backdrop-filter:blur(18px);
    flex-direction:column; 
    padding: 32px 24px; 
    border-bottom: 1px solid var(--border); 
    display:none; 
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    gap: 20px;
    text-align: center;
  }
  .nav-links.active { display:flex; }
  .nav-links a { font-size: 1.1rem; width: 100%; display: block; padding: 6px 0; }
  .nav-links a::after { display: none; }
  .nav-links .btn { width: 100%; margin-left: 0 !important; padding: 14px 0; }
}

@media(max-width:768px) {
  section { padding: 60px 0; }
  .page-header { padding-top: 105px !important; }
  .grid-2, .grid-3, .grid-4, .why-grid { grid-template-columns:1fr; gap: 32px; }
  .why-grid { margin-top: 48px; gap: 48px 0; }
  .card, .why-card { padding: 32px 24px; }
  .cta-banner { padding: 48px 24px; margin: 40px 0; }
  .footer { margin-top: 40px; padding: 60px 0 32px; }
  .footer .grid-3 { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center; margin-top: 40px; padding-top: 24px; }
  
  .logo img { max-height: 44px; }
}

@media (max-width: 480px) {
  /* FIXED: Forces strict stacked padding gap structure to stop contact buttons from sticking */
  .hero-btns { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 16px !important; }
  .hero-btns .btn { width: 100% !important; margin: 0 !important; }
  .container { padding: 0 20px; }
}