/* ==========================================
   HUSAYAN DESIGN SYSTEM
========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;
    scrollbar-gutter: stable;

}

body {

    font-family: 'Inter', sans-serif;

    background: var(--bg-primary);

    color: var(--text-primary);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}

main {

    flex: 1;

}

a {

    text-decoration: none;

    color: inherit;

}

button {

    font-family: inherit;

    cursor: pointer;

}

.container {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    padding: 0 30px;

}

/* ==========================================
   NAVIGATION
========================================== */

header {

    background: var(--bg-surface);

    border-bottom: 1px solid var(--border-color);

    position: sticky;

    top: 0;

    z-index: 100;

}

.navbar {

    height: 80px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    font-size: 28px;

    font-weight: 800;

    letter-spacing: 2px;

}

nav {

    display: flex;

    align-items: center;

    gap: 35px;

}

nav a {

    font-size: 15px;

    font-weight: 500;

    transition: .25s;

}

nav a:hover {

    opacity: .65;

}

.nav-login {

    padding: 12px 24px;

    background: var(--text-primary);

    color: white;

    border-radius: 12px;

}

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

.hero {

    min-height: calc(100vh - 160px);

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 80px 30px;

}

.hero-content {

    max-width: 850px;

}

.badge {

    display: inline-flex;

    align-items: center;

    padding: 10px 18px;

    border-radius: 100px;

    background: var(--border-color);

    font-size: 13px;

    font-weight: 600;

    margin-top: 10px;


    margin-bottom: 25px;

    letter-spacing: 1px;

}

.hero h1 {

    font-size: 72px;

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 25px;

}

.hero p {

    font-size: 20px;

    line-height: 1.8;

    color: var(--text-secondary);

    margin-bottom: 45px;

}

/* ==========================================
   BUTTONS
========================================== */

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 36px;

    background: var(--text-primary);

    color: white;

    border-radius: 14px;

    font-weight: 600;

    transition: .25s;

}

.primary-btn:hover {

    transform: translateY(-4px);

}

.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 36px;

    background: white;

    border: 1px solid var(--border-color);

    border-radius: 14px;

}

/* ==========================================
   CARD
========================================== */

.card {

    width: 100%;

    max-width: 620px;

    margin: auto;

    background: white;

    padding: 50px;

    border-radius: 20px;

    border: 1px solid var(--border-color);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .04);

}

.card h1 {

    font-size: 40px;

    margin-bottom: 15px;

}

.card h2 {

    font-size: 34px;

    margin-bottom: 15px;

}

.card p {

    color: var(--text-secondary);

    line-height: 1.8;

    margin-bottom: 35px;

}

/* ==========================================
   JOURNEY
========================================== */

.journey {

    min-height: calc(100vh - 160px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 30px;

}

/* ==========================================
   OPTION LIST
========================================== */

.option-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

}

.option {

    padding: 18px 24px;

    border: 1px solid var(--border-color);

    border-radius: 14px;

    background: white;

    font-weight: 600;

    transition: .25s;

}

.option:hover {

    background: var(--text-primary);

    color: white;

    transform: translateY(-3px);

}

/* ==========================================
   FOOTER
========================================== */

footer {

    border-top: 1px solid var(--border-color);

    background: white;

}

.footer {

    height: 80px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--text-secondary);

    font-size: 14px;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:900px) {

    .hero h1 {

        font-size: 52px;

    }

    .hero p {

        font-size: 18px;

    }

    nav {

        display: none;

    }

    .card {

        padding: 35px;

    }

}

@media(max-width:600px) {

    .hero {

        padding: 40px 20px;

    }

    .hero h1 {

        font-size: 40px;

    }

    .card {

        padding: 30px 20px;

    }

    .container {

        padding: 0 20px;

    }

    .logo {

        font-size: 24px;

    }

}

/* ================================
   Fade Animation
================================ */

.hero-content {

    animation: fadeUp .7s ease;

}

.card {

    animation: fadeUp .7s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* =====================================
   Hover Upgrade
===================================== */

.option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 16px;

}

.option::after {

    content: "→";

    font-size: 20px;

    opacity: .4;

    transition: .25s;

}

.option:hover::after {

    opacity: 1;

    transform: translateX(6px);

}

/* =======================================
FORMS
======================================= */

.form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 20px;

    text-align: left;

}

.form-group label {

    margin-bottom: 10px;

    font-weight: 600;

    font-size: 14px;

}

.form-group input {

    /* ==========================================
       KULAY -- WALA ITO NOON
       ==========================================

       Walang `background` at walang `color` ang panuntunang ito
       dati. Hindi nakalimutang token kundi WALANG deklarasyon
       talaga.

       Ang input na walang background ay kumukuha ng default ng
       browser, at ang default na iyon ay PUTI na may itim na
       teksto. Sa light mode ay nagkataong tama, kaya walang
       pumutok sa loob ng ilang buwan. Sa dark ay puting kahon sa
       gitna ng madilim na page.

       Natakpan ito nang bahagya ng color-scheme sa theme.css,
       pero PANTAKIP lang iyon -- ang tahasang token ang lunas. */

    background: var(--bg-surface);
    color: var(--text-primary);

    padding: 16px;

    border-radius: 12px;

    border: 1px solid var(--border-color);

    font-size: 15px;

    outline: none;

    transition: .25s;

}

.form-group input:focus {

    border-color: var(--text-primary);

}

/* =======================================
FLASH MESSAGES
======================================= */

.base-flash-messages {

    max-width: 620px;

    margin: 0 auto 20px auto;

    padding: 0 30px;

}

.flash-message {

    padding: 12px 16px;

    border-radius: 10px;

    font-size: 14px;

    margin-bottom: 10px;

    text-align: center;

}

.flash-success {

    background: var(--success-soft);

    color: var(--success);

}

.flash-danger {

    background: var(--danger-soft);

    color: var(--danger);

}

.flash-warning {

    background: var(--warning-soft);

    color: var(--warning);

}

/* ==========================================
   DASHBOARD PROFILE MENU
========================================== */

.profile-menu {

    position: relative;

}

.profile-button {

    background: var(--text-primary);

    color: var(--bg-surface);

    border: none;

    padding: 12px 18px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .25s;

}

.profile-button:hover {

    background: var(--text-primary);

}

.profile-dropdown {

    position: absolute;

    top: 55px;

    right: 0;

    width: 220px;

    background: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    display: none;

    overflow: hidden;

}

.profile-dropdown a {

    display: block;

    padding: 15px 18px;

    font-size: 14px;

    transition: .25s;

}

.profile-dropdown a:hover {

    background: var(--bg-tip);

}

.profile-menu:hover .profile-dropdown {

    display: block;

}