.mei-wrapper {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 680px;
margin: 0 auto;
padding: 16px;
color: #1e293b;
}
.mei-wrapper * { box-sizing: border-box; } .mei-card {
background: #fff;
border-radius: 24px;
padding: 40px 36px;
box-shadow: 0 4px 32px rgba(0,0,0,0.08);
} .mei-progress { display: none; margin-bottom: 36px; }
.mei-card.step-2 .mei-progress,
.mei-card.step-3 .mei-progress,
.mei-card.step-4 .mei-progress { display: block; }
.mei-progress-track {
height: 4px;
background: #e2e8f0;
border-radius: 4px;
margin-bottom: 16px;
overflow: hidden;
}
.mei-progress-fill {
height: 100%;
background: linear-gradient(90deg, #38bdf8, #0ea5e9);
border-radius: 4px;
transition: width 0.4s ease;
width: 33%;
}
.mei-card.step-3 .mei-progress-fill { width: 66%; }
.mei-card.step-4 .mei-progress-fill { width: 100%; }
.mei-progress-steps { display: flex; justify-content: space-between; }
.mei-progress-step {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 500;
color: #94a3b8;
}
.mei-progress-step.active { color: #0ea5e9; font-weight: 600; }
.mei-progress-step.done   { color: #22c55e; }
.mei-step-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #e2e8f0;
flex-shrink: 0;
transition: background 0.3s;
}
.mei-progress-step.active .mei-step-dot { background: #0ea5e9; }
.mei-progress-step.done   .mei-step-dot { background: #22c55e; } .mei-step { display: none; }
.mei-step.active { display: block; animation: meiFadeIn 0.3s ease; }
@keyframes meiFadeIn {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
} .mei-hero { text-align: center; }
.mei-brand {
font-size: 14px;
font-weight: 700;
color: #0ea5e9;
letter-spacing: 0.3px;
margin-bottom: 10px;
}
.mei-hero-title {
font-size: 30px;
font-weight: 800;
color: #0f172a;
margin: 0 0 8px 0;
line-height: 1.2;
}
.mei-hero-sub {
font-size: 16px;
color: #64748b;
margin: 0 0 28px 0;
}
.mei-hero-card {
background: #f0f9ff;
border: 2px solid #38bdf8;
border-radius: 18px;
padding: 20px 22px;
cursor: pointer;
transition: all 0.25s ease;
margin: 0 auto 28px auto;
max-width: 480px;
animation: meiGlow 2.5s ease-in-out infinite;
}
@keyframes meiGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.3); }
50%       { box-shadow: 0 0 0 6px rgba(56,189,248,0.12); }
}
.mei-hero-card:hover {
transform: translateY(-3px);
border-color: #0ea5e9;
box-shadow: 0 8px 28px rgba(14,165,233,0.2);
}
.mei-hero-card-inner {
display: flex;
align-items: center;
gap: 16px;
}
.mei-ice-icon {
font-size: 44px;
flex-shrink: 0;
animation: meiShake 0.2s ease-in-out infinite;
}
@keyframes meiShake {
0%, 100% { transform: rotate(0deg); }
25%       { transform: rotate(-4deg); }
75%       { transform: rotate(4deg); }
}
.mei-hero-card-text {
text-align: left;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.mei-hero-card-text strong {
font-size: 16px;
font-weight: 700;
color: #0f172a;
}
.mei-hero-card-text span {
font-size: 13px;
color: #64748b;
}
.mei-hero-arrow {
font-size: 20px;
color: #0ea5e9;
font-weight: 700;
flex-shrink: 0;
}
.mei-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
}
.mei-trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #64748b;
}
.mei-check { color: #22c55e; font-weight: 700; } .mei-step-header { margin-bottom: 24px; }
.mei-step-header h2 {
font-size: 22px;
font-weight: 700;
margin: 8px 0 4px 0;
color: #0f172a;
}
.mei-step-header p {
font-size: 14px;
color: #64748b;
margin: 0;
}
.mei-badge {
display: inline-block;
background: #e0f2fe;
color: #0369a1;
padding: 5px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
} .mei-tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.mei-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 16px 8px;
border: 2px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
position: relative;
}
.mei-tile input { position: absolute; opacity: 0; pointer-events: none; }
.mei-tile:hover { border-color: #38bdf8; background: #f8faff; }
.mei-tile:has(input:checked) {
border-color: #0ea5e9;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
box-shadow: 0 2px 10px rgba(14,165,233,0.15);
}
.mei-tile-icon { font-size: 28px; }
.mei-tile-label {
font-size: 12px;
font-weight: 600;
color: #334155;
line-height: 1.3;
}
.mei-tile:has(input:checked) .mei-tile-label { color: #0369a1; } .mei-contact-row { display: flex; gap: 10px; }
.mei-contact-tile {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 8px;
border: 2px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
font-weight: 600;
color: #334155;
text-align: center;
position: relative;
}
.mei-contact-tile input { position: absolute; opacity: 0; pointer-events: none; }
.mei-contact-tile:hover { border-color: #38bdf8; background: #f8faff; }
.mei-contact-tile:has(input:checked) {
border-color: #0ea5e9;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
}
.mei-contact-icon { font-size: 22px; } .mei-field-group { margin-bottom: 22px; }
.mei-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 22px;
}
.mei-full { grid-column: 1 / -1; }
.mei-field { display: flex; flex-direction: column; gap: 6px; }
.mei-label {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 10px;
display: block;
}
.mei-optional { font-weight: 400; color: #94a3b8; font-size: 12px; }
.mei-field label {
font-size: 14px;
font-weight: 600;
color: #374151;
}
.mei-field input,
.mei-field select,
.mei-field textarea {
padding: 13px 15px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 15px;
font-family: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
background: #fff;
width: 100%;
}
.mei-field input:focus,
.mei-field select:focus,
.mei-field textarea:focus {
outline: none;
border-color: #0ea5e9;
box-shadow: 0 0 0 4px rgba(14,165,233,0.1);
}
.mei-field input.error,
.mei-field select.error { border-color: #ef4444; }
.mei-field textarea { resize: vertical; min-height: 90px; } .mei-privacy {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: #64748b;
cursor: pointer;
margin-top: 20px;
}
.mei-privacy input {
width: 17px;
height: 17px;
margin-top: 2px;
accent-color: #0ea5e9;
flex-shrink: 0;
}
.mei-privacy a { color: #0ea5e9; text-decoration: underline; } .mei-error {
background: #fef2f2;
border-left: 3px solid #ef4444;
padding: 11px 15px;
border-radius: 8px;
margin-bottom: 16px;
color: #dc2626;
font-size: 14px;
font-weight: 600;
display: none;
animation: meiFadeIn 0.25s ease;
} .mei-nav { display: flex; gap: 12px; margin-top: 28px; }
.mei-card.step-1 .mei-nav { display: none; }
.mei-btn-back {
padding: 14px 22px;
background: #f1f5f9;
color: #64748b;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
flex-shrink: 0;
}
.mei-btn-back:hover { background: #e2e8f0; }
.mei-btn-next {
flex: 1;
padding: 15px 24px;
background: linear-gradient(135deg, #0ea5e9, #0284c7);
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 14px rgba(14,165,233,0.35);
}
.mei-btn-next:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(14,165,233,0.45);
}
.mei-btn-next:disabled {
background: #94a3b8;
cursor: not-allowed;
transform: none;
box-shadow: none;
} @media (max-width: 580px) {
.mei-card { padding: 28px 18px; border-radius: 20px; }
.mei-hero-title { font-size: 24px; }
.mei-tile-grid { grid-template-columns: repeat(2, 1fr); }
.mei-service-grid { grid-template-columns: repeat(2, 1fr); }
.mei-grid-2 { grid-template-columns: 1fr; }
.mei-contact-row { flex-direction: column; }
.mei-nav { flex-direction: column-reverse; }
.mei-progress-step span { display: none; }
}