/* Backdrop style for section label */
.slbl.backdrop {
  font-family: "Limelight", cursive, sans-serif;
  font-size: 4.8rem;
  background: linear-gradient(135deg, #00c2ff 0%, #66e0ff 55%, #f4eb1c 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.2em 1em;
  border-radius: 1em;
  letter-spacing: 0.04em;
  font-weight: 700;
  display: inline-block;
  margin-top: 0.5em;
}

/* EXPERTS GRID EXPANDING CARD EFFECT */
.experts-grid {
  display: flex;
  height: auto;
  gap: 2rem;
}
.expert-card {
  flex: 1 1 0;
  min-width: 0;
  transition:
    flex-basis 0.4s cubic-bezier(0.4, 0.2, 0.2, 1),
    box-shadow 0.3s;
  box-shadow: none;
}
.expert-card:hover {
  flex: 2 1 0;
  z-index: 1;
}
.experts-grid:hover .expert-card:not(:hover) {
  flex: 0.8 1 0;
  opacity: 0.85;
}
.services-stack {
  --svttl-stroke: #003344;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --y: #00c2ff;
  --svttl-stroke: #003344;
  --y2: #66e0ff;
  --y3: rgba(0, 194, 255, 0.12);
  --mood-soft: rgba(200, 240, 255, 0.08);
  --radius: 2px;
  --bg: #06141a;
  --bg2: #0b1f26;
  --bg3: #102a33;
  --surf: #143944;
  --surf2: #1a4a55;
  --bdr: #1f5a66;
  --bdr2: #26707a;
  --txt: #e6fbff;
  --txt2: #7faab3;
  --txt3: #3a5a60;
  --ink: #06141a;

  /* ─── Material 3 Expressive motion ───
     Standard cubics from Material Expressive spec, plus custom springs for liquid feel. */
  --spring-fast:     cubic-bezier(0.34, 1.56, 0.64, 1);    /* light overshoot */
  --spring-bouncy:   cubic-bezier(0.68, -0.55, 0.27, 1.55); /* heavy overshoot, both sides */
  --spring-soft:     cubic-bezier(0.22, 1.2, 0.36, 1);     /* gentle settle, no overshoot */
  --spring-liquid:   cubic-bezier(0.32, 0, 0.18, 1.08);    /* slow start, slight overshoot, fluid */
  --spring-squish:   cubic-bezier(0.5, 1.8, 0.4, 1);       /* extreme bounce for click feedback */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);           /* Material 3 emphasized */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);

  --t-fast:    180ms;
  --t-base:    320ms;
  --t-slow:    520ms;
  --t-liquid:  640ms;

  /* Radii — fluid morphing values */
  --r-pill: 999px;
  --r-blob: 36% 64% 60% 40% / 50% 40% 60% 50%;
  --r-blob-2: 64% 36% 40% 60% / 40% 60% 40% 60%;
}



/* Hide filter bar at bottom of page */
.projects-filter-bar.filter-bar-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.projects-filter-bar {
  transition: opacity 0.3s;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "DM Sans", sans-serif;
  background:
    /* soft outer vignette so corners fall into deep navy */
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 55%, rgba(5, 8, 24, 0.65) 100%),
    /* painterly nebula image carries the color */
    url("../images/bg-grid.svg") center center / cover no-repeat,
    linear-gradient(180deg, #070a1a 0%, #0a1230 55%, #050818 100%);
  background-attachment: fixed;
  color: var(--txt);
  overflow-x: hidden;
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.from-left {
  transform: translateX(-64px) translateY(0);
}
.reveal.from-right {
  transform: translateX(64px) translateY(0);
}
.reveal.scale-up {
  transform: scale(0.93) translateY(24px);
}
.reveal.vis {
  opacity: 1 !important;
  transform: none !important;
}

.stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger.vis > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0.04s;
}
.stagger.vis > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.14s;
}
.stagger.vis > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.24s;
}
.stagger.vis > *:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.34s;
}

/* NAV */
nav {
  position: fixed;
  top: 1rem;
  /* left: 80%; */
  right: 20px;
  transform: translateX(-50%);
  z-index: 9999;
  width: auto;
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 999px;
  background: rgba(7, 10, 26, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 194, 255, 0.18),
    0 8px 32px rgba(5, 8, 24, 0.50),
    0 2px 8px rgba(0, 194, 255, 0.08);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: none;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

body.scrolled nav {
  background: rgba(227, 249, 255, 0.343);
  box-shadow:
    0 0 0 1px rgba(0, 194, 255, 0.24),
    0 12px 40px rgba(5, 8, 24, 0.65),
    0 2px 8px rgba(0, 194, 255, 0.10);
}

nav.switching {
  filter: brightness(1.1) saturate(1.2) drop-shadow(0 6px 24px rgba(255,230,0,0.12));
  box-shadow: 0 8px 32px 0 rgba(0, 194, 255, 0.08);
  transition: filter 0.4s cubic-bezier(0.4,0.2,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0.2,0.2,1);
}


@keyframes jazzy-float {
  0% {
    box-shadow:
      0 8px 32px 0 rgba(0, 0, 0, 0),
      0 2px 8px 0 var(--y3);
  }
  100% {
    box-shadow:
      0 16px 48px 0 rgba(0, 194, 255, 0),
      0 4px 16px 0 var(--y2);
  }
}

body {
  padding-top: 0;
}
.hero-story {
  margin-top: 0;
}
.logo span {
  color: var(--y);
}
nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
  margin: 0;
  padding: 0;
}

nav ul a {
  text-decoration: none;
  color: rgba(230, 251, 255, 0.75);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    gap 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav ul a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

nav ul a span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    margin 0.3s ease;
}

/* ── Nav logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.2rem 0.5rem 0.2rem 0.2rem;
  flex-shrink: 0;
}
.nav-logo img {
  height: 22px;
  display: block;
}
.nav-logo-light { display: block; }
.nav-logo-dark  { display: none; }

nav.on-light .nav-logo-light { display: none; }
nav.on-light .nav-logo-dark  { display: block; }
nav.on-light ul a { color: rgba(10, 10, 20, 0.75); }
nav.on-light ul a:hover { color: #000; background: rgba(0,0,0,0.07); box-shadow: none; }
nav.on-light {
  background: rgba(255, 255, 255, 0.60);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.10),
    0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

nav ul a:hover {
  color: #ffffff;
  background: rgba(0, 194, 255, 0.12);
  box-shadow: 0 0 12px rgba(0, 194, 255, 0.20);
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
}

nav ul a:hover span {
  max-width: 6rem;
  opacity: 1;
}

nav ul a:hover svg {
  transform: scale(1.1);
}


nav ul a:hover {
  color: #ffffff;
  background: rgba(0, 194, 255, 0.12);
  box-shadow: 0 0 12px rgba(0, 194, 255, 0.22);
  transform: translateX(-2px) scale(1.06);
  z-index: 1;
}
.nav-r {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-cta {
  background: transparent;
  color: #ffffff;
  padding: 0.55rem 1.4rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
  border: 1px solid rgba(0, 194, 255, 0.55);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(0, 194, 255, 0.20), inset 0 0 18px rgba(0, 194, 255, 0.08);
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s, transform 0.25s;
  display: inline-block;
}
.nav-cta:hover {
  background: rgba(0, 194, 255, 0.10);
  border-color: rgba(0, 194, 255, 0.85);
  box-shadow: 0 0 28px rgba(0, 194, 255, 0.45), inset 0 0 24px rgba(0, 194, 255, 0.15);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0;
  font-size: 0;
}

.nav-title {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -1px;
  color: var(--txt3);
  margin: 0;
  padding: 0;
  display: inline-block;
}

/* HERO */
.logo {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -1px;
  color: #0a0a08;
  text-shadow:
    0 2px 12px var(--y2),
    0 1px 0 #fff;
  background: linear-gradient(90deg, var(--y) 60%, #fff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo span {
  color: #fff;
  text-shadow: 0 2px 8px var(--y2);
}

.hglow {
  position: absolute;
  top: -100px;
  right: -80px;
  width: 700px;
  height: 700px;
  background: none;
  pointer-events: none;
}
.hglow2 {
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: none;
  pointer-events: none;
}
.hero-in {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.eline {
  width: 36px;
  height: 1px;
  background: var(--y);
}
.etxt {
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 2.2px;
  color: var(--y);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero h1 {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(5.2rem, 12vw, 12rem);
  line-height: 0.84;
  letter-spacing: -3.2px;
  color: var(--txt);
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadeUp 0.9s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero h1 .outline {
  -webkit-text-stroke: 1px var(--y);
  color: transparent;
}
.hero h1 .acc {
  color: var(--y);
}

.hbottom {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 3rem;
  align-items: end;
  padding-top: 2.8rem;
  border-top: 1px solid var(--bdr);
  opacity: 0;
  animation: fadeUp 0.9s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hdesc {
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 300;
  color: var(--txt2);
  line-height: 1.95;
}
.hact {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.bty {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: transparent;
  color: #0a0a08;
  padding: 0.35rem 1.1rem;
  border-radius: 1.2rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: none;
  border: 1.5px solid var(--txt);
  letter-spacing: 0.5px;
  transition:
    background 0.2s,
    color 0.2s;
  display: inline-block;
  filter: saturate(1.2);
  cursor: pointer;
  .nav-cta:hover {
    background: transparent;
    color: #111109;
    box-shadow: none;
  }
  /* parallelgram */
  transform: skew(-10deg) rotate(-5deg);
}
.bty:hover {
  background: var(--y2);
  gap: 1.1rem;
  /* parallelgram */
  transform: skew(-10deg) rotate(-5deg);
}
.bgh {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--txt3);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 1px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  padding: 0;
  transition: color 0.2s;
}
.bgh:hover {
  color: var(--y);
}

.hstat {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: right;
}
.stn {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 4.8rem;
  color: var(--y);
  letter-spacing: -2px;
  display: block;
  line-height: 1;
}
.stl {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--txt3);
  letter-spacing: 2px;
  margin-top: 0.4rem;
}

/* MARQUEE */
.mwrap {
  background: var(--y);
  padding: 0.85rem 0;
  overflow: hidden;
}
.mtrack {
  display: flex;
  animation: mq 22s linear infinite;
  width: max-content;
}
.mitem {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--ink);
  letter-spacing: 1px;
  padding: 0 2.5rem;
  white-space: nowrap;
}
.mdot {
  opacity: 0.3;
}
@keyframes mq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* SECTIONS */
.sec {
  padding: 8.2rem 3.2rem;
}
.sec.alt {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 194, 255, 0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 18, 48, 0.55) 0%, rgba(7, 10, 26, 0.75) 100%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-top: 1px solid rgba(0, 194, 255, 0.18);
  border-bottom: 1px solid rgba(0, 194, 255, 0.18);
}
.sin {
  max-width: 1320px;
  margin: 0 auto;
}
.shd {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 5rem;
}
.snum {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--y);
  letter-spacing: 2px;
}
.sline {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 194, 255, 0.45) 30%,
    rgba(244, 235, 28, 0.35) 65%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(0, 194, 255, 0.30);
}
.slbl {
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--txt3);
}

/* SERVICES */
.svrow {
  display: grid;
  grid-template-columns: 60px 1fr 1.8rem;
  gap: 2.5rem;
  align-items: start;
  padding: 2.2rem 1rem;
  border-bottom: none;
  cursor: pointer;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), transparent 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.svn {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--txt3);
  border: none;
  padding-top: 0.4rem;
}
.svttl {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.4rem, 4.4vw, 4.3rem);
  letter-spacing: -1px;
  color: var(--txt);
  transition: color 0.3s;
  margin-bottom: 0.7rem;
  line-height: 1;
}
.svtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.svtag {
  font-size: 0.68rem;
  font-style: italic;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(0, 194, 255, 0.22);
  border-radius: 2px;
  color: var(--txt3);
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.06), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.25s,
    color 0.25s,
    background 0.25s,
    box-shadow 0.25s;
}
.svar {
  font-size: 1.3rem;
  color: var(--bdr2);
  padding-top: 0.6rem;
  transition:
    color 0.3s,
    transform 0.3s;
}

/* STATS */
.sband {
  background: var(--surf);
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  padding: 3rem;
}
.srow {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sb {
  padding: 2rem 2.5rem;
  border-right: 1px solid var(--bdr);
}
.sb:last-child {
  border-right: none;
}
.sbnum {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 5rem;
  color: var(--txt);
  letter-spacing: -2px;
  line-height: 1;
  display: block;
}
.sbnum em {
  color: var(--y);
  font-style: italic;
}
.sblbl {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--txt3);
  letter-spacing: 2px;
  margin-top: 0.5rem;
}

/* PROCESS */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
}
.ps {
  background: var(--bg);
  padding: 2.8rem 2rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.ps:hover {
  background: var(--surf);
}
.ps::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--y);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.ps:hover::after {
  transform: scaleX(1);
}
.psbig {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 5.5rem;
  color: var(--bdr2);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: 1.5rem;
  transition: color 0.3s;
}
.ps:hover .psbig {
  color: var(--y3);
}
.psttl {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.5px;
  color: var(--txt);
  margin-bottom: 0.7rem;
}
.psdesc {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.75;
}

/* TESTIMONIAL */
.twrap {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.tq {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 8rem;
  background: linear-gradient(135deg, var(--y) 0%, var(--y2) 60%, #f4eb1c 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.45;
  line-height: 0.7;
  margin-bottom: 0.5rem;
}
.ttxt {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.6;
  color: var(--txt2);
  margin-bottom: 2.5rem;
}
.ttxt strong {
  color: var(--txt);
  font-weight: 700;
}
.twho {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 194, 255, 0.10) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20, 57, 68, 0.55) 0%, rgba(11, 31, 38, 0.65) 100%);
  border: 1px solid rgba(0, 194, 255, 0.22);
  border-radius: var(--radius);
  padding: 0.8rem 1.5rem;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 18px rgba(0, 194, 255, 0.10);
}
.tav {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 55%),
    linear-gradient(135deg, var(--y) 0%, var(--y2) 60%, #f4eb1c 120%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--ink);
  box-shadow: 0 0 18px rgba(0, 194, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.tname {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--txt);
}
.trole {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--txt3);
}

/* WHY */
.wgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.wirow {
  display: flex;
  gap: 1.5rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--bdr);
  align-items: flex-start;
}
.win {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--y);
  min-width: 2rem;
  padding-top: 0.1rem;
}
.wittl {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--txt);
  margin-bottom: 0.35rem;
}
.widesc {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.75;
}
.wq {
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 2.5rem;
  position: sticky;
  top: 7rem;
}
.wqstars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
}
.star {
  color: var(--y);
  font-size: 0.9rem;
}
.wqtxt {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--txt2);
  line-height: 1.75;
  margin-bottom: 1.8rem;
}
.wqp {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.wqav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink);
}
.wqn {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--txt);
}
.wqr {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--txt3);
}

/* PRICING */
.pgr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 4.5rem;
}
.pc {
  background: var(--bg);
  padding: 3rem 2.5rem;
  transition: background 0.25s;
}
.pc:hover {
  background: var(--surf);
}
.pc.hot {
  background: var(--y) !important;
}
.pc.hot .pctier,
.pc.hot .pcamt,
.pc.hot .pcamt small,
.pc.hot .pcdesc,
.pc.hot .pcfeat li,
.pc.hot .pcfeat li::before {
  color: var(--ink) !important;
}
.pc.hot .pcdesc,
.pc.hot .pcfeat li {
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.pc.hot .pcbtn {
  background: var(--ink);
  color: var(--y);
  border-color: var(--ink);
}
.pc.hot .pcbtn:hover {
  background: #1a1a10;
}
.pctier {
  font-size: 0.68rem;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--txt3);
  margin-bottom: 1.5rem;
}
.pcamt {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 4.6rem;
  letter-spacing: -2px;
  color: var(--txt);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.pcamt small {
  font-size: 0.88rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--txt3);
}
.pcdesc {
  font-size: 0.83rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.65;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--bdr);
}
.pcfeat {
  list-style: none;
  margin-bottom: 2.5rem;
}
.pcfeat li {
  font-size: 0.83rem;
  font-style: italic;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--txt2);
}
.pcfeat li::before {
  content: "-";
  color: var(--y);
  font-style: normal;
}
.pcbtn {
  width: 100%;
  padding: 0.95rem;
  background: transparent;
  border: 1px solid var(--bdr2);
  color: var(--txt);
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s;
}
.pcbtn:hover {
  background: var(--y);
  color: var(--ink);
  border-color: var(--y);
}

/* CTA */
.ctasec {
  padding: 9rem 3.2rem;
  padding-top: 18rem;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(0, 194, 255, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 80% 70%, rgba(192, 66, 255, 0.40) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 90% 15%, rgba(34, 224, 138, 0.28) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(54, 80, 255, 0.32) 0%, transparent 70%),
    linear-gradient(180deg, #070a1a 0%, #0a1230 55%, #050818 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ctasec::before {
  content: "OPTIKFLOWS";
  position: absolute;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 18vw;
  color: rgba(0, 0, 0, 0.055);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: -4px;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
}
.ctasec h2 {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(4.6rem, 10vw, 10.4rem);
  color: #ffffff;
  letter-spacing: -3px;
  line-height: 0.86;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 60px rgba(0, 194, 255, 0.35);
}
.ctasub {
  font-size: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.ctabtns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.bdk {
  background: transparent;
  color: #ffffff;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid rgba(0, 194, 255, 0.7);
  box-shadow: 0 0 28px rgba(0, 194, 255, 0.25), inset 0 0 24px rgba(0, 194, 255, 0.08);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.bdk:hover {
  background: rgba(0, 194, 255, 0.12);
  border-color: rgba(0, 194, 255, 1);
  box-shadow: 0 0 44px rgba(0, 194, 255, 0.55), inset 0 0 32px rgba(0, 194, 255, 0.18);
}
.bob {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #f4faff;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.bob:hover {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.10), 0 0 28px rgba(255, 255, 255, 0.15);
}

/* FOOTER */
footer {
  background:
    radial-gradient(ellipse 60% 60% at 50% -10%, rgba(0, 194, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 15% 100%, rgba(192, 66, 255, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 100%, rgba(34, 224, 138, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 18, 48, 0.85) 0%, #050818 100%);
  border-top: 1px solid rgba(0, 194, 255, 0.30);
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.flogo {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--y) 0%, var(--y2) 60%, var(--y-warm, #f4eb1c) 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--txt3);
}
.flogo span {
  color: var(--y);
}
.flinks {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.flinks a {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--txt3);
  text-decoration: none;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.flinks a:hover {
  color: var(--y);
}
.fcopy {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--txt3);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  nav ul {
    display: none;
  }
  .nav-left {
    gap: 1rem;
  }
  .nav-title {
    font-size: 1rem;
  }
  .nav-cta {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
  }
  .hero h1 {
    font-size: 4.2rem;
    letter-spacing: -2px;
  }
  .hero-center {
    padding: 0 0.5rem;
  }
  .hbottom {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .hstat {
    display: none;
  }
  .srow {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .sb {
    border-right: none;
    border-bottom: 1px solid var(--bdr);
    padding: 1.2rem 0.8rem;
  }
  .svrow {
    grid-template-columns: 44px 1fr;
    gap: 1rem;
    padding: 1.2rem 0.5rem;
  }
  .svar {
    display: none;
  }
  .pgrid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .pgr {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .wgrid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .wq {
    position: static;
    margin-top: 2rem;
  }
  footer {
    flex-direction: column;
    text-align: center;
    gap: 1.2rem;
  }
  .flinks {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .experts-grid {
    flex-direction: column;
    gap: 1.2rem;
    overflow-x: visible;
  }
  .expert-card {
    min-height: 320px;
    flex: 1 1 100%;
    max-width: 100%;
  }
  .expert-photo {
    width: 120px;
    margin: 0 auto 1rem auto;
  }
  .expert-copy {
    position: static;
    padding: 1rem;
    align-items: flex-start;
    text-align: left;
  }
  .expert-card h3 {
    font-size: 1.6rem;
  }
  .expert-card p {
    font-size: 0.95rem;
  }
}
@media (max-width: 600px) {
  nav {
    padding: 1rem 1.5rem;
  }
  .hero,
  .sec,
  .ctasec {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .hero {
    padding-top: 8rem;
  }
  .sband {
    padding: 2rem 1.5rem;
  }
  footer {
    padding: 2rem 1.5rem;
  }
  .pgrid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .srow {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .sbnum {
    font-size: 2.2rem;
  }
  .expert-photo {
    width: 80px;
  }
  .expert-card {
    min-height: 220px;
    padding: 0.5rem;
  }
  .expert-copy {
    padding: 0.5rem;
  }
  .flogo {
    font-size: 1rem;
  }
  .ctasec h2 {
    font-size: 2.2rem;
  }
  .ctabtns {
    flex-direction: column;
    gap: 0.7rem;
  }
}

/* SCROLL STORY OVERRIDES */
:root {
  --hero-fill: 0;
  --hero-text-rgb: 255 255 255;
}

body {
  background: #080808;
}

nav {
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
body.scrolled nav {
  opacity: 1;
  transform: translateY(0);
}

.hero-story {
  min-height: 220vh;
  background: #050818;
  position: relative;
  padding: 0;
}

/* Painterly blob layers — fade in as user scrolls. Cyan leads, magenta + emerald bleed through. */
.hero-story .hero-fill {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(0, 194, 255, 0.85) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 78% 65%, rgba(192, 66, 255, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 88% 22%, rgba(34, 224, 138, 0.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 50% 85%, rgba(54, 80, 255, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 35% 30% at 10% 85%, rgba(102, 224, 255, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #070a1a 0%, #0a1230 55%, #050818 100%);
  filter: blur(40px);
  opacity: var(--hero-fill);
  transition: opacity 0.06s linear;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Soft secondary bloom — slow drifting feel */
.hero-story .hero-fill::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 65% 40%, rgba(0, 194, 255, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 30% 70%, rgba(192, 66, 255, 0.28) 0%, transparent 40%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
}

/* Inner darker veil so text reads cleanly over the blobs */
.hero-story .hero-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 35%, rgba(5, 8, 24, 0.45) 100%);
  pointer-events: none;
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 0 2rem;
  z-index: 2;
}

.hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.hero-logo-stack {
  position: relative;
  display: inline-block;
  height: 128px;
  margin-bottom: 24px;
}

.hero-logo {
  display: block;
  width: auto;
  height: 100%;
}

.hero-logo-black {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.hero-center h1 {
  font-size: clamp(3.6rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: -2px;
  color: #f4faff;
  background: linear-gradient(180deg, #ffffff 0%, #cfeeff 45%, #66e0ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 900;
  transform: rotate(-3.5deg);
  transform-origin: center;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.hero-center p {
  color: #e6e1c2;
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 1.6rem;
}

.hero-center .bty {
  font-style: italic;
  margin-top: 2.25rem;
  padding: 1.1rem 2.6rem;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  letter-spacing: 0.9px;
  border: 1px solid rgba(0, 194, 255, 0.65);
  box-shadow: 0 0 24px rgba(0, 194, 255, 0.18), inset 0 0 18px rgba(0, 194, 255, 0.08);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}

.hero-center .bty:hover {
  background: rgba(0, 194, 255, 0.10);
  color: #ffffff;
  border-color: rgba(0, 194, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(0, 194, 255, 0.45), inset 0 0 24px rgba(0, 194, 255, 0.15);
}

.hero-cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: #b7b4a5;
  letter-spacing: 1px;
  font-size: 0.76rem;
}

.services-stack {
  padding: 0;
  background: #080808;
}

.services-stack .sin {
  max-width: 100%;
}
.stack-list {
  position: relative;
  padding-bottom: 0;
}

.svrow-track {
  height: 200vh;
  position: relative;
}
/* Track bg is the contrasting color so the morphing circle is always visible */
.svrow-track:nth-child(1) { z-index: 1; background: transparent; }
.svrow-track:nth-child(2) { z-index: 2; background: transparent; margin-top: -80vh; }
.svrow-track:nth-child(3) { z-index: 3; background: transparent; margin-top: -80vh; }

.services-stack .svrow {
  position: sticky;
  top: 0;
  min-height: 100vh;
  margin-bottom: 0;
  background: #e3f9ff;
  color: #15140f;
  border: 1px solid #b8e8f5;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0);
  border-radius: 22px;
  align-content: center;
  padding: 4rem 5vw;
  border-bottom: none;
  font-style: italic;
}

.svrow-track:nth-child(1) .svrow { background: #e3f9ff; color: #15140f; border-color: #b8e8f5; z-index: 10; }
.svrow-track:nth-child(2) .svrow { background: #11110d; color: #f3eed9; border-color: #2c2a1f; z-index: 20; }
.svrow-track:nth-child(3) .svrow { background: #e3f9ff; color: #15140f; border-color: #b8e8f5; z-index: 30; }

.services-stack .svn {
  font-size: 1.3rem;
  padding-top: 0;
  padding-left: 2.3rem;
  color: inherit;
}

.services-stack .svttl {
  font-size: clamp(3rem, 7.2vw, 7rem);
  font-style: italic;
      font-family: "Limelight", sans-serif;
  color: inherit;
}

.services-stack .svtag {
  font-size: 0.9rem;
  color: inherit;
  border-color: currentColor;
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
}

.services-stack .svar {
  color: inherit;
  font-size: 3.5rem;
  padding-top: 0;
  padding-right: 2.3rem;
  display: inline-block;
  line-height: 1;
  transform-origin: center center;
}

/* .services-stack .svrow:hover .svtag {
  opacity: 1;
  border-color: currentColor;
  background: rgba(0, 0, 0, 0.14);
  color: inherit;
} */

#experts.sec {
  padding: 0;
  color: transparent;
  background: transparent;
  border-bottom: none;
}

#experts .sin {
  max-width: 100%;
}

.experts-grid {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(0, 194, 255, 0.25);
  border-bottom: none;
  box-shadow: 0 0 32px rgba(0, 194, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: auto;
}

.expert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  min-height: 540px;
  border-bottom: none;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  transition:
    flex 0.4s cubic-bezier(0.4, 0.2, 0.2, 1),
    box-shadow 0.28s ease;
}
.expert-card:hover {
  flex: 2 1 0;
  z-index: 2;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    0 0 48px rgba(0, 194, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  /* No transform: scale, only width expands */
}
.experts-grid:hover .expert-card:not(:hover) {
  flex: 1 1 0;
  opacity: 0.85;
}

.expert-card:nth-child(odd) {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 194, 255, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(192, 66, 255, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #00c2ff 0%, #66e0ff 60%, #a78bfa 120%);
}

.expert-card:nth-child(even) {
  background:
    radial-gradient(circle at 80% 0%, rgba(0, 194, 255, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(192, 66, 255, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, #e8f8ff 0%, #d4f0fa 60%, #ede9fe 120%);
}

.expert-photo {
  position: relative;
  width: 220px;
  margin: 0 0 0rem auto;
  overflow: hidden;
  z-index: 1;
  align-self: flex-end;
}

.expert-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.02);
  transition: filter 0.35s ease;
  display: block;
  border-radius: none;
}

.expert-card:hover .expert-photo img {
  filter: grayscale(0%) contrast(1.02);
}

.expert-card:hover {
  z-index: 2;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.expert-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 2rem 2rem 2.2rem;
  text-align: left;
  background: transparent;
  pointer-events: none;
}

#experts .shd {
  direction: rtl;
}

.expert-kicker {
  color: var(--y);
  letter-spacing: 1.5px;
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.expert-card h3 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  font-style: italic;
  font-family: "Limelight", sans-serif;
  color: #282828;
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-stroke-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.expert-card:hover h3 {
  /* stroke */
  font-size: 4.2rem;
  color: transparent;
  -webkit-text-stroke: 1px #282828cd;
  line-height: 0.8;
}

.expert-card p {
  color: #a6a38f;
  line-height: 1.7;
  font-size: 1.02rem;
  font-style: italic;
}

.expert-card:hover p {
  color: #1c1c14;
  font-weight: bold;
}

.expert-card .expert-kicker {
  color: #1b170b;
}


.expert-card p {
  color: #3a3222;
}

.expert-card .expert-copy {
  background: rgba(255, 255, 255, 0.32);
}

.expert-card:hover .expert-copy {
  background: rgba(255, 255, 255, 0.20);
}

.expert-btn {
  background: transparent;
  color: var(--ink);
  margin-top: 1.2rem;
  padding: 0.42rem 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: background 0.2s, transform 0.2s;
  pointer-events: auto;
  z-index: 1;
}

/* fix inner text skew */
.expert-btn > * {
  transform: skewX(10deg);
}

.expert-btn:hover {
  background: #ffffff;
  transform: skewX(-10deg) rotate(-5deg) translateY(-1px);
  font-weight: bold;
  border: none;
  color: #817828;
}

.nav-cta {
  padding: 0.82rem 1.8rem;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0);
  letter-spacing: 0.6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  font-weight: bold;
  font-size: normal;
}

.nav-cta:hover {
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .hero-story {
    min-height: 155vh;
  }
  .services-stack .svrow,
  .services-stack .svrow:nth-child(1),
  .services-stack .svrow:nth-child(2),
  .services-stack .svrow:nth-child(3) {
    position: relative;
    top: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 600px) {
  .hero-story {
    min-height: 140vh;
  }
  .hero-pin {
    padding: 0 1.2rem;
  }
  .hero-center h1 {
    font-size: 3.1rem;
  }
}

/* ═══════════════════════════════════════════════
   HAMBURGER MENU
   ═══════════════════════════════════════════════ */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 10001;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 900px) {
  .hamburger {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE MENU
   ═══════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 8, 0.97);
  backdrop-filter: blur(20px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu ul {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mobile-menu ul a {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
  color: var(--txt);
  text-decoration: none;
  letter-spacing: -0.5px;
  transition: color 0.2s, background 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.mobile-menu ul a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background: var(--y2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.4,0.2,0.2,1), height 0.4s cubic-bezier(0.4,0.2,0.2,1), opacity 0.3s;
  opacity: 0.18;
  z-index: 0;
}
.mobile-menu ul a:hover::before {
  width: 220%;
  height: 500%;
  opacity: 0.22;
}
.mobile-menu ul a:hover,
.mobile-menu ul a.nav-active {
  color: var(--y);
  background: rgba(255, 240, 77, 0.10);
  box-shadow: 0 2px 12px 0 rgba(0, 194, 255, 0.10);
  transform: scale(1.06) skew(-2deg);
  z-index: 1;
}
.nav-cta-mobile {
  display: inline-block;
  background: var(--y) !important;
  color: var(--ink) !important;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-size: 1.2rem !important;
  margin-top: 1rem;
}
/* Active nav link */
nav ul a.nav-active {
  color: var(--bdr2);
  font-weight: bold;
  background: var(--y2);
  padding: 0.6rem 1.2rem;
  border-radius: 1.2em;
  box-shadow: 0 4px 18px 0 rgba(0, 194, 255, 0.13);
  transform: skew(-10deg) rotate(-5deg) scale(1.03);
  transition: all 0.3s cubic-bezier(0.4,0.2,0.2,1);
}

/* Hover effect */
nav ul a.nav-active:hover {
  transform: skew(-10deg) rotate(-5deg) scale(1.09) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 194, 255, 0.18);
}

/* ═══════════════════════════════════════════════
   PAGE HERO (for sub-pages)
   ═══════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: 10rem 3.2rem 6rem;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 22% 30%, rgba(0, 194, 255, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 70%, rgba(192, 66, 255, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 88% 18%, rgba(34, 224, 138, 0.16) 0%, transparent 65%),
    linear-gradient(180deg, rgba(10, 18, 48, 0.35) 0%, rgba(7, 10, 26, 0.10) 100%);
  overflow: hidden;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
}
.page-hero-label {
  display: inline-block;
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 3px;
  color: var(--y);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0, 194, 255, 0.55);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.12), transparent 60%),
    linear-gradient(135deg, rgba(0, 194, 255, 0.20), rgba(192, 66, 255, 0.10));
  box-shadow:
    0 0 24px rgba(0, 194, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
}
.page-hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--txt);
  background: linear-gradient(180deg, #ffffff 0%, #e6fbff 30%, #66e0ff 65%, #00c2ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.page-hero-desc {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}
.page-hero-glow {
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 1200px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 194, 255, 0.22) 0%, transparent 40%),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.14) 0%, transparent 28%),
    radial-gradient(circle at 70% 60%, rgba(244, 235, 28, 0.12) 0%, transparent 38%),
    radial-gradient(circle at 20% 80%, rgba(102, 224, 255, 0.10) 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(0, 194, 255, 0.10) 0%, transparent 50%);
  filter: blur(40px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   PROJECTS FILTER BAR
   ═══════════════════════════════════════════════ */
.projects-filter-bar {
  padding: 0 3.2rem;
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  position: sticky;
  top: 52px;
  z-index: 100;
}
.filter-pills {
  display: flex;
  gap: 0.5rem;
  padding: 1.2rem 0;
  overflow-x: auto;
  max-width: 1320px;
  margin: 0 auto;
}
.filter-pill {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(0, 194, 255, 0.04));
  border: 1px solid rgba(0, 194, 255, 0.25);
  color: var(--txt2);
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-size: 0.78rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}
.filter-pill:hover {
  border-color: var(--y);
  color: var(--txt);
  background: linear-gradient(135deg, rgba(0, 194, 255, 0.10), rgba(244, 235, 28, 0.05));
  box-shadow: 0 0 18px rgba(0, 194, 255, 0.20);
}
.filter-pill.active {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.30) 0%, transparent 55%),
    linear-gradient(135deg, var(--y) 0%, var(--y2) 100%);
  border-color: var(--y);
  color: var(--ink);
  font-weight: 600;
  box-shadow:
    0 0 24px rgba(0, 194, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ═══════════════════════════════════════════════
   PROJECT CARDS
   ═══════════════════════════════════════════════ */
.projects-masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.project-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(0, 194, 255, 0.10) 0%, transparent 45%),
    linear-gradient(160deg, rgba(20, 57, 68, 0.55) 0%, rgba(11, 31, 38, 0.65) 100%);
  border: 1px solid rgba(0, 194, 255, 0.18);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.3s;
  cursor: default;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(0, 194, 255, 0.25);
  border-color: rgba(0, 194, 255, 0.5);
}

/* Card Visual / Mockup Area */
.project-card-visual {
  position: relative;
  height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card-number {
  position: absolute;
  top: 1.2rem;
  left: 1.4rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: -2px;
  line-height: 1;
  z-index: 1;
}
.project-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
  z-index: 1;
  pointer-events: none;
}
.project-card-mockup {
  width: 85%;
  height: 85%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

/* Mockup Browser */
.mockup-browser {
  width: 90%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mockup-dots {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mockup-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.mockup-content {
  display: flex;
  min-height: 140px;
}
.mockup-sidebar {
  width: 50px;
  background: rgba(255, 255, 255, 0.03);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.mockup-main {
  flex: 1;
  padding: 0.8rem;
}
.mockup-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.mockup-grid-sm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 0.5rem;
}
.mockup-card-sm {
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.mockup-hero-block {
  height: 70px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.mockup-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mockup-msg {
  height: 20px;
  border-radius: 10px;
  width: 85%;
}
.mockup-msg-bot {
  background: rgba(255, 255, 255, 0.08);
  align-self: flex-start;
}
.mockup-msg-user {
  background: rgba(155, 122, 255, 0.15);
  width: 60%;
  align-self: flex-end;
}
.mockup-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0.8rem;
}
.mockup-flow-node {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 179, 71, 0.2);
}
.mockup-flow-line {
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

/* Card Info */
.project-card-info {
  padding: 1.8rem 2rem 2rem;
}
.project-tags {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.project-tag {
  font-size: 0.68rem;
  font-style: italic;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--bdr2);
  border-radius: 2px;
  color: var(--txt3);
  letter-spacing: 0.8px;
}
.project-title {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--txt);
  letter-spacing: -0.5px;
  margin-bottom: 0.7rem;
}
.project-desc {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.75;
  margin-bottom: 1.2rem;
}
.project-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--bdr);
}
.project-client,
.project-duration {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--txt3);
  letter-spacing: 0.5px;
}
.project-duration {
  color: var(--y);
  font-weight: 600;
}

/* Card hide for filter */
.project-card.hidden {
  display: none;
}

/* ─── Phone position-swap animation (projects 7 & 8) ─── */
/*
  Strategy: all phones fixed width:38%, height:110%, bottom:0.
  Position is controlled only via `left` (% of parent).
  Size difference between slots handled via scale() in transform.

  Slots (parent = card, phone width = 38%):
    left:   left=2%,   scale=0.88, rotate=-8deg, dim
    center: left=31%,  scale=1,    rotate=0,     bright  (31 = (100-38)/2)
    right:  left=60%,  scale=0.88, rotate=8deg,  dim     (60 = 100-38-2)

  z-index cannot animate, so we fake depth with scale+brightness.
  Each phone cycles L→C→R→L every 12s, holding 3.6s at each stop.
  The transition window is ~0.5s wide (steps 30%→33%, 63%→66%, 96%→99%).
*/
.ph {
  position: absolute;
  bottom: 0;
  width: 38%;
  height: 110%;
  overflow: hidden;
  z-index: 1;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
}

/* slot values baked in — only left + transform animate, no width/z-index changes */
/* L: left=2%,  transform=scale(.88) rotate(-8deg)  brightness(.7)  */
/* C: left=31%, transform=scale(1)   rotate(0deg)   brightness(1)   */
/* R: left=60%, transform=scale(.88) rotate(8deg)   brightness(.7)  */

.ph--left   { animation-name: ph-lcr; left: 2%;  transform: scale(0.88) rotate(-8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7); }
.ph--center { animation-name: ph-crl; left: 31%; transform: scale(1)    rotate(0deg);   filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);   z-index: 2; }
.ph--right  { animation-name: ph-rlc; left: 60%; transform: scale(0.88) rotate(8deg);   filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7); }

@keyframes ph-lcr {
  /* hold at left  */ 0%   { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* start move C  */ 30%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive center */ 33%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* hold at center*/ 63%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* arrive right  */ 66%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* hold at right */ 96%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive left   */ 99%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  100% { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
}
@keyframes ph-crl {
  /* hold at center*/ 0%   { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* start move R  */ 30%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* arrive right  */ 33%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* hold at right */ 63%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive left   */ 66%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* hold at left  */ 96%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive center */ 99%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  100% { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
}
@keyframes ph-rlc {
  /* hold at right */ 0%   { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* start move L  */ 30%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive left   */ 33%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* hold at left  */ 63%  { left: 2%;  transform: scale(0.88) rotate(-8deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  /* arrive center */ 66%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* hold at center*/ 96%  { left: 31%; transform: scale(1)    rotate(0deg);  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6))  brightness(1);    }
  /* arrive right  */ 99%  { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
  100% { left: 60%; transform: scale(0.88) rotate(8deg);  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55)) brightness(0.7);  }
}

/* ─── Screen position-swap animation (project 9, landscape) ─── */
/*
  Slots (card = 100% wide, 340px tall):
    hero: left=11%, top=8%,  width=78%, rotate=0,     bright  (centered: (100-78)/2=11)
    bl:   left=3%,  top=52%, width=44%, rotate=-2deg, dim
    br:   left=53%, top=52%, width=44%, rotate=2deg,  dim     (53=100-44-3)
  No scale — width+left animate together, no z-index in keyframes.
*/
.sc {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(56,189,248,0.15);
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.sc img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

.sc--top { animation-name: sc-tbl; left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  border-color:rgba(56,189,248,0.25); filter:brightness(1);    z-index:3; }
.sc--bl  { animation-name: sc-blt; left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); border-color:rgba(56,189,248,0.12); filter:brightness(0.75); z-index:2; }
.sc--br  { animation-name: sc-brt; left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); border-color:rgba(56,189,248,0.12); filter:brightness(0.75); z-index:2; }

@keyframes sc-tbl {
  0%   { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  30%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  33%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  63%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  66%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  96%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  99%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  100% { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
}
@keyframes sc-blt {
  0%   { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  30%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  33%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  63%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  66%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  96%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  99%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  100% { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
}
@keyframes sc-brt {
  0%   { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  30%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  33%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  63%  { left:11%; top: 8%; width:78%; transform:rotate(0deg);   box-shadow:0 16px 40px rgba(0,0,0,0.7);  filter:brightness(1);    }
  66%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  96%  { left: 3%; top:52%; width:44%; transform:rotate(-2deg);  box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  99%  { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
  100% { left:53%; top:52%; width:44%; transform:rotate(2deg);   box-shadow:0 10px 28px rgba(0,0,0,0.65); filter:brightness(0.75); }
}

/* App screenshot cards — staggered phone layout */
.project-card--app:hover,
.project-card--web:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), 0 0 0 1px var(--accent, var(--y)), 0 8px 48px var(--glow, rgba(255,255,255,0.05));
}
.project-card--app .project-card-number,
.project-card--web .project-card-number {
  color: rgba(255,255,255,0.06);
  font-size: 5rem;
}

/* Web/landscape screenshot cards */
.project-card--web .project-card-visual {
  height: 360px;
}
.sc img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}

/* ═══════════════════════════════════════════════
   HOME PROJECTS SHOWCASE
   ═══════════════════════════════════════════════ */
.home-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.home-project-card {
  display: block;
  text-decoration: none;
  background: var(--surf);
  border: 1px solid var(--bdr);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s ease,
    border-color 0.3s;
}
.home-project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  border-color: var(--y);
}
.home-project-visual {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-project-num {
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: -2px;
  line-height: 1;
  z-index: 1;
}
.home-project-info {
  padding: 1.5rem 1.6rem 1.8rem;
}
.home-project-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-style: italic;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bdr2);
  border-radius: 2px;
  color: var(--txt3);
  letter-spacing: 0.8px;
  margin-bottom: 0.8rem;
}
.home-project-info h3 {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--txt);
  letter-spacing: -0.3px;
  margin-bottom: 0.5rem;
}
.home-project-info p {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.7;
}
.home-projects-cta {
  text-align: center;
  margin-top: 3rem;
}
.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--y);
  text-decoration: none;
  padding: 0.9rem 2.2rem;
  border: 1px solid rgba(0, 194, 255, 0.2);
  border-radius: 999px;
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
}
.view-all-btn:hover {
  background: var(--y);
  color: var(--ink);
  border-color: var(--y);
}
.view-all-btn span {
  transition: transform 0.25s ease;
}
.view-all-btn:hover span {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════ */

/* Mission Section */
.about-mission-grid {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 5rem;
  align-items: start;
}
.about-mission-left {
  position: sticky;
  top: 7rem;
}
.about-heading {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -2px;
  color: var(--txt);
  line-height: 1;
  margin-top: 1rem;
}
.about-big-text {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.6;
  color: var(--txt2);
  margin-bottom: 2rem;
}
.about-big-text em {
  color: var(--y);
  font-style: italic;
}
.about-body-text {
  font-size: 1rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.85;
}
.about-body-text strong {
  color: var(--txt);
  font-weight: 600;
}

/* Values */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: transparent;
  border: 0px solid var(--bdr);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-value-card {
  background: var(--bdr2);
  padding: 2.5rem 2rem;
  transition: background 0.3s;
  position: relative;
}
.about-value-card:hover {
  background: var(--surf);
}
.about-value-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--y);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.about-value-card:hover::after {
  transform: scaleX(1);
}
.about-value-icon {
  margin-bottom: 1.5rem;
  opacity: 0.7;
}
.about-value-card h3 {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--txt);
  letter-spacing: -0.3px;
  margin-bottom: 0.7rem;
}
.about-value-card p {
  font-size: 0.84rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.75;
}

/* Timeline */
.about-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 3rem;
}
.about-timeline::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bdr);
}
.timeline-item {
  position: relative;
  padding: 0 0 3.5rem 2rem;
  transition-delay: var(--delay);
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-year {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 0.82rem;
  color: var(--y);
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
}
.timeline-dot {
  position: absolute;
  left: -2.55rem;
  top: 0.15rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--bdr2);
  z-index: 2;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.timeline-item:hover .timeline-dot,
.timeline-dot.active {
  border-color: var(--y);
  background: var(--y);
}
.timeline-content h4 {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--txt);
  letter-spacing: -0.3px;
  margin-bottom: 0.5rem;
}
.timeline-content p {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--txt2);
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE - NEW PAGES
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .projects-masonry {
    grid-template-columns: 1fr;
  }
  .home-projects-grid {
    grid-template-columns: 1fr;
  }
  .about-mission-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-mission-left {
    position: static;
  }
  .about-values-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-hero {
    padding: 8rem 2rem 4rem;
  }
  .page-hero h1 {
    font-size: 3rem;
  }
  .projects-filter-bar {
    padding: 0 1.5rem;
  }
}
@media (max-width: 600px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
  .page-hero {
    padding: 7rem 1.5rem 3rem;
  }
  .page-hero h1 {
    font-size: 2.4rem;
  }
  .project-card-visual {
    height: 200px;
  }
  .about-timeline {
    padding-left: 2rem;
  }
  .about-timeline::before {
    left: 0.4rem;
  }
  .timeline-dot {
    left: -1.65rem;
    width: 10px;
    height: 10px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MATERIAL 3 EXPRESSIVE OVERRIDES
   Strip shadows + borders globally on interactive surfaces.
   Replace static depth with squishy/springy spring motion.
   Cards/pills/buttons squash when pressed, overshoot on hover release.
   ════════════════════════════════════════════════════════════════ */

/* ─── Universal: kill borders & shadows on surfaces ─── */
.project-card,
.expert-card,
.home-project-card,
.service-stack-item,
.filter-pill,
.nav-cta,
.nav-cta-mobile,
.bdk,
.bob,
.page-hero,
.about-value-card,
.timeline-item,
nav {
  box-shadow: none !important;
  border: none !important;
}

/* Springy about value cards */
.about-value-card {
  border-radius: 28px;
  transition:
    transform var(--t-base) var(--spring-bouncy),
    background var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
}
.about-value-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-radius: 40px 28px 36px 30px;
}
.about-value-card:active {
  transform: translateY(-1px) scale(0.985);
  transition: transform 120ms var(--spring-squish);
}

/* ─── Springy project cards ─── */
.project-card {
  background: var(--surf);
  border-radius: 28px;
  transition:
    transform var(--t-base) var(--spring-bouncy),
    background-color var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
  will-change: transform, border-radius;
}
.project-card:hover {
  transform: translateY(-8px) scale(1.015);
  background: var(--surf2);
  border-radius: 36px 28px 32px 30px;
  box-shadow: none !important;
}
.project-card:active {
  transform: translateY(-2px) scale(0.985);
  transition:
    transform 120ms var(--spring-squish),
    background-color var(--t-fast) var(--ease-standard);
}

/* Subtle accent wash on hover instead of border */
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--accent, var(--y)) 18%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease-emphasized);
  pointer-events: none;
  z-index: 0;
}
.project-card { position: relative; }
.project-card > * { position: relative; z-index: 1; }
.project-card:hover::after { opacity: 1; }

/* ─── Filter pills: liquid switch ─── */
.filter-pills {
  position: relative;
  padding: 1.2rem 0.4rem;
  background: var(--surf);
  border-radius: var(--r-pill);
  width: fit-content;
  margin: 0.6rem auto;
  gap: 0.25rem;
}
.filter-pill {
  position: relative;
  background: transparent;
  color: var(--txt2);
  padding: 0.6rem 1.4rem;
  border-radius: var(--r-pill);
  z-index: 1;
  transition:
    color var(--t-base) var(--ease-standard),
    transform 160ms var(--spring-squish);
}
.filter-pill:hover {
  color: var(--txt);
  transform: scale(1.04);
}
.filter-pill:active {
  transform: scale(0.92);
  transition: transform 100ms var(--spring-squish);
}
.filter-pill.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--y);
  transform: scale(1);
  transition:
    background var(--t-slow) var(--spring-liquid),
    color var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid),
    transform 200ms var(--spring-bouncy);
  /* liquid morph on active state */
  animation: pill-pop var(--t-slow) var(--spring-bouncy);
}
@keyframes pill-pop {
  0%   { transform: scale(0.85);   border-radius: 999px; }
  45%  { transform: scale(1.12);   border-radius: 60% 40% 50% 50% / 50%; }
  100% { transform: scale(1);      border-radius: 999px; }
}

/* ─── Buttons: squish on press ─── */
.bdk, .bob, .nav-cta, .nav-cta-mobile, .view-all-btn {
  border-radius: var(--r-pill) !important;
  transition:
    transform 240ms var(--spring-bouncy),
    background-color var(--t-base) var(--ease-standard),
    color var(--t-base) var(--ease-standard),
    border-radius var(--t-slow) var(--spring-liquid) !important;
  will-change: transform;
}
.bdk:hover, .bob:hover, .nav-cta:hover, .view-all-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-radius: 32px 999px 999px 32px !important;
  box-shadow: none !important;
}
.bdk:active, .bob:active, .nav-cta:active, .view-all-btn:active {
  transform: translateY(0) scale(0.94);
  transition: transform 110ms var(--spring-squish) !important;
  border-radius: 999px !important;
}

/* ─── Nav links: liquid blob highlight ─── */
nav ul a {
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  transition:
    color var(--t-base) var(--ease-emphasized),
    background var(--t-slow) var(--spring-liquid),
    transform 220ms var(--spring-bouncy),
    border-radius var(--t-slow) var(--spring-liquid);
}
nav ul a:hover {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
  transform: translateY(-2px) scale(1.06);
  box-shadow: none !important;
}
nav ul a:active {
  transform: scale(0.92);
  border-radius: 999px;
  transition: transform 100ms var(--spring-squish), border-radius 120ms var(--spring-squish);
}

/* ─── Services stack: scroll-driven liquid morph ───
   Each sticky card shrinks, rounds, dims as the next card covers it.
   Uses CSS scroll-driven animations (Chrome 115+, Edge 115+).
   Firefox/Safari without support: cards still stack, just no morph. */
.services-stack .svrow {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
  transform-origin: center top;
  transition:
    background var(--t-slow) var(--ease-emphasized);
}

/* ── Circle→card morph: JS sets --morph (0→1) on each .svrow as track scrolls in ── */
.services-stack .svrow {
  --morph: 0;
  clip-path: circle(calc(20% + var(--morph) * 130%) at 50% 50%);
  border-radius: calc(50% - var(--morph) * (50% - 0px)) !important;
  transform: scale(calc(0.18 + var(--morph) * 0.82)) translateY(calc((1 - var(--morph)) * 60px));
  opacity: calc(0.1 + var(--morph) * 0.9);
  will-change: clip-path, border-radius, transform, opacity;
}

/* Once fully morphed, release those props so exit-morph animation can take over */
.services-stack .svrow.morphed {
  clip-path: none;
  transform: none;
  opacity: 1;
}

@keyframes svrow-morph {
  0% {
    transform: scale(1) translateY(0);
    border-radius: 28px;
  }
  60% {
    transform: scale(0.96) translateY(-6px);
    border-radius: 48px 36px 44px 40px;
  }
  100% {
    transform: scale(0.9) translateY(-14px);
    border-radius: 60px 44px 56px 48px;
  }
}

@supports (animation-timeline: view()) {
  .services-stack .svrow.morphed {
    animation: svrow-morph linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
}

/* Inner elements ride the morph too — title shrinks slightly */
@supports (animation-timeline: view()) {
  .services-stack .svrow .svttl {
    animation: svrow-title-morph linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
}
@keyframes svrow-title-morph {
  0%   { letter-spacing: 0;     opacity: 1; }
  100% { letter-spacing: -2px;  opacity: 0.55; }
}

@supports (animation-timeline: view()) {
  .services-stack .svrow .svar {
    animation: svar-spin linear both;
    animation-timeline: --svrow-track;
    animation-range: entry 0% exit 100%;
  }
}
@keyframes svar-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Experts: strip borders/lines, keep original flex layout ─── */
.experts-grid {
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
  gap: 0.5rem !important;
  padding: 0 0.75rem;
}
.expert-card {
  border-radius: 24px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  transition:
    flex var(--t-liquid) var(--spring-liquid),
    transform var(--t-base) var(--spring-bouncy),
    background var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid) !important;
}
.expert-card:hover {
  transform: translateY(-4px);
  border-radius: 36px 24px 32px 28px !important;
  box-shadow: none !important;
  border: none !important;
}

/* ─── Home project cards ─── */
.home-project-card {
  border-radius: 24px;
  transition:
    transform var(--t-base) var(--spring-bouncy),
    background var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
}
.home-project-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-radius: 36px 24px 30px 28px;
  box-shadow: none !important;
}
.home-project-card:active {
  transform: translateY(-1px) scale(0.985);
  transition: transform 120ms var(--spring-squish);
}

/* ─── Page hero: drop borders ─── */
.page-hero { border-radius: 0 0 36px 36px; overflow: hidden; }

/* ─── Liquid filter reshuffle: FLIP transitions ─── */
.projects-masonry {
  transition: none;
}
.project-card.flip-moving {
  transition:
    transform var(--t-liquid) var(--spring-liquid),
    opacity var(--t-base) var(--ease-standard) !important;
  z-index: 2;
}
.project-card.flip-entering {
  animation: card-enter var(--t-liquid) var(--spring-bouncy) both;
}
.project-card.flip-leaving {
  animation: card-leave 360ms var(--ease-emphasized) both;
  pointer-events: none;
}
@keyframes card-enter {
  0%   { opacity: 0; transform: scale(0.6) rotate(-2deg);   border-radius: 60% 40% 50% 50% / 50%; }
  55%  { opacity: 1; transform: scale(1.05) rotate(1deg);   border-radius: 40px 24px 36px 28px; }
  100% { opacity: 1; transform: scale(1) rotate(0deg);      border-radius: 28px; }
}
@keyframes card-leave {
  0%   { opacity: 1; transform: scale(1);                   border-radius: 28px; }
  100% { opacity: 0; transform: scale(0.7);                 border-radius: 50%; }
}
/* hide previous filter behavior cleanly */
.project-card.hidden {
  display: none;
}

/* ─── Filter bar: pill container shape ─── */
.projects-filter-bar {
  background: transparent;
  padding: 1rem 0;
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL LIQUID RADIUS
   Anything that already has border-radius + a state change (hover,
   active, focus, animation) gets its corners morphed during the
   transition so movement always looks fluid, never rigid.
   ════════════════════════════════════════════════════════════════ */

/* 1. CONTINUOUS LIQUID BREATHING
   Surfaces visibly morph their radius on a slow loop so the fluid
   feel is always present, not just on hover. Each surface gets a
   staggered delay so the page doesn't pulse in unison.

   Important: this uses `animation` (not `transition`) so it doesn't
   clobber any existing `transition` declarations on these elements. */

@keyframes liquid-card {
  0%, 100% { border-radius: 28px 28px 28px 28px; }
  25%      { border-radius: 36px 24px 32px 28px; }
  50%      { border-radius: 32px 36px 28px 32px; }
  75%      { border-radius: 28px 32px 36px 24px; }
}
@keyframes liquid-pill {
  0%, 100% { border-radius: 999px; }
  33%      { border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%; }
  66%      { border-radius: 40% 60% 60% 40% / 50% 50% 60% 40%; }
}
@keyframes liquid-rect {
  0%, 100% { border-radius: 8px; }
  50%      { border-radius: 14px 8px 12px 10px; }
}
@keyframes liquid-big {
  0%, 100% { border-radius: 24px; }
  25%      { border-radius: 36px 28px 32px 28px; }
  50%      { border-radius: 28px 36px 28px 32px; }
  75%      { border-radius: 32px 28px 36px 28px; }
}

/* Large surfaces — slow, generous morph */
.project-card,
.expert-card,
.home-project-card,
.about-value-card {
  animation: liquid-card 14s ease-in-out infinite;
}
.project-card:nth-child(2n)  { animation-delay: -3.5s; }
.project-card:nth-child(3n)  { animation-delay: -7s; }
.project-card:nth-child(4n)  { animation-delay: -10.5s; }
.expert-card:nth-child(2n)   { animation-delay: -4s; }
.expert-card:nth-child(3n)   { animation-delay: -8s; }
.expert-card:nth-child(4n)   { animation-delay: -12s; }
.home-project-card:nth-child(2n) { animation-delay: -5s; }
.home-project-card:nth-child(3n) { animation-delay: -9s; }
.about-value-card:nth-child(2n)  { animation-delay: -4.5s; }
.about-value-card:nth-child(3n)  { animation-delay: -9s; }
.about-value-card:nth-child(4n)  { animation-delay: -13.5s; }

/* Sticky service rows */
.services-stack .svrow {
  animation: liquid-big 12s ease-in-out infinite;
}
.services-stack .svrow:nth-child(2) { animation-delay: -4s; }
.services-stack .svrow:nth-child(3) { animation-delay: -8s; }

/* Pills/buttons — small, fast pulse */
.filter-pill,
.nav-cta,
.nav-cta-mobile,
.bdk,
.bob,
.view-all-btn,
.expert-btn,
.svtag,
nav ul a {
  animation: liquid-pill 9s ease-in-out infinite;
}
.filter-pill:nth-child(2n) { animation-delay: -3s; }
.filter-pill:nth-child(3n) { animation-delay: -6s; }
.svtag:nth-child(2n)       { animation-delay: -3s; }
.svtag:nth-child(3n)       { animation-delay: -6s; }
.svtag:nth-child(4n)       { animation-delay: -2s; }
.svtag:nth-child(5n)       { animation-delay: -5s; }
nav ul li:nth-child(2n) a  { animation-delay: -3s; }
nav ul li:nth-child(3n) a  { animation-delay: -5s; }
nav ul li:nth-child(4n) a  { animation-delay: -7s; }

/* Tiny chips — subtle breathe */
.project-tag {
  animation: liquid-rect 10s ease-in-out infinite;
}
.project-tag:nth-child(2n) { animation-delay: -3.3s; }
.project-tag:nth-child(3n) { animation-delay: -6.6s; }

/* Pause breathing on hover so the user's explicit interaction
   (which has its own radius transition) reads cleanly. */
.project-card:hover,
.expert-card:hover,
.home-project-card:hover,
.about-value-card:hover,
.filter-pill:hover,
.nav-cta:hover,
.bdk:hover,
.bob:hover,
.view-all-btn:hover,
.expert-btn:hover,
.svrow:hover,
.svtag:hover,
.project-tag:hover,
nav ul a:hover {
  animation-play-state: paused;
}

/* 2. Compose transitions: re-declare component transitions to INCLUDE
   border-radius alongside their existing animated properties. The CSS
   `transition` shorthand above would replace prior values, so we use
   per-component overrides that explicitly list both transform AND
   border-radius. These already exist for project/expert/home cards.
   Adding the missing ones below: */

.svtag {
  border-radius: 999px !important;
  transition:
    background var(--t-base) var(--ease-standard),
    color var(--t-base) var(--ease-standard),
    border-radius var(--t-slow) var(--spring-liquid),
    transform 200ms var(--spring-bouncy);
}
.svtag:hover {
  border-radius: 28px 999px 999px 28px !important;
  transform: translateY(-1px) scale(1.05);
}

.project-tag {
  transition:
    background var(--t-base) var(--ease-standard),
    color var(--t-base) var(--ease-standard),
    border-radius var(--t-slow) var(--spring-liquid),
    transform 200ms var(--spring-bouncy);
}
.project-tag:hover {
  border-radius: 14px 4px 14px 4px;
  transform: translateY(-1px);
}

.svrow {
  transition:
    background var(--t-slow) var(--ease-emphasized),
    color var(--t-slow) var(--ease-emphasized);
}

.eyebrow,
.snum,
.shd {
  transition:
    opacity 0.9s var(--ease-emphasized),
    transform 0.9s var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
}

/* Page-hero gets a soft scroll-driven radius pulse */
.page-hero {
  border-radius: 0 0 36px 36px;
  transition: border-radius var(--t-slow) var(--spring-liquid);
}
body.scrolled .page-hero {
  border-radius: 0 0 60px 44px;
}

/* Mobile menu — slides in, morph radius during open */
.mobile-menu {
  border-radius: 0 0 32px 32px;
  transition:
    transform var(--t-slow) var(--spring-liquid),
    opacity var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
}
.mobile-menu.open {
  border-radius: 0 0 60px 44px;
}

/* Hamburger bars — morph radius when toggled to X */
.hamburger span {
  transition:
    transform var(--t-base) var(--spring-bouncy),
    opacity var(--t-fast) var(--ease-standard),
    border-radius var(--t-base) var(--spring-liquid);
  border-radius: 2px;
}
.hamburger.active span {
  border-radius: 6px;
}

/* Nav itself — morph its bottom corners as it appears */
nav {
  transition:
    background var(--t-base) var(--ease-emphasized),
    transform var(--t-base) var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid) !important;
}

/* 4. Keyframe animations — radius-fluid versions of common reveals */

/* Fade-up reveal: also morphs radius from blob to final shape */
.reveal,
.stagger > * {
  transition:
    opacity 0.85s var(--ease-emphasized),
    transform 0.85s var(--ease-emphasized),
    border-radius var(--t-slow) var(--spring-liquid);
}

/* Hero logo stack — soft pulse */
.hero-logo-stack {
  transition: border-radius var(--t-slow) var(--spring-liquid);
}

/* CTA section radius morph on hover of any child */
.ctasec {
  transition: border-radius var(--t-slow) var(--spring-liquid);
}
.ctasec:hover {
  border-radius: 40px 60px 32px 48px;
}

/* 5. Pulse animation for elements that have continuous animation —
   tie radius into the keyframe so the corners "breathe" while
   the element loops. */
@keyframes liquid-breathe {
  0%, 100% { border-radius: var(--liquid-r0, 24px); }
  50%      { border-radius: var(--liquid-r1, 32px 24px 28px 30px); }
}

/* Apply breathing to elements that have continuous animations
   AND a radius — currently the .ph (phone slots) and .sc (screens)
   already morph position; add subtle radius breathing too. */
.ph {
  --liquid-r0: 18px;
  --liquid-r1: 22px 18px 20px 18px;
  animation-composition: replace;
}
.sc {
  --liquid-r0: 8px;
  --liquid-r1: 14px 8px 10px 10px;
}

/* 6. Active/press = quick radius squish (already covered for buttons,
   add for cards) */
.project-card:active,
.expert-card:active,
.home-project-card:active,
.about-value-card:active,
.timeline-item:active {
  border-radius: 18px !important;
  transition:
    transform 110ms var(--spring-squish),
    border-radius 140ms var(--spring-squish) !important;
}

/* 7. Focus-visible — accessibility: same liquid morph on keyboard nav */
.project-card:focus-visible,
.filter-pill:focus-visible,
.nav-cta:focus-visible,
.bdk:focus-visible,
.bob:focus-visible,
.expert-btn:focus-visible,
.svtag:focus-visible,
nav ul a:focus-visible,
.home-project-card:focus-visible,
.about-value-card:focus-visible {
  outline: none;
  border-radius: 40px 24px 36px 28px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--y)) 50%, transparent) !important;
}

/* ─── Disable transitions on motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── STRATEGY CALL MODAL ─────────────────────────────────────── */
.scm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.scm-backdrop.scm-open {
  display: flex;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}
.scm {
  position: relative;
  background: #0e0e12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,194,255,0.08);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.scm-backdrop.scm-open .scm {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scm-close {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.scm-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.scm-kicker {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00c2ff;
  margin: 0 0 0.6rem;
  font-style: italic;
}
.scm-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: #fff;
}
.scm-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1.5rem;
}

/* Calendar */
.scm-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
}
.scm-cal-nav {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.scm-cal-nav:hover { border-color: #00c2ff; color: #00c2ff; }
.scm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.scm-cal-dow {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.35);
  text-align: center;
  padding-bottom: 0.35rem;
  text-transform: uppercase;
}
.scm-cal-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  height: 2.2rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.scm-cal-day:hover:not([disabled]) {
  background: rgba(0,194,255,0.1);
  border-color: rgba(0,194,255,0.4);
}
.scm-cal-today { border-color: rgba(0,194,255,0.35); color: #00c2ff; }
.scm-cal-sel {
  background: rgba(0,194,255,0.18) !important;
  border-color: #00c2ff !important;
  color: #fff !important;
  font-weight: 700;
}
.scm-cal-disabled { color: rgba(255,255,255,0.2); cursor: not-allowed; }

/* Time slots */
.scm-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.scm-slot {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  padding: 0.55rem 0.4rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: "DM Sans", sans-serif;
}
.scm-slot:hover { background: rgba(0,194,255,0.1); border-color: rgba(0,194,255,0.4); }
.scm-slot-sel {
  background: rgba(0,194,255,0.18) !important;
  border-color: #00c2ff !important;
  color: #fff !important;
  font-weight: 700;
}

/* Fields */
.scm-fields { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.scm-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3px;
}
.scm-opt { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
.scm-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  resize: none;
}
.scm-input:focus { border-color: #00c2ff; background: rgba(0,194,255,0.05); }
.scm-input::placeholder { color: rgba(255,255,255,0.22); }
.scm-textarea { resize: vertical; min-height: 80px; }

/* Nav row */
.scm-nav {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.scm-btn {
  background: rgba(0,194,255,0.12);
  border: 1px solid rgba(0,194,255,0.5);
  border-radius: 999px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 500;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.scm-btn:hover:not([disabled]) {
  background: rgba(0,194,255,0.22);
  border-color: #00c2ff;
  transform: translateY(-1px);
}
.scm-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.scm-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
}
.scm-btn--ghost:hover { border-color: rgba(255,255,255,0.45); color: #fff; background: rgba(255,255,255,0.05); }
.scm-btn--cta {
  background: linear-gradient(135deg, rgba(0,194,255,0.25), rgba(100,220,255,0.15));
  border-color: #00c2ff;
  box-shadow: 0 0 20px rgba(0,194,255,0.3);
}
.scm-btn--cta:hover {
  background: linear-gradient(135deg, rgba(0,194,255,0.4), rgba(100,220,255,0.25));
  box-shadow: 0 0 32px rgba(0,194,255,0.5);
}

@media (max-width: 480px) {
  .scm { padding: 1.75rem 1.25rem; }
  .scm-slots { grid-template-columns: repeat(2, 1fr); }
}