/* 6PAY — Clean Tech (white + blue, subtle animations) */
:root{
  --bg:#ffffff;
  --bg-soft:#f5f7fb;
  --text:#0f172a;
  --muted:#475569;
  --brand:#0076FF;      /* azul pedido */
  --brand-600:#005fe0;  /* hover */
  --brand-700:#004bb3;  /* subfaixa */
  --brand-50:#eef4ff;
  --ring:#e5e7eb;
  --card:#ffffff;
}

html,body{background:var(--bg);color:var(--text);scroll-behavior:smooth}
.muted{color:var(--muted)}

/* Header */
.header-clean{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid #e5e7eb}
.header-clean .nav a{color:#0f172a;opacity:.9}
.header-clean .nav a:hover{opacity:1}
.header-clean .divider{width:1px;background:#e5e7eb}
.header-clean .btn-primary{background:var(--brand);color:#fff;border:1px solid var(--brand);box-shadow:0 8px 22px rgba(31,109,255,.18);transition:transform .15s,box-shadow .15s}
.header-clean .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(31,109,255,.25)}
.dd-panel{background:#fff;border:1px solid #e5e7eb}
.dd-item{color:#0f172a}
.dd-item:hover{background:#f1f5f9}

/* Chips & Buttons */
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .8rem;border-radius:999px;font-weight:600;font-size:.75rem;background:var(--brand-50);color:#0f172a;border:1px solid #e5e7eb}
.chip .dot{width:.45rem;height:.45rem;border-radius:999px;background:var(--brand)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.7rem 1rem;font-weight:700;border:1px solid #e5e7eb}
.btn-outline:hover{background:#f8fafc}
.btn-brand{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.7rem 1rem;font-weight:700;background:var(--brand);color:#fff;border:1px solid var(--brand)}
.btn-brand:hover{background:var(--brand-600)}
.btn-white{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.7rem 1rem;font-weight:700;background:#fff;color:var(--text);border:1px solid #fff}
.btn-white:hover{background:#f8fafc}

/* Cards */
.card{border-radius:18px;border:1px solid var(--ring);background:var(--card);box-shadow:0 8px 24px rgba(2,6,23,.06)}
.card-hover{transition:transform .18s ease, box-shadow .18s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,.12)}

/* Reveal */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(14px);filter:blur(8px)}
.reveal.inview{opacity:1;transform:none;filter:none;transition:opacity .6s,transform .6s,filter .6s}
.d-1{transition-delay:.06s}.d-2{transition-delay:.12s}.d-3{transition-delay:.18s}.d-4{transition-delay:.24s}

/* Hero */
.hero{background:var(--bg-soft)}
.hero-image{border-radius:28px}
/* Blue animated background for hero */
.hero-anim-blue{position:relative;overflow:hidden;background:var(--brand) !important;min-height:60vh}
.hero-anim-blue::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 10% 20%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(800px 400px at 90% 70%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--brand) 0%, #0b64e0 100%);
  animation: blueShift 16s ease-in-out infinite alternate;
}
/* Animated blurred blobs behind content (subtle tech feel) */
.hero-anim-blue::after{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(180px 180px at 12% 30%, rgba(116,197,255,.35), transparent 60%),
    radial-gradient(220px 220px at 86% 22%, rgba(116,197,255,.28), transparent 60%),
    radial-gradient(260px 260px at 28% 82%, rgba(255,255,255,.18), transparent 60%);
  filter: blur(18px);
  animation: blobsDrift 18s ease-in-out infinite alternate;
}
/* ensure content sits above animated background */
.hero-anim-blue > *{position:relative;z-index:1}
@keyframes blueShift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(1.5%, -1%, 0)}
  100%{transform:translate3d(-1.5%, 1%, 0)}
}
@keyframes blobsDrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2%,1.5%,0)}100%{transform:translate3d(2%,-1.5%,0)}}

/* Typography and CTAs on blue hero */
.hero-onblue{color:#fff}
.hero-onblue h1,.hero-onblue h2,.hero-onblue h3{color:#fff}
.hero-onblue .muted{color:rgba(255,255,255,.9)}
.hero-onblue .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:#fff}
.btn-outline-white{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;padding:.7rem 1rem;font-weight:700;color:#fff;border:1px solid #ffffff}
.btn-outline-white:hover{background:rgba(255,255,255,.12)}

/* Blue containers for pattern break */
.blue-section{background:var(--brand);color:#fff}
.blue-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px}
.blue-muted{color:rgba(255,255,255,.85)}
/* very light blue tint */
.blue-soft{background:rgba(0,118,255,.06)}

/* Soft sections and rounded white container */
.section-soft{background:var(--bg-soft)}
.soft-card{background:#fff;border:1px solid #e5e7eb;border-radius:28px;box-shadow:0 10px 30px rgba(2,6,23,.08)}

/* Alt dark band */
.alt-dark{background:#111827;color:#fff}
.alt-dark h2,.alt-dark h3{color:#fff}
.alt-card{background:#1f2937;border:1px solid rgba(255,255,255,.08);border-radius:18px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.alt-card:hover{transform:translateY(-3px);border-color:rgba(0,118,255,.35);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.arrow-circle{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#2b3748;border:1px solid rgba(255,255,255,.12)}

/* FAQ */
.faq details{border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.faq summary{list-style:none;padding:14px 16px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq p{padding:0 16px 14px;color:var(--muted)}

/* Service grid (clean + animated) */
.svc-wrap{background:var(--bg-soft);}
.svc-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;transition:transform .2s ease, box-shadow .2s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(2,6,23,.12)}
.svc-card:hover .svc-title{color:#0b64e0}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc-item{padding:22px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;position:relative}
.svc-item:nth-child(3n){ }
.svc-item:nth-last-child(-n+3){ }
.svc-title{font-weight:800}
/* Square animated border icon */
.svc-icon{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;position:relative;background:rgba(0,118,255,.08);border:1px solid rgba(0,118,255,.16)}
.svc-icon::before{content:none !important;border:0 !important}
.svc-icon i{color:var(--brand);width:28px;height:28px}
/* Lucide replaces <i> by <svg>; ensure color/size persist */
.svc-icon svg{color:var(--brand);width:28px;height:28px}
.svc-icon svg,* .svc-icon svg *{stroke:currentColor}

@media (max-width:1024px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-item:nth-child(2n){border-right:none}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}.svc-item{border-right:none}}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.35rem .7rem;font-weight:700;font-size:.75rem}
.badge-blue{background:rgba(0,118,255,.10);color:#0f172a;border:1px solid rgba(0,118,255,.18)}
.badge-green{background:rgba(34,197,94,.10);color:#065f46;border:1px solid rgba(34,197,94,.2)}

/* Infinite carousel */
.prod-slider{overflow:hidden}
.prod-track{display:flex;gap:16px;will-change:transform}
.prod-slide{flex:0 0 300px;height:210px;border-radius:22px;position:relative;overflow:hidden;background-size:cover;background-position:center}
.prod-slide .label{position:absolute;left:16px;bottom:14px;color:#fff;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.prod-slide::after{content:"";position:absolute;left:0;right:0;bottom:0;top:40%;background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,118,255,.10) 20%, rgba(0,0,0,.45) 100%)}
.prod-controls{display:flex;align-items:center;gap:8px}
.prod-dot{width:28px;height:10px;border-radius:999px;background:#e5e7eb}
.prod-dot.is-active{background:#0f172a}

/* Prefooter dark CTA */
.prefooter{background:#f1f5f9;color:#0f172a}
.pre-card{background:#fff;border:1px solid #e5e7eb}

/* Footer */
.footer-blue{background:#ffffff;color:#000000;border-top:1px solid rgba(255,255,255,.1)}
.footer-blue a{color:#0a0d16;opacity:.95}
.footer-blue a:hover{opacity:1}
.footer-sub{background:#0a0d16;color:#1b1b1b;border-top:1px solid rgba(255,255,255,.12)}

/* Contact (compartilhado com as páginas) */
.contact-wrap{background: linear-gradient(180deg, #0A2B57 0%, #083152 100%);color:#fff;border-radius:24px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px rgba(8,49,82,.28)}
.contact-form{background:#fff;border:1px solid #E6EEF7;border-radius:18px;box-shadow:0 14px 40px rgba(2,6,23,.12)}

/* FAQ (padrão index aplicado globalmente) */
.faq-item{border:1px solid #E5E7EB;border-radius:16px;background:#fff}
.faq-q{width:100%;text-align:left;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-weight:600}
.faq-a{padding:0 1.2rem 1rem 1.2rem;display:none;color:#475569}
.faq-item.is-open .faq-a{display:block}
.faq-item.is-open .faq-q i{transform:rotate(45deg)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Global mobile gutters (8% cada lado) */
@media (max-width: 640px){
  .container{ padding-left:8vw !important; padding-right:8vw !important; }
}