/* Residue Solutions brand, live product preview, and presentation motion. */
:root {
  --ink: #07141a;
  --muted: #566871;
  --paper: #f5f8fa;
  --white: #fff;
  --green: #008db8;
  --green-dark: #007192;
  --mint: #dff4f8;
  --line: #e0e9ed;
  --brand-cyan: #00a9d7;
  --brand-deep: #06151d;
  scroll-padding-top: 92px;
}

body { background: var(--paper); color: var(--ink); transition: background-color .35s, color .35s; }
.header { background: rgba(5,17,23,.84); border-color: rgba(195,231,241,.12); backdrop-filter: blur(18px); color: #f7fbfd; }
.nav { height: 76px; }
.brand { margin-right: auto; }
.brand-logo { display: block; width: 150px; height: auto; background: transparent; object-fit: contain; }
.logo-white { display: block; }
.logo-blue { display: none; }
.nav-links { color: rgba(242,249,251,.78); }
.nav-links a { color: inherit; }
.nav-links a:hover { color: #fff; }
.nav-cta { background: #00a9d7; color: #04131a; transition: transform .2s, background .2s, box-shadow .2s; }
.nav-cta:hover { background: #51d3f0; box-shadow: 0 8px 24px #00a9d744; transform: translateY(-2px); }
.nav-cta span { color: inherit; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #d9e6e9; border-radius: 50%; background: #ffffff1a; color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.theme-toggle:hover { transform: rotate(-10deg); background: #ffffff24; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sun-icon { display: none !important; }
.moon-icon { display: block !important; }

.hero { position: relative; isolation: isolate; min-height: 670px; padding-top: 98px; padding-bottom: 84px; color: #fff; }
.hero:before { position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: radial-gradient(ellipse at 76% 40%, #123646 0%, #091d27 43%, #06151d 75%); content: ""; }
.hero:after { position: absolute; z-index: -1; right: -8%; top: 5%; width: 47%; height: 65%; border-radius: 50%; background: #008fb328; filter: blur(72px); content: ""; animation: hero-halo 8s ease-in-out infinite alternate; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy .eyebrow { color: #69dcf4; }
.hero h1 { color: #fff; }
.hero h1 em { color: #4bd4ee; }
.hero-copy > p { color: #c1d0d6; }
.hero .button.primary { background: #00b9e5; color: #07141a; box-shadow: 0 9px 28px #00b9e52e; }
.hero .button.primary:hover { background: #70e4fa; }
.hero .button.quiet { color: #f2f7f8; }
.hero .play { border-color: #6e8791; }
.hero-note { color: #eef5f6; }
.hero-note small { color: #9fb1b8; }
.note-icon { color: #55dbf4; background: #123743; }
.hero-visual { min-height: 475px; padding: 28px 0 36px; perspective: 1300px; }
.hero-art { position: absolute; inset: 0 0 35px; overflow: hidden; border: 1px solid #4c7889; border-radius: 22px; background: #071929; box-shadow: 0 32px 75px #020a0e70; isolation: isolate; }
.hero-art:after { position: absolute; inset: 0; background: linear-gradient(115deg,#06151db8 0%,#06151d36 52%,#06151d08 100%),linear-gradient(0deg,#06151d8a,transparent 62%); content: ""; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; opacity: .91; animation: art-drift 16s ease-in-out infinite alternate; }
.hero-art-tag { position: absolute; z-index: 1; left: 18px; bottom: 15px; display: flex; align-items: center; gap: 8px; color: #d5e7ec; font-size: 7px; font-weight: 700; letter-spacing: 1.2px; }
.hero-art-tag i { width: 6px; height: 6px; border-radius: 50%; background: #33d6f0; box-shadow: 0 0 0 4px #33d6f02b; }
.app-window { z-index: 2; width: 91%; margin: 35px 0 0 auto; transform: rotateY(-5deg) rotateX(2deg); transform-origin: center; box-shadow: 0 26px 65px #020a0e78; animation: window-float 7s ease-in-out infinite; }
.floating-progress { z-index: 4; right: -3px; bottom: 56px; animation: card-float 5s ease-in-out infinite; }
.spark { z-index: 3; color: #79e9fc; text-shadow: 0 0 20px #18cae5; }
.spark-two { color: #f5c977; }
.visual-caption { color: #b7cbd1; right: 7px; bottom: 3px; }

.proof-band { background: var(--white); border-color: var(--line); }
.proof-inner > span { color: #7b8c94; }
.proof-inner > b { color: #465a63; }
.eyebrow { color: #007fa4; }
.eyebrow i, .demo-label i { background: #00a7d1; box-shadow: 0 0 0 4px #00a7d11c; }
.section-heading h2, .closing h2 { color: var(--ink); }
.section-heading p { color: var(--muted); }
.outcome { background: var(--white); border-color: var(--line); box-shadow: 0 8px 28px #092a3510; transition: transform .25s, box-shadow .25s, border-color .25s; }
.outcome:hover { transform: translateY(-5px); box-shadow: 0 18px 34px #092a3518; border-color: #b7d9e2; }
.outcome-icon.mint { background: #ddf5f8; color: #007fa4; }
.outcome h3 { color: var(--ink); }
.outcome p { color: var(--muted); }
.experience { background: #eaf2f5; }
.role-tab.active { color: #007fa4; }
.role-tab.active:after { background: #00a9d7; }
.role-panel { background: var(--white); border-color: var(--line); }
.role-kicker, .feature-label, .text-link { color: #007fa4; }
.role-art { background: radial-gradient(ellipse at center,#e1f5f8,#dbe8ed); }
.role-art:before, .role-art:after { border-color: #bfd8df; }
.feature { background: var(--white); border-color: var(--line); box-shadow: 0 8px 28px #092a3508; transition: transform .25s, box-shadow .25s; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 32px #092a3512; }
.feature-assess { background: #f0eef9; }
.feature-community { background: #eaf4f4; }
.feature-wide { background: #eff5f6; }
.feature h3 { color: var(--ink); }
.feature p { color: var(--muted); }
.course-cover { background: linear-gradient(125deg,#0d7da4,#2ca8c6); }
.course-cover .cover-shape { color: #a4e8f6; }
.feature-symbol { color: #007fa4; }
.assessment-chip b i, .status-dot, .admin-stats b { color: #007fa4; }
.admin-bars i { background: #a9d8e1; }
.admin-bars i:nth-child(2n) { background: #4aabc1; }
.message-card .avatar-mint { background: #dff4f5; color: #087d9b; }
.explore { background: var(--paper); }
.gallery-card { background: var(--white); border-color: var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; }
.gallery-card:hover { border-color: #9ccbd6; box-shadow: 0 16px 34px #092a3516; }
.filter.active { background: #def3f7; color: #007493; border-color: #c4e8ef; }
.filter.active span { color: #267e91; }
.demo-label i { box-shadow: none; }
.gallery-meta { background: var(--white); border-color: var(--line); }

.tech { background: linear-gradient(135deg,#06151d,#0b2530 60%,#09202a); }
.tech h2 { color: #fff; }
.tech h2 em { color: #57d8f1; }
.tech .eyebrow { color: #6cdcf4; }
.tech-copy > p { color: #bed0d6; }
.tech-tags span { border-color: #41616c; color: #d7e7eb; }
.diagram-core { background: #0f3340; border-color: #276477; box-shadow: 0 0 55px #26d4ef18; }
.diagram-core > span { color: #66dff5; }
.orbit { border-color: #47717d; }
.orbit-node { box-shadow: 0 7px 20px #0210168c; }
.node-a { background: #dcf6fb; color: #08728b; }
.node-b { background: #e8e2f8; color: #66578f; }
.node-c { background: #fde9dd; color: #95654a; }
.node-d { background: #d9edf2; color: #476e79; }
.closing { background: var(--white); }
.closing-panel { background: linear-gradient(130deg,#eaf6f8,#edf4f6); border-color: #d8e9ed; }
.closing-orb { color: #d0edf2; }
.closing h2 { color: #07141a; }
.closing h2 em { color: #007fa4; }
.closing-panel > p { color: #536770; }
.closing-note { color: #70818a; }
.footer { background: var(--white); border-color: var(--line); }
.footer .logo-white { display: none; }
.footer .logo-blue { display: block; }
.footer-inner > span { color: #70818a; }
.footer-linkedin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e5f3f6; color: #007fa4; transition: transform .2s, background .2s, color .2s; }
.footer-linkedin:hover { transform: translateY(-2px); background: #007fa4; color: white; }
.footer-linkedin svg, .closing-actions .social-link svg { width: 16px; height: 16px; fill: currentColor; }
.closing-actions .social-link { gap: 9px; }
.screen-dialog { background: var(--white); color: var(--ink); border-color: var(--line); }
.screen-dialog > p { color: var(--muted); }

.learning-flow { background: var(--paper); }
.flow-explorer { overflow: hidden; border: 1px solid #dce8ec; border-radius: 14px; background: var(--white); box-shadow: 0 22px 55px #102d3a10; }
.flow-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-bottom: 1px solid var(--line); background: #f9fbfc; }
.flow-step { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #70828a; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .2s, background .2s; }
.flow-step:last-child { border-right: 0; }
.flow-step span { font-size: 9px; color: #a4b2b7; }
.flow-step:hover, .flow-step.active { background: #e7f6f9; color: #006e8d; }
.flow-step.active:after { position: absolute; right: 22%; bottom: -1px; left: 22%; height: 2px; background: #00a9d7; content: ""; }
.flow-canvas { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr 72px 1fr; align-items: center; gap: 8px; min-height: 292px; padding: 34px 33px; background: radial-gradient(ellipse at 50% 20%,#eff9fb,#fbfcfc 68%); isolation: isolate; }
.flow-glow { position: absolute; z-index: -1; top: -150px; left: 43%; width: 300px; height: 300px; border-radius: 50%; background: #b8edf5; filter: blur(70px); opacity: .45; transition: transform .5s; }
.flow-node { position: relative; z-index: 1; min-height: 171px; padding: 19px 17px; border: 1px solid #dbe8eb; border-radius: 10px; background: #fff; box-shadow: 0 12px 26px #0a2d3b0c; transition: transform .35s, border-color .35s, box-shadow .35s; }
.flow-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 13px; border-radius: 9px; background: #e2f5f8; color: #007fa4; font-size: 15px; }
.flow-node small { display: block; color: #82939a; font-size: 7px; font-weight: 700; letter-spacing: .8px; }
.flow-node b { display: block; margin: 7px 0; color: #12242b; font-family: var(--display); font-size: 14px; letter-spacing: -.4px; }
.flow-node p { margin: 0; color: #72838a; font-size: 9px; line-height: 1.65; }
.node-action { border-color: #8fd2df; box-shadow: 0 15px 32px #128ba51b; transform: translateY(-7px); }
.node-action .flow-icon { background: #007fa4; color: #fff; }
.node-outcome .flow-icon { background: #e9e5f7; color: #7062a5; }
.flow-connector { position: relative; height: 2px; background: #c9e4e9; overflow: visible; }
.flow-connector > i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #68c6d8; }
.flow-connector > i:nth-child(2) { left: 36%; }
.flow-connector > i:nth-child(3) { left: 72%; }
.flow-pulse { position: absolute; top: -4px; left: 0; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: #00aed4; box-shadow: 0 0 0 5px #00aed41b; animation: flow-travel 3.2s linear infinite; }
.connector-last .flow-pulse { animation-delay: 1.2s; }
.flow-footnote { position: absolute; right: 23px; bottom: 15px; color: #8b9ba1; font-size: 6px; font-weight: 700; letter-spacing: 1.1px; }
.flow-footnote span { padding: 0 5px; color: #00a9d7; }
.flow-canvas[data-flow="learn"] .flow-glow { transform: translateX(-90px); }
.flow-canvas[data-flow="assess"] .flow-glow { transform: translateX(15px) translateY(70px); }
.flow-canvas[data-flow="feedback"] .flow-glow { transform: translateX(130px) translateY(-25px); }
.flow-canvas.is-changing .flow-node { animation: flow-arrive .48s ease both; }
.flow-canvas.is-changing .node-action { animation-delay: .08s; }
.flow-canvas.is-changing .node-outcome { animation-delay: .16s; }

:root[data-theme="dark"] { --ink: #f4fafc; --muted: #a7b8be; --paper: #07141a; --white: #0d2028; --line: #203b45; color-scheme: dark; }
:root[data-theme="dark"] body { background: #07141a; color: #f4fafc; }
:root[data-theme="dark"] .header { background: rgba(4,13,18,.94); border-color: #ffffff12; }
:root[data-theme="dark"] .brand-logo.logo-white { display: block; }
:root[data-theme="dark"] .brand-logo.logo-blue { display: none; }
:root[data-theme="dark"] .theme-toggle { border-color: #36515b; background: #10252e; color: #d8edf2; }
:root[data-theme="dark"] .sun-icon { display: block !important; }
:root[data-theme="dark"] .moon-icon { display: none !important; }
:root[data-theme="dark"] .proof-band, :root[data-theme="dark"] .outcome, :root[data-theme="dark"] .role-panel, :root[data-theme="dark"] .feature, :root[data-theme="dark"] .gallery-card, :root[data-theme="dark"] .gallery-meta, :root[data-theme="dark"] .flow-explorer, :root[data-theme="dark"] .closing-panel, :root[data-theme="dark"] .footer { background: #0d2028; border-color: #203b45; }
:root[data-theme="dark"] .experience { background: #0a1b22; }
:root[data-theme="dark"] .role-art { background: radial-gradient(ellipse at center,#14323d,#0d2028); }
:root[data-theme="dark"] .explore, :root[data-theme="dark"] .closing, :root[data-theme="dark"] .learning-flow { background: #07141a; }
:root[data-theme="dark"] .section-heading h2, :root[data-theme="dark"] .outcome h3, :root[data-theme="dark"] .feature h3, :root[data-theme="dark"] .role-copy h3 { color: #f4fafc; }
:root[data-theme="dark"] .section-heading p, :root[data-theme="dark"] .outcome p, :root[data-theme="dark"] .feature p, :root[data-theme="dark"] .role-copy p { color: #a7b8be; }
:root[data-theme="dark"] .proof-inner > b, :root[data-theme="dark"] .footer-inner > span { color: #b7c7cc; }
:root[data-theme="dark"] .role-tabs { border-color: #203b45; }
:root[data-theme="dark"] .role-tab { color: #a7b8be; }
:root[data-theme="dark"] .role-tab.active { color: #63d7ef; }
:root[data-theme="dark"] .feature-assess { background: #171d32; }
:root[data-theme="dark"] .feature-community { background: #10282d; }
:root[data-theme="dark"] .feature-wide { background: #10242c; }
:root[data-theme="dark"] .flow-controls { background: #0a1b22; }
:root[data-theme="dark"] .flow-step { color: #9cb0b7; border-color: #203b45; }
:root[data-theme="dark"] .flow-step.active, :root[data-theme="dark"] .flow-step:hover { background: #102c36; color: #71d9ef; }
:root[data-theme="dark"] .flow-canvas { background: radial-gradient(ellipse at 50% 20%,#102d37,#0b1d24 68%); }
:root[data-theme="dark"] .flow-node { background: #112831; border-color: #2b4650; }
:root[data-theme="dark"] .flow-node b { color: #eff8fa; }
:root[data-theme="dark"] .flow-node p { color: #a7bac0; }
:root[data-theme="dark"] .node-action { border-color: #3c9eb1; }
:root[data-theme="dark"] .flow-icon { background: #143944; color: #69d8ee; }
:root[data-theme="dark"] .flow-step.active:after { background: #42cce8; }
:root[data-theme="dark"] .closing h2 { color: #f4fafc; }
:root[data-theme="dark"] .closing-panel > p { color: #afc0c6; }
:root[data-theme="dark"] .closing-orb { color: #14343e; }
:root[data-theme="dark"] .footer-linkedin { background: #12303a; color: #58d4ee; }
:root[data-theme="dark"] .tech { background: #030b10; }

@keyframes window-float { 0%,100% { transform: rotateY(-5deg) rotateX(2deg) translateY(0); } 50% { transform: rotateY(-3deg) rotateX(1deg) translateY(-8px); } }
@keyframes card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes art-drift { 0% { transform: scale(1.02) translate3d(0,0,0); } 100% { transform: scale(1.08) translate3d(-1.2%,.8%,0); } }
@keyframes hero-halo { 0% { opacity: .4; transform: translate3d(0,0,0) scale(.9); } 100% { opacity: .85; transform: translate3d(-18px,12px,0) scale(1.12); } }
@keyframes flow-travel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes flow-arrive { 0% { opacity: .45; transform: translateY(7px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes flow-travel-vertical { 0% { top: 0; left: -4px; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; left: -4px; opacity: 0; } }

@media (max-width: 900px) {
  .hero { padding-top: 100px; }
  .hero-visual { min-height: 410px; }
  .app-window { width: 93%; margin-top: 34px; }
  .flow-canvas { grid-template-columns: 1fr 42px 1fr 42px 1fr; padding: 28px 18px; }
  .flow-node { padding: 14px 12px; }
  .flow-node b { font-size: 12px; }
}
@media (max-width: 620px) {
  .nav { height: 68px; }
  .brand-logo { width: 122px; }
  .nav-actions { gap: 6px; }
  .theme-toggle { width: 34px; height: 34px; }
  .nav-cta { padding: 10px 11px; font-size: 9px; }
  .header .nav-links { color: #293a42; }
  .hero { padding-top: 89px; }
  .hero:before { border-radius: 0; }
  .hero h1 { font-size: 48px; }
  .hero-visual { min-height: 340px; padding-top: 25px; }
  .hero-art { inset: 3px 0 35px; border-radius: 15px; }
  .hero-art-tag { left: 10px; bottom: 10px; font-size: 5px; }
  .app-window { width: 98%; margin-top: 35px; transform: none; }
  .floating-progress { right: -1px; bottom: 43px; }
  .flow-controls { grid-template-columns: repeat(2,1fr); }
  .flow-step { min-height: 49px; border-bottom: 1px solid var(--line); }
  .flow-step:nth-child(2) { border-right: 0; }
  .flow-step:nth-child(3), .flow-step:nth-child(4) { border-bottom: 0; }
  .flow-canvas { grid-template-columns: 1fr; gap: 13px; padding: 22px 16px 34px; }
  .flow-node { min-height: unset; padding: 14px; display: grid; grid-template-columns: 35px 1fr; column-gap: 10px; align-items: center; }
  .flow-icon { grid-row: span 3; margin: 0; }
  .flow-node small, .flow-node b, .flow-node p { grid-column: 2; }
  .flow-node small { font-size: 6px; }
  .flow-node b { margin: 3px 0; font-size: 12px; }
  .flow-node p { font-size: 8px; }
  .node-action { transform: none; }
  .flow-connector { width: 2px; height: 18px; margin-left: 29px; }
  .flow-connector > i { left: -3px !important; width: 8px; height: 8px; }
  .flow-connector > i:nth-child(2) { top: 33%; }
  .flow-connector > i:nth-child(3) { top: 70%; }
  .flow-connector .flow-pulse { top: 0; left: -4px; animation: flow-travel-vertical 2.5s linear infinite; }
  .flow-footnote { font-size: 5px; right: 12px; bottom: 10px; }
  .footer-inner { gap: 14px; }
  .footer-linkedin { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img, .app-window, .floating-progress, .hero:after, .flow-pulse { animation: none !important; }
  .flow-canvas.is-changing .flow-node { animation: none !important; }
}

/* Repository-rendered LMS captures */
.gallery-card .screenshot-screen { padding: 0; background: #e9eef1; }
.gallery-card .screen-capture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dialog-preview .screenshot-screen { height: auto; max-height: 62vh; padding: 0; }
.dialog-preview .screen-capture { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; object-position: top center; }
.role-screen { padding: 0 !important; overflow: hidden; }
.role-capture { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top left; }
@media (max-width: 760px) { .role-capture { height: 220px; } }