@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap");

.bookify-reference-desktop { display: block; }
.bookify-reference-mobile { display: none; }
.bookify-landing { min-height: 100vh; overflow-x: hidden; background: #0D0D0D; }
.bookify-landing .bk-hero-text-grad {
  background: linear-gradient(90deg, var(--bk-orange-soft) 0%, var(--bk-orange) 50%, var(--bk-orange-soft) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

@media (max-width: 767px) {
  .bookify-reference-desktop { display: none; }
  .bookify-reference-mobile { display: block; }
}

@scope (.bookify-reference-desktop) {
/* ============================================================
   Bookify Design Tokens
   --------------------
   Import this file first in every prototype.

   Bookify's identity is built on three pillars:
     1. Dark stage — near-black canvas (#0D0D0D) like a venue at lights-down.
     2. Bookify Orange — a single high-impact primary (#FF551A) for CTAs, accents,
        ticket scanner glow, and the "Bookify it!" button. Never duplicated by any
        other color in the system.
     3. Montserrat — one typeface, three weights (Regular / Medium / Bold).
        Bold is the workhorse — used for headlines, button labels, and numbers.

   ============================================================ */

/* ---------- 1. Font loading -------------------------------------------------
   Montserrat is loaded via Google Fonts. If you need offline / production:
   self-host the .woff2 files in /fonts and replace this @import.
---------------------------------------------------------------------------- */
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */



:scope {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --bk-orange:           #FF551A;   /* primary — CTAs, accents, ticket icons */
  --bk-orange-hover:     #E64613;   /* -8% lightness on hover */
  --bk-orange-press:     #C73B0F;   /* -16% on active/press */

  /* ============================================================
     COLOR — Surface (dark mode is the canonical theme)
     ============================================================ */
  --bk-bg:               #0D0D0D;   /* page background — "lights down" */
  --bk-surface-1:        #222222;   /* cards, package tiles, search field bg on hover */
  --bk-surface-2:        #3C3C3C;   /* form inputs (date pickers, dropdowns) */
  --bk-surface-3:        #595959;   /* secondary controls, stroke-only borders */
  --bk-light:            #FFFFFF;   /* primary text on dark; light-mode surface */
  --bk-near-black:       #0D0D0D;   /* darkest text on light surfaces */

  /* ============================================================
     COLOR — Text
     ============================================================ */
  --bk-fg-1:             #FFFFFF;   /* primary text on dark — 100% white */
  --bk-fg-2:             rgba(255,255,255,0.70);  /* secondary, body copy */
  --bk-fg-3:             #989898;   /* placeholder / muted (e.g. "DD/MM/YYYY") */
  --bk-fg-4:             #606060;   /* deeply muted, e.g. light-mode placeholder */
  --bk-fg-on-orange:     #FFFFFF;   /* always white on orange */
  --bk-fg-on-light:      #0D0D0D;

  /* ============================================================
     COLOR — Semantic (used in pricing tiers, status, etc.)
     ============================================================ */
  --bk-green:            #009245;   /* Basic tier tag, success */
  --bk-blue:             #008DE0;   /* Premium tier tag, info */
  --bk-purple:           #8A38F5;   /* White Label / annotation strokes */
  --bk-red:              #FF3A44;   /* Errors, destructive */
  --bk-yellow:           #FFE000;   /* Warnings */

  /* ============================================================
     COLOR — Decoration / dividers
     ============================================================ */
  --bk-divider:          rgba(255,255,255,0.10);  /* hairline on dark */
  --bk-divider-dark:     #222222;                  /* hairline on light surface */
  --bk-overlay-gradient: linear-gradient(180deg, rgba(13,13,13,0) 0%, #0D0D0D 100%);

  /* ============================================================
     TYPE — Family, weights, line height
     ============================================================ */
  --bk-font-sans:        "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bk-fw-regular:       400;
  --bk-fw-medium:        500;
  --bk-fw-bold:          700;

  --bk-lh-tight:         1.00;   /* Bookify uses lineHeight: 100% almost everywhere */
  --bk-lh-snug:          1.20;
  --bk-lh-normal:        1.40;   /* for long body copy — Bookify's only deviation */

  /* ============================================================
     TYPE — Sizes (desktop)
     ============================================================ */
  --bk-fs-display:       32px;   /* hero headline */
  --bk-fs-h1:            30px;   /* section "Events" header */
  --bk-fs-h2:            28px;   /* package tier name, big stat */
  --bk-fs-h3:            24px;   /* section header (Why Sell, Packages, Clients) */
  --bk-fs-h4:            22px;   /* card title (event name) */
  --bk-fs-body-lg:       18px;   /* primary button label, dropdown text */
  --bk-fs-body:          16px;   /* card description, ticket count */
  --bk-fs-meta:          15px;   /* metadata, footer links, supporting copy */
  --bk-fs-meta-sm:       14px;   /* date stamps, mobile body */
  --bk-fs-caption:       12px;   /* fine print, badge text */

  /* ============================================================
     TYPE — Mobile overrides
     ============================================================ */
  --bk-fs-display-m:     20px;
  --bk-fs-h1-m:          20px;
  --bk-fs-h3-m:          20px;
  --bk-fs-h4-m:          18px;

  /* ============================================================
     SPACING — 4-px base, mostly 5/10/20/30/40/60 in the wild
     ============================================================ */
  --bk-s-1:              4px;
  --bk-s-2:              5px;
  --bk-s-3:              10px;
  --bk-s-4:              15px;
  --bk-s-5:              20px;   /* default card padding */
  --bk-s-6:              30px;   /* package card padding */
  --bk-s-7:              40px;
  --bk-s-8:              50px;
  --bk-s-9:              60px;
  --bk-s-10:             80px;   /* section gap */
  --bk-s-page-x:         165px;  /* page gutter on 1440 desktop */
  --bk-s-page-x-mobile:  20px;   /* page gutter on 375 mobile */

  /* ============================================================
     RADIUS
     ============================================================ */
  --bk-r-xs:             5px;    /* form inputs, dashed annotation rects */
  --bk-r-sm:             10px;   /* buttons, cards, event cards, packages */
  --bk-r-md:             15px;   /* search-bar pill */
  --bk-r-lg:             20px;   /* feature image containers */
  --bk-r-pill:           9999px;
  --bk-r-circle:         50%;    /* carousel arrows, social icons */

  /* ============================================================
     SHADOWS — Bookify is mostly FLAT. Shadows only appear on the
     featured event hero on hover, and on the floating mobile-app
     mockup. Stay flat.
     ============================================================ */
  --bk-shadow-none:      none;
  --bk-shadow-card:      0 8px 24px rgba(0,0,0,0.35);     /* hover lift */
  --bk-shadow-float:     0 24px 48px rgba(0,0,0,0.45);    /* mockup over orange */

  /* ============================================================
     BORDERS
     ============================================================ */
  --bk-border-card:      1px solid #222222;
  --bk-border-hairline:  1px solid rgba(255,255,255,0.10);
  --bk-border-annotate:  1px dashed #8A38F5;   /* design-only, never ship */

  /* ============================================================
     MOTION
     ============================================================ */
  --bk-easing-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --bk-easing-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --bk-duration-fast:    120ms;
  --bk-duration-base:    180ms;
  --bk-duration-slow:    320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --bk-page-max:         1440px;
  --bk-content-max:      1110px;  /* inner column on desktop */
  --bk-mobile-max:       375px;
}

/* ============================================================
   Base resets / page defaults
   ============================================================ */
:scope {
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-regular);
  line-height: var(--bk-lh-tight);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic type roles — apply via class or as a building block.
   These mirror what shows up across the homepage hero / sections.
   ============================================================ */
.bk-display {
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-bold);
  font-size: var(--bk-fs-display);
  line-height: var(--bk-lh-tight);
  letter-spacing: -0.005em;
}

.bk-h1 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h1); line-height: var(--bk-lh-tight); }
.bk-h2 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h2); line-height: var(--bk-lh-tight); }
.bk-h3 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h3); line-height: var(--bk-lh-tight); }
.bk-h4 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h4); line-height: var(--bk-lh-tight); }

.bk-body-lg   { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body-lg); line-height: var(--bk-lh-tight); }
.bk-body      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body);    line-height: var(--bk-lh-normal); }
.bk-meta      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-normal); }
.bk-meta-bold { font-weight: var(--bk-fw-bold);    font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-tight); }
.bk-caption   { font-weight: var(--bk-fw-medium);  font-size: var(--bk-fs-caption); line-height: var(--bk-lh-tight); }

/* ============================================================
   Button primitive — the ONE Bookify CTA shape.
   Solid orange, white bold label, 10-px radius, 42-px tall, 20-px x-pad.
   ============================================================ */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-s-3);
  height: 42px;
  padding: 0 var(--bk-s-5);
  border: 0;
  border-radius: var(--bk-r-sm);
  background: var(--bk-orange);
  color: var(--bk-fg-on-orange);
  font: var(--bk-fw-bold) var(--bk-fs-body-lg)/1 var(--bk-font-sans);
  text-align: center;
  cursor: pointer;
  transition: background var(--bk-duration-base) var(--bk-easing-out),
              transform   var(--bk-duration-fast) var(--bk-easing-out);
}
.bk-btn:hover  { background: var(--bk-orange-hover); }
.bk-btn:active { background: var(--bk-orange-press); transform: scale(0.98); }

.bk-btn-ghost {
  background: transparent;
  color: var(--bk-fg-1);
}
.bk-btn-ghost:hover { background: rgba(255,255,255,0.08); }


* { box-sizing: border-box; }
:scope {
  margin: 0;
  padding: 0;
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Page frame — 1440px design width, centered */
.bk-page { width: 1440px; margin: 0 auto; position: relative; background: var(--bk-bg); }
.bk-section { padding: 0 165px; }
.bk-gutter { padding-left: 165px; padding-right: 165px; }

/* Eyebrow pill */
.bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--bk-font-sans);
  font-weight: 500;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
}
.bk-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bk-orange);
  box-shadow: 0 0 12px var(--bk-orange);
}

/* Section eyebrow (smaller, orange) */
.bk-section-eyebrow {
  font-family: var(--bk-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bk-orange);
}

/* Hide scrollbars for horizontal scrollers */
.bk-no-scrollbar::-webkit-scrollbar { display: none; }
.bk-no-scrollbar { scrollbar-width: none; }

/* Soft hairline */
.bk-hairline { border-top: 1px solid rgba(255,255,255,0.08); }

/* Card */
.bk-card {
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.bk-card-2 {
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}

/* Subtle reveal */
@keyframes bkFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-reveal { animation: bkFadeUp 600ms var(--bk-easing-out) both; }

/* Dotted background motif */
.bk-dots {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Tweak-driven overrides — toggled via data-attrs on .bk-page root */

/* ---------- ACCENT palette ---------- */
.bk-page { /* defaults — Bookify Orange */
  --bk-orange:        #FF551A;
  --bk-orange-hover:  #E64613;
  --bk-orange-press:  #C73B0F;
  --bk-orange-soft:   #FFB186;
  --bk-glow:          255, 85, 26;
}
.bk-page[data-accent="cobalt"] {
  --bk-orange:        #3A7BD5;
  --bk-orange-hover:  #2E63B4;
  --bk-orange-press:  #224E91;
  --bk-orange-soft:   #9BC4FF;
  --bk-glow:          58, 123, 213;
}
.bk-page[data-accent="pistachio"] {
  --bk-orange:        #26C281;
  --bk-orange-hover:  #1FA46A;
  --bk-orange-press:  #168558;
  --bk-orange-soft:   #84F0BD;
  --bk-glow:          38, 194, 129;
}
.bk-page[data-accent="violet"] {
  --bk-orange:        #C77DFF;
  --bk-orange-hover:  #B466F0;
  --bk-orange-press:  #9B49DB;
  --bk-orange-soft:   #E6C2FF;
  --bk-glow:          199, 125, 255;
}

/* ---------- DENSITY: cinematic / default / dense ---------- */
.bk-page {
  --bk-section-pad: 140px;
  --bk-hero-h1: 74px;
  --bk-hero-pad-top: 76px;
  --bk-hero-pad-bottom: 60px;
}
.bk-page[data-density="cinematic"] {
  --bk-section-pad: 200px;
  --bk-hero-h1: 92px;
  --bk-hero-pad-top: 110px;
  --bk-hero-pad-bottom: 100px;
}
.bk-page[data-density="dense"] {
  --bk-section-pad: 80px;
  --bk-hero-h1: 56px;
  --bk-hero-pad-top: 40px;
  --bk-hero-pad-bottom: 40px;
}

/* Apply density spacing to every section (their inline paddingTop:140 → override). */
.bk-page section.bk-section { padding-top: var(--bk-section-pad) !important; }
.bk-page .bk-hero-pad         { padding-top: var(--bk-hero-pad-top) !important; padding-bottom: var(--bk-hero-pad-bottom) !important; }
.bk-page .bk-hero-h1          { font-size: var(--bk-hero-h1) !important; }
/* Final CTA strip also responds */
.bk-page section.bk-final-cta { margin-top: var(--bk-section-pad) !important; padding-top: calc(var(--bk-section-pad) * 0.5) !important; padding-bottom: calc(var(--bk-section-pad) * 0.5) !important; }

/* ---------- MOOD: bold (default) / editorial ---------- */
.bk-page[data-mood="editorial"] .bk-hero-text-grad {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
.bk-page[data-mood="editorial"] .bk-hero-glow      { opacity: 0.15 !important; }
.bk-page[data-mood="editorial"] .bk-dots           { opacity: 0.18 !important; }
.bk-page[data-mood="editorial"] .bk-card-glow      { opacity: 0 !important; }
.bk-page[data-mood="editorial"] .bk-dashboard      { box-shadow: 0 30px 80px rgba(0,0,0,0.5) !important; }
.bk-page[data-mood="editorial"] .bk-featured-glow  { opacity: 0.35 !important; }
.bk-page[data-mood="editorial"] .bk-bg-photo       { opacity: 0.32 !important; filter: saturate(0.6); }
.bk-page[data-mood="editorial"] .bk-strip-decor    { opacity: 0.06 !important; }
.bk-page[data-mood="editorial"] .bk-eyebrow .dot   { box-shadow: none !important; }
.bk-page[data-mood="editorial"] .bk-final-cta      { background: #0d0d0d !important; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.bk-page[data-mood="editorial"] .bk-final-cta-eyebrow { color: var(--bk-orange) !important; }
.bk-page[data-mood="editorial"] .bk-final-cta-title   { color: #fff !important; }

/* Editorial: switch hero text from gradient to a thinner editorial treatment */
.bk-page[data-mood="editorial"] .bk-hero-h1 {
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.bk-page[data-mood="editorial"] .bk-section-title {
  font-weight: 600 !important;
}

}

@scope (.bookify-reference-mobile) {
/* ============================================================
   Bookify Mobile Styles — 375 px canonical viewport
   ============================================================ */

/* ============================================================
   Bookify Design Tokens
   --------------------
   Import this file first in every prototype.

   Bookify's identity is built on three pillars:
     1. Dark stage — near-black canvas (#0D0D0D) like a venue at lights-down.
     2. Bookify Orange — a single high-impact primary (#FF551A) for CTAs, accents,
        ticket scanner glow, and the "Bookify it!" button. Never duplicated by any
        other color in the system.
     3. Montserrat — one typeface, three weights (Regular / Medium / Bold).
        Bold is the workhorse — used for headlines, button labels, and numbers.

   ============================================================ */

/* ---------- 1. Font loading -------------------------------------------------
   Montserrat is loaded via Google Fonts. If you need offline / production:
   self-host the .woff2 files in /fonts and replace this @import.
---------------------------------------------------------------------------- */
/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */



:scope {
  /* ============================================================
     COLOR — Brand
     ============================================================ */
  --bk-orange:           #FF551A;   /* primary — CTAs, accents, ticket icons */
  --bk-orange-hover:     #E64613;   /* -8% lightness on hover */
  --bk-orange-press:     #C73B0F;   /* -16% on active/press */

  /* ============================================================
     COLOR — Surface (dark mode is the canonical theme)
     ============================================================ */
  --bk-bg:               #0D0D0D;   /* page background — "lights down" */
  --bk-surface-1:        #222222;   /* cards, package tiles, search field bg on hover */
  --bk-surface-2:        #3C3C3C;   /* form inputs (date pickers, dropdowns) */
  --bk-surface-3:        #595959;   /* secondary controls, stroke-only borders */
  --bk-light:            #FFFFFF;   /* primary text on dark; light-mode surface */
  --bk-near-black:       #0D0D0D;   /* darkest text on light surfaces */

  /* ============================================================
     COLOR — Text
     ============================================================ */
  --bk-fg-1:             #FFFFFF;   /* primary text on dark — 100% white */
  --bk-fg-2:             rgba(255,255,255,0.70);  /* secondary, body copy */
  --bk-fg-3:             #989898;   /* placeholder / muted (e.g. "DD/MM/YYYY") */
  --bk-fg-4:             #606060;   /* deeply muted, e.g. light-mode placeholder */
  --bk-fg-on-orange:     #FFFFFF;   /* always white on orange */
  --bk-fg-on-light:      #0D0D0D;

  /* ============================================================
     COLOR — Semantic (used in pricing tiers, status, etc.)
     ============================================================ */
  --bk-green:            #009245;   /* Basic tier tag, success */
  --bk-blue:             #008DE0;   /* Premium tier tag, info */
  --bk-purple:           #8A38F5;   /* White Label / annotation strokes */
  --bk-red:              #FF3A44;   /* Errors, destructive */
  --bk-yellow:           #FFE000;   /* Warnings */

  /* ============================================================
     COLOR — Decoration / dividers
     ============================================================ */
  --bk-divider:          rgba(255,255,255,0.10);  /* hairline on dark */
  --bk-divider-dark:     #222222;                  /* hairline on light surface */
  --bk-overlay-gradient: linear-gradient(180deg, rgba(13,13,13,0) 0%, #0D0D0D 100%);

  /* ============================================================
     TYPE — Family, weights, line height
     ============================================================ */
  --bk-font-sans:        "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --bk-fw-regular:       400;
  --bk-fw-medium:        500;
  --bk-fw-bold:          700;

  --bk-lh-tight:         1.00;   /* Bookify uses lineHeight: 100% almost everywhere */
  --bk-lh-snug:          1.20;
  --bk-lh-normal:        1.40;   /* for long body copy — Bookify's only deviation */

  /* ============================================================
     TYPE — Sizes (desktop)
     ============================================================ */
  --bk-fs-display:       32px;   /* hero headline */
  --bk-fs-h1:            30px;   /* section "Events" header */
  --bk-fs-h2:            28px;   /* package tier name, big stat */
  --bk-fs-h3:            24px;   /* section header (Why Sell, Packages, Clients) */
  --bk-fs-h4:            22px;   /* card title (event name) */
  --bk-fs-body-lg:       18px;   /* primary button label, dropdown text */
  --bk-fs-body:          16px;   /* card description, ticket count */
  --bk-fs-meta:          15px;   /* metadata, footer links, supporting copy */
  --bk-fs-meta-sm:       14px;   /* date stamps, mobile body */
  --bk-fs-caption:       12px;   /* fine print, badge text */

  /* ============================================================
     TYPE — Mobile overrides
     ============================================================ */
  --bk-fs-display-m:     20px;
  --bk-fs-h1-m:          20px;
  --bk-fs-h3-m:          20px;
  --bk-fs-h4-m:          18px;

  /* ============================================================
     SPACING — 4-px base, mostly 5/10/20/30/40/60 in the wild
     ============================================================ */
  --bk-s-1:              4px;
  --bk-s-2:              5px;
  --bk-s-3:              10px;
  --bk-s-4:              15px;
  --bk-s-5:              20px;   /* default card padding */
  --bk-s-6:              30px;   /* package card padding */
  --bk-s-7:              40px;
  --bk-s-8:              50px;
  --bk-s-9:              60px;
  --bk-s-10:             80px;   /* section gap */
  --bk-s-page-x:         165px;  /* page gutter on 1440 desktop */
  --bk-s-page-x-mobile:  20px;   /* page gutter on 375 mobile */

  /* ============================================================
     RADIUS
     ============================================================ */
  --bk-r-xs:             5px;    /* form inputs, dashed annotation rects */
  --bk-r-sm:             10px;   /* buttons, cards, event cards, packages */
  --bk-r-md:             15px;   /* search-bar pill */
  --bk-r-lg:             20px;   /* feature image containers */
  --bk-r-pill:           9999px;
  --bk-r-circle:         50%;    /* carousel arrows, social icons */

  /* ============================================================
     SHADOWS — Bookify is mostly FLAT. Shadows only appear on the
     featured event hero on hover, and on the floating mobile-app
     mockup. Stay flat.
     ============================================================ */
  --bk-shadow-none:      none;
  --bk-shadow-card:      0 8px 24px rgba(0,0,0,0.35);     /* hover lift */
  --bk-shadow-float:     0 24px 48px rgba(0,0,0,0.45);    /* mockup over orange */

  /* ============================================================
     BORDERS
     ============================================================ */
  --bk-border-card:      1px solid #222222;
  --bk-border-hairline:  1px solid rgba(255,255,255,0.10);
  --bk-border-annotate:  1px dashed #8A38F5;   /* design-only, never ship */

  /* ============================================================
     MOTION
     ============================================================ */
  --bk-easing-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --bk-easing-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --bk-duration-fast:    120ms;
  --bk-duration-base:    180ms;
  --bk-duration-slow:    320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --bk-page-max:         1440px;
  --bk-content-max:      1110px;  /* inner column on desktop */
  --bk-mobile-max:       375px;
}

/* ============================================================
   Base resets / page defaults
   ============================================================ */
:scope {
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-regular);
  line-height: var(--bk-lh-tight);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Semantic type roles — apply via class or as a building block.
   These mirror what shows up across the homepage hero / sections.
   ============================================================ */
.bk-display {
  font-family: var(--bk-font-sans);
  font-weight: var(--bk-fw-bold);
  font-size: var(--bk-fs-display);
  line-height: var(--bk-lh-tight);
  letter-spacing: -0.005em;
}

.bk-h1 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h1); line-height: var(--bk-lh-tight); }
.bk-h2 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h2); line-height: var(--bk-lh-tight); }
.bk-h3 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h3); line-height: var(--bk-lh-tight); }
.bk-h4 { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-h4); line-height: var(--bk-lh-tight); }

.bk-body-lg   { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body-lg); line-height: var(--bk-lh-tight); }
.bk-body      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-body);    line-height: var(--bk-lh-normal); }
.bk-meta      { font-weight: var(--bk-fw-regular); font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-normal); }
.bk-meta-bold { font-weight: var(--bk-fw-bold);    font-size: var(--bk-fs-meta);    line-height: var(--bk-lh-tight); }
.bk-caption   { font-weight: var(--bk-fw-medium);  font-size: var(--bk-fs-caption); line-height: var(--bk-lh-tight); }

/* ============================================================
   Button primitive — the ONE Bookify CTA shape.
   Solid orange, white bold label, 10-px radius, 42-px tall, 20-px x-pad.
   ============================================================ */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bk-s-3);
  height: 42px;
  padding: 0 var(--bk-s-5);
  border: 0;
  border-radius: var(--bk-r-sm);
  background: var(--bk-orange);
  color: var(--bk-fg-on-orange);
  font: var(--bk-fw-bold) var(--bk-fs-body-lg)/1 var(--bk-font-sans);
  text-align: center;
  cursor: pointer;
  transition: background var(--bk-duration-base) var(--bk-easing-out),
              transform   var(--bk-duration-fast) var(--bk-easing-out);
}
.bk-btn:hover  { background: var(--bk-orange-hover); }
.bk-btn:active { background: var(--bk-orange-press); transform: scale(0.98); }

.bk-btn-ghost {
  background: transparent;
  color: var(--bk-fg-1);
}
.bk-btn-ghost:hover { background: rgba(255,255,255,0.08); }


* { box-sizing: border-box; }
:scope {
  margin: 0; padding: 0;
  background: var(--bk-bg);
  color: var(--bk-fg-1);
  font-family: var(--bk-font-sans);
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Root page — 375 px, bottom clearance for tab bar */
.bk-page {
  width: 375px;
  margin: 0 auto;
  position: relative;
  background: var(--bk-bg);
  --bk-orange-soft: #FFB186;
  --bk-glow: 255, 85, 26;
}

/* Accent overrides */
.bk-page[data-accent="cobalt"] {
  --bk-orange: #3A7BD5; --bk-orange-hover: #2E63B4; --bk-orange-press: #224E91;
  --bk-orange-soft: #9BC4FF; --bk-glow: 58, 123, 213;
}
.bk-page[data-accent="pistachio"] {
  --bk-orange: #26C281; --bk-orange-hover: #1FA46A; --bk-orange-press: #168558;
  --bk-orange-soft: #84F0BD; --bk-glow: 38, 194, 129;
}
.bk-page[data-accent="violet"] {
  --bk-orange: #C77DFF; --bk-orange-hover: #B466F0; --bk-orange-press: #9B49DB;
  --bk-orange-soft: #E6C2FF; --bk-glow: 199, 125, 255;
}

/* Mood: editorial */
.bk-page[data-mood="editorial"] .bk-hero-text-grad {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
}
.bk-page[data-mood="editorial"] .bk-bg-photo { opacity: 0.28 !important; filter: saturate(0.6); }
.bk-page[data-mood="editorial"] .bk-card-glow { opacity: 0 !important; }
.bk-page[data-mood="editorial"] .bk-eyebrow .dot { box-shadow: none !important; }
.bk-page[data-mood="editorial"] .bk-final-cta { background: #111 !important; border-top: 1px solid rgba(255,255,255,0.06); }
.bk-page[data-mood="editorial"] .bk-final-cta-title { color: #fff !important; }
.bk-page[data-mood="editorial"] .bk-final-cta-eyebrow { color: var(--bk-orange) !important; }

/* Section wrapper */
.bk-section { padding: 0 20px; }

/* Eyebrow pill */
.bk-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 500; font-size: 11px;
  color: rgba(255,255,255,0.85); letter-spacing: 0.01em;
}
.bk-eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bk-orange); box-shadow: 0 0 8px var(--bk-orange);
}

/* Section eyebrow (uppercase label) */
.bk-section-eyebrow {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bk-orange);
}

/* Scrollbar hide */
.bk-no-scrollbar::-webkit-scrollbar { display: none; }
.bk-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* Dots motif */
.bk-dots {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Reveal */
@keyframes bkFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bk-reveal { animation: bkFadeUp 500ms var(--bk-easing-out) both; }

}