/* ============================================================
   BLUEPEAK TECH — Homepage stylesheet
   Built from: 1-context/design system/design-system-v4.md
               1-context/design system/layout-and-structure.md
   Light enterprise-fintech theme · ruled-grid · #1818F0 accent
   Headings: Space Grotesk · Body: Manrope
   ============================================================ */

:root {
  /* brand */
  --primary:        #1818F0;
  --primary-ink:    #FFFFFF;
  /* ink */
  --ink-900:        #061B31;
  --ink-700:        #2D2564;
  --ink-600:        #50617A;
  --ink-500:        #64748D;
  /* surface */
  --bg:             #FFFFFF;
  --bg-subtle:      #F8FAFD;
  --border:         #E5EDF5;
  /* primary tints */
  --primary-border: #B9B9F9;
  --primary-faint:  #D6D9FC;
  --primary-wash:   rgba(24,24,240,0.08);

  /* accent palette — analogous cool range, one hue per card */
  --acc-1:      #1818F0;  --acc-1-bg: #EFF0FE;  --acc-1-wash: rgba(24,24,240,0.06);
  --acc-2:      #7C3AED;  --acc-2-bg: #F4EFFE;  --acc-2-wash: rgba(124,58,237,0.06);
  --acc-3:      #0284C7;  --acc-3-bg: #ECF5FC;  --acc-3-wash: rgba(2,132,199,0.06);
  --acc-4:      #0F9D8C;  --acc-4-bg: #EAF8F4;  --acc-4-wash: rgba(15,157,140,0.07);

  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --r-control: 4px;
  --r-media:   6px;

  --max-w: 1266px;
  --col-pad: 17px;

  /* legacy aliases — let old inline var() references resolve to the new theme */
  --color-accent:     #1818F0;
  --color-white:      #FFFFFF;
  --text-primary:     #061B31;
  --text-secondary:   #50617A;
  --text-muted:       #64748D;
  --bg-primary:       #FFFFFF;
  --bg-surface:       #F8FAFD;
}

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

html { scroll-behavior: smooth; }

body,
body.page-glow {
  background: var(--bg);
  color: var(--ink-600);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* the old dark grid overlay is not used in the light theme */
.grid-overlay { display: none; }

/* ============ RULED-GRID COLUMN ============================ */
/* Continuous L/R hairline rails running the full page height.   */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--col-pad);
  border-inline: 1px solid var(--border);
}

/* horizontal rule between stacked sections */
.section,
.ind-section,
.testi-section,
.bottom-cta-section,
.sf-footer { position: relative; }

.section > .container,
.ind-section > .container,
.testi-section > .container,
.bottom-cta-section > .bottom-cta-inner,
.sf-footer > .container { border-top: 1px solid var(--border); }

/* no top divider on these sections */
.bg-surface > .container { border-top: 0; }

/* vertical rhythm — padding lives on the container so the L/R rails
   stay continuous (unbroken) from one section to the next */
.section > .container { padding-block: 80px; }
.bg-surface { background: var(--bg-subtle); }

/* ============ TYPOGRAPHY HELPERS ========================== */
/* SECTION-HEADER SPACING SYSTEM (reuse on every page):
     eyebrow → title  = 12px   (.section-eyebrow margin-bottom)
     title   → button = 24px   (title heading + .btn margin-top)
   Documented in: 1-context/design system/design-system-v4.md */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;            /* eyebrow → title */
}

/* title → button = 24px (works for any section header that has a CTA) */
.section-title + .btn,
.who-heading   + .btn,
.ind-heading   + .btn,
.testi-heading + .btn,
.bottom-cta-title + .btn { margin-top: 24px; }

.section-title,
.who-heading,
.ind-heading,
.testi-heading,
.bottom-cta-title {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--ink-900);
  font-size: 32px;
  line-height: 1.1;          /* 35.2 / 32 */
  letter-spacing: -0.64px;
}

/* ============ BUTTONS ====================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s, border-color .15s, color .18s, filter .18s;
}
.btn svg { width: 14px; height: 14px; }

.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}
.btn-primary:hover { filter: brightness(0.94); }

.btn-secondary {
  background: rgba(255,255,255,0.65);
  color: var(--primary);
  border-color: var(--primary-border);
}
.btn-secondary:hover { background: var(--primary-wash); }

.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
.btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }

/* ============ NAV ========================================= */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w);                 /* match content + footer column */
  margin-inline: auto;
  height: 76px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0;                              /* no side padding — content sits flush to the column edges */
}
.nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-logo img { height: 20px; width: auto; }   /* keep ratio */

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  padding: 12px 0;
}
.nav-link:hover { color: var(--primary); }
.nav-link svg { width: 12px; height: 12px; }

/* dropdown */
.mega-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  box-shadow: 0 30px 60px -30px rgba(50,50,93,0.25);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-item:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-inner { display: flex; flex-direction: column; }
.mega-menu-inner a {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink-600);
  border-radius: var(--r-control);
}
.mega-menu-inner a:hover { background: var(--bg-subtle); color: var(--ink-900); }

.nav-cta { margin-left: auto; display: flex; gap: 8px; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 22px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: .2s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile nav */
.mobile-nav {
  position: fixed;
  inset: 76px 0 0 0;
  background: #fff;
  z-index: 99;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-accordion-toggle,
.mobile-nav-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px;
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 500; color: var(--ink-900);
  border-bottom: 1px solid var(--border);
}
.mobile-accordion-body { display: none; flex-direction: column; padding: 4px 0 8px 4px; }
.mobile-accordion-body.open { display: flex; }
.mobile-service-link { display: flex; align-items: center; gap: 8px; padding: 10px 4px; font-size: 15px; color: var(--ink-600); }
.mobile-nav-footer { padding-top: 24px; }

/* ============ HERO ======================================== */
.hero > .container { padding-block: 96px 80px; }
.hero .container { border-top: 0; }     /* sits under nav, no top rule */

/* gradient wave (service-page heroes) — ported from Figma node 1:201315.
   Each page gets its own SHAPE + STYLE as well as colorway:
     A cool  → sharp diagonal ribbon          (web & mobile)
     B warm  → soft corner aurora cloud        (QA & testing)
     C fresh → elongated curved lens / sweep   (IT consulting) */
.hero--wave { position: relative; overflow: hidden; isolation: isolate; }
.hero--wave > .container { position: relative; z-index: 1; }
.hero-wave {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform-origin: center;
}

/* A · COOL — a crisp, thin diagonal RIBBON crossing behind the headline */
.hero-wave--cool {
  left: -14%;
  right: -14%;
  top: 28%;
  height: clamp(140px, 15vw, 210px);
  transform: rotate(-13deg);
  filter: blur(22px) saturate(1.08);
  opacity: 0.92;
  background:
    radial-gradient(40% 150% at 50% 50%, rgba(144,224,255,1) 0%, rgba(144,224,255,0) 58%),
    radial-gradient(34% 150% at 20% 55%, rgba(244,114,182,0.8) 0%, rgba(244,114,182,0) 58%),
    radial-gradient(44% 160% at 84% 46%, rgba(169,96,238,1) 0%, rgba(169,96,238,0) 60%),
    linear-gradient(95deg, #4f46e5 0%, #6d28d9 20%, #22d3ee 50%, #4f46e5 73%, #7c3aed 100%);
}

/* B · WARM — a large, diffuse AURORA CLOUD anchored to the top-right corner */
.hero-wave--warm {
  right: -14%;
  top: -42%;
  width: 78%;
  height: 165%;
  border-radius: 50%;
  transform: rotate(12deg);
  filter: blur(78px) saturate(1.12);
  opacity: 0.82;
  background:
    radial-gradient(58% 58% at 52% 44%, rgba(255,203,87,0.98) 0%, rgba(255,203,87,0) 60%),
    radial-gradient(54% 54% at 30% 64%, rgba(255,51,61,0.72) 0%, rgba(255,51,61,0) 60%),
    radial-gradient(60% 60% at 72% 34%, rgba(169,96,238,0.98) 0%, rgba(169,96,238,0) 62%),
    radial-gradient(52% 52% at 64% 72%, rgba(144,224,255,0.6) 0%, rgba(144,224,255,0) 60%);
}

/* C · FRESH — an elongated, curved LENS sweeping the opposite diagonal */
.hero-wave--fresh {
  left: -10%;
  right: -10%;
  top: 6%;
  height: clamp(240px, 32vw, 440px);
  border-radius: 46% 54% 50% 50% / 62% 60% 40% 38%;
  transform: rotate(15deg);
  filter: blur(46px) saturate(1.1);
  opacity: 0.78;
  background:
    radial-gradient(40% 120% at 48% 50%, rgba(110,231,183,1) 0%, rgba(110,231,183,0) 60%),
    radial-gradient(34% 120% at 22% 55%, rgba(16,185,129,0.9) 0%, rgba(16,185,129,0) 60%),
    radial-gradient(44% 130% at 84% 46%, rgba(56,189,248,0.95) 0%, rgba(56,189,248,0) 62%),
    linear-gradient(95deg, #10b981 0%, #14b8a6 26%, #2dd4bf 50%, #0ea5e9 76%, #6366f1 100%);
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.15;            /* 55.2 / 48 */
  letter-spacing: -0.96px;
  color: var(--ink-900);
  max-width: 900px;
}
.hero-title .serif { color: var(--primary); font-style: normal; }

.hero-subtitle {
  font-size: 20px;
  line-height: 1.4;            /* 28 / 20 */
  letter-spacing: -0.2px;
  color: var(--ink-600);
  max-width: 680px;
  margin-top: 24px;
}
.hero-actions { margin-top: 32px; }

/* service cards as a ruled 3-cell row */
.benefits-grid.hero-cards,
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  overflow: hidden;
}
.benefits-grid.hero-cards .svc-card,
.cards-grid-3 .svc-card {
  border-right: 1px solid var(--border);
}
.benefits-grid.hero-cards .svc-card:last-child,
.cards-grid-3 .svc-card:last-child { border-right: 0; }

.svc-card {
  background: #fff;
  display: flex;
  flex-direction: column;
}
/* clickable service cards (hero) */
a.svc-card { color: inherit; transition: background .15s; }
a.svc-card:hover { background: var(--bg-subtle); }
a.svc-card:hover .svc-card__title { color: var(--primary); }
.svc-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.svc-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--ink-900);
}
.svc-card__desc { font-size: 16px; line-height: 1.45; color: var(--ink-600); }
.svc-card__list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.svc-card__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-900);
}
.svc-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* ============ WHO WE ARE ================================== */
.who-header { max-width: 720px; margin-bottom: 48px; }
.who-sub { font-size: 20px; line-height: 1.4; color: var(--ink-600); margin-top: 16px; }

.who-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  overflow: hidden;
}
.who-card {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border);
  background: #fff;
}
.who-card:last-child { border-right: 0; }
.who-card-num {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.who-card-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--ink-900);
}
.who-card-desc { font-size: 15px; line-height: 1.5; color: var(--ink-600); }

/* logo marquee */
.who-logos {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  padding-top: 32px;
}
.who-logos__track {
  display: flex;
  align-items: center;
  gap: 72px;
  animation: bp-marquee 32s linear infinite;
  width: max-content;
}
.who-logo { height: 48px; width: auto; flex-shrink: 0; }
@keyframes bp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ INDUSTRIES ================================== */
.ind-section { background: var(--bg-subtle); }
.ind-section > .container { padding-block: 80px; }
.ind-bg { display: none; }   /* drop the dark photo background for the light theme */
.ind-header { display: flex; flex-direction: column; }
.ind-header .btn { align-self: center; }

.ind-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  overflow: hidden;
  background: #fff;
}
.ind-card {
  position: relative;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.ind-card:nth-child(2n) { border-right: 0; }
.ind-card:nth-last-child(-n+2) { border-bottom: 0; }
/* colored top accent bar — extends on hover */
.ind-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px;
  height: 3px;
  background: var(--c, var(--primary));
  transition: width .22s ease;
}
.ind-card:hover::before { width: 100%; }
/* one accent hue per card */
.ind-card:nth-child(1) { --c: var(--acc-1); }
.ind-card:nth-child(2) { --c: var(--acc-2); }
.ind-card:nth-child(3) { --c: var(--acc-3); }
.ind-card:nth-child(4) { --c: var(--acc-4); }
.ind-card:nth-child(1):hover { background: var(--acc-1-bg); }
.ind-card:nth-child(2):hover { background: var(--acc-2-bg); }
.ind-card:nth-child(3):hover { background: var(--acc-3-bg); }
.ind-card:nth-child(4):hover { background: var(--acc-4-bg); }
.ind-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--ink-900);
  transition: color .15s;
}
.ind-card:hover .ind-card__title { color: var(--c, var(--primary)); }
.ind-card__desc { font-size: 16px; line-height: 1.45; color: var(--ink-600); }

/* ============ CASE STUDIES =============================== */
.section-header-row { display: flex; margin-bottom: 8px; }
.cs-case .svc-card__body { gap: 14px; }
.cards-grid-3 .svc-card__img { aspect-ratio: 16 / 10; }

/* ============ TESTIMONIALS =============================== */
.testi-section > .container { padding-block: 80px; }
.testi-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: center;
}
.testi-image {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--border);
}
.testi-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s;
}
.testi-img.active { opacity: 1; }
.testi-content { display: flex; flex-direction: column; gap: 24px; }
.testi-slide { display: none; }
.testi-slide.active { display: block; }
.testi-quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: var(--ink-900);
}
.testi-author { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
}
.testi-author-name { font-weight: 600; color: var(--ink-900); }
.testi-author-role { font-size: 14px; color: var(--ink-500); }
.testi-nav { display: flex; gap: 8px; }
.testi-arrow {
  width: 40px; height: 40px;
  border: 1px solid var(--primary-border);
  border-radius: var(--r-control);
  display: grid; place-items: center;
  color: var(--primary);
  transition: background .15s;
}
.testi-arrow:hover { background: var(--primary-wash); }

/* ============ BOTTOM CTA ================================= */
.bottom-cta-section { background: var(--bg-subtle); }
.bottom-cta-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 96px 17px;
  border-inline: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.bottom-cta-sub { font-size: 20px; line-height: 1.4; color: var(--ink-600); max-width: 560px; }
.bottom-cta-inner .btn { margin-top: 12px; }

/* ============ FOOTER ===================================== */
.sf-footer { background: var(--bg-subtle); }
.sf-footer .container { padding-top: 64px; padding-bottom: 20px; }
.sf-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.sf-footer__brand { flex: 2 1 280px; }
.sf-footer__top > div:not(.sf-footer__brand) { flex: 1 1 160px; }
.sf-logo img { height: 20px; width: auto; }   /* keep ratio */
.sf-footer__tagline { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.sf-footer__col-title {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 16px;
}
.sf-footer__list { display: flex; flex-direction: column; gap: 10px; }
.sf-footer__link { font-size: 14px; color: var(--ink-600); }
.sf-footer__link:hover { color: var(--primary); }
.sf-footer__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
}
/* inner pages keep Privacy/Terms in the bottom bar → spread them out */
.sf-footer__bottom-bar:has(.sf-footer__legal-links) { justify-content: space-between; }
.sf-footer__copy { font-size: 13px; color: var(--ink-500); text-align: center; }
.sf-footer__legal-links { display: flex; gap: 24px; }
.sf-footer__legal-link { font-size: 13px; color: var(--ink-500); }
.sf-footer__legal-link:hover { color: var(--primary); }

/* ============ RESPONSIVE ================================= */
@media (max-width: 980px) {
  .testi-layout { grid-template-columns: 1fr; }
  .who-cards { grid-template-columns: repeat(2, 1fr); }
  .who-card:nth-child(2n) { border-right: 0; }
  .who-card:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .sf-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; margin-left: auto; }   /* push to right edge */
  .nav-inner { padding: 0 20px; }

  .hero { padding-block: 56px 48px; }
  .hero-title { font-size: 34px; letter-spacing: -0.6px; }
  .hero-subtitle, .who-sub, .bottom-cta-sub { font-size: 18px; }
  .section-title, .who-heading, .ind-heading, .testi-heading, .bottom-cta-title { font-size: 26px; letter-spacing: -0.4px; }

  .benefits-grid.hero-cards,
  .cards-grid-3,
  .who-cards,
  .ind-grid { grid-template-columns: 1fr; }
  .svc-card, .who-card, .ind-card { border-right: 0 !important; }
  .svc-card { border-bottom: 1px solid var(--border); }
  .svc-card:last-child { border-bottom: 0; }
  .ind-card { border-bottom: 1px solid var(--border) !important; }
  .ind-card:last-child { border-bottom: 0 !important; }

  .sf-footer__top { grid-template-columns: 1fr; }
  .bottom-cta-inner { padding: 56px 17px; }
}

/* ==========================================================
   INNER PAGES — industries · contact · services · legal
   ========================================================== */

/* active nav state */
.nav-link.active { color: var(--primary); }

/* inner-page hero (eyebrow + title + subtitle) */
.hero { min-height: auto !important; }
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
}
.section-subtitle { font-size: 20px; line-height: 1.4; letter-spacing: -0.2px; color: var(--ink-600); max-width: 680px; }
.section-header { margin-bottom: 40px; }

/* ---------- INDUSTRIES ---------- */
.industry-section > .container {
  padding-block: 80px;
  border-top: 1px solid var(--border);   /* horizontal divider between sections */
}
.industry-hero-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 56px;
  row-gap: 16px;
  align-items: start;
}
.industry-hero-row > * { grid-column: 1; }
.industry-hero-row > .industry-img-col { grid-column: 2; grid-row: 1 / span 5; align-self: stretch; }
.industry-img-col {
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 320px;
}
.industry-img-col img { width: 100%; height: 100%; object-fit: cover; }
.industry-pain-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pain-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid var(--border);
}
.pain-item:first-child { border-top: 0; }
.pain-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--primary); margin-top: 2px; }
.pain-item div { font-size: 15px; line-height: 1.5; color: var(--ink-600); }
.pain-item strong { display: block; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; font-size: 16px; }

/* ---------- CTA BANNER ---------- */
.cta-banner { background: var(--bg-subtle); }
.cta-banner::before { display: none !important; content: none !important; }
.cta-banner > .container {
  border-top: 1px solid var(--border);
  padding-block: 96px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cta-banner h2 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.72px;
  color: var(--ink-900);
}
.cta-banner p { font-size: 20px; line-height: 1.4; color: var(--ink-600); max-width: 620px; margin-top: 16px; }
.cta-banner-actions { display: flex; gap: 12px; margin-top: 28px; }

/* ---------- CONTACT ---------- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; align-items: stretch; }

/* interactive cursor-repel dot field below the contact cards */
.dot-field {
  position: relative;
  margin-top: 80px;
  height: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  overflow: hidden;
  isolation: isolate;
}
/* soft aurora cloud behind the dots (same idea as the hero wave) */
.dot-field::before {
  content: "";
  position: absolute;
  inset: -35% -12%;
  z-index: 0;
  pointer-events: none;
  filter: blur(64px) saturate(1.12);
  opacity: 0.6;
  background:
    radial-gradient(48% 72% at 20% 42%, rgba(24,24,240,0.55) 0%, rgba(24,24,240,0) 60%),
    radial-gradient(50% 80% at 80% 36%, rgba(109,40,217,0.55) 0%, rgba(109,40,217,0) 62%),
    radial-gradient(46% 72% at 60% 74%, rgba(214,51,199,0.5) 0%, rgba(214,51,199,0) 60%),
    radial-gradient(44% 72% at 8% 82%, rgba(56,189,248,0.45) 0%, rgba(56,189,248,0) 60%);
}
.dot-field canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.contact-split-left {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-media); padding: 40px;
}
.contact-split-left > h2 { font-family: var(--font-heading); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; margin-bottom: 16px; }
.form-input, .form-textarea {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  padding: 13px 14px;
  font-family: var(--font-body); font-size: 15px; color: var(--ink-900);
  transition: border-color .15s, background .15s;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-500); }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-textarea { min-height: 130px; resize: vertical; }
.form-error { font-size: 12px; color: #d92d20; margin-top: 6px; min-height: 0; }

.contact-split-right {
  position: relative;
  overflow: hidden;
  background: var(--bg-subtle); color: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--r-media); padding: 40px;
  display: flex; flex-direction: column;
}
/* decorative gradient blade — narrow (~1/4) with a soft, blurred diagonal edge */
.contact-split-right::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, #1818F0 0%, #6D28D9 50%, #D633C7 100%);
  -webkit-mask-image: linear-gradient(108deg, transparent 68%, #000 116%);
  mask-image: linear-gradient(108deg, transparent 68%, #000 116%);
  pointer-events: none;
  z-index: 0;
}
.contact-split-right > * { position: relative; z-index: 1; max-width: 64%; }
.contact-panel-title { font-family: var(--font-heading); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; color: var(--ink-900); }
.contact-panel-desc { font-size: 16px; line-height: 1.5; color: var(--ink-600); margin-top: 14px; }
.contact-panel-items { display: flex; flex-direction: column; gap: 22px; margin-top: 36px; }
.contact-panel-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-panel-item-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-control);
  color: var(--primary);
}
.contact-panel-item-label { font-size: 13px; color: var(--ink-500); }
.contact-panel-item-val { font-size: 15px; color: var(--ink-900); margin-top: 2px; }

/* ---------- SERVICES ---------- */
.svc-hero-grid { margin-top: 56px !important; }
/* services hero grid = static, evenly-ruled 3-col grid
   (no accent bar, no hover, dividers fixed for 3 columns) */
.ind-grid.svc-hero-grid { gap: 0; }
.svc-hero-grid .ind-card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.svc-hero-grid .ind-card:nth-child(3n) { border-right: 0; }
.svc-hero-grid .ind-card:nth-last-child(-n+3) { border-bottom: 0; }
.svc-hero-grid .ind-card::before { display: none; }
.svc-hero-grid .ind-card:hover { background: transparent; }
.svc-hero-grid .ind-card:hover .ind-card__title { color: var(--ink-900); }
.section-header { display: flex; flex-direction: column; }

/* process flow */
.flow { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; padding-inline: 60px; }
/* neutralize the legacy carousel JS (chevron buttons, edge-fade mask, blurred steps) */
.flow-nav { display: none !important; }
.flow { -webkit-mask-image: none !important; mask-image: none !important; overflow: visible !important; }
.flow-step.blur { filter: none !important; opacity: 1 !important; }
.flow-row { display: flex; align-items: flex-start; gap: 8px; }
.flow-row--rtl { flex-direction: row-reverse; }
.flow-step { flex: 0 0 auto; width: 200px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.flow-node {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1px solid var(--primary-faint);
  color: var(--primary); display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
}
.flow-label h4 { font-family: var(--font-heading); font-weight: 500; font-size: 18px; color: var(--ink-900); }
.flow-label p { font-size: 14px; line-height: 1.45; color: var(--ink-600); margin-top: 4px; }
.flow-connector { flex: 1 1 auto; height: 1px; background: var(--border); margin-top: 28px; }
.flow-curve { height: 32px; }

/* tech stack */
.tech-split { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.tech-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; height: 360px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.tech-col-track { display: flex; flex-direction: column; gap: 16px; animation: bp-vscroll 22s linear infinite; }
.tech-col-track:nth-child(2n) { animation-direction: reverse; }
.tech-icon-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-media); height: 72px;
  display: grid; place-items: center; flex-shrink: 0;
}
.tech-icon-card img { width: 34px; height: 34px; object-fit: contain; }
@keyframes bp-vscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---------- LEGAL (privacy / terms) ---------- */
.legal-hero > .container { padding-block: 80px 40px; border-top: 0; }
.legal-hero h1 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; color: var(--ink-900);
}
.legal-hero p, .legal-hero .legal-date, .legal-hero span { color: var(--ink-500); font-size: 15px; margin-top: 12px; }
.legal-article {
  max-width: 760px; margin-inline: auto;
  padding: 0 17px 80px;
}
.legal-article h2 {
  font-family: var(--font-heading); font-weight: 500;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.4px; color: var(--ink-900);
  margin: 40px 0 14px;
}
.legal-article p { font-size: 16px; line-height: 1.7; color: var(--ink-600); margin-bottom: 16px; }
.legal-article ul { margin: 0 0 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-article li { font-size: 16px; line-height: 1.6; color: var(--ink-600); list-style: disc; }
.legal-article strong { color: var(--ink-900); font-weight: 600; }
.legal-article a { color: var(--primary); }

/* ---------- inner-page responsive ---------- */
@media (max-width: 880px) {
  .industry-hero-row { grid-template-columns: 1fr; }
  .industry-hero-row > .industry-img-col { grid-column: 1; grid-row: auto; min-height: 240px; }
  .contact-split, .tech-split { grid-template-columns: 1fr; }
  .flow-row, .flow-row--rtl { flex-direction: column; align-items: center; }
  .flow-connector { width: 1px; height: 28px; flex: 0 0 auto; margin: 0; }
  /* curve between row 1 and row 2 → vertical connector (step 3 → 4) */
  .flow-curve { width: 1px; height: 28px; background: var(--border); margin-inline: auto; align-self: center; }
  .tech-panel { grid-template-columns: repeat(2, 1fr); }
}