/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',sans-serif;color:#03428e;background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* Focus Visible */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}

/* Wrap / Container */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,60px)}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}

/* Section common */
.sec{padding:clamp(80px,12vw,140px) 0}
.sec-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--blue);
  background:rgba(3,66,142,.05);padding:6px 16px;border-radius:var(--radius-pill);
  margin-bottom:20px;
}
.sec-title{
  font-family:'Sora';font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;letter-spacing:-.04em;line-height:1.08;margin-bottom:16px;
}
.sec-desc{color:var(--gray);font-size:.95rem;line-height:1.7;max-width:420px;font-weight:300}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 32px;font-size:.85rem;font-weight:600;font-family:'Inter';
  border-radius:24px;border:1.5px solid transparent;cursor:pointer;
  transition:all .4s cubic-bezier(.16,1,.3,1);line-height:1.2;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.btn-gold:hover{background:#ffe44d;box-shadow:0 12px 32px rgba(255,214,0,.25)}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:#02367a;box-shadow:0 12px 32px rgba(3,66,142,.35)}
.btn-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn-dark:hover{background:#000}
.btn-whatsapp{background:#25d366;color:#fff;border-color:#25d366;gap:10px}
.btn-whatsapp:hover{background:#1ebe57;border-color:#1ebe57;box-shadow:0 12px 32px rgba(37,211,102,.35)}
.btn-whatsapp svg{width:16px;height:16px;flex-shrink:0}

/* Legacy button classes for backward compat */
.btn--primary{background:var(--gold);color:var(--dark);border-color:var(--gold);box-shadow:0 8px 40px rgba(255,214,0,.25)}
.btn--primary:hover{background:#ffe44d;box-shadow:0 12px 48px rgba(255,214,0,.35)}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,1)}
.btn--outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
.btn--outline-blue{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--outline-blue:hover{background:var(--blue);color:#fff}
.btn--dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.btn--dark:hover{background:#000}
.btn--large{padding:18px 40px;font-size:1rem}
.btn--icon svg{width:16px;height:16px}

/* Scroll animation - new system */
.ao{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.ao.v{opacity:1;transform:none}
.ao-d1{transition-delay:.1s}
.ao-d2{transition-delay:.2s}
.ao-d3{transition-delay:.3s}
.ao-d4{transition-delay:.4s}

/* Legacy scroll animation */
.js .fade-up{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .fade-up.is-visible{opacity:1;transform:translateY(0)}
.fade-up{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .js .fade-up,.ao{opacity:1;transform:none;transition:none}
}

/* Responsive globals */
@media(max-width:768px){
  .bento,.eco-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .qa-grid{grid-template-columns:repeat(2,1fr)}
  .steps-row{flex-direction:column;align-items:center}
  .steps-row::before{display:none}
  .f-grid{grid-template-columns:1fr}
}