@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap');

:root {
    --fedon-gold: #C9A84C;
    --fedon-orange: #f36f37;
    --fedon-black: #000000;
    --fedon-dark: #121529;
    --fedon-gray: #555555;
    --fedon-light: #f5f5f5;
    --fedon-white: #ffffff;
    --fedon-gradient-essential: radial-gradient(ellipse 150% 110% at 50% 70%, #d0d8de 0%, #a8b8c4 30%, #4a6578 60%, #4a6578 100%);
    --fedon-gradient-elegant: radial-gradient(ellipse 150% 110% at 50% 70%, #8a9a8e 0%, #5e7268 30%, #3d5248 60%, #1e3028 100%);
    --fedon-gradient-exclusive: radial-gradient(ellipse 150% 110% at 50% 70%, #b0bec5 0%, #78909c 30%, #4a6572 60%, #1c3845 100%);
    --fedon-gradient-premium: radial-gradient(ellipse 150% 110% at 50% 70%, #86afc4 0%, #86afc4 8%, #3a6f90 58%, #102840 100%);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Source Sans Pro', sans-serif;
    background: var(--fedon-white);
    color: var(--fedon-black);
}
.result-essential { background: var(--fedon-gradient-essential); }
.result-elegant { background: var(--fedon-gradient-elegant); }
.result-exclusive { background: var(--fedon-gradient-exclusive); }
.result-premium { background: var(--fedon-gradient-premium); }
.logo-wrap { text-align: center; padding-top: 24px; }
.logo-wrap.small { padding-top: 18px; }
.brand-logo {
    height: clamp(2rem, 4vw, 4rem);
    width: auto;
}
.fedon-container {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.fedon-card {
    width: 100%;
    max-width: 560px;
    background: var(--fedon-white);
    color: var(--fedon-black);
    border: 2px solid var(--fedon-black);
    border-radius: 15px;
    box-shadow: -19px -20px 10px 3px rgba(0,0,0,0.35);
    padding: 2rem;
}
.fedon-title { margin: 0 0 .5rem; font-size: 1.8rem; font-weight: 700; }
.fedon-subtitle { margin: 0 0 1.5rem; color: var(--fedon-orange); }
.form-stack { display: grid; gap: 1rem; }
.fedon-input {
    border: 2px solid #ccc;
    padding: .85rem 1rem;
    font-size: 1rem;
}
.fedon-input:focus { outline: none; border-color: var(--fedon-black); }
.privacy-row { display: flex; gap: .75rem; align-items: flex-start; color: var(--fedon-gray); font-size: .95rem; }
.fedon-btn-primary, .fedon-btn-secondary, .fedon-btn-option {
    font: inherit;
    cursor: pointer;
}
.fedon-btn-primary {
    background: var(--fedon-orange);
    color: var(--fedon-white);
    border: none;
    border-radius: 15px;
    box-shadow: -5px -5px 10px 3px rgba(0,0,0,0.35);
    padding: .9rem 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: opacity 0.2s;
}
.fedon-btn-primary:hover { opacity: 0.8; }
.fedon-btn-secondary {
    background: transparent;
    color: var(--fedon-gray);
    border: 2px solid #ccc;
    padding: .8rem 1.4rem;
}
.progress-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.fedon-step { font-size: .9rem; font-weight: 700; color: var(--fedon-gray); white-space: nowrap; }
.fedon-progress-bar { flex: 1; height: 6px; background: #e0e0e0; overflow: hidden; }
.fedon-progress-fill { height: 100%; background: var(--fedon-black); }
.fedon-question { font-size: 1.35rem; line-height: 1.4; margin: 0 0 1.5rem; }
.answers-grid { display: grid; gap: .85rem; }
.fedon-btn-option {
    background: var(--fedon-light);
    color: var(--fedon-black);
    border: 2px solid #e0d9cc;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    text-align: left;
}
.fedon-btn-option:hover { border-color: var(--fedon-gold); background: #fdf8f0; }
.fedon-btn-option.selected { border-color: var(--fedon-orange); background: var(--fedon-orange); color: var(--fedon-light); font-weight: 600; }
.fedon-privacy-label { font-size: .88rem; color: var(--fedon-gray); line-height: 1.4; }
.fedon-privacy-label a { color: var(--fedon-orange); }
.fedon-result-title { margin: 0 0 .5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: 3px; color: var(--fedon-gray); }
.fedon-profile-name { margin: 0 0 1rem; font-size: 2.2rem; font-weight: 900; }
.fedon-profile-img { width: 100%; max-width: 320px; display: block; margin: 0 auto 1.25rem; border: 2px solid var(--fedon-black); }
.fedon-profile-desc { color: var(--fedon-gray); font-size: 1rem; line-height: 1.65; margin-bottom: 1rem; }
.fedon-score { color: var(--fedon-gray); margin-bottom: 1rem; }
.alert { padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 8px; }
.alert-warning { background: #fff5d6; color: #6c5300; border: 1px solid #ebd38a; }
.fade-in { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
    .fedon-container { padding: 1rem; }
    .fedon-card { padding: 1.25rem; box-shadow: -10px -10px 8px 1px rgba(0,0,0,.2); }
}