/* =========================================================
   Atta e rabi Malik | Portfolio design
   Bootstrap provides the grid, buttons, navbar, cards, forms
   and accordion classes. Styling is set on ids (and on the
   ids' children) so each part of the page can be changed alone.
   ========================================================= */

/* ---------- Theme tokens (Bootstrap dark theme) ---------- */
:root {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent: #ff6b2c;
  --accent-soft: #ff8452;
  --accent-ink: #120a06;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius: 14px;
  --section-gap: clamp(96px, 13vw, 168px);
  --pad: clamp(24px, 4vw, 48px);
}
[data-bs-theme="dark"] {
  --bs-primary: #ff6b2c;
  --bs-primary-rgb: 255, 107, 44;
  --bs-body-bg: #0b0c0e;
  --bs-body-bg-rgb: 11, 12, 14;
  --bs-body-color: #f3efe7;
  --bs-tertiary-bg: #14161a;
  --bs-tertiary-bg-rgb: 20, 22, 26;
  --bs-border-color: #2a2e36;
  --bs-secondary-color: #9b978e;
}

html { scroll-padding-top: 90px; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 90px; }
.container { --bs-gutter-x: 0; max-width: 1240px; padding-left: var(--pad); padding-right: var(--pad); }
.row > * { min-width: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.02em; }
.muted { color: var(--bs-secondary-color); }
.lead { color: var(--bs-secondary-color); }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; z-index: 2000; }

/* Long words wrap instead of pushing the page sideways */
h1, h2, h3, h4, p, li, dd, dt, figcaption { overflow-wrap: anywhere; }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-soft); --bs-btn-hover-border-color: var(--accent-soft);
  --bs-btn-active-bg: var(--accent-soft); --bs-btn-active-border-color: var(--accent-soft);
  --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-color: var(--accent-ink);
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  font-weight: 600;
}
.btn { border-radius: 999px; font-weight: 600; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-outline-light:hover { color: var(--bs-body-color); }
.btn i { transition: transform .25s var(--ease); }
.btn:hover i { transform: translate(2px, -2px); }

.icon-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.icon-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Section typography ---------- */
.section-label {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 1.1rem;
}
.section-title { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 600; line-height: 1.05; margin: 0 0 1rem; }
.section-head { margin-bottom: 3.5rem; }

/* =========================================================
   HEADER  (#site-header, #brand, #nav-toggle, #site-nav, #nav-cta)
   ========================================================= */
#site-header {
  z-index: 50;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
#site-header.is-scrolled {
  background: rgba(11, 12, 14, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-color: var(--bs-border-color);
}
#site-header .navbar { padding-top: 18px; padding-bottom: 18px; }
/* Solid background while the mobile menu is open */
#site-header:has(.navbar-collapse.show) { background: #0b0c0e; border-color: var(--bs-border-color); }

#brand { text-decoration: none; gap: .6rem; }
#brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
}
#brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--bs-body-color); }
#brand-dot { color: var(--accent); }

#nav-toggle { border: 1px solid var(--bs-border-color); border-radius: 10px; color: var(--bs-body-color); padding: .35rem .6rem; }
#nav-toggle:focus { box-shadow: none; }
#nav-toggle svg { display: block; }

#site-nav .nav-link { color: var(--bs-secondary-color); font-weight: 500; position: relative; padding: .4rem 0; }
#site-nav .nav-link:hover,
#site-nav .nav-link:focus-visible,
#site-nav .nav-link.active { color: var(--bs-body-color); }
#site-nav .nav-link:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .3s var(--ease);
}
#site-nav .nav-link:not(.btn):hover::after,
#site-nav .nav-link.active::after { width: 100%; }
#nav-cta { color: var(--accent-ink); }
#nav-cta:hover { color: var(--accent-ink); }

@media (max-width: 991.98px) {
  #site-nav { padding-bottom: 1rem; }
  #site-nav .nav-link { font-size: 1.1rem; }
}

/* =========================================================
   HERO  (#hero, #hero-title, #hero-eyebrow, #hero-code)
   ========================================================= */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 9rem;
  padding-bottom: 5rem;
}
#hero > .row { width: 100%; }
#hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .35rem .9rem;
  margin-bottom: 1.75rem;
}
.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7fe39a;
  box-shadow: 0 0 0 0 rgba(127, 227, 154, .6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 227, 154, .55); }
  70% { box-shadow: 0 0 0 9px rgba(127, 227, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 227, 154, 0); }
}
#hero-title {
  font-size: clamp(3rem, 8.2vw, 7.4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.03em;
  margin-bottom: 1.75rem;
}
#hero-title .line { display: block; animation: rise 1s var(--ease) both; }
#hero-title .line:nth-child(2) { animation-delay: .12s; }
#hero-title .line:nth-child(3) { animation-delay: .24s; }
#hero-title .accent-text { color: var(--accent); font-style: italic; }
@keyframes rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
#hero-lede { max-width: 36rem; margin-bottom: 2.25rem; }

#hero-code {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  background: var(--bs-tertiary-bg);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
#hero-code .code-bar { display: flex; gap: 7px; padding: 14px 16px; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
#hero-code .code-bar span { width: 11px; height: 11px; border-radius: 50%; background: #3a3f49; }
#hero-code pre {
  padding: 1.5rem 1.5rem 1.75rem;
  overflow-x: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .9rem;
  line-height: 1.7;
  color: #cfcac0;
  background: transparent;
}
.c-kw { color: #ff8a5c; }
.c-var { color: #ffd39b; }
.c-key { color: #9fd3ff; }
.c-str { color: #b8f06b; }
.c-num { color: #ffb4a0; }
.c-com { color: #6b6f78; }

/* =========================================================
   PROOF STRIP  (#proof, #proof-list)
   ========================================================= */
#proof { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); padding: 2.5rem 0; }
#proof-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
#proof-list span { color: var(--bs-secondary-color); font-size: .95rem; }

/* =========================================================
   SERVICES  (#services)
   ========================================================= */
#services { padding-top: var(--section-gap); }
#services .service-card {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s;
}
#services .service-card:hover { transform: translateY(-6px); border-color: var(--accent); }
#services .service-card .card-body { padding: 2rem 1.75rem; }
#services .service-icon {
  font-size: 2rem;
  color: var(--accent);
  display: inline-grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: rgba(255, 107, 44, .1);
  margin-bottom: 1.25rem;
}
#services .card h3 { font-weight: 600; margin-bottom: .5rem; }
#services .card p { color: var(--bs-secondary-color); font-size: .97rem; }

/* =========================================================
   WORK / SWIPER  (#work, #work-head, #work-swiper)
   ========================================================= */
#work {
  padding: var(--section-gap) 0;
  background: var(--bs-tertiary-bg);
  border-top: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
  margin-top: var(--section-gap);
}
#work-head { margin-bottom: 3rem; padding: 0 var(--pad); max-width: 1240px; margin-left: auto; margin-right: auto; }
#work-head .section-title { margin-bottom: 0; }
#work-controls { display: flex; gap: .75rem; }

#work-swiper { padding: 0 0 3.5rem; max-width: 1400px; margin: 0 auto; overflow: visible; }
#work-swiper .swiper-slide { height: auto; display: flex; }
#work-swiper .project {
  flex-direction: column;
  width: 100%;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .35s, transform .35s var(--ease);
}
#work-swiper .project:hover { border-color: var(--hue, var(--accent)); transform: translateY(-4px); }
#work-swiper .mock {
  aspect-ratio: 16 / 10;
  background: #1b1e24;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  flex-direction: column;
}
#work-swiper .mock-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--bs-border-color); }
#work-swiper .mock-bar span { width: 8px; height: 8px; border-radius: 50%; background: #3a3f49; }
#work-swiper .mock-body { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
#work-swiper .mock-title { display: block; height: 26px; width: 62%; border-radius: 6px; background: var(--hue, var(--accent)); }
#work-swiper .mock-line { display: block; height: 8px; width: 90%; border-radius: 4px; background: #303540; }
#work-swiper .mock-line.short { width: 55%; }
#work-swiper .mock-block {
  display: block; flex: 1; min-height: 60px; border-radius: 8px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--hue, var(--accent)) 35%, transparent), transparent 70%), #242830;
}
#work-swiper .mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; }
#work-swiper .mock-grid span { border-radius: 8px; background: #262b34; }
#work-swiper .mock-grid span:first-child { background: color-mix(in srgb, var(--hue, var(--accent)) 45%, #262b34); }
#work-swiper .project-meta { padding: 1.6rem 1.6rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
#work-swiper .project-kind { font-size: .8rem; color: var(--hue, var(--accent)); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; margin: 0 0 .5rem; }
#work-swiper .project h3 { font-weight: 600; margin-bottom: .6rem; }
#work-swiper .project p { color: var(--bs-secondary-color); font-size: .95rem; margin-bottom: 1.25rem; }
#work-swiper .project .badge { background: transparent !important; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); font-weight: 400; }
#work-swiper .project .ai-chip { border-color: var(--accent); color: var(--accent); }
#work-swiper .project-actions { background: transparent; border-top: 0; padding: 0 1.6rem 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
#work-swiper .project-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
#work-swiper .project-link:hover { color: var(--accent); }
#work-swiper .project-link-alt { color: var(--accent); }
.swiper-pagination-bullet { background: var(--bs-secondary-color); opacity: .5; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; width: 22px; border-radius: 6px; }

/* =========================================================
   STACK  (#stack, #stack-grid, .stack-item)
   ========================================================= */
#stack { padding-top: var(--section-gap); }
#stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--bs-border-color);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  overflow: hidden;
}
#stack-grid .stack-item {
  background: var(--bs-body-bg);
  padding: 1.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  transition: background-color .25s;
}
#stack-grid .stack-item:hover { background: var(--bs-tertiary-bg); }
#stack-grid .stack-item i { font-size: 3rem; line-height: 1; }
#stack-grid .stack-item span { font-size: .9rem; color: var(--bs-secondary-color); }
@media (min-width: 768px) { #stack-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { #stack-grid { grid-template-columns: repeat(8, 1fr); } }

/* =========================================================
   PROCESS  (#process, .step)
   ========================================================= */
#process { padding-top: var(--section-gap); }
#process .step { border-top: 1px solid var(--bs-border-color); padding-top: 2rem; }
#process .step-num { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--accent); font-weight: 600; margin-bottom: 1rem; }
#process .step h3 { font-weight: 600; margin-bottom: .75rem; }
#process .step p { color: var(--bs-secondary-color); max-width: 30rem; }

/* =========================================================
   CTA BAND  (#cta-band, #cta-inner)
   ========================================================= */
#cta-band { padding-top: var(--section-gap); }
#cta-band .cta-inner {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
}
#cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; }

/* =========================================================
   FOOTER  (#site-footer, #footer-name, #footer-row, #footer-links)
   ========================================================= */
#site-footer {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--bs-border-color);
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  overflow: hidden;
}
#footer-name {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.05em;
  margin: 0 0 2.5rem;
  color: var(--bs-tertiary-bg);
  white-space: nowrap;
  overflow: hidden;
}
#footer-links .nav-link { color: var(--bs-secondary-color); }
#footer-links .nav-link:hover { color: var(--accent); }
#back-top:hover { color: var(--accent) !important; }
.muted { color: var(--bs-secondary-color); }

/* =========================================================
   INNER PAGES: page hero, case studies, contact, FAQ
   ========================================================= */
.page-hero { padding-top: 9rem; padding-bottom: 2.5rem; }
.page-title { font-size: clamp(2.8rem, 6.4vw, 5.6rem); font-weight: 600; max-width: 16ch; margin-bottom: 1.5rem; line-height: 1; }

/* Card surfaces used on inner pages */
.card.bg-body-tertiary { border-color: var(--bs-border-color) !important; }
.card.lift, .lift { transition: transform .3s var(--ease), border-color .3s ease; }
.lift:hover { transform: translateY(-4px); border-color: var(--accent) !important; }
.badge.rounded-pill.text-bg-dark { background-color: transparent !important; }
.chip-icon { font-size: 1rem; line-height: 1; }

/* Inner-page cards: case study index and about */
.text-bg-primary { background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.text-primary { color: var(--accent) !important; }

/* Case study pages (#case-header, #case-gallery, #case-pager, #case-cta) */
#case-header .display-4 { line-height: 1.05; }
#case-gallery { margin-top: 0; }
.case-gallery {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.case-gallery img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
}
#case-pager .btn { min-width: 12rem; }

/* Contact page (#contact-form, #faq) */
#contact-form .form-control,
#contact-form .form-select {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  border-radius: 10px;
  padding: .75rem .95rem;
  min-width: 0;
  max-width: 100%;
}
#contact-form .form-control:focus,
#contact-form .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(255, 107, 44, .2);
}
#contact-form .form-control::placeholder { color: #5c606a; }
#contact-form textarea.form-control { resize: vertical; min-height: 140px; }
#contact-form .form-label { font-size: .85rem; color: var(--bs-secondary-color); margin-bottom: .4rem; }
#faq .accordion-item { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); margin-bottom: .75rem; border-radius: var(--radius) !important; overflow: hidden; }
#faq .accordion-button { background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
#faq .accordion-button:not(.collapsed) { color: var(--accent); box-shadow: none; }
#faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255, 107, 44, .2); }
#faq .accordion-body { color: var(--bs-secondary-color); }

.list-group-item { border-color: var(--bs-border-color) !important; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* Reveal and reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #services .service-card:hover, #work-swiper .project:hover, .lift:hover { transform: none; }
}

/* Responsive: stack the hero and large headings on phones */
@media (max-width: 991.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  #hero { min-height: auto; padding-top: 7.5rem; }
}

/* Keep Swiper's off-screen slides inside the work section */
#work { overflow: hidden; }

/* Case study heading clears the fixed header */
#case-header { padding-top: 9rem !important; }

/* =========================================================
   MODERN REFRESH
   Background texture, glass-style surfaces, cursor spotlight,
   gradient accents, WhatsApp widget, live-status dot.
   ========================================================= */

html { scrollbar-color: #2a2e36 #0b0c0e; }

/* Soft glow plus a faint grid behind the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(255, 107, 44, .17), transparent 62%),
    radial-gradient(760px 480px at -12% 38%, rgba(124, 196, 255, .07), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 55%, transparent 100%);
}

/* Section labels get a leading rule */
.section-label::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: .65rem;
}

/* Headline accent as gradient text */
#hero-title .accent-text {
  background: linear-gradient(115deg, #ff8a5c 10%, #ffd39b 90%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Buttons: a warm glow on the primary action */
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: 0 14px 36px -12px rgba(255, 107, 44, .75);
}

/* Glass-style surfaces */
#services .service-card,
#cta-band .cta-inner,
#faq .accordion-item,
.card.bg-body-tertiary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%);
}
#services .service-card:hover {
  box-shadow: 0 24px 60px -28px rgba(255, 107, 44, .45);
}

/* Proof strip: calmer and more even */
#proof { background: rgba(20, 22, 26, .35); }
#proof-list strong { background: linear-gradient(180deg, #f3efe7 40%, #9b978e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Stack: rounded tiles instead of a hairline grid */
#stack-grid {
  gap: 12px;
  background: transparent;
  border: 0;
  overflow: visible;
}
#stack-grid .stack-item {
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  background: var(--bs-tertiary-bg);
}
#stack-grid .stack-item:hover {
  border-color: rgba(255, 107, 44, .5);
  transform: translateY(-3px);
  transition: transform .3s var(--ease), border-color .3s, background-color .25s;
}

/* Process steps */
#process .step { position: relative; }
#process .step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Cursor spotlight on cards (JS sets --mx and --my) */
#services .card,
#work-swiper .project,
#stack-grid .stack-item,
#cta-band .cta-inner {
  isolation: isolate;
}
#services .card::before,
#work-swiper .project::before,
#stack-grid .stack-item::before,
#cta-band .cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 44, .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
  z-index: -1;
}
#services .card:hover::before,
#work-swiper .project:hover::before,
#stack-grid .stack-item:hover::before,
#cta-band .cta-inner:hover::before { opacity: 1; }

/* Project cards: a clearer top edge in the project's colour */
#work-swiper .project .mock { position: relative; }
#work-swiper .project .mock::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--hue, var(--accent));
  opacity: .8;
}

/* Footer name reads as a quiet watermark */
#footer-name { color: #15171c; }

/* Live status dot (contact page) */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7fe39a;
  box-shadow: 0 0 0 0 rgba(127, 227, 154, .6);
  animation: pulse 2.4s infinite;
  vertical-align: middle;
}

/* Case study screenshots: lift on hover */
.case-gallery img {
  transition: transform .4s var(--ease), box-shadow .4s;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.case-gallery img:hover { transform: translateY(-4px); }

/* =========================================================
   WHATSAPP WIDGET  (#wa-widget, .wa-btn, .wa-label)
   ========================================================= */
#wa-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
}
#wa-widget .wa-btn {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2rem;
  box-shadow: 0 14px 32px -10px rgba(37, 211, 102, .7);
  transition: transform .25s var(--ease);
}
#wa-widget .wa-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: wa-ping 2.4s infinite;
}
#wa-widget:hover .wa-btn,
#wa-widget:focus-visible .wa-btn { transform: scale(1.06); }
#wa-widget:focus-visible { outline: none; }
#wa-widget:focus-visible .wa-btn { outline: 2px solid #fff; outline-offset: 3px; }
#wa-widget .wa-label {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .5rem .95rem;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .3s, transform .3s var(--ease);
  animation: wa-hint 8s ease 1.5s forwards;
}
#wa-widget:hover .wa-label,
#wa-widget:focus-visible .wa-label {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes wa-ping {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes wa-hint {
  0%   { opacity: 0; transform: translateX(10px); }
  8%   { opacity: 1; transform: none; }
  85%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(10px); }
}
@media (max-width: 575.98px) {
  #wa-widget { right: 14px; bottom: 14px; }
  #wa-widget .wa-label { display: none; }
  #wa-widget .wa-btn { width: 56px; height: 56px; font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  #wa-widget .wa-btn::after { animation: none; }
  #wa-widget .wa-label { animation: none; opacity: 0; }
}

#cta-band .cta-inner { position: relative; }

/* =========================================================
   Micro-interactions, pricing and currency picker (added)
   ========================================================= */

/* Scroll progress bar */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  z-index: 1100; pointer-events: none;
}

/* Button ripple */
.btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: rgba(255, 255, 255, .35);
  transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(18); opacity: 0; } }

/* Magnetic buttons and 3D tilt cards (JS sets the inline transform) */
.btn-primary, .btn-outline-light { transition: transform .25s var(--ease), background-color .25s, color .25s; }
.tilt { transition: transform .45s var(--ease), border-color .3s ease; will-change: transform; }
#services .service-card .service-icon { display: inline-block; transition: transform .45s var(--ease); }
#services .service-card:hover .service-icon { transform: rotate(-8deg) scale(1.12); }
#hero-title .accent-text { background-size: 200% auto; }

/* Stat count-up */
#proof-list strong { font-variant-numeric: tabular-nums; }

/* Copy toast */
.toast-note {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 24px);
  background: var(--accent); color: var(--accent-ink); padding: .6rem 1.2rem;
  border-radius: 999px; font-weight: 600; font-size: .9rem;
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease);
  z-index: 1200; pointer-events: none;
}
.toast-note.show { opacity: 1; transform: translate(-50%, 0); }

/* Currency picker in the nav */
#currency-select {
  background-color: var(--bs-tertiary-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 999px;
  font-size: .85rem; font-weight: 500; padding: .35rem 2.2rem .35rem .9rem; width: auto;
  cursor: pointer; transition: border-color .25s ease;
}
#currency-select:hover, #currency-select:focus { border-color: var(--accent); box-shadow: none; }
#currency-select option { background: #14161a; color: #f3efe7; }

/* Prices */
.price-prefix { color: var(--bs-secondary-color); font-size: .9rem; }
.price-from { font-size: .95rem; color: var(--bs-secondary-color); margin: 1.1rem 0 0; }
.price-from .price { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.price-note { font-size: .85rem; color: var(--bs-secondary-color); }
.price-save { color: var(--accent); font-size: .9rem; font-weight: 600; margin: .4rem 0 0; }

.price-card {
  position: relative; background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color); border-radius: var(--radius);
  padding: 2rem 1.75rem; height: 100%; display: flex; flex-direction: column;
}
.price-card:hover { border-color: var(--accent); }
.price-card.featured { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.price-card h3 { font-weight: 600; margin-bottom: .5rem; }
.price-card .price-big {
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 600; line-height: 1; margin-top: 1.25rem;
}
.price-card .price-desc { color: var(--bs-secondary-color); font-size: .95rem; margin: .75rem 0 0; }
.price-card ul { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.price-card li {
  position: relative; padding: .55rem 0 .55rem 1.6rem; font-size: .93rem;
  color: var(--bs-secondary-color); border-top: 1px solid var(--bs-border-color);
}
.price-card li::before {
  content: ""; position: absolute; left: .15rem; top: .95rem; width: .6rem; height: .35rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.badge-pop {
  position: absolute; top: -12px; right: 1.5rem; background: var(--accent); color: var(--accent-ink);
  font-size: .72rem; font-weight: 700; padding: .3rem .8rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .08em;
}
.price-list-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.25rem 0; border-top: 1px solid var(--bs-border-color);
  transition: padding-left .3s var(--ease);
}
.price-list-row:hover { padding-left: .6rem; }
.price-list-row .price-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.price-list-row .price-desc { color: var(--bs-secondary-color); font-size: .92rem; margin: .2rem 0 0; }
.price-list-row .price {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; color: var(--accent);
}
.price-list-row .price-unit { color: var(--bs-secondary-color); font-size: .85rem; }

/* Reduced motion: keep content, drop movement */
@media (prefers-reduced-motion: reduce) {
  #scroll-progress { display: none; }
  .ripple { display: none; }
  .tilt, .btn, .price-list-row, #services .service-card .service-icon { transition: none !important; }
  .tilt { transform: none !important; }
}

/* Stack page groups */
.stack-group { margin-bottom: 3.5rem; }
.stack-group-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; margin-bottom: 1.25rem; color: var(--bs-secondary-color); text-transform: uppercase; font-size: .85rem !important; letter-spacing: .12em; }
.stack-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--bs-border-color); border: 1px solid var(--bs-border-color);
  border-radius: var(--radius); overflow: hidden;
}
.stack-grid .stack-item {
  background: var(--bs-body-bg); padding: 1.75rem 1rem; display: flex; flex-direction: column;
  align-items: center; gap: .75rem; transition: background-color .25s;
}
.stack-grid .stack-item:hover { background: var(--bs-tertiary-bg); }
.stack-grid .stack-item i { font-size: 3rem; line-height: 1; }
.stack-grid .stack-item span { font-size: .9rem; color: var(--bs-secondary-color); }
@media (min-width: 768px) { .stack-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .stack-grid { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Mobile card fixes ---------- */
@media (max-width: 639.98px) {
  #work-swiper .project-meta { padding: 1.25rem 1.25rem 1rem; }
  #work-swiper .project-actions { padding: 0 1.25rem 1.25rem; }
  #work-swiper .project h3 { font-size: 1.25rem; }
  #services .service-card .card-body { padding: 1.5rem 1.25rem; }
  #services .service-icon { font-size: 1.75rem; }
  .price-card { padding: 1.5rem 1.25rem; }
  .price-list-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .price-list-row .text-end { text-align: left !important; }
}

/* Hover lifts only on devices that really hover, so a tap does not leave a card stuck up */
@media (hover: none) {
  #services .service-card:hover,
  #work-swiper .project:hover,
  .tilt:hover {
    transform: none !important;
    box-shadow: none;
  }
  #work-swiper .project:hover { border-color: var(--bs-border-color); }
  #services .service-card:hover { border-color: var(--bs-border-color); }
}