/* ============================================================
   BizFlow360 — marketing site (bizflow360.in)
   Static CSS. Brand: Surya Gold + Brand Blue, Fraunces + Inter.
   ============================================================ */

:root {
  --gold:#F59E0B; --gold-deep:#D97706; --amber:#FCD34D;
  --blue:#1D4ED8; --blue-light:#3B82F6;
  --ink:#0F172A; --ink-2:#1E293B; --ink-soft:#5A6675;
  --cream:#FBF7EC; --cream-2:#F5ECD8;
  --white:#FFFFFF;
  --line:rgba(15,23,42,0.10);
  --radius:18px;
  --shadow-sm:0 4px 16px rgba(15,23,42,0.07);
  --shadow:0 18px 44px -18px rgba(15,23,42,0.30);
  --maxw:1180px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body {
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink); background:var(--cream);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img, video, svg { max-width:100%; display:block; }
.serif, h1, h2, h3 { font-family:'Fraunces','Georgia',serif; }
em { font-style:italic; }

.container {
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 28px;
}
.container--narrow { max-width:780px; }

/* ── shared bits ─────────────────────────────────────────── */
.eyebrow, .kicker {
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:11.5px; font-weight:700; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--gold-deep);
}
.kicker--light { color:var(--amber); }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:999px;
  border:1.6px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn--lg { padding:15px 30px; font-size:15.5px; }
.btn--block { display:flex; width:100%; }
.btn--primary {
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#fff; box-shadow:0 10px 22px -8px rgba(217,119,6,0.7);
}
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(217,119,6,0.8); }
.btn--outline { border-color:var(--ink); color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn--outline-light { border-color:rgba(255,255,255,0.6); color:#fff; }
.btn--outline-light:hover { background:#fff; color:var(--ink); }
.btn--ghost { color:var(--ink); }
.btn--ghost:hover { color:var(--gold-deep); }

/* ════════ NAV ════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
  padding:14px 0;
}
.nav.is-stuck {
  background:rgba(251,247,236,0.92);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -16px rgba(15,23,42,0.4);
  padding:8px 0;
}
.nav__inner { display:flex; align-items:center; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); }
.brand__mark { width:38px; height:38px; }
.brand__name { font-family:'Inter',sans-serif; font-weight:800; font-size:20px; letter-spacing:-0.4px; }
.brand__name b { color:var(--gold-deep); }
.brand--light { color:#fff; }
.brand--light .brand__name { color:#fff; }

.nav__links { display:flex; gap:26px; margin-left:auto; }
.nav__links a {
  font-size:14.5px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0;
}
.nav__links a:hover { color:var(--ink); }
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); transition:width .2s ease;
}
.nav__links a:hover::after { width:100%; }
.nav__actions { display:flex; align-items:center; gap:10px; }

.nav__toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:6px;
}
.nav__toggle span {
  width:24px; height:2.4px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform:translateY(7.4px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform:translateY(-7.4px) rotate(-45deg); }

/* ════════ HERO ════════ */
.hero {
  position:relative; overflow:hidden;
  padding:148px 0 90px;
  background:
    radial-gradient(ellipse at 78% 8%, rgba(245,158,11,0.16) 0%, transparent 52%),
    radial-gradient(ellipse at 12% 82%, rgba(29,78,216,0.12) 0%, transparent 50%),
    linear-gradient(180deg,var(--cream) 0%, var(--cream-2) 100%);
}
.hero__glow { position:absolute; border-radius:50%; pointer-events:none; filter:blur(8px); }
.hero__glow--gold { width:520px; height:520px; top:-220px; right:-160px;
  background:radial-gradient(circle,rgba(245,158,11,0.22) 0%,transparent 70%); }
.hero__glow--blue { width:440px; height:440px; bottom:-220px; left:-160px;
  background:radial-gradient(circle,rgba(29,78,216,0.16) 0%,transparent 70%); }
.hero__particles { position:absolute; inset:0; pointer-events:none; }
.hero__particles span {
  position:absolute; border-radius:50%;
  animation:floaty var(--dur,9s) ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform:translateY(0) scale(1); opacity:.5; }
  50% { transform:translateY(-26px) scale(1.3); opacity:1; }
}

.hero__inner {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center;
}
.hero__title {
  font-size:58px; line-height:1.07; font-weight:500;
  letter-spacing:-1px; margin-top:18px;
}
.hero__title em { color:var(--blue); }
.hero__sub {
  margin-top:20px; font-size:17px; color:var(--ink-soft);
  max-width:30em;
}
.hero__cta { margin-top:30px; display:flex; gap:13px; flex-wrap:wrap; }
.hero__trust {
  margin-top:24px; font-size:13px; color:var(--ink-soft); font-weight:500;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hero__trust .dot { width:8px; height:8px; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 4px rgba(34,197,94,0.18); }
.hero__trust .sep { color:var(--line); }

/* hero product mockup */
.hero__visual { position:relative; }
.mock {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line);
  transform:perspective(1400px) rotateY(-11deg) rotateX(4deg);
  transition:transform .5s ease;
}
.hero__visual:hover .mock { transform:perspective(1400px) rotateY(-5deg) rotateX(2deg); }
.mock__bar {
  display:flex; align-items:center; gap:6px;
  padding:11px 14px; background:var(--ink);
}
.mock__bar span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.3); }
.mock__bar span:first-child { background:#F87171; }
.mock__bar span:nth-child(2) { background:#FBBF24; }
.mock__bar span:nth-child(3) { background:#34D399; }
.mock__url {
  margin-left:10px; font-size:10.5px; color:#9AA6B8;
  background:rgba(255,255,255,0.08); border-radius:6px;
  padding:4px 12px; font-family:'Inter',sans-serif;
}
.mock__body { display:flex; min-height:300px; }
.mock__side {
  width:64px; background:linear-gradient(180deg,#0F172A,#1E293B);
  padding:14px 12px; display:flex; flex-direction:column; gap:11px;
}
.mock__logo { width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); }
.mock__navitem { height:9px; border-radius:5px; background:rgba(255,255,255,0.12); }
.mock__navitem.is-active { background:var(--gold); }
.mock__main { flex:1; padding:18px; background:#FBFCFD; display:flex; flex-direction:column; gap:14px; }
.mock__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mock__stat { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; }
.mock__stat .s-label { display:block; height:7px; width:60%; border-radius:4px; background:#E2E8F0; }
.mock__stat .s-value { display:block; height:13px; margin-top:8px; border-radius:5px;
  background:linear-gradient(90deg,var(--gold),var(--amber)); width:var(--w); }
.mock__chart {
  flex:1; display:flex; align-items:flex-end; gap:9px;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px;
  min-height:110px;
}
.mock__chart .bar {
  flex:1; height:var(--h); border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--blue-light),var(--blue));
}
.mock__chart .bar:nth-child(even) { background:linear-gradient(180deg,var(--amber),var(--gold)); }
.mock__rows { display:flex; flex-direction:column; gap:7px; }
.mock__row { height:11px; border-radius:5px; background:#ECEFF3; }
.mock__row:nth-child(2) { width:86%; }
.mock__row:nth-child(3) { width:72%; }

.hero__badge {
  position:absolute; right:-14px; bottom:30px;
  background:#fff; border-radius:14px; padding:14px 18px;
  box-shadow:var(--shadow); border:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
  animation:bob 4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
.hero__badge strong {
  font-family:'Fraunces',serif; font-size:24px; color:var(--blue);
  background:rgba(29,78,216,0.1); border-radius:10px; padding:4px 10px;
}
.hero__badge span { font-size:11px; font-weight:600; color:var(--ink-soft); line-height:1.3; }

/* ════════ STATS ════════ */
.stats { background:var(--ink); color:#fff; padding:46px 0; }
.stats__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat { text-align:center; }
.stat__num {
  font-family:'Fraunces',serif; font-size:46px; font-weight:600;
  color:var(--amber); line-height:1;
}
.stat__small { font-size:24px; }
.stat__label { margin-top:8px; font-size:13px; color:#AEB8C6; font-weight:500; }

/* ════════ SECTIONS ════════ */
.section { padding:92px 0; position:relative; }
.section--tint { background:linear-gradient(180deg,var(--cream-2),var(--cream)); }
.section--dark {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(245,158,11,0.14) 0%, transparent 55%),
    linear-gradient(180deg,var(--ink),var(--ink-2));
  color:#fff;
}
.section__head { max-width:680px; margin:0 auto 52px; text-align:center; }
.section__title {
  font-size:40px; line-height:1.14; font-weight:500;
  letter-spacing:-0.6px; margin-top:12px;
}
.section__title em { color:var(--blue); }
.section--dark .section__title em { color:var(--amber); }
.section__lead { margin-top:16px; font-size:16px; color:var(--ink-soft); }
.section--dark .section__lead { color:#AEB8C6; }

.grid { display:grid; gap:22px; }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }

/* module cards */
.card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.card__ic {
  width:54px; height:54px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card__ic svg { width:28px; height:28px; }
.ic--gold { background:linear-gradient(135deg,rgba(245,158,11,0.16),rgba(252,211,77,0.26)); }
.ic--blue { background:linear-gradient(135deg,rgba(29,78,216,0.13),rgba(59,130,246,0.2)); }
.card h3 { font-size:20px; font-weight:600; }
.card p { margin-top:8px; font-size:14px; color:var(--ink-soft); }

/* feature deep-dive rows */
.feature {
  display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center;
  padding:42px 0;
}
.feature--rev .feature__copy { order:2; }
.feature--rev .feature__media { order:1; }
.feature__title {
  font-size:32px; line-height:1.18; font-weight:500;
  letter-spacing:-0.5px; margin:12px 0 14px;
}
.feature__title em { color:var(--blue); }
.feature__copy p { font-size:15.5px; color:var(--ink-soft); }
.ticks { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.ticks li {
  position:relative; padding-left:30px; font-size:14.5px; font-weight:500;
}
.ticks li::before {
  content:""; position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:6px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
}
.ticks li::after {
  content:""; position:absolute; left:6.5px; top:6px;
  width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* media placeholders (swap for real images/video) */
.feature__media { position:relative; }
.media-ph {
  border-radius:var(--radius); border:2px dashed rgba(29,78,216,0.3);
  background:
    linear-gradient(135deg,rgba(245,158,11,0.07),rgba(29,78,216,0.07));
  min-height:300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; color:var(--ink-soft);
}
.media-ph__icon { font-size:42px; }
.media-ph span { font-size:14px; font-weight:600; color:var(--ink); }
.media-ph em { font-size:11.5px; font-family:'Inter',monospace; opacity:.6; }
.media-ph--video { border-color:rgba(217,119,6,0.4); }
.media-ph .play {
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 12px 26px -8px rgba(217,119,6,0.7);
  position:relative;
}
.media-ph .play::before {
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.feature__video { border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.feature__shot {
  border-radius:var(--radius); box-shadow:var(--shadow);
  width:100%; height:auto; display:block;
  border:1px solid rgba(29,78,216,0.12);
}

/* Faux GST invoice — stands in for a screenshot (real invoices carry
   private business data, so this is a styled mock with sample figures). */
.invoice-mock {
  background:#fff; border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow);
  padding:24px; font-size:13px;
}
.invoice-mock__head {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:15px; border-bottom:1px solid var(--line);
}
.invoice-mock__brand { display:flex; align-items:center; gap:10px; }
.invoice-mock__logo {
  width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
}
.invoice-mock__co { font-weight:700; color:var(--ink); font-size:15px; }
.invoice-mock__tag {
  font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--blue); background:rgba(29,78,216,0.09);
  padding:6px 11px; border-radius:7px;
}
.invoice-mock__meta { display:flex; gap:34px; padding:15px 0 4px; }
.invoice-mock__meta .lbl {
  display:block; font-size:10px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-soft); margin-bottom:2px;
}
.invoice-mock__meta .val { font-weight:600; color:var(--ink); }
.invoice-mock__table {
  margin-top:12px; border:1px solid var(--line);
  border-radius:11px; overflow:hidden;
}
.invoice-mock__row {
  display:grid; grid-template-columns:1fr 54px 94px; gap:10px;
  align-items:center; padding:12px 14px;
}
.invoice-mock__row + .invoice-mock__row { border-top:1px solid var(--line); }
.invoice-mock__row--head {
  background:var(--ink); color:#fff; font-size:10px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600;
}
.invoice-mock__row span:last-child { text-align:right; font-weight:600; color:var(--ink); }
.invoice-mock__row--head span:last-child { color:#fff; }
.invoice-mock__bar { height:9px; border-radius:5px; background:rgba(15,23,42,0.12); }
.invoice-mock__bar--lg { width:78%; }
.invoice-mock__bar--md { width:56%; }
.invoice-mock__totals { margin:16px 0 0 auto; width:64%; }
.invoice-mock__totals .trow {
  display:flex; justify-content:space-between; padding:6px 0;
  color:var(--ink-soft);
}
.invoice-mock__totals .trow span:last-child { color:var(--ink); font-weight:600; }
.invoice-mock__totals .trow--grand {
  margin-top:6px; padding-top:11px; border-top:2px solid var(--ink);
  font-size:15.5px;
}
.invoice-mock__totals .trow--grand span { color:var(--ink); font-weight:700; }

/* why-us reasons */
.reasons { margin-top:8px; }
.reason {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); padding:26px 24px;
  transition:transform .2s ease, background .2s ease;
}
.reason:hover { transform:translateY(-5px); background:rgba(255,255,255,0.08); }
.reason__num {
  font-family:'Fraunces',serif; font-size:30px; font-weight:600;
  color:var(--amber); opacity:.85;
}
.reason h3 { font-size:20px; font-weight:600; margin:6px 0 8px; }
.reason p { font-size:14px; color:#AEB8C6; }

/* how-it-works steps */
.steps { counter-reset:step; }
.step {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; text-align:center; box-shadow:var(--shadow-sm);
}
.step__num {
  width:48px; height:48px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  box-shadow:0 10px 22px -8px rgba(29,78,216,0.6);
}
.step h3 { font-size:19px; font-weight:600; }
.step p { margin-top:8px; font-size:14px; color:var(--ink-soft); }

/* pricing */
.pricing { align-items:stretch; }
.plan {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.plan--featured {
  border-color:var(--gold); box-shadow:0 22px 50px -22px rgba(217,119,6,0.5);
}
.plan__tag {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.plan__name { font-size:22px; font-weight:600; }
.plan__price {
  font-family:'Fraunces',serif; font-size:42px; font-weight:600;
  margin-top:6px; letter-spacing:-1px;
}
.plan__price span { font-family:'Inter',sans-serif; font-size:15px; font-weight:600; color:var(--ink-soft); }
.plan__for { font-size:13px; color:var(--ink-soft); margin:4px 0 18px; }
.plan .ticks { margin-bottom:24px; }
.plan .ticks li { font-size:13.5px; font-weight:500; }
.plan .btn { margin-top:auto; }
.pricing__note { text-align:center; margin-top:30px; font-size:14px; color:var(--ink-soft); }
.pricing__note a { color:var(--blue); font-weight:600; }

/* faq */
.faq { display:flex; flex-direction:column; gap:12px; }
.faq__item {
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:4px 22px; box-shadow:var(--shadow-sm);
}
.faq__item summary {
  list-style:none; cursor:pointer; padding:18px 0;
  font-family:'Fraunces',serif; font-size:18px; font-weight:500;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq__item summary::-webkit-details-marker { display:none; }
.faq__item summary::after {
  content:"+"; font-family:'Inter',sans-serif; font-size:24px; font-weight:400;
  color:var(--gold-deep); transition:transform .2s ease; flex:none;
}
.faq__item[open] summary::after { transform:rotate(45deg); }
.faq__item p { padding:0 0 20px; font-size:14.5px; color:var(--ink-soft); }

/* final CTA band */
.cta-band {
  position:relative; overflow:hidden; text-align:center;
  padding:84px 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(29,78,216,0.2) 0%, transparent 60%),
    linear-gradient(180deg,var(--ink-2),var(--ink));
  color:#fff;
}
.cta-band__inner { position:relative; z-index:2; max-width:680px; }
.cta-band h2 {
  font-size:38px; line-height:1.16; font-weight:500; letter-spacing:-0.6px;
}
.cta-band h2 em { color:var(--amber); }
.cta-band p { margin-top:14px; font-size:16px; color:#AEB8C6; }
.cta-band__actions { margin-top:28px; display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }
.cta-band__contact { margin-top:22px; font-size:13px; color:#8B97A8; }

/* footer */
.footer { background:var(--ink); color:#fff; padding:56px 0 26px; }
.footer__inner {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px;
}
.footer__brand p { margin-top:14px; font-size:13.5px; color:#8B97A8; max-width:30ch; }
.footer__col h4 {
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}
.footer__col a {
  display:block; font-size:13.5px; color:#AEB8C6; padding:5px 0;
  transition:color .15s ease;
}
.footer__col a:hover { color:#fff; }
.footer__base {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1);
  font-size:12.5px; color:#8B97A8;
}

/* ════════ Sister product — "Also from Labhyansh" ════════
   Quiet cross-promo for MISxL (misxl.com). Reuses BizFlow360's own
   section / card / kicker primitives so it never out-shouts the pitch
   above it. The ONLY MISxL-palette colours used here live inside the
   .sister__wordmark — everything else stays on the BizFlow360 palette. */
.sister { padding:64px 0; }
.sister__head { max-width:680px; margin:0 auto 26px; text-align:center; }
.sister__sub { margin-top:10px; font-size:15px; color:var(--ink-soft); }
.sister__card {
  display:block; max-width:600px; margin:0 auto; text-align:left;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sister__card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.sister__card:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
/* MISxL wordmark — MISxL brand palette, scoped to this element only */
.sister__wordmark {
  font-family:'Fraunces','Georgia',serif; font-size:30px; font-weight:600;
  letter-spacing:-0.4px; line-height:1;
}
.sister__wordmark .mis { color:#1A237E; }            /* MISxL Deep Blue  */
.sister__wordmark .xl  { color:#EF9F27; font-style:italic; }  /* MISxL Solar Gold */
.sister__tagline { margin-top:13px; font-size:14.5px; color:var(--ink-soft); }
.sister__audience { margin-top:11px; font-size:13px; font-weight:600; color:var(--ink); }
.sister__link {
  margin-top:16px; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--blue);
}
.sister__link span { transition:transform .2s ease; }
.sister__card:hover .sister__link span { transform:translateX(3px); }

@media (max-width:680px) {
  .sister { padding:48px 0; }
  .sister__card { padding:24px 22px; }
}

/* ════════ SCROLL REVEAL ════════ */
.reveal {
  opacity:0; transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),
             transform .65s cubic-bezier(.22,.61,.36,1);
}
.reveal[data-delay="1"] { transition-delay:.09s; }
.reveal[data-delay="2"] { transition-delay:.18s; }
.reveal[data-delay="3"] { transition-delay:.27s; }
.reveal[data-delay="4"] { transition-delay:.36s; }
.reveal.is-visible { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero__particles span, .hero__badge { animation:none; }
  html { scroll-behavior:auto; }
}

/* ════════ RESPONSIVE ════════ */
@media (max-width:960px) {
  .hero__inner { grid-template-columns:1fr; gap:46px; }
  .hero__title { font-size:46px; }
  .hero__visual { max-width:520px; }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .feature, .feature--rev .feature__copy, .feature--rev .feature__media {
    grid-template-columns:1fr; order:initial;
  }
  .feature { grid-template-columns:1fr; gap:26px; }
  .footer__inner { grid-template-columns:1fr 1fr; }
}

@media (max-width:680px) {
  .container { padding:0 20px; }
  .nav__links {
    position:fixed; inset:64px 0 auto 0;
    background:rgba(251,247,236,0.98); backdrop-filter:blur(12px);
    flex-direction:column; gap:0; padding:14px 24px 22px;
    box-shadow:0 18px 30px -16px rgba(15,23,42,0.4);
    transform:translateY(-130%); transition:transform .3s ease;
  }
  .nav.is-open .nav__links { transform:translateY(0); }
  .nav__links a { padding:13px 0; border-bottom:1px solid var(--line); font-size:16px; }
  .nav__actions { margin-left:auto; }
  .nav__actions .btn--ghost { display:none; }
  .nav__toggle { display:flex; }
  .hero { padding:120px 0 70px; }
  .hero__title { font-size:36px; }
  .hero__sub { font-size:15.5px; }
  .stats__grid { grid-template-columns:repeat(2,1fr); gap:30px 16px; }
  .stat__num { font-size:38px; }
  .section { padding:64px 0; }
  .section__title, .cta-band h2 { font-size:30px; }
  .feature__title { font-size:26px; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr; gap:26px; }
  .hero__badge { right:8px; bottom:-18px; }
}

/* ════════════════════ Interactive quirks ════════════════════ */

/* Scroll progress bar */
.scroll-prog {
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--blue));
  z-index:1000; transition:width .12s linear;
  box-shadow:0 0 10px rgba(245,158,11,0.5);
}

/* ---- Module cards: click to flip ---- */
.card--flip {
  background:transparent; border:0; padding:0; box-shadow:none;
  perspective:1500px; cursor:pointer; display:flex;
}
.card--flip:hover { transform:none; box-shadow:none; }
.card--flip:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--radius); }
.card__inner {
  position:relative; flex:1 1 auto; min-height:256px;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card--flip:hover .card__inner { transform:translateY(-6px); }
.card--flip.is-flipped .card__inner { transform:rotateY(180deg); }
.card--flip.is-flipped:hover .card__inner { transform:rotateY(180deg) translateY(-6px); }
.card__face {
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease;
}
.card--flip:hover .card__face { box-shadow:var(--shadow); }
.card__face--back {
  transform:rotateY(180deg);
  background:linear-gradient(160deg,#FFFFFF,#F3F5FF);
}
.card__face--back h3 { font-size:18px; }
.card__list {
  margin-top:13px; list-style:none;
  display:flex; flex-direction:column; gap:10px;
}
.card__list li {
  font-size:13.5px; color:var(--ink-soft); line-height:1.4;
  padding-left:19px; position:relative;
}
.card__list li::before {
  content:""; position:absolute; left:0; top:6px;
  width:8px; height:8px; border-radius:3px;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
}
.card__flip-hint {
  margin-top:auto; padding-top:14px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-deep); opacity:.55;
  transition:opacity .2s ease;
}
.card--flip:hover .card__flip-hint { opacity:1; }

/* ---- Cursor spotlight on the dark "why" cards ---- */
.reason { position:relative; overflow:hidden; }
.reason::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(245,158,11,0.20), transparent 62%);
  opacity:0; transition:opacity .3s ease;
}
.reason:hover::after { opacity:1; }
.reason > * { position:relative; z-index:1; }

/* ---- Click-to-copy contact chips ---- */
.copyable {
  background:none; border:0; cursor:pointer; font:inherit; color:inherit;
  padding:3px 7px; border-radius:7px;
  transition:background .15s ease, color .15s ease;
}
.copyable:hover { background:rgba(255,255,255,0.14); }
.copyable.is-copied { background:rgba(52,211,153,0.22); color:#34D399; }
.cta-band__sep { opacity:.4; margin:0 2px; }

/* ---- Logo spin easter-egg ---- */
/* transform-box + origin are required so an inline SVG rotates around
   its own centre instead of the document origin. */
.brand__mark {
  transition:transform .2s ease; cursor:pointer;
  transform-box:fill-box; transform-origin:center;
}
.brand__mark.is-spin { animation:brandSpin .9s cubic-bezier(.34,1.36,.5,1); }
@keyframes brandSpin { from { transform:rotate(0); } to { transform:rotate(360deg); } }

/* ---- Confetti burst (Konami code · 7× logo click) ---- */
.confetti-layer { position:fixed; inset:0; pointer-events:none; z-index:2000; overflow:hidden; }
.confetti-bit {
  position:absolute; top:-18px; width:9px; height:15px; border-radius:2px;
  animation:confettiFall var(--d,3s) cubic-bezier(.25,.6,.5,1) forwards;
}
@keyframes confettiFall {
  0%   { transform:translate(0,0) rotate(0); opacity:1; }
  100% { transform:translate(var(--x,0),106vh) rotate(var(--r,400deg)); opacity:.15; }
}

@media (prefers-reduced-motion: reduce) {
  .card__inner { transition:none; }
  .scroll-prog { transition:none; }
  .brand__mark.is-spin { animation:none; }
  .reason::after { display:none; }
}

/* ════════════════════ More interactions ════════════════════ */

/* Active nav link (scrollspy) */
.nav__links a.is-active { color:var(--ink); }
.nav__links a.is-active::after { width:100%; }

/* Back-to-top button */
.to-top {
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow:0 10px 24px -8px rgba(217,119,6,0.7);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(14px) scale(.85); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.to-top.is-shown { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.to-top:hover { transform:translateY(-3px) scale(1.06); }

/* Lightbox for feature screenshots */
.lightbox {
  position:fixed; inset:0; z-index:1500;
  background:rgba(15,23,42,0.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:5vh 5vw;
  opacity:0; pointer-events:none; transition:opacity .25s ease; cursor:zoom-out;
}
.lightbox.is-open { opacity:1; pointer-events:auto; }
.lightbox img {
  max-width:92vw; max-height:88vh; width:auto; height:auto;
  border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7);
  transform:scale(.94); transition:transform .25s ease;
}
.lightbox.is-open img { transform:scale(1); }

/* Hero chart bars grow in */
.mock__chart .bar { animation:growBar 1s cubic-bezier(.2,.7,.2,1) both; }
.mock__chart .bar:nth-child(1) { animation-delay:.15s; }
.mock__chart .bar:nth-child(2) { animation-delay:.21s; }
.mock__chart .bar:nth-child(3) { animation-delay:.27s; }
.mock__chart .bar:nth-child(4) { animation-delay:.33s; }
.mock__chart .bar:nth-child(5) { animation-delay:.39s; }
.mock__chart .bar:nth-child(6) { animation-delay:.45s; }
.mock__chart .bar:nth-child(7) { animation-delay:.51s; }
@keyframes growBar { from { height:0; } to { height:var(--h); } }

@media (prefers-reduced-motion: reduce) {
  .lightbox img { transition:none; }
  .mock__chart .bar { animation:none; }
}

/* ════════ DEMO REQUEST MODAL ════════ */
.modal {
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.modal.is-open { display:flex; }
body.modal-open { overflow:hidden; }
.modal__overlay {
  position:absolute; inset:0;
  background:rgba(15,23,42,0.62); backdrop-filter:blur(3px);
  animation:modalFade .2s ease;
}
@keyframes modalFade { from { opacity:0; } to { opacity:1; } }
.modal__panel {
  position:relative; z-index:1;
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  background:var(--cream); border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(15,23,42,0.55);
  padding:34px 34px 28px;
  animation:modalPop .26s cubic-bezier(.22,.61,.36,1);
}
@keyframes modalPop {
  from { opacity:0; transform:translateY(20px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.modal__close {
  position:absolute; top:14px; right:16px;
  width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(15,23,42,0.06); color:var(--ink-soft);
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.modal__close:hover { background:rgba(15,23,42,0.12); color:var(--ink); }
.modal__head { margin-bottom:20px; }
.modal__title {
  font-size:27px; line-height:1.18; font-weight:500; margin-top:8px;
}
.modal__title em { color:var(--blue); }
.modal__lead { margin-top:9px; font-size:13.5px; color:var(--ink-soft); }

.demo-form { display:flex; flex-direction:column; gap:14px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12.5px; font-weight:600; color:var(--ink); }
.field label span { color:#DC2626; }
.field input, .field textarea {
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder, .field textarea::placeholder { color:#A8B0BD; }
.field input:focus, .field textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(245,158,11,0.16);
}
.field textarea { resize:vertical; min-height:62px; }
.field input.is-invalid, .field textarea.is-invalid { border-color:#DC2626; }

/* honeypot — pulled off-screen (not display:none, which bots skip) */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.demo-form__msg {
  display:none; font-size:13px; font-weight:500;
  border-radius:9px; padding:9px 12px;
}
.demo-form__msg.is-error {
  display:block; background:rgba(220,38,38,0.08);
  color:#B91C1C; border:1px solid rgba(220,38,38,0.25);
}
.demo-form__fine {
  font-size:11px; color:var(--ink-soft); text-align:center; margin-top:2px;
}
#demoSubmit[disabled] { opacity:.6; cursor:progress; }

.demo-form__done { text-align:center; padding:14px 6px 6px; }
.demo-form__check {
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:#fff;
  background:linear-gradient(135deg,#10B981,#059669);
  box-shadow:0 12px 26px -8px rgba(16,185,129,0.6);
}
.demo-form__done h3 { font-size:22px; font-weight:600; }
.demo-form__done p { margin:8px 0 18px; font-size:14px; color:var(--ink-soft); }

@media (max-width:560px) {
  .modal__panel { padding:28px 22px 22px; }
  .field-row { grid-template-columns:1fr; }
  .modal__title { font-size:23px; }
}

/* ════════ Long-form legal / policy text (privacy, terms, etc.) ════════ */
.legal { font-size:15px; color:var(--ink); }
.legal h2 {
  font-family:'Fraunces','Georgia',serif;
  font-size:22px; font-weight:600;
  margin:34px 0 10px; color:var(--ink);
}
.legal p { margin:0 0 14px; line-height:1.72; color:#334155; }
.legal ul { margin:0 0 16px 22px; }
.legal ul li {
  margin:0 0 8px; line-height:1.65; color:#334155; padding-left:6px;
}
.legal a { color:var(--blue); font-weight:500; }
.legal a:hover { text-decoration:underline; }
.legal code {
  font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; background:#F1F5F9;
  padding:2px 6px; border-radius:5px; color:#0F172A;
}
.legal strong { color:var(--ink); font-weight:600; }

/* ════════ Pricing page ════════ */
.pricing-hero { padding-bottom:30px; }
.pricing-hero .container { text-align:center; }
.pricing-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
  margin-top:30px;
}
.pricing-grid .plan {
  padding:24px 20px; display:flex; flex-direction:column;
}
.pricing-grid .plan h3 { font-size:20px; font-weight:600; }
.pricing-grid .plan__price { font-size:32px; margin-top:4px; }
.pricing-grid .plan .ticks li { font-size:13px; padding-left:26px; }
.pricing-grid .plan .ticks li::before { width:17px; height:17px; }
.pricing-grid .plan .ticks li::after { left:5.5px; top:5px; }
.plan-limits {
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);
  display:grid; grid-template-columns:auto auto; gap:6px 12px;
  font-size:11.5px;
}
.plan-limits dt { color:var(--ink-soft); }
.plan-limits dd {
  font-weight:700; font-family:'JetBrains Mono', ui-monospace, monospace;
  color:var(--ink); text-align:right;
}
.compare-table {
  width:100%; border-collapse:collapse; margin-top:24px; font-size:13.5px;
}
.compare-table th, .compare-table td {
  padding:12px 10px; border-bottom:1px solid var(--line); text-align:center;
}
.compare-table th { font-weight:700; background:#FAF8F0; }
.compare-table th:first-child, .compare-table td:first-child {
  text-align:left; font-weight:500;
}
.compare-table td.no { color:#CBD5E1; }
.compare-table td.yes { color:#10B981; font-weight:700; }

@media (max-width:1080px) {
  .pricing-grid { grid-template-columns:repeat(3,1fr); }
  .compare-table { font-size:12.5px; }
  .compare-table th, .compare-table td { padding:10px 6px; }
}
@media (max-width:720px) {
  .pricing-grid { grid-template-columns:1fr; }
  .compare-table { display:block; overflow-x:auto; white-space:nowrap; }
}