/* =========================================================
   Caio Henrique — Portfólio
   Base branca com azul translúcido
   ========================================================= */

:root{
  --bg:            #eef3fb;
  --bg-2:          #e3ecf9;
  --surface:       rgba(255,255,255,.66);
  --surface-2:     rgba(255,255,255,.88);
  --line:          rgba(37,99,235,.14);
  --line-strong:   rgba(37,99,235,.26);

  --txt:           #101d33;
  --txt-2:         #4a5c7a;
  --txt-3:         #7f8ea8;

  --cyan:          #0284c7;
  --violet:        #4f46e5;
  --lime:          #15803d;

  --grad:          linear-gradient(100deg,#0ea5e9 0%,#3b82f6 48%,#4f46e5 100%);
  --glow-cyan:     0 0 0 1px rgba(2,132,199,.3), 0 0 28px -8px rgba(2,132,199,.55);

  /* cores da rede de partículas (lidas pelo script.js) */
  --net-line:      37,99,235;
  --net-dot:       59,130,246;
  --net-hot:       79,70,229;
  --net-cursor:    2,132,199;
  --net-alpha:     1.5;

  --r-sm: 10px;  --r: 16px;  --r-lg: 24px;
  --maxw: 1180px;

  --ff-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(14,165,233,.16), transparent 62%),
    radial-gradient(900px 560px at 6% 12%, rgba(79,70,229,.12), transparent 60%),
    linear-gradient(180deg, #f7fafe 0%, var(--bg) 44%, var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
::selection{ background:rgba(59,130,246,.24); color:#0b1730 }

/* scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:#e8eefa }
::-webkit-scrollbar-thumb{ background:#c2d3ee; border-radius:20px; border:2px solid #e8eefa }
::-webkit-scrollbar-thumb:hover{ background:#a6bde3 }

/* =========================================================
   CAMADAS DE FUNDO
   ========================================================= */
#bg-net{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.6;
}
.grid-overlay{
  position:fixed; inset:-50%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(79,70,229,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,.07) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(0deg);
  mask-image:radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 40%, #000 20%, transparent 78%);
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px, 64px 64px } }

.noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; z-index:0;
  margin:-260px 0 0 -260px; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(14,165,233,.16) 0%, rgba(79,70,229,.09) 40%, transparent 68%);
  transition:opacity .5s ease;
  will-change:transform;
}
main, .nav, .footer{ position:relative; z-index:2 }

/* =========================================================
   PROGRESSO + NAV
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(37,99,235,.09);
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:var(--grad); box-shadow:0 0 12px rgba(59,130,246,.6);
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:20px;
  padding:18px clamp(20px,5vw,56px);
  transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(247,250,254,.78);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line);
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 12px 34px -28px rgba(16,29,51,.6);
}
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:600 }
.brand-mark{
  display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--grad); color:#fff; font-size:13px; font-weight:700; letter-spacing:.5px;
  box-shadow:0 8px 20px -8px rgba(79,70,229,.8);
}
.brand-text{ font-size:15.5px; letter-spacing:-.2px }

.nav-links{ display:flex; gap:6px; margin-left:auto }
.nav-links a{
  position:relative; padding:7px 14px; border-radius:99px;
  font-size:14.5px; color:var(--txt-2);
  transition:color .25s, background .25s;
}
.nav-links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:3px; height:1px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover{ color:var(--txt); background:rgba(59,130,246,.08) }
.nav-links a:hover::after{ transform:scaleX(1) }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; flex-direction:column; gap:5px }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--txt); border-radius:2px; transition:.3s var(--ease) }
.nav-toggle.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.nav-toggle.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:99px; border:1px solid transparent;
  font-family:var(--ff-display); font-size:15px; font-weight:600; letter-spacing:-.1px;
  cursor:pointer; overflow:hidden; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, color .3s;
  will-change:transform;
}
.btn svg{ transition:transform .3s var(--ease) }
.btn-sm{ padding:9px 18px; font-size:14px }
.btn-lg{ padding:16px 30px; font-size:16px }

.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 12px 30px -12px rgba(59,130,246,.95) }
.btn-primary::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,#4f46e5,#0ea5e9);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-primary > *{ position:relative; z-index:1 }
.btn-primary:hover{ box-shadow:0 18px 40px -14px rgba(79,70,229,.9) }
.btn-primary:hover::before{ opacity:1 }
.btn-primary:hover svg{ transform:translateX(3px) }

.btn-ghost{ background:rgba(255,255,255,.7); border-color:var(--line-strong); color:var(--txt) }
.btn-ghost:hover{ border-color:rgba(2,132,199,.55); background:#fff; box-shadow:0 14px 30px -18px rgba(16,29,51,.7) }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:56px;
  max-width:var(--maxw); margin:0 auto;
  padding:150px clamp(20px,5vw,40px) 110px;
}
.hero-inner{ max-width:640px }

.status{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px; border-radius:99px;
  background:rgba(21,128,61,.08); border:1px solid rgba(21,128,61,.24);
  font-size:13px; font-family:var(--ff-mono); color:#166534; letter-spacing:.2px;
}
.status .dot{
  width:7px; height:7px; border-radius:50%; background:#16a34a;
  box-shadow:0 0 0 0 rgba(22,163,74,.5); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(22,163,74,0) }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0) }
}

.hero-title{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:1.03; letter-spacing:-.035em;
  margin:26px 0 22px;
}
.hero-title .line{ display:block }
.grad{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  background-size:200% auto; animation:shimmer 5s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center } }

#rotator{ display:inline-flex; align-items:baseline; min-height:1.05em }
.caret{
  display:inline-block; width:3px; height:.82em; margin-left:6px;
  background:var(--cyan); border-radius:2px; box-shadow:0 0 12px rgba(2,132,199,.7);
  animation:blink 1s steps(2,start) infinite; -webkit-text-fill-color:initial;
}
@keyframes blink{ 50%{ opacity:0 } }

.hero-sub{ font-size:clamp(1rem,1.6vw,1.15rem); color:var(--txt-2); max-width:540px }
.hero-sub strong{ color:var(--txt); font-weight:600 }

.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }

@keyframes float{ 50%{ transform:translateY(-13px) } }

.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--line-strong); border-radius:14px;
}
.scroll-hint span{
  position:absolute; top:8px; left:50%; margin-left:-2px;
  width:4px; height:7px; border-radius:2px; background:var(--cyan);
  animation:wheel 1.8s var(--ease) infinite;
}
@keyframes wheel{ 60%{ transform:translateY(13px); opacity:0 } 100%{ opacity:0 } }

/* =========================================================
   SEÇÕES
   ========================================================= */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(80px,11vw,140px) clamp(20px,5vw,40px) }
.section-head{ max-width:680px; margin-bottom:60px }
.eyebrow{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); display:block; margin-bottom:14px;
}
.section-head h2{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; margin-bottom:16px;
}
.section-head p{ color:var(--txt-2); font-size:1.03rem }

/* ---- serviços ---- */
.cards-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px }
.svc-card{
  position:relative; padding:32px 28px 28px; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  border:1px solid var(--line); overflow:hidden;
  backdrop-filter:blur(8px);
  box-shadow:0 18px 44px -34px rgba(16,29,51,.55);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
  will-change:transform;
}
.svc-card::before{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(14,165,233,.14), transparent 62%);
}
.svc-card:hover{ border-color:rgba(2,132,199,.35); box-shadow:0 34px 70px -40px rgba(2,132,199,.75) }
.svc-card:hover::before{ opacity:1 }
.svc-card > *{ position:relative; z-index:1 }
.svc-card h3{ font-family:var(--ff-display); font-size:1.3rem; letter-spacing:-.02em; margin-bottom:10px }
.svc-card p{ color:var(--txt-2); font-size:.96rem }

/* ---- ilustrações dos cards ---- */
.svc-art,.step-art{
  position:relative; margin-bottom:22px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(37,99,235,.13);
  background:
    radial-gradient(120% 110% at 14% 0%, rgba(14,165,233,.16), transparent 58%),
    linear-gradient(158deg, rgba(255,255,255,.94), rgba(228,237,252,.72));
  transition:border-color .45s, box-shadow .45s;
}
.step-art{ margin-bottom:16px; border-radius:13px }
.svc-art::after,.step-art::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 100%);
          mask-image:radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 100%);
}
.svc-card:hover .svc-art,.step:hover .step-art{
  border-color:rgba(2,132,199,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 14px 30px -26px rgba(2,132,199,.9);
}
.art{ position:relative; z-index:1; display:block; width:100%; height:auto }

/* traços da ilustração */
.art .a-panel{ fill:rgba(255,255,255,.95); stroke:rgba(37,99,235,.3); stroke-width:1.4 }
.art .a-line{ fill:none; stroke:rgba(37,99,235,.2); stroke-width:1.4 }
.art .a-stroke{ fill:none; stroke:var(--cyan); stroke-width:1.8; stroke-linecap:round }
.art .a-soft{ fill:rgba(59,130,246,.12) }
.art .a-fill{ fill:rgba(37,99,235,.24) }
.art .a-dot{ fill:rgba(37,99,235,.3) }
.art .a-cursor{ fill:#0b1730 }
.art .a-tether{ stroke:rgba(37,99,235,.4); stroke-dasharray:2 3.4 }
.art .a-hand{ fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round }
.art .a-hand-h{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round }
.art .a-dial{ fill:none; stroke:rgba(255,255,255,.45); stroke-width:1 }
.art .a-pin{ fill:#fff }
.art .a-arrow{ fill:rgba(37,99,235,.38) }
.art .a-glass{ fill:rgba(255,255,255,.42); stroke:var(--cyan); stroke-width:2.4 }
.art .a-lens{ fill:none; stroke:var(--cyan); stroke-width:3.4; stroke-linecap:round }
.art .a-check{ fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.art .a-globe{ fill:rgba(255,255,255,.95); stroke:rgba(37,99,235,.42); stroke-width:1.5 }
.art .a-todo{ fill:none; stroke:rgba(37,99,235,.42); stroke-width:1.4; stroke-dasharray:4 3.5 }
.art-diag .a-grad{ fill:url(#artDiag) }
.art-arq  .a-grad{ fill:url(#artArq) }
.art-ent  .a-grad{ fill:url(#artEnt) }
.art-prod .a-grad{ fill:url(#artProd) }
.art-web   .a-grad{ fill:url(#artWeb) }
.art-sys   .a-grad{ fill:url(#artSys) }
.art-infra .a-grad{ fill:url(#artInfra) }

/* cabos e pacotes de dados */
.art .a-wire{ fill:none; stroke:rgba(37,99,235,.26); stroke-width:1.6; stroke-linecap:round }
.art .a-pulse{
  fill:none; stroke:var(--cyan); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:9 300; stroke-dashoffset:12;
}

/* animação — dispara quando o card entra na tela */
.art rect, .art circle{ transform-box:fill-box }
.art .l1,.art .l2,.art .l3,.art .l4{ transform-origin:left center; transform:scaleX(0) }
.art .a-bar{ transform-origin:bottom center; transform:scaleY(.12) }

.in .art .l1{ animation:artGrow .55s var(--ease) .30s forwards }
.in .art .l2{ animation:artGrow .55s var(--ease) .42s forwards }
.in .art .l3{ animation:artGrow .55s var(--ease) .54s forwards }
.in .art .l4{ animation:artGrow .55s var(--ease) .66s forwards }
.in .art .b1{ animation:artRise .7s var(--ease) .30s forwards }
.in .art .b2{ animation:artRise .7s var(--ease) .40s forwards }
.in .art .b3{ animation:artRise .7s var(--ease) .50s forwards }
.in .art .b4{ animation:artRise .7s var(--ease) .60s forwards }
.in .art .a-cta{ animation:artBeat 2.6s var(--ease) 1s infinite }
.in .art .a-cursor{ animation:artNudge 2.6s var(--ease) 1s infinite }
.in .art .a-pulse{ animation:artFlow 2.4s linear infinite }
.in .art .p2{ animation-delay:.6s }
.in .art .p3{ animation-delay:1.2s }
.in .art .p4{ animation-delay:1.8s }
.in .art .a-beat{ animation:artBeat 2.8s var(--ease) .9s infinite }
.in .art .a-mag{ animation:artScan 5.4s var(--ease) 1s infinite }
.in .art .a-hand{
  transform-box:view-box; transform-origin:160px 112px;
  animation:artSpin 7s linear infinite;
}

@keyframes artGrow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes artRise{ from{ transform:scaleY(.12) } to{ transform:scaleY(1) } }
@keyframes artBeat{ 0%,72%,100%{ opacity:1; transform:none } 82%{ opacity:.72; transform:scale(.955) } }
@keyframes artNudge{ 0%,66%,100%{ transform:none } 80%{ transform:translate(-6px,-7px) } }
@keyframes artFlow{ from{ stroke-dashoffset:12 } to{ stroke-dashoffset:-92 } }
@keyframes artSpin{ to{ transform:rotate(360deg) } }
@keyframes artScan{ 0%,100%{ transform:none } 50%{ transform:translate(-15px,3px) } }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px }
.tags li{
  padding:5px 11px; border-radius:99px; font-family:var(--ff-mono); font-size:11.5px;
  background:rgba(59,130,246,.07); border:1px solid var(--line); color:var(--txt-2);
  transition:border-color .3s, color .3s;
}
.svc-card:hover .tags li,.proj:hover .tags li{ border-color:rgba(79,70,229,.3); color:#334867 }

/* ---- projetos ---- */
.projects{ display:flex; flex-direction:column; gap:clamp(60px,8vw,104px) }
.proj{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(32px,5vw,64px) }
.proj:nth-child(even) .proj-visual{ order:2 }

.proj-visual{ perspective:1400px }
.browser{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#fff;
  box-shadow:0 44px 80px -44px rgba(16,29,51,.65);
  transform:rotateY(6deg) rotateX(3deg); transform-style:preserve-3d;
  transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s;
}
.proj:nth-child(even) .browser{ transform:rotateY(-6deg) rotateX(3deg) }
.proj:hover .browser{
  transform:rotateY(0) rotateX(0) translateY(-8px);
  border-color:rgba(2,132,199,.35);
  box-shadow:0 54px 96px -44px rgba(2,132,199,.6);
}
.browser-bar{
  display:flex; align-items:center; gap:6px; padding:10px 13px;
  background:rgba(59,130,246,.06); border-bottom:1px solid var(--line);
}
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:#cbd8ee }
.browser-bar .url{
  flex:1; margin-left:10px; padding:4px 12px; border-radius:99px;
  background:#fff; border:1px solid var(--line);
  font-family:var(--ff-mono); font-size:11.5px; color:var(--txt-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.browser-shot{
  position:relative; aspect-ratio:16/10;
  display:grid; place-items:center;
  background-image:var(--shot);
  background-size:cover; background-position:top center;
  background-color:#eaf1fb;
  transition:transform 1s var(--ease);
}
.browser-shot::before{
  content:''; position:absolute; inset:0; z-index:0; transition:opacity .5s var(--ease);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 58%),
    linear-gradient(150deg, var(--c2), #dbe6f7 74%);
}
.browser-shot.has-shot::before{ opacity:0 }
.browser-shot.has-shot .shot-fallback{ opacity:0 }
.shot-fallback{
  position:relative; z-index:1; transition:opacity .5s var(--ease);
  font-family:var(--ff-display); font-weight:700; font-size:clamp(1.1rem,2.3vw,1.7rem);
  letter-spacing:-.02em; color:rgba(255,255,255,.95);
  text-shadow:0 4px 22px rgba(16,29,51,.55);
}
.proj:hover .browser-shot{ transform:scale(1.03) }

.proj-num{ font-family:var(--ff-mono); font-size:13px; color:var(--violet); letter-spacing:.14em }
.proj-info h3{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; margin:8px 0 6px;
}
.proj-type{
  display:inline-block; font-size:13px; font-family:var(--ff-mono);
  color:var(--cyan); margin-bottom:16px;
}
.proj-info p{ color:var(--txt-2); font-size:1rem }
.proj-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:24px;
  font-family:var(--ff-display); font-weight:600; font-size:15px;
  padding-bottom:4px; border-bottom:1px solid var(--line-strong);
  transition:color .3s, border-color .3s, gap .3s var(--ease);
}
.proj-link:hover{ color:var(--cyan); border-color:var(--cyan); gap:13px }

/* ---- marquee ---- */
.marquee-wrap{
  position:relative; z-index:2; padding:26px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.5);
}
.marquee{
  display:flex; gap:0; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:26px; flex-shrink:0; padding-right:26px;
  animation:scrollX 34s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused }
@keyframes scrollX{ to{ transform:translateX(-100%) } }
.marquee-track span{
  font-family:var(--ff-display); font-weight:600; font-size:clamp(1rem,2vw,1.4rem);
  color:#8ea3c2; white-space:nowrap; letter-spacing:-.02em;
  transition:color .3s;
}
.marquee-track span:hover{ color:var(--txt) }
.marquee-track i{ color:var(--violet); font-size:.6rem; font-style:normal; opacity:.65 }

/* ---- processo ---- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px }
.step{
  position:relative; padding:28px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.66); border:1px solid var(--line);
  backdrop-filter:blur(8px);
  transition:transform .4s var(--ease), border-color .4s, background .4s, box-shadow .4s;
}
.step::after{
  content:''; position:absolute; left:24px; right:24px; bottom:0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.step:hover{
  transform:translateY(-6px); border-color:var(--line-strong); background:#fff;
  box-shadow:0 26px 50px -38px rgba(16,29,51,.7);
}
.step:hover::after{ transform:scaleX(1) }
.step-n{ font-family:var(--ff-mono); font-size:12.5px; color:var(--violet); letter-spacing:.14em }
.step h3{ font-family:var(--ff-display); font-size:1.15rem; margin:10px 0 8px; letter-spacing:-.02em }
.step p{ color:var(--txt-2); font-size:.93rem }
.step-out{
  display:inline-block; margin-top:14px; padding:4px 10px; border-radius:99px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em;
  background:rgba(59,130,246,.08); border:1px solid var(--line); color:var(--txt-2);
}

/* ---- contato ---- */
.contato{ padding-bottom:clamp(80px,10vw,120px) }
.cta-box{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(48px,7vw,80px) clamp(24px,5vw,64px);
  border-radius:32px; border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(79,70,229,.09), rgba(14,165,233,.07) 45%, rgba(255,255,255,.75));
  backdrop-filter:blur(10px);
  box-shadow:0 40px 80px -56px rgba(16,29,51,.7);
}
.cta-glow{
  position:absolute; top:-45%; left:50%; width:760px; height:760px; margin-left:-380px;
  background:radial-gradient(circle, rgba(79,70,229,.18), transparent 62%);
  animation:breathe 8s ease-in-out infinite; pointer-events:none;
}
@keyframes breathe{ 50%{ transform:scale(1.22); opacity:.6 } }
.cta-box > *:not(.cta-glow){ position:relative; z-index:1 }
.cta-box .eyebrow{ margin-bottom:12px }
.cta-box h2{
  font-family:var(--ff-display); font-weight:700; letter-spacing:-.035em;
  font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.06; margin-bottom:14px;
}
.cta-box > p{ color:var(--txt-2); max-width:560px; margin:0 auto; font-size:1.03rem }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:34px 0 24px }
.cta-foot{ font-family:var(--ff-mono); font-size:12.5px; color:var(--txt-3) }

/* ---- footer ---- */
.footer{ border-top:1px solid var(--line); background:rgba(255,255,255,.6) }
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:40px clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.footer-inner > div{ display:flex; align-items:center; gap:13px }
.footer-inner p{ font-size:14px; color:var(--txt-2) }
.footer nav{ display:flex; gap:20px }
.footer nav a{ font-size:14px; color:var(--txt-3); transition:color .3s }
.footer nav a:hover{ color:var(--cyan) }
.footer small{ font-size:12.5px; color:var(--txt-3); font-family:var(--ff-mono) }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-delay="1"]{ transition-delay:.09s }
.reveal[data-delay="2"]{ transition-delay:.18s }
.reveal[data-delay="3"]{ transition-delay:.27s }
.reveal[data-delay="4"]{ transition-delay:.36s }

/* =========================================================
   RETRATO NA HERO
   ========================================================= */
.portrait{
  position:relative; margin:0; justify-self:end;
  width:min(100%,400px); border-radius:28px; overflow:hidden;
  background:#0c121d;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 50px 90px -45px rgba(16,29,51,.7), 0 1px 0 rgba(255,255,255,.85) inset;
  animation:float 7s ease-in-out infinite;
}
.portrait::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 34%),
             linear-gradient(180deg, transparent 62%, rgba(12,18,29,.55));
}
.portrait::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background:var(--grad); opacity:.9;
}
.portrait img{
  display:block; width:100%; height:auto;
  filter:saturate(.96) contrast(1.03);
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
}
.portrait:hover img{ transform:scale(1.035); filter:saturate(1.05) contrast(1.03) }
.portrait-chip{
  position:absolute; left:18px; bottom:18px; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:99px;
  background:rgba(255,255,255,.13); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3);
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.05em; color:#f2f6ff;
}
.hero::after{
  content:''; position:absolute; z-index:-1; right:2%; top:16%;
  width:min(46vw,520px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(79,70,229,.16), transparent 66%);
  filter:blur(10px); pointer-events:none;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:126px; padding-bottom:80px; min-height:auto }
  .portrait{ justify-self:start; width:min(100%,268px); margin-top:34px }
  .hero::after{ display:none }
  .proj{ grid-template-columns:1fr; gap:28px }
  .proj:nth-child(even) .proj-visual{ order:0 }
  .browser, .proj:nth-child(even) .browser{ transform:none }
}
@media (max-width:760px){
  .nav-links{
    position:fixed; inset:64px 12px auto 12px; flex-direction:column; gap:2px;
    padding:14px; border-radius:20px; background:rgba(255,255,255,.97);
    border:1px solid var(--line); backdrop-filter:blur(20px);
    box-shadow:0 24px 50px -30px rgba(16,29,51,.5);
    transform:translateY(-14px) scale(.97); opacity:0; pointer-events:none;
    transition:.35s var(--ease);
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto }
  .nav-links a{ padding:12px 14px; font-size:16px }
  .nav .btn-sm{ display:none }
  .nav-toggle{ display:flex }
  .brand-text{ display:none }
  .footer-inner{ flex-direction:column; text-align:center }
  .scroll-hint{ display:none }
}

/* =========================================================
   ACESSIBILIDADE — movimento reduzido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
  #bg-net,.cursor-glow{ display:none }
  .art .a-pulse{ display:none }
  .art .l1,.art .l2,.art .l3,.art .l4,.art .a-bar{ transform:none !important }
}
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px }