/* ==========================================================================
   AiTrendz home page (index.html only). One block per section, in page order.
   Colours, type, space and motion come from --at-* tokens only.
   ========================================================================== */

/* ---------- Shared home primitives ---------- */
.page-home main { overflow-x: clip; }
.sec { padding: var(--at-space-9) 0 var(--at-space-6); }
.sec h2 { font-size: var(--at-text-3xl); letter-spacing: var(--at-tracking-display); line-height: 1.02; margin: 0; max-width: 16ch; }
.sec h3 { font-size: var(--at-text-lg); margin: 0 0 var(--at-space-2); }
.muted { color: var(--at-color-muted); }
.sec-head { display: grid; gap: var(--at-space-4); margin-bottom: var(--at-space-6); align-items: end; }
.sec-lede { margin: 0; color: var(--at-color-muted); max-width: 30rem; }
.eyebrow-line { display: flex; align-items: center; gap: var(--at-space-3); margin: 0 0 var(--at-space-4); font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-primary); }
.eyebrow-line::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
.eyebrow-accent { color: var(--at-color-accent); }
.mono-k { margin: 0; font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); }
.caption { margin: 0; font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-muted); }
.caption b { color: var(--at-color-warning); font-weight: var(--at-weight-semibold); }
.ex, .soon { display: inline-flex; align-items: center; padding: 2px var(--at-space-2); font-family: var(--at-font-mono); font-size: 0.6875rem; letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-warning); border: 1px solid currentColor; border-radius: var(--at-radius-sm); white-space: nowrap; }
.soon { color: var(--at-color-primary); }
.ph { color: var(--at-color-placeholder-text); }
.link { display: inline-flex; align-items: center; gap: var(--at-space-2); min-height: var(--at-tap-min); font-weight: var(--at-weight-semibold); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link .arr { transition: transform var(--at-duration-fast) var(--at-ease-out); }
.link:hover .arr { transform: translateX(3px); }
.btn-lg { min-height: 3.25rem; padding: 0 var(--at-space-5); border-radius: var(--at-radius-lg); }
.btn-ghost { background: transparent; color: var(--at-color-text); border-color: var(--at-color-border-strong); }
.btn-ghost:hover { border-color: var(--at-color-text); }
.panel { background: var(--at-gradient-panel); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); padding: var(--at-space-5); margin: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--at-space-3); margin-bottom: var(--at-space-4); }
.panel-head h3 { font-size: var(--at-text-base); margin-bottom: var(--at-space-1); }
.reveal-ready .reveal { transition-delay: calc(var(--i, 0) * 60ms); }
@media (min-width: 60rem) {
  .sec-head { grid-template-columns: 1.4fr 1fr; }
  .sec-head .sec-lede { justify-self: end; }
  .sec-head-link { grid-template-columns: 1fr auto; }
}

/* ---------- SECTION: hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--at-header-height) + var(--at-space-6)) 0 var(--at-space-5); background: var(--at-gradient-page); border-bottom: 1px solid var(--at-color-border); }
.hero-grid-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--at-color-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--at-color-grid-line) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, var(--at-color-mask-solid), transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, var(--at-color-mask-solid), transparent 70%); }
.hero-content { position: relative; z-index: 2; }
.hero-pill { display: inline-flex; align-items: center; gap: var(--at-space-2); margin: 0 0 var(--at-space-5); padding: var(--at-space-1) var(--at-space-3); font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-primary); background: var(--at-color-primary-soft); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-pill); }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--at-color-primary); box-shadow: var(--at-glow-primary-sm); }
.hero h1 { font-size: var(--at-text-hero); letter-spacing: var(--at-tracking-display); line-height: 1.02; margin: 0 0 var(--at-space-5); max-width: 12ch; }
.hl { display: block; }
.hl-si { background: var(--at-gradient-signal); -webkit-background-clip: text; background-clip: text; color: var(--at-color-primary); -webkit-text-fill-color: transparent; }
.hero-lede { font-size: var(--at-text-lg); color: var(--at-color-muted); max-width: 33rem; margin: 0 0 var(--at-space-6); }
.hero-lede strong { color: var(--at-color-text); font-weight: var(--at-weight-semibold); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--at-space-3); }
.hero-visual { position: relative; z-index: 1; width: 100%; aspect-ratio: 920 / 980; margin-top: var(--at-space-5); pointer-events: none; }
.hero-poster, .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-canvas { opacity: 0; transition: opacity var(--at-duration-slow) var(--at-ease-out); }
.hero-visual.is-live .hero-canvas { opacity: 1; }
.hero-visual.is-live .poster-net { opacity: 0; }
.poster-net { transition: opacity var(--at-duration-slow) var(--at-ease-out); }
.pd { fill: var(--at-color-primary); opacity: 0.55; }
.pd-si { fill: var(--at-color-accent); }
.pl { stroke: var(--at-color-chart-link); stroke-width: 0.8; }
.pl-si { stroke: var(--at-color-chart-link-si); }
.stop-primary { stop-color: var(--at-color-primary); }
.stop-violet { stop-color: var(--at-color-node-4); }
.stop-accent { stop-color: var(--at-color-accent); }
.stop-accent-glow { stop-color: var(--at-color-accent); stop-opacity: 0.35; }
.stop-accent-none { stop-color: var(--at-color-accent); stop-opacity: 0; }
.hero-horizon { stroke: var(--at-color-accent); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.8; }
.hero-svg-label { font-family: var(--at-font-mono); font-size: 13px; letter-spacing: 0.14em; }
.label-accent { fill: var(--at-color-accent); }
.label-muted { fill: var(--at-color-muted); }
.hero-line { fill: none; stroke: url(#hero-stroke); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: hero-draw var(--at-duration-draw) var(--at-ease-out) both; }
.hn { fill: var(--at-color-text); stroke: var(--at-color-primary); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: hero-node 400ms var(--at-ease-out) both; }
.hn-4, .hn-5 { stroke: var(--at-color-node-4); } .hn-6 { stroke: var(--at-color-node-5); } .hn-7 { stroke: var(--at-color-accent); fill: var(--at-color-accent); }
.hn-1 { animation-delay: 100ms; } .hn-2 { animation-delay: 300ms; } .hn-3 { animation-delay: 500ms; } .hn-4 { animation-delay: 750ms; } .hn-5 { animation-delay: 950ms; } .hn-6 { animation-delay: 1150ms; } .hn-7 { animation-delay: 1350ms; }
.hero-ring { fill: none; stroke: var(--at-color-accent); stroke-width: 1.5; opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: hero-pulse 3s var(--at-ease-out) infinite; }
.hero-ring-2 { opacity: 0.3; animation-delay: 1s; } .hero-ring-3 { opacity: 0.15; animation-delay: 2s; }
.hero-chip { position: absolute; left: var(--x); top: var(--y); padding: var(--at-space-2) var(--at-space-3); font-size: var(--at-text-sm); color: var(--at-color-text); background: var(--at-color-overlay); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); backdrop-filter: blur(6px); white-space: nowrap; animation: fade-in var(--at-duration-slow) var(--at-ease-out) 1.2s both; }
.chip-k { display: block; font-family: var(--at-font-mono); font-size: 0.6875rem; font-weight: var(--at-weight-regular); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); }
.chip-k-si { color: var(--at-color-accent); } .chip-k-ai { color: var(--at-color-primary); }
.chip-next { border-color: var(--at-color-accent); }
.chip-now { border-color: var(--at-color-primary); }
.chip-node { display: none; }
.hero-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: var(--at-space-4); margin-top: var(--at-space-4); font-family: var(--at-font-mono); font-size: 0.6875rem; letter-spacing: var(--at-tracking-label); color: var(--at-color-muted); }
.scroll-cue { display: none; align-items: center; gap: var(--at-space-4); text-transform: uppercase; }
.mouse { width: 14px; height: 22px; border: 1.5px solid var(--at-color-border-strong); border-radius: 8px; position: relative; }
.mouse::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 1px; background: var(--at-color-primary); animation: hero-scroll 1.6s var(--at-ease-in-out) infinite; }
@media (min-width: 60rem) {
  .hero { min-height: min(980px, 100vh); display: flex; flex-direction: column; justify-content: center; padding-bottom: var(--at-space-4); }
  .hero-visual { position: absolute; right: 0; top: 0; height: 100%; width: auto; margin: 0; }
  .chip-node { display: block; }
  .scroll-cue { display: inline-flex; }
  .hero-foot { margin-top: auto; padding-top: var(--at-space-7); }
}
@keyframes hero-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hero-node { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes hero-pulse { 0% { transform: scale(0.85); } 70%, 100% { transform: scale(1.15); opacity: 0; } }
@keyframes hero-scroll { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* ---------- SECTION: recently shipped ---------- */
.shipped { padding: var(--at-space-6) 0; background: var(--at-color-bg-deep); border-bottom: 1px solid var(--at-color-border); }
.shipped-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--at-space-2) var(--at-space-5); margin-bottom: var(--at-space-4); }
.shipped-head .caption { margin-left: auto; }
.label-dot { display: inline-flex; align-items: center; gap: var(--at-space-3); margin: 0; font-family: var(--at-font-mono); font-size: var(--at-text-xs); font-weight: var(--at-weight-semibold); letter-spacing: var(--at-tracking-label); text-transform: uppercase; }
.label-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--at-color-success); box-shadow: 0 0 10px var(--at-color-success); }
.ship-strip { list-style: none; margin: 0; padding: 0 0 var(--at-space-2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 80%); gap: var(--at-space-3); overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--at-radius-md); }
.ship-card { scroll-snap-align: start; padding: var(--at-space-4); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); transition: transform var(--at-duration-base) var(--at-ease-out), border-color var(--at-duration-base) var(--at-ease-out); }
.ship-card:hover { transform: translateY(-4px); border-color: var(--at-color-primary); }
.ship-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--at-space-3); }
.ship-card h3 { font-size: var(--at-text-base); margin: 0 0 var(--at-space-2); }
.ship-card p { margin: 0; font-size: var(--at-text-sm); color: var(--at-color-muted); }
.ship-meta { display: flex; justify-content: space-between; margin-top: var(--at-space-3) !important; font-family: var(--at-font-mono); font-size: 0.6875rem !important; }
.ship-status { color: var(--at-color-primary); }
.ico-tile { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--at-radius-md); background: var(--at-color-surface-2); border: 1px solid var(--at-color-border); }
.ico { width: 18px; height: 18px; fill: none; stroke: var(--at-color-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-bars .ico { stroke: var(--at-color-node-4); } .ico-bot .ico { stroke: var(--at-color-accent); } .ico-shield .ico { stroke: var(--at-color-success); }
@media (min-width: 60rem) { .ship-strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

/* ---------- SECTION: 01 / 02 / 03 ---------- */
.moves { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); }
.move { padding: var(--at-space-5); border-top: 1px solid var(--at-color-border); }
.move:first-child { border-top: 0; }
.move-head { display: flex; justify-content: space-between; margin: 0 0 var(--at-space-4); font-family: var(--at-font-mono); font-size: var(--at-text-sm); letter-spacing: var(--at-tracking-label); }
.move-num.n-p { color: var(--at-color-primary); } .move-num.n-a { color: var(--at-color-accent); }
.move-tag { color: var(--at-color-muted); }
.move-fig { margin-bottom: var(--at-space-4); border-radius: var(--at-radius-md); background: var(--at-color-bg-deep); border: 1px solid var(--at-color-border); }
.move p { color: var(--at-color-muted); }
.fig { display: block; width: 100%; height: auto; }
.fig-grid line { stroke: var(--at-color-grid-line); }
.fig-l { fill: none; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.fig-l1 { stroke: var(--at-color-primary); } .fig-l2 { stroke: var(--at-color-node-4); } .fig-l3 { stroke: var(--at-color-accent); }
.reveal-ready .move:not(.is-visible) .fig-l { stroke-dashoffset: 1; }
.move.is-visible .fig-l { animation: hero-draw 1.2s var(--at-ease-out) both; }
.fig-dot1 { fill: var(--at-color-primary); } .fig-dot2 { fill: var(--at-color-node-4); } .fig-dot3 { fill: var(--at-color-accent); }
.fig-chip { fill: var(--at-color-surface-2); stroke: var(--at-color-success); }
.fig-chip-t, .fig-code text, .fig-btn-t { font-family: var(--at-font-mono); font-size: 10px; fill: var(--at-color-text); }
.fig-chip-t { fill: var(--at-color-success); }
.fig-win, .fig-card, .fig-col { fill: var(--at-color-surface); stroke: var(--at-color-border); }
.fig-dotm { fill: var(--at-color-border-strong); }
.c-n { fill: var(--at-color-muted); } .c-k { fill: var(--at-color-accent); }
.fig-bar, .fig-bar2 { fill: var(--at-color-surface-2); } .fig-btn { fill: var(--at-color-primary); } .fig-btn-t { fill: var(--at-color-on-primary); }
.fig-colh.fig-cm { fill: var(--at-color-muted); } .fig-colh.fig-cp { fill: var(--at-color-primary); } .fig-colh.fig-cv { fill: var(--at-color-node-4); } .fig-colh.fig-cg { fill: var(--at-color-success); }
.fig-kc { fill: var(--at-color-surface-2); } .fig-kc-hi { stroke: var(--at-color-primary); }
.fig-path { fill: none; stroke: var(--at-color-accent); stroke-dasharray: 3 3; } .fig-move { fill: var(--at-color-accent); }
@media (min-width: 60rem) {
  .moves { grid-template-columns: repeat(3, 1fr); }
  .move { border-top: 0; border-left: 1px solid var(--at-color-border); }
  .move:first-child { border-left: 0; }
}

/* ---------- SECTION: projects & apps (coming soon) ---------- */
.proj-grid { display: grid; gap: var(--at-space-4); }
.proj { position: relative; display: grid; gap: var(--at-space-4); padding: var(--at-space-4); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-xl); transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform var(--at-duration-base) var(--at-ease-out), border-color var(--at-duration-base) var(--at-ease-out); }
.proj:hover { border-color: var(--at-color-border-strong); }
.proj p { color: var(--at-color-muted); margin: 0 0 var(--at-space-3); }
.mini { background: var(--at-color-bg-deep); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); overflow: hidden; }
.mini-bar { display: flex; align-items: center; gap: var(--at-space-3); margin: 0 !important; padding: var(--at-space-2) var(--at-space-3); font-family: var(--at-font-mono); font-size: 0.6875rem; border-bottom: 1px solid var(--at-color-border); }
.dots3 { width: 6px; height: 6px; border-radius: 50%; background: var(--at-color-border-strong); box-shadow: 10px 0 0 var(--at-color-border-strong), 20px 0 0 var(--at-color-border-strong); margin-right: 20px; }
.mini-body { padding: var(--at-space-4); display: grid; gap: var(--at-space-2); }
.mini-day { grid-template-columns: 1.3fr 1fr; gap: var(--at-space-3); }
.mini-side { display: grid; gap: var(--at-space-3); }
.mini-panel { display: grid; gap: var(--at-space-2); align-content: start; padding: var(--at-space-3); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); }
.mini-k { margin: 0 !important; font-family: var(--at-font-mono); font-size: 0.6875rem; letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); }
.sk { display: block; height: 0.625rem; border-radius: var(--at-radius-pill); background: var(--at-color-surface-2); }
.sk-w50 { width: 50%; } .sk-w60 { width: 60%; } .sk-w75 { width: 75%; } .sk-w90 { width: 90%; }
.proj-tags { display: flex; gap: var(--at-space-2); }
.status { display: inline-flex; align-items: center; gap: var(--at-space-2); font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-primary); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.proj h3 { font-size: var(--at-text-xl); }
.stack { list-style: none; display: flex; flex-wrap: wrap; gap: var(--at-space-2); margin: 0 0 var(--at-space-3); padding: 0; }
.stack li { padding: 2px var(--at-space-3); font-size: var(--at-text-xs); color: var(--at-color-placeholder-text); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-pill); }
.proj-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--at-space-2); margin: 0 !important; }
.meta { font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-muted); }
@media (min-width: 60rem) {
  .proj-grid { grid-template-columns: 1fr 1fr; }
  .proj-feature { grid-column: 1 / -1; grid-template-columns: 1.15fr 1fr; align-items: center; padding: var(--at-space-5); }
}

/* ---------- SECTION: AI & SI trends ---------- */
.curated { display: block; margin-bottom: var(--at-space-2); font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-accent); }
.trend-grid { display: grid; gap: var(--at-space-4); margin-bottom: var(--at-space-4); }
.chart-wrap { position: relative; border-radius: var(--at-radius-md); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.gridl line { stroke: var(--at-color-grid-line); }
.ax { font-family: var(--at-font-mono); font-size: 10px; fill: var(--at-color-muted); }
.area { fill: var(--at-color-primary-soft); }
.cl { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cl.s1 { stroke: var(--at-color-primary); } .cl.s2 { stroke: var(--at-color-node-4); } .cl.s3 { stroke: var(--at-color-accent); stroke-dasharray: 1; }
.end.s1 { fill: var(--at-color-primary); } .end.s2 { fill: var(--at-color-node-4); } .end.s3 { fill: var(--at-color-accent); }
.reveal-ready .chart-panel:not(.is-visible) .cl { stroke-dashoffset: 1; }
.chart-panel.is-visible .cl { animation: hero-draw var(--at-duration-draw) var(--at-ease-out) both; }
.xh-line { stroke: var(--at-color-border-strong); stroke-dasharray: 3 3; }
.xh-dot { fill: var(--at-color-bg); stroke: var(--at-color-primary); stroke-width: 2.5; }
.tip { position: absolute; left: min(var(--tx, 62%), calc(100% - 10.5rem)); top: var(--ty, 18%); margin: 0; padding: var(--at-space-2) var(--at-space-3); font-size: var(--at-text-sm); background: var(--at-color-surface-2); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); pointer-events: none; white-space: nowrap; }
.tip-k { display: block; font-family: var(--at-font-mono); font-size: 0.6875rem; letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--at-space-4); margin: var(--at-space-4) 0 var(--at-space-2); padding: 0; font-size: var(--at-text-sm); color: var(--at-color-muted); }
.lg { display: inline-block; width: 14px; height: 3px; margin-right: var(--at-space-2); vertical-align: middle; border-radius: 2px; }
.lg.s1 { background: var(--at-color-primary); } .lg.s2 { background: var(--at-color-node-4); } .lg.s3 { background: var(--at-color-accent); }
.as-table summary { display: inline-flex; align-items: center; min-height: var(--at-tap-min); cursor: pointer; color: var(--at-color-primary); font-weight: var(--at-weight-semibold); }
.as-table table { width: 100%; border-collapse: collapse; font-size: var(--at-text-sm); }
.as-table th, .as-table td { padding: var(--at-space-1) var(--at-space-2); border-bottom: 1px solid var(--at-color-border); text-align: left; }
.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--at-space-4); }
.scores li { display: grid; grid-template-columns: 1fr auto; gap: var(--at-space-1) var(--at-space-3); font-size: var(--at-text-sm); }
.sc-bar { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: var(--at-radius-pill); background: var(--at-color-surface-2); overflow: hidden; }
.sc-bar span { display: block; height: 100%; width: var(--w); background: var(--at-gradient-signal); border-radius: inherit; transform-origin: left; transition: transform var(--at-duration-draw) var(--at-ease-out); }
.reveal-ready .score-panel:not(.is-visible) .sc-bar span { transform: scaleX(0); }
.sc-v { font-family: var(--at-font-mono); color: var(--at-color-muted); }
.score-note { margin-top: var(--at-space-5); }
.tcards { display: grid; gap: var(--at-space-4); margin-bottom: var(--at-space-4); }
.tcard { padding: var(--at-space-5); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); }
.tcard p { color: var(--at-color-muted); }
.tcard-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--at-space-4) !important; }
.tk { font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-primary); }
.tk-si { color: var(--at-color-accent); }
@media (min-width: 60rem) { .trend-grid { grid-template-columns: 2fr 1fr; } .tcards { grid-template-columns: repeat(3, 1fr); } }

/* ---------- SECTION: idea board ---------- */
.ktabs { display: flex; gap: var(--at-space-2); margin-bottom: var(--at-space-4); overflow-x: auto; }
.ktabs [role="tab"] { flex: none; min-height: var(--at-tap-min); padding: 0 var(--at-space-4); font: inherit; font-size: var(--at-text-sm); color: var(--at-color-muted); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-pill); cursor: pointer; }
.ktabs [role="tab"][aria-selected="true"] { color: var(--at-color-on-primary); background: var(--at-color-primary); border-color: var(--at-color-primary); }
.no-js .ktabs { display: none; }
.board { display: grid; gap: var(--at-space-4); }
.js .kcol:not(.is-active) { display: none; }
.kcol { padding: var(--at-space-3); background: var(--at-color-bg-deep); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); }
.kcol-h { display: flex; align-items: center; gap: var(--at-space-2); margin: 0 0 var(--at-space-3); font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; }
.kcount { margin-left: auto; color: var(--at-color-muted); }
.ksq { width: 8px; height: 8px; border-radius: 2px; }
.ksq-m { background: var(--at-color-muted); } .ksq-p { background: var(--at-color-primary); } .ksq-v { background: var(--at-color-node-4); } .ksq-g { background: var(--at-color-success); }
.klist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--at-space-3); }
.kcard { padding: var(--at-space-3); background: var(--at-color-surface); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-md); transition: border-color var(--at-duration-fast) var(--at-ease-out), box-shadow var(--at-duration-fast) var(--at-ease-out); }
.kcard:hover, .kcard:focus-within { border-color: var(--at-color-primary); box-shadow: var(--at-glow-primary-sm); }
.kcard h4 { margin: 0 0 var(--at-space-3); font-family: var(--at-font-sans); font-size: var(--at-text-sm); font-weight: var(--at-weight-semibold); line-height: var(--at-leading-snug); }
.krow { display: flex; align-items: center; justify-content: space-between; gap: var(--at-space-2); }
.kvote { position: relative; display: inline-flex; align-items: center; gap: var(--at-space-1); height: 36px; padding: 0 var(--at-space-3); font-family: var(--at-font-mono); font-size: var(--at-text-sm); color: var(--at-color-text); background: transparent; border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); cursor: pointer; }
.kvote::after { content: ""; position: absolute; inset: -4px; }
.kvote:hover { border-color: var(--at-color-primary); }
.kvote[aria-pressed="true"] { color: var(--at-color-on-primary); background: var(--at-color-primary); border-color: var(--at-color-primary); }
.kmeta { margin: var(--at-space-2) 0 0; font-size: var(--at-text-xs); color: var(--at-color-muted); }
.kadd a { display: flex; align-items: center; justify-content: center; gap: var(--at-space-2); min-height: var(--at-tap-min); font-size: var(--at-text-sm); text-decoration: none; border: 1px dashed var(--at-color-border-strong); border-radius: var(--at-radius-md); }
.kempty { padding: var(--at-space-4) var(--at-space-3); text-align: center; border: 1px dashed var(--at-color-border); border-radius: var(--at-radius-md); }
.kempty p { margin: var(--at-space-2) 0 0; font-size: var(--at-text-xs); color: var(--at-color-muted); }
.board-cap { margin-top: var(--at-space-4); }
@media (min-width: 60rem) {
  .ktabs { display: none; }
  .board { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .js .kcol:not(.is-active) { display: block; }
}

/* ---------- SECTION: update log ---------- */
.log { list-style: none; margin: 0; padding: 0 0 0 var(--at-space-4); position: relative; border-left: 1px solid var(--at-color-border); }
.log-row { display: grid; gap: var(--at-space-3); padding: var(--at-space-5) 0; border-bottom: 1px solid var(--at-color-border); }
.log-row:last-child { border-bottom: 0; }
.log-date { display: grid; gap: var(--at-space-1); margin: 0; font-family: var(--at-font-mono); font-size: var(--at-text-xs); color: var(--at-color-muted); }
.log-v { color: var(--at-color-primary); }
.log-main p { margin: 0; color: var(--at-color-muted); }
.log-pts { list-style: none; margin: var(--at-space-3) 0 0; padding: 0; font-size: var(--at-text-sm); color: var(--at-color-muted); }
.log-pts li::before { content: "→ "; color: var(--at-color-primary); }
.log-tags { display: flex; gap: var(--at-space-2); align-items: flex-start; margin: 0; }
.ltag { padding: 2px var(--at-space-2); font-family: var(--at-font-mono); font-size: 0.6875rem; letter-spacing: var(--at-tracking-label); text-transform: uppercase; border-radius: var(--at-radius-sm); border: 1px solid currentColor; }
.ltag-new { color: var(--at-color-primary); } .ltag-imp { color: var(--at-color-node-4); } .ltag-fix { color: var(--at-color-success); }
@supports (animation-timeline: view()) {
  .log::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 100%; background: var(--at-gradient-signal-diag); transform-origin: top; animation: log-progress linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
}
@keyframes log-progress { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (min-width: 60rem) { .log-row { grid-template-columns: 12rem 1fr auto; gap: var(--at-space-6); } }

/* ---------- SECTION: about Richard ---------- */
.about-head { display: grid; gap: var(--at-space-5); margin-bottom: var(--at-space-7); }
.sec .giant { max-width: none; font-size: clamp(3.5rem, 13vw, 11rem); line-height: 0.88; letter-spacing: var(--at-tracking-display); }
.g-first, .g-last { display: block; }
.g-first { background: var(--at-gradient-signal); -webkit-background-clip: text; background-clip: text; color: var(--at-color-primary); -webkit-text-fill-color: transparent; }
.g-last { color: var(--at-color-bg); -webkit-text-stroke: 1.5px var(--at-color-border-strong); transform: translateX(var(--shift, 0px)); }
@supports (animation-timeline: view()) {
  .g-last { animation: name-shift linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@keyframes name-shift { from { transform: translateX(0); } to { transform: translateX(40px); } }
.about-intro { display: grid; gap: var(--at-space-3); align-content: end; }
.about-intro .ph { font-size: var(--at-text-xl); margin: 0; }
.about-body { display: grid; gap: var(--at-space-6); }
.portrait { aspect-ratio: 4 / 5; display: grid; place-content: center; justify-items: center; gap: var(--at-space-2); text-align: center; border: 1px dashed var(--at-color-border-strong); border-radius: var(--at-radius-xl);
  background: repeating-linear-gradient(135deg, var(--at-color-surface) 0 12px, var(--at-color-bg-deep) 12px 24px); }
.portrait-ico { width: 56px; height: 56px; fill: none; stroke: var(--at-color-muted); stroke-width: 1.5; }
.ph-strong { margin: 0; font-weight: var(--at-weight-semibold); color: var(--at-color-placeholder-text); }
.story-h { font-size: var(--at-text-2xl) !important; color: var(--at-color-placeholder-text); }
.story .ph { font-size: var(--at-text-lg); }
.facts { display: grid; gap: var(--at-space-4); margin: var(--at-space-5) 0; padding: var(--at-space-4) 0; border-block: 1px solid var(--at-color-border); }
.facts dt { font-family: var(--at-font-mono); font-size: var(--at-text-xs); letter-spacing: var(--at-tracking-label); text-transform: uppercase; color: var(--at-color-muted); }
.facts dd { margin: var(--at-space-1) 0 0; }
.about-ctas { display: flex; flex-wrap: wrap; gap: var(--at-space-3); margin: 0 0 var(--at-space-4); }
@media (min-width: 60rem) {
  .about-head { grid-template-columns: 1.6fr 1fr; }
  .about-body { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- SECTION: suggest / collaborate band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--at-space-5); padding: var(--at-space-6) var(--at-space-5); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-xl);
  background: radial-gradient(circle at 1px 1px, var(--at-color-chart-link) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--at-gradient-page), var(--at-color-surface); }
.cta-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.cta-copy h2 { max-width: 14ch; margin-bottom: var(--at-space-4); }
.cta-copy p { color: var(--at-color-muted); max-width: 30rem; }
.cta-form { display: grid; gap: var(--at-space-3); padding: var(--at-space-4); background: var(--at-color-overlay); border: 1px solid var(--at-color-border); border-radius: var(--at-radius-lg); }
.cta-form textarea { width: 100%; min-height: 5rem; padding: var(--at-space-3); font: inherit; color: var(--at-color-text); background: var(--at-color-bg); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-md); resize: vertical; }
.cta-form textarea::placeholder { color: var(--at-color-muted); }
.cta-role { display: flex; flex-wrap: wrap; gap: var(--at-space-2); margin: 0; padding: 0; border: 0; }
.cta-role legend { width: 100%; margin-bottom: var(--at-space-2); }
.cta-role label { position: relative; }
.cta-role input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cta-role span { display: inline-flex; align-items: center; min-height: var(--at-tap-min); padding: 0 var(--at-space-4); font-size: var(--at-text-sm); border: 1px solid var(--at-color-border-strong); border-radius: var(--at-radius-pill); }
.cta-role input:checked + span { color: var(--at-color-on-primary); background: var(--at-color-primary); border-color: var(--at-color-primary); }
.cta-role input:focus-visible + span { outline: var(--at-focus-width) solid var(--at-focus-color); outline-offset: var(--at-focus-offset); }
.cta-form .error-msg, .cta-form .fld-err { display: block; min-height: 1.5em; margin: 0; font-size: var(--at-text-sm); line-height: 1.5; color: var(--at-color-error); }
@media (max-width: 37.49rem) { .cta-form .error-msg, .cta-form .fld-err { min-height: 3em; } }
.cta-form .check { display: flex; gap: var(--at-space-3); align-items: flex-start; font-size: var(--at-text-sm); color: var(--at-color-text); }
.cta-form .check input { width: 1.5rem; height: 1.5rem; margin: 0; flex: none; accent-color: var(--at-color-primary); }
.cta-form .check input[aria-invalid="true"] { outline: 2px solid var(--at-color-error); outline-offset: 2px; }
.cta-form textarea[aria-invalid="true"] { border-color: var(--at-color-error); box-shadow: inset 0 0 0 1px var(--at-color-error); }
.cta-form textarea[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--at-color-error), 0 0 0 calc(var(--at-focus-width) + var(--at-focus-offset)) var(--at-focus-halo); }
.cta-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--at-space-3); }
.cta-form .form-status:empty { display: none; }
@media (min-width: 60rem) { .cta-band { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--at-space-7); } }

/* ---------- Reduced motion / Pause motion: static frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-line, .hn, .hero-ring, .hero-chip, .mouse::after, .fig-l, .cl, .g-last, .log::before { animation: none !important; }
  .hero-line, .fig-l, .cl { stroke-dashoffset: 0 !important; }
  .sc-bar span { transform: none !important; }
  .proj { transform: none !important; }
  .ship-card:hover { transform: none; }
}
[data-motion="reduced"] .hero-line, [data-motion="reduced"] .hn, [data-motion="reduced"] .hero-ring, [data-motion="reduced"] .hero-chip, [data-motion="reduced"] .mouse::after, [data-motion="reduced"] .fig-l, [data-motion="reduced"] .cl, [data-motion="reduced"] .g-last, [data-motion="reduced"] .log::before { animation: none !important; }
[data-motion="reduced"] .hero-line, [data-motion="reduced"] .fig-l, [data-motion="reduced"] .cl { stroke-dashoffset: 0 !important; }
[data-motion="reduced"] .sc-bar span, [data-motion="reduced"] .proj, [data-motion="reduced"] .ship-card:hover { transform: none !important; }
.sec .kcol-h { font-size: var(--at-text-xs); }
.log-date { align-content: start; }
/* mobile hero order: copy first, then visual (mockup 390) */
.hero { display: flex; flex-direction: column; }
.hero-content { order: 1; }
.hero-visual { order: 2; }
.hero-foot { order: 3; }
.cap-long { display: none; }
@media (max-width: 59.99rem) {
  .chip-next { left: auto; right: 2%; }
  .chip-now { left: 34%; }
  .hero-chip { font-size: var(--at-text-xs); padding: var(--at-space-1) var(--at-space-2); }
  .portrait { max-width: 22rem; }
}
@media (min-width: 60rem) { .cap-long { display: inline; } .cap-short { display: none; } }
/* Honeypot field: hidden from people and assistive tech, still in the DOM for bots */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Portrait (About + Home teaser): real image replaces the dashed placeholder */
.portrait-img { display: block; padding: 0; border: 1px solid var(--at-color-border); background: var(--at-color-surface); overflow: hidden; box-shadow: var(--at-shadow-lg); }
.portrait-img img { display: block; width: 100%; height: 100%; object-fit: cover; }