@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--panel:rgba(5,8,10,.80);--line:rgba(255,255,255,.18);--cyan:#20d9ff;--gold:#d7a83a;--text:#f6f7f8;--muted:#aeb5bb}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#050608;color:var(--text);font-family:Inter,system-ui,sans-serif}
body{min-height:100vh;overflow-x:hidden}
/* NÃO HÁ NENHUMA OUTRA IMAGEM: apenas esta imagem ocupa o fundo. */
.bg{position:fixed;inset:0;width:100vw;height:100vh;background-image:url("assets/backgrounds/office.jpg");background-position:center center;background-size:cover;background-repeat:no-repeat;background-color:#050608;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(0,0,0,.22) 60%,rgba(0,0,0,.38))}
main{position:relative;z-index:5;width:min(940px,92vw);min-height:100vh;margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8vh 0 7vh;transform:translateY(-11vh)}
.projects{transform:translateY(-150px);width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 auto -58px}
.card{position:relative;min-height:190px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 45px rgba(0,0,0,.42);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 55px rgba(0,0,0,.52)}
.card.diamond{border-color:rgba(32,217,255,.62)}
.card.zero{border-color:rgba(215,168,58,.62)}
.card.trading{border-color:rgba(24,185,238,.62)}
.card .shine{position:absolute;inset:-80px;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.11),transparent 55%);pointer-events:none}
.card-content{position:relative;height:100%;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.project-logo{max-width:78%;max-height:62px;object-fit:contain;margin-bottom:11px}
.diamond .project-logo{filter:drop-shadow(0 0 13px rgba(32,217,255,.22))}
.zero .project-logo{filter:drop-shadow(0 0 15px rgba(215,168,58,.22))}
.trading .project-logo{width:52px;height:52px;border-radius:13px;filter:drop-shadow(0 0 13px rgba(24,185,238,.22))}
.card h2{font-size:14px;margin:0 0 5px;letter-spacing:.05em}
.card p{font-size:9px;color:var(--muted);margin:0}
.offer{display:inline-block;margin-top:9px;padding:7px 11px;border-radius:999px;background:var(--gold);color:#080705;font-size:9px;font-weight:800}
.socials{transform:translateY(-70px);width:min(700px,100%);display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 auto}
.social{height:64px;border:1px solid var(--line);border-radius:14px;background:rgba(6,8,10,.72);display:flex;align-items:center;justify-content:center;color:white;transition:transform .2s ease,border-color .2s ease,background .2s ease;cursor:pointer;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.social:hover{border-color:rgba(255,255,255,.5);background:rgba(10,13,16,.86);transform:translateY(-2px)}
.social-platform{display:flex;align-items:center;justify-content:center;width:25.5px;height:25.5px;flex:0 0 25.5px}.social-platform img{width:22.5px;height:22.5px;object-fit:contain}.social-separator{width:1px;height:21px;background:rgba(255,255,255,.18);margin:0 5.25px}.social-brand{display:flex;align-items:center;justify-content:center;width:36px;height:25.5px;flex:0 0 36px}.social-brand img{max-width:34.5px;max-height:24px;width:auto;height:auto;object-fit:contain}.social-brand .seventeen-brand{filter:brightness(0) invert(1) drop-shadow(0 0 5px rgba(255,255,255,.15))}.social-brand .diamond-brand{filter:drop-shadow(0 0 6px rgba(32,217,255,.25))}
@media(max-width:700px){.bg{background-position:center center}main{width:min(94vw,540px);padding:5vh 0}.projects{grid-template-columns:1fr;gap:10px;width:100%;transform:translateY(-35px);margin-bottom:-25px}.card,.card-content{min-height:145px}.socials{gap:8px;transform:none}.social{height:56px}.social-platform{width:30px;height:30px;flex-basis:30px}.social-platform img{width:27px;height:27px}.social-separator{height:24px;margin:0 5px}.social-brand{width:42px;height:30px;flex-basis:42px}.social-brand img{max-width:40px;max-height:28px}}

.music{width:min(640px,100%);margin:14px auto 0;transform:translateY(-70px);border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(6,8,10,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 14px 38px rgba(0,0,0,.34);display:flex;align-items:center;gap:14px;padding:10px 12px;color:#fff}
.music-cover{width:48px;height:48px;flex:0 0 42px;border-radius:10px;background:#101418;display:grid;place-items:center;font-size:23px;font-weight:800}
.music-info{min-width:0;flex:1;text-align:left}.music-artist{font-size:9px;color:#aeb5bb;margin-bottom:2px}.music-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-time{font-size:8px;color:#8e969d;margin-top:4px;display:flex;justify-content:space-between}.music-progress{height:3px;background:rgba(255,255,255,.15);border-radius:99px;margin-top:5px;overflow:hidden}.music-progress span{display:block;width:0;height:100%;background:#20d9ff;border-radius:99px}.music-button{width:42px;height:42px;flex:0 0 38px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.04);color:white;cursor:pointer;font-size:13px}.music-button:hover{background:rgba(255,255,255,.10)}
@media(max-width:700px){main{transform:translateY(-7vh)}.socials{transform:translateY(-45px)}.music{margin-top:10px;transform:translateY(-45px)}}