/* Jarvis / first visual exploration — scoped to this page. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body.jarvis-experience { background: #050809; }
.jarvis-experience main { overflow: clip; }
.jarvis-experience main > .max-w-7xl { padding-top: 0; }
.j-experience { height: 210vh; position: relative; margin: 0 calc(50% - 50vw); width: 100vw; }
.j-stage { position: sticky; top: 100px; height: calc(100svh - 100px); min-height: 590px; overflow: hidden; background: radial-gradient(ellipse at 67% 45%, #11242b 0, #0c111b 28%, #050809 65%); }
.j-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#79e7ee05 1px,transparent 1px),linear-gradient(90deg,#79e7ee05 1px,transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(transparent,#000,transparent); }
.j-topline { position: absolute; top: 30px; left: 5%; right: 5%; display: flex; justify-content: space-between; color: #72858b; font: 10px 'JetBrains Mono',monospace; letter-spacing: .2em; z-index: 3; }
.j-topline span:last-child { color: #72e9d1; }
.j-topline span:last-child::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #72e9d1; margin-right: 9px; box-shadow: 0 0 15px #72e9d1; }
.j-wordmark { position: absolute; top: 8%; left: 3%; font-size: clamp(120px,23vw,380px); font-weight: 900; letter-spacing: -.075em; line-height: 1; color: transparent; -webkit-text-stroke: 1px #89c5d21a; user-select: none; }
.j-copy { position: absolute; left: max(6%,calc((100vw - 1180px)/2)); top: 29%; width: 39%; z-index: 4; }
.j-eyebrow { color: #7ddfe7; text-transform: uppercase; font: 10px 'JetBrains Mono',monospace; letter-spacing: .23em; margin-bottom: 22px; display: block; }
.j-copy h1 { font-size: clamp(44px,5.3vw,82px); line-height: 1.03; letter-spacing: -.06em; font-weight: 600; margin: 0 0 24px; }
.j-copy h1 em { font-style: normal; background: linear-gradient(100deg,#89f0e6,#5ec2eb 55%,#b092eb); color: transparent; background-clip: text; }
.j-copy p { max-width: 380px; font-size: 14px; line-height: 1.85; color: #95a6af; }
.j-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.j-button { padding: 15px 20px; border: 1px solid #c4fbf0; background: #c4fbf0; border-radius: 6px; color: #092323; font-size: 12px; font-weight: 700; transition: transform .2s,box-shadow .2s; display: inline-flex; gap: 20px; align-items: center; }
.j-button:hover { transform: translateY(-3px); box-shadow: 0 8px 35px #6be4e229; }
.j-button.secondary { background: #ffffff03; border-color: #ffffff24; color: #d5e4e6; }
.j-meta { margin-top: 20px; font: 9px 'JetBrains Mono',monospace; color: #6f858c; letter-spacing: .08em; }
.j-visual { position: absolute; left: 46%; top: 10%; width: 46%; height: 79%; perspective: 900px; }
.j-orbit { position: absolute; width: 85%; aspect-ratio: 1; border: 1px solid #77dee51a; border-radius: 50%; top: 18%; left: 5%; box-shadow: 0 0 90px #55d4ee08,inset 0 0 90px #55d4ee08; }
.j-orbit::before,.j-orbit::after { content: ''; position: absolute; inset: 12%; border: 1px dashed #a597d725; border-radius: 50%; }
.j-orbit::after { inset: -12%; border: 1px solid #77dee509; }
.j-robot { display: none !important; position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; aspect-ratio: 953 / 1650; transform: translateX(-50%); filter: drop-shadow(0 0 24px #a17bea20); mix-blend-mode: screen; }
.j-part { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; will-change: transform; }
.j-label { position: absolute; font: 9px 'JetBrains Mono',monospace; letter-spacing: .12em; color: #83a7b0; border-bottom: 1px solid #71cfdb40; padding-bottom: 9px; z-index: 3; }
.j-label.a { top: 24%; right: 0; }.j-label.b { top: 52%; left: 0; }.j-label.c { bottom: 15%; right: 0; }
.j-label b { display: block; color: #c1e7eb; font-size: 10px; margin-top: 6px; font-weight: 400; }
.j-bottom { position: absolute; bottom: 28px; left: 6%; right: 6%; display: flex; align-items: end; justify-content: space-between; z-index: 4; gap: 25px; }
.j-scroll { color: #c7d6d8; font: 10px 'JetBrains Mono',monospace; letter-spacing: .12em; }
.j-scroll small { display: block; color: #637b83; margin-top: 9px; font-size: 9px; }
.j-progress { width: 270px; }.j-progress-label { display: flex; justify-content: space-between; color: #8ba6ad; font: 9px 'JetBrains Mono',monospace; letter-spacing: .1em; margin-bottom: 12px; }
.j-track { height: 2px; background: #ffffff12; }.j-track span { display: block; width: 100%; height: 100%; transform-origin: left; background: #86e9e0; }
.j-section-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; border-block: 1px solid #ffffff10; padding: 24px 15px; margin-bottom: 70px; font: 10px 'JetBrains Mono',monospace; color: #829ca4; }
.j-section-nav a:hover { color: #b8f9ee; }
.jarvis-experience main h2,.jarvis-experience main h3 { font-style: normal; text-transform: none; letter-spacing: -.035em; }
.jarvis-experience main .card { border-radius: 14px; background: linear-gradient(135deg,#101a1e,#090d11); box-shadow: none; border-color: #90bfcd20; }
.jarvis-experience main section.card { padding: clamp(22px,4vw,54px); }
.jarvis-experience main .card:hover { border-color: #7ae9e54d; }
.jarvis-experience main .pill { border-radius: 5px; letter-spacing: .1em; }
.jarvis-experience main h2 { font-size: clamp(28px,3.4vw,48px); }
.jarvis-experience main p.text-xs { font-size: 13px; line-height: 1.8; }
.jarvis-experience main .text-gray-500 { color: #81919d; }
.jarvis-experience .j-chapter { display: block; font: 10px 'JetBrains Mono',monospace; text-transform: uppercase; letter-spacing: .2em; color: #6ed9d5; margin-bottom: 20px; }
.jarvis-experience [id] { scroll-margin-top: 105px; }
.j-signature { padding: 30px 0; border-top: 1px solid #ffffff10; color: #70888e; font-size: 12px; line-height: 1.8; }
.j-three-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; cursor:grab; touch-action:pan-y; }
.j-three-canvas:active { cursor:grabbing; }
.j-robot, .j-webgl-ready .j-robot { display:none !important; }
.j-label { pointer-events:none; }
.j-view-controls { display:none; position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:5; padding:4px; gap:3px; border:1px solid #a0dce32b; background:#080f18cc; border-radius:8px; }
.j-webgl-ready .j-view-controls { display:flex; }
.j-view-controls button { font:10px 'JetBrains Mono',monospace; color:#8cabb9; padding:8px 12px; border-radius:4px; }
.j-view-controls button:hover,.j-view-controls button[aria-pressed=true] { background:#87dfed1c; color:#c4f9ff; }
.j-view-controls button:focus-visible { outline:2px solid #a68afa; outline-offset:2px; }
.j-drag-hint { display:none; position:absolute; bottom:-24px; width:100%; text-align:center; font:8px 'JetBrains Mono',monospace; letter-spacing:.12em; color:#728b9e; }
.j-webgl-ready .j-drag-hint { display:block; }
@media(max-width: 760px) {
 .j-experience { height: 170vh; }.j-stage { top: 70px; min-height: 710px; height: calc(100svh - 70px); }.j-topline { font-size: 8px; top: 22px; letter-spacing: .08em; }.j-wordmark { top: 10%; font-size: 25vw; }
 .j-copy { top: 105px; left: 7%; width: 86%; }.j-copy h1 { font-size: 44px; margin-bottom: 14px; }.j-copy p { font-size: 12px; max-width: 350px; }.j-eyebrow { margin-bottom: 12px; font-size: 8px; }.j-actions { margin-top: 16px; }.j-button { font-size: 11px; padding: 12px 15px; }.j-meta { font-size: 8px; margin-top: 12px; }
 .j-copy { top: 65px; }.j-copy h1 { font-size: 36px; }.j-visual { top: 350px; left: 12%; width: 76%; height: 280px; }.j-label { font-size: 7px; }.j-label b { font-size: 8px; }.j-label.b { left: -5%; }.j-bottom { bottom: 25px; }.j-scroll { font-size: 8px; max-width: 130px; }.j-scroll small { font-size: 7px; }.j-progress { width: 140px; }.j-progress-label { font-size: 7px; }.j-section-nav { gap: 17px; font-size: 9px; margin-bottom: 45px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.j-experience { height: auto; }.j-stage { position: relative; }.j-part { will-change: auto; }.jarvis-experience *, .jarvis-experience *::before, .jarvis-experience *::after { animation: none !important; transition: none !important; } }