/* ============================================================
   Landing page — Bold Modern SaaS
   ============================================================ */

.wrap { width:min(1180px, 92vw); margin-inline:auto; }

/* ---------------- Nav ---------------- */
.nav {
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(12px);
  background:rgba(251,251,245,.82); border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.nav.scrolled { border-color:var(--line); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.logo .mark { width:30px; height:30px; border-radius:9px; background:var(--ink); display:grid; place-items:center; color:var(--lime); font-size:17px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a.link { font-weight:500; font-size:15px; color:var(--ink-soft); transition:color .15s; }
.nav-links a.link:hover { color:var(--ink); }
.nav-cta { display:flex; align-items:center; gap:12px; }
.burger { display:none; background:none; border:none; cursor:pointer; font-size:24px; }

/* ---------------- Hero ---------------- */
.hero { position:relative; padding:88px 0 40px; overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.1fr minmax(0, 430px); gap:56px; align-items:center; }
.hero .wrap > * { min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px;
  background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:99px; box-shadow:var(--shadow); }
.eyebrow .dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 4px var(--lime-soft); }
.hero h1 { font-size:clamp(38px, 5vw, 62px); margin:22px 0 0; font-weight:700; letter-spacing:-.01em; line-height:1.04; }
.hero p.sub { font-size:clamp(17px,1.5vw,20px); color:var(--ink-soft); margin:22px 0 0; max-width:40ch; }
.hero-cta { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.hero-note { margin-top:18px; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.hero-note b { color:var(--ink); }

/* floating blobs */
.blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:-1; }
.blob.a { width:340px; height:340px; background:var(--lime); top:-80px; right:4%; opacity:.18; filter:blur(100px); }
.blob.b { width:300px; height:300px; background:#bcd0ff; bottom:-120px; left:-60px; opacity:.3; }

/* Hero visual: browser frame with a live chat */
.frame-wrap { position:relative; width:100%; max-width:430px; margin-left:auto; }
.frame { width:100%; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; }

/* Attention wiggle on the chat box (periodic, gentle). */
.frame-wrap.wiggle { animation: heroWiggle 3.4s var(--ease) 1.4s infinite; transform-origin:50% 50%; }
@keyframes heroWiggle {
  0%, 80%, 100% { transform: rotate(0deg) translateY(0); }
  84% { transform: rotate(-1.5deg) translateY(-5px); }
  88% { transform: rotate(1.5deg) translateY(-5px); }
  92% { transform: rotate(-1deg) translateY(-2px); }
  96% { transform: rotate(.6deg) translateY(0); }
}

/* "Try it here" arrow badge pointing at the chat box. */
.try-here { position:absolute; top:-56px; right:40px; z-index:6; display:flex; flex-direction:column;
  align-items:flex-end; gap:2px; pointer-events:none; }
.try-here span { font-family:var(--font-display); font-weight:600; font-size:17px; color:var(--ink);
  background:var(--lime); padding:6px 15px; border-radius:999px; rotate:-4deg; box-shadow:var(--shadow);
  white-space:nowrap; }
.try-here .ta { width:52px; height:46px; color:var(--ink); margin-right:14px; }
.frame-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--paper); }
.frame-bar i { width:11px; height:11px; border-radius:50%; background:#e2e2d6; display:block; flex:0 0 auto; }
.frame-bar .url { margin-left:10px; font-size:12px; color:var(--muted); font-family:ui-monospace,monospace;
  background:#fff; border:1px solid var(--line); padding:5px 12px; border-radius:7px; flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chatmock { padding:18px; min-height:330px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg,#fff,var(--paper)); }
.cm { max-width:80%; padding:11px 15px; border-radius:16px; font-size:14.5px; line-height:1.45; opacity:0; transform:translateY(8px); animation:cmIn .5s var(--ease) forwards; }
.cm.bot { background:var(--paper-2); border-bottom-left-radius:5px; }
.cm.user { background:var(--ink); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.cm.b1{animation-delay:.3s} .cm.u1{animation-delay:1.1s} .cm.b2{animation-delay:1.9s} .cm.b3{animation-delay:2.6s}
.cm .typing span{ display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:#aaa; animation:blink 1.2s infinite; }
.cm .typing span:nth-child(2){animation-delay:.2s} .cm .typing span:nth-child(3){animation-delay:.4s}
@keyframes cmIn { to { opacity:1; transform:none; } }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.chatmock .badge { align-self:center; font-size:11px; color:var(--muted); margin-top:auto; }

/* ---------------- Stat strip ---------------- */
.stats { border-block:1px solid var(--line); background:#fff; }
.stats .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-cell { padding:64px 24px; text-align:center; border-left:1px solid var(--line); }
.stat-cell:first-child { border-left:none; }
.stat-cell .n { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,4.4vw,58px);
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-cell .l { color:var(--muted); font-size:15px; margin-top:10px; }

/* ---------------- Section scaffold ---------------- */
section.block { padding:90px 0; }
.section-head { max-width:680px; margin-bottom:48px; }
.kicker { font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-700); }
.section-head h2 { font-size:clamp(30px,4vw,48px); margin-top:12px; }
.section-head p { color:var(--ink-soft); font-size:18px; margin-top:14px; }
.center { margin-inline:auto; text-align:center; }

/* ---------------- Features ---------------- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.feature:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:#d6d6c8; }
.feature .ic { width:50px; height:50px; border-radius:13px; background:var(--ink); color:var(--lime);
  display:grid; place-items:center; font-size:24px; margin-bottom:18px; }
.feature:nth-child(3n+1) .ic { background:var(--lime); color:var(--ink); }
.feature h3 { font-size:20px; }
.feature p { color:var(--ink-soft); font-size:15px; margin-top:8px; }

/* ---------------- How it works (animated app mockups) ---------------- */
.how { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
#how { padding:120px 0; }
.how .kicker { color:var(--lime); }
.how .section-head { margin-bottom:72px; }
.how .section-head h2, .how .section-head p { color:#fff; }
.how .section-head p { color:rgba(255,255,255,.7); }

.how-rows { display:flex; flex-direction:column; gap:84px; }
.how-row { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.how-row.reverse .how-copy { order:2; }
.how-row.reverse .how-demo { order:1; }

.how-step { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:700;
  font-size:13px; letter-spacing:.03em; color:rgba(255,255,255,.55); text-transform:uppercase; }
.how-step .hs-n { width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--ink);
  display:grid; place-items:center; font-family:var(--font-display); font-size:14px; }
.how-copy h3 { color:#fff; font-size:clamp(24px,3vw,33px); margin:18px 0 0; line-height:1.1; }
.how-copy > p { color:rgba(255,255,255,.72); font-size:16.5px; line-height:1.6; margin:14px 0 0; max-width:46ch; }
.how-list { list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.how-list li { position:relative; padding-left:30px; color:rgba(255,255,255,.85); font-size:15px; }
.how-list li::before { content:""; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--lime); }
.how-list li::after { content:""; position:absolute; left:6.5px; top:5px; width:5px; height:8.5px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(42deg); }

/* the floating app-mock card */
.how-demo { display:flex; justify-content:center; }
.mini { background:#fff; color:var(--ink); width:100%; max-width:430px; border-radius:20px; padding:20px;
  box-shadow:var(--shadow-lg); }
.mini-lab { display:block; font-size:12px; font-weight:600; color:var(--muted); margin:14px 0 7px; }
.mini-lab:first-child { margin-top:0; }
.mini-lab code { font-family:ui-monospace,monospace; font-size:11.5px; background:var(--paper-2); padding:1px 5px; border-radius:5px; }

/* source tabs (step 1) */
.mini-tabs { display:flex; gap:7px; flex-wrap:wrap; }
.mini-tab { font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:99px; border:1px solid var(--line);
  background:#fff; color:var(--ink-soft); white-space:nowrap; }
.mini-tab.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.mini-field { display:flex; align-items:center; gap:8px; margin-top:14px; }
.mini-url { flex:1; border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13.5px;
  color:var(--ink-soft); font-family:ui-monospace,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-go { flex:0 0 auto; background:var(--lime); color:var(--ink); font-weight:700; font-size:13px;
  padding:11px 16px; border-radius:10px; }

/* crawl progress (step 1) */
.crawl { margin-top:16px; }
.crawl-row { display:flex; align-items:center; gap:11px; padding:8px 0; font-size:14px; color:var(--ink-soft);
  font-family:ui-monospace,monospace; opacity:0; }
.how-row.in .crawl-row { animation:rowIn .45s var(--ease) forwards; }
.how-row.in .crawl-row:nth-child(1){ animation-delay:.15s }
.how-row.in .crawl-row:nth-child(2){ animation-delay:.45s }
.how-row.in .crawl-row:nth-child(3){ animation-delay:.75s }
.how-row.in .crawl-row:nth-child(4){ animation-delay:1.05s }
@keyframes rowIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
.ck { width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:var(--lime); position:relative; }
.ck::after { content:""; position:absolute; left:6px; top:3.5px; width:4px; height:8px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(42deg); }
.ck.spin { background:transparent; border:2.5px solid var(--paper-2); border-top-color:var(--lime-700); }
.ck.spin::after { display:none; }
.how-row.in .ck.spin { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.crawl-bar { height:8px; border-radius:99px; background:var(--paper-2); overflow:hidden; margin-top:12px; }
.crawl-bar i { display:block; height:100%; width:0; border-radius:99px; background:var(--lime); }
.how-row.in .crawl-bar i { animation:grow 2.6s var(--ease) .3s forwards; }
@keyframes grow { to { width:78%; } }
.crawl-cap { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px; color:var(--muted); }
.dotp { width:7px; height:7px; border-radius:50%; background:var(--lime-700); animation:blink 1.2s infinite; }

/* customize preview (step 2) — brand colour cycles, swatch ring follows */
.swatches { display:flex; gap:12px; }
.sw { width:30px; height:30px; border-radius:9px; background:var(--c); position:relative; cursor:pointer; }
.sw::after { content:""; position:absolute; inset:-5px; border-radius:13px; border:2.5px solid var(--ink); opacity:0; }
.sw:nth-child(5)::after { border-color:var(--lime); }
.how-row.in .sw::after,
.dtab-pane:not(.hidden) .sw::after { animation:ringPulse 11s linear infinite; }
.sw:nth-child(1)::after { animation-delay:0s; }
.sw:nth-child(2)::after { animation-delay:-2.2s; }
.sw:nth-child(3)::after { animation-delay:-4.4s; }
.sw:nth-child(4)::after { animation-delay:-6.6s; }
.sw:nth-child(5)::after { animation-delay:-8.8s; }
@keyframes ringPulse { 0%{opacity:0;transform:scale(.7)} 2%,15%{opacity:1;transform:scale(1)} 18%,100%{opacity:0} }

.prev { border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:16px; }
.prev-head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line);
  font-weight:600; font-size:14px; }
.prev-av { width:26px; height:26px; border-radius:8px; background:var(--lime); }
.how-row.in .prev-av, .dtab-pane:not(.hidden) .prev-av { animation:brandCycle 11s linear infinite; }
@keyframes brandCycle {
  0%,16% { background:#C4F82A; } 20%,36% { background:#7C5CFF; } 40%,56% { background:#FF7A59; }
  60%,76% { background:#1FB6FF; } 80%,96% { background:#0E0F0C; } 100% { background:#C4F82A; }
}
.prev-body { padding:14px; display:flex; flex-direction:column; gap:9px; background:linear-gradient(180deg,#fff,var(--paper)); }
.prev-bot { align-self:flex-start; background:var(--paper-2); padding:9px 13px; border-radius:13px;
  border-bottom-left-radius:4px; font-size:13.5px; max-width:82%; }
.prev-user { align-self:flex-end; background:var(--ink); color:#fff; padding:9px 13px; border-radius:13px;
  border-bottom-right-radius:4px; font-size:13.5px; }

/* embed code + channels (step 3) */
.code { position:relative; background:var(--ink-2); border:1px solid rgba(255,255,255,.08); color:#e8e8df;
  border-radius:12px; padding:15px 16px; font-family:ui-monospace,monospace; font-size:12.5px; line-height:1.7;
  overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.code .tok-p { color:#8fa15f; } .code .tok-a { color:#9ad0ff; } .code .tok-s { color:var(--lime); }
.copied { position:absolute; top:10px; right:10px; background:var(--lime); color:var(--ink); font-family:var(--font-body);
  font-weight:700; font-size:11px; padding:4px 9px; border-radius:7px; opacity:0; }
.how-row.in .copied { animation:copyToast 4.2s var(--ease) 1.1s infinite; }
@keyframes copyToast { 0%{opacity:0;transform:translateY(-4px)} 8%,42%{opacity:1;transform:none} 52%,100%{opacity:0} }
.chans { display:flex; gap:11px; }
.chan { width:48px; height:48px; border-radius:13px; background:var(--paper-2); display:grid; place-items:center;
  filter:grayscale(1); opacity:.45; }
.chan img { width:24px; height:24px; }
.how-row.in .chan { animation:chanOn .55s var(--ease) forwards; }
.how-row.in .chan:nth-child(1){ animation-delay:.4s }
.how-row.in .chan:nth-child(2){ animation-delay:.7s }
.how-row.in .chan:nth-child(3){ animation-delay:1.0s }
.how-row.in .chan:nth-child(4){ animation-delay:1.3s }
.how-row.in .chan:nth-child(5){ animation-delay:1.6s }
@keyframes chanOn { to { filter:none; opacity:1; transform:translateY(-3px); } }

/* ---------------- Dashboard showcase ---------------- */
.dash { background:var(--paper-2); }
.dash-frame { background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; }
.dwin-bar { display:flex; align-items:center; gap:7px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--paper); }
.dwin-bar i { width:11px; height:11px; border-radius:50%; background:#e2e2d6; }
.dwin-bar .u { margin-left:12px; font-size:12px; color:var(--muted); font-family:ui-monospace,monospace;
  background:#fff; border:1px solid var(--line); padding:5px 16px; border-radius:7px; }
.dwin { display:grid; grid-template-columns:212px 1fr; min-height:460px; }

.dwin-side { background:var(--ink); color:#fff; padding:20px 16px; display:flex; flex-direction:column; gap:11px; }
.dside-brand { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:17px; }
.dside-new { background:var(--lime); color:var(--ink); font-weight:700; font-size:13.5px; text-align:center;
  padding:10px; border-radius:10px; margin-top:6px; }
.dside-lab { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-top:8px; }
.dside-bot { font-size:14px; color:rgba(255,255,255,.72); padding:9px 11px; border-radius:9px; }
.dside-bot.on { background:rgba(255,255,255,.08); color:#fff; }
.dside-spacer { flex:1; }
.dside-foot { font-size:11.5px; color:rgba(255,255,255,.4); border-top:1px solid rgba(255,255,255,.1); padding-top:12px; }

.dwin-main { padding:24px 28px; min-width:0; }
.dwin-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dwin-head h4 { font-size:21px; }
.dtabs { display:flex; gap:9px; margin:18px 0 22px; flex-wrap:wrap; }
.dtab { font-family:inherit; font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:99px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .15s var(--ease); }
.dtab:hover { border-color:var(--ink); color:var(--ink); }
.dtab.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dtab-pane.hidden { display:none; }

/* KPIs */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.kpi { background:var(--paper); border:1px solid var(--line); border-radius:15px; padding:16px 17px; }
.kpi .kn { font-family:var(--font-display); font-weight:700; font-size:clamp(26px,2.4vw,32px);
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .kl { color:var(--muted); font-size:12.5px; margin-top:6px; }
.kpi .kd { font-size:11.5px; font-weight:700; color:var(--lime-700); margin-top:8px; }

/* bar chart */
.chartcard { margin-top:16px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.chart-h { display:flex; justify-content:space-between; align-items:baseline; }
.chart-h strong { font-family:var(--font-display); font-size:16px; }
.chart-sub { font-size:12.5px; color:var(--muted); }
.bars { display:flex; align-items:flex-end; gap:12px; height:128px; margin-top:16px; }
.bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; height:100%; justify-content:flex-end; }
.bar i { width:100%; max-width:36px; border-radius:8px 8px 0 0; height:0;
  background:linear-gradient(180deg,var(--lime),var(--lime-600)); }
.dash-frame.in .bar i { animation:barGrow .9s var(--ease) forwards; }
.dash-frame.in .bar:nth-child(1) i{animation-delay:.1s} .dash-frame.in .bar:nth-child(2) i{animation-delay:.18s}
.dash-frame.in .bar:nth-child(3) i{animation-delay:.26s} .dash-frame.in .bar:nth-child(4) i{animation-delay:.34s}
.dash-frame.in .bar:nth-child(5) i{animation-delay:.42s} .dash-frame.in .bar:nth-child(6) i{animation-delay:.5s}
.dash-frame.in .bar:nth-child(7) i{animation-delay:.58s}
@keyframes barGrow { to { height:var(--h); } }
.bar span { font-size:11px; color:var(--muted); }

/* gaps */
.gaps { margin-top:18px; }
.gaps-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.gaps-h strong { font-family:var(--font-display); font-size:16px; }
.gaps-sub { font-size:12.5px; color:var(--muted); }
.gap { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 15px;
  border:1px solid var(--line); border-radius:11px; background:var(--paper); margin-top:8px; font-size:14px; }
.gap .gadd { flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--lime-700); }
.gap .gadd.score { min-width:34px; text-align:center; font-size:15px; font-weight:800; padding:3px 9px; border-radius:9px; }
.gap .gadd.score.hot { color:#e5533c; background:rgba(229,83,60,.12); }
.gap .gadd.score.warm { color:#c8881a; background:rgba(224,169,46,.15); }
.gap .gadd.score.cold { color:var(--muted); background:var(--paper-2,#f2f2f0); }

/* customize pane */
.dcust { display:grid; grid-template-columns:1fr 290px; gap:26px; }
.mini-input { border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px; color:var(--ink); background:#fff; }
.mini-area { border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13.5px;
  color:var(--ink-soft); background:#fff; line-height:1.5; }
.mini-select { border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--ink-soft); background:#fff; }
.dcust-row { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; margin-top:2px; }
.tgl-row { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.tgl { width:42px; height:24px; border-radius:99px; background:var(--line); position:relative; flex:0 0 auto; transition:background .2s; }
.tgl::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s var(--ease); }
.tgl.on { background:var(--lime); } .tgl.on::after { left:21px; }
.qchips { display:flex; flex-wrap:wrap; gap:8px; }
.qchip { font-size:12.5px; border:1px solid var(--line); background:var(--paper); border-radius:99px; padding:7px 13px; color:var(--ink-soft); }
.dcust-prev .prev { margin-top:14px; }

/* highlight blurbs */
.dash-points { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
.dpoint { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 32px;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.dpoint:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:#d6d6c8; }
.dp-ic { width:52px; height:52px; border-radius:14px; background:var(--lime); display:grid; place-items:center; font-size:25px; margin-bottom:16px; }
.dpoint h3 { font-size:21px; }
.dpoint p { color:var(--ink-soft); font-size:15px; margin-top:9px; line-height:1.55; }

/* ---------------- Channels (big layout) ---------------- */
#channels { padding:112px 0; }

/* featured website card */
.channel-feature { display:flex; align-items:center; gap:44px; background:var(--ink); color:#fff;
  border-radius:var(--r-xl); padding:52px 56px; margin-bottom:20px; position:relative; overflow:hidden; }
.channel-feature::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%;
  background:var(--lime); filter:blur(130px); opacity:.16; top:-140px; right:-60px; }
.cf-icon { flex:0 0 auto; width:128px; height:128px; border-radius:30px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; position:relative; z-index:1; }
.cf-icon svg { width:64px; height:64px; }
.cf-text { position:relative; z-index:1; }
.cf-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink); background:var(--lime); padding:5px 12px; border-radius:99px; }
.cf-text h3 { font-size:34px; color:#fff; margin:14px 0 0; letter-spacing:-.01em; }
.cf-text p { color:rgba(255,255,255,.7); font-size:17px; line-height:1.55; margin:12px 0 0; max-width:52ch; }

/* messaging app cards */
.channel-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.channel-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px;
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.channel-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:#d6d6c8; }
.cc-logo { width:72px; height:72px; border-radius:20px; background:var(--paper-2); display:grid; place-items:center; margin-bottom:20px; }
.cc-logo img { width:40px; height:40px; }
.channel-card h3 { font-size:21px; }
.channel-card p { color:var(--ink-soft); font-size:15px; margin-top:8px; line-height:1.5; }

/* ---------------- Pricing ---------------- */
.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.price-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; position:relative; transition:transform .25s var(--ease); }
.price-card.feat { background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.03); box-shadow:var(--shadow-lg); }
.price-card.feat .pc-feats li { color:rgba(255,255,255,.85); }
.price-card .pc-name { font-family:var(--font-display); font-weight:600; font-size:22px; }
.price-card .pc-price { font-family:var(--font-display); font-weight:700; font-size:46px; margin-top:6px; }
.price-card .pc-price small { font-size:15px; font-weight:500; color:var(--muted); }
.price-card.feat .pc-price small { color:rgba(255,255,255,.6); }
.pc-feats { list-style:none; padding:0; margin:22px 0 26px; }
.pc-feats li { padding:7px 0 7px 28px; position:relative; font-size:14.5px; color:var(--ink-soft); }
.pc-feats li::before { content:"✓"; position:absolute; left:0; color:var(--lime-700); font-weight:700; }
.price-card.feat .pc-feats li::before { color:var(--lime); }
.pc-flag { position:absolute; top:-13px; right:24px; background:var(--lime); color:var(--ink);
  font-weight:700; font-size:12px; padding:5px 12px; border-radius:99px; }

/* ---------------- FAQ ---------------- */
.faq { max-width:760px; margin-inline:auto; }
.qa { border-bottom:1px solid var(--line); }
.qa summary { cursor:pointer; list-style:none; padding:22px 4px; font-weight:600; font-size:18px;
  display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); }
.qa summary::-webkit-details-marker { display:none; }
.qa summary .plus { color:var(--lime-700); font-size:24px; transition:transform .25s; }
.qa[open] summary .plus { transform:rotate(45deg); }
.qa p { padding:0 4px 22px; color:var(--ink-soft); margin:0; }

/* ---------------- CTA band ---------------- */
.cta-band { position:relative; overflow:hidden; background:var(--lime); border-radius:var(--r-xl); padding:64px 48px; text-align:center; }
.cta-band h2 { font-size:clamp(30px,4.5vw,54px); }
.cta-band p { font-size:18px; color:var(--ink-soft); margin:14px auto 28px; max-width:46ch; }

/* ---------------- Footer ---------------- */
.foot { padding:60px 0 40px; }
.foot .wrap { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot .col h4 { font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:14px; }
.foot .col a { display:block; color:var(--ink-soft); padding:5px 0; font-size:15px; }
.foot .col a:hover { color:var(--ink); }
.foot-bottom { border-top:1px solid var(--line); margin-top:40px; padding-top:22px; color:var(--muted); font-size:13.5px; text-align:center; }
.foot-bottom a { color:var(--muted); }
.foot-bottom a:hover { color:var(--ink); }

/* ---------------- Reveal on scroll ---------------- */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------------- Responsive ---------------- */
@media (prefers-reduced-motion: reduce){
  .frame-wrap.wiggle { animation:none; }
  /* Animations are globally disabled — snap mock elements to their end state
     so nothing is left stuck in its hidden/zero starting frame. */
  .crawl-row { opacity:1; }
  .crawl-bar i { width:78%; }
  .chan { filter:none; opacity:1; }
  .bar i { height:var(--h); }
  .ck.spin { border-top-color:var(--paper-2); }
}
@media (max-width:900px){
  .hero .wrap { grid-template-columns:1fr; gap:40px; }
  .hero p.sub { max-width:none; }
  .frame-wrap { margin:0 auto; }
  .try-here { right:18px; top:-50px; }
  .frame { rotate:0deg; }
  .feature-grid, .price-grid { grid-template-columns:1fr; }
  .channel-grid { grid-template-columns:repeat(2,1fr); }
  .channel-feature { flex-direction:column; align-items:flex-start; gap:26px; padding:38px 30px; }
  .cf-icon { width:96px; height:96px; }
  .cf-icon svg { width:48px; height:48px; }
  .cf-text h3 { font-size:28px; }
  #channels { padding:80px 0; }
  /* How-it-works: stack copy over its mock, never reverse on mobile */
  .how-row { grid-template-columns:1fr; gap:28px; }
  .how-row.reverse .how-copy { order:1; }
  .how-row.reverse .how-demo { order:2; }
  .how-rows { gap:60px; }
  .mini { max-width:none; }
  /* Dashboard: collapse the window to a single column */
  .dwin { grid-template-columns:1fr; }
  .dwin-side { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; min-height:0; }
  .dside-lab, .dside-spacer, .dside-foot { display:none; }
  .dside-new { margin-top:0; }
  .kpis { grid-template-columns:repeat(2,1fr); }
  .dcust { grid-template-columns:1fr; }
  .dash-points { grid-template-columns:1fr; }
  .price-card.feat { transform:none; }
  .stats .wrap { grid-template-columns:repeat(2,1fr); }
  .stat-cell:nth-child(3){ border-left:none; }
  .nav-links { display:none; position:absolute; top:72px; left:0; right:0; background:#fff; flex-direction:column;
    padding:18px 6vw 26px; gap:14px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .nav-links a.link { font-size:17px; }
  .nav-cta .btn.ghost { display:none; }
  .burger { display:block; }
}

/* ============================================================
   Additions: SVG icons, real brand logos, live demo chat
   ============================================================ */

/* logo + burger SVGs */
.logo .mark svg { display:block; }
.burger { color:var(--ink); display:none; }
.burger svg { display:block; }

/* feature icons are now inline SVG */
.feature .ic svg { width:26px; height:26px; }

/* channel brand logos (Simple Icons CDN) + website globe */
.ch-tag .e { width:24px; height:24px; font-size:0; }

/* hero note as a plain checklist (CSS checkmarks, no emoji) */
.hero-note { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap;
  gap:8px 20px; font-size:13.5px; color:var(--muted); }
.hero-note li { display:flex; align-items:center; gap:9px; }
.hero-note li::before { content:""; width:6px; height:11px; flex:0 0 auto;
  border:solid var(--lime-700); border-width:0 2.2px 2.2px 0; transform:rotate(45deg); margin-bottom:2px; }

/* ---- live demo chat (real, working) ---- */
#try { rotate:0deg; }
.chatwin { padding:16px; height:300px; overflow-y:auto; display:flex; flex-direction:column;
  gap:10px; background:linear-gradient(180deg,#fff,var(--paper)); }
.cmsg { max-width:84%; padding:10px 14px; border-radius:15px; font-size:14px; line-height:1.45;
  word-wrap:break-word; animation:cmIn .35s var(--ease); }
.cmsg.bot { background:var(--paper-2); color:var(--ink); align-self:flex-start; border-bottom-left-radius:5px; }
.cmsg.user { background:var(--ink); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.cmsg.typing { display:inline-flex; gap:4px; align-items:center; }
.cmsg.typing span { width:6px; height:6px; border-radius:50%; background:#b3b3a6; animation:blink 1.2s infinite; }
.cmsg.typing span:nth-child(2){ animation-delay:.2s; } .cmsg.typing span:nth-child(3){ animation-delay:.4s; }
.chat-quick { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.chat-quick button { font-size:12.5px; border:1px solid var(--line); background:#fff; border-radius:99px;
  padding:7px 13px; cursor:pointer; font-family:inherit; color:var(--ink-soft); transition:border-color .15s, color .15s; }
.chat-quick button:hover { border-color:var(--ink); color:var(--ink); }
.chat-foot { display:flex; gap:9px; padding:13px 14px; border-top:1px solid var(--line); background:#fff; }
.chat-foot input { flex:1; border:1.5px solid var(--line); border-radius:99px; padding:11px 16px;
  font-size:14px; outline:none; font-family:inherit; }
.chat-foot input:focus { border-color:var(--ink); }
.chat-foot button { flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:none;
  background:var(--lime); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background .15s, transform .15s; }
.chat-foot button:hover { background:var(--lime-600); transform:translateY(-1px); }
.chat-foot button:disabled { opacity:.5; cursor:not-allowed; transform:none; }

@media (max-width:900px){ .burger { display:block; } }

/* ---------------- Trusted-by marquee ---------------- */
.trusted { padding:72px 0 68px; background:#fff; border-bottom:1px solid var(--line); }
.trusted .label { text-align:center; font-size:14px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 24px; }
.marquee { position:relative; overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.mq-group { display:flex; align-items:center; gap:58px; padding-right:58px; padding-top:34px; padding-bottom:34px; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* each company is its own logo lockup: distinct mark + wordmark */
.logo-item { display:inline-flex; align-items:center; gap:11px; color:#bcbcb0; white-space:nowrap;
  line-height:1; transition:color .2s var(--ease); cursor:default; }
.logo-item:hover { color:var(--ink); }
.logo-item .lm { width:26px; height:26px; flex:0 0 auto; }

.l1  { font-family:var(--font-display); font-weight:700; font-size:23px; text-transform:uppercase; letter-spacing:-.01em; }
.l2  { font-family:"Zodiak",Georgia,serif; font-weight:700; font-size:26px; }
.l3  { font-family:var(--font-body); font-weight:500; font-size:15px; text-transform:uppercase; letter-spacing:.32em; }
.l4  { font-family:"Sentient",Georgia,serif; font-style:italic; font-weight:500; font-size:27px; }
.l5  { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:600; font-size:18px; text-transform:lowercase; letter-spacing:.01em; }
.l6  { font-family:"Tanker",var(--font-display),sans-serif; font-weight:400; font-size:29px; text-transform:uppercase; letter-spacing:.015em; }
.l7  { font-family:"Caveat",cursive; font-weight:700; font-size:34px; }
.l8  { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:.04em; }
.l9  { font-family:var(--font-body); font-weight:600; font-size:19px; font-variant:small-caps; letter-spacing:.07em; }
.l10 { font-family:"Zodiak",Georgia,serif; font-style:italic; font-weight:400; font-size:25px; }
@media (max-width:540px){ .channel-grid { grid-template-columns:1fr; } }

/* Plan Comparison Table */
.plan-compare {
  margin: 80px auto 0;
  max-width: 1000px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: var(--shadow);
}

.plan-compare h3 {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
  font-family: var(--font-display);
}

.compare-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cmp-head, .cmp-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: 16px 20px;
}

.cmp-head {
  border-bottom: 2px solid var(--line);
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cmp-row {
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-soft);
  transition: background 0.15s;
}

.cmp-row:hover {
  background: var(--paper);
}

.cmp-row:last-child {
  border-bottom: none;
}

.cmp-label {
  font-weight: 600;
  color: var(--ink);
}

.cmp-val {
  text-align: center;
}

.cmp-col {
  text-align: center;
}

.cmp-col.label-placeholder {
  text-align: left;
}

.compare-note {
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 768px) {
  .plan-compare {
    padding: 24px 16px;
  }
  .compare-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cmp-head, .cmp-row {
    min-width: 650px;
    padding: 12px 10px;
  }
  .plan-compare h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}