@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --ink: #090b14;
  --ink-2: #111522;
  --paper: #f4f2ee;
  --paper-2: #ebe8e2;
  --white: #f8f8f6;
  --muted: #9ca3b5;
  --muted-dark: #666b77;
  --violet: #7258ff;
  --violet-2: #9d8aff;
  --blue: #3b9dff;
  --amber: #f3b65b;
  --line: rgba(255,255,255,.12);
  --line-dark: rgba(8,10,18,.12);
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.section-dark { background: var(--ink); color: var(--white); }
.section-light { background: var(--paper); color: var(--ink); }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; padding: 10px 14px; border-radius: 8px; background: white; color: black; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.noise { position: fixed; inset: 0; z-index: 80; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; z-index: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(110,82,255,.10), transparent 64%); pointer-events: none; transform: translate3d(-1000px,-1000px,0); }

.site-header { position: fixed; z-index: 70; top: 0; left: 0; right: 0; border-bottom: 1px solid transparent; transition: .35s ease; }
.site-header.scrolled { background: rgba(7,9,18,.82); backdrop-filter: blur(20px); border-color: rgba(255,255,255,.08); }
.nav { height: 78px; display: flex; align-items: center; gap: 38px; }
.brand img { width: 178px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a { position: relative; color: #b9bdc9; font-size: 14px; transition: color .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--violet-2); transition: right .25s ease; }
.nav-links a:hover, .nav-links a.active { color: white; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.nav-cta { padding: 11px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 13px; transition: .25s ease; }
.nav-cta:hover { background: white; color: var(--ink); transform: translateY(-2px); }
.nav-cta span { margin-left: 9px; }
.menu-toggle { display: none; background: none; border: 0; color: white; }

.hero { position: relative; min-height: 920px; height: 100svh; overflow: hidden; display: grid; align-items: center; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #070912 4%, rgba(7,9,18,.92) 31%, rgba(7,9,18,.2) 72%, rgba(7,9,18,.45)); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; z-index: -1; background: linear-gradient(transparent, #090b14); }
.hero-art { position: absolute; z-index: -2; inset: 0; background: url("assets/contractpilot-hero.png") center/cover no-repeat; transform: scale(1.04); animation: heroDrift 13s ease-in-out infinite alternate; }
@keyframes heroDrift { to { transform: scale(1.08) translate3d(-1%,1%,0); } }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding-top: 72px; }
.hero-copy { max-width: 720px; position: relative; z-index: 2; }
.eyebrow, .kicker { margin: 0 0 24px; text-transform: uppercase; letter-spacing: .19em; font: 600 11px/1 "Manrope", sans-serif; }
.eyebrow { color: #bdc4d2; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 36px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.hero h1 { margin: 0; max-width: 760px; letter-spacing: -.06em; font: 500 clamp(58px, 7vw, 104px)/.94 "Manrope", sans-serif; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #8cbfff, #9984ff 52%, #f4c37a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { max-width: 640px; margin: 32px 0 0; color: #b8bdca; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 54px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: transform .25s ease, box-shadow .25s ease; }
.button-primary { background: linear-gradient(110deg, #6c55ff, #5b87ff); color: white; box-shadow: 0 14px 42px rgba(91,81,255,.28); }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(91,81,255,.4); }
.text-link { color: #d4d7df; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.3); padding: 12px 2px; }
.text-link span { margin-left: 8px; }
.hero-proof { display: flex; gap: 26px; margin-top: 58px; color: #8d95a7; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.hero-proof span { display: flex; gap: 8px; align-items: center; }
.hero-proof i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet-2); box-shadow: 0 0 10px var(--violet); }
.hero-orbit { position: relative; height: 600px; pointer-events: none; }
.orbit-card { position: absolute; width: 176px; padding: 15px 16px; border: 1px solid rgba(255,255,255,.17); border-radius: 15px; background: rgba(10,13,25,.58); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.25); animation: float 5s ease-in-out infinite; }
.orbit-card span { display: block; color: #80899c; font: 600 9px "Manrope"; letter-spacing: .15em; }
.orbit-card b { display: block; margin-top: 9px; font: 600 13px "Manrope"; }
.orbit-card small { display: block; margin-top: 5px; color: #98a0af; font-size: 10px; }
.orbit-card-a { top: 18%; left: 12%; }
.orbit-card-b { top: 48%; right: -5%; animation-delay: -2s; }
.orbit-card-c { bottom: 8%; left: 24%; animation-delay: -3.5s; }
@keyframes float { 50% { transform: translateY(-12px); } }
.scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 11px; color: #797f90; text-transform: uppercase; font-size: 9px; letter-spacing: .22em; }
.scroll-cue span { display: block; width: 1px; height: 38px; background: linear-gradient(transparent, white); animation: pulseLine 1.8s ease-in-out infinite; }
@keyframes pulseLine { 50% { opacity: .3; transform: scaleY(.7); transform-origin: bottom; } }

.signal-strip { overflow: hidden; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); background: #0c0f19; }
.marquee-track { display: flex; width: max-content; gap: 30px; align-items: center; padding: 19px 0; animation: marquee 36s linear infinite; }
.marquee span { color: #afb4c0; font: 500 11px "Manrope"; letter-spacing: .16em; }
.marquee b { color: var(--violet-2); font-size: 8px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.problem { padding: 150px 0 160px; }
.section-heading { max-width: 920px; }
.section-heading .kicker, .kicker { color: #726c62; }
.section-heading h2 { margin: 0; letter-spacing: -.055em; font: 500 clamp(44px, 6vw, 82px)/1 "Manrope"; }
.section-heading h2 span { color: #8b867e; }
.section-heading.inverse .kicker, .video-heading .kicker, .final-cta .kicker { color: var(--violet-2); }
.section-heading.inverse h2 span, .video-heading h2 span, .final-cta h2 span { color: #8e82ff; }
.problem-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; margin-top: 90px; align-items: center; }
.problem-item { display: grid; grid-template-columns: 45px 1fr; gap: 18px; padding: 25px 0; border-top: 1px solid var(--line-dark); opacity: .48; cursor: default; transition: opacity .3s, transform .3s; }
.problem-item:last-child { border-bottom: 1px solid var(--line-dark); }
.problem-item.is-active, .problem-item:hover { opacity: 1; transform: translateX(10px); }
.problem-item > span { color: var(--violet); font: 600 10px "Manrope"; }
.problem-item h3 { margin: 0 0 8px; font: 600 20px "Manrope"; letter-spacing: -.025em; }
.problem-item p { margin: 0; color: var(--muted-dark); font-size: 14px; line-height: 1.55; }
.solution-visual { position: relative; min-height: 590px; display: grid; align-items: center; }
.solution-glow { position: absolute; inset: 15% 0; border-radius: 50%; background: radial-gradient(circle, rgba(113,84,255,.22), rgba(53,147,255,.08) 42%, transparent 68%); filter: blur(20px); }
.solution-window { position: relative; overflow: hidden; border-radius: 24px; background: #0b0e19; color: white; box-shadow: 0 50px 90px rgba(27,20,64,.25); transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); }
.window-top { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: #111522; }
.window-top i { width: 7px; height: 7px; border-radius: 50%; background: #353a48; }
.window-top span { margin-left: auto; color: #646c7c; font-size: 9px; letter-spacing: .16em; }
.contract-head { display: flex; justify-content: space-between; align-items: center; padding: 30px 34px 24px; }
.contract-head small { color: #777f90; font-size: 9px; letter-spacing: .16em; }
.contract-head h3 { margin: 8px 0 0; font: 500 23px "Manrope"; }
.status { padding: 8px 13px; border: 1px solid rgba(86,218,166,.3); background: rgba(86,218,166,.08); color: #6be2b4; border-radius: 999px; font-size: 10px; }
.connection-map { position: relative; height: 390px; margin: 0 26px 26px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: radial-gradient(circle at center, rgba(113,84,255,.12), transparent 46%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; }
.connection-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.connection-map path { fill: none; stroke: rgba(128,106,255,.42); stroke-width: 1.5; stroke-dasharray: 5 7; animation: dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -140; } }
.map-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 94px; height: 70px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(17,21,34,.88); box-shadow: 0 15px 40px rgba(0,0,0,.35); }
.map-node b { font: 600 18px "Manrope"; }
.map-node small { color: #8f96a7; font-size: 9px; }
.map-node.center { left: 50%; top: 50%; width: 116px; height: 90px; transform: translate(-50%,-50%); border-color: rgba(126,99,255,.55); box-shadow: 0 0 50px rgba(109,80,255,.22); }
.map-node.center b { color: #a99bff; }
.map-node.n1 { left: 7%; top: 10%; }.map-node.n2 { right: 6%; top: 9%; }.map-node.n3 { left: 6%; bottom: 7%; }.map-node.n4 { right: 5%; bottom: 7%; }

.process { padding: 150px 0; position: relative; overflow: hidden; }
.process::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 8%, rgba(104,77,255,.14), transparent 33%); }
.section-heading.inverse { position: relative; max-width: 920px; }
.section-heading.inverse > p:last-child { max-width: 650px; margin: 26px 0 0; color: #969dac; font-size: 17px; line-height: 1.65; }
.process-line { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; margin-top: 105px; }
.process-progress { display: none; }
.process-step { position: relative; z-index: 1; }
.process-step:not(:last-of-type)::after { content: ""; position: absolute; z-index: -1; top: 65px; left: 58px; width: calc(100% - 40px); height: 1px; background: linear-gradient(90deg,var(--blue),var(--violet-2)); transform: scaleX(0); transform-origin: left center; transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.process-line.in-view .process-step:not(:last-of-type)::after { transform: scaleX(1); }
.process-line.in-view .process-step:nth-of-type(2)::after { transition-delay: .16s; }.process-line.in-view .process-step:nth-of-type(3)::after { transition-delay: .32s; }.process-line.in-view .process-step:nth-of-type(4)::after { transition-delay: .48s; }
.process-step > span { color: #626979; font: 600 10px "Manrope"; }
.step-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 25px 0 28px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #111522; color: var(--violet-2); box-shadow: 0 0 0 8px #090b14; font-size: 20px; }
.process-step h3 { margin: 0 0 12px; font: 600 18px "Manrope"; }
.process-step p { margin: 0; color: #878e9e; font-size: 13px; line-height: 1.55; }
.audience-grid { display: grid; grid-template-columns: 1.45fr repeat(3,1fr); margin-top: 150px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.audience-grid > * { min-height: 260px; padding: 35px 28px; border-right: 1px solid var(--line); }
.audience-grid > *:last-child { border: 0; }
.audience-intro { padding-left: 0 !important; }
.audience-intro h3 { margin: 0; font: 500 26px/1.25 "Manrope"; letter-spacing: -.035em; }
.audience-grid article span { color: var(--violet-2); font: 600 10px "Manrope"; }
.audience-grid h4 { margin: 75px 0 10px; font: 600 17px "Manrope"; }
.audience-grid article p { margin: 0; color: #858c9c; font-size: 13px; line-height: 1.55; }

.product { padding: 150px 0; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.product-stage { margin-top: 80px; }
.product-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.product-tabs button { border: 1px solid var(--line-dark); border-radius: 999px; padding: 11px 20px; background: transparent; color: #6d6c70; cursor: pointer; transition: .25s ease; }
.product-tabs button[aria-selected="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.product-panel { position: relative; overflow: hidden; border: 1px solid rgba(13,15,26,.13); border-radius: 24px; background: #0d1019; box-shadow: 0 38px 90px rgba(25,20,55,.18); }
.browser-chrome { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 18px; background: #151926; }
.browser-chrome span { width: 8px; height: 8px; border-radius: 50%; background: #3c4150; }
.browser-chrome small { margin: auto; color: #626a7a; font-size: 9px; letter-spacing: .12em; }
.product-panel > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: opacity .25s ease, transform .7s ease; }
.product-panel.changing > img { opacity: .25; transform: scale(.985); }
.product-caption { position: absolute; left: 26px; right: 26px; bottom: 26px; display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: end; max-width: 620px; padding: 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(8,10,18,.78); color: white; backdrop-filter: blur(15px); }
.product-caption > span { color: #767e8e; font: 600 10px "Manrope"; }
.product-caption h3 { margin: 0 0 7px; font: 600 20px "Manrope"; }
.product-caption p { margin: 0; color: #a3a9b6; font-size: 12px; line-height: 1.5; }
.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 80px; }
.feature-card { position: relative; min-height: 315px; padding: 28px; border: 1px solid var(--line-dark); border-radius: 19px; overflow: hidden; transition: transform .3s ease, background .3s ease; }
.feature-card::after { content: ""; position: absolute; width: 140px; height: 140px; right: -70px; bottom: -70px; border-radius: 50%; background: radial-gradient(circle, rgba(112,83,255,.18), transparent 68%); }
.feature-card:hover { transform: translateY(-8px); background: #faf9f6; }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 12px; color: var(--violet); }
.feature-card h3 { margin: 75px 0 10px; font: 600 18px "Manrope"; }
.feature-card p { margin: 0; color: var(--muted-dark); font-size: 13px; line-height: 1.55; }
.feature-card > span { position: absolute; left: 28px; bottom: 25px; color: #807b72; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }

.video-section { padding: 150px 0; }
.video-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; }
.video-heading h2 { margin: 0; letter-spacing: -.055em; font: 500 clamp(48px, 6vw, 82px)/1 "Manrope"; }
.video-heading > p { margin: 0 0 8px; color: #9299a8; font-size: 16px; line-height: 1.65; }
.video-frame { position: relative; margin-top: 75px; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,.4); }
.video-frame video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.video-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,9,18,.55), transparent 48%); transition: opacity .3s; }
.video-frame.playing::after { opacity: 0; }
.video-play { position: absolute; z-index: 2; inset: 50% auto auto 50%; transform: translate(-50%,-50%); display: grid; grid-template-columns: 62px auto; grid-template-rows: 1fr 1fr; column-gap: 17px; align-items: center; border: 0; background: none; color: white; cursor: pointer; text-align: left; }
.video-play > span { grid-row: 1/3; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); transition: .25s ease; }
.video-play:hover > span { transform: scale(1.1); background: white; color: var(--ink); }
.video-play b { align-self: end; font: 600 17px "Manrope"; }
.video-play small { align-self: start; color: #a5acbb; font-size: 10px; margin-top: 4px; }
.video-frame.playing .video-play, .video-frame.playing .video-meta { opacity: 0; pointer-events: none; }
.video-meta { position: absolute; z-index: 2; left: 30px; bottom: 28px; display: grid; grid-template-columns: 34px auto; column-gap: 13px; transition: opacity .3s; }
.video-meta span { grid-row: 1/3; color: var(--violet-2); font: 600 11px "Manrope"; }
.video-meta p { margin: 0; font: 600 13px "Manrope"; }.video-meta small { color: #8c94a4; font-size: 9px; }

.outcomes { padding: 150px 0; }
.outcome-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 80px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.outcome-grid article { min-height: 290px; padding: 28px; border-right: 1px solid var(--line-dark); }
.outcome-grid article:last-child { border: 0; }
.outcome-grid strong { color: var(--violet); font: 600 10px "Manrope"; }
.outcome-grid h3 { margin: 105px 0 12px; font: 600 18px "Manrope"; }
.outcome-grid p { margin: 0; color: var(--muted-dark); font-size: 13px; line-height: 1.6; }

.final-cta { position: relative; overflow: hidden; text-align: center; padding: 170px 0; }
.final-cta .shell { position: relative; z-index: 1; }
.final-cta h2 { margin: 0; letter-spacing: -.06em; font: 500 clamp(58px, 8vw, 104px)/.94 "Manrope"; }
.final-cta > .shell > p:not(.kicker) { max-width: 650px; margin: 30px auto 0; color: #9da3b1; font-size: 17px; line-height: 1.65; }
.button-large { min-height: 62px; margin-top: 38px; padding-inline: 30px; }
.cta-orb { position: absolute; width: 850px; height: 850px; left: 50%; bottom: -650px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 20%, rgba(129,100,255,.55), rgba(59,157,255,.15) 34%, transparent 68%); filter: blur(12px); }
.footer { border-top: 1px solid var(--line); }
.footer-inner { min-height: 150px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: #747c8e; font-size: 12px; }
.footer-inner p { text-align: center; }.footer-inner > div { display: flex; justify-content: flex-end; gap: 22px; }.footer-inner a:hover { color: white; }

/* Product-led, human-centered landing sections */
.hero-human { min-height: 880px; }
.hero-human::before { z-index: -1; background: linear-gradient(90deg, #070912 0%, rgba(7,9,18,.98) 35%, rgba(7,9,18,.64) 61%, rgba(7,9,18,.24) 100%); }
.hero-human::after { z-index: -1; height: 250px; background: linear-gradient(transparent, #090b14); }
.hero-photo { position: absolute; z-index: -2; inset: 0 0 0 41%; overflow: hidden; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #070912 0%, transparent 34%), linear-gradient(0deg, rgba(7,9,18,.65), transparent 45%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(.82) contrast(1.04); }
.hero-human .hero-grid { grid-template-columns: .94fr 1.06fr; gap: 45px; }
.hero-human .hero-copy { padding-top: 20px; }
.hero-human h1 { font-size: clamp(54px, 5.8vw, 84px); line-height: .98; }
.hero-video-card { position: relative; align-self: end; width: 670px; max-width: 100%; margin: 0 -90px 18px auto; overflow: visible; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: #101522; box-shadow: 0 35px 85px rgba(0,0,0,.48); transform: perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.hero-video-card.video-frame { margin-top: 0; overflow: visible; }
.hero-video-card .browser-chrome { position: relative; z-index: 3; border-radius: 18px 18px 0 0; }
.hero-video-card video { width: 100%; aspect-ratio: 16/9; border-radius: 0 0 18px 18px; background: #05070d; object-fit: cover; }
.hero-video-card.video-frame::after { inset: 38px 0 0; border-radius: 0 0 18px 18px; }
.hero-video-card .video-play { top: calc(50% + 19px); }
.hero-video-card.playing { animation-play-state: paused; }
.hero-video-card.playing .hero-status-card { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hero-status-card { position: absolute; right: -22px; bottom: -34px; width: 245px; padding: 17px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(10,13,24,.9); backdrop-filter: blur(15px); box-shadow: 0 18px 45px rgba(0,0,0,.4); }
.hero-status-card { transition: opacity .25s ease, transform .25s ease; }
.hero-status-card span { display: block; color: var(--violet-2); font: 600 8px "Manrope"; letter-spacing: .16em; }
.hero-status-card b { display: block; margin-top: 8px; font: 600 14px "Manrope"; }
.hero-status-card small { display: block; margin-top: 6px; color: #9299aa; font-size: 9px; }

.promise-strip { padding: 74px 0; border-bottom: 1px solid var(--line-dark); }
.promise-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.promise-grid article { min-height: 190px; padding: 8px 38px; border-right: 1px solid var(--line-dark); }
.promise-grid article:first-child { padding-left: 0; }.promise-grid article:last-child { padding-right: 0; border: 0; }
.promise-grid strong { color: var(--violet); font: 600 10px "Manrope"; }
.promise-grid h2 { margin: 30px 0 10px; max-width: 310px; font: 600 22px/1.2 "Manrope"; letter-spacing: -.035em; }
.promise-grid p { margin: 0; color: var(--muted-dark); font-size: 13px; line-height: 1.6; }

.product-stories { padding: 150px 0 80px; }
.story-row { display: grid; grid-template-columns: .74fr 1.26fr; gap: 76px; align-items: center; margin-top: 145px; }
.story-row-reverse { grid-template-columns: 1.25fr .75fr; }
.story-row-reverse .story-copy { order: 2; }.story-row-reverse .story-photo-stack { order: 1; }
.story-number { display: block; margin-bottom: 25px; color: var(--violet); font: 600 10px "Manrope"; letter-spacing: .15em; }
.story-copy h3 { margin: 0; font: 600 clamp(34px,4vw,55px)/1.05 "Manrope"; letter-spacing: -.05em; }
.story-copy > p { margin: 24px 0 0; color: var(--muted-dark); font-size: 16px; line-height: 1.68; }
.story-copy ul { list-style: none; margin: 27px 0 0; padding: 0; }
.story-copy li { position: relative; padding: 11px 0 11px 29px; border-top: 1px solid var(--line-dark); color: #32343b; font-size: 13px; }
.story-copy li:last-child { border-bottom: 1px solid var(--line-dark); }
.story-copy li::before { content: "✓"; position: absolute; left: 2px; color: var(--violet); font-weight: 700; }
.story-media, .story-photo-stack { position: relative; }
.product-shot { border-radius: 22px; overflow: visible; background: #101522; box-shadow: 0 36px 80px rgba(37,25,77,.2); }
.product-shot .browser-chrome { border-radius: 22px 22px 0 0; }
.product-shot > img { width: 100%; border-radius: 0 0 22px 22px; }
.shot-callout { position: absolute; right: -25px; bottom: -35px; width: 230px; padding: 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: #111522; color: white; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.shot-callout b, .shot-callout span { display: block; }.shot-callout b { font: 600 13px "Manrope"; }.shot-callout span { margin-top: 6px; color: #9299a9; font-size: 9px; }
.shot-callout::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.shot-callout-green::before { background: #62d5a7; box-shadow: 0 0 12px #62d5a7; }
.story-photo-stack > img { width: 100%; min-height: 470px; object-fit: cover; border-radius: 22px; box-shadow: 0 35px 75px rgba(22,27,39,.18); }
.floating-screen { position: absolute; width: 66%; right: -22px; bottom: -46px; padding: 7px; border-radius: 13px; background: #0e121d; box-shadow: 0 25px 65px rgba(0,0,0,.35); transform: rotate(1.5deg); }
.floating-screen img { width: 100%; border-radius: 9px; }

.interactive-shot { cursor: zoom-in; }
.interactive-shot::after { content: "NAGYÍTÁS +"; position: absolute; z-index: 5; top: 13px; right: 13px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(8,11,20,.8); color: #fff; opacity: 0; transform: translateY(-4px); backdrop-filter: blur(12px); font: 700 7px/1 "Manrope"; letter-spacing: .12em; transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.interactive-shot:hover::after, .interactive-shot:focus-within::after { opacity: 1; transform: translateY(0); }
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.float-shot { --shot-base: translateZ(0); animation: screenshot-float 6s ease-in-out infinite; will-change: transform; }
.hero-video-card.float-shot { --shot-base: perspective(1200px) rotateY(-4deg) rotateX(1deg); animation-duration: 7s; }
.product-shot.float-shot:nth-child(2n) { animation-delay: -2.2s; }
.floating-screen.float-shot { --shot-base: rotate(1.5deg); animation-delay: -3s; animation-duration: 5.5s; }
.float-shot:hover, .float-shot:focus-within { animation-play-state: paused; }
.product-panel.interactive-shot { transition: transform .35s ease, box-shadow .35s ease; }
.product-panel.interactive-shot:hover { transform: translateY(-6px); box-shadow: 0 46px 100px rgba(25,20,55,.24); }
@keyframes screenshot-float { 0%,100% { transform: var(--shot-base) translateY(0); } 50% { transform: var(--shot-base) translateY(-10px); } }

.comparison { padding: 155px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.comparison-heading { display: grid; grid-template-columns: 1.12fr .88fr; gap: 90px; align-items: end; }
.comparison-heading h2 { margin: 0; font: 600 clamp(46px,5.7vw,76px)/1 "Manrope"; letter-spacing: -.055em; }
.comparison-heading h2 span { color: var(--violet); }
.comparison-heading > p { margin: 0 0 5px; color: var(--muted-dark); font-size: 17px; line-height: 1.7; }
.comparison-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 70px; }
.comparison-product { position: relative; display: flex; gap: 16px; align-items: center; min-height: 104px; padding: 20px; border: 1px solid var(--line-dark); border-radius: 18px; background: rgba(255,255,255,.45); }
.comparison-product.is-contractpilot { border-color: rgba(113,84,255,.34); background: linear-gradient(135deg,rgba(113,84,255,.11),rgba(255,255,255,.72)); box-shadow: 0 18px 45px rgba(49,36,100,.1); }
.product-mark { display: grid; flex: 0 0 auto; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(12,15,25,.07); border-radius: 15px; background: rgba(255,255,255,.9); box-shadow: 0 8px 22px rgba(22,18,47,.08); }
.product-mark img { width: 29px; height: 29px; object-fit: contain; }
.asana-mark { background: linear-gradient(145deg,#fff,#fff5f4); }.clickup-mark { background: linear-gradient(145deg,#fff,#f7f3ff); }.cp-mark { width: 76px; border-color: rgba(126,97,255,.22); background: linear-gradient(145deg,#111522,#1a1e31); }
.cp-mark img { width: 66px; height: auto; }
.comparison-product h3 { margin: 0; font: 600 18px "Manrope"; }.comparison-product p { margin: 5px 0 0; color: var(--muted-dark); font-size: 11px; }
.comparison-product > small { position: absolute; top: 10px; right: 12px; color: var(--violet); font: 700 7px "Manrope"; letter-spacing: .12em; }
.comparison-table-wrap { overflow: hidden; margin-top: 22px; border: 1px solid var(--line-dark); border-radius: 22px; background: rgba(255,255,255,.62); box-shadow: 0 24px 60px rgba(24,18,52,.07); }
.comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.comparison-table th, .comparison-table td { padding: 21px 20px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); text-align: left; vertical-align: middle; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-table thead th { background: rgba(9,11,20,.035); color: #777a84; font: 700 9px "Manrope"; letter-spacing: .12em; text-transform: uppercase; }
.comparison-table thead th:first-child { width: 24%; color: #2a2d34; }.comparison-table tbody th { color: #20232a; font: 600 13px/1.35 "Manrope"; }
.comparison-table td { color: #686b75; font-size: 12px; line-height: 1.45; }
.comparison-table .cp-column { background: rgba(113,84,255,.07); color: #29213f; }
.compare-check, .compare-dot, .compare-route { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; }
.compare-check { background: rgba(78,190,143,.13); color: #21845f; font-weight: 800; }.compare-dot { color: #a3a5ad; font-size: 8px; }.compare-dot.strong { color: var(--violet); }.compare-route { background: rgba(15,18,30,.06); color: #7b7e88; font-size: 11px; }
.comparison-note { max-width: 900px; margin: 20px auto 0; color: #8b8d95; font-size: 10px; line-height: 1.6; text-align: center; }

.image-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 24px; border: 0; background: rgba(4,6,12,.96); color: white; overflow: hidden; }
.image-lightbox[open] { display: grid; place-items: center; animation: lightbox-in .22s ease both; }
.image-lightbox::backdrop { background: rgba(4,6,12,.86); backdrop-filter: blur(14px); }
.image-lightbox figure { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 14px; width: 100%; height: 100%; margin: 0; place-items: center; }
.image-lightbox img { width: auto; max-width: calc(100vw - 48px); height: auto; max-height: calc(100dvh - 92px); object-fit: contain; border-radius: 12px; box-shadow: 0 28px 90px rgba(0,0,0,.55); }
.image-lightbox figcaption { color: #b2b7c5; font: 500 12px/1.3 "Manrope"; text-align: center; }
.lightbox-close { position: fixed; z-index: 2; top: 20px; right: 22px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(17,21,34,.76); color: white; font: 300 30px/1 "Manrope"; cursor: pointer; backdrop-filter: blur(12px); transition: transform .2s ease, background .2s ease; }
.lightbox-close:hover { transform: rotate(8deg) scale(1.06); background: rgba(113,84,255,.85); }
.lightbox-open { overflow: hidden; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.integrations { overflow: hidden; padding: 150px 0 120px; }
.integration-heading { max-width: 900px; text-align: center; }
.integration-heading h2 { margin: 0; font: 600 clamp(46px,6vw,78px)/1 "Manrope"; letter-spacing: -.055em; }
.integration-heading h2 span { color: var(--violet); }
.integration-heading > p:not(.kicker) { max-width: 760px; margin: 30px auto 0; color: var(--muted-dark); font-size: 17px; line-height: 1.65; }
.integration-marquee { position: relative; display: block; width: 100%; min-height: 116px; margin-top: 75px; -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image: linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.marquee-row { display: flex; width: max-content; animation: integrations-scroll 52s linear infinite; will-change: transform; }
.marquee-track { display: flex; flex-shrink: 0; gap: 18px; padding-right: 18px; }
.integration-marquee:hover .marquee-row, .integration-marquee:focus-within .marquee-row { animation-play-state: paused; }
.logo-tile { position: relative; display: grid; grid-template-rows: 58px auto; place-items: center; gap: 12px; width: 142px; min-height: 116px; padding: 18px 14px 14px; border: 1px solid rgba(14,17,30,.08); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(28,24,53,.055); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.logo-tile:hover { z-index: 2; transform: translateY(-5px) scale(1.025); border-color: rgba(113,84,255,.28); box-shadow: 0 16px 38px rgba(39,27,88,.12); }
.logo-tile img { width: 56px; height: 56px; object-fit: contain; }
.logo-tile span { overflow: hidden; width: 100%; color: #515464; font: 600 10px/1.2 "Manrope"; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.logo-tile.planned { border-style: dashed; background: rgba(255,255,255,.5); }
.logo-tile.planned::after { content: "ELŐKÉSZÍTETT"; position: absolute; top: 8px; right: 8px; color: #9a7a42; font: 700 5px/1 "Manrope"; letter-spacing: .08em; }
.logo-tile.discuss::after { content: "EGYEZTETHETŐ"; }
.logo-tile.nav-tile img { width: 76px; height: 54px; }
.integration-footer { display: grid; gap: 16px; justify-items: center; margin-top: 42px; text-align: center; }
.integration-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; color: #60636f; font: 600 9px "Manrope"; letter-spacing: .08em; text-transform: uppercase; }
.integration-status span { display: flex; gap: 7px; align-items: center; }.integration-status i { width: 7px; height: 7px; border-radius: 50%; background: #45b98f; box-shadow: 0 0 0 4px rgba(69,185,143,.1); }.integration-status .planned i { background: #c39a56; box-shadow: 0 0 0 4px rgba(195,154,86,.1); }
.integration-note { max-width: 850px; margin: 0; color: #858792; font-size: 10px; line-height: 1.6; }
@keyframes integrations-scroll { to { transform: translateX(-50%); } }

.club-callout { padding: 150px 0; }
.club-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 80px; align-items: center; }
.club-photo { position: relative; }.club-photo > img { width: 100%; min-height: 590px; object-fit: cover; border-radius: 24px; box-shadow: 0 34px 80px rgba(44,31,67,.16); }
.club-badge { position: absolute; left: 25px; bottom: 25px; padding: 18px 20px; border-radius: 15px; background: rgba(9,11,20,.86); color: white; backdrop-filter: blur(15px); }.club-badge b,.club-badge span { display: block; }.club-badge b { font: 600 13px "Manrope"; }.club-badge span { margin-top: 6px; color: #a0a7b5; font-size: 9px; }
.club-copy h2 { margin: 0; font: 600 clamp(38px,4.4vw,62px)/1.04 "Manrope"; letter-spacing: -.052em; }.club-copy > p:not(.kicker) { margin: 26px 0 0; color: var(--muted-dark); font-size: 16px; line-height: 1.68; }
.club-points { display: grid; gap: 14px; margin-top: 30px; color: #35373d; font-size: 13px; }.club-points span { display: flex; gap: 12px; align-items: center; }.club-points i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(113,84,255,.1); color: var(--violet); font-style: normal; font-size: 10px; }
.button-dark { margin-top: 35px; background: var(--ink); color: white; }.button-dark:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(9,11,20,.22); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }.delay-2 { transition-delay: .2s; }.delay-3 { transition-delay: .3s; }.delay-4 { transition-delay: .4s; }

@media (max-width: 960px) {
  :root { --shell: min(100% - 34px, 760px); }
  .nav-links { position: fixed; inset: 78px 0 0; display: flex; flex-direction: column; align-items: flex-start; padding: 60px 30px; background: rgba(7,9,18,.98); transform: translateX(100%); transition: transform .35s ease; }
  .nav-links a { font: 500 28px "Manrope"; }.menu-open .nav-links { transform: translateX(0); }
  .menu-toggle { display: grid; gap: 6px; margin-left: auto; padding: 10px; }.menu-toggle span { display: block; width: 24px; height: 1px; background: white; transition: .25s; }.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-cta { display: none; }
  .hero { min-height: 820px; height: auto; padding: 130px 0 90px; }.hero-grid { grid-template-columns: 1fr; }.hero-art { background-position: 62% center; opacity: .64; }.hero::before { background: linear-gradient(90deg, rgba(7,9,18,.98), rgba(7,9,18,.58)); }.hero-orbit { position: absolute; inset: 0; opacity: .55; }.orbit-card-a { top: 4%; left: auto; right: 0; }.orbit-card-b { top: auto; right: 4%; bottom: 10%; }.orbit-card-c { display: none; }.scroll-cue { display: none; }
  .hero-human { min-height: 980px; padding-bottom: 80px; }.hero-human .hero-grid { grid-template-columns: 1fr; gap: 70px; }.hero-photo { inset: 0; opacity: .48; }.hero-photo::after { background: linear-gradient(90deg,rgba(7,9,18,.95),rgba(7,9,18,.35)),linear-gradient(0deg,#070912 3%,transparent 55%); }.hero-video-card { width: 88%; margin: 0 auto; transform: none; }.hero-video-card.float-shot { --shot-base: translateZ(0); }
  .comparison-heading { grid-template-columns: 1fr; gap: 28px; }.comparison-products { grid-template-columns: 1fr; margin-top: 50px; }.comparison-table-wrap { overflow-x: auto; }.comparison-table { min-width: 920px; }
  .promise-grid { grid-template-columns: 1fr; }.promise-grid article { min-height: 150px; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line-dark); }.promise-grid article:last-child { border-bottom: 0; }
  .story-row, .story-row-reverse { grid-template-columns: 1fr; gap: 55px; margin-top: 105px; }.story-row-reverse .story-copy, .story-row-reverse .story-photo-stack { order: initial; }.story-photo-stack > img { min-height: 440px; }
  .club-layout { grid-template-columns: 1fr; gap: 45px; }.club-photo > img { min-height: 480px; }
  .problem-layout, .video-heading { grid-template-columns: 1fr; }.solution-visual { min-height: 500px; }.process-line { grid-template-columns: repeat(3,1fr); row-gap: 60px; }.process-step::after { display: none; }
  .audience-grid { grid-template-columns: 1fr 1fr; }.audience-grid > * { border-bottom: 1px solid var(--line); }.audience-grid > *:nth-child(2) { border-right: 0; }.feature-grid, .outcome-grid { grid-template-columns: 1fr 1fr; }.outcome-grid article:nth-child(2) { border-right: 0; }.outcome-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
}

@media (max-width: 640px) {
  :root { --shell: calc(100vw - 28px); }
  .brand img { width: 150px; }.nav { height: 68px; }.hero { min-height: 790px; padding-top: 110px; }.hero h1 { font-size: 52px; }.hero-lead { font-size: 16px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }.hero-proof { flex-direction: column; gap: 10px; margin-top: 38px; }.orbit-card { display: none; }
  .hero-human { min-height: 940px; }.hero-human h1 { font-size: 46px; }.hero-human .hero-grid { gap: 55px; }.hero-video-card { width: 100%; }.hero-video-card .video-play { grid-template-columns: 46px auto; }.hero-video-card .video-play > span { width: 46px; height: 46px; }.hero-video-card .video-play b { font-size: 14px; }.hero-video-card .video-play small { font-size: 8px; }.hero-status-card { right: 12px; bottom: -45px; width: 220px; }.promise-strip { padding: 55px 0; }
  .product-stories, .integrations, .club-callout { padding: 100px 0; }.story-row, .story-row-reverse { margin-top: 82px; gap: 42px; }.story-copy h3 { font-size: 39px; }.story-photo-stack > img { min-height: 360px; }.floating-screen { width: 72%; right: -5px; bottom: -28px; }.shot-callout { right: 8px; bottom: -36px; }.product-shot { margin-bottom: 34px; }
  .integration-heading h2 { font-size: 46px; }.integration-heading > p:not(.kicker) { font-size: 15px; }.integration-marquee { min-height: 102px; margin-top: 55px; -webkit-mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }.marquee-track { gap: 12px; padding-right: 12px; }.marquee-row { animation-duration: 42s; }.logo-tile { grid-template-rows: 50px auto; width: 116px; min-height: 102px; padding: 14px 11px 11px; }.logo-tile img { width: 48px; height: 48px; }.logo-tile.nav-tile img { width: 66px; height: 48px; }.club-photo > img { min-height: 410px; }.club-copy h2 { font-size: 43px; }.interactive-shot::after { opacity: 1; top: 9px; right: 9px; padding: 7px 8px; }.image-lightbox { padding: 12px; }.image-lightbox img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 76px); border-radius: 7px; }.lightbox-close { top: 12px; right: 12px; }
  .problem, .process, .product, .video-section, .outcomes, .comparison { padding: 100px 0; }.section-heading h2, .video-heading h2 { font-size: 46px; }.comparison-heading h2 { font-size: 45px; }.comparison-heading > p { font-size: 15px; }.comparison-product { min-height: 92px; }.comparison-table-wrap { margin-right: -14px; border-radius: 18px 0 0 18px; }.section-heading h2, .video-heading h2 { font-size: 46px; }.problem-layout { margin-top: 55px; gap: 40px; }.solution-visual { min-height: 360px; }.solution-window { transform: none; }.contract-head { padding: 20px; }.connection-map { height: 270px; margin: 0 12px 12px; }.map-node { width: 74px; height: 55px; }.map-node.center { width: 90px; height: 70px; }
  .process-line { grid-template-columns: 1fr 1fr; margin-top: 70px; }.process-step:last-child { grid-column: 1 / -1; }.audience-grid { grid-template-columns: 1fr; margin-top: 90px; }.audience-grid > * { min-height: 220px; border-right: 0; }.audience-grid h4 { margin-top: 50px; }
  .product-stage { margin-top: 55px; }.product-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }.product-caption { position: static; border-radius: 0; max-width: none; border-left: 0; border-right: 0; border-bottom: 0; }.feature-grid, .outcome-grid { grid-template-columns: 1fr; }.feature-card { min-height: 280px; }.outcome-grid article { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--line-dark); }.outcome-grid article:nth-child(3) { border-bottom: 1px solid var(--line-dark); }.outcome-grid h3 { margin-top: 70px; }
  .video-heading { gap: 30px; }.video-frame { margin-top: 50px; }.video-play { grid-template-columns: 52px auto; }.video-play > span { width: 52px; height: 52px; }.video-meta { display: none; }.final-cta { padding: 120px 0; }.final-cta h2 { font-size: 55px; }.footer-inner { grid-template-columns: 1fr; padding: 45px 0; gap: 24px; text-align: center; }.footer-inner p { margin: 0; }.footer-inner > div { justify-content: center; }.footer .brand { margin: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee-row { animation: none; transform: none; }
  .integration-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .float-shot { animation: none; transform: var(--shot-base); }
  .image-lightbox[open] { animation: none; }
}