:root {
  color-scheme: dark;
  --bg: #06080b;
  --surface: #0f141b;
  --text: #f2f5f8;
  --muted: #aab4c0;
  --accent: #ff7a1a;
  --amber: #ffc46b;
  --copper: #e0a067;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body.has-cursor, body.has-cursor a, body.has-cursor .interactive { cursor: none; }

.scene, .scene__canvas, .scene__grid, .scene__scan, .scene__vignette {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.scene {
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 54%, #17130f 0%, #0b0d12 47%, #06080b 100%);
}
.scene::before, .scene::after { position: absolute; inset: -30%; content: ""; pointer-events: none; }
.scene::before {
  background: conic-gradient(from 10deg at 50% 50%, transparent 0deg, rgba(255, 122, 26, .1) 45deg, transparent 90deg, transparent 190deg, rgba(255, 196, 107, .055) 245deg, transparent 290deg);
  filter: blur(80px);
  animation: ambient-rotate 28s linear infinite;
}
.scene::after {
  background: radial-gradient(circle at 50% 48%, rgba(255, 122, 26, .065), transparent 31%);
  animation: ambient-breathe 7s ease-in-out infinite;
}
.scene__canvas { opacity: .97; }
.scene__glow {
  position: absolute;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(88px);
  opacity: .14;
  pointer-events: none;
  will-change: transform;
}
.scene__glow--left { left: -22%; top: -40%; background: var(--accent); animation: glow-left 18s ease-in-out infinite alternate; }
.scene__glow--right { right: -26%; bottom: -46%; background: var(--amber); animation: glow-right 22s ease-in-out infinite alternate; }
.scene__grid {
  background-image: linear-gradient(rgba(255, 255, 255, .043) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .043) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse at 50% 53%, #000 8%, transparent 79%);
  opacity: .46;
  animation: grid-breathe 9s ease-in-out infinite;
}
.scene__scan {
  height: 38%;
  top: -38%;
  background: linear-gradient(to bottom, transparent, rgba(255, 196, 107, .028) 50%, rgba(255, 196, 107, .065) 51%, transparent 52%);
  mix-blend-mode: screen;
  animation: scan-pass 13s linear infinite;
}
.scene__vignette { background: radial-gradient(ellipse at 50% 46%, transparent 13%, rgba(0, 0, 0, .55) 100%); }

.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.hero {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(2rem);
}
.interactive { touch-action: manipulation; }

.mark-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(170px, 19vw, 242px);
  aspect-ratio: 1;
  transform: perspective(850px) translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  animation: mark-arrive 1.2s var(--ease-out) both;
}
.mark {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 25px rgba(255, 122, 26, .28)) drop-shadow(0 0 58px rgba(255, 122, 26, .12));
  transition: filter .4s var(--ease-out);
}
.mark-wrap:hover .mark, .mark-wrap.is-energized .mark {
  filter: drop-shadow(0 0 32px rgba(255, 122, 26, .58)) drop-shadow(0 0 85px rgba(255, 122, 26, .3));
}
.mark__ambient { opacity: .58; animation: ambient-breathe 4.2s ease-in-out infinite; }
.mark__path { stroke-dasharray: 530; stroke-dashoffset: 530; animation: mark-draw 1.8s var(--ease-out) .25s forwards; }
.mark__energy {
  stroke-dasharray: 30 510;
  stroke-dashoffset: 530;
  opacity: .88;
  filter: drop-shadow(0 0 8px #ffc46b);
  animation: mark-current 3.4s linear 1.7s infinite;
}
.mark__spark {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 8px #ff7a1a);
  animation: spark-breathe 2.6s ease-in-out infinite;
}
.mark-wrap__halo {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 122, 26, .14) 66deg, transparent 116deg, rgba(255, 196, 107, .085) 230deg, transparent 288deg);
  filter: blur(24px);
  opacity: .7;
  animation: ambient-rotate 19s linear infinite;
}
.mark-wrap__orbit {
  position: absolute;
  inset: -8%;
  border: 1px solid rgba(255, 122, 26, .19);
  border-radius: 50%;
  box-shadow: inset 0 0 24px rgba(255, 122, 26, .025);
  animation: orbit 18s linear infinite;
}
.mark-wrap__orbit::after {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px 4px rgba(255, 196, 107, .28);
  content: "";
}
.mark-wrap__orbit--two {
  inset: -20%;
  border-color: rgba(255, 255, 255, .07);
  border-style: dashed;
  animation-duration: 34s;
  animation-direction: reverse;
}
.mark-wrap__orbit--two::after { width: 3px; height: 3px; background: var(--accent); }
.mark-wrap.is-energized .mark-wrap__orbit--one { border-color: rgba(255, 196, 107, .58); box-shadow: 0 0 28px rgba(255, 122, 26, .2); }

.wordmark {
  position: relative;
  margin: 1.5rem 0 0;
  font: 700 clamp(3.6rem, 7.6vw, 6.6rem)/1 "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.065em;
  transform: perspective(850px) translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
  will-change: transform;
  animation: text-arrive 1.1s var(--ease-out) .38s both;
}
.wordmark span { display: inline-block; }
.wordmark__accent {
  color: var(--accent);
  background: linear-gradient(105deg, #ff7a1a 4%, #ff8b28 35%, #ffc46b 51%, #ff7a1a 72%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wordmark-shine 7s ease-in-out 1.7s infinite;
}
.wordmark:hover, .wordmark.is-energized { text-shadow: 0 0 35px rgba(255, 122, 26, .19); }

.tagline {
  position: relative;
  margin: 2.05rem 0 0;
  color: var(--muted);
  font: 400 clamp(1rem, 1.55vw, 1.3rem)/1.55 Manrope, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .01em;
  transform: translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0);
  will-change: transform;
}
.tagline::after {
  display: block;
  width: 0;
  height: 1px;
  margin: .8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  content: "";
  opacity: .4;
  transition: width .6s var(--ease-out), opacity .4s;
}
.tagline:hover::after, .tagline.is-energized::after { width: 78%; opacity: .8; }
.tagline__line { display: block; animation: text-arrive 1s var(--ease-out) .75s both; }
.tagline__line--bright { color: var(--text); animation-delay: .95s; transition: color .4s, text-shadow .4s; }
.tagline:hover .tagline__line--bright, .tagline.is-energized .tagline__line--bright {
  color: var(--amber);
  text-shadow: 0 0 30px rgba(255, 122, 26, .28);
}

.footer { display: flex; justify-content: center; align-items: end; animation: text-arrive 1s var(--ease-out) 1.2s both; }
.social {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--text);
  background: rgba(15, 20, 27, .65);
  text-decoration: none;
  backdrop-filter: blur(16px);
  transform: translate3d(var(--shift-x, 0px), var(--shift-y, 0px), 0);
  transition: border-color .3s, background .3s, box-shadow .4s var(--ease-out), color .3s;
  will-change: transform;
}
.social::before, .social::after { position: absolute; inset: -9px; border-radius: 50%; content: ""; pointer-events: none; }
.social::before { border: 1px dashed rgba(255, 122, 26, .2); animation: orbit 18s linear infinite; }
.social::after { box-shadow: 0 0 22px rgba(255, 122, 26, .18); opacity: .3; animation: ambient-breathe 3.6s ease-in-out infinite; }
.social svg { width: 19px; height: 19px; transition: transform .4s var(--ease-out); }
.social:hover, .social:focus-visible, .social.is-energized {
  border-color: var(--accent);
  color: var(--amber);
  background: rgba(255, 122, 26, .13);
  box-shadow: 0 0 30px rgba(255, 122, 26, .28), inset 0 0 22px rgba(255, 122, 26, .1);
}
.social:hover svg, .social:focus-visible svg, .social.is-energized svg { transform: scale(1.15) rotate(-9deg); }
.social:focus-visible { outline: 2px solid var(--amber); outline-offset: 8px; }

.cursor { position: fixed; z-index: 10; top: 0; left: 0; display: none; pointer-events: none; opacity: 0; transition: opacity .25s; }
.has-cursor .cursor { display: block; }
.cursor.is-visible { opacity: 1; }
.cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; transform: translate3d(-50%, -50%, 0); }
.cursor__dot { width: 5px; height: 5px; background: var(--amber); box-shadow: 0 0 13px 4px rgba(255, 122, 26, .54); }
.cursor__ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 122, 26, .8);
  box-shadow: 0 0 18px rgba(255, 122, 26, .1), inset 0 0 14px rgba(255, 122, 26, .09);
  transition: width .35s var(--ease-out), height .35s var(--ease-out), background .35s, border-color .35s;
}
.cursor.is-active .cursor__ring { width: 58px; height: 58px; border-color: var(--amber); background: rgba(255, 122, 26, .08); }
.cursor.is-pressed .cursor__ring { width: 23px; height: 23px; background: rgba(255, 122, 26, .22); }

.interaction-ripple {
  position: fixed;
  z-index: 4;
  width: 12px;
  height: 12px;
  margin: -6px;
  border: 1px solid rgba(255, 196, 107, .75);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 122, 26, .5);
  pointer-events: none;
  animation: ripple .85s var(--ease-out) forwards;
}

@keyframes ambient-rotate { to { transform: rotate(360deg); } }
@keyframes ambient-breathe { 50% { opacity: .28; transform: scale(1.08); } }
@keyframes glow-left { to { transform: translate(16%, 10%) scale(1.1); } }
@keyframes glow-right { to { transform: translate(-18%, -9%) scale(.94); } }
@keyframes grid-breathe { 50% { opacity: .28; } }
@keyframes scan-pass { to { transform: translateY(390%); } }
@keyframes mark-arrive { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes mark-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-current { to { stroke-dashoffset: 0; } }
@keyframes spark-breathe { 50% { transform: scale(1.32); opacity: .72; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes text-arrive { from { opacity: 0; filter: blur(10px); translate: 0 24px; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@keyframes wordmark-shine { 0%, 25%, 100% { background-position: 100% 0; } 48%, 62% { background-position: 0 0; } }
@keyframes ripple { to { opacity: 0; transform: scale(15); } }

@media (max-width: 600px) {
  .hero { transform: translateY(.4rem); }
  .mark-wrap { width: clamp(158px, 42vw, 195px); }
  .wordmark { margin-top: 1.2rem; font-size: clamp(3.25rem, 14vw, 5rem); }
  .tagline { margin-top: 1.6rem; max-width: 310px; font-size: 1rem; line-height: 1.7; }
  .scene__grid { background-size: 56px 56px; opacity: .55; }
  .scene__glow { width: 94vw; }
  .scene__glow--left { left: -65%; top: -22%; }
  .scene__glow--right { right: -68%; bottom: -25%; }
  .social { width: 50px; height: 50px; }
}

@media (max-height: 640px) {
  .hero { transform: none; }
  .mark-wrap { width: clamp(106px, 23vh, 164px); }
  .wordmark { margin-top: .7rem; font-size: clamp(2.8rem, 9.5vh, 4.4rem); }
  .tagline { margin-top: .8rem; line-height: 1.45; }
  .social { width: 43px; height: 43px; }
}

@media (max-height: 420px) {
  .page { min-height: 100svh; min-height: 100dvh; padding-top: 8px; padding-bottom: 8px; }
  .mark-wrap { width: 92px; }
  .wordmark { margin-top: .25rem; font-size: 2.7rem; }
  .tagline { margin-top: .35rem; font-size: .9rem; line-height: 1.3; }
  .tagline::after { margin-top: .25rem; }
  .social { width: 36px; height: 36px; }
  .social svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mark__path { stroke-dashoffset: 0; }
  .mark__energy { opacity: 0; }
}