:root{
  --brand:#10b981;
  --brand-dark:#059669;
  --brand-soft:#ecfdf5;
  --ink:#0b1220;
  --muted:#6b7280;
  --soft:#f8fafc;
}
*{font-family:'Inter',system-ui,sans-serif}
body{color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{letter-spacing:-.02em;font-weight:700}
a{color:var(--brand-dark);text-decoration:none}
a:hover{color:var(--brand)}
.text-brand{color:var(--brand)!important}
.bg-light-soft{background:var(--soft)}
.py-6{padding-top:5.5rem;padding-bottom:5.5rem}

/* nav */
.cb-nav{transition:all .25s ease;background:transparent}
.cb-nav.scrolled{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 rgba(15,23,42,.06)}
.cb-nav .nav-link{color:#374151;font-weight:500}
.cb-nav .nav-link:hover{color:var(--ink)}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#10b981,#0ea5a4);color:#fff;box-shadow:0 8px 24px -8px rgba(16,185,129,.6)}

/* buttons */
.btn-brand{background:linear-gradient(135deg,#10b981,#0ea5a4);border:0;color:#fff;font-weight:600;border-radius:.7rem;padding:.55rem 1.1rem;box-shadow:0 10px 24px -10px rgba(16,185,129,.55)}
.btn-brand:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.05)}
.btn-lg{padding:.85rem 1.4rem;border-radius:.85rem}

/* badge */
.badge-soft{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);font-weight:600;padding:.35rem .8rem;border-radius:999px;font-size:.8rem}

/* hero */
/* overflow-x:hidden on the SECTION, not on body.
   The hero row uses Bootstrap's g-5 gutter, which applies a -24px margin on
   each side. The container's 12px padding only cancels half of it, so the row
   ran 12px past the viewport on a 390px screen — the classic sideways-scroll
   bug on a phone.
   Clipping here rather than on body, because body-level overflow-x:hidden
   breaks position:sticky elsewhere on the page. */
.hero{overflow-x:hidden;padding:9rem 0 5rem;background:radial-gradient(1200px 600px at 80% -10%,#d1fae5 0%,transparent 60%),linear-gradient(180deg,#fff,#f8fafc)}
.phone-wrap{position:relative;display:inline-block}
.phone-img{max-width:380px;width:100%;border-radius:36px;box-shadow:0 30px 80px -30px rgba(2,6,23,.35);border:8px solid #0b1220}
.float-card{animation:float 4.5s ease-in-out infinite;position:absolute;background:#fff;border-radius:14px;padding:.6rem .9rem;box-shadow:0 14px 40px -14px rgba(2,6,23,.25);font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
/* Moved up from 18%: at 18% it sat directly over the takings figure in the
   phone mockup, hiding the one number the hero exists to show. */
.card-a{top:20%;left:-125px}
.card-b{bottom:20%;right:-115px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* stats */
.stat-num{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#10b981,#0ea5a4);-webkit-background-clip:text;background-clip:text;color:transparent}

/* feature card */
.feature-card{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:1.4rem;height:100%;transition:all .25s}
.feature-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(2,6,23,.18);border-color:#d1fae5}
.feat-ico{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-dark);display:grid;place-items:center;font-size:1.2rem;margin-bottom:.9rem}

/* step */
.step-card{background:#fff;border-radius:18px;padding:1.6rem;height:100%;border:1px solid #eef2f7}
.step-num{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#10b981,#0ea5a4);color:#fff;font-weight:700;display:grid;place-items:center;margin-bottom:.9rem}

/* industries */
/* Industry cards.
   These used to be dark with a title only. Now they carry a sentence of body
   copy explaining what the trade actually gets, and Bootstrap's .text-muted
   (a mid grey) is invisible on a near-black gradient — the descriptions were
   rendering as dark grey on dark navy.
   Light cards with a coloured accent instead: readable, and it stops nine
   heavy blocks dominating the middle of the page. */
.industry-card{border-radius:18px;padding:1.5rem;height:100%;background:#fff;
  border:1px solid #eef2f7;transition:transform .2s,box-shadow .2s}
.industry-card:hover{transform:translateY(-4px);
  box-shadow:0 24px 50px -30px rgba(16,185,129,.45);border-color:#d1fae5}
.industry-card i{font-size:1.7rem;color:var(--brand);
  background:var(--brand-soft);width:52px;height:52px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center}
.industry-card h5{margin-top:.9rem;margin-bottom:.4rem}
/* Override .text-muted inside the card so the copy is legibly dark. */
.industry-card p{color:#4b5563!important}

/* pricing */
.price-toggle{margin-top:1rem}
/* position:relative on the BASE card, not only on .featured — the
   "Most chosen" tag is absolutely positioned and needs an anchor. */
.price-card{position:relative;background:#fff;border:1px solid #eef2f7;border-radius:22px;padding:1.8rem;height:100%;transition:all .2s}
.price-card.featured{border-color:transparent;background:linear-gradient(180deg,#fff,#ecfdf5);box-shadow:0 30px 70px -30px rgba(16,185,129,.4);transform:translateY(-6px);position:relative}
.price-card .price{font-size:2.6rem;font-weight:800}
.price-card ul{list-style:none;padding:0;margin:1rem 0}
.price-card ul li{padding:.35rem 0;color:#374151}
.price-card ul li i{color:var(--brand);margin-right:.4rem}
.popular-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#0b1220;color:#fff;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600}

/* testi */
.testi-card{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:1.4rem;height:100%}
.testi-card .stars{color:#f59e0b}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#10b981,#0ea5a4);color:#fff;display:grid;place-items:center;font-weight:700}

/* faq */
.accordion-button:not(.collapsed){background:transparent;color:var(--ink);box-shadow:none}
.accordion-button:focus{box-shadow:none}

/* cta */
.cta-card{background:linear-gradient(135deg,#10b981,#0ea5a4);box-shadow:0 40px 100px -40px rgba(16,185,129,.6)}

/* footer */
.footer{background:#0b1220;color:#fff}
.footer a{color:rgba(255,255,255,.7)}
.footer a:hover{color:#fff}

/* reveal anim */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* auth */
.auth-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(800px 400px at 20% 0%,#d1fae5,transparent 60%),#f8fafc;padding:2rem 1rem}
.auth-card{background:#fff;border-radius:22px;padding:2rem;width:100%;max-width:440px;box-shadow:0 30px 80px -30px rgba(2,6,23,.2)}