/* Basic Reset & Setup */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* This is a helper to make the footer "stick" to the bottom */
.main-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1; /* This makes the content area push the footer down */
    padding: 2rem 0; /* Add some space to the top/bottom */
}

/* --- Header & Nav --- */
.main-header {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

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

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #111;
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 1.5rem;
    position: relative; /* For the dropdown */
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* --- Footer --- */
.main-footer {
    background: #222;
    color: #aaa;
    padding: 2rem 0;
}

.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    border-top: 1px solid #444;
    padding-top: 1rem;
}


/*
==================================================
  Section: Hero
==================================================
*/

.hero {
    background-color: #1a202c; /* A deep, professional "dark mode" blue/grey */
    color: #ffffff;
    padding: 6rem 0; /* Lots of vertical space */
    text-align: center;
}

.hero .container {
    max-width: 900px; /* Constrain the width for readability */
}

.hero-title {
    font-size: 3.5rem; /* Large, bold, and confident */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: #ffffff;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #e2e8f0; /* A slightly softer white */
    margin: 0 0 2.5rem 0;
}

.hero-subtitle strong {
    color: #63b3ed; /* A "tech blue" to highlight key terms */
    font-weight: 600;
}

/* === Button Styles === */

/* This group holds the two buttons */
.hero-cta-group {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Space between the buttons */
    flex-wrap: wrap; /* Lets them stack on small screens */
}

/* A general style for all buttons */
.button {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent; /* For hover effects */
}

/* Primary Button (Solid) */
.button-primary {
    background-color: #4299e1; /* A strong, clear blue */
    color: #ffffff;
}

.button-primary:hover {
    background-color: #3182ce; /* A slightly darker blue on hover */
    transform: translateY(-2px); /* A slight "lift" effect */
}

/* Secondary Button (Outline) */
.button-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.button-secondary:hover {
    background-color: #ffffff;
    color: #1a202c; /* Invert colors on hover */
    transform: translateY(-2px);
}

/*
==================================================
  Section: Stalemate
==================================================
*/
.stalemate {
    background-color: #ffffff; /* A clean white background */
    padding: 5rem 0; /* Add space above and below */
    border-bottom: 1px solid #e2e8f0; /* A light separator line */
}

/* This is the two-column grid layout */
.stalemate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 2.5rem; /* Space between the columns */
}

/* This is the style for each "card" in the grid */
.stalemate-card {
    background-color: #f7fafc; /* A very light grey, almost white */
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* A subtle shadow */
}

.stalemate-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a202c; /* Dark text */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.stalemate-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568; /* A softer, professional grey text */
    margin-bottom: 1.5rem;
}

/* Specific styling for the list in the COO card */
.stalemate-card ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin: 0;
}

.stalemate-card li {
    font-size: 1.1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem; /* Make space for a custom icon */
    margin-bottom: 1rem;
}

/* Custom "bullet" for the list */
.stalemate-card li::before {
    content: '→'; /* A simple, clean arrow */
    position: absolute;
    left: 0;
    top: 0;
    color: #c53030; /* A "danger" red to imply a problem */
    font-weight: bold;
}



/*
==================================================
  Section: Solution
==================================================
*/
.solution {
    background-color: #f7fafc; /* Use the light grey from the stalemate cards as the BG */
    padding: 5rem 0;
}

/* A reusable style for section headers */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3.5rem auto; /* Center it and add space below */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #4a5568;
    line-height: 1.7;
}

/* Solution Grid: very similar to the stalemate grid */
.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* Solution Card: A "stronger" card style */
.solution-card {
    background-color: #ffffff; /* White card on a grey BG */
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.solution-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.solution-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #4299e1; /* Use the blue to highlight the "benefit" */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.solution-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.solution-list-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Specific styling for the list in the solution card */
.solution-card ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.solution-card li {
    font-size: 1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1.25rem;
}

/* Custom "bullet" for the list - a green checkmark */
.solution-card li::before {
    content: '✓'; /* A checkmark */
    position: absolute;
    left: 0;
    top: 2px;
    color: #38a169; /* A "success" green */
    font-weight: bold;
    font-size: 1.2rem;
}


/*
==================================================
  Section: Trust Verification
==================================================
*/
.trust-verification {
    background-color: #ffffff; /* White background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0; /* Separator line */
}

/* We re-use the .section-header styles from the last step */

.trust-verification .section-subtitle strong {
    color: #1a202c; /* Make "Secure, not Secretive" bold and dark */
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.trust-card {
    /* We add a border-top instead of a full box */
    border-top: 4px solid #4299e1; /* Use the primary blue color */
    padding-top: 2rem;
}

.trust-step-number {
    display: inline-block;
    background-color: #ebf4ff; /* A very light blue */
    color: #3182ce; /* A strong blue */
    padding: 0.25rem 0.75rem;
    border-radius: 99px; /* Pill shape */
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.trust-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.trust-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/*
==================================================
  Section: Final CTA
==================================================
*/
.final-cta {
    background-color: #1a202c; /* Same as the hero */
    color: #ffffff;
    padding: 6rem 0;
    text-align: center;
}

.final-cta .container {
    max-width: 900px; /* Match the hero's container */
}

.final-cta-title {
    font-size: 2.5rem; /* Slightly smaller than hero title */
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1.5rem 0;
}

.final-cta-subtitle {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #e2e8f0;
    margin: 0 0 2.5rem 0;
}

.final-cta-subtitle strong {
    color: #63b3ed; /* Tech blue for emphasis */
}

/* We are re-using .hero-cta-group, .button, .button-primary,
   and .button-secondary, so no new button CSS is needed! */



/*
==================================================
  Page: About Us
==================================================
*/

/* --- Reusable Page Header --- */
.page-header {
    background-color: #1a202c; /* Dark background, same as hero */
    color: #ffffff;
    padding: 4rem 0;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #e2e8f0;
    margin: 0;
}

/* --- Reusable Narrow Container --- */
.container-narrow {
    max-width: 800px; /* For text-heavy sections */
    margin: 0 auto;
}

/* --- About Purpose Section --- */
.about-purpose {
    padding: 5rem 0;
    background: #ffffff;
}

.about-intro-text {
    font-size: 1.25rem; /* Make the intro text larger */
    line-height: 1.7;
    color: #4a5568;
}

.about-section-title {
    font-size: 2rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.about-purpose p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.about-purpose p strong {
    color: #1a202c;
}


/* --- About Principles Section --- */
.about-principles {
    padding: 5rem 0;
    background-color: #f7fafc; /* Light grey background */
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.principles-grid {
    display: grid;
    /* 2 columns on desktop, 1 on mobile */
    grid-template-columns: 1fr 1fr; 
    gap: 2rem;
}

.principle-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.principle-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 1rem;
}

.principle-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

/* --- About Vision (CTA) Section --- */
.about-vision-cta {
    padding: 5rem 0;
    background: #ffffff;
}

.about-vision-cta p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #4a5568;
}


/*
==================================================
  Page: Solutions
==================================================
*/
.solutions-problem {
    background: #fff;
    padding: 4rem 0;
}

/* We're re-using the .stalemate-card li styles, 
   but we need a wrapper class for the <ul> */
.stalemate-card-list {
    list-style: none; /* Remove default bullets */
    padding-left: 0;
    margin-top: 2rem;
}

.stalemate-card-list li {
    font-size: 1.1rem;
    color: #4a5568;
    position: relative;
    padding-left: 2rem; /* Make space for a custom icon */
    margin-bottom: 1rem;
}

.stalemate-card-list li::before {
    content: '→'; /* A simple, clean arrow */
    position: absolute;
    left: 0;
    top: 0;
    color: #c53030; /* A "danger" red to imply a problem */
    font-weight: bold;
}


.solutions-pillars {
    background-color: #f7fafc; /* Light grey background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* Re-using .solution-grid and .solution-card */

.solutions-ciso-blocker {
    background: #fff;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* Re-using .final-cta */


/*
==================================================
  Page: Product
==================================================
*/
.product-pillars {
    background: #fff;
    padding: 5rem 0;
}

.product-grid {
    display: grid;
    /* 3 columns on desktop */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

.product-card {
    background-color: #f7fafc; /* Light grey card */
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.product-pillar-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #4299e1; /* Primary blue */
    margin-bottom: 1rem;
}

.product-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a202c;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.product-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: #718096; /* Medium grey */
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.product-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 0;
}

.product-engage {
    background-color: #f7fafc; /* Light grey background */
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}


/*
==================================================
  Navigation Dropdowns
==================================================
*/
.main-nav li {
    /* We already had this, it's the parent container */
    position: relative;
}

.main-nav .dropdown-menu {
    display: none; /* 1. Hide the dropdown by default */
    position: absolute; /* 2. Take it out of the normal flow */
    left: 0;
    top: 100%; /* 3. Position it right below the parent li */
    background: #ffffff;
    padding: 0.5rem 0;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 220px; /* Give it a nice width */
    z-index: 100; /* Ensure it's on top of other content */
}

/* 4. This is the magic: When you hover the parent, show the menu */
.main-nav li:hover .dropdown-menu {
    display: block;
}

.main-nav .dropdown-menu li {
    margin: 0; /* Reset margins */
    display: block; /* Make links stack vertically */
}

.main-nav .dropdown-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #333;
    font-size: 0.95rem;
}

.main-nav .dropdown-menu li a:hover {
    background-color: #f7fafc; /* Add a light hover effect */
    color: #4299e1; /* Use our primary blue */
}


/*
==================================================
  Page: Trust & Security
==================================================
*/
.trust-feature {
    background: #fff;
    padding: 5rem 0;
}

.trust-pillars {
    background: #fff;
    padding: 5rem 0;
    border-top: 1px solid #e2e8f0;
}

/* We need a simple list for the "Roadmap" card */
.solution-card-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5rem;
}

.solution-card-list li {
    font-size: 1rem;
    color: #4a5568;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}

.solution-card-list li::before {
    content: '✓'; /* A checkmark */
    position: absolute;
    left: 0;
    top: 2px;
    color: #38a169; /* A "success" green */
    font-weight: bold;
    font-size: 1.2rem;
}



/*
==================================================
  Mobile Navigation Toggle (Hamburger)
==================================================
*/

/* A helper class for screen-readers */
.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;
}

.mobile-nav-toggle {
    display: none; /* Hide on desktop */
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1001; /* Must be on top */
}

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #1a202c; /* Dark color for the bars */
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}


/* --- "X" Animation --- */
/* When the button has the "is-active" class, animate to an "X" */

.mobile-nav-toggle.is-active .hamburger-inner {
    transform: rotate(45deg);
}
.mobile-nav-toggle.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
}
.mobile-nav-toggle.is-active .hamburger-inner::after {
    bottom: 0;
    opacity: 0; /* Hide the bottom bar */
}



/*
==================================================
  Responsive Design: Mobile (Full Update)
==================================================
*/
@media (max-width: 768px) {
    
    /* --- Show the hamburger button --- */
    .mobile-nav-toggle {
        display: block;
    }

    /* --- Hide the desktop nav items --- */
    .main-nav ul {
        display: none; /* Hide the <ul> by default */
    }

    /* --- Style the mobile menu container --- */
    .main-nav {
        /* Hide it off-screen by default */
        position: fixed;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 6rem;
    }
    
    /* --- This is the "Open" state, toggled by JS --- */
    .main-nav.nav-open {
        transform: translateX(-100%); /* Slide it in */
    }

    .main-nav.nav-open ul {
        display: block; /* Show the <ul> */
        text-align: center;
    }
    
    .main-nav.nav-open li {
        margin: 0;
        width: 100%;
    }

    .main-nav.nav-open li a {
        display: block;
        padding: 1.25rem 1rem;
        font-size: 1.5rem; /* Big, clear links */
        color: #1a202c;
    }

    .main-nav.nav-open .nav-button {
        border: none; /* Make button look like a link */
    }

    /* --- Handle dropdowns in mobile menu --- */
    .main-nav.nav-open .dropdown-menu {
        display: block; /* Show dropdowns by default */
        position: static; /* Not a hover menu */
        box-shadow: none;
        border: none;
        min-width: 0;
        padding-left: 1rem; /* Indent them */
        background: #f7fafc; /* Light grey BG */
    }

    .main-nav.nav-open .dropdown-menu li a {
        font-size: 1.25rem; /* Slightly smaller */
        color: #4a5568;
        padding: 0.75rem 1rem;
    }


    /* === Other Mobile Styles === */
    .hero-title {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .stalemate-grid {
        grid-template-columns: 1fr;
    }
    .hero {
        padding: 4rem 0;
    }
    .stalemate {
        padding: 3rem 0;
    }
    .stalemate-card {
        padding: 1.5rem;
    }

    .section-title {
        font-size: 2rem;
    }
    .section-subtitle {
        font-size: 1.1rem;
    }
    .solution-grid {
        grid-template-columns: 1fr;
    }
    .solution {
        padding: 3rem 0;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }
    .trust-verification {
        padding: 3rem 0;
    }
    .trust-card {
        padding-top: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .trust-title {
        font-size: 1.5rem;
    }
    .final-cta {
        padding: 4rem 0;
    }
    .final-cta-title {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2.25rem;
        line-height: 1.2;
    }
    .about-purpose,
    .about-principles,
    .about-vision-cta {
        padding: 3rem 0;
    }
    .about-intro-text {
        font-size: 1.15rem;
    }
    .about-section-title {
        font-size: 1.75rem;
    }
    .principles-grid {
        grid-template-columns: 1fr;
    }

    .solutions-problem,
    .solutions-pillars,
    .solutions-ciso-blocker {
        padding: 3rem 0;
    }
    
    .product-grid {
        grid-template-columns: 1fr;
    }
    .product-pillars,
    .product-engage {
        padding: 3rem 0;
    }
}