/* ===== BANNER ===== */
 .vp-banner {
     position: relative;
     width: 100%;
     min-height: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(217, 119, 6, 0.06) 50%, rgba(5, 150, 105, 0.04) 100%);
     border-bottom: 1px solid var(--glass-border);
     backdrop-filter: blur(3px);
 }





 .vp-banner-content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 48px 24px;
     animation: fadeInUp 0.8s ease-out both;
 }

 .vp-banner-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 20px;
     background: rgba(217, 119, 6, 0.1);
     border: 1px solid rgba(217, 119, 6, 0.25);
     border-radius: 20px;
     font-size: 14px;
     font-weight: 600;
     color: var(--accent-gold);
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 24px;
     animation: fadeInUp 0.8s 0.15s ease-out both;
 }

 .vp-banner-tag .pulse-dot {
     width: 6px;
     height: 6px;
     background: var(--accent-gold);
     border-radius: 50%;
     animation: pulse 2s ease-in-out infinite;
 }

 .vp-banner-title {
     font-size: clamp(36px, 6vw, 64px);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -2px;
     margin-bottom: 16px;

     background-size: 300% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: fadeInUp 0.8s 0.25s ease-out both;
 }

 .vp-banner-subtitle {
     font-size: clamp(16px, 1.5vw, 20px);
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
     animation: fadeInUp 0.8s 0.35s ease-out both;
 }

 .vp-banner-line {
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
     border-radius: 2px;
     margin: 24px auto 0;
     animation: expandLine 0.8s 0.5s ease-out both;
 }



 /* ===== MAIN CONTENT ===== */
 .vp-content {
     max-width: 1280px;
     margin: 0 auto;
     padding: 80px 24px;
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 64px;
     align-items: start;
 }

 /* Left: Image Card */
 .vp-image-card {
     position: sticky;
     top: 0;
     border-radius: 28px;
     overflow: hidden;
     background: var(--glass-bg);
     backdrop-filter: blur(20px);
     border: 1px solid var(--glass-border);
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     animation: fadeInUp 0.8s 0.4s ease-out both;
 }

 .vp-image-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.15), transparent);
     z-index: 2;
 }

 .vp-image-card:hover {
     border-color: var(--glass-border-hover);
     transform: translateY(-8px);
     box-shadow: 0 32px 64px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(5, 150, 105, 0.08);
 }

 .vp-image-frame {
     position: relative;
     overflow: hidden;
     aspect-ratio: 4/5;
 }

 .vp-image-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .vp-image-card:hover .vp-image-frame img {
     transform: scale(1.08);
 }

 .vp-image-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(22, 47, 102, 0.6) 0%, transparent 50%);
     z-index: 1;
 }

 .vp-image-caption {
     position: absolute;
     bottom: 28px;
     left: 28px;
     right: 28px;
     z-index: 2;
     color: #fff;
 }

 .vp-image-caption h3 {
     font-size: 22px;
     font-weight: 700;
     margin-bottom: 6px;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
 }

 .vp-image-caption p {
     font-size: 14px;
     opacity: 0.9;
     text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 }

 .vp-image-glow {
     position: absolute;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
     width: 200px;
     height: 200px;
     background: var(--primary-green);
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.15;
     pointer-events: none;
     z-index: 0;
 }

 .vp-image-card::after {
     content: '';
     position: absolute;
     bottom: -20px;
     right: -20px;
     width: 120px;
     height: 120px;
     border: 3px solid var(--primary-green);
     border-radius: 24px;
     opacity: 0.2;
     z-index: -1;
     transition: all 0.5s ease;
 }

 .vp-image-card:hover::after {
     transform: translate(-8px, -8px);
     opacity: 0.35;
 }

 /* Right: Checklist */
 .vp-checklist-container {
     animation: fadeInUp 0.8s 0.55s ease-out both;
 }

 .vp-checklist-header {
     margin-bottom: 32px;
 }

 .vp-checklist-header h2 {
     font-size: clamp(24px, 3vw, 32px);
     font-weight: 700;
     color: var(--text-primary);
     line-height: 1.2;
     letter-spacing: -0.5px;
     margin-bottom: 8px;
 }

 .vp-checklist-header p {
     font-size: 16px;
     color: var(--text-muted);
     line-height: 1.5;
 }

 .vp-checklist {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .vp-check-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 16px 20px;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     border: 1px solid var(--glass-border);
     border-radius: 16px;
     transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     cursor: default;
     opacity: 0;
     transform: translateX(20px);
     animation: slideInRight 0.5s ease-out forwards;
 }

 .vp-check-item:nth-child(1) {
     animation-delay: 0.6s;
 }

 .vp-check-item:nth-child(2) {
     animation-delay: 0.65s;
 }

 .vp-check-item:nth-child(3) {
     animation-delay: 0.7s;
 }

 .vp-check-item:nth-child(4) {
     animation-delay: 0.75s;
 }

 .vp-check-item:nth-child(5) {
     animation-delay: 0.8s;
 }

 .vp-check-item:nth-child(6) {
     animation-delay: 0.85s;
 }

 .vp-check-item:nth-child(7) {
     animation-delay: 0.9s;
 }

 .vp-check-item:nth-child(8) {
     animation-delay: 0.95s;
 }

 .vp-check-item:nth-child(9) {
     animation-delay: 1.0s;
 }

 .vp-check-item:nth-child(10) {
     animation-delay: 1.05s;
 }

 .vp-check-item:nth-child(11) {
     animation-delay: 1.1s;
 }

 .vp-check-item:nth-child(12) {
     animation-delay: 1.15s;
 }

 .vp-check-item:nth-child(13) {
     animation-delay: 1.2s;
 }

 .vp-check-item:nth-child(14) {
     animation-delay: 1.25s;
 }

 .vp-check-item:hover {
     border-color: rgba(5, 150, 105, 0.3);
     background: rgba(255, 255, 255, 0.95);
     transform: translateX(8px);
     box-shadow: 0 8px 24px rgba(5, 150, 105, 0.08);
 }

 .vp-check-icon {
     flex-shrink: 0;
     width: 28px;
     height: 28px;
     background: linear-gradient(135deg, var(--primary-green), var(--light-green));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 2px;
     box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
     transition: transform 0.3s ease;
 }

 .vp-check-item:hover .vp-check-icon {
     transform: scale(1.15) rotate(-5deg);
 }

 .vp-check-icon svg {
     width: 14px;
     height: 14px;
     color: #fff;
     stroke-width: 3;
 }

 .vp-check-text {
     font-size: 15px;
     font-weight: 500;
     color: var(--text-secondary);
     line-height: 1.5;
     transition: color 0.3s ease;
 }

 .vp-check-item:hover .vp-check-text {
     color: var(--text-primary);
 }

 /* CTA Buttons */
 .vp-cta {
     margin-top: 40px;
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     animation: fadeInUp 0.8s 1.3s ease-out both;
 }

 .vp-btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     background: linear-gradient(135deg, var(--accent-orange), var(--accent-amber));
     color: #fff;
     border: none;
     border-radius: 24px;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     cursor: pointer;
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 16px rgba(217, 119, 6, 0.25);
 }

 .vp-btn-primary::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .vp-btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 32px rgba(217, 119, 6, 0.35);
 }

 .vp-btn-primary:hover::before {
     left: 100%;
 }

 .vp-btn-primary svg {
     width: 18px;
     height: 18px;
     transition: transform 0.3s ease;
 }

 .vp-btn-primary:hover svg {
     transform: translateX(4px);
 }

 .vp-btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 32px;
     background: #fff;
     color: var(--text-primary);
     border: 1px solid rgba(15, 23, 42, 0.15);
     border-radius: 24px;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.35s ease;
     cursor: pointer;
 }

 .vp-btn-secondary:hover {
     background: rgba(15, 23, 42, 0.04);
     border-color: rgba(15, 23, 42, 0.3);
     transform: translateY(-3px);
 }

 /* ===== ANIMATIONS ===== */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(20px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes shimmer {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 0.8;
         transform: scale(1);
     }

     50% {
         opacity: 0.4;
         transform: scale(1.2);
     }
 }



 @keyframes expandLine {
     from {
         width: 0;
         opacity: 0;
     }

     to {
         width: 60px;
         opacity: 1;
     }
 }

 /* ===== RESPONSIVE ===== */
 @media (max-width: 1024px) {
     .vp-content {
         grid-template-columns: 1fr;
         gap: 48px;
         padding: 60px 24px;
     }

     .vp-image-card {
         max-width: 500px;
         margin: 0 auto;
         width: 100%;
         position: static;
     }

     .vp-image-frame {
         aspect-ratio: 16/10;
     }
 }

 @media (max-width: 640px) {
     .vp-banner {
         min-height: 260px;
     }

     .vp-content {
         padding: 40px 16px;
     }

     .vp-check-item {
         padding: 14px 16px;
     }

     .vp-check-text {
         font-size: 14px;
     }

     .vp-cta {
         flex-direction: column;
     }

     .vp-btn-primary,
     .vp-btn-secondary {
         width: 100%;
         justify-content: center;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .vp-banner-content,
     .vp-banner-tag,
     .vp-banner-title,
     .vp-banner-subtitle,
     .vp-banner-line,
     .vp-image-card,
     .vp-checklist-container,
     .vp-check-item,
     .vp-cta {
         animation: none;
         opacity: 1;
         transform: none;
     }

     .vp-orb {
         animation: none;
     }
 }