/* ================================================
   Code Hub Soft — Design System v2.0
   Brand: #4f46e5 indigo | #7c3aed violet
   Dark:  #0f172a slate-900
   ================================================ */

/* ── Bootstrap 5 Primary Override (global bg-primary, text-primary, border-primary) ── */
:root {
  --bs-primary:        #4f46e5;
  --bs-primary-rgb:    79, 70, 229;
  --bs-link-color:     #4f46e5;
  --bs-link-hover-color: #7c3aed;
}

/* ── CSS Variables ── */
:root {
  --brand:        #4f46e5;
  --brand-deep:   #7c3aed;
  --brand-light:  #eef2ff;
  --brand-amber:  #f59e0b;
  --brand-green:  #16a34a;
  --brand-cyan:   #06b6d4;

  --bg-dark:   #0f172a;
  --bg-dark2:  #1e1b4b;
  --bg-light:  #f8faff;

  --text-dark:   #0f172a;
  --text-body:   #374151;
  --text-muted:  #64748b;
  --text-light:  #94a3b8;

  --border:      #e2e8f0;
  --border-card: #f1f5f9;

  --grad-brand:  linear-gradient(135deg, #4f46e5, #7c3aed);
  --grad-dark:   linear-gradient(135deg, #0f172a, #1e1b4b);
  --grad-amber:  linear-gradient(135deg, #f59e0b, #d97706);

  --shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:   0 10px 32px rgba(0,0,0,.11);
  --shadow-xl:   0 20px 48px rgba(0,0,0,.13);
  --shadow-brand:0 8px 24px rgba(79,70,229,.28);

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --ease:      all .28s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
}

a { color: var(--brand); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; height: auto; }

/* ── Section Label ── */
.section-label {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand);
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ── Buttons Override ── */
.btn-primary {
  background: var(--grad-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: var(--shadow-brand) !important;
  transition: var(--ease) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(79,70,229,.38) !important;
}

.btn-warning {
  background: var(--grad-amber) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(245,158,11,.3) !important;
}
.btn-warning:hover { color: #fff !important; transform: translateY(-2px) !important; }

.btn-outline-primary {
  border: 2px solid var(--brand) !important;
  color: var(--brand) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--grad-brand) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) !important;
}

/* ── Cards ── */
.card {
  border-radius: var(--radius-lg) !important;
  border-color: var(--border-card) !important;
}

/* ── Navbar ── */
.site-header { position: sticky; top: 0; z-index: 1030; }

#mainNav {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  transition: var(--ease);
}
#mainNav.nav-scrolled {
  background: rgba(255,255,255,.99);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  padding: 8px 0;
}

/* ── Portfolio Cards ── */
.portfolio-card { border-radius: var(--radius-lg) !important; overflow: hidden; transition: var(--ease); }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) !important; }
.portfolio-image { position: relative; overflow: hidden; height: 220px; background: var(--bg-light); }
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.portfolio-card:hover .portfolio-image img { transform: scale(1.07); }
.portfolio-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,.82) 100%);
  display: flex; align-items: flex-end; padding: 20px;
  opacity: 0; transition: var(--ease);
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }

/* ── Blog Cards ── */
.blog-card { border-radius: var(--radius-lg) !important; overflow: hidden; transition: var(--ease); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg) !important; }
.blog-image { position: relative; height: 200px; overflow: hidden; background: var(--bg-light); }
.blog-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-image img { transform: scale(1.06); }
.blog-category {
  position: absolute !important; top: 14px; left: 14px;
  background: var(--grad-brand) !important;
  border-radius: var(--radius-pill) !important;
  font-size: .68rem; font-weight: 700; letter-spacing: .6px; padding: 4px 10px !important;
}

/* ── Testimonial Cards ── */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-card);
}
.testimonial-avatar { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--border); }

/* ── Accordion (FAQs) ── */
.accordion-item {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-card) !important;
  overflow: hidden;
  margin-bottom: 8px;
}
.accordion-button {
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  background: #fff !important;
  font-size: .95rem !important;
}
.accordion-button:not(.collapsed) {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  box-shadow: none !important;
}
.accordion-button:focus { box-shadow: none !important; }

/* ── WhatsApp Float ── */
.whatsapp-float {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 58px; height: 58px;
  background: linear-gradient(135deg,#25d366,#128c7e);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  z-index: 9999; transition: var(--ease);
}
.whatsapp-float:hover {
  color: #fff; transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(37,211,102,.55);
}

/* ── Scroll To Top ── */
.scroll-to-top {
  position: fixed;
  bottom: 96px; right: 26px;
  width: 44px; height: 44px;
  background: var(--grad-brand);
  color: #fff; border: none;
  border-radius: 50%; font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  display: none; align-items: center; justify-content: center;
  z-index: 9998; transition: var(--ease);
}
.scroll-to-top:hover { transform: translateY(-3px); }

/* ── Page Header (inner pages) ── */
.page-header {
  background: var(--grad-dark) !important;
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(124,58,237,.25) 0%, transparent 65%);
}
.page-header h1 { color: #fff; font-size: clamp(1.8rem,4vw,3rem); }
.breadcrumb-item a { color: rgba(255,255,255,.7) !important; }
.breadcrumb-item.active { color: rgba(255,255,255,.9) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.4) !important; }

/* ── Detailed Service Sections ── */
.detailed-service { padding: 80px 0; }
.detailed-service h2 { font-size: clamp(1.5rem,3vw,2.4rem); line-height: 1.3; }
.detailed-service ul li { font-size: .94rem; color: var(--text-body); margin-bottom: 10px; }
.detailed-service .btn { border-radius: var(--radius-pill); padding: 13px 28px; }

/* ── Utility ── */
.text-brand { color: var(--brand) !important; }
.bg-brand-light { background: var(--brand-light) !important; }
.border-brand { border-color: var(--brand) !important; }
.shadow-brand { box-shadow: var(--shadow-brand) !important; }

/* ── Responsive ── */
@media (max-width: 767px) {
  .display-5 { font-size: 1.8rem !important; }
  .display-4 { font-size: 2rem !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}