body {
    margin:0;
    padding:0;
    font-family: "Manrope", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: <weight>;
  	font-style: normal;
    background:#000;
}

.screen {
    display:none;
    width:100vw;
    height:100vh;
    background-size:cover; /* ΟΠΩΣ ΖΗΤΗΣΕΣ */
    background-position:center;
    padding:20px;
    box-sizing:border-box;
    position:absolute;
    top:0; left:0;
    opacity:0;
    transition:opacity 0.7s ease;
}

.screen.active {
    display:block;
    opacity:1;
}

.content {
    max-width: 100%;
}

.content h1 {
	font-size: 5.5rem;
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
	text-align: center;
	height: 80%;
}

.content p {
	font-size: 2.8rem;
}

.content .start-text h3 {
	font-size: 3.8rem;
	
}

.questions h2 {
	font-size: 2.7rem;
}

.questions .center  {
	margin-bottom: 100px;
}

.questions .center h2 {
	text-align: center;
}

.questions p {
	font-size: 2.2rem;
}

.white {
	color: #ffffff;
	display: flex;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.black {
	color: #000000;
	display: flex;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Buttons */
.round-btn {
    width: 120px;
    height: 120px;
    background: #b67a5c; /* το καφέ χρώμα */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.2s ease;
	margin: 0 auto;
}

.questions .round-btn {
	margin-top: 40%;
}

.round-btn img {
    width: 56px;
    height: 56px;
}

.round-btn:active {
    transform: scale(0.92);
}

/* Options */
.options {
    margin-top:25px;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.options .bold {
	font-size: 30px;
	font-weight: 600;
}

.option {
    display:flex;
    align-items:center;
    gap:12px;
    background:#ffffff22;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
	font-size: 30px;
	border: 1px solid #000000;
}

.borderless .option {
	border: none;
	gap:20px;
}

/* Hide default radio */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid #000;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: all 0.2s ease;
    margin: 0;
}

/* Inner dot */
input[type="radio"]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #b67a5c; /* καφέ χρώμα */
    border-radius: 50%;
    transition: transform 0.2s ease;
}

/* When checked */
input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

/* ----------------------------- */
/* LUXURY RESULT SCREEN */
/* ----------------------------- */

.luxury-screen {
    position: relative;
    padding: 40px 30px;
    background-size: cover;
    background-position: center;
    overflow-y: auto;
}

/* Titles */
.luxury-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 20px;
	text-align: center;
}

.luxury-subtitle {
    font-size: 2.6rem;
    margin: 20px 0 50px 0;
	text-align: center;
}

/* ----------------------------- */
/* INSIGHT BOXES (The Orange-Glow Cards) */
/* ----------------------------- */

.insight-box-container {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.insight-box {
    border-radius: 68px;
    padding: 35px 35px;
    margin: 40px 0;
    background: #000;
    box-shadow: 
        0 0 40px rgba(182,122,92,0.8),
        0 0 70px rgba(182,122,92,0.6);
	width: 80%;
}

/* Inside text */
.insight-box h3 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    font-weight: 700;
    text-align: center;
}

.insight-box p {
    font-size: 2.2rem;
    line-height: 1.4;
    text-align: center;
}


/* ----------------------------- */
/* Luxury Next Button placement */
/* ----------------------------- */

.luxury-next {
    margin-top: 40px;
}


/* -------------------------------------- */
/* WELLNESS RESULT SCREEN */
/* -------------------------------------- */

.wellness-screen {
    position: relative;
    padding: 40px 30px;
    background-size: cover;
    background-position: center;
    overflow-y: auto;
}

.wellness-container {
    text-align: center;
    margin-bottom: 30px;
}

.wellness-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 20px;
}

.wellness-subtitle {
    font-size: 2.6rem;
    margin: 20px 0 50px 0;
}

/* The peach/beige insight boxes */
.wellness-box {
    background: #e8c39e; /* soft peach/terracotta tone */
    color: #000;
    border-radius: 68px;
    padding: 35px 35px;
    margin: 40px 0;
    width: 80%;

    /* subtle soft wellness shadow */
    box-shadow: 
        0 6px 20px 0px rgba(0, 0, 0, 0.5), 
		0 12px 35px rgba(0, 0, 0, 0.5)
}

/* Inside text stays consistent with luxury */
.wellness-box h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-align: center;
}

.wellness-box p {
    font-size: 2.2rem;
    text-align: center;
    line-height: 1.4;
}

/* Next button placement */
.wellness-next {
    margin-top: 40px;
}
	
/* -------------------------------------- */
/* FAMILY RESULT SCREEN */
/* -------------------------------------- */

.family-screen {
    position: relative;
    padding: 40px 30px;
    background-size: cover;
    background-position: center;
    overflow-y: auto;
}

.brown {
    color: #6E441F;
    display: flex;
    height: 90%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Titles */
.family-container {
    text-align: center;
    margin-bottom: 30px;
}

.family-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 20px;
}

.family-subtitle {
    font-size: 2.4rem;
    margin: 20px 0 50px 0;
    text-align: center;
}

/* -------------------------------------- */
/* FAMILY INSIGHT BOXES */
/* -------------------------------------- */

.family-box {
    background: transparent; /* light warm beige (όπως screenshot) */
    color: #6E441F;
    border-radius: 0px; 
    padding: 30px 35px;
    margin: 40px 0;
    width: 80%;

    box-shadow:
        0px 6px 20px rgba(0,0,0,0.15), 
        0px 12px 25px rgba(0,0,0,0.10); /* soft shadow όπως το screenshot */
}

/* Text inside */
.family-box h3 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-align: center;
}

.family-box p {
    font-size: 2.1rem;
    line-height: 1.4;
    text-align: center;
}

/* Button placement */
.family-next {
    margin-top: 40px;
}


/* -------------------------------------- */
/* NOMAD RESULT SCREEN */
/* -------------------------------------- */

.nomad-screen {
    position: relative;
    padding: 40px 30px;
    background-size: cover;
    background-position: center;
    overflow-y: auto;
}

.nomad-container {
    text-align: center;
    margin-bottom: 30px;
}

.nomad-title {
    font-size: 4rem;
    font-weight: 700;
    margin-top: 20px;
}

.nomad-subtitle {
    font-size: 2.6rem;
    margin: 20px 0 50px 0;
    text-align: center;
}

/* -------------------------------------- */
/* NOMAD INSIGHT BOXES */
/* -------------------------------------- */

.nomad-box {
    width: 80%;
    padding: 40px 40px;
    margin: 40px 0;
    border-radius: 68px;

    background: #000;
    color: #fff;

    /* BLUE GLOW */
    box-shadow:
        0 0 25px rgba(0, 153, 255, 0.6),
        0 0 60px rgba(0, 153, 255, 0.4),
        0 0 90px rgba(0, 153, 255, 0.25);
}

/* Text inside */
.nomad-box h3 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
    text-align: center;
    color: #fff;
}

.nomad-box p {
    font-size: 2.2rem;
    line-height: 1.4;
    text-align: center;
    color: #fff;
}

/* BUTTON placement */
.nomad-next {
    margin-top: 40px;
}

/* -------------------------------------- */
/* FORM SCREEN */
/* -------------------------------------- */

/* Wrapping container */
.form-wrapper {
    text-align: center;
    color: #000;
    padding: 40px 30px;
    display: flex;
    justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Title */
.form-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Subtitle */
.form-subtitle {
    font-size: 2.3rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* Small text */
.form-small {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 100px;
    opacity: 0.8;
}

form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Form inputs */
.lead-form input {
    padding: 20px;
    margin-bottom: 18px;
    font-size: 2.1rem;
    border-radius: 14px;
    border: 2px solid #c9c9c9;
    outline: none;
    background: #ffffffdd;
}

.lead-form input:focus {
    border-color: #b67a5c;
}

/* Send button */
.form-btn {
    width: 40%;
    background: #b67a5c;
    color: #fff;
    font-size: 2.4rem;
    padding: 18px 0;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
	align-self: center;
}

.form-btn:active {
    transform: scale(0.95);
}

/* Success icon (bottom middle) */
.success-icon {
    width: 120px;
    margin: 40px auto 0 auto;
    display: block;
    opacity: 0; /* hidden by default */
    transition: opacity 0.5s ease;
}

/* -------------------------------------- */
/* Thank You SCREEN */
/* -------------------------------------- */

#screenThankYou .centered {
    justify-content: center;
}

#screenThankYou .white-text {
	color: #000000;
}

#screenThankYou h2.white-text {
	font-size: 3.8rem;
}

#screenThankYou p.white-text {
	font-size: 2.4rem;
}