:root {
  --bg: #05070c;
  --panel: rgba(255,255,255,.075);
  --panel-strong: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.13);
  --text: #f8fafc;
  --muted: rgba(248,250,252,.62);
  --accent: #ef4444;
  --accent2: #f97316;
  --green: #14b8a6;
  --radius: 28px;
  --shadow: 0 32px 90px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(239,68,68,.22), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(20,184,166,.14), transparent 24rem),
    var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

button, input, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  background: #05070c;
  transition: opacity .6s ease, visibility .6s ease;
}

.boot-loader.done {
  opacity: 0;
  visibility: hidden;
}

.boot-loader p {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 900;
}

.loader-star,
.brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0 15deg, var(--accent) 15deg 28deg, transparent 28deg 45deg, var(--accent) 45deg 58deg, transparent 58deg 75deg, var(--accent) 75deg 88deg, transparent 88deg 105deg, var(--accent) 105deg 118deg, transparent 118deg 135deg, var(--accent) 135deg 148deg, transparent 148deg 165deg, var(--accent) 165deg 178deg, transparent 178deg 195deg, var(--accent) 195deg 208deg, transparent 208deg 225deg, var(--accent) 225deg 238deg, transparent 238deg 255deg, var(--accent) 255deg 268deg, transparent 268deg 285deg, var(--accent) 285deg 298deg, transparent 298deg 315deg, var(--accent) 315deg 328deg, transparent 328deg 360deg);
  mask: radial-gradient(circle, transparent 0 28%, #000 31% 62%, transparent 65%);
  animation: spin 1.2s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.top-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(1180px, calc(100vw - 28px));
  min-height: 62px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5,7,12,.66);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  width: 28px;
  height: 28px;
}

.brand strong {
  font-weight: 950;
  letter-spacing: -.04em;
}

.brand small {
  color: var(--muted);
  font-weight: 800;
}

.top-nav nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-nav a,
.top-nav nav button {
  color: var(--muted);
  text-decoration: none;
  border: 0;
  background: transparent;
  font-weight: 850;
  padding: 10px 12px;
  border-radius: 999px;
}

.top-nav .nav-cta,
.top-nav nav button {
  background: #fff;
  color: #05070c;
}

.landing-hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 44px;
  align-items: center;
  padding: 126px min(6vw, 80px) 64px;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(4px);
  opacity: .7;
  pointer-events: none;
}

.ambient-orb.one {
  width: 420px;
  height: 420px;
  right: 8%;
  top: 18%;
  background: radial-gradient(circle at 40% 30%, #fed7aa, var(--accent) 34%, #7f1d1d 58%, transparent 70%);
  animation: float 6s ease-in-out infinite;
}

.ambient-orb.two {
  width: 260px;
  height: 260px;
  left: 4%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(20,184,166,.7), transparent 65%);
  animation: float 7s ease-in-out reverse infinite;
}

@keyframes float {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.035); }
}

.landing-copy {
  position: relative;
  z-index: 2;
}

.kicker {
  margin: 0 0 20px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 950;
}

.landing-copy h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(4rem, 12.6vw, 12rem);
  line-height: .84;
  letter-spacing: -.105em;
  font-weight: 950;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
  animation: titleIn .8s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes titleIn {
  from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: none; }
}

.landing-copy > p:not(.kicker) {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.65;
}

.hero-actions,
.export-actions,
.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.primary-action,
.secondary-action {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 18px;
  border: 1px solid var(--line);
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.primary-action {
  background: #fff;
  color: #05070c;
}

.secondary-action {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.hero-device {
  position: relative;
  z-index: 2;
  border: 1px solid var(--line);
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
}

.device-top,
.preview-top {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid var(--line);
}

.device-top span,
.preview-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

.device-top small,
.preview-top strong {
  margin-left: auto;
  color: var(--muted);
  font-weight: 850;
}

.device-screen {
  height: 450px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 45% 40%, rgba(239,68,68,.22), transparent 22rem), #090b12;
  overflow: hidden;
}

.screen-word {
  position: absolute;
  left: -8%;
  top: 32%;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: .8;
  letter-spacing: -.09em;
  font-weight: 950;
  color: rgba(255,255,255,.92);
  transform: rotate(-4deg);
}

.screen-panel {
  position: absolute;
  bottom: 34px;
  width: 160px;
  height: 210px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.screen-panel.left { left: 42px; }
.screen-panel.right { right: 52px; transform: translateY(-36px); }

.screen-ring {
  width: 150px;
  height: 150px;
  border-radius: 999px;
  border: 24px solid #d97706;
  box-shadow: 0 0 70px rgba(249,115,22,.35);
  animation: float 4s ease-in-out infinite;
}

.landing-section {
  min-height: 88vh;
  padding: 100px min(6vw, 82px);
  display: grid;
  align-content: center;
  gap: 34px;
  border-top: 1px solid var(--line);
}

.section-heading h2,
.final-cta h2 {
  margin: 0;
  max-width: 1100px;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: .82;
  letter-spacing: -.11em;
}

.section-heading p:not(.kicker) {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.65;
}

.feature-grid,
.style-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
}

.feature-grid article,
.style-card {
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 24px;
  background: rgba(255,255,255,.07);
  display: grid;
  align-content: end;
  gap: 12px;
}

.feature-grid span {
  color: var(--accent);
  font-weight: 950;
}

.feature-grid h3,
.style-card strong {
  margin: 0;
  font-size: 1.4rem;
}

.feature-grid p,
.style-card small {
  color: var(--muted);
  line-height: 1.55;
}

.style-showcase {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.style-card span {
  display: block;
  height: 140px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("style-previews/dark-showcase.jpg");
  background-color: #090b12;
}

.style-card.sustain span {
  background-image: url("style-previews/sustainability.jpg");
  background-color: #f7f3e8;
}
.style-card.luxe span {
  background-image: url("style-previews/luxury-editorial.jpg");
  background-color: #17110c;
}
.style-card.medical span {
  background-image: url("style-previews/medical-premium.jpg");
  background-color: #eaf1fb;
}

.final-cta {
  text-align: center;
  place-items: center;
}

/* Generator */
.generator-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(340px, 42vw);
  gap: 18px;
  padding: 104px 18px 96px;
  align-items: start;
}

html,
body.generator-page {
  min-height: 100%;
  overflow-x: hidden;
}

body.generator-page {
  overflow-y: auto;
}

body.focus-preview .step-rail,
body.focus-preview .builder-stage {
  display: none;
}

body.focus-preview .generator-layout {
  grid-template-columns: 1fr;
}

.step-rail,
.builder-stage,
.preview-shell {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

.step-rail {
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 9px;
}

.rail-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
  font-weight: 950;
}

.rail-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 18px;
  padding: 10px;
  text-align: left;
  font-weight: 900;
}

.rail-step span {
  color: rgba(255,255,255,.35);
}

.rail-step.active {
  color: #fff;
  background: var(--panel-strong);
  border-color: var(--line);
}

.builder-stage {
  padding: 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  overflow: visible;
}

.stage-head {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 16px;
  align-items: center;
}

.stage-head h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.stage-progress {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.stage-progress span {
  display: block;
  height: 100%;
  width: 14%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .28s ease;
}

.flow-panel {
  display: none;
  gap: 20px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.flow-panel.active {
  display: grid;
  animation: panelIn .34s ease both;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateX(20px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

.panel-copy {
  display: grid;
  gap: 10px;
}

.step-number {
  color: var(--accent);
  font-weight: 950;
  letter-spacing: .12em;
}

.panel-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: .85;
  letter-spacing: -.095em;
}

.panel-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 820px;
}

.template-cards,
.scene-editor-grid,
.page-mode-grid,
.control-grid {
  display: grid;
  gap: 14px;
}

.template-cards,
.scene-editor-grid,
.page-mode-grid,
.control-grid.two {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.control-grid.three {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.template-card,
.mode-card,
.field-card,
.toggle-scene {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 16px;
}

.template-card {
  text-align: left;
  display: grid;
  gap: 12px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.template-card:hover,
.template-card.active {
  transform: translateY(-4px);
  border-color: rgba(239,68,68,.52);
  background: rgba(255,255,255,.11);
}

.template-card strong,
.mode-card span,
.toggle-scene strong,
.field-card span {
  font-weight: 950;
}

.template-card small,
.mode-card small {
  color: var(--muted);
  line-height: 1.4;
}

.mini-preview {
  min-height: 120px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  display: block;
  background: #111827;
}

.mini-preview i,
.mini-preview b,
.mini-preview em {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.mini-preview i {
  left: 18px;
  top: 18px;
  width: 68%;
  height: 18px;
  background: rgba(255,255,255,.9);
}

.mini-preview b {
  left: 18px;
  bottom: 18px;
  width: 42%;
  height: 42px;
  background: rgba(255,255,255,.16);
}

.mini-preview em {
  right: 22px;
  bottom: 18px;
  width: 64px;
  height: 64px;
  border: 14px solid var(--accent2);
}

.mini-preview.sustain { background: #f7f3e8; }
.mini-preview.sustain i { background: #111827; }
.mini-preview.sustain b { background: #d1fae5; }
.mini-preview.luxe { background: #17110c; }
.mini-preview.luxe em { border-color: #d6b46a; }
.mini-preview.medical { background: #0b1220; }
.mini-preview.medical em { border-color: #38bdf8; }

.field-card {
  display: grid;
  gap: 8px;
}

.field-card.full {
  grid-column: 1 / -1;
}

.field-card input,
.field-card textarea,
.field-card select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(5,7,12,.46);
  color: #fff;
  padding: 12px;
}

.field-card input[type="color"] {
  min-height: 48px;
  padding: 4px;
}

.field-card textarea {
  min-height: 124px;
  resize: vertical;
}

.toggle-scene {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.toggle-scene input {
  display: none;
}

.toggle-scene span {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  position: relative;
}

.toggle-scene span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  transition: transform .2s ease;
}

.toggle-scene input:checked + span {
  background: var(--accent);
}

.toggle-scene input:checked + span::after {
  transform: translateX(18px);
}

.mode-card {
  display: grid;
  gap: 8px;
  cursor: pointer;
}

.mode-card input {
  accent-color: var(--accent);
}

.export-actions {
  margin-top: 0;
}

.code-output {
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(0,0,0,.42);
  color: #d1fae5;
  padding: 16px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .78rem;
  resize: vertical;
}

.stage-actions {
  justify-content: space-between;
  margin-top: 0;
  position: sticky;
  bottom: 14px;
  z-index: 20;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(5,7,12,.86);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

.stage-actions .primary-action,
.stage-actions .secondary-action {
  min-width: 128px;
  pointer-events: auto;
}

.preview-shell {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100vh - 122px);
}

.preview-frame-scroll {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
}

#previewFrame {
  width: max(100%, 1040px);
  min-width: 1040px;
  height: 100%;
  min-height: 680px;
  border: 0;
  background: #fff;
  display: block;
}

@media (max-width: 1180px) {
  .generator-layout {
    grid-template-columns: 1fr;
  }

  .step-rail {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow: auto;
  }

  .landing-hero {
    grid-template-columns: 1fr;
  }

  .hero-device {
    max-width: 560px;
  }

  .preview-shell {
    min-height: 720px;
  }

  #previewFrame {
    width: 1040px;
    min-width: 1040px;
  }

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

@media (max-width: 720px) {
  .top-nav {
    border-radius: 24px;
    align-items: flex-start;
  }

  .top-nav nav a:not(.nav-cta) {
    display: none;
  }

  .landing-hero,
  .generator-layout,
  .landing-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .template-cards,
  .control-grid.two,
  .control-grid.three,
  .scene-editor-grid,
  .page-mode-grid,
  .stage-head,
  .feature-grid,
  .style-showcase {
    grid-template-columns: 1fr;
  }

  .landing-copy h1 {
    font-size: clamp(2.75rem, 13.4vw, 4.35rem);
    line-height: .93;
    letter-spacing: -.075em;
    max-width: 100%;
  }
}


/* v3.2 Advanced Personalization */
.control-group-title {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.11), transparent 14rem),
    rgba(255,255,255,.055);
}

.control-group-title strong {
  font-size: 1rem;
  letter-spacing: -.02em;
}

.control-group-title small,
.field-card small {
  color: var(--muted);
  line-height: 1.45;
}

.field-card select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field-card input[type="color"] {
  cursor: pointer;
}


/* v3.4 Guided Creation Flow */
.guided-creation-launch {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(239,68,68,.30);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.18), transparent 16rem),
    rgba(255,255,255,.065);
}

.guided-creation-launch strong {
  display: block;
  font-weight: 950;
}

.guided-creation-launch small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}

.guided-creator-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 14% 8%, rgba(239,68,68,.28), transparent 30rem),
    radial-gradient(circle at 86% 82%, rgba(20,184,166,.16), transparent 26rem),
    rgba(5,7,12,.78);
  backdrop-filter: blur(18px);
}

.guided-creator-overlay.hidden {
  display: none;
}

.guided-creator-window {
  position: relative;
  width: min(1260px, calc(100vw - 28px));
  height: min(840px, calc(100vh - 28px));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background:
    radial-gradient(circle at 72% 18%, rgba(239,68,68,.18), transparent 24rem),
    #05070c;
  box-shadow: 0 44px 140px rgba(0,0,0,.58);
  overflow: hidden;
  display: grid;
  grid-template-columns: 330px 1fr;
  animation: guidedWindowIn .35s cubic-bezier(.16,1,.3,1) both;
}

@keyframes guidedWindowIn {
  from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: none; }
}

.guided-creator-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
}

.guided-creator-side {
  padding: 30px 24px;
  border-right: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.10), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  display: grid;
  align-content: start;
  gap: 18px;
}

.guided-creator-side h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.35rem);
  line-height: .85;
  letter-spacing: -.095em;
}

.guided-creator-side > p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.guided-creator-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.guided-creator-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .35s ease;
}

.guided-creator-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-height: 430px;
  overflow: auto;
}

.guided-creator-list li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
}

.guided-creator-list li span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  font-size: .75rem;
  font-weight: 950;
}

.guided-creator-list li.active {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.guided-creator-list li.active span {
  background: var(--accent);
  color: #fff;
}

.guided-creator-list li.done {
  color: rgba(255,255,255,.48);
}

.guided-creator-list li.done span {
  background: rgba(20,184,166,.24);
  color: #99f6e4;
}

.guided-creator-list li.skipped {
  color: rgba(255,255,255,.34);
  text-decoration: line-through;
}

.guided-creator-main {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.guided-creator-stage {
  padding: 42px 42px 24px;
  overflow: auto;
  position: relative;
}

.guided-section-card {
  display: grid;
  gap: 24px;
  min-height: 100%;
  animation: guidedSectionIn .42s cubic-bezier(.16,1,.3,1) both;
}

.guided-section-topmeta {
  display: grid;
  gap: 8px;
  align-content: start;
}

.guided-section-topmeta .guided-section-number {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
}

@keyframes guidedSectionIn {
  0% { opacity: 0; transform: translateX(48px) scale(.96); filter: blur(16px); }
  100% { opacity: 1; transform: none; filter: none; }
}

.guided-section-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
}

.guided-section-copy {
  display: grid;
  gap: 14px;
}

.guided-section-number {
  display: inline-flex;
  width: fit-content;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.guided-section-copy h3 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3.1rem, 8vw, 8.5rem);
  line-height: .76;
  letter-spacing: -.13em;
}

.guided-section-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.guided-section-big-number {
  font-size: clamp(7rem, 20vw, 20rem);
  line-height: .7;
  letter-spacing: -.14em;
  font-weight: 950;
  color: rgba(255,255,255,.08);
  pointer-events: none;
}

.guided-section-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.guided-section-field {
  display: grid;
  gap: 8px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background: rgba(255,255,255,.07);
}

.guided-section-field.full {
  grid-column: 1 / -1;
}

.guided-section-field label {
  font-weight: 950;
  font-size: 1.05rem;
}

.guided-section-field small {
  color: var(--muted);
  line-height: 1.45;
  font-size: .98rem;
}

.guided-section-field input,
.guided-section-field textarea,
.guided-section-field select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.34);
  color: #fff;
  padding: 16px 18px;
  min-height: 58px;
  font-size: 1.05rem;
}

.guided-section-field textarea {
  min-height: 118px;
  resize: vertical;
}

.guided-section-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.guided-theme-card {
  text-align: left;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  color: #fff;
  padding: 14px;
  display: grid;
  gap: 10px;
  transition: transform .2s ease, border-color .2s ease;
}

.guided-theme-card.active {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.guided-theme-card span {
  display: block;
  min-height: 90px;
  border-radius: 18px;
  background: radial-gradient(circle at 45% 35%, var(--accent2), var(--accent) 36%, transparent 68%), #0b1020;
}

.guided-theme-card[data-theme="sustain"] span { background: radial-gradient(circle, #d1fae5, transparent 60%), #f7f3e8; }
.guided-theme-card[data-theme="luxe"] span { background: radial-gradient(circle, #d6b46a, transparent 60%), #17110c; }
.guided-theme-card[data-theme="medical"] span { background: radial-gradient(circle, #38bdf8, transparent 60%), #0b1220; }

.guided-theme-card strong {
  font-weight: 950;
}

.guided-theme-card small {
  color: var(--muted);
  line-height: 1.35;
}

.guided-section-note {
  padding: 14px 16px;
  border: 1px solid rgba(249,115,22,.25);
  border-radius: 18px;
  background: rgba(249,115,22,.10);
  color: #fed7aa;
  line-height: 1.45;
  font-weight: 800;
}

.guided-creator-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}

.guided-creator-actions .primary-action,
.guided-creator-actions .secondary-action {
  margin: 0;
}

@media (max-width: 980px) {
  .guided-creator-window {
    grid-template-columns: 1fr;
  }

  .guided-creator-side {
    display: none;
  }

  .guided-section-hero,
  .guided-section-form,
  .guided-section-theme-grid {
    grid-template-columns: 1fr;
  }

  .guided-section-big-number {
    display: none;
  }

  .guided-creator-actions {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .guided-creator-actions button {
    flex: 1 1 170px;
  }

  .guided-creation-launch {
    grid-template-columns: 1fr;
  }
}


/* v3.4.1 FIX - Guided creator no-freeze / iPad-safe */
.guided-creator-overlay {
  align-items: stretch;
  padding: 8px;
  overflow: hidden;
  min-height: 100dvh;
}

.guided-creator-window {
  width: min(1260px, calc(100vw - 16px));
  height: min(840px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  grid-template-columns: 300px minmax(0, 1fr);
}

.guided-creator-side {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.guided-creator-main {
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.guided-creator-top-actions {
  position: sticky;
  top: 0;
  z-index: 5;
  display: none;
  gap: 8px;
  padding: 12px 58px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(5,7,12,.86);
  backdrop-filter: blur(16px);
}

.guided-creator-top-actions .primary-action,
.guided-creator-top-actions .secondary-action {
  min-height: 40px;
  padding: 0 13px;
  margin: 0;
}

.guided-creator-stage {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 96px;
}

.guided-creator-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: rgba(5,7,12,.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 -18px 44px rgba(0,0,0,.30);
}

.guided-creator-actions .primary-action,
.guided-creator-actions .secondary-action {
  min-height: 44px;
  white-space: nowrap;
}

.guided-section-card {
  min-height: auto;
}

.guided-section-copy h3 {
  font-size: clamp(2.3rem, 6.5vw, 6.2rem);
}

.guided-section-big-number {
  font-size: clamp(5rem, 16vw, 15rem);
}

.guided-section-form {
  align-items: start;
}

.guided-section-field textarea {
  min-height: 96px;
}

@supports (height: 100svh) {
  .guided-creator-overlay {
    min-height: 100svh;
  }

  .guided-creator-window {
    height: min(840px, calc(100svh - 16px));
    max-height: calc(100svh - 16px);
  }
}

@media (max-width: 1180px), (pointer: coarse) {
  .guided-creator-window {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .guided-creator-side {
    padding: 22px 16px;
  }

  .guided-creator-side h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
  }

  .guided-creator-list li {
    padding: 8px;
  }

  .guided-creator-stage {
    padding: 26px 22px 104px;
  }

  .guided-creator-top-actions {
    display: flex;
  }

  .guided-section-hero {
    grid-template-columns: 1fr;
  }

  .guided-section-big-number {
    position: absolute;
    right: 26px;
    top: 72px;
    z-index: -1;
    opacity: .7;
  }

  .guided-section-theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-section-form {
    grid-template-columns: 1fr;
  }

  .guided-creator-actions {
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .guided-creator-actions .primary-action,
  .guided-creator-actions .secondary-action {
    padding: 0 10px;
    font-size: .86rem;
  }
}

@media (max-width: 820px) {
  .guided-creator-window {
    grid-template-columns: 1fr;
  }

  .guided-creator-side {
    display: none;
  }

  .guided-creator-stage {
    padding: 24px 16px 110px;
  }

  .guided-creator-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v3.5 Media & Visual Personalization */
.field-card input[type="file"] {
  width: 100%;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  padding: 12px;
}

.field-card input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #05070c;
  font-weight: 950;
  padding: 8px 12px;
  margin-right: 10px;
}

.media-upload-preview {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.26);
}


/* v3.6 Business Presets */
.business-preset-title {
  border-color: rgba(20,184,166,.28);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.15), transparent 14rem),
    rgba(255,255,255,.055);
}

.business-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.business-preset-card {
  min-height: 210px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(239,68,68,.10), transparent 12rem),
    rgba(255,255,255,.065);
  color: #fff;
  text-align: left;
  padding: 13px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.business-preset-card:hover,
.business-preset-card.active {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}

.business-preset-card strong {
  font-weight: 950;
  letter-spacing: -.03em;
}

.business-preset-card small {
  color: var(--muted);
  line-height: 1.35;
}

.preset-visual {
  display: block;
  min-height: 78px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 42% 35%, var(--accent2), var(--accent) 38%, transparent 70%),
    #0b1020;
}

.preset-visual.restaurant { background: radial-gradient(circle at 38% 36%, #fed7aa, #f97316 34%, transparent 70%), #1c0f08; }
.preset-visual.medical { background: radial-gradient(circle at 42% 38%, #bae6fd, #38bdf8 34%, transparent 70%), #08111f; }
.preset-visual.consulting { background: radial-gradient(circle at 42% 35%, #dbeafe, #2458e6 36%, transparent 70%), #0b1020; }
.preset-visual.hotel { background: radial-gradient(circle at 40% 35%, #fde68a, #d6b46a 34%, transparent 70%), #17110c; }
.preset-visual.fitness { background: radial-gradient(circle at 40% 35%, #bbf7d0, #22c55e 34%, transparent 70%), #06140d; }
.preset-visual.realestate { background: radial-gradient(circle at 40% 35%, #e5e7eb, #64748b 34%, transparent 70%), #111827; }
.preset-visual.industry { background: radial-gradient(circle at 40% 35%, #fecaca, #ef4444 34%, transparent 70%), #1b0b0b; }
.preset-visual.portfolio { background: radial-gradient(circle at 40% 35%, #f0abfc, #a855f7 34%, transparent 70%), #160b22; }
.preset-visual.event { background: radial-gradient(circle at 40% 35%, #bfdbfe, #06b6d4 34%, transparent 70%), #08131f; }
.preset-visual.catalog { background: radial-gradient(circle at 40% 35%, #fef3c7, #f59e0b 34%, transparent 70%), #1b1305; }
.preset-visual.professional { background: radial-gradient(circle at 40% 35%, #bfdbfe, #2563eb 34%, transparent 70%), #07111f; }
.preset-visual.trades { background: radial-gradient(circle at 40% 35%, #fed7aa, #f97316 34%, transparent 70%), #111827; }
.preset-visual.services_company { background: radial-gradient(circle at 40% 35%, #bbf7d0, #22c55e 34%, transparent 70%), #06140d; }
.preset-visual.local_shop { background: radial-gradient(circle at 40% 35%, #fbcfe8, #ec4899 34%, transparent 70%), #1b0b16; }
.preset-visual.autorepair { background: radial-gradient(circle at 40% 35%, #fecaca, #ef4444 34%, transparent 70%), #100f12; }
.preset-visual.education { background: radial-gradient(circle at 40% 35%, #ddd6fe, #8b5cf6 34%, transparent 70%), #0b1020; }
.preset-visual.wellness { background: radial-gradient(circle at 40% 35%, #a7f3d0, #14b8a6 34%, transparent 70%), #061716; }
.preset-visual.holiday_home { background: radial-gradient(circle at 40% 35%, #fde68a, #d6b46a 34%, transparent 70%), #120d08; }


.guided-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 1180px) {
  .business-preset-grid,
  .guided-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .business-preset-grid,
  .guided-preset-grid {
    grid-template-columns: 1fr;
  }

  .business-preset-card {
    min-height: auto;
  }
}


/* v3.6.1 Business Sections FIX */
.business-sections-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(20,184,166,.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.14), transparent 14rem),
    rgba(255,255,255,.06);
}

.business-sections-panel strong {
  display: block;
  font-weight: 950;
}

.business-sections-panel small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}

.business-sections-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.business-sections-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.business-sections-list span.active {
  color: #fff;
  border-color: rgba(20,184,166,.36);
  background: rgba(20,184,166,.16);
}

.business-sections-list span.off {
  opacity: .45;
  text-decoration: line-through;
}


/* v3.6.2 REAL Business Sections */
.active-business-blueprint {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(20,184,166,.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.18), transparent 18rem),
    radial-gradient(circle at bottom left, rgba(239,68,68,.10), transparent 16rem),
    rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.active-business-blueprint.hidden {
  display: none;
}

.active-business-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}

.active-business-head h2 {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 5.6rem);
  line-height: .82;
  letter-spacing: -.105em;
}

.active-business-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.active-business-sections-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.active-business-section-card {
  min-height: 172px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 12rem),
    rgba(255,255,255,.07);
}

.active-business-section-card.off {
  opacity: .42;
  filter: grayscale(.75);
}

.active-business-section-card span {
  color: var(--accent);
  font-size: .8rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.active-business-section-card strong {
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: -.035em;
}

.active-business-section-card small {
  color: var(--muted);
  line-height: 1.35;
}

.business-mode-badge {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(20,184,166,.30);
  border-radius: 999px;
  background: rgba(20,184,166,.14);
  color: #99f6e4;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .active-business-sections-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .active-business-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .active-business-sections-grid {
    grid-template-columns: 1fr;
  }
}

/* v3.6.3 - color picker feedback: visible selected HEX values */
.color-control-grid .field-card,
.color-field-card {
  gap: 10px;
}

.color-picker-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
}

.color-picker-row input[type="color"] {
  width: 74px;
  height: 52px;
  min-height: 52px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  cursor: pointer;
}

.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-row input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 12px;
}

.color-picker-row input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 12px;
}

.color-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.09);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.color-value.updated {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.color-helper {
  color: var(--muted);
}

.guided-color-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
}

.guided-color-row input[type="color"] {
  width: 70px;
  min-height: 48px;
  padding: 4px;
  border-radius: 14px;
}

.guided-color-row .color-value {
  min-height: 42px;
}


/* v3.6.4 - readable color names */
.color-value {
  min-width: 132px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .color-picker-row,
  .guided-color-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .color-value {
    min-width: 0;
    font-size: .86rem;
  }
}


/* v3.6.5 - style package feedback */
.style-package-info {
  margin: 18px 0 22px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 16px;
  align-items: center;
}

.style-package-info h3 {
  margin: 2px 0 6px;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.style-package-info p {
  margin: 0;
  color: var(--muted);
}

.style-package-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.style-package-chips span {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: .82rem;
  font-weight: 700;
}

@media (max-width: 820px) {
  .style-package-info {
    grid-template-columns: 1fr;
  }

  .style-package-chips {
    justify-content: flex-start;
  }
}


/* v3.6.6 - style package image previews */
.template-card .look-preview-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  background: rgba(255,255,255,.04);
}

/* FIX: immagini reali anche nello step guidato "Scegli look" */
.guided-theme-card .guided-theme-preview-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.guided-theme-card span {
  display: none;
}

/* Palette ampia per lo step guidato Colori atmosfera */
.guided-palette-toggle {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: var(--text, #fff);
  border-radius: 18px;
  padding: 12px 14px;
  font-weight: 950;
  letter-spacing: .04em;
  cursor: pointer;
}
.guided-color-palette {
  display: none;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.24);
}
.guided-color-palette.open {
  display: grid;
}
.guided-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-height: 30px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.26), 0 8px 18px rgba(0,0,0,.18);
  cursor: pointer;
}
.guided-color-swatch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (max-width: 620px) {
  .guided-color-palette { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .guided-color-swatch { min-height: 34px; }
}


/* v3.6.8 - fix desktop controls + horizontal live preview scroll */
.preview-frame-scroll::-webkit-scrollbar { height: 12px; width: 12px; }
.preview-frame-scroll::-webkit-scrollbar-thumb { background: rgba(15,23,42,.45); border-radius: 999px; }
.preview-frame-scroll::-webkit-scrollbar-track { background: rgba(15,23,42,.10); }

@media (max-width: 640px) {
  .stage-actions {
    left: 12px;
    right: 12px;
    bottom: 10px;
    border-radius: 24px;
  }

  .stage-actions .primary-action,
  .stage-actions .secondary-action {
    flex: 1 1 130px;
    min-width: 0;
  }
}

/* v3.6.9 - fix: tutti i comandi in basso completamente visibili su desktop/tablet */
body.generator-page {
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}

.generator-layout {
  padding-bottom: max(168px, calc(128px + env(safe-area-inset-bottom)));
}

.builder-stage {
  min-height: calc(100dvh - 136px);
  padding-bottom: 24px;
}

.stage-actions {
  bottom: max(34px, env(safe-area-inset-bottom));
  margin-bottom: 0;
  align-self: end;
}

.guided-creator-overlay {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.guided-creator-window {
  height: min(820px, calc(100dvh - 56px));
  max-height: calc(100dvh - 56px);
}

.guided-creator-main {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.guided-creator-stage {
  padding-bottom: 28px;
}

.guided-creator-actions {
  position: relative;
  bottom: auto;
  flex-shrink: 0;
  margin: 0 14px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(5,7,12,.92);
  box-shadow: 0 -12px 34px rgba(0,0,0,.28);
}

@media (max-width: 980px) {
  .guided-creator-window {
    height: calc(100dvh - 42px);
    max-height: calc(100dvh - 42px);
  }
}

@media (max-width: 640px) {
  .generator-layout {
    padding-bottom: max(190px, calc(150px + env(safe-area-inset-bottom)));
  }

  .stage-actions {
    bottom: max(28px, env(safe-area-inset-bottom));
    margin-left: 0;
    margin-right: 0;
  }

  .guided-creator-actions {
    margin: 0 10px max(14px, env(safe-area-inset-bottom));
  }
}


/* v3.6.10 - ripristino pulsanti in basso: Indietro / Genera / Avanti */
.stage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stage-actions .primary-action,
.stage-actions .secondary-action {
  flex: 1 1 0;
  min-width: 118px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .stage-actions {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px;
  }

  .stage-actions .primary-action,
  .stage-actions .secondary-action {
    min-width: 0;
    padding-inline: 12px;
  }
}


/* v3.6.11 - ordine richiesto: Avanti / Indietro / Genera anche nel percorso guidato */
.guided-creator-actions #guidedSkipBtn,
.guided-creator-top-actions #guidedTopSkipBtn {
  display: none !important;
}
.guided-creator-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px max(28px, env(safe-area-inset-bottom));
}
.guided-creator-actions .primary-action,
.guided-creator-actions .secondary-action {
  flex: 1 1 0;
  min-width: 118px;
  white-space: nowrap;
}
.guided-creator-top-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stage-actions {
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.preview-frame-scroll {
  overflow-x: auto !important;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}
.preview-frame-scroll iframe {
  min-width: 760px;
}
@media (max-width: 640px) {
  .guided-creator-actions {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 10px max(22px, env(safe-area-inset-bottom));
  }
  .guided-creator-actions .primary-action,
  .guided-creator-actions .secondary-action {
    min-width: 0;
    padding-inline: 10px;
  }
}


/* v3.6.12 - controllo definitivo richiesto: doppio scroll preview + pulsanti corretti */
.generator-layout {
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}

.builder-stage {
  padding-bottom: max(96px, env(safe-area-inset-bottom));
}

.stage-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  margin-bottom: max(22px, env(safe-area-inset-bottom));
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(245, 158, 11, .82);
  background: rgba(5, 7, 12, .92);
  position: sticky;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  overflow: visible !important;
}

.stage-actions #nextStepBtn,
.stage-actions #prevStepBtn {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

.stage-actions #generatePreviewBtn {
  background: #fff !important;
  color: #05070c !important;
  border-color: #fff !important;
}

.stage-actions .primary-action,
.stage-actions .secondary-action {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  white-space: nowrap;
}

.guided-creator-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 14px 18px max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(5,7,12,.96);
  overflow: visible !important;
}

.guided-creator-actions #guidedContinueBtn,
.guided-creator-actions #guidedBackBtn,
.guided-creator-top-actions #guidedTopContinueBtn,
.guided-creator-top-actions #guidedTopBackBtn {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}

.guided-creator-actions #guidedCompleteBtn,
.guided-creator-top-actions #guidedTopCompleteBtn {
  background: #fff !important;
  color: #05070c !important;
  border-color: #fff !important;
}

.guided-creator-actions .primary-action,
.guided-creator-actions .secondary-action,
.guided-creator-top-actions .primary-action,
.guided-creator-top-actions .secondary-action {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  white-space: nowrap;
}

.preview-shell {
  min-height: calc(100vh - 122px);
  overflow: hidden !important;
}

.preview-frame-scroll {
  width: 100%;
  height: 100%;
  min-height: 540px;
  overflow: scroll !important;
  overflow-x: scroll !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable both-edges;
  background: #fff;
}

#previewFrame {
  width: max(1180px, 120%);
  min-width: 1180px;
  height: 1280px;
  min-height: 1280px;
  display: block;
  border: 0;
}

@media (max-width: 1180px) {
  #previewFrame {
    width: 1180px;
    min-width: 1180px;
  }
}

@media (max-width: 640px) {
  .stage-actions,
  .guided-creator-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-inline: 8px;
  }
  .stage-actions .primary-action,
  .stage-actions .secondary-action,
  .guided-creator-actions .primary-action,
  .guided-creator-actions .secondary-action {
    min-height: 48px;
    padding-inline: 8px;
    font-size: .82rem;
  }
}


/* v3.6.13 - FIX DEFINITIVO: pulsanti Avanti / Indietro / Genera sempre visibili anche dentro "Avvia percorso guidato" */
.guided-creator-window {
  height: min(820px, calc(100dvh - 22px)) !important;
  max-height: calc(100dvh - 22px) !important;
  overflow: hidden !important;
}

.guided-creator-main {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 108px !important;
}

.guided-creator-stage {
  height: 100% !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-bottom: 140px !important;
  box-sizing: border-box !important;
}

.guided-creator-actions {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 24px !important;
  background: rgba(5,7,12,.97) !important;
  box-shadow: 0 -18px 44px rgba(0,0,0,.48), 0 0 0 1px rgba(249,115,22,.12) !important;
  backdrop-filter: blur(18px) !important;
  overflow: visible !important;
}

.guided-creator-actions #guidedContinueBtn,
.guided-creator-actions #guidedBackBtn,
.guided-creator-top-actions #guidedTopContinueBtn,
.guided-creator-top-actions #guidedTopBackBtn {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(0,0,0,.22) !important;
}

.guided-creator-actions #guidedCompleteBtn,
.guided-creator-top-actions #guidedTopCompleteBtn {
  background: #ffffff !important;
  color: #05070c !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 18px 46px rgba(255,255,255,.18) !important;
}

.guided-creator-actions #guidedSkipBtn {
  display: none !important;
}

.guided-creator-actions .primary-action,
.guided-creator-actions .secondary-action {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .guided-creator-window {
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .guided-creator-main {
    padding-bottom: 112px !important;
  }
  .guided-creator-actions {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  .guided-creator-actions {
    grid-template-columns: 1fr !important;
  }
  .guided-creator-main {
    padding-bottom: 216px !important;
  }
  .guided-creator-stage {
    padding-bottom: 238px !important;
  }
}

/* v3.6.14 - FIX REALE PERCORSO GUIDATO: barra Avanti / Indietro / Genera sempre agganciata in basso anche dopo scelta preset */
body.guided-creator-open {
  overflow: hidden !important;
}

.guided-creator-overlay:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-window {
  position: relative !important;
  width: min(1320px, calc(100vw - 20px)) !important;
  height: calc(100dvh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-main {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 126px !important;
  box-sizing: border-box !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-stage {
  height: 100% !important;
  max-height: 100% !important;
  overflow: auto !important;
  padding-bottom: 170px !important;
  box-sizing: border-box !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-actions {
  position: fixed !important;
  z-index: 10050 !important;
  left: max(18px, calc((100vw - min(1320px, calc(100vw - 20px))) / 2 + 350px)) !important;
  right: max(18px, calc((100vw - min(1320px, calc(100vw - 20px))) / 2 + 18px)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(245, 158, 11, .55) !important;
  border-radius: 22px !important;
  background: rgba(5,7,12,.985) !important;
  box-shadow: 0 -18px 50px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) !important;
  overflow: visible !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedContinueBtn { order: 1 !important; }
.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedBackBtn { order: 2 !important; }
.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedCompleteBtn { order: 3 !important; }
.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedSkipBtn { display: none !important; }

.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedContinueBtn,
.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedBackBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 18px !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-actions #guidedCompleteBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  background: #fff !important;
  color: #05070c !important;
  border: 1px solid #fff !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 34px rgba(255,255,255,.18) !important;
}

.guided-creator-overlay:not(.hidden) .guided-creator-top-actions {
  display: none !important;
}

@media (max-width: 980px) {
  .guided-creator-overlay:not(.hidden) .guided-creator-actions {
    left: 16px !important;
    right: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-main {
    padding-bottom: 132px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-stage {
    padding-bottom: 185px !important;
  }
}

@media (max-width: 560px) {
  .guided-creator-overlay:not(.hidden) .guided-creator-actions {
    grid-template-columns: 1fr !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-main {
    padding-bottom: 236px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-stage {
    padding-bottom: 270px !important;
  }
}

/* v3.6.15 - pulsanti percorso guidato: 01 solo Avanti, 02-12 tre tasti, 13 Export solo Indietro/Genera */
.guided-creator-actions:has(#guidedBackBtn[style*="none"]):not(:has(#guidedCompleteBtn[style*="inline-flex"])) {
  grid-template-columns: 1fr !important;
}
.guided-creator-actions:has(#guidedContinueBtn[style*="none"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.guided-creator-actions.guided-actions-first {
  grid-template-columns: 1fr !important;
}
.guided-creator-actions.guided-actions-export {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.guided-creator-actions.guided-actions-middle {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}


/* v3.6.17 BUSINESS STRUCTURE */
.business-structure-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(20,184,166,.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.18), transparent 18rem),
    radial-gradient(circle at bottom left, rgba(239,68,68,.10), transparent 16rem),
    rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.business-structure-panel.hidden {
  display: none;
}

.business-structure-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}

.business-structure-head h2 {
  margin: 0;
  font-size: clamp(2rem, 5.2vw, 5.4rem);
  line-height: .82;
  letter-spacing: -.105em;
}

.business-structure-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.business-structure-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.business-structure-card {
  min-height: 164px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.10), transparent 12rem),
    rgba(255,255,255,.07);
}

.business-structure-card.off {
  opacity: .38;
  filter: grayscale(.7);
}

.business-structure-card span {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.business-structure-card strong {
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: -.035em;
}

.business-structure-card small {
  color: var(--muted);
  line-height: 1.35;
}

.business-mode-badge {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(20,184,166,.30);
  border-radius: 999px;
  background: rgba(20,184,166,.14);
  color: #99f6e4;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .business-structure-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .business-structure-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .business-structure-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.6.18 BUSINESS DEEP CUSTOMIZATION */
.business-deep-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(249,115,22,.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.18), transparent 18rem),
    radial-gradient(circle at bottom left, rgba(20,184,166,.10), transparent 16rem),
    rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.business-deep-panel.hidden {
  display: none;
}

.business-deep-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}

.business-deep-head h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 5.2rem);
  line-height: .82;
  letter-spacing: -.105em;
}

.business-deep-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.business-deep-sections {
  display: grid;
  gap: 14px;
}

.business-deep-section {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.business-deep-section > summary {
  cursor: pointer;
  padding: 16px;
  list-style: none;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
}

.business-deep-section > summary::-webkit-details-marker {
  display: none;
}

.business-deep-section-number {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(249,115,22,.18);
  color: #fed7aa;
  font-weight: 950;
  font-size: .78rem;
}

.business-deep-section-title {
  display: grid;
  gap: 3px;
}

.business-deep-section-title strong {
  font-weight: 950;
}

.business-deep-section-title small {
  color: var(--muted);
  line-height: 1.35;
}

.business-deep-section-status {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.business-deep-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.business-deep-field {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
}

.business-deep-field.full {
  grid-column: 1 / -1;
}

.business-deep-field label {
  font-weight: 950;
}

.business-deep-field small {
  color: var(--muted);
  line-height: 1.35;
}

.business-deep-field input,
.business-deep-field textarea,
.business-deep-field select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.34);
  color: #fff;
  padding: 11px;
}

.business-deep-field textarea {
  min-height: 105px;
  resize: vertical;
}

.business-deep-preview-note {
  padding: 12px 14px;
  border: 1px solid rgba(20,184,166,.24);
  border-radius: 18px;
  background: rgba(20,184,166,.10);
  color: #99f6e4;
  line-height: 1.45;
  font-weight: 800;
}

@media (max-width: 980px) {
  .business-deep-head {
    grid-template-columns: 1fr;
  }

  .business-deep-fields {
    grid-template-columns: 1fr;
  }

  .business-deep-section > summary {
    grid-template-columns: 36px 1fr;
  }

  .business-deep-section-status {
    grid-column: 2;
  }
}


/* v3.6.18.1 SPECIFIC GUIDED FLOW FIX */
.business-specific-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: grid;
  place-items: center;
  padding: 8px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 14% 8%, rgba(249,115,22,.28), transparent 30rem),
    radial-gradient(circle at 86% 82%, rgba(20,184,166,.16), transparent 26rem),
    rgba(5,7,12,.82);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.business-specific-guide-overlay.hidden {
  display: none;
}

.business-specific-guide-window {
  position: relative;
  width: min(1260px, calc(100vw - 16px));
  height: min(840px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background:
    radial-gradient(circle at 72% 18%, rgba(249,115,22,.18), transparent 24rem),
    #05070c;
  box-shadow: 0 44px 140px rgba(0,0,0,.58);
  overflow: hidden;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  animation: guidedWindowIn .35s cubic-bezier(.16,1,.3,1) both;
}

.business-specific-guide-side {
  padding: 30px 24px;
  border-right: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at top left, rgba(249,115,22,.12), transparent 18rem),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.business-specific-guide-side h2 {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 3.35rem);
  line-height: .85;
  letter-spacing: -.095em;
}

.business-specific-guide-side > p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.business-specific-guide-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.business-specific-guide-stage {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 34px 38px 104px;
}

.business-specific-section-card {
  display: grid;
  gap: 24px;
  min-height: auto;
  animation: guidedSectionIn .42s cubic-bezier(.16,1,.3,1) both;
}

.business-specific-section-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
}

.business-specific-section-copy {
  display: grid;
  gap: 14px;
}

.business-specific-section-number {
  display: inline-flex;
  width: fit-content;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.business-specific-section-copy h3 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3rem, 7.5vw, 8rem);
  line-height: .76;
  letter-spacing: -.13em;
}

.business-specific-section-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.business-specific-section-big-number {
  font-size: clamp(7rem, 20vw, 20rem);
  line-height: .7;
  letter-spacing: -.14em;
  font-weight: 950;
  color: rgba(255,255,255,.08);
  pointer-events: none;
}

.business-specific-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.business-specific-field {
  display: grid;
  gap: 8px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(255,255,255,.07);
}

.business-specific-field.full {
  grid-column: 1 / -1;
}

.business-specific-field label {
  font-weight: 950;
}

.business-specific-field small {
  color: var(--muted);
  line-height: 1.4;
}

.business-specific-field input,
.business-specific-field textarea,
.business-specific-field select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(0,0,0,.34);
  color: #fff;
  padding: 16px 18px;
  min-height: 58px;
  font-size: 1.05rem;
}

.business-specific-field textarea {
  min-height: 126px;
  resize: vertical;
}

.business-specific-note {
  padding: 14px 16px;
  border: 1px solid rgba(249,115,22,.25);
  border-radius: 18px;
  background: rgba(249,115,22,.10);
  color: #fed7aa;
  line-height: 1.45;
  font-weight: 800;
}

@supports (height: 100svh) {
  .business-specific-guide-overlay {
    min-height: 100svh;
  }

  .business-specific-guide-window {
    height: min(840px, calc(100svh - 16px));
    max-height: calc(100svh - 16px);
  }
}

@media (max-width: 980px) {
  .business-specific-guide-window {
    grid-template-columns: 1fr;
  }

  .business-specific-guide-side {
    display: none;
  }

  .business-specific-section-hero,
  .business-specific-fields {
    grid-template-columns: 1fr;
  }

  .business-specific-section-big-number {
    display: none;
  }

  .business-specific-guide-stage {
    padding: 24px 16px 112px;
  }
}


/* v3.6.19 SPECIFIC GUIDE PLUS */
.business-specific-checklist {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.business-specific-checklist strong {
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.business-specific-checklist span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.business-specific-checklist span.done {
  color: #99f6e4;
}

.business-specific-checklist span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}

.business-specific-checklist span.done::before {
  background: #14b8a6;
}

.business-specific-field .field-assist {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}

.business-specific-field .field-assist button {
  width: fit-content;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 7px 10px;
  font-size: .78rem;
  font-weight: 900;
}

.business-specific-field .field-assist em {
  color: rgba(255,255,255,.50);
  font-size: .78rem;
  line-height: 1.35;
  font-style: normal;
}

.business-specific-live-summary {
  position: sticky;
  bottom: 78px;
  z-index: 5;
  margin: 0 38px 18px;
  padding: 13px 15px;
  border: 1px solid rgba(20,184,166,.28);
  border-radius: 18px;
  background: rgba(5,7,12,.88);
  backdrop-filter: blur(16px);
  color: #ccfbf1;
  font-size: .88rem;
  line-height: 1.45;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.business-specific-live-summary.hidden {
  display: none;
}

.business-specific-quality {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(20,184,166,.25);
  border-radius: 18px;
  background: rgba(20,184,166,.10);
}

.business-specific-quality strong {
  color: #99f6e4;
}

.business-specific-quality ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.business-specific-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.business-specific-mode-row button {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 8px 11px;
  font-weight: 900;
  font-size: .8rem;
}

.business-specific-mode-row button.active {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 980px) {
  .business-specific-live-summary {
    margin: 0 16px 14px;
    bottom: 96px;
  }
}


/* v3.6.21 SECTOR LAYOUTS */
.sector-layout-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(99,102,241,.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.18), transparent 18rem),
    radial-gradient(circle at bottom left, rgba(20,184,166,.10), transparent 16rem),
    rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.sector-layout-panel.hidden {
  display: none;
}

.sector-layout-panel h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.105em;
}

.sector-layout-panel p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.sector-layout-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sector-layout-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.sector-layout-chips span.active {
  color: #fff;
  border-color: rgba(99,102,241,.44);
  background: rgba(99,102,241,.20);
}


/* v3.6.21.1 SECTOR LAYOUT EDITABLE FIX */
.sector-layout-panel h2 {
  letter-spacing: -.075em;
  word-spacing: .02em;
  overflow-wrap: anywhere;
}

.sector-layout-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 2px;
}

.sector-layout-choice {
  min-height: 102px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.14), transparent 11rem),
    rgba(255,255,255,.06);
  color: #fff;
  text-align: left;
  padding: 13px;
  display: grid;
  gap: 7px;
  align-content: start;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.sector-layout-choice:hover,
.sector-layout-choice.active {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,.58);
  background: rgba(99,102,241,.16);
}

.sector-layout-choice strong {
  font-weight: 950;
  letter-spacing: -.03em;
}

.sector-layout-choice small {
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 980px) {
  .sector-layout-choices {
    grid-template-columns: 1fr;
  }
}


/* v3.6.22 SAVE / IMPORT PROJECT */
.project-actions-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(20,184,166,.28);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.14), transparent 14rem),
    rgba(255,255,255,.06);
}

.project-actions-panel strong {
  display: block;
  font-weight: 950;
}

.project-actions-panel small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-status {
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.project-status.ok {
  color: #99f6e4;
  border-color: rgba(20,184,166,.28);
  background: rgba(20,184,166,.10);
}

.project-status.warn {
  color: #fed7aa;
  border-color: rgba(249,115,22,.28);
  background: rgba(249,115,22,.10);
}

.danger-action {
  border-color: rgba(239,68,68,.36) !important;
  color: #fecaca !important;
}

@media (max-width: 760px) {
  .project-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* v3.6.23 UX / COMMERCIAL POLISH */
:root {
  --polish-border: rgba(255,255,255,.13);
  --polish-glow: 0 28px 90px rgba(0,0,0,.24);
}

button,
input,
textarea,
select {
  scroll-margin-top: 120px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(20,184,166,.45);
  outline-offset: 3px;
}

.primary-action,
.secondary-action,
.template-card,
.business-preset-card,
.sector-layout-choice,
.business-specific-field,
.business-deep-field,
.field-card,
.toggle-scene {
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.primary-action:hover,
.secondary-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.field-card:focus-within,
.business-specific-field:focus-within,
.business-deep-field:focus-within {
  border-color: rgba(20,184,166,.42);
  box-shadow: 0 0 0 4px rgba(20,184,166,.08);
}

.product-polish-panel {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(300px, 1fr);
  grid-template-areas:
    "copy checklist"
    "score checklist";
  gap: 18px 22px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(20,184,166,.30);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.18), transparent 18rem),
    radial-gradient(circle at bottom right, rgba(99,102,241,.12), transparent 17rem),
    rgba(255,255,255,.07);
  box-shadow: var(--polish-glow);
}

.product-polish-copy {
  grid-area: copy;
  min-width: 0;
}

.product-polish-copy h2 {
  margin: 0;
  font-size: clamp(2.6rem, 5.4vw, 5.8rem);
  line-height: .84;
  letter-spacing: -.095em;
  max-width: 560px;
}

.product-polish-copy p:not(.kicker) {
  margin: 18px 0 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 430px;
  font-size: clamp(.96rem, 1.4vw, 1.08rem);
}

.product-polish-score {
  grid-area: score;
  width: min(250px, 100%);
  min-height: 158px;
  border: 1px solid rgba(20,184,166,.30);
  border-radius: 24px;
  background: rgba(0,0,0,.22);
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: start;
  gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.product-polish-score strong {
  font-size: clamp(3.8rem, 7.5vw, 6rem);
  letter-spacing: -.08em;
  line-height: .82;
  color: #99f6e4;
  white-space: nowrap;
}

.product-polish-score span {
  color: rgba(248,250,252,.78);
  font-weight: 900;
  font-size: .96rem;
  text-transform: lowercase;
}

.product-polish-checklist {
  grid-area: checklist;
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.16);
}

.product-polish-item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
}

.product-polish-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
}

.product-polish-item.done {
  color: #ccfbf1;
  border-color: rgba(20,184,166,.24);
  background: rgba(20,184,166,.08);
}

.product-polish-item.done::before {
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}

.product-polish-item small {
  color: inherit;
  opacity: .78;
  white-space: nowrap;
}

.app-toast-host {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 520;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.app-toast {
  min-width: min(360px, calc(100vw - 36px));
  max-width: 440px;
  padding: 13px 15px;
  border: 1px solid rgba(20,184,166,.32);
  border-radius: 18px;
  background: rgba(5,7,12,.92);
  color: #ecfeff;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
  font-weight: 850;
  line-height: 1.4;
  animation: toastIn .24s ease both;
}

.app-toast.warn {
  border-color: rgba(249,115,22,.40);
  color: #fed7aa;
}

.app-toast.error {
  border-color: rgba(239,68,68,.42);
  color: #fecaca;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Tablet/mobile polish */
@media (max-width: 1180px) {
  .product-polish-panel {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "score"
      "checklist";
  }

  .product-polish-score {
    min-height: 132px;
  }

  .product-polish-checklist {
    padding-left: 0;
    border-left: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.16);
  }
}

@media (max-width: 860px) {
  .generator-shell,
  .builder-layout,
  .main-builder,
  .control-panel,
  .preview-shell {
    min-width: 0;
  }

  .rail-step {
    min-height: 44px;
  }

  .export-actions,
  .project-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .app-toast-host {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .app-toast {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .product-polish-copy h2,
  .sector-layout-panel h2,
  .business-deep-head h2,
  .business-structure-head h2 {
    letter-spacing: -.07em;
  }

  .business-specific-guide-stage,
  .guided-creator-stage {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* v3.6.23.1 FIX GUIDED BUTTONS */
.guided-creator-actions,
.guided-creator-top-actions {
  position: relative;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.guided-creator-actions button,
.guided-creator-top-actions button {
  pointer-events: auto !important;
  visibility: visible !important;
}

.guided-creator-window {
  position: relative;
  z-index: 341;
}

.app-toast-host {
  pointer-events: none !important;
}


/* v3.6.24 STABILITY / QA RELEASE */
.qa-stability-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(99,102,241,.30);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.15), transparent 14rem),
    rgba(255,255,255,.06);
}

.qa-stability-panel strong {
  display: block;
  font-weight: 950;
}

.qa-stability-panel small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

.qa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.qa-stability-results {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
  max-height: 260px;
  overflow: auto;
}

.qa-stability-results .qa-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.qa-stability-results .qa-row::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.20);
}

.qa-stability-results .qa-row.pass {
  color: #ccfbf1;
}

.qa-stability-results .qa-row.pass::before {
  background: #14b8a6;
}

.qa-stability-results .qa-row.warn {
  color: #fed7aa;
}

.qa-stability-results .qa-row.warn::before {
  background: #f97316;
}

.qa-stability-results .qa-row.fail {
  color: #fecaca;
}

.qa-stability-results .qa-row.fail::before {
  background: #ef4444;
}

.qa-stability-results code {
  color: inherit;
  opacity: .78;
  font-size: .78rem;
}

.guided-creator-overlay,
.business-specific-guide-overlay {
  touch-action: manipulation;
}

.guided-creator-actions,
.guided-creator-top-actions,
.business-specific-guide-main .guided-creator-actions,
.business-specific-guide-main .guided-creator-top-actions {
  isolation: isolate;
}

@media (max-width: 760px) {
  .qa-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qa-stability-results .qa-row {
    grid-template-columns: 14px 1fr;
  }

  .qa-stability-results .qa-row code {
    grid-column: 2;
  }
}


/* v3.6.24.1 FIX GUIDED OPEN */
.guided-creator-overlay:not(.hidden) .guided-creator-actions,
.guided-creator-overlay:not(.hidden) .guided-creator-top-actions {
  pointer-events: auto !important;
  z-index: 1200 !important;
}


/* v3.6.25 DEMO / SAMPLE PROJECTS */
.sample-projects-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(244,114,182,.32);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(244,114,182,.16), transparent 18rem),
    radial-gradient(circle at bottom right, rgba(20,184,166,.10), transparent 17rem),
    rgba(255,255,255,.07);
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.sample-projects-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
}

.sample-projects-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.sample-projects-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 800px;
  color: var(--muted);
  line-height: 1.55;
}

.sample-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.sample-project-card {
  min-height: 190px;
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.11), transparent 12rem),
    rgba(255,255,255,.06);
  color: #fff;
  padding: 16px;
  display: grid;
  align-content: end;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.sample-project-card:hover,
.sample-project-card.active {
  transform: translateY(-2px);
  border-color: rgba(244,114,182,.52);
  background: rgba(244,114,182,.12);
  box-shadow: 0 18px 54px rgba(0,0,0,.24);
}

.sample-project-card span {
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sample-project-card strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.sample-project-card small {
  color: var(--muted);
  line-height: 1.35;
}

.sample-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sample-project-tags em {
  font-style: normal;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

@media (max-width: 1180px) {
  .sample-projects-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .sample-projects-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .sample-projects-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.6.25.1 FIX SAMPLE PANEL VISIBLE */
.sample-projects-panel-inline {
  margin: 18px 0 22px;
}

.guided-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.sample-projects-panel-inline .sample-projects-head h2 {
  font-size: clamp(1.9rem, 4vw, 4.1rem);
  letter-spacing: -.08em;
}

.sample-projects-panel-inline .sample-projects-grid {
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.sample-projects-panel-inline .sample-project-card {
  min-height: 150px;
}

@media (max-width: 1180px) {
  .sample-projects-panel-inline .sample-projects-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .guided-launch-actions,
  .sample-projects-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sample-projects-panel-inline .sample-projects-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.6.26 SHOWCASE / ESEMPI SITI */
.examples-showcase-overlay {
  position: fixed;
  inset: 0;
  z-index: 560;
  display: grid;
  place-items: center;
  padding: 12px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 12%, rgba(244,114,182,.22), transparent 30rem),
    radial-gradient(circle at 86% 78%, rgba(20,184,166,.18), transparent 28rem),
    rgba(5,7,12,.86);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

.examples-showcase-overlay.hidden {
  display: none;
}

.examples-showcase-window {
  position: relative;
  width: min(1320px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background:
    radial-gradient(circle at 70% 10%, rgba(244,114,182,.14), transparent 28rem),
    #05070c;
  box-shadow: 0 44px 140px rgba(0,0,0,.58);
  padding: 30px;
}

.examples-showcase-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
}

.examples-showcase-head h2 {
  margin: 0;
  max-width: 950px;
  font-size: clamp(2.4rem, 6vw, 6.8rem);
  line-height: .78;
  letter-spacing: -.115em;
}

.examples-showcase-head p:not(.kicker) {
  max-width: 820px;
  color: var(--muted);
  line-height: 1.55;
  margin: 10px 0 0;
}

.examples-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.example-site-card {
  min-height: 420px;
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  color: #fff;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  display: grid;
  grid-template-rows: 190px 1fr;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.example-site-card:hover,
.example-site-card.active {
  transform: translateY(-3px);
  border-color: rgba(244,114,182,.56);
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
}

.example-site-preview {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 28%, var(--ex-a, #f97316), transparent 24%),
    radial-gradient(circle at 20% 70%, var(--ex-b, #14b8a6), transparent 26%),
    linear-gradient(135deg, #0b0d13, #181923);
}

.example-site-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(0,0,0,.20);
}

.example-site-preview::after {
  content: "";
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 34px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  box-shadow:
    0 -34px 0 rgba(255,255,255,.16),
    0 -68px 0 rgba(255,255,255,.10);
}

.example-site-mini-title {
  position: absolute;
  left: 36px;
  top: 34px;
  right: 36px;
  z-index: 2;
  display: grid;
  gap: 8px;
}

.example-site-mini-title strong {
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -.05em;
}

.example-site-mini-title span {
  width: 48%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
}

.example-site-content {
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.example-site-content > span {
  color: var(--accent);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.example-site-content strong {
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -.04em;
}

.example-site-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.42;
  font-size: .92rem;
}

.example-site-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.example-site-tags em {
  font-style: normal;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}

.examples-showcase-note {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(20,184,166,.25);
  border-radius: 20px;
  background: rgba(20,184,166,.09);
  color: #ccfbf1;
  line-height: 1.45;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .examples-showcase-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .examples-showcase-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .examples-showcase-window {
    padding: 18px;
    border-radius: 26px;
  }
  .examples-showcase-grid {
    grid-template-columns: 1fr;
  }
  .example-site-card {
    min-height: 360px;
  }
}


/* v3.6.26.1 LANDING EXAMPLES SHOWCASE */
.site-examples-section {
  position: relative;
}

.landing-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

.landing-example-card {
  cursor: pointer;
  text-align: left;
  min-height: 310px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 165px 1fr;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.landing-example-card:hover,
.landing-example-card.active {
  transform: translateY(-3px);
  border-color: rgba(249,115,22,.48);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.landing-example-preview {
  position: relative;
  display: block;
  background:
    radial-gradient(circle at 70% 30%, var(--ex1, #f97316), transparent 24%),
    radial-gradient(circle at 18% 74%, var(--ex2, #14b8a6), transparent 28%),
    linear-gradient(135deg, #0a0b10, #1b1c25);
}

.landing-example-preview::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: rgba(0,0,0,.20);
}

.landing-example-preview::after {
  content: "";
  position: absolute;
  left: 42px;
  right: 42px;
  bottom: 42px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
  box-shadow: 0 -30px 0 rgba(255,255,255,.15), 0 -60px 0 rgba(255,255,255,.09);
}

.landing-example-preview.warm { --ex1:#f97316; --ex2:#f43f5e; }
.landing-example-preview.teal { --ex1:#14b8a6; --ex2:#38bdf8; }
.landing-example-preview.green { --ex1:#22c55e; --ex2:#fbbf24; }
.landing-example-preview.gold { --ex1:#f59e0b; --ex2:#a78bfa; }
.landing-example-preview.cyan { --ex1:#06b6d4; --ex2:#f43f5e; }
.landing-example-preview.violet { --ex1:#a78bfa; --ex2:#f59e0b; }

.landing-example-card strong,
.landing-example-card small {
  margin: 0 18px;
}

.landing-example-card strong {
  display: block;
  align-self: end;
  font-size: 1.22rem;
  line-height: 1;
  letter-spacing: -.04em;
  margin-top: 18px;
}

.landing-example-card small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 18px;
}

.landing-example-overlay {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: grid;
  place-items: center;
  padding: 12px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 15% 15%, rgba(249,115,22,.20), transparent 32rem),
    radial-gradient(circle at 84% 78%, rgba(20,184,166,.16), transparent 28rem),
    rgba(5,7,12,.88);
  backdrop-filter: blur(20px);
}

.landing-example-overlay.hidden {
  display: none;
}

.landing-example-window {
  position: relative;
  width: min(1260px, calc(100vw - 24px));
  height: min(820px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background: #05070c;
  box-shadow: 0 44px 140px rgba(0,0,0,.58);
}

.landing-example-detail {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  min-height: 100%;
}

.landing-example-screen {
  padding: 28px;
  background:
    radial-gradient(circle at 64% 20%, var(--detail-a, #f97316), transparent 22rem),
    radial-gradient(circle at 20% 82%, var(--detail-b, #14b8a6), transparent 20rem),
    linear-gradient(135deg, #08090f, #12131c);
}

.landing-example-screen .device-top {
  border-radius: 22px 22px 0 0;
}

.landing-example-screen-body {
  min-height: 570px;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  padding: 44px;
  background: rgba(0,0,0,.26);
  display: grid;
  align-content: end;
  gap: 18px;
}

.landing-example-screen-body > p:first-child {
  color: var(--accent);
  font-size: .8rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0;
}

.landing-example-screen-body h2 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: .78;
  letter-spacing: -.12em;
}

.landing-example-screen-body > p {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.landing-example-mock-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.landing-example-mock-sections span {
  min-height: 84px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  padding: 12px;
  color: rgba(255,255,255,.76);
  font-weight: 900;
  font-size: .82rem;
}

.landing-example-info {
  padding: 34px;
  border-left: 1px solid rgba(255,255,255,.10);
  display: grid;
  align-content: start;
  gap: 16px;
}

.landing-example-info h3 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: .84;
  letter-spacing: -.095em;
}

.landing-example-info p:not(.kicker) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.landing-example-tags,
.landing-example-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.landing-example-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.landing-example-sections {
  display: grid;
  gap: 8px;
}

.landing-example-sections article {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: #fff;
}

.landing-example-sections strong {
  display: block;
}

.landing-example-sections small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .landing-examples-grid,
  .landing-example-detail,
  .landing-example-mock-sections {
    grid-template-columns: 1fr;
  }

  .landing-example-info {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

@media (max-width: 680px) {
  .landing-examples-grid {
    grid-template-columns: 1fr;
  }

  .landing-example-screen,
  .landing-example-info {
    padding: 18px;
  }

  .landing-example-screen-body {
    min-height: 420px;
    padding: 24px;
  }
}


/* v3.6.26.2 EXAMPLES FULL PREVIEW */
.landing-example-card {
  grid-template-rows: 190px 1fr;
}

.landing-example-preview {
  overflow: hidden;
}

.landing-example-preview i,
.landing-example-preview b,
.landing-example-preview em {
  position: absolute;
  z-index: 2;
  font-style: normal;
}

.landing-example-preview i {
  left: 28px;
  top: 24px;
  color: var(--ex1, #f97316);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.landing-example-preview b {
  left: 28px;
  right: 28px;
  bottom: 58px;
  color: #fff;
  font-size: 2.2rem;
  line-height: .82;
  letter-spacing: -.11em;
}

.landing-example-preview em {
  width: 26%;
  height: 46px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  bottom: 18px;
}

.landing-example-preview em:nth-of-type(1) { left: 28px; }
.landing-example-preview em:nth-of-type(2) { left: calc(37%); }
.landing-example-preview em:nth-of-type(3) { right: 28px; }

.landing-example-window-full {
  width: min(1380px, calc(100vw - 24px));
}

.landing-example-full-layout {
  display: grid;
  grid-template-columns: 360px minmax(0,1fr);
  min-height: 100%;
}

.landing-example-full-layout .landing-example-info {
  order: 1;
  border-left: 0;
  border-right: 1px solid rgba(255,255,255,.10);
}

.landing-example-live-site-wrap {
  order: 2;
  padding: 24px;
  min-width: 0;
  background:
    radial-gradient(circle at 70% 18%, var(--detail-a, #f97316), transparent 24rem),
    radial-gradient(circle at 15% 85%, var(--detail-b, #14b8a6), transparent 20rem),
    linear-gradient(135deg, #08090f, #12131c);
}

.landing-example-live-site-wrap .device-top {
  border-radius: 22px 22px 0 0;
}

.landing-example-full-site {
  height: min(700px, calc(100dvh - 150px));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.14);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background: rgba(5,7,12,.84);
  color: #fff;
  scroll-behavior: smooth;
}

.demo-site-nav,
.demo-site-hero,
.demo-site-section,
.demo-site-cta {
  padding: clamp(22px, 4vw, 52px);
}

.demo-site-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 18px;
  padding-bottom: 18px;
  background: rgba(5,7,12,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.demo-site-nav strong {
  font-size: 1.05rem;
}

.demo-site-nav span {
  color: var(--detail-a, #f97316);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.demo-site-hero {
  min-height: 420px;
  display: grid;
  align-content: end;
  gap: 18px;
  background:
    radial-gradient(circle at 76% 30%, color-mix(in srgb, var(--detail-a, #f97316) 58%, transparent), transparent 20rem),
    radial-gradient(circle at 18% 72%, color-mix(in srgb, var(--detail-b, #14b8a6) 35%, transparent), transparent 18rem);
}

.demo-site-hero p:first-child,
.demo-site-section > p:first-child,
.demo-site-cta p:first-child {
  margin: 0;
  color: var(--detail-a, #f97316);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.demo-site-hero h2 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(3rem, 8vw, 7.4rem);
  line-height: .78;
  letter-spacing: -.12em;
}

.demo-site-hero p {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.demo-site-button {
  display: inline-flex;
  width: fit-content;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  background: #fff;
  color: #05070c;
  font-weight: 950;
}

.demo-site-section {
  border-top: 1px solid rgba(255,255,255,.10);
}

.demo-site-section h3,
.demo-site-cta h3 {
  margin: 6px 0 20px;
  max-width: 740px;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: .82;
  letter-spacing: -.10em;
}

.demo-card-grid,
.demo-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.demo-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.demo-card,
.demo-menu,
.demo-info {
  min-height: 150px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 8px;
}

.demo-card span,
.demo-menu span,
.demo-info span {
  color: var(--detail-a, #f97316);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-card strong,
.demo-menu strong,
.demo-info strong {
  font-size: 1.18rem;
  line-height: 1.05;
}

.demo-card small,
.demo-menu small,
.demo-info small {
  color: rgba(255,255,255,.60);
  line-height: 1.35;
}

.demo-timeline {
  display: grid;
  gap: 10px;
}

.demo-timeline article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.065);
  padding: 14px;
}

.demo-timeline span {
  color: var(--detail-a, #f97316);
  font-weight: 950;
}

.demo-timeline p {
  margin: 0;
  color: rgba(255,255,255,.70);
}

.demo-site-cta {
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 84% 20%, color-mix(in srgb, var(--detail-a, #f97316) 26%, transparent), transparent 18rem),
    rgba(255,255,255,.045);
}

@media (max-width: 980px) {
  .landing-example-full-layout {
    grid-template-columns: 1fr;
  }

  .landing-example-full-layout .landing-example-info {
    order: 2;
    border-right: 0;
    border-top: 1px solid rgba(255,255,255,.10);
  }

  .landing-example-live-site-wrap {
    order: 1;
  }

  .demo-card-grid,
  .demo-info-grid,
  .demo-menu-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .landing-example-live-site-wrap {
    padding: 12px;
  }

  .landing-example-full-site {
    height: min(620px, calc(100dvh - 110px));
  }

  .demo-site-nav,
  .demo-site-hero,
  .demo-site-section,
  .demo-site-cta {
    padding: 22px;
  }

  .demo-site-hero h2 {
    font-size: clamp(3.1rem, 18vw, 5rem);
  }
}


/* v3.6.26.3 EXAMPLES POLISH / DIRECT LOAD */
.landing-example-preview.image-preview {
  background: #07080d;
}

.landing-example-preview.image-preview::before,
.landing-example-preview.image-preview::after {
  display: none;
}

.landing-example-preview.image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .22s ease, filter .22s ease;
}

.landing-example-card:hover .landing-example-preview.image-preview img,
.landing-example-card.active .landing-example-preview.image-preview img {
  transform: scale(1.045);
  filter: saturate(1.12) contrast(1.06);
}

.landing-example-card strong {
  margin-top: 16px;
}

.landing-example-card small {
  margin-bottom: 20px;
}


/* v3.6.28 LANDING COMMERCIALE */
.commercial-landing-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(249,115,22,.16), transparent 30rem),
    radial-gradient(circle at 86% 28%, rgba(20,184,166,.12), transparent 28rem),
    #05070c;
}

.commercial-top-nav nav { gap: 18px; }
.commercial-hero { min-height: 92vh; align-items: center; }

.commercial-copy h1 {
  max-width: 980px;
  font-size: clamp(4.2rem, 10vw, 12rem);
  line-height: .74;
  letter-spacing: -.135em;
}

.commercial-copy > p:not(.kicker) {
  max-width: 760px;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.commercial-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.commercial-trust-row span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.commercial-screen {
  display: grid;
  align-content: end;
  gap: 16px;
  padding: 28px;
}

.commercial-mini-site {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.commercial-mini-site article {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  padding: 14px;
}

.commercial-mini-site strong { display: block; color: #fff; }
.commercial-mini-site small { display: block; margin-top: 4px; color: rgba(255,255,255,.58); }

.commercial-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  padding-top: 28px;
  padding-bottom: 28px;
}

.commercial-proof-strip article,
.commercial-step-grid article,
.comparison-grid article,
.pricing-grid article,
.faq-commercial-grid article {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background: rgba(255,255,255,.06);
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.commercial-proof-strip article {
  min-height: 150px;
  display: grid;
  align-content: end;
}

.commercial-proof-strip strong {
  font-size: clamp(2.4rem, 5vw, 5rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.commercial-proof-strip span {
  margin-top: 10px;
  color: var(--muted);
  font-weight: 850;
}

.commercial-step-grid,
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.pricing-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

.commercial-step-grid span,
.pricing-grid span {
  display: inline-flex;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.commercial-step-grid h3,
.comparison-grid h3,
.pricing-grid h3 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 3.2rem);
  line-height: .86;
  letter-spacing: -.08em;
}

.commercial-step-grid p,
.comparison-grid li,
.pricing-grid p,
.faq-commercial-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.commercial-examples {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.commercial-target-grid article { min-height: 280px; }

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.comparison-grid article.highlight {
  border-color: rgba(20,184,166,.34);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 16rem),
    rgba(20,184,166,.06);
}

.comparison-grid ul { margin: 0; padding-left: 20px; }
.comparison-grid li + li { margin-top: 10px; }

.pricing-grid article {
  min-height: 320px;
  display: grid;
  align-content: space-between;
  gap: 20px;
}

.pricing-grid article.featured {
  border-color: rgba(249,115,22,.44);
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.18), transparent 18rem),
    rgba(255,255,255,.07);
  transform: translateY(-8px);
}

.faq-commercial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.faq-commercial-grid strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.commercial-final-cta .hero-actions { justify-content: center; }

@media (max-width: 1080px) {
  .commercial-proof-strip,
  .commercial-step-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .commercial-copy h1 { letter-spacing: -.105em; }
}

@media (max-width: 760px) {
  .commercial-top-nav nav { gap: 10px; }
  .commercial-proof-strip,
  .commercial-step-grid,
  .comparison-grid,
  .pricing-grid,
  .faq-commercial-grid {
    grid-template-columns: 1fr;
  }
  .pricing-grid article.featured { transform: none; }
  .commercial-copy h1 { font-size: clamp(3.8rem, 18vw, 6rem); }
}


/* v3.7.0 BETA PUBBLICABILE */
.beta-release-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  margin: 12px 0 2px;
  border: 1px solid rgba(20,184,166,.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.18), transparent 10rem),
    rgba(20,184,166,.08);
  color: #ccfbf1;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .02em;
}

.beta-readiness-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.beta-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.beta-readiness-grid article {
  min-height: 230px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.13), transparent 14rem),
    rgba(255,255,255,.06);
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.beta-readiness-grid span {
  color: #99f6e4;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.beta-readiness-grid strong {
  font-size: clamp(1.35rem, 2.5vw, 2.7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.beta-readiness-grid small {
  color: var(--muted);
  line-height: 1.42;
}

.beta-generator-note,
.export-professional-note {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 20px;
}

.beta-generator-note {
  border: 1px solid rgba(99,102,241,.32);
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.14), transparent 12rem),
    rgba(99,102,241,.08);
  color: #e0e7ff;
}

.export-professional-note {
  border: 1px solid rgba(20,184,166,.30);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.13), transparent 12rem),
    rgba(20,184,166,.07);
  color: #ccfbf1;
}

.beta-generator-note strong,
.export-professional-note strong {
  font-weight: 950;
}

.beta-generator-note small,
.export-professional-note small {
  color: inherit;
  opacity: .78;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .beta-readiness-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .beta-readiness-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.7.1 ONBOARDING COMMERCIALE */
.onboarding-commerciale-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.onboarding-commercial-grid,
.start-onboarding-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.onboarding-commercial-grid article,
.starter-choice-strip,
.start-onboarding-card {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.12), transparent 14rem),
    rgba(255,255,255,.06);
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.onboarding-commercial-grid article {
  min-height: 230px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.onboarding-commercial-grid span,
.start-onboarding-card span {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.onboarding-commercial-grid strong,
.start-onboarding-card strong {
  display: block;
  font-size: clamp(1.3rem, 2.5vw, 2.6rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.onboarding-commercial-grid small,
.start-onboarding-card small {
  color: var(--muted);
  line-height: 1.45;
}

.starter-choice-strip {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: 16px;
  align-items: end;
  border-color: rgba(249,115,22,.30);
  background:
    radial-gradient(circle at top left, rgba(249,115,22,.14), transparent 18rem),
    radial-gradient(circle at bottom right, rgba(20,184,166,.10), transparent 18rem),
    rgba(255,255,255,.065);
}

.starter-choice-strip h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: .82;
  letter-spacing: -.10em;
}

.starter-choice-strip p:not(.kicker) {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.starter-choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.start-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 14px;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 14%, rgba(249,115,22,.24), transparent 30rem),
    radial-gradient(circle at 86% 80%, rgba(20,184,166,.18), transparent 28rem),
    rgba(5,7,12,.88);
  backdrop-filter: blur(22px);
}

.start-onboarding-overlay.hidden {
  display: none;
}

.start-onboarding-window {
  position: relative;
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 36px;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.13), transparent 26rem),
    #05070c;
  padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 44px 140px rgba(0,0,0,.58);
}

.start-onboarding-head h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .76;
  letter-spacing: -.12em;
}

.start-onboarding-head p:not(.kicker) {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.start-onboarding-grid {
  margin-top: 22px;
}

.start-onboarding-card {
  min-height: 260px;
  cursor: pointer;
  text-align: left;
  color: #fff;
  display: grid;
  align-content: end;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.start-onboarding-card:hover,
.start-onboarding-card.recommended {
  transform: translateY(-2px);
  border-color: rgba(249,115,22,.50);
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.18), transparent 14rem),
    rgba(249,115,22,.08);
  box-shadow: 0 26px 80px rgba(0,0,0,.30);
}

.start-onboarding-muted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 800;
}

.start-onboarding-muted input {
  width: 18px;
  height: 18px;
}

@media (max-width: 1080px) {
  .onboarding-commercial-grid,
  .start-onboarding-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .starter-choice-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .onboarding-commercial-grid,
  .start-onboarding-grid,
  .starter-choice-actions {
    grid-template-columns: 1fr;
  }

  .start-onboarding-card {
    min-height: 190px;
  }

  .start-onboarding-head h2 {
    font-size: clamp(3.2rem, 17vw, 5.4rem);
  }
}


/* v3.7.1.1 ONBOARDING GUIDE PAGES */
.onboarding-commercial-card {
  color: inherit;
  text-decoration: none;
}

.onboarding-commercial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(249,115,22,.52);
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.18), transparent 14rem),
    rgba(249,115,22,.075);
  box-shadow: 0 30px 88px rgba(0,0,0,.30);
}

.starter-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.starter-guide-links a {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 850;
}

.starter-guide-links a:hover {
  color: #fff;
  border-color: rgba(249,115,22,.42);
}

.guide-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(249,115,22,.16), transparent 30rem),
    radial-gradient(circle at 86% 28%, rgba(20,184,166,.12), transparent 28rem),
    #05070c;
}

.guide-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 150px 0 70px;
}

.guide-hero {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}

.guide-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(3.4rem, 9vw, 9rem);
  line-height: .76;
  letter-spacing: -.12em;
}

.guide-hero p:not(.kicker) {
  max-width: 780px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 1.08rem;
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 16px;
  align-items: start;
}

.guide-panel,
.guide-side-card,
.guide-step-card {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(249,115,22,.11), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.guide-panel {
  padding: clamp(20px, 4vw, 34px);
}

.guide-panel h2,
.guide-side-card h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: .82;
  letter-spacing: -.10em;
}

.guide-steps {
  display: grid;
  gap: 12px;
}

.guide-step-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
}

.guide-step-card span {
  color: var(--accent);
  font-weight: 950;
  letter-spacing: .08em;
}

.guide-step-card strong {
  display: block;
  font-size: 1.12rem;
  margin-bottom: 5px;
}

.guide-step-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.guide-side {
  display: grid;
  gap: 12px;
}

.guide-side-card {
  padding: 22px;
}

.guide-side-card ul,
.guide-side-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.guide-side-card li + li {
  margin-top: 8px;
}

.guide-warning {
  border-color: rgba(20,184,166,.28);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.13), transparent 14rem),
    rgba(20,184,166,.06);
}

.guide-next-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}

.guide-next-grid a {
  text-decoration: none;
  color: inherit;
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  display: grid;
  align-content: end;
  gap: 4px;
}

.guide-next-grid a:hover {
  border-color: rgba(249,115,22,.44);
  background: rgba(249,115,22,.075);
}

.guide-next-grid strong {
  line-height: 1;
}

.guide-next-grid small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .guide-layout,
  .guide-next-grid {
    grid-template-columns: 1fr;
  }

  .guide-main {
    padding-top: 120px;
  }
}

@media (max-width: 680px) {
  .guide-step-card {
    grid-template-columns: 1fr;
  }

  .guide-hero h1 {
    font-size: clamp(3.1rem, 17vw, 5.3rem);
  }
}


/* v3.7.2 PERSONALIZATION MAX */
.personalization-max-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.personalization-max-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.personalization-max-grid article,
.personalization-max-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.14), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.personalization-max-grid article {
  min-height: 230px;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.personalization-max-grid span {
  color: #c4b5fd;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.personalization-max-grid strong {
  font-size: clamp(1.35rem, 2.5vw, 2.7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.personalization-max-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.personalization-max-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.personalization-max-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}

.personalization-max-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.personalization-max-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.55;
}

.personalization-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.personalization-tabs button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: var(--muted);
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
}

.personalization-tabs button.active,
.personalization-tabs button:hover {
  border-color: rgba(168,85,247,.48);
  color: #fff;
  background: rgba(168,85,247,.14);
}

.personalization-tab-panel {
  display: none;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(0,0,0,.12);
}

.personalization-tab-panel.active {
  display: block;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  margin-top: 12px;
}

.check-grid label {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: var(--muted);
  font-weight: 850;
  background: rgba(255,255,255,.045);
}

@media (max-width: 1080px) {
  .personalization-max-grid,
  .check-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .personalization-max-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .personalization-max-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.7.3 SECTION STUDIO */
.section-studio-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.section-studio-landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.section-studio-landing-grid article,
.section-studio-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.14), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.section-studio-landing-grid article {
  min-height: 230px;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.section-studio-landing-grid span {
  color: #99f6e4;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-studio-landing-grid strong {
  font-size: clamp(1.35rem, 2.5vw, 2.7rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.section-studio-landing-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.section-studio-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.section-studio-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.section-studio-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.section-studio-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.55;
}

.section-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.section-studio-help {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(20,184,166,.24);
  border-radius: 18px;
  background: rgba(20,184,166,.07);
  color: #ccfbf1;
  margin-bottom: 14px;
}

.section-studio-help span {
  color: rgba(204,251,241,.78);
  line-height: 1.45;
}

.section-studio-list {
  display: grid;
  gap: 10px;
}

.section-studio-card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(0,0,0,.14);
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px,.9fr) minmax(0,1.1fr);
  gap: 14px;
  align-items: center;
}

.section-studio-card.disabled {
  opacity: .58;
}

.section-studio-title {
  display: grid;
  gap: 5px;
}

.section-studio-title strong {
  font-size: 1.15rem;
}

.section-studio-title small {
  color: var(--muted);
  line-height: 1.4;
}

.section-studio-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.section-studio-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
}

.section-studio-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: end;
}

.section-studio-mini-actions button,
.section-studio-toggle {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #fff;
  padding: 0 10px;
  font-weight: 900;
  cursor: pointer;
}

.section-studio-toggle.active {
  border-color: rgba(20,184,166,.44);
  background: rgba(20,184,166,.12);
  color: #ccfbf1;
}

@media (max-width: 1080px) {
  .section-studio-landing-grid,
  .section-studio-card,
  .section-studio-head {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .section-studio-controls {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .section-studio-landing-grid,
  .section-studio-card,
  .section-studio-head,
  .section-studio-controls {
    grid-template-columns: 1fr;
  }
  .section-studio-actions {
    justify-content: flex-start;
  }
}


/* v3.7.3.1 SECTION STUDIO GUIDE LINKS */
.section-studio-landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.section-studio-landing-card {
  min-height: 260px;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.16), transparent 14rem),
    rgba(255,255,255,.06);
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.section-studio-landing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(20,184,166,.50);
  background:
    radial-gradient(circle at top right, rgba(20,184,166,.24), transparent 14rem),
    rgba(20,184,166,.075);
  box-shadow: 0 30px 88px rgba(0,0,0,.30);
}

.section-studio-landing-card span {
  color: #99f6e4;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-studio-landing-card strong {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 2.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.section-studio-landing-card small {
  color: var(--muted);
  line-height: 1.45;
}

.section-studio-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.section-studio-guide-links a {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 850;
}

.section-studio-guide-links a:hover {
  color: #fff;
  border-color: rgba(20,184,166,.42);
}

@media (max-width: 1080px) {
  .section-studio-landing-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .section-studio-landing-grid {
    grid-template-columns: 1fr;
  }

  .section-studio-landing-card {
    min-height: 210px;
  }
}


/* v3.7.4 PAGE STUDIO */
.page-studio-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.page-studio-landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.page-studio-landing-card,
.page-studio-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.16), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.page-studio-landing-card {
  min-height: 260px;
  color: inherit;
  text-decoration: none;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.page-studio-landing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.50);
  background:
    radial-gradient(circle at top right, rgba(99,102,241,.24), transparent 14rem),
    rgba(99,102,241,.075);
  box-shadow: 0 30px 88px rgba(0,0,0,.30);
}

.page-studio-landing-card span {
  color: #c7d2fe;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.page-studio-landing-card strong {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 2.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.page-studio-landing-card small {
  color: var(--muted);
  line-height: 1.45;
}

.page-studio-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.page-studio-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.page-studio-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.page-studio-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.55;
}

.page-studio-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.page-studio-guide-links a {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 850;
}

.page-studio-guide-links a:hover {
  color: #fff;
  border-color: rgba(99,102,241,.42);
}

.page-studio-help {
  display: grid;
  gap: 4px;
  padding: 12px;
  margin: 10px 0 0;
  border: 1px solid rgba(99,102,241,.24);
  border-radius: 16px;
  background: rgba(99,102,241,.075);
  color: #e0e7ff;
}

.page-studio-help span {
  color: rgba(224,231,255,.76);
  font-size: .88rem;
}

.page-studio-preview {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.page-studio-preview article {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  color: #fff;
}

.page-studio-preview strong {
  display: block;
}

.page-studio-preview small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .page-studio-landing-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .page-studio-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .page-studio-landing-grid {
    grid-template-columns: 1fr;
  }

  .page-studio-landing-card {
    min-height: 210px;
  }
}


/* v3.7.5 MEDIA LIBRARY */
.media-library-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.media-library-landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.media-library-landing-card,
.media-library-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.16), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.media-library-landing-card {
  min-height: 260px;
  color: inherit;
  text-decoration: none;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.media-library-landing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(14,165,233,.50);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,.24), transparent 14rem),
    rgba(14,165,233,.075);
  box-shadow: 0 30px 88px rgba(0,0,0,.30);
}

.media-library-landing-card span {
  color: #bae6fd;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.media-library-landing-card strong {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 2.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.media-library-landing-card small {
  color: var(--muted);
  line-height: 1.45;
}

.media-library-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.media-library-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.media-library-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.media-library-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.55;
}

.media-library-guide-links,
.media-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.media-library-guide-links a,
.media-library-tabs button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 850;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}

.media-library-tabs button.active,
.media-library-tabs button:hover,
.media-library-guide-links a:hover {
  color: #fff;
  border-color: rgba(14,165,233,.42);
  background: rgba(14,165,233,.10);
}

.media-library-tab-panel {
  display: none;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(0,0,0,.12);
}

.media-library-tab-panel.active {
  display: block;
}

.media-library-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.media-library-preview article {
  min-height: 110px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  padding: 12px;
  display: grid;
  align-content: end;
  color: #fff;
}

.media-library-preview strong {
  display: block;
}

.media-library-preview small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

@media (max-width: 1080px) {
  .media-library-landing-grid,
  .media-library-preview {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .media-library-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .media-library-landing-grid,
  .media-library-preview {
    grid-template-columns: 1fr;
  }

  .media-library-landing-card {
    min-height: 210px;
  }
}


/* v3.7.6 BRAND KIT */
.brand-kit-section {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-kit-landing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.brand-kit-landing-card,
.brand-kit-panel {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.16), transparent 14rem),
    rgba(255,255,255,.06);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.brand-kit-landing-card {
  min-height: 260px;
  color: inherit;
  text-decoration: none;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.brand-kit-landing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(236,72,153,.50);
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.24), transparent 14rem),
    rgba(236,72,153,.075);
  box-shadow: 0 30px 88px rgba(0,0,0,.30);
}

.brand-kit-landing-card span {
  color: #fbcfe8;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.brand-kit-landing-card strong {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 2.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.brand-kit-landing-card small {
  color: var(--muted);
  line-height: 1.45;
}

.brand-kit-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.brand-kit-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.brand-kit-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.brand-kit-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 780px;
  color: var(--muted);
  line-height: 1.55;
}

.brand-kit-guide-links,
.brand-kit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.brand-kit-guide-links a,
.brand-kit-tabs button {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 850;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}

.brand-kit-tabs button.active,
.brand-kit-tabs button:hover,
.brand-kit-guide-links a:hover {
  color: #fff;
  border-color: rgba(236,72,153,.42);
  background: rgba(236,72,153,.10);
}

.brand-kit-tab-panel {
  display: none;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(0,0,0,.12);
}

.brand-kit-tab-panel.active {
  display: block;
}

.brand-kit-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}

.brand-kit-preview article {
  min-height: 130px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  padding: 12px;
  display: grid;
  align-content: end;
  color: #fff;
}

.brand-kit-preview .brand-swatch {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 10px;
}

.brand-kit-preview strong,
.brand-kit-preview small {
  display: block;
}

.brand-kit-preview small {
  color: var(--muted);
  line-height: 1.4;
  margin-top: 4px;
}

@media (max-width: 1080px) {
  .brand-kit-landing-grid,
  .brand-kit-preview {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .brand-kit-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .brand-kit-landing-grid,
  .brand-kit-preview {
    grid-template-columns: 1fr;
  }

  .brand-kit-landing-card {
    min-height: 210px;
  }
}


/* v3.7.6.1 BRAND KIT VISIBLE */
.scroll-anchor {
  display: block;
  height: 1px;
  scroll-margin-top: 120px;
}

.nav-brand-kit-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(236,72,153,.34);
  border-radius: 999px;
  background: rgba(236,72,153,.09);
  color: #fbcfe8;
  text-decoration: none;
  font-weight: 900;
}

.nav-brand-kit-link:hover {
  color: #fff;
  border-color: rgba(236,72,153,.58);
  background: rgba(236,72,153,.16);
}

.brand-kit-launch-strip {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(236,72,153,.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.18), transparent 18rem),
    rgba(236,72,153,.065);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.brand-kit-launch-strip h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.brand-kit-launch-strip p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.brand-kit-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#brand-kit:target + .brand-kit-panel,
.brand-kit-panel.brand-kit-focused {
  border-color: rgba(236,72,153,.68);
  box-shadow:
    0 0 0 4px rgba(236,72,153,.10),
    0 34px 100px rgba(0,0,0,.28);
}

@media (max-width: 860px) {
  .brand-kit-launch-strip {
    grid-template-columns: 1fr;
  }

  .brand-kit-launch-actions {
    justify-content: flex-start;
  }
}


/* v3.7.6.2 BRAND KIT UX PRO */
.brand-kit-panel-pro{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.18), transparent 22rem),
    radial-gradient(circle at bottom left, rgba(56,189,248,.14), transparent 20rem),
    rgba(255,255,255,.055);
}
.brand-kit-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}
.brand-kit-hero-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0 18px;
}
.brand-kit-hero-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.brand-kit-hero-card small{
  color:#fbcfe8;
  display:block;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
}
.brand-kit-hero-card strong{
  display:block;
  font-size:1.12rem;
  margin-bottom:8px;
}
.brand-kit-hero-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.brand-preset-showcase{
  margin: 8px 0 16px;
}
.brand-preset-cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.brand-preset-card{
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 12rem),
    rgba(255,255,255,.045);
  padding:16px;
  color:#fff;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.brand-preset-card:hover,
.brand-preset-card.active{
  transform:translateY(-3px);
  border-color:rgba(236,72,153,.46);
  box-shadow:0 26px 80px rgba(0,0,0,.24);
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.16), transparent 12rem),
    rgba(236,72,153,.05);
}
.brand-preset-top{
  display:grid;
  gap:6px;
}
.brand-preset-top small{
  color:var(--muted);
  line-height:1.4;
}
.brand-preset-top strong{
  font-size:1.05rem;
}
.brand-preset-swatches{
  display:flex;
  gap:8px;
  margin:14px 0 12px;
}
.brand-preset-swatches i{
  width:24px;
  height:24px;
  border-radius:999px;
  display:block;
  border:1px solid rgba(255,255,255,.18);
}
.brand-preset-card p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.brand-palette-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.brand-swatch-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.brand-swatch-color{
  height:82px;
}
.brand-swatch-meta{
  padding:10px 12px;
}
.brand-swatch-meta strong,
.brand-swatch-meta small{
  display:block;
}
.brand-swatch-meta small{
  color:var(--muted);
  margin-top:4px;
}
.brand-font-preview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.brand-font-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.04);
}
.brand-font-card small{
  color:var(--muted);
  display:block;
  margin-bottom:10px;
}
.brand-font-card h4{
  margin:0 0 8px;
  font-size:clamp(1.6rem,3vw,2.8rem);
  line-height:.95;
  letter-spacing:-.05em;
}
.brand-font-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.brand-components-preview{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
  margin-top:14px;
}
.brand-component-stage,
.brand-component-side{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.04);
}
.brand-component-stage h4,
.brand-component-side h4{
  margin:0 0 10px;
}
.brand-button-demo-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.brand-demo-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.16);
  cursor:pointer;
  font-weight:800;
  text-decoration:none;
}
.brand-demo-card{
  border:1px solid rgba(255,255,255,.10);
  padding:16px;
  background:rgba(255,255,255,.05);
}
.brand-demo-card strong,
.brand-demo-card small{
  display:block;
}
.brand-demo-card small{
  color:var(--muted);
  margin-top:6px;
  line-height:1.45;
}
.brand-tone-preview{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.brand-tone-chip{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.04);
}
.brand-tone-chip strong,
.brand-tone-chip small{
  display:block;
}
.brand-tone-chip small{
  color:var(--muted);
  margin-top:4px;
}
.brand-live-preview-layout{
  display:grid;
  grid-template-columns:1.4fr .6fr;
  gap:14px;
}
.brand-mini-site-preview{
  min-height:380px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  overflow:hidden;
  background:#0a0e17;
  position:relative;
}
.brand-mini-site-hero{
  min-height:210px;
  padding:22px;
  display:grid;
  align-content:end;
  gap:10px;
}
.brand-mini-site-hero small{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  opacity:.88;
}
.brand-mini-site-hero h3{
  margin:0;
  font-size:clamp(2rem,5vw,4rem);
  line-height:.88;
  letter-spacing:-.08em;
}
.brand-mini-site-hero p{
  margin:0;
  max-width:600px;
  line-height:1.5;
}
.brand-mini-site-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.brand-mini-site-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:18px 22px 22px;
}
.brand-mini-block{
  min-height:110px;
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
}
.brand-mini-block strong,
.brand-mini-block small{
  display:block;
}
.brand-mini-block small{
  color:inherit;
  opacity:.8;
  margin-top:6px;
  line-height:1.45;
}
.brand-kit-summary{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.04);
}
.brand-kit-summary h4{
  margin:0 0 10px;
}
.brand-kit-summary ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:8px;
}
.brand-kit-summary li{
  color:var(--muted);
  line-height:1.45;
}
.brand-apply-note{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(34,197,94,.25);
  border-radius:16px;
  background:rgba(34,197,94,.08);
  color:#dcfce7;
  font-size:.92rem;
  line-height:1.45;
}
@media (max-width: 1180px){
  .brand-preset-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .brand-live-preview-layout{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .brand-kit-hero-grid,
  .brand-palette-preview,
  .brand-tone-preview,
  .brand-mini-site-body,
  .brand-components-preview,
  .brand-font-preview{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .brand-preset-cards{grid-template-columns:1fr;}
  .brand-kit-head-actions{justify-content:flex-start;}
}


/* v3.7.6.3 BRAND KIT POLISH PRO */
.brand-kit-command-center {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 14px;
  margin: 14px 0 14px;
}

.brand-command-main,
.brand-kit-status-card,
.brand-workbench-preview,
.brand-workbench-side,
.brand-mood-card {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.13), transparent 14rem),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.brand-command-main {
  padding: 22px;
}

.brand-command-main h3 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(2.5rem, 6vw, 6.6rem);
  line-height: .78;
  letter-spacing: -.11em;
}

.brand-command-main p:not(.kicker) {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.56;
}

.brand-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.brand-kit-status-card {
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 240px;
}

.brand-kit-status-card span {
  color: #fbcfe8;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.brand-kit-status-card strong {
  font-size: clamp(2rem,4vw,4.4rem);
  line-height: .82;
  letter-spacing: -.09em;
}

.brand-kit-status-card small {
  color: var(--muted);
  line-height: 1.45;
}

.brand-mood-selector {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 10px;
  margin: 12px 0 18px;
}

.brand-mood-card {
  text-align: left;
  color: #fff;
  padding: 16px;
  cursor: pointer;
  min-height: 118px;
  display: grid;
  align-content: end;
  gap: 5px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.brand-mood-card:hover,
.brand-mood-card.active {
  transform: translateY(-2px);
  border-color: rgba(236,72,153,.54);
  background:
    radial-gradient(circle at top right, rgba(236,72,153,.18), transparent 14rem),
    rgba(236,72,153,.08);
}

.brand-mood-card strong,
.brand-mood-card small {
  display: block;
}

.brand-mood-card small {
  color: var(--muted);
  line-height: 1.38;
}

.brand-kit-live-workbench {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr);
  gap: 14px;
  margin: 16px 0 18px;
}

.brand-workbench-preview {
  padding: 14px;
  overflow: hidden;
}

.brand-workbench-browser {
  display: flex;
  gap: 7px;
  height: 28px;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin: -4px -4px 12px;
}

.brand-workbench-browser span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}

.brand-workbench-site {
  min-height: 430px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}

.brand-workbench-hero {
  min-height: 245px;
  padding: 24px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.brand-workbench-hero small {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}

.brand-workbench-hero h4 {
  margin: 0;
  font-size: clamp(2.8rem,6vw,6.2rem);
  line-height: .76;
  letter-spacing: -.12em;
}

.brand-workbench-hero p {
  max-width: 620px;
  margin: 0;
  line-height: 1.5;
}

.brand-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-workbench-body {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  padding: 18px;
}

.brand-workbench-card {
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  align-content: end;
  gap: 5px;
}

.brand-workbench-card strong,
.brand-workbench-card small {
  display: block;
}

.brand-workbench-card small {
  opacity: .74;
  line-height: 1.4;
}

.brand-workbench-side {
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.brand-workbench-score {
  display: grid;
  gap: 10px;
}

.brand-score-ring {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.14);
  background:
    conic-gradient(from -90deg, rgba(236,72,153,.92), rgba(56,189,248,.88), rgba(255,255,255,.12));
}

.brand-score-copy strong,
.brand-score-copy small {
  display: block;
}

.brand-score-copy small {
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.45;
}

.brand-workbench-tokens {
  display: grid;
  gap: 8px;
}

.brand-token-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: .88rem;
}

.brand-token-pill {
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.13);
}

.brand-preset-showcase .section-heading h3 {
  margin: 0;
  font-size: clamp(2rem,4.5vw,4.8rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.brand-kit-panel-pro .brand-kit-tabs-pro {
  position: sticky;
  top: 74px;
  z-index: 15;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(5,7,12,.72);
  backdrop-filter: blur(18px);
}

@media (max-width: 1180px) {
  .brand-kit-command-center,
  .brand-kit-live-workbench {
    grid-template-columns: 1fr;
  }

  .brand-mood-selector {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .brand-mood-selector,
  .brand-workbench-body {
    grid-template-columns: 1fr;
  }

  .brand-command-main h3,
  .brand-workbench-hero h4 {
    font-size: clamp(3rem,16vw,5rem);
  }

  .brand-kit-panel-pro .brand-kit-tabs-pro {
    border-radius: 22px;
  }
}

/* v3.7.5 - Valutazione sito: pulsante nel risultato + pagina dedicata */
.site-evaluate-launch {
  padding: 16px 14px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modify-site-button,
.evaluate-site-button {
  width: min(540px, 100%);
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, #fff 10%);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 18rem),
    rgba(5,7,12,.72);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.045) inset;
  backdrop-filter: blur(18px);
  font-size: clamp(1.05rem, 3.8vw, 1.55rem);
  font-weight: 950;
  letter-spacing: -.04em;
  text-decoration: none;
}


.modify-site-button {
  width: min(540px, 100%);
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(5,7,12,.74);
  color: var(--text);
  box-shadow: 0 16px 44px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.045) inset;
  backdrop-filter: blur(18px);
  font-size: clamp(1rem, 3.4vw, 1.38rem);
  font-weight: 950;
  letter-spacing: -.04em;
  text-decoration: none;
}

.modify-site-button strong {
  color: var(--accent);
  font-size: 1.25em;
  line-height: 1;
}

.modify-site-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
}

.download-site-button,
.delete-site-button {
  min-height: 52px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(5,7,12,.68);
  color: rgba(255,255,255,.9);
  box-shadow: 0 14px 38px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.045) inset;
  backdrop-filter: blur(18px);
  font-size: clamp(.95rem, 2.8vw, 1.15rem);
  font-weight: 900;
  letter-spacing: -.03em;
}

.delete-site-button strong {
  color: rgba(255,255,255,.82);
  font-size: 1.25em;
  line-height: 1;
}

.evaluate-site-button strong {
  color: var(--accent);
  font-size: 1.45em;
  line-height: 1;
  transition: transform .18s ease;
}

.evaluate-site-button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 22px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.evaluate-site-button:hover strong {
  transform: translateX(4px);
}

@media (max-width: 760px) {
  .site-evaluate-launch {
    position: sticky;
    bottom: 12px;
    z-index: 12;
    padding: 14px 16px 10px;
    margin-top: -86px;
    pointer-events: none;
  }

  .modify-site-button,
  .evaluate-site-button,
  .download-site-button,
.delete-site-button {
    pointer-events: auto;
    margin-inline: auto;
  }

  .modify-site-button,
.evaluate-site-button {
    min-height: 58px;
    max-width: 560px;
  }
}

.evaluation-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 20%, rgba(239,68,68,.22), transparent 22rem),
    radial-gradient(circle at 18% 0%, rgba(249,115,22,.12), transparent 18rem),
    var(--bg);
}

.evaluation-layout {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 120px 0 42px;
}

.evaluation-back-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-weight: 850;
  font-size: clamp(1rem, 3.6vw, 1.18rem);
  margin-bottom: 28px;
}

.evaluation-hero h1 {
  margin: 0;
  font-size: clamp(3.1rem, 9.5vw, 6.9rem);
  line-height: .88;
  letter-spacing: -.09em;
}

.evaluation-hero p {
  color: var(--muted);
  margin: 18px 0 0;
  max-width: 780px;
  font-size: clamp(1.05rem, 3vw, 1.55rem);
  line-height: 1.35;
}

.evaluation-score-card {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.12));
  border-radius: 30px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.11), transparent 16rem),
    rgba(255,255,255,.07);
  box-shadow: 0 28px 90px rgba(0,0,0,.34);
}

.evaluation-score-ring {
  --score: 0;
  width: min(220px, 52vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  justify-self: center;
  background:
    radial-gradient(circle, rgba(5,7,12,.92) 0 55%, transparent 57%),
    conic-gradient(var(--accent) calc(var(--score) * 1%), rgba(255,255,255,.11) 0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.34);
}

.evaluation-score-ring strong {
  font-size: clamp(3.2rem, 11vw, 5.2rem);
  letter-spacing: -.08em;
  line-height: .9;
}

.evaluation-score-ring span {
  color: rgba(248,250,252,.72);
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  margin-left: 3px;
}

.evaluation-score-copy h2 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 3.4rem);
  letter-spacing: -.06em;
}

.evaluation-score-copy p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.7vw, 1.35rem);
  line-height: 1.45;
  max-width: 680px;
}

.evaluation-category-grid {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.evaluation-category-card {
  min-height: 138px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.evaluation-category-card:nth-child(4),
.evaluation-category-card:nth-child(5) {
  grid-column: span 1;
}

.evaluation-category-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
  font-weight: 950;
}

.evaluation-category-card h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -.03em;
}

.evaluation-category-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: .94rem;
}

.evaluation-category-score {
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -.06em;
  color: var(--accent);
}

.evaluation-category-score small {
  color: rgba(248,250,252,.48);
  font-size: .72em;
  font-weight: 850;
}

.evaluation-suggestions {
  margin-top: 22px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background: rgba(255,255,255,.07);
}

.evaluation-suggestions h2 {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.45rem, 4.6vw, 2.5rem);
  letter-spacing: -.06em;
}

.evaluation-suggestions h2 span {
  color: var(--accent);
}

.evaluation-suggestions ul {
  margin: 0;
  padding-left: 1.25rem;
  color: rgba(248,250,252,.86);
  line-height: 1.55;
  font-size: clamp(.98rem, 2.7vw, 1.18rem);
}

.evaluation-suggestions li::marker {
  color: var(--accent);
}

.evaluation-return-panel {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: rgba(255,255,255,.055);
}

.evaluation-return-button {
  min-height: 68px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 950;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  letter-spacing: -.045em;
  box-shadow: 0 20px 60px rgba(239,68,68,.22);
}

.evaluation-return-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .evaluation-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .evaluation-layout {
    width: min(100% - 40px, 720px);
    padding-top: 108px;
  }

  .evaluation-score-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .evaluation-score-ring {
    justify-self: start;
    width: min(210px, 54vw);
  }

  .evaluation-category-grid {
    grid-template-columns: 1fr;
  }

  .evaluation-category-card {
    min-height: 120px;
  }

  .evaluation-return-panel {
    grid-template-columns: 1fr;
  }

  .evaluation-return-button {
    order: 2;
    width: 100%;
  }
}


/* Fix navbar: voci ordinate come riferimento, più leggibili e senza tagli */
.top-nav {
  width: min(1320px, calc(100vw - 56px));
  gap: 18px;
  padding: 12px 14px 12px 18px;
}
.top-nav nav {
  gap: 6px;
  flex-wrap: nowrap;
  overflow: visible;
}
.top-nav a,
.top-nav nav button {
  font-size: clamp(.82rem, .72rem + .22vw, .98rem);
  line-height: 1;
  white-space: nowrap;
  padding: 11px 10px;
}
.top-nav .brand {
  flex-shrink: 0;
}
.top-nav .brand small {
  font-size: .72rem;
}
.top-nav .nav-cta {
  padding: 12px 18px;
  flex-shrink: 0;
}
@media (max-width: 1180px) {
  .top-nav { width: min(1280px, calc(100vw - 32px)); }
  .top-nav a, .top-nav nav button { font-size: .78rem; padding: 10px 8px; }
  .top-nav .nav-cta { padding: 11px 14px; }
}
@media (max-width: 980px) {
  .top-nav nav a:not(.nav-cta):nth-of-type(n+7):not(:last-child) { display: none; }
}

.download-site-button:hover,.delete-site-button:hover,.evaluate-site-button:hover,.modify-site-button:hover{transform:translateY(-2px);}

/* v3.7.1 - percorso guidato corretto: normale vs modifica sito */
.guided-creator-actions.guided-actions-first:not(.guided-actions-edit) {
  grid-template-columns: 1fr !important;
}
.guided-creator-actions.guided-actions-middle:not(.guided-actions-edit) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.guided-creator-actions.guided-actions-export {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.guided-creator-actions.guided-actions-first.guided-actions-edit {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.guided-creator-actions.guided-actions-middle.guided-actions-edit {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}


/* v3.7.6.4 - risultato generato grande e centrato */
.result-hero-panel {
  display: none;
  padding: 26px 28px 10px;
  text-align: center;
}
.result-hero-panel h2 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 5.8rem);
  line-height: .84;
  letter-spacing: -.085em;
}
.result-hero-panel p:not(.kicker) {
  margin: 12px auto 0;
  max-width: 760px;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.22rem);
}
body.generated-result .step-rail,
body.generated-result .builder-stage {
  display: none !important;
}
body.generated-result .generator-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 112px 28px 80px;
  max-width: 1500px;
  margin-inline: auto;
}
body.generated-result .preview-shell {
  min-height: auto;
  border-radius: 34px;
  overflow: hidden !important;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}
body.generated-result .result-hero-panel {
  display: block;
}
body.generated-result .preview-top {
  max-width: 1240px;
  margin: 10px auto 0;
  border: 1px solid rgba(255,255,255,.10);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(5,7,12,.82);
}
body.generated-result .preview-top strong {
  font-size: .9rem;
  letter-spacing: .02em;
}
body.generated-result .preview-frame-scroll {
  width: min(1240px, calc(100vw - 96px));
  height: min(78vh, 900px);
  min-height: 620px;
  margin: 0 auto 28px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0 0 26px 26px;
  overflow: auto !important;
  background: #fff;
  box-shadow: 0 32px 90px rgba(0,0,0,.42);
}
body.generated-result #previewFrame {
  width: max(100%, 1180px);
  min-width: 1180px;
  height: 1320px;
  min-height: 1320px;
}
body.generated-result .site-evaluate-launch {
  order: -1;
  padding: 18px 24px 6px;
  position: static;
  margin: 0;
  pointer-events: auto;
}
body.generated-result .modify-site-button,
body.generated-result .evaluate-site-button {
  width: auto;
  min-width: 210px;
  min-height: 54px;
  padding: 0 26px;
  font-size: 1.05rem;
}
body.generated-result .download-site-button,
body.generated-result .delete-site-button {
  min-height: 54px;
  font-size: 1rem;
}
body.generated-result .generator-nav #focusPreviewBtn {
  display: none;
}
@media (max-width: 900px) {
  body.generated-result .generator-layout {
    padding: 104px 14px 70px;
  }
  body.generated-result .preview-frame-scroll {
    width: calc(100vw - 36px);
    min-height: 560px;
    height: 72vh;
  }
  body.generated-result #previewFrame {
    width: 1040px;
    min-width: 1040px;
  }
  body.generated-result .site-evaluate-launch {
    gap: 8px;
    padding-inline: 12px;
  }
  body.generated-result .modify-site-button,
  body.generated-result .evaluate-site-button,
  body.generated-result .download-site-button,
  body.generated-result .delete-site-button {
    min-width: 0;
    width: auto;
    padding-inline: 18px;
  }
}
body.generated-result .result-hero-panel { order: 0; }
body.generated-result .site-evaluate-launch { order: 1; }
body.generated-result .preview-top { order: 2; }
body.generated-result .preview-frame-scroll { order: 3; }

/* v3.7.6.5 - dashboard risultato generato */
.view-generated-result-btn {
  display: none !important;
}
body.has-generated-result .view-generated-result-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-color: rgba(20,184,166,.45) !important;
  background: rgba(20,184,166,.16) !important;
  color: #ccfbf1 !important;
}
.result-completion-panel {
  display: none;
  max-width: 1240px;
  width: min(1240px, calc(100vw - 96px));
  margin: 4px auto 18px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.18), transparent 20rem),
    radial-gradient(circle at bottom right, rgba(249,115,22,.12), transparent 18rem),
    rgba(255,255,255,.055);
  box-shadow: 0 20px 70px rgba(0,0,0,.22);
  grid-template-columns: minmax(0,1.2fr) auto minmax(260px,.9fr);
  gap: 16px;
  align-items: center;
}
.result-completion-copy h3 {
  margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 3.8rem);
  line-height: .86;
  letter-spacing: -.08em;
}
.result-completion-copy p:not(.kicker) {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.result-completion-score {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.24);
  box-shadow: inset 0 0 32px rgba(20,184,166,.18);
}
.result-completion-score strong {
  display: block;
  font-size: 2.35rem;
  line-height: .9;
  letter-spacing: -.08em;
}
.result-completion-score span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.result-completion-checklist {
  display: grid;
  gap: 8px;
}
.result-completion-checklist .product-polish-item {
  padding: 9px 10px;
  background: rgba(255,255,255,.065);
}
.result-bottom-actions {
  display: none;
  justify-content: center;
  width: min(1240px, calc(100vw - 96px));
  margin: -10px auto 26px;
}
.result-return-dashboard {
  min-height: 52px;
  padding-inline: 26px;
  border-radius: 999px;
}
body.generated-result .result-completion-panel {
  display: grid;
}
body.generated-result .result-bottom-actions {
  display: flex;
}
body.generated-result .result-hero-panel { order: 0; }
body.generated-result .result-completion-panel { order: 1; }
body.generated-result .site-evaluate-launch { order: 2; }
body.generated-result .preview-top { order: 3; }
body.generated-result .preview-frame-scroll { order: 4; }
body.generated-result .result-bottom-actions { order: 5; }
@media (max-width: 900px) {
  .result-completion-panel {
    width: calc(100vw - 36px);
    grid-template-columns: 1fr;
    text-align: center;
  }
  .result-completion-score {
    margin-inline: auto;
  }
  .result-bottom-actions {
    width: calc(100vw - 36px);
  }
}


/* v3.7.6.6 - dashboard pulita: niente preview a destra, ritorno al sito ben visibile */
.dashboard-return-site-panel {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid rgba(20,184,166,.26);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.18), transparent 18rem),
    rgba(255,255,255,.055);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
}
.dashboard-return-site-panel strong {
  display: block;
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2.7rem);
  line-height: .9;
  letter-spacing: -.075em;
}
.dashboard-return-site-panel small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 750;
}
body.has-generated-result:not(.generated-result) .dashboard-return-site-panel {
  display: flex;
}
body.has-generated-result:not(.generated-result) .preview-shell {
  display: none !important;
}
body.has-generated-result:not(.generated-result) .generator-layout {
  grid-template-columns: 176px minmax(0, 1fr) !important;
}
body.has-generated-result:not(.generated-result) .builder-stage {
  max-width: none;
}
@media (max-width: 900px) {
  body.has-generated-result:not(.generated-result) .generator-layout {
    grid-template-columns: 1fr !important;
  }
  .dashboard-return-site-panel {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .dashboard-return-site-panel .primary-action {
    width: 100%;
  }
}


/* v3.7.6.7 - anteprima sito creato fullscreen */
.result-bottom-actions {
  gap: 12px;
  flex-wrap: wrap;
}
.result-fullscreen-button {
  min-height: 52px;
  padding-inline: 28px;
  border-radius: 999px;
}
.site-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #05070c;
}
.site-fullscreen-overlay.hidden {
  display: none !important;
}
.site-fullscreen-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px 10px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(5,7,12,.96);
  color: #fff;
}
.site-fullscreen-toolbar strong {
  font-size: 1rem;
  letter-spacing: .01em;
}
.site-fullscreen-toolbar button {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.site-fullscreen-toolbar button:hover {
  background: rgba(255,255,255,.15);
}
#siteFullscreenFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
body.site-fullscreen-open {
  overflow: hidden;
}
@media (max-width: 900px) {
  .result-bottom-actions .primary-action,
  .result-bottom-actions .secondary-action {
    width: 100%;
  }
}


.guided-phone-field {
  border-color: rgba(137, 255, 232, .28);
}

.guided-phone-row {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.guided-phone-row select,
.guided-phone-row input {
  min-height: 48px;
}

@media (max-width: 760px) {
  .guided-phone-row {
    grid-template-columns: 1fr;
  }
}


.phone-combo-field {
  grid-column: span 2;
}

.phone-combo-row {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.phone-combo-row select,
.phone-combo-row input {
  min-height: 46px;
}

@media (max-width: 760px) {
  .phone-combo-field {
    grid-column: span 1;
  }
  .phone-combo-row {
    grid-template-columns: 1fr;
  }
}


/* v3.7.6.3a MOTION STUDIO */
.motion-studio-section,
.motion-studio-panel {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.motion-studio-landing-grid,
.motion-preset-grid,
.motion-studio-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.motion-studio-landing-grid article,
.motion-studio-panel,
.motion-preset-card,
.motion-studio-preview article {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.16), transparent 14rem),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.motion-studio-landing-grid article {
  min-height: 260px;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.motion-studio-landing-grid span,
.motion-preset-card span,
.motion-studio-preview span {
  color: #ddd6fe;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.motion-studio-landing-grid strong {
  display: block;
  font-size: clamp(1.35rem, 2.5vw, 2.8rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.motion-studio-landing-grid small,
.motion-preset-card small,
.motion-studio-preview small {
  color: var(--muted);
  line-height: 1.45;
}

.motion-studio-panel {
  padding: 18px;
  margin: 18px 0 22px;
}

.motion-studio-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 16px;
}

.motion-studio-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.motion-studio-head p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 820px;
  color: var(--muted);
  line-height: 1.55;
}

.motion-preset-grid {
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin-bottom: 14px;
}

.motion-preset-card {
  min-height: 150px;
  text-align: left;
  color: #fff;
  padding: 16px;
  cursor: pointer;
  display: grid;
  align-content: end;
  gap: 6px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.motion-preset-card:hover,
.motion-preset-card.active {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.56);
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.24), transparent 14rem),
    rgba(168,85,247,.075);
}

.motion-preset-card strong,
.motion-preset-card small {
  display: block;
}

.motion-preset-card strong {
  font-size: 1.2rem;
}

.motion-check-grid {
  margin-top: 14px;
}

.motion-studio-preview {
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 14px;
}

.motion-studio-preview article {
  min-height: 160px;
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 6px;
  overflow: hidden;
  position: relative;
}

.motion-studio-preview article::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  right: 16px;
  top: 16px;
  background: rgba(168,85,247,.26);
  filter: blur(2px);
  animation: motionStudioFloat 4s ease-in-out infinite;
}

.motion-studio-preview strong {
  font-size: 1.25rem;
}

.nav-motion-link {
  background: rgba(168,85,247,.12)!important;
  border-color: rgba(168,85,247,.34)!important;
  color: #ddd6fe!important;
}

@keyframes motionStudioFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  50% { transform: translate3d(-10px,12px,0) scale(1.08); opacity: .88; }
}

@media (max-width: 1180px) {
  .motion-studio-landing-grid,
  .motion-preset-grid,
  .motion-studio-preview {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .motion-studio-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .motion-studio-landing-grid,
  .motion-preset-grid,
  .motion-studio-preview {
    grid-template-columns: 1fr;
  }
}

/* Output classes injected in generated sites */
.motion-output.motion-preset-elegant .scene { transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.motion-output.motion-preset-dynamic .scene { transition-timing-function: cubic-bezier(.16,1,.3,1); }
.motion-output.motion-preset-editorial .scene-heading h2 { clip-path: inset(0 0 0 0); }
.motion-output.motion-preset-minimal * { animation-duration: .18s!important; transition-duration: .18s!important; }
.motion-output.motion-preset-wow .site-cta { animation: motionPulseSoft 2.8s ease-in-out infinite; }

@keyframes motionPulseSoft {
  0%,100% { transform: translateY(0); box-shadow: 0 14px 34px rgba(255,255,255,.08); }
  50% { transform: translateY(-2px); box-shadow: 0 22px 58px rgba(255,255,255,.16); }
}


/* v3.7.6.3a.1 MOTION STUDIO OPEN FIX */
.scroll-anchor {
  display: block;
  height: 1px;
  scroll-margin-top: 120px;
}

.motion-studio-launch-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(168,85,247,.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.18), transparent 18rem),
    rgba(168,85,247,.065);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.motion-studio-launch-strip h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.motion-studio-launch-strip p:not(.kicker) {
  margin: 8px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
}

.motion-studio-launch-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

#motion-studio:target + .motion-studio-panel,
.motion-studio-panel.motion-studio-focused {
  border-color: rgba(168,85,247,.72);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.12),
    0 34px 100px rgba(0,0,0,.32);
}

.motion-studio-panel {
  scroll-margin-top: 120px;
}

@media (max-width: 860px) {
  .motion-studio-launch-strip {
    grid-template-columns: 1fr;
  }
  .motion-studio-launch-actions {
    justify-content: flex-start;
  }
}


/* v3.7.6.3a.2 MOTION STUDIO HARD OPEN */
.motion-studio-modal-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.20), transparent 30rem),
    rgba(3,5,10,.78);
  backdrop-filter: blur(18px);
  overflow: auto;
}

.motion-studio-modal-root.open {
  display: block;
}

.motion-studio-modal-shell {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  animation: motionModalIn .22s ease both;
}

.motion-studio-modal-root .motion-studio-panel {
  display: block !important;
  margin: 0 !important;
  border-color: rgba(168,85,247,.64);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.12),
    0 40px 110px rgba(0,0,0,.42);
}

.motion-studio-modal-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
}

.motion-studio-modal-root .motion-studio-modal-bar {
  display: flex;
}

.motion-studio-modal-bar span {
  color: #ddd6fe;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.motion-studio-modal-bar button {
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  background: rgba(255,255,255,.92);
  color: #05070c;
  font-weight: 900;
  cursor: pointer;
}

body.motion-modal-open {
  overflow: hidden;
}

@keyframes motionModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
  .motion-studio-modal-root {
    padding: 10px;
  }
  .motion-studio-modal-shell {
    width: 100%;
  }
}


/* v3.7.6.3a.3 MOTION STUDIO UX PRO */
.motion-studio-modal-root .motion-studio-modal-shell {
  width: min(1280px, calc(100vw - 28px));
}

.motion-studio-panel {
  overflow: hidden;
}

.motion-studio-modal-root .motion-studio-panel {
  background:
    radial-gradient(circle at 14% 0%, rgba(168,85,247,.18), transparent 24rem),
    radial-gradient(circle at 90% 8%, rgba(56,189,248,.12), transparent 22rem),
    rgba(7,9,16,.96);
}

.motion-studio-head {
  padding: 8px 4px 4px;
}

.motion-studio-head h2 {
  font-size: clamp(2.8rem, 6vw, 7rem);
  line-height: .76;
  max-width: 920px;
}

.motion-studio-head p:not(.kicker) {
  max-width: 900px;
}

.motion-ux-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
  margin: 16px 0;
}

.motion-ux-main,
.motion-ux-status,
.motion-live-stage,
.motion-controls-intro {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.14), transparent 16rem),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.motion-ux-main {
  padding: 22px;
}

.motion-ux-main h3 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.5rem, 5.6vw, 6.2rem);
  line-height: .78;
  letter-spacing: -.11em;
}

.motion-ux-main p:not(.kicker) {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.56;
}

.motion-ux-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.motion-ux-status {
  min-height: 240px;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 8px;
}

.motion-ux-status span,
.motion-controls-intro span {
  color: #ddd6fe;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.motion-ux-status strong {
  display: block;
  font-size: clamp(2.2rem, 5vw, 5.4rem);
  line-height: .78;
  letter-spacing: -.10em;
}

.motion-ux-status small {
  color: var(--muted);
  line-height: 1.45;
}

.motion-live-stage {
  padding: 14px;
  margin: 14px 0 18px;
}

.motion-live-browser {
  display: flex;
  gap: 7px;
  height: 28px;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin: -4px -4px 12px;
}

.motion-live-browser span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}

.motion-live-preview {
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at top right, rgba(168,85,247,.18), transparent 18rem),
    #080b13;
  position: relative;
}

.motion-live-hero {
  min-height: 210px;
  padding: 24px;
  display: grid;
  align-content: end;
  gap: 10px;
}

.motion-live-hero small {
  color: #ddd6fe;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
}

.motion-live-hero h4 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2.6rem, 6vw, 6.4rem);
  line-height: .76;
  letter-spacing: -.12em;
}

.motion-live-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
}

.motion-live-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  padding: 18px 24px 24px;
}

.motion-live-card {
  min-height: 120px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  display: grid;
  align-content: end;
  gap: 5px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.motion-live-card strong,
.motion-live-card small {
  display: block;
}

.motion-live-card small {
  color: rgba(255,255,255,.62);
  line-height: 1.4;
}

.motion-live-preview.motion-demo-dynamic .motion-live-card {
  animation: motionUxLift 2.4s ease-in-out infinite;
}

.motion-live-preview.motion-demo-editorial .motion-live-hero h4 {
  animation: motionUxReveal 2.8s ease-in-out infinite;
}

.motion-live-preview.motion-demo-wow::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  right: 8%;
  top: 12%;
  background: rgba(168,85,247,.26);
  filter: blur(8px);
  animation: motionUxOrb 4s ease-in-out infinite;
}

.motion-live-preview.motion-demo-minimal * {
  animation: none!important;
}

.motion-preset-grid-pro {
  gap: 12px;
}

.motion-preset-grid-pro .motion-preset-card {
  min-height: 190px;
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.09), transparent 13rem),
    rgba(255,255,255,.048);
}

.motion-preset-grid-pro .motion-preset-card strong {
  font-size: 1.45rem;
  line-height: .96;
}

.motion-preset-grid-pro .motion-preset-card.active {
  border-color: rgba(168,85,247,.72);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.10),
    0 30px 88px rgba(0,0,0,.28);
}

.motion-controls-intro {
  margin: 16px 0 12px;
  padding: 18px;
  display: grid;
  gap: 5px;
}

.motion-controls-intro strong {
  color: #fff;
  font-size: 1.25rem;
}

.motion-controls-intro small {
  color: var(--muted);
  line-height: 1.45;
}

.motion-control-grid label {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.04);
}

.motion-check-grid label {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
}

.motion-studio-preview article {
  min-height: 180px;
  border-radius: 26px;
}

@keyframes motionUxLift {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes motionUxReveal {
  0%,100% { clip-path: inset(0 0 0 0); opacity: 1; }
  45% { clip-path: inset(0 0 0 0); opacity: 1; }
  55% { clip-path: inset(0 100% 0 0); opacity: .35; }
  80% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes motionUxOrb {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  50% { transform: translate3d(-28px,22px,0) scale(1.12); opacity: .95; }
}

@media (max-width: 1000px) {
  .motion-ux-dashboard,
  .motion-live-row {
    grid-template-columns: 1fr;
  }

  .motion-live-hero h4 {
    font-size: clamp(3rem, 14vw, 5.4rem);
  }
}

/* Full optional example previews */
.landing-example-preview.orange { --ex1:#f97316; --ex2:#111827; }
.landing-example-preview.red { --ex1:#ef4444; --ex2:#f97316; }
.demo-site-premium-nav em { font-style: normal; color: rgba(255,255,255,.72); font-size: 12px; }
.demo-site-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.demo-site-button.secondary { background: transparent; border:1px solid rgba(255,255,255,.25); color:#fff; }
.demo-site-trust-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top:18px; }
.demo-site-trust-row span { border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:10px; color:rgba(255,255,255,.82); background:rgba(255,255,255,.06); font-size:12px; }
.demo-site-split-section { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.demo-card-grid.compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
.demo-review-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:14px; }
.demo-review-grid article, .demo-contact-card, .demo-faq-list details { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); border-radius:18px; padding:14px; }
.demo-review-grid strong { color:var(--detail-a); }
.demo-review-grid p, .demo-review-grid small, .demo-faq-list p, .demo-contact-card small { color:rgba(255,255,255,.72); }
.demo-faq-list { display:grid; gap:10px; }
.demo-faq-list summary { cursor:pointer; font-weight:800; color:#fff; }
.demo-contact-card { display:flex; flex-direction:column; gap:10px; }
.demo-contact-card strong { font-size:22px; color:#fff; }
@media (max-width: 760px) { .demo-site-trust-row, .demo-site-split-section, .demo-review-grid { grid-template-columns:1fr; } }

/* Commercial upgrade for full optional examples */
.example-money-strip {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin: 20px 0 24px;
}
.example-money-strip article {
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border-radius:22px;
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.example-money-strip strong { display:block; color:#fff; font-size:1rem; margin-bottom:6px; }
.example-money-strip small { color:rgba(255,255,255,.68); line-height:1.35; }
.landing-example-card small b { color:#fff; font-weight:900; }
.demo-site-money-hero { position:relative; overflow:hidden; }
.demo-profit-badge {
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  color:#07090f;
  background:linear-gradient(135deg, var(--detail-a), #fff);
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 16px 40px color-mix(in srgb, var(--detail-a) 26%, transparent);
}
.demo-conversion-panel {
  max-width:860px;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:18px;
  background:rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}
.demo-conversion-panel strong { display:block; font-size:1.05rem; margin-bottom:4px; }
.demo-conversion-panel p { color:rgba(255,255,255,.72); margin:0 0 12px; }
.demo-conversion-panel div { display:flex; flex-wrap:wrap; gap:8px; }
.demo-conversion-panel span {
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-size:.78rem;
  font-weight:850;
}
.demo-sales-grid,
.demo-package-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.demo-sales-grid article,
.demo-package-grid article {
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border-radius:24px;
  padding:18px;
  min-height:150px;
  display:grid;
  align-content:end;
  gap:8px;
}
.demo-sales-grid strong,
.demo-package-grid span { color:var(--detail-a); font-size:.76rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.demo-sales-grid span,
.demo-package-grid strong { color:#fff; font-size:1.15rem; font-weight:950; line-height:1.05; }
.demo-sales-grid small,
.demo-package-grid small { color:rgba(255,255,255,.62); line-height:1.35; }
.demo-money-contact .secondary { color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); }
@media (max-width: 760px) {
  .example-money-strip,
  .demo-sales-grid,
  .demo-package-grid { grid-template-columns:1fr; }
}



/* v3.6.26.4 EXAMPLE COMMERCIAL FLOW */
.example-flow-setup .landing-example-window-full,
.example-flow-generated .landing-example-window-full {
  width: min(1500px, calc(100vw - 18px));
  height: min(900px, calc(100dvh - 18px));
  max-height: calc(100dvh - 18px);
}

.example-flow-setup .landing-example-full-layout {
  grid-template-columns: 330px minmax(0, 1fr);
}

.example-flow-generated .landing-example-full-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}

.example-flow-setup .landing-example-full-site,
.example-flow-generated .landing-example-full-site {
  height: min(780px, calc(100dvh - 116px));
}

.example-flow-generated .landing-example-live-site-wrap,
.example-flow-setup .landing-example-live-site-wrap {
  padding: 18px;
}

.example-flow-editor-hero,
.example-flow-panel,
.example-flow-services,
.example-flow-summary-grid,
.example-flow-bottom-actions {
  padding: clamp(24px, 4vw, 54px);
}

.example-flow-editor-hero {
  min-height: 380px;
  display: grid;
  align-content: end;
  gap: 16px;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--detail-a, #f97316) 65%, transparent), transparent 24rem),
    radial-gradient(circle at 12% 84%, color-mix(in srgb, var(--detail-b, #14b8a6) 45%, transparent), transparent 20rem),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.example-flow-editor-hero p:first-child,
.example-flow-panel p,
.example-flow-services p {
  margin: 0;
  color: var(--detail-a, #f97316);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.example-flow-editor-hero h2 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(2.5rem, 6vw, 6.6rem);
  line-height: .82;
  letter-spacing: -.11em;
}

.example-flow-editor-hero p:not(:first-child) {
  margin: 0;
  max-width: 780px;
  color: rgba(255,255,255,.74);
  line-height: 1.55;
}

.example-flow-progress {
  width: min(520px, 100%);
  height: 12px;
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
}

.example-flow-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--detail-a, #f97316), var(--detail-b, #14b8a6));
  box-shadow: 0 0 22px color-mix(in srgb, var(--detail-a, #f97316) 52%, transparent);
}

.example-flow-editor-grid {
  padding: clamp(22px, 4vw, 46px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  background: rgba(255,255,255,.025);
}

.example-flow-field-card,
.example-flow-panel-card,
.example-flow-services article {
  min-height: 132px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.example-flow-field-card.wide {
  grid-column: span 2;
}

.example-flow-field-card label {
  display: block;
  margin-bottom: 12px;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.example-flow-field-card strong {
  display: block;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.05;
}

.example-flow-field-card small,
.example-flow-panel-card small,
.example-flow-services small {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.58);
  line-height: 1.45;
}

.example-flow-swatches {
  display: flex;
  gap: 10px;
  align-items: center;
}

.example-flow-swatches i {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 18px 42px rgba(0,0,0,.26);
}

.example-flow-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.example-flow-panel h3,
.example-flow-services h3 {
  margin: 8px 0 0;
  font-size: clamp(1.8rem, 3vw, 3.8rem);
  line-height: .9;
  letter-spacing: -.08em;
}

.example-flow-section-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.example-flow-section-chips span {
  padding: 11px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-weight: 900;
}

.example-flow-services > div {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.example-flow-services article span {
  display: block;
  color: var(--detail-a, #f97316);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.example-flow-services article strong {
  display: block;
  margin-top: 10px;
  font-size: 1.18rem;
}

.example-flow-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.example-flow-panel-card strong {
  display: block;
  font-size: 1.05rem;
  color: #fff;
}

.example-flow-panel-card div {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.example-flow-panel-card span {
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.68);
  font-size: .86rem;
  line-height: 1.35;
}

.example-flow-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

.example-flow-bottom-actions .demo-site-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.example-flow-generated .demo-site-hero h2 {
  font-size: clamp(3.4rem, 7.6vw, 8.6rem);
}

.example-flow-generated .demo-site-section,
.example-flow-generated .demo-site-hero,
.example-flow-generated .demo-site-cta {
  padding: clamp(28px, 5vw, 72px);
}

@media (max-width: 1100px) {
  .example-flow-setup .landing-example-full-layout,
  .example-flow-generated .landing-example-full-layout {
    grid-template-columns: 1fr;
  }

  .example-flow-setup .landing-example-full-layout .landing-example-info,
  .example-flow-generated .landing-example-full-layout .landing-example-info {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }

  .example-flow-editor-grid,
  .example-flow-services > div,
  .example-flow-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .example-flow-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .example-flow-editor-grid,
  .example-flow-services > div,
  .example-flow-summary-grid {
    grid-template-columns: 1fr;
  }

  .example-flow-field-card.wide {
    grid-column: auto;
  }

  .example-flow-bottom-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .example-flow-bottom-actions .demo-site-button {
    width: 100%;
  }
}

/* v3.6.26.4 MEDIA + FONT DIVERSI NEGLI ESEMPI */
.landing-example-full-site {
  font-family: var(--example-font, inherit);
}
.landing-example-full-site .demo-site-nav strong,
.landing-example-full-site .demo-site-hero h2,
.landing-example-full-site .demo-site-section h3,
.landing-example-full-site .demo-site-cta h3 {
  font-family: var(--example-font, inherit);
}
.demo-media-section {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--detail-a, #f97316) 22%, transparent), transparent 18rem),
    rgba(255,255,255,.025);
}
.demo-media-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
.demo-photo-card,
.demo-video-card {
  margin: 0;
  min-height: 280px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}
.demo-photo-card {
  position: relative;
}
.demo-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: block;
  object-fit: cover;
  background: rgba(255,255,255,.05);
}
.demo-photo-card figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 11px 13px;
  border-radius: 18px;
  background: rgba(5,7,12,.72);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  backdrop-filter: blur(12px);
}
.demo-video-card {
  padding: 14px;
  display: grid;
  align-content: end;
  gap: 12px;
}
.demo-video-screen {
  min-height: 170px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-a, #f97316) 44%, transparent), rgba(255,255,255,.06)),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 9rem);
}
.demo-video-screen::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: rotate(18deg);
  animation: demoVideoSweep 4.2s linear infinite;
}
@keyframes demoVideoSweep {
  from { translate: -45% 0; }
  to { translate: 45% 0; }
}
.demo-play {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding-left: 4px;
  background: #fff;
  color: #05070c;
  font-size: 1.25rem;
  font-weight: 950;
  box-shadow: 0 20px 55px rgba(0,0,0,.25);
}
.demo-video-screen small {
  position: absolute;
  z-index: 1;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
}
.demo-video-card strong { color:#fff; font-size:1.15rem; line-height:1.05; }
.demo-video-card p { margin:0; color:rgba(255,255,255,.65); line-height:1.45; }
@media (max-width: 980px) {
  .demo-media-section,
  .demo-media-grid { grid-template-columns: 1fr; }
}


/* v3.7.6.3a.4 SAMPLE SITES PRO */
.sample-sites-pro-block,
.sample-sites-pro-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(56,189,248,.28);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.16), transparent 18rem),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.sample-sites-pro-head h3,
.sample-sites-pro-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 5.2rem);
  line-height: .82;
  letter-spacing: -.095em;
}

.sample-sites-pro-head p:not(.kicker) {
  max-width: 860px;
  color: var(--muted);
  line-height: 1.55;
}

.sample-sites-pro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sample-site-pro-card {
  min-height: 290px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, var(--pro-a, #38bdf8), transparent 14rem),
    radial-gradient(circle at bottom left, var(--pro-b, #a78bfa), transparent 12rem),
    rgba(255,255,255,.055);
  display: grid;
  align-content: end;
  gap: 9px;
  color: #fff;
  overflow: hidden;
}

.sample-site-pro-card span {
  color: rgba(255,255,255,.78);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sample-site-pro-card strong {
  font-size: 1.65rem;
  line-height: .96;
}

.sample-site-pro-card small {
  color: rgba(255,255,255,.76);
  line-height: 1.45;
}

.sample-site-pro-card div,
.sample-sites-pro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sample-site-pro-card a,
.sample-site-pro-card button {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.92);
  color: #05070c;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.sample-site-pro-card a:first-child {
  background: rgba(5,7,12,.68);
  color: #fff;
}

.example-site-card .example-site-content p::after {
  content: " · multipagina + redirect";
  color: #bae6fd;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .sample-sites-pro-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .sample-sites-pro-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.7.63.5 - fix esempio: un solo pulsante basso e click affidabile */
.example-flow-setup #landingExampleFullDemoLink,
.example-flow-generated #landingExampleFullDemoLink {
  display: none !important;
}
.example-flow-generated #landingExampleGeneratorLink {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}
.example-flow-generated .landing-example-actions {
  align-items: stretch;
}
.example-flow-generated .landing-example-actions #landingExampleGeneratorLink {
  flex: 1 1 100%;
}

/* v3.7.6.7 - MOBILE NAV/DASHBOARD FIX
   La barra superiore non deve rompersi su iPhone: brand sempre visibile,
   comandi su riga scrollabile, safe-area rispettata e contenuto non coperto. */
@media (max-width: 820px) {
  .top-nav,
  .top-nav.commercial-top-nav,
  .top-nav.generator-nav {
    top: max(8px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    transform: none;
    width: auto !important;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 24px;
    overflow: hidden;
  }

  .top-nav .brand {
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 0 2px;
  }

  .top-nav .brand-mark {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .top-nav .brand strong {
    font-size: 1rem;
    white-space: nowrap;
  }

  .top-nav .brand small {
    font-size: .68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-nav nav,
  .top-nav.generator-nav nav,
  .top-nav.commercial-top-nav nav {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 2px 2px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .top-nav nav::-webkit-scrollbar { display: none; }

  .top-nav nav a,
  .top-nav nav button,
  .top-nav .nav-cta,
  .top-nav .nav-brand-kit-link,
  .top-nav .nav-motion-link,
  .top-nav .view-generated-result-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 42px;
    max-width: none;
    padding: 10px 14px !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px;
  }

  /* Sulla landing da telefono mostro solo i comandi utili, non tutta la barra lunga. */
  .commercial-top-nav nav a:not(.nav-cta):not([href="#site-examples"]) {
    display: none !important;
  }

  body.landing-page .landing-hero {
    padding-top: 150px !important;
  }

  body.generator-page .generator-layout {
    padding-top: 150px !important;
  }

  body.generated-result .generator-layout,
  body.has-generated-result:not(.generated-result) .generator-layout {
    padding-top: 150px !important;
  }

  .dashboard-return-site-panel {
    margin-top: 0;
  }
}

@media (max-width: 480px) {
  .top-nav,
  .top-nav.commercial-top-nav,
  .top-nav.generator-nav {
    left: 8px;
    right: 8px;
    padding: 9px;
    border-radius: 22px;
  }

  .top-nav nav a,
  .top-nav nav button,
  .top-nav .nav-cta,
  .top-nav .nav-brand-kit-link,
  .top-nav .nav-motion-link,
  .top-nav .view-generated-result-btn {
    min-height: 40px;
    padding: 9px 12px !important;
    font-size: .78rem !important;
  }

  body.landing-page .landing-hero,
  body.generator-page .generator-layout,
  body.generated-result .generator-layout,
  body.has-generated-result:not(.generated-result) .generator-layout {
    padding-top: 145px !important;
  }

  .generator-layout {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* v3.7.6.3a.5 MOBILE NAV COMPLETA - FIX DEFINITIVO
   Su telefono la barra non deve nascondere le voci: diventa una barra a 2 righe
   con tutti i pulsanti scorrevoli e cliccabili. */
@media (max-width: 760px) {
  .top-nav,
  .top-nav.commercial-top-nav,
  .top-nav.generator-nav {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    min-height: 0;
    transform: none;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 28px;
    overflow: visible;
  }

  .top-nav .brand {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 2px 4px 0;
  }

  .top-nav .brand strong {
    font-size: clamp(1.35rem, 7vw, 2.15rem);
    line-height: .9;
    white-space: nowrap;
  }

  .top-nav .brand small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.78rem, 3.8vw, 1.05rem);
  }

  .top-nav nav,
  .commercial-top-nav nav,
  .generator-nav nav {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    scroll-snap-type: x proximity;
  }

  .top-nav nav::-webkit-scrollbar,
  .commercial-top-nav nav::-webkit-scrollbar,
  .generator-nav nav::-webkit-scrollbar {
    display: none;
  }

  .top-nav nav a,
  .top-nav nav button,
  .top-nav nav a:not(.nav-cta),
  .generator-nav nav a,
  .generator-nav nav button,
  .commercial-top-nav nav a,
  .commercial-top-nav nav button {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: none;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.78);
    font-size: .9rem;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    scroll-snap-align: start;
    pointer-events: auto;
  }

  .top-nav .nav-cta,
  .top-nav nav button,
  .generator-nav nav button.view-generated-result-btn {
    background: #fff !important;
    color: #05070c !important;
    border-color: rgba(255,255,255,.86);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
  }

  .top-nav nav::after {
    content: "";
    flex: 0 0 4px;
  }

  .landing-hero,
  .commercial-hero {
    padding-top: 172px !important;
  }

  .generator-layout {
    padding-top: 172px !important;
  }
}

@media (max-width: 420px) {
  .top-nav,
  .top-nav.commercial-top-nav,
  .top-nav.generator-nav {
    left: 8px;
    right: 8px;
    padding: 10px;
    border-radius: 24px;
  }

  .top-nav .brand {
    grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr);
    gap: 8px;
  }

  .top-nav .brand-mark {
    width: 26px;
    height: 26px;
  }

  .top-nav nav a,
  .top-nav nav button,
  .top-nav nav a:not(.nav-cta),
  .generator-nav nav a,
  .generator-nav nav button,
  .commercial-top-nav nav a,
  .commercial-top-nav nav button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: .84rem;
  }

  .landing-hero,
  .commercial-hero {
    padding-top: 164px !important;
  }

  .generator-layout {
    padding-top: 164px !important;
  }
}


/* v3.7.6.3a.6 RESPONSIVE REALE - telefono/tablet/desktop
   Non nasconde funzioni: su mobile le barre diventano scorrevoli e i pannelli si impilano. */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .generator-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 132px 14px 88px !important;
  }
  .step-rail {
    position: sticky !important;
    top: 108px !important;
    z-index: 30 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px !important;
    border-radius: 22px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .step-rail::-webkit-scrollbar { display: none; }
  .rail-label { display: none !important; }
  .rail-step {
    flex: 0 0 auto !important;
    min-width: 112px !important;
    min-height: 44px !important;
    grid-template-columns: 28px auto !important;
    padding: 9px 11px !important;
    white-space: nowrap !important;
  }
  .builder-stage, .preview-shell { width: 100% !important; min-width: 0 !important; }
  .preview-shell { min-height: 560px !important; overflow: auto !important; }
  #previewFrame { width: 100% !important; min-width: 0 !important; height: 760px !important; }
  .stage-head { grid-template-columns: 1fr !important; }
  .control-grid.two, .control-grid.three, .template-cards, .scene-editor-grid, .page-mode-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .top-nav, .top-nav.generator-nav, .top-nav.commercial-top-nav {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 10px !important;
    border-radius: 24px !important;
    overflow: visible !important;
  }
  .top-nav .brand {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .top-nav .brand strong { font-size: 1.05rem !important; white-space: nowrap !important; }
  .top-nav .brand small { display: inline !important; font-size: .76rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .top-nav nav, .generator-nav nav, .commercial-top-nav nav {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px !important;
  }
  .top-nav nav::-webkit-scrollbar, .generator-nav nav::-webkit-scrollbar, .commercial-top-nav nav::-webkit-scrollbar { display: none; }
  .top-nav nav a, .top-nav nav button,
  .top-nav nav a:not(.nav-cta), .commercial-top-nav nav a:not(.nav-cta):not([href="#site-examples"]),
  .generator-nav nav a, .generator-nav nav button {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: .8rem !important;
    line-height: 1 !important;
    pointer-events: auto !important;
  }
  .landing-hero, .commercial-hero { padding-top: 148px !important; }
  .generator-layout { padding: 148px 10px 92px !important; }
  .step-rail { top: 126px !important; margin-bottom: 2px !important; }
  .builder-stage { padding: 14px !important; border-radius: 22px !important; }
  .panel-copy h2 { font-size: clamp(1.8rem, 13vw, 3.4rem) !important; line-height: .92 !important; }
  .stage-actions {
    position: sticky !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 55 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 20px !important;
    background: rgba(5,7,12,.94) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }
  .stage-actions .primary-action, .stage-actions .secondary-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    font-size: .86rem !important;
  }
  #generatePreviewBtn { grid-column: 1 / -1 !important; }
}

@media (max-width: 420px) {
  .generator-layout { padding-top: 142px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .step-rail { top: 122px !important; }
  .rail-step { min-width: 98px !important; font-size: .78rem !important; }
  .top-nav nav a, .top-nav nav button, .generator-nav nav a, .generator-nav nav button { font-size: .74rem !important; padding: 8px 10px !important; }
}


/* v3.7.6.3a.7 FIX BARRA ALTA COMPLETA
   La barra in alto deve mostrare tutte le scritte anche da telefono/tablet.
   Nessuna voce viene nascosta: se lo spazio è poco, la barra diventa scorrevole. */
@media (max-width: 1180px) {
  .top-nav nav a,
  .top-nav nav button,
  .top-nav nav a:not(.nav-cta),
  .top-nav nav a:not(.nav-cta):nth-of-type(n+7):not(:last-child),
  .commercial-top-nav nav a:not(.nav-cta):not([href="#site-examples"]),
  .generator-nav nav a,
  .generator-nav nav button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .top-nav,
  .top-nav.generator-nav,
  .top-nav.commercial-top-nav {
    overflow: visible !important;
  }

  .top-nav nav,
  .generator-nav nav,
  .commercial-top-nav nav {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .top-nav nav a,
  .top-nav nav button,
  .generator-nav nav a,
  .generator-nav nav button,
  .commercial-top-nav nav a,
  .commercial-top-nav nav button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .top-nav,
  .top-nav.generator-nav,
  .top-nav.commercial-top-nav {
    max-height: none !important;
  }

  .top-nav .brand small {
    display: inline-flex !important;
    max-width: none !important;
  }

  .top-nav nav,
  .generator-nav nav,
  .commercial-top-nav nav {
    padding: 3px 4px 7px !important;
    margin: 0 -2px !important;
  }

  .top-nav nav::before,
  .top-nav nav::after,
  .generator-nav nav::before,
  .generator-nav nav::after,
  .commercial-top-nav nav::before,
  .commercial-top-nav nav::after {
    content: "";
    flex: 0 0 4px;
  }
}

/* v3.6.16 - fix mobile: rimozione grande spazio nero sopra i pulsanti nel percorso guidato */
@media (max-width: 640px) {
  .guided-creator-overlay:not(.hidden) .guided-creator-main {
    padding-bottom: 148px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-stage {
    padding-bottom: 158px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions {
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    padding: 10px !important;
  }
}

@media (max-width: 560px) {
  .guided-creator-overlay:not(.hidden) .guided-creator-main {
    padding-bottom: 132px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-stage {
    padding-bottom: 142px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-middle {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-export,
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-first {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v3.6.17 - correzione griglia pulsanti: mantieni il numero corretto di tasti, riduci solo lo spazio vuoto */
@media (max-width: 560px) {
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-first {
    grid-template-columns: 1fr !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-export {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .guided-creator-overlay:not(.hidden) .guided-creator-actions.guided-actions-middle {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tendina font stile Word - scura e funzionante */
.native-font-select-hidden { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.word-font-select { position:relative; width:100%; margin-top:10px; z-index:20; }
.word-font-button { width:100%; min-height:58px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); color:#fff; display:grid; grid-template-columns:36px 1fr 28px; align-items:center; gap:10px; padding:0 18px; text-align:left; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 40px rgba(0,0,0,.24); }
.word-font-button:hover { border-color:rgba(231,168,67,.62); }
.word-font-icon { width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center; color:#e7a843; border:1px solid rgba(231,168,67,.58); font-weight:900; font-family:Georgia, serif; }
.word-font-name { font-size:1.08rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.word-font-arrow { color:rgba(255,255,255,.72); font-size:1.3rem; justify-self:end; }
.word-font-list { display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); max-height:360px; padding:12px; border-radius:22px; border:1px solid rgba(231,168,67,.35); background:linear-gradient(180deg, rgba(28,18,24,.98), rgba(8,10,16,.98)); box-shadow:0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); z-index:9999; }
.word-font-select.open { z-index:99999; }
.word-font-select.open .word-font-list { display:block; }
.word-font-search { width:100%; height:48px; border-radius:15px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; padding:0 14px; margin-bottom:10px; outline:none; }
.word-font-search::placeholder { color:rgba(255,255,255,.48); }
.word-font-options { max-height:300px; overflow-y:auto; padding-right:4px; }
.word-font-option { width:100%; min-height:58px; border:0; border-radius:14px; background:transparent; color:rgba(255,255,255,.88); display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; padding:8px 10px; text-align:left; cursor:pointer; }
.word-font-option-text { min-width:0; display:block; }
.word-font-option-name { display:block; font-size:1.26rem; line-height:1.15; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.word-font-option:hover, .word-font-option.active { background:linear-gradient(90deg, rgba(231,168,67,.28), rgba(255,255,255,.08)); color:#fff; }
.font-writing-preview { margin-top:20px; border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:22px; background:rgba(255,255,255,.05); }
.font-writing-preview small { color:rgba(255,255,255,.58); text-transform:uppercase; letter-spacing:.12em; }
.font-writing-preview h3 { color:#fff; margin:12px 0 8px; font-size:clamp(1.7rem, 4vw, 3rem); }
.font-writing-preview p { color:rgba(255,255,255,.76); font-size:1rem; }
.font-writing-preview figure { margin:10px 0; }
.font-writing-preview figcaption { color:rgba(255,255,255,.62); }
.font-writing-preview nav { color:rgba(255,255,255,.86); margin:12px 0; }
@media (max-width:720px) { .word-font-list { position:fixed; left:18px; right:18px; top:auto; bottom:92px; max-height:58vh; } .word-font-options { max-height:calc(58vh - 74px); } }


/* FIX DEFINITIVO FONT: la select nativa non deve mai aprirsi */
select.native-font-select-hidden,
.native-font-select-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -999999px !important;
  top: -999999px !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Tendina custom vera, non del browser */
.word-font-select {
  position: relative !important;
  width: 100% !important;
  margin-top: 10px !important;
  z-index: 50 !important;
}

.word-font-button {
  width: 100% !important;
  min-height: 58px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  color: #fff !important;
  display: grid !important;
  grid-template-columns: 34px 1fr 28px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 38px rgba(0,0,0,.24) !important;
}

.word-font-button:hover,
.word-font-select.open .word-font-button {
  border-color: rgba(42, 214, 202, .8) !important;
  box-shadow: 0 0 0 3px rgba(42,214,202,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.word-font-icon {
  width: 24px !important;
  height: 24px !important;
  border: 2px solid rgba(42,214,202,.75) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  color: rgba(42,214,202,.95) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 900 !important;
}

.word-font-name {
  color: #fff !important;
  font-size: 21px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.word-font-arrow {
  color: rgba(255,255,255,.75) !important;
  font-size: 25px !important;
  justify-self: end !important;
}

.word-font-list {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  max-height: 390px !important;
  padding: 13px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(231,168,67,.45) !important;
  background: linear-gradient(180deg, rgba(27,17,24,.98), rgba(8,10,16,.99)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;
  z-index: 999999 !important;
}

.word-font-select.open {
  z-index: 999999 !important;
}

.word-font-select.open .word-font-list {
  display: block !important;
}

.word-font-search {
  width: 100% !important;
  height: 50px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.35) !important;
  color: #fff !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  outline: none !important;
}

.word-font-search::placeholder {
  color: rgba(255,255,255,.48) !important;
}

.word-font-options {
  max-height: 310px !important;
  overflow-y: auto !important;
  padding: 8px 4px 4px !important;
}

.word-font-option {
  width: 100% !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: #fff !important;
  display: grid !important;
  grid-template-columns: 34px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.word-font-option:hover,
.word-font-option.active {
  background: rgba(231,168,67,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(231,168,67,.55) !important;
}

.word-font-option-name {
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 720px) {
  .word-font-list {
    position: fixed !important;
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 94px !important;
    max-height: 58vh !important;
  }
  .word-font-options {
    max-height: calc(58vh - 76px) !important;
  }
}

/* Font 100% reali: tutte le voci usano font Google caricati */
.word-font-option-name,
.word-font-name {
  font-synthesis: none !important;
  letter-spacing: normal !important;
}
.word-font-option-name {
  font-size: 25px !important;
}


/* SCELTA FONT A CARD: niente tendina browser/Safari */
.font-card-picker {
  width: 100%;
  margin-top: 12px;
}

.font-selected-preview {
  width: 100%;
  border: 1px solid rgba(42,214,202,.55);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(42,214,202,.10), rgba(255,255,255,.04));
  color: #fff;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.24);
}

.font-selected-label {
  color: rgba(255,255,255,.62);
  font: 800 12px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.font-selected-name {
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  font-weight: 900;
}

.font-selected-hint {
  color: rgba(255,255,255,.62);
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
}

.font-card-search {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: #fff;
  padding: 0 15px;
  font-size: 17px;
  outline: none;
}

.font-card-search::placeholder {
  color: rgba(255,255,255,.48);
}

.font-card-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding: 2px 4px 4px 2px;
}

.font-card-option {
  min-height: 76px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  color: #fff;
  padding: 13px 14px;
  text-align: left;
  display: grid;
  align-content: center;
  gap: 7px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.font-card-option:hover {
  transform: translateY(-1px);
  border-color: rgba(231,168,67,.55);
}

.font-card-option.active {
  border-color: rgba(42,214,202,.8);
  background: linear-gradient(180deg, rgba(42,214,202,.14), rgba(231,168,67,.08));
  box-shadow: 0 0 0 3px rgba(42,214,202,.11);
}

.font-card-option strong {
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-synthesis: none;
}

.font-card-option span {
  font: 800 11px/1 Inter, system-ui, sans-serif;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.font-card-option.active span {
  color: rgba(42,214,202,.95);
}

.font-card-more {
  width: 100%;
  margin-top: 10px;
  min-height: 46px;
  border: 1px solid rgba(231,168,67,.45);
  border-radius: 16px;
  background: rgba(231,168,67,.10);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width:720px) {
  .font-card-list {
    grid-template-columns: 1fr;
    max-height: 320px;
  }
  .font-selected-name {
    font-size: 34px;
  }
}


/* SCELTA COMPLETA FONT: card per ogni tipologia di scritta */
.font-card-tools {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.font-card-reset {
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 16px;
  font-weight: 900;
  cursor: pointer;
}

.font-card-empty {
  color: rgba(255,255,255,.7);
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 16px;
}

.font-card-picker {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 14px;
  background: rgba(0,0,0,.10);
}

@media (max-width:720px) {
  .font-card-tools {
    grid-template-columns: 1fr;
  }
}


/* ANTEPRIMA LIVE FONT: fa capire subito che font sta scegliendo il cliente */
.font-live-showcase {
  grid-column: 1 / -1;
  border: 1px solid rgba(42,214,202,.42);
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 12% 8%, rgba(42,214,202,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 52px rgba(0,0,0,.28);
  margin-bottom: 8px;
}

.font-live-head {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}

.font-live-head span {
  color: #2ad6ca;
  font: 900 12px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.font-live-head strong {
  color: #fff;
  font: 900 clamp(20px, 2.6vw, 32px)/1.05 Inter, system-ui, sans-serif;
}

.font-live-browser {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.20)),
    radial-gradient(circle at 85% 10%, rgba(231,168,67,.18), transparent 38%);
  display: grid;
  gap: 14px;
}

.font-live-nav {
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.font-live-browser h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 6vw, 74px);
  line-height: .92;
  letter-spacing: -.05em;
}

.font-live-subtitle {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: clamp(20px, 2.8vw, 31px);
  line-height: 1.18;
}

.font-live-body {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.55;
  max-width: 850px;
}

.font-live-browser small {
  color: rgba(255,255,255,.56);
  font-size: 14px;
}

.font-live-browser button {
  width: max-content;
  border: 1px solid rgba(231,168,67,.62);
  border-radius: 999px;
  background: linear-gradient(135deg, #e7a843, #ff6b4a);
  color: #111;
  padding: 13px 24px;
  font-weight: 900;
  font-size: 16px;
  cursor: default;
}

@media (max-width:720px) {
  .font-live-showcase {
    padding: 14px;
  }
  .font-live-browser {
    padding: 18px;
  }
  .font-live-browser h3 {
    font-size: 38px;
  }
}


/* FONT STEP FINALE: scelta stile + lista font riconoscibili */
.font-style-picker {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 28px;
  padding: clamp(14px, 2vw, 22px);
  background: radial-gradient(circle at 18% 10%, rgba(42,214,202,.10), transparent 34%),
              linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 44px rgba(0,0,0,.18);
}

.font-style-title {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.font-style-title strong {
  color: #fff;
  font: 900 clamp(21px, 2.4vw, 32px)/1.05 Inter, system-ui, sans-serif;
}

.font-style-title span {
  color: rgba(255,255,255,.62);
  font: 600 15px/1.35 Inter, system-ui, sans-serif;
}

.font-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.font-style-card {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  color: #fff;
  min-height: 112px;
  padding: 16px;
  text-align: left;
  display: grid;
  gap: 7px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.font-style-card:hover {
  transform: translateY(-1px);
  border-color: rgba(231,168,67,.55);
}

.font-style-card.active {
  border-color: rgba(42,214,202,.82);
  background: linear-gradient(180deg, rgba(42,214,202,.14), rgba(231,168,67,.07));
  box-shadow: 0 0 0 3px rgba(42,214,202,.10);
}

.font-style-card strong {
  color: #fff;
  font-size: clamp(25px, 2.7vw, 36px);
  line-height: 1;
  font-weight: 900;
  font-synthesis: none;
}

.font-style-card small {
  color: rgba(255,255,255,.62);
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
}

.font-style-card span {
  color: rgba(255,255,255,.55);
  font: 900 11px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.font-style-card.active span {
  color: #2ad6ca;
}

.font-style-current {
  border: 1px solid rgba(42,214,202,.55);
  border-radius: 22px;
  padding: 15px 17px;
  margin: 4px 0 18px;
  background: linear-gradient(180deg, rgba(42,214,202,.10), rgba(255,255,255,.035));
  display: grid;
  gap: 7px;
}

.font-style-current span {
  color: rgba(42,214,202,.95);
  font: 900 12px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.font-style-current strong {
  color: #fff;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: .95;
  font-weight: 900;
  font-synthesis: none;
}

.font-style-current em {
  color: rgba(255,255,255,.88);
  font-style: normal;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.05;
  font-synthesis: none;
}

.font-style-list-title {
  display: grid;
  gap: 5px;
  margin: 8px 0 10px;
}

.font-style-list-title strong {
  color: #fff;
  font: 900 clamp(20px, 2.2vw, 29px)/1.05 Inter, system-ui, sans-serif;
}

.font-style-list-title span {
  color: rgba(255,255,255,.58);
  font: 600 14px/1.3 Inter, system-ui, sans-serif;
}

.font-style-closed {
  width: 100%;
  border: 1px solid rgba(42,214,202,.55);
  border-radius: 17px;
  background: #0c0f15;
  color: #fff;
  min-height: 58px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  text-align: left;
  margin-bottom: 10px;
  cursor: default;
}

.font-style-closed span {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  font-weight: 900;
  font-synthesis: none;
}

.font-style-closed i {
  font-style: normal;
  color: rgba(255,255,255,.78);
  font-size: 25px;
  text-align: right;
}

.font-style-list {
  border: 1px solid rgba(231,168,67,.45);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(16,20,29,.99), rgba(8,10,16,.98));
  overflow-y: auto;
  max-height: 440px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.font-style-row {
  width: 100%;
  min-height: 70px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(180px, .85fr) 1.15fr;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.font-style-row:hover,
.font-style-row.active {
  background: rgba(231,168,67,.12);
  box-shadow: inset 0 0 0 1px rgba(231,168,67,.55);
}

.font-style-row strong {
  color: #fff;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  font-weight: 900;
  font-synthesis: none;
}

.font-style-row span {
  color: rgba(255,255,255,.76);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.08;
  font-style: normal;
  font-synthesis: none;
}

.font-style-preview {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.20)),
              radial-gradient(circle at 88% 8%, rgba(231,168,67,.17), transparent 38%);
  display: grid;
  gap: 11px;
}

.font-style-preview span {
  color: #2ad6ca;
  font: 900 12px/1 Inter, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.font-style-preview strong {
  color: #fff;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .95;
  font-weight: 900;
  font-synthesis: none;
}

.font-style-preview p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(20px, 2.5vw, 30px);
  line-height: 1.25;
}

.font-style-preview button {
  width: max-content;
  border: 1px solid rgba(231,168,67,.62);
  border-radius: 999px;
  background: linear-gradient(135deg, #e7a843, #ff6b4a);
  color: #111;
  padding: 12px 22px;
  font-weight: 900;
  font-size: 16px;
}

@media (max-width: 760px) {
  .font-style-grid {
    grid-template-columns: 1fr;
  }
  .font-style-row {
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: 78px;
  }
  .font-style-list {
    max-height: 390px;
  }
}


/* v3.7.6.3a.4.1 FONT STEP PERSONALIZATION PRO */
.font-step-panel-pro {
  gap: 18px;
}

.font-step-copy h2 {
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  line-height: .78;
}

.font-step-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 14px;
  margin: 8px 0 16px;
}

.font-step-dashboard-main,
.font-step-status,
.font-preset-pro-section,
.font-role-pro-section,
.font-writing-preview-pro {
  border: 1px solid rgba(42,214,202,.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(42,214,202,.16), transparent 18rem),
    radial-gradient(circle at bottom left, rgba(231,168,67,.10), transparent 18rem),
    rgba(255,255,255,.055);
  box-shadow: 0 24px 70px rgba(0,0,0,.20);
}

.font-step-dashboard-main {
  padding: 22px;
}

.font-step-dashboard-main h3 {
  margin: 0;
  max-width: 880px;
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 5.8rem);
  line-height: .78;
  letter-spacing: -.105em;
}

.font-step-dashboard-main p:not(.kicker) {
  margin: 12px 0 0;
  max-width: 780px;
  color: rgba(255,255,255,.66);
  line-height: 1.55;
}

.font-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.font-step-status {
  min-height: 220px;
  padding: 20px;
  display: grid;
  align-content: end;
  gap: 8px;
}

.font-step-status span,
.font-step-section-title span,
.font-preset-card-pro span,
.font-role-card-pro > span {
  color: #2ad6ca;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.font-step-status strong {
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: .80;
  letter-spacing: -.095em;
}

.font-step-status small {
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.font-preset-pro-section,
.font-role-pro-section {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.font-step-section-title {
  display: grid;
  gap: 5px;
}

.font-step-section-title strong {
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.font-step-section-title small {
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.font-preset-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.font-preset-card-pro {
  min-height: 170px;
  text-align: left;
  color: #fff;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(42,214,202,.12), transparent 13rem),
    rgba(255,255,255,.045);
  cursor: pointer;
  display: grid;
  align-content: end;
  gap: 6px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.font-preset-card-pro:hover,
.font-preset-card-pro.active {
  transform: translateY(-2px);
  border-color: rgba(42,214,202,.72);
  box-shadow: 0 0 0 4px rgba(42,214,202,.10), 0 24px 70px rgba(0,0,0,.20);
  background:
    radial-gradient(circle at top right, rgba(42,214,202,.20), transparent 14rem),
    rgba(42,214,202,.060);
}

.font-preset-card-pro strong {
  display: block;
  font-size: 1.22rem;
  line-height: 1;
}

.font-preset-card-pro small {
  color: rgba(255,255,255,.62);
  line-height: 1.35;
}

.font-native-preset-select {
  max-width: 340px;
}

.font-role-grid-pro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.font-role-card-pro {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 220px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
}

.font-role-card-pro strong {
  color: #fff;
  font-size: 1.16rem;
  line-height: 1.05;
}

.font-writing-preview-pro {
  padding: 22px;
}

.font-writing-preview-pro h3 {
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: .86;
  letter-spacing: -.07em;
}

@media (max-width: 1100px) {
  .font-step-dashboard,
  .font-preset-card-grid,
  .font-role-grid-pro {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 820px) {
  .guided-section-card { gap: 18px; }
  .guided-section-copy h3 { font-size: 2.25rem; line-height: .92; letter-spacing: -.06em; }
  .guided-section-copy p { font-size: .98rem; line-height: 1.5; }
  .guided-section-big-number { font-size: 5rem; }
  .guided-section-topmeta { gap: 6px; }
}


/* Step 2 font: tutti i campi uguali alla prima scelta */
.guided-font-field {
  grid-column: 1 / -1;
  position: relative;
}

.guided-font-select {
  width: 100%;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(0,0,0,.34);
  color: #fff;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1.1;
}

.guided-font-select span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guided-font-select i {
  font-style: normal;
  opacity: .75;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.45rem;
  flex: 0 0 auto;
}

.guided-font-field.open .guided-font-select {
  border-color: rgba(211,145,36,.70);
  box-shadow: 0 0 0 2px rgba(211,145,36,.18);
}

.guided-font-options {
  display: none;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(3,3,8,.94);
  margin-top: 14px;
}

.guided-font-field.open .guided-font-options {
  display: grid;
}

.guided-font-option {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
  color: #fff;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 1.55rem;
  cursor: pointer;
}

.guided-font-option:last-child {
  border-bottom: 0;
}

.guided-font-option.active {
  color: #f1b63e;
  background: rgba(211,145,36,.08);
}

.guided-font-option strong {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.75rem;
  color: #f1b63e;
}

@media (max-width: 820px) {
  .guided-font-select {
    min-height: 60px;
    border-radius: 18px;
    padding: 12px 18px;
    font-size: 1.16rem;
  }

  .guided-font-option {
    min-height: 52px;
    padding: 9px 18px;
    font-size: 1.25rem;
  }

  .guided-font-option strong {
    font-size: 1.45rem;
  }
}