/* ============================================================
   BDA · Birsan Daniel Automations · website prototype v2.1
   Monochrome system from the DB monogram. Light + dark via tokens.
   Full-viewport "views" with scroll snapping on desktop.
   Radius rule: buttons pill, cards 18px, inputs 10px, phone 40px.
   ============================================================ */
:root {
  color-scheme: light;
  --ground: #eef0f3; --surface: #ffffff; --surface-2: #e2e5ea; --ink: #0a0a0b; --ink-2: #2d3036; --muted: #5b6069;
  --hair: #d6d9df; --hair-2: #b6bbc4; --accent: #0a0a0b; --accent-ink: #ffffff; --signal: #1f4fe0; --warn: #a5690f;
  --bubble-in: #ffffff; --bubble-out: #dfe3ea; --chat-bg: #e9ecf0; --chat-head: #0a0a0b; --chat-head-ink: #ffffff;
  --block: #0b0b0c; --block-2: #17181b; --block-ink: #f3f3f1; --block-muted: #a3a6ad; --block-hair: rgba(243, 243, 241, 0.14); --logo-fill: #0a0a0b;
  --photo-card: #e6e8ec;
  --shadow-soft: 0 24px 60px -28px rgba(10, 10, 11, 0.28), 0 2px 6px -2px rgba(10, 10, 11, 0.1);
  --shadow-card: 0 1px 2px rgba(10, 10, 11, 0.06), 0 14px 34px -24px rgba(10, 10, 11, 0.22);
  --font-display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Code", Consolas, monospace;
  --container: 1640px; --gutter: clamp(16px, 2.2vw, 36px);
  --r-card: 18px; --r-input: 10px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --nav-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b0b0c; --surface: #141416; --surface-2: #1d1d20; --ink: #f3f3f1; --ink-2: #c6c7cb; --muted: #8c8f97;
    --hair: #26272b; --hair-2: #3a3b41; --accent: #f3f3f1; --accent-ink: #0b0b0c; --signal: #7c97ff; --warn: #d9a441;
    --bubble-in: #1f1f23; --bubble-out: #2b2c31; --chat-bg: #151517; --chat-head: #202024; --chat-head-ink: #f3f3f1;
    --block: #111113; --block-2: #18181b; --block-ink: #f3f3f1; --block-muted: #9a9ca3; --block-hair: rgba(243, 243, 241, 0.12); --logo-fill: #f3f3f1;
    --photo-card: #e9e9ec;
    --shadow-soft: 0 24px 60px -28px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -24px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0b0c; --surface: #141416; --surface-2: #1d1d20; --ink: #f3f3f1; --ink-2: #c6c7cb; --muted: #8c8f97;
  --hair: #26272b; --hair-2: #3a3b41; --accent: #f3f3f1; --accent-ink: #0b0b0c; --signal: #7c97ff; --warn: #d9a441;
  --bubble-in: #1f1f23; --bubble-out: #2b2c31; --chat-bg: #151517; --chat-head: #202024; --chat-head-ink: #f3f3f1;
  --block: #111113; --block-2: #18181b; --block-ink: #f3f3f1; --block-muted: #9a9ca3; --block-hair: rgba(243, 243, 241, 0.12); --logo-fill: #f3f3f1;
  --photo-card: #e9e9ec;
  --shadow-soft: 0 24px 60px -28px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -24px rgba(0, 0, 0, 0.6);
}
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-light { display: none !important; } :root:not([data-theme="light"]) .only-dark { display: block !important; } }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
html.snap { scroll-snap-type: y mandatory; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(32px, 3.4vw, 50px); }
h2 { font-size: clamp(26px, 2.9vw, 38px); }
h3 { font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -0.012em; font-weight: 600; }
p { margin: 0; }
.lede { font-size: clamp(16px, 1.15vw, 18.5px); color: var(--ink-2); max-width: 58ch; line-height: 1.5; }
.small { font-size: 13.5px; color: var(--muted); }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.head { display: grid; gap: 14px; max-width: 64ch; margin-bottom: clamp(22px, 3vh, 40px); }
.head.compact { margin-bottom: 18px; }
.head.compact h1 { font-size: clamp(28px, 2.6vw, 38px); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.page[hidden] { display: none !important; }

/* ---------- Views: one screen each, snap on desktop ---------- */
.view { min-height: calc(100dvh - var(--nav-h)); scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; padding-block: clamp(24px, 3.5vh, 48px); }
.view > .container { min-width: 0; max-width: 100%; }
.view.top { align-content: center; }
.view.tall { min-height: 0; display: block; padding-block: 0; scroll-snap-align: none; }
.view.dark { background: var(--block); color: var(--block-ink); }
.view.dark h1, .view.dark h2, .view.dark h3 { color: var(--block-ink); }
.view.dark .lede { color: var(--block-muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap; transition: transform 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary .btn-ic { background: color-mix(in srgb, var(--accent-ink) 16%, transparent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hair-2); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-ghost .btn-ic { background: var(--surface-2); }
.btn-ic { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.btn:hover .btn-ic { transform: translate(2px, -1px); }
.btn-ic svg { width: 14px; height: 14px; }
.btn-lg { padding: 15px 18px 15px 24px; font-size: 15.5px; }
.btn-sm { padding: 8px 10px 8px 14px; font-size: 13.5px; gap: 8px; }
.btn-sm .btn-ic { width: 22px; height: 22px; }
.btn-sm .btn-ic svg { width: 12px; height: 12px; }
.btn-block { background: var(--block-ink); color: var(--block); }
.btn-block:hover { transform: translateY(-1px); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--hair); }
.nav > .container { width: calc(100% - 40px); max-width: none; }
.nav-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; justify-self: start; }
.brand .mark { width: 46px; height: 32px; color: var(--logo-fill); display: block; }
.brand .mark svg, .brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; overflow: visible; }
.brand .word { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.15; }
.brand .word small { display: block; font-weight: 500; font-size: 9.5px; letter-spacing: 0.2em; color: var(--muted); }
.nav-inner > nav { flex: none; }
.nav-links { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.nav-links a { display: inline-block; padding: 7px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.nav-links a:hover { background: var(--surface-2); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav-right { display: flex; align-items: center; gap: 8px; flex: none; justify-self: end; }
.seg { display: inline-flex; border: 1px solid var(--hair-2); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.seg svg { width: 14px; height: 14px; }
.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); position: relative; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.5s var(--ease), opacity 0.3s; }
.nav-toggle span:nth-child(1) { top: 13px; } .nav-toggle span:nth-child(2) { top: 18px; } .nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.nav-sheet { display: none; }
@media (max-width: 1280px) { .nav .brand .word { display: none; } .nav-links a { padding: 7px 9px; font-size: 13px; } }

/* ---------- Home hero + research strip (one view) ---------- */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-copy { display: grid; gap: 20px; }
.hero-copy h1 { max-width: 20ch; }
.hero-copy .lede { max-width: 46ch; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.strip { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; gap: 24px; margin-top: clamp(16px, 2.5vh, 28px); padding-top: 16px; border-top: 1px solid var(--hair); }
.strip > p { font-size: 13.5px; color: var(--ink-2); max-width: 32ch; }
.strip-stat b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.strip-stat span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; }

.panel { background: var(--surface); border: 1px solid var(--hair); border-radius: 22px; padding: 16px; box-shadow: var(--shadow-soft); display: grid; gap: 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 14px; padding: 4px 6px 10px; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.panel-head b { color: var(--ink); font-weight: 600; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--ground); border-radius: 14px; padding: 14px 16px 12px; display: grid; gap: 4px; align-content: start; min-height: 0; }
.kpi.dark { background: var(--block); color: var(--block-ink); }
.kpi .k-label { font-size: 14px; color: var(--ink); font-weight: 500; line-height: 1.35; margin-top: 4px; }
.kpi.dark .k-label, .kpi.dark .k-src { color: var(--block-muted); }
.kpi .k-value { font-size: clamp(28px, 2.3vw, 36px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.kpi .k-value sup { font-size: 0.45em; vertical-align: top; margin-left: 2px; font-weight: 500; }
.kpi .k-note { font-size: 13px; color: var(--muted); line-height: 1.4; }
.kpi.dark .k-note { color: var(--block-muted); }
.kpi.dark .k-label { color: var(--block-ink); }
.kpi .k-src { font-size: 12.5px; color: var(--muted); margin-top: auto; }
.kpi.wide { grid-column: span 2; min-height: 0; }
.panel-foot { font-size: 12.5px; color: var(--muted); padding: 2px 6px 0; }

/* Column chart with a real scale (0 to --max) */
.cols { display: grid; grid-template-columns: 34px repeat(var(--n, 3), 1fr); gap: 8px; align-items: end; margin-top: 6px; }
.cols .axis { display: grid; height: var(--ch, 110px); align-content: space-between; font-size: 10.5px; color: var(--muted); text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }
.col { display: grid; gap: 6px; }
.col-track { height: var(--ch, 110px); position: relative; border-bottom: 1px solid var(--hair-2); background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), var(--hair) calc(50% - 1px), var(--hair) 50%); }
.col-fill { position: absolute; left: 18%; right: 18%; bottom: 0; height: calc(var(--v) / var(--max) * 100%); background: var(--ink); border-radius: 4px 4px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); }
.col.dim .col-fill { background: var(--hair-2); }
.is-inview .col-fill { transform: scaleY(1); }
.col-cap { position: absolute; left: 0; right: 0; bottom: calc(var(--v) / var(--max) * 100% + 4px); text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.col-l { font-size: 11.5px; color: var(--ink-2); text-align: center; line-height: 1.25; }
.kpi.dark .col-track { border-bottom-color: var(--block-hair); background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), var(--block-hair) calc(50% - 1px), var(--block-hair) 50%); }
.kpi.dark .col-fill { background: var(--block-ink); }
.kpi.dark .col-l, .kpi.dark .axis { color: var(--block-muted); }

/* The headline figure is the inverse of the surface it sits on: near-black on the light theme,
   off-white on the dark one. Without the second half it is one more shade of the same near-black
   as everything around it and stops reading as the number that matters. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi.dark,
  :root:not([data-theme="light"]) .tile.dark { --block: #f3f3f1; --block-ink: #0b0b0c; --block-muted: #5b6069; --block-hair: rgba(10, 10, 11, 0.16); }
}
:root[data-theme="dark"] .kpi.dark,
:root[data-theme="dark"] .tile.dark { --block: #f3f3f1; --block-ink: #0b0b0c; --block-muted: #5b6069; --block-hair: rgba(10, 10, 11, 0.16); }

/* ---------- Problem: funnel + complaints chart ---------- */
.problem-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.problem-grid > * { min-width: 0; }
.funnel { display: grid; margin-top: 4px; }
.funnel-step { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 13px 0; border-top: 1px solid var(--hair); align-items: start; }
.funnel-step:last-child { border-bottom: 1px solid var(--hair); }
.funnel-step .t { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); padding-top: 3px; }
.funnel-step b { display: block; font-weight: 600; font-size: 15.5px; }
.funnel-step p { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.funnel-step.lost b { color: var(--warn); }
.funnel-step.win { background: var(--surface-2); margin-inline: -16px; padding-inline: 16px; border-radius: 12px; border-color: transparent; }
.chart-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 24px 26px 20px; }
.chart-card h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; }
.chart-card .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.bars { display: grid; gap: 11px; margin-top: 18px; }
.bar-row { display: grid; gap: 5px; }
.bar-row .lbl { display: flex; justify-content: space-between; font-size: 14.5px; }
.bar-row .lbl b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar-track { height: 14px; position: relative; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink); border-radius: 0 4px 4px 0; transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.bar-row.dim .bar-fill { background: var(--hair-2); }
.is-inview .bar-fill { transform: scaleX(1); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend .sw { width: 14px; height: 8px; border-radius: 2px; background: var(--ink); display: inline-block; }
.legend .sw.dim { background: var(--hair-2); }
.chart-foot { margin-top: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- What we do + CTA band ---------- */
.guar { list-style: none; margin: 0; padding: 0; display: grid; }
.guar li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); }
.guar li:last-child { border-bottom: 1px solid var(--hair); }
.guar.two { grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--hair); }
.guar.two li { border-top: 0; border-bottom: 1px solid var(--hair); }
.guar svg { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.guar b { display: block; font-weight: 600; font-size: 15.5px; }
.guar p { color: var(--ink-2); font-size: 14px; margin-top: 3px; max-width: 52ch; }
.cta-band { background: var(--block); color: var(--block-ink); border-radius: 24px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; align-items: center; }
.cta-band h2 { color: var(--block-ink); max-width: 18ch; }
.cta-band p { color: var(--block-muted); margin-top: 10px; max-width: 48ch; }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: end; }

/* ---------- Services: channels, capabilities, what you receive ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trio > *, .quad > * { min-width: 0; }
.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 24px; display: grid; align-content: start; gap: 12px; }
.card .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink); }
.card .ic svg { width: 21px; height: 21px; }
.card h3 { font-size: 19px; margin-top: 4px; }
.card p { font-size: 15px; color: var(--ink-2); }
.card.lead { background: var(--block); color: var(--block-ink); border-color: transparent; }
.card.lead .ic { background: rgba(243, 243, 241, 0.1); color: var(--block-ink); }
.card.lead p { color: var(--block-muted); }
.card .chips { margin-top: 6px; }
.card.lead .chip { background: rgba(243, 243, 241, 0.1); color: var(--block-ink); }
.rule { color: var(--muted); font-size: 14px; margin-top: 18px; max-width: 70ch; }
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mosaic > * { min-width: 0; }
.mo { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 16px; display: grid; gap: 10px; align-content: start; grid-template-rows: auto 1fr auto; }
.mo-a { grid-column: span 2; }
.mo-a .shot-frame { aspect-ratio: 16 / 5.5; overflow: hidden; }
.mo-a .shot-frame img { height: 100%; object-fit: cover; object-position: top; }
.mo .cap { margin-top: auto; font-size: 13.5px; }
.mo > .browser, .mo > .call, .mo > .principles, .mo > .shot-frame { align-self: start; }
.mo > .mini-chat { align-self: center; }
.mo h3 { font-size: 15.5px; }
.mo h3 { font-family: var(--font-body); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mo h3 svg { width: 16px; height: 16px; }
.mo .cap { font-size: 12.5px; color: var(--muted); }
.mo-a .shot-frame { padding: 6px; border-radius: 14px; box-shadow: none; }
.mo-a .shot-frame img { border-radius: 9px; }
.mo .mini-chat { max-width: none; }
.mo .mini-chat .msg { font-size: 12.2px; }
.mo .mini-chat .msg.out { background: var(--bubble-out); color: var(--ink); }
.mo .mini-chat .msg.in { background: var(--ground); color: var(--ink); border: 1px solid var(--hair); }
.browser { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--ground); }
.browser .bar { display: flex; gap: 5px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--hair); background: var(--surface-2); }
.browser .bar i { width: 8px; height: 8px; border-radius: 999px; background: var(--hair-2); display: inline-block; }
.browser .bar span { margin-left: 8px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.browser .site { position: relative; height: 150px; padding: 12px; }
.browser .site .ph-line { height: 8px; border-radius: 4px; background: var(--hair); margin-bottom: 8px; width: 60%; }
.browser .site .ph-line.s { width: 40%; }
.browser .widget { position: absolute; right: 10px; bottom: 10px; width: 66%; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.browser .widget .wh { background: var(--ink); color: var(--ground); font-size: 11px; font-weight: 600; padding: 7px 10px; }
.browser .widget .wb { padding: 8px; display: grid; gap: 6px; }
.browser .widget .msg { font-size: 11px; padding: 6px 8px; animation: none; max-width: 100%; }
.browser .widget .msg.in { background: var(--ground); border: 1px solid var(--hair); }
.call { display: grid; gap: 10px; }
.call .call-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ground); border: 1px solid var(--hair); border-radius: 12px; }
.call .call-head .chat-avatar { background: var(--ink); color: var(--ground); }
.call .call-head b { display: block; font-size: 13px; }
.call .call-head span { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.call .line { display: grid; grid-template-columns: 38px 1fr; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.call .line b { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; padding-top: 3px; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(190px, auto); gap: 12px; }
.bento > * { min-width: 0; }
.cell { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 22px; display: grid; align-content: space-between; gap: 14px; position: relative; overflow: hidden; transition: border-color 0.5s var(--ease); }
.cell:hover { border-color: var(--hair-2); }
.cell h3 { font-size: 18px; }
.cell p { font-size: 13.5px; color: var(--ink-2); max-width: 40ch; }
.cell-a { grid-column: span 4; grid-row: span 2; background: var(--block); color: var(--block-ink); border-color: transparent; }
.cell-a p { color: var(--block-muted); }
.cell-b, .cell-c, .cell-e, .cell-f { grid-column: span 2; }
.cell-d { grid-column: span 2; background: var(--surface-2); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.cell-a .chip { background: rgba(243, 243, 241, 0.1); color: var(--block-ink); }
.cell-d .chip { background: var(--surface); color: var(--ink-2); }
.mini-chat { display: grid; gap: 8px; max-width: 380px; }
.mini-chat .msg { font-size: 12.5px; animation: none; box-shadow: none; max-width: 100%; }
.mini-chat .msg.out { background: #2b2c31; color: #f3f3f1; justify-self: end; max-width: 78%; }
.mini-chat .msg.in { background: #f3f3f1; color: #0b0b0c; }
.receive { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.receive > * { min-width: 0; }
.receive ul { list-style: none; margin: 0; padding: 0; display: grid; }
.receive li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14.5px; color: var(--ink-2); }
.receive li:last-child { border-bottom: 1px solid var(--hair); }
.receive li b { color: var(--ink); font-weight: 600; display: block; }
.receive li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.shot-frame { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 20px; padding: 8px; box-shadow: var(--shadow-soft); }
.shot-frame img { width: 100%; height: auto; border-radius: 13px; border: 1px solid var(--hair); }
.shot-cap { font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---------- Phone (chat replay); height follows the viewport ---------- */
.phone { --ph: min(340px, 100%, calc((100dvh - var(--nav-h) - 120px) * 9 / 18.4)); position: relative; z-index: 1; width: var(--ph); aspect-ratio: 9 / 18.4; border-radius: 40px; background: #111; padding: 9px; box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.phone-screen { height: 100%; border-radius: 32px; overflow: hidden; background: var(--chat-bg); display: grid; grid-template-rows: auto 1fr auto; position: relative; }
.phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 88px; height: 22px; border-radius: 999px; background: #111; z-index: 3; }
.chat-head { background: var(--chat-head); color: var(--chat-head-ink); padding: 36px 16px 11px; display: flex; align-items: center; gap: 10px; }
.chat-avatar { width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.chat-head b { display: block; font-size: 13.5px; font-weight: 600; }
.chat-head span { font-size: 11.5px; opacity: 0.8; }
.chat-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-body > :first-child { margin-top: auto; }
.msg { max-width: 86%; padding: 9px 12px 8px; border-radius: 13px; font-size: 12.6px; line-height: 1.42; white-space: pre-line; position: relative; animation: msg-in 0.55s var(--ease) both; }
.msg time { display: block; text-align: right; font-size: 10px; color: var(--muted); margin-top: 4px; }
.msg.in { background: var(--bubble-in); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: var(--bubble-out); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.typing { padding: 12px 14px; display: inline-flex; gap: 4px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--muted); animation: dot 1s infinite var(--ease); }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; } .msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.chat-foot { padding: 10px 12px 13px; display: flex; gap: 8px; align-items: center; }
.chat-foot .fake-input { flex: 1; height: 36px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair); padding: 0 14px; display: flex; align-items: center; font-size: 12.5px; color: var(--muted); }
.chat-foot .fake-send { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); display: grid; place-items: center; }
.chat-foot .fake-send svg { width: 15px; height: 15px; fill: var(--ground); }
.replay { margin-top: 12px; text-align: center; }
.replay button { border: 1px solid var(--hair-2); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.replay svg { width: 12px; height: 12px; }

/* ---------- How it works ---------- */
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.how-steps > * { min-width: 0; }
.hstep { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 22px; display: grid; gap: 10px; align-content: start; }
.hstep .n { width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.hstep h3 { font-size: 18px; margin-top: 6px; }
.hstep p { color: var(--ink-2); font-size: 14px; }
.hstep .meta { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
.demo-grid > * { min-width: 0; }
.demo-notes { display: grid; }
.demo-note { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hair); }
.demo-note:last-child { border-bottom: 1px solid var(--hair); }
.demo-note svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.demo-note b { display: block; font-weight: 600; font-size: 15px; }
.demo-note p { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.demo-phone { display: grid; justify-items: center; }

/* Story: pinned phone, dark block */
.story { background: var(--block); color: var(--block-ink); border-top: 1px solid var(--block-hair); border-bottom: 1px solid var(--block-hair); }
.story-intro { display: grid; gap: 10px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--block-hair); }
.story-intro h2 { color: var(--block-ink); }
.story-intro .lede { color: var(--block-muted); font-size: 15.5px; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.story-grid > * { min-width: 0; }
.story-steps { display: grid; padding-bottom: 24px; }
.story-step { min-height: calc(100dvh - var(--nav-h)); display: grid; align-content: center; gap: 12px; padding: 24px 0; opacity: 0.3; transition: opacity 0.6s var(--ease); scroll-snap-align: start; }
.story-step.is-active { opacity: 1; }
.story-step .t { font-family: var(--font-mono); font-size: 12.5px; color: var(--block-muted); }
.story-step h3 { font-size: clamp(22px, 2.2vw, 30px); color: var(--block-ink); }
.story-step p { color: var(--block-muted); font-size: 15.5px; max-width: 42ch; }
.story-step .metric { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--block-hair); }
.story-step .metric b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--block-ink); }
.story-step .metric span { font-size: 13px; color: var(--block-muted); }
.story-pin { position: sticky; top: var(--nav-h); height: calc(100dvh - var(--nav-h)); display: grid; justify-items: center; align-content: center; }
.story .phone { --ph: min(340px, 100%, calc((100dvh - var(--nav-h) - 60px) * 9 / 18.4)); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.story .phone-screen { background: #f0f0f2; }
.story .msg.in { background: #ffffff; color: #0b0b0c; } .story .msg.out { background: #e6e7ea; color: #0b0b0c; } .story .msg time { color: #74777e; }
.story .chat-head { background: #0b0b0c; color: #fff; }
.story .chat-foot .fake-input { background: #fff; border-color: #e3e4e7; color: #74777e; } .story .chat-foot .fake-send { background: #0b0b0c; } .story .chat-foot .fake-send svg { fill: #fff; }
.owner-card { position: absolute; right: -14px; top: 38%; width: 250px; background: #fff; color: #0b0b0c; border-radius: 14px; padding: 14px 14px 12px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); z-index: 4; font-size: 12.5px; opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.owner-card.is-on { opacity: 1; transform: none; }
.owner-card .oc-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; margin-bottom: 8px; }
.owner-card .oc-head i { width: 8px; height: 8px; border-radius: 999px; background: #b7791f; }
.owner-card p { color: #3b3d42; line-height: 1.4; white-space: pre-line; }
.owner-card .oc-reply { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: #e6e7ea; font-size: 12px; }
.owner-card .small { color: #74777e; }

/* ---------- Control list ---------- */
.control-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
.control-grid > * { min-width: 0; }

/* ---------- Results: cards across the full width ---------- */
.dash-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-top .head { margin-bottom: 0; }
.dash-top p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.dash-tabs { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 999px; }
.dash-tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); transition: all 0.3s var(--ease); white-space: nowrap; }
.dash-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.dash-panel { display: none; }
.dash-panel[data-active="true"] { display: block; }
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.tiles > * { min-width: 0; }
.tile { grid-column: span 4; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 24px 26px 20px; display: grid; align-content: start; gap: 10px; min-height: 200px; }
.tile.dark { background: var(--block); color: var(--block-ink); }
.tile.dark .tile-label, .tile.dark .tile-src { color: var(--block-muted); }
.tile-label { font-size: 16.5px; color: var(--ink); font-weight: 500; line-height: 1.4; max-width: 34ch; margin-top: 6px; }
.tile.dark .tile-label { color: var(--block-ink); opacity: 1; }
.tile-value { font-size: clamp(46px, 4vw, 66px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tile-value sup { font-size: 0.42em; vertical-align: top; margin-left: 3px; font-weight: 500; }
.tile-note { font-size: 14px; color: var(--muted); line-height: 1.45; }
.tile.dark .tile-note { color: var(--block-muted); }
.tile-src { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; }
.tile-chart { grid-column: span 8; background: var(--surface); border: 1px solid var(--hair); border-radius: 18px; padding: 24px 26px; display: grid; gap: 8px; align-content: start; }
.tile-chart h4 { font-size: 16px; }
.tile-chart .sub { font-size: 14px; }
.tile-chart .tile-src { font-size: 12.5px; }
.tile-chart .spark { height: 120px; }
.tile-chart .cmp-row { font-size: 14.5px; grid-template-columns: 120px 1fr 64px; }
.tile-chart .cmp-row .bar-track { height: 18px; }
.tile-chart .col-track { background: repeating-linear-gradient(to top, transparent 0, transparent calc(50% - 1px), var(--hair) calc(50% - 1px), var(--hair) 50%); }
.tile-chart .spark circle { stroke: var(--surface); }
.tile-chart h4 { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.tile-chart .sub { font-size: 12.5px; color: var(--muted); }
.cmp { display: grid; gap: 9px; margin-top: 8px; }
.cmp-row { display: grid; grid-template-columns: 100px 1fr 52px; align-items: center; gap: 12px; font-size: 13px; }
.cmp-row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.cmp-row .bar-track { height: 14px; }
.cmp-row.lo .bar-fill { background: var(--hair-2); }
.spark { width: 100%; height: 84px; margin-top: 4px; }
.spark path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--ink); opacity: 0.08; stroke: none; }
.spark circle { fill: var(--ink); stroke: var(--ground); stroke-width: 2; }
.spark text { font-size: 11px; fill: var(--muted); font-family: var(--font-body); }
.dash-foot { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.sources { margin-top: 28px; }
.sources h3 { font-family: var(--font-body); font-size: 15px; margin-bottom: 12px; }
.sources ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); grid-template-columns: 1fr 1fr; column-gap: 40px; }
.sources a { text-decoration: underline; text-underline-offset: 2px; color: var(--ink-2); }

/* ---------- Package ---------- */
.pack { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.pack > * { min-width: 0; }
.pack-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.pack-item .n { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; }
.pack-item .n svg { width: 19px; height: 19px; }
.pack-item b { display: block; font-weight: 600; font-size: 15px; }
.pack-item p { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; }
.pack-card { background: var(--block); color: var(--block-ink); border-radius: 22px; padding: 28px; display: grid; gap: 16px; }
.pack-card h3 { font-size: 24px; color: var(--block-ink); }
.pack-card p { color: var(--block-muted); font-size: 14.5px; }
.pack-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; }
.pack-card li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.pack-card li svg { width: 16px; height: 16px; margin-top: 3px; }
.pack-card .btn { justify-content: center; }
.pack-card .fine { font-size: 12.5px; color: var(--block-muted); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.about-grid > * { min-width: 0; }
.about-photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100dvh - var(--nav-h) - 80px); background: var(--photo-card); border: 1px solid var(--hair); position: relative; justify-self: center; width: 100%; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; }
.about-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5%; background: linear-gradient(to top, var(--photo-card), transparent); pointer-events: none; }
.about-photo .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: #74777e; font-size: 13.5px; }
.about-copy { display: grid; gap: 16px; }
.about-copy p { color: var(--ink-2); font-size: 16px; max-width: 60ch; }
.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }
.cred { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; }
.cred b { display: block; font-weight: 600; font-size: 14.5px; }
.cred span { font-size: 13.5px; color: var(--muted); }
.principles { list-style: none; margin: 0; padding: 0; display: grid; }
.principles li { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 14.5px; color: var(--ink-2); }
.principles li:last-child { border-bottom: 1px solid var(--hair); }

/* ---------- FAQ ---------- */
.faq { columns: 2; column-gap: 40px; }
.faq details { border-top: 1px solid var(--hair); break-inside: avoid; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-weight: 600; font-size: 15px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--hair-2); display: grid; place-items: center; flex: none; transition: transform 0.5s var(--ease), background-color 0.4s; }
.faq summary .plus svg { width: 12px; height: 12px; }
.faq details[open] summary .plus { transform: rotate(45deg); background: var(--ink); color: var(--ground); border-color: var(--ink); }
.faq .ans { padding: 0 0 18px; color: var(--ink-2); font-size: 14px; max-width: 60ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.contact-grid > * { min-width: 0; }
.contact-copy { display: grid; gap: 20px; align-content: start; }
.contact-ways { display: grid; gap: 10px; }
.way { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center; padding: 13px 16px; border: 1px solid var(--hair); border-radius: 14px; transition: border-color 0.4s var(--ease); background: var(--surface); }
.way:hover { border-color: var(--ink); }
.way .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; }
.way .ic svg { width: 20px; height: 20px; }
.way b { display: block; font-size: 15px; font-weight: 600; }
.way span { font-size: 13px; color: var(--muted); }
.form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field input, .field textarea { width: 100%; border: 1px solid var(--hair-2); background: var(--ground); border-radius: var(--r-input); padding: 11px 14px; font: inherit; font-size: 15px; color: var(--ink); transition: border-color 0.3s, box-shadow 0.3s; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 4px var(--surface-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.field .err { font-size: 12.5px; color: #b42318; display: none; }
.field.invalid input { border-color: #b42318; }
.field.invalid .err { display: block; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-foot .small { max-width: 34ch; }
/* The fields' layout lives here, never inline: an inline display outranks the sent state's rule, and the fields
   would stay on screen under «Mulțumim!», pushing the one-press demo offer below the fold. */
.form-fields { display: grid; gap: 14px; }
.form-ok { display: none; padding: 18px 20px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-weight: 500; }
.form.is-sent .form-ok { display: block; }
.form.is-sent .form-fields { display: none; }
/* On a phone the sent form is brought to the top of the screen (app.js showSent) and is a snap point of its own, so
   proximity snapping does not carry the thanks and the offer off again to the footer's edge. */
@media (max-width: 900px) { .form.is-sent { scroll-snap-align: start; } }

/* ---------- Floating dock: WhatsApp, phone, own AI chat ---------- */
.dock { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: grid; gap: 8px; justify-items: end; }
.dock > * { position: relative; }
.dock a, .dock button { width: 50px; height: 50px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-card); transition: transform 0.5s var(--ease); }
.dock a:hover, .dock button:hover { transform: translateY(-2px); }
.dock svg { width: 22px; height: 22px; }
.dock .chat-btn { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.dock-label { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--hair-2); border-radius: 999px; padding: 7px 12px; opacity: 0; pointer-events: none; transition: opacity 0.3s; box-shadow: var(--shadow-card); }
.dock > *:hover .dock-label { opacity: 1; }
.chatbox { position: fixed; right: 18px; bottom: 84px; z-index: 46; width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--hair); border-radius: 20px; box-shadow: var(--shadow-soft); display: grid; grid-template-rows: auto 1fr auto auto auto; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.chatbox.is-open { opacity: 1; transform: none; pointer-events: auto; }
.chatbox .cb-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.chatbox .cb-head .chat-avatar { background: var(--ink); color: var(--ground); }
.chatbox .cb-head b { display: block; font-size: 14px; }
.chatbox .cb-head span { font-size: 12px; color: var(--muted); }
.chatbox .cb-head button { margin-left: auto; border: 0; background: transparent; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; }
.chatbox .cb-head button:hover { background: var(--surface-2); }
.chatbox .cb-head svg { width: 16px; height: 16px; }
.chatbox .cb-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; background: var(--chat-bg); }
.chatbox .cb-body .msg { font-size: 13.5px; max-width: 88%; }
.chatbox .cb-sugg { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; background: var(--chat-bg); }
.chatbox .cb-sugg button { border: 1px solid var(--hair-2); background: var(--surface); border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.chatbox form { display: flex; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--hair); background: var(--surface); }
.chatbox input { flex: 1; border: 1px solid var(--hair-2); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 14px; background: var(--ground); color: var(--ink); }
.chatbox input:focus { outline: 0; border-color: var(--ink); }
.chatbox form button { width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--ink); color: var(--ground); display: grid; place-items: center; }
.chatbox form button svg { width: 16px; height: 16px; fill: currentColor; }
.chatbox .cb-note { font-size: 11px; color: var(--muted); padding: 0 14px 10px; background: var(--surface); }

/* ---------- Why now: two data cards + who it is for ---------- */
.why-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.why-grid > * { min-width: 0; }
.why-data { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.why-data > * { min-width: 0; }
.data-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 22px 24px; display: grid; gap: 6px; align-content: start; }
.data-card h3 { font-family: var(--font-body); font-size: 16px; }
.data-card .sub { font-size: 13.5px; color: var(--muted); }
.data-card .big { font-size: clamp(40px, 3.4vw, 56px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--signal); margin-top: 4px; }
.data-card .big small { font-size: 0.4em; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 8px; }
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wins > * { min-width: 0; }
.wins.four { grid-template-columns: repeat(4, 1fr); }
.wins.four .win-card { padding: 22px 22px 20px; }
.wins.four .win-card .big { font-size: clamp(40px, 3.4vw, 56px); }
.wins.four .win-card h3 { font-size: 18px; }
.wins.four .win-card p { font-size: 14.5px; }
.win-card .src { font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.win-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 26px 28px 24px; display: grid; gap: 8px; align-content: start; }
.win-card .big { font-size: clamp(48px, 4.2vw, 68px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--signal); }
.win-card .big sup { font-size: 0.42em; vertical-align: top; margin-left: 3px; font-weight: 500; }
.win-card h3 { font-size: 20px; margin-top: 6px; }
.win-card p { font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.win-card.dark { background: var(--block); color: var(--block-ink); border-color: transparent; }
.win-card.dark .big { color: var(--block-ink); }
.win-card.dark h3 { color: var(--block-ink); }
.win-card.dark p { color: var(--block-muted); }
.why-foot { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; padding-top: 18px; padding-right: 96px; border-top: 1px solid var(--hair); }
.why-foot .closer { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; max-width: 980px; }
.why-foot .who-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.why-foot .who-line b { font-size: 13px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.why-foot .chips-row { justify-content: flex-start; }
.for { background: var(--block); color: var(--block-ink); border-radius: var(--r-card); padding: 26px 28px; display: grid; gap: 14px; align-content: start; }
.for h3 { color: var(--block-ink); font-size: 20px; }
.for ul { list-style: none; margin: 0; padding: 0; display: grid; }
.for li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--block-hair); font-size: 15.5px; }
.for li svg { width: 18px; height: 18px; margin-top: 3px; color: #9fb4ff; }
.for .not { font-size: 13.5px; color: var(--block-muted); padding-top: 10px; border-top: 1px solid var(--block-hair); }

/* ---------- Next steps strip (contact + bands) ---------- */
.next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.next > * { min-width: 0; }
.next-step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.next-step .n { width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.next-step b { display: block; font-size: 15px; font-weight: 600; }
.next-step span { font-size: 13.5px; color: var(--muted); }
.cta-band .next { margin-top: 22px; }
.cta-band .next-step { background: rgba(243, 243, 241, 0.06); border-color: var(--block-hair); }
.cta-band .next-step .n { background: var(--block-ink); color: var(--block); }
.cta-band .next-step b { color: var(--block-ink); }
.cta-band .next-step span { color: var(--block-muted); }
.chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chips-row .chip { font-size: 13px; padding: 7px 12px; background: var(--surface); border: 1px solid var(--hair); }
.who { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; }
.who .ava { width: 64px; height: 64px; border-radius: 999px; overflow: hidden; background: var(--photo-card); }
.who .ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; mix-blend-mode: multiply; }
.who b { display: block; font-size: 15.5px; }
.who span { display: block; font-size: 13.5px; color: var(--muted); }
.contact-left { display: grid; gap: 14px; align-content: start; }
.contact-left h3 { font-family: var(--font-body); font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; margin-top: 6px; }
.contact-left .next { grid-template-columns: 1fr; gap: 8px; }

/* ---------- Channel cards with real previews ---------- */
.card .preview { margin-top: auto; padding-top: 8px; }
.card .preview .mini-chat .msg { font-size: 13.5px; }
.card.lead .preview .mini-chat .msg.out { background: #2b2c31; color: #f3f3f1; }
.card.lead .preview .mini-chat .msg.in { background: #f3f3f1; color: #0b0b0c; }
.card .preview .browser .site { height: 140px; }
.card .preview .call .line { font-size: 13.5px; }

/* ---------- How we start: step visuals ---------- */
.hstep .vis { margin-top: auto; padding-top: 12px; }
.vis-site { border: 1px solid var(--hair); border-radius: 12px; background: var(--ground); overflow: hidden; }
.vis-site .bar { display: flex; gap: 5px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--hair); background: var(--surface-2); }
.vis-site .bar i { width: 7px; height: 7px; border-radius: 999px; background: var(--hair-2); display: inline-block; }
.vis-site .bar span { margin-left: 8px; font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.vis-site .body { padding: 12px; display: grid; gap: 8px; }
.vis-site .ph-line { height: 8px; border-radius: 4px; background: var(--hair); width: 70%; }
.vis-site .ph-line.s { width: 45%; }
.vis-site .scan { margin-top: 2px; font-size: 12px; color: var(--signal); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.vis-site .scan i { width: 8px; height: 8px; border-radius: 999px; background: var(--signal); display: inline-block; }
.vis-card { border: 1px solid var(--hair); border-radius: 12px; background: var(--ground); padding: 12px 14px; display: grid; gap: 8px; }
.vis-card b { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.vis-card .row { display: grid; grid-template-columns: 1fr 18px; gap: 8px; font-size: 13px; align-items: center; }
.vis-card .row svg { width: 16px; height: 16px; color: var(--signal); }
.vis-ch { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-ch span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 999px; background: var(--ground); border: 1px solid var(--hair); }
.vis-ch span svg { width: 13px; height: 13px; color: var(--signal); }
.vis-panel { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--ground); }
.vis-panel img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Highlighted wins */
.tile.win .tile-value, .kpi.hi .k-value { color: var(--signal); }
.tile.win { border-color: color-mix(in srgb, var(--signal) 30%, var(--hair)); }
.tile.dark .tile-value { color: var(--block-ink); }
.data-card .spark { height: 108px; margin-top: 10px; }
.dash-foot { max-width: 1080px; }
.mo .principles li { font-size: 15px; padding: 13px 0; }

/* ---------- Footer (last snap point) ---------- */
.footer { background: var(--block); color: var(--block-muted); padding: 48px 0 24px; font-size: 14px; border-top: 1px solid var(--block-hair); scroll-snap-align: end; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--block-hair); }
.footer .lockup { display: grid; gap: 10px; justify-items: start; }
.footer .lockup .mark { width: 64px; height: 44px; color: var(--block-ink); }
.footer .lockup .lockup-img { width: 220px; height: auto; }
.footer .lockup .mark svg, .footer .lockup .mark img { width: 100%; height: 100%; object-fit: contain; overflow: visible; }
.footer .lockup .word { color: var(--block-ink); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3; }
.footer .lockup .word small { display: block; font-weight: 500; font-size: 10px; letter-spacing: 0.24em; color: var(--block-muted); }
.footer h4 { font-family: var(--font-body); font-size: 13px; color: var(--block-ink); font-weight: 600; margin-bottom: 14px; letter-spacing: 0.02em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a:hover { color: var(--block-ink); }
.footer-desc { margin-top: 14px; max-width: 36ch; line-height: 1.5; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: 13px; }
.footer-legal { font-size: 13.5px; line-height: 1.55; padding-top: 12px; max-width: 90ch; }

/* ---------- Growth kit: calculator, works-with strip, sample report, trust list, instant demo ----------
   The site's own world only: its tokens, .panel, .kpi, .bar-row, .field, .next, .phone. Tabular figures on
   every number that changes; transform and opacity only; one ease (--ease); presses scale to 0.97. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* These views hide parts with the hidden attribute; a component's own display (a .field is a grid) must not undo it. */
.calc-view [hidden], .trial-view [hidden] { display: none !important; }

/* Calculator: inputs left, the estimate right. Areas, so a phone can put the result right under the fields. */
.calc-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-rows: auto auto auto 1fr; grid-template-areas: "head result" "form result" "more result" "actions result"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.calc-grid > * { min-width: 0; }
.calc-head { grid-area: head; }
.calc-form { grid-area: form; display: grid; gap: 14px; }
.calc-more-wrap { grid-area: more; display: grid; gap: 6px; margin-top: 16px; }
.calc-actions { grid-area: actions; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
/* The panel reaches the view's bottom-right corner when it grows: keep it clear of the dock on desktop. */
.calc-result { grid-area: result; align-self: center; padding-right: 96px; }
.calc-view input { font-variant-numeric: tabular-nums; }
.calc-view input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.calc-view input[type="number"]::-webkit-inner-spin-button, .calc-view input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-unit { position: relative; }
.calc-unit input { padding-right: 34px; }
.calc-unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted); pointer-events: none; }
.calc-head .lede { text-wrap: pretty; }
.calc-presets { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc-presets legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* Six answers as one segmented control, two rows of three: weekdays first, every day second. */
.calc-presets .chips-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip-radio { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.16s var(--ease); }
.chip-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; }
.chip-radio:active { transform: scale(0.97); }
.calc-assume { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 64ch; }
.calc-faq { columns: 1; }
.calc-faq details:last-child { border-bottom: 1px solid var(--hair); }
.calc-faq summary { padding: 12px 0; font-size: 14.5px; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 2px 0 16px; }
.calc-fields .field input { padding: 9px 12px; font-size: 14.5px; }
.calc-faq .ans { padding-bottom: 10px; }
.calc-faq .ans:last-child { padding-bottom: 16px; }
.calc-result .panel { gap: 12px; }
.calc-kpi .k-value { font-size: clamp(34px, 3vw, 46px); font-variant-numeric: tabular-nums; }
.calc-kpi .k-note { font-variant-numeric: tabular-nums; }
.calc-bars { margin-top: 4px; gap: 12px; }
.calc-bars .lbl { gap: 16px; align-items: baseline; }
.calc-bars .lbl b { text-align: right; white-space: nowrap; }
.calc-bars .lbl b.wrap { white-space: normal; }
.calc-bar { position: absolute; inset: 0; background: var(--ink); border-radius: 0 4px 4px 0; transform-origin: left; transform: scaleX(var(--s, 0)); transition: transform 200ms var(--ease); }
.bar-row.dim .calc-bar { background: var(--hair-2); }
.calc-note { font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--ink); padding: 2px 4px; }
.calc-ns { padding: 0 4px; }
.calc-capped { font-size: 13px; color: var(--muted); }
/* A disclosure open makes the view taller than the screen: the page stops snapping until both are closed - and
   only while home is the page on screen. Every page is in the one document, hidden or not, so a rule on the whole
   document would keep a disclosure left open on home switching snapping off on every other page. */
.view.calc-view.tall { min-height: calc(100dvh - var(--nav-h)); display: grid; padding-block: clamp(24px, 3.5vh, 48px); }
html.snap:has(.page:not([hidden]) .calc-view.tall) { scroll-snap-type: none; }

/* "Funcționează cu ce folosești deja": one flowing line in the .who-line pattern (label, chips, then the reassurance).
   With every connection listed the label and the chips still make one line on a 1366 px screen; on a laptop screen
   800 px tall or less (1366 x 768) the reassurance would add a line and push the view past the screen, so there it
   steps aside - the label says the same thing - and the view stays one screen. */
.works-with { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
@media (min-width: 901px) and (max-height: 800px) { .works-note { display: none; } }
.works-label { font-size: 13px; color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.works-with .chip { display: inline-flex; align-items: center; gap: 6px; }
.works-with .chip svg { width: 13px; height: 13px; flex: none; color: var(--ink); }
.works-note { font-size: 13px; color: var(--muted); }

/* The sample monthly report: what the owner's panel and e-mail actually show, labelled as a sample. */
.report-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.report-grid > * { min-width: 0; }
.report-panel { gap: 12px; }
.report-title { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-panel .panel-head .chip { font-size: 11.5px; padding: 4px 10px; }
.report-tag { background: transparent; border: 1px solid var(--hair-2); color: var(--muted); }
.report-chip { background: var(--surface); border: 1px dashed var(--ink-2); color: var(--ink); }
.report-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.report-kpis .k-value { font-variant-numeric: tabular-nums; }
.k-of { font-size: 0.42em; font-weight: 500; letter-spacing: 0; margin-left: 8px; }
.report-line { font-size: 13.5px; color: var(--ink-2); padding: 0 6px; font-variant-numeric: tabular-nums; }
.report-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; padding: 14px 6px 2px; border-top: 1px solid var(--hair); }
.report-lists > * { min-width: 0; }
.report-lists h3 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0; }
.report-lists .bars { margin-top: 10px; gap: 10px; }
.report-lists .lbl { font-size: 13.5px; gap: 12px; }
.report-lists .bar-track { height: 8px; }
.report-probable { display: inline-block; margin-left: 4px; padding: 1px 7px; font-size: 11px; border: 1px solid var(--hair-2); background: transparent; color: var(--muted); }
.report-when { display: grid; gap: 14px; align-content: start; }
.report-when h3 { font-size: clamp(20px, 1.8vw, 24px); }
.report-when .next { grid-template-columns: 1fr; gap: 8px; }
.report-when .next-step { align-items: center; }
.report-when .next-step .n svg { width: 16px; height: 16px; }
.report-case { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; max-width: 44ch; }
.report-when .btn { justify-self: start; }

/* "Ce poți verifica": four claims the code and the documents make true, each with its proof. One list, no cards.
   Above the questions, the view now reaches its bottom-right corner: on desktop it keeps clear of the dock. */
.view > .container:has(> .trust) { padding-right: 96px; }
.trust { display: grid; gap: 12px; margin-bottom: clamp(18px, 2.6vh, 30px); }
.trust-h { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.trust-h svg { width: 20px; height: 20px; flex: none; }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--hair); }
.trust-list li { padding: 13px 0; border-bottom: 1px solid var(--hair); }
.trust-list b { display: block; font-weight: 600; font-size: 15px; }
.trust-list p { color: var(--ink-2); font-size: 14px; margin-top: 3px; }
.trust-list a { color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; transition: text-decoration-color 0.2s var(--ease); }

/* The instant demo page: one markup for every state; [data-state] on the view shows the blocks of the current one.
   The form's button and the chat's input reach the bottom-right corner: on desktop the page keeps clear of the dock. */
.trial-view > .container { padding-right: 96px; }
.trial-head { margin-bottom: 18px; }
.trial-view:not([data-state="form"]) .trial-lede { display: none; }
/* From the first answer on, the page starts at the top in every state: the h1 stays put while the blocks change under it. */
.trial-view:not([data-state="form"]) { align-content: start; }
.trial-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.trial-grid > * { min-width: 0; }
.trial-intro { display: grid; gap: 14px; align-content: start; }
.trial-intro .next { grid-template-columns: 1fr; gap: 8px; }
.trial-view:not([data-state="form"]) .trial-grid { display: none; }
.field .check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-weight: 500; font-size: 14px; line-height: 1.45; cursor: pointer; }
.field .check input { width: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.field.invalid .check input { outline: 2px solid #b42318; outline-offset: 1px; }
.trial-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; font-weight: 600; padding: 4px 0; }
.trial-more summary::-webkit-details-marker { display: none; }
.trial-more .plus { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--hair-2); display: grid; place-items: center; flex: none; transition: transform 0.3s var(--ease); }
.trial-more .plus svg { width: 10px; height: 10px; }
.trial-more[open] .plus { transform: rotate(45deg); }
.trial-more .form-row { margin-top: 10px; }
.trial-privacy a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
/* In the page's order: the state's heading, the phone, then what was found, the link and the ways on. A screen reader
   and the Tab key meet the chat right after "Am pregătit…"; on a desktop the phone sits beside both parts. */
.trial-live { display: none; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 72px); row-gap: 16px; align-items: start; }
.trial-view:not([data-state="form"]) .trial-live { display: grid; }
.trial-live > * { min-width: 0; }
.trial-live > .trial-col { grid-column: 1; grid-row: 1; }
.trial-live > .trial-after { grid-column: 1; grid-row: 2; }
.trial-live > .trial-phone { grid-column: 2; grid-row: 1 / span 2; }
.trial-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.trial-ready-more { display: none; gap: 14px; align-content: start; }
.trial-view[data-state="ready"] .trial-ready-more { display: grid; animation: trial-fade 200ms var(--ease) both; }
.trial-block { display: none; gap: 14px; align-content: start; }
.trial-view:is([data-state="queued"], [data-state="reading"]) [data-block="progress"],
.trial-view[data-state="ready"] [data-block="ready"],
.trial-view:is([data-state="manual"], [data-state="failed"], [data-state="slow"], [data-state="expired"], [data-state="limit"], [data-state="stopped"]) [data-block="end"] { display: grid; animation: trial-fade 200ms var(--ease) both; }
@keyframes trial-fade { from { opacity: 0; } to { opacity: 1; } }
.trial-block h2 { font-size: clamp(24px, 2.2vw, 32px); }
/* Focus is moved to these headings on every change of state (and the status region says it): they are not controls. */
.trial-block h2:focus { outline: none; }
.trial-view .scan i { animation: trial-pulse 1.4s ease-in-out infinite; }
@keyframes trial-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }
.trial-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trial-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: center; font-size: 15px; color: var(--muted); }
.trial-steps .mark { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--hair-2); display: grid; place-items: center; }
.trial-steps .mark svg { width: 11px; height: 11px; opacity: 0; }
.trial-steps li.is-active { color: var(--ink); font-weight: 500; }
.trial-steps li.is-active .mark { border-color: var(--ink); }
.trial-steps li.is-done { color: var(--ink-2); }
.trial-steps li.is-done .mark { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.trial-steps li.is-done .mark svg { opacity: 1; }
.trial-rows { display: grid; gap: 7px; }
.trial-rows .row { font-size: 13.5px; line-height: 1.4; align-items: start; }
.trial-rows .row svg { margin-top: 1px; }
.trial-assumed .row, .trial-missing .row { grid-template-columns: 1fr; color: var(--ink-2); }
.trial-ready-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* What was found beside what was filled in, the same height of proof and of caveat; what is missing below. */
.trial-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.trial-cards > * { min-width: 0; }
.trial-cards .vis-card { align-content: start; }
.trial-cards .trial-missing { grid-column: 1 / -1; }
.trial-next { font-size: 15px; color: var(--ink-2); }
.trial-end { padding: 22px 24px; border-radius: 16px; background: var(--surface-2); }
/* No demo ran on these three, nor on an expired one opened again from its link (the chat still says it is being
   prepared): the phone would be an empty promise, so the page is the message and the two ways on. */
.trial-view:is([data-state="manual"], [data-state="failed"], [data-state="slow"]) .trial-live,
.trial-view[data-state="expired"]:has(.chat-body[data-preparing]) .trial-live { grid-template-columns: minmax(0, 720px); }
.trial-view:is([data-state="manual"], [data-state="failed"], [data-state="slow"]) .trial-phone,
.trial-view[data-state="expired"]:has(.chat-body[data-preparing]) .trial-phone { display: none; }
.trial-end p { font-size: 15.5px; color: var(--ink-2); max-width: 52ch; }
.trial-keep { display: none; gap: 6px; }
.trial-view:is([data-state="queued"], [data-state="reading"], [data-state="ready"]) .trial-keep { display: grid; }
.trial-link { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trial-link code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; }
.trial-link .btn { flex: none; }
.trial-actions { display: none; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.trial-view:is([data-state="ready"], [data-state="manual"], [data-state="failed"], [data-state="slow"], [data-state="expired"], [data-state="limit"], [data-state="stopped"]) .trial-actions { display: flex; }
.trial-actions .btn { align-self: center; }
.trial-actions .way { flex: 1 1 240px; }
.trial-phone { display: grid; justify-items: center; }
.trial-live .phone { --ph: min(340px, 100%, calc((100dvh - var(--nav-h) - 150px) * 9 / 18.4)); }
/* One column as wide as the screen: an input's own default width must never widen it past a small phone. */
.trial-screen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
.trial-screen .chat-head { padding-top: 34px; }
.trial-screen .chat-head .chip { display: inline-block; margin-top: 3px; padding: 2px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.16); color: var(--chat-head-ink); opacity: 1; }
.trial-screen .chat-avatar { overflow: hidden; flex: none; }
.trial-screen .chat-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.trial-banner { padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--hair); font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.trial-banner p + p { margin-top: 4px; color: var(--ink); font-weight: 500; }
.trial-sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 8px; }
.trial-sugg:empty { display: none; }
.trial-sugg button { border: 1px solid var(--hair-2); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 10px; font-size: 11.5px; text-align: left; transition: border-color 0.2s var(--ease), transform 0.16s var(--ease); }
.trial-sugg button:active { transform: scale(0.97); }
.trial-chat-form { display: flex; gap: 8px; padding: 8px 12px 6px; }
.trial-chat-form input { flex: 1; min-width: 0; border: 1px solid var(--hair-2); border-radius: 999px; padding: 9px 13px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.trial-chat-form input:focus { outline: 0; border-color: var(--ink); }
.trial-chat-form input:disabled { opacity: 0.55; }
.trial-chat-form button { width: 38px; height: 38px; flex: none; border: 0; border-radius: 999px; background: var(--ink); color: var(--ground); display: grid; place-items: center; transition: transform 0.16s var(--ease), opacity 0.2s var(--ease); }
.trial-chat-form button:active { transform: scale(0.97); }
.trial-chat-form button:disabled { opacity: 0.4; cursor: default; }
.trial-chat-form button svg { width: 15px; height: 15px; fill: currentColor; }
.trial-left { padding: 0 14px 12px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trial-left:empty { display: none; }
.msg.note { align-self: center; max-width: 92%; padding: 2px 8px; background: transparent; color: var(--muted); font-size: 11.5px; text-align: center; animation: none; }
button.msg.note { border: 0; color: #b42318; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.trial-from-contact { display: none; gap: 8px; margin-top: 12px; }
.form.is-sent .trial-from-contact:not([hidden]) { display: grid; justify-items: start; }
@media (hover: hover) and (pointer: fine) {
  .chip-radio:hover { border-color: var(--ink); color: var(--ink); }
  .chip-radio:has(input:checked):hover { color: var(--ground); }
  .trust-list a:hover, .trial-privacy a:hover { text-decoration-color: var(--ink); }
  .trial-sugg button:hover { border-color: var(--ink); }
}

/* ---------- Reveal + motion ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
  .reveal.is-inview { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 0.07s; } .reveal[data-delay="2"] { transition-delay: 0.14s; } .reveal[data-delay="3"] { transition-delay: 0.21s; } .reveal[data-delay="4"] { transition-delay: 0.28s; }
  .page-enter .hero-copy > *, .page-enter .head > * { animation: rise 0.9s var(--ease) both; }
  .page-enter .hero-copy > *:nth-child(2), .page-enter .head > *:nth-child(2) { animation-delay: 0.07s; }
  .page-enter .hero-copy > *:nth-child(3) { animation-delay: 0.14s; }
  .page-enter .hero-visual { animation: rise 1s var(--ease) 0.18s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html.snap { scroll-snap-type: none; }
  .bar-fill, .col-fill { transform: none !important; }
  .story-step { opacity: 1; }
  .owner-card { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .strip { grid-template-columns: 1fr 1fr 1fr; }
  .strip > p { grid-column: 1 / -1; max-width: none; }
  .tile { grid-column: span 4; }
  .tile-chart { grid-column: span 6; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .creds { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 640px) {
  html.snap { scroll-snap-type: none; }
  .view { min-height: 0; padding-block: clamp(40px, 8vh, 72px); }
  .story-step { min-height: 0; }
}
@media (max-width: 900px) {
  /* Same one-screen logic on mobile, with proximity snapping so long views stay scrollable. */
  html.snap { scroll-snap-type: y proximity; }
  .view { min-height: calc(100dvh - var(--nav-h)); padding-block: 28px; }
  .story-step { min-height: 0; scroll-snap-align: none; }
  h1 { font-size: clamp(30px, 8vw, 40px); }
  h2 { font-size: clamp(26px, 7vw, 34px); }
  .lede { font-size: 16.5px; }
  .head { margin-bottom: 20px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { display: none; }
  .nav-sheet { display: block; position: fixed; inset: var(--nav-h) 0 0; background: color-mix(in srgb, var(--ground) 96%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 39; padding: 24px var(--gutter); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); overflow-y: auto; }
  .nav-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .nav-sheet ul a { display: block; padding: 14px 6px; font-family: var(--font-display); font-size: 26px; font-weight: 500; border-bottom: 1px solid var(--hair); opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
  .nav-sheet.is-open ul a { opacity: 1; transform: none; }
  .nav-sheet.is-open li:nth-child(2) a { transition-delay: 0.05s; } .nav-sheet.is-open li:nth-child(3) a { transition-delay: 0.1s; } .nav-sheet.is-open li:nth-child(4) a { transition-delay: 0.15s; } .nav-sheet.is-open li:nth-child(5) a { transition-delay: 0.2s; } .nav-sheet.is-open li:nth-child(6) a { transition-delay: 0.25s; } .nav-sheet.is-open li:nth-child(7) a { transition-delay: 0.3s; }
  .nav-sheet .btn { margin-top: 22px; display: inline-flex; }
  .hero-grid, .problem-grid, .demo-grid, .story-grid, .control-grid, .about-grid, .contact-grid, .receive, .pack, .cta-band, .guar.two, .pack-list, .trio, .mosaic, .why-grid, .why-data, .next, .wins, .wins.four, .why-foot, .calc-grid, .report-grid, .report-lists, .trust-list, .trial-grid, .trial-live, .trial-cards { grid-template-columns: 1fr; }
  .why-foot { padding-right: 0; }
  .calc-grid { grid-template-rows: none; grid-template-areas: "head" "form" "result" "more" "actions"; }
  .calc-result { margin-top: 18px; padding-right: 0; }
  .view > .container:has(> .trust), .trial-view > .container { padding-right: 0; }
  .trial-grid > .form { order: -1; }
  .trial-cards .trial-missing { grid-column: auto; }
  /* One column in the page's order: once ready, the heading, the chat to try it in, then what was found. Before and
     after, the phone has nothing to press, so the state's message and its ways come first and the phone last. */
  .trial-live { grid-template-rows: none; }
  .trial-live > .trial-col, .trial-live > .trial-after, .trial-live > .trial-phone { grid-column: auto; grid-row: auto; }
  .trial-view:not([data-state="ready"]) .trial-live > .trial-phone { order: 1; }
  .quad { grid-template-columns: 1fr 1fr; }
  .mo-a { grid-column: span 1; }
  .hero-copy h1 { max-width: none; }
  .hero-visual { order: 2; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .cell-a { grid-column: span 2; grid-row: span 1; }
  .cell-b, .cell-c, .cell-d, .cell-e, .cell-f { grid-column: span 1; }
  .story-pin { position: relative; top: 0; height: auto; order: -1; padding: 16px 0; }
  .story .phone { --ph: min(320px, 100%); }
  .story-step { opacity: 1; padding: 22px 0; border-top: 1px solid var(--block-hair); }
  .owner-card { position: relative; right: 0; top: 0; width: 100%; margin-top: 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile, .tile.third { grid-column: span 1; }
  .tile-chart { grid-column: span 2; }
  .cta-band .actions { justify-content: start; }
  .faq { columns: 1; }
  .sources ol { grid-template-columns: 1fr; }
  .about-photo { max-height: none; max-width: 420px; }
  .phone { --ph: min(320px, 100%); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .strip { grid-template-columns: 1fr 1fr; }
  .bento, .tiles, .how-steps, .creds, .quad { grid-template-columns: 1fr; }
  .cell-a, .tile-chart { grid-column: span 1; }
  .panel-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 12px 10px; gap: 4px; }
  .kpi .k-label { font-size: 12px; }
  .kpi .k-value { font-size: 28px; }
  .kpi .k-note { font-size: 12px; }
  .kpi .k-src { font-size: 11px; }
  .kpi.wide { grid-column: span 2; }
  .tile { min-height: 0; padding: 20px 20px 16px; }
  .tile-value { font-size: 44px; }
  .tile-chart .cmp-row { grid-template-columns: 84px 1fr 56px; font-size: 13.5px; }
  .tile-chart { padding: 18px; }
  .tile-chart .spark { height: 96px; }
  .dash-top { display: grid; gap: 14px; }
  .dash-tabs { display: grid; grid-template-columns: 1fr; width: 100%; border-radius: 16px; padding: 5px; gap: 4px; }
  .dash-tabs button { white-space: normal; text-align: center; padding: 10px 12px; border-radius: 12px; }
  .cols { --ch: 84px; }
  .col-l { font-size: 11px; }
  .nav > .container { width: calc(100% - 28px); }
  .strip-stat b { font-size: 24px; }
  .panel { padding: 12px; }
  .kpi { min-height: 0; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .cta-band { padding: 24px; }
  .cta-band .actions .btn { width: 100%; justify-content: center; }
  .form { padding: 18px; }
  .footer-grid { gap: 22px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 84px 1fr 48px; }
  .dock { right: 12px; bottom: 12px; }
  .chatbox { right: 12px; bottom: 76px; }
  .dock .chat-btn .dock-label.always { opacity: 0; }
  .calc-fields { grid-template-columns: 1fr; }
  .calc-presets .chips-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-result { padding-right: 64px; }
  .calc-actions .btn { width: 100%; justify-content: center; }
  .report-grid { padding-right: 64px; }
  .report-kpis { grid-template-columns: 1fr 1fr; }
  .report-kpis .kpi.dark { grid-column: span 2; }
  .works-with .chip { white-space: normal; }
  /* No phone inside a phone: the demo's chat becomes a full-width card, its messages scroll and the input stays
     pinned under them; the messages, the suggestions and the input keep clear of the dock's buttons. */
  .trial-live .phone { width: 100%; aspect-ratio: auto; height: min(560px, calc(100dvh - var(--nav-h) - 24px)); padding: 0; border-radius: 18px; background: var(--chat-bg); border: 1px solid var(--hair); box-shadow: var(--shadow-card); }
  .trial-live .phone-notch { display: none; }
  .trial-live .phone-screen { border-radius: 17px; }
  .trial-screen .chat-head { padding-top: 12px; }
  .trial-screen .chat-body, .trial-sugg, .trial-chat-form { padding-right: 64px; }
  .trial-actions .btn { width: 100%; justify-content: center; white-space: normal; line-height: 1.25; text-align: center; }
}