:root{--bg:#0c0a14;--card:rgba(255,255,255,.06);--line:rgba(255,255,255,.1);--txt:#f4f1fb;--mut:rgba(244,241,251,.62);
  --a1:#ff6b3d;--a2:#c14bff;--a3:#3dd6ff;--lime:#d6ff4b;
  --sans:"Bricolage Grotesque",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
em{font-family:var(--serif);font-style:italic;font-weight:400}

.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.b1{width:max(48vw,440px);height:max(48vw,440px);background:var(--a1);top:max(-18vw,-200px);left:max(-12vw,-160px);animation:float1 18s ease-in-out infinite alternate}
.b2{width:max(42vw,400px);height:max(42vw,400px);background:var(--a2);bottom:max(-16vw,-180px);right:max(-10vw,-140px);animation:float2 22s ease-in-out infinite alternate}
.b3{width:max(30vw,300px);height:max(30vw,300px);background:var(--a3);top:40%;left:45%;opacity:.28;animation:float3 26s ease-in-out infinite alternate}
@keyframes float1{to{transform:translate(12vw,10vh) scale(1.1)}}
@keyframes float2{to{transform:translate(-10vw,-12vh) scale(.9)}}
@keyframes float3{to{transform:translate(-20vw,-10vh) scale(1.2)}}
.grain{position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:min(1160px,92vw);margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,90px);padding:clamp(60px,9vh,110px) 0 60px;align-items:start}
.profile{position:sticky;top:clamp(60px,9vh,110px)}
.avatar{position:relative;width:132px;height:132px}
.avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--a1),var(--a2),var(--a3),var(--a1));animation:ring 6s linear infinite}
.avatar img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:50%;object-fit:cover;border:4px solid var(--bg)}
@keyframes ring{to{transform:rotate(360deg)}}
.live{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;font-weight:700;background:var(--lime);color:#111;padding:4px 10px;border-radius:999px}
.handle{margin-top:34px;font-weight:600;color:var(--mut)}
.name{font-size:clamp(3.4rem,7.4vw,6.6rem);line-height:.88;letter-spacing:-.055em;font-weight:800;margin:10px 0 22px}
.name span{display:block}
.name span:last-child{background:linear-gradient(90deg,var(--a1),var(--a2) 60%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}
.bio{font-size:1.18rem;line-height:1.5;color:var(--mut);max-width:440px}
.bio em{color:var(--txt);font-size:1.15em}
.metrics{display:flex;gap:28px;margin:30px 0}
.metrics b{font-size:2rem;font-weight:800;letter-spacing:-.04em}
.metrics b::after{content:"K"}
.metrics span{display:block;font-size:.85rem;color:var(--mut)}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px);transition:transform .35s var(--ease),background .3s}
.socials a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--txt);color:var(--bg)}
.socials svg{width:20px;height:20px}

.links{display:flex;flex-direction:column;gap:14px}
.feature{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;display:block;isolation:isolate}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);z-index:-2}
.feature:hover img{transform:scale(1.06)}
.feature-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(12,10,20,.9));z-index:-1}
.pill{position:absolute;top:16px;left:16px;font-size:.8rem;font-weight:700;background:rgba(12,10,20,.55);backdrop-filter:blur(10px);padding:7px 12px;border-radius:999px;border:1px solid var(--line)}
.feature-txt{position:absolute;left:24px;right:24px;bottom:22px}
.feature-txt h2{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.02;letter-spacing:-.04em;font-weight:800;max-width:520px}
.feature-txt p{margin-top:8px;color:var(--lime);font-weight:600}

.link{display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:22px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .4s var(--ease),background .3s,border-color .3s;position:relative;overflow:hidden}
.link::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--a1),var(--a2));opacity:0;transition:opacity .4s;z-index:-1}
.link:hover{transform:translateY(-3px) scale(1.01);border-color:transparent}
.link:hover::before{opacity:1}
.ico{width:50px;height:50px;flex:none;display:grid;place-items:center;font-size:1.5rem;border-radius:16px;background:rgba(255,255,255,.08)}
.txt{flex:1;display:flex;flex-direction:column}
.txt b{font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.txt small{font-size:.9rem;color:var(--mut)}
.link:hover small{color:rgba(255,255,255,.85)}
.arr{font-size:1.3rem;transition:transform .35s var(--ease)}
.link:hover .arr{transform:translate(3px,-3px) rotate(45deg)}
.link.hot{border-color:rgba(214,255,75,.4)}
.link.hot .ico{background:var(--lime)}

.grid-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px}
.grid-head h3{font-size:1.4rem;letter-spacing:-.03em}
.grid-head a{color:var(--mut);font-size:.95rem}
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.post{position:relative;aspect-ratio:9/14;border-radius:18px;overflow:hidden}
.post img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover img{transform:scale(1.08)}
.post span{position:absolute;left:8px;bottom:8px;font-size:.78rem;font-weight:700;background:rgba(12,10,20,.6);padding:4px 8px;border-radius:999px;backdrop-filter:blur(6px)}

.newsletter{margin-top:10px;padding:26px;border-radius:26px;background:var(--txt);color:var(--bg);display:grid;gap:18px}
.newsletter h3{font-size:1.7rem;letter-spacing:-.04em;font-weight:800}
.newsletter p{color:rgba(12,10,20,.65);margin-top:4px}
.nl-row{display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px;border:1px solid rgba(12,10,20,.1)}
.nl-row input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:1rem;padding:0 14px;background:transparent}
.nl-row button{font:inherit;font-weight:700;border:0;border-radius:999px;padding:13px 22px;background:var(--bg);color:#fff;cursor:pointer;transition:transform .3s var(--ease)}
.nl-row button:hover{transform:scale(1.04)}

.collab{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 28px;border-radius:26px;background:linear-gradient(135deg,var(--a1),var(--a2));transition:transform .4s var(--ease)}
.collab:hover{transform:translateY(-4px) rotate(-.4deg)}
.kick{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.8}
.collab h3{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1;letter-spacing:-.045em;font-weight:800;margin:8px 0 10px}
.collab .sm{opacity:.85}
.big-arr{font-size:3rem;line-height:1;transition:transform .4s var(--ease)}
.collab:hover .big-arr{transform:rotate(45deg)}

.foot{width:min(1160px,92vw);margin:0 auto;padding:28px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mut);font-size:.92rem}
.foot a{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.concept-label{color:var(--lime);font-weight:700}

.js .rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .rv.in{opacity:1;transform:none;filter:none}

@media (max-width:880px){
  .wrap{grid-template-columns:1fr;gap:36px;padding-top:48px}
  .profile{position:static;text-align:center}
  .avatar{margin:0 auto}
  .bio{margin:0 auto}
  .metrics,.socials{justify-content:center}
}
@media (max-width:520px){
  .name{font-size:clamp(3rem,15vw,4.2rem)}
  .metrics{gap:20px}
  .posts{grid-template-columns:repeat(2,1fr)}
  .feature{aspect-ratio:4/5}
  .link{padding:12px 16px 12px 12px}
  .nl-row{flex-direction:column;border-radius:18px}
  .nl-row input{padding:12px}
  .nl-row button{width:100%}
  .foot{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none;filter:none}}