:root {
  color-scheme: light;
  --ink: #18201e;
  --muted: #77766e;
  --line: rgba(24, 32, 30, .14);
  --paper: #f6f0e8;
  --accent: #9a7152;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; }

.showcase-shell { width: min(1280px, 100%); margin: 0 auto; padding: 24px 18px 36px; }
.showcase-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0 0; color: var(--muted); font-size: .76rem; }
.showcase-breadcrumb a { text-decoration: none; }
.showcase-breadcrumb a:hover, .showcase-breadcrumb strong { color: var(--ink); }
.eyebrow, .card-number, .hero-meta, .collection-count, .card-tag { margin: 0; color: var(--muted); font: 700 .66rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

.showcase-launch-gate { display: grid; gap: 20px; align-content: center; min-height: clamp(500px, 68vh, 720px); padding: 72px 0; border-bottom: 1px solid var(--line); }
.showcase-launch-gate h1 { max-width: 820px; margin: 0; font: 400 clamp(3.8rem, 11vw, 8.5rem)/.86 var(--serif); letter-spacing: -.085em; }
.showcase-launch-gate h1 em { color: var(--accent); font-weight: 400; }
.showcase-launch-gate .intro { max-width: 650px; }
.showcase-launch-note { margin: 0; color: var(--muted); font: 700 .68rem/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
button.hero-button--disabled,
button.hero-button--disabled:hover,
button.hero-button--disabled:focus-visible { background: #a8ada9; border-color: #a8ada9; color: #fff; cursor: not-allowed; opacity: 1; pointer-events: none; transform: none; }

.showcase-hero { display: grid; gap: 32px; align-items: center; padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.hero-copy { display: grid; gap: 18px; position: relative; z-index: 1; }
.showcase-hero h1 { max-width: 700px; margin: 0; font: 400 clamp(4rem, 12vw, 8.8rem)/.84 var(--serif); letter-spacing: -.085em; }
.showcase-hero h1 em, .collection-intro h2 em, .showcase-cta h2 em { color: var(--accent); font-weight: 400; }
.intro { max-width: 590px; margin: 0; color: #5f605b; font: 400 clamp(1rem, 2vw, 1.18rem)/1.6 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 8px; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: transform .25s ease, background .25s ease; }
.hero-button:hover { transform: translateY(-3px); background: #2a3531; }
.hero-button span, .hero-text-link span { font-size: 1.1rem; }
.hero-text-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-text-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 10px; }

.hero-stage { position: relative; min-height: 440px; isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; width: 78%; height: 78%; right: 9%; top: 10%; border-radius: 50%; background: #ded2c3; filter: blur(1px); z-index: -2; }
.hero-stage::after { content: ""; position: absolute; width: 62%; height: 12%; right: 19%; bottom: 8%; border-radius: 50%; background: rgba(28, 35, 31, .18); filter: blur(18px); z-index: -1; }
.stage-orbit { position: absolute; border: 1px solid rgba(154, 113, 82, .36); border-radius: 50%; transform: rotate(-26deg); pointer-events: none; }
.stage-orbit--one { width: 74%; height: 46%; top: 18%; right: 12%; }
.stage-orbit--two { width: 88%; height: 55%; top: 13%; right: 5%; border-color: rgba(24, 32, 30, .13); }
.hero-phone { position: absolute; overflow: hidden; width: min(44vw, 240px); aspect-ratio: .56; border: 7px solid #202622; border-radius: 27px; background: #222; box-shadow: 0 30px 50px rgba(23, 28, 26, .22); }
.hero-phone::after { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); pointer-events: none; }
.hero-phone img { width: 100%; height: 100%; object-fit: cover; }
.hero-phone--back { top: 30px; right: 9%; transform: rotate(10deg); }
.hero-phone--front { left: 16%; bottom: 18px; transform: rotate(-8deg); z-index: 2; }
.hero-phone--green { border-color: #182322; }
.stage-note { position: absolute; right: 2%; bottom: 3%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; background: rgba(246,240,232,.88); border: 1px solid rgba(24,32,30,.12); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-4deg); z-index: 3; }
.stage-note-dot { width: 7px; height: 7px; border-radius: 50%; background: #75b98b; box-shadow: 0 0 0 4px rgba(117,185,139,.16); }

.collection-intro { display: grid; gap: 18px; padding: 64px 0 44px; }
.collection-intro h2, .showcase-cta h2 { margin: 8px 0 0; font: 400 clamp(2.6rem, 7vw, 5.4rem)/.9 var(--serif); letter-spacing: -.07em; }
.collection-intro > p { max-width: 480px; margin: 0; color: #65665f; font: 400 1rem/1.65 var(--serif); }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.collection-count { display: flex; align-items: center; gap: 12px; }
.collection-count span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: .62rem; letter-spacing: 0; }
.collection-count strong { color: var(--ink); font: 700 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.collection-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.filter-chip { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: 700 .68rem var(--sans); letter-spacing: .05em; }
.filter-chip:hover, .filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.template-grid { display: grid; gap: 18px; padding: 24px 0 64px; }
.template-card { display: grid; overflow: hidden; min-height: 500px; border: 1px solid rgba(24, 32, 30, .15); background: #eee7dd; transition: transform .35s ease, box-shadow .35s ease; }
.template-card:hover { transform: translateY(-5px); box-shadow: 0 20px 34px rgba(24, 32, 30, .1); }
.template-card[hidden] { display: none; }
.card-preview { min-height: 320px; background: #ddd; overflow: hidden; }
.card-preview img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.template-card:hover .card-preview img { transform: scale(1.045); }
.card-copy { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 24px; }
.card-topline, .card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-tag { padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: .58rem; letter-spacing: .08em; }
.card-copy h2 { margin: 3px 0 0; font: 400 clamp(2rem, 5vw, 3.1rem)/.95 var(--serif); letter-spacing: -.06em; }
.card-copy > p:not(.card-number) { max-width: 440px; margin: 0; color: #5e605b; font: 400 1rem/1.55 var(--serif); }
.card-footer { align-items: flex-end; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(24,32,30,.15); }
.card-footer > span { max-width: 130px; color: var(--muted); font-size: .61rem; font-weight: 800; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
.open-link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0 2px; border-bottom: 1px solid currentColor; text-decoration: none; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.open-link span { font-size: 1.1rem; transition: transform .2s ease; }
.open-link:hover span { transform: translate(3px, -3px); }
.template-card--maroon { background: #f2e3d3; }
.template-card--maroon .card-tag { color: #75452e; }
.template-card--royal { color: #efe4c8; background: #182322; }
.template-card--royal .card-copy > p:not(.card-number) { color: #b8b6a9; }
.template-card--royal .card-number, .template-card--royal .card-tag { color: #d2ae67; }
.template-card--royal .card-footer { border-color: rgba(239,228,200,.2); }
.template-card--royal .card-footer > span { color: #aaa997; }
.template-card--floral { background: #f8e9e4; }
.template-card--floral .card-tag { color: #a56f70; }
.template-card--minimal { background: #ebe6dc; }
.template-card--minimal .card-tag { color: #5f665e; }
.template-card--cinema { color: #f2eee6; background: #151515; }
.template-card--cinema .card-copy > p:not(.card-number) { color: #bdb9ae; }
.template-card--cinema .card-number, .template-card--cinema .card-tag { color: #d3aa78; }
.template-card--cinema .card-footer { border-color: rgba(242,238,230,.2); }
.template-card--cinema .card-footer > span { color: #aaa69d; }

.showcase-cta { display: grid; gap: 24px; align-items: end; padding: 34px 0 18px; border-top: 1px solid var(--line); }
.showcase-cta > div:last-child { display: grid; gap: 20px; max-width: 440px; }
.showcase-cta p:not(.eyebrow) { margin: 0; color: #65665f; font: 400 1rem/1.65 var(--serif); }
.hero-button--dark { justify-self: start; background: #9a7152; border-color: #9a7152; }
.hero-button--dark:hover { background: #7d593f; }

@media (min-width: 680px) {
  .showcase-shell { padding-inline: 34px; }
  .showcase-hero { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); min-height: 650px; padding-top: 78px; }
  .hero-stage { min-height: 560px; }
  .hero-phone { width: min(23vw, 270px); }
  .collection-intro, .showcase-cta { grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr); }
  .template-card { grid-template-columns: minmax(280px, .9fr) 1.1fr; min-height: 420px; }
  .card-preview, .card-preview img { min-height: 420px; }
  .card-copy { padding: 36px; }
}

@media (min-width: 980px) {
  .showcase-shell { padding-inline: 48px; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .template-card { display: flex; flex-direction: column; min-height: 635px; }
  .card-preview, .card-preview img { min-height: 390px; height: 390px; }
  .template-card:nth-child(5) { grid-column: 1 / -1; grid-template-columns: 1.15fr .85fr; display: grid; min-height: 390px; }
  .template-card:nth-child(5) .card-preview, .template-card:nth-child(5) .card-preview img { height: 100%; min-height: 390px; }
  .showcase-cta { padding-block: 60px 24px; }
}

@media (max-width: 680px) {
  .collection-toolbar { align-items: flex-start; flex-direction: column; }
  .collection-filters { justify-content: flex-start; }
  .hero-stage { min-height: 390px; }
  .hero-phone { width: 43vw; max-width: 210px; }
  .hero-phone--back { right: 8%; }
  .hero-phone--front { left: 12%; }
  .stage-note { right: 0; }
}

@media (max-width: 520px) {
  .showcase-shell { padding-top: 14px; }
  .showcase-hero { padding-top: 48px; }
  .hero-meta { gap: 8px 14px; }
  .card-topline, .card-footer { align-items: flex-start; flex-direction: column; }
  .card-footer { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-card, .card-preview img, .hero-button, .open-link span { transition: none; }
}