/* Satyam Gupta — 3D portfolio
   Palette: midnight navy / electric cyan / ultraviolet / warm amber.
   No framework required. */
:root {
  color-scheme: dark;
  --bg: #080b16;
  --bg-soft: #0d1222;
  --panel: rgba(17, 24, 43, .76);
  --panel-solid: #11182b;
  --panel-hi: #17223a;
  --line: rgba(161, 180, 226, .15);
  --line-bright: rgba(88, 226, 255, .32);
  --text: #f1f5ff;
  --muted: #a0acc7;
  --dim: #66738f;
  --cyan: #58e2ff;
  --violet: #a78bfa;
  --amber: #ffc777;
  --green: #7df7c3;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
  --ease: cubic-bezier(.2,.75,.25,1);
  --shadow: 0 24px 80px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.7; overflow-x: hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; background: radial-gradient(ellipse at 78% 4%, rgba(74,65,180,.16), transparent 36%), radial-gradient(ellipse at 5% 48%, rgba(18,126,158,.11), transparent 34%), linear-gradient(135deg,#080b16 0%,#0a1020 52%,#080b16 100%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
::selection { background:var(--cyan); color:#061018; }
#starfield { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.75; }
.noise { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.035; 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='.6'/%3E%3C/svg%3E"); }
.cursor-glow { position:fixed; z-index:-1; width:380px; height:380px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(88,226,255,.075),transparent 68%); transform:translate(-50%,-50%); opacity:0; transition:opacity .25s; }
.topbar { width:min(1320px, calc(100% - 64px)); height:84px; margin:auto; display:flex; align-items:center; gap:30px; border-bottom:1px solid rgba(161,180,226,.1); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark { font-size:22px; font-weight:800; letter-spacing:-2px; color:#fff; }
.brand-mark span { color:var(--cyan); }
.brand-copy { display:flex; flex-direction:column; font-size:11px; font-weight:800; letter-spacing:.11em; line-height:1.35; }
.brand-copy small { font-family:var(--mono); font-size:8px; color:var(--dim); letter-spacing:.16em; margin-top:4px; }
.nav-links { display:flex; gap:clamp(15px,2.5vw,34px); align-items:center; margin-left:auto; }
.nav-link { font-size:12px; font-weight:700; color:var(--muted); transition:color .2s; position:relative; }
.nav-link::after { content:""; position:absolute; left:0; right:100%; bottom:-9px; height:2px; background:var(--cyan); transition:right .25s var(--ease); }
.nav-link:hover,.nav-link.active { color:var(--text); }
.nav-link.active::after,.nav-link:hover::after { right:0; }
.availability { display:flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:100px; padding:9px 13px; font-size:10px; color:#d2d9ed; white-space:nowrap; }
.status-dot,.caption-pulse { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px rgba(125,247,195,.65); }
.menu-toggle { display:none; }
.section-shell { width:min(1160px, calc(100% - 64px)); margin-inline:auto; }
.hero { min-height:calc(100svh - 84px); padding:90px 0 78px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; position:relative; gap:20px; }
.hero-copy { position:relative; z-index:2; padding-bottom:30px; }
.eyebrow,.section-kicker { display:flex; align-items:center; gap:11px; color:var(--cyan); font:10px var(--mono); letter-spacing:.16em; }
.eyebrow-line { display:block; width:28px; height:1px; background:var(--cyan); }
.eyebrow-dot { color:var(--violet); font-size:14px; }
.hero-title { margin:27px 0 24px; font-size:clamp(48px,6.3vw,86px); line-height:.99; letter-spacing:-.075em; font-weight:800; }
.gradient-text { background:linear-gradient(100deg,#f7fbff 0%,var(--cyan) 35%,var(--violet) 78%,#e0c7ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lead { max-width:540px; font-size:15px; line-height:1.95; color:var(--muted); }
.hero-lead strong { color:var(--text); font-weight:800; }
.hero-actions,.contact-actions { display:flex; gap:13px; flex-wrap:wrap; margin-top:31px; }
.button { min-height:49px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:22px; border:1px solid var(--line); border-radius:10px; font-size:12px; font-weight:800; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,background .25s; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:linear-gradient(115deg,var(--cyan),#9beeff); border-color:transparent; color:#07121b; box-shadow:0 8px 32px rgba(88,226,255,.16); }
.button-primary:hover { box-shadow:0 12px 40px rgba(88,226,255,.28); }
.button-ghost { background:rgba(255,255,255,.025); color:var(--text); }
.button-ghost:hover { border-color:rgba(88,226,255,.55); background:rgba(88,226,255,.05); }
.hero-meta { display:flex; align-items:center; gap:24px; margin-top:48px; }
.hero-meta>div { display:flex; flex-direction:column; }
.meta-number { font-size:17px; font-weight:800; letter-spacing:-.04em; }
.meta-label { color:var(--dim); font:8px var(--mono); letter-spacing:.1em; margin-top:3px; }
.meta-divider { width:1px; height:30px; background:var(--line); }
.hero-visual { min-height:500px; position:relative; display:grid; place-items:center; perspective:1000px; isolation:isolate; }
.visual-glow { position:absolute; width:360px; height:360px; background:radial-gradient(circle,rgba(88,226,255,.18),rgba(119,87,255,.08) 42%,transparent 70%); filter:blur(10px); border-radius:50%; }
.visual-orbit { position:absolute; width:390px; height:390px; border:1px solid rgba(117,147,206,.14); border-radius:50%; transform:rotateX(68deg) rotateZ(-24deg); }
.orbit-two { width:330px; height:330px; transform:rotateX(67deg) rotateZ(40deg); border-color:rgba(88,226,255,.2); }
.orbit-three { width:450px; height:450px; transform:rotateY(68deg) rotateZ(28deg); border-color:rgba(167,139,250,.15); }
.core-scene { width:280px; height:280px; position:relative; transform-style:preserve-3d; transform:rotateX(-12deg) rotateY(-22deg); transition:transform .2s ease-out; }
.core-ring { position:absolute; inset:8px; border:1px solid rgba(88,226,255,.35); border-radius:50%; transform:rotateX(75deg) rotateY(20deg); box-shadow:0 0 20px rgba(88,226,255,.08),inset 0 0 20px rgba(88,226,255,.04); }
.ring-a { animation:spinA 16s linear infinite; }
.ring-b { inset:27px; border-color:rgba(167,139,250,.45); transform:rotateY(72deg) rotateX(22deg); animation:spinB 19s linear infinite; }
.ring-c { inset:-8px; border-color:rgba(255,199,119,.23); transform:rotateX(30deg) rotateY(65deg); animation:spinA 24s linear infinite reverse; }
.core-cube { position:absolute; width:136px; height:136px; top:72px; left:72px; transform-style:preserve-3d; transform:rotateX(-20deg) rotateY(35deg); animation:cubeFloat 7s ease-in-out infinite; }
.cube-face { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(140,235,255,.65); background:linear-gradient(145deg,rgba(39,76,106,.84),rgba(19,25,56,.9)); box-shadow:inset 0 0 35px rgba(88,226,255,.08),0 0 28px rgba(88,226,255,.08); backdrop-filter:blur(4px); }
.cube-front { transform:translateZ(68px); }
.cube-front span { font-size:47px; font-weight:800; letter-spacing:-.1em; color:#eafcff; text-shadow:0 0 25px rgba(88,226,255,.6); }
.cube-front small { font:8px var(--mono); color:var(--cyan); letter-spacing:.18em; margin-top:7px; }
.cube-back { transform:rotateY(180deg) translateZ(68px); background:linear-gradient(145deg,rgba(84,58,143,.8),rgba(19,25,56,.9)); }
.cube-right { transform:rotateY(90deg) translateZ(68px); }
.cube-left { transform:rotateY(-90deg) translateZ(68px); }
.cube-top { transform:rotateX(90deg) translateZ(68px); background:rgba(65,110,143,.65); }
.cube-bottom { transform:rotateX(-90deg) translateZ(68px); background:rgba(82,56,130,.65); }
.orbit-node { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); }
.node-a { top:29px; left:45px; }.node-b { right:15px; top:127px; background:var(--violet); box-shadow:0 0 20px var(--violet); }.node-c { bottom:24px; left:98px; background:var(--amber); box-shadow:0 0 20px var(--amber); }
.floating-chip { position:absolute; display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid rgba(155,178,220,.18); border-radius:10px; background:rgba(13,19,37,.76); box-shadow:0 15px 35px rgba(0,0,0,.25); backdrop-filter:blur(14px); font:9px var(--mono); letter-spacing:.09em; color:#d9e5fa; animation:float 6s ease-in-out infinite; }
.chip-top { top:55px; left:9%; }.chip-left { bottom:105px; left:0; animation-delay:-2s; }.chip-right { right:0; top:45%; animation-delay:-3.5s; }
.chip-dot { width:6px; height:6px; border-radius:50%; }.cyan { background:var(--cyan); box-shadow:0 0 9px var(--cyan); }.violet { background:var(--violet); box-shadow:0 0 9px var(--violet); }.chip-symbol { color:var(--cyan); font-weight:700; }
.visual-caption { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:9px; white-space:nowrap; font:8px var(--mono); letter-spacing:.12em; color:var(--muted); }
.caption-index { color:var(--dim); margin-left:13px; }
.scroll-cue { position:absolute; bottom:0; left:0; display:flex; align-items:center; gap:12px; font:8px var(--mono); color:var(--dim); letter-spacing:.15em; }
.scroll-line { display:inline-block; width:35px; height:1px; background:var(--cyan); }
.intro-strip { border-block:1px solid rgba(161,180,226,.11); background:rgba(255,255,255,.015); overflow:hidden; }
.strip-track { min-width:max-content; display:flex; align-items:center; justify-content:space-around; gap:40px; padding:20px 0; animation:marquee 34s linear infinite; font:9px var(--mono); letter-spacing:.14em; color:#8997b4; }
.strip-track i { font-style:normal; color:var(--cyan); }
.section { padding:125px 0; }
.section-heading { margin-bottom:48px; }
.section-heading h2,.contact-card h2 { margin:20px 0 0; font-size:clamp(36px,4.5vw,59px); line-height:1.1; letter-spacing:-.065em; font-weight:800; }
.muted-heading { color:#66738f; }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; }
.about-copy p { color:var(--muted); font-size:13px; line-height:2; margin:0 0 18px; }
.about-copy .large-copy { font-size:20px; line-height:1.65; color:#e7edfb; font-weight:600; letter-spacing:-.03em; }
.text-link { display:inline-flex; gap:16px; align-items:center; color:var(--cyan); font-size:12px; font-weight:800; margin-top:12px; }
.text-link span { transition:transform .2s; }.text-link:hover span { transform:translate(3px,-3px); }
.principles-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; perspective:1000px; }
.principle-card,.stack-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(24,34,59,.78),rgba(12,17,32,.85)); padding:24px; transform-style:preserve-3d; transition:border-color .3s,background .3s,box-shadow .3s; }
.principle-card:hover,.stack-card:hover,.project-card:hover { border-color:rgba(88,226,255,.32); box-shadow:0 25px 60px rgba(0,0,0,.2),0 0 35px rgba(88,226,255,.035); }
.principle-index { position:absolute; top:18px; right:20px; color:#586783; font:9px var(--mono); }
.principle-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--cyan); background:rgba(88,226,255,.09); font-size:20px; margin-bottom:22px; box-shadow:inset 0 0 0 1px rgba(88,226,255,.1); }
.principle-card h3,.stack-card h3 { font-size:15px; letter-spacing:-.03em; margin:0 0 8px; }
.principle-card p,.stack-card p { font-size:11px; color:var(--muted); line-height:1.85; margin:0; }
.principle-feature .principle-icon { color:var(--violet); background:rgba(167,139,250,.1); }
.card-edge { position:absolute; width:120px; height:120px; border-radius:50%; border:1px solid rgba(88,226,255,.08); right:-65px; bottom:-70px; box-shadow:0 0 0 18px rgba(88,226,255,.015),0 0 0 38px rgba(88,226,255,.01); }
.work-section { background:linear-gradient(180deg,rgba(13,18,34,.6),rgba(10,14,27,.8)); border-block:1px solid rgba(161,180,226,.08); }
.work-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.heading-aside { max-width:300px; color:var(--muted); font-size:12px; line-height:1.9; margin:0 0 7px; }
.project-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter-button { border:1px solid var(--line); background:rgba(255,255,255,.018); border-radius:100px; color:var(--muted); padding:9px 14px; font-size:10px; cursor:pointer; transition:all .2s; }
.filter-button span { color:var(--cyan); margin-left:8px; font-family:var(--mono); }
.filter-button:hover,.filter-button.active { background:rgba(88,226,255,.08); border-color:rgba(88,226,255,.35); color:var(--text); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.project-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(18,25,45,.9),rgba(12,17,31,.96)); transform-style:preserve-3d; transition:opacity .25s,transform .25s,border-color .3s,box-shadow .3s; }
.project-card.is-hidden { display:none; }
.project-art { height:240px; position:relative; overflow:hidden; display:grid; place-items:center; isolation:isolate; }
.project-wide .project-art { height:270px; }
.art-label { position:absolute; left:20px; bottom:17px; color:rgba(224,240,255,.6); font:8px var(--mono); letter-spacing:.14em; }
.art-ai { background:radial-gradient(ellipse at 50% 50%,#273e76 0%,#172143 36%,#10172c 70%); }
.art-grid { position:absolute; inset:-20%; opacity:.23; background-image:linear-gradient(rgba(88,226,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(88,226,255,.25) 1px,transparent 1px); background-size:28px 28px; transform:perspective(300px) rotateX(56deg) scale(1.4) translateY(25%); mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent); }
.ai-orb { width:115px; height:115px; border-radius:50%; position:relative; background:radial-gradient(circle at 30% 25%,#e8fcff 0%,#70e9ff 8%,#357bb9 25%,#343f9b 49%,#151a3b 72%); box-shadow:inset -14px -18px 30px rgba(0,0,0,.5),inset 8px 8px 20px rgba(255,255,255,.25),0 0 50px rgba(88,226,255,.24); animation:orbFloat 6s ease-in-out infinite; }
.ai-orb::before,.ai-orb::after { content:""; position:absolute; inset:-24px -44px; border:1px solid rgba(88,226,255,.52); border-radius:50%; transform:rotate(-28deg) scaleY(.42); }
.ai-orb::after { inset:-37px -28px; transform:rotate(55deg) scaleY(.4); border-color:rgba(167,139,250,.6); }
.ai-orb span { position:absolute; width:6px; height:6px; border-radius:50%; background:#d7fcff; box-shadow:0 0 14px #58e2ff; }.ai-orb span:nth-child(1){top:-14px;left:28px}.ai-orb span:nth-child(2){right:-27px;top:62px}.ai-orb span:nth-child(3){left:9px;bottom:-20px}
.art-code { position:absolute; right:35px; top:50px; color:rgba(88,226,255,.28); font:11px/1.8 var(--mono); transform:rotate(9deg); }
.art-iot { background:radial-gradient(ellipse at 50% 65%,#193d50,#0e1b2c 55%,#10172a); }
.iot-house { position:relative; width:105px; height:110px; filter:drop-shadow(0 0 25px rgba(88,226,255,.18)); transform:perspective(500px) rotateY(-13deg); }
.house-roof { position:absolute; top:0; left:7px; width:90px; height:66px; background:linear-gradient(140deg,#70efff,#286e9e); clip-path:polygon(50% 0,100% 55%,89% 65%,50% 24%,11% 65%,0 55%); }
.house-body { position:absolute; bottom:0; left:16px; width:74px; height:65px; border:1px solid #58e2ff; background:linear-gradient(145deg,rgba(58,135,167,.75),rgba(17,39,63,.9)); box-shadow:inset 0 0 20px rgba(88,226,255,.16); }
.window { position:absolute; width:16px; height:18px; top:13px; border:1px solid #a4f5ff; background:#5bdff7; box-shadow:0 0 12px rgba(88,226,255,.7); }.window:first-child{left:10px}.window:nth-child(2){right:10px}
.door { position:absolute; bottom:0; left:27px; width:18px; height:31px; border:1px solid #9cf3ff; background:rgba(4,20,37,.7); }
.iot-wave { position:absolute; width:190px; height:190px; border:1px solid rgba(88,226,255,.15); border-radius:50%; }.wave-1{transform:scaleY(.36) rotate(-25deg)}.wave-2{width:250px;height:250px;transform:scaleY(.3) rotate(28deg);border-color:rgba(88,226,255,.1)}
.art-scraper { background:radial-gradient(ellipse at 50% 50%,#2b2453,#15172d 58%,#101526); }
.terminal-window { width:min(76%,360px); border:1px solid rgba(167,139,250,.4); border-radius:10px; overflow:hidden; background:rgba(8,12,26,.88); box-shadow:0 20px 55px rgba(0,0,0,.3),0 0 35px rgba(167,139,250,.09); transform:perspective(700px) rotateY(8deg) rotateX(3deg); }
.terminal-bar { height:30px; display:flex; align-items:center; gap:5px; padding:0 11px; background:rgba(167,139,250,.1); border-bottom:1px solid rgba(167,139,250,.15); }.terminal-bar i{width:6px;height:6px;border-radius:50%;background:#a78bfa}.terminal-bar i:first-child{background:#ff8c9c}.terminal-bar i:nth-child(2){background:#ffc777}.terminal-bar span{font:8px var(--mono);color:#a4a8c6;margin-left:8px}
.terminal-line { display:flex; gap:8px; align-items:center; padding:7px 14px; color:#e6e4ff; font:9px var(--mono); }.terminal-line b,.success{color:var(--green)}.terminal-line.dim{color:#7f86a9}.terminal-block{height:5px;width:78%;background:linear-gradient(90deg,rgba(167,139,250,.65),rgba(167,139,250,.08));border-radius:4px}.terminal-block.short{width:35%;background:linear-gradient(90deg,rgba(88,226,255,.5),rgba(88,226,255,.05))}
.art-web3 { background:radial-gradient(ellipse at 50% 50%,#2b2458,#14172e 60%,#101526); }
.web3-network { width:80%; max-width:480px; height:210px; position:relative; }
.web3-network svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }.web3-network path{fill:none;stroke:rgba(167,139,250,.48);stroke-width:1.2;stroke-dasharray:4 5}
.net-node { position:absolute; width:12px;height:12px;border-radius:50%;background:#b8a4ff;box-shadow:0 0 22px rgba(167,139,250,.8);z-index:2}.n1{left:9%;top:47%}.n2{left:30%;top:13%;background:var(--cyan);box-shadow:0 0 22px rgba(88,226,255,.8)}.n3{left:51%;top:47%;width:17px;height:17px}.n4{right:19%;top:12%;background:var(--cyan);box-shadow:0 0 22px rgba(88,226,255,.8)}.n5{right:8%;top:52%;background:var(--amber);box-shadow:0 0 22px rgba(255,199,119,.8)}
.network-core { position:absolute; left:50%;top:50%;transform:translate(-50%,-50%);font:10px var(--mono);letter-spacing:.18em;color:#fff;text-shadow:0 0 20px #a78bfa; }
.project-info { padding:21px 22px 23px; }
.project-topline { display:flex; justify-content:space-between; gap:15px; color:var(--cyan); font:8px var(--mono); letter-spacing:.12em; }
.project-number { color:var(--dim); }
.project-info h3 { font-size:20px; letter-spacing:-.04em; margin:12px 0 8px; }
.project-info p { color:var(--muted); font-size:11px; line-height:1.9; margin:0; max-width:560px; }
.tag-row,.tech-cloud { display:flex; flex-wrap:wrap; gap:7px; }
.tag-row { margin-top:16px; }
.tag-row span,.tech-cloud span { padding:5px 9px; border:1px solid rgba(161,180,226,.13); border-radius:6px; background:rgba(255,255,255,.025); color:#b7c2da; font:8px var(--mono); }
.project-link { display:inline-flex; align-items:center; gap:13px; margin-top:19px; color:#f0f5ff; font-size:10px; font-weight:800; }
.project-link span { color:var(--cyan); transition:transform .2s; }.project-link:hover span{transform:translate(3px,-3px)}
.project-note { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:10px; margin:22px 0 0; }.project-note span{color:var(--amber)}
.section-description { color:var(--muted); font-size:12px; max-width:410px; line-height:1.9; margin-top:18px; }
.stack-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stack-card { min-height:230px; padding:27px; }
.stack-main { background:linear-gradient(135deg,rgba(23,45,67,.9),rgba(14,20,37,.92)); }
.stack-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; }
.stack-symbol { display:grid; place-items:center; width:38px;height:38px;border-radius:11px;background:rgba(88,226,255,.1);color:var(--cyan);font-size:19px; }
.stack-symbol.purple{background:rgba(167,139,250,.12);color:var(--violet)}.stack-symbol.orange{background:rgba(255,199,119,.1);color:var(--amber)}.stack-symbol.blue{background:rgba(100,159,255,.12);color:#83b6ff}
.stack-label { color:var(--dim); font:8px var(--mono); letter-spacing:.13em; }
.stack-card h3 { font-size:19px; margin-bottom:8px; }
.stack-card p { max-width:360px; font-size:11px; margin-bottom:19px; }
.tech-cloud { gap:7px; }
.tech-cloud span { font-size:9px; padding:6px 9px; }
.stack-decoration { position:absolute; right:18px; bottom:-25px; color:rgba(88,226,255,.045); font-size:100px; font-weight:800; letter-spacing:-.1em; pointer-events:none; }
.stack-cloud { overflow:hidden; }
.cloud-rings { position:absolute; right:-30px;bottom:-100px;width:230px;height:230px;border:1px solid rgba(100,159,255,.14);border-radius:50%;box-shadow:0 0 0 18px rgba(100,159,255,.025),0 0 0 40px rgba(100,159,255,.02),0 0 0 62px rgba(100,159,255,.015);pointer-events:none; }
.learning-banner { display:flex; align-items:center; gap:17px; border:1px solid var(--line); border-radius:13px; padding:20px 24px; margin-top:17px; background:rgba(255,255,255,.018); }
.learning-icon { display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(125,247,195,.08);color:var(--green);font-size:20px;flex-shrink:0; }
.learning-banner strong { font-size:12px; }.learning-banner p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.learning-mark { margin-left:auto; white-space:nowrap; font:8px var(--mono); letter-spacing:.12em; color:var(--green); }
.journey-section { border-block:1px solid rgba(161,180,226,.08); background:rgba(13,18,34,.42); }
.journey-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.journey-list { border-left:1px solid rgba(161,180,226,.18); padding-left:30px; }
.journey-item { position:relative; padding:0 0 30px; }
.journey-item:last-child { padding-bottom:0; }
.journey-dot { position:absolute; width:9px;height:9px;border-radius:50%;left:-35px;top:5px;background:var(--cyan);box-shadow:0 0 0 5px rgba(88,226,255,.09),0 0 18px rgba(88,226,255,.3); }
.journey-time { font:8px var(--mono); letter-spacing:.13em; color:var(--cyan); margin-bottom:9px; }
.journey-item h3 { font-size:15px; margin:0 0 7px; letter-spacing:-.02em; }
.journey-item p { font-size:11px; color:var(--muted); max-width:490px; line-height:1.9; margin:0; }
.contact-section { padding-top:100px; padding-bottom:100px; }
.contact-card { text-align:center; position:relative; overflow:hidden; padding:75px 30px 38px; border:1px solid rgba(88,226,255,.2); border-radius:24px; background:radial-gradient(ellipse at 50% 0%,rgba(88,226,255,.1),transparent 46%),linear-gradient(145deg,rgba(19,29,51,.95),rgba(10,15,29,.98)); box-shadow:var(--shadow); isolation:isolate; }
.contact-card .section-kicker { justify-content:center; }
.contact-card h2 { font-size:clamp(34px,4.7vw,58px); }
.contact-card>p { color:var(--muted); max-width:560px; margin:20px auto 0; font-size:12px; line-height:1.9; }
.contact-actions { justify-content:center; margin-top:28px; }
.contact-links { display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin-top:48px; padding-top:25px; border-top:1px solid var(--line); color:var(--muted); font:9px var(--mono); }
.contact-links a:hover { color:var(--cyan); }.contact-links>span { width:3px;height:3px;border-radius:50%;background:var(--dim); }
.contact-orb { position:absolute; width:230px;height:230px;border-radius:50%;z-index:-1;filter:blur(1px);opacity:.18;pointer-events:none; }
.orb-left { left:-130px;top:30px;background:radial-gradient(circle,var(--cyan),transparent 68%); }.orb-right{right:-130px;bottom:-100px;background:radial-gradient(circle,var(--violet),transparent 68%)}
.footer { display:flex; align-items:center; gap:22px; padding-top:23px; padding-bottom:30px; border-top:1px solid rgba(161,180,226,.1); color:var(--dim); font-size:9px; }
.footer p { margin:0; }.footer>span { margin-left:auto; font-family:var(--mono); }.footer-brand .brand-mark{font-size:18px}.back-top { display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;color:var(--cyan);font-size:17px;transition:transform .2s,border-color .2s; }.back-top:hover{transform:translateY(-3px);border-color:var(--cyan)}
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.reveal.in { opacity:1; transform:translateY(0); }
@keyframes spinA { to { transform:rotateX(75deg) rotateY(20deg) rotateZ(360deg); } }
@keyframes spinB { to { transform:rotateY(72deg) rotateX(22deg) rotateZ(360deg); } }
@keyframes cubeFloat { 0%,100%{transform:rotateX(-20deg) rotateY(35deg) translateY(0)}50%{transform:rotateX(-15deg) rotateY(55deg) translateY(-10px)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)} }
@keyframes orbFloat { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)} }
@keyframes marquee { to { transform:translateX(-28%); } }
@media (hover:hover) and (pointer:fine) { .cursor-glow { opacity:1; } }
@media (max-width:1000px) {
  .topbar { width:calc(100% - 40px); gap:20px; }.availability { display:none; }
  .hero { grid-template-columns:1fr 1fr; }.hero-title{font-size:clamp(47px,6.4vw,68px)}.hero-visual{transform:scale(.88);margin-inline:-20px}
  .about-grid,.journey-grid{gap:42px}.section-shell{width:calc(100% - 48px)}
}
@media (max-width:760px) {
  html { scroll-padding-top:70px; }
  .topbar { height:72px; width:calc(100% - 36px); }
  .brand-copy { font-size:10px; }.menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.025);cursor:pointer; }
  .menu-toggle span { width:16px;height:1px;background:var(--text);margin-inline:auto;transition:transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }
  .nav-links { position:absolute; top:63px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px; border:1px solid var(--line); border-radius:13px; background:rgba(10,15,29,.97); backdrop-filter:blur(20px); box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }.nav-link { padding:12px; }.nav-link::after{display:none}.nav-link.active{color:var(--cyan)}
  .section-shell { width:calc(100% - 38px); }.hero { min-height:auto; padding:75px 0 80px; grid-template-columns:1fr; gap:5px; }
  .hero-copy { padding-bottom:0; }.hero-title { font-size:clamp(49px,12vw,75px); }.hero-lead { font-size:13px; }
  .hero-meta { margin-top:34px; gap:18px; }.hero-visual { min-height:410px; margin:0; transform:none; }.core-scene{transform:scale(.85) rotateX(-12deg) rotateY(-22deg)}.visual-orbit{width:320px;height:320px}.orbit-three{width:370px;height:370px}.orbit-two{width:280px;height:280px}.visual-glow{width:300px;height:300px}
  .chip-top{left:4%;top:40px}.chip-left{left:0;bottom:75px}.chip-right{right:0;top:43%}.visual-caption{bottom:12px}.scroll-cue{bottom:-24px}
  .section { padding:90px 0; }.section-heading { margin-bottom:35px; }.section-heading h2,.contact-card h2{font-size:clamp(36px,9vw,52px)}
  .about-grid,.journey-grid { grid-template-columns:1fr; gap:35px; }.about-copy .large-copy{font-size:18px}
  .work-heading { display:block; }.heading-aside{margin-top:20px}.project-grid{grid-template-columns:1fr}.project-wide .project-art,.project-art{height:230px}
  .stack-layout{grid-template-columns:1fr}.stack-card{min-height:205px}.learning-banner{align-items:flex-start;padding:17px}.learning-mark{display:none}
  .journey-grid .section-heading{margin-bottom:0}.contact-section{padding-top:70px;padding-bottom:70px}.contact-card{padding:55px 20px 25px}.contact-links{gap:12px;margin-top:35px}
  .footer{gap:12px;flex-wrap:wrap}.footer p{flex:1}.footer>span{margin-left:0;width:calc(100% - 48px);order:4}
}
@media (max-width:420px) {
  .section-shell{width:calc(100% - 30px)}.topbar{width:calc(100% - 30px)}
  .hero-title{font-size:47px}.hero-meta{gap:12px}.meta-label{font-size:7px}.hero-visual{min-height:350px;transform:scale(.9);margin-inline:-15px}
  .principles-grid{gap:9px}.principle-card{padding:17px}.principle-card h3{font-size:13px}.principle-card p{font-size:10px}.principle-icon{margin-bottom:16px}
  .project-info{padding:18px}.project-info h3{font-size:18px}.project-art,.project-wide .project-art{height:210px}
  .contact-actions{flex-direction:column}.contact-actions .button{width:100%}.contact-links{font-size:8px}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .reveal { opacity:1; transform:none; }
  #starfield { display:none; }
}