/* Rayano holding page. Visual language from the LinkedIn teaser film (palette, glows, grain, Inter + Poppins). */
@font-face{font-family:Inter;src:url("../assets/fonts/inter.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Poppins;src:url("../assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
:root{--ink:#0f172a;--body:#475569;--muted:#64748b;--violet:#7c44ea;--violet-soft:#ede4fd;--violet-line:#c9b2f7;--brand:#6b29a8;--lilac:#c9b2ff}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#0b0420;color-scheme:dark}
html,body{height:100%}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- sky: full-page background, always gently moving ---- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(160deg,#0b0420 0%,#150838 50%,#0d0529 100%)}
.sky .glow{position:absolute;border-radius:50%;opacity:.65;will-change:transform}
.sky .a{width:min(900px,110vw);height:min(800px,100vw);right:-22vw;top:-28vh;background:radial-gradient(closest-side,#7c3aed,rgba(124,58,237,0));animation:drift-a 23s ease-in-out infinite alternate}
.sky .b{width:min(900px,110vw);height:min(760px,95vw);left:-26vw;bottom:-32vh;background:radial-gradient(closest-side,#5b21b6,rgba(91,33,182,0));animation:drift-b 29s ease-in-out infinite alternate}
.sky .c{width:min(600px,80vw);height:min(520px,70vw);left:38%;top:48%;background:radial-gradient(closest-side,rgba(56,189,248,.24),rgba(56,189,248,0));animation:drift-c 19s ease-in-out infinite alternate}
.sky .grain{position:absolute;inset:0;opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-9vw,7vh) scale(1.12)}}
@keyframes drift-b{from{transform:translate(0,0) scale(1.05)}to{transform:translate(10vw,-6vh) scale(.94)}}
@keyframes drift-c{from{transform:translate(-50%,-50%) translate(-6vw,4vh)}to{transform:translate(-50%,-50%) translate(7vw,-5vh)}}

/* ---- layout ---- */
main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-top:env(safe-area-inset-top)}
.film{position:relative;flex:0 0 auto;display:grid;place-items:center}
.frame{position:relative;--auto:min(100vw,calc(100vh - 171px));width:var(--size,var(--auto));height:var(--size,var(--auto))}
@supports (height:100svh){.frame{--auto:min(100vw,calc(100svh - 171px))}}
#stage{position:absolute;left:0;top:0;width:1080px;height:1080px;transform-origin:0 0;transform:scale(var(--s,.36));font-family:Inter,sans-serif;color:var(--ink);transition:opacity 1.2s ease}
#stage.away{opacity:0}
.invite{position:relative;z-index:1;text-align:center;padding:8px 20px 0;font:400 15px/1.5 Inter,system-ui,sans-serif;color:rgba(233,221,255,.82);text-wrap:balance}
.invite a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 18px;border-radius:999px;border:1.5px solid rgba(201,178,255,.6);background:rgba(124,68,234,.22);color:#f1e9ff;font-weight:600;text-decoration:none;transition:background .25s ease,border-color .25s ease}
.invite a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 10px var(--lilac)}
.invite a:hover{background:rgba(124,68,234,.4);border-color:var(--lilac)}
.invite a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.invite .br{display:block}
.invite a{margin-top:12px}
footer{position:relative;z-index:1;text-align:center;padding:16px 20px calc(16px + env(safe-area-inset-bottom));font:400 12px Inter,system-ui,sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.45)}
@media (min-width:720px){.frame{--auto:min(100vw,calc(100vh - 124px))}@supports (height:100svh){.frame{--auto:min(100vw,calc(100svh - 124px))}}.invite{font-size:17px}.invite .br{display:inline}.invite a{margin:0 0 0 10px}footer{font-size:13px;padding-bottom:22px}}

/* ---- film stage (from teaser.css, unchanged) ---- */
#stage .beat,#stage .layer{position:absolute;inset:0}
.layer-cap{position:absolute;inset:0;pointer-events:none;z-index:50}
.cap{position:absolute;left:0;right:0;top:64px;padding:0 64px;text-align:center;font-family:Poppins,sans-serif;font-weight:600;font-size:56px;color:#fff;letter-spacing:-.02em;line-height:1.12;text-shadow:0 4px 30px rgba(10,0,30,.55)}
.cap .ln{display:block}
.cap .w{display:inline-block;white-space:pre}
.glass{position:absolute;padding:12px;border-radius:30px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.26);box-shadow:0 40px 100px rgba(4,0,18,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.card{background:#fff;border-radius:20px;position:relative;overflow:hidden}
.av{border-radius:50%;display:grid;place-items:center;font-family:Inter;font-weight:600;color:#fff;flex:none}
.app{position:absolute;display:flex;align-items:center;gap:14px;width:330px;padding:14px 18px;background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(4,0,18,.45)}
.app .av{width:46px;height:46px;font-size:18px}
.app .nm{font:600 20px Inter;color:var(--ink);white-space:nowrap}
.app .rl{font:400 15px Inter;color:var(--muted);white-space:nowrap;margin-top:2px}
.app .cv{margin-left:auto;font:600 14px Inter;color:var(--violet);background:var(--violet-soft);border:1.5px solid var(--violet-line);border-radius:8px;padding:3px 8px}
.pill{position:absolute;left:50%;transform:translateX(-50%);padding:8px;border-radius:999px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.26)}
.pill .in{background:#fff;border-radius:999px;padding:12px 30px;font:500 26px Inter;color:#475569;white-space:nowrap}
.pill b{font-weight:700;color:var(--violet)}
.chip{position:absolute;padding:12px 22px;border-radius:999px;background:rgba(36,14,84,.82);border:1.5px solid rgba(201,178,255,.55);color:#fff;font:500 24px Inter;white-space:nowrap;box-shadow:0 10px 30px rgba(10,0,30,.35)}
.line{height:12px;border-radius:6px;background:#e2e8f0;margin-top:14px}
.still-head{position:absolute;left:0;right:0;top:70px;text-align:center;font:600 76px/1.08 Poppins,sans-serif;letter-spacing:-.025em;color:#fff;text-shadow:0 6px 40px rgba(10,0,30,.6)}
.still-head span{color:var(--lilac)}

/* ---- no JS: a calm brand card ---- */
.nojs{display:flex;flex-direction:column;align-items:center;gap:22px}
.nojs img{height:120px}
.nojs .cs{display:inline-flex;align-items:center;height:44px;padding:0 28px;border-radius:999px;background:#fff;color:#5b21b6;font:600 18px Inter,sans-serif}

@media (prefers-reduced-motion:reduce){
  .sky .glow{animation:none}
  #stage{transition:none}
  .invite a{transition:none}
}

/* ---- 404 ---- */
.lost{align-items:center;justify-content:center;text-align:center;padding:24px;gap:14px}
.lost-logo{height:clamp(96px,22vw,150px);margin-bottom:10px;filter:drop-shadow(0 20px 60px rgba(124,58,237,.5))}
.lost h1{font:600 clamp(28px,6vw,44px)/1.1 Poppins,sans-serif;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(10,0,30,.55)}
.lost p{font:400 17px Inter,sans-serif;color:rgba(233,221,255,.82)}
.lost .home{margin-top:12px;display:inline-flex;align-items:center;height:48px;padding:0 28px;border-radius:999px;background:#fff;color:#5b21b6;font:600 17px Inter,sans-serif;text-decoration:none;box-shadow:0 20px 60px rgba(124,58,237,.5)}
.lost .home:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- languages beat: native scripts use system fonts (no large webfonts) ---- */
.ml{font-family:Inter,"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro","Segoe UI","Noto Sans Devanagari","Kohinoor Devanagari","Nirmala UI","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
.ml:lang(ur){font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",system-ui,sans-serif}
.lchip{display:inline-flex;align-items:center;height:50px;padding:0 22px;border-radius:999px;background:rgba(36,14,84,.6);border:1.5px solid rgba(201,178,255,.35);color:rgba(233,221,255,.85);font-weight:600;font-size:24px;white-space:nowrap;box-shadow:0 10px 30px rgba(10,0,30,.3)}
.still-langs{position:absolute;left:0;right:0;top:790px;display:flex;flex-direction:column;align-items:center;gap:22px}
.still-langs .t{font:600 40px Poppins,sans-serif;letter-spacing:-.02em;color:#fff}
.still-langs .t span{color:var(--lilac)}
.still-langs .rows{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;max-width:1000px}