/* Shared editorial details */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-200);
  margin-bottom: var(--space-400);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow > span {
  position: relative;
  width: 2.4rem;
  height: 0.0625rem;
  background: currentColor;
}

.eyebrow > span::before,
.eyebrow > span::after {
  position: absolute;
  top: 50%;
  width: 0.25rem;
  height: 0.25rem;
  border: 0.0625rem solid currentColor;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.eyebrow > span::before { left: 0.35rem; }
.eyebrow > span::after { right: 0.35rem; }
.eyebrow--light { color: var(--color-gold); }

/* Hero */
.hero {
  position: relative;
  min-height: min(57rem, 100vh);
  padding-top: var(--header-height);
  overflow: hidden;
  border-bottom: 0.0625rem solid var(--color-border);
}

.hero::before {
  position: absolute;
  inset: var(--header-height) 0 0 50%;
  border-left: 0.0625rem solid rgba(216, 205, 189, 0.52);
  content: "";
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.22), rgba(231, 223, 209, 0.16));
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(34rem, 1.16fr);
  align-items: center;
  min-height: calc(min(57rem, 100vh) - var(--header-height));
}

.hero__content {
  z-index: 2;
  max-width: 42rem;
  padding-block: var(--space-800);
}

.hero h1 {
  max-width: 8.5ch;
  margin-left: -0.04em;
}

.hero h1 em { display: block; }

.hero__lead {
  max-width: 39rem;
  margin-top: var(--space-500);
  font-size: var(--fs-500);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-300);
  margin-top: var(--space-500);
}

.hero-art {
  position: relative;
  align-self: stretch;
  min-height: 43rem;
}

.code-garden {
  position: absolute;
  top: 51%;
  left: 52%;
  display: block;
  width: min(62rem, 70vw);
  max-width: none;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -47%) scale(0.97);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 56% 52%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 56% 52%, #000 70%, transparent 100%);
  animation: garden-arrive 1.25s cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.code-garden img {
  width: 100%;
  mix-blend-mode: multiply;
}

.hero-art__caption {
  position: absolute;
  right: 0;
  bottom: var(--space-500);
  display: flex;
  align-items: center;
  gap: var(--space-200);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-art__caption span { color: var(--color-primary); }

@keyframes garden-arrive {
  to {
    opacity: 1;
    transform: translate(-50%, -47%) scale(1);
  }
}

/* Capability strip */
.capabilities {
  border-bottom: 0.0625rem solid var(--color-border);
  background: rgba(248, 245, 239, 0.5);
}

.capabilities__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capability {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-300);
  min-height: 8.8rem;
  padding: var(--space-400) clamp(1rem, 2.4vw, 2.4rem);
  border-right: 0.0625rem solid var(--color-border);
}

.capability:first-child { padding-left: 0; }
.capability:last-child { padding-right: 0; border-right: 0; }

.capability svg {
  width: 2.8rem;
  color: var(--color-primary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.capability h2 {
  margin-bottom: var(--space-050);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.capability p {
  font-family: var(--font-heading);
  font-size: var(--fs-300);
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* Apps */
.apps-section { position: relative; }

.apps-section::before {
  position: absolute;
  top: 0;
  right: 7vw;
  width: 20rem;
  height: 20rem;
  border: 0.0625rem solid rgba(216, 205, 189, 0.58);
  border-radius: 50%;
  content: "";
  transform: translateY(-58%);
}

.collection-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.55fr);
  align-items: end;
  gap: var(--space-800);
  margin-bottom: var(--space-700);
}

.collection-heading h2 { max-width: 12ch; }
.collection-heading > p {
  max-width: 33rem;
  padding-bottom: var(--space-100);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-300);
}

.app-card {
  --app-wash: #e4ddd1;
  min-width: 0;
  border-top: 0.0625rem solid var(--color-border);
  transition: transform var(--transition-base);
}

.app-card:hover { transform: translateY(-0.5rem); }
.app-card--luma { --app-wash: #ddd9d2; }
.app-card--celllab { --app-wash: #d6ebe3; }
.app-card--flora { --app-wash: #f0dddd; }
.app-card--radio { --app-wash: #eee0d8; }

.app-card__visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.92;
  margin-top: var(--space-300);
  overflow: hidden;
  background: var(--app-wash);
}

.app-card__visual::before,
.app-card__visual::after {
  position: absolute;
  width: 60%;
  height: 0.0625rem;
  content: "";
  background: rgba(23, 42, 44, 0.18);
}

.app-card__visual::before { transform: rotate(40deg); }
.app-card__visual::after { transform: rotate(-40deg); }

.app-card__visual img {
  position: relative;
  z-index: 2;
  width: clamp(6.5rem, 10vw, 9rem);
  border-radius: 22%;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-slow), box-shadow var(--transition-base);
}

.app-card:hover .app-card__visual img {
  box-shadow: var(--shadow-lg);
  transform: scale(1.06) rotate(-2deg);
}

.app-card__orbit {
  position: absolute;
  z-index: 1;
  width: 74%;
  aspect-ratio: 1;
  border: 0.0625rem solid rgba(23, 42, 44, 0.24);
  border-radius: 50%;
}

.app-card__orbit::before {
  position: absolute;
  top: 13%;
  right: 1%;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: var(--color-primary);
}

.app-card__index {
  position: absolute;
  bottom: var(--space-200);
  left: var(--space-300);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.app-card__body { padding: var(--space-400) var(--space-100) var(--space-300); }

.app-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-200);
  padding-bottom: var(--space-300);
  border-bottom: 0.0625rem solid var(--color-border);
}

.app-card__title-row h3 { font-size: clamp(1.7rem, 2.2vw, 2.2rem); }
.app-card__title-row > span {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.app-card__body > p {
  min-height: 9.5rem;
  padding-block: var(--space-300);
  font-size: var(--fs-300);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100) var(--space-300);
}

.store-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-links a span { color: var(--color-primary); transition: transform var(--transition-fast); }
.store-links a:hover span { transform: translate(0.12rem, -0.12rem); }

/* Plugins */
.plugins-section {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background: var(--color-surface-dark);
}

.plugins-section::before {
  position: absolute;
  top: -19rem;
  left: -12rem;
  width: 40rem;
  height: 40rem;
  border: 0.0625rem solid var(--color-border-dark);
  border-radius: 50%;
  content: "";
}

.plugins-section::after {
  position: absolute;
  right: -6rem;
  bottom: -9rem;
  width: 30rem;
  height: 30rem;
  border: 0.0625rem solid var(--color-border-dark);
  border-radius: 50%;
  content: "";
}

.plugins-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(17rem, 0.72fr) minmax(0, 1.5fr);
  gap: clamp(3rem, 8vw, 9rem);
}

.plugins-intro {
  align-self: start;
  position: sticky;
  top: calc(var(--header-height) + var(--space-500));
}

.plugins-intro h2,
.plugin-card h3 { color: var(--color-white); }
.plugins-intro h2 { max-width: 8ch; }
.plugins-intro h2 em { color: var(--color-gold); }

.plugins-intro > p:not(.eyebrow) {
  margin-top: var(--space-500);
  line-height: var(--lh-loose);
  color: #aebcba;
}

.text-link {
  display: inline-flex;
  gap: var(--space-100);
  margin-top: var(--space-500);
  padding-bottom: var(--space-100);
  border-bottom: 0.0625rem solid var(--color-border-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.text-link span { color: var(--color-gold); }

.plugin-list { display: grid; gap: var(--space-400); }

.plugin-card {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 0.0625rem solid var(--color-border-dark);
  background: rgba(255, 255, 255, 0.025);
  transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.plugin-card:hover {
  border-color: #526c6e;
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(0.35rem);
}

.plugin-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  margin-bottom: var(--space-500);
}

.plugin-card__top svg {
  width: 3rem;
  fill: none;
  stroke: var(--color-gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.plugin-card__top span {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93a6a4;
}

.plugin-card h3 { font-size: clamp(2.25rem, 3.6vw, 3.8rem); }

.plugin-card > p {
  max-width: 48rem;
  margin-top: var(--space-300);
  line-height: var(--lh-loose);
  color: #aebcba;
}

.install-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-300);
  margin-block: var(--space-500) var(--space-400);
  padding: var(--space-300) var(--space-400);
  border: 0.0625rem solid var(--color-border-dark);
  background: #102729;
}

.install-command code {
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  text-overflow: ellipsis;
  color: #d8dfd8;
}

.install-command span {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--color-gold);
}

.plugin-card > a {
  display: inline-flex;
  gap: var(--space-100);
  font-family: var(--font-mono);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plugin-card > a span { color: var(--color-gold); }

/* Studio */
.about-section { border-bottom: 0.0625rem solid var(--color-border); }

.about-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(4rem, 10vw, 11rem);
}

.founder-mark {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

.founder-mark::before {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: rgba(200, 163, 106, 0.16);
}

.founder-mark > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--color-text);
  stroke-width: 1.1;
}

.founder-mark > svg path { fill: rgba(128, 145, 134, 0.2); }

.founder-mark__monogram {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: 1;
  color: var(--color-primary);
}

.founder-mark__monogram span + span {
  margin-top: 0.6em;
  margin-left: -0.15em;
  color: var(--color-text);
}

.founder-mark > p {
  position: absolute;
  right: 0;
  bottom: 7%;
  padding: var(--space-200) var(--space-300);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.05em;
  line-height: var(--lh-normal);
  text-transform: uppercase;
  background: var(--color-bg);
}

.about-copy h2 { max-width: 11ch; }

.about-copy__lead {
  margin-top: var(--space-500);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.35;
}

.about-copy > p:not(.eyebrow):not(.about-copy__lead) {
  margin-top: var(--space-400);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

.studio-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-300);
  margin-top: var(--space-600);
  padding-top: var(--space-400);
  border-top: 0.0625rem solid var(--color-border);
}

.studio-facts div + div {
  padding-left: var(--space-300);
  border-left: 0.0625rem solid var(--color-border);
}

.studio-facts dt {
  margin-bottom: var(--space-100);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.studio-facts dd {
  font-family: var(--font-heading);
  font-size: var(--fs-500);
  line-height: var(--lh-snug);
}

/* Contact */
.contact-section {
  position: relative;
  padding-block: var(--space-900);
  overflow: hidden;
  background: var(--color-bg-soft);
}

.contact-section::after {
  position: absolute;
  top: 50%;
  right: -6rem;
  width: 23rem;
  height: 23rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.contact-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-600);
}

.contact-section h2 { max-width: 10ch; }

.contact-mail {
  display: flex;
  align-items: center;
  gap: var(--space-400);
  padding-bottom: var(--space-300);
  border-bottom: 0.0625rem solid var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.8vw, 2.75rem);
}

.contact-mail svg {
  width: 3.5rem;
  fill: none;
  stroke: var(--color-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
  transition: transform var(--transition-base);
}

.contact-mail:hover svg { transform: translateX(0.5rem); }

/* Scroll reveal is enhanced only when JS is available. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

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

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 0.9fr) minmax(30rem, 1.1fr); }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-600) var(--space-400); }
  .app-card__body > p { min-height: 7.5rem; }
  .app-card__visual { aspect-ratio: 1.3 / 1; }
  .app-card__visual img { width: 8.5rem; }
}

@media (max-width: 960px) {
  .hero { min-height: auto; }
  .hero::before { inset: auto 0 0; height: 45%; border-top: 0.0625rem solid var(--color-border); border-left: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { padding-block: var(--space-800) var(--space-500); }
  .hero h1 { max-width: 9.5ch; }
  .hero-art { min-height: 36rem; }
  .code-garden { left: 54%; width: min(49rem, 100vw); }
  .capabilities__grid { grid-template-columns: repeat(2, 1fr); }
  .capability:nth-child(2) { border-right: 0; }
  .capability:nth-child(-n+2) { border-bottom: 0.0625rem solid var(--color-border); }
  .capability:nth-child(3) { padding-left: 0; }
  .plugins-layout { grid-template-columns: 1fr; }
  .plugins-intro { position: static; }
  .plugins-intro h2 { max-width: 11ch; }
  .about-layout { gap: var(--space-600); }
}

@media (max-width: 768px) {
  .hero__content { padding-top: var(--space-700); }
  .hero__lead { font-size: var(--fs-400); }
  .hero-art { min-height: 27rem; }
  .hero-art__caption { right: var(--space-300); bottom: var(--space-300); }
  .collection-heading { grid-template-columns: 1fr; gap: var(--space-400); margin-bottom: var(--space-600); }
  .collection-heading > p { padding-bottom: 0; }
  .app-grid { grid-template-columns: 1fr; }
  .app-card__visual { aspect-ratio: 1.38 / 1; }
  .app-card__body > p { min-height: auto; }
  .about-layout { grid-template-columns: 1fr; }
  .founder-mark { width: min(100%, 31rem); margin-inline: auto; }
  .studio-facts { grid-template-columns: 1fr; }
  .studio-facts div + div { padding-top: var(--space-300); padding-left: 0; border-top: 0.0625rem solid var(--color-border); border-left: 0; }
  .contact-section { padding-block: var(--space-800); }
  .contact-section__inner { align-items: start; flex-direction: column; }
}

@media (max-width: 540px) {
  .hero__actions { align-items: stretch; flex-direction: column; }
  .btn { width: 100%; }
  .hero-art { min-height: 22rem; }
  .code-garden { left: 58%; width: 42rem; }
  .capabilities__grid { grid-template-columns: 1fr; }
  .capability,
  .capability:first-child,
  .capability:nth-child(3),
  .capability:last-child {
    min-height: 7rem;
    padding: var(--space-300) 0;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--color-border);
  }
  .capability:last-child { border-bottom: 0; }
  .app-card__visual { aspect-ratio: 1.12 / 1; }
  .plugin-card { padding: var(--space-400); }
  .plugin-card h3 { font-size: 2.1rem; }
  .install-command { align-items: flex-start; flex-direction: column; }
  .contact-mail { font-size: var(--fs-500); }
  .contact-mail svg { width: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .code-garden { opacity: 1; transform: translate(-50%, -47%); animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}