/* ==========================================================================
   Koydam LLC — design system
   Layered on top of Bootstrap 5.3. Everything here is either a token, a
   Bootstrap variable override, or a small component the framework lacks.
   Load order: bootstrap.min.css → koydam.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces — slate undertones, never pure grey */
  --kd-bg:          #ffffff;
  --kd-surface:     #f8fafc;
  --kd-surface-2:   #f1f5f9;

  /* Type */
  --kd-ink:         #0b1220;
  --kd-ink-2:       #334155;
  --kd-muted:       #64748b;
  --kd-faint:       #94a3b8;

  /* Lines */
  --kd-line:        #e6eaf0;
  --kd-line-strong: #cfd6e0;

  /* Brand accent — modern indigo */
  --kd-accent:      #4f46e5;
  --kd-accent-ink:  #4338ca;
  --kd-accent-soft: #eef2ff;

  /* Feedback */
  --kd-ok:          #059669;
  --kd-warn:        #b45309;
  --kd-danger:      #dc2626;

  /* Geometry */
  --kd-radius:      14px;
  --kd-radius-sm:   10px;
  --kd-radius-lg:   20px;
  --kd-shadow:      0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
  --kd-shadow-lift: 0 2px 4px rgba(15, 23, 42, .04), 0 18px 40px -18px rgba(15, 23, 42, .22);

  /* Motion — one curve, one duration, used everywhere */
  --kd-ease:        cubic-bezier(.22, .61, .36, 1);
  --kd-fast:        .18s;
  --kd-slow:        .32s;

  /* Rhythm */
  --kd-section-y:   clamp(4.5rem, 9vw, 8rem);

  /* ---- Bootstrap variable overrides ---- */
  --bs-body-bg: var(--kd-bg);
  --bs-body-color: var(--kd-ink-2);
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-border-color: var(--kd-line);
  --bs-border-radius: var(--kd-radius);
  --bs-primary: var(--kd-accent);
  --bs-link-color: var(--kd-accent);
  --bs-link-hover-color: var(--kd-accent-ink);
  --bs-emphasis-color: var(--kd-ink);
  --bs-secondary-color: var(--kd-muted);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  background: var(--kd-bg);
  color: var(--kd-ink-2);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .kd-display {
  color: var(--kd-ink);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.18;
}

/* Fluid display sizes — no media queries needed for headings */
.kd-display   { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -0.038em; line-height: 1.06; font-weight: 640; }
.kd-h2        { font-size: clamp(1.75rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; }
.kd-h3        { font-size: clamp(1.15rem, 1.7vw, 1.35rem); letter-spacing: -0.018em; }

.kd-lead {
  font-size: clamp(1.02rem, 1.35vw, 1.175rem);
  line-height: 1.65;
  color: var(--kd-muted);
  max-width: 60ch;
}

.kd-muted  { color: var(--kd-muted) !important; }
.kd-faint  { color: var(--kd-faint) !important; }
.kd-ink    { color: var(--kd-ink) !important; }
.kd-mono   { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; }

/* Small caps label used above section headings */
.kd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kd-accent);
}
.kd-eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: .55;
}

a { text-decoration: none; transition: color var(--kd-fast) var(--kd-ease); }

:focus-visible {
  outline: 2px solid var(--kd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--kd-accent); color: #fff; }

/* Lucide renders inline <svg>; keep every icon optically aligned with text */
.lucide, [data-lucide] {
  width: 1.05em; height: 1.05em;
  stroke-width: 1.75;
  vertical-align: -0.16em;
  flex: none;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.kd-section      { padding-block: var(--kd-section-y); }
.kd-section-tight{ padding-block: clamp(3rem, 6vw, 5rem); }
.kd-surface      { background: var(--kd-surface); }
.kd-rule-t       { border-top: 1px solid var(--kd-line); }
.kd-rule-b       { border-bottom: 1px solid var(--kd-line); }
.kd-container    { max-width: 1180px; }

/* Faint dot grid, used behind the hero only */
.kd-grid-bg {
  position: relative;
  background-image: radial-gradient(circle at 1px 1px, var(--kd-line-strong) 1px, transparent 0);
  background-size: 28px 28px;
}
.kd-grid-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.94) 62%, var(--kd-bg) 100%);
  pointer-events: none;
}
.kd-grid-bg > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.kd-navbar {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--kd-fast) var(--kd-ease), background var(--kd-fast) var(--kd-ease);
}
.kd-navbar.is-stuck {
  border-bottom-color: var(--kd-line);
  background: rgba(255, 255, 255, .92);
}
.kd-navbar .navbar-brand {
  color: var(--kd-ink);
  font-weight: 650;
  letter-spacing: -0.03em;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* Brand mark — the Koydam glyph (transparent PNG, dark artwork).
   Sized by height so the tight crop keeps its own aspect ratio.
   It stands alone in the header and footer, so it carries the accessible
   name for the link (alt="Koydam LLC") and runs slightly larger than it
   would beside a wordmark. */
.kd-brand-mark {
  height: 32px;
  width: auto;
  display: block;
  flex: none;
  transition: opacity var(--kd-fast) var(--kd-ease);
}
.navbar-brand:hover .kd-brand-mark { opacity: .72; }
.kd-brand-mark-lg { height: 40px; }

/* Full lockup (glyph + KOYDAM wordmark) for login / hero-scale use */
.kd-lockup { height: 64px; width: auto; display: block; }
.kd-navbar .nav-link {
  color: var(--kd-muted);
  font-size: .925rem;
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 8px;
  transition: color var(--kd-fast) var(--kd-ease), background var(--kd-fast) var(--kd-ease);
}
.kd-navbar .nav-link:hover   { color: var(--kd-ink); background: var(--kd-surface-2); }
.kd-navbar .nav-link.active  { color: var(--kd-ink); font-weight: 560; }

.kd-navbar .navbar-toggler {
  border: 1px solid var(--kd-line);
  border-radius: 10px;
  padding: .35rem .5rem;
  color: var(--kd-ink);
}
.kd-navbar .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .kd-navbar .navbar-collapse {
    border-top: 1px solid var(--kd-line);
    margin-top: .75rem;
    padding-top: .75rem;
  }
  .kd-navbar .nav-link { padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-y: .58rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-font-size: .925rem;
  --bs-btn-font-weight: 550;
  --bs-btn-border-radius: 10px;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform var(--kd-fast) var(--kd-ease),
              background-color var(--kd-fast) var(--kd-ease),
              border-color var(--kd-fast) var(--kd-ease),
              box-shadow var(--kd-fast) var(--kd-ease),
              color var(--kd-fast) var(--kd-ease);
}
.btn:active { transform: translateY(1px); }

.btn-kd {                       /* primary — ink, not accent: quieter, sharper */
  background: var(--kd-ink);
  border: 1px solid var(--kd-ink);
  color: #fff;
}
.btn-kd:hover, .btn-kd:focus-visible {
  background: #1c2740;
  border-color: #1c2740;
  color: #fff;
  box-shadow: var(--kd-shadow);
}

.btn-kd-accent {
  background: var(--kd-accent);
  border: 1px solid var(--kd-accent);
  color: #fff;
}
.btn-kd-accent:hover, .btn-kd-accent:focus-visible {
  background: var(--kd-accent-ink);
  border-color: var(--kd-accent-ink);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(79, 70, 229, .7);
}

.btn-kd-outline {
  background: #fff;
  border: 1px solid var(--kd-line-strong);
  color: var(--kd-ink);
}
.btn-kd-outline:hover, .btn-kd-outline:focus-visible {
  background: var(--kd-surface);
  border-color: var(--kd-ink);
  color: var(--kd-ink);
}

.btn-kd-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--kd-muted);
}
.btn-kd-ghost:hover { background: var(--kd-surface-2); color: var(--kd-ink); }

.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .85rem; }
.btn-lg { --bs-btn-padding-y: .78rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; }

/* Arrow nudge on hover for "learn more" style links */
.kd-arrow-link {
  color: var(--kd-ink);
  font-weight: 550;
  font-size: .925rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.kd-arrow-link .lucide { transition: transform var(--kd-fast) var(--kd-ease); }
.kd-arrow-link:hover { color: var(--kd-accent); }
.kd-arrow-link:hover .lucide { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   6. Cards & surfaces
   -------------------------------------------------------------------------- */
.kd-card {
  background: #fff;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius);
  transition: border-color var(--kd-slow) var(--kd-ease),
              box-shadow var(--kd-slow) var(--kd-ease),
              transform var(--kd-slow) var(--kd-ease);
}
.kd-card-hover:hover {
  border-color: var(--kd-line-strong);
  box-shadow: var(--kd-shadow-lift);
  transform: translateY(-3px);
}

/* Service card: icon tile + copy + bullet list */
.kd-service-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-accent-soft);
  color: var(--kd-accent);
  border: 1px solid rgba(79, 70, 229, .14);
}
.kd-service-icon .lucide { width: 20px; height: 20px; }

.kd-tick-list { list-style: none; padding: 0; margin: 0; }
.kd-tick-list li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--kd-muted);
  padding-block: .2rem;
}
.kd-tick-list li .lucide { color: var(--kd-accent); margin-top: .28em; width: 15px; height: 15px; }

/* App card */
.kd-app-icon {
  width: 56px; height: 56px;
  border-radius: 13px;
  object-fit: cover;
  border: 1px solid var(--kd-line);
  background: var(--kd-surface-2);
  flex: none;
}
.kd-app-icon-fallback {
  display: grid; place-items: center;
  font-weight: 650;
  font-size: 1.15rem;
  color: var(--kd-ink);
  letter-spacing: -0.03em;
}

/* Platform / meta chip */
.kd-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: .01em;
  padding: .22rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--kd-line);
  background: var(--kd-surface);
  color: var(--kd-muted);
  white-space: nowrap;
}
.kd-tag .lucide { width: 12px; height: 12px; }
.kd-tag-accent { background: var(--kd-accent-soft); border-color: rgba(79,70,229,.16); color: var(--kd-accent-ink); }
.kd-tag-ok     { background: #ecfdf5; border-color: #a7f3d0; color: var(--kd-ok); }
.kd-tag-warn   { background: #fffbeb; border-color: #fde68a; color: var(--kd-warn); }

/* Filter pills on the apps page */
.kd-filter {
  border: 1px solid var(--kd-line);
  background: #fff;
  color: var(--kd-muted);
  border-radius: 999px;
  padding: .42rem .95rem;
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--kd-fast) var(--kd-ease);
}
.kd-filter:hover { border-color: var(--kd-line-strong); color: var(--kd-ink); }
.kd-filter.is-active { background: var(--kd-ink); border-color: var(--kd-ink); color: #fff; }

/* Store badges */
.kd-store {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--kd-line-strong);
  border-radius: 11px;
  padding: .5rem .9rem;
  background: #fff;
  color: var(--kd-ink);
  transition: all var(--kd-fast) var(--kd-ease);
}
.kd-store:hover { background: var(--kd-ink); border-color: var(--kd-ink); color: #fff; box-shadow: var(--kd-shadow); }
.kd-store .lucide { width: 20px; height: 20px; }
.kd-store small { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .62; line-height: 1.2; }
.kd-store strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }

/* Stats strip */
.kd-stat-value { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 640; letter-spacing: -0.035em; color: var(--kd-ink); }
.kd-stat-label { font-size: .82rem; color: var(--kd-faint); letter-spacing: .02em; }

/* Numbered process steps */
.kd-step-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem;
  color: var(--kd-accent);
  letter-spacing: .08em;
}

/* Logo / trust row */
.kd-logo-strip { filter: grayscale(1); opacity: .5; transition: opacity var(--kd-slow) var(--kd-ease); }
.kd-logo-strip:hover { opacity: .8; }

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-size: .82rem;
  font-weight: 550;
  color: var(--kd-ink);
  margin-bottom: .35rem;
  letter-spacing: -0.005em;
}
.form-control, .form-select {
  border: 1px solid var(--kd-line-strong);
  border-radius: var(--kd-radius-sm);
  padding: .62rem .8rem;
  font-size: .925rem;
  color: var(--kd-ink);
  background-color: #fff;
  transition: border-color var(--kd-fast) var(--kd-ease), box-shadow var(--kd-fast) var(--kd-ease);
}
.form-control::placeholder { color: var(--kd-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--kd-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .13);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--kd-danger); }
.form-check-input:checked { background-color: var(--kd-accent); border-color: var(--kd-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(79, 70, 229, .13); border-color: var(--kd-accent); }
.form-text { font-size: .78rem; color: var(--kd-faint); }
.invalid-feedback { font-size: .78rem; }

/* Honeypot — hidden from humans, reachable by bots */
.kd-hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   8. Prose (legal pages, app descriptions)
   -------------------------------------------------------------------------- */
.kd-prose { color: var(--kd-ink-2); font-size: 1rem; line-height: 1.75; max-width: 72ch; }
.kd-prose h2 { font-size: 1.2rem; margin: 2.4rem 0 .7rem; letter-spacing: -0.02em; }
.kd-prose h2:first-child { margin-top: 0; }
.kd-prose h3 { font-size: 1.02rem; margin: 1.7rem 0 .5rem; }
.kd-prose p { margin-bottom: 1rem; }
.kd-prose ul, .kd-prose ol { padding-left: 1.15rem; margin-bottom: 1.1rem; }
.kd-prose li { margin-bottom: .4rem; }
.kd-prose a { color: var(--kd-accent); text-decoration: underline; text-underline-offset: 3px; }
.kd-prose strong { color: var(--kd-ink); font-weight: 600; }
.kd-prose hr { border-color: var(--kd-line); margin: 2rem 0; }

/* Tables inside legal documents (data-practice summaries, sub-processor lists).
   Wrapped so a wide table scrolls itself instead of the page. */
.kd-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.6rem;
  font-size: .875rem;
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.kd-prose thead { background: var(--kd-surface); }
.kd-prose th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kd-faint);
  font-weight: 600;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--kd-line-strong);
  white-space: nowrap;
}
.kd-prose td {
  padding: .62rem .75rem;
  border-bottom: 1px solid var(--kd-line);
  vertical-align: top;
  min-width: 120px;
}
.kd-prose tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   9. App detail — screenshot gallery
   -------------------------------------------------------------------------- */
.kd-shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}
.kd-shots::-webkit-scrollbar { height: 6px; }
.kd-shots::-webkit-scrollbar-thumb { background: var(--kd-line-strong); border-radius: 99px; }
.kd-shot {
  flex: 0 0 auto;
  width: min(258px, 62vw);
  scroll-snap-align: start;
  border: 1px solid var(--kd-line);
  border-radius: var(--kd-radius);
  background: var(--kd-surface-2);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--kd-fast) var(--kd-ease), transform var(--kd-fast) var(--kd-ease);
}
.kd-shot:hover { border-color: var(--kd-line-strong); transform: translateY(-2px); }
.kd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Definition-style metadata rows */
.kd-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem 0;
  border-bottom: 1px solid var(--kd-line);
  font-size: .875rem;
}
.kd-meta-row:last-child { border-bottom: 0; }
.kd-meta-row dt { color: var(--kd-faint); font-weight: 450; }
.kd-meta-row dd { color: var(--kd-ink); font-weight: 550; margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.kd-footer { background: var(--kd-surface); border-top: 1px solid var(--kd-line); }
.kd-footer a { color: var(--kd-muted); font-size: .9rem; }
.kd-footer a:hover { color: var(--kd-ink); }
.kd-footer h6 {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kd-faint);
  font-weight: 600;
  margin-bottom: .9rem;
}
.kd-social {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--kd-line);
  border-radius: 9px;
  background: #fff;
  color: var(--kd-muted);
  transition: all var(--kd-fast) var(--kd-ease);
}
.kd-social:hover { border-color: var(--kd-ink); color: var(--kd-ink); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */
.kd-skeleton {
  background: linear-gradient(90deg, var(--kd-surface-2) 25%, #e9eef5 37%, var(--kd-surface-2) 63%);
  background-size: 400% 100%;
  animation: kd-shimmer 1.3s ease infinite;
  border-radius: var(--kd-radius-sm);
}
@keyframes kd-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Scroll-in reveal — opt in with .kd-reveal, activated by js/koydam.js */
.kd-reveal { opacity: 0; transform: translateY(14px); }
.kd-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .55s var(--kd-ease), transform .55s var(--kd-ease);
}

.kd-divider-dot { width: 3px; height: 3px; border-radius: 99px; background: var(--kd-line-strong); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .kd-reveal { opacity: 1; transform: none; }
}