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

:root{
  --navy:#0F172A;
  --navy-2:#1E293B;
  --slate:#334155;
  --cta:#EA580C;
  --cta-dark:#C2410C;
  --bg:#F8FAFC;
  --ink:#020617;
  --muted:#475569;
  --line:#E2E8F0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Source Sans 3',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Lexend',system-ui,sans-serif;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}

.reveal-scale{opacity:0;transform:scale(.92);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.reveal-scale.is-visible{opacity:1;transform:scale(1);}

.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-left.is-visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-right.is-visible{opacity:1;transform:translateX(0);}

/* ---------- Nav ---------- */
.site-nav{transition:background-color .3s ease,box-shadow .3s ease,padding .3s ease;}
.site-nav.scrolled{box-shadow:0 1px 0 0 var(--line),0 8px 24px -12px rgba(2,6,23,.08);}

.nav-link{position:relative;}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--cta);transition:width .25s ease;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}

/* ---------- Buttons ---------- */
.btn-cta{
  background:var(--cta);color:#fff;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow:0 8px 20px -8px rgba(234,88,12,.55);
}
.btn-cta:hover{background:var(--cta-dark);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(234,88,12,.6);}
.btn-cta:active{transform:translateY(0);}

.btn-outline{
  border:1.5px solid rgba(255,255,255,.35);color:#fff;
  transition:all .2s ease;
}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* ---------- Pulse ring for phone CTA ---------- */
.pulse-ring{position:relative;}
.pulse-ring::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--cta);opacity:.55;
  animation:pulseRing 2.2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.55;}
  70%{transform:scale(1.7);opacity:0;}
  100%{opacity:0;}
}

/* ---------- Cards ---------- */
.service-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
  border:1px solid var(--line);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -24px rgba(2,6,23,.18);
  border-color:#CBD5E1;
}
.icon-wrap{transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease;}
.service-card:hover .icon-wrap{transform:scale(1.08) rotate(-4deg);}

/* ---------- Counters ---------- */
.counter{font-family:'Lexend',sans-serif;}

/* ---------- Marquee for trust badges ---------- */
.marquee-track{
  display:flex;gap:3rem;width:max-content;
  animation:marquee 28s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}

/* ---------- Gradient hero bg ---------- */
.hero-gradient{
  background:radial-gradient(1200px 600px at 80% -10%, rgba(234,88,12,.25), transparent 60%),
             radial-gradient(800px 500px at 0% 100%, rgba(56,189,248,.12), transparent 60%),
             linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
}

/* ---------- Animated gradient text ---------- */
.text-gradient{
  background:linear-gradient(90deg,#FB923C,#F97316 40%,#FED7AA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Hero media (video + parallax photo) ---------- */
.hero-media{position:relative;border-radius:1.5rem;overflow:hidden;}
.hero-media video,.hero-media img{
  width:100%;height:420px;object-fit:cover;display:block;
  will-change:transform;
}
.hero-media .parallax-img{animation:kenburns 18s ease-in-out infinite alternate;}
@keyframes kenburns{
  0%{transform:scale(1) translateY(0);}
  100%{transform:scale(1.08) translateY(-10px);}
}
.hero-media video{display:none;}
@media (min-width:1024px){
  .hero-media.has-video video{display:block;}
  .hero-media.has-video .parallax-img{display:none;}
}
.parallax-el{will-change:transform;}

/* ---------- Floating blobs ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;animation:float 9s ease-in-out infinite;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(20px,-26px) scale(1.08);}
}

/* ---------- Testimonial cards ---------- */
.quote-mark{font-family:'Lexend',sans-serif;}

/* ---------- Accordion ---------- */
.faq-item[open] .faq-icon{transform:rotate(45deg);}
.faq-icon{transition:transform .25s ease;}
.faq-item summary{cursor:pointer;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar{
  transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.mobile-call-bar.show{transform:translateY(0);}

/* ---------- Skeleton shimmer (map placeholder) ---------- */
.skeleton{
  background:linear-gradient(90deg,#E2E8F0 25%,#EDF2F7 37%,#E2E8F0 63%);
  background-size:400% 100%;
  animation:shimmer 1.6s ease infinite;
}
@keyframes shimmer{
  0%{background-position:100% 50%}
  100%{background-position:0 50%}
}

/* line clamp util */
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

::selection{background:var(--cta);color:#fff;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--cta);outline-offset:2px;border-radius:4px;
}