:root{
  --primary:#30492c;
  --bg:#eae1e2;
  --text:#0f1a12;
  --muted:rgba(15,26,18,.65);
  --card:rgba(255, 255, 255, 0.671);
  --card-border:rgba(48,73,44,.22);
  --shadow: 0 18px 50px rgba(0,0,0,.12);
  --ring: rgba(48,73,44,.25);
  --radius: 18px;
  --radius-sm: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 700px at 20% -10%, rgba(48,73,44,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(48,73,44,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), #f4efef);
  color:var(--text);
}

/* Automotive landing vibe: soft glass cards + subtle separators */
.page{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  position: relative;
  z-index: 1;
}

.shell{
  width:100%;
  max-width:980px;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}

@media (min-width: 860px){
  .shell{
    grid-template-columns: 1.1fr .9fr;
    align-items:start;
  }
}

.glass{
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
}

.hero{
  padding:22px 18px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-80px;
  right:-120px;
  width:260px;
  height:260px;
  background: radial-gradient(circle at 30% 30%, rgba(48,73,44,.35), transparent 60%);
  transform: rotate(15deg);
  pointer-events:none;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(48,73,44,.18);
}
.badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(48,73,44,.14);
}

h1{
  margin:14px 0 6px;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
}
.subtitle{
  margin:0 0 18px;
  color:var(--muted);
  font-size: 14px;
  line-height:1.45;
}

.ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  appearance:none;
  border:0;
  border-radius: 999px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
}
.btn:active{transform: translateY(1px)}

.btnPrimary{
  background: linear-gradient(180deg, rgba(48,73,44,1), rgba(36,58,32,1));
  color:white;
  box-shadow: 0 16px 35px rgba(48,73,44,.25);
}
.btnPrimary:hover{box-shadow: 0 20px 45px rgba(48,73,44,.32)}

.btnGhost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(48,73,44,.24);
  color: var(--primary);
}
.btnGhost:hover{
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.muted{color:var(--muted)}

.cards{
  padding:18px;
}

.gridProfiles{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 520px){
  .gridProfiles{grid-template-columns: 1fr 1fr}
}

.profileCard{
  padding:14px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(48,73,44,.18);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.profileCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(48,73,44,.28);
}
.profileName{
  font-weight:800;
  margin:0;
}
.profileHint{
  margin:6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Form + quiz layout */
.panel{
  padding:18px;
}
.panelTitle{
  margin:0 0 6px;
  font-size: 18px;
}

.form{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.field{
  display:grid;
  gap:7px;
}
label{
  font-weight:700;
  font-size: 13px;
  color: rgba(15,26,18,.86);
}
input{
  width:100%;
  padding:12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(48,73,44,.22);
  outline: none;
  background: rgba(255,255,255,.10);
  color: var(--text);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
input::placeholder{color: rgba(15,26,18,.45)}
input:focus{
  border-color: rgba(48,73,44,.38);
  box-shadow: 0 0 0 4px var(--ring);
  background: rgba(255,255,255,.14);
}
.error{
  color:#8a1616;
  background: rgba(255, 0, 0, .06);
  border: 1px solid rgba(138,22,22,.22);
  padding:10px 12px;
  border-radius: 12px;
  display:none;
}
.error.show{display:block}

.rowBetween{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Quiz */
.quizTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.progressWrap{
  width: 100%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(48,73,44,.18);
  border-radius: 999px;
  padding:8px;
}
.progressBar{
  height:10px;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(48,73,44,1), rgba(68,116,61,1));
  transition: width .35s ease;
}
.progressText{
  font-size: 13px;
  color: var(--muted);
  margin-top:8px;
}

.fadeIn{
  animation: fadeIn .22s ease both;
}
@keyframes fadeIn{
  from{opacity:0; transform: translateY(6px)}
  to{opacity:1; transform: translateY(0)}
}
.question{
  font-size: 18px;
  line-height:1.35;
  margin: 12px 0 12px;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.answers{
  display:grid;
  gap:10px;
}
.answerBtn{
  text-align:left;
  padding:13px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(48,73,44,.18);
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  color: var(--text);
}
.answerBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(48,73,44,.28);
}
.answerBtn.selected{
  background: rgba(48,73,44,.14);
  border-color: rgba(48,73,44,.44);
  box-shadow: 0 0 0 4px rgba(48,73,44,.14);
}

.navRow{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  flex-wrap:wrap;
}
.btnDisabled{
  opacity:.55;
  cursor:not-allowed;
}

.resultMain{
  padding:20px 18px;
}
.resultTitle{
  margin: 10px 0 8px;
  font-size: 24px;
  font-weight: 900;
}
.resultDesc{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.5;
}
.divider{
  height:1px;
  background: rgba(48,73,44,.20);
  margin: 16px 0;
}
.smallNote{
  font-size: 13px;
  color: var(--muted);
  line-height:1.45;
}

/* ---------------------------
   Quiz Full-Screen (mobile-first)
   --------------------------- */
body.quiz-page{
  min-height:100vh;
}

.quiz-screen{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(14px, 3vw, 28px);
}

.quiz-card{
  width: 95%;
  max-width: 980px;
  display:flex;
  flex-direction:column;
  padding: clamp(18px, 3.5vw, 28px);
  border-radius: 26px;
  padding-top: 100px;
  padding-bottom: 100px;	
}

.quiz-card .quizTop{
  margin-bottom: 10px;
}

.quizHeader{
  text-align:center;
  margin: 6px 0 0;
  font-size: clamp(20px, 3vw, 26px);
}

.quizBody{
  flex: 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

.quiz-card .question{
  text-align:center;
  font-size: clamp(18px, 2.6vw, 26px);
  margin: 6px 0 0;
}

.quiz-card .answers{
  width:100%;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.quiz-card .answerBtn{
  width:100%;
  text-align:center;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.2vw, 18px);
  border-radius: 16px;
  font-size: clamp(15px, 1.6vw, 18px);
}

.quiz-card .divider{
  margin: 14px 0;
}

.quizNavRow{
  margin-top: auto; /* keep buttons at the bottom of the card */
  width:100%;
  gap: 12px;
  flex-direction:column;
}

/* Stack buttons on mobile, make them side-by-side on larger screens */
@media (min-width: 720px){
  .quizNavRow{
    flex-direction:row;
  }
}

.quiz-card .btn{
  padding: clamp(14px, 2vw, 18px) clamp(18px, 3vw, 22px);
  border-radius: 999px;
}

.quiz-card .quizNote{
  margin-top: 10px;
}

/* ---------------------------
   Home Page (minimal screen)
   --------------------------- */
body.home-page{
  background: url("../bg.jpeg") center / cover no-repeat;
  min-height:100vh;
  color: var(--primary);
}

body.quiz-page{
  background-image: url("../Background.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height:100vh;
}

.home-screen{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Bounce wrapper to avoid transform conflicts with button hover scale. */
.bounce-wrap{
  margin-top:80vh; /* centered via flexbox, then shifted down near ~75% height */
  animation: bounce 1.5s ease-in-out infinite;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: #ffffff;
  color: #30492c;
  font-weight: 800;
  border-radius: 40px;
  padding: 40px 70px;
  border: 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  font-size: 100px;
}

.cta-btn:hover{
  transform: scale(1.05);
}

.cta-btn:active{
  transform: scale(0.98);
}

/* Bottom images for form and quiz pages */
.form-bottom-image,
.quiz-bottom-image {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: -1;
  pointer-events: none;
}

.form-bottom-image img,
.quiz-bottom-image img {
  width: 100%;
  height: auto;
  max-height: 30vh;
  object-fit: cover;
  object-position: bottom center;
}

/* Home page CTA image */
.cta-image {
  width: 80%;
  max-width: 90%;
  height: auto;
  cursor: pointer;
}

/* Bounce wrapper for CTA image */
.bounce-wrap {
  margin-top: 80vh;
  animation: bounce 1.5s ease-in-out infinite;
  text-align: center;
}

@media (max-width: 600px) {
  .cta-image {
    width: 70%;
    max-width: 70%;
  }
}

@keyframes bounce{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------------------------
   Form Page (portrait app)
   --------------------------- */
body.form-page{
  background-image: url("../Background.png");
  min-height:100vh;
  margin:0;
  padding:clamp(18px, 4vw, 40px) clamp(12px, 2vw, 14px) clamp(18px, 4vw, 28px);
  display:flex;
  justify-content:flex-start;
  position:relative;
}

/* ---------------------------
   Result Page
   --------------------------- */
body.result-page{
  min-height:100vh;
  position:relative;
  background: transparent !important;
}

.result-bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #30492c;
  z-index: 100;
  display: block;
  cursor: pointer;
}

.result-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.form-screen{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  position:relative;
}

.form-logo{
  width:100%;
  height:auto;
  max-width:520px;
  display:block;
  animation: formFadeUp .5s ease both;
}

.form-logo-wrap{
  width:90%;
  max-width:950px;
  margin:0 auto clamp(18px, 4vw, 28px);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:1;
  position:relative;
}

.form-intro{
  display:none; /* replaced by .form-title + .form-subtitle */
}

.form-card{
  width:92%;
  max-width:950px;
  background:#eae1e2;
  border-radius:28px;
  padding:clamp(30px, 5vw, 60px);
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
  position:relative;
  z-index:1;
  animation: formFadeUp .5s ease both;
  animation-delay:.16s;
}

.form-title{
  font-size:clamp(22px, 2.5vw, 34px);
  font-weight:700;
  color:#30492c;
  text-align:center;
  margin:0 0 10px;
}

.form-subtitle{
  font-size:clamp(14px, 1.4vw, 18px);
  color:#555;
  text-align:center;
  margin:0 0 40px;
  line-height:1.6;
}

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

.form{
  display:flex;
  flex-direction:column;
  gap:0;
}

.form-field{
  width:100%;
  display:flex;
  flex-direction:column;
  margin-bottom:clamp(20px, 4vw, 34px);
}

.form-field:last-of-type{
  margin-bottom:clamp(16px, 3vw, 24px);
}

.form-field input{
  width:100%;
  padding:clamp(14px, 1.5vw, 20px) 0;
  font-size:clamp(15px, 1.4vw, 18px);
  border-radius:0;
  border:none;
  background:transparent;
  color:#0f1a12;
  margin-bottom:0;
  transition: none;
}

.form-field input:focus{
  outline:none;
}

.form-field label{
  font-size:clamp(15px, 1.3vw, 18px);
  margin-bottom:8px;
  color:#30492c;
  font-weight:600;
}

.input-group{
  display:flex;
  align-items:center;
  background:#ffffff;
  border-radius:14px;
  padding:0 15px;
  border:1px solid #ddd;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input-group:focus-within{
  border-color:#30492c;
  box-shadow: 0 0 0 4px rgba(48,73,44,.10);
}

.field-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  color:#30492c;
}

.field-icon svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

.form-field input::placeholder{
  color: rgba(15,26,18,.45);
}

.submit-btn{
  width:100%;
  background:#30492c;
  color:#fff;
  padding:clamp(16px, 2vw, 22px);
  font-size:clamp(16px, 1.6vw, 20px);
  border-radius:50px;
  font-weight:bold;
  border:0;
  cursor:pointer;
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
  margin-top:10px;
}

.submit-btn:hover{
  transform: scale(1.05);
}

.submit-btn:active{
  transform: scale(0.98);
}

/* Form error message spacing (it's outside .form-field) */
#formError{
  margin:0 0 10px;
}

/* Decorative icons behind the card */
.form-decor{
  position:absolute;
  opacity:0.05;
  color:#eae1e2;
  pointer-events:none;
  z-index:0;
}

.decor-car{
  top:-60px;
  right:-70px;
  width:clamp(220px, 24vw, 320px);
  transform: rotate(10deg);
}

.decor-car svg{
  width:100%;
  height:auto;
}

.decor-road{
  bottom:-90px;
  left:-120px;
  width:clamp(260px, 28vw, 420px);
}

.decor-road svg{
  width:100%;
  height:auto;
}