/* Shared "console mockup" hero pattern used across VPS/n8n/Evolution API
   landing pages, extracted from melhor_vps_evolution_api_brasil.html so it
   isn't duplicated per-page. Classes use a neutral "ch-" (console-hero)
   prefix so pages don't collide with any page-specific hero variant. */
.ch-hero { position: relative; overflow: hidden; padding: 88px 0 72px; background: radial-gradient(circle at 12% 24%, rgba(52,190,242,.14), transparent 31%), radial-gradient(circle at 88% 30%, rgba(114,88,232,.10), transparent 28%), var(--bg); }
.ch-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(17,19,24,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(17,19,24,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.ch-hero-inner { position:relative; z-index:1; text-align:center; }
.ch-hero .eyebrow-plain { display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; }
.ch-hero .eyebrow-plain::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:chOnlinePulse 2.3s ease-out infinite; }
.ch-hero h1 { max-width:1180px; margin:0 auto 22px; font-size:clamp(2.45rem,4.8vw,4.65rem); line-height:.98; letter-spacing:-.075em; }
.ch-hero h1 span { display:inline-block; color:var(--cyan-deep); }
.ch-hero .lede { max-width:720px; margin:0 auto 28px; color:var(--muted); font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.55; }
.ch-hero .hero-actions { justify-content:center; margin-bottom:18px; }
.ch-hero-proof { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; margin:0 auto 48px; color:var(--muted); font-size:13px; font-weight:650; }
.ch-hero-proof span { display:inline-flex; align-items:center; gap:7px; }
.ch-hero-proof span::before { content:"✓"; color:var(--green); font-size:16px; }
.ch-console { position:relative; width:min(100%,1040px); margin:0 auto; padding:14px; border:1px solid rgba(17,19,24,.15); border-radius:28px; background:#10151f; box-shadow:0 35px 90px rgba(17,20,30,.25),0 0 0 8px rgba(255,255,255,.65); transform:perspective(1200px) rotateX(2deg); animation:chFloat 7s ease-in-out infinite; }
.ch-console-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border:1px solid rgba(255,255,255,.10); border-radius:17px; color:#e7edf7; font-size:13px; font-weight:700; }
.ch-console-brand { display:flex; align-items:center; gap:9px; }
.ch-console-brand img { width:24px; height:24px; border-radius:7px; }
.ch-online { display:inline-flex; align-items:center; gap:8px; color:#9de8bb; }
.ch-online i { width:8px; height:8px; border-radius:50%; background:#35d27f; box-shadow:0 0 0 0 rgba(53,210,127,.5); animation:chOnlinePulse 2s infinite; }
.ch-console-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:12px; margin-top:12px; text-align:left; }
.ch-console-card { min-height:112px; padding:17px; border:1px solid rgba(255,255,255,.10); border-radius:17px; background:linear-gradient(145deg,#1c2637,#141b28); color:#fff; transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease; }
.ch-console-card:hover { transform:translateY(-5px); border-color:rgba(85,211,255,.65); box-shadow:0 16px 28px rgba(0,0,0,.2); }
.ch-console-card.featured { grid-row:span 2; min-height:236px; background:linear-gradient(145deg,#17394c,#10202e); }
.ch-card-label { color:#8998ad; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ch-card-title { margin:8px 0 8px; color:#f7fbff; font:700 18px/1.1 "Sora",sans-serif; letter-spacing:-.03em; }
.ch-card-meta { color:#aebdce; font-size:12px; }
.ch-bars { display:flex; align-items:flex-end; gap:5px; height:60px; margin-top:18px; }
.ch-bars b { flex:1; border-radius:4px 4px 2px 2px; background:linear-gradient(#55d3ff,#168ec3); animation:chBar 2.8s ease-in-out infinite alternate; }
.ch-bars b:nth-child(2){height:65%;animation-delay:.2s}.ch-bars b:nth-child(3){height:88%;animation-delay:.5s}.ch-bars b:nth-child(4){height:52%;animation-delay:.8s}.ch-bars b:nth-child(5){height:76%;animation-delay:1.1s}.ch-bars b:nth-child(6){height:94%;animation-delay:1.4s}
.ch-chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.ch-chip { padding:5px 9px; border:1px solid rgba(85,211,255,.28); border-radius:999px; color:#a9eaff; background:rgba(85,211,255,.08); font-size:11px; font-weight:700; }
.ch-rank-mini { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.ch-rank-mini-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.045); font-size:12px; }
.ch-rank-mini-row b { color:#f7fbff; font-weight:700; }
.ch-rank-mini-row span { color:#aebdce; }
@keyframes chFloat { 0%,100%{transform:perspective(1200px) rotateX(2deg) translateY(0)}50%{transform:perspective(1200px) rotateX(2deg) translateY(-8px)} }
@keyframes chBar { from{transform:scaleY(.78);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom} }
@keyframes chOnlinePulse { 0%{box-shadow:0 0 0 0 rgba(53,210,127,.5)} 70%{box-shadow:0 0 0 8px rgba(53,210,127,0)} 100%{box-shadow:0 0 0 0 rgba(53,210,127,0)} }
@media (max-width: 720px) { .ch-hero{padding:58px 0 48px}.ch-hero h1{font-size:clamp(2.35rem,10vw,3.4rem)}.ch-hero .hero-actions{flex-direction:column;align-items:stretch}.ch-hero .button{width:100%}.ch-hero-proof{gap:8px 14px;margin-bottom:32px}.ch-console{padding:9px;border-radius:21px;transform:none;animation:none}.ch-console-grid{grid-template-columns:1fr 1fr}.ch-console-card.featured{grid-column:span 2;grid-row:auto;min-height:190px}.ch-console-top{font-size:11px;padding:11px}.ch-card-title{font-size:15px} }
@media (prefers-reduced-motion: reduce) { .ch-hero .eyebrow-plain::before,.ch-console,.ch-online i,.ch-bars b{animation:none!important} .ch-console{transform:none} }