/* =========================================================
   NEXUS RESEARCH CONSULTING
   REUSABLE COMPONENT STYLES
   ========================================================= */


/* =========================================================
   1. NAVBAR
   ========================================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

    background-color: var(--white);

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

    box-shadow: var(--shadow-sm);

    transition:
        background-color var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* Navbar container */

.navbar .container {

    min-height: 64px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   2. LOGO
   ========================================================= */

.logo {

    display: inline-flex;

    align-items: center;
    flex-shrink: 0;
}


.logo img {

    width: auto;

    height: 100px;

    max-width: 290px;

    object-fit: contain;
}


.logo:hover {

    opacity: 0.92;
}


/* =========================================================
   3. NAVIGATION LINKS
   ========================================================= */

.nav-links {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 28px;
}


.nav-links li {

    position: relative;
}


.nav-links a {

    position: relative;

    display: inline-block;

    padding: 8px 0;

    color: var(--primary);

    font-size: 0.95rem;

    font-weight: 500;

    transition:
        color var(--transition-fast);
}


/* Animated underline */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 2px;

    background-color: var(--secondary);

    transition: width var(--transition-normal);
}


.nav-links a:hover {

    color: var(--secondary);
}


.nav-links a:hover::after {

    width: 100%;
}


/* =========================================================
   4. PRIMARY NAVIGATION CTA
   ========================================================= */

.nav-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    border-radius: var(--radius-sm);

    background-color: var(--secondary);

    color: var(--white) !important;

    font-size: 0.9rem;

    font-weight: 600;

    transition:
        background-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.nav-cta::after {

    display: none !important;
}


.nav-cta:hover {

    background-color: #0C625C;

    color: var(--white) !important;

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   5. BUTTON SYSTEM
   ========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 50px;

    padding: 13px 26px;

    border: 2px solid transparent;

    border-radius: var(--radius-sm);

    font-family: var(--font-body);

    font-size: 0.95rem;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    cursor: pointer;

    transition:
        background-color var(--transition-normal),
        color var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


/* Primary button */

.btn-primary {

    background-color: var(--secondary);

    color: var(--white);

    border-color: var(--secondary);
}


.btn-primary:hover {

    background-color: #0C625C;

    border-color: #0C625C;

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


/* Secondary button */

.btn-secondary {

    background-color: transparent;

    color: var(--secondary);

    border-color: var(--secondary);
}


.btn-secondary:hover {

    background-color: var(--secondary);

    color: var(--white);

    border-color: var(--secondary);

    transform: translateY(-2px);
}


/* Gold / premium button */

.btn-accent {

    background-color: var(--accent);

    color: var(--primary);

    border-color: var(--accent);
}


.btn-accent:hover {

    background-color: #B58900;

    border-color: #B58900;

    color: var(--primary);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


/* Dark button */

.btn-dark {

    background-color: var(--primary);

    color: var(--white);

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


.btn-dark:hover {

    background-color: #07162A;

    border-color: #07162A;

    color: var(--white);

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   6. SECTION TITLES
   ========================================================= */

.section-title {

    margin-bottom: 15px;

    color: var(--primary);

    font-family: var(--font-heading);

    font-size: clamp(2rem, 4vw, 2.8rem);

    font-weight: 700;

    line-height: 1.25;

    text-align: center;
}


.section-subtitle {

    max-width: 760px;

    margin: 0 auto 50px;

    color: var(--text-light);

    font-size: 1.05rem;

    line-height: 1.8;

    text-align: center;
}


/* =========================================================
   7. SECTION EYEBROW
   ========================================================= */

.section-eyebrow {

    display: block;

    margin-bottom: 12px;

    color: var(--secondary);

    font-family: var(--font-body);

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 2px;

    line-height: 1.4;

    text-align: center;

    text-transform: uppercase;
}


/* =========================================================
   8. GRID SYSTEM
   ========================================================= */

.grid {

    display: grid;

    gap: 30px;
}


.grid-2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));
}


.grid-3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.grid-4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   9. GENERAL CARD
   ========================================================= */

.card {

    position: relative;

    height: 100%;

    padding: 28px;

    background-color: var(--surface);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}


.card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 3px;

    background-color: transparent;

    transition: background-color var(--transition-normal);
}


.card:hover {

    transform: translateY(-7px);

    border-color: rgba(15, 118, 110, 0.20);

    box-shadow: var(--shadow-lg);
}


.card:hover::before {

    background-color: var(--secondary);
}


.card h3 {

    margin-bottom: 1px;

    font-size: 1.25rem;
}


.card p {

    margin-bottom: 0;

    color: var(--text-light);

    line-height: 1.75;
}


/* =========================================================
   10. ICON BOX
   ========================================================= */

.icon-box {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin-bottom: 22px;

    border-radius: var(--radius-md);

    background-color: rgba(15, 118, 110, 0.09);

    color: var(--secondary);

    font-size: 1.5rem;
}


/* Gold icon box */

.icon-box-accent {

    background-color: rgba(201, 151, 0, 0.12);

    color: var(--accent);
}


/* =========================================================
   11. BADGES
   ========================================================= */

.badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    background-color: rgba(15, 118, 110, 0.09);

    color: var(--secondary);

    font-size: 0.78rem;

    font-weight: 600;

    line-height: 1.3;
}


.badge-accent {

    background-color: rgba(201, 151, 0, 0.12);

    color: #8A6800;
}


.badge-dark {

    background-color: rgba(11, 31, 58, 0.08);

    color: var(--primary);
}


/* =========================================================
   12. TRUST ITEMS
   ========================================================= */

.trust-list {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 18px 24px;
}


.trust-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--secondary);

    font-size: 0.9rem;

    font-weight: 600;
}


.trust-item::before {

    content: "✓";

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background-color: rgba(15, 118, 110, 0.10);

    font-size: 0.75rem;
}


/* =========================================================
   13. STATISTIC CARD
   ========================================================= */

.stat-card {

    text-align: center;

    padding: 35px 25px;
}


.stat-card .stat-number {

    display: block;

    margin-bottom: 8px;

    color: var(--secondary);

    font-family: var(--font-heading);

    font-size: 2.8rem;

    font-weight: 700;

    line-height: 1.1;
}


.stat-card .stat-label {

    display: block;

    color: var(--text-light);

    font-size: 0.95rem;

    font-weight: 500;
}


/* =========================================================
   14. SERVICE CARD
   ========================================================= */

.service-card {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.service-card .service-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 20px;

    color: var(--secondary);

    font-size: 0.9rem;

    font-weight: 600;
}


.service-card .service-link:hover {

    color: var(--primary);
}


.service-link::after {

    content: "→";

    transition: transform var(--transition-fast);
}


.service-link:hover::after {

    transform: translateX(4px);
}


/* =========================================================
   15. PROCESS STEP
   ========================================================= */

.process-step {

    position: relative;

    padding: 30px;

    background-color: var(--white);

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

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.process-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    margin-bottom: 20px;

    border-radius: 50%;

    background-color: var(--primary);

    color: var(--white);

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 700;
}


/* =========================================================
   16. TESTIMONIAL CARD
   ========================================================= */

.testimonial-card {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 2px;
}


.testimonial-quote {

    position: relative;

    margin-bottom: 5px;

    padding-left: 5px;

    color: var(--text);

    font-size: 1rem;

    line-height: 1.8;
}


.testimonial-quote::before {

    content: "“";

    position: absolute;

    left: 0;

    top: -8px;

    color: var(--accent);

    font-family: Georgia, serif;

    font-size: 3rem;

    line-height: 1;
}


.testimonial-author {

    margin-bottom: 0;

    color: var(--primary);

    font-size: 0.9rem;

    font-weight: 600;
}


/* =========================================================
   17. INSIGHT / ARTICLE CARD
   ========================================================= */

.article-card {

    display: flex;

    flex-direction: column;

    overflow: hidden;
}


.article-image {

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: var(--radius-md);

    margin-bottom: 22px;
}


.article-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

    color: var(--text-light);

    font-size: 0.8rem;
}


.article-card h3 {

    margin-bottom: 12px;
}


.article-card .read-more {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: auto;

    padding-top: 20px;

    color: var(--secondary);

    font-size: 0.9rem;

    font-weight: 600;
}


.article-card .read-more:hover {

    color: var(--primary);
}


/* =========================================================
   18. SOFTWARE / TOOL BADGE
   ========================================================= */

.software-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.software-card {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 80px;

    padding: 18px;

    background-color: var(--white);

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

    border-radius: var(--radius-md);

    color: var(--primary);

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 600;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        color var(--transition-normal);
}


.software-card:hover {

    transform: translateY(-4px);

    border-color: var(--secondary);

    color: var(--secondary);

    box-shadow: var(--shadow-md);
}


/* =========================================================
   19. CALL TO ACTION
   ========================================================= */

.cta-box {

    position: relative;

    padding: 70px 50px;

    border-radius: var(--radius-xl);

    background-color: var(--primary);

    color: var(--white);

    text-align: center;

    overflow: hidden;
}


.cta-box::before {

    content: "";

    position: absolute;

    top: -120px;

    right: -100px;

    width: 300px;

    height: 300px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 50%;
}


.cta-box::after {

    content: "";

    position: absolute;

    bottom: -160px;

    left: -100px;

    width: 350px;

    height: 350px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.cta-box h2 {

    position: relative;

    z-index: 1;

    color: var(--white);

    margin-bottom: 15px;
}


.cta-box p {

    position: relative;

    z-index: 1;

    max-width: 720px;

    margin: 0 auto 30px;

    color: rgba(255, 255, 255, 0.78);
}


.cta-box .btn {

    position: relative;

    z-index: 1;
}


/* =========================================================
   20. FORM ELEMENTS
   ========================================================= */

.form-group {

    margin-bottom: 22px;
}


.form-group label {

    display: block;

    margin-bottom: 8px;

    color: var(--primary);

    font-size: 0.9rem;

    font-weight: 600;
}


.form-control {

    width: 100%;

    min-height: 50px;

    padding: 12px 15px;

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

    border-radius: var(--radius-sm);

    background-color: var(--white);

    color: var(--text);

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}


.form-control:focus {

    border-color: var(--secondary);

    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.10);
}


textarea.form-control {

    min-height: 150px;

    resize: vertical;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

footer {

    position: relative;

    background-color: var(--primary);

    color: rgba(255, 255, 255, 0.78);

    padding: 70px 0 25px;
}


.footer-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 50px;

    padding-bottom: 50px;
}


.footer-brand img {

    width: auto;

    height: 60px;

    margin-bottom: 20px;
}


.footer-brand p {

    max-width: 360px;

    color: rgba(255, 255, 255, 0.70);

    font-size: 0.92rem;
}


.footer-column h3 {

    margin-bottom: 20px;

    color: var(--white);

    font-size: 1rem;
}


.footer-links {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.footer-links a {

    color: rgba(255, 255, 255, 0.70);

    font-size: 0.9rem;
}


.footer-links a:hover {

    color: var(--white);

    transform: translateX(3px);
}


.footer-bottom {

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);

    text-align: center;
}


.footer-bottom p {

    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.82rem;
}


/* =========================================================
   22. SOCIAL LINKS
   ========================================================= */

.social-links {

    display: flex;

    align-items: center;

    gap: 10px;
}


.social-links a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    color: rgba(255, 255, 255, 0.75);

    font-size: 0.85rem;
}


.social-links a:hover {

    background-color: var(--secondary);

    border-color: var(--secondary);

    color: var(--white);

    transform: translateY(-2px);
}


/* =========================================================
   23. DIVIDER
   ========================================================= */

.divider {

    width: 70px;

    height: 3px;

    margin: 20px auto;

    background-color: var(--accent);

    border-radius: 999px;
}


/* =========================================================
   24. SCROLL-TO-TOP BUTTON
   ========================================================= */

.scroll-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    z-index: 900;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background-color: var(--secondary);

    color: var(--white);

    box-shadow: var(--shadow-md);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
}


.scroll-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.scroll-top:hover {

    background-color: var(--primary);

    transform: translateY(-3px);
}