:root{
    --vt-primary:#073879;
    --vt-dark:#173a61;
    --vt-green:#159447;
    --vt-gold:#d49b19;
    --vt-text:#5f6b7a;
    --vt-light:#f5f8fc;
    --vt-border:#e5eaf0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
    margin:0;
    overflow-x:hidden;
    color:#24364b;
    font-family:'Inter',Arial,Helvetica,sans-serif;
    background:#fff;
    font-size:14px;
}
a{text-decoration:none}
img{max-width:100%}
button{font-family:inherit}
.section-pad{padding:75px 0}
.section-heading{
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}
.section-heading .eyebrow{
    color:var(--vt-gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.section-heading h2{
    color:var(--vt-dark);
    font-size:clamp(25px,3vw,34px);
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.6px;
    margin:12px 0;
}
.section-heading p{
    color:var(--vt-text);
    font-size:13px;
    line-height:1.75;
}
.gradient-text{
    color:var(--vt-primary);
    background:linear-gradient(90deg,#073879,#159447);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* HERO + FIVE SLIDE DIAGRAM SLIDER */
.hero-section{
    position:relative;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(120deg,#042477,#073879 63%,#159447);
}
.hero-section:before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    top:-230px;
    right:-130px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    pointer-events:none;
}
.hero-inner{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:22px;
    min-height:470px;
    padding:48px 0 57px;
}
.hero-copy{min-width:0}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.27);
    border-radius:3px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px;
}
.hero-badge i{color:#f2cf72}
.hero-copy h1{
    max-width:580px;
    margin:20px 0 15px;
    color:#fff;
    font-size:clamp(32px,3.5vw,46px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
}
.hero-copy h1 span{color:#dceaff}
.hero-copy>p{
    max-width:520px;
    margin:0;
    color:rgba(255,255,255,.83);
    font-size:14px;
    line-height:1.8;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:11px;
    margin-top:23px;
}
.btn-outline-custom{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 17px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:3px;
    color:#fff;
    background:rgba(255,255,255,.05);
    font-size:12px;
    font-weight:700;
}
.btn-outline-custom:hover{color:#fff;background:rgba(255,255,255,.13)}
.hero-proof{
    display:flex;
    flex-wrap:wrap;
    gap:12px 18px;
    margin-top:22px;
    color:rgba(255,255,255,.78);
    font-size:10px;
}
.hero-proof i{color:#7be39e;margin-right:5px}

/* The diagram viewport remains visible on every slide */
.hero-art{
    position:relative;
    min-width:0;
    height:345px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.art-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateX(25px) scale(.97);
    transition:opacity .4s ease,transform .4s ease,visibility .4s;
    pointer-events:none;
}
.art-slide.active{
    opacity:1;
    visibility:visible;
    transform:translateX(0) scale(1);
}
.art-orbit{
    position:absolute;
    width:265px;
    height:265px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    box-shadow:0 0 0 28px rgba(255,255,255,.025),
               0 0 70px rgba(21,148,71,.15);
}
.art-orbit:before,.art-orbit:after{
    content:"";
    position:absolute;
    inset:24px;
    border:1px dashed rgba(255,255,255,.14);
    border-radius:50%;
}
.art-orbit:after{inset:65px;border-style:solid}
.art-center{
    position:relative;
    z-index:3;
    width:142px;
    height:142px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(9px);
    box-shadow:0 20px 55px rgba(0,0,0,.20);
    color:#fff;
    text-align:center;
}
.art-center i{font-size:34px;margin-bottom:9px}
.art-center strong{font-size:20px;letter-spacing:.3px}
.art-center small{margin-top:5px;font-size:8px;letter-spacing:1px;color:rgba(255,255,255,.75)}
.channel-float{
    position:absolute;
    z-index:4;
    width:125px;
    padding:13px 11px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:5px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(9px);
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    color:#fff;
}
.channel-float i{display:block;font-size:22px;margin-bottom:7px}
.channel-float strong{display:block;font-size:12px}
.channel-float small{display:block;margin-top:3px;color:rgba(255,255,255,.75);font-size:9px;line-height:1.4}
.float-tl{top:17px;left:0}
.float-tr{top:20px;right:0}
.float-bl{bottom:16px;left:2%}
.float-br{bottom:15px;right:0}
.float-sms i{color:#dceaff}
.float-rcs i{color:#f2cf72}
.float-wa i{color:#75e29a}
.float-ai i{color:#c9b7ff}
.float-voice i{color:#ffcb8e}
.float-email i{color:#a6e7ff}

/* SMS-specific diagram */
.sms-phone{
    position:relative;
    z-index:4;
    width:155px;
    padding:10px;
    border:3px solid #dceaff;
    border-radius:23px;
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.24);
    color:#263d59;
}
.phone-speaker{
    width:36px;height:4px;border-radius:5px;
    background:#d5dce5;margin:0 auto 12px;
}
.phone-title{
    text-align:center;
    font-size:10px;font-weight:800;
    padding-bottom:8px;border-bottom:1px solid #edf0f5;
}
.sms-bubble{
    margin-top:12px;
    padding:9px;
    border-radius:10px 10px 10px 2px;
    background:#edf4ff;
    font-size:9px;
    line-height:1.6;
}
.sms-bubble.reply{
    margin-left:17px;
    border-radius:10px 10px 2px 10px;
    background:#e7f8ee;
}
.sms-status{margin-top:10px;text-align:right;color:#159447;font-size:8px;font-weight:800}

/* RCS-specific rich message diagram */
.rcs-card{
    position:relative;
    z-index:4;
    width:190px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.7);
    border-radius:12px;
    background:#fff;
    color:#253d59;
    box-shadow:0 20px 50px rgba(0,0,0,.24);
}
.rcs-top{
    display:flex;align-items:center;gap:8px;
    padding:12px;
    border-bottom:1px solid #edf0f5;
    font-size:10px;font-weight:800;
}
.rcs-brand-icon{
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;
    color:#fff;background:#073879;
}
.rcs-visual{
    padding:18px 12px;
    text-align:center;
    color:#fff;
    background:linear-gradient(140deg,#0b4e91,#168c8c);
}
.rcs-visual i{font-size:38px}
.rcs-visual strong{display:block;margin-top:8px;font-size:12px}
.rcs-visual small{font-size:9px;color:#e2f4ff}
.rcs-actions{display:flex;gap:6px;padding:10px}
.rcs-actions span{
    flex:1;padding:8px 3px;
    border:1px solid #dce5ef;
    border-radius:5px;
    text-align:center;color:#073879;font-size:8px;font-weight:800;
}

/* WhatsApp-specific chat diagram */
.wa-phone{
    position:relative;
    z-index:4;
    width:175px;
    padding:10px;
    border:3px solid #e1f9e9;
    border-radius:22px;
    background:#f8fffa;
    box-shadow:0 18px 45px rgba(0,0,0,.23);
    color:#263d59;
}
.wa-head{
    display:flex;align-items:center;gap:8px;
    margin-bottom:14px;padding-bottom:10px;
    border-bottom:1px solid #d9e9de;
    font-size:10px;font-weight:800;
}
.wa-head i{font-size:22px;color:#159447}
.wa-chat{
    max-width:145px;
    padding:9px;
    border-radius:10px 10px 10px 2px;
    background:#fff;
    box-shadow:0 2px 7px rgba(0,0,0,.05);
    font-size:9px;line-height:1.6;
}
.wa-chat.reply{
    margin:10px 0 0 auto;
    background:#d9fdd3;
    border-radius:10px 10px 2px 10px;
}
.wa-chat small{display:block;text-align:right;margin-top:4px;color:#718274;font-size:7px}

/* Chatbot-specific diagram */
.bot-window{
    position:relative;
    z-index:4;
    width:195px;
    padding:14px;
    border:1px solid rgba(255,255,255,.7);
    border-radius:12px;
    background:#fff;
    color:#253d59;
    box-shadow:0 20px 50px rgba(0,0,0,.23);
}
.bot-header{display:flex;align-items:center;gap:9px;padding-bottom:12px;border-bottom:1px solid #edf0f5}
.bot-avatar{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    background:#edf4ff;color:#073879;font-size:18px;
}
.bot-header strong{display:block;font-size:11px}
.bot-header small{display:block;margin-top:3px;color:#159447;font-size:8px}
.bot-message{
    margin-top:12px;padding:10px;
    border-radius:9px;background:#f0f5fc;
    font-size:9px;line-height:1.6;
}
.bot-options{display:grid;gap:6px;margin-top:10px}
.bot-options span{
    padding:8px;border:1px solid #dce5ef;border-radius:6px;
    color:#073879;font-size:9px;font-weight:700;
}

/* Voice-specific diagram */
.voice-wave{
    position:relative;
    z-index:4;
    width:200px;
    padding:22px 15px;
    text-align:center;
    border:1px solid rgba(255,255,255,.32);
    border-radius:18px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(8px);
    box-shadow:0 20px 45px rgba(0,0,0,.2);
}
.voice-icon{
    display:flex;align-items:center;justify-content:center;
    width:70px;height:70px;margin:0 auto 12px;
    border-radius:50%;background:#fff;color:#159447;
    box-shadow:0 0 0 10px rgba(255,255,255,.08);
    font-size:27px;
}
.voice-wave strong{display:block;font-size:14px}
.voice-wave small{display:block;margin-top:5px;color:rgba(255,255,255,.75);font-size:9px}
.wave-bars{
    height:37px;
    display:flex;align-items:center;justify-content:center;gap:4px;
    margin-top:15px;
}
.wave-bars span{
    width:4px;border-radius:4px;
    background:#9be8b5;
    animation:wave 700ms ease-in-out infinite alternate;
}
.wave-bars span:nth-child(1),.wave-bars span:nth-child(9){height:9px}
.wave-bars span:nth-child(2),.wave-bars span:nth-child(8){height:17px;animation-delay:100ms}
.wave-bars span:nth-child(3),.wave-bars span:nth-child(7){height:25px;animation-delay:200ms}
.wave-bars span:nth-child(4),.wave-bars span:nth-child(6){height:16px;animation-delay:300ms}
.wave-bars span:nth-child(5){height:32px;animation-delay:150ms}
@keyframes wave{from{transform:scaleY(.55)}to{transform:scaleY(1)}}

/* CPaaS unified-platform diagram */
.cpaas-hub{
    position:relative;z-index:4;width:245px;padding:17px 14px;
    border:1px solid rgba(255,255,255,.55);border-radius:15px;
    background:rgba(255,255,255,.13);backdrop-filter:blur(10px);
    box-shadow:0 20px 50px rgba(0,0,0,.22);text-align:center;color:#fff;
}
.cpaas-hub-icon{
    width:54px;height:54px;margin:0 auto 8px;display:flex;
    align-items:center;justify-content:center;border-radius:14px;
    background:#fff;color:#073879;font-size:24px;
}
.cpaas-hub>strong{display:block;font-size:23px;letter-spacing:.5px}
.cpaas-hub>small{display:block;margin:4px 0 13px;font-size:8px;letter-spacing:1.3px;color:rgba(255,255,255,.8)}
.cpaas-channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cpaas-channel-grid span{
    display:flex;align-items:center;justify-content:flex-start;gap:7px;
    padding:8px 7px;border:1px solid rgba(255,255,255,.22);
    border-radius:5px;background:rgba(255,255,255,.09);
    font-size:9px;font-weight:700;
}
.cpaas-channel-grid i{width:14px;color:#a9efc0;font-size:12px}

/* Slider indicators */
.hero-bottom{
    position:absolute;
    z-index:10;
    bottom:17px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
}
.hero-dot{
    width:8px;height:8px;padding:0;
    border:0;border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:width .25s,background .25s;
}
.hero-dot.active{width:24px;border-radius:5px;background:#f2cf72}
.hero-slide-label{
    margin-left:7px;
    color:rgba(255,255,255,.8);
    font-size:10px;
    white-space:nowrap;
}

/* CHANNEL STRIP */
.channel-strip{border-bottom:1px solid #e9edf2;box-shadow:0 5px 18px rgba(23,58,97,.04)}
.channel-strip-inner{
    min-height:67px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}
.channel-strip-label{color:#8b97a6;font-size:10px;font-weight:800;letter-spacing:1.2px}
.channel-strip-item{display:inline-flex;align-items:center;gap:7px;color:var(--vt-dark);font-size:11px;font-weight:700}
.channel-strip-item i{color:var(--vt-primary);font-size:14px}

/* SERVICES */
.service-card,.industry-card,.platform-panel{border:1px solid var(--vt-border);box-shadow:0 10px 30px rgba(23,58,97,.055)}
.service-card{
    height:100%;padding:25px 22px;border-radius:4px;background:#fff;transition:.25s;
}
.service-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(23,58,97,.1);border-color:#d5dee8}
.service-icon{
    width:50px;height:50px;display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;border-radius:12px;background:#edf4ff;color:var(--vt-primary);font-size:21px;
}
.service-icon.green{background:#e8f8ef;color:#159447}
.service-icon.blue{background:#e9f1ff;color:#3974d5}
.service-icon.orange{background:#fff2df;color:#d48725}
.service-icon.pink{background:#ffedf7;color:#bd4e91}
.service-card h3{color:var(--vt-dark);font-size:16px;font-weight:800;line-height:1.4}
.service-card p{color:var(--vt-text);font-size:12px;line-height:1.75}
.service-card a{color:var(--vt-primary);font-size:12px;font-weight:800}

/* Vtalkz services showcase — section-only refinements */
.vt-service-showcase {
  --vt-navy:#17265f;
  padding:48px 0 42px !important;
  margin:0 !important;
  overflow:hidden;
}
.vt-service-showcase > .container { max-width:1600px; }
.vt-service-showcase .service-header-area {
  margin:0 auto 28px !important;
  padding:0 18px;
}
.vt-service-showcase .service-header-area .star2,
.vt-service-showcase .service-header-area .star3 { display:none !important; }
.vt-service-showcase .service-header-area h2 {
  font-family:inherit !important;
  font-size:clamp(28px,3vw,42px) !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-1px !important;
  color:var(--vt-navy) !important;
  margin:0 0 12px !important;
}
.vt-service-showcase .service-header-area p {
  max-width:760px;
  margin:0 auto !important;
  font-family:inherit !important;
  font-size:15px !important;
  line-height:1.65 !important;
  color:#5e687d !important;
}
.vt-service-showcase .service-all-boxes-area {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px !important;
  width:calc(100% - 72px);
  max-width:1600px;
  margin:0 auto !important;
  padding:0 !important;
  overflow:visible;
  isolation:isolate;
}
.vt-service-showcase .service-boxarea {
  --vt-card-bg:#f8bfd8;
  --vt-start-x:0px;
  box-sizing:border-box;
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  min-width:0;
  min-height:455px;
  padding:30px 18px 28px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:var(--vt-card-bg) !important;
  text-align:center;
  box-shadow:0 8px 22px rgba(23,38,95,.055) !important;
  opacity:0;
  transform:translateX(var(--vt-start-x)) scale(.76);
  transform-origin:center center;
  animation:vtServiceZoomOut 1.05s cubic-bezier(.16,.78,.22,1) forwards;
  transition:filter .3s ease,box-shadow .3s ease;
  will-change:transform,opacity;
}
.vt-service-showcase .service-boxarea:nth-child(1) { --vt-card-bg:#f7bed9; --vt-start-x:68px; animation-delay:0s; }
.vt-service-showcase .service-boxarea:nth-child(2) { --vt-card-bg:#c9c5fa; --vt-start-x:34px; animation-delay:0s; }
.vt-service-showcase .service-boxarea:nth-child(3) { --vt-card-bg:#ffe7a0; --vt-start-x:0px; animation-delay:0s; }
.vt-service-showcase .service-boxarea:nth-child(4) { --vt-card-bg:#d2f7d6; --vt-start-x:-34px; animation-delay:0s; }
.vt-service-showcase .service-boxarea:nth-child(5) { --vt-card-bg:#f7bed9; --vt-start-x:-68px; animation-delay:0s; }
@keyframes vtServiceZoomOut {
  0% { opacity:0; transform:translateX(var(--vt-start-x)) scale(.76); }
  72% { opacity:1; transform:translateX(0) scale(1.025); }
  100% { opacity:1; transform:translateX(0) scale(1); }
}
.vt-service-showcase .service-boxarea > a {
  display:block;
  width:100%;
  min-height:48px;
  margin:0 !important;
  color:#111a36 !important;
  font-family:inherit !important;
  font-size:clamp(16px,1.25vw,21px) !important;
  font-weight:650 !important;
  line-height:1.3 !important;
  letter-spacing:-.35px;
  text-decoration:none !important;
}
.vt-service-showcase .service-boxarea .space40 { display:none !important; }
.vt-service-showcase .service-boxarea > img {
  display:block;
  width:104px !important;
  height:104px !important;
  max-width:100%;
  object-fit:contain;
  margin:12px auto 24px !important;
  filter:drop-shadow(0 11px 10px rgba(22,31,73,.16));
  transform-style:preserve-3d;
  backface-visibility:visible;
  transition:transform .9s cubic-bezier(.2,.75,.25,1),filter .4s ease;
}
.vt-service-showcase .service-boxarea:hover > img {
  transform:perspective(700px) rotateY(360deg) translateY(-3px);
  filter:drop-shadow(0 15px 12px rgba(22,31,73,.22));
}
.vt-service-showcase .service-boxarea > p {
  margin:0 !important;
  max-width:255px;
  color:#17213b !important;
  font-family:inherit !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.68 !important;
}
.vt-service-showcase .service-boxarea:hover {
  z-index:2;
  filter:saturate(1.035);
  box-shadow:0 12px 28px rgba(23,38,95,.10) !important;
}
@media (max-width:1100px) {
  .vt-service-showcase .service-all-boxes-area {
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:calc(100% - 48px);
    gap:10px !important;
  }
  .vt-service-showcase .service-boxarea {
    min-height:390px;
    padding:28px 18px !important;
  }
  .vt-service-showcase .service-boxarea:nth-child(n) { animation-delay:0s; }
  .vt-service-showcase .service-boxarea:nth-child(1) { --vt-start-x:26px; }
  .vt-service-showcase .service-boxarea:nth-child(2) { --vt-start-x:-26px; }
  .vt-service-showcase .service-boxarea:nth-child(3) { --vt-start-x:26px; }
  .vt-service-showcase .service-boxarea:nth-child(4) { --vt-start-x:-26px; }
  .vt-service-showcase .service-boxarea:nth-child(5) { --vt-start-x:0px; }
}
@media (max-width:575px) {
  .vt-service-showcase { padding:36px 0 30px !important; }
  .vt-service-showcase .service-header-area { margin-bottom:20px !important; }
  .vt-service-showcase .service-header-area h2 { font-size:27px !important; letter-spacing:-.5px !important; }
  .vt-service-showcase .service-header-area p { font-size:13px !important; }
  .vt-service-showcase .service-all-boxes-area {
    width:calc(100% - 36px);
    grid-template-columns:1fr;
    gap:10px !important;
  }
  .vt-service-showcase .service-boxarea {
    min-height:0;
    padding:22px 20px 24px !important;
    border-radius:13px !important;
  }
  .vt-service-showcase .service-boxarea:nth-child(n) { --vt-start-x:0px; animation-delay:0s; }
  .vt-service-showcase .service-boxarea > a { min-height:0; font-size:20px !important; }
  .vt-service-showcase .service-boxarea > img { width:88px !important; height:88px !important; margin:15px auto 18px !important; }
  .vt-service-showcase .service-boxarea > p { font-size:14px !important; line-height:1.6 !important; max-width:320px; }
}
@media (prefers-reduced-motion:reduce) {
  .vt-service-showcase .service-boxarea {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .vt-service-showcase .service-boxarea > img { transition:none !important; }
}

/* PLATFORM */
.platform-section{background:#f6f8fb}
.platform-panel{padding:40px;background:#fff;border-radius:4px}
.platform-copy h2{color:var(--vt-dark);font-size:clamp(25px,3vw,35px);font-weight:800;line-height:1.25}
.platform-copy p{color:var(--vt-text);font-size:13px;line-height:1.8}
.platform-list{padding:0;margin:22px 0;list-style:none}
.platform-list li{display:flex;gap:10px;margin:14px 0;color:var(--vt-text);font-size:13px;line-height:1.65}
.platform-list i{color:var(--vt-green);margin-top:3px}
.platform-list strong{color:var(--vt-dark)}
.dashboard-card{padding:20px;border:1px solid var(--vt-border);border-radius:4px;box-shadow:0 15px 40px rgba(23,58,97,.09)}
.dashboard-head{display:flex;justify-content:space-between;padding-bottom:15px;margin-bottom:9px;border-bottom:1px solid #edf0f4;color:var(--vt-dark);font-size:12px;font-weight:800}
.dashboard-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f1f3f6}
.dashboard-row:last-child{border-bottom:0}
.dashboard-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#edf4ff;color:var(--vt-primary)}
.dashboard-row strong{display:block;color:var(--vt-dark);font-size:11px}
.dashboard-row small{display:block;color:#8a96a5;font-size:9px;margin-top:3px}
.sent{font-size:9px;font-weight:800;color:var(--vt-green)}

/* INDUSTRIES */
.industry-card{display:flex;align-items:center;gap:13px;height:100%;padding:17px;border-radius:4px;background:#fff;transition:.25s}
.industry-card:hover{transform:translateY(-3px);border-color:#cfd9e4}
.industry-icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;flex:0 0 43px;border-radius:4px;background:#edf4ff;color:var(--vt-primary);font-size:17px}
.industry-card h3{margin:0;color:var(--vt-dark);font-size:13px;font-weight:800}
.industry-card p{margin:4px 0 0;color:#8995a4;font-size:11px}

/* CTA */
.cta-section{padding:0 0 75px}
.cta-box{position:relative;overflow:hidden;padding:55px 25px;text-align:center;color:#fff;border-radius:4px;background:linear-gradient(120deg,#042477,#073879 60%,#159447)}
.cta-box h2{position:relative;z-index:2;font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.3}
.cta-box p{position:relative;z-index:2;max-width:600px;margin:10px auto 22px;color:rgba(255,255,255,.8);font-size:13px;line-height:1.75}
.btn-white{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:3px;color:var(--vt-primary);background:#fff;font-size:12px;font-weight:800}
.btn-white:hover{color:var(--vt-primary-dark)}

/* FOOTER */
.site-footer{padding:60px 0 0;background:#092a55;color:#fff}
.footer-logo{width:150px;height:58px;object-fit:contain}
.footer-about{max-width:340px;margin:17px 0;color:rgba(255,255,255,.7);font-size:12px;line-height:1.8}
.footer-title{margin-bottom:16px;color:#fff;font-size:13px;font-weight:800}
.footer-links{padding:0;margin:0;list-style:none}
.footer-links li{margin:9px 0}
.footer-links a{color:rgba(255,255,255,.7);font-size:12px}
.footer-links a:hover{color:#fff}
.footer-social{display:flex;gap:8px}
.footer-social a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:3px;color:#fff}
.footer-contact p{display:flex;gap:9px;color:rgba(255,255,255,.7);font-size:12px;line-height:1.6}
.footer-contact i{color:#d7a62a;margin-top:3px}
.footer-contact a{color:rgba(255,255,255,.7)}
.footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:40px;padding:17px 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:10px}

/* DEMO POPUP */
.demo-popup{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,25,55,.72)}
.demo-popup.active{display:flex}
.demo-popup-box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:30px;background:#fff;border-radius:5px;box-shadow:0 25px 70px rgba(0,0,0,.25)}
.demo-close{position:absolute;right:15px;top:10px;border:0;background:none;color:#738096;font-size:28px;cursor:pointer}
.demo-heading span{color:var(--vt-gold);font-size:10px;font-weight:800;letter-spacing:2px}
.demo-heading h2{margin:5px 0;color:var(--vt-dark);font-size:25px}
.demo-heading p{color:var(--vt-text);font-size:12px;line-height:1.7}
.demo-field{margin-top:14px}
.demo-field label{display:block;margin-bottom:6px;color:var(--vt-dark);font-size:11px;font-weight:700}
.demo-field input,.demo-field select,.demo-field textarea{width:100%;padding:11px 12px;border:1px solid #dce3eb;border-radius:3px;outline:none;font-size:12px;color:#34475e;background:#fff}
.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{border-color:#8ea8c4}
.demo-submit{width:100%;margin-top:17px;padding:12px;border:0;border-radius:3px;background:var(--vt-primary);color:#fff;font-size:12px;font-weight:800;cursor:pointer}
.demo-privacy{margin:10px 0 0;text-align:center;color:#8a96a5;font-size:9px;line-height:1.6}

/* RESPONSIVE */
@media(max-width:1199px){
}
@media(max-width:991px){
    .hero-inner{grid-template-columns:1fr;gap:0;padding:42px 0 55px}
    .hero-copy{text-align:center}
    .hero-copy h1,.hero-copy>p{margin-left:auto;margin-right:auto}
    .hero-actions,.hero-proof{justify-content:center}
    .hero-art{width:min(100%,450px);height:330px;margin:0 auto}
    .channel-strip-inner{gap:15px;padding:14px 0}
    .platform-panel{padding:30px}
}
@media(max-width:767px){
    .section-pad{padding:60px 0}
    .section-heading{margin-bottom:32px}
    .section-heading h2{font-size:26px}
    .hero-inner{padding:36px 0 53px}
    .hero-copy h1{font-size:32px;line-height:1.2;letter-spacing:-.6px}
    .hero-copy>p{font-size:13px}
    .hero-badge{font-size:9px}
    .hero-art{height:300px;max-width:390px}
    .art-orbit{width:220px;height:220px}
    .art-center{width:120px;height:120px}
    .art-center i{font-size:28px}
    .art-center strong{font-size:18px}
    .channel-float{width:105px;padding:10px 8px}
    .channel-float i{font-size:19px}
    .channel-float strong{font-size:11px}
    .channel-float small{font-size:8px}
    .float-tl{top:8px;left:0}
    .float-tr{top:8px;right:0}
    .float-bl{bottom:9px;left:0}
    .float-br{bottom:9px;right:0}
    .sms-phone{width:140px}
    .rcs-card{width:170px}
    .wa-phone{width:155px}
    .bot-window{width:175px}
    .voice-wave{width:175px}
    .cpaas-hub{width:220px;padding:13px 10px}
    .cpaas-channel-grid span{font-size:8px;padding:7px 5px}
    .channel-strip-label{width:100%;text-align:center}
    .channel-strip-inner{gap:13px}
    .platform-panel{padding:24px 18px}
    .cta-section{padding-bottom:55px}
    .footer-bottom{flex-direction:column}
}
@media(max-width:380px){
    .hero-copy h1{font-size:29px}
    .hero-art{height:275px}
    .art-orbit{width:195px;height:195px}
    .art-center{width:108px;height:108px}
    .channel-float{width:92px;padding:8px 7px}
    .channel-float i{font-size:17px}
    .channel-float strong{font-size:10px}
    .channel-float small{font-size:7px}
    .hero-proof{gap:9px;font-size:9px}
    .hero-actions a,.hero-actions button{width:100%}
}
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* MOBILE HERO - KEEP SAME SIDE-BY-SIDE LAYOUT, JUST SCALE IT CLEANLY */
@media (max-width:767px){
    .hero-inner{
        grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
        align-items:center;
        gap:6px;
        min-height:0;
        padding:24px 0 44px;
    }

    .hero-copy{
        min-width:0;
        text-align:left;
    }

    .hero-badge{
        display:inline-flex;
        max-width:100%;
        padding:5px 6px;
        gap:4px;
        font-size:6.8px;
        letter-spacing:.2px;
        line-height:1.2;
        white-space:nowrap;
    }

    .hero-copy h1{
        margin:11px 0 8px;
        font-size:clamp(18px,5.2vw,23px);
        line-height:1.12;
        letter-spacing:-.35px;
    }

    .hero-copy>p{
        margin:0;
        font-size:9.5px;
        line-height:1.48;
        max-width:100%;
    }

    .hero-actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        margin-top:12px;
    }

    .hero-actions .btn-primary-custom,
    .hero-actions .btn-outline-custom{
        width:100%;
        min-width:0;
        padding:7px 5px;
        min-height:34px;
        gap:4px;
        font-size:8.5px;
        line-height:1.2;
        text-align:center;
        white-space:nowrap;
    }

    .hero-proof{
        display:grid;
        gap:4px;
        margin-top:11px;
        font-size:7.5px;
        line-height:1.25;
    }

    .hero-proof i{margin-right:3px}

    /* RIGHT-SIDE DIAGRAM: smaller, but stays beside the text */
    .hero-art{
        width:100%;
        max-width:none;
        height:205px;
        min-width:0;
        margin:0;
        overflow:hidden;
    }

    .art-slide{
        transform:translateX(5px) scale(.88);
    }
    .art-slide.active{
        transform:translateX(0) scale(.88);
    }

    .art-orbit{
        width:126px;
        height:126px;
        box-shadow:0 0 0 8px rgba(255,255,255,.025),0 0 25px rgba(21,148,71,.12);
    }
    .art-orbit:before{inset:11px}
    .art-orbit:after{inset:32px}

    .art-center{
        width:64px;
        height:64px;
        padding:3px;
    }
    .art-center i{font-size:16px;margin-bottom:2px}
    .art-center strong{font-size:10px;letter-spacing:0}
    .art-center small{font-size:4.5px;margin-top:2px;letter-spacing:.3px}

    /* FOUR SUPPORTING BOXES - keep them, but make them compact */
    .channel-float{
        width:58px;
        padding:5px 4px;
        border-radius:4px;
        box-shadow:0 4px 12px rgba(0,0,0,.12);
    }
    .channel-float i{font-size:11px;margin-bottom:2px}
    .channel-float strong{font-size:7px;line-height:1.15}
    .channel-float small{font-size:5px;line-height:1.15;margin-top:2px}
    .float-tl{top:5px;left:0}
    .float-tr{top:5px;right:0}
    .float-bl{bottom:5px;left:0}
    .float-br{bottom:5px;right:0}

    /* Main cards inside the diagram */
    .sms-phone{width:78px;padding:5px;border-width:2px;border-radius:12px}
    .phone-speaker{width:20px;height:3px;margin-bottom:5px}
    .phone-title{font-size:5.5px;padding-bottom:4px}
    .sms-bubble{margin-top:5px;padding:4px;border-radius:5px;font-size:5.2px;line-height:1.3}
    .sms-bubble.reply{margin-left:6px}
    .sms-status{margin-top:4px;font-size:5.2px}

    .rcs-card{width:96px;border-radius:7px}
    .rcs-top{gap:3px;padding:5px;font-size:5.5px}
    .rcs-brand-icon{width:17px;height:17px;font-size:7px}
    .rcs-visual{padding:8px 5px}
    .rcs-visual i{font-size:18px}
    .rcs-visual strong{font-size:6.5px;margin-top:3px}
    .rcs-visual small{font-size:5px}
    .rcs-actions{gap:2px;padding:4px}
    .rcs-actions span{padding:3px 2px;font-size:4.5px}

    .wa-phone{width:90px;padding:5px;border-width:2px;border-radius:12px}
    .wa-head{gap:3px;margin-bottom:6px;padding-bottom:4px;font-size:5.5px}
    .wa-head i{font-size:12px}
    .wa-chat{padding:4px;font-size:5.2px;line-height:1.3;border-radius:5px}
    .wa-chat.reply{margin-top:4px}
    .wa-chat small{font-size:4.5px;margin-top:2px}

    .bot-window{width:100px;padding:6px;border-radius:7px}
    .bot-header{gap:4px;padding-bottom:5px}
    .bot-avatar{width:20px;height:20px;font-size:10px}
    .bot-header strong{font-size:6.5px}
    .bot-header small{font-size:4.5px;margin-top:1px}
    .bot-message{margin-top:5px;padding:5px;font-size:5.3px;line-height:1.3}
    .bot-options{gap:2px;margin-top:4px}
    .bot-options span{padding:3px;font-size:4.5px;border-radius:3px}

    .voice-wave{width:105px;padding:9px 6px;border-radius:9px}
    .voice-icon{width:34px;height:34px;margin-bottom:5px;font-size:14px;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
    .voice-wave strong{font-size:7.5px}
    .voice-wave small{font-size:5.5px;margin-top:2px}
    .wave-bars{height:18px;gap:2px;margin-top:5px}
    .wave-bars span{width:2px}
    .wave-bars span:nth-child(1),.wave-bars span:nth-child(9){height:4px}
    .wave-bars span:nth-child(2),.wave-bars span:nth-child(8){height:8px}
    .wave-bars span:nth-child(3),.wave-bars span:nth-child(7){height:12px}
    .wave-bars span:nth-child(4),.wave-bars span:nth-child(6){height:7px}
    .wave-bars span:nth-child(5){height:14px}

    .cpaas-hub{width:108px;padding:7px 5px;border-radius:7px}
    .cpaas-hub-icon{width:26px;height:26px;margin-bottom:3px;border-radius:6px;font-size:12px}
    .cpaas-hub>strong{font-size:12px}
    .cpaas-hub>small{font-size:4.5px;letter-spacing:.4px;margin:2px 0 5px}
    .cpaas-channel-grid{gap:2px}
    .cpaas-channel-grid span{gap:2px;padding:3px 2px;font-size:4.5px;border-radius:3px}
    .cpaas-channel-grid i{width:7px;font-size:6px}

    .hero-bottom{bottom:11px;gap:4px}
    .hero-dot{width:5px;height:5px}
    .hero-dot.active{width:14px}
    .hero-slide-label{font-size:7px;margin-left:2px}
}

@media(max-width:380px){
    .hero-inner{
        grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) !important;
        gap:5px;
        padding:20px 0 42px;
    }
    .hero-copy h1{font-size:17px;line-height:1.13}
    .hero-copy>p{font-size:8.5px}
    .hero-badge{font-size:6.2px}
    .hero-actions{margin-top:10px;gap:5px}
    .hero-actions .btn-primary-custom,
    .hero-actions .btn-outline-custom{min-height:31px;padding:6px 4px;font-size:7.8px}
    .hero-proof{font-size:7px;gap:3px}
    .hero-art{height:185px}
    .channel-float{width:54px;padding:4px 3px}
    .channel-float i{font-size:10px}
    .channel-float strong{font-size:6.5px}
    .channel-float small{font-size:4.5px}
    .art-orbit{width:112px;height:112px}
    .art-center{width:58px;height:58px}
    .art-center i{font-size:14px}
    .art-center strong{font-size:9px}
}


/* ================= PREMIUM FLOATING HERO ART — DESIGN ONLY =================
   Existing labels and wording are preserved; only the visual treatment changes. */
.hero-art{
    isolation:isolate;
}
.art-orbit{
    animation:orbitBreath 5.5s ease-in-out infinite;
    border-color:rgba(255,255,255,.25);
}
.art-orbit:before{
    animation:orbitSpin 18s linear infinite;
    transform-origin:center;
}
.art-orbit:after{
    animation:orbitSpin 13s linear infinite reverse;
    transform-origin:center;
}
/* Two tiny luminous dots travel around the illustration */
.art-slide:before,
.art-slide:after{
    content:"";
    position:absolute;
    z-index:2;
    left:50%;
    top:50%;
    width:7px;
    height:7px;
    border-radius:50%;
    pointer-events:none;
    background:#f7d778;
    box-shadow:0 0 8px 3px rgba(247,215,120,.55),0 0 18px rgba(247,215,120,.45);
    transform-origin:0 0;
    animation:dotOrbit 7s linear infinite;
}
.art-slide:after{
    width:5px;height:5px;
    background:#8ff0b1;
    box-shadow:0 0 8px 3px rgba(143,240,177,.45),0 0 15px rgba(143,240,177,.35);
    animation-duration:9s;
    animation-direction:reverse;
}
@keyframes orbitBreath{
    0%,100%{transform:scale(.98);opacity:.78}
    50%{transform:scale(1.035);opacity:1}
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes dotOrbit{
    from{transform:rotate(0deg) translateX(137px) rotate(0deg)}
    to{transform:rotate(360deg) translateX(137px) rotate(-360deg)}
}
/* Turn the four service boxes into compact floating labels */
.channel-float{
    width:auto;
    max-width:138px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(5,34,83,.24);
    backdrop-filter:blur(7px);
    box-shadow:0 7px 22px rgba(0,0,0,.08);
    display:grid;
    grid-template-columns:25px auto;
    align-items:center;
    column-gap:7px;
    transition:transform .35s ease,border-color .35s ease,background .35s ease;
    animation:floatLabel 4s ease-in-out infinite;
}
.channel-float:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.48);
    background:rgba(255,255,255,.14);
}
.channel-float i{
    grid-row:span 2;
    width:25px;height:25px;
    display:flex;align-items:center;justify-content:center;
    margin:0;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    font-size:13px;
}
.channel-float strong{font-size:10px;line-height:1.2;white-space:nowrap}
.channel-float small{font-size:8px;line-height:1.3;margin-top:2px;white-space:nowrap}
.float-tl{top:22px;left:0}
.float-tr{top:25px;right:0}
.float-bl{bottom:20px;left:0}
.float-br{bottom:20px;right:0}
.float-tr{animation-delay:-1s}
.float-bl{animation-delay:-2s}
.float-br{animation-delay:-3s}
@keyframes floatLabel{
    0%,100%{translate:0 0}
    50%{translate:0 -5px}
}
/* Keep the final trust point gently blinking */
.hero-proof span:last-child{
    position:relative;
}
.hero-proof span:last-child:after{
    content:"";
    display:inline-block;
    width:5px;height:5px;
    margin:0 0 1px 7px;
    border-radius:50%;
    background:#f2cf72;
    box-shadow:0 0 0 0 rgba(242,207,114,.65);
    animation:blingPoint 1.6s ease-out infinite;
}
@keyframes blingPoint{
    0%{opacity:1;box-shadow:0 0 0 0 rgba(242,207,114,.65)}
    70%{opacity:.8;box-shadow:0 0 0 7px rgba(242,207,114,0)}
    100%{opacity:1;box-shadow:0 0 0 0 rgba(242,207,114,0)}
}
@media(max-width:767px){
    .hero-art{height:205px}
    .art-orbit{width:126px;height:126px}
    .art-slide:before{animation-name:dotOrbitMobile}
    .art-slide:after{animation-name:dotOrbitMobile;animation-direction:reverse}
    @keyframes dotOrbitMobile{
        from{transform:rotate(0deg) translateX(65px) rotate(0deg)}
        to{transform:rotate(360deg) translateX(65px) rotate(-360deg)}
    }
    .channel-float{
        max-width:78px;
        padding:4px 5px;
        grid-template-columns:15px auto;
        column-gap:4px;
        border-radius:12px;
        background:rgba(4,32,78,.22);
        box-shadow:none;
        animation-duration:5s;
    }
    .channel-float i{
        width:15px;height:15px;
        font-size:8px;
        background:rgba(255,255,255,.13);
    }
    .channel-float strong{font-size:6.5px;line-height:1.15}
    .channel-float small{
        font-size:5px;
        line-height:1.15;
        margin-top:1px;
        white-space:normal;
    }
    .float-tl{top:5px;left:0}
    .float-tr{top:5px;right:0}
    .float-bl{bottom:5px;left:0}
    .float-br{bottom:5px;right:0}
}
@media(max-width:380px){
    .channel-float{max-width:70px;padding:3px 4px;grid-template-columns:13px auto;column-gap:3px}
    .channel-float i{width:13px;height:13px;font-size:7px}
    .channel-float strong{font-size:6px}
    .channel-float small{font-size:4.7px}
}
@media(prefers-reduced-motion:reduce){
    .art-orbit,.art-orbit:before,.art-orbit:after,.art-slide:before,.art-slide:after,
    .channel-float,.hero-proof span:last-child:after{
        animation:none!important;
    }
}


/* Vtalkz pastel service columns — reference-matched motion */
#services{padding:0!important;background:#fff}
#services .container{width:100%;max-width:none;padding:0 14px}
#services .section-heading{max-width:900px;margin:0 auto 28px;padding:0 18px}
#services .section-heading h2,
#services .section-heading p{font-family:'Inter',Arial,sans-serif}
#services .service-strip{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
    overflow:hidden;border-radius:0 0 12px 12px;
    box-shadow:0 16px 38px rgba(23,58,97,.10);
    perspective:1200px;
}
#services .service-tile{
    --tile:#f8bad8;--tile-ink:#172b49;
    min-width:0;min-height:640px;padding:44px 24px 42px;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    background:var(--tile);border:0;border-right:1px solid rgba(255,255,255,.38);
    opacity:0;transform:scaleX(.06);will-change:transform,opacity;
    animation:vtColumnReveal .9s cubic-bezier(.2,.8,.2,1) forwards;
    box-shadow:none;transition:filter .3s ease,box-shadow .3s ease;
}
#services .service-tile:last-child{border-right:0}
#services .service-tile:nth-child(1){--tile:#f8bad8;transform-origin:right center;animation-delay:.42s}
#services .service-tile:nth-child(2){--tile:#c9c5fa;transform-origin:right center;animation-delay:.21s}
#services .service-tile:nth-child(3){--tile:#ffe8a0;transform-origin:center center;animation-delay:0s}
#services .service-tile:nth-child(4){--tile:#d4f8d5;transform-origin:left center;animation-delay:.21s}
#services .service-tile:nth-child(5){--tile:#f8bad8;transform-origin:left center;animation-delay:.42s}
#services .service-tile:hover{z-index:2;filter:saturate(1.04);box-shadow:0 12px 30px rgba(23,35,70,.09)}
#services .service-tile h3{
    min-height:56px;margin:0;display:flex;align-items:flex-start;justify-content:center;
    color:#071d3c;font-family:'Inter',Arial,sans-serif;
    font-size:clamp(18px,1.55vw,27px);line-height:1.32;font-weight:700;letter-spacing:-.65px;
}
#services .service-tile h3 a{color:inherit;text-decoration:none}
#services .service-tile .service-art{
    position:relative;isolation:isolate;width:150px;height:140px;flex:0 0 140px;
    display:flex;align-items:center;justify-content:center;margin:28px auto 40px;
    color:#fff;font-size:54px;text-decoration:none;perspective:900px;
    background:transparent;border:0;border-radius:0;box-shadow:none;filter:none;
    transform-style:preserve-3d;backface-visibility:visible;transition:transform 1.05s cubic-bezier(.22,.75,.2,1),filter .4s ease;
}
#services .service-tile .service-art i{
    position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
    width:112px;height:104px;border-radius:27px 25px 29px 25px;
    background:linear-gradient(145deg,#fff 0%,#8e87ff 18%,#303a98 48%,#111e58 100%);
    box-shadow:inset 0 3px 7px rgba(255,255,255,.85),inset 0 -7px 10px rgba(10,20,70,.2),0 18px 22px rgba(28,36,76,.22);
    text-shadow:0 2px 3px rgba(20,35,75,.22);backface-visibility:visible;
}
#services .service-tile:nth-child(1) .service-art i{border-radius:50%;background:linear-gradient(145deg,#ffd5f0,#d85ce7 48%,#8536c7)}
#services .service-tile:nth-child(2) .service-art i{background:linear-gradient(145deg,#d5ddff,#273c85 35%,#101c53 78%,#5548cb)}
#services .service-tile:nth-child(3) .service-art i{border-radius:50%;background:linear-gradient(145deg,#a9ffc2,#20e77a 42%,#079653)}
#services .service-tile:nth-child(4) .service-art i{background:linear-gradient(145deg,#d7e0ff,#293a88 35%,#101c53 78%,#5548cb)}
#services .service-tile:nth-child(5) .service-art i{background:linear-gradient(145deg,#a8b4ff,#3947a9 42%,#101b50)}
/* Smooth vertical-axis spin on hover; a full turn keeps the icon facing forward */
#services .service-tile .service-art:hover{transform:rotateY(360deg) scale(1.04);filter:drop-shadow(0 13px 10px rgba(35,45,80,.2))}
#services .service-tile .service-art img{
    display:block;position:relative;z-index:2;width:100%;height:100%;max-width:150px;max-height:140px;
    object-fit:contain;border:0;background:transparent;filter:drop-shadow(0 10px 9px rgba(25,35,80,.2));
    transition:transform 1.05s cubic-bezier(.22,.75,.2,1);
}
#services .service-tile .service-art:has(img){background:transparent;border:0;box-shadow:none}
#services .service-tile .service-art:has(img):hover img{transform:none}
#services .service-tile p{
    max-width:300px;margin:0;color:#101e35;font-family:'Inter',Arial,sans-serif;
    font-size:clamp(15px,1.27vw,21px);font-weight:400;line-height:1.72;letter-spacing:-.25px;
}
#services .service-tile a:focus-visible{outline:2px solid #173a61;outline-offset:4px}
@keyframes vtColumnReveal{
    0%{opacity:0;transform:scaleX(.06);filter:blur(3px)}
    70%{opacity:1;filter:blur(0)}
    100%{opacity:1;transform:scaleX(1);filter:blur(0)}
}
@media(max-width:991px){
    #services .service-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
    #services .service-tile{min-height:460px;padding:30px 16px}
    #services .service-tile:nth-child(4),#services .service-tile:nth-child(5){animation-delay:.35s}
    #services .service-tile .service-art{margin:24px auto 28px}
    #services .service-tile:nth-child(3){border-right:0}
    #services .service-tile:nth-child(n+4){border-top:1px solid rgba(255,255,255,.5)}
}
@media(max-width:575px){
    #services .container{padding:0 10px}
    #services .service-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    #services .service-tile{min-height:370px;padding:24px 13px}
    #services .service-tile:nth-child(1){animation-delay:.2s}
    #services .service-tile:nth-child(2){animation-delay:.1s}
    #services .service-tile:nth-child(3){animation-delay:0s}
    #services .service-tile:nth-child(n+4){animation-delay:.2s}
    #services .service-tile .service-art{width:110px;height:110px;flex-basis:110px;margin:22px auto 25px;font-size:42px}
    #services .service-tile .service-art i{width:86px;height:82px}
    #services .service-tile h3{min-height:44px;font-size:14px;letter-spacing:-.2px}
    #services .service-tile p{font-size:12px;line-height:1.65}
    #services .service-tile:nth-child(odd){border-right:1px solid rgba(255,255,255,.5)}
    #services .service-tile:nth-child(even){border-right:0}
    #services .service-tile:nth-child(3){border-right:1px solid rgba(255,255,255,.5)}
    #services .service-tile:last-child{grid-column:1/-1;border-right:0}
}
@media(prefers-reduced-motion:reduce){
    #services .service-tile{animation:none!important;opacity:1;filter:none;transform:none;transition:none}
    #services .service-tile .service-art,#services .service-tile .service-art img{transition:none}
}


/* ==========================================================
   HOMEPAGE FINISHING PASS — typography, buttons and cards
   Scoped to index.php; shared header/footer are untouched.
   ========================================================== */

/* Keep homepage section titles visually consistent */
body .section-heading h2,
body #services .service-header-area h2,
body .platform-copy h2,
body .cta-box h2 {
    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
    color: #192f63 !important;
    font-weight: 750 !important;
    letter-spacing: -1.05px !important;
    line-height: 1.16 !important;
    text-wrap: balance;
}
body .section-heading h2,
body #services .service-header-area h2 {
    font-size: clamp(29px, 3.1vw, 42px) !important;
}
body #services .service-header-area h2 {
    max-width: 820px;
    margin: 0 auto 14px !important;
}
body .section-heading p,
body #services .service-header-area p {
    color: #65738a !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
}

/* Service strip: prevent clipped outer cards and keep equal columns */
body #services .row { margin-left: 0; margin-right: 0; }
body #services .col-lg-12 { padding-left: 0; padding-right: 0; }
body #services .service-all-boxes-area {
    width: min(100% - 56px, 1540px) !important;
    max-width: 1540px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
}
body #services .service-boxarea {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border: 1px solid rgba(25,47,99,.075) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 32px rgba(24,43,88,.075) !important;
    padding: 32px 20px 30px !important;
    overflow: hidden;
}
body #services .service-boxarea::after {
    content: "";
    position: absolute;
    inset: 0 18% auto;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: rgba(255,255,255,.82);
    pointer-events: none;
}
body #services .service-boxarea:hover {
    transform: translateY(-7px) scale(1.012) !important;
    box-shadow: 0 20px 42px rgba(24,43,88,.14) !important;
}
body #services .service-boxarea > a {
    color: #172b55 !important;
    font-size: clamp(16px, 1.18vw, 20px) !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    min-height: 54px;
}
body #services .service-boxarea > img {
    width: 112px !important;
    height: 112px !important;
    margin: 15px auto 26px !important;
    filter: drop-shadow(0 13px 13px rgba(27,39,83,.19));
}
body #services .service-boxarea > p {
    color: #263653 !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
}

/* Primary and secondary actions: polished, consistent controls */
body .btn-primary-custom,
body .hero-actions .btn-primary-custom,
body .platform-copy .btn-primary-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 13px 23px;
    border: 1px solid #173b78;
    border-radius: 999px;
    background: linear-gradient(135deg, #173b78 0%, #10265e 100%);
    color: #fff;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05px;
    box-shadow: 0 9px 22px rgba(12,39,94,.20);
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
body .btn-primary-custom:hover,
body .hero-actions .btn-primary-custom:hover,
body .platform-copy .btn-primary-custom:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 13px 27px rgba(12,39,94,.27);
    background: linear-gradient(135deg, #214d91 0%, #142d6c 100%);
}
body .btn-primary-custom i { transition: transform .22s ease; }
body .btn-primary-custom:hover i { transform: translateX(4px); }

body .hero-actions .btn-outline-custom {
    min-height: 48px;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #fff;
    font-size: 13px;
    font-weight: 650;
    backdrop-filter: blur(8px);
    transition: background .22s ease, transform .22s ease, border-color .22s ease;
}
body .hero-actions .btn-outline-custom:hover {
    background: rgba(255,255,255,.19);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

/* Platform feature panel and dashboard */
body .platform-panel {
    padding: clamp(24px, 4vw, 48px) !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #fff 0%, #f7faff 100%) !important;
    box-shadow: 0 18px 48px rgba(23,58,97,.08) !important;
}
body .dashboard-card {
    border: 1px solid #e4ebf5 !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23,58,97,.10) !important;
}
body .dashboard-row {
    padding: 13px 10px;
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease;
}
body .dashboard-row:hover {
    background: #f5f8fd;
    transform: translateX(3px);
}
body .dashboard-icon {
    border-radius: 11px !important;
}

/* Industry boxes become cleaner, more tactile cards */
body .industry-card {
    position: relative;
    padding: 19px !important;
    border: 1px solid #e7edf5 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 7px 22px rgba(23,58,97,.045) !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
body .industry-card:hover {
    transform: translateY(-5px) !important;
    border-color: #cbd9ee !important;
    box-shadow: 0 16px 34px rgba(23,58,97,.11) !important;
}
body .industry-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    border-radius: 13px !important;
    background: linear-gradient(145deg, #edf4ff, #e4f5ed) !important;
    color: #173b78 !important;
    font-size: 19px !important;
}

/* Bottom CTA */
body .cta-box {
    border-radius: 22px !important;
    padding: clamp(38px, 5vw, 62px) 25px !important;
    box-shadow: 0 18px 44px rgba(4,36,119,.17);
}
body .btn-white {
    min-height: 48px;
    padding: 13px 23px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;
    background: #fff;
    color: #173b78 !important;
    font-size: 13px;
    font-weight: 750;
    box-shadow: 0 9px 24px rgba(0,0,0,.13);
    transition: transform .22s ease, box-shadow .22s ease;
}
body .btn-white:hover {
    color: #10265e !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

body a:focus-visible,
body button:focus-visible {
    outline: 3px solid rgba(21,148,71,.55);
    outline-offset: 3px;
}

@media (max-width: 1100px) {
    body #services .service-all-boxes-area {
        width: min(100% - 40px, 820px) !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 14px !important;
    }
    body #services .service-boxarea { min-height: 390px; }
}
@media (max-width: 575px) {
    body .section-heading h2,
    body #services .service-header-area h2 {
        font-size: 28px !important;
        letter-spacing: -.65px !important;
    }
    body #services .service-all-boxes-area {
        width: calc(100% - 32px) !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    body #services .service-boxarea {
        min-height: 0 !important;
        padding: 25px 20px !important;
    }
    body #services .service-boxarea > img {
        width: 92px !important;
        height: 92px !important;
        margin: 12px auto 18px !important;
    }
    body .hero-actions .btn-primary-custom,
    body .hero-actions .btn-outline-custom { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body .btn-primary-custom,
    body .btn-outline-custom,
    body .industry-card,
    body .btn-white,
    body .dashboard-row { transition: none !important; }
}


/* Services title: match the homepage section-heading typography exactly */
body #services .service-header-area .vt-service-main-title {
    display: block !important;
    max-width: 820px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
    font-size: clamp(29px, 3.1vw, 42px) !important;
    font-weight: 750 !important;
    line-height: 1.16 !important;
    letter-spacing: -1.05px !important;
    color: #192f63 !important;
    text-transform: none !important;
    text-shadow: none !important;
    text-wrap: balance;
}
@media (max-width: 575px) {
    body #services .service-header-area .vt-service-main-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        letter-spacing: -.65px !important;
    }
}


/* Services heading typography: match the site's industry-section heading style.
   Deliberately scoped to this heading and its supporting paragraph only. */
body #services .service-header-area h2.vt-service-main-title {
    max-width: 1120px !important;
    margin: 0 auto 20px !important;
    color: #193b65 !important;
    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
    font-size: clamp(34px, 4.1vw, 52px) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -1.65px !important;
    text-align: center !important;
    text-transform: none !important;
    text-shadow: none !important;
}
body #services .service-header-area h2.vt-service-main-title .vt-heading-gradient {
    background: linear-gradient(90deg, #073879 0%, #159447 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #159447;
}
body #services .service-header-area p.vt-service-main-description {
    max-width: 900px !important;
    margin: 0 auto !important;
    color: #64748b !important;
    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
    font-size: clamp(16px, 1.55vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}
@media (max-width: 575px) {
    body #services .service-header-area h2.vt-service-main-title {
        font-size: 31px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.8px !important;
        margin-bottom: 14px !important;
    }
    body #services .service-header-area p.vt-service-main-description {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}


/* Final fine-tuning: keep the same heading design, but reduce its scale */
body #services .service-header-area h2.vt-service-main-title {
    font-size: clamp(30px, 2.8vw, 40px) !important;
    line-height: 1.16 !important;
    letter-spacing: -1.15px !important;
    margin-bottom: 14px !important;
}
body #services .service-header-area p.vt-service-main-description {
    font-size: clamp(15px, 1.15vw, 17px) !important;
    line-height: 1.65 !important;
    max-width: 850px !important;
}
@media (max-width: 575px) {
    body #services .service-header-area h2.vt-service-main-title {
        font-size: 27px !important;
        line-height: 1.2 !important;
        letter-spacing: -.7px !important;
    }
    body #services .service-header-area p.vt-service-main-description {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}



/* =========================================================
   Vtalkz homepage hero slider refinement
   Compact vertical rhythm, aligned artwork and live content
   ========================================================= */
.hero-section {
    min-height: 0 !important;
    padding: 0 !important;
}
.hero-inner {
    min-height: 0 !important;
    padding: 42px 0 12px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(22px, 3vw, 54px) !important;
}
.hero-copy {
    max-width: 610px;
}
.hero-copy h1 {
    margin: 16px 0 13px !important;
    font-size: clamp(34px, 3.3vw, 49px) !important;
    line-height: 1.12 !important;
}
.hero-copy > p {
    max-width: 550px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}
.hero-actions { margin-top: 20px !important; }
.hero-proof { margin-top: 18px !important; }
.hero-art {
    height: clamp(340px, 34vw, 440px) !important;
    width: 100% !important;
    overflow: hidden !important;
}
.art-slide {
    inset: 0 !important;
    padding: 10px 8px !important;
}
.channel-float {
    width: 126px !important;
    padding: 11px 10px !important;
}
.channel-float strong { font-size: 11px !important; }
.channel-float small { font-size: 8px !important; }
.sms-phone { width: 190px !important; padding: 14px !important; }
.rcs-card { width: 225px !important; }
.wa-phone { width: 210px !important; padding: 13px !important; }
.bot-window { width: 230px !important; }
.voice-wave { width: 230px !important; }
.cpaas-hub { width: 260px !important; }

/* Dots and label stay in normal document flow, eliminating the large
   empty band beneath the hero content. */
.hero-bottom {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100%;
    min-height: 34px;
    justify-content: center !important;
    padding: 0 16px 18px !important;
    margin: 0 !important;
}

/* Smooth, readable transitions between each channel illustration. */
.art-slide {
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility .55s !important;
}
.art-slide.active {
    animation: vtHeroSlideIn .65s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes vtHeroSlideIn {
    from { opacity: 0; transform: translateX(24px) scale(.975); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.hero-copy #heroBadgeText,
.hero-copy h1,
.hero-copy #heroDescription {
    transition: opacity .2s ease, transform .2s ease;
}
.hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@media (max-width: 991px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) !important;
        gap: 18px !important;
        padding-top: 32px !important;
    }
    .hero-art { height: 340px !important; }
    .channel-float { width: 108px !important; padding: 8px !important; }
    .channel-float strong { font-size: 9px !important; }
    .channel-float small { font-size: 7px !important; }
}
@media (max-width: 767px) {
    .hero-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 34px 0 8px !important;
    }
    .hero-copy { max-width: 100%; }
    .hero-copy h1 { font-size: clamp(30px, 7vw, 40px) !important; }
    .hero-copy > p { font-size: 13px !important; }
    .hero-art {
        height: 310px !important;
        margin-top: 5px;
    }
    .hero-bottom { padding-bottom: 18px !important; }
}
@media (max-width: 480px) {
    .hero-art { height: 275px !important; }
    .channel-float { width: 92px !important; }
    .sms-phone { width: 140px !important; }
    .rcs-card { width: 170px !important; }
    .wa-phone { width: 155px !important; }
    .bot-window { width: 175px !important; }
    .voice-wave { width: 175px !important; }
    .cpaas-hub { width: 210px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .art-slide.active { animation: none !important; }
}

/* Vtalkz light pastel footer theme */
.site-footer {
    background: linear-gradient(135deg, #f7faff 0%, #eef5ff 52%, #f5fbf8 100%) !important;
    color: #263b57 !important;
    border-top: 1px solid #e2ebf6;
}
.site-footer .footer-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
    color: #123766 !important;
}
.site-footer .footer-links a,
.site-footer a {
    color: #526780 !important;
}
.site-footer .footer-links a:hover,
.site-footer a:hover {
    color: #0877c9 !important;
}
.site-footer .footer-contact,
.site-footer p,
.site-footer li,
.site-footer span {
    color: #526780;
}
.site-footer .footer-social a {
    color: #174778 !important;
    border-color: #d5e2f1 !important;
    background: rgba(255, 255, 255, .72);
}
.site-footer .footer-social a:hover {
    color: #fff !important;
    background: #0877c9 !important;
    border-color: #0877c9 !important;
}
.site-footer .footer-bottom {
    border-top: 1px solid #dce7f3;
    color: #718198 !important;
}
.site-footer .footer-bottom a {
    color: #526780 !important;
}