/* Hero film: one continuous take over a workspace of real-looking tools.
   World units are px at scale 1 (world is 1000 x 625). A JS camera scales and pans it. */

.hero .wrap.hero-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero .hero-top h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.04; }
.hero .hero-side .sub { margin-top: 0; }
.hero .wrap.film-wrap { display: block; margin-top: clamp(40px, 5vw, 72px); position: relative; z-index: 2; }

.film {
  container-type: inline-size;
  --ink-win: #ffffff;
  --win-line: #e6e8f1;
  --win-text: #1b1e36;
  --win-muted: #6b7088;
  position: relative; aspect-ratio: 16 / 9; max-height: 78vh; width: 100%;
  border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #0f1124;
  border: 1px solid #ffffff14;
  box-shadow: 0 50px 120px #00000070, inset 0 1px 0 #ffffff10;
}
.film-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 55% at 72% 40%, #6541ea2e, transparent 70%),
    radial-gradient(40% 50% at 25% 70%, #50e3c214, transparent 70%),
    radial-gradient(#ffffff0d 1px, transparent 1px) 0 0 / 22px 22px;
}
.world { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; transform-origin: 0 0; font-size: 12px; line-height: 1.4; color: var(--win-text); }

/* ---- windows ---- */
.win {
  position: absolute; left: 0; top: 0; background: var(--ink-win); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 0 #ffffff inset, 0 14px 28px #05061566, 0 2px 6px #0506152e;
  transform-origin: 50% 50%; will-change: opacity;
}
.win .bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid var(--win-line); background: #f6f7fb; font-weight: 600; font-size: 11.5px; color: var(--win-muted); }
.win .bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe2ec; }
.win .bar span { margin-inline-start: 8px; }
.win.focus { box-shadow: 0 0 0 2px #50e3c2, 0 24px 60px #05061588; }

.mail-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--win-line); color: var(--win-muted); white-space: nowrap; overflow: hidden; }
.mail-row b { color: var(--win-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.mail-row span { overflow: hidden; text-overflow: ellipsis; }
.mail-row.unread { background: #f3f0ff; }
.mail-row.unread b, .mail-row.unread span { font-weight: 700; color: var(--win-text); }
.mail-row.unread b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6541ea; margin-inline-end: 6px; vertical-align: middle; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid span { border-inline-start: 1px solid var(--win-line); border-bottom: 1px solid var(--win-line); padding: 5px 7px; height: 26px; font-size: 11px; color: var(--win-muted); white-space: nowrap; overflow: hidden; }
.grid span:nth-child(-n+4) { background: #eef7f1; font-weight: 600; color: #2e6b47; }

.ai-body { padding: 12px; display: grid; gap: 8px; }
.ai-body .b { border-radius: 12px; padding: 8px 11px; max-width: 92%; }
.ai-body .me { background: #f1f2f7; justify-self: start; }
.ai-body .bot { background: #f3f0ff; justify-self: end; min-height: 38px; }
.copy-btn { justify-self: end; font-size: 11px; font-weight: 600; color: #6541ea; border: 1px solid #d9d0ff; border-radius: 99px; padding: 2px 10px; }

.cal { padding: 8px 10px 10px; height: calc(100% - 30px); display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.cal .days { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; font-weight: 600; color: var(--win-muted); font-size: 11px; }
.cal .slots { position: relative; background: repeating-linear-gradient(#0000 0 calc(100% / 6 - 1px), var(--win-line) 0 calc(100% / 6)); }
.cal .slots > * { position: absolute; inset-inline-start: calc(var(--d) * 20% + 2px); width: calc(20% - 4px); top: calc(var(--t) * 100% / 6.5); height: calc(var(--h) * 100% / 6.5 - 3px); border-radius: 5px; }
.cal .slots i { background: #e3e6f0; }
.cal .slots i:nth-child(odd) { background: #ece8ff; }
.cal .free { display: grid; place-items: center; padding: 3px 4px; line-height: 1.2; text-align: center; font-size: 10.5px; font-weight: 700; color: #13735d; background: #dffbf3; border: 1.5px dashed #50e3c2; opacity: 0; }

.crm { font-size: 11.5px; }
.crm .th, .crm .tr { display: grid; grid-template-columns: 1.1fr .9fr 1fr 1.2fr; align-items: center; gap: 6px; padding: 0 12px; height: 34px; border-bottom: 1px solid var(--win-line); white-space: nowrap; overflow: hidden; }
.crm .th { height: 28px; color: var(--win-muted); font-weight: 600; font-size: 10.5px; background: #fafbfd; }
.crm .tr em { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ece8ff; color: #6541ea; font-style: normal; font-weight: 700; font-size: 10px; margin-inline-end: 5px; }
.pill { justify-self: start; border-radius: 99px; padding: 2px 9px; font-weight: 600; font-size: 10.5px; }
.p-work { background: #fff0c2; color: #6c4b00; }
.p-sent { background: #e8e1ff; color: #4f329e; }
.p-new { background: #c6f7ea; color: #185b48; }
.crm .tr.new { background: #fbfffd; }
.crm .tr.new.lit { box-shadow: inset 3px 0 0 #50e3c2; }

.chat-bar { height: 44px !important; gap: 10px !important; background: #fff !important; }
.chat-bar .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ffb38a, #ff7a9a); color: #fff; display: grid; place-items: center; font-weight: 700; margin: 0 !important; }
.chat-bar b { display: block; color: var(--win-text); font-size: 12.5px; }
.chat-bar small { font-weight: 500; font-size: 10.5px; }
.chat-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #f4f5f9; height: calc(100% - 44px - 44px); overflow: hidden; }
.msg { position: relative; border-radius: 14px; padding: 9px 12px 18px; max-width: 86%; line-height: 1.45; }
.msg time { position: absolute; inset-inline-end: 10px; bottom: 4px; font-size: 9.5px; color: var(--win-muted); }
.msg.in { background: #fff; align-self: flex-start; border-start-start-radius: 4px; box-shadow: 0 1px 2px #0000000f; }
.msg.out { background: #dff7ef; align-self: flex-end; border-start-end-radius: 4px; }
.msg.draft { align-self: flex-end; background: #fff; border: 1.5px dashed #6541ea; padding: 8px 12px 10px; min-height: 30px; }
.draft-tag { display: block; font-size: 10px; font-weight: 700; color: #6541ea; margin-bottom: 3px; }
.sent-manual, .sent-auto, .msg.draft { display: none; }
.approve-bar { position: absolute; inset: auto 0 0 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #fff; border-top: 1px solid var(--win-line); color: var(--win-muted); font-size: 11px; opacity: 0; }
.approve-bar .ok { background: #6541ea; color: #fff; font-weight: 700; border-radius: 99px; padding: 6px 14px; font-size: 11.5px; }
.approve-bar .ok.done { background: #1f9d7d; }

.timer { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; background: #2a2210; color: #ffd27a; border: 1px solid #f2b13c66; border-radius: 99px; padding: 5px 12px 5px 10px; font-weight: 600; font-size: 11.5px; white-space: nowrap; box-shadow: 0 10px 24px #0007; }
.timer i { width: 8px; height: 8px; border-radius: 50%; background: #f2b13c; animation: pulse 1.4s infinite; }
.timer.ok { background: #0f2e27; color: #8ff0d6; border-color: #50e3c266; }
.timer.ok i { background: #50e3c2; animation: none; }

.spec { position: absolute; left: 0; top: 0; width: 384px; background: #fff; border-radius: 16px; padding: 18px 20px 10px; box-shadow: 0 24px 48px #0009, 0 0 0 1px #ffffff40; opacity: 0; }
.spec-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.spec-head span { color: #6541ea; font-weight: 700; font-size: 11px; letter-spacing: .02em; }
.spec-head b { font-size: 19px; letter-spacing: -.01em; }
.spec-row { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--win-line); font-size: 12.5px; }
.spec-row span { color: var(--win-muted); }
.spec-row b { font-weight: 600; position: relative; padding-inline-start: 20px; }
.spec-row b::before { content: "✓"; position: absolute; inset-inline-start: 0; top: -1px; color: #1f9d7d; font-weight: 800; }

.chip { position: absolute; left: 0; top: 0; background: #6541ea; color: #fff; font-weight: 700; font-size: 11.5px; padding: 5px 12px; border-radius: 99px; white-space: nowrap; opacity: 0; box-shadow: 0 10px 24px #6541ea55; }
.chip-b { background: #1f9d7d; box-shadow: 0 10px 24px #1f9d7d55; }
.flow-tag { position: absolute; left: 0; top: 0; color: #8ff0d6; font-weight: 600; font-size: 12px; white-space: nowrap; opacity: 0; display: flex; align-items: center; gap: 8px; }
.flow-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #50e3c2; box-shadow: 0 0 0 4px #50e3c233; }

.cur { position: absolute; left: 0; top: 0; opacity: 0; z-index: 20; pointer-events: none; }
.cur svg { width: 22px; height: 22px; display: block; filter: drop-shadow(0 3px 5px #0009); }
.cur .lbl { position: absolute; left: 16px; top: 18px; background: #f2b13c; color: #141629; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 6px 99px 99px 99px; white-space: nowrap; }
.cur.human .lbl { background: #6541ea; color: #fff; }

/* ---- overlays (not scaled with the world) ---- */
.caption {
  position: absolute; inset: 0 0 auto 0; padding: clamp(14px, 3.4cqw, 34px) clamp(16px, 4cqw, 40px) 9cqw;
  background: linear-gradient(#0f1124f2, #0f1124b0 55%, transparent); pointer-events: none; z-index: 5;
}
.cap-kicker { color: var(--mint); font-weight: 600; font-size: clamp(12px, 1.9cqw, 15px); min-height: 1.3em; }
.cap-title { color: #fff; font-weight: 700; font-size: clamp(18px, 4.1cqw, 36px); line-height: 1.12; letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; min-height: 1.15em; }
.cap-title em { font-style: normal; color: var(--mint); }
.cap-title .w { display: inline-block; white-space: pre; }
.hops { position: absolute; inset-inline-start: clamp(14px, 3.4cqw, 40px); bottom: clamp(12px, 2.6cqw, 26px); z-index: 5; color: #ffd27a; background: #2a2210e6; border: 1px solid #f2b13c55; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; opacity: 0; font-variant-numeric: tabular-nums; }
.hops b { font-size: 15px; }

.film-ui { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

@media (max-width: 860px) {
  .hero .wrap.hero-top { grid-template-columns: 1fr; }
  .film { aspect-ratio: 1 / 1; max-height: none; border-radius: 20px; }
  .caption { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .timer i { animation: none; }
}

/* ---- mapping layer: the route the work actually took ---- */
.route { position: absolute; left: 0; top: 0; width: 1000px; height: 625px; overflow: visible; pointer-events: none; z-index: 8; }
.route polyline { fill: none; stroke: #f2b13c; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pin { position: absolute; left: 0; top: 0; z-index: 9; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; display: grid; place-items: center; background: #f2b13c; color: #141629; font-weight: 800; font-size: 12px; box-shadow: 0 0 0 5px #f2b13c33, 0 6px 14px #0008; opacity: 0; }
.spec { z-index: 10; }

/* ---- flow: context the AI gathered, and the reply that closes the loop ---- */
.ctx { display: none; align-self: flex-end; max-width: 92%; background: #fff; border: 1px solid #d9d0ff; border-radius: 12px; padding: 8px 10px; flex-wrap: wrap; gap: 5px; }
.ctx-h { width: 100%; font-size: 10px; font-weight: 700; color: #6541ea; }
.ctx-c { font-size: 10.5px; font-weight: 600; background: #f3f0ff; color: #4f329e; border-radius: 99px; padding: 2px 8px; }
.in2 { display: none; }

/* ---- the turnaround: warm chaos tint → cool order tint, the agent, the shockwave ---- */
.film-warm, .film-after { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.film-warm { background: radial-gradient(60% 60% at 60% 55%, #f2b13c24, transparent 70%); }
.film-after { background: radial-gradient(55% 60% at 50% 50%, #50e3c21f, transparent 72%), linear-gradient(#50e3c20b 1px, transparent 1px) 0 0 / 100% 30px, linear-gradient(90deg, #50e3c20b 1px, transparent 1px) 0 0 / 30px 100%; }
.agent {
  position: absolute; left: 0; top: 0; z-index: 12; display: flex; align-items: center; gap: 12px;
  background: #141629; color: #fff; border: 1.5px solid #50e3c2; border-radius: 99px; padding: 10px 24px;
  box-shadow: 0 0 0 6px #50e3c21a, 0 0 40px #50e3c255, 0 14px 30px #0008; white-space: nowrap; opacity: 0;
}
/* The agent's mark is the logo's own "op" (eyes and the p's descender as a beak): x 57.26-86.98%, y 23.4-99.6%. */
.agent .eyes, .end-eyes {
  background: url(img/brainops-logo.png) no-repeat 81.47% 98.3% / 336.5% auto;
}
.agent .eyes { display: block; width: 38px; aspect-ratio: 29.72 / 19.27; flex: none; }
.agent b { display: block; font-size: 12.5px; line-height: 1.35; }
.agent .tx { display: grid; gap: 2px; overflow: hidden; }
.agent .st { display: block; font-size: 11px; line-height: 1.35; color: #8ff0d6; font-weight: 500; }
.shock { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid #50e3c2; box-shadow: 0 0 24px #50e3c2, inset 0 0 18px #50e3c288; opacity: 0; z-index: 11; pointer-events: none; }

/* ---- ending: the workspace folds into the agent, the agent becomes the logo ---- */
.film-end { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 2vw, 24px); text-align: center; padding: 24px; pointer-events: none; opacity: 0; }
.film-end.live { pointer-events: auto; }
.film-open { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 24px); text-align: center; padding: 24px; pointer-events: none; background: radial-gradient(35% 32% at 50% 46%, #50e3c22e, #6541ea14 55%, transparent); }
.open-logo { position: relative; width: min(62%, 560px); }
.open-logo img { width: 100%; height: auto; display: block; }
.open-logo .pupil { position: absolute; z-index: 1; top: 50.1%; width: 2.55%; aspect-ratio: 1; border-radius: 50%; background: var(--mint); transform: translate(-50%, -50%); }
.open-logo .pupil.l { left: 66.16%; }
.open-logo .pupil.r { left: 81.22%; }
.open-line { position: relative; color: #fff; font-weight: 700; font-size: clamp(17px, 3.6cqw, 32px); letter-spacing: -.015em; }
.open-line em { font-style: normal; color: var(--mint); }
@media (max-width: 860px) { .open-logo { width: 78%; } }
.end-glow { position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 2.2; transform: translate(-50%, -50%); background: radial-gradient(closest-side, #50e3c22e, #6541ea14 55%, transparent); pointer-events: none; }
.end-logo { position: relative; width: min(62%, 560px); }
.end-logo img { width: 100%; height: auto; display: block; }
.end-logo .pupil { position: absolute; z-index: 1; top: 50.1%; width: 2.55%; aspect-ratio: 1; border-radius: 50%; background: var(--mint); }
.end-logo .pupil.l { left: 66.16%; }
.end-logo .pupil.r { left: 81.22%; }
.end-line { position: relative; color: #fff; font-weight: 700; font-size: clamp(17px, 3.6cqw, 32px); letter-spacing: -.015em; }
.end-line em { font-style: normal; color: var(--mint); }
.end-cta { position: relative; }
@media (max-width: 860px) { .end-logo { width: 78%; } }

/* The same crop, sitting exactly over the bowls in the closing logo. */
.end-eyes { position: absolute; z-index: 2; left: 57.26%; top: 23.4%; width: 29.72%; height: 76.2%; opacity: 0; transform-origin: 50% 50%; }