/* BonusFlow site, fase 1 (Oct 2026). Shared by /, /build.html, /modules.html, /help.html. */
:root{
  --ink:#0B1A24; --ink-2:#0F2A39; --petrol:#0E3A4F;
  --gold:#C7A24A; --violet:#6d5efc; --violet-2:#8b5cf6; --violet-soft:rgba(109,94,252,.12);
  --green:#3E9E80; --green-soft:rgba(62,158,128,.12); --rust:#B5532F; --teal:#14b8a6; --orange:#f5953b; --blue:#2f7bf6;
  --paper:#FBF9F4; --paper-2:#F3EFE6; --line:#E7E1D4; --line-d:rgba(255,255,255,.12);
  --text:#15242E; --muted:#5E6F79; --muted-d:#9FB3BE;
  --display:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--text);background:var(--paper);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-size:20px}
a{color:inherit;text-decoration:none}
p{margin:0}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);font-weight:500;display:inline-block}
.lede{font-size:18px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.sr{position:absolute;left:-9999px}

/* nav */
nav.bf{position:sticky;top:0;z-index:50;background:rgba(251,249,244,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:8px;height:64px;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.brand .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--violet),var(--violet-2));display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:14px;font-weight:600}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--muted);font-weight:500}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:22px}
.langs{display:inline-flex;gap:8px;border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.langs a[aria-current]{color:var(--violet)}
.nav-login{font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;cursor:pointer}
@media(max-width:900px){.nav-links,.nav-right .langs{display:none}.menu-btn{display:inline-block}.nav-right{margin-left:8px}
  nav.bf.open .nav-links{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:16px 24px;gap:14px;margin:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:600;font-size:14.5px;border-radius:10px;padding:12px 20px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;box-shadow:0 8px 20px -6px rgba(109,94,252,.5)}
.btn-primary:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted-d);background:#fff}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:8px}
.btn-lg{padding:15px 26px;font-size:16px}

/* sections */
section{padding:84px 0}
section.tight{padding:56px 0}
.deep{background:var(--ink);color:#D7E2E8}
.deep h2,.deep h3{color:#fff}
.deep p{color:#9FB3BE}
.deep .eyebrow{color:var(--gold)}
.head{max-width:680px;margin-bottom:42px}
.head p{margin-top:14px}
.center{text-align:center}
.center .head{margin-left:auto;margin-right:auto}

/* hero */
.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(820px 360px at 86% -10%,rgba(109,94,252,.18),transparent 60%),
  radial-gradient(620px 320px at 4% 2%,rgba(47,123,246,.12),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;position:relative}
.hero h1{font-size:clamp(38px,5.2vw,60px);letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero .lede{max-width:34ch;margin:22px 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted-d);letter-spacing:.02em}
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 80px -34px rgba(11,26,36,.5);background:#fff}
.shot .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f3f4f6;border-bottom:1px solid var(--line)}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:#d3d7dc;display:inline-block}
.shot .bar .u{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--muted-d)}
.shot img{display:block;width:100%;height:auto}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* cards and grids */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:10px;display:block}
.card.link:hover{border-color:var(--muted-d);box-shadow:0 14px 34px -22px rgba(11,26,36,.35)}
.steps{counter-reset:s}
.step{position:relative;padding-left:62px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px}
.step h3{margin-bottom:6px}
.pill{display:inline-block;font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);margin:0 6px 6px 0}
.pill.on{border-color:rgba(109,94,252,.4);background:var(--violet-soft);color:var(--violet)}

/* switches */
.switch{position:relative;width:42px;height:24px;border-radius:999px;background:#d7dce1;transition:background .2s;flex:0 0 auto;border:none;cursor:pointer;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch[aria-checked="true"]{background:var(--violet)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.switch[disabled]{opacity:.55;cursor:default}
.modrow{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.modrow + .modrow{margin-top:8px}
.modrow .nm{font-weight:600;font-size:15px}
.modrow .bl{font-size:13.5px;color:var(--muted)}
.modrow .pr{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap;text-align:right}
.modrow .pr b{color:var(--text);font-weight:600}
.modrow.off .nm{color:var(--muted)}
.modrow .rn{display:none;margin-left:10px}
.modrow[data-on="true"] .rn{display:inline-block}
.modrow .rn input{font:inherit;font-size:13px;padding:5px 9px;border:1px dashed var(--line);border-radius:7px;background:var(--paper);width:150px}
.grp{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.grp:first-child{margin-top:0}

/* mock app menu */
.mock{background:var(--ink);border-radius:14px;padding:16px;color:#cfe0e7;font-size:13.5px}
.mock .t{font-family:var(--mono);font-size:11px;color:var(--muted-d);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.mock .it{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px}
.mock .it i{width:8px;height:8px;border-radius:3px;background:var(--violet);display:inline-block;flex:0 0 auto}
.mock .it.on{background:rgba(255,255,255,.07);color:#fff}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;position:relative}
.plan.popular{border-color:var(--violet);box-shadow:0 24px 60px -30px rgba(109,94,252,.45)}
.plan .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan .pp{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px}
.plan .pp small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.plan p{color:var(--muted);font-size:14.5px;margin:10px 0 18px;flex:1}
.plan .badge{position:absolute;top:-12px;left:28px;background:var(--violet);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;font-size:14px;color:var(--muted)}
.trust span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:9px}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text)}
.field textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px}
.msg.err{color:var(--rust);font-size:14px;margin:0 0 12px}
.thanks{text-align:center;padding:26px}
.thanks .tick{width:48px;height:48px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 14px}
.thanks svg{width:22px;height:22px;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* faq */
details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 18px}
details + details{margin-top:10px}
summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 16px;color:var(--muted);font-size:15px}

/* build page */
.build-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:start}
@media(max-width:960px){.build-grid{grid-template-columns:1fr}}
.sticky{position:sticky;top:84px}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
.ind{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px;cursor:pointer;font:inherit;text-align:left;font-weight:600;font-size:14px;color:var(--text)}
.ind:hover{border-color:var(--muted-d)}
.ind[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft);color:var(--violet)}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.panel .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.panel .row:last-of-type{border-bottom:none}
.panel .tot{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;margin:8px 0 0}
.panel .tot small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.panel .plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.panel .plans3 button{font:inherit;font-size:12.5px;padding:10px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.panel .plans3 button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft);color:var(--violet);font-weight:700}
.panel .plans3 button small{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.panel .plans3 button[aria-pressed="true"] small{color:var(--violet)}
.range{width:100%}
.note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* footer */
footer{background:var(--ink);color:#7e96a3;padding:54px 0 30px;font-size:13.5px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-top .brand{color:#fff;margin-bottom:12px}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-d);margin:0 0 14px}
.foot-col a{display:block;color:#9FB3BE;margin-bottom:9px}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid var(--line-d);margin-top:38px;padding-top:22px;font-family:var(--mono);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bf-family{grid-column:1/-1;margin-top:18px;padding-top:14px;border-top:1px solid rgba(127,127,127,.25);font-size:13.5px;line-height:1.9;opacity:.85}
.bf-family a{color:inherit;margin-right:14px;display:inline-block}

.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.14s}.reveal.d3{animation-delay:.22s}.reveal.d4{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}}

/* ===== fase 1b: colour ===== */
.hero::before{background:
  radial-gradient(820px 380px at 88% -10%,rgba(109,94,252,.26),transparent 60%),
  radial-gradient(640px 340px at 2% 0%,rgba(47,123,246,.16),transparent 60%),
  radial-gradient(560px 300px at 50% 115%,rgba(251,91,125,.14),transparent 62%),
  radial-gradient(420px 240px at 70% 60%,rgba(20,184,166,.10),transparent 60%)}
.topband{height:4px;background:linear-gradient(90deg,var(--blue),var(--violet),#ec4899,var(--orange),var(--teal))}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-weight:800;font-size:15px;flex:0 0 auto}
.c-work{background:var(--blue)} .c-customers{background:var(--orange)} .c-sell{background:#fb5b7d} .c-plan{background:var(--teal)} .c-industry{background:var(--violet-2)} .c-intelligence{background:#6366f1}
.card .ic{margin-bottom:14px}
.card.tone{border-top:4px solid var(--tone,var(--violet))}
.card.tone .k{color:var(--tone,var(--violet))}
.step::before{color:#fff}
.steps .step:nth-child(1)::before{background:linear-gradient(135deg,var(--blue),#60a5fa)}
.steps .step:nth-child(2)::before{background:linear-gradient(135deg,var(--orange),#fbbf24)}
.steps .step:nth-child(3)::before{background:linear-gradient(135deg,var(--violet),#ec4899)}
.ind[aria-pressed="true"]{background:linear-gradient(135deg,rgba(109,94,252,.14),rgba(236,72,153,.10))}
.modrow .ic{width:30px;height:30px;border-radius:8px;font-size:12px}
.modrow.off .ic{filter:grayscale(1);opacity:.45}
.grp{display:flex;align-items:center;gap:10px}
.grp::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--tone,var(--violet))}
.plan.popular .badge{background:linear-gradient(135deg,var(--violet),#ec4899)}
.plan .pp{background:linear-gradient(135deg,var(--ink),var(--petrol));-webkit-background-clip:text;background-clip:text;color:transparent}
.plan.popular .pp{background:linear-gradient(135deg,var(--violet),#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}
.tour{background:linear-gradient(160deg,var(--ink) 0%,var(--petrol) 70%,#143f55 100%);color:#fff}
.tour .eyebrow{color:var(--gold)}
.tour h2{color:#fff}
.tour p{color:#A9C0CB}
.tour .vid{max-width:920px;margin:30px auto 0;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);background:#000}
.tour .vid .bar{background:#141f29;border-bottom:1px solid rgba(255,255,255,.08)}
.tour .vid .bar .u{color:#8aa0b2}
.tour video{display:block;width:100%;height:auto;background:#000}
.final{background:linear-gradient(135deg,var(--violet) 0%,#7c4dff 45%,#ec4899 100%);color:#fff;text-align:center}
.final h2{color:#fff;max-width:20ch;margin:12px auto 14px}
.final p{color:rgba(255,255,255,.85);max-width:50ch;margin:0 auto 26px}
.final .eyebrow{color:#ffe08a}
.btn-white{background:#fff;color:var(--violet)}
.btn-white:hover{background:#f3f0ff}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.deep{background:linear-gradient(160deg,var(--ink),var(--petrol))}
.trust span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.trust span:nth-child(1)::before{background:var(--green)} .trust span:nth-child(2)::before{background:var(--blue)} .trust span:nth-child(3)::before{background:var(--orange)} .trust span:nth-child(4)::before{background:#ec4899} .trust span:nth-child(5)::before{background:var(--teal)}
.mock .it i{background:var(--c,var(--violet))}
.pill.on{border-color:rgba(109,94,252,.3);background:linear-gradient(135deg,rgba(109,94,252,.12),rgba(236,72,153,.08));color:#4c3fd4}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* ===== fase 1d: alignment fixes ===== */
.head.center,.center .head{margin-left:auto;margin-right:auto;text-align:center}
.trust{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;max-width:1100px;margin:0 auto}
.trust span{display:flex;align-items:center;justify-content:center;text-align:center;padding:14px 12px;border-radius:14px;font-size:13.5px;line-height:1.35}
.trust span::before{flex:0 0 auto}
@media(max-width:1000px){.trust{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.trust{grid-template-columns:1fr 1fr}}
.allind{text-align:center}
.allind .lbl{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.allind .list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1000px;margin:0 auto}
.allind .list a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:500}
.allind .list a:hover{border-color:var(--violet);color:var(--violet)}
#demo .wrap{align-items:center}
#demo .grid{grid-template-columns:1.4fr .6fr}
@media(max-width:900px){#demo .grid{grid-template-columns:1fr}#demo div[style*="text-align:right"]{text-align:left!important}}
.head.center{max-width:840px}
.trust span{gap:8px}
.trust span::before{margin-right:0}

/* ===== fase 1e: mobile header ===== */
.m-extra{display:none}
@media(max-width:900px){
  .nav-in{gap:6px;padding:0 14px;height:60px}
  .brand{font-size:17px;gap:8px}
  .menu-btn{order:5;margin-left:4px;padding:7px 10px;font-size:13px}
  .nav-right{margin-left:auto;gap:8px}
  .nav-right .nav-login{display:none}
  .nav-right .btn{font-size:13px;padding:9px 12px}
  nav.bf.open .nav-links{top:60px;font-size:16px}
  .m-extra{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
  .m-extra .nav-login{display:inline-block;font-size:15px}
  .m-extra .langs{display:inline-flex;font-size:13px;gap:12px;padding:7px 12px}
}
@media(max-width:380px){.nav-right .btn{padding:8px 10px;font-size:12.5px}.brand span.dot{display:none}}