/*
Theme Name: Voicelinx Modern
Theme URI: https://www.voicelinx.com
Author: Voicelinx
Description: Scroll-animated marketing theme for Voicelinx cloud telephony. Front page plus MS Teams, AI Agent, Pricing, Contact Centre and SIP/IAX Trunks page templates.
Version: 2.5.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voicelinx-modern
*/

* { box-sizing: border-box; }
body { margin: 0 !important; font-family: 'Manrope', system-ui, sans-serif !important; background: #fff; color: #101010; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: #101010; text-decoration: none; }
a:hover { color: #D0021B; }
::selection { background: #D0021B; color: #fff; }
h1, h2, h3, h4, h5, h6, p, blockquote { color: inherit !important; font-family: 'Manrope', system-ui, sans-serif !important; }
button, input, textarea, select { font-family: inherit; }
.vl-dark { color: #fff; background: #0B0B0C; }
.vl-dark a { color: #fff; }
.vl-dark a:hover { color: #FF3B4E; }
.vl-dark h1, .vl-dark h2, .vl-dark h3 { color: inherit; }
body.admin-bar header { top: 32px; }

/* Products dropdown */
.vl-dd { position: relative; }
.vl-dd .vl-dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; padding-top: 14px; }
.vl-dd:hover .vl-dd-menu, .vl-dd:focus-within .vl-dd-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }



.vl-burger { display: none; }
.vl-mobile-menu { position: fixed; inset: 0; background: #fff; z-index: 300; display: none; flex-direction: column; padding: 24px; overflow: auto; }
.vl-mobile-menu.open { display: flex; }
.vl-mobile-menu a { padding: 15px 6px; font-size: 18px; font-weight: 700; border-bottom: 1px solid #EEE; color: #101010; }
@media (max-width: 900px) {
  header nav { display: none !important; }
  .vl-burger { display: flex !important; }
  section a[style*="border-radius:2px"] { display: flex !important; width: 100%; justify-content: center; white-space: nowrap; box-sizing: border-box; }
  section [style*="display:flex"][style*="gap:14px"], section [style*="display:flex"][style*="gap:15px"], section [style*="display:flex"][style*="gap:16px"] { flex-direction: column; }
}

/* ---- mobile responsiveness ---- */
@media (max-width: 900px) {
  html, body { overflow-x: clip !important; }
  header { background: rgba(255,255,255,.97) !important; box-shadow: 0 1px 0 rgba(0,0,0,.08) !important; backdrop-filter: blur(10px) !important; }
  header > div { padding-top: 12px !important; padding-bottom: 12px !important; }
  #nav-logo, header a[href] { color: #101010 !important; }
  #nav-logo-img, header img { filter: none !important; }
  #hero { padding-top: 70px !important; }
  section { overflow-x: clip; }
}

@media (max-width: 760px) {
  #hero { height: 88vh !important; }
  #statement-track { height: auto !important; }
  #statement-track > div { position: static !important; height: auto !important; padding: 60px 0 !important; display: block !important; }
  #customers { height: auto !important; padding: 60px 0 !important; }
  #customers > div { position: static !important; height: auto !important; overflow: visible !important; display: block !important; }
  #cs-row { width: auto !important; flex-direction: column !important; transform: none !important; padding: 0 20px !important; gap: 20px !important; display: flex !important; }
  #cs-row figure { width: 100% !important; padding: 26px !important; gap: 22px !important; }
  #num-marquee { display: none !important; }
  #vl-phone, #teams-mock { transform: none !important; }
  [style*="height:72vh"] { height: 44vh !important; }
  [style*="padding:14vh"], [style*="padding:16vh"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  [style*="height:100vh"][style*="overflow:clip"] { min-height: 0 !important; }
}

@media (max-width: 1180px) {
  header nav { gap: 18px !important; }
  header nav > a, header .vl-dd > a { font-size: 13px !important; white-space: nowrap; }
  header nav a[href*="#customers"] { display: none !important; }
  header > div { gap: 24px; }
}

@media (max-width: 900px) {
  [style*="48px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns:1.1fr .9fr"], [style*="grid-template-columns:1.05fr .95fr"] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  #num-grid { grid-template-columns: 1fr 1fr !important; }
  [style*="position:sticky"][style*="height:100vh"][style*="align-items:center"] { position: static !important; height: auto !important; }
  [style*="height:72vh"] { height: 56vh !important; }
  .trunk-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .trunk-link { display: none !important; }
}
@media (max-width: 760px) {
  header nav { gap: 12px !important; }
  header nav > a { font-size: 13px !important; }
  .vl-dd { display: none !important; }
  header nav a[href*="#customers"] { display: none !important; }
  header nav a[href*="#platform"] { display: none !important; }
  header [style*="font-size:21px"] { font-size: 18px !important; }
  header img { height: 26px !important; }
}


@keyframes vlHeroIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes vlMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vlCue { 0%,100% { transform: scaleY(.3); opacity:.4; } 50% { transform: scaleY(1); opacity:1; } }
@keyframes vlGlowDrift { 0% { transform: translate(-12%, -6%) scale(1); } 50% { transform: translate(14%, 8%) scale(1.25); } 100% { transform: translate(-12%, -6%) scale(1); } }
@keyframes vlTeamsWave { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes vlPricePulse { 0%,88%,100% { transform: translateY(0); } 92%,96% { transform: translateY(-100%); } }
@keyframes vlDialRing { 0% { transform: rotate(0); } 12% { transform: rotate(28deg); } 24% { transform: rotate(0); } 100% { transform: rotate(0); } }
@keyframes vlCrmCursor { 0% { transform: translate(230px,190px); } 22% { transform: translate(96px,96px) scale(1); } 27% { transform: translate(96px,96px) scale(.8); } 32% { transform: translate(96px,96px) scale(1); } 86% { transform: translate(96px,96px) scale(1); opacity:1; } 94%,100% { transform: translate(230px,190px); opacity:0; } }
@keyframes vlCrmRow { 0%,26% { background:#F4F3F1; } 32%,84% { background:#FDECEE; } 92%,100% { background:#F4F3F1; } }
@keyframes vlCrmPop { 0%,30% { opacity:0; transform: translateY(12px) scale(.96); } 37%,84% { opacity:1; transform:none; } 92%,100% { opacity:0; transform: translateY(12px) scale(.96); } }
@keyframes vlNodePulse { 0%,70%,100% { box-shadow: 0 0 0 0 rgba(208,2,27,0); border-color:#E8E8E8; } 12% { box-shadow: 0 0 0 10px rgba(208,2,27,0); border-color:#D0021B; } 6% { box-shadow: 0 0 0 0 rgba(208,2,27,.35); border-color:#D0021B; } }
@keyframes vlPinBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes vlSeq1 { 0%,4% { opacity:0; transform:translateY(14px); } 9%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes vlSeq2 { 0%,20% { opacity:0; transform:translateY(14px); } 26%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes vlSeq3 { 0%,40% { opacity:0; transform:translateY(14px); } 46%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes vlSeq4 { 0%,60% { opacity:0; transform:translateY(10px); } 66%,88% { opacity:1; transform:none; } 96%,100% { opacity:0; } }
@keyframes vlDots { 0%,100% { transform: translateY(0); opacity:.4; } 50% { transform: translateY(-5px); opacity:1; } }
@keyframes vlBar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes vlWave { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes vlPulseRing { 0% { box-shadow: 0 0 0 0 rgba(208,2,27,.4);} 70% { box-shadow: 0 0 0 22px rgba(208,2,27,0);} 100% { box-shadow: 0 0 0 0 rgba(208,2,27,0);} }
@keyframes vlPacket { 0% { left: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes vlPacketBack { 0% { right: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { right: calc(100% - 10px); opacity: 0; } }
@keyframes vlNodeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(208,2,27,0); } 50% { box-shadow: 0 0 0 12px rgba(208,2,27,.08), 0 0 0 4px rgba(208,2,27,.15); } }

/* Suppress third-party mobile-menu plugins (old theme leftovers) */
.mob-menu-header-holder, #mob-menu-wrap, .mobmenul-container, .mobmenur-container,
#mobile-menu, .mobile-menu-container, #responsive-menu-container, #responsive-menu-button,
.rmp-container, .rmp-menu-trigger, .rmp_menu_trigger, #wprmenu_bar, #wprmenu_menu,
.slicknav_menu, .mean-container, .mean-bar, #slideout-menu, .ast-mobile-menu-buttons,
.menu-toggle:not(.vl-burger), .wpb-mobile-menu { display: none !important; visibility: hidden !important; }

/* Contact Form 7 inside the dark contact panel */
.vl-cf7-panel .wpcf7 h2 { display: none; }
.vl-cf7-panel .wpcf7 label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; color: #A8A8A8; margin-bottom: 18px; }
.vl-cf7-panel .wpcf7 .form-group { margin-bottom: 4px; }
.vl-cf7-panel .wpcf7 input[type="text"],
.vl-cf7-panel .wpcf7 input[type="email"],
.vl-cf7-panel .wpcf7 input[type="tel"],
.vl-cf7-panel .wpcf7 textarea {
  width: 100%; box-sizing: border-box; background: #0B0B0C; border: 1px solid #2A2A2C; border-radius: 2px;
  padding: 14px 16px; font-size: 15px; color: #fff; font-family: inherit; outline: none; margin-top: 8px;
}
.vl-cf7-panel .wpcf7 input:focus, .vl-cf7-panel .wpcf7 textarea:focus { border-color: #D0021B; }
.vl-cf7-panel .wpcf7 input[type="submit"], .vl-cf7-panel .wpcf7 .btn-submit {
  width: 100%; background: #D0021B; color: #fff; border: none; font-weight: 700; font-size: 15px;
  padding: 16px; border-radius: 2px; cursor: pointer; font-family: inherit; transition: background .25s ease; margin-top: 6px;
}
.vl-cf7-panel .wpcf7 input[type="submit"]:hover { background: #A50116; }
.vl-cf7-panel .wpcf7 .wpcf7-not-valid-tip { color: #FF3B4E; font-size: 12px; margin-top: 6px; }
.vl-cf7-panel .wpcf7 .wpcf7-response-output { border: 1px solid #2E5C41; background: rgba(47,163,107,.12); color: #7CE3A8; border-radius: 4px; padding: 14px 18px; margin: 16px 0 0; font-size: 14px; }
.vl-cf7-panel .wpcf7 form.invalid .wpcf7-response-output, .vl-cf7-panel .wpcf7 form.failed .wpcf7-response-output { border-color: #6E2430; background: rgba(208,2,27,.12); color: #FF8B96; }
.vl-cf7-panel .wpcf7 .wpcf7-spinner { filter: invert(1); }

/* Ninja Forms inside the dark contact panel */
.vl-cf7-panel .nf-form-cont .nf-form-title h3, .vl-cf7-panel .nf-form-cont h3 { display: none; }
.vl-cf7-panel .nf-form-cont .nf-field-label label { font-size: 13px !important; font-weight: 700 !important; color: #A8A8A8 !important; }
.vl-cf7-panel .nf-form-cont .ninja-forms-req-symbol { color: #FF3B4E !important; }
.vl-cf7-panel .nf-form-cont input[type="text"],
.vl-cf7-panel .nf-form-cont input[type="email"],
.vl-cf7-panel .nf-form-cont input[type="tel"],
.vl-cf7-panel .nf-form-cont textarea {
  width: 100% !important; box-sizing: border-box !important; background: #0B0B0C !important; border: 1px solid #2A2A2C !important;
  border-radius: 2px !important; padding: 14px 16px !important; font-size: 15px !important; color: #fff !important;
  font-family: inherit !important; outline: none !important;
}
.vl-cf7-panel .nf-form-cont input:focus, .vl-cf7-panel .nf-form-cont textarea:focus { border-color: #D0021B !important; }
.vl-cf7-panel .nf-form-cont input[type="button"], .vl-cf7-panel .nf-form-cont input[type="submit"] {
  width: 100% !important; background: #D0021B !important; color: #fff !important; border: none !important; font-weight: 700 !important;
  font-size: 15px !important; padding: 16px !important; border-radius: 2px !important; cursor: pointer !important;
  font-family: inherit !important; transition: background .25s ease !important;
}
.vl-cf7-panel .nf-form-cont input[type="button"]:hover, .vl-cf7-panel .nf-form-cont input[type="submit"]:hover { background: #A50116 !important; }
.vl-cf7-panel .nf-form-cont .nf-error-msg, .vl-cf7-panel .nf-form-cont .ninja-forms-validation-error { color: #FF8B96 !important; font-size: 12px !important; }
.vl-cf7-panel .nf-form-cont .nf-response-msg { border: 1px solid #2E5C41; background: rgba(47,163,107,.12); color: #7CE3A8; border-radius: 4px; padding: 14px 18px; font-size: 14px; }
.vl-cf7-panel .nf-form-cont .nf-field-container { margin-bottom: 18px !important; }

/* nf placeholder colors on dark panel */
.vl-cf7-panel .nf-form-cont input::placeholder, .vl-cf7-panel .nf-form-cont textarea::placeholder { color: #8A8A8A !important; opacity: 1; }

/* Blog */
.vl-blog-grid a.rev:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); color: #101010; }
.vl-blog-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid #E8E8E8; border-radius: 2px; font-size: 14px; font-weight: 700; color: #101010; }
.vl-blog-pager .page-numbers.current { background: #D0021B; border-color: #D0021B; color: #fff; }
.vl-blog-pager a.page-numbers:hover { border-color: #101010; color: #101010; }
.vl-post-content { font-size: 17.5px; line-height: 1.8; color: #2C2C2C; }
.vl-post-content p { margin: 0 0 1.4em; }
.vl-post-content h2 { font-size: 30px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 1.8em 0 .6em; color: #101010 !important; }
.vl-post-content h3 { font-size: 23px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 1.6em 0 .5em; color: #101010 !important; }
.vl-post-content a { color: #D0021B; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vl-post-content img { border-radius: 4px; margin: 1.6em 0; }
.vl-post-content blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid #D0021B; font-weight: 600; color: #101010; }
.vl-post-content ul, .vl-post-content ol { padding-left: 1.3em; margin: 0 0 1.4em; }
.vl-post-content li { margin-bottom: .5em; }
@media (max-width: 900px) {
  .vl-blog-grid { grid-template-columns: 1fr !important; }
}