@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bs-emerald-900: #0f3627;
    --bs-emerald-700: #18613C;
    --bs-emerald-500: #2fa36d;
    --bs-emerald-100: #dff8ef;
    --bs-gold: #d4af37;
    --bs-gold-soft: #f0d88b;
    --bs-ink: #10231c;
    --bs-muted: #66736e;
    --bs-card: rgba(255, 255, 255, 0.82);
    --bs-border: rgba(16, 177, 124, 0.22);
    --bs-glow: 0 0 20px rgba(16, 177, 124, 0.15);
    --bs-shadow: 0 24px 70px rgba(13, 122, 87, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Poppins', Arial, sans-serif !important;
    color: var(--bs-ink);
    background: #ffffff !important;
    opacity: 0;
    transform: scale(0.985);
    animation: bsPageIn 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    letter-spacing: 0;
}

body.bs-page-leave {
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 360ms ease, transform 360ms ease;
}

body::before,
body::after {
    display: none;
}

body::before {
    width: 420px;
    height: 420px;
    top: 7rem;
    right: -120px;
    background: radial-gradient(circle, rgba(16,185,129,0.16), transparent 68%);
}

body::after {
    width: 320px;
    height: 320px;
    bottom: 8rem;
    left: -90px;
    background: radial-gradient(circle, rgba(212,175,55,0.14), transparent 66%);
}

h1, h2, h3, h4,
.nav-brand,
.section-title,
.page-header h1,
.feedback-title,
.panel h1,
.secondary h2 {
    font-family: 'Inter', 'Poppins', Arial, sans-serif !important;
    letter-spacing: 0;
}

p, a, button, input, textarea, select, label, span, li {
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
}

nav {
    background: rgba(13, 122, 87, 0.78) !important;
    backdrop-filter: blur(20px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 14px 40px rgba(13, 122, 87, 0.14);
}

.nav-brand {
    font-weight: 800 !important;
}

.nav-left {
    gap: 0.75rem !important;
}

.nav-left a,
.nav-left li a {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    border-radius: 999px !important;
    padding: 0.58rem 0.95rem !important;
    transition: transform 240ms ease, background 240ms ease, color 240ms ease, box-shadow 240ms ease !important;
}

.nav-left a::after,
.nav-left li a::after {
    display: none !important;
}

.nav-left a:hover,
.nav-left li a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
}

.nav-left a.active,
.nav-left li a.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 0 20px rgba(16,177,124,.22), inset 0 -2px 0 #ffffff;
}

.btn-signup,
.btn-cta-primary,
.btn-primary,
.btn-submit,
.btn-try-now,
.cta,
.btn-book,
.btn-cart-book,
.btn-confirm,
.btn-proceed {
    background: linear-gradient(135deg, var(--bs-emerald-500) 0%, var(--bs-emerald-700) 100%) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px rgba(16, 177, 124, 0.24), 0 0 20px rgba(16,177,124,.15) !important;
    transition: transform 240ms ease, box-shadow 240ms ease, filter 240ms ease !important;
    position: relative;
    overflow: hidden;
}

.btn-signup:hover,
.btn-cta-primary:hover,
.btn-primary:hover,
.btn-submit:hover,
.btn-try-now:hover,
.cta:hover,
.btn-book:hover,
.btn-cart-book:hover,
.btn-confirm:hover,
.btn-proceed:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 16px 34px rgba(16, 177, 124, 0.3), 0 0 24px rgba(16,177,124,.2) !important;
    filter: saturate(1.05);
}

.btn-login,
.btn-secondary,
.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
    transition: transform 240ms ease, background 240ms ease, border-color 240ms ease, box-shadow 240ms ease !important;
}

.btn-login:hover,
.btn-secondary:hover,
.btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(16,177,124,0.75) !important;
    box-shadow: 0 0 16px rgba(255,255,255,0.16), 0 0 20px rgba(16,177,124,.15);
    transform: translateY(-2px);
}

footer {
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(16,177,124,0.16), transparent 62%),
        linear-gradient(135deg, rgba(13, 122, 87, 0.96), #083a2a) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.24);
    box-shadow: 0 -20px 60px rgba(6, 95, 70, 0.13);
}

.footer-bottom {
    border-top: 1px solid rgba(212, 175, 55, 0.25) !important;
}

.footer-logo img {
    box-shadow: 0 0 24px rgba(212,175,55,0.18);
}

.service-card,
.feature-card,
.testimonial-card,
.stat-card,
.accordion-item,
.trend-card,
.feedback-card,
.face-rec-card,
.panel,
.secondary,
.card,
.faq-item {
    border: 1px solid var(--bs-border) !important;
    box-shadow: var(--bs-glow), var(--bs-shadow) !important;
}

.service-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.stat-card:hover,
.preview-service-card:hover,
.accordion-item:hover,
.trend-card:hover,
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 34px rgba(16,185,129,.14), 0 28px 80px rgba(6,95,70,.14) !important;
}

.hero {
    position: relative;
    overflow: hidden;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.42rem 0.85rem;
    border: 1px solid rgba(16,185,129,0.22);
    border-radius: 999px;
    background: rgba(255,255,255,0.66);
    color: var(--bs-emerald-900);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 0 18px rgba(16,185,129,.08);
}

.hero-text h1 {
    background: linear-gradient(135deg, #063f31 0%, #047857 78%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.hero-text p {
    color: #5d6b66 !important;
}

.hero .btn-secondary.hero-secondary {
    color: var(--bs-emerald-900) !important;
    border-color: rgba(6,95,70,0.55) !important;
    background: rgba(255,255,255,0.58) !important;
}

.hero .btn-secondary.hero-secondary:hover {
    color: #fff !important;
    background: rgba(6,95,70,0.9) !important;
}

.hero-image-wrapper {
    animation: bsFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(16,185,129,.15));
}

.hero-image-wrapper img {
    box-shadow: 0 0 40px rgba(16,185,129,.15), 0 30px 70px rgba(6,95,70,.16) !important;
}

.hero-orb {
    display: none;
}

.hero-orb-one {
    width: 7rem;
    height: 7rem;
    top: -2rem;
    right: -2rem;
    background: rgba(212,175,55,0.18);
}

.hero-orb-two {
    width: 8rem;
    height: 8rem;
    bottom: -2.5rem;
    left: -2rem;
    background: rgba(16,185,129,0.14);
}

.hero-image-accent {
    position: absolute;
    right: -1rem;
    bottom: 2.25rem;
    z-index: 3;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(212,175,55,0.28);
    color: var(--bs-emerald-900);
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(6,95,70,0.14), 0 0 16px rgba(212,175,55,0.16);
    backdrop-filter: blur(16px);
}

.trust-section,
.popular-services {
    padding: 4rem 2.5rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.stat-card,
.preview-service-card {
    background: var(--bs-card);
    border: 1px solid var(--bs-border);
    border-radius: 16px;
    box-shadow: var(--bs-glow), 0 18px 44px rgba(6,95,70,.08);
    backdrop-filter: blur(18px);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.stat-card {
    padding: 1.35rem;
    text-align: center;
}

.stat-value {
    display: block;
    font-family: 'Inter', 'Poppins', Arial, sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--bs-emerald-900);
    line-height: 1;
}

.stat-text {
    display: block;
    margin-top: 0.55rem;
    color: var(--bs-muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.popular-services {
    background: transparent;
}

.trust-section,
.popular-services,
.why-choose-us,
.testimonials,
.featured-services,
.faq-section {
    background: transparent !important;
}

.preview-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.preview-service-card {
    display: block;
    min-height: 180px;
    padding: 1.35rem;
    color: inherit;
    text-decoration: none;
}

.preview-icon,
.feature-card .feature-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6,95,70,0.94), rgba(16,185,129,0.86));
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    box-shadow: 0 0 18px rgba(16,185,129,.22);
}

.preview-service-card h3,
.feature-card h3,
.testimonial-card h4 {
    color: var(--bs-emerald-900) !important;
}

.preview-service-card p,
.feature-card p,
.testimonial-text {
    color: var(--bs-muted) !important;
}

.feature-card {
    border-radius: 16px !important;
    background: var(--bs-card) !important;
    backdrop-filter: blur(18px);
}

.testimonials {
    background: transparent !important;
}

.cta-section {
    margin: 2rem auto 5rem;
    max-width: 1180px;
    width: calc(100% - 2rem);
    border-radius: 28px;
    background:
        radial-gradient(90% 160% at 50% 0%, rgba(212,175,55,0.16), transparent 55%),
        linear-gradient(135deg, rgba(6,95,70,0.94), rgba(16,185,129,0.26)) !important;
    box-shadow: 0 0 30px rgba(16,185,129,.12), 0 28px 90px rgba(6,95,70,.16);
    border: 1px solid rgba(16,185,129,.18);
}

.cta-section h2,
.cta-section p {
    color: #fff !important;
}

@keyframes bsFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

.accordion-header {
    background: rgba(255,255,255,0.74) !important;
    color: var(--bs-ink) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(16,177,124,0.2);
    box-shadow: 0 0 20px rgba(16,177,124,.08);
    backdrop-filter: blur(16px);
}

.face-rec-card,
.feedback-card,
.panel {
    background:
        linear-gradient(135deg, rgba(13,122,87,0.98), rgba(7,58,42,0.96)) !important;
}

.filter-bar input,
.filter-bar select,
.search-input,
.form-group input,
.form-group textarea,
.form-group select {
    border-radius: 12px !important;
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.filter-bar input:focus,
.filter-bar select:focus,
.search-input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: rgba(16,177,124,0.55) !important;
    box-shadow: 0 0 0 4px rgba(16,177,124,0.12) !important;
}

/* Public page system overrides */
.page-header,
.section-header,
.section-title {
    position: relative;
}

.page-header h1,
.section-title,
.section-header h2 {
    color: var(--bs-ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.page-header h1 {
    font-size: clamp(2.75rem, 6vw, 5.5rem) !important;
    line-height: 0.95 !important;
}

.section-header p,
.page-header p,
.hero-text p {
    color: var(--bs-muted) !important;
}

.filter-bar {
    max-width: 1050px !important;
    margin: 0 auto 3rem !important;
    padding: 0.8rem !important;
    border: 1px solid rgba(16,177,124,0.16) !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.68) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 0 20px rgba(16,177,124,.08), 0 18px 45px rgba(13,122,87,0.08);
}

.search-box input,
.filter-dropdown select,
.search-input {
    min-height: 46px;
    border: 1px solid rgba(16,177,124,0.18) !important;
    background-color: rgba(255,255,255,0.86) !important;
    color: var(--bs-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.services-wrap {
    max-width: 1180px !important;
    gap: 1rem !important;
}

.accordion-item {
    border-radius: 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.accordion-header {
    min-height: 112px;
    padding: 1.25rem 1.5rem !important;
    font-family: 'Inter', 'Poppins', Arial, sans-serif !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease !important;
}

.accordion-header::before {
    content: 'BS';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    border-radius: 16px;
    background: var(--bs-emerald-100);
    color: var(--bs-emerald-700);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 0 20px rgba(16,177,124,.15);
}

.accordion-header:hover {
    padding-left: 1.5rem !important;
    transform: translateY(-4px);
    border-color: rgba(16,177,124,0.42);
    box-shadow: 0 0 20px rgba(16,177,124,.15), 0 22px 60px rgba(13,122,87,0.13) !important;
}

.accordion-toggle {
    margin-left: auto;
    background: var(--bs-emerald-500) !important;
    color: #fff;
    box-shadow: 0 0 20px rgba(16,177,124,.18);
}

.accordion-content {
    margin-top: 0.75rem;
    border-radius: 22px;
    background: rgba(255,255,255,0.54) !important;
    backdrop-filter: blur(18px);
}

.accordion-item.active .accordion-content {
    border: 1px solid rgba(16,177,124,0.16);
    box-shadow: 0 0 20px rgba(16,177,124,.09), 0 22px 60px rgba(13,122,87,0.1);
}

.accordion-body {
    padding: 1.25rem !important;
}

.services-grid {
    gap: 1rem !important;
}

.service-card {
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(16,177,124,0.16) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 0 20px rgba(16,177,124,.08), 0 18px 45px rgba(13,122,87,.08) !important;
}

.service-thumb,
.service-thumb-placeholder {
    height: 190px !important;
    border-radius: 0 !important;
}

.service-info {
    padding: 1rem !important;
}

.service-name {
    min-height: auto !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    color: var(--bs-ink) !important;
}

.service-price {
    color: var(--bs-emerald-700) !important;
}

.btn-book {
    border-radius: 999px !important;
    padding: 0.58rem 1rem !important;
}

.btn-book.added {
    background: #fff !important;
    color: var(--bs-emerald-700) !important;
    border: 1px solid rgba(16,177,124,0.45) !important;
}

.trend-card,
.testimonial-card,
.feature-card,
.preview-service-card,
.stat-card,
.faq-item,
.secondary,
.card {
    background: rgba(255,255,255,0.78) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(18px);
}

.trend-card-name,
.feedback-title,
.panel h1,
.secondary h2 {
    color: var(--bs-ink) !important;
}

.face-rec-left h2,
.feedback-title,
.panel h1 {
    color: #fff !important;
}

.filter-btn.active,
.sort-btn.active,
.trend-card-cta {
    background: linear-gradient(135deg, var(--bs-emerald-500), var(--bs-emerald-700)) !important;
    border-color: transparent !important;
    box-shadow: 0 0 20px rgba(16,177,124,.15) !important;
}

.feedback-card {
    border-radius: 24px !important;
}

.star-btn.active,
.star-btn.hover,
.star-rating {
    color: var(--bs-gold) !important;
}

.flash-success {
    color: #064e3b !important;
    background: var(--bs-emerald-100) !important;
    border-color: rgba(16,177,124,0.32) !important;
}

.faq-item {
    overflow: hidden;
}

.faq-item summary {
    color: var(--bs-ink) !important;
    transition: background 260ms ease, color 260ms ease;
}

.faq-item summary::after {
    color: var(--bs-emerald-500) !important;
}

.faq-item[open] summary {
    background: var(--bs-emerald-100) !important;
    border-bottom-color: rgba(16,177,124,0.16) !important;
}

.faq-item p {
    color: var(--bs-muted) !important;
}

.wrap {
    max-width: 1120px !important;
}

.contact-grid .card {
    background: rgba(255,255,255,0.1) !important;
}

.contact-grid .card .value,
.contact-grid .card .label {
    color: rgba(255,255,255,0.88) !important;
}

.bs-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.55);
    transform: translate(-50%, -50%) scale(0);
    animation: bsRipple 520ms ease-out forwards;
    pointer-events: none;
}

@keyframes bsRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(22);
    }
}

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes bsPageIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body,
    [data-reveal],
    .hero-image-wrapper {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 900px) {
    nav {
        background: rgba(6, 95, 70, 0.92) !important;
    }

    .nav-left,
    .nav-right {
        gap: 0.5rem !important;
    }

    .trust-section,
    .popular-services {
        padding: 3rem 1rem;
    }

    .trust-grid,
    .preview-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-image-accent {
        right: 0.25rem;
        bottom: 1rem;
    }
}

@media (max-width: 560px) {
    .trust-grid,
    .preview-services-grid {
        grid-template-columns: 1fr;
    }

    .stat-card,
    .preview-service-card {
        border-radius: 14px;
    }

    .hero-kicker {
        font-size: 0.68rem;
    }

    .hero-image-accent {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-flex;
        margin-top: 0.85rem;
    }
}

/* BeautySys 2026 visual refresh: authoritative #18613C palette and responsive polish */
nav {
    background: rgba(24, 97, 60, 0.9) !important;
    box-shadow: 0 16px 44px rgba(24, 97, 60, 0.18) !important;
}

.btn-signup,
.btn-cta-primary,
.btn-primary,
.btn-submit,
.btn-try-now,
.cta,
.btn-book,
.btn-cart-book,
.btn-confirm,
.btn-proceed,
.filter-btn.active,
.sort-btn.active,
.trend-card-cta {
    background: linear-gradient(135deg, #2fa36d 0%, #18613C 68%, #0f3627 100%) !important;
    box-shadow: 0 14px 32px rgba(24, 97, 60, 0.26), 0 0 22px rgba(24, 97, 60, 0.16) !important;
}

.hero-text h1,
.page-header h1 {
    background: linear-gradient(135deg, #092b1f 0%, #18613C 76%, #2fa36d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.hero .btn-secondary.hero-secondary {
    border-color: rgba(24, 97, 60, 0.55) !important;
    color: #18613C !important;
}

.hero .btn-secondary.hero-secondary:hover {
    background: #18613C !important;
    color: #fff !important;
}

.service-card,
.feature-card,
.testimonial-card,
.stat-card,
.preview-service-card,
.faq-item,
.trend-card,
.feedback-card,
.face-rec-card,
.panel,
.secondary,
.card {
    border-color: rgba(24, 97, 60, 0.18) !important;
    box-shadow: 0 0 22px rgba(24, 97, 60, 0.09), 0 24px 70px rgba(24, 97, 60, 0.11) !important;
}

.service-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.stat-card:hover,
.preview-service-card:hover,
.trend-card:hover,
.card:hover {
    box-shadow: 0 0 34px rgba(24, 97, 60, 0.15), 0 28px 80px rgba(24, 97, 60, 0.14) !important;
}

.preview-icon,
.feature-card .feature-icon {
    background: linear-gradient(135deg, #18613C, #2fa36d) !important;
}

.cta-section {
    background:
        radial-gradient(90% 160% at 50% 0%, rgba(202, 168, 90, 0.16), transparent 55%),
        linear-gradient(135deg, rgba(24, 97, 60, 0.96), rgba(47, 163, 109, 0.28)) !important;
    box-shadow: 0 0 30px rgba(24, 97, 60, 0.12), 0 28px 90px rgba(24, 97, 60, 0.16) !important;
}

.filter-bar,
.search-box input,
.filter-dropdown select,
.search-input,
.form-group input,
.form-group textarea,
.form-group select {
    border-color: rgba(24, 97, 60, 0.18) !important;
}

.filter-bar input:focus,
.filter-bar select:focus,
.search-input:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: rgba(24, 97, 60, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(24, 97, 60, 0.13) !important;
}

@media (max-width: 768px) {
    nav {
        background: rgba(24, 97, 60, 0.96) !important;
    }

    .hero {
        min-height: auto !important;
        padding: 3.5rem 1rem !important;
    }

    .hero-text h1,
    .page-header h1 {
        font-size: clamp(2.25rem, 12vw, 3.6rem) !important;
        line-height: 1.05 !important;
    }
}

/* Customer experience premium pass */
body {
    background:
        radial-gradient(circle at 14% 12%, rgba(24, 97, 60, 0.10), transparent 26%),
        radial-gradient(circle at 86% 18%, rgba(202, 168, 90, 0.13), transparent 24%),
        linear-gradient(135deg, #fbfdfb 0%, #ffffff 46%, #f0f8f3 100%) !important;
}

nav {
    min-height: 74px !important;
    padding: 0 2rem !important;
    gap: 1.5rem !important;
}

.nav-brand img {
    border-radius: 14px !important;
    box-shadow: 0 0 22px rgba(202, 168, 90, 0.22) !important;
}

.nav-left,
.nav-right {
    align-items: center !important;
}

.nav-left a,
.nav-left li a {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.btn-login,
.btn-signup,
.nav-right form button {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 0.7rem 1.15rem !important;
    line-height: 1 !important;
}

.nav-toggle {
    border-radius: 999px !important;
    padding: 0.6rem 1rem !important;
    font-weight: 800 !important;
}

.hero {
    max-width: 1480px !important;
    min-height: min(760px, calc(100vh - 74px)) !important;
    padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 5vw, 4.5rem) !important;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 2rem;
    z-index: -1;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(255,255,255,0.58), rgba(221,245,232,0.34));
    border: 1px solid rgba(24,97,60,0.10);
    box-shadow: 0 30px 100px rgba(24,97,60,0.08);
}

.hero-kicker,
.contact-kicker,
.story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(24,97,60,0.18) !important;
    background: rgba(255,255,255,0.78) !important;
    color: #18613C !important;
    box-shadow: 0 14px 34px rgba(24,97,60,0.08) !important;
}

.hero-kicker::before,
.contact-kicker::before,
.story-kicker::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #caa85a, #2fa36d);
    box-shadow: 0 0 0 5px rgba(24,97,60,0.08);
}

.hero-text h1 {
    font-size: clamp(3.2rem, 7vw, 6.35rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    max-width: 760px !important;
}

.hero-text p {
    max-width: 620px !important;
    font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
}

.hero-cta-buttons {
    gap: 0.85rem !important;
}

.btn-primary,
.btn-secondary,
.btn-cta-primary,
.btn-cta-secondary {
    border-radius: 999px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0.02em !important;
}

.hero-image-wrapper {
    max-width: 560px !important;
    border-radius: 34px !important;
}

.hero-image-wrapper img {
    border-radius: 32px !important;
    object-position: center !important;
}

.hero-image-bg {
    border-radius: 34px !important;
    background: linear-gradient(135deg, rgba(24,97,60,0.12), rgba(202,168,90,0.16)) !important;
}

.hero-image-accent {
    border-radius: 999px !important;
    border-color: rgba(24,97,60,0.18) !important;
    font-size: 0.82rem !important;
}

.trust-section {
    margin-top: -1.25rem !important;
}

.trend-card {
    position: relative !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,251,248,0.88)) !important;
    border: 1px solid rgba(24,97,60,0.16) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(24,97,60,0.10), inset 0 1px 0 rgba(255,255,255,0.85) !important;
    overflow: hidden !important;
}

.trend-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(202,168,90,0.12), transparent 36%, rgba(24,97,60,0.08));
    opacity: 0;
    transition: opacity 260ms ease;
}

.trend-card:hover::after {
    opacity: 1;
}

.trend-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(24,97,60,0.32) !important;
}

.trend-card-image-wrapper {
    background: linear-gradient(135deg, rgba(221,245,232,0.85), rgba(255,255,255,0.9)) !important;
}

.trend-card-body {
    background: rgba(255,255,255,0.72) !important;
}

.trend-card-name {
    color: #10231c !important;
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
}

.trend-tag {
    border-radius: 999px !important;
}

.trends-controls,
.filter-controls {
    align-items: center !important;
}

.filter-btn,
.sort-btn {
    min-height: 42px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(24,97,60,0.08);
}

.bs-testimonials-section,
.brand-story-section,
.mission-vision-section,
.timeline-section,
.team-showcase-section,
.contact-experience {
    max-width: 1180px;
    width: calc(100% - 2rem);
    margin: 0 auto;
}

.bs-testimonials-section {
    padding: clamp(2rem, 5vw, 4.5rem) 0 5rem;
}

.bs-section-heading,
.timeline-section .section-header,
.team-showcase-section .section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.bs-section-heading span,
.mission-vision-section span,
.timeline-item span,
.contact-info-card span {
    color: #18613C;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
}

.bs-section-heading h2,
.contact-hero h1,
.brand-story-section h2 {
    color: #10231c;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1;
    margin: 0.65rem 0 1rem;
}

.bs-review-grid,
.contact-info-grid,
.mission-vision-section,
.timeline-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.35rem);
}

.bs-review-card,
.contact-info-card,
.contact-form-card,
.contact-social-card,
.story-panel,
.mission-vision-section article,
.timeline-item,
.team-grid article {
    border: 1px solid rgba(24,97,60,0.16);
    border-radius: 8px;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(24,97,60,0.10);
    padding: 1.35rem;
}

.bs-review-card.featured {
    background:
        linear-gradient(135deg, rgba(18,53,36,0.97), rgba(45,122,84,0.9));
    color: #fff;
}

.bs-review-card {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    overflow: hidden;
}

.bs-review-top {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
}

.bs-review-top > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.bs-review-top h3 {
    margin: 0;
    color: #10231c;
    font-size: .98rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.bs-review-card.featured .bs-review-top h3 {
    color: #fff;
}

.bs-review-top p {
    margin: .15rem 0 0;
    color: #66736e;
    font-size: .78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bs-review-card.featured .bs-review-top p {
    color: rgba(255,255,255,.76);
}

.bs-review-card > p {
    margin: 0;
    color: #3f4f48;
    line-height: 1.7;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bs-review-card.featured > p {
    color: rgba(255,255,255,.88);
}

.bs-avatar,
.team-avatar,
.contact-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #18613C, #2fa36d);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(24,97,60,0.22);
}

.bs-rating {
    margin-left: auto;
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    background: rgba(202,168,90,0.18);
    color: #caa85a;
    font-weight: 900;
    flex: 0 0 auto;
    font-size: .82rem;
}

.bs-review-card.featured .bs-rating {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

.bs-stars {
    color: #caa85a;
    letter-spacing: 0.1em;
    margin-top: auto;
    font-size: .9rem;
    white-space: nowrap;
}

.feedback-card {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.contact-experience {
    padding: clamp(2rem, 5vw, 4rem) 0 5rem !important;
}

.contact-hero,
.brand-story-grid,
.contact-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.contact-hero,
.brand-story-section {
    margin-top: 2rem;
}

.contact-hero {
    border-radius: 32px;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        radial-gradient(circle at 90% 15%, rgba(202,168,90,0.18), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(221,245,232,0.58));
    border: 1px solid rgba(24,97,60,0.14);
    box-shadow: 0 24px 80px rgba(24,97,60,0.12);
}

.contact-hero p,
.brand-story-section p,
.mission-vision-section p,
.timeline-item p,
.team-grid p {
    color: #66736e;
}

.contact-actions,
.social-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.contact-ghost,
.social-pills a {
    background: rgba(255,255,255,0.64) !important;
    color: #18613C !important;
    border: 1px solid rgba(24,97,60,0.22) !important;
}

.contact-visual {
    display: grid;
    align-content: center;
    gap: 1rem;
}

.contact-orbit-card,
.contact-map-card,
.contact-field {
    border-radius: 20px;
    border: 1px solid rgba(24,97,60,0.15);
    background: rgba(255,255,255,0.72);
    padding: 1rem;
    box-shadow: 0 14px 34px rgba(24,97,60,0.08);
}

.contact-orbit-card span,
.contact-map-card span {
    display: block;
    color: #66736e;
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
}

.contact-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.contact-info-card strong {
    display: block;
    margin-top: 0.6rem;
    color: #10231c;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.contact-field.wide {
    grid-column: 1 / -1;
    min-height: 96px;
}

.brand-story-section,
.mission-vision-section,
.timeline-section,
.team-showcase-section {
    padding: 3rem 0;
}

.brand-story-grid {
    align-items: center;
}

.mission-vision-section article,
.team-grid article {
    transition: transform 260ms ease, box-shadow 260ms ease;
}

.mission-vision-section article:hover,
.team-grid article:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 80px rgba(24,97,60,0.14);
}

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

footer {
    margin-top: 0 !important;
    padding: clamp(3rem, 6vw, 5rem) 1.25rem 2rem !important;
}

.footer-container {
    max-width: 1180px !important;
}

.footer-grid {
    grid-template-columns: 1.25fr repeat(3, minmax(150px, 1fr)) !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    align-items: start !important;
}

.footer-column h4 {
    font-size: 0.95rem !important;
    letter-spacing: 0.04em !important;
}

.footer-column a {
    line-height: 1.7 !important;
}

.footer-logo {
    align-items: flex-start !important;
    text-align: left !important;
}

@media (max-width: 980px) {
    .bs-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bs-testimonials-section {
        width: calc(100% - 1.25rem);
        padding-bottom: 3.5rem;
    }

    .bs-section-heading h2 {
        font-size: clamp(1.85rem, 11vw, 2.45rem);
    }

    .bs-review-grid {
        grid-template-columns: 1fr;
    }

    .bs-review-card {
        min-height: 0;
    }
}

@media (max-width: 980px) {
    nav {
        padding: 0.75rem 1rem !important;
    }

    .hero::before {
        inset: 0.75rem;
    }

    .contact-hero,
    .brand-story-grid,
    .contact-workspace {
        grid-template-columns: 1fr;
    }

    .contact-info-grid,
    .timeline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bs-review-grid,
    .mission-vision-section,
    .team-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 2.5rem 1rem !important;
    }

    .hero-text h1 {
        font-size: clamp(2.6rem, 15vw, 4rem) !important;
    }

    .hero-cta-buttons,
    .contact-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .hero-cta-buttons a,
    .contact-actions a {
        width: 100% !important;
    }

    .contact-info-grid,
    .contact-form-grid,
    .timeline-grid {
        grid-template-columns: 1fr;
    }

    .contact-field.wide {
        grid-column: auto;
    }
}