@charset "UTF-8";
:root { color-scheme:dark; color:#fff9ff; background:#10071d; font-family:"Segoe UI",Arial,sans-serif; --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px); --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; min-width:0; }
body { background:#10071d; }
img { display:block; max-width:100%; height:auto; }
.stage { position:relative; isolation:isolate; width:100%; height:100svh; height:100dvh; min-height:320px; overflow:hidden; background:radial-gradient(ellipse at 24% 49%,#70205633,transparent 48%),radial-gradient(ellipse at 81% 37%,#217bb73d,transparent 50%),#10071d; }
.ambient { position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 35% 82%,#b750b326,transparent 50%); }
.artwork { position:absolute; z-index:-1; left:50%; top:0; height:100%; width:min(100%,90dvh); transform:translateX(-50%); mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent); }
.artwork picture { display:block; width:100%; height:100%; }
.artwork img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.artwork::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#10071d 0%,#10071d99 12%,#10071d00 28%),linear-gradient(180deg,#10071df2 0%,#10071d00 22%); }
.brands { position:absolute; z-index:2; top:calc(28px + var(--safe-top)); left:max(20px,var(--safe-left)); right:max(20px,var(--safe-right)); display:flex; align-items:center; justify-content:center; gap:24px; }
.network-logo { width:238px; }
.platform-logo { width:184px; filter:drop-shadow(0 2px 9px #10071d); }
.brand-divider { height:27px; width:1px; background:#e9c7fc38; flex:none; }
.contact { position:absolute; z-index:3; left:50%; transform:translateX(-50%); bottom:calc(78px + var(--safe-bottom)); width:390px; max-width:calc(100% - 36px); }
.wa { position:relative; isolation:isolate; min-height:70px; padding:11px 18px 11px 13px; display:flex; align-items:center; gap:14px; color:#f1fff8; background:linear-gradient(120deg,#1c7658f5 0%,#104c3bf5 55%,#07382ef5 100%); border:1px solid #89ffd278; border-radius:23px; box-shadow:0 0 0 5px #40e8a30a,0 14px 40px #0008,0 0 30px #1fd98a26,inset 0 1px 0 #ceffe936,inset 0 -2px 0 #032c26; text-decoration:none; font-size:17px; font-weight:750; line-height:1.2; transition:transform .18s,filter .18s,box-shadow .18s; -webkit-tap-highlight-color:transparent; }
.wa::before { content:""; position:absolute; left:18%; right:18%; height:1px; top:-1px; background:linear-gradient(90deg,transparent,#c8ffe9,transparent); pointer-events:none; }
.wa-icon { width:43px; height:43px; display:grid; place-items:center; flex:none; border-radius:14px; color:#073e2b; background:linear-gradient(145deg,#a4ffd4,#3cea98); box-shadow:0 3px 12px #051f2840,inset 0 1px 0 #ffffff7a; }
.wa-icon svg { width:25px; height:25px; }
.wa-label { flex:1; text-align:center; white-space:nowrap; letter-spacing:-.2px; }
.wa-arrow { width:20px; height:20px; flex:none; color:#a3e9c8; transition:transform .18s; }
@media(hover:hover) { .wa:hover[aria-disabled="false"] { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 0 0 5px #40e8a311,0 18px 40px #0008,0 0 36px #1fd98a3d,inset 0 1px 0 #ceffe950; } .wa:hover[aria-disabled="false"] .wa-arrow { transform:translateX(2px); } }
.wa:active[aria-disabled="false"] { transform:translateY(1px); }
.wa[aria-disabled="true"] { opacity:.72; cursor:wait; }
.wa:focus-visible,.attention-retry:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.attention-status { margin-bottom:12px; text-align:center; font-size:12px; line-height:1.45; color:#f2e5fc; }
.attention-status:has(#wa-status:empty) { display:none; }
#wa-status { margin:0; text-shadow:0 2px 5px #10071d; }
.attention-retry { color:#fff; background:#281337; border:1px solid #b989d0; border-radius:9px; padding:10px 16px; min-height:44px; font:inherit; font-weight:650; margin-top:8px; cursor:pointer; }
.attention-retry[hidden] { display:none; }
.legal { position:absolute; z-index:2; bottom:calc(23px + var(--safe-bottom)); left:0; right:0; display:flex; align-items:center; justify-content:center; gap:9px; color:#eee2f5; font-size:13px; line-height:1.5; }
.age { border:1px solid #c49cdb88; border-radius:6px; color:#f0daff; font-size:12px; font-weight:700; padding:3px 6px; background:#1a0c28b3; }
.glint { position:absolute; z-index:1; width:4px; height:4px; transform:rotate(45deg); border-radius:1px; background:#ffdaff; pointer-events:none; animation:glimmer 5s ease-in-out infinite; }
.glint-pink { top:41%; left:48%; box-shadow:0 0 13px 3px #f794fc66; }
.glint-blue { top:75%; right:8%; background:#c8faff; box-shadow:0 0 13px 3px #80e7ff66; animation-delay:1.7s; }
@keyframes glimmer { 0%,100% { opacity:.35; } 50% { opacity:.9; } }
@media(max-width:1000px) and (min-width:701px) {
  .brands { gap:18px; } .network-logo { width:210px; } .platform-logo { width:164px; }
}
@media(max-width:700px) and (orientation:portrait) {
  .brands { top:calc(16px + var(--safe-top)); left:max(18px,var(--safe-left)); right:max(18px,var(--safe-right)); max-width:none; justify-content:center; gap:16px; }
  .network-logo { width:48%; max-width:190px; }
  .platform-logo { width:41%; max-width:162px; }
  .brand-divider { height:23px; }
  .artwork { top:calc(64px + var(--safe-top)); bottom:0; left:0; width:100%; height:auto; transform:none; mask-image:none; -webkit-mask-image:none; }
  .artwork img { object-fit:cover; object-position:50% 0%; }
  .artwork::after { background:linear-gradient(180deg,#10071d 0%,#10071d00 7%),linear-gradient(0deg,#10071d 0%,#10071d8c 14%,#10071d00 30%); }
  .contact { left:max(18px,var(--safe-left)); right:max(18px,var(--safe-right)); transform:none; width:auto; max-width:none; bottom:calc(58px + var(--safe-bottom)); }
  .wa { min-height:68px; font-size:16px; padding:10px 14px 10px 11px; gap:10px; }
  .attention-status { background:#10071ddd; border-radius:10px; padding:8px; }
  .legal { left:0; right:0; bottom:calc(15px + var(--safe-bottom)); justify-content:center; gap:8px; font-size:12px; }
  .age { padding:2px 5px; font-size:12px; }
  .glint-pink { top:48%; left:8%; } .glint-blue { top:62%; right:7%; }
}
@media(max-width:700px) and (orientation:portrait) and (max-height:660px) {
  .brands { top:calc(10px + var(--safe-top)); gap:12px; }
  .artwork { top:calc(53px + var(--safe-top)); }
  .contact { bottom:calc(45px + var(--safe-bottom)); }
  .wa { min-height:60px; font-size:14px; padding:9px 12px 9px 10px; gap:8px; border-radius:20px; }
  .wa-icon { width:38px; height:38px; border-radius:12px; }
  .wa-icon svg { width:23px; height:23px; }
  .wa-arrow { width:18px; height:18px; }
  .legal { bottom:calc(10px + var(--safe-bottom)); font-size:12px; }
}
@media(orientation:landscape) and (max-height:500px) {
  .brands { top:calc(12px + var(--safe-top)); gap:16px; }
  .network-logo { width:173px; } .platform-logo { width:130px; } .brand-divider { height:19px; }
  .artwork { width:min(76%,115dvh); }
  .contact { bottom:calc(43px + var(--safe-bottom)); width:330px; }
  .wa { min-height:54px; padding:8px 12px 8px 9px; font-size:14px; border-radius:18px; gap:10px; }
  .wa-icon { width:36px; height:36px; border-radius:11px; }
  .wa-icon svg { width:22px; height:22px; }
  .attention-status { font-size:11px; margin-bottom:6px; }
  .attention-retry { min-height:34px; padding:5px 12px; margin-top:3px; }
  .legal { bottom:calc(9px + var(--safe-bottom)); font-size:12px; }
  .age { padding:2px 4px; }
}
@media(prefers-reduced-motion:reduce) { .glint { animation:none; opacity:.55; } .wa,.wa-arrow { transition:none; } .wa:hover[aria-disabled="false"],.wa:active[aria-disabled="false"],.wa:hover[aria-disabled="false"] .wa-arrow { transform:none; } }
@media(forced-colors:active) { .wa { border:2px solid ButtonText; } .wa-icon { border:1px solid ButtonText; color:ButtonText; } .wa-arrow { color:ButtonText; } }
