/*
Theme Name: JoypadX Custom
Theme URI: https://test.joypadx.com/
Author: Marinkovic Hofmann / Hermes
Description: Custom dark, restrained JoipadX staging theme. Built for performance without a page builder.
Version: 0.1.0
License: Proprietary
Text Domain: joypadx-custom
*/

:root{
  --jpx-black:#050506;
  --jpx-ink:#0b0c0e;
  --jpx-panel:#111317;
  --jpx-panel-2:#171a20;
  --jpx-line:rgba(255,255,255,.12);
  --jpx-line-strong:rgba(255,255,255,.2);
  --jpx-text:#f2f4f7;
  --jpx-muted:#a7adb8;
  --jpx-soft:#d8dde5;
  --jpx-accent:#dfe7f3;
  --jpx-blue:#7da7ff;
  --jpx-radius:0px;
  --jpx-max:1180px;
  --jpx-font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jpx-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--jpx-black)}
body.jpx-site{margin:0;background:
  radial-gradient(circle at 75% 5%, rgba(125,167,255,.18), transparent 28rem),
  radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 22rem),
  linear-gradient(180deg,#050506 0%,#090a0c 42%,#050506 100%);color:var(--jpx-text);font-family:var(--jpx-font);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none} a:hover{color:#fff}.jpx-main{min-height:70vh}.jpx-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(18px,4vw,56px);background:rgba(5,5,6,.66);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);transition:.25s ease}.jpx-header.is-scrolled{background:rgba(5,5,6,.9)}.jpx-brand{display:flex;align-items:center;gap:12px;font-weight:650;letter-spacing:-.03em}.jpx-brand-logo{display:block;width:156px;height:auto;max-height:38px;object-fit:contain}.jpx-brand-text{font-size:18px}.jpx-nav{display:flex;align-items:center;gap:26px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--jpx-soft)}.jpx-nav a{opacity:.86}.jpx-nav a:hover{opacity:1}.jpx-nav-cta{padding:11px 16px;border:1px solid var(--jpx-line-strong);background:rgba(255,255,255,.06)}.jpx-menu-toggle{display:none;background:transparent;color:var(--jpx-text);border:1px solid var(--jpx-line);padding:10px 13px;text-transform:uppercase;letter-spacing:.12em}.jpx-section{max-width:var(--jpx-max);margin:0 auto;padding:clamp(72px,10vw,132px) clamp(20px,4vw,34px)}.jpx-hero,.jpx-product-hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);align-items:center;gap:clamp(42px,7vw,86px);min-height:calc(100vh - 80px)}.jpx-kicker{margin:0 0 18px;color:var(--jpx-muted);font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.18em}.jpx-hero h1,.jpx-product-hero h1,.jpx-contact-hero h1{margin:0;color:#fff;font-size:clamp(48px,7.6vw,94px);line-height:.94;letter-spacing:-.075em;font-weight:620;max-width:860px}.jpx-product-hero h1,.jpx-contact-hero h1{font-size:clamp(44px,6.4vw,82px)}.jpx-lead{margin:26px 0 0;max-width:680px;color:var(--jpx-soft);font-size:clamp(18px,2.1vw,23px);line-height:1.55}.jpx-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.jpx-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 20px;border:1px solid var(--jpx-line-strong);font-weight:560;letter-spacing:-.01em;transition:.18s ease}.jpx-button-primary{background:#f3f6fb;color:#07080a;border-color:#f3f6fb}.jpx-button-primary:hover{background:#fff;color:#000;transform:translateY(-1px)}.jpx-button-ghost{background:rgba(255,255,255,.055);color:#fff}.jpx-button-ghost:hover{background:rgba(255,255,255,.11);transform:translateY(-1px)}.jpx-button-cart{cursor:pointer}.jpx-button-cart.is-mock-active{background:rgba(125,167,255,.22);color:#fff;border-color:rgba(125,167,255,.55)}.jpx-mock-note{margin:14px 0 0;color:var(--jpx-muted);font-size:14px}.jpx-hero-visual,.jpx-product-panel{position:relative;min-height:560px;border:1px solid var(--jpx-line);background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));overflow:hidden}.jpx-photo-panel{display:grid;place-items:stretch;padding:0}.jpx-photo-panel:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.78));pointer-events:none}.jpx-photo-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04)}.jpx-photo-caption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff;font-size:15px}.jpx-photo-caption span{display:block;margin-bottom:7px;font-family:var(--jpx-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--jpx-muted)}.jpx-video-feature{display:grid;grid-template-columns:.78fr 1.22fr;gap:34px;align-items:center;border-top:1px solid var(--jpx-line);padding-top:72px}.jpx-video-copy h2{margin:0;color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1;letter-spacing:-.06em}.jpx-video-copy p:not(.jpx-kicker){color:var(--jpx-soft);font-size:18px}.jpx-video-card{border:1px solid var(--jpx-line);background:rgba(255,255,255,.055);padding:14px}.jpx-video-card video{display:block;width:100%;aspect-ratio:16/9;background:#000}.jpx-video-card p{margin:12px 4px 2px;color:var(--jpx-muted);font-size:14px}.jpx-proof-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-top:0}.jpx-proof-strip>div{padding:28px;background:rgba(255,255,255,.055);border:1px solid var(--jpx-line)}.jpx-proof-strip strong{display:block;color:#fff;font-size:19px;letter-spacing:-.035em}.jpx-proof-strip span{display:block;margin-top:8px;color:var(--jpx-muted);font-size:14px}.jpx-split{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(28px,6vw,80px);border-top:1px solid var(--jpx-line)}.jpx-split h2,.jpx-campaign h2,.jpx-roadmap h2,.jpx-contact-aside h2{margin:0;color:#fff;font-size:clamp(34px,5vw,62px);line-height:1;letter-spacing:-.065em}.jpx-rich-text p{margin:0 0 20px;color:var(--jpx-soft);font-size:19px}.jpx-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.jpx-card-grid.jpx-three{grid-template-columns:repeat(3,1fr)}.jpx-card{padding:28px;min-height:238px;border:1px solid var(--jpx-line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}.jpx-card span{font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--jpx-muted)}.jpx-card h3{margin:54px 0 14px;color:#fff;font-size:24px;line-height:1.05;letter-spacing:-.04em}.jpx-card p{margin:0;color:var(--jpx-muted);font-size:15px}.jpx-campaign{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;border-top:1px solid var(--jpx-line);border-bottom:1px solid var(--jpx-line);background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}.jpx-campaign p:not(.jpx-kicker){max-width:760px;color:var(--jpx-soft);font-size:18px}.jpx-product-panel{display:grid;place-items:center}.jpx-product-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:0}.jpx-product-gallery figure{margin:0;border:1px solid var(--jpx-line);background:rgba(255,255,255,.055);overflow:hidden}.jpx-product-gallery img{display:block;width:100%;aspect-ratio:1.18/1;object-fit:cover}.jpx-product-gallery figcaption{padding:14px 16px;color:var(--jpx-muted);font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em}.jpx-feature-table{border-top:1px solid var(--jpx-line);border-bottom:1px solid var(--jpx-line);padding-top:0;padding-bottom:0}.jpx-table-row{display:grid;grid-template-columns:270px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--jpx-line)}.jpx-table-row:last-child{border-bottom:0}.jpx-table-row span{font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--jpx-muted)}.jpx-table-row strong{color:#fff;font-size:20px;letter-spacing:-.03em}.jpx-roadmap{border-top:1px solid var(--jpx-line)}.jpx-roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.jpx-roadmap-grid>div{padding:28px;background:#f2f4f7;color:#08090b}.jpx-roadmap-grid span{font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.15em;color:#626a76}.jpx-roadmap-grid h3{margin:36px 0 10px;font-size:28px;letter-spacing:-.05em}.jpx-roadmap-grid p{margin:0;color:#343a43}.jpx-contact-hero{padding-bottom:42px}.jpx-contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding-top:20px}.jpx-contact-form,.jpx-contact-aside{border:1px solid var(--jpx-line);background:rgba(255,255,255,.055);padding:30px}.jpx-contact-form{display:grid;gap:18px}.jpx-contact-form label{display:grid;gap:8px;color:var(--jpx-soft);font-size:14px}.jpx-contact-form input,.jpx-contact-form select,.jpx-contact-form textarea{width:100%;background:#08090b;color:#fff;border:1px solid var(--jpx-line-strong);padding:14px;font:inherit;border-radius:0}.jpx-contact-form input:focus,.jpx-contact-form select:focus,.jpx-contact-form textarea:focus{outline:2px solid rgba(125,167,255,.7);outline-offset:2px}.jpx-form-message{padding:14px;border:1px solid var(--jpx-line-strong);background:rgba(255,255,255,.06)}.jpx-success{border-color:rgba(130,255,180,.5)}.jpx-error{border-color:rgba(255,120,120,.55)}.jpx-contact-aside ul{margin:24px 0;padding-left:18px;color:var(--jpx-soft)}.jpx-contact-aside li{margin-bottom:12px}.jpx-note{margin-top:30px;padding:18px;border:1px solid var(--jpx-line);color:var(--jpx-muted);font-size:14px}.jpx-footer{border-top:1px solid var(--jpx-line);background:#050506}.jpx-footer-inner{max-width:var(--jpx-max);margin:0 auto;padding:38px clamp(20px,4vw,34px);display:flex;align-items:flex-start;justify-content:space-between;gap:24px;color:var(--jpx-muted)}.jpx-footer-brand{display:block;color:#fff;font-weight:650;font-size:18px}.jpx-footer-logo{display:block;width:128px;max-width:128px;height:auto;max-height:30px;object-fit:contain}.jpx-footer p{margin:8px 0 0}.jpx-footer-links{display:flex;gap:22px;font-size:13px;text-transform:uppercase;letter-spacing:.12em}.jpx-page-shell{max-width:900px;margin:0 auto;padding:90px 24px}.jpx-content-page h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.07em}.jpx-content-body{color:var(--jpx-soft);font-size:18px}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:980px){.jpx-menu-toggle{display:inline-flex}.jpx-menu-wrap{display:none;position:absolute;left:18px;right:18px;top:76px;padding:18px;background:rgba(5,5,6,.96);border:1px solid var(--jpx-line)}.jpx-menu-wrap.is-open{display:block}.jpx-nav{display:grid;gap:16px}.jpx-hero,.jpx-product-hero,.jpx-split,.jpx-contact-grid{grid-template-columns:1fr}.jpx-hero,.jpx-product-hero{min-height:auto}.jpx-proof-strip,.jpx-card-grid,.jpx-card-grid.jpx-three,.jpx-roadmap-grid{grid-template-columns:1fr 1fr}.jpx-campaign{display:grid}.jpx-hero-visual,.jpx-product-panel{min-height:440px}.jpx-table-row{grid-template-columns:1fr}}
@media (max-width:640px){.jpx-section{padding:62px 18px}.jpx-header{padding:14px 18px}.jpx-brand-mark{width:36px;height:36px}.jpx-proof-strip,.jpx-card-grid,.jpx-card-grid.jpx-three,.jpx-roadmap-grid{grid-template-columns:1fr}.jpx-hero h1,.jpx-product-hero h1,.jpx-contact-hero h1{font-size:46px}.jpx-hero-visual,.jpx-product-panel{min-height:360px}.jpx-device-card{width:180px;height:292px}.jpx-product-frame{transform:scale(.78)}.jpx-footer-inner,.jpx-footer-links{display:grid}.jpx-footer-links{gap:12px}}

/* JoypadX v0.1.3 product/page refinements */
.jpx-hero-visual,.jpx-product-panel{min-height:660px}
.jpx-product-gallery img{aspect-ratio:3/4}
.jpx-video-card video{aspect-ratio:4/3}
.jpx-buy-box{margin-top:28px;display:grid;gap:16px;max-width:430px}
.jpx-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid var(--jpx-line);background:rgba(255,255,255,.06)}
.jpx-price-label{color:var(--jpx-muted);font-family:var(--jpx-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.jpx-price-row strong{font-size:30px;line-height:1;color:#fff;letter-spacing:-.05em}
.jpx-quantity-field{display:grid;gap:8px;color:var(--jpx-soft);font-size:14px}
.jpx-quantity-field input{width:118px;background:#08090b;color:#fff;border:1px solid var(--jpx-line-strong);padding:12px 14px;font:inherit;border-radius:0}
.jpx-quantity-field input:focus{outline:2px solid rgba(125,167,255,.7);outline-offset:2px}
@media (max-width:980px){.jpx-hero-visual,.jpx-product-panel{min-height:560px}}
@media (max-width:640px){.jpx-hero-visual,.jpx-product-panel{min-height:470px}.jpx-product-gallery img{aspect-ratio:4/5}}