/* ==========================================================================
   debands.xyz — page layer. Tokens, surfaces and buttons come from
   brand-kit.css; this file only lays the page out and adds what is its own.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.5;
  background: var(--lg-ground); color: var(--lg-ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lg-ink); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px; background: var(--lg-ink); color: var(--lg-btn-ink);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: clamp(64px, 10vw, 112px); }
.soft  { color: var(--lg-ink-soft); }
.faint { color: var(--lg-ink-faint); }
.h2 { font-size: clamp(34px, 4.6vw, 52px); }
.lede { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--lg-ink-soft); }
.section-head { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .lg-eyebrow { margin-bottom: 16px; }
.section-head .h2 { margin-bottom: 16px; }

/* ---- nav ---------------------------------------------------------------- */
.site-nav { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding-inline: 16px; }
.site-nav .lg-navbar {
  max-width: 72rem; margin: 0 auto; height: 58px;
  padding-inline: 22px 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-links { display: none; align-items: center; gap: 30px; }
.nav-links a, .nav-quiet {
  font-size: 13px; color: var(--lg-ink-faint); text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
.nav-links a:hover, .nav-quiet:hover { color: var(--lg-ink); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-quiet { padding: 8px 12px; }
.site-nav .lg-btn { font-size: 13px; padding: 9px 16px; white-space: nowrap; }
@media (min-width: 860px) { .nav-links { display: flex; } }
@media (max-width: 640px) {
  .site-nav .lg-navbar { padding-inline: 16px 7px; height: 52px; }
  .site-nav .lg-wordmark { height: 17px; }
  .site-nav .lg-btn { font-size: 12px; padding: 8px 13px; }
}
@media (max-width: 380px) { .nav-quiet { display: none; } }

/* ---- hero --------------------------------------------------------------- */
.hero {
  min-height: 100dvh; display: flex; align-items: center;
  padding-top: clamp(112px, 15vh, 180px); padding-bottom: clamp(56px, 9vh, 120px);
}
.hero__grid { display: grid; gap: clamp(48px, 6vw, 80px); align-items: center; }
.hero__copy { text-align: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 13px; margin-bottom: 30px;
  font-size: 13px; color: var(--lg-ink-soft);
}
.pulse { width: 8px; height: 8px; border-radius: 9999px; background: #34d399; animation: pulse 4s ease-in-out infinite; }
html:not(.dark) .pulse { background: #059669; }
@keyframes pulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
.hero__title { font-size: clamp(46px, 5.3vw, 78px); margin-bottom: 24px; }
.hero__title em { font-style: italic; }
.hero__sub { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--lg-ink-soft); max-width: 34rem; margin: 0 auto 36px; }
.hero__cta { display: flex; flex-direction: column; gap: 12px; justify-content: center; margin-bottom: 32px; }
.proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 13px; color: var(--lg-ink-faint);
}
.proof li { display: flex; align-items: center; gap: 7px; }
.proof svg { width: 15px; height: 15px; color: var(--lg-ink-soft); }
@media (min-width: 560px) { .hero__cta { flex-direction: row; } }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.15fr 1fr; }
  .hero__copy { text-align: left; }
  .hero__sub { margin-left: 0; }
  .hero__cta, .proof { justify-content: flex-start; }
}
@media (max-width: 1023px) { .hero { min-height: auto; } }

/* The band, on its stage, with two glass notes that say what a tap does. */
.hero__visual { position: relative; max-width: 520px; width: 100%; margin: 0 auto; }

/* ---- band scene ----------------------------------------------------------
   Everything is sized from --band-h, the band's height, so the plinth, the
   signal rings and the scene box stay in proportion at every width. The
   illustration is about two thirds as wide as it is tall. */
.band-scene {
  --band-h: clamp(260px, 40vh, 390px);
  position: relative; margin: 0 auto;
  width: calc(var(--band-h) * 1.2); max-width: 100%;
  height: calc(var(--band-h) * 1.16);
}
@media (max-width: 1023px) { .band-scene { --band-h: clamp(240px, 60vw, 330px); } }

/* Light pool behind the set, from the same upper-left source as .lg-aura. */
.band-scene::before {
  content: ""; position: absolute; left: 50%; top: 42%; z-index: 0;
  width: 170%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 40%, transparent 66%);
  filter: blur(24px); pointer-events: none;
}
html:not(.dark) .band-scene::before { background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 40%, transparent 66%); }

/* NFC signal: rings that leave the band and fade, the tap made visible. */
.band-signal { position: absolute; left: 50%; top: 44%; z-index: 0; width: 0; height: 0; }
.band-signal span {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--band-h) * 0.78); aspect-ratio: 1; border-radius: 9999px;
  border: 1px solid var(--lg-edge-bright);
  transform: translate(-50%, -50%) scale(.5); opacity: 0;
  animation: band-signal 5.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.band-signal span:nth-child(2) { animation-delay: 1.8s; }
.band-signal span:nth-child(3) { animation-delay: 3.6s; }
@keyframes band-signal {
  0%   { transform: translate(-50%, -50%) scale(.5);  opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

/* Glass plinth: a disc seen from just above, same glass as .lg-panel. */
.band-plinth {
  position: absolute; left: 50%; z-index: 1;
  top: calc(var(--band-h) * 0.83);
  width: calc(var(--band-h) * 1.02); height: calc(var(--band-h) * 0.21);
  transform: translateX(-50%); border-radius: 50%;
  border: 1px solid var(--lg-edge-bright);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0,0,0,0.55), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.05));
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -10px 24px -12px rgba(255,255,255,0.10), 0 34px 60px -24px rgba(0,0,0,0.9);
}
/* The plinth's front edge — a second, thinner ellipse gives the disc thickness. */
.band-plinth::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: 14%; bottom: -14%;
  border-radius: 50%; border-bottom: 1px solid var(--lg-edge); z-index: -1;
}
html:not(.dark) .band-plinth {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(9,9,11,0.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6) 60%, rgba(255,255,255,0.8));
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 30px 50px -26px rgba(9,9,11,0.3);
}

/* The band. The static render and the live canvas share one square box: both
   draw into the same frame about the band's centre (EXTENT in the Python script
   and in band3d.js), so swapping one for the other does not move the band.
   Float is the slow idle bob. */
.band-tilt, .band-3d {
  position: absolute; left: 50%; z-index: 2;
  top: calc(var(--band-h) * -0.28);
  width: calc(var(--band-h) * 1.56); aspect-ratio: 1;
  transform: translateX(-50%);
}
.band-float { position: relative; height: 100%; animation: band-float 8s ease-in-out infinite; }
@keyframes band-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.band-img { display: block; width: 100%; height: 100%; }
.band-img, .band-3d canvas {
  filter: drop-shadow(0 18px 22px rgba(0,0,0,0.5)) drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
/* White fabric on the light ground needs a firmer edge. */
html:not(.dark) .band-img, html:not(.dark) .band-3d canvas {
  filter: drop-shadow(0 0 1px rgba(9,9,11,0.3)) drop-shadow(0 16px 20px rgba(9,9,11,0.16));
}
/* Interactive band (band3d.js): hidden until the script has mounted it. */
.band-3d { display: none; }
.band-scene.is-3d .band-3d { display: block; }
.band-scene.is-3d .band-tilt { visibility: hidden; }
.band-3d canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab; outline: none;
  /* Vertical swipes still scroll the page on touch; horizontal ones turn the band. */
  touch-action: pan-y;
  animation: band-float 8s ease-in-out infinite;
}
.band-3d canvas:active { cursor: grabbing; }
.band-3d canvas:focus-visible { outline: 1.5px dashed var(--lg-edge-bright); outline-offset: -10px; border-radius: 28px; }
.band-scene { margin-bottom: 30px; }
.band-hint {
  position: absolute; left: 50%; top: calc(var(--band-h) * 1.1); z-index: 3;
  transform: translateX(-50%); display: none; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 9999px; white-space: nowrap; pointer-events: none;
  font-size: 11.5px; color: var(--lg-ink-soft);
  background: var(--lg-pane); border: 1px solid var(--lg-edge);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity .5s ease;
}
.band-scene.is-3d .band-hint { display: inline-flex; }
.band-scene.was-dragged .band-hint { opacity: 0; }
/* The notes sit over the band but must not catch the drag. */
.tap-note { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .band-3d canvas { animation: none; }
  .band-float { animation: none; }
  .band-signal span { animation: none; opacity: .5; transform: translate(-50%, -50%) scale(1); }
  .band-signal span:nth-child(n+2) { display: none; }
}
.tap-note {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 16px;
  white-space: nowrap;
}
.tap-note__icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-content: center;
  background: var(--lg-pane-lift); border: 1px solid var(--lg-edge); color: var(--lg-ink);
  font-size: 11px; font-weight: 600;
}
.tap-note__icon svg { width: 16px; height: 16px; }
.tap-note b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.tap-note span { font-size: 11px; color: var(--lg-ink-faint); }
.tap-note--a { top: 16%; right: -6%; animation: note-float 7s ease-in-out infinite; }
.tap-note--b { bottom: 22%; left: -8%; animation: note-float 8s ease-in-out -3s infinite; }
@keyframes note-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@media (max-width: 560px) {
  .tap-note { transform: scale(.8); }
  .tap-note--a { right: -3%; top: 6%; animation: none; transform-origin: top right; }
  .tap-note--b { left: -3%; bottom: 20%; animation: none; transform-origin: bottom left; }
}

/* ---- partners ----------------------------------------------------------- */
.partners { padding-block: 8px clamp(40px, 6vw, 72px); text-align: center; }
.partners .lg-eyebrow { margin-bottom: 18px; }
.partners ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; }
.partners li {
  font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(22px, 2.4vw, 28px);
  color: var(--lg-ink-faint); letter-spacing: -0.01em;
}

/* ---- the tap ------------------------------------------------------------ */
.split { display: grid; gap: clamp(48px, 6vw, 88px); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip > :first-child { order: 2; }
}
.steps { display: grid; gap: 12px; margin-top: 36px; }
.step { display: flex; gap: 16px; padding: 18px 20px; border-radius: 18px; }
.step .lg-eyebrow { padding-top: 3px; flex-shrink: 0; }
.step h3 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.step p { font-size: 14px; color: var(--lg-ink-faint); }

/* The profile a tap opens — the recipient's view, in a phone. */
.phone {
  position: relative; width: 100%; max-width: 330px; margin: 0 auto;
  border-radius: 44px; padding: 10px;
}
.phone__screen {
  border-radius: 35px; overflow: hidden; background: var(--lg-ground);
  border: 1px solid var(--lg-edge); min-height: 580px;
  display: flex; flex-direction: column;
}
.phone__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 6px; font-size: 12px; font-weight: 600;
}
.phone__notch { width: 90px; height: 24px; border-radius: 9999px; background: #000; }
html:not(.dark) .phone__notch { background: #09090b; }
.phone__url {
  margin: 6px 16px 0; padding: 7px 12px; border-radius: 10px;
  background: var(--lg-pane); border: 1px solid var(--lg-edge);
  font-size: 11px; color: var(--lg-ink-faint); text-align: center;
}
.profile { padding: 22px 18px 20px; display: grid; gap: 14px; }
.profile__head { text-align: center; }
.profile__avatar {
  width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 9999px;
  display: grid; place-content: center; font-size: 22px; font-weight: 600;
  background: linear-gradient(160deg, var(--lg-pane-lift), var(--lg-pane));
  border: 1px solid var(--lg-edge-bright); color: var(--lg-ink-soft);
}
.profile__name { font-family: 'Instrument Serif', Georgia, serif; font-size: 28px; line-height: 1.05; }
.profile__role { font-size: 12.5px; color: var(--lg-ink-faint); margin-top: 3px; }
.profile__via {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 9999px; font-size: 11px; color: var(--lg-ink-soft);
  background: var(--lg-pane); border: 1px solid var(--lg-edge);
}
.profile__via svg { width: 12px; height: 12px; }
.profile__actions { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 8px; }
.profile__actions .lg-btn { font-size: 11.5px; padding: 10px 8px; border-radius: 11px; white-space: nowrap; }
.profile__links { display: grid; gap: 7px; }
.plink {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  background: var(--lg-pane); border: 1px solid var(--lg-edge); font-size: 12.5px;
}
.plink svg { width: 16px; height: 16px; color: var(--lg-ink-soft); flex-shrink: 0; }
.plink__go { margin-left: auto; color: var(--lg-ink-faint); font-size: 11px; }

/* ---- statement ---------------------------------------------------------- */
.statement { text-align: center; }
.statement .h2 { font-size: clamp(38px, 5.6vw, 68px); margin: 18px auto 24px; max-width: 16ch; }
.statement .lede { max-width: 38rem; margin: 0 auto; }

/* ---- collection --------------------------------------------------------- */
.collection-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.collection-head .section-head { margin-bottom: 0; }
.collection-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(36px, 5vw, 52px);
}
@media (min-width: 720px)  { .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .collection-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.band-card { display: block; padding: 8px 8px 14px; border-radius: 20px; text-decoration: none; }
.band-card .product-plate { aspect-ratio: 1; border-radius: 14px; }
.band-card .product-plate img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.band-card:hover .product-plate img { transform: scale(1.05); }
.band-card__name {
  margin: 12px 6px 4px; font-size: 13px; font-weight: 500; line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.band-card__meta { display: flex; align-items: baseline; gap: 7px; margin: 0 6px; font-size: 13px; }
.band-card__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.band-card__was { color: var(--lg-ink-faint); text-decoration: line-through; font-size: 12px; }
.band-card__tag {
  margin-left: auto; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lg-ink-faint); border: 1px solid var(--lg-edge); border-radius: 9999px; padding: 2px 7px;
}
.band-card--out .product-plate img { opacity: .55; filter: grayscale(.6); }

.band-facts {
  display: grid; gap: 1px; margin-top: clamp(20px, 3vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; padding: 0;
}
@media (min-width: 860px) { .band-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band-fact { padding: 22px 22px 20px; box-shadow: 0 0 0 1px var(--lg-edge); }
.band-fact b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.band-fact span { font-size: 13px; color: var(--lg-ink-faint); }

/* ---- app ---------------------------------------------------------------- */
.app-stage { position: relative; max-width: 400px; margin: 0 auto; width: 100%; }
@media (min-width: 1024px) { .app-stage { position: sticky; top: 120px; align-self: start; margin-top: 40px; } }
.feature-grid { display: grid; gap: 10px; margin: 32px 0 36px; }
@media (min-width: 560px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature { padding: 16px 18px; border-radius: 18px; }
.feature svg { width: 19px; height: 19px; margin-bottom: 10px; color: var(--lg-ink); }
.feature h3 { font-size: 14.5px; font-weight: 500; margin-bottom: 3px; }
.feature p { font-size: 13px; color: var(--lg-ink-faint); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 559px) { .cta-row .lg-btn { width: 100%; } }

/* ---- faq ---------------------------------------------------------------- */
.faq-grid { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 0.8fr 1.2fr; align-items: start; } }
.faq-list { display: grid; gap: 10px; }
.faq { border-radius: 18px; }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; font-size: 15px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 10px; height: 10px; flex-shrink: 0;
  border-right: 1.5px solid var(--lg-ink-faint); border-bottom: 1.5px solid var(--lg-ink-faint);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.faq[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq p { padding: 0 20px 18px; font-size: 14px; line-height: 1.6; color: var(--lg-ink-soft); }
.faq p a { color: var(--lg-ink); text-underline-offset: 3px; }

/* ---- closing ------------------------------------------------------------ */
.closing {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 8vw, 88px) clamp(22px, 5vw, 64px);
  border-radius: 28px;
}
.closing::before {
  content: ""; position: absolute; left: 50%; top: -180px; width: 560px; height: 360px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,255,255,0.14), transparent 70%);
}
html:not(.dark) .closing::before { background: radial-gradient(ellipse, rgba(255,255,255,0.95), transparent 70%); }
.closing > * { position: relative; }
.closing .h2 { font-size: clamp(40px, 6vw, 72px); margin: 16px 0 18px; }
.closing .lede { max-width: 30rem; margin: 0 auto 34px; }
.closing .cta-row { justify-content: center; }

/* ---- footer ------------------------------------------------------------- */
.site-footer { padding-block: 40px 56px; }
.site-footer .wrap {
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.footer-links a { font-size: 13px; color: var(--lg-ink-faint); text-decoration: none; transition: color .18s ease; }
.footer-links a:hover { color: var(--lg-ink); }
.footer-copy { font-size: 12.5px; color: var(--lg-ink-faint); }
@media (min-width: 860px) {
  .site-footer .wrap { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-brand { display: flex; align-items: center; gap: 18px; }
}

/* ---- theme toggle ------------------------------------------------------- */
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  width: 42px; height: 42px; border-radius: 9999px; cursor: pointer;
  display: grid; place-content: center; color: var(--lg-ink-soft);
  border: 1px solid var(--lg-edge); background: var(--lg-pane);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: color .18s ease, border-color .18s ease;
}
.theme-toggle:hover { color: var(--lg-ink); border-color: var(--lg-edge-bright); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
html:not(.dark) .theme-toggle .sun { display: block; }
html:not(.dark) .theme-toggle .moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pulse, .tap-note--a, .tap-note--b { animation: none; }
}