*{box-sizing:border-box}
:root{
  --bg:#050007;
  --bg2:#0d0711;
  --panel:#131018;
  --panel2:#1a0c22;
  --border:rgba(153,1,241,.34);
  --border-soft:rgba(255,255,255,.12);
  --text:#fff;
  --muted:#bdb0c7;
  --purple:#9901f1;
  --purple2:#c35cff;
  --deep:#170020;
  --shadow:0 18px 65px rgba(0,0,0,.42);
}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%,rgba(153,1,241,.16),transparent 30%),
    radial-gradient(circle at 82% 10%,rgba(255,255,255,.04),transparent 24%),
    #050007;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(153,1,241,.38) 1px,transparent 1px);
  background-size:210px 210px;
  opacity:.18;
}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:82px;
  padding:14px 30px;
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--border);
  background:rgba(5,0,7,.92);
  backdrop-filter:blur(16px);
}
.brand{display:flex;align-items:center;gap:14px;min-width:330px;text-decoration:none;color:white}
.brand-logo{width:58px;height:58px;border-radius:16px;object-fit:cover;box-shadow:0 0 28px rgba(153,1,241,.52)}
.brand h1{margin:0;font-size:30px;letter-spacing:-.045em}
.brand p{margin:4px 0 0;color:#d6c9df;font-size:14px}
.nav-tabs{flex:1;display:flex;justify-content:center;gap:10px}
.nav-tab{
  border:1px solid transparent;
  background:transparent;
  color:#c8bbd1;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.nav-tab:hover,.nav-tab.active{color:#fff;border-color:var(--border);background:rgba(255,255,255,.07)}
.discord-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:white;
  text-decoration:none;
  padding:14px 22px;
  border-radius:14px;
  font-weight:950;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 0 26px rgba(153,1,241,.38);
}
.discord-btn svg{width:21px;height:21px}
.page{display:none}
.page.active{display:block}
.hero{
  max-width:1280px;
  margin:34px auto 22px;
  padding:0 24px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,.95fr);
  gap:22px;
}
.hero-card{
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(86,0,122,.9),rgba(28,10,38,.9));
  border-radius:22px;
  padding:44px 48px;
  box-shadow:var(--shadow);
}
.eyebrow,.section-kicker{
  display:inline-flex;
  color:#fff;
  font-size:13px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.22em;
  margin-bottom:14px;
}
.hero h2{margin:0;max-width:720px;font-size:46px;line-height:.98;letter-spacing:-.055em}
.hero p{color:#f0dfff;font-size:16px;line-height:1.55;max-width:760px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat{border:1px solid var(--border);background:rgba(255,255,255,.055);border-radius:18px;padding:24px}
.stat strong{display:block;font-size:34px;letter-spacing:-.04em}
.stat span{color:#dac0ec;font-size:14px}
.controls{
  max-width:1280px;
  margin:0 auto 28px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 210px 210px;
  gap:12px;
}
input,select{
  width:100%;
  color:white;
  background:#08050c;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px;
  font-weight:850;
  outline:none;
}
select option{background:#21142b;color:#fff}
input:focus,select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(153,1,241,.25)}
.grid{
  max-width:1280px;
  margin:0 auto 60px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}
.card{
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border-radius:20px;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}
.thumb{width:100%;aspect-ratio:1/0.72;object-fit:cover;display:block;background:#4a0a61}
.card-body{padding:18px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag{
  color:white;
  font-weight:950;
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(153,1,241,.78),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.18);
}
.card h3{margin:0 0 12px;font-size:20px}
.meta{font-size:12px;color:#d9c1e5;line-height:1.7;word-break:break-all}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.actions button{border:0;border-radius:13px;padding:13px;color:#fff;font-weight:950;cursor:pointer}
.btn-3d{background:linear-gradient(135deg,#c35cff,#7700c5)}
.btn-copy{background:rgba(255,255,255,.08);border:1px solid var(--border)!important}
.empty{display:none;max-width:1280px;margin:0 auto 60px;padding:24px;color:var(--muted)}
.info-page,.socials-page,.projects-page{max-width:980px;margin:0 auto 80px;padding:0 24px}
.about-hero{margin-top:42px}
.about-title{display:flex;align-items:center;gap:22px}
.about-title img{width:78px;height:78px;border-radius:16px;object-fit:cover}
.about-title h2,.center-title h2{margin:0;font-size:54px;line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.about-title span,.center-title span{color:var(--purple2)}
.about-hero p{margin-top:26px;color:#c8bbd1;font-size:16px;line-height:1.85;max-width:900px}
.section-line{margin:48px 0 22px;display:flex;align-items:center;gap:18px}
.section-line span{color:#fff;font-size:15px;font-weight:950;letter-spacing:.22em;text-transform:uppercase}
.section-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(153,1,241,.65),transparent)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-card{border:1px solid var(--border);background:#100917;border-radius:16px;padding:26px}
.service-card h3{margin:0 0 14px;color:#fff;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.service-card ul{margin:0;padding-left:18px;color:#c8bbd1;line-height:1.8}
.service-card li::marker{color:var(--purple2)}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;color:#c8bbd1}
.workflow-grid div{display:flex;gap:12px;align-items:flex-start}
.workflow-grid b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(153,1,241,.25);color:#fff;flex:0 0 auto}
.mission-card{margin-top:46px;border:1px solid var(--border);background:rgba(153,1,241,.08);border-radius:16px;padding:28px;color:#d9cce2;line-height:1.7}
.mission-card strong{color:#fff}
.mission-card a,footer a{color:#fff;text-decoration:none;font-weight:900}
.center-title{text-align:center;margin:62px 0 46px}
.center-title p{color:#c8bbd1;font-size:16px}
.social-list{max-width:560px;margin:0 auto 80px;display:grid;gap:18px}
.social-row{
  text-decoration:none;
  color:white;
  display:flex;
  align-items:center;
  gap:22px;
  border:1px solid var(--border);
  background:#100917;
  border-radius:16px;
  padding:24px;
  transition:.2s ease;
}
.social-row:hover{transform:translateY(-2px);border-color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.social-icon{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;color:white;font-size:30px;font-weight:950;background:linear-gradient(135deg,var(--purple),#3c005f)}
.social-icon svg{width:30px;height:30px}
.social-row span{display:block;color:#b7a9c0;font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.social-row strong{display:block;margin-top:4px;font-size:18px}
.projects-page{max-width:1220px}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-card{overflow:hidden;border:1px solid var(--border);background:#100917;border-radius:20px;cursor:pointer;transition:.2s ease}
.project-card:hover{transform:translateY(-3px);border-color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.32)}
.project-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#1a0822}
.project-card div{padding:22px}
.project-card h3{margin:0 0 8px;font-size:24px}
.project-card p{margin:0;color:#c8bbd1;line-height:1.55}
.project-card small{display:block;color:#fff;text-transform:uppercase;letter-spacing:.16em;font-weight:950;margin-bottom:8px}
.projects-help{margin:28px auto 0;color:#c8bbd1;text-align:center}
.projects-help code{color:#fff;background:#15101c;border:1px solid var(--border);padding:3px 7px;border-radius:6px}
.project-modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.84);backdrop-filter:blur(12px);padding:24px}
.project-modal.open{display:flex}
.project-modal-box{position:relative;width:min(1240px,96vw);max-height:92vh;display:grid;grid-template-columns:minmax(0,1fr) 280px;border:1px solid var(--border);background:#09050d;border-radius:22px;overflow:hidden}
.project-close{position:absolute;right:16px;top:14px;z-index:2;border:1px solid var(--border);background:rgba(0,0,0,.55);color:white;border-radius:12px;width:42px;height:42px;font-size:28px;cursor:pointer}
.project-large{background:#030104;display:grid;place-items:center;min-height:680px}
.project-large img{max-width:100%;max-height:88vh;object-fit:contain}
.project-side{border-left:1px solid var(--border);padding:24px;background:#100917;overflow:auto}
.project-category{color:#fff;text-transform:uppercase;letter-spacing:.14em;font-weight:950;font-size:12px}
.project-side h3{font-size:24px;margin:10px 0}
.project-side p{color:#c8bbd1;line-height:1.6}
.project-thumbs{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.project-thumb{border:2px solid transparent;border-radius:12px;padding:0;background:transparent;cursor:pointer;overflow:hidden}
.project-thumb.active{border-color:#fff}
.project-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.modal{position:fixed;inset:0;display:none;z-index:50;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.76);backdrop-filter:blur(10px)}
.modal.open{display:flex}
.modal-box{width:min(1120px,96vw);max-height:90vh;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:#100716;box-shadow:0 28px 90px rgba(0,0,0,.58)}
.modal-head{padding:18px 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.modal-head strong{font-size:18px}
.modal-head small{display:block;color:#c6a7d3;margin-top:4px;font-weight:900;text-transform:uppercase}
.close{color:white;border:1px solid var(--border);background:rgba(255,255,255,.05);border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.modal-content{display:grid;grid-template-columns:minmax(0,1fr) 292px;min-height:620px}
.viewer-wrap{position:relative;min-height:620px;background:radial-gradient(circle at center,rgba(98,0,140,.42),#160020 78%)}
#viewer3d{width:100%;height:100%;min-height:620px;display:block;background:radial-gradient(circle at center,rgba(98,0,140,.42),#160020 78%)}
.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;color:#dac4e6;font-weight:900;pointer-events:none}
.viewer-loading.hidden{display:none}
.viewer-note{position:absolute;left:18px;bottom:18px;font-size:12px;color:white;background:rgba(0,0,0,.55);padding:9px 12px;border-radius:10px}
.viewer-panel{padding:24px;border-left:1px solid var(--border);background:rgba(255,255,255,.035)}
.panel-block{margin-bottom:24px}
.panel-block label{display:block;margin-bottom:10px;color:#d4c6de;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.09em}
.color-palette{display:grid;grid-template-columns:repeat(6,30px);gap:10px}
.color-dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer}
.color-dot.active{outline:3px solid #fff;outline-offset:2px}
#brightnessRange{accent-color:var(--purple);padding:0}
.reset-btn{width:100%;padding:13px;border-radius:12px;color:white;font-weight:950;cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.06)}
.panel-help{margin-top:24px;border-top:1px solid var(--border);padding-top:18px;color:#d4c6de;font-size:14px;line-height:1.55}
.panel-help strong{display:block;color:white;margin-bottom:8px}
footer{border-top:1px solid var(--border);padding:42px 24px 55px;text-align:center;color:#c8bbd1}
footer img{width:60px;height:60px;object-fit:cover;border-radius:14px;display:block;margin:0 auto 12px}
footer strong{display:block;color:#fff;font-size:20px;text-transform:uppercase;letter-spacing:.15em}
@media (max-width:1050px){
  .topbar{padding:14px 20px;flex-wrap:wrap}
  .brand{min-width:0}
  .nav-tabs{order:3;width:100%;justify-content:flex-start;overflow:auto}
  .hero{grid-template-columns:1fr}
  .controls{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-grid,.workflow-grid,.projects-grid{grid-template-columns:1fr}
  .modal-content,.project-modal-box{grid-template-columns:1fr}
  .viewer-panel,.project-side{border-left:0;border-top:1px solid var(--border)}
  .project-large{min-height:420px}
  .project-thumbs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .hero h2,.about-title h2,.center-title h2{font-size:36px}
  .brand h1{font-size:23px}
}


/* ===== V5 refinamentos MT Studio ===== */
.brand h1{
  text-transform:uppercase;
}
.brand p{
  color:#fff;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.12em;
}
.hero-card{
  padding-top:54px;
  padding-bottom:54px;
}
.tiktok-mark{
  background:#050505;
  border:1px solid rgba(255,255,255,.14);
}
.tiktok-mark svg{
  width:30px;
  height:30px;
  filter:drop-shadow(2px 0 #25f4ee) drop-shadow(-2px 0 #fe2c55);
}
.projects-help{
  display:none !important;
}
.project-card small{
  display:none !important;
}
.project-card h3{
  font-size:25px;
  margin-bottom:8px;
}
.project-modal-box{
  height:min(860px,92vh);
}
.project-large{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.project-large img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.project-large img:not([src]),
.project-large img[src=""]{
  display:none;
}
.project-image-loading{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:#030104;
}
.project-image-loading.hidden{
  display:none;
}
.project-side{
  overflow-y:auto;
  overscroll-behavior:contain;
  max-height:100%;
}
.project-thumbs{
  padding-bottom:24px;
}
@media (max-width:1050px){
  .project-side{
    max-height:260px;
  }
}


/* ===== V6 ajustes finais ===== */

/* Frase do topo mais fina para destacar mais o nome MT STUDIO */
.brand p{
  font-weight:600 !important;
  letter-spacing:.16em !important;
  opacity:.92;
}

/* TikTok no mesmo padrão visual do Discord e Instagram */
.tiktok-mark{
  background:linear-gradient(135deg,var(--purple),#3c005f) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.tiktok-mark svg{
  width:30px;
  height:30px;
  color:#fff;
  filter:none !important;
}