:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#fff;background:#100204;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100svh}
.backdrop{position:fixed;inset:0;z-index:-2;background:#100204}
.backdrop img{width:100%;height:100%;object-fit:cover;object-position:center}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.12) 50%,rgba(0,0,0,.65))}
main{width:min(100% - 40px,460px);min-height:100svh;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:38px 0 24px;padding-top:max(38px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.brand{text-align:center;animation:arrive .8s ease both}
h1{margin:0;line-height:0}
.logo{width:clamp(170px,26vh,250px);max-width:75%;height:auto;filter:drop-shadow(0 10px 30px #0008)}
.eyebrow{font-size:.75rem;letter-spacing:.34em;color:#e4bfc3;margin:16px 0 28px}
.socials{display:grid;gap:13px}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.social{display:flex;align-items:center;gap:19px;min-height:82px;padding:17px 23px;border:1px solid #ffffff35;border-radius:14px;background:linear-gradient(110deg,#251316ed,#11090bee);box-shadow:0 8px 28px #0003;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;animation:arrive .65s ease both}
.social:nth-child(1){animation-delay:.1s}.social:nth-child(2){animation-delay:.18s}.social:nth-child(3){animation-delay:.26s}.social:nth-child(4){animation-delay:.34s}
svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg .fill{fill:currentColor;stroke:none}
.social strong{display:block;font-size:1.125rem;font-weight:600;letter-spacing:.01em}
.social small{display:block;font-size:.875rem;color:#c9b8bb;margin-top:5px;overflow-wrap:anywhere}
.arrow{margin-left:auto;font-size:1.5rem;color:#e6c6cb;transition:transform .2s}
a:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(hover:hover){.social:hover{transform:translateY(-3px);border-color:#ff546d;background:linear-gradient(110deg,#511721f5,#200a0ff5);box-shadow:0 8px 32px #d0002830}.social:hover .arrow{transform:translate(2px,-2px)}.location:hover{color:#fff}.location:hover small{text-decoration:underline;text-underline-offset:4px}}
.social:active{transform:scale(.975);border-color:#ff7187;background:#50101e}
footer{margin-top:34px;animation:arrive .8s .3s ease both}
.location{display:flex;justify-content:center;gap:10px;align-items:flex-start;text-align:center;color:#e2d5d7;font-size:.875rem;line-height:1.6;padding:8px 0}
.location svg{width:18px;height:18px;margin-top:2px;color:#ff667d}
.location small{display:block;font-size:.8125rem;color:#bda4a9;margin-top:5px}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){main{width:calc(100% - 28px)}.social{padding:16px;gap:14px}.social small{font-size:.8125rem}}
@media(orientation:landscape) and (max-height:600px){main{padding-top:24px}.logo{width:150px}.eyebrow{margin-bottom:20px}footer{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}