:root {
  --bg: #f5f7f2;
  --surface: #ffffff;
  --ink: #111512;
  --muted: #697169;
  --line: #dfe4dd;
  --accent: #c9ff35;
  --accent-ink: #152000;
  --dark: #111512;
  --radius: 24px;
  --shell: 1220px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(17, 21, 18, 0.08);
}

.nav-wrap {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.055em;
}

.brand-dot { color: #86aa16; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.primary-nav > a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  color: #353c36;
  transition: color .2s ease, transform .2s ease;
}

.primary-nav > a:hover { color: var(--ink); }

.primary-nav .nav-cta {
  background: var(--dark);
  color: #fff;
  padding: 11px 17px;
  border-radius: 999px;
}

.primary-nav .nav-cta:hover {
  color: #fff;
  transform: translateY(-1px);
}

.site-language-menu{
  position:relative;
}
.site-language-menu summary{
  min-width:54px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  border:1px solid rgba(17,21,18,.09);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:#394139;
  font-size:10px;
  font-weight:850;
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.site-language-menu summary::-webkit-details-marker{display:none}
.site-language-menu summary span{font-size:10px;transform:translateY(-1px)}
.site-language-menu[open] summary{background:#fff;box-shadow:0 8px 26px rgba(20,30,22,.09)}
.site-language-options{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:120;
  min-width:124px;
  display:grid;
  gap:3px;
  padding:7px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  box-shadow:0 18px 50px rgba(20,30,22,.14);
}
.site-language-options a{
  min-height:32px;
  display:flex;
  align-items:center;
  padding:0 9px;
  border-radius:8px;
  color:#616a62;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}
.site-language-options a:hover{background:#f3f6f1;color:var(--ink)}
.site-language-options a.is-active{background:var(--dark);color:#fff}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--ink);
  margin: 6px auto;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 78px;
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .45;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17,21,18,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,21,18,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.hero-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 68px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #616961;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: #91b71d;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 28px;
  font-size: clamp(54px, 6.15vw, 92px);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 820;
}

h1 span {
  position: relative;
  z-index: 0;
}

h1 span::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -3%;
  bottom: .08em;
  height: .24em;
  z-index: -1;
  transform: rotate(-1.2deg);
  background: var(--accent);
}

.hero-lead {
  max-width: 610px;
  margin-bottom: 32px;
  color: #555e56;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 780;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.button:hover { transform: translateY(-2px); }

.button-primary {
  background: var(--dark);
  color: #fff;
}

.button-ghost {
  border-color: #cdd4cc;
  background: rgba(255,255,255,.45);
}

.hero-prices {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 30px;
  color: #687069;
  font-size: 13px;
  font-weight: 720;
}

.hero-prices i {
  width: 4px;
  height: 4px;
  background: #a5ada6;
  border-radius: 50%;
}

.hero-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.browser-card {
  width: min(100%, 560px);
  overflow: hidden;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid #d6ddd5;
  box-shadow: 0 40px 100px rgba(37, 47, 38, .14);
  transform: rotate(1.5deg);
}

.browser-top {
  height: 46px;
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #e5e9e4;
  background: #fbfcfa;
}

.browser-dots {
  display: flex;
  gap: 5px;
}

.browser-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8cec7;
}

.browser-url {
  justify-self: center;
  font-size: 10px;
  color: #8b938c;
}

.browser-body {
  padding: 24px;
  background:
    radial-gradient(circle at 88% 5%, rgba(201,255,53,.7), transparent 23%),
    #f4f6f1;
}

.mock-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 76px;
}

.mock-nav strong {
  font-size: 15px;
  letter-spacing: -.05em;
}

.mock-nav strong span { color: #83a817; }

.mock-nav small {
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #8b938b;
  font-size: 7px;
}

.mock-tag {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #cfd7cf;
  border-radius: 999px;
  font-size: 7px;
  letter-spacing: .1em;
}

.mock-title {
  margin: 17px 0 22px;
  font-size: clamp(35px, 4vw, 51px);
  font-weight: 830;
  line-height: .94;
  letter-spacing: -.07em;
}

.mock-title em {
  font-style: normal;
  position: relative;
}

.mock-title em::after {
  content: "";
  position: absolute;
  left: 0;
  right: -2px;
  bottom: 3px;
  height: 8px;
  z-index: -1;
  background: var(--accent);
}

.mock-line {
  width: 44%;
  height: 5px;
  border-radius: 4px;
  background: #242a25;
  opacity: .16;
}

.mock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 74px;
}

.mock-cards div {
  min-height: 84px;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid #dce1db;
  background: rgba(255,255,255,.72);
}

.mock-cards b {
  display: block;
  margin-bottom: 20px;
  color: #9aa19b;
  font-size: 8px;
}

.mock-cards span {
  font-size: 10px;
  font-weight: 760;
}

.floating-note {
  position: absolute;
  z-index: 2;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 14px 35px rgba(17,21,18,.2);
  font-size: 11px;
  font-weight: 720;
}

.note-a { top: 8%; right: -2%; transform: rotate(6deg); }
.note-b { bottom: 12%; left: -3%; transform: rotate(-5deg); background: var(--accent); color: var(--accent-ink); }

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.48);
}

.trust-row {
  min-height: 76px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 20px;
  text-align: center;
  color: #616961;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section { padding: 118px 0; }

.section-head {
  display: grid;
  grid-template-columns: 1.1fr .7fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 58px;
}

.section-head h2,
.reference-copy h2,
.cta-card h2 {
  margin-bottom: 0;
  font-size: clamp(40px, 4.8vw, 66px);
  line-height: .98;
  letter-spacing: -.065em;
}

.section-head p {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 17px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.feature-card {
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.26);
  transition: background-color .22s ease, box-shadow .22s ease;
}

.feature-card:hover,
.feature-card.is-active {
  background: rgba(255,255,255,.78);
}

.feature-card.is-active {
  box-shadow: inset 0 -3px var(--accent);
}

.feature-trigger {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 30px 26px 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.feature-trigger:focus-visible {
  outline: 2px solid #7fa214;
  outline-offset: -3px;
}

.feature-index {
  display: block;
  margin-bottom: 76px;
  color: #8f978f;
  font-size: 12px;
  font-weight: 750;
  transition: color .22s ease;
}

.feature-card.is-active .feature-index {
  color: #7fa214;
}

.feature-title {
  display: block;
  margin-bottom: 12px;
  font-size: 25px;
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.04em;
}

.feature-intro {
  display: block;
  min-height: 86px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.feature-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 22px;
  color: #505951;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-more i {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid #bcc4bc;
  border-radius: 50%;
  transition: background-color .22s ease, border-color .22s ease;
}

.feature-more i::before,
.feature-more i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .22s ease;
}

.feature-more i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.feature-card.is-active .feature-more i {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.feature-card.is-active .feature-more i::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.feature-shared {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  opacity: 0;
  background: #fbfcfa;
  border-right: 1px solid var(--line);
  transition:
    grid-template-rows .38s cubic-bezier(.2,.75,.25,1),
    opacity .22s ease;
}

.feature-shared.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-bottom: 1px solid var(--line);
}

.feature-shared-clip {
  min-height: 0;
  overflow: hidden;
}

.feature-pane {
  display: none;
  grid-template-columns: minmax(140px,.55fr) minmax(300px,1.35fr) minmax(240px,1fr);
  gap: 54px;
  align-items: start;
  min-height: 250px;
  padding: 38px 42px 42px;
}

.feature-pane.is-active {
  display: grid;
  animation: featurePaneIn .28s ease both;
}

@keyframes featurePaneIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-pane-label {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.feature-pane-label span {
  color: #8dad27;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .12em;
}

.feature-pane-label strong {
  font-size: 14px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-pane-story h3 {
  margin: 0 0 14px;
  font-size: clamp(26px,2.5vw,38px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.feature-pane-story p {
  max-width: 620px;
  margin: 0;
  color: #5a635b;
  font-size: 14px;
  line-height: 1.7;
}

.feature-pane-story strong {
  color: var(--ink);
  font-weight: 760;
}

.feature-pane-points {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.feature-pane-points span {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: #4f5850;
}

.feature-pane-points b {
  color: #8dad27;
  font-size: 9px;
  letter-spacing: .08em;
}

.feature-pane-points i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
}

.packages-section {
  background: var(--dark);
  color: #fff;
}

.packages-head .eyebrow { color: #aeb6af; }
.packages-head .eyebrow::before { background: var(--accent); }
.packages-head p { color: #aeb6af; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border: 1px solid #343b35;
  border-radius: var(--radius);
  background: #181d19;
}

.price-card.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
  transform: translateY(-14px);
}

.recommendation {
  position: absolute;
  top: -15px;
  right: 22px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-top {
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid #343b35;
}

.package-label {
  display: block;
  color: #9ea79f;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .14em;
}

.price-card h3 {
  max-width: 260px;
  margin: 9px 0 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.price {
  margin-top: 24px;
  font-size: 48px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: -.06em;
}

.price span {
  font-size: 22px;
  color: #a4aca5;
}

.price-card ul {
  list-style: none;
  padding: 22px 0 12px;
  margin: 0;
}

.price-card li {
  position: relative;
  padding: 9px 0 9px 21px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #d5dbd5;
  font-size: 13px;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 850;
}

.package-for {
  min-height: 60px;
  padding: 12px 0 18px;
  margin-top: auto;
  color: #8f9890;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.button-card {
  width: 100%;
  border-color: #424a43;
  color: #fff;
}

.button-card:hover { background: #242b25; }

.button-card-accent {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.button-card-accent:hover { background: #dcff78; }

.package-actions{
  display:grid;
  gap:9px;
}
.package-meeting{
  min-height:48px;
}
.package-mail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  color:#b7c0b8;
  font-size:10px;
  font-weight:780;
  text-decoration:none;
  transition:color .16s ease;
}
.package-mail:hover{color:#fff}

.pricing-note {
  max-width: 850px;
  margin: 30px 0 0;
  color: #889188;
  font-size: 12px;
}

.reference-section { background: #eef1eb; }

.reference-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 78px;
  align-items: center;
}

.reference-copy p {
  margin: 28px 0;
  color: #5f675f;
  font-size: 17px;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.skill-list span {
  padding: 8px 11px;
  border: 1px solid #cfd6ce;
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  font-size: 11px;
  font-weight: 720;
}

.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px solid #aab2aa;
  padding-bottom: 4px;
  font-weight: 760;
}

.text-link:hover { border-color: var(--ink); }

.reference-window {
  overflow: hidden;
  display: block;
  border-radius: 22px;
  border: 1px solid #cfd5ce;
  text-decoration: none;
  box-shadow: 0 34px 90px rgba(31,42,32,.13);
  transform: rotate(-1deg);
}

.browser-top-dark {
  background: #1a1e1b;
  border-bottom: 1px solid #303631;
}

.browser-top-dark .browser-url { color: #828b83; }

.reference-screen {
  min-height: 430px;
  padding: 44px;
  color: #fff;
  background:
    radial-gradient(circle at 82% 22%, rgba(201,255,53,.22), transparent 27%),
    linear-gradient(145deg, #171b18, #272e28);
}

.reference-brand {
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .12em;
}

.reference-kicker {
  margin-top: 92px;
  color: #9da79f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .18em;
}

.reference-title {
  margin-top: 13px;
  font-size: clamp(48px, 6vw, 76px);
  line-height: .9;
  font-weight: 820;
  letter-spacing: -.07em;
}

.reference-title span { color: var(--accent); }

.reference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}

.reference-tags span {
  padding: 7px 10px;
  border: 1px solid #49514a;
  border-radius: 999px;
  color: #b9c2ba;
  font-size: 9px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.reference-select-label {
  display: block;
  margin: 30px 0 8px;
  color: #7a837b;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reference-select-wrap {
  position: relative;
  max-width: 460px;
}

.reference-select-wrap::after {
  content: "⌄";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-56%);
  pointer-events: none;
  color: #5d665e;
  font-size: 18px;
}

.reference-select {
  width: 100%;
  min-height: 50px;
  appearance: none;
  padding: 12px 44px 12px 15px;
  border: 1px solid #cbd2ca;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  outline: none;
}

.reference-select:focus {
  border-color: #91b71d;
  box-shadow: 0 0 0 3px rgba(145,183,29,.12);
}

.reference-skills {
  margin-top: 18px;
}

.reference-stage {
  position: relative;
  min-width: 0;
}

.reference-pane {
  display: none;
}

.reference-pane.is-active {
  display: block;
  animation: referencePaneIn .3s ease both;
}

@keyframes referencePaneIn {
  from {
    opacity: 0;
    transform: translateY(8px) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
  }
}

.reference-grizzlar-grid {
  position: relative;
  min-height: 430px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: #0f1310;
}

.reference-grizzlar-grid figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #151a16;
}

.reference-grizzlar-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-grizzlar-main {
  grid-row: 1 / 3;
}

.reference-grizzlar-side-top,
.reference-grizzlar-side-bottom {
  min-height: 214px;
}

.reference-grizzlar-overlay {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  display: grid;
  gap: 6px;
  padding: 56px 28px 24px;
  color: #fff;
  background: linear-gradient(to top, rgba(9,12,10,.9), rgba(9,12,10,.58) 48%, transparent);
  pointer-events: none;
}

.reference-grizzlar-overlay span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reference-grizzlar-overlay strong {
  max-width: 620px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.reference-grizzlar-overlay small {
  color: #c8d0c9;
  font-size: 10px;
  font-weight: 740;
}

.reference-photo-screen {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #33291f;
}

.reference-photo-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-photo-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20,16,12,.72), rgba(20,16,12,.1) 72%),
    linear-gradient(to top, rgba(20,16,12,.48), transparent 48%);
}

.reference-photo-industrie::after {
  background:
    linear-gradient(90deg, rgba(4,12,28,.77), rgba(4,12,28,.12) 72%),
    linear-gradient(to top, rgba(4,12,28,.45), transparent 48%);
}

.reference-photo-overlay {
  position: relative;
  z-index: 2;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px;
  color: #fff;
}

.reference-demo-label {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reference-photo-overlay > strong {
  margin-top: 60px;
  font-size: 13px;
  letter-spacing: .12em;
}

.reference-photo-overlay h3 {
  margin: 11px 0 0;
  font-size: clamp(45px,5vw,68px);
  line-height: .9;
  letter-spacing: -.065em;
}

.reference-photo-overlay small {
  margin-top: auto;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .04em;
}

.solutions-section{
  background:#eef1eb;
  border-top:1px solid rgba(17,21,18,.06);
  border-bottom:1px solid rgba(17,21,18,.06);
}
.solutions-head{margin-bottom:30px}
.solutions-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.solution-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:350px;
  padding:24px;
  border:1px solid #d4dbd2;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:0 16px 38px rgba(28,39,30,.045);
}
.solution-index{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#1d261f;
  color:#fff;
  font-size:9px;
  font-weight:900;
}
.solution-card h3{
  margin:22px 0 10px;
  font-size:26px;
  line-height:1.03;
  letter-spacing:-.045em;
}
.solution-card>p{
  margin:0;
  color:#647067;
  font-size:13px;
  line-height:1.65;
}
.solution-points{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:22px 0 24px;
}
.solution-points span{
  padding:6px 8px;
  border:1px solid #dbe1d8;
  border-radius:999px;
  background:#f7f9f5;
  color:#59645b;
  font-size:8px;
  font-weight:800;
}
.solution-card>a{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:0 12px;
  border-radius:10px;
  background:#1d261f;
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-decoration:none;
}
.solution-card>a:hover{background:#0f1510}

@media(max-width:900px){
  .solutions-grid{grid-template-columns:1fr}
  .solution-card{min-height:0}
}

.personal-section {
  background: var(--bg);
}

.personal-card {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) 1.28fr;
  gap: 72px;
  align-items: stretch;
}

.portrait-card {
  min-height: 520px;
  overflow: hidden;
  position: relative;
  margin: 0;
  border-radius: 28px;
  background: #202620;
  box-shadow: 0 28px 70px rgba(30,40,31,.11);
}

.portrait-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,14,11,.76), transparent 38%),
    linear-gradient(135deg, transparent 55%, rgba(201,255,53,.12));
  pointer-events: none;
}

.portrait-card > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center 28%;
}

.portrait-caption {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  gap: 3px;
  color: #fff;
}

.portrait-caption span {
  font-size: 18px;
  font-weight: 820;
  letter-spacing: -.03em;
}

.portrait-caption small {
  color: #cdd4ce;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.personal-copy {
  align-self: center;
  max-width: 700px;
}

.personal-copy h2 {
  margin-bottom: 28px;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: .94;
  letter-spacing: -.07em;
}

.personal-copy > p {
  color: #5c655d;
  font-size: 16px;
}

.personal-copy .personal-lead {
  color: #252b26;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.5;
}

.personal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 34px 0;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.personal-meta div {
  display: grid;
  gap: 5px;
}

.personal-meta span {
  color: #899189;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.personal-meta a,
.personal-meta strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
}

.personal-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}

.cta-section {
  padding: 24px 0 118px;
  background: #eef1eb;
}

.cta-card {
  display: grid;
  grid-template-columns: 1.15fr .65fr;
  gap: 70px;
  align-items: end;
  padding: 56px;
  border-radius: 28px;
  background: var(--accent);
  color: var(--accent-ink);
}

.cta-card .eyebrow { color: #516600; }
.cta-card .eyebrow::before { background: #516600; }

.cta-side p {
  margin-bottom: 22px;
  color: #405000;
}

.button-light {
  background: var(--dark);
  color: #fff;
}

.site-footer {
  padding: 50px 0;
  background: #0d100e;
  color: #d8ddd8;
}

.footer-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 60px;
  align-items: end;
}

.footer-brand { color: #fff; }

.footer-row p {
  margin: 8px 0 0;
  color: #747d75;
  font-size: 12px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-links a {
  color: #aeb6af;
  text-decoration: none;
  font-size: 12px;
}

.footer-links a:hover { color: #fff; }

.copyright {
  color: #747d75;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .hero-layout,
  .reference-layout {
    grid-template-columns: 1fr;
  }

  .hero-copy { max-width: 800px; }
  .hero-visual { min-height: 430px; }
  .browser-card { width: min(90%, 640px); }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
  }

  .price-card.featured { transform: none; }

  .reference-copy { max-width: 750px; }
}

@media (max-width: 800px) {
  .shell { width: min(calc(100% - 30px), var(--shell)); }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 102;
  }

  .primary-nav {
    position: fixed;
    inset: 76px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 24px 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 40px rgba(20,30,22,.08);
  }

  .primary-nav.open { display: flex; }

  .primary-nav > a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
  }

  .site-language-menu{
    margin:12px 0 2px;
    width:max-content;
  }
  .site-language-options{
    position:static;
    margin-top:6px;
    min-width:180px;
    box-shadow:none;
  }

  .primary-nav .nav-cta {
    margin-top: 14px;
    text-align: center;
    border-bottom: 0;
  }

  .hero {
    padding-top: 62px;
  }

  .hero-layout { gap: 20px; }

  h1 {
    font-size: clamp(50px, 15vw, 76px);
  }

  .hero-visual {
    min-height: 380px;
    margin-top: 20px;
  }

  .floating-note { display: none; }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 0;
    gap: 14px;
  }

  .trust-row span:last-child { grid-column: 1 / -1; }

  .section { padding: 84px 0; }

  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 42px;
  }

  .feature-grid { grid-template-columns: 1fr; }

  .feature-trigger { min-height: 230px; }
  .feature-index { margin-bottom: 48px; }
  .feature-intro { min-height: 0; }

  .feature-card.is-active {
    box-shadow: inset 3px 0 var(--accent);
  }

  .feature-shared {
    grid-column: 1;
  }

  .feature-pane {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding: 28px 22px 32px;
  }

  .feature-pane-label {
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: baseline;
    width: max-content;
  }

  .feature-pane-story h3 {
    font-size: clamp(26px, 8vw, 36px);
  }

  .personal-card {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .portrait-card { min-height: 420px; }

  .personal-meta { grid-template-columns: 1fr; }

  .pricing-grid { gap: 18px; }

  .price-card { padding: 23px; }

  .reference-layout { gap: 50px; }

  .reference-screen {
    min-height: 360px;
    padding: 30px;
  }

  .cta-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 34px 25px;
  }

  .footer-row {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
}

@media (max-width: 480px) {
  .hero { padding-bottom: 58px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-prices { gap: 9px; }
  .hero-visual { min-height: 300px; }
  .browser-card { width: 100%; }
  .browser-body { padding: 18px; }
  .mock-nav { margin-bottom: 48px; }
  .mock-cards { margin-top: 52px; }
  .browser-top { grid-template-columns: 52px 1fr 52px; }
  .reference-title { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.reveal-ready {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal-ready.reveal-in {
  opacity: 1;
  transform: translateY(0);
}


/* Interactive Layout × Handwerk Showcase */
.showcase-section{
  position:relative;
  overflow:hidden;
  padding:118px 0 126px;
  background:#eef1eb;
}
.showcase-section::before{
  content:"";
  position:absolute;
  width:760px;height:760px;
  right:-300px;top:-300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,255,53,.12),rgba(201,255,53,0) 68%);
  pointer-events:none;
}
.showcase-head{
  position:relative;
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:90px;
  align-items:end;
  margin-bottom:64px;
}
.showcase-head h2{
  margin:15px 0 0;
  font-size:clamp(46px,5.3vw,76px);
  line-height:.92;
  letter-spacing:-.07em;
}
.showcase-head h2 span{color:#759300}
.showcase-intro p{
  max-width:700px;
  margin:0;
  color:#5b655d;
  font-size:16px;
  line-height:1.72;
}
.showcase-combination{
  display:grid;
  gap:4px;
  margin-top:26px;
  padding:16px 18px;
  border-left:3px solid var(--accent);
  background:rgba(255,255,255,.52);
}
.showcase-combination small,
.showcase-meta-block small{
  color:#7d867f;
  font-size:9px;
  font-weight:820;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.showcase-combination strong{font-size:15px;letter-spacing:-.02em}

.showcase-controls{
  position:relative;
  padding:26px 0 38px;
  border-top:1px solid #ccd3cb;
  border-bottom:1px solid #ccd3cb;
}
.showcase-control-title{
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.showcase-control-title>span{
  margin-top:2px;
  color:#88a514;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.showcase-control-title>div{display:grid;gap:2px}
.showcase-control-title strong{font-size:13px}
.showcase-control-title small{color:#7a837b;font-size:10px}

.layout-carousel-wrap{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:10px;
  align-items:center;
  margin:18px 0 26px;
}
.carousel-arrow{
  width:42px;height:42px;
  border:1px solid #c8cfc7;
  border-radius:50%;
  background:rgba(255,255,255,.64);
  color:#263027;
  font-size:18px;
  transition:.2s ease;
}
.carousel-arrow:hover{background:#fff;transform:scale(1.05)}
.layout-carousel{
  position:relative;
  height:176px;
  perspective:1000px;
  overflow:hidden;
}
.layout-card{
  --carousel-x:0px;
  --carousel-scale:1;
  --carousel-rotate:0deg;
  --carousel-opacity:1;
  position:absolute;
  left:50%;
  top:14px;
  width:178px;
  height:144px;
  margin-left:-89px;
  padding:18px;
  display:grid;
  align-content:space-between;
  text-align:left;
  border:1px solid #cbd2ca;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  color:#1c241d;
  opacity:var(--carousel-opacity);
  transform:
    translateX(var(--carousel-x))
    scale(var(--carousel-scale))
    rotateY(var(--carousel-rotate));
  transform-origin:center;
  box-shadow:0 16px 42px rgba(24,38,26,.08);
  transition:
    transform .45s cubic-bezier(.2,.75,.2,1),
    opacity .35s ease,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}
.layout-card:hover{border-color:#9cab95}
.layout-card.is-active{
  border-color:#9aba21;
  background:#fff;
  box-shadow:0 24px 58px rgba(35,55,36,.17);
}
.layout-letter{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:10px;
  background:#202620;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.layout-card.is-active .layout-letter{
  background:var(--accent);
  color:#213000;
}
.layout-card strong{font-size:16px;letter-spacing:-.03em}
.layout-card small{color:#7d857e;font-size:9px;line-height:1.35}

.trade-picker{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:30px;
  align-items:center;
}
.trade-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.trade-chip{
  padding:9px 13px;
  border:1px solid #cbd2ca;
  border-radius:999px;
  background:rgba(255,255,255,.5);
  color:#283029;
  font-size:10px;
  font-weight:780;
  transition:.18s ease;
}
.trade-chip:hover{background:#fff}
.trade-chip.is-active{
  border-color:#202620;
  background:#202620;
  color:#fff;
}

.showcase-live-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(230px,.36fr) minmax(0,1.64fr);
  gap:30px;
  align-items:stretch;
  margin-top:48px;
}
.showcase-meta{
  padding:24px 8px 24px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.showcase-step{
  color:#88a514;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.showcase-meta h3{
  margin:14px 0 10px;
  font-size:32px;
  line-height:1;
  letter-spacing:-.045em;
}
.showcase-meta>p{
  margin:0;
  color:#667068;
  font-size:13px;
  line-height:1.6;
}
.showcase-meta-block{
  width:100%;
  display:grid;
  gap:5px;
  margin:30px 0 18px;
  padding:17px 0;
  border-top:1px solid #cbd2ca;
  border-bottom:1px solid #cbd2ca;
}
.showcase-meta-block strong{font-size:16px}
.showcase-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.showcase-tags span{
  padding:7px 9px;
  border:1px solid #cbd2ca;
  border-radius:999px;
  background:rgba(255,255,255,.52);
  font-size:9px;
  font-weight:740;
}
.showcase-preview-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin:24px 0 20px;
  color:#758078;
  font-size:9px;
  font-weight:720;
}
.status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#91b71d;
  box-shadow:0 0 0 4px rgba(145,183,29,.13);
}
.showcase-open{margin-top:auto;font-size:12px}

.live-browser{
  overflow:hidden;
  border:1px solid #c9d0c8;
  border-radius:22px;
  background:#fff;
  box-shadow:0 32px 80px rgba(27,40,29,.15);
}
.live-browser-top{
  height:42px;
  display:grid;
  grid-template-columns:70px 1fr 70px;
  align-items:center;
  padding:0 12px;
  border-bottom:1px solid #d9ded8;
  background:#fbfcfa;
}
.live-browser-top .browser-dots{
  display:flex;
  gap:5px;
}
.live-browser-top .browser-dots span{
  width:7px;height:7px;
  border-radius:50%;
  background:#c5cbc4;
}
.live-browser-url{
  text-align:center;
  color:#8a928b;
  font-size:9px;
  font-weight:760;
  letter-spacing:.04em;
}
.preview-pause{
  justify-self:end;
  border:0;
  background:transparent;
  color:#5d665e;
  font-size:9px;
  font-weight:800;
}
.preview-pause:hover{color:#111}
.live-browser-viewport{
  position:relative;
  height:620px;
  overflow:hidden;
  background:#e8ece6;
}
.live-browser-viewport iframe{
  position:absolute;
  inset:0;
  width:133.333%;
  height:133.333%;
  border:0;
  transform:scale(.75);
  transform-origin:0 0;
  background:#fff;
}
.preview-glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

.showcase-foot{
  display:grid;
  grid-template-columns:130px 130px 170px 1fr;
  gap:18px;
  align-items:end;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid #cbd2ca;
}
.showcase-foot>div{display:grid;gap:2px}
.showcase-foot>div span{
  font-size:26px;
  font-weight:850;
  letter-spacing:-.04em;
}
.showcase-foot>div small{
  color:#7b847c;
  font-size:9px;
  line-height:1.35;
}
.showcase-foot p{
  justify-self:end;
  max-width:520px;
  margin:0;
  color:#727b73;
  font-size:10px;
  line-height:1.55;
  text-align:right;
}

@media(max-width:1050px){
  .showcase-head{grid-template-columns:1fr;gap:28px}
  .showcase-live-grid{grid-template-columns:1fr}
  .showcase-meta{padding-right:0}
  .showcase-open{margin-top:22px}
  .trade-picker{grid-template-columns:1fr}
  .showcase-foot{grid-template-columns:repeat(3,1fr)}
  .showcase-foot p{grid-column:1/-1;justify-self:start;text-align:left}
}
@media(max-width:800px){
  .showcase-section{padding:84px 0}
  .layout-carousel-wrap{
    grid-template-columns:1fr;
    margin-top:18px;
  }
  .carousel-arrow{display:none}
  .layout-carousel{
    display:flex;
    gap:10px;
    height:auto;
    overflow-x:auto;
    padding:4px 2px 12px;
    perspective:none;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .layout-carousel::-webkit-scrollbar{display:none}
  .layout-card{
    position:static;
    flex:0 0 158px;
    width:158px;
    height:132px;
    margin:0;
    transform:none!important;
    opacity:1!important;
    scroll-snap-align:center;
  }
  .trade-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .trade-chips::-webkit-scrollbar{display:none}
  .trade-chip{white-space:nowrap}
  .live-browser-viewport{height:520px}
  .showcase-foot{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .showcase-head h2{font-size:46px}
  .showcase-control-title{align-items:flex-start}
  .live-browser{border-radius:16px}
  .live-browser-top{grid-template-columns:48px 1fr 54px}
  .live-browser-viewport{height:430px}
  .showcase-foot{grid-template-columns:1fr 1fr 1fr}
  .showcase-foot>div span{font-size:22px}
}


/* Mini previews inside the layout carousel */
.layout-card::before{
  content:"";
  position:absolute;
  top:15px;
  right:14px;
  width:68px;
  height:46px;
  border:1px solid rgba(29,38,30,.13);
  border-radius:7px;
  background-color:#eef1eb;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.45);
  opacity:.82;
}
.layout-card[data-layout="a"]::before{
  background:
    linear-gradient(#5c7254 0 0) 6px 7px/28px 5px no-repeat,
    linear-gradient(#b4c2aa 0 0) 6px 17px/24px 17px no-repeat,
    linear-gradient(#d5dbcf 0 0) 35px 7px/26px 27px no-repeat,
    #f3f1eb;
}
.layout-card[data-layout="b"]::before{
  background:
    linear-gradient(#111 0 0) 0 0/68px 46px no-repeat,
    linear-gradient(#f2c94c 0 0) 6px 7px/31px 7px no-repeat,
    linear-gradient(#d9d9d2 0 0) 6px 20px/48px 4px no-repeat,
    linear-gradient(#7e817d 0 0) 6px 30px/36px 4px no-repeat;
}
.layout-card[data-layout="c"]::before{
  background:
    linear-gradient(#dceaf2 0 0) 5px 6px/28px 34px no-repeat,
    linear-gradient(#2f7edc 0 0) 38px 6px/24px 10px no-repeat,
    linear-gradient(#eef5f8 0 0) 38px 21px/24px 19px no-repeat,
    #fff;
}
.layout-card[data-layout="d"]::before{
  background:
    linear-gradient(rgba(240,108,56,.78) 0 0) 7px 8px/24px 3px no-repeat,
    linear-gradient(#444a4d 0 0) 7px 17px/22px 20px no-repeat,
    linear-gradient(#747b7d 0 0) 34px 8px/27px 29px no-repeat,
    #1b1e20;
}
.layout-card[data-layout="e"]::before{
  background:
    linear-gradient(#20a4ff 0 0) 6px 7px/18px 3px no-repeat,
    linear-gradient(#65f2d0 0 0) 29px 7px/31px 3px no-repeat,
    linear-gradient(#13222d 0 0) 6px 16px/54px 22px no-repeat,
    #091017;
}
.layout-card[data-layout="f"]::before{
  background:
    linear-gradient(#b16f36 0 0) 6px 7px/22px 6px no-repeat,
    linear-gradient(#d9c7ad 0 0) 6px 18px/27px 19px no-repeat,
    linear-gradient(#efe4d5 0 0) 37px 7px/24px 30px no-repeat,
    #f4f0e9;
}
.layout-card[data-layout="g"]::before{
  background:
    linear-gradient(#1c5eff 0 0) 6px 7px/28px 4px no-repeat,
    linear-gradient(#dfe8ff 0 0) 6px 17px/23px 20px no-repeat,
    linear-gradient(#172237 0 0) 34px 7px/27px 30px no-repeat,
    #f2f5f8;
}
.layout-card .layout-letter,
.layout-card strong,
.layout-card small{position:relative;z-index:2}


/* Showcase v2: two scrollable selector columns + sticky morphing preview */
.showcase-v2{
  padding:118px 0 126px;
}
.showcase-head-v2{
  display:grid;
  grid-template-columns:.9fr 1fr;
  gap:84px;
  align-items:end;
  margin-bottom:48px;
}
.showcase-head-v2 h2{
  margin:14px 0 0;
  font-size:clamp(46px,5.2vw,76px);
  line-height:.92;
  letter-spacing:-.07em;
}
.showcase-head-v2 h2 span{color:#759300}
.showcase-head-v2>div:last-child>p{
  margin:0;
  color:#5d665f;
  font-size:16px;
  line-height:1.7;
}
.showcase-workspace{
  display:grid;
  grid-template-columns:minmax(420px,.82fr) minmax(0,1.6fr);
  gap:26px;
  align-items:start;
}
.showcase-selector-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:14px;
  border:1px solid #cbd2ca;
  border-radius:24px;
  background:rgba(255,255,255,.52);
  box-shadow:0 18px 50px rgba(31,42,32,.06);
}
.selector-column{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr;
  max-height:650px;
  border:1px solid #d3d9d2;
  border-radius:18px;
  background:rgba(247,249,246,.92);
  overflow:hidden;
}
.selector-column-head{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:16px 16px 13px;
  border-bottom:1px solid #d8ded7;
  background:rgba(255,255,255,.78);
}
.selector-column-head>span{
  color:#88a514;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  margin-top:2px;
}
.selector-column-head>div{display:grid;gap:2px}
.selector-column-head strong{font-size:12px}
.selector-column-head small{color:#7a837c;font-size:9px;line-height:1.35}
.selector-scroll{
  min-height:0;
  height:560px;
  overflow-y:auto;
  padding:9px;
  scroll-behavior:auto;
  scroll-snap-type:none;
  scrollbar-width:thin;
  scrollbar-color:#aeb7ad transparent;
}
.selector-scroll::-webkit-scrollbar{width:6px}
.selector-scroll::-webkit-scrollbar-track{background:transparent}
.selector-scroll::-webkit-scrollbar-thumb{background:#b3bbb2;border-radius:999px}
.selector-card{
  position:relative;
  width:100%;
  min-height:88px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 48px;
  gap:10px;
  align-items:center;
  padding:12px;
  margin-bottom:8px;
  border:1px solid transparent;
  border-radius:14px;
  background:#fff;
  color:#242c25;
  text-align:left;
  scroll-snap-align:none;
  transition:
    border-color .14s ease,
    background .14s ease;
}
.selector-card:last-child{margin-bottom:0}
.selector-card:hover{
  transform:none;
  border-color:#bfc8bd;
  box-shadow:none;
}
.selector-card.is-active{
  border-color:#8ead18;
  background:#faffed;
  box-shadow:inset 3px 0 #9cc51b,0 10px 24px rgba(77,98,20,.08);
}
.selector-card>div{display:grid;gap:3px;min-width:0}
.selector-card strong{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.18;
}
.selector-card small{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  color:#7a837c;
  font-size:8px;
  line-height:1.35;
}
.selector-code,.trade-mark{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:9px;
  background:#222922;
  color:#fff;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.trade-mark{
  background:#e8ece5;
  color:#4e5950;
}
.selector-card.is-active .selector-code,
.selector-card.is-active .trade-mark{
  background:var(--accent);
  color:#223000;
}
.selector-mini{
  display:block;
  width:46px;height:32px;
  justify-self:end;
  border:1px solid #d8ddd6;
  border-radius:6px;
  background:#edf0eb;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.mini-a{background:linear-gradient(#7f9675 0 0) 4px 5px/19px 4px no-repeat,linear-gradient(#d5ded0 0 0) 4px 13px/17px 13px no-repeat,linear-gradient(#eef0e9 0 0) 25px 5px/16px 21px no-repeat,#fff}
.mini-b{background:linear-gradient(#111 0 0) 0 0/46px 32px no-repeat,linear-gradient(#f2c94c 0 0) 4px 5px/21px 5px no-repeat,linear-gradient(#aaa 0 0) 4px 15px/34px 3px no-repeat,linear-gradient(#6e716f 0 0) 4px 22px/25px 3px no-repeat}
.mini-c{background:linear-gradient(#d9e9f0 0 0) 4px 4px/19px 24px no-repeat,linear-gradient(#2f7edc 0 0) 27px 4px/15px 7px no-repeat,linear-gradient(#edf5f8 0 0) 27px 15px/15px 13px no-repeat,#fff}
.mini-d{background:linear-gradient(#f06c38 0 0) 4px 5px/16px 3px no-repeat,linear-gradient(#454a4c 0 0) 4px 13px/15px 14px no-repeat,linear-gradient(#737a7d 0 0) 23px 5px/19px 22px no-repeat,#1b1e20}
.mini-e{background:linear-gradient(#20a4ff 0 0) 4px 5px/13px 2px no-repeat,linear-gradient(#65f2d0 0 0) 20px 5px/20px 2px no-repeat,linear-gradient(#13222d 0 0) 4px 12px/36px 15px no-repeat,#091017}
.mini-f{background:linear-gradient(#b16f36 0 0) 4px 5px/15px 4px no-repeat,linear-gradient(#d9c7ad 0 0) 4px 13px/18px 14px no-repeat,linear-gradient(#efe4d5 0 0) 26px 5px/15px 22px no-repeat,#f4f0e9}
.mini-g{background:linear-gradient(#1c5eff 0 0) 4px 5px/18px 3px no-repeat,linear-gradient(#dfe8ff 0 0) 4px 13px/16px 14px no-repeat,linear-gradient(#172237 0 0) 24px 5px/17px 22px no-repeat,#f2f5f8}
.layout-selector-card{
  grid-template-columns:34px minmax(0,1fr) 48px;
  grid-template-areas:
    "code title title"
    "code desc mini";
  column-gap:10px;
  row-gap:4px;
  align-items:center;
}
.layout-selector-card>div{display:contents}
.layout-selector-card .selector-code{grid-area:code;align-self:center}
.layout-selector-card strong{grid-area:title;align-self:end}
.layout-selector-card small{grid-area:desc;align-self:start}
.layout-selector-card .selector-mini{grid-area:mini;align-self:start}
.trade-selector-card{grid-template-columns:34px minmax(0,1fr)}
.trade-selector-card::after{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  justify-self:end;
  background:#d4dad3;
}
.trade-selector-card.is-active::after{background:#94b61d;box-shadow:0 0 0 4px rgba(148,182,29,.13)}

/* Immobilien-Exposé: one new sector, two selectable property types.
   Both are real configurable demos, not decorative mockup cards. */
.sector-group-label{
  display:grid;
  gap:3px;
  padding:8px 9px 10px;
  margin:6px 0 8px;
  border-bottom:1px solid #dae3d9;
}
.sector-group-label .sector-group-number{
  color:#7a9821;
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:950;
}
.sector-group-label strong{
  color:#26372b;
  font-size:12px;
  font-weight:850;
  letter-spacing:-.02em;
}
.sector-group-label small{
  color:#77867b;
  font-size:9px;
}
.sector-group-label-trades{margin-top:16px;padding-top:14px;border-top:1px solid #e0e6dd}
.real-estate-trade-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 13px;
  min-height:75px;
  padding:10px;
  background:#f0f5eb;
  border-color:#dfe9d6;
}
.real-estate-trade-card::after{display:none}
.real-estate-trade-card .trade-mark-property{
  background:#dce7d5;
  color:#435d34;
  font-size:9px;
}
.real-estate-trade-card .real-estate-card-arrow{
  font-size:16px;
  color:#768a6d;
  font-weight:850;
  transition:transform .2s ease;
}
.real-estate-trade-card:hover .real-estate-card-arrow{transform:translate(1px,-1px)}
.real-estate-trade-card.is-active{background:#f1fae0;border-color:#8cac32}
.real-estate-trade-card.is-active .real-estate-card-arrow{color:#4b7018}
.mobile-real-estate-choice{border-color:#bad7b1;background:#edf4e9}
.mobile-real-estate-choice b{background:#dce9d7;color:#43683b}
.showcase-v2 .sector-group-label{scroll-snap-align:none}

.language-selector{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #d3d9d2;
  border-radius:16px;
  background:rgba(247,249,246,.92);
}
.language-selector .selector-column-head{
  padding:0;
  border:0;
  background:transparent;
}
.language-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.language-chip{
  min-width:43px;
  padding:8px 10px;
  border:1px solid #cbd2ca;
  border-radius:999px;
  background:#fff;
  color:#2d352e;
  font-size:9px;
  font-weight:850;
  transition:.18s ease;
}
.language-chip:hover{border-color:#9fab9d}
.language-chip.is-active{
  background:#222922;
  border-color:#222922;
  color:#fff;
}

.showcase-preview-column{
  position:sticky;
  top:96px;
  min-width:0;
}
.preview-meta-v2{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end;
  margin-bottom:12px;
}
.preview-meta-v2>div:first-child{display:grid;gap:4px}
.preview-meta-v2 h3{
  margin:3px 0 0;
  font-size:24px;
  letter-spacing:-.04em;
}
.preview-meta-v2 p{
  margin:0;
  color:#707970;
  font-size:10px;
}
.preview-meta-actions{
  display:flex;
  gap:3px;
  align-items:center;
  padding:3px;
  border:1px solid rgba(38,49,40,.11);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  box-shadow:0 5px 18px rgba(25,36,28,.05);
  backdrop-filter:blur(10px);
}
.preview-meta-actions button,
.preview-meta-actions a{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#465047;
  font-size:9px;
  font-weight:820;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.preview-meta-actions button:hover{
  background:#fff;
  color:#1d261f;
  box-shadow:0 3px 10px rgba(25,36,28,.07);
}
.preview-meta-actions .demo-inquiry-link{
  padding-inline:13px;
  background:#eaf6bd;
  color:#27320f;
}
.preview-meta-actions .demo-inquiry-link:hover{
  background:#dff199;
  color:#20290d;
  transform:translateY(-1px);
}
.preview-meta-actions #showcase-open{
  padding-inline:13px;
  background:#1d261f;
  color:#fff;
}
.preview-meta-actions #showcase-open:hover{
  background:#0e140f;
  color:#fff;
  transform:translateY(-1px);
}

.live-browser-morph{
  position:relative;
  transform:translateZ(0);
  transition:
    box-shadow .35s ease,
    transform .35s ease;
}
.live-browser-morph.is-morphing{
  transform:scale(.992);
  box-shadow:0 24px 70px rgba(27,40,29,.12);
}
.live-browser-morph .live-browser-viewport{
  height:650px;
  background:#dfe4dd;
}
.demo-live-frame{
  position:absolute;
  inset:0;
  width:133.333%;
  height:133.333%;
  border:0;
  background:#fff;
  opacity:0;
  filter:blur(6px) saturate(.88);
  transform:scale(.765) translateY(8px);
  transform-origin:0 0;
  pointer-events:none;
  transition:
    opacity .22s ease,
    filter .22s ease,
    transform .22s cubic-bezier(.2,.75,.2,1);
}
.demo-live-frame.is-active{
  opacity:1;
  filter:none;
  transform:scale(.75) translateY(0);
  pointer-events:auto;
  z-index:2;
}
.demo-live-frame.is-entering{
  opacity:1;
  filter:blur(0) saturate(1);
  transform:scale(.75) translateY(0);
  z-index:3;
}
.demo-live-frame.is-leaving{
  opacity:0;
  filter:blur(5px) saturate(.8);
  transform:scale(.74) translateY(-5px);
  z-index:2;
}
.preview-morph-wash{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(110deg,transparent 20%,rgba(201,255,53,.11) 50%,transparent 80%);
  transform:translateX(-80%);
}
.live-browser-morph.is-morphing .preview-morph-wash{
  animation:previewMorphWash .32s ease both;
}
@keyframes previewMorphWash{
  0%{opacity:0;transform:translateX(-80%)}
  35%{opacity:1}
  100%{opacity:0;transform:translateX(80%)}
}
.morph-status{
  justify-self:end;
  display:flex;
  gap:6px;
  align-items:center;
  color:#788178;
  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.morph-status i{
  width:6px;height:6px;
  border-radius:50%;
  background:#92b41c;
  box-shadow:0 0 0 3px rgba(146,180,28,.12);
}
.preview-bottom-v2{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin-top:12px;
}
.preview-bottom-v2 .showcase-tags{margin:0}
.preview-bottom-v2 .showcase-preview-status{margin:0;white-space:nowrap}

.showcase-v2 .showcase-foot{
  grid-template-columns:100px 100px 100px 160px 1fr;
  margin-top:32px;
}

@media(max-width:1100px){
  .showcase-workspace{grid-template-columns:1fr}
  .showcase-preview-column{position:static}
  .selector-scroll{height:430px}
  .live-browser-morph .live-browser-viewport{height:580px}
  .showcase-v2 .showcase-foot{grid-template-columns:repeat(4,1fr)}
  .showcase-v2 .showcase-foot p{grid-column:1/-1;justify-self:start;text-align:left}
}
@media(max-width:800px){
  .showcase-head-v2{grid-template-columns:1fr;gap:24px}
  .showcase-selector-board{grid-template-columns:1fr 1fr;padding:10px}
  .selector-scroll{height:360px}
  .language-selector{grid-template-columns:1fr}
  .preview-meta-v2{align-items:flex-start}
  .preview-bottom-v2{display:grid}
  .preview-bottom-v2 .showcase-preview-status{white-space:normal}
}
@media(max-width:620px){
  .showcase-selector-board{grid-template-columns:1fr}
  .selector-column{max-height:none}
  .selector-scroll{height:310px}
  .language-selector{grid-column:1}
  .live-browser-morph .live-browser-viewport{height:440px}
  .preview-meta-v2{display:grid}
  .preview-meta-actions{justify-content:flex-start}
  .showcase-v2 .showcase-foot{grid-template-columns:1fr 1fr}
  .showcase-v2 .showcase-foot p{grid-column:1/-1}
}


/* Mobile demo: compact scroll rows + preview-first mode */
.mobile-compact-demo-controls{
  display:none;
}

.site-header{
  transition:
    transform .36s cubic-bezier(.2,.75,.2,1),
    opacity .24s ease,
    box-shadow .24s ease;
  will-change:transform;
}
.site-header.is-demo-hidden{
  transform:translateY(-105%);
  opacity:0;
  pointer-events:none;
}

@media(max-width:800px){
  .showcase-v2{
    padding:58px 0 78px;
    max-width:100%;
    overflow-x:clip;
  }
  .showcase-v2 .shell,
  .showcase-workspace,
  .showcase-preview-column,
  .mobile-compact-demo-controls,
  .mobile-choice-row,
  .mobile-language-row,
  .mobile-palette-row{
    min-width:0;
    max-width:100%;
  }

  .showcase-head-v2{
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:18px;
  }
  .showcase-head-v2 h2{
    font-size:clamp(34px,10vw,48px);
    line-height:.94;
  }
  .showcase-head-v2>div:last-child>p{
    display:none;
  }
  .showcase-head-v2 .showcase-combination{
    display:none;
  }

  .mobile-compact-demo-controls{
    position:sticky;
    top:0;
    z-index:96;
    display:grid;
    gap:7px;
    width:100%;
    margin-bottom:10px;
    padding:9px 8px 8px;
    border:1px solid rgba(28,39,29,.12);
    border-radius:15px;
    background:color-mix(in srgb,#f4f6f1 92%,transparent);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 28px rgba(25,36,27,.09);
  }

  .mobile-choice-row{
    min-width:0;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:6px;
    align-items:center;
  }

  .mobile-choice-label{
    color:#7c857e;
    font-size:7px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .mobile-choice-scroll{
    min-width:0;
    width:100%;
    max-width:100%;
    display:flex;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-padding-inline:6px;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-choice-scroll::-webkit-scrollbar{display:none}

  .mobile-choice{
    flex:0 0 auto;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 8px 4px 5px;
    border:1px solid #d0d7cf;
    border-radius:9px;
    background:rgba(255,255,255,.67);
    color:#273029;
    font:inherit;
    white-space:nowrap;
    scroll-snap-align:center;
    cursor:pointer;
    transition:
      background .18s ease,
      border-color .18s ease,
      transform .18s ease,
      color .18s ease;
  }
  .mobile-choice b{
    display:grid;
    place-items:center;
    min-width:21px;
    height:21px;
    padding:0 4px;
    border-radius:6px;
    background:#e8ece6;
    font-size:7px;
    font-weight:900;
  }
  .mobile-choice span{
    font-size:9px;
    font-weight:790;
  }
  .mobile-choice.is-active{
    border-color:#1d261f;
    background:#1d261f;
    color:#fff;
    box-shadow:0 4px 12px rgba(22,31,24,.12);
  }
  .mobile-choice.is-active b{
    background:var(--accent);
    color:#253000;
  }

  .mobile-language-row{
    min-width:0;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:6px;
    align-items:center;
  }
  .mobile-language-row>span{
    color:#7c857e;
    font-size:7px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .mobile-language-row>div{
    display:flex;
    gap:4px;
    min-width:0;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-padding-inline:4px;
    scrollbar-width:none;
  }
  .mobile-language-row>div::-webkit-scrollbar{display:none}

  .mobile-lang{
    flex:0 0 auto;
    min-width:31px;
    height:24px;
    padding:0 7px;
    border:1px solid #d0d7cf;
    border-radius:999px;
    background:rgba(255,255,255,.6);
    color:#6f7871;
    font:inherit;
    font-size:7px;
    font-weight:900;
    cursor:pointer;
  }
  .mobile-lang.is-active{
    border-color:#8dac24;
    background:var(--accent);
    color:#253000;
  }

  /* The two large desktop selector columns disappear completely on mobile. */
  .showcase-selector-board{
    display:none!important;
  }

  .showcase-workspace{
    display:block;
    width:min(calc(100% - 18px),var(--shell));
  }

  .showcase-preview-column{
    position:static!important;
    width:100%;
  }

  .preview-head-v2,
  .preview-bottom-v2{
    padding-left:10px;
    padding-right:10px;
  }

  .live-browser{
    border-radius:15px;
    box-shadow:0 16px 42px rgba(27,40,29,.12);
  }

  .live-browser-top{
    height:34px;
    grid-template-columns:48px 1fr 48px;
    padding:0 8px;
  }

  .live-browser-viewport{
    height:min(64vh,620px);
    min-height:440px;
  }

  /* Keep the actual demo large enough to read and interact with. */
  .live-browser-viewport iframe{
    width:125%;
    height:125%;
    transform:scale(.8);
  }

  .showcase-foot{
    margin-top:16px;
    padding-top:14px;
  }
}

@media(max-width:520px){
  .showcase-v2{padding-top:44px}

  .showcase-head-v2{
    margin-bottom:12px;
  }
  .showcase-head-v2 .eyebrow{
    margin-bottom:7px;
    font-size:9px;
  }
  .showcase-head-v2 h2{
    font-size:34px;
  }

  .mobile-compact-demo-controls{
    width:calc(100% - 10px);
    padding:7px 6px;
    gap:5px;
    border-radius:13px;
  }

  .mobile-choice-row,
  .mobile-language-row{
    grid-template-columns:52px minmax(0,1fr);
    gap:4px;
  }

  .mobile-choice{
    min-height:28px;
    padding-right:7px;
  }
  .mobile-choice b{
    min-width:20px;
    height:20px;
  }
  .mobile-choice span{font-size:8px}

  .live-browser-viewport{
    height:68vh;
    min-height:470px;
  }

  .preview-bottom-v2{
    gap:8px;
  }
}


/* Mobile demo alignment fix: controls sit directly on preview, no cropped left edge */
@media(max-width:800px){
  .showcase-workspace{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding:0!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
  }

  .showcase-preview-column{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:clip!important;
    overflow-y:visible!important;
  }

  /* Remove the extra metadata block between selectors and the actual preview. */
  .showcase-preview-column>.preview-meta-v2{
    display:none!important;
  }

  .showcase-preview-column>.mobile-compact-demo-controls{
    width:100%!important;
    max-width:none!important;
    margin:0 0 7px!important;
    padding:7px 7px 6px!important;
    border-radius:14px 14px 10px 10px;
    overflow:hidden!important;
    contain:inline-size;
  }

  .showcase-preview-column>.live-browser{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:10px 10px 15px 15px;
    overflow:hidden!important;
  }

  /* Real mobile rendering: do not emulate a wider scaled desktop viewport. */
  .live-browser-viewport iframe{
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    transform-origin:0 0!important;
  }

  .live-browser-viewport{
    width:100%!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .preview-bottom-v2{
    width:100%;
    margin:8px 0 0;
    padding:0 4px;
  }
}

@media(max-width:520px){
  .showcase-workspace{
    width:calc(100% - 12px)!important;
  }

  .showcase-preview-column>.mobile-compact-demo-controls{
    margin-bottom:5px!important;
  }

  .live-browser{
    border-radius:10px!important;
  }
}


/* Mobile preview footer: keep tags on one horizontal swipe row */
@media(max-width:800px){
  .preview-bottom-v2 .showcase-tags{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    min-width:0;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:1px 1px 3px;
  }
  .preview-bottom-v2 .showcase-tags::-webkit-scrollbar{display:none}
  .preview-bottom-v2 .showcase-tags span{
    flex:0 0 auto;
    white-space:nowrap;
  }
}


/* Live colour scheme helper */
.palette-launch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:0 11px;
  border:1px solid #cbd2ca;
  border-radius:999px;
  background:rgba(255,255,255,.66);
  color:#39423a;
  font:inherit;
  font-size:9px;
  font-weight:820;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.palette-launch:hover{
  transform:translateY(-1px);
  border-color:#adb7ad;
  background:#fff;
  box-shadow:0 6px 16px rgba(25,36,28,.08);
}
.preview-meta-actions .palette-launch-preview{
  min-height:30px;
  padding:0 11px 0 9px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.preview-meta-actions .palette-launch-preview:hover{
  border-color:transparent;
  background:#fff;
  box-shadow:0 3px 10px rgba(25,36,28,.07);
}
.palette-launch-swatches{
  display:flex;
  align-items:center;
}
.palette-launch-swatches i{
  display:block;
  width:13px;
  height:13px;
  margin-left:-4px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.16);
}
.palette-launch-swatches i:first-child{margin-left:0}
.mobile-palette-row{display:none}.mobile-demo-inquiry{display:none}

.palette-helper[hidden]{display:none!important}
.palette-helper{
  position:fixed;
  inset:0;
  z-index:1500;
  display:grid;
  place-items:center;
  padding:22px;
  opacity:0;
  transition:opacity .18s ease;
}
.palette-helper.is-open{opacity:1}
.palette-helper-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(12,17,13,.58);
  backdrop-filter:blur(12px);
  cursor:default;
}
.palette-helper-panel{
  position:relative;
  width:min(720px,calc(100vw - 32px));
  max-height:min(88vh,820px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:#f5f7f2;
  color:#1b241d;
  box-shadow:0 36px 100px rgba(5,10,6,.34);
  transform:translateY(12px) scale(.985);
  transition:transform .2s cubic-bezier(.2,.75,.2,1);
}
.palette-helper.is-open .palette-helper-panel{transform:translateY(0) scale(1)}
.palette-helper-head{
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:25px 26px 20px;
  border-bottom:1px solid #dce2db;
}
.palette-helper-head>div>span,
.palette-helper-label{
  color:#7f897f;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.palette-helper-head h3{
  margin:6px 0 7px;
  font-size:27px;
  line-height:1;
  letter-spacing:-.04em;
}
.palette-helper-head p{
  margin:0;
  max-width:520px;
  color:#68716a;
  font-size:11px;
  line-height:1.55;
}
.palette-helper-close{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #ccd4cc;
  border-radius:50%;
  background:#fff;
  color:#273029;
  font-size:21px;
  line-height:1;
  cursor:pointer;
}
.palette-helper-grid{
  display:grid;
  grid-template-columns:.9fr 1.35fr;
  gap:13px;
  padding:18px 26px 22px;
}
.palette-helper-block{
  min-width:0;
  padding:15px;
  border:1px solid #dce2db;
  border-radius:16px;
  background:rgba(255,255,255,.72);
}
.palette-base-control{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:8px;
  margin-top:11px;
}
.palette-base-control input[type="color"]{
  width:52px;
  height:42px;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(19,28,21,.12),0 4px 12px rgba(19,28,21,.08);
}
.palette-base-control input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.palette-base-control input[type="color"]::-webkit-color-swatch{border:0;border-radius:12px}
.palette-base-control input[type="color"]::-moz-color-swatch{border:0;border-radius:12px}
.palette-base-control input[type="text"]{
  min-width:0;
  height:42px;
  padding:0 12px;
  border:1px solid #ccd4cc;
  border-radius:10px;
  background:#fff;
  color:#1b241d;
  font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  outline:none;
}
.palette-base-control input[type="text"]:focus{
  border-color:#849b39;
  box-shadow:0 0 0 3px rgba(132,155,57,.12);
}
.palette-helper-harmony{grid-row:span 2}
.palette-harmony-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-top:11px;
}
.palette-harmony-grid button{
  position:relative;
  min-height:48px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:7px 9px;
  border:1px solid #d7ddd6;
  border-radius:12px;
  background:#fff;
  color:#4b554d;
  font:inherit;
  font-size:9px;
  font-weight:820;
  cursor:pointer;
  text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease;
}
.palette-harmony-grid button::before{
  content:'';
  width:42px;
  height:30px;
  display:block;
  border-radius:8px;
  background:linear-gradient(135deg,var(--harmony-a,#789557) 0 34%,var(--harmony-b,#789557) 34% 67%,var(--harmony-c,#789557) 67% 100%);
  box-shadow:inset 0 0 0 1px rgba(17,25,19,.08);
}
.palette-harmony-grid button:hover{
  transform:translateY(-1px);
  border-color:#aeb8ae;
  box-shadow:0 6px 16px rgba(20,29,22,.07);
}
.palette-harmony-grid button.is-active{
  border-color:#1d261f;
  background:#f7f9f4;
  color:#1d261f;
  box-shadow:0 0 0 1px #1d261f inset,0 7px 18px rgba(20,29,22,.08);
}
.palette-harmony-grid button.is-active::after{
  content:'✓';
  position:absolute;
  right:8px;
  top:7px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1d261f;
  color:#fff;
  font-size:8px;
}
.palette-temperature-head,
.palette-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.palette-temperature-head strong,
.palette-result-head>span:last-child{
  color:#39423b;
  font-size:9px;
  font-weight:850;
}
.palette-temperature-block input[type="range"]{
  width:100%;
  height:20px;
  margin:13px 0 4px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
.palette-temperature-block input[type="range"]::-webkit-slider-runnable-track{
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,#91b9e7 0%,#e8ebe5 50%,#e7ad72 100%);
  box-shadow:inset 0 0 0 1px rgba(20,29,22,.08);
}
.palette-temperature-block input[type="range"]::-webkit-slider-thumb{
  width:18px;
  height:18px;
  margin-top:-5.5px;
  -webkit-appearance:none;
  border:3px solid #fff;
  border-radius:50%;
  background:#1d261f;
  box-shadow:0 2px 8px rgba(15,22,17,.24);
}
.palette-temperature-block input[type="range"]::-moz-range-track{
  height:7px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,#91b9e7 0%,#e8ebe5 50%,#e7ad72 100%);
}
.palette-temperature-block input[type="range"]::-moz-range-thumb{
  width:13px;
  height:13px;
  border:3px solid #fff;
  border-radius:50%;
  background:#1d261f;
  box-shadow:0 2px 8px rgba(15,22,17,.24);
}
.palette-temperature-scale{
  display:flex;
  justify-content:space-between;
  color:#8b938d;
  font-size:7px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.palette-result-block{grid-column:1/-1}
.palette-result-swatches{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-top:12px;
}
.palette-result-swatches button{
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#6b746d;
  cursor:pointer;
  text-align:left;
}
.palette-result-swatches i{
  display:block;
  height:56px;
  border-radius:11px;
  background:var(--palette-swatch);
  box-shadow:inset 0 0 0 1px rgba(15,20,16,.08);
  transition:transform .16s ease;
}
.palette-result-swatches button:hover i{transform:translateY(-2px)}
.palette-result-swatches span{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:#7d867f;
  font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.palette-helper-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 26px 22px;
  border-top:1px solid #dce2db;
}
.palette-helper-foot p{
  margin:0;
  color:#737c75;
  font-size:9px;
  line-height:1.45;
}
.palette-helper-foot>div{display:flex;gap:7px}
.palette-reset,
.palette-apply{
  min-height:38px;
  padding:0 14px;
  border-radius:10px;
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}
.palette-reset{border:1px solid #ccd4cc;background:#fff;color:#344037}
.palette-apply{border:1px solid #1d261f;background:#1d261f;color:#fff}
body.palette-helper-is-open{overflow:hidden}

@media(max-width:800px){
  .demo-switchbar{display:none}
  .mobile-palette-row{
    min-width:0;
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:6px;
    align-items:center;
  }
  .mobile-palette-row>span{
    color:#7c857e;
    font-size:7px;
    line-height:1;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .mobile-palette-button{
    min-width:0;
    min-height:29px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:4px 8px;
    border:1px solid #d0d7cf;
    border-radius:9px;
    background:rgba(255,255,255,.72);
    color:#263028;
    font:inherit;
    cursor:pointer;
  }
  .mobile-palette-button b{font-size:8px}
  .mobile-palette-button small{
    min-width:0;
    margin-left:auto;
    overflow:hidden;
    color:#788179;
    font-size:7px;
    font-weight:750;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-palette-button .palette-launch-swatches i{
    width:11px;
    height:11px;
    border-color:#fff;
  }
}

@media(max-width:700px){
  .palette-helper{
    place-items:end center;
    padding:0;
  }
  .palette-helper-panel{
    width:100%;
    max-height:92vh;
    border-radius:24px 24px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }
  .palette-helper-head{padding:20px 18px 16px}
  .palette-helper-head h3{font-size:23px}
  .palette-helper-head p{font-size:10px}
  .palette-helper-grid{
    grid-template-columns:1fr;
    padding:14px 18px 17px;
  }
  .palette-helper-harmony{grid-row:auto}
  .palette-result-block{grid-column:auto}
  .palette-result-swatches{gap:5px}
  .palette-result-swatches i{height:46px;border-radius:9px}
  .palette-helper-foot{
    align-items:stretch;
    padding:14px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .palette-helper-foot p{display:none}
  .palette-helper-foot>div{width:100%;display:grid;grid-template-columns:1fr 1fr}
}


/* Demo studio / fullscreen workspace */
.demo-studio-close,
.mobile-studio-button{display:none}

.showcase-v2 .showcase-workspace{
  width:min(calc(100% - 32px),1560px);
  max-width:none;
  grid-template-columns:minmax(360px,.62fr) minmax(0,1.85fr);
  gap:22px;
}
.live-browser-morph .live-browser-viewport{
  height:clamp(650px,74vh,840px);
}

html.demo-studio-open,
body.demo-studio-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

.showcase-v2.is-studio-open{
  position:fixed;
  inset:0;
  z-index:2000;
  width:100vw;
  height:100dvh;
  margin:0!important;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  background:
    radial-gradient(circle at 82% 12%,rgba(201,255,53,.08),transparent 24%),
    #edf1ea;
  overflow:hidden!important;
}

.showcase-v2.is-studio-open .showcase-head-v2,
.showcase-v2.is-studio-open .showcase-foot{
  display:none!important;
}

.showcase-v2.is-studio-open .demo-studio-close{
  position:absolute;
  z-index:2105;
  top:max(10px,env(safe-area-inset-top));
  right:max(10px,env(safe-area-inset-right));
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:#111512;
  color:#fff;
  box-shadow:0 12px 34px rgba(17,21,18,.18);
  font:inherit;
  font-size:9px;
  font-weight:850;
  cursor:pointer;
}

.showcase-v2.is-studio-open .showcase-workspace{
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(430px,470px) minmax(0,1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
  overflow:hidden!important;
}

.showcase-v2.is-studio-open .showcase-selector-board{
  height:100%;
  min-height:0;
  grid-template-columns:1fr 1fr;
  grid-template-rows:minmax(0,1fr) auto auto;
  gap:8px;
  padding:8px;
  border-radius:16px;
  overflow:hidden;
}

.showcase-v2.is-studio-open .selector-column{
  min-height:0;
  max-height:none;
  border-radius:12px;
}

.showcase-v2.is-studio-open .selector-scroll{
  height:auto;
  min-height:0;
  overflow-y:auto;
}

.showcase-v2.is-studio-open .selector-card{
  min-height:72px;
  padding:9px;
  margin-bottom:6px;
}
.showcase-v2.is-studio-open .layout-selector-card{
  grid-template-columns:28px minmax(0,1fr) 39px;
  grid-template-areas:
    "code title title"
    "code desc mini";
  column-gap:8px;
  row-gap:3px;
}

.showcase-v2.is-studio-open .trade-selector-card{
  grid-template-columns:30px minmax(0,1fr);
}

.showcase-v2.is-studio-open .selector-code,
.showcase-v2.is-studio-open .trade-mark{
  width:28px;
  height:28px;
  font-size:8px;
}

.showcase-v2.is-studio-open .selector-mini{
  width:39px;
  height:28px;
}

.showcase-v2.is-studio-open .selector-card strong{font-size:10px}
.showcase-v2.is-studio-open .selector-card small{font-size:7px}
.showcase-v2.is-studio-open .selector-column-head{padding:11px 10px 9px}
.showcase-v2.is-studio-open .language-selector{
  grid-template-columns:74px 1fr;
  gap:7px;
  padding:8px;
  border-radius:12px;
}
.showcase-v2.is-studio-open .demo-request-builder{
  padding:7px;
  gap:6px;
  border-radius:12px;
}
.showcase-v2.is-studio-open .demo-request-pick{
  padding:7px 8px;
}
.showcase-v2.is-studio-open .demo-request-open{
  min-height:32px;
}
.showcase-v2.is-studio-open .language-chip{
  min-width:34px;
  padding:6px 7px;
  font-size:7px;
}

.showcase-v2.is-studio-open .showcase-preview-column{
  position:static!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden!important;
}

.showcase-v2.is-studio-open .preview-meta-v2{
  min-height:48px;
  margin:0 0 7px;
  padding:0 116px 0 7px;
  align-items:center;
}
.showcase-v2.is-studio-open .preview-meta-v2 h3{font-size:18px}
.showcase-v2.is-studio-open .preview-meta-v2 p{font-size:8px}

.showcase-v2.is-studio-open .preview-bottom-v2{
  display:none!important;
}

.showcase-v2.is-studio-open .live-browser{
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr);
  border-radius:15px;
  box-shadow:0 18px 60px rgba(27,40,29,.14);
}

.showcase-v2.is-studio-open .live-browser-top{
  height:34px;
}

.showcase-v2.is-studio-open .live-browser-viewport{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
}

.showcase-v2.is-studio-open .demo-live-frame{
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  transform:none!important;
  transform-origin:0 0!important;
}

.showcase-v2.is-studio-open .demo-live-frame.is-active,
.showcase-v2.is-studio-open .demo-live-frame.is-entering,
.showcase-v2.is-studio-open .demo-live-frame.is-leaving{
  transform:none!important;
}

@media(min-width:801px) and (max-width:1100px){
  .showcase-v2:not(.is-studio-open) .showcase-workspace{
    grid-template-columns:330px minmax(0,1fr);
  }
  .showcase-v2:not(.is-studio-open) .showcase-preview-column{
    position:sticky;
    top:88px;
  }
  .showcase-v2:not(.is-studio-open) .live-browser-morph .live-browser-viewport{
    height:650px;
  }
}

@media(max-width:800px){
  .mobile-palette-row{
    grid-template-columns:58px minmax(0,1fr) auto auto;
  }
  .mobile-demo-inquiry{
    min-height:29px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 9px;
    border:1px solid #d8eaa0;
    border-radius:9px;
    background:#eaf6bd;
    color:#27320f;
    font-size:8px;
    font-weight:900;
    text-decoration:none;
  }
  .mobile-demo-inquiry span{font-size:9px}
  .mobile-studio-button{
    min-height:29px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 9px;
    border:1px solid #1d261f;
    border-radius:9px;
    background:#1d261f;
    color:#fff;
    font:inherit;
    cursor:pointer;
  }
  .mobile-studio-button b{font-size:8px}
  .mobile-studio-button span{font-size:9px}

  .showcase-v2.is-studio-open{
    padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
  }

  .showcase-v2.is-studio-open .demo-studio-close{
    top:max(7px,env(safe-area-inset-top));
    right:max(7px,env(safe-area-inset-right));
    width:34px;
    min-height:34px;
    justify-content:center;
    padding:0;
    font-size:17px;
  }
  .showcase-v2.is-studio-open .demo-studio-close span{display:none}

  .showcase-v2.is-studio-open .showcase-workspace{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }

  .showcase-v2.is-studio-open .showcase-selector-board{
    display:none!important;
  }

  .showcase-v2.is-studio-open .showcase-preview-column{
    height:100%!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  .showcase-v2.is-studio-open .showcase-preview-column>.preview-meta-v2{
    display:none!important;
  }

  .showcase-v2.is-studio-open .showcase-preview-column>.mobile-compact-demo-controls{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    margin:40px 0 5px!important;
    padding:6px!important;
    gap:4px!important;
    border-radius:12px!important;
    flex:0 0 auto;
    overflow:hidden!important;
  }

  .showcase-v2.is-studio-open .mobile-choice-row,
  .showcase-v2.is-studio-open .mobile-language-row,
  .showcase-v2.is-studio-open .mobile-palette-row{
    grid-template-columns:50px minmax(0,1fr);
    gap:4px;
  }

  .showcase-v2.is-studio-open .mobile-studio-button{
    display:none!important;
  }

  .showcase-v2.is-studio-open .mobile-choice{
    min-height:27px;
  }

  .showcase-v2.is-studio-open .showcase-preview-column>.live-browser{
    min-height:0!important;
    height:100%!important;
    border-radius:10px!important;
  }

  .showcase-v2.is-studio-open .live-browser-top{
    height:30px;
  }

  .showcase-v2.is-studio-open .live-browser-viewport{
    height:auto!important;
    min-height:0!important;
  }
}

@media(max-width:520px){
  .showcase-v2:not(.is-studio-open) .live-browser-viewport{
    height:min(72dvh,680px);
    min-height:500px;
  }
}


/* Studio A/B comparison mode */
.studio-compare-toolbar,
.studio-preview-compare,
.studio-pane-title{
  display:none;
}
.studio-preview-grid{display:block}

.showcase-v2.is-studio-open .showcase-preview-column{
  grid-template-rows:auto auto minmax(0,1fr)!important;
}

.showcase-v2.is-studio-open .studio-compare-toolbar{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 7px;
  padding:5px 116px 5px 7px;
  border:1px solid rgba(38,49,40,.11);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  box-shadow:0 5px 18px rgba(25,36,28,.05);
  backdrop-filter:blur(10px);
}
.studio-layout-pair,
.studio-scroll-tools,
.studio-compare-layouts{
  min-width:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.studio-pane-chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:29px;
  padding:0 9px;
  border-radius:999px;
  background:#1d261f;
  color:#fff;
  font-size:8px;
  font-weight:900;
}
.studio-pane-chip strong{font-size:8px}
.studio-vs{
  color:#7d877f;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
}
.studio-compare-layouts{
  overflow-x:auto;
  scrollbar-width:none;
}
.studio-compare-layouts::-webkit-scrollbar{display:none}
.studio-compare-layouts button,
.studio-scroll-tools button{
  flex:0 0 auto;
  min-height:29px;
  padding:0 9px;
  border:1px solid #ccd4cc;
  border-radius:999px;
  background:#fff;
  color:#465047;
  font:inherit;
  font-size:7px;
  font-weight:850;
  cursor:pointer;
}
.studio-compare-layouts button.is-active,
.studio-scroll-tools button.is-active{
  border-color:#1d261f;
  background:#1d261f;
  color:#fff;
}
.studio-scroll-tools{
  justify-content:flex-end;
  overflow-x:auto;
  scrollbar-width:none;
}
.studio-scroll-tools::-webkit-scrollbar{display:none}

.showcase-v2.is-studio-open .studio-preview-grid{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:7px;
  overflow:hidden;
}
.showcase-v2.is-studio-open .studio-preview-pane{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:24px minmax(0,1fr);
  overflow:hidden;
}
.showcase-v2.is-studio-open .studio-preview-compare{
  display:grid;
}
.showcase-v2.is-studio-open .studio-pane-title{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 6px;
  color:#687169;
  font-size:8px;
}
.showcase-v2.is-studio-open .studio-pane-title span{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:5px;
  background:#1d261f;
  color:#fff;
  font-size:7px;
  font-weight:900;
}
.showcase-v2.is-studio-open .studio-pane-title strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.showcase-v2.is-studio-open .studio-preview-pane>.live-browser{
  min-height:0!important;
  height:100%!important;
}
.showcase-v2.is-studio-open .studio-compare-browser{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
  height:100%;
}
.showcase-v2.is-studio-open .studio-compare-browser .live-browser-viewport{
  min-height:0!important;
  height:auto!important;
}
.showcase-v2.is-studio-open .studio-compare-frame{
  width:100%!important;
  height:100%!important;
  transform:none!important;
}

@media(max-width:1100px){
  .showcase-v2.is-studio-open .showcase-workspace{
    grid-template-columns:410px minmax(0,1fr)!important;
  }
  .showcase-v2.is-studio-open .studio-compare-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .showcase-v2.is-studio-open .studio-scroll-tools{
    width:100%;
    justify-content:flex-start;
  }
}

@media(max-width:800px){
  .showcase-v2.is-studio-open .showcase-preview-column{
    grid-template-rows:auto auto minmax(0,1fr)!important;
  }
  .showcase-v2.is-studio-open .studio-compare-toolbar{
    min-height:0;
    display:grid!important;
    gap:4px;
    margin:0 0 5px;
    padding:5px 38px 5px 5px;
    border-radius:10px;
  }
  .showcase-v2.is-studio-open .studio-layout-pair{
    min-width:0;
    overflow:hidden;
  }
  .showcase-v2.is-studio-open .studio-pane-chip{
    height:25px;
    padding-inline:7px;
  }
  .showcase-v2.is-studio-open .studio-scroll-tools{
    width:100%;
    justify-content:flex-start;
  }
  .showcase-v2.is-studio-open .studio-compare-layouts button,
  .showcase-v2.is-studio-open .studio-scroll-tools button{
    min-height:25px;
    padding:0 7px;
    font-size:6px;
  }
  .showcase-v2.is-studio-open .studio-preview-grid{
    grid-template-columns:repeat(2,minmax(82vw,1fr));
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .showcase-v2.is-studio-open .studio-preview-grid::-webkit-scrollbar{display:none}
  .showcase-v2.is-studio-open .studio-preview-pane{
    scroll-snap-align:center;
  }

  .showcase-v2:not(.is-studio-open) .studio-preview-grid,
  .showcase-v2:not(.is-studio-open) .studio-preview-primary{
    width:100%;
    min-width:0;
  }
  .showcase-v2:not(.is-studio-open) .studio-preview-primary>.live-browser{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:10px 10px 15px 15px;
    overflow:hidden!important;
  }
}


/* Studio column routing and compare visibility */
.showcase-v2{
  --studio-primary:#18a999;
  --studio-compare:#7c5cff;
}
.studio-layout-routing,
.mobile-studio-layout-routing{
  display:none;
}

.showcase-v2.is-studio-open .layout-selector-column{
  grid-template-rows:auto auto minmax(0,1fr)!important;
}
.showcase-v2.is-studio-open .studio-layout-routing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:8px;
  border-bottom:1px solid #d8ded7;
  background:#f4f7f3;
}
.studio-layout-target{
  min-width:0;
  min-height:44px;
  display:grid;
  grid-template-columns:10px 1fr;
  grid-template-areas:
    "dot label"
    "dot name";
  align-items:center;
  gap:1px 7px;
  padding:7px 9px;
  border:1px solid #d1d8d1;
  border-radius:10px;
  background:#fff;
  color:#344038;
  text-align:left;
  font:inherit;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.studio-layout-target i{
  grid-area:dot;
  width:9px;
  height:9px;
  border-radius:999px;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.studio-layout-target span{
  grid-area:label;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.68;
}
.studio-layout-target strong{
  grid-area:name;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}
.studio-layout-target.target-primary i{background:var(--studio-primary)}
.studio-layout-target.target-compare i{background:var(--studio-compare)}
.studio-layout-target.target-primary.is-active{
  border-color:var(--studio-primary);
  background:#effbf7;
  box-shadow:0 0 0 2px rgba(24,169,153,.1);
}
.studio-layout-target.target-compare.is-active{
  border-color:var(--studio-compare);
  background:#f3f0ff;
  box-shadow:0 0 0 2px rgba(124,92,255,.1);
}
.studio-layout-target.target-compare.is-collapsed{
  opacity:.58;
  border-style:dashed;
}

.layout-column-markers{
  position:absolute;
  right:6px;
  bottom:5px;
  z-index:3;
  display:none;
  align-items:center;
  gap:3px;
  pointer-events:none;
}
.layout-column-marker{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff;
  font-size:7px;
  font-style:normal;
  font-weight:950;
  line-height:1;
  opacity:0;
  transform:scale(.7);
  transition:opacity .16s ease,transform .16s ease;
}
.marker-primary{background:var(--studio-primary)}
.marker-compare{background:var(--studio-compare)}

.showcase-v2.is-studio-open .layout-column-markers{display:flex}
.showcase-v2.is-studio-open .layout-selector-card.is-primary-layout .marker-primary,
.showcase-v2.is-studio-open .layout-selector-card.is-compare-layout .marker-compare{
  opacity:1;
  transform:scale(1);
}
.showcase-v2.is-studio-open .layout-selector-card.is-primary-layout{
  border-left:3px solid var(--studio-primary);
}
.showcase-v2.is-studio-open .layout-selector-card.is-compare-layout{
  border-right:3px solid var(--studio-compare);
}
.showcase-v2.is-studio-open.is-layout-target-primary .layout-selector-card.is-primary-layout{
  background:#effbf7;
  box-shadow:0 8px 20px rgba(24,169,153,.08);
}
.showcase-v2.is-studio-open.is-layout-target-compare .layout-selector-card.is-compare-layout{
  background:#f3f0ff;
  box-shadow:0 8px 20px rgba(124,92,255,.08);
}
.showcase-v2.is-studio-open .layout-selector-card.is-primary-layout.is-compare-layout{
  border-left-color:var(--studio-primary);
  border-right-color:var(--studio-compare);
}

.showcase-v2.is-studio-open .studio-pane-chip-primary{
  background:var(--studio-primary);
}
.showcase-v2.is-studio-open .studio-pane-chip-compare{
  background:var(--studio-compare);
}
.showcase-v2.is-studio-open .studio-pane-chip i{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#fff;
  opacity:.95;
}
.showcase-v2.is-studio-open .studio-pane-chip span{
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.82;
}
.showcase-v2.is-studio-open .studio-compare-toggle{
  flex:0 0 auto;
  min-height:29px;
  padding:0 10px;
  border:1px solid #cbd3cc;
  border-radius:999px;
  background:#fff;
  color:#3f4941;
  font:inherit;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}
.showcase-v2.is-studio-open .studio-compare-toggle.is-collapsed{
  border-color:var(--studio-compare);
  color:var(--studio-compare);
}

.showcase-v2.is-studio-open .studio-preview-primary>.live-browser{
  border:2px solid var(--studio-primary)!important;
  box-shadow:0 0 0 1px rgba(24,169,153,.12),0 12px 34px rgba(24,169,153,.08)!important;
}
.showcase-v2.is-studio-open .studio-preview-compare>.live-browser{
  border:2px solid var(--studio-compare)!important;
  box-shadow:0 0 0 1px rgba(124,92,255,.12),0 12px 34px rgba(124,92,255,.08)!important;
}
.showcase-v2.is-studio-open .studio-preview-primary .studio-pane-title span{
  background:var(--studio-primary);
}
.showcase-v2.is-studio-open .studio-preview-compare .studio-pane-title span{
  background:var(--studio-compare);
}
.showcase-v2.is-studio-open .studio-pane-title-compare button{
  margin-left:auto;
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(124,92,255,.35);
  border-radius:999px;
  background:#fff;
  color:var(--studio-compare);
  font:inherit;
  font-size:12px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.showcase-v2.is-studio-open.is-compare-collapsed .studio-preview-grid{
  grid-template-columns:minmax(0,1fr)!important;
  overflow-x:hidden!important;
}
.showcase-v2.is-studio-open.is-compare-collapsed .studio-preview-compare{
  display:none!important;
}
.showcase-v2.is-studio-open.is-compare-collapsed .studio-vs,
.showcase-v2.is-studio-open.is-compare-collapsed .studio-pane-chip-compare{
  opacity:.48;
}
.showcase-v2.is-studio-open.is-compare-collapsed .studio-scroll-tools [data-scroll-sync],
.showcase-v2.is-studio-open.is-compare-collapsed .studio-scroll-tools [data-align-compare],
.showcase-v2.is-studio-open.is-compare-collapsed .studio-scroll-tools [data-align-primary]{
  display:none;
}

@media(max-width:800px){
  .showcase-v2.is-studio-open .mobile-studio-layout-routing{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px;
  }
  .showcase-v2.is-studio-open .mobile-studio-layout-routing .studio-layout-target{
    min-height:28px;
    grid-template-columns:8px 1fr;
    grid-template-areas:"dot label";
    padding:4px 7px;
  }
  .showcase-v2.is-studio-open .mobile-studio-layout-routing .studio-layout-target span{
    font-size:6px;
  }
  .showcase-v2.is-studio-open .mobile-choice.is-primary-layout{
    box-shadow:inset 0 -3px var(--studio-primary);
  }
  .showcase-v2.is-studio-open .mobile-choice.is-compare-layout{
    outline:2px solid var(--studio-compare);
    outline-offset:-2px;
  }
  .showcase-v2.is-studio-open .mobile-choice.is-primary-layout.is-compare-layout{
    box-shadow:inset 0 -3px var(--studio-primary);
    outline:2px solid var(--studio-compare);
  }
  .showcase-v2.is-studio-open.is-compare-collapsed .studio-preview-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}


/* Demo request builder */
.demo-request-builder{
  grid-column:1/-1;
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid #d3d9d2;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(250,255,237,.98),rgba(247,249,246,.95));
}
.demo-request-selection{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.demo-request-pick{
  min-width:0;
  display:grid;
  gap:3px;
  padding:10px 11px;
  border:1px solid #dbe2d7;
  border-radius:12px;
  background:#fff;
}
.demo-request-pick span{
  color:#788278;
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.demo-request-pick strong{
  min-width:0;
  font-size:11px;
  line-height:1.25;
}
.demo-request-pick small{
  color:#849086;
  font-size:7px;
}
.demo-request-divider{
  color:#91b71d;
  font-size:15px;
  font-weight:900;
}
.demo-request-open{
  width:100%;
  min-height:40px;
  border:0;
  border-radius:10px;
  background:#1d261f;
  color:#fff;
  font:inherit;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.demo-request-open:hover{background:#0f1510}

.demo-request-modal[hidden]{display:none!important}
.demo-request-modal{
  position:fixed;
  inset:0;
  z-index:2300;
  display:grid;
  place-items:center;
  padding:20px;
}
.demo-request-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(12,18,13,.54);
  backdrop-filter:blur(9px);
}
.demo-request-panel{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  padding:28px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:22px;
  background:#f8faf5;
  box-shadow:0 30px 90px rgba(13,20,14,.25);
}
.demo-request-panel h3{
  margin:0 38px 18px 0;
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
}
.demo-request-panel>p{
  margin:16px 0 0;
  color:#657067;
  font-size:11px;
  line-height:1.6;
}
.demo-request-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border:1px solid #d4dbd2;
  border-radius:50%;
  background:#fff;
  color:#273028;
  font-size:18px;
  cursor:pointer;
}
.demo-request-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.demo-request-summary>div{
  min-width:0;
  display:grid;
  gap:4px;
  padding:13px;
  border:1px solid #d8ded5;
  border-radius:12px;
  background:#fff;
}
.demo-request-summary span{
  color:#7a847b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.demo-request-summary strong{
  font-size:12px;
  line-height:1.25;
}
.demo-request-summary i{
  color:#91b71d;
  font-style:normal;
  font-weight:950;
}
.demo-request-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:18px;
}
.demo-request-actions a{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  text-decoration:none;
}
.demo-request-primary{background:#1d261f;color:#fff}
.demo-request-primary:hover{background:#0f1510}
.demo-request-secondary{
  border:1px solid #cfd6cd;
  background:#fff;
  color:#303a32;
}
body.demo-request-is-open{overflow:hidden}

@media(max-width:800px){
  .demo-request-builder{
    display:none;
  }
  .demo-request-panel{
    padding:23px 18px;
  }
  .demo-request-panel h3{font-size:26px}
}
@media(max-width:520px){
  .demo-request-summary,
  .demo-request-actions{
    grid-template-columns:1fr;
  }
  .demo-request-divider{display:none}
}

/* CJK hero typography: full-height glyphs need more leading than Latin caps. */
body[data-site-lang="zh"] .hero h1,
body[data-site-lang="ja"] .hero h1 {
  font-size:clamp(50px,5.15vw,82px);
  line-height:1.12;
  letter-spacing:-.045em;
  overflow-wrap:anywhere;
}
@media(max-width:800px) {
  body[data-site-lang="zh"] .hero h1,
  body[data-site-lang="ja"] .hero h1 {
    font-size:clamp(38px,10.3vw,54px);
    line-height:1.16;
    letter-spacing:-.035em;
  }
}