/* ===== Design tokens ===== */
:root {
  --bg: #FDF8F2;
  --bg-deep: #F5EEE2;
  --surface: #FFFFFF;
  --ink: #1A1816;
  --ink-2: #57514A;
  --ink-3: #8C857A;
  --gold: #A68B5B;
  --gold-dark: #8A6F3F;
  --gold-soft: #EFE6D4;
  --line: #E5E0D8;
  --sage: #6B7F5E;

  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-frame: 14px;
  --shadow-card: 0 4px 24px rgba(40,30,10,.06);
  --shadow-hero: 0 30px 70px rgba(40,30,10,.12);

  --btn-primary-bg: #1A1816;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-text: #1A1816;
  --chat-avatar-user-bg: #1A1816;
  --badge-bg: #1A1816;
  --cta-bg: #1A1816;
}

[data-theme="dark"] {
  --bg: #161310;
  --bg-deep: #211D18;
  --surface: #211D18;
  --ink: #F5EFE4;
  --ink-2: #C5BAA9;
  --ink-3: #8C857A;
  --gold: #C7A86E;
  --gold-dark: #E0B97A;
  --gold-soft: #3A322A;
  --line: #3A322A;
  --sage: #8FA87E;
  --btn-primary-bg: #F5EFE4;
  --btn-primary-text: #161310;
  --btn-secondary-text: #F5EFE4;
  --chat-avatar-user-bg: #2A2520;
  --badge-bg: #2A2520;
  --cta-bg: #0E0C0A;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold); }

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}
h1 { font-size: clamp(38px, 5.5vw, 64px); letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: -.02em; }
h3 { font-size: clamp(18px, 2vw, 24px); }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
}

/* ===== Layout ===== */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 600px) { .container { padding: 0 20px; } }

.section { padding: 100px 0; }
.section--deep { background: var(--bg-deep); }
.section--dark { background: #1A1816; color: #F5EFE4; }
@media (max-width: 600px) { .section { padding: 64px 0; } }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-primary:hover { background: var(--gold-dark); color: #fff; transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--btn-secondary-text);
  padding: 13px 27px;
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  text-decoration: none;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-1px); }

.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-1px); }

/* ===== Sparrow ===== */
.sparrow { height: 38px; width: auto; overflow: visible; display: block; }
.sparrow .bf { fill: var(--ink); }
.sparrow .ba { fill: var(--gold-dark); }
.sparrow .be { fill: #FFFFFF; }
.sparrow .bep { fill: var(--ink); }
[data-theme="dark"] .sparrow .bf { fill: #C7A86E; }
[data-theme="dark"] .sparrow .ba { fill: #E0B97A; }
[data-theme="dark"] .sparrow .bep { fill: #161310; }

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,248,242,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .header { background: rgba(22,19,16,.92); }
.header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.header__brand-text {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.header__brand-text strong { font-weight: 500; font-size: 16px; }
.header__brand-text small {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 400; color: var(--ink-3);
}
.header__nav { display: flex; align-items: center; gap: 28px; }
.header__nav a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; transition: color .2s;
}
.header__nav a:hover { color: var(--gold-dark); }
.header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--ink-2); transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--gold); }

/* Mobile menu */
.menu-toggle {
  display: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 18px; height: 2px; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before { content: ''; position: absolute; top: -6px; }
.menu-toggle span::after { content: ''; position: absolute; top: 6px; }

/* ===== HERO ===== */
.hero {
  padding: 72px 0 88px;
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.hero__copy { padding-bottom: 20px; }
.hero h1 { margin: 14px 0 22px; font-size: clamp(40px, 5.5vw, 68px); line-height: .95; }
.hero h1 em { font-style: italic; color: var(--gold-dark); }
.hero__subtitle {
  color: var(--ink-2); font-size: 17px; line-height: 1.6;
  margin-bottom: 30px; max-width: 520px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero__channels {
  display: flex; gap: 18px; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-3); margin-bottom: 32px;
}
.hero__channels a { color: var(--ink-2); transition: color .2s; }
.hero__channels a:hover { color: var(--gold-dark); }
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: 12px;
  overflow: hidden;
  max-width: 520px;
}
.hero__fact {
  padding: 14px 16px; background: var(--bg);
  font-size: 11px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .04em;
}
.hero__fact strong {
  display: block; font-family: 'Fraunces', serif;
  font-size: 18px; font-weight: 500; color: var(--gold-dark);
  text-transform: none; letter-spacing: -.01em; margin-bottom: 3px;
}

/* Browser frames composition */
.hero__stage {
  position: relative; min-height: 520px;
}
.browser-frame {
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 20px 60px rgba(40,30,10,.15);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.browser-frame:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02) !important;
  z-index: 10 !important;
  box-shadow: 0 28px 72px rgba(40,30,10,.22);
}
.browser-bar {
  height: 28px; padding: 0 10px;
  display: flex; align-items: center; gap: 5px;
  background: #f0eee8; border-bottom: 1px solid rgba(0,0,0,.06);
}
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #c9c7c0; }
.browser-bar span {
  margin-left: 6px; color: #6b6b65; font-size: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-frame img { aspect-ratio: 4/3; object-fit: cover; object-position: top; }
.frame-label {
  position: absolute; bottom: 10px; left: 10px; right: 10px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 8px; padding: 10px 12px; color: #fff;
  border-radius: 10px; background: rgba(14,15,12,.72);
  backdrop-filter: blur(10px);
}
.frame-label strong { font-size: 13px; line-height: 1.1; }
.frame-label small { display: block; margin-top: 3px; color: rgba(255,255,255,.58); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

.frame-coffee { width: 74%; right: -2%; top: 20px; transform: rotate(1.5deg); z-index: 2; }
.frame-ceramics { width: 46%; left: -2%; bottom: 10px; transform: rotate(-2.8deg); z-index: 4; }
.frame-photo { width: 44%; right: 0; bottom: -6px; transform: rotate(2deg); z-index: 5; }
.frame-logoped {
  width: 38%; left: 3%; top: -12px;
  border-radius: var(--radius-frame); transform: rotate(-4deg); z-index: 6;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.frame-logoped img { aspect-ratio: 4/3; object-fit: cover; object-position: top; }

/* ===== DEMO SHOWCASE ===== */
.showcase { padding: 100px 0 120px; }
.showcase__head {
  display: grid;
  grid-template-columns: 1fr minmax(260px, .38fr);
  align-items: end; gap: 40px;
  margin-bottom: 56px;
}
.showcase__head h2 { margin-bottom: 0; }
.showcase__lead {
  color: var(--ink-2); font-size: 17px; line-height: 1.55;
  margin-bottom: 4px;
}
.demo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.demo-card-bento {
  position: relative; min-height: 460px; overflow: hidden;
  border-radius: 20px; isolation: isolate;
  background: var(--ink); color: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 48px rgba(40,30,10,.08);
  transition: transform .3s, box-shadow .3s;
  display: flex; flex-direction: column;
}
.demo-card-bento:hover { transform: translateY(-4px); box-shadow: 0 24px 64px rgba(40,30,10,.14); }
.demo-card-bento:nth-child(1) { grid-column: span 7; }
.demo-card-bento:nth-child(2) { grid-column: span 5; }
.demo-card-bento:nth-child(3) { grid-column: span 5; }
.demo-card-bento:nth-child(4) { grid-column: span 7; }
.demo-card-bento__img {
  flex: 1; overflow: hidden; position: relative;
}
.demo-card-bento__img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transition: transform .4s;
}
.demo-card-bento:hover .demo-card-bento__img img { transform: scale(1.03); }
.demo-card-bento__body {
  padding: 20px 24px 22px;
  background: linear-gradient(to top, rgba(14,13,12,.95), rgba(26,24,22,.85));
  position: relative; z-index: 2;
}
.demo-card-bento__title {
  font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500;
  margin-bottom: 4px; line-height: 1.2;
}
.demo-card-bento__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.demo-card-bento__desc {
  font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.5;
  margin-bottom: 14px; max-width: 380px;
}
.demo-card-bento__actions {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.demo-card-bento__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-btn);
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid rgba(255,255,255,.25);
  color: #fff; transition: border-color .2s, background .2s;
}
.demo-card-bento__link:hover { border-color: var(--gold); background: rgba(166,139,91,.15); color: var(--gold); }

/* ===== E-COMMERCE ===== */
.ecom { padding: 100px 0; }
.ecom__inner {
  background: #1A1816; color: #F5EFE4;
  border-radius: 24px; padding: 56px 56px 52px;
  position: relative; overflow: hidden;
}
.ecom__inner::before {
  content: ''; position: absolute; top: -30%; right: -15%;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(166,139,91,.1) 0%, transparent 70%);
  pointer-events: none;
}
.ecom__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.ecom h2 { color: #F5EFE4; margin-bottom: 14px; position: relative; }
.ecom h2 em { font-style: italic; color: var(--gold); }
.ecom__lead {
  color: rgba(245,239,228,.6); font-size: 17px; line-height: 1.55;
  max-width: 600px; margin-bottom: 32px; position: relative;
}
.ecom__features {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  position: relative;
}
.ecom__feat {
  padding: 20px; border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.ecom__feat strong { display: block; font-size: 15px; margin-bottom: 6px; color: #F5EFE4; }
.ecom__feat span { font-size: 13px; color: rgba(245,239,228,.5); line-height: 1.5; }
.ecom__date {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(166,139,91,.12); color: var(--gold);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em;
}
.ecom__date::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ===== HOW IT WORKS ===== */
.how { padding: 100px 0; }
.how h2 { margin-bottom: 10px; }
.how__lead { color: var(--ink-2); font-size: 17px; margin-bottom: 48px; max-width: 560px; }
.how__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.how-step {
  position: relative; padding: 36px 28px;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .3s;
}
.how-step:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-card); }
.how-step__num {
  font-family: 'Fraunces', serif;
  font-size: 56px; font-weight: 500; color: var(--gold-soft);
  line-height: 1; margin-bottom: 16px;
}
.how-step h3 { margin-bottom: 8px; }
.how-step p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

/* Chat dialog illustration */
.how__chat {
  max-width: 520px; margin: 56px auto 0;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 24px 20px;
}
.how__chat-msg { display: flex; gap: 10px; margin-bottom: 12px; }
.how__chat-msg:last-child { margin-bottom: 0; }
.how__chat-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-soft); display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.how__chat-avatar--user { background: var(--ink); color: #fff; }
.how__chat-bubble {
  background: var(--bg-deep); border-radius: 10px 10px 10px 3px;
  padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--ink);
}
.how__chat-bubble--user { background: var(--gold-soft); border-radius: 10px 10px 3px 10px; }
.how__chat-status {
  margin-top: 10px; font-size: 11px; color: var(--sage);
  display: flex; align-items: center; gap: 5px;
}
.how__chat-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }

/* ===== CAPABILITIES ===== */
.caps { padding: 100px 0; }
.caps__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px;
  margin-top: 48px;
}
.caps__item { display: flex; gap: 16px; }
.caps__num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: var(--gold-soft); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
}
.caps__item h3 { font-size: 18px; margin-bottom: 6px; }
.caps__item p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }

/* ===== PROOF (compact) ===== */
.proof { padding: 80px 0; }
.proof h2 { margin-bottom: 6px; }
.proof__lead { color: var(--ink-2); font-size: 15px; margin-bottom: 36px; }
.proof__strip {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-soft) transparent;
}
.proof__strip::-webkit-scrollbar { height: 6px; }
.proof__strip::-webkit-scrollbar-track { background: transparent; }
.proof__strip::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.proof__strip::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.proof-card-sm {
  flex: 0 0 240px; scroll-snap-align: start;
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .25s;
  text-decoration: none; color: inherit;
}
.proof-card-sm:hover { transform: translateY(-3px); }
.proof-card-sm__img { height: 140px; overflow: hidden; }
.proof-card-sm__img img { width: 100%; height: 100%; object-fit: cover; }
.proof-card-sm__body { padding: 14px; }
.proof-card-sm__name { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; color: var(--ink); }
.proof-card-sm__niche { font-size: 11px; color: var(--gold); margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.proof__note { margin-top: 20px; font-size: 13px; color: var(--ink-3); font-style: italic; }

/* ===== PRICE ===== */
.price { padding: 100px 0; }
.price__subtitle { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin-top: 12px; max-width: 600px; }
.price__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: start; }
.price-card {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 32px 28px; position: relative;
}
.price-card--alt { background: var(--bg-deep); }
.price-card__badge {
  display: inline-block; background: var(--ink); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .04em; padding: 4px 10px; border-radius: 6px; margin-bottom: 16px;
}
.price-card__title { font-size: 20px; margin-bottom: 12px; }
.price-card__amount { font-family: 'Fraunces', serif; font-size: 48px; font-weight: 500; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.price-card__amount--italic { font-style: italic; color: var(--gold-dark); }
.price-card__period { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
.price-card__note { font-size: 13px; color: var(--ink-3); font-style: italic; line-height: 1.5; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.price-card__list { list-style: none; margin-bottom: 28px; }
.price-card__list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.price-card__list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--sage); font-weight: 600; font-size: 14px; }
.price-card__btn { width: 100%; justify-content: center; text-align: center; }
.price__footnote { margin-top: 20px; font-size: 13px; color: var(--ink-3); font-style: italic; }

/* ===== QUOTE ===== */
.quote { text-align: center; max-width: 700px; margin: 0 auto; padding: 88px 24px; }
.quote blockquote { font-family: 'Fraunces', serif; font-size: clamp(20px, 2.5vw, 26px); font-style: italic; color: var(--ink); line-height: 1.5; margin-bottom: 20px; }
.quote cite { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-3); font-style: normal; }

/* ===== FAQ ===== */
.faq { padding: 100px 0; }
.faq__list { max-width: 720px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-card__q {
  padding: 20px 52px 20px 24px; font-family: 'Fraunces', serif;
  font-size: 17px; font-weight: 500; cursor: pointer; color: var(--ink);
  list-style: none; position: relative; line-height: 1.4;
}
.faq-card__q::after {
  content: '+'; position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%); font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 300; color: var(--ink-3);
  transition: transform .2s; line-height: 1;
}
.faq-card[open] .faq-card__q::after { transform: translateY(-50%) rotate(45deg); }
.faq-card__a { padding: 0 24px 20px; font-size: 15px; color: var(--ink-2); line-height: 1.65; }

/* ===== FINAL CTA ===== */
.cta-section { padding: 80px 32px; }
.cta-card {
  background: linear-gradient(145deg, #2A2520 0%, #1A1510 40%, #0E0C0A 100%);
  border-radius: 24px; padding: 64px 48px; text-align: center;
  position: relative; overflow: hidden;
}
.cta-card::before {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(166,139,91,.12) 0%, transparent 70%);
  pointer-events: none;
}
.cta-card h2 { font-size: clamp(28px, 3.5vw, 42px); color: #F5EFE4; margin-bottom: 16px; position: relative; }
.cta-card h2 em { font-style: italic; color: var(--gold); }
.cta-card p { color: rgba(245,239,228,.6); font-size: 17px; margin-bottom: 36px; position: relative; }
.cta-card__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-card .btn-secondary { border-color: rgba(245,239,228,.2); color: #F5EFE4; }
.cta-card .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
.cta-card .btn-primary { background: #F5EFE4; color: #1A1816; }
.cta-card .btn-primary:hover { background: var(--gold); color: #fff; }

/* ===== CONTACTS (simplified) ===== */
.contacts { padding: 80px 0; }
.contacts__grid { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.contacts__card {
  flex: 1; min-width: 200px; background: var(--surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 24px 20px; text-decoration: none; color: var(--ink);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.contacts__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hero); }
.contacts__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--gold-soft); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
}
.contacts__label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.contacts__value { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; word-break: break-all; }

/* ===== FOOTER ===== */
.footer { padding: 40px 32px; border-top: 1px solid var(--line); background: var(--ink); color: rgba(245,239,228,.6); }
.footer__inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__copy { font-size: 13px; color: rgba(245,239,228,.5); }
.footer__links { display: flex; gap: 24px; }
.footer__links a { font-size: 13px; color: rgba(245,239,228,.5); }
.footer__links a:hover { color: var(--gold); }
.footer .sparrow .bf { fill: #F5EFE4; }
.footer .sparrow .ba { fill: var(--gold); }
.footer .sparrow .be { fill: #1A1816; }
.footer .sparrow .bep { fill: #F5EFE4; }

/* ===== LIGHTBOX ===== */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); align-items: center; justify-content: center; padding: 40px; cursor: pointer; }
.lightbox.active { display: flex; }
.lightbox__close { position: absolute; top: 20px; right: 28px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; z-index: 1001; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .2s; }
.lightbox__close:hover { background: rgba(255,255,255,.15); }
.lightbox__img { max-width: 90vw; max-height: 85vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); object-fit: contain; cursor: default; }

/* ===== BLOG GRID (in styles.css for blog index page) ===== */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 40px; }
.blog-card-main { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.blog-card-main:hover { transform: translateY(-4px); box-shadow: var(--shadow-hero); }
.blog-card-main__img { aspect-ratio: 4/3; overflow: hidden; }
.blog-card-main__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.blog-card-main:hover .blog-card-main__img img { transform: scale(1.04); }
.blog-card-main__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.blog-card-main__topic { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.blog-card-main__title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.blog-card-main__summary { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin-bottom: 14px; flex: 1; }
.blog-card-main__cta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--gold-dark); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.blog-card-main__cta::after { content: '→'; transition: transform .2s; }
.blog-card-main:hover .blog-card-main__cta::after { transform: translateX(4px); }

/* ===== UTILITIES ===== */
.section-subtitle { max-width: 560px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th { text-align: left; padding: 10px 8px; font-weight: 600; color: var(--ink); }
.compare-table td { padding: 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--ink-3) 20%, transparent); }
.compare-table__win { color: var(--sage); font-weight: 500; }
.compare-table__neutral { opacity: .65; }
.related-links { padding-top: 0; }
.related-links__list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.related-links__item { display: inline-block; padding: 8px 18px; border: 1.5px solid var(--line); border-radius: var(--radius-btn); color: var(--ink-2); font-size: 14px; text-decoration: none; transition: border-color .2s, color .2s; }
.related-links__item:hover { border-color: var(--gold); color: var(--gold-dark); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__stage { min-height: 400px; }
  .demo-grid { grid-template-columns: repeat(6, 1fr); }
  .demo-card-bento:nth-child(1),
  .demo-card-bento:nth-child(4) { grid-column: span 6; }
  .demo-card-bento:nth-child(2),
  .demo-card-bento:nth-child(3) { grid-column: span 3; }
  .ecom__features { grid-template-columns: repeat(2, 1fr); }
  .showcase__head { grid-template-columns: 1fr; }
  .caps__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .header__nav { display: none; }
  .menu-toggle { display: flex; }
  .hero { padding: 40px 0 56px; }
  .hero h1 { font-size: clamp(32px, 7vw, 44px); }
  .hero__stage { min-height: 340px; }
  .frame-coffee { width: 68%; }
  .frame-ceramics { width: 44%; }
  .frame-photo { width: 42%; }
  .frame-logoped { width: 110px; }
  .hero__facts { grid-template-columns: 1fr; max-width: 100%; }
  .demo-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .demo-card-bento { min-height: 380px; }
  .demo-card-bento:nth-child(n) { grid-column: span 1; }
  .how__steps { grid-template-columns: 1fr; }
  .price__grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .ecom__features { grid-template-columns: 1fr 1fr; }
  .ecom__inner { padding: 40px 28px; }
  .cta-card { padding: 48px 28px; }
  .cta-card h2 { font-size: 26px; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__links { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
  .hero__stage { min-height: 280px; }
  .frame-coffee { width: 72%; right: 0; top: 10px; }
  .frame-ceramics { width: 50%; left: 0; bottom: 8px; }
  .frame-photo { width: 48%; right: 0; bottom: -4px; }
  .frame-logoped { width: 90px; left: 2%; top: -6px; }
  .frame-label { padding: 8px 10px; }
  .frame-label strong { font-size: 11px; }
  .demo-card-bento { min-height: 340px; }
  .demo-card-bento__body { padding: 16px; }
  .ecom__features { grid-template-columns: 1fr; }
  .contacts__card { min-width: 140px; }
}