:root {
  color-scheme: dark;
  --bg: #09080d;
  --surface: #121017;
  --surface-2: #18151f;
  --ink: #f8f5ff;
  --muted: #aaa4b3;
  --line: rgba(255, 255, 255, 0.13);
  --violet: #7b35ff;
  --violet-bright: #a77bff;
  --orange: #ff7048;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
  /* Clip stray horizontal overflow (decorative hero orbit, etc.) at the root.
     `clip` stops sideways scrolling without turning the root into a scroll
     container, so sticky and vertical scrolling keep working. */
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 78% 8%, rgba(123, 53, 255, 0.16), transparent 27rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}

body.dialog-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--orange), var(--violet-bright));
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(22px, 4vw, 68px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.brand-mark {
  margin-right: 5px;
  color: var(--violet-bright);
  letter-spacing: -0.14em;
}

.brand em {
  color: var(--orange);
  font-style: normal;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  color: var(--muted);
  font-size: 0.78rem;
}

.header-meta a {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: border-color 220ms ease, color 220ms ease;
}

.header-meta a:hover {
  border-color: var(--violet-bright);
  color: var(--violet-bright);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
  min-height: 100svh;
  padding: 148px clamp(22px, 5vw, 82px) 116px;
  isolation: isolate;
}

.hero::after {
  position: absolute;
  inset: auto clamp(22px, 5vw, 82px) 82px;
  height: 1px;
  background: var(--line);
  content: "";
}

.hero-glow {
  position: absolute;
  top: 20%;
  left: 35%;
  z-index: -1;
  width: 35vw;
  height: 35vw;
  border-radius: 50%;
  background: rgba(123, 53, 255, 0.12);
  filter: blur(100px);
}

.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-bottom: 32px;
}

.eyebrow {
  margin: 0 0 22px;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 760px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.4rem, 7.5vw, 8.8rem);
  font-weight: 600;
  letter-spacing: -0.075em;
  line-height: 0.81;
}

.title-line {
  display: block;
  overflow: hidden;
  padding: 0 0 0.1em;
}

.title-line > span {
  display: block;
  transform: translateY(110%);
  animation: title-in 980ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.title-line:nth-child(2) > span {
  animation-delay: 130ms;
  color: var(--violet-bright);
  font-style: italic;
}

@keyframes title-in {
  to { transform: translateY(0); }
}

.hero-intro {
  max-width: 540px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  line-height: 1.55;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  font-size: 0.92rem;
  font-weight: 650;
}

.round-arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--violet-bright);
  transition: transform 250ms ease, background 250ms ease;
}

.hero-link:hover .round-arrow {
  transform: translateY(4px);
  background: rgba(123, 53, 255, 0.18);
}

.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  animation: simple-reveal 700ms 340ms ease forwards;
}

.hero-link.reveal-up {
  animation-delay: 450ms;
}

@keyframes simple-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-visual {
  position: relative;
  align-self: center;
  min-height: 470px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.screen-card {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  transition: transform 180ms ease-out;
}

.screen-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-card-front {
  top: 13%;
  right: 0;
  z-index: 3;
  width: min(43vw, 650px);
  aspect-ratio: 16 / 9;
  transform: rotate(1.8deg) translate3d(var(--px, 0), var(--py, 0), 50px);
  animation: float-front 6s ease-in-out infinite;
}

.screen-card-back {
  top: 3%;
  right: 11%;
  z-index: 1;
  width: min(35vw, 530px);
  aspect-ratio: 16 / 9;
  opacity: 0.52;
  filter: saturate(0.5) brightness(0.65);
  transform: rotate(-7deg) translate3d(calc(var(--px, 0) * -0.45), calc(var(--py, 0) * -0.45), -30px);
}

.screen-card-front figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(13, 10, 20, 0.88));
  color: #fff;
}

.screen-card-front figcaption span {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.screen-card-front figcaption strong {
  font-family: var(--serif);
  font-size: 1.3rem;
}

@keyframes float-front {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

.visual-orbit {
  position: absolute;
  border: 1px solid rgba(167, 123, 255, 0.2);
  border-radius: 50%;
}

.orbit-one {
  inset: -3% -8% auto auto;
  width: 440px;
  height: 440px;
  animation: orbit-spin 24s linear infinite;
}

.orbit-two {
  inset: 17% 15% auto auto;
  width: 260px;
  height: 260px;
  border-style: dashed;
  animation: orbit-spin 18s linear infinite reverse;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.floating-chip {
  position: absolute;
  z-index: 5;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 17, 27, 0.83);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  color: var(--ink);
  font-size: 0.73rem;
  backdrop-filter: blur(12px);
}

.chip-one {
  top: 3%;
  right: 5%;
  animation: chip-float 4s 0.5s ease-in-out infinite;
}

.chip-two {
  right: 55%;
  bottom: 16%;
  animation: chip-float 5s ease-in-out infinite reverse;
}

@keyframes chip-float {
  50% { transform: translateY(-9px) rotate(1deg); }
}

.hero-index {
  position: absolute;
  right: clamp(22px, 5vw, 82px);
  bottom: 24px;
  left: clamp(22px, 5vw, 82px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.hero-index div {
  display: flex;
  align-items: baseline;
  gap: 13px;
}

.hero-index strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
}

.hero-index span {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--violet);
  color: #fff;
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 34px;
  padding: 18px 0;
  animation: marquee 28s linear infinite;
}

.marquee span {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  font-style: italic;
}

.marquee i {
  color: #ffb59d;
  font-style: normal;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.projects {
  padding: 130px clamp(22px, 5vw, 82px) 150px;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1.1fr 0.8fr;
  gap: 42px;
  align-items: end;
  margin-bottom: 76px;
}

.section-heading .eyebrow {
  align-self: start;
}

.section-heading h2,
.closing h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.9rem, 5vw, 5.6rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.section-heading > p:last-child {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(54px, 6vw, 92px) clamp(22px, 3vw, 46px);
  align-items: start;
}

.project-card {
  min-width: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.project-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-card button {
  position: relative;
  width: 100%;
  padding: 42px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.project-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f8f8f9;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 160ms ease-out, border-color 300ms ease;
}

.project-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(123, 53, 255, 0.1), transparent 42%);
  content: "";
  pointer-events: none;
}

.project-card:hover .project-media {
  border-color: rgba(167, 123, 255, 0.5);
}

.project-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.project-media img:nth-child(2) {
  opacity: 0;
  transform: scale(1.03);
}

.project-card:hover .project-media img:first-child {
  opacity: 0;
  transform: scale(1.025);
}

.project-card:hover .project-media img:nth-child(2) {
  opacity: 1;
  transform: scale(1);
}

.project-count {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(9, 8, 13, 0.84);
  color: #fff;
  font-size: 0.68rem;
  backdrop-filter: blur(8px);
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding-top: 21px;
}

.project-meta h3 {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.project-meta p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.project-tag {
  align-self: start;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--violet-bright);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.closing {
  position: relative;
  min-height: 580px;
  overflow: hidden;
  padding: 110px clamp(22px, 5vw, 82px);
  border-top: 1px solid var(--line);
  background: var(--violet);
}

.closing h2 {
  position: relative;
  z-index: 2;
  max-width: 900px;
  color: #fff;
}

.closing > a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 14px;
  margin-top: 44px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.closing .eyebrow {
  color: #ffc2ae;
}

.closing-mark {
  position: absolute;
  right: -2vw;
  bottom: -11vw;
  color: rgba(255, 255, 255, 0.09);
  font-family: var(--sans);
  font-size: clamp(10rem, 29vw, 30rem);
  font-weight: 800;
  letter-spacing: -0.12em;
  line-height: 1;
  white-space: nowrap;
}

footer {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 30px;
  align-items: center;
  padding: 32px clamp(22px, 5vw, 82px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
}

.brand-small {
  color: var(--ink);
  font-size: 0.88rem;
}

.project-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  background: #0d0b12;
  color: var(--ink);
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 360ms ease, transform 360ms cubic-bezier(0.2, 0.75, 0.25, 1), display 360ms allow-discrete;
}

.project-dialog[open] {
  opacity: 1;
  /* No transform on the settled dialog: a transformed ancestor would make the
     fixed close button anchor to the dialog (which scrolls) instead of the
     viewport, so it would scroll out of view. The entrance still animates from
     the @starting-style transform below. */
  transform: none;
}

@starting-style {
  .project-dialog[open] {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
}

.project-dialog::backdrop {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(8px);
}

.dialog-close {
  position: fixed;
  top: 26px;
  right: 28px;
  z-index: 10;
  width: 50px;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(14, 12, 18, 0.82);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.dialog-close span {
  position: absolute;
  top: 24px;
  left: 14px;
  width: 21px;
  height: 1px;
  background: #fff;
}

.dialog-close span:first-child { transform: rotate(45deg); }
.dialog-close span:last-child { transform: rotate(-45deg); }

.dialog-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  min-height: 100%;
}

.dialog-copy {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100dvh;
  padding: 84px clamp(30px, 5vw, 84px) 50px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 20% 18%, rgba(123, 53, 255, 0.2), transparent 24rem),
    #0d0b12;
}

.dialog-number {
  margin: 0 0 26px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
}

.dialog-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6vw, 6.8rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.88;
}

.dialog-summary {
  max-width: 610px;
  margin: 34px 0 0;
  color: var(--violet-bright);
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.5;
}

.dialog-highlights {
  display: grid;
  gap: 0;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}

.dialog-highlights li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  color: #d7d1dc;
  font-size: 0.9rem;
  line-height: 1.45;
}

.dialog-highlights li::before {
  color: var(--orange);
  content: "✦";
}

.pdf-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 42px;
  padding: 18px 18px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: linear-gradient(120deg, #6e22ff 0%, #8243ff 58%, #955eff 100%);
  box-shadow: 0 18px 42px rgba(79, 22, 194, 0.32);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.pdf-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(79, 22, 194, 0.44);
  filter: saturate(1.08) brightness(1.05);
}

.pdf-link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.pdf-link > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.pdf-link b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--violet);
  font-size: 0.86rem;
}

.dialog-gallery {
  display: grid;
  gap: 32px;
  align-content: start;
  padding: 84px clamp(28px, 5vw, 72px);
  background: #16131b;
}

.dialog-gallery figure {
  margin: 0;
}

.dialog-gallery img {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.dialog-gallery figcaption {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 135px;
    padding-bottom: 120px;
  }

  .hero-copy {
    align-self: start;
  }

  .hero-title {
    max-width: 700px;
    font-size: clamp(4.2rem, 13vw, 7.5rem);
  }

  .hero-visual {
    min-height: min(62vw, 520px);
    margin-top: 12px;
  }

  .screen-card-front { width: min(80vw, 680px); }
  .screen-card-back { width: min(63vw, 540px); }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .project-grid { gap: 54px 24px; }
  .dialog-shell { grid-template-columns: 1fr; }
  .dialog-copy { position: relative; min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
  .site-header {
    padding: 22px;
  }

  .header-meta > span {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 122px 22px 118px;
  }

  .hero::after {
    right: 22px;
    bottom: 76px;
    left: 22px;
  }

  .hero-title {
    font-size: clamp(3.7rem, 19vw, 6rem);
    line-height: 0.85;
  }

  .hero-intro {
    margin-top: 24px;
    font-size: 1rem;
  }

  .hero-visual {
    min-height: 330px;
    margin-top: 34px;
  }

  .screen-card-front { top: 18%; width: 93%; }
  .screen-card-back { top: 3%; right: 5%; width: 78%; }
  .chip-one { right: 0; }
  .chip-two { right: auto; bottom: 8%; left: 0; }

  .hero-index {
    right: 22px;
    bottom: 24px;
    left: 22px;
    gap: 10px;
  }

  .hero-index div {
    display: block;
  }

  .hero-index strong,
  .hero-index span {
    display: block;
  }

  .hero-index span {
    margin-top: 3px;
    font-size: 0.55rem;
  }

  .projects {
    padding: 92px 22px 100px;
  }

  .section-heading {
    margin-bottom: 48px;
  }

  .section-heading h2,
  .closing h2 {
    font-size: clamp(2.75rem, 14vw, 4.5rem);
  }

  .project-grid {
    display: block;
  }

  .project-card {
    margin-bottom: 54px;
  }

  .project-meta {
    grid-template-columns: 1fr;
  }

  .project-tag {
    grid-row: 1;
    justify-self: start;
  }

  .project-meta h3 {
    font-size: 2rem;
  }

  .closing {
    min-height: 500px;
    padding: 90px 22px;
  }

  footer {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }

  footer p {
    margin: 0;
  }

  .dialog-close {
    top: 16px;
    right: 16px;
  }

  .dialog-copy,
  .dialog-gallery {
    padding: 76px 22px 44px;
  }

  .dialog-copy h2 {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .dialog-gallery {
    gap: 24px;
    padding-top: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .title-line > span,
  .reveal-up,
  .reveal,
  .project-card { opacity: 1; transform: none; }
}