:root {
  --accent: #7c3aed;
  --accent-glow: rgba(124,58,237,.35);
  --nav-bg: #f3f4f6;
  --nav-h: 72px;
  --text: #0a0f1e;
  --text-muted: #6b7280;
  --bg: #ffffff;
  --bg-soft: #f7f8fc;
  --border: #e8eaf0;
  --radius: 20px;
  --dark: #04080f;
  --dark-2: #080f1f;
  --dark-border: rgba(255,255,255,.07);
}
* { box-sizing: border-box; }
body { font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--text); background: var(--bg); margin: 0; padding-top: var(--nav-h); }


/* ─── Hero ───────────────────────────────────── */
.hero {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 54% 48% at 82% 14%, rgba(124,58,237,.72) 0%, transparent 55%),
    radial-gradient(ellipse 50% 44% at 10% 84%, rgba(67,56,202,.62) 0%, transparent 55%),
    #0a0714;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }

.hero-overline {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/*.hero-overline::before {*/
/*  content: '';*/
/*  display: block;*/
/*  width: 24px;*/
/*  height: 1px;*/
/*  background: #a78bfa;*/
/*  flex-shrink: 0;*/
/*}*/

.hero h1 {
  font-size: clamp(3.2rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -2.5px;
  color: #ffffff;
  margin: 0;
}
.hero h1 .h1-thin {
  font-weight: 600;
  color: rgba(255,255,255,.42);
  /*font-size: .82em;*/
  letter-spacing: -1px;
}
.hero h1 .h1-accent {
  background: linear-gradient(90deg, #a78bfa 0%, #c4b5fd 25%, #ffffff 48%, #c4b5fd 72%, #a78bfa 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  will-change: background-position;
  transform: translateZ(0);
}

.hero-desc {
  font-size: 1.05rem;
  color: rgba(255,255,255,.58);
  max-width: 430px;
  line-height: 1.8;
  margin: 28px 0 0;
}

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

.btn-hero-primary {
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 30px;
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 8px 32px rgba(124,58,237,.45);
  transition: transform .15s, box-shadow .15s;
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(124,58,237,.6); color: #fff; }

.btn-hero-ghost {
  background: transparent;
  color: rgba(255,255,255,.8);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 15px 28px;
  font-size: .98rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all .15s;
}
.btn-hero-ghost:hover { border-color: rgba(255,255,255,.45); color: #fff; }

.hero-trust {
  margin-top: 32px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: rgba(255,255,255,.38);
}

/* ─── iPhone Mockup ──────────────────────────── */
.iphone-outer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.iphone {
  width: 264px;
  background: #1a1a1c;
  border-radius: 48px;
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 40px 80px rgba(0,0,0,.22);
  transform: none;
  position: relative;
  z-index: 1;
}
.iphone::before {
  content: '';
  position: absolute;
  left: -3px; top: 78px;
  width: 3px; height: 28px;
  background: #2c2c2e; border-radius: 2px 0 0 2px;
  box-shadow: 0 44px 0 #2c2c2e, 0 82px 0 #2c2c2e;
}
.iphone::after {
  content: '';
  position: absolute;
  right: -3px; top: 118px;
  width: 3px; height: 54px;
  background: #2c2c2e; border-radius: 0 2px 2px 0;
}
.iphone-screen {
  background: #fff;
  border-radius: 36px;
  overflow: hidden;
  height: 496px;
  position: relative;
}
.iphone-di {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 112px; height: 30px;
  background: #1a1a1c;
  border-radius: 20px;
  z-index: 20;
}
.iphone-home {
  width: 110px; height: 5px;
  background: #c7c7cc; border-radius: 3px;
  margin: 10px auto 5px;
}
.iphone-content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity .65s ease-in-out;
  pointer-events: none;
}
.iphone-content.active { opacity: 1; pointer-events: auto; }

/* Floating chips */
.hero-chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  border-radius: 12px;
  padding: 9px 16px;
  font-size: .75rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 10;
}
.chip-live { top: 60px; left: -50px; }
.chip-stats { bottom: 80px; right: -30px; }
.chip-dot-green { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; flex-shrink:0; }
.chip-dot-blue  { width:8px; height:8px; border-radius:50%; background:#60a5fa; box-shadow:0 0 8px #60a5fa; flex-shrink:0; }

/* ─── Section headers ────────────────────────── */
.section-label { display: none; }
.section-title {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.1;
}

/* ─── Bento Features ─────────────────────────── */
.features-bento {
  padding: 100px 0;
  background: var(--bg-soft);
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 190px 190px auto;
  gap: 14px;
  margin-top: 48px;
}
.bento-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.bento-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.08); transform: translateY(-2px); }
.bento-card.dark-card {
  background: var(--dark-2);
  border-color: var(--dark-border);
}
.bcard-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 16px;
  background: #eff6ff;
  color: var(--accent);
}
.bcard-icon.green { background: #f0fdf4; color: #16a34a; }
.bento-card h4 {
  font-size: clamp(1.1rem, 1.5vw, 1.95rem);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -.3px;
}
.bento-card p {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.bento-card.dark-card h4 { color: #e2e8f0; }
.bento-card.dark-card p { color: #64748b; }
.bento-mobile-extra { display: none; }

.bcard-watermark {
  position: absolute;
  bottom: -16px; right: 20px;
  font-size: 7rem;
  font-weight: 900;
  letter-spacing: -4px;
  color: rgba(124,58,237,.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Grid placement */
.bc-editor  { grid-column: 1/8;  grid-row: 1/3; }
.bc-mobile  { grid-column: 8/13; grid-row: 1/2; }
.bc-stats   { grid-column: 8/11; grid-row: 2/3; }
.bc-seo     { grid-column: 11/13;grid-row: 2/3; }
.bc-social  { grid-column: 1/9;  grid-row: 3/4; }
.bc-form    { grid-column: 9/13; grid-row: 3/4; }
.bc-eu      { grid-column: 1/5;  grid-row: 4/5; }
.bc-gdpr    { grid-column: 5/9;  grid-row: 4/5; }
.bc-qr      { grid-column: 9/13; grid-row: 4/5; }

/* Editor card mini-UI preview */
.bcard-editor-ui {
  margin-top: 20px;
  background: #f7f8fc;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
}
.bcard-ui-bar {
  background: #f0f2f7;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid var(--border);
}
.bcard-ui-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.bcard-ui-url { flex:1; background:#fff; border-radius:4px; padding:2px 8px; font-size:.58rem; color:#9ca3af; font-family:monospace; border:1px solid #e5e7eb; }
.bcard-ui-blocks { padding:10px; display:flex; flex-direction:column; gap:6px; }
.bcard-ui-block {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .6rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bcard-ui-block.active { border-color: var(--accent); background: #eff6ff; color: var(--accent); }
.bcard-ui-block i { font-size: .7rem; }
.bcard-ui-add {
  border: 1.5px dashed #d1d5db;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: .58rem;
  color: #9ca3af;
  text-align: center;
}

/* Analytics mini chart in stats card */
.mini-chart {
  margin-top: 12px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}
.mini-bar {
  flex: 1;
  background: #eff6ff;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.mini-bar.accent { background: var(--accent); }

/* Feature section refresh */
.features-bento {
  background: #f6f7fb;
  padding: 96px 0;
}
.features-bento .container {
  max-width: 1180px;
}
.features-bento .section-title {
  max-width: 760px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing: -0.8px;
}
.features-sub {
  max-width: 620px;
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
}
.features-bento .bento-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(168px, auto);
  gap: 12px;
  margin-top: 44px;
}
.features-bento .bento-card {
  border-radius: 12px;
  border-color: #e4e7ef;
  background: #fff;
  padding: 24px;
  box-shadow: none;
}
.features-bento .bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
}
.features-bento .bcard-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  margin-bottom: 18px;
  background: #f1edff;
  color: var(--accent);
  font-size: 1rem;
}
.features-bento .bcard-icon.green {
  background: #eefdf5;
  color: #15803d;
}
.features-bento .bento-card h4 {
  font-size: 1.12rem;
  letter-spacing: -0.1px;
  margin-bottom: 8px;
}
.features-bento .bento-card p {
  max-width: 44ch;
  font-size: .91rem;
  line-height: 1.65;
}
.features-bento .bcard-watermark {
  display: none;
}
.features-bento .bc-editor {
  grid-column: 1 / 7;
  grid-row: span 2;
}
.features-bento .bc-mobile {
  grid-column: 7 / 10;
}
.features-bento .bc-stats {
  grid-column: 10 / 13;
}
.features-bento .bc-seo {
  grid-column: 7 / 13;
}
.features-bento .bc-social {
  grid-column: 1 / 7;
}
.features-bento .bc-form {
  grid-column: 7 / 10;
}
.features-bento .bc-eu {
  grid-column: 10 / 13;
}
.features-bento .bc-gdpr {
  grid-column: 1 / 7;
  background: #fff !important;
  border-color: #e4e7ef !important;
}
.features-bento .bc-qr {
  grid-column: 7 / 13;
}
.features-bento .bcard-editor-ui {
  background: #fafbff;
  border-color: #e6e9f2;
  border-radius: 10px;
}
.features-bento .bcard-ui-bar {
  background: #f2f4f8;
}
.features-bento .bcard-ui-block {
  border-color: #e6e9f2;
  font-size: .72rem;
  padding: 8px 10px;
}
.features-bento .bcard-ui-block.active {
  border-color: #d8cffc;
  background: #f5f2ff;
  color: #4c1d95;
}
.features-bento .bcard-ui-add {
  border-color: #d8dde8;
  font-size: .7rem;
}
.features-bento .mini-chart {
  height: 54px;
  margin-top: 22px;
}
.features-bento .mini-bar {
  background: #ebeef6;
}
.features-bento .bc-seo > div:last-child {
  background: #fafbff !important;
  border-color: #e6e9f2 !important;
}
.features-bento .bc-seo > div:last-child div:first-child {
  color: var(--accent) !important;
}
.features-bento .bc-social > div:last-child,
.features-bento .bc-social > div:nth-child(2) {
  gap: 8px !important;
}
.features-bento .bc-social [style*="background:#fff7f0"],
.features-bento .bc-social [style*="background:#f0fdf4"],
.features-bento .bc-social [style*="background:#f0f4ff"],
.features-bento .bc-social [style*="background:#fdf4ff"] {
  background: #fafbff !important;
  border-color: #e6e9f2 !important;
  border-radius: 8px !important;
}
.features-bento .bc-qr svg {
  width: 64px;
  height: 64px;
}

.feature-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.feature-panel {
  background: #fff;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 24px;
  min-height: 180px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15,23,42,.07);
}
.feature-panel-main {
  grid-column: span 7;
  grid-row: span 2;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.feature-panel-stat,
.feature-panel-form {
  grid-column: span 5;
}
.feature-panel-qr {
  grid-column: span 6;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
}
.feature-panel-small {
  grid-column: span 2;
  min-height: 172px;
}
.feature-copy h4,
.feature-panel h4 {
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -.15px;
  margin: 0 0 8px;
}
.feature-copy p,
.feature-panel p {
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.65;
  margin: 0;
}
.feature-kicker {
  display: block;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.editor-preview {
  background: #f8f9fd;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  min-height: 260px;
  display: grid;
  grid-template-columns: 54px 1fr;
  overflow: hidden;
  margin-top: auto;
}
.editor-sidebar {
  background: #eef0f6;
  border-right: 1px solid #e0e4ee;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.editor-dot {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: #d8dde8;
}
.editor-dot.active {
  background: var(--accent);
}
.editor-canvas {
  padding: 16px;
}
.editor-bar {
  height: 34px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  font-size: .72rem;
  color: #6b7280;
}
.editor-bar strong {
  color: #15803d;
  font-size: .68rem;
}
.editor-hero {
  height: 86px;
  margin-top: 14px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(124,58,237,.9), rgba(99,102,241,.72)),
    #7c3aed;
}
.editor-lines {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.editor-lines span {
  height: 10px;
  border-radius: 99px;
  background: #e4e7ef;
}
.editor-lines span:nth-child(1) { width: 72%; }
.editor-lines span:nth-child(2) { width: 58%; }
.editor-lines span:nth-child(3) { width: 44%; }
.editor-block-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.editor-block-row span {
  height: 50px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e6e9f2;
}
.stats-preview {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stats-preview div {
  background: #f8f9fd;
  border: 1px solid #e6e9f2;
  border-radius: 10px;
  padding: 12px;
}
.stats-preview strong {
  display: block;
  font-size: 1.35rem;
  letter-spacing: -.5px;
}
.stats-preview span {
  color: var(--text-muted);
  font-size: .72rem;
}
.lead-preview {
  margin-top: 22px;
  border: 1px solid #e6e9f2;
  border-radius: 12px;
  background: #f8f9fd;
  padding: 14px;
  display: grid;
  gap: 4px;
}
.lead-preview span {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lead-preview small {
  color: var(--text-muted);
  font-size: .82rem;
}
.qr-preview {
  width: 112px;
  height: 112px;
  border: 1px solid #e6e9f2;
  border-radius: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.qr-preview svg {
  display: block;
  shape-rendering: crispEdges;
}

@media (max-width: 991px) {
  .feature-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-panel-main,
  .feature-panel-stat,
  .feature-panel-form,
  .feature-panel-qr,
  .feature-panel-small {
    grid-column: auto;
  }
  .feature-panel-main {
    grid-column: 1 / -1;
  }
}

@media (max-width: 576px) {
  .feature-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }
  .feature-panel-main,
  .feature-panel-stat,
  .feature-panel-form,
  .feature-panel-qr,
  .feature-panel-small {
    grid-column: 1;
    min-height: auto;
  }
  .feature-panel {
    padding: 20px;
  }
  .feature-panel-qr {
    grid-template-columns: 1fr;
  }
  .editor-preview {
    min-height: 220px;
    grid-template-columns: 44px 1fr;
  }
  .editor-block-row {
    grid-template-columns: 1fr;
  }
  .stats-preview {
    grid-template-columns: 1fr;
  }
}

/* Responsive bento */
@media (max-width: 991px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .bc-editor,.bc-mobile,.bc-stats,.bc-seo,.bc-form,.bc-eu,.bc-gdpr,.bc-social,.bc-qr {
    grid-column: auto; grid-row: auto;
  }
  .bc-editor { grid-column: 1/3; min-height: 200px; }
}
@media (max-width: 576px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bc-editor,.bc-mobile,.bc-stats,.bc-seo,.bc-form,.bc-eu,.bc-gdpr,.bc-social,.bc-qr { grid-column: 1; }
}

.bento-carousel-track { display: contents; }
.bento-bottom-row { display: contents; }

/* ─── How it works ───────────────────────────── */
.how-it-works {
  padding: 100px 0;
  background: #0f172a;
}
.how-steps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 64px;
  position: relative;
}
.how-step { padding: 0 36px 0 0; }
.how-step + .how-step { padding: 0 36px; border-left: 1px solid rgba(255,255,255,.1); }
.how-step:last-child { padding: 0 0 0 36px; }
.how-num {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -4px;
  color: rgba(255,255,255,.08);
  line-height: 1;
  margin-bottom: 12px;
}
.how-step strong {
  font-size: clamp(1.1rem, 1.5vw, 1.95rem);
  font-weight: 700;
  color: #f1f5f9;
  display: block;
  margin-bottom: 8px;
}
.how-step p { font-size: .9rem; color: #94a3b8; line-height: 1.7; margin: 0; }

@media (max-width: 767px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-steps::before { display: none; }
  .how-step, .how-step + .how-step, .how-step:last-child { padding: 0; border: none; }
  .how-step + .how-step { margin-top: 32px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 32px; }
}

/* ─── Examples ───────────────────────────────── */
.examples { padding: 100px 0; background: var(--bg-soft); }
.ex-card { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,.06); transition: transform .25s, box-shadow .25s; }
.ex-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.12); }
.ex-bar { background: #f9fafb; padding: 9px 12px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #f3f4f6; }
.ex-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ─── Bizcard section ────────────────────────── */
.bizcard-section { padding: 100px 0; background: linear-gradient(150deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); }
.phone-mock { width: 230px; background: #fff; border-radius: 32px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 8px #1e293b, 0 0 0 9px #334155; flex-shrink: 0; }
.phone-notch { width: 72px; height: 18px; background: #1e293b; border-radius: 0 0 12px 12px; margin: 0 auto; }
.qr-bubble { background: #fff; border-radius: 16px; padding: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.35); flex-shrink: 0; }

/* ─── Pricing ────────────────────────────────── */
.pricing { padding: 100px 0; background: var(--bg); }
.plan-card {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.plan-price { font-size: 2.8rem; font-weight: 800; letter-spacing: -2px; }
.plan-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
.plan-features { list-style: none; padding: 0; margin: 28px 0; flex: 1; }
.plan-features li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .95rem; align-items: flex-start; }
.plan-features li:last-child { border-bottom: none; }
.plan-features .bi-check2 { color: var(--accent); font-size: 1rem; flex-shrink: 0; margin-top: 2px; }

/* ─── CTA ────────────────────────────────────── */
.cta-section {
  padding: 120px 0;
  background: var(--dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.14), transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.cta-section h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -2px;
  color: #fff;
}
.cta-section p { font-size: 1.1rem; color: rgba(255,255,255,.4); }
.btn-cta {
  background: #fff;
  color: var(--text);
  border: none;
  border-radius: 14px;
  padding: 17px 38px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 40px rgba(255,255,255,.08);
  transition: transform .15s, color .15s;
}
.btn-cta:hover { transform: translateY(-2px); color: var(--accent); }

/* ─── Footer ─────────────────────────────────── */
footer { background: #030710; color: #5a6070; padding: 60px 0 32px; }
footer a { color: #5a6070; text-decoration: none; transition: color .15s; }
footer a:hover { color: #fff; }
.footer-brand { font-weight: 800; font-size: 1.3rem; color: #fff; letter-spacing: -.5px; }
.footer-brand span { color: var(--accent); }

/* ─── Cookie ─────────────────────────────────── */
#cookieBanner { position:fixed; bottom:0; left:0; right:0; background:#0a1020; border-top:1px solid rgba(255,255,255,.08); color:#fff; padding:16px 24px; z-index:9999; display:none; }
#cookieBanner.show { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
#cookieBanner p { margin:0; font-size:.88rem; opacity:.7; flex:1; min-width:200px; }
.cb-btn { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5); border-radius:100px; padding:8px 20px; font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .15s; }
.cb-btn:hover { background:rgba(255,255,255,.1); }

/* ─── Mobile optimizations (≤576px) ──────────── */
@media (max-width: 576px) {
  body { overflow-x: hidden; }
  .hero { padding: 110px 0 20px; min-height: auto; }
  .features-bento, .how-it-works, .examples, .bizcard-section, .pricing,
  #siti-reali, #seo-integrato, #novita { padding: 48px 0 !important; }
  .cta-section { padding: 64px 0 !important; }
  .hero h1 { font-size: clamp(2.6rem, 9vw, 3.2rem); }
  .hero-desc { font-size: .93rem; margin-top: 20px; }
  .hero-actions { margin-top: 28px; flex-wrap: nowrap; gap: 8px; }
  .btn-hero-primary, .btn-hero-ghost { padding: 13px 18px; font-size: .88rem; }
  .hero-trust { gap: 12px; margin-top: 20px; }
  .bento-grid { display: block; margin-top: 28px; }
  .bento-carousel-track {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px 16px;
    gap: 14px;
    align-items: stretch;
  }
  .bento-mobile-extra { display: block; }
  .bento-carousel-track::-webkit-scrollbar { display: none; }
  .bento-carousel-track .bento-card {
    flex: 0 0 calc(100vw - 48px);
    scroll-snap-align: start;
    min-height: 220px;
    overflow: hidden;
  }
  .bento-bottom-row {
    display: flex !important;
    gap: 14px;
    margin-top: 14px;
  }
  .bento-bottom-row .bento-card { flex: 1; min-height: 160px; }
  .how-steps {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    margin-top: 36px;
  }
  .how-step { padding: 0 8px; }
  .how-step + .how-step {
    border-left: 1px solid rgba(255,255,255,.1);
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    padding-left: 10px;
  }
  .how-step:last-child { padding: 0 0 0 8px; }
  .how-num { font-size: 2.2rem; letter-spacing: -2px; margin-bottom: 8px; }
  .how-step strong { font-size: .78rem; margin-bottom: 4px; }
  .how-step p { font-size: .68rem; line-height: 1.5; }
  #siti-reali .row.g-4 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 0 12px 16px;
    gap: 14px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  #siti-reali .row.g-4::-webkit-scrollbar { display: none; }
  #siti-reali .row.g-4 .col-md-4 {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    scroll-snap-align: start;
    padding: 0 !important;
  }
  .bizcard-section .col-lg-6:last-child { display: none !important; }
  .bizcard-section { padding: 60px 0; }
  #seo-integrato, .bizcard-section, .how-it-works { overflow-x: hidden; }
  #changelogList {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding: 0 12px 16px;
    gap: 14px;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
  }
  #changelogList::-webkit-scrollbar { display: none; }
  #changelogList .col-12 {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
    scroll-snap-align: start;
    padding: 0 !important;
  }
}

/* ─── Animation system ───────────────────────── */
@keyframes _fadeUp {
  from { opacity: 0; transform: translateY(44px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes _slideRight {
  from { opacity: 0; transform: translateX(56px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes _popIn {
  from { opacity: 0; transform: scale(.6) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes _orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  38%     { transform: translate(24px,-18px) scale(1.08); }
  72%     { transform: translate(-16px,14px) scale(.94); }
}
@keyframes _dotPulse {
  0%,100% { box-shadow: 0 0 6px #22c55e; }
  50%     { box-shadow: 0 0 18px #22c55e, 0 0 32px rgba(34,197,94,.32); }
}
@keyframes _shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.hero-overline { animation: _fadeUp .7s cubic-bezier(.22,1,.36,1) .15s both; }
.hero h1       { animation: _fadeUp .8s cubic-bezier(.22,1,.36,1) .30s both; }
.hero-desc     { animation: _fadeUp .7s cubic-bezier(.22,1,.36,1) .48s both; }
.hero-actions  { animation: _fadeUp .7s cubic-bezier(.22,1,.36,1) .62s both; }
.hero-trust    { animation: _fadeUp .6s cubic-bezier(.22,1,.36,1) .76s both; }
.iphone-outer  { animation: _slideRight .9s cubic-bezier(.22,1,.36,1) .42s both; }
.chip-live     { animation: _popIn .55s cubic-bezier(.34,1.56,.64,1) .94s both; }
.chip-stats    { animation: _popIn .55s cubic-bezier(.34,1.56,.64,1) 1.12s both; }
.chip-dot-green { animation: _dotPulse 2.4s ease-in-out infinite; }

.btn-hero-primary { position: relative; overflow: hidden; }
.btn-hero-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
}
.btn-hero-primary:hover::after { transform: translateX(100%); }

.bento-card:hover {
  box-shadow: 0 10px 44px rgba(0,0,0,.1), 0 0 0 1px rgba(124,58,237,.1);
  transform: translateY(-3px);
}
.bento-card.dark-card:hover {
  box-shadow: 0 10px 44px rgba(0,0,0,.36), 0 0 0 1px rgba(124,58,237,.22);
}

.cta-section::before { animation: _orbDrift 7s ease-in-out infinite; }

.anim {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.anim.in { opacity: 1; transform: none; }