/* ============================================================ MyTrafficBuzz — Cards Boxed content: service cards, stat blocks, content boxes and the call-to-action band. Part of the split of the former single style.css (20-Aug-2026). Load order matters: see the block in any page head, and keep this file in that same position when adding rules. ============================================================ */ /* ---------- service cards ---------- */ .service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px} .service-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;box-shadow:none;transition:var(--t);position:relative;overflow:hidden} .service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--g2);transform:scaleX(0);transform-origin:left;transition:var(--t)} .service-card:hover{transform:translateY(-6px);box-shadow:var(--shh);border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(130deg,rgba(226,58,78,.6),rgba(244,182,63,.45) 45%,rgba(123,91,245,.55)) border-box} .service-card:hover::before{transform:scaleX(1)} .service-card__icon{width:54px;height:54px;border-radius:14px;background:linear-gradient(150deg,rgba(226,58,78,.1),rgba(244,182,63,.12));border:1px solid rgba(226,58,78,.14);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:24px;transition:var(--t)} .service-card:hover .service-card__icon{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 18px rgba(226,58,78,.16)} .service-card h3{font-size:19px;margin-bottom:10px;color:var(--pri)} .service-card p{color:var(--txtl);font-size:14.5px;margin-bottom:16px;line-height:1.65} .card__link{color:var(--acc);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:5px} .card__link:hover{gap:10px} /* homepage bento: the first service card becomes a featured aurora panel (.mtb-home is tagged on by main.js — homepage only) */ .mtb-home .service-grid{grid-auto-flow:dense} @media(min-width:1000px){ .mtb-home .service-grid>.service-card:first-child{grid-column:span 2;background:var(--aur),var(--g1);border-color:rgba(255,255,255,.08);display:flex;flex-direction:column;justify-content:center} .mtb-home .service-grid>.service-card:first-child:hover{background:var(--aur),var(--g1);border-color:rgba(255,255,255,.18)} .mtb-home .service-grid>.service-card:first-child h3{color:#fff;font-size:24px} .mtb-home .service-grid>.service-card:first-child p{color:rgba(255,255,255,.78);font-size:15.5px} .mtb-home .service-grid>.service-card:first-child .card__link{color:var(--gold)} .mtb-home .service-grid>.service-card:first-child .service-card__icon{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)} } /* ---------- stats ---------- */ .stats-section{background:var(--g1);padding:72px 0;position:relative;overflow:hidden} .stats-section::before{content:'';position:absolute;inset:-10%;background:var(--aur);animation:aurora 15s ease-in-out infinite;will-change:transform} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;text-align:center;color:var(--wh);position:relative} .stat-item h3{font-size:52px;font-weight:800;color:var(--gold);margin-bottom:6px;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-family:'Outfit',sans-serif} .stat-item p{font-size:15px;color:rgba(255,255,255,.78)} /* ---------- CTA band ---------- */ .cta-section{background:var(--g1);padding:84px 0;text-align:center;color:var(--wh);position:relative;overflow:hidden} .cta-section::before{content:'';position:absolute;inset:-12%;background:var(--aur);animation:aurora 14s ease-in-out infinite;will-change:transform;border-radius:0} .cta-section h2{font-size:clamp(28px,4.2vw,44px);margin-bottom:14px;position:relative;color:#fff;font-weight:800;letter-spacing:-.028em} .cta-section p{font-size:17px;color:rgba(255,255,255,.82);margin-bottom:30px;max-width:580px;margin-left:auto;margin-right:auto;position:relative} /* ---------- content boxes ---------- */ .content-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:36px 32px;margin-bottom:28px;box-shadow:none} .content-box h2{margin-top:0} .content-box p,.contact__body p{text-align:left} .primary-nav__close{display:none;position:absolute;top:18px;right:18px;width:36px;height:36px;background:rgba(255,255,255,.1);border:none;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;transition:var(--t);z-index:10} .primary-nav__close:hover{background:var(--acc)} @media(max-width:768px){.primary-nav__close{display:flex}} .whatsapp-qr{text-align:center;margin:24px 0;padding:24px;background:var(--lt);border-radius:var(--r)} .whatsapp-qr img{width:200px;height:200px;border-radius:12px;border:3px solid #25D366} .whatsapp-qr p{margin-top:12px;font-size:14px;color:var(--txtl)} .contact__info-item{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)} .contact__info-item:last-child{border:none} .contact__info-label{color:rgba(255,255,255,.5);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px} .contact__info-value{font-size:16px;font-weight:600} .contact__map{border-radius:var(--r);overflow:hidden;margin-top:24px}