:root {
  --bg: #080808;
  --bg2: #0d0d0d;
  --bg3: #111111;
  --surface: #161616;
  --surface2: #1c1c1c;
  --border: rgba(255,255,255,0.06);
  --border2: rgba(255,255,255,0.12);
  --text: #f0f0f0;
  --text2: #888;
  --text3: #555;
  --accent: #c8ff00;
  --accent2: #00d9ff;
  --accent3: #ff6b6b;
  --glow: rgba(200,255,0,0.15);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

/* ── CURSOR ── */
#cursor-dot {
  position: fixed; top:0; left:0; width:8px; height:8px;
  background: var(--accent); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform: translate(-50%,-50%);
  transition: transform 0.1s ease;
  mix-blend-mode: difference;
}
#cursor-ring {
  position: fixed; top:0; left:0; width:36px; height:36px;
  border: 1.5px solid rgba(200,255,0,0.5); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform: translate(-50%,-50%);
  transition: transform 0.12s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
#cursor-ring.hovering {
  width: 60px; height: 60px;
  background: rgba(200,255,0,0.05);
  border-color: var(--accent);
}

/* ── LOADER ── */
#loader {
  position: fixed; inset:0; background: var(--bg);
  z-index: 9990; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:24px;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hidden { opacity:0; visibility:hidden; }
.loader-logo {
  font-family: var(--font-display); font-size: 2rem; font-weight:800;
  color: var(--text); letter-spacing:-0.02em;
}
.loader-logo span { color: var(--accent); }
.loader-bar-wrap {
  width: 200px; height: 2px; background: var(--surface2); border-radius:2px; overflow:hidden;
}
.loader-bar {
  height:100%; width:0; background: var(--accent); border-radius:2px;
  animation: loadBar 1.8s cubic-bezier(.4,0,.2,1) forwards;
}
.loader-pct {
  font-family: var(--font-display); font-size:.75rem; color: var(--text3); letter-spacing:.1em;
}
@keyframes loadBar { 0%{width:0} 70%{width:80%} 90%{width:95%} 100%{width:100%} }

/* ── PARTICLES ── */
#particles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle {
  position:absolute; width:2px; height:2px; background:var(--accent);
  border-radius:50%; opacity:0; animation: floatP var(--dur,8s) var(--delay,0s) infinite ease-in-out;
}
@keyframes floatP {
  0%  { opacity:0; transform: translateY(100vh) translateX(0); }
  10% { opacity: var(--op, 0.3); }
  90% { opacity: var(--op, 0.3); }
  100%{ opacity:0; transform: translateY(-20px) translateX(var(--dx, 40px)); }
}

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding:20px 40px; display:flex; align-items:center; justify-content:space-between;
  background: rgba(8,8,8,0); backdrop-filter:blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-bottom .4s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(8,8,8,0.85); backdrop-filter:blur(20px);
  padding:14px 40px; border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: var(--font-display); font-size:1.1rem; font-weight:800;
  color: var(--text); text-decoration:none; letter-spacing:-0.02em;
}
.nav-logo span { color: var(--accent); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a {
  font-family: var(--font-body); font-size:.8rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color: var(--text2); text-decoration:none;
  transition: color .3s ease; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background: var(--accent); transition: width .3s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width:100%; }
.nav-cta {
  font-family: var(--font-body); font-size:.8rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color: var(--bg); background: var(--accent);
  padding:10px 22px; border-radius:4px; text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow: 0 8px 30px rgba(200,255,0,0.3); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  padding:6px; background:none; border:none; z-index:101;
}
.nav-hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--text); border-radius:2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  position:fixed; inset:0;
  background:rgba(8,8,8,0.97); backdrop-filter:blur(24px);
  z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px;
  opacity:0; visibility:hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a {
  font-family:var(--font-display); font-size:clamp(2rem,8vw,2.6rem);
  font-weight:800; color:var(--text); text-decoration:none;
  text-transform:uppercase; letter-spacing:-0.03em;
  transition: color .2s ease;
}
.mobile-menu a:hover { color:var(--accent); }
.mobile-menu-cta {
  font-family:var(--font-body); font-size:.85rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg) !important; background:var(--accent);
  padding:14px 32px; border-radius:4px; margin-top:8px;
}

/* ── SECTIONS COMMON ── */
section { position:relative; z-index:1; }
.container { max-width:1200px; margin:0 auto; padding:0 40px; }
.section-tag {
  font-family: var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color: var(--accent); margin-bottom:16px; display:flex; align-items:center; gap:12px;
}
.section-tag::before {
  content:''; display:block; width:24px; height:1px; background: var(--accent);
}
.section-title {
  font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.05;
  color: var(--text); margin-bottom:20px;
}
.section-title em { font-style:normal; color: var(--text3); }

/* ── HERO ── */
#hero {
  min-height:100vh; display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--surface); border:1px solid var(--border2);
  padding:8px 16px; border-radius:100px; margin-bottom:32px;
  font-size:.75rem; color: var(--text2); letter-spacing:.06em;
}
.hero-badge-dot { width:6px; height:6px; background: var(--accent); border-radius:50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,255,0,.4)} 50%{box-shadow:0 0 0 8px rgba(200,255,0,0)} }
.hero-title {
  font-family: var(--font-display); font-size: clamp(3.5rem,7vw,6rem);
  font-weight:800; letter-spacing:-0.04em; line-height:0.95;
  color: var(--text); margin-bottom:28px;
}
.hero-title .accent { color: var(--accent); }
.hero-title .outline { -webkit-text-stroke: 1.5px var(--text3); color:transparent; }
.hero-typing-wrap {
  font-family: var(--font-display); font-size:1.1rem; font-weight:500;
  color: var(--text2); margin-bottom:20px; min-height:1.4em;
}
#typing-text { color: var(--accent2); }
.cursor-blink { animation: blink .8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-desc { font-size:1rem; color: var(--text2); max-width:480px; margin-bottom:48px; line-height:1.7; }
.hero-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--accent); color: var(--bg); font-family: var(--font-body);
  font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 32px; border-radius:4px; text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(200,255,0,.35); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  border: 1px solid var(--border2); color: var(--text2); font-family: var(--font-body);
  font-size:.85rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 32px; border-radius:4px; text-decoration:none;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(200,255,0,0.04); }
.hero-stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background: var(--border); border:1px solid var(--border); border-radius:8px;
  overflow:hidden; margin-top:56px;
}
.stat { background: var(--surface); padding:20px; text-align:center; }
.stat-num { font-family: var(--font-display); font-size:2rem; font-weight:800; color: var(--accent); }
.stat-label { font-size:.75rem; color: var(--text3); margin-top:4px; letter-spacing:.06em; text-transform:uppercase; }
.hero-visual { position:relative; }
.hero-card {
  background: var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.7);
  animation: floatCard 4s ease-in-out infinite;
}
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.hero-card-bar { background: var(--surface2); padding:12px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); }
.hcb-dot { width:10px; height:10px; border-radius:50%; }
.hcb-dot:nth-child(1){background:#ff5f57} .hcb-dot:nth-child(2){background:#febc2e} .hcb-dot:nth-child(3){background:#28c840}
.hero-card-screen { width:100%; aspect-ratio:16/10; background: var(--bg); position:relative; overflow:hidden; }
.hcs-inner { width:100%; height:100%; padding:20px; display:flex; gap:12px; }
.hcs-side { width:100px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.hcs-item { height:28px; border-radius:4px; background: var(--surface2); opacity:.6; }
.hcs-item.active { background: rgba(200,255,0,0.2); border:1px solid rgba(200,255,0,0.3); opacity:1; }
.hcs-main { flex:1; display:flex; flex-direction:column; gap:10px; }
.hcs-preview {
  flex:1; border-radius:8px;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 50%, #0d0d0d 100%);
  position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.hcs-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:80%; }
.hcp-card { height:60px; border-radius:6px; background: var(--surface2); border:1px solid var(--border); position:relative; overflow:hidden; }
.hcp-card::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.hcp-card:nth-child(1) { background: linear-gradient(135deg, rgba(200,255,0,0.08), rgba(0,217,255,0.05)); }
.hcp-card:nth-child(3) { background: linear-gradient(135deg, rgba(0,217,255,0.08), rgba(200,255,0,0.05)); }
.hcs-toolbar { display:flex; gap:8px; }
.hcs-tb { flex:1; height:28px; border-radius:4px; background: var(--surface2); }
.hcs-tb.accent { background: rgba(200,255,0,0.2); border:1px solid rgba(200,255,0,0.3); }
.hero-float-badge {
  position:absolute; right:-20px; top:20%; background: var(--surface);
  border:1px solid var(--border2); border-radius:10px; padding:12px 16px;
  display:flex; align-items:center; gap:10px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  animation: floatBadge 5s ease-in-out infinite;
}
@keyframes floatBadge { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-6px) translateX(4px)} }
.hfb-icon { width:32px; height:32px; border-radius:8px; background: rgba(200,255,0,0.15); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.hfb-text { font-size:.7rem; color: var(--text2); }
.hfb-text strong { display:block; font-family:var(--font-display); font-size:.85rem; color:var(--text); font-weight:700; }
.hero-float-badge2 {
  position:absolute; left:-30px; bottom:20%; background: var(--surface);
  border:1px solid var(--border2); border-radius:10px; padding:12px 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5); min-width:140px;
  animation: floatBadge2 6s ease-in-out infinite;
}
@keyframes floatBadge2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.hfb2-label { font-size:.65rem; color: var(--text3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.hfb2-stack { display:flex; gap:6px; }
.hfb2-tag { font-size:.65rem; padding:3px 8px; border-radius:100px; background: rgba(200,255,0,0.1); color: var(--accent); border:1px solid rgba(200,255,0,0.2); }

/* ── SOBRE ── */
#sobre { padding:120px 0; }
.sobre-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:center; }
.sobre-img-wrap { position:relative; }
.sobre-img {
  width:100%; aspect-ratio:3/4; border-radius:16px; overflow:hidden;
  background: var(--surface); border:1px solid var(--border); position:relative;
}
.sobre-img-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background: #080808;
}
.sobre-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(20%) contrast(1.05);
  transition: filter .4s ease, transform .6s ease;
}
.sobre-img-inner img:hover {
  filter: grayscale(0%) contrast(1.08);
  transform: scale(1.03);
}
.sobre-img-badge {
  position:absolute; bottom:-16px; right:-16px;
  background: var(--accent); color: var(--bg); border-radius:12px;
  padding:16px 20px; font-family: var(--font-display); font-weight:800;
}
.sib-num { font-size:2rem; display:block; line-height:1; }
.sib-text { font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.sobre-desc { font-size:1.05rem; color: var(--text2); line-height:1.8; margin-bottom:40px; }
.sobre-desc strong { color: var(--text); font-weight:500; }
.sobre-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px; }
.sobre-tag {
  font-size:.75rem; padding:6px 14px; border-radius:4px;
  background: var(--surface); border:1px solid var(--border); color: var(--text2);
  transition: border-color .2s, color .2s;
}
.sobre-tag:hover { border-color: var(--accent); color: var(--accent); }
.sobre-values { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sobre-val { padding:20px; background: var(--surface); border:1px solid var(--border); border-radius:8px; transition: border-color .3s; }
.sobre-val:hover { border-color: var(--border2); }
.sv-icon { font-size:1.3rem; margin-bottom:8px; }
.sv-title { font-family: var(--font-display); font-size:.9rem; font-weight:700; color: var(--text); margin-bottom:4px; }
.sv-desc { font-size:.78rem; color: var(--text3); line-height:1.5; }

/* ── SKILLS ── */
#skills { padding:120px 0; background: linear-gradient(180deg, transparent 0%, rgba(200,255,0,0.015) 50%, transparent 100%); }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:60px; }
.skill-category {
  background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.skill-category:hover { border-color: var(--border2); transform:translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.sc-header { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.sc-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.sc-icon.green { background: rgba(200,255,0,0.12); }
.sc-icon.blue  { background: rgba(0,217,255,0.12); }
.sc-icon.red   { background: rgba(255,107,107,0.12); }
.sc-title { font-family: var(--font-display); font-size:1rem; font-weight:700; }
.skill-item { margin-bottom:16px; }
.si-top { display:flex; justify-content:space-between; margin-bottom:6px; }
.si-name { font-size:.82rem; color: var(--text2); }
.si-pct  { font-size:.78rem; color: var(--text3); font-family: var(--font-display); font-weight:700; }
.si-bar  { height:3px; background: var(--surface2); border-radius:2px; overflow:hidden; }
.si-fill { height:100%; border-radius:2px; width:0; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.si-fill.green { background: linear-gradient(90deg, var(--accent), #a8d400); }
.si-fill.blue  { background: linear-gradient(90deg, var(--accent2), #0099cc); }
.si-fill.red   { background: linear-gradient(90deg, var(--accent3), #cc4444); }
.skills-tools { margin-top:60px; }
.skills-tools-title {
  font-family: var(--font-display); font-size:.8rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color: var(--text3); text-align:center; margin-bottom:24px;
}
.tools-track-wrap { overflow:hidden; position:relative; }
.tools-track-wrap::before,.tools-track-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2;
}
.tools-track-wrap::before { left:0;  background: linear-gradient(90deg,  var(--bg), transparent); }
.tools-track-wrap::after  { right:0; background: linear-gradient(270deg, var(--bg), transparent); }
.tools-track { display:flex; gap:12px; animation: scrollTrack 20s linear infinite; width:max-content; }
@keyframes scrollTrack { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tool-chip {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  background: var(--surface); border:1px solid var(--border); border-radius:8px;
  white-space:nowrap; font-size:.78rem; color: var(--text2); flex-shrink:0;
}
.tool-chip-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }

/* ── PROJETOS ── */
#projetos { padding:120px 0; }
.projetos-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.projetos-blocos { display:flex; flex-direction:column; gap:24px; }
.projetos-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.project-card {
  background: var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .3s ease, box-shadow .4s ease;
  position:relative;
}
.project-card:hover { transform:translateY(-8px); border-color: var(--border2); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.project-preview {
  aspect-ratio:16/10; background: var(--bg); position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.project-card.square .project-preview { aspect-ratio:1/1; }
.project-card.rect   .project-preview { aspect-ratio:4/3; }

/* Preview — Vídeo hover */
.project-video-wrap { cursor: pointer; }
.project-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.project-video-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  transition: opacity .35s ease, background .35s ease;
}
.project-card:hover .project-video-overlay { opacity: 0; }
.pvo-play-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .3s ease, background .3s ease;
}
.project-card:hover .pvo-play-icon { transform: scale(1.1); background: rgba(200,255,0,.2); }

/* Preview — Dashboard */
.preview-dashboard {
  width:100%; height:100%; padding:16px;
  background: linear-gradient(135deg, #0a0a0a 0%, #0f1520 100%);
  display:flex; flex-direction:column; gap:10px;
}
.pd-topbar { height:28px; background: rgba(255,255,255,0.04); border-radius:6px; display:flex; align-items:center; padding:0 10px; gap:8px; }
.pd-tb-circle { width:8px; height:8px; border-radius:50%; }
.pd-tb-circle:nth-child(1){background:rgba(255,95,87,.6)} .pd-tb-circle:nth-child(2){background:rgba(254,188,46,.6)} .pd-tb-circle:nth-child(3){background:rgba(40,200,64,.6)}
.pd-row { display:flex; gap:10px; flex:1; }
.pd-sidebar { width:60px; display:flex; flex-direction:column; gap:6px; }
.pd-sib { height:20px; border-radius:4px; background: rgba(255,255,255,0.04); }
.pd-sib.active { background: rgba(200,255,0,0.15); }
.pd-main { flex:1; display:flex; flex-direction:column; gap:8px; }
.pd-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.pd-card { height:36px; border-radius:6px; background: rgba(255,255,255,0.04); position:relative; overflow:hidden; }
.pd-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40%; border-radius:0 0 6px 6px; }
.pd-card:nth-child(1)::after{background:rgba(200,255,0,0.2)} .pd-card:nth-child(2)::after{background:rgba(0,217,255,0.2)} .pd-card:nth-child(3)::after{background:rgba(255,107,107,0.2)}
.pd-chart { flex:1; background: rgba(255,255,255,0.03); border-radius:6px; position:relative; overflow:hidden; }
.pd-chart-line { position:absolute; bottom:20%; left:0; right:0; height:1.5px; background: rgba(200,255,0,0.4); }
.pd-chart-line::before { content:''; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(200,255,0,.4)); }

/* Preview — Ecommerce */
.preview-ecommerce {
  width:100%; height:100%;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0a1a 100%);
  padding:14px; display:flex; flex-direction:column; gap:8px;
}
.pe-nav { height:22px; background: rgba(255,255,255,.04); border-radius:4px; }
.pe-hero-area { flex:0 0 80px; background: linear-gradient(90deg, rgba(150,0,255,0.1), rgba(255,0,150,0.1)); border-radius:6px; display:flex; align-items:center; justify-content:center; }
.pe-hero-title { width:60%; height:8px; border-radius:4px; background: rgba(255,255,255,0.1); }
.pe-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; flex:1; }
.pe-item { background: rgba(255,255,255,.04); border-radius:6px; display:flex; flex-direction:column; }
.pe-thumb { flex:1; border-radius:6px 6px 0 0; }
.pe-info { height:20px; padding:4px 6px; display:flex; gap:4px; align-items:center; }
.pe-dot { width:4px; height:4px; border-radius:50%; background:rgba(200,255,0,.5); }

/* Preview — App */
.preview-app {
  width:100%; height:100%;
  background: #050510;
  display:flex; align-items:center; justify-content:center;
}
.pa-phone {
  width:60%; aspect-ratio:9/18; border-radius:28px; background: #111;
  border:2px solid rgba(255,255,255,.08); overflow:hidden; display:flex; flex-direction:column;
  box-shadow: 0 0 40px rgba(0,217,255,0.1);
}
.pa-notch { height:20px; background:#050505; display:flex; align-items:center; justify-content:center; }
.pa-notch-inner { width:40px; height:10px; border-radius:10px; background:#000; }
.pa-screen { flex:1; padding:10px; display:flex; flex-direction:column; gap:8px; }
.pa-greeting { font-size:.5rem; color:rgba(255,255,255,.3); }
.pa-card { height:50px; border-radius:10px; background: linear-gradient(135deg, rgba(0,217,255,0.15), rgba(200,255,0,0.08)); border:1px solid rgba(0,217,255,0.1); }
.pa-row { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pa-mini { height:36px; border-radius:8px; background:rgba(255,255,255,.04); }
.pa-mini:nth-child(2){background:rgba(255,107,107,.06)}
.pa-list { display:flex; flex-direction:column; gap:5px; }
.pa-li { height:16px; border-radius:4px; background:rgba(255,255,255,.04); }
.pa-li:nth-child(2){width:80%} .pa-li:nth-child(3){width:60%}

/* Preview — SaaS */
.preview-saas {
  width:100%; height:100%; padding:12px;
  background: linear-gradient(160deg, #050510 0%, #0a0a1f 100%);
  display:flex; flex-direction:column; gap:8px;
}
.ps-header { display:flex; justify-content:space-between; align-items:center; }
.ps-logo { width:40px; height:8px; border-radius:4px; background:rgba(200,255,0,.3); }
.ps-nav { display:flex; gap:4px; }
.ps-ni { width:24px; height:6px; border-radius:3px; background:rgba(255,255,255,.08); }
.ps-hero { flex:0 0 60px; border-radius:8px; background: linear-gradient(135deg, rgba(200,255,0,.06), rgba(0,217,255,.06)); display:flex; align-items:center; justify-content:space-between; padding:0 12px; }
.ps-hero-text { display:flex; flex-direction:column; gap:4px; }
.ps-ht-line { height:6px; border-radius:3px; background:rgba(255,255,255,.1); width:80px; }
.ps-ht-line:nth-child(2){width:50px; background:rgba(200,255,0,.2)}
.ps-hero-btn { width:40px; height:16px; border-radius:8px; background:var(--accent); opacity:.6; }
.ps-features { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; flex:1; }
.ps-feat { background:rgba(255,255,255,.03); border-radius:6px; border:1px solid rgba(255,255,255,.05); padding:8px; display:flex; flex-direction:column; gap:4px; }
.ps-feat-icon { width:14px; height:14px; border-radius:4px; }
.ps-feat-icon.a{background:rgba(200,255,0,.2)} .ps-feat-icon.b{background:rgba(0,217,255,.2)} .ps-feat-icon.c{background:rgba(255,107,107,.2)}
.ps-feat-line { height:4px; border-radius:2px; background:rgba(255,255,255,.06); }
.ps-feat-line:nth-child(3){width:70%}

/* Preview — Motion (quadrado) */
.preview-motion {
  width:100%; height:100%; position:relative; overflow:hidden;
  background: linear-gradient(135deg, #050510 0%, #0d0018 50%, #050510 100%);
  display:flex; align-items:center; justify-content:center;
}
.pm-orb {
  position:absolute; border-radius:50%; filter:blur(30px); opacity:0.45;
  animation: pmFloat var(--dur,5s) var(--delay,0s) ease-in-out infinite alternate;
}
@keyframes pmFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(var(--tx,20px),var(--ty,20px)) scale(1.3); }
}
.pm-grid-lines {
  position:absolute; inset:0; opacity:0.06;
  background-image: linear-gradient(rgba(200,255,0,0.6) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(200,255,0,0.6) 1px, transparent 1px);
  background-size: 32px 32px;
}
.pm-center { position:relative; z-index:1; text-align:center; }
.pm-icon { font-size:2.8rem; display:block; margin-bottom:10px; }
.pm-tag {
  font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(200,255,0,0.6);
  padding:4px 12px; border:1px solid rgba(200,255,0,0.2); border-radius:100px;
}

/* Preview — Brand (retângulo) */
.preview-brand {
  width:100%; height:100%; position:relative; overflow:hidden;
  background: linear-gradient(160deg, #0a0a14 0%, #14080a 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.pb-card {
  width:100%; max-width:200px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
}
.pb-logo-bar { height:14px; width:55%; border-radius:4px; background:linear-gradient(90deg,rgba(255,107,107,0.6),rgba(200,255,0,0.4)); }
.pb-colors { display:flex; gap:8px; }
.pb-color { width:22px; height:22px; border-radius:50%; }
.pb-type { display:flex; flex-direction:column; gap:5px; }
.pb-type-line { height:4px; border-radius:2px; background:rgba(255,255,255,0.08); }
.pb-type-line:nth-child(2){ width:75%; }
.pb-type-line:nth-child(3){ width:50%; }
.pb-badge-row { display:flex; gap:6px; }
.pb-badge { height:18px; flex:1; border-radius:4px; background:rgba(255,255,255,0.04); }

/* Info dos cards */
.project-info { padding:24px; }
.pi-tags { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.pi-tag { font-size:.65rem; padding:4px 10px; border-radius:100px; background: rgba(200,255,0,0.1); color: var(--accent); border:1px solid rgba(200,255,0,0.2); letter-spacing:.06em; text-transform:uppercase; }
.pi-tag.blue { background: rgba(0,217,255,0.1); color: var(--accent2); border-color: rgba(0,217,255,0.2); }
.pi-tag.red  { background: rgba(255,107,107,0.1); color: var(--accent3); border-color: rgba(255,107,107,0.2); }
.pi-title { font-family: var(--font-display); font-size:1.2rem; font-weight:800; color: var(--text); margin-bottom:8px; }
.pi-desc { font-size:.83rem; color: var(--text3); line-height:1.6; margin-bottom:16px; }
.pi-footer { display:flex; align-items:center; justify-content:space-between; }
.pi-link {
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  font-family: var(--font-display); color: var(--text2); text-decoration:none; letter-spacing:.04em;
  transition: color .2s ease; text-transform:uppercase;
}
.pi-link:hover { color: var(--accent); }
.pi-link svg { transition: transform .2s ease; }
.pi-link:hover svg { transform: translate(3px,-3px); }
.pi-metrics { display:flex; gap:16px; }
.pi-metric { text-align:center; }
.pim-num   { font-family: var(--font-display); font-size:1.1rem; font-weight:800; color: var(--accent); }
.pim-label { font-size:.65rem; color: var(--text3); text-transform:uppercase; letter-spacing:.06em; }

/* ── EXPERIÊNCIA ── */
#experiencia { padding:120px 0; }
.exp-layout { display:grid; grid-template-columns:1fr 2fr; gap:80px; }
.exp-nav { position:sticky; top:100px; height:fit-content; }
.exp-nav-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:8px;
  font-family: var(--font-display); font-size:.85rem; font-weight:600; cursor:pointer;
  color: var(--text3); margin-bottom:4px; transition: color .2s, background .2s;
}
.exp-nav-item.active { color: var(--accent); background: rgba(200,255,0,0.06); }
.exp-nav-item.active::before { content:''; display:block; width:16px; height:2px; background: var(--accent); flex-shrink:0; }
.exp-timeline { position:relative; }
.exp-timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background: linear-gradient(180deg, transparent, var(--border2) 10%, var(--border2) 90%, transparent);
}
.exp-item { padding-left:40px; padding-bottom:56px; position:relative; }
.exp-item:last-child { padding-bottom:0; }
.exp-dot {
  position:absolute; left:-6px; top:6px; width:13px; height:13px; border-radius:50%;
  background: var(--bg); border:2px solid var(--border2); transition: border-color .3s ease;
}
.exp-item.active .exp-dot { border-color: var(--accent); box-shadow:0 0 0 4px rgba(200,255,0,0.12); }
.exp-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.exp-role   { font-family: var(--font-display); font-size:1.2rem; font-weight:800; color: var(--text); }
.exp-period { font-size:.75rem; color: var(--text3); padding:4px 12px; background: var(--surface); border:1px solid var(--border); border-radius:100px; white-space:nowrap; }
.exp-company { font-size:.9rem; color: var(--accent); font-weight:500; margin-bottom:12px; }
.exp-desc  { font-size:.88rem; color: var(--text3); line-height:1.75; margin-bottom:16px; }
.exp-skills { display:flex; flex-wrap:wrap; gap:6px; }
.exp-skill { font-size:.7rem; padding:4px 10px; border-radius:4px; background: var(--surface); border:1px solid var(--border); color: var(--text3); }
.exp-item.active .exp-skill { border-color: rgba(200,255,0,0.2); color: var(--text2); }

/* ── CONTATO ── */
#contato { padding:120px 0; }
.contato-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start; }
.contato-heading {
  font-family: var(--font-display); font-size: clamp(2.5rem,5vw,4rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin-bottom:24px;
}
.contato-heading span { color: var(--accent); }
.contato-desc { font-size:1rem; color: var(--text2); line-height:1.75; margin-bottom:48px; max-width:420px; }
.contato-links { display:flex; flex-direction:column; gap:16px; }
.contato-link {
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  background: var(--surface); border:1px solid var(--border); border-radius:10px;
  text-decoration:none; transition: border-color .3s, transform .3s, box-shadow .3s;
}
.contato-link:hover { border-color: var(--border2); transform:translateX(6px); box-shadow:0 10px 40px rgba(0,0,0,.3); }
.cl-icon { width:40px; height:40px; border-radius:8px; background: rgba(200,255,0,0.1); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.cl-text  { flex:1; }
.cl-label { font-size:.7rem; color: var(--text3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:2px; }
.cl-value { font-family: var(--font-display); font-size:.95rem; font-weight:700; color: var(--text); }
.cl-arrow { color: var(--text3); transition: color .3s, transform .3s; }
.contato-link:hover .cl-arrow { color: var(--accent); transform:translateX(4px); }
.contato-form { background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:36px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color: var(--text3); margin-bottom:8px; }
.form-input, .form-textarea {
  width:100%; background: var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:14px 16px; color: var(--text); font-family: var(--font-body); font-size:.9rem;
  outline:none; transition: border-color .3s ease; resize:none;
}
.form-input:focus, .form-textarea:focus { border-color: rgba(200,255,0,0.4); }
.form-textarea { height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-submit {
  width:100%; padding:16px; background: var(--accent); color: var(--bg);
  font-family: var(--font-display); font-size:.9rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  border:none; border-radius:8px; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.form-submit:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(200,255,0,.3); }

/* ── FOOTER ── */
footer {
  padding:40px 0; border-top:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:16px; position:relative; z-index:1;
}
.footer-logo { font-family: var(--font-display); font-size:1rem; font-weight:800; color: var(--text2); }
.footer-logo span { color: var(--accent); }
.footer-text { font-size:.78rem; color: var(--text3); text-align:center; }

/* ── WHATSAPP FLOAT ── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:8000;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow:0 6px 24px rgba(37,211,102,0.5);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
  animation: waPulse 3s ease-in-out infinite;
}
.whatsapp-float:hover {
  transform:scale(1.12) translateY(-3px);
  box-shadow:0 14px 40px rgba(37,211,102,0.6);
  animation:none;
}
.whatsapp-float svg { width:30px; height:30px; fill:white; }
.wa-tooltip {
  position:absolute; right:70px; top:50%; transform:translateY(-50%);
  white-space:nowrap; background:var(--surface); border:1px solid var(--border2);
  color:var(--text); font-size:.72rem; font-weight:500;
  padding:6px 12px; border-radius:6px;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.whatsapp-float:hover .wa-tooltip { opacity:1; }
@keyframes waPulse {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,0.5); }
  50%      { box-shadow:0 6px 24px rgba(37,211,102,0.5), 0 0 0 14px rgba(37,211,102,0.08); }
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(32px); transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ── NOISE OVERLAY ── */
.noise {
  position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── RESPONSIVE 1024px ── */
@media (max-width:1024px) {
  .hero-grid, .sobre-grid { grid-template-columns:1fr; gap:48px; }
  .skills-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .exp-layout { grid-template-columns:1fr; }
  .exp-nav { display:none; }
  .contato-grid { grid-template-columns:1fr; }
  nav { padding:16px 24px; }
  nav.scrolled { padding:12px 24px; }
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
  .container { padding:0 24px; }
  .hero-visual { order:-1; }
  .hero-float-badge, .hero-float-badge2 { display:none; }
}

/* ── RESPONSIVE 768px ── */
@media (max-width:768px) {
  body { cursor:auto; }
  #cursor-dot, #cursor-ring { display:none; }
  .container { padding:0 16px; }
  nav { padding:14px 16px; }
  nav.scrolled { padding:12px 16px; }

  #hero { padding:90px 0 56px; }
  .hero-grid { gap:32px; }
  .hero-title { font-size:clamp(2.8rem,10vw,4rem); }
  .hero-desc { margin-bottom:32px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content:center; }
  .hero-stats { margin-top:32px; }
  .stat { padding:14px 8px; }
  .stat-num { font-size:1.6rem; }
  .stat-label { font-size:.65rem; }

  #sobre { padding:64px 0; }
  .sobre-grid { gap:32px; }
  .sobre-img { aspect-ratio:4/3; }
  .sobre-img-badge { bottom:-8px; right:-8px; padding:12px 16px; }
  .sib-num { font-size:1.5rem; }

  #skills { padding:64px 0; }
  .skills-grid { grid-template-columns:1fr; gap:14px; margin-top:40px; }

  #projetos { padding:64px 0; }
  .projetos-header { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px; }
  .projetos-row { grid-template-columns:1fr; }
  .project-card.square .project-preview { aspect-ratio:16/10; }
  .project-card.rect   .project-preview { aspect-ratio:16/10; }

  #experiencia { padding:64px 0; }
  .exp-layout { gap:32px; }

  #contato { padding:64px 0; }
  .contato-grid { gap:40px; }
  .form-row { grid-template-columns:1fr; }
  .contato-desc { margin-bottom:32px; }

  .section-title { font-size:clamp(2rem,8vw,3rem); }

  .whatsapp-float { bottom:20px; right:20px; width:52px; height:52px; }
  .whatsapp-float svg { width:26px; height:26px; }
  .wa-tooltip { display:none; }
}

/* ── RESPONSIVE 480px ── */
@media (max-width:480px) {
  .hero-title { font-size:clamp(2.4rem,12vw,3.2rem); }
  .sobre-values { grid-template-columns:1fr; }
  .contato-form { padding:24px 16px; }
  .hero-stats { grid-template-columns:repeat(3,1fr); }
  .pi-title { font-size:1.05rem; }
  .pi-desc  { font-size:.8rem; }
}