:root{
    --bg:#030303;
    --panel:#090909;
    --text:#f7f7f4;
    --muted:#8e8e89;
    --line:rgba(255,255,255,.14);
    --line-soft:rgba(255,255,255,.06);
    --white:#fff;
    --black:#000;
    --radius:22px;
    --pixel:"Press Start 2P", monospace;
    --sans:"Inter",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.noise{
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:999;
    opacity:.018;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
    background-size:4px 4px;
    mix-blend-mode:soft-light;
}

/* ---------- RGB PIXEL SYSTEM ---------- */
.rgb-text{
    background:linear-gradient(90deg,#7df9ff 0%,#4f8cff 22%,#a864ff 45%,#ff4f9a 67%,#ffd84f 82%,#71ff87 100%);
    background-size:180% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:rgbShift 9s linear infinite;
}

@keyframes rgbShift{
    0%{background-position:0% 50%}
    100%{background-position:180% 50%}
}

.pixel-title{
    font-family:var(--pixel);
    letter-spacing:-.035em;
    line-height:1.12;
    text-transform:uppercase;
    image-rendering:pixelated;
    text-rendering:geometricPrecision;
    filter:drop-shadow(0 0 14px rgba(129,132,255,.08));
}

/* ---------- HEADER ---------- */
header{
    position:fixed;
    inset:0 0 auto 0;
    height:78px;
    padding:0 5vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:100;
    background:rgba(3,3,3,.76);
    border-bottom:1px solid var(--line-soft);
    backdrop-filter:blur(18px);
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand-mark{
    font-family:var(--pixel);
    font-size:15px;
    line-height:1;
    padding:10px 11px;
    border:1px solid rgba(255,255,255,.55);
    position:relative;
    background:#050505;
    color:#ffffff;
    text-shadow:
    0 0 8px rgba(125,249,255,.25),
    0 0 14px rgba(177,108,255,.18);
    overflow:hidden;
    z-index:0;
}

.brand-mark::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:linear-gradient(135deg,#50e7ff,#9b6cff,#ff4f9a,#ffe45c,#58ff91);
    z-index:-2;
    opacity:.7;
}

.brand-mark::after{
    content:"";
    position:absolute;
    inset:1px;
    background:#050505;
    z-index:-1;
}

.brand-name{
    font-family:var(--pixel);
    font-size:11px;
    letter-spacing:-.04em;
    color:#ededeb;
}

nav{display:flex;gap:28px;color:#bcbcb8;font-size:13px}
nav a{transition:.2s}
nav a:hover{color:#fff}

.header-cta{
    border:1px solid var(--line);
    border-radius:999px;
    padding:11px 17px;
    font-size:12px;
    transition:.2s;
}
.header-cta:hover{background:#fff;color:#000}

/* ---------- CORNER PIXEL CHAINS ---------- */
.corner-chain{
    position:absolute;
    width:250px;
    height:220px;
    pointer-events:none;
    opacity:.35;
    z-index:1;
}
.corner-chain.tl{left:-80px;top:30px}
.corner-chain.br{right:-75px;bottom:-20px;transform:rotate(180deg)}

.corner-chain span{
    position:absolute;
    width:54px;
    height:54px;
    border:3px solid rgba(255,255,255,.92);
    animation:cornerRGB 8s linear infinite;
}
.corner-chain span:nth-child(1){left:0;top:0}
.corner-chain span:nth-child(2){left:50px;top:42px}
.corner-chain span:nth-child(3){left:100px;top:82px}
.corner-chain span:nth-child(4){left:150px;top:122px}
.corner-chain span:nth-child(5){left:50px;top:102px}
.corner-chain span:nth-child(6){left:100px;top:142px}

@keyframes cornerRGB{
    0%,100%{border-color:#fff;box-shadow:0 0 0 rgba(255,255,255,0)}
    25%{border-color:#7df9ff;box-shadow:0 0 20px rgba(125,249,255,.10)}
    50%{border-color:#b16cff;box-shadow:0 0 20px rgba(177,108,255,.10)}
    75%{border-color:#ff5b8e;box-shadow:0 0 20px rgba(255,91,142,.10)}
}

/* ---------- HERO ---------- */
.hero{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:150px 7vw 90px;
    overflow:hidden;
    border-bottom:1px solid var(--line-soft);
}

.hero-grid{
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:48px 48px;
    opacity:.14;
    mask-image:linear-gradient(to bottom,transparent 5%,#000 36%,#000 76%,transparent 100%);
}

.hero-inner{
    width:min(860px,66vw);
    position:relative;
    z-index:3;
}

.eyebrow{
    color:#9b9b96;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:30px;
}

.hero-title{
    font-size:clamp(52px,7.4vw,118px);
    font-weight:400;
    max-width:1000px;
}

.hero-title .white{
    color:#fff;
    background:none;
    -webkit-background-clip:initial;
    background-clip:initial;
}

.hero-copy{
    width:min(650px,92%);
    margin-top:34px;
    color:#a5a5a1;
    font-size:clamp(17px,1.7vw,21px);
    line-height:1.65;
}

.actions{
    display:flex;
    gap:12px;
    margin-top:42px;
}

.btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 22px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    transition:.25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-light{background:#fff;color:#000}
.btn-dark{background:rgba(255,255,255,.035);border:1px solid var(--line)}
.btn-dark:hover{background:rgba(255,255,255,.08)}

.tags{
    margin-top:72px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.tags span{
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid var(--line);
    padding:8px 11px;
    border-radius:999px;
    color:#8b8b86;
}

/* ---------- FLOATING BLOCK FIELD ---------- */
.hero-blocks{
    position:absolute;
    right:3vw;
    top:50%;
    transform:translateY(-50%);
    width:min(38vw,590px);
    aspect-ratio:1/1.06;
    z-index:2;
    border:1px solid rgba(255,255,255,.10);
    border-radius:28px;
    background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.035),transparent 52%),
    #050505;
    overflow:hidden;
}

.hero-blocks::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:34px 34px;
}

.block{
    position:absolute;
    width:72px;
    height:72px;
    border:1px solid rgba(255,255,255,.72);
    background:rgba(255,255,255,.015);
    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.48);
    animation:floatBlock 5.8s ease-in-out infinite,rgbBlock 9s linear infinite;
    will-change:transform,border-color,box-shadow;
}

.block::after{
    content:"";
    position:absolute;
    inset:10px;
    border:1px solid rgba(255,255,255,.10);
}

.b1{left:12%;bottom:13%;animation-delay:0s,-1s}
.b2{left:calc(12% + 72px);bottom:13%;animation-delay:-.8s,-2s}
.b3{left:calc(12% + 144px);bottom:13%;animation-delay:-1.6s,-3s}
.b4{left:calc(12% + 72px);bottom:calc(13% + 72px);animation-delay:-2.3s,-4s}
.b5{left:58%;bottom:31%;animation-delay:-1s,-5s}
.b6{left:calc(58% + 72px);bottom:31%;animation-delay:-2.1s,-6s}
.b7{left:calc(58% + 72px);bottom:calc(31% + 72px);animation-delay:-3s,-7s}
.b8{
    left:33%;
    top:15%;
    transform:rotate(9deg);
    animation:floatTilt 6.3s ease-in-out infinite,rgbBlock 9s linear infinite;
    animation-delay:-1.3s,-4.5s
}

@keyframes floatBlock{
    0%,100%{transform:translate3d(0,0,0)}
    25%{transform:translate3d(0,-7px,0)}
    50%{transform:translate3d(0,3px,0)}
    75%{transform:translate3d(0,-4px,0)}
}

@keyframes floatTilt{
    0%,100%{transform:translate3d(0,0,0) rotate(9deg)}
    25%{transform:translate3d(0,-8px,0) rotate(6deg)}
    50%{transform:translate3d(0,4px,0) rotate(11deg)}
    75%{transform:translate3d(0,-5px,0) rotate(8deg)}
}

@keyframes rgbBlock{
    0%,100%{
    border-color:rgba(255,255,255,.78);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.48),0 0 18px rgba(255,255,255,.025)
    }
    20%{
    border-color:rgba(125,249,255,.78);
    box-shadow:inset 0 0 0 1px rgba(125,249,255,.08),0 14px 34px rgba(0,0,0,.48),0 0 20px rgba(125,249,255,.12)
    }
    40%{
    border-color:rgba(83,132,255,.78);
    box-shadow:inset 0 0 0 1px rgba(83,132,255,.08),0 14px 34px rgba(0,0,0,.48),0 0 20px rgba(83,132,255,.12)
    }
    60%{
    border-color:rgba(177,108,255,.78);
    box-shadow:inset 0 0 0 1px rgba(177,108,255,.08),0 14px 34px rgba(0,0,0,.48),0 0 20px rgba(177,108,255,.12)
    }
    80%{
    border-color:rgba(255,91,142,.78);
    box-shadow:inset 0 0 0 1px rgba(255,91,142,.08),0 14px 34px rgba(0,0,0,.48),0 0 20px rgba(255,91,142,.12)
    }
}

/* ---------- CONTENT ---------- */
.section{
    padding:120px 7vw;
    border-bottom:1px solid var(--line-soft);
}

.section-label{
    font-size:10px;
    letter-spacing:.18em;
    color:#777772;
    margin-bottom:58px;
}

.about-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:8vw;
}

.section-title{
    font-size:clamp(38px,5.4vw,78px);
    font-weight:400;
    max-width:900px;
}

.about-copy{
    font-size:19px;
    line-height:1.7;
    color:#999995;
}
.about-copy p+p{margin-top:24px}
.about-copy strong{color:#fff}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:90px;
}

.stat{
    min-height:210px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.007));
}

.stat-number{
    font-family:var(--pixel);
    font-size:clamp(38px,4vw,64px);
    letter-spacing:-.04em;
}
.stat-label{color:#858580;max-width:220px;line-height:1.45}

.project-card{
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    background:#070707;
    display:grid;
    grid-template-columns:70px 1fr 38%;
    min-height:520px;
}

.project-number{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    display:flex;
    justify-content:center;
    align-items:center;
    border-right:1px solid var(--line);
    color:#696965;
    font-size:10px;
    letter-spacing:.25em;
}

.project-content{
    padding:48px 44px;
    display:flex;
    flex-direction:column;
}

.project-meta{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.project-meta span{
    font-size:9px;
    letter-spacing:.14em;
    color:#81817d;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 9px;
}

.project-content h3{
    font-size:clamp(38px,5.6vw,82px);
    margin-top:56px;
    font-weight:400;
}

.project-content p{
    color:#969692;
    line-height:1.7;
    margin-top:25px;
    max-width:620px;
}

.project-visual{
    position:relative;
    border-left:1px solid var(--line);
    overflow:hidden;
    background:radial-gradient(circle at 50% 45%,#171717 0,#0c0c0c 38%,#040404 72%);
}

.project-visual::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
    background-size:34px 34px;
    opacity:.35;
}

.project-visual .block{width:62px;height:62px}
.project-visual .b1{left:12%;bottom:13%}
.project-visual .b2{left:calc(12% + 62px);bottom:13%}
.project-visual .b3{left:calc(12% + 124px);bottom:13%}
.project-visual .b4{left:calc(12% + 62px);bottom:calc(13% + 62px)}
.project-visual .b5{left:58%;bottom:31%}
.project-visual .b6{left:calc(58% + 62px);bottom:31%}
.project-visual .b7{left:calc(58% + 62px);bottom:calc(31% + 62px)}
.project-visual .b8{left:33%;top:15%}

.contact{
    min-height:68vh;
    padding:120px 7vw;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.contact h2{
    font-size:clamp(42px,6vw,90px);
    font-weight:400;
    max-width:1050px;
}

footer{
    min-height:120px;
    border-top:1px solid var(--line-soft);
    padding:34px 7vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#6f6f6a;
    font-size:12px;
}

footer strong{
    font-family:var(--pixel);
    font-size:11px;
    color:#ededeb;
}

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
    nav{display:none}
    .hero-inner{width:100%}
    .hero-blocks{width:58vw;right:-22vw;top:70%;opacity:.6}
    .about-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:1fr}
    .project-card{grid-template-columns:48px 1fr}
    .project-visual{display:none}
}

@media(max-width:620px){
    header{padding:0 20px}
    .brand-name,.header-cta{display:none}
    .hero,.section,.contact{padding-left:20px;padding-right:20px}
    .hero-title{font-size:clamp(38px,11vw,60px)}
    .section-title{font-size:clamp(32px,9vw,50px)}
    .actions{flex-direction:column}
    .btn{width:100%}
    .project-card{grid-template-columns:1fr}
    .project-number{display:none}
    .project-content{padding:30px 24px}
    footer{padding:34px 20px;flex-direction:column;align-items:flex-start;gap:18px}
    .corner-chain{opacity:.17}
}

.section-title,
.project-title,
.contact-title{
    font-family:var(--sans);
    letter-spacing:-.055em;
    line-height:.98;
    text-transform:none;
    font-weight:700;
}

.project-title{
    font-size:clamp(48px,6vw,90px);
    margin-top:56px;
}

.contact-title{
    font-size:clamp(52px,7vw,104px);
    max-width:1100px;
}

.discord-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:34px;
    max-width:920px;
}

.discord-card{
    border:1px solid var(--line);
    border-radius:20px;
    padding:22px;
    background:rgba(255,255,255,.018);
    display:flex;
    flex-direction:column;
    gap:14px;
    transition:.25s ease;
}

.discord-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.035);
}

.discord-card small{
    color:#7f7f7b;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.discord-card strong{
    font-size:18px;
    font-weight:700;
    color:#fff;
}

.discord-card span{
    color:#9a9a96;
    font-size:13px;
    line-height:1.5;
}

.discord-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    margin-top:4px;
    font-size:13px;
    font-weight:700;
    color:#fff;
}

.discord-link::after{
    content:"↗";
    color:#8e8e89;
}

.brand-name{
    font-family:var(--sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:-.02em;
    color:#ededeb;
}

.brand-mark{
    font-family:var(--sans);
    font-weight:800;
    font-size:14px;
    letter-spacing:-.03em;
}

footer strong{
    font-family:var(--sans);
    font-size:13px;
    font-weight:800;
    letter-spacing:-.02em;
    color:#ededeb;
}

.stat-number{
    font-family:var(--sans);
    font-weight:800;
    font-size:clamp(46px,4vw,68px);
    letter-spacing:-.06em;
}

@media(max-width:760px){
    .discord-grid{grid-template-columns:1fr}
}


.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-links{
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:11px 16px;
    font-size:12px;
    font-weight:700;
    transition:.2s ease;
    background:rgba(255,255,255,.025);
}

.header-links:hover{
    background:#fff;
    color:#000;
    border-color:#fff;
}

.socials{
    padding: 120px 7vw;
    border-bottom:1px solid var(--line-soft);
}

.socials-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:34px;
}

.socials-copy{
    color:#858581;
    max-width:520px;
    line-height:1.6;
    font-size:14px;
}

.social-links{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.social-btn{
    min-height:92px;
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:rgba(255,255,255,.016);
    transition:.25s ease;
}

.social-btn:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.3);
    background:rgba(255,255,255,.038);
}

.social-main{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.social-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px;
    display:grid;
    place-items:center;
    background:#080808;
}

.social-icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.social-icon.fill svg{
    fill:currentColor;
    stroke:none;
}

.social-text{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
}

.social-text strong{
    color:#fff;
    font-size:14px;
}

.social-text span{
    color:#858581;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.social-arrow{
    color:#777773;
    font-size:18px;
    flex:0 0 auto;
}

@media(max-width:760px){
    .social-links{grid-template-columns:1fr}
    .socials-head{align-items:flex-start;flex-direction:column}
    .top-actions .header-cta{display:none}
}


.demo-link{
    margin-top:28px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    padding:13px 18px;
    border-radius:999px;
    background:#fff;
    color:#000;
    font-size:13px;
    font-weight:800;
    transition:.25s ease;
}
.demo-link:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(255,255,255,.08);
}
.demo-link .demo-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#000;
    box-shadow:0 0 0 4px rgba(0,0,0,.08);
}
.inkshot-card{
    margin-top:14px;
    min-height:300px;
    border:1px solid var(--line);
    border-radius:24px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    padding:34px;
    background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
}
.inkshot-info{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:28px;
}
.inkshot-kicker{
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#787873;
}
.inkshot-title{
    font-size:clamp(42px,5.3vw,78px);
    font-weight:800;
    letter-spacing:-.055em;
    margin-top:10px;
}
.inkshot-copy{
    color:#969692;
    line-height:1.65;
    max-width:700px;
    margin-top:16px;
}
.inkshot-side{
    min-width:190px;
    border-left:1px solid var(--line-soft);
    padding-left:28px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
}
.inkshot-badge{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#b9b9b5;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 10px;
}
.inkshot-arrow{
    font-size:48px;
    color:#6f6f6b;
}
@media(max-width:760px){
    .inkshot-card{grid-template-columns:1fr}
    .inkshot-side{
    min-width:0;
    border-left:0;
    border-top:1px solid var(--line-soft);
    padding-left:0;
    padding-top:22px;
    align-items:flex-start;
    }
}


.coming-soon-badge{
    margin-top:28px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    padding:11px 15px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    color:#d6d6d2;
    background:rgba(255,255,255,.025);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.coming-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 14px rgba(255,255,255,.35);
    animation:comingPulse 1.8s ease-in-out infinite;
}

@keyframes comingPulse{
    0%,100%{opacity:.45;transform:scale(.9)}
    50%{opacity:1;transform:scale(1.1)}
}


.links-group{
    margin-top:34px;
}

.links-group:first-of-type{
    margin-top:0;
}

.links-group-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
    color:#8c8c87;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.links-group-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line-soft);
}

.creator-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.creator-card{
    border:1px solid var(--line);
    border-radius:22px;
    padding:24px;
    background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.007));
    display:flex;
    flex-direction:column;
    gap:22px;
    min-height:250px;
    transition:.25s ease;
}

.creator-card:hover{
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.28);
    background:rgba(255,255,255,.03);
}

.creator-top{
    display:flex;
    align-items:center;
    gap:14px;
}

.creator-avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:17px;
    color:#fff;
    background:#070707;
}

.creator-name{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.creator-name strong{
    color:#fff;
    font-size:18px;
}

.creator-name span{
    color:#81817d;
    font-size:12px;
}

.creator-bio{
    color:#969692;
    font-size:14px;
    line-height:1.6;
}

.creator-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
}

.creator-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:999px;
    padding:9px 11px;
    font-size:11px;
    color:#d6d6d2;
    background:rgba(255,255,255,.018);
    transition:.2s ease;
}

.creator-pill:hover{
    background:#fff;
    color:#000;
    border-color:#fff;
}

@media(max-width:760px){
    .creator-grid{grid-template-columns:1fr}
}