/* keyprime.in 2026 design (Concept B: Teal & Amber). Bootstrap 5.3 underneath; this file only adds the look. */
:root {
  --kp-teal: #0f766e;
  --kp-teal-dark: #0b5b55;
  --kp-teal-deep: #10302c;
  --kp-teal-soft: #eef6f4;
  --kp-teal-line: #d5e7e2;
  --kp-amber: #f59e0b;
  --kp-amber-dark: #d97706;
  --kp-amber-soft: #fff4dc;
  --kp-ink: #10302c;
  --kp-muted: #4c6461;
  --kp-bg: #fbfaf7;
  --kp-line: #e3ebe8;
  --kp-radius: 16px;
  --kp-shadow: 0 24px 48px -24px rgba(16, 48, 44, .35);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--kp-ink);
  --bs-body-bg: var(--kp-bg);
  --bs-link-color: var(--kp-teal);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--kp-teal-dark);
  --bs-link-hover-color-rgb: 11, 91, 85;
  --bs-border-color: var(--kp-line);
}

body { font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .kp-display, .navbar-nav .nav-link, .btn { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3, h4 { color: var(--kp-ink); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: 0; }
p { color: var(--kp-muted); }
a { text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--kp-amber); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 8px; }
.skip-link:focus { left: 8px; }
.text-teal { color: var(--kp-teal) !important; }
.bg-soft { background: var(--kp-teal-soft); }
.bg-white { background: #fff; }

/* Top bar and navigation */
.kp-topbar { background: var(--kp-teal-dark); color: #e6f3f0; font-size: .85rem; }
.kp-topbar a { color: #fff; text-decoration: none; }
.kp-topbar a:hover { text-decoration: underline; }
.kp-nav { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--kp-line); }
.kp-nav .navbar-brand img { height: 44px; width: auto; }
.kp-nav .nav-link { color: var(--kp-ink); font-weight: 600; font-size: .95rem; padding: .5rem .8rem !important; border-radius: 10px; }
.kp-nav .nav-link:hover { color: var(--kp-teal); background: var(--kp-teal-soft); }
.kp-nav .nav-link.active { color: var(--kp-teal); }
.kp-nav .navbar-toggler { border: 0; padding: .5rem; }
.kp-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--kp-amber); }
@media (max-width: 991.98px) {
  .kp-nav .navbar-collapse { padding: .5rem 0 1rem; }
  .kp-nav .nav-link { padding: .65rem .5rem !important; }
}

/* Buttons */
.btn { font-weight: 700; border-radius: 12px; padding: .75rem 1.35rem; }
.btn-sm { padding: .5rem .9rem; border-radius: 10px; }
.btn-kp { --bs-btn-bg: var(--kp-teal); --bs-btn-border-color: var(--kp-teal); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--kp-teal-dark); --bs-btn-hover-border-color: var(--kp-teal-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--kp-teal-deep); --bs-btn-active-border-color: var(--kp-teal-deep); }
.btn-amber { --bs-btn-bg: var(--kp-amber); --bs-btn-border-color: var(--kp-amber); --bs-btn-color: #1f1300; --bs-btn-hover-bg: var(--kp-amber-dark); --bs-btn-hover-border-color: var(--kp-amber-dark); --bs-btn-hover-color: #1f1300; --bs-btn-active-bg: var(--kp-amber-dark); --bs-btn-active-color: #1f1300; }
.btn-ghost { --bs-btn-bg: #fff; --bs-btn-border-color: var(--kp-line); --bs-btn-color: var(--kp-ink); --bs-btn-hover-bg: var(--kp-teal-soft); --bs-btn-hover-border-color: var(--kp-teal-line); --bs-btn-hover-color: var(--kp-ink); border-width: 1.5px; }
.btn-light-outline { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.55); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; border-width: 1.5px; }

/* Sections */
.kp-section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.kp-eyebrow { display: inline-block; font: 700 .78rem/1 'Manrope', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--kp-teal); background: var(--kp-teal-soft); border: 1px solid var(--kp-teal-line); padding: .45rem .8rem; border-radius: 999px; }
.kp-lead { font-size: 1.15rem; color: var(--kp-muted); }
.kp-section-head { max-width: 46rem; margin-bottom: 2.25rem; }

/* Hero */
.kp-hero { background: radial-gradient(1100px 520px at 85% 0%, #d9f0ea 0%, rgba(251, 250, 247, 0) 62%), var(--kp-bg); padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem); overflow: hidden; }
.kp-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); margin: 1.1rem 0; }
.kp-hero h1 .hl { color: var(--kp-teal); }
.kp-hero .kp-lead { max-width: 36rem; }
.kp-trust { color: var(--kp-muted); font-size: .92rem; }
.kp-trust strong { color: var(--kp-ink); }
.kp-shot { border-radius: var(--kp-radius); background: #fff; box-shadow: var(--kp-shadow), 0 0 0 1px var(--kp-line); overflow: hidden; }
.kp-shot img { display: block; width: 100%; }
.kp-hero-visual { position: relative; }
.kp-chip { position: absolute; left: -1.5rem; bottom: -1.25rem; background: #fff; border: 1px solid var(--kp-line); border-radius: 14px; padding: .65rem 1rem; box-shadow: 0 14px 30px -14px rgba(0,0,0,.3); font: 700 .92rem/1.3 'Manrope', sans-serif; }
.kp-chip small { display: block; font: 500 .85rem 'Inter', sans-serif; color: var(--kp-muted); }
.kp-chip .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; margin-right: .4rem; }
@media (max-width: 991.98px) { .kp-chip { left: .75rem; } }

.kp-page-hero { background: linear-gradient(180deg, var(--kp-teal-soft), var(--kp-bg)); padding: clamp(2.5rem, 2rem + 3vw, 4rem) 0 2.5rem; border-bottom: 1px solid var(--kp-line); }
.kp-page-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); margin: .9rem 0 .6rem; }
.breadcrumb { font-size: .88rem; margin: 0; }
.breadcrumb a { text-decoration: none; }

/* Industry strip */
.kp-strip { background: #fff; border-top: 1px solid var(--kp-line); border-bottom: 1px solid var(--kp-line); }
.kp-strip a { color: var(--kp-muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kp-strip a:hover { color: var(--kp-teal); }

/* Cards */
.kp-card { background: #fff; border: 1px solid var(--kp-line); border-radius: var(--kp-radius); padding: 1.5rem; height: 100%; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.kp-card { display: block; color: inherit; text-decoration: none; }
a.kp-card:hover, .kp-card.hover:hover { border-color: var(--kp-teal-line); box-shadow: 0 18px 36px -24px rgba(16,48,44,.45); transform: translateY(-2px); }
.kp-card p { margin-bottom: 0; font-size: .95rem; }
.kp-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--kp-teal-soft); color: var(--kp-teal); font-size: 1.35rem; margin-bottom: 1rem; }
.kp-icon.amber { background: var(--kp-amber-soft); color: var(--kp-amber-dark); }
.kp-list { list-style: none; padding: 0; margin: 0; }
.kp-list li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; color: var(--kp-muted); }
.kp-list li::before { content: ''; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--kp-teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230f766e' d='M6.4 11.2 3.2 8l1.1-1.1 2.1 2.1 5.3-5.3 1.1 1.1z'/%3E%3C/svg%3E") center/80% no-repeat; }
.kp-list li strong { color: var(--kp-ink); }

/* Feature rows (text + screenshot) */
.kp-feature + .kp-feature { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.kp-feature h3 { font-size: 1.5rem; font-weight: 800; }

/* Stats */
.kp-stats { background: var(--kp-teal-dark); color: #fff; border-radius: calc(var(--kp-radius) + 4px); }
.kp-stats .num { font: 800 clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem)/1 'Manrope', sans-serif; color: #fff; }
.kp-stats .lbl { color: #cfe7e1; font-size: .92rem; margin-top: .4rem; }

/* Testimonials */
.kp-quote { background: #fff; border: 1px solid var(--kp-line); border-radius: var(--kp-radius); padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
.kp-quote blockquote { margin: 0 0 1.25rem; color: var(--kp-ink); flex: 1; }
.kp-quote figcaption { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--kp-muted); }
.kp-quote figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.kp-quote figcaption strong { display: block; color: var(--kp-ink); font-family: 'Manrope', sans-serif; }

/* Call to action band */
.kp-cta { background: linear-gradient(120deg, var(--kp-teal-dark), var(--kp-teal)); color: #fff; border-radius: calc(var(--kp-radius) + 4px); padding: clamp(2rem, 1.5rem + 2vw, 3rem); }
.kp-cta h2 { color: #fff; }
.kp-cta p { color: #d7ece7; }

/* Forms */
.kp-form { background: #fff; border: 1px solid var(--kp-line); border-radius: var(--kp-radius); padding: 1.5rem; box-shadow: var(--kp-shadow); }
.form-control, .form-select { border-radius: 10px; padding: .7rem .9rem; border-color: #cfdcd8; }
.form-control:focus, .form-select:focus { border-color: var(--kp-teal); box-shadow: 0 0 0 .2rem rgba(15,118,110,.18); }
.form-label { font-weight: 600; font-size: .92rem; color: var(--kp-ink); }
.kp-hp { position: absolute !important; left: -5000px !important; width: 1px; height: 1px; overflow: hidden; }
.kp-form-status { font-size: .92rem; margin-top: .75rem; min-height: 1.4em; }
.kp-form-status.ok { color: #15803d; }
.kp-form-status.err { color: #b91c1c; }

/* FAQ */
.accordion { --bs-accordion-border-color: var(--kp-line); --bs-accordion-border-radius: 14px; --bs-accordion-inner-border-radius: 14px; --bs-accordion-active-bg: var(--kp-teal-soft); --bs-accordion-active-color: var(--kp-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(245,158,11,.5); }
.accordion-button { font: 700 1.02rem 'Manrope', sans-serif; color: var(--kp-ink); }
.accordion-body { color: var(--kp-muted); }

/* Prose (policy, disclaimer) */
.kp-prose { max-width: 48rem; }
.kp-prose h2 { font-size: 1.3rem; margin-top: 2rem; }

/* Footer */
.kp-footer { background: var(--kp-teal-deep); color: #c5ddd8; font-size: .93rem; }
.kp-footer h2 { color: #fff; font-size: 1rem; letter-spacing: .02em; margin-bottom: 1rem; }
.kp-footer a { color: #e6f3f0; text-decoration: none; }
.kp-footer a:hover { color: #fff; text-decoration: underline; }
.kp-footer .kp-footer-logo { background: #fff; border-radius: 12px; padding: .5rem .75rem; display: inline-block; }
.kp-footer .kp-footer-logo img { height: 40px; width: auto; }
.kp-footer ul { list-style: none; padding: 0; margin: 0; }
.kp-footer li { margin-bottom: .45rem; }
.kp-footer .kp-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 1.1rem; margin: 0 .35rem .35rem 0; }
.kp-footer .kp-social a:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.kp-footer .kp-legal { border-top: 1px solid rgba(255,255,255,.12); color: #9fbdb7; font-size: .85rem; }
.kp-footer .form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.kp-footer .form-control::placeholder { color: #9fbdb7; }

/* WhatsApp button */
.kp-wa { position: fixed; right: 18px; bottom: 18px; z-index: 1030; display: inline-flex; align-items: center; gap: .5rem; background: #25d366; color: #fff; font: 700 .95rem 'Manrope', sans-serif; border-radius: 999px; padding: .75rem 1.1rem; box-shadow: 0 12px 26px -10px rgba(0,0,0,.45); text-decoration: none; }
.kp-wa:hover { background: #1fb957; color: #fff; }
.kp-wa i { font-size: 1.3rem; line-height: 1; }
@media (max-width: 575.98px) { .kp-wa span { display: none; } .kp-wa { padding: .8rem; } }

/* Video modal */
.kp-video { position: relative; padding-top: 56.25%; background: #000; border-radius: 12px; overflow: hidden; }
.kp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .kp-topbar, .kp-nav, .kp-wa, .kp-footer, .kp-cta { display: none !important; } }

/* Download Centre */
.kp-dl-nav { position: sticky; top: 76px; z-index: 5; background: rgba(251,250,247,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--kp-line); }
.kp-dl-nav .nav-link { color: var(--kp-muted); font-weight: 600; border-radius: 999px; padding: .4rem .9rem; white-space: nowrap; }
.kp-dl-nav .nav-link:hover { color: var(--kp-teal); background: var(--kp-teal-soft); }
.kp-dl-group { scroll-margin-top: 140px; }
.kp-dl-group + .kp-dl-group { margin-top: 3rem; }
.kp-dl-list { background: #fff; border: 1px solid var(--kp-line); border-radius: var(--kp-radius); overflow: hidden; }
.kp-dl-item { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; }
.kp-dl-item + .kp-dl-item { border-top: 1px solid var(--kp-line); }
.kp-dl-item .kp-icon { margin: 0; flex: 0 0 46px; }
.kp-dl-item h3 { font-size: 1.02rem; margin: 0 0 .2rem; }
.kp-dl-item p { margin: 0; font-size: .92rem; }
.kp-dl-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.kp-tag { display: inline-block; font: 600 .74rem/1 'Inter', sans-serif; color: var(--kp-muted); background: var(--kp-bg); border: 1px solid var(--kp-line); border-radius: 999px; padding: .3rem .55rem; }
.kp-tag.teal { color: var(--kp-teal); background: var(--kp-teal-soft); border-color: var(--kp-teal-line); }
.kp-dl-item .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .kp-dl-item { flex-wrap: wrap; align-items: flex-start; }
  .kp-dl-item .kp-dl-text { flex: 1 1 calc(100% - 62px); }
  .kp-dl-item .btn { width: 100%; }
}