:root {
    /* Primary Palette */
    --primary-bg-dark: #000A19;
    --primary-text-light: #FAFFEB;

    /* Green/Active Palette */
    --green-apple: #0FBE3C;
    --green-lime: #A0EB23;

    /* Neutral Shades (from image, top-right) */
    --neutral-900: #2F3D47;
    --neutral-800: #404F5A;
    --neutral-700: #51616D;
    --neutral-600: #62737F;
    --neutral-500: #738592;
    --neutral-400: #8497A5;
    --neutral-300: #A6B5BF;
    --neutral-200: #C8D3DA;
    --neutral-100: #D9E1E2;
    
    /* Green Shades (from image, bottom-middle) */
    --green-900: #012A0F;
    --green-800: #02421A;
    --green-700: #045A25;
    --green-600: #067230;
    --green-500: #088A3B;
    --green-400: #0AA246;
    --green-300: #0CBA51;
    --green-200: #0FD25C;
    --green-100: #23E071;

    /* Lime Shades (from image, top-left) */
    --lime-900: #5E850D;
    --lime-800: #6C9A13;
    --lime-700: #7AAF1A;
    --lime-600: #88C420;
    --lime-500: #96D926;
    --lime-400: #A0EB23; /* user's lime */
    --lime-300: #B5F05B;
    --lime-200: #CAF593;
    --lime-100: #E0FADB;


    /* Component Colors */
    --text-primary: var(--primary-text-light);
    --text-secondary: var(--neutral-200);
    --btn-primary-bg: linear-gradient(to right, var(--green-lime), var(--green-apple));
    --active-primary-bg: linear-gradient(to top right, var(--green-lime), var(--green-apple));
    --btn-primary-text: var(--primary-bg-dark);
    --btn-secondary-bg: rgba(250, 255, 235, 0.1);
    --btn-secondary-text: var(--primary-text-light);
    --bg-primary: var(--primary-bg-dark);
    --link-color: var(--green-lime);

    /* Fonts */
    --font-family-headings: 'Hanken Grotesk', sans-serif;
    --font-family-body: 'Barlow', sans-serif;
}

body {
    color: var(--text-primary);
    font-family: var(--font-family-body);
    margin: 0;
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.header {
    padding: 16px 0;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    font-weight: 600;
    color: var(--primary-text-light);
}

.header-logo a {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.logo-desc {
    font-weight: 400;
    color: var(--text-secondary);
}

.header-logo .logo-brand-img {
    height: 0.9em;
    margin-right: .5em;
}

.header-logo span, .header-nav, .btn {
    font-family: var(--font-family-body);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 24px;
}

.btn {
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

/* Hero */
.hero {
    position: relative;
    text-align: center;
    padding: 12em 0;
    overflow: hidden;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -2;
}

.bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 10, 25, 0.7) 40%, var(--bg-primary));
    z-index: -1;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 64px;
    font-weight: 700;
    font-family: var(--font-family-headings);
    margin: 0 0 16px;
    line-height: 1.1;
}

.hero p {
    font-size: 20px;
    color: var(--text-secondary);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.5;
}

.btn {
    font-size: 16px;
    padding: 12px 24px;
}

.hero-logo {
    height: 1.5em;
    aspect-ratio: 925 / 98;
    margin: 3em auto 3em;
}

.hero-text {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    margin-bottom: 5em;
}

.hero-text b {
  color: var(--green-lime);
  background: linear-gradient(to bottom, var(--lime-100), var(--green-lime));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.hero .btn:first-of-type {
    margin-right: 16px;
}

/* Content Section */
.content-section {
    background-color: var(--bg-primary);
    padding: 80px 0;
    text-align: left;
}

.content-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.content-block {
    border: 1px solid var(--neutral-800);
    padding: 24px;
    border-radius: 8px;
}

.content-section .pre-title {
    color: var(--link-color);
    font-weight: 600;
    margin-bottom: 16px;
}

.content-section h3 {
    font-size: 24px;
    font-weight: 700;
    font-family: var(--font-family-headings);
    margin: 0 0 16px;
}

.content-section h2 {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--font-family-headings);
    margin: 0 0 16px;
}

.content-section p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .header-left .header-desc {
        display: none;
    }
    .hero h1 {
        font-size: 48px;
    }
    .hero p {
        font-size: 18px;
    }
    .content-section h2 {
        font-size: 36px;
    }
} 

/* Accordion Section */
.accordion-section {
    background-color: var(--bg-primary);
    padding: 80px 0;
}

.accordion {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    border-top: 1px solid var(--neutral-800);
}

.accordion-item {
    border-bottom: 1px solid var(--neutral-800);
}

.accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: transparent;
    border: none;
    padding: 24px 0;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-family-headings);
    font-size: 24px;
    font-weight: 700;
    transition: color 0.2s ease-in-out;
}

.accordion-header:hover {
    color: var(--green-lime);
}

.accordion-number {
    color: var(--neutral-500);
    margin-right: 32px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-family-body);
}

.accordion-title {
    transition: color 0.2s ease-in-out;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content-inner {
    padding: 0 0 24px;
}

.accordion-content p {
    margin: 0;
    max-width: 600px;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 66px; /* To align with title approximately */
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* Adjust as needed */
    transition: max-height 0.5s ease-in;
}

.accordion-item.active .accordion-header {
    color: var(--primary-text-light);
}

.accordion-item.active .accordion-header .accordion-title {
    color: var(--green-lime);
}