:root {
	      --bg: #050505;
	      --bg-soft: #0b0d10;
	      --panel: rgba(15, 18, 21, 0.76);
	      --panel-soft: rgba(13, 16, 20, 0.66);
	      --panel-strong: #101317;
	      --panel-alt: #14181d;
	      --panel-gloss: rgba(255, 255, 255, 0.055);
	      --line: rgba(255, 255, 255, 0.08);
	      --line-strong: rgba(255, 255, 255, 0.14);
	      --text: #f7f4ef;
      --muted: #bcc3cd;
      --muted-soft: #8a94a1;
	      --accent: #d6ff46;
	      --accent-soft: rgba(214, 255, 70, 0.12);
	      --accent-2: #7ed9ff;
	      --shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
	      --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	      --shadow-elevated: 0 28px 84px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	      --radius-xl: 32px;
	      --radius-lg: 24px;
	      --radius-md: 18px;
      --container: min(1320px, calc(100vw - 48px));
      --container-wide: min(1440px, calc(100vw - 32px));
      --font-display: "Space Grotesk", sans-serif;
      --font-body: "Manrope", sans-serif;
    }

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

    html {
      scroll-behavior: auto;
      scrollbar-color: rgba(214, 255, 70, 0.5) rgba(255, 255, 255, 0.06);
    }

    body {
      font-family: var(--font-body);
      background:
        radial-gradient(circle at 15% 20%, rgba(126, 217, 255, 0.09), transparent 24%),
        radial-gradient(circle at 84% 16%, rgba(214, 255, 70, 0.12), transparent 24%),
        radial-gradient(circle at 54% 75%, rgba(255, 255, 255, 0.04), transparent 34%),
        var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
      opacity: 0.06;
      mix-blend-mode: soft-light;
      z-index: 20;
    }

    body.menu-open {
      overflow: hidden;
    }

    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button {
      cursor: none;
    }

    ::selection {
      color: #071003;
      background: var(--accent);
    }

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

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

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

    .page-shell {
      position: relative;
      isolation: isolate;
    }

    .space-backdrop {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.62;
      mix-blend-mode: screen;
    }

    .space-backdrop canvas {
      width: 100%;
      height: 100%;
      opacity: 0.92;
    }

    .space-asteroid-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .space-asteroid {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: var(--asteroid-width, 220px);
      height: auto;
      opacity: var(--asteroid-opacity, 0.74);
      will-change: transform, opacity;
      transform: translate3d(-200px, -200px, 0);
      filter:
        drop-shadow(0 0 36px rgba(255, 255, 255, 0.2))
        contrast(1.22)
        saturate(1.1)
        brightness(var(--asteroid-brightness, 1.12));
      user-select: none;
      -webkit-user-drag: none;
    }

    .ambient-orb {
      position: fixed;
      inset: auto;
      width: 28vw;
      aspect-ratio: 1;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      opacity: 0.18;
      z-index: 0;
    }

    .ambient-orb--left {
      left: -10vw;
      top: 12vh;
      background: rgba(214, 255, 70, 0.22);
    }

    .ambient-orb--right {
      right: -12vw;
      top: 52vh;
      background: rgba(126, 217, 255, 0.16);
    }

    .container {
      width: var(--container);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .container--wide {
      width: var(--container-wide);
    }

    .section {
      position: relative;
      padding: clamp(84px, 11vw, 152px) 0;
    }

	    .section-tag {
	      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.22em;
	      text-transform: uppercase;
	      color: var(--accent);
	      text-shadow: 0 0 18px rgba(214, 255, 70, 0.16);
	    }

    .section-tag::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
      opacity: 0.85;
    }

    .section-title {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1.01;
      font-size: clamp(2rem, 4.3vw, 4rem);
      max-width: 12ch;
      text-wrap: balance;
    }

	    .section-title span {
	      color: var(--accent);
	      background: linear-gradient(135deg, #f4ffc3 0%, var(--accent) 44%, #8fe8ff 140%);
	      -webkit-background-clip: text;
	      background-clip: text;
	      -webkit-text-fill-color: transparent;
	      text-shadow: 0 0 22px rgba(214, 255, 70, 0.1);
	    }

    .section-title--wide {
      max-width: 14ch;
    }

    .section-copy {
      max-width: 58ch;
      margin-top: 20px;
      color: var(--muted);
      font-size: 1.02rem;
      line-height: 1.75;
      text-wrap: pretty;
    }

    .eyebrow-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--muted);
      backdrop-filter: blur(14px);
    }

    .eyebrow-pill strong {
      color: var(--text);
      font-weight: 700;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

	    .button {
	      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 58px;
      padding: 0 24px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-family: var(--font-display);
	      font-size: 0.92rem;
	      font-weight: 600;
	      letter-spacing: 0.01em;
	      position: relative;
	      overflow: hidden;
	      isolation: isolate;
	      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
	      transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	      will-change: transform;
	    }

	    .button::before {
	      content: "";
	      position: absolute;
	      inset: 1px;
	      border-radius: inherit;
	      background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%);
	      opacity: 0.52;
	      transition: opacity 0.3s ease, transform 0.3s ease;
	      pointer-events: none;
	    }

	    .button > * {
	      position: relative;
	      z-index: 1;
	    }

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

	    .button:hover::before {
	      opacity: 0.82;
	      transform: translateY(-1px);
	    }

    .button--primary {
      background: linear-gradient(135deg, rgba(214, 255, 70, 1), rgba(214, 255, 70, 0.82));
      color: #071003;
      box-shadow: 0 18px 40px rgba(214, 255, 70, 0.2);
    }

    .button--primary:hover {
      box-shadow: 0 24px 54px rgba(214, 255, 70, 0.28);
    }

	    .button--secondary {
	      background:
	        linear-gradient(180deg, rgba(126, 217, 255, 0.16), rgba(255, 255, 255, 0.02)),
	        rgba(255, 255, 255, 0.04);
	      border-color: rgba(126, 217, 255, 0.2);
	      color: var(--text);
	      box-shadow: 0 18px 40px rgba(126, 217, 255, 0.12);
    }

    .button--secondary:hover {
      border-color: rgba(126, 217, 255, 0.34);
      box-shadow: 0 22px 52px rgba(126, 217, 255, 0.18);
    }

	    .button--ghost {
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
	        rgba(255, 255, 255, 0.03);
	      border-color: var(--line);
	      color: var(--text);
	    }

    .button--ghost:hover {
      border-color: var(--line-strong);
      background: rgba(255, 255, 255, 0.06);
    }

    .button svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .button:hover svg {
      transform: translateX(4px);
    }

    .cursor-dot,
    .cursor-ring {
      position: fixed;
      inset: 0 auto auto 0;
      pointer-events: none;
      z-index: 90;
      opacity: 0;
      transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
    }

    .cursor-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      mix-blend-mode: difference;
    }

    .cursor-ring {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(214, 255, 70, 0.45);
      transform: translate(-50%, -50%);
    }

    .site-nav {
      position: fixed;
      top: 18px;
      left: 0;
      width: 100%;
      z-index: 60;
      padding: 0 16px;
      pointer-events: none;
    }

    .nav-shell {
      width: min(1240px, calc(100vw - 32px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 14px 16px 14px 22px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      backdrop-filter: blur(0);
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
      pointer-events: auto;
    }

	    .site-nav.is-scrolled .nav-shell,
	    .site-nav.menu-active .nav-shell {
	      background: rgba(10, 12, 15, 0.78);
	      border-color: var(--line);
	      box-shadow: 0 20px 54px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	      backdrop-filter: blur(20px);
	    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -0.04em;
    }

    .brand-mark__dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 22px rgba(214, 255, 70, 0.45);
    }

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

    .nav-links a {
      position: relative;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.25s ease;
    }

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

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

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

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-cta {
      min-height: 48px;
      padding-inline: 20px;
      font-size: 0.82rem;
    }

    .nav-toggle {
      display: none;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
    }

    .nav-toggle span {
      width: 17px;
      height: 1.5px;
      border-radius: 999px;
      background: var(--text);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .site-nav.menu-active .nav-toggle span:nth-child(1) {
      transform: translateY(5.5px) rotate(45deg);
    }

    .site-nav.menu-active .nav-toggle span:nth-child(2) {
      opacity: 0;
    }

    .site-nav.menu-active .nav-toggle span:nth-child(3) {
      transform: translateY(-5.5px) rotate(-45deg);
    }

    .mobile-panel {
      position: fixed;
      inset: 86px 16px auto 16px;
      z-index: 58;
      padding: 18px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background: rgba(10, 12, 15, 0.96);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(-14px);
      pointer-events: none;
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

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

    .mobile-panel ul {
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .mobile-panel a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
      color: var(--text);
      font-family: var(--font-display);
      font-size: 0.94rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .mobile-panel .button {
      width: 100%;
      margin-top: 14px;
    }

    .hero {
      position: relative;
      min-height: 100svh;
      padding-top: 110px;
      overflow: clip;
      --mouse-x: 0;
      --mouse-y: 0;
    }

    .hero-stage {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-stage::before,
    .hero-stage::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.32;
    }

    .hero-stage::before {
      width: 32vw;
      aspect-ratio: 1;
      right: -10vw;
      top: 4vh;
      background: rgba(214, 255, 70, 0.22);
    }

    .hero-stage::after {
      width: 40vw;
      aspect-ratio: 1;
      left: -12vw;
      bottom: -10vh;
      background: rgba(126, 217, 255, 0.16);
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 85%);
      opacity: 0.22;
      pointer-events: none;
    }

    .hero-spiral {
      position: absolute;
      inset: 0;
      opacity: 0.9;
      pointer-events: none;
    }

    .hero-spiral canvas {
      width: 100%;
      height: 100%;
    }

    .spiral-portfolio {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .spiral-portfolio-notes {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .spiral-portfolio-mobile-notes {
      display: none;
    }

    .portfolio-sun {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      z-index: 4;
      pointer-events: auto;
      will-change: transform, opacity;
    }

    .portfolio-sun__link {
      position: absolute;
      top: 0;
      left: 0;
      width: 128px;
      height: 128px;
      display: block;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: auto;
      touch-action: manipulation;
      text-decoration: none;
      cursor: pointer;
    }

    .portfolio-sun__link:focus-visible {
      outline: 2px solid rgba(214, 255, 70, 0.72);
      outline-offset: 6px;
    }

    .portfolio-sun__core,
    .portfolio-sun__halo,
    .portfolio-sun__ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      pointer-events: none;
    }

    .portfolio-sun__core {
      inset: 24px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.98), rgba(255, 248, 188, 0.88) 14%, rgba(214, 255, 70, 0.92) 34%, rgba(255, 188, 70, 0.7) 62%, rgba(9, 10, 12, 0.06) 100%);
      box-shadow:
        0 0 28px rgba(214, 255, 70, 0.24),
        0 0 72px rgba(214, 255, 70, 0.24),
        0 0 120px rgba(255, 184, 76, 0.16);
    }

    .portfolio-sun__halo {
      background:
        radial-gradient(circle at center, rgba(214, 255, 70, 0.22) 0 26%, rgba(214, 255, 70, 0.12) 34%, rgba(126, 217, 255, 0.08) 46%, transparent 72%);
      filter: blur(8px);
      transform: scale(1.04);
      opacity: 0.88;
    }

    .portfolio-sun__ring {
      inset: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background:
        radial-gradient(circle at center, transparent 54%, rgba(255, 255, 255, 0.08) 74%, transparent 100%);
      mix-blend-mode: screen;
      opacity: 0.68;
    }

    .portfolio-sun__link:hover .portfolio-sun__core,
    .portfolio-sun__link:focus-visible .portfolio-sun__core {
      box-shadow:
        0 0 34px rgba(214, 255, 70, 0.3),
        0 0 86px rgba(214, 255, 70, 0.28),
        0 0 138px rgba(255, 184, 76, 0.2);
    }

    .portfolio-project {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      opacity: 0;
      z-index: 3;
      will-change: transform, opacity;
      transition: opacity 0.28s ease;
      --portfolio-accent: rgba(214, 255, 70, 0.88);
      --portfolio-accent-glow: rgba(214, 255, 70, 0.18);
      pointer-events: none;
    }

    .portfolio-project.is-visible {
      opacity: 1;
    }

    .portfolio-project__planet-link {
      position: absolute;
      top: 0;
      left: 0;
      width: 152px;
      height: 152px;
      display: block;
      border-radius: 50%;
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      transform: translate(-50%, -50%) scale(var(--planet-hit-scale, 1));
      z-index: 2;
      will-change: transform;
    }

    .portfolio-project__planet-link:focus-visible {
      outline: 2px solid rgba(214, 255, 70, 0.6);
      outline-offset: 4px;
    }

    .portfolio-project__planet {
      --planet-core: rgba(214, 255, 70, 0.8);
      --planet-secondary: rgba(126, 217, 255, 0.42);
      --planet-glow: rgba(214, 255, 70, 0.24);
      --planet-ring-color: rgba(214, 255, 70, 0.4);
      --planet-ring-glow: rgba(214, 255, 70, 0.18);
      --planet-ring-angle: 16deg;
      --planet-ring-opacity: 0;
      --planet-ozone-color: rgba(126, 217, 255, 0.3);
      --planet-ozone-glow: rgba(126, 217, 255, 0.16);
      --planet-cloud-color: rgba(255, 255, 255, 0.26);
      --planet-cloud-angle: 0deg;
      --planet-band-color: rgba(255, 255, 255, 0.18);
      --planet-speckle-color: rgba(255, 255, 255, 0.2);
      --planet-aurora-color: rgba(255, 255, 255, 0.22);
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      isolation: isolate;
      background:
        radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78) 12%, var(--planet-core) 34%, var(--planet-secondary) 62%, rgba(5, 7, 9, 0.18) 82%);
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow:
        0 0 28px var(--planet-glow),
        inset -6px -8px 12px rgba(6, 8, 11, 0.2),
        0 14px 30px rgba(0, 0, 0, 0.28);
      transform: translate(-50%, -50%) scale(var(--planet-scale, 1));
    }

    .portfolio-project__planet::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(100% + 22px);
      height: calc(100% + 10px);
      border-radius: 50%;
      border: 1.6px solid var(--planet-ring-color);
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--planet-ring-angle)) scaleY(0.42);
      box-shadow: 0 0 18px var(--planet-ring-glow);
      z-index: -1;
    }

    .portfolio-project__planet::after {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: linear-gradient(150deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      opacity: 0.7;
    }

    .portfolio-project__planet.is-ringed::before {
      opacity: var(--planet-ring-opacity, 0.92);
    }

    .portfolio-project__ozone,
    .portfolio-project__clouds {
      position: absolute;
      top: 50%;
      left: 50%;
      pointer-events: none;
    }

    .portfolio-project__ozone {
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.1), transparent 48%),
        radial-gradient(circle at center, transparent 54%, var(--planet-ozone-color) 72%, transparent 88%);
      box-shadow: 0 0 14px var(--planet-ozone-glow);
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.02);
      transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
      mix-blend-mode: screen;
    }

    .portfolio-project__planet.is-ozone .portfolio-project__ozone {
      opacity: 0.72;
      transform: translate(-50%, -50%) scale(1.04);
    }

    .portfolio-project__clouds {
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      border-radius: 50%;
      opacity: 0;
      transform: translate(-50%, -50%) rotate(var(--planet-cloud-angle));
      transition: opacity 0.28s ease;
      filter: blur(0.6px);
      background:
        radial-gradient(circle at 24% 34%, var(--planet-cloud-color) 0 12%, transparent 26%),
        radial-gradient(circle at 62% 26%, rgba(255, 255, 255, 0.24) 0 11%, transparent 24%),
        radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.18) 0 10%, transparent 24%),
        radial-gradient(circle at 38% 72%, rgba(255, 255, 255, 0.2) 0 9%, transparent 22%),
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.12) 0 8%, transparent 18%);
      clip-path: circle(50% at 50% 50%);
      animation: planetCloudDrift 12s linear infinite;
      mix-blend-mode: screen;
    }

    .portfolio-project__planet.is-clouded .portfolio-project__clouds {
      opacity: 0.94;
    }

    .portfolio-project__planet.is-banded::after {
      inset: 3px;
      background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 44%),
        linear-gradient(
          180deg,
          transparent 0 18%,
          var(--planet-band-color) 18% 28%,
          transparent 28% 40%,
          rgba(255, 255, 255, 0.12) 40% 52%,
          transparent 52% 64%,
          var(--planet-band-color) 64% 76%,
          transparent 76% 100%
        );
      border: 1px solid rgba(255, 255, 255, 0.12);
      opacity: 0.84;
    }

    .portfolio-project__planet.is-speckled::after {
      inset: 3px;
      background:
        radial-gradient(circle at 28% 34%, var(--planet-speckle-color) 0 10%, transparent 20%),
        radial-gradient(circle at 62% 26%, rgba(255, 255, 255, 0.18) 0 8%, transparent 18%),
        radial-gradient(circle at 72% 66%, rgba(255, 255, 255, 0.14) 0 9%, transparent 18%),
        radial-gradient(circle at 38% 72%, rgba(255, 255, 255, 0.12) 0 8%, transparent 18%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      opacity: 0.82;
    }

    .portfolio-project__planet.is-aurora::after {
      inset: 2px;
      background:
        radial-gradient(circle at 72% 24%, var(--planet-aurora-color) 0 22%, transparent 42%),
        radial-gradient(circle at 34% 72%, rgba(255, 255, 255, 0.16) 0 18%, transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 54%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      opacity: 0.86;
    }

    .portfolio-project__note {
      position: absolute;
      top: var(--note-y, 0px);
      left: var(--note-x, 0px);
      display: block;
      width: 228px;
      min-height: 140px;
      padding: 16px 18px 16px 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 18% 20%, var(--portfolio-note-tint, rgba(214, 255, 70, 0.1)), transparent 58%),
        linear-gradient(145deg, rgba(16, 21, 27, 0.9), rgba(8, 11, 16, 0.76));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 44px rgba(0, 0, 0, 0.24),
        0 0 28px var(--portfolio-accent-glow);
      backdrop-filter: blur(18px);
      overflow: hidden;
      isolation: isolate;
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      transform-origin: left center;
      transform: translate(-50%, -50%) scale(var(--note-scale, 0.9));
      opacity: var(--note-opacity, 0);
      transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
    }

    .portfolio-project__note--mobile {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      min-height: 0;
      padding: 14px 16px;
      border-radius: 20px;
      transform: none;
      transform-origin: center;
      opacity: 0;
      display: none;
      pointer-events: none;
    }

    .portfolio-project__note--mobile.is-visible {
      display: block;
      opacity: 1;
      pointer-events: auto;
    }

    .portfolio-project__note::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 92% 10%, var(--portfolio-accent-glow), transparent 56%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
      opacity: 0.26;
      transition: opacity 0.24s ease, transform 0.24s ease;
      pointer-events: none;
    }

    .portfolio-project__note > * {
      position: relative;
      z-index: 1;
    }

    .portfolio-project__note:hover,
    .portfolio-project__note:focus-visible {
      border-color: var(--portfolio-accent);
      background:
        radial-gradient(circle at 16% 18%, var(--portfolio-note-tint, rgba(214, 255, 70, 0.14)), transparent 56%),
        linear-gradient(145deg, rgba(18, 24, 31, 0.94), rgba(8, 11, 16, 0.82));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 54px rgba(0, 0, 0, 0.28),
        0 0 0 1px var(--portfolio-accent-glow),
        0 0 34px var(--portfolio-accent-glow);
      transform: translate(-50%, -50%) scale(calc(var(--note-scale, 0.9) + 0.03));
    }

    .portfolio-project__note:hover::before,
    .portfolio-project__note:focus-visible::before {
      opacity: 0.52;
      transform: scale(1.04);
    }

    .portfolio-project__note:focus-visible {
      outline: 2px solid var(--portfolio-accent);
      outline-offset: 4px;
    }

    .portfolio-project__arrow {
      position: relative;
      width: 126px;
      height: 18px;
      margin-left: auto;
      margin-bottom: 10px;
      animation: portfolioArrowNudge 1.2s ease-in-out infinite;
    }

    .portfolio-project__arrow::before,
    .portfolio-project__arrow::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .portfolio-project__arrow::before {
      left: 0;
      right: 18px;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--portfolio-accent));
      box-shadow: 0 0 18px var(--portfolio-accent-glow);
    }

    .portfolio-project__arrow::after {
      right: 0;
      width: 14px;
      height: 14px;
      border-top: 1px solid var(--portfolio-accent);
      border-right: 1px solid var(--portfolio-accent);
      transform: translateY(-50%) rotate(45deg);
      box-shadow: 0 0 14px var(--portfolio-accent-glow);
    }

    .portfolio-project__eyebrow {
      display: block;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--portfolio-accent);
    }

    .portfolio-project__hint {
      display: block;
      max-width: 23ch;
      margin-top: 8px;
      color: var(--text);
      font-size: 0.84rem;
      line-height: 1.44;
      text-wrap: pretty;
    }

    .portfolio-project__hint strong {
      display: inline-flex;
      align-items: center;
      padding: 0.16rem 0.46rem;
      margin: 0 0.08rem;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--portfolio-accent) 72%, rgba(255, 255, 255, 0.14));
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.08);
      color: var(--portfolio-accent);
      font-weight: 700;
      transition: border-color 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, transform 0.24s ease;
    }

    .portfolio-project__note:hover .portfolio-project__hint strong,
    .portfolio-project__note:focus-visible .portfolio-project__hint strong {
      border-color: var(--portfolio-accent);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--portfolio-accent) 18%, rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.02));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px var(--portfolio-accent-glow),
        0 0 16px var(--portfolio-accent-glow);
      transform: translateY(-1px);
    }

    @keyframes portfolioArrowNudge {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(8px);
      }
    }

    @keyframes planetCloudDrift {
      0% {
        transform: translate(-50%, -50%) rotate(var(--planet-cloud-angle));
      }
      100% {
        transform: translate(-50%, -50%) rotate(calc(var(--planet-cloud-angle) + 360deg));
      }
    }

    .hero-inner {
      width: var(--container-wide);
      margin: 0 auto;
      min-height: calc(100svh - 110px);
      padding: clamp(54px, 7vw, 92px) 0 clamp(54px, 8vw, 92px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
      gap: clamp(24px, 4vw, 56px);
      align-items: start;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    .hero-copy {
      max-width: 780px;
      pointer-events: auto;
    }

    .hero-copy *,
    .hero-side * {
      pointer-events: auto;
    }

    .hero-topline {
      margin-bottom: 24px;
    }

	    .hero-brand {
      font-family: var(--font-display);
      font-size: clamp(3.5rem, 10.5vw, 8.8rem);
      line-height: 0.93;
      letter-spacing: -0.045em;
      font-weight: 700;
      text-transform: uppercase;
      margin-left: 0;
	      text-shadow: 0 0 34px rgba(255, 255, 255, 0.08);
	      white-space: nowrap;
	    }

    .hero-brand > span {
      display: inline-block;
      padding-right: 0.16em;
    }

	    .hero-brand .highlight {
	      display: inline-block;
	      padding-right: 0.045em;
	      color: var(--accent);
	      background: linear-gradient(135deg, #f4ffc3 0%, var(--accent) 50%, #98e8ff 150%);
	      -webkit-background-clip: text;
	      background-clip: text;
	      -webkit-text-fill-color: transparent;
	      text-shadow: 0 0 34px rgba(214, 255, 70, 0.16);
	    }

    .hero-brand.split-line {
      overflow: visible;
      padding-top: 0.05em;
      padding-bottom: 0.12em;
    }

    .hero-headline {
      margin-top: 16px;
      display: grid;
      gap: 8px;
      font-family: var(--font-display);
      font-size: clamp(1.14rem, 2.05vw, 1.9rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
      max-width: 15ch;
      text-wrap: balance;
    }

    .hero-headline .hero-line:last-child {
      color: var(--accent);
    }

    .hero-subtitle {
      max-width: 560px;
      margin-top: 24px;
      color: var(--muted);
      font-size: clamp(0.98rem, 1.04vw, 1.06rem);
      line-height: 1.76;
      text-wrap: pretty;
    }

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

    .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 42px;
    }

	    .hero-metric {
	      padding: 18px 20px;
	      border-radius: 22px;
	      border: 1px solid var(--line);
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
	        rgba(255, 255, 255, 0.03);
	      backdrop-filter: blur(12px);
	      box-shadow: var(--shadow-card);
	    }

    .hero-metric strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.4rem;
      letter-spacing: -0.06em;
    }

    .hero-metric span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

	    .hero-experience {
      position: relative;
      margin-top: 18px;
      padding: 18px 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 12% 22%, rgba(214, 255, 70, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 72%),
        rgba(10, 13, 16, 0.76);
	      backdrop-filter: blur(14px);
	      box-shadow: var(--shadow-card);
	      overflow: hidden;
	    }

    .hero-experience::before {
      content: "";
      position: absolute;
      right: -36px;
      bottom: -42px;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: rgba(126, 217, 255, 0.12);
      filter: blur(34px);
      pointer-events: none;
    }

    .hero-experience strong {
      position: relative;
      z-index: 1;
      display: block;
      font-family: var(--font-display);
      font-size: 1.04rem;
      letter-spacing: -0.04em;
    }

    .hero-experience span {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.68;
      max-width: 74ch;
    }

    .hero-side {
      position: relative;
      display: grid;
      gap: 12px;
      align-self: end;
      justify-self: end;
      width: min(100%, 360px);
      padding-top: clamp(92px, 10vw, 148px);
      pointer-events: auto;
    }

    .hero-chip {
      justify-self: end;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(126, 217, 255, 0.18);
      background: rgba(10, 18, 24, 0.68);
      color: #d8f6ff;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    }

	    .hero-proof {
      position: relative;
      padding: 20px;
      border-radius: var(--radius-xl);
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
        rgba(9, 12, 15, 0.56);
	      box-shadow: var(--shadow-elevated);
	      overflow: hidden;
	      backdrop-filter: blur(14px);
	    }

    .hero-proof::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.14), transparent 28%),
        radial-gradient(circle at bottom left, rgba(126, 217, 255, 0.12), transparent 24%);
      pointer-events: none;
    }

    .proof-label {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .proof-label::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 18px rgba(214, 255, 70, 0.45);
    }

    .hero-proof h2 {
      margin-top: 12px;
      max-width: 10ch;
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 1.55vw, 1.62rem);
      line-height: 1.02;
      letter-spacing: -0.05em;
    }

    .hero-proof p {
      margin-top: 12px;
      color: var(--muted);
      line-height: 1.65;
      font-size: 0.88rem;
    }

    .proof-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }

	    .proof-card {
	      padding: 14px;
	      border-radius: 18px;
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
	        rgba(255, 255, 255, 0.04);
	      border: 1px solid rgba(255, 255, 255, 0.07);
	      box-shadow: var(--shadow-card);
	    }

	    .hero-metric,
	    .proof-card,
	    .marketing-channel,
	    .marketing-benefit,
	    .expertise-card,
	    .outreach-card,
	    .ui-panel,
	    .timeline-item,
	    .footer-column {
	      transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
	    }

    .proof-card strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: -0.05em;
      color: var(--text);
    }

    .proof-card span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .proof-bars {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .proof-bar {
      display: grid;
      gap: 8px;
    }

    .proof-bar__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-size: 0.8rem;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .proof-bar__track {
      height: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .proof-bar__track span {
      display: block;
      height: 100%;
      width: var(--bar-width, 50%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transform-origin: left center;
    }

    .impact-section {
      padding-top: clamp(104px, 12vw, 168px);
    }

    .impact-shell {
      position: relative;
      width: min(1180px, calc(100vw - 48px));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.78fr);
      gap: 18px;
      text-align: left;
      padding: 18px;
      border-radius: 34px 54px 42px 50px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(11, 14, 17, 0.7);
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: impactMorph 14s ease-in-out infinite;
    }

    .impact-shell::before {
      content: "";
      position: absolute;
      right: -60px;
      bottom: -60px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.16), transparent 72%);
      filter: blur(24px);
      opacity: 0.86;
      pointer-events: none;
    }

    .impact-shell::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 28px 42px 36px 24px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      opacity: 0.7;
      pointer-events: none;
      animation: impactMorphInner 14s ease-in-out infinite;
    }

    .impact-main,
    .impact-side {
      position: relative;
      z-index: 1;
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    }

    .impact-main {
      padding: clamp(28px, 4vw, 44px);
      border-radius: 28px 42px 36px 24px;
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(14, 18, 22, 0.82);
      overflow: hidden;
    }

    .impact-main::before {
      content: "";
      position: absolute;
      inset: auto 14% -30% auto;
      width: 280px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.14), transparent 70%);
      filter: blur(26px);
      pointer-events: none;
    }

    .impact-side {
      padding: clamp(24px, 3.1vw, 34px);
      border-radius: 26px 30px 28px 34px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
        rgba(13, 16, 19, 0.76);
      display: grid;
      align-content: space-between;
      gap: 24px;
    }

    .impact-copy {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.84rem, 3.6vw, 3.8rem);
      line-height: 1.02;
      letter-spacing: -0.055em;
      max-width: 14.2ch;
      margin: 0;
      text-wrap: balance;
    }

    .impact-copy .word-wrap {
      display: inline-block;
      overflow: hidden;
      vertical-align: top;
      margin-right: 0.16em;
      padding-bottom: 0.08em;
    }

    .impact-copy .word {
      display: inline-block;
      will-change: transform, opacity;
    }

    .impact-note {
      max-width: 40ch;
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.85;
      text-wrap: pretty;
    }

    .impact-strip {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 0;
    }

    .impact-item {
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.035);
    }

    .impact-item strong {
      font-family: var(--font-display);
      font-size: 1.18rem;
      letter-spacing: -0.04em;
    }

    .impact-item span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.55;
    }

    @keyframes impactMorph {
      0%, 100% {
        border-radius: 34px 54px 42px 50px;
      }
      50% {
        border-radius: 54px 34px 56px 28px;
      }
    }

    @keyframes impactMorphInner {
      0%, 100% {
        border-radius: 28px 42px 36px 24px;
      }
      50% {
        border-radius: 40px 24px 42px 32px;
      }
    }

    .services-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
      gap: clamp(24px, 5vw, 54px);
      align-items: start;
    }

    .services-intro {
      position: sticky;
      top: 110px;
    }

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

    .service-card {
      position: relative;
      min-height: 312px;
      border-radius: 28px;
      perspective: 1200px;
    }

	    .service-card__inner {
      position: relative;
      height: 100%;
      padding: 28px;
      border-radius: inherit;
      overflow: hidden;
      background:
        radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 40%), rgba(255, 255, 255, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60%),
        rgba(15, 18, 21, 0.82);
      border: 1px solid var(--line);
	      box-shadow: var(--shadow-elevated);
	      transform-style: preserve-3d;
	      transition: transform 0.32s ease, border-color 0.32s ease, background 0.32s ease;
	    }

    .service-card__inner::before {
      content: "";
      position: absolute;
      inset: auto -20% -40% 22%;
      height: 160px;
      border-radius: 50%;
      background: var(--card-glow, rgba(214, 255, 70, 0.18));
      filter: blur(50px);
      opacity: 0.6;
      pointer-events: none;
    }

    .service-card:hover .service-card__inner {
      border-color: rgba(255, 255, 255, 0.14);
    }

    .service-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .service-index {
      color: var(--muted-soft);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .service-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--accent);
      flex-shrink: 0;
    }

    .service-title {
      margin-top: 44px;
      font-family: var(--font-display);
      font-size: clamp(1.42rem, 2vw, 1.86rem);
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1.04;
      max-width: 12ch;
    }

    .service-description {
      margin-top: 16px;
      color: var(--muted);
      line-height: 1.78;
      font-size: 0.96rem;
      max-width: 34ch;
    }

    .service-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .service-tags span {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .marketing-layout {
      display: grid;
      gap: clamp(24px, 4vw, 34px);
    }

    .marketing-top {
      display: grid;
      grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.08fr);
      gap: clamp(34px, 5vw, 78px);
      align-items: start;
    }

    .marketing-copy-block {
      position: relative;
      z-index: 2;
      max-width: none;
      padding-top: 8px;
    }

    .marketing-copy-block .section-title {
      max-width: 16ch;
      font-size: clamp(2.35rem, 4vw, 4.2rem);
    }

    .marketing-copy-block .section-copy {
      max-width: 54ch;
    }

    .marketing-channel-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

	    .marketing-channel {
      position: relative;
      min-height: 136px;
      padding: 18px 18px 16px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 72%),
        rgba(12, 15, 18, 0.84);
	      box-shadow: var(--shadow-card);
	      overflow: hidden;
	    }

    .marketing-channel::before {
      content: "";
      position: absolute;
      inset: auto -12% -36% auto;
      width: 112px;
      aspect-ratio: 1;
      border-radius: 50%;
      filter: blur(30px);
      opacity: 0.72;
      pointer-events: none;
    }

    .marketing-channel strong {
      display: block;
      max-width: 8ch;
      font-family: var(--font-display);
      font-size: 1.3rem;
      letter-spacing: -0.05em;
      line-height: 1.02;
    }

    .marketing-channel p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.7;
    }

    .marketing-channel--google::before {
      background: rgba(214, 255, 70, 0.22);
    }

    .marketing-channel--facebook::before {
      background: rgba(126, 217, 255, 0.22);
    }

    .marketing-channel--social::before {
      background: rgba(255, 173, 120, 0.22);
    }

    .marketing-benefits {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-top: 0;
    }

	    .marketing-benefit {
      padding: 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 68%),
        rgba(12, 15, 18, 0.82);
	      box-shadow: var(--shadow-card);
	    }

    .marketing-benefit strong {
      display: block;
      max-width: 12ch;
      font-family: var(--font-display);
      font-size: 1.16rem;
      letter-spacing: -0.04em;
      line-height: 1.05;
    }

    .marketing-benefit p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.72;
    }

    .marketing-runline {
      max-width: 74ch;
      margin-top: 2px;
      color: rgba(247, 244, 239, 0.62);
      font-size: 0.94rem;
      line-height: 1.76;
    }

    .marketing-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-top: 28px;
    }

    .marketing-cta p {
      max-width: 34ch;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.72;
    }

	    .marketing-stage {
      position: relative;
      min-height: 728px;
      padding: 30px;
      border-radius: 36px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(10, 13, 16, 0.84);
	      box-shadow: var(--shadow-elevated);
	      overflow: hidden;
	    }

    .marketing-stage::before,
    .marketing-stage::after {
      content: "";
      position: absolute;
      pointer-events: none;
      filter: blur(18px);
      opacity: 0.82;
    }

    .marketing-stage::before {
      inset: auto auto -14% -10%;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.18), transparent 70%);
    }

    .marketing-stage::after {
      inset: -8% -8% auto auto;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.18), transparent 72%);
    }

    .marketing-window {
      position: relative;
      height: 100%;
      padding: 24px;
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.07);
      overflow: hidden;
    }

    .marketing-window__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .marketing-window__pill {
      min-width: 0;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .marketing-scene {
      position: relative;
      min-height: 600px;
      padding-top: 28px;
      overflow: hidden;
    }

    .marketing-grid-lines {
      position: absolute;
      inset: 18px 0 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 100% 76px, 76px 100%;
      mask-image: radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.9), transparent 82%);
      opacity: 0.18;
      pointer-events: none;
    }

    .marketing-orbit {
      position: absolute;
      left: 50%;
      top: 46%;
      border-radius: 50%;
      border: 1px solid rgba(214, 255, 70, 0.16);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .marketing-orbit--one {
      width: 420px;
      height: 286px;
      animation-duration: 18s;
    }

    .marketing-orbit--two {
      width: 590px;
      height: 396px;
      border-color: rgba(126, 217, 255, 0.14);
      opacity: 0.46;
      animation-duration: 26s;
      animation-direction: reverse;
    }

    .marketing-core {
      position: absolute;
      left: 50%;
      top: 47%;
      z-index: 1;
      width: 196px;
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34) 14%, rgba(214, 255, 70, 0.92) 34%, rgba(81, 118, 34, 0.94) 72%, rgba(8, 14, 10, 0.98));
      box-shadow:
        0 0 0 12px rgba(214, 255, 70, 0.06),
        0 38px 90px rgba(214, 255, 70, 0.2);
    }

    .marketing-core::before,
    .marketing-core::after {
      content: "";
      position: absolute;
      inset: 10%;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .marketing-core::after {
      inset: -10%;
      border-color: rgba(214, 255, 70, 0.18);
      opacity: 0.7;
    }

    .marketing-core__badge {
      position: absolute;
      left: 50%;
      bottom: -22px;
      translate: -50% 0;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(214, 255, 70, 0.16);
      background: rgba(9, 13, 16, 0.88);
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .marketing-token {
      position: absolute;
      z-index: 3;
      width: 166px;
      min-height: 96px;
      padding: 15px 17px;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      backdrop-filter: blur(10px);
      pointer-events: none;
    }

    .marketing-token::before {
      content: "";
      position: absolute;
      inset: 1px 1px auto;
      height: 46%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent);
      opacity: 0.86;
      pointer-events: none;
    }

    .marketing-token strong,
    .marketing-token span {
      position: relative;
      z-index: 1;
      display: block;
    }

    .marketing-token strong {
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: -0.05em;
      line-height: 1.03;
    }

    .marketing-token span {
      margin-top: 7px;
      color: rgba(247, 244, 239, 0.74);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .marketing-token--google {
      left: 5%;
      top: 9%;
      rotate: -7deg;
      background: linear-gradient(180deg, rgba(214, 255, 70, 0.28), rgba(34, 45, 10, 0.92));
      color: #f4ffd6;
    }

    .marketing-token--meta {
      right: 7%;
      top: 12%;
      rotate: 8deg;
      background: linear-gradient(180deg, rgba(126, 217, 255, 0.28), rgba(10, 22, 34, 0.92));
      color: #e5f7ff;
    }

    .marketing-kpi {
      position: absolute;
      z-index: 4;
      max-width: 208px;
      padding: 17px 18px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 16, 0.88);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    }

    .marketing-kpi strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.04rem;
      letter-spacing: -0.04em;
    }

    .marketing-kpi span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.65;
    }

    .marketing-kpi--one {
      top: 42%;
      right: 6%;
      max-width: 192px;
    }

    .marketing-symbol-box {
      position: absolute;
      z-index: 2;
      left: 5%;
      top: auto;
      bottom: 12%;
      width: min(214px, 32%);
      padding: 16px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 65%),
        rgba(12, 15, 18, 0.9);
      box-shadow: 0 20px 54px rgba(0, 0, 0, 0.22);
    }

    .marketing-symbol-box__head {
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .marketing-symbols {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .marketing-symbol {
      position: relative;
      width: 58px;
      height: 58px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .marketing-symbol::before {
      content: "";
      position: absolute;
      inset: 2px 2px auto;
      height: 48%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent);
      opacity: 0.9;
      pointer-events: none;
    }

    .marketing-symbol svg {
      position: relative;
      z-index: 1;
      width: 25px;
      height: 25px;
    }

    .marketing-symbol--search {
      background: linear-gradient(180deg, rgba(214, 255, 70, 0.24), rgba(38, 48, 11, 0.94));
      color: #efffc4;
    }

    .marketing-symbol--ads {
      background: linear-gradient(180deg, rgba(126, 217, 255, 0.24), rgba(10, 25, 38, 0.94));
      color: #e4f7ff;
    }

    .marketing-symbol--lead {
      background: linear-gradient(180deg, rgba(255, 173, 120, 0.28), rgba(42, 21, 12, 0.94));
      color: #fff1df;
    }

    .marketing-symbol-box__copy {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.62;
    }

    .expertise-section {
      overflow: hidden;
    }

    .expertise-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.02fr);
      gap: clamp(34px, 5vw, 80px);
      align-items: center;
    }

    .expertise-copy {
      position: relative;
      z-index: 2;
      padding-top: 8px;
    }

    .expertise-copy .section-title {
      max-width: 15ch;
      font-size: clamp(2.3rem, 4vw, 4rem);
    }

    .expertise-copy .section-copy {
      max-width: 56ch;
    }

    .expertise-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .expertise-pills span {
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .expertise-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 28px;
    }

    .expertise-card {
      position: relative;
      min-height: 152px;
      padding: 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 72%),
        rgba(12, 15, 18, 0.84);
      box-shadow: 0 20px 52px rgba(0, 0, 0, 0.18);
      overflow: hidden;
    }

    .expertise-card::before {
      content: "";
      position: absolute;
      inset: auto -12% -34% auto;
      width: 118px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(214, 255, 70, 0.16);
      filter: blur(34px);
      opacity: 0.82;
      pointer-events: none;
    }

    .expertise-section--signature .expertise-card::before {
      background: rgba(126, 217, 255, 0.18);
    }

    .expertise-card strong {
      display: block;
      max-width: 13ch;
      font-family: var(--font-display);
      font-size: 1.14rem;
      letter-spacing: -0.04em;
      line-height: 1.05;
    }

    .expertise-card p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.72;
    }

    .expertise-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 18px;
      margin-top: 28px;
    }

    .expertise-cta p {
      max-width: 36ch;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.72;
    }

    .expertise-stage {
      position: relative;
      min-height: 740px;
      padding: 30px;
      border-radius: 36px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(10, 13, 16, 0.84);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .expertise-stage::before,
    .expertise-stage::after {
      content: "";
      position: absolute;
      pointer-events: none;
      filter: blur(20px);
      opacity: 0.82;
    }

    .expertise-stage--crm::before {
      inset: auto auto -16% -10%;
      width: 320px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.2), transparent 70%);
    }

    .expertise-stage--crm::after {
      inset: -10% -8% auto auto;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.16), transparent 72%);
    }

    .expertise-stage--esign::before {
      inset: auto auto -14% -8%;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.18), transparent 72%);
    }

    .expertise-stage--esign::after {
      inset: -10% -6% auto auto;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.16), transparent 72%);
    }

    .expertise-window {
      position: relative;
      height: 100%;
      padding: 24px;
      border-radius: 32px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.07);
      overflow: hidden;
    }

    .expertise-window__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    .expertise-window__pill {
      min-width: 0;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .expertise-scene {
      position: relative;
      min-height: 620px;
      padding-top: 28px;
      overflow: hidden;
    }

    .expertise-grid-lines {
      position: absolute;
      inset: 18px 0 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 100% 74px, 74px 100%;
      mask-image: radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0.92), transparent 82%);
      opacity: 0.24;
      pointer-events: none;
    }

    .crm-scene,
    .esign-scene,
    .email-scene,
    .sms-scene {
      isolation: isolate;
    }

    .crm-scene::before,
    .crm-scene::after,
    .esign-scene::before,
    .email-scene::before,
    .sms-scene::before {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }

    .crm-scene::before {
      left: 12%;
      top: 16%;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.18), transparent 68%);
      filter: blur(12px);
      opacity: 0.78;
    }

    .crm-scene::after {
      right: 3%;
      bottom: 6%;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.14), transparent 72%);
      filter: blur(16px);
      opacity: 0.62;
    }

    .crm-orbit {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
      z-index: 0;
    }

    .crm-orbit--one {
      left: 16%;
      top: 18%;
      width: 358px;
      height: 232px;
      rotate: -12deg;
      border-color: rgba(214, 255, 70, 0.12);
    }

    .crm-orbit--two {
      left: 29%;
      top: 43%;
      width: 276px;
      height: 172px;
      rotate: 8deg;
      border-color: rgba(126, 217, 255, 0.1);
      opacity: 0.78;
    }

    .crm-gear {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.78), transparent 16%),
        radial-gradient(circle, transparent 0 28%, rgba(8, 12, 15, 0.95) 29% 40%, transparent 41%),
        repeating-conic-gradient(from 0deg, rgba(240, 255, 192, 0.9) 0deg 8deg, rgba(120, 154, 33, 0.92) 8deg 18deg, rgba(65, 88, 16, 0.94) 18deg 26deg, rgba(172, 210, 72, 0.9) 26deg 34deg);
      box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.24),
        0 0 42px rgba(214, 255, 70, 0.14);
      z-index: 1;
    }

    .crm-gear::before,
    .crm-gear::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }

    .crm-gear::before {
      inset: 11%;
      border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .crm-gear::after {
      inset: 36%;
      background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.26), rgba(8, 11, 14, 0.94));
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .crm-gear--one {
      width: 252px;
      left: 16%;
      top: 20%;
      animation-duration: 18s;
    }

    .crm-gear--two {
      width: 156px;
      right: 10%;
      top: 22%;
      animation-duration: 14s;
      animation-direction: reverse;
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.74), transparent 16%),
        radial-gradient(circle, transparent 0 28%, rgba(8, 12, 15, 0.95) 29% 40%, transparent 41%),
        repeating-conic-gradient(from 0deg, rgba(229, 248, 255, 0.88) 0deg 8deg, rgba(88, 138, 170, 0.92) 8deg 18deg, rgba(25, 52, 76, 0.94) 18deg 26deg, rgba(130, 194, 230, 0.84) 26deg 34deg);
    }

    .crm-gear--three {
      width: 112px;
      left: 43%;
      bottom: 12%;
      animation-duration: 12s;
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.7), transparent 16%),
        radial-gradient(circle, transparent 0 28%, rgba(8, 12, 15, 0.95) 29% 40%, transparent 41%),
        repeating-conic-gradient(from 0deg, rgba(255, 234, 219, 0.86) 0deg 8deg, rgba(171, 115, 68, 0.92) 8deg 18deg, rgba(78, 38, 17, 0.94) 18deg 26deg, rgba(230, 164, 116, 0.84) 26deg 34deg);
    }

    .crm-track {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(214, 255, 70, 0.46), rgba(126, 217, 255, 0.1));
      opacity: 0.6;
      pointer-events: none;
    }

    .crm-track--one {
      left: 45%;
      top: 31%;
      width: 220px;
      rotate: -28deg;
    }

    .crm-track--two {
      left: 18%;
      bottom: 24%;
      width: 286px;
      rotate: 9deg;
    }

    .crm-node {
      position: absolute;
      z-index: 3;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.86);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    }

    .crm-node--one {
      left: 10%;
      top: 9%;
    }

    .crm-node--two {
      right: 7%;
      top: 14%;
    }

    .crm-node--three {
      left: 42%;
      bottom: 4%;
    }

    .crm-hub,
    .crm-panel,
    .esign-vault,
    .esign-proof,
    .esign-document {
      position: absolute;
      z-index: 4;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 66%),
        rgba(9, 12, 16, 0.88);
      box-shadow: 0 20px 52px rgba(0, 0, 0, 0.2);
    }

    .crm-hub {
      left: 41%;
      bottom: 10%;
      width: 182px;
      padding: 17px;
    }

    .crm-panel {
      width: 182px;
      padding: 16px 16px 14px;
    }

    .crm-panel--one {
      right: 5%;
      top: 38%;
      width: 184px;
    }

    .crm-panel--two {
      left: 4%;
      bottom: 16%;
      width: 184px;
    }

    .crm-hub strong,
    .crm-panel strong,
    .esign-vault strong,
    .esign-proof strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.02rem;
      letter-spacing: -0.04em;
    }

    .crm-hub span,
    .crm-panel span,
    .esign-vault span,
    .esign-proof span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.68;
    }

    .esign-document {
      left: 6%;
      bottom: 12%;
      width: 198px;
      padding: 16px;
      transform: rotate(-4deg);
    }

    .esign-document__badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .esign-document__line {
      display: block;
      height: 10px;
      margin-top: 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
    }

    .esign-document__line--short {
      width: 68%;
    }

    .esign-script {
      position: absolute;
      left: 5%;
      top: 16%;
      z-index: 2;
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 4.8vw, 4.15rem);
      font-style: italic;
      font-weight: 700;
      letter-spacing: -0.08em;
      line-height: 0.92;
      color: rgba(247, 244, 239, 0.92);
      transform: rotate(-7deg) skewX(-10deg);
      text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16),
        0 4px 0 rgba(126, 217, 255, 0.16),
        0 18px 28px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(214, 255, 70, 0.12);
      pointer-events: none;
    }

    .esign-scene::before {
      left: 8%;
      top: 10%;
      width: 340px;
      height: 210px;
      background: radial-gradient(circle at 30% 40%, rgba(126, 217, 255, 0.16), transparent 66%);
      filter: blur(10px);
      opacity: 0.72;
    }

    .esign-transfer {
      position: absolute;
      left: 36%;
      top: 31%;
      width: 34%;
      height: 176px;
      z-index: 1;
      pointer-events: none;
    }

    .esign-transfer__line {
      position: absolute;
      left: 0;
      top: 54%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, rgba(126, 217, 255, 0), rgba(126, 217, 255, 0.84) 20%, rgba(214, 255, 70, 0.88) 64%, rgba(214, 255, 70, 0));
      transform: rotate(-18deg);
      transform-origin: left center;
      box-shadow: 0 0 24px rgba(126, 217, 255, 0.28);
    }

    .esign-transfer__pulse {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(126, 217, 255, 0.72) 46%, rgba(214, 255, 70, 0.4) 78%, transparent 100%);
      box-shadow: 0 0 26px rgba(126, 217, 255, 0.34);
      animation: transferPulse 3.8s ease-in-out infinite;
    }

    .esign-vault {
      right: 9%;
      top: 29%;
      width: 202px;
      padding: 18px;
    }

    .esign-vault__lock {
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(214, 255, 70, 0.18), rgba(255, 255, 255, 0.03)),
        rgba(9, 12, 16, 0.9);
      border: 1px solid rgba(214, 255, 70, 0.14);
      color: var(--accent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .esign-vault__lock svg {
      width: 26px;
      height: 26px;
    }

    .esign-vault strong {
      margin-top: 16px;
    }

    .esign-proof {
      right: 11%;
      bottom: 15%;
      width: 206px;
      padding: 18px;
    }

    .esign-seal {
      position: absolute;
      left: 46%;
      top: 50%;
      z-index: 3;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(126, 217, 255, 0.22);
      background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), rgba(126, 217, 255, 0.54) 36%, rgba(9, 12, 16, 0.88) 74%);
      box-shadow:
        0 0 30px rgba(126, 217, 255, 0.22),
        0 18px 24px rgba(0, 0, 0, 0.22);
      pointer-events: none;
    }

    .esign-seal::before {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 50%;
      border: 1px solid rgba(214, 255, 70, 0.24);
    }

    .expertise-stage--data::before {
      inset: auto auto -14% -10%;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.18), transparent 72%);
    }

    .expertise-stage--data::after {
      inset: -12% -8% auto auto;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.16), transparent 72%);
    }

    .expertise-stage--email::before {
      inset: auto auto -16% -8%;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(255, 173, 120, 0.16), transparent 72%);
    }

    .expertise-stage--email::after {
      inset: -10% -6% auto auto;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.16), transparent 72%);
    }

    .expertise-stage--sms::before {
      inset: auto auto -18% -8%;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.16), transparent 72%);
    }

    .expertise-stage--sms::after {
      inset: -10% -6% auto auto;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.16), transparent 72%);
    }

    .expertise-stage--seo::before {
      inset: auto auto -16% -10%;
      width: 320px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.18), transparent 70%);
    }

    .expertise-stage--seo::after {
      inset: -12% -8% auto auto;
      width: 300px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.18), transparent 72%);
    }

    .expertise-stage--security::before {
      inset: auto auto -18% -10%;
      width: 320px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.18), transparent 72%);
    }

    .expertise-stage--security::after {
      inset: -10% -6% auto auto;
      width: 280px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.14), transparent 72%);
    }

    .outreach-scene {
      position: relative;
      min-height: 620px;
      padding-top: 18px;
      display: grid;
      gap: 18px;
      isolation: isolate;
    }

    .outreach-scene > * {
      position: relative;
      z-index: 1;
    }

	    .outreach-card,
	    .sms-phone,
	    .data-sphere {
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 66%),
        rgba(9, 12, 16, 0.88);
	      box-shadow: var(--shadow-card);
	    }

    .outreach-card {
      padding: 20px;
    }

    .outreach-card strong,
    .sms-card strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.02rem;
      letter-spacing: -0.04em;
    }

    .outreach-card span,
    .sms-card span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.68;
    }

    .outreach-list {
      display: grid;
      gap: 12px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    .outreach-list li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.68;
    }

    .outreach-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.55rem;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 16px rgba(214, 255, 70, 0.28);
    }

    .flow-pill-row,
    .data-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .flow-pill-row span,
    .data-chip-row span {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.76);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-top: 0;
    }

    .data-scene {
      grid-template-columns: 0.88fr 1.12fr;
      grid-template-areas:
        "sphere filters"
        "matrix coverage"
        "matrix volume"
        "quality quality";
      align-items: stretch;
    }

    .data-sphere {
      grid-area: sphere;
      min-height: 184px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 42%, rgba(214, 255, 70, 0.44), rgba(58, 82, 16, 0.74) 38%, rgba(8, 12, 16, 0.94) 72%);
    }

    .data-sphere::before,
    .data-sphere::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      inset: 12%;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .data-sphere::after {
      inset: 24%;
      border-color: rgba(126, 217, 255, 0.16);
    }

    .data-sphere span {
      position: relative;
      z-index: 1;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.66);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .data-card--filters {
      grid-area: filters;
    }

    .data-card--matrix {
      grid-area: matrix;
    }

    .data-card--coverage {
      grid-area: coverage;
    }

    .data-card--volume {
      grid-area: volume;
    }

    .data-card--quality {
      grid-area: quality;
    }

    .email-scene {
      grid-template-columns: 1.08fr 0.92fr;
      grid-template-areas:
        "composer signal"
        "composer sequence"
        "reply sequence";
      align-items: stretch;
    }

    .email-scene::before {
      left: 30%;
      top: 24%;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(126, 217, 255, 0.16), transparent 68%);
      filter: blur(12px);
      opacity: 0.74;
    }

    .email-envelope {
      position: absolute;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background:
        linear-gradient(180deg, rgba(126, 217, 255, 0.14), transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 78%),
        rgba(11, 14, 18, 0.9);
      box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.24),
        0 0 32px rgba(126, 217, 255, 0.12);
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    .email-envelope::before,
    .email-envelope::after {
      content: "";
      position: absolute;
    }

    .email-envelope::before {
      inset: 12px 14px auto;
      height: 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.18);
      box-shadow:
        0 18px 0 rgba(255, 255, 255, 0.1),
        0 36px 0 rgba(255, 255, 255, 0.08);
    }

    .email-envelope::after {
      left: 10%;
      right: 10%;
      bottom: 12%;
      height: 54%;
      clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(126, 217, 255, 0.04)),
        rgba(255, 255, 255, 0.04);
      border-radius: 0 0 18px 18px;
    }

    .email-envelope--one {
      left: 37%;
      top: 36%;
      width: 170px;
      height: 118px;
      transform: rotate(-11deg);
    }

    .email-envelope--two {
      right: 9%;
      top: 50%;
      width: 126px;
      height: 88px;
      transform: rotate(13deg);
      opacity: 0.86;
    }

    .email-thread {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(126, 217, 255, 0.6), rgba(214, 255, 70, 0.14));
      transform-origin: left center;
      opacity: 0.76;
      z-index: 0;
      pointer-events: none;
    }

    .email-thread::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(126, 217, 255, 0.72) 44%, rgba(214, 255, 70, 0.16));
      box-shadow: 0 0 18px rgba(126, 217, 255, 0.24);
    }

    .email-thread--one {
      left: 44%;
      top: 33%;
      width: 178px;
      rotate: -18deg;
    }

    .email-thread--two {
      left: 54%;
      top: 64%;
      width: 124px;
      rotate: 17deg;
    }

    .email-card--composer {
      grid-area: composer;
      min-height: 314px;
      padding-bottom: 118px;
    }

    .email-card--composer::before {
      content: "";
      position: absolute;
      inset: auto 18px 18px;
      height: 82px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(126, 217, 255, 0.12), transparent 50%),
        rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .email-card--composer::after {
      content: "";
      position: absolute;
      right: 28px;
      bottom: 40px;
      width: 54px;
      height: 54px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(214, 255, 70, 0.18), rgba(255, 255, 255, 0.03)),
        rgba(12, 16, 20, 0.92);
      border: 1px solid rgba(214, 255, 70, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .email-card--signal {
      grid-area: signal;
      min-height: 176px;
      padding-bottom: 90px;
      overflow: hidden;
    }

    .email-card--signal::before,
    .email-card--signal::after,
    .email-card--sequence::before,
    .email-card--sequence::after,
    .email-card--reply::before,
    .email-card--reply::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .email-card--signal::before {
      left: 20px;
      right: 20px;
      bottom: 22px;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(126, 217, 255, 0.12), rgba(126, 217, 255, 0.7) 42%, rgba(214, 255, 70, 0.7) 76%, rgba(255, 255, 255, 0.12));
    }

    .email-card--signal::after {
      right: 24px;
      bottom: 40px;
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.88), rgba(126, 217, 255, 0.52) 34%, rgba(14, 24, 32, 0.76) 72%);
      opacity: 0.9;
    }

    .email-card--sequence {
      grid-area: sequence;
      min-height: 238px;
      padding-bottom: 70px;
      overflow: hidden;
    }

    .email-card--sequence::before {
      left: 24px;
      right: 24px;
      bottom: 30px;
      height: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(214, 255, 70, 0.66), rgba(126, 217, 255, 0.24));
    }

    .email-card--sequence::after {
      left: 26px;
      right: 26px;
      bottom: 22px;
      height: 16px;
      background-image:
        radial-gradient(circle, rgba(214, 255, 70, 0.94) 0 42%, transparent 44%),
        radial-gradient(circle, rgba(214, 255, 70, 0.78) 0 40%, transparent 42%),
        radial-gradient(circle, rgba(126, 217, 255, 0.78) 0 40%, transparent 42%),
        radial-gradient(circle, rgba(255, 173, 120, 0.82) 0 40%, transparent 42%);
      background-size: 16px 16px;
      background-position: left center, 33% center, 66% center, right center;
      background-repeat: no-repeat;
    }

    .email-card--reply {
      grid-area: reply;
      min-height: 170px;
      overflow: hidden;
    }

    .email-card--reply::before {
      left: 22px;
      right: 22px;
      bottom: 22px;
      height: 1px;
      background: linear-gradient(90deg, rgba(126, 217, 255, 0.14), rgba(214, 255, 70, 0.46), rgba(255, 255, 255, 0.06));
    }

    .email-card--reply::after {
      left: 22px;
      bottom: 16px;
      width: 120px;
      height: 14px;
      background-image:
        radial-gradient(circle, rgba(214, 255, 70, 0.88) 0 42%, transparent 44%),
        radial-gradient(circle, rgba(126, 217, 255, 0.72) 0 42%, transparent 44%),
        radial-gradient(circle, rgba(255, 173, 120, 0.74) 0 42%, transparent 44%);
      background-size: 14px 14px;
      background-position: left center, 50px center, 100px center;
      background-repeat: no-repeat;
    }

    .email-orb {
      position: absolute;
      right: 18%;
      top: 18%;
      width: 138px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), rgba(126, 217, 255, 0.64) 30%, rgba(18, 34, 46, 0.78) 72%, rgba(9, 12, 16, 0.08));
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24);
      z-index: 0;
      opacity: 0.78;
      pointer-events: none;
    }

    .sms-scene {
      grid-template-columns: 0.82fr 1.18fr;
      grid-template-areas:
        "phone trust"
        "phone timing"
        "phone landing";
      align-items: stretch;
    }

    .sms-scene::before {
      left: 5%;
      top: 14%;
      width: 248px;
      height: 248px;
      border-radius: 32px;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.14), transparent 72%);
      filter: blur(10px);
      opacity: 0.76;
    }

    .sms-phone {
      grid-area: phone;
      position: relative;
      padding: 16px;
      min-height: 360px;
      display: flex;
      align-items: stretch;
      justify-content: center;
      overflow: visible;
    }

    .sms-phone::before,
    .sms-phone::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .sms-phone::before {
      inset: -10px 10px 10px;
      border-radius: 34px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(214, 255, 70, 0.04) 60%, rgba(9, 12, 16, 0.22));
      border: 1px solid rgba(255, 255, 255, 0.05);
      transform: rotate(-4deg);
      z-index: -1;
    }

    .sms-phone::after {
      left: -4px;
      top: 96px;
      width: 4px;
      height: 58px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(214, 255, 70, 0.16));
      opacity: 0.72;
    }

    .sms-phone__screen {
      position: relative;
      width: 100%;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 70%),
        rgba(12, 16, 20, 0.9);
      padding: 20px 16px;
      display: grid;
      align-content: center;
      gap: 12px;
    }

    .sms-phone__screen::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      pointer-events: none;
    }

    .sms-bubble {
      max-width: 88%;
      padding: 12px 14px;
      border-radius: 18px;
      font-size: 0.84rem;
      line-height: 1.55;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
    }

    .sms-bubble--in {
      justify-self: start;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: rgba(247, 244, 239, 0.82);
    }

    .sms-bubble--out {
      justify-self: end;
      background: rgba(214, 255, 70, 0.14);
      border: 1px solid rgba(214, 255, 70, 0.24);
      color: var(--text);
    }

    .sms-card--trust {
      grid-area: trust;
    }

    .sms-card--timing {
      grid-area: timing;
    }

    .sms-card--landing {
      grid-area: landing;
    }

    .sms-pulse {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(214, 255, 70, 0.68) 42%, rgba(214, 255, 70, 0.04) 100%);
      box-shadow: 0 0 22px rgba(214, 255, 70, 0.34);
      z-index: 0;
      pointer-events: none;
    }

    .sms-pulse--one {
      right: 22%;
      top: 18%;
    }

    .sms-pulse--two {
      right: 12%;
      bottom: 16%;
    }

    .seo-scene,
    .security-scene {
      align-items: stretch;
    }

    .seo-scene {
      grid-template-columns: 1.04fr 0.96fr;
      grid-template-areas:
        "search search"
        "core ai"
        "authority metrics";
    }

    .seo-card--search {
      grid-area: search;
      min-height: 202px;
    }

    .seo-searchbar {
      display: flex;
      align-items: center;
      min-height: 58px;
      margin-top: 16px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.88rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .seo-results {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }

    .seo-results span {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 44px;
      margin-top: 0;
      padding: 0 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .seo-results em {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 30px;
      border-radius: 999px;
      background: rgba(214, 255, 70, 0.12);
      border: 1px solid rgba(214, 255, 70, 0.18);
      color: var(--accent);
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .seo-core {
      grid-area: core;
      position: relative;
      min-height: 274px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 50% 42%, rgba(214, 255, 70, 0.52), rgba(71, 98, 22, 0.82) 38%, rgba(10, 13, 16, 0.94) 72%);
      box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }

    .seo-core::before,
    .seo-core::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .seo-core::before {
      inset: 16%;
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .seo-core::after {
      inset: 26%;
      border: 1px solid rgba(126, 217, 255, 0.18);
      box-shadow: 0 0 24px rgba(126, 217, 255, 0.12);
    }

    .seo-core span {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.78);
      color: rgba(247, 244, 239, 0.9);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .seo-card--ai {
      grid-area: ai;
      min-height: 174px;
    }

    .seo-card--authority {
      grid-area: authority;
      min-height: 178px;
    }

    .seo-card--metrics {
      grid-area: metrics;
      min-height: 178px;
    }

    .seo-trace {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(214, 255, 70, 0.56), rgba(126, 217, 255, 0.14));
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
    }

    .seo-trace::after {
      content: "";
      position: absolute;
      right: -2px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(214, 255, 70, 0.74) 44%, rgba(126, 217, 255, 0.16));
      box-shadow: 0 0 18px rgba(214, 255, 70, 0.24);
    }

    .seo-trace--one {
      left: 34%;
      top: 46%;
      width: 180px;
      rotate: -18deg;
    }

    .seo-trace--two {
      left: 49%;
      top: 64%;
      width: 138px;
      rotate: 15deg;
    }

    .security-scene {
      grid-template-columns: 0.98fr 1.02fr;
      grid-template-areas:
        "core auth"
        "core backup"
        "monitor response";
    }

    .security-core {
      grid-area: core;
      position: relative;
      min-height: 360px;
      display: grid;
      place-items: center;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        radial-gradient(circle at 50% 38%, rgba(126, 217, 255, 0.22), transparent 34%),
        radial-gradient(circle at 50% 58%, rgba(214, 255, 70, 0.18), transparent 46%),
        rgba(9, 12, 16, 0.9);
      box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }

    .security-core::before,
    .security-core::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .security-core::before {
      inset: 16px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .security-core::after {
      width: 230px;
      height: 230px;
      border-radius: 50%;
      border: 1px solid rgba(126, 217, 255, 0.12);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 28px rgba(126, 217, 255, 0.1);
    }

    .security-core__shield {
      position: relative;
      width: 152px;
      height: 176px;
      clip-path: polygon(50% 0, 88% 14%, 88% 54%, 72% 82%, 50% 100%, 28% 82%, 12% 54%, 12% 14%);
      background:
        radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.96), rgba(214, 255, 70, 0.74) 26%, rgba(126, 217, 255, 0.42) 48%, rgba(9, 12, 16, 0.9) 82%);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.26),
        0 0 34px rgba(214, 255, 70, 0.16);
    }

    .security-core__shield::before,
    .security-core__shield::after {
      content: "";
      position: absolute;
    }

    .security-core__shield::before {
      inset: 16px;
      clip-path: inherit;
      border: 1px solid rgba(255, 255, 255, 0.16);
    }

    .security-core__shield::after {
      left: 50%;
      top: 36%;
      width: 36px;
      height: 48px;
      transform: translate(-50%, -50%);
      border-radius: 12px;
      border: 2px solid rgba(9, 12, 16, 0.6);
      background: rgba(9, 12, 16, 0.3);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .security-core span {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.8);
      color: rgba(247, 244, 239, 0.88);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .security-card--auth {
      grid-area: auth;
      min-height: 156px;
    }

    .security-card--backup {
      grid-area: backup;
      min-height: 156px;
    }

    .security-card--monitor {
      grid-area: monitor;
      min-height: 172px;
    }

    .security-card--response {
      grid-area: response;
      min-height: 172px;
    }

    .security-node {
      position: absolute;
      z-index: 3;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.86);
      color: rgba(247, 244, 239, 0.82);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
    }

    .security-node--one {
      left: 8%;
      top: 9%;
    }

    .security-node--two {
      right: 11%;
      top: 16%;
    }

    .security-node--three {
      left: 18%;
      bottom: 10%;
    }

    .security-scan {
      position: absolute;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(126, 217, 255, 0.56), rgba(214, 255, 70, 0.16));
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
    }

    .security-scan--one {
      left: 24%;
      top: 35%;
      width: 244px;
      rotate: -11deg;
    }

    .security-scan--two {
      left: 38%;
      top: 61%;
      width: 188px;
      rotate: 14deg;
    }

    .proof-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 64px);
      align-items: center;
    }

    .proof-list {
      display: grid;
      gap: 16px;
      margin-top: 28px;
    }

    .proof-list li {
      list-style: none;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 15px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      line-height: 1.72;
    }

    .proof-list li::before {
      content: "•";
      color: var(--accent);
      font-size: 1.2rem;
      line-height: 1;
      margin-top: 2px;
    }

    .ui-stage {
      position: relative;
      min-height: 640px;
      border-radius: 36px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(10, 13, 16, 0.82);
      box-shadow: var(--shadow);
      overflow: hidden;
      padding:
        clamp(18px, 2vw, 24px)
        clamp(182px, 16vw, 220px)
        clamp(18px, 2vw, 24px)
        clamp(18px, 2vw, 24px);
    }

    .ui-stage::before {
      content: "";
      position: absolute;
      inset: auto -10% -18% auto;
      width: 320px;
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.22), transparent 68%);
      filter: blur(10px);
      opacity: 0.8;
      pointer-events: none;
    }

    .ui-window {
      position: relative;
      height: 100%;
      padding: 18px;
      border-radius: 28px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
      border: 1px solid rgba(255, 255, 255, 0.07);
      overflow: hidden;
    }

    .ui-window__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
    }

    .ui-dots {
      display: flex;
      gap: 8px;
    }

    .ui-dots span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
    }

    .ui-dots span:first-child {
      background: rgba(255, 109, 102, 0.9);
    }

    .ui-dots span:nth-child(2) {
      background: rgba(255, 201, 102, 0.9);
    }

    .ui-dots span:nth-child(3) {
      background: rgba(114, 255, 159, 0.9);
    }

    .ui-url {
      min-width: 0;
      padding: 12px 16px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.76rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ui-window__body {
      display: grid;
      gap: 18px;
      padding-top: 18px;
    }

    .ui-hero-card {
      padding: 24px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top left, rgba(126, 217, 255, 0.12), transparent 28%),
        rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .ui-kicker {
      color: var(--accent);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .ui-title {
      margin-top: 14px;
      max-width: 14ch;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      letter-spacing: -0.06em;
      line-height: 1.02;
    }

    .ui-subtitle {
      margin-top: 14px;
      max-width: 54ch;
      color: var(--muted);
      line-height: 1.72;
      font-size: 0.95rem;
    }

    .ui-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .ui-pills span {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .ui-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
    }

	    .ui-panel {
	      padding: 20px;
	      border-radius: 22px;
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
	        rgba(255, 255, 255, 0.04);
	      border: 1px solid rgba(255, 255, 255, 0.07);
	      box-shadow: var(--shadow-card);
	    }

    .ui-panel__title {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .ui-chart {
      display: grid;
      align-items: end;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 10px;
      height: 170px;
      margin-top: 18px;
    }

    .ui-chart span {
      height: var(--value, 40%);
      border-radius: 999px 999px 10px 10px;
      background: linear-gradient(180deg, var(--accent), rgba(126, 217, 255, 0.92));
      box-shadow: inset 0 -18px 22px rgba(0, 0, 0, 0.12);
      transform-origin: bottom center;
    }

    .ui-stats {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }

    .ui-stat {
      padding: 16px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.07);
    }

    .ui-stat strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.32rem;
      letter-spacing: -0.05em;
    }

    .ui-stat span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.55;
    }

    .ui-controls {
      display: grid;
      gap: 16px;
      margin-top: 18px;
    }

    .ui-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    }

    .ui-button.is-active {
      background: rgba(214, 255, 70, 0.12);
      border-color: rgba(214, 255, 70, 0.35);
      color: var(--text);
    }

    .ui-button__pill {
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      padding: 3px;
      position: relative;
      transition: background 0.3s ease;
    }

    .ui-button__pill::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--text);
      transition: transform 0.3s ease;
    }

    .ui-button.is-active .ui-button__pill {
      background: rgba(214, 255, 70, 0.4);
    }

    .ui-button.is-active .ui-button__pill::after {
      transform: translateX(18px);
      background: #071003;
    }

	    .ui-float {
      position: absolute;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.86);
	      box-shadow: var(--shadow-card);
	      backdrop-filter: blur(16px);
	      max-width: 176px;
	      z-index: 3;
	    }

    .ui-float strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.98rem;
      letter-spacing: -0.04em;
    }

    .ui-float span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.82rem;
      line-height: 1.55;
    }

    .ui-float--one {
      right: clamp(18px, 2vw, 24px);
      top: 96px;
    }

    .ui-float--two {
      right: clamp(18px, 2vw, 24px);
      left: auto;
      bottom: 24px;
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
      margin-top: 42px;
    }

    .projects-head {
      display: grid;
      grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.9fr);
      gap: clamp(26px, 5vw, 70px);
      align-items: center;
      margin-bottom: 42px;
    }

    .projects-copy {
      max-width: 720px;
    }

    .shape-scene,
    .cta-scene {
      position: relative;
      min-height: 340px;
      border-radius: 34px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(11, 14, 17, 0.74);
      box-shadow: var(--shadow);
      overflow: hidden;
      isolation: isolate;
    }

    .shape-scene::before,
    .cta-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
      background-size: 62px 62px;
      opacity: 0.14;
      mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
      pointer-events: none;
    }

    .shape-scene::after,
    .cta-scene::after {
      content: "";
      position: absolute;
      inset: auto auto -40px -40px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(214, 255, 70, 0.16), transparent 72%);
      filter: blur(24px);
      pointer-events: none;
    }

    .shape-float {
      animation: floatUp 9s ease-in-out infinite;
    }

    .shape-float-alt {
      animation: floatDown 11s ease-in-out infinite;
    }

    .shape-spin {
      animation: slowSpin 18s linear infinite;
    }

    .projects-scene__ring {
      position: absolute;
      right: 42px;
      top: 54px;
      width: 220px;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 1px solid rgba(214, 255, 70, 0.16);
      box-shadow:
        inset 0 0 0 24px rgba(255, 255, 255, 0.018),
        0 0 60px rgba(214, 255, 70, 0.08);
    }

    .projects-scene__ring::before,
    .projects-scene__ring::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: inherit;
      border: 1px solid rgba(126, 217, 255, 0.16);
    }

    .projects-scene__ring::after {
      inset: 42px;
      border-color: rgba(255, 255, 255, 0.12);
    }

    .projects-scene__prism {
      position: absolute;
      width: 186px;
      height: 170px;
      clip-path: polygon(50% 0%, 100% 82%, 0% 82%);
      background:
        linear-gradient(135deg, rgba(214, 255, 70, 0.92), rgba(126, 217, 255, 0.7));
      filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.3));
      transform-style: preserve-3d;
    }

    .projects-scene__prism::before,
    .projects-scene__prism::after {
      content: "";
      position: absolute;
      inset: 0;
      clip-path: inherit;
      opacity: 0.42;
    }

    .projects-scene__prism::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent 62%);
      transform: translateZ(1px);
    }

    .projects-scene__prism::after {
      background: linear-gradient(135deg, rgba(6, 10, 14, 0.46), transparent 55%);
    }

    .projects-scene__prism--one {
      top: 90px;
      left: 54px;
      transform: rotate(-18deg) rotateX(58deg) skewY(-7deg);
    }

    .projects-scene__prism--two {
      top: 120px;
      left: 162px;
      width: 160px;
      height: 144px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(126, 217, 255, 0.6));
      transform: rotate(18deg) rotateX(62deg) skewY(5deg);
      opacity: 0.88;
    }

    .projects-scene__diamond {
      position: absolute;
      right: 110px;
      bottom: 58px;
      width: 92px;
      height: 92px;
      border-radius: 22px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(126, 217, 255, 0.26));
      border: 1px solid rgba(255, 255, 255, 0.16);
      transform: rotate(45deg) rotateX(56deg);
      box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
    }

    .projects-scene__orb {
      position: absolute;
      left: 44px;
      bottom: 44px;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.88), rgba(214, 255, 70, 0.56) 38%, rgba(9, 12, 16, 0.2) 72%);
      box-shadow: 0 24px 34px rgba(0, 0, 0, 0.3);
    }

    .projects-scene__panel {
      position: absolute;
      padding: 14px 16px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(10, 13, 16, 0.72);
      backdrop-filter: blur(14px);
      color: var(--muted);
      font-size: 0.78rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      box-shadow: var(--shadow);
    }

    .projects-scene__panel--one {
      left: 46px;
      top: 52px;
    }

    .projects-scene__panel--two {
      right: 42px;
      bottom: 36px;
    }

	    .project-card {
      position: relative;
      min-height: 320px;
      padding: 24px;
      border-radius: 30px;
      overflow: hidden;
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%),
	        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 72%),
	        rgba(15, 18, 21, 0.82);
	      border: 1px solid var(--line);
	      box-shadow: var(--shadow-elevated);
	      transition: transform 0.36s ease, border-color 0.36s ease;
	    }

    .project-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(145deg, var(--project-glow, rgba(214, 255, 70, 0.12)), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 50%);
      pointer-events: none;
    }

    .project-card::after {
      content: "";
      position: absolute;
      inset: auto -14% -22% auto;
      width: 260px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--project-glow, rgba(214, 255, 70, 0.18));
      filter: blur(50px);
      opacity: 0.62;
      pointer-events: none;
    }

	    .project-card:hover {
	      transform: translateY(-6px);
	      border-color: rgba(255, 255, 255, 0.18);
	    }

    .project-card--large {
      grid-column: span 7;
      min-height: 420px;
    }

    .project-card--medium {
      grid-column: span 5;
    }

    .project-card--compact {
      grid-column: span 5;
    }

    .project-card--wide {
      grid-column: span 7;
    }

    .project-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .project-type {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .project-index {
      color: rgba(255, 255, 255, 0.34);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .project-card h3 {
      position: relative;
      z-index: 1;
      margin-top: 24px;
      max-width: 12ch;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.6vw, 2.55rem);
      letter-spacing: -0.06em;
      line-height: 0.98;
    }

    .project-card p {
      position: relative;
      z-index: 1;
      max-width: 42ch;
      margin-top: 16px;
      color: var(--muted);
      line-height: 1.78;
      font-size: 0.95rem;
    }

    .project-meta {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .project-meta span {
      padding: 9px 13px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

	    .project-visual {
      position: absolute;
      right: 24px;
      bottom: 24px;
      width: min(46%, 240px);
      aspect-ratio: 0.82;
      border-radius: 26px;
	      background:
	        radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--project-glow, rgba(214, 255, 70, 0.18)) 74%, rgba(255, 255, 255, 0.06)), transparent 42%),
	        linear-gradient(155deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 28%, rgba(10, 12, 15, 0.82) 100%);
	      border: 1px solid rgba(255, 255, 255, 0.08);
	      overflow: hidden;
	      transform: rotate(7deg);
	      box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	    }

	    .project-visual::before {
	      content: "";
	      position: absolute;
	      inset: 14px;
	      border-radius: 20px;
	      background:
	        linear-gradient(180deg, rgba(214, 255, 70, 0.22), rgba(126, 217, 255, 0.08) 28%, transparent 30%),
	        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 16%, transparent 16% 100%),
	        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 30%, transparent 30% 36%, rgba(255, 255, 255, 0.05) 36% 68%, transparent 68% 74%, rgba(255, 255, 255, 0.04) 74% 100%),
	        linear-gradient(145deg, rgba(126, 217, 255, 0.14), transparent 54%),
	        rgba(255, 255, 255, 0.04);
	      border: 1px solid rgba(255, 255, 255, 0.08);
	    }

	    .project-visual::after {
	      content: "";
	      position: absolute;
	      left: 22px;
	      right: 22px;
	      top: 24px;
	      height: 58px;
	      border-radius: 16px;
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent),
	        rgba(255, 255, 255, 0.03);
	      border: 1px solid rgba(255, 255, 255, 0.06);
	      box-shadow:
	        0 96px 0 rgba(255, 255, 255, 0.03),
	        0 172px 0 rgba(255, 255, 255, 0.025);
	    }

    .method-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
      gap: clamp(28px, 5vw, 74px);
      align-items: start;
    }

    .method-intro {
      position: sticky;
      top: 110px;
    }

    .timeline {
      position: relative;
      padding-left: 34px;
    }

    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 9px;
      width: 2px;
      background: rgba(255, 255, 255, 0.08);
    }

    .timeline-progress {
      position: absolute;
      top: 0;
      left: 9px;
      width: 2px;
      height: 100%;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      transform-origin: top center;
      z-index: 1;
    }

	    .timeline-item {
      position: relative;
      padding: 26px 26px 26px 28px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
        rgba(14, 17, 20, 0.76);
	      box-shadow: var(--shadow-card);
	    }

    .timeline-item + .timeline-item {
      margin-top: 18px;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -31px;
      top: 30px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 22px rgba(214, 255, 70, 0.36);
    }

    .timeline-index {
      color: var(--accent);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .timeline-item h3 {
      margin-top: 14px;
      font-family: var(--font-display);
      font-size: clamp(1.34rem, 2.1vw, 1.82rem);
      letter-spacing: -0.05em;
      line-height: 1.02;
    }

    .timeline-item p {
      margin-top: 14px;
      color: var(--muted);
      line-height: 1.78;
      font-size: 0.95rem;
      max-width: 52ch;
    }

    .timeline-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 18px;
    }

    .timeline-meta span {
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

	    .cta-panel {
      position: relative;
      padding: clamp(28px, 5vw, 54px);
      border-radius: 38px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(126, 217, 255, 0.12), transparent 26%),
        rgba(11, 14, 17, 0.84);
	      box-shadow: var(--shadow-elevated);
	      overflow: hidden;
	    }

    .cta-panel::after {
      content: "";
      position: absolute;
      inset: auto auto -120px 50%;
      width: 360px;
      height: 180px;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(214, 255, 70, 0.24), transparent 70%);
      filter: blur(24px);
      opacity: 0.9;
      pointer-events: none;
    }

    .cta-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(320px, 0.86fr);
      gap: clamp(24px, 4vw, 52px);
      align-items: center;
    }

    .cta-title {
      max-width: 15ch;
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.4vw, 4.4rem);
      letter-spacing: -0.06em;
      line-height: 0.98;
      text-wrap: balance;
    }

    .cta-copy {
      max-width: 46ch;
      margin-top: 18px;
      color: var(--muted);
      line-height: 1.82;
      font-size: 1rem;
      text-wrap: pretty;
    }

    .cta-copy-wrap {
      max-width: 760px;
    }

    .cta-side {
      display: grid;
      gap: 18px;
      align-items: end;
      width: 100%;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: flex-start;
    }

    .cta-scene {
      min-height: 300px;
      padding: 18px;
    }

    .cta-browser {
      position: absolute;
      left: 32px;
      top: 42px;
      width: 244px;
      min-height: 156px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent),
        rgba(13, 17, 20, 0.84);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .cta-browser__top {
      display: flex;
      gap: 7px;
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .cta-browser__top span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.16);
    }

    .cta-browser__top span:first-child {
      background: rgba(255, 109, 102, 0.88);
    }

    .cta-browser__top span:nth-child(2) {
      background: rgba(255, 201, 102, 0.88);
    }

    .cta-browser__top span:nth-child(3) {
      background: rgba(114, 255, 159, 0.9);
    }

    .cta-browser__body {
      padding: 18px 18px 16px;
    }

    .cta-browser__line {
      height: 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      margin-bottom: 10px;
    }

    .cta-browser__line--short {
      width: 56%;
    }

    .cta-browser__chart {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 9px;
      align-items: end;
      height: 74px;
      margin-top: 14px;
    }

    .cta-browser__chart span {
      display: block;
      height: var(--bar, 40%);
      border-radius: 999px 999px 8px 8px;
      background: linear-gradient(180deg, var(--accent), rgba(126, 217, 255, 0.88));
      opacity: 0.95;
    }

    .cta-bubble {
      position: absolute;
      right: 34px;
      top: 40px;
      width: 170px;
      min-height: 132px;
      padding: 18px 18px 20px;
      border-radius: 28px 28px 28px 10px;
      border: 1px solid rgba(255, 255, 255, 0.09);
      background:
        linear-gradient(145deg, rgba(214, 255, 70, 0.18), transparent 58%),
        rgba(16, 20, 24, 0.84);
      transform: rotate(7deg) skewY(-4deg);
      box-shadow: var(--shadow);
    }

    .cta-bubble__dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(214, 255, 70, 0.32);
    }

    .cta-bubble__line {
      height: 10px;
      margin-top: 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
    }

    .cta-bubble__line--short {
      width: 62%;
    }

    .cta-cursor {
      position: absolute;
      left: 210px;
      bottom: 36px;
      width: 118px;
      height: 118px;
      clip-path: polygon(8% 0%, 100% 52%, 58% 58%, 72% 100%, 50% 100%, 36% 66%, 8% 82%);
      background: linear-gradient(135deg, rgba(126, 217, 255, 0.84), rgba(255, 255, 255, 0.9));
      border: 1px solid rgba(255, 255, 255, 0.14);
      transform: rotate(-16deg) rotateX(52deg);
      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.32));
    }

    .cta-bars {
      position: absolute;
      right: 34px;
      bottom: 28px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      align-items: end;
      width: 160px;
      height: 100px;
      padding: 16px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(13, 16, 19, 0.78);
      box-shadow: var(--shadow);
    }

    .cta-bars span {
      display: block;
      height: var(--bar, 44%);
      border-radius: 999px 999px 6px 6px;
      background: linear-gradient(180deg, rgba(214, 255, 70, 0.94), rgba(126, 217, 255, 0.82));
    }

    .cta-orb {
      position: absolute;
      left: 34px;
      bottom: 36px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.86), rgba(126, 217, 255, 0.5) 34%, rgba(214, 255, 70, 0.22) 58%, rgba(8, 12, 15, 0.2) 74%);
      box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
    }

    @keyframes floatUp {
      0%, 100% {
        translate: 0 0;
      }
      50% {
        translate: 0 -12px;
      }
    }

    @keyframes floatDown {
      0%, 100% {
        translate: 0 0;
      }
      50% {
        translate: 0 14px;
      }
    }

    @keyframes slowSpin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes transferPulse {
      0% {
        left: 0;
        top: 72%;
        transform: scale(0.82);
        opacity: 0.62;
      }
      50% {
        left: 54%;
        top: 42%;
        transform: scale(1.06);
        opacity: 1;
      }
      100% {
        left: 100%;
        top: 14%;
        transform: scale(0.78);
        opacity: 0.4;
      }
    }

    .cta-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }

    .cta-foot span {
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .site-footer {
      padding: 14px 0 138px;
    }

    .footer-shell {
      width: var(--container);
      margin: 0 auto;
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

	    .footer-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.72fr) minmax(220px, 0.86fr) minmax(240px, 0.92fr);
      gap: 28px;
      padding: 34px 34px 30px;
      border-radius: 32px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(13, 16, 21, 0.9), rgba(8, 10, 14, 0.92));
	      box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	      overflow: hidden;
	      backdrop-filter: blur(16px);
	    }

	    .footer-panel::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 28px;
      width: 132px;
      height: 1px;
      background: linear-gradient(90deg, rgba(214, 255, 70, 0.56), transparent);
	      opacity: 0.9;
	    }

	    .footer-panel::after {
	      content: "";
	      position: absolute;
	      right: -8%;
	      bottom: -18%;
	      width: 260px;
	      aspect-ratio: 1;
	      border-radius: 50%;
	      background: radial-gradient(circle, rgba(126, 217, 255, 0.1), transparent 72%);
	      filter: blur(36px);
	      opacity: 0.8;
	      pointer-events: none;
	    }

	    .footer-intro,
	    .footer-column {
	      position: relative;
	      z-index: 1;
	    }

	    .footer-column {
	      padding: 18px 18px 16px;
	      border-radius: 24px;
	      border: 1px solid rgba(255, 255, 255, 0.06);
	      background:
	        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 72%),
	        rgba(255, 255, 255, 0.015);
	      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	    }

    .footer-kicker,
    .footer-heading {
      margin: 0;
      color: rgba(214, 255, 70, 0.84);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .footer-heading {
      margin-bottom: 14px;
    }

    .footer-brand {
      margin-top: 10px;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.05em;
    }

    .footer-brand span {
      color: var(--accent);
    }

    .footer-copy {
      max-width: 34ch;
      margin: 14px 0 0;
      color: rgba(247, 244, 239, 0.74);
      font-size: 1rem;
      line-height: 1.75;
    }

    .footer-links,
    .footer-contact {
      display: grid;
      gap: 10px;
    }

    .footer-links a,
    .footer-contact a,
    .footer-contact span {
      display: flex;
      align-items: center;
      min-height: 44px;
      padding: 0 0 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.6;
      text-decoration: none;
      transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
    }

    .footer-links a:last-child,
    .footer-contact a:last-child,
    .footer-contact span:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .footer-links a::after,
    .footer-contact a::after {
      content: "↗";
      margin-left: auto;
      color: rgba(214, 255, 70, 0.52);
      font-size: 0.85rem;
      transition: transform 220ms ease, color 220ms ease;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible,
    .footer-contact a:hover,
    .footer-contact a:focus-visible {
      color: var(--text);
      border-color: rgba(214, 255, 70, 0.18);
      transform: translateX(4px);
    }

    .footer-links a:hover::after,
    .footer-links a:focus-visible::after,
    .footer-contact a:hover::after,
    .footer-contact a:focus-visible::after {
      color: rgba(214, 255, 70, 0.86);
      transform: translate(2px, -1px);
    }

    .footer-contact span {
      min-height: auto;
      color: rgba(247, 244, 239, 0.62);
    }

    .footer-legal {
      max-width: 42rem;
      margin: 22px 0 0;
      padding: 16px 18px;
      border: 1px solid rgba(214, 255, 70, 0.1);
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(214, 255, 70, 0.08), rgba(126, 217, 255, 0.03)),
        rgba(10, 12, 15, 0.72);
      color: rgba(230, 235, 242, 0.86);
      font-size: 0.84rem;
      line-height: 1.82;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .footer-legal strong {
      color: var(--text);
      font-weight: 700;
    }

	    .footer-bottom {
	      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
	      margin-top: 16px;
	      padding: 20px 6px 0;
	      border-top: 1px solid rgba(255, 255, 255, 0.06);
	    }

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

    .footer-badges span {
      padding: 9px 13px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.62);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .footer-signoff {
      margin: 0;
      max-width: 42rem;
      color: rgba(247, 244, 239, 0.52);
      font-size: 0.84rem;
      line-height: 1.75;
      text-align: right;
    }

	    .cookie-notice {
      position: fixed;
      left: 18px;
      bottom: 18px;
      z-index: 54;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 16px;
      width: min(560px, calc(100vw - 136px));
      padding: 16px 18px;
      border-radius: 24px;
      border: 1px solid rgba(214, 255, 70, 0.12);
      background:
        radial-gradient(circle at top right, rgba(214, 255, 70, 0.08), transparent 38%),
        linear-gradient(180deg, rgba(14, 18, 23, 0.94), rgba(10, 12, 16, 0.92));
	      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	      backdrop-filter: blur(18px);
	      transition: opacity 240ms ease, transform 240ms ease;
	      overflow: hidden;
	    }

	    .cookie-notice::before {
	      content: "";
	      position: absolute;
	      inset: 0;
	      background:
	        radial-gradient(circle at 84% 10%, rgba(214, 255, 70, 0.14), transparent 34%),
	        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%);
	      pointer-events: none;
	    }

    .cookie-notice.is-hidden {
      opacity: 0;
      transform: translateY(16px);
      pointer-events: none;
    }

    .cookie-notice[hidden] {
      display: none !important;
    }

    .cookie-notice__copy strong {
      display: block;
      color: var(--text);
      font-size: 0.84rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .cookie-notice__copy p {
      margin-top: 10px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.64;
    }

    .cookie-notice__actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    .cookie-notice__actions a,
    .cookie-notice__actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid transparent;
      appearance: none;
      -webkit-appearance: none;
      box-shadow: none;
      outline: none;
      font: inherit;
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      line-height: 1;
      white-space: nowrap;
      text-transform: uppercase;
      text-decoration: none;
      transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, color 220ms ease;
    }

    .cookie-notice__actions a {
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.82);
    }

    .cookie-notice__actions button {
      border: 1px solid rgba(214, 255, 70, 0.18);
      background: rgba(214, 255, 70, 0.1);
      color: var(--text);
      cursor: pointer;
    }

    .cookie-notice__actions a:hover,
    .cookie-notice__actions a:focus-visible,
    .cookie-notice__actions button:hover,
    .cookie-notice__actions button:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(214, 255, 70, 0.26);
      background: rgba(214, 255, 70, 0.14);
      color: var(--text);
    }

	    .wa-floating {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 55;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      border-radius: 999px;
      background: rgba(12, 15, 18, 0.84);
      border: 1px solid rgba(214, 255, 70, 0.28);
	      box-shadow: var(--shadow-card);
	      backdrop-filter: blur(16px);
	      font-family: var(--font-display);
      font-size: 0.84rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

	    .wa-floating:hover {
	      transform: translateY(-2px);
	      border-color: rgba(214, 255, 70, 0.42);
	      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 26px rgba(214, 255, 70, 0.1);
	    }

	    @media (hover: hover) and (pointer: fine) {
	      .hero-metric:hover,
	      .proof-card:hover,
	      .marketing-channel:hover,
	      .marketing-benefit:hover,
	      .expertise-card:hover,
	      .outreach-card:hover,
	      .ui-panel:hover,
	      .timeline-item:hover,
	      .footer-column:hover {
	        transform: translateY(-4px);
	        border-color: rgba(255, 255, 255, 0.12);
	        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	      }

	      .service-card:hover .service-card__inner,
	      .project-card:hover,
	      .hero-proof:hover,
	      .cta-panel:hover {
	        box-shadow: 0 32px 96px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	      }
	    }

    .wa-floating__icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(214, 255, 70, 0.16);
      color: var(--accent);
    }

    .fade-up,
    .scale-in {
      will-change: transform, opacity;
    }

    .split-line {
      display: inline-block;
      overflow: hidden;
    }

    .split-line > span {
      display: inline-block;
      will-change: transform, opacity;
    }

    @media (max-width: 1140px) {
      .hero-inner,
      .impact-shell,
      .marketing-top,
      .expertise-layout,
      .proof-layout,
      .projects-head,
      .services-layout,
      .method-layout,
      .cta-grid {
        grid-template-columns: 1fr;
      }

      .services-intro,
      .method-intro {
        position: static;
      }

      .hero-side {
        justify-self: start;
        width: min(100%, 560px);
        padding-top: 0;
      }

      .spiral-portfolio-mobile-notes {
        display: grid;
        gap: 10px;
        width: 100%;
      }

      .impact-shell {
        width: min(1100px, calc(100vw - 40px));
      }

      .projects-copy,
      .cta-copy-wrap {
        max-width: none;
      }

      .shape-scene,
      .cta-scene {
        min-height: 300px;
      }

      .cta-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 920px) {
      :root {
        --container: min(1320px, calc(100vw - 40px));
        --container-wide: min(1440px, calc(100vw - 40px));
      }

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

      .nav-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
      }

      .site-nav {
        padding: 0 10px;
      }

      .nav-shell {
        width: 100%;
        padding: 12px 14px 12px 16px;
        border-radius: 24px;
      }

      .brand-mark {
        gap: 10px;
        font-size: 0.92rem;
      }

      .mobile-panel {
        inset: 76px 10px auto 10px;
      }

      .hero {
        min-height: auto;
        padding-top: 84px;
      }

      .hero-stage {
        top: 86px;
        right: 10px;
        left: 10px;
        bottom: auto;
        height: 320px;
        border-radius: 28px;
        overflow: hidden;
        opacity: 0.78;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.14));
      }

      .hero-stage::before {
        width: 44vw;
        right: -8vw;
        top: -3vh;
        filter: blur(72px);
        opacity: 0.22;
      }

      .hero-stage::after {
        width: 52vw;
        left: -12vw;
        bottom: -8vh;
        filter: blur(72px);
        opacity: 0.18;
      }

      .hero-grid {
        background-size: 54px 54px;
        opacity: 0.14;
      }

      .hero-spiral {
        opacity: 0.34;
      }

      .hero-inner {
        min-height: auto;
        width: min(100%, calc(100vw - 36px));
        gap: 24px;
        padding: 24px 0 50px;
      }

      .hero-copy,
      .hero-headline,
      .hero-subtitle {
        max-width: none;
      }

      .hero-topline {
        margin-bottom: 18px;
      }

      .eyebrow-pill {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        padding: 9px 12px;
        font-size: 0.68rem;
        letter-spacing: 0.12em;
      }

      .hero-brand {
        font-size: clamp(3rem, 16vw, 5.6rem);
        white-space: normal;
      }

      .hero-headline {
        margin-top: 12px;
        gap: 6px;
        font-size: clamp(1.18rem, 4.9vw, 1.58rem);
        max-width: 12ch;
      }

      .hero-subtitle {
        margin-top: 16px;
        font-size: 0.94rem;
        line-height: 1.66;
      }

      .hero-actions {
        margin-top: 22px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .button {
        width: 100%;
        min-height: 54px;
      }

      .hero-meta,
      .impact-strip,
      .services-grid,
      .ui-grid,
      .proof-grid,
      .footer-panel {
        grid-template-columns: 1fr;
      }

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

      .hero-meta {
        gap: 10px;
        margin-top: 24px;
      }

      .hero-experience {
        margin-top: 14px;
        padding: 16px 18px;
      }

      .hero-experience span {
        font-size: 0.86rem;
        line-height: 1.64;
      }

      .hero-metric {
        padding: 14px 16px;
        border-radius: 18px;
      }

      .hero-metric strong {
        font-size: 1.18rem;
      }

      .hero-metric span {
        font-size: 0.8rem;
      }

      .hero-side {
        width: 100%;
        max-width: none;
        gap: 14px;
        align-self: start;
        justify-self: stretch;
        margin-top: 2px;
      }

      .hero-chip {
        justify-self: start;
        padding: 8px 12px;
        font-size: 0.64rem;
      }

      .hero-proof h2,
      .impact-copy,
      .cta-title,
      .cta-copy {
        max-width: none;
      }

      .hero-proof {
        padding: 18px;
        border-radius: 22px;
      }

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

      .marketing-channel-grid,
      .marketing-benefits,
      .expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .marketing-window__top {
        flex-direction: column;
        align-items: flex-start;
      }

      .marketing-window__pill,
      .expertise-window__top {
        width: 100%;
      }

      .expertise-window__top {
        flex-direction: column;
        align-items: flex-start;
      }

      .marketing-window__pill,
      .expertise-window__pill {
        width: 100%;
        white-space: normal;
      }

      .marketing-stage,
      .expertise-stage {
        min-height: 700px;
      }

      .proof-card {
        padding: 12px;
        border-radius: 16px;
      }

      .spiral-portfolio-mobile-notes {
        display: grid;
        gap: 10px;
        width: 100%;
      }

      .ui-window__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .ui-url {
        width: 100%;
      }

      .section {
        padding: 74px 0;
      }

      .section-title {
        max-width: none;
        font-size: clamp(2rem, 7vw, 3rem);
      }

      .section-copy {
        max-width: none;
        font-size: 0.96rem;
        line-height: 1.68;
      }

      .impact-shell {
        width: min(100%, calc(100vw - 24px));
        padding: 12px;
        border-radius: 24px;
      }

      .impact-main,
      .impact-side {
        padding: 18px;
        border-radius: 20px;
      }

      .impact-copy {
        font-size: clamp(1.62rem, 6.8vw, 2.5rem);
      }

      .service-card {
        min-height: auto;
      }

      .service-card__inner {
        padding: 20px;
        border-radius: 22px;
      }

      .service-title,
      .service-description {
        max-width: none;
      }

      .service-title {
        margin-top: 28px;
      }

      .proof-list li {
        padding: 12px 0;
        line-height: 1.64;
      }

      .project-card,
      .project-card--large,
      .project-card--medium,
      .project-card--compact,
      .project-card--wide {
        grid-column: auto;
      }

      .project-card {
        min-height: auto;
        padding: 18px;
        border-radius: 24px;
      }

      .project-visual {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 20px;
        transform: none;
        aspect-ratio: 1.06;
      }

      .portfolio-project__planet-link {
        width: 104px;
        height: 104px;
      }

      .portfolio-project__planet {
        width: 20px;
        height: 20px;
      }

      .projects-scene__prism--one {
        left: 38px;
      }

      .projects-scene__prism--two {
        left: 118px;
      }

      .cta-browser {
        left: 22px;
      }

      .cta-bubble {
        right: 22px;
      }

      .spiral-portfolio-notes {
        display: none;
      }

      .portfolio-project__note {
        width: 220px;
      }

      .portfolio-project__note--mobile {
        width: 100%;
      }

      .ui-stage {
        min-height: auto;
        padding: 12px;
        border-radius: 22px;
      }

      .ui-window {
        padding: 14px;
        border-radius: 20px;
      }

      .ui-hero-card,
      .ui-panel {
        padding: 16px;
        border-radius: 18px;
      }

      .ui-float {
        position: static;
        max-width: none;
        margin-top: 12px;
      }

      .cta-grid {
        gap: 22px;
      }

      .cta-panel {
        padding: 22px;
        border-radius: 28px;
      }

      .cta-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .cta-scene {
        min-height: 240px;
        padding: 12px;
      }

      .cta-browser {
        left: 12px;
        top: 16px;
        width: 178px;
      }

      .cta-bubble {
        right: 14px;
        top: 18px;
        width: 124px;
        min-height: 96px;
        padding: 12px;
      }

      .cta-bars {
        right: 12px;
        bottom: 12px;
        width: 116px;
        height: 78px;
        padding: 12px;
      }

      .cta-cursor {
        left: 132px;
        bottom: 22px;
        width: 82px;
        height: 82px;
      }

      .timeline-item {
        padding: 22px 18px 22px 24px;
        border-radius: 22px;
      }

      .footer-panel {
        gap: 22px;
        padding: 28px 24px 24px;
      }

      .wa-floating {
        left: 10px;
        right: 10px;
        width: auto;
        padding: 12px 16px;
      }

      .marketing-kpi--two {
        right: 3%;
        bottom: 22%;
      }

      .marketing-kpi--three {
        left: 44%;
        bottom: 9%;
        translate: -50% 0;
        max-width: 160px;
      }
    }

    @media (max-width: 680px) {
      .section {
        padding: 84px 0;
      }

      .hero {
        min-height: auto;
        padding-top: 88px;
      }

      .hero-stage {
        height: 278px;
        top: 90px;
      }

      .hero-inner {
        gap: 20px;
        padding: 24px 0 42px;
      }

      .hero-brand {
        font-size: clamp(3.2rem, 20vw, 5.6rem);
      }

      .hero-headline {
        font-size: clamp(1.22rem, 7vw, 1.74rem);
        max-width: 11ch;
      }

      .hero-subtitle,
      .section-copy,
      .impact-note,
      .timeline-item p,
      .project-card p,
      .service-description {
        font-size: 0.95rem;
      }

      .section-title,
      .cta-title {
        max-width: none;
      }

      .impact-shell {
        width: calc(100vw - 32px);
        padding: 14px;
        border-radius: 28px;
      }

      .impact-main,
      .impact-side {
        padding: 22px;
        border-radius: 24px;
      }

      .hero-proof,
      .ui-stage,
      .project-card,
      .timeline-item,
      .cta-panel {
        border-radius: 24px;
      }

      .hero-proof {
        padding: 18px;
      }

      .hero-meta {
        margin-top: 28px;
      }

      .services-grid {
        gap: 14px;
      }

      .service-card {
        min-height: auto;
      }

      .service-card__inner {
        padding: 22px;
      }

      .service-title,
      .service-description {
        max-width: none;
      }

      .service-title {
        margin-top: 30px;
      }

      .marketing-channel-grid,
      .marketing-benefits,
      .expertise-grid {
        grid-template-columns: 1fr;
      }

      .outreach-scene,
      .data-scene,
      .email-scene,
      .sms-scene,
      .seo-scene,
      .security-scene {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 12px;
      }

      .outreach-scene > *,
      .data-scene > *,
      .email-scene > *,
      .sms-scene > *,
      .seo-scene > *,
      .security-scene > * {
        grid-area: auto !important;
      }

      .marketing-channel,
      .expertise-card {
        min-height: auto;
      }

      .marketing-stage,
      .expertise-stage {
        min-height: auto;
        padding: 16px;
      }

      .marketing-window,
      .expertise-window {
        padding: 18px;
      }

      .marketing-window__pill,
      .expertise-window__pill {
        font-size: 0.68rem;
        letter-spacing: 0.1em;
      }

      .marketing-scene,
      .expertise-scene {
        min-height: auto;
        display: grid;
        gap: 12px;
        padding-top: 18px;
        align-items: start;
      }

      .marketing-grid-lines,
      .marketing-orbit,
      .crm-track,
      .crm-gear--two,
      .crm-gear--three,
      .crm-node,
      .crm-orbit,
      .email-envelope,
      .email-thread,
      .seo-trace,
      .security-scan,
      .security-node,
      .esign-chip {
        display: none;
      }

      .crm-scene::before,
      .crm-scene::after,
      .esign-scene::before,
      .email-scene::before,
      .sms-scene::before {
        content: none;
      }

      .marketing-core {
        position: relative;
        left: auto;
        top: auto;
        width: 120px;
        margin: 0 auto 8px;
        transform: none;
        order: 1;
      }

      .marketing-core__badge {
        bottom: 8px;
        padding: 8px 12px;
        font-size: 0.66rem;
      }

      .marketing-token,
      .marketing-kpi,
      .marketing-symbol-box,
      .seo-core,
      .crm-hub,
      .crm-panel,
      .esign-document,
      .security-core,
      .esign-vault,
      .esign-proof {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: none;
        min-height: auto;
        margin: 0;
        translate: none;
        transform: none;
      }

      .marketing-token {
        rotate: 0deg;
        padding: 14px 16px;
      }

      .marketing-token strong,
      .marketing-kpi strong,
      .crm-hub strong,
      .crm-panel strong,
      .esign-vault strong,
      .esign-proof strong {
        font-size: 0.98rem;
      }

      .marketing-token span,
      .marketing-kpi span,
      .marketing-symbol-box__copy,
      .crm-hub span,
      .crm-panel span,
      .esign-vault span,
      .esign-proof span {
        font-size: 0.8rem;
        line-height: 1.62;
      }

      .marketing-token--google {
        order: 2;
      }

      .marketing-token--meta {
        order: 3;
      }

      .marketing-token--social {
        order: 4;
      }

      .marketing-symbol-box {
        order: 5;
        padding: 16px;
      }

      .marketing-kpi--one {
        order: 6;
      }

      .marketing-kpi--two {
        order: 7;
      }

      .marketing-kpi--three {
        order: 8;
        text-align: left;
      }

      .expertise-copy .section-title {
        max-width: 16ch;
      }

      .outreach-card,
      .sms-phone,
      .data-sphere {
        padding: 16px;
        border-radius: 20px;
      }

      .outreach-card strong,
      .sms-card strong {
        font-size: 0.98rem;
      }

      .outreach-card span,
      .sms-card span,
      .outreach-list li {
        font-size: 0.8rem;
        line-height: 1.62;
      }

      .flow-pill-row span,
      .data-chip-row span {
        font-size: 0.66rem;
      }

      .data-sphere,
      .email-orb,
      .sms-pulse,
      .esign-seal {
        display: none;
      }

      .seo-core,
      .security-core {
        min-height: 220px;
      }

      .email-card--composer,
      .email-card--sequence,
      .sms-phone {
        min-height: auto;
      }

      .sms-phone__screen {
        padding: 16px 14px;
        gap: 10px;
      }

      .sms-bubble {
        max-width: 92%;
        font-size: 0.8rem;
      }

      .crm-gear--one {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        width: 128px;
        margin: 0 auto 10px;
        order: 1;
      }

      .crm-hub {
        order: 2;
        padding: 16px;
      }

      .crm-panel {
        padding: 16px;
      }

      .crm-panel--one {
        order: 3;
      }

      .crm-panel--two {
        order: 4;
      }

      .esign-script {
        position: relative;
        left: auto;
        top: auto;
        justify-self: center;
        margin: 4px auto 6px;
        font-size: clamp(2.4rem, 13vw, 3.7rem);
        transform: rotate(-4deg) skewX(-8deg);
        order: 1;
      }

      .esign-document {
        order: 2;
        padding: 16px;
      }

      .esign-transfer {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: 42px;
        order: 3;
        display: block;
      }

      .esign-transfer__line {
        top: 50%;
        left: 0;
        width: 100%;
        transform: none;
      }

      .esign-transfer__pulse {
        top: 12px;
      }

      .esign-vault {
        order: 4;
        padding: 16px;
      }

      .esign-proof {
        order: 5;
        padding: 16px;
      }

      .impact-copy {
        max-width: none;
        font-size: clamp(1.7rem, 8vw, 2.6rem);
      }

      .shape-scene,
      .cta-scene {
        min-height: 250px;
      }

      .projects-scene__ring {
        width: 170px;
        top: 34px;
        right: 18px;
      }

      .projects-scene__prism--one {
        width: 138px;
        height: 126px;
        top: 82px;
        left: 24px;
      }

      .projects-scene__prism--two {
        width: 118px;
        height: 106px;
        top: 116px;
        left: 102px;
      }

      .projects-scene__diamond {
        right: 52px;
        bottom: 46px;
        width: 68px;
        height: 68px;
      }

      .projects-scene__panel {
        font-size: 0.66rem;
      }

      .portfolio-project__note {
        width: 186px;
      }

      .spiral-portfolio-mobile-notes {
        gap: 8px;
      }

      .portfolio-project__note--mobile {
        padding: 12px 14px;
        border-radius: 18px;
      }

      .portfolio-project__planet-link {
        width: 88px;
        height: 88px;
      }

      .portfolio-project__planet {
        width: 17px;
        height: 17px;
      }

      .portfolio-project__hint {
        font-size: 0.78rem;
      }

      .portfolio-project__arrow {
        width: 108px;
      }

      .ui-stage {
        min-height: auto;
        padding: 12px;
      }

      .ui-window {
        padding: 16px;
      }

      .ui-hero-card,
      .ui-panel {
        padding: 18px;
      }

      .cta-browser {
        width: 190px;
        min-height: 138px;
      }

      .cta-bubble {
        width: 134px;
        min-height: 108px;
        padding: 14px;
      }

      .cta-bars {
        width: 126px;
        height: 84px;
      }

      .cta-cursor {
        left: 146px;
        width: 88px;
        height: 88px;
      }

      .hero-actions,
      .button-row,
      .cta-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .button,
      .wa-floating {
        width: 100%;
        justify-content: center;
      }

      .ui-float {
        position: static;
        max-width: none;
        margin-top: 14px;
      }

      .project-card {
        min-height: auto;
        padding: 20px;
      }

      .project-card h3,
      .project-card p {
        max-width: none;
      }

      .project-visual {
        display: none;
      }

      .timeline {
        padding-left: 26px;
      }

      .timeline-item::before {
        left: -23px;
      }

      .footer-panel {
        gap: 18px;
        padding: 24px 18px 20px;
      }

      .footer-bottom {
        padding-top: 14px;
      }

      .footer-signoff {
        text-align: left;
      }

      .cookie-notice {
        left: 12px;
        right: 12px;
        bottom: 84px;
        width: auto;
        border-radius: 20px;
        grid-template-columns: 1fr;
      }

      .cookie-notice__actions {
        flex-direction: column;
        align-items: stretch;
      }

    .wa-floating {
      left: 12px;
      right: 12px;
      width: auto;
    }
  }

    .error-page {
      min-height: 100vh;
      padding: clamp(148px, 18vw, 196px) 0 clamp(96px, 12vw, 140px);
    }

    .error-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      gap: 28px;
      align-items: stretch;
    }

    .error-panel {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 34px;
      background:
        linear-gradient(145deg, rgba(18, 22, 27, 0.92), rgba(8, 10, 13, 0.84)),
        radial-gradient(circle at 82% 16%, rgba(214, 255, 70, 0.08), transparent 34%);
      box-shadow: var(--shadow);
      overflow: hidden;
      isolation: isolate;
    }

    .error-panel::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 33px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      pointer-events: none;
    }

    .error-panel--copy {
      padding: clamp(34px, 5vw, 56px);
    }

    .error-code {
      margin-top: 18px;
      font-family: var(--font-display);
      font-size: clamp(4.6rem, 11vw, 9.4rem);
      line-height: 0.88;
      letter-spacing: -0.08em;
      color: var(--accent);
      text-shadow: 0 0 24px rgba(214, 255, 70, 0.12);
    }

    .error-copy {
      max-width: 42ch;
      margin-top: 18px;
      color: var(--muted);
      font-size: 1.04rem;
      line-height: 1.74;
    }

    .error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
    }

    .error-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 30px;
    }

    .error-card {
      padding: 18px 18px 16px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
        rgba(9, 12, 15, 0.72);
    }

    .error-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 0.98rem;
      line-height: 1.35;
      color: var(--text);
    }

    .error-card p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.62;
    }

    .error-panel--visual {
      padding: clamp(24px, 3.2vw, 34px);
    }

    .error-orbit-stage {
      position: relative;
      min-height: 460px;
      height: 100%;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background:
        linear-gradient(180deg, rgba(22, 26, 31, 0.84), rgba(10, 12, 15, 0.88)),
        radial-gradient(circle at 72% 18%, rgba(214, 255, 70, 0.07), transparent 34%);
      overflow: hidden;
    }

    .error-orbit-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 26%, rgba(126, 217, 255, 0.08), transparent 18%),
        radial-gradient(circle at 76% 70%, rgba(214, 255, 70, 0.08), transparent 22%);
      pointer-events: none;
    }

    .error-chip {
      position: absolute;
      top: 22px;
      right: 22px;
      padding: 10px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(14, 17, 20, 0.74);
      color: rgba(247, 244, 239, 0.8);
      font-size: 0.73rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .error-ring {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(420px, 72%);
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(214, 255, 70, 0.12);
      box-shadow:
        0 0 0 34px rgba(214, 255, 70, 0.04),
        0 0 0 82px rgba(126, 217, 255, 0.03);
      filter: blur(0.2px);
    }

    .error-planet {
      position: absolute;
      border-radius: 50%;
      background:
        radial-gradient(circle at 28% 26%, rgba(255, 255, 255, 0.8), transparent 18%),
        radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12)),
        var(--planet-fill, rgba(214, 255, 70, 0.82));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow:
        inset -18px -18px 34px rgba(0, 0, 0, 0.18),
        0 0 48px rgba(214, 255, 70, 0.14);
    }

    .error-planet--core {
      width: 148px;
      height: 148px;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
      --planet-fill: rgba(214, 255, 70, 0.9);
    }

    .error-planet--one {
      width: 70px;
      height: 70px;
      left: 18%;
      top: 26%;
      --planet-fill: rgba(126, 217, 255, 0.82);
    }

    .error-planet--two {
      width: 54px;
      height: 54px;
      right: 16%;
      bottom: 24%;
      --planet-fill: rgba(255, 170, 84, 0.84);
    }

    .error-planet--three {
      width: 38px;
      height: 38px;
      right: 24%;
      top: 24%;
      --planet-fill: rgba(216, 132, 255, 0.84);
    }

    .error-console {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 28px;
      padding: 22px 22px 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(10, 12, 15, 0.82);
      backdrop-filter: blur(14px);
    }

    .error-console__eyebrow {
      display: inline-flex;
      margin-bottom: 12px;
      color: rgba(214, 255, 70, 0.82);
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .error-console strong {
      display: block;
      margin-bottom: 8px;
      font-size: 1.36rem;
      line-height: 1.15;
      color: var(--text);
    }

    .error-console p {
      color: var(--muted);
      line-height: 1.62;
      max-width: 32ch;
    }

    .service-page {
      min-height: 100vh;
      padding: clamp(148px, 18vw, 196px) 0 clamp(96px, 12vw, 140px);
      --service-accent: var(--accent);
      --service-accent-rgb: 214, 255, 70;
      --service-accent-soft: rgba(var(--service-accent-rgb), 0.12);
    }

    .service-page-layout {
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
      gap: 28px;
      align-items: start;
    }

    .service-page-copy,
    .service-page-visual,
    .service-page-block,
    .service-page-cta {
      position: relative;
      z-index: 1;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 32px;
      background:
        linear-gradient(160deg, rgba(16, 20, 24, 0.9), rgba(8, 10, 14, 0.86)),
        radial-gradient(circle at 82% 18%, rgba(var(--service-accent-rgb), 0.08), transparent 32%);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .service-page-copy,
    .service-page-block,
    .service-page-cta {
      padding: clamp(28px, 4vw, 42px);
    }

    .service-page-copy::before,
    .service-page-visual::before,
    .service-page-block::before,
    .service-page-cta::before {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: 31px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      pointer-events: none;
    }

    .service-page-intro {
      max-width: 42ch;
      margin-top: 18px;
      color: var(--muted);
      font-size: 1.04rem;
      line-height: 1.76;
    }

    .service-page-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .service-page-pills span {
      display: inline-flex;
      align-items: center;
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.7);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .service-page-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 24px;
    }

    .service-page-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 30px;
    }

    .service-page-card {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
        rgba(9, 12, 15, 0.72);
    }

    .service-page-card strong {
      display: block;
      margin-bottom: 10px;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.32;
    }

    .service-page-card p {
      color: var(--muted);
      font-size: 0.96rem;
      line-height: 1.68;
    }

    .service-page-signal {
      margin-top: 22px;
      color: rgba(247, 244, 239, 0.68);
      font-size: 0.92rem;
      line-height: 1.72;
    }

    .service-page-visual {
      padding: clamp(22px, 3vw, 30px);
    }

    .service-page-window {
      position: relative;
      min-height: 540px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background:
        linear-gradient(180deg, rgba(22, 26, 31, 0.84), rgba(10, 12, 15, 0.9)),
        radial-gradient(circle at 76% 18%, rgba(var(--service-accent-rgb), 0.08), transparent 34%);
      overflow: hidden;
      isolation: isolate;
    }

    .service-page-window::before {
      content: "";
      position: absolute;
      inset: 74px 20px 20px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      background:
        radial-gradient(circle at 30% 24%, rgba(126, 217, 255, 0.06), transparent 20%),
        radial-gradient(circle at 78% 72%, rgba(var(--service-accent-rgb), 0.06), transparent 24%);
      pointer-events: none;
    }

    .service-page-window__top {
      position: absolute;
      top: 28px;
      left: 28px;
      display: flex;
      gap: 8px;
    }

    .service-page-window__top span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
    }

    .service-page-window__top span:nth-child(1) {
      background: #eb7f67;
    }

    .service-page-window__top span:nth-child(2) {
      background: #f2c164;
    }

    .service-page-window__top span:nth-child(3) {
      background: #86de89;
    }

    .service-page-window__pill {
      position: absolute;
      top: 24px;
      right: 24px;
      padding: 11px 17px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(247, 244, 239, 0.74);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .service-page-core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 136px;
      height: 136px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.86), transparent 18%),
        radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
        rgba(var(--service-accent-rgb), 0.84);
      box-shadow:
        inset -24px -24px 44px rgba(0, 0, 0, 0.18),
        0 0 54px rgba(var(--service-accent-rgb), 0.16);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .service-page-core::before,
    .service-page-core::after {
      content: "";
      position: absolute;
      inset: -18px;
      border-radius: 50%;
      border: 1px solid rgba(var(--service-accent-rgb), 0.14);
    }

    .service-page-core::after {
      inset: -46px;
      border-color: rgba(126, 217, 255, 0.1);
    }

    .service-page-node,
    .service-page-kpi,
    .service-page-badge {
      position: absolute;
      padding: 15px 17px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(9, 12, 15, 0.82);
      color: var(--text);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    }

    .service-page-node {
      max-width: 196px;
    }

    .service-page-node strong,
    .service-page-kpi strong {
      display: block;
      margin-bottom: 7px;
      font-size: 0.98rem;
      line-height: 1.28;
    }

    .service-page-node p,
    .service-page-kpi p {
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.56;
    }

    .service-page-badge {
      padding: 10px 14px;
      border-radius: 999px;
      color: rgba(247, 244, 239, 0.74);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .service-page-window > .service-page-node:nth-child(4) {
      left: 30px !important;
      top: 128px !important;
      right: auto !important;
      bottom: auto !important;
    }

    .service-page-window > .service-page-node:nth-child(5) {
      right: 30px !important;
      top: 152px !important;
      left: auto !important;
      bottom: auto !important;
    }

    .service-page-window > .service-page-node:nth-child(6) {
      left: 46px !important;
      bottom: 82px !important;
      right: auto !important;
      top: auto !important;
    }

    .service-page-window > .service-page-kpi:nth-child(7) {
      right: 30px !important;
      bottom: 86px !important;
      left: auto !important;
      top: auto !important;
      max-width: 206px;
    }

    .service-page-window > .service-page-badge,
    .service-page-window > .service-page-line {
      display: none;
    }

    .service-page-line {
      position: absolute;
      height: 1.5px;
      transform-origin: left center;
      background: linear-gradient(90deg, rgba(var(--service-accent-rgb), 0.4), rgba(126, 217, 255, 0.12));
      opacity: 0.8;
    }

    .service-page-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      margin-top: 28px;
    }

    .service-page-list {
      display: grid;
      gap: 14px;
      margin-top: 18px;
      list-style: none;
    }

    .service-page-list li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      line-height: 1.72;
    }

    .service-page-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.7em;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgb(var(--service-accent-rgb));
      box-shadow: 0 0 18px rgba(var(--service-accent-rgb), 0.28);
    }

    .service-page-links {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 22px;
    }

    .service-page-link {
      display: grid;
      gap: 10px;
      min-height: 168px;
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        rgba(9, 12, 15, 0.72);
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }

    .service-page-link:hover,
    .service-page-link:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(var(--service-accent-rgb), 0.24);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    }

    .service-page-link strong {
      font-size: 1rem;
      line-height: 1.32;
      color: var(--text);
    }

    .service-page-link p {
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.62;
    }

    .service-page-link span {
      margin-top: auto;
      color: rgba(var(--service-accent-rgb), 0.88);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    @media (max-width: 980px) {
      .error-layout {
        grid-template-columns: 1fr;
      }

      .error-card-grid {
        grid-template-columns: 1fr;
      }

      .error-orbit-stage {
        min-height: 360px;
      }

      .service-page-layout,
      .service-page-grid,
      .service-page-links {
        grid-template-columns: 1fr;
      }

      .service-page-window {
        min-height: 480px;
      }

      .service-page-card-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      body::before {
        opacity: 0.03;
        mix-blend-mode: normal;
      }

      .space-backdrop {
        opacity: 0.42;
        mix-blend-mode: normal;
      }

      .space-asteroid {
        filter:
          drop-shadow(0 0 16px rgba(255, 255, 255, 0.12))
          contrast(1.06)
          saturate(1.02)
          brightness(1.04);
      }

      .ambient-orb {
        display: none;
      }

      .hero-stage {
        mask-image: none;
      }

      .nav-shell,
      .mobile-panel,
      .eyebrow-pill,
      .hero-proof,
      .cookie-notice,
      .wa-floating {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

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

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      .ambient-orb,
      .wa-floating,
      .cookie-notice {
        transition: none !important;
      }
    }