:root{--violet:#541477;--violet-dark:#270938;--magenta:#cb24df;--cyan:#10afe7;--paper:#fbf8fc;--ink:#24152c;--muted:#66576e;--line:#eadfed;--shadow:0 28px 80px rgba(24,3,34,.42)}
*{box-sizing:border-box}
html{background:#180522;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.55}
button,[role="button"],summary{cursor:pointer}
button{font:inherit}
[hidden]{display:none!important}
.shield-stage{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#341044 url('/images/betterflirt-background.webp') center/cover no-repeat}
.shield-background-route{position:absolute;inset:0;z-index:0}
.shield-background-route:focus-visible{box-shadow:inset 0 0 0 4px var(--cyan);outline:0}
.shield-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,3,30,.88) 0%,rgba(25,5,35,.45) 43%,rgba(9,4,17,.08) 70%),linear-gradient(0deg,rgba(18,3,25,.88),transparent 48%)}
.shield-rail,.shield-bridge,.shield-people{position:relative;z-index:2}
.shield-rail{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px clamp(20px,4vw,64px);background:rgba(32,5,47,.58);border-bottom:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}
.shield-brand{display:flex;align-items:center;min-width:0;font-size:clamp(1.35rem,2.4vw,2.1rem);letter-spacing:-.04em}
.shield-brand strong{font-weight:500}
.shield-heart{display:inline-block;width:22px;height:20px;margin-right:-8px;border-radius:13px 13px 5px 13px;transform:rotate(-34deg)}
.shield-heart-one{background:var(--magenta)}
.shield-heart-two{margin-right:8px;background:var(--cyan);transform:rotate(-34deg) translateY(5px)}
.shield-login{border:1px solid rgba(255,255,255,.72);border-radius:999px;padding:9px 22px;color:#fff;background:rgba(255,255,255,.08);font-weight:800}
.shield-login:hover,.shield-login:focus-visible{background:#fff;color:var(--violet)}
.shield-bridge{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(24px,6vh,62px);width:min(640px,58vw);padding:30px 34px;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(135deg,rgba(36,7,51,.94),rgba(75,16,101,.79));box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.shield-kicker,.shield-entry-kicker{margin:0 0 11px;color:#7eddf6;font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.shield-bridge h1{margin:0;max-width:580px;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,4.3vw,4.6rem);font-weight:500;line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.shield-lead{max-width:540px;margin:20px 0 0;color:#eee3f3;font-size:clamp(.96rem,1.3vw,1.12rem)}
.shield-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:24px}
.shield-main{border:0;border-radius:14px;padding:15px 22px;color:#fff;background:linear-gradient(135deg,#c91bdd,#7b2ee8 57%,#0faee5);box-shadow:0 14px 34px rgba(156,33,220,.35);font-weight:900;transition:transform .18s ease,filter .18s ease}
.shield-main:hover,.shield-main:focus-visible{transform:translateY(-2px);filter:brightness(1.1);outline:0}
.shield-micro{max-width:175px;color:#d7c5de;font-size:.78rem;line-height:1.35}
.shield-people{position:absolute;right:clamp(20px,4vw,60px);top:50%;display:grid;grid-template-columns:repeat(3,106px);gap:10px;transform:translateY(-38%)}
.shield-person{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.42);border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(11,2,17,.34);transition:transform .2s ease}
.shield-person:nth-child(2){transform:translateY(-30px)}
.shield-person:hover,.shield-person:focus-visible{transform:translateY(-8px);outline:3px solid var(--cyan);outline-offset:2px}
.shield-person:nth-child(2):hover,.shield-person:nth-child(2):focus-visible{transform:translateY(-38px)}
.shield-person img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.shield-person figcaption{display:grid;gap:1px;padding:8px 7px;color:var(--ink);line-height:1.18;text-align:center}
.shield-person figcaption strong{font-size:.76rem}
.shield-person figcaption span{color:var(--muted);font-size:.59rem}
.shield-details{color:var(--ink);background:var(--paper)}
.shield-details summary{padding:20px clamp(20px,5vw,74px);color:#fff;background:linear-gradient(90deg,#321043,#5a1976);font-weight:900;list-style-position:inside}
.shield-details summary:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.shield-article{max-width:880px;margin:0 auto;padding:66px 28px 88px}
.shield-article h2{margin:58px 0 18px;color:#401353;font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.75rem,3vw,2.55rem);font-weight:600;line-height:1.15;text-wrap:balance}
.shield-article h3{margin:36px 0 12px;color:#4d1c61;font-size:1.25rem}
.shield-article p{margin:0 0 20px;color:#55465d;font-size:1.04rem}
.shield-article-action{display:flex;justify-content:center;margin-top:52px;padding-top:35px;border-top:1px solid var(--line)}
.shield-entry{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);overflow:auto}
.shield-entry-backdrop{position:absolute;inset:0;z-index:-1;background:#341044 url('/images/betterflirt-background.webp') center/cover no-repeat}
.shield-entry-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,4,34,.2),rgba(25,4,35,.96) 67%)}
.shield-entry-sheet{grid-column:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,6vw,76px);background:rgba(35,6,49,.92);border-left:1px solid rgba(255,255,255,.2);box-shadow:-30px 0 80px rgba(12,1,18,.32)}
.shield-entry-mark{display:flex;align-items:center;gap:13px;margin-bottom:42px;font-size:1.8rem;letter-spacing:-.04em}
.shield-entry-mark img{width:54px;height:54px;object-fit:contain}
.shield-entry-sheet h2,.shield-popup-copy h2{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:500;line-height:1.04;text-wrap:balance}
.shield-entry-sheet>p:not(.shield-entry-kicker),.shield-popup-copy>p:not(.shield-kicker){color:#d9cbe0}
.shield-entry-actions{display:grid;gap:10px;margin-top:24px}
.shield-decline,.shield-later{border:0;padding:13px 18px;color:#d8c8df;background:transparent;font-weight:800}
.shield-decline:hover,.shield-decline:focus-visible,.shield-later:hover,.shield-later:focus-visible{color:#fff;background:rgba(255,255,255,.09)}
.shield-popup{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:24px;background:rgba(20,2,28,.72);backdrop-filter:blur(7px)}
.shield-popup-card{display:grid;grid-template-columns:190px minmax(0,1fr);width:min(680px,100%);overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:28px;background:linear-gradient(145deg,#2a0a3a,#4f146b);box-shadow:var(--shadow)}
.shield-popup-image{min-height:100%;margin:0}
.shield-popup-image img{display:block;width:100%;height:100%;object-fit:cover}
.shield-popup-copy{position:relative;padding:44px 38px}
.shield-popup-copy h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.shield-popup-copy .shield-main{width:100%;margin-top:10px}
.shield-popup-close{position:absolute;top:11px;right:12px;width:38px;height:38px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);font-size:1.55rem;line-height:1}
.shield-later{width:100%;margin-top:6px}
@media(max-width:980px){.shield-stage:after{background:linear-gradient(0deg,rgba(19,3,27,.92),rgba(19,3,27,.12) 68%)}.shield-bridge{width:min(680px,calc(100% - 40px))}.shield-people{top:30%;right:20px;grid-template-columns:repeat(3,94px)}.shield-person:nth-child(2){transform:none}.shield-person:nth-child(2):hover,.shield-person:nth-child(2):focus-visible{transform:translateY(-8px)}}
@media(max-width:640px){.shield-stage{min-height:100svh;background-position:58% center}.shield-rail{padding:15px 16px}.shield-brand{font-size:1.25rem}.shield-heart{width:16px;height:15px}.shield-login{padding:8px 13px;font-size:.75rem}.shield-people{top:22%;right:14px;grid-template-columns:repeat(3,78px);gap:7px}.shield-person{border-radius:12px}.shield-person figcaption{padding:5px 3px}.shield-person figcaption span{display:none}.shield-bridge{left:14px;bottom:16px;width:calc(100% - 28px);padding:22px 20px;border-radius:21px}.shield-bridge h1{font-size:clamp(2rem,10vw,3rem)}.shield-lead{margin-top:13px;font-size:.9rem}.shield-actions{margin-top:17px}.shield-main{padding:13px 17px}.shield-micro{display:none}.shield-entry{display:flex;align-items:flex-end;padding:12px}.shield-entry-backdrop:after{background:linear-gradient(0deg,rgba(25,4,35,.94),rgba(25,4,35,.38))}.shield-entry-sheet{width:100%;max-height:94svh;padding:28px 22px;border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(35,6,49,.96)}.shield-entry-mark{margin-bottom:22px;font-size:1.4rem}.shield-entry-mark img{width:42px;height:42px}.shield-entry-sheet h2{font-size:clamp(1.85rem,9vw,2.6rem)}.shield-popup{padding:14px}.shield-popup-card{grid-template-columns:96px minmax(0,1fr);border-radius:20px}.shield-popup-copy{padding:34px 20px 24px}.shield-popup-copy h2{font-size:1.75rem}.shield-popup-copy>p:not(.shield-kicker){font-size:.88rem}.shield-article{padding:48px 20px 70px}.shield-article p{font-size:1rem}}
@media(max-height:650px) and (min-width:641px){.shield-bridge{bottom:18px;padding:22px 26px}.shield-people{top:48%}.shield-bridge h1{font-size:3rem}.shield-lead{margin-top:12px}.shield-actions{margin-top:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shield-main,.shield-person{transition:none}}
.dialog-label{margin:0 0 14px;font-size:clamp(1.55rem,4vw,2.2rem);font-weight:800;line-height:1.1}
