.trial-welcome { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: rgba(25, 22, 14, .77); backdrop-filter: blur(5px); padding: 24px; }
.trial-welcome.hidden { display: none; }
.trial-stage { position: relative; width: min(410px, 100%); text-align: center; color: #fff5cd; isolation: isolate; }
.trial-stage::before { content: ""; position: absolute; inset: -70px -85px 10px; z-index: -1; background: repeating-conic-gradient(from 5deg, transparent 0deg 15deg, #ffe37628 15deg 24deg); border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 70%); animation: trial-rays 35s linear infinite; }
.trial-kicker { font-size: 13px; letter-spacing: 4px; color: #f2d99f; margin: 0 0 12px; }
.trial-title { font-size: 26px; font-weight: 700; margin: 0 0 42px; color: #fff2b4; text-shadow: 0 2px 8px #0007; }
.trial-packet { position: relative; padding: 44px 30px 25px; border: 2px solid #ffe476; border-radius: 26px; background: radial-gradient(ellipse at top, #ffa946, transparent 60%), linear-gradient(150deg, #ff9a31, #ff573f 65%, #ff7234); box-shadow: 0 0 10px #ffeb66, 0 0 55px #ffd25466, inset 0 0 20px #ffd98799; }
.trial-gift { position: absolute; top: -33px; left: calc(50% - 33px); width: 66px; height: 66px; border: 1px solid #ffe898; border-radius: 18px; background: linear-gradient(145deg, #ffbb52, #ed5139); transform: rotate(-10deg); box-shadow: 0 5px 10px #b5473433; display: grid; place-items: center; font-size: 35px; }
.trial-tag { display: inline-block; padding: 5px 12px; border: 1px solid #ffe2ab88; border-radius: 20px; color: #fff3d5; font-size: 12px; }
.trial-amount { margin: 13px 0 2px; font-size: 86px; line-height: 1.12; font-weight: 800; letter-spacing: -3px; color: #fffce6; text-shadow: 0 3px 0 #cf653122; }
.trial-unit { font-size: 21px; font-weight: 650; margin: 0 0 15px; }
.trial-validity { font-size: 12px; margin: 0 0 19px; line-height: 1.8; color: #fff0d1; }
.trial-start { display: block; width: 100%; border: 0; border-radius: 30px; padding: 14px 20px; background: linear-gradient(#fff7d8, #ffe9aa); box-shadow: 0 4px 0 #bf4a222b; color: #d65b24; font-size: 20px; font-weight: 750; cursor: pointer; }
.trial-start:hover { background: #fff5c8; transform: translateY(-1px); }
.trial-close { margin-top: 24px; width: 34px; height: 34px; border: 1px solid #fff2bd88; background: #ffffff0a; border-radius: 50%; color: #fff2bd; font-size: 23px; cursor: pointer; line-height: 1; }
.trial-welcome button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.trial-sparkles { position: absolute; inset: -30px -25px; pointer-events: none; z-index: -1; }
.trial-sparkles i { position: absolute; width: 13px; height: 20px; border-radius: 50%; background: linear-gradient(90deg, #b98420, #fff4a8 45%, #e9af32); transform: rotate(30deg); box-shadow: 0 0 12px #ffe67466; animation: trial-float 3.3s ease-in-out infinite alternate; }
.trial-sparkles i:nth-child(1) { left: 5%; top: 9%; }
.trial-sparkles i:nth-child(2) { right: 5%; top: 3%; animation-delay: -.9s; }
.trial-sparkles i:nth-child(3) { left: 1%; top: 56%; animation-delay: -1.6s; }
.trial-sparkles i:nth-child(4) { right: 1%; top: 62%; animation-delay: -.4s; }
.trial-sparkles i:nth-child(5) { left: 17%; bottom: 4%; animation-delay: -2s; }
.trial-sparkles i:nth-child(6) { right: 17%; bottom: 1%; animation-delay: -1s; }
.trial-sparkles i:nth-child(7), .trial-sparkles i:nth-child(8) { border-radius: 1px; width: 6px; height: 11px; background: #ffd096; }
.trial-sparkles i:nth-child(7) { left: 20%; top: 1%; }
.trial-sparkles i:nth-child(8) { right: 19%; top: 12%; }
@keyframes trial-rays { to { transform: rotate(360deg); } }
@keyframes trial-float { to { transform: translateY(-12px) rotate(65deg); } }
@media (prefers-reduced-motion: reduce) { .trial-stage::before, .trial-sparkles i { animation: none; } }
@media (max-height: 670px) { .trial-stage { transform: scale(.85); } }