@layer reset, base, layout, components, motion, responsive;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

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

  button,
  input,
  textarea {
    font: inherit;
  }

  img,
  svg {
    display: block;
  }
}

@layer base {
  :root {
    --ink: #0a0b0b;
    --ink-soft: #141616;
    --paper: #f1f0e9;
    --paper-deep: #deddd5;
    --acid: #dfff38;
    --line-dark: rgb(10 11 11 / 16%);
    --line-light: rgb(255 255 255 / 16%);
    --gutter: clamp(20px, 4.15vw, 80px);
    --section-space: clamp(100px, 12vw, 220px);
    --font-sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Arial, sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  body {
    min-width: 320px;
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
  }

  body.menu-open {
    overflow: hidden;
  }

  ::selection {
    background: var(--acid);
    color: var(--ink);
  }

  :focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 5px;
  }
}

@layer layout {
  .section {
    position: relative;
    padding: var(--section-space) var(--gutter);
  }

  .section-tag {
    display: flex;
    align-items: center;
    width: min(100%, 440px);
    margin-bottom: clamp(72px, 9vw, 150px);
    color: rgb(10 11 11 / 60%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
  }

  .section-tag i {
    height: 1px;
    margin: 0 18px;
    flex: 1;
    background: currentColor;
    opacity: 0.35;
  }

  .section-tag--light {
    color: rgb(255 255 255 / 58%);
  }
}

@layer components {
  .loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-content: center;
    background: var(--ink);
    color: white;
    transition: clip-path 1s var(--ease-out), visibility 1s;
    clip-path: inset(0 0 0 0);
  }

  .loader.is-hidden {
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }

  .loader__mark {
    display: flex;
    justify-content: space-between;
    width: min(64vw, 320px);
    font-size: clamp(34px, 6vw, 70px);
    font-weight: 800;
    letter-spacing: -0.06em;
    line-height: 1;
  }

  .loader__mark span {
    opacity: 0;
    transform: translateY(24px);
    animation: loader-letter 0.7s var(--ease-out) forwards;
  }

  .loader__mark span:nth-child(2) { animation-delay: 0.06s; }
  .loader__mark span:nth-child(3) { animation-delay: 0.12s; }
  .loader__mark span:nth-child(4) { animation-delay: 0.18s; }
  .loader__mark span:nth-child(5) { animation-delay: 0.24s; }
  .loader__mark span:nth-child(6) { animation-delay: 0.3s; }

  .loader__line {
    width: min(64vw, 320px);
    height: 1px;
    margin-top: 22px;
    overflow: hidden;
    background: rgb(255 255 255 / 20%);
  }

  .loader__line i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--acid);
    transform: translateX(-100%);
    animation: loader-line 1.15s 0.15s var(--ease-out) forwards;
  }

  .loader p {
    margin-top: 14px;
    color: rgb(255 255 255 / 44%);
    font-size: 8px;
    letter-spacing: 0.24em;
  }

  .cursor {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border: 1px solid var(--acid);
    border-radius: 50%;
    color: var(--ink);
    background: var(--acid);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), opacity 0.25s,
      background 0.25s, border-color 0.25s;
  }

  .cursor span {
    display: none;
  }

  .cursor.is-visible { opacity: 1; }
  .cursor.is-active { width: 36px; height: 36px; }

  .scroll-progress {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    pointer-events: none;
  }

  .scroll-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--acid);
    transform: scaleX(0);
    transform-origin: left;
  }

  .site-header {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: 96px;
    padding-inline: var(--gutter);
    color: white;
    border-bottom: 1px solid var(--line-light);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 11px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.13em;
  }

  .brand svg {
    width: 28px;
    fill: var(--acid);
  }

  .brand__cut { fill: var(--ink); }

  .desktop-nav {
    display: flex;
    gap: clamp(20px, 3vw, 52px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .desktop-nav a {
    position: relative;
    padding-block: 12px;
  }

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

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

  .header-contact {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 20px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
  }

  .header-contact:hover {
    filter: drop-shadow(0 12px 20px rgb(223 255 56 / 42%));
    transform: translateY(-2px) scale(1.05);
  }

  .header-contact svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  .hero {
    position: relative;
    min-height: max(760px, 100svh);
    overflow: hidden;
    color: white;
    background: var(--ink);
  }

  .hero__media {
    position: absolute;
    inset: -5%;
    transform: scale(1.04);
    will-change: transform;
  }

  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.86) contrast(1.04);
  }

  .hero__wash {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(5 7 7 / 95%) 0%, rgb(5 7 7 / 70%) 40%, rgb(5 7 7 / 4%) 76%),
      linear-gradient(0deg, rgb(5 7 7 / 72%) 0%, transparent 42%),
      radial-gradient(circle at var(--spot-x, 68%) var(--spot-y, 43%), transparent 0%, rgb(0 0 0 / 16%) 34%, rgb(0 0 0 / 28%) 82%);
  }

  .hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
      linear-gradient(rgb(255 255 255 / 20%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 20%) 1px, transparent 1px);
    background-size: 8.333vw 8.333vw;
    mask-image: linear-gradient(90deg, black, transparent 72%);
  }

  .hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: max(760px, 100svh);
    padding: 168px var(--gutter) 62px;
    flex-direction: column;
    justify-content: center;
  }

  .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
    color: rgb(255 255 255 / 63%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .status-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 0 5px rgb(223 255 56 / 10%);
  }

  .status-dot::after {
    position: absolute;
    inset: -5px;
    border: 1px solid var(--acid);
    border-radius: 50%;
    content: "";
    animation: pulse 2.2s ease-out infinite;
  }

  .hero__title {
    max-width: 1320px;
    font-size: clamp(52px, 7.4vw, 142px);
    font-weight: 650;
    letter-spacing: -0.075em;
    line-height: 0.98;
  }

  .hero-line {
    display: block;
    overflow: hidden;
    padding: 0.04em 0.08em 0.09em 0;
  }

  .hero-line i {
    display: block;
    font-style: normal;
    opacity: 0;
    transform: translateY(115%);
  }

  .page-loaded .hero-line i {
    animation: hero-title 1.15s 0.1s var(--ease-out) forwards;
  }

  .page-loaded .hero-line:nth-child(2) i {
    animation-delay: 0.22s;
  }

  .hero-line--accent {
    color: var(--acid);
  }

  .hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: min(100%, 1250px);
    margin-top: clamp(44px, 6vh, 78px);
  }

  .hero__bottom > p {
    padding-left: 28px;
    color: rgb(255 255 255 / 68%);
    border-left: 1px solid rgb(255 255 255 / 32%);
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.9;
    word-break: keep-all;
  }

  .hero-intro {
    opacity: 0;
    transform: translateY(18px);
  }

  .page-loaded .hero-intro {
    animation: fade-up 0.9s 0.72s var(--ease-out) forwards;
  }

  .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: clamp(206px, 15vw, 246px);
    min-height: 68px;
    padding: 7px 7px 7px 26px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    transform-origin: center;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s;
  }

  .button:hover {
    transform: translateY(-3px) scale(1.05);
  }

  .button--primary {
    color: var(--ink);
    background: var(--acid);
    box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
  }

  .button--primary:hover {
    box-shadow: 0 20px 52px rgb(223 255 56 / 28%), 0 8px 18px rgb(0 0 0 / 25%);
  }

  .button--dark {
    color: white;
    background: var(--ink);
    box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  }

  .button--dark:hover {
    box-shadow: 0 22px 52px rgb(0 0 0 / 30%);
  }

  .button__icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .button__icon svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
  }

  .hero__coordinates {
    position: absolute;
    z-index: 3;
    top: 130px;
    right: var(--gutter);
    display: flex;
    gap: 22px;
    color: rgb(255 255 255 / 42%);
    font-size: 8px;
    letter-spacing: 0.18em;
    writing-mode: vertical-rl;
  }

  .hero__index {
    position: absolute;
    z-index: 3;
    right: var(--gutter);
    bottom: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgb(255 255 255 / 52%);
    font-size: 8px;
    letter-spacing: 0.16em;
  }

  .hero__index i {
    width: 50px;
    height: 1px;
    overflow: hidden;
    background: rgb(255 255 255 / 20%);
  }

  .hero__index i::after {
    display: block;
    width: 30%;
    height: 100%;
    background: var(--acid);
    content: "";
  }

  .manifesto-strip {
    position: relative;
    z-index: 3;
    height: 62px;
    overflow: hidden;
    background: var(--acid);
  }

  .manifesto-strip__track {
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    animation: ticker 28s linear infinite;
  }

  .manifesto-strip span {
    padding-inline: 35px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .manifesto-strip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink);
  }

  .vision {
    overflow: hidden;
  }

  .vision::before {
    position: absolute;
    top: 0;
    left: 38%;
    width: 1px;
    height: 100%;
    background: var(--line-dark);
    content: "";
  }

  .vision__lead {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 8%;
    align-items: end;
  }

  .vision__side {
    color: rgb(10 11 11 / 42%);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.17em;
  }

  .vision h2,
  .services h2,
  .products h2,
  .method h2,
  .company h2 {
    font-size: clamp(46px, 6.3vw, 112px);
    font-weight: 600;
    letter-spacing: -0.075em;
    line-height: 1.08;
  }

  .vision h2.vision__headline {
    font-size: clamp(40px, 5vw, 88px);
  }

  .vision__headline-line {
    display: block;
    width: max-content;
    max-width: 100%;
    font-style: normal;
    white-space: nowrap;
  }

  .vision h2 span,
  .services h2 span,
  .products h2 span,
  .method h2 span {
    position: relative;
    z-index: 1;
  }

  .vision h2 span::after,
  .services h2 span::after,
  .products h2 span::after,
  .method h2 span::after {
    position: absolute;
    z-index: -1;
    right: -0.05em;
    bottom: 0.02em;
    left: -0.04em;
    height: 0.24em;
    background: var(--acid);
    content: "";
    transform: skewX(-10deg);
  }

  .vision__body {
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 8%;
    align-items: center;
    margin-top: clamp(90px, 11vw, 190px);
  }

  .vision__orbit {
    position: relative;
    width: min(100%, 330px);
    aspect-ratio: 1;
  }

  .vision__orbit svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgb(10 11 11 / 17%);
    stroke-width: 0.8;
    animation: orbit-spin 24s linear infinite;
  }

  .vision__orbit .orbit-accent {
    stroke: var(--ink);
    stroke-width: 2;
  }

  .vision__orbit > div {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .vision__orbit strong {
    font-size: clamp(70px, 8vw, 126px);
    font-weight: 500;
    letter-spacing: -0.08em;
    line-height: 1;
  }

  .vision__orbit span {
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.14em;
  }

  .vision__copy {
    display: grid;
    grid-template-columns: 0.8fr 1fr;
    gap: clamp(30px, 5vw, 90px);
    align-items: start;
  }

  .vision__copy .lead-copy {
    color: var(--ink);
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: -0.03em;
  }

  .vision__copy > p:not(.lead-copy) {
    max-width: 590px;
    color: rgb(10 11 11 / 60%);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 2.2;
  }

  .text-link {
    display: inline-flex;
    grid-column: 2;
    align-items: center;
    gap: 28px;
    width: fit-content;
    margin-top: 12px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .text-link i {
    display: grid;
    width: 48px;
    height: 48px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-out), background 0.3s, box-shadow 0.3s;
  }

  .text-link:hover i {
    background: var(--acid);
    box-shadow: 0 12px 28px rgb(80 90 20 / 18%);
    transform: translateY(-2px) scale(1.05);
  }

  .text-link svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .services {
    overflow: hidden;
    color: white;
    background: var(--ink);
  }

  .services::before {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 90px 90px;
    content: "";
    mask-image: linear-gradient(180deg, black, transparent 50%);
    pointer-events: none;
  }

  .services__heading {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
  }

  .services__heading h2 {
    max-width: 800px;
  }

  .services h2.services__headline {
    font-size: clamp(42px, 5vw, 80px);
  }

  .services__heading h2 span::after {
    background: var(--acid);
  }

  .services__heading p {
    max-width: 500px;
    padding-bottom: 10px;
    color: rgb(255 255 255 / 55%);
    font-size: 13px;
    line-height: 2;
  }

  .service-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: clamp(76px, 9vw, 150px);
    border: 1px solid var(--line-light);
    background: var(--line-light);
  }

  .service-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--ink);
    transition: background-color 0.5s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }

  .service-card::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--acid);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease-out);
  }

  .service-card:hover {
    z-index: 2;
    background: #111313;
    box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
    transform: translateY(-4px) scale(1.015);
  }

  .service-card:hover::after { transform: scaleX(1); }

  .service-card__top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    min-height: 76px;
    padding: 0 clamp(18px, 2vw, 34px);
    border-bottom: 1px solid var(--line-light);
    color: rgb(255 255 255 / 55%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.17em;
  }

  .service-card__en { margin-right: 16px; }

  .service-card__arrow {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line-light);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s;
  }

  .service-card:hover .service-card__arrow {
    color: var(--ink);
    background: var(--acid);
    transform: rotate(45deg) scale(1.05);
  }

  .service-card__arrow svg {
    width: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .service-card__visual {
    position: relative;
    height: clamp(250px, 25vw, 400px);
    overflow: hidden;
    border-bottom: 1px solid var(--line-light);
    background: #0c0e0e;
  }

  .service-card__visual::before {
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background-image:
      linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 8%) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
  }

  .service-card__visual {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --spot-x: 50%;
    --spot-y: 50%;
    contain: layout paint;
    isolation: isolate;
  }

  .service-card__visual::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgb(223 255 56 / 10%), transparent 34%);
    content: "";
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s;
  }

  .service-card:hover .service-card__visual::after { opacity: 1; }

  .service-card:hover .visual-scan { animation-duration: 3.2s; }

  .visual-hud {
    position: absolute;
    z-index: 10;
    top: 18px;
    right: 18px;
    left: 18px;
    display: flex;
    justify-content: space-between;
    color: rgb(255 255 255 / 34%);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.2em;
  }

  .visual-hud span:last-child {
    color: var(--acid);
  }

  .visual-hud span:last-child::before {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 9px var(--acid);
    content: "";
    animation: visual-status 1.8s ease-in-out infinite;
  }

  .visual-scan {
    position: absolute;
    z-index: 9;
    top: -25%;
    left: 0;
    width: 100%;
    height: 24%;
    background: linear-gradient(180deg, transparent, rgb(223 255 56 / 7%) 70%, rgb(223 255 56 / 30%) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: visual-scan 5.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .ai-neural-scene {
    position: absolute;
    z-index: 4;
    top: 53%;
    left: 50%;
    width: clamp(174px, 15vw, 240px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) perspective(700px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 0.35s var(--ease-out);
  }

  .service-card:hover .ai-neural-scene {
    transform: translate(-50%, -50%) perspective(700px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.06);
  }

  .service-card:hover .ai-ring--outer { animation-duration: 9s; }
  .service-card:hover .ai-ring--inner { animation-duration: 5.5s; }

  .ai-halo {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(223 255 56 / 18%), rgb(223 255 56 / 4%) 36%, transparent 68%);
    filter: blur(16px);
    animation: ai-halo 3.2s ease-in-out infinite;
  }

  .ai-ring {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 12%);
    transform-style: preserve-3d;
  }

  .ai-ring--outer {
    inset: 5%;
    border-color: rgb(255 255 255 / 17%);
    transform: rotate(45deg);
    animation: ai-ring-outer 18s linear infinite;
  }

  .ai-ring--inner {
    inset: 21%;
    border-color: rgb(223 255 56 / 38%);
    transform: rotate(45deg);
    animation: ai-ring-inner 10s linear infinite reverse;
  }

  .ai-ring::before,
  .ai-ring::after {
    position: absolute;
    width: 15%;
    height: 1px;
    background: var(--acid);
    box-shadow: 0 0 8px rgb(223 255 56 / 48%);
    content: "";
  }

  .ai-ring::before { top: -1px; left: 14%; }
  .ai-ring::after { right: 14%; bottom: -1px; }

  .ai-ring i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 13px var(--acid);
  }

  .ai-ring i:nth-child(1) { top: -3px; left: -3px; }
  .ai-ring i:nth-child(2) { top: -3px; right: -3px; }
  .ai-ring i:nth-child(3) { right: -3px; bottom: -3px; }

  .ai-core {
    position: absolute;
    z-index: 3;
    inset: 32%;
    display: grid;
    place-items: center;
    border: 1px solid var(--acid);
    background: linear-gradient(135deg, rgb(223 255 56 / 10%), rgb(10 12 12 / 94%) 55%);
    box-shadow: 0 0 34px rgb(223 255 56 / 10%), inset 0 0 24px rgb(223 255 56 / 8%);
    transform: translateZ(28px) rotate(45deg);
    animation: ai-core-breathe 3.4s ease-in-out infinite;
  }

  .ai-core__inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    transform: rotate(-45deg);
  }

  .ai-core strong {
    color: var(--acid);
    font-size: clamp(23px, 2vw, 33px);
    font-weight: 600;
    letter-spacing: -0.07em;
    line-height: 0.9;
    text-shadow: 0 0 18px rgb(223 255 56 / 24%);
  }

  .ai-core small {
    margin-top: 8px;
    color: rgb(255 255 255 / 35%);
    font-size: 4px;
    letter-spacing: 0.22em;
  }

  .ai-core > i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 11px var(--acid);
  }

  .ai-core > i:nth-of-type(1) { top: -2px; left: -2px; }
  .ai-core > i:nth-of-type(2) { top: -2px; right: -2px; }
  .ai-core > i:nth-of-type(3) { right: -2px; bottom: -2px; }
  .ai-core > i:nth-of-type(4) { bottom: -2px; left: -2px; }

  .ai-circuit {
    position: absolute;
    z-index: 3;
    overflow: hidden;
    opacity: 0.7;
  }

  .ai-circuit::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(223 255 56 / 60%), transparent);
    content: "";
  }

  .ai-circuit i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 12px var(--acid);
  }

  .ai-circuit--one,
  .ai-circuit--three { top: 53%; width: 30%; height: 1px; }
  .ai-circuit--one { left: 0; }
  .ai-circuit--three { right: 0; }
  .ai-circuit--two,
  .ai-circuit--four { left: 50%; width: 1px; height: 27%; }
  .ai-circuit--two { top: 0; }
  .ai-circuit--four { bottom: 0; }
  .ai-circuit--two::before,
  .ai-circuit--four::before { background: linear-gradient(180deg, transparent, rgb(223 255 56 / 60%), transparent); }
  .ai-circuit--one i,
  .ai-circuit--three i { top: -2px; animation: signal-horizontal 2.6s ease-in-out infinite; }
  .ai-circuit--three i { animation-delay: -1.3s; }
  .ai-circuit--two i,
  .ai-circuit--four i { left: -2px; animation: signal-vertical 2.9s ease-in-out infinite; }
  .ai-circuit--four i { animation-delay: -1.6s; }

  .data-particles i {
    position: absolute;
    z-index: 2;
    top: var(--y);
    left: var(--x);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 8px var(--acid);
    animation: data-particle 4.6s var(--delay) ease-in-out infinite;
  }

  .talent-network {
    position: absolute;
    z-index: 2;
    inset: 8% 4% 2%;
    width: 92%;
    height: 90%;
    overflow: visible;
    fill: none;
  }

  .network-radar {
    stroke: rgb(255 255 255 / 7%);
    stroke-dasharray: 2 8;
    transform-origin: 200px 140px;
    animation: network-radar 20s linear infinite;
  }

  .network-radar--inner {
    stroke: rgb(223 255 56 / 12%);
    animation-direction: reverse;
    animation-duration: 13s;
  }

  .network-path,
  .network-flow {
    fill: none;
    stroke: rgb(255 255 255 / 20%);
    stroke-width: 0.8;
    stroke-dasharray: 4 7;
    animation: dash 14s linear infinite;
  }

  .network-path--delay { animation-delay: -5s; }
  .network-flow { stroke: rgb(223 255 56 / 48%); stroke-width: 1; stroke-dasharray: 7 9; animation-duration: 9s; }
  .network-signal { fill: var(--acid); stroke: none; }

  .profile {
    position: absolute;
    z-index: 5;
    width: clamp(55px, 5.2vw, 80px);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(15 18 18 / 86%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 30%), 0 0 0 8px rgb(255 255 255 / 3%);
    animation: talent-float 4.8s ease-in-out infinite;
    transition: border-color 0.4s, filter 0.4s;
  }

  .profile::before {
    position: absolute;
    inset: -10px;
    border: 1px solid rgb(223 255 56 / 0%);
    border-radius: 50%;
    content: "";
    animation: talent-ping 3.4s ease-out infinite;
  }

  .profile > span {
    position: absolute;
    inset: 7px;
    overflow: hidden;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 37%, rgb(255 255 255 / 84%) 0 13%, transparent 14%),
      radial-gradient(circle at 50% 105%, rgb(255 255 255 / 64%) 0 37%, transparent 38%),
      radial-gradient(circle at 45% 35%, rgb(223 255 56 / 9%), #171a1a 72%);
  }

  .profile b {
    position: absolute;
    top: -8px;
    right: -4px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: var(--acid);
    box-shadow: 0 0 16px rgb(223 255 56 / 25%);
    font-size: 6px;
  }

  .profile small {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    color: rgb(255 255 255 / 36%);
    font-size: 5px;
    letter-spacing: 0.18em;
    transform: translateX(-50%);
  }

  .profile--one { top: 18%; left: 10%; }
  .profile--two { top: 15%; right: 9%; animation-delay: -1.7s; }
  .profile--three { right: 17%; bottom: 12%; animation-delay: -3.2s; }
  .profile--two::before { animation-delay: -1.1s; }
  .profile--three::before { animation-delay: -2.2s; }

  .service-card:hover .profile {
    border-color: rgb(223 255 56 / 65%);
    filter: drop-shadow(0 0 14px rgb(223 255 56 / 12%));
    animation-duration: 3.2s;
  }

  .match-core {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    display: grid;
    width: clamp(76px, 7vw, 108px);
    aspect-ratio: 1;
    place-content: center;
    border: 1px solid rgb(223 255 56 / 45%);
    border-radius: 50%;
    background: radial-gradient(circle, rgb(223 255 56 / 9%), rgb(12 14 14 / 94%) 68%);
    box-shadow: 0 0 45px rgb(223 255 56 / 9%), inset 0 0 24px rgb(223 255 56 / 5%);
    text-align: center;
    transform: translate(-50%, -50%) perspective(600px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.35s var(--ease-out);
  }

  .service-card:hover .match-core {
    transform: translate(-50%, -50%) perspective(600px)
      rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.06);
  }

  .match-core::before {
    position: absolute;
    inset: -7px;
    padding: 1px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, var(--acid) 70%, transparent 88%);
    content: "";
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    animation: match-spin 4.8s linear infinite;
  }

  .match-core i {
    position: absolute;
    inset: 13%;
    border: 1px dashed rgb(255 255 255 / 16%);
    border-radius: 50%;
    animation: match-spin 8s linear infinite reverse;
  }

  .match-core strong {
    color: var(--acid);
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
  }

  .match-core sup { font-size: 0.42em; }
  .match-core span { margin-top: 5px; color: rgb(255 255 255 / 32%); font-size: 4px; letter-spacing: 0.22em; }

  .service-card__visual--web { perspective: 900px; }

  .web-scene {
    position: absolute;
    z-index: 3;
    inset: 10% 3% 3%;
    transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-out);
  }

  .service-card:hover .web-scene {
    transform: perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.035);
  }

  .web-panel {
    position: absolute;
    top: 18%;
    left: 11%;
    width: 78%;
    height: 64%;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    background: rgb(12 15 15 / 90%);
    box-shadow: 0 24px 55px rgb(0 0 0 / 36%);
  }

  .web-panel--rear {
    z-index: 1;
    border-color: rgb(223 255 56 / 18%);
    opacity: 0.36;
    transform: translate3d(24px, -18px, -70px) rotateZ(-2deg);
    animation: web-rear-float 7s ease-in-out infinite;
  }

  .web-panel--middle {
    z-index: 2;
    padding: 16%;
    border-color: rgb(223 255 56 / 30%);
    opacity: 0.52;
    transform: translate3d(-16px, 14px, -35px) rotateZ(1.5deg);
    animation: web-middle-float 6s -2s ease-in-out infinite;
  }

  .web-panel--front {
    z-index: 4;
    border-color: rgb(223 255 56 / 60%);
    background: rgb(14 17 17 / 96%);
    transform: translateZ(18px);
    animation: web-front-float 5.4s ease-in-out infinite;
  }

  .web-panel__blocks {
    display: grid;
    height: 100%;
    padding: 12%;
    grid-template-columns: 1fr 1.4fr;
    grid-template-rows: 1fr 1fr;
    gap: 7%;
  }

  .web-panel__blocks i { border: 1px solid rgb(255 255 255 / 14%); background: rgb(223 255 56 / 4%); }
  .web-panel__blocks i:nth-child(2) { grid-row: span 2; }

  .web-panel--middle span {
    display: block;
    height: 1px;
    margin-bottom: 16%;
    background: rgb(255 255 255 / 22%);
    transform-origin: left;
    animation: web-line 3.8s ease-in-out infinite;
  }

  .web-panel--middle span:nth-child(2) { width: 72%; animation-delay: -1.1s; }
  .web-panel--middle span:nth-child(3) { width: 88%; animation-delay: -2.2s; }

  .browser-bar {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    gap: 4px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
  }

  .browser-bar i { width: 3px; height: 3px; border-radius: 50%; background: rgb(255 255 255 / 22%); }
  .browser-bar span { margin-left: 7px; color: rgb(255 255 255 / 24%); font-size: 4px; letter-spacing: 0.1em; }
  .browser-bar em { margin-left: auto; color: var(--acid); font-size: 4px; font-style: normal; letter-spacing: 0.16em; }

  .web-layout { display: grid; height: calc(100% - 22px); grid-template-columns: 18% 1fr; }
  .web-sidebar { padding: 12px 7px; border-right: 1px solid rgb(255 255 255 / 8%); }
  .web-sidebar i { display: block; width: 100%; height: 2px; margin-bottom: 9px; background: rgb(255 255 255 / 14%); }
  .web-sidebar i:first-child { width: 55%; background: var(--acid); }
  .web-canvas { padding: 12% 10%; }
  .web-kicker { width: 28%; height: 3px; background: var(--acid); animation: web-kicker 3.5s ease-in-out infinite; }
  .web-headline { margin-top: 8%; }
  .web-headline i { display: block; width: 78%; height: 5px; margin-top: 5px; background: rgb(255 255 255 / 65%); transform-origin: left; animation: web-line 4s ease-in-out infinite; }
  .web-headline i:last-child { width: 52%; animation-delay: -1.5s; }
  .web-cta { width: 22%; height: 9px; margin-top: 10%; border: 1px solid rgb(223 255 56 / 60%); border-radius: 20px; }
  .web-cards { display: grid; margin-top: 12%; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .web-cards i { height: 24px; border: 1px solid rgb(255 255 255 / 11%); background: linear-gradient(145deg, rgb(223 255 56 / 6%), transparent); animation: web-card-pulse 4s ease-in-out infinite; }
  .web-cards i:nth-child(2) { animation-delay: -1.3s; }
  .web-cards i:nth-child(3) { animation-delay: -2.6s; }

  .web-pointer {
    position: absolute;
    z-index: 8;
    top: 63%;
    left: 68%;
    display: flex;
    align-items: center;
    gap: 7px;
    filter: drop-shadow(0 0 9px rgb(223 255 56 / 24%));
    animation: web-pointer-route 7s var(--ease-out) infinite;
  }

  .web-pointer i {
    width: 0;
    height: 0;
    border-top: 8px solid var(--acid);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    transform: rotate(-35deg);
  }

  .web-pointer span {
    padding: 4px 6px;
    color: var(--ink);
    border-radius: 20px;
    background: var(--acid);
    font-size: 4px;
    font-weight: 800;
    letter-spacing: 0.16em;
  }

  .ai-ring,
  .ai-core,
  .ai-halo,
  .profile,
  .match-core::before,
  .web-panel,
  .web-pointer,
  .visual-scan {
    will-change: transform, opacity;
  }

  .service-card__content {
    padding: clamp(32px, 3vw, 52px) clamp(22px, 2.4vw, 42px) clamp(40px, 4vw, 64px);
  }

  .service-card__content h3 {
    min-height: 2.6em;
    font-size: clamp(25px, 2.2vw, 38px);
    font-weight: 550;
    letter-spacing: -0.045em;
    line-height: 1.25;
  }

  .service-card__content h3 span {
    display: block;
    color: rgb(255 255 255 / 40%);
    font-size: 0.7em;
  }

  .service-card__content > p {
    min-height: 7.2em;
    margin-top: 28px;
    color: rgb(255 255 255 / 55%);
    font-size: 12px;
    line-height: 2;
  }

  .service-card__content ul {
    margin-top: 28px;
    border-top: 1px solid var(--line-light);
  }

  .service-card__content li {
    position: relative;
    padding: 12px 0 12px 18px;
    color: rgb(255 255 255 / 72%);
    border-bottom: 1px solid var(--line-light);
    font-size: 10px;
  }

  .service-card__content li::before {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--acid);
    content: "";
    transform: translateY(-50%);
  }

  .products {
    overflow: hidden;
    background: #e8e7df;
  }

  .products__blueprint {
    position: absolute;
    top: -9vw;
    right: -12vw;
    width: 56vw;
    aspect-ratio: 1;
    opacity: 0.08;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background:
      linear-gradient(90deg, transparent 49.9%, var(--ink) 50%, transparent 50.1%),
      linear-gradient(transparent 49.9%, var(--ink) 50%, transparent 50.1%);
    pointer-events: none;
  }

  .products__blueprint::before,
  .products__blueprint::after {
    position: absolute;
    border: 1px solid var(--ink);
    border-radius: 50%;
    content: "";
  }

  .products__blueprint::before { inset: 16%; }
  .products__blueprint::after { inset: 35%; }

  .products__heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: clamp(50px, 8vw, 140px);
    align-items: end;
  }

  .products h2 { max-width: 900px; }

  .products h2.products__headline {
    font-size: clamp(32px, 2.8vw, 52px);
    line-height: 1.12;
    word-break: keep-all;
  }

  .products__heading > div {
    max-width: 450px;
    padding-bottom: 12px;
  }

  .products__heading > div p:first-child {
    margin-bottom: 24px;
    color: rgb(10 11 11 / 40%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .products__heading > div p:last-child {
    color: rgb(10 11 11 / 60%);
    font-size: 13px;
    line-height: 2;
  }

  .product-showcases {
    position: relative;
    display: grid;
    gap: clamp(70px, 9vw, 140px);
    margin-top: clamp(90px, 11vw, 190px);
  }

  .product-showcase {
    display: grid;
    min-height: 650px;
    grid-template-columns: minmax(0, 1.14fr) minmax(360px, 0.86fr);
    border: 1px solid rgb(10 11 11 / 18%);
    background: var(--paper);
    box-shadow: 0 28px 80px rgb(10 11 11 / 7%);
  }

  .product-showcase__media {
    --product-art: none;
    position: relative;
    min-width: 0;
    min-height: 650px;
    overflow: hidden;
    border-right: 1px solid rgb(10 11 11 / 18%);
    background: #e9edf4;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }

  .product-showcase__media::before {
    position: absolute;
    z-index: 3;
    inset: 44px 0 0;
    opacity: 0.18;
    background-image:
      linear-gradient(rgb(223 255 56 / 22%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(223 255 56 / 22%) 1px, transparent 1px);
    background-size: 52px 52px;
    content: "";
    mask-image: linear-gradient(160deg, black, transparent 72%);
    pointer-events: none;
  }

  .product-showcase__media::after {
    position: absolute;
    z-index: 0;
    inset: 44px 0 0;
    background: var(--product-art) center / cover no-repeat;
    content: "";
    filter: blur(28px) saturate(0.8);
    opacity: 0.12;
    transform: scale(1.12);
    pointer-events: none;
  }

  .product-showcase:first-child .product-showcase__media {
    --product-art: url("assets/product-ai-navi.png");
  }

  .product-showcase:nth-child(2) .product-showcase__media {
    --product-art: url("assets/product-genchokun-pro.png");
  }

  .product-showcase__media:hover {
    z-index: 2;
    box-shadow: 0 30px 70px rgb(10 11 11 / 22%);
    transform: translateY(-4px) scale(1.012);
  }

  .product-browser {
    position: absolute;
    z-index: 6;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding-inline: 18px;
    gap: 6px;
    color: rgb(255 255 255 / 36%);
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    background: rgb(10 11 11 / 92%);
  }

  .product-browser span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(255 255 255 / 28%);
  }

  .product-browser span:first-child { background: var(--acid); box-shadow: 0 0 10px rgb(223 255 56 / 45%); }

  .product-browser i {
    margin-left: auto;
    font-size: 6px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.17em;
  }

  .product-showcase__media img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 58px 18px 18px;
    object-fit: contain;
    object-position: center;
    filter: saturate(0.88) contrast(1.04);
    transition: filter 0.8s var(--ease-out), transform 1.1s var(--ease-out);
  }

  .product-showcase__media:hover img {
    filter: saturate(1) contrast(1.02);
    transform: translateY(-2px);
  }

  .product-showcase__metric {
    position: absolute;
    z-index: 7;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    min-width: 210px;
    padding: 18px 22px;
    gap: 18px;
    color: var(--ink);
    background: var(--acid);
    box-shadow: 0 18px 45px rgb(0 0 0 / 24%);
  }

  .product-showcase__metric strong {
    font-size: clamp(42px, 4.2vw, 72px);
    font-weight: 550;
    letter-spacing: -0.08em;
    line-height: 0.8;
  }

  .product-showcase__metric sup { font-size: 0.32em; letter-spacing: 0; }
  .product-showcase__metric span { font-size: 8px; font-weight: 700; line-height: 1.6; letter-spacing: 0.1em; }

  .product-showcase__scan {
    position: absolute;
    z-index: 5;
    top: 44px;
    left: -28%;
    width: 20%;
    height: calc(100% - 44px);
    background: linear-gradient(90deg, transparent, rgb(223 255 56 / 16%), transparent);
    mix-blend-mode: screen;
    transform: skewX(-12deg);
    animation: product-scan 6.5s ease-in-out infinite;
    pointer-events: none;
  }

  .product-showcase__copy {
    display: flex;
    min-width: 0;
    padding: clamp(42px, 4vw, 74px);
    flex-direction: column;
  }

  .product-showcase__meta {
    display: flex;
    justify-content: space-between;
    padding-bottom: 18px;
    color: rgb(10 11 11 / 40%);
    border-bottom: 1px solid var(--line-dark);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.17em;
  }

  .product-showcase__status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: clamp(34px, 4vw, 60px);
    color: rgb(10 11 11 / 50%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .product-showcase__status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 0 5px rgb(150 170 25 / 10%);
    animation: visual-status 1.8s ease-in-out infinite;
  }

  .product-showcase h3 {
    margin-top: 18px;
    font-size: clamp(40px, 4vw, 68px);
    font-weight: 600;
    letter-spacing: -0.07em;
    line-height: 1;
  }

  .product-showcase h3 small {
    display: block;
    margin-top: 12px;
    color: rgb(10 11 11 / 42%);
    font-size: 0.25em;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .product-showcase__lead {
    margin-top: clamp(28px, 3vw, 45px);
    font-size: clamp(22px, 2vw, 31px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.04em;
  }

  .product-showcase__description {
    margin-top: 20px;
    color: rgb(10 11 11 / 58%);
    font-size: 12px;
    line-height: 2;
  }

  .product-showcase ul {
    margin-top: 30px;
    border-top: 1px solid var(--line-dark);
  }

  .product-showcase li {
    display: grid;
    grid-template-columns: 34px 1fr;
    padding: 12px 0;
    color: rgb(10 11 11 / 67%);
    border-bottom: 1px solid var(--line-dark);
    font-size: 10px;
  }

  .product-showcase li span { color: rgb(10 11 11 / 30%); font-size: 8px; letter-spacing: 0.12em; }

  .product-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 250px);
    min-height: 58px;
    margin-top: auto;
    padding: 5px 5px 5px 22px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s, color 0.3s;
  }

  .product-link:hover {
    color: var(--paper);
    background: var(--ink);
    box-shadow: 0 18px 36px rgb(10 11 11 / 20%);
    transform: translateY(-3px) scale(1.05);
  }

  .product-link i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    background: var(--acid);
  }

  .product-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

  .product-showcase--reverse .product-showcase__media {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
    border-left: 1px solid rgb(10 11 11 / 18%);
  }

  .product-showcase--reverse .product-showcase__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .method {
    overflow: hidden;
  }

  .method__blueprint {
    position: absolute;
    top: 0;
    right: -8%;
    width: 47vw;
    height: 47vw;
    opacity: 0.09;
    border: 1px solid var(--ink);
    border-radius: 50%;
  }

  .method__blueprint::before,
  .method__blueprint::after {
    position: absolute;
    content: "";
  }

  .method__blueprint::before {
    inset: 16%;
    border: 1px solid var(--ink);
    border-radius: 50%;
  }

  .method__blueprint::after {
    top: 50%;
    left: -20%;
    width: 140%;
    height: 1px;
    background: var(--ink);
    box-shadow: 0 -80px var(--ink), 0 80px var(--ink);
  }

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

  .method__heading p {
    padding-bottom: 12px;
    color: rgb(10 11 11 / 38%);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.16em;
  }

  .method-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(80px, 10vw, 170px);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
  }

  .method-steps li {
    position: relative;
    min-height: 440px;
    padding: 36px clamp(20px, 3vw, 54px) 44px;
    border-right: 1px solid var(--line-dark);
    transition: background 0.45s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  }

  .method-steps li:first-child { border-left: 1px solid var(--line-dark); }
  .method-steps li:hover {
    z-index: 1;
    background: var(--acid);
    box-shadow: 0 20px 55px rgb(50 60 20 / 16%);
    transform: translateY(-5px) scale(1.02);
  }

  .method-steps li > div {
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgb(10 11 11 / 45%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .method-steps li > div i { width: 32px; height: 1px; background: currentColor; }

  .method-steps strong {
    display: block;
    margin: 50px 0 36px;
    color: transparent;
    font-size: clamp(75px, 7.6vw, 134px);
    font-weight: 700;
    letter-spacing: -0.08em;
    line-height: 1;
    -webkit-text-stroke: 1px rgb(10 11 11 / 35%);
    transition: color 0.45s var(--ease-out), -webkit-text-stroke-color 0.45s;
  }

  .method-steps li:hover strong {
    color: var(--ink);
    -webkit-text-stroke-color: transparent;
  }

  .method-steps h3 {
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.03em;
  }

  .method-steps p {
    max-width: 330px;
    margin-top: 22px;
    color: rgb(10 11 11 / 55%);
    font-size: 11px;
    line-height: 2;
  }

  .impact {
    display: grid;
    min-height: 190svh;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    color: white;
    background: var(--ink);
  }

  .impact__image {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
  }

  .impact__image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(10 11 11 / 10%), rgb(10 11 11 / 65%));
    content: "";
  }

  .impact__image img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    object-position: 72% center;
    filter: grayscale(0.7) contrast(1.12);
    transform: scale(1.04);
  }

  .impact__content {
    --impact-progress: 0;
    position: sticky;
    top: 0;
    display: flex;
    height: 100svh;
    min-height: 620px;
    padding: clamp(80px, 8vw, 140px) var(--gutter);
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
  }

  .impact__content::before {
    position: absolute;
    right: -15%;
    bottom: -16%;
    width: 39vw;
    height: 39vw;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 50%;
    box-shadow: 0 0 0 7vw rgb(255 255 255 / 2%), 0 0 0 14vw rgb(255 255 255 / 2%);
    content: "";
  }

  .impact__content::after {
    position: absolute;
    z-index: 2;
    top: 28%;
    right: 22px;
    width: 2px;
    height: 44%;
    background: var(--acid);
    box-shadow: 0 0 14px rgb(223 255 56 / 38%);
    content: "";
    opacity: 0.7;
    transform: scaleY(var(--impact-progress));
    transform-origin: top;
  }

  .impact .section-tag { margin-bottom: auto; }

  .impact__eyebrow {
    color: var(--acid);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
  }

  .impact__zero {
    display: flex;
    align-items: flex-start;
    margin-top: 18px;
    color: var(--acid);
    font-size: clamp(140px, 15vw, 290px);
    font-weight: 500;
    letter-spacing: -0.11em;
    line-height: 0.76;
  }

  .impact__zero > span {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  .impact__zero sup {
    margin: 0.1em 0 0 0.05em;
    font-size: 0.16em;
    letter-spacing: -0.04em;
  }

  .impact h2 {
    position: relative;
    margin-top: 50px;
    font-size: clamp(38px, 3.9vw, 68px);
    font-weight: 550;
    letter-spacing: -0.06em;
    line-height: 1.16;
    word-break: keep-all;
  }

  .impact__content > p:last-child {
    position: relative;
    margin-top: 26px;
    color: rgb(255 255 255 / 50%);
    font-size: 12px;
  }

  .company__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(60px, 10vw, 180px);
    align-items: end;
  }

  .company__statement > p {
    margin-bottom: 54px;
    color: rgb(10 11 11 / 40%);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.17em;
  }

  .company h2 {
    font-size: clamp(46px, 5.3vw, 92px);
  }

  .company dl { border-top: 1px solid var(--line-dark); }

  .company dl > div {
    display: grid;
    grid-template-columns: 34% 1fr;
    gap: 20px;
    padding: 27px 0;
    border-bottom: 1px solid var(--line-dark);
  }

  .company dt {
    color: rgb(10 11 11 / 40%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .company dd { font-size: clamp(12px, 1vw, 15px); }

  .contact {
    position: relative;
    overflow: hidden;
    background: var(--acid);
  }

  .contact__grid {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    background-image:
      linear-gradient(var(--ink) 1px, transparent 1px),
      linear-gradient(90deg, var(--ink) 1px, transparent 1px);
    background-size: 8.333vw 8.333vw;
    mask-image: radial-gradient(circle at 72% 50%, black, transparent 62%);
  }

  .contact__top {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid rgb(10 11 11 / 25%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.18em;
  }

  .contact__link {
    position: relative;
    display: block;
    padding: clamp(70px, 9vw, 150px) 0;
    font-size: clamp(50px, 8.2vw, 150px);
    font-weight: 600;
    letter-spacing: -0.08em;
    line-height: 1.03;
  }

  .contact__link > span { display: block; width: fit-content; }

  .contact__link > span::after {
    display: block;
    width: 100%;
    height: clamp(3px, 0.4vw, 8px);
    background: var(--ink);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.8s var(--ease-out);
  }

  .contact__link:hover > span::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .contact__link i {
    position: absolute;
    right: 3%;
    bottom: 20%;
    display: grid;
    width: clamp(70px, 9vw, 150px);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--ink);
    border-radius: 50%;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.3s;
  }

  .contact__link:hover i {
    color: var(--acid);
    background: var(--ink);
    box-shadow: 0 28px 60px rgb(30 35 0 / 20%);
    transform: translateY(-5px) scale(1.05) rotate(45deg);
  }

  .contact__link svg {
    width: 34%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
  }

  .contact__bottom {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding-top: 34px;
    border-top: 1px solid rgb(10 11 11 / 25%);
  }

  .contact__bottom p { font-size: clamp(12px, 1vw, 15px); line-height: 1.9; }

  .footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 190px;
    padding-inline: var(--gutter);
    color: white;
    background: var(--ink);
  }

  .footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.13em;
  }

  .footer__brand svg { width: 27px; fill: var(--acid); }
  .footer > p { color: rgb(255 255 255 / 38%); font-size: 8px; font-weight: 700; letter-spacing: 0.18em; }
  .footer > div:last-child { display: flex; justify-self: end; gap: 36px; color: rgb(255 255 255 / 42%); font-size: 8px; letter-spacing: 0.12em; }
}

@layer motion {
  @keyframes loader-letter {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes loader-line {
    to { transform: translateX(0); }
  }

  @keyframes hero-title {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fade-up {
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes pulse {
    0% { opacity: 0.8; transform: scale(0.5); }
    70%, 100% { opacity: 0; transform: scale(1.7); }
  }

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

  @keyframes orbit-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes dash {
    to { stroke-dashoffset: -240; }
  }

  @keyframes visual-status {
    0%, 100% { opacity: 0.35; transform: scale(0.78); }
    50% { opacity: 1; transform: scale(1.22); }
  }

  @keyframes visual-scan {
    0% { opacity: 0; transform: translateY(0); }
    14% { opacity: 0.8; }
    74% { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(525%); }
  }

  @keyframes ai-halo {
    0%, 100% { opacity: 0.52; transform: scale(0.86); }
    50% { opacity: 1; transform: scale(1.12); }
  }

  @keyframes ai-ring-outer {
    to { transform: rotate(405deg); }
  }

  @keyframes ai-ring-inner {
    to { transform: rotate(405deg); }
  }

  @keyframes ai-core-breathe {
    0%, 100% { box-shadow: 0 0 28px rgb(223 255 56 / 8%), inset 0 0 20px rgb(223 255 56 / 6%); transform: translateZ(28px) rotate(45deg) scale(0.96); }
    50% { box-shadow: 0 0 55px rgb(223 255 56 / 20%), inset 0 0 30px rgb(223 255 56 / 12%); transform: translateZ(38px) rotate(45deg) scale(1.06); }
  }

  @keyframes signal-horizontal {
    0% { left: -8px; opacity: 0; }
    18%, 82% { opacity: 1; }
    100% { left: calc(100% + 3px); opacity: 0; }
  }

  @keyframes signal-vertical {
    0% { top: -8px; opacity: 0; }
    18%, 82% { opacity: 1; }
    100% { top: calc(100% + 3px); opacity: 0; }
  }

  @keyframes data-particle {
    0%, 100% { opacity: 0.1; transform: translate3d(0, 8px, 0) scale(0.7); }
    45% { opacity: 0.9; transform: translate3d(7px, -10px, 0) scale(1.25); }
    70% { opacity: 0.35; transform: translate3d(-4px, -18px, 0) scale(0.85); }
  }

  @keyframes talent-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(0, -9px, 18px) rotate(1.5deg); }
  }

  @keyframes talent-ping {
    0% { opacity: 0.8; border-color: rgb(223 255 56 / 38%); transform: scale(0.82); }
    80%, 100% { opacity: 0; border-color: rgb(223 255 56 / 0%); transform: scale(1.35); }
  }

  @keyframes network-radar {
    to { transform: rotate(360deg); }
  }

  @keyframes match-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes web-rear-float {
    0%, 100% { transform: translate3d(24px, -18px, -70px) rotateZ(-2deg); }
    50% { transform: translate3d(30px, -25px, -62px) rotateZ(-0.6deg); }
  }

  @keyframes web-middle-float {
    0%, 100% { transform: translate3d(-16px, 14px, -35px) rotateZ(1.5deg); }
    50% { transform: translate3d(-22px, 20px, -28px) rotateZ(0.2deg); }
  }

  @keyframes web-front-float {
    0%, 100% { transform: translate3d(0, 0, 18px); }
    50% { transform: translate3d(0, -8px, 32px); }
  }

  @keyframes web-line {
    0%, 100% { opacity: 0.45; transform: scaleX(0.28); }
    48% { opacity: 1; transform: scaleX(1); }
  }

  @keyframes web-kicker {
    0%, 100% { opacity: 0.55; width: 22%; }
    50% { opacity: 1; width: 44%; box-shadow: 0 0 10px rgb(223 255 56 / 28%); }
  }

  @keyframes web-card-pulse {
    0%, 100% { background-color: rgb(223 255 56 / 2%); transform: translateY(0); }
    50% { background-color: rgb(223 255 56 / 10%); transform: translateY(-3px); }
  }

  @keyframes web-pointer-route {
    0%, 12% { opacity: 0; transform: translate3d(-74px, 42px, 40px) scale(0.8); }
    22% { opacity: 1; }
    48% { opacity: 1; transform: translate3d(-18px, -34px, 40px) scale(1); }
    66% { opacity: 1; transform: translate3d(14px, -5px, 40px) scale(0.94); }
    84%, 100% { opacity: 0; transform: translate3d(42px, -64px, 40px) scale(0.84); }
  }

  @keyframes product-scan {
    0%, 8% { opacity: 0; left: -28%; }
    20% { opacity: 0.7; }
    72% { opacity: 0.45; }
    88%, 100% { opacity: 0; left: 112%; }
  }

  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 58px, 0) scale(0.985);
  }

  .motion-ready .service-card__visual:not(.is-motion-active) *,
  .motion-ready .service-card__visual:not(.is-motion-active) *::before,
  .motion-ready .service-card__visual:not(.is-motion-active) *::after {
    animation-play-state: paused !important;
  }

  .magnetic {
    will-change: transform;
  }
}

@layer responsive {
  @media (max-width: 1050px) {
    .desktop-nav { display: none; }
    .site-header { grid-template-columns: 1fr auto auto; gap: 24px; }
    .header-contact { grid-column: 2; }

    .menu-toggle {
      position: relative;
      z-index: 1200;
      display: grid;
      width: 44px;
      height: 44px;
      padding: 0;
      place-items: center;
      border: 1px solid rgb(255 255 255 / 28%);
      border-radius: 50%;
      color: white;
      background: transparent;
      cursor: pointer;
    }

    .menu-toggle span {
      position: absolute;
      width: 16px;
      height: 1px;
      background: currentColor;
      transition: transform 0.35s var(--ease-out);
    }

    .menu-toggle span:first-child { transform: translateY(-3px); }
    .menu-toggle span:last-child { transform: translateY(3px); }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

    .mobile-menu {
      position: fixed;
      z-index: 900;
      inset: 0;
      display: flex;
      overflow-y: auto;
      padding: 130px var(--gutter) 40px;
      visibility: hidden;
      flex-direction: column;
      justify-content: space-between;
      color: white;
      background: var(--ink);
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.7s var(--ease-out), visibility 0.7s;
    }

    .mobile-menu.is-open {
      visibility: visible;
      clip-path: inset(0);
    }

    .mobile-menu nav { border-top: 1px solid var(--line-light); }
    .mobile-menu a { display: grid; grid-template-columns: 48px 1fr; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line-light); }
    .mobile-menu em { color: var(--acid); font-size: 8px; font-style: normal; letter-spacing: 0.15em; }
    .mobile-menu a span { font-size: clamp(34px, 8vw, 64px); font-weight: 550; letter-spacing: -0.05em; line-height: 1.2; }
    .mobile-menu > p { color: rgb(255 255 255 / 40%); font-size: 8px; letter-spacing: 0.18em; }

    .vision__copy { grid-template-columns: 1fr; }
    .text-link { grid-column: 1; }
    .service-list { grid-template-columns: 1fr; }
    .service-card { display: grid; grid-template-columns: 1fr 1fr; }
    .service-card__top { grid-column: 1 / -1; }
    .service-card__visual { height: auto; min-height: 390px; border-right: 1px solid var(--line-light); }
    .service-card__content > p { min-height: auto; }
    .method-steps li { min-height: 400px; padding-inline: 30px; }
    .method-steps strong { font-size: 90px; }
    .company__grid { gap: 60px; }
    .footer { grid-template-columns: 1fr 1fr; }
    .footer > p { display: none; }
  }

  @media (max-width: 900px) {
    .services__heading,
    .products__heading { display: block; }
    .services__heading p,
    .products__heading > div { margin-top: 38px; padding-bottom: 0; }
    .impact h2 { font-size: clamp(34px, 4.8vw, 40px); }
  }

  @media (max-width: 760px) {
    :root { --gutter: 20px; --section-space: 100px; }
    html { scroll-padding-top: 72px; }
    main p { text-wrap: pretty; }

    .site-header { position: absolute; height: 76px; grid-template-columns: 1fr auto; border-bottom-color: rgb(255 255 255 / 14%); }
    .brand { font-size: 14px; }
    .brand svg { width: 25px; }
    .header-contact { display: none; }
    .menu-toggle { grid-column: 2; width: 40px; height: 40px; }

    .mobile-menu { padding: 96px 20px 26px; }
    .mobile-menu a { grid-template-columns: 38px 1fr; padding: 10px 0; }
    .mobile-menu a span { font-size: clamp(27px, 7.2vw, 34px); line-height: 1.08; }

    .hero { min-height: max(680px, 100svh); }
    .hero__content { min-height: max(680px, 100svh); padding-top: 130px; padding-bottom: 35px; justify-content: flex-end; }
    .hero__media { inset: 0; }
    .hero__media img { object-position: 64% center; opacity: 0.78; }
    .hero__wash { background: linear-gradient(0deg, rgb(5 7 7 / 95%) 0%, rgb(5 7 7 / 48%) 58%, rgb(5 7 7 / 50%) 100%); }
    .hero__grid { background-size: 25vw 25vw; }
    .hero__eyebrow { max-width: 280px; margin-bottom: 20px; font-size: 7px; line-height: 1.5; }
    .hero__title { font-size: clamp(34px, 9.5vw, 46px); line-height: 1.08; text-wrap: balance; }
    .hero__bottom { display: block; margin-top: 35px; }
    .hero__bottom > p { padding-left: 16px; font-size: clamp(10px, 2.8vw, 11px); line-height: 1.85; }
    .hero__bottom .button { margin-top: 30px; }
    .hero__coordinates { display: none; }
    .hero__index { bottom: 34px; }
    .button { width: 210px; min-height: 60px; }
    .button__icon { width: 47px; height: 47px; }
    .manifesto-strip { height: 54px; }

    .section-tag { width: 100%; margin-bottom: 66px; }
    .vision::before { left: 52%; opacity: 0.55; }
    .vision__lead { display: block; }
    .vision__side { margin-bottom: 36px; }
    .vision h2, .services h2, .products h2, .method h2, .company h2 {
      font-size: clamp(35px, 9.8vw, 46px);
      letter-spacing: -0.055em;
      line-height: 1.14;
      text-wrap: balance;
    }
    .vision h2 br, .services h2 br, .products h2 br, .method h2 br, .company h2 br { display: none; }
    .vision h2.vision__headline {
      font-size: clamp(26px, 8.2vw, 40px);
    }
    .services h2.services__headline { font-size: clamp(28px, 8.5vw, 38px); }
    .services h2.services__headline br,
    .products h2.products__headline br { display: block; }
    .products h2.products__headline { font-size: clamp(24px, 7vw, 28px); line-height: 1.2; }
    .vision__body { display: block; margin-top: 68px; }
    .vision__orbit { width: 78vw; max-width: 330px; margin-inline: auto; }
    .vision__copy { margin-top: 52px; gap: 26px; }
    .vision__copy .lead-copy { font-size: 20px; }
    .vision__copy > p:not(.lead-copy) { font-size: 12px; line-height: 2.05; }
    .text-link { margin-top: 14px; }

    .services__heading { display: block; }
    .services__heading p { margin-top: 34px; padding: 0; font-size: 11px; }
    .service-list { margin-inline: calc(var(--gutter) * -1); border-inline: 0; }
    .service-card { display: block; }
    .service-card__top { min-height: 66px; padding-inline: 20px; }
    .service-card__visual { height: 330px; min-height: 0; border-right: 0; }
    .service-card__content { padding: 35px 20px 55px; }
    .service-card__content h3 { min-height: 0; font-size: 29px; }
    .service-card__content > p { min-height: 0; margin-top: 20px; font-size: 11px; }

    .products__heading { display: block; }
    .products__heading > div { margin-top: 34px; padding: 0; }
    .product-showcases { margin-top: 80px; gap: 70px; }
    .product-showcase { display: grid; min-height: 0; grid-template-columns: 1fr; }
    .product-showcase__media,
    .product-showcase--reverse .product-showcase__media {
      grid-column: 1;
      grid-row: 1;
      min-height: 520px;
      border: 0;
      border-bottom: 1px solid rgb(10 11 11 / 18%);
    }
    .product-showcase__media img { padding: 48px 10px 10px; }
    .product-showcase--reverse .product-showcase__copy { grid-column: 1; grid-row: 2; }
    .product-showcase__metric { right: 14px; bottom: 14px; min-width: 170px; padding: 13px 16px; }
    .product-showcase__copy { min-height: 610px; padding: 38px 20px 42px; }
    .product-showcase h3 { font-size: clamp(34px, 10vw, 40px); }
    .product-showcase__lead { font-size: clamp(19px, 5.4vw, 22px); }
    .product-showcase__description { font-size: 11px; }
    .product-link { margin-top: auto; }

    .method__heading { display: block; }
    .method__heading p { margin-top: 32px; }
    .method-steps { display: block; margin-inline: calc(var(--gutter) * -1); border-bottom: 0; }
    .method-steps li { min-height: 0; padding: 32px 20px 46px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
    .method-steps li:first-child { border-left: 0; }
    .method-steps strong { margin: 34px 0 24px; font-size: 86px; }
    .method-steps h3 { font-size: 22px; }

    .impact { display: block; min-height: 200svh; }
    .impact__image { position: sticky; top: 0; height: 100svh; min-height: 620px; }
    .impact__image::after { background: linear-gradient(0deg, rgb(10 11 11 / 98%), rgb(10 11 11 / 60%) 66%, rgb(10 11 11 / 38%)); }
    .impact__content {
      position: sticky;
      top: 0;
      height: 100svh;
      min-height: 620px;
      margin-top: -100svh;
      padding: 70px 20px 56px;
      background: linear-gradient(90deg, rgb(10 11 11 / 34%), rgb(10 11 11 / 82%));
    }
    .impact__content::after { top: 25%; right: 10px; height: 50%; }
    .impact .section-tag { margin-bottom: auto; }
    .impact__zero { font-size: clamp(120px, 42vw, 200px); }
    .impact h2 { margin-top: 38px; font-size: clamp(28px, 8.2vw, 34px); line-height: 1.14; text-wrap: balance; }

    .company__grid { display: block; }
    .company__statement > p { margin-bottom: 36px; }
    .company dl { margin-top: 70px; }
    .company dl > div { display: block; padding: 22px 0; }
    .company dd { margin-top: 7px; }

    .contact__top { padding-bottom: 18px; }
    .contact__link { padding: 76px 0 120px; font-size: clamp(36px, 10vw, 48px); line-height: 1.12; text-wrap: balance; }
    .contact__link i { right: 0; bottom: 14%; width: 72px; }
    .contact__bottom { display: block; }
    .contact__bottom .button { margin-top: 34px; }
    .contact__grid { background-size: 25vw 25vw; }

    .footer { display: block; min-height: 210px; padding-top: 50px; padding-bottom: 38px; }
    .footer > div:last-child { justify-content: space-between; margin-top: 64px; gap: 10px; }
  }

  @media (pointer: coarse) {
    .cursor { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
    .motion-ready [data-reveal] { opacity: 1; transform: none; }
    .hero__media { transform: none !important; }
    .impact { min-height: 900px; }
    .impact__image,
    .impact__content { position: relative; top: auto; height: 900px; margin-top: 0; }
    .impact__content::after { display: none; }
    .cursor { display: none; }
  }

  @media (prefers-reduced-motion: reduce) and (max-width: 760px) {
    .impact { min-height: 1240px; }
    .impact__image { height: 620px; }
    .impact__content { height: 620px; }
  }
}