/* Global Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

.page-body {
    padding-left: 6.25rem;
    /* pl-25 = 25 * 0.25rem */
    padding-right: 6.25rem;
    background-color: #000;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Layout Utilities */
.main-container {
    width: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-container {
    padding: 1rem;
}

.main-logo {
    width: 95.37px;
}

@media (min-width: 1024px) {
    .main-logo {
        width: 95.75px;
    }
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-item {
    padding: 1rem;
}

.nav-item a {
    color: inherit;
    text-decoration: none;
}

.auth-buttons {
    display: flex;
    justify-content: space-between;
}



.btn-outline {
    border-radius: 2rem;
    color: white;
    /* rounded-4xl */
    border: 2px solid currentColor;
    padding: 0.125rem 1rem;
    text-decoration: none;
    /* p-0.5 px-4 */
    cursor: pointer;
}

.btn-primary {
    border-radius: 2rem;
    background-color: #fff;
    color: #000;
    padding: 0.125rem 1rem;
    text-decoration: none;
    cursor: pointer;
}

.spacer-sm {
    padding: 0.25rem;
}

/* Hero Section */
.hero-section {
    margin: 2.5rem;
    /* m-10 */
    text-align: left;
    /* Tailwind default for block */
}

.vertical-spacer {
    height: 7.5rem;
    /* h-30 = 30 * 0.25rem */
}

.hero-text {
    font-size: 1.875rem;
    /* text-3xl */
    line-height: 2.25rem;
    padding-bottom: 1.25rem;
    /* pb-5 */
    width: 37.5rem;
    /* w-150 = 150 * 0.25rem */
}

.btn-download-main {
    background-color: #e5e7eb;
    /* bg-gray-200 */
    color: #1f2937;
    /* text-gray-800 */
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    /* py-3 px-6 */
    border-radius: 9999px;
    /* rounded-full */
    display: inline-flex;
    align-items: center;
    border: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 150ms ease-in-out;
    cursor: pointer;
}

.btn-download-main:hover {
    background-color: #d1d5db;
    /* hover:bg-gray-300 */
}

.icon-download {
    fill: currentColor;
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
}

.hero-image-container {
    width: 100%;
}

.hero-img {
    border-radius: 1rem;
    /* rounded-2xl */
    width: 100%;
    display: block;
}

/* Trust Section */
.trust-heading {
    text-align: center;
    padding: 2.5rem;
    /* p-10 */
}

.logo-grid {
    display: flex;
    /* Standard flex behavior for sequential items */
}

.company-card {
    margin: 1rem;
    /* m-4 */
    border: 1px solid #a8a29e;
    /* border-stone-400 */
    background-color: #1c1917;
    /* bg-stone-900 */
    padding: 2.5rem;
    display: flex;
    height: 2.5rem;
    width: 12.5rem;
    /* w-50 */
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    /* rounded-md */
}

.company-logo {
    width: 5rem;
    /* w-20 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Feature Cards */
.feature-block {
    background-color: #0b0d08;
    margin: 3.75rem;
    /* m-15 */
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-radius: 1rem;
}

.feature-inner {
    margin: 1.25rem;
    width: 1200px;
    display: flex;
    align-items: center;
    gap: 5rem;
    /* gap-20 */
}

.feature-img {
    width: 650px;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px #1f1f1f;
}

.feature-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.feature-desc {
    font-size: 16px;
    color: #b5b5b5;
    line-height: 1.625;
    max-width: 380px;
}

.feature-link {
    display: inline-block;
    margin-top: 1.25rem;
    color: #ff6a00;
    font-weight: 500;
    text-decoration: none;
}

/* Testimonials */
.testimonials-section {
    background-color: #0b0d08;
    padding-top: 7rem;
    padding-bottom: 7rem;
}

.testimonials-container {
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}

.testimonials-header {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 4rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.testimonial-card {
    background-color: #12130f;
    border: 1px solid #1f1f1f;
    border-radius: 0.375rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rounded-xl-card {
    border-radius: 0.75rem;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.625;
    color: #e6e6e6;
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
}

.user-name {
    font-size: 0.875rem;
    color: #fff;
}

.user-title {
    font-size: 0.75rem;
    color: #9a9a9a;
}

/* Changelog */
.changelog-section {
    margin: 2.5rem;
}

.changelog-header {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.changelog-flex {
    display: flex;
}

.changelog-card {
    margin: 1rem;
    background-color: #1b1913;
    border-radius: 0.375rem;
    border: 1px solid #6b7280;
    padding: 1.25rem;
}

.changelog-date {
    color: #6b7280;
}

/* Final CTA */
.final-cta {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
}

.cta-heading {
    text-align: center;
    padding: 1.25rem;
    font-size: 4.5rem;
    /* text-7xl */
    font-weight: 700;
}

.cta-button-container {
    text-align: center;
    padding: 1.25rem;
}

/* Footer */
.main-footer {
    color: #edecec;
}

.footer-grid {
    display: flex;
}

.footer-list {
    list-style: none;
    padding-left: 5rem;
    padding-right: 5rem;
}

.footer-cat {
    color: #d6d3d1;
    font-weight: 700;
    padding: 0.25rem;
}

.footer-item {
    padding: 0.25rem;
}

.footer-bottom {
    text-align: center;
    padding: 2.5rem;
    color: #6b7280;
}