/* Montpage — static build */
:root{
  --brand-bg:#000000;
  --brand-green:#22e08a;
  --brand-green-rgb:34,224,138;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; }
body{
  margin:0;
  background:var(--brand-bg);
  color:#fff;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* Container: 85% da largura em telas >= 1024px (web), 100% no mobile */
@media (min-width:1024px){
  .max-w-1400{ max-width:85% !important; }
}

/* Scrollbar */
*{ scrollbar-width:thin; scrollbar-color:var(--brand-green) #000; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:#000; }
*::-webkit-scrollbar-thumb{ background:var(--brand-green); border-radius:9999px; border:2px solid #000; }

/* Hero floating */
@keyframes hero-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-18px) rotate(-0.5deg); }
}
.hero-float{ animation:hero-float 5s ease-in-out infinite !important; will-change:transform; transform-origin:center; }

@media (prefers-reduced-motion: reduce){ .hero-float{ animation:none; } }

/* Tech marquee */
@keyframes tech-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tech-marquee{ animation:tech-marquee 30s linear infinite; }

/* Orbiting ring */
@keyframes orbit-spin{ to{ transform:rotate(360deg); } }
.orbit-spin{ animation:orbit-spin 22s linear infinite; }

/* Float small */
@keyframes float-soft{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.float-soft{ animation:float-soft 3.5s ease-in-out infinite; }
.float-medium{ animation:float-soft 4s ease-in-out infinite; }

/* Ping */
@keyframes brand-ping{ 75%,100%{ transform:scale(2); opacity:0; } }
.brand-ping{ animation:brand-ping 1.6s cubic-bezier(0,0,0.2,1) infinite; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }
.reveal-delay-5{ transition-delay:.40s; }

/* Catalog screenshot scroll on hover */
.proj-card{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); transition:border-color .3s; }
.proj-card:hover{ border-color:rgba(var(--brand-green-rgb),.4); }
.proj-frame{ position:relative; height:280px; overflow:hidden; background:#000; }
@media (max-width:639px){ .proj-frame{ height:240px; } }
.proj-bar{ position:absolute; left:0; right:0; top:0; z-index:10; display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.05); }
.proj-bar span{ width:8px; height:8px; border-radius:9999px; background:rgba(255,255,255,.2); }
.proj-img{ position:absolute; left:0; right:0; top:28px; width:100%; object-fit:cover; object-position:top; transition:transform 5s ease-in-out; }
.proj-card:hover .proj-img{ transform:translateY(calc(-100% + 253px)); }
.proj-fade{ pointer-events:none; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(to top,#000,transparent); }
.proj-foot{ display:flex; align-items:center; justify-content:space-between; padding:20px; }
.proj-title{ font-size:.875rem; font-weight:700; letter-spacing:.04em; color:#fff; margin:0; }
.proj-type{ margin:4px 0 0; font-size:.75rem; color:rgba(255,255,255,.6); }
.proj-link{ display:inline-flex; height:36px; width:36px; align-items:center; justify-content:center; border-radius:9999px; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.8); transition:all .3s; }
.proj-link:hover{ border-color:rgba(var(--brand-green-rgb),.6); background:rgba(var(--brand-green-rgb),.1); color:var(--brand-green); }

/* Embla */
.embla{ overflow:hidden; }
.embla__container{ display:flex; gap:20px; }
.embla__slide{ flex:0 0 85%; min-width:0; }
@media (min-width:640px){ .embla__slide{ flex:0 0 48%; } }
@media (min-width:1024px){ .embla__slide{ flex:0 0 31%; } }
@media (min-width:1280px){ .embla__slide{ flex:0 0 23%; } }

/* Custom select */
.cs{ position:relative; }
.cs__btn{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.cs__menu{ position:absolute; z-index:50; margin-top:8px; width:100%; overflow:hidden; border-radius:.75rem; border:1px solid rgba(var(--brand-green-rgb),.3); background:rgba(9,9,11,.95); backdrop-filter:blur(16px); padding:6px; box-shadow:0 20px 50px -12px rgba(0,0,0,.7), 0 0 30px -8px rgba(var(--brand-green-rgb),.5), inset 0 1px 0 rgba(var(--brand-green-rgb),.2); transform-origin:top; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s, transform .15s; }
.cs.open .cs__menu{ opacity:1; transform:none; pointer-events:auto; }
.cs__opt{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; border-radius:.5rem; padding:10px 12px; text-align:left; font-size:.875rem; color:rgba(255,255,255,.75); background:transparent; border:0; cursor:pointer; transition:all .15s; }
.cs__opt:hover{ background:rgba(255,255,255,.06); color:#fff; }
.cs__opt.selected{ background:rgba(var(--brand-green-rgb),.15); color:#fff; }

/* Input style */
.fld-input{ width:100%; border-radius:.75rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); padding:12px 16px; font-size:.875rem; color:#fff; outline:none; transition:all .2s; font-family:inherit; }
.fld-input::placeholder{ color:rgba(255,255,255,.35); }
.fld-input:focus{ border-color:rgba(var(--brand-green-rgb),.6); background:rgba(255,255,255,.05); box-shadow:0 0 0 2px rgba(var(--brand-green-rgb),.2); }
textarea.fld-input{ resize:none; font-family:inherit; }

/* Shine hover for green CTAs */
.cta-green{ position:relative; overflow:hidden; }
.cta-green::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transition:transform .7s;
}
.cta-green:hover::after{ transform:translateX(100%); }