:root{--petrol:#191e30;--dark:#101522;--ivory:#f7f8fd;--champagne:#aaa3ff;--muted:#b7bfd7;--line:rgba(170,163,255,.22)}
body{background:var(--dark);color:var(--ivory)}
html{scroll-padding-top:90px}
.shell{width:min(1400px,calc(100% - 96px))}
.nav{min-height:86px;border-bottom:1px solid var(--line);position:relative;z-index:20;gap:24px}
.nav .brand{color:var(--ivory);font-size:36px;display:flex;flex-wrap:wrap;align-items:center;column-gap:16px}
.nav .brand>span{margin:0 0 18px -14px;font-size:10px}
.nav .brand small{font-size:9px;font-weight:450;letter-spacing:.18em;margin:0}
.nav nav{gap:28px;font-size:13px}
.nav nav a:hover,.text-link:hover{color:var(--champagne)}
.button{background:var(--champagne);color:#191e30;border:1px solid var(--champagne);border-radius:5px;padding:18px 26px;box-shadow:0 6px 30px rgba(170,163,255,.08)}
.button:hover{background:#c3bdff;color:#191e30;box-shadow:0 8px 36px rgba(170,163,255,.18)}
.button.secondary{background:transparent;border-color:#aaa3ff;color:var(--ivory)}
.button.secondary:hover{background:#ffffff0a;color:var(--ivory)}
.button:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--champagne)}
.hero{position:relative;isolation:isolate;grid-template-columns:.94fr 1.15fr;gap:0;min-height:640px;padding:42px 0 25px;align-items:center}
.hero:before{content:'';position:absolute;z-index:-1;inset:-90px -12px -30px;pointer-events:none;background:radial-gradient(ellipse at var(--spot-x,70%) var(--spot-y,52%),rgba(125,109,255,.26),transparent 58%),radial-gradient(ellipse at 80% 65%,rgba(170,163,255,.09),transparent 50%);transition:opacity .3s}
.hero-copy{z-index:2;position:relative;padding-bottom:12px}
.hero .eyebrow{background:none;border:0;padding:0;color:var(--muted);font-size:10px;letter-spacing:.17em;display:block;margin:0 0 25px}
.hero h1{font-size:clamp(45px,4.25vw,66px);font-weight:720;line-height:1.09;letter-spacing:-.045em;margin:0 0 25px;white-space:nowrap}
.hero h1 em,h2 em{color:var(--champagne);font-style:normal;font-family:inherit}
.hero-subtitle{font-size:21px;font-weight:550;line-height:1.5;max-width:430px;margin:20px 0 12px}
.hero .lead{font-size:17px;line-height:1.7;color:#dce0ef;margin:10px 0 31px;max-width:415px}
.hero .actions{gap:14px;align-items:center}
.hero-draft-link{display:inline-block;color:var(--muted);font-size:11px;line-height:1.8;margin-top:27px}
.hero-draft-link:hover{color:var(--champagne)}
.hero-stage{position:relative;z-index:1;min-width:0;align-self:center;transform:translate3d(0,var(--parallax-y,0px),0);will-change:transform;margin-left:-32px;width:calc(100% + 58px)}
.hero-stage img{width:100%;height:auto;max-height:620px;object-fit:contain;object-position:center;filter:drop-shadow(0 20px 50px rgba(0,0,0,.22))}
.hero-stage a{display:block}
.hero-controls{display:flex;align-items:center;justify-content:center;gap:30px;min-height:74px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.13em}
.motion-toggle{background:transparent;color:var(--muted);border:1px solid #ffffff25;border-radius:99px;padding:9px 13px;letter-spacing:0;font-size:10px}
.motion-toggle:hover{border-color:var(--champagne);color:var(--champagne)}
.motion-toggle:disabled{cursor:default}
.references{padding:85px 0 70px}
.references-heading{text-align:center;margin-bottom:45px}
.references-heading h2{font-size:clamp(36px,4.7vw,70px);line-height:1.12;letter-spacing:-.045em;margin:21px 0 19px;font-weight:680}
.references-heading h2 br{display:none}
.references-heading h2 em{display:inline}
.references-heading p{font-size:18px;color:var(--muted);line-height:1.6;margin:0}
.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:39px 30px;perspective:1200px}
.reference-card{display:block;min-width:0;border:0;background:none;padding:0;transform-style:preserve-3d;--tilt-x:0deg;--tilt-y:0deg}
.reference-preview{position:relative;overflow:hidden;border:1px solid #aaa3ff35;border-radius:7px;background:#191e30;box-shadow:0 12px 35px #0002;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .25s,box-shadow .25s,border-color .25s}
.reference-preview img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .45s}
.reference-open{position:absolute;bottom:14px;right:14px;background:var(--ivory);color:var(--dark);padding:9px 12px;border-radius:4px;font-size:11px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;box-shadow:0 6px 20px #0003}
.reference-card:hover .reference-preview,.reference-card:focus-visible .reference-preview{border-color:var(--champagne);box-shadow:0 12px 35px rgba(170,163,255,.12)}
.reference-card:hover .reference-open,.reference-card:focus-visible .reference-open{opacity:1;transform:none}
.reference-card small{display:block;font-size:9px;letter-spacing:.07em;font-weight:450;color:var(--muted);margin-top:17px}
.reference-card h3{font-size:20px;font-weight:620;letter-spacing:-.02em;margin:7px 0 7px}
.reference-domain{display:block;color:#aaa3ff;font-size:13px;overflow-wrap:anywhere}
.reference-note{font-size:10px;color:var(--muted);line-height:1.7;margin:35px 0 0;text-align:center}
.screens-section{background:var(--petrol);color:var(--ivory);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-heading h2,.faq h2{font-weight:650}
.section-heading>p,.feature-mini-grid p,.workflow-grid p,.individual-grid p,.service-grid p,.ecosystem-offer p,.ecosystem-offer li span,.faq details p,.experience-copy .demo-note{color:var(--muted)}
.screens-section h2 em{color:var(--champagne)}
.screens-grid{gap:34px}
.screenshot-open{width:100%;position:relative;border:1px solid var(--line);border-radius:7px;padding:0;overflow:hidden;background:var(--dark);display:block;text-align:left;color:var(--ivory)}
.screens-grid img{border:0;border-radius:0;aspect-ratio:1.5}
.screenshot-open span{display:block;background:var(--ivory);color:var(--dark);padding:14px 20px;font-size:13px;font-weight:650}
.screenshot-open:hover{border-color:var(--champagne);box-shadow:0 0 35px #aaa3ff15}
.screens-grid figcaption{color:var(--muted);letter-spacing:.1em;font-size:10px}
.screens-grid .text-link{display:inline-block;margin-top:14px;color:var(--champagne)}
.draft-offer{background:#141929;color:var(--ivory)}
.draft-offer h2 em,.draft-offer .eyebrow,.draft-offer-steps article>span,.draft-offer-steps .draft-offer-note{color:var(--champagne)}
.draft-offer-grid>div>p,.draft-offer-steps p,.draft-choice p,.draft-offer .text-link{color:var(--muted)}
.draft-offer .button.light{background:var(--champagne);color:var(--dark)}
.draft-choice,.individual-grid article{border-color:var(--champagne)}
.individual-grid span{color:var(--champagne)}
.service-offer,.packages{background:#1b2135}
.service-grid article,.pricing-grid article,.detail-strip,.cms-modules article{background:var(--dark);border-color:var(--line);color:var(--ivory)}
.service-grid article>span,.service-grid .text-link,.speed-proof strong,.module-icon,.feature-symbol{color:var(--champagne)}
.speed-proof span,.speed-note,.detail-strip p,.pricing-grid article p,.pricing-grid article>span{color:var(--muted)}
.ecosystem-offer,.ecosystem-offer li,.feature-mini-grid article,.workflow-grid article,.faq details,.experience-copy hr{border-color:var(--line)}
.feature-main,.pricing-grid .business{background:#2a3050;color:var(--ivory);border:1px solid var(--line)}
.feature-main a,.pricing-grid .business>a{color:var(--champagne)}
.feature-main small,.feature-main p,.pricing-grid .business p,.pricing-grid .business>span{color:#dce0ef}
.experience{background:#191e30}
.experience-copy,.experience-copy h3{color:var(--ivory)}
.experience-copy p{color:var(--muted)}
.experience .eyebrow{color:var(--champagne)}
.closing{background:var(--ivory);color:var(--dark);position:relative;overflow:hidden}
.closing h2{font-weight:670;margin-top:20px}
.closing h2 em{color:#6d61d6}
.closing p,.closing .text-link{color:#49516b}
.closing .button.light{background:var(--champagne);color:var(--dark);border-color:#9a91f1}
.footer .brand,.footer p{color:var(--muted)}
.footer{color:var(--ivory);--footer-text-muted:var(--muted)}
.selenny-footer-logo{--footer-text-muted:var(--muted);--accent:var(--champagne)}
.screenshot-dialog{padding:0;background:var(--ivory);color:var(--dark);border:1px solid var(--champagne);border-radius:9px;width:min(1280px,95vw);max-width:95vw;max-height:92vh}
.screenshot-dialog::backdrop{background:#080b18dd;backdrop-filter:blur(12px)}
.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 21px;position:sticky;top:0;background:var(--ivory);z-index:2}
.dialog-toolbar p{margin:0;font-size:13px;line-height:1.5}
.dialog-close{flex-shrink:0;background:var(--dark);color:var(--ivory);border:0;padding:10px 14px;border-radius:4px;font-size:12px}
.dialog-image{display:block;width:100%;height:auto}
.motion-ready .reveal{opacity:0;transform:translate3d(var(--reveal-x,0px),45px,0) scale(.97);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:none}
.motion-ready .hero-copy{animation:hero-enter .9s cubic-bezier(.2,.7,.2,1) both}
.motion-ready .hero-stage a{animation:stage-enter 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes hero-enter{from{opacity:0;transform:translate3d(-35px,20px,0)}to{opacity:1;transform:none}}
@keyframes stage-enter{from{opacity:0;transform:translate3d(60px,30px,0) scale(.92)}to{opacity:1;transform:none}}
.motion-off .reveal{opacity:1!important;transform:none!important;transition:none!important}
.motion-off .hero-stage{transform:none;will-change:auto}
.motion-off *{animation:none!important;transition:none!important}
@media(min-width:1600px){.hero{min-height:680px}.hero h1{font-size:70px}}
@media(max-width:1100px){.shell{width:calc(100% - 64px)}.nav nav{gap:20px}.nav .brand small{display:none}.hero{min-height:540px}.hero h1{font-size:clamp(39px,4.4vw,58px)}.hero-subtitle{font-size:18px}.hero .lead{font-size:15px;max-width:340px}.hero .button{padding:15px 19px;font-size:12px}.reference-card h3{font-size:18px}.reference-grid{gap:32px 22px}}
@media(max-width:850px){.shell{width:calc(100% - 40px)}.nav{min-height:78px}.nav nav{font-size:12px}.hero{grid-template-columns:1fr;min-height:0;padding-top:55px;gap:0;text-align:center}.hero h1{font-size:clamp(43px,7.3vw,62px);white-space:normal}.hero .eyebrow{margin-bottom:22px}.hero-subtitle,.hero .lead{max-width:560px;margin-left:auto;margin-right:auto}.hero .actions{justify-content:center}.hero-stage{margin:0 auto;width:min(620px,100%);max-height:none}.hero-stage img{max-height:560px}.hero-controls{gap:15px;flex-wrap:wrap;padding:20px 0;line-height:1.8}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.references-heading h2{font-size:47px}.references-heading p{font-size:16px}.section{padding:70px 0}.references{padding:70px 0}.hero-copy{padding-bottom:0}}
@media(max-width:600px){.nav .brand{font-size:31px}.nav .brand>span{margin-left:-12px}.nav nav{top:77px;background:#191e30;border:1px solid var(--line);font-size:16px}.hero{padding-top:39px}.hero h1{font-size:clamp(38px,10.3vw,57px);line-height:1.12;letter-spacing:-.04em}.hero-subtitle{font-size:18px}.hero .lead{font-size:15px;max-width:330px;margin-bottom:25px}.hero .actions{flex-direction:row;gap:11px}.hero .button{font-size:12px;padding:15px 18px}.hero-draft-link{font-size:10px;max-width:280px;margin-top:21px}.hero-stage{width:100%;margin:8px auto -5px}.hero-stage img{max-height:none}.hero-controls{font-size:9px;letter-spacing:.06em}.motion-toggle{font-size:9px}.reference-grid{grid-template-columns:1fr;gap:32px}.references-heading h2{font-size:39px}.references-heading h2 br{display:block}.references-heading p{font-size:15px}.references-heading{margin-bottom:34px}.reference-card h3{font-size:21px}.reference-card small{font-size:10px}.reference-domain{font-size:13px}.reference-open{opacity:1;transform:none;background:#f7f8fde6;font-size:10px;padding:8px 10px}.section-heading h2,.faq h2{font-size:39px}.closing h2{font-size:48px}.screens-grid{grid-template-columns:1fr}.dialog-toolbar{padding:12px;gap:10px}.dialog-toolbar p{font-size:11px}.dialog-close{font-size:11px;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.hero-stage,.motion-ready .reveal{transform:none!important;opacity:1!important;will-change:auto}.reference-preview{transform:none!important}html{scroll-behavior:auto}}

.image-credit{font-size:10px;line-height:1.7;color:var(--muted);margin-top:26px;margin-bottom:0}

html:has(body.motion-off){scroll-behavior:auto}.motion-ready .hero:before{animation:ambient-breathe 7s ease-in-out infinite alternate}@keyframes ambient-breathe{from{opacity:.65;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}

body{overflow-x:clip}@media(max-width:850px){.hero:before{left:-18px;right:-18px;transform:none!important}}

@media(min-width:1101px){.hero-copy{align-self:start;padding-top:42px;padding-bottom:0}.hero h1{font-size:clamp(56px,4.85vw,76px)}.hero .eyebrow{margin-bottom:20px}.hero .lead{font-size:18px}.references-heading h2{font-size:clamp(52px,5.65vw,78px)}}

.all-references{display:block;text-align:center;margin-top:24px;color:var(--champagne)}.references-heading h1{font-size:clamp(39px,5.65vw,78px);line-height:1.12;letter-spacing:-.045em;font-weight:680;margin:21px 0 19px}.references-heading h1 em{font-style:normal;color:var(--champagne)}.reference-page-controls{display:flex;justify-content:center;margin:-15px 0 35px}

/* Cool software direction: independent physical layers and interactive lighting. */
:root{--petrol:#191e30;--dark:#101522;--ivory:#f7f8fd;--champagne:#aaa3ff;--muted:#b7bfd7;--line:rgba(170,163,255,.2)}
.hero{grid-template-columns:43% 57%;min-height:660px;padding:35px 0 40px;gap:0}
.hero h1{font-size:clamp(40px,4.4vw,65px);white-space:nowrap}
.hero-copy{padding-top:55px;align-self:start;max-width:100%}
.hero-subtitle{margin-top:26px;font-size:21px;max-width:450px}
.hero .lead{max-width:445px;font-size:18px;margin-bottom:28px}
.hero:before{inset:-85px -12px -30px;background:radial-gradient(ellipse at var(--spot-x,76%) var(--spot-y,57%),rgba(125,109,255,.3),transparent 52%),radial-gradient(ellipse at 92% 45%,rgba(80,151,255,.14),transparent 48%)}
.hero-stage{height:590px;min-height:0;width:calc(100% + 70px);margin-left:-48px;transform:none!important;perspective:1200px;isolation:isolate}
.scene-layer{position:absolute;display:block;will-change:transform;transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0) rotate(var(--layer-r,0deg)) scale(var(--layer-scale,1));transition:filter .35s;transform-origin:50% 70%}
.hero-stage .scene-layer img{width:100%;height:auto;max-height:none;object-fit:contain;filter:drop-shadow(0 16px 17px #05071580);transition:filter .3s}
.scene-layer:hover img,.scene-layer:focus-visible img{filter:drop-shadow(0 20px 25px #080a1599) drop-shadow(0 0 12px #9086ff80)}
.adviser-layer{width:41%;left:0;top:5px;z-index:1}
.monitor-layer{width:78%;right:-2%;top:59px;z-index:2}
.tablet-layer{width:60%;left:18%;top:344px;z-index:4}
.phone-layer{width:25%;right:-3%;top:285px;z-index:5}
.ambient-floor{position:absolute;inset:auto -2% -4% 1%;height:170px;background:radial-gradient(ellipse at var(--floor-x,66%) 55%,#8975ff70,transparent 65%);filter:blur(22px);z-index:0;transform:translate3d(var(--light-x,0px),var(--light-y,0px),0);pointer-events:none}
.scene-label{position:absolute;z-index:6;color:#c6c0ff;font-size:12px;letter-spacing:.03em;margin:0;pointer-events:none}
.cms-label{top:35px;right:10%}.website-label{bottom:-15px;left:29%}
.scene-switch{display:flex;gap:12px;margin-top:26px}
.scene-switch button{font-size:12px;padding:10px 13px;color:#c9cde0;border:1px solid #aaa3ff45;border-radius:99px;background:#aaa3ff08;transition:background .2s,color .2s}
.scene-switch button:hover,.scene-switch button[aria-pressed=true]{background:#aaa3ff;color:#101522}
.scene-explanation{color:var(--muted);font-size:12px;line-height:1.6;min-height:38px;max-width:350px;margin:13px 0 0}
.scene-cms .monitor-layer{z-index:7;filter:drop-shadow(0 0 22px #a99bff75)}.scene-cms .tablet-layer,.scene-cms .phone-layer{filter:brightness(.7)}
.scene-website .tablet-layer,.scene-website .phone-layer{filter:drop-shadow(0 0 18px #9b90ff65)}.scene-website .monitor-layer{filter:brightness(.65)}
.motion-ready .hero-stage .scene-layer img{animation:layer-enter 1.25s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--enter-delay,0ms)}
.monitor-layer{--enter-delay:100ms}.tablet-layer{--enter-delay:240ms}.phone-layer{--enter-delay:390ms}
@keyframes layer-enter{from{opacity:0;transform:translate3d(var(--enter-x,45px),var(--enter-y,30px),0) scale(.9)}to{opacity:1;transform:none}}
.motion-ready .hero-stage a{animation:none}
.references{background:#f7f8fd;color:#141929;width:100%;padding:85px max(48px,calc((100% - 1400px)/2));margin:0}
.references-heading p,.references .reference-card small,.references .reference-note{color:#626a83}.references .reference-domain,.references .all-references{color:#6558c8}.references .eyebrow{color:#777092}
.reference-preview{background:#e7e9f5;border-color:#cfd3e5}.reference-open{background:#fff!important;color:#171d31}
.screens-section{background:#eef0f8;color:#141929}.screens-section .section-heading>p,.screens-grid figcaption{color:#5b637a}.screens-section h2 em,.screens-grid .text-link{color:#6b5ece}.screenshot-open{background:#fff;border-color:#d1d5e5}.screens-grid img{aspect-ratio:16/9;object-fit:contain;background:#fff}.screenshot-open span{background:#fff;color:#171d31}.screens-grid figure{min-width:0}
.screenshot-dialog{background:#f7f8fd;color:#141929;width:min(1180px,94vw);height:min(790px,90vh);max-height:90vh;overflow:hidden;display:none;grid-template-rows:auto minmax(0,1fr)}
.screenshot-dialog[open]{display:grid}.dialog-toolbar{background:#f7f8fd;position:static;border-bottom:1px solid #d7dbea}.dialog-image{width:100%;height:100%;object-fit:contain;min-height:0;background:#fff}
.closing .eyebrow{color:#6d61d6}.experience-visual{max-height:440px;overflow:hidden}.experience{background:#191e30}
.motion-off .scene-layer{transform:none!important;will-change:auto}
@media(max-width:1100px){.hero-copy{padding-top:30px}.hero{min-height:600px}.hero h1{font-size:clamp(37px,4.3vw,49px)}.hero-stage{height:520px;width:calc(100% + 50px);margin-left:-35px}.adviser-layer{width:44%}.monitor-layer{top:75px;width:79%}.tablet-layer{top:310px}.phone-layer{top:264px}.hero .lead{font-size:16px}.hero .button{padding:15px 17px;font-size:12px}.hero .actions{gap:10px}.scene-label{font-size:10px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:12px;padding-top:38px;min-height:0}.hero-copy{padding-top:0;margin:auto}.hero h1{font-size:clamp(35px,7.5vw,60px);white-space:normal}.hero-subtitle,.hero .lead{margin-left:auto;margin-right:auto}.scene-switch{justify-content:center}.scene-explanation{margin-left:auto;margin-right:auto}.hero-stage{width:min(690px,100%);height:560px;margin:0 auto}.adviser-layer{width:41%}.monitor-layer{top:55px;right:-1%}.tablet-layer{top:315px;left:13%;width:65%}.phone-layer{top:260px;right:0;width:25%}.cms-label{top:30px}.website-label{bottom:10px}.references{padding:65px 20px}.hero-controls{margin-top:0}}
@media(max-width:600px){.hero{padding-top:35px;padding-bottom:20px}.hero h1{font-size:clamp(30px,9.7vw,48px)}.hero .lead{font-size:15px;max-width:340px}.hero-subtitle{font-size:18px}.hero-stage{height:345px;margin-top:5px}.adviser-layer{width:42%;top:0}.monitor-layer{top:48px;width:80%;right:-1%}.tablet-layer{top:185px;left:12%;width:65%}.phone-layer{top:148px;right:-1%;width:25%}.scene-label{font-size:9px}.cms-label{top:25px;right:3%}.website-label{bottom:5px;left:23%}.hero-copy .actions{flex-direction:column;gap:10px}.hero .button{width:100%;max-width:310px;font-size:13px}.scene-switch{gap:8px;margin-top:20px}.scene-switch button{font-size:11px}.scene-explanation{margin-bottom:0;min-height:20px}.nav .button.small{max-width:155px}.nav nav{background:#191e30}.ambient-floor{height:110px;bottom:0}.hero-controls{padding:17px 0}.dialog-toolbar{align-items:flex-start}.screenshot-dialog{height:75vh}.references-heading h2{font-size:37px}.screens-grid .text-link{line-height:1.7}.closing h2{font-size:43px}}
@media(prefers-reduced-motion:reduce){.scene-layer{transform:none!important;will-change:auto}.ambient-floor{transform:none!important}}

.website-label{left:0;bottom:0;width:140px;line-height:1.7;font-size:11px;color:#c6c0ff}@media(max-width:600px){.website-label{left:0;bottom:30px;width:90px;font-size:9px}}

@media(min-width:851px){.hero-stage{width:calc(100% + 20px);margin-left:-30px}.monitor-layer{right:2%}.phone-layer{right:3%}}

html{overflow-x:clip}@media(max-width:600px){.phone-layer{right:5%}}

@media(max-width:600px){.website-label{display:none}}

.references-heading h2 em,.references-heading h1 em{color:#7364d9}

.adviser-layer{--enter-x:-30px;--enter-y:20px}.monitor-layer{--enter-x:65px;--enter-y:-20px}.tablet-layer{--enter-x:-55px;--enter-y:55px}.phone-layer{--enter-x:60px;--enter-y:65px}

/* Devices share a stable lower edge; keep the adviser’s face clear at every width. */
.hero-stage{height:auto;aspect-ratio:1.18}
.hero-stage .adviser-layer{width:38%;left:0;top:1%;z-index:3}
.hero-stage .monitor-layer{width:70%;right:0;top:10%;z-index:2}
.hero-stage .tablet-layer{width:46%;left:33%;top:60%;z-index:4}
.hero-stage .phone-layer{width:18%;right:0;top:60%;z-index:5}
.hero-stage .website-label{bottom:-18px;left:34%}
.hero-stage .tablet-layer{--enter-x:-16px;--enter-y:22px}
.hero-stage .phone-layer{--enter-x:18px;--enter-y:22px}
@media(max-width:600px){.hero-stage .cms-label{top:3%;right:2%}}

/* Natural screenshot dimensions avoid empty fixed-height image frames. */
.screens-grid{align-items:start}
.screens-grid img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.screenshot-dialog{width:min(1180px,94vw,calc((90dvh - 84px)*var(--screenshot-ratio,1.6)));height:auto;max-height:90dvh;grid-template-rows:auto auto}
.dialog-image{display:block;width:100%;height:auto;max-height:calc(90dvh - 84px);aspect-ratio:auto;object-fit:contain}

.screenshot-dialog{position:fixed;inset:50% auto auto 50%;margin:0;transform:translate(-50%,-50%);height:fit-content;align-content:start;grid-template-rows:max-content max-content}

/* A large dedicated Selenny Shop promotion, with a real shop in use. */
.shop-promo{position:relative;overflow:hidden;padding:95px 0;background:radial-gradient(ellipse at 75% 35%,#8670ff38,transparent 60%),#101522;color:#f7f8fd;border-top:1px solid #aaa3ff40;border-bottom:1px solid #aaa3ff40}
.shop-promo-grid{display:grid;grid-template-columns:1fr 1.06fr;gap:60px;align-items:center}
.shop-promo h2{font-size:clamp(44px,5.2vw,76px);line-height:1.05;letter-spacing:-.05em;font-weight:680;margin:24px 0}.shop-promo h2 em{font-style:normal;color:#aaa3ff}
.shop-promo-copy>p{color:#b7bfd7;font-size:15px;line-height:1.8}.shop-promo-copy .shop-promo-lead{font-size:21px;line-height:1.6;color:#f7f8fd;max-width:520px}
.shop-promo-features{list-style:none;padding:0;margin:30px 0;display:grid;grid-template-columns:1fr 1fr;gap:23px 25px}.shop-promo-features li{border-top:1px solid #aaa3ff40;padding-top:14px;display:grid;gap:8px}.shop-promo-features strong{color:#d7d2ff;font-size:13px}.shop-promo-features span{font-size:12px;color:#b7bfd7;line-height:1.7}
.shop-promo .actions{display:flex;gap:12px;flex-wrap:wrap}.shop-promo .button{font-size:12px;padding:17px 19px}.shop-promo .button.outline{background:transparent;color:#f7f8fd;border:1px solid #958ad0}
.shop-promo-visual{min-width:0;position:relative}.shop-browser{background:#191e30;border:1px solid #aaa3ff70;border-radius:11px;overflow:hidden;box-shadow:0 30px 65px #080b18aa,0 0 75px #9983ff25}.shop-browser-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 17px;color:#ccd1e2;font-size:11px;background:#1c2338}.shop-browser-bar small{font-size:8px;letter-spacing:.1em;color:#c4bbff}.browser-dots{font-size:9px;letter-spacing:3px;color:#9588cc}.shop-browser img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.shop-promo-proof{margin:24px 0 0;padding:24px 30px;border:1px solid #aaa3ff80;border-radius:11px;background:linear-gradient(135deg,#aaa3ff20,#f7f8fd08);backdrop-filter:blur(18px);display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:end}.shop-promo-proof>span{grid-column:1/-1;font-size:9px;letter-spacing:.12em;color:#c3bbff}.shop-promo-proof strong{font-size:clamp(25px,3vw,39px);font-weight:650;line-height:1.12;letter-spacing:-.03em}.shop-promo-proof a{color:#d7d2ff;font-size:12px;line-height:1.8;text-decoration:underline;text-underline-offset:5px}.shop-promo-caption{font-size:11px;color:#b7bfd7;line-height:1.8;margin:17px 0 0}
@media(max-width:1050px){.shop-promo-grid{gap:35px}.shop-promo h2{font-size:50px}.shop-promo-copy .shop-promo-lead{font-size:18px}.shop-promo-proof{padding:22px}}
@media(max-width:850px){.shop-promo{padding:65px 0}.shop-promo-grid{grid-template-columns:1fr;gap:35px}.shop-promo h2{font-size:clamp(42px,8vw,64px)}.shop-promo-copy{max-width:650px}.shop-promo-visual{width:100%;max-width:650px}.shop-promo .button{padding:16px 18px}.shop-promo-proof strong{font-size:35px}}
@media(max-width:600px){.shop-promo-features{gap:20px}.shop-promo h2{font-size:43px}.shop-promo .actions{display:grid}.shop-promo .button{text-align:center}.shop-browser-bar{font-size:9px;padding:12px}.shop-browser-bar small{font-size:7px}.shop-promo-proof{padding:22px}.shop-promo-proof strong{font-size:30px}}

/* Face the monitor toward the copy; gather larger companion devices around it. */
.hero-stage .monitor-layer{transform:translate3d(var(--layer-x,0px),var(--layer-y,0px),0) rotateY(-14deg) rotateZ(calc(var(--layer-r,0deg)*-1)) scale(1);transform-origin:50% 75%}
.hero-stage .tablet-layer{width:54%;left:30%;top:51.5%}
.hero-stage .phone-layer{width:22%;right:0;top:49%}
.hero-stage .adviser-layer{z-index:3}
.motion-off .hero-stage .monitor-layer{transform:rotateY(-14deg)!important}
.shop-promo .shop-brand-reg{font-size:max(7px,.3em);font-weight:400;vertical-align:super;line-height:0;letter-spacing:0;margin-left:.1em}
@media(prefers-reduced-motion:reduce){.hero-stage .monitor-layer{transform:rotateY(-14deg)!important}}

/* Store badges belong to their application, outside the project link. */
.reference-project{display:block;color:inherit;text-decoration:none}
.reference-stores{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.reference-stores .store-badge{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:7px 11px;border:1px solid #ffffff48;border-radius:7px;background:#080b13;color:#fff;text-decoration:none;line-height:1.2;transition:background .2s,border-color .2s}
.store-badge svg{flex:none;width:18px;height:22px;color:#fff}
.store-badge span{display:flex;flex-direction:column;gap:2px}
.reference-stores .store-badge small{margin:0;font-size:9px;letter-spacing:0;color:#e4e6f0}
.reference-stores .store-badge strong{font-size:15px;font-weight:650;color:#fff}
.reference-stores .store-badge:hover{background:#26233c;border-color:#aaa3ff}
.reference-stores .store-badge:focus-visible{outline:2px solid #aaa3ff;outline-offset:3px}

/* Keep navigation reachable throughout the page. */
.nav.shell{position:sticky;top:0;z-index:40;width:100%;margin:0;padding-inline:max(48px,calc((100vw - 1400px)/2));background:rgba(16,21,34,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 8px 25px #07091420}
html{scroll-padding-top:105px}
.back-to-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;justify-content:center;gap:7px;min-width:48px;min-height:48px;padding:12px 14px;border:1px solid #c7c0ff;border-radius:12px;background:#aaa3ff;color:#101522;box-shadow:0 5px 25px #080b1840;font-size:11px;font-weight:650;transition:background .2s,transform .2s}
.back-to-top:hover{background:#c3bdff;transform:translateY(-3px)}
.back-to-top:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:1100px){.nav.shell{padding-inline:32px}}
@media(max-width:850px){.nav.shell{padding-inline:20px}html{scroll-padding-top:96px}}
@media(max-width:600px){.nav nav{top:100%;max-height:calc(100dvh - 78px);overflow-y:auto}.back-to-top{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));padding:12px}.back-to-top-label{display:none}}

/* An upright, complete desktop with devices arranged beneath and beside it. */
.hero-stage{aspect-ratio:1.08}
.hero-stage .monitor-layer{width:70%;right:0;top:7%;transform:translate3d(calc(var(--layer-x,0px)*.35),calc(var(--layer-y,0px)*.35),0) perspective(850px) rotateY(26deg) rotateZ(-2.5deg);transform-origin:50% 75%}
.hero-stage .tablet-layer{width:46%;left:27%;top:67%;transform:translate3d(calc(var(--layer-x,0px)*.4),calc(var(--layer-y,0px)*.4),0) rotate(-5deg);transform-origin:50% 90%}
.hero-stage .phone-layer{width:22%;right:0;top:52%;transform:translate3d(calc(var(--layer-x,0px)*.4),calc(var(--layer-y,0px)*.4),0) rotate(-2deg);transform-origin:50% 90%}
.hero-stage .website-label{bottom:-26px;left:27%}
.motion-off .hero-stage .monitor-layer{transform:perspective(850px) rotateY(26deg) rotateZ(-2.5deg)!important}
.motion-off .hero-stage .tablet-layer{transform:rotate(-5deg)!important}
.motion-off .hero-stage .phone-layer{transform:rotate(-2deg)!important}
.whatsapp-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(82px,calc(env(safe-area-inset-bottom) + 62px));z-index:35;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 16px;border:1px solid #7be1a9;border-radius:12px;background:#086638;color:#fff;box-shadow:0 5px 25px #080b1840;font-size:12px;font-weight:650;transition:background .2s,transform .2s}
.whatsapp-float:hover{background:#07502d;transform:translateY(-2px)}
.whatsapp-float:focus-visible{outline:2px solid #fff;outline-offset:4px}
.keyboard-scroll-hint{position:fixed;bottom:20px;left:20px;z-index:34;display:flex;align-items:center;gap:10px;background:#101522ed;border:1px solid #aaa3ff50;border-radius:11px;padding:10px 12px;color:#f7f8fd;font-size:10px;line-height:1.5;backdrop-filter:blur(12px);pointer-events:none}
.keyboard-scroll-keys{display:flex;gap:4px}.keyboard-scroll-keys kbd{display:grid;place-items:center;width:24px;height:27px;border:1px solid #aaa3ff80;border-bottom-width:3px;border-radius:5px;font-size:16px;font-family:inherit;color:#c5bfff}
@media(pointer:coarse),(max-width:850px){.keyboard-scroll-hint{display:none}}
@media(max-width:600px){.whatsapp-float{right:max(14px,env(safe-area-inset-right));bottom:max(76px,calc(env(safe-area-inset-bottom) + 62px));width:48px;padding:12px}.whatsapp-float span{display:none}}
@media(prefers-reduced-motion:reduce){.hero-stage .monitor-layer{transform:perspective(850px) rotateY(26deg) rotateZ(-2.5deg)!important}.hero-stage .tablet-layer{transform:rotate(-5deg)!important}.hero-stage .phone-layer{transform:rotate(-2deg)!important}}

.hero-stage{aspect-ratio:1.2}
.hero-stage .monitor-layer{width:64%;top:5%;transform:translate3d(calc(var(--layer-x,0px)*.25),calc(var(--layer-y,0px)*.25),0) rotateY(-34deg) rotateZ(0deg)}
.hero-stage .tablet-layer{width:46%;left:25%;top:65%}
.hero-stage .phone-layer{width:20.5%;right:0;top:51%}
.motion-off .hero-stage .monitor-layer{transform:rotateY(-34deg)!important}
@media(prefers-reduced-motion:reduce){.hero-stage .monitor-layer{transform:rotateY(-34deg)!important}}

.hero-stage .phone-layer{right:6%;top:59%}
.hero-stage .website-label{display:none}
.back-to-top,.whatsapp-float{width:48px;min-width:48px;padding:12px;border-radius:50%}
.back-to-top-label,.whatsapp-float span{display:none}

/* One product photo keeps screen, foot and device scale physically consistent. */
.hero-stage{aspect-ratio:1.18}
.hero-stage .adviser-layer{left:-5%;width:38%;top:1%;z-index:3}
.hero-stage .devices-layer{width:80%;right:-1%;top:14%;z-index:4;transform:translate3d(calc(var(--layer-x,0px)*.4),calc(var(--layer-y,0px)*.4),0);transform-origin:50% 90%}
.hero-stage .devices-layer img{filter:none;animation:none}
.devices-layer .device-link{position:absolute;display:block;border:2px solid transparent;border-radius:8px;transition:border-color .2s,background .2s}
.devices-layer .imac-zone{left:28%;top:2%;width:65%;height:84%}
.devices-layer .ipad-zone{left:3%;top:48%;width:45%;height:44%}
.devices-layer .iphone-zone{left:80%;top:59%;width:13%;height:34%}
.device-link:hover,.device-link:focus-visible{border-color:#c5bdff;background:#aaa3ff0c;outline:0}
.device-tooltip{position:absolute;top:7px;left:7px;background:#101522f2;color:#fff;border:1px solid #aaa3ff90;border-radius:6px;padding:8px;font-size:10px;line-height:1.4;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.device-link:hover .device-tooltip,.device-link:focus-visible .device-tooltip{opacity:1}
.scene-cms .imac-zone,.scene-website .ipad-zone,.scene-website .iphone-zone{border-color:#aaa3ff90}
.motion-off .hero-stage .devices-layer{transform:none!important}
@media(max-width:600px){.hero-stage .adviser-layer{left:-3%}.hero-stage .devices-layer{width:80%;right:0;top:15%}.device-tooltip{font-size:9px;padding:5px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.hero-stage .devices-layer{transform:none!important}}

/* Foreground phone and brand registration note. */
.devices-layer .iphone-zone{left:78%;top:45%;width:17%;height:50%}
.footer{flex-wrap:wrap;row-gap:20px}
.footer .brand-legal{flex-basis:100%;width:100%;margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;color:var(--muted);text-align:center}
.brand-legal span{white-space:nowrap}
.custom-functions{margin:32px 0;padding:clamp(25px,4vw,48px);border:1px solid #aaa3ff65;border-radius:14px;background:linear-gradient(120deg,#aaa3ff18,#191e30);color:#f7f8fd}
.custom-functions h3{font-size:clamp(29px,4vw,49px);line-height:1.14;letter-spacing:-.035em;margin:18px 0;font-weight:650}
.custom-functions h3 em{font-style:normal;color:#aaa3ff}
.custom-functions p{font-size:16px;line-height:1.75;max-width:860px;color:#ccd1e4;margin:0}
.technology-promise{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:27px;padding-top:22px;border-top:1px solid #aaa3ff35}
.technology-promise>span{font-size:12px;font-weight:650;color:#101522;background:#aaa3ff;border-radius:6px;padding:9px 13px}
.technology-promise strong{font-size:18px;font-weight:650;color:#f7f8fd}