.trailer-launch { display:inline-flex; align-items:center; gap:12px; padding:13px 22px; border:1px solid #c4aa63; border-radius:30px; background:#c4aa63; color:#092e40; font-weight:700; }
.brand-story .trailer-teaser { margin-top:24px; font-size:13px; color:#d1dfdf; }
.trailer-teaser span { margin-left:12px; }
.trailer-open { overflow:hidden; }
dialog.product-trailer { width:min(1140px,calc(100vw - 32px)); max-width:1140px; max-height:calc(100dvh - 32px); padding:0; overflow:auto; background:#072f40; color:#f4f6ef; border:1px solid #ffffff26; border-radius:24px; }
.product-trailer::backdrop { background:#001a29e8; backdrop-filter:blur(8px); }
.trailer-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 30px; font-size:10px; letter-spacing:2px; }
.trailer-header-divider { color:#c4aa63; margin:0 12px; }
.product-trailer button { color:inherit; background:transparent; border:1px solid #ffffff40; border-radius:30px; min-height:40px; padding:8px 16px; }
.product-trailer button:hover { background:#ffffff15; }
.product-trailer button:disabled { opacity:.35; cursor:default; }
.trailer-screen { background:radial-gradient(ellipse at 90% 30%,#18586a 0,transparent 60%); }
.trailer-scene { min-height:480px; display:grid; grid-template-columns:1.1fr 1fr; gap:25px; align-items:center; padding:36px 52px 50px; overflow:hidden; }
.trailer-scene[hidden] { display:none; }
.trailer-kicker { display:block; font-size:10px; font-weight:700; letter-spacing:2px; color:#dac687; margin-bottom:24px; }
.trailer-copy h3 { font-family:Georgia,serif; font-size:clamp(30px,3.6vw,48px); font-weight:400; line-height:1.15; letter-spacing:-1.3px; margin:0 0 24px; }
.trailer-copy h3 em { font-style:normal; color:#dac687; }
.trailer-copy>p { font-size:16px; line-height:1.8; color:#cee0e2; max-width:480px; margin:0; }
.trailer-copy,.trailer-art { animation:trailer-enter .7s both; }
.trailer-art { min-width:0; position:relative; display:flex; align-items:center; justify-content:center; animation-delay:.16s; }
.trailer-art *, .trailer-art *::before, .trailer-art *::after { box-sizing:border-box; }
.trailer-orbit { height:330px; }
.orbit-ring { width:290px; height:290px; border:1px solid #c4aa6366; border-radius:50%; position:absolute; box-shadow:0 0 0 34px #ffffff03,0 0 0 68px #ffffff02; }
.trailer-gem { font-size:150px; line-height:1; color:#e5cd91; text-shadow:0 0 50px #c4aa6366; animation:trailer-float 4s ease-in-out infinite; }
.orbit-label { position:absolute; z-index:1; padding:10px 20px; border:1px solid #ffffff33; background:#164657; border-radius:12px; font-size:14px; box-shadow:0 10px 30px #00172455; }
.orbit-one { top:12px; left:8%; }.orbit-two { right:0; top:140px; }.orbit-three { bottom:5px; left:18%; }
.demo-window { width:100%; max-width:400px; border:1px solid #d6e3e4; background:#f7faf8; color:#163e4e; border-radius:15px; box-shadow:0 24px 60px #001a2977; overflow:hidden; transform:rotate(-2deg); }
.demo-window-bar { display:flex; align-items:center; gap:5px; background:#e8efed; padding:14px; font-size:11px; }
.demo-window-bar i { width:6px; height:6px; border-radius:50%; background:#9eb6b6; }.demo-window-bar span { margin-left:9px; }
.demo-form { padding:24px; }.demo-form>small { display:block; letter-spacing:1px; font-size:9px; margin-bottom:6px; color:#5b7379; }.demo-form>b { display:block; border-bottom:1px solid #d5e1e1; padding-bottom:15px; margin-bottom:18px; font-size:13px; }
.demo-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:10px; }.demo-two strong { font-size:12px; }
.demo-success { padding:12px; margin-top:20px; color:#176650; background:#e0f1e8; border-radius:8px; font-size:11px; }
.demo-phone { width:218px; min-height:330px; padding:18px; background:#f6faf7; color:#163e4e; border:6px solid #ccd8d6; border-radius:30px; box-shadow:0 24px 60px #001a2955; transform:rotate(-5deg); text-align:center; }
.demo-phone-camera { width:52px; height:5px; border-radius:20px; margin:0 auto 25px; background:#99afae; }.demo-phone>small { font-size:8px; letter-spacing:1px; }
.demo-watch { margin:20px auto; height:150px; width:45px; border-radius:8px; background:linear-gradient(90deg,#b5a780,#f2e5ba,#b5a780); display:grid; place-items:center; }.demo-watch span { width:80px; height:80px; border:6px solid #baa675; border-radius:50%; background:linear-gradient(130deg,#fff,#e0e7e3); position:relative; }.demo-watch span:before { content:''; position:absolute; width:2px; height:23px; background:#154450; left:33px; top:11px; transform-origin:bottom; transform:rotate(25deg); }.demo-watch span:after { content:''; position:absolute; width:22px; height:2px; background:#154450; left:33px; top:33px; transform:rotate(15deg); }
.demo-photo-art { padding-right:80px; }.demo-photo-card { position:absolute; right:0; bottom:30px; width:180px; border-radius:16px; background:#205869; padding:20px; box-shadow:0 10px 40px #001a2966; animation:trailer-enter 1s .4s both; }.demo-photo-card>span { font-size:30px; color:#dac687; }.demo-photo-card strong { display:block; font-size:14px; }.demo-mini-photos { display:flex; gap:6px; margin-top:14px; }.demo-mini-photos i { display:grid; place-items:center; width:38px; height:42px; background:#ffffff15; border-radius:6px; font-style:normal; }
.demo-workflow { padding:25px; }.demo-workflow>small { font-size:9px; letter-spacing:1px; }.demo-workflow>div { display:flex; align-items:center; gap:14px; padding:14px 8px; margin-top:8px; }.demo-workflow i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#dfeae5; font-style:normal; font-size:12px; }.demo-workflow span { font-size:13px; font-weight:600; }.demo-workflow span small { display:block; font-size:9px; color:#537078; font-weight:400; margin-top:4px; }.demo-workflow .demo-current { background:#dcefe8; border-radius:10px; }.demo-current i { background:#176650; color:white; }
.demo-status { transform:rotate(4deg); }.demo-status>b { display:block; margin-top:20px; }.demo-ready { margin:22px auto 12px; border-radius:50%; width:60px; height:60px; display:grid; place-items:center; font-size:28px; background:#d7eee3; color:#186249; animation:trailer-enter 1s .4s both; }.demo-status h4 { font-size:18px; margin:10px 0; }.demo-status p { font-size:11px; }.demo-status-pill { font-size:9px; color:#256650; }
.demo-metrics { display:grid; grid-template-columns:repeat(3,1fr); padding:20px 20px 0; gap:8px; }.demo-metrics>div { padding:12px; border-radius:8px; background:#e2efec; }.demo-metrics>div:nth-child(2) { background:#e5e9f6; }.demo-metrics>div:nth-child(3) { background:#f5ebd2; }.demo-metrics small { font-size:10px; }.demo-metrics b { display:block; font-size:28px; }
.demo-chart { height:150px; display:flex; align-items:end; gap:12px; padding:20px 25px 0; }.demo-chart i { width:100%; height:var(--bar); background:linear-gradient(#338b99,#176173); border-radius:6px 6px 0 0; transform-origin:bottom; animation:trailer-grow 1.4s .3s both; }.demo-chart-caption { font-size:9px; padding:10px 20px; margin:0; color:#547079; }
.trailer-finale { grid-template-columns:1fr; text-align:center; }.trailer-finale p { margin:auto; }.trailer-finale h3 { font-size:clamp(32px,4vw,54px); }.trailer-benefits { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px; }.trailer-benefits span { border:1px solid #ffffff30; border-radius:30px; padding:9px 16px; font-size:11px; color:#dac687; }
.trailer-chapters { display:flex; gap:7px; padding:0 30px; }.product-trailer .trailer-chapters button { flex:1; min-width:0; min-height:24px; padding:0; border:0; border-radius:0; position:relative; background:transparent; }.trailer-chapters button:before { content:''; position:absolute; top:10px; left:0; width:100%; height:3px; background:#ffffff25; }.trailer-chapters button:after { content:''; position:absolute; top:10px; left:0; width:var(--progress,0%); height:3px; background:#d9c184; }.trailer-chapters button[aria-current]:before { background:#ffffff70; }
.trailer-controls { display:flex; gap:16px; justify-content:space-between; align-items:center; padding:12px 30px 24px; font-size:12px; }.trailer-controls>div { display:flex; gap:7px; }.trailer-controls small { color:#c1d1d4; font-size:10px; }.product-trailer .trailer-controls button { padding:7px 13px; }.trailer-paused .trailer-gem { animation-play-state:paused!important; }
@keyframes trailer-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; } }
@keyframes trailer-float { 50% { transform:translateY(-10px); } }
@keyframes trailer-grow { from { transform:scaleY(.05); } to { transform:scaleY(1); } }
@media(max-width:700px) { .trailer-header { padding:16px; letter-spacing:1px; font-size:8px; }.trailer-header-divider { margin:0 5px; }.product-trailer .trailer-close { padding:7px 12px; font-size:12px; }.trailer-scene { grid-template-columns:1fr; padding:20px 24px; min-height:610px; gap:24px; align-content:start; }.trailer-copy h3 { font-size:32px; margin-bottom:14px; }.trailer-copy>p { font-size:13px; line-height:1.65; }.trailer-kicker { font-size:8px; margin-bottom:14px; }.trailer-art { width:100%; max-width:340px; margin:auto; }.trailer-orbit { height:280px; }.orbit-ring { width:235px; height:235px; }.trailer-gem { font-size:120px; }.orbit-label { padding:8px 14px; }.orbit-two { top:120px; }.demo-phone { min-height:280px; width:190px; padding:14px; }.demo-watch { height:115px; }.demo-photo-art { padding-right:60px; }.demo-photo-card { width:145px; padding:14px; }.demo-photo-card strong { font-size:12px; }.demo-mini-photos i { width:30px; }.demo-form { padding:20px; }.demo-workflow { padding:18px; }.trailer-controls { flex-wrap:wrap; padding:12px 16px 18px; gap:10px; }.trailer-controls small { flex-basis:100%; }.trailer-chapters { padding:0 16px; }.trailer-finale { align-content:center; }.trailer-finale h3 { font-size:38px; } }
@media(prefers-reduced-motion:reduce) { .product-trailer *, .product-trailer *::before, .product-trailer *::after { animation:none!important; transition:none!important; } }

.login-mobile-trailer { display:none; }
.trailer-header { position:sticky; top:0; z-index:2; background:#072f40; }
.trailer-controls { position:sticky; bottom:0; z-index:2; background:#072f40; color:#eef6f4; }
@media(max-width:760px) { .login-mobile-trailer { display:block; text-align:center; margin:0 0 28px; }.login-mobile-trailer p { margin:12px 0 0; font-size:12px; color:#5b747b; } }