/* Mobile-first responsive CSS — lightweight and easy to customize */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --accent:#0b5cff;
  --accent-2:#0646c9;
  --container:1100px;
  --radius:10px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color-scheme: light;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
.container{max-width:var(--container);margin:0 auto;padding:1rem}

/* topbar */
.topbar{background:#0b1320;color:#fff;font-size:.95rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}
.top-link{color:inherit;text-decoration:none;margin-right:1rem}

/* header */
.site-header{position:sticky;top:0;background:#fff;z-index:1000;border-bottom:1px solid #eef2f7;box-shadow:0 2px 8px rgba(12,20,40,0.04);animation:slideInDown 0.5s ease-out}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;transition:all 0.3s ease}
.brand:hover{color:var(--accent)}
.logo{width:44px;height:auto}
.brand-name{font-weight:700;font-size:1.1rem}
.nav{display:none}
.nav-list{display:flex;gap:2rem;align-items:center;margin:0;padding:0;list-style:none}
.nav-list li a{text-decoration:none;color:var(--text);font-weight:500;font-size:0.95rem;transition:all 0.3s ease;position:relative;padding:0.5rem 0}
.nav-list li a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--accent);transition:width 0.3s ease}
.nav-list li a:hover{color:var(--accent)}
.nav-list li a:hover::after{width:100%}
.nav-list .btn-sm{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0.6rem 1.2rem;font-weight:600;box-shadow:0 4px 12px rgba(11,92,255,0.2);transition:all 0.3s ease}
.nav-list .btn-sm:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,92,255,0.3)}
.menu-toggle{background:none;border:0;padding:.5rem}
.hamburger{display:inline-block;width:22px;height:2px;background:var(--text);position:relative}
.hamburger:after,.hamburger:before{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text)}
.hamburger:before{top:-6px}
.hamburger:after{top:6px}

/* hero */
.hero{padding: 4rem 0;background:linear-gradient(180deg, rgba(11,92,255,0.06), transparent);
    background: url("https://images.pexels.com/photos/3840441/pexels-photo-3840441.jpeg") center/cover no-repeat;
    position: relative;
}
.hero-inner{display:grid;grid-template-columns:1fr;gap:1.2rem;align-items:center}
.hero-copy h1{margin:0;font-size:1.6rem}
.lead{color:var(--muted);margin-top:.5rem}
.cta-row{margin-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none;border:0;cursor:pointer;font-weight:600;transition:all 0.3s ease}
.btn.small{padding:.45rem .8rem}
.btn.sm{font-size:.9rem}
.btn.ghost{background:transparent;border:1px solid #e6e9ef}
.btn.large{padding:.8rem 1.2rem;font-size:1rem}
.btn.primary, .btn.large{background:var(--accent);color:#fff}
.btn.small, .btn.ghost{background:transparent;color:var(--text);border:1px solid #e6e9ef}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(12,20,40,0.12)}
.btn.large:hover{background:var(--accent-2);box-shadow:0 12px 24px rgba(11,92,255,0.25)}
.btn.ghost:hover{background:rgba(11,92,255,0.05);border-color:var(--accent)}
.track-form{margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.track-form input{flex:1;min-width:140px;padding:.6rem;border-radius:8px;border:1px solid #e6e9ef}


/* sections */
.section{padding:2rem 0}
.section h2{margin-top:0}
.section-sub{color:var(--muted);margin-bottom:1rem}

/* cards grid */
.cards{display:grid;grid-template-columns:1fr;gap:1rem}
.card{background:var(--surface);padding:1rem;border-radius:8px;box-shadow:0 1px 4px rgba(12,20,40,0.04)}

/* services visual image */
.services-visual{margin-top:2.5rem;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(12,20,40,0.1);animation:slideInRight 0.8s ease-out}
.services-visual img{width:100%;height:auto;max-height:500px;object-fit:cover;display:block;transition:transform 0.4s ease}
.services-visual:hover img{transform:scale(1.03)}

/* about grid */
.about-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.bullets{list-style:disc;margin-left:1.25rem;color:var(--muted)}

/* testimonials */
.testi-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.testi{background:#fbfbff;padding:.9rem;border-radius:8px}

/* testimonials visual image */
.testi-visual{margin-top:2rem;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(12,20,40,0.1);animation:fadeInUp 0.8s ease-out 0.4s both}
.testi-visual img{width:100%;height:auto;max-height:450px;object-fit:cover;display:block;transition:transform 0.4s ease}
.testi-visual:hover img{transform:scale(1.03)}

/* contact layout */
.section.contact{background:#f9fafc;padding:3rem 0}
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start;max-width:1100px;margin:0 auto}
.contact-grid > div:first-child{animation:slideInLeft 0.8s ease-out}
.form-optimized{background:#fff;padding:2.5rem;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 4px 16px rgba(0,0,0,0.08);animation:slideInRight 0.8s ease-out}
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:0.7rem;color:#1f2937;font-weight:700;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.5px}
.form-group input,
.form-group textarea,
.form-group select{width:100%;box-sizing:border-box;padding:0.85rem 1rem;border:2px solid #e5e7eb;border-radius:8px;background:#f9fafb;font-size:0.95rem;color:#1f2937;font-family:inherit;transition:all 0.25s ease}
.form-group input::placeholder,
.form-group textarea::placeholder{color:#9ca3af}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover{border-color:var(--accent);background:#fff}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(11,92,255,0.1);transform:translateY(-2px)}
.form-submit{width:100%;margin-top:2rem;padding:0.95rem 1.5rem;font-size:1rem;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:8px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(11,92,255,0.25);text-transform:uppercase;letter-spacing:0.5px}
.form-submit:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,92,255,0.35)}
.form-message{margin-top:1rem;text-align:center;font-size:0.9rem}
.contact-info{list-style:none;padding:0;margin:0}
.contact-info li{padding:1rem 0;border-bottom:1px solid #e5e7eb;color:#374151;font-size:0.95rem;line-height:1.6}
.contact-info li:last-child{border-bottom:none}
.contact-info strong{color:var(--accent);font-weight:700;display:block;margin-bottom:0.3rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.5px}

/* Responsive form layout for larger screens */
@media (min-width:700px){
  .contact-grid{grid-template-columns:1fr 1.1fr;gap:4rem;align-items:stretch}
  .form-optimized{padding:3rem}
}

/* footer */
.site-footer{border-top:1px solid #eef2f7;padding:1.25rem 0;margin-top:2rem}
.footer-inner{display:flex;flex-direction:column;gap:1rem;align-items:start}
.brand-footer{display:flex;align-items:center;gap:.5rem;margin:0}

/* utilities */
.muted{color:var(--muted);font-size:.95rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Mobile menu styling */
.mobile-menu{animation:slideInLeft 0.4s ease-out}
.mobile-menu ul{display:flex;flex-direction:column;gap:0.5rem;list-style:none;margin:0;padding:1rem;background:#f9fafb}
.mobile-menu li{border-bottom:1px solid #e5e7eb}
.mobile-menu li:last-child{border-bottom:none}
.mobile-menu a{display:block;padding:0.9rem 0;color:var(--text);text-decoration:none;font-weight:500;font-size:0.95rem;transition:all 0.3s ease}
.mobile-menu a:hover{color:var(--accent);padding-left:0.5rem}
.mobile-menu .btn-sm{display:block;width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:0.8rem 1rem;font-weight:700;text-align:center;font-size:0.95rem;box-shadow:0 4px 12px rgba(11,92,255,0.2);margin-top:0.5rem;transition:all 0.3s ease}
.mobile-menu .btn-sm:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(11,92,255,0.3)}

/* Larger screens (tablet, desktop) */
@media (min-width:700px){
  .nav{display:block}
  .mobile-menu{display:none}
  .menu-toggle{display:none}

  .hero-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .services-visual{max-height:600px}
  .about-grid{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
  .testi-visual{max-height:500px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}

/* Desktop */
@media (min-width:1100px){
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* Responsive image helpers — keep images within the viewport */
/* Ensure hero occupies a sensible portion of the screen */
.hero{min-height:60vh;display:flex;align-items:center}

.hero-inner{align-items:center}

.hero-media{display:flex;align-items:center;justify-content:center}

/* Make all images responsive and prevent overflow */
img{max-width:100%;height:auto;display:block}

/* Hero image: limit height to viewport so it always fits on screen */
.hero-media .hero-img{max-width:100%;width:100%;height:auto;max-height:70vh;object-fit:cover;border-radius:8px}

/* About section visual image */
.about-visual img{width:100%;height:auto;max-height:60vh;object-fit:cover;border-radius:8px}


/* Improve hero text contrast and CTA visibility */
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.55), rgba(2,6,23,0.25));z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero-copy{color:#fff;max-width:620px}
.hero-copy h1{font-size:2rem;color:#fff;line-height:1.05;margin-bottom:.4rem;text-shadow:0 8px 24px rgba(0,0,0,0.6)}
.lead{color:rgba(255,255,255,0.9);font-size:1.05rem}
.cta-row{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* CTA styling for high contrast on hero */
.hero .btn.large{background:#ffffff;color:var(--accent);border:none;box-shadow:0 8px 28px rgba(11,92,255,0.18);padding:.9rem 1.4rem;border-radius:12px;font-size:1.05rem;font-weight:700}
.hero .btn.large:hover{background:#f0f4ff;color:var(--accent-2);transform:translateY(-3px);box-shadow:0 12px 32px rgba(11,92,255,0.28)}
.hero .btn.ghost{background:#ffffff;border:2px solid #ffffff;color:var(--accent);padding:.85rem 1.3rem;font-size:1.05rem;font-weight:700}
.hero .btn.ghost:hover{background:#f0f4ff;border-color:#f0f4ff;box-shadow:0 8px 24px rgba(11,92,255,0.25)}


/* Responsive heading scale */
@media (min-width:700px){
  .hero-copy h1{font-size:2.6rem}
}
@media (min-width:1100px){
  .hero-copy h1{font-size:3.2rem}
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 8px 28px rgba(11,92,255,0.18);
  }
  50% {
    box-shadow: 0 12px 40px rgba(11,92,255,0.35);
  }
}

/* Hero section animations */
.hero-copy {
  animation: slideInLeft 0.8s ease-out;
}

.hero-copy h1 {
  animation: fadeInUp 1s ease-out 0.2s both;
}

.lead {
  animation: fadeInUp 1s ease-out 0.4s both;
}

.cta-row {
  animation: fadeInUp 1s ease-out 0.6s both;
}

/* Button animations */
.btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn:hover {
  animation: glow 2s ease-in-out infinite;
}

/* Cards animation */
.card {
  animation: scaleIn 0.6s ease-out;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(12,20,40,0.15);
}

/* Section headings */
.section h2 {
  animation: fadeInUp 0.8s ease-out;
}

.section-sub {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* About section */
.about-text {
  animation: slideInLeft 0.8s ease-out;
}

.about-visual {
  animation: slideInRight 0.8s ease-out;
}

.about-visual img {
  transition: transform 0.4s ease;
}

.about-visual:hover img {
  transform: scale(1.05);
}

/* Testimonials */
.testi {
  animation: scaleIn 0.6s ease-out;
  transition: all 0.3s ease;
}

.testi:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(12,20,40,0.1);
}

/* Contact form */
.contact-grid {
  animation: fadeInUp 0.8s ease-out;
}

.form label {
  animation: fadeInUp 0.6s ease-out;
}

.form input,
.form textarea,
.form select {
  transition: all 0.3s ease;
}

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(11,92,255,0.1);
  transform: translateY(-2px);
}

/* Footer */
.site-footer {
  animation: fadeInUp 0.8s ease-out;
}

.footer-links a {
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: var(--accent);
  transform: translateX(4px);
}

/* Mobile menu animation */
.mobile-menu[hidden] {
  display: none;
}

.mobile-menu:not([hidden]) {
  animation: slideInLeft 0.4s ease-out;
}

/* Header sticky animation */
.site-header {
  animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}