@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --ink: #f4f2ed;
  --muted: #9a9aa2;
  --line: rgba(244, 242, 237, .15);
  --paper: #090a0f;
  --amber: #ffb25c;
  --violet: #b397ff;
  --blue: #88c9ff;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .24; z-index: 10; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: .11em; font-size: 13px; }
.brand-mark { width: 24px; height: 24px; display: inline-block; position: relative; transform: rotate(30deg); }
.brand-mark i { position: absolute; inset: 3px; border: 1px solid var(--ink); border-radius: 50%; }
.brand-mark i:nth-child(2) { transform: rotate(60deg) scale(.72); border-color: var(--amber); }
.brand-mark i:nth-child(3) { transform: rotate(-60deg) scale(.44); border-color: var(--violet); }
.header-status, .header-link, .stage-label, .eyebrow, .card-top, .card-footer, .fidget-readout { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.header-status { color: var(--muted); justify-self: center; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: #8dff9d; border-radius: 50%; box-shadow: 0 0 12px #8dff9d; }
.header-link { justify-self: end; transition: color .25s ease; }
.header-link:hover, .contact-email:hover { color: var(--amber); }
.hero { min-height: 690px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 32px; position: relative; }
.hero-copy { padding: 76px 0 92px; position: relative; z-index: 1; }
.eyebrow { color: var(--muted); display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.eyebrow span { color: var(--amber); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-size: clamp(3.8rem, 7vw, 7.7rem); letter-spacing: -.09em; line-height: .82; font-weight: 500; margin-bottom: 35px; }
h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.1em; color: var(--amber); }
.hero-tagline { color: var(--amber); font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; margin: -14px 0 24px; }
.hero-lede { max-width: 335px; color: var(--muted); line-height: 1.7; font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 21px; margin-top: 43px; }
.button { border: 1px solid var(--line); border-radius: 99px; padding: 16px 21px; display: inline-flex; gap: 29px; align-items: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; transition: transform .25s ease, border-color .25s ease, background .25s ease; cursor: pointer; }
.button:hover { transform: translateY(-3px); border-color: rgba(244,242,237,.45); }
.button-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button-primary:hover { background: var(--amber); border-color: var(--amber); }
.button-secondary:hover { background: var(--violet); color: var(--paper); border-color: var(--violet); }
.scroll-note { color: var(--muted); font: 10px/1.45 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.hero-stage { height: 590px; position: relative; perspective: 1000px; margin-right: -30px; }
.stage-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(125, 92, 214, .21), transparent 67%); filter: blur(20px); }
.hero-object { position: absolute; width: min(520px, 82%); aspect-ratio: 1; left: 50%; top: 49%; transform: translate(-50%, -50%); z-index: 2; will-change: transform; transition: transform .18s ease-out; }
.hero-object img { width: 100%; height: 100%; object-fit: cover; border-radius: 45% 55% 55% 45%; mix-blend-mode: screen; filter: saturate(.88) contrast(1.05); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(179,151,255,.34); border-radius: 50%; transform-style: preserve-3d; will-change: transform; z-index: 3; pointer-events: none; }
.orbit-one { width: 470px; height: 170px; transform: translate(-50%, -50%) rotate(28deg) rotateX(62deg); animation: orbit-one 12s linear infinite; }
.orbit-two { width: 350px; height: 160px; border-color: rgba(255,178,92,.42); transform: translate(-50%, -50%) rotate(-32deg) rotateX(65deg); animation: orbit-two 15s linear infinite; }
.orbit-three { width: 250px; height: 410px; border-color: rgba(136,201,255,.25); transform: translate(-50%, -50%) rotate(68deg) rotateX(66deg); animation: orbit-three 18s linear infinite; }
@keyframes orbit-one { to { transform: translate(-50%, -50%) rotate(388deg) rotateX(62deg); } }
@keyframes orbit-two { to { transform: translate(-50%, -50%) rotate(-392deg) rotateX(65deg); } }
@keyframes orbit-three { to { transform: translate(-50%, -50%) rotate(428deg) rotateX(66deg); } }
.stage-label { position: absolute; z-index: 4; color: var(--muted); }
.label-top { top: 43px; right: 7%; }
.label-bottom { bottom: 48px; left: 12%; }
.label-bottom span { font-size: 17px; color: var(--amber); margin-left: 10px; }
.spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; z-index: 4; will-change: transform; transition: transform .18s ease-out; }
.spark-one { background: var(--amber); top: 26%; left: 15%; box-shadow: 0 0 20px var(--amber); }
.spark-two { background: var(--violet); top: 21%; right: 17%; box-shadow: 0 0 20px var(--violet); }
.spark-three { width: 5px; height: 5px; background: var(--blue); right: 22%; bottom: 20%; box-shadow: 0 0 18px var(--blue); }
.ticker { overflow: hidden; border-block: 1px solid var(--line); padding: 15px 0; white-space: nowrap; }
.ticker-track { display: flex; width: max-content; gap: 31px; align-items: center; animation: ticker 28s linear infinite; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.ticker-track b { color: var(--amber); font-size: 15px; font-weight: 400; }
@keyframes ticker { to { transform: translateX(-50%); } }
.lab { padding: 166px 0 150px; }
.section-intro { display: grid; grid-template-columns: 1fr 1.05fr; column-gap: 100px; align-items: end; margin-bottom: 68px; }
.section-intro .eyebrow { grid-column: 1 / -1; }
.section-intro h2 { font-size: clamp(3.5rem, 6.5vw, 6.5rem); margin-bottom: 0; }
.section-intro > p:last-child { color: var(--muted); max-width: 250px; line-height: 1.6; font-size: 14px; margin-bottom: 5px; }
.experiment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.experiment-card { min-height: 422px; padding: 19px; position: relative; overflow: hidden; border-radius: 2px; display: flex; flex-direction: column; will-change: transform; transition: transform .18s ease-out; }
.card-amber { background: #a8672d; background: radial-gradient(circle at 70% 23%, #df9a52, #a25d2a 53%, #56351e); }
.card-violet { background: #7163a7; background: radial-gradient(circle at 50% 43%, #b39bff, #655899 58%, #332f5a); }
.card-blue { background: #356d93; background: radial-gradient(circle at 18% 18%, #83c7ec, #316883 50%, #172f48); }
.card-top, .card-footer { display: flex; justify-content: space-between; position: relative; z-index: 2; }
.card-content { margin-top: auto; position: relative; z-index: 2; max-width: 250px; }
.card-content h3 { font-size: 26px; letter-spacing: -.07em; font-weight: 500; margin-bottom: 9px; }
.card-content p { color: rgba(255,255,255,.75); line-height: 1.5; font-size: 13px; margin: 0; }
.card-footer { margin-top: 32px; align-items: center; }
.tiny-button { width: 32px; height: 32px; background: rgba(9,10,15,.18); color: var(--ink); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.tiny-button:hover { transform: rotate(45deg); background: rgba(255,255,255,.2); }
.card-orb { position: absolute; width: 195px; height: 195px; top: 78px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd49e, #ed8535 38%, #9d4319 64%, transparent 65%); box-shadow: 0 0 50px rgba(255,190,103,.5); animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.1); filter: hue-rotate(9deg); } }
.card-prism { position: absolute; width: 220px; height: 190px; left: 50%; top: 72px; transform: translateX(-50%) rotate(24deg); transform-style: preserve-3d; animation: prism 9s ease-in-out infinite; }
.card-prism span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.6); background: rgba(222,209,255,.17); clip-path: polygon(50% 0, 100% 27%, 82% 100%, 18% 100%, 0 27%); }
.card-prism span:nth-child(2) { transform: translateZ(35px) rotateY(60deg); background: rgba(255,255,255,.09); }
.card-prism span:nth-child(3) { transform: translateZ(-35px) rotateY(-60deg); background: rgba(255,255,255,.12); }
@keyframes prism { 50% { transform: translateX(-50%) rotate(204deg) scale(.9); } }
.card-wave { position: absolute; inset: 80px 38px auto; height: 190px; display: flex; gap: 8px; align-items: center; justify-content: center; transform: rotate(-22deg); }
.card-wave span { display: block; width: 21px; border-radius: 99px; background: rgba(204,239,255,.72); box-shadow: 0 0 18px rgba(180,227,255,.4); animation: wave 1.7s ease-in-out infinite; }
.card-wave span:nth-child(1) { height: 69px; animation-delay: -.3s; }.card-wave span:nth-child(2) { height: 146px; animation-delay: -.5s; }.card-wave span:nth-child(3) { height: 188px; animation-delay: -.1s; }.card-wave span:nth-child(4) { height: 108px; animation-delay: -.7s; }
@keyframes wave { 50% { transform: scaleY(.5); } }
.fidget-section { border-top: 1px solid var(--line); padding: 118px 0 154px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: center; }
.fidget-copy h2 { font-size: clamp(3.1rem, 5vw, 5.4rem); margin-bottom: 27px; }
.fidget-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; max-width: 230px; margin-bottom: 29px; font-size: 14px; }
.fidget-stage { min-height: 480px; position: relative; display: grid; place-items: center; will-change: transform; transition: transform .18s ease-out; }
.fidget-backdrop { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(162,122,255,.24), rgba(255,172,85,.08) 40%, transparent 68%); filter: blur(9px); }
.fidget-object { width: min(500px, 91%); aspect-ratio: 1; border: 0; padding: 0; background: transparent; cursor: pointer; position: relative; z-index: 2; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.fidget-object:hover { transform: scale(1.035) rotate(-2deg); }
.fidget-object:active, .fidget-object.pressed { transform: scale(.94) rotate(2deg); }
.fidget-object img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; mix-blend-mode: screen; }
.fidget-pulse { position: absolute; width: 10px; height: 10px; border-radius: 50%; top: 40%; left: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(136,201,255,.55); opacity: 0; }
.fidget-object.pressed .fidget-pulse { animation: pulse .65s ease-out; }
@keyframes pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(136,201,255,.6); } 100% { opacity: 0; box-shadow: 0 0 0 75px rgba(136,201,255,0); } }
.fidget-ring { position: absolute; border: 1px solid rgba(179,151,255,.35); border-radius: 50%; z-index: 1; }
.ring-left { width: 72%; height: 28%; transform: rotate(24deg); animation: ring-left 8s linear infinite; }.ring-right { width: 35%; height: 71%; transform: rotate(-33deg); border-color: rgba(255,178,92,.4); animation: ring-right 11s linear infinite; }
@keyframes ring-left { to { transform: rotate(384deg); } } @keyframes ring-right { to { transform: rotate(-393deg); } }
.fidget-readout { position: absolute; right: 3%; bottom: 10%; display: flex; flex-direction: column; gap: 5px; color: var(--muted); }.fidget-readout span { color: var(--amber); font-size: 22px; letter-spacing: .02em; }.fidget-readout small { font: inherit; }
.contact { padding: 98px 0 155px; border-top: 1px solid var(--line); }.contact-line { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.contact h2 { font-size: clamp(3.8rem, 8vw, 8rem); margin-bottom: 0; }.contact-note { color: var(--muted); font: 13px var(--mono); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 9px; }.contact-note span { color: var(--amber); padding-left: 14px; }
.site-footer { border-top: 1px solid var(--line); padding: 21px 0 27px; color: var(--muted); display: flex; justify-content: space-between; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.site-footer span:nth-child(2) { color: var(--amber); }
.cursor-glow { position: fixed; width: 180px; height: 180px; pointer-events: none; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(179,151,255,.1), transparent 68%); transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s ease; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 12px 17px; background: var(--ink); color: var(--paper); border-radius: 99px; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 20; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 800px) { .shell { width: min(100% - 38px, 600px); }.site-header { grid-template-columns: 1fr auto; }.header-status { display: none; }.hero { min-height: auto; grid-template-columns: 1fr; }.hero-copy { padding: 90px 0 30px; }.hero-stage { height: 430px; margin: 0 -20px; }.orbit-one { width: 350px; }.orbit-two { width: 270px; }.orbit-three { height: 300px; }.section-intro { grid-template-columns: 1fr; gap: 25px; margin-bottom: 45px; }.section-intro > p:last-child { max-width: 310px; }.experiment-grid { grid-template-columns: 1fr; }.experiment-card { min-height: 360px; }.lab { padding: 120px 0 110px; }.fidget-section { grid-template-columns: 1fr; gap: 20px; padding: 90px 0 110px; }.fidget-stage { min-height: 390px; margin-top: -15px; }.contact { padding: 80px 0 110px; }.contact-line { display: block; }.contact-note { display: inline-block; margin-top: 35px; }.site-footer { gap: 15px; flex-wrap: wrap; }.site-footer span:nth-child(2) { order: 3; width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; } }