:root {
    --navy-950: #031226;
    --navy-900: #061a33;
    --navy-800: #0a284b;
    --blue-700: #174f8f;
    --blue-500: #2f7fe6;
    --blue-100: #dcecff;
    --gold-500: #f4b942;
    --gold-400: #ffc95d;
    --gold-100: #fff2cf;
    --green-600: #14945f;
    --green-100: #dcf8e9;
    --red-600: #d95050;
    --red-100: #ffe3e3;
    --violet-600: #7557db;
    --violet-100: #eee9ff;
    --slate-900: #111b2f;
    --slate-700: #3d4b63;
    --slate-500: #6b7890;
    --slate-300: #ccd4df;
    --slate-100: #f1f5f9;
    --white: #ffffff;
    --shadow-sm: 0 12px 30px rgba(12, 31, 61, .08);
    --shadow-md: 0 22px 55px rgba(5, 24, 49, .14);
    --shadow-lg: 0 35px 90px rgba(2, 14, 32, .3);
    --radius-lg: 28px;
    --radius-md: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--slate-900); background: #f6f8fc; line-height: 1.6; }
a { text-decoration: none; }
button, input, select { font: inherit; }

.database-alert { position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 1090; display: flex; gap: 10px; align-items: center; padding: 13px 18px; border: 1px solid #f8bf79; border-radius: 16px; background: #fff7ea; color: #8c4d12; font-weight: 700; box-shadow: var(--shadow-md); }

.premium-nav { min-height: 82px; padding: 12px 0; background: rgba(3, 18, 38, .9); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px); transition: .25s ease; }
.premium-nav.scrolled { min-height: 70px; background: rgba(3,18,38,.98); box-shadow: 0 14px 36px rgba(2,12,28,.24); }
.navbar-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; }
.brand-mark { width: 44px; height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--navy-950); background: linear-gradient(135deg, var(--gold-400), #ffe6a7); box-shadow: 0 8px 24px rgba(244,185,66,.28); }
.brand-mark i { font-size: 22px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
.brand-copy small { margin-top: 5px; color: #f5c866; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.public-menu { gap: 10px; }
.public-menu .nav-link { color: #c9d5e7; font-size: 14px; font-weight: 700; padding-inline: 12px !important; }
.public-menu .nav-link:hover { color: #fff; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-actions .btn, .payment-nav .btn { border-radius: 11px; padding: 9px 13px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.btn-nav-outline { color: #fff; border: 1px solid rgba(255,255,255,.4); background: transparent; }
.btn-nav-outline:hover { color: var(--navy-950); background: #fff; }
.btn-nav-soft { color: #fff; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.11); }
.btn-nav-soft:hover { color: #fff; background: rgba(255,255,255,.2); }
.btn-nav-gold { color: var(--navy-950); background: linear-gradient(135deg, var(--gold-400), #ffe19a); border: 0; }
.btn-nav-gold:hover { color: var(--navy-950); transform: translateY(-1px); }

.hero { position: relative; min-height: 760px; display: flex; align-items: center; overflow: hidden; padding: 145px 0 95px; color: #fff; background: linear-gradient(128deg, #031226 0%, #092d57 55%, #0a4378 100%); }
.hero-grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-orb-one { width: 430px; height: 430px; right: -140px; top: 80px; background: radial-gradient(circle, rgba(244,185,66,.25), transparent 68%); }
.hero-orb-two { width: 520px; height: 520px; left: -280px; bottom: -260px; background: radial-gradient(circle, rgba(47,127,230,.24), transparent 68%); }
.hero-eyebrow { display: inline-flex; gap: 10px; align-items: center; padding: 9px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #f8dfab; background: rgba(255,255,255,.08); font-size: 13px; font-weight: 800; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #65e0a6; box-shadow: 0 0 0 6px rgba(101,224,166,.12); }
.hero h1 { max-width: 810px; margin: 22px 0 22px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(44px, 5vw, 72px); font-weight: 800; line-height: 1.03; letter-spacing: -2.4px; }
.hero h1 span { display: block; color: #f6c65e; }
.hero-lead { max-width: 750px; margin: 0; color: #d8e5f6; font-size: 18px; line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 13px 19px; border-radius: 13px; font-size: 14px; font-weight: 900; transition: .2s ease; }
.btn-hero-primary { color: var(--navy-950); border: 0; background: linear-gradient(135deg, var(--gold-400), #ffe3a0); box-shadow: 0 16px 36px rgba(244,185,66,.25); }
.btn-hero-primary:hover { color: var(--navy-950); transform: translateY(-2px); }
.btn-hero-secondary { color: #fff; border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
.btn-hero-secondary:hover { color: #fff; background: rgba(255,255,255,.16); }
.btn-hero-ghost { color: #dce9fa; border: 0; background: transparent; }
.btn-hero-ghost:hover { color: #fff; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; color: #c8d7ea; font-size: 12px; font-weight: 700; }
.trust-row div { display: flex; gap: 8px; align-items: center; }
.trust-row i { color: #f6c65e; }

.revenue-panel { position: relative; padding: 28px; border: 1px solid rgba(255,255,255,.65); border-radius: 30px; color: var(--slate-900); background: rgba(255,255,255,.95); box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); }
.panel-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.panel-heading small { color: var(--blue-700); font-size: 10px; font-weight: 900; letter-spacing: 1.7px; }
.panel-heading h2 { margin: 5px 0 0; font-size: 23px; font-weight: 900; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: var(--green-600); background: var(--green-100); font-size: 10px; font-weight: 900; }
.live-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); }
.revenue-total { margin: 24px 0 16px; padding: 22px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--navy-900), var(--blue-700)); }
.revenue-total small { display: block; margin-bottom: 7px; color: #bdd3ed; font-size: 12px; font-weight: 700; }
.revenue-total strong { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -.7px; }
.revenue-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.revenue-stats div { padding: 16px; border: 1px solid #e6ecf3; border-radius: 16px; background: #f8fafc; }
.revenue-stats span { display: block; color: var(--slate-500); font-size: 11px; font-weight: 700; }
.revenue-stats strong { display: block; margin-top: 5px; color: var(--navy-900); font-size: 15px; font-weight: 900; }
.recovery-block { margin-top: 18px; padding: 17px; border: 1px solid #e8edf4; border-radius: 16px; }
.recovery-block span { color: var(--slate-500); font-size: 12px; font-weight: 700; }
.recovery-block strong { font-size: 13px; }
.recovery-block .progress { height: 8px; background: #e9eef5; }
.recovery-block .progress-bar { background: linear-gradient(90deg, #159460, #49c98d); }
.panel-pay-link { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 13px 16px; border-radius: 14px; color: #fff; background: var(--navy-900); font-size: 13px; font-weight: 900; }
.panel-pay-link:hover { color: #fff; background: var(--blue-700); }

.kpi-strip { position: relative; z-index: 3; margin-top: -42px; }
.kpi-card { display: flex; align-items: center; gap: 15px; min-height: 100px; padding: 20px; border: 1px solid #e6ecf3; border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.kpi-icon, .summary-icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.kpi-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 20px; }
.kpi-icon.blue, .summary-icon.blue { color: var(--blue-700); background: var(--blue-100); }
.kpi-icon.violet, .summary-icon.violet { color: var(--violet-600); background: var(--violet-100); }
.kpi-icon.green, .summary-icon.green { color: var(--green-600); background: var(--green-100); }
.kpi-icon.gold, .summary-icon.gold { color: #a36a00; background: var(--gold-100); }
.kpi-card small { display: block; color: var(--slate-500); font-size: 11px; font-weight: 700; }
.kpi-card strong { display: block; margin-top: 3px; color: var(--navy-900); font-size: 25px; font-weight: 900; }

.section { padding: 90px 0; }
.section-light { background: #f6f8fc; }
.section-heading { margin-bottom: 42px; }
.section-heading.centered { max-width: 790px; margin-inline: auto; text-align: center; }
.section-kicker { display: inline-block; color: var(--blue-700); font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.section-kicker.light { color: #ffd980; }
.section-heading h2 { margin: 10px 0 12px; color: var(--navy-900); font-size: clamp(31px, 4vw, 47px); font-weight: 900; letter-spacing: -1.5px; }
.section-heading p { margin: 0; color: var(--slate-500); font-size: 16px; }
.summary-card { min-height: 215px; padding: 24px; border: 1px solid #e3eaf2; border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); transition: .25s ease; }
.summary-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.summary-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 22px; font-size: 19px; }
.summary-card small { color: var(--slate-500); font-size: 12px; font-weight: 800; }
.summary-card h3 { margin: 8px 0 9px; color: var(--navy-900); font-size: clamp(20px, 2vw, 27px); font-weight: 900; }
.summary-card p { margin: 0; color: var(--slate-500); font-size: 13px; }

.online-payment-banner { padding: 0 0 90px; background: #f6f8fc; }
.payment-banner-inner { display: grid; grid-template-columns: 1.55fr .75fr; align-items: center; gap: 35px; padding: 46px; overflow: hidden; border-radius: 30px; color: #fff; background: linear-gradient(125deg, #071a33 0%, #0c3d70 55%, #1a67ad 100%); box-shadow: var(--shadow-md); position: relative; }
.payment-banner-inner::after { content: ""; position: absolute; width: 330px; height: 330px; right: -140px; top: -180px; border-radius: 50%; background: rgba(244,185,66,.18); }
.payment-banner-copy, .payment-banner-action { position: relative; z-index: 1; }
.payment-banner-copy h2 { margin: 9px 0 12px; font-size: clamp(31px, 4vw, 48px); font-weight: 900; letter-spacing: -1.4px; }
.payment-banner-copy p { max-width: 720px; margin: 0; color: #d9e7f7; }
.payment-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.payment-chips span { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.payment-banner-action { display: flex; flex-direction: column; align-items: center; text-align: center; }
.secure-seal { width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 22px; color: var(--navy-950); background: linear-gradient(135deg, #ffd97a, #fff0bd); font-size: 28px; box-shadow: 0 15px 34px rgba(244,185,66,.25); }
.btn-payment-banner { display: flex; gap: 12px; align-items: center; justify-content: center; width: 100%; padding: 14px 17px; border-radius: 13px; color: var(--navy-950); background: #fff; font-weight: 900; }
.btn-payment-banner:hover { color: var(--navy-950); transform: translateY(-2px); }
.payment-banner-action small { margin-top: 10px; color: #c8d9ed; font-size: 10px; }

.workflow-section { background: #fff; }
.workflow-line { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
.workflow-step { min-height: 224px; padding: 21px; border: 1px solid #e3eaf2; border-radius: 20px; background: linear-gradient(180deg, #fff, #f8fbff); box-shadow: 0 10px 28px rgba(12,31,61,.05); }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; }
.step-top > i { color: var(--blue-700); font-size: 23px; }
.step-number { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--navy-900); font-size: 12px; font-weight: 900; }
.workflow-step small { color: var(--blue-700); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.workflow-step h3 { margin: 7px 0 8px; font-size: 17px; font-weight: 900; }
.workflow-step p { margin: 0; color: var(--slate-500); font-size: 12px; line-height: 1.6; }

.transparency-section { background: #f3f6fa; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 35px; }
.split-heading h2 { margin-bottom: 0; }
.split-heading > p { max-width: 470px; }
.public-list-card { height: 100%; padding: 24px; border: 1px solid #e1e8f0; border-radius: 23px; background: #fff; box-shadow: var(--shadow-sm); }
.public-list-card.danger-card { border-top: 4px solid #ef7777; }
.public-list-card.success-card { border-top: 4px solid #38b77c; }
.public-list-card.warning-card { border-top: 4px solid #eab348; }
.list-card-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid #edf1f6; }
.list-card-header > div { display: flex; gap: 10px; align-items: center; }
.list-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--navy-900); background: #edf3fa; }
.list-card-header h3 { margin: 0; font-size: 16px; font-weight: 900; }
.list-count { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--slate-700); background: #f1f4f8; font-size: 11px; font-weight: 900; }
.public-items { margin-top: 4px; }
.public-item { padding: 16px 0; border-bottom: 1px dashed #dfe6ef; }
.public-item:last-child { border-bottom: 0; }
.item-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.item-top small { color: var(--slate-500); font-size: 10px; }
.status-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.status-pill.danger { color: #a52f2f; background: var(--red-100); }
.status-pill.success { color: #087147; background: var(--green-100); }
.status-pill.warning { color: #895b00; background: var(--gold-100); }
.public-item > strong { display: block; color: var(--navy-900); font-size: 13px; }
.public-item > span { color: var(--slate-500); font-size: 11px; }
.empty-state { margin: 22px 0 0; color: var(--slate-500); font-size: 12px; }

.payments-table-section { padding-top: 0; background: #f3f6fa; }
.payments-table-card { overflow: hidden; border: 1px solid #e2e9f1; border-radius: 25px; background: #fff; box-shadow: var(--shadow-sm); }
.table-card-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; padding: 28px; border-bottom: 1px solid #e8edf3; }
.table-card-heading h2 { margin: 7px 0 0; font-size: 25px; font-weight: 900; }
.table-card-heading > a { color: var(--blue-700); font-size: 12px; font-weight: 900; }
.public-table { width: 100%; border-collapse: collapse; }
.public-table th { padding: 14px 20px; color: var(--slate-500); background: #f7f9fc; font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.public-table td { padding: 16px 20px; border-top: 1px solid #edf1f5; color: var(--slate-700); font-size: 12px; }
.reference-tag { display: inline-flex; padding: 5px 8px; border-radius: 8px; color: var(--blue-700); background: var(--blue-100); font-size: 10px; font-weight: 800; }
.empty-table { padding: 30px !important; text-align: center; color: var(--slate-500) !important; }

.features-section { position: relative; overflow: hidden; padding: 95px 0; color: #fff; background: radial-gradient(circle at 85% 10%, rgba(47,127,230,.26), transparent 30%), linear-gradient(135deg, #031226, #092c54); }
.dark-heading h2 { color: #fff; }
.dark-heading p { color: #c7d6e9; }
.feature-card { min-height: 220px; padding: 25px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); transition: .25s ease; }
.feature-card:hover { transform: translateY(-5px); background: rgba(255,255,255,.11); }
.feature-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--navy-950); background: linear-gradient(135deg, #ffd774, #fff0bc); font-size: 21px; }
.feature-card h3 { margin: 23px 0 9px; font-size: 17px; font-weight: 900; }
.feature-card p { margin: 0; color: #c8d8ea; font-size: 12px; line-height: 1.7; }

.final-cta { padding: 90px 0; background: #fff; }
.final-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 35px; padding: 42px; border-radius: 28px; color: var(--navy-950); background: linear-gradient(135deg, #ffcf64, #ffe7a9); box-shadow: 0 24px 55px rgba(244,185,66,.22); }
.final-cta-inner h2 { max-width: 770px; margin: 8px 0 10px; font-size: clamp(29px, 4vw, 44px); font-weight: 900; letter-spacing: -1.3px; }
.final-cta-inner p { max-width: 760px; margin: 0; color: #5e4c22; }
.final-cta-actions { display: flex; flex-direction: column; gap: 10px; min-width: 250px; }
.final-cta-actions .btn { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 13px 17px; border-radius: 12px; font-size: 12px; font-weight: 900; }
.btn-dark-action { color: #fff; background: var(--navy-900); }
.btn-dark-action:hover { color: #fff; background: var(--blue-700); }
.btn-gold-action { color: var(--navy-950); border: 1px solid rgba(3,18,38,.18); background: rgba(255,255,255,.55); }
.btn-gold-action:hover { color: var(--navy-950); background: #fff; }

.public-footer { padding: 28px 0; color: #b7c4d6; background: #020d1d; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
.footer-brand > div { display: flex; flex-direction: column; line-height: 1.2; }
.footer-brand strong { color: #fff; font-size: 14px; }
.footer-brand small { color: #8090a6; font-size: 9px; }
.public-footer p { margin: 0; font-size: 10px; }
.footer-links { display: flex; gap: 14px; }
.footer-links a { color: #aebbd0; font-size: 10px; font-weight: 700; }
.footer-links a:hover { color: #fff; }

.reveal-up, .reveal-right { opacity: 0; transform: translateY(20px); animation: revealUp .75s ease forwards; }
.reveal-right { transform: translateX(25px); animation-name: revealRight; }
.delay-1 { animation-delay: .1s; }.delay-2 { animation-delay: .2s; }.delay-3 { animation-delay: .3s; }.delay-4 { animation-delay: .4s; }
.reveal-card { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.reveal-card.visible { opacity: 1; transform: translateY(0); }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes revealRight { to { opacity: 1; transform: translateX(0); } }

/* Paiement public */
.payment-page { background: #f3f6fa; }
.payment-nav { position: relative !important; }
.payment-main { min-height: calc(100vh - 160px); }
.payment-hero { padding: 70px 0; color: #fff; background: radial-gradient(circle at 90% 15%, rgba(244,185,66,.21), transparent 28%), linear-gradient(135deg, #031226, #0c3b6b); }
.payment-eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; border-radius: 999px; color: #ffe2a1; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 900; }
.payment-hero h1 { max-width: 720px; margin: 15px 0 13px; font-size: clamp(37px, 5vw, 58px); font-weight: 900; letter-spacing: -1.8px; }
.payment-hero p { max-width: 720px; margin: 0; color: #cfdded; }
.np-search-card { padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.np-search-card label { display: block; margin-bottom: 9px; color: #fff; font-size: 12px; font-weight: 900; }
.search-input-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; overflow: hidden; border-radius: 13px; background: #fff; }
.search-input-wrap > i { padding-left: 14px; color: var(--slate-500); }
.search-input-wrap input { min-width: 0; padding: 13px 10px; border: 0; outline: 0; color: var(--slate-900); }
.search-input-wrap button { height: 100%; padding: 0 16px; border: 0; color: #fff; background: var(--gold-500); font-size: 12px; font-weight: 900; }
.np-search-card small { display: block; margin-top: 9px; color: #c6d8ec; font-size: 9px; }
.payment-content { padding: 55px 0 90px; }
.payment-alert { display: flex; gap: 9px; align-items: center; border-radius: 15px; font-size: 13px; font-weight: 700; }
.payment-success-card { display: flex; gap: 18px; align-items: center; margin-bottom: 28px; padding: 22px; border: 1px solid #a9e3c5; border-radius: 20px; background: #effcf5; }
.success-check { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 16px; color: #fff; background: var(--green-600); font-size: 25px; }
.payment-success-card span { color: var(--green-600); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.payment-success-card h2 { margin: 4px 0; font-size: 19px; font-weight: 900; }
.payment-success-card p, .payment-success-card small { margin: 0; color: var(--slate-500); font-size: 11px; }
.note-preview-card, .payment-form-card { border: 1px solid #e0e7ef; border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); }
.note-preview-card { position: sticky; top: 22px; overflow: hidden; }
.note-preview-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; padding: 25px; color: #fff; background: linear-gradient(135deg, var(--navy-900), var(--blue-700)); }
.note-preview-head small { color: #bbd2ee; font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.note-preview-head h2 { margin: 6px 0 0; font-size: 18px; font-weight: 900; }
.note-type { padding: 7px 10px; border-radius: 999px; color: var(--navy-950); background: #ffd36e; font-size: 10px; font-weight: 900; }
.note-status { display: flex; gap: 8px; align-items: center; margin: 20px 24px 0; padding: 11px 13px; border-radius: 12px; font-size: 11px; font-weight: 800; }
.note-status.payable { color: #087348; background: var(--green-100); }
.note-status.closed { color: #9a3232; background: var(--red-100); }
.note-details { margin: 15px 24px 0; }
.note-details > div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid #edf1f5; }
.note-details dt { color: var(--slate-500); font-size: 11px; font-weight: 700; }
.note-details dd { margin: 0; color: var(--navy-900); font-size: 12px; font-weight: 900; text-align: right; }
.note-details .emphasis dd { color: var(--blue-700); font-size: 17px; }
.note-security { display: flex; gap: 10px; align-items: flex-start; margin: 20px 24px 24px; padding: 13px; border-radius: 13px; color: var(--slate-500); background: #f4f7fb; font-size: 10px; }
.note-security i { color: var(--green-600); font-size: 17px; }
.payment-form-card { padding: 28px; }
.form-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.form-heading small { color: var(--blue-700); font-size: 9px; font-weight: 900; letter-spacing: 1.4px; }
.form-heading h2 { margin: 5px 0 0; font-size: 23px; font-weight: 900; }
.form-heading > i { color: var(--blue-700); font-size: 31px; }
.payment-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.method-option { cursor: pointer; }
.method-option input { position: absolute; opacity: 0; pointer-events: none; }
.method-option > span { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center; min-height: 79px; padding: 14px; border: 1px solid #dce4ed; border-radius: 15px; transition: .2s ease; }
.method-option i { grid-row: 1 / 3; color: var(--blue-700); font-size: 22px; }
.method-option strong { font-size: 12px; }
.method-option small { color: var(--slate-500); font-size: 9px; }
.method-option input:checked + span { border-color: var(--blue-500); background: #f0f6ff; box-shadow: 0 0 0 3px rgba(47,127,230,.1); }
.form-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e8edf3; }
.form-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.form-section-title span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--navy-900); font-size: 10px; font-weight: 900; }
.form-section-title h3 { margin: 0; font-size: 15px; font-weight: 900; }
.payment-form-card .form-label { margin-bottom: 6px; color: var(--slate-700); font-size: 10px; font-weight: 800; }
.payment-form-card .form-control, .payment-form-card .form-select { min-height: 44px; border-color: #d9e2ec; border-radius: 11px; font-size: 12px; }
.payment-form-card .form-control:focus, .payment-form-card .form-select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(47,127,230,.12); }
.method-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 15px; padding: 12px; border-radius: 12px; color: #654d14; background: #fff7df; font-size: 10px; }
.method-note.secure { color: #24516f; background: #edf7ff; }
.payment-consent { margin-top: 22px; padding: 14px; border-radius: 13px; background: #f5f7fa; }
.payment-consent label { display: flex; gap: 9px; align-items: flex-start; margin: 0; color: var(--slate-500); font-size: 10px; }
.payment-consent input { margin-top: 3px; }
.submit-payment-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 17px; padding: 15px 18px; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--navy-900), var(--blue-700)); font-size: 12px; font-weight: 900; box-shadow: 0 14px 30px rgba(10,40,75,.2); }
.submit-payment-btn span { display: flex; gap: 8px; align-items: center; }
.not-payable-card, .payment-empty-state { padding: 50px 30px; border: 1px solid #e0e7ef; border-radius: 24px; background: #fff; text-align: center; box-shadow: var(--shadow-sm); }
.not-payable-card > i { color: var(--green-600); font-size: 48px; }
.not-payable-card h2, .payment-empty-state h2 { margin: 15px 0 8px; font-size: 24px; font-weight: 900; }
.not-payable-card p, .payment-empty-state p { margin: 0; color: var(--slate-500); font-size: 12px; }
.payment-empty-state > span { width: 70px; height: 70px; display: inline-grid; place-items: center; border-radius: 22px; color: var(--blue-700); background: var(--blue-100); font-size: 30px; }
.empty-payment-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.empty-payment-methods span { padding: 7px 10px; border-radius: 999px; color: var(--slate-500); background: #f1f4f8; font-size: 9px; font-weight: 800; }
.payment-footer { padding: 22px 0; color: #aebdd1; background: #020d1d; }
.payment-footer .container { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.payment-footer span { color: #fff; font-size: 13px; font-weight: 900; }
.payment-footer p { margin: 0; font-size: 9px; }

@media (max-width: 1199.98px) {
    .workflow-line { grid-template-columns: repeat(3, 1fr); }
    .nav-actions { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 991.98px) {
    .premium-nav { background: rgba(3,18,38,.98); }
    .navbar-collapse { padding-top: 15px; }
    .public-menu { margin-bottom: 13px; }
    .nav-actions { justify-content: flex-start; }
    .hero { min-height: auto; padding: 130px 0 80px; }
    .revenue-panel { margin-top: 15px; }
    .kpi-strip { margin-top: 24px; }
    .payment-banner-inner { grid-template-columns: 1fr; }
    .payment-banner-action { align-items: flex-start; text-align: left; }
    .btn-payment-banner { width: auto; }
    .split-heading, .final-cta-inner { flex-direction: column; align-items: flex-start; }
    .final-cta-actions { width: 100%; min-width: 0; flex-direction: row; }
    .note-preview-card { position: static; }
}
@media (max-width: 767.98px) {
    .section { padding: 68px 0; }
    .hero h1 { letter-spacing: -1.5px; }
    .hero-actions .btn { width: 100%; }
    .trust-row { gap: 12px; }
    .revenue-stats { grid-template-columns: 1fr; }
    .payment-banner-inner { padding: 31px 24px; }
    .workflow-line { grid-template-columns: repeat(2, 1fr); }
    .split-heading, .table-card-heading { display: block; }
    .split-heading > p, .table-card-heading > a { display: block; margin-top: 16px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .payment-method-grid { grid-template-columns: 1fr; }
    .payment-form-card { padding: 20px; }
    .final-cta-inner { padding: 30px 23px; }
    .final-cta-actions { flex-direction: column; }
    .payment-footer .container { flex-direction: column; text-align: center; }
}
@media (max-width: 575.98px) {
    .brand-copy small { letter-spacing: 1px; }
    .nav-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .nav-actions .btn { width: 100%; }
    .hero { padding-top: 120px; }
    .hero h1 { font-size: 42px; }
    .kpi-card { padding: 15px; }
    .kpi-icon { width: 42px; height: 42px; }
    .kpi-card strong { font-size: 20px; }
    .workflow-line { grid-template-columns: 1fr; }
    .payment-hero { padding: 48px 0; }
    .search-input-wrap { grid-template-columns: auto 1fr; }
    .search-input-wrap button { grid-column: 1 / -1; min-height: 44px; }
}