:root{--red:#B3141C;--rgb:179,20,28;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--muted:#86868b}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#000;min-height:100%}
body{color:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","SF Arabic","IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang=ar] body{font-family:-apple-system,BlinkMacSystemFont,"SF Arabic","IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,"Inter",system-ui,sans-serif}
a,button{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}

.grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(var(--rgb),.14) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--rgb),.14) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);animation:drift 40s linear infinite}
@keyframes drift{to{background-position:48px 48px}}
.glow{position:fixed;width:540px;height:540px;left:50%;top:-170px;translate:-50% 0;background:radial-gradient(circle,rgba(var(--rgb),.42),transparent 65%);filter:blur(20px);pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.7;scale:1.06}}

.wrap{position:relative;max-width:440px;margin:0 auto;min-height:100svh;padding:max(2.4svh,14px,env(safe-area-inset-top)) 18px max(1.6svh,10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1.4svh}
.body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2svh}
.lang{position:absolute;top:max(14px,env(safe-area-inset-top));inset-inline-end:18px;z-index:5;height:32px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(28,28,30,.6);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:#f5f5f7;font:600 13px/1 inherit;font-family:inherit;cursor:pointer;transition:transform .5s var(--spring),background .3s}
.lang:hover{background:rgba(var(--rgb),.55)}
.lang:active{transform:scale(.9)}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5svh}
.av{width:clamp(64px,11svh,96px);height:clamp(64px,11svh,96px);border-radius:50%;object-fit:cover;background:#1c1c1e;cursor:pointer;box-shadow:0 0 0 3px #000,0 0 0 5px var(--red),0 20px 60px rgba(var(--rgb),.5)}
.av.in{transition:transform .7s var(--ease),opacity 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:0s}
.av.in:hover{transform:scale(1.06)}
.av.in:active{transform:scale(.96)}
.name{direction:ltr;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;font-size:clamp(40px,min(13vw,7.4svh),62px);font-weight:800;letter-spacing:-.045em;line-height:.92;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.name span{display:block;background-image:linear-gradient(90deg,var(--c) 0 var(--p,0%),#2a2a2c var(--p,0%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.l1{--c:#f5f5f7}.l2{--c:var(--red)}
.name.pop{animation:pop .6s var(--spring)}
@keyframes pop{30%{transform:scale(.94)}}
.tag{font-size:clamp(14px,2svh,17px);color:var(--muted);font-weight:500;letter-spacing:-.01em}
.soc{display:flex;gap:12px;justify-content:center}
.ic{width:clamp(36px,5svh,44px);height:clamp(36px,5svh,44px);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;transition:transform .5s var(--spring),background .3s}
.ic:hover{background:var(--red)}
.ic:active{transform:scale(.86)}
.ic svg{width:44%;height:44%;fill:currentColor}

.cards{display:flex;flex-direction:column;gap:1.4svh}
.card{position:relative;display:block;border-radius:24px;background:#111113;border:1px solid rgba(255,255,255,.09);overflow:hidden;transition:transform .55s var(--spring),border-color .3s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(var(--rgb),.3),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.card:hover::before,.card.touch::before{opacity:1}
.card:hover{border-color:rgba(var(--rgb),.6)}
.card:active{transform:scale(.965)}
.big .img{position:relative;z-index:3;height:clamp(120px,24svh,230px);overflow:hidden;background:#1c1c1e}
.big .img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--s,1.25));filter:blur(var(--b,8px));image-rendering:auto}
.big .img img.live{transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.big .go{box-shadow:0 0 0 0 rgba(var(--rgb),.55)}
.big:hover .go,.big.touch .go{animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(var(--rgb),.55)}70%{box-shadow:0 0 0 12px rgba(var(--rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--rgb),0)}}
.big .cap{position:relative;padding:1.4svh 16px;display:flex;align-items:center;gap:12px}
.txt{flex:1;min-width:0}
.txt h3{font-size:17px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:5px;min-width:0}
.txt h3 .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vb{width:1.32em;height:1.32em;flex-shrink:0;display:block;overflow:visible;margin:-.16em -.1em}
.vb .s{fill:#3A9BDC}
.vb .c{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vb .seal{transform-box:view-box;transform-origin:12px 12px;animation:wig 2.9s ease-in-out infinite}
@keyframes wig{0%,21%{transform:rotate(0)}26%{transform:rotate(-11deg)}31%{transform:rotate(7deg)}35.5%{transform:rotate(-2deg)}39%,100%{transform:rotate(0)}}
.vb .sp,.vb .bd{transform-box:fill-box;transform-origin:center;opacity:0}
.vb .sp{animation:tw 2.9s cubic-bezier(.22,1,.36,1) infinite}
.vb .sp path{fill:none;stroke:#fff;stroke-width:1.15;stroke-linecap:round}
.vb .bd{animation:burst 2.9s ease-out infinite}
.vb .bd circle{fill:#fff}
.vb .s2{animation-delay:1.1s}.vb .s3{animation-delay:1.95s}
@keyframes tw{0%{opacity:0;transform:scale(0)}1.5%{opacity:1;transform:scale(.15)}9%{opacity:1;transform:scale(1)}14%{opacity:1;transform:scale(1)}17.5%{opacity:0;transform:scale(.4)}100%{opacity:0;transform:scale(0)}}
@keyframes burst{0%,14%{opacity:0;transform:scale(.5)}15.5%{opacity:1;transform:scale(.7)}21.5%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
.card:hover .vb,.card.touch .vb{animation:vb .7s var(--spring)}
@keyframes vb{40%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.vb .seal,.vb .sp,.vb .bd{animation:none}.vb .sp,.vb .bd{opacity:0}}
.big .txt h3{font-size:19px;letter-spacing:-.015em}
.txt small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{position:relative;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0;transition:transform .5s var(--spring),background .3s}
.big .go,.card:hover .go{background:var(--red)}
.card:hover .go{transform:rotate(-45deg)}
[dir=rtl] .card:hover .go{transform:rotate(45deg)}
.go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
[dir=rtl] .go svg{transform:scaleX(-1)}
.sm{display:flex;align-items:center;gap:14px;padding:1svh 12px}
.pic{width:clamp(40px,6svh,52px);height:clamp(40px,6svh,52px);border-radius:50%;object-fit:cover;flex-shrink:0;background:#2a2a2c;display:grid;place-items:center;font-weight:700;color:#fff;position:relative;z-index:3;transition:transform .7s var(--ease);will-change:transform}
.card:hover .pic,.card.touch .pic{transform:scale(1.1)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1.2svh}
.tiles .card{border-radius:20px}
.tile{display:flex;align-items:center;gap:10px;padding:1svh 10px}
.tile .pic{width:clamp(34px,5svh,44px);height:clamp(34px,5svh,44px)}
.tile .txt h3{font-size:14px}.tile .txt small{font-size:12px}
.many .big .img{height:clamp(96px,17svh,200px)}
.many .hero{gap:1.1svh}
.many .body{gap:1.8svh}

/* tap on profile photo: it grows into the middle of the page */
.zoom{position:fixed;inset:0;z-index:50;pointer-events:none}
.zoom.open{pointer-events:auto;cursor:pointer}
.zoom .bg{position:absolute;inset:0;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .55s var(--ease)}
.zoom.open .bg{opacity:1}
.zoom img{position:fixed;object-fit:cover;display:none;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);will-change:left,top,width,height,border-radius}

/* copyright line + legal sheet */
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.legal{align-self:center;border:0;background:none;cursor:pointer;font:500 11px/1.3 inherit;font-family:inherit;color:#5c5c61;letter-spacing:.01em;padding:4px 8px 0;border-radius:8px;transition:color .3s}
.legal:hover,.legal:focus-visible{color:var(--red)}
.legal b{font-weight:600;unicode-bidi:isolate}
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;visibility:hidden;transition:visibility 0s .6s}
.sheet.open{visibility:visible;transition:visibility 0s}
.sheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .45s var(--ease)}
.sheet .pane{position:relative;width:100%;max-width:440px;margin:0 12px max(12px,env(safe-area-inset-bottom));padding:22px 20px 18px;border-radius:28px;background:rgba(28,28,30,.86);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .6s cubic-bezier(.32,.72,0,1)}
.sheet.open{pointer-events:auto}
.sheet.open .bg{opacity:1}
.sheet.open .pane{transform:none}
.pane h2{font-size:17px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.pane h2 i{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
.pane p{font-size:13.5px;line-height:1.75;color:#c7c7cc;margin-bottom:10px}
.pane .owner{unicode-bidi:isolate;white-space:nowrap;color:#f5f5f7;font-weight:600}
.pane small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.pane button{margin-top:14px;width:100%;height:46px;border-radius:14px;border:0;background:var(--red);color:#fff;font:600 15px inherit;font-family:inherit;cursor:pointer;transition:transform .4s var(--spring),filter .3s}
.pane button:hover{filter:brightness(1.12)}
.pane button:active{transform:scale(.97)}

.rv{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}
.err{text-align:center;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}.big .img img{transform:none;filter:none}.grid,.glow{animation:none}.name span{--p:100%!important}}