﻿/* ── 1. Theme tokens + Bootstrap variable overrides ─────────────────── */
html{scroll-behavior:smooth}

.kx-page{
  /* keum tokens */
  --kx-violet:#6C5CE7;
  --kx-violet-deep:#4F3FD6;
  --kx-violet-2:#8577F2;
  --kx-violet-tint:#f8f6ff;
  --kx-violet-line:#dce0e5;
  --kx-ink:#0C0C11;
  --kx-soft:#FBFAFF;
  --kx-line-soft:#EFEEF5;
  --kx-shadow-card:0 2px 4px rgba(22,20,45,.04),0 14px 34px -18px rgba(22,20,45,.16);
  --kx-shadow-panel:0 4px 12px rgba(22,20,45,.05),0 44px 90px -44px rgba(79,63,214,.30);
  --kx-glow-btn:0 10px 30px -8px rgba(108,92,231,.45);
  --kx-ease:cubic-bezier(.22,.61,.36,1);
  --kx-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kx-display:"Inter Tight",var(--kx-sans);

  /* Bootstrap 5.3 variables */
  --bs-primary:#6C5CE7;
  --bs-primary-rgb:108,92,231;
  --bs-primary-bg-subtle:#EEEBFC;
  --bs-primary-border-subtle:#DDD6F8;
  --bs-primary-text-emphasis:#4F3FD6;
  --bs-link-color:#6C5CE7;
  --bs-link-color-rgb:108,92,231;
  --bs-link-hover-color:#4F3FD6;
  --bs-link-hover-color-rgb:79,63,214;
  --bs-body-font-family:var(--kx-sans);
  --bs-body-color:#1E1D26;
  --bs-body-color-rgb:30,29,38;
  --bs-heading-color:#1E1D26;
  --text-body-primary:#000000;
  --bs-secondary-color:#6B6A78;
  --bs-tertiary-color:#9A98A6;
  --bs-tertiary-bg:#F6F5FA;
  --bs-tertiary-bg-rgb:246,245,250;
  --bs-border-color:#dce0e5;

  font-family:var(--kx-sans);
  color:var(--bs-body-color);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.text-primary {
    color: #6B5CF6 !important;
}
.g-bg {
    background: linear-gradient(179.73deg, #E7EFFF 0%, #F6EAEA 100%);
    font-size: 14px;
}
.btn-ghost {
    color: var(--muted2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--muted);
    padding: 18px 32px;
    border-radius: 50px;
    transition: color .2s, border-color .2s, background .2s;
}
.small {
    font-size: 0.875em !important;
}
.kx-page .display-6{font-size:clamp(1.9rem,4.2vw,2.9rem)}
.kx-page .kx-hero-sub{font-size:1.15rem;}
.kx-page .list-group-item{ color:#000000;}
/* Keyboard focus */
.kx-page a:focus-visible,
.kx-page .btn:focus-visible,
.kx-page button:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}


/* Buttons */
.kx-page .btn{--bs-btn-font-weight:600;--bs-btn-font-family:var(--kx-sans)}
.kx-page .btn-lg{--bs-btn-font-size:1rem;--bs-btn-padding-y:.85rem;--bs-btn-padding-x:1.5rem}
.kx-page .btn-dark{
  --bs-btn-bg:var(--kx-ink);--bs-btn-border-color:var(--kx-ink);
  --bs-btn-hover-bg:#1c1b26;--bs-btn-hover-border-color:#1c1b26;
  --bs-btn-active-bg:#000;--bs-btn-active-border-color:#000;
}
.kx-page .btn-light{
  --bs-btn-bg:#fff;--bs-btn-border-color:var(--bs-border-color);
  --bs-btn-hover-bg:var(--kx-violet-tint);--bs-btn-hover-border-color:var(--kx-violet-line);
  --bs-btn-active-bg:var(--kx-violet-tint);--bs-btn-active-border-color:var(--kx-violet-line);
}
.kx-btn-glow{
  box-shadow:var(--kx-glow-btn);
  transition:transform .18s var(--kx-ease),box-shadow .25s var(--kx-ease),background-color .2s,border-color .2s;
}
.kx-btn-glow:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(108,92,231,.6)}

/* Keyboard focus */
.kx-page a:focus-visible,
.kx-page .btn:focus-visible,
.kx-page button:focus-visible{outline:2px solid var(--bs-primary);outline-offset:2px}

/* ── 2. Page components ─────────────────────────────────────────────── */

/* Section frame */
.kx-section{position:relative;overflow:hidden;}
.kx-section > .container{position:relative;z-index:2}
.kx-glow{position:absolute;pointer-events:none;filter:blur(80px);opacity:.7;z-index:0}
.kx-glow-c{width:520px;height:360px;left:-140px;top:60px;background:radial-gradient(ellipse at center,rgba(108,92,231,.14),transparent 60%)}
.kx-glow-d{width:560px;height:400px;right:-160px;top:-40px;background:radial-gradient(ellipse at center,rgba(133,119,242,.14),transparent 62%)}
.kx-glow-e{width:520px;height:360px;left:50%;transform:translateX(-50%);top:-20px;background:radial-gradient(ellipse at center,rgba(108,92,231,.12),transparent 62%)}
.kx-glow-f{width:640px;height:420px;left:50%;transform:translateX(-50%);top:-80px;background:radial-gradient(ellipse at center,rgba(108,92,231,.16),transparent 62%)}
.kx-glow-q{width:480px;height:320px;left:50%;transform:translateX(-50%);top:0;background:radial-gradient(ellipse at center,rgba(108,92,231,.10),transparent 62%)}

/* Small type helpers */
.kx-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-primary)}
.kx-tick{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--bs-primary);box-shadow:0 0 0 4px rgba(108,92,231,.15)}
.kx-page .kx-label{font-family:var(--kx-sans);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bs-tertiary-color)}
.kx-page .kx-pill{font-size:.875rem;line-height:1.4;white-space:normal;text-align:left}
.kx-fine{font-size:.75rem}
.kx-min0{min-width:0}

/* Hero */
.hero-banner{ padding: 74px 0 66px;}
.hero-banner h1 { width:100%;}
.kx-hero-shell{
  border-radius:30px;
  border-color:#ECE8F8 !important;
  background:
    radial-gradient(900px 420px at 80% 10%,#F9E8EF 0%,rgba(249,232,239,0) 55%),
    radial-gradient(780px 460px at 14% 28%,#E9E2FB 0%,rgba(233,226,251,0) 58%),
    radial-gradient(640px 520px at 52% 108%,#E3ECFC 0%,rgba(227,236,252,0) 60%),
    linear-gradient(180deg,#F2EEFC 0%,#FCFBFE 80%);
}

/* Hero live panel */
.kx-live{box-shadow:var(--kx-shadow-panel)}
.kx-live-dot{width:8px;height:8px;border-radius:50%;background:var(--bs-primary);animation:kx-pulse 2.2s infinite}
@keyframes kx-pulse{0%{box-shadow:0 0 0 0 rgba(108,92,231,.5)}70%{box-shadow:0 0 0 8px rgba(108,92,231,0)}100%{box-shadow:0 0 0 0 rgba(108,92,231,0)}}
.kx-lstat{background:var(--kx-violet-tint);border:1px solid var(--kx-violet-line);height:100%}
.kx-num{font-family:var(--kx-display);font-weight:700;font-size:clamp(1.15rem,2.2vw,1.4rem);color:var(--bs-primary);letter-spacing:-.02em}
.kx-feed-row{background:#fff;border:1px solid var(--bs-border-color);transition:border-color .4s,background-color .4s}
.kx-feed-row.is-hot{border-color:var(--kx-violet-line);background-color:var(--kx-violet-tint)}

/* Plan card */
.kx-plan{box-shadow:var(--kx-shadow-card)}
.kx-plan-left{border-bottom:1px solid var(--bs-border-color)}
@media (min-width:992px){.kx-plan-left{border-bottom:0;border-right:1px solid var(--bs-border-color)}}
.kx-year{box-shadow:0 1px 2px rgba(22,20,45,.05);border-color:var(--kx-violet-line);background:linear-gradient(180deg,var(--kx-violet-tint),#fff)}

/* Feature rows */
.kx-feature{margin-bottom:4rem}
.kx-feature:last-child{margin-bottom:0}
.kx-learn{transition:gap .2s}
.kx-learn:hover{gap:.7rem !important}

/* Mock windows */
.kx-mock{box-shadow:var(--kx-shadow-card)}
.kx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bs-border-color)}
.kx-soft{background:var(--kx-soft)}
.kx-icobox{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:.7rem;background:var(--kx-violet-tint);border:1px solid var(--kx-violet-line);color:var(--bs-primary)}
.kx-icobox .bi{font-size:1rem;line-height:1}
.kx-icobox-xs{width:28px;height:28px;border-radius:.5rem}
.kx-icobox-sm{width:34px;height:34px;border-radius:.55rem}
.kx-icobox-md{width:40px;height:40px;border-radius:.7rem}
.kx-icobox-lg{width:54px;height:54px}
.kx-icobox-lg .bi{font-size:1.5rem}
.kx-icobox img{width:22px;height:22px;object-fit:contain}
.kx-avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;font-size:.8125rem;font-family:var(--kx-display)}
.kx-mini{font-size:.75rem;font-weight:600;padding:.5rem .8rem}
.kx-kpi-n{font-family:var(--kx-display);font-weight:700;font-size:1.5rem;color:var(--bs-primary)}

/* Chat bubbles + typing */
.kx-bubble{max-width:82%;padding:.7rem .9rem;border-radius:14px;font-size:.875rem;margin-bottom:.6rem;line-height:1.45}
.kx-bubble-them{background:#F3F2F7;border:1px solid var(--kx-line-soft);border-bottom-left-radius:4px}
.kx-bubble-us{margin-left:auto;background:var(--bs-primary);color:#fff;border-bottom-right-radius:4px;font-weight:500}
.kx-typing{display:inline-flex;align-items:center;gap:4px;padding:.75rem .9rem;background:#F3F2F7;border:1px solid var(--kx-line-soft);border-radius:14px;border-bottom-left-radius:4px}
.kx-typing i{width:6px;height:6px;border-radius:50%;background:var(--bs-tertiary-color);animation:kx-blink 1.3s infinite}
.kx-typing i:nth-child(2){animation-delay:.2s}
.kx-typing i:nth-child(3){animation-delay:.4s}
@keyframes kx-blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* Calendar chip */
.kx-cal{width:38px;height:44px;flex:none;border-radius:8px;border:1px solid var(--kx-violet-line);overflow:hidden;text-align:center;background:#fff}
.kx-cal-m{background:var(--bs-primary);color:#fff;font-size:9px;font-weight:700;padding:2px 0;letter-spacing:.06em}
.kx-cal-d{font-family:var(--kx-display);font-weight:700;font-size:1.125rem;padding-top:3px}

/* Mock rotator (crossfade) */
.kx-mock-col{display:flex;flex-direction:column}
.kx-rotator{display:grid; align-items:center;}
.kx-slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .55s var(--kx-ease)}
.kx-slide.is-active{opacity:1;pointer-events:auto}
.kx-dots{display:flex;justify-content:center;gap:8px;margin-top:1rem}
.kx-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--bs-border-color);cursor:pointer;transition:background-color .2s var(--kx-ease),transform .2s var(--kx-ease)}
.kx-dots button:hover{background:var(--kx-violet-line)}
.kx-dots button.on{background:var(--bs-primary);transform:scale(1.18)}

/* Compare table */
.kx-ctable{box-shadow:var(--kx-shadow-card)}
.kx-ctable .table{--bs-table-bg:transparent;margin:0}
.kx-ctable :is(th,td){padding:.95rem 1.25rem;font-size:.9rem}
.kx-ctable :is(th,td) + :is(th,td){border-left:1px solid var(--kx-line-soft)}
.kx-ctable thead th{background:var(--kx-soft);font-family:var(--kx-display);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bs-tertiary-color);font-weight:700}
.kx-ctable thead th.text-primary{color:var(--bs-primary) !important}
.kx-ctable tbody th{width:38%}
.kx-before{color:var(--bs-tertiary-color);text-decoration:line-through;text-decoration-color:rgba(154,152,166,.6)}

/* Testimonial */
.kx-quote p{font-family:var(--kx-display);font-weight:600;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.32;letter-spacing:-.02em}

/* Eligibility highlight card */
.kx-card-hl{border:1px solid var(--kx-violet-line);background:linear-gradient(180deg,var(--kx-violet-tint),#fff)}

/* Step numbers (Go live) */
.kx-step-n{font-family:var(--kx-display);font-weight:700;font-size:1.75rem;color:var(--bs-primary);opacity:.5}

/* FAQ (Bootstrap accordion, restyled) */
.kx-faq{--bs-accordion-border-color:var(--bs-border-color);--bs-accordion-border-radius:14px;--bs-accordion-inner-border-radius:13px;--bs-accordion-bg:#fff}
.kx-faq .accordion-item{margin-bottom:.75rem;overflow:hidden;box-shadow:0 1px 2px rgba(22,20,45,.05); border-radius:14px;}
.kx-faq .accordion-item:not(:first-of-type){border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}
.kx-faq .accordion-item:has(.accordion-collapse.show){border-color:var(--kx-violet-line)}
.kx-faq .accordion-button{
  font-family:var(--kx-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
  color:var(--bs-body-color);background:#fff;padding:0.5rem 1.375rem;gap:1rem;box-shadow:none;
}
.kx-faq .accordion-button:not(.collapsed){color:var(--bs-body-color);background:#fff;box-shadow:none}
.kx-faq .accordion-button:focus-visible{outline:2px solid var(--bs-primary);outline-offset:-2px}
/* animated plus → minus */
.kx-faq .accordion-button::after,
.kx-faq .accordion-button:not(.collapsed)::after{
  width:22px;height:22px;transform:none;
  background-image:linear-gradient(var(--bs-primary),var(--bs-primary)),linear-gradient(var(--bs-primary),var(--bs-primary));
  background-position:center;background-repeat:no-repeat;background-size:18px 2px,2px 18px;
  transition:background-size .25s var(--kx-ease);
}
.kx-faq .accordion-button:not(.collapsed)::after{background-size:18px 2px,2px 0}
.kx-faq .accordion-body{padding:0 1.375rem 1.375rem;color:var(--bs-primary-color);max-width:96%;}

/* Apply form */
.kx-form{box-shadow:var(--kx-shadow-panel)}
.kx-form :is(.form-control,.form-select){background-color:#F7F6FB;border-color:var(--bs-border-color);border-radius:.7rem;padding-block:.75rem;transition:border-color .18s,background-color .18s,box-shadow .18s}
.kx-form :is(.form-control,.form-select):focus{background-color:#fff;border-color:var(--bs-primary);box-shadow:0 0 0 .2rem rgba(108,92,231,.15)}
.kx-form .form-control::placeholder{color:var(--bs-tertiary-color)}
.kx-form textarea{resize:vertical;min-height:5.5rem}

/* Motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kx-slide,.kx-btn-glow,.kx-learn,.kx-feed-row,.kx-faq .accordion-button::after{transition:none}
  .kx-live-dot,.kx-typing i{animation:none}
}

/* Partnership */
.kx-icobox{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:.7rem;background:#ffffff;border:1px solid var(--kx-violet-line);color:var(--bs-primary)}
.kx-icobox .bi{font-size:1rem;line-height:1}
.kx-icobox-xs{width:28px;height:28px;border-radius:.5rem}
.kx-icobox-sm{width:34px;height:34px;border-radius:.55rem}
.kx-icobox-md{width:40px;height:40px;border-radius:.7rem}
.kx-icobox-lg{width:54px;height:54px}
.kx-icobox-lg .bi{font-size:1.5rem}
.kx-cstat{background:var(--kx-soft);border-color:var(--kx-violet-line) !important}
.kx-cstat-n{font-family:var(--kx-display);font-weight:700;font-size:2rem;color:var(--bs-primary);letter-spacing:-.02em;}
.kx-calc{box-shadow:var(--kx-shadow-card)}
.kx-range{accent-color:var(--bs-primary)}
.kx-calc-out{background:#ffffff;border:1px solid var(--kx-violet-line);height:100%;display:flex;flex-direction:column;justify-content:center}
.kx-calc-big{font-family:var(--kx-display);font-weight:700;font-size:2.25rem;color:var(--bs-primary);letter-spacing:-.02em}

/* ── 3. Your additions go below ─────────────────────────────────────── */

.kx-calc .form-label span, .kx-calc-big, #calcMo, #calcYr, #calcMembersV, #calcPlanV { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.kx-calc .form-label { min-height: 20px; }
.kx-calc .form-label span:last-child { display: inline-block; min-width: 3.5ch; text-align: right; }
.kx-range.form-range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; padding: 0; margin: 0; background: transparent; }
.kx-range.form-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #e5e7eb; }
.kx-range.form-range::-moz-range-track { height: 6px; border-radius: 999px; background: #e5e7eb; }
.kx-range.form-range::-moz-range-progress { height: 6px; border-radius: 999px 0 0 999px; background: #e5e7eb; }
.kx-range.form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3b5bfd; border: 3px solid #ffffff; box-shadow: 0 0 0 1px rgba(59, 91, 253, .25), 0 1px 3px rgba(0, 0, 0, .15); margin-top: -6px; cursor: pointer; transition: box-shadow .15s ease; }
.kx-range.form-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #3b5bfd; border: 3px solid #ffffff; box-shadow: 0 0 0 1px rgba(59, 91, 253, .25), 0 1px 3px rgba(0, 0, 0, .15); cursor: pointer; }
.kx-range.form-range, .kx-range.form-range:focus, .kx-range.form-range:focus-visible, .kx-range.form-range::-moz-focus-inner { outline: none !important; outline-style: none !important; outline-width: 0 !important; box-shadow: none !important; border: none !important; border-style: none !important;}
.kx-range.form-range:focus::-webkit-slider-thumb, .kx-range.form-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(59, 91, 253, .18); }
.kx-range.form-range:focus::-moz-range-thumb, .kx-range.form-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(59, 91, 253, .18); }
.kx-range.form-range::-moz-range-track { outline: none !important; }
.kx-range.form-range:-moz-focusring { outline: none !important; }
.kx-calc-out { display: flex; flex-direction: column; justify-content: center; }
.kx-calc-big { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; color: #5b3df6; line-height: 1.1; white-space: nowrap; }

@media (max-width:768px) {
    .hero-banner{ padding:1.25rem 0.25rem;}
    .p-4 {padding: 1.25rem !important;}
    .kx-page .home-banner .kx-pill{ margin-bottom:35px; position:relative;}
    .hero-banner .badge.kx-pill:before{ right:inherit; left:0; top:52px;}
}
