:root{
  --navy-900:#061424;
  --navy-850:#08192c;
  --navy-800:#0a1f36;
  --navy-700:#102a47;
  --navy-600:#17375d;

  --gold-500:#c8a45d;
  --gold-600:#b89249;
  --gold-300:#e7d2a3;

  --green-500:#1fc978;
  --green-600:#17ad66;
  --green-100:#d9f7e8;

  --cream-50:#f7f3ec;
  --cream-100:#efe8dc;
  --cream-150:#e7ddcf;
  --white:#ffffff;

  --text-900:#1f2b38;
  --text-700:#596675;
  --text-500:#7a8795;

  --border:#e3d9c9;
  --shadow-lg:0 18px 48px rgba(0,0,0,.14);
  --shadow-md:0 12px 30px rgba(0,0,0,.10);
  --shadow-sm:0 8px 22px rgba(0,0,0,.08);

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --container:1180px;
  --transition:all .35s ease;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--cream-50);
  color:var(--text-900);
  line-height:1.65;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(var(--container), 92%);
  margin:0 auto;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  position:relative;
  z-index:1001;
  background:linear-gradient(90deg, var(--navy-900), var(--navy-700));
  color:var(--white);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.topbar-left{
  font-size:14px;
  font-weight:700;
  color:#ecf2f9;
}

.online-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:#c6ffe2;
}

.online-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2cff8f;
  box-shadow:0 0 0 0 rgba(44,255,143,.7);
  animation:onlinePulse 1.8s infinite;
}

@keyframes onlinePulse{
  0%{
    box-shadow:0 0 0 0 rgba(44,255,143,.7);
    opacity:1;
  }
  70%{
    box-shadow:0 0 0 12px rgba(44,255,143,0);
    opacity:.85;
  }
  100%{
    box-shadow:0 0 0 0 rgba(44,255,143,0);
    opacity:1;
  }
}

/* =========================
   HEADER
========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(8,25,44,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

.navbar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo-box h2{
  color:var(--white);
  font-size:25px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:.4px;
  margin-bottom:4px;
}

.logo-box span{
  color:#c8d4df;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
}

.nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.nav-menu a{
  color:var(--white);
  font-size:15px;
  font-weight:700;
  transition:var(--transition);
  position:relative;
}

.nav-menu a:hover{
  color:var(--gold-500);
}

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:14px 24px;
  font-size:15px;
  font-weight:800;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}

.btn-call{
  background:var(--gold-500);
  color:#1f1607;
}

.btn-call:hover{
  background:#d4b06b;
  transform:translateY(-2px);
}

.btn-whatsapp{
  background:var(--green-500);
  color:#052415;
}

.btn-whatsapp:hover{
  background:#2bd888;
  transform:translateY(-2px);
}

/* =========================
   HERO
========================= */
.hero-section{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(3,11,20,.90) 0%, rgba(7,21,37,.82) 45%, rgba(10,31,54,.65) 100%),
    url("hero-bg.jpg") center/cover no-repeat;
}

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 20%, rgba(200,164,93,.12), transparent 22%),
    radial-gradient(circle at 22% 75%, rgba(31,201,120,.09), transparent 18%);
}

.hero-section::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-68px;
  height:145px;
  background:var(--cream-50);
  transform:rotate(-4deg);
  z-index:1;
}

.hero-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:40px;
  align-items:center;
  padding:90px 0 140px;
}

.hero-content{
  max-width:650px;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f9fd;
  font-size:13px;
  font-weight:800;
  margin-bottom:24px;
  letter-spacing:.2px;
}

.hero-content h1{
  color:var(--white);
  font-size:clamp(36px, 5vw, 66px);
  line-height:1.04;
  font-weight:900;
  margin-bottom:18px;
  text-shadow:0 6px 22px rgba(0,0,0,.25);
}

.hero-content p{
  color:#e5edf6;
  font-size:18px;
  margin-bottom:24px;
  max-width:610px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-trust span{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#e8f0f8;
  padding:10px 14px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:800;
}

.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xl);
  padding:30px;
  box-shadow:0 20px 52px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  color:var(--white);
  max-width:520px;
  margin-left:auto;
}

.hero-card h3{
  font-size:31px;
  line-height:1.12;
  font-weight:900;
  margin-bottom:12px;
}

.hero-card p{
  color:#dbe6f2;
  margin-bottom:16px;
}

.hero-card ul{
  display:grid;
  gap:12px;
}

.hero-card li{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#edf3f9;
  font-weight:700;
}

.hero-card li:last-child{
  border-bottom:none;
}

/* =========================
   SECTIONS
========================= */
.section{
  padding:82px 0;
}

.section-light{
  background:var(--cream-50);
}

.section-white{
  background:var(--white);
}

.section-beige{
  background:var(--cream-100);
}

.section-title{
  text-align:center;
  color:var(--navy-800);
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.16;
  font-weight:900;
  margin-bottom:10px;
}

.section-subtitle{
  width:min(820px, 100%);
  margin:0 auto 40px;
  text-align:center;
  color:var(--text-700);
  font-size:16px;
}

.section-divider{
  width:104px;
  height:4px;
  border-radius:999px;
  margin:0 auto 24px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
  box-shadow:0 3px 10px rgba(200,164,93,.22);
}

/* =========================
   INTRO
========================= */
.intro-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:34px;
  align-items:start;
}

.intro-left h2{
  color:var(--navy-800);
  font-size:clamp(30px, 4vw, 42px);
  line-height:1.18;
  font-weight:900;
}

.intro-left .highlight{
  color:var(--gold-600);
  font-style:italic;
}

.intro-right p{
  color:#46525f;
  margin-bottom:16px;
  text-align:justify;
  font-size:16px;
}

.intro-right strong{
  color:var(--navy-700);
}

/* =========================
   GALLERY
========================= */
.gallery-wrap{
  background:#e9e1d5;
  padding:34px 24px;
  border-radius:18px;
  box-shadow:var(--shadow-sm);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.gallery-item{
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--white);
  box-shadow:var(--shadow-sm);
}

.gallery-item img{
  width:100%;
  height:270px;
  object-fit:cover;
  transition:transform .55s ease;
}

.gallery-item:hover img{
  transform:scale(1.08);
}

/* =========================
   SERVICES
========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  max-width:860px;
  margin:0 auto;
}

.service-card{
  background:#f1e9dd;
  border:1px solid #ddd1be;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.service-card img{
  width:100%;
  height:190px;
  object-fit:cover;
}

.service-body{
  padding:14px 12px;
  text-align:center;
}

.service-body h3{
  color:var(--navy-800);
  font-size:18px;
  line-height:1.35;
  font-weight:900;
}

/* =========================
   REVIEWS
========================= */
.reviews-wrap{
  background:#e8dfd2;
  padding:34px 20px 28px;
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.rating-strip{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}

.rating-box{
  background:#f8f3ea;
  color:#333;
  border-radius:999px;
  padding:10px 18px;
  box-shadow:var(--shadow-sm);
  font-weight:800;
  font-size:14px;
}

.reviews-slider{
  overflow:hidden;
  width:100%;
}

.reviews-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:reviewsMove 60s linear infinite;
}

.reviews-slider:hover .reviews-track{
  animation-play-state:paused;
}

@keyframes reviewsMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.review-card{
  width:295px;
  flex:0 0 auto;
  background:var(--white);
  border-radius:10px;
  padding:18px;
  box-shadow:var(--shadow-sm);
  border-top:4px solid var(--gold-500);
}

.review-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.review-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--navy-600);
  color:var(--white);
  font-size:18px;
  font-weight:900;
}

.review-name{
  color:var(--navy-800);
  font-size:17px;
  font-weight:900;
}

.review-stars{
  color:#f4b400;
  font-size:16px;
  letter-spacing:1px;
  margin-top:4px;
}

.review-card p{
  color:#4e5a67;
  font-size:14px;
}

/* =========================
   BLOG
========================= */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.blog-card{
  background:#f3ece1;
  border:1px solid #dfd5c4;
  border-radius:8px;
  overflow:hidden;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}

.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
}

.blog-card img{
  width:100%;
  height:165px;
  object-fit:cover;
}

.blog-body{
  padding:12px;
}

.blog-body h3{
  color:#2a3642;
  font-size:15px;
  line-height:1.42;
  font-weight:800;
}

/* =========================
   PROMO
========================= */
.promo-banner{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(90deg, rgba(8,20,38,.80), rgba(19,44,72,.62)),
    url("promo-banner.jpg") center/cover no-repeat;
  box-shadow:var(--shadow-md);
}

.promo-content{
  padding:56px 30px;
  text-align:center;
  color:var(--white);
}

.promo-content h2{
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.16;
  font-weight:900;
  margin-bottom:12px;
}

.promo-content p{
  width:min(740px, 100%);
  margin:0 auto 22px;
  color:#eaf0f7;
}

/* =========================
   AREAS / LOCATION
========================= */
.areas-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.area-item{
  background:var(--white);
  border-left:4px solid var(--gold-500);
  border-radius:10px;
  padding:15px 16px;
  font-weight:800;
  color:var(--navy-700);
  box-shadow:var(--shadow-sm);
}

.location-box{
  margin-top:28px;
  background:linear-gradient(180deg, #ffffff, #fbf8f2);
  border:1px solid #ebdfcb;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:26px;
  text-align:center;
}

.location-box h3{
  color:var(--navy-800);
  font-size:28px;
  font-weight:900;
  margin-bottom:10px;
}

.location-box p{
  color:var(--text-700);
}

/* =========================
   PRICE
========================= */
.price-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:30px;
  align-items:center;
}

.price-card{
  background:linear-gradient(145deg, var(--navy-850), var(--navy-600));
  color:var(--white);
  border-radius:22px;
  padding:36px;
  box-shadow:var(--shadow-lg);
}

.price-card h3{
  font-size:31px;
  font-weight:900;
  margin-bottom:10px;
}

.price-amount{
  font-size:58px;
  line-height:1;
  color:var(--gold-300);
  font-weight:900;
  margin:18px 0 8px;
}

.price-card > p{
  color:#d9e3ef;
  font-weight:700;
}

.price-card ul{
  margin-top:18px;
  display:grid;
  gap:10px;
}

.price-card li{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#edf3fa;
  font-weight:700;
}

.price-card li:last-child{
  border-bottom:none;
}

.price-note{
  background:#fffdfa;
  border:1px solid #efe3d0;
  border-radius:22px;
  padding:34px;
  box-shadow:var(--shadow-sm);
}

.price-note h3{
  color:var(--navy-800);
  font-size:30px;
  font-weight:900;
  margin-bottom:12px;
}

.price-note p{
  color:#4c5865;
  margin-bottom:14px;
}

/* =========================
   FAQ
========================= */
.faq-wrap{
  width:min(980px, 100%);
  margin:0 auto;
  display:grid;
  gap:14px;
}

.faq-item{
  background:var(--white);
  border:1px solid #eadfce;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.faq-question{
  width:100%;
  border:none;
  background:var(--white);
  color:var(--navy-800);
  text-align:left;
  padding:20px 22px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-question::after{
  content:"+";
  color:var(--gold-600);
  font-size:28px;
  line-height:1;
}

.faq-item.active .faq-question::after{
  content:"−";
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  padding:0 22px;
}

.faq-answer p{
  color:#4e5964;
}

.faq-item.active .faq-answer{
  max-height:240px;
  padding:0 22px 20px;
}

/* =========================
   CONTACT
========================= */
.contact-section{
  background:var(--cream-50);
}

.contact-head{
  text-align:center;
  margin-bottom:34px;
}

.contact-head h2{
  color:var(--navy-800);
  font-size:clamp(32px, 4vw, 48px);
  font-weight:900;
  margin-bottom:10px;
}

.contact-head p{
  width:min(760px, 100%);
  margin:0 auto;
  color:var(--text-700);
}

.contact-number{
  text-align:center;
  margin-bottom:30px;
}

.big-number{
  color:var(--gold-500);
  font-size:clamp(42px, 6vw, 76px);
  line-height:1.02;
  font-weight:900;
  margin-bottom:10px;
  text-shadow:0 6px 20px rgba(200,164,93,.12);
}

.contact-number p{
  color:#55616d;
  font-weight:700;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

.contact-info-box,
.contact-form-box{
  background:var(--white);
  border:1px solid #ece1d0;
  border-radius:16px;
  padding:28px;
  box-shadow:var(--shadow-sm);
}

.contact-info-box h3,
.contact-form-box h3{
  color:var(--navy-800);
  font-size:24px;
  font-weight:900;
  margin-bottom:14px;
}

.contact-info-box p{
  color:#4f5b68;
  margin-bottom:16px;
}

.contact-points{
  display:grid;
  gap:12px;
}

.contact-points li{
  color:var(--navy-700);
  font-weight:800;
}

.contact-form{
  display:grid;
  gap:14px;
}

.contact-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px 16px;
  border:1px solid #d8e0e8;
  border-radius:8px;
  outline:none;
  background:#fff;
  font-size:15px;
  transition:var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(200,164,93,.14);
}

.contact-form textarea{
  min-height:140px;
  resize:vertical;
}

.submit-btn{
  width:max-content;
  border:none;
  border-radius:8px;
  cursor:pointer;
  padding:14px 22px;
  background:#151b24;
  color:#fff;
  font-weight:900;
  transition:var(--transition);
}

.submit-btn:hover{
  background:#000;
}

/* =========================
   FOOTER
========================= */
.site-footer{
  background:#15181e;
  color:#d7e0ea;
  padding:54px 0 28px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .8fr .8fr .9fr;
  gap:24px;
  align-items:start;
}

.footer-col h4{
  color:#fff;
  font-size:20px;
  font-weight:900;
  margin-bottom:16px;
}

.footer-col p,
.footer-col li,
.footer-col a{
  color:#cfd7e1;
  font-size:15px;
}

.footer-col ul{
  display:grid;
  gap:10px;
}

.footer-col a:hover{
  color:var(--gold-500);
}

.footer-contact li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.footer-social{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.footer-social a{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#232933;
  color:#fff;
  display:grid;
  place-items:center;
  transition:var(--transition);
}

.footer-social a:hover{
  background:var(--gold-500);
  color:#111;
}

.copyright{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:#c5ced8;
  font-size:14px;
}

/* =========================
   FLOATING / STICKY
========================= */
.floating-call,
.floating-online{
  position:fixed;
  left:16px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:999;
  box-shadow:var(--shadow-sm);
  font-size:22px;
}

.floating-call{
  bottom:86px;
  background:var(--gold-500);
  color:#111;
}

.floating-online{
  bottom:148px;
  background:var(--green-500);
  color:#052414;
}

.sticky-actions{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  z-index:1000;
  box-shadow:0 -10px 24px rgba(0,0,0,.18);
}

.sticky-actions a{
  flex:1;
  text-align:center;
  padding:16px 10px;
  font-size:17px;
  font-weight:900;
  color:#fff;
}

.sticky-call{
  background:var(--navy-800);
}

.sticky-wa{
  background:var(--green-500);
  color:#052414 !important;
}

/* =========================
   UTILITIES
========================= */
.mt-20{
  margin-top:20px;
}

.text-center{
  text-align:center;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1100px){
  .hero-wrap,
  .intro-grid,
  .price-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-card{
    max-width:100%;
    margin-left:0;
  }

  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .services-grid{
    grid-template-columns:repeat(2, 1fr);
    max-width:100%;
  }

  .areas-grid,
  .blog-grid,
  .footer-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .navbar{
    flex-direction:column;
    padding:14px 0;
  }

  .logo-box{
    text-align:center;
  }

  .nav-buttons{
    justify-content:center;
  }
}

@media (max-width:768px){
  .section{
    padding:68px 0;
  }

  .topbar-wrap{
    justify-content:center;
    text-align:center;
  }

  .nav-menu{
    gap:12px;
  }

  .nav-menu a{
    font-size:14px;
  }

  .hero-section{
    min-height:auto;
  }

  .hero-wrap{
    padding:74px 0 112px;
  }

  .hero-content h1{
    font-size:38px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-trust span{
    width:100%;
    text-align:center;
  }

  .gallery-grid,
  .services-grid,
  .areas-grid,
  .blog-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .contact-form .row{
    grid-template-columns:1fr;
  }

  .contact-info-box,
  .contact-form-box,
  .price-card,
  .price-note,
  .hero-card{
    padding:22px;
  }

  .sticky-actions a{
    font-size:15px;
    padding:15px 8px;
  }
}

@media (max-width:480px){
  .container{
    width:min(94%, 100%);
  }

  .logo-box h2{
    font-size:22px;
  }

  .btn{
    padding:13px 18px;
    font-size:14px;
  }

  .gallery-item img{
    height:225px;
  }

  .service-card img{
    height:175px;
  }

  .review-card{
    width:260px;
  }

  .faq-question{
    font-size:16px;
    padding:18px;
  }

  .faq-item.active .faq-answer{
    padding:0 18px 18px;
  }

  .floating-call,
  .floating-online{
    width:48px;
    height:48px;
    font-size:20px;
  }
}
.map-frame{
  margin-top:20px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.map-frame iframe{
  width:100%;
  height:420px;
  display:block;
  border:0;
}
:root{
  --navy-900:#061424;
  --navy-850:#08192c;
  --navy-800:#0a1f36;
  --navy-700:#102a47;
  --navy-600:#17375d;

  --gold-500:#c8a45d;
  --gold-600:#b89249;
  --gold-300:#e7d2a3;

  --green-500:#1fc978;
  --green-600:#17ad66;

  --cream-50:#f7f3ec;
  --cream-100:#efe8dc;
  --cream-150:#e7ddcf;
  --white:#ffffff;

  --text-900:#1f2b38;
  --text-700:#596675;
  --text-500:#7a8795;

  --border:#e3d9c9;
  --shadow-lg:0 18px 48px rgba(0,0,0,.14);
  --shadow-md:0 12px 30px rgba(0,0,0,.10);
  --shadow-sm:0 8px 22px rgba(0,0,0,.08);

  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --container:1180px;
  --transition:all .35s ease;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--cream-50);
  color:var(--text-900);
  line-height:1.65;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
  color:inherit;
}

ul{
  list-style:none;
}

button,
input,
textarea{
  font:inherit;
}

.container{
  width:min(var(--container), 92%);
  margin:0 auto;
}

/* TOPBAR */
.topbar{
  position:relative;
  z-index:1001;
  background:linear-gradient(90deg, var(--navy-900), var(--navy-700));
  color:var(--white);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.topbar-left{
  font-size:14px;
  font-weight:700;
  color:#ecf2f9;
}

.online-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:800;
  color:#c6ffe2;
}

.online-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#2cff8f;
  box-shadow:0 0 0 0 rgba(44,255,143,.7);
  animation:onlinePulse 1.8s infinite;
}

@keyframes onlinePulse{
  0%{ box-shadow:0 0 0 0 rgba(44,255,143,.7); opacity:1; }
  70%{ box-shadow:0 0 0 12px rgba(44,255,143,0); opacity:.85; }
  100%{ box-shadow:0 0 0 0 rgba(44,255,143,0); opacity:1; }
}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:rgba(8,25,44,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

.navbar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo-box h1,
.logo-box h2{
  color:var(--white);
  font-size:24px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:.4px;
  margin-bottom:4px;
}

.logo-box span{
  color:#c8d4df;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
}

.nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.nav-menu a{
  color:var(--white);
  font-size:15px;
  font-weight:700;
  transition:var(--transition);
}

.nav-menu a:hover{
  color:var(--gold-500);
}

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:14px 24px;
  font-size:15px;
  font-weight:800;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}

.btn-call{
  background:var(--gold-500);
  color:#1f1607;
}

.btn-call:hover{
  background:#d4b06b;
  transform:translateY(-2px);
}

.btn-whatsapp{
  background:var(--green-500);
  color:#052415;
}

.btn-whatsapp:hover{
  background:#2bd888;
  transform:translateY(-2px);
}

/* HERO */
.page-hero{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(3,11,20,.90) 0%, rgba(7,21,37,.82) 45%, rgba(10,31,54,.65) 100%),
    url("hero-bg.jpg") center/cover no-repeat;
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 20%, rgba(200,164,93,.12), transparent 22%),
    radial-gradient(circle at 22% 75%, rgba(31,201,120,.09), transparent 18%);
}

.page-hero::after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-68px;
  height:145px;
  background:var(--cream-50);
  transform:rotate(-4deg);
  z-index:1;
}

.page-hero-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
  padding:90px 0 140px;
}

.page-hero-content{
  max-width:700px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#f5f9fd;
  font-size:13px;
  font-weight:800;
  margin-bottom:24px;
}

.page-hero-content h1{
  color:var(--white);
  font-size:clamp(34px, 5vw, 62px);
  line-height:1.06;
  font-weight:900;
  margin-bottom:18px;
  text-shadow:0 6px 22px rgba(0,0,0,.25);
}

.page-hero-content p{
  color:#e5edf6;
  font-size:18px;
  margin-bottom:24px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-points span{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#e8f0f8;
  padding:10px 14px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:800;
}

.hero-side-card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-xl);
  padding:30px;
  box-shadow:0 20px 52px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  color:var(--white);
  max-width:520px;
  margin-left:auto;
}

.hero-side-card h3{
  font-size:30px;
  line-height:1.12;
  font-weight:900;
  margin-bottom:12px;
}

.hero-side-card p{
  color:#dbe6f2;
  margin-bottom:16px;
}

.hero-side-card ul{
  display:grid;
  gap:12px;
}

.hero-side-card li{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#edf3f9;
  font-weight:700;
}

.hero-side-card li:last-child{
  border-bottom:none;
}

/* SECTIONS */
.section{
  padding:82px 0;
}

.section-light{
  background:var(--cream-50);
}

.section-white{
  background:var(--white);
}

.section-beige{
  background:var(--cream-100);
}

.section-title{
  text-align:center;
  color:var(--navy-800);
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.16;
  font-weight:900;
  margin-bottom:10px;
}

.section-subtitle{
  width:min(820px, 100%);
  margin:0 auto 40px;
  text-align:center;
  color:var(--text-700);
  font-size:16px;
}

.section-divider{
  width:104px;
  height:4px;
  border-radius:999px;
  margin:0 auto 24px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
  box-shadow:0 3px 10px rgba(200,164,93,.22);
}

/* INTRO */
.content-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:start;
}

.content-card{
  background:var(--white);
  border:1px solid #ece1d0;
  border-radius:18px;
  padding:30px;
  box-shadow:var(--shadow-sm);
}

.content-card h2,
.content-card h3{
  color:var(--navy-800);
  font-size:30px;
  font-weight:900;
  margin-bottom:14px;
}

.content-card p{
  color:#46525f;
  margin-bottom:16px;
  text-align:justify;
}

.content-card strong{
  color:var(--navy-700);
}

/* HIGHLIGHTS */
.highlight-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.highlight-card{
  background:linear-gradient(145deg, var(--navy-850), var(--navy-600));
  color:var(--white);
  border-radius:18px;
  padding:24px 20px;
  box-shadow:var(--shadow-md);
  text-align:center;
}

.highlight-card h3{
  font-size:20px;
  font-weight:900;
  margin-bottom:10px;
}

.highlight-card p{
  color:#dbe6f2;
  font-size:14px;
}

/* SERVICE / FEATURE CARDS */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.feature-card{
  background:#f1e9dd;
  border:1px solid #ddd1be;
  border-radius:14px;
  padding:24px 20px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}

.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.feature-card h3{
  color:var(--navy-800);
  font-size:21px;
  font-weight:900;
  margin-bottom:10px;
}

.feature-card p{
  color:#56626f;
}

/* AREAS */
.areas-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.area-item{
  background:var(--white);
  border-left:4px solid var(--gold-500);
  border-radius:10px;
  padding:15px 16px;
  font-weight:800;
  color:var(--navy-700);
  box-shadow:var(--shadow-sm);
}

/* PRICE */
.price-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:30px;
  align-items:center;
}

.price-card{
  background:linear-gradient(145deg, var(--navy-850), var(--navy-600));
  color:var(--white);
  border-radius:22px;
  padding:36px;
  box-shadow:var(--shadow-lg);
}

.price-card h3{
  font-size:31px;
  font-weight:900;
  margin-bottom:10px;
}

.price-amount{
  font-size:58px;
  line-height:1;
  color:var(--gold-300);
  font-weight:900;
  margin:18px 0 8px;
}

.price-card > p{
  color:#d9e3ef;
  font-weight:700;
}

.price-card ul{
  margin-top:18px;
  display:grid;
  gap:10px;
}

.price-card li{
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  color:#edf3fa;
  font-weight:700;
}

.price-card li:last-child{
  border-bottom:none;
}

.price-note{
  background:#fffdfa;
  border:1px solid #efe3d0;
  border-radius:22px;
  padding:34px;
  box-shadow:var(--shadow-sm);
}

.price-note h3{
  color:var(--navy-800);
  font-size:30px;
  font-weight:900;
  margin-bottom:12px;
}

.price-note p{
  color:#4c5865;
  margin-bottom:14px;
}

/* FAQ */
.faq-wrap{
  width:min(980px, 100%);
  margin:0 auto;
  display:grid;
  gap:14px;
}

.faq-item{
  background:var(--white);
  border:1px solid #eadfce;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.faq-question{
  width:100%;
  border:none;
  background:var(--white);
  color:var(--navy-800);
  text-align:left;
  padding:20px 22px;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.faq-question::after{
  content:"+";
  color:var(--gold-600);
  font-size:28px;
  line-height:1;
}

.faq-item.active .faq-question::after{
  content:"−";
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  padding:0 22px;
}

.faq-answer p{
  color:#4e5964;
}

.faq-item.active .faq-answer{
  max-height:240px;
  padding:0 22px 20px;
}

/* CONTACT */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:start;
}

.contact-info-box,
.contact-form-box{
  background:var(--white);
  border:1px solid #ece1d0;
  border-radius:16px;
  padding:28px;
  box-shadow:var(--shadow-sm);
}

.contact-info-box h3,
.contact-form-box h3{
  color:var(--navy-800);
  font-size:24px;
  font-weight:900;
  margin-bottom:14px;
}

.contact-info-box p{
  color:#4f5b68;
  margin-bottom:16px;
}

.contact-points{
  display:grid;
  gap:12px;
}

.contact-points li{
  color:var(--navy-700);
  font-weight:800;
}

.contact-form{
  display:grid;
  gap:14px;
}

.contact-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:15px 16px;
  border:1px solid #d8e0e8;
  border-radius:8px;
  outline:none;
  background:#fff;
  font-size:15px;
  transition:var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(200,164,93,.14);
}

.contact-form textarea{
  min-height:140px;
  resize:vertical;
}

.submit-btn{
  width:max-content;
  border:none;
  border-radius:8px;
  cursor:pointer;
  padding:14px 22px;
  background:#151b24;
  color:#fff;
  font-weight:900;
  transition:var(--transition);
}

.submit-btn:hover{
  background:#000;
}

.big-number{
  color:var(--gold-500);
  font-size:clamp(42px, 6vw, 76px);
  line-height:1.02;
  font-weight:900;
  margin-bottom:10px;
  text-shadow:0 6px 20px rgba(200,164,93,.12);
}

/* MAP */
.map-frame{
  margin-top:20px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.map-frame iframe{
  width:100%;
  height:420px;
  display:block;
  border:0;
}

/* FOOTER */
.site-footer{
  background:#15181e;
  color:#d7e0ea;
  padding:54px 0 28px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .8fr .8fr .9fr;
  gap:24px;
  align-items:start;
}

.footer-col h4{
  color:#fff;
  font-size:20px;
  font-weight:900;
  margin-bottom:16px;
}

.footer-col p,
.footer-col li,
.footer-col a{
  color:#cfd7e1;
  font-size:15px;
}

.footer-col ul{
  display:grid;
  gap:10px;
}

.footer-col a:hover{
  color:var(--gold-500);
}

.footer-contact li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.copyright{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  color:#c5ced8;
  font-size:14px;
}

/* FLOATING / STICKY */
.floating-call,
.floating-online{
  position:fixed;
  left:16px;
  width:54px;
  height:54px;
  border-radius:50%;
  display:grid;
  place-items:center;
  z-index:999;
  box-shadow:var(--shadow-sm);
  font-size:22px;
}

.floating-call{
  bottom:86px;
  background:var(--gold-500);
  color:#111;
}

.floating-online{
  bottom:148px;
  background:var(--green-500);
  color:#052414;
}

.sticky-actions{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  z-index:1000;
  box-shadow:0 -10px 24px rgba(0,0,0,.18);
}

.sticky-actions a{
  flex:1;
  text-align:center;
  padding:16px 10px;
  font-size:17px;
  font-weight:900;
  color:#fff;
}

.sticky-call{
  background:var(--navy-800);
}

.sticky-wa{
  background:var(--green-500);
  color:#052414 !important;
}

/* UTILITIES */
.mt-20{ margin-top:20px; }
.mt-30{ margin-top:30px; }
.mb-20{ margin-bottom:20px; }
.mb-30{ margin-bottom:30px; }
.text-center{ text-align:center; }

/* RESPONSIVE */
@media (max-width:1100px){
  .page-hero-wrap,
  .content-grid,
  .price-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-side-card{
    max-width:100%;
    margin-left:0;
  }

  .highlight-grid,
  .feature-grid,
  .areas-grid,
  .footer-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .navbar{
    flex-direction:column;
    padding:14px 0;
  }

  .logo-box{
    text-align:center;
  }

  .nav-buttons{
    justify-content:center;
  }
}

@media (max-width:768px){
  .section{
    padding:68px 0;
  }

  .topbar-wrap{
    justify-content:center;
    text-align:center;
  }

  .nav-menu{
    gap:12px;
  }

  .nav-menu a{
    font-size:14px;
  }

  .page-hero{
    min-height:auto;
  }

  .page-hero-wrap{
    padding:74px 0 112px;
  }

  .page-hero-content h1{
    font-size:38px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-points span{
    width:100%;
    text-align:center;
  }

  .highlight-grid,
  .feature-grid,
  .areas-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .contact-form .row{
    grid-template-columns:1fr;
  }

  .contact-info-box,
  .contact-form-box,
  .price-card,
  .price-note,
  .hero-side-card,
  .content-card{
    padding:22px;
  }

  .sticky-actions a{
    font-size:15px;
    padding:15px 8px;
  }
}

@media (max-width:480px){
  .container{
    width:min(94%, 100%);
  }

  .logo-box h1,
  .logo-box h2{
    font-size:22px;
  }

  .btn{
    padding:13px 18px;
    font-size:14px;
  }

  .faq-question{
    font-size:16px;
    padding:18px;
  }

  .faq-item.active .faq-answer{
    padding:0 18px 18px;
  }

  .floating-call,
  .floating-online{
    width:48px;
    height:48px;
    font-size:20px;
  }

  .map-frame iframe{
    height:320px;
  }
}