/* ============================================================================
   Strata marketing site — enhancement layer.
   The Site kit ships inside @layer qazana, so this unlayered sheet wins every
   cascade fight without specificity hacks. Everything references tokens, so
   all three schemes (aurora / dark-knight / desert-dunes) re-skin it for free.
   ============================================================================ */

/* ---- flat surfaces — kill the kit's gradient atmosphere ------------------- */
.site::before{background:none}
.site .spot-media::after{content:none}

/* ---- layout fix — the kit's .section{padding:84px 0} shorthand clobbers
   .wrap's side padding on elements carrying both classes, so content runs
   flush to the viewport edge below the max-width breakpoint ----------------- */
.site .wrap.section{padding-inline:var(--space-5)}

/* grid items default to min-width:auto, so a long token chip inside the
   flex .spot-list li inflates the spotlight column past the viewport */
.site .spotlight > *{min-width:0}

/* the kit's .spot-list li{display:flex} turns every inline <code> chip into
   its own flex item on one non-wrapping line; block flow + hanging marker
   lets mixed text-and-chip lines wrap normally */
.site .spot-list li{display:block;position:relative;padding-inline-start:26px;line-height:1.9}
.site .spot-list li::before{position:absolute;inset-inline-start:0;top:0}

/* ---- glass nav ----------------------------------------------------------- */
.site .nav.scrolled{
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow-sm);
}

/* ---- inline code — the kit leaves <code> unstyled in .site ----------------- */
.site .spot-copy code,
.site .feature code,
.site .faq code{
  font-family:var(--mono);font-size:.8em;line-height:1;
  color:var(--primary-bright);background:var(--surface-sunken);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:2px 6px;white-space:nowrap;
}

/* ---- display type --------------------------------------------------------- */
.site .hero-title{font-size:var(--fs-display);letter-spacing:var(--tracking-tighter)}
@media (max-width:640px){.site .hero-title{font-size:var(--text-5xl)}}
.site .hero-title em{font-style:normal;color:var(--primary-bright)}

/* ---- code window (hero quick-start, theming snippet) ---------------------- */
.code-win{
  border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:var(--surface-sunken);box-shadow:var(--shadow-lg);overflow:hidden;
}
.code-win .cw-bar{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);
  background:var(--surface);
}
.code-win .cw-bar i{width:11px;height:11px;border-radius:50%;background:rgb(var(--border-rgb) / .18)}
.code-win .cw-bar i:first-child{background:rgb(var(--danger-rgb) / .75)}
.code-win .cw-bar i:nth-child(2){background:rgb(var(--warning-rgb) / .75)}
.code-win .cw-bar i:nth-child(3){background:rgb(var(--primary-rgb) / .75)}
.code-win .cw-name{margin-inline-start:auto;font-family:var(--mono);font-size:var(--text-xs);color:var(--muted)}
.code-win pre{
  margin:0;padding:var(--space-5);overflow-x:auto;
  font-family:var(--mono);font-size:var(--fs-code);line-height:var(--leading-relaxed);
  color:var(--text-2);
}
.code-win .ct{color:var(--text)}                       /* tag / punctuation   */
.code-win .ca{color:var(--primary-bright)}             /* attribute / token   */
.code-win .cs{color:var(--accent)}                     /* string / value      */
.code-win .cc{color:var(--muted);font-style:italic}    /* comment             */

/* ---- hero: code window + floating strata stack ---------------------------- */
.hero-stage{position:relative}
.hero-stage .code-win{position:relative;z-index:1}
.strata-stack{
  position:absolute;inset-inline-end:-18px;bottom:-30px;z-index:2;
  display:flex;flex-direction:column;gap:var(--space-2);width:212px;
}
.stratum{
  padding:var(--space-3) var(--space-4);border-radius:var(--radius);
  border:1px solid var(--line-strong);background:color-mix(in srgb, var(--surface-2) 80%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:var(--shadow);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  display:flex;align-items:center;gap:var(--space-3);
  transition:translate var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.stratum:hover{translate:0 -4px;box-shadow:var(--shadow-lg)}
.stratum small{display:block;font-weight:var(--weight-regular);color:var(--muted);font-size:var(--text-2xs)}
.stratum .dot{width:10px;height:10px;border-radius:50%;flex:none}
.stratum:nth-child(1) .dot{background:var(--accent)}
.stratum:nth-child(2) .dot{background:var(--primary)}
.stratum:nth-child(3) .dot{background:var(--info)}
.stratum:nth-child(1){translate:26px 0}
.stratum:nth-child(2){translate:13px 0}
@media (max-width:1200px){
  .strata-stack{inset-inline-end:0}
  .stratum:nth-child(1),.stratum:nth-child(2){translate:0 0}
}
@media (max-width:980px){.strata-stack{display:none}}

/* ---- logo marquee --------------------------------------------------------- */
.marquee{overflow:hidden;padding:var(--space-5) 0}
.marquee-track{display:flex;gap:var(--space-7);width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--display);font-weight:var(--weight-bold);font-size:var(--text-xl);
  color:var(--muted);white-space:nowrap;letter-spacing:var(--tracking-tight);
  transition:color var(--dur-2);
}
.marquee-track span:hover{color:var(--text)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

/* ---- kit bento ------------------------------------------------------------ */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4);margin-top:var(--space-6)}
.bento-card{
  position:relative;grid-column:span 2;padding:var(--space-5);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:translate var(--dur-3) var(--ease), border-color var(--dur-3), box-shadow var(--dur-3);
}
.bento-card:hover{translate:0 -4px;border-color:var(--primary-line);box-shadow:var(--shadow-lg)}
.bento-card.wide{grid-column:span 3}
.bento-card .fi{margin-bottom:var(--space-4)}
.bento-card h3{margin:0 0 var(--space-2);font-size:var(--fs-title)}
.bento-card p{margin:0;color:var(--text-2);font-size:var(--fs-ui);line-height:var(--leading-normal)}
.bento-card .kit-tag{
  position:absolute;top:var(--space-4);inset-inline-end:var(--space-4);
  font-family:var(--mono);font-size:var(--text-2xs);color:var(--primary-bright);
  background:var(--primary-soft);border:1px solid var(--primary-line);
  padding:2px 8px;border-radius:var(--radius-pill);
}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.bento-card,.bento-card.wide{grid-column:span 1}}
@media (max-width:640px){.bento{grid-template-columns:1fr}}

/* ---- live theme chips ------------------------------------------------------ */
.theme-chips{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}
.theme-chips .chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-semibold);cursor:pointer;
  transition:border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.theme-chips .chip:hover{color:var(--text)}
.theme-chips .chip[aria-pressed="true"]{
  border-color:var(--primary-line);color:var(--text);
  box-shadow:0 0 0 3px var(--primary-ring);
}
.theme-chips .sw{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-strong);flex:none}

/* ---- CTA — flat band ------------------------------------------------------- */
.site .cta{background:var(--surface);border:1px solid var(--primary-line)}
.site .cta::before{content:none}

/* ---- scroll reveal (html.js only, so no-JS users lose nothing) ------------- */
html.js [data-reveal]{opacity:0;translate:0 22px;transition:opacity .6s var(--ease), translate .6s var(--ease)}
html.js [data-reveal].revealed{opacity:1;translate:0 0}
html.js [data-reveal="2"].revealed{transition-delay:.08s}
html.js [data-reveal="3"].revealed{transition-delay:.16s}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1;translate:none;transition:none}
}