:root {
  --kb-ink: #12213f;
  --kb-blue: #2563eb;
  --kb-indigo: #4f46e5;
  --kb-cyan: #06b6d4;
  --kb-yellow: #fbbf24;
  --kb-mint: #10b981;
  --kb-coral: #fb7185;
  --kb-surface: rgba(255, 255, 255, 0.86);
  --kb-border: rgba(62, 97, 161, 0.14);
  --kb-shadow: 0 20px 60px rgba(37, 99, 235, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  color: var(--kb-ink);
  background:
    radial-gradient(circle at 8% 8%, rgba(125, 211, 252, .3), transparent 25rem),
    radial-gradient(circle at 92% 14%, rgba(196, 181, 253, .25), transparent 25rem),
    linear-gradient(145deg, #f8fbff 0%, #f4f7ff 47%, #fffdf7 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
  z-index: -1;
}
body::before { width: 19rem; height: 19rem; right: -8rem; top: 38%; background: rgba(251, 191, 36, .08); }
body::after { width: 15rem; height: 15rem; left: -6rem; bottom: 4%; background: rgba(6, 182, 212, .08); }

a, button, input, select, textarea { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, opacity .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28) !important;
  outline-offset: 3px;
}
button:not(:disabled):active, a:active { transform: scale(.98); }
button:disabled { cursor: not-allowed; opacity: .55; }

.kb-glass,
.bg-surface-container-lowest {
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border);
  box-shadow: var(--kb-shadow);
  backdrop-filter: blur(16px);
}

.kb-brand {
  background: linear-gradient(115deg, var(--kb-blue), var(--kb-indigo) 52%, var(--kb-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.045em;
}

.kb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.36), transparent 14rem),
    linear-gradient(135deg, #2563eb, #4f46e5 58%, #06b6d4);
  color: white;
  box-shadow: 0 28px 75px rgba(55, 78, 185, .24);
}
.kb-hero::before {
  content: '';
  position: absolute;
  inset: auto -4rem -7rem auto;
  width: 19rem;
  height: 19rem;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  z-index: -1;
}
.kb-hero::after {
  content: '✦';
  position: absolute;
  right: 8%;
  top: 9%;
  font-size: 2rem;
  color: #fde68a;
  animation: kb-float 3.6s ease-in-out infinite;
}

.kb-card {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  box-shadow: var(--kb-shadow);
  backdrop-filter: blur(16px);
  border-radius: 1.6rem;
}
.kb-card-lift:hover { transform: translateY(-5px); box-shadow: 0 25px 65px rgba(37, 99, 235, .17); }

.kb-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .55rem .9rem;
  backdrop-filter: blur(10px);
}

.kb-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  color: white;
  font-weight: 800;
  background: linear-gradient(120deg, var(--kb-blue), var(--kb-indigo));
  box-shadow: 0 12px 27px rgba(37, 99, 235, .26);
}
.kb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(37, 99, 235, .34); }
.kb-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  color: #244783;
  font-weight: 800;
  background: #e9f2ff;
  border: 1px solid #d6e6ff;
}

.kb-field {
  width: 100%;
  min-height: 3.25rem;
  border: 1.5px solid #d7e2f5 !important;
  border-radius: 1rem !important;
  background: rgba(255,255,255,.9) !important;
  color: var(--kb-ink);
  padding: .75rem 1rem !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02);
}
.kb-field:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 4px rgba(59,130,246,.1) !important; }

.kb-status-dot { width: .62rem; height: .62rem; border-radius: 50%; display: inline-block; background: #94a3b8; }
.kb-status-dot.online { background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.kb-status-dot.offline { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.12); }

.kb-orb {
  display: grid;
  place-items: center;
  border-radius: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px rgba(37,99,235,.18);
}

.kb-toast { animation: kb-toast-in .28s cubic-bezier(.2,.8,.2,1); }
.kb-pop { animation: kb-pop .45s cubic-bezier(.2,.85,.25,1.25); }
.kb-float { animation: kb-float 3.8s ease-in-out infinite; }

aside {
  background: rgba(247, 250, 255, .9) !important;
  border-color: rgba(62, 97, 161, .12) !important;
  backdrop-filter: blur(18px);
}
aside nav a:hover { transform: translateX(3px); }

@keyframes kb-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes kb-pop { 0% { transform: scale(.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes kb-toast-in { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

@media (max-width: 767px) {
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
  .kb-hero { border-radius: 1.7rem !important; }
  .kb-mobile-nav {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    padding: .65rem;
    border: 1px solid var(--kb-border);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.93);
    box-shadow: 0 18px 45px rgba(20, 49, 102, .2);
    backdrop-filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}