/* ============================================================
   PearlRain Digital - shared design system
   Light, modern, tech-forward. Sora + Hanken Grotesk.
   Deep blue to purple gradient. No pink.
   ============================================================ */

  @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

  :root {
      --bg: #FFFFFF;
      --bg-2: #eff4f7;
      --surface: #FFFFFF;
      --ink: #1B1A2E;
      --ink-soft: #5C5A72;
      --ink-faint: #918FA8;
      --brand-1: #28aad9;
      --brand-2: #384dca;
      --brand-3: #1e3a8a;
      --accent: #28aad9;
      --teal: #0E8C77;
      /* cool secondary */

      --tint-violet: #ECEAFB;
      --tint-violet-2: #DED9F7;
      --tint-blue: #E3ECFD;
      --tint-teal: #DBEFEA;

      --grad: linear-gradient(125deg, #1e3a8a 0%, #384dca 52%, #28aad9 100%);
      --grad-soft: linear-gradient(125deg, #E6EAFB 0%, #E7E4FA 100%);

      --line: rgba(27, 26, 46, .10);
      --line-2: rgba(27, 26, 46, .06);

      --shadow-sm: 0 2px 10px rgba(30, 30, 70, .06);
      --shadow: 0 14px 40px rgba(30, 30, 70, .10);
      --shadow-lg: 0 30px 70px rgba(30, 30, 70, .16);

      --r-sm: 14px;
      --r: 20px;
      --r-lg: 28px;

      --maxw: 1200px;
      --ease: cubic-bezier(.22, 1, .36, 1);
  }

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

  html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
  }

  body {
      font-family: 'Hanken Grotesk', system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.6;
      font-size: 17px;
      overflow-x: hidden;
      position: relative;
  }

  body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  img {
      max-width: 100%;
      display: block;
  }

  a {
      color: inherit;
      text-decoration: none;
  }

  button {
      font-family: inherit;
      cursor: pointer;
  }

  /* ---------- typography ---------- */
  h1,
  h2,
  h3,
  h4 {
      font-family: 'Sora', system-ui, sans-serif;
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -.025em;
      color: var(--ink);
  }

  .display {
      font-size: 75px;
      font-weight: 700;
      letter-spacing: -.04em;
      line-height: 1.0;
  }

  h2.section-title {
      font-size: clamp(1.9rem, 4.2vw, 3.2rem);
      font-weight: 680;
      letter-spacing: -.03em;
  }

  h3 {
      font-size: clamp(1.25rem, 2.2vw, 1.6rem);
      font-weight: 600;
  }

  .eyebrow {
      font-family: 'Hanken Grotesk', sans-serif;
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--brand-2);
      display: inline-flex;
      align-items: center;
      gap: .55rem;
  }

  .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: var(--grad);
  }

  .lead {
      font-size: clamp(1.05rem, 1.5vw, 1.25rem);
      color: var(--ink-soft);
  }

  .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
  }

  em.fancy {
      font-style: normal;
      font-weight: inherit;
  }

  /* ---------- layout ---------- */
  .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 26px;
  }

  section {
      position: relative;
  }

  .band {
      padding: clamp(40px, 9vw, 60px) 0;
  }

  .band-alt {
      background: var(--bg-2);
  }

  .center {
      text-align: center;
  }

  .maxw-head {
      max-width: 760px;
  }

  .maxw-head.center {
      margin-inline: auto;
  }

  /* ---------- buttons ---------- */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-weight: 700;
      font-size: .98rem;
      padding: .92rem 1.5rem;
      border-radius: 100px;
      border: none;
      position: relative;
      overflow: hidden;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }

  .btn svg {
      width: 18px;
      height: 18px;
      transition: transform .35s var(--ease);
  }

  .btn-primary {
      color: #fff;
      background: var(--grad);
      background-size: 160% 160%;
      box-shadow: 0 10px 26px rgba(67, 56, 202, .32);
  }

  .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 36px rgba(67, 56, 202, .42);
  }

  .btn-primary:hover svg {
      transform: translateX(4px);
  }

  .btn-ghost {
      color: var(--ink);
      background: transparent;
      border: 1.6px solid var(--line);
  }

  .btn-ghost:hover {
      border-color: var(--brand-2);
      color: var(--brand-2);
      transform: translateY(-3px);
  }

  .btn-light {
      background: #fff;
      color: var(--ink);
      box-shadow: var(--shadow-sm);
  }

  .btn-light:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
  }

  .btn-big {
      padding: 1.05rem 1.8rem;
      font-size: 1.05rem;
  }

  .tlink {
      font-weight: 700;
      color: var(--brand-2);
      display: inline-flex;
      align-items: center;
      gap: .45rem;
  }

  .tlink svg {
      width: 16px;
      height: 16px;
      transition: transform .3s var(--ease);
  }

  .tlink:hover svg {
      transform: translate(3px, -3px);
  }

  /* ---------- header / nav ---------- */
  .nav {
      position: sticky;
      top: 0;
      z-index: 200;
      backdrop-filter: saturate(140%) blur(12px);
      background: rgba(248, 247, 251, .72);
      border-bottom: 1px solid transparent;
      transition: background .3s, border-color .3s, box-shadow .3s;
  }

  .nav.scrolled {
      background: rgba(248, 247, 251, .92);
      border-color: var(--line-2);
      box-shadow: 0 6px 24px rgba(30, 30, 70, .06);
  }

  .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74px;
  }

  .brand img {
      height: 45px;
      width: auto;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 2px;
      list-style: none;
  }

  .nav-links a {
      font-weight: 600;
      font-size: .97rem;
      padding: .55rem .9rem;
      border-radius: 100px;
      color: var(--ink);
      position: relative;
      transition: color .25s, background .25s;
  }

  .nav-links a::after {
      content: "";
      position: absolute;
      left: .9rem;
      right: .9rem;
      bottom: .34rem;
      height: 2px;
      background: linear-gradient(125deg, #1e3a8a 0%, #384dca 52%, #28aad9 100%);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s var(--ease);
  }

  .nav-links a:hover {
      color: #384dca;
  }

  .nav-links a:hover::after {
      transform: scaleX(1);
  }

  .nav-links a.active {
      color: #384dca;
  }

  .nav-links a.active::after {
      transform: scaleX(1);
  }

  .nav-cta {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  /* mobile-menu "Let's talk" item; hidden on desktop, shown inside open burger menu */
  .nav-cta-mobile {
      display: none;
  }

  .burger {
      display: none;
      background: none;
      border: none;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center;
  }

  .burger span {
      width: 21px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: .3s;
  }

  .burger.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
  }

  .burger.open span:nth-child(2) {
      opacity: 0;
  }

  .burger.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
  }

  /* ---------- decorative blobs (cool only) ---------- */
  .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(64px);
      opacity: .55;
      z-index: 0;
      pointer-events: none;
  }

  .blob-1 {
      width: 460px;
      height: 460px;
      background: radial-gradient(circle, rgba(109, 40, 217, .28), transparent 70%);
  }

  .blob-2 {
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(37, 99, 235, .26), transparent 70%);
  }

  .blob-3 {
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, rgba(30, 58, 138, .22), transparent 70%);
  }

  /* ---------- hero / banner ---------- */
  .hero {
      padding-top: clamp(54px, 7vw, 40px);
      padding-bottom: clamp(54px, 8vw, 96px);
      overflow: hidden;
      position: relative;
  }

  /* Remove the existing grid pattern pseudo-element and replace with this */
  /* ---- dot grid (replaces the line grid in hero::before) ---- */
  /* ---- dot grid ---- */
  .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(27, 26, 46, 0.18) 1px, transparent 1px);
      background-size: 28px 28px;
  }

  /* ---- floating circles ---- */
  .hero-shapes {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
  }

  .hero-shapes .hs {
      position: absolute;
      border-radius: 50%;
      will-change: transform;
  }

  /* Circle 1 — large, top-right, partially cropped */
  .hero-shapes .hs-1 {
      width: 420px;
      height: 420px;
      background: linear-gradient(257deg, #384dca91 0%, #28aad9 100%);

      right: -80px;
      top: -120px;
      animation: hsFloat1 9s ease-in-out infinite;
  }

  /* Circle 2 — medium, mid-right */
  .hero-shapes .hs-2 {
      width: 280px;
      height: 280px;
      background: linear-gradient(135deg, #384dca91 10%, #28aad9 100%);
      right: 80px;
      top: 40%;
      animation: hsFloat2 7s ease-in-out infinite;
  }


  /* Circle 3 — small, bottom-right */
  .hero-shapes .hs-3 {
      width: 200px;
      height: 200px;
      background: linear-gradient(257deg, #384dca91 0%, #28aad9 100%);
      right: -20px;
      bottom: -30px;
      animation: hsFloat3 11s ease-in-out infinite;
  }

  /* Circle 4 — tiny accent, bottom-center-right */
  .hero-shapes .hs-4 {
      width: 120px;
      height: 120px;
      background: linear-gradient(135deg, #384dca91 10%, #28aad9 100%);
      right: 260px;
      bottom: 40px;
      animation: hsFloat4 8s ease-in-out infinite;
  }


  /* Each circle gets its own unique path so they never move in sync */
  @keyframes hsFloat1 {

      0%,
      100% {
          transform: translate(0px, 0px);
      }

      30% {
          transform: translate(-18px, -28px);
      }

      60% {
          transform: translate(12px, -38px);
      }

      80% {
          transform: translate(-8px, 18px);
      }
  }

  @keyframes hsFloat2 {

      0%,
      100% {
          transform: translate(0px, 0px);
      }

      25% {
          transform: translate(20px, -30px);
      }

      55% {
          transform: translate(-14px, -22px);
      }

      80% {
          transform: translate(10px, 24px);
      }
  }

  @keyframes hsFloat3 {

      0%,
      100% {
          transform: translate(0px, 0px);
      }

      20% {
          transform: translate(-22px, 20px);
      }

      50% {
          transform: translate(16px, -32px);
      }

      75% {
          transform: translate(-10px, 14px);
      }
  }

  @keyframes hsFloat4 {

      0%,
      100% {
          transform: translate(0px, 0px);
      }

      35% {
          transform: translate(18px, -24px);
      }

      65% {
          transform: translate(-16px, 18px);
      }

      85% {
          transform: translate(8px, -10px);
      }
  }

  .hero .wrap {
      position: relative;
      z-index: 2;
  }

  /*@media (max-width: 768px) {*/
  /*  .hero-shapes { display: none; }*/
  /*  .split[style*="align-items:end"] .reveal.d1 {*/
  /*    text-align: left !important;*/
  /*  }*/
  /*  .display {*/
  /*    font-size: 50px;*/
  /*  }*/
  /*   #page-services .dash {*/
  /*    display: none;*/
  /*  }*/
  /*    .foot-grid {*/
  /*    grid-template-columns: 1fr 1fr;*/
  /*    gap: 28px;*/
  /*  }*/
  /*  .foot-grid > div:nth-child(1) {*/
  /*    grid-column: 1 / -1;*/
  /*  }*/
  /*  .foot-grid > div:nth-child(2) {*/
  /*    grid-column: 1 / 2;*/
  /*  }*/
  /*  .foot-grid > div:nth-child(3) {*/
  /*    grid-column: 2 / 3;*/
  /*  }*/
  /*  .foot-grid > div:nth-child(4) {*/
  /*    grid-column: 1 / -1;*/
  /*  }*/
  /*  .brand-blk p {*/
  /*    max-width: 100%;*/
  /*  }*/
  /*  .foot-bottom {*/
  /*    flex-direction: column;*/
  /*    align-items: flex-start;*/
  /*    gap: 8px;*/
  /*  }*/
  /*}*/

  @media (max-width: 768px) {
      .display {
          font-size: 52px;
      }

      .eyebrow {
          font-size: 12px;
      }

      .hero-shapes {
          display: none;
      }

      .hero-art {
          display: none !important;
      }

      #page-perform .hero-art {
          display: none !important;
      }

      #page-services .dash {
          display: none;
      }

      .foot-grid {
          grid-template-columns: 1fr 1fr;
          gap: 28px;
      }

      .foot-grid>div:nth-child(1) {
          grid-column: 1 / -1;
      }

      .foot-grid>div:nth-child(2) {
          grid-column: 1 / 2;
      }

      .foot-grid>div:nth-child(3) {
          grid-column: 2 / 3;
      }

      .foot-grid>div:nth-child(4) {
          grid-column: 1 / -1;
      }

      .brand-blk p {
          max-width: 100%;
      }

      .foot-bottom {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
      }
  }

  @media (max-width: 480px) {
      .display {
          font-size: 42px;
      }

      .eyebrow {
          font-size: 11px;
      }
  }


  .hero .wrap {
      position: relative;
      z-index: 2;
  }

  .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 54px;
      align-items: center;
  }

  .hero h1 {
      margin: .55rem 0 1.15rem;
  }

  .hero .lead {
      max-width: 520px;
      margin-bottom: 1.9rem;
  }

  .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
  }

  .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 1.9rem;
  }

  .pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: .5rem .95rem;
      font-size: .86rem;
      font-weight: 600;
      color: var(--ink-soft);
      box-shadow: var(--shadow-sm);
  }

  .pill svg {
      width: 16px;
      height: 16px;
      color: var(--brand-2);
  }

  .hero-art {
      position: relative;
      min-height: 460px;
  }

  .hero-art .glow {
      position: absolute;
      width: 560px;
      height: 560px;
      right: -120px;
      top: -120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(40, 170, 217, .30), rgba(56, 77, 202, .12) 45%, transparent 70%);
      filter: blur(10px);
      z-index: 0;
  }

  .hero-art .card-float {
      position: absolute;
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(8px);
      border-radius: var(--r);
      box-shadow: var(--shadow-lg);
      border: 1px solid rgba(255, 255, 255, .9);
      padding: 18px 20px;
      animation: float 6s ease-in-out infinite;
      z-index: 3;
  }

  @keyframes float {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-14px);
      }
  }

  .livedot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #28C840;
      display: inline-block;
      animation: pulse 2s infinite;
  }

  @keyframes pulse {
      0% {
          box-shadow: 0 0 0 0 rgba(40, 200, 64, .45);
      }

      70% {
          box-shadow: 0 0 0 8px rgba(40, 200, 64, 0);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(40, 200, 64, 0);
      }
  }

  /* ---------- generic cards ---------- */
  .card {
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
      box-shadow: var(--shadow-sm);
  }

  .card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow);
      border-color: var(--tint-violet-2);
  }

  .card .ico {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      background: var(--tint-violet);
      color: var(--brand-1);
      transition: transform .4s var(--ease);
  }

  .card:hover .ico {
      transform: rotate(-6deg) scale(1.06);
  }

  .card .ico svg {
      width: 28px;
      height: 28px;
  }

  .card h3 {
      margin-bottom: .5rem;
  }

  .card p {
      color: var(--ink-soft);
      font-size: .97rem;
  }

  .card-accent .ico {
      background: var(--tint-blue);
      color: var(--accent);
  }

  .card-mint .ico {
      background: var(--tint-teal);
      color: var(--teal);
  }

  .grid {
      display: grid;
      gap: 24px;
  }

  .g-2 {
      grid-template-columns: repeat(2, 1fr);
  }

  .g-3 {
      grid-template-columns: repeat(3, 1fr);
  }

  .g-4 {
      grid-template-columns: repeat(4, 1fr);
  }

  /* ---------- stats ---------- */
  .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
  }

  .stat {
      text-align: center;
  }

  .stat .num {
      font-family: 'Sora', sans-serif;
      font-size: clamp(2.4rem, 5vw, 3.5rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.03em;
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .stat .lbl {
      margin-top: .5rem;
      font-size: .92rem;
      color: var(--ink-soft);
      font-weight: 600;
  }

  /* ---------- audience cards ---------- */
  .aud {
      position: relative;
      padding: 34px 30px;
      border-radius: var(--r);
      overflow: hidden;
      transition: transform .4s var(--ease), box-shadow .4s var(--ease);
      border: 1px solid var(--line-2);
  }

  .aud:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow);
  }

  .aud .ico {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      background: rgba(255, 255, 255, .7);
  }

  .aud h3 {
      font-size: 1.3rem;
      margin-bottom: .45rem;
  }

  .aud p {
      font-size: .96rem;
      color: var(--ink-soft);
  }

  .aud-1 {
      background: linear-gradient(150deg, #ECEAFB, #E2DCF9);
  }

  .aud-2 {
      background: linear-gradient(150deg, #E3ECFD, #D8E4FB);
  }

  .aud-3 {
      background: linear-gradient(150deg, #DDF0EC, #D2EAF1);
  }

  /* ---------- industries marquee ---------- */
  .marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee-track {
      display: flex;
      gap: 16px;
      width: max-content;
      animation: scrollx 34s linear infinite;
  }

  .marquee:hover .marquee-track {
      animation-play-state: paused;
  }

  @keyframes scrollx {
      to {
          transform: translateX(-50%);
      }
  }

  .chip {
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      white-space: nowrap;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: .85rem 1.4rem;
      font-weight: 600;
      box-shadow: var(--shadow-sm);
  }

  .chip svg {
      width: 22px;
      height: 22px;
      color: var(--brand-2);
  }

  /* ---------- split feature ---------- */
  .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 54px;
      align-items: center;
  }

  .feat-list {
      list-style: none;
      display: grid;
      gap: 14px;
      margin-top: 1.6rem;
  }

  .feat-list li {
      display: flex;
      gap: .85rem;
      align-items: flex-start;
      font-size: 1rem;
  }

  .feat-list .tick {
      flex: 0 0 26px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--grad);
      display: grid;
      place-items: center;
      margin-top: 2px;
  }

  .feat-list .tick svg {
      width: 14px;
      height: 14px;
      color: #fff;
  }

  .feat-list b {
      color: var(--ink);
  }

  /* ---------- dashboard mockup ---------- */
  .dash {
      background: #fff;
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--line-2);
      overflow: hidden;
  }

  .dash-top {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line-2);
      background: #FAFAFE;
  }

  .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
  }

  .dash-body {
      padding: 22px;
      display: grid;
      gap: 16px;
  }

  .dash-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
  }

  .kpi {
      background: var(--bg);
      border: 1px solid var(--line-2);
      border-radius: 16px;
      padding: 16px;
  }

  .kpi .k {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink-faint);
  }

  .kpi .v {
      font-family: 'Sora', sans-serif;
      font-size: 1.8rem;
      font-weight: 700;
      margin-top: 4px;
      letter-spacing: -.02em;
  }

  .kpi .d {
      font-size: .78rem;
      font-weight: 700;
      color: var(--teal);
  }

  .kpi .d.up::before {
      content: "\25B2 ";
      font-size: .6rem;
  }

  .chartbox {
      background: var(--bg);
      border: 1px solid var(--line-2);
      border-radius: 16px;
      padding: 18px;
  }

  .bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 120px;
      margin-top: 14px;
  }

  .bars span {
      flex: 1;
      border-radius: 6px 6px 0 0;
      background: var(--grad);
      opacity: .9;
  }

  .legend {
      display: flex;
      gap: 16px;
      margin-top: 12px;
      font-size: .78rem;
      color: var(--ink-soft);
  }

  .legend i {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      display: inline-block;
      margin-right: 6px;
  }

  /* ---------- steps ---------- */
  .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      counter-reset: s;
  }

  .step {
      position: relative;
  }

  .step .n {
      font-family: 'Sora', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: var(--grad);
      display: grid;
      place-items: center;
      margin-bottom: 16px;
  }

  .step h3 {
      font-size: 1.2rem;
      margin-bottom: .4rem;
  }

  .step p {
      color: var(--ink-soft);
      font-size: .95rem;
  }

  /* ---------- CTA band ---------- */
  .cta {
      background: var(--grad);
      border-radius: var(--r-lg);
      padding: clamp(40px, 6vw, 72px);
      color: #fff;
      position: relative;
      overflow: hidden;
      text-align: center;
  }

  .cta::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .16), transparent 50%);
  }

  .cta>* {
      position: relative;
      z-index: 2;
  }

  .cta h2 {
      color: #fff;
  }

  .cta p {
      color: rgba(255, 255, 255, .9);
      max-width: 560px;
      margin: 1rem auto 1.8rem;
  }

  /* ---------- service detail rows ---------- */
  .srow {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 50px;
      align-items: center;
      padding: clamp(36px, 5vw, 60px) 0;
      border-top: 1px solid var(--line);
  }

  .srow:nth-child(even) .srow-media {
      order: -1;
  }

  .srow-media {
      position: relative;
  }

  .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 1.2rem;
  }

  .tag {
      font-size: .82rem;
      font-weight: 600;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 100px;
      padding: .4rem .85rem;
      color: var(--ink-soft);
  }

  .tile {
      aspect-ratio: 1.15/1;
      border-radius: var(--r-lg);
      display: grid;
      place-items: center;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
  }

  .tile svg.big {
      width: 46%;
      height: 46%;
  }

  .tile-grad {
      background: var(--grad);
      color: #fff;
  }

  .tile-lav {
      background: linear-gradient(150deg, #ECEAFB, #E0DAF8);
      color: var(--brand-1);
  }

  .tile-coral {
      background: linear-gradient(150deg, #E3ECFD, #D3E0FB);
      color: var(--accent);
  }

  .tile-mint {
      background: linear-gradient(150deg, #DDF0EC, #CDE8E0);
      color: var(--teal);
  }

  .tile .deco {
      position: absolute;
      border-radius: 50%;
  }

  /* ---------- contact ---------- */
  .contact-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 46px;
      align-items: start;
  }

  .field {
      margin-bottom: 18px;
  }

  .field label {
      display: block;
      font-weight: 600;
      font-size: .9rem;
      margin-bottom: .4rem;
  }

  .field input,
  .field select,
  .field textarea {
      width: 100%;
      padding: .92rem 1.1rem;
      border-radius: 14px;
      border: 1.5px solid var(--line);
      background: #fff;
      font-family: inherit;
      font-size: 1rem;
      color: var(--ink);
      transition: border-color .25s, box-shadow .25s;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
      outline: none;
      border-color: var(--brand-2);
      box-shadow: 0 0 0 4px var(--tint-violet);
  }

  .field textarea {
      min-height: 130px;
      resize: vertical;
  }

  .info-card {
      background: #fff;
      border: 1px solid var(--line-2);
      border-radius: var(--r);
      padding: 28px;
      box-shadow: var(--shadow-sm);
  }

  .info-row {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      padding: 16px 0;
      border-bottom: 1px solid var(--line-2);
  }

  .info-row:last-child {
      border-bottom: none;
  }

  .info-row .ico {
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      background: var(--tint-violet);
      color: var(--brand-2);
      display: grid;
      place-items: center;
  }

  .info-row .ico svg {
      width: 22px;
      height: 22px;
  }

  .info-row .k {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--ink-faint);
  }

  .info-row .v {
      font-weight: 600;
  }

  .form-success {
      display: none;
      background: var(--tint-teal);
      border: 1px solid #B6E0D4;
      color: #0C6F5C;
      border-radius: 14px;
      padding: 16px 18px;
      font-weight: 600;
      margin-bottom: 18px;
  }

  .socials {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
  }

  .soc {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      transition: transform .3s var(--ease), background .3s, color .3s;
  }

  .soc svg {
      width: 20px;
      height: 20px;
  }

  .soc:hover {
      transform: translateY(-4px);
      background: var(--grad);
      color: #fff;
      border-color: transparent;
  }

  /* ---------- footer (light) ---------- */
  .footer {
      background: var(--bg-2);
      color: var(--ink-soft);
      padding: 64px 0 30px;
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--line);
  }

  .footer::before {
      content: "";
      position: absolute;
      top: -140px;
      right: -60px;
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, rgba(67, 56, 202, .14), transparent 70%);
      filter: blur(40px);
  }

  .footer .wrap {
      position: relative;
      z-index: 2;
  }

  .footer .brand-blk img {
      height: 36px;
      margin-bottom: 16px;
  }

  .footer p {
      color: var(--ink-soft);
      font-size: .95rem;
      max-width: 340px;
  }

  .footer h4 {
      color: var(--ink);
      font-family: 'Hanken Grotesk', sans-serif;
      font-size: .82rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      margin-bottom: 16px;
      font-weight: 700;
  }

  .footer ul {
      list-style: none;
      display: grid;
      gap: 10px;
  }

  .footer ul a {
      color: var(--ink-soft);
      font-size: .95rem;
      transition: color .25s, padding-left .25s;
  }

  .footer ul a:hover {
      color: var(--brand-2);
      padding-left: 5px;
  }

  .foot-bottom {
      margin-top: 44px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      font-size: .86rem;
      color: var(--ink-faint);
  }

  .foot-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 50px;
      align-items: start;
  }

  .brand-blk img {
      width: 180px;
      height: auto !important;
      display: block;
  }

  #page-home .hero-art {
      display: none !important;
  }

  #page-perform .hero-art {
      display: block !important;
  }

  .eyebrow::before {
      display: none;
  }

  /*@media (max-width:768px){*/
  /*    .foot-grid{*/
  /*        grid-template-columns:1fr;*/
  /*        gap:30px;*/
  /*    }*/
  /*    .hero-art{*/
  /*        display: none !important;*/
  /*    }*/
  /*     #page-perform .hero-art {*/
  /*    display: none !important;*/
  /*  }*/
  /*}*/
  /* ---------- scroll reveal ---------- */
  .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
  }

  .reveal.in {
      opacity: 1;
      transform: none;
  }

  .reveal.d1 {
      transition-delay: .08s;
  }

  .reveal.d2 {
      transition-delay: .16s;
  }

  .reveal.d3 {
      transition-delay: .24s;
  }

  .reveal.d4 {
      transition-delay: .32s;
  }

  .reveal.d5 {
      transition-delay: .40s;
  }

  .reveal.d6 {
      transition-delay: .48s;
  }

  @media (prefers-reduced-motion:reduce) {
      * {
          animation: none !important;
          transition: none !important;
      }

      .reveal {
          opacity: 1;
          transform: none;
      }
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px) {

      .hero-grid,
      .split,
      .contact-grid {
          grid-template-columns: 1fr;
          gap: 36px;
      }

      .hero-art {
          min-height: 380px;
      }

      .g-4 {
          grid-template-columns: repeat(2, 1fr);
      }

      .g-3 {
          grid-template-columns: repeat(2, 1fr);
      }

      .steps {
          grid-template-columns: repeat(2, 1fr);
      }

      .srow {
          grid-template-columns: 1fr;
          gap: 28px;
      }

      .srow:nth-child(even) .srow-media {
          order: 0;
      }

      .foot-grid {
          grid-template-columns: 1fr 1fr;
      }

      .stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;
      }
  }

  @media (max-width:760px) {

      .nav-links,
      .nav-cta .btn {
          display: none;
      }

      .burger {
          display: flex;
      }

      /* show the "Let's talk" CTA inside the open mobile menu, after the links */
      .nav-links.open .nav-cta-mobile {
          display: block;
          margin-top: 6px;
      }

      .nav-links.open .nav-cta-mobile .btn {
          display: inline-flex;
          padding: 10px 15px;
          color: white;
      }

      .nav-links.open {
          display: flex;
          position: absolute;
          top: 74px;
          left: 0;
          right: 0;
          flex-direction: column;
          background: var(--bg);
          padding: 18px 26px 26px;
          gap: 6px;
          border-bottom: 1px solid var(--line);
          box-shadow: var(--shadow);
      }

      .nav-links.open a {
          width: 100%;
          padding: .8rem 0;
          font-size: 1.05rem;
      }

      .nav-links.open a::after {
          display: none;
      }

      .g-2,
      .g-3,
      .g-4,
      .dash-row {
          grid-template-columns: 1fr;
      }

      .stats {
          grid-template-columns: repeat(2, 1fr);
      }

      body {
          font-size: 16px;
      }

      .k2 {
          text-align: center;
      }
      .tile.tile-lav img {
    width: 110px;
}
  }

  .page {
      display: none;
  }

  .page.active {
      display: block;
      animation: pagein .5s var(--ease);
  }

  @keyframes pagein {
      from {
          opacity: 0;
          transform: translateY(8px);
      }

      to {
          opacity: 1;
          transform: none;
      }
  }

  .tile.tile-lav img {
    width: 200px;
}

/* ===== In the news (homepage press preview) ===== */
.home-press{ align-items:stretch; }
.home-press .home-press-intro{ display:flex; flex-direction:column; justify-content:center; }
.home-press .home-press-intro .btn{ align-self:flex-start; }
.home-press-card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.home-press-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--tint-violet-2); }
.hpc-thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; background:#fff; }
.hpc-thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease); }
.home-press-card:hover .hpc-thumb img{ transform:scale(1.04); }
.hpc-body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:.6rem; }
.hpc-meta{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.hpc-title{ font-size:1.25rem; font-weight:650; line-height:1.3; color:var(--ink); }
.hpc-brief{ color:var(--ink-soft); font-size:.96rem; line-height:1.55; }
.hpc-read{ margin-top:.4rem; font-weight:700; font-size:.94rem; color:var(--brand-2); display:inline-flex; align-items:center; gap:.4rem; }
.hpc-read svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.home-press-card:hover .hpc-read svg{ transform:translate(3px,-3px); }
/* small "as seen in" logo row under the intro */
.home-press-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:2rem; }
.home-press-logos img{ height:26px; width:auto; object-fit:contain; opacity:.85; }
@media (max-width:760px){
  .home-press-logos{ gap:18px; }
  .home-press-logos img{ height:22px; }
}