/* --- Global Variables & Custom Properties --- */
:root {
    --primary-orange: #FC850F;
    --dark-text: #3D2D1E;
    --white: #FFEBD7;
    --cream-bg: #FFEBD7;
    --btn-hover: #d9620f;
    --font-heading: 'Helvetica Compressed', 'Roboto Condensed', sans-serif;
    --font-body: 'Helvetica', sans-serif;

  --swirl1-right: -5%;
  --swirl1-top: 98%;
  --swirl1-width: 55%;
  --swirl1-scale: 1.05;

  --swirl2-left: 0%;
  --swirl2-top: 120%;
  --swirl2-width: 30%;
}

/* Load Helvetica Compressed if available locally (place fonts in assets/fonts/) */
@font-face {
    font-family: 'Helvetica Compressed';
    src: url('../assets/fonts/HelveticaCompressed.woff2') format('woff2'),
         url('../assets/fonts/HelveticaCompressed.woff') format('woff');
    font-weight: 800 800;
    font-style: normal;
    font-display: swap;
}

/* Prevent horizontal scrolling caused by large positioned SVGs */
html {
    overflow-x: hidden;
    height: 100%;
    overscroll-behavior-y: contain;
}

body {
    font-family: var(--font-body);
    background-color: var(--cream-bg);
    color: var(--white);
    overflow-x: hidden;
    height: 100%;
    overscroll-behavior-y: contain;
}

/* --- Navigation Bar --- */
.navbar {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* Keep the nav menu at a consistent size */
    width: 300px;
    min-width: 300px;
    max-width: 300px;
}

.nav-container {
    background-color: #FFEBD7;
    padding: 8px 12px 8px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Small-screen fallback: allow the navbar to shrink slightly on very narrow devices */
@media (max-width: 360px) {
    .navbar {
        width: 90%;
        min-width: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: conic-gradient(#40c057 33%, #ff922b 33% 66%, #4dabf7 66%);
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-login {
    text-decoration: none;
    color: var(--dark-text);
    font-size: 0.95rem;
}

.btn-signup {
    text-decoration: none;
    color: var(--white);
    background-color: #e67e22;
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

.btn-signup:hover {
    background-color: var(--btn-hover);
}

/* --- Hero Section & The Big Oval Base --- */
.hero-section {
    background-color: var(--primary-orange);
    /* default: scale with viewport */
    min-height: 85vh;
    position: relative;
    /* prevent absolutely positioned swirls from increasing page height */
    overflow: hidden;
    padding: 40px 4% 80px 4%;
    display: flex;
    align-items: center;
    z-index: 1;
}

.hero-background-shape {
    position: absolute;
    bottom: 0.1;
    left: 0;
    width: 100%;
    height: auto;
    line-height: 0;
    z-index: -1; /* Pushes it perfectly behind your text and images */
    pointer-events: none; /* Prevents it from blocking clicks on buttons */
    color:#FF9B39;
}

.hero-background-shape svg {
    width: 100%;
    height: auto; /* Scales proportionally across desktops and laptops */
    display: block;
}

/* The Magic Masking Oval: This cuts the bottom edge into a beautiful smooth round curve */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -70vw; /* Positioned way low so only the top of the oval peaks out */
    left: -30vw;
    width: 160vw;
    height: 80vw;
    background-color: var(--cream-bg);
    border-radius: 50%; /* Generates the perfect fluid oval shape */
    z-index: -1; /* Ensures it sits underneath the text and image layers */
}

/* --- Hero Interior Content Layout --- */
.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

/* --- Left Column UI --- */
.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 24px;
}

.online-badge .dot {
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    border-radius: 50%;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 5.5vw, 5.5rem);
    line-height: 0.95;
    color: var(--dark-text);
    margin-bottom: 24px;
}

.text-white {
    color: var(--white);
}

.hero-description {
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.6;
    max-width: 600px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
}

.btn-cta {
    display: inline-block;
    text-decoration: none;
    color: var(--dark-text);
    background-color: var(--cream-bg);
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s, background-color 0.2s;
}

.btn-cta:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
}

/* --- Right Column Images & Floating Lines --- */
.hero-image-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45vw; /* Takes up the right portion of the screen */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 2; /* Sits over the background shape, under navigation */
    pointer-events: none; /* Allows user to click things behind the image transparent space if needed */
}

.hero-image {
    height: 100vh; /* Adjust this percentage to control how tall the person is in the frame */
    max-height: 100%;
    width: auto;
    z-index: 1;
    object-fit: contain; /* Keeps image proportions pristine */
    object-position: bottom right; /* Forces alignment directly to the bottom right corner */
    transform: translateY(50px);
}

/* Subtle graphic strokes matching the prototype design shapes */
.graphic-line {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    pointer-events: none;
}

/* --- Responsive Layout Breaks --- */
@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-description {
        margin: 0 auto 40px auto;
    }

    .hero-image-container {
        max-width: 400px;
        margin: 0 auto;
    }
    /* Mobile accessibility: hide large decorative image and associated swirl to reduce clutter */
    .hero-image {
        display: none;
    }

    .swirl-1 {
        display: none;
    }

    /* ensure the hero-image-container doesn't overlap content when image hidden */
    .hero-image-container {
        position: static;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 24px auto;
        pointer-events: none;
    }

    /* Slightly reduce hero padding for smaller screens */
    .hero-section {
        padding: 24px 4% 48px 4%;
        /* ensure orange area doesn't become too short on mobile */
        min-height: max(85vh, 900px);
    }
    .hero-section::after {
        bottom: -60vw;
        width: 160vw;
        left: -30vw;
        height: 100vw;
    }
    /* Mobile: reduce stroke width of swirl-2 to keep visuals balanced */
    .swirl-2 path {
        stroke-width: 20px;
    }
}

/* --- Swirl SVG positioning helpers --- */
/* Use the per-swirl CSS variables or standard properties to position and size */
.swirl {
    position: absolute;
    pointer-events: none;
    z-index: 4; /* above the hero image (z-index:1) and hero container (z-index:2); below navbar (z-index:10) */
    height: auto;
    /* ensure the svg never forces a wider viewport */
    max-width: 100vw;
    opacity: var(--swirl-opacity, 1);
    transform-origin: center;
}

.swirl-1 {
    /* position relative to the hero-image-container so it moves with the image */
    top: var(--swirl1-top, auto);
    right: var(--swirl1-right, 0);
    bottom: var(--swirl1-bottom, 0);
    left: var(--swirl1-left, auto);
    /* make the swirl much larger and scale with the viewport height (matches hero-image sizing) */
    height: var(--swirl1-height, 120vh);
    width: auto;
    transform-origin: bottom right;
    transform: translate(var(--swirl1-translate-x, 0), var(--swirl1-translate-y, 50px)) scale(var(--swirl1-scale, 1));
    opacity: var(--swirl1-opacity, 1);
}

.swirl-2 {
    /* fix to viewport left side so it doesn't move with content scroll */
    position: fixed;
    top: var(--swirl2-top, 10%);
    left: var(--swirl2-left, 0);
    right: var(--swirl2-right, auto);
    bottom: var(--swirl2-bottom, auto);
    /* constrain size so it never exceeds viewport width while keeping same height as swirl-1
       width is auto so aspect ratio is preserved; max-width prevents overflow */
    height: auto;
    max-height: var(--swirl2-height, var(--swirl1-height, 120vh));
    max-width: 100vw;
    width: auto;
    transform-origin: left center;
    transform: translate(var(--swirl2-translate-x, 0), var(--swirl2-translate-y, 0)) scale(var(--swirl2-scale, var(--swirl1-scale, 1)));
    opacity: var(--swirl2-opacity, 1);
}

/* Example overrides (commented):
:root {
  --swirl1-right: -5%;
  --swirl1-top: 10%;
  --swirl1-scale: 1.05;
  --swirl2-left: -8%;
  --swirl2-bottom: 5%;
}
*/