:root {
      --black: #0a0d11;
      --black-2: #0f1318;
      --black-3: #161b21;

      --paper: #eeece4;
      --paper-2: #e6e2d6;
      --paper-3: #d9d3c1;

      --white: #ffffff;
      --text: #12151a;
      --muted: #62655f;
      --muted-dark: #a2a7ad;

      --blue: #1a56e8;
      --blue-2: #0d2a74;
      --orange: #ff5b1a;
      --orange-2: #c53712;
      --cyan: #7fe0ff;

      --line: rgba(15, 16, 14, 0.13);
      --line-dark: rgba(255, 255, 255, 0.13);

      --radius-xl: 34px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 10px;

      --container: 1180px;
      --ease: cubic-bezier(.2,.8,.2,1);
      --shadow: 0 30px 90px rgba(0, 0, 0, 0.14);
      --shadow-dark: 0 40px 120px rgba(0, 0, 0, 0.45);

      --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
      --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    }

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    body {
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(26, 86, 232, .06), transparent 32%),
        radial-gradient(circle at 82% 6%, rgba(255, 91, 26, .05), transparent 28%),
        linear-gradient(180deg, var(--paper) 0%, #f2efe6 48%, var(--paper-2) 100%);
      font-family: var(--font-body);
      line-height: 1.5;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgba(10, 10, 11, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 10, 11, .045) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
      pointer-events: none;
    }

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

    ::selection { color: var(--white); background: var(--blue); }

    .progress {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      width: 0%;
      height: 2px;
      background: linear-gradient(90deg, var(--blue), var(--cyan), var(--orange));
    }

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

    .section { padding: 116px 0; }
    .section.compact { padding: 88px 0; }

    .section-dark {
      color: var(--white);
      background: var(--black);
    }

    .section-header {
      max-width: 820px;
      margin-bottom: 54px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--blue);
      font-family: var(--font-mono);
      font-size: .74rem;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
    }

    .section-dark .eyebrow { color: var(--cyan); }

    h1, h2, h3 {
      font-family: var(--font-display);
      line-height: 1.02;
      letter-spacing: -.03em;
      text-wrap: balance;
    }

    h1 {
      max-width: 880px;
      color: var(--white);
      font-size: clamp(3rem, 7vw, 6.4rem);
      font-weight: 600;
    }

    h2 {
      max-width: 900px;
      font-size: clamp(2.1rem, 4.2vw, 4.2rem);
      font-weight: 600;
    }

    h3 {
      font-family: var(--font-display);
      font-size: 1.16rem;
      font-weight: 600;
      letter-spacing: -.015em;
    }

    p { color: var(--muted); }
    .section-dark p { color: var(--muted-dark); }

    .lead {
      max-width: 760px;
      font-size: clamp(1.02rem, 1.5vw, 1.18rem);
      line-height: 1.62;
    }

    .lead em {
      font-style: normal;
      color: var(--text);
      font-weight: 600;
    }

    .section-dark .lead em { color: var(--white); }

    .gradient-word {
      color: transparent;
      background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 30%, #7fe0ff 62%, #ffffff 100%);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .mono { font-family: var(--font-mono); }

    /* corner-bracket signature motif */
    .corners { position: relative; }
    .corners i {
      position: absolute;
      width: 13px;
      height: 13px;
      pointer-events: none;
      opacity: .55;
    }
    .corners i.c-tl { top: -1px; left: -1px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
    .corners i.c-tr { top: -1px; right: -1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
    .corners i.c-bl { bottom: -1px; left: -1px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }
    .corners i.c-br { bottom: -1px; right: -1px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
    .corners { color: var(--blue); }
    .section-dark .corners { color: var(--cyan); }

    /* header */
    .site-header {
      position: fixed;
      top: 20px;
      left: 0;
      right: 0;
      z-index: 999;
      pointer-events: none;
    }

    .nav-shell {
      width: min(100% - 40px, var(--container));
      min-height: 60px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(10, 10, 11, 0.12);
      background: transparent;
      pointer-events: auto;
      transition: min-height .25s var(--ease), padding .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), backdrop-filter .25s var(--ease);
    }

    .site-header.scrolled .nav-shell {
      min-height: 56px;
      padding: 8px 16px;
      border: 1px solid rgba(10, 10, 11, 0.1);
      border-radius: 999px;
      background: rgba(242, 239, 230, 0.82);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);
    }

    .brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }

    .brand-mark {
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(10, 10, 11, 0.18);
      border-radius: 8px;
      color: var(--black);
      background: rgba(255, 255, 255, 0.4);
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: -.02em;
    }

    .brand-text { display: grid; gap: 1px; line-height: 1.08; }

    .brand-name {
      font-family: var(--font-display);
      color: var(--black);
      font-size: .96rem;
      font-weight: 600;
      letter-spacing: -.015em;
    }

    .brand-sub {
      color: rgba(10, 10, 11, 0.48);
      font-family: var(--font-mono);
      font-size: .64rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

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

    .nav a {
      position: relative;
      padding: 8px 0;
      color: rgba(10, 10, 11, 0.58);
      font-size: .86rem;
      font-weight: 600;
      letter-spacing: -.005em;
      transition: color .22s var(--ease);
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .24s var(--ease);
    }

    .nav a:hover, .nav a.active { color: var(--black); }
    .nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }

    .nav-cta {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      border: 1px solid rgba(10, 10, 11, 0.14);
      border-radius: 999px;
      color: var(--black);
      background: rgba(255, 255, 255, 0.3);
      font-size: .84rem;
      font-weight: 700;
      letter-spacing: -.01em;
      transition: transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease);
    }

    .nav-cta:hover { transform: translateY(-2px); border-color: rgba(10, 10, 11, 0.26); background: rgba(255, 255, 255, 0.6); }
    .nav-cta span { transition: transform .24s var(--ease); }
    .nav-cta:hover span { transform: translateX(3px); }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      place-items: center;
      border: 1px solid rgba(10, 10, 11, 0.14);
      border-radius: 10px;
      color: var(--black);
      background: rgba(255, 255, 255, 0.34);
      cursor: pointer;
    }

    .menu-toggle span { width: 17px; height: 2px; display: block; background: currentColor; border-radius: 999px; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }

    /* hero */
    .hero { position: relative; padding: 116px 0 54px; }

    .hero-frame {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: min(760px, calc(100vh - 170px));
      border-radius: var(--radius-xl);
      color: var(--white);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
        radial-gradient(circle at 70% 24%, rgba(26, 86, 232, .17), transparent 35%),
        radial-gradient(circle at 18% 90%, rgba(255, 91, 26, .12), transparent 38%),
        var(--black);
      box-shadow: var(--shadow-dark);
      overflow: hidden;
    }

    .hero-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at 70% 38%, rgba(0, 0, 0, .9), transparent 68%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      flex: 1;
      gap: 32px;
      padding: clamp(32px, 5vw, 72px);
      isolation: isolate;
    }

    .hero-copy { position: relative; z-index: 3; align-self: center; padding-top: 20px; min-width: 0; }

    .hero-kicker {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 26px;
      padding: 7px 12px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 999px;
      color: rgba(255, 255, 255, .78);
      background: rgba(255, 255, 255, .05);
      font-family: var(--font-mono);
      font-size: .76rem;
      font-weight: 500;
      letter-spacing: .01em;
    }

    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(127, 224, 255, .16); }

    .hero-copy .lead { margin-top: 26px; color: rgba(255, 255, 255, .66); }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

    .btn {
      position: relative;
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 22px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: -.01em;
      cursor: pointer;
      overflow: hidden;
      transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
      transform: translateX(-115%);
      transition: transform .7s var(--ease);
    }
    .btn:hover::after { transform: translateX(115%); }

    .btn-primary { color: var(--black); background: var(--white); }
    .btn-primary:hover { transform: translateY(-3px); background: #edece6; }

    .btn-secondary { color: var(--white); border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); }
    .btn-secondary:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .11); }

    .hero-visual {
      position: relative;
      z-index: 1;
      min-height: 620px;
      align-self: center;
      overflow: hidden;
      border-radius: 30px;
      isolation: isolate;
    }

    .mesh-visual {
      position: absolute;
      z-index: 0;
      inset: 4% 0 8% auto;
      width: min(100%, 600px);
      border-radius: 30px;
      overflow: hidden;
      pointer-events: none;
      background:
        radial-gradient(circle at 68% 28%, rgba(26, 86, 232, .9), transparent 30%),
        radial-gradient(circle at 38% 42%, rgba(127, 224, 255, .55), transparent 31%),
        radial-gradient(circle at 22% 68%, rgba(9, 18, 44, .98), transparent 38%),
        radial-gradient(circle at 72% 74%, rgba(255, 91, 26, .5), transparent 25%),
        linear-gradient(135deg, #d6d0c4, #12151a 68%);
      box-shadow: inset 0 0 80px rgba(255, 255, 255, .1);
      isolation: isolate;
    }

    .mesh-visual::before {
      content: "";
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(255,255,255,.12) 27%, transparent 28%),
        linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, .3) 45%, transparent 54%);
      filter: blur(22px);
      opacity: .5;
      transform: rotate(-8deg);
      animation: drift 12s var(--ease) infinite alternate;
    }

    .mesh-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: .16;
      mix-blend-mode: screen;
    }

    .visual-card {
      position: absolute;
      z-index: 3;
      max-width: calc(100% - 16px);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 16px;
      background: rgba(9, 9, 11, .64);
      backdrop-filter: blur(26px);
      box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
    }

    .visual-card.status { top: 12%; left: 0; width: 228px; padding: 18px; }
    .visual-card.stack { right: 2%; bottom: 10%; width: 248px; padding: 16px; }
    .visual-card.map { left: 4%; bottom: 8%; width: 178px; padding: 14px; }

    .visual-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 15px;
      color: rgba(255, 255, 255, .58);
      font-family: var(--font-mono);
      font-size: .7rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .visual-label b { color: #ffffff; font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }

    .status-line {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-top: 1px solid rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .84);
      font-size: .88rem;
      font-weight: 600;
    }
    .status-line:first-of-type { border-top: 0; padding-top: 0; }
    .status-line strong { font-family: var(--font-mono); font-weight: 500; color: var(--cyan); }

    .mini-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(127, 224, 255, .8); }
    .mini-dot.orange { background: var(--orange); box-shadow: 0 0 14px rgba(255, 91, 26, .78); }
    .mini-dot.blue { background: var(--blue); box-shadow: 0 0 14px rgba(26, 86, 232, .78); }

    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

    .chip {
      padding: 7px 10px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 999px;
      color: rgba(255, 255, 255, .78);
      background: rgba(255, 255, 255, .06);
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 500;
    }

    .map-lines {
      position: relative;
      height: 138px;
      border-radius: 12px;
      background:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
        rgba(255, 255, 255, .03);
      background-size: 24px 24px;
      overflow: hidden;
    }

    .map-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }

    .hero-bottom {
      position: relative;
      z-index: 4;
      margin: 0 clamp(24px, 4vw, 40px) clamp(24px, 4vw, 40px);
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
      background: rgba(255, 255, 255, .05);
      backdrop-filter: blur(22px);
      overflow: hidden;
    }

    .hero-metric { padding: 19px; border-left: 1px solid rgba(255, 255, 255, .1); }
    .hero-metric:first-child { border-left: 0; }

    .hero-metric strong {
      display: block;
      font-family: var(--font-display);
      color: #ffffff;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -.02em;
    }

    .hero-metric span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .54); font-size: .84rem; }

    .strip { padding: 16px 0; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255, 255, 255, .22); }
    .strip-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
    .strip-group { display: flex; align-items: center; gap: 30px; padding-right: 30px; }

    .strip span {
      color: rgba(10, 10, 11, .6);
      font-family: var(--font-mono);
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .strip b { color: var(--black); font-weight: 600; }
    .strip .sep { color: rgba(10,10,11,.25); }

    /* about */
    .about-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 24px; align-items: stretch; }

    .editorial-card {
      position: relative;
      min-height: 500px;
      padding: 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      background: rgba(255, 255, 255, .34);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .editorial-card::before {
      content: "";
      position: absolute;
      width: 400px;
      height: 400px;
      right: -140px;
      bottom: -160px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(26, 86, 232, .7), transparent 31%),
        radial-gradient(circle at 65% 45%, rgba(255, 91, 26, .55), transparent 28%),
        #12151a;
      filter: blur(1px);
      opacity: .92;
    }

    .editorial-card > * { position: relative; z-index: 1; }
    .editorial-card p { max-width: 560px; margin-top: 18px; font-size: 1.02rem; line-height: 1.7; }

    .signature-line {
      position: absolute;
      left: 34px;
      right: 34px;
      bottom: 32px;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
    }

    .signature-line strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
    .signature-line span { color: var(--muted); font-family: var(--font-mono); font-size: .82rem; font-weight: 500; }

    .capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .capability-card {
      min-height: 236px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .38);
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .capability-card:hover { transform: translateY(-6px); border-color: rgba(26, 86, 232, .3); background: rgba(255, 255, 255, .56); }

    .capability-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .capability-card h3 { margin-top: 42px; margin-bottom: 10px; font-size: 1.28rem; }
    .capability-card p { font-size: .94rem; line-height: 1.58; }

    /* services */
    .services { position: relative; overflow: hidden; }

    .services::before {
      content: "";
      position: absolute;
      top: 10%;
      right: -12%;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 38% 40%, rgba(26, 86, 232, .46), transparent 32%),
        radial-gradient(circle at 64% 48%, rgba(255, 91, 26, .34), transparent 32%);
      filter: blur(34px);
      opacity: .5;
      pointer-events: none;
    }

    .services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

    .service-card {
      position: relative;
      min-height: 296px;
      padding: 22px;
      border: 1px solid var(--line-dark);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .045);
      overflow: hidden;
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 22% 14%, rgba(255, 91, 26, .16), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(26, 86, 232, .18), transparent 30%);
      opacity: 0;
      transition: opacity .28s var(--ease);
    }

    .service-card:hover { transform: translateY(-7px); border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .07); }
    .service-card:hover::before { opacity: 1; }
    .service-card > * { position: relative; z-index: 1; }

    .service-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 52px;
      height: 30px;
      margin-bottom: 66px;
      padding: 0 10px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 999px;
      color: rgba(255, 255, 255, .74);
      background: rgba(255, 255, 255, .05);
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .02em;
    }

    .service-card h3 { margin-bottom: 12px; color: var(--white); font-size: 1.2rem; }
    .service-card p { color: rgba(255, 255, 255, .56); font-size: .92rem; line-height: 1.58; }

    /* diferenciais */
    .split-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: start; }
    .sticky-copy { position: sticky; top: 120px; }
    .feature-stack { display: grid; gap: 12px; }

    .feature-item {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 18px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .34);
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .feature-item:hover { transform: translateX(6px); border-color: rgba(26, 86, 232, .26); background: rgba(255, 255, 255, .52); }

    .feature-number {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 10px;
      color: var(--white);
      background: var(--black);
      font-family: var(--font-mono);
      font-size: .78rem;
      font-weight: 500;
    }

    .feature-item strong { display: block; margin-bottom: 6px; font-family: var(--font-display); color: var(--black); font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
    .feature-item p { font-size: .93rem; line-height: 1.58; }

    /* empresas */
    .company-panel {
      position: relative;
      display: grid;
      grid-template-columns: .96fr 1.04fr;
      gap: 24px;
      padding: 26px;
      border-radius: var(--radius-xl);
      color: var(--white);
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 91, 26, .16), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(26, 86, 232, .2), transparent 34%),
        var(--black);
      box-shadow: var(--shadow-dark);
      overflow: hidden;
    }

    .company-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at 78% 45%, rgba(0,0,0,.92), transparent 70%);
    }

    .company-copy, .use-cases { position: relative; z-index: 1; }
    .company-copy { padding: clamp(22px, 4vw, 46px); }
    .company-copy p { margin-top: 20px; color: rgba(255, 255, 255, .62); font-size: 1.02rem; line-height: 1.66; }

    .use-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-self: center; }

    .use-case {
      min-height: 108px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 16px;
      padding: 17px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 16px;
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .86);
      font-weight: 700;
      letter-spacing: -.01em;
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .use-case:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .08); }
    .use-case span:last-child { font-family: var(--font-mono); color: rgba(255, 255, 255, .4); font-size: 1rem; font-weight: 500; }

    /* projects */
    .project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .project-card {
      position: relative;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .34);
      overflow: hidden;
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .project-card:hover { transform: translateY(-6px); border-color: rgba(26, 86, 232, .28); background: rgba(255, 255, 255, .56); }

    .project-glyph {
      position: absolute;
      top: -26px;
      right: -26px;
      width: 118px;
      height: 118px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, rgba(26, 86, 232, .16), transparent 65%);
    }

    .project-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .project-meta b { color: var(--blue); font-weight: 600; }

    .project-card h3 { margin-bottom: 10px; font-size: 1.26rem; }
    .project-card p { font-size: .94rem; line-height: 1.6; margin-bottom: 16px; }

    .project-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }

    .project-tag {
      padding: 5px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: .68rem;
      font-weight: 500;
      color: var(--muted);
      background: rgba(255, 255, 255, .3);
    }

    .project-result {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      font-family: var(--font-mono);
      font-size: .78rem;
      color: var(--muted);
      font-weight: 500;
    }

    .project-result::before { content: "→"; color: var(--blue); }

    .project-note {
      margin-top: 24px;
      padding: 16px 18px;
      border: 1px dashed var(--line);
      border-radius: var(--radius-md);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: .82rem;
      line-height: 1.6;
    }

    /* process */
    .process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

    .process-step {
      position: relative;
      min-height: 275px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(255, 255, 255, .38);
      overflow: hidden;
      transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
    }

    .process-step .step-index {
      font-family: var(--font-mono);
      color: rgba(10, 10, 11, .28);
      font-size: 2.6rem;
      font-weight: 500;
      line-height: .8;
      letter-spacing: -.02em;
    }

    .process-step:hover { transform: translateY(-6px); border-color: rgba(255, 91, 26, .26); background: rgba(255, 255, 255, .6); }
    .process-step h3 { margin-bottom: 12px; font-size: 1.14rem; }
    .process-step p { font-size: .92rem; line-height: 1.58; }

    /* cta */
    .cta { padding: 106px 0; }

    .cta-box {
      position: relative;
      display: grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 40px;
      align-items: center;
      padding: clamp(32px, 6vw, 68px);
      border-radius: var(--radius-xl);
      color: var(--white);
      background:
        radial-gradient(circle at 70% 28%, rgba(255, 91, 26, .7), transparent 24%),
        radial-gradient(circle at 86% 70%, rgba(26, 86, 232, .68), transparent 30%),
        radial-gradient(circle at 16% 80%, rgba(8, 18, 44, .9), transparent 36%),
        var(--black);
      box-shadow: var(--shadow-dark);
      overflow: hidden;
    }

    .cta-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity: .2;
      pointer-events: none;
    }

    .cta-copy, .contact-panel { position: relative; z-index: 1; }
    .cta-copy p { max-width: 690px; margin-top: 22px; color: rgba(255, 255, 255, .66); font-size: 1.04rem; line-height: 1.66; }

    .contact-panel { padding: 20px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 22px; background: rgba(10, 10, 11, .52); backdrop-filter: blur(22px); }
    .contact-panel h3 { margin-bottom: 15px; color: var(--white); font-size: 1.24rem; }
    .contact-list { display: grid; gap: 10px; }

    .contact-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 60px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 14px;
      color: rgba(255, 255, 255, .84);
      background: rgba(255, 255, 255, .05);
      font-weight: 700;
      transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
    }

    .contact-link:hover { transform: translateX(5px); border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .09); }
    .contact-link small { font-family: var(--font-mono); color: rgba(255, 255, 255, .44); font-size: .8rem; font-weight: 500; }

    /* footer */
    .footer { padding: 52px 0 32px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .22); }
    .footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: start; }
    .footer p { max-width: 640px; margin-top: 15px; font-size: .93rem; line-height: 1.65; }

    .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

    .footer-links a {
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: rgba(10, 10, 11, .72);
      background: rgba(255, 255, 255, .26);
      font-size: .88rem;
      font-weight: 600;
      transition: background .25s var(--ease), color .25s var(--ease);
    }

    .footer-links a:hover { color: var(--black); background: rgba(255, 255, 255, .72); }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      margin-top: 38px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: .82rem;
      font-weight: 500;
    }

    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .delay-1 { transition-delay: .08s; }
    .delay-2 { transition-delay: .16s; }
    .delay-3 { transition-delay: .24s; }
    .delay-4 { transition-delay: .32s; }

    @keyframes drift {
      0% { transform: translate3d(-2%, -2%, 0) rotate(-8deg) scale(1); }
      100% { transform: translate3d(3%, 2%, 0) rotate(5deg) scale(1.04); }
    }

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

    @media (max-width: 1360px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-copy { padding-top: 22px; }
      .hero-visual { min-height: 460px; }
    }

    @media (max-width: 1120px) {
      .about-grid, .split-layout, .company-panel, .cta-box { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .project-grid { grid-template-columns: 1fr; }
      .sticky-copy { position: static; }
    }

    @media (max-width: 900px) {
      .menu-toggle { display: grid; }
      .nav {
        position: absolute;
        top: calc(100% + 10px);
        left: 20px;
        right: 20px;
        display: grid;
        gap: 4px;
        padding: 12px;
        border: 1px solid rgba(10, 10, 11, .1);
        border-radius: 20px;
        background: rgba(242, 239, 230, .97);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
      }
      .nav.open { opacity: 1; visibility: visible; transform: translateY(0); }
      .nav a { padding: 13px 14px; }
      .nav-cta { display: none; }
      .hero-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-metric:nth-child(odd) { border-left: 0; }
      .hero-metric:nth-child(3), .hero-metric:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .1); }
      .capability-grid, .use-cases { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-links { justify-content: flex-start; }
    }

    @media (max-width: 680px) {
      .container { width: min(100% - 28px, var(--container)); }
      .site-header { top: 12px; }
      .nav-shell { width: min(100% - 24px, 1240px); min-height: 62px; padding-left: 12px; }
      .brand-sub { display: none; }
      .hero { padding-top: 90px; }
      .hero-frame, .company-panel, .cta-box { border-radius: 24px; }
      .hero-inner { padding: 24px; }
      .hero-copy .lead { margin-top: 20px; }
      .hero-actions { flex-direction: column; }
      .btn { width: 100%; }
      .hero-visual { min-height: 440px; }
      .mesh-visual { inset: 4% 0 10% 0; width: 100%; border-radius: 24px; }
      .visual-card.status { top: 6%; left: 16px; right: 16px; width: auto; }
      .visual-card.stack { left: 16px; right: 16px; bottom: 6%; width: auto; }
      .visual-card.map { display: none; }
      .hero-bottom { grid-template-columns: 1fr; margin: 0 24px 24px; }
      .hero-metric { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
      .hero-metric:first-child { border-top: 0; }
      .section, .section.compact { padding: 74px 0; }
      .section-header { margin-bottom: 32px; }
      .editorial-card { min-height: 620px; padding: 24px; }
      .signature-line { left: 24px; right: 24px; bottom: 24px; display: grid; }
      .services-grid, .process-grid, .project-grid { grid-template-columns: 1fr; }
      .service-index { margin-bottom: 44px; }
      .company-panel { padding: 14px; }
      .company-copy { padding: 18px; }
      .cta { padding: 74px 0; }
      .contact-panel { padding: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }