@font-face {
  font-display: swap;
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  src: url("assets/fonts/geist-variable.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  src: url("assets/fonts/geist-mono-variable.woff2") format("woff2");
}

:root {
  --bg: #020713;
  --bg-soft: #050d20;
  --panel: #07142e;
  --panel-light: #0a1c3d;
  --blue: #1959ff;
  --blue-bright: #3c82ff;
  --text: #f6f8ff;
  --muted: #9aa8c7;
  --line: rgba(132, 162, 220, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: "Geist", Arial, Helvetica, sans-serif; font-optical-sizing: auto; margin: 0; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: white; }
main { --mx-1: 0px; --my-1: 0px; --mx-2: 0px; --my-2: 0px; --mx-3: 0px; --my-3: 0px; --pointer-x: 50vw; --pointer-y: 50vh; background: var(--bg); min-height: 100vh; }
.page-cursor-light { background: radial-gradient(circle 380px at var(--pointer-x) var(--pointer-y), rgba(61, 126, 255, .12), rgba(28, 80, 210, .045) 36%, transparent 72%); inset: 0; mix-blend-mode: screen; pointer-events: none; position: fixed; z-index: 45; }
h1, h2, h3, strong { text-wrap: balance; }

.site-header { align-items: center; backdrop-filter: blur(22px); background: rgba(2, 7, 19, .84); border-bottom: 1px solid rgba(121, 153, 214, .14); box-shadow: 0 14px 46px rgba(0,0,0,.16); display: grid; grid-template-columns: 1fr auto 1fr; height: 88px; left: 0; padding: 0 clamp(24px, 5vw, 82px); position: fixed; right: 0; top: 0; z-index: 80; }
.brand { align-items: center; display: flex; height: 48px; justify-content: flex-start; position: relative; width: 50px; }
.brand::after { background: var(--blue-bright); border-radius: 999px; bottom: 1px; box-shadow: 0 0 18px rgba(60,130,255,.8); content: ""; height: 2px; left: 0; position: absolute; width: 20px; }
.brand img { display: block; height: 42px; max-width: 44px; object-fit: contain; width: auto; }
.nav-links { align-items: center; display: flex; gap: clamp(26px, 3vw, 52px); }
.nav-links a { color: #c6d0e5; font-size: 14px; font-weight: 700; position: relative; }
.nav-links a::before { background: var(--blue-bright); border-radius: 50%; content: ""; height: 5px; left: -12px; opacity: 0; position: absolute; top: 7px; transform: scale(0); transition: .25s ease; width: 5px; }
.nav-links a:hover { color: white; }
.nav-links a:hover::before { opacity: 1; transform: scale(1); }
.nav-cta { align-items: center; display: flex; gap: 14px; justify-self: end; }
.nav-cta span { font-size: 14px; font-weight: 800; }
.nav-cta i { background: var(--blue); border-radius: 50%; display: grid; font-size: 18px; font-style: normal; height: 46px; place-items: center; transition: transform .25s ease, background .25s ease; width: 46px; }
.nav-cta:hover i { background: white; color: var(--blue); transform: rotate(45deg); }
.menu-toggle { background: transparent; border: 0; cursor: pointer; display: none; height: 44px; padding: 8px; width: 46px; }
.menu-toggle span { background: white; display: block; height: 2px; margin: 8px 0; width: 100%; }

.hero { align-items: center; background: radial-gradient(circle at 79% 43%, #0b2465 0, #04112d 28%, transparent 56%), var(--bg); display: flex; min-height: max(850px, 100svh); overflow: hidden; padding: 132px clamp(24px, 5vw, 82px) 120px; position: relative; }
.hero::before { background: linear-gradient(90deg, rgba(25,89,255,.07) 1px, transparent 1px), linear-gradient(rgba(25,89,255,.07) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, black 0, transparent 92%); position: absolute; }
.interactive-field { inset: 0; pointer-events: none; position: absolute; }
.cursor-glow { background: radial-gradient(circle 380px at var(--pointer-x) var(--pointer-y), rgba(48, 117, 255, .16), transparent 72%); inset: 0; position: absolute; }
.field-grid { border: 1px solid rgba(83,130,228,.13); border-radius: 50%; height: 720px; position: absolute; right: -150px; top: 80px; width: 720px; }
.field-grid::before, .field-grid::after { border: 1px solid rgba(83,130,228,.12); border-radius: 50%; content: ""; position: absolute; }
.field-grid::before { inset: 11%; }
.field-grid::after { inset: 26%; }
.connection { background: linear-gradient(90deg, transparent, rgba(94,145,255,.42), transparent); height: 1px; position: absolute; transform-origin: left; }
.connection-a { right: 12%; top: 27%; transform: rotate(23deg); width: 430px; }
.connection-b { right: 5%; top: 58%; transform: rotate(-18deg); width: 520px; }
.connection-c { right: 22%; top: 74%; transform: rotate(52deg); width: 300px; }
.connection-dot { animation: signalPulse 2.2s ease-in-out infinite; background: white; border: 6px solid rgba(34,96,255,.24); border-radius: 50%; box-shadow: 0 0 24px #2670ff; height: 18px; position: absolute; width: 18px; }
.dot-a { right: 13%; top: 27%; }
.dot-b { right: 34%; top: 64%; animation-delay: -.8s; }
.dot-c { right: 22%; top: 77%; animation-delay: -1.4s; }
.signal-node { align-items: center; backdrop-filter: blur(14px); background: rgba(7,20,46,.64); border: 1px solid rgba(114,156,238,.25); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.3); display: flex; gap: 10px; padding: 12px 15px; position: absolute; transition: transform .16s ease-out; }
.signal-node svg { fill: none; height: 26px; stroke: #82aaff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 26px; }
.signal-node span { color: #aab9d8; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.node-pen { right: 37%; top: 19%; }
.node-cube { right: 6%; top: 36%; }
.node-layers { right: 12%; top: 79%; }
.node-cursor { right: 5%; top: 68%; }
.mouse-depth-one { transform: translate(var(--mx-1), var(--my-1)); }
.mouse-depth-two { transform: translate(var(--mx-2), var(--my-2)); }
.mouse-depth-three { transform: translate(var(--mx-3), var(--my-3)); }

.hero-content { max-width: 980px; position: relative; width: 66%; z-index: 4; }
.hero-kicker { align-items: center; display: flex; gap: 14px; margin-bottom: 36px; }
.status-dot { animation: statusPulse 2s ease infinite; background: #3a7eff; border-radius: 50%; box-shadow: 0 0 0 7px rgba(58,126,255,.12); height: 9px; width: 9px; }
.hero-kicker p { color: #b5c2db; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.hero h1 { font-size: clamp(76px, 8.65vw, 146px); font-weight: 820; letter-spacing: -.045em; line-height: .84; margin: 0; text-transform: uppercase; }
.hero h1 .hero-accent-line { background: linear-gradient(90deg, #f7f9ff 0%, #417fff 40%, #1150f3 80%); background-clip: text; color: transparent; display: inline-block; letter-spacing: -.018em; -webkit-background-clip: text; }
.hero-lower { align-items: flex-end; display: grid; gap: 46px; grid-template-columns: minmax(260px, 540px) auto; margin-top: 58px; max-width: 880px; }
.hero-lower > p { color: #b3bfd6; font-size: clamp(20px, 1.7vw, 27px); line-height: 1.45; margin: 0; }
.hero-actions { align-items: flex-start; display: flex; flex-direction: column; gap: 24px; }
.primary-button { align-items: center; background: var(--blue); border: 1px solid var(--blue); border-radius: 999px; display: flex; font-size: 15px; font-weight: 900; justify-content: center; padding: 18px 28px; transition: background .25s ease, color .25s ease, transform .25s ease; white-space: nowrap; }
.primary-button:hover { background: white; color: var(--blue); transform: translateY(-3px); }
.text-link { color: #c4cfe3; font-size: 14px; font-weight: 800; margin-left: 22px; }
.text-link span { color: #568bff; font-size: 18px; margin-left: 7px; }
.hero-object { height: min(34vw, 520px); isolation: isolate; position: absolute; right: 2.5%; top: 20%; transition: transform .16s ease-out; width: min(34vw, 520px); z-index: 2; }
.hero-object::before { background: radial-gradient(circle, rgba(46,108,255,.24), transparent 68%); border-radius: 50%; content: ""; filter: blur(18px); inset: 4%; position: absolute; z-index: -1; }
.orb-core { align-items: center; animation: floatOrb 6s ease-in-out infinite; background: radial-gradient(circle at 31% 25%, #9dc1ff 0, #2c70ff 14%, #0b3bb5 39%, #041540 70%, #010510 100%); border: 1px solid rgba(135,178,255,.55); border-radius: 50%; box-shadow: -30px 44px 95px rgba(0,0,0,.55), inset -32px -40px 58px rgba(0,0,0,.45), 0 0 80px rgba(32,92,255,.18); display: flex; height: 56%; justify-content: center; left: 22%; position: absolute; top: 22%; width: 56%; z-index: 4; }
.orb-core::after { border: 1px solid rgba(255,255,255,.36); border-radius: 50%; content: ""; inset: 8%; position: absolute; }
.orb-core img { filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); height: auto; position: relative; width: 39%; z-index: 2; }
.orb-ring { border: 1px solid rgba(116,163,255,.48); border-radius: 50%; left: 50%; position: absolute; top: 50%; z-index: 2; }
.ring-one { animation: orbitA 15s linear infinite; height: 58%; width: 96%; }
.ring-two { animation: orbitB 18s linear infinite; height: 96%; width: 48%; }
.ring-three { animation: orbitC 22s linear infinite reverse; height: 72%; width: 88%; }
.software-orbit { animation: softwareSpin 28s linear infinite; inset: 2%; position: absolute; z-index: 6; }
.software-orbit::before { border: 1px dashed rgba(117,159,244,.24); border-radius: 50%; content: ""; inset: 3%; position: absolute; }
.software-pin { position: absolute; transform: translate(-50%,-50%); }
.software-card { align-items: center; animation: softwareCounterSpin 28s linear infinite; backdrop-filter: blur(16px); background: linear-gradient(145deg, rgba(9,25,57,.96), rgba(2,8,21,.9)); border: 1px solid rgba(132,171,247,.38); border-radius: 16px; box-shadow: 0 16px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08); display: flex; height: clamp(48px, 4vw, 62px); justify-content: center; padding: 8px; width: clamp(48px, 4vw, 62px); }
.software-card img { display: block; height: 100%; object-fit: contain; width: 100%; }
.software-octane { left: 50%; top: 2%; }
.software-photoshop { left: 96%; top: 36%; }
.software-illustrator { left: 79%; top: 92%; }
.software-cinema { left: 21%; top: 92%; }
.software-after { left: 4%; top: 36%; }
.hero-strip { align-items: center; background: rgba(4,12,29,.88); border-top: 1px solid rgba(114,153,225,.17); bottom: 0; display: flex; height: 82px; left: 0; overflow: hidden; position: absolute; right: 0; z-index: 5; }
.hero-strip::before, .hero-strip::after { content: ""; height: 100%; pointer-events: none; position: absolute; top: 0; width: clamp(28px, 6vw, 110px); z-index: 2; }
.hero-strip::before { background: linear-gradient(90deg, #040c1d 4%, transparent); left: 0; }
.hero-strip::after { background: linear-gradient(270deg, #040c1d 4%, transparent); right: 0; }
.hero-strip-track { align-items: center; animation: heroMarquee 24s linear infinite; display: flex; flex: none; width: max-content; will-change: transform; }
.hero-strip:hover .hero-strip-track { animation-play-state: paused; }
.hero-strip-group { align-items: center; display: flex; flex: none; gap: clamp(32px, 4.2vw, 78px); justify-content: space-around; min-width: 100vw; padding: 0 clamp(24px, 5vw, 82px); width: max-content; }
.hero-strip span { color: #aab7d0; font-size: clamp(13px, 1.1vw, 17px); font-weight: 760; letter-spacing: -.01em; white-space: nowrap; }
.hero-strip i { color: #2f78ff; font-style: normal; text-shadow: 0 0 18px rgba(47,120,255,.58); }

.section-index { align-items: center; color: #8aa9ec; display: flex; font-family: "Geist Mono", monospace; font-size: 13px; font-weight: 720; gap: 14px; letter-spacing: .06em; margin: 0 0 34px; text-transform: uppercase; }
.section-index span { align-items: center; background: rgba(35,98,255,.14); border: 1px solid rgba(70,125,255,.32); border-radius: 50%; color: #75a1ff; display: flex; font-size: 12px; height: 42px; justify-content: center; width: 42px; }
.work-section { background: radial-gradient(circle at 83% 12%, rgba(23,80,215,.2), transparent 31%), radial-gradient(circle at 9% 77%, rgba(14,54,144,.14), transparent 34%), linear-gradient(180deg, #030918, #061028 54%, #030918); border-top: 1px solid var(--line); isolation: isolate; overflow: hidden; padding: 120px clamp(24px, 5vw, 82px) 170px; position: relative; }
.work-section::before { background-image: linear-gradient(rgba(91,137,230,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(91,137,230,.055) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: linear-gradient(to bottom, black, transparent 88%); pointer-events: none; position: absolute; z-index: -2; }
.work-section::after { border: 1px solid rgba(84,132,227,.11); border-radius: 50%; content: ""; height: 620px; pointer-events: none; position: absolute; right: -260px; top: 80px; transform: translate(var(--mx-2), var(--my-2)); transition: transform .16s ease-out; width: 620px; z-index: -1; }
.section-heading { align-items: end; display: grid; gap: 90px; grid-template-columns: 1.35fr .65fr; }
.section-heading h2 { font-size: clamp(65px, 7.6vw, 126px); font-weight: 790; letter-spacing: -.06em; line-height: .88; margin: 0; text-transform: uppercase; }
.section-heading h2 em { color: #4b7fea; font-style: normal; }
.section-intro { border-left: 2px solid #245fff; color: #aebbd2; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.55; margin: 0 0 8px; max-width: 540px; padding-left: 28px; }
.filter-row { border-bottom: 1px solid var(--line); display: flex; gap: 12px; margin: 0 0 36px; padding-bottom: 26px; position: relative; z-index: 2; }
.filter-row button { background: rgba(9,25,57,.7); border: 1px solid rgba(100,139,211,.24); border-radius: 999px; color: #b2bfd5; cursor: pointer; font-size: 14px; font-weight: 800; padding: 14px 24px; transition: .25s ease; }
.filter-row button:hover, .filter-row button.active { background: var(--blue); border-color: var(--blue); color: white; transform: translateY(-2px); }
.projects-grid { display: grid; gap: 84px 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; z-index: 2; }
.project-card { min-width: 0; }
.project-visual { aspect-ratio: 1.16; background: #071329; border: 1px solid rgba(102,145,226,.2); border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.24); overflow: hidden; position: relative; }
.project-custom-media { height: 100%; inset: 0; object-fit: cover; position: absolute; transition: transform .7s cubic-bezier(.2,.8,.2,1); width: 100%; z-index: 2; }
.project-visual.has-custom-media::after { background: linear-gradient(180deg,rgba(1,5,15,.14),transparent 38%,rgba(1,5,15,.28)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 3; }
.project-visual.has-custom-media .visual-grid, .project-visual.has-custom-media .project-art { opacity: 0; pointer-events: none; }
.project-card:hover .project-custom-media { transform: scale(1.035); }
.project-visual.has-custom-media .project-number, .project-visual.has-custom-media .media-type { color: white; text-shadow: 0 2px 16px rgba(0,0,0,.72); z-index: 4; }
.visual-grid { background-image: linear-gradient(rgba(104,145,224,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(104,145,224,.09) 1px, transparent 1px); background-size: 46px 46px; inset: 0; mask-image: radial-gradient(circle at center, black, transparent 80%); position: absolute; }
.project-art { align-items: center; background: radial-gradient(circle at 34% 25%, #79a8ff, #1456f6 24%, #061849 66%, #01040d 100%); border: 1px solid rgba(135,174,255,.45); border-radius: 50%; box-shadow: 0 42px 80px rgba(0,0,0,.48); display: flex; height: 58%; justify-content: center; left: 22%; position: absolute; top: 20%; transition: transform .7s cubic-bezier(.2,.8,.2,1); width: 49%; }
.project-art::after { border: 1px solid rgba(255,255,255,.28); border-radius: 50%; content: ""; inset: 8%; position: absolute; }
.project-art span { font-size: clamp(62px, 8vw, 128px); font-weight: 900; letter-spacing: -.09em; }
.project-card:hover .project-art { transform: rotate(8deg) scale(1.07); }
.project-number, .media-type { color: #b9c6de; font-size: 12px; font-weight: 800; letter-spacing: .1em; position: absolute; top: 24px; z-index: 3; }
.project-number { left: 26px; }
.media-type { right: 26px; text-transform: uppercase; }
.project-type { background: linear-gradient(135deg, #0b1d43, #091630); }
.project-type .project-art { background: #1959ff; border-radius: 22%; height: 54%; left: 20%; transform: rotate(-7deg); width: 56%; }
.project-type .project-art::before { border: 1px solid rgba(255,255,255,.6); content: ""; inset: 12%; position: absolute; }
.project-type .project-art span { font-size: clamp(76px, 10vw, 150px); }
.project-type:hover .project-art { transform: rotate(0) scale(1.05); }
.project-grid { background: #e8ecf5; }
.project-grid .visual-grid { background-image: linear-gradient(rgba(5,31,76,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(5,31,76,.13) 1px, transparent 1px); mask-image: none; }
.project-grid .project-art { background: radial-gradient(circle at 32% 25%, #fff, #4d87ff 23%, #0a2b7d 60%, #020712 100%); border-radius: 28%; color: white; transform: rotate(13deg); }
.project-grid .project-number, .project-grid .media-type { color: #07142e; }
.project-chrome { background: radial-gradient(circle at 70% 30%, #1e4dab, #081631 35%, #030712 72%); }
.project-chrome .project-art { background: conic-gradient(from 220deg, #071128, #dce7ff, #1b5cff, #020713, #8aafff, #071128); height: 62%; left: 23%; top: 18%; width: 47%; }
.project-meta { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 28px; grid-template-columns: 1.2fr .8fr auto; padding: 27px 4px 30px; }
.project-meta > div > p { color: #6894ef; font-size: 13px; font-weight: 900; letter-spacing: .1em; margin: 0 0 9px; text-transform: uppercase; }
.project-meta h3 { font-size: clamp(29px, 2.6vw, 44px); font-weight: 720; letter-spacing: -.035em; margin: 0; }
.project-description { color: #98a7c2; font-size: 16px; line-height: 1.45; margin: 0; max-width: 280px; }
.project-arrow { align-items: center; border: 1px solid rgba(113,151,225,.3); border-radius: 50%; display: flex; font-size: 23px; height: 54px; justify-content: center; transition: .25s ease; width: 54px; }
.project-card:hover .project-arrow { background: var(--blue); border-color: var(--blue); transform: rotate(45deg); }

.about-section { align-items: center; background: radial-gradient(circle at 13% 48%, rgba(26,83,220,.16), transparent 29%), radial-gradient(circle at 88% 78%, rgba(17,55,145,.15), transparent 32%), linear-gradient(135deg, #020713, #050d20 48%, #020713); display: grid; gap: clamp(70px, 9vw, 160px); grid-template-columns: .9fr 1.1fr; isolation: isolate; overflow: hidden; padding: 180px clamp(24px, 7vw, 120px); position: relative; }
.about-section::before { background-image: radial-gradient(rgba(88,137,235,.18) .8px, transparent .9px); background-size: 28px 28px; content: ""; inset: 0; mask-image: linear-gradient(105deg, black, transparent 64%); opacity: .55; pointer-events: none; position: absolute; z-index: -2; }
.about-section::after { border: 1px solid rgba(89,139,238,.12); border-radius: 50%; content: ""; height: 780px; left: -420px; pointer-events: none; position: absolute; top: -240px; transform: translate(var(--mx-3), var(--my-3)); transition: transform .16s ease-out; width: 780px; z-index: -1; }
.about-visual { aspect-ratio: 1; background: radial-gradient(circle at center, #0a2c77, #06142e 52%, #030817 78%); border: 1px solid rgba(103,148,235,.22); border-radius: 34px; overflow: hidden; position: relative; }
.about-custom-media { height: 100%; inset: 0; object-fit: cover; object-position: center top; position: absolute; width: 100%; z-index: 4; }
.about-visual.has-custom-media::after { background: linear-gradient(180deg,transparent 55%,rgba(2,7,19,.62)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 4; }
.about-visual.has-custom-media .about-logo-orbit { opacity: 0; pointer-events: none; }
.about-visual::before { background-image: radial-gradient(rgba(108,156,255,.55) 1px, transparent 1.5px); background-size: 26px 26px; content: ""; inset: 0; mask-image: radial-gradient(circle at center, black, transparent 72%); opacity: .5; position: absolute; }
.about-logo-orbit { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; }
.about-logo-orbit img { filter: drop-shadow(0 22px 42px rgba(0,0,0,.35)); height: auto; position: relative; width: 34%; z-index: 3; }
.about-circle { border: 1px solid rgba(116,161,255,.46); border-radius: 50%; left: 50%; position: absolute; top: 50%; }
.circle-one { animation: orbitA 16s linear infinite; height: 42%; width: 95%; }
.circle-two { animation: orbitB 20s linear infinite reverse; height: 95%; width: 42%; }
.about-visual > p { bottom: 28px; color: #89a5d9; font-size: 11px; font-weight: 900; left: 31px; letter-spacing: .16em; margin: 0; position: absolute; z-index: 5; }
.about-copy { max-width: 770px; }
.about-copy h2 { font-size: clamp(58px, 6vw, 100px); font-weight: 780; letter-spacing: -.056em; line-height: .9; margin: 0 0 52px; text-transform: uppercase; }
.about-lead { color: white !important; font-size: clamp(23px, 2vw, 31px) !important; line-height: 1.48 !important; }
.about-copy > p:not(.section-index) { color: #9eacc7; font-size: 18px; line-height: 1.7; max-width: 680px; }
.tool-row { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; padding-top: 28px; }
.tool-row span { background: #07152f; border: 1px solid rgba(114,153,228,.24); border-radius: 999px; color: #c2cde1; font-size: 12px; font-weight: 800; padding: 12px 17px; }

.process-section { background: radial-gradient(circle at 18% 20%, rgba(38,100,255,.26), transparent 31%), radial-gradient(circle at 88% 74%, rgba(23,64,173,.2), transparent 34%), linear-gradient(145deg, #06102a 0%, #07183c 50%, #030817 100%); display: grid; gap: clamp(80px, 10vw, 180px); grid-template-columns: .82fr 1.18fr; isolation: isolate; overflow: hidden; padding: 170px clamp(24px, 5vw, 82px); position: relative; }
.process-section::before { background-image: linear-gradient(rgba(91,139,235,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(91,139,235,.075) 1px, transparent 1px); background-size: 72px 72px; content: ""; inset: 0; mask-image: radial-gradient(circle at 68% 45%, black, transparent 82%); pointer-events: none; position: absolute; z-index: -2; }
.process-section::after { border: 1px solid rgba(83,134,237,.16); border-radius: 50%; box-shadow: 0 0 100px rgba(27,82,210,.08), inset 0 0 90px rgba(20,65,174,.05); content: ""; height: 760px; pointer-events: none; position: absolute; right: -330px; top: -260px; transform: translate(var(--mx-2), var(--my-2)); transition: transform .16s ease-out; width: 760px; z-index: -1; }
.process-heading { align-self: start; position: sticky; top: 145px; z-index: 2; }
.process-section .section-index { color: #91aff0; }
.process-section .section-index span { background: rgba(31,92,235,.13); border-color: rgba(89,139,246,.3); color: #90b2ff; }
.process-heading h2 { font-size: clamp(62px, 6.5vw, 110px); font-weight: 780; letter-spacing: -.058em; line-height: .87; margin: 0; text-transform: uppercase; }
.process-heading h2 em { background: linear-gradient(90deg, #75a4ff, #2464ff); background-clip: text; color: transparent; font-style: normal; -webkit-background-clip: text; }
.process-heading > p:last-child { color: #9fafd0; font-size: 18px; line-height: 1.65; margin: 36px 0 0; max-width: 520px; }
.process-list { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.process-item { background: rgba(6,18,44,.52); border: 1px solid rgba(105,148,231,.17); border-radius: 22px; box-shadow: 0 20px 70px rgba(0,0,0,.14); margin-bottom: 14px; overflow: hidden; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.process-item:hover { border-color: rgba(104,153,255,.37); transform: translateX(-5px); }
.process-item.is-open { background: linear-gradient(135deg, rgba(23,69,169,.46), rgba(7,22,53,.85)); border-color: rgba(95,148,255,.45); box-shadow: 0 28px 90px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); }
.process-trigger { align-items: center; background: transparent; border: 0; color: white; cursor: pointer; display: grid; gap: 22px; grid-template-columns: 48px minmax(0,1fr) 48px; padding: 28px 30px; text-align: left; width: 100%; }
.process-number { align-items: center; background: rgba(30,86,221,.15); border: 1px solid rgba(98,148,247,.25); border-radius: 50%; color: #87aaff; display: flex; font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 760; height: 44px; justify-content: center; width: 44px; }
.process-title { display: flex; flex-direction: column; gap: 7px; }
.process-title small { color: #7795d3; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.process-title strong { font-size: clamp(31px, 3.3vw, 50px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.process-toggle { align-items: center; border: 1px solid rgba(111,154,239,.3); border-radius: 50%; display: flex; height: 46px; justify-content: center; position: relative; transition: background .3s ease, transform .3s ease; width: 46px; }
.process-toggle i { background: #8badf4; height: 1px; position: absolute; transition: transform .3s ease; width: 15px; }
.process-toggle i:last-child { transform: rotate(90deg); }
.process-item.is-open .process-toggle { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.process-item.is-open .process-toggle i { background: white; }
.process-item.is-open .process-toggle i:last-child { transform: rotate(0); }
.process-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.process-item.is-open .process-panel { max-height: 330px; opacity: 1; }
.process-panel-inner { border-top: 1px solid rgba(110,151,230,.17); margin: 0 30px; padding: 28px 0 32px 70px; }
.process-panel p { color: #b6c4df; font-size: 17px; line-height: 1.65; margin: 0; max-width: 670px; }
.process-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.process-tags span { background: rgba(30,88,225,.12); border: 1px solid rgba(94,143,239,.22); border-radius: 999px; color: #98b8f8; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 8px 11px; text-transform: uppercase; }

.contact-section { background: radial-gradient(circle at 12% 72%, rgba(25,80,210,.22), transparent 29%), radial-gradient(circle at 82% 20%, rgba(22,64,160,.17), transparent 28%), linear-gradient(145deg, #020713, #06112b 54%, #020611); display: grid; gap: clamp(80px, 9vw, 160px); grid-template-columns: .86fr 1.14fr; isolation: isolate; overflow: hidden; padding: 180px clamp(24px, 5vw, 82px); position: relative; }
.contact-section::before { background-image: radial-gradient(rgba(94,143,238,.2) .8px, transparent .9px); background-size: 28px 28px; content: ""; inset: 0; mask-image: linear-gradient(120deg, black, transparent 70%); opacity: .45; pointer-events: none; position: absolute; z-index: -2; }
.contact-section::after { border: 1px solid rgba(79,129,228,.13); border-radius: 50%; content: ""; height: 680px; left: -330px; pointer-events: none; position: absolute; top: 30%; transform: translate(var(--mx-3), var(--my-3)); transition: transform .16s ease-out; width: 680px; z-index: -1; }
.contact-heading, .contact-form { position: relative; z-index: 2; }
.contact-heading h2 { font-size: clamp(48px, 4.6vw, 82px); font-weight: 780; letter-spacing: -.048em; line-height: .96; margin: 0 0 40px; text-transform: uppercase; }
.contact-heading h2 em { background: linear-gradient(90deg, #78a6ff, #2868ff); background-clip: text; color: transparent; font-style: normal; -webkit-background-clip: text; }
.contact-heading > p:not(.section-index):not(.contact-note) { color: #a4b2cd; font-size: 18px; line-height: 1.65; margin: 0; max-width: 540px; }
.contact-services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.contact-services span { background: rgba(24,74,186,.14); border: 1px solid rgba(96,142,232,.22); border-radius: 999px; color: #a9bfe9; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 10px 13px; text-transform: uppercase; }
.contact-note { border-left: 2px solid #2767ff; color: #7891c2; font-size: 13px; line-height: 1.6; margin: 36px 0 0; max-width: 470px; padding-left: 17px; }
.contact-form { backdrop-filter: blur(22px); background: linear-gradient(145deg, rgba(9,25,58,.82), rgba(4,13,33,.8)); border: 1px solid rgba(108,150,230,.24); border-radius: 30px; box-shadow: 0 44px 110px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035); padding: clamp(24px, 3vw, 40px); }
.form-heading { align-items: start; border-bottom: 1px solid rgba(116,154,225,.18); display: flex; justify-content: space-between; margin-bottom: 16px; padding: 4px 4px 24px; }
.form-heading span { color: white; display: block; font-size: 21px; font-weight: 690; letter-spacing: -.02em; }
.form-heading p { color: #7e8fab; font-size: 13px; line-height: 1.45; margin: 7px 0 0; }
.form-heading small { color: #7798d8; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.field-card { background: rgba(7,19,45,.62); border: 1px solid rgba(108,147,218,.17); border-radius: 18px; display: grid; gap: 10px; grid-template-columns: 24px 1fr; margin-top: 12px; padding: 19px 16px 20px; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.field-card:focus-within { background: rgba(11,30,70,.86); border-color: rgba(64,124,255,.68); box-shadow: 0 0 0 4px rgba(35,95,235,.09), 0 18px 45px rgba(0,0,0,.16); transform: translateY(-2px); }
.field-number { color: #4f7fdf; font-family: "Geist Mono", monospace; font-size: 10px; font-weight: 700; padding-top: 3px; }
.field-content { min-width: 0; }
.field-label { color: #82a1df; display: block; font-family: "Geist Mono", monospace; font-size: 9px; font-weight: 720; letter-spacing: .09em; margin-bottom: 10px; text-transform: uppercase; }
.contact-form input, .contact-form textarea, .contact-form select { background: transparent; border: 0; border-radius: 0; color: white; font-size: clamp(16px, 1.12vw, 20px); font-weight: 560; letter-spacing: -.025em; outline: 0; padding: 0; resize: vertical; width: 100%; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #596987; opacity: 1; }
.contact-form select { cursor: pointer; }
.contact-form select option { background: #07142e; color: white; }
.field-message textarea { min-height: 112px; }
.contact-form button { align-items: center; background: linear-gradient(90deg, #1959ff, #276aff); border: 0; border-radius: 999px; box-shadow: 0 18px 44px rgba(24,82,225,.22); color: white; cursor: pointer; display: flex; font-size: 14px; font-weight: 780; justify-content: space-between; margin-top: 18px; padding: 9px 9px 9px 25px; transition: box-shadow .25s ease, transform .25s ease; width: 100%; }
.contact-form button:hover { box-shadow: 0 24px 54px rgba(24,82,225,.32); transform: translateY(-2px); }
.contact-form button i { background: white; border-radius: 50%; color: var(--blue); display: grid; font-size: 19px; font-style: normal; height: 50px; place-items: center; transition: transform .25s ease; width: 50px; }
.contact-form button:hover i { transform: rotate(45deg); }
.form-status { color: #70a0ff; font-size: 13px; font-weight: 650; line-height: 1.5; margin: 14px 5px 0; min-height: 20px; }
.contact-form button:disabled { cursor: wait; opacity: .7; transform: none; }
.form-status.is-success { color: #6ee7b7; }
.form-status.is-error { color: #ff8999; }
.form-trap { height: 1px; left: -9999px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; }

footer { align-items: center; background: #01040c; border-top: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 1fr 1fr auto auto; min-height: 190px; padding: 50px clamp(24px, 5vw, 82px); }
footer img { height: 56px; object-fit: contain; width: 58px; }
footer p, footer a { color: #8997b2; font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }
footer a { border-bottom: 1px solid #556783; color: white; padding-bottom: 5px; }

.reveal { opacity: 0; transform: translateY(42px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes statusPulse { 50% { box-shadow: 0 0 0 12px rgba(58,126,255,0); } }
@keyframes signalPulse { 50% { box-shadow: 0 0 36px #4c8bff; transform: scale(1.2); } }
@keyframes floatOrb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes orbitA { from { transform: translate(-50%,-50%) rotate(-14deg); } to { transform: translate(-50%,-50%) rotate(346deg); } }
@keyframes orbitB { from { transform: translate(-50%,-50%) rotate(66deg); } to { transform: translate(-50%,-50%) rotate(426deg); } }
@keyframes orbitC { from { transform: translate(-50%,-50%) rotate(28deg); } to { transform: translate(-50%,-50%) rotate(388deg); } }
@keyframes softwareSpin { to { transform: rotate(360deg); } }
@keyframes softwareCounterSpin { to { transform: rotate(-360deg); } }
@keyframes heroMarquee { to { transform: translateX(-50%); } }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav-links { background: rgba(3,9,23,.98); border-bottom: 1px solid var(--line); flex-direction: column; gap: 28px; left: 0; opacity: 0; padding: 38px 24px; pointer-events: none; position: absolute; right: 0; top: 96px; transform: translateY(-15px); transition: .25s ease; }
  .nav-links.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .nav-links a { font-size: 18px; }
  .nav-cta { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .hero-content { width: 84%; }
  .hero-object { height: min(38vw, 430px); opacity: .56; right: -6%; top: 25%; width: min(38vw, 430px); }
  .hero-lower { grid-template-columns: 1fr; max-width: 650px; }
  .section-heading, .about-section, .process-section, .contact-section { grid-template-columns: 1fr; }
  .section-heading { align-items: start; }
  .section-intro { margin-top: 10px; max-width: 680px; }
  .about-visual { max-width: 720px; width: 100%; }
  .process-heading { position: static; }
  .process-list { max-width: 850px; }
  .contact-heading { max-width: 820px; }
  footer { grid-template-columns: 1fr auto; }
  footer p { justify-self: start; }
}

@media (max-width: 900px) {
  .hero-content { width: 100%; }
  .hero-object { opacity: .24; right: -110px; top: 29%; }
}

@media (max-width: 700px) {
  .site-header { height: 78px; padding: 0 19px; }
  .brand { height: 44px; width: 46px; }
  .brand img { height: 38px; max-width: 40px; width: auto; }
  .nav-links { top: 78px; }
  .hero { min-height: 830px; padding: 130px 19px 118px; }
  .hero-content { width: 100%; }
  .hero-kicker { margin-bottom: 28px; }
  .hero-kicker p { font-size: 12px; }
  .hero h1 { font-size: clamp(64px, 20vw, 92px); letter-spacing: -.038em; line-height: .86; }
  .hero h1 .hero-accent-line { letter-spacing: -.01em; }
  .hero-lower { gap: 38px; margin-top: 48px; }
  .hero-lower > p { font-size: 19px; max-width: 530px; }
  .hero-actions { gap: 21px; }
  .primary-button { font-size: 13px; }
  .hero-object { height: 300px; opacity: .32; right: -96px; top: 56%; width: 300px; }
  .signal-node { display: none; }
  .hero-strip { height: 70px; }
  .hero-strip-group { gap: 30px; padding: 0 19px; }
  .hero-strip span { font-size: 12px; }
  .work-section, .about-section, .process-section, .contact-section { padding: 120px 19px; }
  .section-heading { gap: 36px; }
  .section-heading h2, .about-copy h2, .process-heading h2, .contact-heading h2 { font-size: clamp(54px, 16vw, 80px); }
  .section-intro { font-size: 18px; }
  .filter-row { margin-top: 0; overflow-x: auto; padding-bottom: 20px; }
  .filter-row button { font-size: 13px; padding: 12px 20px; white-space: nowrap; }
  .projects-grid { gap: 68px; grid-template-columns: 1fr; }
  .project-visual { border-radius: 20px; }
  .project-art { left: 20%; width: 55%; }
  .project-meta { align-items: start; gap: 18px; grid-template-columns: 1fr auto; }
  .project-description { font-size: 15px; grid-column: 1 / -1; grid-row: 2; }
  .project-arrow { grid-column: 2; grid-row: 1; }
  .about-section { gap: 70px; }
  .about-visual { border-radius: 22px; }
  .about-copy h2 { margin-bottom: 36px; }
  .about-lead { font-size: 21px !important; }
  .about-copy > p:not(.section-index) { font-size: 17px; }
  .process-section { gap: 70px; }
  .process-trigger { gap: 14px; grid-template-columns: 40px minmax(0,1fr) 40px; padding: 22px 18px; }
  .process-number { height: 38px; width: 38px; }
  .process-title strong { font-size: 31px; }
  .process-toggle { height: 38px; width: 38px; }
  .process-panel-inner { margin: 0 18px; padding: 23px 0 27px; }
  .process-panel p { font-size: 15px; }
  .contact-section { gap: 70px; }
  .contact-form { border-radius: 20px; padding: 26px 20px; }
  .form-row { gap: 0; grid-template-columns: 1fr; }
  .field-card { border-radius: 15px; margin-top: 10px; }
  .contact-form input, .contact-form textarea, .contact-form select { font-size: 18px; }
  footer { align-items: start; grid-template-columns: 1fr; min-height: 270px; padding: 55px 19px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .mouse-depth-one, .mouse-depth-two, .mouse-depth-three { transform: none; }
  .page-cursor-light { display: none; }
  .hero-strip-track { animation: none; transform: none; }
  .hero-strip-group[aria-hidden="true"] { display: none; }
}