:root{
  --navy:#0A1533;
  --deep-blue:#0F2D5C;
  --blue:#1976D2;
  --light-blue:#29ABE2;
  --cyan:#5EDFFF;
  --orange:#F7931E;
  --yellow:#F9C74F;
  --bg:#ffffff;
  --muted:#F4F7FA;
  --text:#0A1533;
  --radius:16px;
  --shadow:0 12px 30px rgba(10,21,51,.12);
  --shadow-soft:0 8px 22px rgba(10,21,51,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1120px, 92%); margin-inline:auto}
.section{padding:84px 0}
.section-sm{padding:54px 0}
.muted{background:var(--muted)}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; font-weight:600; font-size:.85rem;
  background:rgba(41,171,226,.14); color:var(--deep-blue);
  border:1px solid rgba(41,171,226,.25);
}
.badge.orange{background:rgba(247,147,30,.14); border-color:rgba(247,147,30,.25)}
.badge.navy{background:rgba(10,21,51,.12); border-color:rgba(10,21,51,.18)}

.h1{font-size:clamp(2.2rem, 3.2vw, 3.4rem); line-height:1.05; margin:14px 0 14px}
.h2{font-size:clamp(1.6rem, 2.2vw, 2.4rem); margin:0 0 14px}
.h3{font-size:1.15rem; margin:0 0 10px}
.p{color:rgba(10,21,51,.78); line-height:1.7}

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px; border-radius:999px;
  font-weight:700; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px) scale(1.015); box-shadow:var(--shadow-soft)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{background:var(--orange); color:#1b1206}
.btn.secondary{background:var(--blue); color:white}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.25); color:white}
.btn.ghost:hover{background:rgba(255,255,255,.10)}

@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(247,147,30,.45)}
  50%{box-shadow:0 0 0 10px rgba(247,147,30,0)}
}
.btn.pulse{animation:pulseGlow 2.4s ease-in-out infinite}
.btn.pulse:hover{animation-play-state:paused}

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgb(255, 255, 255); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(10,21,51,.08);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.nav.scrolled{box-shadow:0 8px 26px rgba(10,21,51,.10); border-bottom-color:transparent}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; transition:padding .25s ease}
.nav.scrolled .nav-inner{padding:10px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:54px; height:54px; object-fit:contain; transition:width .25s ease, height .25s ease}
.nav.scrolled .brand img{width:44px; height:44px}
.brand .name{font-weight:800; letter-spacing:.4px}
.brand .sub{font-size:.82rem; color:rgba(10,21,51,.7); margin-top:-4px}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{font-weight:600; color:rgba(10,21,51,.78); position:relative; padding-bottom:2px}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--blue); transition:right .22s ease;
}
.nav-links a:hover{color:var(--blue)}
.nav-links a:hover::after{right:0}
.nav-ctas{display:flex; gap:10px; align-items:center}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(10,21,51,.12); background:white; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:rgba(10,21,51,.8); margin:4px auto; transition:transform .22s ease, opacity .22s ease}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-panel{
  position:fixed; top:74px; left:4%; right:4%; z-index:49;
  background:white; border:1px solid rgba(10,21,51,.10);
  border-radius:18px; box-shadow:var(--shadow);
  padding:14px;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.mobile-panel.open{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}
.mobile-panel a{display:block; padding:12px 10px; border-radius:12px; font-weight:700; transition:background .15s ease, padding-left .15s ease}
.mobile-panel a:hover{background:var(--muted); padding-left:16px}
.mobile-panel .row{display:flex; gap:10px; padding:10px}

.hero{
  position:relative; padding:128px 0 84px;
  background:var(--navy); color:white; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url('https://images.unsplash.com/photo-1632120669818-ed5498030e32?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBob21lJTIwaW50ZXJpb3IlMjBsaXZpbmclMjByb29tJTIwY29tZm9ydGFibGV8ZW58MXx8fHwxNzcxMjgwODE3fDA&ixlib=rb-4.1.0&q=80&w=1920') center/cover no-repeat;
  opacity:.40;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 600px at 20% 20%, rgba(41,171,226,.35), transparent 60%),
             radial-gradient(900px 500px at 80% 10%, rgba(247,147,30,.28), transparent 55%),
             linear-gradient(to bottom, rgba(10,21,51,.65), rgba(10,21,51,.86));
}
.hero .container{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:34px; align-items:center}
.hero-card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:18px; border-radius:22px;
  transition:transform .3s ease, background .3s ease;
}
.hero-card:hover{transform:translateY(-4px); background:rgba(255,255,255,.12)}
.hero-points{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.point{display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.9); transition:transform .2s ease}
.point:hover{transform:translateX(4px)}
.point small{display:block; color:rgba(255,255,255,.72); margin-top:2px}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(22px)}
  to{opacity:1; transform:translateY(0)}
}
.hero-anim{opacity:0; animation:fadeUp .8s ease forwards}
.hero-anim-1{animation-delay:.05s}
.hero-anim-2{animation-delay:.18s}
.hero-anim-3{animation-delay:.30s}
.hero-anim-4{animation-delay:.42s}
.hero-anim-5{animation-delay:.54s}

.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
.card{
  background:white; border:1px solid rgba(10,21,51,.10);
  border-radius:22px; box-shadow:var(--shadow-soft);
  padding:18px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-7px); box-shadow:0 20px 42px rgba(10,21,51,.16); border-color:rgba(41,171,226,.35)}
.card .meta{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.price{font-size:1.4rem; font-weight:900}
.list{margin:10px 0 0; padding-left:18px; color:rgba(10,21,51,.78); line-height:1.8}
.service-card{padding:18px}
.service-card p{margin:0; color:rgba(10,21,51,.72); line-height:1.7}

/* Scroll-reveal */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
[data-reveal].in-view{opacity:1; transform:translateY(0)}
.grid-3 > [data-reveal]:nth-child(1),.grid-2 > [data-reveal]:nth-child(1){transition-delay:.05s}
.grid-3 > [data-reveal]:nth-child(2),.grid-2 > [data-reveal]:nth-child(2){transition-delay:.15s}
.grid-3 > [data-reveal]:nth-child(3){transition-delay:.25s}
.grid-3 > [data-reveal]:nth-child(4){transition-delay:.35s}
.grid-3 > [data-reveal]:nth-child(5){transition-delay:.45s}
.grid-3 > [data-reveal]:nth-child(6){transition-delay:.55s}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
.mapbox{border-radius:22px; overflow:hidden; border:1px solid rgba(10,21,51,.10); min-height:420px}
iframe{border:0; width:100%; height:100%}

.review{min-height:220px; transition:transform .25s ease}
.review:hover .stars{transform:scale(1.08)}
.stars{letter-spacing:2px; color:var(--yellow); font-size:1.05rem; display:inline-block; transition:transform .25s ease}

.faq-item{border:1px solid rgba(10,21,51,.10); border-radius:18px; overflow:hidden; background:white; transition:border-color .2s ease, box-shadow .2s ease}
.faq-item.open{border-color:rgba(41,171,226,.35); box-shadow:var(--shadow-soft)}
.faq-q{width:100%; text-align:left; padding:16px 16px; font-weight:800; background:white; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition:color .2s ease}
.faq-q:hover{color:var(--blue)}
.faq-a{
  display:grid; grid-template-rows:0fr;
  color:rgba(10,21,51,.74); line-height:1.7;
  transition:grid-template-rows .32s ease;
}
.faq-a-inner{overflow:hidden; min-height:0; padding:0 16px}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a-inner{padding-bottom:16px}
.faq-item.open .chev{transform:rotate(180deg)}
.chev{transition:transform .25s ease}

.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(10,21,51,.14); background:white;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--light-blue);
  box-shadow:0 0 0 4px rgba(41,171,226,.16);
}
textarea{min-height:120px; resize:vertical}
.note{font-size:.92rem; color:rgba(10,21,51,.65)}

.footer{
  background:var(--navy); color:rgba(255,255,255,.92);
  padding:54px 0;
}
.footer a{color:rgba(255,255,255,.86)}
.footer a:hover{color:white}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px}
.footer small{color:rgba(255,255,255,.70)}
.hr{height:1px; background:rgba(255,255,255,.14); margin:18px 0}
.bottom{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}

.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background:var(--blue); color:white; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; line-height:1; box-shadow:var(--shadow);
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .18s ease;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.back-to-top:hover{background:var(--deep-blue); transform:translateY(-2px) scale(1.03)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-links, .nav-ctas{display:none}
  .burger{display:inline-block}
  .mobile-panel{transform-origin: top}
}

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