/* =========================================================
   GaganAPPS — modern, minimal redesign
   Palette: red primary, black/white base, yellow + blue accents
   ========================================================= */

:root {
  --red:        #e63946;
  --red-deep:   #c92b38;
  --red-soft:   #fde8ea;
  --black:      #0f1115;
  --ink:        #1a1d23;
  --ink-2:      #4a5060;
  --ink-3:      #7a8090;
  --line:       #ececf0;
  --line-2:     #d8d9df;
  --bg:         #ffffff;
  --bg-soft:    #f7f7f9;
  --bg-2:       #f1f2f5;
  --yellow:     #fbbf24;
  --blue:       #2563eb;
  --green:      #16a34a;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(15,17,21,.04), 0 2px 6px rgba(15,17,21,.04);
  --shadow:    0 4px 14px rgba(15,17,21,.06), 0 12px 28px rgba(15,17,21,.06);
  --shadow-lg: 0 10px 30px rgba(15,17,21,.08), 0 30px 60px rgba(15,17,21,.08);

  --container: 1200px;
  --header-h:  64px;

  --sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 1000;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 14px;
  background: linear-gradient(155deg, #1a1d23 0%, #0f1115 70%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(15,17,21,.30);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner.is-open { opacity: 1; transform: translateY(0); }

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
}
.cookie-banner-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(230,57,70,.30);
}
.cookie-banner-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
}
.cookie-banner-text strong {
  display: block;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 14px;
}
.cookie-banner-text a {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-text a:hover { color: #fff; }

.cookie-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookie-banner-actions .btn-outline {
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.80);
  background: transparent;
}
.cookie-banner-actions .btn-outline:hover {
  border-color: rgba(255,255,255,.40);
  color: #fff;
}

@media (max-width: 640px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .cookie-banner-inner { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .cookie-banner-icon { display: none; }
  .cookie-banner-actions { width: 100%; justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; text-align: center; }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  color: var(--black);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(1.9rem, 3.45vw, 2.7rem); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 2.85vw, 2.2rem); font-weight: 700; line-height: 1.25; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p  { color: var(--ink-2); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ---------- Topbar ---------- */
.topbar {
  background: #fafafa;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px;
}
.topbar-links { display: flex; gap: 22px; }
.topbar-links a { color: var(--ink-2); transition: color .15s; }
.topbar-links a:hover { color: var(--red); }
.topbar-social { display: flex; gap: 6px; }
.soc {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  background: transparent;
  transition: color .18s, background .18s, transform .18s, box-shadow .18s;
}
.soc:hover { transform: translateY(-1px); }
.soc-fb:hover { color: #1877f2; background: rgba(24,119,242,.10); box-shadow: 0 4px 12px rgba(24,119,242,.18); }
.soc-wa:hover { color: #25d366; background: rgba(37,211,102,.10); box-shadow: 0 4px 12px rgba(37,211,102,.18); }
.soc-li:hover { color: #0a66c2; background: rgba(10,102,194,.10); box-shadow: 0 4px 12px rgba(10,102,194,.18); }
.soc svg { width: 16px; height: 16px; }

/* ---------- Site header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 18px 24px;
}
.brand-logo { height: 44px; width: auto; }

.header-meta {
  display: flex; gap: 36px; justify-content: flex-end; flex-wrap: wrap;
}
.meta-item { display: flex; align-items: center; gap: 12px; }
.meta-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.meta-item small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.2; }
.meta-item strong { display: block; font-size: 14px; color: var(--black); font-weight: 600; }
.meta-item a { color: inherit; }
.meta-item a:hover { color: var(--red); }

/* ---------- Primary nav ---------- */
.primary-nav {
  background: var(--red);
  color: #fff;
  border-top: 3px solid var(--red-deep);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--header-h);
}
.nav-list {
  list-style: none; display: flex; gap: 4px;
}
.nav-list > li { position: relative; }
.nav-list > li > a {
  display: block;
  padding: 20px 18px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,255,255,.92);
  transition: color .15s, background .15s;
}
.nav-list > li > a:hover,
.nav-list > li > a.active {
  color: #fff;
  background: rgba(0,0,0,.12);
}
.caret { font-size: 10px; opacity: .8; margin-left: 4px; }

.has-drop:hover > .drop,
.has-drop:focus-within > .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop {
  list-style: none;
  position: absolute; top: 100%; left: 0;
  background: #fff;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 10;
}
.drop a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}
.drop a:hover { background: var(--bg-soft); color: var(--red); }

/* ---- Icon dropdown (About Us) ---- */
.drop-icons { min-width: 280px; padding: 10px; }
.drop-icons li a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}
.drop-icons strong {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 14px; color: var(--black); line-height: 1.2;
}
.drop-icons small {
  display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px;
}
.drop-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drop-icons li a:hover .drop-ico { background: var(--red); color: #fff; }
.drop-icons li a:hover strong { color: var(--red); }

/* ---- Mega menu (Services) ---- */
/* Higher specificity than `.nav-list > li { position: relative }`
   so the megamenu anchors to the full-width header instead of the narrow li. */
.nav-list > li.has-mega { position: static; }
.has-mega:hover .drop-mega,
.has-mega:focus-within .drop-mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.drop-mega {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  width: min(880px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
  color: var(--ink);
}
.drop-mega-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.drop-mega-head strong {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 16px; color: var(--black); margin-top: 2px;
}
.drop-mega-all {
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  color: var(--red); padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s;
}
.drop-mega-all:hover { background: var(--red); color: #fff !important; border-color: var(--red); }

.drop-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.drop-mega-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .15s, transform .15s;
}
.drop-mega-item:hover {
  background: var(--bg-soft);
  transform: translateX(2px);
}
.drop-mega-ico {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.drop-mega-ico svg { width: 18px; height: 18px; }
.drop-mega-item.drop-tone-alt  .drop-mega-ico { background: #fff7e0; color: #b58900; }
.drop-mega-item.drop-tone-cool .drop-mega-ico { background: #e7efff; color: var(--blue); }
.drop-mega-item:hover .drop-mega-ico { background: var(--red); color: #fff; }
.drop-mega-item.drop-tone-alt:hover  .drop-mega-ico { background: #b58900; color: #fff; }
.drop-mega-item.drop-tone-cool:hover .drop-mega-ico { background: var(--blue); color: #fff; }

.drop-mega-text strong {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 13.5px; color: var(--black); line-height: 1.25;
}
.drop-mega-text small {
  display: block; font-size: 12px; color: var(--ink-3);
  line-height: 1.4; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.drop-mega-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.drop-mega-foot-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  color: var(--ink-2);
}
.drop-mega-foot-link:hover { color: var(--red); }
.drop-mega-foot-link .drop-ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--bg-soft); color: var(--ink-2);
}
.drop-mega-foot-link:hover .drop-ico { background: var(--red); color: #fff; }
.drop-mega-foot-cta {
  background: var(--red); color: #fff !important;
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  padding: 9px 18px; border-radius: 999px;
  transition: background .15s;
}
.drop-mega-foot-cta:hover { background: var(--red-deep); }

.cta-brochure { color: var(--red); background: #fff; border: 0; }
.cta-brochure:hover { background: var(--black); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform .15s, background .15s, color .15s, box-shadow .15s, border-color .15s;
  border: 1.5px solid transparent;
}
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(230,57,70,.32); }
.btn-dark { background: var(--black); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--black); border-color: var(--line-2); }
.btn-outline:hover { background: var(--black); color: #fff; border-color: var(--black); }
.btn-ghost { background: transparent; color: var(--red); }
.btn-ghost:hover { color: var(--red-deep); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Sections / utilities ---------- */
section { padding: 60px 0; }
.section-tight { padding: 40px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--black); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255,255,255,.72); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--red); border-radius: 2px;
}
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.section-head p { margin-top: 14px; font-size: 17px; }

.lead { font-size: clamp(17px, 1.8vw, 19px); color: var(--ink-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 68px;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.hero .grid-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(15,17,21,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,17,21,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 90%);
}
.hero .mesh {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px);
  background:
    radial-gradient(420px 320px at 18% 28%, rgba(230,57,70,.28), transparent 60%),
    radial-gradient(380px 300px at 82% 18%, rgba(251,191,36,.22), transparent 60%),
    radial-gradient(520px 340px at 70% 80%, rgba(37,99,235,.22), transparent 60%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-3%,2%) scale(1.05); }
  100% { transform: translate(2%,-2%) scale(1.02); }
}
.code-rain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .08; mix-blend-mode: multiply;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.hero-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent { color: var(--red); }
.hero h1 .underline {
  position: relative; display: inline-block;
}
.hero h1 .underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
  background: var(--yellow); opacity: .55; z-index: -1; border-radius: 4px;
}
.hero p { font-size: 18px; max-width: 560px; }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-stats {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 520px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.hero-stats .stat strong {
  display: block; font-family: var(--sans); font-size: 30px; font-weight: 800; color: var(--black);
  letter-spacing: -0.02em;
}
.hero-stats .stat span { font-size: 13px; color: var(--ink-3); }

.hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-left: auto;
}
.hero-art .blob {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  border-radius: 38% 62% 53% 47% / 42% 38% 62% 58%;
  box-shadow: var(--shadow-lg);
}
.hero-art .blob-2 {
  position: absolute; right: -8%; bottom: -6%;
  width: 60%; aspect-ratio: 1; background: var(--yellow);
  border-radius: 50%; opacity: .9;
  z-index: -1;
}
.hero-art .blob-3 {
  position: absolute; left: -6%; top: 8%;
  width: 32%; aspect-ratio: 1; background: var(--blue);
  border-radius: 50%; opacity: .14;
}
.hero-art .center-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-family: var(--sans); font-weight: 800;
  font-size: clamp(40px, 7vw, 86px); letter-spacing: -0.04em;
  text-align: center; line-height: .95;
  text-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.hero-art .badge {
  position: absolute; padding: 12px 18px; background: #fff; border-radius: 14px;
  box-shadow: var(--shadow);
  font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--black);
  display: flex; align-items: center; gap: 10px;
}
.hero-art .badge small { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.hero-art .badge.b-1 { top: 12%; left: -10%; }
.hero-art .badge.b-2 { bottom: 14%; right: -8%; }
.hero-art .badge .dot-y { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.hero-art .badge .dot-b { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }

/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--black);
  color: #fff;
  padding: 36px 0;
}
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.stats-strip strong {
  display: block; font-family: var(--sans); font-size: 36px; font-weight: 800;
  color: var(--yellow); letter-spacing: -0.02em;
}
.stats-strip span { font-size: 13px; color: rgba(255,255,255,.7); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Service cards ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  /* Icon sits next to the heading on the same row; description + "more"
     link span the full card width below. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon  title"
    "desc  desc"
    "more  more";
  column-gap: 18px;
  row-gap: 0;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.service-card .icon {
  grid-area: icon;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--red-soft); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  transition: background .2s, color .2s;
}
.service-card:hover .icon { background: var(--red); color: #fff; }
.service-card h3 { grid-area: title; align-self: center; margin: 0; }
.service-card p { grid-area: desc; font-size: 14.5px; margin-top: 18px; }
.service-card .more {
  grid-area: more;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; font-weight: 600; color: var(--red); font-size: 14px;
}
@media (max-width: 520px) {
  .service-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "title"
      "desc"
      "more";
  }
  .service-card h3   { margin-top: 14px; }
  .service-card p    { margin-top: 8px; }
}
.service-card.alt .icon { background: #fff7e0; color: #b58900; }
.service-card.alt:hover .icon { background: var(--yellow); color: var(--black); }
.service-card.cool .icon { background: #e7efff; color: var(--blue); }
.service-card.cool:hover .icon { background: var(--blue); color: #fff; }

/* ---------- Feature/about split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-art {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
/* soft drift mesh behind the card — mirrors home hero language */
.split-art::before {
  content: ""; position: absolute; inset: -8%; z-index: -1;
  filter: blur(50px); pointer-events: none; border-radius: 28px;
  background:
    radial-gradient(280px 220px at 18% 20%, rgba(230,57,70,.22), transparent 60%),
    radial-gradient(240px 200px at 82% 78%, rgba(251,191,36,.28), transparent 60%);
}
/* dot grid pattern */
.split-art::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(15,17,21,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 50%, transparent 90%);
  border-radius: var(--radius-lg);
}
.split-art .frame {
  position: relative;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  margin: 24px;
  display: flex; flex-direction: column;
  gap: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* small accent line at top of the card */
.split-art .frame::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--blue) 100%);
}
/* faint corner watermark */
.split-art .frame::after {
  content: ""; position: absolute; right: -50px; bottom: -50px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,57,70,.10), transparent 70%);
  pointer-events: none;
}
.split-art .frame > * { position: relative; z-index: 1; }
.split-art .frame small {
  display: inline-block;
  font-family: var(--sans); font-weight: 700;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.split-art .frame .stat {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(56px, 7vw, 84px);
  color: var(--black);
  letter-spacing: -0.04em;
  line-height: .95;
  margin-top: 8px;
  position: relative;
  display: inline-block;
}
.split-art .frame .stat::after {
  content: "";
  position: absolute; left: 0; right: 18%; bottom: 6px;
  height: 12px;
  background: var(--yellow);
  opacity: .5;
  z-index: -1;
  border-radius: 4px;
}
/* secondary stat (the smaller one below) */
.split-art .frame [style*="color:var(--yellow)"],
.split-art .frame [style*="color: var(--yellow)"] {
  color: var(--red) !important;
}
.split-art .frame p {
  color: var(--ink-2) !important;
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 8px;
}
/* The frame is a white card, so any inline white text inside it is invisible.
   The rule above already catches <p>; this catches every other element, which
   is how divs of white display text ended up unreadable. */
.split-art .frame [style*="color:#fff"],
.split-art .frame [style*="color: #fff"],
.split-art .frame [style*="color:#FFF"],
.split-art .frame [style*="color:white"] {
  color: var(--black) !important;
}
/* divider between the two halves */
.split-art .frame > div:first-child {
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line-2);
}

/* ---- Milestones strip (real DOM element added per page) ---- */
.frame-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px -4px;
}
.frame-strip > div {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  position: relative;
}
.frame-strip > div::before {
  content: "";
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px #fff;
}
.frame-strip > div:nth-child(2)::before { background: var(--yellow); }
.frame-strip > div:nth-child(3)::before { background: var(--blue); }
.frame-strip strong {
  display: block;
  font-family: var(--sans); font-weight: 800;
  font-size: 22px; color: var(--black); letter-spacing: -0.02em; line-height: 1;
}
.frame-strip small {
  display: block;
  margin-top: 4px;
  font-family: var(--sans); font-weight: 600;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.split ul.bullets { margin-top: 18px; list-style: none; display: grid; gap: 14px; }
.split ul.bullets li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.split ul.bullets li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.split ul.bullets li strong {
  color: var(--black);
  font-weight: 700;
  margin-right: 6px;
}

/* ---- Numbered principle cards (used on journey.php "Three rules") ---- */
.principles {
  list-style: none;
  margin-top: 28px;
  display: grid;
  gap: 12px;
  counter-reset: principle;
}
.principle {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.principle::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity .15s;
}
.principle:hover {
  transform: translateX(2px);
  border-color: transparent;
  box-shadow: var(--shadow);
}
.principle:hover::before { opacity: 1; }
.principle-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--red-soft);
  color: var(--red);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 16px;
  letter-spacing: .04em;
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .2s;
}
.principle:hover .principle-num {
  background: var(--red);
  color: #fff;
  transform: rotate(-4deg);
}
.principle:nth-child(2) .principle-num { background: #fff7e0; color: #b58900; }
.principle:nth-child(2):hover .principle-num { background: var(--yellow); color: var(--black); }
.principle:nth-child(2)::before { background: var(--yellow); }
.principle:nth-child(3) .principle-num { background: #e7efff; color: var(--blue); }
.principle:nth-child(3):hover .principle-num { background: var(--blue); color: #fff; }
.principle:nth-child(3)::before { background: var(--blue); }
.principle strong {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: 17px; color: var(--black);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.principle p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- Clients ---------- */
.clients-section { background: var(--bg-soft); }
.client-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.client-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.client-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.client-mono {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800; font-size: 16px;
  letter-spacing: -0.02em;
  color: #fff;
  background: var(--red);
  flex-shrink: 0;
}
.client-mono[data-c="r"] { background: var(--red); }
.client-mono[data-c="y"] { background: var(--yellow); color: var(--black); }
.client-mono[data-c="b"] { background: var(--blue); }
.client-card strong {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: 15px; color: var(--black);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.client-card strong small {
  display: block;
  font-weight: 500; font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
}
.client-more {
  background: var(--black); border-color: var(--black);
}
.client-more:hover { background: #000; }
.client-more strong, .client-more strong small { color: rgba(255,255,255,.85); }
.client-more strong { color: #fff; }
.client-mono-plus {
  background: rgba(255,255,255,.12) !important;
  color: var(--yellow) !important;
  font-size: 28px;
  font-weight: 300;
}
@media (max-width: 1024px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .client-grid { grid-template-columns: 1fr; }
}

/* Larger case-study version of client card (Selected Work page) */
.client-case {
  display: block;
  padding: 24px;
  position: relative;
}
.client-case-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.client-case .client-mono {
  width: 52px; height: 52px; border-radius: 14px;
  font-size: 17px;
}
.client-case-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.client-case-name {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: 18px;
  color: var(--black);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.25;
}
.client-case-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.client-case.client-more {
  background: var(--black);
  border-color: var(--black);
}
.client-case.client-more .client-case-name,
.client-case.client-more .client-case-desc { color: rgba(255,255,255,.85); }
.client-case.client-more .client-case-name { color: #fff; }
.client-case.client-more .client-case-tag {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.1);
  color: var(--yellow);
}

/* Industries pill strip */
.industry-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.industry-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.industry-pill span {
  font-size: 18px;
  line-height: 1;
}
.industry-pill:hover {
  transform: translateY(-2px);
  border-color: var(--red);
  box-shadow: var(--shadow);
}

/* ---------- Testimonials ---------- */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ----- Testimonial card: gradient + animated ----- */
.test-card {
  position: relative;
  padding: 32px 28px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,17,21,.06);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(230,57,70,.06) 0%, transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fafafb 55%, #f3f4f8 100%);
  box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 8px 22px rgba(15,17,21,.04);
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .25s ease;
  isolation: isolate;
}
/* Decorative oversized quote glyph */
.test-card::before {
  content: "\201C";              /* curly opening quote */
  position: absolute;
  top: -38px; right: 8px;
  font-family: var(--sans);
  font-size: 200px;
  font-weight: 800;
  line-height: 1;
  color: rgba(230,57,70,.08);
  pointer-events: none;
  transition: color .4s ease, transform .4s ease;
  z-index: 0;
}
/* Sweeping highlight on hover */
.test-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(230,57,70,.10) 50%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  transition: background-position 1s ease;
  z-index: 0;
}
.test-card > * { position: relative; z-index: 1; }

.test-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(15,17,21,.08),
    0 6px 18px rgba(230,57,70,.10);
  border-color: rgba(230,57,70,.22);
}
.test-card:hover::before {
  color: rgba(230,57,70,.18);
  transform: scale(1.06) rotate(-3deg);
}
.test-card:hover::after { background-position: -120% 0; }

/* Stars — gradient with shimmer on hover */
.test-card .stars {
  font-size: 16px;
  margin-bottom: 14px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f59e0b 0%, var(--yellow) 50%, #f59e0b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.test-card:hover .stars { animation: testStarShine 1.8s linear infinite; }
@keyframes testStarShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.test-card blockquote {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 22px;
}
.test-card .who {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.test-card .avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 14px rgba(230,57,70,.30);
  transition: transform .35s ease, box-shadow .35s ease;
}
.test-card:hover .avatar {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 8px 22px rgba(230,57,70,.45);
}
.test-card .who strong { display: block; font-family: var(--sans); font-size: 14px; color: var(--black); }
.test-card .who small  { color: var(--ink-3); font-size: 13px; }

/* ----- Featured (dark gradient) variant ----- */
.test-card.featured {
  border-color: rgba(255,255,255,.08);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(230,57,70,.45) 0%, transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(251,191,36,.18) 0%, transparent 55%),
    linear-gradient(155deg, #1a1d23 0%, #0f1115 60%, #0a0c10 100%);
  color: #fff;
  box-shadow: 0 12px 32px rgba(15,17,21,.25), 0 4px 12px rgba(230,57,70,.18);
}
.test-card.featured::before {
  color: rgba(251,191,36,.14);
}
.test-card.featured::after {
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(251,191,36,.12) 50%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
}
.test-card.featured:hover {
  border-color: rgba(251,191,36,.30);
  box-shadow: 0 22px 50px rgba(15,17,21,.35), 0 8px 22px rgba(230,57,70,.35);
}
.test-card.featured:hover::before { color: rgba(251,191,36,.26); }
.test-card.featured blockquote { color: rgba(255,255,255,.92); }
.test-card.featured .who       { border-color: rgba(255,255,255,.10); }
.test-card.featured .who strong { color: #fff; }
.test-card.featured .who small  { color: rgba(255,255,255,.55); }
.test-card.featured .avatar {
  background: linear-gradient(135deg, var(--yellow) 0%, #f59e0b 100%);
  color: var(--black);
  box-shadow: 0 4px 14px rgba(251,191,36,.45);
}
.test-card.featured:hover .avatar {
  box-shadow: 0 8px 22px rgba(251,191,36,.65);
}

/* Stagger the entrance reveal for testimonial cards */
.test-grid .test-card.reveal:nth-child(1) { transition-delay: 0s;    }
.test-grid .test-card.reveal:nth-child(2) { transition-delay: .10s;  }
.test-grid .test-card.reveal:nth-child(3) { transition-delay: .20s;  }
.test-grid .test-card.reveal:nth-child(4) { transition-delay: .30s;  }
.test-grid .test-card.reveal:nth-child(5) { transition-delay: .40s;  }
.test-grid .test-card.reveal:nth-child(6) { transition-delay: .50s;  }

@media (prefers-reduced-motion: reduce) {
  .test-card,
  .test-card::before,
  .test-card::after,
  .test-card .avatar,
  .test-card .stars { animation: none !important; transition: none !important; }
  .test-card:hover  { transform: none; }
}

/* ---------- Team cards ---------- */
/* ---------- Team disciplines grid ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card {
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(230,57,70,.06) 0%, transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #fafafb 60%, #f3f4f8 100%);
  box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 8px 22px rgba(15,17,21,.04);
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .25s ease;
}
.team-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(230,57,70,.10) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  transition: background-position 1s ease;
  pointer-events: none;
}
.team-card:hover {
  transform: translateY(-6px);
  border-color: rgba(230,57,70,.22);
  box-shadow: 0 18px 40px rgba(15,17,21,.08), 0 6px 18px rgba(230,57,70,.10);
}
.team-card:hover::after { background-position: -120% 0; }

.team-card .team-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px rgba(230,57,70,.30);
  transition: transform .35s ease, box-shadow .35s ease;
}
.team-card:hover .team-icon {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 10px 24px rgba(230,57,70,.45);
}

.team-card h3 { font-size: 18px; margin-bottom: 4px; }
.team-card .role {
  color: var(--red); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px;
}
.team-card > p { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 16px; }

.team-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0; margin: 0;
  border-top: 1px dashed rgba(15,17,21,.10);
  padding-top: 14px;
}
.team-tags li {
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2);
  background: rgba(15,17,21,.04);
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: .02em;
}

@media (max-width: 980px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ---------- Founder card ---------- */
.founder-card {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,17,21,.06);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(230,57,70,.10) 0%, transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(251,191,36,.10) 0%, transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fafafb 55%, #f3f4f8 100%);
  box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 18px 40px rgba(15,17,21,.06);
  overflow: hidden;
}
.founder-card::before {
  content: "\201C";
  position: absolute;
  top: -50px; right: 40px;
  font-family: var(--sans);
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  color: rgba(230,57,70,.06);
  pointer-events: none;
}

.founder-card-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.founder-photo-wrap {
  position: relative;
  width: 200px; height: 200px;
  display: grid; place-items: center;
}
.founder-caption {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.founder-caption .founder-mark {
  height: 22px; width: auto;
  opacity: .7;
  filter: grayscale(.1);
  margin-bottom: 4px;
}
.founder-caption strong {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  color: var(--red);
  letter-spacing: .14em; text-transform: uppercase;
}
.founder-caption small {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.founder-photo {
  width: 168px; height: 168px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ff8088 0%, var(--red) 60%, #c92b38 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 76px;
  letter-spacing: -.04em;
  box-shadow: 0 12px 30px rgba(230,57,70,.40), 0 4px 10px rgba(15,17,21,.10);
  position: relative;
  z-index: 2;
}
.founder-photo-glyph {
  background: linear-gradient(135deg, #ffffff 0%, #ffe5e8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.founder-pulse-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--red);
  pointer-events: none;
}
.founder-pulse-ring.r1 { animation: founderPulse 2.6s ease-out infinite; }
.founder-pulse-ring.r2 { animation: founderPulse 2.6s ease-out infinite; animation-delay: 1.3s; }
@keyframes founderPulse {
  0%   { transform: scale(.85); opacity: .7; }
  100% { transform: scale(1.15); opacity: 0; }
}

.founder-card-body { position: relative; z-index: 1; }
.founder-card-body .eyebrow { margin: 0 0 6px; }
.founder-name {
  font-family: var(--sans);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 4px;
}
.founder-role {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px; font-weight: 700;
  color: var(--red);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}
.founder-quote {
  position: relative;
  font-size: 16.5px; line-height: 1.65;
  color: var(--ink);
  margin-bottom: 22px;
  padding-left: 18px;
  border-left: 3px solid var(--red);
}
.founder-quote-mark {
  position: absolute;
  top: -16px; left: -2px;
  font-family: var(--sans);
  font-size: 64px; font-weight: 800;
  line-height: 1;
  color: rgba(230,57,70,.30);
  pointer-events: none;
}
.founder-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.founder-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(15,17,21,.10);
  border-radius: 999px;
  background: #fff;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.founder-action:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(230,57,70,.15);
}
.founder-action svg { color: var(--red); }

@media (max-width: 780px) {
  .founder-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; text-align: center; }
  .founder-quote { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 3px solid var(--red); }
  .founder-quote-mark { display: none; }
  .founder-actions { justify-content: center; }
  .founder-card::before { right: 16px; top: -30px; font-size: 140px; }
}


/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1.5fr auto;
  align-items: center;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.cta-banner::before, .cta-banner::after {
  content: ""; position: absolute; border-radius: 50%; opacity: .12; background: #fff;
}
.cta-banner::before { width: 280px; height: 280px; right: -80px; top: -120px; }
.cta-banner::after { width: 180px; height: 180px; right: 30%; bottom: -100px; }
.cta-banner h2 { color: #fff; margin-bottom: 8px; }
.cta-banner p { color: rgba(255,255,255,.85); }
.cta-banner .btn-primary { background: #fff; color: var(--red); }
.cta-banner .btn-primary:hover { background: var(--black); color: #fff; }

/* ---------- Page hero (smaller, used on inner pages) ---------- */
.page-hero {
  background: var(--bg-soft);
  /* Trimmed from 88/72 — the subpage hero was pushing real content below the
     fold on a laptop for no benefit, since it carries only a breadcrumb, an
     h1 and a lead paragraph. */
  padding: 52px 0 40px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 320px; height: 320px; border-radius: 50%; background: var(--red); opacity: .06;
}
.page-hero::after {
  content: ""; position: absolute; left: -80px; bottom: -80px;
  width: 200px; height: 200px; border-radius: 50%; background: var(--yellow); opacity: .12;
}
/* Breadcrumb sits on the same row as the h1 — heading left, crumbs right.
   Grid rather than a float, so a long heading is kept out of the crumb's
   column instead of wrapping around it. The breadcrumb is the first child in
   the markup (correct for reading order); grid placement moves it visually
   without disturbing that. */
.page-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: baseline;
}
.page-hero .container > .breadcrumb { grid-area: 1 / 2; }
/* Reset all four grid-area sides, not just the column. Some components carry a
   named `grid-area` for use inside another grid (.job-meta / .job-skills are
   placed by name inside .job-card). Those names don't exist in this grid, so
   they resolve against implicit lines and two such elements can land in the
   same row and overlap. Setting row explicitly to auto prevents that. */
.page-hero .container > *:not(.breadcrumb) { grid-area: auto / 1 / auto / 2; }
.page-hero .breadcrumb {
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 0;
  text-align: right;
  white-space: nowrap;
  /* .page-hero p caps body copy at 640px for readability; the breadcrumb is
     also a <p>, so without this it right-aligns to 640px and lands mid-page
     instead of at the container edge. */
  max-width: 100%;
}
.page-hero .breadcrumb a:hover { color: var(--red); }
.page-hero h1 { margin-bottom: 12px; }
.page-hero p { font-size: 17px; max-width: 640px; }

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-grid .full { grid-column: 1 / -1; }
.field label {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: 13px; color: var(--ink); margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,57,70,.12);
}
.field textarea { min-height: 140px; resize: vertical; }

.alert { padding: 14px 18px; border-radius: 10px; font-size: 14.5px; margin-bottom: 24px; }
.alert-ok    { background: #e7f7ec; color: #166534; border: 1px solid #c8ecd4; }
.alert-error { background: #fde8ea; color: #9b1c1c; border: 1px solid #f5c2c7; }

/* =========================================================
   SERVICE DETAIL PAGE — bold redesign
   ========================================================= */

/* ----- Hero v3 (matches home hero language) ----- */
.svc-hero-v3 {
  position: relative;
  padding: 44px 0 64px;
  background: var(--bg);
  isolation: isolate;
  overflow: hidden;
}
.svc-hero-v3 .grid-bg {
  position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(rgba(15,17,21,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,17,21,.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 90%);
}
.svc-hero-v3 .mesh {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px);
  animation: meshDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(420px 320px at 18% 28%, rgba(230,57,70,.28), transparent 60%),
    radial-gradient(380px 300px at 82% 18%, rgba(251,191,36,.18), transparent 60%),
    radial-gradient(520px 340px at 70% 80%, rgba(37,99,235,.18), transparent 60%);
}
.svc-hero-v3 .code-rain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .07; mix-blend-mode: multiply;
}

.svc-breadcrumb-light { color: var(--ink-3); margin-bottom: 24px; }
.svc-breadcrumb-light a { color: var(--ink-2); }
.svc-breadcrumb-light a:hover { color: var(--red); }
.svc-breadcrumb-light span { opacity: .55; margin: 0 4px; }

.svc-hero3-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
.svc-hero3-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.svc-hero-v3 h1 {
  color: var(--black);
  font-size: clamp(1.9rem, 3.45vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.svc-hero-v3 .h1-line { display: block; }
.svc-hero-v3 .svc-h1-sub { color: var(--black); }
/* Service title — matches the home hero `.underline` treatment:
   keep the text black (consistent with the rest of the site), use a
   soft yellow marker stroke as the accent. */
.svc-accent {
  color: var(--black);
  position: relative;
  display: inline-block;
}
.svc-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 10px;
  background: var(--yellow);
  opacity: .55;
  z-index: -1;
  border-radius: 4px;
}

.svc-hero3-lead { margin-top: 18px; max-width: 540px; font-size: 18px; }
.svc-hero3-stats {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 520px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.svc-hero3-stats .stat strong {
  display: block; font-family: var(--sans); font-size: 26px; font-weight: 800;
  color: var(--black); letter-spacing: -0.02em;
}
.svc-hero3-stats .stat span { font-size: 12.5px; color: var(--ink-3); }

/* Right-side icon panel — fills the slot the home terminal fills */
.svc-hero3-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}
/* ----- Service-specific hero animation card ----- */
.svc-anim {
  position: absolute; inset: 8%;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff 0%, #f5f6fa 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.svc-anim::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(230,57,70,.10), transparent 60%);
  pointer-events: none;
}

/* === 1. Web — code editor === */
.svc-anim-web .va-window {
  width: 100%; max-width: 320px;
  background: #0d1117; border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #e6edf3; box-shadow: 0 12px 28px rgba(15,17,21,.18);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}
.va-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.va-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.va-dot.r { background: #ff5f57; }
.va-dot.y { background: #febc2e; }
.va-dot.g { background: #28c840; }
.va-tab {
  margin-left: auto; font-size: 11.5px; color: #8b949e;
}
.va-code { padding: 16px 18px; font-size: 12.5px; line-height: 2; }
.va-row { display: block; opacity: 0; animation: vaRow .5s ease forwards; }
.va-row:nth-child(1) { animation-delay: .2s; }
.va-row:nth-child(2) { animation-delay: .8s; }
.va-row:nth-child(3) { animation-delay: 1.4s; }
.va-row:nth-child(4) { animation-delay: 2.0s; }
@keyframes vaRow { to { opacity: 1; } }
.va-row .ln { display: inline-block; width: 18px; color: #6e7681; font-style: normal; font-size: 11px; margin-right: 8px; }
.t-tag { color: #ff7b72; }
.t-str { color: #a5d6ff; }
.t-key { color: #ff7b72; }
.t-var { color: #79c0ff; }
.t-fn  { color: #d2a8ff; }
.va-cursor {
  display: inline-block; width: 7px; height: 14px; background: #7ee787;
  vertical-align: text-bottom; margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}

/* === 2. Mobile — phone with rolling cards === */
.svc-anim-mobile .va-phone {
  width: 160px; aspect-ratio: 9/19;
  background: #0f1115; border: 6px solid #0f1115;
  border-radius: 28px;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 30px rgba(15,17,21,.25);
}
.va-notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 14px; background: #0f1115;
  border-radius: 0 0 12px 12px; z-index: 4;
}
.va-screen {
  background: #fff; height: 100%;
  display: flex; flex-direction: column;
  padding: 22px 10px 8px;
}
.va-pheader { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.va-pavatar { width: 22px; height: 22px; border-radius: 50%; background: var(--red); }
.va-pbar    { flex: 1; height: 8px; background: #ececf0; border-radius: 4px; }
.va-pcards  { flex: 1; overflow: hidden; position: relative; }
.va-pcards::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 0, transparent 80%, #fff 100%);
  z-index: 2; pointer-events: none;
}
.va-pcards .va-pcard {
  height: 36px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 8px;
  border-left: 3px solid var(--red);
  animation: phoneScroll 6s linear infinite;
}
.va-pcards .va-pcard:nth-child(2) { border-left-color: var(--yellow); animation-delay: -1.5s; }
.va-pcards .va-pcard:nth-child(3) { border-left-color: var(--blue);   animation-delay: -3.0s; }
.va-pcards .va-pcard:nth-child(4) { border-left-color: var(--green);  animation-delay: -4.5s; }
@keyframes phoneScroll {
  0%   { transform: translateY(120%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-200%); opacity: 0; }
}
.va-ptab {
  display: flex; gap: 8px; justify-content: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.va-ptab span { width: 16px; height: 16px; border-radius: 50%; background: var(--bg-2); }
.va-ptab span:nth-child(1) { background: var(--red); }

/* === 3. Marketing — bar chart climbing === */
.svc-anim-marketing .va-chart {
  width: 100%; max-width: 320px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.va-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.va-chart-title {
  font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--black);
}
.va-chart-up {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--green); font-weight: 600;
  background: #e7f7ec; padding: 3px 10px; border-radius: 999px;
}
.va-bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: 110px; padding-bottom: 4px;
  border-bottom: 1px dashed var(--line-2);
  margin-bottom: 14px;
}
.va-bars span {
  flex: 1; height: var(--h);
  background: linear-gradient(180deg, var(--red), #ff7280);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: barGrow 1.2s cubic-bezier(.4,1,.5,1) both;
}
.va-bars span:nth-child(1) { animation-delay: .1s; }
.va-bars span:nth-child(2) { animation-delay: .2s; }
.va-bars span:nth-child(3) { animation-delay: .3s; background: linear-gradient(180deg, var(--yellow), #fcd34d); }
.va-bars span:nth-child(4) { animation-delay: .4s; }
.va-bars span:nth-child(5) { animation-delay: .5s; background: linear-gradient(180deg, var(--blue), #6ea5ff); }
.va-bars span:nth-child(6) { animation-delay: .6s; }
.va-bars span:nth-child(7) { animation-delay: .7s; }
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.va-spark {
  width: 100%; height: 36px;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: drawLine 2.4s ease forwards .9s;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* === 4. Graphic — palette + brush === */
.svc-anim-graphic .va-palette {
  width: 100%; max-width: 300px;
  background: #fff; border-radius: 14px; padding: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.va-swatches { display: flex; gap: 8px; margin-bottom: 18px; }
.va-swatches span {
  flex: 1; aspect-ratio: 1; border-radius: 8px;
  animation: swatchPop .5s ease both;
}
.va-swatches span:nth-child(1) { animation-delay: .1s; }
.va-swatches span:nth-child(2) { animation-delay: .2s; }
.va-swatches span:nth-child(3) { animation-delay: .3s; }
.va-swatches span:nth-child(4) { animation-delay: .4s; }
.va-swatches span:nth-child(5) { animation-delay: .5s; }
.va-swatches span:nth-child(6) { animation-delay: .6s; }
@keyframes swatchPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.va-canvas {
  background: var(--bg-soft); border-radius: 8px;
  height: 90px; position: relative; overflow: hidden;
  margin-bottom: 14px;
}
.va-stroke {
  width: 100%; height: 100%;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: drawLine 2.4s ease forwards .8s, drawLine 2.4s ease infinite 4s reverse;
}
.va-cursor-pen {
  position: absolute;
  top: 30%; left: 80%;
  width: 10px; height: 10px; background: var(--black);
  border-radius: 50%;
  animation: penFollow 2.4s ease forwards .8s;
}
@keyframes penFollow {
  0%   { top: 75%; left: 5%; }
  50%  { top: 12%; left: 55%; }
  100% { top: 38%; left: 95%; }
}
.va-tools { display: flex; gap: 8px; }
.va-tool {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink-2);
}

/* === 5. Branding — concentric pulse rings === */
.svc-anim-branding .va-brand {
  position: relative;
  width: 220px; aspect-ratio: 1;
  display: grid; place-items: center;
}
.va-ring {
  position: absolute; border-radius: 50%; border: 2px solid var(--red);
  opacity: 0;
  animation: ringPulse 3s ease-out infinite;
}
.va-ring.r1 { width: 100%; height: 100%; }
.va-ring.r2 { width: 100%; height: 100%; animation-delay: -1s; }
.va-ring.r3 { width: 100%; height: 100%; animation-delay: -2s; }
@keyframes ringPulse {
  0%   { transform: scale(.4); opacity: .6; }
  100% { transform: scale(1.05); opacity: 0; }
}
.va-mark {
  width: 90px; height: 90px;
  border-radius: 22px;
  background: var(--black); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800; font-size: 38px;
  letter-spacing: -0.04em;
  box-shadow: 0 12px 28px rgba(15,17,21,.2);
  position: relative; z-index: 2;
}
.va-mark span {
  background: var(--red); color: #fff;
  border-radius: 50%; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; margin-left: 4px;
}
.va-brand-meta {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.va-color {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.va-color i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* === 6. Hosting — server rack === */
.svc-anim-hosting .va-rack {
  width: 100%; max-width: 280px;
  display: grid; gap: 6px;
}
.va-server {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 8px;
  background: #0d1117; color: #e6edf3;
  border-radius: 6px; padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.05);
}
.va-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 6px #28c840;
  animation: ledBlink 2s ease-in-out infinite;
}
.va-server:nth-child(2) .va-led { animation-delay: -.3s; }
.va-server:nth-child(3) .va-led { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); animation-delay: -.6s; }
.va-server:nth-child(4) .va-led { animation-delay: -.9s; }
.va-server:nth-child(5) .va-led { animation-delay: -1.2s; }
.va-server .va-led:nth-child(2) { background: #ff5f57; box-shadow: 0 0 6px #ff5f57; animation-delay: -1.4s; }
@keyframes ledBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.va-server-vents {
  height: 14px; border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.06) 0 4px, transparent 4px 8px);
}
.va-server-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; color: #8b949e; letter-spacing: .04em;
}
.va-uptime {
  margin-top: 6px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.va-uptime-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  animation: pulseDot 2s ease-in-out infinite;
}

/* === 7. Cloud — orbiting nodes === */
.svc-anim-cloud .va-cloud {
  position: relative;
  width: 100%; max-width: 280px; aspect-ratio: 1.2/1;
}
.va-cloud-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 4px 12px rgba(15,17,21,.08));
}
.va-cloud-svg path {
  filter: drop-shadow(0 0 12px rgba(230,57,70,.18));
}
.va-cloud-svg line {
  stroke-dasharray: 4 6; stroke-dashoffset: 0;
  animation: dashFlow 4s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -40; } }
.va-node {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  color: var(--red);
  box-shadow: var(--shadow-sm);
  animation: float 4s ease-in-out infinite;
}
.va-node.n-aws { top: 10%; left: 10%; }
.va-node.n-gcp { top: 10%; right: 10%; animation-delay: -1s; }
.va-node.n-azr { bottom: 12%; left: 10%; animation-delay: -2s; }
.va-node.n-k8s { bottom: 12%; right: 10%; animation-delay: -3s; color: var(--blue); }

/* === 8. Content — document with text lines === */
.svc-anim-content .va-doc {
  width: 100%; max-width: 280px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 22px;
  box-shadow: var(--shadow-sm);
}
.va-doc-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); font-weight: 700;
}
.va-doc-title {
  font-family: var(--sans); font-weight: 700;
  font-size: 17px; color: var(--black); margin-top: 4px;
  display: block;
}
.va-doc-body { margin-top: 18px; display: grid; gap: 9px; }
.va-doc-line {
  display: block; height: 8px; border-radius: 4px;
  background: var(--bg-2);
  position: relative; overflow: hidden;
}
.va-doc-line.w90 { width: 90%; }
.va-doc-line.w70 { width: 70%; }
.va-doc-line.w95 { width: 95%; }
.va-doc-line.w60 { width: 60%; }
.va-doc-line.w85 { width: 85%; }
.va-doc-line::after {
  content: ""; position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: lineSweep 2.8s ease-in-out infinite;
}
.va-doc-line:nth-child(1)::after { animation-delay: 0s;   }
.va-doc-line:nth-child(2)::after { animation-delay: -.4s; }
.va-doc-line:nth-child(3)::after { animation-delay: -.8s; }
.va-doc-line:nth-child(4)::after { animation-delay: -1.2s; }
.va-doc-line:nth-child(5)::after { animation-delay: -1.6s; }
@keyframes lineSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}
.va-doc-foot { margin-top: 18px; display: flex; gap: 6px; }
.va-tag {
  font-size: 11px; font-weight: 600;
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px;
  color: var(--ink-2);
}

/* === 9. Manage — dashboard with rotating gear === */
.svc-anim-manage .va-dash {
  position: relative;
  width: 100%; max-width: 300px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 22px;
  box-shadow: var(--shadow-sm);
}
.va-dash-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.va-dash-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 600; color: var(--black);
}
.va-dash-status {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e7f7ec; color: var(--green);
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.va-dot-green {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  animation: pulseDot 2s ease-in-out infinite;
}
.va-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.va-metric {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
}
.va-metric-label { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.va-metric-val   { display: block; font-family: var(--sans); font-weight: 800; font-size: 18px; color: var(--black); margin-top: 2px; }
.va-gear {
  position: absolute; right: -8px; bottom: -8px;
  width: 60px; height: 60px;
  opacity: .15;
  animation: spin 14s linear infinite;
}

/* Floating badges — same language as home hero badges */
.svc-float-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--black);
  box-shadow: var(--shadow);
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
  z-index: 3;
}
.svc-float-badge small { display: block; color: var(--ink-3); font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.svc-float-badge .dot-y, .svc-float-badge .dot-b { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.svc-float-badge .dot-y { background: var(--yellow); }
.svc-float-badge .dot-b { background: var(--blue); }
.svc-fb-1 { top: 8%; left: -4%; }
.svc-fb-2 { bottom: 8%; right: -2%; animation-delay: -3s; }

/* ----- About section ----- */
.svc-about { padding: 96px 0; }
.svc-about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.svc-codeframe {
  background: #0d1117; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #e6edf3;
}
.svc-codeframe .term-bar { background: #161b22; border-bottom: 1px solid rgba(255,255,255,.06); padding: 12px 16px; display: flex; align-items: center; gap: 6px; }
.svc-codeframe .term-body { padding: 22px 22px 26px; font-size: 13.5px; line-height: 1.95; }
.svc-codeframe .term-line { display: block; opacity: 1; transform: none; }

/* ----- Capabilities grid ----- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cap-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.cap-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--red);
  opacity: 0; transition: opacity .18s;
}
.cap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.cap-card:hover::before { opacity: 1; }
.cap-num {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .08em;
  margin-bottom: 14px;
}
.cap-card h3 {
  font-size: 17px; line-height: 1.3;
  margin-bottom: 8px; color: var(--black);
}
.cap-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

/* ----- Deliverables + Stack split ----- */
.svc-detail-split { padding: 88px 0; }
.svc-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
}
.svc-deliver-card {
  background: var(--black);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
}
.svc-deliver-card::before {
  content: ""; position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--red); opacity: .3; filter: blur(40px);
}
.svc-deliver-card .eyebrow { color: var(--yellow); }
.svc-deliver-card .eyebrow::before { background: var(--yellow); }
.svc-deliver-card h2 { color: #fff; max-width: 480px; }
.svc-deliver-list {
  list-style: none;
  margin-top: 24px;
  display: grid; gap: 14px;
  position: relative;
}
/* Block + absolute tick rather than flex. As a flex row, a <strong> label and
   the description text after it became two separate flex items, i.e. two
   ragged columns. As a block, inline content flows as one paragraph. */
.svc-deliver-list li {
  display: block;
  position: relative;
  padding-left: 36px;
  font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.svc-deliver-list li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--yellow); color: var(--black);
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
  background-size: 14px; background-repeat: no-repeat; background-position: center;
  margin-top: 2px;
}

.svc-stack-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.stack-mosaic {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.stack-chip-lg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px; font-weight: 600;
  padding: 10px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--black);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.stack-chip-lg:nth-child(3n) { background: #fff7e0; border-color: #fde68a; color: #b58900; }
.stack-chip-lg:nth-child(3n+1) { background: var(--red-soft); border-color: #fcc; color: var(--red); }
.stack-chip-lg:nth-child(3n+2) { background: #e7efff; border-color: #c7d2fe; color: var(--blue); }
.stack-chip-lg:hover { transform: translateY(-2px); }

/* ----- Process timeline ----- */
.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  counter-reset: tl;
}
.timeline::before {
  content: ""; position: absolute;
  left: 28px; right: 28px; top: 22px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
  z-index: 0;
}
.tl-step { position: relative; padding-top: 64px; z-index: 1; }
.tl-num {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, 0);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--red);
  color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 0 0 6px var(--bg);
}
.tl-step h3 { text-align: center; font-size: 17px; margin-bottom: 8px; }
.tl-step p { text-align: center; font-size: 14px; max-width: 220px; margin: 0 auto; line-height: 1.6; }

/* ----- Trust + Featured quote section ----- */
.svc-trust {
  position: relative;
  padding: 96px 0;
  background: linear-gradient(180deg, var(--bg-soft) 0%, #eef0f5 100%);
  overflow: hidden;
  isolation: isolate;
}
.svc-trust-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(360px 280px at 18% 20%, rgba(230,57,70,.12), transparent 60%),
    radial-gradient(420px 320px at 82% 80%, rgba(251,191,36,.14), transparent 60%);
}
.svc-trust-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

/* Left card */
.svc-quote-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.svc-quote-card::before {
  content: '"';
  position: absolute; top: -50px; right: 24px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 220px; line-height: 1;
  color: var(--red); opacity: .08;
  pointer-events: none;
}
.svc-quote-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.svc-quote-card .stars {
  color: var(--yellow); font-size: 18px; letter-spacing: 3px;
}
.svc-verified {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e7f7ec; color: var(--green);
  font-family: var(--sans); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
}
.svc-quote-text {
  font-family: var(--sans);
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.5; letter-spacing: -0.01em;
  color: var(--black);
  font-weight: 500;
}
.svc-quote-text em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, rgba(251,191,36,.45) 60%);
  padding: 0 2px;
}
.svc-quote-foot {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}
.avatar-lg {
  width: 52px !important; height: 52px !important;
  font-size: 19px !important;
}
.svc-quote-id strong {
  display: block; font-family: var(--sans); font-weight: 700;
  font-size: 15px; color: var(--black); letter-spacing: -0.01em;
}
.svc-quote-id small {
  display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px;
}
.svc-quote-logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--black); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 800; font-size: 13px;
  letter-spacing: .04em;
}

/* Right side trust stats */
.svc-trust-stats h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.2; margin-top: 4px; margin-bottom: 24px;
}
.svc-trust-list {
  display: grid; gap: 18px;
}
.svc-trust-row {
  display: grid; grid-template-columns: 110px 1fr;
  align-items: center; gap: 16px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.svc-trust-row:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.svc-trust-row strong {
  font-family: var(--sans); font-weight: 800;
  font-size: 36px; color: var(--red);
  letter-spacing: -0.03em; line-height: 1;
}
.svc-trust-row strong span {
  font-size: 16px; color: var(--ink-3); font-weight: 600; margin-left: 2px;
}
.svc-trust-row p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

.svc-trust-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  color: var(--red);
  transition: gap .15s;
}
.svc-trust-link:hover { gap: 12px; color: var(--red-deep); }

@media (max-width: 1024px) {
  .svc-trust-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .svc-trust { padding: 64px 0; }
  .svc-quote-card { padding: 28px 24px; }
  .svc-quote-foot { grid-template-columns: auto 1fr; }
  .svc-quote-logo { display: none; }
  .svc-trust-row { grid-template-columns: 80px 1fr; }
  .svc-trust-row strong { font-size: 28px; }
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .svc-hero3-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-hero3-art  { margin: 0 auto; max-width: 380px; }
  .svc-hero3-stats { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .svc-about-grid { grid-template-columns: 1fr; }
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-detail-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .timeline::before { display: none; }
}
@media (max-width: 540px) {
  .svc-hero-v3 { padding: 48px 0 64px; }
  .svc-hero3-stats { grid-template-columns: 1fr 1fr; }
  .svc-deliver-card, .svc-stack-card { padding: 32px 26px; }
  .cap-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 32px; }
  .quote-mark { font-size: 110px; }
  .svc-fb-1 { left: -2%; }
  .svc-fb-2 { right: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero-v3 .mesh,
  .svc-float-badge,
  .va-row, .va-pcards .va-pcard, .va-bars span, .va-spark, .va-stroke,
  .va-cursor-pen, .va-swatches span, .va-ring, .va-led, .va-cloud-svg line,
  .va-node, .va-doc-line::after, .va-gear, .va-dot-green, .va-uptime-dot,
  .va-cursor { animation: none !important; }
  .va-row, .va-swatches span { opacity: 1; }
  .va-spark, .va-stroke { stroke-dashoffset: 0; }
}

/* ---------- Contact aside (sidebar on contact page) ---------- */
.contact-aside {
  position: sticky; top: 120px;
  display: grid; gap: 18px;
}
.contact-channels {
  display: grid; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.channel {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink);
  transition: background .18s, transform .18s, color .18s;
}
.channel:hover { background: var(--red); color: #fff; transform: translateX(2px); }
.channel:hover .channel-icon { background: rgba(255,255,255,.18); color: #fff; }
.channel:hover .channel-meta small { color: rgba(255,255,255,.75); }
.channel:hover .channel-arrow { color: #fff; transform: translateX(4px); }
.channel-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--red);
  transition: background .18s, color .18s;
  flex-shrink: 0;
}
.channel-meta { display: grid; line-height: 1.2; min-width: 0; }
.channel-meta small {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.channel-meta strong {
  font-family: var(--sans); font-weight: 600; font-size: 14.5px; margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel-arrow {
  font-size: 18px; color: var(--ink-3); font-weight: 600;
  transition: color .18s, transform .18s;
}
.channel-static { cursor: default; }
.channel-static:hover { background: var(--bg-soft); color: var(--ink); transform: none; }
.channel-static:hover .channel-icon { background: #fff; color: var(--red); }
.channel-static .channel-meta strong { white-space: normal; }

.hours-card {
  background: var(--black); color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  position: relative; overflow: hidden;
}
.hours-card::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--red); opacity: .12;
}
.hours-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hours-head h3 { color: #fff; font-size: 17px; }
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
  50%     { box-shadow: 0 0 0 7px rgba(34,197,94,.05); }
}
.hours-list { list-style: none; display: grid; gap: 10px; font-size: 14px; }
.hours-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.hours-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-list span { color: rgba(255,255,255,.6); }
.hours-list strong { font-family: var(--sans); font-weight: 600; color: #fff; }
.reply-note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--yellow); font-weight: 500;
}
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }

/* ---------- OWASP risk-category tag (government security cards) ----------
   Small monospace chip mapping each control to the OWASP Top 10 category it
   addresses, so the claim is checkable rather than decorative. */
.owasp-tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7efff;
  color: var(--blue);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- Skip link (WCAG 2.4.1 Bypass Blocks) ----------
   Off-screen until it receives keyboard focus, then pinned top-left. Uses a
   real off-screen position rather than display:none, because display:none
   removes it from the focus order entirely and defeats the purpose. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s ease-in-out;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--black);
  color: rgba(255,255,255,.72);
  padding: 72px 0 32px;
  margin-top: 0;
}
/* The global `p { color: var(--ink-2) }` is a dark slate meant for light
   backgrounds, and a direct element rule beats the colour inherited from
   .site-footer — so the tagline under the logo and the copyright line were
   rendering dark-grey on the near-black footer, effectively invisible.
   Re-inherit so each paragraph picks up its section's own colour
   (.72 white in the grid, .55 white in .footer-bottom). */
.site-footer p { color: inherit; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-logo { height: 40px; background: #fff; padding: 8px 14px; border-radius: 10px; margin-bottom: 18px; }
.footer-tag { font-size: 14.5px; line-height: 1.7; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-social a[aria-label="Facebook"]:hover { background: #1877f2; color: #fff; }
.footer-social a[aria-label="WhatsApp"]:hover { background: #25d366; color: #fff; }
.footer-social a[aria-label="LinkedIn"]:hover { background: #0a66c2; color: #fff; }
.footer-col h4 {
  color: #fff; font-family: var(--sans); font-size: 14px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: rgba(255,255,255,.72); transition: color .15s; }
.footer-col a:hover { color: #fff; }
.contact-list li { font-size: 14.5px; line-height: 1.7; }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  padding-top: 28px; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.legal-links a { color: rgba(255,255,255,.7); margin: 0 4px; }
.legal-links a:hover { color: #fff; }

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, background .15s;
  z-index: 50;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--red-deep); transform: translateY(-2px); }

/* ---------- Reveal on scroll (only minimal animation) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Career / job cards ---------- */
/* ---------- Career: Benefits ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.benefit {
  position: relative;
  padding: 26px 24px;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(230,57,70,.06) 0%, transparent 55%),
    linear-gradient(160deg, #ffffff 0%, #fafafb 60%, #f3f4f8 100%);
  box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 8px 22px rgba(15,17,21,.04);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .25s ease;
}
.benefit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(230,57,70,.10) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  transition: background-position 1s ease;
}
.benefit:hover {
  transform: translateY(-5px);
  border-color: rgba(230,57,70,.22);
  box-shadow: 0 18px 40px rgba(15,17,21,.08), 0 6px 18px rgba(230,57,70,.10);
}
.benefit:hover::after { background-position: -120% 0; }
.benefit-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(230,57,70,.30);
  transition: transform .35s ease;
}
.benefit:hover .benefit-icon { transform: scale(1.06) rotate(-4deg); }
.benefit h3 { font-size: 17px; margin-bottom: 6px; }
.benefit p { font-size: 14px; line-height: 1.6; }
@media (max-width: 980px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ---------- Career: Job cards ---------- */
.jobs-list {
  display: grid;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.job-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head     action"
    "meta     action"
    "skills   action";
  gap: 14px 24px;
  align-items: start;
  padding: 26px 28px;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(251,191,36,.05) 0%, transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fafafb 60%, #f3f4f8 100%);
  box-shadow: 0 1px 2px rgba(15,17,21,.03), 0 8px 22px rgba(15,17,21,.04);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .35s;
}
.job-card:hover {
  transform: translateY(-3px);
  border-color: rgba(230,57,70,.22);
  box-shadow: 0 14px 32px rgba(15,17,21,.08), 0 4px 14px rgba(230,57,70,.10);
}
.job-card-head { grid-area: head; }
.job-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.job-dept {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  color: var(--red);
  letter-spacing: .12em; text-transform: uppercase;
}
.job-code {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  background: rgba(15,17,21,.04);
  border: 1px dashed rgba(15,17,21,.12);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.job-role {
  font-size: 18.5px; font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.job-desc { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.job-meta {
  grid-area: meta;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.job-meta li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  background: rgba(15,17,21,.04);
  padding: 4px 10px;
  border-radius: 999px;
}
.job-meta svg { color: var(--red); }
.job-skills {
  grid-area: skills;
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  border-top: 1px dashed rgba(15,17,21,.10);
  padding-top: 12px;
}
.job-skills li {
  font-size: 11.5px; font-weight: 600;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(230,57,70,.10), rgba(251,191,36,.10));
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: .02em;
}
.job-action {
  grid-area: action;
  align-self: center;
}

/* ---------- Apply popup modal ---------- */
.apply-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.apply-modal.is-open { display: flex; }
.apply-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,17,21,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: applyFade .2s ease;
}
.apply-modal-card {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 32px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15,17,21,.06);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(230,57,70,.08) 0%, transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fafafb 60%, #f3f4f8 100%);
  box-shadow: 0 30px 70px rgba(15,17,21,.30);
  animation: applyPop .25s cubic-bezier(.2,.7,.2,1);
}
/* Apply modal — real application form */
.apply-form { margin-top: 4px; }
.apply-form .form-grid { gap: 14px; margin-bottom: 20px; }
.apply-form .field textarea { min-height: 96px; }
.apply-form .field input[type="file"] {
  padding: 10px 12px;
  background: rgba(15,17,21,.02);
  cursor: pointer;
  font-size: 14px;
}
.apply-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(15,17,21,.06);
  border-radius: 50%;
  font-size: 20px; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.apply-modal-close:hover { background: rgba(230,57,70,.10); color: var(--red); }
.apply-modal-eyebrow { margin-bottom: 6px; display: block; }
.apply-modal-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.apply-modal-card h3 [data-apply-role-label] {
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.apply-modal-code {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.apply-modal-code code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(15,17,21,.05);
  border: 1px dashed rgba(15,17,21,.12);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--red);
  letter-spacing: .04em;
}
.apply-modal-msg {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.apply-modal-mail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(230,57,70,.06);
  border: 1px dashed rgba(230,57,70,.30);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 22px;
  transition: background .2s, border-color .2s;
}
.apply-modal-mail:hover {
  background: rgba(230,57,70,.10);
  border-color: var(--red);
}
.apply-modal-mail-ico {
  display: inline-flex;
  align-items: center;
  color: var(--red);
}
.apply-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@keyframes applyFade { from { opacity: 0; } }
@keyframes applyPop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
}
@media (max-width: 480px) {
  .apply-modal-card { padding: 26px 22px 20px; }
  .apply-modal-actions { justify-content: stretch; }
  .apply-modal-actions .btn { flex: 1; text-align: center; }
}
@media (max-width: 720px) {
  .job-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "meta"
      "skills"
      "action";
  }
  .job-action { align-self: stretch; }
  .job-action .btn { width: 100%; }
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--sans); font-weight: 800; font-size: 36px;
  color: var(--red); opacity: .25;
  display: block; margin-bottom: 8px;
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; }

/* ---------- Work / portfolio ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.work-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.work-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--red), #ff7280);
  display: grid; place-items: center;
  color: #fff; font-family: var(--sans); font-weight: 800;
  font-size: 32px; letter-spacing: -0.02em; padding: 24px; text-align: center;
}
.work-card:nth-child(2) .work-thumb { background: linear-gradient(135deg, var(--blue), #6ea5ff); }
.work-card:nth-child(3) .work-thumb { background: linear-gradient(135deg, var(--black), #2a2a2a); }
.work-card:nth-child(4) .work-thumb { background: linear-gradient(135deg, #f59e0b, var(--yellow)); color: var(--black); }
.work-card:nth-child(5) .work-thumb { background: linear-gradient(135deg, var(--green), #4ade80); }
.work-card:nth-child(6) .work-thumb { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.work-card:nth-child(7) .work-thumb { background: linear-gradient(135deg, #db2777, #f472b6); }
.work-card:nth-child(8) .work-thumb { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.work-body { padding: 22px 24px; }
.work-tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.work-body h3 { font-size: 18px; margin-top: 6px; }

/* ---------- Legal pages ---------- */
.legal { padding: 64px 0; }
.legal h2 { margin: 32px 0 12px; }
.legal h3 { margin: 24px 0 8px; font-size: 18px; }
.legal p, .legal li { color: var(--ink-2); font-size: 15px; margin-bottom: 12px; line-height: 1.75; }
.legal ul { padding-left: 24px; }
.legal a { color: var(--red); }

/* ---------- Responsive ---------- */
/* Narrow desktop / large tablet — drop megamenu to 2 columns */
@media (max-width: 1180px) {
  .drop-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .drop-mega { width: min(640px, calc(100vw - 32px)); }
  .header-meta { gap: 22px; }
}

@media (max-width: 1024px) {
  .header-meta { gap: 18px; }
  .meta-item small { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { margin: 0 auto; max-width: 420px; }
  .service-grid, .test-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: 1fr; }
  .nav-list > li > a { padding: 18px 14px; font-size: 14px; }
}
@media (max-width: 768px) {
  section { padding: 42px 0; }
  .topbar { display: none; } /* hide on phone — saves header height */
  .header-inner { grid-template-columns: 1fr auto; gap: 12px; padding: 14px 20px; }
  .header-meta { display: none; }
  .nav-toggle { display: flex; }
  .brand-logo { height: 36px; }
  h1 { font-size: clamp(1.7rem, 5.8vw, 2.31rem); }
  h2 { font-size: clamp(1.4rem, 4.3vw, 1.8rem); }
  .lead { font-size: 16px; }
  .nav-list {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--red);
    padding: 8px 0;
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav-list.open { max-height: 600px; }
  .nav-list > li > a { padding: 14px 24px; }
  .has-drop:hover > .drop, .has-drop:focus-within > .drop {
    position: static; box-shadow: none; background: rgba(0,0,0,.15);
    border: 0; padding: 0;
  }
  .drop a { color: rgba(255,255,255,.85); padding: 12px 36px; }
  .drop a:hover { background: rgba(0,0,0,.2); color: #fff; }

  /* Mega menu collapses to a single column inside the mobile nav */
  .has-mega:hover > .drop-mega,
  .has-mega:focus-within > .drop-mega {
    position: static; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 8px 0; background: rgba(0,0,0,.15);
    width: 100%; max-width: none;
  }
  .drop-mega-head, .drop-mega-foot { display: none; }
  .drop-mega-grid { grid-template-columns: 1fr; gap: 0; }
  .drop-mega-item { color: rgba(255,255,255,.85); padding: 12px 24px; }
  .drop-mega-item:hover { background: rgba(0,0,0,.2); transform: none; }
  .drop-mega-text strong { color: #fff; }
  .drop-mega-text small  { color: rgba(255,255,255,.6); }
  .drop-mega-ico { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .drop-icons { padding: 8px 0; }
  .drop-icons li a { padding: 12px 24px; }
  .drop-icons strong { color: #fff; }
  .drop-icons small  { color: rgba(255,255,255,.6); }
  .cta-brochure { display: none; }
  .hero { padding: 48px 0 64px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-banner { grid-template-columns: 1fr; padding: 36px 28px; text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 540px) {
  section { padding: 48px 0; }
  .container { padding: 0 16px; }
  .service-grid, .test-grid, .team-grid, .benefit-grid, .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-strip-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip strong { font-size: 28px; }
  .job-card { grid-template-columns: 1fr; }
  .page-hero { padding: 56px 0 48px; }
  .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .btn { padding: 12px 20px; font-size: 14px; }
  .btn-sm { padding: 8px 14px; font-size: 13px; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 28px 22px; text-align: left; }
  .principle { grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; }
  .principle-num { width: 44px; height: 44px; font-size: 14px; }
  .frame-strip > div { padding: 10px 8px; }
  .frame-strip strong { font-size: 18px; }
  .frame-strip small { font-size: 9.5px; }
  .split-art .frame { padding: 28px 22px; margin: 16px; }
}

/* =========================================================
   TECH ANIMATIONS
   ========================================================= */

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--blue));
  z-index: 200; transition: width .08s linear;
  box-shadow: 0 0 10px rgba(230,57,70,.5);
}

/* Hero H1 — force each phrase on its own line so typewriter never reflows */
.hero h1 .h1-line { display: block; }
.hero h1 .type-line { color: var(--red); min-height: 1.15em; }

/* Typewriter caret */
.type-wrap { display: inline-block; }
.type-text { color: var(--red); }
.type-caret {
  display: inline-block; width: 3px; height: 1em;
  background: var(--red); margin-left: 4px; vertical-align: text-bottom;
  animation: caret 1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Terminal card replacing the blob */
.terminal {
  background: #0d1117; border-radius: 14px; box-shadow: var(--shadow-lg);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #e6edf3; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,.08);
}
.terminal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px
  );
  animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 -200px; }
}
.term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px; background: #161b22; border-bottom: 1px solid rgba(255,255,255,.06);
}
.term-dot { width: 12px; height: 12px; border-radius: 50%; }
.term-dot.r { background: #ff5f57; }
.term-dot.y { background: #febc2e; }
.term-dot.g { background: #28c840; }
.term-title {
  margin-left: auto; font-size: 12px; color: #8b949e; letter-spacing: .04em;
}
.term-body { padding: 22px 22px 26px; font-size: 13.5px; line-height: 1.85; min-height: 280px; }
.term-line { display: block; }
.term-prompt { color: #7ee787; }
.term-flag   { color: var(--yellow); }
.term-str    { color: #79c0ff; }
.term-key    { color: #ff7b72; }
.term-comment{ color: #6e7681; font-style: italic; }
.term-out    { color: #c9d1d9; }
.term-cursor {
  display: inline-block; width: 8px; height: 1em; background: #7ee787;
  vertical-align: text-bottom; margin-left: 2px;
  animation: caret 1s steps(2) infinite;
}

/* Terminal line reveal */
.term-line { opacity: 0; transform: translateX(-6px); }
.term-line.in {
  opacity: 1; transform: none;
  transition: opacity .35s ease, transform .35s ease;
}

/* Marquee tech ticker */
.tech-marquee {
  background: var(--black); color: rgba(255,255,255,.7);
  padding: 22px 0; overflow: hidden; position: relative;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tech-marquee::before, .tech-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.tech-marquee::before { left: 0;  background: linear-gradient(90deg, var(--black), transparent); }
.tech-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--black), transparent); }
.tech-track {
  display: flex; gap: 56px; width: max-content;
  animation: marquee 38s linear infinite;
}
.tech-marquee:hover .tech-track { animation-play-state: paused; }
.tech-track span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.85); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 14px;
}
.tech-track span::after {
  content: "·"; color: var(--red); font-size: 22px;
}
/* Service-name pills — bold, red, clickable */
.tech-track .svc-svc {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}
.tech-track .svc-svc a {
  color: #fff;
  position: relative;
  transition: color .15s;
}
.tech-track .svc-svc a:hover { color: var(--red); }
.tech-track .svc-svc a::before {
  content: "";
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red);
  margin-right: 12px; vertical-align: middle;
  box-shadow: 0 0 12px var(--red);
}
/* Skill / sub-stack pills — quieter, mono */
.tech-track .svc-skill {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.55);
}
.tech-track .svc-skill::after { color: rgba(255,255,255,.25); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Tilt cards (set in JS via CSS vars) */
.tilt {
  transform: perspective(900px)
             rotateX(var(--ry, 0deg))
             rotateY(var(--rx, 0deg))
             translateZ(0);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
}
.tilt-shine {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(230,57,70,.18), transparent 40%
  );
  opacity: 0; transition: opacity .2s ease;
}
.tilt:hover .tilt-shine { opacity: 1; }

/* Magnetic ripple on buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--bx, -100%) var(--by, -100%),
    rgba(255,255,255,.28), transparent 60%
  );
  pointer-events: none; transition: background-position .2s;
}

/* ============================================================
   Site-wide subtle "wiggle" on card hover.
   Uses the modern `rotate` property so it composes cleanly with
   existing translate/scale hover transforms and JS-driven tilt.
   ============================================================ */
@keyframes cardWiggle {
  0%   { rotate: 0deg; }
  20%  { rotate: -1.2deg; }
  40%  { rotate:  1.2deg; }
  60%  { rotate: -0.6deg; }
  80%  { rotate:  0.4deg; }
  100% { rotate: 0deg; }
}

@media (hover: hover) {
  .service-card:hover,
  .team-card:hover,
  .benefit:hover,
  .job-card:hover,
  .test-card:hover,
  .client-card:hover,
  .industry-pill:hover,
  .step:hover,
  .cap-card:hover,
  .pillar:hover,
  .work-card:hover,
  .stack-chip-lg:hover,
  .test-card:hover .avatar,
  .stat:hover,
  .frame-strip > div:hover {
    animation: cardWiggle .55s cubic-bezier(.36,.07,.19,.97) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .team-card:hover,
  .benefit:hover,
  .job-card:hover,
  .test-card:hover,
  .client-card:hover,
  .industry-pill:hover,
  .step:hover,
  .cap-card:hover,
  .pillar:hover,
  .work-card:hover,
  .stack-chip-lg:hover,
  .stat:hover { animation: none !important; }
}

/* Service icon animated ring — uses an explicit brand colour per variant
   so it's visible on the white card background regardless of hover text color */
.service-card .icon { position: relative; }
.service-card .icon::before {
  content: ""; position: absolute; inset: -4px; border-radius: 14px;
  border: 1.5px dashed var(--red);
  opacity: 0;
  transition: opacity .25s ease, transform .6s ease;
}
.service-card.alt  .icon::before { border-color: var(--yellow); }
.service-card.cool .icon::before { border-color: var(--blue); }
.service-card:hover .icon::before {
  opacity: .65; animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Number count-up — visual only, value comes from JS */
.count {
  font-variant-numeric: tabular-nums;
}

/* Glitch on hover for hero accent */
.glitch { position: relative; display: inline-block; }
.glitch:hover::before, .glitch:hover::after {
  content: attr(data-text); position: absolute; inset: 0;
  pointer-events: none;
}
.glitch:hover::before { color: var(--blue);   transform: translate(-2px, 0); mix-blend-mode: screen; }
.glitch:hover::after  { color: var(--yellow); transform: translate(2px, 0);  mix-blend-mode: screen; }

/* Floating dots / particles in stats strip */
.stats-strip { position: relative; overflow: hidden; }
.stats-strip::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(230,57,70,.22), transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(251,191,36,.22), transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(37,99,235,.22), transparent 1px),
    radial-gradient(circle at 65% 20%, rgba(255,255,255,.06), transparent 1px);
  background-size: 3px 3px, 4px 4px, 5px 5px, 6px 6px;
  opacity: .6;
}

/* Section diagonal divider on dark sections */
.stats-strip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px)); padding-bottom: 56px; }

/* Hero badge tiny float */
.hero-art .badge { animation: float 6s ease-in-out infinite; }
.hero-art .badge.b-2 { animation-delay: -3s; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* ---------- Hero floating decorations (multi-style) ---------- */
.hero-fx {
  position: absolute;
  z-index: 3;
  font-family: var(--sans);
  pointer-events: none;
}

/* 1. Analytics chart card — top-left, slow floatY */
.hero-fx-chart {
  top: -4%;
  left: -14%;
  width: 168px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  animation: fxFloatY 5.2s ease-in-out infinite;
}
.fx-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink-2);
  margin-bottom: 8px;
}
.fx-chart-head .fx-chart-up { color: var(--green); font-size: 10.5px; }
.fx-chart-bars {
  display: flex; align-items: flex-end; gap: 5px;
  height: 46px;
}
.fx-chart-bars span {
  flex: 1;
  background: linear-gradient(180deg, var(--red) 0%, #ff8088 100%);
  border-radius: 3px 3px 0 0;
  height: var(--h);
  animation: fxBarPulse 2.2s ease-in-out infinite;
}
.fx-chart-bars span:nth-child(2) { animation-delay: .15s; }
.fx-chart-bars span:nth-child(3) { animation-delay: .30s; }
.fx-chart-bars span:nth-child(4) { animation-delay: .45s; }
.fx-chart-bars span:nth-child(5) { animation-delay: .60s; }
.fx-chart-bars span:nth-child(6) { animation-delay: .75s; }

/* 2. Mini phone — right side, drift + tilt */
.hero-fx-phone {
  top: 18%;
  right: -12%;
  width: 70px;
  height: 130px;
  background: linear-gradient(160deg, #1a1d23 0%, #0f1115 100%);
  border-radius: 14px;
  padding: 14px 8px 8px;
  border: 2px solid #2a2d36;
  box-shadow: 0 18px 36px rgba(15,17,21,.35);
  animation: fxDrift 7s ease-in-out infinite;
}
.fx-phone-notch {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 4px; background: #000; border-radius: 0 0 6px 6px;
}
.fx-phone-row {
  display: block; height: 6px; border-radius: 3px;
  margin: 6px auto;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 100%);
  background-size: 200% 100%;
  animation: fxShimmer 2.4s linear infinite;
}
.fx-phone-row.r1 { width: 80%; }
.fx-phone-row.r2 { width: 55%; animation-delay: .3s; }
.fx-phone-row.r3 { width: 70%; animation-delay: .6s; }
.fx-phone-home {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; background: #4a5060; border-radius: 2px;
}

/* 3. Pulse orb (brand mark) — bottom-left, glowing rings */
.hero-fx-orb {
  bottom: -4%;
  left: -6%;
  width: 84px;
  height: 84px;
  display: grid; place-items: center;
  animation: fxFloatY 6.5s ease-in-out infinite;
  animation-delay: -1.5s;
}
.fx-orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--red);
}
.fx-orb-ring.r1 { inset: 0; opacity: .8; animation: fxRing 2.2s ease-out infinite; }
.fx-orb-ring.r2 { inset: 0; opacity: .55; animation: fxRing 2.2s ease-out infinite; animation-delay: 1.1s; }
.fx-orb-core {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff; font-weight: 800; font-size: 22px;
  box-shadow: 0 8px 24px rgba(230,57,70,.45);
}

/* 4. Code snippet card — bottom-right, tilt drift */
.hero-fx-code {
  right: -10%;
  bottom: 8%;
  width: 200px;
  padding: 12px 14px;
  background: #0f1115;
  border-radius: 12px;
  border: 1px solid #2a2d36;
  box-shadow: 0 14px 30px rgba(15,17,21,.35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c9d1d9;
  animation: fxTilt 6s ease-in-out infinite;
}
.fx-code-line { display: block; }
.fx-code-line .t-key { color: #ff7b72; font-style: normal; }
.fx-code-line .t-var { color: #d2a8ff; font-style: normal; }
.fx-code-line .t-str { color: #79c0ff; font-style: normal; }
.fx-code-line .t-fn  { color: #f0b429; font-style: normal; }

/* 5. Orbital sparks — sweep around terminal */
.hero-fx-spark {
  inset: 0;
  pointer-events: none;
}
.hero-fx-spark span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(251,191,36,.7);
}
.hero-fx-spark span:nth-child(1) { top: 8%;  left: 6%;  background: var(--blue);   animation: fxSpark 4.5s ease-in-out infinite; }
.hero-fx-spark span:nth-child(2) { top: 20%; right: 4%; background: var(--yellow); animation: fxSpark 5.8s ease-in-out infinite; animation-delay: -1.2s; }
.hero-fx-spark span:nth-child(3) { bottom: 22%; left: 4%; background: var(--red);  animation: fxSpark 6.2s ease-in-out infinite; animation-delay: -2.1s; }
.hero-fx-spark span:nth-child(4) { bottom: 8%; right: 18%; background: var(--green); animation: fxSpark 5.0s ease-in-out infinite; animation-delay: -3.2s; }

/* Keyframes */
@keyframes fxFloatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
@keyframes fxDrift {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(-6px,-10px) rotate(-3deg); }
}
@keyframes fxTilt {
  0%,100% { transform: translate(0,0) rotate(2deg); }
  50%     { transform: translate(4px,-8px) rotate(-1deg); }
}
@keyframes fxBarPulse {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(.55); }
}
@keyframes fxRing {
  0%   { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes fxShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes fxSpark {
  0%,100% { transform: translate(0,0) scale(1);   opacity: .9; }
  50%     { transform: translate(8px,-12px) scale(1.3); opacity: .5; }
}

/* Tablet: pull decorations in so they don't overflow off-screen */
@media (max-width: 980px) {
  .hero-fx-chart { left: -4%; top: -2%; width: 150px; }
  .hero-fx-phone { right: -2%; }
  .hero-fx-code  { right: -2%; bottom: 6%; width: 170px; }
  .hero-fx-orb   { left: 2%; bottom: -2%; }
}
@media (max-width: 720px) {
  .hero-fx { display: none; }
}

/* ---------- Hero text entrance + accent shine ---------- */
.h1-anim {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  animation: heroIn .9s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Cycling accent — bright shine sweep across the typed word */
.hero h1 .type-wrap.accent .type-text {
  background-image: linear-gradient(
    100deg,
    var(--red) 0%,
    var(--red) 30%,
    #ffd560   45%,
    #ffffff   50%,
    #ff6b75   55%,
    var(--red) 70%,
    var(--red) 100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline-block;
  animation: accentShine 3.5s linear infinite;
}
@keyframes accentShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.hero h1 .type-wrap.accent .type-caret {
  -webkit-text-fill-color: var(--red);
          color: var(--red);
  background: var(--red);
}

/* Reduced motion: skip entrance + shimmer, just show */
@media (prefers-reduced-motion: reduce) {
  .h1-anim {
    opacity: 1; transform: none; filter: none; animation: none;
  }
  .hero h1 .type-wrap.accent .type-text {
    animation: none;
    background-image: none;
    color: var(--red);
    -webkit-text-fill-color: var(--red);
  }
}

/* ---------- "AI-powered solutions" headline animations ---------- */
.ai-head {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .15em .45em;
  position: relative;
  /* Opt out of the global h1/h2 gradient — this heading has its own .ai-grad accent */
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--black) !important;
          color: var(--black) !important;
  animation: none !important;
}
.ai-head .ai-line {
  /* Inherit explicit solid color so spans render properly while opacity-animating */
  color: var(--black);
  -webkit-text-fill-color: var(--black);
}

/* Twinkling sparkle */
.ai-head .ai-spark {
  display: inline-block;
  color: var(--yellow);
  font-size: 1.05em;
  text-shadow: 0 0 18px rgba(251,191,36,.55);
  animation: aiSparkPulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes aiSparkPulse {
  0%, 100% { transform: rotate(0)      scale(1);    opacity: 1; }
  50%      { transform: rotate(180deg) scale(1.35); opacity: .7; }
}

/* Each phrase fades up sequentially when section reveals */
.ai-head .ai-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
}
.section-head.in .ai-head .ai-line {
  animation: aiLineIn .85s cubic-bezier(.2,.7,.2,1) forwards;
}
.section-head.in .ai-head .ai-line:nth-of-type(1) { animation-delay: .15s; }
.section-head.in .ai-head .ai-line:nth-of-type(2) { animation-delay: .40s; }
@keyframes aiLineIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Gradient shine on "AI-powered" */
.ai-head .ai-grad {
  background-image: linear-gradient(
    100deg,
    var(--red)   0%,
    var(--red)   30%,
    #ffd560     45%,
    #ffffff     50%,
    #ff6b75     55%,
    var(--red)   70%,
    var(--red)  100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline-block;
  animation: aiGradSweep 4.5s linear infinite;
}
@keyframes aiGradSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-head .ai-spark,
  .ai-head .ai-grad { animation: none; }
  .ai-head .ai-line { opacity: 1; transform: none; filter: none; animation: none; }
  .ai-head .ai-grad {
    background-image: none;
    color: var(--red);
    -webkit-text-fill-color: var(--red);
  }
}

/* ---------- Site-wide animated gradient page headings ---------- */
/* Applies to every subpage <h1> inside .page-hero (about / contact / journey
   / services / work / team / testimonials / privacy / terms / career), plus
   the .svc-accent on service-detail pages. */

.page-hero h1,
.svc-hero-v3 .svc-accent {
  background-image: linear-gradient(
    100deg,
    #c92b38   0%,
    var(--red) 22%,
    #ff6b75   42%,
    #ffd560   50%,
    #ff6b75   58%,
    var(--red) 78%,
    #c92b38  100%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  display: inline-block;
  /* Entrance only. The infinite `pageHeadShine` is deliberately not applied:
     an endlessly animating background-position on a background-clip:text
     element gets promoted to its own compositing layer, and Chrome then
     paints that layer at the wrong offset once the heading wraps to more
     than one line — text landed on the previous line or was dropped
     altogether. Single-line headings looked fine, which is why this hid
     for so long. Layout was always correct; only the paint was wrong. */
  animation: pageHeadIn .9s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes pageHeadIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes pageHeadShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Service-detail accent already lives inside an h1; let it inherit the
   wrapping h1's font-size but keep its own gradient + animation.

   The infinite `pageHeadShine` is dropped here: an endlessly animating
   background-position on a background-clip:text span gets promoted to its
   own compositing layer, and Chrome paints that layer at the wrong offset
   inside a multi-line h1 — the service title rendered a full line-height
   too high, on top of the "We build" line, with its tail left behind on the
   correct line. Layout was always correct; only the paint was wrong. The
   one-shot entrance animation composites fine, so that one stays. */
.svc-hero-v3 .svc-accent {
  display: inline-block;
  animation: pageHeadIn .9s cubic-bezier(.2,.7,.2,1) both;
}

/* Hide the existing decorative ::after underline on .svc-accent so it doesn't
   render against the transparent gradient text. */
.svc-hero-v3 .svc-accent::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .page-hero h1,
  .svc-hero-v3 .svc-accent {
    animation: none;
    background-image: none;
    color: var(--black);
    -webkit-text-fill-color: var(--black);
  }
  .svc-hero-v3 .svc-accent { color: var(--red); -webkit-text-fill-color: var(--red); }
}

/* ============================================================
   Site-wide H1 + H2 animated gradient + entrance reveal
   Applies to every heading except those explicitly opted out
   (dark-background headings — handled in the override block).
   ============================================================ */

h1, h2 {
  background-image: linear-gradient(
    100deg,
    #c92b38   0%,
    var(--red) 22%,
    #ff6b75   42%,
    #ffd560   50%,
    #ff6b75   58%,
    var(--red) 78%,
    #c92b38  100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: headShine 8s linear infinite;
}
@keyframes headShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* Entrance fade-up for headings inside .reveal sections (triggered by JS) */
.reveal h1,
.reveal h2 {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition:
    opacity   .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1),
    filter    .8s ease;
}
.reveal.in h1,
.reveal.in h2 {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Dark-background overrides — keep these solid white, no gradient */
.cta-banner h2,
.svc-deliver-card h2,
.stats-strip h2,
.test-card.featured h2,
.svc-quote-card h2,
.svc-trust-stats h2,
h1[style*="#fff"], h2[style*="#fff"],
h1[style*="color:#fff"], h2[style*="color:#fff"] {
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
          color: #fff !important;
  animation: none !important;
}

/* Homepage hero H1: keep plain black — its child .h1-line spans have their own
   transform animations that don't compose well with parent background-clip:text. */
.hero h1.hero-h1 {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--black) !important;
          color: var(--black) !important;
  animation: none !important;
}
.hero h1.hero-h1 .h1-line {
  background: none !important;
  background-image: none !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

/* Service-hero H1: same opt-out, same reason. This h1 is built from three
   stacked .h1-line spans and the middle one (.svc-accent) carries its own
   gradient + background-clip:text. Nesting that inside a parent h1 that is
   ALSO background-clip:text makes the accent paint against the parent's text
   clip instead of its own line box, so the service title landed on top of
   "We build" and its tail wrapped onto the next line. The accent keeps its
   own gradient (rule above); the wrapping h1 just goes back to solid text. */
.svc-hero-v3 h1 {
  background: none !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--black) !important;
          color: var(--black) !important;
  animation: none !important;
}
.svc-hero-v3 h1 .h1-line {
  -webkit-text-fill-color: var(--black);
          color: var(--black);
}
/* The cycling-accent line keeps its own gradient (handled by .type-wrap.accent rule below). */

/* ============================================================
   Journey "success road" — alternating cards along a gradient
   spine with year-circle markers and a glowing finish.
   ============================================================ */
.journey-tree {
  list-style: none;
  position: relative;
  max-width: 980px;
  margin: 56px auto 40px;
  padding: 36px 0 50px;
}

/* The road — gradient stripe with dashed center line + soft glow */
.journey-tree::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 8px;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.7) 0,
      rgba(255,255,255,.7) 10px,
      transparent 10px,
      transparent 22px),
    linear-gradient(180deg, #c92b38 0%, var(--red) 25%, var(--yellow) 65%, var(--green) 100%);
  transform: translateX(-50%);
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(230,57,70,.18), inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Start flag at the top of the road */
.journey-tree::after {
  content: '🏁';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  z-index: 2;
}

.journey-step {
  position: relative;
  width: calc(50% - 56px);
  margin-bottom: 28px;
  box-sizing: border-box;
}
.journey-step:nth-child(odd)  { margin-left: calc(50% + 56px); }
.journey-step:nth-child(even) { margin-left: 0; margin-right: calc(50% + 56px); text-align: right; }

/* Year circle on the road */
.journey-year {
  position: absolute;
  top: 4px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red) 0%, #ff6b75 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px rgba(230,57,70,.30), 0 8px 18px rgba(0,0,0,.18);
  z-index: 2;
}
.journey-step:nth-child(odd)  .journey-year { left:  -84px; }
.journey-step:nth-child(even) .journey-year { right: -84px; }

/* Branch connector from year-circle to card */
.journey-step .journey-card::before {
  content: '';
  position: absolute;
  top: 36px;
  height: 3px;
  width: 28px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), rgba(230,57,70,.15));
}
.journey-step:nth-child(odd)  .journey-card::before { left: -32px; }
.journey-step:nth-child(even) .journey-card::before { right: -32px; background: linear-gradient(270deg, var(--red), rgba(230,57,70,.15)); }

/* Card */
.journey-card {
  position: relative;
  background: linear-gradient(155deg, #ffffff 0%, #fafafb 55%, #f3f4f8 100%);
  border: 1px solid rgba(15,17,21,.06);
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 4px 18px rgba(15,17,21,.06);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .25s ease;
}
.journey-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15,17,21,.10), 0 4px 14px rgba(230,57,70,.15);
  border-color: rgba(230,57,70,.20);
}
.journey-card h3 {
  font-size: 19px;
  margin-bottom: 6px;
  background: none;
  -webkit-text-fill-color: var(--black);
          color: var(--black);
  animation: none;
}
.journey-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* "Today" milestone — bigger, glowing yellow marker + dark card */
.journey-step-now .journey-year {
  background: linear-gradient(135deg, var(--yellow) 0%, #f59e0b 100%);
  box-shadow: 0 0 0 4px rgba(251,191,36,.40), 0 8px 22px rgba(0,0,0,.22);
  animation: journeyPulse 2.2s ease-in-out infinite;
}
.journey-step-now .journey-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(251,191,36,.18) 0%, transparent 55%),
    linear-gradient(155deg, #ffffff 0%, #fff7e9 55%, #ffe9d6 100%);
  border-color: rgba(230,57,70,.22);
  box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 14px 30px rgba(230,57,70,.08);
}

/* End marker — rocket below the last step */
.journey-step-now::after {
  content: '🚀';
  position: absolute;
  bottom: -52px; left: -84px;
  font-size: 32px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
  animation: rocketBob 3s ease-in-out infinite;
}
.journey-step-now:nth-child(even)::after { left: auto; right: -84px; }

@keyframes journeyPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(251,191,36,.40), 0 8px 22px rgba(0,0,0,.22); }
  50%      { box-shadow: 0 0 0 12px rgba(251,191,36,.18), 0 8px 22px rgba(0,0,0,.22); }
}
@keyframes rocketBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(-3deg); }
}

/* Stagger entrance when scrolled into view */
.journey-tree .journey-step {
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity   .7s cubic-bezier(.2,.7,.2,1),
    transform .7s cubic-bezier(.2,.7,.2,1);
}
.journey-tree:not(.in) .journey-step:nth-child(odd)  { transform: translateX(40px); }
.journey-tree:not(.in) .journey-step:nth-child(even) { transform: translateX(-40px); }
.journey-tree.in .journey-step { opacity: 1; transform: translateX(0); }
.journey-tree.in .journey-step:nth-child(1) { transition-delay: .00s; }
.journey-tree.in .journey-step:nth-child(2) { transition-delay: .08s; }
.journey-tree.in .journey-step:nth-child(3) { transition-delay: .16s; }
.journey-tree.in .journey-step:nth-child(4) { transition-delay: .24s; }
.journey-tree.in .journey-step:nth-child(5) { transition-delay: .32s; }
.journey-tree.in .journey-step:nth-child(6) { transition-delay: .40s; }
.journey-tree.in .journey-step:nth-child(7) { transition-delay: .48s; }
.journey-tree.in .journey-step:nth-child(8) { transition-delay: .56s; }
.journey-tree.in .journey-step:nth-child(9) { transition-delay: .64s; }

/* Mobile: stack to one side */
@media (max-width: 720px) {
  .journey-tree { padding: 32px 0 60px; }
  .journey-tree::before { left: 28px; transform: none; }
  .journey-tree::after  { left: 28px; }
  .journey-step,
  .journey-step:nth-child(odd),
  .journey-step:nth-child(even) {
    width: 100%;
    margin: 0 0 24px 0;
    padding-left: 100px;
    text-align: left;
  }
  .journey-step .journey-year,
  .journey-step:nth-child(odd) .journey-year,
  .journey-step:nth-child(even) .journey-year {
    left: 0; right: auto;
    width: 56px; height: 56px;
    font-size: 13px;
  }
  .journey-step .journey-card::before,
  .journey-step:nth-child(odd) .journey-card::before,
  .journey-step:nth-child(even) .journey-card::before {
    left: -28px; right: auto;
    background: linear-gradient(90deg, var(--red), rgba(230,57,70,.15));
  }
  .journey-step-now::after,
  .journey-step-now:nth-child(even)::after {
    left: 0; right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-step-now .journey-year,
  .journey-step-now::after { animation: none; }
  .journey-tree .journey-step { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  h1, h2 { animation: none; }
  .reveal h1, .reveal h2 { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Marquee fallback / responsive tweak */
@media (max-width: 540px) {
  .tech-track { gap: 32px; }
  .tech-track span { font-size: 15px; }
  .terminal .term-body { font-size: 12.5px; min-height: 240px; }
}

/* Reduced motion: kill marquee, mesh, rain, scanlines, float */
@media (prefers-reduced-motion: reduce) {
  .tech-track,
  .hero .mesh,
  .hero-art .badge,
  .hero-fx,
  .hero-fx *,
  .terminal::after,
  .type-caret,
  .term-cursor,
  .service-card:hover .icon::before { animation: none !important; }
  .scroll-progress { transition: none; }
}

/* ============================================================
 * Why Gagan APPS (home) — dark theme, cards-first, heading below
 * ============================================================ */
.why-gagan-section {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(230,57,70,.18) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(180deg, #14171c 0%, #0c0e12 100%);
  color: #fff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
/* Three cards per row across the full container — visually mirrors the
   Clients grid above. Inside each card: icon left, title + short body right.
   Breakpoints follow the site-wide pattern (1024 → 2 col, 540 → 1 col). */
.why-gagan-section .benefit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 1024px) {
  .why-gagan-section .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .why-gagan-section .benefit-grid { grid-template-columns: 1fr; }
}
.why-gagan-section .benefit {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas:
    "icon  title"
    "icon  body";
  column-gap: 16px;
  row-gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px 22px;
  transition: background .2s, border-color .2s, transform .2s;
}
.why-gagan-section .benefit:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(230,57,70,.45);
  transform: translateY(-2px);
}
.why-gagan-section .benefit-icon {
  grid-area: icon;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  border-radius: 11px;
  background: rgba(230,57,70,.14);
  color: var(--red);
  border: 1px solid rgba(230,57,70,.28);
}
.why-gagan-section .benefit h3 {
  grid-area: title;
  color: #fff;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  align-self: center;
}
.why-gagan-section .benefit p {
  grid-area: body;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.55;
  margin: 4px 0 0;
}
.why-gagan-foot {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.why-gagan-foot .eyebrow {
  color: var(--red);
}
.why-gagan-foot h2 {
  color: #fff;
  margin-top: 8px;
}
.why-gagan-foot > p {
  color: rgba(255,255,255,.72);
  margin-top: 14px;
}

/* ============================================================
 * Success popup — opens automatically after a form submits OK
 * ============================================================ */
.success-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.success-modal.is-open { display: flex; }
.success-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,17,21,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: successFade .2s ease;
}
.success-modal-card {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  padding: 36px 32px 28px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(15,17,21,.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(15,17,21,.30);
  animation: successPop .25s cubic-bezier(.2,.7,.2,1);
}
.success-modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(15,17,21,.06);
  border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.success-modal-close:hover { background: rgba(230,57,70,.10); color: var(--red); }
.success-modal-icon {
  display: inline-grid; place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #e7f7ec;
  color: #166534;
  margin-bottom: 18px;
  animation: successPop .35s .05s backwards cubic-bezier(.2,.7,.2,1);
}
.success-modal-card h3 {
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.success-modal-msg {
  color: var(--ink-2);
  margin-bottom: 22px;
  line-height: 1.6;
  font-size: 15px;
}
.success-modal-ok { min-width: 140px; justify-content: center; }
@keyframes successFade { from { opacity: 0; } }
@keyframes successPop  { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@media (max-width: 480px) {
  .success-modal-card { padding: 28px 22px 22px; }
}

/* ---------- Sub-hero: breadcrumb alignment on small screens ---------- */
@media (max-width: 700px) {
  /* Not enough width for heading and crumbs side by side — stack them, with
     the breadcrumb back on its own line at the left. */
  .page-hero .container { display: block; }
  .page-hero .breadcrumb {
    text-align: left;
    margin-bottom: 10px;
    white-space: normal;
  }
  .page-hero { padding: 36px 0 28px; }
  .svc-hero-v3 { padding: 32px 0 48px; }
}