/* ==========================================================================
   Marketing pages: home, packages, contact and the legal pages.
   Builds on app.css tokens. The home page alternates black and light
   surfaces; one entrance sequence plays on the hero and nowhere else.
   ========================================================================== */

/* ---------- Home frame ---------- */
/* Black page so the translucent dark header reads as black at the top;
   every light section paints its own surface. */
.page-home { background: #000; }
.home { flex: 1 0 auto; }
.home-flash { padding-top: var(--s-6); }

.section { padding-block: clamp(72px, 9vw, 128px); background: #fff; }
.section.section-gray { background: var(--canvas); }
.section-title { max-width: 24ch; text-wrap: balance; font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); font-weight: var(--fw-semibold); line-height: 1.15; }
.section-lead { max-width: 46ch; text-wrap: pretty; margin-top: var(--s-4); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--text-3); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-10); margin-bottom: clamp(40px, 5vw, 64px); }
.section-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.section-more { margin-top: var(--s-8); text-align: center; }
.more-link { display: inline-flex; align-items: center; gap: 2px; color: var(--link); font-size: var(--fs-lg); white-space: nowrap; }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-link svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: #000; color: var(--text-on-dark); text-align: center; }
.hero::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 72%; background: radial-gradient(ellipse 46% 60% at 50% 100%, rgba(41, 151, 255, 0.3), rgba(41, 151, 255, 0.06) 55%, transparent 75%); pointer-events: none; }
.hero-copy { padding-top: clamp(48px, 6vw, 88px); }
.hero-title { text-wrap: balance; font-size: clamp(2.625rem, 1.2rem + 5vw, 5rem); font-weight: var(--fw-semibold); line-height: 1.12; color: #fff; }
.hero-lead { max-width: 36ch; text-wrap: pretty; margin: var(--s-5) auto 0; font-size: clamp(1.1875rem, 1rem + 0.75vw, 1.625rem); line-height: 1.45; color: var(--text-on-dark-2); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-8); }
.hero-note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--text-on-dark-2); }

.hero-stage { --w: clamp(112px, 21vw, 248px); display: flex; justify-content: center; align-items: flex-end; direction: ltr; margin-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero-card { position: relative; width: var(--w); height: auto; margin-inline: calc(var(--w) * -0.1); filter: drop-shadow(0 32px 40px rgba(0, 0, 0, 0.6)); }
.hero-card.c1 { z-index: 1; transform: translateY(12%) rotate(-7deg); }
.hero-card.c2 { z-index: 3; transform: translateY(-2%) rotate(-2deg); }
.hero-card.c3 { z-index: 2; transform: translateY(2%) rotate(3deg); }
.hero-card.c4 { z-index: 1; transform: translateY(14%) rotate(8deg); }

@media (prefers-reduced-motion: no-preference) {
  .hero-title, .hero-lead, .hero-actions, .hero-note { animation: rise 300ms var(--ease-out) both; }
  .hero-lead { animation-delay: 80ms; }
  .hero-actions { animation-delay: 160ms; }
  .hero-note { animation-delay: 200ms; }
  .hero-card { animation: lift 300ms var(--ease-out) both; }
  .hero-card.c2 { animation-delay: 240ms; }
  .hero-card.c3 { animation-delay: 300ms; }
  .hero-card.c1 { animation-delay: 360ms; }
  .hero-card.c4 { animation-delay: 420ms; }
}
@keyframes rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes lift { from { opacity: 0; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-8); margin-top: clamp(40px, 5vw, 64px); list-style: none; }
.steps li { display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line-strong); }
.step-icon { color: var(--accent); }
.step-icon svg { width: 32px; height: 32px; stroke-width: 1.5; }
.steps p { font-size: 1.0625rem; line-height: 1.55; color: var(--text-3); }
.steps strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------- Feature tiles ---------- */
.tiles { padding: 0 12px 12px; background: #fff; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; align-items: center; min-height: 620px; padding: clamp(40px, 5vw, 64px) var(--s-8) 0; overflow: hidden; border-radius: var(--r-lg); text-align: center; }
.tile-light { background: var(--canvas); color: var(--text); }
.tile-dark { background: #000; color: var(--text-on-dark); }
.tile h3 { text-wrap: balance; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); font-weight: var(--fw-semibold); line-height: 1.15; }
.tile-dark h3 { color: #fff; }
.tile > p { max-width: 32ch; text-wrap: balance; margin-top: var(--s-3); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--text-3); }
.tile-dark > p { color: var(--text-on-dark-2); }
.tile-visual { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; margin-top: var(--s-10); }

/* Tile: WhatsApp message */
.chat { width: min(340px, 100%); padding: var(--s-4) var(--s-4) 0; border-radius: 32px 32px 0 0; background: #fff; text-align: start; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.07); }
.chat-head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-1) var(--s-3); border-bottom: 1px solid var(--line); }
.chat-head .avatar { width: 36px; height: 36px; background: linear-gradient(180deg, #d4a373, #a2845e); }
.chat-head strong { display: block; font-size: var(--fs-sm); }
.chat-head span { font-size: var(--fs-meta); color: var(--text-3); }
.chat-body { padding: var(--s-4) 0 var(--s-6); }
.bubble { width: 84%; padding: 6px 6px var(--s-2); border-radius: 18px; border-start-start-radius: 6px; background: var(--canvas); }
.bubble img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 12%; border-radius: 13px; background: #fff; }
.bubble p { margin-top: var(--s-2); padding-inline: var(--s-2); font-size: var(--fs-sm); line-height: 1.55; color: var(--text); }
.bubble-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-inline: var(--s-2); font-size: var(--fs-meta); color: var(--text-3); }
.bubble-meta svg { width: 16px; height: 16px; color: var(--accent); }

/* Tile: QR entry pass */
.qr-visual { position: relative; width: min(232px, 70%); aspect-ratio: 1; padding: 22px; border-radius: 32px; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 96px rgba(41, 151, 255, 0.35); }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-visual .scanner-corners { --c: var(--accent-on-dark); inset: -18px; }
.qr-caption { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-10) 0 clamp(48px, 6vw, 72px); padding: 8px 16px; border-radius: var(--r-pill); background: var(--dark-2); color: var(--text-on-dark); font-size: var(--fs-sm); }
.qr-caption svg { width: 16px; height: 16px; color: var(--accent-on-dark); }

/* Tile: door check-in */
.checkin { width: min(340px, 100%); padding: var(--s-6) var(--s-6) var(--s-8); border-radius: 32px 32px 0 0; background: var(--dark-2); text-align: start; }
.checkin-status { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semibold); color: #30d158; }
.checkin-status svg { width: 20px; height: 20px; }
.checkin-name { margin-top: var(--s-2); font-size: 1.5rem; font-weight: var(--fw-semibold); color: #fff; }
.checkin-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.checkin-counts div { padding: var(--s-3) var(--s-2); border-radius: 14px; background: var(--dark-3); text-align: center; }
.checkin-counts span { display: block; font-size: var(--fs-meta); color: var(--text-on-dark-2); }
.checkin-counts strong { font-size: 1.375rem; font-weight: var(--fw-semibold); color: #fff; }
.checkin-cta { display: grid; place-items: center; min-height: 48px; margin-top: var(--s-4); border-radius: var(--r-pill); background: var(--accent); color: #fff; font-weight: var(--fw-medium); }

/* Tile: live attendance */
.live { width: min(380px, 100%); padding: var(--s-6) var(--s-6) var(--s-2); border-radius: 32px 32px 0 0; background: #fff; text-align: start; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.07); }
.live-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.live-head strong { font-size: var(--fs-body); }
.live-head span { font-size: var(--fs-meta); color: var(--text-3); }
.live-count { margin: var(--s-2) 0 var(--s-3); font-size: 2.75rem; font-weight: var(--fw-semibold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.live-count small { font-size: var(--fs-body); font-weight: var(--fw-regular); color: var(--text-3); }
.live-rows { margin-top: var(--s-4); list-style: none; }
.live-rows li { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.live-rows .avatar { width: 32px; height: 32px; font-size: var(--fs-meta); }
.live-rows .badge { margin-inline-start: auto; }

/* ---------- Live demo ---------- */
.demo-section { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(80px, 10vw, 136px); background: #000; color: var(--text-on-dark); }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.demo-copy .section-title { color: #fff; }
.demo-copy .section-lead { color: var(--text-on-dark-2); }
.demo-form { display: grid; gap: var(--s-6); max-width: 420px; margin-top: var(--s-10); }
.demo-form .form-label { color: var(--text-on-dark); }
.demo-form .form-input { border-color: var(--ink-600); background: var(--dark-2); color: #fff; }
.demo-form .form-input:hover { border-color: var(--ink-500); }
.demo-form .form-input:focus { border-color: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.32); }
.demo-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.demo-chips .chip { height: 40px; padding: 0 var(--s-5); background: var(--dark-2); color: var(--text-on-dark); font-size: var(--fs-body); }
.demo-chips .chip:hover { background: var(--dark-3); }
.demo-chips .chip.is-active { background: #f5f5f7; color: var(--text); }
.demo-chips .chip:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 2px; }
.demo-stage { position: relative; display: grid; place-items: center; }
.demo-stage::before { content: ""; position: absolute; inset: -10% -20%; z-index: -1; background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(41, 151, 255, 0.24), transparent 70%); pointer-events: none; }

.demo-card { --dc-accent: #9a7b4f; position: relative; display: flex; flex-direction: column; align-items: center; width: min(360px, 100%); aspect-ratio: 3 / 4; padding: var(--s-10) var(--s-8) var(--s-6); border-radius: 22px; background: #fff; color: var(--text); font-family: var(--font-card); text-align: center; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); }
.demo-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--dc-accent) 35%, transparent); border-radius: 14px; pointer-events: none; transition: border-color var(--t) var(--ease-out); }
.demo-card[data-kind="graduation"] { --dc-accent: #1d4e89; }
.demo-card[data-kind="opening"] { --dc-accent: #1f6f5c; }
.demo-card[data-kind="birthday"] { --dc-accent: #c2366f; }
.dc-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--dc-accent); transition: background-color var(--t) var(--ease-out); }
.dc-kicker { margin-top: var(--s-4); font-size: 1rem; color: var(--text-3); }
.dc-title { margin-top: var(--s-2); font-size: 1.25rem; line-height: 1.5; }
.dc-name { margin-top: var(--s-3); font-size: 2.125rem; font-weight: 700; line-height: 1.3; color: var(--dc-accent); overflow-wrap: anywhere; transition: color var(--t) var(--ease-out); }
.dc-rule { width: 48px; height: 1px; margin: var(--s-4) auto; background: var(--dc-accent); opacity: 0.5; }
.dc-meta { font-family: var(--font); font-size: var(--fs-sm); line-height: 1.7; color: var(--text-3); }
.dc-qr { display: block; width: 84px; height: 84px; margin-top: auto; color: var(--text); }
.dc-qr svg { display: block; width: 100%; height: 100%; }
.dc-foot { margin-top: var(--s-2); font-family: var(--font); font-size: var(--fs-meta); color: var(--ink-400); }

/* ---------- Template showcase ---------- */
.showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.showcase-item { margin: 0; }
.showcase-img { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-md); background: var(--canvas); }
.showcase-img img { width: 100%; height: 100%; padding: var(--s-5); object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.12)); }
.showcase-item figcaption { display: grid; gap: 2px; margin-top: var(--s-3); text-align: center; }
.showcase-name { font-weight: var(--fw-semibold); color: var(--text); }
.showcase-cat { font-size: var(--fs-sm); color: var(--text-3); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s-12); align-items: start; }
.faq { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 72px; padding-block: var(--s-5); font-size: var(--fs-lg); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--link); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-item summary svg { width: 22px; height: 22px; color: var(--text-3); transition: transform var(--t) var(--ease-out); }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { max-width: 64ch; padding-bottom: var(--s-6); font-size: 1.0625rem; line-height: 1.7; color: var(--text-3); }

/* ---------- Closing ---------- */
.closing { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(88px, 11vw, 152px); background: #000; color: var(--text-on-dark); text-align: center; }
.closing::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 80%; background: radial-gradient(ellipse 40% 50% at 50% 0%, rgba(41, 151, 255, 0.22), transparent 70%); pointer-events: none; }
.closing-icon { width: 96px; height: 96px; margin: 0 auto var(--s-8); border-radius: 22.5%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 24px 64px rgba(41, 151, 255, 0.28); }
.closing h2 { max-width: 20ch; text-wrap: balance; margin-inline: auto; font-size: clamp(2rem, 1.25rem + 2.6vw, 3.5rem); font-weight: var(--fw-semibold); line-height: 1.15; color: #fff; }
.closing p { max-width: 40ch; text-wrap: pretty; margin: var(--s-4) auto 0; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); color: var(--text-on-dark-2); }

/* ---------- Packages, contact, legal ---------- */
.page-intro { max-width: 720px; margin-bottom: var(--s-12); }
.page-intro h1 { text-wrap: balance; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.15; }
.page-intro p { margin-top: var(--s-4); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--text-3); }
.packages-note { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-8); margin-top: var(--s-10); font-size: var(--fs-sm); color: var(--text-2); }
.packages-note span { display: inline-flex; align-items: center; gap: var(--s-2); }
.packages-note svg { width: 18px; height: 18px; color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.contact-aside { display: grid; gap: var(--s-5); }
.contact-aside h2 { font-size: var(--fs-h3); }
.contact-aside p { color: var(--text-3); }
.fact-list { display: grid; gap: var(--s-4); list-style: none; }
.fact-list li { display: flex; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-3); }
.fact-list svg { width: 20px; height: 20px; color: var(--accent); }
.fact-list strong { display: block; font-weight: var(--fw-semibold); color: var(--text); }
.legal { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.15; }
.legal .meta { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-3); }
.legal-body { margin-top: var(--s-10); padding: var(--s-10); border-radius: var(--r-md); background: var(--surface); }

/* ---------- Responsive ---------- */
@media (max-width: 1068px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
}
@media (max-width: 833px) {
  .tile-grid { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 560px; }
  .demo { grid-template-columns: minmax(0, 1fr); }
  .demo-form { max-width: none; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
  .hero-actions .btn { flex: 1 1 100%; max-width: 320px; }
  .hero-stage { --w: clamp(96px, 28vw, 160px); }
  .hero-card { margin-inline: calc(var(--w) * -0.2); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--s-4); padding-block: var(--s-5); }
  .steps li:last-child { border-bottom: 1px solid var(--line-strong); }
  .step-icon svg { width: 28px; height: 28px; }
  .tiles { padding: 0 8px 8px; }
  .tile-grid { gap: 8px; }
  .tile { min-height: 0; padding: var(--s-10) var(--s-5) 0; border-radius: 22px; }
  .chat, .checkin, .live { border-radius: 26px 26px 0 0; }
  .section-head { align-items: flex-start; }
  .legal-body { padding: var(--s-6) var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-lead, .hero-actions, .hero-note, .hero-card { animation: none; }
}