/* Flakk v7 · the core site as a 3D funnel (05.11.2026) */
:root {
  --navy: #0F2A47; --navy-deep: #0A1D33; --night: #071322; --amber: #F2A741; --amber-2: #F6B964; --paper: #FBF8F2;
  --ink: #E9EDF3; --soft: #AEBACB; --head: #F5F1E8; --ok: #5FCB98; --red: #FF7A59;
  --f-d: "Fraunces", Georgia, serif; --f-u: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --f-m: "Geist Mono", ui-monospace, Menlo, monospace;
  --band: 0px; --gut: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); color: var(--ink); font: 400 15px/1.5 var(--f-u); -webkit-text-size-adjust: 100%; }
body { background: var(--night); min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
.sr, .skiplink:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink:focus { position: fixed; z-index: 99; top: 8px; left: 8px; padding: 10px 14px; background: var(--amber); color: var(--night); border-radius: 10px; }

/* nav */
.nav { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) var(--gut) 12px; background: linear-gradient(rgba(7, 19, 34, .7), rgba(7, 19, 34, 0)); transition: opacity .5s ease, transform .5s ease; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--head); font: 600 20px var(--f-d); }
.logo svg { width: 34px; height: auto; color: var(--amber); fill: var(--amber); }
.nav-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lang { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ink); }
.lang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang select { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: inherit; font: 500 14px var(--f-u); cursor: pointer; max-width: 120px; }
.lang select option { color: #16181D; }
.lang:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font: 600 15px var(--f-u); text-decoration: none; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.btn-amber { background: var(--amber); color: var(--night); }
.btn-amber:hover { background: var(--amber-2); }
.btn-line { background: rgba(255, 255, 255, .06); color: var(--head); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.btn-glass { background: rgba(10, 26, 44, .55); color: var(--head); box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pl { width: 22px; height: 22px; border-radius: 50%; background: var(--amber); position: relative; flex: none; }
.btn-amber .pl { background: var(--night); }
.pl::after { content: ""; position: absolute; left: 8.5px; top: 6px; border-left: 7px solid var(--night); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.btn-amber .pl::after { border-left-color: var(--amber); }
@media (max-width: 640px) { .nav-try { display: none; } .lang select { max-width: 84px; } .btn { padding: 0 14px; font-size: 14px; } .logo span { display: none; } }

/* the 3D stage */
#gl { position: fixed; left: 0; top: 0; width: 100vw; height: calc(100vh - var(--band)); height: calc(100svh - var(--band)); display: block; z-index: 0; background: radial-gradient(120% 90% at 70% 10%, #1D3A5E, #0A1D33 55%, #050E1A); }
.vign { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(130% 100% at 60% 45%, transparent 55%, rgba(4, 10, 18, .55)); }
.glowedge { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px rgba(242, 167, 65, .55), inset 0 0 90px rgba(242, 167, 65, .35); transition: opacity .25s ease; }
.glowedge.on { opacity: 1; transition: opacity .12s ease; }

/* scenes are scroll length; their overlays are fixed on top of the stage */
main { position: relative; z-index: 3; }
.sc { position: relative; height: calc(var(--len, 3) * 100vh); height: calc(var(--len, 3) * 100svh); }
.ov { position: fixed; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.ov.on { visibility: visible; }
.ov.on a, .ov.on button { pointer-events: auto; }
.col { left: var(--gut); top: 50%; width: min(560px, 46vw); transform: translateY(-50%); }
.col.top { top: 15vh; transform: none; }
.col.wide { width: min(980px, calc(100vw - 2 * var(--gut))); }
@media (max-width: 760px) {
  .col { width: calc(100vw - 2 * var(--gut)); top: 13vh; transform: none; }
  .col.top { top: 11vh; }
}
.eye { font: 500 12.5px var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.big { font: 400 clamp(23px, 2.5vw, 38px)/1.12 var(--f-d); color: var(--head); letter-spacing: -.01em; text-wrap: balance; }
.huge { font: 400 clamp(30px, 3.9vw, 56px)/1.04 var(--f-d); color: var(--head); letter-spacing: -.02em; }
.big em, .huge em { font-style: italic; color: var(--amber); }
.amber { color: var(--amber); }
.lead { margin-top: 12px; font-size: clamp(14.5px, 1.1vw, 16.5px); color: var(--soft); max-width: 34em; }
.row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* 3D type: an extruded edge in depth, lit from above */
.x3d { text-shadow: 0 1px 0 rgba(7, 19, 34, .55), 0 2px 0 rgba(7, 19, 34, .5), 0 3px 0 rgba(7, 19, 34, .45), 0 4px 0 rgba(7, 19, 34, .4), 0 12px 28px rgba(2, 6, 12, .65); }
.amber.x3d { text-shadow: 0 1px 0 #B97418, 0 2px 0 #A9680F, 0 3px 0 #96590A, 0 4px 0 #7E4A07, 0 14px 32px rgba(242, 167, 65, .35); }
.hint { left: 50%; bottom: calc(26px + var(--band)); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font: 500 12px var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.hint i { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); position: relative; }
.hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--amber); animation: hintDot 1.6s ease-in-out infinite; }
@keyframes hintDot { 60% { transform: translateY(9px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }
.start-cta { right: var(--gut); bottom: calc(24px + var(--band)); }
@media (max-width: 760px) { .start-cta { right: 50%; transform: translateX(50%); bottom: calc(76px + var(--band)); } }

/* speech bubbles and tags pinned to 3D points */
.bub { left: 0; top: 0; }
.bub b { display: block; max-width: 280px; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: #F5F1E8; color: #0F2A47; font: 600 15px/1.35 var(--f-u); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); transform: translate(-12%, calc(-100% - 18px)); }
.tag { left: 0; top: 0; }
.tag span { display: inline-block; transform: translate(-50%, calc(-100% - 14px)); padding: 6px 12px; border-radius: 999px; background: rgba(10, 26, 44, .82); color: var(--head); font: 600 13px var(--f-u); box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .5); white-space: nowrap; }
.flow { left: 0; top: 0; width: 100vw; height: 100vh; overflow: visible; }
.flow path { fill: none; stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 6 8; filter: drop-shadow(0 0 6px rgba(242, 167, 65, .8)); animation: flowDash 1s linear infinite; }
@keyframes flowDash { to { stroke-dashoffset: -28; } }

/* old way vs Flakk */
.vs { display: grid; gap: 8px; margin-top: 22px; perspective: 1200px; }
.vs-r { display: grid; grid-template-columns: minmax(130px, .9fr) 1.1fr 1.5fr; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(16, 41, 74, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform-origin: 50% 50%; }
.vs-h { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-bottom: 0; font: 500 11.5px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.vs-h span:last-child { color: var(--amber); }
.vs-r b { font: 500 16px var(--f-d); color: var(--head); }
.vs-r s { color: var(--soft); text-decoration-color: rgba(255, 122, 89, .7); text-decoration-thickness: 1.5px; font-size: 13.5px; }
.vs-r > span { color: var(--head); font-weight: 500; }
.vs-r.gold { box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .6), 0 0 40px -8px rgba(242, 167, 65, .45); }
.chip { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font: 500 10.5px var(--f-m); letter-spacing: .1em; text-transform: uppercase; font-style: normal; }
.chip.live { background: rgba(95, 203, 152, .16); color: var(--ok); }
.chip.pilot { background: rgba(242, 167, 65, .18); color: var(--amber); }
@media (max-width: 760px) { .vs-r { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; } .vs-h { display: none; } .vs-r b { font-size: 16px; } .vs-r s, .vs-r > span { font-size: 14px; } }

/* the AI team fan */
.fan { left: 50%; top: 58%; width: 0; height: 0; perspective: 1400px; }
.ag { position: absolute; left: 0; top: 0; width: 176px; margin: -120px 0 0 -88px; padding: 16px 14px 14px; border-radius: 20px; text-align: center; background: linear-gradient(180deg, rgba(22, 50, 79, .92), rgba(10, 29, 51, .94)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -24px rgba(0, 0, 0, .7); transform-style: preserve-3d; }
.ag img { display: block; width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--amber), 0 10px 24px -8px rgba(0, 0, 0, .6); object-fit: cover; }
.ag b { display: block; font: 500 19px var(--f-d); color: var(--head); }
.ag span { display: block; margin-top: 2px; font: 500 11px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.ag small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--soft); }
@media (max-width: 760px) { .fan { top: 64%; } .ag { width: 128px; margin: -96px 0 0 -64px; padding: 10px 8px; } .ag img { width: 64px; height: 64px; } .ag b { font-size: 17px; } .ag small { display: none; } }
.pilotchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .45); color: #F5D9A8; font-size: 14px; }
.pilotchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.board { left: 50%; bottom: calc(9vh + var(--band)); transform: translateX(-50%); width: min(760px, 92vw); text-align: center; }
.board h3 { font: 400 clamp(19px, 1.9vw, 27px)/1.15 var(--f-d); }

/* facts */
.nums3 { left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; gap: clamp(20px, 6vw, 90px); perspective: 1000px; padding: 0 var(--gut); }
.n3 { text-align: center; }
.n3 b { display: block; font: 400 clamp(44px, 6vw, 88px)/1 var(--f-d); }
.n3 span { display: block; margin-top: 10px; max-width: 14em; color: var(--soft); font-size: clamp(14px, 1.4vw, 18px); }
@media (max-width: 760px) { .nums3 { flex-direction: column; gap: 18px; top: 54%; } .n3 b { font-size: 52px; } }

/* trust */
.tiles { left: var(--gut); right: var(--gut); top: calc(15vh + 150px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1100px; perspective: 1400px; }
.tile { padding: 18px; border-radius: 18px; background: rgba(12, 32, 56, .86); box-shadow: inset 0 0 0 1px rgba(95, 203, 152, .28), 0 24px 48px -26px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tile.gold { box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .55), 0 0 50px -12px rgba(242, 167, 65, .5); }
.tile b { display: block; margin-top: 8px; font: 500 17px var(--f-d); color: var(--head); }
.tile p { margin-top: 5px; color: var(--soft); font-size: 13.5px; line-height: 1.45; }
.ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(95, 203, 152, .14); }
.tile.gold .ic { background: rgba(242, 167, 65, .18); }
.ic::before { content: ""; width: 22px; height: 22px; background: var(--ok); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.tile.gold .ic::before { background: var(--amber); }
.ic-facts { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8.3-8 9-4.6-.7-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.ic-yes { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ic-code { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16'/%3E%3C/svg%3E"); }
.ic-test { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6M10 4v6l-5 9a1.5 1.5 0 0 0 1.3 2h11.4A1.5 1.5 0 0 0 19 19l-5-9V4'/%3E%3C/svg%3E"); }
.ic-book { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 21.5V5.5M8 7h8M8 11h6'/%3E%3C/svg%3E"); }
.ic-mem { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3'/%3E%3C/svg%3E"); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tiles { top: calc(11vh + 120px); grid-template-columns: 1fr 1fr; gap: 8px; } .tile { padding: 12px; } .tile p { display: none; } .tile b { font-size: 16px; } }

/* the end of the page is ordinary content over a dark backdrop */
.flat { position: relative; z-index: 6; background: linear-gradient(rgba(7, 19, 34, .2), var(--night) 18%); padding: 96px var(--gut) 72px; }
.cta { text-align: center; }
.cta .lead { margin: 18px auto 0; }
.cta .row { justify-content: center; }
.faq { max-width: 900px; margin: 0 auto; padding-top: 40px; background: var(--night); }
.faq .big { margin-bottom: 18px; }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 36px 15px 0; position: relative; font: 400 clamp(17px, 1.5vw, 20px) var(--f-d); color: var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 26px; transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--soft); max-width: 46em; }
.foot { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom)); background: #050E1A; color: var(--soft); font-size: 14px; }
.foot nav { display: flex; gap: 16px; }

/* the presentation: same scenes, narrated; captions in their own band */
html.presenting { --band: clamp(76px, 13vh, 132px); }
html.presenting .nav { opacity: 0; pointer-events: none; transform: translateY(-10px); }
html.presenting .hint, html.presenting .start-cta, html.presenting .hero-end .row { display: none; }
html.presenting main { pointer-events: none; }
.pres { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--band); display: none; background: #050E1A; box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
html.presenting .pres { display: block; }
.pr-cap { position: absolute; inset: 0 70px 0 70px; display: flex; align-items: center; justify-content: center; text-align: center; font: 500 clamp(15px, 1.45vw, 21px)/1.42 var(--f-u); color: #EDF1F6; transition: opacity .35s ease; }
.pr-prog { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.pr-prog i { position: absolute; inset: 0; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); }
.pr-ctl { position: fixed; z-index: 31; top: max(14px, env(safe-area-inset-top)); right: 14px; display: none; gap: 8px; opacity: 0; transition: opacity .3s ease; }
html.presenting .pr-ctl { display: flex; }
.pres-awake .pr-ctl { opacity: 1; }
.pr-b { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(10, 26, 44, .7); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pr-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pr-b:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.pr-end { position: fixed; z-index: 32; inset: 0; display: none; place-items: center; background: radial-gradient(900px 600px at 50% 45%, rgba(22, 50, 79, .95), rgba(5, 14, 26, .98)); text-align: center; padding: 24px; }
.pr-end.on { display: grid; }
.pr-end .row { justify-content: center; }
.pr-sound { position: fixed; z-index: 33; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; }
.pr-sound.on { display: inline-flex; }

@media (prefers-reduced-motion: reduce) { .hint i::after, .flow path { animation: none; } .btn:hover { transform: none; } }
@media print { #gl, .vign, .ov:not(.col) { display: none !important; } .ov { position: static; opacity: 1 !important; visibility: visible !important; } .sc { height: auto; } }
html.nogl #gl { background: radial-gradient(120% 90% at 70% 10%, #1D3A5E, #0A1D33 55%, #050E1A); }

/* ================= v7.1 additions (05.11.2026): nav links, agent deck, cost, system, peek, staff, presentations ================= */
.nav-l { display: flex; gap: 4px; margin: 0 auto 0 28px; }
.nav-l a { padding: 8px 12px; border-radius: 999px; color: var(--soft); text-decoration: none; font: 500 14px var(--f-u); }
.nav-l a:hover, .nav-l a:focus-visible { color: var(--head); background: rgba(255, 255, 255, .07); }
@media (max-width: 1180px) { .nav-l { display: none; } }
.flat.mid { background: linear-gradient(rgba(7, 19, 34, 0) 0, var(--night) 160px, var(--night) calc(100% - 160px), rgba(7, 19, 34, 0) 100%); padding: 110px var(--gut) 110px; }
html.presenting .flat.mid { display: none; }
.flat .lead { max-width: 40em; }
.flat .big em { font-style: italic; color: var(--amber); }
.src { margin-top: 18px; max-width: 64em; color: #8695aa; font-size: 12.5px; line-height: 1.55; }
.ticks { list-style: none; margin-top: 18px; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 24px; color: var(--head); font-size: 14.5px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); }
.pilotchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 500 12px var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }

/* the agent deck: pinned while the visitor scrolls through six agents */
.flat.pin { padding: 0; height: calc((var(--n) + 1) * 100vh); height: calc((var(--n) + 1) * 100svh); }
.pin-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px var(--gut) 40px; overflow: hidden; }
.pin-head .lead { font-size: clamp(13.5px, 1vw, 15px); }
.pin-deck { position: relative; height: min(540px, 74vh); perspective: 1400px; max-width: 560px; width: 100%; justify-self: center; }
.pc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 1.8vw, 24px); border-radius: 24px; background: linear-gradient(160deg, rgba(22, 50, 84, .96), rgba(10, 29, 51, .98)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 80px -40px rgba(0, 0, 0, .8); opacity: 0; transform: translate3d(0, 40px, -160px) rotateX(10deg); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); will-change: transform, opacity; }
.pc.on { opacity: 1; transform: none; }
.pc.past { opacity: 0; transform: translate3d(0, -50px, -220px) rotateX(-8deg); }
.pc-who { display: flex; align-items: center; gap: 14px; }
.pc-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(242, 167, 65, .6); }
.pc-who b { display: block; font: 500 clamp(19px, 1.6vw, 23px)/1.1 var(--f-d); color: var(--head); }
.pc-who span { font: 500 12px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.pc dl { display: grid; gap: 7px; margin: 0; }
.pc dt { font: 500 10px var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pc dd { margin: 1px 0 0; color: var(--head); font-size: clamp(13px, .95vw, 14.5px); line-height: 1.42; }
.pc-cost { margin-top: auto; padding: 11px 14px; border-radius: 16px; background: rgba(242, 167, 65, .1); box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .4); }
.pc-cost small { display: block; color: var(--soft); font-size: 12.5px; }
.pc-cost b { display: block; margin: 3px 0; font: 500 clamp(19px, 1.7vw, 24px)/1.1 var(--f-d); color: var(--amber); }
.pc-cost b em { font-style: normal; font-size: .6em; color: var(--soft); }
.pc-cost .pc-src { font-size: 11.5px; color: #8695aa; }
.pin-dots { position: absolute; right: var(--gut); bottom: 28px; display: flex; gap: 8px; }
.pin-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s, transform .3s; }
.pin-dots i.on { background: var(--amber); transform: scale(1.3); }
@media (max-width: 860px) {
  .pin-stage { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 78px; }
  .pin-head .lead { display: none; }
  .pin-deck { height: min(470px, 64svh); }
  .pc { gap: 10px; }
  .pc dd { font-size: 13.5px; }
  .pin-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; }
}
@media (max-width: 860px) { .pc { overflow-y: auto; overscroll-behavior: contain; } .pc dl { gap: 7px; } }
@media (max-width: 380px) { .pc dl > :nth-child(7), .pc dl > :nth-child(8) { display: none; } }

/* what the same team would cost in people */
.sum > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.k-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.k-col { padding: 18px; font-size: 14px; border-radius: 20px; background: rgba(16, 41, 74, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.k-col.gold { box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .55), 0 0 50px -14px rgba(242, 167, 65, .45); }
.k-col b { font: 500 17px var(--f-d); color: var(--head); }
.k-col ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.k-col li { position: relative; padding-left: 22px; color: var(--soft); }
.k-col li::before { content: ""; position: absolute; left: 4px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 122, 89, .7); }
.k-col.gold li { color: var(--head); }
.k-col.gold li::before { background: var(--amber); }
@media (max-width: 760px) { .k-grid { grid-template-columns: 1fr; } }

/* the whole system */
.system { text-align: center; }
.system .lead { margin-left: auto; margin-right: auto; }
.sys { position: relative; max-width: 940px; height: 500px; margin: 28px auto 0; }
.sys-l { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sys-l path { fill: none; stroke: rgba(242, 167, 65, .55); stroke-width: 2; stroke-dasharray: 6 10; vector-effect: non-scaling-stroke; animation: sysflow 1.6s linear infinite; animation-play-state: paused; }
.sys.in .sys-l path { animation-play-state: running; }
@keyframes sysflow { to { stroke-dashoffset: -32; } }
.sys-core, .sys-n { position: absolute; z-index: 1; transform: translate(-50%, -50%) scale(.92); opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.sys.in .sys-core, .sys.in .sys-n { opacity: 1; transform: translate(-50%, -50%); }
.sys-core { left: 50%; top: 50%; width: 210px; padding: 18px 16px; border-radius: 28px; background: radial-gradient(120% 120% at 50% 0%, #1e4470, #0d2541); box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .6), 0 0 80px -10px rgba(242, 167, 65, .45); }
.sys-core b { display: block; font: 500 25px var(--f-d); color: var(--amber); }
.sys-core small, .sys-n small { display: block; margin-top: 6px; color: var(--soft); font-size: 13px; line-height: 1.4; }
.orb { display: block; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #ffe7b8, #f2a741 46%, #b8661c); box-shadow: 0 0 34px rgba(242, 167, 65, .7); animation: orb 3.2s ease-in-out infinite; }
@keyframes orb { 50% { transform: scale(1.08); box-shadow: 0 0 50px rgba(242, 167, 65, .85); } }
.sys-n { width: 186px; padding: 13px; border-radius: 18px; background: rgba(16, 41, 74, .92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); text-align: left; }
.sys-n b { font: 500 16px var(--f-d); color: var(--head); }
.sys-n.n1 { left: 15%; top: 16%; transition-delay: .1s; } .sys-n.n2 { left: 85%; top: 16%; transition-delay: .2s; }
.sys-n.n3 { left: 12%; top: 77%; transition-delay: .3s; } .sys-n.n4 { left: 88%; top: 77%; transition-delay: .4s; }
.sys-n.n5 { left: 50%; top: 93%; transition-delay: .5s; }
@media (max-width: 860px) {
  .sys { height: auto; display: grid; gap: 10px; }
  .sys-l { display: none; }
  .sys-core, .sys-n { position: relative; left: auto !important; top: auto !important; width: auto; transform: translateY(14px); }
  .sys.in .sys-core, .sys.in .sys-n { transform: none; }
}

/* the guest window: "Take a Peek" */
.peek { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.peek-box { position: relative; display: grid; justify-items: center; gap: 14px; }
.peek-btn { position: relative; z-index: 4; min-height: 50px; padding: 0 26px; font-size: 16px; box-shadow: 0 16px 40px -12px rgba(242, 167, 65, .6); }
.peek-win { position: relative; width: 100%; height: min(64vh, 580px); border-radius: 26px; overflow: hidden; background: radial-gradient(90% 70% at 50% 35%, #3a2a18 0%, #1a1712 40%, #070b11 100%); box-shadow: inset 0 0 0 10px #1c2533, inset 0 0 0 12px rgba(242, 167, 65, .25), 0 40px 90px -40px rgba(0, 0, 0, .9); }
.pw-frame { position: absolute; inset: 12px; pointer-events: none; z-index: 2; }
.pw-frame i { position: absolute; background: #1c2533; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.pw-frame i:nth-child(1) { left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px; }
.pw-frame i:nth-child(2) { left: 0; right: 0; top: 46%; height: 10px; }
.pw-frame i:nth-child(3), .pw-frame i:nth-child(4) { display: none; }
.pw-glow { position: absolute; inset: 0; background: radial-gradient(40% 30% at 62% 58%, rgba(255, 196, 120, .55), rgba(255, 196, 120, 0) 70%), radial-gradient(26% 22% at 30% 62%, rgba(150, 190, 255, .25), rgba(150, 190, 255, 0) 70%); animation: winglow 5s ease-in-out infinite; }
@keyframes winglow { 50% { opacity: .75; } }
.peek-win.on .pw-frame, .peek-win.on .pw-glow { display: none; }
.peek-win .fw-root { position: absolute; inset: 0; z-index: 1; }
.pw-x { position: absolute; right: 16px; top: 16px; z-index: 5; display: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.peek-win.on .pw-x { display: block; }
.peek-box.on .peek-btn { visibility: hidden; }
.peek-alt a { color: var(--soft); font-size: 14px; }
@media (max-width: 860px) { .peek { grid-template-columns: 1fr; } .peek-win { height: min(78svh, 680px); } }

/* the Staff app */
.staff { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.st-grid > div { padding: 13px; border-radius: 16px; background: rgba(16, 41, 74, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.st-grid b { font: 500 15.5px var(--f-d); color: var(--head); }
.st-grid p { margin-top: 3px; color: var(--soft); font-size: 13.5px; line-height: 1.42; }
.st-phone { display: grid; justify-items: center; perspective: 1200px; }
.ph { width: 240px; height: 500px; padding: 12px; border-radius: 44px; background: #0d0e11; box-shadow: inset 0 0 0 2px #2a2d33, 0 50px 90px -40px rgba(0, 0, 0, .9); transform: rotateY(-14deg) rotateX(4deg); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.staff.in .ph { transform: rotateY(-4deg) rotateX(2deg); }
.ph-scr { height: 100%; border-radius: 34px; overflow: hidden; padding: 38px 14px 14px; background: linear-gradient(#16324f, #0a1d33); display: grid; align-content: start; gap: 10px; font-size: 13px; }
.ph-top { display: flex; justify-content: space-between; color: var(--soft); font: 500 11px var(--f-m); letter-spacing: .06em; }
.ph-al { padding: 12px; border-radius: 14px; background: #d23b2d; color: #fff; animation: alarm 1.4s ease-in-out infinite; }
.ph-al b { display: block; font-size: 13px; letter-spacing: .04em; }
@keyframes alarm { 50% { box-shadow: 0 0 0 6px rgba(210, 59, 45, .25); } }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--head); }
.ph-row i { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--soft); flex: none; }
.ph-row.done { color: var(--soft); text-decoration: line-through; }
.ph-row.done i { background: var(--ok); box-shadow: none; }
.ph-msg { margin-top: 6px; padding: 12px; border-radius: 14px; background: rgba(242, 167, 65, .14); color: var(--head); }
.ph-msg b { display: block; color: var(--amber); font-size: 12px; }
@media (max-width: 860px) { .staff { grid-template-columns: 1fr; } .st-phone { order: -1; } .ph { width: 220px; height: 450px; } .st-grid { grid-template-columns: 1fr; } }

/* the presentations */
.shows { text-align: center; }
.shows .lead { margin-left: auto; margin-right: auto; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 1100px; margin: 30px auto 0; text-align: left; }
.sh { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 22px; background: rgba(16, 41, 74, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sh b { font: 500 17px var(--f-d); color: var(--head); }
.sh p { color: var(--soft); font-size: 13.5px; flex: 1; }
.sh .btn { align-self: flex-start; margin-top: 6px; }
.sh-art { height: 120px; border-radius: 14px; background: #0a1d33; position: relative; overflow: hidden; }
.sh-art::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; }
.sh-art.a1 { background: radial-gradient(60% 80% at 70% 30%, #2a5a8a, #0a1d33); }
.sh-art.a1::after { background: linear-gradient(#0f2a47, #0f2a47) 50% 46% / 44% 42%, linear-gradient(var(--amber), var(--amber)) 50% 78% / 12% 4%; }
.sh-art.a2 { background: radial-gradient(40% 50% at 60% 55%, #6b4a28, #0b0f16 80%); }
.sh-art.a2::after { background: linear-gradient(#1c2533, #1c2533) 50% 0 / 6px 100%, linear-gradient(#1c2533, #1c2533) 0 46% / 100% 6px; }
.sh-art.a3 { background: radial-gradient(50% 70% at 50% 40%, #213f63, #0a1d33); }
.sh-art.a3::after { background: linear-gradient(#0d0e11, #0d0e11) 50% 50% / 22% 84%, linear-gradient(#d23b2d, #d23b2d) 50% 30% / 16% 10%; }
.sh-art.a4 { background: radial-gradient(60% 70% at 40% 40%, #3b2a12, #0a1d33); }
.sh-art.a4::after { background: radial-gradient(circle, var(--amber) 0 18%, transparent 19%) 30% 50% / 40% 60%, radial-gradient(circle, #5fcb98 0 18%, transparent 19%) 70% 50% / 40% 60%; }
.show-ov { position: fixed; inset: 0; z-index: 90; background: rgba(3, 8, 14, .92); display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px 12px; }
.show-ov iframe { width: min(100%, 1600px); height: 100%; border: 0; border-radius: 18px; background: #000; }
.show-ov button { position: absolute; right: 18px; top: max(14px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pc, .sys-core, .sys-n, .ph { transition: none; } .sys-l path, .orb, .ph-al, .pw-glow { animation: none; } }