:root {
      --bg: #f7f7f5;
      --surface: #ffffff;
      --surface-soft: #efefec;

      --text: #151515;
      --text-soft: #575757;
      --text-muted: #8a8a86;

      --border: rgba(20, 20, 20, 0.10);
      --border-strong: rgba(20, 20, 20, 0.17);

      --dark: #141414;
      --dark-soft: #1c1c1c;
      --dark-border: rgba(255, 255, 255, 0.10);
      --dark-text: #f7f7f5;
      --dark-muted: #999996;

      --accent: #586276;
      --success: #55715e;

      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --radius-pill: 999px;

      --container: 1180px;

      --font-sans: "Manrope", sans-serif;
      --font-serif: "Instrument Serif", serif;

      --ease: cubic-bezier(.16, 1, .3, 1);

      --page-progress: 0;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
      background: var(--bg);
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;

      background: var(--bg);
      color: var(--text);

      font-family: var(--font-sans);
      line-height: 1.6;

      -webkit-font-smoothing: antialiased;
    }

    body.modal-open {
      overflow: hidden;
    }

    ::selection {
      background: #151515;
      color: #fff;
    }

    a {
      color: inherit;
    }

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

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    .container {
      width: min(calc(100% - 48px), var(--container));
      margin-inline: auto;
    }

    .serif {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 400;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;

      margin-bottom: 22px;

      color: var(--text-muted);

      font-size: .69rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";

      width: 22px;
      height: 1px;

      background: currentColor;
    }

    .page-progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;

      width: calc(var(--page-progress) * 100%);
      height: 2px;

      background: var(--text);

      pointer-events: none;
    }

    [data-reveal] {
      --reveal: 0;

      opacity: calc(.12 + var(--reveal) * .88);

      transform:
        translate3d(0,
          calc((1 - var(--reveal)) * 32px),
          0);

      will-change: transform, opacity;
    }

    .btn {
      min-height: 48px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      padding: 0 21px;

      border: 1px solid transparent;
      border-radius: var(--radius-pill);

      font-size: .81rem;
      font-weight: 700;

      text-decoration: none;

      cursor: pointer;

      transition:
        transform .3s var(--ease),
        background .3s var(--ease),
        color .3s var(--ease),
        border-color .3s var(--ease);
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--dark);
      color: #fff;
    }

    .btn-primary:hover {
      background: #2a2a2a;
    }

    .btn-primary.is-success,
    .btn-primary.is-success:hover {
      background: var(--success);
      border-color: var(--success);
      color: #fff;
      transform: none;
    }

    .btn-secondary {
      background: transparent;
      color: var(--text);
      border-color: var(--border-strong);
    }

    .btn-secondary:hover {
      background: #fff;
      border-color: var(--text);
    }

    .arrow {
      transition: transform .3s var(--ease);
    }

    .btn:hover .arrow {
      transform: translateX(3px);
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 8000;

      width: 100%;
      height: 84px;

      display: flex;
      align-items: center;

      transition:
        height .35s var(--ease),
        background .35s var(--ease),
        border-color .35s var(--ease);
    }

    header.scrolled {
      height: 70px;

      background: rgba(247, 247, 245, .88);
      border-bottom: 1px solid var(--border);

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;

      color: var(--text);

      font-size: .96rem;
      font-weight: 700;
      letter-spacing: -.035em;

      text-decoration: none;
    }

    .brand-mark {
      width: 32px;
      height: 32px;

      display: grid;
      place-items: center;

      border: 1px solid var(--text);
      border-radius: 50%;

      font-family: var(--font-serif);
      font-size: 1rem;
      font-style: italic;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 30px;

      list-style: none;
    }

    .nav-links a {
      position: relative;

      color: var(--text-muted);

      font-size: .77rem;
      font-weight: 600;

      text-decoration: none;

      transition: color .25s ease;
    }

    .nav-links a::after {
      content: "";

      position: absolute;
      left: 0;
      bottom: -8px;

      width: 100%;
      height: 1px;

      background: var(--text);

      transform: scaleX(0);
      transform-origin: right;

      transition: transform .3s var(--ease);
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--text);
    }

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

    .menu-toggle {
      width: 44px;
      height: 44px;

      display: none;
      align-items: center;
      justify-content: center;

      border: 1px solid var(--border);
      border-radius: 50%;

      background: transparent;

      cursor: pointer;
    }

    .menu-toggle span {
      position: relative;

      width: 17px;
      height: 1px;

      background: var(--text);
    }

    .menu-toggle span::before,
    .menu-toggle span::after {
      content: "";

      position: absolute;
      left: 0;

      width: 17px;
      height: 1px;

      background: var(--text);

      transition: .3s var(--ease);
    }

    .menu-toggle span::before {
      top: -5px;
    }

    .menu-toggle span::after {
      top: 5px;
    }

    .menu-toggle.open span {
      background: transparent;
    }

    .menu-toggle.open span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .menu-toggle.open span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      z-index: 7500;

      display: none;

      padding: 20px 24px 30px;

      background: rgba(247, 247, 245, .98);
      border-bottom: 1px solid var(--border);

      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);

      opacity: 0;
      transform: translateY(-15px);
      pointer-events: none;

      transition: .3s var(--ease);
    }

    .mobile-menu.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .mobile-menu nav {
      display: flex;
      flex-direction: column;
    }

    .mobile-menu a {
      padding: 15px 0;

      border-bottom: 1px solid var(--border);

      font-size: .95rem;
      font-weight: 600;

      text-decoration: none;
    }

    .hero {
      position: relative;
      isolation: isolate;

      min-height: 100svh;

      display: flex;
      align-items: center;

      padding: 150px 0 90px;

      overflow: hidden;

      background:
        radial-gradient(circle at 78% 42%,
          rgba(88, 98, 118, .055) 0%,
          rgba(88, 98, 118, .024) 23%,
          transparent 52%),
        var(--bg);
    }

    .hero>.container {
      position: relative;
      z-index: 3;
    }

    .hero::before {
      content: "";

      position: absolute;
      z-index: 0;

      top: 105px;
      right: -30px;

      width: 440px;
      height: 440px;

      opacity: .38;

      background-image:
        radial-gradient(circle,
          rgba(21, 21, 21, .15) 1px,
          transparent 1.2px);

      background-size: 24px 24px;

      -webkit-mask-image:
        radial-gradient(circle at center,
          #000 0%,
          rgba(0, 0, 0, .82) 37%,
          transparent 74%);

      mask-image:
        radial-gradient(circle at center,
          #000 0%,
          rgba(0, 0, 0, .82) 37%,
          transparent 74%);

      pointer-events: none;
    }

    .hero::after {
      content: "";

      position: absolute;
      z-index: 0;

      width: 620px;
      height: 620px;

      left: -350px;
      bottom: -340px;

      border: 1px solid rgba(21, 21, 21, .055);
      border-radius: 50%;

      box-shadow:
        0 0 0 95px rgba(21, 21, 21, .015),
        0 0 0 190px rgba(21, 21, 21, .009);

      pointer-events: none;
    }

    .hero-background-decor {
      position: absolute;
      inset: 0;
      z-index: 1;

      overflow: hidden;

      pointer-events: none;
    }

    .hero-ring {
      position: absolute;

      top: 6%;
      right: -125px;

      width: 360px;
      height: 360px;

      border: 1px solid rgba(21, 21, 21, .055);
      border-radius: 50%;
    }

    .hero-ring::after {
      content: "";

      position: absolute;
      inset: 72px;

      border: 1px solid rgba(21, 21, 21, .035);
      border-radius: 50%;
    }

    .hero-ring::before {
      content: "";

      position: absolute;
      inset: 145px;

      border: 1px solid rgba(21, 21, 21, .03);
      border-radius: 50%;
    }

    .hero-line {
      position: absolute;

      top: 18%;
      left: 48%;

      width: 1px;
      height: 160px;

      background:
        linear-gradient(to bottom,
          transparent,
          rgba(21, 21, 21, .075),
          transparent);
    }

    .hero-line::after {
      content: "";

      position: absolute;
      left: -3px;
      bottom: 28%;

      width: 7px;
      height: 7px;

      border: 1px solid rgba(21, 21, 21, .1);
      border-radius: 50%;

      background: var(--bg);
    }

    .hero-plus {
      position: absolute;

      left: 5.5%;
      bottom: 15%;

      width: 16px;
      height: 16px;

      opacity: .16;
    }

    .hero-plus::before,
    .hero-plus::after {
      content: "";

      position: absolute;
      top: 50%;
      left: 50%;

      background: var(--text);

      transform: translate(-50%, -50%);
    }

    .hero-plus::before {
      width: 16px;
      height: 1px;
    }

    .hero-plus::after {
      width: 1px;
      height: 16px;
    }

    .hero-decoration-label {
      position: absolute;

      left: max(22px, calc((100vw - var(--container)) / 2 - 45px));
      top: 29%;

      color: rgba(21, 21, 21, .13);

      font-size: .57rem;
      font-weight: 700;
      letter-spacing: .16em;

      writing-mode: vertical-rl;

      transform: rotate(180deg);

      text-transform: uppercase;
      white-space: nowrap;
    }

    .hero-orbit-dot {
      position: absolute;

      right: 8%;
      bottom: 11%;

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: rgba(21, 21, 21, .15);

      box-shadow:
        25px -12px 0 -1px rgba(21, 21, 21, .075),
        -20px 15px 0 -2px rgba(21, 21, 21, .1);
    }

    .hero-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
      gap: clamp(60px, 8vw, 120px);

      align-items: end;
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      margin-bottom: 31px;

      color: var(--text-soft);

      font-size: .74rem;
      font-weight: 600;
    }

    .status-dot {
      position: relative;

      width: 7px;
      height: 7px;

      border-radius: 50%;

      background: var(--success);
    }

    .status-dot::after {
      content: "";

      position: absolute;
      inset: -4px;

      border: 1px solid rgba(85, 113, 94, .35);
      border-radius: 50%;

      animation: statusPulse 2.5s ease-out infinite;
    }

    @keyframes statusPulse {
      0% {
        transform: scale(.7);
        opacity: 1;
      }

      100% {
        transform: scale(1.8);
        opacity: 0;
      }
    }

    .hero-title {
      max-width: 820px;

      margin-bottom: 30px;

      font-size: clamp(3.5rem, 7.2vw, 7.2rem);
      font-weight: 500;

      line-height: .88;
      letter-spacing: -.075em;
    }

    .hero-title .serif {
      color: var(--accent);
    }

    .hero-description {
      max-width: 650px;

      margin-bottom: 37px;

      color: var(--text-soft);

      font-size: 1rem;
      line-height: 1.9;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 11px;
    }

    .hero-portrait {
      position: relative;

      min-height: 470px;

      overflow: hidden;

      border: 1px solid var(--border);
      border-radius: var(--radius-lg);

      background:
        linear-gradient(145deg,
          #efefec,
          #e5e5e1);
    }

    .portrait-meta {
      position: absolute;
      top: 25px;
      left: 25px;
      z-index: 2;

      display: flex;
      flex-direction: column;

      font-size: .65rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .portrait-meta span:last-child {
      color: var(--text-muted);
    }

    .portrait-visual {
      position: absolute;
      inset: 70px 25px 0;

      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .portrait-monogram {
      position: absolute;
      right: 20px;
      bottom: 15px;

      color: rgba(0, 0, 0, .06);

      font-family: var(--font-serif);
      font-size: 8rem;
      font-style: italic;
      line-height: 1;
    }

    .hero-index {
      display: grid;
      grid-template-columns: 1fr 1fr;

      margin-top: 28px;

      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .hero-index-item {
      padding: 20px 0;
    }

    .hero-index-item+.hero-index-item {
      padding-left: 26px;
      border-left: 1px solid var(--border);
    }

    .hero-index-label {
      display: block;

      margin-bottom: 6px;

      color: var(--text-muted);

      font-size: .61rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .hero-index-value {
      font-size: .85rem;
      font-weight: 600;
    }

    .section {
      padding: 140px 0;
    }

    .section-divider {
      border-top: 1px solid var(--border);
    }

    .intro-grid {
      display: grid;
      grid-template-columns: .68fr 1.32fr;
      gap: 70px;
    }

    .intro-sticky {
      position: sticky;
      top: 120px;

      align-self: start;
    }

    .intro-number {
      width: 44px;
      height: 44px;

      display: grid;
      place-items: center;

      margin-bottom: 27px;

      border: 1px solid var(--border-strong);
      border-radius: 50%;

      color: var(--text-muted);

      font-family: var(--font-serif);
      font-style: italic;
    }

    .intro-small {
      max-width: 290px;

      color: var(--text-muted);

      font-size: .8rem;
      line-height: 1.8;
    }

    .philosophy-lead {
      margin-bottom: 38px;

      font-size: clamp(2.1rem, 4vw, 4.2rem);
      font-weight: 500;

      line-height: 1.08;
      letter-spacing: -.055em;
    }

    .philosophy-description {
      max-width: 680px;

      color: var(--text-soft);

      font-size: .96rem;
      line-height: 1.95;
    }

    .expertise-list {
      margin-top: 80px;
      border-top: 1px solid var(--border);
    }

    .expertise-item {
      display: grid;
      grid-template-columns: 80px 1fr minmax(260px, 420px);
      gap: 28px;

      padding: 34px 0;

      border-bottom: 1px solid var(--border);
    }

    .expertise-index {
      color: var(--text-muted);

      font-family: var(--font-serif);
      font-style: italic;
    }

    .expertise-name {
      font-size: 1.4rem;
      font-weight: 600;

      letter-spacing: -.035em;
    }

    .expertise-text {
      color: var(--text-soft);

      font-size: .88rem;
      line-height: 1.8;
    }

    .stack-section {
      margin-top: 100px;
    }

    .stack-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;

      margin-bottom: 27px;
    }

    .stack-title {
      font-size: 1.1rem;
      font-weight: 600;
    }

    .stack-caption {
      max-width: 440px;

      color: var(--text-muted);

      font-size: .76rem;
      line-height: 1.7;
      text-align: right;
    }

    .stack {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      padding-top: 24px;

      border-top: 1px solid var(--border);
    }

    .stack-chip {
      padding: 9px 14px;

      border: 1px solid var(--border);
      border-radius: var(--radius-pill);

      color: var(--text-soft);

      font-size: .72rem;
      font-weight: 600;

      transition:
        transform .3s var(--ease),
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
    }

    .stack-chip:nth-child(1) { --chip-color: #3178c6; }
    .stack-chip:nth-child(2) { --chip-color: #b59f00; }
    .stack-chip:nth-child(3) { --chip-color: #3776ab; }
    .stack-chip:nth-child(4) { --chip-color: #087ea4; }
    .stack-chip:nth-child(5) { --chip-color: #000000; }
    .stack-chip:nth-child(6) { --chip-color: #e0234e; }
    .stack-chip:nth-child(7) { --chip-color: #43853d; }
    .stack-chip:nth-child(8) { --chip-color: #336791; }
    .stack-chip:nth-child(9) { --chip-color: #027dfd; }
    .stack-chip:nth-child(10) { --chip-color: #586276; }
    .stack-chip:nth-child(11) { --chip-color: #0b8f9c; }
    .stack-chip:nth-child(12) { --chip-color: #f06a24; }
    .stack-chip:nth-child(13) { --chip-color: #7256b8; }

    .stack-chip:hover {
      color: var(--chip-color);
      border-color: var(--chip-color);
      background: #fff;
      box-shadow: 0 8px 22px rgba(21, 21, 21, .08);
      transform: translateY(-3px);
    }

    .projects-scroll {
      position: relative;

      background: var(--dark);
      color: var(--dark-text);
    }

    .projects-sticky {
      position: sticky;
      top: 0;

      height: 100svh;

      overflow: hidden;
    }

    .projects-inner {
      height: 100%;

      display: grid;
      grid-template-columns: minmax(280px, .70fr) minmax(0, 1.30fr);
      gap: clamp(55px, 7vw, 100px);

      align-items: center;
    }

    .projects-copy {
      position: relative;
      z-index: 10;
    }

    .projects-eyebrow {
      color: #72726f;
    }

    .projects-title {
      max-width: 480px;

      margin-bottom: 25px;

      font-size: clamp(2.8rem, 5vw, 5rem);
      font-weight: 500;

      line-height: .96;
      letter-spacing: -.065em;
    }

    .projects-title .serif {
      color: #a6adba;
    }

    .projects-description {
      max-width: 420px;

      margin-bottom: 45px;

      color: var(--dark-muted);

      font-size: .89rem;
      line-height: 1.85;
    }

    .projects-counter {
      display: flex;
      align-items: baseline;
      gap: 8px;

      margin-bottom: 28px;
    }

    .projects-counter-current {
      font-family: var(--font-serif);
      font-size: 2.2rem;
      font-style: italic;
    }

    .projects-counter-total {
      color: #686864;

      font-size: .72rem;
      font-weight: 600;
    }

    .projects-progress {
      position: relative;

      width: min(290px, 100%);
      height: 1px;

      overflow: hidden;

      background: #323232;
    }

    .projects-progress-bar {
      position: absolute;
      inset: 0;

      background: #e5e5e1;

      transform: scaleX(0);
      transform-origin: left center;

      will-change: transform;
    }

    .projects-nav {
      display: flex;
      flex-direction: column;

      margin-top: 30px;

      width: min(310px, 100%);
    }

    .project-nav-button {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 12px;

      align-items: center;

      padding: 10px 0;

      border: 0;

      background: transparent;

      color: #61615e;

      text-align: left;

      cursor: pointer;

      transition:
        color .3s ease,
        padding .3s var(--ease);
    }

    .project-nav-button:hover {
      color: #ccc;
      padding-left: 4px;
    }

    .project-nav-button.active {
      color: #fff;
    }

    .project-nav-number {
      font-family: var(--font-serif);
      font-size: .84rem;
      font-style: italic;
    }

    .project-nav-title {
      font-size: .7rem;
      font-weight: 600;
    }

    .projects-stage {
      position: relative;

      height: min(70vh, 680px);
      min-height: 520px;
    }

    .project-slide {
      position: absolute;
      inset: 0;

      display: flex;
      flex-direction: column;

      opacity: 0;

      transform:
        translate3d(0, 70px, 0) scale(.96);

      pointer-events: none;

      will-change:
        opacity,
        transform;
    }

    .project-slide.active {
      pointer-events: auto;
    }

    .project-visual {
      position: relative;

      flex: 1;

      min-height: 0;

      overflow: hidden;

      border: 1px solid var(--dark-border);
      border-radius: 20px;

      background: var(--dark-soft);
    }

    .project-browser {
      position: absolute;
      inset: 7% 5% -8%;

      overflow: hidden;

      border-radius: 14px 14px 0 0;

      background: #f4f4f1;

      box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
    }

    .browser-topbar {
      height: 45px;

      display: flex;
      align-items: center;
      gap: 6px;

      padding: 0 16px;

      border-bottom: 1px solid #dddcd7;

      background: #fff;
    }

    .browser-dot {
      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: #c3c3be;
    }

    .mock-interface {
      height: calc(100% - 45px);

      display: grid;
      grid-template-columns: 85px 1fr;

      background: #f2f2ef;
    }

    .mock-sidebar {
      padding: 20px 13px;

      border-right: 1px solid #dfdfda;

      background: #fafaf8;
    }

    .mock-logo {
      width: 27px;
      height: 27px;

      margin-bottom: 27px;

      border-radius: 7px;

      background: #222;
    }

    .mock-menu {
      height: 6px;

      margin-bottom: 11px;

      border-radius: 10px;

      background: #deded9;
    }

    .mock-menu:nth-child(3) {
      width: 70%;
    }

    .mock-menu:nth-child(4) {
      width: 82%;
    }

    .mock-content {
      padding: 25px;
    }

    .mock-heading {
      width: 34%;
      height: 12px;

      margin-bottom: 8px;

      border-radius: 10px;

      background: #222;
    }

    .mock-subheading {
      width: 47%;
      height: 6px;

      margin-bottom: 25px;

      border-radius: 10px;

      background: #c7c7c1;
    }

    .mock-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;

      margin-bottom: 15px;
    }

    .mock-kpi {
      height: 70px;

      border: 1px solid #dddcd7;
      border-radius: 10px;

      background: #fafaf8;
    }

    .mock-chart {
      position: relative;

      height: 125px;

      overflow: hidden;

      border: 1px solid #dddcd7;
      border-radius: 10px;

      background: #fafaf8;
    }

    .mock-chart::before {
      content: "";

      position: absolute;
      inset: 25px;

      background:
        linear-gradient(to bottom,
          transparent 24%,
          #eeeeea 25%,
          transparent 26%,
          transparent 49%,
          #eeeeea 50%,
          transparent 51%,
          transparent 74%,
          #eeeeea 75%,
          transparent 76%);
    }

    .mock-chart::after {
      content: "";

      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 30%;

      height: 40%;

      border-bottom: 2px solid #333;

      transform: skewY(-7deg);
    }

    .project-details {
      flex: 0 0 auto;

      padding-top: 23px;
    }

    .project-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;

      margin-bottom: 9px;

      color: #747470;

      font-size: .61rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .project-name {
      margin-bottom: 9px;

      font-size: clamp(1.8rem, 3vw, 2.8rem);
      font-weight: 500;

      line-height: 1;
      letter-spacing: -.05em;
    }

    .project-text {
      max-width: 650px;

      color: var(--dark-muted);

      font-size: .82rem;
      line-height: 1.7;
    }

    .project-result {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      margin-top: 12px;

      color: #c2c2be;

      font-size: .64rem;
      font-weight: 600;
    }

    .project-result::before {
      content: "";

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: #849489;
    }

    .scroll-help {
      position: absolute;
      left: 50%;
      bottom: 24px;
      z-index: 20;

      display: flex;
      align-items: center;
      gap: 10px;

      color: #60605d;

      font-size: .61rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;

      transform: translateX(-50%);

      transition: opacity .3s ease;
    }

    .scroll-help.hidden {
      opacity: 0;
    }

    .scroll-help-icon {
      width: 21px;
      height: 33px;

      display: flex;
      justify-content: center;

      padding-top: 6px;

      border: 1px solid #444;
      border-radius: 20px;
    }

    .scroll-help-icon::after {
      content: "";

      width: 2px;
      height: 5px;

      border-radius: 10px;

      background: #888;

      animation: mouseScroll 1.6s ease-in-out infinite;
    }

    @keyframes mouseScroll {
      0% {
        transform: translateY(0);
        opacity: 0;
      }

      30% {
        opacity: 1;
      }

      100% {
        transform: translateY(10px);
        opacity: 0;
      }
    }

    .community-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(70px, 9vw, 130px);
    }

    .community-copy {
      position: sticky;
      top: 120px;

      align-self: start;
    }

    .community-title {
      max-width: 600px;

      margin-bottom: 25px;

      font-size: clamp(2.8rem, 5vw, 5.2rem);
      font-weight: 500;

      line-height: .98;
      letter-spacing: -.065em;
    }

    .community-description {
      max-width: 560px;

      margin-bottom: 45px;

      color: var(--text-soft);

      font-size: .9rem;
      line-height: 1.9;
    }

    .community-feed {
      border-top: 1px solid var(--border);
    }

    .community-item {
      display: grid;
      grid-template-columns: 50px 1fr 20px;
      gap: 18px;

      align-items: center;

      padding: 27px 0;

      border-bottom: 1px solid var(--border);

      text-decoration: none;

      transition: padding .3s var(--ease);
    }

    .community-item:hover {
      padding-left: 10px;
    }

    .community-number {
      color: var(--text-muted);

      font-family: var(--font-serif);
      font-style: italic;
    }

    .community-item-title {
      font-size: .98rem;
      font-weight: 600;
    }

    .community-item-meta {
      display: block;

      margin-top: 4px;

      color: var(--text-muted);

      font-size: .67rem;
    }

    .community-arrow {
      color: var(--text-muted);
    }

    .social-links {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;

      margin-top: 32px;
    }

    .social-link {
      padding: 8px 13px;

      border: 1px solid var(--border);
      border-radius: var(--radius-pill);

      color: var(--text-soft);

      font-size: .67rem;
      font-weight: 700;

      text-decoration: none;

      transition:
        transform .3s var(--ease),
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
    }

    .social-link:hover,
    .social-link:focus-visible {
      color: #fff;
      transform: translateY(-3px);
      outline: none;
    }

    .social-link--tiktok:hover,
    .social-link--tiktok:focus-visible {
      border-color: #111;
      background: #111;
      box-shadow: 3px 3px 0 #25f4ee, -3px -3px 0 #fe2c55;
    }

    .social-link--linkedin:hover,
    .social-link--linkedin:focus-visible {
      border-color: #0a66c2;
      background: #0a66c2;
      box-shadow: 0 8px 22px rgba(10, 102, 194, .22);
    }

    .social-link--instagram:hover,
    .social-link--instagram:focus-visible {
      border-color: #c13584;
      background: linear-gradient(120deg, #f58529, #dd2a7b 55%, #8134af);
      box-shadow: 0 8px 22px rgba(193, 53, 132, .22);
    }

    .contact-section {
      padding: 140px 0;

      border-top: 1px solid var(--border);
    }

    .form-honeypot {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: clamp(70px, 10vw, 140px);
    }

    .contact-info {
      position: sticky;
      top: 120px;

      align-self: start;
    }

    .contact-title {
      margin-bottom: 27px;

      font-size: clamp(3rem, 5vw, 5.2rem);
      font-weight: 500;

      line-height: .95;
      letter-spacing: -.07em;
    }

    .contact-description {
      max-width: 480px;

      margin-bottom: 45px;

      color: var(--text-soft);

      font-size: .9rem;
      line-height: 1.85;
    }

    .contact-details {
      border-top: 1px solid var(--border);
    }

    .contact-row {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 20px;

      padding: 17px 0;

      border-bottom: 1px solid var(--border);

      color: inherit;
      text-decoration: none;

      transition:
        color .3s ease,
        padding .3s var(--ease),
        border-color .3s ease;
    }

    .contact-row--email {
      --contact-hover: var(--accent);
    }

    .contact-row--whatsapp {
      --contact-hover: #238b57;
    }

    .contact-row:hover,
    .contact-row:focus-visible {
      padding-left: 8px;
      color: var(--contact-hover);
      border-bottom-color: var(--contact-hover);
      outline: none;
    }

    .contact-label {
      color: var(--text-muted);

      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;

      transition: color .3s ease;
    }

    .contact-value {
      font-size: .8rem;
      font-weight: 600;
      overflow-wrap: anywhere;

      transition:
        color .3s ease,
        transform .3s var(--ease);
    }

    .contact-row:hover .contact-label,
    .contact-row:focus-visible .contact-label,
    .contact-row:hover .contact-value,
    .contact-row:focus-visible .contact-value {
      color: var(--contact-hover);
    }

    .contact-row:hover .contact-value,
    .contact-row:focus-visible .contact-value {
      transform: translateX(5px);
    }

    .form-heading {
      margin-bottom: 35px;

      font-size: 1.15rem;
      font-weight: 600;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .form-group {
      margin-bottom: 28px;
    }

    .form-label {
      display: block;

      margin-bottom: 10px;

      color: var(--text-muted);

      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .form-control {
      width: 100%;
      min-height: 52px;

      padding: 0 0 11px;

      border: 0;
      border-bottom: 1px solid var(--border-strong);

      border-radius: 0;

      outline: 0;

      background: transparent;

      color: var(--text);

      font-size: .88rem;
    }

    .form-control:focus {
      border-bottom-color: var(--text);
    }

    textarea.form-control {
      min-height: 130px;

      padding-top: 5px;

      resize: vertical;
    }

    .form-note {
      margin-top: 17px;

      color: var(--text-muted);

      font-size: .65rem;
    }

    footer {
      padding: 32px 0;

      border-top: 1px solid var(--border);
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;

      color: var(--text-muted);

      font-size: .68rem;
    }

    .footer-inner a {
      text-decoration: none;
    }

    /* ============================================================
       BOUTON FLOTTANT CONTACT
       ============================================================ */

    .contact-float {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 7000;

      width: 56px;
      height: 56px;

      display: flex;
      align-items: center;
      justify-content: center;

      border: 0;
      border-radius: 50%;

      background: var(--dark);
      color: #fff;

      cursor: pointer;

      box-shadow:
        0 14px 40px rgba(0, 0, 0, .16);

      transition:
        transform .3s var(--ease),
        background .3s ease;
    }

    .contact-float:hover {
      transform: translateY(-4px) scale(1.02);
      background: #292929;
    }

    .contact-float::after {
      content: "";

      position: absolute;
      top: 2px;
      right: 2px;

      width: 9px;
      height: 9px;

      border: 2px solid var(--bg);
      border-radius: 50%;

      background: var(--success);
    }

    /* ============================================================
       MODAL CONTACT
       ============================================================ */

    .contact-modal {
      position: fixed;
      inset: 0;
      z-index: 12000;

      display: flex;
      align-items: center;
      justify-content: center;

      padding: 24px;

      background:
        rgba(18, 18, 18, .28);

      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);

      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition:
        opacity .3s ease,
        visibility .3s ease;
    }

    .contact-modal.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .contact-modal-card {
      position: relative;

      width: min(100%, 480px);

      padding: 34px;

      border: 1px solid rgba(255, 255, 255, .55);
      border-radius: 26px;

      background:
        rgba(250, 250, 248, .92);

      box-shadow:
        0 30px 90px rgba(0, 0, 0, .18);

      transform:
        translateY(20px) scale(.97);

      transition:
        transform .4s var(--ease);

      overflow: hidden;
    }

    .contact-modal.open .contact-modal-card {
      transform:
        translateY(0) scale(1);
    }

    .contact-modal-card::before {
      content: "";

      position: absolute;
      top: -130px;
      right: -130px;

      width: 280px;
      height: 280px;

      border: 1px solid rgba(21, 21, 21, .05);
      border-radius: 50%;

      box-shadow:
        0 0 0 55px rgba(21, 21, 21, .015),
        0 0 0 110px rgba(21, 21, 21, .008);

      pointer-events: none;
    }

    .contact-modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 3;

      width: 38px;
      height: 38px;

      display: grid;
      place-items: center;

      border: 1px solid var(--border);
      border-radius: 50%;

      background: rgba(255, 255, 255, .65);

      color: var(--text);

      font-size: 1rem;

      cursor: pointer;

      transition:
        background .25s ease,
        transform .25s var(--ease);
    }

    .contact-modal-close:hover {
      background: #fff;
      transform: rotate(5deg);
    }

    .modal-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      margin-bottom: 20px;

      color: var(--text-muted);

      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .modal-label::before {
      content: "";

      width: 6px;
      height: 6px;

      border-radius: 50%;

      background: var(--success);
    }

    .contact-modal-title {
      max-width: 370px;

      margin-bottom: 12px;

      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 500;

      line-height: .98;
      letter-spacing: -.055em;
    }

    .contact-modal-description {
      max-width: 390px;

      margin-bottom: 28px;

      color: var(--text-soft);

      font-size: .86rem;
      line-height: 1.75;
    }

    .contact-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .contact-option {
      position: relative;

      display: grid;
      grid-template-columns: 44px 1fr 28px;
      gap: 14px;

      align-items: center;

      padding: 16px;

      border: 1px solid var(--border);
      border-radius: 16px;

      background: rgba(255, 255, 255, .58);

      text-decoration: none;

      transition:
        border-color .25s ease,
        background .25s ease,
        transform .3s var(--ease);
    }

    .contact-option:hover {
      transform: translateY(-2px);

      border-color: var(--border-strong);

      background: #fff;
    }

    .contact-option-icon {
      width: 44px;
      height: 44px;

      display: grid;
      place-items: center;

      border-radius: 13px;

      background: var(--surface-soft);

      color: var(--text);
    }

    .contact-option-whatsapp .contact-option-icon {
      background: #e9f6ed;
      color: #22733c;
    }

    .contact-option-title {
      display: block;

      margin-bottom: 2px;

      font-size: .84rem;
      font-weight: 700;
    }

    .contact-option-subtitle {
      display: block;

      color: var(--text-muted);

      font-size: .68rem;
    }

    .contact-option-arrow {
      color: var(--text-muted);

      font-size: 1rem;

      transition: transform .3s var(--ease);
    }

    .contact-option:hover .contact-option-arrow {
      transform: translateX(3px);
    }

    .modal-footer {
      margin-top: 20px;
      padding-top: 18px;

      border-top: 1px solid var(--border);

      color: var(--text-muted);

      font-size: .62rem;
      line-height: 1.6;
    }

    @media (max-width: 1040px) {
      .nav-links {
        display: none;
      }

      .desktop-cta {
        display: none;
      }

      .menu-toggle {
        display: flex;
      }

      .mobile-menu {
        display: block;
      }

      .hero-layout {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
      }

      .hero-portrait {
        max-width: 600px;
        min-height: 520px;
      }

      .hero::before {
        width: 360px;
        height: 360px;

        right: -100px;

        opacity: .30;
      }

      .hero-ring {
        width: 300px;
        height: 300px;

        right: -160px;
      }

      .hero-decoration-label,
      .hero-line {
        display: none;
      }

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

      .intro-sticky,
      .community-copy,
      .contact-info {
        position: relative;
        top: auto;
      }

      .expertise-item {
        grid-template-columns: 55px 1fr;
      }

      .expertise-text {
        grid-column: 2;
      }

      .community-layout,
      .contact-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 850px) {
      .projects-scroll {
        height: auto !important;
      }

      .projects-sticky {
        position: relative;

        height: auto;

        overflow: visible;

        padding: 100px 0;
      }

      .projects-inner {
        display: block;
      }

      .projects-copy {
        margin-bottom: 65px;
      }

      .projects-nav,
      .projects-progress,
      .projects-counter,
      .scroll-help {
        display: none;
      }

      .projects-stage {
        height: auto;
        min-height: 0;
      }

      .project-slide {
        position: relative;
        inset: auto;

        opacity: 1 !important;
        transform: none !important;

        pointer-events: auto;

        margin-bottom: 80px;
      }

      .project-visual {
        height: min(65vw, 480px);
        min-height: 390px;
      }

      .project-details {
        padding-top: 25px;
      }
    }

    @media (max-width: 720px) {
      .container {
        width: min(calc(100% - 34px), var(--container));
      }

      header {
        height: 70px;
      }

      .hero {
        padding: 125px 0 75px;
      }

      .hero::before {
        width: 260px;
        height: 260px;

        top: 90px;
        right: -120px;

        background-size: 20px 20px;

        opacity: .22;
      }

      .hero::after {
        width: 420px;
        height: 420px;

        left: -300px;
        bottom: -220px;

        box-shadow:
          0 0 0 65px rgba(21, 21, 21, .012),
          0 0 0 130px rgba(21, 21, 21, .006);
      }

      .hero-ring {
        width: 240px;
        height: 240px;

        right: -170px;
        top: 4%;
      }

      .hero-ring::after {
        inset: 52px;
      }

      .hero-ring::before {
        inset: 100px;
      }

      .hero-plus {
        left: auto;
        right: 8%;
        bottom: 4%;

        opacity: .11;
      }

      .hero-title {
        font-size: clamp(3.1rem, 16vw, 5rem);
      }

      .hero-actions {
        flex-direction: column;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-portrait {
        min-height: 410px;
      }

      .hero-index {
        grid-template-columns: 1fr;
      }

      .hero-index-item+.hero-index-item {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid var(--border);
      }

      .section,
      .contact-section {
        padding: 95px 0;
      }

      .expertise-list {
        margin-top: 55px;
      }

      .expertise-item {
        grid-template-columns: 40px 1fr;
        gap: 12px;

        padding: 27px 0;
      }

      .stack-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .stack-caption {
        text-align: left;
      }

      .project-visual {
        min-height: 330px;
      }

      .project-browser {
        inset: 6% 4% -8%;
      }

      .mock-interface {
        grid-template-columns: 55px 1fr;
      }

      .mock-sidebar {
        padding-inline: 8px;
      }

      .mock-content {
        padding: 15px;
      }

      .mock-kpis {
        gap: 6px;
      }

      .project-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .contact-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }

      .form-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .footer-inner {
        flex-direction: column;
      }

      .contact-float {
        right: 17px;
        bottom: 17px;

        width: 54px;
        height: 54px;
      }

      .contact-modal {
        align-items: flex-end;

        padding: 12px;
      }

      .contact-modal-card {
        width: 100%;

        padding:
          30px 20px calc(20px + env(safe-area-inset-bottom));

        border-radius: 24px;
      }

      .contact-modal-title {
        max-width: 300px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
      }

      [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
      }
    }