/** Shopify CDN: Minification failed

Line 1024:0 Unexpected "}"

**/
/*
  SeayMy T.Tee's Grand Entrance stylesheet
  Extracted from the current production section without changing cascade order.
  Root specificity is preserved with .smt-grand:not(#_).
*/
.smt-grand:not(#_) {
--mx: 50%;
--my: 35%;
position: relative;
overflow: clip;
background: var(--smt-bg);
color: var(--smt-text);
isolation: isolate;
}
.smt-grand:not(#_) *,
.smt-grand:not(#_) *::before,
.smt-grand:not(#_) *::after {
box-sizing: border-box;
}
.smt-grand:not(#_) a {
color: inherit;
text-decoration: none;
}
.smt-grand:not(#_) img {
display: block;
width: 100%;
height: auto;
}
.smt-grand:not(#_) button,
.smt-grand:not(#_) input {
font: inherit;
}
.smt-grand:not(#_) .smt-shell {
width: min(1480px, calc(100% - 48px));
margin-inline: auto;
}
.smt-grand:not(#_) .smt-eyebrow {
margin: 0 0 14px;
color: var(--smt-cyan);
font-size: clamp(.68rem, .55rem + .25vw, .82rem);
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-button {
--button-bg: rgba(255,255,255,.04);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
min-height: 54px;
padding: 0 24px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
overflow: hidden;
background: var(--button-bg);
color: #fff;
font-size: .76rem;
font-weight: 850;
letter-spacing: .12em;
text-transform: uppercase;
cursor: pointer;
transform: translateZ(0);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.smt-grand:not(#_) .smt-button::before {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.5) 48%, transparent 76%);
transform: translateX(-120%);
transition: transform .7s ease;
}
.smt-grand:not(#_) .smt-button:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,.48);
box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.smt-grand:not(#_) .smt-button:hover::before {
transform: translateX(120%);
}
.smt-grand:not(#_) .smt-button--primary {
--button-bg: linear-gradient(135deg, var(--smt-pink), #a931ff 52%, var(--smt-cyan));
border-color: rgba(255,255,255,.35);
box-shadow: 0 12px 40px color-mix(in srgb, var(--smt-pink) 32%, transparent);
}
.smt-grand:not(#_) .smt-button--ghost {
backdrop-filter: blur(14px);
}
.smt-grand:not(#_) .smt-button--small {
width: 100%;
min-height: 46px;
border-radius: 12px;
}
.smt-grand:not(#_) .smt-grand__page {
min-height: 100vh;
}
.smt-grand:not(#_) .smt-grand__page > .smt-pagefx {
z-index: 1;
}
.smt-grand:not(#_) .smt-boot {
position: fixed;
inset: 0;
z-index: 999999;
display: grid;
place-items: center;
min-height: 100svh;
overflow: hidden;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .9s ease, visibility .9s ease;
}
.smt-grand:not(#_) .smt-boot[hidden] {
display: none !important;
}
.smt-grand:not(#_) .smt-boot.is-mounted {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.smt-grand:not(#_) .smt-boot.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.smt-grand:not(#_) .smt-boot__ambient {
position: absolute;
inset: -20%;
background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(0,225,255,.12), transparent 24%, rgba(255,0,170,.13), transparent 55%, rgba(112,50,255,.14), transparent);
filter: blur(70px);
animation: smtAmbientSpin 12s linear infinite;
}
.smt-grand:not(#_) .smt-boot__grid {
position: absolute;
inset: 0;
opacity: .22;
background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
transform: perspective(700px) rotateX(67deg) translateY(45%);
transform-origin: bottom;
}
.smt-grand:not(#_) .smt-boot__scan {
position: absolute;
inset: 0;
opacity: .12;
pointer-events: none;
background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.08) 4px);
}
.smt-grand:not(#_) .smt-boot__skip {
position: absolute;
top: max(24px, env(safe-area-inset-top));
right: max(24px, env(safe-area-inset-right));
z-index: 3;
border: 0;
background: transparent;
color: rgba(255,255,255,.68);
font-size: .72rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
}
.smt-grand:not(#_) .smt-boot__inner {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 40px));
min-height: min(760px, 88svh);
display: grid;
place-items: center;
text-align: center;
}
.smt-grand:not(#_) .smt-boot__topline {
position: absolute;
top: 0;
margin: 0;
color: rgba(255,255,255,.54);
font-size: clamp(.66rem, .55rem + .25vw, .82rem);
font-weight: 800;
letter-spacing: .22em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__status {
position: absolute;
left: 50%;
top: 48%;
width: min(760px, 92%);
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity .6s ease, transform .8s ease;
}
.smt-grand:not(#_) .smt-boot.is-running .smt-boot__status {
opacity: 1;
}
.smt-grand:not(#_) .smt-boot.is-logo-stage .smt-boot__status {
opacity: .14;
transform: translate(-50%, -57%) scale(.94);
}
.smt-grand:not(#_) .smt-boot__line {
margin: .34em 0;
opacity: 0;
color: rgba(255,255,255,.74);
font-size: clamp(1.1rem, 1.35vw + .9rem, 2rem);
font-weight: 760;
letter-spacing: .08em;
text-transform: uppercase;
transform: translateY(12px);
transition: opacity .4s ease, transform .45s ease, color .45s ease;
}
.smt-grand:not(#_):not(.smt-js) .smt-boot__line:first-child {
opacity: 1;
transform: none;
}
.smt-grand:not(#_) .smt-boot__line.is-active {
opacity: 1;
transform: none;
color: #fff;
}
.smt-grand:not(#_) .smt-boot__line.is-active::after {
content: "";
display: inline-block;
width: .5em;
height: 1px;
margin-left: .35em;
background: var(--smt-cyan);
vertical-align: middle;
box-shadow: 0 0 18px var(--smt-cyan);
animation: smtBlink .8s steps(2,end) infinite;
}
.smt-grand:not(#_) .smt-boot__mark {
position: absolute;
left: 50%;
top: 45%;
opacity: 0;
filter: drop-shadow(0 0 28px rgba(0,220,255,.28)) drop-shadow(0 0 64px rgba(255,0,183,.18));
transform: translate(-50%, -50%) scale(1) rotateX(0);
transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.8,.2,1), filter 1s ease;
}
.smt-grand:not(#_).smt-js .smt-boot.is-running:not(.is-logo-stage) .smt-boot__mark {
opacity: 0;
width: min(520px, 68vw);
transform: translate(-50%, -50%) scale(.72) rotateX(18deg);
}
.smt-grand:not(#_) .smt-boot.is-logo-stage .smt-boot__mark {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotateX(0);
}
.smt-grand:not(#_) .smt-boot.is-welcome-stage .smt-boot__mark {
top: 29%;
width: min(360px, 54vw);
filter: drop-shadow(0 0 22px rgba(0,220,255,.34)) drop-shadow(0 0 44px rgba(255,0,183,.22));
}
.smt-grand:not(#_) .smt-boot__logo-image {
max-height: 32svh;
object-fit: contain;
}
.smt-grand:not(#_) .smt-boot__monogram {
position: relative;
display: flex;
justify-content: center;
gap: .02em;
font-size: clamp(6rem, 13vw, 13rem);
font-weight: 950;
font-style: italic;
line-height: .75;
letter-spacing: -.13em;
text-shadow: 10px 12px 0 rgba(0,0,0,.28), 0 0 32px rgba(0,225,255,.28);
}
.smt-grand:not(#_) .smt-boot__monogram span:nth-child(1) {
color: #fff;
}
.smt-grand:not(#_) .smt-boot__monogram span:nth-child(2) {
color: var(--smt-pink);
}
.smt-grand:not(#_) .smt-boot__monogram span:nth-child(3) {
color: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-boot__monogram i {
position: absolute;
width: 33%;
height: 19%;
right: -3%;
bottom: -17%;
border: .08em solid var(--smt-green);
border-top-color: #ff4242;
border-radius: 50% 50% 46% 46%;
transform: rotate(-7deg);
filter: drop-shadow(0 0 14px rgba(84,255,120,.45));
}
.smt-grand:not(#_) .smt-boot__welcome {
position: absolute;
left: 50%;
top: 61%;
width: min(860px, 94%);
opacity: 0;
transform: translate(-50%, 34px);
transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.smt-grand:not(#_).smt-js .smt-boot.is-running:not(.is-welcome-stage) .smt-boot__welcome {
opacity: 0;
transform: translate(-50%, 34px);
}
.smt-grand:not(#_) .smt-boot.is-welcome-stage .smt-boot__welcome {
opacity: 1;
transform: translate(-50%, 0);
}
.smt-grand:not(#_) .smt-boot__welcome-kicker {
margin: 0 0 5px;
color: var(--smt-cyan);
font-size: clamp(.75rem, .6rem + .3vw, .95rem);
font-weight: 850;
letter-spacing: .24em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__welcome h2 {
margin: 0;
font-size: clamp(2.2rem, 5vw, 5.8rem);
font-weight: 950;
line-height: .9;
letter-spacing: -.055em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__welcome-copy {
max-width: 700px;
margin: 18px auto 0;
color: rgba(255,255,255,.76);
font-size: clamp(1rem, .75rem + .55vw, 1.4rem);
line-height: 1.55;
}
.smt-grand:not(#_) .smt-boot__tagline {
margin: 16px 0 22px;
color: rgba(255,255,255,.92);
font-size: clamp(.72rem, .62rem + .22vw, .9rem);
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__enter {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: opacity .45s ease, transform .45s ease;
}
.smt-grand:not(#_).smt-js .smt-boot.is-running:not(.is-enter-stage) .smt-boot__enter {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
}
.smt-grand:not(#_) .smt-boot.is-enter-stage .smt-boot__enter {
opacity: 1;
transform: none;
pointer-events: auto;
}
.smt-grand:not(#_) .smt-boot__progress {
position: absolute;
left: 50%;
bottom: 1px;
width: min(760px, 86%);
overflow: hidden;
transform: translateX(-50%);
}
.smt-grand:not(#_) .smt-boot__progress span {
display: block;
width: 0;
height: 100%;
background: linear-gradient(90deg, var(--smt-cyan), var(--smt-pink), var(--smt-purple));
box-shadow: 0 0 18px var(--smt-cyan);
}
.smt-grand:not(#_) .smt-boot.is-running .smt-boot__progress span {
animation: smtProgress var(--boot-duration, 8000ms) linear forwards;
}
.smt-grand:not(#_) .smt-hero {
position: relative;
min-height: max(var(--smt-hero-height), 78svh);
display: grid;
align-items: stretch;
overflow: hidden;
background: #05050a;
}
.smt-grand:not(#_) .smt-hero__backdrop,
.smt-grand:not(#_) .smt-hero__background-picture,
.smt-grand:not(#_) .smt-hero__background-image,
.smt-grand:not(#_) .smt-hero__wash {
position: absolute;
inset: 0;
}
.smt-grand:not(#_) .smt-hero__background-picture {
display: block;
}
.smt-grand:not(#_) .smt-hero__background-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--smt-hero-bg-position, center);
opacity: .94;
filter: saturate(.94) contrast(1.08) brightness(.78);
transform: scale(1.012);
}
.smt-grand:not(#_) .smt-hero__wash {
background: linear-gradient(90deg, rgba(2,3,8,.97) 0%, rgba(2,3,8,.92) 21%, rgba(2,3,8,.62) 36%, rgba(2,3,8,.08) 62%, rgba(2,3,8,.20) 78%, rgba(2,3,8,.72) 100%),
linear-gradient(to bottom, rgba(0,0,0,.12), transparent 56%, rgba(5,5,10,.72) 92%, var(--smt-bg));
}
.smt-grand:not(#_) .smt-hero__backdrop::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255,255,255,.018) 5px),
radial-gradient(circle at 62% 40%, rgba(0,217,255,.08), transparent 22%),
radial-gradient(circle at 85% 48%, rgba(255,42,173,.09), transparent 24%);
mix-blend-mode: screen;
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero__light {
position: absolute;
width: 44vw;
height: 44vw;
border-radius: 50%;
filter: blur(110px);
opacity: .13;
animation: smtLightFloat 9s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-hero__light--cyan {
left: 35%;
top: -28%;
background: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-hero__light--pink {
right: -14%;
bottom: -38%;
background: var(--smt-pink);
animation-delay: -4s;
}
.smt-grand:not(#_) .smt-hero__cursor-light {
position: absolute;
inset: 0;
background: radial-gradient(540px circle at var(--mx) var(--my), rgba(255,255,255,.12), transparent 58%);
mix-blend-mode: screen;
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero__layout {
position: relative;
z-index: 3;
min-height: max(var(--smt-hero-height), 78svh);
margin-inline: auto;
padding: clamp(58px, 7vh, 92px) 0 66px;
}
.smt-grand:not(#_) .smt-hero__copy {
position: relative;
z-index: 8;
}
.smt-grand:not(#_) .smt-hero__terminal {
position: relative;
width: min(420px, 100%);
margin-bottom: 20px;
padding: 17px 20px 15px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--smt-cyan) 48%, rgba(255,255,255,.22));
border-radius: 10px;
background: linear-gradient(145deg, rgba(2,15,22,.88), rgba(4,7,14,.74));
box-shadow: inset 0 0 30px rgba(0,217,255,.06), 0 0 26px rgba(0,217,255,.09);
backdrop-filter: blur(16px);
}
.smt-grand:not(#_) .smt-hero__terminal::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.035) 4px);
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero__terminal-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
color: var(--smt-pink);
font-size: .62rem;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-hero__terminal-head i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--smt-pink);
box-shadow: 0 0 14px var(--smt-pink);
animation: smtBlink 1.1s steps(2,end) infinite;
}
.smt-grand:not(#_) .smt-hero__terminal-lines {
position: relative;
z-index: 1;
}
.smt-grand:not(#_) .smt-hero__terminal p,
.smt-grand:not(#_) .smt-hero__terminal strong,
.smt-grand:not(#_) .smt-hero__terminal small {
display: block;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-hero__terminal p {
margin-top: 4px;
color: rgba(255,255,255,.66);
font-size: .64rem;
letter-spacing: .08em;
}
.smt-grand:not(#_) .smt-hero__terminal b {
color: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-hero__terminal strong {
margin-top: 9px;
color: var(--smt-green);
font-size: .75rem;
letter-spacing: .12em;
text-shadow: 0 0 14px rgba(93,255,133,.36);
}
.smt-grand:not(#_) .smt-hero__terminal small {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.38);
font-size: .56rem;
letter-spacing: .12em;
}
.smt-grand:not(#_) .smt-hero .smt-eyebrow {
margin-bottom: 9px;
font-size: .62rem;
}
.smt-grand:not(#_) .smt-hero__heading {
margin: 0;
color: #fff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(3.25rem, 5.25vw, 6.15rem);
font-weight: 800;
font-style: italic;
line-height: .84;
letter-spacing: -.07em;
text-transform: uppercase;
text-wrap: balance;
text-shadow: 0 10px 34px rgba(0,0,0,.42);
}
.smt-grand:not(#_) .smt-hero__heading span {
display: block;
}
.smt-grand:not(#_) .smt-hero__heading em {
color: var(--smt-pink);
font-style: inherit;
-webkit-text-stroke: 0;
text-shadow: 0 0 30px color-mix(in srgb, var(--smt-pink) 24%, transparent);
}
.smt-grand:not(#_) .smt-hero__text {
max-width: 510px;
margin-top: 17px;
color: rgba(255,255,255,.75);
font-size: clamp(.92rem, .82rem + .22vw, 1.08rem);
line-height: 1.56;
}
.smt-grand:not(#_) .smt-hero__tagline {
margin: 15px 0 0;
color: #fff;
font-size: .66rem;
font-weight: 900;
letter-spacing: .28em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-hero__tagline::first-letter {
color: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}
.smt-grand:not(#_) .smt-hero__actions .smt-button {
min-height: 48px;
border-radius: 3px;
padding-inline: 22px;
font-size: .66rem;
}
.smt-grand:not(#_) .smt-hero__actions .smt-button--ghost {
border-color: color-mix(in srgb, var(--smt-pink) 72%, white);
background: rgba(0,0,0,.34);
}
.smt-grand:not(#_) .smt-hero__stage {
position: absolute;
z-index: 4;
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero__platform {
position: absolute;
border: 1px solid rgba(255,255,255,.1);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,.12), rgba(255,255,255,.02) 42%, transparent 70%);
transform: translateX(-50%) rotateX(76deg);
}
.smt-grand:not(#_) .smt-hero__person {
position: absolute;
bottom: -1.2%;
margin: 0;
transition: transform .18s ease-out;
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-hero__person::after {
content: "";
position: absolute;
inset: 12% 8% 2%;
z-index: -1;
background: var(--person-glow);
filter: blur(54px);
opacity: .19;
}
.smt-grand:not(#_) .smt-hero__person--left {
--person-glow: var(--smt-cyan);
z-index: 5;
left: var(--smt-model-left-position);
width: var(--smt-model-left-width);
transform: translate3d(calc(var(--tilt-x, 0px) * -.28), calc(var(--tilt-y, 0px) * -.20), 42px);
}
.smt-grand:not(#_) .smt-hero__person--right {
--person-glow: var(--smt-pink);
z-index: 7;
right: var(--smt-model-right-position);
width: var(--smt-model-right-width);
transform: translate3d(calc(var(--tilt-x, 0px) * .34), calc(var(--tilt-y, 0px) * .28), 72px);
}
.smt-grand:not(#_) .smt-hero__person-image {
width: 100%;
max-height: min(760px, 82svh);
object-fit: contain;
object-position: bottom;
filter: drop-shadow(0 28px 38px rgba(0,0,0,.62));
}
.smt-grand:not(#_) .smt-hero__emblem {
position: absolute;
z-index: 6;
left: var(--smt-logo-position);
top: var(--smt-logo-top);
width: var(--smt-logo-width);
transform: translate3d(calc(-50% + var(--tilt-x, 0px)), calc(-50% + var(--tilt-y, 0px)), 68px) rotateY(var(--rotate-y, 0deg)) rotateX(var(--rotate-x, 0deg));
transform-style: preserve-3d;
transition: transform .18s ease-out;
filter: drop-shadow(0 0 24px rgba(0,220,255,.22)) drop-shadow(0 0 52px rgba(255,0,180,.18));
animation: smtEmblemFloat 6s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-hero__emblem::before {
content: "";
position: absolute;
inset: 7%;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,217,255,.10), rgba(255,42,173,.04) 48%, transparent 70%);
filter: blur(30px);
}
.smt-grand:not(#_) .smt-hero__emblem-image {
width: 100%;
max-height: 520px;
object-fit: contain;
}
.smt-grand:not(#_) .smt-hero__stage:not(:has(.smt-hero__emblem)) .smt-hero__person--left {
left: max(var(--smt-model-left-position), 8%);
}
.smt-grand:not(#_) .smt-hero__stage:not(:has(.smt-hero__emblem)) .smt-hero__person--right {
right: max(var(--smt-model-right-position), 4%);
}
.smt-grand:not(#_) .smt-hero__orbit {
display: none;
}
.smt-grand:not(#_) .smt-hero__scroll {
position: absolute;
z-index: 9;
left: 50%;
bottom: 15px;
display: grid;
justify-items: center;
gap: 5px;
transform: translateX(-50%);
color: rgba(255,255,255,.38);
}
.smt-grand:not(#_) .smt-hero__scroll span {
width: 1px;
height: 25px;
background: linear-gradient(to bottom, transparent, var(--smt-cyan));
animation: smtScroll 1.7s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-hero__scroll small {
font-size: .51rem;
font-weight: 800;
letter-spacing: .2em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-particles {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.smt-grand:not(#_) .smt-particles i {
position: absolute;
left: calc((var(--i) * 5.35%) - 2%);
top: calc(10% + (var(--i) * 4.2%));
width: calc(1px + (var(--i) % 3) * 1px);
height: calc(1px + (var(--i) % 3) * 1px);
border-radius: 50%;
background: rgba(255,255,255,.65);
box-shadow: 0 0 12px var(--smt-cyan);
opacity: calc(.12 + (var(--i) % 5) * .08);
animation: smtParticle calc(7s + var(--i) * .35s) linear infinite;
animation-delay: calc(var(--i) * -.45s);
}
.smt-grand:not(#_) .smt-trust__grid > div {
position: relative;
min-height: 96px;
display: grid;
align-content: center;
gap: 5px;
padding: 20px 22px 20px 72px;
border-right: 1px solid rgba(255,255,255,.08);
}
.smt-grand:not(#_) .smt-trust__grid > div::before {
position: absolute;
left: 23px;
top: 50%;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
transform: translateY(-50%);
color: var(--smt-pink);
font-size: 1rem;
box-shadow: inset 0 0 16px rgba(255,42,173,.08), 0 0 18px rgba(255,42,173,.08);
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(1)::before {
content: "↯";
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(2)::before {
content: "◇";
color: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(3)::before {
content: "♡";
color: var(--smt-pink);
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(4)::before {
content: "▣";
color: var(--smt-purple);
}
.smt-grand:not(#_) .smt-trust__grid > div:last-child {
border-right: 0;
}
.smt-grand:not(#_) .smt-trust strong {
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-trust span {
color: var(--smt-muted);
font-size: .82rem;
}
.smt-grand:not(#_) .smt-section {
position: relative;
padding: clamp(88px, 10vw, 150px) 0;
}
.smt-grand:not(#_) .smt-section__header {
max-width: 840px;
margin-bottom: 46px;
}
.smt-grand:not(#_) .smt-section__header--row {
max-width: none;
display: flex;
justify-content: space-between;
align-items: end;
gap: 40px;
}
.smt-grand:not(#_) .smt-section__header h2,
.smt-grand:not(#_) .smt-story h2,
.smt-grand:not(#_) .smt-newsletter h2 {
margin: 0;
font-size: clamp(2.45rem, 4.35vw, 5.35rem);
font-weight: 950;
line-height: .88;
letter-spacing: -.06em;
text-transform: uppercase;
text-wrap: balance;
}
.smt-grand:not(#_) .smt-section__header > div,
.smt-grand:not(#_) .smt-story__text,
.smt-grand:not(#_) .smt-newsletter__inner > div {
margin-top: 20px;
color: var(--smt-muted);
font-size: clamp(.98rem, .9rem + .2vw, 1.14rem);
line-height: 1.7;
}
.smt-grand:not(#_) .smt-text-link {
flex: none;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.36);
font-size: .72rem;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-reveal {
opacity: 1;
transform: none;
}
.smt-grand:not(#_).smt-js .smt-reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.smt-grand:not(#_).smt-js .smt-reveal.is-visible {
opacity: 1;
transform: none;
}
.smt-grand:not(#_) .smt-glitch {
position: relative;
}
.smt-grand:not(#_) .smt-trust {
position: relative;
z-index: 5;
border-block: 1px solid rgba(255,255,255,.08);
background: rgba(7,7,13,.86);
backdrop-filter: blur(20px) saturate(1.08);
box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.smt-grand:not(#_) .smt-trust::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--smt-pink), var(--smt-cyan), transparent);
opacity: .6;
}
.smt-grand:not(#_) .smt-trust__grid {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
}
.smt-grand:not(#_) .smt-trust__item {
position: relative;
display: grid;
align-items: center;
min-height: 96px;
padding: 18px 24px;
}
.smt-grand:not(#_) .smt-trust__item + .smt-trust__item {
border-left: 1px solid rgba(255,255,255,.075);
}
.smt-grand:not(#_) .smt-trust__icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 50%;
background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), rgba(255,255,255,.025));
color: var(--smt-pink);
box-shadow: inset 0 0 20px rgba(255,255,255,.025), 0 0 24px rgba(255,42,173,.08);
transition: transform .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.smt-grand:not(#_) .smt-trust__item:nth-child(even) .smt-trust__icon {
color: var(--smt-cyan);
box-shadow: inset 0 0 20px rgba(255,255,255,.025), 0 0 24px rgba(0,217,255,.08);
}
.smt-grand:not(#_) .smt-trust__icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.55;
stroke-linecap: round;
stroke-linejoin: round;
}
.smt-grand:not(#_) .smt-trust__copy {
display: grid;
gap: 5px;
}
.smt-grand:not(#_) .smt-trust__copy strong {
font-size: .64rem;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-trust__copy small {
color: rgba(255,255,255,.53);
font-size: .68rem;
line-height: 1.35;
}
.smt-grand:not(#_) .smt-trust__item:hover .smt-trust__icon {
transform: translateY(-3px) scale(1.04);
border-color: currentColor;
box-shadow: 0 0 30px color-mix(in srgb, currentColor 18%, transparent);
}
.smt-grand:not(#_) .smt-drops{
position:relative;isolation:isolate;overflow:hidden;min-height:clamp(820px,54vw,980px);
padding:clamp(72px,5.4vw,104px) 0 42px;background:#02030a;contain:layout paint style;
}
.smt-grand:not(#_) .smt-drops__background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--drops-bg-opacity,.58)}
.smt-grand:not(#_) .smt-drops__background-image{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(1.08) contrast(1.04) brightness(.82)}
.smt-grand:not(#_) .smt-drops__background--empty{background:radial-gradient(circle at 8% 60%,rgba(255,42,173,.26),transparent 35%),radial-gradient(circle at 92% 60%,rgba(0,217,255,.22),transparent 35%),#03040b}
.smt-grand:not(#_) .smt-drops__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,3,10,.28),rgba(2,3,10,.05) 28%,rgba(2,3,10,.08) 72%,rgba(2,3,10,.56)),radial-gradient(ellipse 58% 54% at 50% 48%,transparent 0 45%,rgba(1,2,7,.34) 78%,rgba(1,2,7,.70) 100%)}
.smt-grand:not(#_) .smt-drops__atmosphere{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.smt-grand:not(#_) .smt-drops__atmosphere>span{position:absolute;pointer-events:none}
.smt-grand:not(#_) .smt-drops__orb{width:34vw;height:34vw;border-radius:50%;filter:blur(105px);opacity:.11;animation:smtLightFloat 11s ease-in-out infinite alternate}
.smt-grand:not(#_) .smt-drops__orb--pink{left:-15vw;bottom:-12vw;background:var(--smt-pink)}
.smt-grand:not(#_) .smt-drops__orb--cyan{right:-15vw;bottom:-12vw;background:var(--smt-cyan);animation-delay:-4s}
.smt-grand:not(#_) .smt-drops__beam{top:42%;width:clamp(110px,10vw,185px);height:2px;opacity:.48;background:linear-gradient(90deg,transparent,currentColor,#fff);filter:drop-shadow(0 0 8px currentColor);animation:smtDropsBeam 6.5s ease-in-out infinite}
.smt-grand:not(#_) .smt-drops__beam--left{left:-1%;color:var(--smt-pink);transform:rotate(72deg)}
.smt-grand:not(#_) .smt-drops__beam--right{right:-1%;color:var(--smt-cyan);transform:rotate(-72deg);animation-delay:-3s}
.smt-grand:not(#_) .smt-drops__fog{bottom:2%;width:33vw;height:14vw;border-radius:50%;filter:blur(52px);opacity:.18;animation:smtFogDrift 10s ease-in-out infinite alternate}
.smt-grand:not(#_) .smt-drops__fog--left{left:-5%;background:radial-gradient(ellipse,rgba(255,42,173,.50),transparent 69%)}
.smt-grand:not(#_) .smt-drops__fog--right{right:-5%;background:radial-gradient(ellipse,rgba(0,217,255,.45),transparent 69%);animation-delay:-4s}
.smt-grand:not(#_) .smt-drops__gridfx{inset:0;opacity:.035;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 92%,transparent)}
.smt-grand:not(#_) .smt-drops__scan{left:-20%;right:-20%;top:35%;height:1px;opacity:.22;background:linear-gradient(90deg,transparent,var(--smt-pink),#fff,var(--smt-cyan),transparent);filter:drop-shadow(0 0 8px var(--smt-cyan));animation:smtPortalSweep 9s ease-in-out infinite}
.smt-grand:not(#_) .smt-drops__spark{width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px currentColor;opacity:.55;animation:smtDropsSpark 5s ease-in-out infinite}
.smt-grand:not(#_) .smt-drops__spark--1{left:20%;top:24%;color:var(--smt-pink)}
.smt-grand:not(#_) .smt-drops__spark--2{right:22%;top:18%;color:var(--smt-cyan);animation-delay:-1.7s}
.smt-grand:not(#_) .smt-drops__spark--3{left:58%;bottom:17%;color:#b96cff;animation-delay:-3.1s}
.smt-grand:not(#_) .smt-drops__shell{position:relative;z-index:4;width:min(1540px,calc(100vw - 72px));max-width:none;margin-inline:auto}
.smt-grand:not(#_) .smt-drops__header{position:relative;align-items:end;margin-bottom:clamp(20px,2.2vw,34px)}
.smt-grand:not(#_) .smt-drops__heading-wrap{position:relative;max-width:860px;padding-left:18px}
.smt-grand:not(#_) .smt-drops__heading-wrap::before{content:"";position:absolute;left:0;top:6px;bottom:2px;width:2px;background:linear-gradient(var(--smt-cyan),var(--smt-pink));box-shadow:0 0 18px rgba(0,217,255,.35)}
.smt-grand:not(#_) .smt-drops__heading-wrap::after{content:"";position:absolute;left:18px;top:-18px;width:220px;height:1px;background:linear-gradient(90deg,var(--smt-cyan),var(--smt-pink),transparent);box-shadow:0 0 14px rgba(255,42,173,.32)}
.smt-grand:not(#_) .smt-drops__eyebrow{color:var(--smt-cyan);text-shadow:0 0 16px rgba(0,217,255,.42)}
.smt-grand:not(#_) .smt-drops__header h2{position:relative;margin:0;background:linear-gradient(90deg,#fff 0%,#eef7ff 28%,#ffd6f3 64%,#d9f8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(3.7rem,5.7vw,7rem);line-height:.86;letter-spacing:-.06em;text-transform:uppercase;text-shadow:0 10px 38px rgba(0,0,0,.60)}
.smt-grand:not(#_) .smt-drops__intro{max-width:650px;margin-top:18px;color:rgba(255,255,255,.80);font-size:clamp(1rem,.94rem + .18vw,1.16rem);line-height:1.6}
.smt-grand:not(#_) .smt-drops__intro p{margin:0}
.smt-grand:not(#_) .smt-drops__all{display:inline-flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.32);color:#fff;font-size:.74rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;transition:.25s ease}
.smt-grand:not(#_) .smt-drops__all svg{width:18px;height:18px;fill:none;stroke:var(--smt-cyan);stroke-width:1.8}
.smt-grand:not(#_) .smt-drops__all:hover{color:var(--smt-cyan);border-color:var(--smt-cyan);transform:translateX(4px)}
.smt-grand:not(#_) .smt-drops__stage{position:relative;padding-inline:74px;perspective:2200px}
.smt-grand:not(#_) .smt-drops__viewport{position:relative;z-index:4;overflow:hidden;padding:30px 14px 60px}
.smt-grand:not(#_) .smt-drops__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--drops-visible) - 1)*24px)/var(--drops-visible));gap:24px;align-items:end;transform-style:preserve-3d;transition:transform .68s cubic-bezier(.2,.8,.2,1);will-change:transform}
.smt-grand:not(#_) .smt-product{position:relative;min-width:0;isolation:isolate;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease}
.smt-grand:not(#_) .smt-product__chassis{position:absolute;inset:14px -11px -16px 11px;z-index:-2;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.10),transparent 28%),linear-gradient(135deg,rgba(255,42,173,.15),rgba(5,8,20,.92) 48%,rgba(0,217,255,.13));box-shadow:18px 24px 48px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.10),0 0 28px rgba(128,61,255,.14);transform:translateZ(-42px)}
.smt-grand:not(#_) .smt-product__edge{position:absolute;inset:-1px;z-index:3;border-radius:25px;pointer-events:none;background:linear-gradient(135deg,var(--smt-pink),rgba(255,255,255,.82) 34%,rgba(255,255,255,.12) 58%,var(--smt-cyan));padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:drop-shadow(0 0 8px rgba(255,42,173,.24)) drop-shadow(0 0 10px rgba(0,217,255,.20))}
.smt-grand:not(#_) .smt-product__glow{position:absolute;inset:10% -7% -12%;z-index:-3;border-radius:32px;background:radial-gradient(circle at 20% 85%,rgba(255,42,173,.28),transparent 46%),radial-gradient(circle at 85% 80%,rgba(0,217,255,.22),transparent 46%);filter:blur(28px);opacity:.48;transition:.4s ease}
.smt-grand:not(#_) .smt-product__shine{position:absolute;inset:1px;z-index:4;overflow:hidden;border-radius:24px;pointer-events:none}
.smt-grand:not(#_) .smt-product__shine::before{content:"";position:absolute;top:-20%;left:-80%;width:48%;height:150%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.20),transparent);transform:skewX(-18deg);transition:left .75s ease}
.smt-grand:not(#_) .smt-product__inner{position:relative;z-index:1;display:flex;flex-direction:column;min-height:560px;border:1px solid rgba(255,255,255,.18);border-radius:24px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 22%,rgba(7,10,24,.72) 60%,rgba(2,4,12,.92)),linear-gradient(120deg,rgba(255,42,173,.07),transparent 40%,rgba(0,217,255,.06));-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 34px 70px rgba(0,0,0,.52)}
.smt-grand:not(#_) .smt-product__media{position:relative;display:block;aspect-ratio:1/.94;overflow:hidden;margin:12px;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:radial-gradient(circle at 50% 38%,rgba(112,66,170,.42),rgba(10,13,29,.88) 54%,rgba(3,5,13,.97));box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -40px 58px rgba(0,0,0,.34)}
.smt-grand:not(#_) .smt-product__badge{position:absolute;left:12px;top:12px;z-index:5;padding:8px 12px;border:1px solid rgba(255,255,255,.20);border-radius:999px;background:rgba(4,6,15,.64);color:#fff;font-size:.56rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.smt-grand:not(#_) .smt-product__image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:contrast(1.06) brightness(1.04) saturate(1.05) drop-shadow(0 20px 18px rgba(0,0,0,.32));transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.smt-grand:not(#_) .smt-product__image--secondary{opacity:0;transform:scale(1.045)}
.smt-grand:not(#_) .smt-product__media-shade{position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(transparent,rgba(2,4,12,.34));pointer-events:none}
.smt-grand:not(#_) .smt-product__body{display:flex;flex-direction:column;flex:1;padding:14px 18px 18px}
.smt-grand:not(#_) .smt-product__info{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.smt-grand:not(#_) .smt-product__copy p{margin:0 0 8px;color:var(--smt-cyan);font-size:.58rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.smt-grand:not(#_) .smt-product__copy h3{margin:0;font-size:clamp(.96rem,.85rem + .2vw,1.12rem);line-height:1.28}
.smt-grand:not(#_) .smt-product__price{flex:none;font-size:1.08rem;font-weight:900}
.smt-grand:not(#_) .smt-product__form{margin-top:auto;padding-top:18px}
.smt-grand:not(#_) .smt-product__button,.smt-grand:not(#_) .smt-product__soldout{width:100%;min-height:50px;border:1px solid transparent;border-radius:11px;background:linear-gradient(#070a17,#070a17) padding-box,linear-gradient(90deg,var(--smt-pink),var(--smt-cyan)) border-box;color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 0 18px rgba(0,217,255,.08);transition:.28s ease}
.smt-grand:not(#_) .smt-product__button{display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}
.smt-grand:not(#_) .smt-product__button svg{width:19px;height:19px;fill:none;stroke:#d468ff;stroke-width:1.8}
.smt-grand:not(#_) .smt-product__soldout{display:grid;place-items:center;color:rgba(255,255,255,.58)}
.smt-grand:not(#_) .smt-product::after{content:"";position:absolute;left:8%;right:8%;bottom:-35px;height:52px;z-index:-4;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.12),rgba(255,42,173,.22) 28%,rgba(0,217,255,.14) 52%,transparent 74%);filter:blur(11px);transform:rotateX(72deg);opacity:.84}
.smt-grand:not(#_) .smt-product:nth-child(4n+1){transform:rotateY(4deg) translateY(14px)}
.smt-grand:not(#_) .smt-product:nth-child(4n+2){transform:rotateY(1.5deg) translateZ(16px) scale(1.015)}
.smt-grand:not(#_) .smt-product:nth-child(4n+3){transform:rotateY(-1.5deg) translateZ(28px) scale(1.028)}
.smt-grand:not(#_) .smt-product:nth-child(4n+4){transform:rotateY(-4deg) translateY(14px)}
.smt-grand:not(#_) .smt-product:hover{z-index:12;transform:translateY(-18px) rotateY(0) scale(1.045) translateZ(54px)}
.smt-grand:not(#_) .smt-product:hover .smt-product__glow{opacity:.92;filter:blur(34px)}
.smt-grand:not(#_) .smt-product:hover .smt-product__shine::before{left:135%}
.smt-grand:not(#_) .smt-product:hover .smt-product__image--primary{opacity:0;transform:scale(1.035)}
.smt-grand:not(#_) .smt-product:hover .smt-product__image--secondary{opacity:1;transform:scale(1)}
.smt-grand:not(#_) .smt-product:hover .smt-product__button{box-shadow:0 0 25px rgba(255,42,173,.22),0 0 30px rgba(0,217,255,.16);transform:translateY(-2px)}
.smt-grand:not(#_) .smt-drops__nav{position:absolute;top:50%;z-index:8;width:58px;height:58px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025)),rgba(5,6,14,.76);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 32px rgba(0,0,0,.42);transform:translateY(-50%);transition:.25s ease}
.smt-grand:not(#_) .smt-drops__nav--prev{left:0}.smt-grand:not(#_) .smt-drops__nav--next{right:0}
.smt-grand:not(#_) .smt-drops__nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.smt-grand:not(#_) .smt-drops__nav:hover:not(:disabled){border-color:var(--smt-cyan);box-shadow:0 0 28px rgba(0,217,255,.24);transform:translateY(-50%) scale(1.06)}
.smt-grand:not(#_) .smt-drops__nav:disabled{opacity:.28;cursor:default}
.smt-grand:not(#_) .smt-drops__floor{position:absolute;left:50%;bottom:34px;z-index:2;width:min(88%,1380px);height:98px;border:1px solid rgba(255,255,255,.10);border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,255,255,.08),rgba(165,70,255,.19) 28%,rgba(0,217,255,.11) 52%,transparent 73%);box-shadow:0 0 36px rgba(255,42,173,.15),inset 0 0 38px rgba(0,217,255,.08);filter:blur(.2px);transform:translateX(-50%) perspective(1000px) rotateX(74deg);pointer-events:none}
.smt-grand:not(#_) .smt-drops__dots{position:relative;z-index:5;display:flex;justify-content:center;gap:9px;margin-top:4px}
.smt-grand:not(#_) .smt-drops__dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(112,141,207,.5);transition:.25s ease}
.smt-grand:not(#_) .smt-drops__dot.is-active{width:14px;background:linear-gradient(90deg,var(--smt-pink),var(--smt-cyan));box-shadow:0 0 16px rgba(255,42,173,.4)}
@media(min-width:1200px) and (max-width:1499px){.smt-grand:not(#_) .smt-drops{--drops-visible:3}.smt-grand:not(#_) .smt-drops__stage{padding-inline:64px}}
@media(min-width:750px) and (max-width:1199px){.smt-grand:not(#_) .smt-drops{--drops-visible:2}.smt-grand:not(#_) .smt-drops__stage{padding-inline:52px}}
@media(max-width:749px){
.smt-grand:not(#_) .smt-drops{min-height:auto;padding:58px 0 72px;contain:layout paint style}
.smt-grand:not(#_) .smt-drops__background-image{filter:brightness(.72) saturate(.95);object-position:50% 50%}
.smt-grand:not(#_) .smt-drops__atmosphere,.smt-grand:not(#_) .smt-drops__floor{display:none!important}
.smt-grand:not(#_) .smt-drops__veil{background:linear-gradient(180deg,rgba(2,3,10,.42),rgba(2,3,10,.14) 28%,rgba(2,3,10,.28) 70%,rgba(2,3,10,.72))}
.smt-grand:not(#_) .smt-drops__shell{width:min(100% - 24px,560px)}
.smt-grand:not(#_) .smt-drops__header{display:block;margin-bottom:22px}
.smt-grand:not(#_) .smt-drops__heading-wrap{padding-left:12px}
.smt-grand:not(#_) .smt-drops__heading-wrap::after{width:130px;top:-12px}
.smt-grand:not(#_) .smt-drops__header h2{font-size:clamp(2.75rem,14vw,4.3rem)}
.smt-grand:not(#_) .smt-drops__intro{margin-top:12px;font-size:.96rem}
.smt-grand:not(#_) .smt-drops__all{margin-top:16px}
.smt-grand:not(#_) .smt-drops__stage{padding:0;perspective:none}
.smt-grand:not(#_) .smt-drops__viewport{overflow-x:auto;overflow-y:hidden;padding:8px 16px 24px 0;margin-right:-12px;scroll-snap-type:x mandatory;scroll-padding-left:0;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.smt-grand:not(#_) .smt-drops__viewport::-webkit-scrollbar{display:none}
.smt-grand:not(#_) .smt-drops__track{grid-auto-columns:min(84vw,350px);gap:16px;align-items:stretch;transform:none!important;transition:none!important;will-change:auto}
.smt-grand:not(#_) .smt-product,.smt-grand:not(#_) .smt-product:nth-child(n){scroll-snap-align:start;transform:none!important;filter:none!important;transition:none!important}
.smt-grand:not(#_) .smt-product__chassis{inset:7px -5px -8px 5px;transform:none;box-shadow:10px 14px 24px rgba(0,0,0,.42)}
.smt-grand:not(#_) .smt-product__inner{min-height:520px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(6,9,20,.95));-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 38px rgba(0,0,0,.44)}
.smt-grand:not(#_) .smt-product__edge{filter:none}
.smt-grand:not(#_) .smt-product__glow,.smt-grand:not(#_) .smt-product__shine,.smt-grand:not(#_) .smt-product::after{display:none!important}
.smt-grand:not(#_) .smt-product__media{margin:10px;box-shadow:inset 0 -28px 44px rgba(0,0,0,.28)}
.smt-grand:not(#_) .smt-product__image{filter:none!important;transition:none!important}
.smt-grand:not(#_) .smt-product__image--secondary{display:none!important}
.smt-grand:not(#_) .smt-product:hover .smt-product__image--primary{opacity:1;transform:none}
.smt-grand:not(#_) .smt-product__badge{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,6,15,.88)}
.smt-grand:not(#_) .smt-drops__nav,.smt-grand:not(#_) .smt-drops__dots{display:none!important}
}
@media(prefers-reduced-motion:reduce){.smt-grand:not(#_) .smt-drops *,.smt-grand:not(#_) .smt-drops *::before,.smt-grand:not(#_) .smt-drops *::after{animation:none!important;transition-duration:.01ms!important}}
}
.smt-grand:not(#_) .smt-story {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(420px, .84fr);
width: min(1500px, calc(100% - 48px));
min-height: var(--smt-story-height, 600px);
margin: clamp(54px, 5vw, 86px) auto clamp(62px, 6vw, 96px);
border: 1px solid rgba(255,255,255,.10);
border-radius: 30px;
background:
radial-gradient(circle at 76% 36%, rgba(255,42,173,.10), transparent 34%),
radial-gradient(circle at 58% 78%, rgba(0,217,255,.07), transparent 32%),
linear-gradient(135deg, rgba(11,13,24,.98), rgba(5,6,13,.99));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.07),
0 42px 110px rgba(0,0,0,.46),
0 0 58px rgba(113,56,255,.07);
overflow: visible;
}
.smt-grand:not(#_) .smt-story::before {
content: "";
position: absolute;
inset: -1px;
z-index: -2;
border-radius: inherit;
padding: 1px;
background: linear-gradient(115deg, rgba(0,217,255,.42), rgba(255,255,255,.08) 32%, rgba(255,42,173,.38) 72%, rgba(255,255,255,.06));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .58;
pointer-events: none;
}
.smt-grand:not(#_) .smt-story::after {
content: "";
position: absolute;
left: 7%;
right: 7%;
bottom: -26px;
height: 48px;
z-index: -3;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(255,42,173,.18), rgba(0,217,255,.10) 44%, transparent 72%);
filter: blur(18px);
opacity: .72;
pointer-events: none;
}
.smt-grand:not(#_) .smt-story__media {
position: relative;
min-height: inherit;
overflow: hidden;
border-radius: 29px 0 0 29px;
background: #05060c;
}
.smt-grand:not(#_) .smt-story__image,
.smt-grand:not(#_) .smt-story__placeholder {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
object-position: var(--smt-story-image-position, center);
}
.smt-grand:not(#_) .smt-story__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(90deg, transparent 0 58%, rgba(5,6,13,.20) 74%, rgba(5,6,13,.82) 100%),
linear-gradient(180deg, rgba(0,0,0,.04), transparent 58%, rgba(3,4,10,.36));
pointer-events: none;
}
.smt-grand:not(#_) .smt-story__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: linear-gradient(112deg, transparent 0 66%, rgba(255,255,255,.06) 72%, transparent 79%);
transform: translateX(-24%);
opacity: .55;
pointer-events: none;
animation: smtStorySheen 10s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-story__media-light {
position: absolute;
z-index: 2;
right: -4%;
top: 12%;
width: 34%;
height: 72%;
border-radius: 50%;
background: linear-gradient(180deg, var(--smt-pink), var(--smt-cyan));
filter: blur(84px);
opacity: .12;
animation: smtLightFloat 8s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-story__content {
position: relative;
z-index: 5;
align-self: center;
display: grid;
align-content: center;
justify-items: start;
min-height: calc(var(--smt-story-height, 600px) - 92px);
margin: 46px 46px 46px calc(-1 * var(--smt-story-overlap, 0px));
padding: clamp(40px, 4vw, 64px);
border: 1px solid rgba(255,255,255,.12);
border-radius: 25px;
background:
linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 30%, rgba(6,8,17,.88) 76%),
radial-gradient(circle at 12% 8%, rgba(0,217,255,.08), transparent 34%),
radial-gradient(circle at 90% 88%, rgba(255,42,173,.09), transparent 38%);
-webkit-backdrop-filter: blur(24px) saturate(1.18);
backdrop-filter: blur(24px) saturate(1.18);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 30px 72px rgba(0,0,0,.42),
-22px 0 58px rgba(0,0,0,.20);
}
.smt-grand:not(#_) .smt-story__content h2 {
max-width: 10ch;
margin-bottom: 20px;
font-size: clamp(2.7rem, 4vw, 5.4rem);
line-height: .86;
letter-spacing: -.045em;
text-wrap: balance;
}
.smt-grand:not(#_) .smt-story__text {
max-width: 62ch;
color: rgba(255,255,255,.68);
font-size: clamp(.94rem, 1vw, 1.08rem);
line-height: 1.72;
}
.smt-grand:not(#_) .smt-story__statement {
margin: 24px 0 26px;
padding: 4px 0 4px 17px;
border-left: 2px solid var(--smt-pink);
color: rgba(255,255,255,.86);
font-size: .69rem;
font-weight: 900;
letter-spacing: .16em;
line-height: 1.62;
text-transform: uppercase;
}
@keyframes smtStorySheen {
0%, 64%, 100% { transform: translateX(-28%); opacity: 0; }
72% { opacity: .42; }
86% { transform: translateX(36%); opacity: 0; }
}
.smt-grand:not(#_) .smt-community__grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 22px;
}
.smt-grand:not(#_) .smt-ugc {
overflow: hidden;
border: 1px solid rgba(255,255,255,.09);
border-radius: var(--smt-radius);
background: var(--smt-surface);
}
.smt-grand:not(#_) .smt-ugc__link {
display: block;
}
.smt-grand:not(#_) .smt-ugc__media {
position: relative;
aspect-ratio: .88;
overflow: hidden;
}
.smt-grand:not(#_) .smt-ugc__image,
.smt-grand:not(#_) .smt-ugc__placeholder {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.smt-grand:not(#_) .smt-ugc:hover .smt-ugc__image {
transform: scale(1.045);
filter: saturate(1.08);
}
.smt-grand:not(#_) .smt-ugc__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 56%, rgba(0,0,0,.72));
}
.smt-grand:not(#_) .smt-ugc__phone-dot {
position: absolute;
z-index: 2;
top: 14px;
right: 14px;
width: 9px;
height: 9px;
border: 2px solid rgba(255,255,255,.8);
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
.smt-grand:not(#_) .smt-ugc__caption {
padding: 22px 24px 26px;
}
.smt-grand:not(#_) .smt-ugc__caption p {
margin: 0 0 8px;
color: var(--smt-pink);
font-size: .62rem;
font-weight: 850;
letter-spacing: .16em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-ugc__caption h3 {
margin: 0;
font-size: 1.45rem;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-ugc__caption div {
margin-top: 10px;
color: var(--smt-muted);
line-height: 1.58;
}
.smt-grand:not(#_) .smt-newsletter {
position: relative;
overflow: hidden;
padding: clamp(100px, 12vw, 180px) 0;
border-top: 1px solid rgba(255,255,255,.08);
background: #05050a;
text-align: center;
}
.smt-grand:not(#_) .smt-newsletter__glow {
position: absolute;
left: 50%;
top: 42%;
width: 70vw;
height: 70vw;
border-radius: 50%;
background: conic-gradient(var(--smt-cyan), var(--smt-purple), var(--smt-pink), var(--smt-cyan));
filter: blur(120px);
opacity: .09;
transform: translate(-50%,-50%);
animation: smtAmbientSpin 14s linear infinite;
}
.smt-grand:not(#_) .smt-newsletter__inner {
position: relative;
z-index: 2;
max-width: 980px;
}
.smt-grand:not(#_) .smt-newsletter__form {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
width: min(700px, 100%);
margin: 34px auto 0;
}
.smt-grand:not(#_) .smt-newsletter__form input {
min-width: 0;
min-height: 56px;
padding: 0 20px;
border: 1px solid rgba(255,255,255,.17);
border-radius: 999px;
outline: none;
background: rgba(255,255,255,.04);
color: #fff;
}
.smt-grand:not(#_) .smt-newsletter__form input:focus {
border-color: var(--smt-cyan);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--smt-cyan) 14%, transparent);
}
.smt-grand:not(#_) .smt-newsletter__form input::placeholder {
color: rgba(255,255,255,.42);
}
.smt-grand:not(#_) .smt-newsletter__message {
grid-column: 1/-1;
margin: 8px 0 0;
color: #fff;
}
.smt-grand:not(#_) .smt-newsletter small {
display: block;
margin-top: 16px;
color: rgba(255,255,255,.43);
}
.smt-grand:not(#_) .smt-story__content::before {
content: "";
position: absolute;
top: 0;
right: 28px;
width: 96px;
height: 1px;
background: linear-gradient(90deg, var(--smt-pink), var(--smt-cyan));
box-shadow: 0 0 18px rgba(255,42,173,.34);
}
.smt-grand:not(#_) .smt-story__content::after {
content: "";
position: absolute;
right: -1px;
bottom: 24%;
width: 1px;
height: 88px;
background: linear-gradient(180deg, transparent, var(--smt-cyan), transparent);
opacity: .48;
}
.smt-grand:not(#_) .smt-community__grid {
perspective: 1400px;
}
.smt-grand:not(#_) .smt-ugc {
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-ugc__caption {
position: relative;
z-index: 7;
background: linear-gradient(180deg, rgba(16,16,25,.84), rgba(9,9,15,.96));
}
.smt-grand:not(#_) .smt-newsletter__inner {
padding: clamp(40px,5vw,68px);
border: 1px solid rgba(255,255,255,.09);
border-radius: clamp(20px,2vw,32px);
background: linear-gradient(145deg, rgba(19,18,30,.72), rgba(6,6,11,.82));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 100px rgba(0,0,0,.38), 0 0 70px rgba(138,66,255,.06);
backdrop-filter: blur(20px);
}
.smt-grand:not(#_) .smt-newsletter__inner::before {
content: "";
position: absolute;
left: 10%;
right: 10%;
top: -1px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--smt-cyan), var(--smt-pink), transparent);
}
.smt-grand:not(#_) .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@keyframes smtProgress {
to {
width: 100%;
}
}
@keyframes smtBlink {
50% {
opacity: 0;
}
}
@keyframes smtAmbientSpin {
to {
transform: rotate(360deg);
}
}
@keyframes smtBootNoJs {
0%, 88% {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
100% {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
@keyframes smtFallbackFloat {
from {
transform: translateY(7px) scale(.96);
}
to {
transform: translateY(-9px) scale(1.04);
}
}
@keyframes smtLightFloat {
to {
transform: translate3d(5%,8%,0) scale(1.08);
}
}
@keyframes smtEmblemFloat {
50% {
margin-top: -9px;
}
}
@keyframes smtOrbit {
to {
rotate: 360deg;
}
}
@keyframes smtScroll {
50% {
transform: scaleY(.45);
transform-origin: bottom;
opacity: .35;
}
}
@keyframes smtParticle {
from {
transform: translate3d(0,18vh,0);
}
to {
transform: translate3d(22px,-110vh,0);
}
}
@keyframes smtImageGlitch {
0%,100% {
transform: translate(0) scale(1.055);
}
33% {
transform: translate(-4px,2px) scale(1.06);
filter: hue-rotate(20deg);
}
66% {
transform: translate(4px,-2px) scale(1.06);
filter: hue-rotate(-20deg);
}
}
@keyframes smtRibbonPulse {
50% {
opacity: .95;
transform: scale(1.08);
}
}
@keyframes smtDrip {
to {
transform: translateY(8%) scaleY(1.1);
}
}
@media (max-width: 1180px) {
.smt-grand:not(#_) .smt-hero__layout {
width: min(100% - 34px, 1120px);
}
.smt-grand:not(#_) .smt-hero__terminal {
width: min(360px, 100%);
}
.smt-grand:not(#_) .smt-products {
grid-template-columns: repeat(3,1fr);
}
}
@media (max-width: 900px) {
.smt-grand:not(#_) .smt-shell {
width: min(100% - 30px, 760px);
}
.smt-grand:not(#_) .smt-hero__layout {
width: min(100% - 30px, 760px);
padding-top: 52px;
}
.smt-grand:not(#_) .smt-hero__copy {
width: min(100%, 610px);
max-width: 610px;
text-align: left;
}
.smt-grand:not(#_) .smt-hero__terminal {
width: min(410px, 100%);
}
.smt-grand:not(#_) .smt-hero__heading {
font-size: clamp(3.2rem, 10.8vw, 5.7rem);
}
.smt-grand:not(#_) .smt-hero__stage {
min-height: 0;
}
.smt-grand:not(#_) .smt-hero__person--left {
left: 2%;
width: 42%;
}
.smt-grand:not(#_) .smt-hero__person--right {
right: 0;
width: 40%;
}
.smt-grand:not(#_) .smt-hero__emblem {
left: 55%;
top: 50%;
width: 43%;
}
.smt-grand:not(#_) .smt-hero__background-image {
object-position: center;
}
.smt-grand:not(#_) .smt-hero__wash {
background: linear-gradient(to bottom, rgba(2,3,8,.88) 0%, rgba(2,3,8,.7) 36%, rgba(2,3,8,.08) 61%, rgba(2,3,8,.58) 87%, var(--smt-bg));
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(2) {
border-right: 0;
}
.smt-grand:not(#_) .smt-trust__grid > div:nth-child(-n+2) {
border-bottom: 1px solid rgba(255,255,255,.08);
}
.smt-grand:not(#_) .smt-products {
grid-template-columns: repeat(2,1fr);
}
.smt-grand:not(#_) .smt-story {
grid-template-columns: 1fr;
width: min(100% - 32px, 920px);
min-height: auto;
border-radius: 25px;
}
.smt-grand:not(#_) .smt-story__media {
min-height: 500px;
border-radius: 24px 24px 0 0;
}
.smt-grand:not(#_) .smt-story__media::before {
background: linear-gradient(to bottom, transparent 48%, rgba(5,6,13,.28) 68%, rgba(5,6,13,.94) 100%);
}
.smt-grand:not(#_) .smt-story__content {
min-height: auto;
margin: -78px 28px 28px;
padding: clamp(34px, 6vw, 54px);
}
.smt-grand:not(#_) .smt-community__grid {
grid-template-columns: 1fr 1fr;
}
.smt-grand:not(#_) .smt-community__grid .smt-ugc:last-child:nth-child(odd) {
grid-column: 1/-1;
}
}
@media (max-width: 680px) {
.smt-grand:not(#_) .smt-story {
width: calc(100% - 24px);
margin: 38px auto 58px;
border-radius: 20px;
}
.smt-grand:not(#_) .smt-story__media {
min-height: 390px;
border-radius: 19px 19px 0 0;
}
.smt-grand:not(#_) .smt-story__image,
.smt-grand:not(#_) .smt-story__placeholder {
min-height: 390px;
}
.smt-grand:not(#_) .smt-story__media::after,
.smt-grand:not(#_) .smt-story__media-light {
display: none;
}
.smt-grand:not(#_) .smt-story__content {
margin: -44px 12px 14px;
padding: 30px 24px 28px;
border-radius: 18px;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: linear-gradient(150deg, rgba(19,20,33,.98), rgba(6,7,15,.99));
}
.smt-grand:not(#_) .smt-story__content h2 {
font-size: clamp(2.35rem, 13vw, 3.6rem);
}
.smt-grand:not(#_) .smt-story__text {
font-size: .92rem;
line-height: 1.65;
}
.smt-grand:not(#_) .smt-story__statement {
margin: 20px 0 22px;
font-size: .62rem;
}
.smt-grand:not(#_) .smt-shell {
width: min(100% - 24px, 560px);
}
.smt-grand:not(#_) .smt-button {
min-height: 50px;
padding-inline: 19px;
font-size: .68rem;
}
.smt-grand:not(#_) .smt-boot__inner {
min-height: 86svh;
}
.smt-grand:not(#_) .smt-boot__topline {
max-width: 78%;
line-height: 1.5;
}
.smt-grand:not(#_) .smt-boot__status {
top: 46%;
}
.smt-grand:not(#_) .smt-boot.is-welcome-stage .smt-boot__mark {
top: 24%;
}
.smt-grand:not(#_) .smt-boot__welcome {
top: 50%;
}
.smt-grand:not(#_) .smt-boot__welcome h2 {
font-size: clamp(2rem, 12vw, 3.7rem);
}
.smt-grand:not(#_) .smt-boot__welcome-copy {
font-size: .94rem;
}
.smt-grand:not(#_) .smt-boot__tagline {
font-size: .62rem;
line-height: 1.5;
}
.smt-grand:not(#_) .smt-hero__layout {
padding-top: 34px;
}
.smt-grand:not(#_) .smt-hero__terminal {
margin-bottom: 16px;
padding: 14px 15px 13px;
}
.smt-grand:not(#_) .smt-hero__terminal p {
font-size: .57rem;
}
.smt-grand:not(#_) .smt-hero__terminal strong {
font-size: .66rem;
}
.smt-grand:not(#_) .smt-hero .smt-eyebrow {
font-size: .56rem;
letter-spacing: .15em;
}
.smt-grand:not(#_) .smt-hero__heading {
font-size: clamp(2.75rem, 14vw, 4.6rem);
line-height: .86;
}
.smt-grand:not(#_) .smt-hero__text {
max-width: 94%;
margin-top: 14px;
font-size: .9rem;
}
.smt-grand:not(#_) .smt-hero__tagline {
font-size: .56rem;
letter-spacing: .17em;
}
.smt-grand:not(#_) .smt-hero__actions {
gap: 9px;
margin-top: 18px;
}
.smt-grand:not(#_) .smt-hero__actions .smt-button {
flex: 1 1 150px;
min-height: 46px;
padding-inline: 12px;
font-size: .58rem;
}
.smt-grand:not(#_) .smt-hero__person--left {
left: 3%;
width: 47%;
}
.smt-grand:not(#_) .smt-hero__person--right {
right: 3%;
width: 45%;
}
.smt-grand:not(#_) .smt-hero__emblem {
left: 54%;
top: 48%;
width: 48%;
}
.smt-grand:not(#_) .smt-hero__scroll {
display: none;
}
.smt-grand:not(#_) .smt-products,
.smt-grand:not(#_) .smt-community__grid {
grid-template-columns: 1fr;
}
.smt-grand:not(#_) .smt-section__header--row {
display: block;
}
.smt-grand:not(#_) .smt-section__header--row .smt-text-link {
display: inline-block;
margin-top: 24px;
}
.smt-grand:not(#_) .smt-story__media {
min-height: 430px;
}
.smt-grand:not(#_) .smt-community__grid .smt-ugc:last-child:nth-child(odd) {
grid-column: auto;
}
.smt-grand:not(#_) .smt-newsletter__form {
grid-template-columns: 1fr;
}
.smt-grand:not(#_) .smt-newsletter__form input,
.smt-grand:not(#_) .smt-newsletter__form .smt-button {
width: 100%;
}
}
.smt-grand:not(#_) {
--page-x: 50%;
--page-y: 34%;
--card-rx: 0deg;
--card-ry: 0deg;
--card-lift: 0px;
--card-shine-x: -130%;
}
.smt-grand:not(#_) .smt-grand__page {
position: relative;
isolation: isolate;
overflow: clip;
background: radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--smt-pink) 7%, transparent), transparent 28%),
radial-gradient(circle at 88% 48%, color-mix(in srgb, var(--smt-cyan) 6%, transparent), transparent 31%),
var(--smt-bg);
}
.smt-grand:not(#_) .smt-grand__page > section {
position: relative;
z-index: 2;
}
.smt-grand:not(#_) .smt-pagefx {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
opacity: var(--smt-fx);
pointer-events: none;
transition: opacity .4s ease;
}
.smt-grand:not(#_) .smt-pagefx > span {
position: absolute;
display: block;
pointer-events: none;
}
.smt-grand:not(#_) .smt-pagefx__mesh {
position: absolute;
inset: 0;
opacity: .12;
background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 76px 76px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,.35), #000 18%, #000 82%, transparent);
transform: translate3d(0, var(--scroll-mesh, 0px), 0);
}
.smt-grand:not(#_) .smt-pagefx__scanlines {
position: fixed;
inset: 0;
opacity: .22;
background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(255,255,255,.035) 5px);
mix-blend-mode: soft-light;
}
.smt-grand:not(#_) .smt-pagefx__grain {
position: fixed;
inset: -8%;
opacity: .12;
background-image: radial-gradient(rgba(255,255,255,.32) .5px, transparent .72px);
background-size: 4px 4px;
mix-blend-mode: soft-light;
animation: smtPremiumGrain .9s steps(2,end) infinite;
}
.smt-grand:not(#_) .smt-pagefx__data {
position: absolute;
inset: 0;
opacity: .18;
background: linear-gradient(90deg, transparent 0 12%, rgba(0,217,255,.22) 12.08%, transparent 12.16% 64%, rgba(255,42,173,.18) 64.08%, transparent 64.16%),
repeating-linear-gradient(90deg, transparent 0 130px, rgba(255,255,255,.055) 131px, transparent 132px 244px);
mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
transform: translate3d(0, var(--scroll-data, 0px), 0);
}
.smt-grand:not(#_) .smt-pagefx__aurora {
position: fixed;
width: 52vw;
height: 52vw;
border-radius: 50%;
filter: blur(155px);
opacity: .075;
animation: smtPremiumAurora var(--smt-fx-speed) ease-in-out infinite alternate;
will-change: transform;
}
.smt-grand:not(#_) .smt-pagefx__aurora--cyan {
left: -24vw;
top: 13vh;
background: var(--smt-cyan);
}
.smt-grand:not(#_) .smt-pagefx__aurora--pink {
right: -26vw;
top: 53vh;
background: var(--smt-pink);
animation-delay: -9s;
}
.smt-grand:not(#_) .smt-pagefx__streak {
position: fixed;
width: 58vw;
height: 1px;
opacity: .13;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), var(--streak-color), transparent);
filter: drop-shadow(0 0 10px var(--streak-color));
transform: rotate(-11deg) translateX(-120vw);
animation: smtPremiumStreak var(--smt-fx-speed) cubic-bezier(.22,.8,.28,1) infinite;
}
.smt-grand:not(#_) .smt-pagefx__streak--one {
--streak-color: var(--smt-cyan);
top: 23vh;
left: 8vw;
}
.smt-grand:not(#_) .smt-pagefx__streak--two {
--streak-color: var(--smt-pink);
top: 68vh;
left: 25vw;
animation-delay: -10s;
animation-duration: calc(var(--smt-fx-speed) + 4s);
}
.smt-grand:not(#_) .smt-pagefx__glitch {
position: fixed;
left: 0;
right: 0;
height: 2px;
opacity: 0;
background: linear-gradient(90deg, transparent 6%, var(--glitch-color) 24%, rgba(255,255,255,.7) 47%, var(--glitch-color) 72%, transparent 95%);
mix-blend-mode: screen;
filter: blur(.2px) drop-shadow(0 0 8px var(--glitch-color));
}
.smt-grand:not(#_) .smt-pagefx__glitch--one {
--glitch-color: var(--smt-cyan);
top: 32%;
}
.smt-grand:not(#_) .smt-pagefx__glitch--two {
--glitch-color: var(--smt-pink);
top: 73%;
}
.smt-grand:not(#_) .smt-pagefx__vignette {
position: fixed;
inset: 0;
background: radial-gradient(520px circle at var(--page-x, 50%) var(--page-y, 36%), rgba(255,255,255,.018), transparent 45%), radial-gradient(circle at 50% 45%, transparent 0 26%, rgba(0,0,0,.08) 58%, rgba(0,0,0,.38) 100%);
}
.smt-grand:not(#_).is-glitch-pulse .smt-pagefx__glitch--one {
animation: smtPremiumGlitchBar .22s steps(2,end) 1;
}
.smt-grand:not(#_).is-glitch-pulse .smt-pagefx__glitch--two {
animation: smtPremiumGlitchBar .18s .05s steps(2,end) 1 reverse;
}
.smt-grand:not(#_) .smt-scene {
isolation: isolate;
overflow: hidden;
}
.smt-grand:not(#_) .smt-scene::after {
content: "";
position: absolute;
z-index: -1;
inset: -18% -10%;
pointer-events: none;
opacity: var(--smt-fx);
filter: blur(18px);
}
.smt-grand:not(#_) .smt-scene--worlds::after {
background: radial-gradient(circle at 18% 28%, rgba(0,217,255,.12), transparent 25%), radial-gradient(circle at 78% 45%, rgba(138,66,255,.13), transparent 28%);
}
.smt-grand:not(#_) .smt-scene--drops::after {
background: radial-gradient(circle at 55% 12%, rgba(255,42,173,.10), transparent 26%), linear-gradient(115deg, transparent 42%, rgba(0,217,255,.035), transparent 67%);
}
.smt-grand:not(#_) .smt-scene--story::after {
background: radial-gradient(circle at 42% 42%, rgba(255,42,173,.09), transparent 26%), radial-gradient(circle at 82% 62%, rgba(0,217,255,.055), transparent 22%);
}
.smt-grand:not(#_) .smt-scene--community::after {
background: radial-gradient(circle at 50% 0%, rgba(138,66,255,.10), transparent 32%);
}
.smt-grand:not(#_) .smt-scene--newsletter::after {
background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(0,217,255,.06), transparent 24%, rgba(255,42,173,.08), transparent 58%);
animation: smtAmbientSpin 28s linear infinite;
}
.smt-grand:not(#_) .smt-boot {
background: radial-gradient(circle at 50% 46%, rgba(19,25,41,.96), transparent 25%), radial-gradient(circle at 18% 84%, rgba(0,217,255,.075), transparent 32%), radial-gradient(circle at 84% 18%, rgba(255,42,173,.07), transparent 31%), #020207;
}
.smt-grand:not(#_) .smt-boot::before,
.smt-grand:not(#_) .smt-boot::after {
content: "";
position: absolute;
inset: 24px;
border: 1px solid rgba(255,255,255,.075);
pointer-events: none;
}
.smt-grand:not(#_) .smt-boot::after {
inset: 34px;
border-color: transparent;
background: linear-gradient(90deg, var(--smt-cyan), transparent 18%, transparent 82%, var(--smt-pink)) top/100% 1px no-repeat, linear-gradient(90deg, var(--smt-pink), transparent 18%, transparent 82%, var(--smt-cyan)) bottom/100% 1px no-repeat;
opacity: .36;
}
.smt-grand:not(#_) .smt-boot__status {
padding: clamp(24px, 4vw, 46px);
border: 1px solid rgba(255,255,255,.085);
border-radius: 18px;
background: linear-gradient(145deg, rgba(10,15,27,.76), rgba(3,5,11,.5));
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 34px 100px rgba(0,0,0,.42);
backdrop-filter: blur(24px);
}
.smt-grand:not(#_) .smt-boot__status::before {
content: "STORY SYSTEM // SECURE ENTRY";
display: block;
margin-bottom: 17px;
color: var(--smt-cyan);
font: 800 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .2em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__mark {
width: min(430px, 58vw);
padding: 20px;
border-radius: 26px;
background: radial-gradient(circle, rgba(255,255,255,.045), rgba(255,255,255,.012) 54%, transparent 70%);
}
.smt-grand:not(#_) .smt-boot__wordmark {
display: grid;
justify-items: center;
gap: 2px;
color: #fff;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-boot__wordmark span {
color: rgba(255,255,255,.72);
font-size: clamp(.72rem, .5rem + .5vw, 1.05rem);
font-weight: 850;
letter-spacing: .42em;
}
.smt-grand:not(#_) .smt-boot__wordmark strong {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(3.2rem, 8vw, 7.4rem);
font-style: italic;
line-height: .9;
letter-spacing: -.075em;
text-shadow: 0 0 34px rgba(255,42,173,.24), 0 0 54px rgba(0,217,255,.18);
}
.smt-grand:not(#_) .smt-boot__wordmark small {
margin-top: 12px;
color: var(--smt-cyan);
font-size: .58rem;
font-weight: 900;
letter-spacing: .23em;
}
.smt-grand:not(#_) .smt-boot__progress {
height: 1px;
background: rgba(255,255,255,.09);
}
.smt-grand:not(#_) .smt-hero__layout {
width: min(1680px, calc(100% - 48px));
}
.smt-grand:not(#_) .smt-hero__copy {
width: min(var(--smt-hero-copy-width), 590px);
max-width: 590px;
}
.smt-grand:not(#_) .smt-hero__stage {
inset: 3% 0 3% clamp(430px, 34vw, 600px);
min-height: auto;
perspective: 1800px;
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-hero__stage-halo {
position: absolute;
left: 56%;
top: 49%;
width: 72%;
aspect-ratio: 1.25;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,.09), rgba(0,217,255,.06) 25%, rgba(255,42,173,.045) 42%, transparent 70%);
filter: blur(42px);
transform: translate(-50%,-50%);
opacity: .72;
}
.smt-grand:not(#_) .smt-hero__platform {
left: 56%;
bottom: -1%;
width: 78%;
height: 18%;
opacity: .82;
box-shadow: 0 0 110px rgba(0,217,255,.1), inset 0 0 56px rgba(255,42,173,.08);
}
.smt-grand:not(#_) .smt-hero-card {
position: absolute;
z-index: 3;
margin: 0;
transform-style: preserve-3d;
pointer-events: auto;
}
.smt-grand:not(#_) .smt-hero-card--left {
left: 0;
top: 8%;
width: var(--smt-model-left-width);
height: 83%;
z-index: 3;
}
.smt-grand:not(#_) .smt-hero-card--center {
left: var(--smt-logo-position);
top: var(--smt-logo-top);
width: var(--smt-logo-width);
height: var(--smt-center-card-height);
z-index: 6;
transform: translate(-50%,-50%);
}
.smt-grand:not(#_) .smt-hero-card--right {
right: var(--smt-model-right-position);
top: 11%;
width: var(--smt-model-right-width);
height: 80%;
z-index: 4;
}
.smt-grand:not(#_) .smt-hero-card__float {
width: 100%;
height: 100%;
animation: smtPremiumFloat 7.2s var(--float-delay, 0s) ease-in-out infinite;
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-hero-card__frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: clamp(16px, 1.6vw, 26px);
backdrop-filter: blur(20px) saturate(1.12);
transform: perspective(1500px) rotateZ(var(--card-rotate, 0deg)) rotateX(var(--card-rx, 0deg)) rotateY(var(--card-ry, 0deg)) translate3d(0, var(--card-lift, 0px), 0);
transform-style: preserve-3d;
transition: transform .18s ease-out, border-color .35s ease, box-shadow .35s ease;
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__frame {
border-color: color-mix(in srgb, var(--card-accent) 82%, #fff);
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 44px 120px rgba(0,0,0,.62), 0 0 62px color-mix(in srgb, var(--card-accent) 21%, transparent);
}
.smt-grand:not(#_) .smt-hero-card__frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 11%, transparent), transparent 28%, transparent 67%, color-mix(in srgb, var(--card-accent-2) 10%, transparent));
}
.smt-grand:not(#_) .smt-hero-card__frame::after {
content: "";
position: absolute;
z-index: 4;
inset: -45%;
pointer-events: none;
background: linear-gradient(112deg, transparent 37%, rgba(255,255,255,.18) 49%, transparent 61%);
transform: translateX(var(--card-shine-x, -130%)) rotate(9deg);
transition: transform .3s ease-out;
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__frame::after {
--card-shine-x: 78%;
}
.smt-grand:not(#_) .smt-hero-card__edge {
position: absolute;
inset: 10px;
z-index: 5;
border: 1px solid rgba(255,255,255,.07);
border-radius: calc(clamp(16px, 1.6vw, 26px) - 7px);
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero-card__edge::before,
.smt-grand:not(#_) .smt-hero-card__edge::after {
content: "";
position: absolute;
width: 34%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--card-accent));
box-shadow: 0 0 10px var(--card-accent);
}
.smt-grand:not(#_) .smt-hero-card__edge::before {
top: -1px;
left: 8%;
}
.smt-grand:not(#_) .smt-hero-card__edge::after {
right: 8%;
bottom: -1px;
transform: rotate(180deg);
}
.smt-grand:not(#_) .smt-hero-card__shine {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
background: radial-gradient(380px circle at calc(var(--card-pointer-x, 50%) + 0%) var(--card-pointer-y, 40%), rgba(255,255,255,.13), transparent 55%);
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-hero-card__media {
position: absolute;
inset: 2.5% 2.5% 7%;
z-index: 1;
display: grid;
place-items: end center;
margin: 0;
overflow: hidden;
border-radius: calc(clamp(16px, 1.6vw, 26px) - 5px);
}
.smt-grand:not(#_) .smt-hero-card__media--logo {
place-items: center;
padding: 7%;
}
.smt-grand:not(#_) .smt-hero-card__image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 26px 34px rgba(0,0,0,.56));
transform: translateZ(42px) scale(var(--asset-scale, 1));
transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.smt-grand:not(#_) .smt-hero-card__image--model {
object-position: bottom center;
}
.smt-grand:not(#_) .smt-hero-card__image--logo {
max-width: 112%;
max-height: 92%;
object-position: center;
filter: drop-shadow(0 0 24px rgba(0,217,255,.2)) drop-shadow(0 0 46px rgba(255,42,173,.18));
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__image {
transform: translateZ(62px) scale(calc(var(--asset-scale, 1) + .035));
}
.smt-grand:not(#_) .smt-hero-card__meta {
position: absolute;
z-index: 6;
left: 18px;
right: 18px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.62);
font: 800 clamp(.48rem,.4rem + .16vw,.62rem)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .12em;
text-transform: uppercase;
}
.smt-grand:not(#_) .smt-hero-card__meta b {
color: color-mix(in srgb, var(--card-accent) 78%, #fff);
font-weight: 900;
}
.smt-grand:not(#_) .smt-hero-card__meta--center {
text-align: center;
}
.smt-grand:not(#_) .smt-hero-card__partner-kicker,
.smt-grand:not(#_) .smt-hero-card__partner-copy {
position: absolute;
left: 50%;
z-index: 4;
width: 88%;
margin: 0;
transform: translateX(-50%) translateZ(55px);
text-align: center;
text-transform: uppercase;
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero-card__partner-kicker {
top: 9%;
color: color-mix(in srgb, var(--card-accent) 76%, #fff);
font: 850 clamp(.54rem,.48rem + .16vw,.68rem)/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .2em;
}
.smt-grand:not(#_) .smt-hero-card__partner-copy {
bottom: 11%;
color: rgba(255,255,255,.58);
font: 760 clamp(.5rem,.44rem + .14vw,.64rem)/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
letter-spacing: .15em;
}
.smt-grand:not(#_) .smt-hero-card::after {
content: "";
position: absolute;
left: 10%;
right: 10%;
bottom: -7%;
height: 10%;
z-index: -1;
border-radius: 50%;
background: color-mix(in srgb, var(--card-accent) 23%, transparent);
filter: blur(22px);
opacity: .58;
transform: rotateX(72deg);
}
.smt-grand:not(#_) .smt-product,
.smt-grand:not(#_) .smt-ugc {
--card-rx: 0deg;
--card-ry: 0deg;
--card-lift: 0px;
position: relative;
overflow: hidden;
border-color: rgba(255,255,255,.11);
background: linear-gradient(145deg, rgba(18,19,29,.78), rgba(7,8,14,.94));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.26);
transform: perspective(1200px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(var(--card-lift));
transform-style: preserve-3d;
transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease;
}
.smt-grand:not(#_) .smt-product::before,
.smt-grand:not(#_) .smt-ugc::before {
content: "";
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
background: radial-gradient(360px circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 35%), rgba(255,255,255,.095), transparent 58%);
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-product::after,
.smt-grand:not(#_) .smt-ugc::after {
content: "";
position: absolute;
left: 12%;
right: 12%;
top: 0;
height: 1px;
z-index: 6;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--smt-pink), var(--smt-cyan), transparent);
opacity: .55;
}
.smt-grand:not(#_) .smt-product:hover,
.smt-grand:not(#_) .smt-ugc:hover {
border-color: rgba(255,255,255,.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 34px 90px rgba(0,0,0,.42), 0 0 28px rgba(255,42,173,.065);
}
.smt-grand:not(#_) .smt-story__media {
box-shadow: inset -1px 0 0 rgba(255,255,255,.05);
}
.smt-grand:not(#_) .smt-story__image {
transform: scale(1.01);
transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.smt-grand:not(#_) .smt-story:hover .smt-story__image {
transform: scale(1.028);
filter: saturate(1.04) contrast(1.02);
}
.smt-grand:not(#_) .smt-section::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: min(1320px, calc(100% - 48px));
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255,255,255,.075) 18%, rgba(255,255,255,.075) 82%, transparent);
}
.smt-grand:not(#_) .smt-section__header h2 {
text-shadow: 0 18px 48px rgba(0,0,0,.32);
}
@keyframes smtPremiumFloat {
0%,100% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(0,-10px,0);
}
}
@keyframes smtPremiumAurora {
to {
transform: translate3d(8vw,10vh,0) scale(1.12);
}
}
@keyframes smtPremiumStreak {
0%,72% {
opacity: 0;
transform: rotate(-11deg) translateX(-120vw);
}
75% {
opacity: .16;
}
84% {
opacity: .1;
}
88%,100% {
opacity: 0;
transform: rotate(-11deg) translateX(165vw);
}
}
@keyframes smtPremiumGlitchBar {
0%,100% {
opacity: 0;
transform: translateX(-8%);
}
25% {
opacity: .45;
transform: translateX(3%);
}
55% {
opacity: .22;
transform: translateX(-2%);
}
75% {
opacity: .36;
transform: translateX(7%);
}
}
@keyframes smtPremiumGrain {
0%,100% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(1.2%,-.8%,0);
}
50% {
transform: translate3d(-.8%,1%,0);
}
75% {
transform: translate3d(.5%,.6%,0);
}
}
@media (max-width: 1180px) {
.smt-grand:not(#_) .smt-hero__copy {
width: min(41%, 510px);
}
.smt-grand:not(#_) .smt-hero__stage {
inset: 4% -1% 3% 38%;
}
.smt-grand:not(#_) .smt-hero-card--left {
width: 36%;
left: -1%;
}
.smt-grand:not(#_) .smt-hero-card--center {
width: 45%;
left: 55%;
}
.smt-grand:not(#_) .smt-hero-card--right {
width: 35%;
right: -2%;
}
}
@media (max-width: 900px) {
.smt-grand:not(#_) .smt-trust__grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.smt-grand:not(#_) .smt-trust__item:nth-child(3) {
border-left: 0;
border-top: 1px solid rgba(255,255,255,.075);
}
.smt-grand:not(#_) .smt-trust__item:nth-child(4) {
border-top: 1px solid rgba(255,255,255,.075);
}
.smt-grand:not(#_) .smt-hero {
min-height: 1120px;
}
.smt-grand:not(#_) .smt-hero__layout {
min-height: 1120px;
}
.smt-grand:not(#_) .smt-hero__stage {
inset: auto -4% 1% -4%;
height: 570px;
}
.smt-grand:not(#_) .smt-hero-card--left {
left: 2%;
top: 12%;
width: 36%;
height: 76%;
}
.smt-grand:not(#_) .smt-hero-card--center {
left: 52%;
top: 48%;
width: 47%;
height: 78%;
}
.smt-grand:not(#_) .smt-hero-card--right {
right: 2%;
top: 14%;
width: 35%;
height: 74%;
}
.smt-grand:not(#_) .smt-hero-card__meta {
font-size: .48rem;
}
.smt-grand:not(#_) .smt-pagefx__streak {
display: none;
}
}
@media (max-width: 680px) {
.smt-grand:not(#_) .smt-trust__item {
grid-template-columns: 34px 1fr;
min-height: 82px;
padding: 14px 13px;
gap: 10px;
}
.smt-grand:not(#_) .smt-trust__icon {
width: 32px;
height: 32px;
}
.smt-grand:not(#_) .smt-trust__icon svg {
width: 17px;
height: 17px;
}
.smt-grand:not(#_) .smt-trust__copy strong {
font-size: .53rem;
}
.smt-grand:not(#_) .smt-trust__copy small {
font-size: .58rem;
}
.smt-grand:not(#_) .smt-boot::before {
inset: 12px;
}
.smt-grand:not(#_) .smt-boot::after {
inset: 20px;
}
.smt-grand:not(#_) .smt-boot__status {
padding: 22px 18px;
border-radius: 13px;
}
.smt-grand:not(#_) .smt-hero {
min-height: 1080px;
}
.smt-grand:not(#_) .smt-hero__layout {
min-height: 1080px;
}
.smt-grand:not(#_) .smt-hero__stage {
inset: auto -9% 1% -9%;
height: 440px;
}
.smt-grand:not(#_) .smt-hero-card--left {
left: 3%;
top: 17%;
width: 38%;
height: 69%;
}
.smt-grand:not(#_) .smt-hero-card--center {
left: 52%;
top: 49%;
width: 52%;
height: 76%;
}
.smt-grand:not(#_) .smt-hero-card--right {
right: 3%;
top: 18%;
width: 37%;
height: 67%;
}
.smt-grand:not(#_) .smt-hero-card__meta {
display: none;
}
.smt-grand:not(#_) .smt-hero-card__edge {
inset: 6px;
}
.smt-grand:not(#_) .smt-hero-card__media {
inset: 1.5% 1.5% 2%;
}
.smt-grand:not(#_) .smt-pagefx__mesh {
background-size: 52px 52px;
opacity: .065;
}
.smt-grand:not(#_) .smt-pagefx__aurora {
opacity: .035;
}
}
@media (prefers-reduced-motion: reduce) {
.smt-grand:not(#_) *,
.smt-grand:not(#_) *::before,
.smt-grand:not(#_) *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
.smt-grand:not(#_) .smt-reveal {
opacity: 1;
transform: none;
}
.smt-grand:not(#_) .smt-hero__cursor-light,
.smt-grand:not(#_) .smt-particles,
.smt-grand:not(#_) .smt-pagefx__streak,
.smt-grand:not(#_) .smt-pagefx__glitch {
display: none;
}
.smt-grand:not(#_) .smt-hero-card__float {
animation: none !important;
}
}
.smt-grand:not(#_) .smt-hero-card {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.smt-grand:not(#_) .smt-hero-card__float,
.smt-grand:not(#_) .smt-hero-card__frame {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.smt-grand:not(#_) .smt-hero-card__frame {
border: 1px solid color-mix(in srgb, var(--card-accent) 58%, rgba(255,255,255,.45)) !important;
background: linear-gradient(145deg, rgba(18,20,31,.78), rgba(5,7,13,.9) 62%, rgba(13,15,25,.8)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.04), 0 36px 100px rgba(0,0,0,.55), 0 0 42px color-mix(in srgb, var(--card-accent) 13%, transparent) !important;
}
.smt-grand:not(#_) .smt-hero-card__edge {
display: block !important;
}
.smt-grand:not(#_) .smt-trust__item::before {
content: none !important;
display: none !important;
}
.smt-grand:not(#_) .smt-trust__item {
grid-template-columns: 42px minmax(0,1fr) !important;
gap: 14px !important;
}
@media (min-width: 901px) {
.smt-grand:not(#_) .smt-hero {
min-height: max(var(--smt-hero-height), 84svh);
overflow: clip;
}
.smt-grand:not(#_) .smt-hero__layout {
width: min(1760px, calc(100% - 34px));
min-height: max(var(--smt-hero-height), 84svh);
padding-top: clamp(52px, 6.4vh, 82px);
padding-bottom: 72px;
}
.smt-grand:not(#_) .smt-hero__copy {
width: min(var(--smt-hero-copy-width), 575px);
max-width: 575px;
padding: clamp(18px, 1.7vw, 28px) clamp(16px, 1.5vw, 24px) clamp(20px, 1.8vw, 30px);
border: 1px solid rgba(255,255,255,.055);
border-radius: clamp(18px, 1.4vw, 26px);
background: linear-gradient(145deg, rgba(4,7,14,.66), rgba(3,5,11,.32) 58%, rgba(7,4,13,.24)),
radial-gradient(520px circle at 18% 18%, rgba(0,217,255,.055), transparent 55%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.055),
0 28px 90px rgba(0,0,0,.26);
backdrop-filter: blur(9px) saturate(1.08);
}
.smt-grand:not(#_) .smt-hero__stage {
inset: -2% -4% -3% clamp(410px, 30vw, 555px);
min-height: auto;
perspective: 2300px;
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-hero__stage-halo {
left: 58%;
top: 50%;
width: 88%;
opacity: .9;
filter: blur(54px);
background: radial-gradient(ellipse at 50% 48%, rgba(255,255,255,.12), rgba(0,217,255,.085) 23%, rgba(255,42,173,.065) 43%, transparent 72%);
}
.smt-grand:not(#_) .smt-hero__platform {
left: 58%;
bottom: -1%;
width: 76%;
height: 18%;
opacity: .88;
border-color: rgba(255,255,255,.12);
background: radial-gradient(ellipse, rgba(255,255,255,.14), rgba(0,217,255,.055) 32%, rgba(255,42,173,.035) 51%, transparent 72%);
box-shadow: 0 0 105px rgba(0,217,255,.14),
0 0 145px rgba(255,42,173,.09),
inset 0 0 64px rgba(255,255,255,.035);
}
.smt-grand:not(#_) .smt-hero-card--left {
left: -2.5%;
top: 2.5%;
width: 42%;
height: 94%;
z-index: 4;
}
.smt-grand:not(#_) .smt-hero-card--center {
left: 57%;
top: 48.5%;
width: 49%;
height: 86%;
z-index: 8;
}
.smt-grand:not(#_) .smt-hero-card--right {
right: -3.5%;
top: 5%;
width: 42%;
height: 91%;
z-index: 5;
}
.smt-grand:not(#_) .smt-hero-card__frame {
isolation: isolate;
border: 1px solid color-mix(in srgb, var(--card-accent) 58%, rgba(255,255,255,.52)) !important;
border-radius: clamp(22px, 1.8vw, 34px);
background: linear-gradient(148deg, rgba(28,34,50,.54), rgba(6,9,17,.72) 44%, rgba(10,7,18,.67) 74%, rgba(22,10,28,.48)),
linear-gradient(105deg, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 36%, color-mix(in srgb, var(--card-accent-2) 6%, transparent));
box-shadow: inset 0 1px 0 rgba(255,255,255,.24),
inset 1px 0 0 rgba(255,255,255,.065),
inset 0 -1px 0 rgba(255,255,255,.045),
0 52px 145px rgba(0,0,0,.64),
0 0 0 1px rgba(255,255,255,.025),
0 0 58px color-mix(in srgb, var(--card-accent) 18%, transparent) !important;
backdrop-filter: blur(34px) saturate(1.34) contrast(1.04);
-webkit-backdrop-filter: blur(34px) saturate(1.34) contrast(1.04);
}
.smt-grand:not(#_) .smt-hero-card__frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(128deg, rgba(255,255,255,.15), transparent 17%, transparent 64%, rgba(255,255,255,.035)),
radial-gradient(520px circle at 20% 10%, color-mix(in srgb, var(--card-accent) 11%, transparent), transparent 58%),
radial-gradient(480px circle at 88% 92%, color-mix(in srgb, var(--card-accent-2) 8%, transparent), transparent 58%);
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-hero-card__frame::after {
content: "";
position: absolute;
z-index: 7;
inset: -54%;
pointer-events: none;
background: linear-gradient(111deg, transparent 40%, rgba(255,255,255,.22) 49%, rgba(255,255,255,.06) 52%, transparent 61%);
transform: translateX(var(--card-shine-x, -132%)) rotate(8deg);
transition: transform .7s cubic-bezier(.2,.8,.2,1);
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__frame {
border-color: color-mix(in srgb, var(--card-accent) 78%, #fff) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
inset 1px 0 0 rgba(255,255,255,.075),
0 62px 170px rgba(0,0,0,.69),
0 0 76px color-mix(in srgb, var(--card-accent) 25%, transparent) !important;
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__frame::after {
--card-shine-x: 82%;
}
.smt-grand:not(#_) .smt-hero-card__edge {
inset: 11px;
z-index: 8;
border: 1px solid rgba(255,255,255,.095);
border-radius: calc(clamp(22px, 1.8vw, 34px) - 8px);
box-shadow: inset 0 0 26px rgba(255,255,255,.018),
0 0 18px color-mix(in srgb, var(--card-accent) 5%, transparent);
}
.smt-grand:not(#_) .smt-hero-card__edge::before,
.smt-grand:not(#_) .smt-hero-card__edge::after {
width: 42%;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 82%, #fff), transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--card-accent) 68%, transparent);
}
.smt-grand:not(#_) .smt-hero-card__media {
inset: 1.5% 1.5% 6.5%;
border-radius: calc(clamp(22px, 1.8vw, 34px) - 7px);
}
.smt-grand:not(#_) .smt-hero-card__media::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background: radial-gradient(420px circle at 50% 35%, rgba(255,255,255,.07), transparent 58%),
linear-gradient(to bottom, rgba(255,255,255,.025), transparent 33%, rgba(0,0,0,.14));
pointer-events: none;
}
.smt-grand:not(#_) .smt-hero-card__media--model {
inset: -5% -10% 4%;
place-items: end center;
}
.smt-grand:not(#_) .smt-hero-card__image {
position: relative;
z-index: 2;
filter: drop-shadow(0 34px 48px rgba(0,0,0,.62));
}
.smt-grand:not(#_) .smt-hero-card--left .smt-hero-card__image--model {
width: 116%;
height: 116%;
max-width: none;
transform: translate3d(0, 3.5%, 72px) scale(calc(var(--asset-scale, 1) + .16));
object-position: bottom center;
}
.smt-grand:not(#_) .smt-hero-card--right .smt-hero-card__image--model {
width: 118%;
height: 118%;
max-width: none;
transform: translate3d(0, 2.5%, 78px) scale(calc(var(--asset-scale, 1) + .18));
object-position: bottom center;
}
.smt-grand:not(#_) .smt-hero-card--center .smt-hero-card__media--logo {
inset: 2.2% 2.2% 6.5%;
padding: 8.5% 8% 9%;
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 63%);
}
.smt-grand:not(#_) .smt-hero-card--center .smt-hero-card__image--logo {
width: 100%;
height: 100%;
max-width: 116%;
max-height: 84%;
transform: translateZ(82px) scale(calc(var(--asset-scale, 1) + .08));
filter: drop-shadow(0 18px 34px rgba(0,0,0,.42))
drop-shadow(0 0 26px rgba(255,42,173,.13));
}
.smt-grand:not(#_) .smt-hero-card:hover .smt-hero-card__image--model {
transform: translate3d(0, 1.5%, 94px) scale(calc(var(--asset-scale, 1) + .205));
}
.smt-grand:not(#_) .smt-hero-card--center:hover .smt-hero-card__image--logo {
transform: translateZ(102px) scale(calc(var(--asset-scale, 1) + .115));
}
.smt-grand:not(#_) .smt-hero-card__partner-kicker {
top: 7.5%;
font-size: clamp(.62rem, .48rem + .24vw, .82rem);
letter-spacing: .23em;
text-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 34%, transparent);
}
.smt-grand:not(#_) .smt-hero-card__partner-copy {
bottom: 10.5%;
width: 82%;
color: rgba(255,255,255,.68);
font-size: clamp(.56rem, .46rem + .17vw, .72rem);
letter-spacing: .17em;
}
.smt-grand:not(#_) .smt-hero-card__meta {
left: 22px;
right: 22px;
bottom: 16px;
z-index: 10;
padding-top: 12px;
border-top-color: rgba(255,255,255,.15);
font-size: clamp(.5rem, .42rem + .17vw, .66rem);
color: rgba(255,255,255,.66);
}
.smt-grand:not(#_) .smt-hero-card::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: -5%;
height: 13%;
z-index: -2;
border-radius: 50%;
background: color-mix(in srgb, var(--card-accent) 18%, transparent);
filter: blur(30px);
opacity: .72;
transform: rotateX(72deg);
}
.smt-grand:not(#_) .smt-hero-card::after {
left: 6%;
right: 6%;
bottom: -8%;
height: 14%;
filter: blur(28px);
opacity: .66;
}
.smt-grand:not(#_) .smt-hero-card--left .smt-hero-card__float {
animation-duration: 8.8s;
}
.smt-grand:not(#_) .smt-hero-card--center .smt-hero-card__float {
animation-duration: 7.6s;
}
.smt-grand:not(#_) .smt-hero-card--right .smt-hero-card__float {
animation-duration: 9.4s;
}
.smt-grand:not(#_) .smt-hero-card--left .smt-hero-card__frame {
--card-rotate: -4.2deg;
}
.smt-grand:not(#_) .smt-hero-card--center .smt-hero-card__frame {
--card-rotate: -.35deg;
}
.smt-grand:not(#_) .smt-hero-card--right .smt-hero-card__frame {
--card-rotate: 4deg;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
.smt-grand:not(#_) .smt-hero__copy {
width: min(40%, 500px);
padding: 17px 16px 22px;
}
.smt-grand:not(#_) .smt-hero__stage {
inset: 1% -6% 0 37%;
}
.smt-grand:not(#_) .smt-hero-card--left {
width: 40%;
left: -2%;
height: 89%;
top: 5%;
}
.smt-grand:not(#_) .smt-hero-card--center {
width: 47%;
left: 56%;
height: 82%;
}
.smt-grand:not(#_) .smt-hero-card--right {
width: 40%;
right: -3%;
height: 87%;
top: 7%;
}
}
.smt-grand:not(#_) .smt-product,
.smt-grand:not(#_) .smt-ugc,
.smt-grand:not(#_) .smt-newsletter__inner {
backdrop-filter: blur(22px) saturate(1.18);
-webkit-backdrop-filter: blur(22px) saturate(1.18);
}
.smt-grand:not(#_) .smt-product,
.smt-grand:not(#_) .smt-ugc {
box-shadow: inset 0 1px 0 rgba(255,255,255,.085),
0 28px 82px rgba(0,0,0,.34),
0 0 0 1px rgba(255,255,255,.018);
}
.smt-grand:not(#_) .smt-worlds {
--worlds-stage-height: clamp(980px, 67vw, 1180px);
--worlds-card-radius: clamp(24px, 1.65vw, 34px);
--worlds-frame-thickness: clamp(12px, .92vw, 18px);
--worlds-frame-depth: clamp(28px, 1.95vw, 40px);
position: relative;
isolation: isolate;
min-height: var(--worlds-stage-height);
padding: clamp(72px, 5.4vw, 102px) 0 clamp(118px, 8vw, 158px);
overflow: hidden;
scroll-margin-top: 108px;
background:
radial-gradient(ellipse 68% 31% at 50% 86%, rgba(136,65,255,.48), transparent 69%),
radial-gradient(circle at -4% 52%, rgba(0,205,255,.27), transparent 35%),
radial-gradient(circle at 104% 50%, rgba(255,32,178,.27), transparent 36%),
linear-gradient(180deg, #01020a 0%, #050617 44%, #02020b 100%);
}
.smt-grand:not(#_) .smt-worlds::before,
.smt-grand:not(#_) .smt-worlds::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.smt-grand:not(#_) .smt-worlds::before {
z-index: 1;
opacity: .9;
background-image:
radial-gradient(circle at 5% 16%, rgba(0,217,255,.95) 0 1px, transparent 1.8px),
radial-gradient(circle at 17% 31%, rgba(255,42,173,.92) 0 1px, transparent 1.8px),
radial-gradient(circle at 31% 10%, rgba(169,112,255,.9) 0 1px, transparent 1.7px),
radial-gradient(circle at 66% 19%, rgba(0,217,255,.86) 0 1px, transparent 1.7px),
radial-gradient(circle at 84% 14%, rgba(255,42,173,.95) 0 1px, transparent 1.8px),
radial-gradient(circle at 95% 30%, rgba(169,112,255,.9) 0 1px, transparent 1.8px);
background-size: 330px 250px, 420px 320px, 490px 370px, 450px 330px, 370px 280px, 560px 390px;
animation: smtWorldsStars 18s linear infinite alternate;
}
.smt-grand:not(#_) .smt-worlds::after {
z-index: 18;
opacity: .18;
background:
repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.018) 5px, transparent 6px),
linear-gradient(180deg, rgba(0,0,0,.28), transparent 17%, transparent 80%, rgba(0,0,0,.68));
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-worlds__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.smt-grand:not(#_) .smt-worlds__backdrop-picture,
.smt-grand:not(#_) .smt-worlds__backdrop-picture::after {
position: absolute;
inset: 0;
}
.smt-grand:not(#_) .smt-worlds__backdrop-picture {
display: block;
opacity: calc(var(--smt-worlds-bg-opacity, .5) * .82);
transform: scale(1.12) translate3d(var(--worlds-bg-x, 0px), var(--worlds-bg-y, 0px), 0);
filter: blur(1.5px) saturate(1.24) contrast(1.12) brightness(.33);
animation: smtWorldsBackdrop 20s ease-in-out infinite alternate;
will-change: transform, filter;
}
.smt-grand:not(#_) .smt-worlds__backdrop-picture::after {
content: '';
background:
linear-gradient(180deg, rgba(1,2,10,.86), rgba(3,4,15,.30) 30%, rgba(2,2,10,.66) 77%, #02020a),
radial-gradient(ellipse at 50% 42%, transparent 18%, rgba(0,0,0,.68) 80%);
}
.smt-grand:not(#_) .smt-worlds__backdrop-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--smt-worlds-bg-position, center);
}
.smt-grand:not(#_) .smt-worlds__backdrop-wash {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 27%, rgba(137,68,255,.14), transparent 44%),
radial-gradient(circle at 7% 55%, rgba(0,217,255,.24), transparent 35%),
radial-gradient(circle at 93% 52%, rgba(255,42,173,.24), transparent 35%),
linear-gradient(90deg, rgba(0,217,255,.07), transparent 27% 73%, rgba(255,42,173,.075));
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-worlds__nebula {
position: absolute;
top: 0;
width: min(58vw, 1020px);
aspect-ratio: 1;
border-radius: 50%;
filter: blur(88px);
opacity: .4;
mix-blend-mode: screen;
animation: smtWorldsNebula 14s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-worlds__nebula--cyan {
left: -31%;
background: radial-gradient(circle, rgba(0,217,255,.9), rgba(22,74,255,.30) 38%, transparent 69%);
}
.smt-grand:not(#_) .smt-worlds__nebula--pink {
right: -31%;
background: radial-gradient(circle, rgba(255,42,173,.9), rgba(126,44,255,.32) 40%, transparent 70%);
animation-delay: -7s;
}
.smt-grand:not(#_) .smt-worlds__smoke {
position: absolute;
top: 12%;
width: 49%;
height: 62%;
opacity: .56;
filter: blur(26px);
background:
radial-gradient(ellipse at 44% 43%, rgba(120,76,255,.54), transparent 54%),
radial-gradient(ellipse at 61% 59%, rgba(255,255,255,.12), transparent 48%),
radial-gradient(ellipse at 42% 77%, rgba(0,217,255,.19), transparent 52%);
mix-blend-mode: screen;
animation: smtWorldsSmoke 15s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-worlds__smoke--left { left: -11%; transform: rotate(-8deg); }
.smt-grand:not(#_) .smt-worlds__smoke--right { right: -11%; transform: rotate(8deg); animation-delay: -7.5s; }
.smt-grand:not(#_) .smt-worlds__beam {
position: absolute;
top: -15%;
width: 34%;
height: 80%;
opacity: .22;
filter: blur(14px);
mix-blend-mode: screen;
animation: smtWorldsBeam 10s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-worlds__beam--left {
left: 2%;
transform: rotate(14deg);
background: linear-gradient(90deg, transparent, rgba(0,217,255,.34), transparent);
}
.smt-grand:not(#_) .smt-worlds__beam--right {
right: 2%;
transform: rotate(-14deg);
background: linear-gradient(90deg, transparent, rgba(255,42,173,.34), transparent);
animation-delay: -5s;
}
.smt-grand:not(#_) .smt-worlds__horizon {
position: absolute;
left: 50%;
bottom: 17.5%;
width: min(96%, 1840px);
height: 3px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(0,217,255,.8), #fff 44% 56%, rgba(255,42,173,.8), transparent);
box-shadow: 0 0 22px rgba(0,217,255,.48), 0 0 46px rgba(255,42,173,.38);
opacity: .9;
}
.smt-grand:not(#_) .smt-worlds__floor {
position: absolute;
left: 50%;
bottom: -24%;
width: 158%;
height: 62%;
transform: translateX(-50%) perspective(920px) rotateX(65deg) translateY(var(--worlds-floor-y, 0px));
transform-origin: 50% 0;
opacity: .64;
background:
radial-gradient(ellipse at 50% 0%, rgba(130,58,255,.7), transparent 48%),
repeating-linear-gradient(90deg, rgba(0,217,255,.20) 0 1px, transparent 1px 96px),
repeating-linear-gradient(0deg, rgba(255,42,173,.18) 0 1px, transparent 1px 62px);
mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.82) 45%, transparent 93%);
}
.smt-grand:not(#_) .smt-worlds__floor-reflection {
position: absolute;
left: 7%;
right: 7%;
bottom: 1.5%;
height: 34%;
opacity: .52;
filter: blur(18px);
background:
radial-gradient(ellipse at 18% 0%, rgba(0,217,255,.32), transparent 35%),
radial-gradient(ellipse at 50% 0%, rgba(145,66,255,.48), transparent 39%),
radial-gradient(ellipse at 82% 0%, rgba(255,42,173,.32), transparent 35%);
transform: scaleY(.54);
transform-origin: top;
}
.smt-grand:not(#_) .smt-worlds__gridfx {
position: absolute;
inset: 0;
opacity: .42;
background:
linear-gradient(90deg, transparent 0 4%, rgba(0,217,255,.28) 4.1% 4.16%, transparent 4.2% 95.8%, rgba(255,42,173,.28) 95.84% 95.9%, transparent 96%),
linear-gradient(180deg, transparent 0 11%, rgba(255,255,255,.055) 11.1% 11.2%, transparent 11.3% 88%, rgba(255,255,255,.055) 88.1% 88.2%, transparent 88.3%);
}
.smt-grand:not(#_) .smt-worlds__scanburst {
position: absolute;
inset: 0;
opacity: .18;
background: linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,.38) 49%, rgba(0,217,255,.22) 50%, transparent 56%);
transform: translateY(-120%);
animation: smtWorldsScanburst 8.4s linear infinite;
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-worlds__glitchfield {
position: absolute;
inset: 0;
opacity: .14;
background:
linear-gradient(90deg, transparent 0 8%, rgba(0,217,255,.42) 8.2% 8.35%, transparent 8.5% 74%, rgba(255,42,173,.42) 74.2% 74.35%, transparent 74.5%),
repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.04) 39px, transparent 40px);
animation: smtWorldsGlitchfield 9.6s steps(1) infinite;
mix-blend-mode: screen;
}
.smt-grand:not(#_) .smt-worlds__spark {
position: absolute;
width: 250px;
height: 1px;
opacity: .86;
background: linear-gradient(90deg, transparent, currentColor, #fff, currentColor, transparent);
box-shadow: 0 0 16px currentColor;
animation: smtWorldsSpark 7s linear infinite;
}
.smt-grand:not(#_) .smt-worlds__spark--one { left: 3%; top: 9%; color: var(--smt-pink); }
.smt-grand:not(#_) .smt-worlds__spark--two { right: 3%; top: 13%; color: var(--smt-cyan); animation-delay: -3.5s; }
.smt-grand:not(#_) .smt-worlds__data {
position: absolute;
width: 104px;
height: 32px;
opacity: .62;
background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 8px);
mask-image: linear-gradient(90deg, transparent, #000, transparent);
animation: smtWorldsData 5.8s steps(7) infinite;
}
.smt-grand:not(#_) .smt-worlds__data--one { left: 6%; top: 30%; color: var(--smt-cyan); }
.smt-grand:not(#_) .smt-worlds__data--two { right: 6%; top: 33%; color: var(--smt-pink); animation-delay: -2.9s; }
.smt-grand:not(#_) .smt-worlds__shell {
position: relative;
z-index: 5;
width: min(1840px, calc(100% - 28px));
}
.smt-grand:not(#_) .smt-worlds__header {
position: relative;
z-index: 12;
width: min(1320px, 94%);
margin: 0 auto clamp(42px, 3.1vw, 58px);
text-align: center;
}
.smt-grand:not(#_) .smt-worlds__header::before,
.smt-grand:not(#_) .smt-worlds__header::after {
content: '';
position: absolute;
top: 48%;
width: min(24vw, 390px);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,42,173,.95), rgba(0,217,255,.95));
box-shadow: 0 0 14px rgba(255,42,173,.46);
}
.smt-grand:not(#_) .smt-worlds__header::before { right: calc(100% + 20px); }
.smt-grand:not(#_) .smt-worlds__header::after { left: calc(100% + 20px); transform: scaleX(-1); }
.smt-grand:not(#_) .smt-worlds__header-line {
display: block;
width: min(680px, 76%);
height: 1px;
margin: 0 auto 14px;
background: linear-gradient(90deg, transparent, var(--smt-pink), #fff, var(--smt-cyan), transparent);
box-shadow: 0 0 18px rgba(255,42,173,.44);
}
.smt-grand:not(#_) .smt-worlds__eyebrow {
margin-bottom: 10px;
color: #ff94de;
font-size: clamp(.68rem, .54rem + .28vw, .94rem);
font-weight: 800;
letter-spacing: .42em;
text-shadow: 0 0 22px rgba(255,42,173,.72), 0 2px 16px rgba(0,0,0,.92);
}
.smt-grand:not(#_) .smt-worlds__heading {
position: relative;
margin: 0;
color: transparent;
font-family: 'Bodoni MT', 'Didot', 'Times New Roman', Georgia, serif;
font-size: clamp(4.85rem, 6.25vw, 7.8rem);
font-style: italic;
font-weight: 900;
line-height: .82;
letter-spacing: -.046em;
text-transform: uppercase;
background: linear-gradient(96deg, #fff 3%, #f4efff 22%, #ff64c8 49%, #c1a4ff 70%, #80e5ff 97%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: .35px rgba(255,255,255,.22);
filter: drop-shadow(0 3px 0 rgba(0,0,0,.36)) drop-shadow(0 0 18px rgba(255,255,255,.20)) drop-shadow(0 0 38px rgba(255,42,173,.26));
animation: smtWorldsHeadingGlow 6.2s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-worlds__heading::before,
.smt-grand:not(#_) .smt-worlds__heading::after {
content: attr(data-text);
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
white-space: pre-line;
}
.smt-grand:not(#_) .smt-worlds__heading::before { color: var(--smt-cyan); transform: translateX(-3px); }
.smt-grand:not(#_) .smt-worlds__heading::after { color: var(--smt-pink); transform: translateX(3px); }
.smt-grand:not(#_) .smt-worlds.is-signal-hit .smt-worlds__heading::before,
.smt-grand:not(#_) .smt-worlds.is-signal-hit .smt-worlds__heading::after { animation: smtHeadingSignal .24s steps(1) 1; }
.smt-grand:not(#_) .smt-worlds__intro {
max-width: 920px;
margin: 20px auto 0;
color: rgba(250,250,255,.96);
font-size: clamp(1.02rem, .90rem + .28vw, 1.24rem);
font-weight: 620;
letter-spacing: .012em;
text-shadow: 0 2px 22px rgba(0,0,0,.96), 0 0 14px rgba(0,0,0,.8);
}
.smt-grand:not(#_) .smt-worlds__intro p { margin: 0; }
.smt-grand:not(#_) .smt-worlds__grid {
position: relative;
z-index: 8;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1.09fr) minmax(0,1fr);
align-items: center;
gap: clamp(14px, 1.45vw, 27px);
width: min(1740px, 98%);
margin: 0 auto;
padding: 26px 0 clamp(108px, 7.4vw, 142px);
perspective: 1500px;
perspective-origin: 50% 43%;
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-worlds__grid::before,
.smt-grand:not(#_) .smt-worlds__grid::after {
display: none;
content: none;
}
.smt-grand:not(#_) .smt-portal {
--base-x: 0px;
--base-y: 0px;
--base-z: 0px;
--base-rx: 0deg;
--base-ry: 0deg;
--base-rz: 0deg;
--base-scale: 1;
position: relative;
z-index: 4;
min-width: 0;
aspect-ratio: .80;
border-radius: var(--worlds-card-radius);
transform-style: preserve-3d;
transform:
translate3d(calc(var(--base-x) + var(--world-card-x, 0px)), calc(var(--base-y) + var(--card-lift, 0px) + var(--world-card-y, 0px)), var(--base-z))
rotateX(calc(var(--base-rx) + var(--card-rx, 0deg)))
rotateY(calc(var(--base-ry) + var(--card-ry, 0deg)))
rotateZ(var(--base-rz))
scale(var(--base-scale))
scale(var(--portal-hover-scale, 1));
transform-origin: 50% 86%;
transition: transform .72s cubic-bezier(.16,1,.3,1), filter .5s ease, z-index 0s .18s;
will-change: transform;
}
.smt-grand:not(#_) .smt-portal--slot-1 {
--base-x: 24px;
--base-y: 30px;
--base-z: -46px;
--base-rx: .55deg;
--base-ry: 8.5deg;
--base-rz: -1deg;
--base-scale: .985;
--card-parallax: .042;
z-index: 5;
}
.smt-grand:not(#_) .smt-portal--slot-2 {
--base-y: -32px;
--base-z: 118px;
--base-rx: -.38deg;
--base-scale: 1.075;
--card-parallax: .012;
z-index: 12;
}
.smt-grand:not(#_) .smt-portal--slot-3 {
--base-x: -24px;
--base-y: 30px;
--base-z: -46px;
--base-rx: .55deg;
--base-ry: -8.5deg;
--base-rz: 1deg;
--base-scale: .985;
--card-parallax: -.042;
z-index: 5;
}
.smt-grand:not(#_) .smt-portal:hover,
.smt-grand:not(#_) .smt-portal:focus-within,
.smt-grand:not(#_) .smt-portal.is-portal-active {
--portal-hover-scale: 1.032;
--card-lift: -17px;
z-index: 30;
filter: saturate(1.18) brightness(1.085);
transition-delay: 0s;
}
.smt-grand:not(#_) .smt-portal--slot-2:hover,
.smt-grand:not(#_) .smt-portal--slot-2:focus-within,
.smt-grand:not(#_) .smt-portal--slot-2.is-portal-active {
--portal-hover-scale: 1.022;
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__face,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__face,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__face {
border-color: color-mix(in srgb, var(--portal-accent) 74%, white 36%);
box-shadow:
0 76px 150px rgba(0,0,0,.82),
0 30px 66px rgba(0,0,0,.72),
0 0 0 1px rgba(255,255,255,.20),
0 0 76px color-mix(in srgb, var(--portal-accent) 68%, transparent),
0 0 142px color-mix(in srgb, var(--portal-accent-2) 36%, transparent),
inset 0 2px 0 rgba(255,255,255,.50),
inset 0 -2px 0 rgba(0,0,0,.74),
inset 26px 0 58px rgba(255,255,255,.045),
inset -26px 0 58px rgba(0,0,0,.36);
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__backplate,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__backplate,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__backplate {
transform: translate3d(0, 31px, calc(var(--smt-worlds-depth-back) - 23px));
box-shadow:
0 78px 142px rgba(0,0,0,.86),
0 0 108px color-mix(in srgb, var(--portal-accent) 48%, transparent),
inset 0 1px 0 rgba(255,255,255,.22);
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__extrude,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__extrude,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__extrude {
filter: saturate(1.38) contrast(1.18) brightness(1.13);
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__shine,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__shine,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__shine {
opacity: .82;
animation-duration: 2.25s;
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__edge-runner,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__edge-runner,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__edge-runner {
opacity: 1;
filter: drop-shadow(0 0 22px var(--portal-accent));
animation-duration: 2.8s;
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__ground-glow,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__ground-glow,
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__ground-glow {
opacity: 1;
transform: scaleX(1.11) scaleY(1.08);
}
.smt-grand:not(#_) .smt-portal__link {
position: absolute;
inset: 0;
display: block;
overflow: visible;
border-radius: inherit;
color: #fff;
transform-style: preserve-3d;
animation: smtPortalFloat 6.4s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-portal__link::before,
.smt-grand:not(#_) .smt-portal__link::after {
content: '';
position: absolute;
pointer-events: none;
border-radius: inherit;
}
.smt-grand:not(#_) .smt-portal__link::before {
inset: -15px;
z-index: -6;
border: 1px solid color-mix(in srgb, var(--portal-accent) 52%, transparent);
background:
linear-gradient(145deg, rgba(255,255,255,.075), rgba(13,12,34,.34) 34%, rgba(0,0,0,.62)),
color-mix(in srgb, var(--portal-accent) 7%, transparent);
box-shadow:
0 0 0 1px rgba(255,255,255,.045),
0 0 42px color-mix(in srgb, var(--portal-accent) 34%, transparent),
0 28px 70px rgba(0,0,0,.58);
transform: translateZ(-30px);
opacity: .88;
}
.smt-grand:not(#_) .smt-portal__link::after {
inset: 8px;
z-index: 16;
border: 1px solid rgba(255,255,255,.16);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.76), inset 0 0 24px rgba(255,255,255,.035);
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__link { animation-duration: 6.8s; animation-delay: -1.4s; }
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__link { animation-duration: 5.9s; animation-delay: -2.8s; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__link { animation-duration: 7.1s; animation-delay: -4.1s; }
.smt-grand:not(#_) .smt-portal__backplate {
position: absolute;
inset: 3px;
z-index: -5;
border-radius: inherit;
transform: translate3d(0, 24px, calc(var(--smt-worlds-depth-back) - 18px));
background:
linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.035) 25%, rgba(7,8,24,.92) 64%, #000),
rgba(3,5,16,.98);
border: 1px solid color-mix(in srgb, var(--portal-accent) 82%, white 20%);
box-shadow:
0 64px 118px rgba(0,0,0,.82),
0 0 88px color-mix(in srgb, var(--portal-accent) 34%, transparent),
inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .72s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .4s ease;
}
.smt-grand:not(#_) .smt-portal__extrude {
position: absolute;
z-index: -3;
pointer-events: none;
opacity: .96;
filter: saturate(1.2) contrast(1.1);
}
.smt-grand:not(#_) .smt-portal__extrude--left {
left: calc(var(--smt-worlds-depth-side-offset) - 8px);
top: 16px;
bottom: 26px;
width: calc(var(--smt-worlds-depth-side-width) + 17px);
clip-path: polygon(100% 0, 100% 100%, 13% 94%, 0 8%);
background:
linear-gradient(90deg, rgba(0,0,0,.99), color-mix(in srgb, var(--portal-accent) 52%, #060918), rgba(255,255,255,.34));
box-shadow:
-16px 0 40px rgba(0,0,0,.76),
0 0 34px color-mix(in srgb, var(--portal-accent) 48%, transparent),
inset -1px 0 rgba(255,255,255,.18);
}
.smt-grand:not(#_) .smt-portal__extrude--right {
right: calc(var(--smt-worlds-depth-side-offset) - 8px);
top: 16px;
bottom: 26px;
width: calc(var(--smt-worlds-depth-side-width) + 17px);
clip-path: polygon(0 0, 87% 8%, 100% 94%, 0 100%);
background:
linear-gradient(90deg, rgba(255,255,255,.34), color-mix(in srgb, var(--portal-accent-2) 52%, #060918), rgba(0,0,0,.99));
box-shadow:
16px 0 40px rgba(0,0,0,.76),
0 0 34px color-mix(in srgb, var(--portal-accent-2) 48%, transparent),
inset 1px 0 rgba(255,255,255,.18);
}
.smt-grand:not(#_) .smt-portal__extrude--bottom {
left: 17px;
right: 17px;
bottom: calc(var(--smt-worlds-depth-bottom-offset) - 10px);
height: calc(var(--smt-worlds-depth-bottom-height) + 18px);
clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
background:
linear-gradient(180deg, rgba(255,255,255,.36), color-mix(in srgb, var(--portal-accent) 42%, #070817), rgba(0,0,0,.98));
box-shadow:
0 21px 46px rgba(0,0,0,.78),
0 0 34px color-mix(in srgb, var(--portal-accent) 42%, transparent),
inset 0 1px rgba(255,255,255,.22);
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__extrude--left { opacity: .52; }
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__extrude--right { opacity: 1; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__extrude--right { opacity: .52; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__extrude--left { opacity: 1; }
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__extrude--left,
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__extrude--right { opacity: .72; }
.smt-grand:not(#_) .smt-portal__face {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--portal-accent) 82%, white 24%);
border-radius: inherit;
background:
linear-gradient(142deg, rgba(255,255,255,.23), rgba(255,255,255,.045) 24%, rgba(8,10,26,.28) 62%, rgba(0,0,0,.66)),
rgba(3,5,16,.48);
box-shadow:
0 64px 126px rgba(0,0,0,.78),
0 24px 52px rgba(0,0,0,.68),
0 0 0 1px rgba(255,255,255,.13),
0 0 58px color-mix(in srgb, var(--portal-accent) 54%, transparent),
0 0 112px color-mix(in srgb, var(--portal-accent-2) 28%, transparent),
inset 0 2px 0 rgba(255,255,255,.42),
inset 0 -2px 0 rgba(0,0,0,.72),
inset 26px 0 58px rgba(255,255,255,.035),
inset -26px 0 58px rgba(0,0,0,.40);
backdrop-filter: blur(28px) saturate(1.62);
-webkit-backdrop-filter: blur(28px) saturate(1.62);
transform: translateZ(44px);
transition: box-shadow .55s ease, border-color .4s ease, filter .4s ease;
}
.smt-grand:not(#_) .smt-portal__face::before,
.smt-grand:not(#_) .smt-portal__face::after {
content: '';
position: absolute;
inset: 0;
z-index: 20;
border-radius: inherit;
pointer-events: none;
}
.smt-grand:not(#_) .smt-portal__face::before {
padding: 2px;
background: conic-gradient(from 214deg, transparent 0 7%, var(--portal-accent) 13%, #fff 19%, var(--portal-accent-2) 27%, transparent 36% 61%, var(--portal-accent-2) 69%, #fff 76%, var(--portal-accent) 84%, transparent 92%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 1;
filter: drop-shadow(0 0 13px color-mix(in srgb, var(--portal-accent) 72%, transparent));
animation: smtPortalEdge 8.6s linear infinite;
}
.smt-grand:not(#_) .smt-portal__face::after {
inset: 5px;
border: 1px solid rgba(255,255,255,.17);
background:
linear-gradient(116deg, rgba(255,255,255,.16), transparent 14% 72%, rgba(255,255,255,.055)),
radial-gradient(circle at 17% 7%, rgba(255,255,255,.15), transparent 24%),
linear-gradient(180deg, rgba(255,255,255,.035), transparent 31% 72%, rgba(0,0,0,.12));
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.70),
inset 0 0 38px rgba(255,255,255,.035);
}
.smt-grand:not(#_) .smt-portal__edge-runner {
position: absolute;
inset: -2px;
z-index: 22;
border-radius: inherit;
padding: 2px;
pointer-events: none;
background: conic-gradient(from var(--edge-angle, 0deg), transparent 0 74%, rgba(255,255,255,.98) 79%, var(--portal-accent) 83%, transparent 88%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
filter: drop-shadow(0 0 15px var(--portal-accent));
animation: smtPortalRunner 5.8s linear infinite;
}
.smt-grand:not(#_) .smt-portal__energy {
position: absolute;
z-index: -4;
left: 8%;
right: 8%;
height: 18%;
border-radius: 50%;
filter: blur(34px);
opacity: .66;
animation: smtPortalEnergy 4.4s ease-in-out infinite;
}
.smt-grand:not(#_) .smt-portal__energy--one { bottom: -7%; background: color-mix(in srgb, var(--portal-accent) 72%, transparent); }
.smt-grand:not(#_) .smt-portal__energy--two { top: 3%; background: color-mix(in srgb, var(--portal-accent-2) 48%, transparent); animation-delay: -2.2s; }
.smt-grand:not(#_) .smt-portal__media {
position: absolute;
inset: var(--worlds-frame-thickness);
z-index: 2;
overflow: hidden;
border: 1px solid rgba(255,255,255,.18);
border-radius: calc(var(--worlds-card-radius) - 12px);
background:
radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--portal-accent) 15%, transparent), transparent 48%),
#02030a;
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.86),
inset 0 0 36px rgba(0,0,0,.56),
0 0 18px color-mix(in srgb, var(--portal-accent) 18%, transparent);
}
.smt-grand:not(#_) .smt-portal__picture { position: absolute; inset: 0; display: block; }
.smt-grand:not(#_) .smt-portal__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--portal-position, center);
filter: saturate(1.10) contrast(1.13) brightness(1.015);
transform: scale(1.006);
transition: transform .9s cubic-bezier(.16,1,.3,1), filter .55s ease;
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__image,
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__image { filter: saturate(1.07) contrast(1.12) brightness(.985); }
.smt-grand:not(#_) .smt-portal:hover .smt-portal__image { transform: scale(1.04); filter: saturate(1.18) contrast(1.1) brightness(1.03); }
.smt-grand:not(#_) .smt-portal__fallback { position: absolute; inset: 0; background: #02030a; }
.smt-grand:not(#_) .smt-portal__fallback-orb { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--portal-accent) 46%, transparent), transparent 68%); filter: blur(18px); }
.smt-grand:not(#_) .smt-portal__fallback-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; }
.smt-grand:not(#_) .smt-portal__overlay {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.015), transparent 55%, rgba(0,0,0,.10)),
radial-gradient(circle at 50% 36%, transparent 58%, rgba(0,0,0,.13));
opacity: .34;
}
.smt-grand:not(#_) .smt-portal__effect,
.smt-grand:not(#_) .smt-portal__chromatic,
.smt-grand:not(#_) .smt-portal__shine,
.smt-grand:not(#_) .smt-portal__spotlight { position: absolute; inset: 0; pointer-events: none; }
.smt-grand:not(#_) .smt-portal__effect { z-index: 4; opacity: .32; mix-blend-mode: screen; }
.smt-grand:not(#_) .smt-portal--glitch .smt-portal__effect {
background: linear-gradient(90deg, transparent 0 18%, rgba(0,217,255,.40) 19% 20%, transparent 21% 68%, rgba(255,42,173,.36) 69% 70%, transparent 71%), repeating-linear-gradient(0deg, transparent 0 25px, rgba(255,255,255,.05) 26px, transparent 27px);
animation: smtPortalGlitch 5.4s steps(1) infinite;
}
.smt-grand:not(#_) .smt-portal--ribbon .smt-portal__effect { background: radial-gradient(circle at 50% 45%, rgba(154,91,255,.32), transparent 60%); animation: smtPortalPulse 4.2s ease-in-out infinite; }
.smt-grand:not(#_) .smt-portal--drip .smt-portal__effect { background: linear-gradient(118deg, transparent 25%, rgba(255,42,173,.18) 44%, rgba(0,217,255,.20) 58%, transparent 76%); background-size: 220% 100%; animation: smtPortalLiquid 5.8s ease-in-out infinite; }
.smt-grand:not(#_) .smt-portal__chromatic { z-index: 5; opacity: 0; background-image: var(--portal-image); background-size: cover; background-position: var(--portal-position, center); mix-blend-mode: screen; }
.smt-grand:not(#_) .smt-portal--glitch .smt-portal__chromatic--cyan { filter: sepia(1) saturate(9) hue-rotate(132deg); }
.smt-grand:not(#_) .smt-portal--glitch .smt-portal__chromatic--pink { filter: sepia(1) saturate(9) hue-rotate(276deg); }
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__chromatic--cyan { animation: smtPortalChromaticCyan .24s steps(1) 1; }
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__chromatic--pink { animation: smtPortalChromaticPink .24s steps(1) 1; }
.smt-grand:not(#_) .smt-portal__shine { z-index: 6; background: linear-gradient(112deg, transparent 16%, rgba(255,255,255,.26) 41%, transparent 59%); transform: translateX(-135%); opacity: .48; animation: smtPortalSweep 7.2s ease-in-out infinite; animation-delay: -1.3s; }
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__shine { animation-delay: -3.6s; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__shine { animation-delay: -5.4s; }
.smt-grand:not(#_) .smt-portal__spotlight { z-index: 7; background: radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 36%), rgba(255,255,255,.26), transparent 28%); opacity: .10; transition: opacity .35s ease; }
.smt-grand:not(#_) .smt-portal:hover .smt-portal__spotlight { opacity: .9; }
.smt-grand:not(#_) .smt-portal__rail { position: absolute; z-index: 10; left: 9%; right: 9%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--portal-accent), #fff, var(--portal-accent-2), transparent); box-shadow: 0 0 14px var(--portal-accent); opacity: .94; }
.smt-grand:not(#_) .smt-portal__rail--top { top: 14px; }
.smt-grand:not(#_) .smt-portal__rail--bottom { bottom: 14px; opacity: .68; }
.smt-grand:not(#_) .smt-portal__corner { position: absolute; z-index: 11; width: 34px; height: 34px; pointer-events: none; border-color: color-mix(in srgb, var(--portal-accent) 82%, white 20%); filter: drop-shadow(0 0 9px var(--portal-accent)); opacity: 1; }
.smt-grand:not(#_) .smt-portal__corner--tl { top: 14px; left: 14px; border-top: 2px solid; border-left: 2px solid; }
.smt-grand:not(#_) .smt-portal__corner--tr { top: 14px; right: 14px; border-top: 2px solid; border-right: 2px solid; }
.smt-grand:not(#_) .smt-portal__corner--bl { bottom: 14px; left: 14px; border-bottom: 2px solid; border-left: 2px solid; }
.smt-grand:not(#_) .smt-portal__corner--br { right: 14px; bottom: 14px; border-right: 2px solid; border-bottom: 2px solid; }
.smt-grand:not(#_) .smt-portal--artwork .smt-portal__footer,
.smt-grand:not(#_) .smt-portal--artwork .smt-portal__hover-cta { display: none !important; }
.smt-grand:not(#_) .smt-portal:not(.smt-portal--artwork) .smt-portal__meta,
.smt-grand:not(#_) .smt-portal:not(.smt-portal--artwork) .smt-portal__content,
.smt-grand:not(#_) .smt-portal:not(.smt-portal--artwork) .smt-portal__footer,
.smt-grand:not(#_) .smt-portal:not(.smt-portal--artwork) .smt-portal__hover-cta { position: relative; z-index: 12; }
.smt-grand:not(#_) .smt-portal__reflection {
position: absolute;
z-index: -1;
left: 8%;
right: 8%;
top: calc(100% + 24px);
height: 31%;
border-radius: 26px 26px 50% 50%;
background-image: var(--portal-image);
background-size: cover;
background-position: bottom;
transform: scaleY(-.42) perspective(520px) rotateX(29deg);
transform-origin: top;
filter: blur(4px) saturate(1.25);
opacity: .18;
mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 82%);
}
.smt-grand:not(#_) .smt-portal__ground-glow {
position: absolute;
z-index: -2;
left: 1%;
right: 1%;
bottom: -58px;
height: 78px;
border-radius: 50%;
background:
radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.26), color-mix(in srgb, var(--portal-accent) 72%, transparent) 35%, transparent 76%);
filter: blur(31px);
opacity: .96;
transform: scale(1);
animation: smtPortalGroundGlow 4.2s ease-in-out infinite;
transition: opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1), filter .4s ease;
}
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__ground-glow { bottom: -56px; opacity: 1; }
.smt-grand:not(#_) .smt-worlds__status {
position: relative;
z-index: 13;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: min(1540px, 94%);
margin: -30px auto 0;
overflow: visible;
border: 1px solid rgba(255,255,255,.23);
border-radius: 22px;
background:
linear-gradient(180deg, rgba(25,28,57,.91), rgba(3,5,16,.975)),
rgba(3,5,16,.95);
box-shadow:
0 38px 88px rgba(0,0,0,.72),
0 0 0 1px rgba(0,0,0,.70),
0 0 64px rgba(112,52,255,.30),
inset 0 1px 0 rgba(255,255,255,.23),
inset 0 -1px 0 rgba(255,255,255,.065);
backdrop-filter: blur(34px) saturate(1.62);
-webkit-backdrop-filter: blur(34px) saturate(1.62);
}
.smt-grand:not(#_) .smt-worlds__status::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(112deg, rgba(255,255,255,.11), transparent 24% 72%, rgba(255,255,255,.05)),
linear-gradient(90deg, transparent, rgba(255,42,173,.15), rgba(0,217,255,.15), transparent);
}
.smt-grand:not(#_) .smt-worlds__status::after {
content: '';
position: absolute;
z-index: -1;
left: 7%;
right: 7%;
bottom: -31px;
height: 42px;
border-radius: 50%;
background: linear-gradient(90deg, rgba(0,217,255,.34), rgba(132,61,255,.50), rgba(255,42,173,.34));
filter: blur(24px);
opacity: .9;
}
.smt-grand:not(#_) .smt-worlds__status-link {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
align-items: center;
gap: 17px;
min-width: 0;
min-height: 94px;
padding: 13px clamp(18px,1.45vw,28px);
border-right: 1px solid rgba(255,255,255,.12);
transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.smt-grand:not(#_) .smt-worlds__status-link:last-child { border-right: 0; }
.smt-grand:not(#_) .smt-worlds__status-link:hover {
z-index: 2;
background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--status-accent) 20%, transparent), transparent 57%);
box-shadow: inset 0 0 42px color-mix(in srgb, var(--status-accent) 15%, transparent);
}
.smt-grand:not(#_) .smt-worlds__status-icon {
position: relative;
display: grid;
place-items: center;
width: 62px;
height: 62px;
color: var(--status-accent);
border: 1px solid color-mix(in srgb, var(--status-accent) 74%, white 12%);
border-radius: 50%;
background:
radial-gradient(circle at 35% 27%, rgba(255,255,255,.23), transparent 22%),
radial-gradient(circle, color-mix(in srgb, var(--status-accent) 18%, transparent), transparent 68%),
linear-gradient(145deg, rgba(255,255,255,.085), rgba(3,5,14,.94) 46%, rgba(0,0,0,.98));
box-shadow:
0 0 24px color-mix(in srgb, var(--status-accent) 38%, transparent),
inset 0 0 0 5px rgba(0,0,0,.48),
inset 0 0 0 6px color-mix(in srgb, var(--status-accent-2) 34%, transparent),
inset 0 1px 0 rgba(255,255,255,.25);
transform: translateZ(20px);
}
.smt-grand:not(#_) .smt-worlds__status-icon::before,
.smt-grand:not(#_) .smt-worlds__status-icon::after {
content: '';
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.smt-grand:not(#_) .smt-worlds__status-icon::before {
inset: 7px;
border: 1px solid color-mix(in srgb, var(--status-accent-2) 52%, transparent);
background: repeating-conic-gradient(from 0deg, transparent 0 11deg, color-mix(in srgb, var(--status-accent) 23%, transparent) 12deg 13deg);
opacity: .48;
}
.smt-grand:not(#_) .smt-worlds__status-icon::after {
inset: -4px;
padding: 1px;
background: conic-gradient(from 0deg, transparent, var(--status-accent), transparent 31%, var(--status-accent-2), transparent 66%, var(--status-accent));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: smtStatusRing 6.2s linear infinite;
}
.smt-grand:not(#_) .smt-worlds__status-icon svg {
position: relative;
z-index: 2;
width: 39px;
height: 39px;
overflow: visible;
fill: none;
stroke: currentColor;
stroke-width: 2.15;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 7px currentColor);
}
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__aura { stroke-width: 5.5; opacity: .12; filter: blur(2.1px); }
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__main { stroke-width: 2.4; }
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__detail { stroke-width: 2; }
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__micro { stroke-width: 1.3; opacity: .7; }
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__stick { fill: color-mix(in srgb, var(--status-accent) 18%, transparent); stroke-width: 1.8; }
.smt-grand:not(#_) .smt-worlds__status-icon .smt-icon__spark { stroke-width: 1.5; opacity: .84; animation: smtIconSpark 3s ease-in-out infinite; transform-origin: center; }
.smt-grand:not(#_) .smt-worlds__status-copy {
display: grid;
gap: 6px;
min-width: 0;
}
.smt-grand:not(#_) .smt-worlds__status-copy strong {
color: #fff;
font-size: clamp(.88rem, .76rem + .20vw, 1.08rem);
font-weight: 800;
letter-spacing: .145em;
line-height: 1.15;
text-transform: uppercase;
text-shadow: 0 2px 16px rgba(0,0,0,.96), 0 0 12px color-mix(in srgb, var(--status-accent) 34%, transparent);
}
.smt-grand:not(#_) .smt-worlds__status-copy small {
color: rgba(241,239,255,.78);
font-size: clamp(.68rem, .60rem + .12vw, .82rem);
font-weight: 600;
letter-spacing: .12em;
line-height: 1.3;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.smt-grand:not(#_) .smt-worlds__status-arrow {
position: relative;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--status-accent) 16%, transparent), transparent 66%), rgba(255,255,255,.035);
box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 16px color-mix(in srgb, var(--status-accent) 14%, transparent);
transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.smt-grand:not(#_) .smt-worlds__status-arrow::before,
.smt-grand:not(#_) .smt-worlds__status-arrow::after,
.smt-grand:not(#_) .smt-worlds__status-arrow i { content: ''; position: absolute; display: block; }
.smt-grand:not(#_) .smt-worlds__status-arrow i { width: 13px; height: 1.5px; background: #fff; box-shadow: 0 0 7px var(--status-accent); }
.smt-grand:not(#_) .smt-worlds__status-arrow::before { width: 7px; height: 7px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translateX(4px) rotate(45deg); }
.smt-grand:not(#_) .smt-worlds__status-arrow::after { inset: 4px; border: 1px solid color-mix(in srgb, var(--status-accent) 48%, transparent); border-radius: 50%; }
.smt-grand:not(#_) .smt-worlds__status-link:hover .smt-worlds__status-arrow { transform: translateX(5px) scale(1.05); border-color: color-mix(in srgb, var(--status-accent) 80%, white 10%); box-shadow: 0 0 20px color-mix(in srgb, var(--status-accent) 36%, transparent); }
.smt-grand:not(#_) .smt-worlds__status-dot { position: absolute; top: 13px; right: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--status-accent); box-shadow: 0 0 11px var(--status-accent); }
.smt-grand:not(#_) .smt-worlds__status-dot.is-loading { animation: smtStatusDot 1.35s ease-in-out infinite; }
@media (min-width: 990px) {
.smt-grand:not(#_) .smt-portal { -webkit-box-reflect: below 22px linear-gradient(to bottom, rgba(255,255,255,.095), transparent 35%); }
}
@media (min-width: 990px) and (max-width: 1420px) {
.smt-grand:not(#_) .smt-worlds { --worlds-stage-height: 900px; padding-top: 72px; }
.smt-grand:not(#_) .smt-worlds__shell { width: min(1380px, calc(100% - 24px)); }
.smt-grand:not(#_) .smt-worlds__heading { font-size: clamp(4.2rem,6.35vw,6.7rem); line-height:.84; }
.smt-grand:not(#_) .smt-worlds__grid { width: 98%; gap: 12px; }
.smt-grand:not(#_) .smt-worlds__status { width: 96%; }
.smt-grand:not(#_) .smt-worlds__status-link { gap: 13px; padding-inline: 16px; }
.smt-grand:not(#_) .smt-worlds__status-icon { width: 56px; height: 56px; }
.smt-grand:not(#_) .smt-worlds__status-icon svg { width: 35px; height: 35px; }
}
@media (max-width: 989px) {
.smt-grand:not(#_) .smt-worlds { min-height: 0; padding: 76px 0 100px; }
.smt-grand:not(#_) .smt-worlds__shell { width: min(100%, calc(100% - 24px)); }
.smt-grand:not(#_) .smt-worlds__header { width: min(100%,760px); margin-bottom: 32px; }
.smt-grand:not(#_) .smt-worlds__header::before,
.smt-grand:not(#_) .smt-worlds__header::after { display: none; }
.smt-grand:not(#_) .smt-worlds__heading { font-size: clamp(3.5rem,10vw,5.5rem); line-height: .76; }
.smt-grand:not(#_) .smt-worlds__grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(84vw,590px);
grid-template-columns: none;
align-items: center;
gap: 30px;
width: calc(100% + 24px);
margin-left: -12px;
padding: 20px 9vw 84px;
overflow-x: auto;
overflow-y: visible;
perspective: 1600px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.smt-grand:not(#_) .smt-worlds__grid::-webkit-scrollbar { display: none; }
.smt-grand:not(#_) .smt-portal,
.smt-grand:not(#_) .smt-portal--slot-1,
.smt-grand:not(#_) .smt-portal--slot-2,
.smt-grand:not(#_) .smt-portal--slot-3 {
--base-x:0px;
--base-y:0px;
--base-z:0px;
--base-rx:0deg;
--base-ry:0deg;
--base-rz:0deg;
--base-scale:1;
aspect-ratio:.80;
scroll-snap-align:center;
}
.smt-grand:not(#_) .smt-worlds__status { width:min(100%,800px); margin-top:-8px; }
.smt-grand:not(#_) .smt-worlds__status-link { min-height:88px; padding-inline:16px; gap:13px; }
.smt-grand:not(#_) .smt-worlds__status-icon { width:54px; height:54px; }
.smt-grand:not(#_) .smt-worlds__status-icon svg { width:34px; height:34px; }
.smt-grand:not(#_) .smt-worlds__status-copy strong { font-size:.76rem; }
.smt-grand:not(#_) .smt-worlds__status-copy small { font-size:.54rem; }
.smt-grand:not(#_) .smt-worlds__status-arrow { width:35px; height:35px; }
}
@media (max-width: 749px) {
.smt-grand:not(#_) .smt-worlds { padding:64px 0 86px; scroll-margin-top:78px; }
.smt-grand:not(#_) .smt-worlds__shell { width:min(100%,calc(100% - 18px)); }
.smt-grand:not(#_) .smt-worlds__header { margin-bottom:25px; }
.smt-grand:not(#_) .smt-worlds__header-line { width:84%; margin-bottom:13px; }
.smt-grand:not(#_) .smt-worlds__eyebrow { font-size:.58rem; letter-spacing:.32em; }
.smt-grand:not(#_) .smt-worlds__heading { font-size:clamp(2.85rem,14vw,4.15rem); letter-spacing:-.055em; }
.smt-grand:not(#_) .smt-worlds__intro { width:92%; margin-top:15px; font-size:.88rem; }
.smt-grand:not(#_) .smt-worlds__grid { grid-auto-columns:min(89vw,520px); width:calc(100% + 18px); margin-left:-9px; gap:22px; padding:14px 5.5vw 68px; }
.smt-grand:not(#_) .smt-portal { aspect-ratio:.80; }
.smt-grand:not(#_) .smt-portal__media { inset:8px; border-radius:calc(var(--worlds-card-radius) - 7px); }
.smt-grand:not(#_) .smt-portal__corner { width:22px; height:22px; }
.smt-grand:not(#_) .smt-portal__rail--top { top:10px; }
.smt-grand:not(#_) .smt-portal__rail--bottom { bottom:10px; }
.smt-grand:not(#_) .smt-worlds__floor { bottom:-17%; height:44%; }
.smt-grand:not(#_) .smt-worlds__status { grid-template-columns:1fr; width:calc(100% - 6px); margin-top:0; border-radius:17px; overflow:hidden; }
.smt-grand:not(#_) .smt-worlds__status-link { min-height:80px; border-right:0; border-bottom:1px solid rgba(255,255,255,.09); padding:10px 13px; }
.smt-grand:not(#_) .smt-worlds__status-link:last-child { border-bottom:0; }
.smt-grand:not(#_) .smt-worlds__status-icon { width:50px; height:50px; }
.smt-grand:not(#_) .smt-worlds__status-icon svg { width:31px; height:31px; }
.smt-grand:not(#_) .smt-worlds__status-copy strong { font-size:.72rem; }
.smt-grand:not(#_) .smt-worlds__status-copy small { font-size:.51rem; }
.smt-grand:not(#_) .smt-portal__reflection { display:none; }
.smt-grand:not(#_) .smt-portal__extrude--left,
.smt-grand:not(#_) .smt-portal__extrude--right { opacity:.5; }
}
@media (max-width: 749px) {
.smt-grand:not(#_) .smt-worlds__backdrop-picture {
animation: none;
transform: scale(1.045);
filter: saturate(1.08) contrast(1.04) brightness(.28);
}
.smt-grand:not(#_) .smt-worlds__nebula,
.smt-grand:not(#_) .smt-worlds__smoke,
.smt-grand:not(#_) .smt-worlds__beam,
.smt-grand:not(#_) .smt-worlds__scanburst,
.smt-grand:not(#_) .smt-worlds__glitchfield,
.smt-grand:not(#_) .smt-worlds__spark,
.smt-grand:not(#_) .smt-worlds__data,
.smt-grand:not(#_) .smt-worlds__floor-reflection {
display: none !important;
}
.smt-grand:not(#_) .smt-worlds__floor {
bottom: -12%;
height: 37%;
opacity: .28;
filter: none;
}
.smt-grand:not(#_) .smt-portal {
contain: layout style;
isolation: isolate;
will-change: auto;
}
.smt-grand:not(#_) .smt-portal__face {
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow:
0 34px 74px rgba(0,0,0,.72),
0 0 0 1px rgba(255,255,255,.12),
0 0 34px color-mix(in srgb, var(--portal-accent) 38%, transparent),
inset 0 1px 0 rgba(255,255,255,.32),
inset 0 -1px 0 rgba(0,0,0,.72);
}
.smt-grand:not(#_) .smt-portal__chromatic,
.smt-grand:not(#_) .smt-portal__reflection,
.smt-grand:not(#_) .smt-portal__energy--two {
display: none !important;
}
.smt-grand:not(#_) .smt-portal__face::before,
.smt-grand:not(#_) .smt-portal__edge-runner {
animation-duration: 13s;
filter: none;
}
.smt-grand:not(#_) .smt-portal__shine {
animation-duration: 10.5s;
opacity: .34;
}
.smt-grand:not(#_) .smt-portal__effect {
opacity: .20;
animation-duration: 8.5s;
}
.smt-grand:not(#_) .smt-portal__energy--one {
opacity: .38;
filter: blur(22px);
animation-duration: 7s;
}
.smt-grand:not(#_) .smt-worlds__status {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.smt-grand:not(#_) .smt-portal__reveal {
position: absolute;
inset: 0;
overflow: visible;
border-radius: inherit;
transform-style: preserve-3d;
will-change: opacity, transform, filter;
}
.smt-grand:not(#_).smt-js .smt-portal__reveal.smt-reveal {
opacity: 0;
transform: translate3d(0,54px,-90px) scale(.945);
filter: blur(7px) brightness(.72);
transition:
opacity .92s ease,
transform 1.12s cubic-bezier(.16,1,.3,1),
filter .9s ease;
}
.smt-grand:not(#_).smt-js .smt-portal__reveal.smt-reveal.is-visible {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
filter: none;
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__reveal { transition-delay: .05s; }
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__reveal { transition-delay: .17s; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__reveal { transition-delay: .29s; }
@media (min-width: 990px) {
.smt-grand:not(#_) .smt-worlds__heading {
text-shadow: 0 3px 0 rgba(0,0,0,.44), 0 0 24px rgba(255,255,255,.16);
}
.smt-grand:not(#_) .smt-worlds__intro {
padding: 0 18px;
text-shadow: 0 3px 20px #000, 0 0 36px rgba(0,0,0,.96);
}
.smt-grand:not(#_) .smt-portal__face {
transform: translateZ(52px);
}
.smt-grand:not(#_) .smt-portal__media {
box-shadow:
inset 0 0 0 1px rgba(0,0,0,.9),
inset 0 0 20px rgba(0,0,0,.30),
0 0 23px color-mix(in srgb, var(--portal-accent) 22%, transparent);
}
.smt-grand:not(#_) .smt-portal__overlay { opacity: .18; }
.smt-grand:not(#_) .smt-portal__link {
animation-name: smtPortalFloatDesktop;
animation-timing-function: cubic-bezier(.45,.05,.55,.95);
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__link { --desktop-float:-13px; --desktop-sway:.24deg; --desktop-sway-return:-.11deg; }
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__link { --desktop-float:-18px; --desktop-sway:-.16deg; --desktop-sway-return:.07deg; }
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__link { --desktop-float:-14px; --desktop-sway:-.24deg; --desktop-sway-return:.11deg; }
.smt-grand:not(#_) .smt-worlds__status {
min-height: 102px;
background:
linear-gradient(180deg, rgba(31,34,68,.94), rgba(3,5,16,.985)),
rgba(3,5,16,.97);
box-shadow:
0 34px 90px rgba(0,0,0,.72),
0 0 54px rgba(120,63,255,.20),
inset 0 1px 0 rgba(255,255,255,.16);
}
.smt-grand:not(#_) .smt-worlds__status-link { min-height: 98px; }
.smt-grand:not(#_) .smt-worlds__status-copy { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.smt-grand:not(#_) .smt-worlds::before,
.smt-grand:not(#_) .smt-worlds__backdrop-picture,
.smt-grand:not(#_) .smt-worlds__nebula,
.smt-grand:not(#_) .smt-worlds__smoke,
.smt-grand:not(#_) .smt-worlds__beam,
.smt-grand:not(#_) .smt-worlds__scanburst,
.smt-grand:not(#_) .smt-worlds__spark,
.smt-grand:not(#_) .smt-worlds__data,
.smt-grand:not(#_) .smt-worlds__glitchfield,
.smt-grand:not(#_) .smt-worlds__heading,
.smt-grand:not(#_) .smt-portal__link,
.smt-grand:not(#_) .smt-portal__face::before,
.smt-grand:not(#_) .smt-portal__edge-runner,
.smt-grand:not(#_) .smt-portal__energy,
.smt-grand:not(#_) .smt-portal__effect,
.smt-grand:not(#_) .smt-portal__shine,
.smt-grand:not(#_) .smt-portal__ground-glow,
.smt-grand:not(#_) .smt-worlds__status-icon::after,
.smt-grand:not(#_) .smt-worlds__status-dot,
.smt-grand:not(#_) .smt-icon__spark { animation:none !important; }
}
@property --edge-angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes smtWorldsStars { 0%{transform:translate3d(0,0,0);opacity:.52}100%{transform:translate3d(0,-26px,0);opacity:.86} }
@keyframes smtWorldsBackdrop { 0%{scale:1;filter:blur(1.5px) saturate(1.16) contrast(1.1) brightness(.31)}100%{scale:1.026;filter:blur(1.2px) saturate(1.3) contrast(1.14) brightness(.36)} }
@keyframes smtWorldsNebula { 0%{transform:translate3d(-3%,-3%,0) scale(.92)}100%{transform:translate3d(4%,3%,0) scale(1.1)} }
@keyframes smtWorldsSmoke { 0%{translate:-6% 0;opacity:.34}100%{translate:7% 3%;opacity:.62} }
@keyframes smtWorldsBeam { 0%{opacity:.1;filter:blur(17px)}100%{opacity:.32;filter:blur(10px)} }
@keyframes smtWorldsScanburst { 0%,8%{transform:translateY(-120%);opacity:0}16%{opacity:.24}42%,100%{transform:translateY(128%);opacity:0} }
@keyframes smtWorldsGlitchfield { 0%,89%,100%{transform:translateX(0);opacity:.07;clip-path:inset(0)}90%{transform:translateX(6px);opacity:.34;clip-path:inset(22% 0 66% 0)}91%{transform:translateX(-5px);clip-path:inset(68% 0 14% 0)}92%{transform:translateX(3px);clip-path:inset(42% 0 38% 0)}93%{transform:translateX(0);opacity:.1;clip-path:inset(0)} }
@keyframes smtWorldsSpark { 0%,12%{transform:translateX(-28%) scaleX(.35);opacity:0}18%{opacity:.95}48%,100%{transform:translateX(185%) scaleX(1.08);opacity:0} }
@keyframes smtWorldsData { 0%,100%{transform:translateX(-12px);opacity:.24}50%{transform:translateX(14px);opacity:.78} }
@keyframes smtWorldsHeadingGlow { 0%,100%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.36)) drop-shadow(0 0 18px rgba(255,255,255,.20)) drop-shadow(0 0 38px rgba(255,42,173,.26))}50%{filter:drop-shadow(0 3px 0 rgba(0,0,0,.36)) drop-shadow(0 0 22px rgba(255,255,255,.30)) drop-shadow(0 0 50px rgba(0,217,255,.28))} }
@keyframes smtHeadingSignal { 0%{opacity:0;clip-path:inset(0)}25%{opacity:.5;clip-path:inset(15% 0 62% 0)}50%{opacity:.35;clip-path:inset(63% 0 18% 0)}75%{opacity:.45;clip-path:inset(41% 0 42% 0)}100%{opacity:0;clip-path:inset(0)} }
@keyframes smtPortalFloat { 0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -14px;rotate:.18deg} }
@keyframes smtPortalFloatDesktop {
0%,100%{translate:0 0;rotate:0deg}
35%{translate:0 var(--desktop-float,-14px);rotate:var(--desktop-sway,.18deg)}
68%{translate:0 -5px;rotate:var(--desktop-sway-return,-.08deg)}
}
@keyframes smtPortalEdge { 0%{filter:hue-rotate(0deg) drop-shadow(0 0 13px color-mix(in srgb,var(--portal-accent) 72%,transparent))}100%{filter:hue-rotate(360deg) drop-shadow(0 0 13px color-mix(in srgb,var(--portal-accent) 72%,transparent))} }
@keyframes smtPortalRunner { to{--edge-angle:360deg} }
@keyframes smtPortalEnergy { 0%,100%{transform:scale(.88);opacity:.46}50%{transform:scale(1.1);opacity:.88} }
@keyframes smtPortalGroundGlow { 0%,100%{transform:scaleX(.88);opacity:.64}50%{transform:scaleX(1.1);opacity:1} }
@keyframes smtPortalGlitch { 0%,85%,100%{transform:translateX(0);opacity:.14;clip-path:inset(0)}86%{transform:translateX(7px);opacity:.65;clip-path:inset(18% 0 65% 0)}87%{transform:translateX(-6px);clip-path:inset(67% 0 12% 0)}88%{transform:translateX(4px);clip-path:inset(41% 0 40% 0)}89%{transform:translateX(0);opacity:.18;clip-path:inset(0)} }
@keyframes smtPortalPulse { 0%,100%{opacity:.18;transform:scale(.95)}50%{opacity:.56;transform:scale(1.07)} }
@keyframes smtPortalLiquid { 0%,100%{background-position:0 50%;opacity:.18}50%{background-position:100% 50%;opacity:.54} }
@keyframes smtPortalSweep { 0%,20%{transform:translateX(-135%);opacity:0}29%{opacity:.48}54%,100%{transform:translateX(135%);opacity:0} }
@keyframes smtPortalChromaticCyan { 0%{opacity:0;transform:translateX(0);clip-path:inset(0)}25%{opacity:.36;transform:translateX(-8px);clip-path:inset(12% 0 67% 0)}50%{opacity:.24;transform:translateX(-4px);clip-path:inset(58% 0 18% 0)}100%{opacity:0;transform:translateX(0);clip-path:inset(0)} }
@keyframes smtPortalChromaticPink { 0%{opacity:0;transform:translateX(0);clip-path:inset(0)}25%{opacity:.34;transform:translateX(8px);clip-path:inset(62% 0 13% 0)}50%{opacity:.22;transform:translateX(4px);clip-path:inset(29% 0 52% 0)}100%{opacity:0;transform:translateX(0);clip-path:inset(0)} }
@keyframes smtStatusRing { to{transform:rotate(360deg)} }
@keyframes smtStatusDot { 0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)} }
@keyframes smtIconSpark { 0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.14)} }
.smt-grand:not(#_) .smt-portal__face {
isolation: isolate;
}
.smt-grand:not(#_) .smt-portal__face > * {
transform-style: preserve-3d;
}
.smt-grand:not(#_) .smt-portal--slot-1 .smt-portal__face,
.smt-grand:not(#_) .smt-portal--slot-3 .smt-portal__face {
box-shadow:
0 58px 116px rgba(0,0,0,.76),
0 20px 48px rgba(0,0,0,.64),
0 0 0 1px rgba(255,255,255,.12),
0 0 52px color-mix(in srgb, var(--portal-accent) 48%, transparent),
inset 0 2px 0 rgba(255,255,255,.38),
inset 0 -2px 0 rgba(0,0,0,.68);
}
.smt-grand:not(#_) .smt-portal--slot-2 .smt-portal__face {
box-shadow:
0 76px 146px rgba(0,0,0,.82),
0 28px 62px rgba(0,0,0,.72),
0 0 0 1px rgba(255,255,255,.15),
0 0 72px color-mix(in srgb, var(--portal-accent) 60%, transparent),
0 0 130px color-mix(in srgb, var(--portal-accent-2) 34%, transparent),
inset 0 2px 0 rgba(255,255,255,.46),
inset 0 -2px 0 rgba(0,0,0,.74),
inset 30px 0 64px rgba(255,255,255,.04),
inset -30px 0 64px rgba(0,0,0,.42);
}
.smt-grand:not(#_) .smt-portal:hover {
--card-lift: -18px;
}
.smt-grand:not(#_) .smt-portal:hover .smt-portal__face {
box-shadow:
0 82px 152px rgba(0,0,0,.84),
0 30px 68px rgba(0,0,0,.74),
0 0 0 1px rgba(255,255,255,.17),
0 0 84px color-mix(in srgb, var(--portal-accent) 66%, transparent),
0 0 144px color-mix(in srgb, var(--portal-accent-2) 38%, transparent),
inset 0 2px 0 rgba(255,255,255,.48),
inset 0 -2px 0 rgba(0,0,0,.75);
}
@media (max-width: 1099px) {
.smt-grand:not(#_) .smt-worlds__grid {
perspective: 1800px;
}
.smt-grand:not(#_) .smt-portal--slot-1 {
--base-x: 12px;
--base-y: 16px;
--base-z: -24px;
--base-ry: 7deg;
--base-rz: -.55deg;
--base-scale: .96;
}
.smt-grand:not(#_) .smt-portal--slot-2 {
--base-y: -12px;
--base-z: 54px;
--base-scale: 1.025;
}
.smt-grand:not(#_) .smt-portal--slot-3 {
--base-x: -12px;
--base-y: 16px;
--base-z: -24px;
--base-ry: -7deg;
--base-rz: .55deg;
--base-scale: .96;
}
}
.smt-grand:not(#_) .smt-worlds__grid {
cursor: default;
}
.smt-grand:not(#_) .smt-portal__link {
cursor: pointer;
touch-action: manipulation;
}
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__image,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__image {
transform: scale(1.052);
filter: saturate(1.22) contrast(1.13) brightness(1.055);
}
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__spotlight,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__spotlight {
opacity: .94;
}
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__energy,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__energy {
opacity: .94;
filter: blur(28px) saturate(1.25);
}
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__reflection,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__reflection {
opacity: .28;
filter: blur(3px) saturate(1.45) brightness(1.12);
}
.smt-grand:not(#_) .smt-portal.is-portal-active .smt-portal__extrude--bottom,
.smt-grand:not(#_) .smt-portal:focus-within .smt-portal__extrude--bottom {
transform: translateY(7px) scaleX(1.025);
}
.smt-grand:not(#_) .smt-portal__extrude--bottom {
transition: transform .72s cubic-bezier(.16,1,.3,1), filter .45s ease, opacity .45s ease;
}
@media (min-width: 990px) {
.smt-grand:not(#_) .smt-worlds__atmosphere {
animation: smtWorldsAtmosphereDrift 15s ease-in-out infinite alternate;
}
.smt-grand:not(#_) .smt-worlds__backdrop-picture {
animation-duration: 16s;
}
.smt-grand:not(#_) .smt-worlds__grid {
isolation: isolate;
}
.smt-grand:not(#_) .smt-portal {
animation: smtPortalAmbientBreath calc(7.2s + (var(--card-index) * .8s)) ease-in-out infinite;
animation-delay: calc(var(--card-index) * -1.9s);
}
.smt-grand:not(#_) .smt-portal.is-portal-active,
.smt-grand:not(#_) .smt-portal:focus-within {
animation-play-state: paused;
}
.smt-grand:not(#_) .smt-portal__link {
pointer-events: auto;
}
.smt-grand:not(#_) .smt-portal__chromatic--cyan {
animation: smtPortalAmbientCyan 8.8s steps(1) infinite;
animation-delay: calc(var(--card-index) * -2.1s);
}
.smt-grand:not(#_) .smt-portal__chromatic--pink {
animation: smtPortalAmbientPink 8.8s steps(1) infinite;
animation-delay: calc((var(--card-index) * -2.1s) - .08s);
}
.smt-grand:not(#_) .smt-worlds.is-signal-hit .smt-worlds__glitchfield {
animation: smtWorldsSignalField .52s steps(1) both;
opacity: .52;
}
.smt-grand:not(#_) .smt-worlds.is-signal-hit .smt-worlds__scanburst {
animation: smtWorldsSignalScan .52s steps(1) both;
}
.smt-grand:not(#_) .smt-worlds.is-signal-hit .smt-worlds__header {
animation: smtWorldsHeaderKick .52s steps(1) both;
}
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__media {
animation: smtPortalMediaSignal .52s steps(1) both;
}
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__face::after {
animation: smtPortalGlassSignal .52s steps(1) both;
}
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__chromatic--cyan {
animation: smtPortalChromaticCyan .52s steps(1) 1;
}
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__chromatic--pink {
animation: smtPortalChromaticPink .52s steps(1) 1;
}
.smt-grand:not(#_) .smt-portal.is-signal-hit .smt-portal__edge-runner {
filter: drop-shadow(0 0 28px var(--portal-accent)) brightness(1.45);
}
}
@keyframes smtWorldsAtmosphereDrift {
0% { transform: translate3d(-.35%, -.2%, 0) scale(1.006); filter: saturate(1.02); }
100% { transform: translate3d(.45%, .35%, 0) scale(1.018); filter: saturate(1.12); }
}
@keyframes smtPortalAmbientBreath {
0%,100% { filter: saturate(1) brightness(1); }
50% { filter: saturate(1.07) brightness(1.025) drop-shadow(0 18px 24px rgba(0,0,0,.22)); }
}
@keyframes smtPortalAmbientCyan {
0%,78%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); }
79% { opacity:.18; transform:translateX(-3px); clip-path:inset(13% 0 72% 0); }
80% { opacity:.11; transform:translateX(2px); clip-path:inset(61% 0 18% 0); }
81% { opacity:0; transform:translateX(0); clip-path:inset(0); }
}
@keyframes smtPortalAmbientPink {
0%,78%,100% { opacity:0; transform:translateX(0); clip-path:inset(0); }
79% { opacity:.16; transform:translateX(3px); clip-path:inset(66% 0 12% 0); }
80% { opacity:.10; transform:translateX(-2px); clip-path:inset(34% 0 48% 0); }
81% { opacity:0; transform:translateX(0); clip-path:inset(0); }
}
@keyframes smtWorldsSignalField {
0%,100% { transform:translateX(0); clip-path:inset(0); filter:none; }
18% { transform:translateX(8px); clip-path:inset(8% 0 71% 0); filter:hue-rotate(18deg) brightness(1.35); }
38% { transform:translateX(-7px); clip-path:inset(64% 0 12% 0); }
58% { transform:translateX(4px); clip-path:inset(37% 0 42% 0); filter:hue-rotate(-20deg) brightness(1.18); }
78% { transform:translateX(-2px); clip-path:inset(80% 0 5% 0); }
}
@keyframes smtWorldsSignalScan {
0% { transform:translateY(-125%); opacity:0; }
24% { opacity:.44; }
100% { transform:translateY(130%); opacity:0; }
}
@keyframes smtWorldsHeaderKick {
0%,100% { transform:translateX(0); filter:none; }
22% { transform:translateX(3px); filter:drop-shadow(-4px 0 rgba(0,217,255,.55)); }
46% { transform:translateX(-3px); filter:drop-shadow(4px 0 rgba(255,42,173,.55)); }
68% { transform:translateX(1px); }
}
@keyframes smtPortalMediaSignal {
0%,100% { translate:0 0; clip-path:inset(0); filter:none; }
16% { translate:5px 0; clip-path:inset(9% 0 67% 0); filter:brightness(1.24) saturate(1.28); }
34% { translate:-6px 0; clip-path:inset(61% 0 14% 0); }
52% { translate:3px 0; clip-path:inset(35% 0 44% 0); filter:brightness(1.12); }
72% { translate:-2px 0; clip-path:inset(78% 0 7% 0); }
}
@keyframes smtPortalGlassSignal {
0%,100% { opacity:1; }
25% { opacity:.52; background-position:0 0; }
48% { opacity:1; background-position:12px 0; }
68% { opacity:.66; background-position:-8px 0; }
}
@media (max-width: 989px) {
.smt-grand:not(#_) .smt-portal { animation:none !important; }
.smt-grand:not(#_) .smt-portal__chromatic { animation:none !important; }
}

.smt-grand:not(#_) .smt-story {
display: grid !important;
grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr) !important;
width: min(1440px, calc(100% - 48px)) !important;
min-height: 0 !important;
height: clamp(460px, 34vw, var(--smt-story-height, 600px)) !important;
margin: clamp(42px, 4vw, 68px) auto clamp(48px, 4.5vw, 76px) !important;
border-radius: 26px !important;
overflow: hidden !important;
background: linear-gradient(115deg, rgba(4,7,13,.99), rgba(8,7,17,.98)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 28px 72px rgba(0,0,0,.38) !important;
}
.smt-grand:not(#_) .smt-story::after {
bottom: -16px !important;
height: 32px !important;
opacity: .42 !important;
}
.smt-grand:not(#_) .smt-story__media {
grid-column: 1 !important;
grid-row: 1 !important;
min-height: 0 !important;
height: 100% !important;
border-radius: 25px 0 0 25px !important;
overflow: hidden !important;
}
.smt-grand:not(#_) .smt-story__image,
.smt-grand:not(#_) .smt-story__placeholder {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: var(--smt-story-image-position, center) !important;
transform: scale(1.002);
}
.smt-grand:not(#_) .smt-story__media::before {
background:
linear-gradient(90deg, transparent 0 68%, rgba(6,7,15,.22) 80%, rgba(6,7,15,.88) 100%),
linear-gradient(180deg, rgba(0,0,0,.03), transparent 64%, rgba(3,4,10,.26)) !important;
}
.smt-grand:not(#_) .smt-story__media::after {
opacity: .28 !important;
animation-duration: 14s !important;
}
.smt-grand:not(#_) .smt-story__media-light {
right: -14% !important;
top: 10% !important;
width: 36% !important;
height: 80% !important;
filter: blur(70px) !important;
opacity: .10 !important;
}
.smt-grand:not(#_) .smt-story__content {
grid-column: 2 !important;
grid-row: 1 !important;
align-self: stretch !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: clamp(34px, 3.2vw, 58px) clamp(34px, 3.5vw, 64px) !important;
border: 0 !important;
border-left: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 25px 25px 0 !important;
background:
radial-gradient(circle at 0 28%, rgba(0,217,255,.07), transparent 34%),
radial-gradient(circle at 100% 78%, rgba(255,42,173,.08), transparent 38%),
linear-gradient(135deg, rgba(8,10,20,.94), rgba(5,6,13,.99)) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
.smt-grand:not(#_) .smt-story__content::before {
left: 0 !important;
right: auto !important;
top: 12% !important;
bottom: 12% !important;
width: 1px !important;
height: auto !important;
background: linear-gradient(180deg, transparent, var(--smt-cyan), var(--smt-pink), transparent) !important;
opacity: .55 !important;
}
.smt-grand:not(#_) .smt-story__content h2 {
max-width: 11ch !important;
margin: 8px 0 16px !important;
font-size: clamp(2.25rem, 3.3vw, 4.65rem) !important;
line-height: .88 !important;
}
.smt-grand:not(#_) .smt-story__text {
max-width: 54ch !important;
font-size: clamp(.9rem, .88vw, 1.02rem) !important;
line-height: 1.62 !important;
}
.smt-grand:not(#_) .smt-story__statement {
margin: 18px 0 20px !important;
font-size: .64rem !important;
line-height: 1.55 !important;
}
.smt-grand:not(#_) .smt-story .smt-button {
min-height: 44px !important;
padding: 0 22px !important;
}
@media (max-width: 989px) {
.smt-grand:not(#_) .smt-story {
grid-template-columns: 1fr !important;
width: min(100% - 28px, 760px) !important;
height: auto !important;
min-height: 0 !important;
margin-block: 38px 54px !important;
overflow: hidden !important;
}
.smt-grand:not(#_) .smt-story__media {
grid-column: 1 !important;
grid-row: 1 !important;
height: clamp(260px, 58vw, 410px) !important;
border-radius: 24px 24px 0 0 !important;
}
.smt-grand:not(#_) .smt-story__media::before {
background: linear-gradient(180deg, transparent 48%, rgba(5,6,13,.24) 68%, rgba(5,6,13,.96) 100%) !important;
}
.smt-grand:not(#_) .smt-story__content {
grid-column: 1 !important;
grid-row: 2 !important;
height: auto !important;
margin: 0 !important;
padding: 30px 26px 34px !important;
border-left: 0 !important;
border-top: 1px solid rgba(255,255,255,.08) !important;
border-radius: 0 0 24px 24px !important;
}
.smt-grand:not(#_) .smt-story__content::before {
top: 0 !important;
left: 10% !important;
right: 10% !important;
bottom: auto !important;
width: auto !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, var(--smt-cyan), var(--smt-pink), transparent) !important;
}
.smt-grand:not(#_) .smt-story__content h2 {
font-size: clamp(2.2rem, 9vw, 3.7rem) !important;
}
}
@media (max-width: 749px) {
.smt-grand:not(#_) .smt-story {
width: calc(100% - 20px) !important;
margin-block: 28px 44px !important;
border-radius: 20px !important;
content-visibility: auto;
contain-intrinsic-size: 680px;
}
.smt-grand:not(#_) .smt-story__media {
height: min(72vw, 330px) !important;
border-radius: 19px 19px 0 0 !important;
}
.smt-grand:not(#_) .smt-story__image {
transform: none !important;
}
.smt-grand:not(#_) .smt-story__media::after,
.smt-grand:not(#_) .smt-story__media-light,
.smt-grand:not(#_) .smt-story::after {
display: none !important;
}
.smt-grand:not(#_) .smt-story__content {
padding: 25px 21px 28px !important;
border-radius: 0 0 19px 19px !important;
}
.smt-grand:not(#_) .smt-story__text {
font-size: .88rem !important;
line-height: 1.55 !important;
}
.smt-grand:not(#_) .smt-story__statement {
margin-block: 16px 18px !important;
}
}

.smt-grand:not(#_) .smt-story {
width: min(1540px, calc(100% - 40px)) !important;
margin-top: clamp(34px, 3vw, 52px) !important;
margin-bottom: clamp(12px, 1.4vw, 24px) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 28px 72px rgba(0,0,0,.34),
0 22px 68px rgba(0,217,255,.035),
0 26px 76px rgba(255,42,173,.04) !important;
}
.smt-grand:not(#_) .smt-story::after {
display: block !important;
content: "" !important;
position: absolute !important;
left: 8% !important;
right: 8% !important;
bottom: -34px !important;
height: 72px !important;
opacity: .62 !important;
pointer-events: none !important;
background:
radial-gradient(ellipse at 34% 50%, rgba(0,217,255,.16), transparent 46%),
radial-gradient(ellipse at 66% 50%, rgba(255,42,173,.16), transparent 46%) !important;
filter: blur(28px) !important;
}
.smt-grand:not(#_) .smt-story__content {
border-left-color: rgba(255,255,255,.11) !important;
box-shadow: inset 1px 0 0 rgba(0,217,255,.025) !important;
}
.smt-grand:not(#_) .smt-story__content::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 38% !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, rgba(255,42,173,.9), rgba(0,217,255,.85)) !important;
opacity: .82 !important;
}
.smt-grand:not(#_) .smt-story .smt-button {
border-color: rgba(255,255,255,.20) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 rgba(0,0,0,0) !important;
}
.smt-grand:not(#_) .smt-story .smt-button:hover {
border-color: rgba(0,217,255,.52) !important;
box-shadow: 0 0 24px rgba(0,217,255,.10), 0 0 24px rgba(255,42,173,.08) !important;
}
.smt-grand:not(#_) .smt-community {
position: relative !important;
padding-top: clamp(38px, 3.8vw, 64px) !important;
}
.smt-grand:not(#_) .smt-community::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
width: min(1280px, 84vw) !important;
height: 1px !important;
transform: translateX(-50%) !important;
background: linear-gradient(90deg, transparent, rgba(0,217,255,.38), rgba(255,42,173,.38), transparent) !important;
opacity: .46 !important;
}
.smt-grand:not(#_) .smt-community .smt-section__header {
margin-bottom: clamp(26px, 2.8vw, 42px) !important;
}
@media (max-width: 989px) {
.smt-grand:not(#_) .smt-story {
width: min(100% - 24px, 820px) !important;
margin-bottom: 18px !important;
}
.smt-grand:not(#_) .smt-community {
padding-top: 34px !important;
}
}
@media (max-width: 749px) {
.smt-grand:not(#_) .smt-story {
width: calc(100% - 18px) !important;
margin-top: 24px !important;
margin-bottom: 12px !important;
}
.smt-grand:not(#_) .smt-story::after {
display: none !important;
}
.smt-grand:not(#_) .smt-community {
padding-top: 28px !important;
}
}

@media (max-width: 749px) {
.smt-grand:not(#_) .smt-hero { min-height:auto !important; overflow:clip !important; background:#03040a; }
.smt-grand:not(#_) .smt-hero__backdrop { opacity:.78; }
.smt-grand:not(#_) .smt-hero__background-image { object-position:58% center !important; filter:saturate(.92) contrast(1.12) brightness(.40) !important; transform:scale(1.04) !important; }
.smt-grand:not(#_) .smt-hero__wash { background:linear-gradient(to bottom,rgba(2,3,8,.78) 0%,rgba(2,3,8,.82) 42%,rgba(2,3,8,.94) 73%,#03040a 100%),linear-gradient(90deg,rgba(2,3,8,.88),rgba(2,3,8,.34) 58%,rgba(2,3,8,.72)) !important; }
.smt-grand:not(#_) .smt-hero__light,
.smt-grand:not(#_) .smt-hero__cursor-light,
.smt-grand:not(#_) .smt-hero__platform,
.smt-grand:not(#_) .smt-hero__stage-halo { display:none !important; }
.smt-grand:not(#_) .smt-hero__layout { display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:min(100% - 28px,560px) !important; min-height:auto !important; padding:42px 0 38px !important; gap:30px !important; }
.smt-grand:not(#_) .smt-hero__copy { width:100% !important; max-width:none !important; min-width:0 !important; padding:0 !important; text-align:left !important; overflow:visible !important; }
.smt-grand:not(#_) .smt-hero__terminal { width:100% !important; max-width:100% !important; margin-bottom:18px !important; }
.smt-grand:not(#_) .smt-hero .smt-eyebrow { max-width:100% !important; margin-bottom:12px !important; font-size:.62rem !important; line-height:1.5 !important; letter-spacing:.15em !important; }
.smt-grand:not(#_) .smt-hero__heading { width:100% !important; max-width:100% !important; font-size:clamp(2.75rem,13.1vw,4.15rem) !important; line-height:.88 !important; letter-spacing:-.055em !important; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important; text-wrap:balance !important; }
.smt-grand:not(#_) .smt-hero__heading span,
.smt-grand:not(#_) .smt-hero__heading em { display:block !important; width:auto !important; max-width:100% !important; overflow-wrap:normal !important; word-break:keep-all !important; white-space:normal !important; }
.smt-grand:not(#_) .smt-hero__text { width:100% !important; max-width:34rem !important; margin-top:18px !important; color:rgba(255,255,255,.82) !important; font-size:.96rem !important; line-height:1.62 !important; }
.smt-grand:not(#_) .smt-hero__tagline { margin-top:16px !important; font-size:.58rem !important; line-height:1.55 !important; letter-spacing:.15em !important; }
.smt-grand:not(#_) .smt-hero__actions { display:grid !important; grid-template-columns:1fr !important; width:100% !important; gap:10px !important; margin-top:22px !important; }
.smt-grand:not(#_) .smt-hero__actions .smt-button { width:100% !important; min-height:52px !important; justify-content:center !important; font-size:.65rem !important; }
.smt-grand:not(#_) .smt-hero__stage { position:relative !important; inset:auto !important; display:block !important; width:100% !important; height:clamp(330px,92vw,475px) !important; min-height:0 !important; perspective:1200px !important; overflow:visible !important; transform:none !important; }
.smt-grand:not(#_) .smt-hero-card { position:absolute !important; top:50% !important; height:88% !important; margin:0 !important; transform-style:preserve-3d !important; }
.smt-grand:not(#_) .smt-hero-card--left { left:-3% !important; width:42% !important; z-index:1 !important; transform:translateY(-50%) rotateY(8deg) rotateZ(-2.5deg) !important; }
.smt-grand:not(#_) .smt-hero-card--center { left:50% !important; width:48% !important; z-index:3 !important; transform:translate(-50%,-50%) translateZ(24px) !important; }
.smt-grand:not(#_) .smt-hero-card--right { right:-3% !important; width:42% !important; z-index:1 !important; transform:translateY(-50%) rotateY(-8deg) rotateZ(2.5deg) !important; }
.smt-grand:not(#_) .smt-hero-card__float,
.smt-grand:not(#_) .smt-hero-card__frame { width:100% !important; height:100% !important; }
.smt-grand:not(#_) .smt-hero-card__float { animation-duration:9s !important; }
.smt-grand:not(#_) .smt-hero-card__frame { border-radius:18px !important; box-shadow:0 28px 65px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.12),0 0 28px color-mix(in srgb,var(--card-accent) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.20) !important; }
.smt-grand:not(#_) .smt-hero-card__meta,
.smt-grand:not(#_) .smt-hero-card__partner-kicker,
.smt-grand:not(#_) .smt-hero-card__partner-copy { font-size:.42rem !important; }
.smt-grand:not(#_) .smt-hero__scroll { display:none !important; }
.smt-grand:not(#_) .smt-particles { opacity:.35 !important; }
}
@media (max-width:390px) {
.smt-grand:not(#_) .smt-hero__layout { width:min(100% - 22px,520px) !important; }
.smt-grand:not(#_) .smt-hero__heading { font-size:clamp(2.45rem,12.6vw,3.45rem) !important; }
.smt-grand:not(#_) .smt-hero__stage { height:325px !important; }
}

.smt-grand:not(#_) .smt-drops{
--drops-card-radius:28px;
--drops-card-gap:22px;
--drops-stage-glow:rgba(122,70,255,.34);
position:relative;
min-height:clamp(780px,48vw,940px);
padding:clamp(64px,5vw,92px) 0 clamp(54px,4vw,76px);
overflow:clip;
isolation:isolate;
}
.smt-grand:not(#_) .smt-drops::before{
content:"";
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
background:
radial-gradient(ellipse 44% 26% at 50% 57%,rgba(120,67,255,.17),transparent 72%),
linear-gradient(90deg,rgba(255,42,173,.045),transparent 24%,transparent 76%,rgba(0,217,255,.045));
}
.smt-grand:not(#_) .smt-drops__veil{
background:
linear-gradient(180deg,rgba(2,3,10,.34) 0%,rgba(2,3,10,.09) 26%,rgba(2,3,10,.08) 62%,rgba(2,3,10,.56) 100%),
radial-gradient(ellipse 66% 58% at 50% 46%,transparent 0 46%,rgba(1,2,8,.34) 82%,rgba(1,2,8,.68) 100%) !important;
}
.smt-grand:not(#_) .smt-drops__shell{
width:min(1460px,calc(100% - 64px));
}
.smt-grand:not(#_) .smt-drops__header{
position:relative;
z-index:7;
align-items:end;
margin-bottom:clamp(30px,3vw,54px);
}
.smt-grand:not(#_) .smt-drops__heading-wrap{
position:relative;
padding-left:20px;
}
.smt-grand:not(#_) .smt-drops__heading-wrap::before{
content:"";
position:absolute;
left:0;
top:2px;
width:2px;
height:100%;
background:linear-gradient(180deg,#00d9ff 0%,#ff2aad 100%);
box-shadow:0 0 18px rgba(0,217,255,.48),0 0 26px rgba(255,42,173,.32);
}
.smt-grand:not(#_) .smt-drops__heading-wrap::after{
content:"";
position:absolute;
left:0;
top:-13px;
width:clamp(120px,17vw,250px);
height:1px;
background:linear-gradient(90deg,#00d9ff,rgba(255,42,173,.64),transparent);
box-shadow:0 0 12px rgba(0,217,255,.42);
}
.smt-grand:not(#_) .smt-drops__eyebrow{
margin-bottom:9px;
color:#59eaff !important;
text-shadow:0 0 14px rgba(0,217,255,.42);
letter-spacing:.24em;
}
.smt-grand:not(#_) .smt-drops .smt-section__title{
margin:0;
font-size:clamp(4.4rem,6.4vw,7.3rem);
line-height:.82;
letter-spacing:-.055em;
background:linear-gradient(96deg,#ffffff 0%,#dff1ff 28%,#f4ddff 54%,#ffffff 78%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
filter:drop-shadow(0 8px 24px rgba(109,74,210,.16));
}
.smt-grand:not(#_) .smt-drops__intro{
max-width:640px;
margin-top:16px;
color:rgba(255,255,255,.74);
font-size:clamp(.9rem,1vw,1.05rem);
letter-spacing:.015em;
}
.smt-grand:not(#_) .smt-drops__intro em,
.smt-grand:not(#_) .smt-drops__intro strong{
color:#ff62cf;
font-style:normal;
font-weight:600;
}
.smt-grand:not(#_) .smt-drops__all{
padding-bottom:10px;
border-bottom:1px solid transparent;
border-image:linear-gradient(90deg,#ff2aad,#00d9ff) 1;
text-shadow:0 0 12px rgba(255,255,255,.12);
}
.smt-grand:not(#_) .smt-drops__stage{
position:relative;
z-index:6;
padding:0 72px 74px;
perspective:2200px;
}
.smt-grand:not(#_) .smt-drops__viewport{
overflow:visible;
padding:30px 6px 48px;
}
.smt-grand:not(#_) .smt-drops__track{
gap:var(--drops-card-gap);
align-items:end;
transform-style:preserve-3d;
}
.smt-grand:not(#_) .smt-product{
position:relative;
overflow:visible;
min-height:540px;
transform-style:preserve-3d;
transition:transform .55s cubic-bezier(.18,.78,.25,1),filter .45s ease;
filter:drop-shadow(0 26px 24px rgba(0,0,0,.38));
}
.smt-grand:not(#_) .smt-product::before{
content:"";
position:absolute;
left:10%;
right:10%;
bottom:-38px;
height:54px;
z-index:-3;
border-radius:50%;
background:radial-gradient(ellipse at center,rgba(255,255,255,.15),rgba(255,42,173,.28) 24%,rgba(0,217,255,.17) 52%,transparent 76%);
filter:blur(13px);
transform:rotateX(72deg);
opacity:.8;
transition:opacity .45s ease,transform .45s ease,filter .45s ease;
}
.smt-grand:not(#_) .smt-product::after{
content:"";
position:absolute;
inset:8px -11px -17px 11px;
z-index:-2;
border-radius:calc(var(--drops-card-radius) + 4px);
border:1px solid rgba(255,255,255,.13);
background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 28%,rgba(11,14,30,.72) 62%,rgba(3,5,14,.94));
box-shadow:18px 24px 50px rgba(0,0,0,.62),0 0 28px rgba(128,69,255,.14),inset 0 1px 0 rgba(255,255,255,.10);
transform:translateZ(-34px);
}
.smt-grand:not(#_) .smt-product__chassis{
inset:16px -15px -20px 15px !important;
border-radius:calc(var(--drops-card-radius) + 6px) !important;
border:1px solid rgba(255,255,255,.12) !important;
background:linear-gradient(145deg,rgba(255,42,173,.15),rgba(80,52,160,.08) 44%,rgba(0,217,255,.14)),rgba(3,5,14,.88) !important;
box-shadow:20px 28px 58px rgba(0,0,0,.64),0 0 26px rgba(255,42,173,.13),0 0 32px rgba(0,217,255,.10),inset 0 1px 0 rgba(255,255,255,.09) !important;
transform:translateZ(-50px) !important;
}
.smt-grand:not(#_) .smt-product__inner{
height:100%;
border-radius:var(--drops-card-radius) !important;
border:1px solid rgba(255,255,255,.28) !important;
overflow:hidden;
background:
linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 22%,rgba(10,13,28,.76) 58%,rgba(3,5,14,.94)),
linear-gradient(115deg,rgba(255,42,173,.10),transparent 42%,rgba(0,217,255,.09)) !important;
-webkit-backdrop-filter:blur(24px) saturate(1.25);
backdrop-filter:blur(24px) saturate(1.25);
box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 1px 0 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.06),0 34px 80px rgba(0,0,0,.54),0 0 26px rgba(122,67,255,.13) !important;
}
.smt-grand:not(#_) .smt-product__inner::before{
content:"";
position:absolute;
inset:1px;
z-index:0;
border-radius:calc(var(--drops-card-radius) - 1px);
pointer-events:none;
background:linear-gradient(116deg,rgba(255,255,255,.14),transparent 20%,transparent 74%,rgba(255,255,255,.04));
}
.smt-grand:not(#_) .smt-product__edge{
inset:-1px !important;
opacity:1 !important;
border-radius:var(--drops-card-radius) !important;
filter:drop-shadow(0 0 10px rgba(255,42,173,.26)) drop-shadow(0 0 13px rgba(0,217,255,.20));
}
.smt-grand:not(#_) .smt-product__glow{
opacity:.55 !important;
filter:blur(30px) !important;
}
.smt-grand:not(#_) .smt-product__shine{
display:block !important;
position:absolute;
inset:-35% auto -35% -45%;
width:36%;
z-index:7;
pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),rgba(255,255,255,.03),transparent);
transform:skewX(-17deg) translateX(-220%);
opacity:0;
}
.smt-grand:not(#_) .smt-product__media{
margin:12px 12px 0;
border-radius:calc(var(--drops-card-radius) - 9px) !important;
border:1px solid rgba(255,255,255,.10) !important;
overflow:hidden;
background:radial-gradient(circle at 50% 38%,rgba(113,73,178,.40),rgba(15,18,34,.84) 48%,rgba(4,6,14,.96) 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -40px 62px rgba(0,0,0,.34),0 18px 36px rgba(0,0,0,.30) !important;
}
.smt-grand:not(#_) .smt-product__media::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 28%),radial-gradient(circle at 50% 93%,rgba(123,77,215,.17),transparent 40%);
z-index:4;
}
.smt-grand:not(#_) .smt-product__image{
background:transparent !important;
mix-blend-mode:multiply;
filter:brightness(1.24) contrast(1.08) saturate(1.05) drop-shadow(0 18px 20px rgba(0,0,0,.28)) !important;
transform:scale(1.025);
transition:transform .6s cubic-bezier(.2,.78,.28,1),opacity .45s ease,filter .45s ease;
}
.smt-grand:not(#_) .smt-product__media-shade{
background:linear-gradient(180deg,transparent 55%,rgba(3,5,14,.12) 76%,rgba(3,5,14,.52) 100%) !important;
}
.smt-grand:not(#_) .smt-product__badge{
top:18px;
left:18px;
padding:8px 14px;
border:1px solid rgba(255,255,255,.22);
border-radius:999px;
color:#fff;
background:rgba(5,7,18,.66);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px rgba(126,68,255,.14);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
.smt-grand:not(#_) .smt-product__body{
position:relative;
z-index:3;
padding:20px 20px 18px;
}
.smt-grand:not(#_) .smt-product__copy p{
margin-bottom:8px;
color:#50eaff !important;
letter-spacing:.18em;
text-shadow:0 0 10px rgba(0,217,255,.36);
}
.smt-grand:not(#_) .smt-product__copy h3{
font-size:clamp(1rem,1.08vw,1.2rem);
line-height:1.22;
color:#fff;
text-shadow:0 2px 15px rgba(0,0,0,.42);
}
.smt-grand:not(#_) .smt-product__price{
font-size:clamp(1.35rem,1.55vw,1.75rem);
line-height:1;
font-weight:700;
color:#fff;
text-shadow:0 0 18px rgba(255,255,255,.14);
}
.smt-grand:not(#_) .smt-product__button{
min-height:54px;
border:1px solid transparent !important;
border-radius:10px;
color:#fff;
background:
linear-gradient(#080b18,#080b18) padding-box,
linear-gradient(100deg,#ff2aad,#714dff 48%,#00d9ff) border-box !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.26),0 0 22px rgba(122,67,255,.10);
transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;
}
.smt-grand:not(#_) .smt-product__button:hover{
transform:translateY(-2px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 14px 34px rgba(0,0,0,.32),0 0 26px rgba(255,42,173,.19),0 0 26px rgba(0,217,255,.15);
}
.smt-grand:not(#_) .smt-product:nth-child(4n+1){transform:perspective(1800px) rotateY(7deg) rotateZ(-.5deg) translateY(18px) translateZ(-22px);transform-origin:right center}
.smt-grand:not(#_) .smt-product:nth-child(4n+2){transform:perspective(1800px) rotateY(2deg) translateY(4px) translateZ(18px) scale(1.015);transform-origin:right center;z-index:3}
.smt-grand:not(#_) .smt-product:nth-child(4n+3){transform:perspective(1800px) rotateY(-2deg) translateY(0) translateZ(34px) scale(1.035);transform-origin:left center;z-index:4}
.smt-grand:not(#_) .smt-product:nth-child(4n+4){transform:perspective(1800px) rotateY(-7deg) rotateZ(.5deg) translateY(18px) translateZ(-22px);transform-origin:left center}
.smt-grand:not(#_) .smt-product:hover{
z-index:12;
transform:perspective(1800px) translateY(-22px) translateZ(68px) rotateY(0) rotateZ(0) scale(1.045) !important;
filter:drop-shadow(0 36px 38px rgba(0,0,0,.48));
}
.smt-grand:not(#_) .smt-product:hover::before{
opacity:1;
filter:blur(15px);
transform:rotateX(72deg) scaleX(1.12);
}
.smt-grand:not(#_) .smt-product:hover .smt-product__inner{
border-color:rgba(255,255,255,.42) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 48px 112px rgba(0,0,0,.62),0 0 40px rgba(255,42,173,.18),0 0 44px rgba(0,217,255,.15) !important;
}
.smt-grand:not(#_) .smt-product:hover .smt-product__shine{
opacity:1;
animation:smtDropsLuxurySweep 1.15s ease forwards;
}
.smt-grand:not(#_) .smt-product:hover .smt-product__image--primary{transform:scale(1.075)}
.smt-grand:not(#_) .smt-product:hover .smt-product__image--secondary{transform:scale(1.075)}
.smt-grand:not(#_) .smt-drops__floor{
left:50% !important;
bottom:20px !important;
width:min(88%,1320px) !important;
height:72px !important;
border:0 !important;
opacity:.62 !important;
background:radial-gradient(ellipse at center,rgba(255,255,255,.12),rgba(255,42,173,.22) 24%,rgba(105,70,255,.18) 42%,rgba(0,217,255,.15) 58%,transparent 76%) !important;
filter:blur(12px) !important;
transform:translateX(-50%) perspective(1000px) rotateX(72deg) !important;
box-shadow:none !important;
}
.smt-grand:not(#_) .smt-drops__dots{margin-top:-10px}
.smt-grand:not(#_) .smt-drops__dot{box-shadow:0 0 10px rgba(0,217,255,.18)}
.smt-grand:not(#_) .smt-drops__dot.is-active{box-shadow:0 0 14px rgba(255,42,173,.44)}
@keyframes smtDropsLuxurySweep{0%{transform:skewX(-17deg) translateX(-220%)}100%{transform:skewX(-17deg) translateX(650%)}}
@media (max-width:1199px){
.smt-grand:not(#_) .smt-drops__shell{width:min(100% - 36px,1180px)}
.smt-grand:not(#_) .smt-drops__stage{padding-inline:54px}
.smt-grand:not(#_) .smt-product{min-height:520px}
}
@media (max-width:749px){
.smt-grand:not(#_) .smt-drops{
min-height:auto !important;
padding:62px 0 74px !important;
content-visibility:auto;
contain-intrinsic-size:900px;
}
.smt-grand:not(#_) .smt-drops::before,
.smt-grand:not(#_) .smt-drops__atmosphere,
.smt-grand:not(#_) .smt-drops__floor,
.smt-grand:not(#_) .smt-product::before,
.smt-grand:not(#_) .smt-product::after,
.smt-grand:not(#_) .smt-product__chassis,
.smt-grand:not(#_) .smt-product__glow,
.smt-grand:not(#_) .smt-product__shine,
.smt-grand:not(#_) .smt-product__image--secondary{display:none !important}
.smt-grand:not(#_) .smt-drops__shell{width:min(100% - 24px,560px) !important}
.smt-grand:not(#_) .smt-drops__header{display:block !important;margin-bottom:26px !important}
.smt-grand:not(#_) .smt-drops__heading-wrap{padding-left:14px !important}
.smt-grand:not(#_) .smt-drops .smt-section__title{font-size:clamp(2.8rem,14vw,4.25rem) !important;line-height:.88 !important}
.smt-grand:not(#_) .smt-drops__intro{font-size:.86rem !important;line-height:1.55 !important}
.smt-grand:not(#_) .smt-drops__all{display:inline-flex !important;margin-top:18px !important}
.smt-grand:not(#_) .smt-drops__stage{padding:0 !important;perspective:none !important}
.smt-grand:not(#_) .smt-drops__viewport{overflow-x:auto !important;overflow-y:hidden !important;padding:8px 0 20px !important;scroll-snap-type:x mandatory !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior-x:contain !important}
.smt-grand:not(#_) .smt-drops__track{display:flex !important;gap:14px !important;transform:none !important;will-change:auto !important}
.smt-grand:not(#_) .smt-product,
.smt-grand:not(#_) .smt-product:nth-child(n){flex:0 0:min(84vw,340px) !important;min-height:500px !important;transform:none !important;filter:none !important;scroll-snap-align:center !important;transition:none !important;will-change:auto !important}
.smt-grand:not(#_) .smt-product__inner{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(7,10,23,.96) 40%,rgba(3,5,14,.99)) !important;border-color:rgba(255,255,255,.18) !important;box-shadow:0 18px 42px rgba(0,0,0,.42),0 0 0 1px rgba(0,217,255,.08) !important}
.smt-grand:not(#_) .smt-product__media{margin:10px 10px 0 !important}
.smt-grand:not(#_) .smt-product__image{mix-blend-mode:multiply !important;filter:brightness(1.18) contrast(1.06) !important;transform:none !important;transition:none !important}
.smt-grand:not(#_) .smt-product__badge{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.smt-grand:not(#_) .smt-product__button{box-shadow:none !important}
.smt-grand:not(#_) .smt-drops__nav,.smt-grand:not(#_) .smt-drops__dots{display:none !important}
}

/* V7.5.1 MOBILE HOTTEST DROPS WIDTH FIX — authoritative final override */
@media (max-width:749px){
.smt-grand:not(#_) .smt-drops{overflow:hidden;padding:42px 0 58px!important}
.smt-grand:not(#_) .smt-drops__shell{width:100%!important;max-width:none!important;padding:0 0 0 22px!important}
.smt-grand:not(#_) .smt-drops__header{padding-right:22px!important;margin-bottom:20px!important}
.smt-grand:not(#_) .smt-drops__header h2{font-size:clamp(3.2rem,16vw,4.8rem)!important;line-height:.82!important;letter-spacing:-.055em!important}
.smt-grand:not(#_) .smt-drops__intro{font-size:.98rem!important;line-height:1.48!important}
.smt-grand:not(#_) .smt-drops__all{margin-top:18px!important}
.smt-grand:not(#_) .smt-drops__stage{width:100%!important;padding:0!important;overflow:visible!important}
.smt-grand:not(#_) .smt-drops__viewport{width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;margin:0!important;padding:12px 22px 28px 0!important;scroll-snap-type:x mandatory!important;scroll-padding-left:0!important;-webkit-overflow-scrolling:touch!important}
.smt-grand:not(#_) .smt-drops__track{display:flex!important;grid-template-columns:none!important;grid-auto-columns:none!important;gap:16px!important;width:max-content!important;transform:none!important}
.smt-grand:not(#_) .smt-product,.smt-grand:not(#_) .smt-product:nth-child(n){flex:0 0 min(82vw,340px)!important;width:min(82vw,340px)!important;min-width:min(82vw,340px)!important;max-width:340px!important;scroll-snap-align:start!important;transform:none!important}
.smt-grand:not(#_) .smt-product__inner{min-height:0!important;height:auto!important;border-radius:24px!important}
.smt-grand:not(#_) .smt-product__media{aspect-ratio:1/1!important;min-height:0!important;margin:10px!important}
.smt-grand:not(#_) .smt-product__body{min-height:238px!important;padding:14px 16px 16px!important}
.smt-grand:not(#_) .smt-product__info{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:start!important}
.smt-grand:not(#_) .smt-product__copy{min-width:0!important}
.smt-grand:not(#_) .smt-product__copy h3{font-size:1.06rem!important;line-height:1.28!important;overflow-wrap:anywhere!important;word-break:normal!important;hyphens:auto!important}
.smt-grand:not(#_) .smt-product__price{font-size:1rem!important;white-space:nowrap!important}
.smt-grand:not(#_) .smt-product__form{padding-top:16px!important}
.smt-grand:not(#_) .smt-product__button,.smt-grand:not(#_) .smt-product__soldout{min-height:50px!important;width:100%!important;padding:0 14px!important}
.smt-grand:not(#_) .smt-product__badge{max-width:calc(100% - 24px)!important;white-space:nowrap!important}
}

/* ========================================================================== 
   MOBILE STARTUP STABILITY V2
   Static premium presentation on phones; desktop visuals remain unchanged.
   ========================================================================== */
.smt-grand.is-runtime-paused *,
.smt-grand.is-runtime-paused *::before,
.smt-grand.is-runtime-paused *::after {
  animation-play-state: paused !important;
}

@media (max-width: 749px), (max-width: 900px) and (pointer: coarse) {
  .smt-grand {
    contain: layout style;
  }

  /* Fixed, full-page effects are the largest mobile compositor cost. */
  .smt-grand .smt-pagefx,
  .smt-grand .smt-particles,
  .smt-grand .smt-hero__light,
  .smt-grand .smt-hero__cursor-light,
  .smt-grand .smt-newsletter__glow {
    display: none !important;
  }

  /* Keep the premium artwork, but stop all continuously moving scene layers. */
  .smt-grand .smt-worlds__nebula,
  .smt-grand .smt-worlds__smoke,
  .smt-grand .smt-worlds__beam,
  .smt-grand .smt-worlds__floor-reflection,
  .smt-grand .smt-worlds__scanburst,
  .smt-grand .smt-worlds__spark,
  .smt-grand .smt-worlds__data,
  .smt-grand .smt-worlds__glitchfield,
  .smt-grand .smt-drops__atmosphere,
  .smt-grand .smt-drops__floor,
  .smt-grand .smt-story__media-light {
    display: none !important;
  }

  .smt-grand .smt-worlds::before,
  .smt-grand .smt-worlds::after,
  .smt-grand .smt-worlds__backdrop-picture,
  .smt-grand .smt-worlds__floor,
  .smt-grand .smt-worlds__horizon,
  .smt-grand .smt-portal__link,
  .smt-grand .smt-portal__edge-runner,
  .smt-grand .smt-portal__shine,
  .smt-grand .smt-portal__effect,
  .smt-grand .smt-story__media::after,
  .smt-grand .smt-hero-card__float {
    animation: none !important;
  }

  .smt-grand .smt-worlds__backdrop-picture {
    transform: none !important;
    filter: brightness(.44) saturate(1.04) contrast(1.05) !important;
    will-change: auto !important;
  }

  /* Remove expensive real-time glass blur while preserving borders and glow. */
  .smt-grand .smt-hero-card__frame,
  .smt-grand .smt-trust,
  .smt-grand .smt-portal__face,
  .smt-grand .smt-product,
  .smt-grand .smt-product__inner,
  .smt-grand .smt-product__badge,
  .smt-grand .smt-story__content,
  .smt-grand .smt-ugc,
  .smt-grand .smt-newsletter__inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .smt-grand .smt-hero-card,
  .smt-grand .smt-hero-card__frame,
  .smt-grand .smt-portal,
  .smt-grand .smt-portal__link,
  .smt-grand .smt-product,
  .smt-grand .smt-product__inner,
  .smt-grand .smt-ugc {
    will-change: auto !important;
  }

  /* Do not render below-fold scenes until the browser approaches them. */
  .smt-grand .smt-worlds,
  .smt-grand .smt-drops,
  .smt-grand .smt-story,
  .smt-grand .smt-community,
  .smt-grand .smt-newsletter {
    content-visibility: auto;
    contain: layout paint style;
  }

  .smt-grand .smt-worlds { contain-intrinsic-size: auto 980px; }
  .smt-grand .smt-drops { contain-intrinsic-size: auto 760px; }
  .smt-grand .smt-story { contain-intrinsic-size: auto 560px; }
  .smt-grand .smt-community { contain-intrinsic-size: auto 880px; }
  .smt-grand .smt-newsletter { contain-intrinsic-size: auto 520px; }

  /* Mobile cards stay static; native horizontal swipe handles Hottest Drops. */
  .smt-grand .smt-product,
  .smt-grand .smt-product:nth-child(n),
  .smt-grand .smt-portal,
  .smt-grand .smt-portal:nth-child(n) {
    transition: none !important;
  }
}


/* ========================================================================
   MOBILE RAPID-SCROLL RESCUE V3
   Avoids a one-frame layout/decode spike when Hottest Drops is reached fast.
   ======================================================================== */
@media (max-width: 749px) {
  .smt-grand .smt-worlds,
  .smt-grand .smt-drops {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  .smt-grand .smt-product__picture,
  .smt-grand .smt-story__picture {
    display: contents;
  }

  .smt-grand .smt-product__image[data-smt-mobile-deferred] {
    opacity: .76 !important;
    transition: opacity .18s ease !important;
  }

  .smt-grand .smt-product__image[data-smt-mobile-deferred].is-mobile-loading {
    opacity: .84 !important;
  }

  .smt-grand .smt-product__image[data-smt-mobile-deferred].is-mobile-loaded {
    opacity: 1 !important;
  }

  .smt-grand .smt-product__picture--secondary {
    display: none !important;
  }

  .smt-grand .smt-drops__background-image,
  .smt-grand .smt-product__image,
  .smt-grand .smt-story__image {
    content-visibility: visible !important;
  }
}
/* =========================================================
   COLLECTION WORLDS — FINAL RESPONSIVE BACKGROUND
   ========================================================= */

.smt-worlds {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #050611;
}

.smt-worlds__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.smt-worlds__backdrop-picture {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--smt-worlds-bg-opacity, 0.55);
  visibility: visible;
  overflow: hidden;
  transform: scale(1.02);
}

.smt-worlds__backdrop-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--smt-worlds-bg-position, center) center;
  filter:
    brightness(0.62)
    contrast(1.06)
    saturate(0.92);
}

.smt-worlds__backdrop-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 4, 14, 0.34) 0%,
      rgba(3, 4, 14, 0.08) 34%,
      rgba(3, 4, 14, 0.16) 68%,
      rgba(3, 4, 14, 0.52) 100%
    ),
    radial-gradient(
      ellipse at 50% 45%,
      transparent 26%,
      rgba(0, 0, 0, 0.28) 100%
    );
}

.smt-worlds__backdrop-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(
      circle at 10% 48%,
      rgba(0, 210, 255, 0.14),
      transparent 38%
    ),
    radial-gradient(
      circle at 90% 46%,
      rgba(255, 36, 184, 0.14),
      transparent 38%
    );
}

.smt-worlds__shell,
.smt-worlds__content,
.smt-worlds__stage {
  position: relative;
  z-index: 2;
  background: transparent;
}

@media screen and (max-width: 749px) {
  .smt-worlds__backdrop-picture {
    transform: scale(1.01);
    opacity: var(--smt-worlds-bg-opacity, 0.58);
  }

  .smt-worlds__backdrop-image {
    object-position: center center;
    filter:
      brightness(0.58)
      contrast(1.04)
      saturate(0.9);
  }

  .smt-worlds__backdrop-picture::after {
    background:
      linear-gradient(
        180deg,
        rgba(3, 4, 14, 0.24) 0%,
        rgba(3, 4, 14, 0.05) 38%,
        rgba(3, 4, 14, 0.18) 72%,
        rgba(3, 4, 14, 0.54) 100%
      );
  }

  .smt-worlds__backdrop-wash {
    opacity: 0.28;
  }
}
/* =========================================================
 /* =========================================================
   SMT WORLDS BACKGROUND — FINAL SPECIFICITY FIX
   ========================================================= */

.smt-grand:not(#_) .smt-worlds {
  background: #050611 !important;
}

/* Keep the background container behind the portal content */
.smt-grand:not(#_) .smt-worlds__atmosphere {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
}

/* Show the uploaded desktop/mobile picture */
.smt-grand:not(#_) .smt-worlds__backdrop-picture {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: var(--smt-worlds-bg-opacity, .85) !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Make the actual image visible */
.smt-grand:not(#_) .smt-worlds__backdrop-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--smt-worlds-bg-position, center) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter:
    brightness(.76)
    contrast(1.05)
    saturate(.96) !important;
}

/* Remove the heavy image-darkening overlay */
.smt-grand:not(#_) .smt-worlds__backdrop-picture::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      180deg,
      rgba(1, 2, 10, .30) 0%,
      rgba(2, 3, 12, .06) 30%,
      rgba(2, 3, 12, .12) 70%,
      rgba(1, 2, 9, .45) 100%
    ) !important;
}

/* Keep a light cyan/pink atmosphere without hiding the photo */
.smt-grand:not(#_) .smt-worlds__backdrop-wash {
  display: block !important;
  opacity: .22 !important;
  background:
    radial-gradient(
      circle at 6% 52%,
      rgba(0, 217, 255, .22),
      transparent 36%
    ),
    radial-gradient(
      circle at 94% 50%,
      rgba(255, 42, 173, .22),
      transparent 36%
    ) !important;
}

/* Prevent the section pseudo layers from covering the image */
.smt-grand:not(#_) .smt-worlds::before {
  opacity: .24 !important;
}

.smt-grand:not(#_) .smt-worlds::after {
  opacity: .08 !important;
}

/* Ensure all foreground content stays above the image */
.smt-grand:not(#_) .smt-worlds__shell,
.smt-grand:not(#_) .smt-worlds__header,
.smt-grand:not(#_) .smt-worlds__grid,
.smt-grand:not(#_) .smt-worlds__status {
  position: relative !important;
  z-index: 5 !important;
}
/* =========================================================
   SMT BOOT-UP VISIBILITY REPAIR
   Restores mobile and desktop boot animation stages
   ========================================================= */

.smt-grand:not(#_) .smt-boot {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  width: 100dvw !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(105, 42, 200, .22),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 82%,
      rgba(0, 217, 255, .10),
      transparent 35%
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 42, 173, .10),
      transparent 34%
    ),
    #020207 !important;
}

/* The full overlay becomes visible when JavaScript mounts it */
.smt-grand:not(#_) .smt-boot.is-mounted {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep every important internal container rendered */
.smt-grand:not(#_) .smt-boot.is-mounted .smt-boot__inner,
.smt-grand:not(#_) .smt-boot.is-mounted .smt-boot__topline,
.smt-grand:not(#_) .smt-boot.is-mounted .smt-boot__skip,
.smt-grand:not(#_) .smt-boot.is-mounted .smt-boot__progress {
  visibility: visible !important;
}

.smt-grand:not(#_) .smt-boot__inner {
  z-index: 20 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.smt-grand:not(#_) .smt-boot__topline,
.smt-grand:not(#_) .smt-boot__skip {
  z-index: 30 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------
   STAGE 1 — SYSTEM STATUS LINES
   --------------------------------------------------------- */

.smt-grand:not(#_) .smt-boot__status {
  display: block !important;
  z-index: 24 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.smt-grand:not(#_)
.smt-boot.is-running:not(.is-logo-stage)
.smt-boot__status {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

.smt-grand:not(#_)
.smt-boot.is-logo-stage
.smt-boot__status {
  visibility: visible !important;
  opacity: .10 !important;
  transform: translate(-50%, -57%) scale(.94) !important;
}

.smt-grand:not(#_) .smt-boot__line {
  display: block !important;
  visibility: visible !important;
  color: rgba(255, 255, 255, .62) !important;
}

.smt-grand:not(#_) .smt-boot__line.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
  transform: translateY(0) !important;
}

/* ---------------------------------------------------------
   STAGE 2 — LOGO / WORDMARK
   --------------------------------------------------------- */

.smt-grand:not(#_) .smt-boot__mark {
  display: block !important;
  z-index: 26 !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.smt-grand:not(#_)
.smt-boot.is-logo-stage
.smt-boot__mark {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.smt-grand:not(#_) .smt-boot__logo-image,
.smt-grand:not(#_) .smt-boot__wordmark,
.smt-grand:not(#_) .smt-boot__monogram {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.smt-grand:not(#_) .smt-boot__logo-image {
  object-fit: contain !important;
}

/* ---------------------------------------------------------
   STAGE 3 — WELCOME MESSAGE
   --------------------------------------------------------- */

.smt-grand:not(#_) .smt-boot__welcome {
  display: block !important;
  z-index: 28 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smt-grand:not(#_)
.smt-boot.is-welcome-stage
.smt-boot__welcome {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.smt-grand:not(#_)
.smt-boot.is-welcome-stage
.smt-boot__mark {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   STAGE 4 — ENTER BUTTON
   --------------------------------------------------------- */

.smt-grand:not(#_) .smt-boot__enter {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.smt-grand:not(#_)
.smt-boot.is-enter-stage
.smt-boot__enter {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ---------------------------------------------------------
   PROGRESS BAR
   --------------------------------------------------------- */

.smt-grand:not(#_) .smt-boot__progress {
  z-index: 32 !important;
  display: block !important;
  height: 2px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: rgba(255, 255, 255, .10) !important;
}

.smt-grand:not(#_) .smt-boot__progress span {
  display: block !important;
  height: 100% !important;
}

/* Preserve the closing fade */
.smt-grand:not(#_) .smt-boot.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   MOBILE BOOT LAYOUT
   ========================================================= */

@media (max-width: 680px) {
  .smt-grand:not(#_) .smt-boot {
    padding:
      max(18px, env(safe-area-inset-top))
      14px
      max(18px, env(safe-area-inset-bottom)) !important;
  }

  .smt-grand:not(#_) .smt-boot__inner {
    width: calc(100vw - 28px) !important;
    width: calc(100dvw - 28px) !important;
    min-height: calc(100svh - 36px) !important;
  }

  .smt-grand:not(#_) .smt-boot__topline {
    top: 12px !important;
    width: 78% !important;
    font-size: .58rem !important;
    line-height: 1.5 !important;
  }

  .smt-grand:not(#_) .smt-boot__skip {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 18px !important;
    font-size: .56rem !important;
  }

  .smt-grand:not(#_) .smt-boot__status {
    top: 44% !important;
    width: calc(100% - 24px) !important;
    padding: 22px 16px !important;
  }

  .smt-grand:not(#_) .smt-boot__line {
    margin: .48rem 0 !important;
    font-size: clamp(.88rem, 4vw, 1.15rem) !important;
    line-height: 1.3 !important;
  }

  .smt-grand:not(#_) .smt-boot__mark {
    top: 43% !important;
    width: min(270px, 68vw) !important;
    padding: 12px !important;
  }

  .smt-grand:not(#_)
  .smt-boot.is-welcome-stage
  .smt-boot__mark {
    top: 23% !important;
    width: min(220px, 54vw) !important;
  }

  .smt-grand:not(#_) .smt-boot__welcome {
    top: 48% !important;
    width: calc(100% - 24px) !important;
  }

  .smt-grand:not(#_) .smt-boot__welcome h2 {
    font-size: clamp(2rem, 11vw, 3.15rem) !important;
    line-height: .92 !important;
  }

  .smt-grand:not(#_) .smt-boot__welcome-copy {
    max-width: 340px !important;
    margin: 14px auto 0 !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
  }

  .smt-grand:not(#_) .smt-boot__tagline {
    margin: 14px 0 18px !important;
    font-size: .57rem !important;
    letter-spacing: .13em !important;
    line-height: 1.5 !important;
  }

  .smt-grand:not(#_) .smt-boot__enter {
    min-height: 48px !important;
    padding-inline: 20px !important;
    font-size: .62rem !important;
  }

  .smt-grand:not(#_) .smt-boot__progress {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 48px) !important;
  }
}
/* =========================================================
   SMT BOOT PORTAL — TRUE VIEWPORT FIX (DESKTOP + MOBILE)
   Paste at the absolute bottom of smt-grand-entrance.css
   ========================================================= */

.smt-grand.smt-boot-portal:not(#_) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  isolation: isolate !important;
}

.smt-grand.smt-boot-portal:not(#_) .smt-boot {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.smt-grand.smt-boot-portal:not(#_) .smt-boot__inner {
  position: relative !important;
  width: min(1120px, calc(100vw - 48px)) !important;
  height: min(760px, calc(100dvh - 32px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1120px !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* The boot must remain viewport-sized even when the Shopify section or
   theme editor canvas has transforms, clipping, or containment applied. */
.smt-grand.smt-boot-portal:not(#_) .smt-boot.is-mounted {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 749px) {
  .smt-grand.smt-boot-portal:not(#_) .smt-boot__inner {
    width: calc(100vw - 20px) !important;
    width: calc(100dvw - 20px) !important;
    height: calc(100svh - 20px) !important;
    max-width: none !important;
    max-height: calc(100svh - 20px) !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__topline {
    top: max(12px, env(safe-area-inset-top)) !important;
    left: 12px !important;
    width: calc(100% - 106px) !important;
    font-size: .52rem !important;
    line-height: 1.35 !important;
    letter-spacing: .13em !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__skip {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    font-size: .54rem !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__status {
    top: 44% !important;
    left: 50% !important;
    width: calc(100% - 20px) !important;
    max-width: 390px !important;
    padding: 16px 12px !important;
    transform: translate(-50%, -50%) !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__line {
    margin: .4rem 0 !important;
    font-size: clamp(.76rem, 4vw, 1rem) !important;
    line-height: 1.25 !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__mark {
    top: 42% !important;
    left: 50% !important;
    width: min(240px, 62vw) !important;
    max-height: 24svh !important;
    transform: translate(-50%, -50%) !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__logo-image {
    width: 100% !important;
    height: auto !important;
    max-height: 24svh !important;
    object-fit: contain !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot.is-welcome-stage .smt-boot__mark {
    top: 22% !important;
    width: min(180px, 44vw) !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__welcome {
    top: 48% !important;
    left: 50% !important;
    width: calc(100% - 24px) !important;
    max-width: 370px !important;
    transform: translate(-50%, 0) !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__welcome h2 {
    font-size: clamp(1.7rem, 9vw, 2.65rem) !important;
    line-height: .94 !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__welcome-copy {
    max-width: 330px !important;
    margin: 9px auto 0 !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__tagline {
    margin: 9px 0 12px !important;
    font-size: .5rem !important;
    line-height: 1.4 !important;
    letter-spacing: .1em !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__enter {
    min-height: 42px !important;
    padding-inline: 16px !important;
    font-size: .57rem !important;
  }

  .smt-grand.smt-boot-portal:not(#_) .smt-boot__progress {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: calc(100% - 36px) !important;
  }
}