/* =====================================================================================================================
   DashMage  -  the home page hero and "The Transmutation" (js/heroanim.js)

   The hero: a navy panel with a faint grid and ghosted chart bars; the promise on the left, the console on the right
   with orange corner brackets over an offset block; under them a white card numbering the act on screen, like the
   reference's slider cards ("01. Forex").

   The console's stage carries the animation's layers over the live dashboard (#HeroDemo), each switched by a state
   class on the stage:
     .tm-drop    the rune ring and the file           s-armed, s-drag, s-dropped, s-charged
     .tm-read    pillars, model log, scan, counters   s-read, s-model, s-verify
     .tm-tiles   blueprint tiles over the widgets      s-assemble, s-reveal
     .tm-stamp   the build time                        s-stamp, s-stamp-out
     .tm-ask     command bar and pinned answer         s-ask, s-asked, s-answer, s-chart, s-ask-out
     .tm-export  tickets printing from a slot          s-export, s-export-cloud, s-export-out
   And the Ask AI section's chat (.cm, heroanim.js mock) at the end.
   ===================================================================================================================== */

/* ---- The hero ----------------------------------------------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; background: var(--navy); color: var(--panel-mute); padding: 84px 0 0; }
[data-theme="dark"] .hero { background: #0D0F20; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hb-grid { position: absolute; inset: 0; background: var(--panel-grid); -webkit-mask: linear-gradient(180deg, #000 20%, transparent 95%); mask: linear-gradient(180deg, #000 20%, transparent 95%); }
.hb-bars { position: absolute; left: 0; bottom: 0; width: 46%; height: 70%; display: flex; align-items: flex-end; gap: 3%; padding-left: 2%; opacity: 0.05; }
.hb-bars i { flex: 1; background: #fff; }
.hb-bars i:nth-child(1) { height: 36%; } .hb-bars i:nth-child(2) { height: 52%; } .hb-bars i:nth-child(3) { height: 44%; } .hb-bars i:nth-child(4) { height: 72%; }
.hb-bars i:nth-child(5) { height: 60%; } .hb-bars i:nth-child(6) { height: 88%; } .hb-bars i:nth-child(7) { height: 78%; }
.hero::after { content: ''; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 38%; background: var(--navy-2); }
[data-theme="dark"] .hero::after { background: #15182E; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; padding-bottom: 150px; }
.hero-copy .eyebrow { color: var(--panel-mute); }
.hero-copy h1 { color: #fff; font-size: clamp(40px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; margin: 20px 0 26px; }
.hero-copy h1 em, .hero-copy h1 span { display: block; }
.hero-cta .btn-lg { padding: 0 26px; }
.lede { font-size: 17px; line-height: 1.75; color: var(--panel-mute); max-width: 560px; }
.lede strong { color: #fff; font-weight: 700; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 36px 0 34px; }
.hero .btn-outline { color: #fff; }
.play-btn i { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 9px; padding-left: 2px; transition: background 0.25s ease, color 0.25s ease; }
.play-btn:hover i { background: #fff; color: var(--accent); }
.hero-proof { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 30px; }
.hero-proof li { display: flex; gap: 12px; align-items: center; font: 600 15px/1.3 var(--display); color: #fff; }
.hero-proof i { flex-shrink: 0; width: 20px; height: 22px; display: grid; place-items: center; font-size: 9px; color: var(--accent); background: rgba(254, 89, 36, 0.14); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); padding-bottom: 3px; }

/* The console, bracketed in orange over an offset block. */
.hero-media { position: relative; container: hero / inline-size; }
.hero-console { position: relative; isolation: isolate; padding: 14px; }
.hero-console::before { content: ''; position: absolute; z-index: -1; left: 40px; right: -40px; top: -40px; bottom: 60px; background: var(--navy-3); }
[data-theme="dark"] .hero-console::before { background: #1D2140; }
.hc-corner { position: absolute; width: 44px; height: 44px; border: 3px solid var(--accent); }
.hc-corner.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hc-corner.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hero-console .browser { box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.75); }
.bb-mark { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.06); }
.hero-clock { flex-shrink: 0; display: inline-flex; align-items: stretch; height: 32px; border-radius: 2px; overflow: hidden; font: 600 13px/1 var(--mono); color: #fff; background: rgba(255, 255, 255, 0.06); font-variant-numeric: tabular-nums; }
.hero-clock > * { display: inline-flex; align-items: center; padding: 0 10px; }
.hcl-label { font: 700 10px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-mute); background: rgba(255, 255, 255, 0.05); }
.hero-clock.run .hcl-label { color: #fff; background: var(--accent); animation: tick 1s steps(2) infinite; }
.hero-clock.done .hcl-label { background: #3DD68C; color: var(--navy); }
.hero-clock.done #HeroClock { color: #3DD68C; }
@keyframes tick { 50% { opacity: 0.55; } }
.demo-switch { display: flex; gap: 5px; flex-shrink: 0; transition: opacity 0.3s ease; }
.demo-switch.ha-hide { opacity: 0; pointer-events: none; }
.demo-switch button { width: 16px; height: 16px; border-radius: 2px; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); cursor: pointer; padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.demo-switch button:hover { transform: translateY(-2px); }
.demo-switch button.active { box-shadow: 0 0 0 2px var(--accent); }
.hero-replay { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 2px; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 12.5px/1 var(--display); cursor: pointer; transition: background 0.2s ease; }
.hero-replay:hover { background: var(--accent); }
.hero-replay[hidden] { display: none; }

.browser-body { height: 560px; overflow: hidden; position: relative; background: #F4F4F4; }
.ha-stage { container: stage / inline-size; background: var(--navy-4); }
.ha-stage.s-done { background: #F4F4F4; }
#HeroDemo { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
#HeroDemo.ha-wait { opacity: 0; visibility: hidden; }
#HeroDemo.ha-under { opacity: 1; }
.ha-stage.s-done #HeroDemo { overflow-y: auto; overscroll-behavior: contain; }
#HeroDemo.ha-in { opacity: 1; transition: opacity 0.4s ease; }
#HeroDemo .w { transition: opacity 0.45s ease, filter 0.45s ease, outline-color 0.3s ease; outline: 2px solid transparent; outline-offset: 3px; }
#HeroDemo.tm-dim .w { opacity: 0.28; filter: grayscale(0.7); }
#HeroDemo.tm-dim .w.tm-focus { opacity: 1; filter: none; outline-color: var(--accent); }

@container hero (max-width: 500px) { .browser-url { display: none; } .demo-switch { margin-left: auto; } }
@container hero (max-width: 440px) { .demo-switch button:nth-child(n+6) { display: none; } .hero-replay { font-size: 0; gap: 0; width: 32px; padding: 0; justify-content: center; } .hero-replay i { font-size: 12px; } .hcl-label { display: none !important; } }

/* The numbered act card, over the hero's lower edge. */
.hero-caption-wrap { position: relative; z-index: 3; height: 0; }
.hero-caption { position: relative; top: -60px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 30px; max-width: 860px; min-height: 124px; padding: 22px 30px; background: var(--card); border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(27, 30, 49, 0.45); border-bottom: 3px solid var(--accent); }
.hero-steps { list-style: none; display: grid; }
.hero-steps li { grid-area: 1 / 1; display: grid; grid-template-columns: 70px 170px minmax(0, 1fr); align-items: center; gap: 0 24px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s var(--ease), visibility 0.45s; }
.hero-steps li.now { opacity: 1; visibility: visible; transform: none; }
.hs-no { font: 700 34px/1 var(--display); color: var(--accent); }
.hero-steps strong { font: 700 20px/1.25 var(--display); color: var(--ink); padding-right: 24px; border-right: 1px solid var(--line-2); align-self: stretch; display: flex; align-items: center; }
.hs-txt { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hs-track { grid-column: 1 / -1; display: flex; gap: 5px; margin-top: 16px; }
.hs-track i { position: relative; flex: 1; height: 3px; background: var(--bg-3); overflow: hidden; }
.hs-track i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hs-track i.done::after { transform: none; }
.hs-track i.now::after { animation: trackFill var(--d, 4000ms) linear forwards; }
@keyframes trackFill { to { transform: none; } }
.hero-replay-big { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 3px; background: none; cursor: pointer; font: 600 14px/1 var(--display); color: var(--ink); white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease; }
.hero-replay-big:hover { border-color: var(--accent); color: var(--accent); }
.hero-replay-big[hidden] { display: none; }
#page-home .about-section { padding-top: 170px; }


/* ---- 1  The ring ---------------------------------------------------------------------------------------------- */

.tm-drop { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; overflow: hidden; background: radial-gradient(closest-side, rgba(254, 89, 36, 0.10), transparent 70%) center / 520px 520px no-repeat, var(--panel-grid), var(--navy-4); transition: opacity 0.5s ease; }
.tm-ring { --S: 310px; position: relative; width: var(--S); height: var(--S); transition: transform 0.7s var(--ease), opacity 0.5s ease; }
.tm-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-outer { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 150px 150px; animation: ringSpin 40s linear infinite; }
.r-ticks line { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.r-ticks line.big { stroke: rgba(254, 89, 36, 0.6); stroke-width: 2; }
.r-ticks { transform-origin: 150px 150px; animation: ringSpin 90s linear infinite reverse; }
.r-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 10; }
.r-charge { fill: none; stroke: var(--accent); stroke-width: 10; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 150px 150px; transition: stroke-dashoffset 1.2s cubic-bezier(.6, 0, .2, 1); }
.r-inner { fill: rgba(255, 255, 255, 0.03); stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; stroke-dasharray: 2 4; }
.s-charged .r-charge { stroke-dashoffset: 0; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.tm-nodes span { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; font-size: 14px; color: rgba(255, 255, 255, 0.55); background: var(--navy-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px;
    transform: rotate(var(--a)) translate(calc(var(--S) * 0.487)) rotate(calc(-1 * var(--a))); opacity: 0; }
.s-armed .tm-nodes span { animation: nodeIn 0.5s var(--ease) both, nodeGlow 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms), calc(0.9s + var(--i) * 0.3s); }
@keyframes nodeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nodeGlow { 0%, 12%, 100% { background: var(--navy-2); color: rgba(255, 255, 255, 0.55); opacity: 1; } 5% { background: var(--c); color: #fff; opacity: 1; } }
.s-charged .tm-nodes span { animation: none; opacity: 1; background: var(--c); color: #fff; transition: background 0.3s ease; }
.tm-core { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 10px; transition: background 0.4s ease, transform 0.4s var(--ease); }
.tm-core i { font-size: 26px; color: var(--accent); margin-bottom: 6px; }
.tm-core b { font: 700 13.5px/1.2 var(--display); color: #fff; }
.tm-core small { font-size: 10.5px; line-height: 1.3; color: var(--panel-mute); }
.tm-core .c2 { display: none; }
.s-dropped .tm-core { transform: translate(-50%, -50%) scale(1.08); }
.s-charged .tm-core { background: var(--accent); }
.s-charged .tm-core .c1 { display: none; }
.s-charged .tm-core .c2 { display: block; }
.s-charged .tm-core i.c2 { display: inline-block; color: #fff; }
.s-charged .tm-core small { color: rgba(255, 255, 255, 0.9); }
.tm-file { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border-radius: 3px; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.8); border-left: 3px solid #1E9E52;
    transform: translate(-190%, 140%) rotate(-6deg); opacity: 0; transition: transform 1.1s cubic-bezier(.5, 0, .2, 1), opacity 0.4s ease; }
.tm-file b { display: block; font: 700 13px/1.2 var(--display); color: #1B1E31; white-space: nowrap; }
.tm-file small { display: block; font-size: 11.5px; color: #6E6E6E; }
.xl-badge { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; background: #1E7145; color: #fff; font: 800 13px/1 var(--display); }
.tm-cursor { position: absolute; right: -10px; bottom: -14px; font-size: 22px; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.s-armed .tm-file { opacity: 1; transform: translate(-112%, 140%) rotate(-5deg); }
.s-drag .tm-file { transform: translate(-50%, 20%) rotate(0deg); }
.s-dropped .tm-file { transform: translate(-50%, -50%) scale(0.3); opacity: 0; transition: transform 0.45s ease-in, opacity 0.4s ease-in 0.05s; }
.s-read .tm-drop { opacity: 0; pointer-events: none; }
.s-read .tm-ring { transform: scale(0.4); opacity: 0; }


/* ---- 2 and 3  Pillars, the model log, the scan ---------------------------------------------------------------- */

.tm-read { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--panel-grid), var(--navy-4); opacity: 0; transition: opacity 0.5s ease; }
.s-read .tm-read { opacity: 1; }
.s-assemble .tm-read { opacity: 0; transition-delay: 0.5s; }
.tm-src { display: flex; align-items: center; gap: 12px; padding: 8px 10px; background: var(--navy-2); border-radius: 3px; color: #fff; }
.tm-src .xl-badge { width: 24px; height: 24px; font-size: 11px; }
.tm-src b { font: 600 12.5px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-src em { margin-left: auto; display: flex; gap: 4px; font-style: normal; }
.tm-src em span { padding: 6px 9px; border-radius: 2px; font: 600 11px/1 var(--display); color: var(--panel-mute); background: rgba(255, 255, 255, 0.05); transition: background 0.3s ease, color 0.3s ease; }
.tm-src em span.on { color: #fff; background: rgba(255, 255, 255, 0.12); }
.s-model .tm-src em span { background: var(--accent); color: #fff; }
.tm-body { flex: 1; min-height: 0; display: flex; gap: 12px; }
.tm-cols { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; overflow: hidden; }
.tm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--navy-2); border-top: 2px solid rgba(255, 255, 255, 0.12); border-radius: 2px; opacity: 0; transform: translateY(40px); transition: border-color 0.3s ease; }
.s-read .tm-col { animation: pillarUp 0.6s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes pillarUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.tm-col.typed { border-top-color: var(--accent); }
.tm-col-head { flex-shrink: 0; padding: 8px 8px 6px; }
.tm-col-head span { display: block; font: 500 10px/1 var(--mono); color: var(--panel-mute); margin-bottom: 4px; }
.tm-col-head b { display: block; font: 700 11.5px/1.2 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-type { flex-shrink: 0; align-self: flex-start; margin: 0 8px 8px; padding: 4px 6px; border-radius: 2px; font: 700 9.5px/1 var(--display); letter-spacing: 0.02em; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; color: #fff; background: rgba(255, 255, 255, 0.08); transform: scale(0.4); opacity: 0; transform-origin: left center; transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1), opacity 0.2s ease; }
.tm-col.typed .tm-type { transform: none; opacity: 1; }
.tm-type.key { background: #5B6178; }
.tm-type.date { background: #2F7DD1; }
.tm-type.link { background: var(--accent); }
.tm-type.cat { background: #8B5CF6; }
.tm-type.geo { background: #0E9F8E; }
.tm-type.num { background: #6E7F1E; }
.tm-type.money { background: #1E9E52; }
.tm-col ul { list-style: none; flex: 1; min-height: 0; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tm-col li { padding: 6px 8px; font: 400 10.5px/1.2 var(--mono); color: var(--panel-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.tm-col.num li { text-align: right; }
.s-verify .tm-col li { animation: cellOk 0.5s ease both; animation-delay: calc(var(--r) * 260ms + var(--i) * 20ms); }
@keyframes cellOk { 0% { background: transparent; } 40% { background: rgba(254, 89, 36, 0.28); color: #fff; } 100% { background: rgba(61, 214, 140, 0.07); color: #BFF2D6; } }
.tm-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); box-shadow: 0 0 18px 4px rgba(254, 89, 36, 0.55); opacity: 0; }
.s-verify .tm-scan { animation: scanDown 2.3s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes scanDown { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.tm-log { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--navy-2); border-radius: 3px; border-top: 2px solid var(--accent); overflow: hidden; }
.tm-log-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 700 11.5px/1 var(--display); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tm-log ul { list-style: none; padding: 6px 0; }
.tm-log li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 12px; opacity: 0; transform: translateX(10px); transition: opacity 0.35s ease, transform 0.35s var(--ease); }
.tm-log li.on { opacity: 1; transform: none; }
.tm-log li i { width: 18px; font-size: 11px; color: var(--accent); margin-top: 2px; text-align: center; }
.tm-log li span { font: 600 12px/1.3 var(--display); color: #fff; }
.tm-log li small { display: block; font: 400 10.5px/1.3 var(--font); color: var(--panel-mute); }
.tm-verify { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; transform: translateY(20px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s ease; }
.s-verify .tm-verify { transform: none; opacity: 1; }
.tm-verify div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--navy-2); border-radius: 2px; box-shadow: inset 3px 0 0 var(--accent); }
.tm-verify small { width: 100%; font: 700 9.5px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--panel-mute); }
.tm-verify b { font: 700 18px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.tm-verify span { font-size: 11px; color: var(--panel-mute); }

@container stage (max-width: 760px) {
    .tm-col.p3 { display: none; }
    .tm-body { flex-direction: column; }
    .tm-log { width: auto; flex: 0 0 auto; border-top: 0; border-left: 2px solid var(--accent); }
    .tm-log-head { display: none; }
    .tm-log ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 4px 0; }
    .tm-log li { padding: 6px 10px; }
    .tm-log li span { font-size: 11.5px; }
}
@container stage (max-width: 520px) {
    .tm-col.p2 { display: none; }
    .tm-log ul { display: flex; flex-direction: column-reverse; height: 40px; overflow: hidden; padding: 0; }
    .tm-log li { position: absolute; }
    .tm-log ul { position: relative; }
    .tm-log li.on { position: static; }
    .tm-log li.on ~ li.on { display: none; }
    .tm-verify b { font-size: 15px; }
    .tm-verify div { padding: 8px 10px; }
    .tm-ring { --S: 250px; }
    .tm-src em span:not(.on) { display: none; }
}


/* ---- 4  Blueprint tiles, then the stamp ------------------------------------------------------------------------- */

.tm-tiles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tm-tile { position: absolute; display: block; background: repeating-linear-gradient(135deg, rgba(254, 89, 36, 0.14) 0 2px, transparent 2px 9px), var(--navy-2); border: 1.5px solid var(--accent); border-radius: 3px; opacity: 0; transform: scale(0.85);
    animation: tileIn 0.45s var(--ease) both; animation-delay: calc(var(--k) * 60ms); }
.tm-tile i { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.tm-tile i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: trackFill 0.7s ease forwards; animation-delay: calc(0.3s + var(--k) * 60ms); }
@keyframes tileIn { to { opacity: 1; transform: none; } }
.s-reveal .tm-tile { animation: tileIn 0s both, tileOut 0.6s cubic-bezier(.7, 0, .3, 1) both; animation-delay: 0s, calc(var(--k) * 110ms); }
@keyframes tileOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

.tm-stamp { position: absolute; z-index: 6; left: 16px; top: 16px; display: flex; align-items: stretch; background: var(--navy); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
    transform: translateX(calc(-100% - 30px)); transition: transform 0.6s cubic-bezier(.2, .9, .2, 1), opacity 0.4s ease; }
.s-stamp .tm-stamp { transform: none; }
.s-stamp-out .tm-stamp { transform: translateY(-140%); opacity: 0; }
.tm-stamp-k { width: 64px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 24px; }
.tm-stamp-t { padding: 12px 18px; }
.tm-stamp-t small { display: block; font: 700 10px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--panel-mute); }
.tm-stamp-t b { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font: 800 36px/1 var(--display); color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tm-stamp-t em { font: normal 600 14px/1 var(--display); color: var(--accent); }
.tm-vs { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 18px 12px 16px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
.tm-vs s { font: 500 12px/1.2 var(--font); color: var(--panel-mute); text-decoration-color: var(--bad); text-decoration-thickness: 2px; white-space: nowrap; }
.tm-vs span { font: 700 12.5px/1.2 var(--display); color: #3DD68C; white-space: nowrap; }
.tm-vs i { margin-right: 4px; }
@container stage (max-width: 520px) { .tm-vs { display: none; } .tm-stamp-t b { font-size: 30px; } }


/* ---- 5  The command bar and the pinned answer ------------------------------------------------------------------ */

.tm-ask { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.tm-cmd { position: absolute; left: 50%; bottom: 18px; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; background: var(--navy); border-radius: 3px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), inset 3px 0 0 var(--accent);
    transform: translate(-50%, 160%); transition: transform 0.55s cubic-bezier(.2, .9, .2, 1); }
.s-ask .tm-cmd { transform: translate(-50%, 0); }
.s-asked .tm-cmd { transform: translate(-50%, 160%); transition-duration: 0.4s; }
.tm-cmd-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; background: var(--accent); color: #fff; font-size: 14px; }
.tm-cmd-input { flex: 1; min-width: 0; display: flex; align-items: center; font: 600 14px/1.3 var(--display); color: #fff; white-space: nowrap; overflow: hidden; }
.tm-ph { color: var(--panel-mute); font-weight: 500; }
.tm-caret { display: inline-block; width: 2px; height: 18px; margin-left: 2px; background: var(--accent); animation: tick 0.9s steps(2) infinite; }
.tm-kbd { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 2px; background: rgba(255, 255, 255, 0.07); color: var(--panel-mute); font-size: 13px; }
.tm-answer { position: absolute; right: 16px; top: 16px; width: min(330px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: hidden; background: #fff; border-radius: 3px; border-top: 3px solid var(--accent); box-shadow: 0 30px 70px -20px rgba(27, 30, 49, 0.55); color: #6E6E6E;
    transform: translateX(calc(100% + 30px)); transition: transform 0.55s cubic-bezier(.2, .9, .2, 1), opacity 0.4s ease; }
.s-answer .tm-answer { transform: none; }
.s-ask-out .tm-answer { transform: translateX(calc(100% + 30px)); }
.tm-ans-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #EDEDED; }
.tm-ans-av { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 2px; background: #1B1E31; color: var(--accent); font-size: 12px; }
.tm-ans-head b { font: 700 13.5px/1 var(--display); color: #1B1E31; }
.tm-ans-head small { margin-left: auto; font: 600 10px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #1E9E52; }
.tm-ans-q { padding: 10px 14px 0; font: italic 500 12.5px/1.4 var(--font); color: #8A8C96; }
.tm-md { padding: 8px 14px 12px; font-size: 13px; line-height: 1.55; color: #4A4D5C; }
.tm-md p { color: #4A4D5C; margin-bottom: 6px; }
.tm-md b { color: #1B1E31; }
.tm-md ul { padding-left: 16px; }
.tm-md li::marker { color: var(--accent); }
.tm-ans-chart { margin: 0 14px 14px; padding: 12px; background: #F4F4F4; border-radius: 2px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s var(--ease); }
.s-chart .tm-ans-chart { opacity: 1; transform: none; }
.tm-ans-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 12px/1.2 var(--display); color: #1B1E31; }
.tm-ans-title i { color: var(--accent); }
.tm-ans-title em { margin-left: auto; font: normal 700 10px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 6px; border-radius: 2px; color: #fff; background: var(--accent); white-space: nowrap; }
.tm-ans-title em i { color: #fff; }
.tm-bar { display: grid; grid-template-columns: 78px minmax(0, 1fr) 54px; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; }
.tm-bar span { color: #4A4D5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-bar b { height: 10px; background: #E4E4E4; }
.tm-bar b i { display: block; height: 100%; width: 0; background: #1B1E31; transition: width 0.8s var(--ease); transition-delay: calc(var(--i) * 90ms + 0.2s); }
.tm-bar:first-child b i, .tm-ans-title + .tm-bar b i { background: var(--accent); }
.s-chart .tm-bar b i { width: var(--w); }
.tm-bar em { font: normal 600 11px/1 var(--mono); color: #1B1E31; text-align: right; }
@container stage (max-width: 520px) {
    .tm-answer { left: 12px; right: 12px; top: 12px; width: auto; }
    .tm-bar { grid-template-columns: 70px minmax(0, 1fr) 50px; }
}


/* ---- 6  Tickets printing from a slot --------------------------------------------------------------------------- */

.tm-export { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; padding: 16px; background: rgba(20, 22, 39, 0); transition: background 0.4s ease, opacity 0.45s ease; }
.s-export .tm-export { background: rgba(20, 22, 39, 0.72); }
.s-export-out .tm-export { opacity: 0; }
.tm-slot { position: relative; z-index: 2; width: min(460px, 100%); display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: var(--navy); border-radius: 3px 3px 0 0; font: 700 13px/1 var(--display); color: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); transform: translateY(-120%); transition: transform 0.5s cubic-bezier(.2, .9, .2, 1); }
.tm-slot i:first-child { color: var(--accent); }
.tm-slot-mouth { position: absolute; left: 14px; right: 14px; bottom: -3px; height: 6px; background: #05060D; border-radius: 3px; }
.s-export .tm-slot { transform: none; }
.tm-tickets { width: min(430px, calc(100% - 20px)); display: grid; gap: 8px; margin-top: 2px; }
.tm-ticket { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 14px 16px 14px 22px; background: #fff; border-radius: 2px;
    -webkit-mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 100% 100% no-repeat; mask: radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 100% 100% no-repeat;
    clip-path: inset(0 0 100% 0); transform: translateY(-24px); transition: clip-path 0.7s cubic-bezier(.4, 0, .2, 1), transform 0.7s cubic-bezier(.4, 0, .2, 1); }
.tm-ticket::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; border-left: 2px dashed #E1E1E1; }
.tm-ticket.go { clip-path: inset(0 0 0 0); transform: rotate(calc((var(--i) - 1) * 0.8deg)); }
.tm-tk-ico { width: 42px; height: 46px; grid-row: span 2; display: grid; place-items: center; font-size: 19px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.t-pbi .tm-tk-ico { background: #F2C811; color: #1F1A00; }
.t-tab .tm-tk-ico { background: #1F4E9E; color: #fff; }
.t-pdf .tm-tk-ico { background: #CE183D; color: #fff; }
.tm-tk-txt b { display: block; font: 700 14px/1.2 var(--display); color: #1B1E31; }
.tm-tk-txt small { display: block; font-size: 11.5px; color: #8A8C96; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-ext { font: normal 700 12px/1 var(--mono); color: #1B1E31; padding: 6px 8px; background: #F4F4F4; border-radius: 2px; }
.tm-tk-bar { grid-column: 2 / -1; height: 4px; background: #EDEDED; overflow: hidden; }
.tm-tk-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.tm-ticket.go .tm-tk-bar i { width: 100%; transition: width 0.95s linear 0.2s; }
.tm-tk-ok { grid-column: 2 / -1; display: none; font: 700 12px/1.2 var(--display); color: #1E9E52; }
.tm-ticket.ok .tm-tk-bar { display: none; }
.tm-ticket.ok .tm-tk-ok { display: block; animation: faqIn 0.35s var(--ease) both; }
.tm-cloud { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 16px; border-radius: 2px; background: var(--accent); color: #fff; font: 600 12.5px/1.3 var(--display); opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s var(--ease); }
.s-export-cloud .tm-cloud { opacity: 1; transform: none; }
@container stage (max-width: 520px) { .tm-cloud span { font-size: 11.5px; } .tm-tk-txt small { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .r-outer, .r-ticks, .tm-nodes span { animation: none !important; }
}


/* ---- The hero, narrower ---------------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 60px; padding-bottom: 130px; }
    .hero::after { display: none; }
    .hero-copy { max-width: 760px; }
    .hero-console::before { left: 30px; right: -20px; top: -24px; }
    .browser-body { height: 540px; }
}
@media (max-width: 760px) {
    .hero { padding-top: 50px; }
    .hero-grid { padding-bottom: 150px; gap: 50px; }
    .hero-copy h1 { font-size: clamp(38px, 10vw, 56px); }
    .lede { font-size: 16px; }
    .hero-proof { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .hero-console { padding: 10px; margin: 0 -10px; }
    .hero-console::before { left: 20px; right: -10px; top: -16px; bottom: 40px; }
    .hc-corner { width: 30px; height: 30px; }
    .browser-body { height: 470px; }
    .hero-caption { top: -90px; grid-template-columns: minmax(0, 1fr); padding: 20px 20px 18px; min-height: 0; }
    .hero-steps li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
    .hs-no { font-size: 26px; grid-row: 1; }
    .hero-steps strong { border: 0; padding: 0; font-size: 17.5px; }
    .hs-txt { grid-column: 1 / -1; font-size: 14px; }
    .hero-replay-big { grid-column: 1; grid-row: auto; margin-top: 14px; justify-self: start; }
    #page-home .about-section { padding-top: 150px; }
}
@media (max-width: 420px) {
    .hero-cta .btn { width: 100%; }
    .browser-body { height: 440px; }
}


/* =====================================================================================================================
   The Ask AI section's chat (heroanim.js mock): a white conversation card with a navy head
   ===================================================================================================================== */

.cm { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(27, 30, 49, 0.55); color: #6E6E6E; opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s var(--ease); }
[data-theme="dark"] .cm { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.s-ask .cm { opacity: 1; transform: none; }
.s-ask-out .cm { opacity: 0; transform: translateY(-10px); }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #1B1E31; color: #fff; }
.cm-av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.cm-head b { display: block; font: 700 15.5px/1.2 var(--display); }
.cm-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #A8A9B3; }
.cm-live { width: 7px; height: 7px; border-radius: 50%; background: #3DD68C; animation: tick 1.4s steps(2) infinite; }
.cm-tag { margin-left: auto; padding: 6px 9px; border-radius: 2px; background: var(--accent); font: 700 10.5px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.cm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; overflow: hidden; background: #F7F7F7; }
.cm-who { display: block; font: 700 10.5px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 7px; }
.cm-user { align-self: flex-end; max-width: 82%; padding: 12px 14px; border-radius: 3px 3px 0 3px; background: var(--accent); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s var(--ease); }
.cm-user .cm-who { color: rgba(255, 255, 255, 0.8); }
.cm-user p { color: #fff; font: 600 14px/1.45 var(--display); }
.s-asked .cm-user { opacity: 1; transform: none; }
.cm-ai { max-width: 92%; padding: 12px 14px; border-radius: 0 3px 3px 3px; background: #fff; border-left: 3px solid #1B1E31; box-shadow: 0 10px 24px -18px rgba(27, 30, 49, 0.5); opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s var(--ease); }
.cm-ai .cm-who { color: var(--accent); }
.s-typing .cm-ai { opacity: 1; transform: none; }
.cm-typing { display: flex; gap: 4px; padding: 4px 0; }
.cm-typing i { width: 7px; height: 7px; border-radius: 1px; background: #C9CAD1; animation: dots 1s ease-in-out infinite; }
.cm-typing i:nth-child(2) { animation-delay: 0.15s; }
.cm-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dots { 50% { background: var(--accent); transform: translateY(-3px); } }
.s-answer .cm-typing { display: none; }
.cm-md { font-size: 14px; line-height: 1.6; color: #4A4D5C; }
.cm-md p { color: #4A4D5C; margin-bottom: 6px; }
.cm-md b { color: #1B1E31; }
.cm-md ul { padding-left: 18px; }
.cm-md li::marker { color: var(--accent); }
.cm-offer { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 3px; background: #1B1E31; color: #fff; font: 600 13.5px/1.3 var(--display); opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s var(--ease), background 0.25s ease; }
.cm-offer em { display: block; font: normal 700 10px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.cm-offer-ico { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.08); color: var(--accent); }
.cm-offer > i { margin-left: auto; font-size: 12px; color: var(--accent); }
.s-offer .cm-offer { opacity: 1; transform: none; }
.s-press .cm-offer { background: var(--accent); transform: scale(0.98); }
.s-press .cm-offer em, .s-press .cm-offer > i { color: #fff; }
.s-chart .cm-offer { display: none; }
.cm-chart { padding: 14px; border-radius: 3px; background: #fff; border: 1px solid #EAEAEA; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s var(--ease); display: none; }
.s-chart .cm-chart { display: block; opacity: 1; transform: none; animation: faqIn 0.45s var(--ease) both; }
.cm-chart-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 13px/1.2 var(--display); color: #1B1E31; }
.cm-chart-title i { color: var(--accent); }
.cm-chart-title em { font: normal 700 10px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 7px; border-radius: 2px; color: #1E9E52; background: rgba(38, 186, 94, 0.12); white-space: nowrap; }
.cm-chart-title em i { color: #1E9E52; }
.cm-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 62px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.cm-bar span { color: #4A4D5C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bar b { height: 12px; background: #EFEFEF; }
.cm-bar b i { display: block; height: 100%; width: 0; background: #1B1E31; transition: width 0.9s var(--ease); transition-delay: calc(var(--i) * 90ms + 0.15s); }
.cm-bar:nth-child(2) b i { background: var(--accent); }
.s-chart .cm-bar b i { width: var(--w); }
.cm-bar em { font: normal 600 11.5px/1 var(--mono); color: #1B1E31; text-align: right; }
.cm-composer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #EDEDED; background: #fff; }
.cm-input { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; padding: 0 14px; border-radius: 3px; background: #F4F4F4; font: 500 13.5px/1 var(--font); color: #1B1E31; white-space: nowrap; overflow: hidden; }
.cm-ph { color: #9A9CA6; }
.cm-send { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 3px; background: var(--accent); color: #fff; }
@media (max-width: 640px) {
    .cm-bar { grid-template-columns: 80px minmax(0, 1fr) 56px; }
    .cm-thread { padding: 16px 14px; }
}