:root{ --primary:#0f172a; --secondary:#2563eb; --accent:#60a5fa; --light:#f8fafc; --white:#ffffff; --text:#475569; --border:#e2e8f0; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Inter',sans-serif; color:var(--text); line-height:1.7; } .container{ width:90%; max-width:1200px; margin:auto; } section{ padding:90px 0; } h1,h2,h3,h4{ font-family:'Poppins',sans-serif; color:var(--primary); } .section-title{ text-align:center; margin-bottom:60px; } .section-title h2{ font-size:42px; margin-bottom:15px; } .section-title p{ max-width:700px; margin:auto; } /* HERO */ .hero{ background: linear-gradient(rgba(15,23,42,.85),rgba(15,23,42,.85)), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d'); background-size:cover; background-position:center; color:white; padding:140px 0; text-align:center; } .hero h1{ color:white; font-size:60px; line-height:1.2; margin-bottom:25px; } .hero p{ font-size:20px; max-width:800px; margin:auto; opacity:.95; } .hero-buttons{ margin-top:40px; display:flex; justify-content:center; gap:15px; flex-wrap:wrap; } .btn{ padding:15px 35px; border-radius:50px; text-decoration:none; font-weight:700; transition:.3s; } .btn-primary1{ background:#2563eb; color:#fff; } .btn-primary:hover{ transform:translateY(-3px); } .btn-outline{ border:2px solid #fff; color:#fff; } .btn-outline:hover{ background:#fff; color:#0f172a; } /* STATS */ .stats{ margin-top:-60px; position:relative; z-index:2; } .stats-box{ background:white; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.08); display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; } .stat{ padding:35px; text-align:center; } .stat h3{ color:#2563eb; font-size:40px; } .stat p{ margin-top:10px; } /* WHY US */ .features{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .feature{ background:white; border-radius:18px; padding:35px; box-shadow:0 10px 25px rgba(0,0,0,.05); transition:.3s; } .feature:hover{ transform:translateY(-8px); } .feature-icon{ width:70px; height:70px; background:#eff6ff; color:#2563eb; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:28px; margin-bottom:20px; } /* SERVICES */ .services{ background:#f8fafc; } .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } .service-card{ background:white; border-radius:18px; padding:35px; box-shadow:0 10px 30px rgba(0,0,0,.05); } /* INDUSTRIES */ .industry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .industry{ text-align:center; background:white; padding:35px; border-radius:18px; border:1px solid var(--border); } .industry span{ font-size:40px; display:block; margin-bottom:15px; } /* PROCESS */ .process{ background:#f8fafc; } .timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; } .step{ text-align:center; position:relative; } .number{ width:80px; height:80px; background:#2563eb; color:white; margin:auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; margin-bottom:20px; } /* CLIENTS */ .clients{ text-align:center; } .logo-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px; align-items:center; } .logo-grid img{ width:100%; max-height:90px; object-fit:contain; filter:grayscale(100%); transition:.3s; } .logo-grid img:hover{ filter:none; transform:scale(1.05); } /* TESTIMONIALS */ .testimonials{ background:#f8fafc; } .testimonial-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } .testimonial{ background:white; padding:35px; border-radius:20px; box-shadow:0 10px 25px rgba(0,0,0,.05); } /* METRICS */ .metrics{ background:#0f172a; color:white; } .metrics h2{ color:white; } .metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; text-align:center; } .metric-grid h3{ color:#60a5fa; font-size:50px; } /* CTA */ .cta{ text-align:center; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:white; } .cta h2{ color:white; font-size:48px; } .cta p{ max-width:700px; margin:20px auto 40px; } /* MOBILE */ @media(max-width:991px){ .hero h1{ font-size:42px; } .stats-box, .features, .service-grid, .industry-grid, .timeline, .logo-grid, .testimonial-grid, .metric-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:768px){ .stats-box, .features, .service-grid, .industry-grid, .timeline, .logo-grid, .testimonial-grid, .metric-grid{ grid-template-columns:1fr; } .hero h1{ font-size:34px; } .section-title h2{ font-size:32px; } }