.vb-tile {
  position: relative; border-radius: 20px; overflow: hidden;
  padding: clamp(20px, 2.4vw, 28px);
  background: #fff; border: 1px solid var(--border);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.vb-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--tc, var(--blue)) 45%, var(--border));
}
.vb-tile__num {
  position: absolute; top: -0.22em; right: 14px; font-family: var(--display); font-weight: 700;
  font-size: 5.2rem; line-height: 1; letter-spacing: -0.04em;
  color: var(--tc, var(--blue)); opacity: .07; pointer-events: none;
}
.vb-tile__ic {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--tc, var(--blue));
  border: 1px solid var(--border);
  border-color: color-mix(in srgb, var(--tc, var(--blue)) 26%, var(--border));
}
.vb-tile__ic svg { width: 25px; height: 25px; }
.vb-tile h3 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; margin-bottom: 8px; position: relative; z-index: 1; }
.vb-tile p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; position: relative; z-index: 1; }

/* ============================================================
   HERO — split layout + right-side bento cluster
   ============================================================ */
.vh-hero { position: relative; overflow: hidden; padding-block: clamp(10px, 0vw, 96px) clamp(30px, 8vw, 120px);
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-700) 55%, var(--navy-600) 140%);
  color: #E8EEF8;
}
.vh-hero h1 { color: #fff; }
.vh-hero .kicker { color: var(--cyan); }
.vh-hero .kicker::before { background: var(--cyan); }
.vh-hero .kicker b { color: #fff; }
.vh-hero .lead { color: var(--muted-dk); }
.vh-hero .btn--ghost { color: #fff; border-color: var(--border-dk); }
.vh-hero .btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.vh-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.vh-title { margin: 18px 0 20px; max-width: 13ch; }
.vh-lead { margin-bottom: 30px; }
.vh-cta { display: flex; flex-wrap: wrap; gap: 13px; }

.vh-bento { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(90px, auto); gap: 14px; }
.vh-tile { border-radius: 20px; padding: 20px 22px; position: relative; overflow: hidden; }
.vh-tile--log {
  grid-column: 1; grid-row: 1 / span 2;
  background: #fff; color: var(--navy-700);
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem; line-height: 1.9; border: 1px solid var(--border);
}
.vh-tile--log .vh-dot { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.vh-tile--log .vh-dot span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.vh-line { display: flex; gap: 9px; opacity: 0; transform: translateY(4px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.vh-line b { color: var(--blue); font-weight: 500; flex-shrink: 0; }
.reveal.in .vh-line { opacity: 1; transform: none; }
.reveal.in .vh-line:nth-child(2) { transition-delay: 160ms; }
.reveal.in .vh-line:nth-child(3) { transition-delay: 320ms; }
.reveal.in .vh-line:nth-child(4) { transition-delay: 480ms; }
.reveal.in .vh-line:nth-child(5) { transition-delay: 640ms; }
.vh-line--ok b { color: var(--teal); }
.vh-cursor { display: inline-block; width: 7px; height: 15px; background: var(--blue); margin-left: 2px; animation: vh-blink 1s steps(1) infinite; vertical-align: -2px; }

.vh-tile--ring { grid-column: 2; grid-row: 1; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
.vh-tile--ring svg { width: 66px; height: 66px; flex-shrink: 0; }
.vh-ringbg { fill: none; stroke: var(--border); stroke-width: 7; }
.vh-ringfg { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 1.3s var(--ease); }
.reveal.in .vh-ringfg { stroke-dashoffset: 14; }
.vh-tile--ring b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--navy-800); }
.vh-tile--ring span { font-size: 0.78rem; color: var(--muted); }

.vh-tile--stat { grid-column: 2; grid-row: 2; background: linear-gradient(140deg, var(--blue), var(--primary)); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.vh-tile--stat b { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 2.6vw, 2.3rem); letter-spacing: -0.02em; }
.vh-tile--stat span { font-size: 0.78rem; opacity: .88; margin-top: 2px; }

@keyframes vh-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ============================================================
   FINAL CTA — floating note cluster (replaces circular viz)
   ============================================================ */
.vf-cluster { position: relative; height: 420px; }
.vf-note {
  position: absolute; width: 230px; border-radius: 16px; padding: 18px 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #E8EEF8; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(18px) rotate(var(--rot, 0deg));
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.reveal.in .vf-note {
  opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg));
  animation: vf-float 6s var(--ease) infinite;
}
.vf-note:hover {
  animation-play-state: paused;
  transform: translateY(-8px) rotate(var(--rot, 0deg)) scale(1.035);
  box-shadow: 0 36px 74px -28px rgba(0,0,0,.6);
  border-color: rgba(125,224,236,.4);
}
.vf-note__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 12px;
  background: rgba(125,224,236,.14); color: #7DE0EC; }
.vf-note__ic svg { width: 19px; height: 19px; }
.vf-note b { display: block; font-family: var(--display); font-weight: 600; font-size: 0.98rem; margin-bottom: 4px; }
.vf-note span { font-size: 0.82rem; color: #9FB0CC; line-height: 1.5; }
.vf-note--a { top: 6%; left: 4%; --rot: -4deg; animation-delay: .2s !important; }
.vf-note--b { top: 40%; left: 30%; --rot: 3deg; transition-delay: 140ms; animation-delay: 1.3s !important; }
.vf-note--c { top: 66%; left: 4%; --rot: -2deg; transition-delay: 280ms; animation-delay: 2.4s !important; }

@keyframes vf-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-11px) rotate(var(--rot, 0deg)); }
}

/* ============================================================
   WHAT IS VAPT — dark pull-quote panel + icon-tag grid
   ============================================================ */
.vi-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(20px, 3vw, 28px);
  align-items: stretch; margin-top: clamp(30px, 4.5vw, 56px);
}
.vi-quote {
  position: relative; border-radius: 22px; overflow: hidden;
  padding: clamp(30px, 3.4vw, 44px); display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(165deg, var(--navy-800) 0%, var(--navy-700) 100%); color: #E8EEF8;
}
.vi-quote__mark {
  position: absolute; top: -0.28em; left: 22px; font-family: var(--display); font-weight: 700;
  font-size: 7rem; line-height: 1; color: rgba(125, 224, 236, .16); pointer-events: none;
}
.vi-quote p {
  position: relative; z-index: 1; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.48; letter-spacing: -0.015em; margin: 0;
}
.vi-quote__foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; margin-top: 24px; font-size: 0.85rem; color: #9FB0CC; }
.vi-quote__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #7DE0EC; flex-shrink: 0; }
.vi-quote__ic svg { width: 17px; height: 17px; }

.vi-viz { display: flex; align-items: center; justify-content: center; }
.vi-viz svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.vi-ring { fill: none; stroke: var(--border); stroke-width: 1; }
.vi-ring--accent { stroke: var(--cyan); stroke-opacity: .5; }
.vi-pulse { fill: none; stroke: var(--cyan); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: vi-pulse 3.2s var(--ease) infinite; }
.vi-pulse--b { animation-delay: 1.1s; }
.vi-pulse--c { animation-delay: 2.2s; }
.vi-dot { fill: var(--blue); }
.vi-dot--cyan { fill: var(--cyan); }
.vi-dot--violet { fill: var(--violet); }
.vi-core { stroke: var(--blue); stroke-width: 1.8; }
@keyframes vi-pulse { 0% { transform: scale(.4); opacity: .7; } 70% { opacity: 0; } 100% { transform: scale(1); opacity: 0; } }

/* ============================================================
   KEY BENEFITS — vertically centre the left column against the
   taller right-side grid so it doesn't trail off into empty space
   ============================================================ */
.why .why__grid { align-items: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .vh-grid { grid-template-columns: 1fr; }
  .vh-bento { max-width: 480px; }
  .vi-grid { grid-template-columns: 1fr; }
  .vi-viz { order: -1; }
}
@media (max-width: 640px) {
  /* What is VAPT: animation sits behind the text card */
  .vi-grid { position: relative; grid-template-columns: 1fr; }
  .vi-viz { position: absolute; inset: 0; order: 0; z-index: 0; pointer-events: none; }
  .vi-viz svg { width: 120%; max-width: none; opacity: .3; }
  .vi-quote { position: relative; z-index: 1; background: linear-gradient(165deg, rgba(8,24,47,.84) 0%, rgba(12,36,71,.84) 100%); }

  /* Coverage areas: one card per row */
  .process__flow.problem { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .vf-cluster { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .vf-note, .reveal.in .vf-note { position: static; width: auto; transform: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-line, .vh-ringfg, .vf-note { transition: none !important; opacity: 1 !important; transform: none !important; }
  .vh-cursor { animation: none !important; }
  .vi-pulse { animation: none !important; }
  .vi-pulse { opacity: 0 !important; }
  .vf-note, .reveal.in .vf-note { animation: none !important; }
}

/* hero spacing: 40px desktop, 10px phones */
.vh-hero { padding-block: 40px; }
@media (max-width: 640px) {
  .vh-hero { padding-block: 10px; }
}