/* Sample labelling, house rule: sample UI stays explicitly labelled */
.vt-sample-note{
  font-family:'Poppins',sans-serif;
  font-size:11.5px;line-height:1.5;
  color:#7a93a8;margin:10px 2px 0;
}
.vt-sample-note--center{text-align:center;margin:0;max-width:none;background:#f4f9ff;padding:14px 6% 34px}

.vt-hero{
  min-height:92vh;
  padding:100px 6% 80px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:4rem;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,#f0f7ff 0%,#eafaff 50%,#f0fbf8 100%);
  animation:vt-hero-fade 1s ease .1s both;
}
@keyframes vt-hero-fade{from{opacity:0}to{opacity:1}}
#vt-canvas{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.6}
.vt-hero-content{position:relative;z-index:2}

.vt-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  background:linear-gradient(135deg,#1a7de8,#1fa8c7) !important;
  border:none !important;
  border-radius:50px !important;
  padding:.5rem 1.3rem .5rem .6rem !important;
  font-size:.82rem !important;
  font-weight:700 !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  color:white !important;
  -webkit-text-fill-color:white !important;
  margin-bottom:2.2rem !important;
  box-shadow:0 4px 20px rgba(26,125,232,.35) !important;
  animation:vt-pop .8s cubic-bezier(.34,1.56,.64,1) .3s both !important;
}
@keyframes vt-pop{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
.vt-badge-dot{
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  animation:vt-spin 4s linear infinite;flex-shrink:0;
}
@keyframes vt-spin{to{transform:rotate(360deg)}}
.vt-badge-dot::after{
  content:'';width:10px;height:10px;border-radius:50%;
  background:white;
  animation:vt-spin 4s linear infinite reverse;
}

.vt-h1{
  font-family:'Poppins',sans-serif !important;
  font-size:clamp(36px,5.5vw,64px);
  font-weight:800;line-height:1.08;
  letter-spacing:-0.02em;color:#0b1929;
  margin-bottom:.8rem;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) .5s both;
}
@keyframes vt-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.vt-typed-cursor{
  display:inline-block;width:3px;height:.85em;
  background:#1a7de8;border-radius:2px;vertical-align:middle;
  margin-left:3px;animation:vt-blink .85s step-end infinite;
}
@keyframes vt-blink{0%,100%{opacity:1}50%{opacity:0}}

.vt-hero-sub{
  font-size:1.35rem;font-weight:600;line-height:1.45;
  margin-bottom:1.4rem;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) .7s both;
}
.vt-grad-blue{
  background:linear-gradient(135deg,#1a7de8,#4a9ef8);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.vt-grad-teal{
  background:linear-gradient(135deg,#36C1E0,#4DB8A4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.vt-hero-desc{
  font-size:1.1rem;color:#3a4e65;line-height:1.85;
  max-width:500px;margin-bottom:3rem;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) .85s both;
}

.vt-hero-btns{
  display:flex;gap:1.1rem;flex-wrap:wrap;
  margin-bottom:2rem;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) 1s both;
}
.vt-btn-p{
  background:linear-gradient(135deg,#1a7de8,#1fa8c7);color:white;
  padding:1rem 2.2rem;border-radius:50px;
  font-size:1.05rem;font-weight:700;
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 6px 28px rgba(26,125,232,.38);
  transition:all .25s;
  animation:vt-glow 3s ease-in-out 2s infinite;
}
@keyframes vt-glow{
  0%,100%{box-shadow:0 6px 28px rgba(26,125,232,.38),0 0 0 0 rgba(26,125,232,.15)}
  50%{box-shadow:0 6px 28px rgba(26,125,232,.38),0 0 0 9px rgba(26,125,232,0)}
}
.vt-btn-p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 42px rgba(26,125,232,.5)}
.vt-btn-p svg,.vt-btn-s svg{width:16px;height:16px;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform .25s}
.vt-btn-p svg{stroke:white}
.vt-btn-p:hover svg,.vt-btn-s:hover svg{transform:translateX(4px)}
.vt-btn-s{
  background:white;color:#3a4e65;
  padding:1rem 2.2rem;border-radius:50px;
  font-size:1.05rem;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid rgba(11,25,41,.1);
  box-shadow:0 2px 14px rgba(11,25,41,.06);
  transition:all .25s;
}
.vt-btn-s svg{stroke:#3a4e65}
.vt-btn-s:hover{border-color:rgba(26,125,232,.3);color:#1a7de8;transform:translateY(-2px)}
.vt-btn-s:hover svg{stroke:#1a7de8}

/* Domain search */
.vt-hero-domain{
  margin-bottom:2rem;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) 1.05s both;
}
.vt-hero-domain form{
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}
.vt-hero-dom-row{
  display:flex !important;
  align-items:stretch !important;
  max-width:420px !important;
  background:white !important;
  border:1.5px solid rgba(26,125,232,.15) !important;
  border-radius:50px !important;
  overflow:hidden !important;
  box-shadow:0 4px 18px rgba(26,125,232,.1) !important;
  transition:border-color .2s,box-shadow .2s !important;
  padding:0 !important;
}
.vt-hero-dom-row:focus-within{
  border-color:#36C1E0 !important;
  box-shadow:0 6px 24px rgba(54,193,224,.18) !important;
}
.vt-hero-dom-icon{
  display:flex !important;
  align-items:center !important;
  padding:0 4px 0 16px !important;
  font-size:.95rem !important;
  flex-shrink:0 !important;
  background:white !important;
  border:none !important;
}
.vt-hero-dom-row input[type="text"]{
  flex:1 !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  padding:12px 10px !important;
  font-family:'Poppins',sans-serif !important;
  font-size:13px !important;
  color:#0b1929 !important;
  background:white !important;
  min-width:0 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:0 !important;
  margin:0 !important;
  height:auto !important;
}
.vt-hero-dom-row input[type="text"]::placeholder{
  color:#b0bec8 !important;
}
.vt-hero-dom-row button[type="submit"]{
  flex-shrink:0 !important;
  background:linear-gradient(135deg,#1a7de8,#36C1E0) !important;
  border:none !important;
  outline:none !important;
  cursor:pointer !important;
  padding:0 22px !important;
  font-family:'Poppins',sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  white-space:nowrap !important;
  transition:opacity .2s !important;
  border-radius:0 !important;
  margin:0 !important;
  height:auto !important;
  align-self:stretch !important;
  display:flex !important;
  align-items:center !important;
}
.vt-hero-dom-row button[type="submit"]:hover{
  opacity:.88 !important;
}
.vt-hero-dom-tlds{
  font-size:11px;color:#9ab0c2;
  font-weight:500;margin-top:8px;
  padding-left:4px;
}

.vt-trust{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) 1.15s both;
}
.vt-ti{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#7a93a8;font-weight:500}
.vt-ti svg{width:17px;height:17px;flex-shrink:0;stroke:#1fa8c7;fill:none;stroke-width:2;stroke-linecap:round}
.vt-sep{width:1px;height:16px;background:rgba(11,25,41,.12)}

/* Hero visual */
.vt-hero-vis{
  position:relative;z-index:2;
  height:580px;
  animation:vt-up .9s cubic-bezier(.25,.8,.25,1) .6s both;
}
.vt-dash{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-44%,-50%);
  width:380px;
  background:white;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(11,25,41,.15);
  border:1px solid rgba(26,125,232,.08);
  overflow:hidden;
  z-index:3;
  transition:transform .4s cubic-bezier(.25,.8,.25,1);
}
.vt-dash:hover{transform:translate(-44%,-52%) scale(1.02)}
.vt-dash-bar{
  background:linear-gradient(135deg,#0b1929,#1a3545);
  height:42px;display:flex;align-items:center;
  justify-content:space-between;padding:0 1.1rem;
}
.vt-dash-dots{display:flex;gap:5px}
.vt-dash-dot{width:9px;height:9px;border-radius:50%}
.vt-dash-title{font-size:.68rem;color:rgba(255,255,255,.35);font-weight:600;letter-spacing:.08em}
.vt-dash-live{display:flex;align-items:center;gap:5px;font-size:.68rem;color:#4DB8A4;font-weight:600}
.vt-dash-live-dot{
  width:6px;height:6px;border-radius:50%;background:#4DB8A4;
  animation:vt-live-pulse 1.8s ease-in-out infinite;
}
@keyframes vt-live-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(77,184,164,.4)}50%{opacity:.7;box-shadow:0 0 0 5px rgba(77,184,164,0)}}
.vt-dash-body{padding:1.2rem}
.vt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
.vt-metric{background:#f4f9ff;border-radius:10px;padding:.75rem .8rem;text-align:center;border:1px solid rgba(26,125,232,.07)}
.vt-metric-val{font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:800;color:#0b1929;line-height:1}
.vt-metric-lbl{font-size:.62rem;color:#7a93a8;font-weight:500;margin-top:3px}
.vt-chart-wrap{height:90px;border-radius:10px;background:#f8fbff;border:1px solid rgba(26,125,232,.06);overflow:hidden;margin-bottom:1rem}
.vt-chart-wrap svg{width:100%;height:100%}
.vt-site-list{display:flex;flex-direction:column;gap:.45rem}
.vt-site-row{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:9px;background:#f8fbff;border:1px solid rgba(26,125,232,.06)}
.vt-site-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:white}
.vt-site-name{flex:1;font-size:.78rem;font-weight:600;color:#0b1929}
.vt-site-status{display:flex;align-items:center;gap:4px;font-size:.68rem;font-weight:600}
.vt-ss-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.vt-site-speed{font-size:.72rem;font-weight:700;color:#1a7de8;margin-left:6px}

.vt-fc{position:absolute;background:white;border-radius:14px;box-shadow:0 8px 32px rgba(11,25,41,.12);border:1px solid rgba(26,125,232,.08);padding:.9rem 1.1rem;z-index:4}
.vt-fc-speed{top:8%;right:-10px;width:150px;animation:vt-float-a 3.5s ease-in-out 2s infinite}
.vt-fc-ssl{bottom:12%;left:-10px;width:148px;animation:vt-float-b 4s ease-in-out 2.2s infinite}
.vt-fc-uptime{top:12%;left:-5px;width:138px;animation:vt-float-a 4.5s ease-in-out 2.5s infinite}
.vt-fc-server{bottom:8%;right:-8px;width:156px;animation:vt-float-b 3.8s ease-in-out 2.1s infinite}
@keyframes vt-float-a{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes vt-float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.vt-score-ring{width:52px;height:52px;margin:0 auto .5rem;position:relative}
.vt-score-ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.vt-score-ring-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Poppins',sans-serif;font-size:1rem;font-weight:800;color:#0b1929}
.vt-score-ring-lbl{font-size:.65rem;color:#7a93a8;font-weight:500;text-align:center}
.vt-ssl-inner{display:flex;align-items:center;gap:.75rem}
.vt-ssl-check{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#4DB8A4,#36C1E0);display:flex;align-items:center;justify-content:center}
.vt-ssl-check svg{width:18px;height:18px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round}
.vt-ssl-text-main{font-size:.82rem;font-weight:700;color:#0b1929}
.vt-ssl-text-sub{font-size:.66rem;color:#7a93a8;margin-top:1px}
.vt-uptime-val{font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:800;color:#0b1929;line-height:1;margin-bottom:4px}
.vt-uptime-lbl{font-size:.66rem;color:#7a93a8;margin-bottom:7px}
.vt-uptime-bar{height:5px;background:#e8f5f8;border-radius:5px;overflow:hidden}
.vt-uptime-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#36C1E0,#4DB8A4);width:99.9%}
.vt-server-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.vt-server-row:last-child{margin-bottom:0}
.vt-server-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.vt-server-name{font-size:.72rem;font-weight:600;color:#3a4e65;flex:1}
.vt-server-ping{font-size:.68rem;font-weight:700;color:#1a7de8}

@media(max-width:960px){
  .vt-hero{grid-template-columns:1fr}
  .vt-hero-vis{display:none}
}
@media(max-width:480px){
  .vt-hero{padding:80px 5% 60px}
  .vt-hero-dom-row{max-width:100% !important}
}

/* the keyword line now lives inside the H1, styled as it was as a paragraph */
.vt-h1-sub{
  display:block;
  font-size:1.35rem;font-weight:600;line-height:1.45;
  letter-spacing:normal;margin-top:.9rem;
}

.vt-stats{
  background:linear-gradient(135deg,#0b1929,#112840);
  padding:5rem 6%;position:relative;overflow:hidden;
}
.vt-stats::before{
  content:'';position:absolute;top:-100px;left:20%;
  width:500px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(54,193,224,.12),transparent 65%);
  pointer-events:none;
}
.vt-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2.5rem;
  position:relative;z-index:1;
}
.vt-scard{
  text-align:center;padding:2rem 1.5rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  transition:all .3s;cursor:default;
}
.vt-scard:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(54,193,224,.2);
  transform:translateY(-5px);
}
.vt-snum{
  font-family:'Syne',sans-serif !important;
  font-size:3rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#36C1E0,#4DB8A4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:.6rem;
}
.vt-slbl{
  font-size:.85rem;color:rgba(255,255,255,.45);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
}
@media(max-width:700px){.vt-stats-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){
  .vt-topbar{height:auto;padding:8px 5%}
  .vtb-left{flex-wrap:wrap;gap:8px}
  .vtb-right{display:none}
}

.vt-pillars{background:#fff;padding:84px 6%}
.vt-pillars-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px}
.vt-pillars-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:1180px;margin:0 auto;
}
.vt-pil{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1.5px solid rgba(11,25,41,.08);border-radius:22px;
  padding:34px 30px 28px;text-decoration:none;overflow:hidden;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s,border-color .28s;
}
.vt-pil::after{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#1a7de8,#36C1E0,#4DB8A4);
  transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.25,.8,.25,1);
}
.vt-pil:hover{transform:translateY(-6px);box-shadow:0 20px 52px rgba(11,25,41,.11);border-color:rgba(26,125,232,.22)}
.vt-pil:hover::after{transform:scaleX(1)}
.vt-pil-icon{
  width:56px;height:56px;border-radius:16px;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(26,125,232,.1),rgba(54,193,224,.07));
  border:1.5px solid rgba(26,125,232,.12);
}
.vt-pil-icon svg{width:26px;height:26px;stroke:#1a7de8;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-pil h3{
  font-family:'Poppins',sans-serif;
  font-size:20px;font-weight:800;color:#0b1929;margin-bottom:9px;letter-spacing:-.01em;
}
.vt-pil p{
  font-family:'Poppins',sans-serif;
  font-size:14.5px;line-height:1.7;color:#3a4e65;margin-bottom:18px;
}
.vt-pil-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.vt-pil-list li{
  font-family:'Poppins',sans-serif;
  font-size:13.5px;color:#3a4e65;display:flex;align-items:center;gap:9px;
}
.vt-pil-list li::before{
  content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);
}
.vt-pil-more{
  margin-top:auto;
  font-family:'Poppins',sans-serif;
  font-size:14px;font-weight:700;color:#1a7de8;
  display:inline-flex;align-items:center;gap:7px;
}
.vt-pil-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.vt-pil:hover .vt-pil-more svg{transform:translateX(4px)}
@media(max-width:980px){.vt-pillars-grid{grid-template-columns:1fr;gap:18px}.vt-pillars{padding:60px 6%}}

/* ---- Our Work: real client sites, one card each ----
   Leans on the classes the site already defines (.vt-tag, .vt-sh, .vt-sp,
   .vt-reveal). Only the card itself carries new CSS, prefixed .vt-work- so it
   cannot collide with .vt-sc-card in shared-components.css. */
.vt-work{background:linear-gradient(170deg,#f7fbff 0%,#eefaff 100%);padding:84px 6%;position:relative;overflow:hidden}
.vt-work::before{
  content:'';position:absolute;top:-160px;left:-120px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,125,232,.09),transparent 68%);
  pointer-events:none;
}
.vt-work-head{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px}
.vt-work-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:1180px;margin:0 auto;
}
.vt-wk{
  display:flex;flex-direction:column;background:#fff;
  border:1.5px solid rgba(11,25,41,.08);border-radius:22px;
  text-decoration:none;overflow:hidden;
  transition:transform .28s cubic-bezier(.25,.8,.25,1),box-shadow .28s,border-color .28s;
}
.vt-wk:hover{transform:translateY(-6px);box-shadow:0 20px 52px rgba(11,25,41,.13);border-color:rgba(26,125,232,.22)}
.vt-wk-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1929;border-bottom:1.5px solid rgba(11,25,41,.06)}
.vt-wk-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.vt-wk:hover .vt-wk-shot img{transform:scale(1.04)}
.vt-wk-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.vt-wk-body h3{
  font-family:'Poppins',sans-serif;
  font-size:19px;font-weight:800;color:#0b1929;margin:0 0 4px;letter-spacing:-.01em;
}
.vt-wk-where{
  font-family:'Poppins',sans-serif;
  font-size:12.5px;font-weight:600;color:#1a7de8;margin:0 0 11px;
}
.vt-wk-body p{
  font-family:'Poppins',sans-serif;
  font-size:14.5px;line-height:1.7;color:#3a4e65;margin:0 0 18px;
}
.vt-wk-chips{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.vt-wk-chips li{
  font-family:'Poppins',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#3a4e65;background:rgba(26,125,232,.06);
  border:1px solid rgba(26,125,232,.13);border-radius:50px;padding:5px 12px;
}
.vt-wk-more{
  margin-top:auto;
  font-family:'Poppins',sans-serif;
  font-size:14px;font-weight:700;color:#1a7de8;
  display:inline-flex;align-items:center;gap:7px;
}
.vt-wk-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.vt-wk:hover .vt-wk-more svg{transform:translateX(4px)}
.vt-work-foot{position:relative;z-index:1;text-align:center;margin-top:42px}
@media(max-width:980px){
  .vt-work-grid{grid-template-columns:1fr;gap:18px}
  .vt-work{padding:60px 6%}
}

.vt-pteaser{
  background:linear-gradient(135deg,#0b1929,#112840);
  padding:76px 6%;position:relative;overflow:hidden;
}
.vt-pteaser::before{
  content:'';position:absolute;top:-140px;right:-90px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(54,193,224,.13),transparent 66%);
  pointer-events:none;
}
.vt-pteaser::after{
  content:'';position:absolute;bottom:-120px;left:-70px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(77,184,164,.09),transparent 66%);
  pointer-events:none;
}
.vt-pt-inner{
  position:relative;z-index:1;max-width:1120px;margin:0 auto;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
}
.vt-pt-copy .vt-tag{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#36C1E0;
}
.vt-pt-copy h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(26px,3.2vw,40px);font-weight:800;color:#fff;
  line-height:1.16;letter-spacing:-.01em;margin:14px 0 14px;
}
.vt-pt-copy h2 em{
  font-style:italic;display:inline-block;
  background:linear-gradient(135deg,#36C1E0,#4DB8A4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.vt-pt-copy p{
  font-family:'Poppins',sans-serif;
  font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.62);margin-bottom:26px;max-width:420px;
}
.vt-pt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vt-ptc{
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:18px;padding:24px 20px;text-align:center;
  transition:transform .26s,border-color .26s,background .26s;
}
.vt-ptc:hover{transform:translateY(-5px);border-color:rgba(54,193,224,.4);background:rgba(255,255,255,.08)}
.vt-ptc.hot{border-color:rgba(54,193,224,.45);background:rgba(54,193,224,.09)}
.vt-ptc-name{
  font-family:'Poppins',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:10px;
}
.vt-ptc-price{
  font-family:'Poppins',sans-serif;
  font-size:34px;font-weight:800;color:#fff;line-height:1;
}
.vt-ptc-price sup{font-size:17px;font-weight:700;vertical-align:super;margin-right:1px}
.vt-ptc-per{
  font-family:'Poppins',sans-serif;
  font-size:12px;color:rgba(255,255,255,.42);margin-top:6px;
}
.vt-ptc-note{
  font-family:'Poppins',sans-serif;
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55);
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
}
.vt-pt-foot{
  font-family:'Poppins',sans-serif;
  font-size:13px;color:rgba(255,255,255,.42);text-align:center;margin-top:20px;
}
@media(max-width:980px){
  .vt-pt-inner{grid-template-columns:1fr;gap:36px}
  .vt-pteaser{padding:56px 6%}
}
@media(max-width:560px){
  .vt-pt-cards{grid-template-columns:1fr}
}

.vt-hiw{background:#f4f9ff;padding:64px 6%}
.vt-hiw-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2.5rem;width:100%;position:relative;
}
.vt-hiw-grid::after{
  content:'';position:absolute;top:42px;
  left:calc(16.66% + 24px);right:calc(16.66% + 24px);
  height:2px;
  background:linear-gradient(90deg,#1a7de8,#36C1E0);
  opacity:.18;z-index:0;
}
.vt-hcard{
  background:white;border:1.5px solid rgba(11,25,41,.07);
  border-radius:24px;padding:2.5rem 2rem;text-align:center;
  position:relative;z-index:1;
  transition:all .35s cubic-bezier(.25,.8,.25,1);
}
.vt-hcard:hover{transform:translateY(-10px);box-shadow:0 22px 54px rgba(11,25,41,.1);border-color:rgba(26,125,232,.2)}
.vt-hnum{
  width:62px;height:62px;border-radius:50%;
  margin:0 auto 1.5rem;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif !important;font-size:1.3rem;font-weight:800;color:#fff;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.vt-hcard:hover .vt-hnum{transform:scale(1.12)}
.vt-hn1{background:linear-gradient(135deg,#1a7de8,#4a9ef8);box-shadow:0 6px 22px rgba(26,125,232,.3)}
.vt-hn2{background:linear-gradient(135deg,#36C1E0,#1fa8c7);box-shadow:0 6px 22px rgba(54,193,224,.3)}
.vt-hn3{background:linear-gradient(135deg,#4DB8A4,#3aaa94);box-shadow:0 6px 22px rgba(77,184,164,.3)}
.vt-hcard h3{font-size:1.08rem;font-weight:700;color:#0b1929;margin-bottom:.65rem}
.vt-hcard p{font-size:.93rem;color:#7a93a8;line-height:1.72}
@media(max-width:700px){.vt-hiw-grid{grid-template-columns:1fr}.vt-hiw-grid::after{display:none}}

.vt-testi{
  background:#f4f9ff;
  padding:80px 6%;
  overflow:visible;
}
.vt-tgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:960px;
  margin:0 auto;
  width:100%;
  overflow:visible;
}
.vt-tcard{
  background:#fff;
  border-radius:28px;
  border:2px solid rgba(11,25,41,.07);
  padding:40px 36px;
  box-shadow:0 2px 18px rgba(11,25,41,.06);
  transition:all .35s cubic-bezier(.25,.8,.25,1);
  position:relative;
  overflow:visible;
}
.vt-tcard::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:5px;height:100%;
  background:linear-gradient(180deg,#1a7de8,#36C1E0);
  border-radius:3px 0 0 3px;
  opacity:0;transition:opacity .3s;
}
.vt-tcard:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 56px rgba(11,25,41,.1);
}
.vt-tcard:hover::before{opacity:1}
.vt-stars{display:flex;gap:5px;margin-bottom:16px}
.vt-star{
  width:18px;height:18px;
  background:linear-gradient(135deg,#ffd700,#ffb300);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.vt-qmark{
  font-family:'Syne',sans-serif !important;
  font-size:72px;
  line-height:.7;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:16px;
  opacity:.4;
  display:block;
}
.vt-ttext{
  font-size:18px;
  color:#3a4e65;
  line-height:1.8;
  font-style:italic;
  margin-bottom:28px;
}
.vt-tauth{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:20px;
  border-top:1px solid rgba(11,25,41,.06);
}
.vt-tav{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;flex-shrink:0;
}
.vt-av1{background:linear-gradient(135deg,#1a7de8,#36C1E0)}
.vt-av2{background:linear-gradient(135deg,#36C1E0,#4DB8A4)}
.vt-tname{font-size:18px;font-weight:700;color:#0b1929}
.vt-trole{font-size:15px;color:#7a93a8;margin-top:3px}

@media(max-width:700px){
  .vt-tgrid{grid-template-columns:1fr}
}

.vt-contact{
  background:#f4f9ff;
  padding:80px 6%;
}
.vt-contact-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:64px;
  align-items:start;
}
.vt-contact-left{padding-top:8px}
.vt-contact-left h2{
  font-family:'Poppins',sans-serif !important;
  font-size:clamp(26px,3vw,38px);
  font-weight:800;color:#0b1929;
  line-height:1.18;margin-bottom:16px;
}
.vt-contact-left h2 span{
  background:linear-gradient(135deg,#1a7de8,#36C1E0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;display:inline-block;padding-bottom:3px;
}
.vt-contact-left p{font-size:16px;color:#3a4e65;line-height:1.78;margin-bottom:32px}
.vt-contact-details{display:flex;flex-direction:column;gap:16px}
.vt-contact-detail{display:flex;align-items:center;gap:14px}
.vt-contact-detail-icon{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(26,125,232,.1),rgba(54,193,224,.07));
  border:1.5px solid rgba(26,125,232,.12);
  display:flex;align-items:center;justify-content:center;
}
.vt-contact-detail-icon svg{
  width:18px;height:18px;stroke:#1a7de8;fill:none;
  stroke-width:1.8;stroke-linecap:round;
}
.vt-contact-detail-text{font-size:14px;color:#3a4e65;line-height:1.5}
.vt-contact-detail-text strong{
  display:block;font-size:13px;font-weight:700;
  color:#0b1929;margin-bottom:2px;
  text-transform:uppercase;letter-spacing:.06em;
}
.vt-contact-right{
  background:white;border-radius:24px;
  border:1.5px solid rgba(26,125,232,.1);
  padding:36px;
  box-shadow:0 8px 32px rgba(11,25,41,.07);
}
@media(max-width:820px){
  .vt-contact-inner{grid-template-columns:1fr}
  .vt-contact-left{padding-top:0}
}
@media(max-width:480px){
  .vt-contact-right{padding:24px 20px}
}

/* ===========================================================================
   Homepage refinements, 2026-10-02
   ---------------------------------------------------------------------------
   Hand-written, unlike section.css which was extracted from the WordPress
   build. Loaded after it, so these win.

   The problem being solved: five sections in a row shared one skeleton -
   centred eyebrow pill, centred heading, centred two-line paragraph, then a
   row of three white rounded cards. Individually fine, in sequence monotonous.

   Nothing here introduces a new visual language. It varies the rhythm using
   shapes the site already owns.
   =========================================================================== */


/* ---------------------------------------------------------------- 1. steps

   The steps grid already draws a gradient connector line across itself, but
   three opaque white cards sat on top and buried it. Dropping the boxes lets
   the timeline that was always there actually show, and removes three of the
   page's many rounded rectangles.                                           */

.vt-hiw-grid::after {
  /* Was 42px, which centred on the number inside the old card padding.
     With the padding gone the number sits higher, so the line follows it. */
  top: 31px;
}

.vt-hcard {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 1.1rem;
  box-shadow: none;
}

.vt-hcard:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

.vt-hnum {
  /* A ring in the section's own background colour, so the connector appears
     to pass behind the number rather than through it. */
  box-shadow: 0 0 0 9px #f4f9ff;
}

.vt-hcard:hover .vt-hnum {
  transform: scale(1.08);
}


/* --------------------------------------------------- 1b. section graphics

   "My eyes aren't really drawn anywhere."

   The cause turned out to be literal. The site decorates sections with soft
   radial-gradient orbs bleeding in from off-edge - .vt-stats, .vt-work,
   .vt-pteaser and the footer all carry them. The three sections that read as
   bland, .vt-pillars, .vt-hiw and .vt-testi, had none at all. Flat white, flat
   cards, nothing behind them.

   So this is not a new look. It is the site's own graphic language applied to
   the sections that were missing it, plus a dot field on the steps that echoes
   the particle canvas in the hero.

   Deliberately no photography: every graphic here is gradient and geometry.  */

.vt-pillars,
.vt-hiw,
.vt-testi {
  position: relative;
  overflow: hidden;
}

/* Keep content above the decoration without touching each section's markup. */
.vt-pillars > *,
.vt-hiw > *,
.vt-testi > * {
  position: relative;
  z-index: 1;
}

.vt-pillars::before,
.vt-testi::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Blue, entering top-right, so it counterweights the left-aligned heading. */
.vt-pillars::before {
  /* Vertically inside the section on purpose. overflow:hidden clips at the
     section edge, and a glow cut off mid-falloff reads as a hard horizontal
     line against the next section. Horizontal bleed is fine - it is clipped at
     the viewport edge, where there is nothing to seam against. */
  top: 20px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(26, 125, 232, .10), transparent 68%);
}

/* Teal, entering bottom-left, mirroring the pillars orb further down. */
.vt-testi::before {
  bottom: 20px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(54, 193, 224, .12), transparent 68%);
}

/* The steps section gets a dot field rather than an orb - the same visual idea
   as the hero's particle canvas, drawn in CSS so it costs nothing. The mask
   fades it out before it reaches the text. */
.vt-hiw::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(26, 125, 232, .22) 1px, transparent 1px);
  background-size: 23px 23px;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 58% at 50% 42%, #000 0%, transparent 72%);
}

/* A green orb on the far side of the steps, completing the blue-teal-green
   run the brand already uses across the three service colours. */
.vt-hiw::after {
  content: '';
  position: absolute;
  top: 10px;
  right: -110px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(77, 184, 164, .13), transparent 68%);
}


/* ------------------------------------------------- 1d. seams between bands

   Consecutive light sections were drawn in slightly different light blues, so
   each boundary showed as a faint hard line across the page. Nothing was
   wrong with any one section; they simply did not meet.

   Measured, rather than guessed:

     .vt-pillars  ends   #ffffff      .vt-work     starts #f7fbff   mismatch
     .vt-testi    ends   #f0f7ff      .vt-contact  starts #f4f9ff   mismatch

   Each section now starts on the colour the one above it finished on, so the
   joins disappear. The light-to-dark edge above the pricing band is left
   alone: that one is deliberate contrast, not a seam.                        */

.vt-work {
  /* Two faults here, not one.
     1. It started at #f7fbff against the pure white of .vt-pillars above.
     2. It ran at 170deg. A tilted gradient does not hold one colour along its
        top edge - the 0% stop sits at a corner - so even after matching the
        start colour, the left of the edge was already part way to the end
        colour while the right was still white. That step is what remained
        visible. Vertical keeps the whole top edge on #fff, and a 10 degree
        tilt on a gradient this subtle was never doing visible work. */
  background: linear-gradient(#fff 0%, #eefaff 100%);
}

/* The remaining seams were the site's own orbs, clipped the same way mine were.
   A radial-gradient fading to transparent at 68% has a visible radius of 34% of
   its box height; if the box centre sits closer than that to a clipped edge,
   the glow is cut mid-falloff and the cut reads as a line.

   Measured per orb, then moved just far enough in to clear:

     .vt-work::before      clipped 86px at its top
     .vt-pteaser::before   clipped 66px at its top
     .vt-pteaser::after    clipped 56px at its bottom

   These keep as much off-edge bleed as the section can hold - horizontal bleed
   is untouched, since it clips at the viewport where nothing can seam. */

.vt-work::before {
  /* -70px left the glow starting 4px below the section top: technically not
     clipped, but it still begins abruptly against the plain white above. Far
     enough in that it fades up from nothing instead. */
  top: 40px;
}

.vt-pteaser::before {
  top: -70px;
}

.vt-pteaser::after {
  bottom: -60px;
}

.vt-contact {
  /* Picks up exactly where .vt-testi's gradient ends, then settles back. */
  background: linear-gradient(#f0f7ff 0%, #f4f9ff 220px);
}


/* ------------------------------------------------- 1c. colour on the cards

   All three service icons were the same blue, so the row read as one block.
   The brand already runs blue to teal to green across these three services -
   it is the gradient in the logo, the connector line under the steps, and the
   step numbers themselves. Using it here as well gives the eye three distinct
   things to land on instead of one undifferentiated row, and ties the section
   to the steps further down.                                                 */

.vt-pillars-grid > .vt-pil:nth-child(2) .vt-pil-icon {
  background: rgba(54, 193, 224, .12);
}

.vt-pillars-grid > .vt-pil:nth-child(2) .vt-pil-icon svg {
  stroke: #1fa8c7;
}

.vt-pillars-grid > .vt-pil:nth-child(3) .vt-pil-icon {
  background: rgba(77, 184, 164, .14);
}

.vt-pillars-grid > .vt-pil:nth-child(3) .vt-pil-icon svg {
  stroke: #3da890;
}

/* The bullet before each list item follows its card's colour too. */
.vt-pillars-grid > .vt-pil:nth-child(2) .vt-pil-list li::before {
  background: linear-gradient(135deg, #36C1E0, #1fa8c7);
}

.vt-pillars-grid > .vt-pil:nth-child(3) .vt-pil-list li::before {
  background: linear-gradient(135deg, #4DB8A4, #36C1E0);
}


/* ------------------------------------------------------- 2. pillars header

   Splits the centred header into a two-column one: eyebrow and heading left,
   intro paragraph right. The first break in the run of centred sections, and
   the same left-aligned treatment the pricing and contact sections already
   use further down the page.                                                */

.vt-pillars-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: end;
  column-gap: 56px;
  row-gap: 10px;
  text-align: left;
  max-width: 1180px;
  margin: 0 auto 46px;
}

.vt-pillars-head .vt-tag {
  grid-column: 1;
  justify-self: start;
}

/* Both carry text-align:center on themselves, set with !important by the
   WordPress-era CSS, so the parent's alignment does not reach them. */
.vt-pillars-head .vt-sh {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
  text-align: left !important;
}

.vt-pillars-head .vt-sp {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 6px;
  max-width: 46ch;
  text-align: left !important;
}

/* Below the split's breakpoint it stacks and re-centres, which is how the
   rest of the page behaves at that width. */
@media (max-width: 900px) {
  .vt-pillars-head {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .vt-pillars-head .vt-tag,
  .vt-pillars-head .vt-sh,
  .vt-pillars-head .vt-sp {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    text-align: center !important;
  }

  .vt-pillars-head .vt-sh {
    margin-bottom: 14px;
  }
}