/* ─────────────────────────────────────────────────────────────────────────
   PWLSoft — Bootstrap 5.3 brand overrides + custom components
   Only things Bootstrap can't handle natively
───────────────────────────────────────────────────────────────────────── */

/* ── BOOTSTRAP VARIABLE OVERRIDES ─────────────────────────────────── */
:root {
  --bs-body-font-family:   'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color:         #18181B;
  --bs-body-bg:            #ffffff;
  --bs-primary:            #2563EB;
  --bs-primary-rgb:        37, 99, 235;
  --bs-dark:               #09090B;
  --bs-dark-rgb:           9, 9, 11;
  --bs-secondary-color:    #71717A;
  --bs-border-color:       #E4E4E7;
  --bs-light:              #F4F4F5;
  --bs-light-rgb:          244, 244, 245;
  --bs-border-radius:      10px;
  --bs-border-radius-lg:   16px;
  --bs-box-shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --bs-box-shadow:         0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
  --bs-box-shadow-lg:      0 12px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);
}

/* ── BASE ──────────────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

h1, h2 { font-weight: 800 !important; letter-spacing: -.04em !important; }
h3     { font-weight: 700 !important; letter-spacing: -.02em !important; }
h4     { font-weight: 700 !important; letter-spacing: -.01em !important; }

.text-blue    { color: #2563EB !important; }
.bg-blue-sub  { background-color: #EFF6FF !important; }
.border-blue  { border-color: #DBEAFE !important; }

/* Extra spacing utilities */
.py-section { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
.pt-hero    { padding-top: 9rem !important; }

/* ── BUTTON OVERRIDES ───────────────────────────────────────────────── */
.btn-dark {
  --bs-btn-bg: #09090B;
  --bs-btn-border-color: #09090B;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
  font-weight: 600;
}
.btn-outline-secondary {
  --bs-btn-color: #18181B;
  --bs-btn-border-color: #E4E4E7;
  --bs-btn-hover-bg: #F4F4F5;
  --bs-btn-hover-border-color: #18181B;
  --bs-btn-hover-color: #09090B;
  font-weight: 600;
}
.btn-primary {
  --bs-btn-bg: #2563EB;
  --bs-btn-border-color: #2563EB;
  --bs-btn-hover-bg: #1D4ED8;
  --bs-btn-hover-border-color: #1D4ED8;
  font-weight: 600;
}
.btn { border-radius: 10px !important; }

/* ── NAVBAR ─────────────────────────────────────────────────────────── */
.navbar {
  height: 64px;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: box-shadow .2s;
}
.navbar.scrolled { box-shadow: 0 1px 0 #E4E4E7 !important; }

.navbar-nav .nav-link {
  font-size: .875rem !important; font-weight: 500 !important;
  color: #71717A !important; border-radius: 6px;
  padding: .4rem .75rem !important; transition: all .15s;
}
.navbar-nav .nav-link:hover { color: #09090B !important; background: #F4F4F5; }

/* Lang toggle */
.lang-toggle {
  display: flex; overflow: hidden;
  border: 1px solid #E4E4E7; border-radius: 6px;
}
.lang-btn {
  padding: .3rem .65rem; background: none; border: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: #A1A1AA; cursor: pointer; transition: all .15s;
}
.lang-btn.active  { background: #09090B; color: #fff; }
.lang-btn:hover:not(.active) { color: #18181B; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero-dot-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .45;
  background-image: radial-gradient(circle, #d4d4d8 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, black 20%, transparent 80%);
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .85rem; margin-bottom: 1.75rem;
  border: 1px solid #E4E4E7; border-radius: 100px;
  font-size: .78rem; font-weight: 600; color: #71717A;
  background: #fff; box-shadow: var(--bs-box-shadow-sm);
}
.dot-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2563EB; display: inline-block;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.hero-stat-num   { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; color: #09090B; }
.hero-stat-label { font-size: .75rem; color: #A1A1AA; margin-top: .1rem; }

/* ── CODE CARD ───────────────────────────────────────────────────────── */
.code-card {
  background: #09090B; border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: .77rem; line-height: 1.65;
}
.code-topbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .85rem 1.25rem;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ctd { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ctd.r { background: #FF5F57; }
.ctd.y { background: #FEBC2E; }
.ctd.g { background: #28C840; }
.code-filename { margin-left: auto; color: #6B7280; font-size: .72rem; }
.code-body  { padding: 1.4rem 1.5rem; color: #e2e8f0; }
.code-line  { margin-bottom: .12rem; }
.ck { color: #C792EA; } .cc { color: #FFCB6B; } .ca { color: #F78C6C; }
.cs { color: #C3E88D; } .cm { color: #546E7A; font-style:italic; }
.cf { color: #82AAFF; } .ct { color: #4FC1FF; }

/* ── SECTION LABEL ───────────────────────────────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #2563EB; margin-bottom: .75rem;
}
.section-label::before {
  content: ''; width: 16px; height: 2px;
  background: #2563EB; border-radius: 2px;
}

/* ── CLIENTS ─────────────────────────────────────────────────────────── */
.clients-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  border: 1px solid #E4E4E7; border-radius: 12px; overflow: hidden;
}
.client-item {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 1.4rem 2rem; cursor: default;
  border-right: 1px solid #E4E4E7; transition: background .2s; flex: 1; min-width: 140px;
}
.client-item:last-child { border-right: none; }
.client-item:hover { background: #fff; }
.client-logo {
  height: 26px; display: flex; align-items: center;
  filter: grayscale(1); opacity: .38; transition: all .25s;
}
.client-item:hover .client-logo { filter: none; opacity: 1; }
.client-sector { font-size: .65rem; color: #A1A1AA; text-transform: uppercase; letter-spacing: .04em; font-weight: 500; }

/* ── SERVICES GRID ───────────────────────────────────────────────────── */
.service-cell { padding: 2rem; transition: background .2s; }
.service-cell:hover { background: #FAFAFA; }
.service-cell:nth-child(-n+2) { border-bottom: 1px solid #E4E4E7; }
.service-cell:nth-child(odd)  { border-right: 1px solid #E4E4E7; }

@media (max-width: 768px) {
  .service-cell:nth-child(odd)  { border-right: none; }
  .service-cell:nth-child(-n+2) { border-bottom: none; }
  .service-cell                 { border-bottom: 1px solid #E4E4E7; }
  .service-cell:last-child      { border-bottom: none; }
}

.service-num {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: #A1A1AA; margin-bottom: 1rem;
}
.service-icon-box {
  width: 44px; height: 44px; background: #fff;
  border: 1px solid #E4E4E7; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #18181B; margin-bottom: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
}

/* ── TECH PILLS ──────────────────────────────────────────────────────── */
.tech-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; background: #fff;
  border: 1px solid #E4E4E7; border-radius: 100px;
  font-size: .82rem; font-weight: 600; color: #18181B;
  box-shadow: var(--bs-box-shadow-sm);
  transition: all .15s; cursor: default; white-space: nowrap;
  text-decoration: none;
}
.tech-pill:hover { border-color: #2563EB; color: #2563EB; transform: translateY(-1px); }
.tech-cat-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #A1A1AA;
  padding-bottom: .6rem; margin-bottom: .85rem;
  border-bottom: 1px solid #E4E4E7;
}

/* ── AI CARDS ────────────────────────────────────────────────────────── */
.ai-feat-card {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 12px;
  padding: 1.25rem; display: flex; align-items: flex-start; gap: .9rem;
  box-shadow: var(--bs-box-shadow-sm); transition: all .2s;
}
.ai-feat-card:hover { box-shadow: var(--bs-box-shadow); transform: translateY(-2px); }
.ai-feat-icon {
  width: 40px; height: 40px; flex-shrink: 0; background: #EFF6FF;
  border: 1px solid #DBEAFE; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #2563EB;
}
.ai-num-val   { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: #09090B; }
.ai-num-label { font-size: .72rem; color: #A1A1AA; margin-top: .1rem; }

/* ── CONTACT ─────────────────────────────────────────────────────────── */
.contact-line {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1.1rem; background: #fff;
  border: 1px solid #E4E4E7; border-radius: 10px;
  box-shadow: var(--bs-box-shadow-sm);
}
.contact-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: #F4F4F5; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #52525B;
}

/* ── FORM OVERRIDES ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: #E4E4E7 !important; font-size: .875rem; border-radius: 8px !important;
}
.form-control:focus, .form-select:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}
.form-label { font-size: .78rem; font-weight: 600; color: #18181B; margin-bottom: .3rem; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.footer-col-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: #A1A1AA; margin-bottom: .85rem;
}
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { font-size: .85rem; color: #71717A; text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #09090B; }

/* ── PROJECT CARDS ───────────────────────────────────────────────────── */
.project-card {
  background: #fff; border: 1px solid #E4E4E7; border-radius: var(--bs-border-radius-lg);
  padding: 1.75rem; box-shadow: var(--bs-box-shadow-sm); transition: all .2s;
}
.project-card:hover {
  border-color: #D4D4D8; box-shadow: var(--bs-box-shadow); transform: translateY(-3px);
}
.project-card--ai {
  border-color: #DBEAFE; background: linear-gradient(135deg, #fff 60%, #EFF6FF);
}
.project-card--ai:hover { border-color: #BFDBFE; }

.project-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; background: #F4F4F5;
  border: 1px solid #E4E4E7; border-radius: 100px;
  font-size: .72rem; font-weight: 700; color: #52525B; letter-spacing: .02em;
}
.project-badge--ai { background: #EFF6FF; border-color: #DBEAFE; color: #2563EB; }

.project-year { font-size: .72rem; color: #A1A1AA; font-weight: 500; }

.project-meta {
  display: flex; gap: 1rem;
  font-size: .72rem; color: #A1A1AA; font-weight: 500;
  padding-top: .75rem; border-top: 1px solid #F4F4F5;
}

/* ── COOKIE BANNER ───────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050;
  background: #fff; border-top: 1px solid #E4E4E7;
  padding: 1rem 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.07);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner-icon { font-size: 1.35rem; color: #A1A1AA; flex-shrink: 0; }

/* ── SCROLL ANIMATIONS ───────────────────────────────────────────────── */
.pwl-fade {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.pwl-fade.visible { opacity: 1; transform: none; }
.pwl-fade.d1 { transition-delay: .08s; }
.pwl-fade.d2 { transition-delay: .16s; }
.pwl-fade.d3 { transition-delay: .24s; }

/* ── MOBILE ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  h1 { font-size: 2.25rem !important; }
  .clients-row { flex-direction: column; border-radius: 0; border-left: none; border-right: none; }
  .client-item { border-right: none !important; border-bottom: 1px solid #E4E4E7; flex-direction: row; justify-content: flex-start; }
  .client-item:last-child { border-bottom: none; }
}