:root{
  --bg:#050816;
  --text:#f8fbff;
  --muted:#aeb8cc;
  --cyan:#27e7ff;
  --violet:#9d4dff;
  --blue:#4776ff;
  --green:#25D366;
  --border:rgba(255,255,255,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at top,#111a3e 0,#050816 45%,#02030a 100%);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9}
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    linear-gradient(90deg,rgba(39,231,255,.04) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
  z-index:-2;
}
.loader{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#050816,#02030a);
  transition:.7s;
}
.loader.hide{opacity:0;visibility:hidden}
.loader-orb{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 0 35px rgba(39,231,255,.65),0 0 90px rgba(157,77,255,.35);
  animation:pulseLoader 1.35s ease-in-out infinite;
}
.loader h2{margin-top:26px;font-size:clamp(1.7rem,4vw,3.2rem);letter-spacing:-.06em}
.loader p{margin-top:10px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;font-size:.75rem}
@keyframes pulseLoader{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
.cursor,.cursor-dot{
  position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
}
.cursor{width:44px;height:44px;border:1px solid rgba(39,231,255,.55);box-shadow:0 0 30px rgba(39,231,255,.22);transition:.12s}
.cursor-dot{width:7px;height:7px;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}
.whatsapp-fixo{
  position:fixed;right:22px;bottom:22px;z-index:9998;
  display:flex;align-items:center;gap:8px;
  padding:16px 23px;border-radius:999px;
  background:linear-gradient(135deg,#25D366,#18a94f);
  color:white;font-weight:1000;
  box-shadow:0 0 30px rgba(37,211,102,.55);
  animation:zapPulse 2s infinite;
}
@keyframes zapPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 7%;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg,rgba(5,8,22,.9),rgba(5,8,22,.38));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{font-weight:1000;font-size:1.15rem;letter-spacing:-.04em}
.logo span{color:var(--cyan);text-shadow:0 0 20px var(--cyan)}
nav{display:flex;gap:24px}
nav a{color:#d7def0;font-size:.92rem;transition:.25s}
nav a:hover{color:var(--cyan);text-shadow:0 0 16px var(--cyan)}
.hero{
  min-height:100vh;
  display:grid;grid-template-columns:1.08fr .92fr;gap:54px;
  align-items:center;
  padding:145px 7% 85px;
}
.tag{color:var(--cyan);font-weight:1000;letter-spacing:.28em;font-size:.78rem;text-shadow:0 0 18px rgba(39,231,255,.65)}
h1{
  font-size:clamp(3.4rem,8vw,8.2rem);
  line-height:.88;letter-spacing:-.09em;margin:28px 0 10px;
}
.hero h2{
  font-size:clamp(1.65rem,3vw,3rem);
  line-height:1.05;letter-spacing:-.06em;max-width:820px;
}
.hero-text{max-width:720px;color:#c8d2e4;font-size:1.18rem;line-height:1.75;margin-top:22px}
.contact-highlight{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;
}
.contact-highlight a{
  padding:13px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;
  color:#e9f7ff;
}
.contact-highlight a:first-child{
  background:rgba(37,211,102,.16);
  border-color:rgba(37,211,102,.35);
  box-shadow:0 0 24px rgba(37,211,102,.15);
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.btn{
  padding:15px 24px;border-radius:999px;font-weight:1000;border:1px solid var(--border);
  transition:.35s;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-4px)}
.primary{background:linear-gradient(135deg,var(--green),var(--cyan),var(--violet));box-shadow:0 0 36px rgba(39,231,255,.22)}
.ghost{background:rgba(255,255,255,.06);backdrop-filter:blur(12px)}
.hero-showcase{position:relative}
.notebook{
  min-height:520px;border-radius:34px;padding:24px;
  background:linear-gradient(145deg,rgba(39,231,255,.12),rgba(255,255,255,.045),rgba(157,77,255,.13));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 45px 130px rgba(0,0,0,.55),0 0 70px rgba(39,231,255,.12);
  animation:floatPanel 8s ease-in-out infinite;
}
@keyframes floatPanel{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.notebook-top{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.notebook-top span{width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
.notebook-top span:nth-child(2){background:var(--violet)}
.notebook-top span:nth-child(3){background:#fff}
.notebook-top p{margin-left:auto;color:#aeb8cc;font-size:.8rem}
.showcase-login{
  min-height:420px;border-radius:28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle at top,rgba(39,231,255,.24),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14);
}
.app-logo{
  width:80px;height:80px;border-radius:24px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:white;font-size:2.4rem;font-weight:1000;
  box-shadow:0 0 36px rgba(39,231,255,.35);
}
.showcase-login h3{font-size:2rem;margin:18px 0 8px}
.showcase-login p{color:#c8d2e4;margin-bottom:22px}
.input{width:min(320px,80%);height:44px;border-radius:14px;background:rgba(255,255,255,.12);margin:8px 0;border:1px solid rgba(255,255,255,.12)}
.input.short{width:min(260px,70%)}
.login-btn{width:180px;height:46px;border-radius:999px;margin-top:14px;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 25px rgba(39,231,255,.25)}
.notebook-base{height:18px;width:82%;margin:0 auto;border-radius:0 0 26px 26px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.34),rgba(255,255,255,.12))}
.section{padding:105px 7%;position:relative}
.section-title{text-align:center;max-width:900px;margin:0 auto 55px}
.section-title p{color:var(--cyan);font-weight:1000;letter-spacing:.32em;font-size:.78rem}
.section-title h2{font-size:clamp(2.4rem,5vw,5.2rem);line-height:1;letter-spacing:-.07em;margin-top:18px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.glass,.project-card,.timeline-item,.contact-box,.stack-card,.metric-card{
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  border:1px solid var(--border);
  box-shadow:0 28px 80px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
  border-radius:28px;
}
.glass{padding:30px;min-height:210px}
.glass h3,.project-card h3,.timeline-item h3,.stack-card h3{font-size:1.45rem;margin-bottom:13px}
.glass p,.project-card p,.timeline-item p,.stack-card p,.contact-box p{color:var(--muted);line-height:1.7}
.metrics-head{text-align:center;max-width:960px;margin:0 auto 55px}
.metrics-head>p:first-child{color:var(--cyan);font-weight:1000;letter-spacing:.42em;font-size:.88rem;text-shadow:0 0 22px rgba(39,231,255,.85)}
.metrics-head h2{margin-top:22px;font-size:clamp(3rem,8vw,6.4rem);line-height:.92;letter-spacing:-.08em;font-weight:1000}
.metrics-head h2 span{color:transparent;background:linear-gradient(90deg,var(--cyan),#5b7cff,var(--violet));-webkit-background-clip:text;background-clip:text}
.metrics-line{width:min(520px,70%);height:1px;margin:26px auto 0;background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent)}
.premium-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.metric-card{padding:36px 22px;min-height:360px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.45s}
.metric-card:hover{transform:translateY(-12px);border-color:rgba(39,231,255,.46)}
.metric-icon{width:70px;height:70px;display:grid;place-items:center;margin-bottom:16px;border-radius:20px;color:var(--cyan);font-size:2.3rem;border:1px solid rgba(39,231,255,.38);background:rgba(39,231,255,.08)}
.metric-card strong{font-size:clamp(5rem,8vw,8.6rem);line-height:.85;letter-spacing:-.1em;margin:12px 0 18px;color:var(--cyan);text-shadow:0 0 18px rgba(39,231,255,.75)}
.metric-card span{font-size:1.25rem;font-weight:1000;margin-bottom:16px}
.metric-card small{color:#c3ccdd;line-height:1.55}
.project-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.project-card{overflow:hidden;transition:.45s}
.project-card.principal{grid-row:span 2}
.project-card:hover{transform:translateY(-12px);border-color:rgba(39,231,255,.45)}
.project-preview{min-height:320px;padding:24px;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.project-preview::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(255,255,255,.20),transparent 40%);pointer-events:none}
.preview-bar{font-size:.78rem;letter-spacing:.1em;color:#dbeafe;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);padding:9px 12px;border-radius:999px;width:max-content}
.preview-title{font-size:2.4rem;font-weight:1000;letter-spacing:-.07em}
.project-preview p{color:#f3f7ff;font-weight:800;max-width:330px}
.project-preview button,.project-link{
  width:max-content;border:0;padding:12px 18px;border-radius:999px;font-weight:1000;color:#08111f;
  background:linear-gradient(135deg,#fff,var(--cyan));
}
.soares{background:linear-gradient(135deg,#090909,#1a1521 40%,#b88c39)}
.flowfin{background:linear-gradient(135deg,#051b2f,#063b52,#1b6bff)}
.spacecar{background:linear-gradient(135deg,#050505,#161d2f,#7c2dff)}
.project-content{padding:26px}
.project-content p{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}
.chips span{padding:8px 12px;border-radius:999px;background:rgba(39,231,255,.10);border:1px solid rgba(39,231,255,.18);color:#dffbff;font-weight:900;font-size:.8rem}
.car-shape{height:76px;width:82%;border-radius:80px 80px 26px 26px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 40px rgba(157,77,255,.3);align-self:center}
.stack-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:18px}
.stack-card{min-height:235px;padding:24px 18px;text-align:center;transition:.45s}
.stack-card:hover{transform:translateY(-10px);border-color:rgba(39,231,255,.45)}
.stack-logo{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;border-radius:22px;font-weight:1000;animation:logoFloat 4.5s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.html-logo{background:linear-gradient(135deg,#ff6a3d,#ff2e63)}
.css-logo{background:linear-gradient(135deg,#2196ff,#27e7ff)}
.js-logo{background:linear-gradient(135deg,#ffe259,#ffa751);color:#111}
.git-logo{background:linear-gradient(135deg,#ff512f,#dd2476)}
.github-logo{background:linear-gradient(135deg,#222,#777)}
.netlify-logo{background:linear-gradient(135deg,#00c7b7,#27e7ff)}
.api-logo{background:linear-gradient(135deg,#9d4dff,#4776ff)}
.timeline{max-width:940px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--violet))}
.timeline-item{margin:0 0 26px 58px;padding:28px;position:relative}
.timeline-item::before{content:"";position:absolute;left:-47px;top:30px;width:18px;height:18px;border-radius:50%;background:var(--cyan);box-shadow:0 0 24px var(--cyan)}
.timeline-item span{color:var(--cyan);font-weight:1000;font-size:.85rem;letter-spacing:.16em}
.contact-box{text-align:center;max-width:1040px;margin:0 auto;padding:60px 35px}
.contact-box h2{font-size:clamp(2.3rem,5vw,5.4rem);line-height:1;letter-spacing:-.07em;margin:18px 0}
.contact-big{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px}
.contact-big a{padding:24px;border-radius:24px;text-align:left;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);transition:.35s}
.contact-big a:first-child{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.35);box-shadow:0 0 28px rgba(37,211,102,.12)}
.contact-big a:hover{transform:translateY(-6px)}
.contact-big strong,.contact-big span,.contact-big small{display:block}
.contact-big span{font-size:1.3rem;font-weight:1000;margin:8px 0;color:#fff}
.contact-big small{color:#b9c4d8}
footer{text-align:center;padding:38px 20px 100px;color:#8f9bb0;border-top:1px solid rgba(255,255,255,.08)}
.reveal{opacity:0;transform:translateY(48px);filter:blur(6px);transition:opacity .75s ease,transform .75s ease,filter .75s ease}
.reveal.active{opacity:1;transform:translateY(0);filter:blur(0)}
@media(max-width:1100px){
  .hero{grid-template-columns:1fr}
  .about-grid,.premium-stats{grid-template-columns:repeat(2,1fr)}
  .project-grid{grid-template-columns:1fr}
  .project-card.principal{grid-row:auto}
  .stack-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .cursor,.cursor-dot{display:none}
  #particles{opacity:.35}
  .header{padding:17px 5%}nav{display:none}
  .logo{font-size:1rem}
  .hero{padding:125px 5% 65px}
  .section{padding:80px 5%}
  h1{font-size:clamp(3.2rem,16vw,5rem)}
  .hero h2{font-size:1.6rem}
  .notebook{min-height:420px;animation:none}
  .showcase-login{min-height:330px}
  .about-grid,.premium-stats,.stack-grid,.contact-big{grid-template-columns:1fr}
  .metric-card{min-height:310px}
  .metric-card strong{font-size:5.4rem}
  .project-preview{min-height:260px}
  .whatsapp-fixo{left:16px;right:16px;bottom:14px;justify-content:center}
  footer{padding-bottom:95px}
  .tag{letter-spacing:.16em}
}