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

/* overflow-x ONLY on html — putting it on body breaks position:sticky */
html { overflow-x: hidden; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #ffffff;
    font-size: 15px;
}


/* ========================
   Header
======================== */
header {
    padding: 1.2rem 5%;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

header.scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: block;
    line-height: 0;
    text-decoration: none;
}
.logo-image { height: 40px; width: auto; display: block; }

.nav-cta {
    padding: 0.6rem 1.2rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.nav-cta:hover { background: #333; }


/* ========================
   Hero
======================== */
.hero {
    padding: 5rem 5%;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
}

.hero-content { max-width: 720px; margin: 0 auto; text-align: center; }

.beta-badge {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: white;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: lowercase;
    color: #1a1a1a;
    border: 2px solid #1a1a1a;
    box-shadow: 1px 1px 0px 2px #1a1a1a, 4px 4px 0px 3px #1a1a1a;
}

h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #1a1a1a;
}

.hero-subtitle { font-size: 1.1rem; margin-bottom: 1rem; color: #666; }
.hero-tagline  { font-size: 1rem; margin-bottom: 2.5rem; color: #666; line-height: 1.6; }

.cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary {
    padding: 0.875rem 2rem;
    background: #1a1a1a;
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-primary:hover { background: #333; transform: translateY(-1px); }

.btn-secondary {
    padding: 0.875rem 2rem;
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e5e5;
    border-radius: 25px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover { border-color: #F4A4A4; background: #fef5f5; }


/* ========================
   Section Separator
======================== */
.section-separator {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 72px;
    overflow: hidden;
}
.section-separator .stripe { flex: 1; width: 100%; }
.section-separator .stripe-teal   { background: #6DD5D5; }
.section-separator .stripe-yellow { background: #FFE89E; }
.section-separator .stripe-pink   { background: #F4A4A4; }

@media (max-width: 640px) { .section-separator { height: 48px; } }


/* ========================
   Features showcase
======================== */
.features {
    padding: 5rem 5%;
    background: #ffffff;
}

.features--alt {
    background: #ffffff;
    padding-top: 0;
}
.features-showcase {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.showcase-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 420px;
    max-height: 600px;
    object-fit: contain;
}

.features--alt .showcase-img {
    width: auto;
    height: 600px;
    max-width: 100%;
    object-fit: contain;
}

.showcase-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.showcase-item {
    padding: 2.25rem 0;
    border-bottom: 1px solid #e5e5e5;
}
.showcase-item:first-child { padding-top: 0; }
.showcase-item:last-child  { border-bottom: none; padding-bottom: 0; }

.showcase-item h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin-bottom: 0.6rem;
}

.showcase-item p { font-size: 1rem; color: #666; line-height: 1.65; }

.text-accent { color: #F4A4A4; }


/* ========================
   Beta CTA
======================== */
.beta-cta {
    padding: 5rem 5%;
    background: #ffffff;
}

.beta-content { max-width: 720px; margin: 0 auto; text-align: center; }


/* ========================
   Signup Form
======================== */
.signup-form {
    background: white;
    padding: 2.5rem;
    border-radius: 30px;
    max-width: 480px;
    margin: 0 auto;
    border: 2px solid #1a1a1a;
    box-shadow: 1px 1px 0px 2px #1a1a1a, 4px 4px 0px 3px #1a1a1a;
    text-align: left;
}

/* h2 now lives inside the form card */
.signup-form h2 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group { margin-bottom: 1.25rem; text-align: left; }

.form-group label:not(.radio-option) {
    display: block;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
    font-family: inherit;
}

.form-group input:not([type="radio"]):not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #6DD5D5;
    box-shadow: 0 0 0 3px rgba(109, 213, 213, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: #999; }
.form-group textarea { resize: vertical; min-height: 100px; }

.radio-group { display: flex; gap: 1rem; }

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
    flex: 1;
    background: white;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1a1a1a;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0;
}

.radio-option:hover { border-color: #F4A4A4; }
.radio-option input[type="radio"] { display: none; }

.radio-option::before {
    content: '';
    display: block;
    width: 18px; height: 18px; min-width: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: white;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.radio-option:has(input[type="radio"]:checked)::before {
    border-color: #F4A4A4;
    background: #F4A4A4;
    box-shadow: inset 0 0 0 3px white;
}

.radio-option:has(input[type="radio"]:checked) {
    border-color: #F4A4A4;
    background: #fef5f5;
}

.badge-select { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.skill-badge, .employment-badge {
    padding: 0.5rem 1rem;
    background: white;
    border: 2px solid #e5e5e5;
    border-radius: 25px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    color: #666;
    font-weight: 400;
}

.skill-badge:hover, .employment-badge:hover { border-color: #F4A4A4; color: #1a1a1a; }
.skill-badge.selected    { background: #F4A4A4; border-color: #F4A4A4; color: white; font-weight: 500; }
.employment-badge.selected { background: #6DD5D5; border-color: #6DD5D5; color: white; font-weight: 500; }

.conditional-section { animation: fadeIn 0.3s ease-in; }

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

.form-submit { width: 100%; margin-top: 1rem; }
.privacy-note { margin-top: 1rem; font-size: 0.8rem; color: #999; text-align: center; line-height: 1.4; }

.success-message {
    display: none;
    padding: 1.25rem;
    background: linear-gradient(135deg, #6DD5D5, #7de0e0);
    color: white;
    border-radius: 12px;
    text-align: center;
    margin-top: 1rem;
    font-weight: 500;
}
.success-message.show { display: block; animation: fadeIn 0.3s ease-out; }


/* ========================
   Footer
======================== */
footer {
    padding: 3rem 5%;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
}

.footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }
.footer-tagline { font-size: 0.95rem; margin-bottom: 1.5rem; color: #666; }

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.footer-links a { color: #666; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: #F4A4A4; }
.copyright { margin-top: 2rem; color: #999; font-size: 0.85rem; }


/* ========================
   Responsive
======================== */
@media (max-width: 960px) {
    .features-showcase, .features-showcase--reverse {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .features-showcase--reverse .showcase-image { order: -1; }
    .showcase-img { max-width: 360px; max-height: 500px; }
    .features--alt .showcase-img { height: 420px; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    .hero, .features, .beta-cta { padding: 3rem 5%; }
    .features--alt { padding-top: 0; }
    .signup-form { padding: 1.5rem; }
    .radio-group { flex-direction: column; }
    .showcase-item h3 { font-size: 1.6rem; }
    .showcase-img { max-width: 300px; max-height: 420px; }
    .features--alt .showcase-img { height: 320px; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.875rem; }
    .footer-links { flex-direction: column; gap: 1rem; }
    .badge-select { gap: 0.4rem; }
    .skill-badge, .employment-badge { font-size: 0.8rem; padding: 0.4rem 0.8rem; }
}