/* GLOW BLOOM landing page: a dark concert hall where seats light up in oshi colors. */
@font-face { font-family: 'Monoton'; src: url('fonts/Monoton.ttf') format('truetype'); font-display: swap; }

:root {
  color-scheme: dark;
  --hall: #0c0a17; --hall-2: #120f24; --seat: #1b1733; --seat-top: #25203f; --rule: #2a2545;
  --ink: #f3eeff; --ink-dim: #b3acc9; --ink-faint: #7d7699;
  --pink: #ff5fa8; --green: #3ee08f; --orange: #ff9a3c;
  --round: 'Hiragino Maru Gothic ProN', 'Zen Maru Gothic', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--hall); color: var(--ink); font: 16px/1.8 var(--round); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); }
h1, h2, h3 { line-height: 1.35; margin: 0; }
/* Headings break only between phrases, never mid-word (Japanese has no spaces to break at). */
.nw { display: inline-block; }
h2, h3, .lead, .intro { word-break: auto-phrase; text-wrap: pretty; }
p { margin: 0; }

.logo { font-family: 'Monoton', var(--round); font-weight: 400; letter-spacing: .04em; color: #ffd6ea; text-shadow: 0 0 6px var(--pink), 0 0 18px rgba(255, 95, 168, .7); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--pink); color: #1a0b14; font: 700 16px/1 var(--round); text-decoration: none; cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 95, 168, .55); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(255, 95, 168, .8); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); box-shadow: none; }
.btn-ghost:hover { border-color: var(--pink); box-shadow: 0 0 18px rgba(255, 95, 168, .35); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* Header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 12px 20px;
  background: rgba(12, 10, 23, .72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { border-radius: 8px; }
.brand .logo { font-size: 18px; white-space: nowrap; }
.nav { display: flex; gap: 22px; }
.nav a { color: var(--ink-dim); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--ink); }

/* Seat grid that lights up in ripples (filled by lp.js) */
.hall { position: absolute; inset: 0; display: grid; gap: 10px; padding: 10px; overflow: hidden; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%); }
.hall i { border-radius: 22%; background: var(--seat); box-shadow: inset 0 6px 0 -3px var(--seat-top); transition: background .45s, box-shadow .45s; }
.hall i.on { background: var(--c); box-shadow: 0 0 28px var(--c), inset 0 0 18px rgba(255, 255, 255, .45); }
.hall i.fade { transition: background 1.6s, box-shadow 1.6s; }
.hall-soft { opacity: .45; }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 96px 20px 72px; overflow: hidden; isolation: isolate; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 23, .1), rgba(12, 10, 23, .55) 60%, var(--hall)); }
.hero .hall { z-index: -2; opacity: .6; }
.hero-inner { width: min(1120px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.eyebrow, .label { font: 600 12px/1 var(--mono); letter-spacing: .32em; color: var(--pink); text-shadow: 0 0 10px rgba(255, 95, 168, .6); }
.catch { margin: 18px 0 20px; font-size: clamp(44px, 7.4vw, 92px); font-weight: 800; letter-spacing: .02em;
  color: #fff; text-shadow: 0 0 10px rgba(255, 95, 168, .9), 0 0 40px rgba(255, 95, 168, .6); }
.catch span { display: block; }
.lead { color: var(--ink-dim); font-size: clamp(15px, 1.6vw, 18px); text-shadow: 0 1px 12px var(--hall), 0 0 4px var(--hall); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 14px; }
.note { color: var(--ink-faint); font-size: 13px; }
.scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); font: 11px/1 var(--mono); letter-spacing: .3em; color: var(--ink-faint); text-decoration: none; padding-bottom: 34px; }
.scroll::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 1px; height: 26px; background: linear-gradient(var(--pink), transparent); animation: drip 1.8s infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Phone frames */
.phone { margin: 0; position: relative; border-radius: 36px; padding: 10px; background: linear-gradient(160deg, #2b2547, #121022);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 95, 168, .18), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.phone img { border-radius: 27px; }
.hero-phone { width: min(330px, 80vw); justify-self: center; animation: float 6s ease-in-out infinite; }
.phone-sm { border-radius: 28px; padding: 8px; }
.phone-sm img { border-radius: 21px; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Sections */
.section { width: min(1120px, 100% - 40px); margin: 0 auto; padding: 110px 0; }
.section-alt { width: 100%; padding-left: max(20px, calc((100% - 1120px) / 2)); padding-right: max(20px, calc((100% - 1120px) / 2));
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 95, 168, .12), transparent 60%), var(--hall-2); }
.section h2 { margin: 14px 0 18px; font-size: clamp(28px, 4vw, 44px); font-weight: 800; }
.intro { color: var(--ink-dim); max-width: 680px; }
.num { font: 600 13px/1 var(--mono); letter-spacing: .2em; color: var(--pink); }

/* Concept stories */
.story { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; margin-top: 72px; }
.story-rev { grid-template-columns: 1fr 300px; }
.story-rev .phone { order: 2; }
.story-text h3 { margin: 12px 0 14px; font-size: clamp(22px, 2.8vw, 30px); }
.story-text p:last-child { color: var(--ink-dim); max-width: 520px; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { background: rgba(27, 23, 51, .6); border: 1px solid var(--rule); border-radius: 24px; padding: 22px 22px 26px; }
.step .phone { width: 72%; margin: 0 auto 20px; }
.step-num { font: 600 12px/1 var(--mono); letter-spacing: .25em; color: var(--pink); }
.step h3 { margin: 10px 0 8px; font-size: 21px; }
.step p:last-child { color: var(--ink-dim); font-size: 15px; }

/* Demo board */
.demo { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 48px; align-items: center;
  background: rgba(12, 10, 23, .6); border: 1px solid var(--rule); border-radius: 28px; padding: 32px; }
.demo-board { aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 8px; padding: 14px; border-radius: 22px; background: #120f24; transition: box-shadow .8s; }
.demo-board.bloom { box-shadow: 0 0 60px rgba(255, 95, 168, .45); }
.cell { position: relative; border-radius: 22%; background: var(--seat); box-shadow: inset 0 6px 0 -3px var(--seat-top); display: grid; place-items: center; }
.cell.wall { background: repeating-linear-gradient(45deg, #07060d 0 7px, #1d1933 7px 9px); box-shadow: inset 0 0 0 1.5px #3a3460; }
.cell.target::before { content: ''; position: absolute; inset: 12%; border-radius: 16%; border: 2px dashed var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); transition: opacity .4s; }
.cell.mixed::after { content: '✦'; position: relative; color: rgba(255, 255, 255, .6); font-size: 18px; }
.cell .light { position: absolute; inset: 6%; border-radius: 20%; background: radial-gradient(circle at 50% 40%, #fff 0 12%, var(--c) 45%); box-shadow: 0 0 22px var(--c);
  opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; }
.cell .light.mix { background: linear-gradient(135deg, var(--pink), var(--green)); }
.cell.lit .light { opacity: 1; transform: none; }
.cell.lit::before { opacity: .25; }
.cell.lit.mixed::after { color: #fff; text-shadow: 0 0 8px #fff; z-index: 1; }
.cell .seed { position: absolute; z-index: 2; width: 40%; aspect-ratio: 1; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 3px #12101f, 0 0 0 5px rgba(255, 255, 255, .85), 0 0 18px var(--c); }
.demo-side h3 { margin: 12px 0 10px; font-size: 24px; }
.demo-side p { color: var(--ink-dim); }
.demo-side .btn { margin-top: 22px; }
.demo-status { margin-top: 14px !important; min-height: 1.8em; color: var(--pink) !important; font-weight: 700; }

/* Features */
.features { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: linear-gradient(160deg, rgba(37, 32, 63, .7), rgba(18, 15, 36, .7)); border: 1px solid var(--rule); border-radius: 22px; padding: 26px; }
.feature h3 { margin: 12px 0 10px; font-size: 19px; }
.feature p:last-child { color: var(--ink-dim); font-size: 15px; }
.gallery { margin: 56px -20px 0; padding: 10px 20px 24px; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.gallery .phone { flex: 0 0 210px; scroll-snap-align: start; }
.gallery figcaption { margin-top: 12px; text-align: center; color: var(--ink-dim); font-size: 13px; }

/* Price */
.plans { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; }
.plan { background: rgba(27, 23, 51, .7); border: 1px solid var(--rule); border-radius: 24px; padding: 30px; }
.plan-pick { border-color: rgba(255, 95, 168, .6); box-shadow: 0 0 40px rgba(255, 95, 168, .18); }
.plan-name { font-weight: 700; color: var(--ink-dim); }
.price { margin: 6px 0 16px !important; font: 800 44px/1.1 var(--round); }
.price span { margin-left: 10px; font-size: 15px; color: var(--ink-dim); font-weight: 700; }
.plan ul { margin: 0; padding-left: 1.2em; color: var(--ink-dim); font-size: 15px; }
.plan li + li { margin-top: 6px; }

/* Download */
.download { position: relative; overflow: hidden; isolation: isolate; padding: 120px 20px; text-align: center; }
.download .hall { z-index: -2; -webkit-mask-image: none; mask-image: none; }
.download::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12, 10, 23, .82), rgba(12, 10, 23, .25) 70%), linear-gradient(var(--hall), transparent 18%, transparent 82%, var(--hall)); }
.download-inner { max-width: 640px; margin: 0 auto; }
.dl-icon { margin: 0 auto 22px; border-radius: 22px; box-shadow: 0 0 40px rgba(255, 95, 168, .5); }
.download h2 { margin: 14px 0 14px; font-size: clamp(28px, 4.2vw, 46px); text-shadow: 0 0 24px rgba(255, 95, 168, .6); }
.download p { color: var(--ink-dim); }
.download .note { margin-top: 8px; }

/* FAQ */
.faq { margin-top: 36px; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--pink); font: 24px/1 var(--mono); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 22px; color: var(--ink-dim); }

/* Footer */
.foot { padding: 56px 20px 64px; text-align: center; border-top: 1px solid var(--rule); background: #08070f; }
.foot-logo { font-size: 26px; }
.foot-links { margin: 18px 0 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--ink); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--pink); }
.foot-meta { color: var(--ink-faint); font-size: 12px; line-height: 2; }
.foot-meta a { color: var(--ink-dim); }

/* Reveal on scroll (only when JS runs, so the page is complete without it) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* PC: text sizes in line with the reference site at 1440px (lead 20, body 18, nav 16). */
@media (min-width: 901px) {
  body { font-size: 18px; }
  .nav { gap: 28px; }
  .nav a { font-size: 16px; }
  .brand .logo { font-size: 22px; }
  .brand img { width: 36px; height: 36px; }
  .btn { min-height: 54px; padding: 0 30px; font-size: 17px; }
  .btn-small { min-height: 42px; padding: 0 20px; font-size: 15px; }
  .eyebrow, .label { font-size: 13px; }
  .lead { font-size: 20px; }
  .note { font-size: 15px; }
  .section:not(.section-alt), .hero-inner { width: min(1220px, 100% - 64px); }
  .section-alt { padding-left: max(32px, calc((100% - 1220px) / 2)); padding-right: max(32px, calc((100% - 1220px) / 2)); }
  .intro { font-size: 18px; max-width: 760px; }
  .story { grid-template-columns: 320px 1fr; }
  .story-rev { grid-template-columns: 1fr 320px; }
  .story-text h3 { font-size: 32px; }
  .story-text p:last-child { font-size: 18px; max-width: 580px; }
  .num { font-size: 14px; }
  .step h3 { font-size: 23px; }
  .step p:last-child { font-size: 17px; }
  .step-num { font-size: 13px; }
  .demo-side h3 { font-size: 28px; }
  .demo-side p { font-size: 18px; }
  .demo-status { font-size: 17px; }
  .feature { padding: 30px; }
  .feature h3 { font-size: 21px; }
  .feature p:last-child { font-size: 17px; }
  .gallery figcaption { font-size: 15px; }
  .plan-name { font-size: 18px; }
  .price { font-size: 52px; }
  .price span { font-size: 17px; }
  .plan ul { font-size: 17px; }
  .download p { font-size: 18px; }
  .faq summary { font-size: 19px; padding: 24px 44px 24px 0; }
  .faq details p { font-size: 17px; }
  .foot-logo { font-size: 30px; }
  .foot-links a { font-size: 16px; }
  .foot-meta { font-size: 14px; }
}

/* Phones and small tablets */
@media (max-width: 900px) {
  .nav { display: none; }
  .hero { padding-top: 88px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .cta { justify-content: center; }
  .hero-phone { width: min(280px, 72vw); }
  .story, .story-rev { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .story .phone, .story-rev .phone { order: 0; width: min(260px, 70vw); margin: 0 auto; }
  .steps, .features { grid-template-columns: 1fr; }
  .step .phone { width: min(220px, 60vw); }
  .demo { grid-template-columns: 1fr; padding: 22px; gap: 24px; }
  .demo-board { width: min(360px, 100%); margin: 0 auto; }
  .plans { grid-template-columns: 1fr; }
  .section { padding-top: 84px; padding-bottom: 84px; }
  .top { gap: 12px; padding: 10px 16px; }
  .brand { gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .brand .logo { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-phone, .scroll::after { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}