/* ==========================================================================
   Prismelo — page styles
   ========================================================================== */

/* ==========================================================================
   loader / entry gate
   ========================================================================== */

.gate {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  /* frosted, not opaque: the sphere is already turning behind it */
  background:
    radial-gradient(115% 85% at 50% 48%,
      color-mix(in srgb, var(--bg-deep) 70%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 38%, transparent) 100%);
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  transition: opacity 900ms var(--ease-out), visibility 900ms, backdrop-filter 900ms var(--ease-out);
}
.gate.is-done { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
.gate.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__inner { display: grid; justify-items: center; gap: 2.5rem; text-align: center; padding: 2rem; }

.gate__mark { width: 76px; height: 76px; }
.gate__mark .facet { transform-origin: 50% 50%; animation: facet-breathe 3.4s var(--ease-in-out) infinite; }
.gate__mark .facet:nth-child(2) { animation-delay: 0.28s; }
.gate__mark .facet:nth-child(3) { animation-delay: 0.56s; }
.gate__mark .facet:nth-child(4) { animation-delay: 0.84s; }
@keyframes facet-breathe {
  0%, 100% { opacity: 0.32; }
  50% { opacity: 1; }
}

.gate__word {
  font-family: var(--display);
  font-size: clamp(2.5rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  display: flex; overflow: hidden;
}
.gate__word span {
  display: inline-block;
  transform: translateY(105%);
  animation: gate-rise 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms + 120ms);
}
@keyframes gate-rise { to { transform: translateY(0); } }

.gate__meter { width: min(280px, 62vw); display: grid; gap: 0.85rem; }
.gate__track { height: 1px; background: var(--line); position: relative; overflow: hidden; }
.gate__bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); transition: width 260ms var(--ease-out); }
.gate__pct { font-family: var(--mono); font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.1em; display: flex; justify-content: space-between; }

.gate__enter {
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), visibility 600ms;
}
.gate__enter.is-ready { opacity: 1; visibility: visible; transform: none; }
.gate__hint { font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.1rem; }

/* ==========================================================================
   prism stage — fixed behind the page
   ========================================================================== */

.prism-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}
.prism-stage.is-interactive { pointer-events: auto; }
#prism-canvas { width: 100%; height: 100%; display: block; }

.prism-labels {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-out);
}
.prism-labels.is-hidden { opacity: 0; }

.planet-label {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  margin: -0.9rem 0 0 0.9rem;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.planet-label__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.planet-label--live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.planet-label.is-hot,
.planet-label:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }

/* static fallback when WebGL is unavailable */
.prism-fallback { display: none; }
.no-webgl .prism-fallback {
  display: block;
  position: absolute; top: 50%; left: 18%;
  width: min(46vw, 520px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 58%),
    radial-gradient(circle at 62% 66%, var(--surface-2), var(--surface) 62%, transparent 72%);
  opacity: 0.75;
}
.no-webgl #prism-canvas { display: none; }

/* ==========================================================================
   hero
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--nav-h) + 1.5rem) 4.5rem;
  /* transparent: the sphere shows through */
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
.hero__text { grid-column: 2; max-width: 34rem; }
.hero .h-hero { margin-bottom: 1.5rem; }
.hero__lead { margin-bottom: 1.9rem; }
.hero__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }

.hero__meta {
  margin-top: 2.25rem;
  display: flex; gap: 2.5rem; flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.hero__meta div { display: grid; gap: 0.3rem; }
.hero__meta dt { font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__meta dd { margin: 0; font-family: var(--display); font-size: 1.5rem; }

.scroll-cue {
  position: absolute; left: var(--gut); bottom: 2.25rem;
  display: grid; justify-items: center; gap: 0.6rem;
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
  transition: opacity 400ms var(--ease-out);
}
.scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(to bottom, var(--line-strong), transparent); position: relative; overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 12px; background: var(--accent);
  animation: cue-run 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-run { 0% { transform: translateY(-12px); } 60%, 100% { transform: translateY(42px); } }
.scroll-cue.is-gone { opacity: 0; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__text { grid-column: 1; max-width: 40rem; position: relative; z-index: 2; }
  .hero { align-items: end; padding-bottom: 5rem; }
  /* the crystal sits behind the words: a flat scrim keeps body copy at
     full contrast instead of letting it fight the facets */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 34%,
      var(--bg) 62%);
  }
  /* pointer play is off on touch, so the orbit labels are noise here */
  .planet-label { display: none; }
}
@media (max-width: 639px) {
  .hero__meta { gap: 1.5rem; }
  .hero__meta dd { font-size: 1.25rem; }
  .scroll-cue { display: none; }
}

/* ==========================================================================
   solid content plane — covers the sphere after the opening
   ========================================================================== */

/* Solid panels float over the fixed sphere scene. Their rounded top corners
   make the reveal read as a deliberate aperture instead of a clipped canvas. */
.plane {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0;
  box-shadow: 0 -30px 70px -24px rgba(0, 0, 0, 0.6);
}
.plane + .aperture + .plane { margin-top: 0; }
:root[data-theme="light"] .plane { box-shadow: 0 -30px 70px -34px rgba(13, 19, 33, 0.3); }

/* the last panel closes the page square against the footer */
.plane:last-of-type { border-radius: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) 0 0; }

/* a window that lets the sphere show through mid-page */
.aperture {
  position: relative;
  z-index: 1;
  background: transparent;
}
.aperture__inner {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}
.aperture .wrap { position: relative; z-index: 2; }

/* the second aperture puts its words on the left, sphere arriving right */
.aperture--right .split { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
@media (max-width: 899px) {
  .aperture--right .split { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   marquee / logo strip
   ========================================================================== */

.strip {
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
}
.strip__label { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.strip__items { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; }
.strip__item { font-family: var(--display); font-size: 1.05rem; color: var(--muted); }

/* ==========================================================================
   product cards
   ========================================================================== */

.product {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--m-out) var(--ease-out), border-color var(--m-in) var(--ease-out), box-shadow var(--m-out) var(--ease-out);
}
.product::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, var(--accent-soft), transparent 62%);
  opacity: 0;
  transition: opacity var(--m-out) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  a.product:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow); }
  a.product:hover::before { opacity: 1; }
  a.product:hover .product__go svg { transform: translateX(3px); }
}
.product > * { position: relative; }
.product__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product__icon {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--field); border: 1px solid var(--line);
  color: var(--accent);
}
.product__icon svg { width: 22px; height: 22px; }
.product__name { font-family: var(--display); font-size: var(--t-h3); margin-bottom: .6rem; }
.product__desc { color: var(--muted); font-size: var(--t-sm); line-height: 1.62; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.product__go { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-sm); font-weight: 500; }
.product__go svg { width: 14px; height: 14px; transition: transform var(--m-in) var(--ease-out); }

/* progress meter for upcoming products */
.meter { display: grid; gap: 0.5rem; }
.meter__head { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--faint); }
.meter__track { height: 3px; border-radius: 2px; background: var(--field); overflow: hidden; }
.meter__bar { height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width 1200ms var(--ease-out); }
.is-in .meter__bar, .meter.is-in .meter__bar { width: var(--pct, 0%); }

/* ==========================================================================
   horizontal scrollytelling rail
   ========================================================================== */

.rail-section { position: relative; }
.rail-sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: end; padding-bottom: clamp(5rem, 12vh, 8rem); overflow: hidden; }
.rail-head { position: absolute; top: clamp(5rem, 12vh, 8rem); left: 0; right: 0; z-index: 2; pointer-events: none; }
.rail-track { display: flex; gap: clamp(1.25rem, 2vw, 2rem); padding-inline: var(--gut); will-change: transform; }
.rail-card {
  flex: none;
  width: min(78vw, 460px);
  display: grid; gap: 1.25rem;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.rail-card__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.1em; }
.rail-card__title { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; }
.rail-card__body { color: var(--muted); font-size: var(--t-sm); }
.rail-card__list { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.rail-card__list li { display: flex; gap: 0.6rem; font-size: var(--t-sm); color: var(--muted); }
.rail-card__list svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 0.28rem; }
.rail-progress { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(2.5rem, 6vh, 4rem); height: 1px; background: var(--line); z-index: 2; }
.rail-progress__bar { height: 100%; width: 0%; background: var(--accent); }

@media (max-width: 899px) {
  .rail-sticky { position: static; height: auto; padding-block: 3rem; }
  .rail-head { position: static; margin-bottom: 2rem; }
  .rail-track {
    overflow-x: auto; scroll-snap-type: x mandatory;
    transform: none !important;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
  }
  .rail-card { scroll-snap-align: center; width: min(84vw, 380px); }
  .rail-progress { display: none; }
}

/* ==========================================================================
   stacking cards
   ========================================================================== */

.stack-cards { display: grid; gap: 1.5rem; }
.stack-card {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 3vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}
.stack-card:nth-child(1) { top: calc(var(--nav-h) + 2rem); }
.stack-card:nth-child(2) { top: calc(var(--nav-h) + 3rem); }
.stack-card:nth-child(3) { top: calc(var(--nav-h) + 4rem); }
.stack-card:nth-child(4) { top: calc(var(--nav-h) + 5rem); }
.stack-card__n { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.12em; margin-bottom: 1rem; display: block; }
.stack-card__visual {
  aspect-ratio: 16 / 11;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid; align-items: stretch;
}

/* ---- photography ---- */
.figure {
  position: relative; margin: 0;
  width: 100%; height: 100%; min-height: 100%;
  overflow: hidden; border-radius: inherit;
  background: var(--surface-2);
}
.figure picture { display: block; width: 100%; height: 100%; }
.figure img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-out), filter 600ms var(--ease-out);
}
/* a theme-aware grade so photography sits inside the palette, not on top of it */
.figure__grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--forest-800) 34%, transparent) 0%,
    transparent 46%,
    color-mix(in srgb, var(--forest-900) 46%, transparent) 100%);
  mix-blend-mode: multiply;
  opacity: 0.9;
}
:root[data-theme="light"] .figure__grade {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--gold) 16%, transparent) 0%,
    transparent 44%,
    color-mix(in srgb, var(--forest-800) 34%, transparent) 100%);
  opacity: 0.72;
}
:root[data-theme="light"] .figure img { filter: saturate(0.92) brightness(1.02); }
.figure__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.1rem 1.25rem;
  font-size: var(--t-xs); letter-spacing: 0.13em; text-transform: uppercase;
  color: #f2efe0;
  background: linear-gradient(to top, rgba(8, 15, 11, 0.72), transparent);
}
@media (hover: hover) {
  .stack-card:hover .figure img { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .figure img { transition: none; transform: none; }
}
.stack-card__visual .win { display: flex; flex-direction: column; }
.stack-card__visual .win__body { flex: 1; align-content: start; }
@media (max-width: 899px) {
  .stack-card { grid-template-columns: minmax(0, 1fr); position: static; }
}

/* ==========================================================================
   UI mock (product window)
   ========================================================================== */

.win {
  width: 100%;
  border-radius: var(--r-md);
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  font-size: var(--t-xs);
}
.win__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); background: var(--field); }
.win__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.win__title { margin-left: 0.5rem; color: var(--faint); font-family: var(--mono); font-size: 0.6875rem; }
.win__body { padding: 1rem; display: grid; gap: 0.7rem; }
.win__row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: var(--r-sm); background: var(--field); }
.win__avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--forest-500), var(--forest-700)); }
.win__lines { display: grid; gap: 0.3rem; flex: 1; min-width: 0; }
.win__line { height: 6px; border-radius: 3px; background: var(--line-strong); }
.win__line--short { width: 52%; }
.win__line--mid { width: 74%; }
.win__score { font-family: var(--mono); font-size: 0.6875rem; color: var(--accent); flex: none; }
.win__chip { padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 0.625rem; }

/* ==========================================================================
   domain marketplace
   ========================================================================== */

.domain-search { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.domain-search .field { flex: 1; min-width: 220px; }
.domain-list { display: grid; gap: 0.75rem; margin-top: 2rem; }
.domain-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--m-in) var(--ease-out), transform var(--m-out) var(--ease-out);
}
@media (hover: hover) { .domain-row:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
.domain-row__name { font-family: var(--mono); font-size: 1rem; }
.domain-row__name b { color: var(--accent); font-weight: 400; }
.domain-row__meta { font-size: var(--t-xs); color: var(--faint); }
.domain-row__price { font-family: var(--display); font-size: 1.25rem; }
@media (max-width: 767px) {
  .domain-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.6rem; }
  .domain-row__meta { grid-column: 1 / -1; }
}

/* ==========================================================================
   docs
   ========================================================================== */

.docs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.docs-side { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: 1.75rem; }
.docs-side h4 { font-family: var(--text); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.85rem; }
.docs-side li + li { margin-top: 0.45rem; }
.docs-side a { font-size: var(--t-sm); color: var(--muted); }
.docs-side a:hover, .docs-side a[aria-current] { color: var(--ink); }
.docs-side a[aria-current] { border-left: 2px solid var(--accent); padding-left: 0.6rem; margin-left: -0.7rem; }
@media (max-width: 899px) { .docs-layout { grid-template-columns: minmax(0, 1fr); } .docs-side { position: static; } }

.doc-article { display: grid; gap: 1.5rem; }
.doc-article h2 { font-size: var(--t-h2); margin-top: 1.5rem; }
.doc-article h3 { font-size: var(--t-h3); margin-top: 1rem; }
.doc-article p { color: var(--muted); }
.doc-article ul { display: grid; gap: 0.55rem; }
.doc-article li { display: flex; gap: 0.65rem; color: var(--muted); font-size: var(--t-sm); }
.doc-article li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; margin-top: 0.6rem; }

.code {
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.7;
  background: var(--bg-deep); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.1rem 1.25rem;
  overflow-x: auto; color: var(--muted);
}
.code b { color: var(--accent); font-weight: 400; }
.code i { color: var(--faint); font-style: normal; }

.search-hit { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.search-hit + .search-hit { margin-top: 0.65rem; }
.search-hit h4 { font-family: var(--text); font-size: var(--t-body); font-weight: 500; margin-bottom: 0.3rem; }
.search-hit p { font-size: var(--t-sm); color: var(--muted); }
.search-hit mark { background: var(--accent-soft); color: var(--accent); padding: 0 0.15em; border-radius: 2px; }

/* ==========================================================================
   forum
   ========================================================================== */

.thread {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: start;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--m-in) var(--ease-out), transform var(--m-out) var(--ease-out);
}
@media (hover: hover) { .thread:hover { border-color: var(--line-strong); transform: translateY(-2px); } }
.thread + .thread { margin-top: 0.7rem; }
.thread__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--forest-500), var(--forest-700)); flex: none; }
.thread__title { font-size: var(--t-body); font-weight: 500; margin-bottom: 0.35rem; }
.thread__meta { font-size: var(--t-xs); color: var(--faint); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.thread__count { text-align: center; font-family: var(--display); font-size: 1.25rem; }
.thread__count span { display: block; font-family: var(--text); font-size: 0.625rem; color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 639px) { .thread { grid-template-columns: minmax(0, 1fr); } .thread__avatar { display: none; } }

.gate-note {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.35rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--field);
  font-size: var(--t-sm); color: var(--muted);
}

/* ==========================================================================
   concierge
   ========================================================================== */

.concierge { display: grid; gap: 1.25rem; }
.concierge__panel {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
}
:root[data-theme="light"] .concierge__panel { background: rgba(255, 255, 255, 0.78); }
.concierge__log { display: grid; gap: 0.85rem; margin-bottom: 1.25rem; min-height: 96px; }
.msg { display: grid; gap: 0.3rem; max-width: 90%; }
.msg__who { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.msg__body {
  padding: 0.8rem 1rem; border-radius: var(--r-md);
  font-size: var(--t-sm); line-height: 1.6;
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
}
.msg--me { justify-self: end; text-align: right; }
.msg--me .msg__body { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.msg--bot .msg__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="light"] .msg--bot .msg__body { background: #fff; }
.concierge__form { display: flex; gap: 0.6rem; }
.concierge__form .field { flex: 1; }
.concierge__chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.chip {
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  font-size: var(--t-xs); color: var(--muted); cursor: pointer;
  transition: color var(--m-in) var(--ease-out), border-color var(--m-in) var(--ease-out), background-color var(--m-in) var(--ease-out);
}
@media (hover: hover) { .chip:hover { color: var(--ink); border-color: var(--line-strong); background: var(--field-hover); } }
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); animation: typing 1.2s var(--ease-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.28; } 30% { opacity: 1; } }

/* ==========================================================================
   timeline / roadmap
   ========================================================================== */

.timeline { display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 2rem 2.25rem; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line-strong);
}
.tl-item--done::before { background: var(--accent); border-color: var(--accent); }
.tl-item--now::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-item__when { font-family: var(--mono); font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.08em; }
.tl-item__title { font-family: var(--display); font-size: 1.35rem; margin: 0.35rem 0 0.4rem; }
.tl-item__body { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   team
   ========================================================================== */

.person { display: grid; gap: 1rem; }
.person__photo {
  aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.person__initials { font-family: var(--display); font-size: 3rem; color: var(--faint); }
.person__name { font-family: var(--display); font-size: 1.35rem; }
.person__role { font-size: var(--t-xs); color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; }
.person__bio { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   pricing / auth / dashboard
   ========================================================================== */

.auth-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-aside { position: relative; background: var(--bg-deep); display: grid; align-content: end; padding: clamp(2rem, 4vw, 4rem); overflow: hidden; }
.auth-aside__glow {
  position: absolute; inset: auto -20% -30% -20%; height: 70%;
  background: radial-gradient(60% 60% at 50% 50%, var(--accent-soft), transparent 70%);
}
.auth-main { display: grid; align-content: center; padding: clamp(2rem, 5vw, 5rem); }
.auth-form { width: min(100%, 400px); display: grid; gap: 1.15rem; }
@media (max-width: 899px) { .auth-shell { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } }

.dash-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.dash-side { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: 0.3rem; }
.dash-side a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.85rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--muted);
  transition: background-color var(--m-in) var(--ease-out), color var(--m-in) var(--ease-out);
}
.dash-side a svg { width: 16px; height: 16px; }
.dash-side a:hover { background: var(--field); color: var(--ink); }
.dash-side a[aria-current] { background: var(--field); color: var(--ink); }
@media (max-width: 899px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } .dash-side { position: static; grid-auto-flow: column; overflow-x: auto; } }

.tile { padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tile__label { font-size: var(--t-xs); color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.tile__value { font-family: var(--display); font-size: 2.25rem; line-height: 1.1; margin-top: 0.6rem; }
.tile__note { font-size: var(--t-xs); color: var(--muted); margin-top: 0.4rem; }

/* ==========================================================================
   blog
   ========================================================================== */

.post { display: grid; gap: 1rem; }
.post__meta { display: flex; gap: 0.75rem; font-size: var(--t-xs); color: var(--faint); }
.post__title { font-family: var(--display); font-size: var(--t-h3); line-height: 1.15; }
.post__excerpt { font-size: var(--t-sm); color: var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; cursor: pointer;
  font-size: var(--t-body); font-weight: 500;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--m-out) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding-bottom: 1.35rem; color: var(--muted); font-size: var(--t-sm); max-width: 68ch; }

/* ==========================================================================
   misc
   ========================================================================== */

.note {
  padding: 1rem 1.25rem; border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: var(--t-sm); color: var(--ink);
}

.parallax-layer { will-change: transform; }

.big-word {
  font-family: var(--display);
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.cta-band { display: grid; gap: 2rem; justify-items: start; }
.cta-band .h2 { max-width: 18ch; }

/* ==========================================================================
   editorial image band — full-bleed photography with a quote
   ========================================================================== */

.band {
  position: relative;
  min-height: clamp(380px, 56svh, 620px);
  display: grid; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media .figure { border-radius: 0; }
.band__media .figure img { transform: scale(1.06); }
.band__media .figure__grade { display: none; }
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(8, 15, 11, 0.82) 0%,
    rgba(8, 15, 11, 0.52) 52%,
    rgba(8, 15, 11, 0.2) 100%);
}
.band__inner { padding-block: clamp(3rem, 8vw, 6rem); }
.band__quote { margin: 0; max-width: min(640px, 92%); }
.band__quote p {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.16; letter-spacing: -0.02em;
  color: #f7f4e6;
  text-wrap: balance;
}
.band__quote cite {
  display: block; margin-top: 1.5rem;
  font-style: normal;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: #cdd8cd;
}
@media (max-width: 700px) {
  .band__quote { max-width: none; }
  .band__scrim { background: linear-gradient(to top, rgba(8,15,11,.9), rgba(8,15,11,.55)); }
}

/* ==========================================================================
   centred aperture — the sphere's moment at the middle of its journey.
   Text sits above and below; the centre band is deliberately left clear so
   the crystal never ends up behind a paragraph.
   ========================================================================== */

.aperture__inner--centre { min-height: 100svh; }
.aperture-stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  min-height: calc(100svh - var(--nav-h) - 6rem);
  text-align: center;
}
.aperture-stack__head { justify-self: center; max-width: min(780px, 94%); }
.aperture-stack__head .h2 { text-wrap: balance; }
.aperture-stack__gap { min-height: clamp(240px, 42svh, 460px); }
.aperture-stack__foot {
  justify-self: center;
  max-width: 52ch;
  display: grid; gap: 1.1rem; justify-items: center;
}
/* a soft plate keeps the words legible if the crystal drifts under them */
.aperture-stack__head, .aperture-stack__foot { position: relative; }
.aperture-stack__head::before, .aperture-stack__foot::before {
  content: ""; position: absolute; z-index: -1;
  inset: -1.5rem -2.5rem;
  background: radial-gradient(60% 70% at 50% 50%,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 55%, transparent) 60%,
    transparent 100%);
  filter: blur(6px);
}
@media (max-width: 899px) {
  .aperture__inner--centre { min-height: auto; }
  .aperture-stack { min-height: 0; grid-template-rows: auto auto auto; gap: 2rem; }
  .aperture-stack__gap { min-height: clamp(200px, 34svh, 300px); }
}