/* ---- page header, a compact sub-hero for interior pages ---- */
.vt-phead{
  background:linear-gradient(160deg,#f0f7ff 0%,#eafaff 100%);
  padding:76px 6% 64px;position:relative;overflow:hidden;
}
.vt-phead::before{
  content:'';position:absolute;top:-140px;right:-90px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,125,232,.10),transparent 68%);
  pointer-events:none;
}
.vt-phead-inner{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.vt-phead-copy{display:flex;flex-direction:column;align-items:flex-start}
.vt-ph-h1{
  font-family:'Poppins',sans-serif;
  font-size:clamp(32px,4.4vw,52px);font-weight:800;
  line-height:1.12;letter-spacing:-.02em;color:#0b1929;
  margin:14px 0 16px;
}
.vt-ph-h1 em{
  font-style:italic;display:inline-block;padding-bottom:5px;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.vt-ph-sub{
  font-family:'Poppins',sans-serif;
  font-size:17px;line-height:1.75;color:#3a4e65;max-width:540px;margin-bottom:28px;
}
.vt-ph-btns{display:flex;gap:14px;flex-wrap:wrap}
.vt-ph-points{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;gap:13px;
}
.vt-ph-points li{
  font-family:'Poppins',sans-serif;
  font-size:15px;color:#0b1929;font-weight:600;
  display:flex;align-items:center;gap:11px;
}
.vt-ph-points svg{
  width:19px;height:19px;flex-shrink:0;
  stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  background:linear-gradient(135deg,#1a7de8,#36C1E0);border-radius:50%;padding:4px;
}
.vt-ph-vis{display:flex;justify-content:center;align-items:center}
@media(max-width:900px){
  .vt-phead{padding:56px 6% 48px}
  .vt-phead-inner{grid-template-columns:1fr;gap:36px}
  .vt-ph-vis{display:none}
}

/* ---- closing CTA band, a dark landmark before the footer ---- */
.vt-cta{
  background:linear-gradient(135deg,#0b1929,#112840);
  padding:72px 6%;position:relative;overflow:hidden;text-align:center;
}
.vt-cta::before{
  content:'';position:absolute;top:-120px;left:-70px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(54,193,224,.12),transparent 66%);
  pointer-events:none;
}
.vt-cta-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}
.vt-cta h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(26px,3.2vw,38px);font-weight:800;color:#fff;
  line-height:1.2;margin-bottom:14px;
}
.vt-cta 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-cta p{
  font-family:'Poppins',sans-serif;
  font-size:16px;line-height:1.75;color:rgba(255,255,255,.62);margin-bottom:30px;
}
.vt-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vt-cta .vt-btn-s{
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.18);
}
.vt-cta .vt-btn-s:hover{background:rgba(255,255,255,.14)}

.vt-wd{background:#f4f9ff;padding:80px 6%}

.vt-wd-intro{

  text-align:center;

  display:flex;flex-direction:column;align-items:center;

  margin-bottom:32px;

}

.vt-showcase-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:24px;

  width:100%;

}

.vt-sc-card{

  background:#fff;

  border-radius:24px;

  border:2px solid rgba(11,25,41,.07);

  overflow:hidden;

  transition:all .35s cubic-bezier(.25,.8,.25,1);

  cursor:default;

}

.vt-sc-card:hover{

  transform:translateY(-8px);

  box-shadow:0 24px 60px rgba(11,25,41,.12);

  border-color:rgba(26,125,232,.2);

}

.vt-sc-visual{

  height:200px;

  display:flex;

  align-items:center;

  justify-content:center;

  position:relative;

  overflow:hidden;

}

.vt-sc-v1{background:linear-gradient(135deg,#e8f3ff 0%,#eafaff 100%)}

.vt-sc-v2{background:linear-gradient(135deg,#eaf6ff 0%,#eafff7 100%)}

.vt-sc-v3{background:linear-gradient(135deg,#f0fbf8 0%,#eaf6ff 100%)}

.vt-sc-body{padding:28px 28px 32px}

.vt-sc-body h3{font-size:22px;font-weight:800;color:#0b1929;margin-bottom:10px}

.vt-sc-body p{font-size:17px;color:#3a4e65;line-height:1.72}

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

.vt-industry{

  margin-bottom:0;

  padding:0 6% 64px;

  background:#f4f9ff;

}

.vt-ind-header{

  text-align:center;

  margin-bottom:28px;

  display:flex;

  flex-direction:column;

  align-items:center;

}

.vt-ind-eyebrow{

  display:inline-flex;align-items:center;gap:7px;

  font-size:11px;font-weight:700;text-transform:uppercase;

  letter-spacing:.1em;color:#1a7de8;margin-bottom:12px;

}

.vt-ind-eyebrow::before{

  content:'';width:7px;height:7px;border-radius:50%;

  background:linear-gradient(135deg,#1a7de8,#36C1E0);flex-shrink:0;

}

.vt-ind-title{

  font-family:'Poppins',sans-serif !important;

  font-size:clamp(18px,2.2vw,26px);

  font-weight:700;color:#0b1929;

  line-height:1.2;margin-bottom:6px;

}

.vt-ind-title span{

  background:linear-gradient(135deg,#1a7de8,#36C1E0);

  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;

  display:inline-block;

}

.vt-ind-subtitle{

  font-size:14px;color:#7a93a8;font-weight:500;

}

/* Pills */

.vt-ind-pills{

  display:flex;flex-wrap:wrap;gap:8px;

  justify-content:center;margin-bottom:28px;

}

.vt-ind-pill{

  display:flex;align-items:center;gap:7px;

  padding:8px 16px;border-radius:50px;

  border:1.5px solid rgba(11,25,41,.08);

  background:white;

  color:#3a4e65;

  font-size:13px;font-weight:600;

  cursor:pointer;

  transition:all .2s cubic-bezier(.25,.8,.25,1);

  user-select:none;

  box-shadow:0 1px 4px rgba(11,25,41,.05);

}

.vt-ind-pill:hover{

  border-color:rgba(26,125,232,.25);

  background:#f0f7ff;

  color:#1a7de8;

  transform:translateY(-1px);

  box-shadow:0 4px 12px rgba(26,125,232,.1);

}

.vt-ind-pill.active{

  border-color:#1a7de8;

  background:linear-gradient(135deg,rgba(26,125,232,.08),rgba(54,193,224,.05));

  color:#1a7de8;

  box-shadow:0 4px 14px rgba(26,125,232,.12);

  transform:translateY(-1px);

}

.vt-ind-pill-icon{font-size:.9rem;line-height:1}

/* Preview */

.vt-ind-preview{

  border-radius:20px;

  overflow:hidden;

  min-height:220px;

  background:#f4f9ff;

  transition:all .4s cubic-bezier(.25,.8,.25,1);

}

.vt-ind-preview-inner{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:0;

  opacity:0;

  transform:translateY(12px);

  transition:opacity .4s cubic-bezier(.25,.8,.25,1),transform .4s cubic-bezier(.25,.8,.25,1);

  background:#f4f9ff;

  border-radius:20px;

  border:1.5px solid rgba(26,125,232,.1);

  box-shadow:0 4px 24px rgba(11,25,41,.07);

  overflow:hidden;

}

.vt-ind-preview-inner.visible{

  opacity:1;transform:translateY(0);

}

.vt-ind-mockup{

  padding:24px;

  border-right:1px solid rgba(26,125,232,.07);

  display:flex;align-items:center;justify-content:center;

  background:#f4f9ff;

}

.vt-ind-browser{

  width:100%;max-width:300px;

  background:white;border-radius:10px;

  overflow:hidden;

  box-shadow:0 8px 28px rgba(11,25,41,.1);

  border:1px solid rgba(11,25,41,.05);

  transform:perspective(800px) rotateY(-3deg) rotateX(1deg);

  transition:transform .5s cubic-bezier(.25,.8,.25,1);

}

.vt-ind-browser:hover{

  transform:perspective(800px) rotateY(0deg) rotateX(0deg);

}

.vt-ind-browser-bar{

  height:28px;background:#1a2535;

  display:flex;align-items:center;padding:0 10px;gap:5px;

}

.vt-ind-browser-dot{width:7px;height:7px;border-radius:50%}

.vt-ind-browser-url{

  flex:1;height:14px;background:rgba(255,255,255,.08);

  border-radius:3px;margin:0 7px;

  display:flex;align-items:center;padding:0 7px;

  font-size:8px;color:rgba(255,255,255,.3);font-weight:500;

}

.vt-ind-browser-body{

  height:170px;position:relative;overflow:hidden;

}

.vt-ind-details{

  padding:28px;

  display:flex;flex-direction:column;justify-content:center;

  background:#f4f9ff;

}

.vt-ind-category{

  font-size:10px;font-weight:700;text-transform:uppercase;

  letter-spacing:.1em;color:#1a7de8;margin-bottom:6px;

}

.vt-ind-name{

  font-family:'Poppins',sans-serif !important;

  font-size:clamp(15px,1.8vw,18px);font-weight:800;

  color:#0b1929;line-height:1.25;margin-bottom:8px;

}

.vt-ind-desc{

  font-size:13px;color:#3a4e65;

  line-height:1.68;margin-bottom:14px;

}

.vt-ind-features{

  display:flex;flex-direction:column;gap:6px;

  margin-bottom:16px;

}

.vt-ind-feat{

  display:flex;align-items:center;gap:8px;

  font-size:12.5px;color:#0b1929;font-weight:500;

}

.vt-ind-feat-check{

  width:16px;height:16px;border-radius:50%;flex-shrink:0;

  display:flex;align-items:center;justify-content:center;

}

.vt-ind-feat-check svg{

  width:8px;height:8px;stroke:white;fill:none;

  stroke-width:3;stroke-linecap:round;

}

.vt-ind-plan-badge{

  display:inline-flex;align-items:center;gap:7px;

  background:#f4f9ff;border:1px solid rgba(26,125,232,.12);

  border-radius:50px;padding:6px 12px;

  font-size:11px;font-weight:600;color:#3a4e65;

  margin-bottom:14px;

}

.vt-ind-plan-badge strong{color:#1a7de8;font-weight:700}

.vt-ind-cta{

  display:inline-flex;align-items:center;gap:7px;

  background:linear-gradient(135deg,#1a7de8,#1fa8c7);

  color:white;padding:10px 18px;border-radius:50px;

  font-size:13px;font-weight:700;text-decoration:none;

  box-shadow:0 3px 14px rgba(26,125,232,.25);

  transition:all .25s;border:none;cursor:pointer;

  width:fit-content;

}

.vt-ind-cta:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(26,125,232,.38)}

.vt-ind-cta svg{width:12px;height:12px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;transition:transform .25s}

.vt-ind-cta:hover svg{transform:translateX(3px)}

/* Prompt */

.vt-ind-prompt{

  display:flex;flex-direction:column;align-items:center;

  justify-content:center;min-height:220px;text-align:center;padding:32px;

  background:#f4f9ff;border-radius:20px;

  border:1.5px solid rgba(26,125,232,.08);

}

.vt-ind-prompt-icon{

  font-size:1.8rem;margin-bottom:10px;

  animation:vt-ind-bounce 2.5s ease-in-out infinite;

}

@keyframes vt-ind-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.vt-ind-prompt p{

  font-size:13px;color:#7a93a8;

  font-weight:500;line-height:1.6;

}

/* Mockup internals */

.vt-mock-nav{

  height:26px;background:#f8fafc;border-bottom:1px solid #edf0f5;

  display:flex;align-items:center;padding:0 10px;gap:5px;

}

.vt-mock-nav-logo{height:11px;border-radius:3px}

.vt-mock-nav-links{display:flex;gap:5px;margin-left:auto}

.vt-mock-nav-link{height:7px;border-radius:3px;background:#e2e8f0}

.vt-mock-hero{padding:10px;display:flex;align-items:center;gap:8px}

.vt-mock-hero-text{flex:1}

.vt-mock-h{height:8px;border-radius:4px;margin-bottom:5px}

.vt-mock-p{height:5px;border-radius:3px;background:#edf0f5;margin-bottom:3px}

.vt-mock-btn{height:14px;border-radius:7px;margin-top:6px;width:46px}

.vt-mock-hero-img{

  width:52px;height:52px;border-radius:8px;flex-shrink:0;

  display:flex;align-items:center;justify-content:center;font-size:1.3rem;

}

.vt-mock-cards{padding:5px 10px;display:flex;gap:5px}

.vt-mock-card{flex:1;height:30px;border-radius:6px;background:#f0f4f8}

@media(max-width:820px){

  .vt-ind-preview-inner{grid-template-columns:1fr}

  .vt-ind-mockup{display:none}

}

@media(max-width:600px){

  .vt-ind-title{font-size:18px}

  .vt-ind-pills{gap:7px}

  .vt-ind-pill{font-size:12px;padding:7px 12px}

  .vt-ind-details{padding:20px}

  .vt-ind-prompt{min-height:160px;padding:24px}

}

@media(max-width:380px){

  .vt-ind-pill{font-size:11px;padding:6px 10px;gap:5px}

}

/* ===========================================================================
   Shared service-page hero.
   ---------------------------------------------------------------------------
   /web-design/ and /hosting/ both use .vt-phead with the same fixed-size SVG,
   so the fix lives here and build.py appends it to any page whose markup uses
   that pattern. Keeping it in one file stops the two pages drifting apart.
   ===========================================================================*/

/* ------------------------------------------------------------------- hero

   The hero visual is a vector browser mockup pinned at a literal 330x270 in a
   column roughly 480px wide, centred with flex. So it floated with ~75px of
   dead space either side, and being only 270px tall it sat marooned against a
   copy column half again its height. Small and adrift, which is exactly how it
   read.

   It is an SVG with a viewBox, so it scales losslessly. Letting it fill the
   column takes it from 330px to about 545px wide - two thirds larger - and the
   column is rebalanced slightly to give it that room without crowding the
   headline.                                                                  */

.vt-phead-inner {
  /* Only a little off the original 1.15/.85. Taking the copy column down to
     1fr orphaned "turns" on its own line in the headline; this keeps the
     headline breaking where it did while still handing the visual ~180px more
     than it had. */
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
}

.vt-ph-vis {
  /* Was centring a fixed-size child inside a wider box. */
  display: block;
}

.vt-ph-vis > svg {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
  margin-inline: auto;
  /* Lifts it off the flat hero wash, the same soft shadow the cards use. */
  filter: drop-shadow(0 18px 44px rgba(11, 25, 41, .10));
}

@media (max-width: 1000px) {
  .vt-phead-inner {
    gap: 36px;
  }
}

/* The original build hides the hero visual below 900px to keep the headline
   and buttons above the fold on a phone. Setting display:block above would
   have silently undone that, so it is restored explicitly. */
@media (max-width: 900px) {
  .vt-ph-vis {
    display: none;
  }
}


/* ===========================================================================
   Web design page refinements, 2026-10-02
   ---------------------------------------------------------------------------
   Hand-written; loaded after the extracted section.css so these win.

   This page ran three identical cards where /custom-apps/ runs an uneven
   bento. Same cards, same copy - the first simply gets the width its content
   deserves, so the eye has somewhere to land first instead of scanning three
   equal boxes.
   =========================================================================== */

.vt-showcase-grid {
  /* Four tracks rather than three, so one card can take half the row. */
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

.vt-showcase-grid > .vt-sc-card:first-child {
  grid-column: span 2;
  /* Side by side rather than stacked. This card has the shortest copy of the
     three, so stacking it at double width left a large empty block under the
     text. Running the visual beside the body uses the width instead. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.vt-showcase-grid > .vt-sc-card:first-child .vt-sc-visual {
  height: 100%;
  min-height: 230px;
}

/* The wide card has room for a larger image and bigger type; the two narrow
   ones keep the original scale so nothing looks stretched. */
.vt-showcase-grid > .vt-sc-card:first-child .vt-sc-body h3 {
  font-size: 25px;
}

.vt-showcase-grid > .vt-sc-card:first-child .vt-sc-body p {
  font-size: 17.5px;
}

.vt-showcase-grid > .vt-sc-card:not(:first-child) .vt-sc-body h3 {
  font-size: 19px;
}

.vt-showcase-grid > .vt-sc-card:not(:first-child) .vt-sc-body p {
  font-size: 15.5px;
}

/* Two-up before the full stack, so the narrow cards never get squeezed into
   a column too tight for a 19px heading. */
@media (max-width: 1080px) {
  .vt-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vt-showcase-grid > .vt-sc-card:first-child {
    grid-column: span 2;
  }
}

/* Too narrow to run the visual beside the text; stack it again. */
@media (max-width: 760px) {
  .vt-showcase-grid > .vt-sc-card:first-child {
    display: block;
  }

  .vt-showcase-grid > .vt-sc-card:first-child .vt-sc-visual {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .vt-showcase-grid {
    grid-template-columns: 1fr;
  }

  .vt-showcase-grid > .vt-sc-card:first-child {
    grid-column: span 1;
  }

  .vt-showcase-grid > .vt-sc-card:first-child .vt-sc-body h3 {
    font-size: 22px;
  }

  .vt-showcase-grid > .vt-sc-card:first-child .vt-sc-body p {
    font-size: 17px;
  }
}