/* Kanaka site · shared base: tokens, type system, nav, the AI character, footer, the Kanaka assistant. Used by every page. */
:root {
  --paper: #F3EFE9; --ink: #141313; --soft: #5E5853; --dim: rgba(20,19,19,.5); --line: rgba(20,19,19,.12);
  --cherry: #D2042D; --tint: #FBE4E9; --green: #1DB97A; --card: #fff;
  --sans: 'Archivo', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
#grid { position: fixed; inset: 0; z-index: -2; background-image: radial-gradient(rgba(20,19,19,.07) 1.3px, transparent 1.5px); background-size: 40px 40px; }
#light { position: fixed; z-index: -1; width: 1100px; height: 1100px; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)); will-change: transform; }

/* ── type system (film v6 rules) ─────────────────────────────────────── */
.eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cherry); }
.eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--cherry); }
.head { font-weight: 500; letter-spacing: -.036em; line-height: 1.02; font-size: clamp(42px, 6.2vw, 92px); }
.head em { font-style: normal; color: var(--cherry); display: block; }
.h2 { font-size: clamp(34px, 4.4vw, 64px); }
.sub { color: var(--soft); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; max-width: 34em; }
.demo { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.copy { display: flex; flex-direction: column; gap: 26px; }
/* words slide up from behind an edge, never blur in */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); }
.in .w > span { transform: none; }
.fade { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.in .fade, .fade.in { opacity: 1; transform: none; }

.pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 14px; padding: 16px 28px 16px 30px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 500; box-shadow: 0 16px 40px rgba(20,19,19,.18); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--cherry); box-shadow: 0 0 0 4px rgba(210,4,45,.25); }
.pill:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(20,19,19,.22); }
.ghost { font-size: 16px; font-weight: 500; padding: 16px 6px; border-bottom: 1px solid var(--line); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 80px rgba(70,40,40,.10), 0 2px 6px rgba(70,40,40,.05); }
.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }

/* ── the AI, as a character ──────────────────────────────────────────── */
.bot { position: relative; border-radius: 28%; background: linear-gradient(160deg, #fff, #E9E4DE); border: 1px solid rgba(20,19,19,.1);
  box-shadow: 0 24px 60px rgba(70,40,40,.16), inset 0 2px 0 #fff; flex: none; }
.bot .face { position: absolute; left: 20%; top: 27%; width: 60%; height: 34%; border-radius: 30% / 42%; background: var(--ink); overflow: hidden; }
.bot .eye { position: absolute; top: 22%; width: 13%; height: 56%; border-radius: 999px; background: #fff; transition: border-radius .25s; }
.bot .eye:first-child { left: 28%; } .bot .eye:last-child { left: 59%; }
.bot .led { position: absolute; left: 44%; bottom: 13%; width: 12%; height: 4%; border-radius: 9px; background: var(--green); opacity: .9; }

/* ── nav ─────────────────────────────────────────────────────────────── */
nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 56px);
  transition: background .5s, box-shadow .5s; }
nav.solid { background: rgba(243,239,233,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 16px; }
#mark { width: 66px; height: 33px; overflow: visible; }
#name { font-weight: 600; font-size: 13px; letter-spacing: .42em; text-transform: uppercase; white-space: nowrap; }
.links { display: flex; align-items: center; gap: 38px; font-size: 15px; color: var(--soft); }
.links a:not(.pill):hover { color: var(--ink); }
.links .pill { padding: 11px 20px 11px 22px; font-size: 14px; box-shadow: none; }
#intro { position: fixed; z-index: 60; overflow: visible; transform-origin: 0 0; pointer-events: none; }

section { position: relative; padding: 0 clamp(20px, 6vw, 96px); }
.wrap { max-width: 1320px; margin: 0 auto; }

footer { padding: 34px clamp(20px, 6vw, 96px); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-top: 1px solid var(--line); }

/* ── companion (the AI rides along) ──────────────────────────────────── */
/* Kanaka assistant: canoe launcher, teaser line, chat panel (assets/kanaka-chat.js) */
#kchat { position: fixed; z-index: 70; right: 26px; bottom: 26px; display: flex; align-items: flex-end; gap: 12px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
#kchat.show, #kchat.open { opacity: 1; transform: none; pointer-events: auto; }
#kc-open { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 16px 40px rgba(70,40,40,.16); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .3s var(--ease); flex: none; }
#kc-open:hover { transform: translateY(-2px); } #kc-open svg { width: 38px; }
#kc-teaser { max-width: 240px; padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(70,40,40,.12); font-size: 13px; line-height: 1.4; cursor: pointer; transition: opacity .3s; }
#kchat.open #kc-teaser { display: none; }
#kc-teaser.kc-off { opacity: 0 !important; pointer-events: none; }
#kc-panel { position: absolute; right: 0; bottom: 78px; width: 380px; height: min(560px, calc(100vh - 200px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 100px rgba(40,20,20,.22);
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: 100% 100%; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); overflow: hidden; }
#kchat.open #kc-panel { opacity: 1; transform: none; pointer-events: auto; }
.kc-hdr { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px 18px; border-bottom: 1px solid rgba(20,19,19,.07); }
.kc-hdr div { flex: 1; display: flex; flex-direction: column; gap: 2px; } .kc-hdr b { font-size: 15px; font-weight: 600; }
.kc-hdr span:not(.kc-av) { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.kc-av { width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; } .kc-av svg { width: 26px; }
#kc-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F4F1ED; font-size: 20px; line-height: 1; cursor: pointer; color: var(--soft); }
#kc-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kc-m { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; animation: kcIn .35s var(--ease); }
.kc-m.kc-bot { background: #F1EEEA; border-bottom-left-radius: 5px; } .kc-m.me { align-self: flex-end; background: var(--cherry); color: #fff; border-bottom-right-radius: 5px; }
.kc-m.kc-chips, .kc-m.kc-act { max-width: 100%; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.kc-chips button { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(210,4,45,.3); background: #fff; color: var(--ink); font: 500 12.5px var(--sans); cursor: pointer; }
.kc-chips button:hover { background: var(--tint); }
.kc-act .pill { padding: 11px 18px 11px 20px; font-size: 13.5px; box-shadow: none; } .kc-act .ghost { padding: 6px 2px; font-size: 13.5px; }
.kc-typing { display: flex; gap: 4px; } .kc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); animation: kcDot 1s infinite; }
.kc-typing i:nth-child(2) { animation-delay: .15s; } .kc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kcDot { 50% { opacity: .25; transform: translateY(-2px); } } @keyframes kcIn { from { opacity: 0; transform: translateY(6px); } }
#kc-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(20,19,19,.07); }
#kc-in { flex: 1; height: 44px; border-radius: 22px; border: 0; background: #F4F1ED; padding: 0 16px; font: 14px var(--sans); color: var(--ink); outline: none; }
#kc-in:focus { box-shadow: 0 0 0 2px rgba(210,4,45,.25); }
#kc-form button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 18px; cursor: pointer; }

@media (max-width: 1000px) { .links a:not(.pill):not([href*="how-it-works"]) { display: none; } .links { gap: 18px; } #kc-teaser { display: none; } }
@media (max-width: 640px) { #name { display: none; } #kchat { right: 14px; bottom: 14px; } #kc-panel { width: calc(100vw - 28px); } }
html.rm .w > span, html.rm .fade { transition: none; }
html.rm .kc-typing i, html.rm .kc-m { animation: none; }