/* ===================== Ahmer Zaman · design system ===================== */
:root {
  --ink: #0B0D1C; --cloud: #F6F5F9; --ultra: #3D2CFF; --violet: #8B5CF6; --rose: #FF4F8B; --peach: #FFA27A; --lime: #C6FF3D;
  --afterglow: linear-gradient(100deg, #3D2CFF 0%, #8B5CF6 30%, #FF4F8B 65%, #FFA27A 100%);
  --display: "Inter Tight", "Inter", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif; --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace; --logo: "Plus Jakarta Sans", "Inter", sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1); --ease-io: cubic-bezier(.77,0,.18,1);
  --pad: clamp(20px, 4.6vw, 80px); --max: 1680px; --r: 22px;
}
:root[data-theme="light"] { --bg: #F6F5F9; --bg-2: #FFFFFF; --bg-3: #ECEBF2; --text: #0B0D1C; --muted: #5A5D73; --line: rgba(11,13,28,.10); --faint: rgba(11,13,28,.15); --card: #FFFFFF;
  --pri: #3D2CFF; --on-pri: #FFFFFF; --hot: #E2306C; --warm: #D9652F; --vio: #6A47F0; --gtext: linear-gradient(90deg, #6A47F0 0%, #E2306C 55%, #E0703F 100%); color-scheme: light; }
:root[data-theme="dark"] { --bg: #0B0D1C; --bg-2: #12152A; --bg-3: #1B1E37; --text: #F6F5F9; --muted: #A2A4BA; --line: rgba(246,245,249,.10); --faint: rgba(246,245,249,.16); --card: #13162B;
  --pri: #3D2CFF; --on-pri: #FFFFFF; --hot: #FF6E9E; --warm: #FFA27A; --vio: #A891FF; --gtext: linear-gradient(90deg, #A891FF 0%, #FF6E9E 55%, #FFA27A 100%); color-scheme: dark; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { overflow-x: clip; }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--rose); color: #fff; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hot { color: var(--hot); } .warm { color: var(--warm); } .vio { color: var(--vio); }
.gt { background: var(--gtext); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* theme switch: circular reveal (View Transitions) with a soft colour fade fallback */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-fade, html.theme-fade * { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), fill .6s, stroke .6s !important; }

/* logo */
.wm { font-family: var(--logo); font-weight: 800; letter-spacing: -0.06em; white-space: nowrap; line-height: 1; }
.stop { color: var(--lime); }
:root[data-theme="light"] .stop { -webkit-text-stroke: max(1px, .02em) var(--ink); paint-order: stroke fill; }
.on-dark .stop, .rf .stop { -webkit-text-stroke: 0 !important; }

/* ---------- header: CTA left · name centre (on scroll) · theme + menu right; liquid glass when scrolled ---------- */
header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 80; padding: 14px var(--pad); pointer-events: none; transition: padding .5s var(--ease); }
header.top .bar { pointer-events: auto; position: relative; max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 8px 0 10px; border-radius: 999px; border: 1px solid transparent; transition: background .5s, border-color .5s, box-shadow .5s, backdrop-filter .5s; }
header.top.scrolled { padding-top: 10px; }
header.top.scrolled .bar { background: color-mix(in srgb, var(--bg-2) 42%, transparent); border-color: color-mix(in srgb, var(--text) 12%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 40px rgba(11,13,28,.14); }
header.top.scrolled .bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%); }
.hdr-l { justify-self: start; } .hdr-r { justify-self: end; display: flex; align-items: center; gap: 8px; }
.hdr-name { justify-self: center; font-size: 22px; opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
header.top.is-home:not(.scrolled) .hdr-name { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.mode { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; height: 42px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 60%, transparent); color: var(--text); font: 600 12.5px/1 var(--body); cursor: pointer; }
.mode span { position: relative; z-index: 1; padding: 0 12px; text-align: center; transition: color .45s var(--ease-io); }
.mode i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--text); transition: transform .55s var(--ease-io), background .45s; }
:root[data-theme="dark"] .mode i { transform: translateX(100%); }
:root[data-theme="light"] .mode .l, :root[data-theme="dark"] .mode .d { color: var(--bg); }
.menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; background: var(--text); color: var(--bg); cursor: pointer; transition: transform .35s var(--ease); }
.menu-btn:hover { transform: scale(1.06); }
.menu-btn .bi { position: relative; width: 18px; height: 12px; }
.menu-btn .bi i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease-io), top .5s var(--ease-io); }
.menu-btn .bi i:nth-child(1) { top: 1px; } .menu-btn .bi i:nth-child(2) { top: 9px; }
body.menu-open .menu-btn .bi i:nth-child(1) { top: 5px; transform: rotate(45deg); }
body.menu-open .menu-btn .bi i:nth-child(2) { top: 5px; transform: rotate(-45deg); }
.mob-only { display: none; }
@media (max-width: 760px) { .hdr-cta { font-size: 0; gap: 0; padding: 0; width: 42px; justify-content: center; } .hdr-name { font-size: 19px; } header.top .bar { grid-template-columns: auto 1fr auto; } }
@media (max-width: 420px) { .mode span { padding: 0 8px; font-size: 11.5px; } }

/* ---------- full-screen menu (follows the theme) ---------- */
.mo { position: fixed; inset: 0; z-index: 70; background: var(--bg); color: var(--text); clip-path: circle(0 at var(--mx, 95%) var(--my, 42px)); transition: clip-path .9s var(--ease-io); overflow: hidden auto; }
.mo.on { clip-path: circle(150% at var(--mx, 95%) var(--my, 42px)); }
.mo::before { content: ""; position: absolute; right: -15%; bottom: -35%; width: 70vw; height: 70vw; border-radius: 50%; background: var(--afterglow); filter: blur(120px); opacity: .35; pointer-events: none; }
.mo .in { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr); gap: 6vw; align-items: center; padding-top: 110px; padding-bottom: 80px; }
.mo ol { list-style: none; margin: 0; padding: 0; }
.mo li { overflow: hidden; }
.mo li a { display: inline-flex; align-items: baseline; gap: 18px; white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: clamp(34px, min(6.2vw, 8.2vh), 96px); letter-spacing: -0.045em; line-height: 1.06; transform: translateY(105%); transition: transform .8s var(--ease), opacity .3s; }
.mo.on li a { transform: none; }
.mo li a .mono { font-size: 11px; opacity: .5; transform: translateY(-2.6em); }
.mo li a .serif { opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .4s var(--ease); font-size: .6em; color: var(--hot); }
.mo li a:hover .serif, .mo li a.cur .serif { opacity: 1; transform: none; }
.mo ol:hover a { opacity: .3; } .mo ol a:hover { opacity: 1; }
.mo.on li:nth-child(2) a { transition-delay: .05s; } .mo.on li:nth-child(3) a { transition-delay: .1s; } .mo.on li:nth-child(4) a { transition-delay: .15s; } .mo.on li:nth-child(5) a { transition-delay: .2s; } .mo.on li:nth-child(6) a { transition-delay: .25s; } .mo.on li:nth-child(7) a { transition-delay: .3s; }
.mo-side { display: grid; gap: 28px; align-content: center; font-size: 15px; opacity: 0; transform: translateY(20px); transition: opacity .6s .35s, transform .8s .35s var(--ease); }
.mo.on .mo-side { opacity: 1; transform: none; }
.mo-side .mono { color: var(--muted); display: block; margin-bottom: 8px; }
.mo-side a:not(.btn) { display: block; padding: 3px 0; } .mo-side a:not(.btn):hover { color: var(--hot); }
@media (max-width: 860px) { .mo .in { grid-template-columns: 1fr; align-content: center; } .mo-side { grid-template-columns: 1fr 1fr; } .mo-side > div:last-child { grid-column: 1 / -1; } }
body.menu-open header.top .bar { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.menu-open header.top .bar::before { display: none; }
body.menu-open header.top .hdr-cta { opacity: 0; pointer-events: none; }
body.menu-open header.top .hdr-name { opacity: 1 !important; transform: none !important; }

/* ---------- back to top ---------- */

/* ---------- page transition curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 190; background: var(--ink); transform: translateY(100%); pointer-events: none; display: grid; place-items: center; }
.curtain .wm { color: #F6F5F9; font-size: clamp(36px, 5vw, 64px); opacity: 0; transition: opacity .3s; }
.curtain.cover { transform: none; transition: transform .6s var(--ease-io); }
.curtain.cover .wm { opacity: 1; transition-delay: .2s; }
.curtain.leave { transform: translateY(-100%); transition: transform .8s var(--ease-io); }

/* ---------- loader (first visit) ---------- */
#loader { position: fixed; inset: 0; z-index: 200; background: var(--ink); color: #F6F5F9; overflow: hidden; transition: transform 1.1s var(--ease-io); cursor: pointer; }
#loader.out { transform: translateY(-100%); }
.ld-glow { position: absolute; inset: -30%; filter: blur(80px); opacity: .85; }
.ld-glow i { position: absolute; border-radius: 50%; }
.ld-glow i:nth-child(1) { width: 55%; height: 40%; left: 4%; top: 46%; background: #3D2CFF; animation: drift 6s ease-in-out infinite alternate; }
.ld-glow i:nth-child(2) { width: 46%; height: 36%; left: 34%; top: 22%; background: #FF4F8B; animation: drift 7s ease-in-out infinite alternate-reverse; }
.ld-glow i:nth-child(3) { width: 40%; height: 32%; left: 58%; top: 52%; background: #FFA27A; animation: drift 5.5s ease-in-out infinite alternate; }
.ld-glow i:nth-child(4) { width: 34%; height: 30%; left: 22%; top: 8%; background: #8B5CF6; animation: drift 6.5s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(-6%, 5%) scale(1); } to { transform: translate(8%, -6%) scale(1.15); } }
.ld-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(48px, 9vw, 150px); }
.ld-name .ch { display: inline-block; opacity: 0; filter: blur(16px); transform: translateY(10px); transition: opacity .8s, filter 1s, transform 1s var(--ease); }
.ld-name.in .ch { opacity: 1; filter: blur(0); transform: none; }
.ld-count { position: absolute; right: var(--pad); bottom: 4vh; font-family: var(--display); font-weight: 700; font-size: clamp(80px, 14vw, 220px); letter-spacing: -0.06em; line-height: .8; font-variant-numeric: tabular-nums; }
.ld-count sup { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .3em; letter-spacing: 0; vertical-align: top; }
.ld-meta { position: absolute; left: var(--pad); bottom: 5vh; display: grid; gap: 6px; opacity: .6; }
.ld-bar { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--lime); }

/* ---------- page + reveal footer ---------- */
main.page { position: relative; z-index: 2; background: var(--bg); border-radius: 0 0 40px 40px; box-shadow: 0 40px 80px rgba(11,13,28,.22); }

/* ---------- motion helpers ---------- */
.rv { transition: opacity .9s, transform .9s var(--ease); }
.js .rv:not(.in) { opacity: 0; transform: translateY(26px); }
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw > span { display: inline-block; transition: transform 1s var(--ease); }
.js .split:not(.in) .sw > span, .pre .hero-split .sw > span { transform: translateY(108%); }
.fade { transition: opacity 1s .35s, transform 1s .35s var(--ease); }
.pre .fade { opacity: 0; transform: translateY(16px); }
.fill { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 58px); line-height: 1.12; letter-spacing: -0.035em; }
.fill .w { color: var(--faint); transition: color .3s; }
.fill .w.on { color: var(--text); } .fill .w.on.hl { color: var(--hot); }

/* ---------- sections ---------- */
section { position: relative; }
.sec { padding-top: clamp(90px, 10vw, 160px); padding-bottom: clamp(90px, 10vw, 160px); }
.kick { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.kick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.sh { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 70px); }
.h2 { margin: 16px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 5.6vw, 96px); letter-spacing: -0.05em; line-height: .96; }
.h2 .serif { font-size: 1.1em; letter-spacing: -0.02em; }
.sh p { max-width: 440px; margin: 0; color: var(--muted); line-height: 1.6; font-size: 16px; }

/* buttons: gradient primary, gradient-edged secondary */
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 4px; transition: background-size .45s var(--ease); }
.tlink:hover { background-size: 0 1.5px; background-position: 100% 100%; }

/* credentials marquee */
.cred { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.cred .run { display: inline-flex; align-items: center; gap: 36px; white-space: nowrap; animation: mq 46s linear infinite; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -0.03em; }
.cred .run i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px var(--ink); flex: 0 0 auto; }
.cred .run span:nth-of-type(3n+1) { color: var(--text); } .cred .run span:nth-of-type(3n+2) { color: var(--muted); } .cred .run span:nth-of-type(3n) .serif { color: var(--hot); }
@keyframes mq { to { transform: translateX(-50%); } }

/* proof numbers */
.nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nums > div { padding: 28px 24px 0 0; display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--line); }
.nums > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.nums b { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 3.2vw, 58px); letter-spacing: -0.055em; line-height: .95; white-space: nowrap; }
.nums em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--warm); }
.nums span { color: var(--muted); font-size: 14px; line-height: 1.45; }
@media (max-width: 1000px) { .nums { grid-template-columns: 1fr 1fr; } .nums > div { padding: 22px 0 22px !important; border-left: 0 !important; } }

/* ---------- five jobs: scroll-synced showcase ---------- */
.ss { position: relative; }
.ss-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; gap: 5vw; align-items: center; overflow: hidden; }
.ss-list { display: grid; }
.ss-list a { display: flex; align-items: baseline; gap: 18px; font-family: var(--display); font-weight: 600; font-size: clamp(34px, min(4.6vw, 7.6vh), 82px); letter-spacing: -0.05em; line-height: 1.06; color: var(--faint); transition: color .5s var(--ease); }
.ss-list a .mono { font-size: 11px; transform: translateY(-2.2em); transition: color .5s; }
.ss-list a.on { color: var(--text); } .ss-list a.on .mono { color: var(--hot); }
.ss-bar { position: absolute; left: 0; top: 50%; width: 2px; height: 120px; margin-top: -60px; background: var(--line); }
.ss-bar i { position: absolute; left: 0; right: 0; top: 0; height: 0; background: var(--afterglow); }
.ss-stage { position: relative; height: min(66vh, 620px); }
.ss-item { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.ss-item.on { opacity: 1; pointer-events: auto; }
.ss-vis { position: relative; flex: 1; min-height: 0; border-radius: 28px; overflow: hidden; display: grid; place-items: center; text-align: center; background: var(--ink); color: #F6F5F9; isolation: isolate; }
.ss-vis::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: var(--afterglow); filter: blur(60px); opacity: .6; transform: scale(.6) translateY(50%); transition: transform 1.2s var(--ease); }
.ss-item.on .ss-vis::before { transform: scale(1) translateY(30%); }
.ss-vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transform: scale(1.12); transition: transform 1.4s var(--ease); }
.ss-item.on .ss-vis img { transform: none; }
.ss-vis b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(80px, 10vw, 180px); letter-spacing: -0.065em; line-height: .85; clip-path: inset(0 0 100% 0); transform: translateY(20px); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.ss-item.on .ss-vis b { clip-path: inset(0 0 -10% 0); transform: none; }
.ss-vis .mono { margin-top: 18px; opacity: .8; display: block; }
.ss-vis .cap { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(11,13,28,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; }
.ss-item p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 520px; }
@media (max-width: 900px) { .ss-pin { grid-template-columns: 1fr; align-content: center; gap: 22px; padding-top: 80px; } .ss-stage { height: 40vh; } .ss-list a { font-size: 28px; } .ss-bar { display: none; } }

/* ---------- awards: date-ordered rows + sticky visual ---------- */
.aw { display: grid; grid-template-columns: 1.15fr .85fr; gap: 5vw; align-items: start; }
.aw-rows { border-top: 1px solid var(--line); }
.aw-row { display: grid; grid-template-columns: 96px 1fr 30px; gap: 22px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); cursor: default; transition: padding .5s var(--ease); position: relative; }
.aw-row::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--afterglow); transition: width .7s var(--ease); }
.aw-row.on::after { width: 100%; }
.aw-row .yr { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--muted); transition: color .4s; }
.aw-row b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -0.04em; line-height: 1.05; color: var(--faint); transition: color .4s; }
.aw-row span.d { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
.aw-row .ic { width: 24px; height: 24px; opacity: 0; transform: translateX(-8px); transition: .4s var(--ease); color: var(--hot); }
.aw-row.on { padding-left: 14px; } .aw-row.on b { color: var(--text); } .aw-row.on .yr { color: var(--hot); } .aw-row.on .ic { opacity: 1; transform: none; }
.aw-vis { position: sticky; top: 120px; aspect-ratio: 4 / 4.6; border-radius: 28px; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 60px rgba(11,13,28,.18); }
.aw-vis > div { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1s var(--ease); display: grid; place-items: center; }
.aw-vis > div.on { opacity: 1; transform: none; }
.aw-vis img { width: 100%; height: 100%; object-fit: cover; }
.aw-vis .tag { position: absolute; left: 16px; bottom: 16px; right: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(11,13,28,.6); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; justify-content: space-between; gap: 10px; z-index: 2; }

/* ---------- work with me: stacking cards ---------- */
.stack { display: grid; gap: 0; }
.stk { position: sticky; top: calc(100px + var(--i) * 22px); height: min(78vh, 640px); margin-bottom: 40px; border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--card); border: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(11,13,28,.08); transform-origin: 50% 0; will-change: transform; }
.stk-copy { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.stk-copy h3 { margin: 14px 0 12px; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.8vw, 64px); letter-spacing: -0.05em; line-height: .98; }
.stk-copy .line { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 32px); line-height: 1.15; color: var(--hot); margin: 0 0 14px; }
.stk-copy p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 480px; }
.stk-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stk-copy li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.stk-copy li .ic { color: var(--hot); }
.stk-art { position: relative; overflow: hidden; background: var(--ink); isolation: isolate; }
.stk-art .n { position: absolute; right: 26px; top: 20px; font-family: var(--display); font-weight: 800; font-size: clamp(120px, 15vw, 260px); letter-spacing: -0.07em; line-height: .8; color: rgba(255,255,255,.1); }
.stk-art .orb { position: absolute; border-radius: 50%; filter: blur(50px); animation: drift 8s ease-in-out infinite alternate; }
.stk-art .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 60%, #000, transparent); }
.stk-art .wmk { position: absolute; left: 26px; bottom: 22px; color: #fff; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.03em; }
@media (max-width: 900px) { .stk { grid-template-columns: 1fr; height: auto; position: relative; top: 0; } .stk-art { min-height: 220px; } }

/* ---------- reviews: featured quote + client switcher ---------- */
@keyframes fillw { to { width: 100%; } }
.stars { display: flex; gap: 3px; color: #F5A524; } .stars .ic { width: 16px; height: 16px; stroke-width: 1.2; }

/* brands */
.brands { overflow: hidden; padding: 30px 0; }
.brands .run { display: inline-flex; gap: 64px; white-space: nowrap; animation: mq 50s linear infinite reverse; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 36px); letter-spacing: -0.04em; color: var(--muted); }

/* ---------- library: podcast player + articles ---------- */
.lib { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
.player { position: relative; border-radius: 28px; padding: 30px; background: var(--ink); color: #F6F5F9; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 460px; isolation: isolate; }
.player::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -60%; height: 100%; z-index: -1; background: var(--afterglow); filter: blur(70px); opacity: .55; }
.player h3 { margin: 12px 0 6px; font-family: var(--display); font-size: clamp(26px, 2.4vw, 38px); letter-spacing: -0.04em; line-height: 1.02; }
.player .show { font-family: var(--serif); font-style: italic; font-size: 22px; color: #FFB3CC; }
.wave { display: flex; align-items: center; gap: 4px; height: 70px; }
.wave i { flex: 1; border-radius: 3px; background: rgba(255,255,255,.85); height: 20%; transition: height .3s; }
.player.playing .wave i { animation: wv 1.1s ease-in-out infinite alternate; }
@keyframes wv { from { height: 12%; } to { height: 100%; } }
.pl-ctrl { display: flex; align-items: center; gap: 16px; }
.pl-btn { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--ease); flex: 0 0 auto; }
.pl-btn:hover { transform: scale(1.06); } .pl-btn .ic { width: 22px; height: 22px; }
.pl-btn .pa { display: none; } .player.playing .pl-btn .pa { display: block; } .player.playing .pl-btn .pl { display: none; }
.pl-time { flex: 1; } .pl-time .bar { height: 3px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; margin-top: 8px; } .pl-time .bar i { display: block; height: 100%; width: 0; background: var(--lime); }
.player.playing .pl-time .bar i { animation: fillw 60s linear forwards; }
.arts { display: grid; border-top: 1px solid var(--line); }
.art { display: grid; grid-template-columns: 120px 1fr 30px; gap: 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.art .cov { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.art h4 { margin: 6px 0 4px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.5vw, 23px); letter-spacing: -0.025em; line-height: 1.2; }
.art p { margin: 0; color: var(--muted); font-size: 14px; }
.art .ic { width: 24px; height: 24px; transition: transform .4s var(--ease); }
.art:hover .ic { transform: rotate(-45deg); color: var(--hot); }
.art:hover h4 { color: var(--hot); }
@media (max-width: 900px) { .lib { grid-template-columns: 1fr; } .art { grid-template-columns: 90px 1fr; } .art .ic { display: none; } }

/* generated covers (one vector style) */
.cov { position: relative; background: var(--ink); isolation: isolate; overflow: hidden; }
.cov i { position: absolute; border-radius: 50%; filter: blur(14px); }
.cov.c0 i:nth-child(1) { inset: 30% 10% -20% -10%; background: #3D2CFF; } .cov.c0 i:nth-child(2) { inset: -10% -20% 40% 50%; background: #FF4F8B; }
.cov.c1 i:nth-child(1) { inset: -20% 30% 30% -20%; background: #FFA27A; } .cov.c1 i:nth-child(2) { inset: 40% -10% -30% 40%; background: #8B5CF6; }
.cov.c2 i:nth-child(1) { inset: 20% -20% -30% 20%; background: #FF4F8B; } .cov.c2 i:nth-child(2) { inset: -30% 40% 50% -10%; background: #3D2CFF; }
.cov.c3 i:nth-child(1) { inset: -10% -10% 30% 30%; background: #8B5CF6; } .cov.c3 i:nth-child(2) { inset: 50% 30% -40% -20%; background: #FFA27A; }
.cov::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; }
.cov .g { position: absolute; left: 12%; bottom: 12%; z-index: 1; color: rgba(255,255,255,.9); }
.cov .g .ic { width: 26px; height: 26px; }

/* ---------- CTA ---------- */
.cta { text-align: center; position: relative; overflow: hidden; }
.cta .glow { position: absolute; left: 50%; bottom: -60%; width: 90vw; height: 70vw; margin-left: -45vw; border-radius: 50%; background: var(--afterglow); filter: blur(120px); opacity: .28; pointer-events: none; }
.cta h2 { position: relative; margin: 20px 0; font-family: var(--display); font-weight: 700; font-size: clamp(56px, 10vw, 180px); letter-spacing: -0.06em; line-height: .9; }
.cta p { position: relative; max-width: 520px; margin: 0 auto; color: var(--muted); font-size: 18px; line-height: 1.6; }
.cta .btns { justify-content: center; margin-top: 34px; position: relative; }
.cta small { position: relative; display: inline-flex; gap: 8px; align-items: center; margin-top: 24px; color: var(--muted); font-size: 14px; }

/* ---------- inner page hero ---------- */
.ph { padding-top: clamp(150px, 16vw, 230px); padding-bottom: clamp(60px, 7vw, 110px); }
.ph h1 { margin: 22px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(52px, 8.4vw, 160px); letter-spacing: -0.06em; line-height: .9; }
.ph h1 .serif { font-size: 1.08em; letter-spacing: -0.025em; }
.ph-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 36px; }
.ph-row p { max-width: 620px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
@media (max-width: 800px) { .ph-row { grid-template-columns: 1fr; } }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.03em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .pm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: 0 0 auto; transition: transform .45s var(--ease), background .3s; }
.acc details[open] summary .pm { transform: rotate(45deg); background: var(--text); color: var(--bg); }
.acc .ans { padding: 0 60px 28px 0; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 760px; }

/* cards */
.card { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: 30px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; font: 500 14px/1 var(--body); transition: background .3s, color .3s; }
.chip.on { background: var(--text); color: var(--bg); border-color: transparent; }

/* forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 8px; font-size: 13.5px; font-weight: 600; }
.form .full { grid-column: 1 / -1; }
.form input, .form select, .form textarea { width: 100%; height: 54px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 400 15px/1.4 var(--body); transition: border-color .3s; }
.form textarea { height: 140px; padding-top: 16px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--rose); }
.form .ok { display: none; grid-column: 1 / -1; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--lime) 25%, transparent); }
.form.sent .ok { display: block; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #loader, .curtain { display: none; } }

/* ===== five jobs: one clear card per role ===== */
.job { position: absolute; inset: 0; border-radius: 30px; padding: clamp(26px, 3.4vw, 48px); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; overflow: hidden; isolation: isolate; box-shadow: 0 30px 70px -30px rgba(11,13,28,.35); }
.job::before { content: ""; position: absolute; right: -20%; bottom: -45%; width: 80%; height: 80%; z-index: -1; border-radius: 50%; background: var(--afterglow); filter: blur(70px); opacity: .28; transform: scale(.7); transition: transform 1.2s var(--ease); }
.ss-item.on .job::before { transform: none; }
.job-top { display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.job-top span:last-child { color: var(--hot); }
.job-name { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3.4vw, 60px); letter-spacing: -0.05em; line-height: .95; }
.job-what { margin: 0; color: var(--muted); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.5; max-width: 560px; }
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.job-tags span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; background: var(--bg); }
.job-res { margin-top: auto; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 22px; align-items: end; border-top: 1px solid var(--line); padding-top: 20px; }
.job-res .mono { grid-column: 1 / -1; color: var(--muted); margin-bottom: 8px; }
.job-res b { font-family: var(--display); font-weight: 700; font-size: clamp(54px, 6vw, 104px); letter-spacing: -0.06em; line-height: .85; background: var(--gtext); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.job-res span:last-child { color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 240px; padding-bottom: 6px; }
.ss-item .job > * { transform: translateY(14px); opacity: 0; transition: transform .8s var(--ease), opacity .6s; }
.ss-item.on .job > * { transform: none; opacity: 1; }
.ss-item.on .job > *:nth-child(2) { transition-delay: .05s; } .ss-item.on .job > *:nth-child(3) { transition-delay: .1s; } .ss-item.on .job > *:nth-child(4) { transition-delay: .15s; } .ss-item.on .job > *:nth-child(5) { transition-delay: .2s; }
@media (max-width: 900px) { .ss-stage { height: 56vh; } .job-what { font-size: 21px; } }

/* ===== HighLevel SaaS showcase (wide panel + three cells) ===== */
.sc { border-radius: 36px; overflow: hidden; background: #0E0F24; color: #F6F5F9; position: relative; isolation: isolate; }
.sc::before { content: ""; position: absolute; left: -10%; top: 10%; width: 60%; height: 90%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #8B5CF6, transparent); filter: blur(30px); opacity: .7; }
.sc-top { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 440px; }
.sc-copy { padding: clamp(30px, 4vw, 60px); display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.sc-copy .kick { color: rgba(246,245,249,.7); }
.sc-h { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5.2vw, 92px); letter-spacing: -0.055em; line-height: .92; text-transform: uppercase; }
.sc-h .serif { text-transform: none; font-weight: 400; color: #FF8FB6; }
.sc-copy p { margin: 0; max-width: 440px; color: rgba(246,245,249,.75); line-height: 1.6; }
.sc-img { position: relative; overflow: hidden; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.sc.in .sc-img img { transform: none; }
.sc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0E0F24 0%, rgba(14,15,36,.2) 35%, transparent 60%), linear-gradient(0deg, #0E0F24 0%, transparent 30%); }
.sc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-cell { position: relative; padding: clamp(24px, 3vw, 44px); display: grid; gap: 14px; align-content: start; min-height: 280px; border-top: 1px solid rgba(255,255,255,.08); }
.sc-cell + .sc-cell { border-left: 1px solid rgba(255,255,255,.08); }
.sc-cell b { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -0.04em; line-height: .98; text-transform: uppercase; }
.sc-cell p { margin: 0; color: rgba(246,245,249,.72); line-height: 1.55; font-size: 15px; max-width: 300px; }
.sc-cell .mono { align-self: end; color: rgba(246,245,249,.6); }
.sc-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.sc-ic .ic { width: 22px; height: 22px; }
.sc-cell.c0 .sc-ic { background: linear-gradient(140deg, #E6F3FF, #9FC9FF); color: #0B0D1C; }
.sc-cell.c1 .sc-ic { background: linear-gradient(140deg, #F4F5F8, #A9B1BE); color: #0B0D1C; }
.sc-cell.c2 { background: linear-gradient(180deg, rgba(255,79,139,.0), rgba(255,79,139,.28) 60%, rgba(255,162,122,.55)); }
.sc-cell.c2 .sc-ic { background: linear-gradient(140deg, #FCEBB4, #E2B04A); color: #2A1C05; }
@media (max-width: 900px) { .sc-top { grid-template-columns: 1fr; } .sc-img { min-height: 260px; order: -1; } .sc-row { grid-template-columns: 1fr; } .sc-cell + .sc-cell { border-left: 0; } .sc-cell { min-height: 0; } }

/* also recognised by */
.recog { display: grid; grid-template-columns: auto 1fr 1fr; gap: 16px; align-items: stretch; }
.recog > .kick { align-self: center; padding: 0 16px 0 6px; }
.rc { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 18px 24px 18px 18px; border-radius: 24px; background: #FFFFFF; color: #0B0D1C; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s; }
.rc:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(11,13,28,.35); }
.rc img { width: 120px; height: 100px; object-fit: contain; }
.rc b { display: block; font-family: var(--display); font-size: 20px; letter-spacing: -0.03em; }
.rc span > span:not(.tlink) { display: block; color: #5A5D73; font-size: 14px; margin: 4px 0 10px; }
.rc .tlink { font-size: 13.5px; }
@media (max-width: 1000px) { .recog { grid-template-columns: 1fr; } }

/* collage */

/* statement line */
.stmt { overflow: hidden; padding: clamp(80px, 9vw, 150px) 0 clamp(20px, 3vw, 40px); }
.st-l { display: block; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 7.6vw, 156px); letter-spacing: -0.06em; line-height: .98; will-change: transform; }
.st-l.in2 { padding-left: 7vw; } .st-l.in3 { padding-left: 24vw; }
.st-l .serif { font-size: 1.12em; letter-spacing: -0.03em; }
@media (max-width: 800px) { .st-l { white-space: normal; } .st-l.in2, .st-l.in3 { padding-left: 0; } }

/* work-with-me stacking cards: equal halves, logo plate */
.stk { grid-template-columns: 1fr 1fr !important; height: min(76vh, 600px) !important; }
.stk-art { display: grid !important; place-items: center; }
.plogo { position: relative; z-index: 1; padding: 22px 30px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; transition: transform .6s var(--ease); }
.stk-art:hover .plogo { transform: scale(1.04); }
.stk-url { position: absolute; left: 26px; bottom: 22px; color: rgba(255,255,255,.75); z-index: 1; }
.pl-vk { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 54px); letter-spacing: -0.05em; } .pl-vk b { font-weight: 800; color: #9C93FF; }
@media (max-width: 900px) { .stk { grid-template-columns: 1fr !important; height: auto !important; } .stk-art { min-height: 220px; } }

/* awards visual: logos + typographic SaaS badges */
.aw-row[href] { cursor: pointer; }
.aw-vis .logo-plate { width: 100%; height: 100%; display: grid; place-items: center; background: #FFFFFF; padding: 12%; }
.aw-vis .logo-plate img { width: 100%; height: 100%; object-fit: contain; }
/* ===================== inner pages ===================== */
.rev-band { background: var(--bg-2); border-radius: 40px; margin: 0 12px; }
.av { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 700 14px/1 var(--display); color: #fff; background: var(--afterglow); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* about */
.ab-story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 6vw; align-items: start; padding-bottom: 40px; }
.ab-port { position: sticky; top: 110px; margin: 0; border-radius: 32px; overflow: hidden; background: var(--ink); aspect-ratio: 4 / 4.6; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.ab-port .glow { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 80%; z-index: -1; background: var(--afterglow); filter: blur(60px); opacity: .9; border-radius: 50%; }
.ab-port img { width: 92%; }
.ab-copy p { font-size: 18px; line-height: 1.7; color: var(--muted); margin: 22px 0 0; max-width: 680px; }
.ab-copy p.lead { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.2; letter-spacing: -0.03em; color: var(--text); }
.ab-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.ab-list li { display: flex; gap: 12px; align-items: center; font-size: 16.5px; }
.ab-list .ic { color: var(--hot); }
@media (max-width: 900px) { .ab-story { grid-template-columns: 1fr; } .ab-port { position: relative; top: 0; max-width: 460px; } }
.tl { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.tl-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; width: 0; background: var(--afterglow); transition: width 2.2s var(--ease); }
.tl.in .tl-line i, .tl-line.in i { width: 100%; }
.tl-i { padding: 34px 22px 0 0; position: relative; }
.tl-i::before { content: ""; position: absolute; left: 0; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--rose); }
.tl-y { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 3vw, 54px); letter-spacing: -0.05em; }
.tl-i p { margin: 10px 0 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
@media (max-width: 1000px) { .tl { grid-template-columns: 1fr 1fr; row-gap: 40px; } .tl-line { display: none; } }
.rules-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; align-items: start; }
.rules-head { position: sticky; top: 120px; }
.rule { display: grid; grid-template-columns: 60px 1fr; gap: 16px; padding: 30px 0; border-top: 1px solid var(--line); }
.rule b { display: block; font-family: var(--display); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.035em; }
.rule p { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 900px) { .rules-wrap { grid-template-columns: 1fr; } .rules-head { position: relative; top: 0; } }
.crs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cr { padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cr b { font-family: var(--display); font-size: 24px; letter-spacing: -0.03em; } .cr span { color: var(--muted); }
@media (max-width: 900px) { .crs { grid-template-columns: 1fr; } }

/* work */
.chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ch-c { padding: 30px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 220px; justify-content: space-between; transition: transform .45s var(--ease), border-color .3s; }
.ch-c:hover { transform: translateY(-6px); border-color: var(--rose); }
.ch-c b { font-family: var(--display); font-size: clamp(26px, 2.2vw, 36px); letter-spacing: -0.04em; line-height: 1.05; }
.builds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.bd { padding: 28px 24px 30px 0; border-bottom: 1px solid var(--line); }
.bd:not(:nth-child(4n+1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.bd b { display: block; margin: 14px 0 8px; font-family: var(--display); font-size: 21px; letter-spacing: -0.03em; line-height: 1.15; }
.bd p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14.5px; }
.proc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: p; }
.pr { position: relative; padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.pr-n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--afterglow); color: #fff; font: 700 18px/1 var(--display); }
.pr b { display: block; margin: 22px 0 8px; font-family: var(--display); font-size: 24px; letter-spacing: -0.035em; }
.pr p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.pr:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50px; width: 14px; height: 2px; background: var(--rose); }
@media (max-width: 1000px) { .chooser, .proc { grid-template-columns: 1fr; } .builds { grid-template-columns: 1fr 1fr; } .bd { padding: 22px 0 !important; border-left: 0 !important; } .pr::after { display: none; } }
.offer { position: relative; border-radius: 36px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.offer .orb { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; animation: drift 8s ease-in-out infinite alternate; opacity: .8; }
.offer .grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 52px 52px; }
.offer-in { padding: clamp(36px, 6vw, 90px); max-width: 980px; }
.offer-in .kick { color: rgba(255,255,255,.75); }
.offer-in p { color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.65; max-width: 720px; margin: 26px 0; }
.offer-in ul { list-style: none; padding: 0; margin: 0 0 34px; display: grid; gap: 10px; } .offer-in li { display: flex; gap: 12px; align-items: center; }
.offer-buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.price { font-family: var(--display); font-weight: 700; font-size: clamp(56px, 6vw, 96px); letter-spacing: -0.06em; line-height: 1; }
.price small { font-size: 16px; letter-spacing: 0; font-weight: 500; opacity: .75; }
.ic-q { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.2vw, 54px); letter-spacing: -0.04em; line-height: 1.08; }
div.icb { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6vw; align-items: start; }
@media (max-width: 900px) { div.icb { grid-template-columns: 1fr; } }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fit b { font-family: var(--display); font-size: 26px; letter-spacing: -0.035em; }
.fit ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.fit li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.fit .yes .ic { color: var(--hot); } .fit .no .ic { color: var(--muted); }
@media (max-width: 800px) { .fit { grid-template-columns: 1fr; } }

/* reviews */
.wall { columns: 3; column-gap: 16px; }
.wq { break-inside: avoid; margin: 0 0 16px; padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.wq blockquote { margin: 16px 0 22px; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.4; letter-spacing: -0.015em; }
.wq figcaption { display: flex; gap: 12px; align-items: center; } .wq b { display: block; font-size: 14.5px; } .wq figcaption span span { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .wall { columns: 2; } } @media (max-width: 640px) { .wall { columns: 1; } }

/* blog */
.feat-post { display: grid; grid-template-columns: 1.1fr .9fr; border-radius: 32px; overflow: hidden; background: var(--card); border: 1px solid var(--line); min-height: 440px; }
.feat-post .cov { min-height: 320px; } .feat-post .cov .g .ic { width: 40px; height: 40px; }
.fp-in { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.fp-in h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 50px); letter-spacing: -0.045em; line-height: 1.02; }
.fp-in p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.post { display: grid; gap: 18px; align-content: start; }
.post .cov { aspect-ratio: 16 / 11; border-radius: 22px; transition: transform .6s var(--ease); }
.post:hover .cov { transform: scale(.98); }
.post h3 { margin: 8px 0 8px; font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.03em; line-height: 1.15; transition: color .3s; }
.post:hover h3 { color: var(--hot); }
.post p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
@media (max-width: 1000px) { .posts { grid-template-columns: 1fr 1fr; } .feat-post { grid-template-columns: 1fr; } } @media (max-width: 640px) { .posts { grid-template-columns: 1fr; } }
.nl { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: clamp(30px, 4vw, 56px); border-radius: 32px; background: var(--card); border: 1px solid var(--line); }
.nl h3 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(30px, 3vw, 48px); letter-spacing: -0.045em; line-height: 1; }
.nl p { margin: 0; color: var(--muted); }
.nl-f { display: flex; gap: 10px; } .nl-f input { flex: 1; min-width: 0; height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 15px var(--body); }
@media (max-width: 900px) { .nl { grid-template-columns: 1fr; } .nl-f { flex-direction: column; } }

/* podcast */
.pod-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pod-about p { color: var(--muted); line-height: 1.65; margin: 16px 0 0; } .pod-about .lead { font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.25; letter-spacing: -0.03em; color: var(--text); }
.pod-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 22px; }
.pod-facts b { display: block; margin-top: 8px; font-family: var(--display); font-size: 18px; letter-spacing: -0.02em; }
@media (max-width: 900px) { .pod-top { grid-template-columns: 1fr; } }
.eps { border-top: 1px solid var(--line); }
.ep { display: grid; grid-template-columns: 56px 70px 1fr 140px 70px; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.ep button { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; }
.ep button .pa { display: none; } .ep.playing button { background: var(--pri); color: #fff; border-color: transparent; } .ep.playing button .pa { display: block; } .ep.playing button .pl { display: none; }
.ep b { display: block; font-family: var(--display); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.03em; } .ep p { margin: 4px 0 0; color: var(--muted); font-size: 14.5px; }
.ep-w { display: flex; align-items: center; gap: 3px; height: 30px; } .ep-w i { flex: 1; height: 20%; border-radius: 2px; background: var(--faint); }
.ep.playing .ep-w i { background: var(--hot); animation: wv .9s ease-in-out infinite alternate; }
@media (max-width: 800px) { .ep { grid-template-columns: 52px 1fr; } .ep > .mono, .ep-w { display: none; } }

/* contact */
.ct { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }
.ct-book { position: relative; border-radius: 32px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; min-height: 520px; display: flex; align-items: flex-end; }
.ct-book .orb { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; animation: drift 8s ease-in-out infinite alternate; }
.ct-book .grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 46px 46px; }
.ct-in { padding: clamp(28px, 4vw, 52px); display: grid; gap: 20px; justify-items: start; }
.ct-in .kick { color: rgba(255,255,255,.75); } .ct-in p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.6; max-width: 420px; }
.ct-det { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ct-det > div { padding: 26px 20px 0 0; } .ct-det > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.ct-det b { display: block; margin-top: 10px; font-family: var(--display); font-size: 20px; letter-spacing: -0.025em; }
@media (max-width: 1000px) { .ct { grid-template-columns: 1fr; } .ct-det { grid-template-columns: 1fr 1fr; } .ct-det > div { padding: 20px 0 !important; border-left: 0 !important; } }

.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; padding-top: 60px; }
.moments figure { margin: 0; }
.moments figure:nth-child(2) { margin-top: 70px; }
.moments img { width: 100%; height: auto; border-radius: 22px; }
.moments figcaption { margin-top: 12px; color: var(--muted); }
@media (max-width: 800px) { .moments { grid-template-columns: 1fr 1fr; } .moments figure:nth-child(2) { margin-top: 40px; } .moments figure:nth-child(3) { display: none; } }
.offer { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.offer-img { mix-blend-mode: screen; width: clamp(220px, 26vw, 400px); margin-right: clamp(20px, 4vw, 70px); filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } .offer-img { margin: 0 auto 40px; } }

.skin-o { --foot-bg: linear-gradient(115deg, #3D2CFF 0%, #8B5CF6 32%, #FF4F8B 68%, #FFA27A 100%); --foot-fg: #fff; }
/* ---- hero: portrait inside a giant wordmark, one light source on the horizon ---- */
.oh { position: relative; height: max(100svh, 760px); overflow: hidden; isolation: isolate; }
.oh-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; transition: transform .2s linear; }
.oh-glow i { position: absolute; border-radius: 50%; filter: blur(70px); }
.oh-glow .g1 { left: 6%; width: 46%; height: 52%; bottom: -26%; background: #3D2CFF; opacity: .95; animation: drift 9s ease-in-out infinite alternate; }
.oh-glow .g2 { left: 30%; width: 40%; height: 46%; bottom: -22%; background: #FF4F8B; opacity: .9; animation: drift 7s ease-in-out infinite alternate-reverse; }
.oh-glow .g3 { left: 54%; width: 40%; height: 44%; bottom: -24%; background: #FFA27A; opacity: .85; animation: drift 8s ease-in-out infinite alternate; }
.oh-glow .g4 { left: 40%; width: 22%; height: 30%; bottom: 6%; background: #8B5CF6; opacity: .55; animation: drift 6s ease-in-out infinite alternate-reverse; }
:root[data-theme="light"] .oh-glow i { opacity: .55; }
.oh::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1; background: linear-gradient(to top, var(--bg) 18%, color-mix(in srgb, var(--bg) 70%, transparent) 50%, transparent); pointer-events: none; }
.oh-wordbox { position: absolute; left: 0; right: 0; top: clamp(92px, 12vh, 150px); padding: 0 var(--pad); z-index: -1; text-align: center; }
.oh-word { display: inline-block; font-size: 16vw; line-height: .82; letter-spacing: -0.065em; text-align: center; white-space: nowrap; background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 10%, transparent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oh-word .stop { -webkit-text-fill-color: #C6FF3D; -webkit-text-stroke: 0 !important; }
.oh-word .ch { display: inline-block; transform: translateY(60%); opacity: 0; transition: transform 1.3s var(--ease), opacity 1s; background: inherit; -webkit-background-clip: text; background-clip: text; }
body:not(.pre) .oh-word .ch { transform: none; opacity: 1; }
.oh-port { position: absolute; left: 50%; bottom: 0; margin: 0; height: min(74vh, 800px); transform: translateX(-50%); z-index: 0; transition: transform .2s linear; }
.oh-port img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 60px rgba(11,13,28,.45)); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); transition: opacity 1.4s .2s, transform 1.6s .2s var(--ease), filter 1.4s .2s; }
.pre .oh-port img { opacity: 0; transform: translateY(14%) scale(.96); filter: blur(10px); }
.oh-bottom { position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; z-index: 2; pointer-events: none; }
.oh-bottom > * { pointer-events: auto; }
.oh-l { max-width: min(460px, 31vw); }
.oh-l h1 { margin: 16px 0 22px; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3vw, 52px); letter-spacing: -0.04em; line-height: 1.02; }
.oh-r { justify-self: end; max-width: min(380px, 27vw); display: grid; gap: 20px; }
.oh-r p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15.5px; }
.oh-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.oh-stats b { display: block; font-family: var(--display); font-size: clamp(22px, 1.9vw, 30px); letter-spacing: -0.04em; white-space: nowrap; }
.oh-stats span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 1100px) { .oh-r { display: none; } .oh-bottom { grid-template-columns: 1fr; } .oh-l { max-width: 520px; } }
@media (max-width: 700px) { .oh { height: auto; min-height: 0; padding: 100px 0 40px; display: flex; flex-direction: column; } .oh-wordbox { position: relative; top: auto; } .oh-port { position: relative; left: auto; transform: none !important; height: 54vh; margin: -6vh auto 0; display: flex; justify-content: center; } .oh::after { display: none; } .oh-bottom { position: relative; bottom: auto; margin-top: -40px; } .oh-port::after { content: ""; position: absolute; inset: auto -20% 0 -20%; height: 40%; background: linear-gradient(to top, var(--bg), transparent); } }
/* ---- story: 3D tunnel ---- */
.journey { height: 560vh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; perspective: 900px; }
.stage .title { position: absolute; left: 0; right: 0; top: 14vh; z-index: 3; }
.grid-room { position: absolute; inset: -20%; transform-style: preserve-3d; pointer-events: none; }
.plane { position: absolute; left: 50%; top: 50%; width: 2400px; height: 6000px; margin-left: -1200px; margin-top: -3000px; background-image: linear-gradient(var(--faint) 1px, transparent 1px), linear-gradient(90deg, var(--faint) 1px, transparent 1px); background-size: 120px 120px; opacity: .6; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.plane.floor { transform: translateY(420px) rotateX(90deg); } .plane.ceil { transform: translateY(-420px) rotateX(90deg); }
.world { position: absolute; left: 50%; top: 62%; transform-style: preserve-3d; }
.mile { position: absolute; left: 0; top: 0; width: 520px; margin-left: -260px; margin-top: -120px; text-align: center; }
.mile .yr { font-family: var(--display); font-weight: 800; font-size: 120px; letter-spacing: -0.06em; line-height: .85; background: var(--gtext); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mile .lbl { margin-top: 12px; color: var(--hot); }
.mile p { margin: 10px auto 0; max-width: 400px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.glowball { position: absolute; left: 50%; top: 62%; width: 560px; height: 380px; margin: -190px 0 0 -280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,79,139,.35), rgba(61,44,255,.25), transparent); filter: blur(10px); }
@media (max-width: 700px) { .mile { width: 86vw; margin-left: -43vw; } .mile .yr { font-size: 84px; } .stage .title .h2 { font-size: 38px; } }
.tsteps { position: absolute; left: 0; right: 0; bottom: 7vh; z-index: 3; display: flex; gap: 8px; }
.tsteps span { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.tsteps span i { position: absolute; inset: 0; width: 0; background: var(--afterglow); }

/* ===================================================================== v2 */
:root { --lime-ink: #C6FF3D; --glass-b: color-mix(in srgb, var(--text) 14%, transparent); }
:root[data-theme="light"] { --lime-ink: #6FB800; }

/* logo: the full stop matches the wordmark (black on light) */
.stop { color: inherit !important; -webkit-text-stroke: 0 !important; }
.oh-word .stop { -webkit-text-fill-color: var(--text) !important; }

/* ---------- header CTA: one sleek solid pill ---------- */
.hdr-cta { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 5px 0 18px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 13.5px/1 var(--body); letter-spacing: -0.005em; isolation: isolate; transition: transform .4s var(--ease), box-shadow .4s; box-shadow: 0 6px 18px -8px rgba(11,13,28,.45); }
.hdr-cta::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--afterglow); opacity: 0; filter: blur(12px); transition: opacity .45s; }
.hdr-cta:hover { transform: translateY(-1px); } .hdr-cta:hover::before { opacity: .55; }
.hc-a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #C6FF3D; color: #0B0D1C; transition: transform .45s var(--ease); }
.hc-a .ic { width: 16px; height: 16px; stroke-width: 2; }
.hdr-cta:hover .hc-a { transform: rotate(45deg); }
@media (max-width: 760px) { .hdr-cta { padding: 0 5px 0 14px; gap: 8px; font-size: 12.5px; height: 40px; } .hc-a { width: 30px; height: 30px; } }
@media (max-width: 400px) { .hc-t { display: none; } .hdr-cta { padding: 0 5px; } }

/* ---------- buttons: solid ink pill with lime disc · ghost text button ---------- */
.btns { display: flex; gap: 12px 18px; flex-wrap: wrap; align-items: center; }
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 54px; padding: 0 6px 0 24px; border-radius: 999px; font: 600 15px/1 var(--body); letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden; border: 0; transition: transform .4s var(--ease), box-shadow .4s, color .4s; }
.btn .bt { position: relative; z-index: 1; }
.btn .bi { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; transition: transform .5s var(--ease), background .4s, color .4s; }
.btn .bi .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.btn.pri { background: var(--text); color: var(--bg); box-shadow: 0 14px 30px -14px rgba(11,13,28,.55); }
.btn.pri::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--afterglow); clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .6s var(--ease); }
.btn.pri:hover::before { clip-path: inset(0 0 0 0 round 999px); }
.btn.pri:hover { color: #fff; box-shadow: 0 18px 40px -16px rgba(255,79,139,.6); }
.btn.pri .bi { background: #C6FF3D; color: #0B0D1C; }
.btn.pri:hover .bi { transform: rotate(45deg); background: #fff; }
.btn.ghost { background: transparent; color: var(--text); padding: 0 4px 0 2px; height: 54px; overflow: visible; }
.btn.ghost .bt { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 4px; transition: background-size .45s var(--ease); }
.btn.ghost:hover .bt { background-size: 0 1.5px; background-position: 100% 100%; }
.btn.ghost .bi { width: 40px; height: 40px; border: 1px solid var(--glass-b); }
.btn.ghost:hover .bi { background: var(--text); color: var(--bg); transform: translateX(4px); }
.btn.white { background: #fff; color: #0B0D1C; } .btn.white .bi { background: #0B0D1C; color: #C6FF3D; }
.btn.white:hover .bi { transform: rotate(45deg); }
button.btn { font-family: var(--body); }

/* ---------- back to top: liquid glass, lime ring, bottom left ---------- */
.totop { position: fixed; left: 22px; bottom: 22px; z-index: 75; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--text);
  background: color-mix(in srgb, var(--bg-2) 30%, transparent); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px -8px rgba(198,255,61,.35), 0 14px 34px -14px rgba(11,13,28,.5);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .4s, transform .5s var(--ease), background .35s, color .35s; }
.totop::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; background: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%); pointer-events: none; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop .ic { width: 20px; height: 20px; stroke-width: 2; position: relative; z-index: 1; transition: transform .4s var(--ease); }
.totop:hover { background: #C6FF3D; color: #0B0D1C; } .totop:hover .ic { transform: translateY(-3px); }
.totop .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
.totop .ring circle { fill: none; stroke: transparent; stroke-width: 2.5; }
.totop .ring circle.pr { stroke: var(--lime-ink); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
body.menu-open .totop { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .totop { left: 14px; bottom: 14px; width: 48px; height: 48px; } }

/* ---------- footer: readable, themed, smaller logo ---------- */
main.page { box-shadow: 0 40px 80px rgba(11,13,28,.18); }
.rf { position: sticky; bottom: 0; z-index: 1; background: var(--bg-3); color: var(--text); overflow: hidden; isolation: isolate; }
.rf-glow { position: absolute; right: -10%; bottom: -60%; width: 70%; height: 120%; z-index: -1; border-radius: 50%; background: var(--afterglow); filter: blur(120px); opacity: .22; pointer-events: none; }
.rf .in { padding-top: clamp(110px, 10vw, 150px); }
.rf-top { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1.1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.rf-brand { display: grid; gap: 18px; justify-items: start; }
.rf-logo { font-size: clamp(34px, 3.4vw, 52px); }
.rf-brand p { margin: 0; max-width: 340px; color: var(--muted); line-height: 1.6; font-size: 15px; }
.rf-col { display: grid; gap: 11px; align-content: start; font-size: 15px; }
.rf-col .mono { color: var(--muted); margin-bottom: 6px; }
.rf-col a { display: inline-flex; gap: 10px; align-items: center; color: var(--text); transition: color .25s, transform .3s var(--ease); width: fit-content; }
.rf-col a:hover { color: var(--hot); transform: translateX(3px); }
.rf-col .ic { width: 17px; height: 17px; color: var(--muted); }
.rf-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 0 28px; margin-top: clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
@media (max-width: 1000px) { .rf-top { grid-template-columns: 1fr 1fr; } .rf-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rf-top { grid-template-columns: 1fr; } .rf .in { padding-bottom: 60px; } }

/* ---------- hero refinements ---------- */
.oh-port img { filter: drop-shadow(0 30px 50px rgba(11,13,28,.35)); }
.oh-l { max-width: min(620px, 36vw); }
.oh-l h1 { font-size: clamp(32px, 3.3vw, 58px); line-height: 1; margin: 16px 0 26px; }
.oh-l h1 .serif { font-size: 1.08em; }
.oh-r { max-width: min(360px, 26vw); gap: 18px; }
.oh-r p { font-size: 16px; color: var(--muted); }
.oh-chips { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.oh-chips li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.oh-chips b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -0.035em; }
.oh-chips span { color: var(--muted); font-size: 13px; text-align: right; }
.oh-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.oh-cue i { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid currentColor; position: relative; }
.oh-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
@media (max-height: 820px) and (min-width: 1101px) { .oh-port { height: min(70vh, 640px); } .oh-cue { display: none; } .oh-l h1 { font-size: clamp(30px, 2.9vw, 46px); margin: 12px 0 20px; } .btn { height: 50px; } .btn .bi { width: 40px; height: 40px; } }
@media (max-width: 1100px) { .oh-r { display: grid; max-width: 520px; } .oh-l { max-width: 560px; } .oh-cue { display: none; } }
@media (max-width: 1100px) and (min-width: 701px) { .oh-r { display: none; } }
@media (max-width: 700px) { .oh-l h1 { font-size: 36px; } .oh-r { margin-top: 24px; } }

/* ---------- front-facing plaque (generic recreation) ---------- */
.plq { container-type: inline-size; --m1: #E9EDF4; --m2: #A9B2C2; --m3: #F7F9FC; --acc: #C9D1DE; position: relative; width: min(100%, 300px); aspect-ratio: 3.2 / 4.2; border-radius: 10px; padding: 7%; background: linear-gradient(150deg, #1A2B55 0%, #0D1838 45%, #071028 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 2px 0 rgba(255,255,255,.18), 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 6px rgba(255,255,255,.02); overflow: hidden; isolation: isolate; }
.plq.gold { --m1: #F6DE9C; --m2: #C08A2C; --m3: #FFF2C9; --acc: #E2B04A; }
.plq.diamond { --m1: #D7EEFF; --m2: #6FA8E8; --m3: #F2FAFF; --acc: #9FD0FF; }
.plq-face { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; color: #fff; }
.plq-badge { width: 42%; aspect-ratio: 1; border-radius: 16%; display: grid; place-items: center; border: 2px solid var(--acc); background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), rgba(0,0,0,.2)); box-shadow: 0 0 0 4px rgba(0,0,0,.25), 0 0 30px -6px var(--acc); }
.plq-badge .ic { width: 64%; height: 64%; color: var(--m1); stroke-width: 1.2; }
.plq-lab { font: 800 6.2cqw/1 var(--display); letter-spacing: .02em; padding: 2.4cqw 3.6cqw; border: 1.5px solid var(--acc); border-radius: 4px; color: var(--m3); }
.plq .plq-face b.plq-tier { font: 800 10.5cqw/1 var(--display); letter-spacing: .1em; white-space: nowrap; background: linear-gradient(180deg, var(--m3) 10%, var(--m1) 45%, var(--m2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plq-meta { font: 500 3.6cqw/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.plq-hl { font: 700 5cqw/1 var(--display); letter-spacing: .02em; color: rgba(255,255,255,.85); display: inline-flex; gap: 6px; align-items: center; }
.plq-hl::before { content: ""; width: 12px; height: 10px; background: linear-gradient(90deg, #FFBC00 0 30%, transparent 30% 35%, #37CA37 35% 65%, transparent 65% 70%, #188BF6 70%); clip-path: polygon(0 40%, 15% 0, 30% 40%, 30% 100%, 0 100%, 35% 30%, 50% 0, 65% 30%, 65% 100%, 35% 100%, 70% 20%, 85% 0, 100% 20%, 100% 100%, 70% 100%); }
.plq-shine { position: absolute; inset: -40%; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,.04) 52%, transparent 60%); transform: translateX(var(--sx, -30%)); transition: transform 1.2s var(--ease); }
.plq.sm { width: 100%; border-radius: 8px; }

/* LCCI medal (generic) */
.medal { display: grid; justify-items: center; gap: 12px; text-align: center; color: #fff; padding: 20px; }
.md-ring { width: clamp(120px, 12vw, 170px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 210deg, #F6DE9C, #C08A2C, #FFF2C9, #C08A2C, #F6DE9C); box-shadow: 0 0 0 10px rgba(246,222,156,.08), 0 30px 60px -20px rgba(0,0,0,.6); }
.md-ring span { width: 78%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2A2F52, #0B0D1C); color: #F6DE9C; }
.md-ring .ic { width: 46%; height: 46%; stroke-width: 1.2; }
.medal b { font: 700 clamp(24px, 2.4vw, 36px)/1 var(--display); letter-spacing: -0.04em; margin-top: 8px; }
.medal > span:not(.mono):not(.md-ring) { color: rgba(255,255,255,.7); }
.medal .mono { color: #F6DE9C; }

/* ---------- SaaS showcase: hover-friendly cells ---------- */
.sc-top { min-height: 400px; }
.sc-img img { transition: transform 1.6s var(--ease); }
.sc:hover .sc-img img { transform: scale(1.04); }
.sc-row { gap: 0; }
.sc-cell { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; padding: clamp(22px, 2.6vw, 40px); overflow: hidden; isolation: isolate; cursor: default; transition: background .5s; min-height: 0; }
.sc-cell.c2 { background: none; }
.sc-spot { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 60%); }
.sc-cell.c0 .sc-spot { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(159,208,255,.20), transparent 60%); }
.sc-cell.c1 .sc-spot { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(220,226,236,.16), transparent 60%); }
.sc-cell.c2 .sc-spot { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(226,176,74,.22), transparent 60%); }
.sc-cell:hover .sc-spot { opacity: 1; }
.sc-plq { perspective: 700px; }
.sc-plq .plq { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(0); transition: transform .5s var(--ease); transform-style: preserve-3d; }
.sc-cell:hover .plq { --sx: 30%; }
.sc-txt { display: grid; gap: 10px; align-content: start; }
.sc-txt .mono { color: rgba(246,245,249,.55); }
.sc-txt b { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2vw, 34px); letter-spacing: -0.04em; line-height: .98; text-transform: uppercase; }
.sc-cell.c0 b { color: #CDE8FF; } .sc-cell.c2 b { color: #F6DE9C; }
.sc-txt p { margin: 0; color: rgba(246,245,249,.72); line-height: 1.5; font-size: 14.5px; }
.sc-crit { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 8px; font-size: 13.5px; color: rgba(246,245,249,.85); }
.sc-crit li { display: flex; gap: 8px; align-items: flex-start; opacity: .55; transform: translateY(4px); transition: opacity .45s, transform .45s var(--ease); }
.sc-crit .ic { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #C6FF3D; stroke-width: 2; }
.sc-cell:hover .sc-crit li { opacity: 1; transform: none; } .sc-cell:hover .sc-crit li + li { transition-delay: .06s; }
@media (hover: none) { .sc-crit li { opacity: 1; transform: none; } }
@media (max-width: 1100px) and (min-width: 901px) { .sc-cell { grid-template-columns: 1fr; } .sc-plq { max-width: 140px; } }
@media (max-width: 900px) { .sc-cell { grid-template-columns: 110px 1fr; } }

/* ---------- awards: scroll-driven rows + front-facing visuals ---------- */
.aw { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.aw-rows { position: relative; border-top: 0; padding-left: 22px; }
.aw-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); border-radius: 2px; }
.aw-prog i { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 2px; background: var(--afterglow); }
.aw-row { padding: clamp(30px, 5vh, 52px) 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.aw-row:first-of-type { border-top: 1px solid var(--line); }
.aw-row b { color: var(--faint); }
.aw-row.past b { color: color-mix(in srgb, var(--text) 55%, transparent); }
.aw-side { position: relative; }
.aw-vis { position: sticky; top: max(110px, calc(50vh - min(30vw, 520px) / 2 * 1.1)); aspect-ratio: 4 / 4.4; max-height: calc(100vh - 140px); width: 100%; background: radial-gradient(120% 80% at 50% 110%, #2A1F5C 0%, #0E0F24 55%); }
.aw-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 12% 18% 18%; }
.aw-stage::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 14%; height: 8%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(14px); z-index: -1; }
.aw-stage .plq { width: min(100%, 300px); }
.aw-stage.light { background: radial-gradient(100% 70% at 50% 100%, #EDEBFF, #FFFFFF 65%); }
.aw-stage.light::after { background: rgba(11,13,28,.12); }
.aw-vis .logo-plate { background: none; padding: 0; width: 82%; height: 70%; display: grid; place-items: center; }
.aw-vis .logo-plate img { width: 100%; height: 100%; object-fit: contain; }
.aw-vis > div { transform: scale(.94) translateY(14px); }
.aw-vis > div.on { transform: none; }
.aw-vis > div .plq { transform: rotateY(-12deg) rotateX(4deg); transition: transform 1.2s var(--ease); }
.aw-vis > div.on .plq { transform: none; --sx: 30%; }
.aw-vis .tag { background: rgba(11,13,28,.55); }
@media (max-width: 900px) { .aw { grid-template-columns: 1fr; } .aw-side { order: -1; position: sticky; top: 80px; z-index: 2; } .aw-vis { position: relative; top: 0; aspect-ratio: 16 / 10; max-height: 42vh; } .aw-stage { padding: 6% 30% 12%; } .aw-row { grid-template-columns: 64px 1fr; padding: 26px 0; } .aw-row .ic { display: none; } }

/* ---------- moments: curved 3D gallery ---------- */
.gl-sec { overflow: hidden; }
.gl { position: relative; height: clamp(300px, 42vw, 560px); perspective: 1100px; perspective-origin: 50% 50%; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.gl.drag { cursor: grabbing; }
.gl-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.gl-c { position: absolute; left: 50%; top: 50%; width: var(--cw, 220px); aspect-ratio: 3 / 4; margin: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--bg-3); cursor: inherit; backface-visibility: hidden; will-change: transform; box-shadow: 0 20px 40px -20px rgba(11,13,28,.45); }
.gl-c img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .8s var(--ease); }
.gl-c:hover img { transform: scale(1.05); }
.gl-c:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
.gl-hint { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); color: var(--muted); white-space: nowrap; }
.lb { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; pointer-events: none; visibility: hidden; }
.lb.on { pointer-events: auto; visibility: visible; }
.lb-bg { position: absolute; inset: 0; background: rgba(11,13,28,.55); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); opacity: 0; transition: opacity .45s; }
.lb.on .lb-bg { opacity: 1; }
.lb-fig { position: relative; margin: 0; max-width: min(1100px, 90vw); display: grid; gap: 14px; justify-items: center; opacity: 0; transform: scale(.92); transition: opacity .45s, transform .6s var(--ease); }
.lb.on .lb-fig { opacity: 1; transform: none; }
.lb-fig img { max-width: 100%; max-height: 78vh; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.lb-fig figcaption { color: #fff; opacity: .8; }
.lb-x { position: absolute; right: 22px; top: 22px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, transform .4s var(--ease); }
.lb-x:hover { background: #C6FF3D; color: #0B0D1C; transform: rotate(90deg); }

/* ---------- three ways in: real visuals ---------- */
.stk-art.art-en { background: radial-gradient(90% 80% at 60% 40%, #FFFFFF, #E8F0FF 70%); display: grid !important; place-items: center; padding: 6% 4% 12%; }
.stk-art.art-en img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--ease); filter: drop-shadow(0 20px 40px rgba(30,60,140,.2)); }
.stk-art.art-en:hover img { transform: scale(1.03); }
.stk-art.art-en .stk-url { color: #3B4A6B; }
.stk-art.art-ic { background: radial-gradient(80% 70% at 50% 60%, #FFFFFF, #EEF3FF 60%, #DCE6FF); }
.stk-art.art-ic .stk-url { color: #3B4A6B; }
.ic-card { display: grid; justify-items: center; gap: 22px; padding: clamp(26px, 3vw, 44px) clamp(26px, 3.4vw, 54px); border-radius: 26px; background: rgba(255,255,255,.75); border: 1px solid rgba(31,91,240,.14); box-shadow: 0 30px 60px -30px rgba(31,91,240,.35); transition: transform .6s var(--ease); }
.stk-art.art-ic:hover .ic-card { transform: translateY(-4px) scale(1.02); }
.ic-chip { padding: 8px 14px; border-radius: 999px; background: #0E1A3A; color: #fff; }
.ic-logo { display: inline-grid; gap: .28em; justify-items: start; font-family: var(--logo); font-size: clamp(34px, 3.6vw, 56px); line-height: 1; }
.icl-w { letter-spacing: -0.035em; white-space: nowrap; } .icl-w b { font-weight: 800; color: #0E1633; } .icl-w i { font-style: normal; font-weight: 800; color: #1F5BF0; }
.icl-s { font: 600 .27em/1 var(--body); letter-spacing: .55em; text-transform: uppercase; color: #5B6170; padding-left: .08em; }
.art-vk .plogo { background: rgba(255,255,255,.08); }
.stk { height: min(76vh, 600px) !important; }
@media (max-height: 760px) and (min-width: 901px) { .stk { height: calc(100vh - 140px) !important; top: calc(90px + var(--i) * 14px); } .stk-copy { padding: 28px 36px; gap: 14px; } .stk-copy h3 { font-size: clamp(30px, 3vw, 46px); } .stk-copy .line { font-size: 22px; margin-bottom: 8px; } .stk-copy li { font-size: 14px; } }

/* ---------- avatars ---------- */
.av { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--afterglow); color: #fff; font: 700 14px/1 var(--display); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- testimonial carousel ---------- */
.rev-sec { position: relative; background: #0B0D1C; color: #F6F5F9; border-radius: 40px; margin: 0 12px; overflow: hidden; isolation: isolate; --muted: #A2A4BA; --line: rgba(246,245,249,.12); --text: #F6F5F9; --faint: rgba(246,245,249,.2); --hot: #FF6E9E; }
.rev-sec .h2 { color: #F6F5F9; } .rev-sec .sh p { color: #A2A4BA; }
.tc { position: relative; outline: none; }
.tc-glow { position: absolute; left: 50%; top: 50%; width: min(900px, 80vw); height: 420px; transform: translate(-50%, -55%); border-radius: 50%; background: var(--afterglow); filter: blur(120px); opacity: .35; z-index: -1; pointer-events: none; }
.tc-stage { position: relative; height: clamp(360px, 30vw, 420px); perspective: 1400px; touch-action: pan-y; cursor: grab; }
.tc.drag .tc-stage { cursor: grabbing; }
.tc-card { position: absolute; left: 50%; top: 0; width: min(560px, 82vw); height: 100%; margin: 0 0 0 calc(min(560px, 82vw) / -2); padding: clamp(26px, 3vw, 42px); border-radius: 30px; display: flex; flex-direction: column; gap: 20px;
  background: linear-gradient(160deg, #1D2145 0%, #13162E 70%); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 40px 80px -40px rgba(0,0,0,.7); color: #F6F5F9;
  transition: transform .8s var(--ease), opacity .6s, filter .6s; will-change: transform; user-select: none; -webkit-user-select: none; }
.tc-card.on { background: linear-gradient(160deg, #272C5C 0%, #171A38 70%); border-color: transparent; }
.tc-card.on::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--afterglow); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tc-top { display: flex; justify-content: space-between; align-items: center; }
.tc-q { font: 400 84px/.6 var(--serif); color: #C6FF3D; height: 34px; }
.tc-card blockquote { margin: 0; flex: 1; overflow: hidden; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.38; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.tc-card figcaption { display: flex; gap: 14px; align-items: center; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.tc-card figcaption b { display: block; font-size: 16px; } .tc-card figcaption span span { color: #A2A4BA; font-size: 13.5px; }
.tc-av { width: 52px; height: 52px; box-shadow: 0 0 0 2px rgba(198,255,61,.8); }
.tc-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; padding: 0 var(--pad); }
.tc-arr { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease); flex: 0 0 auto; }
.tc-arr:hover { background: #C6FF3D; color: #0B0D1C; } .tc-arr.prev:hover { transform: translateX(-3px); } .tc-arr.next:hover { transform: translateX(3px); }
.tc-dots { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 6px 4px; max-width: min(760px, 70vw); }
.tc-dots::-webkit-scrollbar { display: none; }
.tc-dot { flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; opacity: .45; transform: scale(.82); transition: opacity .3s, transform .4s var(--ease); }
.tc-dot .av { width: 36px; height: 36px; font-size: 11px; }
.tc-dot.on { opacity: 1; transform: none; } .tc-dot.on .av { box-shadow: 0 0 0 2px #0B0D1C, 0 0 0 4px #C6FF3D; }
.tc-dot:hover { opacity: .9; }
.tc-prog { width: min(320px, 60vw); height: 2px; margin: 22px auto 0; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.tc-prog i { display: block; height: 100%; width: 0; background: #C6FF3D; }
.tc-prog i.go { animation: fillw 7s linear forwards; }
@keyframes fillw { to { width: 100%; } }
.rev-links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.rev-sec .rev-links { justify-content: center; }
.rev-sec .brands .run { color: rgba(246,245,249,.45); }
@media (max-width: 700px) { .tc-stage { height: 470px; } .tc-dots { display: none; } .rev-sec { margin: 0 6px; border-radius: 28px; } }

/* ---------- reviews page ---------- */
.rh { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px, 5vw, 80px); align-items: end; padding-top: clamp(130px, 16vh, 190px); padding-bottom: 50px; }
.rh h1 { margin: 18px 0 22px; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 104px); letter-spacing: -0.055em; line-height: .95; }
.rh-l > p { margin: 0 0 26px; color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 520px; }
.rh-proof { display: flex; gap: 16px; align-items: center; margin-bottom: 30px; }
.rh-proof > div:last-child { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.rh-faces { display: flex; } .rh-faces .av { width: 44px; height: 44px; margin-left: -10px; box-shadow: 0 0 0 3px var(--bg); font-size: 12px; } .rh-faces .av:first-child { margin-left: 0; }
.rh-up { position: relative; display: grid; gap: 8px; padding: 30px; border-radius: 30px; background: #0B0D1C; color: #F6F5F9; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease); }
.rh-up::before { content: ""; position: absolute; right: -30%; top: -40%; width: 90%; height: 90%; z-index: -1; border-radius: 50%; background: #14A800; filter: blur(70px); opacity: .45; }
.rh-up:hover { transform: translateY(-4px); }
.rh-up-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .rh-up-top .ic { width: 28px; height: 28px; color: #6FDA44; }
.rh-badge { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: rgba(111,218,68,.16); color: #9BEA7A; font-size: 12.5px; font-weight: 600; }
.rh-up > b { font: 700 clamp(64px, 7vw, 110px)/.85 var(--display); letter-spacing: -0.06em; }
.rh-up > span:not(.tlink):not(.rh-up-row):not(.rh-up-top) { color: #A2A4BA; }
.rh-up-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; color: #A2A4BA; }
.rh-up-row b { color: #fff; }
.rh-up .tlink { width: fit-content; color: #C6FF3D; }
.rh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-bottom: 60px; }
.rh-s { display: grid; gap: 4px; padding: 26px 22px 0 0; } .rh-s + .rh-s { padding-left: 22px; border-left: 1px solid var(--line); }
.rh-s b { font: 600 clamp(32px, 3vw, 52px)/1 var(--display); letter-spacing: -0.055em; } .rh-s span { font-weight: 600; } .rh-s small { color: var(--muted); font-size: 13px; }
.wall { columns: 3 320px; column-gap: 16px; }
.wq { position: relative; padding: 28px; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.wq:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hot) 50%, transparent); box-shadow: 0 24px 50px -30px rgba(11,13,28,.35); }
.wq blockquote { margin: 16px 0 22px; font-size: 16px; line-height: 1.6; }
.wq figcaption { display: flex; gap: 12px; align-items: center; } .wq figcaption b { display: block; font-size: 15px; } .wq figcaption span span { color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .rh { grid-template-columns: 1fr; } .rh-stats { grid-template-columns: 1fr 1fr; } .rh-s:nth-child(3) { padding-left: 0; border-left: 0; } }

/* mastermind cards */
.mms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mm { margin: 0; padding: 30px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; transition: transform .45s var(--ease), box-shadow .45s; }
.mm:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(11,13,28,.35); }
.mm-h { font: 600 clamp(20px, 1.6vw, 26px)/1.15 var(--display); letter-spacing: -0.03em; }
.mm blockquote { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; flex: 1; }
.mm figcaption { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); } .mm figcaption b { display: block; } .mm figcaption span span { color: var(--muted); font-size: 13px; }
.mm-wide { grid-column: span 2; background: #0B0D1C; color: #F6F5F9; border-color: transparent; position: relative; overflow: hidden; isolation: isolate; }
.mm-wide::before { content: ""; position: absolute; right: -10%; bottom: -40%; width: 60%; height: 90%; z-index: -1; border-radius: 50%; background: var(--afterglow); filter: blur(80px); opacity: .45; }
.mm-wide blockquote { color: rgba(246,245,249,.75); } .mm-wide figcaption { border-color: rgba(255,255,255,.12); } .mm-wide figcaption span span { color: #A2A4BA; }
.mm-chart { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 10px; }
.mm-chart > span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.mm-chart > span i { width: 100%; height: calc(var(--h) * .72); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #A891FF, #3D2CFF); transform-origin: bottom; transform: scaleY(0); transition: transform 1.2s var(--ease); }
.mm.in .mm-chart > span i { transform: none; } .mm.in .mm-chart > span:nth-child(2) i { transition-delay: .1s; } .mm.in .mm-chart > span:nth-child(3) i { transition-delay: .2s; } .mm.in .mm-chart > span:nth-child(4) i { transition-delay: .3s; }
.mm-chart em { font: 600 14px/1 var(--display); font-style: normal; } .mm-chart small { font: 500 10.5px/1 var(--mono); color: #A2A4BA; letter-spacing: .08em; }
.mm-chart .inc { justify-content: center; border: 1px dashed rgba(198,255,61,.6); border-radius: 12px; color: #C6FF3D; height: 80%; text-align: center; } .mm-chart .inc b { font: 700 16px/1.1 var(--display); }
.mm-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 70px 0 22px; } .mm-head p { margin: 0; }
@media (max-width: 1000px) { .mms { grid-template-columns: 1fr; } .mm-wide { grid-column: auto; } }

/* ---------- about: text left, image right ---------- */
.abh { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: end; padding-top: clamp(120px, 15vh, 170px); }
.abh h1 { margin: 18px 0 22px; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 5.6vw, 96px); letter-spacing: -0.055em; line-height: .95; }
.abh .lead { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 22px; max-width: 640px; }
.abh-story p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; max-width: 620px; font-size: 16px; }
.abh .btns { margin-top: 26px; }
.abh-img { position: relative; margin: 0; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 520px; isolation: isolate; }
.abh-img img { position: relative; width: auto; max-width: 100%; max-height: min(78vh, 760px); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); filter: drop-shadow(0 30px 50px rgba(11,13,28,.3)); }
.abh-glow { position: absolute; left: 5%; right: 5%; bottom: 0; height: 70%; z-index: -1; border-radius: 50% 50% 0 0; background: var(--afterglow); filter: blur(70px); opacity: .45; }
@media (max-width: 900px) { .abh { grid-template-columns: 1fr; } .abh-img { min-height: 0; } .abh-img img { max-height: 60vh; } }

/* ---------- work: ENGAGE + Inner Circle ---------- */
.offer2 { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 20px; border-radius: 36px; background: linear-gradient(140deg, #F2F6FF, #E3ECFF); color: #0B0D1C; overflow: hidden; --muted: #4A5068; --hot: #1F5BF0; }
.offer2-in { padding: clamp(32px, 5vw, 76px); display: grid; gap: 22px; justify-items: start; }
.offer2-in .h2 { color: #0B0D1C; margin-top: 10px; } .offer2-in p { margin: 0; color: #4A5068; line-height: 1.65; max-width: 560px; }
.offer2-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .offer2-in li { display: flex; gap: 10px; align-items: center; } .offer2-in li .ic { color: #1F5BF0; }
.offer2 .btn.pri { background: #0B0D1C; color: #fff; }
.offer2-img { display: block; padding: 4% 4% 4% 0; } .offer2-img img { width: 100%; transition: transform 1s var(--ease); } .offer2-img:hover img { transform: scale(1.02); }
.offer-buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
@media (max-width: 1000px) { .offer2 { grid-template-columns: 1fr; } .offer2-img { padding: 0 5% 5%; order: -1; } }
.ic-hero { display: inline-grid; gap: 14px; justify-items: start; padding: 28px 32px; border-radius: 24px; background: #fff; border: 1px solid rgba(31,91,240,.14); margin-bottom: 30px; box-shadow: 0 24px 50px -30px rgba(31,91,240,.4); transition: transform .45s var(--ease); }
.ic-hero:hover { transform: translateY(-3px); } .ic-hero .mono { color: #5B6170; } .ic-hero .ic-logo { font-size: clamp(30px, 3vw, 44px); }

/* ---------- contact details ---------- */
.ct-dets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ct-d { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: transform .45s var(--ease), border-color .3s; }
.ct-d:hover { transform: translateY(-3px); border-color: var(--hot); }
.ct-d b { display: block; margin-top: 4px; font-size: 15px; } .ct-d > .ic { color: var(--muted); }
.ct-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); }
@media (max-width: 1100px) { .ct-dets { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .ct-dets { grid-template-columns: 1fr; } }

/* ---------- short / zoomed viewports ---------- */
@media (max-height: 760px) and (min-width: 901px) {
  .ss-list a { font-size: clamp(30px, min(4vw, 7vh), 64px); }
  .ss-stage { height: min(72vh, 520px); }
  .job { padding: 26px 30px; gap: 14px; } .job-name { font-size: clamp(30px, 3vw, 46px); } .job-res b { font-size: clamp(44px, 5vw, 76px); }
}
.curtain.cover { transition: transform .42s var(--ease-io); } .curtain.leave { transition: transform .6s var(--ease-io); }
/* no mask on the cutout (masks rendered a faint box around it) */
.oh-port img, .abh-img img { -webkit-mask-image: none !important; mask-image: none !important; }
.abh-img::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 22%; background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }
.rf-bottom { padding-left: max(0px, calc(92px - var(--pad))); }

/* ===================================================================== v3 */
/* plaque = faithful SVG recreation */
.plq { all: unset; display: block; position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; }
.plq svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plq.sm { width: 100%; }
.plq svg rect:first-of-type { filter: drop-shadow(0 18px 30px rgba(6,12,30,.45)); }

/* ---------- awards: pinned until every award has been seen ---------- */
.awp { position: relative; height: calc(100vh + var(--n) * 62vh); }
.awp-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.awp-grid { width: 100%; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 90px); align-items: center; padding-top: 64px; }
.awp-h { font-size: clamp(36px, min(4.6vw, 8vh), 80px) !important; margin: 14px 0 clamp(16px, 3vh, 34px); }
.awp .aw-rows { position: relative; padding-left: 22px; }
.awp .aw-row { width: 100%; display: grid; grid-template-columns: 74px 1fr 24px; gap: 14px; align-items: center; text-align: left; padding: clamp(9px, 1.7vh, 18px) 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; cursor: pointer; }
.awp .aw-row:first-of-type { border-top: 1px solid var(--line); }
.awp .aw-row .yr { font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--muted); transition: color .4s; }
.aw-t { display: grid; gap: 4px; }
.awp .aw-row b { font-family: var(--display); font-weight: 600; font-size: clamp(18px, min(2vw, 3.4vh), 32px); letter-spacing: -0.035em; line-height: 1.05; color: var(--faint); transition: color .45s, transform .6s var(--ease); }
.awp .aw-row .d { font-size: 13.5px; color: var(--muted); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.awp .aw-row.past b { color: color-mix(in srgb, var(--text) 50%, transparent); }
.awp .aw-row.on b { color: var(--text); transform: translateX(8px); }
.awp .aw-row.on .yr { color: var(--hot); }
.awp .aw-row.on .d { max-height: 40px; opacity: 1; transform: translateX(8px); }
.awp .aw-row .ic { width: 18px; height: 18px; color: var(--muted); opacity: 0; transition: opacity .3s; } .awp .aw-row.on .ic { opacity: 1; }
.awp-vis { position: relative; justify-self: center; width: min(100%, calc(100vh - 150px)); aspect-ratio: 1; }
.awp-bg { position: absolute; inset: 0; border-radius: 50%; isolation: isolate; }
.awp-bg::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(color-mix(in srgb, var(--violet) 10%, transparent) 0 25%, transparent 0 50%) 0 0 / 12px 12px; filter: blur(.8px); -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); }
.awp-bg::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--afterglow); filter: blur(70px); opacity: .22; z-index: -1; }
.av-item { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(24px) scale(.94); transition: opacity .6s, transform .8s var(--ease); pointer-events: none; }
.av-item.on { opacity: 1; transform: none; }
.av-art { display: grid; place-items: center; perspective: 900px; }
.av-plq { width: 46%; }
.av-plq .plq { transform: rotateY(-14deg) rotateX(4deg); transition: transform 1.2s var(--ease); animation: bob 6s ease-in-out infinite; }
.av-item.on .av-plq .plq { transform: rotateY(-4deg) rotateX(2deg); }
@keyframes bob { 50% { translate: 0 -8px; } }
.av-logo .coin { width: clamp(180px, 22vw, 290px); aspect-ratio: 1; border-radius: 34px; background: #fff; display: grid; place-items: center; padding: 14%; box-shadow: 0 40px 70px -30px rgba(11,13,28,.45), 0 0 0 1px rgba(11,13,28,.06), inset 0 -6px 0 rgba(11,13,28,.04); transform: rotate(-3deg); animation: bob 6s ease-in-out infinite; }
.av-logo .coin img { width: 100%; height: 100%; object-fit: contain; }
.av-medal .medal { color: var(--text); padding: 0; }
.av-medal .medal > span:not(.mono):not(.md-ring) { color: var(--muted); }
.av-medal .medal .mono { color: var(--hot); }
.av-medal .md-ring { animation: bob 6s ease-in-out infinite; }
.av-cap { position: absolute; left: 0; right: 0; bottom: 2%; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--muted); }
.av-cap i { width: 24px; height: 1px; background: var(--line); }
@media (max-width: 900px) {
  .awp { height: calc(100vh + var(--n) * 55vh); }
  .awp-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 74px; }
  .awp-vis { order: -1; width: min(78vw, 36vh); }
  .awp-h { font-size: 30px !important; margin: 8px 0 12px; }
  .awp .aw-row { grid-template-columns: 52px 1fr; padding: 8px 0; } .awp .aw-row .ic { display: none; }
  .awp .aw-row b { font-size: 17px; } .awp .aw-row.on .d { max-height: 34px; } .awp .aw-row .d { font-size: 12px; }
  .av-cap { display: none; }
}

/* ---------- gallery: varied widths ---------- */
.gl { height: calc(var(--ch, 300px) * 1.75); }
.gl-c { width: auto; aspect-ratio: var(--ar); height: var(--ch, 300px); }

/* ---------- VektorOS card: white, like the other two ---------- */
.stk-art.art-vk { background: radial-gradient(80% 70% at 50% 60%, #FFFFFF, #F1EEFF 60%, #E4DEFF) !important; }
.stk-art.art-vk .stk-url { color: #3B3F5C; }
.vk-card { display: grid; justify-items: center; gap: 16px; padding: clamp(26px, 3vw, 44px) clamp(28px, 3.6vw, 56px); border-radius: 26px; background: rgba(255,255,255,.8); border: 1px solid rgba(61,44,255,.14); box-shadow: 0 30px 60px -30px rgba(61,44,255,.4); transition: transform .6s var(--ease); }
.stk-art.art-vk:hover .vk-card { transform: translateY(-4px) scale(1.02); }
.vk-logo .pl-vk { font: 700 clamp(40px, 4.4vw, 68px)/1 var(--display); letter-spacing: -0.055em; color: #0B0D1C; }
.vk-logo .pl-vk b { background: linear-gradient(90deg, #3D2CFF, #FF4F8B); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.vk-sub { color: #5B6170; }
.vk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; }
.vk-row span { padding: 6px 11px; border-radius: 999px; background: #F1EEFF; color: #3D2CFF; font-size: 12.5px; font-weight: 600; }

/* ---------- reviews: summary + two columns drifting opposite ways ---------- */
.rvx { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.rvx-l .h2 { margin: 14px 0 18px; }
.rvx-l > p { color: #A2A4BA; margin: 0 0 28px; font-size: 17px; line-height: 1.55; max-width: 420px; }
.rvx-score { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.rvx-score > b { font: 700 clamp(56px, 5vw, 84px)/.9 var(--display); letter-spacing: -0.06em; background: var(--afterglow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rvx-score > div { display: grid; gap: 6px; } .rvx-score span { color: #A2A4BA; font-size: 14px; }
.rvx-score .rvx-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: #F6F5F9; font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; }
.rvx-score .rvx-cred b { font-weight: 600; }
.rvx-score .rvx-cred i { width: 4px; height: 4px; border-radius: 50%; background: #C6FF3D; flex: none; }
.rvx-score .rvx-sub { color: #A2A4BA; font-size: 13.5px; text-wrap: balance; }
@media (max-width: 560px) { .rvx-score .rvx-cred { flex-direction: column; align-items: flex-start; gap: 2px; } .rvx-score .rvx-cred i { display: none; } }
.rvx-faces { display: flex; align-items: center; margin-bottom: 30px; }
.rvx-faces .av { width: 42px; height: 42px; margin-left: -10px; box-shadow: 0 0 0 3px #0B0D1C; font-size: 12px; } .rvx-faces .av:first-child { margin-left: 0; }
.rvx-faces > span { margin-left: 12px; color: #A2A4BA; font: 500 13px var(--mono); }
.rev-sec .btn.pri { background: #F6F5F9; color: #0B0D1C; } .rev-sec .btn.ghost { color: #F6F5F9; } .rev-sec .btn.ghost .bi { border-color: rgba(255,255,255,.25); }
.rvx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: clamp(520px, 78vh, 760px); overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.rvx-run { display: grid; gap: 16px; animation: rvup 70s linear infinite; }
.rvx-col.down .rvx-run { animation-name: rvdown; animation-duration: 80s; }
.rvx-cols:hover .rvx-run { animation-play-state: paused; }
@keyframes rvup { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes rvdown { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }
.rcd { margin: 0; padding: 24px; border-radius: 22px; background: linear-gradient(160deg, #1B1F42, #12152D); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 14px; transition: border-color .3s, transform .45s var(--ease); }
.rcd:hover { border-color: rgba(198,255,61,.5); transform: translateY(-3px); }
.rcd blockquote { margin: 0; font-size: 15.5px; line-height: 1.58; color: #E9E8F2; }
.rcd figcaption { display: flex; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.rcd figcaption b { display: block; font-size: 14.5px; } .rcd figcaption span span { color: #A2A4BA; font-size: 12.5px; }
.rcd .av { width: 40px; height: 40px; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .rvx-run { animation: none; } .rvx-cols { overflow-y: auto; } }
@media (max-width: 900px) { .rvx { grid-template-columns: 1fr; } .rvx-cols { grid-template-columns: 1fr; height: 560px; } .rvx-col.down { display: none; } }

/* ---------- brands: two rows sliding in opposite directions ---------- */
.br-sec { padding: clamp(60px, 7vw, 100px) 0; }
.brands2 { display: grid; gap: 14px; overflow: hidden; }
.brands2 > .kick { justify-self: center; margin-bottom: 14px; }
.br-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.br-row .run { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); width: max-content; animation: brl 60s linear infinite; }
.br-row.r .run { animation-name: brr; }
.br-row:hover .run { animation-play-state: paused; }
.br-row span { font: 600 clamp(24px, 2.8vw, 44px)/1.15 var(--display); letter-spacing: -0.045em; color: var(--faint); white-space: nowrap; transition: color .3s; }
.br-row span:hover { color: var(--text); }
.br-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--afterglow); flex: 0 0 auto; opacity: .7; }
.br-row.r span { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
@keyframes brl { to { transform: translateX(-33.333%); } }
@keyframes brr { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
@media (max-height: 780px) and (min-width: 1101px) { .oh-chips { display: none; } .oh-r p { font-size: 15px; } }

/* ===================================================================== one spacing system
   --S  space between two sections (each section carries half on each side)
   --H  heading → content, and block → block inside a section
   --K  kicker / label → its content
   --G  gap between sibling cards                                                          */
:root { --S: clamp(96px, 10vw, 152px); --H: clamp(40px, 4.4vw, 64px); --K: 24px; --G: 16px; }
.sec { padding-top: calc(var(--S) / 2) !important; padding-bottom: calc(var(--S) / 2) !important; }
.ph, .abh, .rh { padding-bottom: calc(var(--S) / 2) !important; }
.ph { padding-top: clamp(140px, 15vw, 210px) !important; }
.abh, .rh { padding-top: clamp(130px, 15vh, 190px) !important; }
.stmt { padding: calc(var(--S) / 2) 0 !important; }
.br-sec { padding: calc(var(--S) / 2) 0 !important; }
.rev-sec { margin: calc(var(--S) / 2) 12px !important; padding-top: calc(var(--S) * .75) !important; padding-bottom: calc(var(--S) * .75) !important; }
.cta.sec { padding-bottom: var(--S) !important; }
.sh { margin-bottom: var(--H) !important; }
.blk { margin-top: var(--H); } .blk-s { margin-top: var(--G); }
.intro { max-width: 1300px; } .intro .fill { margin-top: var(--K); }
.sub-k { display: block; margin: var(--H) 0 var(--K); }
.ss-k { margin-bottom: var(--K); }
.lib-links { display: flex; gap: 22px; flex-wrap: wrap; margin-top: var(--K); }
.ic-p { color: var(--muted); line-height: 1.6; margin: 0 0 var(--K); }
.chips { margin-bottom: var(--H) !important; }
.rev-links { margin-top: var(--H) !important; }
.rh-stats { margin: 0 !important; }
.recog { margin: 0 !important; }
.proc-wrap .sub-k { margin-top: var(--H); }
.nums, .builds, .crs, .fit, .chooser, .ct, .ct-dets, .posts, .eps, .wall, .mms, .lib, .stack, .acc { margin-top: 0 !important; margin-bottom: 0 !important; }
.cards, .builds, .crs, .fit, .chooser, .ct-dets, .mms, .recog { gap: var(--G) !important; }
@media (max-width: 700px) { .rev-sec { margin: calc(var(--S) / 2) 6px !important; } }

/* reviews summary: no purple-to-pink */
.rvx-score > b { background: none !important; color: #F6F5F9 !important; -webkit-text-fill-color: #F6F5F9; }
.av { background: #2A2E52 !important; color: #E9E8F2 !important; }
:root[data-theme="light"] .av { background: #E6E4F0 !important; color: #3B3F5C !important; }
:root[data-theme] .rev-sec .av { background: #2A2E52 !important; color: #E9E8F2 !important; }

/* ---------- what I do: four steps of one system ---------- */
.jobs2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--G); counter-reset: j; position: relative; }
.job2 { position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.2vw, 32px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; transition-delay: calc(var(--i) * 60ms); }
.job2:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); }
.job2:not(:last-child)::after { content: ""; position: absolute; top: 52px; right: calc(var(--G) * -1); width: var(--G); height: 1px; background: var(--line); }
.j2-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.j2-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-3); color: var(--text); transition: background .35s, color .35s; }
.j2-ic .ic { width: 22px; height: 22px; }
.job2:hover .j2-ic { background: #C6FF3D; color: #0B0D1C; }
.job2 h3 { margin: 14px 0 0; font: 600 clamp(24px, 2vw, 32px)/1.05 var(--display); letter-spacing: -0.035em; }
.job2 p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; flex: 1; }
.j2-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.j2-tags span { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.j2-res { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.j2-res b { font: 600 clamp(32px, 2.8vw, 44px)/1 var(--display); letter-spacing: -0.045em; color: var(--text); }
.j2-res span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 1100px) { .jobs2 { grid-template-columns: 1fr 1fr; } .job2::after { display: none; } }
@media (max-width: 600px) { .jobs2 { grid-template-columns: 1fr; } }
.jobs2 { grid-auto-rows: auto; }
.job2 { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 14px; align-content: start; }
.job2 p { align-self: start; } .j2-tags { align-self: start; align-content: flex-start; } .j2-res { margin-top: 4px; }
@media (max-width: 600px) { .job2 { grid-row: auto; display: flex; } }

/* ===================================================================== v4 */
/* five disciplines: solid result number, no gradient */
.job-res b { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; }
.job-name { font-size: clamp(30px, 2.9vw, 52px) !important; }
.job::before { opacity: .16 !important; }

/* awards: stage panel (decluttered) */
.sc2 { display: grid; grid-template-columns: .9fr 1.1fr; min-height: clamp(380px, 34vw, 520px); }
.sc2 .sc-copy { gap: 22px; justify-content: center; }
.sc2 .sc-img img { transform: scale(1.12) translateY(var(--py, 0px)); transition: transform 1.6s var(--ease); }
.sc2.in .sc-img img { transform: scale(1.04) translateY(var(--py, 0px)); }
.sc-tiers { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; max-width: 360px; }
.sc-tiers li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); opacity: 0; transform: translateX(-12px); transition: opacity .6s, transform .8s var(--ease); }
.sc-tiers li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.sc2.in .sc-tiers li { opacity: 1; transform: none; } .sc2.in .sc-tiers li:nth-child(2) { transition-delay: .12s; } .sc2.in .sc-tiers li:nth-child(3) { transition-delay: .24s; }
.sc-tiers .mono { color: rgba(246,245,249,.55); }
.sc-tiers b { font: 700 clamp(20px, 1.7vw, 26px)/1 var(--display); letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(180deg, var(--m3), var(--m1) 50%, var(--m2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-diamond { --m1: #8CCBFF; --m2: #3B86F5; --m3: #E6F5FF; } .t-platinum { --m1: #E4E8EE; --m2: #9AA2AE; --m3: #FFFFFF; } .t-gold { --m1: #F1D894; --m2: #B48B3E; --m3: #FFF4D2; }
@media (max-width: 900px) { .sc2 { grid-template-columns: 1fr; } .sc2 .sc-img { aspect-ratio: 3 / 2; order: -1; } }

/* awards: every award on one timeline */
.atl { position: relative; }
.atl-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--G); }
.at-item { position: relative; display: flex; flex-direction: column; gap: 6px; color: var(--text); opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .9s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.atl.in .at-item { opacity: 1; transform: none; }
.at-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; isolation: isolate; perspective: 800px; margin-bottom: 10px; }
.at-art::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: repeating-conic-gradient(color-mix(in srgb, var(--violet) 11%, transparent) 0 25%, transparent 0 50%) 0 0 / 10px 10px; filter: blur(.6px); -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%); mask: radial-gradient(closest-side, #000 25%, transparent 100%); }
.at-plq .plq { width: 58%; transition: transform .8s var(--ease); transform: rotateY(-10deg) rotateX(3deg); }
.at-item:hover .at-plq .plq { transform: rotateY(6deg) rotateX(-2deg) translateY(-6px) scale(1.04); }
.at-logo .coin { width: 66%; aspect-ratio: 1; border-radius: 22px; background: #fff; display: grid; place-items: center; padding: 12%; box-shadow: 0 24px 44px -24px rgba(11,13,28,.45), 0 0 0 1px rgba(11,13,28,.06); transform: rotate(-3deg); transition: transform .8s var(--ease); }
.at-logo .coin img { width: 100%; height: 100%; object-fit: contain; }
.at-item:hover .at-logo .coin { transform: rotate(2deg) translateY(-6px) scale(1.04); }
.at-medal .md-ring { width: 62%; transition: transform .8s var(--ease); } .at-item:hover .at-medal .md-ring { transform: translateY(-6px) rotate(8deg); }
.at-dot { position: relative; height: 14px; margin: 4px 0 10px; }
.at-dot::before { content: ""; position: absolute; left: 0; right: calc(var(--G) * -1); top: 6px; height: 2px; background: var(--line); }
.at-item:last-child .at-dot::before { right: 0; }
.at-dot::after { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .4s, border-color .4s; transition-delay: calc(var(--i) * 140ms + .3s); }
.atl.in .at-dot::after { background: #C6FF3D; border-color: #C6FF3D; }
.at-dot i { display: none; }
.atl-line { display: none; }
.at-item .at-dot { background: linear-gradient(var(--text), var(--text)) 0 6px / 0 2px no-repeat; transition: background-size .5s linear; transition-delay: calc(var(--i) * 140ms); }
.atl.in .at-item .at-dot { background-size: calc(100% + var(--G)) 2px; }
.atl.in .at-item:last-child .at-dot { background-size: 100% 2px; }
.at-y { color: var(--hot); }
.at-item b { font: 600 clamp(17px, 1.3vw, 21px)/1.15 var(--display); letter-spacing: -0.03em; }
.at-d { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.at-item .tlink { margin-top: 6px; font-size: 13px; width: fit-content; }
@media (max-width: 1100px) { .atl-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .at-item { flex: 0 0 min(240px, 62vw); scroll-snap-align: start; } }

/* hero proof: a clean list, no boxes */
.hx-proof { list-style: none; margin: 0; padding: 0; display: grid !important; gap: 0 !important; }
.hx-proof li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.hx-proof li:last-child { border-bottom: 1px solid var(--line); }
.hx-proof b { display: block; font: 600 18px/1.15 var(--display); letter-spacing: -0.025em; }
.hx-proof li > span:last-child > span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.hp-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 7px; box-shadow: 0 8px 18px -10px rgba(11,13,28,.35), 0 0 0 1px rgba(11,13,28,.06); }
.hp-ic img { width: 100%; height: 100%; object-fit: contain; }
.js .hp-pop:not(.on) li { opacity: 0; }
.hp-pop.on li { animation: hpIn .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 160ms); }
.hp-pop.on .hp-ic { animation: hpPop 1.1s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 160ms + 120ms); }
@keyframes hpIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hpPop { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
.hp-pop.on li { transition: transform .35s var(--ease); will-change: transform; }
.hp-pop.on li:hover { transform: translateY(-4px) !important; }
.hp-pop.on li:hover .hp-ic { transform: scale(1.09) !important; box-shadow: 0 14px 26px -12px rgba(11,13,28,.45), 0 0 0 1px rgba(11,13,28,.12); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.hp-pop.on li:hover b { color: var(--hot); }
@media (prefers-reduced-motion: reduce) { .hp-pop.on li:hover, .hp-pop.on li:hover .hp-ic { transform: none !important; } }
.hp-ic.hp-plqs { width: 64px; border-radius: 0; background: none; box-shadow: none; padding: 0; display: flex; justify-content: center; }
.hp-plqs .plq { width: 26px; height: 35px; margin-left: -8px; filter: drop-shadow(0 4px 8px rgba(6,12,30,.35)); } .hp-plqs .plq:first-child { margin-left: 0; transform: rotate(-8deg); } .hp-plqs .plq:last-child { transform: rotate(8deg); }
.hp-plqs .plq svg rect:first-of-type { filter: none; }
@media (max-height: 700px) and (min-width: 901px) { .hx-proof li:nth-child(3) { display: none; } .hx-proof li:nth-child(2) { border-bottom: 1px solid var(--line); } .hx-proof li { padding: 10px 0; } }
.ss-stage { height: min(58vh, 540px) !important; }

/* ---------- hire me: three personal options ---------- */
.hires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--G); }
.hire { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 16px; padding: clamp(26px, 2.6vw, 38px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.hire:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--text) 22%, transparent); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); }
.hr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hr-n { font: 700 clamp(30px, 2.6vw, 40px)/1 var(--display); letter-spacing: -0.05em; }
.hr-tag { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, #C6FF3D 22%, transparent); color: var(--text); font-size: 10.5px; }
:root[data-theme="light"] .hr-tag { background: #EEFBCF; color: #3F5A00; }
.hire h3 { margin: 6px 0 0; font: 600 clamp(22px, 1.9vw, 30px)/1.1 var(--display); letter-spacing: -0.035em; }
.hire p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15.5px; }
.hr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line); align-self: end; }
.hr-foot > span { font-size: 13.5px; color: var(--muted); }
.hire .btn.ghost { height: 44px; font-size: 14px; } .hire .btn.ghost .bi { width: 34px; height: 34px; }
@media (max-width: 1000px) { .hires { grid-template-columns: 1fr; } .hire { grid-row: auto; display: flex; flex-direction: column; } }

/* ---------- lead magnet: cheat sheet ---------- */
.cs { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: 36px; overflow: hidden; background: #0E0F24; color: #F6F5F9; isolation: isolate; position: relative; }
.cs::before { content: ""; position: absolute; left: -10%; bottom: -30%; width: 60%; height: 90%; z-index: -1; border-radius: 50%; background: #3D2CFF; filter: blur(100px); opacity: .45; }
.cs-vis { position: relative; min-height: 440px; perspective: 1200px; }
.cs-doc { position: absolute; left: 50%; top: 50%; width: min(300px, 62%); aspect-ratio: 8.5 / 11; margin: 0; border-radius: 10px; background: #fff; box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); transform-origin: 50% 100%; transition: transform 1s var(--ease); }
.cs-doc.d3 { transform: translate(-50%, -50%) rotate(-10deg) translateX(-30px); background: #DCE6FF; }
.cs-doc.d2 { transform: translate(-50%, -50%) rotate(6deg) translateX(26px); background: #EEF3FF; }
.cs-doc.d1 { transform: translate(-50%, -50%) rotate(-2deg); display: flex; flex-direction: column; gap: 14px; padding: 9% 9%; color: #0B0D1C; background: linear-gradient(180deg, #fff, #F4F6FF); }
.cs:hover .cs-doc.d3 { transform: translate(-50%, -50%) rotate(-14deg) translateX(-56px); } .cs:hover .cs-doc.d2 { transform: translate(-50%, -50%) rotate(10deg) translateX(52px); } .cs:hover .cs-doc.d1 { transform: translate(-50%, -54%) rotate(0deg); }
.cs-doc.d1 .mono { color: #1F5BF0; font-size: 9.5px; }
.cs-doc.d1 b { font: 700 clamp(20px, 1.9vw, 28px)/1 var(--display); letter-spacing: -0.04em; } .cs-doc.d1 b .serif { color: #1F5BF0; font-weight: 400; font-size: 1.15em; }
.cs-lines { display: grid; gap: 8px; margin-top: 6px; } .cs-lines i { height: 7px; border-radius: 4px; background: #E3E8F5; } .cs-lines i:nth-child(2) { width: 82%; } .cs-lines i:nth-child(4) { width: 64%; } .cs-lines i:nth-child(5) { width: 90%; }
.cs-chips { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; } .cs-chips span { padding: 5px 10px; border-radius: 999px; background: #0E1A3A; color: #fff; font-size: 11px; font-weight: 600; }
.cs-copy { padding: clamp(32px, 4.4vw, 68px); display: grid; gap: 18px; align-content: center; }
.cs-copy .kick { color: rgba(246,245,249,.7); } .cs-copy .h2 { color: #F6F5F9; margin: 0; }
.cs-copy p { margin: 0; color: rgba(246,245,249,.75); line-height: 1.6; max-width: 520px; }
.cs-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cs-pts li { display: flex; gap: 10px; align-items: center; color: rgba(246,245,249,.9); font-size: 15px; } .cs-pts .ic { color: #C6FF3D; }
.cs-form { display: grid !important; grid-template-columns: 1fr 1.3fr auto; gap: 8px; margin-top: 8px; }
.cs-form input { height: 54px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: 500 15px var(--body); }
.cs-form input::placeholder { color: rgba(246,245,249,.5); } .cs-form input:focus { outline: none; border-color: #C6FF3D; }
.cs-form .btn.pri { background: #F6F5F9; color: #0B0D1C; } .cs-form .ok { grid-column: 1 / -1; color: #C6FF3D; }
.cs-form.sent input, .cs-form.sent .btn { display: none; }
@media (max-width: 1000px) { .cs { grid-template-columns: 1fr; } .cs-vis { min-height: 340px; } .cs-form { grid-template-columns: 1fr; } }

/* ---------- partner: Andrew Cass ---------- */
.pt { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.pt-img { margin: 0; position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5; }
.pt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .pt-img:hover img { transform: scale(1.04); }
.pt-img figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 12px; border-radius: 999px; background: rgba(11,13,28,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.pt-copy { display: grid; gap: 18px; } .pt-copy .h2 { margin: 0; } .pt-copy p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 17px; max-width: 600px; }
.pt-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.pt-list li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); } .pt-list li:last-child { border-bottom: 1px solid var(--line); }
.pt-list b { font: 600 18px/1.2 var(--display); letter-spacing: -0.02em; } .pt-list span { color: var(--muted); font-size: 14.5px; text-align: right; }
@media (max-width: 900px) { .pt { grid-template-columns: 1fr; } .pt-img { aspect-ratio: 4 / 3; } }

/* ===================================================================== v5 */
/* gradient words keep one gradient across the phrase, and appear with their words */
.gt-split { background: none !important; -webkit-text-fill-color: initial; color: inherit; }
.gtw { background: var(--gtext); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* five disciplines: the card sizes to its content, never clipped */
.ss-stage { display: grid !important; height: auto !important; align-items: center; }
.ss-item { position: relative !important; inset: auto !important; grid-area: 1 / 1; }
.job { position: relative !important; inset: auto !important; gap: 18px !important; }
.job-name { font-size: clamp(28px, 2.6vw, 46px) !important; }
.job-what { font-size: clamp(15px, 1.1vw, 18px) !important; }
.job-get { display: grid; gap: 10px; } .job-get .mono, .job-ex .mono { color: var(--muted); }
.job-get ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.job-get li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; } .job-get .ic { width: 18px; height: 18px; color: var(--hot); flex: 0 0 auto; }
.job-ex { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 6px; font: 500 clamp(16px, 1.2vw, 19px)/1.4 var(--display); letter-spacing: -0.015em; }
@media (max-height: 760px) and (min-width: 901px) { .job { padding: 24px 30px !important; gap: 12px !important; } .job-get li { font-size: 14.5px; } }

/* SaaSpreneur panel: quieter cells, criteria swap in on hover */
.sc-top { min-height: clamp(320px, 30vw, 440px) !important; }
.sc-cell { grid-template-columns: minmax(80px, 30%) 1fr !important; padding: clamp(22px, 2.4vw, 36px) !important; }
.sc-txt { gap: 8px !important; }
.sc-txt b { font-size: clamp(20px, 1.7vw, 28px) !important; }
.sc-line, .sc-hov { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(246,245,249,.7); transition: opacity .35s, transform .45s var(--ease); }
.sc-txt { position: relative; }
.sc-hov { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(8px); color: #C6FF3D; }
.sc-cell:hover .sc-line { opacity: 0; transform: translateY(-8px); } .sc-cell:hover .sc-hov { opacity: 1; transform: none; }
.sc-crit { display: none !important; }

/* every award: pinned inside a dark panel, same look as the SaaSpreneur panel */
.awp { height: calc(100vh + var(--n) * 42vh) !important; }
.awp-pin { align-items: center; }
.awp-pin > .wrap { width: 100%; }
.awp-panel { border-radius: 36px; background: #0E0F24; color: #F6F5F9; position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 3.6vw, 56px); --line: rgba(255,255,255,.1); --muted: rgba(246,245,249,.6); --faint: rgba(246,245,249,.22); --text: #F6F5F9; --hot: #FF8FB6; }
.awp-panel::before { content: ""; position: absolute; right: -10%; top: 10%; width: 55%; height: 90%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #8B5CF6, transparent); filter: blur(40px); opacity: .45; }
.awp-panel .awp-grid { padding-top: 0 !important; align-items: center; }
.awp-panel .kick { color: rgba(246,245,249,.7); margin-bottom: clamp(12px, 2vh, 22px); display: inline-flex; }
.awp-panel .awp-vis { width: min(100%, calc(100vh - 260px), 520px); }
.awp-panel .awp-bg::before { background: repeating-conic-gradient(rgba(168,145,255,.12) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.awp-panel .av-medal .medal { color: #F6F5F9; }
@media (max-width: 900px) { .awp-panel { padding: 22px; border-radius: 26px; } .awp-pin { padding-top: 70px; } .awp-panel .awp-vis { width: min(64vw, 30vh); } }

/* cheat sheet, rebuilt: a book, a few live script bubbles, a simple form */
.cs2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.cs2-vis { position: relative; min-height: clamp(380px, 36vw, 520px); display: grid; place-items: center; perspective: 1400px; }
.cs2-vis::before { content: ""; position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 30%, transparent), transparent); filter: blur(30px); z-index: -1; }
.bk { position: relative; width: min(300px, 62%); aspect-ratio: 8.5 / 11; transform: rotateY(-22deg) rotateX(6deg); transform-style: preserve-3d; transition: transform 1s var(--ease); }
.cs2:hover .bk { transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); }
.bk-pages { position: absolute; inset: 2% -14px 2% auto; width: 28px; transform: rotateY(90deg) translateZ(0); transform-origin: left; background: repeating-linear-gradient(90deg, #fff 0 2px, #E4E6EE 2px 3px); border-radius: 0 4px 4px 0; }
.bk-cover { position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; padding: 12% 11%; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(160deg, #1B1F48 0%, #0B0D1C 70%); color: #F6F5F9; box-shadow: inset 6px 0 0 #C6FF3D, inset 9px 0 0 rgba(0,0,0,.25), 0 40px 70px -30px rgba(11,13,28,.6); overflow: hidden; }
.bk-cover::after { content: ""; position: absolute; right: -30%; bottom: -30%; width: 90%; height: 70%; border-radius: 50%; background: #3D2CFF; filter: blur(50px); opacity: .6; }
.bk-cover .mono { color: #C6FF3D; font-size: 10px; position: relative; z-index: 1; }
.bk-cover b { position: relative; z-index: 1; font: 700 clamp(24px, 2.3vw, 34px)/1 var(--display); letter-spacing: -0.045em; }
.bk-cover b .serif { display: block; font-weight: 400; color: #C6FF3D; font-size: 1.12em; margin-top: 4px; }
.bk-meta { position: relative; z-index: 1; margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; } .bk-meta span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; font-weight: 600; }
.bk-by { position: relative; z-index: 1; font-size: 12px; color: rgba(246,245,249,.7); }
.bub { position: absolute; max-width: 250px; padding: 12px 16px; border-radius: 18px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 20px 40px -24px rgba(11,13,28,.45); animation: bob 7s ease-in-out infinite; background: var(--card); color: var(--text); border: 1px solid var(--line); }
.bub .mono { display: block; color: var(--hot); margin-bottom: 4px; font-size: 10px; }
.bub.b1 { left: 0; top: 14%; border-bottom-left-radius: 6px; }
.bub.b2 { right: 2%; top: 42%; background: #3D2CFF; color: #fff; border-color: transparent; border-bottom-right-radius: 6px; animation-delay: -2s; }
.bub.b3 { left: 6%; bottom: 10%; display: flex; gap: 12px; align-items: center; animation-delay: -4s; } .bub.b3 b { display: block; font-size: 13.5px; } .bub.b3 span span { color: var(--muted); font-size: 12px; }
.vw { display: flex; gap: 3px; align-items: center; height: 24px; } .vw i { width: 3px; border-radius: 2px; background: #C6FF3D; height: 40%; animation: vw 1.2s ease-in-out infinite; } .vw i:nth-child(2n) { animation-delay: -.3s; } .vw i:nth-child(3n) { animation-delay: -.6s; }
@keyframes vw { 50% { height: 100%; } }
.cs2-copy { display: grid; gap: 20px; } .cs2-copy .h2 { margin: 0; } .cs2-copy > p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 17px; max-width: 540px; }
.cs2-facts { display: flex; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cs2-facts span { flex: 1; padding: 16px 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); } .cs2-facts span + span { padding-left: 18px; border-left: 1px solid var(--line); }
.cs2-facts b { font: 600 clamp(22px, 2vw, 30px)/1 var(--display); letter-spacing: -0.04em; color: var(--text); }
.cs2-form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs2-form input { height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 500 15px var(--body); }
.cs2-form input:focus { outline: none; border-color: var(--text); }
.cs2-form .btn { grid-column: 1 / -1; justify-content: space-between; } .cs2-form .ok { grid-column: 1 / -1; color: var(--text); }
.cs2-form.sent input, .cs2-form.sent .btn { display: none; }
@media (max-width: 1000px) { .cs2 { grid-template-columns: 1fr; } .cs2-form { grid-template-columns: 1fr; } .bub.b2 { right: 0; } }

/* partner option B: two people, one partnership */
.duo-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--G); align-items: stretch; }
.duo-c { padding: clamp(24px, 2.6vw, 38px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 18px; align-content: start; transition: transform .5s var(--ease), box-shadow .5s; }
.duo-c:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); }
.duo-c.me { border-color: color-mix(in srgb, #C6FF3D 70%, transparent); }
.duo-top { display: flex; gap: 18px; align-items: center; }
.duo-ph { width: 88px; height: 88px; border-radius: 22px; overflow: hidden; flex: 0 0 auto; } .duo-ph img { width: 100%; height: 100%; object-fit: cover; }
.duo-c.me .duo-ph { box-shadow: 0 0 0 3px #C6FF3D; }
.duo-role { display: block; color: var(--hot); margin-bottom: 6px; } .duo-top b { font: 600 clamp(24px, 2vw, 32px)/1 var(--display); letter-spacing: -0.04em; }
.duo-c p { margin: 0; color: var(--muted); line-height: 1.6; } .duo-c ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; } .duo-c li { display: flex; gap: 10px; align-items: center; font-size: 15px; } .duo-c li .ic { color: var(--hot); width: 18px; height: 18px; }
.duo-x { align-self: center; font: 400 clamp(48px, 5vw, 84px)/1 var(--serif); font-style: italic; color: var(--hot); padding: 0 6px; }
.duo-ven { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--H); border-top: 1px solid var(--line); }
.duo-ven span { padding: 18px 18px 0 0; display: grid; gap: 4px; color: var(--muted); font-size: 13.5px; } .duo-ven span + span { padding-left: 18px; border-left: 1px solid var(--line); } .duo-ven b { color: var(--text); font: 600 17px/1.2 var(--display); }
@media (max-width: 900px) { .duo-row { grid-template-columns: 1fr; } .duo-x { justify-self: center; } .duo-ven { grid-template-columns: 1fr 1fr; } }

/* partner option C: one big photo band */
.ptc { position: relative; border-radius: 36px; overflow: hidden; min-height: clamp(460px, 44vw, 640px); display: grid; align-items: end; color: #F6F5F9; isolation: isolate; }
.ptc-img { position: absolute; inset: 0; z-index: -2; } .ptc-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.05); transition: transform 1.6s var(--ease); } .ptc:hover .ptc-img img { transform: scale(1); }
.ptc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,13,28,.95) 10%, rgba(11,13,28,.55) 50%, rgba(11,13,28,.15)), linear-gradient(90deg, rgba(11,13,28,.6), transparent 70%); }
.ptc-in { padding: clamp(28px, 4vw, 64px); display: grid; gap: 18px; } .ptc-in .kick { color: rgba(246,245,249,.75); }
.ptc-names { display: flex; align-items: baseline; gap: .2em; flex-wrap: wrap; font: 700 clamp(56px, 8vw, 140px)/.9 var(--display); letter-spacing: -0.06em; } .ptc-names .serif { font-weight: 400; color: #C6FF3D; font-size: .9em; }
.ptc-in p { margin: 0; max-width: 640px; color: rgba(246,245,249,.82); line-height: 1.6; font-size: 17px; }
.ptc-ven { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.18); margin-top: 8px; }
.ptc-ven span { padding: 16px 16px 0 0; display: grid; gap: 4px; font-size: 13px; color: rgba(246,245,249,.65); } .ptc-ven span + span { padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18); } .ptc-ven b { color: #fff; font: 600 16px/1.2 var(--display); }
@media (max-width: 900px) { .ptc-ven { grid-template-columns: 1fr 1fr; } .ptc-ven span:nth-child(3) { padding-left: 0; border-left: 0; } }
.bub.b1 { left: -2%; top: 0; } .bub.b2 { top: 46%; } .bub.b3 { bottom: 4%; }
.cs2-form input::placeholder { color: var(--muted); opacity: 1; }
.job-ex { color: var(--text); }

/* ---------- loader: matches the site theme, name and counter finish together ---------- */
#loader { background: var(--bg) !important; color: var(--text) !important; transition: transform 1s var(--ease-io), opacity .6s; }
#loader.out { transform: translateY(-100%); }
.ld-glow { inset: 10% 10% -20%; opacity: .35; filter: blur(110px); }
:root[data-theme="dark"] .ld-glow { opacity: .5; }
.ld-name .ch { filter: blur(10px); transition: opacity .6s, filter .7s, transform .8s var(--ease); }
.ld-name .stop { color: inherit; }
.ld-count { color: var(--text); opacity: .9; }
.ld-bar { background: var(--text); }
/* hero name: gradient lives on each letter, so nothing ghosts while letters rise in */
.hx-word { background: none !important; -webkit-text-fill-color: initial; }
.hx-word .ch { background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 12%, transparent) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent; -webkit-text-fill-color: transparent; }
.hx-word .ch .stop { -webkit-text-fill-color: var(--text); }
/* partner: text left, photo right, ventures row underneath */
.pt-r { grid-template-columns: 1.15fr .85fr; align-items: center; }
.pt-r .pt-copy p + p { margin-top: -4px; }
.pt-r .pt-img { aspect-ratio: 4 / 4.4; }
.pt-ven { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: calc(var(--H) - clamp(30px, 5vw, 80px)); }
.pt-ven span { padding: 22px 22px 0 0; display: grid; gap: 6px; color: var(--muted); font-size: 15px; }
.pt-ven span + span { padding-left: 22px; border-left: 1px solid var(--line); }
.pt-ven b { color: var(--text); font: 600 clamp(18px, 1.4vw, 22px)/1.2 var(--display); letter-spacing: -0.025em; }
@media (max-width: 900px) { .pt-r { grid-template-columns: 1fr; } .pt-r .pt-img { order: -1; aspect-ratio: 4 / 3; } .pt-ven { grid-template-columns: 1fr 1fr; margin-top: 0; } .pt-ven span:nth-child(3) { padding-left: 0; border-left: 0; } }

/* ---------- every award: back on the page background, new left side ---------- */
.awp2 { height: calc(100vh + var(--n) * 48vh) !important; }
.awp2 .awp-grid { padding-top: 64px; }
.awp2 .awp-l > .kick { margin-bottom: clamp(18px, 3vh, 34px); display: inline-flex; }
.awd-stack { display: grid; }
.awd { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .7s var(--ease); pointer-events: none; }
.awd.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
.awd-n { color: var(--hot); }
.awd h3 { margin: 0; font: 600 clamp(36px, min(4.4vw, 8vh), 76px)/.98 var(--display); letter-spacing: -0.05em; max-width: 12ch; }
.awd p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; display: grid; gap: 2px; max-width: 460px; }
.awd p span { font-size: .85em; opacity: .8; }
.awd .tlink { width: fit-content; }
.aw-rail { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: clamp(28px, 6vh, 64px); padding-top: 26px; }
.aw-track { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line); border-radius: 2px; }
.aw-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--text); border-radius: 2px; }
.awp2 .aw-row { all: unset; position: relative; display: grid; gap: 6px; cursor: pointer; padding-right: 10px; }
.awp2 .aw-row i { position: absolute; left: 0; top: -26px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); transition: background .35s, border-color .35s, transform .35s var(--ease); }
.awp2 .aw-row.past i { background: var(--text); border-color: var(--text); }
.awp2 .aw-row.on i { background: #C6FF3D; border-color: var(--text); transform: scale(1.35); }
.awp2 .aw-row .mono { color: var(--muted); font-size: 11px; }
.awp2 .aw-row b { font: 600 clamp(13px, 1vw, 16px)/1.2 var(--display); letter-spacing: -0.015em; color: var(--muted); transition: color .3s; }
.awp2 .aw-row.on b, .awp2 .aw-row:hover b { color: var(--text); }
.awp2 .aw-row:focus-visible b { text-decoration: underline; }
.awp2 .awp-vis { width: min(100%, calc(100vh - 150px), 560px); }
@media (max-width: 900px) {
  .awp2 .awp-grid { padding-top: 70px; gap: 6px; }
  .awp2 .awp-vis { width: min(60vw, 30vh); }
  .awd h3 { font-size: 30px; } .awd p { font-size: 15px; }
  .aw-rail { margin-top: 18px; } .awp2 .aw-row b { font-size: 11.5px; } .awp2 .aw-row .mono { font-size: 9.5px; }
}
.awp2 .aw-row, .awp2 .aw-row:first-of-type { border: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; background: none !important; }
.awp2 .aw-row::before, .awp2 .aw-row::after { display: none !important; }
.awp2 .aw-row b, .awp2 .aw-row.on b { transform: none !important; }
.awp2 .aw-prog { display: none; }

/* ===================================================================== v6 */
/* tighter, single rhythm across the site */
:root { --S: clamp(72px, 7vw, 112px); --H: clamp(32px, 3.2vw, 52px); }
.sh { margin-bottom: var(--H) !important; }
/* pinned sections size to their content: no blank screen above or below */
.ss-pin { height: auto !important; padding-top: calc(var(--S) / 2) !important; padding-bottom: calc(var(--S) / 2) !important; align-items: center; }
@media (max-width: 900px) { .ss-pin { padding-top: 84px !important; } }
/* primary button: white text on the gradient, everywhere */
.btn.pri:hover, .btn.pri:focus-visible, .rev-sec .btn.pri:hover, .cs-form .btn.pri:hover { color: #fff !important; }
.btn.pri:hover .bt { color: #fff; }
/* hero buttons on one aligned row */
.hx-side.l { width: min(560px, 38vw) !important; }
.hx .btns { flex-wrap: nowrap; align-items: center; gap: 22px; }
.hx .btn.ghost { padding-left: 0; }
.hx h1 { margin-top: 0 !important; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait), (max-height: 500px) { .hx .btns { flex-wrap: wrap; } }
/* stats: draw in, count up, react on hover */
.nums > div { position: relative; transition: opacity .8s, transform .9s var(--ease), background .35s; transition-delay: calc(var(--i, 0) * 90ms); border-top-color: transparent !important; }
.nums > div::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.nums > div.in::before { transform: scaleX(1); }
.nums > div::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--hot); transition: width .5s var(--ease); }
.nums > div + div::after { left: 24px; }
.nums > div:hover::after { width: 48px; }
.nums b { transition: transform .5s var(--ease); display: inline-block; }
.nums > div:hover b { transform: translateY(-4px); }
/* partner: ventures sit under the paragraphs */
.pt-copy .pt-ven { grid-column: auto; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.pt-copy .pt-ven span { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.pt-copy .pt-ven span + span { padding-left: 0; border-left: 0; }
.pt-copy .pt-ven span:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line); }
.pt-copy .pt-ven b { font-size: clamp(17px, 1.3vw, 20px); }
.pt-r { align-items: center; }
@media (max-width: 900px) { .pt-copy .pt-ven span:nth-child(3) { padding-left: 0; border-left: 0; } }
/* every award, in the five-disciplines layout */
.aw-ss .ss-list a { font-size: clamp(32px, min(4.2vw, 7vh), 74px); }
.aw-ss .ss-list a .mono { transform: translateY(-2em); }
.awj { gap: 14px !important; }
.awj-art { height: clamp(180px, 30vh, 280px); display: grid; place-items: center; position: relative; isolation: isolate; border-radius: 22px; }
.awj-art::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: repeating-conic-gradient(color-mix(in srgb, var(--violet) 10%, transparent) 0 25%, transparent 0 50%) 0 0 / 10px 10px; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.awj-art .av-art { height: 100%; aspect-ratio: 1; }
.awj-art .av-plq .plq { width: auto; height: 90%; aspect-ratio: 3 / 4; }
.awj-art .av-logo .coin { width: 70%; }
.awj-art .md-ring { width: 64%; }
.awj .job-what span { color: var(--muted); opacity: .8; }
.awj .tlink { width: fit-content; }
.ss-item.on .awj-art .plq { animation: bob 6s ease-in-out infinite; }
.nums b span { font: inherit !important; color: inherit !important; letter-spacing: inherit; line-height: inherit; }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait), (max-height: 500px) { .hx-side.l { width: auto !important; } }
@media (max-width: 900px) { .aw-ss .ss-list a { font-size: 24px; } .awj-art { height: 150px; } .awj .job-name { font-size: 24px !important; } .awj .job-what { font-size: 14px !important; } }
.awj-art .av-logo .coin { width: auto !important; height: 78%; aspect-ratio: 1; } .awj-art .md-ring { width: auto !important; height: 80%; }
.awj-art { --ah: clamp(180px, 30vh, 280px); height: var(--ah) !important; }
.awj-art .av-logo .coin { width: calc(var(--ah) * .74) !important; height: auto !important; }
.awj-art .md-ring { width: calc(var(--ah) * .74) !important; height: auto !important; }
.awj-art .av-plq .plq { height: calc(var(--ah) * .9) !important; width: auto !important; }
@media (max-width: 900px) { .awj-art { --ah: 150px; } }

/* ===================================================================== v7 */
/* secondary button: one clean outline pill, same height as the primary */
.btn.ghost { height: 54px !important; padding: 0 6px 0 22px !important; border: 1px solid color-mix(in srgb, var(--text) 20%, transparent); background: transparent; overflow: hidden; }
.btn.ghost .bt { background: none !important; padding-bottom: 0 !important; }
.btn.ghost .bi { width: 42px !important; height: 42px !important; border: 0 !important; background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn.ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.ghost:hover .bi { background: #C6FF3D; color: #0B0D1C; transform: rotate(-45deg); }
.btn.ghost .bi .ic { transition: transform .4s var(--ease); }
.hx .btns { gap: 12px !important; }
.hire .btn.ghost, .md .btn.ghost { height: 46px !important; padding-left: 18px !important; } .hire .btn.ghost .bi, .md .btn.ghost .bi { width: 36px !important; height: 36px !important; }
.rev-sec .btn.ghost { border-color: rgba(255,255,255,.25); } .rev-sec .btn.ghost .bi { background: rgba(255,255,255,.1); }

/* every award: no window, narrower, quicker */
.aw-ss .ss-pin { grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 4vw, 70px); }
.aw-ss .ss-list a { font-size: clamp(28px, min(3.4vw, 6vh), 58px) !important; }
.aw-ss .job { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.aw-ss .job::before { display: none !important; }
.aw-ss .job-top { border-bottom: 0; padding-bottom: 0; }
.aw-ss .awj-art { --ah: clamp(200px, 34vh, 320px); }
.aw-ss .awj-art::before { -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); }
.aw-ss .job-name { font-size: clamp(24px, 2.2vw, 38px) !important; }

/* stat rows: one horizontal row, animated in */
.pt-copy .pt-ven { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; border-top: 1px solid var(--line); }
.pt-copy .pt-ven span { padding: 16px 12px 0 0 !important; border: 0 !important; font-size: 12.5px; }
.pt-copy .pt-ven span + span { padding-left: 14px !important; border-left: 1px solid var(--line) !important; }
.pt-copy .pt-ven b { font-size: clamp(14px, 1.05vw, 16px) !important; }
.sx { position: relative; opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.sx-in > .sx { opacity: 1; transform: none; }
.rh-stats, .pt-ven, .cs2-facts, .cred2, .proc2 { position: relative; border-top-color: transparent !important; }
.rh-stats::before, .pt-ven::before, .cs2-facts::before, .cred2::before, .proc2::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.sx-in::before { transform: scaleX(1) !important; }
.sx::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--hot); transition: width .5s var(--ease); }
.sx + .sx::after { left: 18px; } .sx:hover::after { width: 40px; }
.sx b { display: inline-block; transition: transform .5s var(--ease); } .sx:hover b { transform: translateY(-3px); }
.nums > .sx { transition-delay: calc(var(--i, 0) * 90ms); }
.sx b span { font: inherit !important; color: inherit !important; }
@media (max-width: 900px) { .pt-copy .pt-ven { grid-template-columns: 1fr 1fr !important; } .pt-copy .pt-ven span:nth-child(3) { padding-left: 0 !important; border-left: 0 !important; } }

/* Script Vault: compact form */
.cs2-form { grid-template-columns: 1fr 1fr auto !important; }
.cs2-form .btn { grid-column: auto !important; justify-content: flex-start !important; height: 54px; padding-left: 20px; }
.cs2-form .btn .bt { font-size: 14.5px; }
@media (max-width: 1200px) { .cs2-form { grid-template-columns: 1fr 1fr !important; } .cs2-form .btn { grid-column: 1 / -1 !important; justify-self: start; } }

/* capability index */
.caps { display: grid; border-top: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: 56px minmax(200px, .9fr) 1.4fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); transition: background .3s, padding .4s var(--ease); }
.cap:hover { padding-left: 14px; padding-right: 14px; background: color-mix(in srgb, var(--text) 3%, transparent); }
.cap-n { color: var(--hot); } .cap b { font: 600 clamp(20px, 1.7vw, 26px)/1.15 var(--display); letter-spacing: -0.03em; } .cap p { margin: 0; color: var(--muted); line-height: 1.55; }
.cap-t { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .cap-t i { font-style: normal; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 1000px) { .cap { grid-template-columns: 40px 1fr; } .cap p, .cap-t { grid-column: 2; justify-content: flex-start; } }
.cix { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.cix-l { position: sticky; top: 110px; display: grid; gap: 18px; } .cix-l h3 { margin: 0; font: 600 clamp(28px, 2.6vw, 44px)/1.05 var(--display); letter-spacing: -0.04em; } .cix-l p { margin: 0; color: var(--muted); line-height: 1.6; }
.cix-cred { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cix-cred li { display: flex; gap: 10px; align-items: flex-start; } .cix-cred .ic { color: var(--hot); width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; } .cix-cred b { display: block; } .cix-cred span span { font-size: 13px; color: var(--muted); }
.cix-cred li > span { display: grid; font-size: 13px; color: var(--muted); } .cix-cred li > span b { color: var(--text); font-size: 15px; }
@media (max-width: 1000px) { .cix { grid-template-columns: 1fr; } .cix-l { position: static; } }

/* bento */
.bento { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: var(--G); }
.bxt { position: relative; overflow: hidden; border-radius: 28px; background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 12px; transition: transform .5s var(--ease), box-shadow .5s; }
.bxt:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); }
.bxt > .mono { color: var(--muted); } .bxt b { font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--display); letter-spacing: -0.025em; margin-top: auto; }
.bt-big { grid-column: 1 / 3; grid-row: 1 / 3; background: #0E0F24; color: #F6F5F9; border-color: transparent; gap: 18px; --muted: rgba(246,245,249,.65); --line: rgba(255,255,255,.12); }
.bt-big::before { content: ""; position: absolute; right: -20%; bottom: -30%; width: 70%; height: 80%; border-radius: 50%; background: #3D2CFF; filter: blur(90px); opacity: .5; z-index: 0; } .bt-big > * { position: relative; z-index: 1; }
.bt-big h3 { margin: 0; font: 600 clamp(30px, 3vw, 50px)/1 var(--display); letter-spacing: -0.045em; } .bt-big p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 520px; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bt-chips span { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 13px; }
.bt-code { margin: 4px 0 0; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font: 500 13px/1.6 var(--mono); color: #E9E8F2; white-space: pre; overflow: hidden; }
.bt-code i { color: rgba(246,245,249,.45); font-style: normal; } .bt-code b { font: inherit; color: #C6FF3D; margin: 0; } .bt-code s { text-decoration: none; color: #FF8FB6; }
.bt-big .btns { margin-top: auto; } .bt-big .btn.pri { background: #F6F5F9; color: #0B0D1C; }
.bt-chat { display: grid; gap: 6px; } .bt-chat span { padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; max-width: 90%; } .bt-chat .q { justify-self: end; background: #3D2CFF; color: #fff; border-bottom-right-radius: 4px; } .bt-chat .a { background: var(--bg-3); border-bottom-left-radius: 4px; }
.bt-flow { width: 100%; height: auto; } .bt-flow rect { fill: none; stroke: var(--line); stroke-width: 1.5; } .bt-flow path { fill: none; stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 4; animation: dash 1.6s linear infinite; } .bt-flow circle { fill: var(--hot); }
@keyframes dash { to { stroke-dashoffset: -16; } }
.bt-cert { background: linear-gradient(160deg, #F6FFE0, #E8F7C2); color: #0B0D1C; border-color: transparent; --muted: #4A5A1A; } .bt-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #0B0D1C; color: #C6FF3D; } .bt-badge .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.bt-cert .tlink { color: #0B0D1C; width: fit-content; }
.bt-up .bt-big-n { font: 700 clamp(40px, 3.4vw, 56px)/1 var(--display); letter-spacing: -0.05em; margin-top: 0; } .bt-up > span:not(.mono) { color: var(--muted); font-size: 14px; line-height: 1.5; } .bt-up .tlink { width: fit-content; margin-top: auto; }
@media (max-width: 1100px) { .bento { grid-template-columns: 1fr 1fr; } .bt-big { grid-row: auto; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bt-big { grid-column: auto; } }

/* ways to work */
.mds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--G); }
.md { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 34px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s, border-color .3s; }
.md:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.md-n { color: var(--hot); } .md h3 { margin: 0; font: 700 clamp(36px, 3.2vw, 54px)/1 var(--display); letter-spacing: -0.05em; } .md-l { font-weight: 600; } .md p { margin: 0; color: var(--muted); line-height: 1.6; }
.md-best { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 14.5px; } .md-best .mono { color: var(--muted); }
.md .btn { align-self: flex-start; }
.cred2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--H); }
.cred2 span { padding: 18px 16px 0 0; display: grid; gap: 4px; font-size: 13px; color: var(--muted); } .cred2 span + span { padding-left: 18px; border-left: 1px solid var(--line); } .cred2 b { color: var(--text); font: 600 17px/1.2 var(--display); }
.md-up { margin: var(--K) 0 0; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1000px) { .mds { grid-template-columns: 1fr; } .cred2 { grid-template-columns: 1fr 1fr; } .cred2 span:nth-child(3) { padding-left: 0; border-left: 0; } }

/* process, horizontal */
.proc2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr2 { padding: 22px 22px 0 0; display: grid; gap: 8px; align-content: start; } .pr2 + .pr2 { padding-left: 22px; border-left: 1px solid var(--line); }
.pr2-n { color: var(--hot); } .pr2 b { font: 600 clamp(20px, 1.6vw, 26px)/1.15 var(--display); letter-spacing: -0.03em; } .pr2 p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
@media (max-width: 900px) { .proc2 { grid-template-columns: 1fr 1fr; } .pr2:nth-child(3) { padding-left: 0; border-left: 0; } }

/* ventures links (work page) */
.vlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--G); }
.vlink { position: relative; display: grid; gap: 6px; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); transition: transform .45s var(--ease), border-color .3s; }
.vlink:hover { transform: translateY(-4px); border-color: var(--text); } .vlink .mono { color: var(--hot); } .vlink b { font: 600 20px/1.2 var(--display); letter-spacing: -0.025em; } .vlink > span:not(.mono) { color: var(--muted); font-size: 14.5px; }
.vlink > .ic { position: absolute; right: 22px; top: 22px; color: var(--muted); }
@media (max-width: 900px) { .vlinks { grid-template-columns: 1fr; } }
.ph-row .btns { flex-wrap: nowrap; }

.sx b .cnt { display: inline !important; padding: 0 !important; border: 0 !important; margin: 0 !important; font: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
.cix .cap { grid-template-columns: 44px 1fr; gap: 6px 14px; padding: 18px 0; } .cix .cap p, .cix .cap-t { grid-column: 2; justify-content: flex-start; }
.bt-cert b { font-size: clamp(15px, 1.2vw, 18px) !important; }
.aw-ss .job { border-radius: 0 !important; overflow: visible !important; } .aw-ss .ss-pin { overflow: visible; } .aw-ss .ss-stage { overflow: visible; }

/* ===================================================================== v8 */
/* hero buttons: stacked, same size */
.hx .btns { flex-direction: column !important; align-items: stretch !important; width: 260px; gap: 10px !important; flex-wrap: nowrap !important; }
.hx .btns .btn { width: 100%; justify-content: space-between; height: 54px !important; padding: 0 6px 0 22px !important; }
@media (max-height: 760px) and (min-width: 901px) { .hx .btns .btn { height: 48px !important; } .hx .btns .btn .bi { width: 38px !important; height: 38px !important; } }

/* award art: never larger than its frame */
.awj-art .av-art { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; display: grid; place-items: center; }
.awj-art .av-plq { width: 100% !important; }
.awj-art .av-plq .plq { height: 86% !important; width: auto !important; aspect-ratio: 3 / 4; }
.awv-head { margin-bottom: var(--H); } .awv-head .h2 { margin: 14px 0 0; }

/* tier palettes used by variants 3–5 */
.t-dia { --tc1: #0E2A63; --tc2: #2C6FE8; --tfg: #EAF4FF; --tac: #8CCBFF; }
.t-pla { --tc1: #23262F; --tc2: #6E7684; --tfg: #F4F6FA; --tac: #E4E8EE; }
.t-gol { --tc1: #2A1E08; --tc2: #9C7425; --tfg: #FFF6DE; --tac: #F1D894; }
.t-lcc { --tc1: #0F2A22; --tc2: #2E7D5B; --tfg: #ECFFF6; --tac: #F1D894; }
.t-wht { --tc1: #FFFFFF; --tc2: #EDEBFF; --tfg: #0B0D1C; --tac: #3D2CFF; }

/* V2 trophy shelf */
.shf-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--G); align-items: end; position: relative; z-index: 1; }
.shf-it { all: unset; cursor: pointer; position: relative; display: grid; justify-items: center; gap: 10px; padding-top: 30px; }
.shf-art { width: 100%; aspect-ratio: 3 / 3.4; display: grid; place-items: end center; transition: transform .6s var(--ease); -webkit-box-reflect: below 6px linear-gradient(transparent 70%, rgba(255,255,255,.22)); }
.shf-art .av-art { width: 78%; height: 100%; display: grid; place-items: end center; }
.shf-art .plq { width: 100%; } .shf-art .coin { width: 100%; aspect-ratio: 1; border-radius: 22px; background: #fff; display: grid; place-items: center; padding: 14%; box-shadow: 0 20px 40px -24px rgba(11,13,28,.5); } .shf-art .coin img { width: 100%; }
.shf-art .md-ring { width: 100%; }
.shf-it.on .shf-art { transform: translateY(-18px) scale(1.06); }
.shf-spot { position: absolute; left: 10%; right: 10%; top: -40px; bottom: 30%; background: radial-gradient(60% 100% at 50% 0%, rgba(198,255,61,.0), transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity .5s; background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 30%, transparent), transparent); filter: blur(6px); }
.shf-it.on .shf-spot { opacity: 1; }
.shf-y { color: var(--muted); transition: color .3s; } .shf-it.on .shf-y { color: var(--hot); }
.shf-board { height: 16px; margin-top: -40px; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 14%, transparent), color-mix(in srgb, var(--text) 4%, transparent)); box-shadow: 0 30px 40px -20px rgba(11,13,28,.35); }
.shf-dets { display: grid; margin-top: var(--H); max-width: 760px; }
.shf-d { grid-area: 1 / 1; display: grid; gap: 8px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none; } .shf-d.on { opacity: 1; transform: none; pointer-events: auto; }
.shf-d .mono { color: var(--hot); } .shf-d b { font: 600 clamp(28px, 2.8vw, 46px)/1 var(--display); letter-spacing: -0.045em; } .shf-d p { margin: 0; color: var(--muted); }
@media (max-width: 900px) { .shf-row { grid-template-columns: repeat(3, 1fr); } .shf-board { display: none; } }

/* V3 horizontal reel */
.rl { position: relative; }
.rl-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.rl-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .rl-top .awv-head { margin: 0; }
.rl-prog { width: min(320px, 30vw); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .rl-prog i { display: block; height: 100%; width: 0; background: var(--text); }
.rl-track { display: flex; gap: var(--G); padding: 0 var(--pad); width: max-content; will-change: transform; }
.rl-p { position: relative; width: min(70vw, 980px); height: min(56vh, 520px); border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(28px, 3vw, 48px); background: linear-gradient(140deg, var(--tc1), var(--tc2)); color: var(--tfg); isolation: isolate; }
.rl-y { position: absolute; left: 3%; bottom: -6%; z-index: -1; font: 800 clamp(120px, 16vw, 260px)/.8 var(--display); letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--tfg) 22%, transparent); transform: translateX(calc(var(--c, 0) * -60px)); }
.rl-art { height: 82%; display: grid; place-items: center; transform: translateX(calc(var(--c, 0) * 40px)) rotate(calc(var(--c, 0) * -6deg)); }
.rl-art .av-art { height: 100%; display: grid; place-items: center; } .rl-art .plq { height: 92%; width: auto; aspect-ratio: 3 / 4; } .rl-art .coin { width: min(260px, 80%); aspect-ratio: 1; border-radius: 28px; background: #fff; display: grid; place-items: center; padding: 14%; box-shadow: 0 30px 60px -30px rgba(11,13,28,.5); } .rl-art .coin img { width: 100%; } .rl-art .md-ring { width: min(240px, 70%); }
.rl-txt { display: grid; gap: 10px; } .rl-txt .mono { opacity: .7; } .rl-txt b { font: 700 clamp(30px, 3vw, 52px)/1 var(--display); letter-spacing: -0.045em; } .rl-txt p { margin: 0; opacity: .8; line-height: 1.5; } .rl-x { font-size: 14px; opacity: .6; } .rl-txt .tlink { color: inherit; width: fit-content; }
.t-wht .rl-y { -webkit-text-stroke-color: rgba(61,44,255,.18); }
@media (max-width: 900px) { .rl-p { width: 84vw; grid-template-columns: 1fr; height: 70vh; } .rl-art { height: 48%; } }

/* V4 stacked deck */
.dk-wrap { position: relative; }
.dk { position: sticky; top: calc(96px + var(--i) * 14px); margin-bottom: 28px; height: min(64vh, 520px); transform: scale(var(--sc, 1)); transform-origin: 50% 0; }
.dk-in { position: relative; height: 100%; border-radius: 34px; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: clamp(28px, 4vw, 64px); background: radial-gradient(90% 120% at 100% 100%, var(--tc2), var(--tc1) 70%); color: var(--tfg); box-shadow: 0 -20px 50px -30px rgba(11,13,28,.4); isolation: isolate; }
.dk-in::after { content: ""; position: absolute; inset: 0; background: #0B0D1C; opacity: var(--dim, 0); pointer-events: none; transition: opacity .2s; }
.t-wht .dk-in { border: 1px solid var(--line); }
.dk-txt { display: grid; gap: 12px; } .dk-txt .mono { opacity: .7; }
.dk-y { font: 800 clamp(80px, 10vw, 170px)/.8 var(--display); letter-spacing: -0.07em; color: var(--tac); }
.dk-txt b { font: 700 clamp(28px, 2.8vw, 48px)/1 var(--display); letter-spacing: -0.045em; } .dk-txt p { margin: 0; opacity: .78; max-width: 460px; line-height: 1.5; } .dk-txt .tlink { color: inherit; width: fit-content; }
.dk-art { height: 86%; display: grid; place-items: center; } .dk-art .av-art { height: 100%; display: grid; place-items: center; } .dk-art .plq { height: 92%; width: auto; aspect-ratio: 3 / 4; } .dk-art .coin { width: min(280px, 80%); aspect-ratio: 1; border-radius: 30px; background: #fff; display: grid; place-items: center; padding: 14%; box-shadow: 0 30px 60px -30px rgba(11,13,28,.5); transform: rotate(-4deg); } .dk-art .coin img { width: 100%; } .dk-art .md-ring { width: min(240px, 70%); }
@media (max-width: 900px) { .dk-in { grid-template-columns: 1fr; } .dk-art { height: 40%; order: -1; } .dk { height: 78vh; } }

/* V5 coverflow */
.cf { overflow: hidden; }
.cf-stage { position: relative; height: clamp(300px, 40vw, 460px); perspective: 1400px; margin-top: 10px; }
.cf-c { all: unset; cursor: pointer; position: absolute; left: 50%; top: 0; width: clamp(220px, 24vw, 340px); height: 100%; margin-left: calc(clamp(220px, 24vw, 340px) / -2); border-radius: 30px; background: linear-gradient(160deg, var(--tc1), var(--tc2)); display: grid; place-items: center; transition: transform .8s var(--ease), opacity .6s, filter .6s; box-shadow: 0 40px 80px -40px rgba(11,13,28,.6); transform-style: preserve-3d; }
.t-wht.cf-c { background: linear-gradient(160deg, #fff, #EEECFF); border: 1px solid var(--line); }
.cf-art { width: 74%; height: 70%; display: grid; place-items: center; } .cf-art .av-art { width: 100%; height: 100%; display: grid; place-items: center; } .cf-art .plq { height: 100%; width: auto; aspect-ratio: 3 / 4; } .cf-art .coin { width: 90%; aspect-ratio: 1; border-radius: 26px; background: #fff; display: grid; place-items: center; padding: 14%; } .cf-art .coin img { width: 100%; } .cf-art .md-ring { width: 80%; }
.cf-y { position: absolute; left: 22px; top: 20px; color: var(--tfg); opacity: .7; }
.cf-under { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-top: 34px; text-align: center; }
.cf-dets { display: grid; } .cf-d { grid-area: 1 / 1; display: grid; gap: 8px; justify-items: center; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none; } .cf-d.on { opacity: 1; transform: none; pointer-events: auto; }
.cf-d b { font: 600 clamp(26px, 2.6vw, 42px)/1 var(--display); letter-spacing: -0.045em; } .cf-d p { margin: 0; color: var(--muted); }
.cf-arr { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s; } .cf-arr:hover { background: var(--text); color: var(--bg); }
.cf-dots { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.cf-dot { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; transition: background .3s, color .3s; } .cf-dot .mono { font-size: 10px; } .cf-dot.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- bento, sexier ---------- */
.bxt { --mx: 50%; --my: 50%; }
.bx-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx) var(--my), color-mix(in srgb, var(--violet) 18%, transparent), transparent 70%); }
.bxt:hover .bx-glow { opacity: 1; }
.bxt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(200px circle at var(--mx) var(--my), color-mix(in srgb, var(--hot) 70%, transparent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none; }
.bxt:hover::after { opacity: 1; }
.bxt > *:not(.bx-glow) { position: relative; z-index: 1; }
.bt-big { background: radial-gradient(120% 90% at 100% 100%, #2A1F7A 0%, #12143A 45%, #0B0D1C 80%) !important; }
.bt-big::before { opacity: .35 !important; }
.bt-big h3 .serif { color: #C6FF3D; font-weight: 400; }
.bt-big .bt-chips span { background: rgba(255,255,255,.05); transition: background .3s, border-color .3s; } .bt-big .bt-chips span:hover { background: #C6FF3D; color: #0B0D1C; border-color: #C6FF3D; }
.bt-code { padding: 0 !important; overflow: hidden; } .bc-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); } .bc-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); } .bc-bar i:first-child { background: #FF5F57; } .bc-bar i:nth-child(2) { background: #FEBC2E; } .bc-bar i:nth-child(3) { background: #28C840; } .bc-bar em { margin-left: 8px; font-style: normal; font-size: 11px; color: rgba(246,245,249,.5); }
.bt-code code { display: block; padding: 14px 18px 16px; font: inherit; white-space: pre; }
.bc-cur { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: #C6FF3D; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
.bt-chat span { opacity: 0; transform: translateY(8px); }
.bt-chat.play .q { animation: pop .5s .2s var(--ease) forwards; } .bt-chat.play .typing { animation: pop .3s 1s forwards, popout .2s 2.2s forwards; } .bt-chat.play .a { animation: pop .5s 2.3s var(--ease) forwards; }
@keyframes pop { to { opacity: 1; transform: none; } } @keyframes popout { to { opacity: 0; height: 0; padding: 0; margin: -6px 0 0; } }
.bt-chat .typing { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--bg-3); width: fit-content; } .bt-chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bob 1s ease-in-out infinite; } .bt-chat .typing i:nth-child(2) { animation-delay: .15s; } .bt-chat .typing i:nth-child(3) { animation-delay: .3s; }
.bt-flow .nodes rect { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; } .bt-flow .lbl text { font: 600 8.5px var(--body); fill: var(--text); text-anchor: middle; } .bt-flow .wire { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; animation: dash 1.2s linear infinite; } .bt-flow .pulse { fill: #3D2CFF; } .bt-flow .p2 { fill: var(--hot); }
.bt-cert { background: radial-gradient(120% 100% at 0% 0%, #F7FFE4, #E3F6B8) !important; }
.bt-up .bt-big-n { background: linear-gradient(180deg, var(--text), color-mix(in srgb, var(--text) 55%, transparent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento .bxt { transition-delay: calc(var(--d, 0) * 80ms); }

/* ---------- capability index, sexier ---------- */
.cix-l { gap: 20px !important; } .cix-l h3 { font-size: clamp(34px, 3.4vw, 60px) !important; line-height: .98 !important; }
.cix-cred { gap: 0 !important; border-top: 1px solid var(--line); } .cix-cred li { padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center !important; }
.cc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #C6FF3D; color: #0B0D1C; flex: 0 0 auto; } .cc-ic .ic { width: 15px !important; height: 15px !important; margin: 0 !important; color: #0B0D1C !important; stroke-width: 2.4; }
.caps { border-top: 0 !important; display: grid; gap: 10px; counter-reset: c; }
.cap { position: relative; display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 22px !important; align-items: center !important; padding: 22px 26px !important; border: 1px solid var(--line) !important; border-radius: 24px; background: var(--card); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .35s, box-shadow .5s !important; }
.cap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 60%); opacity: 0; transition: opacity .5s; }
.cap-n { font: 800 clamp(40px, 3.6vw, 64px)/.85 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 30%, transparent); transition: color .45s, -webkit-text-stroke-color .45s; min-width: 1.6em; }
.cap-b { display: grid; gap: 6px; } .cap-b b { font: 600 clamp(20px, 1.7vw, 26px)/1.15 var(--display); letter-spacing: -0.03em; } .cap-b p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.cap-t { justify-content: flex-start !important; margin-top: 4px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.cap-ar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); transition: background .35s, color .35s, transform .45s var(--ease), border-color .35s; }
.cap.on, .cap:hover { transform: translateX(6px); border-color: color-mix(in srgb, var(--text) 24%, transparent); box-shadow: 0 24px 50px -34px rgba(11,13,28,.45); padding: 22px 26px !important; background: var(--card) !important; }
.cap.on::before, .cap:hover::before { opacity: 1; }
.cap.on .cap-n, .cap:hover .cap-n { color: var(--hot); -webkit-text-stroke-color: transparent; }
.cap.on .cap-t, .cap:hover .cap-t { max-height: 40px; opacity: 1; }
.cap.on .cap-ar, .cap:hover .cap-ar { background: #C6FF3D; color: #0B0D1C; border-color: #C6FF3D; transform: rotate(45deg); }
.cix .cap { grid-template-columns: auto 1fr auto !important; }
@media (max-width: 700px) { .cap { grid-template-columns: auto 1fr !important; } .cap-ar { display: none; } .cap-t { max-height: none; opacity: 1; } }
.cap-b > * { grid-column: auto !important; } .cap-b .cap-t { justify-content: flex-start !important; }
.awj-art .coin { padding: 12% !important; display: grid !important; place-items: center; } .awj-art .coin img { width: 100% !important; height: 100% !important; object-fit: contain; }
.shf-row { padding-bottom: 34px; }
.shf-row::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 26px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 16%, transparent), color-mix(in srgb, var(--text) 5%, transparent)); box-shadow: 0 26px 36px -18px rgba(11,13,28,.35); z-index: -1; }
.shf-it { padding-top: 40px; } .shf-y { position: absolute; bottom: -34px; }
.shf-it::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 6px; height: 30px; border-radius: 50%; background: var(--afterglow); filter: blur(18px); opacity: 0; transition: opacity .5s; }
.shf-it.on::before { opacity: .55; }
.shf-art { -webkit-box-reflect: below 14px linear-gradient(transparent 76%, rgba(255,255,255,.18)); }
.awj-art .coin, .rl-art .coin, .dk-art .coin, .cf-art .coin, .shf-art .coin { padding: 0 !important; } .awj-art .coin img, .rl-art .coin img, .dk-art .coin img, .cf-art .coin img, .shf-art .coin img { width: 76% !important; height: 76% !important; object-fit: contain; }

/* ---------- awards: coverflow is the section; real trophy art ---------- */
.t-inc { --tc1: #F4F5F8; --tc2: #D9DCE4; --tfg: #0B0D1C; --tac: #E8452C; }
.t-mt { --tc1: #FFF4DF; --tc2: #F3C77A; --tfg: #2A1C05; --tac: #C4741E; }
.t-lcc { --tc1: #123522; --tc2: #2F6B45; --tfg: #F6E7B8; --tac: #E2B04A; }
.lct { height: 100%; aspect-ratio: 220 / 400; } .lct svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 26px rgba(0,0,0,.4)); }
.av-trophy { display: grid; place-items: center; } .av-trophy img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(11,13,28,.35)); }
.cf-art { width: 82% !important; height: 76% !important; } .cf-art .av-art { height: 100%; width: 100%; } .cf-art .av-trophy img { max-height: 100%; } .cf-art .av-lcci { display: grid; place-items: center; }
.cf-c { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tc2) 70%, #fff 0%), var(--tc1) 75%) !important; border: 1px solid color-mix(in srgb, var(--tfg) 10%, transparent); }
.cf-c::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 40%); pointer-events: none; }
.cf-c::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: 8%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.35); filter: blur(14px); z-index: -1; }
.cf-c.on { box-shadow: 0 50px 90px -40px rgba(11,13,28,.7), 0 0 0 1px color-mix(in srgb, var(--tac) 60%, transparent); }
.cf-c.on .cf-art { animation: bob 6s ease-in-out infinite; }
.cf-y { color: var(--tfg) !important; }
.cf-stage { height: clamp(320px, 36vw, 460px) !important; }
.cf .awv-head { margin-bottom: clamp(20px, 3vw, 40px); }
@media (max-width: 700px) { .cf-c { width: 62vw !important; margin-left: -31vw !important; } .cf-stage { height: 380px !important; } .cf-under { grid-template-columns: auto 1fr auto; gap: 10px; } .cf-d b { font-size: 22px; } .cf-dots { display: none; } }
.cf-c { overflow: hidden; }
.cf-art .av-lcci { height: 100%; width: 100%; } .cf-art .lct { height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.cf-art .av-plq .plq { height: 100% !important; width: auto !important; }
.cf-art { position: relative; } .cf-art .av-art { position: absolute !important; inset: 0; height: auto !important; display: grid !important; place-items: center; }
.cf-art .lct { height: 100% !important; width: auto !important; aspect-ratio: 220 / 400; }
.cf-art .lct { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100% !important; width: auto !important; max-width: none !important; }

/* ===================================================================== venture pages */
.vp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding-top: clamp(130px, 15vh, 180px); padding-bottom: calc(var(--S) / 2); }
.vp-hl { display: grid; gap: 22px; justify-items: start; }
.vp-hl h1 { margin: 0; font: 700 clamp(42px, 5.2vw, 90px)/.95 var(--display); letter-spacing: -0.055em; }
.vp-hl > p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; max-width: 580px; }
.vp-hl .btns { flex-wrap: wrap; }
.vp-url { color: var(--muted); transition: color .3s; } .vp-url:hover { color: var(--text); }
.vp-art { position: relative; height: clamp(360px, 40vw, 540px); border-radius: 36px; overflow: hidden; }
.vp-art .stk-art { position: absolute; inset: 0; height: 100%; border-radius: inherit; }
.vp-price { display: flex; align-items: baseline; gap: 10px; } .vp-price b { font: 700 clamp(44px, 4vw, 64px)/1 var(--display); letter-spacing: -0.05em; } .vp-price span { color: var(--muted); }
.vp-items { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); gap: var(--G); } .vp-items.n4 { --c: 4; } .vp-items.n5 { --c: 5; }
.vp-item { position: relative; display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2vw, 30px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s, border-color .3s; transition-delay: calc(var(--i) * 70ms); }
.vp-item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--text) 25%, transparent); box-shadow: 0 30px 60px -36px rgba(11,13,28,.45); }
.vp-item .mono { color: var(--hot); } .vp-item b { font: 600 clamp(20px, 1.6vw, 26px)/1.1 var(--display); letter-spacing: -0.03em; } .vp-item p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 15px; }
.vp-p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 17px; max-width: 760px; }
.vp-what .vp-p { margin-bottom: var(--H); }
.vp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vp-stats > div { padding: 20px 18px 0 0; display: grid; gap: 4px; } .vp-stats > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.vp-stats b { font: 600 clamp(28px, 2.6vw, 44px)/1 var(--display); letter-spacing: -0.05em; } .vp-stats span { color: var(--muted); font-size: 14px; }
.vp-role { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.vp-role .h2 { margin: 14px 0 18px; }
.vp-q { margin: 24px 0 0; font: 400 clamp(22px, 2vw, 32px)/1.25 var(--serif); font-style: italic; }
.vp-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.vp-list li { display: flex; gap: 14px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font: 500 clamp(16px, 1.25vw, 19px)/1.35 var(--display); letter-spacing: -0.015em; }
.vp-list .ic { flex: 0 0 auto; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #C6FF3D; color: #0B0D1C; stroke-width: 2.4; }
.vp-close { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; padding: clamp(40px, 6vw, 96px); text-align: center; display: grid; justify-items: center; gap: 22px; background: #0E0F24; color: #F6F5F9; }
.vp-close .h2 { margin: 0; color: #F6F5F9; max-width: 900px; } .vp-close .kick { color: rgba(246,245,249,.7); }
.vp-close .btn.pri { background: #F6F5F9; color: #0B0D1C; } .vp-close .vp-url { color: rgba(246,245,249,.6); } .vp-close .vp-url:hover { color: #fff; }
.vp-glow { position: absolute; left: 50%; bottom: -60%; width: 80%; height: 100%; transform: translateX(-50%); border-radius: 50%; background: var(--afterglow); filter: blur(100px); opacity: .5; z-index: -1; }
.page-vektoros .vp-glow { background: #3D2CFF; } .page-inner-circle .vp-glow { background: #1F5BF0; } .page-engage .vp-glow { background: #1F5BF0; }
@media (max-width: 1100px) { .vp-items { --c: 2 !important; } .vp-stats { grid-template-columns: repeat(3, 1fr); } .vp-stats > div:nth-child(4) { padding-left: 0; border-left: 0; } }
@media (max-width: 900px) { .vp-hero, .vp-role { grid-template-columns: 1fr; } .vp-art { height: 340px; } }
@media (max-width: 600px) { .vp-items { --c: 1 !important; } .vp-stats { grid-template-columns: 1fr 1fr; } .vp-stats > div { padding-left: 0 !important; border-left: 0 !important; } }
.vp-hero + .sec .vlinks, .vlinks { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* header: theme switch left, menu right */
.hdr-l .mode { margin: 0; }
/* redrawn trophies share the LCCI framing */
.tro { height: 100%; aspect-ratio: 240 / 400; } .tro svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); }
.cf-art .tro { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100% !important; width: auto !important; }
.t-inc { --tc1: #1A1D2A; --tc2: #3A4256; --tfg: #F4F6FA; --tac: #E8452C; }
.t-mt { --tc1: #2A1E08; --tc2: #8A5A14; --tfg: #FFF4D2; --tac: #F3B23E; }
.c5 > .hm-btn { justify-self: end !important; }
.isl-live .isl-logo { margin-right: 4px; } .isl-live .isl-rot { margin-right: 6px; }

/* ===================================================================== header: compact bar */
header.top .bar { max-width: 640px !important; }
.mode-ic { position: relative; display: grid !important; place-items: center; width: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--line) !important; background: var(--card) !important; color: var(--text); cursor: pointer; overflow: hidden; grid-template-columns: none !important; transition: transform .5s var(--ease), background .3s; }
.mode-ic:hover { transform: rotate(18deg); }
.mode-ic > span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s var(--ease), opacity .4s; }
.mode-ic .ic { width: 20px; height: 20px; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="light"] .mode-ic .moon { transform: translateY(130%) rotate(70deg); opacity: 0; }
:root[data-theme="dark"] .mode-ic .sun { transform: translateY(-130%) rotate(-70deg); opacity: 0; }
.mode-ic i { display: none !important; }
.hdr-name { position: relative; display: inline-block; }
.hdr-name .hn-base { color: color-mix(in srgb, var(--text) 24%, transparent); } .hdr-name .hn-base .stop { color: inherit !important; }
.hdr-name .hn-fill { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--text); clip-path: inset(-10% calc(100% - var(--pf, 0) * 100%) -10% 0); }
@media (max-width: 760px) { header.top .bar { grid-template-columns: auto 1fr auto !important; } }

/* ===================================================================== dynamic island */
.island-top { position: fixed; top: 0; left: 0; right: 0; z-index: 85; display: flex; justify-content: center; pointer-events: none; padding: 0 !important; }
.isl2 { --w: 360px; --ib: #000; --if: #F6F5F9; --im: rgba(246,245,249,.6); --ih: rgba(255,255,255,.08); --il: rgba(255,255,255,.1); --ia: #C6FF3D; --ibt: #F6F5F9; --ibf: #000;
  pointer-events: auto; position: relative; width: var(--w); max-width: calc(100vw - 20px); background: var(--ib); color: var(--if); border-radius: 0 0 28px 28px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); transition: width .7s cubic-bezier(.34,1.3,.5,1), border-radius .5s, box-shadow .4s, background .5s, color .5s; }
:root[data-theme="light"] .isl2 { --ib: #FFFFFF; --if: #0B0D1C; --im: rgba(11,13,28,.55); --ih: rgba(11,13,28,.06); --il: rgba(11,13,28,.1); --ia: #6FB800; --ibt: #0B0D1C; --ibf: #FFFFFF; box-shadow: 0 18px 40px -18px rgba(11,13,28,.28), 0 0 0 1px rgba(11,13,28,.05); }
.isl2 > .i-row, .isl2 > .i-panel { position: relative; z-index: 1; }
.isl2.open { --w: 640px; }
.i-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; height: 56px; padding: 0 8px; }
.isl2 .mode-ic { width: 40px !important; height: 40px !important; background: var(--ih) !important; border-color: transparent !important; color: var(--if) !important; }
.i-page { display: flex; justify-content: center; min-width: 0; color: var(--if); perspective: 400px; }
.i-flip { position: relative; display: grid; height: 24px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.5,0,.2,1.15); }
.i-f { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 9px; height: 24px; white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.i-nm { font-size: 19px; letter-spacing: -0.04em; } .i-nm .stop { color: var(--ia) !important; }
.i-pn { transform: rotateX(180deg); font: 600 15px/1 var(--display); letter-spacing: -0.01em; }
.i-flip.alt { transform: rotateX(180deg); }
.i-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ia); animation: livep 2s infinite; flex: 0 0 auto; }
@keyframes livep { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ia) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.i-menu { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ibt); color: var(--ibf); display: grid; place-items: center; cursor: pointer; transition: background .5s, color .5s; }
.i-menu .bi { display: grid; gap: 5px; } .i-menu i { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease); }
.isl2.open .i-menu i:first-child { transform: translateY(3.3px) rotate(45deg); } .isl2.open .i-menu i:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.i-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.isl2.open .i-panel { grid-template-rows: 1fr; }
.i-in { overflow: hidden; min-height: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px 24px; padding: 0 22px; opacity: 0; transition: opacity .3s, padding .6s var(--ease); }
.isl2.open .i-in { opacity: 1; padding: 14px 22px 22px; transition-delay: .12s; }
.i-nav { display: grid; gap: 2px; } .i-nav a { display: flex; align-items: baseline; gap: 12px; padding: 7px 10px; border-radius: 12px; font: 600 clamp(20px, 2vw, 26px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--im); transition: background .25s, color .25s; }
.i-nav a .mono { font-size: 10px; opacity: .7; } .i-nav a:hover { background: var(--ih); color: var(--if); } .i-nav a.cur { color: var(--if); } .i-nav a.cur .mono { color: var(--ia); opacity: 1; }
.i-ven { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; } .i-ven .mono { color: var(--im); margin-bottom: 6px; } .i-ven a { padding: 6px 0; color: var(--im); font-size: 15px; } .i-ven > a:hover, .i-ven > a.cur { color: var(--if); }
.i-ven .i-fl { margin-top: 22px; }
.i-soc { display: flex; gap: 8px; flex-wrap: wrap; } .i-soc a { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ih); color: var(--if); transition: background .25s, color .25s, transform .25s; }
.i-soc a:hover { background: var(--ia); color: #0B0D1C; transform: translateY(-2px); } .i-soc svg { width: 17px; height: 17px; }
.i-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--il); } .i-foot > a:first-child { color: var(--im); font-size: 14px; }
.i-foot .btn.pri { background: var(--ibt); color: var(--ibf); height: 46px; } .i-foot .btn .bi { width: 36px; height: 36px; }
.i-prog { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px; background: var(--il); overflow: hidden; z-index: 2; }
.i-prog::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--pf, 0)); background: var(--ia); }
.isl2.open .i-prog { opacity: 0; }
@media (max-width: 700px) { .isl2 { --w: 290px; } .isl2.open { --w: calc(100vw - 20px); } .i-in { grid-template-columns: 1fr; } }
.cf-stage { position: relative; height: clamp(420px, 44vw, 600px) !important; perspective: 1500px; perspective-origin: 50% 30%; margin-top: 0; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cf-c { top: 46% !important; left: 50% !important; margin: 0 !important; width: clamp(200px, 20vw, 290px) !important; height: clamp(270px, 27vw, 390px) !important; transition: none !important; will-change: transform;
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent 62%, rgba(255,255,255,.26)); }
.cf-c::after { display: none; }
.cf-c.on .cf-art { animation: none; }
.cf-c .cf-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.cf-c .cf-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); }
.cf-c.on .cf-shine::after { animation: cfshine 5.5s ease-in-out infinite 1s; }
@keyframes cfshine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
.cf-floor { position: absolute; left: 50%; top: calc(46% + clamp(135px, 13.5vw, 195px)); width: min(86vw, 1100px); height: 200px; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(50% 42% at 50% 30%, color-mix(in srgb, var(--text) 12%, transparent), transparent 70%); }
.cf-floor::before { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 30%, transparent), transparent); }
:root[data-theme="dark"] .cf-floor { background: radial-gradient(50% 42% at 50% 30%, rgba(198,255,61,.10), transparent 70%); }
:root[data-theme="dark"] .cf-floor::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.cf-c { cursor: pointer; } .cf-c.on { cursor: default; }
.cf:focus-visible { outline: none; }
.cf-hint { text-align: center; color: var(--muted); margin-top: 10px; font-size: 11px; }
.cf-under { margin-top: 0 !important; }
@media (max-width: 700px) { .cf-c { width: 46vw !important; height: 62vw !important; } .cf-stage { height: 440px !important; } .cf-floor { top: calc(46% + 31vw); } }

/* ---------- island v3: liquid glass, no edges, no line ---------- */
.mode-ic > span { padding: 0 !important; }
.i-prog { display: none !important; }
.isl2 { --ib: transparent; background: none; color: var(--if); isolation: isolate;
  box-shadow: 0 22px 50px -22px rgba(11,13,28,.45), 0 2px 6px -2px rgba(11,13,28,.12); }
.isl2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--ig);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 0 var(--ihl), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--ie), inset 0 -18px 30px -24px var(--ihl); transition: background .5s; }
.isl2::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 46%; max-height: 34px; border-radius: 0 0 50% 50% / 0 0 100% 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--isp), transparent); opacity: .9; }
.isl2.open::before { background: var(--igo); }
/* light: clear white glass */
:root[data-theme="light"] .isl2 { --ig: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,245,249,.55)); --igo: linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,245,249,.78));
  --ihl: rgba(255,255,255,.95); --ie: rgba(11,13,28,.07); --isp: rgba(255,255,255,.7); box-shadow: 0 22px 50px -24px rgba(11,13,28,.3), 0 2px 6px -2px rgba(11,13,28,.08); }
/* dark: Afterglow glass, ultramarine into violet with a rose edge */
:root[data-theme="dark"] .isl2, .isl2 { --if: #F6F5F9; --im: rgba(246,245,249,.68); --ih: rgba(255,255,255,.12); --il: rgba(255,255,255,.14); --ibt: #F6F5F9; --ibf: #0B0D1C;
  --ig: linear-gradient(120deg, rgba(61,44,255,.78), rgba(139,92,246,.62) 55%, rgba(255,79,139,.5));
  --igo: radial-gradient(120% 80% at 100% 0%, rgba(255,79,139,.42), transparent 55%), linear-gradient(150deg, rgba(61,44,255,.9), rgba(88,52,230,.86) 50%, rgba(30,24,90,.92));
  --ihl: rgba(255,255,255,.35); --ie: rgba(255,255,255,.12); --isp: rgba(255,255,255,.22); }
:root[data-theme="light"] .isl2 { --if: #0B0D1C; --im: rgba(11,13,28,.58); --ih: rgba(11,13,28,.06); --il: rgba(11,13,28,.1); --ibt: #0B0D1C; --ibf: #FFFFFF; }
.isl2 .mode-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
/* centre: name and page in the same type, plain full stop, no dot */
.i-dot { display: none !important; }
.i-nm .stop { color: inherit !important; }
.i-pn { font-size: 19px; letter-spacing: -0.04em; gap: 0; } .i-pn .i-pg { font: inherit; }
.i-in .i-nav a.cur .mono, .i-soc a:hover { color: var(--if); }
.i-soc a:hover { background: var(--ih); }
.i-nm, .i-pn { gap: 0 !important; }
.isl2::after { left: 0; right: 0; height: 50%; max-height: 30px; border-radius: 0; background: linear-gradient(180deg, var(--isp), transparent); opacity: .55; }
.cf-dim { position: absolute; inset: 0; border-radius: inherit; background: #0B0D1C; pointer-events: none; z-index: 3; will-change: opacity; }
.cf-stage { perspective: 1200px; }
.cf-c { background: radial-gradient(120% 90% at 50% 0%, var(--tc2), var(--tc1) 75%) !important; }
.cf-c { transform-style: flat !important; }
.cf-c svg text { text-rendering: geometricPrecision; }
.plq svg text, .lct svg text, .tro svg text { text-rendering: geometricPrecision; }

/* ---------- awards coverflow v4: five at a time, smooth, reflected ---------- */
.cf-stage { height: clamp(400px, 42vw, 560px) !important; perspective: 1400px !important; perspective-origin: 50% 40% !important; }
.cf-c { top: 0 !important; left: 50% !important; width: clamp(220px, 24vw, 340px) !important; height: clamp(300px, 32vw, 440px) !important; margin: 0 0 0 calc(clamp(220px, 24vw, 340px) / -2) !important;
  transition: transform 1.15s cubic-bezier(.33, 1, .68, 1), opacity .7s ease !important; will-change: transform, opacity; transform-style: flat !important; filter: none !important; }
.cf-c.cf-jump { transition: opacity .7s ease !important; }
.cf-dim { transition: opacity 1.15s ease; }
.cf-floor { top: clamp(300px, 32vw, 440px) !important; }
/* plaques sit straight in the cards */
.cf-art .av-plq .plq, .cf-c.on .cf-art .av-plq .plq { transform: none !important; animation: none !important; }
.cf-c .cf-art { animation: none !important; }
@media (max-width: 700px) { .cf-c { width: 58vw !important; height: 78vw !important; margin-left: -29vw !important; } .cf-stage { height: calc(78vw + 90px) !important; } .cf-floor { top: 78vw !important; } }

/* ---------- header: notch + bezel (V1 obsidian, V2 follows the theme) ---------- */
.nv1, .nv2 { --nb: #000; --nf: #F6F5F9; --nm: rgba(246,245,249,.62); --nh: rgba(255,255,255,.1); --nl: rgba(255,255,255,.12); --nbt: #F6F5F9; --nbf: #000;
  --ng: linear-gradient(180deg, #000 0%, #07070B 52%, #16161F 100%); --nrim: rgba(255,255,255,.2); --nglow: rgba(255,255,255,.09);
  --npo: linear-gradient(180deg, #000 0, #050508 60px, #121219 100%); }
:root[data-theme="dark"] .nv1 { --npo: radial-gradient(90% 70% at 85% 105%, rgba(255,79,139,.42), transparent 60%), radial-gradient(110% 90% at 10% 110%, rgba(61,44,255,.85), transparent 65%), linear-gradient(180deg, #000 0, #000 60px, #1A1460 100%); }
:root[data-theme="light"] .nv2 { --nb: #FFFFFF; --nf: #0B0D1C; --nm: rgba(11,13,28,.58); --nh: rgba(11,13,28,.06); --nl: rgba(11,13,28,.09); --nbt: #0B0D1C; --nbf: #FFFFFF;
  --ng: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, #F2F1F8 100%); --nrim: rgba(255,255,255,1); --nglow: rgba(61,44,255,.06);
  --npo: radial-gradient(80% 60% at 90% 110%, rgba(255,79,139,.10), transparent 60%), radial-gradient(90% 70% at 5% 110%, rgba(61,44,255,.12), transparent 60%), linear-gradient(180deg, #FFFFFF 0, #FFFFFF 60px, #F5F4FB 100%); }
:root[data-theme="dark"] .nv2 { --nb: #0E0B2E; --ng: linear-gradient(180deg, #0E0B2E 0%, #160F4E 50%, #2B1FA8 100%); --nrim: rgba(190,175,255,.45); --nglow: rgba(255,79,139,.22);
  --npo: radial-gradient(90% 70% at 85% 105%, rgba(255,79,139,.45), transparent 60%), radial-gradient(110% 90% at 10% 110%, rgba(61,44,255,.9), transparent 65%), linear-gradient(180deg, #0E0B2E 0, #0E0B2E 60px, #1C1470 100%); }
.bezel { --bz: 7px; --sr: 26px; position: fixed; top: 0; left: 0; right: 0; height: var(--bz); background: var(--nb); z-index: 84; pointer-events: none; transition: background .5s; }
.bezel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(180deg, rgba(0,0,0,.2), transparent); }
:root[data-theme="light"] .bezel.nv2::after { background: linear-gradient(180deg, rgba(11,13,28,.07), transparent); }
.bz-l, .bz-r { position: absolute; top: 100%; width: var(--sr); height: var(--sr); background: radial-gradient(circle at 100% 100%, transparent calc(var(--sr) - .5px), var(--nb) var(--sr)); }
.bz-l { left: 0; } .bz-r { right: 0; transform: scaleX(-1); }
.notch-top .isl2 { --w: 420px; --if: var(--nf) !important; --im: var(--nm) !important; --ih: var(--nh) !important; --il: var(--nl) !important; --ibt: var(--nbt) !important; --ibf: var(--nbf) !important;
  border-radius: 0 0 30px 30px; box-shadow: 0 18px 34px -20px rgba(0,0,0,.55); color: var(--if); }
:root[data-theme="light"] .notch-top.nv2 .isl2 { box-shadow: 0 18px 34px -20px rgba(11,13,28,.28); }
/* liquid gloss: glossy body, a bright rim along the curved bottom, a soft glow pooled inside it, and a slow sheen */
.notch-top .isl2::before { background: var(--ng) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 -1.5px 0 var(--nrim), inset 0 -16px 22px -16px var(--nglow), inset 0 -2px 6px -2px var(--nglow) !important; transition: background .5s; }
.notch-top .isl2::after { display: block; content: ""; position: absolute; inset: 0; top: 7px; border-radius: inherit; z-index: -1; pointer-events: none; overflow: hidden; opacity: 1; max-height: none; height: auto; left: 0; right: 0;
  background: radial-gradient(70% 55% at 50% 0%, rgba(255,255,255,.10), transparent 70%), linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 48%, transparent 58%) no-repeat;
  background-size: 100% 100%, 250% 100%; background-position: 0 0, 160% 0; animation: nsheen 7s ease-in-out infinite 2s; }
:root[data-theme="light"] .notch-top.nv2 .isl2::after { background: radial-gradient(70% 55% at 50% 0%, rgba(255,255,255,.9), transparent 70%), linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 48%, transparent 58%) no-repeat; background-size: 100% 100%, 250% 100%; }
@keyframes nsheen { 0%, 60% { background-position: 0 0, 160% 0; } 90%, 100% { background-position: 0 0, -60% 0; } }
.notch-top .isl2.open { --w: 640px; border-radius: 0 0 34px 34px; }
.notch-top .isl2.open::before { background: var(--npo) !important; }
.notch-top .isl2.open::after { animation: none; opacity: .5; }
.notch-top .n-sh { position: absolute; top: 7px; width: 22px; height: 22px; z-index: 2; pointer-events: none; background: radial-gradient(circle at 100% 100%, transparent 21.5px, var(--nb) 22px); transition: background .5s; }
.notch-top .n-sh.l { left: -22px; transform: scaleX(-1); } .notch-top .n-sh.r { right: -22px; }
.notch-top .i-row { height: 62px; padding: 6px 10px 0; }
.notch-top .mode-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px var(--nl) !important; }
.notch-top .i-menu { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -6px rgba(0,0,0,.5); }
@media (max-width: 700px) { .notch-top .isl2 { --w: 300px; } .notch-top .isl2.open { --w: calc(100vw - 20px); } .bezel { --sr: 20px; } }

.cf-c.cf-jump { transition: none !important; }
.cf-c { transition: transform 1.15s cubic-bezier(.33, 1, .68, 1) !important; }

/* ---------- notch V1: liquid gloss ---------- */
.notch-top .isl2::before { background: linear-gradient(180deg, #000 0%, #040407 42%, #101017 76%, #1B1B25 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.5), inset 0 -2.5px 0 rgba(255,255,255,.06), inset 0 -16px 20px -14px rgba(255,255,255,.2), inset 0 -40px 40px -40px rgba(139,92,246,.25) !important; }
.notch-top .isl2::after { top: 7px; border-radius: 0 0 30px 30px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 6%, rgba(61,44,255,.55) 22%, rgba(255,255,255,.9) 50%, rgba(255,79,139,.55) 78%, transparent 94%) bottom / 100% 1.5px no-repeat,
    radial-gradient(55% 34% at 50% 100%, rgba(255,255,255,.18), transparent 72%),
    radial-gradient(80% 60% at 50% -10%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(105deg, transparent 40%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.04) 52%, transparent 60%) 160% 0 / 250% 100% no-repeat !important;
  animation: nsheen2 7s ease-in-out infinite 2s; }
@keyframes nsheen2 { 0%, 58% { background-position: bottom, 0 0, 0 0, 160% 0; } 92%, 100% { background-position: bottom, 0 0, 0 0, -60% 0; } }
.notch-top .isl2.open::after { animation: none; }
.notch-top .mode-ic { background: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.04)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.05), 0 2px 8px -3px rgba(0,0,0,.6) !important; }
.notch-top .i-menu, .notch-top .i-mfull { background: linear-gradient(180deg, #FFFFFF, #DCDBE6) !important; color: #000 !important; box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(11,13,28,.12), 0 4px 12px -5px rgba(0,0,0,.7) !important; }
/* full menu: the notch button opens the original full-screen menu */
.notch-top .i-mfull { width: 40px; height: 40px; }
.notch-top .i-mfull .bi { width: 16px; height: 12px; }
body.menu-open .notch-top .isl2 { box-shadow: 0 18px 34px -20px rgba(0,0,0,.25); }

/* ---------- page transition: circular wipe, matching the theme switch ---------- */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
.curtain, .curtain.cover, .curtain.leave { transform: none !important; }
.curtain { --hole: 170vmax; transition: --hole .9s cubic-bezier(.77,0,.18,1) !important;
  -webkit-mask: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--hole) - 1px), #000 var(--hole));
          mask: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--hole) - 1px), #000 var(--hole)); }
.curtain.cover { --hole: 0px; transition: --hole .62s cubic-bezier(.77,0,.18,1) !important; }
.curtain.hold, html.nav-in .curtain { --hole: 0px; transition: none !important; }
.curtain.leave { --hole: 170vmax; transition: --hole .95s cubic-bezier(.77,0,.18,1) !important; }
.curtain .wm { transition: opacity .35s ease; }
.curtain.cover .wm { opacity: 1; transition-delay: .25s; } .curtain.hold .wm, html.nav-in .curtain .wm { opacity: 1; transition: none; }
.curtain.leave .wm { opacity: 0; transition: opacity .3s ease; }
#loader { --hole: 0px; transform: none !important; transition: --hole 1s cubic-bezier(.77,0,.18,1) !important;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole)); mask: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole)); }
#loader.out { --hole: 170vmax; }

/* ---------- cross-page view transition ---------- */
@view-transition { navigation: auto; }

/* ---------- socials: official logos, brand colour on hover ---------- */
.ic.brand { stroke: none; }
.s-facebook { --sc: #1877F2; } .s-instagram { --sc: #E1306C; } .s-linkedin { --sc: #0A66C2; } .s-upwork { --sc: #14A800; }
.i-soc a.s-facebook:hover, .i-soc a.s-instagram:hover, .i-soc a.s-linkedin:hover, .i-soc a.s-upwork:hover { background: var(--sc) !important; color: #fff !important; box-shadow: 0 8px 20px -8px var(--sc); }

.mo-side a[class^="s-"]:hover, .rf a[class^="s-"]:hover { color: var(--sc) !important; opacity: 1 !important; }
:root[data-theme="dark"] .mo-side a.s-linkedin:hover, :root[data-theme="dark"] .rf a.s-linkedin:hover { color: #3B8FE0 !important; }
.rf a[class^="s-"] svg { transition: color .25s; }
.i-soc svg.brand { width: 16px; height: 16px; }

/* ---------- menu items: colour on hover ---------- */
.i-nav a .lbl, .mo li a .lbl { transition: color .3s; }
.i-nav a:hover .lbl, .mo li a:hover .lbl { background: linear-gradient(90deg, #A78BFA, #FF4F8B 55%, #FFA27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .mo li a:hover .lbl { background: linear-gradient(90deg, #3D2CFF, #B0249A 55%, #E8337F); -webkit-background-clip: text; background-clip: text; }
.i-nav a:hover .mono { color: #FF4F8B !important; opacity: 1; }
.i-ven > a:hover, .i-foot > a:first-child:hover { color: #FF8FB8 !important; }
.mo-side a:not([class^="s-"]):not(.btn):hover { color: var(--hot, #FF4F8B) !important; }

/* ---------- more gloss: notch and the open menu ---------- */
.notch-top .isl2::before { background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,.05) 80%, rgba(255,255,255,.09) 100%),
    linear-gradient(180deg, #000 0%, #040407 42%, #101017 76%, #1B1B25 100%) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.62), inset 0 -2.5px 0 rgba(255,255,255,.08), inset 0 -18px 22px -14px rgba(255,255,255,.26), inset 0 -44px 40px -40px rgba(139,92,246,.32), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(255,255,255,.05) !important; }
.notch-top .isl2.open::before { background:
    linear-gradient(125deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 34%, transparent 34.2%),
    radial-gradient(70% 40% at 50% 100%, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(180deg, #000 0, #050508 64px, #111119 100%) !important; }
:root[data-theme="dark"] .notch-top .isl2.open::before { background:
    linear-gradient(125deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 34%, transparent 34.2%),
    radial-gradient(90% 70% at 85% 105%, rgba(255,79,139,.42), transparent 60%), radial-gradient(110% 90% at 10% 110%, rgba(61,44,255,.85), transparent 65%),
    linear-gradient(180deg, #000 0, #000 60px, #1A1460 100%) !important; }
.notch-top .isl2.open::after { animation: none; opacity: 1;
  background: linear-gradient(90deg, transparent 6%, rgba(61,44,255,.55) 22%, rgba(255,255,255,.9) 50%, rgba(255,79,139,.55) 78%, transparent 94%) bottom / 100% 1.5px no-repeat,
    radial-gradient(60% 18% at 50% 100%, rgba(255,255,255,.14), transparent 72%) !important; }
.notch-top .i-nav a:hover { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.notch-top .i-soc a { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }

/* ---------- every button: the Afterglow fill slides in left to right ---------- */
.btn { isolation: isolate; overflow: hidden; }
.btn::before { content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none;
  background: var(--afterglow); clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .6s var(--ease) !important; }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0 round 999px); }
.btn:hover, .btn:focus-visible { color: #fff !important; }
.btn .bt, .btn .bi { position: relative; z-index: 1; }
.btn.ghost, .btn.white { transition: color .35s ease, border-color .35s ease, box-shadow .4s ease !important; }
.btn.ghost:hover, .btn.ghost:focus-visible { background: transparent !important; border-color: transparent !important; box-shadow: 0 18px 40px -16px rgba(255,79,139,.55); }
.btn.white:hover, .btn.white:focus-visible { box-shadow: 0 18px 40px -16px rgba(255,79,139,.55); }
.btn.ghost:hover .bi, .btn.white:hover .bi { background: #fff !important; color: #0B0D1C !important; }
.btn:hover .bt { color: #fff !important; }

/* ---------- SaaSpreneur row: tier glow, metallic names, ghost years ---------- */
.sc-row { position: relative; }
.sc-cell { border-top: 0 !important; border-left: 0 !important; align-items: center !important; min-height: clamp(230px, 20vw, 290px) !important;
  background: radial-gradient(90% 120% at 12% 55%, color-mix(in srgb, var(--m2) 20%, transparent), transparent 62%) !important; transition: background .6s; }
.sc-cell:hover { background: radial-gradient(100% 130% at 12% 55%, color-mix(in srgb, var(--m2) 30%, transparent), transparent 66%) !important; }
.sc-cell + .sc-cell::after { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); }
.sc-edge { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--m1) 30%, var(--m3) 50%, var(--m1) 70%, transparent); transition: transform 1.3s var(--ease); }
.sc.in .sc-edge { transform: scaleX(1); } .sc.in .c1 .sc-edge { transition-delay: .25s; } .sc.in .c2 .sc-edge { transition-delay: .5s; }
.sc-edge::after { content: ""; position: absolute; left: 50%; top: -8px; width: 60%; height: 16px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--m1) 45%, transparent), transparent); filter: blur(6px); }
.sc-yr { position: absolute; right: -.02em; bottom: -.2em; z-index: -1; pointer-events: none; font: 800 clamp(96px, 9.5vw, 160px)/1 var(--display); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--m1) 20%, transparent); transition: transform 1s var(--ease), -webkit-text-stroke-color .5s; }
.sc-cell:hover .sc-yr { transform: translateY(-6px); -webkit-text-stroke-color: color-mix(in srgb, var(--m1) 42%, transparent); }
.sc-plq { position: relative; animation: scfloat 6s ease-in-out infinite; } .c1 .sc-plq { animation-delay: -2s; } .c2 .sc-plq { animation-delay: -4s; }
@keyframes scfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sc-plq .plq { -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgba(255,255,255,.22)); filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.sc-halo { position: absolute; inset: -18% -22%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--m2) 55%, transparent), transparent); filter: blur(18px); opacity: .55; transition: opacity .6s, transform .8s var(--ease); }
.sc-cell:hover .sc-halo { opacity: .95; transform: scale(1.08); }
.sc-step { display: flex; align-items: center; gap: 10px; color: rgba(246,245,249,.55) !important; }
.sc-step i { font-style: normal; display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10px; color: var(--m3); border: 1px solid color-mix(in srgb, var(--m1) 45%, transparent); background: color-mix(in srgb, var(--m2) 18%, transparent); }
.sc-name { display: grid; gap: 4px; text-transform: none !important; font-size: inherit !important; line-height: 1 !important; }
.sc-name span { font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: rgba(246,245,249,.6); }
.sc-name em { font: 800 clamp(28px, 2.6vw, 42px)/.95 var(--display); font-style: normal; letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--m2) 0%, var(--m1) 28%, var(--m3) 46%, var(--m1) 62%, var(--m2) 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--m2) 45%, transparent)); transition: background-position 1.4s var(--ease); }
.sc-cell:hover .sc-name em { background-position: 100% 0; }
.sc-txt { position: relative; }
.sc-hov { color: var(--m1) !important; }
@media (max-width: 900px) { .sc-cell + .sc-cell::after { left: 10%; right: 10%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); } }

/* ---------- SaaSpreneur row: no lines under the titles ---------- */
.sc-cell { min-height: clamp(210px, 18vw, 260px) !important; }

/* ---------- plaque row options page ---------- */
.po-intro { padding: clamp(130px, 14vw, 180px) 0 0; } .po-h1 { font: 700 clamp(38px, 5vw, 76px)/1 var(--display); letter-spacing: -0.045em; margin: 14px 0 12px; } .po-sub { color: var(--muted); max-width: 520px; }
.po-sec { padding: clamp(48px, 5vw, 80px) 0 0; } .po-sec:last-of-type { padding-bottom: 120px; }
.po-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; margin-bottom: 20px; }
.po-head h3 { margin: 0; font: 700 clamp(24px, 2.4vw, 34px)/1 var(--display); letter-spacing: -0.035em; } .po-head p { grid-column: 2; margin: 0; color: var(--muted); font-size: 15px; }
.po-tag { grid-row: span 2; align-self: start; padding: 7px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 11px; }
.po-panel { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; color: #F6F5F9;
  background: radial-gradient(80% 120% at 0% 0%, rgba(61,44,255,.35), transparent 55%), radial-gradient(60% 90% at 100% 100%, rgba(255,79,139,.16), transparent 60%), #0B0D1C;
  box-shadow: 0 40px 80px -50px rgba(11,13,28,.7), inset 0 1px 0 rgba(255,255,255,.06); }
.po-panel .plq { -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgba(255,255,255,.2)); filter: drop-shadow(0 16px 24px rgba(0,0,0,.5)); }
.po-halo { position: absolute; inset: -18% -24%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--m2) 55%, transparent), transparent); filter: blur(18px); opacity: .55; transition: opacity .6s, transform .8s var(--ease); }
.po-name { display: grid; gap: 6px; } .po-name span { font: 500 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: rgba(246,245,249,.6); }
.po-name em { font: 800 clamp(26px, 2.5vw, 40px)/.95 var(--display); font-style: normal; letter-spacing: -0.02em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--m2) 0%, var(--m1) 28%, var(--m3) 46%, var(--m1) 62%, var(--m2) 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--m2) 45%, transparent)); transition: background-position 1.4s var(--ease); }
.po-name.ctr { justify-items: center; text-align: center; }
:is(.po-a-cell, .po-b-col, .po-c-col, .po-d-it, .po-e-node):hover .po-name em { background-position: 100% 0; }
:is(.po-a-cell, .po-b-col, .po-e-node):hover .po-halo { opacity: .95; transform: scale(1.08); }
/* A */
.po-a { display: grid; grid-template-columns: repeat(3, 1fr); }
.po-a-cell { position: relative; display: grid; grid-template-columns: 34% 1fr; gap: 26px; align-items: center; padding: 40px 36px 52px; overflow: hidden; isolation: isolate; background: radial-gradient(90% 120% at 12% 55%, color-mix(in srgb, var(--m2) 20%, transparent), transparent 62%); }
.po-a-cell + .po-a-cell::after { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); }
.po-a-plq { position: relative; } .po-yr { position: absolute; right: 0; bottom: -.2em; z-index: -1; font: 800 clamp(96px, 9.5vw, 160px)/1 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--m1) 20%, transparent); }
.po-step { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: rgba(246,245,249,.55); } .po-step i { font-style: normal; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 10px; color: var(--m3); border: 1px solid color-mix(in srgb, var(--m1) 45%, transparent); }
/* B staircase */
.po-b { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 0; padding: 70px 6% 0; }
.po-b-col { display: grid; justify-items: center; }
.po-b-plq { position: relative; width: clamp(120px, 11vw, 170px); margin-bottom: 30px; transition: transform .8s var(--ease); } .po-b-col:hover .po-b-plq { transform: translateY(-10px); }
.po-b-plq .plq { -webkit-box-reflect: unset; }
.po-b-step { width: 100%; height: var(--h); display: grid; align-content: start; justify-items: center; gap: 10px; padding-top: 22px; text-align: center; position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--m2) 30%, #14172B), #0B0D1C 90%); border-top: 1px solid color-mix(in srgb, var(--m1) 70%, transparent);
  box-shadow: inset 0 18px 30px -20px color-mix(in srgb, var(--m1) 50%, transparent); transform-origin: bottom; transform: scaleY(.2); transition: transform 1.1s var(--ease); }
.po-b-col + .po-b-col .po-b-step { border-left: 1px solid rgba(255,255,255,.06); }
.po-b.po-in .po-b-step { transform: none; } .po-b.po-in .po-b-col:nth-child(2) .po-b-step { transition-delay: .15s; } .po-b.po-in .po-b-col:nth-child(3) .po-b-step { transition-delay: .3s; }
.po-b-step .mono { color: rgba(246,245,249,.6); } .po-b-step .po-name { justify-items: center; }
/* C spotlights */
.po-c { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 4% 56px; }
.po-c-col { position: relative; display: grid; justify-items: center; gap: 12px; padding-top: 70px; isolation: isolate; }
.po-c-beam { position: absolute; top: 0; left: 50%; width: 120%; height: 78%; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: .5; transition: opacity .6s;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, color-mix(in srgb, var(--m1) 38%, transparent) 180deg, transparent 200deg); filter: blur(10px);
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
.po-c-col:hover .po-c-beam { opacity: 1; }
.po-c-plq { width: clamp(130px, 12vw, 180px); transition: transform .8s var(--ease); } .po-c-col:hover .po-c-plq { transform: translateY(-8px) scale(1.03); }
.po-c-floor { width: 70%; height: 22px; margin-top: 26px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--m1) 45%, transparent), transparent); filter: blur(4px); }
.po-c-y { color: rgba(246,245,249,.55); margin-top: 8px; }
/* D fan */
.po-d { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 40px; padding: 56px 6%; min-height: 420px; }
.po-d-list { display: grid; gap: 6px; } .po-d-it { all: unset; cursor: pointer; display: grid; gap: 8px; padding: 16px 20px; border-radius: 18px; transition: background .4s, opacity .4s; opacity: .45; }
.po-d-it .mono { color: rgba(246,245,249,.55); }
.po-d[data-on="0"] .po-d-it[data-i="0"], .po-d[data-on="1"] .po-d-it[data-i="1"], .po-d[data-on="2"] .po-d-it[data-i="2"] { opacity: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--m2) 22%, transparent), transparent); }
.po-d-fan { position: relative; height: 340px; }
.po-d-card { position: absolute; left: 50%; top: 50%; width: 200px; margin: -133px 0 0 -100px; transition: transform .8s cubic-bezier(.33,1,.68,1), filter .6s; cursor: pointer; }
.po-d-card[data-i="0"] { transform: translateX(-150px) rotate(-12deg); z-index: 1; } .po-d-card[data-i="1"] { transform: translateY(-14px); z-index: 2; } .po-d-card[data-i="2"] { transform: translateX(150px) rotate(12deg); z-index: 1; }
.po-d-card .plq { -webkit-box-reflect: unset; }
.po-d .po-d-card { filter: brightness(.6) saturate(.7); }
.po-d[data-on="0"] .po-d-card[data-i="0"] { transform: translateX(-120px) translateY(-24px) rotate(-6deg) scale(1.08); z-index: 3; filter: none; }
.po-d[data-on="1"] .po-d-card[data-i="1"] { transform: translateY(-30px) scale(1.08); z-index: 3; filter: none; }
.po-d[data-on="2"] .po-d-card[data-i="2"] { transform: translateX(120px) translateY(-24px) rotate(6deg) scale(1.08); z-index: 3; filter: none; }
/* E timeline */
.po-e { display: grid; grid-template-columns: repeat(3, 1fr); padding: 60px 4% 56px; }
.po-e-rail { position: absolute; left: 8%; right: 8%; top: calc(60px + clamp(160px, 15vw, 220px) + 40px); height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; }
.po-e-rail i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease); background: linear-gradient(90deg, #8CCBFF, #E4E8EE 50%, #F1D894); box-shadow: 0 0 14px rgba(255,255,255,.3); }
.po-e.po-in .po-e-rail i { transform: scaleX(1); }
.po-e-node { display: grid; justify-items: center; gap: 12px; position: relative; }
.po-e-plq { position: relative; width: clamp(120px, 11vw, 160px); height: clamp(160px, 15vw, 220px); display: grid; align-items: end; transition: transform .8s var(--ease); } .po-e-node:hover .po-e-plq { transform: translateY(-8px); }
.po-e-plq .plq { -webkit-box-reflect: unset; }
.po-e-dot { width: 16px; height: 16px; margin-top: 30px; border-radius: 50%; background: var(--m1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--m1) 20%, transparent), 0 0 24px var(--m1); position: relative; z-index: 1; }
.po-e-y { color: rgba(246,245,249,.6); }
@media (max-width: 900px) { .po-a, .po-b, .po-c, .po-e { grid-template-columns: 1fr; } .po-d { grid-template-columns: 1fr; } .po-e-rail { display: none; } .po-b-step { height: auto; padding-bottom: 24px; } .po-a-cell + .po-a-cell::after { display: none; } }
.po-c-beam { width: 140%; height: 86%; opacity: .85; filter: blur(14px); background: conic-gradient(from 180deg at 50% -4%, transparent 158deg, color-mix(in srgb, var(--m1) 30%, transparent) 172deg, color-mix(in srgb, var(--m3) 42%, transparent) 180deg, color-mix(in srgb, var(--m1) 30%, transparent) 188deg, transparent 202deg); }
.po-c-col:hover .po-c-beam { opacity: 1; filter: blur(10px); }

.sc-go { position: absolute; inset: 0; z-index: 3; }
.sc-go span { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--m3); border: 1px solid color-mix(in srgb, var(--m1) 35%, transparent); background: color-mix(in srgb, var(--m2) 14%, transparent); opacity: .55; transition: opacity .4s, transform .5s var(--ease), background .4s; }
.sc-go span .ic { width: 15px; height: 15px; }
.sc-go:hover span, .sc-go:focus-visible span { opacity: 1; transform: rotate(45deg); background: color-mix(in srgb, var(--m2) 40%, transparent); }
.sc-cell:has(.sc-go) { cursor: pointer; }

/* ---------- contact cards: five, with brand colour on hover ---------- */
.ct-dets { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; }
.ct-d .ct-ic { transition: background .3s, color .3s; }
.ct-d[class*="s-"]:hover { border-color: var(--sc, var(--hot)) !important; } .ct-d[class*="s-"]:hover .ct-ic { background: var(--sc); color: #fff; }
.ct-d.s-email { --sc: #3D2CFF; }
/* ---------- descenders and italic overhang never clipped ---------- */
.sw { padding: 0 .1em .28em 0 !important; margin: 0 -.1em -.28em 0 !important; }
.mo li { padding-bottom: .14em; margin-bottom: -.14em; }
.gt, .gtw, .hot.serif { padding-bottom: .06em; }
h1 .serif, h2 .serif, h3 .serif, .h2 .serif { padding-right: .06em; }
/* ---------- legal pages ---------- */
.legal { max-width: 760px; }
.legal h2 { font: 700 clamp(22px, 2vw, 28px)/1.15 var(--display); letter-spacing: -0.03em; margin: 44px 0 12px; }
.legal p, .legal li { color: var(--muted); line-height: 1.7; font-size: 16px; } .legal ul { padding-left: 20px; } .legal li { margin: 6px 0; }
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.legal .upd { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal .note { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); font-size: 14px; }
.rf-bottom a { color: inherit; } .rf-bottom a:hover { color: var(--hot); }

.legal nav.note { margin: 18px 0 8px; } .legal nav.note ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; } .legal nav.note li { margin: 3px 0; font-size: 14px; break-inside: avoid; }
.legal nav.note a { text-decoration: none; color: var(--muted); } .legal nav.note a:hover { color: var(--text); }
.legal h2 { scroll-margin-top: 110px; } .legal b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .legal nav.note ol { columns: 1; } }

/* ---------- Script Vault resource page ---------- */
.sv-hero .vp-art { overflow: visible; border-radius: 0; }
.sv-vis { min-height: 100%; height: 100%; }
.sv-hero:hover .bk { transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); }
.sv-b3 .sv-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #C6FF3D; box-shadow: 0 0 0 5px color-mix(in srgb, #C6FF3D 25%, transparent); }
.sv-facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.sv-facts span { display: grid; gap: 2px; padding: 18px 26px 0 0; color: var(--muted); font-size: 13.5px; } .sv-facts span + span { padding-left: 26px; border-left: 1px solid var(--line); }
.sv-facts b { font: 600 clamp(26px, 2.4vw, 36px)/1 var(--display); letter-spacing: -0.04em; color: var(--text); }
.sv-q { margin: 0 auto; max-width: 1050px; text-align: center; font: 600 clamp(30px, 4.2vw, 64px)/1.08 var(--display); letter-spacing: -0.045em; padding-bottom: .12em; }
.sv-q-p { margin: 22px auto 0; max-width: 620px; text-align: center; color: var(--muted); font-size: 17px; line-height: 1.6; }
.sv-acts { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--G); align-items: start; }
.sv-act { padding: clamp(22px, 2vw, 30px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; transition-delay: calc(var(--i) * 70ms); }
.sv-act:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.sv-act-h { display: grid; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .sv-act-h .mono { color: var(--hot); } .sv-act-h b { font: 600 clamp(22px, 1.8vw, 28px)/1.1 var(--display); letter-spacing: -0.03em; }
.sv-act ol { list-style: none; margin: 0; padding: 0; display: grid; }
.sv-act li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); } .sv-act li:last-child { border-bottom: 0; padding-bottom: 0; }
.sv-act li > .mono { color: var(--muted); padding-top: 3px; } .sv-act li b { display: block; font: 600 17px/1.25 var(--display); letter-spacing: -0.015em; } .sv-act li span span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.sv-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--G); }
.sv-cat { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2vw, 30px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s; transition-delay: calc(var(--i) * 70ms); }
.sv-cat:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.sv-cat > .mono { color: var(--hot); } .sv-cat p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; min-height: 3em; }
.sv-cat ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sv-cat li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font: 600 16.5px/1.3 var(--display); letter-spacing: -0.015em; } .sv-cat li:last-child { border-bottom: 0; } .sv-cat li .mono { color: var(--muted); font-weight: 400; }
.sv-ex { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.sv-ex-copy > p { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0 0 26px; }
.sv-rules li { font-size: clamp(15px, 1.1vw, 17px); }
.sv-code { margin: 0; border-radius: 26px; overflow: hidden; background: #0B0D1C; color: #D9D9E6; border: 1px solid rgba(246,245,249,.1); box-shadow: 0 40px 80px -40px rgba(11,13,28,.6); }
.sv-code-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(246,245,249,.08); } .sv-code-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(246,245,249,.18); } .sv-code-bar .mono { margin-left: 10px; color: rgba(246,245,249,.5); font-size: 11px; }
.sv-code pre { margin: 0; padding: clamp(20px, 2.2vw, 30px); font: 400 clamp(11.5px, .95vw, 13.5px)/1.7 "JetBrains Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-x: auto; }
.sv-code pre .c { color: #C6FF3D; font-weight: 600; } .sv-code pre b { color: #FFA27A; font-weight: 500; }
.sv-tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--G); }
.sv-t { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2vw, 28px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.sv-t > .mono { color: var(--hot); } .sv-t q { font: 600 clamp(18px, 1.45vw, 22px)/1.25 var(--display); letter-spacing: -0.025em; quotes: "“" "”"; }
.sv-pass { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.sv-pass .ic { flex: 0 0 auto; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #C6FF3D; color: #0B0D1C; stroke-width: 2.6; }
.sv-more { margin: 26px 0 0; text-align: center; color: var(--muted); }
.sv-mk { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.sv-mk .h2 { margin-bottom: 18px; }
.sv-mlist { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sv-mlist li { display: grid; grid-template-columns: 44px minmax(150px, .8fr) 1.2fr; gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sv-mlist li .mono { color: var(--hot); } .sv-mlist li b { font: 600 clamp(17px, 1.3vw, 20px)/1.25 var(--display); letter-spacing: -0.02em; } .sv-mlist li > span:last-child { color: var(--muted); font-size: 15px; line-height: 1.5; }
.sv-get { gap: 18px; } .sv-get-p { margin: 0; max-width: 620px; color: rgba(246,245,249,.72); font-size: 17px; line-height: 1.6; }
.sv-get .cs2-form { width: min(760px, 100%); margin-top: 8px; }
.sv-get .cs2-form input { background: rgba(246,245,249,.08); border-color: rgba(246,245,249,.16); color: #F6F5F9; } .sv-get .cs2-form input::placeholder { color: rgba(246,245,249,.5); }
.sv-get .ok { color: #F6F5F9; }
.sv-note { margin: 22px auto 0; max-width: 900px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.65; } .sv-note b { color: var(--text); } .sv-note a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) { .sv-cats, .sv-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sv-acts { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .sv-ex, .sv-mk { grid-template-columns: 1fr; } .sv-hero .vp-art { height: 420px; } }
@media (max-width: 600px) { .sv-cats, .sv-tests { grid-template-columns: 1fr; } .sv-mlist li { grid-template-columns: 36px 1fr; } .sv-mlist li > span:last-child { grid-column: 2; } .sv-facts span { padding-right: 16px; } .sv-facts span + span { padding-left: 16px; } }
.rf-top { grid-template-columns: 1.3fr .7fr 1fr .8fr 1.1fr; }
@media (max-width: 1000px) { .rf-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rf-top { grid-template-columns: 1fr; } }
.cs2-more { margin-top: 16px; display: inline-flex; }
.sv-ex-copy .h2 { margin-bottom: 24px; }
.cs2-copy .cs2-more { width: fit-content; justify-self: start; align-self: start; }
@media (max-width: 600px) { .sv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sv-facts span { padding: 16px 10px 0 0 !important; font-size: 12.5px; } .sv-facts span + span { padding-left: 12px !important; } }

/* ================= Responsive pass (Nov 2026) ================= */
html, body { overflow-x: clip; }
@media (max-width: 900px) { .abh-img::after { left: 0; right: 0; } }
@media (max-width: 600px) {
  .ph-row .btns { flex-wrap: wrap; }
  .bt-code code { white-space: pre-wrap; word-break: break-word; font-size: 12px; }
  .rf-top { grid-template-columns: 1fr 1fr !important; gap: 34px 20px; } .rf-brand { grid-column: 1 / -1; }
  .rf-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .rh h1, .abh h1 { font-size: 40px; } .h2 { font-size: 36px; } }
/* Stacked hero (phones, portrait tablets): bigger tagline */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait), (max-height: 500px) {
  .hx h1 { font-size: clamp(34px, 5.4vw, 52px); }
}
/* Large screens and zoomed-out browsers (90% / 80%) */
@media (min-width: 1800px) {
  :root { --max: min(94vw, 2240px); }
  .h2 { font-size: clamp(40px, 5.6vw, 118px); }
  .sh p { font-size: 18px; max-width: 520px; }
  .hx h1 { font-size: clamp(32px, 3.1vw, 80px); }
  .hx-side.l { width: min(680px, 30vw) !important; }
  .hx-side.r { width: min(460px, 21vw); }
  .hx-proof b { font-size: clamp(18px, 1vw, 24px); }
  .hx-proof li > span:last-child > span { font-size: 15px; }
  .hx .btn { font-size: 16px; }
}
@media (min-width: 2100px) {
  .isl2 { --w: 420px; } .i-row { height: 64px; }
  .vp-p, .cs2-copy > p, .pt-copy p, .sv-q-p, .sv-ex-copy > p { font-size: 19px; }
}
@media (min-width: 901px) and (max-width: 1279px) and (orientation: landscape) { .hx-a .hx-port { height: min(76vh, 58vw); } .hx-side.r { width: min(300px, 25vw); } }
@media (min-width: 1800px) { .hx-a .hx-port { height: min(84vh, 1280px); } }
@media (max-width: 1100px) { .ph-row { grid-template-columns: 1fr; gap: 26px; } .ph-row .btns { flex-wrap: wrap; } }
/* Notch menu never runs off short screens */
.isl2.open .i-in { max-height: calc(100svh - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .isl2.open .i-in::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .i-nav a { padding: 6px 10px; font-size: 22px; } .i-ven a { padding: 4px 0; } .i-ven .i-fl { margin-top: 14px; } }
@media (max-height: 700px) and (min-width: 701px) { .i-nav a { padding: 5px 10px; font-size: 21px; } .i-ven .i-fl { margin-top: 14px; } }
@media (max-width: 900px) { .rh, .abh { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 400px) { .rh h1, .abh h1 { font-size: 38px !important; } }
@media (max-width: 480px) { .rh-proof { flex-wrap: wrap; row-gap: 10px; } }
/* SEO / a11y helpers */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
img { height: auto; }
/* ---------- Coming soon: library, blog, podcast ---------- */
.soon2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--G); }
.soon-c { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(26px, 2.6vw, 40px); border-radius: 30px; background: var(--card); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .3s; }
.soon-c::after { content: ""; position: absolute; right: -18%; bottom: -40%; width: 70%; height: 80%; border-radius: 50%; background: #3D2CFF; filter: blur(80px); opacity: .16; z-index: -1; }
.soon-c:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--text) 25%, transparent); }
.soon-c > .mono { color: var(--hot); } .soon-c > b { font: 600 clamp(28px, 2.6vw, 42px)/1.02 var(--display); letter-spacing: -0.04em; padding-bottom: .08em; } .soon-c p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 460px; }
.soon-c .tlink { justify-self: start; margin-top: 8px; }
.soon-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #0B0D1C; color: #C6FF3D; margin-bottom: 6px; } .soon-ic .ic { width: 22px; height: 22px; }
.soon-nl { margin-top: var(--G); }
.soon-hd { display: grid; gap: 14px; max-width: 820px; margin-bottom: var(--H); } .soon-hd .h2 { margin: 0; } .soon-hd p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 620px; }
.soon-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--line); }
.soon-l li { display: grid; grid-template-columns: 110px 1fr; gap: 4px 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.soon-l li .mono { grid-row: span 2; color: var(--hot); padding-top: 4px; } .soon-l li b { font: 600 clamp(17px, 1.3vw, 20px)/1.3 var(--display); letter-spacing: -0.02em; } .soon-l li span:last-child { color: var(--muted); font-size: 14.5px; }
.soon-rec { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; min-height: 420px; padding: 32px; border-radius: 28px; background: #0B0D1C; color: #F6F5F9; }
.soon-rec::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -60%; height: 100%; z-index: -1; background: var(--afterglow); filter: blur(70px); opacity: .5; }
.soon-rec .mono { color: rgba(246,245,249,.75); } .soon-rec b { font: 600 clamp(26px, 2.4vw, 38px)/1.05 var(--display); letter-spacing: -0.04em; } .soon-rec p { margin: 0; color: rgba(246,245,249,.72); line-height: 1.6; max-width: 440px; }
.rec-dot { position: absolute; top: 30px; left: 32px; width: 12px; height: 12px; border-radius: 50%; background: #FF4F8B; box-shadow: 0 0 0 0 rgba(255,79,139,.6); animation: recp 1.8s ease-out infinite; }
@keyframes recp { 0% { box-shadow: 0 0 0 0 rgba(255,79,139,.55); } 100% { box-shadow: 0 0 0 16px rgba(255,79,139,0); } }
@media (max-width: 900px) { .soon2, .soon-l { grid-template-columns: 1fr; } .soon-l li { grid-template-columns: 1fr; } .soon-l li .mono { grid-row: auto; } }
.az-form.sent .bt { opacity: .9; }
/* about hero: bigger portrait (bleeds into the hero's top and bottom space instead of being capped by the copy height) */
@media (min-width: 901px) {
  .abh-img { min-height: 0; }
  .abh-img img { position: absolute; left: 50%; bottom: calc(-1 * clamp(40px, 6vh, 80px)); transform: translateX(-50%); height: calc(100% + clamp(110px, 17vh, 190px)); width: auto; max-width: 116%; max-height: none; object-fit: contain; object-position: 50% 100%; }
  .abh-img::after { bottom: calc(-1 * clamp(40px, 6vh, 80px) - 1px); height: 26%; }
  .abh-glow { bottom: 6%; height: 80%; }
}

/* book a call: title, then the calendar in a themed frame with a white inside (looks right in light and dark) */
.bk7 { padding-top: clamp(130px, 15vh, 190px); padding-bottom: calc(var(--S, 120px) / 2); }
.bk7-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.bk7-head h1 { margin: 18px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 96px); letter-spacing: -0.05em; line-height: .98; }
.bk7-frame { position: relative; isolation: isolate; padding: clamp(8px, 1vw, 14px); border-radius: clamp(26px, 3vw, 40px); background: linear-gradient(150deg, rgba(61,44,255,.28), rgba(139,92,246,.10) 45%, rgba(255,79,139,.14)); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 50px 120px -50px rgba(61,44,255,.55), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-theme="light"] .bk7-frame { background: linear-gradient(150deg, rgba(61,44,255,.16), rgba(255,255,255,.7) 45%, rgba(255,79,139,.10)); box-shadow: 0 50px 110px -55px rgba(61,44,255,.45), inset 0 1px 0 #fff; }
.bk7-glow { position: absolute; inset: 10% 8% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(61,44,255,.45), transparent); filter: blur(50px); pointer-events: none; }
.bk7-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px clamp(8px, 1.2vw, 14px) clamp(10px, 1.1vw, 14px); }
.bk7-bar .mono { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk7-bar .mono i { width: 7px; height: 7px; border-radius: 50%; background: #C6FF3D; box-shadow: 0 0 0 4px rgba(198,255,61,.15); }
.bk7-in { position: relative; background: transparent; border-radius: clamp(20px, 2.2vw, 28px); overflow: hidden; padding: 0; box-shadow: 0 20px 40px -30px rgba(11,13,28,.5); }
.bk7-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); pointer-events: none; z-index: 1; }
.bcl-frame { display: block; width: 100%; min-height: 700px; border: 0; background: #fff; margin-bottom: -6px; }
.bcl-wait { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 64px 28px; color: #0B0D1C; }
.bcl-wait > .ic { width: 48px; height: 48px; color: #3D2CFF; }
.bcl-wait b { font-family: var(--display); font-size: 24px; letter-spacing: -0.03em; }
.bcl-hires { display: grid; grid-template-columns: 1fr 1fr; gap: var(--G, 16px); }
.bcl-hire { display: grid; gap: 10px; justify-items: start; align-content: start; padding: clamp(24px, 3vw, 40px); }
.bcl-hire h3 { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; }
.bcl-hire p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; max-width: 460px; }
.bcl-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--ink, #0B0D1C); color: #fff; margin-bottom: 6px; }
.bcl-ic .ic { width: 22px; height: 22px; }
@media (max-width: 700px) { .bcl-hires { grid-template-columns: 1fr; } .bcl-frame { min-height: 820px; } .bk7-head h1 { font-size: clamp(40px, 11vw, 56px); } .bk7-bar .mono:last-child { display: none; } }

/* hero: the button fits its text; MarTech stays visible on short screens */
.hx .btns { width: auto !important; align-items: flex-start !important; }
.hx .btns .btn { width: auto !important; justify-content: flex-start !important; }
@media (max-height: 700px) and (min-width: 901px) { .hx-proof li:nth-child(3) { display: flex !important; } .hx-proof li:nth-child(2) { border-bottom: 0 !important; } .hx-proof li { padding: 8px 0 !important; } }

/* loader: never flash it after the first visit of a session */
html.seen #loader { display: none !important; }

/* menu (island): headings clearly different from the links */
.i-ven { gap: 0 !important; }
.i-ven .mono { display: flex; align-items: center; gap: 8px; margin: 0 0 8px !important; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10.5px !important; letter-spacing: .14em !important; color: var(--im) !important; opacity: .75; }
.i-ven .mono::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ia, #C6FF3D); flex: none; }
.i-ven .i-fl { margin-top: 26px !important; }
.i-ven > a { padding: 5px 0 !important; color: var(--if) !important; font-size: 16.5px !important; font-weight: 500; letter-spacing: -0.01em; }
.i-ven > a:hover, .i-ven > a.cur { color: #FF8FB8 !important; }
@media (max-width: 700px), (max-height: 700px) { .i-ven .i-fl { margin-top: 18px !important; } .i-ven > a { padding: 4px 0 !important; } }

/* italic serif: never clip overhangs or descenders (gradient text and split headlines) */
.sw { overflow: visible !important; clip-path: inset(-0.6em -0.6em 0 -0.6em); padding: 0 .14em .3em .06em !important; margin: 0 -.14em -.3em -.06em !important; }
.gt, .gtw, .serif.gt, .serif.hot, .gt-split .gtw { padding-right: .14em; margin-right: -.14em; padding-left: .06em; margin-left: -.06em; padding-bottom: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .split:not(.in) .sw > span, .pre .hero-split .sw > span { transform: translateY(150%); }

/* ===================================================================== hero variants */
.hx { position: relative; height: max(100svh, 540px); overflow: hidden; isolation: isolate; }
.hx-glow { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hx-glow i { position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 9s ease-in-out infinite alternate; }
.hx-glow .g1 { left: 22%; width: 34%; height: 50%; bottom: -14%; background: #3D2CFF; opacity: .45; }
.hx-glow .g2 { left: 44%; width: 30%; height: 44%; bottom: -10%; background: #FF4F8B; opacity: .35; animation-direction: alternate-reverse; }
.hx-glow .g3 { left: 36%; width: 30%; height: 40%; top: 18%; background: #8B5CF6; opacity: .22; }
:root[data-theme="dark"] .hx-glow i { opacity: .55; }
.hx::after { content: ""; position: absolute; inset: auto 0 0 0; height: 18%; z-index: 2; background: linear-gradient(to top, var(--bg) 10%, transparent); pointer-events: none; }
/* name behind, with the intermittent glitch */
.hx-name { position: absolute; left: 0; right: 0; z-index: -1; padding: 0 var(--pad); pointer-events: none; }
.hx-word { display: inline-block; white-space: nowrap; line-height: .8; letter-spacing: -0.065em; background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 12%, transparent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitch 6s steps(1) infinite; }
.hx-word .stop { -webkit-text-fill-color: var(--text); }
.hx-word .ch { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; transform: translateY(60%); opacity: 0; transition: transform 1.3s var(--ease), opacity 1s; }
body:not(.pre) .hx-word .ch { transform: none; opacity: 1; }
@keyframes glitch { 0%, 88%, 100% { transform: none; filter: none; } 89% { transform: skewX(-7deg) translateX(6px); filter: drop-shadow(-3px 0 0 rgba(61,44,255,.55)) drop-shadow(3px 0 0 rgba(255,79,139,.45)); } 90% { transform: skewX(5deg) translateX(-4px); filter: blur(.6px); } 91% { transform: translateX(2px); filter: none; } 92% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-word { animation: none; } }
/* portrait: large, in front of the name */
.hx-port { position: absolute; left: 50%; bottom: 0; margin: 0; height: min(86vh, 940px); transform: translateX(-50%); z-index: 0; pointer-events: none; }
.hx-port img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 60px rgba(11,13,28,.35)); transition: opacity 1.2s .15s, transform 1.4s .15s var(--ease); }
.pre .hx-port img { opacity: 0; transform: translateY(10%) scale(.97); }
.hx h1 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.2vw, 56px); letter-spacing: -0.04em; line-height: 1; margin: 16px 0 18px; }
.hx h1 .serif { font-size: 1.06em; }
.hx p { margin: 0 0 26px; color: var(--muted); line-height: 1.6; font-size: 16px; }
/* proof cards (shared) */
.hx-card { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; background: color-mix(in srgb, var(--bg-2) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--line); box-shadow: 0 20px 44px -26px rgba(11,13,28,.45); transition: transform .45s var(--ease), border-color .3s; color: var(--text); }
a.hx-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.hx-ct { display: grid; gap: 3px; } .hx-ct b { font: 600 17px/1.1 var(--display); letter-spacing: -0.02em; } .hx-ct span { font-size: 12.5px; color: var(--muted); }
.hx-badge { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 6px; box-shadow: inset 0 0 0 1px rgba(11,13,28,.06); }
.hx-badge img { width: 100%; height: 100%; object-fit: contain; }
.hx-plqs { display: flex; flex: 0 0 auto; height: 58px; padding-left: 4px; }
.hx-plqs .plq { width: 38px; height: 50px; margin-left: -12px; filter: drop-shadow(0 6px 10px rgba(6,12,30,.35)); }
.hx-plqs .plq:first-child { margin-left: 0; transform: rotate(-8deg); } .hx-plqs .plq:last-child { transform: rotate(8deg); }
.hx-plqs .plq svg rect:first-of-type { filter: none; }
.hx-stat { display: grid; gap: 4px; padding: 16px 20px; } .hx-stat b { font: 600 clamp(22px, 1.9vw, 30px)/1 var(--display); letter-spacing: -0.04em; } .hx-stat span { font-size: 12.5px; color: var(--muted); }
.hx-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 8px; color: var(--muted); }
.hx-cue i { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid currentColor; position: relative; }
.hx-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: cue 1.8s var(--ease) infinite; }

/* ---------- A: centre stage ---------- */
.hx-a .hx-name { top: clamp(78px, 12vh, 130px); text-align: center; }
.hx-side { position: absolute; bottom: clamp(20px, 5vh, 56px); z-index: 3; }
.hx-side.l { left: var(--pad); width: min(400px, 27vw); }
.hx-side.r { right: var(--pad); width: min(330px, 24vw); display: grid; gap: 12px; }
.hx-a .hx-port { height: min(82vh, 900px); }

/* ---------- small and short screens ---------- */
@media (max-height: 700px) and (min-width: 901px) { .hx-side.r .hx-card:nth-child(3) { display: none; } .hx-cue { display: none; } .hx .btns { gap: 8px 14px; } .hx h1 { margin: 10px 0 14px; } }
@media (max-height: 760px) and (min-width: 901px) { .hx h1 { font-size: clamp(30px, 2.8vw, 44px); } .hx p { font-size: 15px; margin-bottom: 20px; } .hx-card { padding: 9px 14px 9px 9px; } .hx-badge { width: 44px; height: 44px; } .hx-plqs { height: 48px; } .hx-plqs .plq { width: 32px; height: 42px; } }
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait), (max-height: 500px) {
  .hx { height: auto; min-height: 0; padding: 96px 0 0; display: flex; flex-direction: column; }
  .hx::after { display: none; }
  .hx-name, .hx-a .hx-name { position: relative; top: auto; transform: none; text-align: center; order: 1; }
  .hx-port, .hx-a .hx-port { position: relative; left: auto; transform: none !important; order: 2; height: min(62vh, 560px); margin: -9vw auto 0; display: flex; justify-content: center; }
  .hx-side, .hx-side.l, .hx-side.r { position: relative; inset: auto; transform: none; width: auto; padding: 0 var(--pad); order: 3; margin-top: 28px; }
  .hx-side.r { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hx-cue { display: none; }
}