:root {
  /* Creatus AI brand colours */
  --bg: #ffffff;
  --ink: #100f0d;
  --ink-soft: #5c5f66;
  --line: #e5e3e0;
  --accent: #04cdf0;
  --accent-dark: #25aefa;
  --mint: #04e5e0;
  --purple: #7581fc;
  --dark: #100f0d;
  --dark-ink: #f5f4f2;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

img {
  display: block;
}

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

/* ---------- fixed background layers ---------- */

.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.model {
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.model canvas {
  position: fixed;
  top: 0;
  left: 0;
}

/* ---------- shared type ---------- */

.tech-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-title {
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  max-width: 18em;
}

.btn {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 34px;
  border: 1px solid var(--ink);
  transition: background-color 150ms ease, color 150ms ease;
}

.btn.solid {
  background: var(--ink);
  color: var(--bg);
}

.btn.solid:hover {
  background: transparent;
  color: var(--ink);
}

.btn.ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn.solid.inverted {
  background: var(--dark-ink);
  color: var(--dark);
  border-color: var(--dark-ink);
}

.btn.solid.inverted:hover {
  background: transparent;
  color: var(--dark-ink);
}

/* ---------- promo banner ---------- */

.promo-banner {
  position: sticky;
  top: 0;
  z-index: 22;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  height: 38px;
  padding: 0 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.promo-banner .promo-cta {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- nav ---------- */

.site-nav {
  position: sticky;
  top: 38px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
}

.brand img {
  display: block;
  height: 24px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links a:not(.nav-cta):hover {
  color: var(--ink-soft);
}

.nav-cta {
  padding: 10px 22px;
  border: 1px solid var(--ink);
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-cta:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- sections ---------- */

section {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4em;
  padding: 96px 32px;
  text-align: center;
}

/* hero */

.hero {
  min-height: calc(100vh - 118px);
}

.hero h1 {
  font-size: clamp(44px, 8.6vw, 150px);
  font-weight: 300;
  line-height: 1.0;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 44em;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.corner {
  position: absolute;
}

.corner.tl { top: 28px; left: 32px; }
.corner.tr { top: 28px; right: 32px; }
.corner.bl { bottom: 28px; left: 32px; }
.corner.br { bottom: 28px; right: 32px; }

/* statement (dark) */

.statement {
  background: var(--dark);
  color: var(--dark-ink);
  gap: 2em;
}

.statement .tech-label {
  color: rgba(244, 243, 241, 0.55);
}

.statement-title {
  font-size: clamp(44px, 9vw, 150px);
  font-weight: 300;
  line-height: 0.98;
  text-transform: uppercase;
}

.statement-title .line {
  display: block;
  overflow: hidden;
}

.statement-copy {
  max-width: 46em;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(244, 243, 241, 0.75);
}

.tags {
  display: flex;
  gap: 2.5em;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* capabilities */

.capabilities {
  gap: 2.5em;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1240px, 100%);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cap {
  position: relative;
  padding: 28px 24px 34px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.cap::after {
  content: "+";
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: color 150ms ease, transform 150ms ease;
}

.cap:focus-visible {
  background: #fafaf9;
}

.cap:focus-visible::after {
  color: var(--accent);
  transform: scale(1.25);
}

@media (hover: hover) and (pointer: fine) {
  .cap:hover {
    background: #fafaf9;
  }

  .cap:hover::after {
    color: var(--accent);
    transform: scale(1.25);
  }
}

.cap:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.cap h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.cap p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* capability detail panel (grid-5 style transition) */

.cap-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(16, 15, 13, 0.5);
  opacity: 0;
  pointer-events: none;
}

.cap-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.cap-panel {
  position: fixed;
  z-index: 31;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 92vw);
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 44px 48px 48px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
}

.cap-panel.open {
  pointer-events: auto;
}

.cap-panel-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 14px 0 18px;
}

.cap-panel-copy {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.mover {
  position: fixed;
  z-index: 32;
  background: var(--bg);
  border: 1px solid var(--ink);
  pointer-events: none;
  will-change: transform, opacity, clip-path;
}

@media (max-width: 720px) {
  .cap-panel {
    padding: 32px 24px 36px;
  }
}

/* scanner */

.scanner {
  justify-content: center;
}

.scan-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 126px 32px 2em;
  text-align: left;
}

.scan-info h2 {
  font-size: 2.2vw;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 8px;
}

.product-description {
  text-align: right;
}

.scan-container {
  position: relative;
  width: 300px;
  height: 460px;
  border: 1px solid var(--ink);
}

.scan-human {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scan-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.hire-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 0.6em;
  opacity: 0;
}

.hire-more {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.purchased {
  position: absolute;
  bottom: 2em;
  right: 32px;
  padding: 10px 40px;
  border: 1px solid var(--accent);
}

.purchased p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(2, 150, 176);
}

/* tools */

.tools {
  gap: 2.5em;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: min(1240px, 100%);
  counter-reset: tool;
}

.tool-card {
  position: relative;
  display: block;
  border: 1px solid var(--line);
  text-align: left;
  background: var(--bg);
  will-change: transform;
  transition: box-shadow 300ms ease;
}

.tool-card .thumb {
  position: relative;
  display: block;
  aspect-ratio: 375 / 296;
  overflow: hidden;
  background: #eceae7;
}

.tool-card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 21, 23, 0) 55%, rgba(20, 21, 23, 0.16));
  opacity: 1;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.tool-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.06) brightness(1.02);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1), filter 450ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    box-shadow: 0 10px 24px rgba(16, 15, 13, 0.12);
  }

  .tool-card:hover .thumb::after {
    opacity: 0;
  }

  .tool-card:hover .thumb img {
    transform: scale(1.06);
    filter: grayscale(0%) contrast(1) brightness(1);
  }
}

.tool-card .tool-name {
  display: block;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease;
}

.tool-card .tool-name::before {
  counter-increment: tool;
  content: counter(tool, decimal-leading-zero);
  margin-right: 10px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-name {
    background: var(--ink);
    color: var(--bg);
  }

  .tool-card:hover .tool-name::before {
    color: var(--accent);
  }
}

/* music */

.music {
  color: var(--dark-ink);
  padding: 120px 32px;
}

.music-frame {
  position: relative;
  width: min(1240px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  padding: 96px 32px;
  border: 1px solid rgba(244, 243, 241, 0.16);
  overflow: hidden;
}

.music-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 45% at 50% 42%,
    rgba(4, 205, 240, 0.13),
    transparent 70%
  );
  pointer-events: none;
}

.music .tech-label {
  color: rgba(244, 243, 241, 0.55);
}

.music-eq {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  margin-top: 8px;
}

.music-eq span {
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0.85;
  transform-origin: bottom;
  animation: eq-bounce 1.1s ease-in-out infinite;
}

.music-eq span:nth-child(2n) { animation-duration: 0.9s; opacity: 0.5; background: var(--mint); }
.music-eq span:nth-child(3n) { animation-duration: 1.35s; opacity: 0.65; }
.music-eq span:nth-child(4n) { animation-duration: 0.75s; opacity: 0.4; background: var(--purple); }
.music-eq span:nth-child(5n) { animation-duration: 1.2s; opacity: 0.75; }
.music-eq span:nth-child(7n) { animation-duration: 1.5s; opacity: 0.55; background: var(--mint); }

@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.18); }
  50% { transform: scaleY(1); }
}

.music-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(4, 205, 240, 0.5);
  padding: 7px 16px;
}

.music-title {
  font-size: clamp(38px, 7.5vw, 130px);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

.music-copy {
  font-size: 14px;
  font-weight: 400;
  color: rgba(244, 243, 241, 0.75);
  margin-bottom: 14px;
}

/* outro */

.outro {
  min-height: 85vh;
  gap: 2.5em;
}

.outro-copy h2 {
  font-size: clamp(34px, 5.4vw, 88px);
  font-weight: 300;
  line-height: 1.05;
  text-transform: uppercase;
}

/* ---------- footer ---------- */

footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 32px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.foot-brand {
  display: flex;
  align-items: center;
}

.foot-brand img {
  display: block;
  height: 20px;
  width: auto;
}

.foot-social,
.foot-legal {
  display: flex;
  align-items: center;
  gap: 22px;
}

.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--ink);
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .foot-social a:hover {
    color: var(--bg);
    background: var(--ink);
    border-color: var(--ink);
  }
}

.foot-legal {
  color: var(--ink-soft);
}

.foot-legal a:hover {
  color: var(--accent);
}

/* ---------- lenis ---------- */

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .cap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1000px) {
  .scan-info h2 {
    font-size: 22px;
  }

  .scan-container {
    width: 240px;
    height: 380px;
  }
}

@media (max-width: 720px) {
  section {
    padding: 72px 20px;
  }

  .corner.tl,
  .corner.tr {
    display: none;
  }

  .corner.bl { left: 20px; }
  .corner.br { right: 20px; }

  .site-nav {
    padding: 14px 20px;
  }

  .brand img {
    height: 20px;
  }

  .nav-links {
    gap: 16px;
  }

  .nav-links a:not(.nav-cta) {
    display: none;
  }

  .nav-cta {
    padding: 9px 16px;
  }

  .cap-grid {
    grid-template-columns: 1fr;
  }

  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .music {
    padding: 72px 20px;
  }

  .music-frame {
    padding: 56px 20px;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }

  .tags {
    gap: 1.2em;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* scan-info and purchased are absolute-positioned overlays on desktop,
     tuned for the pinned viewport; on mobile the section isn't pinned and
     its centered content can land anywhere, so both would end up overlapping
     Ava's photo depending on viewport height. Putting them back in normal
     flex flow guarantees correct stacking order regardless of viewport size. */
  .scanner {
    /* the combined stack is tall enough now that centering it can push the
       first line up under the sticky nav; anchor to the top with clearance
       instead so it never lands behind the nav regardless of viewport height */
    justify-content: flex-start;
    padding-top: 120px;
  }

  .scan-info {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 0 20px;
    text-align: center;
  }

  .product-description {
    text-align: center;
  }

  .purchased {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 16px;
    padding: 10px 20px;
  }

  footer {
    flex-direction: column;
    gap: 16px;
  }

  .foot-legal {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}