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

/* Animation Keyframes */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(2px);}
  to {opacity: 1; transform: translateY(0) scale(1); filter: blur(0);}
}
@keyframes fadeUp {
  from {opacity: 0; transform: translateY(40px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Global */
html, body {
  width: 100%;
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
  color: #1F2937;
  line-height: 1.6;
}

/* Full-bleed helper (edge-to-edge sections) */
.full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Animations */
.animate-fade-in {animation: fadeIn 0.8s ease-out forwards;}
.animate-fade-up {animation: fadeUp 0.8s ease-out forwards;}

/* Components */
.testimonial-card, .service-card {transition: all 0.3s ease;}
.service-card {cursor:pointer; position:relative; overflow:hidden;}
.service-card:hover {transform:translateY(-5px); box-shadow:0 20px 25px rgba(0,0,0,0.15);}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(to right,#00f2ff,#0099ff);
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease;
}
.service-card:hover::before {transform:scaleX(1);}

/* Form */
form {
  background:#fff; border-radius:16px; padding:2.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.05);
}
input, textarea, select {
  border:1px solid #e5e7eb; background:#f9fafb; padding:0.75rem 1rem;
  border-radius:10px; width:100%; transition:all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
  outline:none; border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.1); background:#fff;
}

/* Utility spacing */
.max-w-7xl {max-width:80rem;}
.hover\:shadow-xl:hover {
  box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);
}

/* Prevent horizontal overflow */
img, video {display:block; max-width:100%; height:auto;}

/* --- Mobile polish --- */
:root {
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: clamp(64px, 64px + var(--safe-top), 80px);
}

/* dynamic viewport units fix for mobile */
.min-h-screen-mobile {min-height: 100svh;}

/* comfy touch */
a, button, .btn, .cta-button {min-height: 44px;}

/* padding fix for containers */
.container, .max-w-7xl {
  padding-left: max(1rem, var(--safe-left, 0));
  padding-right: max(1rem, var(--safe-right, 0));
}

/* anchor offset fix */
.anchor-offset {scroll-margin-top: clamp(72px, 72px + var(--safe-top), 96px);}

/* Hero overlay for readability */
.hero-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

/* Blue underline for active links */
.nav-link.active::after {background:#60A5FA; transform:scaleX(1);}
/* ===== MOBILE POLISH (add at end of style.css) ===== */

/* 1) Prevent stray horizontal scroll + respect iOS notches */
html,body{width:100%;overflow-x:hidden}
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* 2) Full-bleed helper (edge-to-edge hero/images when needed) */
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

/* 3) Mobile container gutters (keeps content off the edges) */
@media (max-width:768px){
  .container, .max-w-7xl { padding-left:1rem; padding-right:1rem; max-width:100% }
}

/* 5) Horizontal section chips (jump links) */
@media (max-width:768px){
  .snap-tabs{display:flex;gap:.5rem;overflow:auto;padding:.5rem .75rem;-webkit-overflow-scrolling:touch}
  .snap-tabs a{
    white-space:nowrap;padding:.5rem .75rem;border-radius:999px;
    border:1px solid #2a2f3a;color:#cbd5e1;text-decoration:none;font-weight:600
  }
  .snap-tabs a:focus,.snap-tabs a:active{outline:none;border-color:#60a5fa;color:#e2e8f0}
}

/* 6) Light accordion (use for Process/FAQs) */
.acc{border:1px solid #1f2937;border-radius:12px;padding:.9rem 1rem;background:#0c1018;margin:.6rem 0}
.acc summary{cursor:pointer;font-weight:700;color:#e2e8f0;list-style:none}
.acc[open]{border-color:#3b82f6}

/* 7) Image defaults */
img{max-width:100%;height:auto}
/* Avoid layout thrash on hover/scroll anims */
* { will-change: auto; }
.group:hover [class*="transition-"] { will-change: transform, opacity; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}