/* Home page band: agentic marketing (rebuilt 18 Oct from vibe-preview): agentic marketing. Six AI agents plan, write, design, publish
   and optimise a week of marketing; a human strategist approves every piece. Bold look. Sample content only. */
.vb { position: relative; padding: clamp(96px, 14vh, 160px) 0; overflow: hidden; background: radial-gradient(70% 70% at 80% 30%, oklch(0.22 0.07 358) 0%, var(--ink-0) 70%); }
.vb-grid { display: grid; gap: 48px; }
@media (min-width: 1100px) { .vb-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.vb-h { font: 900 clamp(2.6rem, 5.4vw, 5.2rem)/.92 var(--f-display); letter-spacing: -0.045em; text-transform: uppercase; text-wrap: balance; }
.vb-h span { background: linear-gradient(90deg, #ff0a7a, #ff6a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vb-lead { margin-top: 22px; max-width: 36ch; font: 500 clamp(1.05rem, 1.4vw, 1.25rem)/1.55 var(--f-body); color: var(--fg-2); }
.vb-pts { margin: 32px 0 0; padding: 0; display: grid; border-top: 1px solid var(--rule); }
.vb-pts li { list-style: none; display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--rule-soft); }
.vb-pts b { display: block; font: 700 var(--t-s)/1.3 var(--f-display); }
.vb-pts span { font-size: .9rem; color: var(--fg-3); line-height: 1.45; }
.vb-pts i { font: 400 11px/1.8 var(--f-mono); color: #FF0A7A; font-style: normal; }
.vb-cta { display: inline-flex; margin-top: 32px; }

/* the board */
.vb-board { padding: clamp(14px, 2vw, 22px); border: 1px solid var(--rule); background: oklch(0.13 0.008 358 / .9); }
.vb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.vb-top > p { margin: 0; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.vb-live { display: inline-flex; align-items: center; gap: 8px; color: #FF0A7A !important; }
.vb-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF0A7A; animation: vb-blink 1.1s ease-in-out infinite; }
@keyframes vb-blink { 50% { opacity: .2; } }
.vb-replay { margin-left: auto; padding: 10px 16px; border: 1px solid #FF0A7A; background: none; color: #fff; cursor: pointer; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.vb-replay:hover, .vb-replay:focus-visible { background: #FF0A7A; outline: none; }

/* the agents */
.vb-agents { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
@media (max-width: 700px) { .vb-agents { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ag { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--rule-soft); background: #0d0d0d; text-align: center; transition: border-color .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.ag i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font: 700 14px/1 var(--f-display); color: #fff; background: var(--c); box-shadow: 0 0 0 0 var(--c); }
.ag b { font: 700 .72rem/1.1 var(--f-display); }
.ag small { font: 400 9px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.ag.work { border-color: var(--c); transform: translateY(-4px); }
.ag.work i { animation: ag-pulse 1s ease-out infinite; }
.ag.work small { color: var(--c); }
.ag.human i { background: #fff; color: #0d0d0d; }
@keyframes ag-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* the week */
.vb-cal { display: grid; grid-template-columns: repeat(7, minmax(94px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.vb-day { min-height: 410px; display: grid; gap: 8px; align-content: start; }
.vb-day > p { margin: 0 0 2px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.vc { position: relative; height: 188px; perspective: 900px; cursor: pointer; animation: vc-drop .7s cubic-bezier(.16, 1, .3, 1) both; }
.vc.tall { height: 236px; }
@keyframes vc-drop { from { opacity: 0; transform: translateY(-30px) rotate(-4deg) scale(.9); } }
.vc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.vc.flip .vc-in { transform: rotateY(180deg); }
.vc-f, .vc-b { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; border-radius: 4px; display: flex; flex-direction: column; }
.vc-f { background: #0d0d0d; color: #fff; border: 1px solid #262626; }
.vc-b { transform: rotateY(180deg); padding: 12px; background: #fff; color: #161616; font: 500 .72rem/1.45 var(--f-body); gap: 6px; }
.vc-b b { font: 700 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #FF0A7A; }
.vc-b small { margin-top: auto; color: #777; font-size: .64rem; line-height: 1.35; }
.vc-ch { display: flex; align-items: center; gap: 6px; padding: 8px 9px; font: 600 .62rem/1 var(--f-body); }
.vc-ch i { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-style: normal; font-size: 9px; color: #fff; }
.vc-art { position: relative; flex: 1; display: grid; place-items: end start; padding: 9px; text-align: left; overflow: hidden; background: #000 center / cover no-repeat; }
.vc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .85)); }
.vc:hover .vc-art { background-size: 112%; } .vc-art { transition: background-size 1.2s cubic-bezier(.16, 1, .3, 1); }
.vc-art em { position: relative; z-index: 1; text-shadow: 0 2px 12px rgb(0 0 0 / .6); font-style: normal; font: 900 clamp(.76rem, 1vw, .98rem)/1 var(--f-display); letter-spacing: -0.03em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.vc-art .play { z-index: 1; position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgb(0 0 0 / .4); color: #fff; display: grid; place-items: center; font-size: 10px; }
.vc-who { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 9px; font: 400 .56rem/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: #bbb; }
.vc-who span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.vc-ok { color: #19c37d; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1); white-space: nowrap; }
.vc.ok .vc-ok { opacity: 1; transform: none; }
.vc.ok .vc-f { border-color: #19c37d55; }
.vc-rep { flex: 1; padding: 10px; display: grid; align-content: end; gap: 6px; }
.vc-rep .bars { display: flex; align-items: end; gap: 4px; height: 72px; }
.vc-rep .bars i { flex: 1; height: var(--h); background: linear-gradient(#ff6a00, #ff0a7a); border-radius: 2px 2px 0 0; animation: vc-grow 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
@keyframes vc-grow { from { height: 0; } }
.vc-rep p { margin: 0; font: 900 .9rem/1.05 var(--f-display); text-transform: uppercase; }
.vc-rep small { font: 400 .58rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .7; }

/* the activity log */
.vb-log { margin-top: 12px; height: 132px; overflow: hidden; padding: 10px 12px; border: 1px solid var(--rule-soft); background: #070707; font: 400 .74rem/1.55 var(--f-mono); display: flex; flex-direction: column-reverse; }
.vb-log p { margin: 0; color: var(--fg-2); animation: lg-in .5s ease both; }
.vb-log p b { font-weight: 400; color: var(--c); }
.vb-log p time { color: var(--fg-3); margin-right: 8px; }
@keyframes lg-in { from { opacity: 0; transform: translateY(8px); } }
.vb-sample { margin-top: 10px; font: 400 10px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .vc, .vc-rep .bars i, .vb-log p, .ag.work i, .vb-live::before { animation: none; } .vc-in { transition: none; } }
.vb-grid > * { min-width: 0; }   /* the week scrolls inside its own box on phones instead of widening the column */

/* design fix 25 Oct: no gradient text, solid magenta */
.vb-h span { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #FF0A7A !important; -webkit-text-fill-color: currentColor !important; }