/* ============================================================
   ksktech.dev — the Koffer page, on top of site.css.

   Two modes, decided by an inline script before first paint:
     html.kf-gl     the 3D story. Chapters are tall and pinned, the devices
                    are drawn on a fixed canvas (koffer/scene.js).
     (no class)     no WebGL, reduced motion or no JS. Chapters are normal
                    sections with static framed screenshots beside the text.
   The static version is a real page, not an error state.
   Brand: plum #2B1846 / #D9C6EC, cream #F6EEF9, apricot #FF9466.
   ============================================================ */

.kf {
  --kf-accent: #FF9466;
  --kf-plum: #D9C6EC;
  --kf-badge-ink: #FFB593;
  --kf-badge-bg: rgba(255,148,102,.12);
  --kf-badge-edge: rgba(255,148,102,.42);
  --kf-glow: rgba(122,76,192,.16);
}
[data-theme="light"] .kf {
  --kf-accent: #B84F1E;
  --kf-plum: #2B1846;
  --kf-badge-ink: #2B1846;
  --kf-badge-bg: rgba(43,24,70,.07);
  --kf-badge-edge: rgba(43,24,70,.28);
  --kf-glow: rgba(122,76,192,.09);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.kf { overflow-x: clip; }
.kf .scrim::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 75% 30%, var(--kf-glow), transparent 70%); }

/* ---- the badge ---- */
.kf-invite, .badge-invite {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kf-badge-ink); background: var(--kf-badge-bg);
  border: 1px solid var(--kf-badge-edge); border-radius: var(--r-pill); padding: 6px 12px 6px 10px;
}
.kf-invite svg { width: 13px; height: 13px; flex: none; }

/* ---- canvas ---- */
#kf-canvas { display: none; }
.kf-gl #kf-canvas {
  display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease;
}
.kf-gl.kf-ready #kf-canvas { opacity: 1; transition: none; }

/* ---- type ---- */
.kf-h1 { font-size: clamp(42px, 6.2vw, 88px); line-height: .98; font-weight: 600; letter-spacing: -.035em;
         color: var(--t-100); max-width: 12ch; }
.kf-h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; color: var(--t-100); }
.kf-p { margin-top: 20px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--t-62); }
.kf-sec { max-width: 16ch; margin-bottom: clamp(36px, 5vw, 64px); }

/* ---- hero ---- */
.kf-hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 120px 0 80px; }
.kf-hero-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; }
.kf-hero-text { max-width: 620px; }
.kf-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 28px; }
.kf-id img { width: 52px; height: 52px; border-radius: 13px; }
.kf-name { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--t-100); }
.kf-hero .lead { margin-top: 24px; max-width: 540px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- static device frames (the fallback, and the gallery) ---- */
.kf-phone, .kf-tablet {
  position: relative; flex: none; background: #0b0a0e; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 70px rgba(10,5,20,.45);
}
.kf-phone { width: 250px; aspect-ratio: 9 / 20; border-radius: 30px; padding: 6px; }
.kf-tablet { width: 640px; aspect-ratio: 16 / 10; border-radius: 22px; padding: 7px; }
.kf-phone img, .kf-tablet img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.kf-phone img { border-radius: 24px; }
.kf-tablet img { border-radius: 15px; }
.kf-l { display: none !important; }
[data-theme="light"] .kf-d { display: none !important; }
[data-theme="light"] .kf-l { display: block !important; }

.kf-fig { display: flex; justify-content: center; align-items: center; margin: 0; perspective: 1400px; }
.kf-fig .kf-phone { transform: rotateY(-12deg) rotateX(3deg); }
.kf-fig-wide .kf-tablet { width: 100%; max-width: 640px; height: auto; transform: rotateY(-8deg) rotateX(3deg); }
.kf-fig-hero { position: relative; min-height: 520px; }
.kf-fig-hero .kf-back { position: absolute; transform: translateX(-34%) translateZ(-120px) rotateY(16deg); opacity: .78; }
.kf-fig-hero .kf-phone:not(.kf-back) { transform: translateX(22%) rotateY(-14deg) rotateX(3deg); }

/* ---- chapters: static layout ---- */
.kf-ch { padding: clamp(50px, 8vh, 90px) 0; }
.kf-ch-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.kf-right .kf-ch-text { order: 2; }
.kf-close .kf-ch-in { grid-template-columns: minmax(0, 620px); }
.kf-ch-text .eyebrow { color: var(--kf-badge-ink); }

/* ---- chapters: 3D story ---- */
.kf-gl .kf-fig:not(.kf-fig-hero) { display: none; }
.kf-gl.kf-ready .kf-fig-hero { visibility: hidden; }
.kf-gl .kf-hero-text { opacity: var(--kf-o, 1); }
.kf-gl .kf-hero { opacity: 1; }
.kf-gl .kf-ch { height: 210vh; padding: 0; }
.kf-gl .kf-ch-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.kf-gl .kf-ch-pin > .wrap { width: 100%; }
.kf-gl .kf-ch-in { display: block; }
.kf-gl .kf-ch-text { max-width: 440px; opacity: var(--kf-o, 0); will-change: opacity; }
.kf-gl .kf-right .kf-ch-text { margin-left: auto; }
.kf-gl .kf-narrow .kf-ch-text { max-width: 330px; }

/* ---- features ---- */
.kf-features { position: relative; }
.kf-gl .kf-features { padding-top: clamp(60px, 10vh, 120px); }
.kf-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-grid); grid-auto-flow: dense; }
.kf-tile { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 2.2vw, 30px); overflow: hidden; min-width: 0; }
.kf-tile h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -.02em; color: var(--t-100); }
.kf-tile p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--t-58); }
.kf-crop { margin-top: auto; border-radius: var(--r-inset); overflow: hidden; border: 1px solid var(--hair); }
.kf-crop img { display: block; width: 100%; height: auto; }
.kf-crop-tall { max-height: 300px; }
.kf-t-net { grid-column: span 3; }
.kf-t-donut { grid-column: span 3; }
.kf-t-metals { grid-column: span 2; }
.kf-t-budget { grid-column: span 2; grid-row: span 2; }
.kf-t-budget .kf-crop-tall { max-height: none; }
.kf-t-in { grid-column: span 2; }
.kf-t-bills { grid-column: span 2; }
.kf-t-lock { grid-column: span 2; }
.kf-t-theme { grid-column: span 6; flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 44px); }
.kf-t-theme .kf-tile-text { flex: 0 0 min(280px, 32%); order: -1; }
.kf-t-theme .kf-split { flex: 0 1 460px; min-width: 0; height: 280px; margin-left: auto; order: 2; }

.kf-coins { display: flex; padding: 8px 0 6px; }
.kf-coins i {
  display: grid; place-items: center; width: 74px; height: 74px; margin-right: -14px; border-radius: 50%;
  font-family: var(--mono); font-style: normal; font-size: 15px; font-weight: 700;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.3), inset 0 -8px 14px rgba(0,0,0,.2), 0 10px 22px rgba(0,0,0,.28);
}
.kf-coins .au { background: linear-gradient(145deg, #F5D67B, #B98A1F 70%); color: #4A3405; }
.kf-coins .ag { background: linear-gradient(145deg, #F2F3F5, #9EA2AB 70%); color: #33363C; }
.kf-coins .pt { background: linear-gradient(145deg, #DFE4EA, #7E8791 70%); color: #23272C; }

.kf-rows { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.kf-rows li { padding-top: 14px; border-top: 1px solid var(--hair); }
.kf-rows b { display: block; font-size: 15px; font-weight: 600; color: var(--t-100); }
.kf-rows span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--t-58); }
.kf-spark { width: 34px; height: 34px; color: var(--kf-accent); }

.kf-split { position: relative; height: 210px; border-radius: var(--r-inset); overflow: hidden; border: 1px solid var(--hair); }
.kf-split img { position: absolute; inset: 0; width: 100%; height: auto; display: block; }
.kf-split img + img { clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }

/* ---- gallery: scrolls inside itself, never the page ---- */
.kf-strip {
  display: flex; align-items: center; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 16px max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x))) 40px;
  scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent;
}
.kf-strip > * { scroll-snap-align: center; }
.kf-strip .kf-phone { width: 240px; }
.kf-strip .kf-tablet { width: min(620px, 80vw); }
.kf-note { margin-top: 4px; }

/* ---- privacy ---- */
.kf-private .glass-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.kf-private .kf-sec { margin-bottom: 14px; }
.kf-promises { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.kf-promises > div { padding-top: 16px; border-top: 1px solid var(--hair-strong); }
.kf-promises h3 { font-size: 18px; font-weight: 600; letter-spacing: -.015em; color: var(--t-100); }
.kf-promises p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--t-58); }

.foot-left { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* ---- tablet ---- */
@media (max-width: 980px) {
  .kf-t-net, .kf-t-donut { grid-column: span 3; }
  .kf-t-metals, .kf-t-in, .kf-t-bills { grid-column: span 3; }
  .kf-t-lock, .kf-t-theme { grid-column: span 6; }
  .kf-t-budget { grid-column: span 3; grid-row: auto; }
}

/* ---- phone ---- */
@media (max-width: 720px) {
  .kf-bento { grid-template-columns: minmax(0, 1fr); }
  .kf-bento > * { grid-column: auto !important; }
  .kf-t-theme { flex-direction: column; align-items: stretch; }
  .kf-t-theme .kf-tile-text { flex: none; order: 0; }
  .kf-t-theme .kf-split { flex: none; height: 210px; width: 100%; }
  .kf-promises { grid-template-columns: minmax(0, 1fr); }
  .kf-hero-in, .kf-ch-in { grid-template-columns: minmax(0, 1fr); }
  .kf-right .kf-ch-text { order: 0; }
  .kf-hero { padding: 104px 0 56px; align-items: flex-start; }
  .kf-fig-hero { min-height: 470px; }
  .kf-fig .kf-phone { width: 210px; }
  .kf-fig-hero .kf-back { transform: translateX(-30%) translateZ(-120px) rotateY(16deg); }
  .kf-fig-hero .kf-phone:not(.kf-back) { transform: translateX(18%) rotateY(-12deg) rotateX(3deg); }
  .kf-strip .kf-phone { width: 200px; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* Portrait 3D story: device above, text in a glass card below it. Also applies to
   portrait tablets, where the canvas uses the same stacked poses. */
@media (max-aspect-ratio: 19/20) {
  .kf-gl .kf-hero { align-items: flex-start; padding-top: 96px; }
  .kf-gl .kf-hero-in { display: block; }
  .kf-gl .kf-hero .kf-fig-hero { position: absolute; left: 0; right: 0; bottom: 20px; min-height: 0; height: 36vh; }
  .kf-gl .kf-hero .kf-phone { width: 130px; }
  .kf-gl .kf-ch-pin { align-items: flex-end; padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .kf-gl .kf-ch-text, .kf-gl .kf-narrow .kf-ch-text {
    max-width: 560px; margin: 0 auto !important; padding: 20px 22px; border-radius: var(--r-card);
    background: var(--glass-header); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--hair);
  }
  .kf-gl .kf-ch-text .eyebrow { margin-bottom: 8px; }
  .kf-gl .kf-h2 { font-size: clamp(25px, 7vw, 40px); }
  .kf-gl .kf-p { margin-top: 10px; font-size: 15px; }
  .kf-gl .kf-features .kf-h2, .kf-gl .kf-gallery .kf-h2, .kf-gl .kf-private .kf-h2 { font-size: clamp(32px, 9vw, 52px); }
}

/* Anchor targets clear the fixed nav. */
#features, #screens, #private { scroll-margin-top: 84px; }

/* Cash flow: the big Sankey (static SVG; the flows wipe in on reveal). */
.kf-flow, .kf-ai { position: relative; }
.kf-flow-lead { max-width: 58ch; margin: 0 0 clamp(24px, 3vw, 40px); }
.kf-sk { padding: clamp(18px, 2.6vw, 38px); }
.kf-sk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: clamp(18px, 2.2vw, 28px); margin-bottom: clamp(18px, 2.2vw, 28px); border-bottom: 1px solid var(--hair); }
.kf-sk-stats span { display: block; font-size: 13px; color: var(--t-58); }
.kf-sk-stats b { display: block; margin-top: 4px; font-size: clamp(18px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--t-100); }
.kf-sk-stats .up { color: #2FCB7E; } .kf-sk-stats .dn { color: #E5484D; }
.kf-sk svg { display: block; width: 100%; height: auto; overflow: visible; clip-path: inset(-2% 100% -2% -2%); transition: clip-path 1.8s cubic-bezier(.22,.7,.2,1) .25s; }
.kf-sk.in svg { clip-path: inset(-2% -2% -2% -2%); }
html.no-js .kf-sk svg { clip-path: none; }
.kf-sk-n { display: none !important; }
.kf-sk .lk { fill-opacity: .3; transition: fill-opacity .2s; }
.kf-sk .lk:hover { fill-opacity: .62; }
.kf-sk text { font-size: 15px; pointer-events: none; }
.kf-sk .n { fill: var(--t-100); font-weight: 600; }
.kf-sk .v { fill: var(--t-62); font-family: var(--mono); font-size: 12.5px; }
.kf-foot-note { margin-top: 14px; font-size: 13px; color: var(--t-58); }
@media (prefers-reduced-motion: reduce) { .kf-sk svg { clip-path: none; transition: none; } }

/* The assistant: copy beside an example chat. */
.kf-ai-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.kf-ai-rows { margin-top: 26px; }
.kf-chat-fig { margin: 0; min-width: 0; }
.kf-chat { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.2vw, 28px); }
.kf-chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); color: var(--t-100); }
.kf-chat-head .kf-spark { width: 22px; height: 22px; margin: 0; }
.kf-chat-head b { font-size: 16px; font-weight: 600; }
.kf-b { margin: 0; max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; color: var(--t-100); }
.kf-b b { font-weight: 600; }
.kf-me { align-self: flex-end; background: color-mix(in srgb, #7A4CC0 26%, transparent); border-bottom-right-radius: 5px; }
.kf-ai-b { align-self: flex-start; background: color-mix(in srgb, var(--t-100) 7%, transparent); border-bottom-left-radius: 5px; }
.kf-chat-input { margin-top: 6px; padding: 12px 18px; border: 1px solid var(--hair-strong); border-radius: 24px; font-size: 14px; color: var(--t-58); }
.kf-chat-fig .kf-b { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.kf-chat-fig.in .kf-b { opacity: 1; transform: none; }
.kf-chat-fig.in .kf-b:nth-of-type(2) { transition-delay: .5s; }
.kf-chat-fig.in .kf-b:nth-of-type(3) { transition-delay: 1.1s; }
.kf-chat-fig.in .kf-b:nth-of-type(4) { transition-delay: 1.6s; }
html.no-js .kf-chat-fig .kf-b { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kf-chat-fig .kf-b { opacity: 1; transform: none; transition: none; } }

@media (max-width: 980px) { .kf-ai-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .kf-sk-w { display: none !important; }
  .kf-sk-n { display: block !important; }
  .kf-sk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kf-sk text { font-size: 13px; }
  .kf-sk .v { font-size: 11.5px; }
}