/* ==========================================================================
   KORU COFFEE LIMITED — stylesheet
   A warm, coffee-inspired design system.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --coffee-950: #1d1109;
    --coffee-900: #24150d;
    --coffee-800: #2f1d14;
    --coffee-700: #3d2a1c;
    --coffee-600: #52381f;

    --amber-500:  #c1863b;
    --amber-600:  #a86f2c;
    --amber-700:  #8a5a24;
    --amber-100:  #f0ddbe;
    --amber-050:  #f8ecd8;

    --cream:      #faf6ef;
    --paper:      #fffdf9;
    --ink:        #37291d;
    --muted:      #6d5f51;
    --line:       #eadfd1;

    --shadow-sm:  0 1px 2px rgba(55, 41, 29, .06), 0 6px 20px rgba(55, 41, 29, .06);
    --shadow-md:  0 4px 14px rgba(55, 41, 29, .10), 0 16px 40px rgba(55, 41, 29, .10);
    --radius:     14px;
    --radius-sm:  10px;

    --font-head:  'Lora', Georgia, serif;
    --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--coffee-900);
    line-height: 1.25;
    margin: 0 0 .5em;
    font-weight: 600;
}

a {
    color: var(--amber-700);
    transition: color .2s ease;
}
a:hover { color: var(--coffee-800); }

p { margin: 0 0 1em; }

::selection { background: var(--amber-500); color: #fff; }

:focus-visible {
    outline: 3px solid var(--amber-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Accessible skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--coffee-900);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

main { display: block; }

/* ---------- Layout helpers ---------- */
.container { max-width: 1200px; }

.section {
    padding: 5rem 0;
}
.section-tight { padding: 3rem 0; }

/* Section headers */
.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head .eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--amber-700);
    margin-bottom: .6rem;
}
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: .7rem; }
.section-head p.lead { color: var(--muted); font-size: 1.05rem; margin: 0; }

.text-left .section-head { text-align: left; margin-left: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .72rem 1.6rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .25s ease;
}
.btn-primary {
    background: var(--amber-500);
    color: var(--coffee-950);
    border-color: var(--amber-500);
}
.btn-primary:hover {
    background: var(--coffee-800);
    border-color: var(--coffee-800);
    color: var(--amber-050);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-outline {
    background: transparent;
    color: var(--paper);
    border-color: rgba(255, 255, 255, .85);
}
.btn-outline:hover {
    background: var(--amber-500);
    border-color: var(--amber-500);
    color: var(--coffee-950);
    transform: translateY(-2px);
}
.btn-dark {
    background: var(--coffee-900);
    color: var(--paper);
    border-color: var(--coffee-900);
}
.btn-dark:hover {
    background: var(--amber-500);
    border-color: var(--amber-500);
    color: var(--coffee-950);
    transform: translateY(-2px);
}
.btn-sm { padding: .5rem 1.1rem; font-size: .85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: relative; z-index: 50; }

/* Top bar */
.top-bar {
    background: var(--coffee-900);
    color: #e9ddcb;
    padding: .55rem 0;
    font-size: .88rem;
}
.top-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: #fff;
}
.top-logo:hover { color: var(--amber-100); }
.top-logo-text { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.1; }
.top-logo-text strong { display: block; letter-spacing: .22em; font-size: 1.05rem; }
.top-logo-text span { display: block; font-size: .8rem; letter-spacing: .08em; color: var(--amber-100); }

.top-contact { gap: 1.4rem; }
@media (max-width: 767.98px) {
    .top-bar { display: none; }
}
.top-contact-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #e9ddcb;
    text-decoration: none;
}
.top-contact-item i { color: var(--amber-500); }
.top-contact-item:hover { color: #fff; }

/* Navigation */
.nav-bar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(55, 41, 29, .03);
}
.nav-container { position: relative; }

.nav-bar.navbar {
    background: var(--paper) !important;
    padding: .55rem 0;
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: var(--coffee-900);
    text-decoration: none;
}
.navbar-brand:hover { color: var(--coffee-900); }
.navbar-brand span { letter-spacing: .04em; }

.navbar-nav .nav-link {
    color: var(--ink) !important;
    font-weight: 500;
    font-size: .95rem;
    padding: .55rem .85rem !important;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease;
}
.navbar-nav .nav-link:hover { color: var(--amber-700) !important; background: var(--amber-050); }
.navbar-nav .nav-link.active { color: var(--amber-700) !important; }

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    margin-top: .5rem;
    min-width: 230px;
}
.dropdown-item {
    border-radius: 8px;
    padding: .5rem .8rem;
    font-size: .92rem;
    color: var(--ink);
}
.dropdown-item:hover { background: var(--amber-050); color: var(--coffee-800); }
.dropdown-header { color: var(--amber-700); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.dropdown-divider { border-color: var(--line); }

.navbar-toggler { border: 1px solid var(--line); color: var(--coffee-900); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%233d2a1c' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.btn-nav { margin-left: .5rem; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 991.98px) {
    .nav-actions { margin: .6rem 0 .4rem; }
}

/* Sticky nav */
.nav-bar.nav-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 6px 24px rgba(29, 17, 9, .12);
    animation: navIn .3s ease;
}
@keyframes navIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--coffee-900);
    height: 82vh;
    min-height: 500px;
    max-height: 860px;
}
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item { height: 100%; }
.hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(29,17,9,.55) 0%, rgba(29,17,9,.35) 55%, rgba(29,17,9,.75) 100%);
}
.hero .carousel-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1rem;
    z-index: 2;
}
.hero .hero-kicker {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber-100);
    margin-bottom: .9rem;
}
.hero .carousel-caption h1 {
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    max-width: 17ch;
    margin: 0 auto 1.1rem;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero .carousel-caption p.lead {
    color: #f3e9d9;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    max-width: 46ch;
    margin: 0 auto 1.8rem;
}
.hero .hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

.hero .carousel-indicators { z-index: 3; }
.hero .carousel-indicators li {
    width: 26px; height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.45);
    border: 0;
    transition: background .25s;
}
.hero .carousel-indicators li.active { background: var(--amber-500); }
.hero .carousel-control-prev, .hero .carousel-control-next { z-index: 3; }

.hero .carousel .animated { animation-duration: .9s; }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-header {
    position: relative;
    padding: 4.5rem 0 4rem;
    text-align: center;
    color: var(--paper);
    background:
        linear-gradient(rgba(29, 17, 9, .72), rgba(29, 17, 9, .78)),
        var(--coffee-800) center/cover no-repeat;
}
.page-header h1 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom: .7rem;
}
.page-header nav { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; font-size: .92rem; }
.page-header nav a { color: var(--amber-100); text-decoration: none; }
.page-header nav a:last-child { color: rgba(255,255,255,.85); pointer-events: none; }
.page-header nav .sep { color: rgba(255,255,255,.5); }

/* ==========================================================================
   Why choose us (feature cards on home)
   ========================================================================== */
.feature-strip {
    position: relative;
}
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1.5rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.feature-card .feature-icon {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--amber-050);
    color: var(--amber-700);
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.feature-card h3 {
    font-size: 1.12rem;
    margin-bottom: .6rem;
    color: var(--coffee-900);
}
.feature-card p {
    color: var(--muted);
    font-size: .93rem;
    line-height: 1.6;
    margin: 0;
}

/* Stats band */
.stats-band {
    background: var(--coffee-900);
    color: var(--paper);
}
.stats-band .stat {
    text-align: center;
    padding: 1rem .5rem;
}
.stats-band .stat .num {
    font-family: var(--font-head);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--amber-500);
    display: block;
    line-height: 1.1;
}
.stats-band .stat .label {
    display: block;
    color: #e6d9c4;
    font-size: .92rem;
    margin-top: .4rem;
}

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { align-items: center; }
.about-media { position: relative; }
.about-media img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: 100%;
    object-fit: cover;
}
.about-badge {
    position: absolute;
    left: -1.2rem;
    bottom: -1.2rem;
    background: var(--amber-500);
    color: var(--coffee-950);
    border-radius: var(--radius-sm);
    padding: 1rem 1.4rem;
    box-shadow: var(--shadow-md);
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.2;
}
.about-badge small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .05em; }
.about-copy p { color: var(--muted); }
.about-points { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; }
.about-points li { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.about-points li i { color: var(--amber-600); margin-top: .35rem; }
.about-points li span { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Service cards
   ========================================================================== */
.service-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.2rem 1.8rem;
    height: 100%;
    text-align: center;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--amber-100); }
.service-card .service-number {
    position: absolute;
    top: .6rem; right: 1.1rem;
    font-family: var(--font-head);
    font-size: 2.6rem;
    font-weight: 700;
    color: rgba(55, 41, 29, .07);
    line-height: 1;
}
.service-card i {
    font-size: 2rem;
    color: var(--amber-600);
    display: block;
    margin-bottom: 1rem;
}
.service-card h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.service-card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ==========================================================================
   Process steps
   ========================================================================== */
.step-card { text-align: center; padding: .5rem; }
.step-card .step-num {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--coffee-900);
    color: var(--amber-500);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--amber-050);
}
.step-card h3 { font-size: 1.05rem; }
.step-card p { color: var(--muted); font-size: .93rem; }

/* ==========================================================================
   Income section (parallax band + table)
   ========================================================================== */
.income-section {
    position: relative;
    color: var(--paper);
    background:
        linear-gradient(rgba(29, 17, 9, .82), rgba(29, 17, 9, .86)),
        var(--coffee-800) center/cover no-repeat fixed;
}
.income-section .section-head h2 { color: #fff; }
.income-section .section-head .eyebrow { color: var(--amber-100); }
.income-section .section-head p.lead { color: #d9cbb6; }

.income-table {
    background: rgba(255, 253, 249, .96);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 0;
}
.income-table thead th {
    background: var(--coffee-900);
    color: var(--amber-050);
    border: 0;
    padding: 1rem .75rem;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
}
.income-table td {
    padding: .95rem .75rem;
    color: var(--ink);
    font-size: .95rem;
    border-color: var(--line);
}
.income-table tbody tr:nth-child(even) { background: var(--amber-050); }
.income-table tr.highlight-row { background: var(--amber-500) !important; }
.income-table tr.highlight-row td { color: var(--coffee-950); font-weight: 700; border-color: rgba(29,17,9,.15); }
.income-note { font-size: .85rem; color: #d9cbb6; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faqs .card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: .9rem;
    background: var(--paper);
}
.faqs .card-header { background: transparent; border: 0; padding: 0; }
.faqs .card-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    color: var(--coffee-900);
    font-weight: 600;
    text-decoration: none;
}
.faqs .card-header a:hover { color: var(--amber-700); }
.faqs .card-header a::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f067";
    font-size: .8rem;
    color: var(--amber-700);
    transition: transform .25s ease;
    flex: 0 0 auto;
}
.faqs .card-header a[aria-expanded="true"]::after { content: "\f068"; }
.faqs .card-body { padding: 0 1.2rem 1.2rem; color: var(--muted); font-size: .96rem; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials {
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.testimonial-slider-nav { width: 300px; margin: 0 auto; }
.testimonial-slider-nav .slick-slide { opacity: .35; transform: scale(.92); transition: all .4s ease; }
.testimonial-slider-nav .slick-center { opacity: 1; transform: scale(1.15); }
.testimonial-slider-nav img {
    width: 74px; height: 74px;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--paper);
    box-shadow: var(--shadow-sm);
}
.testimonial-card {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    padding: 2.2rem 1.5rem 1rem;
}
.testimonial-card .stars { color: var(--amber-500); font-size: .9rem; letter-spacing: .2em; margin-bottom: 1.1rem; }
.testimonial-card blockquote {
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: var(--coffee-800);
    font-style: italic;
    border: 0;
    padding: 0;
    margin: 0 0 1.6rem;
}
.testimonial-card figcaption { font-size: .95rem; color: var(--muted); }
.testimonial-card figcaption strong { display: block; color: var(--coffee-900); font-family: var(--font-head); font-size: 1.05rem; }

/* ==========================================================================
   Blog cards
   ========================================================================== */
.blog-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card .blog-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.blog-card .blog-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-media img { transform: scale(1.05); }
.blog-card .blog-media .blog-tag {
    position: absolute;
    top: .9rem; left: .9rem;
    background: var(--amber-500);
    color: var(--coffee-950);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
}
.blog-card .blog-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.blog-card .blog-meta { font-size: .8rem; color: var(--muted); margin-bottom: .7rem; }
.blog-card .blog-meta a { color: var(--amber-700); text-decoration: none; }
.blog-card h3 { font-size: 1.15rem; line-height: 1.4; margin-bottom: .6rem; }
.blog-card h3 a { color: var(--coffee-900); text-decoration: none; }
.blog-card h3 a:hover { color: var(--amber-700); }
.blog-card .blog-excerpt { color: var(--muted); font-size: .93rem; flex: 1; }
.blog-card .read-more {
    margin-top: 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--amber-700);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem;
}
.blog-card .read-more:hover { color: var(--coffee-800); }
.blog-card .read-more i { transition: transform .2s ease; }
.blog-card .read-more:hover i { transform: translateX(4px); }

/* ==========================================================================
   Single blog post
   ========================================================================== */
.single-content .article-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.3; }
.single-content .article-meta { color: var(--muted); font-size: .88rem; margin-bottom: 1.6rem; }
.single-content .article-meta a { color: var(--amber-700); text-decoration: none; }
.single-content .article-hero {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.8rem;
}
.single-content h2 { font-size: 1.55rem; margin-top: 2.2rem; }
.single-content h3 { font-size: 1.25rem; margin-top: 1.9rem; }
.single-content p { color: var(--ink); font-size: 1.02rem; }
.single-content ul, .single-content ol { color: var(--ink); padding-left: 1.3rem; margin-bottom: 1em; }
.single-content li { margin-bottom: .4rem; }

.cta-box {
    background: linear-gradient(135deg, var(--amber-500), var(--amber-600));
    border-radius: var(--radius);
    color: var(--coffee-950);
    padding: 1.8rem 1.8rem;
    margin-top: 2.2rem;
}
.cta-box h3 { color: var(--coffee-950); font-size: 1.3rem; }
.cta-box p { color: rgba(29, 17, 9, .85); margin-bottom: 1.1rem; }
.cta-box .btn-dark { background: var(--coffee-900); color: var(--paper); border-color: var(--coffee-900); }
.cta-box .btn-dark:hover { background: var(--paper); color: var(--coffee-900); border-color: var(--paper); }

/* Sidebar */
.sidebar-widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    margin-bottom: 1.6rem;
}
.sidebar-widget h4 {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--amber-100);
}
.recent-post { display: flex; flex-direction: column; }
.recent-post a {
    color: var(--ink);
    text-decoration: none;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--line);
    font-size: .93rem;
}
.recent-post a:last-child { border-bottom: 0; }
.recent-post a:hover { color: var(--amber-700); padding-left: .35rem; }

/* ==========================================================================
   Contact / Register forms
   ========================================================================== */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: start; }

.contact-panel {
    background: var(--coffee-900);
    color: #e9ddcb;
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
}
.contact-panel h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1.4rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item i {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--amber-500);
    font-size: 1.05rem;
}
.contact-item h4 { color: var(--amber-100); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem; }
.contact-item p { margin: 0; color: #f2ead9; font-size: .98rem; }
.contact-item a { color: #f2ead9; text-decoration: none; }
.contact-item a:hover { color: var(--amber-100); }

.form-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-sm);
}
.form-panel h3 { font-size: 1.25rem; margin-bottom: 1.4rem; }

.form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .72rem .95rem;
    color: var(--ink);
    background: var(--paper);
    font-size: .95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(193, 134, 59, .18);
    outline: none;
}
textarea.form-control { min-height: 140px; resize: vertical; }
.form-group { margin-bottom: 1.1rem; }
.form-label { font-size: .85rem; font-weight: 600; color: var(--coffee-800); margin-bottom: .35rem; display: block; }
.form-hint { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--coffee-950); color: #cbbba4; padding: 4rem 0 0; }
.footer .footer-col { margin-bottom: 2.2rem; }
.footer h3 {
    color: var(--amber-100);
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.footer-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--font-head); color: #fff; text-decoration: none;
    font-size: 1.15rem; margin-bottom: 1rem;
}
.footer-brand:hover { color: #fff; }
.footer-brand span strong { letter-spacing: .16em; }
.footer-about p { font-size: .92rem; line-height: 1.7; }
.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
    color: #cbbba4;
    text-decoration: none;
    font-size: .94rem;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover { color: var(--amber-500); padding-left: .3rem; }
.footer-contact li { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; font-size: .93rem; }
.footer-contact li i { color: var(--amber-500); width: 16px; text-align: center; }
.footer-contact a { color: #cbbba4; text-decoration: none; }
.footer-contact a:hover { color: var(--amber-500); }

.footer-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-social a {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #e6d9c4;
    font-size: .9rem;
    text-decoration: none;
    transition: all .2s ease;
}
.footer-social a:hover { background: var(--amber-500); border-color: var(--amber-500); color: var(--coffee-950); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.4rem 0;
    margin-top: 1.5rem;
    font-size: .86rem;
}
.footer-bottom p { margin: 0; }
.footer-privacy { color: var(--amber-100); margin-left: .4rem; }
.footer-privacy:hover { text-decoration: underline; }
.footer-credit { text-align: right; color: var(--amber-100); font-style: italic; font-family: var(--font-head); }

/* ==========================================================================
   Floating buttons
   ========================================================================== */
.whatsapp-float, .back-to-top {
    position: fixed;
    right: 1.4rem;
    z-index: 900;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: transform .2s ease, background .2s ease;
}
.whatsapp-float {
    bottom: 1.4rem;
    background: #25d366;
    color: #fff;
    font-size: 1.5rem;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; background: #1eb457; }
.back-to-top {
    bottom: 5.1rem;
    background: var(--coffee-800);
    color: var(--amber-100);
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease, background .2s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.back-to-top:hover { background: var(--amber-500); color: var(--coffee-950); }

/* ==========================================================================
   Animations
   ========================================================================== */
.hero .carousel-caption h1, .hero .carousel-caption p, .hero .carousel-caption .hero-cta {
    animation-duration: .9s;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .top-contact { display: none !important; }
    .navbar-nav { padding: .6rem 0; }
    .navbar-nav .nav-link { padding: .5rem .6rem !important; }
    .btn-nav { margin: .6rem 0 .4rem; display: inline-block; }
    .contact-wrap { grid-template-columns: 1fr; }
    .about-badge { left: 1rem; bottom: 1rem; }
    .footer-credit { text-align: left; margin-top: .3rem; }
}

@media (max-width: 575.98px) {
    .section { padding: 3.6rem 0; }
    .hero { height: 74vh; min-height: 440px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .whatsapp-float, .back-to-top { width: 44px; height: 44px; right: 1rem; }
    .whatsapp-float { bottom: 5.2rem; }
    .back-to-top { bottom: 9.6rem; }
}

/* ==========================================================================
   New UI features
   ========================================================================== */

/* ---------- Preloader ---------- */
.preloader {
    position: fixed; inset: 0;
    z-index: 9999;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .4s ease, visibility .4s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader .preloader-logo { animation: prePulse 1.2s ease-in-out infinite; }
.preloader .preloader-logo img { width: 64px; height: 64px; }
@keyframes prePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.preloader .preloader-bar {
    width: 120px; height: 3px; margin: 1rem auto 0;
    background: var(--line); border-radius: 3px; overflow: hidden;
}
.preloader .preloader-bar span { display: block; height: 100%; width: 40%; background: var(--amber-500); animation: preSlide 1.1s ease-in-out infinite; }
@keyframes preSlide { 0% { transform: translateX(-100%);} 100% { transform: translateX(300%);} }

/* ---------- Dark mode ---------- */
html[data-theme="dark"] {
    --coffee-950: #0b0705;
    --coffee-900: #141009;
    --coffee-800: #1d150e;
    --coffee-700: #2a1e13;
    --coffee-600: #3a2a1a;
    --amber-500:  #d39a52;
    --amber-600:  #c1863b;
    --amber-700:  #d39a52;
    --amber-100:  #e9d3ac;
    --amber-050:  #33271a;
    --cream:      #141009;
    --paper:      #1d1710;
    --ink:        #e9e0d2;
    --muted:      #b6a68f;
    --line:       #3a2c1d;
    --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --shadow-md:  0 4px 14px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.45);
}
html[data-theme="dark"] .btn-outline { background: transparent; border-color: var(--amber-500); color: var(--amber-500); }
html[data-theme="dark"] .btn-outline:hover { background: var(--amber-500); color: var(--coffee-950); }
html[data-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e9e0d2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .top-bar { background: var(--coffee-950); }
html[data-theme="dark"] .footer { background: var(--coffee-950); }
html[data-theme="dark"] .testimonial-card { background: var(--paper); }
html[data-theme="dark"] .faq-card { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .blog-card { background: var(--paper); }
html[data-theme="dark"] ::selection { background: var(--amber-500); color: var(--coffee-950); }

/* Theme toggle */
.theme-toggle {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: var(--amber-050); color: var(--amber-700); border-color: var(--amber-500); }
.theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .theme-toggle .fa-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* ---------- How it works timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1rem; }
.timeline-item { text-align: center; position: relative; }
.timeline-item .tl-ico {
    width: 76px; height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--amber-050);
    color: var(--amber-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    position: relative;
    z-index: 2;
}
.timeline-item .tl-step {
    position: absolute; top: -8px; left: 50%;
    transform: translateX(calc(-50% + 34px));
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--amber-500);
    color: var(--coffee-950);
    font-family: var(--font-head);
    font-size: .78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    border: 2px solid var(--paper);
}
.timeline-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.timeline-item p { color: var(--muted); font-size: .88rem; margin: 0; }
.timeline-item::before {
    content: "";
    position: absolute; top: 38px; left: -25%;
    width: 50%; height: 2px;
    background: var(--line);
    z-index: 1;
}
.timeline-item:first-child::before { display: none; }
@media (max-width: 767.98px) {
    .timeline { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
    .timeline-item:nth-child(3)::before { display: none; }
}

/* ---------- Multi-step registration form ---------- */
.steps-header { display: flex; margin-bottom: 1.6rem; }
.steps-header .step-chip {
    flex: 1;
    text-align: center;
    position: relative;
    color: var(--muted);
}
.steps-header .step-chip .step-num {
    width: 34px; height: 34px;
    margin: 0 auto .35rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cream);
    border: 2px solid var(--line);
    font-weight: 700; font-size: .85rem;
    position: relative; z-index: 2;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.steps-header .step-chip .step-label { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.steps-header .step-chip::before {
    content: "";
    position: absolute; top: 17px; left: -50%;
    width: 100%; height: 2px;
    background: var(--line);
    z-index: 1;
}
.steps-header .step-chip:first-child::before { display: none; }
.steps-header .step-chip.active { color: var(--coffee-800); }
.steps-header .step-chip.active .step-num { background: var(--amber-500); border-color: var(--amber-500); color: var(--coffee-950); }
.steps-header .step-chip.done .step-num { background: var(--amber-050); border-color: var(--amber-500); color: var(--amber-700); }
.steps-header .step-chip.done::before { background: var(--amber-500); }
html[data-theme="dark"] .steps-header .step-chip.active { color: var(--ink); }

.form-progress { height: 6px; border-radius: 6px; background: var(--line); margin: 0 0 1.8rem; overflow: hidden; }
.form-progress span { display: block; height: 100%; width: 33.333%; background: var(--amber-500); border-radius: 6px; transition: width .35s ease; }

.form-step { display: none; }
.form-step.active { display: block; animation: fadeStep .35s ease; }
@keyframes fadeStep { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-nav { display: flex; gap: .8rem; align-items: center; margin-top: 1.4rem; }
.form-nav .btn { min-width: 140px; justify-content: center; }
.form-nav .btn-link { border: 0; background: none; color: var(--muted); font-weight: 600; cursor: pointer; text-decoration: none; }
.form-nav .btn-link:hover { color: var(--amber-700); }

/* ---------- Blog filter & search ---------- */
.blog-toolbar { max-width: 720px; margin: 0 auto 2.4rem; }
.blog-search {
    position: relative; max-width: 480px; margin: 0 auto 1.4rem;
}
.blog-search input {
    width: 100%;
    padding: .8rem 1rem .8rem 2.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: .95rem;
}
.blog-search input:focus { border-color: var(--amber-500); outline: none; box-shadow: 0 0 0 3px rgba(193,134,59,.18); }
.blog-search i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.blog-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.blog-filter {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .86rem; font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter:hover { border-color: var(--amber-500); color: var(--amber-700); }
.blog-filter.active { background: var(--amber-500); border-color: var(--amber-500); color: var(--coffee-950); }
.blog-grid .col-lg-4 { transition: opacity .3s ease, transform .3s ease; }
.blog-grid .col-lg-4.hide { display: none; }
.blog-no-results { text-align: center; color: var(--muted); padding: 3rem 0; display: none; }

/* ---------- Share buttons ---------- */
.share-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin-top: 2.6rem; padding-top: 1.6rem;
    border-top: 1px solid var(--line);
}
.share-tools .share-label { font-weight: 700; color: var(--coffee-800); margin-right: .3rem; font-size: .95rem; }
.share-tools a {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .86rem; font-weight: 600;
    color: #fff; text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
}
.share-tools a:hover { transform: translateY(-2px); opacity: .9; }
.share-wa { background: #25d366; }
.share-fb { background: #1877f2; }
.share-x  { background: #111; }

/* ---------- Reading progress ---------- */
.reading-progress {
    position: fixed; top: 0; left: 0; z-index: 1050;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--amber-500), var(--amber-600));
    transition: width .1s linear;
}

/* ---------- Table of contents ---------- */
.article-toc {
    background: var(--amber-050);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.2rem 1.4rem;
    margin-bottom: 2rem;
    font-size: .92rem;
}
.article-toc > strong { display: block; margin-bottom: .5rem; color: var(--coffee-800); font-family: var(--font-head); font-size: 1rem; }
.article-toc ol { margin: 0; padding-left: 1.1rem; }
.article-toc li { margin-bottom: .3rem; }
.article-toc a { color: var(--ink); text-decoration: none; }
.article-toc a:hover { color: var(--amber-700); }

/* ---------- Gallery ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.2rem; }
.gallery-filter {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    padding: .5rem 1.2rem;
    font-size: .86rem; font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-filter:hover { border-color: var(--amber-500); color: var(--amber-700); }
.gallery-filter.active { background: var(--amber-500); border-color: var(--amber-500); color: var(--coffee-950); }
.gallery-grid .gallery-item { width: 25%; padding: 0 .75rem; margin-bottom: 1.5rem; }
@media (max-width: 991.98px) { .gallery-grid .gallery-item { width: 33.3333%; } }
@media (max-width: 767.98px) { .gallery-grid .gallery-item { width: 50%; } }
@media (max-width: 575.98px) { .gallery-grid .gallery-item { width: 100%; } }
.gallery-grid { margin-left: -.75rem; margin-right: -.75rem; }
.gallery-grid .gallery-item a { display: block; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.gallery-grid .gallery-item img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-grid .gallery-item a:hover img { transform: scale(1.06); }
.gallery-grid .gallery-item a::after {
    content: "\f00e";
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff;
    background: rgba(29,17,9,.35);
    opacity: 0; transition: opacity .3s ease;
}
.gallery-grid .gallery-item a:hover::after { opacity: 1; }

/* ---------- Map ---------- */
.map-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    line-height: 0;
}
.map-wrap iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------- Cookie consent ---------- */
.cookie-banner {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem;
    z-index: 2000;
    max-width: 520px;
    margin: 0 auto;
    background: var(--coffee-900);
    color: #e9ddcb;
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-md);
    display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    transform: translateY(140%);
    transition: transform .4s ease;
}
.cookie-banner.show { transform: translateY(0); }
.cookie-banner p { margin: 0; font-size: .9rem; flex: 1 1 260px; }
.cookie-banner a { color: var(--amber-100); text-decoration: underline; }
.cookie-banner .btn { padding: .55rem 1.2rem; font-size: .88rem; }
html[data-theme="dark"] .cookie-banner { background: var(--coffee-800); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1200;
    background: var(--paper);
    border-top: 1px solid var(--line);
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(29,17,9,.1);
}
.mobile-cta .row { margin: 0; }
.mobile-cta .btn { width: 100%; justify-content: center; padding: .7rem .5rem; font-size: .92rem; }
.mobile-cta .btn-ghost { background: var(--amber-050); color: var(--coffee-800); border: 1px solid var(--line); }
.mobile-cta .btn-ghost:hover { background: var(--amber-100); color: var(--coffee-950); }
@media (max-width: 575.98px) {
    body { padding-bottom: 72px; }
    .mobile-cta { display: block; }
    .cookie-banner { bottom: 5.6rem; }
}

/* ---------- Scroll reveal fallback (WOW) ---------- */
body { overflow-x: hidden; }

/* ==========================================================================
   Sticky nav polish + anchor offset
   ========================================================================== */
html { scroll-padding-top: 84px; }
.nav-bar.nav-sticky { padding-top: .4rem !important; padding-bottom: .4rem !important; }

/* ==========================================================================
   Footer newsletter
   ========================================================================== */
.newsletter-form { margin-top: 1.15rem; max-width: 330px; }
.newsletter-label {
    display: block;
    font-family: var(--font-head);
    font-size: .9rem;
    color: var(--amber-100);
    margin-bottom: .5rem;
}
.newsletter-row { display: flex; gap: .5rem; }
.newsletter-row .form-control {
    border-radius: var(--radius-sm);
    background: var(--coffee-950);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
}
.newsletter-row .form-control::placeholder { color: rgba(255,255,255,.5); }
.newsletter-row .form-control:focus {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(196,131,55,.2);
}
.newsletter-row .btn {
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    padding: .55rem 1rem;
}
.newsletter-status { font-size: .82rem; margin: .5rem 0 0; color: var(--amber-100); }
.newsletter-status.is-error { color: #ffb4a2; }
html[data-theme="dark"] .newsletter-row .form-control { background: #1e140c; }

/* ==========================================================================
   Styled checkbox (registration consent)
   ========================================================================== */
.terms-check {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 1rem;
}
.terms-check .form-check-input {
    position: absolute;
    left: 0;
    top: .2rem;
    margin: 0;
    width: 1.2rem;
    height: 1.2rem;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--amber-600);
    border-radius: 4px;
    background: var(--paper);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.terms-check .form-check-input:checked {
    background-color: var(--amber-600);
    border-color: var(--amber-600);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M6.5 12.2 2.3 8l1.4-1.4 2.8 2.8 5.8-5.8L13.7 5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: .8rem;
}
.terms-check .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196,131,55,.25);
}
.terms-check .form-check-label {
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
}
.terms-check .form-check-label a {
    color: var(--amber-700);
    text-decoration: underline;
}
html[data-theme="dark"] .terms-check .form-check-input { background: var(--paper); }

/* ==========================================================================
   Article prev / next + related posts
   ========================================================================== */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.2rem 0;
}
.article-nav-link {
    display: block;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--amber-050);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.article-nav-link:hover {
    border-color: var(--amber-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.article-nav-link.next { text-align: right; }
.article-nav-link span {
    display: block;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--amber-700);
    margin-bottom: .3rem;
}
.article-nav-link strong {
    display: block;
    font-family: var(--font-head);
    font-size: .95rem;
    line-height: 1.35;
    color: var(--ink);
}
.article-nav-link.disabled { opacity: .45; pointer-events: none; background: transparent; }
@media (max-width: 575.98px) {
    .article-nav { grid-template-columns: 1fr; }
}

.related-posts { margin: 1rem 0 2rem; }
.related-posts h2 {
    font-family: var(--font-head);
    font-size: 1.25rem;
    color: var(--coffee-900);
    margin-bottom: 1rem;
}
.related-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.related-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.related-card span {
    display: block;
    padding: .7rem .9rem;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--ink);
}
html[data-theme="dark"] .related-card { background: var(--paper); }
html[data-theme="dark"] .related-posts h2 { color: var(--amber-100); }
html[data-theme="dark"] .article-nav-link { background: var(--coffee-800); border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .article-nav-link strong { color: var(--amber-050); }

/* ==========================================================================
   Markets & Weather page
   ========================================================================== */
.market-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    height: 100%;
}
.market-card-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--coffee-900);
    margin-bottom: .3rem;
}
.market-card-head i { color: var(--amber-600); font-size: 1.1rem; }
.market-sub {
    color: var(--muted);
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.price-value {
    font-family: var(--font-head);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--coffee-900);
}
.price-change {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
}
.price-change.up { color: #1b7f4d; background: rgba(27,127,77,.1); }
.price-change.down { color: #b23b2e; background: rgba(178,59,46,.1); }
.market-usd { margin: .6rem 0 0; font-size: .92rem; color: var(--muted); }
.market-usd strong { color: var(--coffee-800); }
.market-meta { margin: .8rem 0 0; font-size: .8rem; color: var(--muted); }
.market-stale { margin: .6rem 0 0; font-size: .82rem; color: #b23b2e; }
.market-unavailable { color: var(--muted); }
.market-note {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
    font-size: .82rem;
    color: var(--muted);
}
.market-note i { color: var(--amber-600); }

/* Weather */
.weather-loading, .weather-error { color: var(--muted); }
.weather-error { color: #b23b2e; }
.weather-now {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.weather-temp { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; color: var(--coffee-900); }
.weather-desc { color: var(--muted); font-size: .95rem; }
.weather-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: .4rem .9rem;
    flex: 1;
    min-width: 220px;
}
.weather-stats li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    color: var(--muted);
    border-bottom: 1px dotted var(--line);
    padding: .2rem 0;
}
.weather-stats strong { color: var(--coffee-800); }
.weather-daily { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.weather-day {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .5rem 0;
    border-bottom: 1px dotted var(--line);
    font-size: .85rem;
    color: var(--ink);
}
.weather-day:last-child { border-bottom: 0; }
.weather-day i { color: var(--amber-600); width: 1.1rem; text-align: center; }
.weather-day-name { font-weight: 700; width: 3.2rem; }
.weather-day-desc { flex: 1; color: var(--muted); }
.weather-day-prob { color: var(--amber-700); font-size: .78rem; min-width: 3.4rem; text-align: right; }
.weather-day-temp { font-weight: 600; white-space: nowrap; }
@media (max-width: 575.98px) {
    .weather-day { flex-wrap: wrap; row-gap: .2rem; }
    .weather-day-desc { width: 100%; flex: none; order: 3; }
    .weather-day-prob { order: 4; }
}

/* News feed */
.news-head { margin-top: 2.5rem; }
.news-feed {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-title {
    display: block;
    font-weight: 600;
    color: var(--coffee-900);
    font-size: 1rem;
    line-height: 1.35;
    text-decoration: none;
}
.news-title:hover { color: var(--amber-700); }
.news-meta {
    display: block;
    font-size: .76rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--amber-700);
    margin-top: .25rem;
}
.news-excerpt { margin: .45rem 0 0; font-size: .88rem; color: var(--muted); }
.news-foot { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); }

html[data-theme="dark"] .market-card,
html[data-theme="dark"] .news-feed { background: var(--coffee-800); }
html[data-theme="dark"] .market-card-head,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .weather-temp { color: var(--amber-050); }
html[data-theme="dark"] .weather-stats strong,
html[data-theme="dark"] .market-usd strong,
html[data-theme="dark"] .news-title { color: var(--amber-050); }
html[data-theme="dark"] .news-title:hover { color: var(--amber-100); }