/* r4vk.org/ai — layout 2: terminal-native bento.
   Builds on main.css tokens (both themes). Motion = transform/opacity/
   scale/translate only; everything stops under prefers-reduced-motion. */

/* Text-heavy page: opaque surfaces so copy never fights the background */
.ai-page .card,.ai-page .skill{background:var(--surface-solid);}
.mono{font-family:var(--font-mono);}

/* ── Icons ─────────────────────────────────────────────────────────── */
.ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ic-box{width:40px;height:40px;border-radius:12px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;background:var(--accent-soft);
  border:1px solid var(--accent-line);color:var(--accent);}
.ic-box .ic{width:20px;height:20px;}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero2{padding-block:clamp(2.2rem,6vh,4.2rem) 1.5rem;}
.hero2 h1{margin:1.1rem 0 0;font-size:clamp(2rem,4.9vw,3.8rem);line-height:1.06;}
@media (min-width:720px){.hero2 h1 .name-line{white-space:nowrap;}}
.hero2-side{display:grid;gap:1.8rem;margin-top:1.5rem;align-items:center;}
.hero2-side>*{min-width:0;}
.hero2 .lede{margin-top:0;max-width:44rem;}
.hero2 .hero-cta{margin-top:1.6rem;}
@media (min-width:980px){.hero2-side{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem;}}

/* Claude Code style status card + animated pixel agent (original glyph) */
.cc-card{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.5rem;border-radius:var(--r-card);
  background:#0B0F17;border:1px solid var(--border-strong);color:#E8ECF4;
  font-family:var(--font-mono);box-shadow:var(--shadow-card);}
.cc-meta{min-width:0;display:flex;flex-direction:column;gap:.45rem;}
.cc-name{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;}
.cc-type{display:inline-block;overflow:hidden;white-space:nowrap;width:11ch;animation:cctype 9s steps(11,end) infinite;}
@keyframes cctype{0%{width:0}12%,88%{width:11ch}96%,100%{width:0}}
.cc-name .caret{display:inline-block;width:.55ch;height:1.05em;margin-left:3px;background:#7CA2FF;
  animation:caret 1s steps(1) infinite;}
.cc-status{display:grid;font-size:.82rem;color:#C9D3E6;}
.cc-status .st{grid-area:1/1;opacity:0;white-space:nowrap;animation:ccst 9s infinite;}
.cc-status .st2{animation-delay:3s;} .cc-status .st3{animation-delay:6s;}
@keyframes ccst{0%{opacity:0;translate:0 4px}4%,30%{opacity:1;translate:0 0}34%,100%{opacity:0;}}
.sp{display:inline-block;width:.55em;height:.55em;margin-right:.55em;background:#7CA2FF;
  animation:spsq 1.2s steps(4) infinite;}
@keyframes spsq{to{transform:rotate(360deg);}}

.agent{display:block;width:56px;height:auto;flex:none;fill:#7CA2FF;overflow:visible;
  animation:agbob 1.6s steps(1) infinite;}
.agent-lg{width:104px;}
.agent .a-eyes rect{fill:#0B0F17;transform-box:fill-box;transform-origin:center;animation:blink 4.4s infinite;}
.agent .a-tip{fill:#A9C2FF;animation:antblink 1.2s steps(1) infinite;}
.agent .a-armL{animation:armwave 1.2s steps(1) infinite;}
.agent .a-armR{animation:armwave 1.2s steps(1) infinite .6s;}
.agent .a-legL{animation:legstep 1s steps(1) infinite;}
.agent .a-legR{animation:legstep 1s steps(1) infinite .5s;}
.agent .a-sp{fill:#FFD27A;opacity:0;animation:spark 1.8s steps(1) infinite;}
.agent .a-sp2{animation-delay:.6s;} .agent .a-sp3{animation-delay:1.2s;}
@keyframes agbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes antblink{50%{opacity:.2}}
@keyframes armwave{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes legstep{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
@keyframes spark{0%{opacity:0;transform:translateY(0)}20%{opacity:1}60%{opacity:1;transform:translateY(-1px)}80%,100%{opacity:0;transform:translateY(-1px)}}

/* ── Signature visual: manual → atoms → AI blocks → process → result ─ */
.viz{margin-top:1rem;padding:clamp(.7rem,1.6vw,1rem);overflow:hidden;}
.viz-stage{position:relative;container-type:size;width:100%;aspect-ratio:1/1;
  border-radius:14px;border:1px solid var(--border);overflow:hidden;
  background:radial-gradient(var(--dot) 1px,transparent 1px) 0 0/22px 22px,var(--bg);
  --cw:29cqw;--ch:64px;}
@media (min-width:900px){.viz-stage{aspect-ratio:2/1;--cw:14cqw;--ch:56px;}}

.manual-card{position:absolute;left:12cqw;top:10cqh;width:76cqw;height:78cqh;
  border-radius:14px;border:1px solid var(--border-strong);padding:1rem 1.1rem;
  background:var(--surface-solid);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.35rem;
  transition:opacity .6s var(--ease),scale .8s var(--ease);}
.manual-card .ic{color:var(--faint);width:1.4rem;height:1.4rem;}
.manual-card b{font-size:1rem;letter-spacing:-.01em;}
.manual-card span{font-size:.8rem;color:var(--faint);}
.manual-card i{display:block;height:7px;border-radius:4px;background:var(--border-strong);
  margin-top:.45rem;width:90%;}
.manual-card i:nth-of-type(2){width:72%;} .manual-card i:nth-of-type(3){width:55%;}
@media (min-width:900px){.manual-card{left:27cqw;top:12cqh;width:46cqw;height:76cqh;}}

.chip{position:absolute;left:0;top:0;z-index:2;width:var(--cw);height:var(--ch);
  display:flex;align-items:center;gap:.5rem;padding:0 1.35rem 0 .7rem;
  border-radius:12px;border:1px solid var(--border-strong);
  background:var(--surface-solid);color:var(--muted);
  font-size:.76rem;font-weight:600;line-height:1.2;
  translate:calc(var(--x)*1cqw) calc(var(--y)*1cqh);rotate:var(--r);scale:var(--s,1);
  transition:translate .9s var(--ease),rotate .9s var(--ease),scale .9s var(--ease),
    border-radius .6s var(--ease),background-color .5s,border-color .5s,color .5s,
    box-shadow .5s;
  transition-delay:calc(var(--i)*70ms);}
.chip .ic{width:1.1rem;height:1.1rem;}
.chip span{min-width:0;}
.chip em{position:absolute;right:7px;top:5px;font:600 .54rem var(--font-mono);
  letter-spacing:.08em;font-style:normal;opacity:0;transition:opacity .4s;color:var(--accent);}
.chip .n{position:absolute;left:-7px;top:-8px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font:600 .62rem var(--font-mono);
  background:var(--accent);color:var(--btn-ink);opacity:0;scale:.4;
  transition:opacity .4s,scale .4s var(--ease);}

/* chip positions: x,y in cq units. 0 = pile, 1 = atoms, r = row/grid */
.chip:nth-child(3){--x0:35;--y0:24;--r0:-7deg;--x1:3;--y1:6;--r1:-3deg;--xr:3;--yr:15;}
.chip:nth-child(4){--x0:37;--y0:31;--r0:5deg;--x1:52;--y1:4;--r1:2deg;--xr:35.5;--yr:15;}
.chip:nth-child(5){--x0:34;--y0:38;--r0:-3deg;--x1:8;--y1:28;--r1:4deg;--xr:68;--yr:15;}
.chip:nth-child(6){--x0:38;--y0:45;--r0:8deg;--x1:50;--y1:34;--r1:3deg;--xr:3;--yr:37;}
.chip:nth-child(7){--x0:35;--y0:52;--r0:-5deg;--x1:4;--y1:56;--r1:-2deg;--xr:35.5;--yr:37;}
.chip:nth-child(8){--x0:37;--y0:59;--r0:4deg;--x1:54;--y1:62;--r1:-4deg;--xr:68;--yr:37;}
@media (min-width:900px){
  .chip:nth-child(3){--x0:38;--y0:26;--x1:6;--y1:8;--xr:4;--yr:30;}
  .chip:nth-child(4){--x0:40;--y0:33;--x1:40;--y1:4;--xr:19.6;--yr:30;}
  .chip:nth-child(5){--x0:36;--y0:40;--x1:74;--y1:10;--xr:35.2;--yr:30;}
  .chip:nth-child(6){--x0:42;--y0:46;--x1:10;--y1:62;--xr:50.8;--yr:30;}
  .chip:nth-child(7){--x0:38;--y0:52;--x1:44;--y1:68;--xr:66.4;--yr:30;}
  .chip:nth-child(8){--x0:41;--y0:58;--x1:76;--y1:60;--xr:82;--yr:30;}
}
.viz[data-stage="0"] .chip{--x:var(--x0);--y:var(--y0);--r:var(--r0);}
.viz[data-stage="1"] .chip{--x:var(--x1);--y:var(--y1);--r:var(--r1);--s:.92;
  border-radius:999px;border-style:dashed;}
.viz[data-stage="2"] .chip,.viz[data-stage="3"] .chip,.viz[data-stage="4"] .chip{
  --x:var(--xr);--y:var(--yr);--r:0deg;color:var(--ink);}
.viz[data-stage="2"] .chip.ai,.viz[data-stage="3"] .chip.ai,.viz[data-stage="4"] .chip.ai{
  border-color:var(--accent-line);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-solid));}
.viz[data-stage="2"] .chip.you,.viz[data-stage="3"] .chip.you,.viz[data-stage="4"] .chip.you{
  border-color:color-mix(in srgb,var(--ok) 55%,transparent);
  background:color-mix(in srgb,var(--ok) 13%,var(--surface-solid));}
.viz[data-stage="2"] .chip.you em,.viz[data-stage="3"] .chip.you em,.viz[data-stage="4"] .chip.you em{color:var(--ok);}
.viz[data-stage="2"] .chip em,.viz[data-stage="3"] .chip em,.viz[data-stage="4"] .chip em{opacity:1;}
.viz[data-stage="3"] .chip .n,.viz[data-stage="4"] .chip .n{opacity:1;scale:1;}
.viz[data-stage="4"] .chip{box-shadow:0 6px 22px color-mix(in srgb,var(--accent) 22%,transparent);}
/* atoms drift a little while they float */
.viz[data-stage="1"] .chip{animation:bob 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i)*-.5s);}
@keyframes bob{50%{transform:translateY(-5px);}}
/* manual card only in stage 0 */
.viz:not([data-stage="0"]) .manual-card{opacity:0;scale:1.06;}

.viz-line{display:none;}
@media (min-width:900px){
  .viz-line{display:block;position:absolute;left:11cqw;width:78cqw;
    top:calc(30cqh + var(--ch)/2);height:2px;z-index:1;border-radius:2px;
    background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
    transform-origin:left;scale:0 1;transition:scale 1s var(--ease) .3s;}
  .viz-line::after{content:"";position:absolute;left:0;top:-3px;width:8px;height:8px;
    border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);opacity:0;}
  .viz[data-stage="3"] .viz-line,.viz[data-stage="4"] .viz-line{scale:1 1;}
  .viz[data-stage="3"] .viz-line::after,.viz[data-stage="4"] .viz-line::after{
    opacity:1;animation:pulse-run 2.6s var(--ease) infinite;}
}
@keyframes pulse-run{from{translate:0 0;}to{translate:78cqw 0;}}

.result{position:absolute;left:50%;bottom:5cqh;z-index:3;display:flex;gap:1.6rem;
  padding:.8rem 1.3rem;border-radius:14px;white-space:nowrap;
  background:color-mix(in srgb,var(--accent) 11%,var(--surface-solid));
  border:1px solid var(--accent-line);box-shadow:var(--shadow-card);
  translate:-50% 18px;opacity:0;transition:translate .8s var(--ease) .3s,opacity .6s .3s;}
.viz[data-stage="4"] .result{translate:-50% 0;opacity:1;}
.result>div{display:flex;flex-direction:column;}
.result .save{font-size:clamp(1rem,2.4vw,1.4rem);font-weight:800;letter-spacing:-.025em;
  color:var(--accent);line-height:1.15;}
.result span{font-size:.7rem;color:var(--muted);margin-top:.15rem;}
@media (max-width:599px){.result{flex-direction:column;gap:.5rem;white-space:normal;
  width:max-content;max-width:90cqw;}}

.viz-hud{display:grid;gap:1rem;padding:1.1rem .35rem .2rem;}
@media (min-width:900px){.viz-hud{grid-template-columns:1fr 19rem;gap:2.5rem;align-items:end;}}
.viz-caps{display:grid;}
.cap{grid-area:1/1;opacity:0;visibility:hidden;translate:0 8px;
  transition:opacity .5s var(--ease),translate .5s var(--ease),visibility 0s .5s;}
.cap .step{font:500 .7rem var(--font-mono);letter-spacing:.1em;color:var(--accent);}
.cap strong{display:block;margin-top:.2rem;font-size:1.25rem;font-weight:800;letter-spacing:-.025em;}
.cap p{margin:.35rem 0 0;font-size:.92rem;color:var(--muted);max-width:40rem;}
.viz[data-stage="0"] .cap[data-n="0"],.viz[data-stage="1"] .cap[data-n="1"],
.viz[data-stage="2"] .cap[data-n="2"],.viz[data-stage="3"] .cap[data-n="3"],
.viz[data-stage="4"] .cap[data-n="4"]{opacity:1;visibility:visible;translate:0;
  transition:opacity .5s var(--ease) .15s,translate .5s var(--ease) .15s,visibility 0s;}
.viz-meter .lbl{font:500 .7rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);display:block;}
.viz-time{display:block;font:600 clamp(1.7rem,4vw,2.4rem) var(--font-mono);
  letter-spacing:-.04em;margin:.15rem 0 .5rem;font-variant-numeric:tabular-nums;}
.viz-meter .bar{height:6px;border-radius:6px;background:var(--border);overflow:hidden;}
.viz-meter .bar i{display:block;height:100%;width:100%;transform-origin:left;
  scale:var(--t,.14) 1;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
  transition:scale .9s var(--ease);}
.viz-meter small{display:block;margin-top:.5rem;font-size:.72rem;color:var(--faint);}

.viz-ctl{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem .35rem .1rem;}
.viz-tabs{display:flex;gap:.4rem;}
.viz-tabs button,.viz-pp{appearance:none;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;
  font:600 .8rem var(--font-mono);display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s,background-color .2s;}
.viz-tabs button:hover,.viz-pp:hover{border-color:var(--accent-line);color:var(--accent);}
.viz[data-stage="0"] [data-go="0"],.viz[data-stage="1"] [data-go="1"],
.viz[data-stage="2"] [data-go="2"],.viz[data-stage="3"] [data-go="3"],
.viz[data-stage="4"] [data-go="4"]{background:var(--accent);border-color:var(--accent);
  color:var(--btn-ink);}
.viz-pp .ic-play{display:none;} .viz-pp[aria-pressed="true"] .ic-play{display:block;}
.viz-pp[aria-pressed="true"] .ic-pause{display:none;}
html:not(.js) .viz-ctl{display:none;}
.viz.viz-init *{transition:none !important;animation:none !important;}

/* ── Stat strip ────────────────────────────────────────────────────── */
.strip{margin-top:1.8rem;padding:1.3rem 1.5rem 1.5rem;border-radius:var(--r-card);
  background:var(--surface-solid);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.strip-who{margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;}
.strip-who b{font-size:1.05rem;letter-spacing:-.01em;}
.strip-who span{font-size:.85rem;color:var(--faint);}
.strip-grid{display:grid;gap:1.2rem;border-top:1px solid var(--border-strong);padding-top:1.2rem;}
.strip-grid>div{min-width:0;}
.strip .big{display:block;font-size:clamp(2rem,4.5vw,3rem);font-weight:600;
  letter-spacing:-.05em;color:var(--accent);line-height:1;}
.strip .k{display:block;margin-top:.4rem;font:500 .72rem var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.strip p{margin:.55rem 0 0;font-size:.9rem;color:var(--muted);max-width:26rem;}
@media (min-width:720px){.strip-grid{grid-template-columns:repeat(3,1fr);gap:2rem;}}

/* ── Marquee ───────────────────────────────────────────────────────── */
.marquee{overflow:hidden;border-block:1px solid var(--border);padding:.95rem 0;margin-top:1.5rem;
  background:color-mix(in srgb,var(--surface-solid) 78%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:2.5rem;padding-right:2.5rem;width:max-content;
  animation:mq 48s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{display:inline-flex;align-items:center;gap:2.5rem;white-space:nowrap;
  font:500 .8rem var(--font-mono);letter-spacing:.06em;color:var(--faint);}
.marquee-track span::after{content:"/";color:var(--accent-line);}
@keyframes mq{to{transform:translateX(-50%);}}

/* ── Problem ───────────────────────────────────────────────────────── */
.problem2{display:grid;gap:1.6rem;}
.problem2>*{min-width:0;}
@media (min-width:900px){.problem2{grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center;}}
.funnel{padding:1.4rem;}
.funnel-t{margin:0 0 .8rem;font:500 .7rem var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);}
.fb{margin-top:1rem;display:grid;gap:.4rem;}
.fb span{font-size:.86rem;font-weight:600;}
.fb i{position:relative;display:block;height:12px;border-radius:7px;overflow:hidden;
  background:var(--border);}
.fb i::before{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));transform-origin:left;}
html.js .funnel .fb i::before{scale:0 1;}
html.js .funnel.in .fb i::before{scale:1 1;transition:scale 1s var(--ease) calc(var(--i)*.18s);}
.plist{display:grid;gap:1rem;}
.plist article{display:flex;gap:.95rem;align-items:flex-start;}
.plist h3{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;}
.plist p{margin:.2rem 0 0;font-size:.9rem;color:var(--muted);}
.problem-close{margin:2rem 0 0;max-width:46rem;font-size:1.08rem;font-weight:600;
  letter-spacing:-.01em;line-height:1.5;}

/* ── Bento ─────────────────────────────────────────────────────────── */
.bento{display:grid;gap:1rem;grid-template-columns:1fr;}
.bento>*{min-width:0;}
.tile{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;
  overflow:hidden;--mx:50%;--my:0%;}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx) var(--my),var(--accent-soft),transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);}
.tile:hover::after{opacity:1;}
.tile>*{position:relative;z-index:1;}
.tile header{display:flex;align-items:center;justify-content:space-between;gap:.8rem;}
.tile h3{margin:0;font-size:clamp(1.15rem,2vw,1.4rem);font-weight:800;
  letter-spacing:-.028em;line-height:1.2;}
.tile>p,.b-build p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.55;}
.tile footer{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:1rem;
  border-top:1px solid var(--border);}
.tile .ptags{display:flex;flex-wrap:wrap;gap:.45rem;}
.tile .prole{font-size:.8rem;color:var(--faint);}
@media (min-width:720px){
  .bento{grid-template-columns:repeat(12,1fr);}
  .b-enable,.b-code,.b-build{grid-column:span 12;}
  .b-flow,.b-gtm,.b-prod,.b-agent{grid-column:span 6;}
}
@media (min-width:1024px){
  .b-enable{grid-column:span 7;} .b-code{grid-column:span 5;}
  .b-flow,.b-gtm,.b-prod{grid-column:span 4;}
  .b-agent{grid-column:span 5;} .b-build{grid-column:span 7;}
}
/* border beam */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg;}
.beam::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:2;
  background:conic-gradient(from var(--a),transparent 0 70%,var(--accent) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;animation:spin-a 7s linear infinite;}
@keyframes spin-a{to{--a:360deg;}}

/* enablement mini rail */
.mini-rail{list-style:none;margin:.3rem 0 .2rem;padding:0;display:flex;
  justify-content:space-between;position:relative;}
.mini-rail::before{content:"";position:absolute;left:7px;right:7px;top:6px;height:2px;
  background:var(--border-strong);}
.mini-rail li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font:500 .62rem var(--font-mono);color:var(--faint);letter-spacing:.04em;}
.mini-rail i{width:14px;height:14px;border-radius:50%;background:var(--surface-solid);
  border:2px solid var(--border-strong);animation:dotlit 8s ease-in-out infinite;
  animation-delay:calc(var(--i)*1.1s);}
@keyframes dotlit{0%,14%,100%{background:var(--surface-solid);border-color:var(--border-strong);
  scale:1;}4%,10%{background:var(--accent);border-color:var(--accent);scale:1.3;}}

/* terminal + pixel agent (original glyph, not an official logo) */
.term{border-radius:12px;border:1px solid var(--border-strong);background:#0B0F17;
  color:#E8ECF4;overflow:hidden;font:500 .78rem/1.55 var(--font-mono);}
.term-bar{display:flex;align-items:center;gap:6px;padding:.5rem .8rem;
  border-bottom:1px solid rgba(232,236,244,.1);}
.term-bar i{width:9px;height:9px;border-radius:50%;background:rgba(232,236,244,.2);}
.term-bar span{margin-left:.5rem;font-size:.68rem;opacity:.55;}
.term-body{display:flex;gap:.9rem;align-items:center;padding:.95rem .9rem;}
.term-lines{min-width:0;flex:1;}
.tl{margin:0;white-space:nowrap;overflow:hidden;width:0;color:#C9D3E6;}
.tl.ok{color:#7BE3A8;}
.l1{animation:t1 11s steps(28,end) infinite;} .l2{animation:t2 11s steps(28,end) infinite;}
.l3{animation:t3 11s steps(28,end) infinite;} .l4{animation:t4 11s steps(28,end) infinite;}
@keyframes t1{0%{width:0}10%,92%{width:28ch}97%,100%{width:0}}
@keyframes t2{0%,14%{width:0}20%,92%{width:28ch}97%,100%{width:0}}
@keyframes t3{0%,28%{width:0}36%,92%{width:28ch}97%,100%{width:0}}
@keyframes t4{0%,46%{width:0}54%,92%{width:28ch}97%,100%{width:0}}
.caret{display:inline-block;width:.55ch;height:1em;margin-left:3px;vertical-align:-2px;
  background:#7CA2FF;animation:caret 1s steps(1) infinite;}
@keyframes caret{50%{opacity:0;}}

/* workflow */
.wf{display:flex;align-items:center;gap:.3rem;margin-top:.2rem;}
.node{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.6rem .55rem;border-radius:10px;border:1px solid var(--border-strong);
  font-size:.68rem;font-weight:600;color:var(--muted);background:var(--surface-solid);min-width:0;}
.node.ai{border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink);}
.node.you{border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ink);}
.wire{flex:1;min-width:12px;height:2px;background:var(--border-strong);position:relative;overflow:hidden;}
.wire::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:wirerun 2.2s linear infinite;}
@keyframes wirerun{from{translate:-100% 0;}to{translate:230% 0;}}

/* product list */
.alist{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.5rem;}
.alist li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-solid);font-size:.82rem;
  font-weight:600;animation:alist 7s ease-in-out infinite;animation-delay:calc(var(--i)*.6s);}
.alist .ic{color:var(--accent);}
@keyframes alist{0%{opacity:0;translate:0 8px;}8%,86%{opacity:1;translate:0 0;}100%{opacity:0;}}

/* agent orbit */
.orbit{position:relative;width:156px;height:156px;margin:.2rem auto 0;}
.orbit .core{position:absolute;inset:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  box-shadow:0 0 34px color-mix(in srgb,var(--accent) 45%,transparent);}
.orbit .o{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--border-strong);
  animation:spin 13s linear infinite;}
.orbit .o b{position:absolute;left:50%;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;display:grid;place-items:center;background:var(--surface-solid);
  border:1px solid var(--accent-line);color:var(--accent);animation:spin 13s linear infinite reverse;}
.orbit .o2{inset:24px;animation-duration:9s;animation-direction:reverse;}
.orbit .o2 b{animation-duration:9s;animation-direction:normal;}
.orbit .o3,.orbit .o3 b{animation-delay:-6.5s;}
@keyframes spin{to{transform:rotate(360deg);}}

/* build band */
.b-build{display:grid;gap:1.4rem;align-items:center;}
@media (min-width:720px){.b-build{grid-template-columns:1.1fr 1fr;gap:2.4rem;}}
.b-build header{margin-bottom:.3rem;}
.b-build h3{margin-top:.6rem;}
.b-build p{margin-top:.6rem;}
.build-steps{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:1rem;font:600 .74rem var(--font-mono);}
.build-steps span{padding:.45rem .75rem;border-radius:8px;border:1px solid var(--accent-line);
  background:var(--accent-soft);color:var(--accent);white-space:nowrap;}
.build-steps i{flex:1;min-width:10px;height:2px;
  background:linear-gradient(90deg,var(--accent-line),var(--accent));}
.b-build .xp-points{margin:0;max-width:none;}

/* ── Ledger (formats) ──────────────────────────────────────────────── */
.ledger{background:var(--surface-solid);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-sm);}
.ledger article{display:grid;grid-template-columns:1fr;gap:.3rem;padding:1.2rem 1.4rem;
  border-bottom:1px solid var(--border);transition:background-color .25s var(--ease);}
.ledger article:last-child{border-bottom:0;}
.ledger .lt{font:600 clamp(1.05rem,2vw,1.35rem) var(--font-mono);color:var(--accent);
  letter-spacing:-.02em;}
.ledger h3{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;}
.ledger p{margin:.25rem 0 0;color:var(--muted);font-size:.93rem;max-width:42rem;}
.ledger .ld{display:none;}
@media (min-width:720px){
  .ledger article{grid-template-columns:11rem 1fr auto;gap:1.6rem;align-items:baseline;}
  .ledger .ld{display:block;font:500 .78rem var(--font-mono);color:var(--faint);}
}
html.js .ledger article:hover{background:var(--accent-soft);}

/* ── Rail (programme) ──────────────────────────────────────────────── */
.rail{position:relative;display:grid;gap:1.1rem;padding-left:1.9rem;}
.rail::before,.rail::after{content:"";position:absolute;left:.5rem;top:.6rem;bottom:.6rem;
  width:2px;border-radius:2px;}
.rail::before{background:var(--accent-line);}
.rail::after{background:linear-gradient(180deg,var(--grad-a),var(--grad-b));
  transform-origin:top;scale:1 var(--xp,0);}
html:not(.js) .rail::after{scale:1 1;}
.rail-step{position:relative;padding:1.2rem 1.3rem;border-radius:var(--r-card);
  border:1px solid var(--border);background:var(--surface-solid);box-shadow:var(--shadow-sm);}
.rail-step::before{content:"";position:absolute;left:-1.9rem;top:1.6rem;width:12px;height:12px;
  border-radius:50%;background:var(--surface-solid);border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent-line);translate:.05rem 0;
  transition:background-color .35s var(--ease),box-shadow .35s var(--ease),scale .35s var(--ease);}
.rail-step.active::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);scale:1.25;}
html:not(.js) .rail-step::before{background:var(--accent);}
.rs-n{display:block;font-size:2.1rem;font-weight:600;letter-spacing:-.05em;
  color:var(--accent);line-height:1;margin-bottom:.6rem;}
.rail-step h3{margin:.7rem 0 0;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;}
.rail-step .xp-points{margin-top:.8rem;font-size:.88rem;}
@media (min-width:1100px){
  .rail{grid-template-columns:repeat(5,1fr);gap:1rem;padding:2rem 0 0;}
  .rail::before,.rail::after{left:0;right:0;top:.55rem;bottom:auto;height:2px;width:auto;}
  .rail::after{transform-origin:left;scale:var(--xp,0) 1;}
  html:not(.js) .rail::after{scale:1 1;}
  .rail-step{padding:1.1rem 1.1rem 1.2rem;}
  .rail-step::before{left:1.1rem;top:-1.95rem;}
}

/* ── Accordions (programmes + FAQ) ─────────────────────────────────── */
.acc{display:grid;gap:.8rem;}
.acc details{padding:0;}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;font-weight:700;
  font-size:1.02rem;letter-spacing:-.01em;border-radius:var(--r-card);}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";flex:none;font-family:var(--font-mono);font-size:1.2rem;
  font-weight:500;color:var(--accent);margin-left:.4rem;}
.acc details[open] summary::after{content:"–";}
.acc summary .pill{margin-left:auto;}
.acc summary:hover{color:var(--accent);}
.acc-body{display:grid;gap:1.4rem;padding:0 1.4rem 1.4rem;}
.acc-body>*{min-width:0;}
.acc-body h4{margin:0 0 .6rem;font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);font-family:var(--font-mono);}
.acc-body ul{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;
  font-size:.92rem;color:var(--muted);}
.acc-body li{position:relative;padding-left:1.25rem;}
.acc-body li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:2px;
  border-radius:2px;background:var(--accent);}
.acc-text{margin:0;padding:0 1.4rem 1.3rem;font-size:.94rem;color:var(--muted);max-width:46rem;}
@media (min-width:720px){.acc-body{grid-template-columns:1fr 1fr;gap:2rem;}}

/* ── Proof / principles ────────────────────────────────────────────── */
.quote-card{margin-top:1.2rem;padding:1.5rem 1.7rem;}
.quote-card p{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.01em;
  line-height:1.5;max-width:50rem;}
.quote-card .who-org{display:block;margin-top:.8rem;font-size:.82rem;color:var(--faint);}
.principles{display:grid;gap:.8rem;}
.principles>*{min-width:0;}
.skill h3{margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;}
.skill p{margin:.25rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.5;}
@media (min-width:720px){.principles{grid-template-columns:1fr 1fr;}}
@media (min-width:1024px){.principles{grid-template-columns:1fr 1fr 1fr;}}

/* ── Reduced motion: everything still, state still readable ────────── */
@media (prefers-reduced-motion:reduce){
  .marquee-track,.agent,.agent *,.cc-type,.cc-status .st,.sp,.caret,.mini-rail i,.wire::after,
  .alist li,.orbit .o,.orbit .o b,.beam::before,.chip,.viz-line::after{animation:none !important;}
  .viz *,.fb::before,.ledger article,.rail-step::before{transition:none !important;}
  .tl{width:auto;} .alist li{opacity:1;} .cc-type{width:auto;} .cc-status .st1{opacity:1;}
  .marquee-track{flex-wrap:wrap;width:auto;}
  .mini-rail i{background:var(--accent);border-color:var(--accent);}
  html.js .funnel .fb i::before{scale:1 1;}
}

/* ── Background: terminal code field (replaces the black hole here) ── */
.bg-code{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}
.bg-code::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 480px at 85% -8%,var(--accent-soft),transparent 65%),
  radial-gradient(700px 400px at 5% 105%,var(--accent-soft),transparent 65%);}
#code-canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 55%,#000);
  mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 55%,#000);}

/* ── Section eyebrows: command-line prompt ─────────────────────────── */
.eyebrow{margin:0 0 .7rem;font:500 .78rem var(--font-mono);color:var(--accent);
  letter-spacing:.02em;}
.eyebrow::before{content:"~/ai ";color:var(--faint);}
.eyebrow::after{content:"";display:inline-block;width:.55ch;height:1em;margin-left:.5ch;
  vertical-align:-2px;background:var(--accent);animation:caret 1s steps(1) infinite;}

/* ── Patterns borrowed from the references (visual ideas only) ─────── */
/* accent phrase in the headline */
.hero2 h1 .name-line:last-child>span:first-child{color:var(--accent);}
/* mono slash navigation */
.ai-page .site-nav a{font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;}
.ai-page .site-nav a::before{content:"/";margin-right:.35em;color:var(--faint);}
.ai-page .site-nav a:hover::before{color:var(--accent);}

/* ── Use-case switcher (idea from the Vertex-style hero tabs) ──────── */
.uc{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;}
.uc-l{font:500 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin-right:.4rem;width:100%;}
@media (min-width:720px){.uc-l{width:auto;}}
.uc button{appearance:none;display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--surface-solid);color:var(--muted);cursor:pointer;
  font:600 .85rem var(--font-body);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);}
.uc button:hover{border-color:var(--accent-line);color:var(--accent);}
.uc button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--btn-ink);}
html:not(.js) .uc{display:none;}

/* ── Grid pulse (pointer trail on a hairline grid) ─────────────────── */
.ai-page{--grid-line:rgba(16,18,35,.055);}
.dark .ai-page{--grid-line:rgba(232,236,244,.06);}
.bg-code::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:36px 36px;}
#grid-canvas{position:absolute;inset:0;width:100%;height:100%;}