/* ============================================================
   Koi marketing site. Matches the dashboard design language:
   warm paper, thin rules, mono numerals/labels, terracotta accent.
   ============================================================ */

:root {
  --bg:          #F2EDE2;
  --surface:     #FAF7EF;
  --surface-2:   #F6F1E5;
  --ink:         #251F15;
  --muted:       #7B7163;
  --line:        #D9D1BD;
  --line-soft:   #E5DECC;
  --accent:      #BC4B27;
  --accent-deep: #9C3B1B;
  --on-accent:   #FAF7EF;
  --green:       #4F7A52;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --maxw: 1120px;
}

[data-theme="dark"] {
  --bg:          #1A160F;
  --surface:     #221C13;
  --surface-2:   #1E1810;
  --ink:         #EDE6D6;
  --muted:       #9D9380;
  --line:        #3A3324;
  --line-soft:   #2D281D;
  --accent:      #D8693F;
  --accent-deep: #E07F58;
  --on-accent:   #1A160F;
  --green:       #7FA982;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; border-top: 1px solid var(--line); }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .ix { color: var(--muted); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 14px; }
h3 { font-size: 19px; }
.lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); max-width: 62ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* ── Logo stamp ── */
.stamp {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 2.5px solid var(--accent); border-radius: 5px; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 18px;
  transform: rotate(-4deg); user-select: none;
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand .wm { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
.brand .sub { font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { font-size: 14px; color: var(--muted); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-tools { display: flex; align-items: center; gap: 10px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: 4px; border: 1px solid var(--line);
  cursor: pointer; transition: transform .12s, filter .15s, background .15s, color .15s;
  background: transparent; color: var(--ink);
}
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { filter: brightness(1.06); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--lg { padding: 14px 24px; font-size: 15px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; filter: none; }

/* ── Language / theme toggles ── */
#lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#lang-toggle button {
  background: transparent; border: none; padding: 5px 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .5px;
  color: var(--muted); cursor: pointer;
}
#lang-toggle button.active { background: var(--accent); color: var(--on-accent); }
.icon-btn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Hero ── */
.hero { padding: 72px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5.2vw, 58px); margin: 18px 0 0; }
.hero .lead { margin-top: 20px; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust { margin-top: 26px; display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .4px; color: var(--muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .dot { color: var(--green); }

/* ── Mock: dashboard card ── */
.mock {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 24px 60px -32px rgba(37,31,21,.35); overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: inline-block; }
.mock-bar .mb-title { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-left: 8px; text-transform: uppercase; }
.mock-body { padding: 16px; }
.mock-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.mstat { background: var(--surface); padding: 12px 14px; }
.mstat .lab { font-family: var(--mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.mstat .val { font-family: var(--mono); font-weight: 600; font-size: 18px; margin-top: 4px; }
.mstat .val.neg { color: var(--accent); }
.mstat .val.pos { color: var(--green); }
.mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: 16px; padding: 0 2px; }
.mock-chart .bar { flex: 1; border-radius: 2px 2px 0 0; }
.mock-chart .bar.in { background: var(--green); opacity: .85; }
.mock-chart .bar.out { background: var(--accent); opacity: .8; }
.mock-cats { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.mock-cats .row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.mock-cats .row .nm { color: var(--ink); width: 120px; }
.mock-cats .row .track { flex: 1; height: 5px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.mock-cats .row .fill { height: 100%; background: var(--accent); border-radius: 3px; }
.mock-cats .row .pct { font-family: var(--mono); font-size: 10px; color: var(--muted); width: 34px; text-align: right; }

/* ── Real screenshot frames ── */
.shot {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface); box-shadow: 0 26px 64px -34px rgba(37,31,21,.45);
}
.shot img { display: block; width: 100%; height: auto; }

.hero-visual { position: relative; }
.hero-visual .shot img { max-height: 470px; object-fit: cover; object-position: top; }
.hero-visual .chat { position: absolute; left: -22px; bottom: -30px; width: 248px; box-shadow: 0 24px 54px -26px rgba(37,31,21,.55); }

/* ── Screenshot gallery ── */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 40px; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 12px; }
.gallery figcaption b { display: block; font-size: 15px; font-weight: 600; }
.gallery figcaption span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* ── Mock: WhatsApp chat ── */
.chat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; box-shadow: 0 18px 44px -30px rgba(37,31,21,.4); max-width: 330px;
}
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; }
.chat-head .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 14px; }
.chat-head .nm { font-weight: 600; font-size: 14px; }
.chat-head .st { font-size: 10px; color: var(--green); font-family: var(--mono); }
.bubble { max-width: 84%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.bubble.me { margin-left: auto; background: #DDF0D8; color: #1f3a1d; border-bottom-right-radius: 3px; }
[data-theme="dark"] .bubble.me { background: #2f4a2c; color: #d8ecd2; }
.bubble.bot { background: var(--surface-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 3px; }
.bubble .t { font-family: var(--mono); font-size: 9px; color: var(--muted); display: block; margin-top: 5px; text-align: right; }
.bubble .receipt { background: var(--bg); border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.bubble .receipt b { color: var(--ink); }
.bubble.bot .ttl { font-weight: 700; }
.bubble.bot .li { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; }
.bubble.bot .li .cat { color: var(--accent); }

/* ── Privacy band ── */
/* The band is always a dark surface (dark ink in light mode, near-black in dark
   mode), so its text must be a fixed light tone — not var(--bg), which flips. */
.band { background: var(--ink); color: #EFE9DB; border: none; }
.band h2 { color: #F6F1E6; }
.band .lead { color: rgba(239,233,219,.74); }
.band .eyebrow { color: var(--accent); }
[data-theme="dark"] .band { background: #100D08; }
.band-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.band-points .pt .h { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.band-points .pt p { color: rgba(239,233,219,.66); font-size: 14px; margin: 8px 0 0; }

/* ── Privacy band: copy + illustration ── */
.band-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.band-figure { background: var(--surface); border-radius: 12px; padding: 7px; box-shadow: 0 26px 60px -34px rgba(0,0,0,.55); }
.band-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.band-grid .band-points { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }

/* ── "A closer look": alternating rows ── */
.closer { display: flex; flex-direction: column; gap: 60px; margin-top: 48px; }
.closer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.closer-row.flip .closer-art { order: 2; }
.closer-art { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: 0 22px 54px -34px rgba(37,31,21,.42); }
.closer-art img { display: block; width: 100%; height: auto; }
.closer-text .tagk { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.closer-text h3 { font-size: clamp(21px, 2.4vw, 26px); margin-top: 12px; }
.closer-text p { color: var(--muted); margin-top: 12px; font-size: 16px; }

/* ── Koi: large faint background, closing the page on the FAQ ── */
#faq { position: relative; overflow: hidden; }
#faq .wrap { position: relative; z-index: 1; }
.faq-koi {
  position: absolute; left: 50%; bottom: -6%;
  transform: translateX(-50%);
  width: min(1040px, 118%); height: auto;
  opacity: .09; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
}
[data-theme="dark"] .faq-koi { mix-blend-mode: screen; opacity: .10; }

/* ── WhatsApp section: group highlight + screenshot filmstrip ── */
.wa-highlight {
  display: flex; gap: 22px; align-items: flex-start; margin-top: 40px;
  padding: 28px 30px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px;
  box-shadow: 0 22px 54px -38px rgba(37,31,21,.4);
}
.wa-highlight-ic { font-size: 38px; line-height: 1; flex-shrink: 0; }
.wa-highlight-text .tagk { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.wa-highlight-text h3 { font-size: clamp(20px, 2.4vw, 25px); margin-top: 8px; }
.wa-highlight-text p { color: var(--muted); margin-top: 10px; font-size: 15.5px; max-width: 72ch; }

.wa-strip {
  display: flex; gap: 26px; margin-top: 34px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-padding: 4px;
  padding: 6px 4px 20px; -webkit-overflow-scrolling: touch;
}
.wa-strip::-webkit-scrollbar { height: 8px; }
.wa-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.wa-strip::-webkit-scrollbar-track { background: transparent; }
.wa-phone { flex: 0 0 auto; scroll-snap-align: center; margin: 0;
  display: flex; flex-direction: column; align-items: center; }
.wa-phone .frame {
  height: 560px; background: #0e0e0e; border-radius: 30px; padding: 9px;
  box-shadow: 0 28px 60px -30px rgba(37,31,21,.55); outline: 1px solid var(--line);
}
.wa-phone .frame img { height: 100%; width: auto; display: block; border-radius: 22px; background: #fff; }
.wa-phone figcaption { margin-top: 14px; max-width: 260px; text-align: center; }
.wa-phone figcaption b { display: block; font-size: 14.5px; font-weight: 600; }
.wa-phone figcaption span { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.wa-hint { text-align: center; color: var(--muted); font-size: 11.5px; letter-spacing: .4px; margin-top: 2px; }

/* ── Download background motif ── */
#download { position: relative; overflow: hidden; }
#download .dl-motif { position: absolute; right: -50px; bottom: -40px; width: 440px; max-width: 55%; opacity: .13; pointer-events: none; z-index: 0; }
#download .wrap { position: relative; z-index: 1; }

/* ── Feature grid ── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 40px; }
.feat {
  background: var(--surface); padding: 26px 24px; transition: background .15s;
}
.feat:hover { background: var(--surface-2); }
.feat .ic { font-size: 22px; }
.feat h3 { margin-top: 12px; }
.feat p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ── Steps ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.step { position: relative; padding-top: 18px; border-top: 2px solid var(--accent); }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 1px; }
.step h3 { margin-top: 10px; }
.step p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ── Why / value props ── */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 40px; }
.why { background: var(--surface); padding: 24px; display: flex; gap: 16px; }
.why .ic { font-size: 20px; }
.why h3 { font-size: 17px; }
.why p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }

/* ── Download ── */
.dl-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 40px; text-align: center; margin-top: 40px; }
.dl-card h2 { margin-bottom: 10px; }
.dl-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.store {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 22px; min-width: 210px;
  transition: transform .12s, border-color .15s; background: var(--surface-2); text-align: left;
}
.store:hover { transform: translateY(-2px); border-color: var(--accent); }
.store .k { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.store .v { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.store .badge { font-family: var(--mono); font-size: 9px; padding: 2px 7px; border-radius: 20px; background: var(--line-soft); color: var(--muted); letter-spacing: .5px; }
.store.live .v { color: var(--accent); }
.dl-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 22px; letter-spacing: .3px; }

/* ── FAQ ── */
.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

/* ── Footer ── */
.footer { border-top: 1px solid var(--line); padding: 40px 0; }
.footer-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer .muted { font-size: 13px; }
.footer-links { margin-left: auto; display: flex; gap: 20px; font-size: 13px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .feat-grid, .band-points, .steps, .why-grid, .gallery { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; gap: 32px; }
  .closer-row { grid-template-columns: 1fr; gap: 24px; }
  .closer-row.flip .closer-art { order: 0; }
  #download .dl-motif { opacity: .08; }
  .nav-links { display: none; }
  .chat { margin: 0 auto; }
  .hero-visual .chat { position: static; width: 100%; left: 0; bottom: 0; margin: 18px auto 0; }
  .hero-visual .shot img { max-height: none; }
  .section { padding: 60px 0; }
  .wa-phone .frame { height: 500px; }
}
@media (max-width: 560px) {
  .mock-stats { grid-template-columns: 1fr 1fr; }
  .dl-card { padding: 26px 18px; }
  .wa-highlight { flex-direction: column; gap: 14px; padding: 22px; }
  .wa-strip { gap: 18px; }
  .wa-phone .frame { height: 430px; }
  .faq-koi { width: 150%; opacity: .07; }
  /* Tidy the header into one compact row on phones */
  .wrap.nav { padding: 0 16px; }
  .nav { gap: 10px; }
  .nav-tools { margin-left: auto; }
  .brand { gap: 9px; }
  .brand .sub { display: none; }
  .brand .wm { font-size: 16px; }
  .nav-tools { gap: 6px; }
  #lang-toggle button { padding: 5px 7px; }
  .icon-btn { width: 30px; height: 30px; }
  .nav-tools .btn--accent { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}

/* Reveal-on-scroll (progressive enhancement) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Lightbox: click screenshots to zoom for a closer look ── */
.gallery .shot img, .wa-phone .frame img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(20,16,10,.9); backdrop-filter: blur(4px); cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 96vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); cursor: default;
}
.lightbox .lb-close {
  position: fixed; top: 16px; right: 22px; z-index: 1;
  background: none; border: none; color: #fff; opacity: .8;
  font-family: var(--sans); font-size: 32px; line-height: 1; cursor: pointer;
}
.lightbox .lb-close:hover { opacity: 1; }
.lightbox .lb-hint {
  position: fixed; left: 0; right: 0; bottom: 16px; text-align: center;
  color: rgba(255,255,255,.6); font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
}

/* ── Under the hood (technical section) ── */
.tech-stack { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tech-stack span {
  font-family: var(--mono); font-size: 12px; letter-spacing: .3px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px;
}
.tech-diagram { margin: 36px 0 0; }
.tech-diagram .diagram-scroll {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: 22px; overflow-x: auto; box-shadow: 0 22px 54px -38px rgba(37,31,21,.4);
}
.tech-diagram svg { width: 100%; min-width: 680px; height: auto; display: block; }
.tech-diagram figcaption { color: var(--muted); font-size: 13.5px; margin-top: 12px; text-align: center; }
/* diagram theming (drives the inline SVG via the page's design tokens) */
#tech .adbox { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
#tech .adext { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
#tech .adapi { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
#tech .adbound { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .7; }
#tech .adt { fill: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 15px; }
#tech .ads { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
#tech .adlabel { fill: var(--accent); font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; }
#tech .adarrow { stroke: var(--muted); stroke-width: 1.6; fill: none; }
#tech .addash { stroke: var(--accent); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4; }
#tech .adhead { fill: var(--muted); }
#tech .adhead-a { fill: var(--accent); }
.tech-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 36px;
}
.tech { background: var(--surface); padding: 24px; }
.tech .ic { font-size: 20px; }
.tech h3 { margin-top: 12px; font-size: 17px; }
.tech p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.tech code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 6px; color: var(--ink); }

/* ── Motion: staggered reveal for grids (feels alive without being noisy) ── */
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: .06s; }
.stagger.in > *:nth-child(3) { transition-delay: .12s; }
.stagger.in > *:nth-child(4) { transition-delay: .18s; }
.stagger.in > *:nth-child(5) { transition-delay: .24s; }
.stagger.in > *:nth-child(6) { transition-delay: .30s; }
.stagger.in > *:nth-child(7) { transition-delay: .36s; }
.stagger.in > *:nth-child(8) { transition-delay: .42s; }
.stagger.in > *:nth-child(9) { transition-delay: .48s; }

/* ── Hover micro-interactions ── */
.feat, .why, .tech { transition: background .15s ease, box-shadow .2s ease; }
.why:hover, .tech:hover { background: var(--surface-2); }
.feat .ic, .why .ic, .tech .ic { display: inline-block; transition: transform .2s ease; }
.feat:hover .ic, .why:hover .ic, .tech:hover .ic { transform: scale(1.18) rotate(-4deg); }
.gallery figure .shot, .closer-art, .wa-phone .frame { transition: transform .25s ease, box-shadow .25s ease; }
.gallery figure:hover .shot, .closer-art:hover, .wa-phone:hover .frame {
  transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(37,31,21,.5);
}
.tech-stack span { transition: border-color .15s ease, color .15s ease, transform .15s ease; }
.tech-stack span:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ── Architecture diagram: animate the outbound vision-model link ── */
@keyframes ad-flow { to { stroke-dashoffset: -18; } }
#tech .addash { animation: ad-flow 1.1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1; transform: none; transition: none; }
  #tech .addash { animation: none; }
  .feat:hover .ic, .why:hover .ic, .tech:hover .ic,
  .gallery figure:hover .shot, .closer-art:hover, .wa-phone:hover .frame,
  .tech-stack span:hover { transform: none; }
}

/* ── Under the hood on phones: a horizontal swipe row beats 3 cramped columns.
   (Placed last so it overrides the base .tech-grid 3-column rule.) ── */
@media (max-width: 720px) {
  .tech-grid {
    display: flex; gap: 14px; background: transparent; border: none; border-radius: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px;
    -webkit-overflow-scrolling: touch;
  }
  .tech-grid::-webkit-scrollbar { height: 8px; }
  .tech-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
  .tech-grid::-webkit-scrollbar-track { background: transparent; }
  .tech {
    flex: 0 0 80%; scroll-snap-align: start;
    border: 1px solid var(--line); border-radius: 10px;
  }
}