:root{
--color-ink:#17231c;--color-muted:#66756c;--color-brand:#1f7a4d;--color-brand-dark:#14532d;--color-brand-soft:#eaf7ea;--color-border:#dbe7dc;--color-surface:#fff;--color-page:#f5f7f6;--color-danger:#b42318;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--shadow-sm:0 2px 10px rgba(24,61,38,.08);--shadow-md:0 8px 24px rgba(24,61,38,.08);--font-body:Arial,Helvetica,sans-serif;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html, body{
    min-height: 100%;
}


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

body{
    font-family:var(--font-body);background:var(--color-page);color:var(--color-ink);
}

.navbar{
    display:flex;
    outline: 1px solid green;
    background-color: papayawhip;
    top: 0;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:16px 48px;background:var(--color-surface);box-shadow:var(--shadow-sm);position:sticky;z-index:9999;
}

.logo{
    display:inline-flex;
    align-items:center;
    width:240px;
    height:72px;
    color:var(--color-ink);
    text-decoration:none;
    flex:0 0 auto;
}

.logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.auth-brand{
    display:block;
    width:min(220px, 70%);
    height:auto;
    margin:0 auto 28px;
    object-fit:contain;
}

.footer-brand-logo{
    display:block;
    width:190px;
    height:auto;
    margin-bottom:14px;
}

nav{
    display:flex;
    gap:30px;
    align-items: center;
    flex-wrap:nowrap;
    white-space:nowrap;
    overflow-x:auto;
    min-width:0;
    scrollbar-width:thin;
}

.nav-toggle{display:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-brand);width:42px;height:42px;font-size:1.25rem;cursor:pointer}
.nav-quick-actions{display:none;margin-left:auto;align-items:center;gap:6px}.nav-quick-actions a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);text-decoration:none}

.nav-quick-actions a:hover{
    background:var(--color-brand-soft)}

nav a{
    text-decoration:none;
    color:black;
    font-weight:bold;
    flex:0 0 auto;
}

nav a[aria-current="page"],
nav a.active{
    color:#166534;
    text-decoration:underline;
    text-underline-offset:6px;
}

@media (max-width: 900px){
    .navbar{padding:14px 24px;}.nav-toggle{display:grid;place-items:center}.nav-quick-actions{display:flex}.navbar nav{display:none;position:absolute;top:100%;left:0;right:0;padding:10px 24px 16px;background:var(--color-surface);box-shadow:var(--shadow-md);flex-direction:column;gap:0;max-height:calc(100vh - 70px);overflow:auto}.navbar.nav-open nav{display:flex}.navbar nav a{padding:13px 0;border-bottom:1px solid #eef2ef}.navbar nav a:last-child{border-bottom:0}
}

@media (max-width: 600px){
    .navbar{padding:12px 16px;}
    .logo{width:180px;height:54px;}
    nav{gap:14px;}
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

button,
input,
select,
textarea {
    font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(31, 122, 77, 0.24);
    outline-offset: 2px;
}

/* Base button */
.page-button,
.primary-btn,
.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Primary button */
.page-button,
.primary-btn {
    border: 1px solid var(--color-brand);
    background: var(--color-brand);
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 122, 77, 0.16);
}

.page-button:hover,
.primary-btn:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(31, 122, 77, 0.22);
}

/* Secondary button */
.secondary-btn {
    border: 1px solid var(--color-brand);
    background: #fff;
    color: var(--color-brand);
}

.secondary-btn:hover {
    background: var(--color-brand-soft);
    color: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
    transform: translateY(-1px);
}

/* Button press effect */
.page-button:active,
.primary-btn:active,
.secondary-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled buttons */
button:disabled,
.page-button:disabled,
.primary-btn:disabled,
.secondary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Mobile buttons */
@media (max-width: 600px) {
    .page-button,
    .primary-btn,
    .secondary-btn {
        min-height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }

}


.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{

    width:100%;
    max-width:600px;
    height:500px;

    object-fit:cover;

    border-radius:20px;

    opacity:1;

    transition:opacity .8s ease-in-out;

}



/* =========================================================
   HERO SECTION
========================================================= */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 48px;
}

.hero-content {
    flex: 1 1 480px;
    max-width: 620px;
}

.hero-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: 20px;
}

.hero-content h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-brand);
    line-height: 1.5;
    margin-bottom: 18px;
}

.hero-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-muted);
    margin-bottom: 32px;
    max-width: 520px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-image {
    flex: 1 1 420px;
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 56px 24px;
        gap: 40px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }
}



@media (max-width: 600px) {
    .navbar {
        padding: 12px 16px;
    }

    .logo {
        width: 180px;
        height: 54px;
    }

    nav {
        gap: 14px;
    }
}


.footer{
    background:#111827;
    color:#fff;
    margin-top:80px;
}

.footer-container{
    max-width:1400px;
    margin:auto;
    padding:70px 80px 50px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:80px;
}

.footer-brand h2{
    color:#2ecc71;
    font-size:32px;
    margin-bottom:20px;
}

.footer-brand p{
    color:#d1d5db;
    line-height:1.9;
    max-width:420px;
}

.footer-links h3,
.footer-contact h3{
    margin-bottom:20px;
    font-size:22px;
}

.footer-links{
    display:flex;
    flex-direction:column;
}

.footer-links a{
    text-decoration:none;
    color:#d1d5db;
    margin-bottom:15px;
    transition:.3s;
}

.footer-links a:hover{
    color:#2ecc71;
    padding-left:8px;
}

.footer-contact p{
    color:#d1d5db;
    margin-bottom:15px;
}

.footer hr{
    border:none;
    border-top:1px solid #374151;
}

.copyright{
    text-align:center;
    padding:25px;
    color:#9ca3af;
    font-size:15px;
}