html{

    scroll-behavior:smooth;

}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */
body {
    font-family: 'Inter', sans-serif;
    background-color: #FAF9F7;
    color: #555555;
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 25px 60px;

    background: white;
}

/* Logo */
.logo {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
}

/* Menu */
ul {
    list-style: none;

    display: flex;

    gap: 40px;
}

li {
    cursor: pointer;
}
/* HERO */

.hero{

    max-width:1200px;

    margin:auto;

    padding:120px 60px;

}

.hero-content{

    max-width:650px;

}

.hero h1{

    font-family:'Poppins',sans-serif;

    font-size:68px;

    line-height:1.05;

    margin-bottom:30px;

}

.hero span{

    color:#C75A1B;

}

.hero p{

    font-size:22px;

    line-height:1.6;

    color:#666;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:20px;
}

/* ==========================================
   HERO TRUST BADGES
========================================== */

.hero-features{

    margin-top:35px;

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.hero-features span{

    background:#ffffff;

    color:#444;

    padding:10px 18px;

    border-radius:50px;

    font-size:0.9rem;

    font-weight:600;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.primary{

    background:#2F8F5B;

    color:white;

    border:none;

    padding:18px 36px;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

}

.secondary{

    background:white;

    border:2px solid #222;

    color:#222;

    padding:18px 36px;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

}

/* ==========================================
   HOW IT WORKS
========================================== */

.how-it-works {
    background: white;
    padding: 100px 10%;
    text-align: center;
}

.how-it-works h2 {
    font-size: 2.6rem;
    color: #222;
    margin-bottom: 70px;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.step {
    background: white;
    width: 300px;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.number {
    width: 65px;
    height: 65px;
    margin: auto;
    margin-bottom: 25px;

    background: #d76a1c;
    color: white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5rem;
    font-weight: bold;
}

.step h3 {
    margin-bottom: 15px;
    color: #222;
}

.step p {
    color: #666;
    line-height: 1.7;
}

/* ==========================================
   COACH SECTION
========================================== */

.coach{

    padding:120px 10%;

    background:#fafafa;

}

.coach-container{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:80px;

    flex-wrap:wrap;

}

.coach-image img{

    width:320px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.coach-text{

    max-width:600px;

}

.coach-text h2{

    color:#d76a1c;

    margin-bottom:10px;

}

.coach-text h3{

    font-size:2rem;

    margin-bottom:25px;

}

.coach-text p{

    line-height:1.9;

    color:#555;

    margin-bottom:18px;

}

/* ==========================================
   COACH PREVIEW
========================================== */

.coach-preview{

    padding:100px 10%;

    background:#fafafa;

    text-align:center;

}

.coach-preview-content{

    max-width:700px;

    margin:auto;

}

.coach-preview h2{

    font-size:2.2rem;

    margin-bottom:20px;

}

.coach-preview p{

    color:#666;

    line-height:1.8;

    font-size:1.1rem;

    margin-bottom:35px;

}

.secondary-button{

    display:inline-block;

    padding:14px 28px;

    border:2px solid #d76a1c;

    color:#d76a1c;

    border-radius:12px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.secondary-button:hover{

    background:#d76a1c;

    color:white;

}

/* ==========================================
   ABOUT PAGE
========================================== */

.about-hero{

    padding:120px 10%;

}

.about-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:80px;

    flex-wrap:wrap;

}

.about-text{

    max-width:600px;

}

.about-text h1{

    font-size:3rem;

    margin-bottom:30px;

}

.about-text p{

    color:#555;

    line-height:1.9;

    margin-bottom:22px;

    font-size:1.1rem;

}

.about-image img{

    width:300px;

    border-radius:20px;

    object-fit:cover;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/* ==========================================
   TIMELINE
========================================== */

.timeline{

    padding:120px 10%;

    background:#f8f8f8;

    position:relative;

}

.timeline h2{

    text-align:center;

    font-size:2.6rem;

    margin-bottom:80px;

}

.timeline-item{

    display:flex;

    align-items:flex-start;

    gap:30px;

    max-width:900px;

    margin:0 auto 50px;

    position:relative;

}

.timeline-icon{

    width:70px;

    height:70px;

    background:#d76a1c;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    flex-shrink:0;

}

.timeline-item:not(:last-child)::after{

    content:"";

    position:absolute;

    left:34px;

    top:70px;

    width:4px;

    height:90px;

    background:#d76a1c;

    border-radius:4px;

}

.timeline-content h3{

    margin-bottom:15px;

    color:#222;

}

.timeline-content p{

    color:#555;

    line-height:1.8;

}

/* ==========================================
   MY GEAR
========================================== */

.my-gear{

    padding:100px 10%;

    background:white;

}

.my-gear h2{

    text-align:center;

    font-size:2.3rem;

    margin-bottom:60px;

}

.my-gear .story-content{

    max-width:900px;

    margin:auto;

}

.my-gear p{

    background:#fafafa;

    padding:28px;

    border-radius:18px;

    margin-bottom:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    font-size:1.05rem;

    line-height:1.8;

    transition:.3s;

}

.my-gear p:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

/* ==========================================
   QUOTE
========================================== */

.quote{

    padding:120px 10%;

    background:#d76a1c;

    color:white;

    text-align:center;

}

.quote blockquote{

    font-size:2rem;

    font-weight:300;

    line-height:1.6;

    max-width:900px;

    margin:auto;

}

.quote p{

    margin-top:35px;

    font-size:1rem;

    opacity:.9;

}

/* ==========================================
   COMING SOON
========================================== */

.coming-soon{

    padding:120px 10%;

    text-align:center;

}

.coming-soon h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

.coming-soon p{

    color:#666;

    font-size:1.1rem;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* ==========================
   QUESTIONNAIRE MODAL
========================== */

.questionnaire {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(8px);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    visibility: hidden;

    transition: .3s ease;

    z-index: 9999;

}

.questionnaire.show{

    opacity:1;

    visibility:visible;

}

.questionnaire-card {

    background: white;

    width: min(760px, 92%);

    max-height: 90vh;

    min-height: 680px;

    overflow-y: auto;

    border-radius: 20px;

    padding: 40px;

    position: relative;

    box-shadow: 0 20px 60px rgba(0,0,0,.25);

}

@keyframes popup{

    from{

        transform:translateY(30px) scale(.95);

        opacity:0;

    }

    to{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}

.close-btn{

    position:absolute;

    right:20px;

    top:20px;

    border:none;

    background:none;

    font-size:28px;

    cursor:pointer;

}

.answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.answers.two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.answer-btn {
    padding: 14px 18px;
    border-radius: 12px;
    border: 2px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 18px;
    transition: .25s;
}

.answer-btn:hover{

    border-color:#2e8b57;

    transform:translateY(-2px);

}

.next-btn{

    width:100%;

}

.answer-btn{

display:block;

width:100%;

padding:18px;

margin:15px 0;

font-size:18px;

border-radius:12px;

border:1px solid #ddd;

background:white;

cursor:pointer;

transition:.25s;

}

.answer-btn:hover{

background:#1d7c57;

color:white;

border-color:#1d7c57;

}

.question-counter {
    color: #d76a1c;
    font-weight: 700;
    margin-bottom: 15px;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #eee;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #2F8F5B;
    border-radius: 20px;
    transition: width 0.3s ease;
}

.answer-btn.selected {
    background: #2F8F5B;
    color: white;
    border-color: #2F8F5B;
}

.loading-box {
    text-align: center;
    padding: 30px 0;
}

.spinner {
    width: 45px;
    height: 45px;
    border: 5px solid #eee;
    border-top: 5px solid #2F8F5B;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

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

.result-card {
    background: #FAF9F7;
    padding: 8px;
    border-radius: 8px;
    line-height: 1.7;
}

.coach-note {
    margin-top: 20px;
    color: #555;
}

.questionnaire-card {
    width:850px;
    max-height: 90vh;
    overflow-y: auto;
}

.compact-result {

    padding: 8px;

    margin-bottom: 8px;

    border-radius: 8px;

    border: 1px solid #e8e8e8;

    background: #FAF9F7;

    transition: .25s;

}

.compact-result:hover{

    transform:translateY(-2px);

    border-color:#2F8F5B;

}

/* Modern Scrollbar */

.questionnaire-card::-webkit-scrollbar {

    width: 18px;

}

.questionnaire-card::-webkit-scrollbar-track {

    background: #e8e8e8;

    border-radius: 50px;

}

.questionnaire-card::-webkit-scrollbar-thumb {

    background: linear-gradient(
        to bottom,
        #39a96b,
        #2F8F5B
    );

    border-radius: 50px;

    border: 3px solid #e8e8e8;

}

.questionnaire-card::-webkit-scrollbar-thumb:hover {

    background: #24774a;

}

.score-badge{

    display:inline-block;

    background:#2F8F5B;

    color:white;

    padding:8px 18px;

    border-radius:999px;

    font-weight:700;

    margin-bottom:14px;

}

.two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
}

.compact-result {
    padding: 16px;
    margin-bottom: 0;
    border-radius: 16px;
    border: 1px solid #e6e6e6;
    background: #FAF9F7;
}

.result-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.result-rank{

    display:inline-block;

    padding:5px 12px;

    border-radius:999px;

    background:#2F8F5B;

    color:white;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.compact-result h4 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #222;
}

.result-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.result-meta span {
    background: white;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #555;
}

.compact-result p {
    font-size: 0.9rem;
    line-height: 1.45;
    margin-bottom: 0;
}

.score-badge {
    background: #2F8F5B;
    color: white;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.compact-result.best-card {
    border: 2px solid #2F8F5B;
    box-shadow: 0 10px 32px rgba(47,143,91,.22);
    transform: scale(1.03);
    background: #f7fff9;
}

.result-rank {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #2F8F5B;
    color: white;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.star-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0;
}

.stars-row {
    color: #B85C00;
    font-size: 1rem;
    letter-spacing: 1px;
    line-height: 1;
}

.overall-title {
    color: #B85C00;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Smaller layout only on the recommendation page */
.results-mode {
    transform: scale(0.95);
    transform-origin: top center;
}

/* ===== Smaller recommendation page ===== */

.results-mode .result-card{
    padding:12px;
    border-radius:14px;
}

.results-mode .result-card h4{
    font-size:1rem;
    margin:6px 0;
}

.results-mode .result-card p{
    font-size:.82rem;
    line-height:1.25;
    margin:8px 0;
}

.results-mode .result-meta{
    font-size:.75rem;
    gap:4px;
    margin:8px 0;
}

.results-mode .match-reasons{
    margin-top:6px;
    padding-left:16px;
}

.results-mode .match-reasons li{
    font-size:.78rem;
    margin:2px 0;
}

.results-mode .stars-row{
    font-size:.9rem;
}

.results-mode .overall-title{
    font-size:.72rem;
}

.results-mode .score-badge{
    font-size:.75rem;
    padding:4px 8px;
}

.results-mode .result-rank{
    font-size:.68rem;
    padding:4px 8px;
}

.results-mode .result-topline{
    margin-bottom:6px;
}

.results-mode .two-columns{
    gap:10px;
}

.brand-page #answerButtons {
    zoom: 88%;
}

.results-mode #answerButtons {
    zoom: 92%;
}

.brand-page #answerButtons {
    zoom: 88%;
}

.results-mode #answerButtons {
    zoom: 92%;
}

/* =========================
   COMPARE MODAL
========================= */

.compare-card {
    max-width: 760px;
    width: 92%;
}

#compareContent {
    gap: 14px;
}

.compare-select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1f2933;
    cursor: pointer;
}

.compare-select:focus {
    outline: none;
    border-color: #7bbf6a;
    box-shadow: 0 0 0 3px rgba(123, 191, 106, 0.18);
}

.compare-results {
    grid-column: 1 / -1;
    margin-top: 8px;
    width: 100%;
}

.compare-table {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
}

.compare-row:last-child {
    border-bottom: none;
}

.compare-row span {
    padding: 12px 14px;
    font-size: 0.88rem;
    color: #374151;
    border-right: 1px solid #e5e7eb;
}

.compare-row span:last-child {
    border-right: none;
}

.compare-header {
    background: #f7f7f2;
    font-weight: 700;
}

.compare-header span {
    color: #1f2933;
}

#compareNow,
#backToGear {
    margin-top: 4px;
}

#backToGear {
    background: #f7f7f2;
    color: #1f2933;
}

/* =========================
   PREMIUM COMPARE RESULTS
========================= */

.compare-summary {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
}

.compare-product-summary {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    text-align: left;
}

.compare-product-summary h4 {
    margin: 8px 0 12px;
    color: #1f2933;
    font-size: 1.1rem;
}

.compare-product-summary p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

.compare-winner {
    border-color: #2f9461;
    box-shadow: 0 10px 25px rgba(47, 148, 97, 0.14);
}

.compare-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #2f9461;
    text-transform: uppercase;
}

.compare-score {
    font-size: 2rem;
    font-weight: 800;
    color: #2f9461;
    margin-bottom: 8px;
}

.match-reason-box {
    grid-column: 1 / -1;
    margin-top: 14px;
    padding: 20px;
    border-radius: 18px;
    background: #f7f7f2;
    text-align: left;
}

.match-reason-box h4 {
    margin: 0 0 8px;
    color: #1f2933;
}

.match-reason-box p {
    margin: 0;
    line-height: 1.6;
    color: #555;
}

.feature-winner {
    color: #2f9461;
    font-weight: 800;
}

@media (max-width: 700px) {
    .compare-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================
   REGION / LOCATION BUTTON
========================= */

.region-button {
    border: none;
    background: #f7f7f2;
    color: #1f2933;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

.region-button:hover {
    background: #e9f3e5;
    color: #2f9461;
}

.region-card {
    max-width: 520px;
}

.answer-title {
    display: block;
    font-weight: 700;
}

.answer-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    opacity: 0.7;
    font-weight: 500;
}

.buy-now-btn {
    margin-top: 12px;
    align-self: flex-end;
    border: none;
    background: #2F8F5B;
    color: white;
    padding: 9px 15px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.buy-now-btn:hover {
    transform: translateY(-2px);
    background: #26764b;
}

.buy-now-btn span {
    display: inline-block;
    transition: 0.2s ease;
}

.buy-now-btn:hover span {
    transform: translateX(4px);
}

.retailer-card {
    max-width: 520px;
}

.retailer-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 42px;
}

.retailer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 64px;
    padding: 14px 16px;

    border: 1px solid #e4e7e5;
    border-radius: 14px;

    background: #ffffff;
    color: #1f2522;
    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.retailer-link:hover {
    transform: translateY(-2px);

    border-color: #2f8f5b;
    background: #f6fbf8;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
}

.retailer-link > span:first-child {
    font-weight: 700;
    font-size: 0.98rem;
}

.retailer-link > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    padding: 7px 11px;

    border-radius: 999px;
    background: #eef8f2;

    color: #2f8f5b;
    font-size: 0.86rem;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.retailer-link:hover > span:last-child {
    transform: translateX(3px);
    background: #e2f3e9;
}

.region-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
}

.region-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#777;
}

.region-button{
    font-size:15px;
}

/* =========================
   HEADER ALIGNMENT
========================= */

nav ul {
    align-items: center;
}

/* Lower the normal menu links slightly */
nav ul > li:not(.region-nav-item) {
    transform: translateY(1px);
}

/* Create more separation before Region */
.region-nav-item {
    margin-left: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1px;
}

/* Small centered label */
.region-label {
    margin: 0;

    font-size: 11px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    text-align: center;
    color: #666;
}

/* Cleaner region button */
.region-button {
    margin: 0;

    border: none;
    background: transparent;
    box-shadow: none;

    padding: 5px 8px;

    font: inherit;
    font-weight: 600;
    color: inherit;

    cursor: pointer;
    white-space: nowrap;

    border-radius: 8px;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.region-button:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.region-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.region-label{
    color:#999;
    font-size:10px;
    letter-spacing:.12em;
}

/* =========================
   SITE FOOTER
========================= */

.site-footer {
    width: 100%;
    padding: 34px 6%;
    background: #171b19;
    color: #ffffff;
    box-sizing: border-box;
}

.footer-inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.footer-brand strong {
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
}

.footer-brand span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.84rem;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    display: inline-block;
    padding: 4px 0;

    color: rgba(255, 255, 255, 0.8);
    background: transparent;

    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;

    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-copyright {
    margin: 0;
    justify-self: end;

    color: rgba(255, 255, 255, 0.62);
    font-size: 0.84rem;
    white-space: nowrap;
}

@media (max-width: 850px) {
    .footer-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-brand {
        align-items: center;
    }

    .footer-copyright {
        justify-self: center;
    }
}