/* Shared Kinden site styles: tokens, layout, header/footer, cards, motion. */
:root {
  --bg: #FFFFFF; --hero: #F1F3FB; --card: #FFFFFF; --line: #E4E7EE; --line-soft: #EEF0F4; --line-strong: #C9CEDA;
  --text: #1A1C22; --text-2: #4A5060; --muted: #545B69; --meta: #6B7180;
  --accent: #3B4CCA; --accent-hover: #2A3699; --on-accent: #FFFFFF; --ink: #1A1C22;
  --coral: #F06B54; --amber: #F2B33D; --amber-bar: #E0A12A; --green: #2BA58A; --green-ink: #1E7A66; --purple: #6E55D6;
  --review: #FFF7E6; --review-ring: #F6E3B8;
  --t-coral: #FDE9E5; --i-coral: #C8442E; --t-amber: #FDF1D8; --i-amber: #9A6A0A;
  --t-green: #DDF3EC; --i-green: #1E7A66; --t-purple: #ECE7FB; --i-purple: #5340B8;
  --t-blue: #E6E9F7; --i-blue: #3B4CCA; --t-grey: #EEF0F4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1116; --hero: #141821; --card: #171B23; --line: #262B35; --line-soft: #20252E; --line-strong: #3A404C;
    --text: #F3F1EC; --text-2: #C8CCD4; --muted: #A3A9B5; --meta: #A3A9B5;
    --accent: #FFC94D; --accent-hover: #FFD978; --on-accent: #1A1C22; --ink: #171B23;
    --green-ink: #5FD3B5; --review: #221E14; --review-ring: #3A3220;
    --t-coral: #3A221E; --i-coral: #FF9A86; --t-amber: #3A3020; --i-amber: #FFC94D;
    --t-green: #173329; --i-green: #5FD3B5; --t-purple: #2A2440; --i-purple: #B6A6F5;
    --t-blue: #20253D; --i-blue: #AEB8F2; --t-grey: #20252E;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1116; --hero: #141821; --card: #171B23; --line: #262B35; --line-soft: #20252E; --line-strong: #3A404C;
  --text: #F3F1EC; --text-2: #C8CCD4; --muted: #A3A9B5; --meta: #A3A9B5;
  --accent: #FFC94D; --accent-hover: #FFD978; --on-accent: #1A1C22; --ink: #171B23;
  --green-ink: #5FD3B5; --review: #221E14; --review-ring: #3A3220;
  --t-coral: #3A221E; --i-coral: #FF9A86; --t-amber: #3A3020; --i-amber: #FFC94D;
  --t-green: #173329; --i-green: #5FD3B5; --t-purple: #2A2440; --i-purple: #B6A6F5;
  --t-blue: #20253D; --i-blue: #AEB8F2; --t-grey: #20252E;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .logo { font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif; letter-spacing: -.02em; line-height: 1.05; color: var(--text); }
h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 8px 0 0; }
h3 { font-size: 22px; margin: 0 0 8px; }
a { color: var(--accent); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.top { display: flex; align-items: center; gap: 24px; padding-top: 24px; padding-bottom: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; color: var(--text); text-decoration: none; }
.dots { display: inline-grid; grid-template-columns: 10px 10px; gap: 3px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.dots i:nth-child(2) { background: var(--amber); }
.dots i:nth-child(3) { background: var(--green); }
.dots i:nth-child(4) { background: var(--purple); }
.dots.sm { grid-template-columns: 7px 7px; gap: 2px; }
.dots.sm i { width: 7px; height: 7px; }
.top nav { display: flex; gap: 28px; margin-left: auto; }
.top nav a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 15px; }
.top nav a:hover { color: var(--text); }
@media (max-width: 760px) { .top nav { display: none; } .top .pill { margin-left: auto; } }

.pill, .btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
.pill { background: var(--text); color: var(--bg); padding: 10px 20px; font-size: 15px; }
.btn { padding: 15px 26px; font-size: 16px; background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn.primary:hover { background: var(--accent-hover); }
.btn:hover { transform: translateY(-1px); }
.btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: k-pulse 2s infinite; }

.sec { padding: 112px 0 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 48px; }
.sec-head > p { max-width: 26em; color: var(--text-2); margin: 0; font-size: 18px; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.meta { font: 500 13px Inter, sans-serif; color: var(--meta); }
.k-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .k-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .k-grid3 { grid-template-columns: 1fr; } }
.k-card { background: var(--card); border-radius: 28px; padding: 32px; box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.k-card:not(.flat):hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -28px rgba(26,28,34,.3); }
.k-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.k-card p { color: var(--text-2); margin: 0; }
.ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 24px; }
.ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-coral { background: var(--t-coral); color: var(--i-coral); }
.t-amber { background: var(--t-amber); color: var(--i-amber); }
.t-green { background: var(--t-green); color: var(--i-green); }
.t-purple { background: var(--t-purple); color: var(--i-purple); }
.t-blue { background: var(--t-blue); color: var(--i-blue); }
.t-grey { background: var(--t-grey); }
.dark svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 64px; padding-bottom: 48px; margin-top: 112px; border-top: 1px solid var(--line); color: var(--meta); font-size: 15px; }
.foot span:last-child { margin-left: auto; }

@keyframes k-float { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-8px); } }
@keyframes k-marquee { to { transform: translateX(-50%); } }
@keyframes k-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@keyframes k-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes k-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes k-pulse { 0% { box-shadow: 0 0 0 0 rgba(43,165,138,.5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(43,165,138,0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}