:root {
  --cream: #f3eee6;
  --paper: #fffaf3;
  --ink: #211c18;
  --muted: #6f655b;
  --accent: #315e43;
  --accent-dark: #223e31;
  --gold: #c8a24a;
  --stone: #d9c9b3;
  --line: rgba(45, 37, 30, .13);
  --shadow: 0 24px 70px rgba(34, 28, 22, .14);
  --radius: 30px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(780px 420px at 12% 8%, rgba(200, 162, 74, .18), transparent 68%),
    radial-gradient(760px 420px at 88% 12%, rgba(49, 94, 67, .14), transparent 70%),
    var(--cream);
}
a { color: inherit; text-decoration: none; }
.demo-ribbon {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center; gap: 18px;
  padding: 9px 16px; font-size: .86rem;
  color: rgba(33, 28, 24, .78);
  background: rgba(255, 250, 243, .84);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.demo-ribbon span { font-weight: 800; color: var(--accent-dark); }
.demo-ribbon a { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.demo-header {
  position: sticky; top: 38px; z-index: 35;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0; padding: 12px 14px 12px 18px;
  border: 1px solid rgba(45, 37, 30, .12); border-radius: 999px;
  background: rgba(255, 250, 243, .80); box-shadow: 0 16px 42px rgba(34, 28, 22, .08);
  backdrop-filter: blur(16px);
}
.demo-brand { display: inline-flex; align-items: center; gap: 12px; }
.demo-brand-mark {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
  color: #fffaf3; font-weight: 900; letter-spacing: -.08em;
  background: linear-gradient(135deg, var(--accent), var(--gold));
}
.demo-brand strong, .demo-brand small { display: block; }
.demo-brand strong { font-weight: 900; line-height: 1.1; }
.demo-brand small { color: var(--muted); font-size: .78rem; }
.demo-nav { display: flex; align-items: center; gap: 22px; color: rgba(33, 28, 24, .78); font-weight: 750; font-size: .95rem; }
.demo-nav a:hover { color: var(--accent-dark); }
.demo-header-cta, .demo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-weight: 850; border: 1px solid transparent; white-space: nowrap;
}
.demo-header-cta, .demo-btn-primary { color: #fffaf3; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 16px 34px rgba(35, 62, 49, .20); }
.demo-btn-ghost { color: var(--ink); background: rgba(255, 250, 243, .64); border-color: rgba(45, 37, 30, .14); }
.demo-hero, .demo-section, .demo-contact { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.demo-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 500px); align-items: center;
  gap: clamp(32px, 6vw, 70px); min-height: 620px;
  padding: clamp(58px, 7vw, 88px) 0 clamp(44px, 6vw, 76px);
}
.demo-kicker {
  margin: 0 0 16px; width: fit-content; padding: 8px 12px; border-radius: 999px;
  color: var(--accent-dark); background: rgba(255, 250, 243, .72); border: 1px solid rgba(49, 94, 67, .16);
  font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em;
}
.demo-hero h1, .demo-section h2, .demo-contact h2 {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
}
.demo-hero h1 { max-width: 650px; font-size: clamp(2.65rem, 4.35vw, 4.5rem); }
.demo-lead { max-width: 610px; margin: 24px 0 0; color: rgba(33, 28, 24, .74); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.75; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.demo-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; max-width: 610px; }
.demo-proof div { padding: 15px 17px; border: 1px solid rgba(45, 37, 30, .10); border-radius: 20px; background: rgba(255, 250, 243, .64); }
.demo-proof strong, .demo-proof span { display: block; }
.demo-proof strong { font-size: 1.08rem; }
.demo-proof span { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.demo-hero-card {
  position: relative; min-height: 465px; border-radius: 42px;
  background: linear-gradient(145deg, rgba(255,250,243,.76), rgba(200,162,74,.24));
  box-shadow: var(--shadow); overflow: hidden; border: 1px solid rgba(45, 37, 30, .10);
}
.demo-work-visual { position: absolute; inset: 20px; border-radius: 34px; background: linear-gradient(135deg, #d9c9b3, #8f765f); overflow: hidden; }
.demo-work-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 54px 100%; }
.demo-work-line { position: absolute; height: 18px; border-radius: 999px; background: rgba(255,250,243,.78); transform: rotate(-42deg); }
.demo-work-line-1 { width: 380px; left: 34px; top: 90px; }
.demo-work-line-2 { width: 360px; left: 96px; top: 158px; }
.demo-work-line-3 { width: 330px; left: 155px; top: 226px; }
.demo-work-tool { position: absolute; right: 62px; bottom: 58px; width: 180px; height: 44px; border-radius: 999px; background: #2f3d36; box-shadow: 0 0 0 14px rgba(255,250,243,.14); }
.demo-floating-card { position: absolute; left: 28px; right: 28px; bottom: 28px; padding: 22px 24px; border-radius: 28px; background: rgba(255,250,243,.90); border: 1px solid rgba(45,37,30,.10); box-shadow: 0 18px 42px rgba(34,28,22,.16); }
.demo-floating-card span { display: block; color: var(--muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.demo-floating-card strong { display: block; margin-top: 7px; font-size: 1.45rem; }
.demo-section { padding: clamp(62px, 7vw, 90px) 0; border-top: 1px solid var(--line); }
.demo-section-head-wide { max-width: 850px; margin-bottom: 30px; }
.demo-section-head-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr); gap: 28px; align-items: end; margin-bottom: 30px; }
.demo-section h2, .demo-contact h2 { font-size: clamp(2rem, 3.1vw, 3.25rem); }
.demo-section-head p, .demo-contact p { color: rgba(33, 28, 24, .70); line-height: 1.7; font-size: 1.02rem; }
.demo-benefits, .demo-products, .demo-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.demo-benefits article, .demo-product-card, .demo-trust-grid article, .demo-contact-card { border: 1px solid rgba(45,37,30,.10); border-radius: var(--radius); background: rgba(255,250,243,.72); box-shadow: 0 18px 44px rgba(34,28,22,.07); }
.demo-benefits article { padding: 24px; }
.demo-benefits span { color: var(--gold); font-weight: 900; letter-spacing: .12em; }
.demo-benefits h3, .demo-product-card h3 { margin: 12px 0 8px; font-size: 1.25rem; }
.demo-benefits p, .demo-product-card p, .demo-trust-grid span { color: var(--muted); line-height: 1.65; }
.demo-product-card { overflow: hidden; }
.demo-product-visual { min-height: 180px; background: linear-gradient(135deg, rgba(49,94,67,.28), rgba(200,162,74,.22)); }
.demo-product-visual-1 { background: radial-gradient(circle at 30% 40%, #fffaf3 0 10%, transparent 11%), linear-gradient(135deg, #315e43, #c8a24a); }
.demo-product-visual-2 { background: repeating-linear-gradient(90deg, #d9c9b3 0 28px, #bfa98b 28px 56px); }
.demo-product-visual-3 { background: radial-gradient(circle at 70% 25%, rgba(255,250,243,.7), transparent 26%), linear-gradient(135deg, #223e31, #8f765f); }
.demo-product-copy { padding: 22px; }
.demo-trust { background: rgba(255,250,243,.28); border-radius: 42px; padding-inline: clamp(18px, 3vw, 34px); }
.demo-trust-grid article { padding: 24px; }
.demo-trust-grid strong { display: block; margin-bottom: 8px; font-size: 1.08rem; }
.demo-contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, .5fr); gap: 28px; align-items: center; padding: clamp(62px, 7vw, 90px) 0; }
.demo-contact-card { padding: 28px; display: grid; gap: 12px; }
.demo-contact-card strong { font-size: 1.25rem; }
.demo-contact-card span { color: var(--muted); }
@media (max-width: 900px) {
  .demo-header { border-radius: 28px; align-items: flex-start; flex-wrap: wrap; }
  .demo-nav { order: 3; width: 100%; overflow-x: auto; padding-top: 8px; }
  .demo-hero, .demo-contact, .demo-section-head-row { grid-template-columns: 1fr; }
  .demo-hero { min-height: auto; }
  .demo-benefits, .demo-products, .demo-trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .demo-header-cta { width: 100%; }
  .demo-proof { grid-template-columns: 1fr; }
  .demo-hero h1 { font-size: clamp(2.25rem, 12vw, 3.3rem); }
  .demo-hero-card { min-height: 360px; border-radius: 30px; }
  .demo-nav { gap: 16px; }
}