:root {
    --bg-deep: #02292b;
    --bg-mid: #075253;
    --panel: rgba(0, 50, 50, .88);
    --panel-strong: rgba(0, 44, 44, .96);
    --border: rgba(135, 198, 191, .66);
    --border-soft: rgba(135, 198, 191, .3);
    --turquoise: #20b4b4;
    --turquoise-dark: #109394;
    --green: #1fbd56;
    --green-dark: #139444;
    --text: #ffffff;
    --muted: #bfd7d4;
    --danger: #ff7474;
    --success: #83edb5;
    --shadow: 0 18px 46px rgba(0, 18, 19, .24);
    --focus: 0 0 0 4px rgba(32, 180, 180, .28);
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--bg-deep);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    font-family: Inter, Montserrat, "Segoe UI", Arial, Helvetica, sans-serif;
    background:
        linear-gradient(135deg, transparent 0 18%, rgba(28, 173, 169, .10) 18% 31%, transparent 31% 52%, rgba(3, 20, 22, .34) 52% 68%, transparent 68%),
        radial-gradient(circle at 10% 15%, rgba(18, 176, 172, .30), transparent 30%),
        radial-gradient(circle at 94% 90%, rgba(0, 184, 153, .18), transparent 27%),
        linear-gradient(160deg, #021d20, #075454 54%, #002426);
    background-attachment: fixed;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .68; }

.app-shell {
    width: min(100%, 1180px);
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 42px) clamp(16px, 3vw, 36px) 34px;
}

.event-header {
    max-width: 1040px;
    margin: 0 auto 22px;
    text-align: center;
}

.event-logo {
    display: block;
    width: min(48%, 500px);
    max-height: 122px;
    margin: 0 auto;
    object-fit: contain;
    mix-blend-mode: screen;
}

h1 {
    margin: 8px 0 8px;
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.04em;
}

.instruction {
    margin: 0 auto;
    padding: 10px 18px;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: rgba(2, 48, 48, .78);
    box-shadow: 0 8px 24px rgba(0, 18, 19, .12);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 700;
    line-height: 1.25;
}

.survey-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 720px);
    margin: 18px auto 0;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .58);
    text-align: left;
    transition: color .2s ease;
}

.progress-number {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(0, 42, 42, .75);
    font-weight: 900;
}

.progress-copy {
    display: grid;
    line-height: 1.1;
}

.progress-copy strong { font-size: 15px; }
.progress-copy small { margin-top: 3px; font-size: 12px; }

.progress-step.is-active,
.progress-step.is-complete { color: #fff; }
.progress-step.is-active .progress-number { border-color: var(--turquoise); background: var(--turquoise); }
.progress-step.is-complete .progress-number { border-color: var(--green); background: var(--green); }

.progress-line {
    width: clamp(30px, 8vw, 110px);
    height: 2px;
    margin: 0 14px;
    background: rgba(255,255,255,.25);
}

#survey-form,
.success-screen {
    width: min(100%, 1080px);
    margin: 0 auto;
}

.survey-step { animation: fade-in .25s ease; }

.step-title {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.7vw, 34px);
    line-height: 1.1;
}

.step-title span {
    display: block;
    margin-bottom: 5px;
    color: var(--turquoise);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cpf-block {
    margin: 0 0 16px;
    padding: clamp(16px, 2vw, 22px);
    border: 2px solid var(--border-soft);
    border-radius: 20px;
    background: rgba(0, 43, 43, .76);
    box-shadow: var(--shadow);
}

.cpf-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 10px;
    text-align: left;
}

.cpf-heading label {
    flex: 0 0 auto;
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 850;
}

.cpf-heading span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
}

.cpf-input-wrap { position: relative; }

#cpf {
    width: 100%;
    height: clamp(58px, 6vw, 70px);
    border: 2px solid #b7c3c1;
    border-radius: 13px;
    padding: 0 54px 0 18px;
    background: #fff;
    color: #223130;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 650;
    letter-spacing: .015em;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

#cpf::placeholder { color: #8c9594; font-weight: 450; }
#cpf:focus { border-color: var(--turquoise); box-shadow: var(--focus); }
#cpf:disabled { background: #edf2f1; color: #53605f; }

.cpf-status-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
}

.cpf-block.is-valid .cpf-status-icon,
.cpf-block.is-warning .cpf-status-icon {
    background: var(--green);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(31, 189, 86, .18);
}
.cpf-block.is-valid .cpf-status-icon::before,
.cpf-block.is-warning .cpf-status-icon::before { content: "✓"; }
.cpf-block.is-valid #cpf,
.cpf-block.is-warning #cpf { border-color: var(--green); }
.cpf-block.is-invalid .cpf-status-icon { background: #d83f47; }
.cpf-block.is-invalid .cpf-status-icon::before { content: "!"; }
.cpf-block.is-loading .cpf-status-icon {
    border: 3px solid rgba(255,255,255,.35);
    border-top-color: var(--turquoise);
    animation: spin .7s linear infinite;
}

.field-feedback,
.form-feedback {
    min-height: 22px;
    margin: 7px 4px 0;
    font-size: 15px;
    font-weight: 750;
    text-align: left;
}

.form-feedback { text-align: center; font-size: 17px; }
.is-error { color: var(--danger); }
.is-success { color: var(--success); }
.field-feedback.is-success { color: var(--success); }
.field-feedback.is-warning { color: var(--success); }
.is-warning { color: #ffd978; }
.is-loading { color: var(--muted); }

.question-card,
.open-question {
    width: 100%;
    margin: 12px 0;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: var(--panel);
    box-shadow: 0 10px 28px rgba(0, 16, 17, .16);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.question-card {
    min-width: 0;
    padding: clamp(14px, 1.8vw, 20px);
}

.question-card.has-error,
.open-question.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(255, 100, 100, .18), 0 10px 28px rgba(0, 16, 17, .16);
    transform: translateY(-1px);
}

.question-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
}

.question-card-wide .question-layout {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
}

.question-content {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.question-number {
    display: grid;
    place-items: center;
    width: 58px;
    min-height: 52px;
    border-radius: 11px;
    background: linear-gradient(180deg, #25bcbc, #16a2a3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 24px;
    font-weight: 900;
}

.question-text {
    display: flex;
    min-height: 54px;
    align-items: center;
    padding-left: 16px;
    border-left: 2px solid var(--turquoise);
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.22;
}

.rating-row {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.rating-numeric { grid-template-columns: repeat(5, minmax(52px, 1fr)); }
.rating-labels { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.rating-option {
    position: relative;
    display: block;
    min-width: 0;
    border-radius: 11px;
}

.rating-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rating-option span {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 56px;
    padding: 8px 5px;
    border: 3px solid transparent;
    border-radius: 11px;
    color: #fff;
    font-size: clamp(17px, 1.65vw, 21px);
    font-weight: 900;
    line-height: 1.02;
    text-align: center;
    text-wrap: balance;
    transition: transform .14s, box-shadow .14s, border-color .14s, filter .14s;
}

.rating-option:hover span { transform: translateY(-2px); filter: brightness(1.05); }
.rating-option input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
.rating-option input:checked + span {
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.2), 0 9px 18px rgba(0,0,0,.18);
    transform: translateY(-2px) scale(1.025);
}
.rating-option input:checked + span::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -7px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #063f3f;
    font-size: 13px;
}

.rating-1 span { background: #ef2028; }
.rating-2 span { background: #ff7900; }
.rating-3 span { background: #cdbb27; }
.rating-4 span { background: #3bb957; }
.rating-5 span { background: #078646; }

.open-question {
    padding: clamp(16px, 2vw, 22px);
}

.open-question-heading {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 12px;
}

.open-question label {
    display: flex;
    min-height: 54px;
    align-items: center;
    padding-left: 16px;
    border-left: 2px solid var(--turquoise);
    font-size: clamp(18px, 1.9vw, 24px);
    font-weight: 700;
    line-height: 1.22;
}

.open-question textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 2px solid #b7c3c1;
    border-radius: 13px;
    padding: 15px 16px;
    background: #fff;
    color: #1e2b2b;
    font-size: 18px;
    line-height: 1.45;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.open-question textarea::placeholder { color: #8b9695; }
.open-question textarea:focus { border-color: var(--turquoise); box-shadow: var(--focus); }

.textarea-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 7px 3px 0;
    color: var(--muted);
    font-size: 12px;
}

.primary-action,
.secondary-action,
.submit-action {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 12px;
    color: #fff;
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 900;
    letter-spacing: .01em;
    transition: transform .15s, filter .15s, box-shadow .15s;
}

.primary-action:hover,
.secondary-action:hover,
.submit-action:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary-action:focus-visible,
.secondary-action:focus-visible,
.submit-action:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.primary-action {
    width: 100%;
    margin: 16px 0 8px;
    border: 0;
    background: linear-gradient(180deg, var(--turquoise), var(--turquoise-dark));
    box-shadow: 0 10px 26px rgba(0, 31, 32, .22);
}

.button-arrow { font-size: 34px; line-height: 1; }

.navigation-actions {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 14px;
    margin: 18px 0 12px;
}

.secondary-action {
    border: 2px solid #fff;
    background: rgba(4, 67, 67, .68);
}

.submit-action {
    border: 0;
    background: linear-gradient(180deg, var(--green), var(--green-dark));
    box-shadow: 0 10px 26px rgba(0, 31, 19, .22);
}

.sponsors {
    width: min(100%, 780px);
    margin: clamp(46px, 7vw, 82px) auto 0;
    text-align: center;
}

.sponsors p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sponsors img {
    display: block;
    width: 100%;
    max-height: 280px;
    margin: 0 auto;
    object-fit: contain;
    mix-blend-mode: screen;
    border-radius: 22px;
}

.success-screen {
    margin-top: 48px;
    padding: clamp(34px, 5vw, 58px) 24px;
    border: 2px solid var(--border);
    border-radius: 24px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
    text-align: center;
}

.success-icon {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--green);
    font-size: 56px;
    font-weight: 900;
}
.success-screen h2 { margin: 0 0 10px; font-size: clamp(32px, 4vw, 46px); }
.success-screen p { margin: 0; color: var(--muted); font-size: clamp(17px, 2vw, 23px); }

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

@media (max-width: 900px) {
    .event-logo { width: min(68%, 500px); }
    .question-layout { grid-template-columns: 1fr; gap: 13px; }
    .rating-numeric { width: min(100%, 520px); margin-left: 68px; }
    .question-card-wide .rating-labels { margin-left: 68px; }
}

@media (max-width: 640px) {
    body { background-attachment: scroll; }
    .app-shell { padding: 18px 12px 26px; }
    .event-header { margin-bottom: 16px; }
    .event-logo { width: min(88%, 430px); }
    h1 { margin-top: 7px; font-size: clamp(34px, 10vw, 44px); }
    .instruction { padding: 9px 12px; border-radius: 15px; font-size: 15px; }

    .survey-progress { margin-top: 14px; }
    .progress-copy small { display: none; }
    .progress-copy strong { font-size: 13px; }
    .progress-number { width: 33px; height: 33px; }
    .progress-line { margin-inline: 8px; }

    .step-title { margin-bottom: 11px; font-size: 26px; }
    .cpf-block { padding: 14px; border-radius: 16px; }
    .cpf-heading { display: block; }
    .cpf-heading label { display: block; margin-bottom: 5px; }
    .cpf-heading span { display: block; font-size: 12px; }
    #cpf { height: 58px; font-size: 23px; }

    .question-card,
    .open-question { margin: 10px 0; border-radius: 16px; }
    .question-card { padding: 13px; }
    .question-content,
    .open-question-heading { grid-template-columns: 52px minmax(0, 1fr); }
    .question-number { width: 44px; min-height: 44px; border-radius: 9px; font-size: 20px; }
    .question-text,
    .open-question label { min-height: 44px; padding-left: 11px; font-size: 17px; line-height: 1.25; }

    .rating-row { gap: 7px; }
    .rating-numeric { width: 100%; margin-left: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rating-option span { min-height: 50px; padding: 7px 3px; font-size: 16px; }
    .question-card-wide .rating-labels,
    .rating-labels { margin-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rating-labels .rating-option:last-child { grid-column: 1 / -1; }

    .open-question { padding: 14px; }
    .open-question textarea { min-height: 140px; padding: 13px; font-size: 16px; }

    .primary-action,
    .secondary-action,
    .submit-action { min-height: 58px; font-size: 19px; }
    .navigation-actions { grid-template-columns: 1fr; gap: 10px; }
    .submit-action { order: -1; }

    .sponsors { margin-top: 42px; }
    .sponsors img { border-radius: 16px; }
}

@media (max-width: 380px) {
    .app-shell { padding-inline: 9px; }
    .question-card { padding: 11px; }
    .question-content,
    .open-question-heading { grid-template-columns: 46px minmax(0, 1fr); }
    .question-number { width: 39px; min-height: 40px; font-size: 18px; }
    .question-text,
    .open-question label { padding-left: 9px; font-size: 16px; }
    .rating-option span { min-height: 46px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}