@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@300;400;500&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #090909;
  --paper: #f1f1ef;
  --white: #fff;
  --muted: #999994;
  --line-dark: rgba(255,255,255,.2);
  --line-light: rgba(9,9,9,.2);
  --accent: #d8ff00;
  --accent-rgb: 216,255,0;
  --accent-2: #fff;
  --pad: clamp(22px,4vw,64px);
}
body.theme-joblicator { --accent:#d8ff00; --accent-rgb:216,255,0; --accent-2:#f4ffb8; }
body.theme-jarvis { --accent:#c8201c; --accent-rgb:200,32,28; --accent-2:#ffc928; }
body.theme-Xekute { --accent:#3478ff; --accent-rgb:52,120,255; --accent-2:#8eb5ff; }
body.theme-jarvis .product-stage { background:linear-gradient(135deg,#74100e 0%,#ad1916 46%,#d72a20 100%); }
body.theme-jarvis .product-stage::before { border-color:rgba(255,201,40,.72); }
body.theme-jarvis .stage-window { border-color:rgba(255,201,40,.46); box-shadow:24px 24px 0 rgba(255,201,40,.28); }
body.theme-jarvis .window-dots i:first-child,
body.theme-jarvis .window-dots i:nth-child(2) { background:var(--accent-2); }
body.theme-jarvis .window-nav span.active,
body.theme-jarvis .ui-bars i { background:var(--accent-2); }
body.theme-jarvis .ui-label,
body.theme-jarvis .code-block b { color:var(--accent-2); }
body.theme-jarvis .button.primary { border-color:var(--accent-2); background:var(--accent-2); color:var(--ink); }
body.theme-jarvis .marquee { background:var(--accent-2); }
body.theme-jarvis .stack-section { background:linear-gradient(135deg,#8a120f,#c8201c 58%,#e43724); }
body.theme-jarvis .stack-section .section-head h2,
body.theme-jarvis .stack-section .eyebrow { color:var(--white); }
body.theme-jarvis .stack-section .section-head h2 em { -webkit-text-stroke-color:var(--accent-2); }
body.theme-jarvis .stack-cloud span { border-color:var(--accent-2); color:var(--accent-2); }
body.theme-jarvis .stack-cloud span:hover { background:var(--accent-2); color:var(--ink); }
body.theme-jarvis .install h2 span,
body.theme-jarvis .install-code b { color:var(--accent-2); }
body.theme-jarvis .scroll-thumb { background:var(--accent-2); box-shadow:0 0 14px rgba(255,201,40,.4); }

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; scrollbar-width:none; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; -ms-overflow-style:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar { display:none; width:0; height:0; }
::selection { background:var(--accent); color:var(--ink); }
a { color:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
.mono,.eyebrow { font-family:'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow { margin:0; font-size:10px; line-height:1.4; }
.noise { position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.035; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.product-header { position:fixed; inset:0 0 auto; z-index:90; height:70px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--pad); color:var(--white); mix-blend-mode:difference; }
.product-header a,.product-header span { font:500 10px 'DM Mono',monospace; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; }
.product-header .product-id { justify-self:center; }
.product-header .github-link { justify-self:end; }
.product-header a:hover { text-decoration:underline; text-underline-offset:5px; }

.scroll-control { --offset:0px; position:fixed; z-index:88; top:50%; right:0; width:48px; height:24vh; transform:translateY(-50%); cursor:pointer; touch-action:none; }
.scroll-rail { position:relative; width:2px; height:100%; margin:auto; background:rgba(255,255,255,.4); opacity:0; transform:scaleY(.9); transition:.25s ease; }
.scroll-thumb { position:absolute; top:var(--offset); left:50%; width:8px; height:32px; background:var(--accent); transform:translateX(-50%); box-shadow:0 0 14px rgba(var(--accent-rgb),.35); }
.scroll-control:hover .scroll-rail,.scroll-control:focus-visible .scroll-rail,.scroll-control.dragging .scroll-rail { opacity:1; transform:scaleY(1); }
.scroll-control:focus-visible { outline:none; }

.product-hero { min-height:100svh; display:grid; grid-template-columns:1.12fr .88fr; background:var(--ink); color:var(--white); overflow:hidden; }
.hero-copy { padding:120px var(--pad) 52px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.hero-meta { display:flex; justify-content:space-between; gap:20px; color:#a9a9a4; }
.product-name { margin:9vh 0 0; font:400 clamp(70px,11.2vw,172px)/.79 'Archivo Black',sans-serif; letter-spacing:-.075em; text-transform:uppercase; overflow-wrap:anywhere; }
.product-name .outline { display:block; color:transparent; -webkit-text-stroke:1.4px var(--white); }
.hero-end { display:grid; grid-template-columns:minmax(240px,470px) auto; align-items:end; justify-content:space-between; gap:34px; margin-top:8vh; }
.hero-summary { margin:0; font-size:clamp(17px,1.45vw,22px); line-height:1.42; letter-spacing:-.025em; }
.hero-summary strong { color:var(--accent); font-weight:600; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid currentColor; font:500 9px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; transition:background .2s,color .2s,transform .2s; }
.button.primary { border-color:var(--accent); background:var(--accent); color:var(--ink); }
.button:hover { transform:translateY(-3px); }
.button.secondary:hover { background:var(--white); color:var(--ink); }

.product-stage { position:relative; min-height:100%; padding:90px clamp(24px,3.5vw,56px) 44px; background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-stage::before { content:''; position:absolute; width:72%; aspect-ratio:1; border:1px solid rgba(9,9,9,.35); border-radius:50%; right:-29%; top:-17%; }
.product-stage::after { content:''; position:absolute; width:48%; aspect-ratio:1; border:1px solid rgba(9,9,9,.25); transform:rotate(45deg); left:-23%; bottom:-15%; }
.stage-window { position:relative; z-index:2; width:100%; max-width:620px; min-height:490px; background:var(--ink); color:var(--white); border:1px solid rgba(255,255,255,.28); box-shadow:24px 24px 0 rgba(9,9,9,.16); }
.window-bar { height:43px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid #3a3a37; font:400 8px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:#979792; }
.window-bar > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.window-dots { display:flex; gap:6px; }
.window-dots i { width:6px; height:6px; border-radius:50%; background:#555; }
.window-dots i:first-child { background:var(--accent); }
.window-body { display:grid; grid-template-columns:110px 1fr; min-height:445px; }
.window-nav { padding:18px 12px; border-right:1px solid #353532; }
.window-nav span { display:block; padding:10px 8px; margin-bottom:5px; font:400 7px 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#777; }
.window-nav span.active { background:var(--accent); color:var(--ink); }
.window-content { padding:28px; overflow:hidden; }
.ui-label { color:var(--accent); font:500 8px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.ui-title { margin:9px 0 28px; font:400 clamp(30px,3.5vw,50px)/.92 'Archivo Black',sans-serif; letter-spacing:-.05em; text-transform:uppercase; }
.ui-row { display:grid; grid-template-columns:1fr auto; gap:12px; padding:14px 0; border-top:1px solid #3a3a37; font:400 8px/1.5 'DM Mono',monospace; text-transform:uppercase; color:#a8a8a3; }
.ui-row > * { min-width:0; }
.ui-row span { text-align:right; overflow-wrap:anywhere; }
.ui-row b { color:var(--white); font-weight:400; }
.ui-bars { height:115px; display:flex; align-items:center; gap:5px; margin:8px 0 24px; }
.ui-bars i { width:7px; height:var(--h); background:var(--accent); opacity:calc(.35 + var(--n)); animation:pulse 1.2s ease-in-out infinite alternate; animation-delay:calc(var(--n) * -1s); }
@keyframes pulse { to { transform:scaleY(.55); opacity:.42; } }
.code-block { border:1px solid #383835; padding:16px; font:400 8px/1.8 'DM Mono',monospace; color:#999; }
.code-block b { color:var(--accent); font-weight:400; }

.marquee { overflow:hidden; border-block:1px solid var(--ink); background:var(--accent); }
.marquee-track { display:flex; width:max-content; animation:marquee 22s linear infinite; }
.marquee span { padding:14px 28px; font:500 9px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.marquee span::after { content:'✦'; margin-left:56px; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding:clamp(100px,12vw,170px) var(--pad); border-bottom:1px solid var(--ink); }
.section-head { display:grid; grid-template-columns:.72fr 2fr; gap:40px; align-items:end; margin-bottom:clamp(60px,8vw,105px); }
.section-head h2 { margin:0; max-width:1020px; font:400 clamp(50px,8.2vw,118px)/.86 'Archivo Black',sans-serif; letter-spacing:-.065em; text-transform:uppercase; }
.section-head h2 em { color:transparent; -webkit-text-stroke:1.2px var(--ink); font-style:normal; }
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(35px,7vw,110px); align-items:start; }
.overview-lead { margin:0; font-size:clamp(28px,4.1vw,58px); line-height:1.05; letter-spacing:-.045em; font-weight:600; }
.overview-copy { display:grid; grid-template-columns:1fr 1fr; gap:28px; border-top:1px solid var(--ink); padding-top:18px; }
.overview-copy p { margin:0; color:#41413d; font-size:13px; line-height:1.72; }
.stat-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--ink); margin-top:30px; }
.stat { padding:24px; border-right:1px solid var(--ink); }
.stat:last-child { border-right:0; }
.stat b { display:block; font:400 clamp(28px,3.4vw,46px)/1 'Archivo Black',sans-serif; letter-spacing:-.05em; }
.stat span { display:block; margin-top:8px; color:#555; font:400 8px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }

.features { background:var(--ink); color:var(--white); }
.features .section-head h2 em { -webkit-text-stroke-color:var(--white); }
.feature-list { border-top:1px solid #444; }
.feature { display:grid; grid-template-columns:60px 1fr minmax(250px,430px); gap:24px; align-items:center; padding:30px 0; border-bottom:1px solid #444; transition:padding .25s,color .2s; }
.feature:hover { padding-left:12px; color:var(--accent); }
.feature-num { color:#777; font:400 9px 'DM Mono',monospace; }
.feature h3 { margin:0; font-size:clamp(26px,3.8vw,54px); line-height:1; letter-spacing:-.04em; }
.feature p { margin:0; color:#999994; font:400 9px/1.65 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; text-align:right; }

.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--ink); }
.workflow-step { min-height:330px; padding:25px; border-right:1px solid var(--ink); display:flex; flex-direction:column; justify-content:space-between; }
.workflow-step:last-child { border-right:0; }
.step-num { color:var(--accent); -webkit-text-stroke:1px var(--ink); font:400 clamp(54px,7vw,98px)/1 'Archivo Black',sans-serif; }
.workflow-step h3 { margin:0 0 12px; font-size:clamp(22px,2.4vw,34px); letter-spacing:-.035em; }
.workflow-step p { margin:0; color:#555; font-size:12px; line-height:1.6; }

.stack-section { background:var(--accent); }
.stack-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.stack-cloud span { border:1px solid var(--ink); padding:12px 14px; font:500 clamp(10px,1.2vw,15px) 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; transition:background .2s,color .2s; }
.stack-cloud span:hover { background:var(--ink); color:var(--accent); }

.install { min-height:78svh; padding:clamp(100px,12vw,160px) var(--pad) 38px; background:var(--ink); color:var(--white); display:flex; flex-direction:column; justify-content:space-between; }
.install h2 { max-width:1200px; margin:20px 0 60px; font:400 clamp(62px,10.5vw,158px)/.82 'Archivo Black',sans-serif; letter-spacing:-.075em; text-transform:uppercase; }
.install h2 span { color:var(--accent); }
.install-panel { display:grid; grid-template-columns:1.4fr auto; gap:20px; align-items:center; padding:20px; border:1px solid #444; }
.install-code { min-width:0; max-width:100%; overflow:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; color:#b8b8b3; font:400 10px/1.6 'DM Mono',monospace; white-space:nowrap; }
.install-code b { color:var(--accent); }
.install-footer { display:flex; justify-content:space-between; gap:20px; margin-top:60px; color:#888; font:400 8px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(40px); filter:blur(7px); transition:opacity .75s ease,transform .9s cubic-bezier(.16,.8,.2,1),filter .7s ease; }
.reveal.visible { opacity:1; transform:none; filter:none; }
.feature.reveal { transform:translateX(-28px); }
.feature.reveal:nth-child(even) { transform:translateX(28px); }
.feature.reveal.visible { transform:none; }

@media(max-width:900px) {
  :root { --pad:clamp(22px,5vw,40px); }
  .product-header { grid-template-columns:1fr auto; height:64px; }
  .product-header a { display:inline-flex; min-height:44px; align-items:center; }
  .product-header .product-id { display:none; }
  .product-hero { grid-template-columns:1fr; }
  .hero-copy { min-height:72svh; padding-top:100px; }
  .product-name { font-size:clamp(72px,18vw,142px); margin-top:6vh; }
  .hero-end { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .product-stage { min-height:clamp(590px,78svh,690px); }
  .section-head { grid-template-columns:1fr; gap:22px; }
  .overview-grid { grid-template-columns:1fr; }
  .overview-copy { margin-top:10px; }
  .feature { grid-template-columns:45px 1fr; }
  .feature p { grid-column:2; text-align:left; }
  .workflow-grid { grid-template-columns:1fr; }
  .workflow-step { min-height:220px; border-right:0; border-bottom:1px solid var(--ink); }
  .workflow-step:last-child { border-bottom:0; }
  .install h2 { font-size:clamp(62px,12vw,105px); }
}
@media(max-width:600px) {
  :root { --pad:clamp(18px,5vw,24px); }
  .product-header { height:58px; }
  .product-header a { font-size:8px; }
  .hero-copy { min-height:68svh; padding-top:84px; padding-bottom:36px; }
  .hero-meta .eyebrow:last-child { display:none; }
  .product-name { max-width:100%; font-size:clamp(54px,18vw,86px); line-height:.82; overflow-wrap:normal; }
  body.theme-Xekute .product-name { font-size:clamp(48px,16.7vw,72px); }
  .hero-end { margin-top:5vh; }
  .hero-summary { font-size:16px; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
  .button { padding-inline:12px; }
  .product-stage { min-height:560px; padding:70px 17px 35px; }
  .stage-window { min-height:430px; box-shadow:13px 13px 0 rgba(9,9,9,.15); }
  .window-body { grid-template-columns:76px 1fr; min-height:385px; }
  .window-nav { padding:13px 7px; }
  .window-nav span { padding:8px 5px; font-size:6px; }
  .window-content { padding:21px 16px; }
  .ui-title { font-size:29px; }
  .ui-row { grid-template-columns:minmax(0,1fr) minmax(82px,auto); gap:8px; }
  .section { padding-top:84px; padding-bottom:84px; }
  .section-head { margin-bottom:50px; }
  .section-head h2 { max-width:100%; font-size:clamp(39px,12.5vw,62px); overflow-wrap:anywhere; }
  .overview-lead { font-size:clamp(29px,8.5vw,42px); }
  .overview-copy { grid-template-columns:1fr; gap:20px; }
  .stat-grid { grid-template-columns:1fr; }
  .stat { border-right:0; border-bottom:1px solid var(--ink); }
  .stat:last-child { border-bottom:0; }
  .feature { grid-template-columns:28px minmax(0,1fr); gap:10px; padding:23px 0; }
  .feature h3 { font-size:clamp(27px,8vw,38px); }
  .feature p { font-size:8px; }
  .feature.reveal,.feature.reveal:nth-child(even) { transform:translateY(25px); }
  .feature.reveal.visible { transform:none; }
  .workflow-step { min-height:205px; padding:22px; }
  .stack-cloud span { flex:1 1 auto; text-align:center; }
  .install { min-height:72svh; padding-top:84px; }
  .install h2 { max-width:100%; font-size:clamp(40px,12.8vw,68px); line-height:.86; overflow-wrap:anywhere; }
  .install-panel { grid-template-columns:1fr; }
  .install-panel .button { width:100%; }
  .install-footer { flex-direction:column; }
  .scroll-control { display:none; }
}
@media(max-width:420px) {
  .hero-copy { min-height:auto; padding-top:78px; }
  .hero-actions { grid-template-columns:1fr; }
  .product-stage { min-height:520px; padding:62px 14px 30px; }
  .stage-window { min-height:400px; box-shadow:10px 10px 0 rgba(9,9,9,.15); }
  body.theme-jarvis .stage-window { box-shadow:10px 10px 0 rgba(255,201,40,.28); }
  .window-bar { padding-inline:10px; }
  .window-body { grid-template-columns:64px minmax(0,1fr); min-height:355px; }
  .window-nav { padding-inline:5px; }
  .window-content { padding:18px 12px; }
  .ui-title { font-size:clamp(24px,8vw,29px); }
  .ui-row { grid-template-columns:1fr; gap:4px; }
  .ui-row span { text-align:left; }
  .ui-bars { height:92px; gap:4px; }
  .code-block { padding:12px; font-size:7px; overflow-wrap:anywhere; }
  .section-head h2 { font-size:clamp(36px,12vw,50px); }
  .overview-lead { font-size:clamp(27px,8.2vw,36px); }
  .install-panel { padding:14px; }
  .install-code { font-size:8px; }
}
@media(hover:none),(pointer:coarse) {
  .scroll-rail { opacity:.5; transform:scaleY(1); }
  .button:hover { transform:none; }
  .feature:hover { padding-left:0; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .marquee-track,.ui-bars i { animation:none; }
  .reveal,.feature.reveal,.feature.reveal:nth-child(even) { opacity:1; transform:none; filter:none; transition:none; }
}