/* =========================================================
   Tema CINZA CLARO — carregado depois dos outros estilos
   ========================================================= */
:root {
  --bg: #eceef2;
  --bg-rgb: 236, 238, 242;
  --bg-2: #e2e5ea;
  --card: #ffffff;
  --card-2: #f5f6f8;
  --line: rgba(20, 18, 30, 0.10);
  --text: #17141d;
  --muted: #5d5868;
  --p1: #ff6a00;
  --p1-rgb: 255, 106, 0;
  --p2: #f0257d;
  --p2-rgb: 240, 37, 125;
  --p3: #ff3d3d;
  --soft: #c2410c;
  --shadow: 0 22px 50px -24px rgba(40, 30, 60, 0.28);
}
body { background: radial-gradient(1100px 560px at 100% -10%, rgba(var(--p2-rgb), .10), transparent 60%), radial-gradient(900px 500px at -10% 0%, rgba(var(--p1-rgb), .10), transparent 60%), var(--bg); }
.btn-ghost { background: #fff; border-color: rgba(20,18,30,.14); }
.btn-ghost:hover { background: #fff; border-color: rgba(var(--p1-rgb), .6); }
.hero::before { background-image: linear-gradient(rgba(20,18,30,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,18,30,.06) 1px, transparent 1px); }
.glow-1, .glow-2 { opacity: .18; }
.pill { color: #9a3412; background: rgba(var(--p1-rgb), .10); }
.art-card { background: #ffffff; border-color: rgba(20,18,30,.08); box-shadow: 0 30px 70px -30px rgba(var(--p2-rgb), .35); }
.code { background: #17141d; color: #f3eef7; }
.c1 { color: #ffb27a; } .c2 { color: #ffd166; } .c3 { color: #ff7ab6; } .c4 { color: #86efac; }
.float-badge { background: #fff; box-shadow: 0 12px 30px -14px rgba(40,30,60,.35); }
.nav.scrolled { background: rgba(255,255,255,.85); }
.marquee { background: #fff; }
.section-alt { background: linear-gradient(180deg, #e4e7ec, var(--bg)); }
.service, .project, .contact-list a, .assist-card, .skill, .contact-form { box-shadow: 0 10px 30px -22px rgba(40,30,60,.35); }
.project .thumb .badge, .project .thumb .count { background: rgba(255,255,255,.9); color: var(--text); }
.project .thumb::after { color: #fff; background: linear-gradient(180deg, rgba(var(--p2-rgb), .25), rgba(23,20,29,.65)); }
.no-img { color: #fff; }
.chip { background: #fff; }
.about-card { background: radial-gradient(circle at 30% 20%, rgba(var(--p1-rgb), .22), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--p2-rgb), .18), transparent 55%), #fff; }
input, select, textarea { background: var(--card-2); }
.modal-backdrop { background: rgba(23,20,29,.55); }
.modal-close, .g-nav { background: rgba(255,255,255,.92); color: var(--text); }
.gallery { background: #e9ebef; }
.socials a { background: #fff; }
/* Atendimento */
.assist-preview { background: var(--card-2); }
.assist-chips span, .qc { border-color: rgba(var(--p1-rgb), .45); color: #c2410c; background: #fff; }
.qc.on { background: rgba(var(--p1-rgb), .14); color: #9a3412; }
.qc.ok { color: #fff; }
.chat { background: var(--bg); box-shadow: 0 30px 80px -24px rgba(40,30,60,.45); }
.chat-head { background: linear-gradient(135deg, rgba(var(--p1-rgb), .14), rgba(var(--p2-rgb), .10)), #fff; }
.chat-head button { background: rgba(20,18,30,.06); }
.chat-head button:hover { background: rgba(20,18,30,.12); }
.msg.bot { background: #fff; box-shadow: 0 4px 14px -10px rgba(40,30,60,.4); }
.summary { color: var(--text); background: var(--card-2); }
.chat-input { background: #fff; }
.chat-float-tip { background: #fff; }

/* =========================================================
   BOTÕES verde esmeralda: degradê clareando, sombra flutuante,
   hover e brilho piscando bem devagar
   ========================================================= */
:root {
  --em-1: #1d4ed8;
  --em-2: #3b82f6;
  --em-3: #60a5fa;
  --em-4: #bfdbfe;
  --em-rgb: 59, 130, 246;
  --btn-grad: linear-gradient(120deg, var(--em-1) 0%, var(--em-2) 38%, var(--em-3) 72%, var(--em-4) 100%);
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 14px 28px -12px rgba(var(--em-rgb), .55), 0 4px 10px -4px rgba(29, 78, 216, .35), 0 0 0 0 rgba(var(--em-rgb), .0); }
  50% { box-shadow: 0 18px 36px -12px rgba(var(--em-rgb), .70), 0 6px 14px -4px rgba(29, 78, 216, .40), 0 0 0 7px rgba(var(--em-rgb), .12); }
}
@keyframes btn-sweep { 0%, 72% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }
@keyframes btn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes btn-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }

.btn-primary, .qc.ok, .chat-input button, .chip.active {
  background: var(--btn-grad);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(30, 58, 138, .45);
  border: 1px solid rgba(255, 255, 255, .55);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: btn-breathe 3.6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-position .6s ease, filter .35s;
}
/* Reflexo branco no topo do botão */
.btn-primary::before, .qc.ok::before, .chat-input button::before {
  content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  border-radius: inherit; pointer-events: none;
}
/* Faixa de luz que passa devagar sozinha */
.btn-primary::after, .qc.ok::after, .chat-input button::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: btn-sweep 5.5s ease-in-out infinite; transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after { transform: none; }
.btn-primary:hover, .qc.ok:hover, .chat-input button:hover, .chip.active:hover {
  transform: translateY(-4px) scale(1.02);
  background-position: 100% 50%;
  filter: saturate(1.15) brightness(1.04);
  box-shadow: 0 24px 44px -14px rgba(var(--em-rgb), .80), 0 10px 18px -8px rgba(29, 78, 216, .45), 0 0 0 8px rgba(var(--em-rgb), .14);
  animation-play-state: paused;
}
.btn-primary:active, .qc.ok:active, .chat-input button:active { transform: translateY(-1px) scale(.99); }
/* Estrelinha piscando no canto dos botões principais */
.hero-actions .btn-primary, .assist-card .btn-primary, .menu .btn-primary { padding-right: 34px; }
.btn-primary > span { position: relative; z-index: 2; }
.btn-primary .spark, .menu .btn-primary .spark { position: absolute; right: 13px; top: 50%; width: 10px; height: 10px; margin-top: -5px; z-index: 2; animation: btn-twinkle 2.8s ease-in-out infinite; }
.btn-primary .spark::before, .btn-primary .spark::after { content: ''; position: absolute; inset: 0; margin: auto; background: #fff; border-radius: 2px; }
.btn-primary .spark::before { width: 2px; height: 10px; }
.btn-primary .spark::after { width: 10px; height: 2px; }

/* Botão branco (secundário) com borda esmeralda */
.btn-ghost {
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  border: 1px solid rgba(var(--em-rgb), .45);
  color: #1e3a8a;
  box-shadow: 0 12px 24px -16px rgba(29, 78, 216, .45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .35s;
}
.btn-ghost:hover {
  background: linear-gradient(180deg, #ffffff, #dbeafe);
  border-color: var(--em-2);
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -16px rgba(var(--em-rgb), .6), 0 0 0 6px rgba(var(--em-rgb), .10);
}

/* Botão flutuante do atendimento */
.chat-float {
  background: var(--btn-grad);
  border: 2px solid rgba(255,255,255,.7);
  animation: btn-float 4s ease-in-out infinite, btn-breathe 3.6s ease-in-out infinite;
}
.chat-float::after { border-color: var(--em-3); animation: pulse 3.2s ease-out infinite; }
.chat-float:hover { transform: scale(1.08); animation-play-state: paused; }

/* Opções do assistente e filtros */
.qc, .assist-chips span { border-color: rgba(var(--em-rgb), .45); color: #1d4ed8; background: #fff; transition: transform .25s, box-shadow .25s, background .25s; }
.qc:hover { background: #eff6ff; transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(var(--em-rgb), .7); }
.qc.on { background: #dbeafe; color: #1e3a8a; }
.chip { transition: transform .25s, box-shadow .25s, border-color .25s; }
.chip:hover { transform: translateY(-2px); border-color: rgba(var(--em-rgb), .5); color: #1d4ed8; }
.chat-input input:focus { border-color: var(--em-2); }
.contact-list .ci { background: var(--btn-grad); }
.service .num { background: var(--btn-grad); box-shadow: 0 10px 22px -8px rgba(var(--em-rgb), .6); }
@media (max-width: 560px) {
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 14.5px; padding: 14px 12px; }
  .hero-actions .btn-primary { padding-right: 30px; }
  .hero-actions .btn-primary .spark { right: 11px; }
}

/* Painel */
.pill-s { background: rgba(20,18,30,.06); }
.pill-s.star { background: #fef3c7; color: #a16207; }
.pill-s.off { background: #fee2e2; color: #b91c1c; }
.tab.active { background: rgba(var(--em-rgb), .14); color: #1e3a8a; }
.icon-btn { background: #fff; }
.icon-btn:hover { border-color: var(--em-2); }
.drop.over, .drop:hover { border-color: var(--em-2); background: #eff6ff; }
.im.cover { border-color: var(--em-2); }

/* =========================================================
   FUNDO cinza puxando pra verde clarinho (sem laranja/rosa)
   ========================================================= */
:root { --bg: #eef1f6; --bg-rgb: 238, 241, 246; --bg-2: #e2e7ef; --card-2: #f4f6fa; --mint-rgb: 147, 197, 253; --sea-rgb: 148, 163, 184; }
body {
  background:
    radial-gradient(1100px 560px at 100% -10%, rgba(var(--sea-rgb), .16), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(var(--mint-rgb), .20), transparent 60%),
    linear-gradient(180deg, #e8eef8 0%, var(--bg) 45%, #eef0f4 100%);
}
.glow-1 { background: #93c5fd; opacity: .22; }
.glow-2 { background: #cbd5e1; opacity: .22; }
.pill { color: #1e3a8a; background: rgba(var(--mint-rgb), .18); border-color: rgba(59, 130, 246, .35); }
.section-alt { background: linear-gradient(180deg, #e1e7f0, var(--bg)); }
.art-card { box-shadow: 0 30px 70px -30px rgba(59, 130, 246, .35); }
.about-card { background: radial-gradient(circle at 30% 20%, rgba(var(--mint-rgb), .30), transparent 60%), radial-gradient(circle at 80% 90%, rgba(var(--sea-rgb), .22), transparent 55%), #fff; }
.chat-head { background: linear-gradient(135deg, rgba(var(--mint-rgb), .22), rgba(var(--sea-rgb), .14)), #fff; }
.project .thumb::after { background: linear-gradient(180deg, rgba(59, 130, 246, .22), rgba(23,20,29,.65)); }
.gallery { background: #e6eaf1; }

/* =========================================================
   PÁGINA DE CONTATO (formulário)
   ========================================================= */
.text-link { color: #1d4ed8; font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: #1e3a8a; }
.menu a.active { color: #1d4ed8; font-weight: 600; }
.contato-page { padding-top: 140px; }
.contato-intro h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; text-wrap: balance; }
.contato-intro > p { color: var(--muted); margin-bottom: 26px; max-width: 52ch; }
.contato-steps { list-style: none; display: grid; gap: 14px; margin-bottom: 26px; }
.contato-steps li { display: flex; gap: 14px; align-items: flex-start; color: var(--muted); }
.contato-steps b { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--btn-grad); font-size: 14px; box-shadow: 0 8px 18px -8px rgba(var(--em-rgb), .7); }
.contato-alt { color: var(--muted); font-size: 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--em-2); box-shadow: 0 0 0 4px rgba(var(--em-rgb), .14); }
.contact-form textarea { resize: vertical; min-height: 140px; }
.form-note.err { color: #b91c1c; }
.contato-ok { text-align: center; justify-items: center; }
.contato-ok p { color: var(--muted); }
.contato-ok strong { color: #1d4ed8; }
.ok-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #fff; background: var(--btn-grad); box-shadow: 0 14px 30px -12px rgba(var(--em-rgb), .7); }
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .contato-page { padding-top: 110px; }
}
[hidden] { display: none !important; }

/* =========================================================
   CLIENTES, PATROCINADORES E FEEDBACKS (acima do rodapé)
   ========================================================= */
.showcase .section-head { text-align: center; }
.showcase .section-head p { color: var(--muted); }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.logo-row .client { width: 160px; height: 88px; display: grid; place-items: center; padding: 16px; background: #fff; border: 1px solid rgba(20,18,30,.08); border-radius: 16px; box-shadow: 0 10px 26px -20px rgba(40,30,60,.4); transition: transform .3s, box-shadow .3s; }
.logo-row .client img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logo-row .client:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(var(--em-rgb), .55); }
.logo-row .client:hover img { filter: none; opacity: 1; }
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: center; gap: 20px; }
.sponsor { display: grid; gap: 12px; justify-items: center; padding: 26px 20px 20px; background: #fff; border: 1px solid rgba(var(--em-rgb), .25); border-radius: 20px; box-shadow: 0 14px 34px -24px rgba(29,78,216,.5); transition: transform .3s, box-shadow .3s; }
.sponsor img { height: 90px; width: 100%; object-fit: contain; }
.sponsor span { font-weight: 600; font-size: 15px; color: var(--text); }
a.sponsor:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(var(--em-rgb), .6); }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.fb-card { margin: 0; display: grid; gap: 12px; align-content: start; padding: 22px; background: #fff; border: 1px solid rgba(20,18,30,.08); border-radius: 18px; box-shadow: 0 10px 30px -22px rgba(40,30,60,.35); }
.fb-card blockquote { margin: 0; color: var(--text); }
.fb-card figcaption { display: grid; font-size: 14px; }
.fb-card figcaption span { color: var(--muted); }
.fb-stars { color: #f59e0b; letter-spacing: 2px; font-size: 18px; }
.fb-stars .off { color: #d4d9d7; }
.fb-empty { text-align: center; color: var(--muted); grid-column: 1 / -1; padding: 10px 0; }
.fb-cta { display: flex; justify-content: center; margin-top: 28px; }
.fb-box { display: block; width: min(480px, 100%); padding: 30px 26px 24px; }
.fb-form, .fb-done { display: grid; gap: 14px; }
.fb-form h3, .fb-done h3 { font-size: 22px; }
.fb-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.fb-form .muted, .fb-done .muted { color: var(--muted); margin-top: -8px; }
.fb-done { justify-items: center; text-align: center; padding: 10px 0; }
.stars-pick { display: flex; gap: 6px; }
.stars-pick button { font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer; color: #d4d9d7; transition: transform .15s, color .15s; padding: 0 2px; }
.stars-pick button.on { color: #f59e0b; }
.stars-pick button:hover { transform: scale(1.15); }
.stars-pick button:focus-visible { outline: 2px solid var(--em-2); border-radius: 6px; }
@media (max-width: 560px) {
  .logo-row .client { width: calc(50% - 9px); height: 76px; }
}
.fb-form input:focus, .fb-form textarea:focus { outline: none; border-color: var(--em-2); box-shadow: 0 0 0 4px rgba(var(--em-rgb), .14); }
input[type="checkbox"] { accent-color: var(--em-2); }

/* Chamada para a página de demonstrações */
.demos-teaser{display:flex;align-items:center;gap:18px;margin-top:34px;padding:18px 22px;border-radius:18px;background:linear-gradient(120deg,rgba(59,130,246,.10),rgba(255,255,255,.75));border:1px solid rgba(59,130,246,.28);color:inherit;text-decoration:none;transition:transform .2s,box-shadow .2s}
.demos-teaser:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(59,130,246,.45)}
.demos-teaser .dt-icons{font-size:1.35rem;white-space:nowrap}
.demos-teaser .dt-text{flex:1;color:#475569;line-height:1.5}
.demos-teaser .dt-text strong{display:block;color:#0f172a}
@media (max-width:700px){.demos-teaser{flex-direction:column;align-items:flex-start;text-align:left}}

/* =========================================================
   TEMA MI TECH: degradê do cinza (grafite) para o azul,
   igual à logo. Carregado por último, vale sobre os anteriores.
   ========================================================= */
:root {
  --p1: #475569; --p1-rgb: 71, 85, 105;
  --p2: #2563eb; --p2-rgb: 37, 99, 235;
  --p3: #60a5fa;
  --soft: #1d4ed8;
  --text: #0f172a; --muted: #55627a;
  --line: rgba(15, 23, 42, 0.10);
  --grad: linear-gradient(135deg, #4b5563, #3b5ba9 55%, #1d4ed8);
  --em-1: #334155; --em-2: #2563eb; --em-3: #3b82f6; --em-4: #60a5fa; --em-rgb: 37, 99, 235;
  --btn-grad: linear-gradient(120deg, #475569 0%, #3b5ba9 40%, #2563eb 75%, #3b82f6 100%);
  --shadow: 0 22px 50px -24px rgba(15, 23, 42, 0.30);
}
.btn-primary, .qc.ok, .chat-input button, .chip.active { text-shadow: 0 1px 2px rgba(15, 23, 42, .35); }
.grad, .brand b, .stats strong, .eyebrow { background-image: linear-gradient(90deg, #64748b, #2563eb, #3b82f6, #2563eb, #64748b); }
.pill { color: #1e3a8a; }
.code { background: #0f172a; color: #e2e8f0; }
.c1 { color: #93c5fd; } .c2 { color: #cbd5e1; } .c3 { color: #60a5fa; } .c4 { color: #a5f3fc; }
.tag { background: rgba(var(--p2-rgb), .10); color: #1d4ed8; }
.thumbs img.active { border-color: var(--p2); }
.marquee span::after { color: #3b82f6; }
.art-card img, .about-card img { filter: drop-shadow(0 18px 34px rgba(37, 99, 235, .35)); }
.project .thumb::after { background: linear-gradient(180deg, rgba(37, 99, 235, .22), rgba(15, 23, 42, .70)); }
.chat-head { background: linear-gradient(135deg, rgba(100, 116, 139, .16), rgba(59, 130, 246, .14)), #fff; }
.msg.user { background: var(--btn-grad); }
.summary { border-left-color: #2563eb; }
.count-badge { background: #2563eb; }
::selection { background: #2563eb; color: #fff; }
.brand span { letter-spacing: -.2px; }

/* =========================================================
   VÍDEO DE APRESENTAÇÃO (logo abaixo do topo)
   ========================================================= */
@keyframes vf-spin { to { --vf-angle: 360deg; } }
@property --vf-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hv-ring { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55); } 100% { box-shadow: 0 0 0 16px rgba(37,99,235,0); } }
.vshow { position: relative; background: radial-gradient(900px 420px at 50% 60%, rgba(59,130,246,.16), transparent 70%); }
.vframe { position: relative; max-width: 1040px; margin: 0 auto; padding: 4px; border-radius: 26px; background: conic-gradient(from var(--vf-angle), #64748b, #2563eb, #7dd3fc, #475569, #2563eb, #64748b); animation: vf-spin 6s linear infinite; box-shadow: 0 40px 90px -30px rgba(37,99,235,.55), 0 20px 40px -24px rgba(15,23,42,.5); }
.vframe video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; background: #070d1a; object-fit: cover; }
.vplay { position: absolute; inset: 0; margin: auto; width: 104px; height: 104px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: var(--btn-grad); color: #fff; font-size: 34px; cursor: pointer; display: grid; place-items: center; animation: hv-ring 1.8s ease-out infinite; transition: transform .25s, opacity .3s; }
.vplay span { margin-left: 6px; }
.vplay:hover { transform: scale(1.08); }
.vplay.gone { opacity: 0; pointer-events: none; transform: scale(.8); }
.vsound { position: absolute; right: 18px; bottom: 18px; font: 600 14px Inter, sans-serif; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(15,23,42,.65); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.vcta { display: flex; justify-content: center; margin-top: 30px; }
.hero-video { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(37,99,235,.25); box-shadow: 0 12px 26px -18px rgba(37,99,235,.7); color: var(--muted); font-size: 14.5px; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.hero-video > span:last-child { display: grid; line-height: 1.3; text-align: left; }
.hero-video b { color: var(--text); }
.hero-video:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -16px rgba(37,99,235,.7); }
.hv-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--btn-grad); animation: hv-ring 1.8s ease-out infinite; padding-left: 2px; }
@media (max-width: 560px) {
  .vframe { border-radius: 18px; padding: 3px; }
  .vframe video { border-radius: 15px; }
  .vplay { width: 76px; height: 76px; font-size: 26px; }
  .vsound { right: 10px; bottom: 10px; font-size: 12.5px; padding: 7px 11px; }
  .hero-video { font-size: 13.5px; }
}