:root {
  --bg: #050507;
  --bg-2: #090a10;
  --surface: #10131d;
  --surface-2: #151927;
  --surface-3: #0c0f17;
  --text: #f6f7fb;
  --text-2: #a9b0c2;
  --muted: #697187;
  --violet: #8b5cf6;
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --page: min(1240px, calc(100vw - 64px));
  --ease: cubic-bezier(.2, .75, .25, 1);
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: clip;
  background:
    radial-gradient(circle at 10% 3%, rgba(139,92,246,.1), transparent 31rem),
    radial-gradient(circle at 92% 18%, rgba(34,211,238,.07), transparent 32rem),
    linear-gradient(180deg, #050507, #07080d 42%, #050507);
}
body.menu-open, body.lightbox-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; }
::selection { color: #fff; background: rgba(139,92,246,.82); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.no-js .preloader { display: none; }
.no-js .reveal { opacity: 1; transform: none; filter: none; clip-path: none; }
.noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .105;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.ambient-canvas { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .58; pointer-events: none; }
.scroll-sweep { position: fixed; z-index: -1; left: -20vw; top: 36vh; width: 42vw; height: 42vw; border-radius: 50%; background: rgba(139,92,246,.09); filter: blur(90px); pointer-events: none; will-change: transform; }

.section-shell { width: var(--page); margin-inline: auto; }
.section-pad { padding-block: clamp(96px, 9.5vw, 150px); }
.kicker { margin: 0 0 17px; color: var(--cyan); font: 700 .68rem/1 Space Mono, monospace; letter-spacing: .17em; text-transform: uppercase; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 58px; align-items: end; margin-bottom: 60px; will-change: transform; }
.section-heading h2 { margin: 0; max-width: 780px; font: 600 clamp(2.45rem, 4.35vw, 4.45rem)/1 Space Grotesk, sans-serif; letter-spacing: -.05em; }
.section-heading__intro { margin: 0; max-width: 470px; color: var(--text-2); font-size: clamp(.98rem, 1.2vw, 1.1rem); }

.preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #030305; transition: opacity .7s var(--ease), visibility .7s var(--ease); }
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader__inner { width: min(420px, calc(100vw - 48px)); text-align: center; }
.preloader__wordmark { display: block; color: transparent; font: 700 clamp(1.25rem, 4vw, 2rem)/1 Space Grotesk, sans-serif; letter-spacing: .18em; background: linear-gradient(90deg, #fff, #9f8cff 48%, #50e6ff); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(139,92,246,.42)); }
.preloader__track { height: 2px; overflow: hidden; margin: 27px 0 15px; background: rgba(255,255,255,.1); }
.preloader__track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 24px var(--cyan); animation: load 1.45s var(--ease) forwards; }
.preloader__status { color: var(--muted); font: .65rem Space Mono, monospace; letter-spacing: .2em; text-transform: uppercase; animation: statusPulse 1s ease-in-out infinite alternate; }
@keyframes load { to { width: 100%; } }
@keyframes statusPulse { to { color: var(--text-2); } }

.cursor { position: fixed; z-index: 10000; left: 0; top: 0; pointer-events: none; opacity: 0; }
.cursor--dot { width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; }
.cursor--ring { display: grid; place-items: center; width: 46px; height: 46px; margin: -23px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; backdrop-filter: blur(2px); transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, border-color .25s; }
.cursor--ring span { opacity: 0; white-space: nowrap; font: 700 .47rem Space Mono, monospace; letter-spacing: .08em; }
.cursor--ring.is-active { width: 86px; height: 86px; margin: -43px; border-color: rgba(255,255,255,.42); background: rgba(139,92,246,.88); box-shadow: 0 0 44px rgba(139,92,246,.38); }
.cursor--ring.is-active span { opacity: 1; }
.cursor--ring.is-link { width: 65px; height: 65px; margin: -32.5px; border-color: var(--cyan); }
.scroll-progress { position: fixed; z-index: 110; left: 0; top: 0; width: 100%; height: 2px; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 15px var(--cyan); }

.site-header { position: fixed; z-index: 100; left: 50%; top: 17px; width: var(--page); height: var(--header-h); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 0 17px 0 23px; border: 1px solid transparent; border-radius: 18px; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; }
.site-header.is-scrolled { border-color: var(--line); background: rgba(7,8,13,.78); backdrop-filter: blur(22px); box-shadow: 0 18px 70px rgba(0,0,0,.28); }
.site-header.is-hidden { transform: translate(-50%, -130%); }
.wordmark { position: relative; display: inline-flex; align-items: center; white-space: nowrap; font: 700 .86rem/1 Space Grotesk, sans-serif; letter-spacing: .16em; }
.wordmark--glow span { color: #f7f7ff; text-shadow: 0 0 18px rgba(139,92,246,.28); transition: color .25s, text-shadow .25s; }
.wordmark--glow i { width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px var(--cyan), 0 0 24px rgba(139,92,246,.55); animation: wordmarkPulse 2.1s ease-in-out infinite; }
.wordmark--glow::after { content: ''; position: absolute; left: 0; right: 13px; bottom: -8px; height: 1px; transform: scaleX(.2); transform-origin: left; background: linear-gradient(90deg, var(--violet), var(--cyan), transparent); opacity: .72; transition: transform .35s var(--ease); }
.wordmark--glow:hover span { color: #fff; text-shadow: 0 0 12px rgba(34,211,238,.55), 0 0 26px rgba(139,92,246,.48); }
.wordmark--glow:hover::after { transform: scaleX(1); }
@keyframes wordmarkPulse { 50% { transform: scale(1.35); box-shadow: 0 0 18px var(--cyan), 0 0 34px rgba(139,92,246,.72); } }
.desktop-nav { justify-self: center; display: flex; gap: 27px; }
.desktop-nav a { position: relative; color: var(--text-2); font-size: .8rem; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: transform .25s; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--text); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); font-size: .77rem; font-weight: 700; }
.header-cta span { color: var(--cyan); }
.menu-toggle { display: none; justify-self: end; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); }
.menu-toggle span { display: block; width: 18px; height: 1px; margin: 5px auto; background: #fff; }

.mobile-menu { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.mobile-menu__backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(0,0,0,.58); transition: opacity .4s; }
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; width: min(520px, 100%); height: 100%; padding: 28px clamp(28px, 7vw, 64px) 46px; transform: translateX(100%); background: radial-gradient(circle at 90% 8%, rgba(139,92,246,.25), transparent 22rem), #07080d; transition: transform .55s var(--ease); }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__top { display: flex; justify-content: space-between; color: var(--muted); font: .68rem Space Mono, monospace; letter-spacing: .15em; text-transform: uppercase; }
.mobile-menu__close { border: 0; background: none; cursor: pointer; }
.mobile-menu nav { display: grid; margin: auto 0; }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; opacity: 0; transform: translateX(28px); border-bottom: 1px solid var(--line); font: 600 clamp(2rem, 8vw, 4.2rem)/1 Space Grotesk, sans-serif; letter-spacing: -.04em; transition: transform .45s var(--ease), opacity .45s; }
.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu nav a:nth-child(2) { transition-delay: .04s; }.mobile-menu nav a:nth-child(3) { transition-delay: .08s; }.mobile-menu nav a:nth-child(4) { transition-delay: .12s; }.mobile-menu nav a:nth-child(5) { transition-delay: .16s; }.mobile-menu nav a:nth-child(6) { transition-delay: .2s; }
.mobile-menu nav a span { color: var(--cyan); font: .62rem Space Mono, monospace; }
.mobile-menu__actions { display: grid; gap: 10px; color: var(--text-2); font-size: .9rem; }

.hero { position: relative; display: grid; align-items: center; min-height: 100svh; padding-top: 114px; padding-bottom: 64px; }
.hero::before { content: ''; position: absolute; inset: 9% -20% auto 42%; height: 560px; background: radial-gradient(circle, rgba(139,92,246,.17), transparent 64%); filter: blur(10px); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(38px, 6vw, 88px); width: 100%; }
.hero__copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--text-2); font: 700 .66rem Space Mono, monospace; letter-spacing: .14em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #5df0a5; box-shadow: 0 0 0 6px rgba(93,240,165,.08), 0 0 20px rgba(93,240,165,.55); animation: status 1.7s ease-in-out infinite; }
@keyframes status { 50% { opacity: .55; transform: scale(.82); } }
.hero__name { margin: 0 0 17px; color: var(--cyan); font: 700 .68rem Space Mono, monospace; letter-spacing: .17em; }
.hero__title { margin: 0; max-width: 760px; font: 600 clamp(3.25rem, 5.9vw, 6.5rem)/.94 Space Grotesk, sans-serif; letter-spacing: -.067em; }
.gradient-text { color: transparent; background: linear-gradient(115deg, #fff 5%, #a98dff 42%, #52e5ff 86%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 28px rgba(139,92,246,.18)); }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-inner { display: inline-block; opacity: 0; transform: translateY(115%) rotate(3deg); filter: blur(9px); }
.hero__description { max-width: 640px; margin: 26px 0 0; color: var(--text-2); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 21px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: .8rem; font-weight: 800; transition: border-color .28s, background .28s, box-shadow .28s, transform .2s; }
.btn::before { content: ''; position: absolute; inset: 0; transform: translateX(-115%); background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transition: transform .6s; }
.btn:hover::before { transform: translateX(115%); }
.btn--primary { border-color: transparent; background: linear-gradient(105deg, var(--violet), var(--blue) 56%, var(--cyan)); box-shadow: 0 12px 42px rgba(78,78,255,.23); }
.btn--primary:hover { box-shadow: 0 14px 50px rgba(34,211,238,.21), 0 12px 52px rgba(139,92,246,.27); }
.btn--ghost { background: rgba(255,255,255,.035); }
.btn--ghost:hover { border-color: rgba(34,211,238,.46); background: rgba(34,211,238,.055); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 14px 27px; margin-top: 28px; color: var(--muted); font: .61rem Space Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.hero__visual { position: relative; min-height: 690px; perspective: 1000px; }
.profile-frame { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(29vw, 420px); aspect-ratio: .78; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.18); border-radius: 40% 40% 22% 22% / 30% 30% 16% 16%; overflow: hidden; background: #080a10; box-shadow: 0 34px 120px rgba(0,0,0,.48), 0 0 0 10px rgba(255,255,255,.018); transition: transform .5s var(--ease); }
.profile-frame::before { content: ''; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 80px rgba(139,92,246,.1); pointer-events: none; }
.profile-frame img { width: 100%; height: 100%; object-fit: cover; }
.profile-frame__glow { position: absolute; z-index: 2; inset: -28%; background: conic-gradient(from 180deg, transparent 0 20%, rgba(34,211,238,.55), transparent 40% 62%, rgba(139,92,246,.72), transparent 82%); animation: spin 11s linear infinite; mix-blend-mode: screen; opacity: .46; }
.profile-frame__scan { position: absolute; z-index: 4; left: 0; right: 0; top: -12%; height: 16%; background: linear-gradient(transparent, rgba(34,211,238,.2), transparent); animation: scan 5s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes scan { 50% { top: 100%; } 100% { top: 100%; } }
.hero-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(139,92,246,.23); border-radius: 50%; transform: translate(-50%,-50%); }
.hero-orbit--one { width: 86%; aspect-ratio: 1; animation: orbitA 16s linear infinite; }
.hero-orbit--two { width: 66%; aspect-ratio: 1; border-color: rgba(34,211,238,.18); animation: orbitB 12s linear infinite reverse; }
@keyframes orbitA { to { transform: translate(-50%,-50%) rotate(360deg) scaleX(.96); } }
@keyframes orbitB { to { transform: translate(-50%,-50%) rotate(-360deg) scaleY(.94); } }
.hero-paths { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.hero-paths path { fill: none; stroke: url(#hero-line); stroke-width: 1.4; stroke-dasharray: 10 15; animation: pathMove 12s linear infinite; }
@keyframes pathMove { to { stroke-dashoffset: -300; } }
.hero-signal { position: absolute; z-index: 5; width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.hero-signal--one { left: 14%; top: 39%; animation: signalOne 6s ease-in-out infinite; }.hero-signal--two { right: 12%; bottom: 28%; background: var(--violet); box-shadow: 0 0 22px var(--violet); animation: signalTwo 7s ease-in-out infinite; }
@keyframes signalOne { 50% { transform: translate(62px,-80px) scale(.7); } }
@keyframes signalTwo { 50% { transform: translate(-74px,60px) scale(1.4); } }
.floating-chip { position: absolute; z-index: 7; padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: rgba(10,12,19,.72); backdrop-filter: blur(14px); font: 700 .57rem Space Mono, monospace; letter-spacing: .07em; box-shadow: 0 14px 40px rgba(0,0,0,.2); transition: transform .45s var(--ease); }
.chip--ghl { left: 1%; top: 19%; }.chip--shopify { right: 0; top: 27%; }.chip--wp { left: 3%; bottom: 21%; }.chip--api { right: 1%; bottom: 12%; }
.scroll-cue { position: absolute; left: 0; bottom: 29px; display: inline-flex; align-items: center; gap: 14px; color: var(--muted); font: .6rem Space Mono, monospace; letter-spacing: .13em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 44px; height: 1px; overflow: hidden; background: var(--line); }
.scroll-cue i::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: var(--cyan); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { to { transform: translateX(100%); } }

.work { position: relative; }
.work-stage { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(38px, 5.5vw, 82px); align-items: start; }
.work-list { display: grid; }
.project-item { position: relative; min-height: 49vh; padding: 38px 24px 38px 33px; border-top: 1px solid var(--line); opacity: .43; transition: opacity .4s, transform .4s, background .4s, border-color .4s; }
.project-item:last-child { border-bottom: 1px solid var(--line); }
.project-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--violet), var(--cyan)); box-shadow: 0 0 18px rgba(34,211,238,.38); transition: transform .45s var(--ease); }
.project-item.is-active { opacity: 1; transform: translateX(9px); background: linear-gradient(90deg, rgba(139,92,246,.075), transparent 65%); border-color: var(--line-strong); }
.project-item.is-active::before { transform: scaleY(1); }
.project-item__meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: .59rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.project-item__meta span:first-child { color: var(--cyan); }
.project-item h3 { margin: 22px 0 15px; font: 600 clamp(1.75rem, 2.6vw, 2.8rem)/1 Space Grotesk, sans-serif; letter-spacing: -.04em; }
.project-item > p { margin: 0; color: var(--text-2); font-size: .96rem; }
.project-item__scope { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; margin: 22px 0; padding: 0; list-style: none; }
.project-item__scope li { position: relative; padding-left: 13px; color: #c5cbda; font-size: .72rem; }
.project-item__scope li::before { content: ''; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--cyan)); box-shadow: 0 0 9px rgba(34,211,238,.45); }
.project-item__result { display: block; margin: 21px 0 20px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; color: #dfe4f1; background: rgba(255,255,255,.025); font-size: .79rem; }
.project-item__link { color: var(--cyan); font-size: .76rem; font-weight: 800; }
.work-visual { --project-accent: #8b5cf6; position: sticky; top: 120px; min-height: 680px; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), #080a10; box-shadow: 0 40px 110px rgba(0,0,0,.28); }
.work-visual__halo { position: absolute; inset: -25%; background: radial-gradient(circle, color-mix(in srgb, var(--project-accent) 30%, transparent), transparent 54%); transition: background .45s; }
.work-visual__grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.work-visual__topline { position: absolute; z-index: 8; left: 28px; right: 28px; top: 25px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: .56rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.work-visual__topline span { color: var(--cyan); }.work-visual__topline strong { font-weight: 400; }
.work-visual__number { position: absolute; z-index: 1; right: 22px; top: 38px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.1); font: 700 clamp(6rem, 10vw, 9rem)/1 Space Grotesk, sans-serif; }
.browser-mockup { position: absolute; z-index: 3; left: 6%; top: 18%; width: 84%; overflow: hidden; border: 1px solid rgba(255,255,255,.19); border-radius: 15px; background: #080a10; box-shadow: 0 30px 75px rgba(0,0,0,.55); transition: transform .5s var(--ease), opacity .35s, filter .35s; }
.browser-mockup__bar { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.045); }
.browser-mockup__bar span { width: 6px; height: 6px; border-radius: 50%; background: #60677a; }.browser-mockup__bar em { margin-left: 7px; color: var(--muted); font: normal .49rem Space Mono, monospace; }
.browser-mockup__wipe { position: absolute; z-index: 5; inset: 31px 0 0; transform: translateX(-105%); background: linear-gradient(110deg, transparent 0 20%, color-mix(in srgb, var(--project-accent) 76%, #fff) 48%, transparent 78%); opacity: .74; }
.browser-mockup img { width: 100%; aspect-ratio: 1200 / 760; object-fit: cover; }
.phone-mockup { position: absolute; z-index: 5; right: 5%; bottom: 7%; width: 25%; overflow: hidden; border: 7px solid #11141e; border-radius: 25px; background: #080a10; box-shadow: 0 24px 56px rgba(0,0,0,.6); transition: transform .55s var(--ease), opacity .35s, filter .35s; }
.phone-mockup__notch { position: absolute; z-index: 2; left: 50%; top: 4px; width: 36%; height: 8px; transform: translateX(-50%); border-radius: 0 0 7px 7px; background: #11141e; }.phone-mockup img { width: 100%; }
.work-visual__tags { position: absolute; z-index: 6; left: 5%; bottom: 5%; display: flex; flex-wrap: wrap; gap: 7px; max-width: 62%; }
.work-visual__tags span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: rgba(7,8,13,.72); backdrop-filter: blur(12px); font: .53rem Space Mono, monospace; }
.work-visual.is-switching .browser-mockup { transform: perspective(800px) rotateY(-5deg) translateY(8px) scale(.975); opacity: .3; filter: blur(7px); }
.work-visual.is-switching .phone-mockup { transform: translate(18px,15px) rotate(5deg); opacity: .25; filter: blur(5px); }
.work-visual.is-switching .browser-mockup__wipe { animation: projectWipe .58s var(--ease); }
@keyframes projectWipe { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

.services { position: relative; }
.service-experience { display: grid; grid-template-columns: .34fr .66fr; gap: 20px; }
.service-tabs { display: grid; align-content: start; border: 1px solid var(--line); border-radius: 23px; overflow: hidden; background: rgba(255,255,255,.018); }
.service-tab { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 13px; min-height: 84px; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: padding .3s, background .3s, color .3s; }
.service-tab:last-child { border-bottom: 0; }.service-tab span { color: var(--muted); font: .58rem Space Mono, monospace; }.service-tab strong { font: 600 1.05rem Space Grotesk, sans-serif; }.service-tab b { color: var(--cyan); font-weight: 400; transition: transform .3s; }
.service-tab:hover, .service-tab.is-active { padding-left: 27px; background: linear-gradient(90deg, rgba(139,92,246,.14), rgba(34,211,238,.035)); }.service-tab.is-active b { transform: translateX(4px); }
.service-panel { display: grid; grid-template-columns: .56fr .44fr; min-height: 635px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 85% 16%, rgba(139,92,246,.14), transparent 24rem), rgba(255,255,255,.022); box-shadow: 0 42px 100px rgba(0,0,0,.22); transition: opacity .25s, transform .4s var(--ease); }
.service-panel.is-changing { opacity: .44; transform: translateY(6px) scale(.994); }
.service-panel__content { padding: clamp(31px, 4.2vw, 55px); }
.service-panel__index { margin: 0 0 28px; color: var(--cyan); font: .62rem Space Mono, monospace; letter-spacing: .1em; }
.service-panel__eyebrow { margin: 0 0 9px; color: #b7a7ff; font: 700 .62rem Space Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }
.service-panel h3 { margin: 0 0 17px; font: 600 clamp(2.6rem, 4.1vw, 4.4rem)/.98 Space Grotesk, sans-serif; letter-spacing: -.05em; }
.service-panel__content > p:not(.service-panel__index):not(.service-panel__eyebrow) { margin: 0; color: var(--text-2); font-size: .98rem; }
.service-panel__deliverables { display: grid; gap: 10px; margin: 27px 0 28px; padding: 0; list-style: none; }
.service-panel__deliverables li { position: relative; padding: 11px 13px 11px 36px; border: 1px solid rgba(255,255,255,.075); border-radius: 12px; color: #d4d9e6; background: rgba(255,255,255,.018); font-size: .75rem; }
.service-panel__deliverables li::before { content: '✓'; position: absolute; left: 13px; top: 10px; color: var(--cyan); font-weight: 800; }
.service-panel__keywords { display: flex; flex-wrap: wrap; gap: 7px; }
.service-panel__keywords span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font: .5rem Space Mono, monospace; }
.service-panel__visual { position: relative; min-height: 100%; overflow: hidden; border-left: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(34,211,238,.075), transparent 16rem), #090b12; }
.service-visual__label { position: absolute; left: 22px; top: 20px; color: var(--muted); font: .53rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.service-visual__canvas { position: absolute; inset: 68px 25px 28px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.045), transparent); }
.service-visual__canvas::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 30px 30px; }
.visual-pipeline .pipeline-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 96px; height: 58px; border: 1px solid var(--line-strong); border-radius: 14px; color: #dce2ef; background: #111522; box-shadow: 0 18px 35px rgba(0,0,0,.26); font: 700 .58rem Space Mono, monospace; }
.visual-pipeline .pipeline-node:nth-child(1) { left: 7%; top: 16%; }.visual-pipeline .pipeline-node:nth-child(2) { right: 7%; top: 16%; }.visual-pipeline .pipeline-node:nth-child(3) { left: 7%; bottom: 18%; }.visual-pipeline .pipeline-node:nth-child(4) { right: 7%; bottom: 18%; }
.visual-pipeline .pipeline-hub { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 115px; height: 115px; transform: translate(-50%,-50%); border: 1px solid rgba(34,211,238,.35); border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.12), rgba(139,92,246,.05)); box-shadow: 0 0 55px rgba(34,211,238,.12); font: 700 .65rem Space Mono, monospace; }
.visual-pipeline .visual-line { position: absolute; z-index: 1; left: 50%; top: 50%; width: 46%; height: 1px; transform-origin: left; background: linear-gradient(90deg, var(--cyan), transparent); overflow: visible; }
.visual-pipeline .visual-line::after { content: ''; position: absolute; right: 12%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: signalTravel 2.2s linear infinite; }
.visual-pipeline .visual-line:nth-of-type(1) { transform: rotate(-145deg); }.visual-pipeline .visual-line:nth-of-type(2) { transform: rotate(-35deg); }.visual-pipeline .visual-line:nth-of-type(3) { transform: rotate(145deg); }.visual-pipeline .visual-line:nth-of-type(4) { transform: rotate(35deg); }
@keyframes signalTravel { from { right: 92%; } to { right: 8%; } }
.visual-store .store-shell { position: absolute; inset: 10% 8%; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 18px; background: #0c101a; box-shadow: 0 25px 60px rgba(0,0,0,.34); }
.visual-store .store-top { height: 34px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.035); }
.visual-store .store-hero { height: 37%; margin: 16px; border-radius: 12px; background: linear-gradient(120deg, rgba(139,92,246,.35), rgba(34,211,238,.12)); animation: storeGlow 3s ease-in-out infinite alternate; }
.visual-store .store-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }.visual-store .store-products i { height: 88px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); animation: productLift 3.2s ease-in-out infinite; }.visual-store .store-products i:nth-child(2) { animation-delay: .25s; }.visual-store .store-products i:nth-child(3) { animation-delay: .5s; }
.visual-store .store-cart { position: absolute; right: 7%; bottom: 7%; width: 86px; height: 38px; border-radius: 999px; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 25px rgba(34,211,238,.17); }
@keyframes storeGlow { to { filter: brightness(1.22); transform: scale(1.015); } } @keyframes productLift { 50% { transform: translateY(-6px); border-color: rgba(34,211,238,.28); } }
.visual-blocks .block-shell { position: absolute; inset: 8%; display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; }
.visual-blocks .block-sidebar, .visual-blocks .block-main > * { border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.032); }
.visual-blocks .block-sidebar { animation: blockIn 2.8s ease-in-out infinite alternate; }.visual-blocks .block-main { display: grid; grid-template-rows: .8fr 1.1fr .8fr; gap: 12px; }.visual-blocks .block-main div:nth-child(1) { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.06)); animation: blockIn 3s .2s ease-in-out infinite alternate; }.visual-blocks .block-main div:nth-child(2) { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; border: 0; background: transparent; }.visual-blocks .block-main div:nth-child(2) i { border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.035); animation: blockIn 3.3s .4s ease-in-out infinite alternate; }.visual-blocks .block-main div:nth-child(3) { animation: blockIn 3.2s .6s ease-in-out infinite alternate; }
@keyframes blockIn { to { transform: translateY(-6px); border-color: rgba(139,92,246,.34); box-shadow: 0 16px 35px rgba(0,0,0,.2); } }
.visual-network .network-node { position: absolute; z-index: 3; display: grid; place-items: center; width: 88px; height: 48px; border: 1px solid var(--line-strong); border-radius: 13px; background: #111522; font: 700 .53rem Space Mono, monospace; }
.visual-network .network-node:nth-child(1) { left: 8%; top: 12%; }.visual-network .network-node:nth-child(2) { right: 8%; top: 12%; }.visual-network .network-node:nth-child(3) { left: 7%; bottom: 12%; }.visual-network .network-node:nth-child(4) { right: 7%; bottom: 12%; }.visual-network .network-node:nth-child(5) { left: 50%; top: 50%; width: 112px; height: 65px; transform: translate(-50%,-50%); border-color: rgba(139,92,246,.48); background: radial-gradient(circle, rgba(139,92,246,.2), #10131d); box-shadow: 0 0 46px rgba(139,92,246,.17); }
.visual-network svg { position: absolute; inset: 0; width: 100%; height: 100%; }.visual-network path { fill: none; stroke: url(#networkGradient); stroke-width: 1.5; stroke-dasharray: 8 10; animation: pathMove 8s linear infinite; }

.process { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.012), transparent); }
.process-map { position: relative; min-height: 525px; }
.process-map__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.process-path-bg, .process-path-progress { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }.process-path-bg { stroke: rgba(255,255,255,.1); }.process-path-progress { stroke: url(#process-gradient); stroke-dasharray: 1; stroke-dashoffset: 1; pathLength: 1; filter: drop-shadow(0 0 8px rgba(34,211,238,.4)); }
.process-steps { position: absolute; inset: 0; }
.process-step { position: absolute; width: 195px; opacity: .4; transform: translateY(18px) scale(.96); transition: opacity .45s, transform .45s, filter .45s; }
.process-step:nth-child(1) { left: 1%; top: 47%; }.process-step:nth-child(2) { left: 19%; top: 7%; }.process-step:nth-child(3) { left: 40%; top: 45%; }.process-step:nth-child(4) { left: 65%; top: 68%; }.process-step:nth-child(5) { right: 0; top: 14%; }
.process-step.is-active { opacity: 1; transform: none; filter: drop-shadow(0 0 18px rgba(139,92,246,.12)); }
.process-step__node { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 14px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: var(--bg-2); font: .58rem Space Mono, monospace; transition: border-color .35s, color .35s, box-shadow .35s; }
.process-step.is-active .process-step__node { color: #fff; border-color: var(--cyan); box-shadow: 0 0 0 8px rgba(34,211,238,.05), 0 0 22px rgba(34,211,238,.24); }
.process-step h3 { margin: 0 0 8px; font: 600 1.2rem Space Grotesk, sans-serif; }.process-step p { margin: 0; color: var(--text-2); font-size: .76rem; }

.stack-board { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), #080a10; box-shadow: 0 35px 90px rgba(0,0,0,.22); }
.stack-board__header { display: flex; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font: .56rem Space Mono, monospace; letter-spacing: .11em; }
.stack-board__header strong { color: var(--cyan); font-weight: 400; }
.stack-board__signal { position: relative; height: 48px; overflow: hidden; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.045) 55px 56px); }
.stack-board__signal::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,.5), rgba(34,211,238,.68), transparent); }
.stack-board__signal i { position: absolute; left: -20px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); animation: boardSignal 5.5s linear infinite; }
@keyframes boardSignal { to { left: calc(100% + 20px); } }
.stack-groups { display: grid; grid-template-columns: repeat(4, 1fr); }
.stack-group { min-height: 290px; padding: 28px 24px 31px; border-right: 1px solid var(--line); transition: background .3s, transform .3s; }.stack-group:last-child { border-right: 0; }.stack-group:hover { background: linear-gradient(180deg, rgba(139,92,246,.075), transparent); transform: translateY(-4px); }
.stack-group__index { color: var(--cyan); font: .56rem Space Mono, monospace; }.stack-group h3 { margin: 31px 0 8px; font: 600 1.4rem Space Grotesk, sans-serif; }.stack-group p { min-height: 46px; margin: 0 0 21px; color: var(--muted); font-size: .73rem; }
.stack-group__tools { display: flex; flex-wrap: wrap; gap: 7px; }.stack-group__tools span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,.02); font: .5rem Space Mono, monospace; transition: border-color .25s, color .25s, transform .25s; }.stack-group__tools span:hover { color: #fff; border-color: rgba(34,211,238,.4); transform: translateY(-2px); }

.reviews { border-block: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.07), transparent 34rem); }
.review-gallery { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012)), #080a10; box-shadow: 0 40px 100px rgba(0,0,0,.26); }
.review-gallery__meta { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 23px 26px; border-bottom: 1px solid var(--line); }.review-gallery__meta span { color: var(--cyan); font: .57rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }.review-gallery__meta h3 { margin: 7px 0 0; font: 600 clamp(1.25rem, 2.2vw, 2rem) Space Grotesk, sans-serif; }.review-gallery__meta > strong { color: var(--muted); font: 400 .67rem Space Mono, monospace; }
.review-gallery__stage { position: relative; display: grid; place-items: center; min-height: 560px; padding: 42px 100px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.09), transparent 25rem); }
.review-gallery__stage::before, .review-gallery__stage::after { content: ''; position: absolute; width: 64%; height: 74%; border: 1px solid rgba(255,255,255,.06); border-radius: 23px; background: rgba(255,255,255,.013); }.review-gallery__stage::before { transform: translate(-38px,17px) rotate(-3deg); }.review-gallery__stage::after { transform: translate(38px,17px) rotate(3deg); }
.review-main { position: relative; z-index: 3; display: block; width: min(680px, 78vw); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 19px; background: #fff; cursor: zoom-in; box-shadow: 0 34px 80px rgba(0,0,0,.48); transition: transform .45s var(--ease), opacity .25s, filter .25s; }.review-main:hover { transform: translateY(-7px) scale(1.012); }.review-main.is-changing { opacity: .25; transform: scale(.97) rotateY(5deg); filter: blur(7px); }.review-main img { width: 100%; }
.review-control { position: absolute; z-index: 7; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 50%; background: rgba(7,8,13,.8); backdrop-filter: blur(12px); cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }.review-control:hover { border-color: var(--cyan); background: rgba(34,211,238,.08); }.review-control--prev { left: 27px; }.review-control--next { right: 27px; }
.review-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 15px; border-top: 1px solid var(--line); }.review-thumb { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 11px; padding: 9px; border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.018); text-align: left; cursor: pointer; transition: border-color .25s, background .25s; }.review-thumb img { width: 56px; height: 43px; object-fit: cover; border-radius: 7px; }.review-thumb span { color: var(--muted); font-size: .62rem; }.review-thumb strong { display: block; margin-top: 3px; color: var(--text-2); font-size: .68rem; }.review-thumb.is-active { border-color: rgba(34,211,238,.34); background: rgba(34,211,238,.05); }
.reviews__footer { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 28px; }.reviews__footer p { margin: 0; color: var(--text-2); font-size: .88rem; }

.lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; background: rgba(2,3,6,.92); backdrop-filter: blur(20px); transition: opacity .3s, visibility .3s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__shell { width: min(1160px, 100%); max-height: calc(100vh - 48px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #080a10; box-shadow: 0 50px 150px rgba(0,0,0,.62); transform: translateY(18px) scale(.98); transition: transform .4s var(--ease); }.lightbox.is-open .lightbox__shell { transform: none; }
.lightbox__header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--line); }.lightbox__header > div { display: flex; align-items: center; gap: 14px; }.lightbox__header span { color: var(--cyan); font: .53rem Space Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }.lightbox__header strong { font-size: .85rem; }.lightbox__header b { color: var(--muted); font: 400 .62rem Space Mono, monospace; }.lightbox__close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.03); font-size: 1.35rem; cursor: pointer; }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 24px 86px; overflow: hidden; background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.1), transparent 30rem); }.lightbox__slide { max-width: 850px; max-height: calc(100vh - 250px); overflow: auto; border-radius: 14px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.5); }.lightbox__slide img { width: 100%; height: auto; }.lightbox__slide.is-changing { animation: slideSwitch .35s var(--ease); }
@keyframes slideSwitch { 50% { opacity: .2; transform: translateX(20px) scale(.985); filter: blur(5px); } }
.lightbox__nav { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 50%; background: rgba(7,8,13,.78); cursor: pointer; }.lightbox__nav:hover { border-color: var(--cyan); }.lightbox__nav--prev { left: 19px; }.lightbox__nav--next { right: 19px; }
.lightbox__thumbnails { display: flex; justify-content: center; gap: 9px; padding: 13px 18px; overflow-x: auto; border-top: 1px solid var(--line); }.lightbox-thumb { flex: 0 0 82px; padding: 3px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; }.lightbox-thumb img { width: 76px; height: 54px; object-fit: cover; border-radius: 5px; }.lightbox-thumb.is-active { border-color: var(--cyan); }

.contact { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(55px, 7vw, 100px); align-items: start; }
.contact__intro { position: sticky; top: 120px; }
.contact__intro h2 { margin: 0; max-width: 560px; font: 600 clamp(2.7rem, 4.45vw, 4.6rem)/.98 Space Grotesk, sans-serif; letter-spacing: -.055em; }.contact__intro > p:not(.kicker) { max-width: 550px; color: var(--text-2); font-size: 1rem; }
.contact__promise { margin-top: 32px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(34,211,238,.025)); }.contact__promise > span { color: var(--cyan); font: .56rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }.contact__promise ul { display: grid; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }.contact__promise li { position: relative; padding-left: 19px; color: #d5d9e4; font-size: .78rem; }.contact__promise li::before { content: '→'; position: absolute; left: 0; color: var(--violet); }
.contact__channels { margin-top: 30px; border-top: 1px solid var(--line); }.contact__channels a { display: flex; justify-content: space-between; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--line); transition: padding .25s, color .25s; }.contact__channels a:hover { padding-left: 8px; }.contact__channels span { color: var(--muted); font: .56rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }.contact__channels strong { font-size: .82rem; text-align: right; }
.contact-form { position: relative; padding: clamp(28px, 4.5vw, 50px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(139,92,246,.13), transparent 22rem), linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.014)); box-shadow: 0 42px 100px rgba(0,0,0,.24); }
.contact-form::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, transparent 0 35%, rgba(34,211,238,.035), transparent 65%); }
.contact-form__header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }.contact-form__header span { color: var(--cyan); font: .56rem Space Mono, monospace; letter-spacing: .12em; }.contact-form__header h3 { margin: 7px 0 0; font: 600 clamp(1.65rem, 2.3vw, 2.3rem) Space Grotesk, sans-serif; }.contact-form__header strong { color: var(--muted); font: 400 .59rem Space Mono, monospace; }
.form-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 23px; }
.field { position: relative; display: grid; gap: 9px; }.field--wide { grid-column: 1 / -1; }.field > span { color: #7180a1; font: .58rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.field input, .field select, .field textarea { width: 100%; color: var(--text); border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; outline: 0; background: transparent; padding: 9px 0 13px; resize: vertical; }.field input::placeholder, .field textarea::placeholder { color: #50586a; }.field select { appearance: none; color-scheme: dark; cursor: pointer; padding-right: 25px; }.field select option { color: #f6f7fb; background: #0b0d14; }.field--select::after { content: '⌄'; position: absolute; right: 3px; bottom: 31px; color: var(--cyan); pointer-events: none; }.field em { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow: 0 0 12px rgba(34,211,238,.35); transition: transform .35s; }.field:focus-within em { transform: scaleX(1); }.field small { min-height: 14px; color: #ff7f94; font-size: .66rem; }.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: rgba(255,94,124,.55); }
.field--service small { margin-top: 2px; }
.service-picker { display: flex; flex-wrap: wrap; gap: 8px; }.service-picker button { padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,.025); cursor: pointer; font-size: .72rem; transition: border-color .25s, color .25s, background .25s, transform .25s; }.service-picker button:hover { color: #fff; border-color: rgba(139,92,246,.42); transform: translateY(-2px); }.service-picker button.is-selected { color: #fff; border-color: rgba(34,211,238,.52); background: linear-gradient(90deg, rgba(139,92,246,.24), rgba(34,211,238,.12)); box-shadow: 0 0 24px rgba(34,211,238,.08); }
.consent { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; margin: 21px 0 27px; color: var(--text-2); font-size: .8rem; }.consent input { margin-top: 3px; accent-color: var(--violet); }.btn--submit { position: relative; z-index: 1; width: 100%; border: 0; cursor: pointer; }.btn--submit[disabled] { opacity: .62; cursor: wait; }.form-status { position: relative; z-index: 1; min-height: 24px; margin-top: 15px; color: var(--text-2); font-size: .8rem; }.form-status.is-success { color: #67f3ad; }.form-status.is-error { color: #ff8096; }.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }

.final-cta { position: relative; overflow: hidden; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 44%, rgba(139,92,246,.2), transparent 32rem), #07080d; }
.final-cta__lines { position: absolute; inset: 0; opacity: .31; background-image: linear-gradient(90deg, transparent 0 49.8%, rgba(255,255,255,.08) 50%, transparent 50.2%), linear-gradient(transparent 0 49.8%, rgba(255,255,255,.05) 50%, transparent 50.2%); background-size: 140px 140px; transform: perspective(700px) rotateX(58deg) scale(1.7); animation: gridMove 14s linear infinite; }
@keyframes gridMove { to { background-position: 140px 140px; } }.final-cta__inner { position: relative; z-index: 2; }.final-cta h2 { max-width: 890px; margin: 0 auto; font: 600 clamp(2.8rem, 5vw, 5.1rem)/.96 Space Grotesk, sans-serif; letter-spacing: -.06em; }.final-cta__copy { max-width: 620px; margin: 23px auto 0; color: var(--text-2); }.final-cta__actions { display: flex; justify-content: center; gap: 13px; flex-wrap: wrap; margin-top: 36px; }

.site-footer { border-top: 1px solid var(--line); background: #040406; }.site-footer__inner { display: grid; grid-template-columns: 1.25fr .7fr .75fr; gap: 60px; padding-block: 66px 30px; }.site-footer__brand p { max-width: 370px; margin: 23px 0 0; color: var(--muted); font-size: .82rem; }.site-footer__nav > span, .site-footer__contact > span { display: block; margin-bottom: 18px; color: var(--cyan); font: .55rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }.site-footer__nav nav, .site-footer__contact { display: grid; align-content: start; gap: 10px; }.site-footer__nav a, .site-footer__contact a { color: var(--text-2); font-size: .8rem; transition: color .2s, transform .2s; }.site-footer__nav a:hover, .site-footer__contact a:hover { color: #fff; transform: translateX(4px); }.site-footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-top: 27px; margin-top: 26px; border-top: 1px solid var(--line); color: var(--muted); font: .58rem Space Mono, monospace; letter-spacing: .05em; }

.reveal { opacity: 0; filter: blur(8px); transition: opacity .82s var(--ease), transform .9s var(--ease), filter .82s var(--ease), clip-path .95s var(--ease); }
.reveal--up { transform: translateY(42px) rotateX(5deg); transform-origin: bottom; }.reveal--left { transform: translateX(-48px); }.reveal--right { transform: translateX(48px); }.reveal--scale { transform: scale(.93) translateY(24px); clip-path: inset(7% 5% 7% 5% round 28px); }.reveal.is-visible { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round 0); }

@media (max-width: 1100px) {
  :root { --page: min(100% - 40px, 980px); }
  .desktop-nav, .header-cta { display: none; }.menu-toggle { display: block; }.site-header { grid-template-columns: 1fr auto; }
  .hero__grid { grid-template-columns: 1fr 1fr; }.hero__title { font-size: clamp(3rem, 5.8vw, 5.3rem); }
  .work-stage { grid-template-columns: .8fr 1.2fr; gap: 33px; }.work-visual { min-height: 620px; }.project-item { padding-left: 27px; }
  .service-experience { grid-template-columns: 1fr; }.service-tabs { grid-template-columns: repeat(4, 1fr); }.service-tab { grid-template-columns: auto; gap: 7px; min-height: 72px; padding: 15px 12px; }.service-tab b { display: none; }.service-tab strong { font-size: .92rem; }.service-tab:hover, .service-tab.is-active { padding-left: 12px; }
  .stack-groups { grid-template-columns: repeat(2, 1fr); }.stack-group:nth-child(2) { border-right: 0; }.stack-group:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .contact { grid-template-columns: .8fr 1.2fr; gap: 44px; }
}

@media (max-width: 820px) {
  :root { --page: min(100% - 32px, 720px); --header-h: 66px; }
  .section-pad { padding-block: 88px; }.section-heading { grid-template-columns: 1fr; gap: 21px; margin-bottom: 46px; }.section-heading h2 { font-size: clamp(2.3rem, 8.7vw, 3.9rem); }
  .hero { min-height: auto; padding-top: 112px; }.hero__grid { grid-template-columns: 1fr; }.hero__title { font-size: clamp(3.2rem, 11vw, 5.5rem); }.hero__visual { min-height: 570px; }.profile-frame { width: min(68vw, 430px); }.scroll-cue { display: none; }
  .work-stage { display: block; }.work-list { gap: 17px; }.project-item { min-height: auto; padding: 29px 24px 31px; opacity: 1 !important; border: 1px solid var(--line); border-radius: 18px; }.project-item:last-child { border-bottom: 1px solid var(--line); }.project-item.is-active { transform: none; }.work-visual { position: relative; top: auto; min-height: 560px; margin-top: 32px; }.browser-mockup { width: 91%; }.phone-mockup { width: 28%; }
  .service-panel { grid-template-columns: 1fr; min-height: auto; }.service-panel__visual { min-height: 430px; border-left: 0; border-top: 1px solid var(--line); }.service-tabs { grid-template-columns: 1fr 1fr; }
  .process-map { min-height: auto; }.process-map__line { display: none; }.process-steps { position: relative; display: grid; }.process-step { position: relative !important; inset: auto !important; width: 100%; padding: 23px 0 27px 65px; opacity: 1; transform: none; border-bottom: 1px solid var(--line); }.process-step__node { position: absolute; left: 0; top: 21px; }.process-step::before { content: ''; position: absolute; left: 20px; top: 62px; bottom: -1px; width: 1px; background: linear-gradient(var(--cyan), transparent); }.process-step:last-child::before { display: none; }
  .review-gallery__stage { min-height: 500px; padding-inline: 75px; }.review-thumbnails { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: 1fr; }.contact__intro { position: relative; top: auto; }.contact-form { padding: 28px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }.site-footer__brand { grid-column: 1 / -1; }.site-footer__bottom { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  :root { --page: calc(100% - 24px); }
  .site-header { top: 10px; padding-inline: 16px 10px; }.wordmark { font-size: .75rem; }
  .hero { padding-top: 101px; }.hero__title { font-size: clamp(2.85rem, 14.4vw, 4.45rem); }.hero__description { font-size: .96rem; }.hero__meta { gap: 11px 18px; }.hero__visual { min-height: 500px; }.profile-frame { width: 77vw; }.floating-chip { padding: 8px 10px; font-size: .49rem; }.chip--ghl { top: 12%; }.chip--shopify { top: 27%; }.chip--wp { bottom: 16%; }.chip--api { bottom: 5%; }
  .hero__actions, .final-cta__actions { display: grid; }.btn { width: 100%; }
  .project-item__scope { grid-template-columns: 1fr; }.work-visual { min-height: 420px; }.work-visual__topline { left: 16px; right: 16px; }.work-visual__topline strong { display: none; }.phone-mockup { right: 2%; bottom: 9%; width: 31%; border-width: 4px; }.work-visual__tags { display: none; }
  .service-tabs { grid-template-columns: 1fr; }.service-tab { grid-template-columns: 34px 1fr; }.service-panel__content { padding: 27px 20px; }.service-panel h3 { font-size: 2.85rem; }.service-panel__visual { min-height: 335px; }.service-visual__canvas { inset: 57px 16px 18px; }.visual-pipeline .pipeline-node { width: 74px; height: 46px; font-size: .47rem; }.visual-pipeline .pipeline-hub { width: 92px; height: 92px; font-size: .52rem; }
  .stack-board__header { display: grid; }.stack-board__header strong { line-height: 1.5; }.stack-groups { grid-template-columns: 1fr; }.stack-group { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }.stack-group:last-child { border-bottom: 0; }
  .review-gallery__meta { align-items: flex-start; }.review-gallery__meta h3 { font-size: 1.15rem; }.review-gallery__stage { min-height: 410px; padding: 34px 17px 82px; }.review-gallery__stage::before, .review-gallery__stage::after { width: 82%; height: 66%; }.review-main { width: 91%; }.review-control { top: auto; bottom: 16px; width: 46px; height: 46px; transform: none; }.review-control--prev { left: calc(50% - 57px); }.review-control--next { right: calc(50% - 57px); }.review-thumbnails { display: flex; overflow-x: auto; }.review-thumb { flex: 0 0 180px; }.reviews__footer { align-items: stretch; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }.field--wide { grid-column: auto; }.contact-form { padding: 23px 17px; }.contact-form__header { align-items: flex-start; flex-direction: column; }.contact__channels a { flex-direction: column; gap: 6px; }.contact__channels strong { text-align: left; }.service-picker button { flex: 1 1 calc(50% - 8px); }
  .lightbox { padding: 10px; }.lightbox__shell { max-height: calc(100vh - 20px); }.lightbox__header { align-items: flex-start; }.lightbox__header > div:first-child { display: grid; gap: 3px; }.lightbox__stage { padding: 18px 12px 76px; }.lightbox__slide { max-height: calc(100vh - 235px); }.lightbox__nav { top: auto; bottom: 15px; transform: none; }.lightbox__nav--prev { left: calc(50% - 61px); }.lightbox__nav--next { right: calc(50% - 61px); }.lightbox__thumbnails { justify-content: flex-start; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 35px; }.site-footer__brand, .site-footer__bottom { grid-column: auto; }.site-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal, .hero__title .word-inner { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .preloader, .ambient-canvas, .scroll-sweep { display: none; }
}

/* =========================================================
   V3 — Original navy portfolio refinement
   ========================================================= */
:root {
  --bg: #020617;
  --bg-2: #071022;
  --surface: #0a1224;
  --surface-2: #0d1830;
  --surface-3: #060d1c;
  --text: #f6f8ff;
  --text-2: #aeb8cf;
  --muted: #6f7c99;
  --violet: #8b5cf6;
  --cyan: #38d9ff;
  --blue: #4f7cff;
  --line: rgba(145, 170, 220, .13);
  --line-strong: rgba(151, 186, 255, .24);
}
body {
  background:
    radial-gradient(circle at 8% 5%, rgba(58, 95, 246, .17), transparent 34rem),
    radial-gradient(circle at 92% 22%, rgba(56, 217, 255, .10), transparent 35rem),
    radial-gradient(circle at 50% 72%, rgba(92, 72, 246, .09), transparent 46rem),
    linear-gradient(180deg, #020617 0%, #050b19 34%, #020617 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(111, 151, 230, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 151, 230, .028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0 30%, transparent 82%);
}
.ambient-canvas { opacity: .9; }
.noise { opacity: .075; }
.scroll-sweep { background: rgba(64, 112, 255, .11); filter: blur(105px); }
.section-pad { position: relative; padding-block: clamp(50px, 8.2vw, 132px); }
.section-pad::before {
  content: '';
  position: absolute;
  left: 50%; top: 7%;
  width: min(72vw, 980px); height: 340px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(62, 104, 246, .055), transparent 68%);
  pointer-events: none;
}
.section-heading { position: relative; z-index: 1; margin-bottom: 48px; }
.section-heading h2 { font-size: clamp(2.35rem, 3.65vw, 3.85rem); line-height: 1.02; max-width: 700px; }

/* Premium glowing text wordmark */
.wordmark--glow {
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 0 14px;
  border: 1px solid rgba(122, 161, 255, .18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(49,80,180,.04));
  box-shadow: inset 0 0 22px rgba(78,121,255,.04), 0 0 30px rgba(55,103,255,.06);
  overflow: hidden;
}
.wordmark--glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 90deg, transparent, rgba(56,217,255,.45), transparent 28%, transparent 72%, rgba(139,92,246,.5), transparent);
  opacity: .36;
  filter: blur(9px);
  animation: logoAura 5.8s linear infinite;
}
.wordmark--glow::after { display: none; }
.wordmark__text {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: .42em;
  align-items: baseline;
  color: transparent !important;
  font-style: normal;
  text-shadow: none !important;
  background: linear-gradient(96deg, #ffffff 0 38%, #9eb9ff 58%, #54e8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 11px rgba(82,157,255,.42));
}
.wordmark__text b { font: 800 .84rem/1 Space Grotesk, sans-serif; letter-spacing: .17em; }
.wordmark__text em { font: 600 .72rem/1 Space Grotesk, sans-serif; letter-spacing: .22em; font-style: normal; color: #63e6ff; }
.wordmark__beam {
  position: absolute;
  z-index: 3;
  left: 13px; right: 13px; bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #607dff, #53e4ff, transparent);
  box-shadow: 0 0 8px rgba(56,217,255,.9);
  transform-origin: left;
  animation: logoBeam 3.1s ease-in-out infinite;
}
.wordmark--footer { min-height: 56px; padding-inline: 18px; }
.wordmark--footer .wordmark__text b { font-size: 1.05rem; }
.wordmark--footer .wordmark__text em { font-size: .88rem; }
@keyframes logoAura { to { transform: rotate(1turn); } }
@keyframes logoBeam { 0%,100% { transform: scaleX(.32); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }

/* Hero identity and title */
.hero { min-height: 100svh; }
.hero__grid { grid-template-columns: 1.08fr .92fr; }
.hero__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 17px;
}
.hero__identity span {
  color: #fff;
  font: 700 .78rem/1 Space Grotesk, sans-serif;
  letter-spacing: .18em;
}
.hero__identity strong {
  position: relative;
  padding-left: 15px;
  color: var(--cyan);
  font: 700 .61rem/1 Space Mono, monospace;
  letter-spacing: .13em;
}
.hero__identity strong::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.hero__name { display: none; }
.hero__title { max-width: 780px; font-size: clamp(3.1rem, 5.1vw, 5.45rem); line-height: .98; letter-spacing: -.058em; }
.hero__description { max-width: 665px; }
.hero__visual::before {
  content: '';
  position: absolute;
  inset: 10% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,122,255,.16), rgba(55,216,255,.04) 38%, transparent 70%);
  filter: blur(22px);
}

/* Work — interactive case-study deck */
.case-deck {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(16,30,60,.92), rgba(4,10,24,.96));
  box-shadow: 0 48px 130px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.035);
}
.case-deck__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(5,12,28,.82);
}
.case-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 91px;
  padding: 16px 18px;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--text-2);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .3s, color .3s, transform .3s;
}
.case-tab:last-child { border-right: 0; }
.case-tab > span { color: var(--muted); font: .58rem Space Mono, monospace; }
.case-tab strong { display: block; color: inherit; font: 600 .82rem/1.2 Space Grotesk, sans-serif; }
.case-tab small { display: block; margin-top: 5px; color: var(--muted); font: .52rem Space Mono, monospace; }
.case-tab i { color: var(--cyan); font-style: normal; opacity: .35; transform: translate(-5px,4px); transition: opacity .3s, transform .3s; }
.case-tab:hover, .case-tab.is-active { color: #fff; background: linear-gradient(135deg, rgba(78,105,255,.16), rgba(47,207,255,.04)); }
.case-tab.is-active { box-shadow: inset 0 -2px 0 var(--cyan); }
.case-tab.is-active i { opacity: 1; transform: none; }
.case-deck__panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  min-height: 690px;
  transition: opacity .25s, transform .55s var(--ease), filter .35s;
}
.case-deck__panel.is-switching { opacity: .48; transform: translateY(7px) scale(.994); filter: blur(3px); }
.case-deck__content { position: relative; z-index: 3; padding: clamp(34px, 4.5vw, 58px); border-right: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.018), transparent); }
.case-deck__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.case-deck__meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: .52rem Space Mono, monospace; letter-spacing: .07em; text-transform: uppercase; }
.case-deck__meta span:first-child { color: var(--cyan); border-color: rgba(56,217,255,.23); }
.case-deck__content h3 { margin: 27px 0 15px; font: 600 clamp(2.25rem, 3.3vw, 3.65rem)/.98 Space Grotesk, sans-serif; letter-spacing: -.052em; }
.case-deck__summary { margin: 0; color: var(--text-2); font-size: .96rem; }
.case-deck__story { display: grid; gap: 10px; margin: 28px 0 25px; }
.case-deck__story > div { display: grid; grid-template-columns: 94px 1fr; gap: 15px; padding: 13px 0; border-top: 1px solid var(--line); }
.case-deck__story > div:last-child { border-bottom: 1px solid var(--line); }
.case-deck__story span { color: #70dfff; font: .54rem Space Mono, monospace; letter-spacing: .09em; text-transform: uppercase; }
.case-deck__story p { margin: 0; color: #c3cbe0; font-size: .76rem; }
.case-deck__scope { display: flex; flex-wrap: wrap; gap: 7px; }
.case-deck__scope span, .case-deck__tags span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: rgba(255,255,255,.02); font: .5rem Space Mono, monospace; }
.case-deck__link { display: inline-flex; gap: 12px; align-items: center; margin-top: 29px; color: #fff; font-size: .78rem; font-weight: 800; }
.case-deck__link span { color: var(--cyan); }
.case-deck__visual { --project-accent: #8B5CF6; position: relative; min-height: 690px; overflow: hidden; perspective: 1100px; }
.case-deck__aurora { position: absolute; inset: -25%; background: radial-gradient(circle at 60% 43%, color-mix(in srgb, var(--project-accent) 32%, transparent), transparent 47%); filter: blur(18px); transition: background .45s; }
.case-deck__grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(138,175,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(138,175,255,.13) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.case-deck__status { position: absolute; z-index: 8; left: 28px; right: 28px; top: 25px; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: .52rem Space Mono, monospace; letter-spacing: .09em; }
.case-deck__status span { color: var(--cyan); }
.case-deck__visual .browser-mockup { left: 7%; top: 16%; width: 85%; transform: perspective(900px) rotateY(-2.5deg) rotateX(1deg); }
.case-deck__visual .phone-mockup { right: 4%; bottom: 7%; width: 24%; transform: rotate(2deg); }
.case-deck__tags { position: absolute; z-index: 7; left: 5%; bottom: 5%; display: flex; flex-wrap: wrap; gap: 7px; max-width: 64%; }
.case-deck__panel.is-switching .browser-mockup { transform: perspective(900px) rotateY(-7deg) translateY(14px) scale(.96); opacity: .25; filter: blur(7px); }
.case-deck__panel.is-switching .phone-mockup { transform: translate(22px,17px) rotate(8deg); opacity: .2; filter: blur(6px); }
.case-deck__panel.is-switching .browser-mockup__wipe { animation: projectWipe .58s var(--ease); }

/* Services — richer technical stage */
.service-tabs { background: linear-gradient(180deg, rgba(11,22,45,.94), rgba(5,12,28,.95)); border-color: var(--line-strong); }
.service-tab { min-height: 91px; }
.service-panel { min-height: 680px; border-color: var(--line-strong); background: radial-gradient(circle at 84% 14%, rgba(70,118,255,.17), transparent 25rem), linear-gradient(145deg, rgba(12,25,53,.96), rgba(5,12,27,.97)); }
.service-panel h3 { font-size: clamp(2.4rem, 3.55vw, 3.8rem); }
.service-panel__deliverables { grid-template-columns: 1fr 1fr; }
.service-panel__deliverables li { min-height: 66px; display: flex; align-items: center; background: linear-gradient(135deg, rgba(78,112,255,.055), rgba(56,217,255,.018)); }
.service-panel__visual { background: radial-gradient(circle at 50% 45%, rgba(56,217,255,.105), transparent 18rem), #061026; }
.service-visual__canvas { border-color: rgba(126,166,255,.18); box-shadow: inset 0 0 70px rgba(43,99,255,.05); }

/* Reviews — three high-impact cards */
.reviews { background: radial-gradient(circle at 50% 45%, rgba(60,105,255,.12), transparent 38rem), linear-gradient(180deg, rgba(5,13,30,.55), rgba(2,6,23,.8)); }
.review-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 25px;
  color: inherit;
  background: linear-gradient(145deg, rgba(18,35,69,.98), rgba(5,12,27,.98));
  text-align: left;
  cursor: pointer;
  box-shadow: 0 32px 85px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.04);
  transition: transform .5s var(--ease), border-color .35s, box-shadow .35s;
}
.review-card:nth-child(2) { transform: translateY(22px); }
.review-card:hover { transform: translateY(-11px) rotateX(1.7deg) rotateY(-1.5deg); border-color: rgba(56,217,255,.42); box-shadow: 0 44px 110px rgba(0,0,0,.48), 0 0 50px rgba(56,217,255,.08); }
.review-card:nth-child(2):hover { transform: translateY(8px) rotateX(1.7deg) rotateY(-1.5deg); }
.review-card__glow { position: absolute; left: -30%; top: -24%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: rgba(77,112,255,.13); filter: blur(45px); }
.review-card__top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 19px 20px; border-bottom: 1px solid var(--line); }
.review-card__top span { color: var(--cyan); font: .52rem Space Mono, monospace; letter-spacing: .09em; }
.review-card__top strong { color: #ffd36b; font-size: .67rem; letter-spacing: .14em; }
.review-card__image { position: relative; z-index: 2; margin: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: #fff; box-shadow: 0 22px 52px rgba(0,0,0,.38); }
.review-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 45%, rgba(255,255,255,.22), transparent 61%); transform: translateX(-120%); transition: transform .7s; }
.review-card:hover .review-card__image::after { transform: translateX(120%); }
.review-card__image img { width: 100%; aspect-ratio: 1.22; object-fit: cover; object-position: top; transition: transform .55s var(--ease); }
.review-card:hover img { transform: scale(1.035); }
.review-card__footer { position: relative; z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 7px 20px 23px; }
.review-card__footer small { display: block; color: var(--muted); font: .52rem Space Mono, monospace; text-transform: uppercase; }
.review-card__footer b { display: block; margin-top: 7px; color: #fff; font: 600 .95rem Space Grotesk, sans-serif; }
.review-card__footer i { color: var(--cyan); font: normal .55rem Space Mono, monospace; white-space: nowrap; }
.reviews__footer { margin-top: 50px; }
.lightbox { background: rgba(1,5,17,.9); backdrop-filter: blur(18px); }
.lightbox__shell { border-color: rgba(120,165,255,.25); background: linear-gradient(145deg, #08132b, #040a18); }
.lightbox__stage { background: radial-gradient(circle at 50% 50%, rgba(66,111,255,.16), transparent 32rem); }

/* Contact — project command centre */
.contact { display: block; }
.contact__heading { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 65px; align-items: end; margin-bottom: 48px; }
.contact__heading h2 { margin: 0; max-width: 760px; font: 600 clamp(2.45rem, 3.9vw, 4.05rem)/1 Space Grotesk, sans-serif; letter-spacing: -.052em; }
.contact__heading > p { max-width: 520px; margin: 0; color: var(--text-2); }
.contact__experience { position: relative; z-index: 1; display: grid; grid-template-columns: .7fr 1.3fr; gap: 22px; align-items: stretch; }
.contact-hub { position: relative; overflow: hidden; padding: clamp(27px, 3.5vw, 42px); border: 1px solid var(--line-strong); border-radius: 28px; background: radial-gradient(circle at 50% 5%, rgba(62,112,255,.19), transparent 24rem), linear-gradient(155deg, rgba(12,26,55,.98), rgba(4,11,26,.98)); box-shadow: 0 38px 100px rgba(0,0,0,.28); }
.contact-hub::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(130,165,235,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(130,165,235,.13) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.contact-hub__orb { position: relative; width: 150px; aspect-ratio: 1; margin: 2px auto 31px; border: 1px solid rgba(70,215,255,.28); border-radius: 50%; box-shadow: inset 0 0 44px rgba(72,111,255,.12), 0 0 55px rgba(56,217,255,.08); }
.contact-hub__orb::before, .contact-hub__orb::after { content: ''; position: absolute; border-radius: 50%; border: 1px dashed rgba(111,145,255,.27); animation: contactOrbit 10s linear infinite; }
.contact-hub__orb::before { inset: 18px; }
.contact-hub__orb::after { inset: -13px; animation-direction: reverse; animation-duration: 15s; }
.contact-hub__orb span { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 34% 30%, #92f0ff, #5277ff 37%, #171f61 72%); box-shadow: 0 0 34px rgba(65,123,255,.65), 0 0 70px rgba(56,217,255,.18); animation: orbPulse 2.8s ease-in-out infinite; }
.contact-hub__orb i { position: absolute; left: 12%; top: 48%; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); animation: satellite 6s linear infinite; }
@keyframes contactOrbit { to { transform: rotate(1turn); } }
@keyframes orbPulse { 50% { transform: translate(-50%,-50%) scale(1.09); filter: brightness(1.22); } }
@keyframes satellite { to { offset-distance: 100%; } }
.contact-hub__status { position: relative; z-index: 2; display: flex; gap: 13px; align-items: flex-start; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.contact-hub__status b { display: block; font-size: .87rem; }
.contact-hub__status small { display: block; margin-top: 4px; color: var(--muted); font-size: .68rem; }
.contact-hub__promise { position: relative; z-index: 2; margin-top: 27px; }
.contact-hub__promise > span { color: var(--cyan); font: .54rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.contact-hub__promise ol { display: grid; gap: 0; margin: 15px 0 0; padding: 0; list-style: none; }
.contact-hub__promise li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.contact-hub__promise li:last-child { border-bottom: 1px solid var(--line); }
.contact-hub__promise b { color: #83a4ff; font: .55rem Space Mono, monospace; }
.contact-hub__promise p { margin: 0; color: #c3cce0; font-size: .75rem; }
.contact-hub__channels { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: 26px; }
.contact-hub__channels a { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); transition: transform .25s, border-color .25s, background .25s; }
.contact-hub__channels a:hover { transform: translateX(5px); border-color: rgba(56,217,255,.34); background: rgba(56,217,255,.035); }
.contact-hub__channels span { color: var(--muted); font: .51rem Space Mono, monospace; text-transform: uppercase; }
.contact-hub__channels strong { overflow: hidden; color: #fff; font-size: .71rem; text-overflow: ellipsis; }
.contact-hub__channels i { color: var(--cyan); font-style: normal; }
.contact-form { padding: clamp(30px, 4vw, 48px); border-color: var(--line-strong); background: radial-gradient(circle at 100% 0, rgba(66,105,255,.18), transparent 24rem), linear-gradient(150deg, rgba(12,25,52,.98), rgba(5,11,25,.99)); }
.contact-form::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.025); border-radius: 20px; pointer-events: none; }
.field { gap: 8px; }
.field input, .field select, .field textarea { padding: 13px 14px; border: 1px solid rgba(132,164,225,.14); border-radius: 12px; background: rgba(2,8,21,.5); transition: border-color .25s, background .25s, box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(56,217,255,.46); background: rgba(6,16,37,.8); box-shadow: 0 0 0 4px rgba(56,217,255,.035), 0 0 30px rgba(56,217,255,.035); }
.field em { display: none; }
.field--select::after { right: 15px; bottom: 39px; }
.service-picker button { flex: 1 1 120px; min-height: 43px; border-radius: 11px; background: rgba(2,8,21,.48); }
.btn--submit { min-height: 58px; border-radius: 14px; }

/* Footer identity */
.site-footer { background: linear-gradient(180deg, #030818, #01040d); }
.site-footer__inner { padding-block: 74px 31px; }
.site-footer__brand p { margin-top: 26px; }

/* More dimensional scrolling reveals */
.reveal--up { transform: translateY(54px) rotateX(7deg) scale(.985); }
.reveal--left { transform: translateX(-62px) skewX(-2deg); }
.reveal--right { transform: translateX(62px) skewX(2deg); }
.reveal--scale { transform: scale(.9) translateY(30px); clip-path: inset(11% 7% 11% 7% round 32px); }

@media (max-width: 1100px) {
  .case-deck__panel { grid-template-columns: .9fr 1.1fr; }
  .case-tab strong { font-size: .74rem; }
  .contact__experience { grid-template-columns: .8fr 1.2fr; }
  .service-panel__deliverables { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .wordmark--glow { min-height: 40px; padding-inline: 12px; }
  .wordmark__text b { font-size: .74rem; }
  .wordmark__text em { font-size: .63rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.85rem, 10.7vw, 4.85rem); }
  .case-deck__tabs { grid-template-columns: 1fr 1fr; }
  .case-tab:nth-child(2) { border-right: 0; }
  .case-tab:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .case-deck__panel { grid-template-columns: 1fr; }
  .case-deck__content { border-right: 0; border-bottom: 1px solid var(--line); }
  .case-deck__visual { min-height: 570px; }
  .review-cards { grid-template-columns: 1fr; }
  .review-card:nth-child(2) { transform: none; }
  .review-card:hover, .review-card:nth-child(2):hover { transform: translateY(-7px); }
  .review-card__image img { aspect-ratio: 1.5; }
  .contact__heading { grid-template-columns: 1fr; gap: 19px; }
  .contact__experience { grid-template-columns: 1fr; }
  .contact-hub__orb { width: 130px; }
}
@media (max-width: 580px) {
  .hero__identity { align-items: flex-start; flex-direction: column; gap: 9px; }
  .hero__identity strong { padding-left: 14px; }
  .hero__title { font-size: clamp(2.55rem, 12vw, 3.75rem); }
  .case-deck { border-radius: 22px; }
  .case-deck__tabs { grid-template-columns: 1fr; }
  .case-tab { min-height: 74px; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-deck__content { padding: 27px 20px; }
  .case-deck__content h3 { font-size: 2.35rem; }
  .case-deck__story > div { grid-template-columns: 1fr; gap: 7px; }
  .case-deck__visual { min-height: 430px; }
  .case-deck__visual .browser-mockup { width: 91%; left: 4%; }
  .case-deck__visual .phone-mockup { width: 29%; right: 1%; }
  .case-deck__tags { display: none; }
  .service-panel__deliverables { grid-template-columns: 1fr; }
  .review-card__image img { aspect-ratio: 1.2; }
  .contact__heading h2 { font-size: 2.55rem; }
  .contact-hub, .contact-form { border-radius: 22px; }
  .contact-hub__channels a { grid-template-columns: 62px 1fr auto; }
  .contact-form { padding: 24px 17px; }
  .wordmark--footer { min-height: 51px; }
}
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  left: var(--pointer-x, 50vw);
  top: var(--pointer-y, 25vh);
  width: 360px;
  height: 360px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72,128,255,.075), rgba(56,217,255,.025) 34%, transparent 70%);
  pointer-events: none;
  transition: left .1s linear, top .1s linear;
}
.case-deck__visual, .service-panel__visual, .contact-hub { translate: 0 var(--depth-y, 0px); transition: translate .18s linear; will-change: translate; }

/* ======================================================================
   V4 — clean identity, image-led work, accordion services, premium proof
   ====================================================================== */
:root {
  --bg: #020718;
  --bg-2: #061027;
  --surface: #0a1733;
  --surface-2: #0d1d3d;
  --surface-3: #071126;
  --text-2: #b8c4dd;
  --muted: #7180a1;
  --line: rgba(126, 166, 255, .13);
  --line-strong: rgba(126, 166, 255, .25);
}
body {
  background:
    radial-gradient(circle at 12% 5%, rgba(82, 76, 255, .14), transparent 34rem),
    radial-gradient(circle at 88% 17%, rgba(34, 211, 238, .08), transparent 34rem),
    radial-gradient(circle at 55% 64%, rgba(67, 91, 255, .055), transparent 42rem),
    linear-gradient(180deg, #020718 0%, #041027 42%, #020718 100%);
}
.ambient-canvas { opacity: .82; }
.noise { opacity: .075; }
.section-heading { margin-bottom: 52px; }
.section-heading h2 { font-size: clamp(2.25rem, 3.7vw, 3.85rem); max-width: 720px; }
.section-heading__intro { max-width: 430px; }

/* Clean hero identity */
.hero { min-height: 100svh; }
.hero__grid { grid-template-columns: 1.02fr .98fr; }
.hero__copy { padding-top: 22px; }
.hero__identity--main {
  display: block;
  margin: 0;
  max-width: 760px;
  text-transform: uppercase;
}
.hero__identity--main span {
  display: block;
  color: #fff;
  font: 700 clamp(3.8rem, 6.8vw, 7.25rem)/.87 Space Grotesk, sans-serif;
  letter-spacing: -.072em;
  text-shadow: 0 0 42px rgba(90, 108, 255, .18);
  font-size: 83px;
  line-height: 1.2;
  margin-top: 12px;
}
.eyebrow.reveal.reveal--left.is-visible {
    margin-bottom: 0;
}
.hero__identity--main strong {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 0;
  color: #6fe8ff;
  font: 700 clamp(.78rem, 1.18vw, 1.04rem)/1 Space Mono, monospace;
  letter-spacing: .2em;
  text-shadow: 0 0 20px rgba(34, 211, 238, .28);
  font-weight: 900;
}
.hero__identity--main strong::before {
  content: '';
  position: static;
  width: 34px;
  height: 1px;
  transform: none;
  border-radius: 0;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  box-shadow: 0 0 15px rgba(34, 211, 238, .7);
}
.hero__description--clean {
  max-width: 610px;
  margin-top: 29px;
  color: #aebbd5;
  font-size: clamp(1rem, 1.18vw, 1.13rem);
  line-height: 1.72;
}
.hero__actions { margin-top: 29px; }
.hero__visual { min-height: min(690px, 72vh); }

/* Work — large image-led case studies */
.work { position: relative; }
.work::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% -12% auto;
  height: 620px;
  background: radial-gradient(circle at 50% 50%, rgba(73, 96, 255, .11), transparent 58%);
  pointer-events: none;
}
.work-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}
.work-card {
  --project-accent: #8b5cf6;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 29px;
  background: linear-gradient(150deg, rgba(12, 28, 62, .98), rgba(4, 11, 29, .99));
  box-shadow: 0 35px 100px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.025);
}
.work-card--1, .work-card--4 { grid-column: 1 / -1; display: grid; grid-template-columns: 1.24fr .76fr; }
.work-card--4 { grid-template-columns: .76fr 1.24fr; }
.work-card--4 .work-card__visual { order: 2; }
.work-card--2, .work-card--3 { display: flex; flex-direction: column; }
.work-card__visual {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  perspective: 1200px;
  background:
    linear-gradient(rgba(112, 146, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 146, 255, .08) 1px, transparent 1px),
    radial-gradient(circle at 64% 38%, color-mix(in srgb, var(--project-accent) 23%, transparent), transparent 52%),
    #061126;
  background-size: 42px 42px, 42px 42px, auto, auto;
}
.work-card--2 .work-card__visual, .work-card--3 .work-card__visual { min-height: 430px; }
.work-card__ambient {
  position: absolute;
  inset: 12% 8%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--project-accent) 18%, transparent);
  filter: blur(68px);
  opacity: .7;
  transition: transform .7s var(--ease), opacity .7s;
}
.work-card__browser {
  position: absolute;
  z-index: 3;
  left: 7%;
  top: 13%;
  width: 84%;
  overflow: hidden;
  border: 1px solid rgba(150, 182, 255, .27);
  border-radius: 17px;
  background: #071126;
  box-shadow: 0 34px 90px rgba(0,0,0,.52);
  transform: perspective(1100px) rotateY(-3.2deg) rotateX(1.2deg);
  transition: transform .65s var(--ease), filter .65s, box-shadow .65s;
}
.work-card__browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #0a1730; }
.work-card__browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #55709e; }
.work-card__browser-bar span:first-child { background: #ff7186; }.work-card__browser-bar span:nth-child(2) { background: #ffd15c; }.work-card__browser-bar span:nth-child(3) { background: #5ee6a8; }
.work-card__browser-bar em { overflow: hidden; margin-left: auto; color: #7181a4; font: normal .48rem Space Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.work-card__browser img { width: 100%; aspect-ratio: 1.58; object-fit: cover; object-position: top; }
.work-card__phone {
  position: absolute;
  z-index: 5;
  right: 4.4%;
  bottom: 5%;
  width: 22%;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(161, 188, 255, .32);
  border-radius: 22px;
  background: #060b17;
  box-shadow: 0 28px 65px rgba(0,0,0,.52);
  transform: rotate(2.2deg);
  transition: transform .65s var(--ease), filter .65s;
}
.work-card__phone > div { width: 36%; height: 4px; margin: 3px auto 7px; border-radius: 999px; background: #253451; }
.work-card__phone img { width: 100%; aspect-ratio: .5; object-fit: cover; object-position: top; border-radius: 14px; }
.work-card__number {
  position: absolute;
  z-index: 1;
  left: 4%;
  bottom: -4%;
  color: rgba(255,255,255,.055);
  font: 700 clamp(8rem, 13vw, 13rem)/.8 Space Grotesk, sans-serif;
  letter-spacing: -.08em;
}
.work-card:hover .work-card__browser { transform: perspective(1100px) rotateY(0) rotateX(0) translateY(-8px) scale(1.018); box-shadow: 0 46px 115px rgba(0,0,0,.6); }
.work-card:hover .work-card__phone { transform: translate(-7px,-9px) rotate(-1deg); }
.work-card:hover .work-card__ambient { transform: scale(1.18); opacity: 1; }
.work-card__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4.2vw, 58px); }
.work-card--2 .work-card__content, .work-card--3 .work-card__content { flex: 1; padding: 32px; }
.work-card__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.work-card__meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #8fa1c6; font: .5rem Space Mono, monospace; text-transform: uppercase; letter-spacing: .07em; }
.work-card__meta span:first-child { color: #71e6ff; border-color: rgba(34, 211, 238, .25); }
.work-card__content h3 { margin: 25px 0 14px; font: 600 clamp(2rem, 3vw, 3.25rem)/.98 Space Grotesk, sans-serif; letter-spacing: -.052em; }
.work-card--2 h3, .work-card--3 h3 { font-size: clamp(1.85rem, 2.55vw, 2.7rem); }
.work-card__content > p { margin: 0; color: var(--text-2); font-size: .91rem; }
.work-card__result { display: grid; gap: 8px; margin-top: 25px; padding: 17px 0; border-block: 1px solid var(--line); }
.work-card__result span { color: var(--cyan); font: .52rem Space Mono, monospace; letter-spacing: .09em; text-transform: uppercase; }
.work-card__result strong { color: #d8e0f2; font-size: .78rem; line-height: 1.6; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.work-card__tags span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: #9eabc5; background: rgba(255,255,255,.018); font: .49rem Space Mono, monospace; }
.work-card__link { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; margin-top: 25px; color: #fff; font-size: .76rem; font-weight: 800; }
.work-card__link span { color: var(--cyan); }

/* Services — full-width accordion matching the requested structure */
.service-accordion { border-top: 1px solid var(--line); }
.service-row { position: relative; border-bottom: 1px solid var(--line); transition: background .35s; }
.service-row::before { content: ''; position: absolute; inset: 0; opacity: 0; background: linear-gradient(100deg, color-mix(in srgb, var(--service-accent) 9%, transparent), transparent 68%); transition: opacity .4s; pointer-events: none; }
.service-row.is-active::before { opacity: 1; }
.service-row__trigger {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px minmax(240px, .52fr) 1fr 48px;
  gap: 20px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  padding: 20px 8px 20px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.service-row__number { color: #7888aa; font: .58rem Space Mono, monospace; letter-spacing: .1em; }
.service-row__trigger strong { color: #aeb9cf; font: 600 clamp(2.05rem, 3.4vw, 3.65rem)/.96 Space Grotesk, sans-serif; letter-spacing: -.055em; transition: color .35s, transform .35s; }
.service-row__trigger small { max-width: 390px; color: #657493; font-size: .77rem; font-weight: 700; line-height: 1.35; transition: color .35s; }
.service-row__trigger i { position: relative; justify-self: end; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; }
.service-row__trigger i::before, .service-row__trigger i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; transform: translate(-50%,-50%); background: #7888aa; transition: transform .35s, background .35s; }
.service-row__trigger i::after { transform: translate(-50%,-50%) rotate(90deg); }
.service-row.is-active .service-row__trigger strong { color: #fff; transform: translateX(3px); }
.service-row.is-active .service-row__trigger small { color: #a9b7d2; }
.service-row.is-active .service-row__trigger i { border-color: color-mix(in srgb, var(--service-accent) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--service-accent) 24%, transparent); }
.service-row.is-active .service-row__trigger i::before, .service-row.is-active .service-row__trigger i::after { background: var(--service-accent); }
.service-row.is-active .service-row__trigger i::after { transform: translate(-50%,-50%) rotate(0deg); }
.service-row__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 42px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: max-height .7s var(--ease), opacity .42s, transform .55s var(--ease), padding .7s var(--ease);
}
.service-row.is-active .service-row__body { max-height: 980px; padding: 18px 0 48px 68px; opacity: 1; transform: none; }
.service-row__content { align-self: center; }
.service-row__content > p { margin: 0; color: #b7c3da; font-size: .93rem; line-height: 1.75; }
.service-row__content ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 25px 0 24px; padding: 0; list-style: none; }
.service-row__content li { position: relative; min-height: 60px; display: flex; align-items: center; padding: 10px 12px 10px 34px; border: 1px solid var(--line); border-radius: 12px; color: #cfd8eb; background: rgba(255,255,255,.018); font-size: .68rem; }
.service-row__content li::before { content: '✓'; position: absolute; left: 12px; color: var(--service-accent); font-weight: 800; }
.service-row__keywords { display: flex; flex-wrap: wrap; gap: 7px; }
.service-row__keywords span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: #98a6c2; font: .49rem Space Mono, monospace; }
.service-row__visual { min-width: 0; }
.service-art { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 22px; background: #061126; box-shadow: 0 32px 90px rgba(0,0,0,.36); }
.service-art__frame { position: absolute; inset: 18px; overflow: hidden; border: 1px solid rgba(132,167,255,.23); border-radius: 17px; background: #071126; transform: perspective(1100px) rotateY(-2deg); transition: transform .6s var(--ease); }
.service-row:hover .service-art__frame { transform: perspective(1100px) rotateY(0) translateY(-3px); }
.service-art__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #0a1731; }
.service-art__bar span { width: 6px; height: 6px; border-radius: 50%; background: #52698f; }
.service-art__bar span:first-child { background: #ff7186; }.service-art__bar span:nth-child(2) { background: #ffd15c; }.service-art__bar span:nth-child(3) { background: #5ee6a8; }
.service-art__bar em { overflow: hidden; margin-left: auto; max-width: 65%; color: #7181a3; font: normal .43rem Space Mono, monospace; text-overflow: ellipsis; white-space: nowrap; }
.service-art__frame img { width: 100%; height: calc(100% - 36px); object-fit: cover; }
.service-art__flare { position: absolute; right: -10%; top: -12%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--service-accent) 17%, transparent); filter: blur(55px); pointer-events: none; }
.service-art__badge { position: absolute; left: 32px; bottom: 29px; display: grid; gap: 4px; max-width: 74%; padding: 12px 15px; border: 1px solid rgba(151,183,255,.25); border-radius: 12px; background: rgba(3,10,25,.84); backdrop-filter: blur(14px); box-shadow: 0 18px 48px rgba(0,0,0,.34); }
.service-art__badge span { color: var(--service-accent); font: .45rem Space Mono, monospace; letter-spacing: .1em; }
.service-art__badge strong { font-size: .72rem; }

/* Reviews — three substantial cards and a full review slider */
.reviews { position: relative; overflow: hidden; }
.reviews::before { content: ''; position: absolute; inset: 16% -10% auto; height: 620px; background: radial-gradient(circle at 50% 50%, rgba(75, 102, 255, .13), transparent 60%); pointer-events: none; }
.review-cards { gap: 24px; perspective: 1300px; }
.review-card {
  position: relative;
  min-height: 590px;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(126,166,255,.24);
  border-radius: 28px;
  color: inherit;
  background: linear-gradient(155deg, rgba(12,28,62,.98), rgba(3,10,25,.99));
  box-shadow: 0 38px 105px rgba(0,0,0,.33);
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .55s var(--ease), border-color .35s, box-shadow .55s;
}
.review-card--2 { transform: translateY(28px); }
.review-card:hover { transform: translateY(-11px) rotateX(1.2deg) rotateY(-1.2deg); border-color: rgba(74,220,255,.44); box-shadow: 0 50px 125px rgba(0,0,0,.48), 0 0 52px rgba(56,217,255,.07); }
.review-card--2:hover { transform: translateY(13px) rotateX(1.2deg) rotateY(-1.2deg); }
.review-card__glow { position: absolute; right: -25%; top: -20%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: rgba(77, 102, 255, .16); filter: blur(55px); }
.review-card__head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.review-card__head > div { display: flex; align-items: center; gap: 9px; }
.review-card__head span { color: #5ee6a8; font: 700 .55rem Space Mono, monospace; letter-spacing: .1em; }
.review-card__head strong { color: #aebbd5; font: 700 .49rem Space Mono, monospace; letter-spacing: .08em; }
.review-card__head b { color: #ffd36b; font-size: .68rem; letter-spacing: .16em; }
.review-card__stage { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; min-height: 405px; padding: 27px 22px 22px; overflow: hidden; background: radial-gradient(circle at 50% 46%, rgba(83,119,255,.15), transparent 18rem); }
.review-card__quote { position: absolute; left: 18px; top: -18px; color: rgba(255,255,255,.055); font: 700 9rem/1 Georgia, serif; }
.review-card__image { position: relative; z-index: 2; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 17px; background: #fff; box-shadow: 0 26px 70px rgba(0,0,0,.52); transform: perspective(900px) rotateX(1.7deg) rotateY(-1.4deg); transition: transform .55s var(--ease); }
.review-card:hover .review-card__image { transform: perspective(900px) rotateX(0) rotateY(0) scale(1.025); }
.review-card__image img { width: 100%; aspect-ratio: 1.2; object-fit: cover; object-position: top; }
.review-card__index { position: absolute; right: 10px; bottom: -11px; color: rgba(255,255,255,.055); font: 700 5.8rem/.8 Space Grotesk, sans-serif; }
.review-card__footer { position: relative; z-index: 3; display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 18px 22px 24px; border-top: 1px solid var(--line); }
.review-card__footer small { display: block; color: #7181a2; font: .49rem Space Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.review-card__footer b { display: block; margin-top: 7px; color: #fff; font: 600 .94rem Space Grotesk, sans-serif; }
.review-card__footer i { color: #6fe8ff; font: normal .49rem Space Mono, monospace; white-space: nowrap; }
.lightbox__shell { width: min(1240px, 100%); background: linear-gradient(145deg, #081630, #020817); }
.lightbox__stage { min-height: 560px; }
.lightbox__slide { max-width: 930px; }

/* Contact — large, highlighted contact information without extra clutter */
.contact__heading--clean { grid-template-columns: 1.1fr .9fr; margin-bottom: 45px; }
.contact__heading--clean h2 { font-size: clamp(2.5rem, 4vw, 4.25rem); }
.contact__experience { grid-template-columns: .82fr 1.18fr; align-items: stretch; }
.contact-hub--simple {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(35px, 4vw, 55px);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(circle at 24% 20%, rgba(83, 103, 255, .2), transparent 20rem),
    linear-gradient(145deg, rgba(12,28,62,.98), rgba(3,10,25,.99));
}
.contact-hub--simple::before { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(255,255,255,.025); border-radius: 20px; pointer-events: none; }
.contact-hub__eyebrow { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin: 0; color: #8d9dbb; font: .57rem Space Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.contact-hub--simple h3 { position: relative; z-index: 2; max-width: 440px; margin: 31px 0 13px; font: 600 clamp(2.45rem, 4vw, 4rem)/.97 Space Grotesk, sans-serif; letter-spacing: -.055em; }
.contact-hub__intro { position: relative; z-index: 2; margin: 0; color: #96a5c1; font-size: .88rem; }
.contact-hub__channels--large { margin-top: 37px; gap: 0; }
.contact-hub__channels--large a {
  grid-template-columns: 76px 1fr auto;
  min-height: 91px;
  padding: 19px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.contact-hub__channels--large a:last-child { border-bottom: 1px solid var(--line); }
.contact-hub__channels--large a:hover { transform: none; padding-left: 10px; border-color: rgba(90,219,255,.34); background: linear-gradient(90deg, rgba(56,217,255,.045), transparent); }
.contact-hub__channels--large span { color: #7181a2; font-size: .52rem; }
.contact-hub__channels--large strong { color: #fff; font: 600 clamp(.95rem, 1.42vw, 1.28rem) Space Grotesk, sans-serif; text-shadow: 0 0 20px rgba(89, 217, 255, .08); }
.contact-hub__channels--large i { font-size: 1.05rem; }
.contact-form__header--clean h3 { font-size: clamp(2rem, 3vw, 3.1rem); }
.field select { color-scheme: dark; }
.field select option { color: #fff; background: #071126; }

/* More polished reveal motion */
.reveal { transition-duration: .92s; }
.reveal--up { transform: translateY(46px) scale(.987); filter: blur(8px); }
.reveal--left { transform: translateX(-54px) scale(.992); filter: blur(7px); }
.reveal--right { transform: translateX(54px) scale(.992); filter: blur(7px); }
.reveal--scale { transform: scale(.94) translateY(24px); filter: blur(9px); clip-path: inset(7% 5% 7% 5% round 26px); }

@media (max-width: 1100px) {
  .work-card--1, .work-card--4 { grid-template-columns: 1fr; }
  .work-card--4 .work-card__visual { order: 0; }
  .work-card__visual { min-height: 500px; }
  .service-row__body { grid-template-columns: 1fr; }
  .service-row.is-active .service-row__body { padding-left: 68px; }
  .service-art { min-height: 500px; }
  .service-row__trigger { grid-template-columns: 44px minmax(220px,.6fr) 1fr 44px; }
}
@media (max-width: 820px) {
  .hero__identity--main span { font-size: clamp(3.2rem, 13vw, 5.6rem); }
  .hero__identity--main strong { font-size: .72rem; letter-spacing: .13em; }
  .work-showcase { grid-template-columns: 1fr; }
  .work-card--1, .work-card--4 { grid-column: auto; }
  .work-card__visual, .work-card--2 .work-card__visual, .work-card--3 .work-card__visual { min-height: 460px; }
  .service-row__trigger { grid-template-columns: 36px 1fr 42px; min-height: 92px; gap: 12px; }
  .service-row__trigger small { display: none; }
  .service-row__trigger strong { font-size: clamp(1.75rem, 7vw, 2.8rem); }
  .service-row.is-active .service-row__body { padding: 10px 0 38px; }
  .service-row__content ul { grid-template-columns: 1fr; }
  .review-cards { grid-template-columns: 1fr; }
  .review-card, .review-card--2 { min-height: 0; transform: none; }
  .review-card:hover, .review-card--2:hover { transform: translateY(-7px); }
  .review-card__stage { min-height: 380px; }
  .contact__heading--clean, .contact__experience { grid-template-columns: 1fr; }
  .contact-hub--simple { min-height: auto; }
}
@media (max-width: 580px) {
  .hero__copy { padding-top: 0; }
  .hero__identity--main span { font-size: clamp(2.95rem, 14.5vw, 4.55rem); }
  .hero__identity--main strong { align-items: flex-start; font-size: .62rem; line-height: 1.45; }
  .hero__identity--main strong::before { margin-top: 7px; }
  .hero__description--clean { font-size: .94rem; }
  .work-card { border-radius: 22px; }
  .work-card__visual, .work-card--2 .work-card__visual, .work-card--3 .work-card__visual { min-height: 360px; }
  .work-card__browser { left: 4%; width: 90%; }
  .work-card__phone { right: 1%; width: 26%; }
  .work-card__content, .work-card--2 .work-card__content, .work-card--3 .work-card__content { padding: 25px 19px; }
  .work-card__content h3 { font-size: 2.1rem; }
  .service-row__trigger { padding-right: 0; }
  .service-row__trigger strong { font-size: 1.78rem; }
  .service-art { min-height: 330px; border-radius: 18px; }
  .service-art__frame { inset: 11px; }
  .service-art__badge { left: 22px; bottom: 20px; }
  .review-card { border-radius: 22px; }
  .review-card__stage { min-height: 315px; padding: 20px 14px; }
  .review-card__footer { align-items: flex-start; flex-direction: column; }
  .contact-hub--simple { padding: 31px 20px; }
  .contact-hub--simple h3 { font-size: 2.55rem; }
  .contact-hub__channels--large a { grid-template-columns: 62px 1fr auto; min-height: 82px; }
  .contact-hub__channels--large strong { font-size: .92rem; }
}

/* V4 mobile containment fixes */
@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  .site-header { width: calc(100vw - 24px); max-width: calc(100vw - 24px); grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding-inline: 12px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { width: 100vw; max-width: 100vw; overflow: hidden; }
  .mobile-menu__panel { width: 100vw; max-width: 100vw; }
  .hero { min-height: auto; overflow: hidden; padding-bottom: 28px; }
  .hero__grid { grid-template-columns: minmax(0,1fr) !important; gap: 34px; }
  .hero__copy, .hero__visual { width: 100%; min-width: 0; }
  .hero__visual { min-height: 520px; overflow: hidden; }
  .profile-frame { left: 50%; width: min(72vw, 390px); }
  .profile-frame__glow { inset: -18%; }
  .hero-paths { inset: 4%; width: 92%; height: 92%; }
  .final-cta, .final-cta__inner { overflow: hidden; }
}
@media (max-width: 580px) {
  .site-header { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
  .hero__grid { gap: 22px; }
  .hero__visual { min-height: 430px; }
  .profile-frame { width: min(76vw, 310px); }
  .floating-chip { max-width: 120px; white-space: normal; text-align: center; }
}

/* =========================================================
   V5 — focused refinements from final review
   ========================================================= */

/* Hero name — clean, glowing and animated without adding clutter */
.hero-name {
  position: relative;
  display: inline-block;
  color: transparent !important;
  background: linear-gradient(100deg, #ffffff 0%, #dce6ff 27%, #8b5cf6 52%, #38d9ff 70%, #ffffff 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(139,92,246,.28)) drop-shadow(0 0 30px rgba(56,217,255,.12));
  animation: heroNameSweep 5.8s ease-in-out infinite;
}
.hero-name::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(118,157,255,.25);
  filter: blur(7px);
  opacity: .7;
  transform: translateY(2px) scale(1.006);
}
.hero-name::after {
  content: '';
  position: absolute;
  left: 1%;
  right: 7%;
  bottom: -.09em;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #8b5cf6, #38d9ff, transparent);
  box-shadow: 0 0 18px rgba(56,217,255,.48);
  transform-origin: left;
  animation: heroNameLine 3.2s ease-in-out infinite;
}
@keyframes heroNameSweep { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes heroNameLine { 0%,100% { transform: scaleX(.28); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } }
.wordmark__text b, .wordmark__text em { font-style: normal; }
.wordmark__text {
  color: transparent !important;
  background: linear-gradient(90deg,#fff,#b7c8ff 36%,#8b5cf6 62%,#38d9ff 82%,#fff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: wordmarkShimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.28));
}
.wordmark__beam { position:absolute; left:0; right:0; bottom:-8px; height:1px; overflow:hidden; background:rgba(255,255,255,.08); }
.wordmark__beam::after { content:''; position:absolute; width:36%; inset-block:0; left:-40%; background:linear-gradient(90deg,transparent,#8b5cf6,#38d9ff,transparent); animation:wordmarkBeam 3.6s ease-in-out infinite; }
@keyframes wordmarkShimmer { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }
@keyframes wordmarkBeam { 55%,100%{left:110%} }

/* Work — four clear, image-led case studies */
.work-showcase { grid-template-columns: 1fr !important; gap: 34px; }
.work-card,
.work-card--1,
.work-card--2,
.work-card--3,
.work-card--4 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.24fr) minmax(340px, .76fr) !important;
  min-height: 590px;
  isolation: isolate;
}
.work-card--2,
.work-card--4 { grid-template-columns: minmax(340px, .76fr) minmax(0, 1.24fr) !important; }
.work-card--2 .work-card__visual,
.work-card--4 .work-card__visual { order: 2; }
.work-card::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg, color-mix(in srgb,var(--project-accent) 8%,transparent), transparent 38% 72%, color-mix(in srgb,var(--project-accent) 5%,transparent));
}
.work-card__visual,
.work-card--2 .work-card__visual,
.work-card--3 .work-card__visual {
  min-height: 590px;
  background:
    radial-gradient(circle at 62% 40%, color-mix(in srgb,var(--project-accent) 24%,transparent), transparent 42%),
    linear-gradient(145deg,#071229,#040a17);
}
.work-card__visual::before {
  content:'PROJECT SYSTEM PREVIEW';
  position:absolute;
  left:28px;
  top:24px;
  z-index:7;
  color:#95a5c6;
  font:700 .48rem Space Mono,monospace;
  letter-spacing:.14em;
}
.work-card__browser {
  left: 4.5%;
  top: 10%;
  width: 91%;
  border-radius: 20px;
  transform: perspective(1300px) rotateY(-2deg) rotateX(1deg);
  box-shadow: 0 42px 120px rgba(0,0,0,.56), 0 0 0 1px rgba(120,160,255,.08);
}
.work-card--2 .work-card__browser,
.work-card--4 .work-card__browser { transform: perspective(1300px) rotateY(2deg) rotateX(1deg); }
.work-card__browser img { aspect-ratio: 1.6; object-fit: cover; object-position: top center; }
.work-card__phone { width: 20%; right: 2.8%; bottom: 3.8%; border-radius: 25px; }
.work-card__phone img { aspect-ratio: .545; }
.work-card__content { padding: clamp(34px,4vw,62px); }
.work-card__content h3 { max-width: 520px; }
.work-card:hover .work-card__browser { transform: perspective(1300px) rotateY(0) rotateX(0) translateY(-9px) scale(1.012); }
.work-card--2:hover .work-card__browser,
.work-card--4:hover .work-card__browser { transform: perspective(1300px) rotateY(0) rotateX(0) translateY(-9px) scale(1.012); }

/* Reviews — compact, three-card layout with subtle rotation */
.review-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 355px));
  justify-content: center;
  align-items: start;
  gap: clamp(20px,2.6vw,34px);
  padding: 16px 8px 28px;
}
.review-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0 !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(126,160,225,.22);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(16,31,61,.98),rgba(5,13,29,.99));
  box-shadow: 0 24px 65px rgba(0,0,0,.34);
  cursor: pointer;
  text-align: left;
  transform: rotate(-1.7deg) translateY(7px);
  transform-origin: center;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .35s;
  animation: reviewFloatOne 6s ease-in-out infinite;
}
.review-card--2 { transform: rotate(1.25deg) translateY(-3px) !important; animation: reviewFloatTwo 6.8s ease-in-out infinite; }
.review-card--3 { transform: rotate(-.7deg) translateY(10px); animation: reviewFloatThree 6.3s ease-in-out infinite; }
.review-card:hover,
.review-card--2:hover,
.review-card--3:hover {
  transform: rotate(0) translateY(-10px) scale(1.025) !important;
  border-color: rgba(56,217,255,.48);
  box-shadow: 0 38px 90px rgba(0,0,0,.46), 0 0 45px rgba(56,217,255,.08);
}
.review-card__preview { position:relative; aspect-ratio:1.38; overflow:hidden; background:#fff; }
.review-card__preview::after { content:''; position:absolute; inset:auto 0 0; height:38%; background:linear-gradient(transparent,rgba(3,8,20,.58)); pointer-events:none; }
.review-card__preview img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .55s var(--ease); }
.review-card:hover .review-card__preview img { transform:scale(1.035); }
.review-card__verified { position:absolute; z-index:2; left:14px; bottom:12px; padding:7px 9px; border:1px solid rgba(255,255,255,.22); border-radius:999px; color:#fff; background:rgba(4,10,22,.66); backdrop-filter:blur(10px); font:700 .45rem Space Mono,monospace; letter-spacing:.11em; }
.review-card__meta { position:relative; display:grid; gap:10px; padding:16px 17px 18px; }
.review-card__meta > div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review-card__meta b { color:#ffd15c; font-size:.68rem; letter-spacing:.12em; }
.review-card__meta small { color:#7383a3; font:.48rem Space Mono,monospace; text-transform:uppercase; letter-spacing:.07em; }
.review-card__meta strong { color:#fff; font:600 .92rem Space Grotesk,sans-serif; }
.review-card__meta i { color:#69e6ff; font:normal .48rem Space Mono,monospace; }
.review-card__glow { position:absolute; z-index:0; width:180px; aspect-ratio:1; right:-60px; bottom:-70px; border-radius:50%; background:rgba(85,98,255,.2); filter:blur(48px); }
@keyframes reviewFloatOne { 50% { transform:rotate(-.7deg) translateY(0); } }
@keyframes reviewFloatTwo { 50% { transform:rotate(.35deg) translateY(5px); } }
@keyframes reviewFloatThree { 50% { transform:rotate(-1.3deg) translateY(2px); } }

/* Process — clearer progress, moving signal and richer cards */
.process-map {
  min-height: 560px;
  padding: 12px;
  border: 1px solid rgba(118,151,215,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 25% 15%,rgba(79,124,255,.09),transparent 24rem),
    linear-gradient(145deg,rgba(9,22,49,.84),rgba(3,10,24,.66));
}
.process-orb { fill:#fff; stroke:#38d9ff; stroke-width:4; filter:drop-shadow(0 0 10px #38d9ff) drop-shadow(0 0 24px rgba(139,92,246,.7)); }
.process-step {
  width: 205px;
  padding: 17px 18px 18px;
  border: 1px solid rgba(128,160,220,.12);
  border-radius: 18px;
  background: rgba(7,17,37,.72);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}
.process-step.is-active { border-color:rgba(56,217,255,.26); background:linear-gradient(145deg,rgba(18,37,75,.92),rgba(7,17,37,.86)); box-shadow:0 26px 60px rgba(0,0,0,.26),0 0 32px rgba(56,217,255,.06); }
.process-step__node { margin-top:-39px; background:#071128; }
.process-step h3 { font-size:1.27rem; }
.process-step p { line-height:1.62; }

/* Stack — animated capability clusters */
.stack-board { border-color:rgba(128,160,220,.18); background:radial-gradient(circle at 50% 0,rgba(89,98,255,.12),transparent 28rem),linear-gradient(145deg,rgba(10,25,54,.94),rgba(4,11,26,.96)); }
.stack-board__rails { position:absolute; inset:69px 0 auto; height:48px; pointer-events:none; overflow:hidden; }
.stack-board__rails span { position:absolute; top:50%; left:-12%; width:12%; height:1px; background:linear-gradient(90deg,transparent,#38d9ff,transparent); box-shadow:0 0 13px rgba(56,217,255,.7); animation:stackRail 7s linear infinite; }
.stack-board__rails span:nth-child(2){animation-delay:-2.25s}.stack-board__rails span:nth-child(3){animation-delay:-4.5s}
@keyframes stackRail { to { left:112%; } }
.stack-group {
  min-height: 330px;
  opacity: .25;
  transform: translateY(24px) scale(.97);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background .35s;
}
.stack-group.is-active { opacity:1; transform:none; }
.stack-group__heading h3 { margin:31px 0 8px; }
.stack-group__heading p { min-height:46px; }
.stack-group__tools { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.stack-group__tools .stack-tool {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:9px 10px;
  border:1px solid rgba(131,159,216,.13);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  transition:transform .3s,border-color .3s,background .3s,box-shadow .3s;
}
.stack-tool i { flex:0 0 29px; display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#c7d2ff; background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(56,217,255,.11)); font:700 .43rem Space Mono,monospace; font-style:normal; }
.stack-tool b { overflow:hidden; color:#aebad1; font:600 .58rem Space Grotesk,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.stack-tool:hover { transform:translateY(-4px); border-color:rgba(56,217,255,.35); background:rgba(56,217,255,.045); box-shadow:0 14px 32px rgba(0,0,0,.22); }
.stack-tool:hover b { color:#fff; }

/* Contact information — prominent icons and stronger hover feedback */
.contact-hub__channels--large .contact-channel {
  grid-template-columns: 58px minmax(0,1fr) 26px;
  min-height: 96px;
  padding: 16px 14px;
  border: 1px solid rgba(126,157,216,.12) !important;
  border-radius: 16px !important;
  margin-top: 12px;
  background: rgba(255,255,255,.018);
  transition: transform .35s var(--ease), border-color .35s, background .35s, box-shadow .35s, padding .35s !important;
}
.contact-hub__channels--large .contact-channel:hover {
  transform: translateX(8px) !important;
  padding-left: 18px !important;
  border-color: rgba(56,217,255,.38) !important;
  background: linear-gradient(100deg,rgba(139,92,246,.11),rgba(56,217,255,.045)) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.24),0 0 30px rgba(56,217,255,.055);
}
.contact-channel__icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(126,157,216,.2); border-radius:15px; background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(56,217,255,.06)); box-shadow:inset 0 1px rgba(255,255,255,.06); transition:transform .35s,border-color .35s,box-shadow .35s; }
.contact-channel__icon svg { width:23px; height:23px; fill:none; stroke:#a9c6ff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-channel:hover .contact-channel__icon { transform:rotate(-5deg) scale(1.08); border-color:rgba(56,217,255,.45); box-shadow:0 0 26px rgba(56,217,255,.12); }
.contact-channel__copy { display:grid; gap:6px; min-width:0; }
.contact-channel__copy small { color:#7181a2; font:700 .51rem Space Mono,monospace; letter-spacing:.1em; text-transform:uppercase; }
.contact-channel__copy strong { overflow:hidden; color:#fff; font:600 clamp(.98rem,1.35vw,1.22rem) Space Grotesk,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.contact-channel > i { color:#68e5ff; font-size:1.05rem; font-style:normal; }

@media (max-width: 1100px) {
  .work-card,.work-card--1,.work-card--2,.work-card--3,.work-card--4 { grid-template-columns:1fr !important; }
  .work-card--2 .work-card__visual,.work-card--4 .work-card__visual { order:0; }
  .work-card__visual,.work-card--2 .work-card__visual,.work-card--3 .work-card__visual { min-height:520px; }
  .review-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stack-group__tools { grid-template-columns:1fr; }
}
@media (max-width: 820px) {
  .work-card,.work-card--1,.work-card--2,.work-card--3,.work-card--4 { min-height:0; }
  .work-card__visual,.work-card--2 .work-card__visual,.work-card--3 .work-card__visual { min-height:470px; }
  .review-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .review-card--3 { grid-column:1 / -1; width:min(355px,100%); justify-self:center; }
  .process-map { border:0; padding:0; background:transparent; }
  .process-step { width:100%; padding:22px 18px 22px 74px; border-radius:16px; margin-bottom:12px; }
  .process-step__node { top:28px; left:17px; margin:0; }
  .stack-group { min-height:auto; }
}
@media (max-width: 580px) {
  .hero-name::after { bottom:-.15em; }
  .work-card__visual,.work-card--2 .work-card__visual,.work-card--3 .work-card__visual { min-height:365px; }
  .work-card__browser { left:3%; width:92%; top:11%; border-radius:13px; }
  .work-card__phone { width:25%; right:1.5%; bottom:3%; }
  .review-cards { grid-template-columns:1fr; gap:20px; padding-inline:2px; }
  .review-card,.review-card--2,.review-card--3 { grid-column:auto; width:100%; max-width:365px; justify-self:center; transform:rotate(0) !important; animation:none; }
  .contact-hub__channels--large .contact-channel { grid-template-columns:52px minmax(0,1fr) 22px; min-height:88px; padding:13px 11px; }
  .contact-channel__icon { width:43px; height:43px; }
  .contact-channel__copy strong { font-size:.9rem; }
}

/* V5 contact visibility refinement */
.contact-hub--simple { justify-content:flex-start; padding-top:clamp(38px,4vw,54px); }
.contact-hub--simple h3 { max-width:360px; margin:26px 0 11px; font-size:clamp(2.25rem,3.5vw,3.45rem); }
.contact-hub__channels--large { margin-top:25px; }
.process-step:not(.is-active) { opacity:.58; }

/* ======================================================================
   V6 — final requested refinements only
   Single-image work, crisp review slider, clearer contact, compact form
   ====================================================================== */

/* Work: one complete case-study image per project */
.work-card__visual--single {
  min-height: 520px !important;
  padding: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.work-card__visual--single::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 26px;
  background: radial-gradient(circle at 48% 42%, color-mix(in srgb, var(--project-accent) 13%, transparent), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}
.work-card__single-image {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  max-height: 650px;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border: 1px solid rgba(151, 181, 241, .2);
  border-radius: 20px;
  background: #050b19;
  box-shadow: 0 34px 90px rgba(0,0,0,.48), 0 0 52px color-mix(in srgb, var(--project-accent) 10%, transparent);
  transform: perspective(1200px) rotateX(1.2deg) rotateY(-1.2deg) scale(.985);
  transition: transform .65s var(--ease), box-shadow .65s var(--ease), border-color .4s;
}
.work-card:nth-child(even) .work-card__single-image { transform: perspective(1200px) rotateX(1deg) rotateY(1.2deg) scale(.985); }
.work-card:hover .work-card__single-image,
.work-card:nth-child(even):hover .work-card__single-image {
  transform: perspective(1200px) rotateX(0) rotateY(0) translateY(-7px) scale(1.008);
  border-color: color-mix(in srgb, var(--project-accent) 48%, rgba(255,255,255,.22));
  box-shadow: 0 44px 120px rgba(0,0,0,.6), 0 0 70px color-mix(in srgb, var(--project-accent) 14%, transparent);
}
.work-card__visual--single .work-card__number { z-index: 4; opacity: .7; }

/* Services: keep the accepted accordion layout, upgrade the generated images */
.service-art { min-height: 470px; }
.service-art__frame { inset: 15px; }
.service-art__frame img {
  height: calc(100% - 36px);
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: saturate(1.04) contrast(1.02);
}
.service-row.is-active .service-art__frame::after {
  content: '';
  position: absolute;
  inset: 36px 0 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.09) 49%, transparent 64%);
  transform: translateX(-125%);
  animation: serviceImageSweep 5.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes serviceImageSweep { 0%, 62% { transform: translateX(-125%); } 82%, 100% { transform: translateX(125%); } }

/* Reviews: compact, crisp, text-based cards in a proper slider */
.review-slider {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 16px;
  align-items: center;
}
.review-slider__viewport {
  overflow-x: auto;
  overflow-y: visible;
  padding: 26px 9px 30px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.review-slider__viewport::-webkit-scrollbar { display: none; }
.review-cards {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  perspective: 1200px;
  width: max-content;
}
.review-card,
.review-card--1,
.review-card--2,
.review-card--3 {
  position: relative;
  flex: 0 0 clamp(285px, calc((min(1280px, 86vw) - 86px) / 3), 370px);
  width: clamp(285px, calc((min(1280px, 86vw) - 86px) / 3), 370px);
  min-height: 292px !important;
  display: flex !important;
  flex-direction: column;
  padding: 22px 22px 18px !important;
  overflow: hidden;
  border: 1px solid rgba(8, 18, 38, .12) !important;
  border-radius: 17px !important;
  color: #172033;
  background: linear-gradient(150deg, #ffffff, #f1f5fb) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.27) !important;
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transform: rotate(-1.35deg) translateY(6px) !important;
  animation: reviewCardFloatOne 6.2s ease-in-out infinite !important;
  transition: transform .38s var(--ease), box-shadow .38s, border-color .38s !important;
}
.review-card--2 {
  transform: rotate(1.15deg) translateY(-5px) !important;
  animation: reviewCardFloatTwo 6.8s ease-in-out infinite !important;
}
.review-card--3 {
  transform: rotate(-.65deg) translateY(8px) !important;
  animation: reviewCardFloatThree 6.5s ease-in-out infinite !important;
}
.review-card:hover,
.review-card--2:hover,
.review-card--3:hover {
  transform: translateY(-8px) rotate(0) scale(1.018) !important;
  border-color: rgba(31, 146, 255, .26) !important;
  box-shadow: 0 34px 78px rgba(0,0,0,.34), 0 0 36px rgba(69, 132, 255, .12) !important;
  animation-play-state: paused !important;
}
.review-card__accent {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22d3ee);
}
.review-card__person { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; margin-top: 4px; }
.review-card__avatar {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #1d2940, #080d18);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 6px 18px rgba(16,28,50,.22);
  font: 700 .82rem Space Grotesk, sans-serif;
}
.review-card__person > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.review-card__person strong { overflow: hidden; color: #141b2b; font: 700 .93rem Space Grotesk, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.review-card__person small { color: #788198; font-size: .68rem; }
.review-card__person b { color: #14a800; font: 700 .7rem Space Grotesk, sans-serif; }
.review-card__stars { margin-top: 18px; color: #ffb800; font-size: .83rem; letter-spacing: .09em; }
.review-card blockquote { flex: 1; margin: 12px 0 17px; color: #3f495d; font-size: .78rem; line-height: 1.68; }
.review-card__footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 15px 0 0 !important; border-top: 1px solid #dbe2ed !important; }
.review-card__footer span { color: #47536a; font: 700 .55rem Space Mono, monospace; text-transform: uppercase; }
.review-card__footer time { color: #8b94a7; font-size: .61rem; }
.review-card__open { margin-top: 13px; color: #305ec9; font: normal 700 .58rem Space Mono, monospace; }
.review-slider__nav {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(109, 143, 210, .25);
  border-radius: 50%;
  color: #dce8ff;
  background: linear-gradient(145deg, rgba(16,31,64,.95), rgba(5,13,31,.95));
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  cursor: pointer;
  transition: transform .3s, border-color .3s, box-shadow .3s, color .3s;
}
.review-slider__nav:hover { transform: scale(1.08); color: #69eaff; border-color: rgba(64,222,255,.54); box-shadow: 0 0 26px rgba(57,211,255,.12); }
.review-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 5px; }
.review-slider__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(126,150,198,.35); cursor: pointer; transition: width .3s, background .3s; }
.review-slider__dots button.is-active { width: 28px; background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
@keyframes reviewCardFloatOne { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes reviewCardFloatTwo { 0%,100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes reviewCardFloatThree { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* Contact: make all three channels clearly highlighted */
.contact-hub--simple {
  border-color: rgba(103, 151, 255, .28) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(139,92,246,.18), transparent 19rem),
    radial-gradient(circle at 92% 82%, rgba(34,211,238,.11), transparent 19rem),
    linear-gradient(155deg, rgba(10,23,51,.99), rgba(3,10,25,.99)) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
}
.contact-hub__channels--large { gap: 13px !important; margin-top: 28px !important; }
.contact-hub__channels--large .contact-channel {
  position: relative;
  isolation: isolate;
  grid-template-columns: 58px 1fr auto !important;
  min-height: 82px;
  padding: 13px 16px !important;
  overflow: hidden;
  border: 1px solid rgba(111, 147, 220, .24) !important;
  border-radius: 17px !important;
  background: linear-gradient(120deg, rgba(18,38,78,.92), rgba(7,18,41,.94)) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.17);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s !important;
}
.contact-hub__channels--large .contact-channel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: linear-gradient(110deg, rgba(139,92,246,.15), rgba(34,211,238,.08));
  transition: opacity .35s;
}
.contact-hub__channels--large .contact-channel:hover {
  transform: translateX(8px) scale(1.012) !important;
  border-color: rgba(74, 220, 255, .5) !important;
  box-shadow: 0 22px 46px rgba(0,0,0,.29), 0 0 35px rgba(56,217,255,.08) !important;
}
.contact-hub__channels--large .contact-channel:hover::before { opacity: 1; }
.contact-hub__channels--large .contact-channel__icon {
  width: 52px;
  height: 52px;
  border-color: rgba(126,170,255,.29);
  background: linear-gradient(145deg, rgba(139,92,246,.28), rgba(34,211,238,.11));
}
.contact-hub__channels--large .contact-channel--whatsapp .contact-channel__icon { background: linear-gradient(145deg, rgba(37,211,102,.28), rgba(34,211,238,.09)); }
.contact-hub__channels--large .contact-channel--upwork .contact-channel__icon { background: linear-gradient(145deg, rgba(20,168,0,.28), rgba(139,92,246,.1)); }
.contact-hub__channels--large .contact-channel__copy small { color: #8fa3cc; font-size: .54rem; }
.contact-hub__channels--large .contact-channel__copy strong {
  color: #fff;
  font-size: clamp(1.02rem, 1.45vw, 1.3rem);
  text-shadow: 0 0 20px rgba(103,160,255,.12);
}
.contact-hub__channels--large .contact-channel > i { font-size: 1.2rem; }

/* Compact form height without changing its fields or layout */
.contact-form { padding: clamp(24px, 3vw, 36px) !important; }
.contact-form__header { padding-bottom: 18px !important; margin-bottom: 20px !important; }
.contact-form__header--clean h3 { font-size: clamp(1.7rem, 2.45vw, 2.5rem) !important; }
.form-grid { column-gap: 18px !important; row-gap: 14px !important; }
.field { gap: 6px !important; }
.field input, .field select, .field textarea { padding: 11px 13px !important; }
.field textarea { min-height: 108px !important; resize: vertical; }
.service-picker { gap: 7px !important; }
.service-picker button { min-height: 38px !important; padding: 8px 10px !important; }
.consent { margin-top: 17px !important; }
.btn--submit { min-height: 52px !important; margin-top: 17px !important; }

/* Slightly richer process and stack motion, same layout */
.process-map::before {
  content: '';
  position: absolute;
  inset: 10% 5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,116,255,.08), transparent 68%);
  filter: blur(28px);
  animation: processAtmosphere 8s ease-in-out infinite;
  pointer-events: none;
}
.process-step.is-active .process-step__node { animation: processNodePulse 2.8s ease-in-out infinite; }
.process-step.is-active { transform: translateY(-5px) !important; }
.process-orb { filter: drop-shadow(0 0 10px #22d3ee) drop-shadow(0 0 22px #8b5cf6); }
@keyframes processAtmosphere { 50% { transform: scale(1.08) translateY(-9px); opacity: .72; } }
@keyframes processNodePulse { 50% { box-shadow: 0 0 0 12px rgba(34,211,238,.035), 0 0 30px rgba(34,211,238,.3); transform: scale(1.07); } }
.stack-board { box-shadow: 0 38px 100px rgba(0,0,0,.3), 0 0 65px rgba(72,104,255,.045); }
.stack-group { position: relative; overflow: hidden; }
.stack-group::after {
  content: '';
  position: absolute;
  inset: auto -30% -55% 35%;
  height: 62%;
  border-radius: 50%;
  background: rgba(72,126,255,.1);
  filter: blur(38px);
  opacity: 0;
  transition: opacity .4s, transform .5s;
}
.stack-group:hover::after { opacity: 1; transform: translateY(-20px); }
.stack-tool { animation: stackToolBreathe 5.5s ease-in-out infinite; animation-delay: calc(var(--stack-delay, 0) * 80ms); }
.stack-tool:nth-child(2n) { animation-delay: .7s; }
@keyframes stackToolBreathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -2px; } }

@media (max-width: 980px) {
  .work-card__visual--single { min-height: 440px !important; }
  .review-slider { grid-template-columns: 44px minmax(0,1fr) 44px; gap: 10px; }
  .review-slider__nav { width: 44px; height: 44px; }
  .review-card, .review-card--1, .review-card--2, .review-card--3 { flex-basis: min(330px, 76vw); width: min(330px, 76vw); }
}
@media (max-width: 680px) {
  .work-card__visual--single { min-height: 200px !important; padding: 13px; }
  .work-card__single-image { border-radius: 13px; }
  .service-art { min-height: 320px; }
  .review-slider { grid-template-columns: 1fr; }
  .review-slider__nav { display: none; }
  .review-slider__viewport { padding-inline: 4px; }
  .review-card, .review-card--1, .review-card--2, .review-card--3 { flex-basis: calc(100vw - 54px); width: calc(100vw - 54px); min-height: 280px !important; }
  .contact-hub__channels--large .contact-channel { grid-template-columns: 52px minmax(0,1fr) auto !important; min-height: 76px; }
  .form-grid { grid-template-columns: 1fr !important; }
  .field--wide { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .review-card, .review-card--1, .review-card--2, .review-card--3,
  .process-step.is-active .process-step__node, .process-map::before, .stack-tool { animation: none !important; }
}

/* ======================================================================
   V7 — visibility polish + true review lightbox slider
   ====================================================================== */

/* Stack: make each marked capability cluster and every tool clearly visible */
.stack-group {
  opacity: .82;
  background: linear-gradient(180deg, rgba(16, 36, 76, .38), rgba(4, 14, 34, .2));
}
.stack-group.is-active { opacity: 1; }
.stack-group:hover {
  background: linear-gradient(180deg, rgba(32, 60, 116, .48), rgba(8, 23, 52, .3));
  box-shadow: inset 0 0 0 1px rgba(74, 219, 255, .08);
}
.stack-group__heading h3 { color: #f5f8ff; text-shadow: 0 0 24px rgba(98, 147, 255, .1); }
.stack-group__heading p { color: #9baccb; }
.stack-group__tools {
  padding: 13px;
  border: 1px solid rgba(111, 155, 231, .18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(20, 45, 91, .6), rgba(7, 19, 43, .72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.14);
}
.stack-group__tools .stack-tool {
  min-height: 49px;
  border-color: rgba(124, 164, 235, .2);
  background: linear-gradient(145deg, rgba(20, 42, 82, .96), rgba(9, 23, 51, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.stack-tool i {
  color: #e4eaff;
  background: linear-gradient(135deg, rgba(139,92,246,.42), rgba(34,211,238,.2));
  box-shadow: 0 0 20px rgba(106, 126, 255, .12);
}
.stack-tool b {
  color: #d8e2f6;
  font-size: .62rem;
}
.stack-tool:hover b { color: #fff; }

/* Contact: turn the small EMAIL / WHATSAPP / UPWORK labels into strong badges */
.contact-channel__copy small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 24px;
  padding: 5px 10px 4px;
  border: 1px solid rgba(113, 178, 255, .35);
  border-radius: 999px;
  color: #ecf5ff;
  background: linear-gradient(135deg, rgba(68, 98, 220, .52), rgba(35, 196, 230, .2));
  box-shadow: 0 0 22px rgba(54, 178, 255, .09), inset 0 1px 0 rgba(255,255,255,.1);
  font-size: .55rem;
  line-height: 1;
}
.contact-channel--whatsapp .contact-channel__copy small {
  border-color: rgba(41, 220, 135, .4);
  background: linear-gradient(135deg, rgba(22, 152, 92, .56), rgba(34, 211, 153, .18));
  box-shadow: 0 0 22px rgba(34, 211, 153, .09), inset 0 1px 0 rgba(255,255,255,.1);
}
.contact-channel--upwork .contact-channel__copy small {
  border-color: rgba(53, 211, 68, .4);
  background: linear-gradient(135deg, rgba(20, 150, 54, .56), rgba(20, 168, 0, .18));
  box-shadow: 0 0 22px rgba(20, 168, 0, .09), inset 0 1px 0 rgba(255,255,255,.1);
}
.contact-channel__copy strong {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(92, 199, 255, .12);
}

/* Real popup slider: every review is a physical slide, arrows translate the track */
.lightbox__slide {
  width: min(930px, 100%);
  max-width: 930px;
  max-height: calc(100vh - 250px);
  overflow: hidden !important;
  touch-action: pan-y;
  background: transparent;
}
.lightbox__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,0);
  transition: transform .58s cubic-bezier(.22,.8,.2,1);
  will-change: transform;
}
.lightbox__item {
  flex: 0 0 100%;
  width: 100%;
  max-height: calc(100vh - 250px);
  margin: 0;
  overflow: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  scrollbar-color: #8795ac #edf1f7;
  scrollbar-width: thin;
}
.lightbox__item img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: contain;
  object-position: top center;
}
.lightbox__item:not(.is-active) { pointer-events: none; }
.lightbox__nav {
  border-color: rgba(91, 185, 255, .25);
  background: linear-gradient(145deg, rgba(16, 33, 68, .96), rgba(3, 10, 25, .96));
  color: #fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.32), 0 0 22px rgba(56,217,255,.06);
}
.lightbox__nav:hover {
  border-color: rgba(56,217,255,.65);
  color: var(--cyan);
  box-shadow: 0 16px 42px rgba(0,0,0,.4), 0 0 28px rgba(56,217,255,.13);
}
.lightbox-thumb {
  opacity: .6;
  transition: opacity .25s, transform .25s, border-color .25s;
}
.lightbox-thumb:hover { opacity: .9; transform: translateY(-2px); }
.lightbox-thumb.is-active { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 18px rgba(34,211,238,.14); }

@media (max-width: 580px) {
  .stack-group__tools { padding: 10px; }
  .contact-channel__copy small { min-height: 22px; padding: 4px 8px; font-size: .5rem; }
  .lightbox__slide, .lightbox__item { max-height: calc(100vh - 235px); }
}

/* ======================================================================
   V8 — readable capability labels, redesigned contact hub, active nav
   ====================================================================== */

/* Strong, persistent active navigation indicator */
.desktop-nav a {
  padding: 12px 2px 10px;
  font-weight: 600;
  transition: color .25s, text-shadow .25s;
}
.desktop-nav a::after {
  bottom: 2px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%);
  box-shadow: 0 0 14px rgba(34,211,238,.5);
}
.desktop-nav a.is-active {
  color: #fff;
  text-shadow: 0 0 18px rgba(91,205,255,.22);
}
.desktop-nav a.is-active::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #65e8ff;
  box-shadow: 0 0 12px #22d3ee;
}
.mobile-menu nav a.is-active { color: #72e8ff; }
.mobile-menu nav a.is-active::after { content: 'ACTIVE'; margin-left: auto; color: #8b5cf6; font: 700 .55rem Space Mono, monospace; letter-spacing: .12em; }

/* Service and work capability tags: larger, sharper and fully readable */
.service-row__keywords,
.work-card__tags { gap: 10px; }
.service-row__keywords span,
.work-card__tags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border-color: rgba(119,157,228,.3);
  color: #e0e8f8;
  background: linear-gradient(145deg, rgba(25,47,91,.86), rgba(9,24,52,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
  font: 600 .66rem/1.15 Space Grotesk, sans-serif;
  letter-spacing: .01em;
  white-space: normal;
}
.service-row__keywords span:hover,
.work-card__tags span:hover {
  color: #fff;
  border-color: rgba(57,218,255,.55);
  box-shadow: 0 0 22px rgba(34,211,238,.09);
  transform: translateY(-2px);
}

/* Stack: remove truncation and give every tool a readable full-width row */
.stack-group { min-height: 435px; padding-inline: 20px; }
.stack-group__heading p { min-height: 55px; font-size: .8rem; line-height: 1.55; }
.stack-group__tools {
  grid-template-columns: 1fr !important;
  gap: 10px;
  padding: 13px;
}
.stack-group__tools .stack-tool {
  min-height: 56px;
  padding: 10px 13px;
  gap: 12px;
}
.stack-tool i {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: .49rem;
}
.stack-tool b {
  overflow: visible;
  color: #f0f4ff;
  font-size: .76rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

/* Contact — completely refreshed left-side composition */
.contact__heading--clean { margin-bottom: 42px; }
.contact__heading--clean h2 { max-width: 780px; }
.contact__experience {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: 24px;
  align-items: stretch;
}
.contact-hub--redesign {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.5vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(91,145,239,.3);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(139,92,246,.2), transparent 23rem),
    radial-gradient(circle at 100% 100%, rgba(34,211,238,.12), transparent 22rem),
    linear-gradient(155deg, rgba(12,29,62,.98), rgba(3,11,27,.99));
  box-shadow: 0 35px 95px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.045);
}
.contact-hub--redesign::after {
  content: '';
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(34,211,238,.12);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(34,211,238,.06);
  pointer-events: none;
}
.contact-hub__statusline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(125,161,224,.16);
  color: #91a3c6;
  font: 700 .57rem Space Mono, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.contact-hub__statusline span { display: inline-flex; align-items: center; gap: 8px; }
.contact-hub__statusline strong { color: #64e7ff; font-weight: 700; }
.contact-hub--redesign .contact-hub__eyebrow {
  margin: 34px 0 11px;
  color: #6eeaff;
  font: 700 .62rem Space Mono, monospace;
  letter-spacing: .16em;
}
.contact-hub--redesign h3 {
  max-width: 520px;
  margin: 0;
  color: #fff;
  font: 600 clamp(2.15rem, 3.1vw, 3.45rem)/1 Space Grotesk, sans-serif;
  letter-spacing: -.052em;
}
.contact-hub--redesign .contact-hub__intro {
  max-width: 570px;
  margin: 18px 0 0;
  color: #a9b7d2;
  font-size: .95rem;
  line-height: 1.7;
}
.contact-hub--redesign .contact-hub__channels--large {
  display: grid;
  gap: 12px !important;
  margin-top: 30px !important;
}
.contact-hub--redesign .contact-channel {
  grid-template-columns: 58px minmax(0,1fr) 28px !important;
  min-height: 100px;
  padding: 15px 17px !important;
  border: 1px solid rgba(118,156,226,.26) !important;
  border-radius: 19px !important;
  background: linear-gradient(125deg, rgba(20,44,88,.95), rgba(7,20,46,.96)) !important;
}
.contact-hub--redesign .contact-channel:hover {
  transform: translateX(7px) translateY(-2px) !important;
  border-color: rgba(63,222,255,.58) !important;
}
.contact-hub--redesign .contact-channel__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.contact-hub--redesign .contact-channel__copy {
  align-content: center;
  gap: 5px;
}
.contact-hub--redesign .contact-channel__copy small {
  min-height: 23px;
  padding: 4px 9px;
  font-size: .5rem;
}
.contact-hub--redesign .contact-channel__copy strong {
  overflow: visible;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
}
.contact-hub--redesign .contact-channel__copy > span {
  color: #8294b6;
  font-size: .68rem;
  line-height: 1.35;
}
.contact-hub--redesign .contact-channel > i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(77,210,255,.24);
  border-radius: 50%;
  color: #69e9ff;
  background: rgba(34,211,238,.05);
}
.contact-form { height: 100%; }

@media (max-width: 1100px) {
  .stack-groups { grid-template-columns: repeat(2,1fr); }
  .stack-group:nth-child(2) { border-right: 0; }
  .stack-group:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .contact__experience { grid-template-columns: 1fr; }
  .contact-hub--redesign .contact-hub__channels--large { grid-template-columns: repeat(3,1fr); }
  .contact-hub--redesign .contact-channel { grid-template-columns: 48px minmax(0,1fr) 24px !important; min-height: 130px; align-content: start; }
  .contact-hub--redesign .contact-channel__icon { width: 46px; height: 46px; }
}
@media (max-width: 760px) {
  .stack-groups { grid-template-columns: 1fr; }
  .stack-group { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .contact-hub__statusline { align-items: flex-start; flex-direction: column; }
  .contact-hub--redesign .contact-hub__channels--large { grid-template-columns: 1fr; }
  .contact-hub--redesign .contact-channel { min-height: 94px; grid-template-columns: 52px minmax(0,1fr) 26px !important; }
}

/* V9 — original-color contact brand icons and simplified card copy */
.contact-hub--redesign .contact-channel {
  min-height: 88px;
}
.contact-hub--redesign .contact-channel__icon {
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
}
.contact-hub--redesign .contact-channel__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-hub--redesign .contact-channel--email .contact-channel__icon {
  padding: 10px;
  background: #ffffff !important;
}
.contact-hub--redesign .contact-channel__copy {
  gap: 7px;
}
.contact-hub--redesign .contact-channel__copy > span {
  display: none;
}
@media (max-width: 1100px) {
  .contact-hub--redesign .contact-channel { min-height: 104px; }
}
@media (max-width: 760px) {
  .contact-hub--redesign .contact-channel { min-height: 84px; }
}

/* =========================================================
   V10 — final visibility, stable image motion and service polish
   ========================================================= */

/* Keep all image compositions anchored on hover/parallax. */
.profile-frame { will-change: transform; }
.service-row:hover .service-art__frame {
  transform: perspective(1100px) rotateY(-2deg) !important;
}
.work-card:hover .work-card__browser {
  transform: perspective(1100px) rotateY(-3.2deg) rotateX(1.2deg) !important;
  box-shadow: 0 40px 105px rgba(0,0,0,.56) !important;
}
.work-card:hover .work-card__phone {
  transform: rotate(2.2deg) !important;
}

/* Service copy — shorter content in a clearer premium information system. */
.service-row__body {
  grid-template-columns: minmax(330px,.72fr) minmax(0,1.28fr);
  gap: clamp(30px,4vw,54px);
}
.service-row.is-active .service-row__body {
  max-height: 860px;
  padding: 20px 0 46px 68px;
}
.service-row__content {
  position: relative;
  align-self: center;
  padding: 25px;
  border: 1px solid rgba(112,151,224,.2);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(18,39,80,.66), rgba(5,17,39,.84));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 24px 60px rgba(0,0,0,.18);
}
.service-row__content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(var(--service-accent), rgba(34,211,238,.28));
  box-shadow: 0 0 18px color-mix(in srgb, var(--service-accent) 34%, transparent);
}
.service-row__content > p {
  max-width: 620px;
  color: #c4cee1 !important;
  font-size: .94rem !important;
  line-height: 1.7 !important;
}
.service-row__content ul {
  counter-reset: service-point;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin: 24px 0 22px;
}
.service-row__content li {
  counter-increment: service-point;
  min-height: 74px;
  align-items: flex-start;
  padding: 15px 14px 14px 53px;
  border-color: rgba(112,151,224,.24);
  border-radius: 15px;
  color: #edf2ff;
  background: linear-gradient(145deg, rgba(28,52,98,.7), rgba(7,21,48,.9));
  font-size: .75rem;
  line-height: 1.48;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.service-row__content li::before {
  content: counter(service-point, decimal-leading-zero);
  left: 14px;
  top: 15px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--service-accent) 44%, transparent);
  border-radius: 9px;
  color: var(--service-accent);
  background: color-mix(in srgb, var(--service-accent) 10%, transparent);
  font: 700 .48rem Space Mono, monospace;
}
.service-row__content li::after {
  content: '';
  position: absolute;
  left: 53px;
  right: 14px;
  bottom: 0;
  height: 1px;
  transform: scaleX(.22);
  transform-origin: left;
  background: linear-gradient(90deg, var(--service-accent), transparent);
  transition: transform .35s var(--ease);
}
.service-row__content li:hover::after { transform: scaleX(1); }
.service-row__keywords span {
  min-height: 35px;
  padding: 9px 13px;
  color: #ecf2ff;
  border-color: rgba(114,155,231,.32);
  background: rgba(8,24,54,.82);
  font-size: .67rem;
}
.service-art { min-height: 500px; }
.service-art__frame { transform: perspective(1100px) rotateY(-2deg); }
.service-art__bar {
    display: none;
}
/* Stack board — bring the tools into view sooner and improve hierarchy. */
.stack-board__header {
  padding: 15px 20px;
  color: #9aabca;
  background: rgba(6,17,39,.68);
  font-size: .61rem;
}
.stack-board__header strong { color: #65e9ff; }
.stack-board__signal { height: 34px; }
.stack-group {
  min-height: 365px !important;
  padding: 22px 20px 24px !important;
}
.stack-group__heading h3 { margin-top: 23px !important; }
.stack-group__heading p {
  min-height: 44px !important;
  margin-bottom: 15px !important;
}
.stack-group__tools { padding: 10px !important; gap: 8px !important; }
.stack-group__tools .stack-tool { min-height: 49px !important; padding: 8px 11px !important; }

/* Footer — compact, high-contrast and visibly separated from the page. */
.site-footer {
  padding: 28px 0 24px;
  border-top: 1px solid rgba(98,148,232,.2);
  background:
    radial-gradient(circle at 15% 0, rgba(139,92,246,.12), transparent 28rem),
    radial-gradient(circle at 85% 100%, rgba(34,211,238,.08), transparent 26rem),
    #020715;
}
.site-footer__inner {
  grid-template-columns: minmax(0,1.2fr) minmax(150px,.62fr) minmax(210px,.78fr) !important;
  gap: clamp(28px,4vw,58px) !important;
  padding: clamp(28px,3.6vw,46px) !important;
  border: 1px solid rgba(105,151,231,.24);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(13,31,66,.9), rgba(3,12,29,.96));
  box-shadow: 0 30px 90px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035);
}
.site-footer__brand,
.site-footer__nav,
.site-footer__contact,
.site-footer__bottom {
  opacity: 1 !important;
  visibility: visible !important;
}
.site-footer__brand .wordmark--footer {
  min-height: 48px;
  padding: 0;
}
.site-footer__brand .wordmark__text {
  filter: drop-shadow(0 0 16px rgba(82,157,255,.5));
}
.site-footer__brand .wordmark__text b { font-size: 1.2rem; }
.site-footer__brand .wordmark__text em { font-size: 1rem; }
.site-footer__brand p {
  max-width: 410px;
  margin-top: 18px;
  color: #a9b7d1;
  font-size: .86rem;
  line-height: 1.65;
}
.site-footer__nav > span,
.site-footer__contact > span {
  margin-bottom: 16px;
  color: #69eaff;
  font-size: .61rem;
}
.site-footer__nav nav,
.site-footer__contact { gap: 12px; }
.site-footer__nav a,
.site-footer__contact a {
  color: #dce5f7;
  font-size: .86rem;
}
.site-footer__nav a:hover,
.site-footer__contact a:hover { color: #6ceaff; }
.site-footer__bottom {
  align-items: center;
  padding: 20px 22px 0;
  margin-top: 5px;
  color: #94a4c2;
  font-size: .62rem;
}
.site-footer__bottom a { color: #d9e5fb; }

@media (max-width: 1100px) {
  .service-row__body { grid-template-columns: 1fr; }
  .service-row.is-active .service-row__body { padding-left: 68px; max-height: 1250px; }
  .service-row__content { max-width: 760px; }
  .site-footer__inner { grid-template-columns: 1fr 1fr !important; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .service-row.is-active .service-row__body { padding-left: 0; }
  .service-row__content ul { grid-template-columns: 1fr; }
  .service-row__content { padding: 22px 18px; }
  .stack-group { min-height: auto !important; }
  .site-footer__inner { grid-template-columns: 1fr !important; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bottom { grid-column: auto; align-items: flex-start; flex-direction: column; padding-inline: 0; }
}

/* ============================================================
   V12 — premium footer identity and high-contrast footer metadata
   ============================================================ */
.site-footer__brand .footer-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: min(100%, 310px);
  padding: 14px 18px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(112, 158, 255, .36);
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .08) 58%, rgba(4, 12, 29, .82)),
    rgba(8, 21, 48, .9);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 0 1px rgba(34, 211, 238, .025);
  isolation: isolate;
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.site-footer__brand .footer-logo::before {
  content: '';
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 45%;
  z-index: -1;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  animation: footerLogoSweep 5.4s ease-in-out infinite;
}
.site-footer__brand .footer-logo:hover {
  transform: translateY(-3px);
  border-color: rgba(80, 230, 255, .72);
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .34),
    0 0 28px rgba(34, 211, 238, .12),
    0 0 42px rgba(139, 92, 246, .12),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}
.footer-logo__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(111, 226, 255, .56);
  border-radius: 16px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.2), transparent 28%),
    linear-gradient(145deg, rgba(139,92,246,.78), rgba(33,110,229,.54) 55%, rgba(34,211,238,.58));
  box-shadow:
    0 0 24px rgba(139, 92, 246, .24),
    inset 0 1px 0 rgba(255,255,255,.22);
  transform: rotate(-3deg);
}
.footer-logo__mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
}
.footer-logo__mark i,
.footer-logo__mark b {
  position: absolute;
  font: 800 1.38rem/1 Space Grotesk, sans-serif;
  font-style: normal;
  letter-spacing: -.08em;
  text-shadow: 0 0 14px rgba(255,255,255,.38);
}
.footer-logo__mark i { left: 14px; top: 16px; color: #fff; }
.footer-logo__mark b { right: 12px; bottom: 13px; color: #6ef0ff; }
.footer-logo__copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.footer-logo__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.footer-logo__name strong,
.footer-logo__name em {
  font-style: normal;
  line-height: 1;
}
.footer-logo__name strong {
  color: #fff;
  font: 800 clamp(1rem, 1.35vw, 1.22rem)/1 Space Grotesk, sans-serif;
  letter-spacing: .13em;
  text-shadow: 0 0 18px rgba(139,92,246,.35);
}
.footer-logo__name em {
  color: #67eaff;
  font: 700 clamp(.88rem, 1.1vw, 1.02rem)/1 Space Grotesk, sans-serif;
  letter-spacing: .18em;
  text-shadow: 0 0 16px rgba(34,211,238,.46);
}
.footer-logo__copy small {
  color: #93a8ca;
  font: 600 .54rem/1.2 Space Mono, monospace;
  letter-spacing: .12em;
  white-space: nowrap;
}
.footer-logo__flare {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6deaff;
  box-shadow: 0 0 10px #6deaff, 0 0 22px rgba(139,92,246,.65);
  animation: footerLogoPulse 2.2s ease-in-out infinite;
}
@keyframes footerLogoSweep {
  0%, 58% { left: -45%; opacity: 0; }
  66% { opacity: 1; }
  84%, 100% { left: 125%; opacity: 0; }
}
@keyframes footerLogoPulse {
  50% { transform: scale(1.35); opacity: .62; }
}

.site-footer__bottom {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  padding: 22px 0 0 !important;
  margin-top: 12px !important;
  border-top: 1px solid rgba(112, 154, 228, .24) !important;
  font: inherit !important;
  letter-spacing: normal !important;
}
.site-footer__bottom .footer-meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(96, 140, 218, .28);
  border-radius: 14px;
  color: #e9f0ff;
  background: linear-gradient(145deg, rgba(15, 35, 72, .82), rgba(5, 16, 38, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .28s var(--ease), border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.site-footer__bottom .footer-meta::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  transform: scaleX(.28);
  transform-origin: center;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #8b5cf6, #38d9ff, transparent);
  opacity: .7;
  transition: transform .3s ease, opacity .3s ease;
}
.site-footer__bottom .footer-meta:hover {
  transform: translateY(-2px);
  border-color: rgba(89, 223, 255, .55);
  background: linear-gradient(145deg, rgba(25, 50, 93, .9), rgba(7, 20, 47, .96));
  box-shadow: 0 12px 26px rgba(0,0,0,.22), 0 0 24px rgba(34,211,238,.07);
}
.site-footer__bottom .footer-meta:hover::after { transform: scaleX(1); opacity: 1; }
.site-footer__bottom .footer-meta > i {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(103, 234, 255, .28);
  border-radius: 9px;
  color: #71eaff;
  background: rgba(34, 211, 238, .08);
  font: 700 .8rem/1 Space Grotesk, sans-serif;
  font-style: normal;
}
.site-footer__bottom .footer-meta b {
  color: #f5f8ff;
  font: 700 .68rem/1.15 Space Grotesk, sans-serif;
  letter-spacing: .035em;
}
.site-footer__bottom .footer-meta small {
  color: #a9b8d4;
  font: 500 .57rem/1.2 Space Mono, monospace;
  white-space: nowrap;
}
.site-footer__bottom .footer-meta--timezone { flex-wrap: wrap; column-gap: 9px; row-gap: 2px; }
.site-footer__bottom .footer-meta--top {
  color: #fff;
  background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(34,211,238,.09) 65%, rgba(6,18,42,.94));
}
.site-footer__bottom .footer-meta--top i {
  border-color: rgba(167,139,250,.36);
  color: #d8ccff;
  background: rgba(139,92,246,.12);
}

@media (max-width: 820px) {
  .site-footer__bottom { grid-template-columns: 1fr !important; }
  .site-footer__bottom .footer-meta { justify-content: flex-start; }
  .site-footer__brand .footer-logo { min-width: 0; width: 100%; }
}
@media (max-width: 430px) {
  .footer-logo__mark { flex-basis: 52px; width: 52px; height: 52px; }
  .footer-logo__name strong { font-size: .92rem; }
  .footer-logo__name em { font-size: .8rem; }
  .footer-logo__copy small { font-size: .47rem; letter-spacing: .08em; }
}