/* Reference-matched luminous A stage. */
:root{--bg:#020610;--surface:#051020;--surface2:#08152c;--border:#102d48}
html[data-theme=light]{--bg:#f4faff;--surface:#fff;--surface2:#eaf3ff;--border:#cde4f4}
.header-inner{padding-block:13px}.brand{font-family:'Arial Black','Space Grotesk',sans-serif;font-size:25px;font-weight:900;letter-spacing:-1.7px;gap:0;transform:scaleX(1.08);transform-origin:left center}.brand .mark{width:44px;height:41px;margin-right:-3px;filter:drop-shadow(0 0 5px #00cfff66)}.brand b{font-size:1.15em}
.button{background:linear-gradient(115deg,#08e5ec,#0084ff 65%,#143fff);border:1px solid #17d5ff;box-shadow:inset 0 0 9px #51efff66,0 0 19px #008cff44;border-radius:11px}.button.secondary{background:#071127;box-shadow:inset 0 0 10px #0175d91a;border-color:#194d78;color:#edf6ff}
.hero{grid-template-columns:.83fr 1.17fr;gap:15px;min-height:0;padding:37px 0 10px;overflow:clip}.hero-copy{position:relative;z-index:4;padding:15px 0 30px}.hero h1{font-size:clamp(48px,4.7vw,66px);line-height:1.02;letter-spacing:-2.7px;max-width:480px}.hero h1 .gradient{background-image:linear-gradient(95deg,#b7fbff,#50d9f6 46%,#0098ff)}.hero-copy>.eyebrow{border:1px solid #245175;border-radius:20px;padding:5px 13px;font-size:9px;letter-spacing:1px;margin-bottom:24px;color:#c2eaff;background:#041020}.hero-copy>p{font-size:13px;line-height:1.6;margin:20px 0;max-width:410px;color:#c3cde2}.hero-signature{margin-top:22px}
.hero-art{aspect-ratio:1.24;width:100%;max-width:680px;justify-self:end;perspective:1000px;background:radial-gradient(ellipse at 54% 62%,#0055ff40,transparent 48%),radial-gradient(ellipse at 32% 35%,#7a0fff25,transparent 40%)}.hero-mark{width:57%;left:23%;top:8%;filter:drop-shadow(0 0 7px #00b7ff77) drop-shadow(0 10px 16px #003cff88);animation:mark-levitate 5s ease-in-out infinite;z-index:4}
.orbit{inset:10% 8% 13%;border-color:#005bff44;transform:rotate(-25deg);box-shadow:0 0 16px #006dff16;animation:hud-turn 24s linear infinite}.orbit-two{inset:19% 16% 20%;border:1px solid #0875e266;animation-direction:reverse;animation-duration:32s}.orbit-three{inset:5% 3% 10%;border-color:#003a761a;border-left-color:#6417ce88;border-right-color:#006bb477;animation-duration:38s}.orbit:after{width:5px;height:5px;background:#51eaff;box-shadow:0 0 10px 3px #008cff}
.hero-art:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 24% 24%,#bc28ff 0 1px,transparent 2px),radial-gradient(circle at 80% 15%,#00daff 0 1px,transparent 2px),radial-gradient(circle at 75% 45%,#667aff 0 1px,transparent 2px);background-size:139px 117px,163px 151px,107px 157px;mask-image:radial-gradient(ellipse,#000,transparent 73%);animation:particle-drift 10s ease-in-out infinite alternate;pointer-events:none}
.platform{z-index:2;left:19%;bottom:17%;width:64%;height:17%;border-radius:50%;background:radial-gradient(ellipse at 50% 20%,#2043d9 0,#062c89 45%,#071d55 68%,#02baf9 71%,#061947 73%);border:1px solid #2889ff;box-shadow:0 7px 0 #040d35,0 9px 0 #163fff,0 18px 0 #091344,0 20px 0 #087feb,0 25px 12px #0039ff44,0 0 35px #2a17ff66,inset 0 0 15px #0033ff}.platform:before{content:'';position:absolute;inset:-38% -14%;border:2px solid transparent;border-left-color:#bf2bff;border-bottom-color:#4b22ff;border-right-color:#098dff;border-radius:50%;filter:drop-shadow(0 0 7px #652aff);animation:stage-pulse 3s ease-in-out infinite}.platform:after{content:'';position:absolute;inset:-6% -28% -60%;border-radius:50%;border:1px solid #3839ff88;box-shadow:0 0 15px #242dff22,inset 0 -3px 10px #421cff33}
.float-label{font-size:12px!important;font-weight:500;padding:9px 14px!important;border-radius:8px;color:#e0faff;background:linear-gradient(125deg,#093da8dd,#09244ce8);border:1px solid #137de8;box-shadow:inset 0 0 13px #0576ff55,0 0 13px #006dff44;backdrop-filter:blur(8px);animation:chip-hover 5s ease-in-out infinite;z-index:5}.fl-one{top:9%;left:26%;background:linear-gradient(115deg,#7b20df,#301075);border-color:#b359fc;color:white;box-shadow:0 0 17px #961aff77,inset 0 0 10px #a256ff55}.fl-two{top:13%;right:0;background:linear-gradient(115deg,#00434b,#031c2b);border-color:#07e4da;color:#c5ffff;animation-delay:-1s}.fl-three{top:29%;left:8%;color:#d8faff;background:linear-gradient(115deg,#005983,#072359);border-color:#3bbbff;box-shadow:0 0 18px #a428e466,inset 0 0 10px #0082ffaa;animation-delay:-2s}.fl-four{top:37%;right:0;background:linear-gradient(110deg,#063aab,#062775);border-color:#4294ff;color:#e5f4ff;animation-delay:-3s}.fl-five{bottom:39%;left:11%;background:linear-gradient(110deg,#07516a,#031d47);border-color:#1387a0;animation-delay:-4s}.fl-six{bottom:27%;right:0;background:linear-gradient(110deg,#4531d4,#26156e);border-color:#9c6aff;color:#fff;box-shadow:0 0 17px #6c29ff66;animation-delay:-2s}.art-stars{z-index:3;top:13%;right:23%;text-shadow:0 0 16px #00baff;animation:stage-pulse 3s ease-in-out infinite}.art-caption{bottom:5%;font-size:8px;color:#90b6ff;letter-spacing:3px}
.energy-ribbon{position:absolute;z-index:1;top:22%;left:5%;width:88%;height:47%;border-radius:50%;border:2px solid transparent;border-top-color:#9545ff;border-left-color:#dc52ed;transform:rotate(-22deg);filter:drop-shadow(0 0 5px #c024ff) drop-shadow(0 0 11px #9826ff);animation:ribbon-breathe 6s ease-in-out infinite}.energy-ribbon.second{top:32%;left:14%;width:84%;height:34%;border-color:transparent;border-right-color:#006eff;border-bottom-color:#1579ff;transform:rotate(-25deg);filter:drop-shadow(0 0 9px #0055ff);animation-delay:-3s}.stage-chip{position:absolute;z-index:6;bottom:18%;left:47%;padding:5px 15px;border:1px solid #367aff;border-radius:7px;background:linear-gradient(120deg,#4035ff,#0063fa);box-shadow:0 0 17px #244cff;color:#fff;font-size:10px;transform:rotate(-4deg)}
.contact-strip{border:0;padding:13px 0 0;display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:12px}.contact-strip>a,.contact-strip>span{display:flex;align-items:center;padding:16px 12px;border:1px solid #103258;border-radius:10px;background:linear-gradient(140deg,#061a30,#030914);font-size:10px;color:#d5e6ff;box-shadow:inset 0 0 16px #0064ff0d}.contact-strip a:last-child{color:#cce7ff}.contact-strip a>span,.contact-strip b{font-size:18px;line-height:1}.section{padding-top:42px}.section-heading .eyebrow{display:none}.section-heading{margin-bottom:22px}.section-heading h2{font-size:29px}.project-card{border-color:#194a72;background:linear-gradient(125deg,#071a2c,#030a18);box-shadow:inset 0 0 14px #0b366120}.project-body{padding:19px}.project-body h3{font-size:23px}.mockup{margin:9px 9px 0}.project-body .text-link{background:linear-gradient(110deg,#0731ff,#039bff);width:auto;padding:7px 18px;border:1px solid #438aff;border-radius:8px;color:#fff;box-shadow:0 0 10px #063fff44}
html[data-theme=light] .hero-copy>p{color:var(--muted)}html[data-theme=light] .contact-strip>a,html[data-theme=light] .contact-strip>span,html[data-theme=light] .project-card{background:var(--surface);color:var(--text);border-color:var(--border)}
@keyframes mark-levitate{0%,100%{transform:translateY(0) rotateY(-5deg) rotateZ(-1deg)}50%{transform:translateY(-13px) rotateY(5deg) rotateZ(1deg)}}@keyframes hud-turn{to{transform:rotate(335deg)}}@keyframes chip-hover{50%{translate:0 -7px}}@keyframes stage-pulse{50%{opacity:.6;filter:drop-shadow(0 0 15px #5937ff)}}@keyframes ribbon-breathe{50%{transform:rotate(-15deg) translateY(-7px);opacity:.55}}@keyframes particle-drift{to{translate:0 -12px;opacity:.5}}
@media(max-width:1100px){.hero h1{font-size:53px}.hero-copy>p{font-size:12px}.float-label{font-size:10px!important;padding:7px 10px!important}.contact-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hero{grid-template-columns:1fr;padding-top:27px}.hero-copy{padding-bottom:0}.hero h1{font-size:55px}.hero-art{max-width:440px;justify-self:center;margin:0;aspect-ratio:1.1}.hero-copy>.eyebrow{font-size:8px;margin-bottom:19px}.hero-signature{margin-top:18px}.float-label{font-size:9px!important;padding:7px 9px!important}.contact-strip{gap:8px}.contact-strip>a,.contact-strip>span{font-size:9px;padding:12px 8px}.contact-strip a:last-child{display:flex}.stage-chip{font-size:8px}.section-heading h2{font-size:26px}.brand{font-size:21px}.brand .mark{width:36px;height:34px}}
@media(prefers-reduced-motion:reduce){.hero-art *,.hero-art:before{animation:none!important}}
/* Original reference pixels, displayed through CSS viewports without redrawing. */
.reference-a{display:inline-block;position:relative;aspect-ratio:1;overflow:hidden;background-image:url('/assets/aendrox-reference.png');background-repeat:no-repeat;background-size:368.5714% 397.1429%;background-position:72.695% 20.1923%;clip-path:polygon(4% 88%,14% 72%,19% 58%,29% 49%,33% 56%,36% 42%,46% 32%,49% 39%,54% 28%,66% 19%,60% 19%,82% 0%,82% 34%,75% 27%,67% 44%,98% 94%,67% 94%,56% 75%,45% 94%,0% 94%)}
.reference-wordmark{display:inline-block;width:164px;height:46px;flex-shrink:0;background-image:url('/assets/aendrox-reference.png');background-repeat:no-repeat;background-size:774px 834px;background-position:-28px -16px;overflow:hidden}
.brand{transform:none;gap:0}.brand .reference-wordmark{width:164px;height:46px}.hero-art .hero-mark.reference-a{position:absolute;width:57%;height:auto;top:8%;left:23%;animation:reference-a-rotation 10s linear infinite;transform-origin:50% 60%;filter:drop-shadow(0 0 12px #007fff);will-change:transform}
.profile-card .reference-a{width:200px;height:200px}.intro-orbit .reference-a{width:220px;height:220px}.chat-head .reference-a{width:40px;height:40px;flex-shrink:0}#chat-toggle .reference-a{width:28px;height:28px}.reference-a.mark{width:40px;height:40px}.wordmark.reference-wordmark{font-size:0;width:246px;height:69px;background-size:1161px 1251px;background-position:-42px -24px}
@keyframes reference-a-rotation{0%{transform:perspective(900px) rotateY(0deg) translateY(0)}25%{transform:perspective(900px) rotateY(90deg) translateY(-8px)}50%{transform:perspective(900px) rotateY(180deg) translateY(0)}75%{transform:perspective(900px) rotateY(270deg) translateY(-8px)}100%{transform:perspective(900px) rotateY(360deg) translateY(0)}}
@media(max-width:640px){.brand .reference-wordmark{width:131.2px;height:36.8px;background-size:619.2px 667.2px;background-position:-22.4px -12.8px}.intro-orbit .reference-a{width:175px;height:175px}}
@media(prefers-reduced-motion:reduce){.hero-art .hero-mark.reference-a{animation:none!important}}