:root {
    color-scheme: light;
    --bg: #eef3f9;
    --bg-deep: #e5ebf3;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;
    --surface-soft: rgba(13, 29, 50, 0.035);
    --surface-hover: rgba(13, 29, 50, 0.065);
    --field: rgba(246, 249, 253, 0.92);
    --border: rgba(25, 43, 67, 0.13);
    --border-strong: rgba(25, 43, 67, 0.22);
    --text: #101c2d;
    --muted: #637084;
    --muted-strong: #4c5b70;
    --accent: #ef3340;
    --accent-2: #ff5964;
    --accent-dark: #be1526;
    --accent-soft: rgba(239, 51, 64, 0.10);
    --accent-glow: rgba(239, 51, 64, 0.20);
    --success: #29c995;
    --danger: #d93645;
    --shadow: 0 30px 80px rgba(39, 56, 78, 0.15);
    --header-bg: rgba(238, 243, 249, 0.50);
    --radius-xl: 28px;
    --radius-lg: 21px;
    --radius-md: 15px;
    --radius-sm: 11px;
    --content-width: 1050px;
    --transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #eef3f9;
    --bg-deep: #e5ebf3;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-solid: #ffffff;
    --surface-soft: rgba(13, 29, 50, 0.035);
    --surface-hover: rgba(13, 29, 50, 0.065);
    --field: rgba(246, 249, 253, 0.92);
    --border: rgba(25, 43, 67, 0.13);
    --border-strong: rgba(25, 43, 67, 0.22);
    --text: #101c2d;
    --muted: #637084;
    --muted-strong: #4c5b70;
    --accent-soft: rgba(239, 51, 64, 0.10);
    --accent-glow: rgba(239, 51, 64, 0.20);
    --shadow: 0 30px 80px rgba(39, 56, 78, 0.15);
    --header-bg: rgba(238, 243, 249, 0.50);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% -10%, rgba(32, 65, 103, 0.42), transparent 36%),
        linear-gradient(145deg, var(--bg-deep), var(--bg) 52%, #07182a);
    color: var(--text);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    transition: background-color var(--transition), color var(--transition);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 12% 2%, rgba(255, 255, 255, 0.98), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(239, 51, 64, 0.08), transparent 26%),
        linear-gradient(145deg, #f8fbff, var(--bg) 58%, #e9eff7);
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

svg {
    display: block;
}

.site-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    isolation: isolate;
}

.ambient-scene {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

#ambientCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.76;
}

html[data-theme="light"] #ambientCanvas {
    opacity: 0.34;
}

.aurora {
    position: absolute;
    width: 48vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.16;
    animation: auroraFloat 14s ease-in-out infinite alternate;
}

.aurora-one {
    top: 12%;
    left: -18%;
    background: #d82037;
}

.aurora-two {
    right: -16%;
    bottom: -10%;
    background: #174273;
    animation-delay: -7s;
}

html[data-theme="light"] .aurora {
    opacity: 0.11;
}

.mesh {
    position: absolute;
    width: 48vw;
    height: 260px;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(239, 51, 64, 0.52) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 51, 64, 0.52) 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
    transform: perspective(500px) rotateX(67deg) rotateZ(-9deg);
    animation: meshMove 9s ease-in-out infinite alternate;
}

.mesh-top {
    top: -130px;
    left: -12vw;
}

.mesh-bottom {
    right: -10vw;
    bottom: -105px;
    transform: perspective(500px) rotateX(67deg) rotateZ(10deg);
    animation-delay: -4s;
}

html[data-theme="light"] .mesh {
    opacity: 0.11;
}

.shape {
    position: absolute;
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.38));
    will-change: transform;
}

.shape-cube {
    width: 70px;
    aspect-ratio: 1;
    border-radius: 17px;
    background: linear-gradient(145deg, #ff5361 4%, #d7172b 46%, #7b0a19 100%);
    box-shadow:
        inset 9px 9px 20px rgba(255, 255, 255, 0.18),
        inset -12px -14px 24px rgba(45, 1, 9, 0.48),
        0 0 38px rgba(239, 51, 64, 0.16);
    transform: rotate(34deg) skew(-4deg);
    animation: cubeFloat 9s ease-in-out infinite;
}

.shape-cube::after {
    content: "";
    position: absolute;
    inset: 7px 10px auto auto;
    width: 48%;
    height: 18%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    filter: blur(7px);
}

.shape-cube-one {
    top: 20%;
    right: 8%;
}

.shape-cube-two {
    left: 6%;
    top: 30%;
    width: 48px;
    animation-delay: -4s;
}

.shape-orb {
    width: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 28% 24%, #ff6672, #ac1022 44%, #120713 78%);
    box-shadow: inset -9px -12px 14px rgba(0,0,0,.42), 0 0 24px rgba(239, 51, 64, .20);
    animation: orbFloat 8s ease-in-out infinite;
}

.shape-orb-one {
    top: 45%;
    left: 4%;
}

.shape-orb-two {
    right: 6%;
    top: 60%;
    width: 27px;
    animation-delay: -3s;
}

.shape-ring {
    left: 8%;
    bottom: 7%;
    width: 120px;
    aspect-ratio: 1;
    border: 29px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        linear-gradient(150deg, #ff6d76, #aa1021 52%, #310513) border-box;
    box-shadow: inset 11px 12px 20px rgba(255,255,255,.12), 0 20px 35px rgba(0,0,0,.34);
    transform: rotateX(60deg) rotateZ(-22deg);
    animation: ringFloat 11s ease-in-out infinite;
}

html[data-theme="light"] .shape {
    filter: drop-shadow(0 18px 25px rgba(63, 75, 91, 0.22));
    opacity: 0.82;
}

.site-header {
    position: relative;
    z-index: 20;
    display: flex;
    width: min(calc(100% - 40px), 1220px);
    min-height: 88px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    width: clamp(196px, 20vw, 245px);
    height: auto;
    object-fit: contain;
}

.brand-logo-dark {
    display: block;
}

.brand-logo-light {
    display: none;
}

html[data-theme="light"] .brand-logo-dark {
    display: none;
}

html[data-theme="light"] .brand-logo-light {
    display: block;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.language-switcher {
    position: relative;
    display: flex;
    height: 46px;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);
    backdrop-filter: blur(16px);
}

[dir="rtl"] .language-switcher {
    padding: 0 13px 0 10px;
}

.language-switcher > svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    opacity: 0.86;
}

.language-current {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.language-current svg {
    width: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    transition: transform var(--transition);
}

.language-current[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 30;
    width: 180px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    backdrop-filter: blur(20px);
    transform-origin: top right;
    animation: menuIn 160ms ease-out;
}

.language-menu a {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.language-menu a:hover,
.language-menu a.active {
    background: var(--accent-soft);
    color: var(--accent-2);
}

.language-menu a span {
    font-size: 12px;
    font-weight: 800;
}

.language-menu a small {
    color: var(--muted);
    font-size: 13px;
}

.theme-toggle {
    display: flex;
    height: 46px;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface-soft);
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.theme-toggle:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.theme-icon {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.theme-icon-sun,
.theme-label-light {
    display: none;
}

html[data-theme="light"] .theme-icon-sun,
html[data-theme="light"] .theme-label-light {
    display: block;
}

html[data-theme="light"] .theme-icon-moon,
html[data-theme="light"] .theme-label-dark {
    display: none;
}

.theme-label {
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.main-content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 32px), var(--content-width));
    margin: 0 auto;
    flex: 1;
}

.hero-copy {
    max-width: 760px;
    margin: 46px auto 30px;
    text-align: center;
    animation: riseIn 650ms ease-out both;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
    color: var(--accent-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.eyebrow > span {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}

[dir="rtl"] .eyebrow > span {
    background: linear-gradient(90deg, var(--accent), transparent);
}

.hero-copy h1,
.thank-you-card h1 {
    margin: 0;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 790;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.hero-copy h1::first-letter {
    text-shadow: 0 0 32px rgba(255,255,255,.10);
}

.hero-copy p {
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--muted-strong);
    font-size: clamp(14px, 1.7vw, 17px);
}

.hero-rule {
    display: flex;
    width: 110px;
    height: 12px;
    margin: 13px auto 0;
    align-items: center;
    justify-content: center;
}

.hero-rule::before,
.hero-rule::after {
    content: "";
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
}

.hero-rule::after {
    background: linear-gradient(90deg, var(--accent), transparent);
}

.hero-rule span {
    width: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent);
}

.survey-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(145deg, rgba(239,51,64,.055), transparent 30%),
        var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(25px) saturate(115%);
    animation: riseIn 720ms 100ms ease-out both;
}

.survey-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255,255,255,.06), transparent 18%, transparent 80%, rgba(255,255,255,.025));
}

.card-glow {
    position: absolute;
    top: -80px;
    inset-inline-start: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--accent-glow);
    filter: blur(85px);
    opacity: .48;
    pointer-events: none;
}

.alert {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 13px;
    margin: 20px 24px 0;
    padding: 14px 16px;
    border: 1px solid rgba(255,100,112,.38);
    border-radius: 14px;
    background: rgba(180,25,44,.13);
    color: var(--text);
}

.alert svg {
    width: 22px;
    min-width: 22px;
    fill: none;
    stroke: var(--danger);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.alert strong {
    font-size: 14px;
}

.alert ul {
    margin: 5px 0 0;
    padding-inline-start: 18px;
    color: var(--muted-strong);
    font-size: 13px;
}

.stepper {
    position: relative;
    z-index: 2;
    display: flex;
    padding: 29px 34px 25px;
    align-items: flex-start;
}

.step-item {
    display: flex;
    width: 112px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: default;
}

.step-item.completed {
    cursor: pointer;
}

.step-node {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 750;
    transition: all var(--transition);
}

.step-check {
    position: absolute;
    width: 19px;
    opacity: 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    transform: scale(.4);
    transition: all var(--transition);
}

.step-number {
    transition: all var(--transition);
}

.step-item.active,
.step-item.completed {
    color: var(--text);
}

.step-item.active .step-node {
    border-color: var(--accent-2);
    background: linear-gradient(145deg, var(--accent-2), var(--accent-dark));
    box-shadow: 0 0 0 6px var(--accent-soft), 0 8px 25px var(--accent-glow);
    color: #fff;
}

.step-item.completed .step-node {
    border-color: rgba(239,51,64,.62);
    background: var(--accent-soft);
    color: var(--accent-2);
}

.step-item.completed .step-number {
    opacity: 0;
    transform: scale(.4);
}

.step-item.completed .step-check {
    opacity: 1;
    transform: scale(1);
}

.step-label {
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.step-item.active .step-label {
    color: var(--text);
}

.step-line {
    position: relative;
    height: 42px;
    flex: 1;
}

.step-line::before,
.step-line i {
    position: absolute;
    top: 21px;
    inset-inline: -16px;
    height: 1px;
    content: "";
}

.step-line::before {
    background: var(--border);
}

.step-line i {
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 12px var(--accent-glow);
    transition: width 500ms cubic-bezier(.2,.8,.2,1);
}

.step-line.completed i {
    width: calc(100% + 32px);
}

#surveyForm {
    position: relative;
    z-index: 2;
}

.form-stage {
    padding: 6px 32px 25px;
}

.form-stage.active {
    animation: stageIn 400ms cubic-bezier(.2,.8,.2,1) both;
}

.stage-heading {
    display: flex;
    gap: 15px;
    margin-bottom: 22px;
    padding: 19px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.stage-icon {
    display: grid;
    width: 45px;
    height: 45px;
    min-width: 45px;
    place-items: center;
    border: 1px solid rgba(239,51,64,.24);
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent-2);
}

.stage-icon svg {
    width: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.stage-kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--accent-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.stage-heading h2 {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 23px);
    letter-spacing: -.02em;
}

.stage-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.field-full {
    grid-column: 1 / -1;
}

.field-group label {
    display: flex;
    margin-bottom: 7px;
    align-items: center;
    gap: 7px;
    color: var(--muted-strong);
    font-size: 12px;
    font-weight: 650;
}

.field-group label small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.required-dot {
    color: var(--accent-2);
}

.input-shell,
.textarea-shell {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--field);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.input-shell {
    display: flex;
    min-height: 49px;
    align-items: center;
}

.input-shell:focus-within,
.textarea-shell:focus-within {
    border-color: rgba(239,51,64,.66);
    background: color-mix(in srgb, var(--field) 88%, var(--accent-soft));
    box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 24px rgba(0,0,0,.12);
}

.input-shell > svg {
    width: 19px;
    margin-inline: 14px 0;
    fill: none;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.input-shell input {
    width: 100%;
    min-width: 0;
    height: 47px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
}

.input-shell input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.input-shell input[type="date"] {
    color-scheme: dark;
}

html[data-theme="light"] .input-shell input[type="date"] {
    color-scheme: light;
}

.field-group.invalid .input-shell,
.question-card.invalid,
.metric-card.invalid {
    border-color: rgba(255,100,112,.72);
    box-shadow: 0 0 0 3px rgba(255,100,112,.10);
}

.field-error {
    display: block;
    min-height: 17px;
    margin-top: 4px;
    color: var(--danger);
    font-size: 11px;
}

.toggle-row {
    display: flex;
    margin: 19px 0;
    padding: 13px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.toggle-row strong {
    display: block;
    font-size: 13px;
}

.toggle-row small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-track {
    position: relative;
    display: block;
    width: 48px;
    height: 26px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--field);
    cursor: pointer;
    transition: all var(--transition);
}

.switch-track span {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 2px 8px rgba(0,0,0,.24);
    transition: all var(--transition);
}

.switch input:checked + .switch-track {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.switch input:checked + .switch-track span {
    inset-inline-start: 25px;
    background: #fff;
}

.participant-fields {
    max-height: 170px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 350ms ease, opacity 240ms ease, transform 350ms ease;
}

.participant-fields.hidden-fields {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
}

.question-card,
.metric-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    transition: border-color var(--transition), transform var(--transition), background var(--transition);
}

.question-card {
    margin-bottom: 14px;
    padding: 17px;
}

.question-card:hover,
.metric-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.question-title,
.metric-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.question-title > span,
.metric-head > span {
    display: grid;
    width: 28px;
    height: 28px;
    min-width: 28px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--field);
    color: var(--accent-2);
    font-size: 10px;
    font-weight: 800;
}

.question-title h3,
.metric-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
}

.star-rating {
    display: flex;
    margin-top: 17px;
    align-items: center;
    gap: 5px;
    padding-inline-start: 36px;
}

.star-option input,
.scale-option input,
.mini-star-rating input,
.choice-chip input,
.pace-option input,
.nps-scale input,
.consent-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-option {
    cursor: pointer;
}

.star-option svg {
    width: 38px;
    fill: rgba(156,171,193,.18);
    stroke: rgba(156,171,193,.42);
    stroke-width: 1;
    transition: fill var(--transition), stroke var(--transition), transform var(--transition), filter var(--transition);
}

.star-option.hovered svg,
.star-option.selected svg {
    fill: var(--accent);
    stroke: var(--accent-2);
    filter: drop-shadow(0 6px 10px rgba(239,51,64,.25));
}

.star-option:hover svg {
    transform: translateY(-2px) scale(1.08);
}

.rating-output {
    min-width: 90px;
    margin-inline-start: 12px;
    color: var(--accent-2);
    font-size: 12px;
    font-weight: 650;
}

.rating-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 15px;
    padding-inline-start: 36px;
}

.scale-option {
    min-width: 0;
    cursor: pointer;
}

.scale-face {
    display: flex;
    min-height: 84px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--field);
    transition: all var(--transition);
}

.scale-face:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.scale-option input:checked + .scale-face {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-2);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 9px 24px rgba(239,51,64,.13);
    transform: translateY(-2px);
}

.scale-face strong {
    display: none;
}

.scale-face small {
    max-width: 100%;
    overflow: hidden;
    padding: 0 5px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scale-option input:checked + .scale-face small {
    color: var(--accent-2);
}

.face {
    position: relative;
    width: 31px;
    height: 31px;
    margin-bottom: 3px;
    border: 1.6px solid currentColor;
    border-radius: 50%;
    color: var(--muted);
}

.face i {
    position: absolute;
    top: 9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.face i:first-child { left: 7px; }
.face i:nth-child(2) { right: 7px; }

.face b {
    position: absolute;
    left: 8px;
    bottom: 6px;
    width: 13px;
    height: 6px;
    border-bottom: 1.7px solid currentColor;
    border-radius: 0 0 50% 50%;
}

.face-1 b,
.face-2 b {
    bottom: 4px;
    border-top: 1.7px solid currentColor;
    border-bottom: 0;
    border-radius: 50% 50% 0 0;
}

.face-3 b {
    bottom: 7px;
    height: 1px;
    border-bottom: 1.7px solid currentColor;
    border-radius: 0;
}

.compact-question {
    margin-bottom: 0;
}

.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-inline-start: 36px;
}

.choice-chip span {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--field);
    color: var(--muted-strong);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all var(--transition);
}

.choice-chip span:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.choice-chip svg {
    width: 14px;
    opacity: 0;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    transform: scale(.4);
    transition: all var(--transition);
}

.choice-chip input:checked + span {
    border-color: var(--accent);
    background: linear-gradient(145deg, rgba(239,51,64,.80), rgba(190,21,38,.85));
    color: #fff;
    box-shadow: 0 8px 18px rgba(239,51,64,.17);
}

.choice-chip input:checked + span svg {
    opacity: 1;
    transform: scale(1);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.metric-card {
    padding: 15px;
}

.metric-head {
    align-items: flex-start;
}

.metric-head h3 {
    min-height: 43px;
    font-size: 12px;
    line-height: 1.45;
}

.mini-star-rating {
    display: flex;
    gap: 3px;
    margin-top: 13px;
}

.mini-star-rating label {
    cursor: pointer;
}

.mini-star-rating svg {
    width: 24px;
    fill: rgba(156,171,193,.16);
    stroke: rgba(156,171,193,.42);
    stroke-width: 1;
    transition: all var(--transition);
}

.mini-star-rating label.hovered svg,
.mini-star-rating label.selected svg {
    fill: var(--accent);
    stroke: var(--accent-2);
    filter: drop-shadow(0 4px 7px rgba(239,51,64,.20));
}

.pace-card {
    margin-bottom: 0;
}

.pace-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding-inline-start: 36px;
}

.pace-option > span {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--field);
    cursor: pointer;
    transition: all var(--transition);
}

.pace-option > span:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.pace-option svg {
    width: 22px;
    fill: none;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.pace-option strong {
    color: var(--muted-strong);
    font-size: 11px;
}

.pace-option input:checked + span {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.pace-option input:checked + span svg,
.pace-option input:checked + span strong {
    color: var(--accent-2);
    stroke: var(--accent-2);
}

.nps-scale {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 6px;
    margin-top: 17px;
    padding-inline-start: 36px;
}

.nps-scale label span {
    display: grid;
    aspect-ratio: 1;
    min-height: 34px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--field);
    color: var(--muted-strong);
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    transition: all var(--transition);
}

.nps-scale label span:hover {
    border-color: var(--accent-2);
    color: var(--accent-2);
    transform: translateY(-2px);
}

.nps-scale input:checked + span {
    border-color: var(--accent);
    background: linear-gradient(145deg, var(--accent-2), var(--accent-dark));
    box-shadow: 0 7px 16px var(--accent-glow);
    color: #fff;
    transform: translateY(-2px);
}

.nps-labels {
    display: flex;
    margin-top: 8px;
    padding-inline-start: 36px;
    justify-content: space-between;
    color: var(--muted);
    font-size: 9px;
}

.textarea-group {
    margin-top: 15px;
}

.textarea-shell textarea {
    display: block;
    width: 100%;
    min-height: 128px;
    resize: vertical;
    padding: 14px 15px 36px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
}

.textarea-footer {
    position: absolute;
    right: 13px;
    bottom: 9px;
    left: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--muted);
    font-size: 9px;
}

[dir="rtl"] .textarea-footer {
    justify-content: flex-start;
}

.typing-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 7px rgba(41,201,149,.45);
}

.consent-card {
    display: flex;
    margin-top: 14px;
    align-items: center;
    gap: 10px;
    color: var(--muted-strong);
    cursor: pointer;
    font-size: 11px;
}

.custom-check {
    display: grid;
    width: 20px;
    height: 20px;
    min-width: 20px;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--field);
    transition: all var(--transition);
}

.custom-check svg {
    width: 14px;
    opacity: 0;
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
    transform: scale(.4);
    transition: all var(--transition);
}

.consent-card input:checked + .custom-check {
    border-color: var(--accent);
    background: var(--accent);
}

.consent-card input:checked + .custom-check svg {
    opacity: 1;
    transform: scale(1);
}

.review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.review-card {
    position: relative;
    display: grid;
    min-height: 104px;
    grid-template-columns: 37px 1fr auto;
    align-items: start;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-soft);
}

.review-card-wide {
    grid-column: 1 / -1;
}

.review-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-2);
}

.review-icon svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.review-card small {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.review-card strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.review-card div > span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.review-card button {
    padding: 4px 7px;
    border: 0;
    background: transparent;
    color: var(--accent-2);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
}

.review-note {
    display: -webkit-box !important;
    max-height: 44px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.45;
}

.privacy-note {
    display: flex;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 10px;
}

.privacy-note svg {
    width: 16px;
    fill: none;
    stroke: var(--success);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.form-navigation {
    display: grid;
    grid-template-columns: 150px minmax(180px, 1fr) 150px;
    gap: 17px;
    padding: 17px 32px 24px;
    align-items: end;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.055));
}

.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition);
}

.button svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

[dir="rtl"] .button > svg {
    transform: scaleX(-1);
}

.button-secondary {
    border: 1px solid var(--border);
    background: var(--surface-soft);
    color: var(--muted-strong);
}

.button-secondary:hover {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text);
    transform: translateY(-1px);
}

.button-primary {
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(135deg, var(--accent-2), var(--accent-dark));
    box-shadow: 0 10px 25px rgba(239,51,64,.23), inset 0 1px 0 rgba(255,255,255,.18);
    color: #fff;
}

.button-primary:hover {
    box-shadow: 0 13px 32px rgba(239,51,64,.32), inset 0 1px 0 rgba(255,255,255,.2);
    transform: translateY(-2px);
}

.button-primary:active,
.button-secondary:active {
    transform: translateY(0) scale(.985);
}

.button[disabled] {
    cursor: wait;
    opacity: .72;
}

.progress-area {
    padding: 0 8px 3px;
}

.progress-copy {
    display: flex;
    margin-bottom: 7px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.progress-copy span {
    color: var(--muted-strong);
    font-size: 10px;
    font-weight: 650;
}

.progress-copy small {
    color: var(--accent-2);
    font-size: 9px;
}

.progress-track {
    position: relative;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--field);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent-2));
    box-shadow: 0 0 13px var(--accent-glow);
    transition: width 450ms cubic-bezier(.2,.8,.2,1);
}

.site-footer {
    position: relative;
    z-index: 2;
    margin: 25px auto 22px;
    color: var(--muted);
    text-align: center;
}

.site-footer p {
    margin: 2px 0;
    font-size: 11px;
}

.footer-heart {
    color: var(--accent-2);
    font-size: 17px;
    vertical-align: -1px;
}

.thank-you-card {
    position: relative;
    max-width: 690px;
    margin: 90px auto 55px;
    padding: 58px 50px 48px;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 50% 0, var(--accent-soft), transparent 45%),
        var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
    backdrop-filter: blur(25px);
    animation: riseIn 700ms ease-out both;
}

.success-orbit {
    position: relative;
    display: grid;
    width: 126px;
    height: 126px;
    margin: 0 auto 28px;
    place-items: center;
}

.success-core {
    position: relative;
    z-index: 2;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-2), var(--accent-dark));
    box-shadow: 0 15px 38px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.24);
}

.success-core svg {
    width: 34px;
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
}

.orbit {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(239,51,64,.30);
    border-radius: 50%;
    animation: orbitSpin 10s linear infinite;
}

.orbit::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 0 12px var(--accent);
}

.orbit-two {
    inset: 22px;
    border-style: dashed;
    animation-direction: reverse;
    animation-duration: 7s;
}

.orbit-two::after {
    top: auto;
    right: 4px;
    bottom: 13px;
    left: auto;
    width: 5px;
    height: 5px;
}

.thank-you-card p {
    max-width: 520px;
    margin: 15px auto 0;
    color: var(--muted-strong);
    font-size: 15px;
}

.reference-pill {
    display: inline-flex;
    margin-top: 24px;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
}

.reference-pill span {
    color: var(--muted);
    font-size: 10px;
}

.reference-pill strong {
    color: var(--accent-2);
    font-size: 12px;
    letter-spacing: .06em;
}

.thank-button {
    width: max-content;
    margin: 24px auto 0;
}

@keyframes riseIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes stageIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .form-stage.active {
    animation-name: stageInRtl;
}

@keyframes stageInRtl {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes menuIn {
    from { opacity: 0; transform: translateY(-5px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes auroraFloat {
    from { transform: translate3d(-2%, -1%, 0) scale(.94); }
    to { transform: translate3d(8%, 4%, 0) scale(1.08); }
}

@keyframes meshMove {
    from { background-position: 0 0; }
    to { background-position: 34px 18px; }
}

@keyframes cubeFloat {
    0%, 100% { transform: translateY(0) rotate(28deg) skew(-4deg); }
    50% { transform: translateY(-24px) rotate(45deg) skew(-2deg); }
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-26px) scale(1.08); }
}

@keyframes ringFloat {
    0%, 100% { transform: translateY(0) rotateX(60deg) rotateZ(-22deg); }
    50% { transform: translateY(-22px) rotateX(55deg) rotateZ(-10deg); }
}

@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
    .shape-cube-one { right: 2%; }
    .shape-cube-two, .shape-orb-one { left: 1%; }
    .shape-ring { left: 2%; opacity: .55; }

    .step-item { width: 88px; }
    .step-label { font-size: 10px; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-head h3 { min-height: auto; }
    .form-navigation { grid-template-columns: 130px minmax(150px, 1fr) 130px; }
}

@media (max-width: 760px) {
    .site-header {
        width: min(calc(100% - 24px), 1220px);
        min-height: 74px;
    }

    .brand-logo { width: 172px; }
    .theme-label { display: none !important; }
    .theme-toggle { width: 44px; justify-content: center; padding: 0; }
    .hero-copy { margin: 34px auto 22px; }
    .hero-copy h1 { font-size: 39px; }

    .survey-card { border-radius: 22px; }
    .stepper { padding: 22px 18px 18px; }
    .step-item { width: 48px; }
    .step-node { width: 37px; height: 37px; }
    .step-label { display: none; }
    .step-line { height: 37px; }
    .step-line::before, .step-line i { top: 18px; inset-inline: -5px; }
    .step-line.completed i { width: calc(100% + 10px); }

    .form-stage { padding: 4px 18px 22px; }
    .stage-heading { padding: 15px; }
    .fields-grid { grid-template-columns: 1fr; }
    .field-full { grid-column: auto; }
    .rating-scale { padding-inline-start: 0; gap: 6px; }
    .scale-face { min-height: 72px; }
    .scale-face small { display: none; }
    .star-rating { padding-inline-start: 0; }
    .chip-grid, .pace-options, .nps-scale, .nps-labels { padding-inline-start: 0; }
    .review-grid { grid-template-columns: 1fr; }
    .review-card-wide { grid-column: auto; }

    .form-navigation {
        grid-template-columns: 1fr 1fr;
        padding: 16px 18px 20px;
    }
    .progress-area { grid-column: 1 / -1; grid-row: 1; }
    .button-secondary { grid-column: 1; }
    .button-primary { grid-column: 2; }

    .shape-cube, .shape-orb, .shape-ring { opacity: .38; }
    .shape-cube-one { top: 13%; }
    .shape-ring { bottom: 2%; }
}

@media (max-width: 520px) {
    .site-header { min-height: 68px; }
    .brand-logo { width: 145px; }
    .header-actions { gap: 7px; }
    .language-switcher { height: 42px; padding-inline: 9px; }
    .theme-toggle { width: 42px; height: 42px; }
    .main-content { width: min(calc(100% - 18px), var(--content-width)); }
    .hero-copy h1 { font-size: 34px; }
    .hero-copy p { font-size: 13px; }

    .stage-icon { width: 39px; height: 39px; min-width: 39px; }
    .stage-heading { gap: 11px; }
    .stage-heading p { font-size: 11px; }
    .question-card { padding: 14px; }
    .question-title h3 { font-size: 12px; }
    .star-option svg { width: 31px; }
    .rating-output { display: none; }
    .rating-scale { grid-template-columns: repeat(5, 1fr); }
    .scale-face { min-height: 58px; }
    .face { width: 27px; height: 27px; }
    .chip-grid { gap: 6px; }
    .choice-chip span { min-height: 34px; padding: 0 11px; font-size: 10px; }
    .pace-options { grid-template-columns: 1fr; }
    .pace-option > span { min-height: 50px; }
    .nps-scale { gap: 4px; }
    .nps-scale label span { min-height: 27px; border-radius: 8px; font-size: 9px; }
    .review-card { grid-template-columns: 32px 1fr auto; padding: 12px; }
    .review-icon { width: 32px; height: 32px; }
    .form-navigation { gap: 10px; }
    .button { min-height: 43px; padding: 0 12px; font-size: 11px; }
    .progress-copy small { display: none; }

    .thank-you-card { margin: 55px auto 35px; padding: 43px 20px 36px; }
    .thank-you-card h1 { font-size: 35px; }
}

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

/* Splash screen and personalized-session additions */
body.splash-lock { overflow: hidden; }
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-content: center;
    gap: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(239, 51, 64, .18), transparent 24%),
        radial-gradient(circle at 48% 48%, rgba(21, 61, 103, .34), transparent 42%),
        #030914;
    color: #fff;
    text-align: center;
    transition: opacity .65s ease, visibility .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="light"] .splash-screen {
    background:
        radial-gradient(circle at 50% 42%, rgba(239, 51, 64, .14), transparent 24%),
        radial-gradient(circle at 48% 48%, rgba(106, 138, 176, .22), transparent 42%),
        #f5f8fc;
    color: #122035;
}
.splash-screen.is-hidden { opacity: 0; visibility: hidden; transform: scale(1.035); }
.splash-screen.is-skip { display: none; }
.splash-grid {
    position: absolute;
    inset: -35%;
    background-image:
        linear-gradient(rgba(239,51,64,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239,51,64,.11) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, #000 0, transparent 58%);
    transform: perspective(700px) rotateX(70deg) translateY(28%);
    animation: splashGrid 7s linear infinite;
}
.splash-logo-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(72vw, 390px);
    min-height: 104px;
    place-items: center;
    animation: splashLogoIn .9s cubic-bezier(.16,.8,.2,1) both;
}
.splash-logo { grid-area: 1 / 1; width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(0,0,0,.34)); }
.splash-logo-on-light { display: none; }
html[data-theme="light"] .splash-logo-on-dark { display: none; }
html[data-theme="light"] .splash-logo-on-light { display: block; }
.splash-logo-glow {
    position: absolute;
    inset: 8% 11%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(239,51,64,.24);
    filter: blur(40px);
    animation: splashGlow 1.5s ease-in-out infinite alternate;
}
.splash-screen p {
    position: relative;
    z-index: 2;
    margin: -8px 0 0;
    color: #aebad0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    animation: splashCopyIn .7s .38s ease both;
}
html[data-theme="light"] .splash-screen p { color: #68778d; }
.splash-progress {
    position: relative;
    z-index: 2;
    width: min(56vw, 260px);
    height: 3px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148,168,194,.18);
}
.splash-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #ef3340, #ff6b75);
    transform: translateX(-100%);
    animation: splashProgress 1.35s .12s cubic-bezier(.2,.8,.2,1) forwards;
}
[dir="rtl"] .splash-progress span { animation-name: splashProgressRtl; }
.splash-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(76vw, 650px);
    aspect-ratio: 1;
    border: 1px solid rgba(239,51,64,.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: splashOrbit 10s linear infinite;
}
.splash-orbit::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 7%;
    width: 13px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ef3340;
    box-shadow: 0 0 28px rgba(239,51,64,.8);
}
.splash-orbit-two { width: min(52vw, 420px); animation-direction: reverse; animation-duration: 7s; opacity: .7; }

.admin-access-link {
    display: inline-flex;
    height: 46px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-soft);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}
.admin-access-link:hover { border-color: rgba(239,51,64,.42); background: var(--accent-soft); color: var(--text); transform: translateY(-1px); }
.admin-access-link svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.session-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.session-hero-meta span { padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.locked-session-note { display: flex; align-items: center; gap: 9px; margin: -2px 0 18px; padding: 11px 13px; border: 1px solid rgba(239,51,64,.18); border-radius: 12px; background: var(--accent-soft); color: var(--muted-strong); font-size: 11px; }
.locked-session-note svg { width: 17px; flex: 0 0 17px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.input-shell input[readonly] { cursor: default; color: var(--muted-strong); background: linear-gradient(90deg, rgba(239,51,64,.035), transparent); }
.custom-question-card { margin-top: 18px; padding: 18px; border: 1px solid rgba(239,51,64,.22); border-radius: 17px; background: linear-gradient(135deg, var(--accent-soft), transparent 70%); }
.custom-question-card > label { color: var(--text); font-size: 13px; }

@keyframes splashGrid { to { background-position: 44px 44px; } }
@keyframes splashLogoIn { from { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes splashCopyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splashProgress { to { transform: translateX(0); } }
@keyframes splashProgressRtl { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes splashGlow { to { transform: scale(1.15); opacity: .68; } }
@keyframes splashOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 760px) {
    .admin-access-link span { display: none; }
    .admin-access-link { width: 44px; padding: 0; justify-content: center; }
    .session-hero-meta { gap: 6px; }
    .session-hero-meta span { font-size: 10px; }
}