:root{
  --font-main: <?= $theme['font_family'] ?>;
}

/* =========================================================
   RESET
   ========================================================= */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-main);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family: var(--font-main); cursor:pointer; border:none; background:none; }

/* =========================================================
   LAYOUT
   ========================================================= */
.container{
  width:100%;
  max-width:1200px;
  margin:auto;
  padding:0 16px;
}

.section{ padding:60px 0; }

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.02em;
}

p{
  color:var(--text);
  font-size:.95rem;
}

.text-muted{ color:var(--muted); }

/* Gold text utility */
.gold-text{
  color: var(--accent);
}

/* =========================================================
   FORMS
   ========================================================= */
input,
select,
textarea{
  width:100%;
  font-family: var(--font-main);
  font-size:.85rem;
  padding:10px 12px;
  border:1px solid var(--border);
  background: var(--card); /* #fff ki jagah */
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:transparent;
  border-color: var(--accent);
}

/* =========================================================
   BUTTON SYSTEM
   ========================================================= */
.btn,
button,
.pc-cta-btn,
.career-btn-primary,
.cf-submit-btn{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:10px 18px;
}

.btn:hover,
button:hover{
  background:var(--accent);
  color:var(--brand-dark);
}


/* Outline button */
.btn-outline{
  background:transparent;
  color:var(--brand);
  border:1px solid var(--brand);
}

.btn-outline:hover{
  background:var(--brand);
  color:#fff;
}

/* =========================================================
   BADGES & ICON BUTTONS
   ========================================================= */
.badge{
  padding:4px 10px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--brand);
  color:var(--accent);
  border:1px solid var(--accent);
}

.icon-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand);
  color:var(--accent);
  border:1px solid var(--accent);
}

.icon-btn:hover{
  background:var(--accent);
  color:var(--brand);
}

/* =========================================================
   FLOATING BUTTONS
   ========================================================= */
.floating-whatsapp,
.floating-up,
.floating-btn{
  position:fixed;
  right:20px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand);
  color:var(--accent);
  border:1px solid var(--accent);
  z-index:999;
}

.floating-whatsapp{
  bottom:80px;
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}

.floating-up{ bottom:20px; }

.floating-btn:hover,
.floating-up:hover{
  background:var(--accent);
  color:var(--brand);
}

/* =========================================================
   MODAL BASE
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  background: var(--overlay);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.modal.show{ display:flex; }

.modal-box{
  background:var(--brand-dark);
  border:1px solid var(--accent);
  padding:22px;
  max-width:360px;
  width:90%;
  text-align:center;
}

.modal-title{
  color:var(--accent);
  margin-bottom:12px;
}

/* =========================================================
   IMAGE EFFECTS
   ========================================================= */
.image-wrap{
  position:relative;
  overflow:hidden;
}

.image-wrap img{
  transition:transform .45s ease, filter .45s ease;
}

.image-wrap:hover img{
  transform:scale(1.06);
  filter:contrast(1.1) brightness(1.04);
}

/* =========================================================
   UTILITIES
   ========================================================= */
.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.space-between{ display:flex; justify-content:space-between; }
.wrap{ flex-wrap:wrap; }

.gap-xs{ gap:6px; }
.gap-sm{ gap:10px; }
.gap-md{ gap:16px; }
.gap-lg{ gap:24px; }

.text-center{ text-align:center; }
.hide{ display:none !important; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes fadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}

.fade-in{ animation:fadeIn .35s ease forwards; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:768px){
  body{ font-size:14px; }
  .section{ padding:44px 0; }
  .container{ padding:0 14px; }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
a:focus,
button:focus{
  outline:none;
  box-shadow:none;
}

::selection{
  background:var(--accent);
  color:var(--brand);
}


}
.service-hero{
  padding:80px 0;
  background:var(--brand-dark);
  color:var(--text-on-dark);
}

.service-hero h1{
  font-size:38px;
  font-weight:800;
}

.service-hero p{
  max-width:720px;
  margin-top:10px;
  opacity:.9;
}

.service-content{
  padding:80px 0;
}

.service-intro{
  max-width:720px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  margin:40px 0;
}

.service-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px;
}

.service-pricing{
  margin-top:20px;
}

.price-box{
  font-size:32px;
  font-weight:900;
  margin:10px 0;
}

.price-box span{
  font-size:16px;
  font-weight:500;
}

.price-note{
  font-size:14px;
  color:#666;
}

.service-features ul{
  margin-top:20px;
}

.service-features li{
  margin-bottom:8px;
}

.service-cta{
  margin-top:34px;
}
.home-services{
  padding:70px 0;
  background:#f9fafb;
}

.home-services h2{
  font-size:32px;
  font-weight:800;
}

.section-sub{
  max-width:640px;
  margin-top:8px;
  color:#666;
}

.home-service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin-top:32px;
}

.home-service-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px;
}

.home-service-price{
  margin-top:28px;
  font-size:18px;
  font-weight:700;
}