:root {
    --primary-color: #FF9F43;
    /* Keeping our brand orange */
    --primary-light: #FFD4A9;
    --bg-color: #F9F8F4;
    /* Aetheria Cream */
    --text-dark: #1A1A1A;
    /* Aetheria Charcoal */
    --text-light: #636E72;
    --white: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --shadow-soft: 0 10px 30px rgba(255, 159, 67, 0.15);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-body);
    font-weight: 300;
    /* Requested light weight */
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    /* Lighter headings too */
    line-height: 1.2;
    font-size: 3rem;
}

h1 {
    font-size: 5rem;
    /* Even larger */
    margin-bottom: 2rem;
    color: var(--text-dark);
    /* Removed gradient for cleaner Aetheria look, or keep it subtle? 
       User said "soft orange and white" originally, but Aetheria is very clean.
       Let's keep the gradient but make it very subtle or just solid charcoal?
       Aetheria uses solid colors mostly. Let's stick to the brand orange gradient for now but refined. */
    background: linear-gradient(45deg, var(--text-dark), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 400;
}

p {
    font-size: 1.2rem;
    color: var(--text-dark);
    /* Darker text for contrast with light weight */
    margin-bottom: 2rem;
    font-weight: 300;
    opacity: 0.8;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    padding: 1.2rem 3.5rem;
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 400;
    /* Lighter weight */
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
    font-family: var(--font-body);
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 159, 67, 0.25);
    background-color: #ff8c1a;
}

/* Header */
header {
    padding: 2.5rem 0;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 10;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: lighter;
    color: #474747;
    text-decoration: none;
}

.farm {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 200;
    color: #555555;
    text-decoration: none;
}

/* Nav Right */
.nav-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

/* Hero Section */
.hero {
    min-height: 110vh;
    /* Requested height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 0;
    /* Center vertically */
    background: radial-gradient(circle at center, rgba(255, 212, 169, 0.3) 0%, transparent 70%);
    /* Subtle glow */
}

.hero-content {
    text-align: center;
    max-width: 900px;
}

/* Value Prop Section */
.value-prop {
    padding: 8rem 0;
    background-color: var(--bg-color);
    /* Seamless background */
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 4rem;
    /* More spacing */
    margin-top: 5rem;
}

.card {
    /* Removed card background/border for airy feel */
    background: transparent;
    padding: 1rem;
    text-align: center;
    transition: transform 0.3s ease;
    border: none;
}

.card:hover {
    transform: translateY(-10px);
}

.card-icon {
    width: 100px;
    /* Larger icons */
    height: 100px;
    margin: 0 auto 2rem;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* How it Works */
.how-it-works {
    padding: 8rem 0;
    text-align: center;
    background-color: #eaeaea;
    /* Seamless background */
}

.steps {
    display: flex;
    justify-content: space-around;
    margin-top: 4rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.step {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.step-number {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-light);
    opacity: 0.3;
    /* More subtle */
    margin-bottom: -2rem;
    position: relative;
    z-index: 0;
}

.step h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

/* Social Proof - REMOVED */

/* CTA Section */
.cta-section {
    padding: 8rem 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.1), rgba(255, 212, 169, 0.2));
    /* Softer gradient */
    border-radius: 30px;
    margin: 6rem auto;
    max-width: 1000px;
}

/* Footer */
footer {
    background-color: var(--white);
    padding: 4rem 0;
    border-top: 1px solid #eee;
    font-family: var(--font-body);
    font-weight: 300;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.footer-links {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.footer-column h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: var(--primary-color);
}

.footer-info {
    text-align: left;
    color: #999;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .footer-info {
        text-align: right;
    }
}

.footer-info p {
    margin-bottom: 0.5rem;
}

.risk-warning {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #aaa;
    max-width: 300px;
    margin-left: auto;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    .hero {
        padding-top: 100px;
    }

    .soon-section {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* Nav Right */
.nav-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

/* Soon Section */
.soon-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.soon-title {
    font-size: 8rem;
    font-weight: 200;
    letter-spacing: 24px;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, var(--text-dark), var(--primary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.soon-desc {
    font-size: 1.5rem;
    color: var(--text-light);
}

@media (max-width: 768px) {
    .soon-title {
        font-size: 4rem;
    }

    .nav-right {
        gap: 1rem;
    }

    .farm {
        font-size: 1rem;
    }
}