.quiz-loader-popup {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.65);
 z-index: 999;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 transition: opacity 0.2s;
}

.quiz-loader-popup.active {
 display: flex;
}

.contact_form {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 max-width: 340px;
 margin-left: auto;
 margin-right: auto;
 gap: 12px;
}

.quiz .answer,
.form_block .submit {
 display: inline-block;
 margin: 8px 10px 0 0;
 padding: 12px 24px;
 font-size: 17px;
 font-weight: 700;
 border: none;
 border-radius: 12px;
 background: linear-gradient(90deg, #ff1e56, #ff8a00, #ffd166);
 color: #000;
 cursor: pointer;
 transition: background 0.2s, transform 0.1s;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.quiz .answer:active,
.form_block .submit:active {
 transform: scale(0.97);
 background: linear-gradient(90deg, #ffd166, #ff8a00, #ff1e56);
}

.quiz .answers {
 margin-top: 12px;
 display: flex;
 flex-direction: column;
 max-width: 400px;
 margin-left: auto;
 margin-right: auto;
}

.form_block .form-input {
 display: block;
 width: 100%;
 max-width: 340px;
 /*margin: 12px auto;*/
 padding: 12px 16px;
 border-radius: 8px;
 border: 1px solid #333;
 background: #181818;
 color: #fff;
 font-size: 16px;
}

.form_block .form-input:focus {
 outline: 2px solid var(--accent);
 border-color: var(--accent);
}

.form_block {
 padding: 5px;
 background: #0009;
 box-shadow: 0px 0px 30px 0 #000;
}

.quiz_block,
.form_block,
.cta_block {
 display: none;
}

.quiz_block.active,
.form_block.active,
.cta_block.active {
 display: block;
}

:root {
 --accent: #ffd166;
 --header-h: 60px;
}

* {
 box-sizing: border-box;
}

html,
body {
 margin: 0;
 padding: 0;
 background: #000;
 color: #fff;
 font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
  "Roboto", system-ui, "Segoe UI", Arial, sans-serif;
}

body {
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}

.header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: var(--header-h);
 z-index: 60;
 display: grid;
 place-items: center;
 background: rgba(12, 12, 12, 0.55);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -28px;
 height: 28px;
 background: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0.6) 0%,
  rgba(0, 0, 0, 0) 100%
 );
 pointer-events: none;
}

.logo {
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 opacity: 0.98;
}

.spacer-top {
 height: var(--header-h);
}

.hero {
 position: relative;
 height: 62svh;
 min-height: 420px;
 max-height: 740px;
 overflow: hidden;
}

.photo {
 position: absolute;
 inset: 0;
 background-image: url(../img/back.png);
 background-size: cover;
 background-repeat: no-repeat;
 background-position: top center;
 filter: brightness(0.98) saturate(1.05);
 z-index: 1;
}

.topfade {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 88px;
 background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
 z-index: 2;
 pointer-events: none;
}

.botfade {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 52%;
 background: linear-gradient(
  180deg,
  rgba(0, 0, 0, 0) 0%,
  rgba(0, 0, 0, 0.55) 60%,
  #000 100%
 );
 z-index: 2;
 pointer-events: none;
}

.floaters {
 position: absolute;
 inset: 0;
 z-index: 5;
}

.floater {
 position: absolute;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 font-size: 26px;
 line-height: 1;
 background: radial-gradient(
  circle at 50% 50%,
  rgba(255, 220, 120, 0.95),
  rgba(255, 180, 0, 0.65),
  rgba(255, 180, 0, 0) 72%
 );
 box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
 will-change: transform;
}

.floater:active {
 transform: scale(0.98);
}

.content {
 position: relative;
 z-index: 10;
 padding: 14px 20px 28px;
 text-align: center;
 margin-top: -18svh;
}

h1 {
 margin: 0;
 font-weight: 900;
 letter-spacing: 0.02em;
 line-height: 1.12;
 text-transform: uppercase;
 font-size: clamp(22px, 6vw, 36px);
 text-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}

h1 .accent {
 color: var(--accent);
}

.sub {
 margin: 10px auto 0;
 max-width: 30ch;
 color: rgba(255, 255, 255, 0.92);
 font-size: clamp(14px, 3.8vw, 17px);
}

.cta-wrap {
 margin-top: 12px;
 display: grid;
 place-items: center;
}

.cta {
 position: relative;
 width: 100%;
 max-width: 420px;
 border: none;
 border-radius: 18px;
 padding: 14px 18px;
 font-weight: 800;
 font-size: 18px;
 color: #000;
 background: linear-gradient(90deg, #ff1e56, #ff8a00, #ffd166);
 cursor: pointer;
 overflow: hidden;
 animation: pulse 3.5s ease-in-out infinite;
}

.cta:active {
 transform: translateY(1px) scale(0.99);
}

.cta::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
  120deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0.35) 35%,
  rgba(255, 255, 255, 0) 70%
 );
 transform: translateX(-120%);
 animation: shine 2.8s ease-in-out infinite;
}

@keyframes shine {
 0% {
  transform: translateX(-120%);
 }

 55% {
  transform: translateX(120%);
 }

 100% {
  transform: translateX(120%);
 }
}

@keyframes pulse {
 0%,
 100% {
  box-shadow: 0 10px 35px rgba(255, 94, 0, 0.34);
 }

 50% {
  box-shadow: 0 16px 48px rgba(255, 160, 0, 0.52);
 }
}

.progressbar-container {
 width: 100%;
 margin-bottom: 18px;
 margin-top: 8px;
}

.progressbar-bg {
 width: 100%;
 height: 8px;
 background: #222;
 border-radius: 6px;
 overflow: hidden;
}

.progressbar-fill {
 height: 100%;
 width: 0%;
 background: linear-gradient(90deg, #ff1e56, #ff8a00, #ffd166);
 transition: width 0.5s cubic-bezier(0.4, 1.4, 0.6, 1);
}

.quiz-loader {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 min-height: 120px;
 margin-top: 24px;
}

.quiz-loader .loader {
 border: 6px solid #f3f3f3;
 border-top: 6px solid #ff8a00;
 border-radius: 50%;
 width: 48px;
 height: 48px;
 animation: spin 1s linear infinite;
 margin-bottom: 12px;
}

.quiz-loader .loader-text {
 color: #fff;
 font-size: 18px;
 font-weight: 600;
}

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}