/* Direction 4 — AURORA
   Big radial glow as protagonist, glass chips, outline+solid type mix
   Inspired by: Creatix, Crypto, Valmax, SyncRows — but in light mode + blue
*/

.dir-aurora {
  --accent: var(--blue-500);
  --accent-deep: var(--blue-700);
  --accent-glow: rgba(46, 91, 255, 0.55);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-sans);
  position: relative;
}

/* =========================================================
   AURORA BACKDROP — fullscreen cinematic animation
   Layered color fields + conic sweep + drifting orbs + grid
   ========================================================= */
.dir-aurora .aurora-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Atenuated — the glow is now an ambient layer, not the protagonist.
     Was: rgba(214,226,255,0.85) → reduced to 0.35
     Linear gradient kept softer to let new sections breathe over it. */
  background:
    radial-gradient(circle at 1px 1px, rgba(11,11,15,0.06) 1px, transparent 0),
    radial-gradient(ellipse at 50% 0%, rgba(214, 226, 255, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #f6f5f1 0%, #f1f3f8 100%);
  background-size: 28px 28px, auto, auto;
}

/* Big breathing color fields */
.dir-aurora .ab-layer {
  position: absolute;
  width: 120vmax;
  height: 120vmax;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.dir-aurora .ab-l1 {
  top: -40vmax; right: -30vmax;
  background: radial-gradient(circle,
    rgba(46, 91, 255, 0.55) 0%,
    rgba(46, 91, 255, 0.28) 30%,
    rgba(46, 91, 255, 0.05) 55%,
    transparent 70%);
  animation: ab-drift-1 28s ease-in-out infinite alternate,
             ab-breath-a 11s ease-in-out infinite;
  transform: translate(calc(var(--mx, 0px) * -0.6), calc(var(--my, 0px) * -0.4));
}
.dir-aurora .ab-l2 {
  top: 10vmax; left: -45vmax;
  background: radial-gradient(circle,
    rgba(138, 172, 255, 0.50) 0%,
    rgba(138, 172, 255, 0.22) 30%,
    transparent 65%);
  animation: ab-drift-2 34s ease-in-out infinite alternate,
             ab-breath-b 13s ease-in-out infinite;
  transform: translate(calc(var(--mx, 0px) * 0.5), calc(var(--my, 0px) * 0.35));
}
.dir-aurora .ab-l3 {
  bottom: -55vmax; right: 10vmax;
  width: 100vmax; height: 100vmax;
  background: radial-gradient(circle,
    rgba(124, 96, 255, 0.40) 0%,
    rgba(124, 96, 255, 0.15) 35%,
    transparent 65%);
  animation: ab-drift-3 40s ease-in-out infinite alternate,
             ab-breath-a 16s ease-in-out infinite;
}
.dir-aurora .ab-l4 {
  top: 30%; left: 30%;
  width: 70vmax; height: 70vmax;
  background: radial-gradient(circle,
    rgba(90, 200, 255, 0.28) 0%,
    rgba(90, 200, 255, 0.10) 40%,
    transparent 65%);
  animation: ab-drift-4 24s ease-in-out infinite alternate,
             ab-breath-b 9s ease-in-out infinite;
  transform: translate(calc(var(--mx, 0px) * 0.3), calc(var(--my, 0px) * -0.3));
}

/* Conic "aurora" sweep — the emotional heartbeat */
.dir-aurora .ab-sweep {
  position: absolute;
  top: -30vmax; left: 50%;
  width: 160vmax; height: 160vmax;
  margin-left: -80vmax;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(46, 91, 255, 0.00) 20deg,
    rgba(46, 91, 255, 0.18) 60deg,
    rgba(138, 172, 255, 0.28) 90deg,
    rgba(214, 226, 255, 0.20) 120deg,
    rgba(46, 91, 255, 0.00) 170deg,
    transparent 220deg,
    rgba(124, 96, 255, 0.14) 280deg,
    rgba(46, 91, 255, 0.12) 320deg,
    transparent 360deg
  );
  filter: blur(60px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: ab-rotate 60s linear infinite;
  mask-image: radial-gradient(circle at 50% 40%, black 0%, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, black 40%, transparent 75%);
}

/* Sharper "soul" orbs that drift slowly */
.dir-aurora .ab-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  mix-blend-mode: screen;
  will-change: transform;
}
.dir-aurora .ab-orb-1 {
  width: 420px; height: 420px;
  top: 8%; left: 62%;
  background: radial-gradient(circle, rgba(46,91,255,0.55), rgba(46,91,255,0) 70%);
  animation: ab-orb-a 22s ease-in-out infinite;
}
.dir-aurora .ab-orb-2 {
  width: 300px; height: 300px;
  top: 55%; left: 12%;
  background: radial-gradient(circle, rgba(124,96,255,0.45), rgba(124,96,255,0) 70%);
  animation: ab-orb-b 30s ease-in-out infinite;
}
.dir-aurora .ab-orb-3 {
  width: 360px; height: 360px;
  top: 38%; left: 45%;
  background: radial-gradient(circle, rgba(90,200,255,0.35), rgba(90,200,255,0) 70%);
  animation: ab-orb-c 26s ease-in-out infinite;
}

/* Grid overlay — subtle tech texture */
.dir-aurora .ab-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  animation: ab-grid-pulse 8s ease-in-out infinite;
}

/* Top veil — readability */
.dir-aurora .ab-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246,245,241,0) 0%, rgba(246,245,241,0.3) 70%, rgba(246,245,241,0.85) 100%);
}

/* Particles */
.dir-aurora .ab-particles {
  position: absolute; inset: 0;
}
.dir-aurora .ab-particle {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(46, 91, 255, 0.7);
  box-shadow: 0 0 12px rgba(46, 91, 255, 0.8);
  animation: ab-particle-rise linear infinite;
  opacity: 0;
}
.dir-aurora .ab-particle.p1 { width: 2px; height: 2px; background: rgba(138,172,255,0.8); box-shadow: 0 0 10px rgba(138,172,255,0.9); }
.dir-aurora .ab-particle.p2 { width: 4px; height: 4px; background: rgba(255,255,255,0.9); box-shadow: 0 0 14px rgba(214,226,255,0.9); }
.dir-aurora .ab-particle.p3 { width: 2px; height: 2px; background: rgba(124,96,255,0.7); box-shadow: 0 0 8px rgba(124,96,255,0.8); }
.dir-aurora .ab-particle.p4 { width: 3px; height: 3px; background: rgba(90,200,255,0.8); box-shadow: 0 0 10px rgba(90,200,255,0.9); }
.dir-aurora .ab-particle.p5 { width: 1px; height: 1px; background: rgba(46,91,255,0.9); box-shadow: 0 0 6px rgba(46,91,255,1); }
.dir-aurora .ab-particle.p6 { width: 5px; height: 5px; background: rgba(214,226,255,0.9); box-shadow: 0 0 16px rgba(138,172,255,0.8); }

/* Animations */
@keyframes ab-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ab-drift-1 {
  0%   { transform: translate(calc(var(--mx,0px) * -0.6), calc(var(--my,0px) * -0.4)) scale(1); }
  100% { transform: translate(calc(var(--mx,0px) * -0.6 - 60px), calc(var(--my,0px) * -0.4 + 40px)) scale(1.08); }
}
@keyframes ab-drift-2 {
  0%   { transform: translate(calc(var(--mx,0px) * 0.5), calc(var(--my,0px) * 0.35)) scale(1); }
  100% { transform: translate(calc(var(--mx,0px) * 0.5 + 80px), calc(var(--my,0px) * 0.35 - 50px)) scale(1.12); }
}
@keyframes ab-drift-3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { transform: translate(-70px, -40px) scale(1.1) rotate(8deg); }
}
@keyframes ab-drift-4 {
  0%   { transform: translate(calc(var(--mx,0px) * 0.3), calc(var(--my,0px) * -0.3)) scale(1); }
  100% { transform: translate(calc(var(--mx,0px) * 0.3 - 60px), calc(var(--my,0px) * -0.3 - 60px)) scale(1.15); }
}
@keyframes ab-breath-a {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes ab-breath-b {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@keyframes ab-orb-a {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.8; }
  33%  { transform: translate(-80px, 60px) scale(1.1); opacity: 1; }
  66%  { transform: translate(40px, 100px) scale(0.95); opacity: 0.7; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}
@keyframes ab-orb-b {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%  { transform: translate(120px, -80px) scale(1.15); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}
@keyframes ab-orb-c {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50%  { transform: translate(-100px, -40px) scale(1.2); opacity: 0.9; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
}
@keyframes ab-grid-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.8; }
}
@keyframes ab-particle-rise {
  0%   { transform: translateY(20vh) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120vh) translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dir-aurora .ab-sweep,
  .dir-aurora .ab-layer,
  .dir-aurora .ab-orb,
  .dir-aurora .ab-grid,
  .dir-aurora .ab-particle { animation: none !important; }
}

/* fine line waves — atenuated as ambient layer */
.dir-aurora .waves {
  position: absolute; top: 0; right: 0;
  width: 60%; height: 900px;
  pointer-events: none;
  opacity: 0.18;
  z-index: 1;
}

/* NAV — pill with glass */
.dir-aurora .nav {
  position: sticky; top: 20px; z-index: 50;
  margin: 20px auto 0;
  max-width: 1400px;
  width: calc(100% - 40px);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px 10px 10px 24px;
  background: rgba(246, 245, 241, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(11, 11, 15, 0.06);
  border-radius: 999px;
  box-shadow: 0 10px 40px -20px rgba(23,47,160,0.10);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, padding 0.35s, top 0.35s;
}
.dir-aurora .nav.scrolled {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(11, 11, 15, 0.10);
  box-shadow: 0 20px 50px -20px rgba(23,47,160,0.22);
  top: 12px;
  padding: 8px 8px 8px 22px;
}
.dir-aurora .nav-links {
  display: flex; gap: 32px; justify-content: center;
  font-size: 13px; font-weight: 500;
}
.dir-aurora .nav-links a { opacity: 0.75; transition: opacity 0.2s; }
.dir-aurora .nav-links a:hover { opacity: 1; }
.dir-aurora .nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 8px 12px 22px;
  background: var(--ink-900); color: white;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: transform 0.3s, background 0.3s;
}
.dir-aurora .nav-cta:hover { background: var(--accent); transform: translateY(-1px); }
.dir-aurora .nav-cta .arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  font-size: 14px;
  transition: transform 0.3s;
}
.dir-aurora .nav-cta:hover .arrow { background: white; color: var(--accent); transform: rotate(-45deg); }

/* HERO */
.dir-aurora .hero {
  position: relative; z-index: 2;
  padding: 80px 40px 80px;
  max-width: 1400px; margin: 0 auto;
}
.dir-aurora .hero-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}

/* Cinematic hero — no portrait, centered title */
.dir-aurora .hero-cinema {
  padding: 120px 40px 60px;
  min-height: 82vh;
  display: flex;
  align-items: center;
}
.dir-aurora .hero-cinema .hero-body {
  display: block;
  width: 100%;
}
.dir-aurora .hero-cinema .hero-title {
  text-align: center;
}
.dir-aurora .hero-cinema .hero-sub {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding-top: 40px;
}
.dir-aurora .hero-cinema .hero-sub p { margin: 0 auto; text-align: center; }
.dir-aurora .hero-cinema .hero-sub-ctas { justify-content: center; }
.dir-aurora .hero-cinema .hero-award { margin: 0 auto; }

.dir-aurora .hero-title {
  font-size: clamp(64px, 10vw, 160px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 500;
  text-wrap: balance;
  position: relative;
}
.dir-aurora .hero-title .solid { color: var(--ink-900); }
.dir-aurora .hero-title .accent { color: var(--accent); }
.dir-aurora .hero-title .stroke {
  -webkit-text-stroke: 1.5px var(--ink-900);
  color: transparent;
}
.dir-aurora .hero-title .serif {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
}

/* Inline badges in hero title */
.dir-aurora .hero-title .inline-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px 10px 10px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  font-size: 16px;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-900);
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 30px -10px rgba(23,47,160,0.25);
  margin: 0 8px;
}
.dir-aurora .hero-title .inline-badge .ib-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: white;
  font-size: 18px;
}

.dir-aurora .hero-side {
  width: 260px;
  padding-top: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.dir-aurora .hero-side .award {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-900);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 18px -6px rgba(23,47,160,0.18);
  width: fit-content;
}
.dir-aurora .hero-side .award .a-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: white;
  display: grid; place-items: center; font-size: 13px;
}

/* Human quote card in hero side */
.dir-aurora .hero-quote {
  padding: 20px 22px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11,11,15,0.08);
  border-radius: 22px;
  box-shadow: 0 20px 60px -25px rgba(23,47,160,0.25);
  position: relative;
  overflow: hidden;
}
.dir-aurora .hero-quote::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(46,91,255,0.08), transparent 60%);
  pointer-events: none;
}
.dir-aurora .hq-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
}
.dir-aurora .hq-photo {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 4px 12px -2px rgba(11,11,15,0.15);
  flex-shrink: 0;
}
.dir-aurora .hq-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.dir-aurora .hq-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.dir-aurora .hq-role {
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-display);
  font-style: italic;
}
.dir-aurora .hq-mark {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 0.5;
  color: var(--accent);
  align-self: flex-start;
  margin-top: 10px;
}
.dir-aurora .hq-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-900);
  text-wrap: pretty;
  position: relative;
}

.dir-aurora .hero-sub {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px;
  padding-top: 50px;
  align-items: end;
}
.dir-aurora .hero-sub p {
  font-size: 17px; line-height: 1.55; color: var(--ink-700);
  max-width: 500px; text-wrap: pretty;
}
.dir-aurora .hero-sub-ctas { display: flex; gap: 10px; }
.dir-aurora .btn-filled {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 22px;
  background: linear-gradient(180deg, var(--blue-400), var(--blue-600));
  color: white;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 10px 30px -8px rgba(46,91,255,0.5);
  transition: transform 0.3s;
}
.dir-aurora .btn-filled:hover { transform: translateY(-1px); }
.dir-aurora .btn-filled .arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: white; color: var(--blue-600);
  display: grid; place-items: center; font-size: 14px;
  transition: transform 0.3s;
}
.dir-aurora .btn-filled:hover .arrow { transform: rotate(-45deg); }

.dir-aurora .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(11,11,15,0.12);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.dir-aurora .btn-ghost:hover { background: white; border-color: rgba(11,11,15,0.25); }

/* KPI strip */
.dir-aurora .kpi-strip {
  margin: 40px 40px 0;
  max-width: 1400px;
  margin-left: auto; margin-right: auto;
  padding: 28px 32px;
  background: var(--ink-900);
  color: white;
  border-radius: 999px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  /* Above the hero matrix's ::before paper extension (which extends down
     by 200px). Without this, the hero's stacking context (z-index:2) puts
     the paper layer over the KPI strip and blanks it out. */
  z-index: 3;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(11,11,15,0.25);
}
.dir-aurora .kpi-strip::before {
  content: '';
  position: absolute; right: -10%; top: -50%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(46,91,255,0.35), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
.dir-aurora .kpi-strip .kpi {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}
.dir-aurora .kpi-strip .kpi:last-child { border-right: none; }
.dir-aurora .kpi-strip .kpi .v {
  font-size: 36px; letter-spacing: -0.035em; font-weight: 500;
  line-height: 1; color: white;
}
.dir-aurora .kpi-strip .kpi .v em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }
.dir-aurora .kpi-strip .kpi .l {
  font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 8px;
  letter-spacing: 0.02em;
}

/* SECTION */
.dir-aurora .section {
  position: relative; z-index: 2;
  padding: 140px 40px;
  max-width: 1400px;
  margin: 0 auto;
  /* No glass panel — sections live directly over the aurora canvas.
     Internal cards/elements (step cards, vizs, etc.) carry their own borders. */
}
.dir-aurora .section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 10px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(11,11,15,0.08);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  margin-bottom: 28px;
}
.dir-aurora .section-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(46,91,255,0.18);
}
.dir-aurora .section-title {
  font-size: clamp(44px, 6.5vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 500;
  text-wrap: balance;
  margin-bottom: 20px;
}
.dir-aurora .section-title em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }
.dir-aurora .section-title .hl {
  background: var(--accent); color: white;
  padding: 0 16px; border-radius: 16px;
  display: inline-block;
}
.dir-aurora .section-sub {
  font-size: 17px; color: var(--ink-500); max-width: 580px; line-height: 1.55;
  text-wrap: pretty;
  margin-bottom: 60px;
}

/* Platform cards with big numbered pills + aurora dark panel */
.dir-aurora .platform-panel {
  padding: 50px 40px;
  background: var(--ink-900);
  color: white;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(11,11,15,0.3);
}
.dir-aurora .platform-panel::before {
  content: '';
  position: absolute;
  right: -20%; top: -30%;
  width: 900px; height: 900px;
  background: radial-gradient(circle,
    rgba(46,91,255,0.45) 0%,
    rgba(46,91,255,0.15) 35%,
    transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}

.dir-aurora .platform-rows {
  position: relative;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.dir-aurora .p-row-acc {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.4s;
}
.dir-aurora .p-row-acc:hover { background: rgba(46,91,255,0.05); }
.dir-aurora .p-row-acc.open {
  background: rgba(46,91,255,0.08);
}

.dir-aurora .p-row-btn {
  display: grid;
  grid-template-columns: 70px 1.2fr 2fr 60px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 26px 12px;
  text-align: left;
  color: white;
  cursor: none;
  background: transparent;
  border: none;
  font: inherit;
}

.dir-aurora .p-row-btn .rnum {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
}

.dir-aurora .p-row-btn .rtitle {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
  transition: color 0.3s;
  line-height: 1.15;
}
.dir-aurora .p-row-acc:hover .rtitle,
.dir-aurora .p-row-acc.open .rtitle { color: var(--blue-300); }

.dir-aurora .p-row-btn .rshort {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}

.dir-aurora .p-row-btn .rtoggle {
  justify-self: end;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  display: grid; place-items: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.dir-aurora .p-row-acc:hover .rtoggle { background: rgba(46,91,255,0.2); border-color: rgba(46,91,255,0.4); }
.dir-aurora .p-row-acc.open .rtoggle {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(180deg);
}

.dir-aurora .p-row-btn .rtoggle-icon {
  font-size: 22px;
  color: white;
  line-height: 1;
  font-weight: 300;
}

.dir-aurora .p-row-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s var(--ease-out-expo);
}

.dir-aurora .p-row-body-inner {
  padding: 0 12px 32px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
}
.dir-aurora .p-row-body-inner::before {
  content: '';
  grid-column: 1 / 2;
}
.dir-aurora .p-row-body-inner p {
  grid-column: 2 / -1;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  text-wrap: pretty;
}

/* How it works — 3 cards with glow */
.dir-aurora .how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dir-aurora .how-card {
  padding: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 30px 60px -30px rgba(23,47,160,0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out-expo);
  cursor: none;
  min-height: 340px;
  display: flex; flex-direction: column;
}
.dir-aurora .how-card:hover { transform: translateY(-6px); }
.dir-aurora .how-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%),
    rgba(46,91,255,0.18), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.dir-aurora .how-card:hover::before { opacity: 1; }
.dir-aurora .how-card.featured {
  background: var(--ink-900);
  color: white;
  border-color: var(--ink-900);
}
.dir-aurora .how-card.featured::after {
  content: '';
  position: absolute; right: -30%; top: -30%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(46,91,255,0.55), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
.dir-aurora .how-card .h-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: auto;
}
.dir-aurora .how-card .h-idx {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.06em;
}
.dir-aurora .how-card.featured .h-idx { color: rgba(255,255,255,0.5); }
.dir-aurora .how-card .h-chip {
  padding: 6px 14px;
  background: rgba(46,91,255,0.1);
  color: var(--accent-deep);
  border: 1px solid rgba(46,91,255,0.2);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.dir-aurora .how-card.featured .h-chip {
  background: var(--accent); color: white; border-color: var(--accent);
}
.dir-aurora .how-card h4 {
  font-size: 28px; letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 500;
  margin-top: 80px;
  margin-bottom: 14px;
  position: relative;
}
.dir-aurora .how-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-500);
  position: relative;
  margin-bottom: 24px;
  text-wrap: pretty;
}
.dir-aurora .how-card.featured p { color: rgba(255,255,255,0.65); }
.dir-aurora .how-card .h-learn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px;
  background: rgba(46,91,255,0.1);
  color: var(--accent-deep);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
  align-self: flex-start;
  position: relative;
}
.dir-aurora .how-card .h-learn .arr {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: white;
  display: grid; place-items: center; font-size: 11px;
}
.dir-aurora .how-card.featured .h-learn {
  background: var(--accent); color: white;
}
.dir-aurora .how-card.featured .h-learn .arr { background: white; color: var(--accent); }

/* Testimonials — header + draggable cards */
.dir-aurora .testi {
  position: relative;
  z-index: 2;
  padding: 140px 40px;
  max-width: 1400px; margin: 0 auto;
}
.dir-aurora .testi-glow {
  position: absolute;
  top: 20%; left: 40%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(46,91,255,0.3), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}
.dir-aurora .testi-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
  margin-bottom: 60px;
}
.dir-aurora .testi-ctls {
  display: flex; gap: 8px;
}
.dir-aurora .testi-ctls button {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(11,11,15,0.1);
  display: grid; place-items: center;
  transition: background 0.2s, transform 0.3s;
}
.dir-aurora .testi-ctls button:hover { background: var(--ink-900); color: white; }

.dir-aurora .testi-track {
  display: flex;
  gap: 20px;
  transition: transform 0.8s var(--ease-out-expo);
  will-change: transform;
}
.dir-aurora .testi-card {
  flex: 0 0 380px;
  padding: 32px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 30px 60px -30px rgba(23,47,160,0.3);
}
.dir-aurora .testi-card.dark {
  background: var(--ink-900);
  color: white;
  border-color: var(--ink-900);
  position: relative;
  overflow: hidden;
}
.dir-aurora .testi-card.dark::after {
  content: '';
  position: absolute;
  right: -50%; bottom: -50%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(46,91,255,0.5), transparent 60%);
  filter: blur(40px);
}
.dir-aurora .testi-card .stars {
  color: var(--accent);
  margin-bottom: 16px;
  font-size: 14px;
  letter-spacing: 2px;
  position: relative;
}
.dir-aurora .testi-card blockquote {
  font-size: 17px; line-height: 1.45;
  margin-bottom: 28px;
  position: relative;
  text-wrap: pretty;
}
.dir-aurora .testi-card .tm-meta {
  display: flex; justify-content: space-between; align-items: end;
  padding-top: 20px;
  border-top: 1px dashed rgba(11,11,15,0.15);
  position: relative;
}
.dir-aurora .testi-card.dark .tm-meta { border-top-color: rgba(255,255,255,0.15); }
.dir-aurora .testi-card .who { font-size: 13px; font-weight: 500; }
.dir-aurora .testi-card .who span { display: block; color: var(--ink-500); font-weight: 400; font-size: 12px; }
.dir-aurora .testi-card.dark .who span { color: rgba(255,255,255,0.55); }
.dir-aurora .testi-card .metric {
  font-size: 26px; letter-spacing: -0.025em; font-weight: 500;
  color: var(--accent);
}
.dir-aurora .testi-card.dark .metric { color: var(--accent); }

/* Final CTA */
.dir-aurora .final {
  padding: 120px 40px;
  max-width: 1400px; margin: 0 auto;
  position: relative; z-index: 2;
}
.dir-aurora .final-box {
  padding: 80px 60px;
  background: var(--ink-900);
  color: white;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(11,11,15,0.35);
}
.dir-aurora .final-box::before {
  content: '';
  position: absolute;
  left: -20%; bottom: -50%;
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, rgba(46,91,255,0.55), transparent 60%);
  filter: blur(40px);
}
.dir-aurora .final-box::after {
  content: '';
  position: absolute;
  right: -10%; top: -30%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(138,172,255,0.35), transparent 60%);
  filter: blur(40px);
}
.dir-aurora .final-inner {
  position: relative;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 60px; align-items: end;
}
.dir-aurora .final-inner h2 {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
  text-wrap: balance;
}
.dir-aurora .final-inner h2 em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--accent); }
.dir-aurora .final-inner h2 .stroke {
  -webkit-text-stroke: 1.5px white;
  color: transparent;
}
.dir-aurora .final-inner .f-right { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.dir-aurora .final-inner p { font-size: 16px; color: rgba(255,255,255,0.7); line-height: 1.5; text-wrap: pretty; }
.dir-aurora .final-inner .final-cta {
  padding: 16px 10px 16px 28px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 12px;
  transition: transform 0.3s;
}
.dir-aurora .final-inner .final-cta .arr {
  width: 32px; height: 32px; border-radius: 50%;
  background: white; color: var(--accent);
  display: grid; place-items: center; font-size: 14px;
  transition: transform 0.3s;
}
.dir-aurora .final-inner .final-cta:hover { transform: translateY(-2px); }
.dir-aurora .final-inner .final-cta:hover .arr { transform: rotate(-45deg); }

/* Reveal */
.dir-aurora [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}
.dir-aurora [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   HERO MATRIX 3D — new hero replacing the cinema layout
   ============================================================ */

.hero-matrix {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 60px;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  /* overflow visible so the ::before paper layer can extend beyond bounds */
  overflow: visible;
  /* No background here — the ::before pseudo carries the paper layer */
  background: transparent;
  z-index: 2;
}
/* Paper layer extends beyond the section: up past the nav (top: -200px),
   and down behind the kpi-strip so the strip emerges from paper, not from
   a hard edge. The gradient fades from solid → transparent over the area
   that aligns with the KPI strip (roughly the last 200px).
   Dot grid is layered on top for technical undertone. */
.hero-matrix::before {
  content: '';
  position: absolute;
  top: -200px;
  bottom: -200px;
  left: 0;
  right: 0;
  background:
    /* Subtle dot grid on top */
    radial-gradient(circle at 1px 1px, rgba(11,11,15,0.08) 1px, transparent 0),
    /* Paper: solid through the hero, fade starts AT the bottom of the hero
       and extends through the top half of the KPI strip behind. */
    linear-gradient(180deg,
      var(--paper) 0%,
      var(--paper) calc(100% - 200px),
      rgba(246,245,241,0.7) calc(100% - 100px),
      rgba(246,245,241,0) 100%);
  background-size: 28px 28px, auto;
  z-index: 0;
  pointer-events: none;
}

/* 3D stage where the cards live — overflow:hidden so tx cards don't escape
   even though the parent .hero-matrix has overflow:visible (for the bg ::before) */
.hero-matrix-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Section-wide overlay — sits ABOVE the tx cards but BELOW the content,
   making the text fully readable while still letting the matrix breathe
   on the periphery via subtle gradient toward the edges.
   Constrained to hero's box (height:100%) so it doesn't bleed past the section. */
.hero-matrix::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(ellipse 75% 60% at center,
    rgba(246,245,241,0.85) 0%,
    rgba(246,245,241,0.55) 50%,
    rgba(246,245,241,0.15) 100%);
  z-index: 5;
  pointer-events: none;
}

/* Each transaction card flying outward from the void */
.hero-matrix .tx-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 2px rgba(11,11,15,0.04),
    0 10px 30px -8px rgba(11,11,15,0.1);
  font-family: var(--font-mono);
  font-size: 12px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation: txFlyOutward 9s linear infinite;
}

/* Cards are born small in the deep center (Z = -1600px), grow forward,
   and drift outward to a radial endpoint that avoids the title band */
@keyframes txFlyOutward {
  0% {
    transform: translate(-50%, -50%)
               translate3d(0, 0, -1600px)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform: translate(-50%, -50%)
               translate3d(var(--x-end, 0), var(--y-end, 0), 400px)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    opacity: 0;
  }
}

/* Card interior — mirrors the FUGU platform card */
.tx-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tx-card-risk {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
.tx-card-risk.low    { color: var(--approved); }
.tx-card-risk.medium { color: var(--warning); }
.tx-card-risk.high   { color: var(--danger); }

.tx-card-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink-500);
}
.tx-card-guarantee svg { width: 11px; height: 11px; flex-shrink: 0; }
.tx-card-guarantee.covered { color: var(--approved); }
.tx-card-guarantee.covered svg { fill: var(--approved); }
.tx-card-guarantee.at-risk { color: var(--danger); }
.tx-card-guarantee.at-risk svg { fill: var(--danger); }
.tx-card-guarantee.under-review { color: var(--warning); }
.tx-card-guarantee.under-review svg { fill: var(--warning); }

.tx-card-body {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.tx-card-amount {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.tx-card-currency {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.tx-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--ink-500);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(11,11,15,0.08);
}
.tx-card-meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tx-card-who {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 500;
}
.tx-card-paid {
  color: var(--ink-300);
  font-family: var(--font-mono);
  font-size: 10px;
}

.tx-card-sparkline {
  height: 24px;
  width: 100%;
}
.tx-card-sparkline svg { width: 100%; height: 100%; }
.tx-card-sparkline-line {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tx-card-sparkline-area { fill: rgba(46,91,255,0.1); }
.tx-card-sparkline-dot  { fill: var(--blue-500); }

.tx-card-scenario {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(11,11,15,0.04);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}
.tx-card-scenario svg {
  width: 9px;
  height: 9px;
  fill: var(--ink-500);
  flex-shrink: 0;
}

/* Hero content overlay — title + sub + CTAs above the 3D matrix */
.hero-matrix-content {
  position: relative;
  z-index: 10;
  max-width: 880px;
  text-align: center;
  padding: 40px 24px;
  /* No visible spotlight — readability comes from the section-wide dim
     applied to .hero-matrix-stage (which fades the tx cards uniformly). */
  background: transparent;
}
.hero-matrix-title {
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 28px;
}
.hero-matrix-title .serif {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--blue-500);
}
.hero-matrix-sub {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-500);
  max-width: 560px;
  margin: 0 auto 36px;
}
.hero-matrix-sub em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-900);
}
.hero-matrix-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Reuse existing button look but defined locally for matrix specifically.
   These mirror the brand's btn-filled / btn-ghost but live within hero scope. */
.hero-matrix-ctas .btn-primary {
  background: var(--ink-900);
  color: var(--paper);
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.25s var(--ease-out-expo), background 0.25s;
}
.hero-matrix-ctas .btn-primary:hover {
  background: var(--blue-500);
  transform: translateY(-2px);
}
.hero-matrix-ctas .btn-ghost {
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid rgba(11,11,15,0.15);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s, color 0.2s;
}
.hero-matrix-ctas .btn-ghost:hover {
  border-color: var(--blue-500);
  color: var(--blue-500);
}

/* ============================================================
   DIFF STACK — Sticky scrolling cards with glass effect
   Replaces the "How it works" section with a more dynamic layout
   ============================================================ */

.diff-section {
  position: relative;
  padding: 100px 40px 60px;
  z-index: 2;
  background: transparent;
}

.diff-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 900px) {
  .diff-intro { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
}

.diff-h2 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-900);
}
.diff-h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-500);
}
.diff-lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-500);
}
.diff-lead em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-900);
  font-size: 1.05em;
}

/* The stack itself */
.diff-stack {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0 40px;
  position: relative;
}

.diff-card {
  position: sticky;
  top: 100px;
  margin-bottom: 40px;
  padding: 48px 52px;
  border-radius: 24px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    0 1px 2px rgba(11,11,15,0.04),
    0 30px 60px -20px rgba(11,11,15,0.1);
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.diff-card:nth-child(1) { top: 100px; }
.diff-card:nth-child(2) { top: 132px; }
.diff-card:nth-child(3) { top: 164px; }

@media (max-width: 900px) {
  .diff-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 28px;
    top: 80px;
  }
  .diff-card:nth-child(1),
  .diff-card:nth-child(2),
  .diff-card:nth-child(3) { top: 80px; }
}

.diff-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 72px;
  line-height: 1;
  color: var(--blue-500);
  font-weight: 400;
  opacity: 0.85;
}

.diff-body h3 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 18px;
}
.diff-body h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-500);
}
.diff-body p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 440px;
}

.diff-viz {
  /* Same treatment as the lifecycle step cards (.ll-cap.on)
     so both sections feel like one design language */
  background: #fbfcff;
  border: 1px solid rgba(46,91,255,0.25);
  border-radius: 16px;
  padding: 28px;
  min-height: 220px;
  box-shadow: 0 16px 40px -24px rgba(46,91,255,0.25);
  display: flex;
  flex-direction: column;
}
.diff-viz-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 18px;
}

/* ============================================================
   VIZS — unified visual language for the diff cards
   All 3 vizs share: a horizontal time axis, dots/rings consistent
   with the hero tx-cards, mono captions, and lifecycle as the
   organizing principle.
   ============================================================ */

/* Common ground — every viz uses these */
.viz-axis {
  position: relative;
  height: 1px;
  background: rgba(11,11,15,0.12);
  margin: 16px 0;
}
.viz-tick {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: rgba(11,11,15,0.18);
}
.viz-tick-label {
  position: absolute;
  top: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ============================================================
   VIZ 1 — Two-channel split (decoupled acceptance/verification)
   ============================================================ */
.viz-split {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.viz-channel {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 14px;
}
.viz-channel-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  text-align: right;
}
.viz-channel-track {
  position: relative;
  height: 28px;
  background: rgba(11,11,15,0.04);
  border-radius: 8px;
  overflow: hidden;
}
/* Channel 1 — acceptance · fast solid bar */
.viz-channel.fast .viz-channel-track::before {
  content: '';
  position: absolute;
  inset: 4px auto 4px 4px;
  width: 0;
  background: var(--approved);
  border-radius: 4px;
  animation: viz1Fast 4s var(--ease-out-expo) infinite;
}
@keyframes viz1Fast {
  0%   { width: 0; opacity: 0; }
  10%  { opacity: 1; }
  25%  { width: calc(100% - 8px); opacity: 1; }
  90%  { width: calc(100% - 8px); opacity: 0.4; }
  100% { width: calc(100% - 8px); opacity: 0; }
}
/* Channel 2 — verification · slow dashed line that progresses over time */
.viz-channel.slow .viz-channel-track::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto 8px;
  height: 1px;
  width: 0;
  background-image: linear-gradient(to right,
    var(--blue-500) 0,
    var(--blue-500) 4px,
    transparent 4px,
    transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  animation: viz1Slow 4s linear infinite;
}
@keyframes viz1Slow {
  0%   { width: 0; }
  100% { width: calc(100% - 16px); }
}
.viz-channel-out {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-700);
  letter-spacing: 0.04em;
}
.viz-channel.fast .viz-channel-out { color: var(--approved); font-weight: 600; }
.viz-channel.slow .viz-channel-out { color: var(--blue-600); font-weight: 600; }

.viz-split-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-700);
  text-align: center;
  margin-top: 12px;
  line-height: 1.3;
}
.viz-split-caption em {
  color: var(--blue-500);
}

/* ============================================================
   VIZ 2 — Lifecycle timeline (fraud surfaces after T+0)
   ============================================================ */
.viz-timeline {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  padding: 8px 0;
}
.viz-timeline-track {
  position: relative;
  height: 60px;
}
.viz-timeline-line {
  position: absolute;
  top: 30px;
  left: 0; right: 0;
  height: 1px;
  background: rgba(11,11,15,0.12);
}
/* Sparkline-like dots along the line */
.viz-timeline-dot {
  position: absolute;
  top: 30px;
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
  border-radius: 50%;
  background: var(--ink-300);
}
.viz-timeline-dot.approved {
  background: var(--approved);
  box-shadow: 0 0 0 3px rgba(0,184,107,0.15);
}
.viz-timeline-dot.fraud {
  background: var(--danger);
  width: 8px; height: 8px;
  margin-left: -4px; margin-top: -4px;
  box-shadow: 0 0 0 4px rgba(255,59,59,0.15);
  animation: vizFraudPulse 2s infinite;
}
@keyframes vizFraudPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,59,59,0.15); }
  50%      { box-shadow: 0 0 0 8px rgba(255,59,59,0.04); }
}
.viz-timeline-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  transform: translateX(-50%);
}
.viz-timeline-label.top    { top: 0; }
.viz-timeline-label.bottom { bottom: 0; }
.viz-timeline-label.bottom.fraud {
  color: var(--danger);
  font-weight: 600;
}

/* The connecting arc from approved → fraud point */
.viz-timeline-arc {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 60px;
  pointer-events: none;
  overflow: visible;
}
.viz-timeline-arc path {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.5;
}

.viz-timeline-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-700);
  text-align: center;
  margin-top: 16px;
  line-height: 1.3;
}
.viz-timeline-caption em {
  color: var(--blue-500);
}

/* ============================================================
   VIZ 3 — Decision trace (signal-level reasoning made visible)
   ============================================================ */
.viz-trace {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding-top: 4px;
}
.viz-trace-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(11,11,15,0.1);
}
.viz-trace-tx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-700);
  letter-spacing: 0.02em;
}
.viz-trace-verdict {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #008a4e;
  background: rgba(0,184,107,0.12);
  padding: 4px 10px;
  border-radius: 100px;
}
.viz-trace-signals {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.viz-trace-signal {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.viz-trace-key {
  color: var(--ink-500);
  letter-spacing: 0.02em;
}
.viz-trace-val {
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.viz-trace-weight {
  position: relative;
  height: 4px;
  background: rgba(11,11,15,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.viz-trace-weight::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 100px;
  animation: vizTraceFill 1.6s var(--ease-out-expo) forwards;
}
.viz-trace-signal.pos  .viz-trace-weight::after { background: var(--approved); }
.viz-trace-signal.warn .viz-trace-weight::after { background: var(--warning); }
.viz-trace-signal.warn .viz-trace-val { color: var(--warning); }
.viz-trace-signal.neg  .viz-trace-weight::after { background: var(--danger); }
.viz-trace-signal.neg  .viz-trace-val { color: var(--danger); }

/* Stagger the fills, and set width from data-pct */
.viz-trace-signal:nth-child(1) .viz-trace-weight::after { animation-delay: 0.0s; }
.viz-trace-signal:nth-child(2) .viz-trace-weight::after { animation-delay: 0.15s; }
.viz-trace-signal:nth-child(3) .viz-trace-weight::after { animation-delay: 0.30s; }
.viz-trace-signal:nth-child(4) .viz-trace-weight::after { animation-delay: 0.45s; }
.viz-trace-signal:nth-child(5) .viz-trace-weight::after { animation-delay: 0.60s; }

.viz-trace-weight[data-pct="92"]::after { --w: 92%; }
.viz-trace-weight[data-pct="88"]::after { --w: 88%; }
.viz-trace-weight[data-pct="85"]::after { --w: 85%; }
.viz-trace-weight[data-pct="79"]::after { --w: 79%; }
.viz-trace-weight[data-pct="42"]::after { --w: 42%; }

@keyframes vizTraceFill {
  from { width: 0; }
  to   { width: var(--w, 80%); }
}

.viz-trace-foot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-500);
  text-align: center;
  margin-top: auto;
  padding-top: 8px;
  line-height: 1.3;
}
.viz-trace-foot em {
  color: var(--blue-500);
  font-style: italic;
}


/* ============================================================
   NAV LOGO — replaces the <Wordmark /> component with the FUGU brand image
   ============================================================ */
.nav-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s var(--ease-out-expo);
}
.nav-logo-link:hover {
  opacity: 0.75;
}
.nav-logo {
  height: 22px;
  width: auto;
  display: block;
  /* Slightly tame the brightness of the brand blue when on light bg */
  filter: none;
}

/* ============================================================
   MERCHANTS — "Built for every merchant who ships"
   3 archetypes with photo cards in subtle blue duotone
   ============================================================ */

.merchants-section {
  position: relative;
  padding: 140px 40px 120px;
  background: transparent;
  z-index: 2;
}

.merchants-header {
  max-width: 1200px;
  margin: 0 auto 80px;
}
.merchants-header .section-tag { margin-bottom: 24px; }
.merchants-h2 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-900);
  max-width: 900px;
  margin-bottom: 32px;
}
.merchants-h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-500);
}
.merchants-intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 640px;
}

.merchants-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .merchants-grid { grid-template-columns: 1fr; }
}

.merchant-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
}
.merchant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(11,11,15,0.18);
}

/* Image wrap with subtle duotone (Variante A — sombras azul, luces paper) */
.merchant-img-wrap {
  aspect-ratio: 4/5;
  overflow: hidden;
  position: relative;
  background: var(--paper-2);
}
.merchant-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.02);
  transition: transform 0.8s var(--ease-out-expo);
}
.merchant-card:hover .merchant-img { transform: scale(1.04); }

/* Blue tint layer (multiplied) — paints shadows in FUGU blue */
.merchant-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue-500);
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}
/* Paper highlight layer — softens highlights toward warm paper */
.merchant-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--paper);
  mix-blend-mode: lighten;
  opacity: 0.08;
  pointer-events: none;
  z-index: 2;
}

/* Grain overlay — editorial film texture */
.merchant-img-wrap .grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  z-index: 3;
}

.merchant-label {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 14px;
  background: rgba(246,245,241,0.95);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  z-index: 4;
}
.merchant-label .sep {
  color: var(--ink-300);
  font-weight: 400;
  margin: 0 4px;
}

.merchant-body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.merchant-who {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-500);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.merchant-title {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 14px;
}
.merchant-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-500);
}
.merchant-pain {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-500);
  margin-bottom: auto;
  padding-bottom: 24px;
}
.merchant-solution {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(11,11,15,0.08);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
}
.merchant-solution::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--approved);
  box-shadow: 0 0 0 3px rgba(0,184,107,0.15);
  flex-shrink: 0;
}

/* ============================================================
   INTEGRATIONS — retro sticker board
   "Compatible with your stack" — replaces Testimonials section
   ============================================================ */

.integ-section {
  position: relative;
  padding: 140px 40px 120px;
  background: transparent;
  z-index: 2;
}

.integ-header {
  max-width: 1200px;
  margin: 0 auto 60px;
}
.integ-header .section-tag { margin-bottom: 24px; }
.integ-h2 {
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink-900);
  max-width: 900px;
  margin-bottom: 28px;
}
.integ-h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--blue-500);
}
.integ-intro {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-500);
  max-width: 640px;
}
.integ-intro em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-900);
}

/* Sticker board container — white glass panel */
.integ-board {
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 24px;
  padding: 80px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
}
@media (max-width: 720px) {
  .integ-board { padding: 48px 20px; gap: 20px; }
}

/* Each sticker — clean paper, sits "on top of" the recessed board */
.integ-sticker {
  width: 200px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  /* Subtle grain texture — keeps the editorial sticker feel */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(11,11,15,0.025) 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(11,11,15,0.02) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(11,11,15,0.015) 1px, transparent 1px),
    rgba(255,255,255,0.85);
  background-size: 12px 12px, 16px 16px, 9px 9px, auto;
  border: 2px solid var(--ink-900);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 18px 24px;
  box-shadow: 4px 4px 0 var(--ink-900);
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo);
  cursor: pointer;
}
@media (max-width: 720px) {
  .integ-sticker { width: calc(50% - 10px); padding: 20px 12px; }
}

/* Subtle initial rotations to give the playful "stuck on a board" feel */
.integ-sticker:nth-child(1) { transform: rotate(-2.5deg); }
.integ-sticker:nth-child(2) { transform: rotate(1.8deg); }
.integ-sticker:nth-child(3) { transform: rotate(-1.2deg); }
.integ-sticker:nth-child(4) { transform: rotate(2.2deg); }
.integ-sticker:nth-child(5) { transform: rotate(-1.8deg); }

.integ-sticker:hover {
  transform: rotate(0) translateY(-6px);
  box-shadow: 6px 6px 0 var(--blue-500);
}

.integ-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.integ-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.integ-icon svg { width: 100%; height: 100%; }
.integ-icon svg path,
.integ-icon svg polygon,
.integ-icon svg circle,
.integ-icon svg rect { fill: currentColor; }

.integ-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.integ-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-500);
  text-align: center;
}

/* ============================================================
   LIGHTNING BULBS — colored orbs in the background to make
   the glassmorphism effect actually visible. They float slowly
   and live behind all content but above the aurora-backdrop.
   ============================================================ */

.bulbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.bulb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}

/* Bulb 1 — large blue, top-left zone */
.bulb-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(46,91,255,0.6) 0%, transparent 70%);
  top: -10%;
  left: -8%;
  animation: bulbFloat1 22s ease-in-out infinite;
}

/* Bulb 2 — medium blue-purple, mid-right (around hero/diff zone) */
.bulb-2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(138,172,255,0.55) 0%, transparent 70%);
  top: 25%;
  right: -10%;
  animation: bulbFloat2 28s ease-in-out infinite;
}

/* Bulb 3 — green sparkle (approved tone), offset down so it doesn't dominate */
.bulb-3 {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0,184,107,0.22) 0%, transparent 70%);
  top: 80%;
  left: -5%;
  animation: bulbFloat3 26s ease-in-out infinite;
}

/* Bulb 4 — soft amber (warning tone), lower-right around merchants */
.bulb-4 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(217,162,0,0.3) 0%, transparent 70%);
  top: 75%;
  right: 8%;
  animation: bulbFloat4 32s ease-in-out infinite;
}

/* Bulb 5 — large blue at bottom (for footer/CTA zone) */
.bulb-5 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(46,91,255,0.4) 0%, transparent 70%);
  bottom: -15%;
  left: 30%;
  animation: bulbFloat5 30s ease-in-out infinite;
}

/* Bulb 6 — small accent, top-center hero zone */
.bulb-6 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(90,135,255,0.5) 0%, transparent 70%);
  top: 5%;
  left: 45%;
  animation: bulbFloat6 24s ease-in-out infinite;
}

/* Float animations — different paths and durations so they never sync */
@keyframes bulbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, 80px) scale(1.1); }
  66%      { transform: translate(-40px, 50px) scale(0.95); }
}
@keyframes bulbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-80px, -40px) scale(1.08); }
  66%      { transform: translate(-30px, 60px) scale(0.92); }
}
@keyframes bulbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(50px, -60px) scale(1.05); }
  66%      { transform: translate(80px, 20px) scale(0.95); }
}
@keyframes bulbFloat4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, -80px) scale(1.1); }
  66%      { transform: translate(-70px, -30px) scale(0.9); }
}
@keyframes bulbFloat5 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -50px) scale(1.06); }
}
@keyframes bulbFloat6 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-30px, 40px) scale(1.08); }
  66%      { transform: translate(50px, 30px) scale(0.94); }
}

/* On reduced motion, freeze bulbs but keep them visible */
@media (prefers-reduced-motion: reduce) {
  .bulb { animation: none; }
}

/* ============================================================
   FOOTER — editorial closure of the site
   Glass white translucent panel · big wordmark + tagline
   · 4-column links · separator · copyright + legal row
   ============================================================ */

.dir-aurora .footer {
  position: relative;
  z-index: 2;
  /* Open at the bottom — fuses with the browser edge.
     Top corners rounded so the section still "starts" with a label-like form. */
  margin: 80px 40px 0;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 60px 60px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  /* Border only on top + sides — no bottom border */
  border-top: 1px solid rgba(255,255,255,0.6);
  border-left: 1px solid rgba(255,255,255,0.6);
  border-right: 1px solid rgba(255,255,255,0.6);
  border-bottom: 0;
  /* Rounded top corners only */
  border-radius: 28px 28px 0 0;
  /* Shadow upward (the open bottom doesn't cast a shadow) */
  box-shadow:
    0 1px 2px rgba(11,11,15,0.04),
    0 -30px 60px -30px rgba(11,11,15,0.06);
}
@media (max-width: 720px) {
  .footer {
    margin: 40px 16px 0;
    padding: 48px 24px 40px;
    border-radius: 20px 20px 0 0;
  }
}

/* Top row: big wordmark + tagline */
.dir-aurora .footer-brand {
  margin-bottom: 56px;
  position: relative;
}
.dir-aurora .footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 56px);
  color: var(--ink-900);
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 820px;
  margin: 0;
}
.dir-aurora .footer-tagline em {
  color: var(--blue-500);
  font-style: italic;
}

/* Link columns */
.dir-aurora .footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 720px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-bottom: 40px;
  }
}

.dir-aurora .footer-col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dir-aurora .footer-col-head::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue-500);
  display: inline-block;
}

.dir-aurora .footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dir-aurora .footer-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--ease-out-expo);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.dir-aurora .footer-links a:hover {
  color: var(--blue-500);
}
/* Subtle arrow on hover */
.dir-aurora .footer-links a::after {
  content: '↗';
  opacity: 0;
  font-size: 11px;
  transform: translateX(-4px);
  transition: all 0.2s var(--ease-out-expo);
  color: var(--blue-500);
}
.dir-aurora .footer-links a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* External link badge for social */
.dir-aurora .footer-links .ext::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  display: inline-block;
  margin-right: 4px;
  transition: background 0.2s;
}
.dir-aurora .footer-links .ext:hover::before { background: var(--blue-500); }

/* Separator line */
.dir-aurora .footer-sep {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(11,11,15,0.1) 20%,
    rgba(11,11,15,0.1) 80%,
    transparent 100%);
  margin: 0 0 32px;
}

/* Bottom row: copyright + legal links */
.dir-aurora .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-500);
}
.dir-aurora .footer-copy {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dir-aurora .footer-copy .sep {
  color: var(--ink-300);
}
.dir-aurora .footer-copy em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-700);
  font-size: 14px;
  letter-spacing: 0;
}
.dir-aurora .footer-legal {
  display: inline-flex;
  gap: 20px;
  flex-wrap: wrap;
}
.dir-aurora .footer-legal a {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-500);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.dir-aurora .footer-legal a:hover { color: var(--ink-900); }
@media (max-width: 720px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}