:root{color-scheme:dark;--bg:#08090b;--text:#eeeff2;--accent:#a9b8cd;--brandmark-accent:#b7c4d7;--ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(20px,5vw,80px)}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html{background:var(--bg)}
body{min-width:320px;margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;outline-offset:5px}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #b7c4d7}
img{display:block;max-width:100%;-webkit-user-drag:none}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100svh;padding:28px 0 38px;isolation:isolate;overflow:clip}
.page-shell{width:min(1220px,calc(100% - (var(--gutter) * 2)),calc((100svh - 400px) * 2 + 88px));margin-inline:auto}
.hero{display:grid;place-items:center;flex:none;width:100%;margin-bottom:28px}
.brand-mark{position:relative;width:88px;height:88px;isolation:isolate}
.brandmark-render{position:absolute;left:50%;top:50%;width:200%;max-width:none;height:200%;transform:translate(-50%,-50%);pointer-events:none}
.brand-mark.gl .brandmark-render{visibility:hidden}
.landing-brandmark-canvas{position:absolute;left:50%;top:50%;width:200%;height:200%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .4s}
.brand-mark.gl .landing-brandmark-canvas{opacity:1}
.showcase{position:relative;perspective:1600px;z-index:1}
.slider-shell{position:relative;padding-inline:44px;--tilt-x:0deg;--tilt-y:0deg}
.gallery-depth{position:absolute;inset:0 44px 40px;pointer-events:none;perspective:1600px}
.preview-wing{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:12px;border:1px solid #ffffff14;filter:brightness(.52) saturate(.6);box-shadow:0 16px 45px #0006;transition:opacity .5s,transform .8s var(--ease)}
.preview-wing-left{transform:translateX(-34px) scale(.92) rotateY(9deg);transform-origin:left center}
.preview-wing-right{transform:translateX(34px) scale(.92) rotateY(-9deg);transform-origin:right center}
.slider-viewport{position:relative;overflow:hidden;width:100%;aspect-ratio:1737/870;border-radius:12px;background:#0c0d10;transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));touch-action:pan-y;cursor:grab;box-shadow:0 0 0 1px #ffffff19,0 2px 0 #ffffff10,0 32px 64px -18px #000b}
.slider-viewport::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border:1px solid #ffffff14;border-radius:inherit;background:linear-gradient(135deg,#ffffff04,transparent 40%);box-shadow:inset 0 1px 0 #ffffff0d}
.slider-track{position:absolute;inset:0;display:flex;align-items:flex-start;width:100%}
.slider-viewport.is-dragging{cursor:grabbing}
.slide-exit{position:absolute;z-index:3;inset:0;pointer-events:none;transform-origin:center;backface-visibility:hidden}
.slide-exit img{width:100%;height:auto}
.slide{position:relative;display:block;flex:0 0 100%;min-width:0;margin:0;overflow:hidden}
.slide img{width:100%;height:auto}
/* Keep the archived interface previews aligned with the current wordmark.
   The original captures remain intact; the website supplies the brand label. */
.slider-viewport{container-type:inline-size}
.slide::after,.slide-exit::after{content:"Veroise Music";position:absolute;left:2.85%;top:.8%;width:10.5%;height:3.2%;display:flex;align-items:center;background:#14171f;color:#d9e0e9;font:600 .72cqw "Segoe UI",sans-serif;pointer-events:none}
.showcase-reflection{position:absolute;left:44px;right:44px;top:calc(100% - 40px);height:70px;overflow:hidden;pointer-events:none;opacity:.14;mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%);filter:blur(2px)}
.showcase-reflection img{width:100%;transform:scaleY(-1);transform-origin:center;position:absolute;bottom:0}
.slider-arrow{position:absolute;z-index:10;top:calc((100% - 40px) / 2);display:grid;place-items:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid #ffffff16;border-radius:50%;background:#101217cc;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff08;transition:transform .25s var(--ease),background .25s,border-color .25s,opacity .25s;opacity:.65}
.slider-arrow:hover{transform:scale(1.08);background:#24272ef2;border-color:#ffffff40;opacity:1}
.slider-arrow:disabled{opacity:.18;cursor:default}
.slider-arrow:disabled:hover{transform:none}
.slider-arrow svg{width:15px;height:15px}
.slider-prev{left:-13px}
.slider-next{right:-13px}
.slider-dots{position:relative;display:flex;justify-content:center;align-items:center;gap:2px;height:40px;margin:0;z-index:2}
.slider-dots button{display:grid;place-items:center;width:28px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
.slider-dots button::after{content:"";width:5px;height:5px;border-radius:99px;background:#ffffff36;transition:width .35s var(--ease),background .35s}
.slider-dots button:hover::after{background:#ffffff80}
.slider-dots button[aria-pressed=true]::after{width:19px;background:#c7cdd8}
.landing-actions{position:relative;z-index:2;display:grid;place-items:center;width:auto;margin-top:18px}
.action-group{display:flex;align-items:center;justify-content:center;gap:10px}
.action-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:156px;height:50px;padding:0 25px;border:1px solid #ffffff1c;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.005em;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.action-button{overflow:hidden;isolation:isolate}
.action-button::after{content:"";position:absolute;inset:-40% -30%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff0a 44%,#ffffffb3 50%,#ffffff0a 56%,transparent 62%);transform:translateX(-100%);opacity:0}
.action-button:hover{transform:translateY(-3px)}
.action-button:hover::after,.action-button:focus-visible::after{animation:button-flash .55s ease-out}
.action-button:active{transform:translateY(0) scale(.98)}
.action-button svg{width:17px;height:17px;flex:none}
.action-primary svg{transition:transform .3s var(--ease)}
.action-primary:hover svg{transform:translateY(2px)}
.action-primary,.action-secondary{background:linear-gradient(180deg,#1e2128,#15171c);color:#c7cbd4;box-shadow:0 1px 0 #ffffff08 inset}
.action-primary:hover,.action-secondary:hover{background:#252831;border-color:#ffffff36;color:#fff}
.action-secondary .discord-icon{fill:currentColor;stroke:none}
.landing-legal{position:relative;z-index:2;flex:none;width:min(720px,calc(100% - 36px));margin:28px auto 0;color:#a3a8b3;text-align:center;font-size:12px;line-height:1.6;-webkit-user-select:text;user-select:text}
.landing-legal *{-webkit-user-select:text;user-select:text}
.landing-legal-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px}
.landing-legal-links a{display:inline-flex;align-items:center;min-height:44px;color:#c7cbd4;text-underline-offset:4px}
.landing-legal-links a:hover{text-decoration:underline;color:#fff}
.landing-legal p{margin:4px 0 0;overflow-wrap:anywhere}
@media(prefers-reduced-motion:no-preference){
  .hero{animation:arrive 1.2s var(--ease) both}
  .showcase{animation:arrive 1.4s .1s var(--ease) both}
  .landing-actions{animation:arrive 1.2s .25s var(--ease) both}
}
@keyframes arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes button-flash{0%{transform:translateX(-70%);opacity:0}15%{opacity:.85}75%{opacity:.65}100%{transform:translateX(70%);opacity:0}}
@media(min-width:1440px) and (min-height:1000px){
  .landing-actions{margin-top:42px}
}
@media(max-width:900px){
  :root{--gutter:30px}
  .page-shell{width:min(calc(100% - (var(--gutter) * 2)),calc((100svh - 434px) * 2 + 36px))}
  main{padding-block:40px}
  .hero{margin-bottom:32px}
  .brand-mark{width:88px;height:88px}
  .slider-shell{padding-inline:18px}
  .gallery-depth{inset-inline:18px}
  .preview-wing-left{transform:translateX(-18px) scale(.92) rotateY(9deg)}
  .preview-wing-right{transform:translateX(18px) scale(.92) rotateY(-9deg)}
  .showcase-reflection{left:18px;right:18px}
  .slider-prev{left:-19px}
  .slider-next{right:-19px}
  .landing-actions{margin-top:18px}
}
@media(max-width:600px){
  :root{--gutter:18px}
  main{padding:40px 0;justify-content:center}
  .hero{margin-bottom:30px}
  .brand-mark{width:106px;height:106px}
  .page-shell{width:calc(100% - (var(--gutter) * 2))}
  .slider-shell{padding-inline:0}
  .slider-viewport{border-radius:8px}
  .gallery-depth{display:none}
  .showcase-reflection{left:0;right:0;top:calc(100% - 52px);height:42px}
  .slider-dots{height:52px;gap:3px}
  .slider-dots button{height:44px;width:30px}
  .slider-arrow{top:auto;bottom:6px;margin:0;width:36px;height:36px;background:transparent;border-color:transparent}
  .slider-prev{left:0}
  .slider-next{right:0}
  .landing-actions{width:calc(100% - 72px);margin-top:18px}
  .action-group{width:100%;gap:10px}
  .action-button{width:50%;min-width:0;height:50px;padding:0 14px;font-size:13px}
}
@media(max-width:380px){
  .landing-actions{width:calc(100% - 40px)}
  main{padding-block:24px}
  .brand-mark{width:82px;height:82px}
  .hero{margin-bottom:24px}
  .landing-actions{margin-top:16px}
}
@media(max-height:560px) and (min-width:601px){
  main{padding-block:18px}
  .hero{margin-bottom:16px}
  .brand-mark{width:52px;height:52px}
  .page-shell{width:min(880px,calc(100% - (var(--gutter) * 2)),calc((100svh - 318px) * 2 + 88px))}
  .slider-shell{padding-inline:44px}
  .gallery-depth{inset-inline:44px}
  .showcase-reflection{left:44px;right:44px}
  .landing-actions{margin-top:8px}
}
@media(max-height:560px) and (max-width:600px){
  main{padding-block:12px}
  .hero{margin-bottom:14px}
  .brand-mark{width:44px;height:44px}
  .showcase{width:min(calc(100% - 36px),max(240px,calc((100svh - 280px) * 2)))}
  .slider-dots{height:44px}
  .showcase-reflection{top:calc(100% - 44px)}
  .landing-actions{margin-top:8px}
  .action-button{height:46px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}