/*! Synth2Software — (c) 2026 KitRealm. All rights reserved. */ :root{--cyan: hsl(187 68% 60%);--cyan-hi: hsl(187 82% 70%);--cyan-dim: hsl(191 30% 52%);--cyan-glow: hsl(187 90% 60% / .4);--cyan-soft: hsl(187 68% 60% / .1);--cyan-line: hsl(187 68% 60% / .28);--bg: hsl(220 9% 8%);--bg-2: hsl(220 10% 6%);--panel: hsl(220 8% 15%);--panel-2: hsl(220 8% 20%);--screen: hsl(219 16% 5%);--line: hsl(220 9% 26%);--line-2: hsl(220 10% 34%);--edge-hi: hsl(220 14% 42% / .6);--tx: hsl(216 16% 91%);--dim: hsl(220 8% 62%);--dimmer: hsl(220 8% 46%);--ok: hsl(140 60% 55%);--amber: hsl(38 92% 58%);--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--metal: linear-gradient(180deg, hsl(220 8% 22%), hsl(220 8% 16%) 52%, hsl(220 10% 12%));--brush: repeating-linear-gradient(90deg, hsl(0 0% 100% / .022) 0 1px, transparent 1px 3px);--bevel: inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 hsl(220 40% 2% / .85), 0 1px 2px hsl(220 40% 2% / .5);--maxw: 1200px;--ease: cubic-bezier(.22, 1, .36, 1);--ease-io: cubic-bezier(.65, .05, .36, 1)}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--tx);font:400 16.5px/1.65 var(--sans);letter-spacing:-.005em;overflow-x:hidden;-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}picture,svg{max-width:100%;display:block}a{color:var(--cyan);text-decoration:none}button{font:inherit}h1,h2,h3,h4{line-height:1.12;letter-spacing:-.028em;margin:0;font-weight:700}p{margin:0}body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(1100px 620px at 78% -8%,hsl(187 70% 42% / .13),transparent 62%),radial-gradient(820px 520px at 6% 18%,hsl(200 70% 38% / .09),transparent 60%),var(--brush),var(--bg)}body:after{content:"";position:fixed;z-index:-1;pointer-events:none;width:60vw;height:60vw;left:55%;top:-18vw;border-radius:50%;background:radial-gradient(circle,hsl(187 90% 55% / .07),transparent 66%);filter:blur(24px);animation:drift 26s var(--ease-io) infinite alternate}@keyframes drift{0%{transform:translate3d(-6%,0,0) scale(1)}to{transform:translate3d(8%,5vw,0) scale(1.16)}}.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}.eyebrow{font:700 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-dim);display:inline-flex;align-items:center;gap:9px}.eyebrow:before{content:"";width:22px;height:1px;background:var(--cyan-line)}h2.sect{font-size:clamp(28px,4.2vw,44px);margin:16px 0 14px}.lede{color:var(--dim);font-size:clamp(16px,1.6vw,18.5px);max-width:62ch}.grad{background:linear-gradient(96deg,var(--cyan-hi),var(--cyan) 42%,hsl(200 60% 62%));-webkit-background-clip:text;background-clip:text;color:transparent}.btn{--b: var(--cyan);position:relative;display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:11px;border:1px solid transparent;font:600 15px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;transition:transform .38s var(--ease),box-shadow .38s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);will-change:transform}.btn.primary{background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));color:#081a21;font-weight:700;box-shadow:0 1px #ffffff4d inset,0 6px 22px -6px var(--cyan-glow),0 2px 6px #03040780}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 1px #ffffff57 inset,0 14px 34px -8px var(--cyan-glow),0 3px 10px #0304078c}.btn.ghost{background:var(--metal);color:var(--tx);border-color:var(--line);box-shadow:var(--bevel)}.btn.ghost:hover{transform:translateY(-2px);border-color:var(--line-2);color:#fff}.btn.link{padding:6px 0;background:none;color:var(--cyan)}.btn.link:after{content:"\2192";transition:transform .35s var(--ease);display:inline-block}.btn.link:hover:after{transform:translate(5px)}.btn:active{transform:translateY(0) scale(.985)}/* A disabled button MUST look disabled. There was no rule for this, so one rendered identical to a live one — full cyan, full glow — and clicking it did nothing, which reads as a broken site rather than a blocked action. */.btn[disabled],.btn:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.65);box-shadow:none;transform:none}.btn[disabled]:hover,.btn:disabled:hover{transform:none;box-shadow:none}.btn.big{padding:16px 28px;font-size:16.5px;border-radius:13px}header{position:sticky;top:0;z-index:60;transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease),padding .4s var(--ease);border-bottom:1px solid transparent;padding:14px 0}header.stuck{background:#0e0f11d1;backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom-color:#3c4048b3;padding:8px 0}.nav{display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:11px;margin-right:auto}.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan-glow),0 0 3px var(--cyan);animation:led 3.4s ease-in-out infinite}@keyframes led{0%,to{opacity:1}50%{opacity:.55}}.brand b{font:700 14.5px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase}.nav nav{display:flex;gap:20px}.nav nav a{color:var(--dim);font-size:14.5px;font-weight:500;position:relative;transition:color .3s var(--ease)}.nav nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--cyan);transition:right .4s var(--ease)}.nav nav a:hover{color:var(--tx)}.nav nav a:hover:after{right:0}.burger{display:none;background:none;border:0;color:var(--tx);padding:8px;cursor:pointer}.hero{padding:clamp(56px,9vw,116px) 0 0;text-align:center}.hero h1{font-size:clamp(38px,7.4vw,82px);margin:20px auto;max-width:17ch}.hero .lede{margin:0 auto;text-align:center;font-size:clamp(17px,1.9vw,20px)}.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}.hero-note{margin-top:16px;font:500 13px/1 var(--mono);color:var(--dimmer);letter-spacing:.04em}.shot{position:relative;margin-top:clamp(38px,6vw,70px);border-radius:16px;box-shadow:0 2px 6px -2px #03040759,0 18px 40px -26px #0304078c;perspective:1400px}.shot img{border-radius:16px}.shot:after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:60px;background:radial-gradient(ellipse at center,var(--cyan-glow),transparent 70%);filter:blur(18px);z-index:-1;opacity:.8}.tilt{transition:transform .5s var(--ease);transform-style:preserve-3d}.strip{margin-top:clamp(56px,8vw,92px);padding:20px 0;border-block:1px solid hsl(220 9% 26% / .55);background:#0e0f1180;overflow:hidden;position:relative}.strip:before,.strip:after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:2;pointer-events:none}.strip:before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.strip:after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}.strip .track{display:flex;gap:46px;width:max-content;animation:slide 42s linear infinite}.strip:hover .track{animation-play-state:paused}.strip span{font:600 12.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);white-space:nowrap;transition:color .3s var(--ease)}.strip span:hover{color:var(--cyan-dim)}@keyframes slide{to{transform:translate(-50%)}}section{padding:clamp(66px,10vw,128px) 0;position:relative}.sect-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)}.sect-head.mid{margin-inline:auto;text-align:center}.sect-head.mid .eyebrow:before{display:none}.pillars{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}.card{position:relative;padding:28px 26px 30px;border-radius:14px;background:var(--metal);border:1px solid var(--line);box-shadow:var(--bevel);overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}.card:before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),var(--cyan-soft),transparent 62%);transition:opacity .45s var(--ease)}.card:hover{transform:translateY(-5px);border-color:var(--cyan-line);box-shadow:var(--bevel),0 22px 50px -22px #030407f2,0 0 0 1px var(--cyan-line)}.card:hover:before{opacity:1}.card .ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#54cede1c;border:1px solid var(--cyan-line);color:var(--cyan);margin-bottom:16px}.card .ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.card h3{font-size:19px;margin-bottom:9px}.card p{color:var(--dim);font-size:15px}.card ul{margin:14px 0 0;padding:0;list-style:none}.card li{font:500 13px/1.5 var(--mono);color:var(--dimmer);padding-left:16px;position:relative;margin-top:6px;letter-spacing:-.01em}.card li:before{content:"\25b8";position:absolute;left:0;color:var(--cyan-dim)}.feat{display:grid;gap:clamp(28px,5vw,66px);align-items:center;grid-template-columns:.85fr 1.15fr}.feat+.feat{margin-top:clamp(64px,9vw,120px)}.feat:has(>.frame:first-child){grid-template-columns:1.15fr .85fr}.feat.flip>.feat-copy{order:2}.feat h3{font-size:clamp(24px,3vw,33px);margin:14px 0}.feat p{color:var(--dim)}.feat .kv{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px}.feat .kv li{display:flex;gap:11px;font-size:15px;color:var(--tx)}.feat .kv svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.frame{border-radius:14px;box-shadow:0 2px 6px -2px #03040759,0 16px 34px -24px #0304078c;transition:transform .6s var(--ease)}.frame:hover{transform:translateY(-4px) scale(1.008)}.frame img{border-radius:14px}.modes{margin-top:clamp(28px,4vw,46px)}.mode-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:12px;background:var(--metal);border:1px solid var(--line);box-shadow:var(--bevel);margin-bottom:clamp(24px,3.5vw,38px);flex-wrap:wrap}.mode-tabs button{appearance:none;border:1px solid transparent;background:none;cursor:pointer;color:var(--dim);padding:10px 20px;border-radius:8px;font:700 12px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}.mode-tabs button:hover{color:var(--tx)}.mode-tabs button[aria-selected=true]{color:var(--cyan);background:#54cede1a;border-color:var(--cyan-line);box-shadow:0 0 18px -4px var(--cyan-glow),inset 0 1px #ffffff0f}.mode-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,66px);align-items:center}.mode-copy h3{font-size:clamp(23px,2.9vw,32px);margin:12px 0 13px}.mode-copy>p{color:var(--dim)}.mode-copy .kv{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px}.mode-copy .kv li{display:flex;gap:11px;font-size:15px}.mode-copy .kv svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mode-copy .tagline{display:inline-block;margin-top:20px;padding:9px 14px;border-radius:9px;background:#54cede12;border:1px solid var(--cyan-line);font:500 13.5px/1.4 var(--mono);color:var(--cyan-dim)}.mode-copy,.mode-shot{transition:opacity .34s var(--ease),transform .34s var(--ease)}.modes.swapping .mode-copy{opacity:0;transform:translateY(9px)}.modes.swapping .mode-shot{opacity:0;transform:translateY(9px) scale(.995)}.mode-shot img{border-radius:14px}@media (max-width: 940px){.mode-stage{grid-template-columns:1fr}.mode-tabs{width:100%;justify-content:center}.mode-tabs button{flex:1;padding:10px 12px}}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-block:1px solid hsl(220 9% 26% / .55);padding:clamp(34px,5vw,52px) 0}.stat b{display:block;font:700 clamp(28px,4vw,42px)/1 var(--sans);letter-spacing:-.03em;color:var(--cyan);text-shadow:0 0 26px var(--cyan-glow)}.stat span{display:block;margin-top:8px;font:600 11.5px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer)}.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gal figure{margin:0;border-radius:12px;overflow:hidden;cursor:zoom-in;position:relative;transition:transform .5s var(--ease)}.gal figure:hover{transform:translateY(-4px)}.gal picture{aspect-ratio:16 / 11;display:block}.gal img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease)}.gal figure:hover img{transform:scale(1.04)}.gal figcaption{position:absolute;inset:auto 0 0;padding:22px 14px 11px;background:linear-gradient(transparent,#060709ed);font:600 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-dim)}.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#060709ed;backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}.lb.on{opacity:1;visibility:visible}.lb img{max-width:94vw;max-height:86vh;border-radius:12px;box-shadow:0 24px 60px -28px #030407bf;transform:scale(.94);transition:transform .5s var(--ease)}.lb.on img{transform:scale(1)}.lb .x{position:absolute;top:22px;right:24px;background:none;border:0;color:var(--dim);font-size:30px;cursor:pointer;line-height:1;transition:color .3s,transform .3s var(--ease)}.lb .x:hover{color:#fff;transform:rotate(90deg)}.lb .cap{position:absolute;bottom:26px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.listbox{padding:26px;border-radius:14px;background:#0e0f1199;border:1px solid var(--line);box-shadow:var(--bevel)}.listbox h4{font:700 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font:500 12.5px/1 var(--mono);padding:8px 11px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--dim);transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}.chip:hover{color:var(--cyan);border-color:var(--cyan-line);transform:translateY(-2px)}.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.tier{position:relative;padding:30px 28px 32px;border-radius:16px;background:var(--metal);border:1px solid var(--line);box-shadow:var(--bevel);transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}.tier:hover{transform:translateY(-6px);box-shadow:var(--bevel),0 26px 60px -26px #030407f2}.tier.feature{border-color:var(--cyan-line);box-shadow:var(--bevel),0 0 0 1px var(--cyan-line),0 26px 70px -30px var(--cyan-glow)}.tier.feature:before{content:"Most popular";position:absolute;top:-11px;left:28px;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#081a21;background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));padding:6px 11px;border-radius:6px;box-shadow:0 4px 14px -4px var(--cyan-glow)}.tier h3{font-size:17px;letter-spacing:.01em}.tier .price{display:flex;align-items:baseline;gap:6px;margin:16px 0 4px}.tier .price b{font:700 clamp(34px,4.4vw,46px)/1 var(--sans);letter-spacing:-.035em}.tier .price i{font-style:normal;color:var(--dimmer);font-size:14px;font-family:var(--mono)}.tier .sub{color:var(--dimmer);font-size:13.5px;min-height:40px}.tier ul{margin:20px 0 24px;padding:0;list-style:none;display:grid;gap:10px}.tier li{display:flex;gap:10px;font-size:14.5px;color:var(--tx)}.tier li svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;stroke:var(--cyan);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.tier li.off{color:var(--dimmer)}.tier li.off svg{stroke:var(--dimmer)}.tier .btn{width:100%;justify-content:center}.pay-note{margin-top:26px;text-align:center;font-size:13px;color:var(--dimmer)}.pay-marks{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap}.pay-marks span{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer);padding:7px 12px;border:1px solid var(--line);border-radius:7px;background:#0e0f1180}.faq{max-width:820px;margin-inline:auto}details{border-bottom:1px solid hsl(220 9% 26% / .6);padding:4px 0}summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-weight:600;font-size:16.5px;transition:color .3s var(--ease)}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;color:var(--cyan);font-size:22px;font-weight:400;transition:transform .4s var(--ease)}details[open] summary:after{transform:rotate(45deg)}summary:hover{color:var(--cyan)}details .a{padding:0 40px 20px 0;color:var(--dim);font-size:15.5px;animation:fade .45s var(--ease)}@keyframes fade{0%{opacity:0;transform:translateY(-5px)}}.final{text-align:center;padding:clamp(70px,10vw,130px) 0;position:relative}.final:before{content:"";position:absolute;left:50%;top:20%;translate:-50% 0;width:min(760px,88vw);aspect-ratio:2/1;z-index:-1;background:radial-gradient(ellipse,var(--cyan-glow),transparent 66%);filter:blur(30px)}.final h2{font-size:clamp(32px,5.4vw,58px);max-width:20ch;margin:16px auto 18px}footer{border-top:1px solid hsl(220 9% 26% / .6);padding:44px 0 54px;background:#0e0f1199}.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px}footer h5{font:700 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--cyan-dim);margin:0 0 14px}footer a{display:block;color:var(--dim);font-size:14.5px;margin-bottom:9px;transition:color .3s var(--ease),transform .3s var(--ease)}footer a:hover{color:var(--cyan);transform:translate(3px)}.f-bot{margin-top:38px;padding-top:22px;border-top:1px solid hsl(220 9% 26% / .5);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--dimmer)}.rv{opacity:0;transform:translateY(26px)}.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}.rv.d1.in{transition-delay:.07s}.rv.d2.in{transition-delay:.14s}.rv.d3.in{transition-delay:.21s}.rv.d4.in{transition-delay:.28s}.rv.left{transform:translate(-30px)}.rv.right{transform:translate(30px)}.rv.left.in,.rv.right.in{transform:none}@media (max-width: 940px){.pillars,.tiers,.gal{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr);gap:28px}.feat,.two{grid-template-columns:1fr}.feat.flip>.feat-copy{order:0}.f-grid{grid-template-columns:1fr 1fr}}@media (max-width: 1200px){.nav nav{display:none}.burger{display:block}.nav.open nav{display:flex;position:absolute;inset:100% 0 auto;flex-direction:column;background:#0e0f11f7;backdrop-filter:blur(14px);padding:22px 24px;gap:18px;border-bottom:1px solid var(--line)}}#navCta,#navAuth{white-space:nowrap}#navAuth .u-pill{white-space:nowrap;vertical-align:middle}@media (max-width: 620px){.pillars,.tiers,.gal{grid-template-columns:1fr}.cta-row .btn{width:100%;justify-content:center}.f-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.rv{opacity:1;transform:none}body:after{animation:none}.strip .track{animation:none}}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}.demo-play{display:none}/* The hero screenshot is left completely alone now — nothing floats on top of it. The only way into the demo is the permanent launcher pinned bottom-right (.s2s-demo-dock), which is always in reach instead of only while the hero is on screen. Un-hide .demo-play above to put the in-image pill back. */.dp-ico{width:33px;height:33px;flex:0 0 33px;border-radius:50%;display:grid;place-items:center;font-size:11px;padding-left:2px;background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));color:#081a21;box-shadow:0 4px 14px -4px var(--cyan-glow),0 0 0 1px #ffffff40 inset;transition:transform .4s var(--ease)}.s2s-demo-dock:hover .dp-ico{transform:scale(1.09)}.shot[data-demo=live] .demo-play,.shot[data-demo=loading] .demo-play{display:none}.shot[data-demo=live] picture,.shot[data-demo=loading] picture{display:none}.shot iframe{width:100%;aspect-ratio:2560 / 1714;border:0;border-radius:16px;background:transparent;display:block}.demo-badge{position:absolute;top:20px;right:20px;z-index:3;font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#081a21;background:linear-gradient(180deg,var(--cyan-hi),var(--cyan));padding:7px 11px;border-radius:6px;box-shadow:0 4px 16px -4px var(--cyan-glow)}.demo-note{margin-top:14px;font:500 12.5px/1.5 var(--mono);color:var(--dimmer)}.shot[data-demo=loading]:before{content:"loading the interface\2026";position:absolute;inset:0;z-index:2;display:grid;place-items:center;border-radius:16px;background:var(--screen);font:600 13px/1 var(--mono);letter-spacing:.1em;color:var(--cyan-dim)}#navAuth.is-user{color:var(--cyan)}#navAuth .u-pill{display:inline-block;margin-left:7px;padding:3px 7px;border-radius:5px;background:#54cede24;border:1px solid var(--cyan-line);font:700 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase} /* The hero screenshot was rendering full container width — 1152px wide and over 800px tall, which pushed everything below it off the first screen. Inset it so it reads as a product shot instead of a wall. The live interface now has its own full-width page at /interface. */ .shot{max-width:820px;margin-inline:auto}/* NOT `.hero .shot`: the builder drops the .hero class when it renders the published document, so that selector matches locally and never on the live site. */ /* /interface — the demo on its own page, given the room it wanted. */ .demo-page{padding:clamp(24px,4vw,40px) 0 clamp(48px,7vw,86px)} .demo-wide{width:100%;max-width:1460px;margin-inline:auto;padding-inline:clamp(16px,3vw,30px)} .demo-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,20px)} .demo-head h1{font-size:clamp(21px,2.9vw,32px);margin:9px 0 0} .demo-stage{position:relative;margin-inline:auto;border-radius:16px;width:min(100%,760px);width:min(100%,max(720px,(100vh - 250px) * 1.4936));width:min(100%,max(720px,(100svh - 250px) * 1.4936));box-shadow:0 2px 6px -2px #03040759,0 18px 40px -26px #0304078c} .demo-stage iframe{width:100%;aspect-ratio:2560 / 1714;border:0;border-radius:16px;background:var(--screen);display:block} .demo-foot{display:flex;gap:clamp(18px,3vw,40px);align-items:center;justify-content:space-between;flex-wrap:wrap;margin:clamp(18px,2.6vw,26px) auto 0;max-width:1100px} .demo-foot .lede{font-size:15px;max-width:64ch} .demo-foot-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap} @media (max-width: 760px){.demo-stage iframe{aspect-ratio:3 / 4}} /* the demo popup — covers the whole page INCLUDING the sticky header. Header is z-index 60 and the image lightbox is 200, so this sits above both. Hidden with visibility, never display:none and never detached: the iframe has to survive a minimise with its state intact. */ .s2s-demo{position:fixed;inset:0;z-index:400;display:flex;background:var(--bg-2); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease),visibility .3s} .s2s-demo.on{opacity:1;visibility:visible;pointer-events:auto} .s2s-demo:focus{outline:none} .s2s-demo iframe{flex:1;width:100%;height:100%;border:0;display:block; background:var(--screen)} body.s2s-demo-open{overflow:hidden} /* The way out if the in-app buttons ever fail to bind. Without it a broken handshake means a visitor is trapped in a full-screen frame. */ .s2s-demo-esc{position:absolute;right:16px;bottom:16px;z-index:2; display:inline-flex;align-items:center;gap:9px;padding:9px 15px; border:1px solid hsl(220 14% 44% / .5);border-radius:999px; background:hsl(220 12% 8% / .82);backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);color:var(--dim); font:600 12.5px/1 var(--sans);cursor:pointer; transition:color .3s var(--ease),border-color .3s var(--ease), transform .3s var(--ease)} .s2s-demo-esc:hover{color:var(--tx);border-color:var(--cyan-line); transform:translateY(-2px)} .s2s-demo-esc kbd{font:600 10.5px/1 var(--mono);letter-spacing:.08em; padding:4px 6px;border-radius:5px;background:var(--panel); border:1px solid var(--line);color:var(--dimmer)} /* Minimised: the demo keeps running, the page comes back. */ .s2s-demo-dock{position:fixed;right:18px;bottom:18px;z-index:390; display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 8px; border:1px solid var(--cyan-line);border-radius:999px; background:hsl(220 12% 8% / .88);backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); box-shadow:0 14px 36px -12px hsl(220 40% 2% / .9), 0 0 0 1px var(--cyan-line),inset 0 1px 0 hsl(0 0% 100% / .07); color:var(--tx);cursor:pointer; transition:transform .38s var(--ease),box-shadow .38s var(--ease)} .s2s-demo-dock:hover{transform:translateY(-2px); box-shadow:0 20px 46px -14px hsl(220 40% 2% / .95), 0 0 0 1px var(--cyan),inset 0 1px 0 hsl(0 0% 100% / .09)} .s2s-demo-dock b{font-size:13.5px;letter-spacing:-.015em;white-space:nowrap} .s2s-demo-dock i{font-style:normal;font:500 11.5px/1 var(--mono); color:var(--dim);white-space:nowrap;margin-left:8px} @media (max-width: 620px){.s2s-demo-dock i{display:none}} @media (prefers-reduced-motion: reduce){.s2s-demo{transition:none}} /* ── the dock ──────────────────────────────────────────────────────────────── One bar, bottom centre, on every public page. "Liquid glass": a heavy backdrop blur plus saturation so whatever scrolls underneath tints it, a bright hairline along the top edge where light would catch, and a soft inner shadow at the bottom so it reads as a solid pane rather than a translucent rectangle. Colour, radius and glow come from /api/theme.css so the owner can change them in Settings without a deploy. */ /* Every number the dock editor can move is a var with the ORIGINAL hard-coded value as its fallback, so a site that has never opened /admin/dock renders exactly as before and /api/theme.css only has to override what changed. */ .s2s-dock{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:390; display:flex;align-items:center;gap:var(--dock-gap,6px);padding:8px; border-radius:var(--dock-radius,18px); background:hsl(220 14% 7% / calc(var(--dock-tint,12) / 100 + .48)); backdrop-filter:blur(var(--dock-blur,20px)) saturate(180%); -webkit-backdrop-filter:blur(var(--dock-blur,20px)) saturate(180%); border:1px solid hsl(0 0% 100% / calc(var(--dock-border,10) / 100)); box-shadow:0 1px 0 hsl(0 0% 100% / .13) inset, 0 -12px 24px -18px hsl(220 40% 2% / .9) inset, 0 18px 44px -16px hsl(220 40% 2% / .75), 0 0 var(--dock-glow,22px) -6px var(--dock-accent-soft,hsl(187 90% 60% / .28)); transition:transform .4s var(--ease),opacity .3s var(--ease)} body.s2s-demo-open .s2s-dock{opacity:0;pointer-events:none;transform:translateY(12px)} .dock-sep{width:1px;height:26px;margin:0 4px; background:linear-gradient(hsl(0 0% 100% / 0),hsl(0 0% 100% / .16),hsl(0 0% 100% / 0))} .dock-item{position:relative;display:grid;place-items:center; width:var(--dock-size,42px);height:var(--dock-size,42px); border:0;border-radius:12px;background:none;color:var(--dim);cursor:pointer; transition:color .25s var(--ease),background .25s var(--ease), transform .28s var(--ease)} .dock-item svg{width:var(--dock-icon,20px);height:var(--dock-icon,20px); fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* The macOS lift: the hovered item rises and its neighbours stay put. */ .dock-item:hover,.dock-item:focus-visible{color:var(--dock-accent,var(--cyan)); background:hsl(0 0% 100% / .07);transform:translateY(-6px) scale(1.14)} .dock-item:active{transform:translateY(-2px) scale(1.04)} .dock-item[aria-current="true"]{color:var(--dock-accent,var(--cyan))} /* Tooltip above the icon, the way a dock labels what you are pointing at. */ .dock-tip{position:absolute;bottom:calc(100% + 12px);left:50%;translate:-50% 0; display:grid;gap:2px;padding:7px 12px;border-radius:10px;white-space:nowrap; background:hsl(220 14% 9% / .95);border:1px solid hsl(0 0% 100% / .12); box-shadow:0 10px 26px -12px hsl(220 40% 2% / .9); font:600 12.5px/1.15 var(--sans);color:var(--tx);letter-spacing:-.01em; opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s} .dock-tip i{font-style:normal;font:500 11px/1 var(--mono);color:var(--dimmer)} .dock-item:hover .dock-tip,.dock-item:focus-visible .dock-tip{opacity:1; visibility:visible;transform:translateY(0)} /* Search. Collapsed to an icon until focused, so the dock stays compact. */ .dock-find{position:relative;display:flex;align-items:center;gap:8px; padding:0 10px 0 12px;height:42px;border-radius:12px; background:hsl(0 0% 100% / .05);border:1px solid hsl(0 0% 100% / .08); transition:background .25s var(--ease),border-color .25s var(--ease), box-shadow .25s var(--ease)} .dock-find:focus-within{background:hsl(0 0% 100% / .09); border-color:var(--dock-accent,var(--cyan)); box-shadow:0 0 0 3px hsl(187 90% 60% / .14)} .dock-find > svg{width:17px;height:17px;flex:0 0 17px;fill:none; stroke:var(--dimmer);stroke-width:1.9;stroke-linecap:round} .dock-find input{width:150px;background:none;border:0;outline:none; color:var(--tx);font:500 13.5px/1 var(--sans);padding:0; transition:width .34s var(--ease)} .dock-find input::placeholder{color:var(--dimmer)} .dock-find input::-webkit-search-cancel-button{-webkit-appearance:none} .dock-find:focus-within input{width:230px} .dock-hits{position:absolute;left:0;right:0;bottom:calc(100% + 10px);margin:0; padding:6px;list-style:none;max-height:46vh;overflow:auto; border-radius:14px;background:hsl(220 14% 8% / .97); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid hsl(0 0% 100% / .12); box-shadow:0 20px 50px -18px hsl(220 40% 2% / .95)} .dock-hits li{margin:0} .dock-hits button{display:flex;width:100%;align-items:baseline;gap:9px; padding:9px 11px;border:0;border-radius:9px;background:none;cursor:pointer; text-align:left;color:var(--tx);font:500 13.5px/1.25 var(--sans)} .dock-hits button small{margin-left:auto;font:600 10px/1 var(--mono); letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer)} .dock-hits button:hover,.dock-hits [aria-selected="true"] button{ background:hsl(0 0% 100% / .08);color:var(--dock-accent,var(--cyan))} .dock-hits .none{padding:12px;color:var(--dimmer);font-size:13px} @media (max-width: 720px){ .s2s-dock{left:12px;right:12px;translate:0;bottom:12px;justify-content:center; gap:2px;padding:6px} .dock-item{width:38px;height:38px} .dock-find{flex:1;min-width:0} .dock-find input,.dock-find:focus-within input{width:100%} .dock-tip{display:none} } @media (prefers-reduced-motion: reduce){ .dock-item:hover,.dock-item:focus-visible{transform:none} } /* ── header: Features hover menu ───────────────────────────────────────────── Randomizer / Convert / Sample / Hardware are one menu that opens on HOVER, like image-line.com/fl-studio/features. No click needed and no JS: hover opens it, and :focus-within opens it for keyboard users so the button is not a dead end for anyone tabbing through. */ .has-drop { position: relative; display: flex; align-items: center; /* The DEFAULT colour lives here, on the container, and the trigger and the links below take `inherit`. That way a colour set on the block in the builder reaches the text instead of being outranked by a class rule on each child — inheritance loses to any direct declaration. */ color: var(--dim); } /* Styled to match `.nav nav a` exactly — it sits in the same row and must not read as a button among links. */ .drop-trigger { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: 500 14.5px/1 var(--sans); letter-spacing: -.005em; transition: color .3s var(--ease); } .drop-trigger .caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); } .has-drop:hover .drop-trigger, .has-drop:focus-within .drop-trigger { color: var(--tx); } .has-drop:hover .caret, .has-drop:focus-within .caret { transform: rotate(180deg); } /* `top: 100%` plus the padding-top is deliberate: it bridges the gap between the trigger and the panel so the pointer never crosses dead space on its way down. Without it the menu closes the moment you move toward it. */ .drop { position: absolute; top: 100%; left: -14px; z-index: 70; min-width: 196px; padding: 8px; margin-top: 10px; border-radius: 12px; background: #0e0f11f7; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--line); box-shadow: var(--bevel), 0 18px 40px -18px #030407e6; display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; } .drop:before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* the bridge itself */ .has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; } .nav nav .drop a { padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: inherit; transition: color .2s var(--ease), background .2s var(--ease); } .nav nav .drop a:hover { color: var(--tx); background: var(--cyan-soft); } /* The sliding underline belongs to the top-level links, not to menu rows. */ .nav nav .drop a:after { display: none; } /* NO HOVER ON TOUCH. A hover-only menu is unreachable on a phone, so wherever the pointer is coarse the panel becomes an ordinary indented list that is always open — same links, no gesture required. */ @media (hover: none) { .drop { position: static; opacity: 1; visibility: visible; transform: none; margin: 6px 0 0; padding: 0 0 0 12px; min-width: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .has-drop { display: block; } .drop-trigger { pointer-events: none; } /* it labels the group, nothing more */ .caret { display: none; } } /* Same inside the burger menu, which is a vertical column with no room for a floating panel. */ @media (max-width: 1200px) { .nav.open .has-drop { display: block; width: 100%; } .nav.open .drop { position: static; opacity: 1; visibility: visible; transform: none; margin: 10px 0 0; padding: 0 0 0 12px; min-width: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; gap: 14px; } .nav.open .caret { display: none; } .nav.open .drop-trigger { pointer-events: none; } } /* ── card screenshots that bleed off the bottom ────────────────────────────── image-line.com/fl-studio/features puts heading and copy at the top of a card and then a screenshot LARGER than the card, clipped by it. The card reads as a window onto the app instead of a box with a thumbnail in it. `.card` is already `overflow:hidden` and `position:relative`, so the crop is free — the image only has to be wider than its container and pushed right. */ .card.has-shot { padding-bottom: 0; } .card-shot { margin: 20px -26px -30px 26px; border-radius: 10px 0 0 0; overflow: hidden; box-shadow: 0 -1px 0 var(--line), -1px 0 0 var(--line); } .card-shot img { display: block; width: 100%; min-width: 340px; border-radius: 10px 0 0 0; } /* ── scrolling ─────────────────────────────────────────────────────────────── The page scrolled in steps rather than gliding. Three things were repainting on every frame, and none of them had to: 1. `body:after` is a 60vw square with `filter: blur(24px)` animating for ever. A filtered element is re-rasterised whenever anything above it changes unless it owns a compositor layer — `will-change: transform` gives it one, so the animation runs on the GPU and scroll stops touching it. Same for the marquee, which animates transform on a wide flex row. 2. `header.stuck` carries `backdrop-filter: blur(16px) saturate(150%)`. A backdrop filter re-samples everything behind it EVERY frame while you scroll, and it is the single most expensive thing on the page. 16px of blur is not visibly different from 10px behind an opaque-ish bar, and costs noticeably less. `scroll-behavior: smooth` on is LEFT ALONE. It is what makes the nav links glide to their section, which is the behaviour being asked for — the jank was the repainting above, not the scrolling mode. */ body:after { will-change: transform; } .strip .track { will-change: transform; } .tilt, .card, .frame, .gal figure { backface-visibility: hidden; } header.stuck { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); } /* The reveal-on-scroll elements animate opacity AND transform together. Giving them a layer only while they are still hidden keeps the transition smooth without leaving hundreds of promoted layers behind once they have landed. */ .rv:not(.in) { will-change: opacity, transform; } .rv.in { will-change: auto; } /* ══ header: account glyph + the two standing CTAs ═════════════════════════ Added 2026-08-17. The nav used to end in a text "Sign in" link that site.js rewrote into the customer's name plus a quota pill, and a single "Get started" button. That is one control doing two jobs — identity AND the primary action — so there was nowhere to put "download the free build" without demoting the thing that earns money. image-line.com/fl-studio splits them: a person glyph for the account, then "Try for free" beside "Buy FL Studio". This does the same. The glyph is the SAME element whether or not there is a session (site.js only swaps its href and title), so the header does not reflow when /api/me answers late. These live in site.css rather than pages.css because the STATIC homepage loads only site.css, and the header has to be identical on both. */ .nav-acct{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px; border-radius:10px;background:var(--metal);border:1px solid var(--line); box-shadow:var(--bevel);color:var(--dim); transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)} .nav-acct svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .nav-acct:hover{color:var(--tx);border-color:var(--line-2);transform:translateY(-2px)} /* Signed in reads at a glance without costing a single pixel of layout. */ .nav-acct.is-user{color:var(--cyan);border-color:var(--cyan-line); box-shadow:var(--bevel),0 0 0 1px var(--cyan-line),0 0 16px -6px var(--cyan-glow)} .nav-acct.is-user:hover{color:var(--cyan-hi)} /* `header .nav` sets gap:22px, which is right between nav LINKS and far too wide between three controls that read as one group. */ .nav .nav-acct+.nav-try{margin-left:-12px} .nav .nav-try+.nav-buy{margin-left:-12px} .nav-try,.nav-buy{padding:10px 16px;font-size:14px;border-radius:10px;white-space:nowrap} .nav-try svg,.nav-buy svg{width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .nav-buy svg{stroke-width:1.7} /* The nav links collapse into the burger at 1200px (see the media query above), which leaves the three controls plenty of room down to about 700px. Below that the product name is the first thing to go — "Buy" and "Try" still say what they do, and a header that wraps onto two lines on a phone is worse than a shorter label. */ @media (max-width: 700px){ .nav-long{display:none} .nav-try,.nav-buy{padding:10px 13px} .nav .nav-acct+.nav-try,.nav .nav-try+.nav-buy{margin-left:-14px} } @media (max-width: 380px){ .nav-try svg{display:none} } /* ── the account menu ─────────────────────────────────────────────────────── Signed out the glyph is a bare link to /login. Signed in it grows a name and a caret and becomes the trigger for the same `.has-drop` panel the Features menu uses — hover, or :focus-within for the keyboard, no JS. The panel's link styling is repeated here because the original rules are scoped `.nav nav .drop a`, and this menu is a SIBLING of