/* ===========================================================
   KLASKART — shared design system
   Modern, premium, light. Bootstrap 5 overrides + components.
   =========================================================== */

:root{
  --ink:#0E1626;
  --ink-soft:#55607A;
  --bg:#FFFFFF;
  --bg-soft:#F4F6FA;
  --bg-tint:#E9EEF7;
  --line:#E1E7F1;
  --brand:#1E3A6E;
  --brand-d:#0E1B3A;
  --brand-2:#AEC2E6;
  --brand-grad:linear-gradient(135deg,#284B85 0%,#1E3A6E 55%,#0E1B3A 100%);
  --ink-grad:linear-gradient(135deg,#16213F 0%,#0E1626 100%);
  --ok:#16B981;
  --radius:18px;
  --shadow-s:0 2px 10px rgba(14,22,38,.06);
  --shadow-m:0 18px 50px rgba(16,34,79,.12);
  --shadow-l:0 30px 80px rgba(16,34,79,.16);
  --maxw:1160px;
}

*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  letter-spacing:-.02em;
  font-weight:700;
}
a{ text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

.container-cc{ max-width:var(--maxw); margin:0 auto; padding-left:22px; padding-right:22px; }
.section{ padding:96px 0; }
.section-sm{ padding:64px 0; }
.bg-soft{ background:var(--bg-soft); }
.bg-ink{ background:var(--ink); color:#fff; }
.ink-soft{ color:var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:16px;
}
.eyebrow.on-dark{ color:var(--brand-2); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); }

.h-xl{ font-size:clamp(38px,5vw,62px); line-height:1.04; }
.h-lg{ font-size:clamp(30px,3.6vw,44px); line-height:1.1; }
.lead{ font-size:clamp(17px,1.4vw,20px); color:var(--ink-soft); }
.text-grad{
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn-cc{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  line-height:1;
}
.btn-cc:active{ transform:translateY(1px); }
.btn-brand{ background:var(--brand-grad); color:#fff; box-shadow:0 12px 30px rgba(16,34,79,.32); }
.btn-brand:hover{ color:#fff; box-shadow:0 16px 40px rgba(16,34,79,.42); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ color:#fff; opacity:.92; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn-ghost-d{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-ghost-d:hover{ color:#fff; background:rgba(255,255,255,.12); }
.btn-sm{ padding:10px 18px; font-size:14.5px; }
.btn-lg{ padding:17px 32px; font-size:17px; }
.btn-block{ width:100%; }

/* ---------- navbar ---------- */
.nav-cc{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-cc .navbar-brand img{ height:26px; width:auto; display:block; }
.nav-cc .nav-link{ color:var(--ink-soft)!important; font-weight:600; font-size:15.5px; padding:8px 14px!important; }
.nav-cc .nav-link:hover,.nav-cc .nav-link.active{ color:var(--ink)!important; }
.nav-cc .navbar-toggler{ border:1px solid var(--line); padding:7px 9px; }
.nav-cc .navbar-toggler:focus{ box-shadow:none; }

/* ---------- cards ---------- */
.card-cc{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-s); transition:transform .2s ease, box-shadow .2s ease;
}
.card-cc.hov:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.ic-box{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:24px; background:var(--bg-tint); color:var(--brand);
}
.ic-box.grad{ background:var(--brand-grad); color:#fff; box-shadow:0 10px 24px rgba(16,34,79,.3); }

/* numbered step */
.step-num{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  background:var(--brand-grad); color:#fff; box-shadow:0 8px 20px rgba(16,34,79,.3);
}

/* pill chip */
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px;
  background:var(--bg-tint); color:var(--brand); font-weight:600; font-size:13.5px;
}
.chip-line{ background:#fff; border:1px solid var(--line); color:var(--ink-soft); }

/* ---------- pricing ---------- */
.plan{ position:relative; padding:34px 30px; }
.plan .price{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:46px; letter-spacing:-.02em; }
.plan .per{ color:var(--ink-soft); font-weight:600; font-size:16px; }
.plan.popular{ border-color:transparent; box-shadow:var(--shadow-l); background:#fff; }
.plan.popular::before{
  content:""; position:absolute; inset:-2px; border-radius:calc(var(--radius) + 2px); padding:2px;
  background:var(--brand-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.plan .feat{ display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; color:var(--ink-soft); font-size:15px; }
.plan .feat i{ color:var(--ok); margin-top:3px; font-size:15px; }
.tag-pop{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--brand-grad); color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.06em;
  padding:7px 16px; border-radius:999px; box-shadow:0 8px 20px rgba(16,34,79,.35);
}

/* billing toggle */
.bill-toggle{ display:inline-flex; background:var(--bg-tint); border-radius:999px; padding:5px; gap:4px; }
.bill-toggle button{ border:0; background:transparent; font-weight:700; font-size:14.5px; color:var(--ink-soft); padding:9px 18px; border-radius:999px; cursor:pointer; }
.bill-toggle button.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-s); }
.save-badge{ background:#E7FBF3; color:#0E8A63; font-weight:700; font-size:12px; padding:3px 9px; border-radius:999px; margin-left:6px; }

/* ---------- phone preview ---------- */
.phone{
  width:300px; border-radius:42px; background:#0e0f1d; padding:11px;
  box-shadow:var(--shadow-l), 0 0 0 1px rgba(16,34,79,.12);
}
.phone-screen{ background:#fff; border-radius:32px; overflow:hidden; }

/* digital profile card */
.profile-cover{ height:120px; background:var(--brand-grad); }
.profile-av{
  width:96px; height:96px; border-radius:50%; border:4px solid #fff; object-fit:cover; background:#dfe0ef;
  margin-top:-52px; box-shadow:var(--shadow-s);
}
.prof-action{
  display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; font-size:15px;
  transition:border-color .15s, background .15s;
}
.prof-action:hover{ border-color:var(--brand); color:var(--ink); }
.prof-action .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex:0 0 auto; }

/* QR */
.qr-wrap{ display:inline-flex; padding:16px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-s); }
.qr-wrap canvas,.qr-wrap img{ display:block; border-radius:8px; }

/* compare table */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; }
.cmp th,.cmp td{ padding:18px 18px; border-bottom:1px solid var(--line); font-size:15.5px; }
.cmp thead th{ font-family:'Space Grotesk',sans-serif; }
.cmp td.klas{ background:rgba(16,34,79,.05); font-weight:600; color:var(--ink); }
.cmp td.center,.cmp th.center{ text-align:center; }
.cmp .x{ color:#C2C4D6; }
.cmp .v{ color:var(--ok); }

/* footer */
.footer{ background:var(--ink); color:#cfd0e4; }
.footer a{ color:#cfd0e4; opacity:.82; }
.footer a:hover{ opacity:1; color:#fff; }
.footer img{ height:24px; }
.footer h6{ color:#fff; letter-spacing:.1em; font-size:12.5px; text-transform:uppercase; opacity:.7; }

/* form panel */
.field-label{ font-weight:700; font-size:14px; margin-bottom:7px; color:var(--ink); }
.form-control-cc{
  width:100%; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px;
  background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.form-control-cc:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(16,34,79,.12); }
textarea.form-control-cc{ resize:vertical; min-height:90px; }

/* modern select (no native chrome) */
select.form-control-cc{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%231E3A6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:14px;
  padding-right:38px !important; cursor:pointer; background-color:#fff;
}
select.form-control-cc::-ms-expand{ display:none; }
select.form-control-cc:hover{ border-color:#C3CEE3; }
select.form-control-cc option{ color:var(--ink); background:#fff; }

/* custom dropdown (replaces native select option list) */
.kk-select{ position:relative; }
.kk-select.block{ display:block; width:100%; }
.kk-select.inline{ display:inline-block; }
.kk-select-btn{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; }
.kk-select-btn .kk-select-val{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kk-select-btn .kk-select-arr{ flex:0 0 auto; color:var(--brand); transition:transform .2s; font-size:13px; }
.kk-select.open .kk-select-btn .kk-select-arr{ transform:rotate(180deg); }
.kk-select.open .kk-select-btn{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(16,34,79,.12); }
.kk-select-panel{ position:absolute; z-index:1200; top:calc(100% + 6px); left:0; right:0; min-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(16,34,79,.16);
  padding:6px; max-height:260px; overflow-y:auto; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s, transform .15s; }
.kk-select.open .kk-select-panel{ opacity:1; transform:translateY(0); pointer-events:auto; }
.kk-select.up .kk-select-panel{ top:auto; bottom:calc(100% + 6px); }
.kk-select-opt{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:9px; font-size:14.5px; color:var(--ink); cursor:pointer; white-space:nowrap; }
.kk-select-opt:hover{ background:var(--bg-tint); }
.kk-select-opt.sel{ background:var(--brand); color:#fff; }
.kk-select-opt .kk-tick{ margin-left:auto; opacity:0; font-size:13px; }
.kk-select-opt.sel .kk-tick{ opacity:1; }
.panel-aside{ position:sticky; top:90px; }
.color-dot{ width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.color-dot.on{ box-shadow:0 0 0 2px var(--brand); }

/* misc */
.divider{ height:1px; background:var(--line); border:0; }
.glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0; }
.stat-num{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,3vw,38px); }
.accordion-cc .item{ border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden; background:#fff; }
.accordion-cc .head{ padding:20px 22px; cursor:pointer; display:flex; justify-content:space-between; gap:14px; font-weight:700; font-size:16.5px; }
.accordion-cc .head .pm{ color:var(--brand); font-size:24px; transition:transform .2s; flex:0 0 auto; }
.accordion-cc .item.open .head .pm{ transform:rotate(45deg); }
.accordion-cc .body{ padding:0 22px; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; color:var(--ink-soft); font-size:15.5px; }
.accordion-cc .item.open .body{ padding:0 22px 22px; max-height:340px; }

@media (max-width:991px){ .section{ padding:72px 0; } .panel-aside{ position:static; } }

/* ===== admin shell (shared) ===== */
.admin{ display:flex; min-height:100vh; }
.side{ width:248px; flex:0 0 auto; background:var(--ink); color:#cfd6e6; padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.side .logo{ height:22px; margin:8px 10px 18px; }
.side a{ display:flex; align-items:center; gap:11px; color:#9aa6c2; padding:10px 12px; border-radius:10px; font-size:14.5px; font-weight:600; margin-bottom:2px; text-decoration:none; }
.side a:hover{ background:rgba(255,255,255,.05); color:#fff; }
.side a.on{ background:var(--brand); color:#fff; }
.side .grp{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#6b7693; margin:16px 12px 6px; }
.admin .main{ flex:1 1 auto; min-width:0; }
.topbar{ background:#fff; border-bottom:1px solid var(--line); padding:14px 26px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; }
.topbar .search{ flex:1; max-width:360px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:9px 14px; display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.topbar .search input{ border:0; background:transparent; outline:none; width:100%; font-size:14px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.kpi .ic{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; }
.up{ color:var(--ok); font-weight:700; font-size:13px; }
.dn{ color:#E0533D; font-weight:700; font-size:13px; }
.bar{ width:100%; background:var(--brand-grad); border-radius:6px 6px 0 0; }
table.adm{ width:100%; border-collapse:separate; border-spacing:0; }
table.adm th{ text-align:left; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.adm td{ padding:13px 14px; border-bottom:1px solid var(--line); font-size:14px; }
table.adm tbody tr:hover{ background:var(--bg-soft); }
.pill{ padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; display:inline-block; }
.adm-mobtop{ display:none; }
@media(max-width:860px){ .side{ display:none; } .adm-mobtop{ display:flex; } }