/* Aurora Yoga — MALA BEAD STRAND / SUN SALUTATION DESK
   LEFT vertical mala strand with graduated sandalwood/rudraksha beads as nav
   (not Coral LEFT shot-line depth tags, not Cedar LEFT thermometer °C,
   not Moss LEFT terrace elev, not Alpine LEFT cairn, not Amber LEFT strop,
   not Copper LEFT valves, not Lex LEFT spines, not Hotel LEFT elevator,
   not Nocturne LEFT vinyl sleeves, not Velvet LEFT filmstrip,
   not Sakura LEFT washi, not Fromage LEFT wax wheels,
   not Grit BOTTOM holds, not Drift RIGHT paddles, not Ember RIGHT tongs) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Nunito:wght@400;500;600;700;800&display=swap");

:root {
  --dusk: #1e1030;
  --indigo: #312e81;
  --lotus: #c026d3;
  --aurora: #a78bfa;
  --rose: #f9a8d4;
  --gold: #fbbf24;
  --mist: #faf5ff;
  --mute: #9ca3af;
  --rail: 112px;
  --wrap: min(1080px, calc(100% - 2.2rem));
  --font: "Nunito", system-ui, sans-serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.55 var(--font);
  color: var(--dusk);
  background:
    radial-gradient(900px 520px at 70% 0%, rgba(167,139,250,0.28), transparent 55%),
    radial-gradient(640px 400px at 20% 90%, rgba(249,168,212,0.22), transparent 50%),
    linear-gradient(180deg, #ede9fe 0%, var(--mist) 40%, #fce7f3 100%);
  overflow-x: hidden;
  padding-left: var(--rail);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(251,191,36,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 50%, rgba(192,38,211,0.06) 0 1.5px, transparent 3px),
    radial-gradient(circle at 50% 80%, rgba(167,139,250,0.08) 0 2px, transparent 3px);
}
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.55rem;
  text-wrap: balance;
  color: var(--dusk);
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.65rem, 2.8vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.55vw, 1.4rem); }
h1 em { font-style: italic; color: var(--lotus); font-weight: 600; }
h1 span { color: var(--indigo); }

.back-st {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 160;
  padding: 0.42rem 0.7rem;
  font: 700 11px/1 var(--mono);
  background: var(--dusk);
  color: var(--mist);
  border: 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.seal {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: max(14px, env(safe-area-inset-right));
  z-index: 160;
  width: 66px; height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-decoration: none;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%),
    conic-gradient(from 200deg, #c026d3, #a78bfa, #f9a8d4, #fbbf24, #c026d3);
  color: #fff;
  border: 2px solid var(--gold);
  font: 700 0.48rem/1.05 var(--mono);
  text-align: center;
  box-shadow: 0 0 18px rgba(192,38,211,0.35), 3px 3px 0 rgba(30,16,48,0.2);
}
.seal b { display: block; font-size: 0.95rem; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* ===== NO standard header — LEFT MALA BEAD STRAND ===== */
.mala {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 150;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(90deg, #160a24 0%, #1e1030 100%);
  border-right: 3px solid var(--aurora);
  box-shadow: 14px 0 32px rgba(30,16,48,0.35);
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}
.mala::before {
  /* silk cord */
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background:
    linear-gradient(180deg, #f9a8d4, #c026d3 30%, #a78bfa 70%, #fbbf24);
  box-shadow: 0 0 8px rgba(192,38,211,0.4);
  z-index: 0;
  pointer-events: none;
}
.mala__cap {
  position: relative;
  z-index: 1;
  margin: 12px 14px 6px;
  padding: 0.65rem 0.3rem;
  text-align: center;
  text-decoration: none;
  color: var(--mist);
  background: rgba(192,38,211,0.22);
  border: 1px solid rgba(167,139,250,0.5);
  border-radius: 50%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
}
.mala__cap strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.mala__cap small {
  display: block;
  margin-top: 0.2rem;
  font: 600 0.42rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,245,255,0.55);
}
.mala__guru {
  position: relative;
  z-index: 1;
  margin: 4px 18px 8px;
  padding: 0.35rem 0.25rem;
  text-align: center;
  font-family: var(--mono);
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.12);
  color: var(--mist);
  border-radius: 999px;
}
.mala__guru b {
  display: block;
  font-size: 0.8rem;
  color: var(--gold);
  line-height: 1;
}
.mala__guru span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.4rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250,245,255,0.5);
}
.mala-toggle {
  display: none;
  position: relative;
  z-index: 1;
  margin: 0.4rem auto;
  width: 46px; height: 40px;
  background: transparent;
  border: 1px solid rgba(167,139,250,0.5);
  color: var(--mist);
  cursor: pointer;
  place-items: center;
  gap: 4px;
  flex-direction: column;
  padding: 0;
  border-radius: 8px;
}
.mala-toggle i {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
}
.mala__strand {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.5rem 1rem;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}
/* mala beads — round sandalwood / rudraksha / gemstone */
.mala__strand a {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  text-decoration: none;
  font: 700 0.48rem/1.05 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mist);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0 12%, transparent 14%),
    radial-gradient(circle at 50% 50%, #a78bfa, #6d28d9 60%, #3b0764);
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,0.35);
  box-shadow:
    inset -3px -4px 8px rgba(0,0,0,0.35),
    0 3px 0 rgba(0,0,0,0.25);
  transition: transform 0.12s, filter 0.12s;
}
.mala__strand a span {
  position: relative;
  z-index: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  max-width: 90%;
}
.mala__strand a:nth-child(even) {
  width: 46px; height: 46px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.4) 0 12%, transparent 14%),
    radial-gradient(circle at 50% 50%, #f9a8d4, #db2777 55%, #831843);
}
.mala__strand a:nth-child(3n) {
  width: 48px; height: 48px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.35) 0 12%, transparent 14%),
    radial-gradient(circle at 50% 50%, #fde68a, #d97706 55%, #78350f);
  color: #1e1030;
}
.mala__strand a:nth-child(3n) span { text-shadow: none; }
.mala__strand a:nth-child(5n) {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.4) 0 12%, transparent 14%),
    radial-gradient(circle at 50% 50%, #c4b5fd, #4c1d95 55%, #1e1030);
}
.mala__strand a[aria-current="page"],
.mala__strand a:hover {
  transform: scale(1.12);
  filter: brightness(1.15);
  border-color: var(--gold);
  z-index: 2;
}

.shell { position: relative; z-index: 1; }
.wrap { width: var(--wrap); margin-inline: auto; }
.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 1rem 0 0.2rem;
}
.ribbon span {
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.42rem 0.55rem;
  border: 1px dashed rgba(49,46,129,0.25);
  background: rgba(250,245,255,0.75);
  color: var(--mute);
  border-radius: 999px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lotus);
  margin-bottom: 0.65rem;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, #a78bfa, #6d28d9);
  border: 1px solid rgba(251,191,36,0.45);
}
.lead { font-size: 1.05rem; max-width: 58ch; color: #4c1d95; }
.muted { color: var(--mute); }
.note {
  margin: 0.9rem 0 1.1rem;
  padding: 0.85rem 1rem;
  background: rgba(192,38,211,0.08);
  border-left: 3px solid var(--lotus);
  color: #3b0764;
  font-size: 0.95rem;
}
.section { padding: 2.1rem 0 0.4rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.72rem 1.05rem;
  border: 1.5px solid var(--dusk);
  background: transparent;
  color: var(--dusk);
  font: 700 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(30,16,48,0.08);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(30,16,48,0.14); }
.btn-aurora { background: var(--lotus); border-color: #86198f; color: #fff; }
.btn-gold { background: var(--gold); border-color: #d97706; color: var(--dusk); }
.btn-violet { background: var(--aurora); border-color: #7c3aed; color: #fff; }
.btn-ghost { background: rgba(250,245,255,0.9); }

/* Sun salutation desk hero */
.sun {
  display: grid;
  grid-template-columns: 1.3fr 0.95fr;
  gap: 1.1rem;
  padding: 1.15rem 0 0.4rem;
  align-items: start;
}
.sun__desk {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--dusk);
  padding: 1.4rem 1.3rem 1.25rem;
  overflow: hidden;
  min-height: 360px;
  box-shadow: 8px 10px 0 rgba(30,16,48,0.08);
  border-radius: 28px 4px 28px 4px;
}
.sun__desk::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* soft sun arc */
    radial-gradient(ellipse 80% 50% at 85% -10%, rgba(251,191,36,0.28), transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(192,38,211,0.1), transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(167,139,250,0.05) 28px 29px);
}
.sun__desk::after {
  content: "108 бусин";
  position: absolute;
  top: 16px; right: 18px;
  font: 600 0.58rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.sun__desk > * { position: relative; z-index: 1; }

.meters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin: 1.15rem 0 0.2rem;
}
.meters article {
  border: 1px solid rgba(49,46,129,0.12);
  background: rgba(237,233,254,0.85);
  padding: 0.65rem 0.7rem;
  position: relative;
  border-radius: 16px;
}
.meters article::before {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, #a78bfa, #6d28d9);
}
.meters article:nth-child(2)::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, #f9a8d4, #db2777);
}
.meters article:nth-child(3)::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.5) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 50%, #fde68a, #d97706);
}
.meters b {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dusk);
}
.meters span {
  display: block;
  margin-top: 0.2rem;
  font: 500 0.62rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.flow-stack { display: grid; gap: 0.65rem; }
.flow {
  background: #fff;
  border: 1.5px solid var(--aurora);
  padding: 0.85rem 0.95rem;
  position: relative;
  box-shadow: 4px 4px 0 rgba(167,139,250,0.15);
  border-radius: 20px 4px 20px 4px;
  background-image: linear-gradient(120deg, rgba(192,38,211,0.06), transparent 40%);
}
.flow::before {
  content: "";
  position: absolute;
  left: 14px; top: 18px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #a78bfa, #6d28d9);
  border: 1px solid rgba(251,191,36,0.4);
}
.flow--hot {
  border-color: var(--lotus);
  background: #fdf4ff;
}
.flow:nth-child(2)::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #f9a8d4, #db2777);
}
.flow:nth-child(3)::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.45) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #fde68a, #d97706);
}
.flow__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 0.35rem 2.6rem;
}
.flow h3 { margin: 0 0 0 2.6rem; font-size: 1.15rem; }
.flow p { margin: 0.2rem 0 0 2.6rem; color: var(--mute); font-size: 0.9rem; font-family: var(--font); }
.flow .price {
  margin: 0.45rem 0 0 2.6rem;
  font: 700 1.05rem/1 var(--mono);
  color: var(--lotus);
}

.tiers, .split-3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}
.split-3 { grid-template-columns: repeat(3, 1fr); }
.tier {
  background: #fff;
  border: 1px solid rgba(49,46,129,0.12);
  padding: 0.95rem 0.9rem;
  box-shadow: 3px 3px 0 rgba(30,16,48,0.05);
  border-radius: 16px;
}
.tier .n {
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--lotus);
  margin-bottom: 0.45rem;
}
.tier h3 { margin-bottom: 0.25rem; }
.tier p { margin: 0; font-size: 0.9rem; font-family: var(--font); }

.board {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 1rem;
  margin-top: 0.85rem;
}
.tray { display: grid; gap: 0.5rem; }
.tray-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  background: #fff;
  border: 1px solid rgba(49,46,129,0.1);
  border-radius: 16px;
}
.tray-row .code {
  font: 700 0.55rem/1 var(--mono);
  letter-spacing: 0.04em;
  color: #fff;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.35) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #c026d3, #6d28d9);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(251,191,36,0.4);
}
.tray-row h3 { margin: 0; font-size: 1.1rem; }
.tray-row p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--mute); font-family: var(--font); }
.tray-row .price {
  font: 700 0.9rem/1 var(--mono);
  color: var(--lotus);
  white-space: nowrap;
}

.panel {
  background: #fff;
  border: 1px solid rgba(49,46,129,0.12);
  padding: 1rem 1.05rem;
  margin-bottom: 0.7rem;
  border-radius: 16px;
}
.panel.dark {
  background: var(--dusk);
  color: var(--mist);
  border-color: var(--dusk);
}
.panel.dark .kv span { color: rgba(250,245,255,0.75); }
.panel h3 { margin-bottom: 0.7rem; }
.panel.dark h3 { color: var(--mist); }
.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(49,46,129,0.12);
  font-size: 0.92rem;
}
.panel.dark .kv { border-bottom-color: rgba(250,245,255,0.12); }
.kv:last-child { border-bottom: 0; }
.kv b {
  font: 700 0.68rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lotus);
}
.panel.dark .kv b { color: var(--gold); }

.menu-head {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 280px);
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.9rem;
}
.menu-head input[type="search"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1.5px solid var(--dusk);
  background: #fff;
  font: 500 0.9rem/1.2 var(--font);
  color: var(--dusk);
  border-radius: 999px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.chip {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--dusk);
  background: #fff;
  font: 700 0.65rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--dusk);
  border-radius: 999px;
}
.chip.on { background: var(--lotus); color: #fff; border-color: #86198f; }

.menu-sheet { display: grid; gap: 0.55rem; }
.bead-card {
  display: grid;
  grid-template-columns: 56px 1.2fr 1.4fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(49,46,129,0.12);
  box-shadow: 2px 2px 0 rgba(30,16,48,0.05);
  border-radius: 16px;
}
.bead-card .code {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.4) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, #c026d3, #6d28d9);
  color: #fff;
  font: 700 0.48rem/1 var(--mono);
  border-radius: 50%;
  border: 1px solid rgba(251,191,36,0.4);
}
.bead-card .cat {
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lotus);
  margin-bottom: 0.2rem;
}
.bead-card h3 { margin: 0.1rem 0 0; font-size: 1.1rem; }
.bead-card .blurb { margin: 0; font-size: 0.88rem; font-family: var(--font); }
.bead-card .price {
  font: 700 1rem/1 var(--mono);
  color: var(--dusk);
  white-space: nowrap;
}

.form {
  display: grid;
  gap: 0.7rem;
  background: #fff;
  border: 1.5px solid var(--dusk);
  padding: 1.1rem;
  box-shadow: 4px 4px 0 rgba(30,16,48,0.07);
  border-radius: 20px;
}
.form label {
  display: grid;
  gap: 0.35rem;
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(49,46,129,0.2);
  background: #faf5ff;
  font: 500 0.95rem/1.3 var(--font);
  color: var(--dusk);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 12px;
}
.form textarea { min-height: 110px; resize: vertical; }

.faq details {
  background: #fff;
  border: 1px solid rgba(49,46,129,0.12);
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 14px;
}
.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  color: var(--dusk);
  font-size: 1.15rem;
}
.faq p { margin: 0.55rem 0 0; font-family: var(--font); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}
.person {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid rgba(49,46,129,0.12);
  border-radius: 16px;
}
.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%),
    conic-gradient(from 200deg, #c026d3, #a78bfa, #f9a8d4, #fbbf24, #c026d3);
  border: 2px solid var(--gold);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-top: 1rem;
}
.g {
  min-height: 140px;
  display: grid;
  place-items: end start;
  padding: 0.85rem;
  font: 700 0.7rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
  background:
    linear-gradient(180deg, transparent 35%, rgba(30,16,48,0.88)),
    radial-gradient(ellipse at 40% 30%, rgba(192,38,211,0.4), transparent 45%),
    linear-gradient(135deg, #6d28d9, var(--dusk) 55%, #312e81);
  border: 1px solid rgba(30,16,48,0.25);
  border-radius: 20px 4px 20px 4px;
}
.g:nth-child(2n) {
  background:
    linear-gradient(180deg, transparent 35%, rgba(30,16,48,0.88)),
    radial-gradient(circle at 60% 40%, rgba(249,168,212,0.45), transparent 50%),
    linear-gradient(160deg, #86198f, var(--dusk));
}
.g:nth-child(3n) {
  background:
    linear-gradient(180deg, transparent 35%, rgba(30,16,48,0.88)),
    radial-gradient(circle at 50% 25%, rgba(251,191,36,0.4), transparent 42%),
    linear-gradient(120deg, var(--dusk), #4c1d95);
}

.buyer {
  width: 100%;
  margin-top: 1.3rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.buyer th, .buyer td {
  border: 1px solid rgba(49,46,129,0.14);
  padding: 0.75rem 0.9rem;
  text-align: left;
  background: rgba(255,255,255,0.9);
}
.buyer th {
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lotus);
  background: rgba(192,38,211,0.08);
}

.footer {
  margin-top: 2.4rem;
  padding: 1.6rem 0 1.2rem;
  border-top: 1px solid rgba(49,46,129,0.12);
  background: rgba(30,16,48,0.04);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.2rem;
}
.footer p { margin: 0.35rem 0 0; color: var(--mute); font-size: 0.92rem; font-family: var(--font); }
.footer a { text-decoration: underline; text-underline-offset: 2px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--dusk);
  color: var(--mist);
  font: 600 0.78rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  border: 1px solid var(--aurora);
  border-radius: 999px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.45s, transform 0.45s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .sun, .board, .footer-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .bead-card { grid-template-columns: 52px 1fr auto; }
  .bead-card .blurb { display: none; }
  .menu-head { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .mala__guru { display: none; }
}

@media (max-width: 720px) {
  :root { --rail: 72px; }
  body { padding-left: 0; padding-top: 72px; }
  .mala {
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%;
    height: 72px;
    flex-direction: row;
    align-items: center;
    border-right: 0;
    border-bottom: 3px solid var(--aurora);
    box-shadow: 0 12px 28px rgba(30,16,48,0.3);
    padding-top: env(safe-area-inset-top);
  }
  .mala::before {
    top: auto; bottom: 4px; left: 0; right: 0;
    width: auto; height: 3px;
    margin: 0;
    background: linear-gradient(90deg, #f9a8d4, #c026d3, #a78bfa, #fbbf24);
  }
  .mala__cap {
    margin: 0.4rem 0.35rem 0.5rem 0.65rem;
    width: 52px; height: 52px;
    aspect-ratio: auto;
    border-radius: 50%;
    padding: 0.3rem;
  }
  .mala__cap small { display: none; }
  .mala__strand {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: #160a24;
    border-bottom: 2px solid var(--aurora);
    max-height: 60vh;
    padding: 0.55rem;
    gap: 0.4rem;
    overflow-y: auto;
  }
  .mala__strand.is-open { display: flex; }
  .mala__strand a {
    width: 100%;
    height: 48px;
    border-radius: 999px;
  }
  .mala-toggle { display: grid; margin: auto 0.75rem 0.4rem auto; }
  .meters, .split-3, .team-grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr 1fr; }
  .sun__desk::after { display: none; }
  .seal { width: 56px; height: 56px; }
  .bead-card { grid-template-columns: 48px 1fr; }
  .bead-card .price, .bead-card button { grid-column: 2; }
  .back-st { top: calc(72px + 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* NAV-FIX: always-visible back + working mobile menu */
.back-st{
  position:fixed!important;
  z-index:9999!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:.45rem .75rem!important;
  background:#111!important;
  color:#f5f5f5!important;
  border:0!important;
  box-shadow:0 4px 14px rgba(0,0,0,.28)!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  writing-mode:horizontal-tb!important;
  clip-path:none!important;
  mix-blend-mode:normal!important;
  right:auto!important;
  bottom:auto!important;
}
.back-st{top:max(10px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;}

/* LAYOUT-FIX: hero composition variant */
@media(min-width:901px){.sun{grid-template-columns:1.25fr .9fr!important;} .sun>:first-child{order:0!important;} .sun>:last-child{order:1!important;}}

@media (max-width:820px){
  [class*="toggle"],.nav-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;cursor:pointer;
    pointer-events:auto!important;visibility:visible!important;opacity:1!important;
    background:#111!important;color:#fff!important;
    border:1px solid rgba(255,255,255,.35)!important;
    z-index:10002!important;
  }
  [class*="toggle"] i,.nav-toggle i{background:#fff!important;display:block!important;}
  
  .mala{
    top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100%!important;height:auto!important;min-height:58px!important;
    max-height:none!important;flex-direction:row!important;align-items:center!important;
    overflow:visible!important;z-index:9000!important;
    padding-top:env(safe-area-inset-top)!important;
  }
  .mala [class*="__rack"],.mala [class*="__shelf"],.mala [class*="__strand"],.mala [class*="__frames"],.mala [class*="__stones"],.mala [class*="__wheels"],.mala [class*="__links"],.mala [class*="__flow"],.mala [class*="__grid"],.mala [class*="__route"],[class*="__steps"],[class*="__ports"],[class*="__nav"],[class*="__menu"],[class*="__list"],.mala [class*="__beads"]{
    display:none!important;
    position:absolute!important;top:100%!important;left:0!important;right:0!important;bottom:auto!important;
    max-height:min(70dvh,520px)!important;overflow:auto!important;
    flex-direction:column!important;gap:.35rem!important;
    padding:.75rem!important;
    background:#141414!important;color:#f5f5f5!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    z-index:10001!important;
  }
  body{padding-left:0!important;padding-right:0!important;padding-top:max(72px,calc(58px + env(safe-area-inset-top)))!important;padding-bottom:0!important;}
  .seal{top:max(78px,calc(env(safe-area-inset-top) + 64px))!important;right:max(10px,env(safe-area-inset-right))!important;left:auto!important;bottom:auto!important;z-index:9001!important;}
  [class*="toggle"]{margin-left:auto!important;position:relative!important;transform:none!important;}

  [class*="__rack"].is-open,[class*="__shelf"].is-open,[class*="__strand"].is-open,[class*="__frames"].is-open,[class*="__stones"].is-open,[class*="__wheels"].is-open,[class*="__links"].is-open,[class*="__flow"].is-open,[class*="__grid"].is-open,[class*="__route"],[class*="__steps"],[class*="__ports"],[class*="__nav"],[class*="__menu"],[class*="__list"].is-open,[class*="__beads"].is-open,.is-open[class*="__"],.topnav__links.is-open,.mast__links.is-open{display:flex!important;}
  .back-st{top:max(10px,env(safe-area-inset-top))!important;left:max(10px,env(safe-area-inset-left))!important;transform:none!important;writing-mode:horizontal-tb!important;}
}