#Subheader { background: var(--vlc-tint); padding: 12px 0; border-bottom: 1px solid var(--vlc-navy-700); } .breadcrumbs { display: flex; list-style: none; padding: 0; margin: 0; font-size: 15px; } .breadcrumbs li { display: flex; align-items: center; } .breadcrumbs a { color: var(--vlc-navy-700); text-decoration: none; transition: color 0.2s ease; font-weight: 500; } .breadcrumbs a:hover { color: var(--vlc-leaf); } .breadcrumbs span { margin: 0 8px; color: var(--vlc-sky); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; color: #1F2A44; } .pattern-dots { background-color: var(--vlc-navy); background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; } .pattern-grid { background-color: var(--vlc-navy); background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; } .pattern-diagonal-stripes-sm { background-image: repeating-linear-gradient( 45deg, rgba(0, 32, 96, 0.03), rgba(0, 32, 96, 0.03) 10px, rgba(0, 32, 96, 0.05) 10px, rgba(0, 32, 96, 0.05) 20px ); } .feature-highlight { transition: all 0.3s ease; } .feature-highlight:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 32, 96, 0.1); } .icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--vlc-sky); color: white; flex-shrink: 0; } .pattern-tint { background: radial-gradient(circle at 10% 20%, rgba(141,198,63,0.05) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(0,160,233,0.05) 0%, transparent 20%), linear-gradient(to bottom, #F7FBF1 0%, #FFFFFF 100%); } .pattern-wave { background-color: var(--vlc-navy); background-image: radial-gradient(circle at 100% 50%, rgba(255,255,255,0.1) 0%, transparent 20%), radial-gradient(circle at 0% 50%, rgba(255,255,255,0.1) 0%, transparent 20%); background-size: 40px 40px; } .pattern-stripes { background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px ), var(--vlc-navy); } .pattern-accent { background: linear-gradient(135deg, rgba(141,198,63,0.08) 0%, rgba(0,160,233,0.08) 100%); color: #1F2A44; } .feature-card { background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,32,96,0.08); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border: 1px solid rgba(0,32,96,0.05); } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(0,32,96,0.12); } .benefit-card { background: linear-gradient(135deg, rgba(141,198,63,0.08) 0%, rgba(0,160,233,0.08) 100%); border-radius: 16px; border: 1px solid rgba(0,160,233,0.15); backdrop-filter: blur(4px); } .capability-card { background: white; color: var(--vlc-ink); border-radius: 12px; box-shadow: 0 10px 20px rgba(0,32,96,0.1); border: 1px solid rgba(0,32,96,0.1); } .section-divider { height: 2px; background: linear-gradient(90deg, var(--vlc-leaf), var(--vlc-sky)); margin: 3rem 0; opacity: 0.2; } .shadow-sm { box-shadow: 0 4px 6px -1px rgba(0,32,96,0.1), 0 2px 4px -1px rgba(0,32,96,0.06); } .rounded-xl { border-radius: 1rem; } .rounded-lg { border-radius: 0.75rem; } .icon-circle { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #8DC63F 0%, #00A0E9 100%); display: flex; align-items: center; justify-content: center; color: white; margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(0,160,233,0.2); } .btn-primary { background: linear-gradient(135deg, #002060 0%, #001A50 100%); color: white; border: none; padding: 0.875rem 2.25rem; font-weight: 600; letter-spacing: 0.5px; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 4px 8px rgba(0,32,96,0.15); font-size: 1rem; } .btn-primary.bg-\[var\(--vlc-sky\)\] { background: linear-gradient(135deg, #00A0E9 0%, #0077B6 100%); } .btn-primary.bg-\[var\(--vlc-sky\)\]:hover { background: linear-gradient(135deg, #0088CC 0%, #005F8B 100%); transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,160,233,0.2); } .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,32,96,0.2); background: linear-gradient(135deg, #001A50 0%, #001440 100%); } .btn-accent { background: linear-gradient(135deg, var(--vlc-leaf), #7ab32e); color: white; border: none; padding: 0.75rem 2rem; font-weight: 600; letter-spacing: 0.5px; border-radius: 50px; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(141,198,63,0.2); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(141,198,63,0.3); background: linear-gradient(135deg, var(--vlc-leaf-700), #6aa025); } h1, h2, h3, h4 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; line-height: 1.2; color: #002060; letter-spacing: -0.5px; } h1 { font-size: 2.75rem; margin-bottom: 1.75rem; } h2 { font-size: 2.25rem; margin-bottom: 1.5rem; } h3 { font-size: 1.75rem; margin-bottom: 1.25rem; } p { color: var(--vlc-ink); font-size: 1.125rem; line-height: 1.6; margin-bottom: 1.5rem; } .feature-list li { position: relative; padding-left: 2.5rem; margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.7; font-weight: 500; } .feature-list li:before { content: ""; position: absolute; left: 0; top: 0.75rem; width: 0.75rem; height: 0.75rem; background: #8DC63F; border-radius: 50%; box-shadow: 0 0 0 4px rgba(141,198,63,0.2); transition: all 0.3s ease; } .feature-list li:hover:before { transform: scale(1.2); background: #00A0E9; } .feature-list strong { color: var(--vlc-navy); font-weight: 600; } .card { max-width: 720px; margin: 0 auto; padding: 2rem; border: 1px solid rgba(31,42,68,0.1); border-radius: 20px; background: white; box-shadow: 0 8px 24px rgba(0,32,96,0.05); } .card p:last-child { margin-bottom: 0; } .section-divider { height: 2px; background: linear-gradient(90deg, #8DC63F 0%, #00A0E9 100%); margin: 4rem 0; opacity: 0.15; border-radius: 2px; }