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

		:root {
			--black: #060606;
			--white: #f3f3ed;
			--g100: #e4e4dd;
			--g200: #c5c5bc;
			--g400: #86867e;
			--g600: #424240;
			--g700: #282826;
			--g800: #141412;
			--display: 'Bebas Neue', sans-serif;
			--body: 'DM Sans', sans-serif;
			--mono: 'DM Mono', monospace;
			--border: rgba(243, 243, 237, 0.07);
		}

		html {
			scroll-behavior: smooth
		}

		body {
			background: var(--black);
			color: var(--white);
			font-family: var(--body);
			font-size: 16px;
			line-height: 1.6;
			overflow-x: hidden;
		}

		/* ── CURSOR (hidden, normal cursor used) ── */
		#cur, #cur-ring, #cur-lbl {
			display: none;
		}

		/* ── GRAIN ── */
		#grain {
			position: fixed;
			inset: 0;
			z-index: 9990;
			pointer-events: none;
			opacity: .03;
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
			animation: ga .5s steps(2) infinite
		}

		@keyframes ga {
			0% {
				transform: translate(0, 0)
			}

			25% {
				transform: translate(-2%, -3%)
			}

			50% {
				transform: translate(3%, 1%)
			}

			75% {
				transform: translate(-1%, 2%)
			}

			100% {
				transform: translate(2%, -1%)
			}
		}

		/* ── SCANLINE ── */
		#scanline {
			position: fixed;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, rgba(243, 243, 237, .04), transparent);
			pointer-events: none;
			z-index: 9989;
			top: -2px;
			animation: scan 8s linear infinite
		}

		@keyframes scan {
			0% {
				top: -2px
			}

			100% {
				top: 100vh
			}
		}

		/* ── LOADER ── */
		#loader {
			position: fixed;
			inset: 0;
			z-index: 9997;
			background: var(--black);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 32px;
			transition: opacity .7s, visibility .7s
		}

		#loader.hidden {
			opacity: 0;
			visibility: hidden
		}

		.ld-logo {
			font-family: var(--display);
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center
		}

		.ld-logo-img {
			height: 62px;
			width: auto;
			display: block;
			animation: lrev .8s cubic-bezier(.76, 0, .24, 1) both
		}

		@keyframes lrev {
			from {
				transform: translateY(100%)
			}

			to {
				transform: translateY(0)
			}
		}

		.ld-bar-w {
			width: 220px;
			height: 1px;
			background: rgba(243, 243, 237, .1)
		}

		.ld-bar {
			height: 100%;
			background: var(--white);
			width: 0;
			transition: width .05s linear
		}

		.ld-pct {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .15em;
			color: var(--g400)
		}

		.ld-status {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			color: var(--g600);
			text-transform: uppercase
		}

		/* ── STATUS BADGE ── */
		#status-badge {
			position: fixed;
			bottom: 28px;
			right: 28px;
			z-index: 300;
			display: flex;
			align-items: center;
			gap: 8px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			background: rgba(6, 6, 6, .85);
			border: 1px solid var(--border);
			padding: 8px 16px;
			text-decoration: none;
			cursor: pointer;
			transition: color .2s, border-color .2s, background .2s, bottom .5s cubic-bezier(0.4, 0, 0.2, 1);
			backdrop-filter: blur(12px);
			opacity: 0;
			transform: translateY(12px);
			transition: opacity .5s, transform .5s;
		}

		#status-badge:hover {
			color: #25d366;
			border-color: rgba(37, 211, 102, .5);
		}

		#status-badge.at-footer {
			bottom: 130px;
		}

		#status-badge.visible {
			opacity: 1;
			transform: translateY(0)
		}

		#status-badge::before {
			content: '';
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: #4ade80;
			animation: sblink 2.4s ease infinite
		}

		@keyframes sblink {

			0%,
			100% {
				opacity: .4
			}

			50% {
				opacity: 1
			}
		}

		/* ── TERMINAL TOOLTIP ── */
		#term-tip {
			position: fixed;
			pointer-events: none;
			z-index: 400;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			background: rgba(6, 6, 6, .95);
			border: 1px solid rgba(243, 243, 237, .12);
			padding: 10px 14px;
			min-width: 200px;
			opacity: 0;
			transform: translateY(6px);
			transition: opacity .18s, transform .18s;
		}

		#term-tip.visible {
			opacity: 1;
			transform: translateY(0)
		}

		.tt-line {
			color: var(--g600);
			margin-bottom: 2px
		}

		.tt-line span {
			color: var(--g200)
		}

		.tt-line.ok span {
			color: #4ade80
		}

		/* ── NAV ── */
		nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 200;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 5vw;
			height: 60px;
			border-bottom: 1px solid var(--border);
			background: rgba(6, 6, 6, .88);
			backdrop-filter: blur(20px);
			transform: translateY(-100%);
			transition: transform .6s cubic-bezier(.76, 0, .24, 1)
		}

		nav.visible {
			transform: translateY(0)
		}

		.nav-logo {
			text-decoration: none;
			display: flex;
			align-items: center
		}

		.nav-logo-img {
			height: 44px;
			width: auto;
			display: block;
			vertical-align: middle
		}

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

		.nav-links {
			display: flex;
			gap: 28px;
			list-style: none
		}

		.nav-links a {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
			transition: color .2s
		}

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

		#nav-clock {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			color: var(--g700);
			white-space: nowrap;
			border-left: 1px solid var(--border);
			padding-left: 20px
		}

		#nav-coords {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			color: var(--g700);
			padding-left: 16px
		}

		.nav-menu {
			display: flex;
			align-items: center;
			gap: 32px
		}

		.nav-right {
			display: flex;
			align-items: center;
			gap: 16px
		}

		.nav-toggle {
			display: none;
			flex-direction: column;
			justify-content: center;
			gap: 6px;
			width: 44px;
			height: 44px;
			padding: 10px;
			background: transparent;
			border: 1px solid var(--border);
			cursor: pointer;
			transition: border-color .2s
		}

		.nav-toggle:hover {
			border-color: var(--g400)
		}

		.nav-toggle-bar {
			display: block;
			width: 100%;
			height: 1.5px;
			background: var(--g400);
			transition: transform .3s, opacity .3s
		}

		nav.nav-open .nav-toggle-bar:nth-child(1) {
			transform: translateY(7.5px) rotate(45deg)
		}

		nav.nav-open .nav-toggle-bar:nth-child(2) {
			opacity: 0
		}

		nav.nav-open .nav-toggle-bar:nth-child(3) {
			transform: translateY(-7.5px) rotate(-45deg)
		}

		.nav-cta {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--black);
			background: var(--white);
			border: none;
			padding: 9px 22px;
			cursor: pointer;
			text-decoration: none;
			transition: opacity .2s;
			display: inline-block
		}

		.nav-cta:hover {
			opacity: .85
		}

		/* ── HERO ── */
		.hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 100px 5vw 72px;
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid var(--border)
		}

		#hero-canvas {
			display: none
		}

		.hero-grid {
			position: absolute;
			inset: 0;
			background-image: linear-gradient(rgba(243, 243, 237, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 243, 237, .018) 1px, transparent 1px);
			background-size: 72px 72px;
			z-index: 1;
			transition: background-position .1s ease-out
		}

		.hero-line-h {
			position: absolute;
			top: 42%;
			left: 0;
			right: 0;
			height: 1px;
			background: rgba(243, 243, 237, .02);
			z-index: 1
		}

		.hero-line-v {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 5vw;
			width: 1px;
			background: rgba(243, 243, 237, .025);
			z-index: 1
		}

		.hero-ticker {
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			overflow: hidden;
			margin-bottom: 48px;
			position: relative;
			z-index: 2;
			mask-image: linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%)
		}

		.ticker-track {
			display: flex;
			animation: ticker 24s linear infinite;
			width: max-content;
			padding: 12px 0
		}

		.ticker-item {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--g600);
			padding: 0 32px;
			white-space: nowrap
		}

		.ticker-item::after {
			content: '·';
			margin-left: 32px;
			color: var(--g700)
		}

		@keyframes ticker {
			from {
				transform: translateX(0)
			}

			to {
				transform: translateX(-50%)
			}
		}

		.hero-tag {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .18em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 12px;
			opacity: 0;
			transform: translateY(20px);
			transition: all .7s .1s ease;
			position: relative;
			z-index: 2
		}

		.hero-tag::before {
			content: '';
			width: 24px;
			height: 1px;
			background: var(--g600)
		}

		.hero-tag.visible {
			opacity: 1;
			transform: translateY(0)
		}

		.hero-headline {
			font-family: var(--display);
			font-size: clamp(32px, 6.5vw, 96px);
			line-height: .86;
			letter-spacing: .005em;
			color: var(--white);
			margin-bottom: 56px;
			position: relative;
			z-index: 2
		}

		.hero-headline .line {
			overflow: hidden;
			display: block
		}

		.hero-headline .line-inner {
			display: block;
			transform: translateY(110%);
			transition: transform .9s cubic-bezier(.76, 0, .24, 1)
		}

		.hero-headline .line-inner.visible {
			transform: translateY(0)
		}

		.hero-headline .line:nth-child(2) .line-inner {
			transition-delay: .12s
		}

		.hero-headline .line:nth-child(3) .line-inner {
			transition-delay: .24s
		}

		.outline {
			color: transparent;
			-webkit-text-stroke: 1.5px rgba(243, 243, 237, .22)
		}

		.outline-mid {
			color: transparent;
			-webkit-text-stroke: 1.5px rgba(243, 243, 237, .45)
		}

		/* GLITCH */
		.glitch-target {
			position: relative;
			display: inline-block
		}

		@keyframes glitch1 {

			0%,
			92%,
			100% {
				clip-path: none;
				transform: none
			}

			93% {
				clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%);
				transform: translate(-3px, 0)
			}

			95% {
				clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
				transform: translate(3px, 0)
			}

			97% {
				clip-path: none;
				transform: none
			}
		}

		@keyframes glitch2 {

			0%,
			92%,
			100% {
				opacity: 0
			}

			93% {
				opacity: .5;
				transform: translate(4px, -2px)
			}

			96% {
				opacity: .3;
				transform: translate(-4px, 2px)
			}

			98% {
				opacity: 0
			}
		}

		.glitch-target::before,
		.glitch-target::after {
			content: attr(data-text);
			position: absolute;
			left: 0;
			top: 0;
			font-family: var(--display);
			font-size: inherit;
			letter-spacing: inherit;
			line-height: inherit;
			pointer-events: none
		}

		.glitch-target::before {
			color: var(--white);
			animation: glitch1 7s ease-in-out infinite
		}

		.glitch-target::after {
			color: rgba(243, 243, 237, .5);
			animation: glitch2 7s ease-in-out infinite .05s
		}

		.hero-bottom {
			display: grid;
			grid-template-columns: 1fr auto;
			gap: 48px;
			align-items: end;
			position: relative;
			z-index: 2;
			opacity: 0;
			transform: translateY(24px);
			transition: all .8s .5s ease
		}

		.hero-bottom.visible {
			opacity: 1;
			transform: translateY(0)
		}

		.hero-desc {
			max-width: 400px;
			font-size: 15px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300
		}

		.hero-desc strong {
			color: var(--white);
			font-weight: 400
		}

		.hero-actions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 12px
		}

		.btn-primary {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--black);
			background: var(--white);
			border: none;
			padding: 16px 40px;
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
			transition: opacity .2s
		}

		.btn-primary:hover {
			opacity: .9
		}

		.btn-ghost {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			background: none;
			border: 1px solid rgba(243, 243, 237, .12);
			padding: 16px 40px;
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
			transition: all .25s
		}

		.btn-ghost:hover {
			color: var(--white);
			border-color: rgba(243, 243, 237, .38)
		}

		.scroll-cue {
			position: absolute;
			right: 5vw;
			bottom: 72px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			color: var(--g700);
			writing-mode: vertical-rl;
			text-transform: uppercase;
			display: flex;
			align-items: center;
			gap: 10px;
			z-index: 2
		}

		.scroll-cue::after {
			content: '';
			width: 1px;
			height: 52px;
			background: var(--g700);
			animation: scP 2.4s ease-in-out infinite
		}

		@keyframes scP {

			0%,
			100% {
				opacity: .2
			}

			50% {
				opacity: .8
			}
		}

		/* ── EYEBROW ── */
		.eyebrow {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .2em;
			text-transform: uppercase;
			color: var(--g600);
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 48px
		}

		.eyebrow::before {
			content: '';
			width: 20px;
			height: 1px;
			background: var(--g600)
		}

		/* ── DIAGONAL DIVIDERS ── */
		.diag-top {
			height: 40px;
			background: var(--black);
			clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
			margin-bottom: -1px;
			position: relative;
			z-index: 1
		}

		.diag-bot {
			height: 40px;
			background: var(--black);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
			margin-top: -1px;
			position: relative;
			z-index: 1
		}

		section.diagonal {
			position: relative
		}

		section.diagonal::before {
			content: '';
			display: block;
			height: 48px;
			background: var(--g800);
			clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%);
			margin-bottom: -2px
		}

		section.diagonal::after {
			content: '';
			display: block;
			height: 48px;
			background: var(--g800);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
			margin-top: -2px
		}

		/* ── SERVICES ── */
		.services {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.svc-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.svc-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white)
		}

		.svc-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 360px;
			margin-left: auto
		}

		.svc-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border-top: 1px solid var(--border);
			border-left: 1px solid var(--border)
		}

		.svc-card {
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 44px 36px;
			cursor: pointer;
			transition: background .3s;
			overflow: hidden;
			position: relative
		}

		.svc-card::after {
			content: '';
			position: absolute;
			inset: 0;
			background: rgba(243, 243, 237, .025);
			opacity: 0;
			transition: opacity .3s;
			pointer-events: none
		}

		.svc-card:hover::after {
			opacity: 1
		}

		.svc-card:hover .svc-arrow {
			transform: translate(5px, -5px)
		}

		a.svc-card {
			text-decoration: none;
			color: inherit;
			display: block;
		}

		.svc-num {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			color: var(--g600);
			margin-bottom: 36px
		}

		.svc-icon {
			margin-bottom: 24px;
			opacity: .45
		}

		.svc-name {
			font-family: var(--display);
			font-size: 34px;
			letter-spacing: .04em;
			color: var(--white);
			margin-bottom: 12px
		}

		.svc-desc {
			font-size: 13px;
			line-height: 1.85;
			color: var(--g400);
			font-weight: 300;
			margin-bottom: 24px
		}

		.svc-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 7px;
			margin-bottom: 32px
		}

		.svc-tag {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g600);
			border: 1px solid rgba(243, 243, 237, .07);
			padding: 4px 11px
		}

		.svc-arrow {
			font-size: 18px;
			color: var(--g400);
			transition: transform .25s;
			display: inline-block
		}

		/* ── CASE STUDY ── */
		.case-study {
			padding: 0 5vw;
			border-bottom: 1px solid var(--border);
			background: var(--g800)
		}

		.case-study::before,
		.case-study::after {
			content: '';
			display: block;
			height: 48px
		}

		.case-study::before {
			background: var(--black);
			clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%)
		}

		.case-study::after {
			background: var(--black);
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0)
		}

		.case-inner {
			display: grid;
			grid-template-columns: 1fr 1fr;
			min-height: 560px;
			border-left: 1px solid var(--border);
			border-right: 1px solid var(--border)
		}

		.case-left {
			padding: 72px 56px;
			border-right: 1px solid var(--border);
			display: flex;
			flex-direction: column;
			justify-content: space-between
		}

		.case-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g400);
			border: 1px solid rgba(243, 243, 237, .1);
			padding: 6px 14px;
			margin-bottom: 40px;
			width: fit-content
		}

		.case-badge::before {
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #4ade80;
			animation: sblink 2s ease infinite
		}

		.case-title {
			font-family: var(--display);
			font-size: clamp(36px, 4vw, 56px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white);
			margin-bottom: 24px
		}

		.case-desc {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			margin-bottom: 40px;
			max-width: 360px
		}

		.case-metrics {
			display: flex;
			gap: 40px;
			margin-bottom: 48px
		}

		.case-metric-num {
			font-family: var(--display);
			font-size: 40px;
			color: var(--white);
			line-height: 1
		}

		.case-metric-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
			margin-top: 4px
		}

		.case-link {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--white);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			border-bottom: 1px solid rgba(243, 243, 237, .2);
			padding-bottom: 4px;
			transition: border-color .2s;
			width: fit-content
		}

		.case-link:hover {
			border-color: var(--white)
		}

		.case-right {
			position: relative;
			overflow: hidden;
			background: var(--g700);
			display: flex;
			align-items: center;
			justify-content: center
		}

		.case-mock {
			width: 80%;
			border: 1px solid rgba(243, 243, 237, .08);
			background: var(--g800);
			position: relative;
			overflow: hidden
		}

		.case-mock-bar {
			height: 28px;
			background: var(--black);
			display: flex;
			align-items: center;
			padding: 0 12px;
			gap: 6px;
			border-bottom: 1px solid rgba(243, 243, 237, .06)
		}

		.case-mock-dot {
			width: 7px;
			height: 7px;
			border-radius: 50%
		}

		.case-mock-dot.dot-red { background: #f07070 }
		.case-mock-dot.dot-yellow { background: #f0c070 }
		.case-mock-dot.dot-green { background: #70c070 }

		.case-mock-content {
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 10px
		}

		.case-mock-hero {
			height: 80px;
			background: rgba(243, 243, 237, .04);
			border: 1px solid rgba(243, 243, 237, .06);
			display: flex;
			align-items: flex-end;
			padding: 12px;
			gap: 4px
		}

		.case-mock-bar-item {
			flex: 1;
			background: rgba(243, 243, 237, .1)
		}

		.case-mock-hero .case-mock-bar-item:nth-child(1) { height: 30% }
		.case-mock-hero .case-mock-bar-item:nth-child(2) { height: 60% }
		.case-mock-hero .case-mock-bar-item:nth-child(3) { height: 45% }
		.case-mock-hero .case-mock-bar-item:nth-child(4) { height: 80% }
		.case-mock-hero .case-mock-bar-item:nth-child(5) { height: 55% }
		.case-mock-hero .case-mock-bar-item:nth-child(6) { height: 70% }
		.case-mock-hero .case-mock-bar-item:nth-child(7) { height: 40% }
		.case-mock-hero .case-mock-bar-item:nth-child(8) { height: 90% }

		.case-mock-row {
			display: flex;
			gap: 8px
		}

		.case-mock-block {
			flex: 1;
			height: 36px;
			background: rgba(243, 243, 237, .03);
			border: 1px solid rgba(243, 243, 237, .05)
		}

		.case-mock-block.tall {
			height: 52px
		}

		.case-mock-block.tall.flex-2 {
			flex: 2
		}

		.case-mock-text {
			height: 8px;
			background: rgba(243, 243, 237, .06);
			border-radius: 2px;
			width: 70%
		}

		.case-mock-text.short {
			width: 45%
		}

		.case-right-label {
			position: absolute;
			bottom: 24px;
			right: 24px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600)
		}



		/* ── PORTFOLIO ── */
		.portfolio {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.port-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 56px
		}

		.port-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white)
		}

		.view-all {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
			padding-bottom: 2px;
			transition: all .2s
		}

		.view-all:hover {
			color: var(--white);
			border-color: var(--white)
		}

		.port-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(243, 243, 237, .06)
		}

		.port-item {
			background: var(--black);
			padding: 36px 30px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			text-decoration: none;
			cursor: pointer;
			transition: background .3s;
			position: relative;
			overflow: hidden
		}

		.port-item:hover {
			background: rgba(243, 243, 237, .03)
		}

		.port-item:hover .port-arrow {
			opacity: 1;
			transform: translate(3px, -3px)
		}

		.port-content {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			gap: 10px;
			flex: 1
		}

		.port-num {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--g600);
			letter-spacing: .1em
		}

		.port-name {
			font-size: 15px;
			font-weight: 500;
			color: var(--white);
			line-height: 1.4
		}

		.port-desc {
			font-size: 13px;
			color: var(--g400);
			line-height: 1.65;
			font-weight: 300;
			flex: 1
		}

		.port-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 14px;
			border-top: 1px solid rgba(243, 243, 237, .06)
		}

		.port-industry {
			display: flex;
			align-items: center;
			gap: 7px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .07em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.industry-dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			flex-shrink: 0
		}

		.port-arrow {
			font-size: 14px;
			color: var(--g400);
			opacity: 0;
			transition: all .25s;
			display: inline-block
		}

		.dot-finance {
			background: #7eb8f7
		}

		.dot-fb {
			background: #f7c27e
		}

		.dot-realestate {
			background: #a8e6b0
		}

		.dot-logistics {
			background: #f7a07e
		}

		.dot-health {
			background: #d4a0f0
		}

		.dot-saas {
			background: #f3f3ed
		}

		/* ── STATS ── */
		.stats-wrap {
			background: var(--g800);
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border)
		}

		.stats-diag-edge {
			background: var(--black);
			height: 48px
		}

		.stats-diag-edge.stats-diag-top {
			clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 100%)
		}

		.stats-diag-edge.stats-diag-bottom {
			clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0)
		}

		.stats-inner {
			border: none;
			background: var(--g800)
		}

		.stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			background: var(--g800)
		}

		.stats::before,
		.stats::after {
			display: none
		}

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

		.stat-item {
			padding: 52px 5vw;
			border-right: 1px solid var(--border)
		}

		.stat-item:last-child {
			border-right: none
		}

		.stat-num {
			font-family: var(--display);
			font-size: 64px;
			line-height: 1;
			color: var(--white);
			margin-bottom: 8px;
			letter-spacing: .02em
		}

		.stat-num sup {
			font-size: 34px;
			color: var(--g400)
		}

		.stat-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.stat-display {
			font-family: var(--display);
			font-size: 64px;
			line-height: 1;
			color: var(--white);
			margin-bottom: 8px;
			letter-spacing: .02em
		}

		/* ── PROCESS ── */
		.process {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.process-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.process-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white)
		}

		.process-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 360px;
			margin-left: auto
		}

		.process-steps {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			border-top: 1px solid var(--border);
			border-left: 1px solid var(--border)
		}

		.process-step {
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 40px 32px;
			position: relative;
			cursor: pointer;
			transition: background .3s
		}

		.process-step:hover {
			background: rgba(243, 243, 237, .02)
		}

		.process-step-num {
			font-family: var(--display);
			font-size: 72px;
			line-height: 1;
			color: rgba(243, 243, 237, .04);
			margin-bottom: -16px;
			letter-spacing: .02em
		}

		.process-step-name {
			font-family: var(--display);
			font-size: 28px;
			letter-spacing: .04em;
			color: var(--white);
			margin-bottom: 12px
		}

		.process-step-desc {
			font-size: 13px;
			line-height: 1.85;
			color: var(--g400);
			font-weight: 300
		}

		.process-step-bar {
			height: 2px;
			background: rgba(243, 243, 237, .06);
			margin-top: 24px;
			position: relative;
			overflow: hidden
		}

		.process-step-bar::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			background: var(--white);
			width: 0;
			transition: width .5s .1s ease
		}

		.process-step:hover .process-step-bar::after {
			width: 100%
		}

		/* ── CLIENTS ── */
		.clients {
			padding: 64px 0;
			border-bottom: 1px solid var(--border);
			overflow: hidden
		}

		.clients-inner {
			padding: 0 5vw;
			margin-bottom: 36px;
			display: flex;
			justify-content: space-between;
			align-items: center
		}

		.clients-count {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.marquee-wrap {
			position: relative;
			overflow: hidden;
			mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%)
		}

		.marquee-track {
			display: flex;
			animation: marquee 30s linear infinite;
			width: max-content
		}

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

		@keyframes marquee {
			from {
				transform: translateX(0)
			}

			to {
				transform: translateX(-50%)
			}
		}

		.client-chip {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
			padding: 12px 28px;
			border-right: 1px solid var(--border);
			white-space: nowrap;
			transition: color .2s;
			cursor: pointer
		}

		.client-chip:hover {
			color: var(--white)
		}

		/* ── TECH ── */
		.techstack {
			padding: 64px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.tech-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 40px
		}

		.tech-pill {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g400);
			border: 1px solid rgba(243, 243, 237, .08);
			padding: 9px 18px;
			transition: all .25s;
			cursor: pointer
		}

		.tech-pill:hover {
			color: var(--white);
			border-color: rgba(243, 243, 237, .3);
			background: rgba(243, 243, 237, .03)
		}

		/* ── TESTIMONIALS ── */
		.testimonials {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.testi-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.testi-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white)
		}

		.testi-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 340px;
			margin-left: auto
		}

		.testi-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(243, 243, 237, .06)
		}

		.testi-card {
			background: var(--black);
			padding: 44px 36px;
			display: flex;
			flex-direction: column;
			gap: 22px;
			position: relative;
			transition: background .3s;
			cursor: pointer
		}

		.testi-card:hover {
			background: rgba(243, 243, 237, .02)
		}

		.testi-qmark {
			font-family: var(--display);
			font-size: 80px;
			line-height: 1;
			color: rgba(243, 243, 237, .05);
			position: absolute;
			top: 24px;
			right: 28px
		}

		.testi-stars {
			display: flex;
			gap: 3px
		}

		.testi-star {
			width: 10px;
			height: 10px;
			background: var(--white);
			opacity: .7;
			clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
		}

		.testi-text {
			font-size: 14px;
			line-height: 1.95;
			color: var(--g200);
			font-weight: 300;
			font-style: italic;
			position: relative;
			z-index: 1;
			flex: 1
		}

		.testi-divider {
			width: 28px;
			height: 1px;
			background: rgba(243, 243, 237, .1)
		}

		.testi-name {
			font-size: 14px;
			font-weight: 500;
			color: var(--white)
		}

		.testi-role {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600)
		}

		/* ── CTA ── */
		.cta {
			padding: 120px 5vw;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			overflow: hidden
		}

		.cta-glow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 700px;
			height: 360px;
			background: radial-gradient(ellipse, rgba(243, 243, 237, .035) 0%, transparent 70%);
			pointer-events: none
		}

		.cta-ring {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600px;
			height: 600px;
			border-radius: 50%;
			border: 1px solid rgba(243, 243, 237, .03);
			pointer-events: none;
			animation: rP 6s ease-in-out infinite
		}

		.cta-ring2 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 380px;
			height: 380px;
			border-radius: 50%;
			border: 1px solid rgba(243, 243, 237, .05);
			pointer-events: none;
			animation: rP 6s ease-in-out infinite .5s
		}

		@keyframes rP {

			0%,
			100% {
				transform: translate(-50%, -50%) scale(1)
			}

			50% {
				transform: translate(-50%, -50%) scale(1.04)
			}
		}

		.cta-eyebrow {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .22em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 28px;
			position: relative;
			z-index: 1
		}

		.cta-title {
			font-family: var(--display);
			font-size: clamp(52px, 10vw, 130px);
			line-height: .88;
			letter-spacing: .01em;
			color: var(--white);
			margin-bottom: 52px;
			position: relative;
			z-index: 1;
			white-space: nowrap
		}

		.cta-title .ghost {
			color: transparent;
			-webkit-text-stroke: 1.5px rgba(243, 243, 237, .18)
		}

		.cta-actions {
			display: flex;
			gap: 14px;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;
			z-index: 1
		}

		.cta-contact {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			color: var(--g400);
			margin-top: 20px;
			position: relative;
			z-index: 1
		}

		.cta-contact a {
			color: var(--g400);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
			padding-bottom: 1px;
			transition: color .2s
		}

		.cta-contact a:hover {
			color: var(--white)
		}

		/* ── FOOTER ── */
		footer {
			border-top: 1px solid var(--border);
			padding: 36px 5vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 24px;
			flex-wrap: wrap
		}

		.footer-logo {
			display: flex;
			align-items: center
		}

		.footer-logo-img {
			height: 48px;
			width: auto;
			display: block
		}

		.about-logo {
			margin-bottom: 32px;
		}
		.about-logo-img {
			height: 160px;
			width: auto;
			display: block;
		}

		.footer-nav {
			display: flex;
			gap: 28px;
			list-style: none
		}

		.footer-nav a {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			text-decoration: none;
			transition: color .2s
		}

		.footer-nav a:hover {
			color: var(--white)
		}

		.footer-copy {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--g600);
			letter-spacing: .06em
		}

		.decode-title {
			font-family: var(--display);
			font-size: clamp(32px, 5vw, 64px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white);
			white-space: nowrap
		}

		.svc-big-title {
			font-family: var(--display);
			font-size: clamp(32px, 5vw, 64px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--white);
			white-space: nowrap
		}

		/* ── MAGNETIC ── */
		.magnetic {
			display: inline-block;
			transition: transform .4s cubic-bezier(.23, 1, .32, 1)
		}

		/* ── SCROLL REVEAL ── */
		.reveal {
			opacity: 0;
			transform: translateY(32px);
			transition: opacity .8s ease, transform .8s ease
		}

		.reveal.in {
			opacity: 1;
			transform: translateY(0)
		}

		.nav-links a.active {
			color: var(--white)
		}

		.nav-dropdown {
			position: relative;
		}
		.nav-dropdown-toggle {
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}
		.nav-dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			margin-top: 4px;
			background: rgba(6, 6, 6, .98);
			border: 1px solid var(--border);
			padding: 8px 0;
			min-width: 180px;
			list-style: none;
			opacity: 0;
			visibility: hidden;
			transition: opacity .2s, visibility .2s;
			z-index: 100;
		}
		.nav-dropdown:hover .nav-dropdown-menu {
			opacity: 1;
			visibility: visible;
		}
		.nav-dropdown-menu a {
			display: block;
			padding: 10px 20px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
			transition: color .2s, background .2s;
		}
		.nav-dropdown-menu a:hover {
			color: var(--white);
			background: rgba(243, 243, 237, .06);
		}

		.dot-creative { background: #d4a0f0 }
		.dot-construction { background: #f7c27e }
		.dot-travel { background: #7eb8f7 }
		.dot-interiors { background: #a8e6b0 }
		.dot-telecom { background: #f7a07e }
		.dot-architecture { background: #c5c5bc }

		.page-hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 100px 5vw 72px;
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid var(--border);
		}
		.page-hero .hero-grid {
			position: absolute;
			inset: 0;
			background-image: linear-gradient(rgba(243,243,237,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(243,243,237,.018) 1px, transparent 1px);
			background-size: 72px 72px;
			z-index: 0;
		}
		.page-hero .hero-tag { position: relative; z-index: 1; }
		.page-hero .hero-headline { position: relative; z-index: 1; margin-bottom: 24px; }
		.page-hero .hero-desc { position: relative; z-index: 1; max-width: 480px; }
		.page-hero .hero-actions { position: relative; z-index: 1; }
		.page-hero .hero-headline { font-size: clamp(32px, 6vw, 72px); }
		.contact-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; padding: 96px 5vw; align-items: start; }
		.contact-form { display: flex; flex-direction: column; gap: 20px; }
		.contact-form label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--g600); display: block; margin-bottom: -8px; }
		.contact-form input, .contact-form select, .contact-form textarea {
			font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
			background: transparent; border: 1px solid var(--border); color: var(--white);
			padding: 14px 16px; width: 100%; transition: border-color .2s;
		}
		.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: rgba(243,243,237,.4); }
		.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--g600); }
		.contact-form textarea { min-height: 120px; resize: vertical; }
		.contact-form .btn-submit { width: 100%; margin-top: 8px; cursor: pointer; }
		.contact-form .captcha-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g600);
			display: block;
			margin-bottom: -8px;
		}
		.contact-form .h-captcha {
			display: block;
			width: 100%;
			box-sizing: border-box;
			padding: 14px 16px;
			min-height: 78px;
			border: 1px solid var(--border);
			background: transparent;
			color: var(--white);
			transition: border-color .2s;
			outline: none;
		}
		.contact-form .h-captcha:focus-within {
			outline: none;
			border-color: rgba(243, 243, 237, .4);
		}
		.contact-form .h-captcha > div {
			background: transparent !important;
			border: none !important;
		}
		.contact-form .h-captcha iframe {
			border: none !important;
		}
		.contact-info { display: flex; flex-direction: column; gap: 0; }
		.contact-block { padding: 32px 0; border-bottom: 1px solid var(--border); }
		.contact-block:first-child { padding-top: 0; }
		.contact-block h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--g600); margin-bottom: 16px; }
		.contact-block p, .contact-block a { font-size: 14px; color: var(--g200); line-height: 1.7; }
		.contact-block a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--g600); transition: border-color .2s; }
		.contact-block a:hover { border-color: var(--white); }
		.contact-steps { list-style: none; }
		.contact-steps li { font-family: var(--mono); font-size: 11px; color: var(--g400); margin-bottom: 8px; }
		.contact-steps li strong { color: var(--white); }
		.form-success { font-family: var(--mono); font-size: 12px; padding: 24px; background: rgba(6,6,6,.9); border: 1px solid rgba(37,211,102,.3); color: #4ade80; }
		.form-success .tt-line { margin-bottom: 6px; }
		.founder-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; padding: 96px 5vw; border-bottom: 1px solid var(--border); }
		.founder-avatar { width: 200px; height: 200px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 72px; color: var(--g600); letter-spacing: .02em; }
		.founder-info h3 { font-family: var(--display); font-size: 32px; color: var(--white); margin-bottom: 8px; }
		.founder-info .role { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--g600); margin-bottom: 20px; }
		.founder-info p { font-size: 14px; line-height: 1.9; color: var(--g400); margin-bottom: 20px; }
		.founder-links a { font-family: var(--mono); font-size: 11px; margin-right: 20px; color: var(--g400); text-decoration: none; }
		.founder-links a:hover { color: var(--white); }
		.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(243,243,237,.06); border-top: 1px solid var(--border); }
		.value-card { background: var(--black); padding: 40px 32px; }
		.value-card h4 { font-family: var(--display); font-size: 24px; color: var(--white); margin-bottom: 12px; }
		.value-card p { font-size: 13px; line-height: 1.85; color: var(--g400); }
		.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
		.why-item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 32px; }
		.why-item h4 { font-family: var(--display); font-size: 22px; color: var(--white); margin-bottom: 10px; }
		.why-item p { font-size: 13px; color: var(--g400); line-height: 1.8; }
		.marquee-strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, black 5%, black 95%, transparent 100%); }
		.marquee-strip .marquee-inner { display: flex; width: max-content; animation: ticker 35s linear infinite; padding: 16px 0; }
		.marquee-strip span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--g600); padding: 0 28px; white-space: nowrap; }
		.marquee-strip span::after { content: '·'; margin-left: 28px; color: var(--g700); }

		/* ── RESPONSIVE ── */
		@media (min-width: 768px) and (max-width: 1023px) {
			.svc-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.port-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.process-steps {
				grid-template-columns: repeat(2, 1fr);
			}
			.testi-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 1023px) {
			.nav-toggle {
				display: flex;
			}
			.nav-logo,
			.nav-toggle {
				position: relative;
				z-index: 201;
			}
			.nav-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .5);
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transition: opacity .3s ease, visibility .3s ease;
				z-index: 198;
				-webkit-tap-highlight-color: transparent;
			}
			nav.nav-open .nav-overlay {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}
			.nav-menu {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100vh;
				height: 100dvh;
				background: rgba(6, 6, 6, .98);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-start;
				padding: 80px 5vw 48px;
				gap: 0;
				transform: translateX(100%);
				visibility: hidden;
				transition: transform .35s cubic-bezier(.76, 0, .24, 1), visibility .35s;
				z-index: 199;
				overflow-y: auto;
				overflow-x: hidden;
				-webkit-overflow-scrolling: touch;
				touch-action: pan-y;
			}
			nav.nav-open .nav-menu {
				transform: translateX(0);
				visibility: visible;
			}
			.nav-center {
				flex-direction: column;
				align-items: flex-start;
				gap: 24px;
			}
			.nav-links {
				flex-direction: column;
				gap: 4px;
			}
			.nav-links a {
				display: block;
				padding: 14px 0;
				font-size: 14px;
			}
			#nav-clock,
			#nav-coords {
				display: none;
			}
			.nav-dropdown-menu {
				position: static;
				margin-top: 8px;
				margin-left: 16px;
				opacity: 1;
				visibility: visible;
				border: none;
				padding: 0 0 8px;
				min-width: 0;
			}
			.nav-dropdown:hover .nav-dropdown-menu {
				opacity: 1;
				visibility: visible;
			}
			.nav-dropdown-menu a {
				padding: 10px 0;
				font-size: 12px;
			}
			.nav-right {
				margin-top: 24px;
				padding-top: 24px;
				border-top: 1px solid var(--border);
			}
			.nav-cta {
				min-height: 48px;
				padding: 14px 28px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
			.hero {
				padding: 80px 5vw 56px;
			}
			.hero-ticker {
				margin-bottom: 32px;
			}
			.hero-headline {
				margin-bottom: 40px;
			}
			.hero-bottom {
				grid-template-columns: 1fr;
				gap: 28px;
			}
			.hero-actions {
				align-items: flex-start;
			}
			.hero-desc {
				max-width: 100%;
			}
			.scroll-cue {
				display: none;
			}
			.services {
				padding: 64px 5vw;
			}
			.svc-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}
			.svc-sub {
				margin-left: 0;
			}
			.svc-grid {
				grid-template-columns: 1fr;
			}
			.svc-card {
				padding: 32px 24px;
			}
			.svc-name {
				font-size: 28px;
			}
			.case-inner {
				grid-template-columns: 1fr;
				min-height: auto;
			}
			.case-left {
				padding: 48px 24px;
			}
			.case-metrics {
				flex-wrap: wrap;
				gap: 24px;
			}
			.portfolio {
				padding: 64px 5vw;
			}
			.port-header {
				flex-direction: column;
				align-items: flex-start;
				gap: 24px;
				margin-bottom: 40px;
			}
			.port-grid {
				grid-template-columns: 1fr;
			}
			.port-item {
				padding: 28px 24px;
			}
			.stats .stat-wrap {
				grid-template-columns: 1fr;
			}
			.stat-item {
				border-right: none;
				border-bottom: 1px solid var(--border);
				padding: 40px 5vw;
			}
			.stat-item:last-child {
				border-bottom: none;
			}
			.stat-num,
			.stat-display {
				font-size: 48px;
			}
			.stat-num sup {
				font-size: 24px;
			}
			.process {
				padding: 64px 5vw;
			}
			.process-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}
			.process-sub {
				margin-left: 0;
			}
			.process-steps {
				grid-template-columns: 1fr;
			}
			.process-step {
				padding: 32px 24px;
			}
			.process-step-num {
				font-size: 56px;
			}
			.process-step-name {
				font-size: 24px;
			}
			.clients-inner {
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
			}
			.testimonials {
				padding: 64px 5vw;
			}
			.testi-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}
			.testi-sub {
				margin-left: 0;
			}
			.testi-grid {
				grid-template-columns: 1fr;
			}
			.testi-card {
				padding: 32px 24px;
			}
			.cta {
				padding: 80px 5vw;
			}
			.cta-title {
				white-space: normal;
				font-size: clamp(36px, 10vw, 72px);
			}
			.cta-actions {
				gap: 12px;
			}
			.btn-primary,
			.btn-ghost {
				min-height: 48px;
				padding: 14px 32px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
			footer {
				flex-direction: column;
				align-items: flex-start;
				padding: 32px 5vw;
			}
			.footer-nav {
				flex-wrap: wrap;
			}
			.page-hero {
				padding: 80px 5vw 56px;
			}
			.contact-wrap {
				grid-template-columns: 1fr;
				gap: 48px;
				padding: 64px 5vw;
			}
			.founder-section {
				grid-template-columns: 1fr;
				gap: 40px;
				padding: 64px 5vw;
			}
			.founder-avatar {
				width: 140px;
				height: 140px;
				font-size: 52px;
			}
			.founder-info h3 {
				font-size: 26px;
			}
			.founder-links a {
				display: inline-block;
				margin-bottom: 8px;
			}
			.values-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.value-card {
				padding: 28px 20px;
			}
			.value-card h4 {
				font-size: 20px;
			}
			.why-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.why-item {
				padding: 28px 20px;
			}
			.why-item h4 {
				font-size: 18px;
			}
			.decode-title {
				white-space: normal;
			}
			.svc-big-title {
				white-space: normal;
			}
			#status-badge {
				bottom: 20px;
				right: 20px;
				padding: 10px 14px;
				font-size: 9px;
			}
		}

		@media (max-width: 767px) {
			nav {
				padding: 0 4vw;
			}
			.hero {
				padding: 60px 4vw 48px;
			}
			.hero-headline {
				font-size: clamp(28px, 8vw, 48px);
				margin-bottom: 32px;
			}
			.eyebrow {
				margin-bottom: 32px;
			}
			.services {
				padding: 48px 4vw;
			}
			.svc-intro {
				margin-bottom: 40px;
			}
			.port-big-title,
			.process-big-title,
			.testi-big-title {
				font-size: clamp(32px, 8vw, 44px);
			}
			.case-title {
				font-size: clamp(28px, 6vw, 40px);
			}
			.case-left {
				padding: 36px 20px;
			}
			.cta-title {
				font-size: clamp(32px, 9vw, 52px);
			}
			.page-hero {
				padding: 60px 4vw 48px;
			}
			.page-hero .hero-headline {
				font-size: clamp(28px, 7vw, 44px);
			}
			.contact-wrap {
				padding: 48px 4vw;
			}
			.contact-block {
				padding: 24px 0;
			}
			.founder-section {
				padding: 48px 4vw;
			}
			.values-grid {
				grid-template-columns: 1fr;
			}
			.why-grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 479px) {
			.nav-logo-img {
				height: 36px;
			}
			.ld-logo-img {
				height: 48px;
			}
			.hero-ticker .ticker-item {
				font-size: 10px;
				padding: 0 20px;
			}
			.hero-tag {
				font-size: 9px;
			}
			.svc-card {
				padding: 24px 20px;
			}
			.port-item {
				padding: 24px 20px;
			}
			.port-name {
				font-size: 14px;
			}
			.testi-card {
				padding: 24px 20px;
			}
			.testi-qmark {
				font-size: 56px;
			}
			.client-chip {
				padding: 10px 20px;
				font-size: 10px;
			}
			.footer-logo-img {
				height: 40px;
			}
			.about-logo-img {
				height: 120px;
			}
		}