﻿.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card { background:#fff; border-radius:var(--radius); padding:32px 26px; box-shadow:var(--shadow); transition:all 0.3s; text-align:center; }
.why-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.why-icon { width:60px; height:60px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; margin:0 auto 18px; }
.why-card h4 { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; margin-bottom:10px; }
.why-card p { font-size:14px; color:var(--text-mid); line-height:1.75; }
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-steps::before { content:''; position:absolute; top:36px; left:12.5%; right:12.5%; height:3px; background:linear-gradient(90deg,var(--blue-primary),var(--green)); z-index:0; }
.step { text-align:center; position:relative; z-index:1; padding:0 10px; }
.step-num { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--blue-primary),var(--green)); color:#fff; font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:900; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; box-shadow:0 4px 20px rgba(21,101,192,0.3); }
.step h4 { font-weight:700; font-size:15px; margin-bottom:6px; }
.step p { font-size:13px; color:var(--text-mid); line-height:1.65; }
.vol-form-section { background:#fff; border-radius:var(--radius); padding:48px; box-shadow:var(--shadow-lg); max-width:720px; margin:0 auto; }
.vol-form-section h2 { font-family:'Playfair Display',serif; font-size:2rem; font-weight:800; margin-bottom:8px; }
.vol-form-section > p { color:var(--text-mid); margin-bottom:28px; }
/* Validation styles */
.field-error { font-size:12px; color:#e53935; display:none; align-items:center; gap:5px; margin-top:4px; }
.field-error.show { display:flex; }
.form-group input.error, .form-group textarea.error, .form-group select.error { border-color:#e53935 !important; background:#fff8f8; }
.form-group input.success, .form-group select.success, .form-group textarea.success { border-color:var(--green) !important; }
/* Thank-you overlay */
.vol-ty-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.vol-ty-overlay.active { display:flex; }
.vol-ty-box { background:#fff; border-radius:20px; max-width:540px; width:100%; box-shadow:0 20px 80px rgba(0,0,0,0.25); overflow:hidden; animation:popIn 0.4s ease; }
@keyframes popIn { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
.vol-ty-top { background:linear-gradient(135deg,#1565c0,#2e7d32); padding:40px 36px; text-align:center; }
.vol-ty-icon { width:70px; height:70px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; margin:0 auto 18px; }
.vol-ty-top h2 { font-family:'Playfair Display',serif; font-size:1.8rem; color:#fff; margin-bottom:10px; }
.vol-ty-top p { color:rgba(255,255,255,0.85); font-size:14px; line-height:1.7; }
.vol-ty-body { padding:32px 36px; }
.vol-ty-ref { background:#f4f7fb; border-radius:12px; padding:20px; margin-bottom:22px; }
.vol-ty-ref-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #e8eef8; font-size:13.5px; }
.vol-ty-ref-row:last-child { border-bottom:none; }
.vol-ty-ref-row .k { color:var(--text-mid); }
.vol-ty-ref-row .v { font-weight:700; color:var(--text-dark); }
.vol-ty-ref-row .v.green { color:var(--green); }
.vol-ty-actions { display:flex; gap:12px; margin-top:22px; }
.vol-ty-btn { flex:1; padding:13px; border-radius:10px; font-weight:700; font-size:14px; text-align:center; text-decoration:none; border:none; cursor:pointer; }
.vol-ty-btn.primary { background:linear-gradient(135deg,var(--blue-primary),var(--green)); color:#fff; }
.vol-ty-btn.secondary { background:#f4f7fb; color:var(--text-dark); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@media(max-width:900px) { .why-grid { grid-template-columns:1fr 1fr; } .process-steps { grid-template-columns:1fr 1fr; } .process-steps::before { display:none; } }
@media(max-width:600px) { .why-grid { grid-template-columns:1fr; } .process-steps { grid-template-columns:1fr; } .vol-form-section { padding:28px 20px; } .vol-ty-top,.vol-ty-body { padding:28px 20px; } .vol-ty-actions { flex-direction:column; } }