/* Sculpted studio surfaces. Content, assets and form behavior stay unchanged. */
:root {
    --premium-ease: cubic-bezier(.2, .75, .25, 1);
}

/* A quiet, metallic frame around the immersive scene. */
.site-header,
.immersive-home .site-header {
    background: linear-gradient(110deg, #131412, #0d0f0e 60%, #181712);
    box-shadow: 0 1px 0 #ffffff04 inset, 0 10px 35px #00000025;
}
.header-inner {
    border-bottom: 0;
    position: relative;
}
.header-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #e8cf8730, #ffffff04 28%, #ffffff04 72%, #e8cf8730);
    pointer-events: none;
}
.brand { transition: filter .35s ease; }
.brand:hover { filter: brightness(1.14); }
.site-navigation .nav-cta {
    position: relative;
    border-radius: 5px;
    background: linear-gradient(120deg, #d4ac5510, #d4ac5504);
    border: 1px solid #d4ac554f;
    box-shadow: 0 1px 0 #e9cf9621 inset;
    transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.site-navigation .nav-cta:hover {
    background: #d4ac551a;
    border-color: #e9cf9680;
    box-shadow: 0 0 26px #d4ac5510, 0 1px 0 #e9cf9640 inset;
    transform: translateY(-1px);
}
.site-navigation .nav-cta .icon { transition: transform .3s var(--premium-ease); }
.site-navigation .nav-cta:hover .icon { transform: translateX(3px); }
.site-footer {
    background: linear-gradient(90deg, #0e100f, #171713, #0e100f) !important;
    border-top-color: #c7a35417;
}

/* Architectural gold seams, warm light and an etched studio floor. */
.immersive-hero {
    --camera-rx: 0deg;
    --camera-ry: 0deg;
    background: #0a0d0c;
}
.immersive-atmosphere {
    background:
        radial-gradient(ellipse at var(--light-x) var(--light-y), #c0954826 0%, #7662390c 38%, transparent 65%),
        radial-gradient(ellipse at 10% 80%, #292d2625, transparent 55%),
        linear-gradient(120deg, #131613, #090d0c 64%, #141713);
}
.showroom-architecture {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    z-index: -3;
    pointer-events: none;
    opacity: .95;
    transform: translate3d(var(--back-x), var(--back-y), 0) scale(1.04);
}
.studio-facet { opacity: .7; }
.studio-facet-dark { fill: #070a0980; }
.studio-seam,
.studio-seam-halo,
.studio-seam-glint,
.studio-edge { fill: none; stroke-linecap: round; }
.studio-seam { stroke: url(#studio-gold); stroke-width: 2; opacity: .65; }
.studio-seam-halo { stroke: #d4ac55; stroke-width: 11; opacity: .18; filter: blur(10px); }
.studio-seam-glint {
    stroke: #fff0c1;
    stroke-width: 2.5;
    stroke-dasharray: 95 1500;
    stroke-dashoffset: 1500;
    opacity: .7;
    filter: drop-shadow(0 0 5px #e0bc6b80);
    animation: studio-glint 16s ease-in-out infinite;
}
.studio-edge { stroke: url(#studio-edge); stroke-width: 1; }
.showroom-spotlight {
    position: absolute;
    left: 47%;
    top: -23%;
    width: 58%;
    height: 125%;
    z-index: -4;
    pointer-events: none;
    transform: rotate(-19deg) translate3d(var(--back-x), var(--back-y), 0);
    background: linear-gradient(180deg, #f6da9330, #d4ac5514 28%, transparent 79%);
    clip-path: polygon(37% 0, 43% 0, 100% 100%, 0 100%);
    filter: blur(8px);
    opacity: .62;
}
.showroom-floor {
    position: absolute;
    z-index: -2;
    left: 19%;
    right: -24%;
    bottom: -28%;
    height: 58%;
    pointer-events: none;
    transform: perspective(700px) rotateX(58deg) rotateZ(-10deg);
    background:
        radial-gradient(ellipse at 65% 0%, #b49a6224, transparent 62%),
        repeating-linear-gradient(90deg, transparent 0 119px, #bdaa7715 120px 121px, transparent 122px 240px),
        repeating-linear-gradient(0deg, transparent 0 80px, #ffffff07 81px 82px, transparent 83px 170px),
        linear-gradient(#151814, #0a0d0c);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    opacity: .8;
}
.showroom-floor-light {
    position: absolute;
    left: 36%;
    right: 0;
    bottom: 12%;
    height: 14%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse, #d4ac5524, #9b80510a 35%, transparent 68%);
    transform: translate3d(var(--camera-x), 0, 0);
    filter: blur(15px);
}
.immersive-hero::before {
    content: "";
    position: absolute;
    inset: 15px;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(#e7cb7e3d, #e7cb7e3d) left top / 26px 1px no-repeat,
        linear-gradient(#e7cb7e3d, #e7cb7e3d) left top / 1px 26px no-repeat,
        linear-gradient(#e7cb7e29, #e7cb7e29) right bottom / 26px 1px no-repeat,
        linear-gradient(#e7cb7e29, #e7cb7e29) right bottom / 1px 26px no-repeat;
}
.immersive-hero::after {
    background:
        linear-gradient(90deg, #0b0e0ddb, #0b0e0d70 22%, transparent 45%),
        linear-gradient(0deg, #080b0bcc, transparent 28%),
        radial-gradient(ellipse at 62% 49%, transparent 40%, #070a0940);
}
.depth-dust { opacity: .5; }
.light-ribbons { opacity: .85; }
.ribbon-main { stroke-width: 1.5; }
.bike-stage { animation: showroom-arrival 1.5s var(--premium-ease) both; }
.bike-plane {
    transform: translate3d(var(--camera-x), var(--camera-y), 40px)
        rotateX(var(--camera-rx)) rotateY(var(--camera-ry));
    transform-origin: 60% 68%;
}
.hero-bike {
    filter: drop-shadow(0 27px 24px #0009) drop-shadow(0 -2px 4px #dfb65d19);
}
.bike-contact-shadow { opacity: .85; }
.bike-light-sweep { opacity: .24; }
.bike-reflection { opacity: .13; }

/* Strong hierarchy, with a brushed gold finish on the main word. */
.hero-editorial { max-width: 450px; bottom: 19%; }
.hero-editorial h1 {
    margin: 0 0 29px;
    font-size: clamp(88px, 8.5vw, 146px);
    line-height: .9;
    letter-spacing: -.015em;
    text-shadow: 0 7px 28px #0003;
}
.hero-title-lead {
    display: block;
    font-size: .53em;
    letter-spacing: .12em;
    line-height: 1.35;
    margin-bottom: 4px;
    color: #f0ede3;
    animation: editorial-arrival 1s .12s var(--premium-ease) both;
}
.hero-editorial h1 .gold-text {
    display: block;
    color: #dfbd71;
    background: linear-gradient(112deg, #a27a35 0%, #ebcf8e 24%, #faf0c4 36%, #c59a47 49%, #efd493 62%, #b28639 82%, #e5c780 100%);
    background-size: 190% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 0 #0b0c0b) drop-shadow(0 8px 18px #0004);
    animation: editorial-arrival 1.1s .24s var(--premium-ease) both, gold-finish 18s 1.3s ease-in-out infinite;
}
.immersive-actions { animation: editorial-arrival 1s .38s var(--premium-ease) both; }
.immersive-actions > .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 49px;
    padding: 15px 24px;
    border-radius: 4px;
    border: 1px solid #f1d798a6;
    background: linear-gradient(112deg, #b08b3e, #e8c978 55%, #c7a252);
    color: #17170f;
    box-shadow: 0 7px 24px #0004, 0 1px 0 #fff5 inset, 0 0 34px #cba44d14;
    font-weight: 800;
    letter-spacing: .07em;
    transition: transform .35s var(--premium-ease), box-shadow .35s, filter .35s;
}
.immersive-actions > .btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -50% -120%;
    background: linear-gradient(110deg, transparent 44%, #fff8 49%, transparent 54%);
    transform: translateX(-30%);
    transition: transform .7s var(--premium-ease);
    pointer-events: none;
}
.immersive-actions > .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px #0005, 0 0 40px #d7b35f26, 0 1px 0 #fff7 inset;
    filter: brightness(1.06);
}
.immersive-actions > .btn:hover::before { transform: translateX(30%); }
.immersive-actions > .btn .icon { transition: transform .35s var(--premium-ease); }
.immersive-actions > .btn:hover .icon { transform: translateX(5px); }

/* Registration surface polish, preserving the compact fields and four tabs. */
.registration-page {
    background:
        radial-gradient(ellipse at 8% 12%, #b99a4520, transparent 43%),
        radial-gradient(ellipse at 92% 95%, #b99a4512, transparent 42%),
        linear-gradient(125deg, #131310, #191816 50%, #121110);
}
.registration-card {
    background:
        radial-gradient(ellipse at 8% 0%, #d8bd7620, transparent 45%),
        linear-gradient(130deg, #2d2b27, #24231f 53%, #1e1d1a);
    border-color: #a38e583e;
    box-shadow: 0 18px 54px #0005, 0 1px 0 #ffffff0c inset;
}
.registration-card::before {
    background: linear-gradient(90deg, transparent, #d4ac5566 25%, #f3d993 52%, #d4ac554d 76%, transparent);
}
.step-circle {
    box-shadow: 0 3px 9px #0003, 0 1px 0 #ffffff10 inset;
    transition: box-shadow .3s, background .3s, border-color .3s, transform .3s;
}
.step.active .step-circle {
    background: linear-gradient(130deg, #f0d68f, #c09a47);
    border-color: #f5dfa3;
    color: #242114;
    box-shadow: 0 0 0 4px #dbb65f0d, 0 0 22px #dfb75d29, 0 2px 8px #0003;
}
.step.active .step-label { color: #f3dc9f; }
.step:not(.active):hover .step-circle { border-color: #d4ac5590; transform: translateY(-1px); }
.input-wrap input,
.input-wrap select {
    background: linear-gradient(115deg, #181816, #1e1d18);
    border-color: #a395694f;
    box-shadow: 0 2px 5px #0003 inset, 0 1px 0 #ffffff04;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.input-wrap input:focus,
.input-wrap select:focus {
    background: #201e18;
    border-color: #e4c273;
    box-shadow: 0 0 0 3px #dfbd7014, 0 2px 4px #0002 inset;
}
.registration-page .btn-primary {
    background: linear-gradient(115deg, #b89343, #e6c676 58%, #c5a151);
    color: #1d1e14;
    border-color: #e9cd84;
    box-shadow: 0 3px 10px #0003, 0 1px 0 #fff4 inset;
    transition: filter .3s, box-shadow .3s, transform .3s;
}
.registration-page .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 5px 18px #0004; }
.registration-page .btn-secondary { background: linear-gradient(130deg, #ffffff08, #ffffff02); border-color: #a79a733f; }
.bike-visual-glow { background: radial-gradient(ellipse, #d9b96c2d, transparent 68%); filter: blur(8px); }
.bike-visual img,
.details-bike-image img { filter: drop-shadow(0 16px 12px #0008) drop-shadow(0 -1px 3px #e4c47910); }
.bike-specs > div { border-color: #b4a06917; }
.registration-receipt { background: #16150f55; border-color: #b8a06430; box-shadow: 0 8px 22px #0002; }
.receipt-top { background: linear-gradient(115deg, #d3b46512, #d3b46505); border-color: #b8a06426; }
.completion-check { box-shadow: 0 0 0 6px #d4ac5507, 0 0 24px #d4ac5520; }
.ui-dialog { background: linear-gradient(135deg, #2c2b25, #1e1c18); border-color: #bfa86d50; box-shadow: 0 26px 90px #0009, 0 1px 0 #ffeac51a inset; }
.ui-dialog::backdrop { background: #070603aa; backdrop-filter: blur(8px); }

@keyframes showroom-arrival {
    from { opacity: 0; transform: translate3d(30px, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes editorial-arrival {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes studio-glint {
    0%, 14% { stroke-dashoffset: 1500; opacity: 0; }
    24% { opacity: .8; }
    67% { opacity: .5; }
    85%, 100% { stroke-dashoffset: -150; opacity: 0; }
}
@keyframes gold-finish {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.immersive-hero.motion-paused .studio-seam-glint,
.immersive-hero.motion-paused .hero-editorial .gold-text,
.immersive-hero.motion-paused .bike-stage,
.immersive-hero.motion-paused .hero-title-lead,
.immersive-hero.motion-paused .immersive-actions { animation-play-state: paused; }
.immersive-hero.motion-paused .showroom-architecture,
.immersive-hero.motion-paused .showroom-floor-light { transform: none; }

@media (min-width: 1700px) {
    .hero-editorial { bottom: 22%; }
}
@media (max-width: 1100px) {
    .hero-editorial { max-width: 380px; }
    .hero-editorial h1 { font-size: 106px; }
    .studio-seam-halo { opacity: .14; }
}
@media (max-height: 720px) and (min-width: 701px) {
    .hero-editorial { bottom: 18%; }
    .hero-editorial h1 { font-size: 96px; margin-bottom: 23px; }
    .immersive-actions > .btn { min-height: 44px; padding: 12px 20px; }
}
@media (max-width: 700px) {
    .hero-editorial { max-width: 300px; bottom: 17%; }
    .hero-editorial h1 { font-size: 85px; }
    .showroom-architecture { opacity: .72; }
    .showroom-floor { left: 12%; }
}
@media (max-width: 580px) {
    .showroom-architecture { height: 65%; opacity: .8; }
    .showroom-spotlight { left: 5%; width: 110%; height: 80%; top: -20%; opacity: .5; }
    .showroom-floor { left: -20%; right: -35%; bottom: 28%; height: 26%; opacity: .65; }
    .showroom-floor-light { left: 7%; right: 4%; bottom: 48%; height: 9%; }
    .immersive-hero::before { inset: 10px; background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px; }
    .immersive-hero::after { background: linear-gradient(0deg, #080b0bce 0%, #080b0b38 25%, transparent 49%); }
    .hero-editorial { bottom: 8%; max-width: none; }
    .hero-editorial h1 { font-size: clamp(79px, 22vw, 107px); line-height: .89; margin-bottom: 26px; }
    .hero-title-lead { font-size: .46em; letter-spacing: .15em; margin-bottom: 5px; }
    .immersive-actions > .btn { min-height: 47px; padding: 14px 22px; }
    .bike-stage { animation-duration: 1.1s; }
    .bike-reflection { opacity: .09; }
    .ui-dialog::backdrop { backdrop-filter: blur(4px); }
}
@media (max-width: 350px) {
    .hero-editorial { bottom: 7%; }
    .hero-editorial h1 { font-size: 78px; margin-bottom: 22px; }
    .immersive-actions > .btn { min-height: 43px; font-size: 10px; padding: 12px 18px; }
}
@media (max-height: 570px) and (max-width: 580px) {
    .hero-editorial { bottom: 5%; }
    .hero-editorial h1 { font-size: 62px; margin-bottom: 16px; }
    .immersive-actions > .btn { min-height: 40px; padding: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .bike-stage,
    .hero-title-lead,
    .hero-editorial h1 .gold-text,
    .immersive-actions,
    .studio-seam-glint { animation: none !important; opacity: 1; }
    .showroom-architecture,
    .showroom-floor-light { transform: none !important; }
    .bike-plane { transform: none !important; }
    .brand,
    .site-navigation .nav-cta,
    .site-navigation .nav-cta .icon,
    .immersive-actions > .btn,
    .immersive-actions > .btn::before,
    .immersive-actions > .btn .icon,
    .step-circle,
    .registration-page .btn-primary { transition: none; }
}