.vs-shield{
    width:110px;
    height:130px;
    background:#2563ff;

    clip-path:polygon(
        50% 0%,
        100% 18%,
        100% 60%,
        50% 100%,
        0% 60%,
        0% 18%
    );

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

    color:white;
    position:relative;
    z-index:2;
}

.vs-shield-label{
    font-size:14px;
    font-weight:700;
    margin-top:6px;
}

.vs-shield-sub{
    font-size:11px;
    opacity:.85;
}
 * { box-sizing: border-box; }
 

  .vs-section {
    position: relative;
    overflow: hidden;
    padding: 80px 24px;
    background-color: #ffffff;
    background-image:
      linear-gradient(to right, #dbe4ff 1px, transparent 1px),
      linear-gradient(to bottom, #dbe4ff 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0;
    opacity: 1;
  }
  .vs-grid-overlay {
    position:absolute; inset:-50px;
    background-image:
      linear-gradient(to right, #dbe4ff 1px, transparent 1px),
      linear-gradient(to bottom, #dbe4ff 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
    pointer-events:none;
    transition: transform 0.2s ease-out;
    will-change: transform;
  }

  .vs-header { text-align:center; max-width:700px; margin:0 auto 64px; position:relative; z-index:2; }
  .vs-tag {
    color:#2563ff; font-weight:600; font-size:13px; letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:8px;
  }
  .vs-title { font-size:36px; font-weight:700; color:#0a0e1a; margin:0; letter-spacing:-0.5px; }

  .vs-flow {
    position:relative; z-index:2;
    display:flex; align-items:flex-start; justify-content:center;
    gap:8px; max-width:1280px; margin:0 auto;
  }

  .vs-step {
    display:flex; flex-direction:column; align-items:center;
    flex:1; min-width:0; max-width:240px;
    opacity:0; transform:translateY(40px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .vs-step.in-view { animation: vsFadeUp 0.7s ease forwards; }
  .vs-step:nth-child(1) { animation-delay: 0ms; }

  @keyframes vsFadeUp {
    from { opacity:0; transform:translateY(40px); }
    to { opacity:1; transform:translateY(0); }
  }

  .vs-badge {
    width:32px; height:32px; border-radius:50%;
    background:#2563ff; color:#fff; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px; flex-shrink:0;
    box-shadow:0 4px 12px rgba(37,99,255,0.35);
    transform: scale(0.7);
    opacity:0;
  }
  .vs-step.in-view .vs-badge {
    animation: vsBadgePop 0.6s cubic-bezier(.34,1.56,.64,1) forwards,
               vsPulse 3s ease-in-out 1s infinite;
  }
  @keyframes vsBadgePop {
    0% { transform:scale(0.7); opacity:0; }
    60% { transform:scale(1.15); opacity:1; }
    100% { transform:scale(1); opacity:1; }
  }
  @keyframes vsPulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.08); }
  }

  .vs-step-text { text-align:center; margin-bottom:24px; min-height:64px; }
  .vs-step-text strong { display:block; font-size:15px; font-weight:700; color:#0a0e1a; line-height:1.35; }

  /* PHONE MOCKUP */
  .vs-phone {
    width:200px; height:410px;
    border-radius:32px;
    background:#0c1322;
    border:6px solid #111827;
    box-shadow:0 10px 30px rgba(15,23,42,0.18);
    position:relative;
    overflow:hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: vsFloat 6s ease-in-out infinite;
  }
  .vs-step:nth-child(3) .vs-phone { animation-delay: -2s; }
  .vs-step:nth-child(7) .vs-phone { animation-delay: -4s; }
  @keyframes vsFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .vs-phone:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:0 22px 45px rgba(37,99,255,0.25);
    animation-play-state: paused;
  }
  .vs-phone-notch {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:90px; height:18px; background:#111827; border-radius:0 0 14px 14px; z-index:5;
  }
  .vs-phone-screen {
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    color:#fff; font-size:11px;
    padding:14px 16px;
  }
  .vs-status-bar { display:flex; justify-content:space-between; font-size:11px; opacity:0.85; margin-bottom:6px;}

  /* shine sweep */
  .vs-shine {
    position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden;
  }
  .vs-shine::before {
    content:''; position:absolute; top:-150%; left:-60%;
    width:60px; height:300%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.22), transparent);
    transform:rotate(20deg);
    animation: vsShineMove 4s ease-in-out infinite;
    animation-delay: 1.5s;
  }
  @keyframes vsShineMove {
    0% { left:-60%; }
    35% { left:140%; }
    100% { left:140%; }
  }

  /* STEP 1: incoming call */
  .vs-call-screen { background:#161b2e; justify-content:flex-start; align-items:center; padding-top:34px; }
  .vs-call-label { font-size:11px; opacity:0.7; margin-bottom:4px; }
  .vs-call-number { font-size:17px; font-weight:600; margin-bottom:4px; }
  .vs-call-loc { font-size:11px; opacity:0.6; margin-bottom:26px; }
  .vs-avatar {
    width:74px; height:74px; border-radius:50%;
    background:#3a4256; display:flex; align-items:center; justify-content:center;
    margin-bottom:auto; margin-top: 30px;
    position:relative;
  }
  .vs-avatar::before, .vs-avatar::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid #4a5577; opacity:0;
  }
  .vs-step.in-view .vs-avatar::before,
  .vs-step.in-view .vs-avatar::after {
    animation: vsAvatarPulse 2s ease-out infinite;
  }
  .vs-step.in-view .vs-avatar::after { animation-delay: 1s; }
  @keyframes vsAvatarPulse {
    0% { transform:scale(1); opacity:0.6; }
    100% { transform:scale(1.6); opacity:0; }
  }
  .vs-call-actions {
    display:flex; gap:48px; margin-top:auto; margin-bottom:18px;
  }
  .vs-call-btn { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; }
  .vs-call-btn:hover { transform:scale(1.1); }
  .vs-call-btn:active { transform:scale(0.92); }
  .vs-call-btn.decline { background:#e3433d; transform:rotate(135deg); }
  .vs-call-btn.decline:hover { transform:rotate(135deg) scale(1.1); box-shadow:0 0 0 8px rgba(227,67,61,0.15); }
  .vs-call-btn.decline:active { transform:rotate(135deg) scale(0.92); }
  .vs-call-btn.accept { background:#34c759; animation: vsAcceptGlow 2s ease-in-out infinite; }
  .vs-call-btn.accept:hover { box-shadow:0 0 0 8px rgba(52,199,89,0.18); }
  @keyframes vsAcceptGlow {
    0%, 100% { box-shadow:0 0 0 0 rgba(52,199,89,0.45); }
    50% { box-shadow:0 0 0 6px rgba(52,199,89,0); }
  }

  /* STEP 2: VoiShield Shield (no phone) */
  .vs-shield-wrap {
    position:relative; width:200px; height:410px;
    display:flex; align-items:center; justify-content:center;
  }
  .vs-radar-ring {
    position:absolute; width:110px; height:110px; border-radius:50%;
    border:2px solid #2563ff; opacity:0;
  }
  .vs-step.in-view .vs-radar-ring {
    animation: vsRadar 3s ease-out infinite;
  }
  .vs-radar-ring:nth-child(1){ animation-delay:1.2s; }
  .vs-radar-ring:nth-child(2){ animation-delay:1.6s; }
  .vs-radar-ring:nth-child(3){ animation-delay:2.0s; }
  @keyframes vsRadar {
    0% { transform:scale(1); opacity:0.6; }
    100% { transform:scale(1.6); opacity:0; }
  }
  .vs-shield {
    width:110px; height:130px;
    background:#2563ff;
    clip-path: polygon(50% 0%, 100% 18%, 100% 60%, 50% 100%, 0% 60%, 0% 18%);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    color:#fff;
    transform:scale(0.8); opacity:0;
    box-shadow:0 0 0 rgba(37,99,255,0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index:2;
  }
  .vs-step.in-view .vs-shield {
    animation: vsShieldIn 0.6s ease forwards;
    animation-delay: 1.1s;
  }
  @keyframes vsShieldIn {
    from { transform:scale(0.8); opacity:0; }
    to { transform:scale(1); opacity:1; }
  }
  .vs-shield:hover {
    transform:scale(1.05);
    box-shadow:0 0 40px rgba(37,99,255,0.55);
  }
  .vs-shield-label { font-size:14px; font-weight:700; margin-top:6px; text-align:center; line-height:1.2; }
  .vs-shield-sub { font-size:11px; opacity:0.85; }
  .vs-checkmark { width:30px; height:30px; }

  /* STEP 3: Branding screen */
  .vs-brand-screen { background:#0e1424; padding-top:30px; align-items:flex-start; }
  .vs-brand-icon {
    width:48px; height:48px; border-radius:14px; background:#1d2842;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:14px;
    opacity:0; transform:translateY(12px);
  }
  .vs-brand-name { font-size:19px; font-weight:700; line-height:1.25; margin-bottom:10px; opacity:0; transform:translateY(12px); }
  .vs-brand-verified { display:flex; align-items:center; gap:6px; font-size:11px; color:#34c759; margin-bottom:18px; opacity:0; transform:translateY(12px); }
  .vs-brand-box {
    background:#1a2236; border-radius:10px; padding:10px 12px; width:100%;
    font-size:11px; line-height:1.7; color:#c4ccdc;
    opacity:0; transform:translateY(12px);
  }
  .vs-step.in-view .vs-brand-icon,
  .vs-step.in-view .vs-brand-name,
  .vs-step.in-view .vs-brand-verified,
  .vs-step.in-view .vs-brand-box {
    animation: vsCascadeIn 0.5s ease forwards;
  }
  .vs-step.in-view .vs-brand-icon { animation-delay: 0.1s; }
  .vs-step.in-view .vs-brand-name { animation-delay: 0.25s; }
  .vs-step.in-view .vs-brand-verified { animation-delay: 0.4s; }
  .vs-step.in-view .vs-brand-box { animation-delay: 0.55s; }
  @keyframes vsCascadeIn {
    to { opacity:1; transform:translateY(0); }
  }
  .vs-brand-verified svg {
    animation: vsCheckSpin 0.5s ease forwards;
    animation-delay: 0.6s;
    opacity:0;
    transform-origin:center;
  }
  .vs-step.in-view .vs-brand-verified svg { opacity:1; }
  @keyframes vsCheckSpin {
    from { transform:scale(0) rotate(-90deg); opacity:0; }
    to { transform:scale(1) rotate(0); opacity:1; }
  }

  /* STEP 4: answered call */
  .vs-answer-screen { background:#0e1424; align-items:center; justify-content:center; padding-top:0; }
  .vs-answer-circle {
    width:90px; height:90px; border-radius:50%;
    background:#34c759; display:flex; align-items:center; justify-content:center;
    margin-bottom:24px;
    transform:scale(0); position:relative;
  }
  .vs-answer-circle::before, .vs-answer-circle::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2px solid #34c759; opacity:0;
  }
  .vs-step.in-view .vs-answer-circle {
    animation: vsBounceIn 0.6s cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay: 0.2s;
  }
  .vs-step.in-view .vs-answer-circle::before,
  .vs-step.in-view .vs-answer-circle::after {
    animation: vsAvatarPulse 1.8s ease-out infinite;
    animation-delay: 0.8s;
  }
  .vs-step.in-view .vs-answer-circle::after { animation-delay: 1.4s; }
  @keyframes vsBounceIn {
    from { transform:scale(0); }
    to { transform:scale(1); }
  }
  .vs-answer-circle svg {
    animation: vsCheckSpin 0.4s ease forwards;
    animation-delay: 0.5s;
    opacity:0; transform-origin:center;
  }
  .vs-step.in-view .vs-answer-circle svg { opacity:1; }
  .vs-answer-text { font-size:16px; font-weight:700; text-align:center; opacity:0; transform:translateY(10px); }
  .vs-step.in-view .vs-answer-text {
    animation: vsCascadeIn 0.5s ease forwards;
    animation-delay: 0.5s;
  }

  /* CONNECTORS */
  .vs-connector {
    flex:0 0 auto; width:64px; height:410px;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .vs-connector svg { width:64px; height:24px; overflow:visible; }
  .vs-arrow-line {
    stroke:#2563ff; stroke-width:3; stroke-linecap:round; fill:none;
    stroke-dasharray:60; stroke-dashoffset:60;
  }
  .vs-step.in-view ~ .vs-connector .vs-arrow-line,
  .vs-connector.draw .vs-arrow-line {
    animation: vsDrawArrow 0.6s ease forwards;
  }
  @keyframes vsDrawArrow {
    to { stroke-dashoffset:0; }
  }
  .vs-arrow-head { fill:#2563ff; opacity:0; }
  .vs-connector.draw .vs-arrow-head { animation: vsFadeIn 0.3s ease forwards; animation-delay:0.4s; }
  @keyframes vsFadeIn { to { opacity:1; } }

  .vs-particle {
    fill:#9db6ff; opacity:0;
  }
  .vs-connector.draw .vs-particle {
    animation: vsParticleMove 2.2s linear infinite;
  }
  .vs-connector.draw .vs-particle:nth-child(1) { animation-delay:0s; }
  .vs-connector.draw .vs-particle:nth-child(2) { animation-delay:0.7s; }
  .vs-connector.draw .vs-particle:nth-child(3) { animation-delay:1.4s; }
  @keyframes vsParticleMove {
    0% { transform:translateX(0); opacity:0; }
    10% { opacity:1; }
    90% { opacity:1; }
    100% { transform:translateX(56px); opacity:0; }
  }

  /* RESPONSIVE */
  @media (max-width: 1100px) {
    .vs-flow { flex-wrap: wrap; gap:32px 0; }
    .vs-connector { display:none; }
    .vs-step { flex-basis: 45%; max-width:none; }
  }
  @media (max-width: 720px) {
    .vs-title { font-size:26px; }
    .vs-flow { flex-direction:column; align-items:center; gap:8px; }
    .vs-step { flex-basis:auto; width:100%; max-width:260px; }
    .vs-connector { display:flex; width:100%; height:50px; }
    .vs-connector svg { transform:rotate(90deg); width:50px; }
    .vs-shield-wrap { width:200px; height:300px; }
    .vs-phone { width:180px; height:370px; }
  }