:root {
    --color-bg-dark: #1a2420;
    --color-bg-section: #1e2b26;
    --color-text: #ffffff;
    --color-text-muted: #a8b5b0;
    --color-gold: #F2D595;
    --color-teal: #2a5d52;
    --color-teal-light: #3a7d6a;
    --color-accent-box: #2a5d52;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text);
    line-height: 1.6;
}

/* Navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo img {
    height: 28px;
    width: auto;
}

.logo span {
    font-size: 0.55rem;
    display: block;
    letter-spacing: 1.5px;
    color: var(--color-text-muted);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-text);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background-color: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
    position: relative;
    overflow: hidden;
}

/* Hero background image with desaturation */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('hero-image.jpg');
    background-size: cover;
    background-position: center 80%;
    filter: saturate(0.4) brightness(0.4);
    z-index: 0;
}

/* Dark overlay for text readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 36, 32, 0.85) 0%,
        rgba(26, 36, 32, 0.7) 40%,
        rgba(26, 36, 32, 0.6) 100%
    );
    z-index: 1;
}

/* 35mm film grain overlay */
.hero-grain {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAOhklEQVR4nO1dbXLjOAy8k/d/5+zN7MOsZFEACXST3qTKVZNxbBENoAH+6N9/v7u7u7u7u7u7u7u7u7u7u/NvJv7444/U/4888sgjjzzyyCOPPPLII4888sgjjzzyyCOPPPLII4888sgjjzwSyZ9//JH553//93/u7u7u7u7u7u7u7u7+Mfzpp5/c3d3d3d3d3d3d3Z2LH3/80d3d3d3d3d3d3d2xePnll93d3d3d3d3d3d0di5/85Cfu7u7u7u7u7u7u/GN45ZVXXP6vvfaau7u7u7u7Y/HCCy+4/F988UV3d0LxzDPPuPxfeuklU/7VV191d8fiL3/5i8v/pZdecncnF7/73e9c/i+++KK7OxO3L/ZDDz3k8n3jiSde/n/4Q5/CHH8zW9+4+5OxI9+9COX/4svvuik4itf+Yq7Owm/+tWvXP7PP/+8k4rPfe5z7u5E/OAHP3D5P/fcc04qvvjFL7q7E/G9733P5f/888876fjCF77g7k7E9773PZf/H//4Rycd73znO93difje977n8v/9739vC/7d737X3Z2I7373uy7/P/zhD7bg3/72t93difj2t7/t8n/++edtwb/5zW+6uxPxne98x+X/xz/+0Rb8a1/7mrs7EV//+tdd/n/84x9twd/4xjfc3Yn42te+5vJ/7rnnbMG/+tWvurujefbZZ93nzz33nC34V77yFXd3Ir785S+7/J977jn3+Ze//GV3dyK+9KUvufyfe+45l/+XvvQld3civvSlL7nPn3vuOVfwL37xi+7uRHzxi1+05X7uuedc51/4whfc3Yn4whe+4PJ/7rnn3Oef//zn3d2J+PznP+/yf+6559znn/vc59zdifjs5z7r8n/uuedcwT/72c+6uxPx2c9+1uV/2223uYI/85nPuLsT8ZnPfMbl/5nPfMYV/NOf/rS7OxGf/vSnXf633Xab+/yTn/ykuzsRn/zkJ13+t912myv4Jz7xCXd3Ij7xiU/Yct92223u8//8z/90dyfinve8py33Zz/7Wff5f/zHf7i7E/Gxj33M5f/Zz37WFvzjH/+4uzsRH/3oR23577jjDvf5f/zHf7i7E/HhD3/Ylvu2225zn//7v/+7uzsRH/rQh1z+t912myv4f/zHf7i7E/HBD37Q5X/bbbe5gv/Xf/2XuzsRH/jAB1z+t912myv4f/7nf7q7E/H+97/f5X/77be7gt9+++3u7kS8733vc/nffvvtruC33367uzsR73vf+1z+t99+uyv4bbfd5u5OxHvf+16X/+233+4Kftttt7m7E/Ge97zH5X/77bfbgt92223u7kS8+93vdvm/+93vtgV/17ve5e5OxLve9S6X/+23324L/s53vtPdnYh3vvOdLv93v/vdtuDveMc73N2JeNvb3ubyv/32213B3/GOd7i7E/HWt77V5X/77be7gr/97W93dyfiLW95i8v/ne98py34W97yFnd3It785je7/N/5zne6gr/lLW9xdyfi137t11z+73znO13B3/zmN7u7E/GmN73J5f+e97zHFvxNb3qTuzsRb3zjG13+73nPe2zB3/jGN7q7E/H617/e5f+e97zHFfz1r3+9uzsRr3vd61z+73nPe1zBX/va17q7E/Ha177W5X/HHXe4gr/mNa9xdyfirW99q8v/jjvucAX/1V/9VXd3Il772te6/O+44w5b8Le85S3u7kS85jWvcfnfcccdjuBf/vKX3d2JeM1rXuPyf/e73+0Kfqc73cndnYhXv/rVLv93v/vdruC/9mu/5u5OxKte9SqX/7vf/W5X8De+8Y3u7kS88pWvdPm/+93vdgV/05ve5O5OxCtf+UqX/7ve9S5X8De84Q3u7kS84hWvcPnfddddjuCvf/3r3d2JeMUrXuHyv+uuu2zBX/e617m7E/HKV77S5X/XXXfZgr/2ta91dyfi5S9/ucv/rrvusgV/zWte4+5OxMte9jKX/1133WULfpe7393dnYiXvexlLv877rrLFvwV73qVu7sT8bKXvczl/653vcsW/DWveY27OxEve9nLXP533XWXI/irX/1qd3ciXvrSl7r877rrLlvwV73qVe7uRLzkJS9x+d91112O4K961avc3Yl48Ytf7PK/6667bMFf+cpXursT8eIXv9jlf9dddzmCv/KVr3R3J+JFL3qRy/+uu+6yBX/FK17h7k7Ei170Ipf/XXfdZQv+ile8wt2diBe+8IUu/7vuussW/OUvf7m7OxEvfOELXf533XWXI/jLX/5yd3ciXvCCF7j877rrLlvwl7/85e7uRLzgBS9w+d91112O4C9/+cvd3Yl4wQte4PK/6667HMFf9rKXubsT8fznP9/lf9dddzmCv+xlL3N3J+L5z3++y/+uu+5yBH/Zy17m7k7E8573PJf/nXfe6Qj+0pe+1N2diOc973ku/zvvvNMW/KUvfam7OxHPe97zXP533nmnLfhLXvISd3ci7n//+7v877zzTkfwF7/4xe7uRNz//vd3+d95552O4C9+8Yvd3Ym4733v6/K/8847HcFf9KIXubsTcd/73tflf+edd9qCv+hFL3J3J+K+972vy//OO++0BX/hC1/o7k7E/e53P5f/nXfeaQv+ohe9yN2diPvd732O4HfccYct+Atf+EJ3dyLue9/7uvzvuOMOR/AXvvCF7u5E3Oc+93H5//7v/74t+Ate8AJ3dyLuc5/7uPx///d/3xb8BS94gbs7Efe5z31c/r//+7/vCP6CF7zA3Z2Ie9/73i7/3//932cL/vKXv9zdnYh73/veLv877rjDFvzlL3+5uzsR9773vV3+d9xxhy34y1/+cnd3Iu51r3u5/O+44w5H8Je//OXu7kTc6173cvnfcccdtuAve9nL3N2JuNe97uXyv+OOOxzBX/7yl7u7E3HPe97T5X/HHXfYgr/85S93dyfiXve6l8v/t3/7tx3BX/GKV7i7E3Gve93L5f/bv/3bjuD//d//7e5OxD3veU+X/2//9m87gr/iFa9wdyfinnf/P+7z3/7t33YEf8UrXuHuTsQ97nEPl/9v//ZvO4K/6lWvcncn4h73uIfL/7d/+7cdwV/1qle5uxNxz3ve0+X/m7/5m47gr3rVq9zdibjnPe/p8v/N3/xNW/BXvepV7u5E3P3ud3f5/+Zv/qYt+Ktf/Wp3dyLufve7u/x/8zd/0xb8Na95jbs7EXe/+91d/r/5m7/pCP6a17zG3Z2Iu9/97i7/3/zN33QEf81rXuPuTsTd7353l/9v/uZv2oK/5jWvcXcn4u53v7vL/47f/m1b8Ne85jXu7kT8+q//usv/jt/+bVvw177ute7uRNzrXvdy+d9xxx224K973evc3Ym4173u5fK/4447HMFf97rXubsTce973cvl/1u/9Vu24K973evc3Ym4173u5fL/rd/6LVvw173ude7uRPz6r/+6y/+3fuu3bMFf//rXu7sT8eu//usu/9/+7d+2BX/9619v8vvEJz7h7k7Er//6r7v8b7vtNlvw17/+9e7uRPzar/2ay/+2226zBX/DG97g7k7E+973Ppf/bbfd5gj+hje8wd2diPe9730u/9tuu80R/A1veIO7OxHve9/7XP633XabLfgb3/hGd3ci3ve+97n8b7/9dkfwN77xje7uRLzvfe9z+d9+++224G9605vc3Ym4+93v7vK//fbbHcHf9KY3ubsT8b73vc/lf/vttzu++5u/+Zvu7kS8733vc/nffvvttuBvetOb3N2JuN/97ufyv+2222zB3/SmN7m7E3HPe97T5X/bbbe5u5OLN7/5zS7/22677f8PNN7ylre4uxPx5je/2eV/2223ubsTizve8Y4u/9tuu82+8a1vfau7OxFvetObXP633Xab+/ytb32ruzsRb3rTm1z+t912m/v8rW99q7s7EW9605tc/rfffrstOH/u7o7FBz/4QZf/7bffbgv+lre8xd2diA9+8IMu/9tvv90W/O1vf7u7OxEf+MAHXP6333676+d3v/vd7u5EfOADH3D533777Y7gn/vc59zdifjgBz/o8r/jjjtswT/72c+6uxPxgQ98wOV/xx13uIJ/5jOfcXcn4kMf+pDL/4477nAF/8xnPuPuTsSHPvQhl/8dd9zhCv7pT3/a3Z2ID33oQy7/O+64wxX805/+tLs7ER/60Idc/nfccYcr+Kc+9Sl3dyI+9KEPufzvuOMOW/BPfepT7u5EfOhDH3L533777bbgn/zkJ93difjQhz7k8r/99tstwe+4445bBf/kJz/p7k7ER+94h8v/9ttvtwX/5Cc/6e5OxMc//nGX/+233+4I/slPftLdnYiPf/zjLv877rjDPv/EJz7h7k7Exz/+cZf/7bffbgv+iU98wt2diI9//OMu/9tvv90W/BOf+IS7OxEf//jHXf6333677ed3vOMdtuCf+MQn3N2J+NjHPubyv/32223BP/axj7m7E/Gxj33M5f/Zz37W3Z1c/L//9/9c/p/97GdtwT/2sY+5uxPx0Y9+1OX/2c9+1hb8ox/9qLs7ER/96Edd/p/97Gfd51/60pfc3Yn46Ec/6vL/7Gc/6z5/05ve5O5OxEc/+lGX/2c/+1l3d3Lxuc99zuX/mc98xt2dXPzv//1fXP633XabLfiHP/xhd3ciPvzhD7v8b7vtNvf5//k//8fdnYgPf/jDLv/bbrst9N2f+9zn3N2J+PCHP+zyv+222+zz//t//6+7OxEf/vCHXf633XZb+P8f+chH3N2J+J//+Z/Y//bb3We/9Eu/5O5OxJ/8yZ+4/D/96U87gr/sZS9zdyfik5/8pMv/05/+tCP4H/7hH7q7E/HJT37S5f/pT3/aEfyP/uiP3N2J+OQnP+ny//SnP+0I/kd/9Efu7kR84hOfcPl/+tOfdgT/4z/+Y3d3Ij7xiU+4/D/zmc84gv/xH/+xuzsRH//4x13+n/nMZ2w/v+OOO9zdifjEJz7h8v/MZz5jC37HHXe4uxPxiU98wuX/mc98xhb8jjvucHcn4uMf/7jL/zOf+Ywt+B133OHuTsTHP/5xl/8dd9xhC37HHXe4uxPx8Y9/3OV/xx13OII//fTT7u5EfPSjH3X533HHHbbgTz/9tLs7ER/96Edd/nfccYf7/Omnn3Z3J+KjH/2oy/+OO+6wBX/66afd3Yn4yEc+4vK/4447HMGffvppd3ciPvKRj7j877jjDkfwp59+2t2diA9/+MMu/9tvv90R/Omnn3Z3J+LDH/6wy//22293BH/66afd3Yn48Ic/7PK//fbbHcGffvppd3ciPvzhD7v8b7/9dkfwu+66y92diA996EMu/9tvv90R/K677nJ3J+JDH/qQy//222+3Bb/rrrtswT/4wQ+6uxPxoQ99yOV/++2324Lf5S53sQX/8Ic/7O5OxIc+9CGX/5133ukI/nM/93Pu7kTc8573dPnfeeedtuA/93M/5+5OxD3veU+X/5133mkLfpe73MXdnYh73vOeLv8777zTFvzud7+7uzsRv/qrv+ryv+uuuxzB7373u7u7E/Grv/qrLv+77rrLFvznf/7n3d2J+NVf/VWX/1133WULfve7393dnYhf/dVfdfnfddddtuA//3P/H/j/B1pOj1VLOA4TAAAAAElFTkSuQmCC");
    opacity: 0.035;
    z-index: 2;
    pointer-events: none;
    animation: grain 0.5s steps(1) infinite;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 3;
}

.hero-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.hero-label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--color-text-muted);
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--color-gold);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn {
    padding: 0.9rem 1.8rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

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

.btn-primary:hover {
    background: var(--color-teal-light);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Timeline Section */
.timeline-section {
    padding: 6rem 4rem;
    background: var(--color-bg-section);
}

.timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 5rem;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.timeline-item {
    text-align: center;
    padding: 0 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--color-teal);
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-date {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-top: 1.5rem;
    font-weight: 500;
}

.timeline-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.3rem;
}

/* Timeline Intro */
.timeline-intro {
    text-align: center;
    max-width: 700px;
    margin: 3rem auto 5rem auto;
    padding: 5rem 0;
}

.timeline-intro-lead {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.timeline-intro p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.timeline-intro strong {
    color: var(--color-text);
    font-weight: 600;
}

/* Roadmap Items */
.roadmap {
    max-width: 1000px;
    margin: 0 auto;
}

.roadmap-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.roadmap-item:nth-child(even) {
    direction: rtl;
}

.roadmap-item:nth-child(even) > * {
    direction: ltr;
}

.roadmap-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--color-gold);
}

.roadmap-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.roadmap-content ul {
    list-style: none;
    padding-left: 0;
}

.roadmap-content li {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding-left: 1.2rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.roadmap-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-teal);
}

.roadmap-box {
    background: var(--color-accent-box);
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.roadmap-box h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.roadmap-box p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Feature Announcement Box - Reusable for highlights and announcements */
.feature-announcement {
    background: linear-gradient(135deg, rgba(42, 93, 82, 0.4) 0%, rgba(42, 93, 82, 0.15) 100%);
    border: 1px solid rgba(242, 213, 149, 0.2);
    padding: 3rem;
    border-radius: 12px;
    max-width: 800px;
    margin: 0 auto 5rem auto;
    position: relative;
    overflow: hidden;
}

.feature-announcement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-teal) 100%);
}

.feature-announcement h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--color-gold);
    text-align: center;
}

.feature-announcement-content {
    display: grid;
    gap: 1.5rem;
}

.feature-announcement-content > p {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 0.5rem;
}

.feature-announcement-content > ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1rem 0;
}

.feature-announcement-content > ul > li {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    position: relative;
    padding-left: 2.5rem;
    transition: all 0.3s ease;
}

.feature-announcement-content > ul > li:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(242, 213, 149, 0.3);
    transform: translateX(4px);
}

.feature-announcement-content > ul > li::before {
    content: '✓';
    position: absolute;
    left: 1rem;
    color: var(--color-gold);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Nested list styling - for sub-items */
.feature-announcement-content > ul > li > ul {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-announcement-content > ul > li > ul > li {
    background: rgba(242, 213, 149, 0.15);
    border: 1px solid rgba(242, 213, 149, 0.25);
    color: var(--color-text);
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.feature-announcement-content > ul > li > ul > li:hover {
    background: rgba(242, 213, 149, 0.25);
    border-color: rgba(242, 213, 149, 0.4);
}

.feature-announcement-content > ul > li > ul > li::before {
    content: none;
}

/* When a list item has nested items, make it span 2 columns */
.feature-announcement-content > ul > li:has(> ul) {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.feature-announcement-content .announcement-footer {
    text-align: center;
    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Impact App Showcase Image */
.impact-showcase {
    background: #1a2420;
    margin-left: -4rem;
    margin-right: -4rem;
    margin-bottom: -3rem;
    text-align: center;
    line-height: 0;
}

.impact-showcase img {
    max-width: 1180px;
    width: 100%;
    height: auto;
    display: inline-block;
}

/* Features Section */
.features-section {
    padding: 5rem 4rem;
    background: var(--color-bg-dark);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature {
    text-align: left;
}

.feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    color: var(--color-gold);
}

.feature h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
}

.feature p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Footer */
.footer {
    padding: 3rem 4rem;
    background: var(--color-bg-section);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* Blog Section */
.blog-section {
    padding: 5rem 4rem;
    background: var(--color-bg-section);
}

.blog-container {
    max-width: 1000px;
    margin: 0 auto;
}

.blog-header {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.blog-header p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.blog-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.blog-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.8rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.blog-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.blog-card p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.blog-link {
    color: var(--color-gold);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.blog-link:hover {
    color: #dfc07a;
}

.blog-footer {
    text-align: center;
}

/* Newsletter Section */
.newsletter-section {
    padding: 5rem 4rem;
    background: var(--color-bg-dark);
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 0.8rem;
}

.newsletter-content > p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.newsletter-form input {
    flex: 1;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.newsletter-form input::placeholder {
    color: var(--color-text-muted);
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-teal);
    background: rgba(255, 255, 255, 0.08);
}

.newsletter-note {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* Desktop Timeline Enhancement */
@media (min-width: 769px) {
    .timeline::before {
        width: 800px;
    }

    .timeline-item {
        padding: 0 4rem;
    }

    .timeline-item::before {
        width: 20px;
        height: 20px;
    }

    .timeline-date {
        font-size: 1.3rem;
        margin-top: 2.5rem;
    }

    .timeline-label {
        font-size: 1.05rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .nav {
        padding: 1rem 2rem;
    }

    .nav-links {
        display: none;
    }

    .hero {
        padding: 0 2rem;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .timeline-section,
    .features-section {
        padding: 3rem 1.5rem;
    }

    .timeline {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        overflow-x: auto;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }

    .timeline::before {
        width: calc(100% - 60px);
        left: 30px;
        transform: none;
    }

    .timeline-item {
        text-align: center;
        padding: 0 0.6rem;
        flex: 1;
        min-width: 70px;
    }

    .timeline-item::before {
        width: 10px;
        height: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-date {
        font-size: 0.7rem;
    }

    .timeline-label {
        font-size: 0.6rem;
        line-height: 1.3;
    }

    .timeline-intro {
        padding: 3rem 0;
        margin: 2rem auto 3rem auto;
    }

    .timeline-intro-lead {
        font-size: 1.1rem;
    }

    .timeline-intro p {
        font-size: 0.95rem;
    }

    .roadmap-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .roadmap-item:nth-child(even) {
        direction: ltr;
    }

    .feature-announcement {
        padding: 2rem 1.5rem;
        margin: 0 auto 3rem auto;
    }

    .feature-announcement h4 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .feature-announcement-content {
        gap: 1rem;
    }

    .feature-announcement-content > ul {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        margin: 0.8rem 0;
    }

    .feature-announcement-content > ul > li {
        font-size: 0.9rem;
        padding: 0.7rem 0.8rem;
        padding-left: 2.2rem;
    }

    .feature-announcement-content > ul > li::before {
        font-size: 1rem;
        left: 0.8rem;
    }

    .feature-announcement-content > ul > li:has(> ul) {
        padding-bottom: 0.8rem;
    }

    .feature-announcement-content > ul > li > ul {
        margin: 0.6rem 0 0 0;
        gap: 0.4rem;
    }

    .feature-announcement-content > ul > li > ul > li {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    .feature-announcement-content > p {
        font-size: 0.95rem;
    }

    .feature-announcement-content .announcement-footer {
        font-size: 0.9rem;
        padding-top: 1rem;
        margin-top: 0.8rem;
    }

    .impact-showcase {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        margin-bottom: 3rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .feature h4 {
        font-size: 1rem;
    }

    .feature p {
        font-size: 0.8rem;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
    }

    .blog-section {
        padding: 3rem 1.5rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-header h2 {
        font-size: 1.6rem;
    }

    .newsletter-section {
        padding: 3rem 1.5rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-content h2 {
        font-size: 1.5rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    animation: fadeInUp 1s ease-out;
}

.roadmap-item {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.roadmap-item:nth-child(1) { animation-delay: 0.1s; }
.roadmap-item:nth-child(2) { animation-delay: 0.2s; }
.roadmap-item:nth-child(3) { animation-delay: 0.3s; }

.feature {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.feature:nth-child(1) { animation-delay: 0.1s; }
.feature:nth-child(2) { animation-delay: 0.2s; }
.feature:nth-child(3) { animation-delay: 0.3s; }
.feature:nth-child(4) { animation-delay: 0.4s; }
.feature:nth-child(5) { animation-delay: 0.5s; }
.feature:nth-child(6) { animation-delay: 0.6s; }

/* Screen reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Cookie Consent - XenGolf Theme */
#cc-main {
    --cc-font-family: 'Inter', sans-serif;
    --cc-bg: #1e2b26;
    --cc-primary-color: #ffffff;
    --cc-secondary-color: #a8b5b0;
    --cc-btn-primary-bg: #F2D595;
    --cc-btn-primary-color: #1a2420;
    --cc-btn-primary-hover-bg: #dfc07a;
    --cc-btn-primary-hover-color: #1a2420;
    --cc-btn-secondary-bg: #2a5d52;
    --cc-btn-secondary-color: #ffffff;
    --cc-btn-secondary-hover-bg: #3a7d6a;
    --cc-btn-secondary-hover-color: #ffffff;
    --cc-separator-border-color: rgba(255, 255, 255, 0.1);
    --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.03);
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.08);
    --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.05);
    --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.15);
    --cc-toggle-readonly-bg: #2a5d52;
    --cc-toggle-on-bg: #F2D595;
    --cc-toggle-off-bg: rgba(255, 255, 255, 0.2);
    --cc-overlay-bg: rgba(26, 36, 32, 0.85);
    --cc-webkit-scrollbar-bg: #1a2420;
    --cc-webkit-scrollbar-hover-bg: #2a5d52;
    --cc-footer-bg: #1a2420;
    --cc-footer-color: #a8b5b0;
    --cc-footer-border-color: rgba(255, 255, 255, 0.1);
    --cc-btn-border-radius: 4px;
    --cc-modal-border-radius: 8px;
}

/* Consent modal box shadow */
#cc-main .cm {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Modal title styling */
#cc-main .cm__title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* Button transitions */
#cc-main .cm__btn {
    transition: all 0.3s ease;
    font-weight: 500;
}

/* Footer link styling */
#cc-main .cm__footer a {
    color: var(--color-gold);
}

#cc-main .cm__footer a:hover {
    color: #dfc07a;
}

/* Preferences modal styling */
#cc-main .pm {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#cc-main .pm__title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* Section titles in preferences */
#cc-main .pm__section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* Cookie table styling */
#cc-main .pm__table {
    border-color: rgba(255, 255, 255, 0.1);
}

#cc-main .pm__table-tr {
    border-color: rgba(255, 255, 255, 0.1);
}

#cc-main .pm__table-th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--color-gold);
}