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

:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #8b5cf6;
    --success: #10b981;
    --danger: #ef4444;
    --dark: #1e293b;
    --gray: #64748b;
    --light-gray: #f1f5f9;
    --white: #ffffff;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    background: var(--white);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    cursor: pointer;
    text-decoration: none;
}

.logo-accent {
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

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

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    text-decoration: none;
    display: inline-block;
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Hero Section */
.hero {
    padding: 8rem 2rem 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.hero p {
    font-size: 1.25rem;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto;
}

/* Content Section */
.content {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.founder-section {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 4rem;
}

.founder-photo {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 4px solid white;
}

.founder-info h2 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.founder-title {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 1rem;
}

.credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.credential-badge {
    background: var(--light-gray);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--dark);
    font-weight: 500;
}

.founder-bio {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
}

.founder-bio p {
    margin-bottom: 1rem;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.social-link {
    text-decoration: none;
    color: var(--primary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Story Section */
.story-section {
    background: var(--light-gray);
    padding: 3rem;
    border-radius: 12px;
    margin-bottom: 3rem;
}

.story-section h2 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 1.5rem;
}

.story-section h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin: 2rem 0 1rem;
    font-weight: 600;
}

.story-section p {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.story-section ul {
    list-style: none;
    padding: 0;
}

.story-section li {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.story-section li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: bold;
}

/* Research Section */
.research-section {
    margin-bottom: 3rem;
}

.research-section h2 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

.research-section h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
}

.research-section p {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.research-section ul {
    /* Explicit padding avoids relying on inconsistent browser defaults,
       which on mobile can push bullet markers flush against (or past)
       the container edge so they look cut off. Generous padding needed
       because list-style: outside places the marker ~1em left of the
       content box, so small padding values can still push markers off. */
    padding-left: 1.75rem;
    margin-bottom: 1rem;
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.8;
}

.research-section li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem;
    border-radius: 12px;
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 2rem;
}

.cta-section .btn {
    background: white;
    color: var(--primary);
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

.cta-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Footer */
.footer {
    background: var(--dark);
    color: var(--white);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
}

.footer p {
    opacity: 0.8;
}

/* Footer link rows — flex-wrap so links reflow cleanly on narrow
   screens. Pipe separators are rendered as a ::after pseudo-element
   on each link (except the last), so each flex item is "Home |" as a
   single unit that wraps together and never leaves an orphaned pipe
   at the start of a new row. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.25rem;
    padding: 0 1rem;
    margin: 0 auto;
    max-width: 900px;
    list-style: none;
}

.footer-links-secondary {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

.footer-link {
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.footer-link:hover {
    text-decoration: underline;
}

.footer-links .footer-link:not(:last-child)::after {
    content: '|';
    margin: 0 0.7rem;
    opacity: 0.4;
    font-weight: 300;
    text-decoration: none;
    pointer-events: none;
}

@media (max-width: 480px) {
    .footer-links {
        font-size: 0.95rem;
    }
    .footer-links .footer-link:not(:last-child)::after {
        margin: 0 0.55rem;
    }
    .footer-links-secondary {
        font-size: 0.85rem;
    }
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background: var(--dark);
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .hero {
        padding: 6rem 1.5rem 3rem;
    }

    .founder-section {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .founder-photo {
        margin: 0 auto 2rem;
        width: 200px;
        height: 200px;
    }

    .credentials {
        justify-content: center;
    }

    .story-section,
    .cta-section {
        padding: 2rem 1.5rem;
    }

    .content {
        padding: 3rem 1.5rem;
    }

    .nav-container {
        padding: 0 1rem;
    }
}

/* Mobile phones (480px) */
@media (max-width: 480px) {
    /* Hamburger menu display */
    .hamburger-menu {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        gap: 1rem;
        z-index: 999;
        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a,
    .nav-links .btn {
        width: 100%;
        text-align: center;
    }

    /* Typography - smaller */
    .hero h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero {
        padding: 5rem 1rem 2.5rem;
    }

    .founder-section h2 {
        font-size: 1.75rem;
    }

    .founder-title {
        font-size: 1rem;
    }

    .founder-photo {
        width: 180px;
        height: 180px;
    }

    .credential-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.85rem;
    }

    .story-section h2,
    .research-section h2,
    .cta-section h2 {
        font-size: 1.5rem;
    }

    .story-section h3,
    .research-section h3 {
        font-size: 1.15rem;
    }

    .story-section,
    .cta-section {
        padding: 1.5rem 1rem;
    }

    .content {
        padding: 2rem 1rem;
    }

    .founder-bio,
    .story-section p,
    .research-section p,
    .research-section ul {
        font-size: 1rem;
    }

    /* More generous bullet padding on mobile than desktop — small
       viewport + tight container padding + outside markers means the
       bullets need real breathing room or they hit the edge. */
    .research-section ul {
        padding-left: 2rem;
    }

    .story-section ul {
        /* Push the custom checkmark markers inward from the section's
           left padding edge so they don't sit flush against the bg card's
           rounded corner on narrow screens. */
        padding-left: 0.5rem;
    }

    .story-section li {
        padding-left: 1.5rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .btn {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Small phones (360px) */
@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    .logo {
        font-size: 1.1rem;
    }

    .founder-photo {
        width: 150px;
        height: 150px;
    }

    .credential-badge {
        font-size: 0.8rem;
        padding: 0.35rem 0.75rem;
    }
}

/* ============================================================
   Dark Mode Overrides
   Activated when <html> has .dark-mode class (set by dark-mode-init.js)
   ============================================================ */

.dark-mode body {
    background: #1a1a2e;
    color: #e2e8f0;
}

.dark-mode .navbar {
    background: rgba(26, 26, 46, 0.98);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .logo {
    color: #e2e8f0;
}

.dark-mode .nav-links a {
    color: #e2e8f0;
}

.dark-mode .nav-links a:hover {
    color: #63b3ed;
}

.dark-mode .hamburger-menu span {
    background: #e2e8f0;
}

.dark-mode .content {
    color: #e2e8f0;
}

.dark-mode .founder-info h2 {
    color: #e2e8f0;
}

.dark-mode .credential-badge {
    background: #2d3748;
    color: #e2e8f0;
}

.dark-mode .founder-bio {
    color: #a0aec0;
}

.dark-mode .story-section {
    background: #16213e;
}

.dark-mode .story-section h2 {
    color: #e2e8f0;
}

.dark-mode .story-section p {
    color: #a0aec0;
}

.dark-mode .story-section li {
    color: #a0aec0;
}

.dark-mode .research-section h2 {
    color: #e2e8f0;
}

.dark-mode .research-section p {
    color: #a0aec0;
}

.dark-mode .research-section ul {
    color: #a0aec0;
}

.dark-mode .research-section a {
    color: #63b3ed;
}

.dark-mode .footer {
    background: #0f172a;
}

.dark-mode .founder-photo {
    border-color: #2d3748;
}

@media (max-width: 480px) {
    .dark-mode .nav-links {
        background: #1a1a2e;
    }
}