@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%; src: url('../fonts/bricolage.woff2') format('woff2-variations'), url('../fonts/bricolage.woff2') format('woff2'); }
/* Vikrants Bakary — public site · "Violet Glass" edition
   Deep aubergine canvas, frosted-glass panels, orchid + champagne-gold accents. */
:root {
  --bg-0: #12031f;
  --bg-1: #230a3d;
  --bg-2: #3a1366;
  --violet: #8b4dff;
  --orchid: #c39bff;
  --lilac: #eadcff;
  --pink: #ff9fd8;
  --gold: #f6dc9a;
  --gold-2: #e8bd62;
  --text: #f8f1ff;
  --muted: #cdb9e8;
  --dim: #a38cc4;
  --berry: #ff7ab8;
  --glass: linear-gradient(145deg, rgb(255 255 255 / .15), rgb(255 255 255 / .05));
  --glass-solid: rgb(58 24 98 / .85);
  --glass-line: rgb(255 255 255 / .2);
  --glass-hi: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -1px 0 rgb(255 255 255 / .04);
  --shadow: 0 24px 60px -24px rgb(8 0 24 / .75);
  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 30px;
  --font: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --wrap: 1180px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg-0); }
body {
  margin: 0;
  font-family: var(--font);
  font-variation-settings: 'wdth' 100;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 8% -8%, rgb(139 77 255 / .45), transparent 60%),
    radial-gradient(900px 700px at 100% 12%, rgb(255 159 216 / .2), transparent 60%),
    radial-gradient(1000px 800px at 50% 110%, rgb(139 77 255 / .35), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 70%);
  background-attachment: fixed;
  overflow-x: hidden;
  min-height: 100vh;
}
/* floating light orbs behind the glass */
body::before, body::after {
  content: ''; position: fixed; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
body::before { width: 420px; height: 420px; left: -120px; top: 28vh; background: rgb(139 77 255 / .35); }
body::after { width: 360px; height: 360px; right: -100px; top: 8vh; background: rgb(255 159 216 / .22); }
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: drift 18s ease-in-out infinite alternate; }
  body::after { animation: drift 22s ease-in-out infinite alternate-reverse; }
  @keyframes drift { to { transform: translate(60px, -50px) scale(1.15); } }
}

img, svg { max-width: 100%; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.06; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.025em; font-variation-settings: 'opsz' 96, 'wdth' 90; color: #fff; }
h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; font-variation-settings: 'opsz' 24; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 62ch; }
.sr, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--bg-0); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

/* serif italic accent used inside headings */
.accent { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: normal; background: linear-gradient(100deg, var(--gold), var(--pink) 60%, var(--orchid)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: .82rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }

/* ---------- glass surfaces ---------- */
.glass, .ticket, .quote, .faq, .card-form, .course-aside, .about-aside, .facts, .step-card, .stat, .teddy-card, .owner-card, .board, .empty, .contact-aside, .note-card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow), var(--glass-hi);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .ticket, .quote, .faq, .card-form, .course-aside, .about-aside, .facts, .step-card, .stat, .teddy-card, .owner-card, .board, .empty, .contact-aside, .note-card, .site-head { background: var(--glass-solid); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1;
  padding: 1em 1.5em; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-yolk { background: linear-gradient(135deg, #fff1c2, var(--gold) 45%, var(--gold-2)); color: #2a0a47; box-shadow: 0 10px 28px -10px rgb(246 220 154 / .65), inset 0 1px 0 rgb(255 255 255 / .6); }
.btn-yolk:hover { color: #2a0a47; box-shadow: 0 14px 34px -10px rgb(246 220 154 / .85), inset 0 1px 0 rgb(255 255 255 / .6); }
.btn-ghost { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .3); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-ghost:hover { background: rgb(255 255 255 / .18); color: #fff; }
.btn-small { padding: .7em 1.1em; font-size: .92rem; background: linear-gradient(135deg, var(--violet), #6a2fd6); color: #fff; box-shadow: 0 8px 20px -8px rgb(139 77 255 / .9), inset 0 1px 0 rgb(255 255 255 / .35); }
.btn-small:hover { color: #fff; }
.btn-block { width: 100%; }
.text-link { font-weight: 650; }

/* ---------- header (floating glass pill) ---------- */
.site-head {
  position: sticky; top: 12px; z-index: 40; width: min(100% - 24px, var(--wrap)); margin: 12px auto 0;
  background: linear-gradient(145deg, rgb(255 255 255 / .16), rgb(255 255 255 / .06));
  border: 1px solid var(--glass-line); border-radius: 999px;
  box-shadow: 0 18px 40px -20px rgb(8 0 24 / .8), var(--glass-hi);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
}
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; width: calc(100% - 36px); }
.brand { text-decoration: none; display: flex; align-items: center; }
.wordmark { display: inline-flex; align-items: baseline; gap: .28em; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; font-variation-settings: 'opsz' 96, 'wdth' 80; }
.wm-a { color: #fff; }
.wm-b { background: linear-gradient(100deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a:not(.btn) { color: var(--lilac); text-decoration: none; padding: .55em .85em; border-radius: 999px; font-weight: 550; font-size: .98rem; transition: background-color .2s ease; }
.site-nav a:not(.btn):hover { background: rgb(255 255 255 / .12); color: #fff; }
.site-nav a[aria-current='page'] { background: rgb(255 255 255 / .18); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.nav-cta { margin-left: 8px; padding: .8em 1.25em; font-size: .95rem; }
.nav-toggle { display: none; background: rgb(255 255 255 / .1); border: 1px solid var(--glass-line); width: 44px; height: 44px; cursor: pointer; border-radius: 50%; }
.bars, .bars::before, .bars::after { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform .2s ease; margin: auto; }
.bars::before, .bars::after { content: ''; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }
.nav-toggle[aria-expanded='true'] .bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
  .site-nav a:not(.btn) { padding: .5em .6em; font-size: .93rem; }
}
@media (max-width: 960px) {
  .site-head { border-radius: 32px; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; left: 0; right: 0; top: calc(100% + 10px); background: linear-gradient(160deg, rgb(70 30 120 / .92), rgb(30 8 52 / .96)); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--glass-line); border-radius: 28px; flex-direction: column; align-items: stretch; padding: 12px 12px 16px; display: none; box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: .9em 1em; font-size: 1.05rem; }
  .nav-cta { margin: 8px 0 0; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(36px, 6vw, 84px) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.2rem); margin-bottom: .35em; line-height: 1.02; }
.hero-title { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; color: var(--lilac); line-height: 1.25; margin-bottom: .6em; letter-spacing: -0.01em; }
.hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 26px; }
.hero-proof { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--lilac); padding: .6em 1.1em; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--glass-line); max-width: 100%; }
.hero-proof::before { content: '★'; color: var(--gold); }

.hero-art { position: relative; display: grid; place-items: center; min-height: 420px; }
.hero-art .halo { position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(circle, rgb(195 155 255 / .55), rgb(139 77 255 / .15) 55%, transparent 70%); filter: blur(30px); }
.hero-card { position: relative; width: min(100%, 420px); aspect-ratio: 1; border-radius: 44px; padding: 26px; display: grid; place-items: center; }
.hero-card svg { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgb(10 0 30 / .5)); }
.float-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 18px; font-size: .88rem; line-height: 1.25; font-weight: 600; color: #fff; }
.float-badge b { display: block; font-size: 1.15rem; font-weight: 800; color: var(--gold); line-height: 1.1; }
.float-badge .ico { width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(135deg, var(--violet), var(--pink)); display: grid; place-items: center; font-size: 1.1rem; }
.fb-1 { left: -4px; top: 14%; } .fb-2 { right: -4px; bottom: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-card svg { animation: bob 6s ease-in-out infinite; }
  .fb-1 { animation: bob 7s ease-in-out infinite; } .fb-2 { animation: bob 8s ease-in-out infinite reverse; }
  @keyframes bob { 50% { transform: translateY(-12px); } }
  .hero-grid > div:first-child > * { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-grid > div:first-child > :nth-child(2) { animation-delay: .08s; } .hero-grid > div:first-child > :nth-child(3) { animation-delay: .16s; }
  .hero-grid > div:first-child > :nth-child(4) { animation-delay: .24s; } .hero-grid > div:first-child > :nth-child(5) { animation-delay: .32s; } .hero-grid > div:first-child > :nth-child(6) { animation-delay: .4s; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 0; margin-top: 8px; }
  .fb-1 { left: 0; } .fb-2 { right: 0; }
}

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { border-radius: var(--radius-m); padding: 22px 20px; text-align: center; }
.stat b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1; font-variation-settings: 'opsz' 96, 'wdth' 80; background: linear-gradient(120deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: .92rem; }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------- sections ---------- */
.sec { padding: clamp(52px, 7vw, 96px) 0; position: relative; }
.sec-tight { padding-top: 16px; }
.sec-plum, .sec-lilac { background: linear-gradient(180deg, transparent, rgb(255 255 255 / .035) 20%, rgb(255 255 255 / .035) 80%, transparent); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 8px 0 0; color: var(--muted); max-width: 52ch; }
.empty { padding: 24px; border-radius: var(--radius-m); color: var(--muted); }

.page-head { padding: clamp(44px, 6vw, 88px) 0 24px; }
.page-head h1 { max-width: 18ch; }
.thanks { padding-bottom: 96px; }

/* hue tokens kept for course accents */
.hue-0 { --h: 0; } .hue-1 { --h: 30; } .hue-2 { --h: 60; } .hue-3 { --h: 90; } .hue-4 { --h: 120; } .hue-5 { --h: 150; }
.hue-6 { --h: 180; } .hue-7 { --h: 210; } .hue-8 { --h: 240; } .hue-9 { --h: 270; } .hue-10 { --h: 300; } .hue-11 { --h: 330; }

/* ---------- batch tickets ---------- */
.tickets { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticket { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 20px; border-radius: var(--radius-m); padding: 14px 20px 14px 14px; transition: transform .25s ease, border-color .25s ease; }
.ticket:hover { transform: translateY(-3px); border-color: rgb(255 255 255 / .38); }
.ticket-date { background: linear-gradient(160deg, rgb(195 155 255 / .4), rgb(139 77 255 / .25)); border: 1px solid rgb(255 255 255 / .25); color: #fff; border-radius: 16px; text-align: center; padding: 10px 0 8px; }
.t-day { display: block; font-size: 2rem; font-weight: 800; line-height: 1; font-variation-settings: 'opsz' 96, 'wdth' 80; }
.t-mon { display: block; font-size: .85rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.ticket-title { font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
.ticket-title:hover { color: var(--gold); }
.ticket-meta { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.ticket-seats { display: flex; align-items: center; gap: 14px; }
.seats { font-weight: 650; font-size: .9rem; color: var(--gold); white-space: nowrap; }
.seats-low { color: var(--berry); }
.seats-full { color: var(--dim); }
.tickets-compact .ticket { grid-template-columns: 64px 1fr; }
.tickets-compact .ticket-seats { grid-column: 1 / -1; justify-content: space-between; }
.tickets-compact .t-day { font-size: 1.5rem; }
@media (max-width: 640px) {
  .ticket { grid-template-columns: 64px 1fr; gap: 14px; }
  .ticket-seats { grid-column: 1 / -1; justify-content: space-between; }
  .t-day { font-size: 1.5rem; }
}
.month + .month { margin-top: 48px; }
.month-h { font-size: 1.4rem; margin-bottom: 16px; color: var(--gold); }

/* ---------- course board ---------- */
.board { list-style: none; margin: 0; padding: 8px; border-radius: var(--radius-l); }
.board-row + .board-row { border-top: 1px solid rgb(255 255 255 / .1); }
.board-link { display: grid; grid-template-columns: 14px minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 18px; color: inherit; text-decoration: none; border-radius: 22px; transition: background-color .2s ease; }
.board-link:hover { background: rgb(255 255 255 / .09); color: inherit; }
.board-swatch { width: 6px; height: 44px; border-radius: 6px; background: linear-gradient(180deg, var(--gold), var(--pink) 55%, var(--violet)); }
.board-title { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; font-variation-settings: 'opsz' 48, 'wdth' 90; color: #fff; }
.board-short { display: block; color: var(--muted); font-size: .98rem; margin-top: 2px; }
.board-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.board-facts span { font-size: .82rem; border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; padding: 2px 11px; color: var(--lilac); background: rgb(255 255 255 / .06); }
.board-next { font-size: .92rem; color: var(--muted); }
.board-fee { font-size: 1.4rem; font-weight: 800; font-variation-settings: 'wdth' 80; white-space: nowrap; color: var(--gold); }
@media (max-width: 860px) {
  .board-link { grid-template-columns: 8px 1fr auto; gap: 8px 16px; padding: 18px 12px; }
  .board-swatch { grid-row: span 3; width: 6px; height: 100%; }
  .board-facts, .board-next { grid-column: 2 / -1; }
  .board-fee { grid-column: 3; grid-row: 1; }
}

/* ---------- steps ---------- */
.steps-wrap h2 { margin-bottom: 32px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.steps li { counter-increment: step; border-radius: var(--radius-m); padding: 26px 22px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow), var(--glass-hi); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.steps li::before { content: '0' counter(step); display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 14px; font-variation-settings: 'opsz' 96, 'wdth' 75; background: linear-gradient(120deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.steps p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; }
.quote { margin: 0; border-radius: var(--radius-l); padding: 30px 28px; position: relative; }
.quote::before { content: '“'; position: absolute; top: 6px; right: 22px; font-family: var(--serif); font-size: 5rem; line-height: 1; color: rgb(246 220 154 / .35); }
.quote blockquote { margin: 0 0 20px; font-size: 1.1rem; line-height: 1.55; color: #fff; }
.quote figcaption strong { display: block; color: var(--gold); }
.quote figcaption span { color: var(--muted); font-size: .92rem; }

/* ---------- teddy cakes ---------- */
.teddy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.teddy-grid.three { grid-template-columns: repeat(3, 1fr); }
.teddy-card { border-radius: var(--radius-l); padding: 14px 14px 22px; display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease; }
.teddy-card:hover { transform: translateY(-6px); border-color: rgb(255 255 255 / .4); }
.teddy-pic { border-radius: 22px; aspect-ratio: 1; display: grid; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 38%, rgb(255 255 255 / .22), rgb(139 77 255 / .12) 70%); border: 1px solid rgb(255 255 255 / .12); margin-bottom: 16px; overflow: hidden; }
.teddy-pic svg { width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgb(10 0 30 / .45)); transition: transform .4s ease; }
.teddy-card:hover .teddy-pic svg { transform: scale(1.06) rotate(-2deg); }
.teddy-card h3 { margin: 0 8px 4px; font-size: 1.2rem; }
.teddy-card p { margin: 0 8px 14px; color: var(--muted); font-size: .95rem; flex: 1; }
.teddy-card .tag { margin: 0 8px; font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.teddy-card .btn { margin: 0 8px; }
.teddy-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; border-radius: 40px; padding: clamp(24px, 4vw, 48px); }
.teddy-feature .big-pic { aspect-ratio: 1; max-width: 440px; margin: 0 auto; width: 100%; display: grid; place-items: center; border-radius: 34px; background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / .22), rgb(139 77 255 / .1) 70%); border: 1px solid rgb(255 255 255 / .14); padding: 20px; }
.teddy-feature .big-pic svg { width: 100%; filter: drop-shadow(0 24px 24px rgb(10 0 30 / .5)); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.pill-row li { padding: .45em 1em; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--glass-line); font-size: .92rem; color: var(--lilac); }
.swatches { display: flex; gap: 8px; margin-bottom: 22px; }
.swatches i { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .6); box-shadow: 0 4px 10px rgb(0 0 0 / .3); display: block; }
.sw-1 { background: #cfa7ff; } .sw-2 { background: #ffc2e2; } .sw-3 { background: #a8714f; } .sw-4 { background: #fff1dc; } .sw-5 { background: #8b4dff; }
@media (max-width: 1000px) { .teddy-grid, .teddy-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .teddy-feature { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .teddy-grid, .teddy-grid.three { grid-template-columns: 1fr; } }

/* ---------- owner ---------- */
.owner-card { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; border-radius: 40px; padding: clamp(20px, 3.4vw, 40px); }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; background: linear-gradient(160deg, var(--violet), #4b1f9a 55%, var(--pink)); border: 1px solid rgb(255 255 255 / .35); box-shadow: 0 30px 60px -24px rgb(8 0 24 / .9), inset 0 1px 0 rgb(255 255 255 / .4); }
.portrait::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 60%, rgb(18 3 31 / .55)); pointer-events: none; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.portrait .mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 14vw, 10rem); color: rgb(255 255 255 / .85); text-shadow: 0 8px 30px rgb(0 0 0 / .3); }
.portrait-tag { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; padding: 10px 16px; border-radius: 18px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.portrait-tag b { display: block; font-size: 1.1rem; line-height: 1.2; }
.portrait-tag span { font-size: .85rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; font-weight: 650; }
.owner-copy blockquote { margin: 0 0 20px; font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.4; color: #fff; }
.owner-copy .sign { font-weight: 700; color: var(--gold); margin-bottom: 22px; }
@media (max-width: 760px) { .owner-card { grid-template-columns: 1fr; } .portrait { max-width: 340px; margin-inline: auto; width: 100%; } }
.founder { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.faq { border-radius: var(--radius-m); margin-bottom: 12px; }
.faq summary { cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 650; list-style: none; position: relative; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--gold); transition: transform .2s ease; }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 24px 22px; margin: 0; color: var(--muted); }
@media (max-width: 800px) { .faq-wrap { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- CTA band ---------- */
.cta-band { padding: 24px 0 64px; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-radius: 40px; padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; background: linear-gradient(135deg, rgb(139 77 255 / .55), rgb(255 159 216 / .3)); border: 1px solid rgb(255 255 255 / .3); box-shadow: var(--shadow), var(--glass-hi); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.cta-row::before { content: ''; position: absolute; width: 320px; height: 320px; right: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .35), transparent 70%); }
.cta-line { position: relative; font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 700; margin: 0; letter-spacing: -0.02em; font-variation-settings: 'opsz' 96, 'wdth' 88; max-width: 22ch; line-height: 1.08; color: #fff; }
.cta-row .btn { position: relative; }

/* ---------- course detail ---------- */
.course-hero { padding: clamp(40px, 6vw, 80px) 0; }
.course-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.crumbs { margin-bottom: 12px; font-weight: 600; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; border-radius: var(--radius-l); overflow: hidden; background: rgb(255 255 255 / .12); }
.facts div { padding: 18px 20px; background: rgb(40 12 72 / .35); }
.facts dt { font-size: .85rem; color: var(--muted); }
.facts dd { margin: 0; font-weight: 700; font-size: 1.1rem; color: #fff; }
.facts .fee { font-size: 1.7rem; color: var(--gold); }
.course-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.tick-list, .bake-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { padding: 12px 0 12px 36px; position: relative; border-bottom: 1px solid rgb(255 255 255 / .12); }
.tick-list li::before { content: ''; position: absolute; left: 6px; top: 17px; width: 14px; height: 8px; border-left: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(-45deg); }
.bake-list { display: flex; flex-wrap: wrap; gap: 10px; }
.bake-list li { background: rgb(255 255 255 / .08); border: 1px solid var(--glass-line); padding: 8px 16px; border-radius: 999px; font-weight: 600; color: var(--lilac); }
.course-aside { position: sticky; top: 100px; border-radius: var(--radius-l); padding: 24px; }
.course-aside h2 { font-size: 1.3rem; }
.course-aside .tickets { margin-bottom: 18px; }
.course-aside .ticket { box-shadow: none; background: rgb(255 255 255 / .06); }
@media (max-width: 900px) { .course-hero-grid, .course-body { grid-template-columns: 1fr; } .course-aside { position: static; } }

/* ---------- filters, chips, forms ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.filters label { display: flex; flex-direction: column; font-weight: 600; font-size: .9rem; gap: 6px; color: var(--lilac); }
select, input, textarea { font: inherit; color: #fff; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .25); border-radius: 14px; padding: .75em 1em; min-height: 48px; width: 100%; transition: border-color .2s ease, background-color .2s ease; }
select option { background: #2a0a47; color: #fff; }
input::placeholder, textarea::placeholder { color: var(--dim); }
select:focus, input:focus, textarea:focus { border-color: var(--gold); background: rgb(255 255 255 / .12); outline: 3px solid rgb(246 220 154 / .25); outline-offset: 0; }
.filters select { min-width: 220px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chips a { text-decoration: none; padding: .5em 1.05em; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--glass-line); color: var(--lilac); font-weight: 550; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.chips a:hover { background: rgb(255 255 255 / .16); color: #fff; }
.chips a[aria-current='page'] { background: linear-gradient(135deg, var(--violet), #6a2fd6); color: #fff; border-color: rgb(255 255 255 / .4); }

.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.card-form { border-radius: var(--radius-l); padding: clamp(22px, 4vw, 38px); display: grid; gap: 18px; }
.card-form label { display: grid; gap: 6px; font-weight: 600; color: var(--lilac); }
.card-form .lbl { display: block; }
.opt { font-weight: 400; color: var(--dim); }
.field-err { color: var(--berry); font-weight: 600; font-size: .92rem; }
[aria-invalid='true'] { border-color: var(--berry); }
.form-alert { background: rgb(255 122 184 / .15); border: 1px solid rgb(255 122 184 / .4); color: #ffd0e6; padding: 12px 16px; border-radius: 14px; font-weight: 600; margin: 0; }
.fine { font-size: .88rem; color: var(--dim); margin: 0; }
.contact-aside { border-radius: var(--radius-l); padding: 28px; }
.contact-aside h2 { font-size: 1.3rem; }
.contact-aside h2 + p { margin-top: 0; }
.contact-aside h2:not(:first-child) { margin-top: 28px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- gallery ---------- */
.mini-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mini-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); width: 100%; }
.masonry { columns: 3 280px; column-gap: 14px; }
.m-item { display: block; break-inside: avoid; margin-bottom: 14px; position: relative; border-radius: var(--radius-m); overflow: hidden; }
.m-item img { width: 100%; height: auto; }
.m-cap { position: absolute; left: 10px; bottom: 10px; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-size: .88rem; padding: 4px 12px; border-radius: 999px; }
.lightbox { position: fixed; inset: 0; background: rgb(14 2 26 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 100; display: grid; place-items: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 82vh; max-width: 92vw; border-radius: 16px; }
.lb-cap { color: #fff; margin-top: 12px; text-align: center; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .4); background: rgb(255 255 255 / .15); color: #fff; font-size: 1.8rem; cursor: pointer; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; }
.about-aside { border-radius: var(--radius-l); padding: 32px; align-self: start; }
.big-fig { font-size: 3.4rem; font-weight: 800; margin: 0; line-height: 1; font-variation-settings: 'opsz' 96, 'wdth' 75; background: linear-gradient(120deg, #fff, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-aside .big-fig + p { margin-bottom: 24px; color: var(--muted); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot { margin-top: 24px; padding: 64px 0 28px; background: linear-gradient(180deg, transparent, rgb(8 0 20 / .55)); border-top: 1px solid rgb(255 255 255 / .1); color: var(--muted); }
.site-foot a { color: #fff; text-decoration-color: rgb(255 255 255 / .35); }
.site-foot a:hover { color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 1.2rem; max-width: 26ch; color: var(--lilac); }
.foot-h { font-size: .85rem; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; font-variation-settings: normal; font-weight: 650; }
.foot-grid p { margin-bottom: .4em; }
.foot-base { border-top: 1px solid rgb(255 255 255 / .12); margin-top: 40px; padding-top: 20px; font-size: .9rem; color: var(--dim); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 18px; bottom: 18px; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, #3be582, #1fb457); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -6px rgb(37 211 102 / .55), inset 0 1px 0 rgb(255 255 255 / .5); z-index: 50; transition: transform .2s ease; }
.wa-float:hover { color: #fff; transform: scale(1.08); }

/* ---------- scroll reveal (JS adds .reveal; content is visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.teddy-grid + .empty { margin-top: 28px; }

.fb-1 { left: -34px; top: 6%; } .fb-2 { right: -30px; bottom: 5%; }
@media (max-width: 860px) { .fb-1 { left: 4px; top: -14px; } .fb-2 { right: 4px; bottom: -14px; } }
@media (max-width: 520px) { .float-badge { display: none; } }

/* =====================================================================
   HERO X — aurora, orbiting stage, 3D teddy, sparkles, marquee
   ===================================================================== */
.hero-x { position: relative; isolation: isolate; padding: clamp(36px, 5vw, 72px) 0 clamp(36px, 5vw, 64px); }
.hero-x .hero-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(8px, 3vw, 48px); }
.sparkles { position: absolute; inset: -40px 0 0; width: 100%; height: calc(100% + 40px); z-index: -1; pointer-events: none; }
.aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .75; }
.aurora i:nth-child(1) { width: 520px; height: 520px; left: -8%; top: -10%; background: #7b3dff; }
.aurora i:nth-child(2) { width: 460px; height: 460px; right: 4%; top: 2%; background: #ff7cc8; opacity: .45; }
.aurora i:nth-child(3) { width: 420px; height: 420px; left: 38%; bottom: -18%; background: #5a2bd6; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .aurora i:nth-child(1) { animation: au1 14s ease-in-out infinite alternate; }
  .aurora i:nth-child(2) { animation: au2 17s ease-in-out infinite alternate; }
  .aurora i:nth-child(3) { animation: au1 20s ease-in-out infinite alternate-reverse; }
  @keyframes au1 { to { transform: translate(120px, 70px) scale(1.2); } }
  @keyframes au2 { to { transform: translate(-130px, 90px) scale(.9); } }
}

.live-pill { display: inline-flex; align-items: center; gap: 10px; padding: .55em 1.1em .55em .9em; border-radius: 999px; font-size: .92rem; font-weight: 600; color: #fff; text-decoration: none; margin-bottom: 22px; }
.live-pill:hover { color: #fff; border-color: rgb(255 255 255 / .45); }
.live-pill .dot { width: 10px; height: 10px; border-radius: 50%; background: #3be582; box-shadow: 0 0 0 0 rgb(59 229 130 / .7); }
.live-pill .arr { color: var(--gold); transition: transform .2s ease; }
.live-pill:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) { .live-pill .dot { animation: ping 1.8s infinite; } @keyframes ping { 70% { box-shadow: 0 0 0 10px rgb(59 229 130 / 0); } 100% { box-shadow: 0 0 0 0 rgb(59 229 130 / 0); } } }

.hero-x h1 { font-size: clamp(2.7rem, 6.6vw, 5.6rem); line-height: .98; letter-spacing: -0.035em; margin-bottom: .4em; }
.hero-x h1 .ln { display: block; }
.shimmer { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; font-variation-settings: normal; background: linear-gradient(100deg, #ffe9a8 0%, #ff9fd8 30%, #c39bff 55%, #ffe9a8 80%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgb(255 159 216 / .35)); padding-right: .06em; }
@media (prefers-reduced-motion: no-preference) {
  .shimmer { animation: shim 5s linear infinite; } @keyframes shim { to { background-position: -250% 0; } }
  .hero-x h1 .ln { animation: lnrise 1s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-x h1 .ln:nth-child(2) { animation-delay: .12s; } .hero-x h1 .ln:nth-child(3) { animation-delay: .24s; }
  @keyframes lnrise { from { opacity: 0; transform: translateY(40px) skewY(3deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
}
.hero-actions .btn { gap: .6em; }
.hero-actions .ig { flex: none; }
.proof { display: inline-flex; align-items: center; gap: 14px; padding: 8px 20px 8px 8px; border-radius: 999px; font-size: .95rem; color: var(--lilac); max-width: 100%; }
.proof b { color: var(--gold); }
.avs { display: inline-flex; }
.avs i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: .85rem; color: #fff; border: 2px solid #2a0a47; margin-left: -9px; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.avs i:first-child { margin-left: 0; } .avs i:nth-child(2) { background: linear-gradient(135deg, #6a2fd6, #c39bff); } .avs i:nth-child(3) { background: linear-gradient(135deg, #ff7cc8, #f6dc9a); color: #2a0a47; } .avs i:last-child { background: #fff; color: #5a2bd6; }

/* the stage */
.stage { --s: min(88vw, 540px); position: relative; width: var(--s); height: var(--s); margin: 0 auto; display: grid; place-items: center; perspective: 1000px; }
.stage .glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgb(255 190 235 / .55), rgb(139 77 255 / .35) 45%, transparent 70%); filter: blur(26px); }
.stage .ring { position: absolute; border-radius: 50%; border: 1px solid rgb(255 255 255 / .22); }
.stage .r1 { inset: 9%; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .12), rgb(255 255 255 / .02) 60%); box-shadow: inset 0 0 60px rgb(195 155 255 / .25), 0 0 80px rgb(139 77 255 / .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stage .r2 { inset: 0; border-style: dashed; border-color: rgb(246 220 154 / .35); }
.ringtext { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ringtext text { font-family: var(--font); font-size: 15.5px; font-weight: 650; letter-spacing: .32em; fill: rgb(246 220 154 / .9); }
.tilt { position: relative; width: 62%; transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
.tilt-card svg { width: 100%; height: auto; filter: drop-shadow(0 34px 34px rgb(8 0 24 / .6)) drop-shadow(0 0 40px rgb(195 155 255 / .45)); }
.orbit { position: absolute; inset: 0; }
.oi { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(calc(var(--s) * .5)); }
.oi .ct { position: absolute; left: 0; top: 0; transform: rotate(calc(-1 * var(--a))) translate(-50%, -50%); }
.chip { display: inline-block; white-space: nowrap; padding: .55em 1em; border-radius: 999px; font-size: .9rem; font-weight: 650; color: #fff; box-shadow: 0 14px 30px -12px rgb(8 0 24 / .8), var(--glass-hi); }
@media (prefers-reduced-motion: no-preference) {
  .ringtext { animation: spin 40s linear infinite; }
  .stage .r2 { animation: spin 60s linear infinite reverse; }
  .orbit { animation: spin 46s linear infinite; }
  .orbit .chip { animation: spin 46s linear infinite reverse; }
  .tilt-card { animation: bob 6s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
@media (max-width: 860px) {
  .hero-x .hero-grid { grid-template-columns: 1fr; }
  .stage { --s: min(86vw, 440px); margin-top: 8px; }
  .ringtext text { font-size: 14px; }
  .chip { font-size: .8rem; }
}

/* marquee ribbon */
.marquee { overflow: hidden; border-block: 1px solid rgb(255 255 255 / .14); background: linear-gradient(90deg, rgb(139 77 255 / .22), rgb(255 159 216 / .14), rgb(139 77 255 / .22)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 16px 0; }
.marquee .track { display: flex; width: max-content; gap: 28px; align-items: center; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: #fff; white-space: nowrap; }
.marquee b { color: var(--gold); font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) { .marquee .track { animation: marq 38s linear infinite; } @keyframes marq { to { transform: translateX(-50%); } } }
.marquee + .sec { padding-top: clamp(40px, 5vw, 64px); }

/* =====================================================================
   STUDENT BAKERS
   ===================================================================== */
.student-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.student-card { background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow), var(--glass-hi); -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); border-radius: var(--radius-l); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s ease, border-color .3s ease; min-width: 0; }
.student-card:hover { transform: translateY(-5px); border-color: rgb(255 255 255 / .4); }
.st-top { display: flex; align-items: center; gap: 14px; }
.st-av { flex: none; width: 58px; height: 58px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #ffe9a8, #ff7cc8, #8b4dff, #ffe9a8); display: grid; place-items: center; }
.st-av span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #2a0a47; font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #fff; }
.st-who h3 { margin: 0; font-size: 1.15rem; }
.st-course { margin: 0; font-size: .88rem; color: var(--gold); }
.st-note { margin: 0; color: var(--muted); font-size: .98rem; flex: 1; }
.st-handle { display: flex; align-items: center; gap: 8px; margin: 0; padding: .5em .9em; border-radius: 999px; background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16); font-weight: 600; font-size: .95rem; color: #fff; width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.st-handle svg { flex: none; color: var(--pink); }
.st-handle.soon { color: var(--dim); font-weight: 500; }
.st-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.st-actions .btn { flex: 1 1 auto; padding: .75em 1em; font-size: .9rem; }
.student-cta { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-radius: var(--radius-l); padding: 24px 28px; background: linear-gradient(135deg, rgb(139 77 255 / .4), rgb(255 159 216 / .22)); border: 1px solid rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.student-cta h3 { margin: 0 0 4px; font-size: 1.3rem; }
.student-cta p { margin: 0; color: var(--lilac); max-width: 52ch; }
@media (max-width: 960px) { .student-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .student-grid { grid-template-columns: 1fr; } }

/* nav fits with the extra link */
@media (max-width: 1180px) and (min-width: 961px) { .site-nav a:not(.btn) { padding: .5em .55em; font-size: .9rem; } .nav-cta { padding: .75em 1em; } .wordmark { font-size: 1.2rem; } }

/* stage sizing: leave room for the orbiting chips, never push the page wider */
.hero-x { overflow-x: clip; }
.stage { --s: min(76vw, 460px); }
.ringtext text { letter-spacing: .18em; }
@media (max-width: 860px) {
  .hero-x .hero-grid { gap: 70px; }
  .stage { --s: min(68vw, 330px); margin: 34px auto 30px; }
  .ringtext text { font-size: 15px; }
  .chip { font-size: .72rem; padding: .45em .8em; }
}

/* delivery notice */
.notice { display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-radius: var(--radius-m); margin-bottom: 22px; background: linear-gradient(135deg, rgb(246 220 154 / .16), rgb(255 159 216 / .1)); border-color: rgb(246 220 154 / .4); }
.notice p { margin: 0; color: var(--lilac); }
.notice b { color: var(--gold); }
.n-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .25); }

/* ---------- hero hook ---------- */
.hook { position: relative; display: block; border-radius: 26px; padding: 18px 26px 20px; margin-bottom: 26px; max-width: 560px; overflow: hidden; border-color: rgb(246 220 154 / .45); box-shadow: var(--shadow), var(--glass-hi), 0 0 44px -8px rgb(255 159 216 / .45); }
.hook::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold), var(--pink), var(--violet)); }
.hk-label { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hk { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.hk.l1 { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--muted); }
.hk.l2 { font-size: clamp(1.2rem, 2vw, 1.5rem); color: #fff; font-weight: 650; margin-top: 4px; }
.hk .cant { color: var(--berry); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgb(255 122 184 / .9); }
.hk.l3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; color: #fff; margin-top: 8px; font-variation-settings: 'opsz' 96, 'wdth' 85; }
.hk.l3 .shimmer { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .hk, .hk-label { animation: hkin .9s cubic-bezier(.2, .8, .2, 1) both; }
  .hk.l1 { animation-delay: .5s; } .hk.l2 { animation-delay: 1.3s; } .hk.l3 { animation-delay: 2.3s; animation-duration: 1.2s; }
  .hook { animation: hkglow 4s ease-in-out 2.6s infinite alternate; }
  @keyframes hkin { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes hkglow { to { box-shadow: var(--shadow), var(--glass-hi), 0 0 70px 0 rgb(255 159 216 / .6); } }
}
.hero-x h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }

.portrait img { object-position: 58% 40%; }

/* =====================================================================
   OPENING INTRO — grand hall, marble floor, ornate door, golden light
   ===================================================================== */
.vb-skip .intro { display: none; }
html.vb-intro .hero-x * { animation: none !important; }
.intro {
  --logo: min(19vh, 46vw, 200px); --dh: min(41vh, 500px); --floor: 12vh;
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: stretch; overflow: hidden;
  background: radial-gradient(1000px 700px at 50% 28%, #47197f, transparent 70%), linear-gradient(180deg, #10031a, #07010f);
  transition: opacity 1s ease, visibility 1s;
  animation: introFallback .6s 10s forwards;
}
@keyframes introFallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / .55) 100%); }
.in-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* room */
.in-wall { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 219px, rgb(246 220 154 / .14) 219px 220px), linear-gradient(180deg, rgb(255 255 255 / .05), transparent 24%); }
.crown { position: absolute; left: 0; right: 0; top: 0; height: 6vh; background: repeating-linear-gradient(90deg, #2a0a47 0 46px, #3f1670 46px 92px); border-bottom: 3px solid #e8bd62; box-shadow: 0 10px 40px rgb(0 0 0 / .6), 0 2px 18px rgb(246 220 154 / .35); }
.chand { position: absolute; left: 50%; top: 5vh; width: min(70vw, 760px); height: 52vh; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0, rgb(255 226 170 / .42), rgb(255 190 235 / .12) 45%, transparent 70%); }
.drape { position: absolute; top: 5vh; bottom: var(--floor); width: clamp(34px, 11vw, 200px); background: repeating-linear-gradient(90deg, #1b0634 0, #5a2596 9%, #2c0b4a 18%, #1b0634 27%); }
.drape.dl { left: 0; box-shadow: inset -26px 0 46px rgb(0 0 0 / .65), 10px 0 30px rgb(0 0 0 / .5); border-right: 2px solid rgb(246 220 154 / .5); }
.drape.dr { right: 0; box-shadow: inset 26px 0 46px rgb(0 0 0 / .65), -10px 0 30px rgb(0 0 0 / .5); border-left: 2px solid rgb(246 220 154 / .5); }
.sconce { position: absolute; top: 40%; width: 150px; height: 280px; border-radius: 50%; background: radial-gradient(ellipse at 50% 12%, rgb(246 220 154 / .4), rgb(246 220 154 / .08) 45%, transparent 68%); }
.sconce::before { content: ''; position: absolute; left: 50%; top: 8px; width: 12px; height: 38px; margin-left: -6px; border-radius: 8px 8px 14px 14px; background: linear-gradient(90deg, #fff1c2, #c8922d); box-shadow: 0 0 24px 8px rgb(246 220 154 / .55); }
.s1 { left: calc(50% - 360px); } .s2 { left: calc(50% + 210px); }
@media (max-width: 860px) { .sconce { display: none; } }
.in-floor { position: absolute; left: 0; right: 0; bottom: 0; height: var(--floor); background: linear-gradient(180deg, rgb(246 220 154 / .7) 0, rgb(246 220 154 / .15) 2px, transparent 3px), repeating-linear-gradient(112deg, rgb(255 255 255 / .06) 0 2px, transparent 2px 70px), repeating-conic-gradient(#2b0f4a 0 25%, #190830 0 50%) 0 0 / 96px 96px; z-index: 0; }
.in-floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(0 0 0 / .7)); }

/* stage */
.in-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: clamp(8px, 1.8vh, 18px); height: 100%; padding: 7vh 16px var(--floor); }
.in-logo { position: relative; overflow: hidden; flex: none; width: var(--logo); aspect-ratio: 1; padding: 7px; border-radius: 28px; background: linear-gradient(145deg, #fffdff, #efe3ff); box-shadow: 0 0 0 1px rgb(246 220 154 / .85), 0 0 0 6px rgb(246 220 154 / .16), 0 0 60px 6px rgb(246 220 154 / .35), 0 30px 70px -18px rgb(139 77 255 / .85); }
.in-logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; border-radius: 22px; }
.in-logo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgb(255 255 255 / .9) 50%, transparent 64%); transform: translateX(-130%); }

.in-text { flex: none; text-align: center; }
.in-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); font-weight: 650; }
.in-line { margin: 4px auto 0; max-width: 24ch; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 3.2vw, 1.8rem); color: #fff; line-height: 1.22; text-shadow: 0 0 26px rgb(246 220 154 / .35); }
.in-line span { display: inline-block; }
.in-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 10px; }
.in-orn i { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, #f6dc9a); }
.in-orn i:last-child { transform: scaleX(-1); }
.in-orn b { width: 7px; height: 7px; transform: rotate(45deg); background: #f6dc9a; box-shadow: 0 0 10px #f6dc9a; }
.in-bar { width: min(58vw, 250px); height: 3px; margin: 0 auto; border-radius: 3px; background: rgb(255 255 255 / .14); overflow: hidden; }
.in-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a5f14, #f6dc9a, #fff6d6); box-shadow: 0 0 14px #f6dc9a; animation: barfill 3.4s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes barfill { to { width: 90%; } }

/* the door */
.in-doorwrap { position: relative; z-index: 0; flex: none; -webkit-box-reflect: below 2px linear-gradient(transparent 58%, rgb(255 255 255 / .26)); }
.rays { position: absolute; left: 50%; top: 45%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; background: repeating-conic-gradient(rgb(255 236 250 / 0) 0 7deg, rgb(255 236 250 / .3) 9deg 10.5deg, rgb(255 236 250 / 0) 12.5deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 26%); mask-image: radial-gradient(circle, #000 0, transparent 26%); }
.in-frame { position: relative; width: calc(var(--dh) * .62); height: var(--dh); padding: 7px; border-radius: calc(var(--dh) * .31) calc(var(--dh) * .31) 4px 4px; background: linear-gradient(145deg, #fff1c2, #e8bd62 36%, #8a5f14 66%, #f6dc9a); box-shadow: 0 0 0 2px rgb(0 0 0 / .35), 0 0 90px rgb(246 220 154 / .32), 0 30px 60px -10px rgb(0 0 0 / .7); }
.in-frame .key { position: absolute; left: 50%; top: -11px; width: 24px; height: 24px; margin-left: -12px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #fff6d6, #c8922d); box-shadow: 0 0 18px rgb(246 220 154 / .9); z-index: 2; }
.in-door { position: relative; width: 100%; height: 100%; overflow: hidden; perspective: 1400px; transform-origin: 50% 58%; border-radius: calc(var(--dh) * .31 - 7px) calc(var(--dh) * .31 - 7px) 2px 2px; background: #000; }
.in-light { position: absolute; inset: 0; background: radial-gradient(circle at 50% 66%, #fff 0, #fff3da 9%, #ffd3f1 24%, #b98aff 52%, #6a2fd6 100%); opacity: .7; transition: opacity 1.4s ease; }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(165deg, #62299f, #36115a 52%, #240840); transition: transform 2.2s cubic-bezier(.65, 0, .2, 1); will-change: transform; }
.leaf.l { left: 0; transform-origin: 0 50%; border-right: 1px solid rgb(0 0 0 / .6); }
.leaf.r { right: 0; transform-origin: 100% 50%; border-left: 1px solid rgb(255 255 255 / .08); }
.leaf .pane { position: absolute; overflow: hidden; left: 10%; right: 10%; top: 6%; height: 37%; border: 2px solid rgb(246 220 154 / .85); background: linear-gradient(135deg, rgb(255 255 255 / .32), rgb(255 255 255 / .06)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: inset 0 0 16px rgb(255 255 255 / .14), 0 0 0 3px rgb(0 0 0 / .25); }
.leaf .pane::before { content: ''; position: absolute; inset: 0; }
.leaf.l .pane { border-radius: 90px 6px 6px 6px; } .leaf.r .pane { border-radius: 6px 90px 6px 6px; }
.leaf.l .pane::before { background: repeating-conic-gradient(from 270deg at 100% 100%, rgb(246 220 154 / .6) 0 .9deg, transparent .9deg 15deg); }
.leaf.r .pane::before { background: repeating-conic-gradient(from 0deg at 0% 100%, rgb(246 220 154 / .6) 0 .9deg, transparent .9deg 15deg); }
.leaf .panel { position: absolute; left: 10%; right: 10%; top: 52%; bottom: 7%; border: 2px solid rgb(246 220 154 / .7); border-radius: 8px; background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(0 0 0 / .22)); box-shadow: inset 0 0 20px rgb(0 0 0 / .55), 0 0 0 3px rgb(0 0 0 / .25); }
.leaf .panel::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgb(246 220 154 / .45); border-radius: 4px; }
.leaf .handle { position: absolute; top: 56%; width: 8px; height: 15%; border-radius: 6px; background: linear-gradient(90deg, #fff6d6, #c8922d); box-shadow: 0 0 14px rgb(246 220 154 / .85); z-index: 1; }
.leaf.l .handle { right: 5%; } .leaf.r .handle { left: 5%; }
.medal { position: absolute; left: 50%; top: 46.5%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; z-index: 2; background: radial-gradient(circle at 35% 30%, #fff6d6, #e8bd62 55%, #7b5210); box-shadow: 0 0 0 3px rgb(246 220 154 / .35), 0 0 20px rgb(246 220 154 / .8); transition: opacity .5s ease; }
.seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; z-index: 1; background: linear-gradient(180deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 18px 6px rgb(255 220 250 / .7); transition: opacity .6s ease; }
.plinth { display: block; width: calc(var(--dh) * .62 + 36px); height: 9px; margin: 0 auto; border-radius: 3px; background: linear-gradient(180deg, #f6dc9a, #8a5f14); box-shadow: 0 8px 24px rgb(0 0 0 / .65); }

.intro-skip { position: absolute; right: 16px; bottom: 16px; z-index: 4; font: inherit; font-size: .85rem; color: var(--lilac); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; padding: .5em 1.1em; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.intro-skip:hover { background: rgb(255 255 255 / .16); color: #fff; }

/* sequence */
.intro.open .leaf.l { transform: rotateY(104deg); }
.intro.open .leaf.r { transform: rotateY(-104deg); }
.intro.open .in-light { opacity: 1; }
.intro.open .seam, .intro.open .medal { opacity: 0; }
.intro.open .rays { opacity: 1; }
.intro.open .in-bar i { animation: none; width: 100%; }
.intro.enter .in-door { transform: scale(7); transition: transform 1.6s cubic-bezier(.7, 0, .25, 1); }
.intro.enter .in-logo, .intro.enter .in-text, .intro.enter .intro-skip { opacity: 0; transition: opacity .5s ease; }

@media (prefers-reduced-motion: no-preference) {
  .in-logo { animation: inDown 1.1s .1s cubic-bezier(.2, .8, .2, 1) both; }
  .in-logo::after { animation: sweep 2.8s 1.3s ease-in-out infinite; }
  .in-text { animation: inFade 1s .5s ease both; }
  .in-line span { animation: wordIn .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.9s + var(--i) * .13s); }
  .in-doorwrap { animation: inUp 1.3s .3s cubic-bezier(.2, .8, .2, 1) both; }
  .chand { animation: chand 5s ease-in-out infinite alternate; }
  .in-eyebrow::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
  .handle, .medal, .key { animation: hglow 1.8s ease-in-out infinite alternate; }
  .intro.open .rays { animation: raySpin 50s linear infinite; }
  @keyframes inDown { from { opacity: 0; transform: translateY(-30px) scale(.9); } to { opacity: 1; transform: none; } }
  @keyframes inUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
  @keyframes inFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes wordIn { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes sweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
  @keyframes chand { to { opacity: .72; } }
  @keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
  @keyframes hglow { to { box-shadow: 0 0 28px 5px rgb(246 220 154 / 1); } }
  @keyframes raySpin { to { transform: rotate(360deg); } }
}
@media (prefers-reduced-motion: reduce) { .leaf, .intro.enter .in-door { transition: none; } .in-logo::after { display: none; } }

/* lead-form success (after AJAX submit) */
.form-ok { background: rgb(60 200 120 / .12); border: 1px solid rgb(60 200 120 / .4); border-radius: 16px; padding: 28px 24px; text-align: center; }
.form-ok h3 { margin: 0 0 6px; font-size: 1.3rem; }
.form-ok p { margin: 0; color: var(--muted, #5b5168); }