/* Pecu tokens. Structure and values follow the shadcn "amber-minimal" theme
   (tweakcn.com/r/themes/amber-minimal.json); see apps/pecu/docs/design-system.md. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
:root {
  color-scheme: light;
  --background: oklch(1 0 0);
  --foreground: oklch(0.2686 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2686 0 0);
  --primary: oklch(0.7686 0.1647 70.0804);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.967 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.551 0.0234 264.3637);
  --accent: oklch(0.9869 0.0214 95.2774);
  --accent-foreground: oklch(0.4732 0.1247 46.2007);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9276 0.0058 264.5313);
  --input: oklch(0.9276 0.0058 264.5313);
  --ring: oklch(0.7686 0.1647 70.0804);
  --chart-1: oklch(0.7686 0.1647 70.0804);
  --chart-2: oklch(0.6658 0.1574 58.3183);
  --chart-3: oklch(0.5553 0.1455 48.9975);
  --chart-4: oklch(0.4732 0.1247 46.2007);
  --chart-5: oklch(0.4137 0.1054 45.9038);
  /* Dark tile: the theme's dark-mode surface and text. */
  --dark: oklch(0.2046 0 0);
  --dark-card: oklch(0.2686 0 0);
  --dark-foreground: oklch(0.9219 0 0);
  --dark-muted-foreground: oklch(0.7155 0 0);
  --dark-border: oklch(0.3715 0 0);
  --radius: 0.375rem;
  --radius-sm: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
  --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --fast: 160ms;
  --tile: 480ms;
  --stagger: 60ms;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; overflow-x: clip; }
main { max-width: 1120px; margin: auto; padding: 20px 32px 40px; }
a { color: var(--accent-foreground); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--primary); color: var(--primary-foreground); }
code { font: 0.9em var(--font-mono); background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--foreground); overflow-wrap: anywhere; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2; padding: 12px 20px; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 16px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 8px 0; }
.wordmark { color: var(--accent-foreground); font: 750 22px var(--font-mono); letter-spacing: -1px; text-decoration: none; }
nav { display: flex; align-items: center; gap: 24px; }
nav a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; color: var(--foreground); text-decoration: none; }
nav a:hover { color: var(--accent-foreground); }

/* Hero: the transparent reveal runs edge to edge; the title sits under it. */
.hero { padding: 0 0 56px; }
.stage { position: relative; width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 16 / 7; }
.reveal, .reveal-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
.reveal-still[hidden] { display: none; }
.stage.is-still .reveal { visibility: hidden; }
.hero-copy { display: grid; gap: 28px; justify-items: center; padding: 4px 8px 0; text-align: center; }
.hero-copy .actions { width: 100%; justify-content: center; }
.statement { margin: 0; max-width: 18ch; font-size: clamp(36px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 750; color: var(--foreground); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-xs); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform var(--fast) ease, box-shadow var(--fast) ease, background-color var(--fast) ease; }
.button:hover { background: var(--secondary); }
.button.primary { color: var(--primary-foreground); background: var(--primary); border-color: transparent; box-shadow: var(--shadow-sm); }
.button.primary:hover { background: oklch(0.7386 0.1647 70.0804); }
.button:active { transform: translateY(1px); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; }
.hint { font-size: 14px; color: inherit; opacity: .85; }
.tile-actions .hint { flex-basis: 100%; }

/* Section */
.tools { margin-bottom: 56px; }
h2 { font-size: 30px; line-height: 1.25; letter-spacing: -0.03em; margin: 0 0 24px; font-weight: 700; }
h3 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 700; }
h3 small { display: block; margin-top: 6px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted-foreground); }
p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--muted-foreground); }
p:last-child { margin-bottom: 0; }

/* Card */
.card { padding: 28px; background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }

/* Bento grid */
.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.bento { position: relative; grid-column: span 3; display: flex; flex-direction: column; gap: 22px; min-width: 0; overflow: hidden; }
.bento.agent { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; background: var(--dark); color: var(--dark-foreground); border-color: var(--dark-border); box-shadow: var(--shadow-lg); }
/* Three tools, three tints: amber for Aero, sage for Stocks, slate for evmSDK. */
.bento.aero, .bento.stocks, .bento.evm { grid-column: span 2; padding: 24px; gap: 22px; min-height: 552px; }
.bento:is(.aero, .stocks, .evm) .tile-visual { height: 180px; min-height: 180px; flex: none; }
.bento:is(.aero, .stocks, .evm) .tile-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.bento:is(.aero, .stocks, .evm) h3 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
.bento:is(.aero, .stocks, .evm) h3 small { font-size: 16px; line-height: 1.5; font-weight: 400; }
.bento:is(.aero, .stocks, .evm) .tile-copy > p { line-height: 1.5; }
.bento:is(.aero, .stocks, .evm) .tile-actions { margin-top: auto; padding-top: 2px; flex-wrap: nowrap; gap: 20px; }
.bento:is(.aero, .stocks, .evm) .tile-actions .button { width: 184px; height: 48px; flex: none; padding: 10px 8px; white-space: nowrap; }
.bento:is(.aero, .stocks, .evm) .text-link { white-space: nowrap; }
.bento.aero { --tint-ink: var(--accent-foreground); background: oklch(0.975 0.035 85); border-color: oklch(0.9 0.07 85); }
.bento.stocks { --tint-ink: oklch(0.42 0.09 150); background: oklch(0.965 0.03 150); border-color: oklch(0.88 0.06 150); }
.bento.evm { --tint-ink: oklch(0.42 0.06 255); background: oklch(0.965 0.018 255); border-color: oklch(0.88 0.035 255); }
.bento.stocks .basket .row { color: var(--tint-ink); }
.bento.stocks .basket i { background: oklch(0.62 0.13 150); }
.bento.stocks .basket .row:nth-child(2) i { background: oklch(0.72 0.11 150); }
.bento.stocks .basket .row:nth-child(3) i { background: oklch(0.82 0.08 150); }
.bento.evm .inspect .addr { color: var(--tint-ink); }
/* The notice stands apart from the tools and reads as a warning. */
.notice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; align-items: start; margin-top: 32px; background: oklch(0.965 0.028 25); border-color: oklch(0.87 0.09 25); }
.tile-copy > p { font-size: 16px; line-height: 1.6; }
.tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.tile-visual { position: relative; min-height: 120px; display: flex; justify-content: center; align-items: center; }

/* Agent tile */
.agent .tile-copy p, .agent h3 small { color: var(--dark-muted-foreground); }
.agent .tile-copy a { color: var(--primary); }
.agent .tile-copy code, .agent .hint code { background: var(--dark-card); border-color: var(--dark-border); color: var(--dark-foreground); }
.agent .tile-copy .button { background: var(--dark-card); border-color: var(--dark-border); color: var(--dark-foreground); }
.agent .tile-copy .button:hover { background: var(--dark-border); }
.agent .tile-copy .button.primary { background: var(--primary); color: var(--primary-foreground); border-color: transparent; }
.agent .tile-copy .button.primary:hover { background: oklch(0.7386 0.1647 70.0804); }
.agent .tile-visual { min-height: 320px; align-items: stretch; }
.snail { position: absolute; left: -30%; bottom: -24%; width: 118%; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(#000 62%, transparent 92%); mask-image: linear-gradient(#000 62%, transparent 92%); }
.snail img, .snail video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.snail video { opacity: 0; transition: opacity 180ms ease; }
.snail.is-live video { opacity: 1; }
.snail.is-live img { visibility: hidden; }
.chat { position: absolute; right: 0; top: 0; width: 60%; display: grid; gap: 10px; justify-items: end; }
.bubble { max-width: 100%; padding: 12px 16px; border-radius: var(--radius-xl); font-size: 14px; line-height: 1.45; }
.bubble.you { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.bubble.bot { display: grid; gap: 4px; justify-self: start; background: var(--card); color: var(--card-foreground); border-bottom-left-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.bubble.bot > b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-foreground); }
.bubble .meta { font-size: 12px; color: var(--muted-foreground); }
.bubble .code { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
.bubble .code em { font-style: normal; font-family: var(--font-mono); color: var(--foreground); background: var(--secondary); padding: 1px 5px; border-radius: var(--radius-sm); }

/* Aero tile: the six-ribbon mark, in the theme's amber ramp. */
.aero .tile-visual { flex-direction: column; gap: 18px; align-items: stretch; }
.ribbons { position: relative; width: 100%; margin: 0 auto; display: grid; gap: 5px; }
.ribbons i { --left: 0; --width: 100%; display: block; height: 11px; width: var(--width); margin-left: var(--left); border-radius: 999px; background: var(--c); transform-origin: right center; }
.ribbons i:nth-child(1) { --left: 29%; --width: 58%; --c: var(--chart-5); }
.ribbons i:nth-child(2) { --left: 15%; --width: 50%; --c: var(--chart-4); }
.ribbons i:nth-child(3) { --left: 4%; --width: 46%; --c: var(--chart-3); }
.ribbons i:nth-child(4) { --left: 4%; --width: 46%; --c: var(--chart-2); }
.ribbons i:nth-child(5) { --left: 17%; --width: 61%; --c: oklch(0.83 0.13 75); }
.ribbons i:nth-child(6) { display: none; }
.cmd { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 14px 18px; border: 0; border-radius: var(--radius-lg); background: var(--dark); color: var(--dark-foreground); font-size: 12.5px; line-height: 1.5; white-space: pre; overflow: hidden; }
.cmd span { color: var(--primary); }

/* Stocks tile */
.basket { width: 100%; display: grid; gap: 12px; padding-bottom: 24px; }
.basket .track { display: block; border-radius: var(--radius); background: oklch(0.91 0.055 150); overflow: hidden; }
.basket .row { display: grid; grid-template-columns: 58px 1fr 42px; align-items: center; gap: 12px; font: 600 13px var(--font-mono); color: var(--accent-foreground); }
.basket .row b { text-align: right; font-weight: 600; }
.basket i { --w: 50%; display: block; height: 26px; width: var(--w); border-radius: var(--radius); background: var(--chart-1); transform-origin: left center; }
.basket .row:nth-child(2) i { background: var(--chart-2); }
.basket .row:nth-child(3) i { background: var(--chart-3); }

/* evmSDK tile */
.inspect { display: grid; gap: 8px; width: calc(100% - 12px); padding: 20px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); font: 14px var(--font-mono); color: var(--foreground); transform: rotate(-3deg); }
.inspect .addr { font-weight: 700; color: var(--accent-foreground); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.inspect .line { display: flex; justify-content: space-between; gap: 12px; }
.inspect em { font-style: normal; color: var(--muted-foreground); }
.inspect .num { font-weight: 700; }

/* Notice tile */
.notice h3 { color: oklch(0.45 0.18 27); grid-column: 1 / -1; margin-bottom: 0; }
.notice p { color: oklch(0.42 0.14 27); font-size: 15px; }

/* Footer */
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 24px 4px 8px; border-top: 1px solid var(--border); }
footer a { display: inline-flex; min-height: 44px; align-items: center; font-size: 15px; }

/* Arrival: tiles rise in with a stagger; each diagram has one motion of its own. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .bento:not(.arriving) { opacity: 0; }
  .bento.arriving { animation: tile-arrive var(--tile) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
  .bento.arriving .bubble { animation: bubble-pop 420ms var(--ease-out) both; }
  .bento.arriving .bubble.you { animation-delay: calc(var(--i, 0) * var(--stagger) + 260ms); }
  .bento.arriving .bubble.bot { animation-delay: calc(var(--i, 0) * var(--stagger) + 720ms); }
  .bento.arriving .ribbons i { animation: ribbon-streak 560ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger) + var(--n) * 70ms); }
  .ribbons i:nth-child(1) { --n: 0; } .ribbons i:nth-child(2) { --n: 1; } .ribbons i:nth-child(3) { --n: 2; }
  .ribbons i:nth-child(4) { --n: 3; } .ribbons i:nth-child(5) { --n: 4; } .ribbons i:nth-child(6) { --n: 5; }
  .bento.arriving .basket i { animation: bar-grow 640ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger) + var(--n) * 80ms); }
  .basket .row:nth-child(1) i { --n: 0; } .basket .row:nth-child(2) i { --n: 1; } .basket .row:nth-child(3) i { --n: 2; }
  .bento.arriving .inspect > span { animation: line-in 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * var(--stagger) + 120ms + var(--n) * 70ms); }
  .inspect > span:nth-child(1) { --n: 0; } .inspect > span:nth-child(2) { --n: 1; } .inspect > span:nth-child(3) { --n: 2; } .inspect > span:nth-child(4) { --n: 3; }

  @media (hover: hover) and (pointer: fine) {
    .bento { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
    .bento:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .button:hover { transform: translateY(-1px); }
    .button:active { transform: translateY(1px); }
    .ribbons i { transition: transform 240ms var(--ease-out); }
    .aero:hover .ribbons i:nth-child(odd) { transform: translateX(6px); }
    .aero:hover .ribbons i:nth-child(even) { transform: translateX(-6px); }
    .inspect { transition: transform 240ms var(--ease-out); }
    .evm:hover .inspect { transform: rotate(0); }
    .basket i { transition: transform 240ms var(--ease-out); }
    .stocks:hover .basket i { transform: scaleX(1.04); }
  }
}
@keyframes tile-arrive { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bubble-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ribbon-streak { from { opacity: 0; transform: translateX(48px) scaleX(.3); } to { opacity: 1; transform: none; } }
@keyframes bar-grow { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition-property: background-color, color, opacity; }
  .button:active { transform: none; }
  .bento.arriving { animation: fade-in 240ms ease both; }
  .snail video { display: none; }
  .snail img { visibility: visible !important; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Layout breakpoints */
@media (max-width: 1000px) {
  .bento { padding: 24px; }
  h3 { font-size: 22px; }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .bento, .bento.agent { grid-column: span 2; }
  .bento.aero, .bento.stocks, .bento.evm { grid-column: span 2; width: min(100%, 440px); justify-self: center; }
  .bento.agent { display: flex; gap: 20px; }
  .agent .tile-visual { display: grid; min-height: 0; gap: 0; }
  .chat { position: relative; top: 0; width: min(100%, 360px); margin-left: auto; }
  .snail { position: relative; left: 0; bottom: 0; width: 78%; margin: -36px 0 -28px -14%; }
  .notice { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
}
@media (max-width: 760px) {
  main { padding: 16px 24px 28px; }
  .stage { aspect-ratio: 16 / 9; }
  .reveal, .reveal-still { object-fit: contain; object-position: center; }
  .hero { padding-bottom: 44px; }
  .hero-copy { gap: 22px; }
  nav { gap: 16px; }
  h2 { font-size: 27px; }
}
@media (max-width: 540px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .bento, .bento.agent, .bento.aero, .bento.stocks, .bento.evm { grid-column: 1; }
  .bento { gap: 18px; padding: 24px; }
  .snail { width: 92%; margin: -28px 0 -24px -20%; }
  .statement { font-size: 34px; }
  .actions .button, .tile-actions .button { width: 100%; }
}
@media (max-width: 380px) {
  main { padding-left: 16px; padding-right: 16px; }
  nav { gap: 12px; }
  .topbar { gap: 12px; }
}

@media (max-width: 380px) {
  .bento:is(.aero, .stocks, .evm) { padding: 20px; }
  .bento:is(.aero, .stocks, .evm) .tile-actions { gap: 12px; }
  .bento:is(.aero, .stocks, .evm) .tile-actions .button { width: 148px; font-size: 13px; }
  .cmd { font-size: 11px; padding: 14px 10px; gap: 6px; }
}

@media (hover: hover) and (pointer: fine) {
  .bento:is(.aero, .stocks, .evm):hover,
  .bento:is(.aero, .stocks, .evm) .button:hover { transform: none; }
}

.tool-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; min-width: 0; }
.tool-grid > .bento { grid-column: auto; width: 100%; }
.tool-grid .tile-visual { container-type: inline-size; }
.tool-grid .cmd { font-size: clamp(9px, 4.2cqw, 12.5px); }
@media (max-width: 1100px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, 440px); justify-self: center; gap: 18px; }
}
@media (max-width: 380px) {
  .topbar { flex-wrap: wrap; }
  .topbar nav { width: 100%; justify-content: space-between; gap: 8px; }
}