/* ShopFloPro · Modern SaaS direction — shared styles */
:root {
  --bg:#fbfbfd; --surface:#fff; --surface-2:#f4f5f8;
  --ink:#0a0d14; --ink-2:#1f2433; --slate:#5b6478; --slate-2:#8a93a8;
  --line:#e5e7ee; --line-2:#eef0f4;
  --blue:#2456ff; --blue-2:#1d44d6; --blue-soft:#eef2ff;
  --navy:#0e1a3a;
  --green:#0bb780;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
html[data-theme="dark"]{
  --bg:#0a0d14; --surface:#10141d; --surface-2:#171c27;
  --ink:#f4f5f8; --ink-2:#d3d8e3; --slate:#9098a8; --slate-2:#6b7384;
  --line:#222836; --line-2:#1b2030;
  --blue-soft:rgba(36,86,255,0.14);
  --navy:#1a2a52;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] header.nav{background:rgba(10,13,20,.85)}
html[data-theme="dark"] .btn-primary{background:#fff;color:#0a0d14}
html[data-theme="dark"] .btn-primary:hover{background:#e5e7ee}
html[data-theme="dark"] .btn-line:hover{background:var(--surface-2)}
html[data-theme="dark"] .pill{background:var(--surface)}
html[data-theme="dark"] footer{background:var(--surface)}
html[data-theme="dark"] .cta{background:linear-gradient(180deg,var(--bg) 0%,#0e1a3a 100%)}
html[data-theme="dark"] .testimonial{background:#000}
html[data-theme="dark"] .seg input:checked + label,
html[data-theme="dark"] .pb-card,
html[data-theme="dark"] .iph-item,
html[data-theme="dark"] .meta-card,
html[data-theme="dark"] .ch{background:var(--surface)}
html[data-theme="dark"] .meta-card .lbl,
html[data-theme="dark"] .ch-meta{color:var(--slate-2)}
html[data-theme="dark"] table.pipeline th,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .flow-step,
html[data-theme="dark"] .flow-table,
html[data-theme="dark"] .iph-item,
html[data-theme="dark"] .pb-col{background:var(--surface-2)}
html[data-theme="dark"] table.pipeline tr.active td{background:rgba(36,86,255,.18)}
html[data-theme="dark"] .dash-side,
html[data-theme="dark"] .dash-right,
html[data-theme="dark"] .dash-bar{background:var(--surface-2)}
html[data-theme="dark"] .iphone{background:#000;border-color:var(--line)}
html[data-theme="dark"] .iph-bar{color:var(--ink)}
html[data-theme="dark"] .subnav{background:rgba(10,13,20,.9)}
html[data-theme="dark"] .cmp tr.group td{background:#11161f}
html[data-theme="dark"] .mig-step.done{background:rgba(11,183,128,.12);border-color:rgba(11,183,128,.4)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;font-feature-settings:"ss01","ss02"}
a{color:inherit;text-decoration:none}

/* Nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(251,251,253,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand-mark{width:26px;height:26px;background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;border-radius:7px}
nav.primary{display:flex;gap:4px;font-size:14px;font-weight:500}
nav.primary a{padding:8px 12px;color:var(--slate);border-radius:7px;transition:all .12s}
nav.primary a:hover{color:var(--ink);background:var(--surface-2)}
nav.primary a.active{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center}

.btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:500;font-size:14px;padding:9px 16px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;transition:all .15s ease;border-radius:8px;letter-spacing:-.005em;white-space:nowrap}
.btn-line{border-color:var(--line)}
.btn-line:hover{border-color:var(--ink-2);background:var(--surface)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--ink-2)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2)}
.btn-large{padding:13px 22px;font-size:15px}
.btn-arrow::after{content:"→";opacity:.7;transition:transform .15s}
.btn-arrow:hover::after{transform:translateX(2px)}

/* Page header */
.pgh{padding:96px 28px 64px;text-align:center;position:relative;overflow:hidden}
.pgh::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(36,86,255,.06),transparent 60%);pointer-events:none}
html[data-theme="dark"] .pgh::before{background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(36,86,255,.18),transparent 60%)}
.pgh-inner{max-width:900px;margin:0 auto;position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);background:var(--surface);border-radius:999px;font-size:13px;color:var(--slate);margin-bottom:24px;font-weight:500}
.pill::before{content:"";width:6px;height:6px;background:var(--green);border-radius:50%}
h1.pgt{font-size:72px;line-height:1.02;letter-spacing:-.04em;font-weight:600;margin:0 0 20px;text-wrap:balance}
h1.pgt .grad{background:linear-gradient(135deg,var(--blue),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] h1.pgt .grad{background:linear-gradient(135deg,var(--blue) 0%,#7da0ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pgs{font-size:19px;line-height:1.55;color:var(--slate);max-width:640px;margin:0 auto;text-wrap:pretty}

/* Sections */
section{padding:96px 28px;border-bottom:1px solid var(--line)}
.sec{max-width:1180px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:64px}
.sec-tag{display:inline-block;font-size:13px;color:var(--blue);font-weight:600;margin-bottom:14px}
h2{font-size:48px;line-height:1.05;letter-spacing:-.035em;font-weight:600;margin:0 0 16px;text-wrap:balance}
.sec-sub{font-size:17px;line-height:1.55;color:var(--slate);max-width:600px;margin:0 auto;text-wrap:pretty}

/* Footer */
footer{padding:64px 28px 32px;background:var(--surface)}
.foot{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:48px;padding-bottom:48px;border-bottom:1px solid var(--line)}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:300px}
.foot-brand p{font-size:13px;color:var(--slate);margin:0;line-height:1.5}
.foot h4{font-size:13px;font-weight:600;color:var(--ink);margin:0 0 14px}
.foot a{display:block;font-size:14px;color:var(--slate);padding:5px 0}
.foot a:hover{color:var(--ink)}
.foot-bottom{max-width:1180px;margin:24px auto 0;display:flex;justify-content:space-between;font-size:12px;color:var(--slate-2)}

/* CTA section */
.cta{padding:120px 28px;background:linear-gradient(180deg,var(--bg) 0%,#eef2ff 100%);text-align:center;border-bottom:1px solid var(--line)}
.cta-inner{max-width:780px;margin:0 auto}
.cta h2{font-size:56px;margin-bottom:18px}
.cta p{font-size:18px;color:var(--slate);margin:0 auto 28px;max-width:540px}
.cta-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Theme toggle (shared) */
.theme-tog{width:32px;height:32px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:14px;transition:all .15s;font-family:inherit}
.theme-tog:hover{border-color:var(--ink-2)}
html[data-theme="dark"] .theme-tog .sun{display:block}
html[data-theme="dark"] .theme-tog .moon{display:none}
.theme-tog .sun{display:none}
.theme-tog .moon{display:block}

/* Mobile */
@media (max-width: 880px){
  .nav-inner{gap:14px;padding:12px 18px}
  nav.primary{display:none}
  .nav-cta{gap:6px}
  .nav-cta .btn{padding:8px 12px;font-size:13px}
  h1.pgt{font-size:44px}
  h2{font-size:32px}
  section{padding:64px 18px}
  .pgh{padding:64px 18px 40px}
  .foot{grid-template-columns:1fr 1fr;gap:32px}
  .cta h2{font-size:36px}
  .cta{padding:72px 18px}
}