/* ============================================================
   OfficeHub — Clean White + Green theme
   ============================================================ */
:root {
  --brand:        #059669;   /* emerald-600 */
  --brand-dark:   #047857;
  --brand-soft:   #ecfdf5;
  --whatsapp:     #25D366;
  --ink:          #0f172a;
  --muted:        #64748b;
  --border:       #e5e7eb;
  --bg-soft:      #f8fafc;
  --shadow-card:  0 4px 24px -8px rgba(15, 23, 42, .08);
  --shadow-soft:  0 20px 50px -20px rgba(5, 150, 105, .35);
  --gradient-hero: linear-gradient(135deg, #ecfdf5 0%, #ffffff 60%);
  --gradient-primary: linear-gradient(135deg, #10b981 0%, #047857 100%);
}

* { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
}

/* Bootstrap colour overrides */
.text-success     { color: var(--brand) !important; }
.bg-success       { background-color: var(--brand) !important; }
.btn-success      { background-color: var(--whatsapp); border-color: var(--whatsapp); }
.btn-success:hover{ background-color: #1ebe5b; border-color: #1ebe5b; }
.btn-outline-success { color: var(--brand); border-color: var(--brand); }
.btn-outline-success:hover { background-color: var(--brand); color: #fff; }
.text-muted       { color: var(--muted) !important; }
.border-success   { border-color: var(--brand) !important; }

/* Brand mark */
.brand-mark{
  display:inline-flex; width:32px; height:32px; border-radius:8px;
  background:var(--brand); color:#fff; font-weight:700;
  align-items:center; justify-content:center; font-size:14px;
}

.navbar-brand { font-size: 1.15rem; }
.nav-link { color: var(--muted); font-size: .95rem; }
.nav-link:hover { color: var(--ink); }

/* ----- Hero ----- */
.hero {
  background: var(--gradient-hero);
  padding: 5rem 0;
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.hero-img-wrap { position: relative; }
.hero-img-wrap img {
  border-radius: 1rem;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--brand-soft); color: var(--brand-dark);
  padding: .4rem .85rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.hero-card {
  position:absolute; background:#fff; border:1px solid var(--border);
  border-radius: .85rem; padding: .75rem 1rem; box-shadow: var(--shadow-card);
}
.hero-card.tl { top:-1rem; right:-1rem; }
.hero-card.bl { bottom:-1.25rem; left:-1.25rem; display:flex; align-items:center; gap:.75rem; }
.hero-card .icon{
  width:40px; height:40px; border-radius:999px; background:var(--brand-soft);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
}

/* ----- Section labels ----- */
.eyebrow{
  font-size:.8rem; font-weight:700; color:var(--brand);
  text-transform:uppercase; letter-spacing:.08em;
}
.section-title{ font-weight:800; letter-spacing:-.02em; }
section { padding: 4.5rem 0; }
.section-soft { background: var(--bg-soft); }

/* ----- Cards ----- */
.feature-card{
  border:1px solid var(--border); border-radius:1rem; padding:1.5rem;
  background:#fff; transition: all .25s ease; height:100%;
  box-shadow: var(--shadow-card);
}
.feature-card:hover{ transform:translateY(-4px); border-color: rgba(5,150,105,.4); }
.feature-card .ico{
  width:48px; height:48px; border-radius:.75rem;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom:1rem;
}

/* ----- Service cards ----- */
.service-card{
  border:1px solid var(--border); border-radius:1.25rem; padding:1.75rem;
  background:#fff; height:100%; box-shadow: var(--shadow-card);
  transition: all .25s ease;
}
.service-card:hover{ transform:translateY(-4px); }
.service-card.popular{ border:2px solid var(--brand); box-shadow: var(--shadow-soft); }
.service-card .badge-pill{
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-dark);
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.service-card.popular .badge-pill{ background:var(--brand); color:#fff; }
.service-card .ico{
  width:56px; height:56px; border-radius:1rem;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin: 1rem 0;
}
.service-card ul{ list-style:none; padding:0; margin:0; }
.service-card ul li{
  display:flex; gap:.5rem; align-items:flex-start;
  font-size:.92rem; padding:.3rem 0;
}
.service-card ul li i{ color:var(--brand); margin-top:.2rem; }

/* ----- Gallery ----- */
.gallery img{
  width:100%; height:100%; object-fit:cover; border-radius:1rem;
  transition: transform .6s ease;
}
.gallery .item{ overflow:hidden; border-radius:1rem; border:1px solid var(--border); }
.gallery .item:hover img{ transform: scale(1.05); }

/* ----- Pricing ----- */
.price-card{
  border:1px solid var(--border); border-radius:1.25rem; padding:2rem;
  background:#fff; box-shadow: var(--shadow-card); height:100%;
}
.price-card.featured{
  background: var(--gradient-primary); color:#fff; border:none;
  box-shadow: var(--shadow-soft);
}
.price-card.featured ul li, .price-card.featured small{ color:#fff; }
.price-card .price{ font-size:2.5rem; font-weight:800; }
.price-card ul{ list-style:none; padding:0; }
.price-card ul li{ padding:.45rem 0; display:flex; gap:.5rem; align-items:center; }
.price-card ul li i{ color: var(--brand); }
.price-card.featured ul li i{ color:#fff; }

/* ----- Stats / Testimonials ----- */
.stat-card{
  text-align:center; background:#fff; border:1px solid var(--border);
  border-radius:1rem; padding:1.5rem;
}
.stat-card .num{ font-size:2.25rem; font-weight:800; color:var(--brand); }
.testimonial{
  background:#fff; border:1px solid var(--border); border-radius:1rem;
  padding:1.5rem; height:100%;
}
.testimonial .stars{ color:#f59e0b; margin-bottom:.5rem; }

/* ----- Urgency ----- */
.urgency-box{
  border:2px dashed rgba(5,150,105,.4); background: var(--brand-soft);
  border-radius:1rem; padding:2rem; text-align:center;
}
.urgency-box .pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--brand); color:#fff; padding:.3rem .75rem;
  border-radius:999px; font-size:.75rem; font-weight:700; margin-bottom:.75rem;
}
.dot-pulse{
  width:.5rem; height:.5rem; border-radius:999px; background:#fff;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

/* ----- Final CTA ----- */
.final-cta{
  background: var(--gradient-primary); color:#fff; border-radius:1.5rem;
  padding: 4rem 1.5rem; text-align:center; box-shadow: var(--shadow-soft);
}
.final-cta h2{ font-weight:800; letter-spacing:-.02em; }
.final-cta .btn-light{ color: var(--brand-dark); font-weight:600; }

/* ----- Contact form ----- */
.contact-card{
  background:#fff; border:1px solid var(--border); border-radius:1.25rem;
  padding:2rem; box-shadow: var(--shadow-card);
}
.form-control:focus, .form-select:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(5,150,105,.15);
}

/* ----- WhatsApp floating button ----- */
.whatsapp-fab{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index: 999;
  width:56px; height:56px; border-radius:999px;
  background: var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; box-shadow: 0 10px 30px rgba(37,211,102,.4);
  text-decoration:none; transition: transform .2s ease;
}
.whatsapp-fab:hover{ transform: scale(1.08); color:#fff; }

/* ----- Admin ----- */
.admin-shell{ background: var(--bg-soft); min-height:100vh; }
.admin-card{
  background:#fff; border:1px solid var(--border); border-radius:1rem;
  padding:1.5rem; box-shadow: var(--shadow-card);
}