/* SamarShop product styling, matched to QuickSFX Pro's Premiere panel palette. */
:root{
  --bg:#101112;
  --surface:#17191b;
  --surface-2:#202225;
  --surface-3:#282b30;
  --line:rgba(233,236,242,.1);
  --line-bright:rgba(233,236,242,.17);
  --text:#e9ecf2;
  --muted:#a3a9b3;
  --subtle:#7c8490;
  --blue:#1684f2;
  --teal:#1684f2;
  --violet:#73b6f5;
  --wave-blue:#8fc4ff;
}
html{scroll-padding-top:90px}
body{background:var(--bg)}
body:before{z-index:0;background:radial-gradient(ellipse at 73% 10%,rgba(20,132,242,.105),transparent 29%),radial-gradient(ellipse at 11% 42%,rgba(20,132,242,.055),transparent 24%),radial-gradient(ellipse at 90% 82%,rgba(81,146,230,.045),transparent 23%);animation:ambientDrift 16s ease-in-out infinite alternate}
body>*{position:relative;z-index:1}
.site-header{background:rgba(29,29,29,.78);border-bottom-color:rgba(233,236,242,.075);box-shadow:0 10px 35px rgba(0,0,0,.13)}
.brand-mark{background:linear-gradient(145deg,rgba(20,132,242,.22),rgba(20,132,242,.05));border-color:rgba(20,132,242,.36);box-shadow:0 0 20px rgba(20,132,242,.07)}
.brand-mark span{background:var(--teal)}
.brand b,.live-dot,.brand-mark span,.footer-email span{color:var(--teal)}
.site-nav{color:#aab0b9}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--teal)}
.site-nav .nav-cta{border-color:rgba(20,132,242,.34);background:linear-gradient(180deg,rgba(20,132,242,.12),rgba(20,132,242,.035));box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 18px rgba(20,132,242,.04)}
.site-nav .nav-cta:hover{border-color:rgba(20,132,242,.7);background:rgba(20,132,242,.15);box-shadow:0 0 24px rgba(20,132,242,.12)}
.product-breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:23px;color:#7d858f;font-size:11px;letter-spacing:.02em}
.product-breadcrumb a{color:#bac1c7;transition:color .2s ease}
.product-breadcrumb a:hover{color:var(--teal)}
.product-breadcrumb strong{color:#e9ecf2;font-weight:600}
.eyebrow{color:#a8b2ad}
.live-dot{box-shadow:0 0 12px rgba(20,132,242,.7);animation:dotGlow 2.8s ease-in-out infinite}
h1 span,.section-heading h2 span,.feature-copy h2 span,.closing-content h2 span{background-image:linear-gradient(105deg,#65b2ff 0%,#1684f2 56%,#d1e8ff 100%);background-size:180% auto;animation:accentShimmer 9s ease-in-out infinite}
.button-primary{color:#f5f9ff;background:linear-gradient(118deg,#1684f2,#0b69c7 57%,#2588e8);border:1px solid rgba(122,186,255,.5);box-shadow:0 8px 26px rgba(20,132,242,.2),inset 0 1px rgba(255,255,255,.24)}
.button-primary:hover{box-shadow:0 11px 34px rgba(20,132,242,.24),0 0 26px rgba(20,132,242,.12),inset 0 1px rgba(255,255,255,.6)}
.button-quiet:hover{border-color:rgba(20,132,242,.44);background:rgba(20,132,242,.07)}
.hero-note{color:#8e969f}
.note-icon{border-color:rgba(20,132,242,.35);color:var(--teal)}
.price-note{border-color:rgba(20,132,242,.22);background:linear-gradient(110deg,rgba(20,132,242,.085),rgba(20,132,242,.025));box-shadow:inset 0 1px rgba(255,255,255,.03),0 6px 24px rgba(0,0,0,.1)}
.price-note strong span{color:#bbddff}
.product-stage{perspective:1100px}
.orb-one{background:#69b3ff;box-shadow:0 0 19px rgba(20,132,242,.72)}
.orb-two{background:#acd5ff;box-shadow:0 0 15px rgba(20,132,242,.6)}
.product-stage .stage-glow{background:radial-gradient(ellipse,rgba(20,132,242,.17),rgba(20,132,242,.04) 40%,transparent 72%);filter:blur(15px);animation:stageGlow 7s ease-in-out infinite alternate}
.timeline-window,.qsp-window{border-color:rgba(233,236,242,.15);box-shadow:0 26px 70px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.07)}
.timeline-window{background:linear-gradient(148deg,#24272b,#1d1f22 56%,#191b1d)}
.timeline-top,.qsp-header{background:rgba(255,255,255,.025)}
.timeline-dot:nth-child(1){background:#d96860}.timeline-dot:nth-child(2){background:#d4a65d}.timeline-dot:nth-child(3){background:#1684f2}
.audio-clip-accent{border-color:rgba(20,132,242,.28);background:linear-gradient(90deg,rgba(20,132,242,.22),rgba(20,132,242,.08))}
.waveform{background:repeating-linear-gradient(90deg,rgba(143,196,255,.9) 0 2px,transparent 2px 5px);filter:drop-shadow(0 0 4px rgba(69,151,255,.38))}
.audio-clip{background:linear-gradient(110deg,rgba(54,103,159,.24),rgba(31,48,70,.47));border-color:rgba(117,172,237,.25)}
.audio-clip b{color:#c9e2ff}
.waveform-accent{background:repeating-linear-gradient(90deg,rgba(143,196,255,.97) 0 2px,transparent 2px 5px);background-size:200% 100%;filter:drop-shadow(0 0 7px rgba(69,151,255,.58)) drop-shadow(0 0 18px rgba(30,119,237,.27));animation:waveShimmer 7s linear infinite}
.mini-wave{background:repeating-linear-gradient(90deg,#8fc4ff 0 1px,transparent 1px 3px);filter:drop-shadow(0 0 4px rgba(20,132,242,.4))}
.wave-muted{opacity:.44}
.audio-clip-accent{position:relative;isolation:isolate;border-color:rgba(83,160,255,.42);background:linear-gradient(110deg,rgba(31,103,181,.24),rgba(29,48,72,.45));box-shadow:0 0 16px rgba(36,117,213,.1)}
.audio-clip-accent:after{content:"";position:absolute;z-index:-1;left:11%;right:20%;top:50%;height:19px;transform:translateY(-50%);background:rgba(93,169,255,.24);filter:blur(14px);pointer-events:none}
.qsp-window{background:linear-gradient(145deg,rgba(37,42,51,.97),rgba(29,32,38,.98));backdrop-filter:blur(18px)}
.mini-mark{background:linear-gradient(145deg,#1684f2,#0a58aa);box-shadow:0 0 13px rgba(20,132,242,.2)}
.qsp-wordmark{display:inline-flex;align-items:baseline;gap:1px;color:#e9ecf2;font-family:var(--font-display);font-size:12px;font-weight:800;letter-spacing:-.055em;white-space:nowrap}
.qsp-wordmark i{font-style:normal;color:#1684f2;text-shadow:0 0 12px rgba(20,132,242,.4)}
.qsp-wordmark>b{margin-left:3px;color:#1684f2;font-size:inherit;font-weight:800;letter-spacing:.005em}
.qsp-wordmark>strong{margin-left:2px;color:#dce0e6;font-size:inherit;font-weight:700}
.qsp-header .qsp-wordmark{font-size:12px}
.qsp-tabs .active{color:#e0f0ff;border-bottom-color:var(--teal);box-shadow:0 6px 16px rgba(20,132,242,.08)}
.sound-card.selected{border-color:rgba(20,132,242,.48);background:linear-gradient(105deg,rgba(20,132,242,.12),rgba(20,132,242,.045));box-shadow:0 0 22px rgba(20,132,242,.075),inset 0 1px rgba(255,255,255,.035)}
.sound-card.selected .sound-icon{background:rgba(20,132,242,.16);color:#c5e2ff}
.star{color:#a8d2ff}
.footer-status i,.status-pill.status-testing i{background:#1684f2;box-shadow:0 0 10px rgba(20,132,242,.45)}
.stage-caption{color:#abb3b7}
.proof-strip{background:linear-gradient(90deg,rgba(20,132,242,.025),rgba(255,255,255,.018),rgba(20,132,242,.025));border-color:rgba(233,236,242,.07)}
.proof-inner>span{color:#81bdff}
.proof-inner b{color:#cbd0d5}
.step-card,.feature-list article,.compat-card{background:linear-gradient(145deg,rgba(37,42,51,.67),rgba(29,32,37,.72));border-color:rgba(233,236,242,.105);box-shadow:inset 0 1px rgba(255,255,255,.035),0 12px 34px rgba(0,0,0,.12)}
.step-card{transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease,background .35s ease}
.step-card:hover{transform:translateY(-5px);border-color:rgba(20,132,242,.28);background:linear-gradient(145deg,rgba(20,132,242,.075),rgba(37,42,51,.79));box-shadow:0 18px 42px rgba(0,0,0,.2),0 0 26px rgba(20,132,242,.055),inset 0 1px rgba(255,255,255,.06)}
.step-number,.feature-index{color:#69b3ff}
.step-symbol{background:linear-gradient(145deg,rgba(20,132,242,.16),rgba(20,132,242,.045));border-color:rgba(20,132,242,.19)}
.search-decoration span{border-color:rgba(20,132,242,.24);color:#bedfff;background:rgba(20,132,242,.08)}
.waveform-decoration{opacity:.84;background:repeating-linear-gradient(90deg,rgba(143,196,255,.68) 0 2px,transparent 2px 5px);filter:drop-shadow(0 0 8px rgba(20,132,242,.3))}
.track-decoration span{background:linear-gradient(90deg,rgba(20,132,242,.66),rgba(20,132,242,.12));box-shadow:0 0 12px rgba(20,132,242,.09)}
.track-decoration span:nth-child(3){background:linear-gradient(90deg,rgba(20,132,242,.42),rgba(20,132,242,.08))}
.feature-section{background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(20,132,242,.025) 48%,rgba(255,255,255,.008));border-top-color:rgba(233,236,242,.07);border-bottom-color:rgba(233,236,242,.07)}
.feature-list article{transition:transform .28s ease,border-color .28s ease,background .28s ease}
.feature-list article:hover{transform:translateX(4px);border-color:rgba(20,132,242,.22);background:rgba(20,132,242,.035)}
.feature-icon{color:#84c0ff;border-color:rgba(20,132,242,.25);background:rgba(20,132,242,.075)}
.quote-mark{color:#1684f2;text-shadow:0 0 27px rgba(20,132,242,.23)}
.compat-card{border-color:rgba(20,132,242,.19);background:radial-gradient(ellipse at 10% 2%,rgba(20,132,242,.09),transparent 46%),linear-gradient(140deg,rgba(37,42,51,.86),rgba(29,32,37,.92));box-shadow:inset 0 1px rgba(255,255,255,.04),0 20px 48px rgba(0,0,0,.2)}
.compat-status{border-left-color:rgba(233,236,242,.1)}
.status-pill.status-testing{border-color:rgba(20,132,242,.24);background:rgba(20,132,242,.075);color:#b9ddff}
.closing-section{border-color:rgba(20,132,242,.19);background:linear-gradient(115deg,rgba(37,42,51,.96),rgba(29,32,37,.96));box-shadow:0 20px 58px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04)}
.closing-glow{background:radial-gradient(ellipse,rgba(20,132,242,.18),transparent 70%);animation:stageGlow 8s ease-in-out infinite alternate}
.closing-decoration span{color:rgba(20,132,242,.12)}
.closing-decoration i{background:#78baff;box-shadow:0 0 15px rgba(20,132,242,.72)}
.site-footer{border-top-color:rgba(233,236,242,.09)}
.footer-email:hover{color:#def0ff}
.shortcut-section{padding:112px 0 90px}
.shortcut-section .section-heading{max-width:660px;margin-bottom:42px}
.shortcut-board{overflow:hidden;position:relative;padding:22px 24px 17px;border:1px solid rgba(233,236,242,.14);border-radius:20px;background:linear-gradient(145deg,rgba(37,42,51,.92),rgba(27,30,34,.96));box-shadow:0 28px 75px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.055)}
.shortcut-board:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(20,132,242,.54),transparent);opacity:.7}
.shortcut-topline{display:flex;align-items:center;gap:12px;padding:0 0 18px;border-bottom:1px solid rgba(233,236,242,.09)}
.shortcut-topline .mini-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:#f5f9ff;font-size:13px;font-weight:800}
.shortcut-topline>div{display:flex;flex-direction:column;line-height:1.35}
.shortcut-topline strong{font-size:10px;letter-spacing:.15em;color:#dfe4e5}
.shortcut-topline small{font-size:10px;color:#8f989e}
.shortcut-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.1em;color:#c9e4ff}
.shortcut-live i,.foot-pulse{width:6px;height:6px;border-radius:50%;background:#1684f2;box-shadow:0 0 11px rgba(20,132,242,.6);animation:dotGlow 2.8s ease-in-out infinite}
.shortcut-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-top:20px}
.shortcut-step{min-width:0;position:relative;padding:3px 16px 13px;border-right:1px solid rgba(233,236,242,.075);transition:background .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.shortcut-step:first-child{padding-left:2px}.shortcut-step:last-child{border-right:0;padding-right:2px}
.shortcut-step:hover{transform:translateY(-3px)}
.shortcut-index{font-size:9px;letter-spacing:.13em;font-weight:700;color:#73b9ff}
.key-combo{height:70px;display:flex;align-items:center;gap:8px;margin:6px 0 5px}
.key-combo kbd,.arrow-keys kbd,.enter-demo kbd{min-width:43px;height:40px;display:grid;place-items:center;border:1px solid #454d55;border-bottom-width:3px;border-radius:9px;background:linear-gradient(180deg,#343a40,#282d32);box-shadow:0 5px 11px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.09);color:#e9ecf2;font:600 13px var(--font-body);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.key-combo kbd:last-child{min-width:65px}.key-combo b{color:#77817f;font-weight:500}
.step-open:hover .key-combo kbd{border-color:rgba(20,132,242,.45);box-shadow:0 0 20px rgba(20,132,242,.11),inset 0 1px rgba(255,255,255,.08)}
.shortcut-step h3{margin:16px 0 6px;font-size:14px;letter-spacing:-.02em}
.shortcut-step p{min-height:42px;margin:0;color:#9ea6ac;font-size:11px;line-height:1.6}
.palette-demo{height:128px;margin:8px 0 4px;padding:8px;border:1px solid rgba(20,132,242,.29);border-radius:11px;background:rgba(20,22,23,.95);box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 18px rgba(20,132,242,.055);animation:paletteFloat 6s ease-in-out infinite}
.palette-title{display:flex;align-items:center;gap:6px;height:20px;font-size:8px;color:#e6ecea}.palette-title .mini-mark{width:15px;height:15px;display:grid;place-items:center;border-radius:4px;color:#eaf4ff;font-size:8px;font-weight:800}.palette-title i{margin-left:auto;width:21px;height:3px;border-radius:2px;background:#555b5e}
.palette-input{height:27px;display:flex;align-items:center;gap:7px;padding:0 7px;border:1px solid rgba(233,236,242,.15);border-radius:6px;background:#25292b;color:#dfe5e2;font-size:9px}
.search-glyph{flex:0 0 8px;width:8px;height:8px;border:1px solid #9ca9a2;border-radius:50%;position:relative}.search-glyph:after{content:"";position:absolute;width:4px;height:1px;right:-3px;bottom:-1px;background:#9ca9a2;transform:rotate(45deg)}
.typing-caret{height:12px;width:1px;background:#a1ceff;animation:caretBlink 1s steps(2,end) infinite}
.palette-result{height:28px;display:flex;align-items:center;gap:6px;padding:3px 5px;margin-top:4px;border-radius:5px;color:#bcc3c0}
.palette-result.is-top{background:rgba(20,132,242,.115);outline:1px solid rgba(20,132,242,.34);box-shadow:0 0 16px rgba(20,132,242,.07)}
.palette-result>span:nth-child(2){display:flex;flex-direction:column;line-height:1.2;min-width:0}.palette-result strong{font-size:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.palette-result small{font-size:7px;color:#8f9b95}.palette-result em{margin-left:auto;font-size:6px;letter-spacing:.08em;color:#aed8ff;font-style:normal;white-space:nowrap}.result-play{color:#a1ceff;font-size:8px}
.arrow-keys{height:38px;display:flex;align-items:center;gap:4px;margin:13px 0 8px}.arrow-keys kbd{min-width:25px;height:27px;border-radius:6px;font-size:11px}.arrow-keys kbd:last-of-type{animation:arrowTap 3s ease-in-out infinite}.arrow-keys span{margin-left:5px;color:#8d9792;font-size:8px}
.mini-match-list{display:flex;flex-direction:column;gap:4px;padding:7px;border:1px solid rgba(233,236,242,.08);border-radius:7px;background:rgba(15,17,18,.4)}
.mini-match-list span,.mini-match-list b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9ba39f;font-size:7px;font-weight:500}
.mini-match-list b{padding:4px 5px;border-radius:4px;background:rgba(20,132,242,.11);color:#e7f3ff;font-weight:600}.mini-match-list i{float:right;color:#79bcff;font-size:6px;font-style:normal;letter-spacing:.08em}
.enter-demo{height:38px;display:flex;align-items:center;gap:8px;margin:13px 0 8px}.enter-demo kbd{min-width:70px;height:29px;border-radius:6px;font-size:10px}.enter-demo span{font-size:7px;letter-spacing:.1em;color:#91c8ff}
.mini-timeline{height:53px;position:relative;overflow:hidden;padding:4px 5px 4px 27px;border:1px solid rgba(233,236,242,.1);border-radius:6px;background:linear-gradient(180deg,#1d2023,#191b1d)}
.mini-ruler{height:12px;display:flex;justify-content:space-around;color:#7f8984;font-size:6px;border-bottom:1px solid rgba(233,236,242,.08)}
.mini-track{height:29px;display:flex;align-items:center;gap:5px}.mini-track>b{position:absolute;left:6px;color:#89918d;font-size:6px}
.timeline-insert{height:21px;flex:1;position:relative;overflow:hidden;display:flex;align-items:flex-start;padding:2px 4px;border:1px solid rgba(20,132,242,.38);border-radius:3px;background:linear-gradient(90deg,rgba(20,132,242,.23),rgba(20,132,242,.08));animation:clipArrive 1.2s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 0 13px rgba(20,132,242,.1)}
.timeline-insert>strong{position:relative;z-index:1;color:#eff7ff;font-size:6px;font-weight:600;white-space:nowrap}
.insert-wave{position:absolute;inset:10px 4px 3px;background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(116,184,255,.8) 2px 3px,transparent 3px 5px);opacity:.8;mask-image:linear-gradient(90deg,#000,transparent 92%)}
.mini-playhead{position:absolute;top:0;bottom:0;left:30%;width:1px;background:#f0cf87;box-shadow:0 0 6px rgba(240,207,135,.6);animation:playheadDrift 5s ease-in-out infinite alternate}
.step-connector{position:absolute;z-index:2;top:115px;right:-6px;width:11px;height:11px;border-top:1px solid rgba(20,132,242,.36);border-right:1px solid rgba(20,132,242,.36);transform:rotate(45deg);background:#20242a}
.shortcut-foot{display:flex;align-items:center;gap:8px;margin-top:15px;padding-top:13px;border-top:1px solid rgba(233,236,242,.075);color:#9aa39e;font-size:10px}
.foot-pulse{width:5px;height:5px;flex:0 0 auto}
.bank-hotkey-map{display:grid;grid-template-columns:1fr .9fr;gap:26px;align-items:center;margin-top:17px;padding:18px 5px 3px;border-top:1px solid rgba(233,236,242,.075)}
.bank-hotkey-copy{display:flex;flex-direction:column;align-items:flex-start}
.bank-hotkey-copy>strong{margin-top:6px;color:#e5ece8;font-size:13px;letter-spacing:-.02em}
.bank-hotkey-copy>p{max-width:420px;margin:5px 0 10px;color:#9ea6a2;font-size:10px;line-height:1.55}
.bank-pills{display:flex;gap:6px;flex-wrap:wrap}
.bank-pills span{padding:3px 8px;border:1px solid rgba(233,236,242,.1);border-radius:999px;background:rgba(255,255,255,.025);color:#aab6af;font-size:8px;transition:border-color .2s ease,color .2s ease,background .2s ease}
.bank-pills span:first-child{border-color:rgba(20,132,242,.26);background:rgba(20,132,242,.075);color:#b6dcff}
.bank-pills span:hover{border-color:rgba(20,132,242,.38);color:#e0efff;background:rgba(20,132,242,.06)}
.keypad-demo{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:12px 14px;border:1px solid rgba(233,236,242,.09);border-radius:12px;background:rgba(16,18,19,.38)}
.keypad-grid{display:grid;grid-template-columns:repeat(3,30px);gap:5px}
.keypad-grid kbd{height:27px;display:grid;place-items:center;border:1px solid #41484c;border-bottom-width:2px;border-radius:6px;background:linear-gradient(180deg,#30363a,#24292c);box-shadow:0 3px 6px rgba(0,0,0,.17);color:#dce5df;font:600 9px var(--font-body);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.keypad-grid kbd:hover{transform:translateY(-2px);border-color:rgba(20,132,242,.45);box-shadow:0 0 13px rgba(20,132,242,.1)}
.keypad-caption{display:flex;flex-direction:column;gap:7px;color:#919b95;font-size:8px;line-height:1.4}
.keypad-caption b{display:inline-block;min-width:58px;color:#bfdfff;font-size:8px;font-weight:700}
.shortcut-step:nth-child(1){animation:stepSettle .8s .12s both}.shortcut-step:nth-child(2){animation:stepSettle .8s .22s both}.shortcut-step:nth-child(3){animation:stepSettle .8s .32s both}.shortcut-step:nth-child(4){animation:stepSettle .8s .42s both}
@keyframes ambientDrift{0%{filter:hue-rotate(-4deg);opacity:.84}100%{filter:hue-rotate(7deg);opacity:1}}
@keyframes dotGlow{0%,100%{opacity:.72;box-shadow:0 0 7px rgba(20,132,242,.32)}50%{opacity:1;box-shadow:0 0 13px rgba(20,132,242,.72)}}
@keyframes accentShimmer{0%,100%{background-position:0% center}50%{background-position:100% center}}
@keyframes stageGlow{0%{opacity:.55;transform:scale(.93)}100%{opacity:.9;transform:scale(1.08)}}
@keyframes waveShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes paletteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes caretBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes arrowTap{0%,72%,100%{transform:translateY(0)}80%{transform:translateY(2px)}88%{transform:translateY(0)}}
@keyframes clipArrive{0%{opacity:0;transform:translateX(-14px) scaleX(.84);transform-origin:left center}75%{opacity:1;transform:translateX(1px) scaleX(1.02);transform-origin:left center}100%{opacity:1;transform:translateX(0) scaleX(1);transform-origin:left center}}
@keyframes playheadDrift{0%{left:30%}100%{left:76%}}
@keyframes stepSettle{from{opacity:.72;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.shortcut-section{padding:91px 0 72px}.shortcut-board{padding:19px}.shortcut-step{padding-left:11px;padding-right:11px}.shortcut-step h3{font-size:13px}.shortcut-step p{font-size:10px}.palette-demo{padding:6px}.palette-result em{font-size:5px}}
@media(max-width:760px){.site-nav .nav-cta{border-color:rgba(20,132,242,.34);background:rgba(20,132,242,.08)}.menu-toggle{border-color:rgba(233,236,242,.16);background:rgba(255,255,255,.035)}.menu-toggle[aria-expanded="true"]{border-color:rgba(20,132,242,.42);box-shadow:0 0 14px rgba(20,132,242,.08)}.shortcut-section{padding:75px 0 61px}.shortcut-section .section-heading{margin-bottom:28px}.shortcut-board{padding:17px 15px 14px;border-radius:15px}.shortcut-steps{grid-template-columns:1fr 1fr;row-gap:18px}.shortcut-step{padding:4px 12px 13px!important;border-right:1px solid rgba(233,236,242,.075)}.shortcut-step:nth-child(2){border-right:0}.shortcut-step:nth-child(3),.shortcut-step:nth-child(4){padding-top:15px!important;border-top:1px solid rgba(233,236,242,.075)}.shortcut-step:nth-child(4){border-right:0}.shortcut-step h3{margin-top:12px}.shortcut-step p{min-height:47px}.step-connector{display:none}.palette-demo{max-width:260px}.arrow-keys{margin-top:15px}.mini-timeline{max-width:260px}.shortcut-foot{font-size:9px}.bank-hotkey-map{grid-template-columns:1fr;gap:12px;padding-top:15px}.keypad-demo{max-width:100%;justify-content:start}.product-breadcrumb{font-size:10px;margin-bottom:18px}.hero .eyebrow{flex-wrap:wrap;font-size:9px}.price-note{margin-top:14px}}
@media(max-width:420px){.shortcut-steps{grid-template-columns:1fr}.shortcut-step,.shortcut-step:nth-child(n){padding:13px 2px!important;border-right:0;border-top:1px solid rgba(233,236,242,.075)}.shortcut-step:first-child{border-top:0}.shortcut-step p{min-height:0}.palette-demo{max-width:none;height:128px}.mini-match-list,.mini-timeline{max-width:none}.key-combo,.arrow-keys,.enter-demo{margin-top:8px}.shortcut-board{padding-left:18px;padding-right:18px}.shortcut-topline small{font-size:9px}}
/* Keep every section and its grid/flex children inside narrow phone viewports. */
@media(max-width:760px){
  html,body{width:100%;min-width:100%;max-width:100%;overflow-x:clip}
  body>header.site-header,body>main,body>footer.site-footer{width:100vw;min-width:100vw;max-width:100vw;margin-left:0;margin-right:0}
  .section-shell,.proof-inner{min-width:0;max-width:100%}
  .hero>* , .feature-layout>* , .compat-card>* , .shortcut-board>*{min-width:0}
  .hero h1,.section-heading h2,.feature-copy h2,.compat-copy h2,.closing-content h2{max-width:100%;overflow-wrap:anywhere}
  .hero-copy{width:100%;min-width:0}
  .hero h1{font-size:clamp(34px,10vw,48px);line-height:1.08}
  .hero-lede,.hero-note,.price-note{max-width:100%;min-width:0;overflow-wrap:anywhere}
  .hero-note>span:last-child{min-width:0;overflow-wrap:anywhere}
  .hero-actions{align-items:stretch;flex-direction:column;max-width:100%}
  .hero-actions .button{width:100%;justify-content:space-between}
  .price-note{width:100%}
  .site-header{max-width:100%;min-width:0}
  .brand{min-width:0;max-width:calc(100% - 58px)}
  .brand>span:last-child{overflow:hidden;text-overflow:ellipsis}
  .product-stage{width:100%;max-width:100%;min-width:0}
  .shortcut-board,.keypad-demo,.bank-hotkey-map{min-width:0;max-width:100%}
  .keypad-caption,.keypad-caption>*{min-width:0;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){body:before,.live-dot,.stage-glow,.closing-glow,.waveform-accent,.typing-caret,.arrow-keys kbd:last-of-type,.palette-demo,.mini-playhead,.shortcut-step{animation:none!important}.timeline-insert{animation:none!important;opacity:1;transform:none}.h1 span,h1 span,.section-heading h2 span,.feature-copy h2 span,.closing-content h2 span{animation:none!important}.step-card,.feature-list article{transition:none!important}}

.button-sandbox{color:#b8c9df;border:1px solid rgba(133,162,202,.25);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:inset 0 1px rgba(255,255,255,.06)}.button-sandbox:hover{transform:translateY(-1px);border-color:rgba(114,168,255,.5);background:rgba(114,168,255,.08)}.button-sandbox:disabled{opacity:.55;cursor:not-allowed;transform:none}

button[hidden]{display:none!important}

.intro-video-section{padding-top:56px;padding-bottom:64px}
.intro-video-heading{max-width:700px;margin:0 auto 30px;text-align:center}
.intro-video-heading h2{margin:14px 0 10px;font:800 clamp(34px,4vw,50px)/1.08 var(--font-display);letter-spacing:-.055em}
.intro-video-heading h2 span{color:var(--blue)}
.intro-video-heading p{max-width:560px;margin:0 auto;color:var(--muted);font-size:15px}
.intro-video-frame{position:relative;width:min(100%,980px);margin:0 auto;padding:10px;border:1px solid rgba(114,168,255,.25);border-radius:20px;background:linear-gradient(145deg,rgba(29,37,51,.96),rgba(15,18,24,.98));box-shadow:0 22px 70px rgba(0,0,0,.34),0 0 45px rgba(42,120,214,.09),inset 0 1px rgba(255,255,255,.08);overflow:hidden}
.intro-video-frame:before{content:"";position:absolute;inset:0 12% auto;height:1px;background:linear-gradient(90deg,transparent,rgba(135,185,255,.6),transparent);pointer-events:none;z-index:1}
.intro-video-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#090b10}
.intro-video-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 10px 3px;color:#8d9aaf;font-size:11px;letter-spacing:.025em}
.intro-video-caption span:first-child{display:inline-flex;align-items:center;gap:9px;color:#d7dfed;font-weight:700}
.intro-video-caption i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px rgba(114,168,255,.8)}
@media(max-width:760px){.intro-video-section{padding-top:36px;padding-bottom:48px}.intro-video-heading{margin-bottom:21px}.intro-video-heading h2{font-size:36px}.intro-video-heading p{font-size:13px}.intro-video-frame{padding:6px;border-radius:14px}.intro-video-frame iframe{border-radius:9px}.intro-video-caption{align-items:flex-start;flex-direction:column;gap:3px;padding:10px 7px 3px;font-size:10px}}
.samarshop-logo{position:relative;display:inline-flex;flex:0 0 32px;width:32px;height:32px;overflow:visible;background:transparent;vertical-align:middle;line-height:0}.samarshop-logo>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain}.footer-brand .samarshop-logo{flex-basis:24px;width:24px;height:24px}
/* Actual, non-interactive QSP captures replace the former illustrated mockups. */
.hero-catalog{grid-template-columns:1fr;min-height:auto;padding-bottom:72px}
.hero-catalog .hero-copy{max-width:760px}
.catalog-section{padding-top:55px;padding-bottom:100px}
.catalog-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:34px;align-items:center;margin-top:34px;padding:16px;border:1px solid rgba(145,165,198,.18);border-radius:17px;background:#111318}
.catalog-card>img{display:block;width:100%;height:auto;object-fit:contain;border-radius:9px;background:#111}
.catalog-card-copy{padding:16px 18px}
.catalog-category{color:#8dbaf0;font:700 10px/1.5 ui-monospace,monospace;letter-spacing:.08em}
.catalog-card-copy h3{margin:12px 0 8px;font:700 clamp(25px,3vw,36px)/1.15 var(--font-display);letter-spacing:-.04em}
.catalog-card-copy p{max-width:370px;margin:0 0 23px;color:var(--muted);font-size:14px;line-height:1.75}
.quick-search-shot{width:min(100%,545px);margin:34px auto 0;padding:10px;border:1px solid rgba(145,165,198,.18);border-radius:16px;background:#111318;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.quick-search-shot img{display:block;width:100%;height:auto;object-fit:contain;border-radius:8px}
.quick-search-shot figcaption{padding:10px 4px 2px;color:#9aa6b7;font-size:11px;line-height:1.5}
@media(max-width:760px){.hero-catalog{padding-bottom:52px}.catalog-section{padding-top:30px;padding-bottom:70px}.catalog-card{grid-template-columns:1fr;gap:18px;margin-top:25px;padding:8px}.catalog-card-copy{padding:11px 9px 15px}.quick-search-shot{margin-top:25px;padding:7px}}
/* Keep the site navigation in normal document flow while scrolling. */
.site-header{position:relative;top:auto;z-index:5}
.footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;color:#98a7ba;font-size:10px}.footer-links a{color:inherit;text-decoration:none}.footer-links a:hover{color:#eaf1ff}
.footer-contact{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:10px}.footer-contact a{color:#98a7ba;text-decoration:none}.footer-contact a:hover{color:#eaf1ff}
@media(max-width:760px){.footer-links{grid-column:1/-1;grid-row:3;justify-content:flex-start;gap:14px}.footer-contact{grid-column:1/-1;grid-row:4;align-items:flex-start}}

/* A concise, keyboard-friendly FAQ adds buyer clarity without fake reviews or urgency. */
.faq-section{padding-top:86px;padding-bottom:100px}
.faq-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:27px}
.faq-heading h2{margin:12px 0 8px;font:800 clamp(30px,4vw,44px)/1.12 var(--font-display);letter-spacing:-.045em}
.faq-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.faq-all-link{display:inline-flex;align-items:center;gap:10px;flex:none;padding-bottom:4px;color:#a9caff;text-decoration:none;font-size:12px;font-weight:700}
.faq-all-link:hover{color:#fff}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.faq-grid details{align-self:start;border:1px solid rgba(145,165,198,.16);border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));transition:border-color .2s ease,background .2s ease}
.faq-grid details[open]{border-color:rgba(114,168,255,.32);background:linear-gradient(145deg,rgba(20,132,242,.075),rgba(255,255,255,.015))}
.faq-grid summary{position:relative;list-style:none;cursor:pointer;padding:17px 46px 17px 18px;color:#e9eef7;font:700 13px/1.45 var(--font-display)}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary:after{content:'+';position:absolute;right:17px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:22px;height:22px;border:1px solid rgba(145,165,198,.2);border-radius:50%;color:#a9caff;font:500 16px/1 var(--font-body)}
.faq-grid details[open] summary:after{content:'−'}
.faq-grid details p{margin:0;padding:0 18px 18px;color:#aab5c5;font-size:12px;line-height:1.7}
.faq-grid summary:focus-visible{outline:2px solid #88b9ff;outline-offset:-3px;border-radius:12px}
@media(max-width:760px){.faq-section{padding-top:62px;padding-bottom:72px}.faq-heading{align-items:flex-start;flex-direction:column;gap:10px}.faq-grid{grid-template-columns:1fr}}

/* Focus the storefront on QSP's number-key workflow; keep all examples static. */
.hero-catalog{padding-top:78px;padding-bottom:64px}
.hero-catalog .hero-copy{max-width:800px}
.hero-catalog h1{max-width:780px}
.proof-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.catalog-section{padding-top:82px}
.catalog-section>.section-heading{max-width:720px}
.catalog-section>.section-heading h2{font-size:clamp(34px,4vw,48px)}
.catalog-card{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(24px,4vw,52px);padding:14px;border-color:rgba(143,175,221,.19);border-radius:20px;background:linear-gradient(145deg,#171b22,#111318);box-shadow:0 24px 65px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035)}
.catalog-card>img{aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:12px;background:#0b1017}
.catalog-card-copy{padding:20px 20px 20px 0}
.catalog-card-copy h3{max-width:390px;font-size:clamp(27px,3vw,39px);line-height:1.13}
.catalog-card-copy p{max-width:420px;margin-bottom:18px;line-height:1.7}
.shortcut-options{display:grid;gap:9px;margin:0 0 23px}
.shortcut-options>div{display:grid;gap:5px;padding:10px 11px;border:1px solid rgba(229,236,248,.09);border-radius:10px;background:rgba(255,255,255,.025)}
.shortcut-label{color:#90a2bb;font:700 9px/1.3 var(--font-body);letter-spacing:.1em}
.shortcut-options kbd{color:#e9f1ff;font:600 12px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.08em;white-space:nowrap}
.quick-search-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.quick-search-flow article{min-width:0;padding:19px 20px;border:1px solid rgba(145,165,198,.14);border-radius:14px;background:linear-gradient(145deg,rgba(32,38,48,.8),rgba(18,21,27,.9))}
.quick-search-index{color:#88baff;font:700 10px/1.4 ui-monospace,monospace;letter-spacing:.08em}
.quick-search-flow h3{margin:12px 0 6px;font:700 15px/1.3 var(--font-display);letter-spacing:-.02em}
.quick-search-flow p{margin:0;color:#9aa6b7;font-size:12px;line-height:1.65}
@media(max-width:760px){.hero-catalog{padding-top:54px;padding-bottom:48px}.proof-inner{grid-template-columns:1fr;gap:11px}.catalog-section{padding-top:54px}.catalog-card{grid-template-columns:1fr;gap:12px;padding:9px}.catalog-card-copy{padding:13px 10px 17px}.shortcut-options kbd{font-size:11px}.quick-search-flow{grid-template-columns:1fr;gap:9px;margin-top:22px}.quick-search-flow article{padding:15px 16px}.quick-search-flow h3{margin:7px 0 4px}}
.bank-switch-note{display:grid;gap:7px;margin:0 0 22px;padding:10px 11px;border:1px solid rgba(114,168,255,.15);border-radius:10px;background:rgba(114,168,255,.035)}
.bank-switch-note>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.bank-switch-note kbd{min-width:31px;padding:4px 8px;text-align:center;border:1px solid rgba(151,178,218,.24);border-bottom-width:2px;border-radius:6px;background:linear-gradient(180deg,#2b3038,#20242b);color:#e8f1ff;font:600 11px/1.3 ui-monospace,Consolas,monospace}
.bank-switch-note>div>span{margin-left:3px;color:#9aa6b7;font-size:11px}
.catalog-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.catalog-card-actions .button{min-height:42px}
@media(max-width:460px){.catalog-card-actions{display:grid;grid-template-columns:1fr}.catalog-card-actions .button{width:100%;justify-content:center}}
.catalog-section>.section-heading .qsp-brand-heading{display:grid;justify-items:start;gap:4px;margin:14px 0 10px;text-align:left;font-size:clamp(34px,4vw,48px);line-height:1.05;letter-spacing:-.045em}
.qsp-brand-name{font:800 clamp(31px,3.6vw,43px)/1 var(--font-display);letter-spacing:-.065em;color:#e9ecf2;white-space:nowrap}
.qsp-brand-q{display:inline-block;margin-right:-.025em;color:#1684f2;font-size:1.16em;font-weight:900;vertical-align:-.035em}
.qsp-brand-sfx{color:#1684f2;font-weight:800}
.section-heading .qsp-brand-name,.section-heading .qsp-brand-q,.section-heading .qsp-brand-rest,.section-heading .qsp-brand-sfx,.section-heading .qsp-brand-pro{background:none!important;background-image:none!important;animation:none!important;-webkit-text-fill-color:currentColor}
.section-heading .qsp-brand-q,.section-heading .qsp-brand-sfx{-webkit-text-fill-color:#1684f2}
.section-heading .qsp-brand-rest,.section-heading .qsp-brand-pro{color:#e9ecf2;-webkit-text-fill-color:#e9ecf2}
.qsp-brand-heading small{color:#9aa4b2;font:600 9px/1.2 var(--font-body);letter-spacing:.14em}
@media(max-width:420px){.qsp-brand-name{font-size:clamp(28px,8vw,35px)}}
.catalog-card-actions .button-get-it-now{min-width:194px;min-height:58px;justify-content:center;gap:10px;padding-inline:25px;border-radius:12px;font-size:16px;font-weight:800;letter-spacing:.015em;box-shadow:0 10px 30px rgba(20,132,242,.34),inset 0 1px rgba(255,255,255,.34);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.catalog-card-actions .button-get-it-now:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 36px rgba(20,132,242,.42),0 0 22px rgba(20,132,242,.18),inset 0 1px rgba(255,255,255,.42)}
.catalog-card-actions .button-get-it-now:active{transform:translateY(0) scale(.99)}
.catalog-card-actions .button-get-it-now>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.catalog-card-actions .button-get-it-now:hover>svg{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.catalog-card-actions .button-get-it-now,.catalog-card-actions .button-get-it-now>svg{transition:none}}