:root {
  --bg: #070300;
  --bg-2: #120a06;
  --creme: #FFF6F3;
  --surface: rgba(255, 246, 243, 0.04);
  --surface-hover: rgba(255, 246, 243, 0.08);
  --border: rgba(255, 246, 243, 0.09);
  --border-strong: rgba(255, 246, 243, 0.16);
  --text: #FFF6F3;
  --text-dim: #c9bfb9;
  --text-muted: #8a827e;
  --accent: #FA4615;
  --accent-2: #ff7a42;
  --accent-glow: rgba(250, 70, 21, 0.38);
  --gradient: linear-gradient(135deg, #FA4615 0%, #ff6a3d 50%, #ff9b72 100%);
}

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

/* Keyboard focus. The browser default outline is near-invisible on #070300,
   and only two components defined their own. :where() keeps specificity at
   zero so any component-level focus style still wins. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* scroll-behavior: smooth removed — interferes with trackpad/wheel scroll
   and causes a 'sticky' feeling. Anchor links still work, just without
   forced animation. */
html { }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(250, 70, 21, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

/* ---------- NAVBAR ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0.75rem 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background: rgba(7, 3, 0, 0.85);
  border-bottom: 1px solid var(--border);
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  transform: translateZ(0);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
/* The wordmark SVG is cropped to the artwork's own bounds via its viewBox,
   so it can be sized directly — no oversize-and-negative-margin crop needed. */
.logo-wordmark {
  height: 36px;
  width: auto;
  display: block;
}
.footer-brand .logo-wordmark {
  height: 36px;
}
.logo-icon {
  height: 40px;
  width: 40px;
  display: block;
}
@media (max-width: 640px) {
  .logo-wordmark {
    height: 30px;
  }
}
.nav-links {
  display: flex;
  gap: 1.625rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.active:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
}
.nav-links a.nav-cta {
  padding: 0.6rem 1.2rem;
  background: var(--gradient);
  color: #0a0a0f;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 1.5rem;
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-content {
  max-width: 640px;
}
.hero-visual {
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  width: 100%;
  margin-left: auto;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 70, 21, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(255, 246, 243, 0.04), rgba(255, 246, 243, 0.01));
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 80px rgba(250, 70, 21, 0.15);
}

.stage-glow {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(250, 70, 21, 0.4), transparent 30%);
  animation: stageSpin 12s linear infinite;
  opacity: 0.5;
}
@keyframes stageSpin {
  to { transform: rotate(360deg); }
}

.stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 246, 243, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 246, 243, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}

.orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px dashed rgba(250, 70, 21, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: orbitSpin 18s linear infinite;
}
.orbit-1 { width: 45%; height: 45%; animation-duration: 14s; }
.orbit-2 { width: 65%; height: 65%; animation-duration: 22s; animation-direction: reverse; border-style: dotted; border-color: rgba(255, 246, 243, 0.12); }
.orbit-3 { width: 88%; height: 88%; animation-duration: 32s; border-color: rgba(250, 70, 21, 0.15); }
@keyframes orbitSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.stage-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 96px; height: 96px;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 40px var(--accent-glow), inset 0 0 20px rgba(250, 70, 21, 0.1);
  animation: corePulse 3s ease-in-out infinite;
  z-index: 3;
}
.stage-core img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 40px var(--accent-glow), inset 0 0 20px rgba(250, 70, 21, 0.1); }
  50% { box-shadow: 0 0 60px var(--accent-glow), inset 0 0 30px rgba(250, 70, 21, 0.2); }
}

.tile {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: rgba(18, 10, 6, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 4;
}
.tile-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.tile-1 { top: 10%; left: 8%; animation: tileFloat 5s ease-in-out infinite; }
.tile-2 { top: 18%; right: 6%; animation: tileFloat 6s ease-in-out infinite 1.5s; }
.tile-3 { bottom: 18%; left: 5%; animation: tileFloat 5.5s ease-in-out infinite 2s; }
.tile-4 { bottom: 12%; right: 8%; animation: tileFloat 6.5s ease-in-out infinite 0.8s; }
@keyframes tileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  opacity: 0;
}
.spark-1 { top: 30%; left: 30%; animation: sparkTwinkle 3s ease-in-out infinite; }
.spark-2 { top: 65%; left: 70%; animation: sparkTwinkle 3s ease-in-out infinite 0.6s; }
.spark-3 { top: 45%; left: 20%; animation: sparkTwinkle 3s ease-in-out infinite 1.2s; }
.spark-4 { top: 25%; left: 75%; animation: sparkTwinkle 3s ease-in-out infinite 1.8s; }
.spark-5 { top: 75%; left: 40%; animation: sparkTwinkle 3s ease-in-out infinite 2.4s; }
@keyframes sparkTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.5); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}
.hero-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero h1 .gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  font-size: 1.15rem;
  color: var(--text-dim);
  max-width: 620px;
  margin-bottom: 2.5rem;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-primary {
  background: var(--gradient);
  color: #0a0a0f;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow);
}
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

/* ---------- SECTIONS ---------- */
section {
  padding: 6rem 0;
  position: relative;
}
.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4rem;
}
.section-eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.section-header p {
  color: var(--text-dim);
  font-size: 1.1rem;
}

/* ---------- GRID / CARDS ---------- */
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent, var(--accent), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.15), rgba(255, 144, 64, 0.05));
  border: 1px solid rgba(255, 106, 0, 0.25);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--accent);
}
.card-image {
  width: calc(100% + 4rem);
  aspect-ratio: 16 / 9;
  margin: -2rem -2rem 1.5rem;
  object-fit: cover;
  object-position: center;
  border-radius: 20px 20px 0 0;
  display: block;
}
@media (max-width: 900px) {
  .card-image { aspect-ratio: 16 / 10; }
}
.card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}
.card p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  margin-top: 1.25rem;
  transition: gap 0.2s ease;
}
.card .card-link:hover { gap: 0.7rem; }
.card-list {
  margin-top: 1rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  padding-left: 1.2rem;
}

/* ---------- FEATURED / SPECIAL ---------- */
.featured-card {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.1), rgba(255, 144, 64, 0.03));
  border: 1px solid rgba(255, 106, 0, 0.25);
}
.featured-badge {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  background: var(--gradient);
  color: #0a0a0f;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- WHY CHOOSE ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why-item {
  text-align: left;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.why-number {
  font-size: 3rem;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 1rem;
}

/* ---------- TESTIMONIALS ---------- */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
}
.testimonial .quote-mark {
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--accent);
  opacity: 0.3;
  line-height: 1;
}
.testimonial p {
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  display: grid; place-items: center;
  color: #0a0a0f;
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.testimonial-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.testimonial-role {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- CTA SECTION ---------- */
.cta-section {
  text-align: center;
  padding: 5rem 3rem;
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.15), rgba(255, 144, 64, 0.05));
  border: 1px solid rgba(255, 106, 0, 0.3);
  border-radius: 28px;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  opacity: 0.3;
  animation: rotate 20s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.cta-section p {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 2rem;
}

/* ---------- FOOTER ---------- */
footer {
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
  margin-top: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.footer-brand p {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin: 1rem 0;
  max-width: 320px;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-dim);
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-social svg { display: block; }
.footer-social a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}
/* Privacy / Terms — sits in the footer bar so the 4-column grid above and
   its responsive rules stay untouched. */
.footer-legal {
  display: flex;
  gap: 1.25rem;
}
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--accent); }

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-header {
  padding: 9rem 0 4rem;
  text-align: center;
  position: relative;
}
/* Nav clearance is already paid for by .breadcrumbs (padding-top: 6.5rem).
   When a header follows one, drop its own top padding so the H1 doesn't sit
   ~250px down the page. Headers with no breadcrumb above keep the 9rem. */
.breadcrumbs + .page-header,
.breadcrumbs + .cs-hero,
.breadcrumbs + .blog-post-header {
  padding-top: 2.25rem;
}
.page-header h1 {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.page-header p {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- CONTACT PAGE ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 2rem 0;
}
.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.25);
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
/* The markup uses <h3> (correct level under the section's <h2>), so this
   targets h3 — it previously read h4 and matched nothing. */
.contact-info-item h3 {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.contact-info-item a, .contact-info-item p {
  color: var(--text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}
.contact-info-item a:hover { color: var(--accent); }

.contact-heading {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
}
.contact-subheading {
  color: var(--text-dim);
  font-size: 1rem;
  margin-bottom: 1rem;
}
/* ---------- CONTACT CHANNELS ----------
   Replaced the old contact form, which had no action and no backend: it
   faked a "Message sent" state while discarding every enquiry. */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}
.channel-card-accent {
  background: linear-gradient(135deg, rgba(250, 70, 21, 0.13), rgba(255, 144, 64, 0.03));
  border-color: rgba(250, 70, 21, 0.3);
}
.channel-badge {
  position: absolute;
  top: 1.625rem;
  right: 1.625rem;
  background: var(--gradient);
  color: #0a0a0f;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.channel-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(250, 70, 21, 0.16);
  border: 1px solid rgba(250, 70, 21, 0.3);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.channel-icon-neutral {
  background: rgba(255, 246, 243, 0.05);
  border-color: rgba(255, 246, 243, 0.14);
  color: var(--accent-2);
}
.channel-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}
.channel-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.625rem;
  line-height: 1.15;
}
.channel-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 400px;
  flex: 1;
  margin-bottom: 1.75rem;
}
.channel-cta {
  align-self: flex-start;
}

.channel-secondary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-style: normal;
}
.channel-mini {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(255, 246, 243, 0.025);
  border: 1px solid rgba(255, 246, 243, 0.08);
  border-radius: 16px;
  padding: 1.375rem 1.5rem;
}
.channel-mini-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 106, 0, 0.1);
  border: 1px solid rgba(255, 106, 0, 0.22);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.channel-mini-value {
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
}
.channel-mini-value a {
  color: var(--text);
  text-decoration: none;
}
.channel-mini-value a:hover { color: var(--accent); }

/* Left-aligned page header variant (contact) */
.page-header-left { text-align: left; }
.page-header-left p { margin-left: 0; }

/* Find-us header row + map link card */
.find-us-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.find-us-title {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.5rem;
}
.map-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 2rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.map-card:hover {
  border-color: rgba(250, 70, 21, 0.4);
  background: var(--surface-hover);
  transform: translateY(-2px);
}
.map-card-pin {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(250, 70, 21, 0.12);
  border: 1px solid rgba(250, 70, 21, 0.28);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.map-card-text { flex: 1; min-width: 12rem; }
.map-card-text strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.map-card-text span {
  display: block;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.map-card-action {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.95rem;
}

/* ---------- PROJECTS ---------- */
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.project-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.project-visual {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--bg-2), var(--bg));
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-visual img {
  transform: scale(1.05);
}
.project-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.6));
  pointer-events: none;
}

/* "And many more" card */
.project-card-more {
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.12), rgba(255, 144, 64, 0.04));
  border-color: rgba(255, 106, 0, 0.25);
}
.project-card-more:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(255, 106, 0, 0.2);
}
.more-visual {
  background: radial-gradient(circle at 50% 50%, rgba(255, 106, 0, 0.2), transparent 70%);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.more-visual::after { display: none; }
.more-plus {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gradient);
  color: #0a0a0f;
  display: grid; place-items: center;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 10px 40px var(--accent-glow);
  position: relative;
  z-index: 2;
  animation: pulseBig 3s ease-in-out infinite;
}
@keyframes pulseBig {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 40px var(--accent-glow); }
  50% { transform: scale(1.08); box-shadow: 0 10px 60px var(--accent-glow); }
}
.more-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.more-orbit span {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}
.more-orbit span:nth-child(1) { top: 20%; left: 25%; animation: floatDot 5s ease-in-out infinite; }
.more-orbit span:nth-child(2) { top: 30%; right: 20%; animation: floatDot 5s ease-in-out infinite 1s; }
.more-orbit span:nth-child(3) { bottom: 25%; left: 30%; animation: floatDot 5s ease-in-out infinite 2s; }
.more-orbit span:nth-child(4) { bottom: 30%; right: 28%; animation: floatDot 5s ease-in-out infinite 3s; }
.more-orbit span:nth-child(5) { top: 50%; left: 15%; animation: floatDot 5s ease-in-out infinite 0.5s; }
@keyframes floatDot {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(-15px); opacity: 0.9; }
}
.project-body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-tag {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.project-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.project-body p {
  color: var(--text-dim);
  font-size: 0.95rem;
  flex: 1;
}
.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.project-stack span {
  padding: 0.3rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ---------- ABOUT PAGE ---------- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 6rem;
}
.about-intro h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.about-intro p {
  color: var(--text-dim);
  margin-bottom: 1rem;
  font-size: 1.05rem;
}
.about-visual {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 106, 0, 0.2);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4), 0 0 60px var(--accent-glow);
}
.about-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 106, 0, 0.2), transparent 60%);
  pointer-events: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
    text-align: center;
  }
  .hero-content { order: 1; }
  .hero-visual { order: 2; max-width: 420px; margin: 0 auto; width: 100%; }
  .hero-content p { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-badge { margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  .grid-3, .grid-2, .why-grid { grid-template-columns: 1fr; }
  .about-intro, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .channel-grid, .channel-secondary { grid-template-columns: 1fr; }
  .channel-value { font-size: 24px; }
  .channel-cta { align-self: stretch; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  section { padding: 4rem 0; }
  .cta-section { padding: 3rem 1.5rem; }
}
@media (max-width: 480px) {
  .hero-visual { max-width: 320px; }
  .stage-core { width: 76px; height: 76px; }
  .stage-core img { width: 44px; height: 44px; }
  .tile { font-size: 0.72rem; padding: 0.45rem 0.7rem; }
  .tile-dot { width: 6px; height: 6px; }
  .hero { padding: 6rem 0 3rem; }
}

/* ---- Hero on small screens ----
   The h1's clamp floor (2.5rem) never shrank below ~40px, so on a 390px
   viewport the heading ran five lines and the CTAs fell below the fold. */
@media (max-width: 640px) {
  .hero { padding: 5rem 0 2.5rem; }

  .hero-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.85rem;
    margin-bottom: 1.1rem;
  }

  /* Each word is an inline-block with white-space: nowrap (the kinetic split),
     so the heading can only break between words. At 32px the longest words
     nearly fill the column and the wrap goes ragged — 26px lets 2-3 words
     share a line. */
  .hero h1 {
    font-size: clamp(1.5rem, 6.6vw, 1.95rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: 0.9rem;
    text-wrap: balance;
  }
  /* Keep the gradient clause inline — forcing `display: block` made it wrap
     inside its own narrow column instead of using the full width. */
  .hero h1 .gradient-text { display: inline; }

  .hero-lede {
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 auto 1.6rem;
    max-width: 34ch;
  }

  /* Two side-by-side buttons read as a choice; two stacked full-width bars
     read as a wall. */
  .hero-cta {
    display: flex;
    gap: 0.6rem;
    width: 100%;
  }
  .hero-cta .btn {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    font-size: 0.88rem;
    white-space: nowrap;
  }

  .hero-inner { gap: 2rem; }
  .hero-visual { margin-top: 0.5rem; }
}

/* Very narrow phones can't fit two buttons side by side. */
@media (max-width: 360px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* The desktop nav needs ~1000px for seven links, the CTA pill, the theme
   toggle and the logo. Below that it overflows into the logo, so the drawer
   takes over at 1024px rather than 640px (which left every tablet broken). */
@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    /* Opaque: the drawer overlays hero content, and a translucent panel let
       headings read through it. --bg tracks the active theme. */
    background: var(--bg);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    gap: 1rem;
    display: none;
    z-index: 120;
  }
  .nav-links.open { display: flex; }
  /* §2.10 — comfortable tap targets in the drawer */
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
  }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 6rem; }
  /* §2.10 — comfortable tap targets on touch screens */
  .btn { min-height: 52px; justify-content: center; }
  .footer-social a { width: 46px; height: 46px; }
}

/* ============================================== */
/* ============ ADVANCED ANIMATIONS ============== */
/* ============================================== */

/* Scroll progress bar (transform-based for GPU compositing) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--gradient);
  z-index: 200;
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 10px var(--accent-glow);
  will-change: transform, opacity;
  /* The glow is not clipped by scaleX, so at 0 it still paints a stub in the
     top-left corner. Fade the bar out entirely while it is effectively empty. */
  opacity: 0;
  transition: opacity 0.2s ease;
}
.scroll-progress.is-active { opacity: 1; }

/* Cursor glow removed — was causing scroll jank from mix-blend-mode + rAF loop */

/* Hero heading — word-by-word reveal */
.hero h1 {
  overflow: hidden;
}
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(-40deg);
  animation: wordReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: bottom;
}
.hero h1 .word .gradient-text { display: inline-block; }
@keyframes wordReveal {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Hero content stagger */
.hero-badge {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.hero-content p {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
.hero-visual {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  to { opacity: 1; transform: scale(1); }
}

/* Gradient text shimmer */
.gradient-text {
  background: linear-gradient(90deg, #FA4615 0%, #ff6a3d 25%, #ff9b72 50%, #ff6a3d 75%, #FA4615 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}
@keyframes shimmerText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Stagger fade-in for grids */
.grid .card.fade-in,
.why-grid .why-item.fade-in,
.grid .testimonial.fade-in,
.grid .project-card.fade-in {
  transition-delay: calc(var(--stagger, 0) * 100ms);
}

.fade-in {
  opacity: 0;
  transform: translate3d(var(--rx, 0), var(--ry, 30px), 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Card hover — shine sweep */
.card, .project-card, .why-item {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
}
.card::after, .project-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 243, 0.06), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 1;
}
.card:hover::after, .project-card:hover::after {
  left: 150%;
}

/* Card icon bounce on hover */
.card-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover .card-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Why-number counter style */
.why-number {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.why-item:hover .why-number {
  transform: scale(1.15) translateX(4px);
}

/* Button enhanced */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255, 246, 243, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  pointer-events: none;
}
.btn:hover::before {
  width: 300px;
  height: 300px;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
}

/* Navbar link underline animation */
.nav-links a:not(.nav-cta) {
  position: relative;
  overflow: visible;
}
.nav-links a:not(.nav-cta)::before {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%;
  width: 0; height: 2px;
  background: var(--gradient);
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:not(.nav-cta):hover::before {
  width: 100%;
  left: 0;
}

/* Badge dot — enhanced pulse */
.hero-badge .dot {
  position: relative;
}
.hero-badge .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Footer social icons — float up */
.footer-social a {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}

/* Image zoom on card hover */
.card-image {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-image {
  transform: scale(1.05);
}

/* Testimonial avatar pulse on hover */
.testimonial-avatar {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.testimonial:hover .testimonial-avatar {
  transform: scale(1.08) rotate(-5deg);
  box-shadow: 0 8px 20px var(--accent-glow);
}

/* Section eyebrow slide-in */
.section-eyebrow {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s ease;
}

/* CTA section glow pulse */
.cta-section {
  animation: ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 70, 21, 0.1); }
  50% { box-shadow: 0 0 80px 10px rgba(250, 70, 21, 0.15); }
}

/* Page load — fade in everything */
body {
  animation: pageFadeIn 0.6s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Navbar scroll shrink effect (applied via JS class) */
.navbar.scrolled {
  padding: 0.45rem 0;
  background: rgba(7, 3, 0, 0.9);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Parallax float for decorative elements */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====== SEO / A11y additions ====== */

/* Visually hidden but accessible to screen readers and crawlers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Breadcrumbs */
.breadcrumbs {
  padding-top: 6.5rem;
  padding-bottom: 0;
  font-size: 0.875rem;
  color: var(--text-dim, #999);
}
.breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "/";
  margin: 0 0.5rem;
  color: rgba(255,255,255,0.25);
}
.breadcrumbs a {
  color: var(--text-dim, #aaa);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumbs a:hover { color: #FA4615; }
.breadcrumbs li[aria-current="page"] {
  color: var(--text);
  font-weight: 500;
}

/* FAQ accordion */
.faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-item[open] {
  border-color: rgba(250, 70, 21, 0.4);
  background: rgba(250, 70, 21, 0.04);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: #FA4615;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline;
}
.faq-item > p {
  padding: 0 1.5rem 1.4rem;
  margin: 0;
  color: var(--text-dim, #b8b8b8);
  line-height: 1.65;
}
.faq-item > p a { color: #FA4615; text-decoration: underline; }

/* Inline links inside hero/body paragraphs */
.hero p a,
.about-intro p a,
.page-header p a,
.cta-section p a,
.why-item p a {
  color: #ff9b72;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 155, 114, 0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hero p a:hover,
.about-intro p a:hover,
.page-header p a:hover,
.cta-section p a:hover,
.why-item p a:hover {
  color: #FA4615;
  border-color: #FA4615;
}

/* Address tag — strip italics */
address {
  font-style: normal;
}

/* ===== Careers page ===== */
.careers-list {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: 960px;
  margin: 0 auto;
}
.career-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  scroll-margin-top: 100px;
}
.career-card:hover {
  border-color: rgba(250, 70, 21, 0.4);
  background: var(--surface-hover);
}
.career-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.25rem;
}
/* When the card has a collapsible body, the divider sits on the summary instead */
.career-card:not(:has(details)) .career-card-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.career-card-head > div:first-child { flex: 1; min-width: 260px; }
.career-card-head h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0.6rem 0 0.5rem;
  line-height: 1.2;
}
.career-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(250, 70, 21, 0.1);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.career-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.career-apply-btn {
  white-space: nowrap;
  align-self: flex-start;
}
.career-card-body {
  color: var(--text-dim);
  line-height: 1.7;
}
.career-card-body p {
  margin-bottom: 1rem;
  font-size: 1rem;
}
.career-card-body a,
.career-card-body p a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(250, 70, 21, 0.4);
}
.career-card-body a:hover,
.career-card-body p a:hover {
  text-decoration-color: var(--accent);
  color: #ff7a42;
}
.career-card-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.6rem 0 0.7rem;
  letter-spacing: -0.01em;
}
.career-card-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.career-card-body ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.97rem;
}
.career-card-body ul li::before {
  content: '';
  position: absolute;
  left: 0.2rem;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

@media (max-width: 640px) {
  .career-card { padding: 1.5rem 1.3rem; }
  .career-card-head { flex-direction: column; }
  .career-apply-btn { width: 100%; text-align: center; }
  .career-card-head h2 { font-size: 1.2rem; }
}

/* FAQ expand/collapse-all control */
.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.faq-header h2 {
  margin: 0 !important;
}
.faq-toggle-all {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.faq-toggle-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(250, 70, 21, 0.06);
}
[data-theme="day"] .faq-toggle-all {
  border-color: rgba(0, 0, 0, 0.2);
  color: #0a0603;
}
[data-theme="day"] .faq-toggle-all:hover {
  border-color: #FA4615;
  color: #FA4615;
  background: rgba(250, 70, 21, 0.08);
}

/* ====== Blog cards (blog index) ====== */
.blog-grid { gap: 1.75rem; }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--surface-hover);
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-2);
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.blog-card-body h2,
.blog-card-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
.blog-card-body p {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.55;
  flex: 1;
}
.blog-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(250, 70, 21, 0.1);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  width: fit-content;
}
.blog-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ====== Blog post article layout ====== */
.blog-post {
  padding-top: 1rem;
  padding-bottom: 4rem;
}
.blog-post-header {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  max-width: 860px;
}
.blog-post-header h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.8rem 0;
}
.blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.8rem;
}
.blog-post-cover {
  margin: 0 auto 2.5rem;
  max-width: 1100px;
}
.blog-post-cover img {
  width: 100%;
  aspect-ratio: 1200/630;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid var(--border);
}
.blog-post-body {
  max-width: 780px;
}
.blog-post-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.blog-post-body h2 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 1rem;
  line-height: 1.25;
}
.blog-post-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.8rem 0 0.7rem;
}
.blog-post-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.blog-post-body p strong {
  color: var(--text);
  font-weight: 600;
}
.blog-post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(250, 70, 21, 0.4);
  text-underline-offset: 3px;
}
.blog-post-body a:hover {
  text-decoration-color: var(--accent);
}
.blog-post-body .faq-list {
  margin-top: 1.5rem;
}

.blog-post-cta {
  margin-top: 3rem;
  padding: 2rem 1.75rem;
  background: linear-gradient(135deg, rgba(250, 70, 21, 0.1), rgba(250, 70, 21, 0.03));
  border: 1px solid rgba(250, 70, 21, 0.3);
  border-radius: 18px;
  text-align: center;
}
.blog-post-cta h3 {
  font-size: 1.4rem;
  margin-bottom: 0.7rem;
}
.blog-post-cta p {
  color: var(--text-dim);
  margin-bottom: 1.3rem;
}

.blog-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  max-width: 780px;
}
.blog-post-nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  max-width: 45%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.blog-post-nav a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.post-nav-prev { text-align: left; }
.post-nav-next { text-align: right; margin-left: auto; }

@media (max-width: 640px) {
  .blog-post-header h1 { font-size: 1.8rem; }
  .blog-post-body { padding: 0 1.2rem; }
  .blog-post-body h2 { font-size: 1.35rem; }
}

/* ====== Day/Night theme toggle ====== */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  margin-left: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-size: 1.1rem;
  padding: 0;
  position: relative;
}
.theme-toggle:hover {
  border-color: var(--accent);
  background: rgba(250, 70, 21, 0.08);
}
.theme-toggle:active { transform: scale(0.92); }
.theme-icon { display: none; line-height: 1; }
/* Default is night mode — show sun (to switch to day) */
.theme-icon-sun { display: inline-block; }
[data-theme="day"] .theme-icon-sun { display: none; }
[data-theme="day"] .theme-icon-moon { display: inline-block; }

/* ====== DAY THEME — soft peach/cream bg, black text ====== */
[data-theme="day"] {
  --bg: #FFEFE5;
  --bg-2: #FFE3D1;
  --creme: #0a0603;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-hover: rgba(255, 255, 255, 0.8);
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.22);
  --text: #0a0603;
  --text-dim: #3a2a20;
  --text-muted: #6a5548;
  --accent: #FA4615;
  --accent-2: #d83a0f;
  --accent-glow: rgba(250, 70, 21, 0.25);
  --gradient: linear-gradient(135deg, #FA4615 0%, #ff6a3d 50%, #ff9b72 100%);
}
[data-theme="day"] body::before {
  background:
    radial-gradient(circle at 20% 10%, rgba(250, 70, 21, 0.1), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255, 155, 114, 0.12), transparent 45%);
}
[data-theme="day"] .navbar {
  background: rgba(255, 239, 229, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="day"] .nav-links a {
  color: #0a0603;
}
[data-theme="day"] .nav-links a.active,
[data-theme="day"] .nav-links a:hover { color: #FA4615; }
[data-theme="day"] .nav-cta {
  background: #FA4615 !important;
  color: #fff !important;
  border-color: #FA4615 !important;
}
[data-theme="day"] .nav-cta:hover {
  background: #d83a0f !important;
  border-color: #d83a0f !important;
}
[data-theme="day"] .btn-primary {
  background: #FA4615;
  color: #fff;
  border-color: #FA4615;
}
[data-theme="day"] .btn-primary:hover {
  background: #d83a0f;
  border-color: #d83a0f;
}
[data-theme="day"] .btn-secondary {
  background: transparent;
  color: #0a0603;
  border-color: rgba(0, 0, 0, 0.3);
}
[data-theme="day"] .btn-secondary:hover {
  background: rgba(250, 70, 21, 0.08);
  color: #FA4615;
  border-color: #FA4615;
}
[data-theme="day"] .gradient-text {
  background: linear-gradient(135deg, #FA4615, #ff6a3d 50%, #ff9b72);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="day"] .hero-badge,
[data-theme="day"] .featured-badge,
[data-theme="day"] .section-eyebrow,
[data-theme="day"] .blog-tag,
[data-theme="day"] .project-tag {
  color: #FA4615;
  background: rgba(250, 70, 21, 0.1);
}
[data-theme="day"] .card,
[data-theme="day"] .why-item,
[data-theme="day"] .faq-item,
[data-theme="day"] .blog-card,
[data-theme="day"] .project-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="day"] .card:hover,
[data-theme="day"] .blog-card:hover,
[data-theme="day"] .project-card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(250, 70, 21, 0.4);
  box-shadow: 0 8px 24px rgba(250, 70, 21, 0.1);
}
[data-theme="day"] footer {
  background: rgba(255, 227, 209, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #0a0603;
}
[data-theme="day"] footer a,
[data-theme="day"] footer h4 { color: #0a0603; }
/* Text links only. The social buttons fill with accent on hover, so tinting
   their glyph accent too would make it vanish (orange on orange). */
[data-theme="day"] footer a:not(.footer-social a):hover { color: #FA4615; }
[data-theme="day"] .footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="day"] .breadcrumbs a:hover { color: #FA4615; }
[data-theme="day"] input,
[data-theme="day"] textarea {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: #0a0603 !important;
}
[data-theme="day"] input:focus,
[data-theme="day"] textarea:focus {
  border-color: #FA4615 !important;
  background: #fff !important;
}
[data-theme="day"] input::placeholder,
[data-theme="day"] textarea::placeholder { color: rgba(0, 0, 0, 0.4); }
[data-theme="day"] .theme-toggle {
  border-color: rgba(0, 0, 0, 0.2);
  color: #0a0603;
}
[data-theme="day"] .theme-toggle:hover {
  background: rgba(250, 70, 21, 0.08);
  border-color: #FA4615;
  color: #FA4615;
}
/* Hero orbit chips ("E-Commerce", "App Dev", "Cloud", "AI & Automation").
   The night styling hardcodes a near-black panel, which on the light hero
   rendered as dark-on-dark and read as invisible. */
[data-theme="day"] .tile {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.1);
  color: #2a1a10;
  box-shadow: 0 8px 22px rgba(120, 60, 25, 0.16);
}
[data-theme="day"] .stage-core {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 14px 40px rgba(120, 60, 25, 0.18);
}
[data-theme="day"] .orbit {
  border-color: rgba(250, 70, 21, 0.2);
}
[data-theme="day"] .hero p a,
[data-theme="day"] .about-intro p a,
[data-theme="day"] .page-header p a,
[data-theme="day"] .cta-section p a,
[data-theme="day"] .why-item p a {
  color: #FA4615;
  border-bottom-color: rgba(250, 70, 21, 0.4);
}
[data-theme="day"] .hero p a:hover,
[data-theme="day"] .about-intro p a:hover,
[data-theme="day"] .page-header p a:hover,
[data-theme="day"] .cta-section p a:hover,
[data-theme="day"] .why-item p a:hover {
  color: #d83a0f;
  border-bottom-color: #d83a0f;
}
[data-theme="day"] .blog-post-body a {
  color: #FA4615;
  text-decoration-color: rgba(250, 70, 21, 0.4);
}
[data-theme="day"] .blog-post-cta {
  background: rgba(250, 70, 21, 0.08);
  border-color: rgba(250, 70, 21, 0.3);
}
[data-theme="day"] .faq-item[open] {
  border-color: rgba(250, 70, 21, 0.4);
  background: rgba(255, 255, 255, 0.7);
}
[data-theme="day"] .faq-item summary::after { color: #FA4615; }

/* ============================================================
   NEW SECTIONS (2026-04 brief)
   Uses existing CSS variables so day/night themes adapt automatically.
   ============================================================ */

/* ---------- Shared helpers ---------- */
.section-subtitle {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  padding: 2.5rem 0;
  background: linear-gradient(180deg, rgba(250, 70, 21, 0.04), rgba(250, 70, 21, 0.02));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.stat-number {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
[data-theme="day"] .stats-strip {
  background: linear-gradient(180deg, rgba(250, 70, 21, 0.06), rgba(250, 70, 21, 0.02));
}

/* ---------- Process / How We Work ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}
.process-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem 1.4rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  position: relative;
}
.process-step:hover {
  border-color: var(--accent);
  background: var(--surface-hover);
  transform: translateY(-3px);
}
.step-num {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}
.process-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.2rem 0 0.4rem;
  letter-spacing: -0.01em;
}
.process-step p {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Testimonials ---------- */
.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.testimonials-grid .testimonial-card {
  flex: 1 1 calc((100% - 3rem) / 3);
  min-width: 280px;
  max-width: calc((100% - 3rem) / 3);
}
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.testimonial-card:hover {
  border-color: rgba(250, 70, 21, 0.35);
  background: var(--surface-hover);
}
.stars {
  color: #ffb742;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
}
.testimonial-text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
}
.testimonial-author > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.author-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  color: #0a0a0f;
  font-weight: 700;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.author-name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.author-company {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="day"] .author-initials {
  color: #fff;
}

/* ---------- Tech stack (about.html) ---------- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.tech-category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.3rem;
}
.tech-category h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.tech-badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(250, 70, 21, 0.1);
  color: var(--text);
  border: 1px solid rgba(250, 70, 21, 0.22);
}
[data-theme="day"] .tech-badge {
  background: rgba(250, 70, 21, 0.12);
  color: #0a0603;
  border-color: rgba(250, 70, 21, 0.3);
}

/* ---------- Team placeholder ---------- */
.team-placeholder-text {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ---------- Project card enhancements (projects.html) ---------- */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0;
}
.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 246, 243, 0.06);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  letter-spacing: 0.02em;
}
.tag-tech {
  background: rgba(250, 70, 21, 0.1);
  color: var(--accent-2);
  border-color: rgba(250, 70, 21, 0.25);
}
[data-theme="day"] .tag {
  background: rgba(0, 0, 0, 0.05);
  color: #2a1a10;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="day"] .tag-tech {
  background: rgba(250, 70, 21, 0.12);
  color: #d83a0f;
  border-color: rgba(250, 70, 21, 0.3);
}
.project-result {
  margin-top: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: rgba(250, 70, 21, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.result-label {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.4rem;
}
.result-text {
  color: var(--text-dim);
}
[data-theme="day"] .project-result {
  background: rgba(250, 70, 21, 0.08);
}

/* ---------- Contact map embed ---------- */
.contact-map-section {
  padding-top: 2rem;
}
/* Day-theme surfaces for the contact channel cards. The night values use
   low-alpha creme, which is invisible on a light background. */
[data-theme="day"] .channel-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="day"] .channel-card-accent {
  background: linear-gradient(135deg, rgba(250, 70, 21, 0.09), rgba(255, 144, 64, 0.02));
  border-color: rgba(250, 70, 21, 0.28);
}
[data-theme="day"] .channel-icon-neutral {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="day"] .channel-mini,
[data-theme="day"] .map-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.55);
  color: #fff;
}
.whatsapp-float:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES for the new sections
   ============================================================ */
@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid .testimonial-card { flex: 1 1 100%; max-width: 100%; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .process-steps { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; }
  .whatsapp-float {
    width: 48px;
    height: 48px;
    bottom: 18px;
    right: 18px;
  }
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
  .map-embed iframe { height: 300px; }
}

/* ============================================================
   ENHANCEMENT LAYER — 2026-04-27
   Aurora bg, particles, marquee, count-up, tilt, etc.
   ============================================================ */

/* ---------- Aurora background blobs (GPU-only, no blur filter) ---------- */
.aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  will-change: transform;
}
.aurora::before,
.aurora::after,
.aurora span {
  content: '';
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* Soft radial fade replaces filter:blur — far cheaper for the GPU. */
}
.aurora::before {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(250, 70, 21, 0.32) 0%, rgba(250, 70, 21, 0.16) 30%, transparent 70%);
  top: -240px;
  left: -240px;
  animation: auroraDrift1 22s ease-in-out infinite alternate;
}
.aurora::after {
  width: 820px;
  height: 820px;
  background: radial-gradient(circle, rgba(255, 154, 100, 0.22) 0%, rgba(255, 154, 100, 0.1) 35%, transparent 70%);
  bottom: -300px;
  right: -300px;
  animation: auroraDrift2 26s ease-in-out infinite alternate;
}
.aurora span {
  display: block;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 106, 61, 0.18) 0%, rgba(255, 106, 61, 0.08) 35%, transparent 70%);
  top: 40%;
  left: 50%;
  margin: -300px 0 0 -300px;
  animation: auroraDrift3 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(80px, 60px, 0) scale(1.15); }
  100% { transform: translate3d(40px, 120px, 0) scale(0.95); }
}
@keyframes auroraDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-100px, -40px, 0) scale(1.1); }
  100% { transform: translate3d(-40px, -100px, 0) scale(0.9); }
}
@keyframes auroraDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); }
  50%  { transform: translate3d(60px, -40px, 0) scale(1.2); }
  100% { transform: translate3d(-40px, 80px, 0) scale(1); }
}
[data-theme="day"] .aurora::before { background: radial-gradient(circle, rgba(250, 70, 21, 0.16) 0%, rgba(250, 70, 21, 0.08) 30%, transparent 70%); }
[data-theme="day"] .aurora::after  { background: radial-gradient(circle, rgba(255, 154, 100, 0.14) 0%, rgba(255, 154, 100, 0.06) 35%, transparent 70%); }
[data-theme="day"] .aurora span    { background: radial-gradient(circle, rgba(255, 106, 61, 0.12) 0%, rgba(255, 106, 61, 0.05) 35%, transparent 70%); }

/* ---------- Subtle noise/grain overlay (CSS-only) ---------- */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  contain: strict;
}

/* ---------- Floating ambient particles in hero ---------- */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-particles span {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), 0 0 24px var(--accent-glow);
  opacity: 0;
  animation: particleRise linear infinite;
}
.hero-particles span:nth-child(1)  { left: 8%;  width: 4px; height: 4px; animation-duration: 14s; animation-delay: 0s; }
.hero-particles span:nth-child(2)  { left: 22%; width: 6px; height: 6px; animation-duration: 18s; animation-delay: 2s; }
.hero-particles span:nth-child(3)  { left: 38%; width: 3px; height: 3px; animation-duration: 12s; animation-delay: 4s; }
.hero-particles span:nth-child(4)  { left: 52%; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 1s; }
.hero-particles span:nth-child(5)  { left: 67%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 3s; }
.hero-particles span:nth-child(6)  { left: 78%; width: 6px; height: 6px; animation-duration: 15s; animation-delay: 5s; }
.hero-particles span:nth-child(7)  { left: 90%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 6s; }
.hero-particles span:nth-child(8)  { left: 14%; width: 5px; height: 5px; animation-duration: 19s; animation-delay: 7s; }
.hero-particles span:nth-child(9)  { left: 60%; width: 4px; height: 4px; animation-duration: 13s; animation-delay: 2.5s; }
.hero-particles span:nth-child(10) { left: 45%; width: 3px; height: 3px; animation-duration: 21s; animation-delay: 4.5s; }
@keyframes particleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}
.hero { isolation: isolate; }

/* ---------- Section heading underline reveal ---------- */
.section-header h2 {
  position: relative;
  display: inline-block;
}
.section-header h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.6rem;
  height: 3px;
  width: 0;
  border-radius: 2px;
  background: var(--gradient);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: translateX(-50%);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.section-header.visible h2::after,
.section-header h2.in-view::after {
  width: 64px;
}
.section-header { padding-bottom: 0.4rem; }

/* ---------- Tech marquee strip ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(250, 70, 21, 0.03), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.marquee-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.marquee-item:hover { color: var(--text); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Stat counter polish ---------- */
.stat-item {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.stat-item:hover {
  transform: translateY(-3px);
  background: var(--surface);
}
.stat-number .stat-suffix {
  -webkit-text-fill-color: currentColor;
}

/* ---------- Cards: rotating conic-gradient border on hover ---------- */
.card,
.project-card,
.why-item,
.testimonial-card,
.process-step,
.tech-category,
.career-card,
.blog-card,
.faq-item {
  position: relative;
  contain: layout paint;
}
.card::before,
.testimonial-card::before,
.process-step::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--accent) 25%, transparent 50%, var(--accent-2) 75%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  animation: borderSpin 6s linear infinite;
  animation-play-state: paused;
}
.card:hover::before,
.testimonial-card:hover::before,
.process-step:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderSpin {
  to { --angle: 360deg; }
}

/* Card hover lift — keep tilt JS in control of transform; we add subtle lift via shadow */
.card:hover,
.project-card:hover,
.why-item:hover,
.testimonial-card:hover,
.process-step:hover,
.tech-category:hover,
.career-card:hover,
.blog-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(250, 70, 21, 0.1);
}

/* ---------- Process step connectors ---------- */
.process-steps { position: relative; }
.process-step { z-index: 1; }
.process-step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1.25rem;
  width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: translateY(-50%);
  opacity: 0.5;
}
.process-step:last-child::after { display: none; }
@media (max-width: 900px) {
  .process-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 640px) {
  /* The horizontal connector doesn't apply once the steps stack. Replace it
     with a short vertical tick between cards — it sits in the gap, not across
     the card, so it reads as a sequence without cutting through the content. */
  .process-step::after {
    display: block;
    top: auto;
    bottom: -1.4rem;
    left: 2.35rem;
    right: auto;
    width: 2px;
    height: 1.4rem;
    background: linear-gradient(180deg,
                rgba(250, 70, 21, 0.85),
                rgba(250, 70, 21, 0.15));
    border-radius: 2px;
    transform: none;
    opacity: 1;
  }
  .process-step:last-child::after { display: none; }
}

/* Step number — animated badge */
.step-num {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0.75rem;
  margin-bottom: 0.7rem;
  border-radius: 999px;
  font-size: 0.95rem !important;
  -webkit-text-fill-color: initial;
  color: var(--accent);
  -webkit-background-clip: initial;
          background-clip: initial;
  background: rgba(250, 70, 21, 0.1);
  border: 1px solid rgba(250, 70, 21, 0.25);
  transition: transform 0.3s ease, background 0.3s ease;
}
.process-step:hover .step-num {
  transform: scale(1.06) translateY(-2px);
  background: rgba(250, 70, 21, 0.18);
}

/* ---------- Hero stage — interactive parallax ---------- */
.hero-stage {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.stage-core,
.tile,
.orbit {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- WhatsApp float — pulse ring ---------- */
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Smooth anchor scroll offset for fixed nav ---------- */
:where(section, header, [id]) { scroll-margin-top: 80px; }

/* ---------- Selection ---------- */
::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Custom scrollbar ---------- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
  }
}

/* ---------- Hero rotating word ---------- */
.hero-rotator {
  display: inline-block;
  position: relative;
  min-height: 1em;
  vertical-align: baseline;
}
.hero-rotator .rotator-word {
  display: inline-block;
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: shimmerText 6s ease-in-out infinite;
}
.hero-rotator .rotator-word.swap-out {
  animation: rotatorOut 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-rotator .rotator-word.swap-in {
  animation: rotatorIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rotatorOut {
  to { opacity: 0; transform: translateY(-22px) rotateX(40deg); filter: blur(4px); }
}
@keyframes rotatorIn {
  from { opacity: 0; transform: translateY(22px) rotateX(-40deg); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

/* ---------- Featured card — subtle internal glow ---------- */
.featured-card {
  position: relative;
}
.featured-card .featured-badge {
  animation: badgePulse 2.6s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 70, 21, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(250, 70, 21, 0); }
}

/* ---------- CTA section — animated gradient border ---------- */
.cta-section {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, rgba(250, 70, 21, 0.5), rgba(255, 155, 114, 0.2), rgba(250, 70, 21, 0.5)) border-box;
  border: 1px solid transparent;
  background-size: auto, 200% 200%;
  animation: ctaGlow 6s ease-in-out infinite, ctaBorderShift 8s ease-in-out infinite;
}
@keyframes ctaBorderShift {
  0%, 100% { background-position: 0 0, 0% 0%; }
  50%      { background-position: 0 0, 100% 100%; }
}
[data-theme="day"] .cta-section {
  background:
    linear-gradient(rgba(255, 247, 240, 0.9), rgba(255, 247, 240, 0.9)) padding-box,
    linear-gradient(135deg, rgba(250, 70, 21, 0.45), rgba(255, 155, 114, 0.25), rgba(250, 70, 21, 0.45)) border-box;
}

/* ---------- Image cards — subtle Ken Burns when hovered ---------- */
.card.fade-in.visible:hover .card-image {
  transform: scale(1.08) translateY(-4px);
}

/* ---------- Visible state for section headers (so underline reveals) ---------- */
.section-header.fade-in { transform: translateY(20px); }

/* ---------- Reduce motion fallback for new effects ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora,
  .aurora::before,
  .aurora::after,
  .aurora span,
  .hero-particles,
  .marquee-track,
  .featured-badge {
    animation: none !important;
  }
  .hero-stage { transform: none !important; }
}

/* ============================================================
   ENHANCEMENT LAYER v2 — richer animations, perf-tuned
   ============================================================ */

/* ---- Reveal direction variants (apply to .fade-in elements) ---- */
.fade-in {
  will-change: opacity, transform;
}
.fade-in.visible {
  will-change: auto;
}
.fade-left {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-right {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-zoom {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-blur {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-left.visible,
.fade-right.visible,
.fade-zoom.visible,
.fade-blur.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* ---- Mouse-spotlight on cards ---- */
.card,
.project-card,
.why-item,
.testimonial-card,
.process-step,
.career-card,
.tech-category,
.blog-card {
  --mx: 50%;
  --my: 50%;
}
.card::before,
.testimonial-card::before,
.process-step::before {
  background:
    radial-gradient(180px circle at var(--mx) var(--my), rgba(250, 70, 21, 0.5), transparent 65%),
    conic-gradient(from var(--angle, 0deg), transparent 0%, var(--accent) 25%, transparent 50%, var(--accent-2) 75%, transparent 100%);
}
/* Spotlight overlay (sits inside the card, not the border) */
.card,
.project-card,
.why-item,
.testimonial-card,
.process-step,
.career-card,
.tech-category,
.blog-card {
  position: relative;
}
.card > *,
.project-card > *,
.why-item > *,
.testimonial-card > *,
.process-step > *,
.career-card > *,
.tech-category > *,
.blog-card > * {
  position: relative;
  z-index: 2;
}
.card::after,
.project-card::after {
  /* Existing shine-sweep — keep, but lift z-index over spotlight */
  z-index: 3;
}

/* ---- Button ripple ---- */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 246, 243, 0.45);
  pointer-events: none;
  animation: rippleOut 0.6s ease-out forwards;
  mix-blend-mode: overlay;
}
@keyframes rippleOut {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* ---- Link underline sweep (in-text links) ---- */
.hero p a,
.about-intro p a,
.cta-section p a,
.why-item p a,
.career-card-body p a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border-bottom: none !important;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}
.hero p a:hover,
.about-intro p a:hover,
.cta-section p a:hover,
.why-item p a:hover,
.career-card-body p a:hover {
  background-size: 100% 1px;
}

/* ---- Section eyebrow — animated dot prefix ---- */
.section-eyebrow {
  position: relative;
  padding-left: 1.4rem;
}
.section-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
  animation: eyebrowGrow 1.4s ease-in-out infinite alternate;
}
@keyframes eyebrowGrow {
  0%   { width: 12px; opacity: 0.6; }
  100% { width: 28px; opacity: 1; }
}

/* (scroll-behavior:smooth removed — caused trackpad scroll to feel sticky) */

/* ---- Hero h1 — gradient shine sweep across whole heading on hover ---- */
.hero h1 {
  background-image: linear-gradient(120deg, transparent 30%, rgba(255, 246, 243, 0.18) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
          background-clip: text;
  transition: background-position 1.2s ease;
}
.hero:hover h1 {
  background-position: -50% 0;
}

/* ---- Footer reveal: subtle lift on scroll into view ---- */
footer .footer-grid > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
footer.is-visible .footer-grid > * {
  opacity: 1;
  transform: none;
}
footer.is-visible .footer-grid > *:nth-child(1) { transition-delay: 0s; }
footer.is-visible .footer-grid > *:nth-child(2) { transition-delay: 0.08s; }
footer.is-visible .footer-grid > *:nth-child(3) { transition-delay: 0.16s; }
footer.is-visible .footer-grid > *:nth-child(4) { transition-delay: 0.24s; }

/* ---- Image card — zoom + tilt ease ---- */
.card-image {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  filter: saturate(0.9);
}
.card:hover .card-image {
  filter: saturate(1.15);
}

/* ---- Testimonial card — quote glyph fade-in ---- */
.testimonial-card {
  position: relative;
}
.testimonial-card::after {
  content: '\201C';
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.12;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.testimonial-card:hover::after {
  opacity: 0.32;
  transform: scale(1.08) translateY(-2px);
}

/* ---- Why-item: gradient bar slides in on hover ---- */
.why-item {
  overflow: hidden;
}
.why-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--gradient);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.why-item:hover::after {
  width: 100%;
}

/* ---- Featured-card: rotating gradient overlay ---- */
.featured-card {
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, rgba(250, 70, 21, 0.4), rgba(255, 144, 64, 0.1), rgba(250, 70, 21, 0.4)) border-box;
  border: 1px solid transparent;
}
[data-theme="day"] .featured-card {
  background:
    linear-gradient(rgba(255, 247, 240, 0.95), rgba(255, 247, 240, 0.95)) padding-box,
    linear-gradient(135deg, rgba(250, 70, 21, 0.4), rgba(255, 144, 64, 0.15), rgba(250, 70, 21, 0.4)) border-box;
}

/* ---- Containment hints for big sections to reduce paint ---- */
section,
.stats-strip,
footer {
  contain: layout style paint;
}

/* ---- Disable contain on sections with overflowing decorative children (hero, marquee) ---- */
.hero,
.marquee {
  contain: none;
}

/* ============================================================
   PRO EFFECTS LAYER — canvas, kinetic typography, slot stats,
   spring magnetic cursor, view transitions, gooey blob.
   Designed to coexist with the existing CSS.
   ============================================================ */

/* ---- Hero canvas shader ---- */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.85;
  mix-blend-mode: screen;
}

/* Page-header decorative canvas — fills the header behind the text */
.page-header,
.blog-post-header { position: relative; isolation: isolate; }
.page-header-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.page-header-canvas-wrap .hero-canvas {
  opacity: 0.55;
}
.page-header > *:not(.page-header-canvas-wrap),
.blog-post-header > *:not(.page-header-canvas-wrap) {
  position: relative;
  z-index: 1;
}
.hero-stage > .hero-canvas + .stage-glow,
.hero-stage > .stage-glow { opacity: 0.35; }
.hero-stage > .hero-canvas ~ .stage-grid { opacity: 0.7; }
.hero-stage > .orbit { z-index: 2; }
.hero-stage > .stage-core { z-index: 3; }
.hero-stage > .tile { z-index: 4; }
.hero-stage > .spark { z-index: 4; }

/* Kill default stage gradient since canvas paints its own colors */
.hero-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 70, 21, 0.05), transparent 60%),
    linear-gradient(135deg, rgba(255, 246, 243, 0.03), rgba(255, 246, 243, 0.005));
}

/* ---- Kinetic typography (word + char split — applies to all big h1) ---- */
.kword {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
}
.kchar {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.6em, 0) rotate(8deg) scale(0.85);
  filter: blur(8px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--kd, 0ms);
  will-change: transform, opacity, filter;
}
.kinetic-ready .kchar {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  filter: blur(0);
}
/* Once the intro has played, drop the animation machinery. `filter: blur(0)`
   is still an active filter and `will-change` still holds a compositor layer,
   so leaving them on ~78 characters made every later scroll frame do work for
   an animation that already finished. */
.kinetic-done .kchar {
  filter: none;
  will-change: auto;
  transition: none;
}
/* Per-char gradient fill on the gradient-text words */
.gradient-text.kword {
  background: none;
  -webkit-text-fill-color: initial;
  color: inherit;
  animation: none;
}
.gradient-text.kword .kchar {
  background: linear-gradient(120deg, #FA4615 0%, #ff6a3d 30%, #ff9b72 60%, #ff6a3d 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: kgrad 6s ease-in-out infinite;
  animation-delay: var(--kd, 0ms);
}
@keyframes kgrad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Disable the older word-reveal CSS (now defunct) */
.hero h1 .word { animation: none; opacity: 1; transform: none; }

/* Existing entrance animations remain on .hero-badge, .hero-content p,
   .hero-cta, .hero-visual — they coexist fine with the kinetic h1 split. */

/* ---- Slot-machine stats ---- */
.stat-number.slot-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  /* Override the parent's background-clip:text (which would hide child text) */
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Apply the gradient to every glyph-bearing child */
.slot-stat .slot-static,
.slot-stat .slot-reel-inner > span {
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.slot-stat .slot-static {
  display: inline-block;
  line-height: 1;
}
.slot-stat .slot-reel {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
  position: relative;
  line-height: 1;
}
.slot-stat .slot-reel-inner {
  display: flex;
  flex-direction: column;
  line-height: 1;
  transform: translateY(0);
  will-change: transform;
}
.slot-stat .slot-reel-inner > span {
  display: block;
  height: 1em;
  line-height: 1;
  /* Each digit is its own gradient swatch */
}

/* ---- SVG process path ---- */
.process-steps.has-svg-path {
  position: relative;
  padding-top: 60px; /* room for the curve */
  margin-top: -1rem;
}
.process-svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.process-svg-path {
  filter: drop-shadow(0 0 10px rgba(250, 70, 21, 0.55));
}
.process-steps.has-svg-path > .process-step { z-index: 2; }
/* Hide the simple CSS connector once SVG is in use */
.process-steps.has-svg-path .process-step::after { display: none; }

/* The old .cursor-dot / .cursor-ring implementation lived here, along with a
   global `body { cursor: none; }`. Both are gone — see the CUSTOM CURSOR block
   at the end of this file, which scopes cursor hiding to <main>. */

/* ---- Gooey blob filter for spotlight (used optionally) ---- */
.gooey-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- View Transitions ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vtFadeOut 0.32s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vtFadeIn 0.42s cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes vtFadeOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.985); filter: blur(4px); }
}
@keyframes vtFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(1.01); filter: blur(4px); }
}
/* Fallback fade for browsers without View Transitions */
html.vt-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ---- Hero h1 perspective for kinetic chars ---- */
.hero h1 {
  perspective: 800px;
}

/* ---- Reduced-motion safety for new toys ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
  .hero h1 .kchar { opacity: 1 !important; transform: none !important; filter: none !important; }
  .slot-stat .slot-reel-inner { transform: translateY(-10em) !important; transition: none !important; }
  .oet-cursor-dot, .oet-cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  .process-svg-path { stroke-dashoffset: 0 !important; }
}

/* ============================================================
   Careers — collapsible job cards
   Each role's body is wrapped in <details>; head stays visible.
   ============================================================ */
.careers-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}
.careers-toggle-all {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.careers-toggle-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(250, 70, 21, 0.06);
}

.career-details {
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.25rem;
}
.career-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.25rem;
  margin: 0;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  transition: color 0.2s ease, background 0.2s ease;
}
.career-details > summary::-webkit-details-marker { display: none; }
.career-details > summary:hover {
  color: var(--accent);
}
.career-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.career-details-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.career-details-icon::before,
.career-details-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.career-details-icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.career-details-icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.career-details[open] > summary {
  color: var(--accent);
}
.career-details[open] > summary .career-details-label::after {
  content: ' (hide)';
  opacity: 0.7;
  font-weight: 500;
}
.career-details[open] .career-details-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
/* Smooth open/close animated by JS via max-height + opacity */
.career-details > .career-card-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  transition:
    max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    padding 0.35s ease;
}
.career-details[open] > .career-card-body {
  /* max-height set by JS to scrollHeight; here we just allow opacity in */
  opacity: 1;
  padding-top: 1rem;
}

/* When the card is collapsed, give it a clearer "card-like" feel */
.career-card:has(.career-details:not([open])) {
  padding-bottom: 1rem;
}


/* ---------- CUSTOM CURSOR ----------
   Injected by effects.js only on fine-pointer, non-reduced-motion devices.
   The .has-custom-cursor class is what hides the native pointer, so if the
   script never runs the real cursor is untouched. */
.oet-cursor-ring,
.oet-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.18s ease;
  will-change: transform;
}
.oet-cursor-ring.is-visible,
.oet-cursor-dot.is-visible { opacity: 1; }

.oet-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transition: opacity 0.18s ease, width 0.2s ease, height 0.2s ease,
              margin 0.2s ease, background 0.2s ease;
}
.oet-cursor-ring.is-hover {
  width: 54px;   /* 1.6x base */
  height: 54px;
  margin: -27px 0 0 -27px;
  background: rgba(250, 70, 21, 0.12);
}
.oet-cursor-ring.is-down { background: rgba(250, 70, 21, 0.22); }

.oet-cursor-dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent);
}

/* Hide the native pointer over page content only — never globally, so the
   navbar, footer and browser chrome keep a real cursor. */
.has-custom-cursor main#main-content,
.has-custom-cursor main#main-content a,
.has-custom-cursor main#main-content button,
.has-custom-cursor main#main-content summary {
  cursor: none;
}

/* Belt and braces: never run on touch or under reduced motion. */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .oet-cursor-ring,
  .oet-cursor-dot { display: none !important; }
  .has-custom-cursor main#main-content,
  .has-custom-cursor main#main-content a,
  .has-custom-cursor main#main-content button,
  .has-custom-cursor main#main-content summary { cursor: auto; }
}